:root{
  --fond:#F6F8FA;
  --carte:#FFFFFF;
  --encre:#111C2B;
  --encre-2:#5B6B7F;
  --encre-3:#8A99AA;
  --trait:#DDE4EB;
  --trait-2:#EDF1F5;
  --champ:#F6F8FA;
  --ca:#16A34A;
  --r-carte:18px;
  --r-champ:11px;
  /* Palette Sky (Tailwind CSS) — couleur de marque de l'interface */
  --sky-50:#F0F9FF;
  --sky-100:#E0F2FE;
  --sky-200:#BAE6FD;
  --sky-300:#7DD3FC;
  --sky-400:#38BDF8;
  --sky-500:#0EA5E9;
  --sky-600:#0284C7;
  --sky-700:#0369A1;
  --sky-800:#075985;
  --sky-900:#0C4A6E;
  --sky-950:#082F49;
  /* UN SEUL BLEU POUR TOUS LES CONTRÔLES NATIFS (2026-09-09). `accent-color` est HÉRITÉE : posée ici, elle
     tient d'un coup toutes les cases à cocher, radios, curseurs et barres de progression du site, y compris
     les futurs. Sans elle, une case native prenait le bleu par défaut du navigateur (~#0B57D0 sur Chrome),
     visiblement différent du --sky-600 de l'interface — signalé à l'usage sur la ligne « ce qui a bougé »,
     où la case du constat et l'ampoule de la recommandation sont côte à côte : deux bleus voisins mais pas
     identiques se lisent comme une erreur, pas comme une nuance.
     Corriger ici plutôt qu'au cas par cas : deux fichiers seulement portaient l'accent (.module-checkbox,
     .note-triage-essentiel), tout le reste dérivait en silence. */
  accent-color:var(--sky-600);
  /* Icône de validation (cercle + coche, fournie par l'utilisateur — jamais le tracé seul). Posée ici en
     variable depuis le 2026-09-09 : elle est désormais utilisée à trois endroits (segment traité d'un axe,
     étape faite) et le data URI était déjà écrit deux fois par usage, à cause du préfixe -webkit-.
     S'applique en MASQUE, jamais en background-image : c'est ce qui permet de la colorer par
     `background-color` et donc de suivre une couleur dynamique. */
  --check-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8 12.5l2.5 2.5L16 9'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:'Figtree',system-ui,sans-serif;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.num{font-variant-numeric:tabular-nums}

/* ============ BANDEAU ============ */
.accent-haut{position:sticky;top:0;z-index:61;height:3px;background:var(--sky-600)}
.bandeau{
  position:sticky;top:3px;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait);
}
.bandeau-in{max-width:1340px;margin:0 auto;padding:6px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.logo img{display:block;height:57px}
.lien-bandeau{border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--encre-2);transition:color .12s}
.lien-bandeau:hover{color:var(--sky-700)}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{border-radius:14px;padding:6px 14px;min-width:104px;background:var(--champ);border:1px solid var(--trait)}
.pill .k{display:block;font-size:11px;font-weight:600;color:var(--encre-3);text-transform:uppercase;letter-spacing:.05em}
.pill .v{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pill.vert{background:#EAF7EF;border-color:#BFE6CE}.pill.vert .v{color:#15803D}
.pill.rouge{background:#FDECEC;border-color:#F5C6C6}.pill.rouge .v{color:#B91C1C}
.pill.bleu{background:var(--sky-100);border-color:var(--sky-200)}.pill.bleu .v{color:var(--sky-700)}
.bouton{
  border:1px solid var(--trait);background:#fff;color:var(--encre-2);
  padding:9px 15px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;
}
.bouton:hover{border-color:#B9C6D4;color:var(--encre)}
.audit-bouton-icone-texte{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;flex:none;border-radius:7px}
.audit-bouton-icone-texte svg{width:17px;height:17px;flex:none}
.bouton:focus-visible{outline:2px solid var(--sky-600);outline-offset:2px}
.bouton:disabled{opacity:.5;cursor:not-allowed}
.bouton:disabled:hover{border-color:var(--trait);color:var(--encre-2)}
.bouton-primaire{
  background:var(--sky-600);color:#fff;border-color:transparent;
}
.bouton-primaire:hover{background:var(--sky-700);color:#fff}
.bouton-icone{display:inline-flex;align-items:center;gap:7px}
.bouton-icone svg{width:17px;height:17px;flex:none}
/* ⚠️ LISTE D'ids EN DUR — TOUT NOUVEAU BOUTON-ICÔNE DU BANDEAU DOIT Y ÊTRE AJOUTÉ.
   Sans ça il garde la bordure et le fond de `.bouton` plus une icône à 17px, et détonne au milieu
   de ses voisins sans qu'aucune règle ne signale l'oubli. Vécu le 2026-09-11 avec le bouton du
   référentiel (« le bouton fait tache à côté des autres »). */
#btnCalculette svg,#btnEnregistrerPrincipal svg,#btnPartagerEtude svg,#btnAuditEnregistrerPrincipal svg,#btnAuditChargerRapide svg,#btnAuditNouveau svg{width:26px;height:26px}
#btnCalculette,#btnEnregistrerPrincipal,#btnPartagerEtude,#btnAuditEnregistrerPrincipal,#btnAuditChargerRapide,#btnAuditNouveau,#btnAuditReferentiel{border-color:transparent;background:transparent;padding:5px}
/* 28 et non 26 : CORRECTION OPTIQUE, pas une exception arbitraire. Le tracé du presse-papiers
   n'occupe qu'environ 62 % de son viewBox là où la disquette et le dossier en remplissent ~75 % —
   à taille de boîte égale il paraissait plus petit. On égalise ce qui se voit, pas ce qui se mesure. */
#btnAuditReferentiel svg{width:28px;height:28px}
/* Flash vert de confirmation (auditConfirmerIcone) — GÉNÉRIQUE depuis le 2026-09-12 : la même disquette
   existe dans le bandeau et dans les modales d'édition du rapport d'audit et du bilan. Une règle par id
   aurait laissé la prochaine sans retour visuel, sans que rien ne signale l'oubli. */
#btnAuditEnregistrerPrincipal,#btnRaEnregistrer,#btnBilanEnregistrer{transition:color .15s}
.audit-icone-confirme{color:#15803D}
#btnMesEtudes,#btnMesAudits{border-color:transparent;background:transparent;padding:5px 12px}
.bouton-utilisateur{border-color:transparent;background:transparent}
.bouton-utilisateur:hover{background:var(--champ);border-color:transparent}
.menu-deroulant[data-ouvert] .bouton-utilisateur{background:var(--champ)}
.separateur-v{width:1px;height:24px;background:var(--trait);margin:0 8px}

.menu-deroulant{position:relative;display:inline-flex}
.menu-deroulant > .bouton{display:inline-flex;align-items:center;gap:6px}
.menu-chevron{display:block;flex:none;transition:transform .12s}
.menu-deroulant[data-ouvert] .menu-chevron{transform:rotate(180deg)}
.menu-deroulant-panneau{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;
  background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  box-shadow:0 10px 30px rgba(17,28,43,.14);padding:6px;min-width:210px;
  display:flex;flex-direction:column;gap:2px;
}
.menu-deroulant-panneau[hidden]{display:none}
.menu-deroulant-panneau.aligne-droite{left:auto;right:0}
.menu-item{
  display:flex;align-items:center;gap:8px;padding:9px 11px;border:0;background:transparent;
  border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--encre);
  cursor:pointer;text-align:left;width:100%;text-decoration:none;box-sizing:border-box;
}
.menu-item:hover{background:var(--sky-50)}

/* ============ TRAME ============ */
main{max-width:1340px;margin:0 auto;padding:24px 22px 10px}
/* ---- Confort de défilement (2026-09-09) : le bandeau est collant sur ~74px (3px d'accent + 58px de
   logo + 12px de padding + 1px de filet). Sans cette réserve, TOUT défilement programmatique en
   `block:'start'` — il y en a une dizaine dans le module Audit — dépose le haut de la cible DERRIÈRE le
   bandeau : on scrolle vers un rapport qu'on vient de générer et son titre est masqué.
   `scroll-padding-top` sur le conteneur de défilement corrige les appels existants ET tous les futurs,
   sans avoir à les énumérer ni à annoter chaque cible.
   `scroll-padding-bottom` joue le même rôle en bas : un bloc qu'on vient de déplier ne se colle pas au
   bord inférieur de la fenêtre, il garde un peu d'air. C'est de l'ALIGNEMENT de défilement, pas de la
   hauteur ajoutée à la page : contrairement à un padding, ça ne crée aucun espace vide.
   (Deux gouttières en fin de page ont été essayées puis retirées le même jour — une permanente de 40vh,
   puis une calculée et posée en JS le temps d'un dépli. Toutes deux servaient un objectif trop ambitieux,
   « amener le HAUT du bloc en haut de l'écran », qui impose de créer de la hauteur quand le bloc est le
   dernier. Voir auditRemonterSiDeborde : rendre le bloc entièrement visible n'en demande aucune.) */
@media screen{ html{scroll-padding-top:90px;scroll-padding-bottom:24px} }
.colonnes{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
aside{position:sticky;top:140px;display:flex;flex-direction:column;gap:16px}

.titre-section{display:flex;align-items:center;gap:10px;margin:0 0 12px 2px;flex-wrap:wrap}
.titre-section .n{
  width:24px;height:24px;border-radius:8px;background:var(--encre);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none
}
.titre-section h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.titre-section span{font-size:13.5px;color:var(--encre-2)}
/* Étiquette noire pour un sous-titre de sous-section (ex. onglet Rapport d'audit : "État d'avancement" vs
   "Rapport d'audit" en dessous du titre d'onglet) — même famille visuelle que le badge numéroté .n
   ci-dessus, mais en pilule à largeur variable pour accueillir du texte plutôt qu'un seul chiffre. */
.titre-section h2.titre-badge{
  background:var(--encre);color:#fff;padding:5px 12px;border-radius:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}

.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);margin-bottom:14px;overflow:hidden}
.carte-tete{display:flex;align-items:center;gap:11px;padding:13px 15px}
.ico{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;
}
.ico svg{width:18px;height:18px}
.carte-tete h3{margin:0;font-size:15.5px;font-weight:700;flex:1;letter-spacing:-.01em}
.montant{font-size:15px;font-weight:700;padding:4px 11px;border-radius:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.carte-corps{padding:0 15px 15px}
.carte.eteinte .carte-corps{display:none}
.carte.eteinte .montant{background:var(--champ) !important;color:var(--encre-3) !important;font-weight:600}

/* ============ CHAMPS ============ */
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,220px));justify-content:start;gap:13px}
.champ{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0}
.champ > label{font-size:12.5px;font-weight:600;color:var(--encre-2)}
.saisie{display:flex;align-items:center;background:var(--champ);border:1.5px solid var(--trait);border-radius:var(--r-champ);transition:border-color .12s,box-shadow .12s}
.saisie:focus-within{border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(2,132,199,.14);background:#fff}
.saisie.erreur{border-color:#F5C6C6;background:#FFF7F7}
.saisie.erreur:focus-within{border-color:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
.saisie input{
  width:100%;min-width:0;border:0;background:transparent;padding:9px 0 9px 12px;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums;
}
/* Champs numériques : le chiffre + l'unité restent collés à gauche à l'intérieur de la boîte (pas
   étirés aux deux bouts), mais la boîte elle-même (.saisie) suit exactement la même règle de
   largeur que <select class="saisie-select"> (100% de sa colonne de grille) — c'est cette colonne,
   via .champs ci-dessus (168px minimum, jusqu'à 220px si la ligne a la place), qui sert de référence
   de taille commune à tous les champs, select comme champ numérique. */
.saisie input[inputmode="decimal"]{flex:0 1 auto;width:auto;min-width:34px;max-width:110px;text-align:left;padding-right:6px}
/* Toute la carte Périmètre (Client/Nom de l'ensemble + Type d'étude/Ensemble routier + Jours/km)
   est une seule grille sur 3 lignes, pour que les colonnes restent alignées d'une ligne à l'autre
   (168-220px, comme n'importe quel autre .champs) — Client se termine exactement là où se terminent
   Ensemble routier et Nombre de kilomètres (grid-column:1 / -2, jusqu'à l'avant-dernière colonne).
   Chaque champ n'impose que sa ligne (grid-row inline) — sa colonne est laissée à l'auto-placement,
   qui les remplit dans l'ordre du HTML au sein de leur ligne : quand "Jours étudiés" est masqué
   (type ≠ Période), "Nombre de kilomètres" prend naturellement la 2e colonne et s'aligne avec
   "Ensemble routier". Le nombre de colonnes de champs varie selon que "Jours étudiés" est visible
   (2 ou 3) : la classe .avec-jours-etude (posée par modes() en JS) bascule entre les deux gabarits.
   Nom de l'ensemble et Annotation (#champAnnotation) sont tous deux calés sur la toute dernière
   colonne via les index négatifs (-2/-1), donc alignés verticalement l'un sous l'autre, quel que
   soit le gabarit actif — jamais de colonne vide entre les champs et cette dernière colonne. */
.perimetre-grille{grid-template-columns:repeat(2,minmax(168px,220px)) 1fr}
.perimetre-grille.avec-jours-etude{grid-template-columns:repeat(3,minmax(168px,220px)) 1fr}
#champAnnotation{grid-column:-2 / -1;grid-row:2 / span 2}
#champAnnotation textarea{height:100%;min-height:100%}
.saisie input:focus{outline:none}
.saisie input::placeholder{font-weight:300;color:var(--encre-3);opacity:1}
.saisie .unite{padding:0 12px;font-size:13px;font-weight:600;color:var(--encre-3);white-space:nowrap;margin-left:auto}
.saisie textarea{
  width:100%;min-width:0;border:0;background:transparent;padding:9px 12px;resize:none;overflow:hidden;
  font-family:inherit;font-size:14.5px;font-weight:500;color:var(--encre);line-height:1.4;
}
.saisie textarea:focus{outline:none}
select.saisie-select{
  width:100%;padding:9px 12px;border:1.5px solid var(--trait);border-radius:var(--r-champ);
  background:var(--champ);font-family:inherit;font-size:15px;font-weight:600;color:var(--encre);cursor:pointer;
}
select.saisie-select:focus{outline:none;border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(2,132,199,.14)}

.segments{display:inline-flex;background:var(--champ);border:1.5px solid var(--trait);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.segments button{
  border:0;background:transparent;border-radius:999px;padding:6px 13px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--encre-2);
}
.segments button:hover{color:var(--encre)}
.segments button.actif{background:#fff;color:var(--encre);box-shadow:0 1px 3px rgba(17,28,43,.14)}
.segments button:focus-visible{outline:2px solid var(--sky-600);outline-offset:1px}
.ligne-unite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ligne-unite .lab{font-size:12.5px;font-weight:600;color:var(--encre-2)}

.calcul{
  margin:13px 0 0;padding:9px 12px;border-radius:11px;background:var(--champ);
  font-size:13px;color:var(--encre-2);line-height:1.5;
}
.calcul b{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}

.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.piste{width:38px;height:22px;border-radius:999px;background:#CBD5E1;position:relative;transition:background .15s;flex:none}
.piste::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .piste{background:var(--ca)}
.switch input:checked + .piste::after{transform:translateX(16px)}
.switch input:focus-visible + .piste{outline:2px solid var(--sky-600);outline-offset:2px}
.switch input:disabled + .piste{opacity:.5;cursor:not-allowed}
.switch:has(input:disabled){cursor:not-allowed}
.switch .txt{font-size:13px;font-weight:600;color:var(--encre-2)}

/* ============ PÉRIMÈTRE ============ */
.perimetre{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:16px;margin-bottom:24px}
.recap-jetons{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px;padding-top:14px;border-top:1px dashed var(--trait)}
.jeton{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:7px;background:var(--sky-100);border-radius:var(--r-champ);padding:5px 14px}
.jeton .k{font-size:11.5px;font-weight:600;color:var(--sky-700);text-transform:uppercase;letter-spacing:.04em}
.jeton .v{font-size:11.5px;font-weight:700;color:var(--sky-900);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ============ RÉSULTAT ============ */
.resultat{background:var(--carte);border:1px solid var(--trait);color:var(--encre);border-radius:var(--r-carte);overflow:hidden}
.resultat.pos{background:#EAF7EF;border-color:#BFE6CE}
.resultat.neg{background:#FDECEC;border-color:#F5C6C6}
.resultat-tete{padding:18px 20px 16px}
.resultat-tete > .lab{font-size:12px;font-weight:600;color:var(--encre-3);text-transform:uppercase;letter-spacing:.07em}
.resultat.pos .resultat-tete > .lab{color:#15803D}
.resultat.neg .resultat-tete > .lab{color:#B91C1C}
.chiffre{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.chiffre.pos{color:#15803D}.chiffre.neg{color:#B91C1C}
.sous{display:flex;gap:12px;margin-top:14px}
.sous > div{flex:1;background:var(--champ);border-radius:13px;padding:9px 12px}
.resultat.pos .sous > div{background:#fff}
.resultat.neg .sous > div{background:#fff}
.sous .lab{font-size:11px;letter-spacing:.05em;color:var(--encre-3);font-weight:600;text-transform:uppercase}
.resultat.pos .sous .lab{color:#15803D}
.resultat.neg .sous .lab{color:#B91C1C}
.sous .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px;color:var(--encre)}
.resultat.pos .sous .v{color:#15803D}
.resultat.neg .sous .v{color:#B91C1C}
.lignes{padding:2px 20px 14px}
.lignes .l{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14.5px;color:var(--encre-2)}
.lignes .l b{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.lignes .l.sep{border-top:1px solid var(--trait);margin-top:7px;padding-top:11px}
.bande{padding:0 20px 20px}
.bande .t{font-size:11.5px;font-weight:600;color:var(--encre-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.barre{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--trait-2)}
.barre i{display:block;transition:width .25s ease}
.legende{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;margin-top:12px}
.legende div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--encre-2);min-width:0}
.legende .pt{width:9px;height:9px;border-radius:3px;flex:none}
.legende .pc{margin-left:auto;font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}

.revient{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:8px 16px}
.paire{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--trait-2)}
.paire:last-child{border:0}
.paire b{font-weight:700;font-variant-numeric:tabular-nums}
.seuil{background:#FFF7ED;border:1px solid #FCD9A8;border-radius:var(--r-carte);padding:14px 16px}
.seuil .t{font-size:12px;font-weight:700;color:#B45309;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.seuil .paire{border-bottom-color:#FBE4C4}

/* ============ CALCULATRICE + PRODUIT EN CROIX (module Étude, optionnels) ============ */
/* Groupe de niveau page (pas dans #vueEtude/#vueReleve) : reste disponible quel que soit l'onglet
   actif. Toujours en position fixe pour flotter au même endroit, collé au bord droit de l'écran ;
   sur très grand écran, la colonne de droite ne va pas jusqu'au bord, donc il se recale plus loin
   dans la marge libre au lieu de rester collé au bord du viewport. Deux cartes distinctes empilées
   à l'intérieur (calculette, produit en croix), chacune avec son propre état actif/inactif — voir
   plus bas. */
.calculette-groupe{
  position:fixed;right:16px;width:260px;z-index:40;
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:1900px){
  .calculette-groupe{
    left:calc(50% + 672px);right:auto;
  }
}
.calculette-carte,.croix-carte{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);
  padding:14px;box-shadow:0 6px 18px rgba(17,28,43,.06);
  transition:box-shadow .15s;
}
.calculette-carte:focus,.croix-carte:focus{outline:none}
/* Les couleurs des touches ne changent plus jamais : seule l'opacité indique si UNE carte est
   active (survol/focus dessus) — plus simple et plus lisible qu'un jeu de couleurs. Chaque carte a
   désormais son propre état, indépendant de l'autre (survoler la calculette n'allume plus le
   produit en croix, et inversement). L'écran de la calculette reste toujours pleinement visible ; le
   champ du produit en croix qui vient d'être calculé aussi — voir plus bas. */
.calculette-carte > *:not(.calculette-ecran),
.croix-carte > *:not(.croix-grille),
.croix-carte .croix-grille > *:not([data-auto="1"]){opacity:.5;transition:opacity .15s}
.calculette-carte:focus-within,
.croix-carte:focus-within{box-shadow:0 12px 32px rgba(17,28,43,.18)}
.calculette-carte:focus-within > *:not(.calculette-ecran){opacity:1}
.croix-carte:focus-within > *,
.croix-carte:focus-within .croix-grille > *{opacity:1}
#btnCalculette.actif-icone{background:var(--sky-100);border-color:var(--sky-300);color:var(--sky-700)}
.calculette-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calculette-tete span{font-size:13px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em}
.calculette-tete-actions{display:flex;align-items:center;gap:2px}
.calculette-icone{
  border:0;background:transparent;color:var(--encre-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:5px;border-radius:8px;transition:background .12s,color .12s;
}
.calculette-icone:hover,.calculette-icone.actif{background:var(--champ);color:var(--encre)}
.calculette-fermer{
  border:0;background:transparent;color:var(--encre-3);font-size:19px;line-height:1;cursor:pointer;
  padding:2px 6px;border-radius:8px;transition:background .12s,color .12s;
}
.calculette-fermer:hover{background:var(--champ);color:var(--encre)}
.calculette-ecran{
  background:#E0F2FE;color:var(--sky-700);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  display:flex;flex-direction:column;gap:2px;overflow-x:auto;
}
.calculette-ecran-historique{
  height:18px;line-height:18px;text-align:right;font-size:13px;font-weight:600;color:var(--sky-700);opacity:.65;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
}
.calculette-ecran-valeur{
  text-align:right;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.calculette-panneau-historique{
  display:flex;flex-direction:column;gap:8px;height:274px;
}
.calc-hist-liste{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
}
.calc-hist-item{
  border:0;background:transparent;border-radius:9px;padding:7px 8px;cursor:pointer;text-align:right;
  display:flex;flex-direction:column;gap:1px;font-family:inherit;transition:background .1s;
}
.calc-hist-item:hover{background:var(--sky-50)}
.calc-hist-item-expr{font-size:12.5px;font-weight:600;color:var(--encre-3);font-variant-numeric:tabular-nums}
.calc-hist-item-res{font-size:16px;font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.calc-hist-liste:empty::after{
  content:'Aucun calcul pour le moment.';display:block;text-align:center;color:var(--encre-3);
  font-size:13px;padding:24px 8px;
}
.calc-hist-vider{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--trait);background:#fff;color:var(--encre-2);border-radius:11px;
  padding:9px 0;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .1s;
}
.calc-hist-vider:hover{background:var(--champ)}
.calculette-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calculette-grille button{
  border:1px solid var(--trait);background:#fff;color:var(--encre);
  font-family:inherit;font-size:17px;font-weight:700;border-radius:11px;padding:13px 0;cursor:pointer;
  transition:background .1s,border-color .1s;
}
.calculette-grille button:hover{background:var(--trait-2)}
.calculette-grille button:active{background:var(--trait)}
.calculette-grille .calc-zero,.calculette-grille .calc-c{grid-column:span 2}
.calculette-grille .calc-fonction{background:#fff;color:var(--encre-2)}
.calculette-grille .calc-op{background:var(--sky-600);color:#fff;border-color:transparent}
.calculette-grille .calc-op:hover{background:var(--sky-700)}
.calculette-grille .calc-egal{background:#E0F2FE;color:var(--sky-700);border-color:transparent}
.calculette-grille .calc-egal:hover{background:var(--sky-200)}

.croix-titre{font-size:13px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.croix-grille{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;row-gap:6px;column-gap:8px}
.croix-grille input{
  width:100%;border:1px solid var(--trait);border-radius:9px;padding:9px 6px;font-family:inherit;
  font-size:15px;font-weight:700;text-align:center;color:var(--encre);background:#fff;
}
.croix-grille input::placeholder{color:var(--encre-3);font-weight:600}
.croix-grille input:focus{outline:none;border-color:var(--sky-400)}
.croix-grille input[data-auto="1"]{background:#E0F2FE;color:var(--sky-700);border-color:transparent}
.croix-signe{font-size:15px;font-weight:700;color:var(--encre-3);text-align:center}
.croix-egal{grid-column:1 / -1;text-align:center;font-size:14px;font-weight:700;color:var(--encre-3)}

footer{max-width:1340px;margin:0 auto;padding:14px 22px 44px;color:var(--encre-2);font-size:13px;line-height:1.55}

@media (max-width:960px){
  .colonnes{grid-template-columns:1fr}
  aside{position:static}
  main{padding:18px 15px 8px}
  .bandeau-in{gap:12px}
  .pill{min-width:88px;padding:5px 11px}
  .pill .v{font-size:16px}
  .chiffre{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ============ FEUILLE D'EXPORT (impression / PDF) ============ */
#feuilleExport{display:none}
@media print{
  @page{size:A4;margin:14mm}
  header,main,footer,.accent-haut,#calculetteGroupe,.modale{display:none !important}
  #feuilleExport{display:block !important}
  body{background:#fff;color:#111C2B;font-size:11px}
}
.exp-entete{border-bottom:2px solid #111C2B;padding-bottom:14px;margin-bottom:18px}
.exp-entete-titre{display:flex;align-items:center}
.exp-entete h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.exp-entete p{margin:3px 0 0;font-size:11px;color:#5B6B7F}

.exp-meta{
  background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;
  padding:16px 20px;margin-bottom:18px;
}
.exp-meta-lead{display:flex;flex-wrap:wrap;gap:28px;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid #E2E8F0}
.exp-meta-grid{display:flex;flex-wrap:wrap;gap:22px 30px}
.exp-meta-item{min-width:0}
.exp-meta-k{display:block;font-size:9.5px;font-weight:600;color:#64748B;letter-spacing:.02em;margin-bottom:3px}
.exp-meta-v{display:block;font-size:13px;font-weight:700;color:#111C2B;font-variant-numeric:tabular-nums}
.exp-meta-lead .exp-meta-v{font-size:20px}
.exp-meta-annotation .exp-meta-v{font-size:13.5px;font-weight:600;white-space:pre-wrap}

.exp-section{margin-bottom:10px}
.exp-section h2{margin:0 0 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5B6B7F;border-bottom:1px solid #DDE4EB;padding-bottom:4px}
.exp-poste{padding:5px 0;border-bottom:1px dotted #EDF1F5}
.exp-poste-tete{display:flex;align-items:center;gap:8px}
.exp-poste-pt{width:9px;height:9px;border-radius:3px;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.exp-poste-nom{flex:1;font-size:12px;font-weight:600;color:#111C2B}
.exp-poste-montant{
  font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;font-variant-numeric:tabular-nums;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.exp-poste-detail{margin-top:2px;margin-left:17px;font-size:10px;color:#5B6B7F}
.exp-poste-detail b{font-weight:700;color:#3A4657}
.exp-poste.exp-ca{border-top:1.5px solid #B9C6D4;margin-top:6px;padding-top:8px}
.exp-poste.exp-ca .exp-poste-nom{font-size:13px;font-weight:800}
.exp-poste.exp-ca .exp-poste-montant{background:transparent;color:#111C2B;font-size:14px;font-weight:800;padding:0}
.exp-poste.exp-total{border-bottom:0;border-top:1.5px solid #111C2B;margin-top:2px;padding-top:6px}
.exp-poste.exp-total .exp-poste-nom{font-size:13px;font-weight:800}
.exp-poste.exp-total .exp-poste-montant{background:transparent;color:#111C2B;font-size:14px;font-weight:800;padding:0}

.exp-resultat{
  background:#fff;color:#111C2B;border:1px solid #DDE4EB;border-radius:12px;padding:20px 24px 22px;margin-top:2px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  break-inside:avoid;page-break-inside:avoid;
}
.exp-resultat.pos{background:#EAF7EF;border-color:#BFE6CE}
.exp-resultat.neg{background:#FDECEC;border-color:#F5C6C6}
.exp-resultat .lab{font-size:10.5px;font-weight:600;color:#5B6B7F;text-transform:uppercase;letter-spacing:.06em}
.exp-resultat.pos .lab{color:#15803D}
.exp-resultat.neg .lab{color:#B91C1C}
.exp-resultat .chiffre{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.exp-resultat .chiffre.pos{color:#15803D}
.exp-resultat .chiffre.neg{color:#B91C1C}

.exp-sous{display:flex;gap:12px;margin-top:14px}
.exp-sous > div{flex:1;background:#F6F8FA;border-radius:12px;padding:10px 13px}
.exp-resultat.pos .exp-sous > div{background:#fff}
.exp-resultat.neg .exp-sous > div{background:#fff}
.exp-sous .v{font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;color:#111C2B}
.exp-resultat.pos .exp-sous .v{color:#15803D}
.exp-resultat.neg .exp-sous .v{color:#B91C1C}
.exp-resultat.neg .exp-sous .lab{color:#B91C1C}

.exp-lignes{margin-top:16px;padding-top:14px;border-top:1px solid #DDE4EB}
.exp-lignes .l{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#5B6B7F;padding:4px 0}
.exp-lignes .l b{color:#111C2B;font-weight:700;font-variant-numeric:tabular-nums}
.exp-lignes .l.sep{border-top:1px solid #DDE4EB;margin-top:6px;padding-top:9px;font-weight:700}
.exp-lignes-detail{font-size:10px;color:#8A99AA;margin:-2px 0 3px}

.exp-bande{margin-top:18px}
.exp-bande .t{font-size:10.5px;font-weight:600;color:#5B6B7F;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.exp-barre{display:flex;height:11px;border-radius:999px;overflow:hidden;background:#EDF1F5}
.exp-barre i{display:block}
.exp-legende{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;margin-top:11px}
.exp-legende div{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#5B6B7F;min-width:0}
.exp-legende .pt{width:8px;height:8px;border-radius:2px;flex:none}
.exp-legende .pc{margin-left:auto;font-weight:700;color:#111C2B;font-variant-numeric:tabular-nums}

.exp-revient{display:flex;gap:12px;margin-top:18px}
.exp-revient > div{flex:1;background:var(--champ);border:1px solid var(--trait);border-radius:12px;padding:11px 14px;text-align:center}
.exp-revient .lab{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5B6B7F;margin-bottom:4px}
.exp-revient b{font-size:15px;font-weight:800;color:#111C2B;font-variant-numeric:tabular-nums}

.exp-footer{margin-top:16px;padding-top:9px;border-top:1px solid #DDE4EB;font-size:9.5px;color:#8A99AA}

.exp-page + .exp-page{break-before:page;page-break-before:always}
.exp-page-titre{font-size:13px;font-weight:800;color:#111C2B;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #111C2B}
.exp-releve-tableau{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:16px}
.exp-releve-tableau th{
  text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#5B6B7F;padding:0 8px 6px;border-bottom:1.5px solid #DDE4EB;
}
.exp-releve-tableau td{padding:5px 8px;border-bottom:1px dotted #EDF1F5;font-variant-numeric:tabular-nums}
.exp-releve-tableau tbody tr:nth-child(even){background:#F9FAFB;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.exp-releve-tableau tfoot td{border-top:1.5px solid #111C2B;border-bottom:0;font-weight:800;padding-top:8px}

/* ============ ONGLETS ============ */
/* Navigation principale de l'app — volontairement la zone la plus voyante de l'interface :
   c'est ici qu'on choisit entre étude / relevé / équipe, le reste (boutons d'action) reste sobre. */
.onglets{background:#fff;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:10px 0}
.onglets-in{max-width:1340px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ⚠️ RANGÉE PLEINE, ET EN flex-wrap:wrap — NE RIEN Y AJOUTER QUI APPARAISSE ET DISPARAISSE.
   Les 6 onglets d'audit.html + les 4 boutons d'outils remplissent déjà la largeur utile (1340 px moins
   les gouttières). Tout élément TRANSITOIRE posé dans cette rangée y ajoute sa largeur en apparaissant,
   pousse le groupe de boutons à la ligne suivante, grandit le bandeau — et décale donc TOUT le contenu
   de la page en dessous, avant de le ramener en disparaissant.
   Vécu avec le badge de statut de sauvegarde, retiré le 2026-09-12 : il s'affichait 0,6 s après la
   dernière modification et se cachait 2 s plus tard, donc systématiquement à contretemps du geste en
   cours (« quand je clique sur les étapes assez rapidement, ça me bouge la box, je sais pas comment ni
   rien »). Un futur indicateur de ce genre doit être sorti du flux (position:absolute) ou posé ailleurs
   que dans cette rangée. */
.onglets-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto}

/* ============ INFOBULLE DE SURVOL (2026-09-11) ============
   Première du projet : jusqu'ici les boutons-icônes du bandeau n'avaient que l'attribut `title`
   natif — environ une seconde de délai, style imposé par le système, et rien au clavier. Pour une
   icône qui ne se devine pas, l'étiquette doit arriver vite.
   Générique (`.bulle-survol` + `data-bulle`) pour pouvoir couvrir Enregistrer / Charger / Nouveau
   si ça convainc. NE JAMAIS CUMULER avec un `title` sur le même élément : les deux s'afficheraient
   l'un sur l'autre. Un bouton icône seule garde donc un `aria-label` pour les lecteurs d'écran.
   La bulle s'ouvre VERS LE BAS parce que le bandeau est collant en haut de page ; pour un bouton
   collé au bord droit il faudrait ancrer à droite plutôt que centrer, ce cas n'existe pas encore. */
.bulle-survol{position:relative}
.bulle-survol::after{
  content:attr(data-bulle);
  position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--encre);color:#fff;
  font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;
  padding:6px 10px;border-radius:8px;
  box-shadow:0 4px 12px rgba(17,28,43,.18);
  opacity:0;pointer-events:none;z-index:80;
  transition:opacity .12s ease .3s;
}
.bulle-survol:hover::after,.bulle-survol:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){.bulle-survol::after{transition:none}}
.onglet{
  border:1.5px solid transparent;background:transparent;padding:13px 26px;cursor:pointer;font-family:inherit;
  font-size:15.5px;font-weight:700;color:var(--encre-2);border-radius:12px;
  transition:background .15s,color .15s,border-color .15s;
}
.onglet:hover{color:var(--encre);background:var(--champ);border-color:var(--trait)}
.onglet.actif{
  color:#10347F;background:#E0F2FE;border-color:var(--sky-200);
}

/* ============ RELEVÉ JOURNALIER ============ */
.releve-mise{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
@media (max-width:820px){ .releve-mise{grid-template-columns:1fr} }

.releve-colonne-gauche{display:flex;flex-direction:column;gap:20px}
.releve-calendrier{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:16px}
.cal-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav{border:1px solid var(--trait);background:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--encre-2)}
.cal-nav:hover{color:var(--encre);border-color:#B9C6D4}
#calLabel{
  border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--encre);
  cursor:pointer;padding:4px 10px;border-radius:8px;
}
#calLabel:hover{background:var(--champ)}
.cal-mois-popup{
  position:absolute;z-index:20;top:52px;left:16px;right:16px;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-champ);box-shadow:0 10px 30px rgba(17,28,43,.14);padding:12px;
}
.cal-mois-popup-annee{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-mois-popup-annee span{font-size:13.5px;font-weight:700;color:var(--encre)}
.cal-mois-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cal-mois-btn{
  border:1.5px solid var(--trait);background:var(--champ);border-radius:8px;padding:8px 0;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--encre-2);transition:border-color .12s;
}
.cal-mois-btn:hover{border-color:#B9C6D4;color:var(--encre)}
.cal-mois-btn.cal-mois-actif{background:var(--sky-100);border-color:var(--sky-300);color:var(--sky-700);font-weight:800}
.cal-jours{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-jours span{text-align:center;font-size:10.5px;font-weight:700;color:var(--encre-3);text-transform:uppercase}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-vide-case{visibility:hidden}
.cal-jour{
  aspect-ratio:1;border:1.5px solid var(--trait);background:var(--champ);border-radius:8px;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--encre-2);
  display:grid;place-items:center;transition:border-color .12s;padding:0;
}
.cal-jour:hover{border-color:#B9C6D4;color:var(--encre)}
.cal-jour.cal-plein{background:#EAF7EF;border-color:#BFE6CE;color:#15803D;font-weight:800}
.cal-legende{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:var(--encre-2)}
.cal-legende span{display:flex;align-items:center;gap:5px}
.cal-pt{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.cal-pt-plein{background:#4ADE80}
.cal-pt-vide{background:var(--trait)}
/* Variante "popup flottant" du même calendrier (voir .cal-jour et dérivés ci-dessus, repris tels quels) —
   pour un champ de date compact (ex. Du/Au du point d'avancement) plutôt que le calendrier permanent du
   relevé journalier : s'ouvre sous le champ au clic, se ferme au choix d'un jour ou au clic extérieur. */
.cal-popup-flottant{
  position:absolute;z-index:30;top:100%;left:0;margin-top:6px;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-champ);box-shadow:0 10px 30px rgba(17,28,43,.14);
  padding:14px;width:270px;
}
.cal-popup-flottant .cal-legende{margin-top:10px;font-size:10.5px}

.releve-tableau-wrap{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:16px;overflow-x:auto}
.releve-tableau{width:100%;border-collapse:collapse;font-size:14px;min-width:820px;table-layout:fixed}
.releve-tableau th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-2);padding:0 8px 8px}
.releve-tableau th:first-child, .releve-tableau td:first-child{padding-left:0}
.releve-tableau thead tr{border-bottom:1.5px solid var(--trait)}
.releve-tableau td{padding:5px 6px;border-bottom:1px solid var(--trait-2)}
.releve-tableau td input{
  width:100%;height:38px;box-sizing:border-box;border:1.5px solid var(--trait);background:var(--champ);
  padding:0 9px;border-radius:9px;transition:border-color .12s,box-shadow .12s;
  font-family:inherit;font-size:14.5px;line-height:1;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums;
}
.releve-tableau td input::placeholder{color:var(--encre-3);font-weight:400}
.releve-tableau td input:hover{border-color:#B9C6D4}
.releve-tableau td input:focus{outline:none;background:#fff;border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(2,132,199,.14)}
.releve-tableau td input.rel-date{font-weight:600;font-size:13px}
.releve-tableau td input.rel-date.vide{color:var(--encre-3);font-weight:400}
.releve-tableau td input.rel-debut, .releve-tableau td input.rel-fin{
  font-weight:500;font-size:12.5px;min-width:70px;text-align:center;
  border-style:dashed;border-color:var(--trait-2);background:transparent;color:var(--encre-3);
}
.releve-tableau td input.rel-debut::placeholder, .releve-tableau td input.rel-fin::placeholder{color:#C7CFD8}
.releve-tableau td input.rel-debut:hover, .releve-tableau td input.rel-fin:hover{border-color:#B9C6D4}
.releve-tableau td input.rel-debut:focus, .releve-tableau td input.rel-fin:focus{
  outline:none;background:transparent;border-style:dashed;border-color:var(--sky-600);box-shadow:none;
}
.releve-tableau td input.rel-debut:disabled, .releve-tableau td input.rel-fin:disabled{
  border-style:dashed;background:transparent;color:var(--encre-3);border-color:var(--trait-2);cursor:not-allowed;
}
.releve-tableau tfoot td{padding-top:8px;border-bottom:0}
.rel-aide{
  /* display:table-cell (par défaut sur un td) volontairement pas touché : un flex/grid ici casserait
     le colspan="8" et la cellule ne s'étendrait plus sur toute la largeur du tableau. */
  padding:10px 12px;border:1.5px dashed var(--trait-2);border-radius:9px;
  font-size:13.5px;color:var(--encre-3);text-align:left;line-height:1.4;
}
.releve-tableau td input:disabled{background:var(--trait-2);color:var(--encre-3);cursor:not-allowed;border-color:var(--trait-2)}
.rel-suppr{
  border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:15px;
  width:26px;height:26px;border-radius:8px;line-height:1;
}
.rel-suppr:hover{background:#FDECEC;color:#B91C1C}

.rel-total-ligne{background:var(--champ)}
.rel-total-ligne td{
  padding:9px 6px;border-top:2px solid var(--encre);border-bottom:0;
  font-variant-numeric:tabular-nums;
}
.rel-total-ligne td:first-child{padding-left:6px}
.rel-total-chip{
  display:flex;align-items:center;justify-content:center;width:100%;height:38px;box-sizing:border-box;
  background:var(--sky-100);border:1.5px solid var(--sky-200);color:var(--sky-900);
  border-radius:9px;font-size:13.5px;font-weight:800;
}
/* Décalage approximatif de la largeur de la colonne « suppr. » (invisible, tout à droite du
   tableau) pour que le bouton tombe sous la colonne Kms plutôt qu'au bord extrême droit. */
.rel-reset{margin-right:40px}

.releve-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;min-width:820px}
/* #btnEnvoyerEtude est décalé par JS (translateX, voir alignerBoutonEnvoyer) pour que son bord droit
   tombe exactement sous la colonne Kms du tableau au-dessus. translateX est appliqué APRÈS la mise en
   page normale du flex : ça ne dépend d'aucune hypothèse sur la façon dont justify-content/position
   calcule la place disponible, contrairement aux tentatives précédentes (margin-right, position:
   absolute + right) qui n'ont pas donné un résultat fiable.
   min-width identique à .releve-tableau : sans ça, quand la fenêtre est trop étroite et que le
   tableau (largeur mini 820px) déborde en scroll horizontal dans .releve-tableau-wrap, cette barre
   ne déborde pas avec lui et reste plus étroite — le calcul JS (basé sur des rects viewport, donc
   sensibles au scroll) se retrouve alors à comparer deux éléments qui ne défilent pas ensemble,
   d'où un bouton qui retombe au mauvais endroit (bord de sa propre boîte trop étroite, pas sous la
   colonne Kms réelle). Avec la même min-width, les deux défilent ensemble et restent solidaires. */
.releve-actions #btnEnvoyerEtude{transition:none}
.releve-actions-principales{display:flex;gap:12px;flex-wrap:wrap}
.bouton-danger{color:#B91C1C;border-color:#F5C6C6;background:#FFF7F7}
.bouton-danger:hover{background:#FDECEC;border-color:#F0A9A9}

.releve-auto{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.releve-auto-label{font-size:13px;font-weight:600;color:var(--encre-2)}
.releve-auto-statut{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-weight:600;color:var(--encre-3);max-width:100%;min-width:0}
.releve-auto-statut-ligne{display:flex;align-items:center;gap:6px;min-width:0}
.releve-auto-statut-pt{width:6px;height:6px;border-radius:50%;background:var(--encre-3);flex:none}
.releve-auto-statut-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.releve-auto-statut-date{padding-left:12px;font-size:10.5px;font-weight:600;color:var(--encre-3)}
.releve-auto-statut--droite{align-items:flex-end;text-align:right}
.releve-auto-statut--droite .releve-auto-statut-date{padding-left:0;padding-right:0}
.releve-auto-statut.ok{color:#15803D}
.releve-auto-statut.ok .releve-auto-statut-pt{background:#4ADE80}
.releve-auto-statut.attente{color:#B45309}
.releve-auto-statut.attente .releve-auto-statut-pt{background:#F59E0B}
.releve-auto-statut.erreur{color:#B91C1C}
.releve-auto-statut.erreur .releve-auto-statut-pt{background:#FB7185}

/* ============ SPLASH (première page : gros logo sur fond blanc uni) ============ */
.ecran-splash{
  position:relative;min-height:100vh;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.ecran-splash[hidden]{display:none}
.splash-logo{margin-bottom:56px}
.splash-logo svg,.splash-logo img{width:min(806px,92vw);height:auto;display:block}
.lien-splash-connexion{
  position:fixed;top:28px;right:32px;
  border:0;background:transparent;padding:0;cursor:pointer;
  font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:14px;color:#1e3a8a;
  letter-spacing:1.5px;text-transform:uppercase;transition:opacity .15s;
}
.lien-splash-connexion:hover{opacity:.7}
.lien-splash-connexion:focus-visible{outline:2px solid #1e3a8a;outline-offset:4px}

/* ============ CONNEXION ============ */
.connexion-carte{position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:28px;width:100%;max-width:360px;box-shadow:0 10px 30px rgba(17,28,43,.10)}
.connexion-erreur{color:#B91C1C;font-size:13px;font-weight:600;margin:12px 0 0}
.connexion-erreur[hidden]{display:none}
.connexion-info{color:#15803D;font-size:13px;font-weight:600;margin:12px 0 0}
.connexion-info[hidden]{display:none}
.lien-discret{display:block;width:100%;border:0;background:transparent;color:var(--sky-700);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;padding:4px}
.lien-discret:hover{text-decoration:underline}
.zone-utilisateur-nom{white-space:nowrap}

/* ============ MODALE (Mes études / listes) ============ */
.modale{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px}
.modale[hidden]{display:none}
.modale-fond{position:fixed;inset:0;background:rgba(15,23,42,.45)}
.modale-carte{position:relative;background:var(--carte);border-radius:var(--r-carte);border:1px solid var(--trait);width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;padding:20px;overflow:hidden}
.modale-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.modale-tete h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
/* Regroupe plusieurs boutons à droite d'un en-tête de modale (disquette + Fermer des éditeurs) sans
   casser le justify-content:space-between qui tient le titre à gauche. */
.modale-tete-actions{flex:none;display:flex;align-items:center;gap:8px}
.modale-liste{overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-top:2px}

.modale-carte-document{max-width:900px;width:95vw;height:88vh;max-height:88vh}
.modale-document-corps{flex:1;overflow:hidden;background:var(--champ);border-radius:10px}
.modale-document-corps iframe{width:100%;height:100%;border:0}

/* ============ HISTORIQUE DES RAPPORTS — UNE LIGNE = UN DOCUMENT (2026-09-12) ============
   Remplace la liste "un geste = une ligne" (quatre rangées identiques pour un même point d'avancement
   généré, copié, imprimé puis envoyé). La ligne porte le document, son état de diffusion, la trace de
   ce qui lui est arrivé, et ses actions. Voir la section Historique dans audit.html. */
.doc-histo{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--trait-2)}
.doc-histo:first-child{border-top:0;padding-top:0}
.doc-histo-texte{flex:1;min-width:0}
.doc-histo-titre{margin:0;font-size:13.5px;font-weight:700;color:var(--encre);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-histo-trace{margin:3px 0 0;font-size:12px;color:var(--encre-2)}
.doc-histo-date{margin:2px 0 0;font-size:11.5px;color:var(--encre-3)}
.doc-histo-actions{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Pas de bouton possible = on dit pourquoi, à la place des boutons. Une ligne muette se lit comme un
   bug (2026-09-12). Largeur bornée pour que l'explication ne pousse pas le titre du document. */
.doc-histo-raison{margin:0;max-width:38ch;font-size:11.5px;line-height:1.45;color:var(--encre-3);text-align:right}
/* L'étiquette dit ce que le CLIENT a — figé et remis, ou parti par mail — pas ce que l'auditeur a fait.
   Mêmes teintes que partout ailleurs dans le module : vert = acquis, ambre = en cours de route. */
.doc-histo-etat{
  flex:none;padding:2px 8px;border-radius:999px;border:1px solid;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
}
.doc-histo-etat-emis{background:#F0FDF4;border-color:#BBF7D0;color:#15803D}
.doc-histo-etat-envoye{background:#FFFBEB;border-color:#FDE68A;color:#B45309}
@media(max-width:620px){
  .doc-histo{flex-wrap:wrap}
  .doc-histo-actions{width:100%}
}

/* Aperçu plein écran d'un document archivé. C'est le CORPS qui défile, pas la carte : sur un rapport de
   douze pages, le titre et le bouton Fermer doivent rester atteignables sans remonter. */
.modale-carte-apercu{max-width:960px;width:95vw;height:88vh;max-height:88vh}

/* ---- Éditeur de livrable en modale (2026-09-12) ----
   Le corps défile, le pied d'actions ne bouge pas : sur un rapport de neuf axes, devoir dérouler
   jusqu'en bas pour émettre serait un défaut. La carte est volontairement large — c'est un espace
   d'écriture, pas une boîte de dialogue. */
.modale-carte-editeur{max-width:1000px;width:95vw;height:90vh;max-height:90vh}
/* Place FIXE sous le titre : la mention d'enregistrement est un texte permanent, jamais un badge qui
   apparaît puis disparaît (défaut du 2026-09-12 sur la barre d'onglets, voir plus haut). */
.modale-sous-titre{margin:3px 0 0;font-size:11.5px;font-weight:600;color:var(--encre-3)}
.modale-editeur-corps{flex:1;min-height:0;overflow:auto;padding:2px 2px 16px}
.modale-editeur-pied{
  flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--trait);
}

/* ---- Carte d'état d'un livrable unique (2026-09-12) ----
   Un audit produit UN rapport d'audit et UN bilan : chacun a un emplacement, pas une liste. La carte dit
   dans lequel de ses trois états il se trouve (vide / brouillon / émis) et ne propose que les gestes
   possibles dans cet état — c'est ce qui rend impossible d'avoir deux versions concurrentes. */
.livrable-carte{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;background:var(--carte);border:1.5px solid var(--trait);border-radius:var(--r-carte);
}
.livrable-carte.est-emis{border-color:#BBF7D0;background:#F7FEF9}
.livrable-texte{flex:1;min-width:220px}
.livrable-titre{margin:0;font-size:15px;font-weight:800;color:var(--encre);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.livrable-meta{margin:4px 0 0;font-size:12.5px;color:var(--encre-2);line-height:1.5}
.livrable-actions{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.livrable-etat{
  flex:none;padding:2px 9px;border-radius:999px;border:1px solid;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
}
.livrable-etat-brouillon{background:var(--champ);border-color:var(--trait);color:var(--encre-2)}
.livrable-etat-emis{background:#F0FDF4;border-color:#BBF7D0;color:#15803D}
.doc-apercu-corps{flex:1;min-height:0;overflow:auto;background:var(--champ);border-radius:10px;padding:20px}
/* Le clone de la feuille d'export (voir historiqueVoir) : les classes .exp-* sont définies HORS de
   @media print, il ne manquait que le display:none porté par l'id, que le clone n'a pas. Fond blanc et
   ombre portée : la page telle qu'elle sortira, posée sur le gris de la modale. */
.doc-apercu-feuille{
  display:block;max-width:780px;margin:0 auto;background:#fff;padding:26px 30px;
  border-radius:6px;box-shadow:0 2px 12px rgba(17,28,43,.12);
}

/* ============ RÉFÉRENTIEL DE FIN DE JOURNÉE (2026-09-11) ============
   Une modale, PAS un 7e onglet : les six onglets racontent la chronologie d'une
   mission (saisie → audit → rapport → plan → suivi → restitution), et ce
   référentiel n'est pas une étape de plus — c'est un contrôle qu'on lance
   CONTRE cette chronologie, en fin de journée. L'ajouter à la barre aurait
   dilué ce qu'elle veut dire. Il vit donc dans la zone d'outils du bandeau,
   à côté d'Enregistrer / Charger / Nouveau. */
.modale-carte-referentiel{max-width:820px;width:95vw;height:88vh;max-height:88vh}
/* Le module est montré à des clients : le libellé du bouton comme le titre de la modale parlent
   couverture de périmètre, jamais à la première personne (« ce que j'ai pu oublier », retiré le
   2026-09-11). L'intention interne reste la même, le vocabulaire est celui du métier. */
.ref-intro{margin:-4px 0 13px;font-size:13px;line-height:1.5;color:var(--encre-2);max-width:66ch}
.ref-barre{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 13px;margin-bottom:12px;
  background:var(--champ);border-radius:10px;
}
.ref-compte{font-size:13px;font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums;flex:none}
.ref-compte span{font-weight:500;color:var(--encre-2)}
.ref-options{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.ref-option{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;color:var(--encre-2);user-select:none}
.ref-option input{width:15px;height:15px;margin:0;flex:none;cursor:pointer}

.ref-corps{overflow-y:auto;flex:1;padding-right:2px}
.ref-axe{margin-bottom:26px}
.ref-axe:last-child{margin-bottom:4px}
.ref-axe-tete{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ref-axe-pastille{width:10px;height:10px;border-radius:50%;flex:none}
.ref-axe-nom{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--encre)}
.ref-axe-compte{
  margin-left:auto;flex:none;font-size:11.5px;font-weight:600;
  color:var(--encre-3);font-variant-numeric:tabular-nums;
}
/* Axe entièrement coché : le compte passe au vert, seul signal nécessaire —
   pas de pastille supplémentaire, la grammaire du module réserve le rond à la
   gravité d'un constat (règle du 2026-09-08). */
.ref-axe-compte.complet{color:var(--ca)}

.ref-groupe{margin-bottom:10px}
.ref-groupe:last-child{margin-bottom:0}
.ref-groupe-titre{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-3);margin:0 0 6px 2px;
}
.ref-liste{
  display:flex;flex-direction:column;gap:1px;
  background:var(--trait-2);border:1px solid var(--trait);border-radius:10px;overflow:hidden;
}
/* Le socle porte le filet coloré de son axe, l'approfondissement non : la
   distinction est structurelle (ce qu'on aborde toujours vs le second rideau),
   pas décorative. */
.ref-groupe-socle .ref-liste{border-left:3px solid var(--ref-axe-couleur,var(--trait))}

.ref-sujet{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--carte);padding:10px 13px;cursor:pointer;
}
.ref-groupe-approf .ref-sujet{background:var(--champ)}
.ref-sujet:hover{background:var(--sky-50)}
.ref-sujet input{margin:2px 0 0;width:16px;height:16px;flex:none;cursor:pointer}
.ref-sujet-corps{min-width:0}
.ref-sujet-nom{display:block;font-size:14px;font-weight:600;color:var(--encre);letter-spacing:-.005em}
.ref-sujet-quoi{display:block;font-size:13px;line-height:1.45;color:var(--encre-2);margin-top:2px}
/* ON NE BARRE RIEN (règle du 2026-09-09) : un sujet coché recule d'un cran de
   contraste, la coche porte seule le « traité ». */
.ref-sujet:has(input:checked) .ref-sujet-nom,
.ref-sujet:has(input:checked) .ref-sujet-quoi{color:var(--encre-3)}
/* Ancrage réglementaire : vérifiable, donc affiché — mais en retrait, ce n'est
   pas une citation prête à recopier dans un rapport client. */
.ref-sujet-ref{
  display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;
  background:var(--trait-2);color:var(--encre-2);
  font-size:10.5px;font-weight:600;white-space:nowrap;
}
.ref-vide{padding:26px 4px;font-size:13.5px;color:var(--encre-3);text-align:center}

.liste-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--trait);border-radius:12px;background:var(--champ);flex-wrap:wrap}
.liste-item-info{flex:1;min-width:160px}
.liste-item-nom{font-weight:700;font-size:14px;color:var(--encre)}
.liste-item-meta{font-size:12px;color:var(--encre-2);margin-top:2px}
.liste-item-actions{display:flex;gap:6px;flex-wrap:wrap}
.lien-discret-danger{border:0;background:transparent;padding:0;margin-left:4px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--encre-3);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.lien-discret-danger:hover{color:#B91C1C}
.liste-vide{color:var(--encre-3);font-size:13.5px;text-align:center;padding:20px 0}

/* .liste-item a un fond --champ, qui contraste bien dans une .modale-carte (blanche) mais se fond dans
   la page (même couleur --fond) sur l'onglet Équipe, où la liste des comptes est posée directement sur
   le fond de page plutôt que dans une modale — passée en blanc pour rester visible à cet endroit précis. */
#listeUtilisateurs .liste-item{background:var(--carte)}

/* Cases "Accès aux modules" (formulaire de création + chaque compte, onglet Équipe) : chips cliquables,
   teintées en bleu ciel une fois cochées — cohérent avec .badge-bientot pour la forme en pilule. */
.modules-checklist{display:flex;flex-wrap:wrap;gap:8px}
.module-checkbox{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--encre-2);padding:5px 10px 5px 8px;border:1px solid var(--trait);border-radius:999px;background:#fff;cursor:pointer;user-select:none;transition:border-color .12s,background .12s,color .12s}
.module-checkbox input{margin:0} /* accent-color héritée de :root */
.module-checkbox:has(input:checked){border-color:var(--sky-300);background:var(--sky-50);color:var(--sky-700)}
.module-checkbox:has(input:disabled){opacity:.5;cursor:not-allowed}

/* ============ ACCUEIL / SÉLECTION DE MODULE ============ */
.accueil-main{max-width:960px;margin:0 auto;padding:67px 26px 48px;text-align:center}
.accueil-intro h2{margin:0 0 7px;font-size:29px;font-weight:800;letter-spacing:-.01em}
.accueil-intro p{margin:0 0 40px;color:var(--encre-2);font-size:17.5px}
.modules-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:22px;text-align:left}
.module-carte{
  display:flex;flex-direction:column;gap:12px;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-carte);padding:26px;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.module-carte:hover{border-color:var(--sky-300);box-shadow:0 8px 24px rgba(17,28,43,.08);transform:translateY(-2px)}
.module-carte-icone{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.module-carte-icone svg{width:28px;height:28px}
.module-carte h3{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.module-carte p{margin:0;font-size:16px;color:var(--encre-2)}
.badge-bientot{font-size:12.5px;font-weight:700;color:var(--encre-3);background:var(--champ);border:1px solid var(--trait);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}

/* ============ AUDIT — MODULE (Saisie / Audit / Résultats) ============ */
.pill.orange{background:#FFF7ED;border-color:#FCD9A8}.pill.orange .v{color:#B45309}
.pill.jaune{background:#FEFCE8;border-color:#FDE68A}.pill.jaune .v{color:#A16207}

/* Résultats — résumé chiffré en tête d'onglet (2026-09-02) */
.resultats-resume{margin:0 0 14px;font-size:13.5px;color:var(--encre-2);line-height:1.5}
/* Rappel permanent de la formule de la note de risque (demande explicite : "faut que ce soit clair à
   l'usage") — jamais masqué, contrairement aux autres petites notes explicatives déjà retirées ailleurs
   dans ce module une fois le geste assimilé : celle-ci reste nécessaire tant que la note est affichée. */
.resultats-note-legende{margin:10px 0 0;font-size:11.5px;color:var(--encre-3);line-height:1.5}

/* Risque inhérent / résiduel — bloc dédié, volontairement séparé des pills de comptage juste au-dessus
   (demande explicite, 2026-09-02) : plus visible, deux cartes teintées plutôt que deux pastilles perdues
   parmi les autres. L'inhérent est TOUJOURS rouge (classe posée en JS depuis INFO_RISQUE_INHERENT, fixe) ;
   le résiduel prend vert/orange/rouge selon auditNiveauRisqueInfo — mêmes classes de couleur que .pill. */
.resultats-risques{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media (max-width:600px){ .resultats-risques{grid-template-columns:1fr} }
.resultats-risque-carte{border-radius:14px;padding:13px 16px;border:1px solid transparent}
.resultats-risque-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.resultats-risque-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.resultats-risque-valeur{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.resultats-risque-note{margin:4px 0 0;font-size:11.5px;color:var(--encre-3);line-height:1.4}
.resultats-risque-carte.vert{background:#EAF7EF;border-color:#BFE6CE}
.resultats-risque-carte.vert .resultats-risque-label,.resultats-risque-carte.vert .resultats-risque-valeur{color:#15803D}
/* Points de risque dont le travail est fini mais l'efficacité pas encore vérifiée : glissés entre le chiffre
   et sa note, en ambre (même code que "réalisé, en attente de vérification" dans le cockpit de Suivi). */
.resultats-risque-attente{
  margin:2px 0 0;font-size:12.5px;font-weight:600;color:#B45309;cursor:help;
}
.resultats-risque-carte.orange{background:#FFF7ED;border-color:#FCD9A8}
.resultats-risque-carte.orange .resultats-risque-label,.resultats-risque-carte.orange .resultats-risque-valeur{color:#B45309}
.resultats-risque-carte.rouge{background:#FDECEC;border-color:#F5C6C6}
.resultats-risque-carte.rouge .resultats-risque-label,.resultats-risque-carte.rouge .resultats-risque-valeur{color:#B91C1C}

/* Résultats — bloc "Avancement du plan d'actions" (refonte du 2026-09-08, remplace .resultats-meter et
   .resultats-aging). La PISTE de la barre n'est pas redéfinie ici : elle réutilise .suivi-progression-piste
   / -solde / -fait du cockpit de l'onglet Suivi. C'est le même objet avec la même sémantique (vert = soldé,
   ambre = réalisé en attente de vérification) — deux barres qui se ressemblent sans dire exactement la même
   chose seraient pires qu'une seule. */
.resultats-avancement{margin-top:16px}
.resultats-avancement-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--encre-2);margin-bottom:6px}
.resultats-avancement-tete span:last-child{font-variant-numeric:tabular-nums;color:var(--encre-3)}

/* Bandeaux de chips (Répartition / Pilotage / Ancienneté) — une rangée par lecture, jamais une grille de
   tuiles : ce sont des compléments au chiffre principal, pas des KPI concurrents du risque résiduel. */
.resultats-strip{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--encre-3)}
.resultats-strip-label{font-weight:700;color:var(--encre-2)}
.resultats-chip{padding:3px 9px;border-radius:999px;background:var(--champ);border:1px solid var(--trait);font-variant-numeric:tabular-nums}
.resultats-chip b{font-weight:800;color:var(--encre-2)}
.resultats-chip[title]{cursor:help}
/* Mêmes codes couleur que partout ailleurs dans le module : ambre = réalisé mais pas vérifié,
   vert = vérifié efficace, rouge = ce qui a dérapé. */
.resultats-chip.bleu{background:var(--sky-50);border-color:var(--sky-200);color:var(--sky-800)}
.resultats-chip.bleu b{color:var(--sky-800)}
.resultats-chip.ambre{background:#FFF7ED;border-color:#FCD9A8;color:#B45309}
.resultats-chip.ambre b{color:#B45309}
.resultats-chip.vert{background:#EAF7EF;border-color:#BFE6CE;color:#15803D}
.resultats-chip.vert b{color:#15803D}
.resultats-chip.alerte{background:#FDECEC;border-color:#F5C6C6;color:#B91C1C}
.resultats-chip.alerte b{color:#B91C1C}

/* Résultats — "Par pilote" (2026-09-08) : même grammaire de ligne que .resultats-axe-ligne (nom à gauche,
   compte à droite), sans le clic — un pilote n'est pas une destination de navigation. */
.resultats-pilote-ligne{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px}
.resultats-pilote-ligne+.resultats-pilote-ligne{border-top:1px solid var(--trait)}
.resultats-pilote-nom{font-size:13.5px;font-weight:700;color:var(--encre);min-width:150px;flex:0 1 auto}
.resultats-pilote-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;font-size:12px;color:var(--encre-3)}
.resultats-pilote-total{font-size:13px;font-weight:800;color:var(--encre-2);font-variant-numeric:tabular-nums;min-width:24px;text-align:right}
.resultats-pilote-note{margin:10px 0 2px;font-size:12px;color:var(--encre-3);line-height:1.5}
@media (max-width:600px){
  .resultats-pilote-ligne{flex-wrap:wrap}
  .resultats-pilote-nom{min-width:0;flex:1 1 100%}
}

/* Résultats — barres empilées par axe (gravité) */
.resultats-axe-ligne{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;cursor:pointer}
.resultats-axe-ligne:hover{background:var(--sky-50)}
.resultats-axe-ligne+.resultats-axe-ligne{border-top:1px solid var(--trait)}
.resultats-axe-icone{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.resultats-axe-icone svg{width:15px;height:15px}
.resultats-axe-nom{flex:0 0 210px;font-size:13.5px;font-weight:700;color:var(--encre);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resultats-axe-barre{flex:1;display:flex;gap:2px;height:18px;border-radius:5px;overflow:hidden}
.resultats-axe-seg{height:100%;position:relative;transition:filter .1s}
.resultats-axe-seg:hover{filter:brightness(.88)}
/* Petit repère fixe (pas besoin de survoler) sur un segment dont toutes les actions liées sont faites. */
.resultats-axe-seg-traite::after{
  content:'';position:absolute;right:5px;top:50%;width:14px;height:14px;transform:translateY(-50%);
  background-color:var(--check-couleur);
  -webkit-mask:var(--check-icone) center/contain no-repeat;
  mask:var(--check-icone) center/contain no-repeat;
}
.resultats-axe-total{flex:none;width:26px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--encre-2)}
.resultats-axe-note{flex:1;font-size:12.5px;color:var(--encre-3);font-style:italic}
.resultats-axe-suivi{flex:none;min-width:34px;text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:999px}
.resultats-axe-suivi.complete{background:#EAF7EF;color:#15803D}
.resultats-axe-suivi.partielle{background:var(--sky-100);color:var(--sky-700)}
.resultats-axe-suivi.aucune{background:var(--champ);color:var(--encre-3)}
/* Score de risque pondéré par axe (2026-09-02, voir auditScoreRisqueInfo) — mêmes teintes que .pill */
.resultats-axe-score{flex:none;min-width:26px;text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:999px}
.resultats-axe-score.vert{background:#EAF7EF;color:#15803D}
.resultats-axe-score.jaune{background:#FEFCE8;color:#A16207}
.resultats-axe-score.orange{background:#FFF7ED;color:#B45309}
.resultats-axe-score.rouge{background:#FDECEC;color:#B91C1C}
@media (max-width:600px){
  .resultats-axe-nom{flex-basis:120px;font-size:12.5px}
}

.badge-gravite{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent;
}
.badge-gravite.critique{background:#FDECEC;border-color:#F5C6C6;color:#B91C1C}
.badge-gravite.majeur{background:#FFF7ED;border-color:#FCD9A8;color:#B45309}
.badge-gravite.mineur{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8}
.badge-gravite.positif{background:#EAF7EF;border-color:#BFE6CE;color:#15803D}

/* Sidebar fixe des axes (onglet Audit) — même grille sidebar+contenu que .releve-mise, mais colonne
   plus large (320px au lieu de 280px) : les libellés d'axes sont plus longs qu'un calendrier et le
   contenu doit rester grand/lisible plutôt que compact — demande explicite du 2026-08-29. */
.audit-mise{grid-template-columns:320px 1fr}
.audit-axes-colonne{position:sticky;top:140px}
.audit-axes{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);padding:10px;display:flex;flex-direction:column;gap:4px}
.audit-axe-btn{
  display:flex;align-items:center;gap:13px;border:0;background:transparent;border-radius:13px;
  padding:14px 14px;cursor:pointer;font-family:inherit;text-align:left;width:100%;
  transition:background .12s,color .12s;
}
.audit-axe-btn:hover{background:var(--sky-50)}
.audit-axe-btn.actif{background:var(--sky-100);color:#10347F}
.audit-axe-icone{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;
}
.audit-axe-icone svg{width:18px;height:18px}
.audit-axe-btn-libelle{flex:1;font-size:15px;font-weight:700;color:inherit;min-width:0;line-height:1.3}
.audit-axe-compte{display:flex;align-items:center;gap:7px;flex:none}
.audit-axe-pt{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--encre-3)}
.audit-axe-pt::before{content:'';width:8px;height:8px;border-radius:50%;flex:none}
.audit-axe-pt.information::before{background:#94A3B8;border-radius:3px}
.audit-axe-pt.critique::before{background:#EF4444}
.audit-axe-pt.majeur::before{background:#F59E0B}
.audit-axe-pt.mineur::before{background:#3B82F6}
.audit-axe-pt.positif::before{background:#4ADE80}

/* Zone de dépôt Sortable (une par axe, voir auditRenderSidebar()) : le "fantôme" que Sortable insère
   pendant le survol a la taille de la carte d'origine (bien trop large pour ces 320px) — on le rend
   invisible ici et on affiche plutôt un simple contour sur toute la zone via :has(). */
.audit-axe-cible{display:block}
.audit-axe-cible .sortable-ghost{opacity:0;height:0;min-height:0;padding:0;margin:0;overflow:hidden;pointer-events:none}
.audit-axe-cible:has(.sortable-ghost){outline:2px dashed var(--sky-400);outline-offset:-2px;border-radius:13px;background:var(--sky-100)}
@media (max-width:960px){ .audit-mise{grid-template-columns:1fr} }

/* ============ AUDIT : colonnes Informations / Constats (onglet Audit) ============ */
.audit-deux-colonnes{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:22px;align-items:start}
@media (max-width:760px){ .audit-deux-colonnes{grid-template-columns:1fr} }
/* Axe "Cadre de l'audit" : Informations et Constats sont masqués la plupart du temps (voir audit.html),
   ne laissant que le bloc Documents dans colInfo — une seule colonne pleine largeur plutôt que de le
   coincer dans la colonne étroite d'origine à côté d'une colonne Constats vide. */
.audit-deux-colonnes--simple{grid-template-columns:1fr}

.audit-col-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:38px}
.audit-col-entete h3{margin:0;font-size:12.5px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.05em}

.audit-info-ligne{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;border-bottom:1px dotted var(--trait-2)}
.audit-info-ligne:last-child{border-bottom:0}
.audit-info-puce{width:6px;height:6px;border-radius:50%;background:#94A3B8;flex:none;margin-top:7px}
.audit-info-corps{flex:1;min-width:0;display:flex;flex-direction:column}
.audit-info-libelle{border:0;background:transparent;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--encre-3);padding:2px 2px 0;font-family:inherit}
.audit-info-valeur{border:0;background:transparent;font-size:13.5px;color:var(--encre);padding:2px 2px;font-family:inherit;resize:none;overflow:hidden;line-height:1.4;white-space:pre-wrap}
.audit-info-libelle:focus,.audit-info-valeur:focus{outline:none;background:var(--champ);border-radius:6px}
.audit-ligne-suppr{flex:none;border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:13px;padding:3px 7px;border-radius:6px;line-height:1;margin-top:4px}
.audit-info-ligne .audit-gravite-select{margin-top:4px}
.audit-ligne-suppr:hover{background:#FDECEC;color:#B91C1C}
.audit-ligne-suppr-pj{display:flex;align-items:center}
.audit-ligne-suppr-pj svg{width:15px;height:15px}

/* Ajout manuel de document(s) directement sous le bloc Informations d'un axe (onglet Audit). */
/* Bloc "Documents" sous les Informations d'un axe (onglet Audit) : deuxième .audit-col-entete dans la même
   colonne, avec sa propre liste de fichiers stockés sur l'axe (indépendants des informations elles-mêmes). */
.audit-col-entete-documents{margin-top:16px;padding-top:14px;border-top:1px dashed var(--trait)}
.audit-col-entete-documents button[data-role="doc-axe-bouton"]{display:inline-flex;align-items:center;gap:6px}
.audit-col-entete-documents button[data-role="doc-axe-bouton"] svg{width:14px;height:14px;flex:none}
.audit-doc-axe-ligne{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px dotted var(--trait-2);font-size:13px}
.audit-doc-axe-ligne:last-child{border-bottom:0}

/* ============ PIÈCE JOINTE UNIQUE (constat) ============ */
.audit-pj{margin-top:10px}
.audit-pj svg{width:14px;height:14px;flex:none}
.audit-pj-ajouter{display:inline-flex;align-items:center;gap:6px}
.audit-pj-attachee{display:flex;align-items:center;gap:4px}
.audit-pj-lien{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--trait);background:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--encre-2);cursor:pointer;font-family:inherit;max-width:240px}
.audit-pj-lien span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-pj-lien:hover{background:var(--champ)}
.audit-pj-retirer{flex:none;width:24px;height:24px;border-radius:8px;border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:12px}
.audit-pj-retirer:hover{background:#FDECEC;color:#B91C1C}

/* ============ PIÈCES JOINTES MULTIPLES (annotations d'étape) ============ */
/* Trombone + badge de comptage, sur la même ligne que l'horodatage et le champ de texte (entre les deux) —
   ouvre un menu déroulant (.menu-deroulant-panneau/.menu-item réutilisés, même style que "Mes audits") avec
   "+ Ajouter" et la liste des documents déjà attachés. */
.audit-etape-note-pj{flex:none;display:flex;align-items:center;padding-top:6px;position:relative}
.audit-pj-multi{position:relative;display:inline-flex}
.audit-pj-multi-bouton{position:relative;display:flex;align-items:center;border:0;background:transparent;color:var(--encre-3);cursor:pointer;padding:4px;border-radius:6px}
.audit-pj-multi-bouton:hover{background:var(--champ)}
.audit-pj-multi-bouton svg{width:14px;height:14px;flex:none}
.audit-pj-multi-badge{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:var(--sky-600);color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center;box-shadow:0 0 0 2px var(--carte)}

/* Poignée de glisser (info + constat) : reclasse une carte en la lâchant sur un axe de la sidebar, sans
   passer par le menu "→"/la pastille de sévérité — pratique en cas d'erreur de classement. Seul cet
   élément déclenche le drag (options Sortable "handle"), le reste de la carte (champs, boutons) reste
   inchangé. */
.audit-drag-handle{flex:none;cursor:grab;color:var(--encre-3);font-size:15px;line-height:1;padding:2px 1px;user-select:none;touch-action:none}
.audit-drag-handle:hover{color:var(--encre)}
.audit-drag-handle:active{cursor:grabbing}
.sortable-chosen{opacity:.5}

.bouton-discret{border:0;background:transparent;color:var(--encre-3);font-size:12.5px;padding:4px 6px;cursor:pointer;font-family:inherit}
.bouton-discret:hover{color:var(--encre);text-decoration:underline}

/* .carte a overflow:hidden par défaut (pour clipper proprement les coins arrondis) — ça coupait aussi le
   menu déroulant de sévérité, positionné en absolute et censé dépasser de la carte. Sans arrière-plan
   d'en-tête à clipper sur ce type de carte précis, on peut sans risque désactiver le clip ici. */
.audit-constat-carte{overflow:visible}

.audit-constat-tete,.audit-action-tete{display:flex;align-items:center;gap:10px;padding:11px 12px}
.audit-constat-titre{flex:1;min-width:0;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--encre);padding:3px 2px;font-family:inherit}
.audit-constat-titre:focus{outline:none}
.audit-constat-titre::placeholder{font-weight:400;color:var(--encre-3)}
.audit-constat-chevron{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:var(--champ);color:var(--encre-2);cursor:pointer;padding:0;border-radius:8px}
.audit-constat-chevron svg{width:18px;height:18px;transition:transform .15s}
.audit-constat-chevron:hover{background:var(--sky-100);color:var(--encre)}
.carte.audit-constat-carte:not(.repli) .audit-constat-chevron svg{transform:rotate(180deg)}

/* Ce que la dernière organisation des notes vient d'ajouter (2026-09-07). Sur un audit déjà rempli, les
   nouveaux constats s'inséraient dans la liste triée par gravité, parfaitement indiscernables de l'existant :
   le pop-up annonçait "2 nouveaux constats" sans dire ni où ni lesquels. Marque persistante (pas un flash de
   2 s) car les nouveautés se répartissent sur plusieurs axes qu'on ne regarde pas au même moment ; elle
   s'efface au passage suivant et au changement d'audit. */
.audit-axe-nouveau{
  flex:none;padding:1px 7px;border-radius:999px;background:var(--sky-600);color:#fff;
  font-size:10.5px;font-weight:800;line-height:16px;
}
.audit-constat-nouveau{
  flex:none;padding:2px 8px;border-radius:999px;background:var(--sky-100);color:var(--sky-800);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:help;
}
.carte.audit-constat-carte.nouveau{border-color:var(--sky-300);box-shadow:0 0 0 3px rgba(2,132,199,.09)}

.carte-repliable.repli .carte-corps{display:none}
.carte-repliable:not(.repli) .audit-constat-chevron svg{transform:rotate(180deg)}

/* ============ VERROU PLEIN ÉCRAN PENDANT UN APPEL IA ============ */
/* ============ TRI LIGNE PAR LIGNE DES NOTES (onglet Saisie, avant l'IA) ============ */
/* Même piège que .audit-constat-carte : .carte a overflow:hidden par défaut, ce qui couperait le menu
   déroulant d'axe positionné en absolute et censé dépasser de la carte. */
.carte-notes-terrain{overflow:visible}
.notes-deux-colonnes{display:flex;gap:20px;flex-wrap:wrap;overflow:visible}

.documents-zone{border-radius:12px;transition:background-color .12s,box-shadow .12s}
/* Encadré propre (fond teinté), pas juste un filet en haut — pour bien la distinguer visuellement du bloc
   "Organiser mes notes" juste en dessous (demande explicite, 2026-08-31 : les deux se confondaient trop). */
.audit-notes-photo{margin-top:14px;padding:12px;background:var(--champ)}
.documents-zone-survol{background:var(--sky-50);box-shadow:inset 0 0 0 2px var(--sky-300)}
.audit-photo-avertissement{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;font-size:12.5px;line-height:1.4}
#notesTriageBloc,#notesEnAttenteBloc{background:var(--champ);border-radius:12px;padding:10px 12px;overflow:visible;flex:1 1 260px;min-width:240px}
.note-triage-ligne{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px dotted var(--trait-2);font-size:13px;border-radius:8px;transition:background .12s}
.note-triage-ligne:last-child{border-bottom:0}
/* Survol de la case "essentiel" : toute la ligne se teinte pour que l'auditeur soit sûr de la ligne visée
   avant de cocher, pas seulement la petite case elle-même (demande explicite) — même pattern :has() que
   .audit-etape-ligne:has(.audit-etape-suppr:hover) plus haut. Case nue, sans libellé (demande explicite,
   2026-09-04) : placée à gauche de la ligne pour rester au plus près du texte qu'elle marque, le "pourquoi"
   passe uniquement par le title/aria-label natifs. */
.note-triage-essentiel{flex:none;width:16px;height:16px;margin:0 0 0 4px;cursor:pointer} /* accent-color héritée de :root */
.note-triage-ligne:has(.note-triage-essentiel:hover){background:var(--sky-100);box-shadow:inset 3px 0 0 var(--sky-600)}
/* Même principe pour la croix de suppression, à droite de la ligne : liseré à DROITE cette fois (inset
   négatif) et teinte rouge plutôt que bleue, pour bien distinguer visuellement "cocher essentiel" de
   "supprimer la ligne". .note-triage-suppr est réutilisé ailleurs (demandeurs/destinataires...), d'où le
   scope explicite à .note-triage-ligne pour ne pas affecter ces autres listes. */
.note-triage-ligne:has(.note-triage-suppr:hover){background:#FDECEC;box-shadow:inset -3px 0 0 #EF4444}
.note-triage-texte{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;color:var(--encre);white-space:pre-wrap;overflow-wrap:break-word}
.note-triage-texte svg{width:14px;height:14px;flex:none}
.note-triage-plus{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--trait);background:#fff;color:var(--sky-700);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.note-triage-plus:hover{background:var(--sky-100)}
.note-triage-suppr{flex:none;width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:13px}
.note-triage-suppr:hover{background:#FDECEC;color:#B91C1C}
.note-triage-menu{min-width:240px}

.note-attente-axe-badge{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--trait);background:#fff;border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:700;color:var(--encre-2);cursor:pointer;max-width:170px;text-align:left;line-height:1.25;font-family:inherit}
.note-attente-axe-badge:hover{background:var(--champ)}
.note-triage-axe-pt{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}

.audit-verrou{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:200}
.audit-verrou-boite{background:var(--carte);border-radius:16px;padding:28px 36px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.audit-verrou-spinner{width:32px;height:32px;border:3px solid var(--sky-200);border-top-color:var(--sky-600);border-radius:50%;animation:auditVerrouSpin .8s linear infinite}
.audit-verrou-boite p{margin:0;font-size:13.5px;font-weight:600;color:var(--encre)}
@keyframes auditVerrouSpin{to{transform:rotate(360deg)}}

.audit-constat-lancer-action{display:flex;gap:4px;margin:-4px 0 12px}

.audit-constat-suppr,.audit-constat-suggerer,.audit-constat-creer,.audit-action-verrou{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--encre-3);cursor:pointer;padding:0;border-radius:8px;font-size:14px}
.audit-constat-suppr svg,.audit-action-verrou svg,.audit-constat-creer svg{width:17px;height:17px}
.audit-constat-suppr:hover{background:#FDECEC;color:#B91C1C}
.audit-constat-suggerer:hover{background:var(--sky-100);color:#10347F}
/* "+ Créer une action" (bouton texte) remplacé par une icône seule (retour explicite, 2026-09-04 : le
   texte se coupait/passait à la ligne dans la liste "Constats" étroite). D'abord fait avec un glyphe "+"
   texte brut : mal aligné verticalement avec le ✨ voisin (métriques de police différentes d'un glyphe
   emoji), corrigé le même jour en SVG (même chemin que le "+" de la ligne des totaux du relevé) — un SVG
   dimensionné explicitement se centre pixel pour pixel dans la boîte flex 28×28, contrairement à un
   glyphe texte dont le rendu dépend de la police. */
.audit-constat-creer:hover{background:#EAF7EF;color:#15803D}
.audit-action-verrou:hover{background:#FFFBEB;color:#92400E}
.audit-constat-suppr:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* Verrou d'action (2026-08-31) : fige le contenu modifiable d'une action de suivi, laisse le
   glisser-déposer, le déplier/replier et le lien vers le constat totalement libres. */
.audit-action-carte.verrouille .audit-action-verrou{color:#92400E}
.audit-action-carte.verrouille .audit-action-titre:disabled{opacity:.65;cursor:not-allowed}
.audit-etapes-inerte{pointer-events:none;opacity:.55}
.audit-constat-actions-bouton{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--sky-600);cursor:pointer;padding:0;border-radius:8px}
.audit-constat-actions-bouton:hover{background:var(--sky-100)}
.audit-constat-actions-bouton svg{width:16px;height:16px}
.audit-constat-actions-badge{position:absolute;bottom:-2px;right:-2px;min-width:12px;height:12px;padding:0 2px;border-radius:999px;background:var(--sky-100);color:var(--sky-700);font-size:8px;font-weight:700;line-height:12px;text-align:center;box-shadow:0 0 0 2px var(--carte)}
.carte.audit-constat-carte.repli .carte-corps{display:none}

.audit-gravite-select{position:relative;flex:none}
.audit-gravite-puce{width:13px;height:13px;border-radius:50%;border:0;box-shadow:0 0 0 2px var(--carte),0 0 0 3px var(--trait);cursor:pointer;padding:0}
.audit-gravite-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--carte);border:1px solid var(--trait);border-radius:10px;box-shadow:0 8px 22px rgba(15,23,42,.16);padding:4px;z-index:30;display:flex;flex-direction:column;gap:2px;min-width:150px}
.audit-gravite-menu button{display:flex;align-items:flex-start;gap:8px;padding:7px 8px 7px 6px;border-radius:6px;border:0;background:transparent;font-size:13px;text-align:left;cursor:pointer;color:var(--encre-2);font-family:inherit;width:100%;box-sizing:border-box}
.note-triage-axe-texte{flex:1;min-width:0;overflow-wrap:break-word}
.audit-gravite-menu button:hover{background:var(--sky-50)}
.audit-gravite-menu button::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}
.audit-gravite-menu button[data-gravite="critique"]::before{background:#EF4444}
.audit-gravite-menu button[data-gravite="majeur"]::before{background:#F59E0B}
.audit-gravite-menu button[data-gravite="mineur"]::before{background:#3B82F6}
.audit-gravite-menu button[data-gravite="positif"]::before{background:#4ADE80}

/* ============ LISTE "CONSTATS" (onglet Actions à mener) ============ */
/* Reprend, hors de la carte de constat de l'onglet Audit, les points d'entrée de création d'action par
   constat (suggestion IA / création manuelle) — réorganisation du 2026-09-03. */
.audit-constats-actions-groupe{margin-bottom:18px}
.audit-constats-actions-groupe:last-child{margin-bottom:0}
.audit-constats-actions-titre{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em}
/* background --champ, mais cette liste vit directement sur le fond de page (--fond, même couleur) plutôt
   que dans une carte blanche — passée en blanc pour rester lisible, même piège que #listeUtilisateurs
   .liste-item (onglet Équipe) et le champ de recherche juste au-dessus, voir contexte.md. */
.audit-constat-action-ligne{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--trait);border-radius:10px;background:var(--carte);margin-bottom:6px}
.audit-constat-action-ligne:last-child{margin-bottom:0}
.audit-constat-action-puce{width:10px;height:10px;border-radius:50%;flex:none}
.audit-constat-action-titre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--encre);background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.audit-constat-action-titre:hover{text-decoration:underline}
.audit-constat-action-axe{flex:none;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--encre-3)}

/* Modale "À quel constat lier cette action ?" (#modaleChoisirConstat) : réutilise .audit-constat-action-
   ligne pour un rendu identique à la liste "Constats", mais toute la ligne est cliquable (pas seulement
   le titre) et vit dans une .modale-carte déjà blanche — repasse donc en --champ pour contraster, au lieu
   du blanc forcé sur la version non-modale ci-dessus. */
.audit-choix-constat-ligne{cursor:pointer;background:var(--champ)}
.audit-choix-constat-ligne:hover,.audit-choix-constat-ligne:focus-visible{border-color:var(--sky-400);background:var(--sky-50);outline:none}
.audit-constat-action-badge{flex:none;font-size:11px;font-weight:700;color:var(--sky-700);background:var(--sky-100);border-radius:999px;padding:1px 7px}

/* ============ HISTORIQUE DES NOTES (onglet Saisie) ============ */
.audit-journal-entree{padding:10px 0;border-bottom:1px dotted var(--trait-2)}
.audit-journal-entree:last-child{border-bottom:0}
.audit-journal-date{font-size:11px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.audit-journal-texte{font-size:13.5px;color:var(--encre);white-space:pre-wrap;line-height:1.5}
.audit-action-lien{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--encre-3);margin:0 0 12px}
.audit-action-lien .audit-gravite-puce{position:relative;top:2px}
.audit-action-lien-bouton{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--sky-700);font-size:12px;font-weight:600;padding:0;cursor:pointer;font-family:inherit;text-align:left}
.audit-action-lien-bouton:hover{text-decoration:underline}

/* Liseré à gauche reprenant la sévérité du constat d'origine (une action n'a pas de gravité propre — voir
   auditActionGraviteClasse()) : neutre par défaut (action générale ou constat introuvable/supprimé), coloré
   si la carte porte une des classes gravite-*. */
.audit-action-carte{border-left:4px solid var(--trait);overflow:visible}
.audit-action-carte.gravite-critique{border-left-color:#EF4444}
.audit-action-carte.gravite-majeur{border-left-color:#F59E0B}
.audit-action-carte.gravite-mineur{border-left-color:#3B82F6}
.audit-action-carte.gravite-positif{border-left-color:#4ADE80}

/* ============ ÉTAPES D'UNE ACTION (mini-timeline cochable) ============ */
.audit-etapes{margin-top:12px;padding-top:12px;border-top:1px dashed var(--trait);--audit-etape-couleur:#16A34A}
.audit-etapes-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.audit-etapes-titre{font-size:12.5px;font-weight:600;color:var(--encre-2)}
.audit-etapes-compte{font-size:11.5px;font-weight:700;color:var(--encre-3)}
.audit-etapes-barre{height:4px;border-radius:2px;background:var(--champ);overflow:hidden;margin-bottom:8px}
.audit-etapes-barre-remplie{height:100%;width:0;background:var(--audit-etape-couleur);border-radius:2px;transition:width .2s}
/* Chaque étape est en deux temps : l'en-tête (point + texte + actions), toujours visible, et une note
   repliable en dessous, indentée pour rester rattachée visuellement à son étape. Le connecteur de la
   timeline (::before) reste porté par .audit-etape-ligne dans son ensemble (pas juste l'en-tête) : ancré en
   top/bottom relatifs à sa propre boîte, il s'étire automatiquement jusqu'au point suivant que la note soit
   ouverte ou non, sans recalcul JS. */
.audit-etape-ligne{position:relative;padding:5px 0;border-radius:8px;transition:background-color .12s}
/* Survol de la croix de suppression (étape ou annotation) : légère teinte rouge sur toute la ligne
   concernée, pour être sûr de la bonne ligne avant de cliquer — pas juste la croix elle-même qui change de
   fond, la ligne entière (demande explicite, 2026-08-30). */
.audit-etape-ligne:has(> .audit-etape-entete .audit-etape-suppr:hover){background:#FDECEC}
.audit-etape-note-entree:has(.audit-etape-note-suppr:hover){background:#FDECEC;border-radius:8px}
/* Largeur fixe sur la poignée de cette ligne précise (au lieu de la largeur naturelle du glyphe "⠿", variable
   selon les navigateurs) pour que le repère du connecteur juste en dessous soit calculable avec certitude :
   16px (poignée) + 10px (gap de .audit-etape-entete) + 8px (moitié du point, 16px) = 34px. */
.audit-etape-entete .audit-drag-handle{width:16px;text-align:center}
.audit-etape-ligne:not(:last-child)::before{content:'';position:absolute;left:34px;top:19px;bottom:-4px;width:2px;background:var(--trait)}
.audit-etape-entete{display:flex;align-items:center;gap:10px}
.audit-etape-point{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--trait-2);background:var(--carte);cursor:pointer;padding:0;position:relative;z-index:1}
.audit-etape-point:hover{border-color:var(--audit-etape-couleur)}
/* Étape faite : la pastille DEVIENT la coche (cercle + tracé), au lieu d'un disque plein. Un disque
   plein dans une frise verticale peut se lire « étape courante » ; une coche ne se lit que « fait ».
   C'est ce signal-là qui porte l'information depuis qu'on a retiré le barré du texte (2026-09-09). */
.audit-etape-ligne.fait .audit-etape-point{
  background:var(--audit-etape-couleur);border-color:transparent;
  -webkit-mask:var(--check-icone) center/contain no-repeat;
  mask:var(--check-icone) center/contain no-repeat;
}
/* La bordure étant masquée, le survol de base (.audit-etape-point:hover) ne se voit plus sur une étape
   faite — or c'est justement là qu'on clique pour DÉCOCHER. Retour de survol propre à cet état.
   Le masque ne change rien à la zone cliquable : il ne peint pas, il ne découpe pas les événements. */
.audit-etape-ligne.fait .audit-etape-point:hover{opacity:.6}
/* Suggestion IA pas encore validée dans le suivi : la case reste visible mais non cochable (voir
   auditBrancherEtapes, audit.html) — curseur explicite, pas juste une opacité qu'on pourrait confondre
   avec un simple état visuel différent. */
.audit-etape-point:disabled{cursor:not-allowed;opacity:.45}
.audit-etape-point:disabled:hover{border-color:var(--trait-2)}
/* Largeur calquée sur le texte tapé, fixée en JS via une mesure canvas (ajusterLargeurChamp, audit.html),
   sans plafond — "+ Note" vient se coller juste derrière, à distance fixe. flex:none : c'est le width posé
   en JS qui fait foi, pas flex-grow/shrink. */
.audit-etape-texte{flex:none;width:60px;box-sizing:border-box;border:0;background:transparent;font-size:13px;color:var(--encre);padding:2px;font-family:inherit}
.audit-etape-texte:focus{outline:none;background:var(--champ);border-radius:6px}
/* ============ RÈGLE : ON NE BARRE RIEN (posée le 2026-09-09) ============
   Le barré avait été adouci le 2026-09-07 (texte remonté à --encre-2, trait descendu à --encre-3) parce
   qu'il rendait les étapes illisibles. L'adoucir n'a pas suffi — retour utilisateur : « le barré est
   horrible, on voit rien nulle part ». Sur des phrases entières, et non sur trois mots, un trait qui
   traverse le texte reste une gêne de lecture quel que soit son contraste : il coupe la ligne de base au
   milieu des lettres, là où l'œil cherche la forme des mots.
   Le remplacement ne consiste PAS à trouver un autre effet sur le texte, mais à déplacer le signal :
   c'est la COCHE (pastille de l'étape, badge de statut de l'action) qui dit « traité », pas la
   typographie. Le texte se contente de reculer d'un cran de contraste, et reste intégralement lisible.
   Ne pas réintroduire de line-through ici, ni sur .audit-action-titre, ni sur .suivi-ligne-texte. */
.audit-etape-ligne.fait .audit-etape-texte{color:var(--encre-2)}
/* Bouton texte (pas une icône, retour explicite : un pictogramme seul prêtait à confusion) qui n'apparaît
   qu'au survol de la ligne — même traitement que la poubelle juste à côté, familier. SEUL bouton pour
   ajouter une annotation, à tout moment (1ère ou une de plus) — pas de second bouton dans le bloc de notes,
   jugé redondant. Collé juste après le texte (pas de gap spécifique au-delà du gap uniforme de la ligne),
   plutôt que loin à droite. */
.audit-etape-note-ajouter-entete{flex:none;border:0;background:transparent;color:var(--sky-700);cursor:pointer;font-size:12px;font-weight:600;padding:3px 6px;border-radius:6px;opacity:0;transition:opacity .12s,background .12s;white-space:nowrap}
.audit-etape-ligne:hover .audit-etape-note-ajouter-entete{opacity:1}
.audit-etape-note-ajouter-entete:hover{background:var(--sky-100)}
/* Poussée à l'extrémité droite de la ligne (margin-left:auto), isolée du reste — l'action la plus
   irréversible de la ligne mérite de rester à un endroit fixe et prévisible, pas collée aux autres. */
.audit-etape-suppr{flex:none;margin-left:auto;border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:6px;opacity:0;transition:opacity .12s}
.audit-etape-ligne:hover .audit-etape-suppr{opacity:1}
.audit-etape-suppr:hover{background:#FDECEC;color:#B91C1C}
/* 38px, pas 26px : le trait de la timeline (.audit-etape-ligne::before) est à left:34px depuis l'ajout de la
   poignée de glisser — sans cette marge, il traversait le début de l'horodatage des annotations. */
.audit-etape-note{margin:4px 0 0 41px}
.audit-etape-note-entree{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:4px 0;transition:height .16s ease,opacity .16s ease,padding .16s ease,margin .16s ease}
.audit-etape-note-entree.suppression{height:0!important;opacity:0;padding-top:0;padding-bottom:0;margin:0}
.audit-etape-note-date{flex:none;font-size:10.5px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.02em;padding-top:8px;white-space:nowrap}
.audit-etape-note-champ{flex:1;min-width:0;box-sizing:border-box;border:1px solid var(--trait);border-radius:8px;background:var(--champ);font-size:12.5px;color:var(--encre);padding:6px 8px;font-family:inherit;resize:none;overflow:hidden;line-height:1.4}
.audit-etape-note-champ:focus{outline:none;border-color:var(--audit-etape-couleur);background:var(--carte)}
.audit-etape-note-suppr{flex:none;border:0;background:transparent;color:var(--encre-3);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:6px;margin-top:5px;opacity:0;transition:opacity .12s}
.audit-etape-note-entree:hover .audit-etape-note-suppr{opacity:1}
.audit-etape-note-suppr:hover{background:#FDECEC;color:#B91C1C}

.audit-etapes-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;justify-content:space-between}
.audit-etape-ajouter{margin-top:0}
/* Moins visible que "+ Ajouter une étape" (demande explicite, 2026-08-30) : la saisie manuelle doit rester
   l'action prioritaire visuellement, le passage par l'IA reste possible mais discret — même traitement que
   .bouton-discret plutôt que le style .bouton bordé/coloré d'avant. */
.audit-etape-forcer-ia{border-color:transparent;background:transparent;color:var(--encre-3);font-weight:400}
.audit-etape-forcer-ia:hover{background:var(--champ);color:var(--encre)}

/* ============ ACTIONS DE SUIVI : en-tête pliable + tri par groupe d'axe ============ */
.audit-action-titre{flex:1;min-width:0;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--encre);padding:3px 2px;font-family:inherit}
.audit-action-titre:focus{outline:none}
.audit-action-titre::placeholder{font-weight:400;color:var(--encre-3)}
/* Voir « ON NE BARRE RIEN » plus haut. Le titre d'une action terminée est un champ ÉDITABLE : le barrer
   était doublement pénible, on ne relit pas ce qu'on vient d'écrire. Le badge de statut de l'en-tête
   (« Réalisé le 08/09 ») porte seul l'information. --encre-2 et non --encre-3 : secondaire, pas effacé. */
.audit-action-carte.fait .audit-action-titre{color:var(--encre-2)}

.audit-actions-groupe-titre{font-size:12.5px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px}
.audit-actions-groupe-titre:first-child{margin-top:0}

@keyframes auditSurligneFlash{
  0%,100%{background:var(--carte)}
  25%,75%{background:#EAF7EF}
}
.audit-constat-carte.surligne,.audit-action-carte.surligne{animation:auditSurligneFlash 2s ease}

/* ============ SÉPARATION PLAN D'ACTIONS / SUIVI (2026-09-07) ============ */
/* Badge de statut, partagé par la carte du Plan (lecture seule) et la ligne du Suivi. Les couleurs sont
   posées en JS depuis ACTION_STATUTS pour rester la seule source de vérité. */
.audit-statut-badge{
  padding:3px 9px;border:1.5px solid;border-radius:999px;
  font-size:11.5px;font-weight:800;white-space:nowrap;
}
.audit-action-statut{flex:none;cursor:default}

/* Chaque onglet ne montre que les contrôles de son rôle : le Plan ÉCRIT le plan (texte des étapes, ajout,
   suppression), le Suivi DÉCLARE ce qui se passe (coche, annotations). Aucun contrôle des deux côtés. */
.audit-etapes-plan [data-role="note-ajouter-entete"],
.audit-etapes-plan .audit-etape-note-suppr{display:none}
.audit-etapes-suivi .audit-etape-ajouter,
.audit-etapes-suivi .audit-etape-suppr{display:none}
/* La case d'étape désactivée côté Plan reste parfaitement lisible (c'est un affichage d'avancement, pas un
   contrôle grisé "cassé") — seul le curseur signale qu'elle ne se clique pas ici. */
.audit-etapes-plan .audit-etape-point:disabled{opacity:1;cursor:default}

/* Navigation croisée entre les deux onglets — même vert maison que .audit-constat-creer:hover. */
.audit-action-aller-suivi,.suivi-aller-plan{
  flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;background:transparent;color:var(--encre-3);cursor:pointer;padding:0;border-radius:8px;
}
.audit-action-aller-suivi svg,.suivi-aller-plan svg{width:17px;height:17px}
.audit-action-aller-suivi:hover,.suivi-aller-plan:hover{background:#EAF7EF;color:#15803D}
.suivi-ligne.surligne{animation:auditSurligneFlash 2s ease}

/* ============ FEUILLE D'EXPORT AUDIT (impression / PDF, onglet Résultats et rapport) ============ */
/* Trois feuilles cachées partagent le même mécanisme d'impression (onglets Résultats et Rapports) : la
   classe .feuille-active-impression, posée en JS juste avant window.print(), décide laquelle des trois
   s'affiche réellement — sans ça, imprimer l'une afficherait aussi les autres en même temps. */
#feuilleExportAudit,#feuilleExportRapport,#feuilleExportResultats,#feuilleExportRapportAudit{display:none}
@media print{
  #feuilleExportAudit.feuille-active-impression,#feuilleExportRapport.feuille-active-impression,#feuilleExportResultats.feuille-active-impression,#feuilleExportRapportAudit.feuille-active-impression{display:block !important}
}

/* Section repliable de niveau page (2026-09-08) — utilisée par les deux « État d'avancement », repliés
   par défaut : on n'ouvre pas l'onglet Rapport d'audit pour rédiger un mail hebdomadaire. Même convention
   de chevron À GAUCHE que .suivi-groupe-tete : ce n'est pas une carte, il n'y a pas de bord droit auquel
   accrocher la flèche (voir la note de 2026-09-07 sur ce point). */
.bloc-repliable{margin-bottom:14px}
/* L'en-tête doit se lire comme un TIROIR FERMÉ, pas comme une ligne de texte flottante : une vraie barre
   (fond, bordure, coins arrondis) qui appelle le clic. Première version sans conteneur : illisible, on ne
   voyait ni que c'était cliquable ni où commençait la section (retour d'usage immédiat, 2026-09-08). */
.bloc-repliable-tete{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;margin:0;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);
  text-align:left;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s;
}
/* RÈGLE DE SURVOL (posée le 2026-09-08, appliquée d'un coup à tout le module) :
     • une LIGNE DE LISTE ou un EN-TÊTE cliquable survolé passe en `--sky-50` (bordure `--sky-200` quand
       elle en a une) — la famille Sky est la couleur d'action du site ;
     • un survol TEINTÉ (rouge, ambre, vert) reste tel quel : il porte un sens (supprimer, retard,
       valider), pas une simple affordance de clic ;
     • les petits boutons-icônes et widgets de chrome gardent leur gris neutre.
   Le gris utilisé auparavant sur les lignes donnait l'impression d'un élément DÉSACTIVÉ plutôt que d'un
   bouton. Concernés par la règle : .bloc-repliable-tete, .resultats-axe-ligne, .audit-axe-btn,
   .recap-ligne, .suivi-groupe-tete, .suivi-ligne-tete, .menu-item, .audit-gravite-menu button,
   .calc-hist-item. Toute nouvelle ligne cliquable doit s'y ranger. */
.bloc-repliable-tete:hover{background:var(--sky-50);border-color:var(--sky-200)}
.bloc-repliable-tete:hover .bloc-repliable-chevron{color:var(--sky-600)}
.bloc-repliable-tete:hover .bloc-repliable-note{color:var(--sky-800)}
/* Ouvert : la barre garde son fond clair et prend juste de l'air sous elle. Le fond gris essayé d'abord
   noyait l'étiquette noire et la note — on ne lisait plus l'en-tête de la section ouverte. */
.bloc-repliable:not(.repli) .bloc-repliable-tete{margin-bottom:12px}
.bloc-repliable-chevron{flex:none;display:flex;color:var(--encre-3)}
.bloc-repliable-chevron svg{width:18px;height:18px;transition:transform .15s}
.bloc-repliable.repli .bloc-repliable-chevron svg{transform:rotate(-90deg)}
.bloc-repliable.repli .bloc-repliable-corps{display:none}
/* Même étiquette noire que .titre-badge : les deux sous-sections d'un onglet doivent se lire comme des
   sœurs, l'une simplement repliable. Avant, l'une était une pilule noire et l'autre du texte nu. */
.bloc-repliable-titre{
  flex:none;background:var(--encre);color:#fff;padding:5px 12px;border-radius:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}
.bloc-repliable-note{
  flex:1;min-width:0;font-size:13.5px;color:var(--encre-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Le corps ne porte AUCUN cadre : il contient déjà des cartes qui ont le leur. Une bordure de plus
   ferait une boîte dans une boîte, exactement le genre d'empilement qui rend un écran illisible. */
.bloc-repliable-corps{padding:0}
/* Brouillon non envoyé : l'en-tête le dit sans qu'on ait à déplier, sinon le repli ferait oublier du
   travail en cours. */
.bloc-repliable-note-alerte{color:#B45309;font-weight:700}

/* ============ ÉTAT D'AVANCEMENT — refonte en 3 étapes (2026-09-08) ============
   Une seule carte, trois étapes numérotées dans l'ordre où on réfléchit : sur quoi ça porte, quelle
   période, générer. L'ancienne version dispersait formulaire, sélection et bouton dans trois zones. */
.recap-etape{display:flex;gap:12px;padding-bottom:18px}
.recap-etape+.recap-etape{padding-top:18px;border-top:1px solid var(--trait-2)}
.recap-etape-fin{padding-bottom:0}
.recap-etape-num{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--encre);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.recap-etape-corps{flex:1;min-width:0}
.recap-etape-titre{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--encre)}
.recap-periode-note{margin:8px 0 0;font-size:12px;color:var(--encre-3);line-height:1.5}
.recap-generer{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* La liste : compacte et balayable d'un regard. Depuis le 2026-09-09, sur la section de la période,
   un groupe = une NATURE DE MOUVEMENT (et non plus un axe) et un constat = UNE ligne. Le tiroir
   « ajouter d'autres constats » reste groupé par axe : c'est une pioche, pas une lecture de période. */
/* (.recap-digest retiré le 2026-09-09 : « 10 nouveaux constats · 1 constat modifié… » en tête de liste
   était un SECOND index du même contenu, à trois centimètres d'en-têtes qui portent déjà titre et
   compte. Ne pas le réintroduire sans retirer le compte des en-têtes.) */
.recap-liste{margin-top:10px;border:1px solid var(--trait);border-radius:var(--r-champ);overflow:hidden}
.recap-groupe+.recap-groupe{border-top:1px solid var(--trait)}
/* En-tête de groupe RENFORCÉ (2026-09-09) : il ne se distinguait pas assez des lignes qu'il coiffe —
   même hauteur apparente, teinte à peine plus soutenue, titre en 11,5px. Or c'est lui qui porte tout le
   sens de la liste depuis qu'on groupe par nature du mouvement : s'il ne se voit pas, la liste redevient
   le mur indistinct qu'on cherchait à supprimer. On agit sur trois leviers plutôt que d'en pousser un
   seul à l'excès : un filet inférieur net (le titre CLÔT une bande au lieu de flotter dedans), un peu
   plus d'air, et un titre d'un cran plus grand. */
.recap-groupe-tete{
  display:flex;align-items:center;gap:9px;padding:11px 10px;
  background:var(--champ);border-bottom:1px solid var(--trait);
}
.recap-groupe-nom{
  flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--encre);
  text-transform:uppercase;letter-spacing:.045em;
}
/* L'aide du groupe porte ce que la ligne ne répète plus : pourquoi ces constats sont là. */
.recap-groupe-aide{
  margin-left:8px;font-size:11.5px;font-weight:600;color:var(--encre-3);
  text-transform:none;letter-spacing:0;
}
/* Le compte, désormais COLLÉ à son titre et non plus relégué à droite : c'est cette distance qui le
   rendait illisible (« le 10 à droite il veut dire quoi ? »). Adjacent, il n'a plus besoin d'être
   libellé — le titre EST son libellé, et il s'accorde de lui-même à chaque groupe. Un cran en dessous
   du titre en graisse et en opacité : c'est une précision, pas le sujet. */
.recap-groupe-compte{font-weight:700;opacity:.65;letter-spacing:0}
/* Liseré de couleur par nature du mouvement — le repère qui permet à l'œil de distinguer les groupes
   sans les lire. Teintes déjà en service ailleurs : ambre = déjà communiqué, sky = famille d'action du
   site, vert = validé/nouveau contenu utile. Élargi à 4px avec l'en-tête renforcé : à 3px il se lisait
   comme un filet de tableau, à 4px comme une bande qui tient tout le groupe. */
.recap-groupe-modifie{border-left:4px solid #F59E0B}
.recap-groupe-modifie .recap-groupe-tete{background:#FEF3C7;border-bottom-color:#FCD9A8;color:#B45309}
.recap-groupe-modifie .recap-groupe-nom{color:#B45309}
.recap-groupe-nouveau{border-left:4px solid var(--sky-500)}
.recap-groupe-nouveau .recap-groupe-tete{background:var(--sky-100);border-bottom-color:var(--sky-200);color:var(--sky-800)}
.recap-groupe-nouveau .recap-groupe-nom{color:var(--sky-800)}
.recap-groupe-reco{border-left:4px solid #16A34A}
.recap-groupe-reco .recap-groupe-tete{background:#D9F2E3;border-bottom-color:#BFE6CE;color:#15803D}
.recap-groupe-reco .recap-groupe-nom{color:#15803D}
.recap-groupe-inchange{border-left:4px solid var(--trait)}
.recap-groupe-inchange .recap-groupe-tete{color:var(--encre-3)}

/* Un constat = UNE ligne : case, gravité, intitulé + méta en dessous, puis le chip « Reco » en bout.
   La recommandation avait sa propre ligne empilée (2026-09-08) : les deux décisions de diffusion
   restent parfaitement indépendantes, mais la seconde ne coûte plus une ligne entière. */
.recap-bloc{background:var(--carte)}
.recap-bloc+.recap-bloc{border-top:1px solid var(--trait-2)}
.recap-ligne{display:flex;align-items:center;gap:9px;padding:8px 10px;flex-wrap:nowrap;background:transparent}
.recap-ligne:hover{background:var(--sky-50)}
/* Un renvoi de contenu déjà communiqué : signalé, jamais empêché. */
.recap-ligne-renvoi{background:#FFFBEB}
.recap-ligne-renvoi:hover{background:#FEF3C7}
.recap-ligne-case{display:inline-flex;align-items:center;flex:none;cursor:pointer}
.recap-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* L'axe, et l'état de diffusion quand il apprend quelque chose. En gris : c'est du contexte, pas le
   sujet — l'intitulé du constat est la seule chose qu'on vient lire. */
.recap-ligne-meta{
  font-size:11.5px;font-weight:600;color:var(--encre-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* TOUTES les cases de sélection vivent dans la colonne de gauche (2026-09-09) : constat puis reco, dans
   cet ordre, sur les lignes comme sur les commandes de masse. Le chip Reco était en bout de ligne — il
   fallait traverser toute la largeur pour cocher deux choses de la même ligne, alors que le reste de
   l'écran se coche à gauche. Le créneau garde sa largeur même sans reco (« — »), sinon les intitulés
   ne s'aligneraient plus d'une ligne à l'autre. */
/* Rétréci de 52 à 34px avec le passage de la pastille bordée à l'ampoule seule, et CENTRÉ : les quelques
   pixels de part et d'autre séparent l'ampoule de la case du constat, qui sans cela se lisaient comme un
   seul contrôle composite. Largeur toujours fixe et réservée même sans recommandation, sinon les
   intitulés ne s'aligneraient plus d'une ligne à l'autre. */
.recap-reco-slot{flex:none;width:34px;display:flex;align-items:center;justify-content:center}
/* Même raison que l'ampoule ci-dessous : à --trait ce tiret était trop pâle pour dire quoi que ce soit.
   Un tiret est de toute façon bien plus léger qu'une icône pleine — il ne concurrence pas l'ampoule. */
.recap-reco-absente{font-size:12px;color:var(--encre-3);cursor:help}
/* Légende de la colonne, une seule fois en tête de liste : l'icône seule serait une devinette. */
.recap-legende{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:11.5px;font-weight:600;color:var(--encre-3);
}
/* La légende annonce « ampoule allumée = … » : elle montre donc l'ampoule telle qu'elle est ALLUMÉE, pas
   l'état inverse de celui qu'elle explique. Elle reprend les deux valeurs de .recap-reco-chip:has(checked)
   — --sky-600 et stroke-width 2.3 ; si l'une bouge là-bas, la faire suivre ici. */
.recap-legende svg{flex:none;width:14px;height:14px;color:var(--sky-600);stroke-width:2.3}
/* Barre de commande globale, en tête de liste et dans les mêmes colonnes que ce qu'elle commande. */
.recap-barre{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  background:var(--carte);border-bottom:1px solid var(--trait);
}
.recap-barre-nom{
  font-size:11px;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.03em;
}
/* L'AMPOULE EST LA CASE (2026-09-09). La version précédente encadrait une case à cocher ET une icône
   dans une pastille bordée : un contour autour d'un contrôle qui en est déjà un, soit trois objets
   empilés pour une seule décision — et, collé à la case du constat, un amas illisible en tête de ligne.
   La case native est donc masquée (jamais retirée : elle reste le contrôle réel, focalisable au clavier
   et lisible par un lecteur d'écran) et c'est l'AMPOULE qui porte l'état. La métaphore tombe juste :
   éteinte = la recommandation ne part pas, allumée = elle part.
   `:has(input:checked)` plutôt qu'une classe posée en JS : l'état visuel suit la case sans que personne
   n'ait à penser à le synchroniser. */
/* AUCUN DISQUE AUTOUR DE L'AMPOULE (2026-09-09, troisième passe — demande explicite). Le fond plein
   introduit la veille était deux fois plus large que la case native du constat posée à sa gauche : il
   l'écrasait, alors que les deux portent une décision de MÊME RANG (inclure le constat / inclure sa
   recommandation). Une hiérarchie visuelle qui ne correspondait à aucune hiérarchie de sens.
   Le label garde une boîte de 24px, mais elle n'est plus JAMAIS peinte : c'est une cible de clic, pas un
   objet. Sans elle l'icône seule (16px) ferait une cible inconfortable. */
.recap-reco-chip{
  flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;width:24px;height:24px;border-radius:50%;
  /* --encre-3 (#8A99AA), le gris de TEXTE secondaire — et surtout pas --trait-2 (#EDF1F5), une couleur
     de FILET : à cette valeur l'ampoule éteinte était invisible, donc personne ne pouvait deviner qu'il
     y avait là un contrôle à allumer. Même piège que celui déjà noté le 2026-09-04 (--champ identique à
     --fond) : une teinte prévue pour délimiter ne peut pas porter d'information. */
  color:var(--encre-3);transition:color .12s;
}
/* Masquée VISUELLEMENT, pas désactivée : dimension nulle mais toujours dans l'ordre de tabulation. */
.recap-reco-chip input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
/* CIBLE ÉLARGIE SANS TOUCHER À LA MISE EN PAGE (2026-09-09) : « elle est un peu dure à cliquer ». Agrandir
   la boîte elle-même aurait fonctionné, mais elle fixe la hauteur des en-têtes de groupe et de la barre de
   commande, où l'ampoule est le plus haut élément — ces rangées auraient grandi pour un problème qui ne
   les concerne pas. Un pseudo-élément débordant règle la cible seule : 24 → 34px, soit presque le double
   de surface, et zéro pixel de déplacement.
   Le débordement de 5px s'arrête EXACTEMENT au bord du créneau de 34px : il reste donc les 9px de `gap`
   entiers entre cette cible et la case du constat à gauche comme la pastille de gravité à droite — aucune
   zone cliquable ne mord sur celle d'un voisin, et l'infobulle de la pastille reste atteignable. Ne pas
   pousser au-delà de 5px sans élargir le créneau d'autant. */
.recap-reco-chip::before{content:'';position:absolute;inset:-5px;border-radius:50%}
.recap-reco-chip svg{flex:none;width:16px;height:16px;transition:stroke-width .12s}
/* Survol dans la famille sky, comme tout ce qui est actionnable sur ce site (règle de grammaire visuelle
   du 2026-09-08). Plus de pastille de survol : la ligne entière passe déjà en --sky-50, un rond de fond
   par-dessus faisait doublon — le changement de teinte de l'icône suffit à dire « cliquable ». */
.recap-reco-chip:hover{color:var(--sky-700)}
/* ALLUMÉE = CONTOUR BLEU PLUS GRAS. Le verre du bulbe n'est PAS rempli (demande explicite du
   2026-09-09 : « colorie pas l'intérieur de la tête d'ampoule »), et le disque de fond a été retiré à la
   passe précédente. Il reste donc à faire tenir un état binaire sans aplat.
   L'exigence de la 2ᵉ passe ne change pas — un état binaire doit se lire à la VALEUR, pas à la seule
   teinte — alors elle est portée par les deux leviers qui restent :
     • la GRAISSE : 1.9 → 2.3, soit ~20 % d'encre en plus sur le même tracé. C'est ce que fait une police
       en passant en gras, et ça se voit en niveaux de gris ;
     • la VALEUR de la couleur : --sky-600 (#0284C7) est franchement plus sombre que le gris --encre-3
       (#8A99AA) de l'état éteint. Le bleu n'est donc pas seulement une AUTRE teinte, c'est une teinte
       plus foncée — sans quoi on retomberait sur la version rejetée le 2026-09-09 au matin.
   L'écart reste plus faible qu'avec un aplat : si l'ampoule allumée redevient difficile à repérer d'un
   coup d'œil sur une liste dense, c'est ici qu'il faut regarder, et le levier restant est la graisse.
   `--sky-600` : le bleu de marque, et depuis ce jour aussi celui des cases natives (accent-color sur
   :root) — les deux contrôles voisins de la ligne partagent donc exactement la même couleur. */
.recap-reco-chip:has(input:checked){color:var(--sky-600)}
.recap-reco-chip:has(input:checked) svg{stroke-width:2.3}
.recap-reco-chip:has(input:checked):hover{color:var(--sky-700)}
.recap-reco-chip.recap-ligne-renvoi{color:#D97706}
.recap-reco-chip.recap-ligne-renvoi:hover{color:#B45309}
/* La case étant masquée, l'anneau de focus doit être porté par le label — sans quoi la navigation au
   clavier deviendrait invisible sur ce contrôle. */
.recap-reco-chip:has(input:focus-visible){outline:2px solid var(--sky-600);outline-offset:1px}
/* RÈGLE DE FORME DES PASTILLES (posée le 2026-09-08, après une dérive constatée à l'usage) :
     • ROND  = la GRAVITÉ d'un constat — .badge-gravite (son point), .recap-gravite, .suivi-ligne-crit,
               .exp-audit-constat-pt ;
     • CARRÉ = un AXE ou une catégorie — .exp-poste-pt.
   Deux formes, deux sens. Trois de ces pastilles avaient dérivé vers le carré par simple recopie d'un
   voisin, ce qui rendait le code couleur illisible : à gravité égale, la forme changeait d'un écran à
   l'autre. Toute nouvelle pastille doit se ranger dans l'une des deux catégories, jamais inventer une
   troisième forme. */
.recap-gravite{flex:none;width:10px;height:10px;border-radius:50%;cursor:help}
/* Enfant de .recap-ligne-corps (colonne) depuis le 2026-09-09 : c'est le corps qui prend la largeur
   restante, plus l'intitulé lui-même — un flex:1 ici l'étirerait en hauteur. */
.recap-ligne-texte{
  font-size:13.5px;font-weight:600;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* (.recap-pastille* retirées le 2026-09-09 : une pastille d'état sur CHAQUE ligne, alors que le groupe
   dit déjà la même chose, était le bruit qui rendait la liste illisible. L'information n'est pas perdue,
   elle est remontée d'un cran — dans le titre du groupe — et ne redescend en méta que quand elle
   apprend quelque chose de plus.) */

/* Le reste de l'audit, replié : la liberté de tout reprendre ne doit pas coûter un écran illisible à
   l'arrivée. La section de la période reste le sujet, celle-ci est un tiroir. */
.recap-autres-bascule{margin-top:10px}
.recap-autres-note{margin:8px 0 0;font-size:12px;color:var(--encre-3);line-height:1.5}

.recap-avertissement{margin:10px 0 0;font-size:12.5px;color:var(--encre-3);line-height:1.5}
.recap-avertissement-renvoi{
  padding:8px 11px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--r-champ);color:#B45309;font-weight:600;
}

/* Avertissement d'honnêteté du bilan : sans rapport d'audit émis, il n'existe pas de point de départ figé
   et le document ne peut raconter aucune évolution. Dit avant la génération, pas après. */
.bilan-note-t0{
  margin:12px 0 0;padding:10px 12px;font-size:12.5px;line-height:1.5;
  background:#FFF7ED;border:1px solid #FCD9A8;border-radius:var(--r-champ);color:#B45309;
}

/* Point d'avancement déjà envoyé (2026-09-08) : réduit à une ligne verte. Même grammaire que .rapport-emis
   ci-dessous, mais en "traité" plutôt qu'en "livrable" — d'où le vert et l'icône de validation. */
.rapport-traite{margin-bottom:10px;border-left:4px solid #16A34A;background:#F7FCF9}
.rapport-traite-corps{display:flex;align-items:center;gap:12px;padding-top:14px;flex-wrap:wrap}
.rapport-traite-ico{
  flex:none;width:22px;height:22px;border-radius:50%;background:#16A34A;color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.rapport-traite-texte{flex:1;min-width:180px}
.rapport-traite-titre{margin:0;font-size:13.5px;font-weight:700;color:#15803D}
.rapport-traite-meta{margin:2px 0 0;font-size:12px;color:var(--encre-3)}

/* Rapports émis (onglet 3, 2026-09-08) — une ligne par document figé, en tête d'onglet. Volontairement
   sobre et dense : c'est une pièce de dossier qu'on retrouve, pas une carte à contempler. */
.rapport-emis{margin-bottom:10px;border-left:4px solid var(--sky-600)}
.rapport-emis-corps{display:flex;align-items:center;gap:12px;padding-top:14px;flex-wrap:wrap}
.rapport-emis-ico{font-size:20px;line-height:1;flex:none}
.rapport-emis-texte{flex:1;min-width:180px}
.rapport-emis-titre{margin:0;font-size:14px;font-weight:700;color:var(--encre)}
.rapport-emis-meta{margin:2px 0 0;font-size:12px;color:var(--encre-3)}

/* ============ RAPPORT D'AUDIT — feuille dédiée (2026-09-08) ============
   Le rapport partageait la feuille des points d'avancement, faite pour une entête et des listes à puces.
   Un document remis au client a besoin d'une page de garde et d'une hiérarchie qui lui est propre.
   Principe de mise en page : le fait d'abord (constat + preuve), la recommandation ensuite, l'analyse en
   retrait — la typographie doit dire au lecteur ce qui est constaté et ce qui est interprété. */
.exp-ra-garde{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:245mm;padding:0;
}
.exp-ra-garde-logo{width:150px;height:auto;margin-bottom:0}
.exp-ra-garde-bloc{margin-top:auto;padding-bottom:26px;border-bottom:3px solid #111C2B}
.exp-ra-garde-sur{
  margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5B6B7F;
}
.exp-ra-garde-bloc h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#111C2B}
.exp-ra-garde-sous{margin:8px 0 0;font-size:14px;font-weight:600;color:#5B6B7F}
/* Accroche de la mission (cadre.pitch) : un texte fini, pas une donnée — d'où l'italique et le filet,
   qui le distinguent des lignes de la fiche juste en dessous. Vide = invisible, pas de marge fantôme. */
.exp-ra-garde-accroche{
  margin:14px 0 0;padding-left:12px;border-left:2px solid #29B6F6;
  font-size:12.5px;font-style:italic;line-height:1.55;color:#31435A;
}
.exp-ra-garde-accroche:empty{display:none}
.exp-ra-garde-infos{margin-top:26px}
.exp-ra-garde-pied{margin-top:auto;padding-top:16px;border-top:1px solid #DDE4EB}
/* Répartition par axe dans la Synthèse (2026-09-09) : où le problème se concentre, en données brutes.
   Une ligne par axe renseigné, les gravités en pastilles colorées à droite. Jamais rédigé par l'agent. */
.exp-ra-axes-repartition{margin:16px 0 0;border-top:1px solid #E4EAF0}
.exp-ra-axe-ligne{
  display:flex;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid #EFF3F7;
  break-inside:avoid;
}
.exp-ra-axe-nom{flex:1;min-width:0;font-size:12px;font-weight:700;color:#111C2B}
.exp-ra-axe-chips{display:flex;flex-wrap:wrap;gap:5px 10px;justify-content:flex-end}
.exp-ra-axe-chip{font-size:11px;font-weight:700;white-space:nowrap}
.exp-ra-axe-vide{color:#8A97A8;font-weight:600;font-style:italic}
/* « Aucun constat établi sur cet axe » : un résultat, pas un trou de rédaction — d'où le ton neutre. */
.exp-ra-ras{color:#5B6B7F;font-style:italic}
.exp-ra-confid{margin:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#B91C1C}
.exp-ra-destinataires{margin:6px 0 0;font-size:10px;color:#5B6B7F}
.exp-ra-destinataires b{color:#111C2B}

/* Paires étiquette/valeur (garde, cadre de la mission, éléments relevés) — une grille plutôt qu'un
   tableau : pas de bordures à gérer, et ça se replie proprement quand une valeur est longue. */
.exp-ra-infos{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:11px}
.exp-ra-info{display:contents}
.exp-ra-info b{font-weight:700;color:#5B6B7F;white-space:nowrap}
.exp-ra-info span{color:#111C2B;white-space:pre-wrap}
.exp-ra-releves{margin-top:8px;padding:8px 10px;background:#F6F8FA;border-radius:6px}

.exp-ra-section{margin-bottom:16px;break-inside:auto}
.exp-ra-section h2{font-size:12px;color:#111C2B;border-bottom-width:2px;border-bottom-color:#111C2B}
.exp-ra-para{margin:8px 0 0;font-size:11px;line-height:1.55;color:#111C2B;white-space:pre-wrap}
.exp-ra-bloc{margin-top:9px;break-inside:avoid}
.exp-ra-bloc b{display:block;font-size:11.5px;color:#111C2B}
.exp-ra-bloc p{margin:2px 0 0;font-size:11px;line-height:1.5;color:#5B6B7F}

/* Un constat : le fait et sa preuve en noir (ce qui est établi), la recommandation en bleu (ce qui est
   proposé), l'analyse en gris et en retrait (ce qui est interprété). Jamais coupé entre deux pages. */
.exp-ra-constat{
  margin-top:10px;padding:7px 0 7px 10px;border-left:3px solid #94A3B8;break-inside:avoid;
}
.exp-ra-constat-tete{display:flex;align-items:baseline;gap:8px}
.exp-ra-gravite{
  flex:none;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.exp-ra-constat-texte{font-size:11.5px;font-weight:700;color:#111C2B;line-height:1.4}
.exp-ra-preuve{margin:4px 0 0;font-size:10.5px;line-height:1.5;color:#111C2B}
.exp-ra-preuve b{color:#5B6B7F}
.exp-ra-reco{margin:4px 0 0;font-size:10.5px;line-height:1.5;color:#0369A1;font-weight:600}
.exp-ra-reco b{font-weight:800}
.exp-ra-analyse{margin:4px 0 0 10px;font-size:10.5px;line-height:1.5;color:#5B6B7F;font-style:italic}

.exp-ra-priorite{display:flex;gap:9px;margin-top:8px;break-inside:avoid}
.exp-ra-priorite-rang{
  flex:none;width:17px;height:17px;border-radius:50%;background:#111C2B;color:#fff;
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.exp-ra-priorite b{font-size:11.5px;color:#111C2B}
.exp-ra-priorite p{margin:2px 0 0;font-size:10.5px;line-height:1.5;color:#5B6B7F}

.exp-ra-plan-axe{margin-top:10px;break-inside:avoid}
.exp-ra-plan-axe>b{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#5B6B7F}
.exp-ra-action{margin-top:5px;padding-left:10px;border-left:2px solid #DDE4EB;break-inside:avoid}
.exp-ra-action-texte{margin:0;font-size:11px;font-weight:600;color:#111C2B;line-height:1.4}
.exp-ra-action-meta{margin:1px 0 0;font-size:10px;color:#5B6B7F}
.exp-ra-action-critere{margin:1px 0 0;font-size:10px;color:#5B6B7F}
.exp-ra-action-critere b{color:#111C2B}
.exp-audit-constat{padding:7px 0;border-bottom:1px dotted #EDF1F5}
.exp-audit-constat-tete{display:flex;align-items:center;gap:8px}
/* Ronde comme toutes les pastilles de gravité (voir .recap-gravite) — celle-ci marque la gravité d'un
   constat sur la feuille imprimée. À ne pas confondre avec .exp-poste-pt, carrée, qui marque un AXE. */
.exp-audit-constat-pt{width:9px;height:9px;border-radius:50%;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.exp-audit-constat-nom{flex:1;font-size:12px;font-weight:600;color:#111C2B}
.exp-audit-constat-axe{font-size:9.5px;font-weight:600;color:#8A99AA;text-transform:uppercase;letter-spacing:.04em}
.exp-audit-constat-detail{margin-top:2px;margin-left:17px;font-size:10px;color:#5B6B7F}
.exp-audit-constat-detail b{font-weight:700;color:#3A4657}

/* ============ FEUILLE D'EXPORT RAPPORTS (onglet Rapports : recap + rapport complet/synthèse) ======= */
.exp-logo{height:26px;margin-right:10px;flex:none}
.exp-rapport-liste{margin:0;padding-left:18px;font-size:11.5px;color:#111C2B;line-height:1.65}
.exp-rapport-liste li{margin-bottom:4px}
.exp-rapport-vide{font-size:11px;color:#8A99AA;font-style:italic;margin:0}
.exp-rapport-synthese{font-size:11.5px;color:#5B6B7F;line-height:1.55;margin-bottom:10px}
.exp-rapport-axe-titre{font-size:13px;font-weight:800;color:#111C2B;margin:20px 0 8px;padding-bottom:7px;border-bottom:2px solid #111C2B;break-after:avoid;page-break-after:avoid}
.exp-rapport-constat{padding:8px 0;border-bottom:1px dotted #EDF1F5;break-inside:avoid;page-break-inside:avoid}
.exp-rapport-constat-tete{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.exp-rapport-constat-pt{width:9px;height:9px;border-radius:3px;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.exp-rapport-constat-titre{flex:1;font-size:12.5px;font-weight:700;color:#111C2B}
.exp-rapport-constat-texte{font-size:11px;color:#3A4657;line-height:1.55;margin:2px 0}
.exp-rapport-constat-reco{font-size:11px;color:#0369A1;line-height:1.5;margin-top:3px}
.exp-rapport-constat-reco b{font-weight:700}
.exp-rapport-pointscles{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:12px 0 18px}
.exp-rapport-pointscle{background:#F6F8FA;border-radius:10px;padding:9px 11px}
.exp-rapport-pointscle b{display:block;font-size:9.5px;font-weight:700;color:#5B6B7F;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.exp-rapport-pointscle span{font-size:11px;color:#111C2B;line-height:1.4}

/* Risque inhérent/résiduel dans la feuille d'export "Tableau de bord" (onglet Résultats, 2026-09-02) —
   même séparation visuelle que côté écran (.resultats-risques) : deux cartes teintées à part des tuiles
   .exp-rapport-pointscle ci-dessus, couleur posée en inline par auditRenderRapport (INFO_RISQUE_INHERENT
   fixe en rouge, auditNiveauRisqueInfo pour le résiduel). print-color-adjust nécessaire pour que le fond
   coloré survive à l'impression (comportement par défaut du navigateur : l'ignorer pour économiser l'encre). */
.exp-risques{display:flex;gap:12px;margin:0 0 18px}
.exp-risque-carte{flex:1;border-radius:16px;padding:16px 18px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.exp-risque-carte .lab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.exp-risque-carte .chiffre{display:flex;align-items:baseline;gap:4px;margin:4px 0 6px;font-size:50px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.exp-risque-carte .chiffre small{font-size:19px;font-weight:700;opacity:.65}
.exp-risque-carte .note{font-size:12.5px;line-height:1.55}

/* ============ PLANIFICATION D'UNE ACTION (onglet Plan d'actions) ============ */
/* Qui / pour quand / critère d'efficacité — le trio sans lequel l'onglet Suivi ne peut rien calculer.
   Posé en tête du corps de carte, avant les étapes : on s'engage d'abord, on découpe ensuite. */
.audit-plan-bloc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 14px;
  padding:12px;margin-bottom:13px;background:var(--champ);border:1px solid var(--trait-2);border-radius:var(--r-champ);
}
.audit-plan-champ{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0}
.audit-plan-champ-large{grid-column:1 / -1}
.audit-plan-champ > label{font-size:12px;font-weight:700;color:var(--encre-2);text-transform:uppercase;letter-spacing:.02em}
.audit-plan-aide{font-weight:500;text-transform:none;letter-spacing:0;color:var(--encre-3)}
.audit-plan-champ .saisie{background:var(--carte)}
.audit-plan-champ input[type=date]{
  width:100%;border:0;background:transparent;padding:8px 10px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--encre);
}
.audit-plan-champ input[type=date]:focus{outline:none}
.audit-plan-champ input[type=text]{padding:8px 10px;font-size:14px}
/* min-height : filet de sécurité si autoGrandir() a mesuré le champ pendant que la carte était repliée
   (scrollHeight ≈ 0 en display:none). Le JS re-mesure au dépliage, mais sans ce plancher un échec de
   mesure écrasait le texte sur une demi-ligne illisible au lieu de simplement le tronquer proprement. */
.audit-plan-champ textarea{
  width:100%;border:0;background:transparent;padding:8px 10px;resize:none;overflow:hidden;min-height:36px;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--encre);line-height:1.45;
}
.audit-plan-champ textarea:focus{outline:none}
.audit-plan-champ textarea::placeholder,.audit-plan-champ input::placeholder{font-weight:400;color:var(--encre-3)}

/* ============ ONGLET SUIVI : COCKPIT DE PILOTAGE ============ */
/* Bandeau RAG — 4 chiffres qui ouvrent une revue d'avancement. Une tuile à zéro reste visible en grisé :
   « 0 en retard » est une information, pas un vide à masquer. */
.suivi-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:14px}
.suivi-kpi{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--carte);
  border:1.5px solid var(--trait);border-left-width:5px;border-radius:var(--r-carte);
}
.suivi-kpi-valeur{font-size:30px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.suivi-kpi-label{font-size:13.5px;font-weight:700;color:var(--encre)}
.suivi-kpi-aide{font-size:11.5px;color:var(--encre-3)}
.suivi-kpi-retard{border-left-color:#EF4444}
.suivi-kpi-retard .suivi-kpi-valeur{color:#B91C1C}
.suivi-kpi-proche{border-left-color:#F59E0B}
.suivi-kpi-proche .suivi-kpi-valeur{color:#B45309}
.suivi-kpi-averifier{border-left-color:#F59E0B}
.suivi-kpi-averifier .suivi-kpi-valeur{color:#B45309}
.suivi-kpi-encours{border-left-color:var(--sky-600)}
.suivi-kpi-encours .suivi-kpi-valeur{color:var(--sky-700)}
.suivi-kpi-solde{border-left-color:#16A34A}
.suivi-kpi-solde .suivi-kpi-valeur{color:#15803D}
.suivi-kpi-vide{border-left-color:var(--trait)}
.suivi-kpi-vide .suivi-kpi-valeur{color:var(--encre-3)}

/* Barre en 3 segments : soldé / réalisé mais pas encore vérifié / reste. C'est ce delta orange qui porte
   tout le message de l'écran — une action cochée n'est pas une action dont on a prouvé l'effet. */
.suivi-progression{padding:13px 16px;margin-bottom:16px;background:var(--carte);border:1.5px solid var(--trait);border-radius:var(--r-carte)}
.suivi-progression-tete{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--encre-2)}
.suivi-progression-piste{display:flex;height:10px;background:var(--champ);border-radius:999px;overflow:hidden}
.suivi-progression-solde{background:#16A34A;transition:width .2s}
.suivi-progression-fait{background:#F59E0B;transition:width .2s}

/* Groupes par urgence */
.suivi-groupe{margin-bottom:16px}
/* En-tête cliquable matérialisé au survol : sans fond ni bordure, un groupe replié se lisait comme un
   simple titre de section et rien ne disait qu'il s'ouvrait (retour utilisateur, 2026-09-07). */
.suivi-groupe-tete{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:transparent;
  border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s;
}
.suivi-groupe-tete:hover{background:var(--sky-50)}
.suivi-groupe-titre{font-size:15px;font-weight:800;color:var(--encre)}
.suivi-groupe-compte{
  flex:none;min-width:24px;padding:2px 8px;border-radius:999px;background:var(--champ);
  border:1px solid var(--trait);font-size:12px;font-weight:800;color:var(--encre-2);text-align:center;
}
.suivi-groupe-note{flex:1;min-width:0;font-size:12px;color:var(--encre-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Convention arborescence : fermé = pointe vers la droite (vers le titre), ouvert = pointe vers le bas
   (vers le contenu qu'il révèle). Le SVG de base est un chevron bas, donc c'est l'état REPLIÉ qui tourne. */
.suivi-groupe-chevron{flex:none;display:flex;color:var(--encre-3)}
.suivi-groupe-chevron svg{width:18px;height:18px;transition:transform .15s}
.suivi-groupe.repli .suivi-groupe-chevron svg{transform:rotate(-90deg)}
.suivi-groupe.repli .suivi-groupe-corps{display:none}
.suivi-groupe-retard .suivi-groupe-titre,
.suivi-groupe-retard .suivi-groupe-chevron{color:#B91C1C}
.suivi-groupe-retard .suivi-groupe-compte{background:#FDECEC;border-color:#F5C6C6;color:#B91C1C}
.suivi-groupe-retard .suivi-groupe-tete:hover{background:#FDECEC}
/* "Réalisées, à vérifier" : accentué comme les retards, en ambre — c'est le second groupe à traiter en
   revue, et le seul dont le traitement fait effectivement baisser le risque résiduel. */
.suivi-groupe-a_verifier .suivi-groupe-titre,
.suivi-groupe-a_verifier .suivi-groupe-chevron{color:#B45309}
.suivi-groupe-a_verifier .suivi-groupe-compte{background:#FFF7ED;border-color:#FCD9A8;color:#B45309}
.suivi-groupe-a_verifier .suivi-groupe-tete:hover{background:#FFF7ED}

/* Ligne d'action : tout l'essentiel sur une ligne, le détail au clic. */
.suivi-ligne{background:var(--carte);border:1.5px solid var(--trait);border-radius:var(--r-champ);margin-bottom:8px;overflow:hidden}
.suivi-ligne.ouvert{border-color:var(--sky-300);box-shadow:0 0 0 3px rgba(2,132,199,.08)}
.suivi-ligne-tete{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
.suivi-ligne-tete:hover{background:var(--sky-50)}
/* Le point de feu tricolore a été retiré (2026-09-07) : muet, collé au carré de criticité au point de se
   lire comme un seul signal, et redondant avec la pastille d'échéance (même couleur, plus le texte) comme
   avec le regroupement par urgence. Les classes .suivi-feu-* restent portées par la ligne — elles teintent
   la pastille d'échéance ci-dessous et barrent les lignes soldées. Il ne reste donc qu'UNE pastille colorée
   par ligne, le carré de criticité, seule information que le regroupement ne donne pas. */
/* Ronde : voir la règle de forme en tête de .recap-gravite — une pastille de GRAVITÉ est ronde partout
   dans le module. Elle était carrée ici par accident d'écriture, pas par intention. */
.suivi-ligne-crit{flex:none;width:11px;height:11px;border-radius:50%;cursor:help}
.suivi-ligne-texte{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Voir « ON NE BARRE RIEN » plus haut. Une action soldée vit dans le groupe « Soldées » ET porte un badge
   vert « Soldé le 08/09 » : le barré était le troisième signal pour dire la même chose, et le seul des
   trois à coûter la lisibilité de l'intitulé — c'est-à-dire de la seule chose qu'on vient lire. */
.suivi-feu-solde .suivi-ligne-texte{color:var(--encre-2)}
.suivi-chip{
  flex:none;padding:3px 9px;border-radius:999px;background:var(--champ);border:1px solid var(--trait);
  font-size:11.5px;font-weight:700;color:var(--encre-2);white-space:nowrap;
}
.suivi-chip-pilote.vide{color:var(--encre-3);font-weight:500;font-style:italic}
.suivi-feu-retard .suivi-chip-echeance{background:#FDECEC;border-color:#F5C6C6;color:#B91C1C}
.suivi-feu-proche .suivi-chip-echeance{background:#FFFBEB;border-color:#FDE68A;color:#B45309}
.suivi-feu-sans-date .suivi-chip-echeance{border-style:dashed;color:var(--encre-3)}
/* Réalisée, efficacité pas encore constatée : ambre, exactement comme le segment "réalisé" de la barre
   d'avancement, le chip "à vérifier" du tableau de bord et la ligne "en attente de vérification" sous le
   risque résiduel. Un seul code couleur pour un seul état dans tout le module. */
.suivi-feu-a-verifier .suivi-chip-echeance{background:#FFF7ED;border-color:#FCD9A8;color:#B45309}
/* Barre d'avancement + repère de délai (2026-09-07). Le repère marque la part du délai déjà consommée
   (entre la création de l'action et son échéance) : remplissage à DROITE du repère = en avance, à GAUCHE =
   en dérive. Ça répond à "est-on dans les temps ?" en confrontant le travail fait au temps écoulé, là où un
   simple feu tricolore ne regardait que le calendrier. Pas d'overflow:hidden : le repère dépasse
   volontairement la barre en hauteur pour rester visible. */
.suivi-ligne-barre{position:relative;flex:none;width:54px;height:5px;border-radius:999px;background:var(--champ)}
.suivi-ligne-barre i{display:block;height:100%;background:var(--sky-500);border-radius:999px;transition:width .2s,background .2s}
/* Teinte ambrée du remplissage quand l'écart est réel (plus de 10 points de retard sur le délai consommé) :
   sans ça il faudrait comparer deux positions à l'œil pour repérer une dérive dans une longue liste. */
.suivi-ligne-barre.derive i{background:#F59E0B}
.suivi-ligne-repere{
  position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;
  background:var(--encre-2);border-radius:1px;
}
/* Le rendu visuel du badge vit dans .audit-statut-badge (partagé avec la carte du Plan d'actions) — ici
   uniquement son comportement dans la ligne flex. */
.suivi-ligne-statut{flex:none}
.suivi-ligne-chevron{flex:none;display:flex;color:var(--encre-3)}
.suivi-ligne-chevron svg{width:17px;height:17px;transition:transform .15s}
.suivi-ligne.ouvert .suivi-ligne-chevron svg{transform:rotate(180deg)}
@media(max-width:760px){
  .suivi-ligne-texte{white-space:normal}
  .suivi-ligne-tete{flex-wrap:wrap}
  .suivi-ligne-barre{display:none}
}

.suivi-ligne-detail{padding:4px 13px 14px;border-top:1px solid var(--trait-2)}
.suivi-detail-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 14px;margin:13px 0}
/* Pilote et échéance sont posés dans le Plan d'actions : ici ils s'affichent, ils ne s'éditent pas. Rendu
   volontairement en texte plein (pas un champ grisé) — un champ désactivé suggère un contrôle cassé, une
   valeur en clair dit "c'est une information, elle se modifie ailleurs". */
.suivi-lecture{margin:0;padding:8px 2px;font-size:14px;font-weight:600;color:var(--encre)}
.suivi-lecture.vide{font-weight:500;font-style:italic;color:var(--encre-3)}
.suivi-lecture-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.suivi-btn-reporter{padding:4px 0;white-space:nowrap}

/* Report d'échéance : formulaire en place + historique tracé */
.suivi-chip-report{background:#FFFBEB;border-color:#FDE68A;color:#B45309;cursor:help}
.suivi-report-zone{margin-top:2px}
.suivi-report-form{
  padding:12px 14px;margin-bottom:12px;border:1.5px solid #FDE68A;background:#FFFBEB;
  border-radius:var(--r-champ);
}
.suivi-report-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 14px}
.suivi-report-champ-raison{grid-column:span 2}
@media(max-width:620px){.suivi-report-champ-raison{grid-column:auto}}
.suivi-report-form .saisie{background:var(--carte)}
.suivi-report-form input{width:100%;border:0;background:transparent;padding:8px 10px;font-family:inherit;font-size:14px;font-weight:600;color:var(--encre)}
.suivi-report-form input:focus{outline:none}
.suivi-report-form input::placeholder{font-weight:400;color:var(--encre-3)}
.suivi-report-boutons{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.suivi-report-histo{padding:10px 12px;border-left:3px solid #FDE68A;background:var(--champ);border-radius:0 8px 8px 0}
.suivi-report-titre{display:block;font-size:12px;font-weight:700;color:var(--encre-2);margin-bottom:6px}
.suivi-report-entree{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;line-height:1.6}
.suivi-report-dates{flex:none;font-weight:700;color:#B45309;font-variant-numeric:tabular-nums}
.suivi-report-raison{color:var(--encre-2)}
.suivi-segments{width:fit-content}
.suivi-lien-constat{display:block;margin-bottom:10px;text-align:left;padding:4px 0}

/* Panneau de vérification d'efficacité — le "Check" du PDCA, l'étape que tout le monde saute. */
.suivi-verif{margin-top:13px}
.suivi-verif-bloc{padding:12px 14px;border-radius:var(--r-champ);border:1.5px solid var(--trait);background:var(--champ)}
.suivi-verif-bloc.a-verifier{border-color:#FDE68A;background:#FFFBEB}
.suivi-verif-bloc.soldee{border-color:#BBF7D0;background:#F0FDF4}
.suivi-verif-tete{font-size:13px;font-weight:800;color:var(--encre);margin-bottom:9px}
.suivi-verif-bloc.soldee .suivi-verif-tete{color:#15803D;margin-bottom:6px}
.suivi-verif-label{display:block;font-size:11px;font-weight:800;color:var(--encre-3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.suivi-verif-critere p{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--encre-2);line-height:1.5}
.suivi-verif-manquant{font-weight:500!important;color:#B45309!important}
.suivi-verif-aide{margin:0 0 10px;font-size:12.5px;color:var(--encre-3)}
/* Panneau « pas encore réalisée » : les contrôles sont PRÉSENTS mais inertes. C'est cette présence qui
   supprime le saut de hauteur au moment où l'on coche la dernière étape (2026-09-09) — avant, le petit
   bloc d'attente était remplacé d'un coup par un grand bloc à zone de saisie et deux boutons.
   Ils s'annoncent comme inertes (champ en pointillés, boutons grisés) et la ligne d'aide dit pourquoi. */
.suivi-verif-bloc.attente .saisie{background:transparent;border-style:dashed}
.suivi-verif textarea:disabled{color:var(--encre-3);cursor:not-allowed}
.suivi-verif-note{margin:0 0 10px;font-size:13px;color:var(--encre-2);line-height:1.5}
.suivi-verif .saisie{background:var(--carte);margin-bottom:10px}
.suivi-verif textarea{
  width:100%;border:0;background:transparent;padding:8px 10px;resize:none;overflow:hidden;
  font-family:inherit;font-size:13.5px;color:var(--encre);line-height:1.45;
}
.suivi-verif textarea:focus{outline:none}
.suivi-verif-boutons{display:flex;gap:9px;flex-wrap:wrap}