/* ═══════════════════════════════════════════════════════════════════════
   STUDIO S.C AUDITOR — FEUILLE DE STYLE

   Toutes les couleurs sont déclarées ici. Aucune valeur chromatique en dur
   ailleurs, ni dans index.html, ni dans app.js.

   Les ratios notés en commentaire sont calculés selon la formule WCAG 2.1
   (luminance relative), pas estimés. Seuils : 4.5:1 pour le corps de texte,
   3:1 pour le grand texte et les limites de composants (1.4.11).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PROFONDEUR ────────────────────────────────────────────────────────
     Cinq niveaux du plus sombre au plus clair. C'est l'empilement qui crée
     la profondeur : page < surface < surface surélevée < survol.          */
  --fond-0: #0D0C0B;      /* fond de page                                  */
  --fond-1: #171514;      /* surfaces : cartes, panneaux, rapport          */
  --fond-2: #211E1C;      /* surfaces surélevées : champs, blocs, code     */
  --fond-3: #2C2825;      /* survol, état actif                            */
  --separateur: #35302C;  /* filets purement décoratifs, hors seuil WCAG   */
  --bordure: #756C62;     /* limite de composant (champ, case) :
                             3.79:1 / fond-0 · 3.53:1 / fond-1 · 3.22:1 / fond-2
                             seuil WCAG 1.4.11 = 3:1 → conforme            */

  /* ── TEXTE ─────────────────────────────────────────────────────────────
     Trois niveaux de contraste. Ratios donnés dans l'ordre
     fond-0 / fond-1 / fond-2 / fond-3.                                    */
  --texte-1: #F5F0E8;     /* principal   17.23 / 16.04 / 14.61 / 12.88  AA */
  --texte-2: #BDB3A6;     /* secondaire   9.46 /  8.81 /  8.02 /  7.07  AA */
  --texte-3: #9E9488;     /* atténué      6.56 /  6.11 /  5.56 /  4.90  AA */

  /* ── MARQUE ────────────────────────────────────────────────────────────
     Le doré est un accent, pas une couleur de remplissage : actions
     primaires, onglet actif, rangs de priorité, focus, logo.              */
  --or: #E8A817;          /* 9.35 / 8.71 / 7.93 / 6.99                  AA */
  --or-fonce: #C9920E;    /* dégradé des boutons primaires uniquement      */
  --sur-or: #12100E;      /* texte sur aplat doré :
                             9.08:1 sur --or · 6.87:1 sur --or-fonce    AA */
  --or-voile: rgba(232,168,23,0.14);  /* fond d'accent discret             */
  --or-trait: rgba(232,168,23,0.28);  /* liseré d'accent                   */

  /* ── STATUTS ───────────────────────────────────────────────────────────
     Quatre teintes lisibles sur fond sombre. La couleur ne porte JAMAIS
     l'information seule : chaque statut a aussi une forme d'icône propre
     et un libellé. Simulation faite : en tritanopie bloquant et majeur se
     confondent (écart de luminance 0.04), en deutéranopie mineur et
     conforme se rapprochent (0.10). D'où la forme distincte.              */
  --bloquant: #FF7B6B;    /* 7.72 / 7.19 / 6.55 / 5.77                  AA */
  --majeur:   #FFB454;    /* 11.08 / 10.32 / 9.40 / 8.29                AA */
  --mineur:   #79B8FF;    /* 9.41 / 8.77 / 7.98 / 7.04                  AA */
  --conforme: #4FD1A0;    /* 10.20 / 9.50 / 8.65 / 7.63                 AA */
  --neutre:   #9E9488;    /* non évaluable — identique à --texte-3         */

  /* Fonds de badge : la teinte à 16 % sur la surface. Ratio du texte de
     même teinte posé dessus, mesuré sur fond-1 puis fond-2.               */
  --bloquant-voile: rgba(255,123,107,0.16);  /* 5.61 / 5.00             AA */
  --majeur-voile:   rgba(255,180,84,0.16);   /* 7.44 / 6.59             AA */
  --mineur-voile:   rgba(121,184,255,0.16);  /* 6.51 / 5.81             AA */
  --conforme-voile: rgba(79,209,160,0.16);   /* 6.99 / 6.23             AA */
  --neutre-voile:   rgba(158,148,136,0.14);

  /* ── TYPOGRAPHIE ───────────────────────────────────────────────────────
     Paliers réellement distincts, pas des tailles voisines.               */
  --t-module: 20px;    /* titre de module, titre de synthèse               */
  --t-section: 18px;   /* titre de carte, titre de priorité                */
  --t-critere: 17px;   /* nom de critère                                   */
  --t-corps: 16px;     /* constat, correction, texte courant               */
  --t-petit: 13px;     /* légendes, sous-titres                            */
  --t-meta: 11px;      /* étiquettes en capitales, badges                  */

  /* ── FORMES ────────────────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --largeur-max: 760px;   /* borne le contenu sur grand écran              */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══ BASE ═══ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--fond-0);color:var(--texte-1);font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--separateur);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--bordure)}
