/* ============================================================
   RGAA Audit Tool — Feuille de styles
   Thème JNS Web Solutions
   Police : DM Sans (corps) + Epilogue (titres)
   Palette : fond quasi-noir #08090C, accent turquoise #3DD9B8
   ============================================================ */

/* ── Polices Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Epilogue:wght@300;400;600;700;900&display=swap');

/* ── Variables globales ───────────────────────────────────────────────────── */
:root {
  /* Couleurs de fond */
  --fond-page      : #030303;
  --fond-surface   : #0D0F15;
  --fond-surligne  : #15171c;
  --fond-input     : #0F1118;

  /* Texte */
  --texte-principal  : #e2e7f0;
  --texte-secondaire : #a4aec5;
  --texte-discret    : #a4aec5;

  /* Accent turquoise JNS */
  --accent       : #7CB8F5;
  --accent-hover : #7CB8F5;
  --accent-fond  : rgba(61, 217, 184, 0.08);

  /* Statuts */
  --vert       : #3DD9B8;
  --vert-fond  : #08211b;
  --rouge      : #f87171;
  --rouge-fond : #1e0d0d;
  --orange     : #fb923c;
  --orange-fond: #1e1008;
  --gris       : #5A6278;
  --gris-fond  : #0F1118;
  --bleu       : #7CB8F5;
  --bleu-fond  : #0d1a2e;
  --bleu-bordure      : #4A90D9;
  --bleu-bordure-alpha: rgba(74, 144, 217, 0.3);
  --ambre      : #f59e0b;
  --ambre-fond : #1a1200;
  --bleu-synthese     : #1A2E4A;

  /* Fond zone NC */
  --fond-nc : #0A0C10;

  /* Badges */
  --violet-badge : #A78BFA;
  --violet-fond  : #1a1428;

  /* Bordures */
  --bordure       : #151820;
  --bordure-forte : #1E2333;

  /* Typographie */
  --police      : 'Montserrat', system-ui, sans-serif;
  --police-titre: 'Montserrat', system-ui, sans-serif;
  --police-mono : 'Datatype', monospace;
  
  /* Taille des polices */
  --taille-h1 : 20px;
  --taille-h2 : 18px;
  --taille-texte : 15px;
  /* Dimensions */
  --rayon    : 3px;
  --rayon-lg : 8px;
  --ombre    : 0 8px 32px rgba(0, 0, 0, 0.6);

  /* Layout */
  --hauteur-header  : 56px;
  --hauteur-statsbar: 44px;
  --hauteur-tabs    : 44px;
  --largeur-sidebar : 320px;
}

/* ── Reset minimal ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--police);
  background-color: var(--fond-page);
  color: var(--texte-principal);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-hover); }

input, textarea, select, button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--fond-surface); }
::-webkit-scrollbar-thumb { background: var(--bordure-forte); border-radius: 3px; }

/* ── Accessibilité : lien d'évitement ────────────────────────────────────── */
.lien-evitement {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--accent);
  color: var(--fond-page);
  padding: 8px 16px;
  border-radius: var(--rayon);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.lien-evitement:focus { top: 8px; }

/* Texte masqué pour AT */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Utilitaires texte ────────────────────────────────────────────────────── */
.texte-secondaire { color: var(--texte-secondaire); }
.texte-discret    { color: var(--texte-discret); }
.texte-vert       { color: var(--vert); }
.texte-rouge      { color: var(--rouge); }
.texte-orange     { color: var(--orange); }
.texte-accent     { color: var(--accent); }
.mono             { font-family: var(--police-mono); }
.gras             { font-weight: 700; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn[disabled], .btn.desactive {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond-page);
  font-weight: 600;
}
.btn-principal:hover:not([disabled]) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--fond-page);
  text-decoration: none;
}

.btn-secondaire {
  background: transparent;
  border-color: var(--bordure-forte);
  color: var(--texte-secondaire);
}
.btn-secondaire:hover:not([disabled]) {
  background: var(--fond-surligne);
  border-color: var(--bordure-forte);
  color: var(--texte-principal);
  text-decoration: none;
}

.btn-danger {
  background: var(--rouge-fond);
  border-color: var(--rouge-fond);
  color: var(--rouge);
}
.btn-danger:hover:not([disabled]) {
  background: #2d1010;
  text-decoration: none;
}

