/* ⚠️ LA REGLE LA PLUS IMPORTANTE DE CE FICHIER, ET ELLE TIENT EN UNE LIGNE.
 *
 * L'attribut `hidden` cache un element parce que le navigateur lui applique
 * `display: none` — depuis SA feuille de style a lui, celle de l'agent
 * utilisateur. Or n'importe quelle regle ecrite ici avec un selecteur de
 * CLASSE est plus specifique et la BAT. Autrement dit, `.imo-panneau {
 * display: flex }` rend visible un `<aside hidden>` sans la moindre erreur,
 * nulle part.
 *
 * CE QUE CA A COUTE, mesure le 01/11/2026 dans un vrai navigateur : le
 * panneau de schema s'affichait en PERMANENCE, 430 px a droite de chaque
 * ecran, masquant les boutons Calculer, CSV et PDF — et interceptant les
 * clics destines a ce qui se trouvait dessous. Le « j'appuie sur Calculer et
 * rien ne se passe » venait en partie de la.
 *
 * ⚠️ ET AUCUN DE NOS CONTROLES NE POUVAIT LE VOIR : `verifier-ecrans.js` et
 * `verifier-pages.js` montent les pages dans un DOM minimal, SANS feuille de
 * style. Un defaut purement visuel leur est invisible par construction. C'est
 * pour ca qu'il faut regarder les pages avec un navigateur, et pas seulement
 * les faire tourner.
 *
 * Le `!important` est volontaire : `hidden` veut dire cache, il n'y a aucun
 * cas ou une regle locale devrait gagner contre lui. */
[hidden] { display: none !important; }