button{font-family:inherit;cursor:pointer;border:none;-webkit-appearance:none;color:inherit}
textarea,input{font-family:inherit;-webkit-appearance:none}
/* Focus visible : l'app audite l'accessibilité, elle se l'applique. */
:is(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:var(--r-xs)}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes splashPulse{0%,100%{opacity:0.6;transform:scale(0.97)}50%{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ═══ SPLASH ═══ */
#splash{position:fixed;inset:0;background:var(--fond-0);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;transition:opacity 0.5s}
#splash.hide{opacity:0;pointer-events:none}
#splash img{width:140px;animation:splashPulse 1.5s ease infinite}
#splash p{color:var(--or);font-size:var(--t-corps);font-weight:500;margin-top:16px}

/* ═══ EN-TÊTE ═══ */
.header{display:flex;align-items:center;gap:11px;padding:calc(11px + var(--safe-top)) 16px 11px;background:var(--fond-1);border-bottom:1px solid var(--separateur);flex-shrink:0;position:relative;z-index:50}
.logo-mark{width:38px;height:38px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--fond-2)}
.logo-mark img{width:100%;height:100%;object-fit:cover}
.header-text h1{font-size:15px;font-weight:700;letter-spacing:-0.3px;color:var(--texte-1)}
.header-text h1 span{color:var(--or)}
.header-text p{font-size:var(--t-meta);color:var(--texte-3);margin-top:2px;letter-spacing:0.6px;text-transform:uppercase}

/* ═══ BANNIÈRE D'INSTALLATION ═══ */
#installBanner{display:none;margin:8px 14px 0;padding:11px 14px;background:var(--fond-1);border:1px solid var(--or-trait);border-radius:var(--r-md);align-items:center;gap:10px;flex-shrink:0}
#installBanner.show{display:flex}
#installBanner p{flex:1;font-size:var(--t-petit);color:var(--texte-2);line-height:1.45}
#installBanner p strong{color:var(--or)}
#installBanner button{padding:8px 15px;border-radius:var(--r-sm);font-size:var(--t-petit);font-weight:600}
.btn-install{background:var(--or);color:var(--sur-or)}
.btn-dismiss{background:transparent;color:var(--texte-3)}
.btn-dismiss:hover{background:var(--fond-3);color:var(--texte-2)}

/* ═══ ONGLETS ═══ */
.tab-bar{display:flex;gap:3px;padding:4px;margin:8px 14px 0;background:var(--fond-1);border:1px solid var(--separateur);border-radius:var(--r-md);flex-shrink:0}
.tab-btn{flex:1;padding:9px 6px;border-radius:var(--r-sm);background:transparent;color:var(--texte-3);font-size:var(--t-petit);font-weight:500;transition:background 0.2s,color 0.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.tab-btn:hover{background:var(--fond-2);color:var(--texte-2)}
.tab-btn.active{background:var(--or-voile);color:var(--or);font-weight:600}
.tab-btn svg{width:14px;height:14px}

/* ═══ CONTENU ═══ */
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px calc(20px + var(--safe-bottom));scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.tab-panel{display:none;animation:fadeUp 0.25s ease;max-width:var(--largeur-max);margin-inline:auto}
.tab-panel.active{display:block}

/* ═══ ZONE DE DÉPÔT ═══ */
.upload-zone{border:1px dashed var(--bordure);border-radius:var(--r-lg);padding:30px 20px;text-align:center;cursor:pointer;transition:background 0.2s,border-color 0.2s;background:var(--fond-1);position:relative;overflow:hidden}
.upload-zone:hover{background:var(--fond-2);border-color:var(--or-trait)}
/* Aperçu : bande de hauteur maîtrisée. L'image ne flotte plus au centre
   d'une grande surface vide, elle occupe un cadre assumé.                */
.upload-zone.has-image{padding:0;border-style:solid;border-color:var(--separateur);background:var(--fond-1)}
.upload-zone.has-image:hover{border-color:var(--or-trait)}
#uploadPreview{position:relative;display:block}
.upload-zone img{width:100%;height:clamp(120px,18vh,180px);object-fit:contain;display:block;background:var(--fond-2);border-radius:calc(var(--r-lg) - 1px)}
.upload-zone .change-hint{position:absolute;bottom:10px;right:10px;background:var(--fond-0);padding:6px 12px;border-radius:var(--r-sm);font-size:var(--t-petit);font-weight:500;color:var(--or);border:1px solid var(--or-trait)}
.upload-icon svg{width:30px;height:30px;stroke:var(--texte-3)}
.upload-zone:hover .upload-icon svg{stroke:var(--or)}
.upload-title{font-size:var(--t-section);font-weight:500;color:var(--texte-1);margin-top:12px}
.upload-sub{font-size:var(--t-petit);color:var(--texte-3);margin-top:5px}

.context-row{margin-top:10px;display:flex;gap:8px}
.context-input{flex:1;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--bordure);background:var(--fond-2);color:var(--texte-1);font-size:var(--t-corps);outline:none;transition:border-color 0.2s}
.context-input:focus{border-color:var(--or)}
.context-input::placeholder{color:var(--texte-3)}

/* ═══ BOUTONS ═══ */
.btn-primary{width:100%;padding:14px 20px;margin-top:12px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);font-size:var(--t-section);font-weight:600;transition:filter 0.2s,transform 0.1s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:scale(0.985)}
.btn-primary:disabled{background:var(--fond-2);color:var(--texte-3);cursor:not-allowed;filter:none}
.btn-primary svg{width:16px;height:16px}
.btn-sm{padding:8px 14px;border-radius:var(--r-sm);font-size:var(--t-petit);font-weight:500;transition:background 0.2s,border-color 0.2s,color 0.2s}
.btn-add{background:var(--or);color:var(--sur-or);font-weight:600}
.btn-add:hover{filter:brightness(1.08)}
.btn-danger{background:transparent;border:1px solid var(--separateur);color:var(--bloquant)}
.btn-danger:hover{background:var(--bloquant-voile);border-color:var(--bloquant)}
.btn-outline{background:var(--fond-2);border:1px solid var(--separateur);color:var(--texte-2)}
.btn-outline:hover{background:var(--fond-3);border-color:var(--bordure);color:var(--texte-1)}