.btn-sm { 
    padding: 5px 12px; 
    font-size: 13px; 
    border-radius: var(--rayon); 
}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.champ-groupe  { margin-bottom: 18px; }
.champ-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texte-discret);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.champ-label .requis { color: var(--rouge); margin-left: 2px; }

.champ-input, .champ-textarea, .champ-select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--fond-input);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  color: var(--texte-principal);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.champ-input:focus, .champ-textarea:focus, .champ-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-fond);
}
.champ-input::placeholder, .champ-textarea::placeholder {
  color: var(--texte-discret);
}
.champ-textarea  { resize: vertical; min-height: 80px; line-height: 1.55; }
.champ-select    { cursor: pointer; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--rayon);
  text-transform: uppercase;
}

.badge-C  { background: var(--vert-fond);   color: var(--vert);  border: 1px solid rgba(52,203,106,0.25); }
.badge-NC { background: var(--rouge-fond);  color: var(--rouge); border: 1px solid rgba(248,113,113,0.25); }
.badge-NA { background: var(--bleu-fond);   color: var(--bleu);  border: 1px solid rgba(74,144,217,0.25); }
.badge-NT { background: var(--fond-surligne); color: var(--texte-discret); border: 1px solid var(--bordure); }

.badge-en-cours { background: var(--violet-fond); color: var(--violet-badge); border: 1px solid rgba(167,139,250,0.25); }
.badge-termine  { background: var(--vert-fond);   color: var(--vert);         border: 1px solid rgba(52,203,106,0.25); }

.badge-bloquant { background: var(--rouge-fond);  color: var(--rouge);        border: 1px solid rgba(248,113,113,0.25); }
.badge-majeur   { background: var(--orange-fond); color: var(--orange);       border: 1px solid rgba(251,146,60,0.25); }
.badge-mineur   { background: var(--violet-fond); color: var(--violet-badge); border: 1px solid rgba(167,139,250,0.25); }

/* ── Header global ────────────────────────────────────────────────────────── */
.header-global {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--hauteur-header);
  background: var(--fond-surface);
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
}

.header-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--texte-principal);
  text-decoration: none;
}
.header-marque:hover { text-decoration: none; color: var(--texte-principal); }

/* Accent turquoise dans le nom de marque */
.header-marque__accent { color: var(--accent); }
.header-marque__icone  { font-size: 20px; }

.header-droite { display: flex; align-items: center; gap: 12px; }

/* ── Barre de stats ───────────────────────────────────────────────────────── */
.barre-stats {
  height: var(--hauteur-statsbar);
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin: 20px;
  gap: 28px;
  overflow-x: auto;
}
.barre-stats::-webkit-scrollbar { height: 0; }

.stat-item { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat-valeur {
  font-size: 18px;
  font-weight: 700;
}
.stat-libelle {
    font-size: 13px; 
    color: var(--texte-discret); 
}

/* ── Onglets pages ────────────────────────────────────────────────────────── */
.onglets-pages {
  display: flex;
  align-items: flex-end;
  padding: 12px 0px 0px;
  gap: 6px;
  flex-shrink: 0;
}
.onglets-pages::-webkit-scrollbar { height: 3px; }

.onglet-page {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--fond-surligne);
  border: 1px solid var(--bordure-forte);
  border-bottom: none;
  border-radius: var(--rayon) var(--rayon) 0 0;
  color: var(--texte-discret);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  position: relative;
  bottom: -1px;                          /* fusionne avec la bordure basse du nav */
}
.onglet-page:hover {
  color: var(--texte-principal);
  background: var(--fond-surface);
  text-decoration: none;
}
.onglet-page.actif,
.onglet-page[aria-current="page"] {
  background: var(--fond-page);          /* même fond que .audit-principal__contenu */
  color: var(--texte-principal);
  border-color: var(--bordure-forte);
  border-top: 2px solid var(--accent);   /* bordure haute bleue 2px */
  border-bottom: 1px solid var(--fond-page); /* efface la ligne du nav */
  font-weight: 600;
  z-index: 1;
  padding-top: 7px;                      /* compense le 2px de border-top */
}
.onglet-page__progression {
  font-family: var(--police-mono);
  font-size: 11px;
  color: var(--accent);
}