/* IMO·IA de AMKA — feuille de style partagee par toutes les pages. */
/* Identité Amka : noir, rouge #BB242D échantillonné dans le logo, gris du mot-symbole. */
  :root {
    --noir: #111111; --rouge: #BB242D; --rouge-vif: #D32C36; --anthracite: #3D3D3D;
    --fond: #f4f5f6; --carte: #ffffff; --trait: #e2e4e7; --texte: #17191c;
    --doux: #6a7178; --accent: var(--rouge); --accent-doux: #fdf0f1;
    --err: #A81C25; --err-doux: #fdf2f2; --att: #8a5a00; --att-doux: #fff9ec;
    --vert: #0a6c45; --vert-doux: #eefaf3;
    --ombre: 0 1px 2px rgba(17,17,17,.05), 0 4px 16px rgba(17,17,17,.04);
    --r: 12px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --fond: #121316; --carte: #1a1c20; --trait: #2b2e34; --texte: #e8eaed;
      --doux: #9aa1a9; --accent: #EF5A63; --accent-doux: #2a1719;
      --err: #FF9A9A; --err-doux: #2b1618; --att: #F5C563; --att-doux: #2a2214;
      --vert: #6EDBA4; --vert-doux: #10251b;
      --ombre: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.3);
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--fond); color: var(--texte);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Bandeau ───────────────────────────────────────────────── */
  header {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 10px 16px; background: var(--noir); color: #fff;
    position: sticky; top: 0; z-index: 30;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .marque { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.3px; }
  .marque img { height: 26px; width: auto; display: block; }
  .marque em { font-style: normal; color: var(--rouge-vif); }
  header select, header input {
    background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18);
  }
  header select option { color: #111; }
  .pousse { margin-left: auto; }
  #etat { font-size: 12.5px; color: rgba(255,255,255,.65); min-height: 1em; }

  /* ── Contrôles ─────────────────────────────────────────────── */
  button, select, input, textarea {
    font: inherit; font-size: 14px; color: var(--texte); background: var(--carte);
    border: 1px solid var(--trait); border-radius: 8px; padding: 7px 10px;
  }
  button { cursor: pointer; transition: background .12s, border-color .12s; }
  button:hover:not(:disabled) { border-color: var(--accent); }
  button:disabled { opacity: .45; cursor: not-allowed; }
  .principal { background: var(--rouge); color: #fff; border-color: var(--rouge); font-weight: 600; }
  .principal:hover:not(:disabled) { background: var(--rouge-vif); border-color: var(--rouge-vif); }
  .discret { border-color: transparent; background: transparent; color: var(--doux); }
  .discret:hover { color: var(--err); border-color: var(--trait); }
  header .principal { border-color: var(--rouge); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* ── Onglets de niveau ─────────────────────────────────────── */
  nav {
    display: flex; gap: 6px; padding: 10px 16px 0; overflow-x: auto;
    align-items: center; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav button { white-space: nowrap; background: transparent; border-color: transparent; color: var(--doux); }
  nav button[aria-current="true"] {
    background: var(--carte); color: var(--texte); font-weight: 650;
    border-color: var(--trait); box-shadow: var(--ombre);
  }

  main { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 14px; padding: 12px 16px 28px; align-items: start; }
  .carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); }
  .carte > h2 {
    margin: 0; padding: 12px 15px; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .8px; color: var(--doux); border-bottom: 1px solid var(--trait);
    display: flex; align-items: center; gap: 8px;
  }
  .carte > h2 .puce { width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); flex: none; }
  .corps { padding: 13px 15px; }
  /* ⚠️ UN DÉFILEMENT INVISIBLE EST UNE COLONNE PERDUE. Sous macOS la barre
     de défilement ne s'affiche qu'au moment où l'on fait défiler : le
     tableau de saisie du poids propre était coupé net sur « ou complément »
     et RIEN ne disait qu'un quatrième champ existait. La page ne débordait
     pas, aucun contrôle ne voyait rien, et le champ était simplement
     introuvable.
     Les deux dégradés `local` masquent les ombres aux extrémités ; les deux
     ombres `scroll` n'apparaissent donc que du côté où il reste vraiment
     quelque chose à voir. Pas une ligne de JavaScript. */
  .defile {
    overflow-x: auto;
    background:
      linear-gradient(90deg, var(--carte) 32%, rgba(0, 0, 0, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(90deg, rgba(0, 0, 0, 0), var(--carte) 68%) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center / 13px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center / 13px 100% no-repeat scroll;
  }
  .pile > * + * { margin-top: 14px; }

  /* ── Tableaux ──────────────────────────────────────────────── */
  table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
  th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); font-weight: 650; }
  td.nb, th.nb { text-align: right; }
  /* Le panneau de droite est étroit : ses tableaux doivent plier, pas pousser la
     page. Sans ça, « 242×10 m · 148×12 m · 6×14 m » élargit la colonne et c'est
     le corps entier du document qui se met à défiler latéralement. */
  #resultat table { table-layout: fixed; }
  #resultat td { white-space: normal; overflow-wrap: anywhere; }
  /* Les en-têtes, eux, ne doivent pas se couper au milieu d'un mot
     (« COMMAND / ER ») : on les garde entiers et un peu plus petits. */
  #resultat th { white-space: normal; overflow-wrap: normal; font-size: 9.5px; letter-spacing: .3px; }
  tbody tr:hover { background: var(--accent-doux); }
  tr.faux { background: var(--err-doux); }
  tr.faux td:first-child { box-shadow: inset 3px 0 0 var(--err); }
  .grille input, .grille select { padding: 5px 7px; width: 100%; font-size: 14px; }
  .grille select { min-width: 80px; }
  .grille input[type=number] { text-align: right; }
  .col-nom { min-width: 160px; }
  .calcule { color: var(--doux); }

  /* ── Avis ──────────────────────────────────────────────────── */
  .avis { padding: 10px 12px; border-radius: 9px; margin-bottom: 10px; font-size: 13.5px; border: 1px solid; }
  .avis.err { background: var(--err-doux); color: var(--err); border-color: currentColor; }
  .avis.att { background: var(--att-doux); color: var(--att); border-color: currentColor; }
  .avis b { display: block; margin-bottom: 3px; }
  .avis ul { margin: 6px 0 0; padding-left: 18px; }
  .avis li + li { margin-top: 4px; }

  /* ── Chiffres ──────────────────────────────────────────────── */
  .grand { font-size: 34px; font-weight: 750; letter-spacing: -1px; line-height: 1.05; }
  .grand small { font-size: 17px; font-weight: 600; color: var(--doux); }
  .doux { color: var(--doux); font-size: 12.5px; }
  .chiffre { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
  .chiffre b { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .jauge { height: 8px; background: var(--trait); border-radius: 5px; overflow: hidden; margin: 9px 0 7px; }
  .jauge > i { display: block; height: 100%; background: var(--vert); border-radius: 5px; }
  .gain { background: var(--vert-doux); color: var(--vert); border-radius: 9px; padding: 9px 11px; margin-top: 8px; }

  /* L'assistant. La conversation défile toute seule ; la saisie reste visible. */
  .conversation { max-height: 300px; overflow-y: auto; display: grid; gap: 7px; margin-bottom: 9px; }
  .conversation:empty { display: none; }
  .bulle { border-radius: 9px; padding: 8px 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
  .bulle.moi { background: var(--trait); margin-left: 18px; }
  .bulle.lui { background: var(--fond); border: 1px solid var(--trait); margin-right: 10px; }
  .bulle.doute { background: #fff6e5; border-color: #f0d9a8; color: #6b4e14; }
  #saisieAgent { width: 100%; }
  .apercu { border: 1px solid var(--trait); border-radius: 9px; padding: 9px 11px; margin-bottom: 9px; background: var(--fond); }
  .apercu b { display: block; margin-bottom: 5px; font-size: 13px; }
  .apercu ul { margin: 0 0 8px; padding-left: 16px; font-size: 12.5px; color: var(--doux); }
  .apercu .boutons { display: flex; gap: 7px; }
  .gain .grand { font-size: 22px; }

  /* ── Réglages ──────────────────────────────────────────────── */
  details.reglages > summary { cursor: pointer; padding: 12px 15px; color: var(--doux); font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; }
  .reglage { display: grid; grid-template-columns: 1fr 108px; gap: 9px; align-items: center; padding: 4px 0; font-size: 13.5px; }
  .reglage input[type=checkbox] { justify-self: end; width: 18px; height: 18px; accent-color: var(--rouge); }
  .longueurs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
  .longueurs label {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
    border: 1px solid var(--trait); border-radius: 20px; font-size: 13px; cursor: pointer;
  }
  .longueurs label:has(input:checked) { border-color: var(--rouge); background: var(--accent-doux); color: var(--rouge); font-weight: 600; }
  .longueurs input { accent-color: var(--rouge); }

  .barre-outils { display: flex; gap: 7px; flex-wrap: wrap; padding: 11px 15px; border-top: 1px solid var(--trait); }
  textarea { width: 100%; min-height: 96px; font: 12.5px/1.45 ui-monospace, Menlo, monospace; background: var(--fond); }

  /* ── Fenêtre « Qui sommes-nous » ───────────────────────────── */
  dialog {
    border: none; border-radius: 16px; padding: 0; max-width: 620px; width: calc(100% - 32px);
    background: var(--carte); color: var(--texte); box-shadow: 0 24px 64px rgba(0,0,0,.3);
  }
  dialog::backdrop { background: rgba(10,10,12,.6); backdrop-filter: blur(3px); }
  .apropos-tete { background: var(--noir); color: #fff; padding: 22px 24px; border-radius: 16px 16px 0 0; text-align: center; }
  .apropos-tete img { height: 72px; margin-bottom: 8px; }
  .apropos-tete p { margin: 0; color: rgba(255,255,255,.7); font-size: 13.5px; letter-spacing: 1.5px; text-transform: uppercase; }
  .apropos-corps { padding: 20px 24px 24px; max-height: 60vh; overflow-y: auto; }
  .apropos-corps h3 { margin: 18px 0 6px; font-size: 14.5px; }
  .apropos-corps h3:first-child { margin-top: 0; }
  .apropos-corps p { margin: 0 0 10px; font-size: 14px; }
  .fermer { position: absolute; top: 12px; right: 14px; background: none; border: none; color: rgba(255,255,255,.75); font-size: 24px; line-height: 1; padding: 4px 8px; }
  .fermer:hover { color: #fff; border: none; }

  /* ── Pied de page ──────────────────────────────────────────── */
  footer {
    background: var(--noir); color: rgba(255,255,255,.62); margin-top: 22px;
    padding: 26px 16px calc(24px + env(safe-area-inset-bottom));
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px;
  }
  footer img { height: 46px; }
  footer a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
  footer a:hover { color: #fff; border-color: var(--rouge-vif); }
  footer .sep { margin-left: auto; text-align: right; font-size: 12px; color: rgba(255,255,255,.4); }

  /* ── Mobile : la grille devient des fiches ─────────────────── */
  @media (max-width: 1080px) { main { grid-template-columns: minmax(0,1fr); } }
  @media (max-width: 760px) {
    body { font-size: 16px; }
    header { padding: 9px 12px; gap: 8px; }
    .marque { font-size: 16px; }
    header input#nomProjet { display: none; }
    main { padding: 10px 12px 20px; gap: 12px; }
    .corps, .barre-outils { padding: 12px; }

    /* Un tableau à 11 colonnes est illisible sur un téléphone : chaque plancher
       devient une fiche autonome. Les champs se rangent sur deux colonnes, le
       libellé au-dessus — une fiche tient alors sur un demi-écran au lieu de
       neuf lignes empilées. */
    .grille thead { display: none; }
    .grille, .grille tbody { display: block; width: 100%; }
    .grille tr {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
      border: 1px solid var(--trait); border-radius: 12px; padding: 12px 12px 10px;
      margin: 0 0 11px; background: var(--carte); position: relative;
    }
    .grille tr.faux { border-color: var(--err); background: var(--err-doux); }
    .grille tr.faux td:first-child { box-shadow: none; }
    .grille td {
      border: none; padding: 0; white-space: normal;
      display: flex; flex-direction: column; gap: 3px; min-width: 0;
    }
    .grille td::before {
      content: attr(data-libelle); font-size: 10.5px; line-height: 1.2;
      text-transform: uppercase; letter-spacing: .4px; color: var(--doux); font-weight: 650;
    }
    .grille td[data-libelle=""]::before { display: none; }
    .grille td.plein, .grille td.esp { grid-column: 1 / -1; }
    .grille td.calcule { flex-direction: row; justify-content: space-between; align-items: baseline; }
    .grille input, .grille select { font-size: 16px; padding: 9px 10px; }  /* 16px : iOS ne zoome pas */
    .grille td.suppr { position: absolute; top: 4px; right: 4px; padding: 0; }
    .grille td.suppr button { font-size: 18px; padding: 4px 8px; }
    .barre-outils button { flex: 1 1 46%; }
    .grand { font-size: 30px; }
    footer { flex-direction: column; align-items: flex-start; }
    footer .sep { margin-left: 0; text-align: left; }

    /* Le chiffre qui compte ne doit jamais être à dix écrans de défilement. */
    body { padding-bottom: 62px; }
  }

  /* Barre de résultat, téléphone uniquement. */
  #barreMobile {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    align-items: center; gap: 12px; padding: 9px 14px;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    background: var(--noir); color: #fff; box-shadow: 0 -2px 14px rgba(0,0,0,.25);
  }
  #barreMobile .t { font-size: 19px; font-weight: 750; letter-spacing: -.4px; }
  #barreMobile .d { font-size: 11.5px; color: rgba(255,255,255,.6); line-height: 1.25; }
  #barreMobile .g { color: #6EDBA4; }
  #barreMobile button {
    margin-left: auto; background: var(--rouge); color: #fff; border-color: var(--rouge);
    font-weight: 600; font-size: 13px; white-space: nowrap;
  }
  #barreMobile.faux { background: var(--err); }
  #barreMobile.faux .d { color: rgba(255,255,255,.85); }
  /* Cette règle vient APRÈS la déclaration ci-dessus, sinon le `display: none`
     de même spécificité l'emporterait et la barre resterait invisible. */
  @media (max-width: 760px) { #barreMobile { display: flex; } }

  @media print {
    header, nav, .barre-outils, .saisie, details, button, footer, dialog { display: none !important; }
    main { grid-template-columns: 1fr; padding: 0; }
    body { background: #fff; }
    .carte { border: none; box-shadow: none; }
  }

/* ── Rubriques (ferraillage / métré) ─────────────────────────── */
a.marque { color: inherit; text-decoration: none; }
/* ⚠️ LA BARRE DE NAVIGATION DOIT SE REPLIER, SINON ELLE POUSSE TOUTE LA PAGE.
 *
 * Elle etait en `display: flex` sans `flex-wrap`, avec `white-space: nowrap`
 * sur chaque lien : au-dela d'une certaine largeur, elle ne se coupe pas et
 * ne defile pas — elle ELARGIT le document. Mesure du 01/11/2026, apres le
 * passage de cinq a seize rubriques : 1 581 px de barre dans une fenetre de
 * 1 280 (les quatre dernieres rubriques devenues inatteignables), et surtout
 * 1 042 px de debordement horizontal sur un telephone de 412 px — sur TOUTES
 * les pages du produit.
 *
 * ⚠️ ET LE DEFAUT ETAIT INVISIBLE A TOUS LES CONTROLES : la page est valide,
 * les liens existent dans le DOM, aucun test ne rougit. Il faut mesurer
 * `scrollWidth` dans un vrai navigateur — ce que fait desormais
 * outils/epreuve-depot.js.
 *
 * `flex-wrap: wrap` suffit : la barre prend deux lignes plutot que de
 * deborder. Le vrai remede reste de RACCOURCIR le menu — voir /calculs.html,
 * le sommaire qui porte les ecrans de calcul. */
.rubriques {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 0; min-width: 0;
  overflow: visible;
}
.rubriques a {
  color: rgba(255,255,255,.62); text-decoration: none; font-size: 14px;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
}
.rubriques a:hover { color: #fff; background: rgba(255,255,255,.08); }
.rubriques a[aria-current="page"] { color: #fff; background: var(--rouge); font-weight: 600; }

/* ── Fiches d'ouvrage (page métré) ───────────────────────────── */
.fiche { border-bottom: 1px solid var(--trait); padding: 12px 15px; }
.fiche:last-child { border-bottom: none; }
.fiche.faux { background: var(--err-doux); box-shadow: inset 3px 0 0 var(--err); }
.fiche-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fiche-tete .nom { flex: 1 1 180px; font-weight: 600; }
.fiche-tete .qte { width: 64px; text-align: right; }
.etiquette {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--rouge); background: var(--accent-doux); padding: 4px 8px; border-radius: 6px;
  white-space: nowrap;
}
.fiche-champs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px 10px; margin-top: 10px;
}
.fiche-champs label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fiche-champs label > span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--doux); font-weight: 650;
}
.fiche-champs label i { font-style: normal; text-transform: none; letter-spacing: 0; }
.fiche-champs input, .fiche-champs select { width: 100%; }
.fiche-champs input[type=number] { text-align: right; }
.fiche-bilan { margin-top: 9px; }

/* ── Bordereau de prix ───────────────────────────────────────── */
.prix {
  display: grid; grid-template-columns: 1fr 118px; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 13.5px;
}
.prix:last-child { border-bottom: none; }
.prix input { text-align: right; }

@media (max-width: 760px) {
  .rubriques a { font-size: 13px; padding: 5px 9px; }
  .fiche-champs { grid-template-columns: 1fr 1fr; }
  .fiche-champs input, .fiche-champs select { font-size: 16px; padding: 9px 10px; }
}

/* ── Dépôt de fichier (import Excel) ─────────────────────────── */
.depot {
  margin: 13px 15px; padding: 22px 16px; text-align: center;
  border: 2px dashed var(--trait); border-radius: 12px;
  display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, background .15s;
}
.depot.survol { border-color: var(--rouge); background: var(--accent-doux); }
.depot b { font-size: 15px; }
button.lien {
  background: none; border: none; padding: 0; color: var(--accent);
  text-decoration: underline; font-size: inherit;
}
button.lien:hover { border: none; }
.choix-feuille {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px;
  border: 1px solid var(--trait); border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.choix-feuille:has(input:checked) { border-color: var(--rouge); background: var(--accent-doux); }
.choix-feuille input { accent-color: var(--rouge); width: 17px; height: 17px; margin-top: 2px; flex: none; }

/* ── Compte connecté, dans l'en-tête ─────────────────────────── */
.compte { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.compte-qui { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.compte-qui b { font-size: 13px; color: #fff; }
.compte-qui span { font-size: 11px; color: rgba(255,255,255,.55); }
.compte-lien {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
.compte-lien:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

/* ── Page de connexion — plein écran, à la manière de X ─────────
   ⚠️ CETTE PAGE AVAIT ÉTÉ OUBLIÉE PAR LE RENOMMAGE (elle portait encore
   « AmkaOptiFer »), et c'est la PREMIÈRE chose qu'un utilisateur voit —
   elle est la seule page sans barre de navigation, donc personne ne passe
   devant en travaillant. Soignée à part pour cette raison. */
.page-accueil { background: var(--noir); min-height: 100vh; }
/* ⚠️ `main` porte déjà `align-items: start` pour la mise en page de l'appli
   (ligne ~98) — cette page est aussi un `<main>`, donc sans `stretch` ici le
   panneau de droite restait à hauteur 0 au lieu de remplir l'écran. */
.accueil-x {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 100vh; padding: 0;
}
.accueil-x-gauche {
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px; padding: 48px clamp(24px, 6vw, 96px);
  max-width: 560px;
}
.accueil-x-haut { display: flex; align-items: center; gap: 10px; }
.accueil-x-sceau { height: 32px; }
.accueil-x-titre {
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; font-weight: 800;
  letter-spacing: -1px; color: #fff; margin: 0;
}
.panneau-marque { font-size: 18px; font-weight: 750; letter-spacing: -.4px; color: #fff; }
.panneau-marque em { font-style: normal; color: var(--rouge-vif); }
.accueil-x-corps { width: 100%; max-width: 420px; overflow: hidden; padding: 20px 22px; }
.accueil-x-corps h1 { font-size: 19px; margin: 0 0 4px; color: var(--texte); }
.accueil-pied { color: rgba(255,255,255,.45); }
.accueil-pied b { color: rgba(255,255,255,.7); }

/* Le panneau de droite : un à-plat sombre, le sceau AMKA en très grand et
   très pâle — même recette que le filigrane du chat (#imo-panneau-chat::after)
   pour que le même mouvement se retrouve d'une page à l'autre. */
.accueil-x-droite {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 48px clamp(24px, 5vw, 72px);
  background: linear-gradient(160deg, #1a1c20, var(--noir) 60%);
  border-left: 1px solid rgba(255,255,255,.06);
}
.accueil-x-droite::after {
  content: ''; position: absolute; inset: 0;
  background: url('/img/amka-logo-blanc.png') no-repeat center;
  background-size: min(62%, 420px) auto;
  opacity: .1;
}

/* Le texte qui présente le logiciel, posé AU-DESSUS du filigrane (il n'a
   pas de z-index par défaut : sans celui-ci, ::after — qui peint en
   dernier — passerait devant). */
.accueil-x-atouts { position: relative; z-index: 1; max-width: 420px; }
.accueil-x-atouts-titre {
  color: #fff; font-size: 19px; font-weight: 750; letter-spacing: -.2px;
  margin: 0 0 18px;
}
.accueil-x-atouts ul { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; }
.accueil-x-atouts li {
  color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.5;
  padding-left: 16px; position: relative;
}
.accueil-x-atouts li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rouge-vif);
}
.accueil-x-atouts li b { color: #fff; font-weight: 650; }
@media (max-width: 860px) {
  .accueil-x { grid-template-columns: 1fr; }
  .accueil-x-droite { display: none; }
  .accueil-x-gauche { max-width: none; align-items: stretch; padding: 32px 20px; }
  .accueil-x-titre { font-size: clamp(28px, 8vw, 38px); }
}

/* Champs et boutons en pilule, pour le même geste que l'écran de connexion
   qui a inspiré cette page — sans toucher au reste de l'application : ces
   règles ne visent que l'intérieur de l'écran de connexion. */
.accueil-x-corps input,
.accueil-x-corps button {
  border-radius: 999px; padding: 11px 18px; font-size: 14.5px;
}
.accueil-x-corps .formulaire label > span { padding-left: 4px; }
.accueil-x-corps .principal {
  font-weight: 700; padding: 11px 20px;
}
.accueil-x-corps .lien { border-radius: 0; padding: 0; }

.formulaire { display: grid; gap: 11px; margin: 14px 0 4px; }
.formulaire label { display: flex; flex-direction: column; gap: 4px; }
.formulaire label > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--doux); font-weight: 650;
}
.formulaire label > i { font-style: normal; font-size: 11.5px; color: var(--doux); }
.formulaire input, .formulaire select { width: 100%; padding: 9px 11px; font-size: 15px; }
.formulaire button { padding: 10px; font-size: 15px; }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.formulaire.en-ligne {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end;
}
.sep-ou { border-top: 1px solid var(--trait); padding-top: 11px; margin-top: 13px; }
a.bouton, .bouton {
  display: inline-block; padding: 9px 13px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte); font-size: 14px;
}
a.bouton.principal { background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 600; }

/* ── Page équipe ─────────────────────────────────────────────── */
.une-colonne { display: block; max-width: 1080px; margin: 0 auto; padding: 14px 16px 28px; }
.une-colonne > .carte + .carte { margin-top: 14px; }
tr.inactif td { opacity: .5; }
.pastille {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pastille.active   { background: var(--vert-doux); color: var(--vert); }
.pastille.attente  { background: var(--att-doux); color: var(--att); }
.pastille.inactive { background: var(--trait); color: var(--doux); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions button { font-size: 13px; padding: 5px 9px; }
.identifiants { display: grid; gap: 9px; margin-top: 12px; }
.identifiants > div { display: flex; flex-direction: column; gap: 3px; }
.identifiants span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.identifiants code {
  font: 17px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 1px;
  background: var(--fond); border: 1px solid var(--trait); border-radius: 8px;
  padding: 9px 12px; user-select: all;
}
#fenetreMdp .apropos-tete { text-align: left; padding: 16px 22px; }

@media (max-width: 760px) {
  .compte-qui { display: none; }
  .une-colonne { padding: 10px 12px 20px; }
  .formulaire .duo { grid-template-columns: 1fr; }
  /* La table d'équipe devient des fiches, comme les grilles de saisie. */
  #equipe { display: block; }
  #equipe tr { display: block; border: 1px solid var(--trait); border-radius: 11px;
    padding: 11px; margin-bottom: 11px; }
  #equipe td { display: flex; gap: 10px; border: none; padding: 4px 0; white-space: normal; }
  #equipe td::before {
    content: attr(data-libelle); flex: 0 0 96px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--doux); font-weight: 650;
  }
  #equipe td[data-libelle=""]::before { display: none; }
  .actions { margin-top: 6px; }
}


/* --- Les 26 types d'ouvrages, groupes par famille de chantier ---------------
   Vingt-six boutons alignes en une seule rangee ne se lisent plus. On les
   groupe comme un conducteur de travaux les pense : terrassement, structure,
   maconnerie, toiture, finitions, VRD. */
#ajouts { flex-direction: column; align-items: stretch; gap: 0; }
.famille { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
           padding: 7px 0; border-top: 1px solid var(--trait); }
.famille:first-child { border-top: 0; padding-top: 0; }
.famille-titre { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--doux); min-width: 200px; }

/* Un devis a six lots se lit par lot, avec son sous-total — comme sur papier. */
tr.lot td { background: var(--fond); padding-top: 12px; font-size: 13px;
            letter-spacing: .03em; }
tr.sous-total td { border-bottom: 2px solid var(--trait); color: var(--doux); }

@media (max-width: 700px) {
  .famille-titre { min-width: 100%; margin-bottom: 2px; }
}


/* --- Planning (M10) ---------------------------------------------------------
   Un diagramme de phases et un histogramme d'effectif, en CSS pur : ce projet
   n'a aucune dependance et ce n'est pas un graphique qui va en introduire une. */
.gantt { display: flex; flex-direction: column; gap: 8px; }
.gantt-ligne { display: grid; grid-template-columns: 200px 1fr 170px;
               gap: 10px; align-items: center; }
.gantt-nom { font-size: 14px; line-height: 1.3; }
.gantt-nom small { display: block; color: var(--doux); font-size: 11px; }
.gantt-piste { position: relative; height: 22px; background: var(--fond);
               border: 1px solid var(--trait); border-radius: 4px; }
.gantt-barre { position: absolute; top: 2px; bottom: 2px; border-radius: 3px;
               background: var(--accent); min-width: 3px; }
.barre-fondations { background: #6b5b3e; }
.barre-structure  { background: var(--accent); }
.barre-maconnerie { background: #4a6b5b; }
.barre-toiture    { background: #5b4a6b; }
.barre-finitions  { background: #3e5b6b; }
.barre-vrd        { background: #6b3e4a; }
.gantt-dates { font-size: 12px; color: var(--doux); text-align: right;
               font-variant-numeric: tabular-nums; }

.histo { display: flex; align-items: flex-end; gap: 1px; height: 130px;
         padding: 4px; background: var(--fond); border: 1px solid var(--trait);
         border-radius: 4px; overflow-x: auto; }
.histo-col { flex: 1 1 4px; min-width: 3px; height: 100%;
             display: flex; align-items: flex-end; }
.histo-barre { width: 100%; background: var(--accent); border-radius: 1px 1px 0 0; }
.histo-barre.pointe { background: var(--att); }
.histo-axe { display: flex; justify-content: space-between; font-size: 11px;
             color: var(--doux); margin-top: 4px; }

.reglage { display: block; margin-bottom: 12px; }
.reglage > span { display: block; font-size: 13px; margin-bottom: 3px; }
.reglage > input { width: 100%; }
.reglage > small { display: block; margin-top: 3px; font-size: 11px; }

@media (max-width: 760px) {
  .gantt-ligne { grid-template-columns: 1fr; gap: 3px; }
  .gantt-dates { text-align: left; }
}


/* --- Propositions issues d'un plan DXF (M12b) -------------------------------
   La case, le type, le nom, puis la cote relevee et la raison de la
   proposition. Celles que la machine n'a PAS comprises portent une barre :
   on ne doit pas pouvoir les valider sans les avoir regardees. */
.proposition { display: grid; grid-template-columns: auto 190px 1fr; gap: 8px;
               align-items: center; padding: 8px 10px;
               border: 1px solid var(--trait); border-radius: 4px;
               background: var(--carte); }
.proposition > div { grid-column: 2 / -1; font-size: 12px; line-height: 1.45; }
.proposition.devine { border-left: 3px solid var(--att); }
.proposition select, .proposition input[type="text"] { width: 100%; }
.depot small { color: var(--doux); max-width: 56ch; line-height: 1.4; }

@media (max-width: 700px) {
  .proposition { grid-template-columns: auto 1fr; }
  .proposition > div { grid-column: 1 / -1; }
}


/* ===== Palette de commande (M15) ===========================================
   Un seul champ, ouvert au clavier depuis n'importe quelle page. Elle se pose
   PAR-DESSUS la page sans rien deplacer : l'ingenieur ne doit jamais perdre ce
   qu'il regardait pour poser une question. */

/* ⚠️ LA PALETTE ET LE QUAI IMO·IA SE DISPUTAIENT LE MÊME COIN. Tous deux en
   `position: fixed` à 16–18 px en bas à droite ; le quai, en z-index 60,
   passait DEVANT et recouvrait la barre « ⌘K Que voulez-vous faire ? ». Le
   défaut existait déjà sur les sept pages qui avaient les deux, mais il est
   devenu visible partout en installant la palette sur les dix-huit. On
   l'empile au-dessus du quai : deux pastilles de 44 px plus leur écart. */
#palBouton {
  position: fixed; right: 18px; bottom: 142px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--trait);
  background: var(--anthracite, #1b1b1b); color: #fff;
  font: inherit; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
#palBouton:hover { background: #000; }
#palBouton span {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255, 255, 255, .14); letter-spacing: .04em;
}

#palette { position: fixed; inset: 0; z-index: 50; }
.pal-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.pal-boite {
  position: relative; margin: 6vh auto 0; width: min(760px, 94vw);
  max-height: 86vh; display: flex; flex-direction: column;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); overflow: hidden;
}
.pal-haut { display: flex; align-items: center; gap: 8px;
            padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.pal-chevron { color: var(--accent); font-weight: 700; font-size: 18px; }
#palSaisie { flex: 1; border: 0; background: transparent; color: var(--texte);
             font: inherit; font-size: 16px; outline: none; }
#palSaisie::placeholder { color: var(--doux); }
.pal-fermer { border: 0; background: transparent; color: var(--doux);
              cursor: pointer; font-size: 16px; padding: 4px 6px; }

.pal-corps { flex: 1; overflow-y: auto; padding: 12px 14px;
             display: flex; flex-direction: column; gap: 10px; }
.pal-pied { display: flex; justify-content: space-between; gap: 10px;
            padding: 8px 14px; border-top: 1px solid var(--trait);
            font-size: 11px; color: var(--doux); }
#palEtat { color: var(--accent); }

.pal-demande { align-self: flex-end; max-width: 85%;
               padding: 7px 12px; border-radius: 12px 12px 2px 12px;
               background: var(--fond); border: 1px solid var(--trait);
               font-size: 14px; }
.pal-carte { border: 1px solid var(--trait); border-radius: 8px;
             padding: 12px 14px; background: var(--fond); font-size: 14px; }
.pal-carte p { margin: 0 0 7px; line-height: 1.5; }
.pal-carte p:last-child { margin-bottom: 0; }
.pal-titre { font-weight: 600; font-size: 15px; }
.pal-carte.pal-err { border-left: 3px solid var(--err, #b3261e); }

.pal-resultat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                margin-bottom: 10px; }
.pal-resultat b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pal-resultat b.faux { color: var(--err, #b3261e); }
.pal-unite { font-size: 15px; color: var(--doux); }
.pal-nom { margin-left: auto; color: var(--doux); font-size: 13px; text-align: right; }

.pal-vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 8px; margin: 10px 0; }
.pal-var { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pal-var > span { color: var(--doux); }
.pal-var > span small { opacity: .75; }
.pal-var input { width: 100%; }
.pal-var.lue input { border-color: var(--accent); }
.pal-lu { color: var(--accent); font-size: 10.5px; }

.pal-expr { display: block; padding: 8px 10px; margin: 8px 0;
            background: var(--carte); border: 1px solid var(--trait);
            border-radius: 5px; font-size: 12.5px; overflow-x: auto;
            white-space: pre; }
.pal-avis { padding: 8px 10px; border-radius: 5px; margin: 8px 0;
            font-size: 13px; line-height: 1.45; background: var(--carte);
            border-left: 3px solid var(--trait); }
.pal-avis.att { border-left-color: var(--att, #b26a00); }
.pal-avis.err { border-left-color: var(--err, #b3261e); }
.pal-avis.ok { border-left-color: var(--vert, #1d6b3f); }

.pal-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pal-b { padding: 7px 13px; border: 1px solid var(--trait); border-radius: 6px;
         background: var(--carte); color: var(--texte); font: inherit;
         font-size: 13px; cursor: pointer; }
.pal-b:hover { border-color: var(--accent); }
.pal-b.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.pal-lien { border: 0; background: transparent; color: var(--accent);
            font: inherit; font-size: inherit; cursor: pointer;
            padding: 0; text-decoration: underline; }

.pal-etat { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
            border: 1px solid var(--trait); color: var(--doux);
            white-space: nowrap; }
.pal-etat.livre { color: var(--vert, #1d6b3f); border-color: currentColor; }
.pal-etat.formule { color: var(--accent); border-color: currentColor; }
.pal-etat.bloque { color: var(--att, #b26a00); border-color: currentColor; }

.pal-exemples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pal-exemple { padding: 5px 11px; border: 1px solid var(--trait);
               border-radius: 999px; background: var(--carte);
               color: var(--texte); font: inherit; font-size: 12.5px;
               cursor: pointer; text-align: left; }
.pal-exemple:hover { border-color: var(--accent); }

.pal-domaines { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 7px; margin: 10px 0; }
.pal-domaine { display: flex; flex-direction: column; gap: 2px;
               padding: 9px 11px; border: 1px solid var(--trait);
               border-radius: 7px; background: var(--carte); color: var(--texte);
               font: inherit; text-align: left; cursor: pointer; }
.pal-domaine:hover { border-color: var(--accent); }
.pal-domaine .pal-ic { font-size: 16px; color: var(--accent); }
.pal-domaine small { color: var(--doux); font-size: 11px; }

.pal-liste { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.pal-ligne { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
             padding: 5px 0; border-bottom: 1px solid var(--trait); font-size: 13px; }
.pal-ligne:last-child { border-bottom: 0; }
.pal-ligne.inerte { opacity: .62; }

/* La cible d'une navigation interne doit se signaler, sinon on ne voit pas
   ce qui vient d'etre atteint. */
.pal-vise { animation: pal-vise 2s ease-out; }
@keyframes pal-vise {
  0%, 100% { box-shadow: none; }
  15%, 60% { box-shadow: 0 0 0 3px var(--accent); }
}

@media (max-width: 700px) {
  #palBouton { right: 10px; bottom: 10px; padding: 9px 13px; font-size: 13px; }
  .pal-boite { margin-top: 2vh; width: 96vw; max-height: 94vh; }
  .pal-vars { grid-template-columns: 1fr; }
  .pal-nom { margin-left: 0; width: 100%; text-align: left; }
}


/* ===== Page des formules et catalogue (M14b / M15) ========================= */

/* « Ou voulez-vous travailler ? » — la premiere question de l'ecran. */
.domaines { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
            gap: 8px; margin-top: 10px; }
.domaine { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
           border: 1px solid var(--trait); border-radius: 8px;
           background: var(--fond); color: var(--texte); font: inherit;
           text-align: left; cursor: pointer; }
.domaine:hover { border-color: var(--accent); }
.domaine.actif { border-color: var(--accent); background: var(--carte);
                 box-shadow: inset 0 0 0 1px var(--accent); }
.domaine.vide { opacity: .66; }
.domaine .dom-ic { font-size: 17px; color: var(--accent); }
.domaine small { color: var(--doux); font-size: 11.5px; line-height: 1.35; }
.domaine .dom-compte { color: var(--accent); }

/* Une formule : vivante. Chaque variable se modifie, le resultat suit. */
.formule { border: 1px solid var(--trait); border-radius: 8px; padding: 12px 14px;
           margin-bottom: 10px; background: var(--fond); }
.formule.mienne { border-left: 3px solid var(--accent); }
.f-tete { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
          margin-bottom: 8px; }
.f-tete > b { font-size: 15px; }
.f-mienne { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
            background: var(--accent); color: #fff; }
.f-res { margin-left: auto; font-size: 24px; font-weight: 700;
         font-variant-numeric: tabular-nums; }
.f-res.faux { color: var(--err, #b3261e); font-size: 18px; }
.f-unite { color: var(--doux); font-size: 13px; }
.f-vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
          gap: 8px; margin: 8px 0; }
.f-var { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.f-var > span { color: var(--doux); }
.f-var input { width: 100%; }
.f-expr { display: block; padding: 7px 10px; margin: 8px 0; background: var(--carte);
          border: 1px solid var(--trait); border-radius: 5px; font-size: 12.5px;
          overflow-x: auto; white-space: pre; }

/* Le catalogue : ce qui existe ET ce qui n'existe pas, cote a cote. */
.cat-dom { margin-bottom: 18px; }
.cat-dom h3 { font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
              color: var(--doux); margin: 0 0 7px; font-weight: 600; }
.cat-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
             border-bottom: 1px solid var(--trait); }
.cat-ligne:last-child { border-bottom: 0; }
.cat-ligne.inerte { opacity: .62; }
.cat-texte { flex: 1; font-size: 13px; line-height: 1.45; }
.cat-texte .doux { font-size: 12px; }

.mienne-ligne { display: flex; justify-content: space-between; gap: 8px;
                padding: 5px 0; border-bottom: 1px solid var(--trait); }
.exemple-f { display: flex; flex-direction: column; gap: 3px; padding: 8px 0;
             border-bottom: 1px solid var(--trait); }
.exemple-f code { font-size: 12px; }
#rechercheFormule { width: 100%; }

@media (max-width: 700px) {
  .f-vars { grid-template-columns: 1fr; }
  .f-res { margin-left: 0; }
}


/* Le tableau des recouvrements par diametre, en mode BAEL. L'ingenieur doit
   pouvoir VERIFIER d'un coup d'oeil ce que le logiciel applique a chaque
   diametre — c'est la valeur qui part dans la commande. */
.lsTable { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
           gap: 4px 10px; margin-top: 6px; font-size: 12px; }
.lsTable span { color: var(--doux); }
.lsTable b { font-variant-numeric: tabular-nums; }


/* ===== Fiche de faconnage (M16) ============================================
   Le croquis est le document que lit le ferrailleur : il doit s'imprimer, se
   copier dans un courriel et se lire sur un telephone au milieu d'un chantier.
   D'ou des caracteres plutot qu'un dessin. */
pre.croquis { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
              font-size: 11px; line-height: 1.25; margin: 0 0 4px;
              padding: 6px 8px; background: var(--fond);
              border: 1px solid var(--trait); border-radius: 4px;
              overflow-x: auto; white-space: pre; }

/* Les cotes d'une forme, dans une seule cellule : une colonne par cote ferait
   une table de douze colonnes dont dix seraient vides. */
td.cotes { display: flex; gap: 5px; flex-wrap: wrap; }
td.cotes label { display: flex; align-items: center; gap: 3px; }
td.cotes label small { color: var(--doux); font-size: 11px; min-width: 9px; }
td.cotes input { width: 68px; }

/* Une longueur CALCULEE depuis un croquis n'est pas une saisie : elle se
   distingue, et elle devient rouge si le croquis est infaisable. */
input.calcule { background: var(--fond); color: var(--doux); cursor: not-allowed; }
input.calcule.faux { border-color: var(--err, #b3261e); color: var(--err, #b3261e); }


/* ===== Schemas (M18) ========================================================
   Un dessin se replie : il eclaire quand on le demande, il n'encombre pas
   quand on ne le demande pas. */
.dessin, .pal-dessin { margin: 8px 0; padding: 8px; background: #ffffff;
                       border: 1px solid var(--trait); border-radius: 6px;
                       overflow-x: auto; }
.dessin svg, .pal-dessin svg { display: block; margin: 0 auto; }
summary.voirSchema { cursor: pointer; font-size: 12px; color: var(--accent);
                     padding: 3px 0; }
summary.voirSchema:hover { text-decoration: underline; }
.pal-schema details > summary { cursor: pointer; font-size: 12px;
                                color: var(--accent); padding: 4px 0; }
.f-schema { margin: 6px 0; }


/* Les coupes de l'audit, cote a cote : on compare les sections d'un coup d'oeil. */
.coupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 10px; margin-top: 8px; }
.pal-etat.ok { color: var(--vert, #1d6b3f); border-color: currentColor; }
.pal-etat.err { color: var(--err, #b3261e); border-color: currentColor; }
.pal-etat.att { color: var(--att, #b26a00); border-color: currentColor; }


/* ===== Finances (M19) ======================================================= */
.sd-groupe { border: 1px solid var(--trait); border-radius: 6px; padding: 8px 10px;
             margin: 8px 0; background: var(--fond); }
.sd-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.sd-tete .nb { margin-left: auto; font-variant-numeric: tabular-nums; }
.sd-groupe table { width: 100%; font-size: 12.5px; }
.sd-groupe td { padding: 3px 4px; }

/* Une ligne de tresorerie a decouvert, et un ecart defavorable : ils doivent
   sauter aux yeux, parce que c'est pour eux qu'on ouvre la page. */
tr.mauvais td { background: color-mix(in srgb, var(--err, #b3261e) 7%, transparent); }
.chiffre.mauvais b { color: var(--err, #b3261e); }
.chiffre.bon b { color: var(--vert, #1d6b3f); }
.gain.mauvais { border-color: var(--err, #b3261e); }

/* ⚠️ LE BANDEAU DE PANNE. Il existe parce que le logiciel s'est tu pendant
   des jours : page vide, bouton muet, aucun message. Il ne se referme pas
   tout seul, et il passe devant tout. */
.bandeau-panne {
  position: sticky; top: 0; z-index: 9999;
  background: #b3261e; color: #fff;
  padding: 12px 18px; font-weight: 600; line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}


/* ── La marque ─────────────────────────────────────────────── */
/* IMO·IA de AMKA. Le « de AMKA » se lit sous le nom, en petit. */
.marque small {
  display: block; font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: -3px;
}
.marque span { line-height: 1.05; }

/* ── Les liens de contenu ──────────────────────────────────── */
/*
   ⚠️ IL N'Y EN AVAIT AUCUN STYLE, et c'est Othman qui l'a signalé :
   « il y a des liens écrits en bleu illisible ».

   Sans règle, un lien tombe sur le bleu par défaut du navigateur (#0000EE) —
   une couleur qui n'est dans aucune palette de ce produit, qui jure avec le
   rouge Amka, et dont le contraste sur fond sombre est mauvais. Le défaut du
   navigateur n'est jamais une décision de design : c'est une absence de
   décision, et elle se voit.
*/
.corps a, main p a, .doux a, td a, li a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color .12s, background .12s;
}
.corps a:hover, main p a:hover, .doux a:hover, td a:hover, li a:hover {
  border-bottom-color: var(--accent);
  background: var(--accent-doux);
}
.corps a:focus-visible, main p a:focus-visible, .doux a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}
/* ⚠️ Les navigateurs qui ignorent color-mix retombent sur une bordure
   visible plutôt que sur rien : un lien sans repère n'est plus un lien. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .corps a, main p a, .doux a, td a, li a { border-bottom-color: var(--trait); }
}

/* ── Un calcul : saisie à gauche, résultat à droite ─────────── */
/*
   ⚠️ Refonte du 01/11/2026. L'ancienne mise en page empilait tout vers le
   bas : intro, saisie, bouton, résultat, puis dix alertes de quatre cents
   caractères. Pour relancer un calcul il fallait remonter ; pour passer au
   suivant, descendre sur deux écrans de texte rouge. Othman : « il fallait
   défiler jusqu'en bas pour faire d'autres tâches ».
*/
.calcul-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--trait);
}
.calcul-tete h2 { margin: 0; flex: 1 1 260px; }
/* Les actions sont EN HAUT, donc toujours atteignables. */
.calcul-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.calcul-actions button[disabled] { opacity: .4; cursor: not-allowed; }

/* ⚠️ `min-width: 0` SUR LES DEUX COLONNES, ET C'EST LA MEME FAMILLE QUE LE
 * PANNEAU DE CHAT. Un enfant de grille a `min-width: auto` par defaut : il
 * refuse de devenir plus etroit que son contenu intrinseque. Il suffit donc
 * d'un tableau, d'un titre long ou d'un bloc en `white-space: pre` pour que
 * la colonne s'elargisse — et avec elle TOUTE la page. Mesure du
 * 01/11/2026 sur un telephone de 412 px : 171 px de debordement horizontal
 * sur /structure.html, alors que la regle de passage en colonne unique
 * fonctionnait parfaitement. Le probleme n'etait pas le nombre de colonnes,
 * c'etait leur largeur MINIMALE. */
/* ⚠️ 400 px NE SUFFISAIENT PAS AU PREMIER CALCUL DE L'ECRAN. Le tableau du
 * poids propre en demande 534 : sa quatrieme colonne (« ou complément »)
 * etait coupee net, et comme le conteneur defile en `auto`, la page ne
 * debordait pas et AUCUN controle ne voyait rien. Un champ de saisie
 * invisible dont rien ne signale l'existence — la meme famille que le
 * travail ecarte en silence. 560 px le font tenir entier, et il reste
 * largement de quoi afficher le resultat a droite. */
.calcul-corps {
  display: grid; grid-template-columns: minmax(300px, 560px) 1fr;
  gap: 0; align-items: start;
}
.calcul-corps > * { min-width: 0; }
.calcul-saisie {
  padding: 16px 18px; border-right: 1px solid var(--trait);
  min-width: 0; overflow-wrap: anywhere;
}
.calcul-resultat {
  padding: 16px 18px; min-width: 0;
  position: sticky; top: 64px;      /* il reste en vue quand on fait défiler */
  max-height: calc(100vh - 80px); overflow: auto;
}
.calcul-resultat .attente { color: var(--doux); font-style: italic; margin: 0; }

/* En étroit, la colonne unique revient — mais le résultat passe EN PREMIER. */
@media (max-width: 900px) {
  .calcul-corps { grid-template-columns: 1fr; }
  .calcul-saisie { border-right: 0; border-bottom: 1px solid var(--trait); }
  .calcul-resultat { position: static; max-height: none; }
}

/* L'intro se replie : utile une fois, encombrante ensuite. */
.calcul-saisie details.intro { margin: 0 0 14px; }
.calcul-saisie details.intro summary {
  cursor: pointer; font-size: 13px; color: var(--doux); font-weight: 600;
}
.calcul-saisie details.intro p { margin: 8px 0 0; font-size: 13px; }

/* ── Le verdict ────────────────────────────────────────────── */
/* C'est LA réponse. Il avait la même taille que le reste du texte. */
.verdict {
  font-size: 15px; font-weight: 600; line-height: 1.5;
  padding: 12px 14px; border-radius: var(--r); margin: 0 0 12px;
  background: var(--accent-doux); border-left: 4px solid var(--accent);
}
.verdict.bon { background: var(--vert-doux); border-left-color: var(--vert); }
.verdict.ko  { background: var(--err-doux);  border-left-color: var(--err); }

/* ── Les onglets du résultat ───────────────────────────────── */
.onglets {
  display: flex; gap: 2px; margin: 14px 0 0;
  border-bottom: 1px solid var(--trait); flex-wrap: wrap;
}
.onglets button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--doux); cursor: pointer; border-radius: 0;
}
.onglets button:hover { color: var(--texte); }
.onglets button.actif { color: var(--accent); border-bottom-color: var(--accent); }
.vue { padding-top: 14px; }

/* ── Les tableaux, lisibles comme un tableur ───────────────── */
.vue table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vue thead th {
  position: sticky; top: 0; background: var(--carte); z-index: 1;
  text-align: left; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--doux);
  padding: 7px 10px; border-bottom: 2px solid var(--trait);
}
.vue tbody td { padding: 6px 10px; border-bottom: 1px solid var(--trait); }
.vue tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fond) 55%, transparent); }
.vue tbody tr:hover { background: var(--accent-doux); }
.vue td.nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── IMO·IA : les deux boutons, sur toutes les fenêtres ─────── */
/*
   ⚠️ Posés par /imo-ia.js, jamais à la main dans une page : deux boutons
   écrits douze fois auraient douze comportements au bout de trois mois.
*/
.imo-quai {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
/* ⚠️ DEUX PASTILLES RONDES SANS LE MOINDRE MOT. L'utilisateur, le 01/11 :
   « on ne sait pas à quoi ça sert ». Un `title` ne se voit qu'au survol, et
   jamais sur un téléphone. Le bouton s'allonge donc au survol et montre son
   nom — sans occuper de place le reste du temps. */
.imo-bouton {
  height: 52px; min-width: 52px; border-radius: 26px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 0; color: #fff; overflow: hidden; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(17,17,17,.28);
  transition: transform .12s, box-shadow .12s, padding .16s, gap .16s;
}
.imo-bouton .imo-nom {
  max-width: 0; opacity: 0; font: inherit; font-size: 13px; font-weight: 600;
  transition: max-width .16s, opacity .16s;
}
.imo-bouton:hover, .imo-bouton:focus-visible {
  transform: translateY(-2px); box-shadow: 0 7px 22px rgba(17,17,17,.34);
  padding: 0 20px 0 16px; gap: 9px;
}
.imo-bouton:hover .imo-nom,
.imo-bouton:focus-visible .imo-nom { max-width: 120px; opacity: 1; }
/* ⚠️ Sur un écran tactile il n'y a pas de survol : le nom reste affiché. */
@media (hover: none) {
  .imo-bouton { padding: 0 18px 0 14px; gap: 8px; }
  .imo-bouton .imo-nom { max-width: 120px; opacity: 1; }
}
.imo-chat { background: var(--noir); }
.imo-chat img { height: 26px; width: auto; }
.imo-schema { background: var(--rouge); }

.imo-panneau {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  z-index: 61; background: var(--carte); border-left: 1px solid var(--trait);
  box-shadow: -8px 0 28px rgba(17,17,17,.16);
  display: flex; flex-direction: column;
}
.imo-panneau header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--noir); color: #fff;
  position: static;
}
.imo-panneau header b { font-size: 15px; letter-spacing: .01em; }
/* Le sceau AMKA dans l'en-tête. ⚠️ C'est la version BLANCHE qui va ici : le
   bandeau est noir, et le logo sombre y disparaîtrait. */
.imo-sceau { height: 22px; width: auto; display: block; }
.imo-mode {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.8);
}
.imo-mode.imo-vrai { background: var(--rouge); color: #fff; }
.imo-fermer {
  margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

.imo-fil { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }

/* ⚠️ LE FILIGRANE AMKA EST POSÉ SUR LE PANNEAU, PAS SUR LA CONVERSATION.
   Mis sur `.imo-fil`, qui défile, il remonterait avec le texte et viendrait
   se coller derrière les chiffres d'un métré — le défaut des « schémas
   illisibles » qu'Othman a signalé, mais étendu à toute la colonne. Le
   panneau, lui, ne bouge jamais.
   ⚠️ `z-index: -1` ET PAS AUTRE CHOSE : le panneau est en `position: fixed`
   avec un `z-index`, donc il crée un contexte d'empilement — un enfant à -1
   se glisse AU-DESSUS de son fond et EN DESSOUS du texte. Sans ça, un
   pseudo-élément positionné passe par-dessus toute la conversation.
   ⚠️ ET `pointer-events: none` N'EST PAS UNE PRÉCAUTION DE STYLE. Une
   surface étendue sur tout le panneau avale les clics de l'en-tête, des
   onglets et du bouton Envoyer. C'est exactement le défaut qui a rendu un
   panneau muet au clic, et qu'aucun banc sans CSS ne voit. */
/* ⚠️ LE CHAT SEULEMENT, PAS LE SCHÉMA. `.imo-panneau` vise les DEUX
   panneaux : la règle posait le filigrane derrière les dessins techniques,
   c'est-à-dire derrière des traits fins et des cotes — exactement ce dont
   Othman a dit « les écritures à côté n'étaient pas lisibles ». Un fond
   décoratif n'a rien à faire sous un dessin qu'on lit pour construire. */
#imo-panneau-chat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .055;
  background: url('/img/amka-logo.png') no-repeat center 46%;
  background-size: min(300px, 68%) auto;
}

/* ⚠️ LA PAGE EST CLAIRE PAR DÉFAUT ET SOMBRE SUR DEMANDE — le logo doit
   suivre. `amka-logo-blanc.png` porte des lettres BLANCHES sur fond
   transparent : posé sur un fond clair, il ne reste que le point rouge et le
   mot AMKA disparaît. Vérifié en l'ouvrant, pas supposé. */
@media (prefers-color-scheme: dark) {
  #imo-panneau-chat::after { background-image: url('/img/amka-logo-blanc.png'); opacity: .07; }
}

/* L'accueil du panneau : le sceau, le nom, et rien d'autre. */
.imo-accueil {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 46vh; text-align: center; user-select: none;
}
.imo-blason { width: 86px; height: auto; opacity: .92; }
@media (prefers-color-scheme: dark) {
  .imo-blason { content: url('/img/amka-logo-blanc.png'); }
}
.imo-signe {
  margin: 10px 0 0; font-size: 19px; font-weight: 700;
  letter-spacing: .06em; color: var(--texte);
}
.imo-sous-signe {
  margin: 0; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--doux);
}
.imo-tour { font-size: 13.5px; line-height: 1.55; }
.imo-tour p { margin: 0 0 8px; }
.imo-tour > :last-child { margin-bottom: 0; }

/* ⚠️ LA DEMANDE EST À DROITE ET LA RÉPONSE À GAUCHE. Avant, les deux
   occupaient toute la largeur l'une sous l'autre : dans un fil de quinze
   échanges on ne retrouvait plus ce qu'on avait demandé soi-même. Le côté
   est la seule indication qui se lit sans lire. */
.imo-vous {
  justify-self: end; max-width: 86%;
  background: var(--accent); color: #fff;
  padding: 9px 12px; border-radius: var(--r) var(--r) 4px var(--r);
  box-shadow: 0 1px 2px rgba(17,17,17,.10);
}
.imo-vous p { margin: 0; }
/* ⚠️ LE SCEAU EST UNE COLONNE, PAS UN `inline-block`. En `inline-block`, le
   pseudo-élément se place avant le premier `<p>` — donc sur sa PROPRE ligne,
   et il ressemblait à un point perdu au-dessus du texte. Vu à l'écran, pas au
   banc : le DOM était identique dans les deux cas. */
.imo-ia {
  justify-self: start; max-width: 94%;
  display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
}
.imo-ia::before {
  content: ''; width: 16px; height: 16px; margin-top: 2px;
  background: url('/img/amka-logo.png') no-repeat center / contain;
  opacity: .75;
}
/* ⚠️ SANS CECI, UN DEUXIÈME BLOC DE RÉPONSE (une étape ET un texte, par
   exemple) TOMBAIT DANS LA COLONNE DE L'ICÔNE. La grille place ses enfants
   case par case, ligne par ligne : le sceau prend (col1,ligne1), le premier
   bloc de contenu (col2,ligne1) — correct par chance tant qu'il n'y a qu'un
   seul bloc. Dès qu'il y en a un second, l'auto-placement continue en
   (col1,ligne2) : 16 px de large, une colonne pensée pour une icône de
   16×16, jamais pour du texte — d'où un paragraphe entier à un caractère
   par ligne. Vécu par Othman le 02/11/2026, sur la réponse à « inventaire »
   (étape + texte).
   ⚠️ `grid-row: 1 / -1` sur le sceau NE SUFFIT PAS : testé en direct dans le
   navigateur, sans effet — la grille est à lignes IMPLICITES (créées par le
   contenu), et `-1` ne résout pas la dernière ligne d'une grille dont le
   nombre de lignes n'est pas encore connu. La solution qui marche, vérifiée
   à l'écran : fixer la colonne de CHAQUE enfant réel à 2, jamais celle du
   sceau — l'auto-placement du pseudo-élément retombe alors seul en colonne 1. */
.imo-ia > * { grid-column: 2; }
@media (prefers-color-scheme: dark) {
  .imo-ia::before { background-image: url('/img/amka-logo-blanc.png'); opacity: .9; }
}
/* ⚠️ Les blocs à fond propre reprennent toute la ligne : une carte de
   résultat rétrécie à 94 % tronquerait ses colonnes de chiffres, et la
   troncature silencieuse est le défaut qu'on a déjà payé deux fois. */
.imo-ia:has(> .imo-etape), .imo-ia:has(> .imo-proposition),
.imo-ia:has(> table) { max-width: 100%; }
.imo-exemples { display: grid; gap: 6px; }
.imo-ex {
  text-align: left; background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 7px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer; color: var(--texte);
}
.imo-ex:hover { border-color: var(--accent); background: var(--accent-doux); }
.imo-attente { color: var(--doux); }
.imo-panne { color: var(--err); font-weight: 600; }

/* ⚠️ L'étiquette de provenance. C'est ce qui permet de signer le document :
   on sait ce qui sort du moteur vérifié et ce que l'IA a estimé. */
.imo-etape {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 9px 11px; margin-bottom: 9px; background: var(--fond);
}
.imo-jeton {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  margin-bottom: 5px;
}
.imo-verifie .imo-jeton { background: var(--vert-doux); color: var(--vert); }
.imo-estime  .imo-jeton { background: var(--att-doux); color: var(--att); }
.imo-etape pre {
  margin: 6px 0 0; white-space: pre-wrap; font: inherit; font-size: 12.5px;
}
.imo-proposition {
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: 10px 12px; background: var(--accent-doux);
}
.imo-proposition ul { margin: 7px 0; padding-left: 18px; font-size: 12.5px; }

/* ⚠️ LA ZONE DE SAISIE EST EN COLONNE, PAS EN LIGNE. En ligne, le champ de
   texte partageait la largeur avec « Envoyer », « Fichier » et l'option
   « Agir sur l'écran » : il tombait à quelques dizaines de pixels, et son
   invite s'affichait sur trois lignes tronquées. C'est une régression
   introduite en ajoutant l'option — la ligne tenait tant qu'il n'y avait que
   deux boutons. Le texte d'abord, les commandes dessous. */
.imo-saisie {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-top: 1px solid var(--trait);
}
/* ⚠️ LA SAISIE HÉRITAIT DE LA CHASSE FIXE. `textarea` ne prend pas la police
   du document tout seul : on tapait sa demande en français dans la fonte des
   tableaux de chiffres. */
.imo-saisie textarea {
  width: 100%; min-height: 58px; resize: vertical; box-sizing: border-box;
  font: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 9px 11px; border-radius: var(--r);
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte);
}
.imo-saisie textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.imo-boutons-saisie { flex-wrap: wrap; align-items: center; gap: 8px; }
.imo-boutons-saisie .principal { flex: 0 0 auto; }
.imo-option { margin-left: auto; }

.imo-dessin { flex: 1; overflow: auto; padding: 16px; display: grid; place-items: center; }
.imo-dessin svg { max-width: 100%; height: auto; }
.imo-schema-pied { padding: 12px; border-top: 1px solid var(--trait); }

/* Ce que contient un état de l'historique, à côté de sa date. */
.ctx-contient {
  font-size: 12px; color: var(--doux);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
/* ⚠️ « projet vide » EN ROUGE : c'est le seul état dont la restauration
   efface tout, et c'est celui qu'un regroupement de séance met en tête. */
.ctx-contient.err { border-color: var(--err); color: var(--err); background: var(--err-doux); }

/* Sur un téléphone, le quai se resserre : la palette descend d'autant. */
@media (max-width: 640px) { #palBouton { bottom: 132px; right: 12px; } }

@media (max-width: 640px) { .imo-panneau { width: 100vw; } }

/* ── Une fenêtre, une chose à la fois ──────────────────────── */
/*
   ⚠️ Posé par /onglets-ecran.js. Les pages empilaient jusqu'à DOUZE sections
   les unes sous les autres — et l'écran des calculs, quarante-sept. Pour
   passer du métré au devis il fallait traverser six autres rubriques.
*/
.ecran-onglets {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 4px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre);
  position: sticky; top: 56px; z-index: 20;
}
.ecran-onglets button {
  background: none; border: 0; border-radius: calc(var(--r) - 5px);
  padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--doux); cursor: pointer; white-space: nowrap;
}
.ecran-onglets button:hover { color: var(--texte); background: var(--fond); }
.ecran-onglets button.actif { color: #fff; background: var(--rouge); }

/* Le sommaire d'un écran de calcul sert de sélecteur. */
#sommaire .barre-outils a.actif {
  background: var(--rouge); color: #fff; border-color: var(--rouge);
}
#imo-filtre {
  display: block; width: 100%; margin: 0 0 10px;
  padding: 8px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--fond); color: var(--texte);
}
#imo-filtre:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#imo-filtre-dit { margin: -4px 0 10px; font-size: 12.5px; }

/* ⚠️ LE SOMMAIRE EST RANGÉ PAR FAMILLE. Quarante-sept liens à plat sur neuf
   lignes, dans aucun ordre perceptible, ne se lisent pas : il fallait tout
   balayer pour trouver un calcul. Cinq familles nommées se parcourent d'un
   coup d'œil. */
#sommaire .famille + .famille { border-top: 1px solid var(--trait); }
#sommaire .famille > summary {
  /* ⚠️ `display: block` est indispensable — en `list-item` le titre et les
     liens se mêlaient sur une même ligne pour les familles courtes. Mais il
     SUPPRIME le triangle de dépliage : sans le chevron ci-dessous, rien
     n'indiquerait qu'une famille s'ouvre. */
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 10px 15px; list-style: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--doux);
}
#sommaire .famille > summary::-webkit-details-marker { display: none; }
#sommaire .famille > summary::before {
  content: '›'; font-size: 15px; line-height: 1; color: var(--doux);
  transform: rotate(0deg); transition: transform .15s;
}
#sommaire .famille[open] > summary::before { transform: rotate(90deg); }
#sommaire .famille > summary:hover { color: var(--texte); background: var(--fond); }
#sommaire .famille[open] > summary { color: var(--texte); }
#sommaire .famille .compte {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  border-radius: 9px; background: var(--fond); border: 1px solid var(--trait);
  font-size: 10.5px; letter-spacing: 0; color: var(--doux);
}
#sommaire .famille .barre-outils { border-top: 0; padding-top: 8px; }

/* Le schéma attend une saisie complète : il pâlit au lieu de disparaître.
   ⚠️ L'effacer pendant qu'on vide un champ donnerait l'impression que tout
   casse à chaque frappe. */
.vue.schema-attente,
.calcul-schema.schema-attente { opacity: .38; transition: opacity .15s; }

/* ⚠️ LE SCHÉMA EST EN PLEINE LARGEUR, SOUS LA SAISIE ET LE RÉSULTAT.
 * Logé dans la colonne de résultat, il était dessiné pour 376 px et affiché
 * dans 266 : écrasé de 29 %, alors que tout son intérêt est qu'on lise les
 * cotes et les courbes.
 *
 * ⚠️ MAIS ON NE L'ÉTIRE PAS À 100 %. Chaque SVG porte son `max-width` en
 * ligne parce qu'il est DESSINÉ pour cette taille : ses textes sont en
 * `font-size` 9 à 11. Étiré à 860 px, un schéma tracé pour 376 afficherait
 * des légendes de 23 px — illisible dans l'autre sens. Le plafond ci-dessous
 * laisse respirer sans caricaturer.
 *
 * ⚠️ `!important` est ici nécessaire et non paresseux : le `max-width` que
 * l'on surcharge est un style EN LIGNE, et rien d'autre ne le bat. */
.calcul-schema { padding: 16px 18px; border-top: 1px solid var(--trait); }
/* ⚠️ LE FLEX PORTE SUR LES SVG, PAS SUR LE BLOC QUI LES CONTIENT. Un calcul
 * peut rendre PLUSIEURS dessins dans un seul conteneur — la structure du
 * dalot en rend deux. Mis sur le bloc, ils seraient restés l'un sous
 * l'autre et toute la largeur gagnée aurait servi à du vide. */
.calcul-schema > .schema {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
}
.calcul-schema svg {
  flex: 1 1 320px; min-width: 0;
  width: 100%; height: auto; max-width: 620px !important;
}

/* En étroit, les schémas s'empilent. */
@media (max-width: 900px) {
  .calcul-schema { padding: 14px 15px; }
  .calcul-schema > .schema { gap: 14px; }
  .calcul-schema svg { flex: 1 1 100%; }
}

/* ── Le tableur du chat ────────────────────────────────────── */
/* ⚠️ Un ingénieur arrive avec un classeur, pas avec un formulaire. */
.imo-tiroirs {
  display: flex; gap: 2px; padding: 6px 8px 0;
  border-bottom: 1px solid var(--trait); background: var(--carte);
}
.imo-tiroirs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--doux); cursor: pointer; border-radius: 0;
}
.imo-tiroirs button.actif { color: var(--accent); border-bottom-color: var(--accent); }
.imo-tiroir[data-contenu="tableur"] { padding: 12px; overflow: auto; flex: 1; }
.imo-aide-tableur { font-size: 12px; color: var(--doux); margin: 0 0 10px; line-height: 1.5; }
.imo-aide-tableur code, .imo-aide-tableur kbd {
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 4px; padding: 1px 4px; font-size: 11.5px;
}
table.imo-tableur { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.imo-tableur th {
  background: var(--fond); color: var(--doux); font-weight: 600;
  font-size: 11px; padding: 3px 5px; border: 1px solid var(--trait);
  position: sticky; top: 0;
}
table.imo-tableur th.imo-rang { position: static; width: 26px; text-align: center; }
table.imo-tableur td {
  border: 1px solid var(--trait); padding: 3px 6px; min-width: 56px;
  height: 24px; cursor: cell; white-space: nowrap; overflow: hidden;
}
table.imo-tableur td:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
table.imo-tableur td.imo-nb { text-align: right; font-variant-numeric: tabular-nums; }
table.imo-tableur td.imo-err { background: var(--err-doux); color: var(--err); font-weight: 600; }
table.imo-tableur input {
  width: 100%; border: 0; padding: 0; font: inherit; background: transparent;
  color: var(--texte); outline: none;
}
.imo-etat { font-size: 12px; margin: 8px 0; }

/* --- IMO·IA : déposer un fichier dans le chat ------------------------------ */

.imo-boutons-saisie { display: flex; gap: .4rem; }
.imo-boutons-saisie .principal { flex: 1; }

/* Le voile de glisser-déposer. ⚠️ `pointer-events: none` est indispensable :
   sans lui, le voile intercepte l'évènement `drop` qu'il est censé annoncer et
   le dépôt ne se produit jamais. */
.imo-depot {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; pointer-events: none;
  background: color-mix(in srgb, var(--fond, #fff) 82%, transparent);
  border: 3px dashed var(--bronze, #8a6a3a);
}
.imo-depot p { margin: 0; font-size: 1.1rem; }

.imo-feuilles { display: grid; gap: .35rem; margin: .5rem 0; }
.imo-feuille {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .55rem; border: 1px solid var(--bord, #ddd); border-radius: 6px;
}
.imo-feuille .doux { font-size: .85rem; }
.imo-feuille button { margin-left: auto; }

/* Une réserve n'est pas une erreur : elle se lit, elle n'alarme pas. */
.imo-reserve {
  margin: .35rem 0; padding: .4rem .55rem; border-radius: 6px;
  border-left: 3px solid var(--bord, #ddd); font-size: .9rem;
  background: color-mix(in srgb, var(--bronze, #8a6a3a) 7%, transparent);
}
.imo-reserve.imo-attention { border-left-color: #b3541e; }
.imo-reserve.imo-info { border-left-color: var(--bronze, #8a6a3a); }

/* La commande à copier. Elle doit pouvoir être sélectionnée d'un geste, et ne
   jamais déborder du panneau. */
.imo-commande {
  margin: .35rem 0; padding: .45rem .55rem; border-radius: 6px;
  font-size: .78rem; line-height: 1.45; user-select: all;
  overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch;
  background: color-mix(in srgb, var(--encre, #222) 7%, transparent);
  border: 1px solid var(--bord, #ddd);
}

/* ⚠️ LE DEBORDEMENT DE GRILLE, ET POURQUOI `min-width: 0` N'EST PAS DECORATIF.
 *
 * `.imo-fil` est une grille. Par defaut, un enfant de grille a
 * `min-width: auto` : il refuse de devenir plus etroit que son contenu
 * insecable. Il suffit donc d'UN element large — ici le `<pre>` qui porte la
 * commande d'installation de la cle, en `white-space: pre` — pour que la
 * colonne s'elargisse, et avec elle TOUT le fil. Mesure du 01/11/2026 : le
 * texte des reponses etait coupe au bord de l'ecran et le bouton « Ouvrir
 * dans le tableur » se retrouvait pousse hors du panneau, donc incliquable.
 *
 * ⚠️ Le defaut n'etait pas la ou il se voyait. Ce qui depassait, c'etait la
 * commande ; ce qui paraissait casse, c'etaient les phrases a cote. */
.imo-fil > * { min-width: 0; }
.imo-tour { overflow-wrap: anywhere; }
.imo-tour pre { max-width: 100%; }

/* ⚠️ LE FILET DE SECURITE, EN DERNIER RECOURS.
 *
 * Trois fois en une journee, un element a elargi le document entier : la
 * barre de navigation (1 042 px de debordement sur telephone), le panneau de
 * chat, puis la colonne de saisie des calculs. A chaque fois le symptome est
 * le meme — la page se defile lateralement, les boutons sortent de l'ecran —
 * et a chaque fois AUCUN controle ne le voit, parce que le HTML est valide.
 *
 * `overflow-x: hidden` sur la racine empeche le document de s'elargir. Ce
 * n'est PAS une correction : c'est un filet. Le contenu qui deborde est
 * coupe au lieu d'etre atteignable, ce qui peut etre pire. Chaque
 * debordement doit donc etre corrige a sa source — et outils/epreuve-depot.js
 * mesure desormais `scrollWidth` pour qu'aucun ne passe inapercu. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* ── Le sommaire des calculs ────────────────────────────────── */
.grille-calculs {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.carte-calcul {
  display: grid; gap: 5px; align-content: start; min-width: 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  box-shadow: var(--ombre); transition: border-color .12s, transform .12s;
}
.carte-calcul:hover { border-color: var(--rouge); transform: translateY(-1px); }
.carte-calcul b { font-size: 15px; color: var(--texte); }
.carte-calcul .compte {
  font-size: 11px; color: var(--doux); text-transform: uppercase;
  letter-spacing: .04em;
}
.carte-calcul .quoi { font-size: 13px; color: var(--doux); line-height: 1.45; }

/* ── La barre de contexte : projet › bâtiment › niveau ──────────────────────
 *
 * ⚠️ ELLE N'EXISTAIT QUE SUR FERRAILLAGE. Les quarante-sept calculs de
 * l'écran Calculs ne savaient ni dans quel projet, ni dans quel bâtiment, ni
 * à quel niveau ils tournaient. Elle est posée maintenant sur toutes les
 * pages, par un seul fichier — `contexte.js`.
 *
 * ⚠️ ELLE SE COLLE SOUS LE BANDEAU, pas au-dessus : le bandeau porte
 * l'identité et les rubriques, la barre porte l'endroit. Son `top` suit donc
 * la hauteur du bandeau, et les deux restent visibles quand on fait défiler.
 */
.ctx-barre {
  position: sticky; top: 52px; z-index: 29;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px;
  background: var(--carte); border-bottom: 1px solid var(--trait);
  font-size: 13px;
}
.ctx-champ { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ctx-etiquette {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--doux); white-space: nowrap;
}
.ctx-barre select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 5px 9px; max-width: 230px;
  cursor: pointer;
}
.ctx-barre select:disabled { color: var(--doux); cursor: default; }
.ctx-barre select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctx-fleche { color: var(--doux); font-size: 16px; line-height: 1; }
.ctx-pousse { flex: 1 1 auto; }
.ctx-dit { font-size: 12.5px; white-space: nowrap; }

/* ⚠️ Sur un téléphone, les trois listes ne tiennent pas sur une ligne : les
 * étiquettes disparaissent et les listes se partagent la largeur. La flèche
 * aussi — elle n'a de sens qu'en ligne. */
@media (max-width: 720px) {
  .ctx-barre { gap: 7px; padding: 7px 12px; top: 48px; }
  .ctx-etiquette, .ctx-fleche, .ctx-pousse { display: none; }
  .ctx-champ { flex: 1 1 30%; }
  .ctx-barre select { width: 100%; max-width: none; }
  .ctx-dit { flex: 1 1 100%; }
}

/* À l'impression, le contexte compte : on le garde, sans les listes. */
@media print {
  .ctx-barre { position: static; border: 0; padding: 0 0 8px; }
  .ctx-barre select { border: 0; background: none; -webkit-appearance: none; appearance: none; }
}

/* ⚠️ UNE VALEUR REPRISE DU NIVEAU DOIT SE VOIR. Sans marque, elle serait
   indiscernable d'une saisie faite à la main — et un ingénieur signerait un
   calcul en croyant avoir tapé lui-même une portée qui vient d'ailleurs. */
.repris-du-niveau {
  border-color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ⚠️ « AGIR SUR L'ÉCRAN » EST COUPÉ PAR DÉFAUT. Un assistant qui remplit des
   champs pendant qu'on tape est insupportable, et dangereux sur un logiciel
   de calcul : une valeur posée par la machine se confond avec une valeur
   saisie à la main. L'interrupteur se voit, et ce qu'il a fait s'écrit dans
   la conversation. */
.imo-option {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--doux); cursor: pointer; user-select: none;
}
.imo-option input { accent-color: var(--rouge); cursor: pointer; }
.imo-option:hover { color: var(--texte); }
.imo-agi { color: #1f6f4a; font-weight: 600; margin: 0; }

/* ── Le tableur en plein écran ──────────────────────────────────────────────
 *
 * ⚠️ HUIT COLONNES DANS 430 px NE SERVENT À RIEN POUR UN MÉTRÉ. Sept étaient
 * visibles, sur un écran qui en offre quarante. Le plein écran est une
 * CLASSE sur le panneau, pas une seconde fenêtre : une fenêtre séparée
 * aurait son propre état, et la grille s'y serait désynchronisée de la
 * conversation.
 */
.imo-panneau.imo-plein {
  width: 100vw; max-width: 100vw; left: 0; right: 0;
}
.imo-panneau.imo-plein .imo-tiroir[data-contenu="tableur"] {
  max-width: none;
}
.imo-tableur-actions {
  border-top: 0; border-bottom: 1px solid var(--trait);
  padding-bottom: 10px; flex-wrap: wrap;
}
/* La grille prend la place qui reste, et défile seule. */
#imo-grille { overflow: auto; max-height: 62vh; }
.imo-panneau.imo-plein #imo-grille { max-height: 72vh; }

/* ⚠️ Le remède pour ouvrir l'assistant en entier se replie : déplié, il
 * occupait la moitié du panneau à chaque ouverture du chat, pour trois
 * paragraphes et une commande shell qu'on lit une fois. */
.imo-remede > summary {
  cursor: pointer; font-size: 12.5px; color: var(--doux);
  padding: 4px 0; font-weight: 600;
}
.imo-remede > summary:hover { color: var(--texte); }
.imo-remede[open] > summary { margin-bottom: 6px; }

/* ── Les calculs rangés dans un niveau ──────────────────────────────────────
 *
 * Othman a choisi l'option 3 : la barre de contexte d'abord, puis
 * l'enregistrement des calculs par niveau. On rouvre un niveau, on retrouve
 * ce qu'on y a calculé.
 */
#calculs-ranges .compte {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 9px; background: var(--fond); border: 1px solid var(--trait);
  font-size: 10.5px; letter-spacing: 0; color: var(--doux);
}
ul.ranges { list-style: none; margin: 0; padding: 0; }
ul.ranges li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--trait);
}
ul.ranges li:last-child { border-bottom: 0; }
ul.ranges a { font-weight: 600; flex: 0 0 auto; }
ul.ranges .doux { flex: 1 1 auto; font-size: 12.5px; min-width: 0; }
ul.ranges button { flex: 0 0 auto; padding: 2px 9px; }

/* ── L'historique : revenir en arrière ──────────────────────────────────────
 *
 * Othman : « un historique comme ce que Claude a, pour revenir en arrière,
 * mais pour chaque compte entreprise, y compris ingénieur ».
 */
#ctx-historique { flex: 0 0 auto; white-space: nowrap; }
.ctx-modale {
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--carte); color: var(--texte);
  padding: 20px 22px; max-width: 540px; width: calc(100vw - 32px);
  box-shadow: 0 18px 50px rgba(17, 17, 17, .28);
}
.ctx-modale::backdrop { background: rgba(17, 17, 17, .42); }
.ctx-modale h2 { margin: 0 0 6px; font-size: 16px; }
.ctx-fermer {
  float: right; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--doux); padding: 0 2px;
}
.ctx-fermer:hover { color: var(--texte); }
ul.ctx-versions { list-style: none; margin: 10px 0 0; padding: 0; }
ul.ctx-versions li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--trait);
}
ul.ctx-versions .quand { font-weight: 600; flex: 0 0 auto; }
ul.ctx-versions .doux { flex: 1 1 auto; font-size: 12.5px; min-width: 0; }
ul.ctx-versions button { flex: 0 0 auto; }