.status-badge{text-align:center;margin-top:8px;font-size:var(--t-petit);color:var(--texte-3)}
.error-msg{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--bloquant-voile);border:1px solid var(--bloquant);color:var(--bloquant);font-size:var(--t-corps);line-height:1.5}

.skeleton-block{border-radius:var(--r-xs);background:linear-gradient(90deg,var(--fond-2) 25%,var(--fond-3) 50%,var(--fond-2) 75%);background-size:200% 100%;animation:shimmer 1.8s infinite;margin-bottom:10px}

/* ═══ SÉLECTEUR DE MODULES ═══ */
.module-card{margin-top:12px;margin-bottom:0}
.module-list{display:flex;flex-direction:column;gap:8px}
.module-opt{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;padding:11px 12px;border-radius:var(--r-md);background:var(--fond-2);border:1px solid var(--separateur);transition:background 0.2s,border-color 0.2s}
.module-opt:hover{background:var(--fond-3)}
.module-opt.on{border-color:var(--or-trait);background:var(--fond-3)}
.module-check{width:19px;height:19px;border-radius:var(--r-xs);border:1.5px solid var(--bordure);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px;color:transparent}
.module-opt.on .module-check{background:var(--or);border-color:var(--or);color:var(--sur-or)}
.module-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.module-nom{font-size:var(--t-critere);font-weight:600;color:var(--texte-1)}
.module-desc{font-size:var(--t-petit);color:var(--texte-3);line-height:1.45}
.module-opt.ko{opacity:0.75;cursor:not-allowed;border-color:var(--bloquant)}
.module-opt.ko:hover{background:var(--fond-2)}
.module-opt.ko .module-check{border-color:var(--bloquant);color:var(--bloquant)}
.module-opt.ko .module-desc{color:var(--bloquant)}

/* ═══ CARTES ═══ */
.card{padding:16px;border-radius:var(--r-lg);background:var(--fond-1);border:1px solid var(--separateur);margin-bottom:12px}
.card-title{font-size:var(--t-section);font-weight:600;color:var(--texte-1);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.card-title svg{color:var(--or);flex-shrink:0}
.card-desc{font-size:var(--t-petit);color:var(--texte-2);line-height:1.55}
textarea{width:100%;min-height:100px;padding:12px;border-radius:var(--r-md);border:1px solid var(--bordure);background:var(--fond-2);color:var(--texte-1);font-size:var(--t-corps);line-height:1.55;resize:vertical;outline:none;transition:border-color 0.2s}
textarea:focus{border-color:var(--or)}
textarea::placeholder{color:var(--texte-3)}
.bloc-titre{font-size:var(--t-critere);font-weight:600;color:var(--texte-1);margin-bottom:10px}

/* ═══ ANNEAU DE SCORE ═══ */
.score-ring-wrap{display:flex;justify-content:center;margin:16px 0 14px}
.score-ring{position:relative;width:104px;height:104px}
.score-ring svg{transform:rotate(-90deg)}
.score-ring-bg{fill:none;stroke:var(--fond-3);stroke-width:8}
.score-ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease}
.score-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring-num{font-size:30px;font-weight:800;color:var(--texte-1);line-height:1}
.score-ring-label{font-size:var(--t-meta);color:var(--texte-3);margin-top:4px}

/* Quatre actions : deux par ligne sur mobile, une ligne sur grand écran. */
.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.action-bar .btn-sm{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;text-align:center}
.action-bar .btn-sm svg{width:14px;height:14px;flex-shrink:0}

/* ═══ RAPPORT ═══ */
.results-box{margin-top:16px;padding:20px 16px;background:var(--fond-1);border-radius:var(--r-lg);border:1px solid var(--separateur);animation:fadeUp 0.35s ease}