/* ── Barre de progression ─────────────────────────────────────────────────── */
.progression-wrap { 
    font-size: 13px;
    display: flex;
    align-items: center; 
    gap: 8px; 
    min-width: 160px; 
}
.progression-barre {
  flex: 1;
  height: 3px;
  background: var(--bordure-forte);
  border-radius: var(--rayon);
  overflow: hidden;
}
.progression-remplissage {
  height: 100%;
  background: var(--accent);
  border-radius: var(--rayon);
  transition: width 0.4s ease;
}
.progression-pct {
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 34px;
  text-align: right;
}

/* ── Layout audit ─────────────────────────────────────────────────────────── */
.audit-layout {
  display: flex;
  height: calc(100vh - var(--hauteur-header) - var(--hauteur-statsbar));
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.audit-sidebar {
  width: var(--largeur-sidebar);
  flex-shrink: 0;
  overflow-y: auto;
  padding: 14px 30px;
  transition: width 0.2s ease;
}
.audit-sidebar.reduite { width: 44px; }
.audit-sidebar.reduite .contenu-sidebar { display: none; }

.sidebar-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte-discret);
  padding: 0 8px;
  margin-bottom: 6px;
  margin-top: 30px;
  font-family: var(--police-titre);
}
.separateur-sidebar { height: 1px; background: var(--bordure); margin: 10px 0; }

.btn-filtre {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--rayon);
  border: none;
  background: transparent;
  color: var(--texte-secondaire);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.btn-filtre:hover { background: var(--fond-surligne); color: var(--texte-principal); }
.btn-filtre.actif { background: var(--fond-surligne); color: var(--texte-principal); font-weight: 600; }
.btn-filtre__compteur { font-size: 11px; font-family: var(--police-mono); color: var(--texte-discret); }

.btn-thematique {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: 1px;
  border-radius: var(--rayon);
  border: none;
  background: transparent;
  color: var(--texte-secondaire);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  gap: 4px;
}
.btn-thematique:hover { background: var(--fond-surligne); color: var(--texte-principal); }
.btn-thematique.actif { background: var(--fond-surligne); color: var(--texte-principal); font-weight: 600; }
.btn-thematique__nom  { flex: 1; }
.btn-thematique__taux {
  font-size: 12px;
  color: var(--bleu);
  font-weight: 500;
  font-family: var(--police-mono);
  white-space: nowrap;
}
.btn-thematique__barre-wrap {
  width: 100%;
  height: 2px;
  background: var(--bordure-forte);
  border-radius: var(--rayon);
  margin-top: 4px;
  overflow: hidden;
}
.btn-thematique__barre {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--rayon);
  transition: width 0.4s ease;
  min-width: 0;
}

/* ── Zone principale de saisie ────────────────────────────────────────────── */

.audit-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* le scroll est géré par l'enfant */
  padding-right: 30px;
}

/* Wrapper pour le contenu scrollable sous les onglets */
.audit-principal__contenu {
  flex: 1;
  overflow-y: auto;
  padding: 35px 50px;
  border: 1px solid var(--bordure-forte);
margin-top: -1px;}

.section-thematique { margin-bottom: 8px; }
.section-thematique__titre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  color: var(--texte-principal);
  margin-bottom: 14px;
  padding-top: 4px;
  letter-spacing: -0.01em;
}
.section-thematique__taux {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--police-mono);
}

