/* Atelier Leza Art — app.css
   Design system : MASTER.md (palette marque Leza Art, direction « fiche d'atelier ») */

:root {
  --bg: #F7F3EE;
  --surface: #FFFFFF;
  --surface-2: #F0E9DF;
  --ink: #2C1810;
  --ink-soft: #5C4A3A;
  --line: #E0D5C4;
  --accent: #8B5E3C;
  --or: #C9A84C;
  --cta: #2C1810;
  --ok: #3E6B4F;
  --danger: #9A3B26;
  --radius: 4px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.conteneur { max-width: 1340px; margin: 0 auto; padding: 0 20px; }

/* En-tête */
.entete { border-bottom: 1px solid var(--line); background: var(--surface); }
.entete-inner { display: flex; align-items: baseline; gap: 14px; padding: 14px 20px; flex-wrap: wrap; }
.marque { font-size: 1.15rem; margin: 0; letter-spacing: 0.01em; }
.marque strong { color: var(--accent); }
.sous-marque { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Intro */
.intro { padding: 34px 0 6px; }
.intro h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 8px; letter-spacing: -0.01em; }
.intro-texte { margin: 0; max-width: 62ch; color: var(--ink-soft); }

/* Formulaire */
.formulaire {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin: 22px 0;
}
/* Disposition : configuration en sidebar qui suit le scroll + résultats à droite */
.grille-app { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; margin: 4px 0 26px; }
.panneau-config {
  position: sticky; top: 14px; align-self: start;
  max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 16px 12px;
}
.panneau-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panneau-titre { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.panneau-statut { font-size: 0.75rem; color: var(--ok); white-space: nowrap; }
.panneau-aide { margin: 6px 0 0; }
.panneau-config .formulaire {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: none; border: none; padding: 0; margin: 12px 0 0;
}
.panneau-config .champ-action .bouton { width: 100%; text-align: center; }
.panneau-config .champ-action { display: block; }
.lien-remise { display: block; text-align: center; margin-top: 10px; font-size: 0.82rem;
  color: var(--ink-soft); text-decoration: none; }
.lien-remise:hover { color: var(--accent); text-decoration: underline; }
.zone-resultat { min-width: 0; }
.champ label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
.champ select, .champ input[type="number"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; cursor: pointer;
}
.champ select:hover, .champ input[type="number"]:hover { border-color: var(--accent); }
.champ select:focus-visible, .champ input[type="number"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aide-champ { margin: 5px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.champ-action { display: flex; align-items: end; }
.bouton {
  font: inherit; font-weight: 600; color: #FDFAF5; background: var(--cta);
  border: 1px solid var(--cta); border-radius: var(--radius);
  padding: 9px 20px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.bouton:hover { opacity: 0.92; }
.bouton:active { transform: translateY(1px); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bouton-secondaire {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.bouton-secondaire:hover { border-color: var(--accent); opacity: 1; }

/* Alertes */
.alerte {
  border-left: 3px solid var(--danger); background: var(--surface-2);
  padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; font-size: 0.95rem;
}
.alerte-danger { border-color: var(--danger); }
.alerte-conseil { border-color: var(--ok); }
/* Proposition d'atelier (jeu de Ø, 30/09/2026) : informatif, pas une erreur. */
.alerte-info { border-color: var(--accent); }
.alerte-info .bouton { margin-top: 8px; }

/* Résultat */
.resultat { margin: 8px 0 40px; }
.resultat-entete {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; padding: 18px 0 10px;
}
.resultat-crumb { margin: 0 0 4px; color: var(--ink-soft); font-size: 0.88rem; }
.resultat-entete h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; }

.sante { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.pilule {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 3px 12px; font-size: 0.82rem;
}
.pilule-ok { color: var(--ok); border-color: #BFD4C5; }
.pilule-info { color: var(--accent); border-color: #D9C6B0; }
.pilule-danger { color: var(--danger); border-color: #E0B5A8; }

/* Plans SVG */
.plans figure { margin: 18px 0; }
.plans figcaption {
  font-weight: 600; font-size: 0.92rem; margin-bottom: 8px;
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.plan { width: 100%; height: auto; background: #FDFAF5; border: 1px solid var(--line); border-radius: var(--radius); }
.plans .plan-enveloppe { overflow-x: auto; }

/* styles SVG (classes définies dans plans.py) */
.pl-corps { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.pl-bois { fill: url(#hachures); stroke: var(--ink); stroke-width: 1.2; }
.pl-paroi { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.pl-air { fill: #FFFFFF; stroke: var(--ink); stroke-width: 0.8; }
.pl-plug { fill: url(#hachures); stroke: var(--ink); stroke-width: 0.8; }
.pl-bloc { fill: url(#hachures); stroke: var(--ink); stroke-width: 1; }
.pl-bouche { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1; }
.pl-tsh { fill: #EFE3D2; stroke: var(--accent); stroke-width: 1.2; }
.pl-fente { fill: var(--ink); }
.pl-trou { fill: var(--ink); }
.pl-axe { stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 4 3; }
.pl-cote { stroke: var(--accent); stroke-width: 0.9; }
.pl-hair { stroke: var(--line); stroke-width: 0.8; }
.pl-hair2 { stroke: var(--line); stroke-width: 0.8; stroke-dasharray: 3 3; }
.pl-rappel { stroke: var(--line); stroke-width: 0.7; stroke-dasharray: 2 3; }
.pl-split { stroke: var(--accent); stroke-width: 2; }
.pl-trait { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.pl-cotetxt { fill: var(--accent); font: 600 15px var(--mono); }
.pl-coteval { fill: var(--accent); font: 600 15px var(--mono); }
.pl-valtrou { fill: var(--accent); font: 600 13px var(--mono); }
.pl-zero { fill: var(--ink-soft); font: 400 13px var(--mono); }
.pl-zone { fill: var(--ink-soft); font: 400 14px var(--sans); letter-spacing: 0.01em; }
.pl-trouno { fill: var(--ink); font: 600 15px var(--mono); }
.pl-legende { fill: var(--ink-soft); font: 400 12px var(--sans); }
.pl-encadre { fill: #FDFAF5; stroke: var(--line); stroke-width: 1; }
.pl-encadretitre { fill: var(--ink); font: 600 13px var(--sans); }
/* l'encart du nid est déjà agrandi scale(1.5) : textes resserrés pour rester lisibles sans déborder */
.pl-groupe-encart .pl-coteval, .pl-groupe-encart .pl-cotetxt { font: 600 13px var(--mono); }
.pl-groupe-encart .pl-zone { font: 400 11.5px var(--sans); }
.pl-groupe-encart .pl-legende { font: 400 10.5px var(--sans); }

/* Mesures */
.mesures h3, .trous h3, .acoustique h3 {
  font-size: 1.05rem; margin: 30px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.grille-mesures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.mesure {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.mesure-nom { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.mesure-valeur { font: 600 1.22rem var(--mono); color: var(--ink); }
.mesure-valeur .unite { font-size: 0.78rem; color: var(--accent); }
.mesure-note { font-size: 0.8rem; color: var(--ink-soft); }
.mesure-phare { background: var(--surface-2); border-color: var(--accent); }
.mesure-phare .mesure-valeur { font-size: 1.5rem; }

/* --- Schémas de doigtés (accordages — style Basic NAF Design) --- */
h4 { margin: 1.6rem 0 0.5rem; font-size: 1.02rem; color: var(--ink); }
.table-doigtes td, .table-doigtes th { padding: 7px 12px; }
.doigte-schema { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; }
.trou-cellule {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--ink); display: inline-block;
}
.trou-cellule.ferme { background: var(--ink); }
.trou-cellule.ouvert { background: transparent; }
.doigte-texte {
  margin-left: 10px; font-family: var(--mono); font-size: 0.76rem;
  color: var(--ink-soft); letter-spacing: 0.03em;
}
.titre-fin { font-weight: normal; font-size: 0.75rem; color: var(--ink-soft); }
.ligne-croise td { background: var(--surface-2); }
.ligne-fond td { border-top: 2px solid var(--accent); }
.pastille {
  font-size: 0.68rem; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; background: var(--surface-2); color: var(--accent);
  border: 1px solid var(--line); margin-left: 4px;
}

/* Tableau trous */
.tableau-enveloppe { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.92rem; }
thead th {
  text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--surface-2); padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
tbody td { padding: 8px 10px; border-bottom: 1px solid #F0EAE0; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FCF9F4; }
td.num { font: 600 0.9rem var(--mono); color: var(--accent); }
.sous-titre { font-size: 0.7rem; color: var(--ink-soft); font-weight: 400; line-height: 1.3; }
.tbody-accordage { border-top: 2px solid var(--accent); }
.tbody-accordage .ligne-accordage-entete th { background: var(--surface-2); color: var(--bois);
  font-size: 0.78rem; font-weight: 700; text-align: left; letter-spacing: 0.02em; }
.tbody-accordage tr:hover { background: transparent; }
td.note { font-weight: 700; }
.mono { font-family: var(--mono); font-size: 0.88rem; }
.fort { font-weight: 600; }
.doigte { font-family: var(--mono); font-size: 0.82rem; background: var(--surface-2); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.guide-ligne { font-size: 0.92rem; color: var(--ink-soft); margin: 10px 2px 0; max-width: 75ch; }

/* Acoustique */
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.liste-seche { list-style: none; margin: 0; padding: 0; }
.liste-seche li {
  padding: 7px 0; border-bottom: 1px solid #F0EAE0; font-size: 0.94rem;
}
.liste-seche li:last-child { border-bottom: none; }

/* Pied */
.pied { border-top: 1px solid var(--line); margin-top: 30px; padding: 18px 0 34px; color: var(--ink-soft); font-size: 0.85rem; }
.pied p { margin: 2px 0; }
.discret { opacity: 0.8; }

/* Responsive */
@media (max-width: 960px) {
  .grille-app { grid-template-columns: 1fr; }
  .panneau-config { position: static; max-height: none; overflow: visible; }
  .panneau-config .formulaire { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (max-width: 640px) {
  .formulaire { grid-template-columns: 1fr; }
  .resultat-actions { width: 100%; }
}

/* Impression / fiche atelier (pdf.html) */
@media print {
  body { background: #fff; font-size: 11px; }
  .entete, .formulaire, .intro, .resultat-actions, .pied, .panneau-config { display: none; }
  .grille-app { display: block; }
  .conteneur { max-width: none; padding: 0; }
  .resultat { margin: 0; }
  h2, h3 { break-after: avoid; }
  .mesure, .pilule, .alerte { break-inside: avoid; }
  .plan { border: 0.5pt solid #999; }
  table { min-width: 0; }
  a { color: inherit; text-decoration: none; }
}

/* --- Compagnon d'atelier : micro-interactions (thèse validée 08/09) --- */
:root { --hover: #F3EBDF; }
.mesure {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .mesure:hover {
    transform: translateY(-2px);
    border-color: var(--or);
    box-shadow: 0 10px 18px -14px rgba(44, 24, 16, 0.55);
  }
  tbody tr { transition: background-color 0.15s ease; }
  tbody tr:hover td { background: var(--hover); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .resultat, .resultat * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mesure { box-shadow: none !important; }
  tbody tr td { background: transparent !important; }
}

/* --- Réglages fins : diamètres par trou (09/09) --- */
.champ-details { margin-top: 0.9rem; }
.champ-details summary { cursor: pointer; font-weight: 600; color: var(--bois); }
.ligne-diametres { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.mini-champ { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--bois); gap: 0.2rem; }
.mini-champ input { width: 4.6rem; }
.mini-champ select { width: 9rem; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 6px; }
.ligne-accordage { align-items: flex-end; }
/* --- trou sous le plancher 2e octave (MinHoleSize — équivalent du rose NAFlutomat) --- */
.sous-plancher { background: #F6DCD6 !important; color: #8C2F1F; font-weight: 600; }
/* Trous qui se recouvrent (30/09/2026) : erreur de conception, plus grave que le
   plancher 2e registre — fond plus soutenu, même langage visuel. */
.chevauchement { background: #EFC0B6 !important; color: #6E1F12; font-weight: 700; }
@media print {
  .sous-plancher { background: #F6DCD6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chevauchement { background: #EFC0B6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Onglets bois / bambou (10/09/2026) --- */
.onglets { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.onglets-inner { display: flex; gap: 4px; padding: 0 20px; }
.onglet {
  display: inline-block; padding: 10px 18px; margin-bottom: -1px;
  font-size: 0.93rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.onglet:hover { color: var(--ink); background: #FCF9F4; }
.onglet-actif {
  color: var(--ink); background: var(--bg);
  border-color: var(--line); border-top: 2px solid var(--accent);
}

/* Statut du panneau : une saisie est en cours, le calcul attend la fin */
.panneau-statut-attente { color: var(--accent) !important; font-weight: 600; }

/* --- Onglet bambou : tableau des fondamentales possibles --- */
.tableau-fondamentales { min-width: 660px; }
.tableau-fondamentales td.note { font-family: var(--mono); font-size: 1rem; }
.legende-tableau {
  caption-side: top; text-align: left; padding: 0 0 8px;
  font-size: 0.82rem; color: var(--ink-soft);
}
.legende-tableau-suite { font-size: 0.85rem; color: var(--ink-soft); margin: 8px 2px 0; max-width: 80ch; }
.verdict {
  font-size: 0.78rem; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--line); white-space: nowrap;
}
.verdict-ideal { color: var(--ok); border-color: #BFD4C5; background: #F1F7F2; }
.verdict-acceptable { color: var(--accent); border-color: #D9C6B0; background: var(--surface-2); }
.ligne-repere td { border-top: 2px solid var(--accent); }
.encart-suite, .encart-hypotheses {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin: 22px 0 0;
}
.encart-suite h3, .encart-hypotheses h3 { margin: 0 0 8px; font-size: 1rem; }
.encart-suite p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 80ch; }
.encart-hypotheses .liste-seche li { font-size: 0.9rem; }


/* ---------------------------------------------------------------------------
   Étape 2 bambou — fabrication (11/09/2026)
   Le tableau des fondamentales renvoie vers la fiche complète de chaque note :
   lien « Cotes » par ligne, ligne retenue marquée, bloc de fabrication séparé.
   --------------------------------------------------------------------------- */
.cellule-action { white-space: nowrap; text-align: right; }
.lien-cotes {
  display: inline-block; padding: 2px 10px; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--accent); font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  text-decoration: none;
}
.lien-cotes:hover, .lien-cotes:focus-visible {
  border-color: var(--accent); background: var(--surface-2); color: var(--ink);
}
.fabrication {
  margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--line);
}
.fabrication .resultat { padding: 0; }

/* ---------------------------------------------------------------------------
   Onglet « Accordage » (19/09/2026)
   Le relevé de la flûte se fait dans la colonne de gauche, y compris la mesure au
   micro : le champ de fréquence est rempli par le tuner, puis relu par le serveur
   comme n'importe quelle saisie. Le bloc micro suit la charte (or/espresso) et les
   règles d'accessibilité de l'atelier : cible tactile ≥ 44 px, état annoncé
   vocalement (aria-live), jamais d'information portée par la seule couleur.
   --------------------------------------------------------------------------- */
.groupe-micro {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 12px 6px; margin: 0;
}
.groupe-micro legend {
  font-weight: 600; font-size: 0.9rem; padding: 0 6px; color: var(--ink);
}
.ligne-micro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#btn-micro { min-height: 44px; }
.micro-statut { font-size: 0.82rem; color: var(--ink-soft); flex: 1 1 12rem; }
.micro-statut.micro-ok { color: var(--ok); font-weight: 600; }
.micro-statut.micro-erreur { color: var(--danger); }
.etiquette-micro { display: block; font-weight: 600; font-size: 0.88rem; margin: 10px 0 5px; }

/* Case « recaler le calcul sur cette flûte » */
.case-champ .case-ligne {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 600; font-size: 0.9rem; cursor: pointer; margin: 0;
}
.case-champ .case-ligne input[type="checkbox"] {
  width: auto; min-width: 20px; min-height: 20px; margin: 1px 0 0; cursor: pointer;
}

/* Explication repliée du résultat (pourquoi le k2, pourquoi ces positions) */
.diagnostic { margin-top: 16px; }
.diagnostic summary { font-weight: 600; color: var(--accent); cursor: pointer; }
.diagnostic .liste-seche { margin-top: 8px; }
.diagnostic .liste-seche li { font-size: 0.92rem; }

/* Le tableau de perçage : les deux références de mesure sont les colonnes phares */
.trous table td.fort { font-weight: 600; }