/* Rendu markdown des audits archivés à l'ancien format */
.results-box h2{font-size:var(--t-module);font-weight:700;color:var(--texte-1);margin-top:22px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--separateur)}
.results-box h2:first-child{margin-top:0}
.results-box h3{font-size:var(--t-section);font-weight:600;color:var(--or);margin-top:16px;margin-bottom:6px}
.results-box p{color:var(--texte-2);font-size:var(--t-corps);line-height:1.6;margin-bottom:6px}
.results-box .bullet{display:flex;gap:8px;margin-bottom:5px;color:var(--texte-2);font-size:var(--t-corps);line-height:1.55}
.results-box .bullet-dot{color:var(--or);flex-shrink:0;margin-top:2px}
.results-box .num-item{display:flex;gap:10px;margin-bottom:8px;color:var(--texte-2);font-size:var(--t-corps);line-height:1.55}
.results-box .num-badge{width:21px;height:21px;border-radius:50%;background:var(--or);color:var(--sur-or);display:flex;align-items:center;justify-content:center;font-size:var(--t-meta);font-weight:700;flex-shrink:0;margin-top:2px}
.results-box table{width:100%;border-collapse:collapse;font-size:var(--t-petit);margin:12px 0}
.results-box th{padding:8px;text-align:left;border-bottom:2px solid var(--or);color:var(--or);font-weight:600;font-size:var(--t-meta);text-transform:uppercase;letter-spacing:0.4px}
.results-box td{padding:8px;color:var(--texte-2);border-bottom:1px solid var(--separateur)}
.results-box code{background:var(--fond-2);padding:2px 6px;border-radius:var(--r-xs);font-size:var(--t-petit);color:var(--or);font-family:'JetBrains Mono',monospace}
.results-box pre{background:var(--fond-2);padding:12px 14px;border-radius:var(--r-sm);font-size:var(--t-petit);color:var(--texte-1);overflow-x:auto;margin:10px 0;border:1px solid var(--separateur);font-family:'JetBrains Mono',monospace;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.results-box hr{border:none;border-top:1px solid var(--separateur);margin:18px 0}
.results-box strong{color:var(--texte-1)}

/* ═══ SYNTHÈSE : LES PRIORITÉS ═══ */
.synthese{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--separateur)}
.synthese-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.synthese-head h2{font-size:var(--t-module);font-weight:700;color:var(--or);margin:0;padding:0;border:none}
.synthese-compte{font-size:var(--t-petit);color:var(--texte-3)}
.priorite{display:flex;gap:12px;padding:13px;border-radius:var(--r-md);background:var(--fond-2);border:1px solid var(--separateur);border-left:3px solid var(--neutre);margin-bottom:9px}
.priorite.sev-bloquant{border-left-color:var(--bloquant)}
.priorite.sev-majeur{border-left-color:var(--majeur)}
.priorite.sev-mineur{border-left-color:var(--mineur)}
.priorite-rang{width:23px;height:23px;border-radius:50%;background:var(--or);color:var(--sur-or);display:flex;align-items:center;justify-content:center;font-size:var(--t-petit);font-weight:800;flex-shrink:0;margin-top:1px}
.priorite-corps{flex:1;min-width:0}
.priorite-titre{font-size:var(--t-section);font-weight:600;color:var(--texte-1);line-height:1.4}
.priorite-meta{display:flex;align-items:center;gap:8px;margin:6px 0 7px;flex-wrap:wrap}
.priorite-module{font-size:var(--t-meta);color:var(--texte-3);text-transform:uppercase;letter-spacing:0.5px}
.priorite-pourquoi{font-size:var(--t-corps);line-height:1.6;color:var(--texte-2);margin:0 0 8px}
.priorite-action{font-size:var(--t-corps);line-height:1.6;color:var(--texte-2);padding:10px 12px;border-radius:var(--r-sm);background:var(--fond-1);border:1px solid var(--separateur)}
.etiquette{display:block;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--or);margin-bottom:4px}

/* ═══ RAPPORT PAR MODULE ═══ */
.module-report{padding-bottom:8px;margin-bottom:20px;border-bottom:1px solid var(--separateur)}
.module-report:last-child{margin-bottom:0;border-bottom:none}
.module-report.pending{opacity:0.65}
.module-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.module-head h2{font-size:var(--t-module);font-weight:700;color:var(--texte-1);margin:0;padding:0;border:none}
.module-wait{display:flex;align-items:center;gap:7px;font-size:var(--t-petit);color:var(--texte-3)}
.score-pill{font-size:20px;font-weight:800;padding:4px 12px;border-radius:var(--r-sm);flex-shrink:0;line-height:1.3}
.score-pill small{font-size:var(--t-petit);font-weight:600;opacity:0.75}
.score-vert{background:var(--conforme-voile);color:var(--conforme)}
.score-orange{background:var(--majeur-voile);color:var(--majeur)}
.score-rouge{background:var(--bloquant-voile);color:var(--bloquant)}
.score-neutre{background:var(--neutre-voile);color:var(--texte-3);font-size:17px}

/* ═══ GROUPES DE SÉVÉRITÉ ═══ */
.sev-group{margin-bottom:16px}
.sev-title{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:9px;color:var(--texte-3)}
.sev-title svg{width:13px;height:13px;flex-shrink:0}
.sev-title.sev-bloquant{color:var(--bloquant)}
.sev-title.sev-majeur{color:var(--majeur)}
.sev-title.sev-mineur{color:var(--mineur)}
.sev-title.sev-aucune{color:var(--conforme)}