/* ── Carte critère ────────────────────────────────────────────────────────── */
.carte-critere {
  background: var(--fond-surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.carte-critere__entete   { padding: 14px 16px 10px; }
.carte-critere__meta     { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.carte-critere__id {
  font-family: var(--police-mono);
  font-size: 13px;
  color: var(--accent);
  min-width: 32px;
  padding-top: 2px;
  flex-shrink: 0;
}
.carte-critere__libelle  { 
    flex: 1; 
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55; 
    color: var(--texte-principal); 
    
}
.carte-critere__badges   {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: flex-end;
  max-width: 200px;
  margin-left: auto;
  min-width: 130px;
}

.carte-critere__statuts {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 42px;
  flex-wrap: nowrap;
}

.btn-statut {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--bordure-forte);
  background: transparent;
  color: var(--texte-discret);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-statut:hover { border-color: var(--texte-secondaire); color: var(--texte-principal); }
.btn-statut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-statut.actif-C  { border-color: var(--vert);  background: var(--vert-fond);   color: var(--vert); }
.btn-statut.actif-NC { border-color: var(--rouge); background: var(--rouge-fond);  color: var(--rouge); }
.btn-statut.actif-NA { border-color: #4A90D9;      background: var(--bleu-fond);   color: var(--bleu); }
.btn-statut.actif-NT { border-color: var(--bordure-forte); background: var(--fond-surligne); color: var(--texte-discret); }

/* ── Zone NC ──────────────────────────────────────────────────────────────── */
.zone-nc {
  padding: 12px 16px 14px 58px;
}
.zone-nc__grille {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.zone-nc__impact-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texte-discret);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.zone-nc__impact-boutons { display: flex; flex-direction: column; gap: 4px; }

.btn-impact {
  padding: 5px 10px;
  border-radius: var(--rayon);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--bordure-forte);
  background: transparent;
  color: var(--texte-discret);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-impact:hover { background: var(--fond-surligne); color: var(--texte-principal); }
.btn-impact.actif-bloquant { background: var(--rouge-fond);  border-color: var(--rouge);        color: var(--rouge); }
.btn-impact.actif-majeur   { background: var(--orange-fond); border-color: var(--orange);       color: var(--orange); }
.btn-impact.actif-mineur   { background: var(--violet-fond); border-color: var(--violet-badge); color: var(--violet-badge); }

.zone-nc__facile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--texte-secondaire);
  cursor: pointer;
}
.zone-nc__facile input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ── Captures d'écran ────────────────────────────────────────────────────── */
.zone-captures { margin-top: 12px; }
.zone-captures__titre {
  font-size: 10px;
  font-weight: 700;
  color: var(--texte-discret);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.captures-liste { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.capture-miniature {
  position: relative;
  width: 80px; height: 60px;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--bordure-forte);
  cursor: pointer;
  flex-shrink: 0;
}
.capture-miniature img { width: 100%; height: 100%; object-fit: cover; }
.capture-miniature__suppr {
  position: absolute;
  top: 2px; right: 2px;
  background: rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: var(--rayon);
  color: var(--rouge);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 5px;
  display: none;
  line-height: 1.4;
}
.capture-miniature:hover .capture-miniature__suppr { display: block; }

.btn-ajouter-capture {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px dashed var(--bordure-forte);
  border-radius: 4px;
  background: transparent;
  color: var(--texte-discret);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ajouter-capture:hover { border-color: var(--accent); color: var(--accent); }

/* ── Accordéon tests & références ────────────────────────────────────────── */
.accordeon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 15px 0px 2px 42px;
  transition: color 0.15s;
  width: 100%;
  text-align: left;
  letter-spacing: 0.01em;
}
.accordeon-toggle:hover { color: var(--accent-hover); }
.accordeon-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.accordeon-toggle__fleche { display: inline-block; font-size: 10px; transition: transform 0.15s; }
.accordeon-toggle.ouvert .accordeon-toggle__fleche { transform: rotate(90deg); }

.accordeon-contenu { display: none; padding: 8px 0 4px 42px; }
.accordeon-contenu.ouvert { display: block; }

.tests-liste { list-style: none; padding: 0; margin: 0; }
.tests-liste__item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--texte-secondaire);
  padding: 4px 0;
  border-bottom: 1px solid var(--bordure);
  line-height: 1.5;
}
.tests-liste__item:last-child { border-bottom: none; }
.tests-liste__num {
  font-family: var(--police-mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 32px;
}

.methodologie-titre {
  font-size: 10px;
  font-weight: 600;
  color: var(--texte-discret);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 8px 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: transparent;
  border: 1px solid var(--bordure-forte);
  padding: 3px 8px 2px;
  border-radius: var(--rayon-lg);
}
.methodologie-contenu { padding-left: 12px; margin-bottom: 6px; }
.methodologie-etape {
  font-size: 12px;
  color: var(--texte-secondaire);
  padding: 3px 0;
  display: flex;
  gap: 6px;
}
.methodologie-etape__puce { color: var(--accent); flex-shrink: 0; }
.methodologie-sous-liste { list-style: disc; padding-left: 20px; margin: 3px 0; }
.methodologie-sous-liste li { font-size: 12px; color: var(--texte-discret); padding: 1px 0; }

.recommandation-zone { padding: 10px 16px 12px 42px; border-top: 1px solid var(--bordure); }
.recommandation-toggle {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  color: var(--ambre); font-size: 12px; cursor: pointer; padding: 0;
}
.recommandation-contenu {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  color: var(--texte-secondaire);
  background: var(--ambre-fond);
  border-left: 3px solid var(--ambre);
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  line-height: 1.6;
}
.recommandation-contenu.ouvert { display: block; }

/* ── Panneau latéral droit ────────────────────────────────────────────────── */
.panneau-tests {
  position: fixed;
  top: calc(var(--hauteur-header) + var(--hauteur-statsbar));
  height: calc(100vh - var(--hauteur-header) - var(--hauteur-statsbar));
  right: -500px;
  width: 500px;
  background: var(--fond-surface);
  border: 1px solid var(--bordure-forte);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
  box-shadow: -4px 0 32px rgba(0,0,0,0.5);
}
.panneau-tests.ouvert { right: 0; }
.panneau-tests__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
  flex-shrink: 0;
}
.panneau-tests__titre { font-size: 14px; font-weight: 700; color: var(--texte-principal); line-height: 1.4; }
.panneau-tests__critere-id {
  font-family: var(--police-mono);
  font-size: 14px;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
}
.panneau-tests__fermer {
  background: none; border: none;
  color: var(--texte-discret); cursor: pointer;
  font-size: 16px; padding: 2px 6px;
  border-radius: var(--rayon); flex-shrink: 0; line-height: 1;
}
.panneau-tests__fermer:hover { background: var(--fond-surligne); color: var(--texte-principal); }
.panneau-tests__contenu { overflow-y: auto; flex: 1; padding: 0 0 24px; }

.panneau-test-item { border-bottom: 1px solid var(--bordure); padding: 10px 16px; }
.panneau-test-item__entete { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.panneau-test-item__num {
  font-family: var(--police-mono); font-size: 12px;
  color: var(--accent); flex-shrink: 0; padding-top: 2px; min-width: 36px;
}
.panneau-test-item__libelle { font-size: 14px; color: var(--texte-secondaire); line-height: 1.5; }

.panneau-meth-toggle {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--bordure-forte);
  color: var(--texte-discret);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 4px 10px; border-radius: var(--rayon);
  margin-top: 4px; transition: all 0.15s;
}
.panneau-meth-toggle:hover { border-color: var(--accent); color: var(--accent); }
.panneau-meth-toggle.ouvert { border-color: var(--accent); color: var(--accent); background: var(--accent-fond); }

.panneau-meth-contenu { display: none; margin-top: 8px; padding: 8px 10px; background: var(--fond-surligne); border-radius: var(--rayon); border-left: 2px solid var(--accent); }
.panneau-meth-contenu.ouvert { display: block; }
.panneau-meth-contenu ol { list-style: decimal; padding-left: 18px; margin: 0; }
.panneau-meth-contenu ol li { font-size: 14px; color: var(--texte-secondaire); padding: 2px 0; line-height: 1.5; }
.panneau-meth-contenu ul { list-style: disc; padding-left: 16px; margin: 3px 0 0; }
.panneau-meth-contenu ul li { font-size: 14px; color: var(--texte-discret); padding: 1px 0; }

.panneau-tests-overlay { display: none; position: fixed; inset: 0; z-index: 149; background: transparent; }
.panneau-tests-overlay.actif { display: block; }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.page-dashboard { 
    max-width: 90%; 
    margin: 0 auto; 
    padding: 50px 25px;
}
.dashboard__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard__titre {
  font-family: var(--police-titre);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.dashboard__sous-titre { font-size: 15px; color: var(--texte-discret); }

.carte-audit {
  background: var(--fond-surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 20px 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: border-color 0.2s;
}
.carte-audit:hover { border-color: var(--bordure-forte); }

.carte-audit__info { flex: 1; min-width: 0; }
.carte-audit__nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.carte-audit__meta { font-size: 15px; color: var(--texte-discret); }

.carte-audit__progression { text-align: center; min-width: 80px; }
.carte-audit__pct {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--police-mono);
  line-height: 1;
  margin-bottom: 2px;
}
.carte-audit__pct-label { 
    font-size: 13px; 
    color: var(--texte-discret); 
}

.carte-audit__sep { 
    height: 36px; 
    width: 1px; 
    background: var(--bordure); 
    flex-shrink: 0; 
}
    
.carte-audit__actions { 
    display: flex; gap: 6px; 
    flex-shrink: 0; 
    flex-wrap: wrap; 
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 4px 10px;
  display: inline-block;
  border-radius: var(--rayon);
}
.section-label--cours   { color: var(--violet-badge); background: var(--violet-fond); }
.section-label--termine { color: var(--vert);         background: var(--vert-fond); }

.etat-vide { text-align: center; padding: 80px 20px; color: var(--texte-discret); }
.etat-vide__icone { font-size: 48px; margin-bottom: 16px; }
.etat-vide__texte { font-size: 15px; line-height: 1.7; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-fond {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 16px;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--fond-surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-lg);
  width: 100%; max-width: 580px;
  max-height: 90vh; overflow-y: auto;
  padding: 28px 32px;
  box-shadow: var(--ombre);
}
.modal__titre {
  font-family: var(--police-titre);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.modal__pied { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ── Messages flash ───────────────────────────────────────────────────────── */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--rayon);
  margin-bottom: 20px; font-size: 14px;
}
.flash--succes { background: var(--vert-fond);  color: var(--vert);  border: 1px solid rgba(52,203,106,0.25); }
.flash--erreur { background: var(--rouge-fond); color: var(--rouge); border: 1px solid rgba(248,113,113,0.25); }
.flash--info   { background: var(--accent-fond); color: var(--accent); border: 1px solid rgba(61,217,184,0.25); }

/* ── Rapport ──────────────────────────────────────────────────────────────── */
.page-rapport { max-width: 1100px; margin: 0 auto; padding: 32px 24px 60px; }
.rapport__entete { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--bordure); }
.rapport__titre {
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--texte-principal);
  margin-bottom: 6px;
}
.rapport__meta { font-size: 12px; color: var(--texte-discret); }
.rapport__meta a { color: var(--accent); }

