/* ═══════════════════════════════════════════════════════════════
 * AES Chiffrage — feuille de styles
 * Extraite d'index.html (bloc principal lignes 14-1505 + fiche
 * organisme lignes 12170-12193). Phase 4 audit, module 1/9.
 * ═══════════════════════════════════════════════════════════════ */

/* ── BLOC 1 : tokens, layout principal, components communs ──── */
  /* ── TOKENS ─────────────────────────────────────── */
  :root {
    --navy:   #1B2A4A;
    --steel:  #2D4A7A;
    --sky:    #4A8FBF;
    --accent: #C8922A;
    --gold:   #E8B84B;
    --light:  #F4F7FB;
    --mist:   #E8EDF5;
    --text:   #1A2030;
    --muted:  #6B7A96;
    --white:  #FFFFFF;
    --ok:     #2E7D52;
    --warn:   #B85C1A;
    --radius: 10px;
    --shadow: 0 4px 24px rgba(27,42,74,.10);
    --trans:  .22s cubic-bezier(.4,0,.2,1);
  }

  /* ── PHASE DRAG & DROP ──────────────────────── */
  .site-card:hover { box-shadow: 0 4px 12px rgba(27,42,74,.18) !important; border-color: var(--sky) !important; }
  .site-card:active { cursor: grabbing; }
  .site-card[draggable="true"]:hover { transform: translateY(-1px); }
  .phase-col { transition: border-color .18s, background .18s; }
  .phase-col.drag-over { border-color: var(--accent) !important; background: #FFFBF0 !important; }
  #phase-lane-pool.drag-over { border-color: var(--warn) !important; background: #FFF5F0 !important; }

  /* Required field marker */
  .req { color: var(--warn); font-weight: 700; }
  .field-error input, .field-error select, .field-error textarea {
    border-color: var(--warn) !important;
    box-shadow: 0 0 0 3px rgba(184,92,26,.15) !important;
  }
  .field-error .field-error-msg {
    display: block !important;
  }
  .field-error-msg {
    display: none;
    font-size: .78rem;
    color: var(--warn);
    margin-top: 4px;
    font-weight: 600;
  }
  .step-error-banner {
    background: rgba(184,92,26,.08);
    border: 1.5px solid var(--warn);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 18px;
    font-size: .88rem;
    color: var(--warn);
    font-weight: 600;
    display: none;
  }
  .step-error-banner.visible { display: block; }

  /* ── RESET ──────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--light);
    color: var(--text);
    min-height: 100vh;
  }

  /* ── HEADER ─────────────────────────────────────── */
  .app-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
    color: var(--white);
    padding: 20px 40px 20px;
    position: relative;
    overflow: hidden;
    /* UNE LIGNE, TROIS BLOCS : logo · titre · raccourcis.
       Avant, les raccourcis etaient en `position: absolute` — la mise en page
       ne les voyait donc pas, et le titre pouvait passer dessous. On ne peut
       pas leur reserver une marge : leur largeur depend du nombre de boutons,
       de la police du navigateur et de la langue. Une marge devinee finit
       toujours par etre fausse sur une taille d'ecran qu'on n'a pas essayee.
       En flex la question ne se pose plus, et `align-items: center` regle du
       meme coup l'alignement vertical du titre sur le logo. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    min-height: 92px;
  }
  .app-header::after {
    content: '';
    position: absolute; right: -60px; top: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
  }
  /* La marque, A GAUCHE du titre. Pas a droite : ce cote-la porte la rangee
     de raccourcis du charge d'affaires — huit boutons en mode connecte — et
     tout ce qu'on y pose entre en concurrence avec eux des que la fenetre
     retrecit. Le bandeau etant en `overflow: hidden`, ce qui deborde ne
     deborde pas : il DISPARAIT, sans erreur et sans que personne le voie.
     A gauche, la place est libre dans les deux modes — et en mode prospect,
     ou la rangee de boutons n'existe pas, le bandeau est entierement vide.

     Variante BLANCHE du logo, fournie par AES (assets-source/
     logoAES_blancPNG.png) : le fond est un degrade navy → steel, le fichier
     noir d'origine y serait invisible. 318 x 140, soit un peu plus du double
     des 150 px d'affichage — net sur un ecran a forte densite.

     `pointer-events: none` : une image decorative ne doit jamais avaler un
     clic destine a ce qu'elle recouvre. */
  .header-logo {
    flex: 0 0 auto;
    width: 150px; height: auto;
    opacity: .95;
    /* Une image decorative ne doit jamais avaler un clic. */
    pointer-events: none;
  }
  /* Le titre prend ce qui reste, et cede en premier quand la place manque —
     c'est le bloc le plus compressible des trois. */
  .header-titre { flex: 1 1 200px; min-width: 0; z-index: 2; }
  /* Les raccourcis se collent a droite et passent a la ligne plutot que de
     disparaitre : le bandeau est en `overflow: hidden`, donc ce qui debordait
     avant ne debordait pas — il DISPARAISSAIT, sans erreur et sans que
     personne le voie. */
  .header-actions {
    margin-left: auto;
    display: flex; align-items: center; flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    z-index: 10;
  }
  /* Sous 900 px le logo s'efface : deux lignes de texte serrees valent mieux
     qu'une image qui mange la moitie de la largeur. */
  @media (max-width: 900px) {
    .header-logo { display: none; }
    .app-header { padding: 16px 20px; min-height: 0; }
  }

  /* `.header-badge` a ete SUPPRIMEE le 2026-09-17, pas seulement masquee.
     Elle affichait « IAF MD1 · MD5 · MD11 » dans les deux modes. Trois raisons,
     et la troisieme suffit : ces trois references sont OBSOLETES — les
     documents sont devenus Global ACI TECH-3-001, 3-004 et 3-008. Une regle
     affichee en permanence et fausse est exactement ce que la REGLE
     PERMANENTE (4) interdit a l'aide ; l'ecran n'a pas un statut different.
     Les sources exactes vivent dans `aide.html`, qui les tient a jour. */
  .app-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  .app-header p {
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    margin-top: 6px;
  }

  /* ── PROGRESS BAR ───────────────────────────────── */
  .progress-wrap {
    background: var(--white);
    border-bottom: 1px solid var(--mist);
    padding: 0 40px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 8px rgba(27,42,74,.06);
  }
  .progress-steps {
    display: flex;
    max-width: 860px;
    margin: 0 auto;
  }
  .ps {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 6px 10px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--trans);
    position: relative;
  }
  .ps.active  { border-color: var(--sky); }
  .ps.done    { border-color: var(--ok); }
  .ps-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--mist); color: var(--muted);
    transition: var(--trans);
    margin-bottom: 5px;
  }
  .ps.active .ps-dot  { background: var(--sky); color: var(--white); }
  .ps.done .ps-dot    { background: var(--ok);  color: var(--white); }
  .ps-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
  }
  .ps.active .ps-label { color: var(--sky); }
  .ps.done   .ps-label { color: var(--ok); }

  /* ── MAIN ───────────────────────────────────────── */
  .app-main {
    max-width: 860px;
    margin: 32px auto;
    padding: 0 20px 80px;
  }

  /* ── SECTION CARD ───────────────────────────────── */
  .section-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 36px;
    margin-bottom: 24px;
    display: none;
    animation: fadeUp .3s ease;
  }
  .section-card.visible { display: block; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .section-title .step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: .78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .section-desc {
    font-size: .87rem;
    color: var(--muted);
    margin-bottom: 24px;
    padding-left: 38px;
  }

  /* ── FORM ELEMENTS ──────────────────────────────── */
  .field { margin-bottom: 20px; }
  .field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
  }
  /* Texte secondaire — UNE taille pour tout l'outil.
     `.hint` n'existait qu'en `.field .hint` : écrite hors d'un champ, une
     consigne ne recevait AUCUN style et s'affichait en taille de corps, en
     noir, au milieu d'un bloc où tout le reste est gris et petit. Deux
     consignes du bloc site étaient dans ce cas depuis toujours.
     La typographie vit ici ; `.field .hint` ne garde que sa marge, les
     conteneurs en flex espaçant déjà leurs enfants par `gap`. */
  .hint { font-size: .78rem; color: var(--muted); }
  .field .hint { margin-top: 4px; }

  /* Légende de famille — la forme de `.grp-cap`, un cran plus bas, pour que
     les deux niveaux de titre se ressemblent. Elle remplace un intitulé à
     .75rem/700 qui n'avait de parenté avec rien. */
  .grp-fam {
    font-family: Consolas,"SFMono-Regular",Menlo,monospace;
    font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 400; margin: 0 0 5px;
  }

  /* La puce de référentiel accolée à une étiquette, au lieu d'un suffixe
     « — ISO 14001 » dans une taille à lui seul. Même objet visuel que les
     autres puces de l'outil : ça se lit comme une étiquette, pas comme la fin
     de la phrase. */
  .ref-puce {
    font-family: Consolas,"SFMono-Regular",Menlo,monospace;
    font-size: .62rem; letter-spacing: .05em; color: var(--sky);
    border: 1px solid #C7D9F7; border-radius: 3px; padding: 0 5px;
    font-weight: 400; white-space: nowrap;
  }
  input[type=text], input[type=number], input[type=email], input[type=tel], select, textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #C7D9F7;          /* gris bleute visible — avant var(--mist) trop pale */
    border-radius: var(--radius);
    font-size: .92rem;
    color: var(--text);
    background: var(--white);
    transition: var(--trans);
    outline: none;
    font-family: inherit;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(74,143,191,.12);
  }
  input[type=number] { max-width: 160px; }

  /* Inputs nombre sans spinners (eviter modifications accidentelles a la
     molette quand le champ a le focus). S'applique aux inputs prefixes
     `nre_*` (calculateur NRE) + `nb_sites_total` (step 2). */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* Checkbox group */
  .check-group { display: flex; flex-direction: column; gap: 8px; }
  .check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--light);             /* fond gris clair au lieu de transparent */
    border: 1.5px solid #C7D9F7;          /* border plus contrastee que var(--mist) */
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--trans);
    user-select: none;
  }
  .check-item:hover { border-color: var(--sky); background: var(--white); }
  .check-item.checked { border-color: var(--sky); background: rgba(74,143,191,.10); }
  /* Highlight visuel des criteres MD1 manquants apres click "Suivant" */
  .check-item.criteria-missing {
    border-color: #dc2626;
    background: #fef2f2;
    animation: criteriaShake .35s ease-out;
  }
  @keyframes criteriaShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }
  .check-item input[type=checkbox] { display: none; }
  .check-box {
    width: 20px; height: 20px;
    border: 2px solid #94A3B8;            /* gris plus visible que var(--mist) */
    background: var(--white);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: var(--trans);
    font-size: .8rem; color: var(--white);
  }
  .check-item.checked .check-box { background: var(--sky); border-color: var(--sky); }
  .check-item .check-label { font-size: .9rem; font-weight: 500; }
  .check-item .check-desc  { font-size: .78rem; color: var(--muted); }

  /* Radio group */
  .radio-group { display: flex; flex-direction: column; gap: 8px; }
  .radio-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--light);             /* fond gris clair au lieu de transparent */
    border: 1.5px solid #C7D9F7;          /* border plus contrastee que var(--mist) */
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--trans);
    user-select: none;
  }
  .radio-item:hover { border-color: var(--sky); background: var(--white); }
  .radio-item.selected { border-color: var(--sky); background: rgba(74,143,191,.10); }
  .radio-item input[type=radio] { display: none; }
  .radio-dot {
    width: 20px; height: 20px;
    border: 2px solid #94A3B8;            /* gris plus visible que var(--mist) */
    background: var(--white);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--trans);
  }
  .radio-item.selected .radio-dot { border-color: var(--sky); }
  .radio-item.selected .radio-dot::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sky);
  }

  /* Row layout */
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  @media (max-width: 600px) {
    .row, .row-3 { grid-template-columns: 1fr; }
  }

  /* Info box */
  .info-box {
    background: rgba(74,143,191,.08);
    border-left: 4px solid var(--sky);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 16px;
    font-size: .83rem;
    color: var(--steel);
    margin-bottom: 20px;
    line-height: 1.55;
  }
  .warn-box {
    background: rgba(200,146,42,.08);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 16px;
    font-size: .83rem;
    color: #6B4200;
    margin-top: 14px;
  }

  /* Site block */
  .site-block {
    border: 1.5px solid var(--mist);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--light);
    position: relative;
  }
  .site-block-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--navy);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-tag {
    background: var(--navy);
    color: var(--white);
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .04em;
  }
  .site-tag.central { background: var(--accent); }

  /* ── Bloc site : groupes legendes (D56) ──────────────────────
     Le bloc empilait des champs de haut en bas, chacun avec le style du lot
     qui l'avait ajoute : trois tailles d'etiquette, trois hauteurs de champ,
     et deux colonnes qui ne demarraient pas a la meme hauteur.
     Le remede tient en deux regles. `.lb` est LA seule etiquette du bloc.
     `.grp-cap` legende chaque groupe et fait 18px de haut PARTOUT : c'est elle
     qui aligne les colonnes entre elles — `align-items` ne le pouvait pas,
     les etiquettes des deux cotes n'ayant pas la meme taille. */
  /* Chaque bande porte son encadré — TOUTES, pas une seule.
     Le 2026-09-11, en harmonisant le bas du bloc, le panneau bleu qui ne
     coiffait que les processus a été retiré : une bande sur cinq dans sa
     propre boîte cassait le rythme. Mais les retirer tous a coûté la
     lisibilité — sur un bloc qui porte cinq bandes et une trentaine de
     champs, les légendes seules ne séparaient plus assez. La réponse
     n'était pas zéro encadré, c'était le MÊME encadré partout : blanc sur
     le fond pâle du bloc, filet d'un pixel, sans couleur d'accent.
     Le remplissage est identique d'une bande à l'autre, ce qui laisse
     `.grp-cap` continuer d'aligner les colonnes entre elles. */
  .grp {
    display: flex; flex-direction: column; gap: 11px;
    /* Le même encadré que `.fold` (l'adresse) et `.zone` (le secteur), qui
       vivent dans le même bloc : 1,5 px #C7D9F7, rayon 10, fond blanc.
       Inventer un troisième encadré à côté des deux autres, c'était refaire
       en plus discret le défaut qu'on venait de corriger. */
    background: var(--white); border: 1.5px solid #C7D9F7;
    border-radius: var(--radius); padding: 11px 13px;
  }
  /* L'espacement ne vaut qu'entre BANDES, c'est-a-dire entre enfants directs du
     bloc. Ecrit sans ce garde-fou (`.grp + .grp`), il s'appliquait aussi aux
     deux colonnes d'une meme bande — qui sont des freres dans la grille — et
     poussait la colonne de droite 16px plus bas que celle de gauche. */
  .site-block > .grp + .grp,
  .site-block > .row + .grp,
  .site-block > .grp + .row,
  .site-block > .row + .row { margin-top: 12px; }
  .row > .grp { margin-top: 0; }
  .grp-cap {
    font-family: Consolas,"SFMono-Regular",Menlo,monospace;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); display: flex; align-items: center; gap: 8px;
    margin: 0 0 9px; height: 18px;
  }
  .grp-cap::after { content: ''; flex: 1; height: 1px; background: var(--mist); }
  .lb {
    /* .82rem : une étiquette ne doit pas peser plus lourd que la légende de
       bande qui la coiffe. */
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--navy); margin-bottom: 6px;
  }
  .lb .opt { font-weight: 400; color: var(--muted); font-size: .79rem; }
  .req-star { color: var(--warn); font-weight: 700; }

  /* Referentiels applicables : une bande pleine largeur. Les panneaux
     ISO 50001 et ISO 22000 pesent une quinzaine de lignes a eux deux et
     ne tiennent pas dans une demi-colonne sans s'empiler. */
  .ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .ref-chips label {
    display: flex; align-items: center; gap: 7px; background: var(--white);
    border: 1px solid #C7D9F7; border-radius: 8px; padding: 6px 12px;
    /* .82rem comme les cases « processus » : même geste, même taille. Elles
       étaient à .86 et pesaient plus lourd sans raison. */
    cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--navy);
  }
  .ref-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 900px) { .ref-panels { grid-template-columns: 1fr; } }
  .ref-card {
    background: var(--white); border: 1px solid #C7D9F7; border-radius: 9px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0;
  }
  .ref-card > h4 {
    margin: 0; font-size: .86rem; font-weight: 600; color: var(--navy);
    display: flex; align-items: center; gap: 7px;
  }
  .ref-card select, .ref-card input[type=number] {
    padding: 6px 9px; font-size: .83rem; border-radius: 8px;
  }
  .iso50 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  @media (max-width: 620px) { .iso50 { grid-template-columns: 1fr; } }
  .ck {
    display: flex; align-items: center; gap: 8px; font-size: .83rem;
    font-weight: 600; color: var(--text); cursor: pointer;
  }
  .haccp { display: flex; align-items: center; gap: 10px; font-size: .83rem; font-weight: 600; }
  .haccp input { width: 66px; text-align: center; }
  .plist { display: flex; flex-wrap: wrap; gap: 5px; }
  .plist label {
    display: flex; align-items: center; gap: 5px; background: var(--white);
    border: 1px solid #C7D9F7; border-radius: 6px; padding: 4px 10px;
    cursor: pointer; font-size: .82rem;
  }
  .plist.ues label { border-color: var(--accent); background: rgba(200,146,42,.06); }
  /* Processus centralisé au siège (MD 1 §7.3). L'étoile était peinte en
     #856404 écrit en dur, qui ne suit ni le thème ni un changement de palette. */
  .plist label.central { border-color: #F0C060; }
  .plist .etoile { color: var(--accent); font-weight: 700; }

  /* Repli commun — l'adresse (D55) reprend la forme de la zone secteur.
     Il n'y a pas de raison d'inventer un second mecanisme de repli. */
  .fold {
    border: 1.5px solid #C7D9F7; border-radius: var(--radius);
    background: var(--white); overflow: hidden;
  }
  .fold.manque { border-color: var(--warn); }
  .fold-head {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    font-size: .85rem; font-weight: 600; color: var(--navy);
    background: transparent; border: 0; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
  }
  .fold-head .chev { font-size: .7rem; color: var(--muted); flex: none; }
  .fold-head .ttl { flex: none; }
  .fold-head .state {
    margin-left: auto; font-size: .78rem; font-weight: 400; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .fold-head .state.ok  { color: var(--ok); }
  .fold-head .state.req { color: var(--warn); }
  .fold-body { padding: 0 12px 12px; display: grid; gap: 9px; }
  .fold-body .mini { font-size: .78rem; color: var(--muted); margin-bottom: 3px; font-weight: 500; }
  /* Deux colonnes, pas trois : le repli vit dans une DEMI-colonne du bloc
     site. Avec `118px 1fr 150px`, les deux colonnes fixes mangeaient 268px et
     il ne restait qu'une cinquantaine de pixels pour la ville. Le pays passe
     sur sa propre ligne — c'est le champ dont on ne se sert presque jamais. */
  .addr-grid { display: grid; grid-template-columns: 104px 1fr; gap: 9px; }
  @media (max-width: 560px) { .addr-grid { grid-template-columns: 1fr; } }

  /* La zone secteur depliee : ce que le code NAF entraine, par referentiel.
     Il y a DEUX tableaux — EMS 2 et OH&SMS 2 — et ils divergent souvent :
     n'en nommer qu'un cachait la moitie de l'information (D57). */
  .entraine {
    display: grid; gap: 0; border: 1px solid var(--mist);
    border-radius: 8px; overflow: hidden;
  }
  .entraine > div {
    display: grid; grid-template-columns: 92px 1fr auto; gap: 10px;
    align-items: baseline; padding: 6px 10px; font-size: .79rem;
  }
  .entraine > div + div { border-top: 1px solid var(--mist); }
  .entraine .k {
    font-family: Consolas,"SFMono-Regular",Menlo,monospace; font-size: .68rem;
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  }
  .entraine .v { color: var(--text); font-style: italic; min-width: 0; }
  .entraine .v.plain { font-style: normal; }
  .entraine .n { font-weight: 700; color: var(--navy); white-space: nowrap; }
  .entraine .n.doute { color: var(--warn); }
  .site-tag.sampled { background: var(--ok); }
  .site-tag.excluded { background: var(--muted); }

  /* Group block */
  .group-block {
    border: 2px solid var(--sky);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    background: rgba(74,143,191,.04);
    position: relative;
  }
  .group-block-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .group-block-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--navy);
    flex: 1;
  }
  .group-sampling-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid var(--mist);
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
    transition: var(--trans);
  }
  .group-sampling-toggle.active { border-color: var(--ok); background: rgba(46,125,82,.07); color: var(--ok); }
  .group-sampling-toggle.inactive { border-color: var(--warn); background: rgba(184,92,26,.06); color: var(--warn); }
  .group-formula-badge {
    font-size: .75rem;
    background: var(--ok);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-weight: 700;
  }
  .group-site-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
  }
  .group-site-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    padding: 6px 10px;
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 7px;
  }
  .group-site-row.sampled-in { border-color: var(--ok); background: rgba(46,125,82,.05); }
  .group-site-row.sampled-out { opacity: .55; background: #f5f5f5; }

  /* Complexity help button */
  .cplx-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--sky);
    color: white;
    font-size: .75rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
    transition: var(--trans);
    vertical-align: middle;
    line-height: 1;
  }
  .cplx-help-btn:hover { background: var(--steel); transform: scale(1.1); }
  .cplx-help-btn title { display:none; }
  select.placeholder-active { color: var(--muted); font-style: italic; }
  select.placeholder-active option { color: var(--text); font-style: normal; }
  select.placeholder-active option[value=""] { color: var(--muted); font-style: italic; }

  /* Per-site NRE helper */
  .nre-site-helper {
    background: #EEF4FF;
    border: 1px solid #C7D9F7;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    font-size: .84rem;
  }
  .nre-site-helper-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    user-select: none;
  }
  .nre-site-helper-body {
    display: none;
    margin-top: 10px;
  }
  .nre-site-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #dde6f5;
    border-radius: 6px;
    margin-bottom: 5px;
    font-size: .82rem;
    cursor: pointer;
  }

  /* Groups container */
  #groups-panel {
    margin-bottom: 20px;
    display: none;
  }
  .groups-panel-header {
    font-weight: 700;
    font-size: .95rem;
    color: var(--navy);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mist);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn-add-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sky);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    transition: var(--trans);
  }
  .btn-add-group:hover { background: var(--steel); }
  .remove-group {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .85rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--trans);
    margin-left: auto;
  }
  .remove-group:hover { color: var(--warn); background: rgba(184,92,26,.08); }

  /* Reduction item */
  .reduction-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--mist);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--trans);
    margin-bottom: 8px;
    user-select: none;
  }
  .reduction-item:hover { border-color: var(--ok); background: rgba(46,125,82,.04); }
  .reduction-item.checked { border-color: var(--ok); background: rgba(46,125,82,.06); }
  .reduction-item .check-box { border-color: var(--mist); }
  .reduction-item.checked .check-box { background: var(--ok); border-color: var(--ok); }
  .ri-main { font-size: .9rem; font-weight: 600; color: var(--navy); }
  .ri-desc { font-size: .78rem; color: var(--muted); margin-top: 2px; }
  .ri-value { font-size: .82rem; font-weight: 700; color: var(--ok); margin-left: auto; white-space: nowrap; }

  /* Increase item */
  .increase-item { border-color: var(--mist); }
  .increase-item:hover { border-color: var(--warn); background: rgba(184,92,26,.04); }
  .increase-item.checked { border-color: var(--warn); background: rgba(184,92,26,.06); }
  .increase-item .check-box { border-color: var(--mist); }
  .increase-item.checked .check-box { background: var(--warn); border-color: var(--warn); }
  .increase-item .ri-value { color: var(--warn); }

  /* ── PASTILLES DE CODES EA (step 1) ─────────────── */
  .ea-tag {
    position: relative;
    background: var(--navy); color: #fff;
    border-radius: 5px; padding: 3px 8px;
    font-size: .8rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: help;
  }
  /* Bulle sans délai : l'attribut title natif attend ~1 s, on a le temps de
     renoncer. Ici l'affichage suit le survol immédiatement. */
  .ea-tag::after {
    content: attr(data-lbl);
    position: absolute; bottom: calc(100% + 7px); left: 0;
    background: var(--text); color: #fff;
    font-size: .78rem; font-weight: 400; line-height: 1.4;
    padding: 7px 11px; border-radius: 7px;
    width: max-content; max-width: 320px;
    box-shadow: 0 4px 16px rgba(27,42,74,.28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .1s ease, visibility .1s;
    z-index: 60;
  }
  .ea-tag:hover::after,
  .ea-tag:focus-visible::after { opacity: 1; visibility: visible; }
  .ea-tag:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .ea-tag .x { cursor: pointer; opacity: .7; }
  .ea-tag .x:hover { opacity: 1; }

  /* ── NORM CHIPS (facteurs par référentiel) ──────── */
  .norm-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; padding-left:34px; }
  .norm-chip {
    display:inline-block; padding:2px 10px; border-radius:12px; font-size:.73rem;
    cursor:pointer; border:1.5px solid #C7D9F7; background:#EEF4FF; color:var(--navy);
    font-weight:600; user-select:none; transition: all .15s;
  }
  .norm-chip.active { background:var(--navy); color:white; border-color:var(--navy); }
  .norm-chip:hover { opacity:.85; }

  /* ── AI PREFILL INDICATORS ─────────────────────── */
  [data-ai="proposed"] { border:2px solid #F0A030 !important; background:#FFFBF0 !important; }
  [data-ai="validated"] { border:2px solid #2E7D52 !important; background:#F0FFF5 !important; }
  [data-ai="missing"] { border:2px dashed #EF4444 !important; background:#FFF8F8 !important; }
  .ai-badge {
    display:inline-block; font-size:.65rem; font-weight:700; border-radius:8px;
    padding:1px 6px; margin-left:6px; vertical-align:middle; line-height:1.4;
  }
  .ai-badge-proposed { background:#FEF3C7; color:#92400E; }
  .ai-badge-validated { background:#D1FAE5; color:#065F46; }
  .ai-badge-missing { background:#FEE2E2; color:#991B1B; }

  /* ── NAVIGATION BUTTONS ─────────────────────────── */
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--mist);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 24px;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--trans);
    font-family: inherit;
  }
  .btn-primary {
    background: var(--navy);
    color: var(--white);
  }
  .btn-primary:hover { background: var(--steel); transform: translateY(-1px); }
  .btn-secondary {
    background: var(--mist);
    color: var(--navy);
  }
  .btn-secondary:hover { background: var(--mist); filter: brightness(.95); }
  .btn-accent {
    background: var(--accent);
    color: var(--white);
  }
  .btn-accent:hover { background: #B07820; transform: translateY(-1px); }
  .btn-pdf {
    background: linear-gradient(135deg, var(--navy), var(--steel));
    color: var(--white);
    padding: 13px 28px;
    font-size: .95rem;
  }
  .btn-pdf:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,42,74,.25); }
  .btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

  /* ── SUMMARY / RESULT ───────────────────────────── */
  .result-header {
    text-align: center;
    padding: 32px 24px 24px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--white);
    margin: -32px -36px 28px;
  }
  .result-header h2 { font-size: 1.3rem; font-weight: 700; }
  .result-header p  { color: rgba(255,255,255,.7); font-size: .88rem; margin-top: 4px; }

  .cycle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .cycle-card {
    background: var(--light);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    border: 1.5px solid var(--mist);
  }
  .cycle-card.highlight { border-color: var(--accent); background: rgba(200,146,42,.06); }
  .cycle-card .cc-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .cycle-card .cc-days  { font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1.1; margin: 4px 0 2px; }
  .cycle-card .cc-sub   { font-size: .76rem; color: var(--muted); }
  .cycle-card.highlight .cc-days { color: var(--accent); }

  .total-box {
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .total-box .tb-label { font-size: .9rem; font-weight: 600; opacity: .8; }
  .total-box .tb-value { font-size: 2rem; font-weight: 800; }
  .total-box .tb-sub   { font-size: .78rem; opacity: .6; }

  .calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: 16px;
  }
  .calc-table th {
    background: var(--navy);
    color: var(--white);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .03em;
  }
  .calc-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mist);
    vertical-align: top;
  }
  .calc-table tr:last-child td { border-bottom: none; }
  .calc-table tr:nth-child(even) td { background: var(--light); }
  .td-num { font-weight: 700; text-align: right; color: var(--navy); }
  .td-red { color: var(--ok); font-weight: 700; }
  .td-up  { color: var(--warn); font-weight: 700; }

  .section-h2 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--mist);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ── PRINT / PDF STYLES — conservé pour impression navigateur manuelle ─── */
  @media print {
    .progress-wrap, .app-header, .nav-bar, .btn { display: none !important; }
    .section-card { display: none !important; }
    #step6 { display: block !important; box-shadow: none !important; padding: 10px !important; margin: 0 !important; }
    body { background: white; }
    .result-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .total-box, .calc-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { margin: 1.5cm; }
  }

  /* ── MISC ───────────────────────────────────────── */
  .tag {
    display: inline-block;
    background: var(--mist);
    color: var(--steel);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .03em;
  }
  .tag.green { background: rgba(46,125,82,.12); color: var(--ok); }
  .tag.orange { background: rgba(200,146,42,.12); color: var(--accent); }
  .divider { height: 1px; background: var(--mist); margin: 20px 0; }
  .add-site-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px dashed var(--sky);
    border-radius: var(--radius);
    background: none;
    color: var(--sky);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--trans);
    font-family: inherit;
    width: 100%;
    justify-content: center;
  }
  .add-site-btn:hover { background: rgba(74,143,191,.06); }
  .remove-site {
    position: absolute; right: 14px; top: 14px;
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 1.1rem;
    transition: var(--trans);
  }
  .remove-site:hover { color: var(--warn); }

  select option { font-size: .9rem; }
  .field-inline { display: flex; gap: 12px; align-items: flex-end; }
  .field-inline .field { flex: 1; margin-bottom: 0; }

  /* ── Message de sauvegarde prospect ─────────────
     Refermable, et il revient si l'adresse change. Discret : c'est une
     reassurance, pas une alerte — un bloc rouge ferait croire a un probleme. */
  .prospect-save-note {
    position: relative;
    margin-top: 10px;
    background: var(--cool-bg, #E4F0EA);
    border: 1px solid rgba(27,106,75,.28);
    border-radius: 8px;
    padding: 11px 34px 11px 13px;
    font-size: .82rem; line-height: 1.5;
    color: #1B6A4B;
  }
  .prospect-save-note strong { font-weight: 700; }
  .prospect-save-close {
    position: absolute; top: 5px; right: 7px;
    background: none; border: none; cursor: pointer;
    font-size: 1.15rem; line-height: 1; color: #1B6A4B;
    opacity: .6; padding: 2px 5px; border-radius: 4px;
  }
  .prospect-save-close:hover { opacity: 1; }
  .prospect-save-close:focus-visible { outline: 2px solid #1B6A4B; outline-offset: 1px; }

  /* ── SITES : VUE TABLEUR (la telecommande) ───────
     Aucun style ne porte de donnee : tout se lit dans les champs des cartes,
     qui restent montes. Voir src/sites-tableur.js. */
  /* LA CARTE S'EFFACE EN VUE TABLEUR.
     La carte blanche de l'etape 4 fait 860 px, le tableau 1900 : elle se
     retrouve JUXTAPOSEE au tableau, en bande verticale de chaque cote, avec
     son ombre portee au milieu de la grille. On retire le fond, l'ombre et
     les marges laterales — le texte de l'etape reste, la boite disparait.
     Les 32 px de marge haute tombent a 10 : c'est la que se voyait le
     « trop d'espace perdu ». Le corps de la page fait fond, comme pour un
     tableau imprime en pleine page. */
  .section-card.st-nu {
    background: transparent;
    box-shadow: none;
    padding: 10px 0 0;
    animation: none;
  }
  .section-card.st-nu .section-title { padding-left: 4px; }
  .section-card.st-nu .section-desc  { padding-left: 4px; margin-bottom: 10px; }
  .section-card.st-nu .nav-bar       { padding: 0 4px; }

  /* PLEINE LARGEUR, EN CSS ET SANS RIEN MESURER.
     `.app-main` plafonne à 860 px : la bonne largeur pour lire un formulaire,
     la mauvaise pour une grille de vingt lignes. La zone sort donc de la cage.

     `50%` se rapporte à la largeur du PARENT, `50vw` à celle de la fenêtre :
     la soustraction recentre la boîte sur la fenêtre, quelle que soit la
     profondeur d'imbrication et quelles que soient les marges des ancêtres.
     Le navigateur refait le calcul à chaque reflow — il n'y a donc aucun
     instant où ce soit faux. La première version mesurait la position puis la
     corrigeait en JavaScript : elle dépendait du moment de la mesure, et la
     zone retombait sur le bord de la colonne de texte.

     ⚠ `- 48px` et non `100vw` tout court : `100vw` compte la barre de
     défilement verticale, que la mise en page ne compte pas. Une boîte de
     100vw déborde donc de la zone visible et fabrique une barre horizontale
     parasite. Les 48 px repassent dessous et laissent ~16 px de chaque côté.

     La zone porte `hidden` en vue cartes : la règle s'applique sans condition. */
  .st-zone {
    margin-bottom: 20px;
    box-sizing: border-box;
    max-width: none;
    width: calc(100vw - 48px);
    margin-left: calc(-50vw + 50% + 24px);
  }
  /* Sous 1100 px la sortie de cage ne gagne presque rien et complique la
     lecture : la zone reprend sa place dans la colonne. */
  @media (max-width: 1100px) {
    .st-zone { width: auto; margin-left: 0; }
  }
  .st-manques {
    background: #FBEBE8; border: 1px solid #A3302A; border-bottom: none;
    border-radius: 8px 8px 0 0; padding: 9px 12px;
    display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
    font-size: .83rem; color: #A3302A;
  }
  .st-manques.vide { background: #E5F0EA; border-color: #1B6A4B; color: #1B6A4B; }
  .st-mq {
    font-family: inherit; font-size: .8rem; padding: 3px 9px; border-radius: 11px;
    border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  }
  .st-mq:hover { background: rgba(163,48,42,.12); }
  .st-blocs {
    display: flex; flex-wrap: wrap; gap: 2px; background: #fff;
    border: 1px solid var(--line, #D7DEE7); border-bottom: none; padding: 0 8px;
  }
  .st-bloc {
    font-family: inherit; font-size: .82rem; font-weight: 550; cursor: pointer;
    padding: 9px 13px; border: none; background: none; color: var(--muted, #7E8899);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .st-bloc:hover { color: var(--navy); }
  .st-bloc[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
  .st-n {
    display: inline-block; margin-left: 6px; font-size: .68rem; padding: 1px 6px;
    border-radius: 9px; background: #FBEBE8; color: #A3302A;
  }
  .st-sous {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff;
    border: 1px solid var(--line, #D7DEE7); border-bottom: none; padding: 9px 12px;
  }
  .st-sous-lbl { font-size: .78rem; color: var(--muted, #7E8899); margin-right: 4px; }
  .st-sit {
    font-size: .78rem; padding: 4px 11px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--line, #D7DEE7); background: #fff; color: var(--muted, #4B5666);
    font-family: inherit;
  }
  .st-sit[aria-pressed="true"] { border-color: var(--navy); background: #DCE7FA; color: var(--navy); font-weight: 600; }
  .st-wrap {
    overflow-x: auto; background: #fff;
    border: 1px solid var(--line, #D7DEE7); border-radius: 0 0 8px 8px;
  }
  table.st-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 100%; }
  .st-grid th {
    position: sticky; top: 0; z-index: 3; background: #F6F8FA; text-align: left;
    font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
    color: var(--muted, #7E8899); padding: 8px 9px;
    border-bottom: 1px solid var(--line, #D7DEE7); vertical-align: bottom;
  }
  .st-sub { display: block; text-transform: none; letter-spacing: 0; font-size: .63rem; opacity: .85; }
  .st-grid td {
    padding: 0; border-bottom: 1px solid #E8ECF2; border-right: 1px solid #E8ECF2;
    background: #fff; vertical-align: middle; height: 36px;
  }
  .st-grid tr:hover td { background: #F4F8FE; }
  .st-cell {
    display: block; width: 100%; height: 100%; padding: 7px 9px; font-size: .85rem;
    position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: cell;
  }
  .st-cell.st-vide { color: var(--muted, #7E8899); font-style: italic; }
  td.st-actif { box-shadow: inset 0 0 0 2px #2E5090; background: #DCE7FA !important; }
  td.st-apercu { background: #C3D6F5 !important; }
  td.st-manque { background: #FBEBE8; }
  td.st-manque .st-cell { color: #A3302A; font-style: normal; }
  .st-poignee {
    position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px;
    background: #2E5090; border: 1px solid #fff; border-radius: 1px;
    cursor: crosshair; z-index: 4;
  }
  td.st-fige, th.st-fige { position: sticky; z-index: 2; background: #F6F8FA; }
  th.st-fige { z-index: 5; }
  td.st-c0, th.st-c0 { left: 0; width: 32px; text-align: center; font-size: .68rem; color: var(--muted, #7E8899); }
  td.st-c1, th.st-c1 { left: 32px; min-width: 190px; border-right: 1px solid var(--line, #D7DEE7); }
  td.st-c1 .st-cell { font-weight: 550; cursor: default; }
  .st-grid tr:hover td.st-fige { background: #DCE7FA; }
  .st-chk { display: flex; align-items: center; justify-content: center; height: 100%;
            cursor: pointer; font-size: .88rem; color: var(--muted, #7E8899); }
  .st-chk.on { color: #2E5090; font-weight: 700; }
  .st-etat { display: inline-block; font-size: .64rem; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
  .st-etat.ok { color: #1B6A4B; background: #E5F0EA; }
  .st-etat.ko { color: #A3302A; background: #FBEBE8; }
  .st-edit {
    width: 100%; height: 100%; border: none; outline: none; background: #fff;
    font-family: inherit; font-size: .85rem; padding: 7px 8px;
  }

  /* ── IMPORT AI BLOCK ─────────────────────────── */
  .import-banner {
    background: linear-gradient(135deg, rgba(27,42,74,.04) 0%, rgba(74,143,191,.08) 100%);
    border: 1.5px dashed var(--sky);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
  }
  /* Replié par défaut. La flèche pivote à l'ouverture ; on masque le marqueur
     natif des deux façons (WebKit et standard), sans quoi on obtient DEUX
     chevrons sur Safari. */
  .import-banner-summary {
    font-weight: 700; font-size: .95rem; color: var(--navy);
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; list-style: none; user-select: none;
  }
  .import-banner-summary::-webkit-details-marker { display: none; }
  .import-banner-summary::after {
    content: '›'; margin-left: auto;
    font-size: 1.35rem; line-height: 1; color: var(--sky);
    transform: translateY(-1px); transition: transform .18s ease;
  }
  .import-banner[open] .import-banner-summary::after { transform: rotate(90deg); }
  .import-banner[open] .import-banner-summary { margin-bottom: 14px; }
  .import-banner-summary:focus-visible {
    outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px;
  }
  @media (prefers-reduced-motion: reduce) {
    .import-banner-summary::after { transition: none; }
  }
  .import-banner-title {
    font-weight: 700; font-size: .95rem; color: var(--navy);
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .import-banner-title .ai-badge {
    background: var(--sky); color: white;
    font-size: .65rem; font-weight: 700; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 20px; text-transform: uppercase;
  }
  .import-banner p { font-size: .85rem; color: var(--muted); margin-bottom: 14px; line-height: 1.55; }
  .import-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .btn-import {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: var(--radius);
    background: var(--sky); color: white;
    font-size: .88rem; font-weight: 700; cursor: pointer;
    border: none; transition: var(--trans); font-family: inherit;
  }
  .btn-import:hover { background: var(--steel); transform: translateY(-1px); }
  .btn-manual-link {
    font-size: .83rem; color: var(--muted); cursor: pointer;
    text-decoration: underline; background: none; border: none;
    font-family: inherit; transition: var(--trans);
  }
  .btn-manual-link:hover { color: var(--navy); }
  #file-input-hidden { display: none; }

  /* Upload zone */
  .upload-zone {
    border: 2px dashed var(--sky);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    background: rgba(74,143,191,.04);
    cursor: pointer;
    transition: var(--trans);
    margin-bottom: 16px;
  }
  .upload-zone:hover, .upload-zone.drag-over {
    background: rgba(74,143,191,.10);
    border-color: var(--steel);
  }
  .upload-icon { font-size: 2.2rem; margin-bottom: 8px; }
  .upload-zone p { font-size: .88rem; color: var(--muted); margin: 0; }
  .upload-zone strong { color: var(--navy); }

  /* Chat container */
  .chat-container {
    border: 1.5px solid var(--mist);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    display: none;
  }
  .chat-header {
    background: var(--navy);
    color: white;
    padding: 10px 16px;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; animation: pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .chat-messages {
    max-height: 380px;
    overflow-y: auto;
    padding: 16px;
    background: var(--light);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .msg {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.55;
  }
  .msg.assistant {
    background: white;
    border: 1.5px solid var(--mist);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
    color: var(--text);
  }
  .msg.user {
    background: var(--navy);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
  }
  .msg.thinking {
    background: white;
    border: 1.5px solid var(--mist);
    align-self: flex-start;
    color: var(--muted);
    font-style: italic;
    font-size: .82rem;
  }
  .chat-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    background: white;
    border-top: 1px solid var(--mist);
  }
  .chat-input-bar input {
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid var(--mist);
    border-radius: 20px;
    font-size: .88rem;
    outline: none;
    font-family: inherit;
    transition: var(--trans);
  }
  .chat-input-bar input:focus { border-color: var(--sky); }
  .btn-send {
    width: 38px; height: 38px;
    background: var(--sky); color: white;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: var(--trans); flex-shrink: 0;
  }
  .btn-send:hover { background: var(--steel); }
  .btn-send:disabled { opacity: .4; cursor: not-allowed; }

  /* Parsed sites preview */
  .sites-preview {
    display: none;
    margin-top: 14px;
  }
  .sites-preview-title {
    font-weight: 700; font-size: .88rem; color: var(--ok);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
  }
  .site-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(46,125,82,.08); border: 1px solid rgba(46,125,82,.2);
    border-radius: 20px; padding: 4px 10px 4px 8px;
    font-size: .78rem; color: var(--ok); font-weight: 600;
    margin: 3px;
  }
  /* ── COMPLEXITY ASSISTANT ───────────────────────── */
  .help-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #4A6FA5, #2D4A7A);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--trans);
    font-family: inherit;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(45,74,122,.25);
  }
  .help-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(45,74,122,.35); }
  .help-btn .help-icon {
    width: 18px; height: 18px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800;
  }

  /* Modal overlay */
  .cplx-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(10,18,35,.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .cplx-modal-overlay.open { display: flex; animation: fadeIn .2s ease; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }

  .cplx-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(10,18,35,.35);
    overflow: hidden;
    animation: slideUp .25s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

  .cplx-modal-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
    color: white;
    padding: 20px 24px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
  }
  .cplx-modal-header h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
  .cplx-modal-header p { font-size: .78rem; opacity: .7; margin-top: 3px; }
  .cplx-modal-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: white;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--trans);
  }
  .cplx-modal-close:hover { background: rgba(255,255,255,.3); }

  /* Progress indicators inside modal */
  .cplx-progress {
    display: flex;
    gap: 4px;
    padding: 10px 24px 0;
    flex-shrink: 0;
  }
  .cplx-prog-dot {
    height: 4px; flex: 1;
    border-radius: 2px;
    background: var(--mist);
    transition: background .3s ease;
  }
  .cplx-prog-dot.done  { background: var(--ok); }
  .cplx-prog-dot.active { background: var(--sky); }

  /* Chat area inside modal */
  .cplx-chat {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
  }
  .cplx-msg {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .875rem;
    line-height: 1.5;
    animation: msgPop .2s ease;
  }
  @keyframes msgPop { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
  .cplx-msg.bot {
    background: var(--light);
    border: 1px solid var(--mist);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
  }
  .cplx-msg.user {
    background: var(--navy);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
  }
  .cplx-msg.thinking {
    background: var(--mist);
    color: var(--muted);
    font-style: italic;
    font-size: .82rem;
    align-self: flex-start;
  }

  /* Quick-reply chips */
  .cplx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 12px;
    flex-shrink: 0;
  }
  .cplx-chip {
    padding: 7px 14px;
    border: 1.5px solid var(--sky);
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--steel);
    cursor: pointer;
    background: white;
    transition: var(--trans);
    font-family: inherit;
  }
  .cplx-chip:hover { background: var(--sky); color: white; border-color: var(--sky); }

  /* Text input bar */
  .cplx-input-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--mist);
    flex-shrink: 0;
  }
  .cplx-input-bar input {
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid var(--mist);
    border-radius: 20px;
    font-size: .875rem;
    outline: none;
    font-family: inherit;
    width: auto;
    max-width: none;
  }
  .cplx-input-bar input:focus { border-color: var(--sky); }
  .cplx-input-bar button {
    padding: 9px 18px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--trans);
  }
  .cplx-input-bar button:hover { background: var(--steel); }
  .cplx-input-bar button:disabled { opacity: .4; cursor: not-allowed; }

  /* Result verdict banner */
  .cplx-verdict {
    margin: 4px 20px 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 600;
    display: none;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
  }
  .cplx-verdict.show { display: flex; animation: fadeIn .3s ease; }
  .cplx-verdict.high  { background: rgba(184,92,26,.08); border: 1.5px solid var(--warn); color: var(--warn); }
  .cplx-verdict.med   { background: rgba(74,143,191,.08); border: 1.5px solid var(--sky); color: var(--steel); }
  .cplx-verdict.low   { background: rgba(46,125,82,.08); border: 1.5px solid var(--ok); color: var(--ok); }
  .cplx-verdict.lim   { background: rgba(107,122,150,.08); border: 1.5px solid var(--muted); color: var(--muted); }
  .cplx-verdict-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
  .cplx-verdict-value { font-size: 1.1rem; font-weight: 800; }
  .cplx-verdict-reason { font-size: .8rem; font-weight: 400; opacity: .85; margin-top: 2px; }
  .cplx-apply-btn {
    padding: 10px 20px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
    align-self: flex-start;
    transition: var(--trans);
  }
  .cplx-apply-btn:hover { background: var(--steel); }

  /* ── ADMIN LOCK BUTTON ───────────────────────────── */
  .admin-lock-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
    font-size: .82rem;
    display: flex; align-items: center; gap: 6px;
    transition: var(--trans);
    z-index: 10;
    white-space: nowrap;
  }
  .admin-lock-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
  }
  .admin-lock-btn svg { width:15px; height:15px; }

  /* ── PIPELINE KANBAN ──────────────────────────────── */
  .kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 24px;
    min-height: 60vh;
    align-items: flex-start;
  }
  .kanban-col {
    min-width: 200px;
    max-width: 220px;
    flex-shrink: 0;
    background: var(--light);
    border-radius: 10px;
    border: 1.5px solid var(--mist);
    display: flex;
    flex-direction: column;
  }
  .kanban-col-header {
    padding: 10px 12px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy);
    border-bottom: 1.5px solid var(--mist);
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
  }
  .kanban-col-header .count {
    background: var(--mist);
    color: var(--muted);
    font-size: .7rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
  }
  .kanban-col-body {
    padding: 8px;
    flex: 1;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background .15s;
  }
  .kanban-col-body.drag-over {
    background: rgba(37,99,235,.06);
    border-radius: 0 0 8px 8px;
  }
  .kanban-card {
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    font-size: .8rem;
    transition: box-shadow .15s, transform .15s;
    position: relative;
  }
  .kanban-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transform: translateY(-1px);
  }
  .kanban-card:active { cursor: grabbing; }
  .kanban-card.dragging { opacity: .5; }
  .kanban-card-title {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kanban-card-meta {
    font-size: .72rem;
    color: var(--muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .kanban-card-badge {
    display: inline-block;
    font-size: .65rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
  }
  .kanban-card-alert {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
  }
  /* Pipeline detail panel */
  .pipeline-detail {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0,0,0,.3);
  }
  .pipeline-detail-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .pipeline-detail-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px 24px;
  }
  .pipeline-action-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: .84rem;
  }
  .pipeline-action-item:last-child { border-bottom: none; }
  .pipeline-action-type {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-right: 6px;
  }

  /* ── ADMIN LOGIN MODAL ───────────────────────────── */
  #admin-login-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(10,20,45,.6); z-index:3000;
    align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
  }
  #admin-login-overlay.open { display:flex; }
  .admin-login-box {
    background:#fff; border-radius:14px;
    padding:36px 40px 32px;
    width:340px; box-shadow:0 16px 48px rgba(10,20,45,.22);
    position:relative;
  }
  .admin-login-box h2 {
    font-size:1.1rem; font-weight:700;
    color:var(--navy); margin-bottom:6px;
  }
  .admin-login-box p { font-size:.82rem; color:var(--muted); margin-bottom:22px; }
  .admin-login-box label {
    display:block; font-size:.78rem; font-weight:600;
    color:var(--steel); margin-bottom:4px; margin-top:14px;
  }
  .admin-login-box input {
    width:100%; padding:9px 12px; border:1.5px solid var(--mist);
    border-radius:7px; font-size:.9rem; outline:none;
    transition: border-color .18s;
  }
  .admin-login-box input:focus { border-color:var(--sky); }
  .admin-login-error {
    color:#c0392b; font-size:.78rem; margin-top:8px;
    min-height:18px; display:block;
  }
  .admin-login-actions {
    display:flex; gap:10px; margin-top:22px;
  }
  .admin-login-actions button {
    flex:1; padding:10px; border-radius:7px;
    font-size:.88rem; font-weight:600; cursor:pointer;
    border:none; transition:var(--trans);
  }
  .btn-admin-ok {
    background:var(--navy); color:#fff;
  }
  .btn-admin-ok:hover { background:var(--steel); }
  .btn-admin-cancel {
    background:var(--mist); color:var(--text);
  }
  .btn-admin-cancel:hover { background:#dce3ef; }

  /* ── ADMIN PANEL ─────────────────────────────────── */
  #admin-panel {
    display:none; position:fixed; inset:0;
    background:var(--light); z-index:2000;
    overflow-y:auto;
  }
  #admin-panel.open { display:block; }
  .admin-header {
    background:linear-gradient(135deg,var(--navy),var(--steel));
    color:#fff; padding:20px 32px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:10;
  }
  .admin-header h2 { font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:10px; }
  .admin-header-actions { display:flex; gap:10px; }
  .btn-admin-save {
    background:var(--accent); color:#fff;
    border:none; border-radius:7px; padding:9px 20px;
    font-size:.88rem; font-weight:700; cursor:pointer;
    transition:var(--trans);
  }
  .btn-admin-save:hover { background:var(--gold); }
  .btn-admin-reset {
    background:rgba(255,255,255,.15); color:#fff;
    border:1px solid rgba(255,255,255,.3); border-radius:7px;
    padding:9px 16px; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:var(--trans);
  }
  .btn-admin-reset:hover { background:rgba(255,255,255,.25); }
  .btn-admin-close {
    background:rgba(255,255,255,.1); color:#fff;
    border:1px solid rgba(255,255,255,.2); border-radius:7px;
    padding:9px 16px; font-size:.82rem; cursor:pointer;
    transition:var(--trans);
  }
  .btn-admin-close:hover { background:rgba(255,255,255,.22); }

  .admin-body { max-width:1100px; margin:0 auto; padding:28px 24px; }

  /* Onglets admin */
  .admin-tabs {
    display:flex; gap:4px; margin-bottom:24px;
    border-bottom:2px solid var(--mist);
    overflow-x:auto;
  }
  .admin-tab {
    padding:10px 20px; font-size:.88rem; font-weight:600;
    color:var(--muted); background:none; border:none;
    border-bottom:3px solid transparent; margin-bottom:-2px;
    cursor:pointer; transition:var(--trans); white-space:nowrap;
  }
  .admin-tab.active { color:var(--navy); border-bottom-color:var(--accent); }
  .admin-tab:hover:not(.active) { color:var(--steel); }

  .admin-tab-panel { display:none; }
  .admin-tab-panel.active { display:block; }

  /* Tables IAF dans admin */
  .admin-table-wrap { overflow-x:auto; margin-bottom:28px; }
  .admin-iaf-table {
    border-collapse:collapse; width:100%;
    font-size:.78rem;
  }
  .admin-iaf-table th {
    background:var(--navy); color:#fff;
    padding:8px 10px; text-align:center;
    font-weight:600; font-size:.75rem;
    position:sticky; top:0;
  }
  .admin-iaf-table th:first-child { text-align:left; min-width:140px; }
  .admin-iaf-table td {
    border:1px solid var(--mist);
    padding:4px 6px; text-align:center;
  }
  .admin-iaf-table tr:nth-child(even) td { background:#f8fafd; }
  .admin-iaf-table td:first-child {
    background:#eef2f8; font-weight:600;
    font-size:.72rem; color:var(--steel);
    text-align:left; padding-left:10px;
  }
  .admin-iaf-table input[type=number] {
    width:58px; padding:4px 6px;
    border:1.5px solid transparent; border-radius:5px;
    font-size:.78rem; text-align:center;
    background:transparent; outline:none;
    transition:border-color .15s;
  }
  .admin-iaf-table input[type=number]:hover { border-color:var(--mist); }
  .admin-iaf-table input[type=number]:focus { border-color:var(--sky); background:#fff; }

  /* Paramètres généraux */
  .admin-params-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media(max-width:640px){ .admin-params-grid { grid-template-columns:1fr; } }
  .admin-param-card {
    background:#fff; border-radius:10px;
    border:1px solid var(--mist);
    padding:18px 20px;
  }
  .admin-param-card h3 {
    font-size:.82rem; font-weight:700; color:var(--navy);
    text-transform:uppercase; letter-spacing:.06em;
    margin-bottom:14px; padding-bottom:8px;
    border-bottom:1px solid var(--mist);
  }
  .admin-param-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 0; border-bottom:1px solid #f0f2f7;
    gap:10px;
  }
  .admin-param-row:last-child { border-bottom:none; }
  .admin-param-label { font-size:.8rem; color:var(--text); flex:1; }
  .admin-param-label small { display:block; font-size:.7rem; color:var(--muted); }
  .admin-param-input {
    display:flex; align-items:center; gap:5px;
  }
  .admin-param-input input[type=number] {
    width:70px; padding:5px 8px;
    border:1.5px solid var(--mist); border-radius:6px;
    font-size:.85rem; text-align:center; outline:none;
    transition:border-color .15s;
  }
  .admin-param-input input[type=number]:focus { border-color:var(--sky); }
  .admin-param-input span { font-size:.8rem; color:var(--muted); }
  .admin-save-ok {
    display:none; color:var(--ok); font-size:.82rem;
    font-weight:600; margin-left:12px;
  }
  .admin-section-title {
    font-size:.9rem; font-weight:700; color:var(--navy);
    margin:20px 0 12px;
  }

.naf-item{padding:8px 12px;cursor:pointer;font-size:.88rem;border-bottom:1px solid #eee;display:flex;gap:8px;align-items:center;}
.naf-item:hover{background:#EEF4FF;}
.naf-item-code{font-weight:700;color:var(--navy);min-width:52px;}
.naf-item-label{flex:1;color:var(--text);}
.naf-item-ea{font-size:.78rem;color:var(--muted);}

/* ── BLOC 2 : fiche organisme a onglets (page Clients) ──────── */
.of-tab {
  background:none;border:none;padding:10px 14px;font-size:.84rem;font-weight:500;color:#64748b;
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
}
.of-tab:hover { color:var(--navy); }
.of-tab.active { color:var(--navy); border-bottom-color:var(--navy); font-weight:600; }
.org-row {
  display:grid;grid-template-columns:2.5fr 1fr 1.2fr 80px 80px 110px 100px;gap:10px;
  padding:10px 12px;border-bottom:1px solid #f1f5f9;font-size:.84rem;align-items:center;
}
.org-row.header { font-weight:600;color:#64748b;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;background:#f8fafc; }
.org-row:not(.header):hover { background:#f8fafc;cursor:pointer; }
.org-tag {
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7rem;
  background:#eef2ff;color:#4338ca;border:1px solid #e0e7ff;margin-right:4px;
}
.org-tag.prospect { background:#fff7ed;color:#c2410c;border-color:#fed7aa; }
.org-tag.client-actif { background:#ecfdf5;color:#065f46;border-color:#a7f3d0; }
.org-tag.ancien-client { background:#f3f4f6;color:#4b5563;border-color:#e5e7eb; }
.org-kpi {
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;
}
.org-kpi .label { font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
.org-kpi .value { font-size:1.4rem;font-weight:700;color:var(--navy);margin-top:4px; }

/* Particularités du site (étape 4) — les exemples vivent dans le champ :
   une légende au-dessus se lit une fois, un placeholder se lit au moment
   d'écrire. */
/* .82rem comme le reste de ce qui se lit et se saisit dans le bloc : les
   zones de saisie de l'outil sont a .92rem, ce qui rendait les exemples plus
   gros que les etiquettes qui les coiffent. */
.partic-ta { font-size: .82rem; line-height: 1.45; }
.partic-ta::placeholder { color: var(--muted); font-style: italic; opacity: .9; }
.partic-ta:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(74,143,191,.12); }

/* ── Secteur du site (étape 4) — zone repliée, cliquable dans son entier.
   Reprise de la maquette validée le 2026-09-08 : le NAF et l'EA avec leur
   libellé en petit dessous, et le marqueur hérité / propre au site. ── */
.zone { border:1.5px solid #C7D9F7; border-radius:10px; background:#fff; transition:.2s; }
.zone:hover { border-color: var(--sky); }
.zone.own  { border-color: var(--sky); }
.zline { display:flex; align-items:flex-start; gap:10px; padding:6px 10px; }
.zttl { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase;
        letter-spacing:.05em; padding-top:3px; flex:none; }
.zvals { flex:1; min-width:0; display:flex; flex-direction:column; }
.zv { font-size:.79rem; line-height:1.35; }
.zv b { font-family:Consolas,"SFMono-Regular",Menlo,monospace; font-weight:700; color:var(--navy); }
.zv b.ea { background:var(--navy); color:#fff; border-radius:3px; padding:0 5px; font-size:.73rem; }
.zone.own .zv b.ea { background:var(--sky); }
.zv span { color:var(--muted); font-size:.74rem; }
.zright { display:flex; align-items:center; gap:7px; flex:none; padding-top:2px; }
.zone .flag { font-family:Consolas,"SFMono-Regular",Menlo,monospace; font-size:.63rem;
              letter-spacing:.05em; text-transform:uppercase; border-radius:3px;
              padding:1px 6px; flex:none; }
.zone .flag.herit  { color:var(--muted); background:var(--mist); }
.zone .flag.propre { color:var(--sky); background:rgba(74,143,191,.12); border:1px solid var(--sky); }
.chev { font-size:.72rem; color:var(--muted); flex:none; }
.zbody { padding:9px 10px 10px; display:grid; gap:8px; border-top:1px solid var(--mist); }
.zbody .mini { font-size:.76rem; color:var(--muted); margin-bottom:3px; font-weight:500; }
.zbody .lnk { background:none; border:0; padding:0; font-family:inherit; font-size:.79rem;
              color:var(--warn); cursor:pointer; text-decoration:underline; justify-self:start; }