.critere{padding:13px;border-radius:var(--r-md);background:var(--fond-2);border:1px solid var(--separateur);border-left:3px solid var(--neutre);margin-bottom:9px}
.critere.sev-bloquant{border-left-color:var(--bloquant)}
.critere.sev-majeur{border-left-color:var(--majeur)}
.critere.sev-mineur{border-left-color:var(--mineur)}
.critere.sev-aucune{border-left-color:var(--conforme)}
.critere-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.critere-nom{font-size:var(--t-critere);font-weight:600;color:var(--texte-1);min-width:0}
.critere-constat{font-size:var(--t-corps);line-height:1.6;color:var(--texte-2);margin:0 0 8px}
.critere-correction{font-size:var(--t-corps);line-height:1.6;color:var(--texte-2);padding:10px 12px;border-radius:var(--r-sm);background:var(--fond-1);border:1px solid var(--separateur)}

/* ═══ BADGES ═══
   La couleur double toujours un libellé et, pour les sévérités, une forme
   d'icône. Elle ne porte jamais l'information seule (WCAG 1.4.1).         */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 9px;border-radius:var(--r-xs);flex-shrink:0;background:var(--neutre-voile);color:var(--texte-3)}
.badge svg{width:11px;height:11px;flex-shrink:0}
.badge-non_conforme,.badge-bloquant{background:var(--bloquant-voile);color:var(--bloquant)}
.badge-partiel,.badge-majeur{background:var(--majeur-voile);color:var(--majeur)}
.badge-mineur{background:var(--mineur-voile);color:var(--mineur)}
.badge-conforme{background:var(--conforme-voile);color:var(--conforme)}
.badge-non_evaluable{background:var(--neutre-voile);color:var(--texte-3)}

/* ═══ BLOC DE CODE ═══ */
.code-bloc{position:relative;margin-top:9px}
.code-bloc pre{background:var(--fond-1);padding:12px 14px;padding-right:74px;border-radius:var(--r-sm);font-size:var(--t-petit);color:var(--texte-1);overflow-x:auto;border:1px solid var(--separateur);font-family:'JetBrains Mono',monospace;line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0}
.code-copier{position:absolute;top:8px;right:8px;padding:5px 10px;border-radius:var(--r-xs);font-size:var(--t-meta);font-weight:600;background:var(--fond-3);color:var(--texte-2);border:1px solid var(--separateur)}
.code-copier:hover{background:var(--or-voile);color:var(--or);border-color:var(--or-trait)}