.kpis-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 36px; }
.kpi-carte {
  background: var(--fond-surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 16px 20px;
}
.kpi-carte__valeur { font-size: 32px; font-weight: 800; font-family: var(--police-mono); line-height: 1.1; margin-bottom: 6px; }
.kpi-carte__libelle { font-size: 13px; font-weight: 600; color: var(--texte-secondaire); margin-bottom: 3px; }
.kpi-carte__sous { font-size: 11px; color: var(--texte-discret); }

.rapport-section { margin-bottom: 40px; }
.rapport-section__titre {
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  color: var(--texte-principal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.rapport-section__titre i { color: var(--accent); font-size: 14px; }

.tableau-thematiques { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 14px;
    font-weight: 500;
    }
.tableau-thematiques th, .tableau-thematiques td { padding: 10px 14px; border-bottom: 1px solid var(--bordure); color: var(--texte-secondaire); }
.tableau-thematiques thead th {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--texte-discret);
  background: var(--fond-surligne);
}

.nc-item {
  background: var(--fond-surface);
  border: 1px solid var(--bordure);
  border-left: 2px solid var(--rouge);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 12px 16px; margin-bottom: 8px;
}
.nc-item__libelle { 
    font-size: 15px; 
    font-weight: 600; 
    line-height: 1.5em;
    color: var(--texte-principal); 
    margin-bottom: 6px; 
    display: flex; 
    align-items: baseline; 
    gap: 4px; 
    flex-wrap: wrap;
    }
.nc-item__meta { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-wrap: wrap; 
    font-size: 12px; 
    font-weight: 600;
    color: var(--texte-discret); 
    margin: 10px 5px 5px; 
}
.nc-item__commentaire {
  font-size: 14px; 
  color: var(--texte-secondaire); 
  line-height: 1.6;
  padding: 8px 12px; 
  background: var(--fond-surligne); 
  border-radius: var(--rayon); 
  margin-top: 10px;
}
.nc-item__commentaire p { margin: 0 5px 5px; }
.nc-item__commentaire ul, .nc-item__commentaire ol { padding-left: 18px; margin: 4px 0; }

/* ── Tableau de synthèse ──────────────────────────────────────────────────── */
.tableau-synthese { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.tableau-synthese th, .tableau-synthese td { padding: 6px; border: 1px solid var(--bordure); white-space: nowrap; vertical-align: middle; }
.td-intitule { white-space: normal !important; word-break: break-word; }
.tableau-synthese thead th {
  background: var(--fond-surligne); font-size: 10px; font-weight: 700;
  color: var(--texte-discret); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center; position: sticky; top: 0; z-index: 2;
}
.th-critere   { width: 5%; }
.th-thematique{ width: 12%; text-align: left !important; }
.th-intitule  { width: auto; text-align: left !important; }
.th-nvx       { width: 4%; }
.th-page      { width: 48px; }
.th-global    { width: 60px; text-align: center; background: var(--bleu-synthese) !important; color: #fff !important; border: 2px solid var(--bleu-synthese) !important; }
.td-thematique{ font-weight: 600; color: var(--texte-secondaire); }
.td-ordre     { text-align: center; color: var(--texte-discret); font-family: var(--police-mono); }
.td-critere   { text-align: center; font-family: var(--police-mono); color: var(--accent); font-weight: 700; }
.td-nvx       { text-align: center; font-size: 10px; color: var(--texte-discret); }
.td-intitule  { font-size: 12px; color: var(--texte-secondaire); white-space: normal; line-height: 1.4; }
.td-statut    { text-align: center; font-weight: 700; font-size: 11px; font-family: var(--police-mono); }
.statut-cell-C  { background: var(--vert-fond);   color: var(--vert); }
.statut-cell-NC { background: var(--rouge-fond);  color: var(--rouge); }
.statut-cell-NA { background: var(--bleu-fond);   color: var(--bleu); }
.statut-cell-NT { background: transparent;        color: var(--texte-discret); }
.td-global { font-size: 12px; border-top: none; border-bottom: none; border-left: 2px solid var(--bleu-synthese) !important; border-right: 2px solid var(--bleu-synthese) !important; }
.tableau-synthese tbody tr:first-child .td-global { border-top: 2px solid var(--bleu-synthese) !important; }
.tableau-synthese tbody tr:last-child .td-global   { border-bottom: 2px solid var(--bleu-synthese) !important; }
.tableau-synthese tbody tr:hover td { background: var(--fond-surligne); }

#section-synthese {
    display: flex; 
    flex-direction: column;
    flex: 1 1 0%;
    overflow-y: auto;
    border: 1px solid var(--bordure-forte);
    padding: 35px 50px; 
}

/* Empêcher les enfants directs de s'étirer sur toute la hauteur */
#section-synthese > div {
    flex-shrink: 0;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 800;
  background: var(--fond-surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  padding: 10px 18px;
  font-size: 13px; color: var(--texte-principal);
  box-shadow: var(--ombre);
  transform: translateY(80px); opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none; max-width: 320px;
}
#toast.visible { transform: translateY(0); opacity: 1; }
#toast.toast-ok   { border-left: 3px solid var(--vert); }
#toast.toast-err  { border-left: 3px solid var(--rouge); }
#toast.toast-info { border-left: 3px solid var(--accent); }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
#lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 900; align-items: center; justify-content: center; cursor: pointer; }
#lightbox.ouvert { display: flex; }
#lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--rayon); box-shadow: var(--ombre); }

/* ── Éditeur Quill ────────────────────────────────────────────────────────── */
.ql-toolbar.ql-snow { background: var(--fond-surligne); border: 1px solid var(--bordure-forte) !important; border-bottom: none !important; border-radius: var(--rayon) var(--rayon) 0 0; padding: 6px 8px; }
.ql-container.ql-snow { background: var(--fond-input); border: 1px solid var(--bordure-forte) !important; border-radius: 0 0 var(--rayon) var(--rayon); font-family: var(--police); font-size: 13px; color: var(--texte-principal); min-height: 80px; }
.ql-editor { min-height: 80px; padding: 8px 12px; line-height: 1.55; color: var(--texte-principal); }
.ql-editor.ql-blank::before { color: var(--texte-discret); font-style: normal; font-size: 13px; }
.ql-snow .ql-stroke { stroke: var(--texte-secondaire) !important; }
.ql-snow .ql-fill { fill: var(--texte-secondaire) !important; }
.ql-snow .ql-picker-label { color: var(--texte-secondaire) !important; }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent) !important; }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent) !important; }
.ql-editor ul, .ql-editor ol { padding-left: 20px; }
.ql-editor strong { color: var(--texte-principal); }
.ql-editor a { color: var(--accent); }