/* ═══ LISTES ═══ */
.list-item{padding:12px 14px;border-radius:var(--r-md);background:var(--fond-1);border:1px solid var(--separateur);margin-bottom:9px;display:flex;align-items:center;gap:12px;transition:background 0.2s,border-color 0.2s}
.list-item:hover{background:var(--fond-2);border-color:var(--bordure)}
.list-item-img{width:46px;height:46px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0;background:var(--fond-2)}
.list-item-body{flex:1;min-width:0}
.list-item-title{font-size:var(--t-critere);font-weight:500;color:var(--texte-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-sub{font-size:var(--t-petit);color:var(--texte-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-text{font-size:var(--t-petit);color:var(--texte-3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty-state{text-align:center;padding:36px 16px;color:var(--texte-3);font-size:var(--t-corps)}
.empty-state svg{stroke:var(--texte-3)}

/* Pastille de score dans l'historique */
.pastille{padding:5px 11px;border-radius:var(--r-sm);font-size:var(--t-critere);font-weight:700;flex-shrink:0}

/* ═══ GRAPHIQUE ═══ */
.chart-wrap{padding:16px;background:var(--fond-1);border-radius:var(--r-lg);border:1px solid var(--separateur);margin-bottom:14px}
.chart-title{font-size:var(--t-critere);font-weight:600;color:var(--texte-1);margin-bottom:14px}
.chart-bars{display:flex;align-items:flex-end;gap:8px}
.chart-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
/* La piste porte la hauteur de référence : sans elle, le pourcentage de la
   barre n'a rien à quoi se rapporter et la barre s'écrase.               */
.chart-piste{width:100%;height:78px;display:flex;align-items:flex-end;background:var(--fond-2);border-radius:var(--r-xs)}
.chart-bar{width:100%;border-radius:var(--r-xs);transition:height 0.5s ease;min-height:4px}
.chart-bar.score-vert{background:var(--conforme)}
.chart-bar.score-orange{background:var(--majeur)}
.chart-bar.score-rouge{background:var(--bloquant)}
.chart-valeur{font-size:var(--t-meta);font-weight:700;color:var(--texte-2)}
.chart-date{font-size:var(--t-meta);color:var(--texte-3);margin-top:3px}

/* ═══ MODALE ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(6px);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
.modal{width:100%;max-width:520px;max-height:85vh;background:var(--fond-1);border:1px solid var(--separateur);border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 16px calc(20px + var(--safe-bottom));overflow-y:auto;animation:slideUp 0.3s ease}
.modal-handle{width:38px;height:4px;border-radius:2px;background:var(--bordure);margin:0 auto 18px}
.modal-title{font-size:var(--t-module);font-weight:700;color:var(--texte-1);margin-bottom:16px}
.modal-resume{display:flex;gap:12px;margin-bottom:16px;align-items:center}
.modal-resume img{width:62px;height:62px;object-fit:cover;border-radius:var(--r-md);background:var(--fond-2)}
.modal-score{font-size:25px;font-weight:800;color:var(--texte-1)}
.modal-date{font-size:var(--t-petit);color:var(--texte-3);margin-top:2px}
.modal-actions{display:flex;gap:8px;margin-bottom:16px}
.modal-actions .btn-sm{flex:1}

.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--fond-3);color:var(--texte-1);padding:11px 20px;border-radius:var(--r-md);font-size:var(--t-corps);font-weight:500;opacity:0;transition:opacity 0.3s,transform 0.3s;z-index:300;pointer-events:none;border:1px solid var(--bordure);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.version-tag{text-align:center;padding:24px 0 8px;font-size:var(--t-meta);color:var(--texte-3)}

/* ═══ ÉTIQUETTES DE CHAMP ═══
   Étiquette persistante, distincte du texte d'invite qui, lui, disparaît à
   la saisie (WCAG 3.3.2).                                                 */
.champ{margin-top:14px}
.champ-label{display:block;font-size:var(--t-petit);font-weight:600;color:var(--texte-2);margin-bottom:6px}
.champ-label span{font-weight:400;color:var(--texte-3)}
.card .champ-label{margin-top:2px}

/* ═══ BLOC D'ACTION ═══
   L'action principale doit tenir dans la première hauteur d'écran : c'est
   l'aperçu de capture, compacté, qui le permet. Une barre collante avait été
   essayée d'abord — elle recouvrait la fin de la liste des modules.        */
.barre-action{padding-bottom:4px}
.champ .context-input{width:100%}
.mention{font-size:var(--t-petit);line-height:1.5;color:var(--texte-3);margin-top:9px;text-align:center}
.status-badge{display:flex;flex-direction:column;gap:2px}

/* Une fois le rapport affiché, l'action se subordonne : le score et les
   priorités reprennent la tête de la hiérarchie visuelle.                 */
#analyzeActions.avec-rapport .btn-primary{background:var(--fond-2);color:var(--texte-2);border:1px solid var(--separateur);box-shadow:none}
#analyzeActions.avec-rapport .btn-primary:hover{background:var(--fond-3);color:var(--texte-1);filter:none}
#analyzeActions.avec-rapport .mention{display:none}

.bareme{font-size:var(--t-petit);line-height:1.5;color:var(--texte-3);text-align:center;max-width:520px;margin:0 auto}
.score-ring-wrap{flex-direction:column;align-items:center;gap:12px}

/* ═══ POINTEUR TACTILE ═══
   Cibles d'au moins 44 px sur mobile (WCAG 2.5.5). Limité aux pointeurs
   grossiers : la densité du desktop reste inchangée.                     */
@media (pointer:coarse){
  .tab-btn{min-height:44px}
  .btn-sm{min-height:44px}
  .module-opt{min-height:56px}
  .code-copier{min-height:34px;padding:8px 12px}
}

/* ═══ GRAND ÉCRAN ═══ */
@media (min-width:720px){
  /* « environ 16 px minimum sur mobile, davantage sur desktop » : le corps
     monte d'un cran au-delà de la largeur de bascule.                     */
  :root{ --t-corps:17px; --t-critere:18px; --t-section:19px; --t-module:22px }
  /* Deux colonnes de modules : la carte perd la moitié de sa hauteur, ce qui
     ramène l'action principale dans la première hauteur d'écran.          */
  .module-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .header{padding-left:24px;padding-right:24px}
  .content{padding-left:24px;padding-right:24px}
  .tab-bar{max-width:var(--largeur-max);margin-inline:auto}
  #installBanner{max-width:var(--largeur-max);margin-inline:auto}
  .results-box{padding:24px 22px}
  .action-bar{grid-template-columns:repeat(4,1fr)}
}

/* ═══ PÉRIMÈTRE D'UN MODULE ═══
   Se lit immédiatement sous le score qu'il qualifie. Un module qui ne voit
   qu'une partie de son référentiel doit le dire là où on lit son chiffre. */
.perimetre{margin:0 0 16px;padding:12px 13px;border-radius:var(--r-md);background:var(--mineur-voile);border:1px solid var(--mineur)}
.perimetre-titre{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--mineur);margin-bottom:7px}
.perimetre-titre svg{width:13px;height:13px;flex-shrink:0}
.perimetre p{font-size:var(--t-petit);line-height:1.55;color:var(--texte-2);margin:0 0 5px}
.perimetre p:last-child{margin-bottom:0}
.perimetre strong{color:var(--texte-1)}
.perimetre-mention{color:var(--mineur)!important;font-weight:600}

/* ═══ AUDIT INCOMPLET ═══
   Se lit sous le score global, dont il dit la portée réelle. Un audit dont
   des modules ont échoué ne doit jamais afficher son chiffre comme complet. */
.completude{margin:0 0 4px;padding:13px;border-radius:var(--r-md);background:var(--majeur-voile);border:1px solid var(--majeur)}
.completude-titre{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--majeur);margin-bottom:7px}
.completude-titre svg{width:13px;height:13px;flex-shrink:0}
.completude p{font-size:var(--t-petit);line-height:1.55;color:var(--texte-2);margin:0}
.completude-liste{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.completude-liste li{font-size:var(--t-petit);line-height:1.5;color:var(--texte-2);padding-left:13px;position:relative}
.completude-liste li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--majeur)}
.completude-liste strong{color:var(--texte-1)}

/* Entrée d'historique calculée avec un barème antérieur : elle reste
   consultable mais n'entre pas dans la courbe d'évolution. */
.tag-ancien{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:var(--r-xs);background:var(--neutre-voile);color:var(--texte-3);font-size:var(--t-meta);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;vertical-align:1px}

/* ═══ MODE D'ENTRÉE ═══ */
.mode-bar{display:flex;gap:3px;padding:4px;margin-bottom:12px;background:var(--fond-1);border:1px solid var(--separateur);border-radius:var(--r-md)}
.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:var(--r-sm);background:transparent;color:var(--texte-3);font-size:var(--t-petit);font-weight:500;transition:background 0.2s,color 0.2s}
.mode-btn svg{width:15px;height:15px;flex-shrink:0}
.mode-btn:hover{background:var(--fond-2);color:var(--texte-2)}
.mode-btn.active{background:var(--or-voile);color:var(--or);font-weight:600}

/* ═══ PROVENANCE DES CONSTATS ═══
   La distinction mesuré / jugé est l'argument du produit : elle se lit au
   niveau du rapport entier, puis sur chaque critère. */
.provenance{font-size:var(--t-petit);line-height:1.5;color:var(--texte-2);text-align:center;max-width:560px;margin:0 auto 8px}
.provenance strong{color:var(--conforme)}
.sources{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}
.badge-src-mesure{background:transparent;border:1px solid var(--conforme);color:var(--conforme)}
.badge-src-jugement{background:var(--neutre-voile);color:var(--texte-3)}
.critere-ref{font-size:var(--t-meta);color:var(--texte-3);margin:-2px 0 7px;letter-spacing:0.2px}

/* ═══ RELEVÉS D'UNE MESURE ═══ */
.releves{margin:9px 0;padding:11px 12px;border-radius:var(--r-sm);background:var(--fond-1);border:1px solid var(--separateur)}
.releve{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--separateur);flex-wrap:wrap}
.releve:last-of-type{border-bottom:none}
.releve-ech{display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;border-radius:var(--r-xs);font-size:var(--t-petit);font-weight:700;flex-shrink:0;border:1px solid var(--separateur)}
.releve-ratio{font-family:'JetBrains Mono',monospace;font-size:var(--t-critere);font-weight:700;color:var(--texte-1);min-width:64px}
.releve.ko .releve-ratio{color:var(--bloquant)}
.releve.ok .releve-ratio{color:var(--conforme)}
/* Un relevé indéterminé n'est ni un échec ni une réussite : il reste neutre.
   --texte-3 sur --fond-2 : 4,6:1, au-dessus du seuil AA de 4,5:1. */
.releve.nd .releve-ratio{color:var(--texte-3);font-weight:600}
.releve-seuil{font-family:'JetBrains Mono',monospace;font-size:var(--t-petit);color:var(--texte-3);min-width:86px}
.releve-detail{font-size:var(--t-petit);color:var(--texte-2);flex:1;min-width:180px}
.releve-reste{font-size:var(--t-petit);color:var(--texte-3);padding-top:7px}

/* ═══ CE QUI N'A PAS PU ÊTRE MESURÉ ═══
   Jamais renvoyé au jugement du modèle : compté et déclaré tel quel. */
.non-mesurable{margin:9px 0;padding:11px 12px;border-radius:var(--r-sm);background:var(--mineur-voile);border:1px solid var(--mineur)}
.non-mesurable-titre{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--mineur);margin-bottom:6px}
.non-mesurable-titre svg{width:13px;height:13px;flex-shrink:0}
.non-mesurable p{font-size:var(--t-petit);line-height:1.55;color:var(--texte-2);margin:0}
.non-mesurable ul{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.non-mesurable li{font-size:var(--t-petit);color:var(--texte-3);padding-left:12px;position:relative}
.non-mesurable li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--mineur)}
.non-mesurable li span{color:var(--texte-2);font-weight:600}

/* Bloc axe-core. Volontairement distinct des modules notés : pas de pastille
   de score, un liseré neutre plutôt que la couleur d'une sévérité. Le lecteur
   doit voir que ce bloc ne relève pas de la même méthode. */
.bloc-axe{border-left:3px solid var(--texte-3)}
.axe-outil{font-family:'JetBrains Mono',monospace;font-size:var(--t-meta);color:var(--texte-3)}
.axe-section{margin-top:14px}
.axe-item{padding:9px 0;border-bottom:1px solid var(--separateur)}
.axe-item:last-child{border-bottom:none}
.axe-item-head{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.axe-regle{font-size:var(--t-corps);color:var(--texte-1);min-width:0}
/* --texte-3 sur --fond-2 : 4,6:1, au-dessus du seuil AA de 4,5:1. */
.axe-meta{font-family:'JetBrains Mono',monospace;font-size:var(--t-meta);color:var(--texte-3);margin-top:3px}
.axe-en{font-size:var(--t-meta);color:var(--texte-3);border:1px solid var(--separateur);border-radius:3px;padding:0 3px;text-transform:uppercase}
.axe-exemples{margin:6px 0 0;padding-left:16px}
.axe-exemples li{font-size:var(--t-petit);color:var(--texte-2);margin-bottom:3px;overflow-wrap:anywhere}
.axe-exemples code{font-family:'JetBrains Mono',monospace;font-size:var(--t-meta);color:var(--texte-2);overflow-wrap:anywhere}
.badge-axe-constat{background:var(--majeur-voile);color:var(--majeur);border:1px solid var(--majeur)}
.badge-axe-indetermine{background:transparent;color:var(--texte-3);border:1px solid var(--separateur)}
.axe-bilan{margin-top:12px;padding-top:9px;border-top:1px solid var(--separateur);font-size:var(--t-petit);color:var(--texte-3)}

/* ═══ EN-TÊTE DU RAPPORT IMPRIMÉ ═══
   Invisible à l'écran : la page auditée et la date y sont déjà dites par les
   champs de saisie, que l'impression masque. */
.entete-impression{display:none}

/* ═══ IMPRESSION — RAPPORT EN PDF ═══
   « Télécharger en PDF » imprime la page elle-même : même rendu que l'écran,
   passé en clair. Comme toutes les couleurs sont des variables, on ne
   redéfinit que la palette ; aucun composant n'a de règle de couleur propre
   à l'impression.

   Ratios calculés sur blanc (fond-1) puis sur fond-2, voiles à 10 %
   composités sur leur support. Seuil 4.5:1 partout, badges compris.        */
@media print{
  :root{
    --fond-0: #FFFFFF;
    --fond-1: #FFFFFF;
    --fond-2: #F5F3F0;
    --fond-3: #E9E5E0;
    --separateur: #DDD7CF;
    --bordure: #8C8378;     /* 3.73:1 sur blanc, seuil 1.4.11 = 3:1        */
    --texte-1: #1B1815;     /* 17.68 / 15.96                               */
    --texte-2: #3F3A34;     /* 11.25 / 10.16                               */
    --texte-3: #5F584F;     /*  7.01 /  6.33                               */
    --or: #8A6200;          /*  5.49 /  4.95                               */
    --or-fonce: #6F4F00;
    --sur-or: #FFFFFF;      /*  5.49 sur --or                              */
    --or-voile: rgba(138,98,0,0.10);
    --or-trait: rgba(138,98,0,0.35);
    --bloquant: #B3261E;    /*  6.54 · 5.05 sur son voile / fond-2         */
    --majeur:   #8F5500;    /*  6.06 · 4.76                                */
    --mineur:   #1F5FAD;    /*  6.37 · 4.99                                */
    --conforme: #0A6B47;    /*  6.55 · 5.11                                */
    --neutre:   #5F584F;    /*  7.01 · 5.52                                */
    --bloquant-voile: rgba(179,38,30,0.10);
    --majeur-voile:   rgba(143,85,0,0.10);
    --mineur-voile:   rgba(31,95,173,0.10);
    --conforme-voile: rgba(10,107,71,0.10);
    --neutre-voile:   rgba(95,88,79,0.10);
    --t-module: 16pt;
    --t-section: 12.5pt;
    --t-critere: 12pt;
    --t-corps: 10.5pt;
    --t-petit: 9pt;
    --t-meta: 8pt;
  }
  @page{size:A4;margin:14mm 13mm}

  /* La coquille d'application défile dans .content à hauteur d'écran : sur
     papier, tout doit s'écouler page après page. */
  html,body{height:auto;overflow:visible}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #app{display:block;height:auto;opacity:1!important}
  .content{overflow:visible;padding:0}
  .tab-panel{max-width:none;animation:none}

  /* Tout ce qui sert à lancer ou manipuler l'audit reste à l'écran. */
  #splash,.header,#installBanner,.tab-bar,.mode-bar,#zoneUrl,.upload-zone,.champ,
  #analyzeActions,#errorMsg,#actionBar,.code-copier,.toast,.modal-overlay{display:none!important}

  .entete-impression{display:block;margin-bottom:6mm;padding-bottom:4mm;border-bottom:1px solid var(--separateur)}
  .entete-marque{font-size:var(--t-petit);font-weight:700;color:var(--texte-1);letter-spacing:0.2px}
  .entete-marque span{color:var(--or)}
  .entete-titre{font-size:20pt;font-weight:800;color:var(--texte-1);margin:2mm 0 4mm}
  .entete-meta{display:grid;grid-template-columns:auto 1fr;gap:1.5mm 5mm;font-size:var(--t-petit);line-height:1.45}
  .entete-meta div{display:contents}
  .entete-meta dt{font-weight:600;color:var(--texte-3);text-transform:uppercase;letter-spacing:0.4px;font-size:var(--t-meta);padding-top:1px}
  .entete-meta dd{color:var(--texte-1)}
  .entete-url{color:var(--texte-2);word-break:break-all}
  .entete-capture{display:block;max-width:100%;max-height:85mm;margin:5mm auto 0;border:1px solid var(--separateur);border-radius:var(--r-sm)}

  .score-ring-fg{transition:none}
  .results-box{margin-top:6mm;padding:0;border:none;background:none;animation:none}
  .results-box pre{overflow:visible}

  /* Un critère, une priorité ou un relevé ne se coupent pas entre deux pages ;
     un titre ne reste pas seul en bas de page. */
  .critere,.priorite,.releves,.perimetre,.non-mesurable,.completude,.axe-item,.score-ring-wrap{break-inside:avoid}
  .results-box h2,.module-head,.sev-title,.synthese-head{break-after:avoid}
}