/* ── Indicateur de sauvegarde ────────────────────────────────────────────── */
.indicateur-sauvegarde { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texte-discret); }
.point-sauvegarde { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); flex-shrink: 0; }
.point-sauvegarde.en-cours { background: var(--ambre); animation: clignoter 0.8s infinite; }
@keyframes clignoter { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .audit-sidebar { display: none; }
  .kpis-grille { grid-template-columns: 1fr 1fr; }
  .graphiques-grille { grid-template-columns: 1fr; }
  .zone-nc__grille { grid-template-columns: 1fr; }
  .page-dashboard, .page-rapport { padding: 24px 16px; }
  .header-global { padding: 0 12px; }
  .barre-stats { padding: 0 12px; }
}

@media print {
  .header-global, .no-impression { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .kpi-carte, .graphique-carte, .rapport-section { break-inside: avoid; }
}

/* ── Déclaration d'accessibilité ──────────────────────────────────────────── */
.declaration-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  height: calc(100vh - var(--hauteur-header));
  overflow: hidden;
}
.declaration-formulaire {
  background: var(--fond-surface);
  border-right: 1px solid var(--bordure);
  overflow-y: auto;
  padding: 20px;
}
.declaration-preview {
  overflow-y: auto;
  padding: 32px 40px;
  background: var(--fond-page);
}
.doc-declaration {
  max-width: 800px;
  margin: 0 auto;
  background: var(--fond-surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 40px 48px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--texte-secondaire);
}
.doc-declaration h1 { font-size: 26px; font-weight: 700; color: var(--texte-principal); margin-bottom: 6px; }
.doc-declaration h2 { font-size: 16px; font-weight: 700; color: var(--texte-principal); margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bordure-forte); }
.doc-declaration h3 { font-size: 13px; font-weight: 700; color: var(--texte-principal); margin: 16px 0 6px; }
.doc-declaration p { margin: 0 0 10px; }
.doc-declaration ul { margin: 6px 0 12px; padding-left: 20px; }
.doc-declaration ul li { margin-bottom: 4px; }
.doc-declaration .etat-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 13px; margin-left: 8px; }
.doc-declaration .etat-total   { background: var(--vert-fond);  color: var(--vert); }
.doc-declaration .etat-partiel { background: var(--ambre-fond); color: var(--ambre); }
.doc-declaration .etat-non     { background: var(--rouge-fond); color: var(--rouge); }
.doc-declaration .taux-block { display: inline-flex; align-items: center; gap: 12px; background: var(--fond-surligne); border-radius: var(--rayon); padding: 10px 16px; margin: 8px 0; }
.doc-declaration .taux-val { font-size: 28px; font-weight: 800; font-family: var(--police-mono); }
.doc-declaration a { color: var(--accent); }
.doc-declaration .meta { font-size: 12px; color: var(--texte-discret); margin-bottom: 24px; }

/* Formulaire de configuration */
.config-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bordure); }
.config-section:last-child { border-bottom: none; }
.config-titre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-discret); margin-bottom: 10px; }
.config-champ { margin-bottom: 10px; }
.config-champ label { display: block; font-size: 11px; color: var(--texte-discret); margin-bottom: 4px; }
.config-champ input,
.config-champ select,
.config-champ textarea { width: 100%; box-sizing: border-box; background: var(--fond-input); border: 1px solid var(--bordure-forte); border-radius: var(--rayon); color: var(--texte-principal); font-size: 12px; padding: 6px 10px; font-family: var(--police); }
.config-champ textarea { min-height: 70px; resize: vertical; }
.config-champ input:focus,
.config-champ select:focus,
.config-champ textarea:focus { outline: none; border-color: var(--accent); }
.config-champ textarea.masque { display: none; }
.declaration-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* Print déclaration */
@media print {
  .declaration-formulaire, .declaration-actions { display: none !important; }
  .declaration-layout { display: block; height: auto; }
  .declaration-preview { padding: 0; }
  .doc-declaration { border: none; border-radius: 0; padding: 20px; max-width: 100%; }
}