/* =====================================================================
   TheBotAnalyzer — feuille de style unique.
   Thème sombre « bleu nuit », accents cyan et violet.
   Aucune dépendance externe, aucune police distante.
   ===================================================================== */

:root {
  /* Fonds */
  --bg:            #0B1020;
  --bg-elevated:   #111730;
  --surface:       #141A2E;
  --surface-2:     #1A2138;
  --surface-hover: #1E2742;
  --border:        #23304F;
  --border-soft:   #1B2340;

  /* Textes */
  --text:       #E8ECF8;
  --text-muted: #8DA0C4;
  /* Éclairci depuis #64748B : la valeur d'origine tombait à 3,63 sur les
     cartes, sous le seuil de 4,5 exigé pour du texte courant — or elle sert
     aux en-têtes de tableaux et à l'avertissement sur les risques. */
  --text-dim:   #7A8AA0;

  /* Accents */
  --accent:       #22D3EE;
  --accent-dark:  #0E7490;
  --accent-soft:  rgba(34, 211, 238, .12);
  --violet:       #8B5CF6;
  --violet-soft:  rgba(139, 92, 246, .14);

  /* Sémantique */
  --up:        #34D399;
  --up-soft:   rgba(52, 211, 153, .13);
  --down:      #FB7185;
  --down-soft: rgba(251, 113, 133, .13);
  --warn:      #FBBF24;
  --warn-soft: rgba(251, 191, 36, .13);

  /* Notes */
  --grade-a: #34D399;
  --grade-b: #22D3EE;
  --grade-c: #FBBF24;
  --grade-d: #FB7185;

  /* Formes */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow:    0 18px 40px -24px rgba(0, 0, 0, .85);
  --ring:      0 0 0 3px rgba(34, 211, 238, .22);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --max: 1180px;
}

/* --- Réinitialisation ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

::selection { background: var(--accent-soft); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* --- Structure ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; }
.wrap-wide { max-width: 1400px; }

.section { padding: 72px 0; }
.section-sm { padding: 44px 0; }
.section-alt { background: var(--bg-elevated); border-block: 1px solid var(--border-soft); }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-end { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); font-size: .875rem; }
.mono  { font-family: var(--mono); font-size: .9em; }
.up    { color: var(--up); }
.down  { color: var(--down); }
.warn  { color: var(--warn); }
.nowrap { white-space: nowrap; }
.lead { font-size: 1.15rem; color: var(--text-muted); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* --- En-tête --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 16, 32, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--violet));
  color: #06121C; font-weight: 800; font-size: 15px; letter-spacing: -.04em;
}

.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

/* `:not(.btn)` est indispensable : `.nav a` est plus spécifique que
   `.btn-primary`, et sans cette exclusion le texte du bouton hériterait du
   gris des liens — illisible sur le fond cyan. */
.nav a:not(.btn) { color: var(--text-muted); font-size: .94rem; font-weight: 500; }
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] { color: var(--text); text-decoration: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 8px 11px; cursor: pointer; font-size: 15px;
}

/* Sélecteur de langue — liste déroulante drapeau + nom natif. */
.lang-dd { position: relative; display: inline-block; }

.lang-dd-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-muted);
  font: 700 .8rem/1 var(--sans); letter-spacing: .02em; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lang-dd-trigger:hover { background: var(--surface-hover); color: var(--text); border-color: var(--accent-dark); }
.lang-dd-flag { font-size: 1.05rem; line-height: 1; }
.lang-dd-caret { transition: transform .18s ease; opacity: .7; }
.lang-dd.is-open .lang-dd-caret { transform: rotate(180deg); }

.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 224px; max-width: calc(100vw - 32px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.lang-dd.is-open .lang-dd-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.lang-dd-menu li + li { border-top: 1px solid var(--border-soft); }

.lang-dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 9px;
  color: var(--text); font-weight: 600; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
}
.lang-dd-item:hover { background: var(--surface-hover); text-decoration: none; }
.lang-dd-item .lang-dd-flag { font-size: 1.25rem; width: 1.5em; text-align: center; }
.lang-dd-item .lang-dd-name { flex: 1; }
.lang-dd-item.is-active { color: var(--up); }
.lang-dd-item.is-active:hover { background: var(--up-soft); }
.lang-dd-check { margin-left: 8px; color: var(--up); flex: 0 0 auto; }

/* Variante barre latérale de l'espace applicatif : pleine largeur, menu vers le haut. */
.side-lang { padding: 0 10px; margin-top: 4px; }
.lang-dd-side { display: block; }
.lang-dd-side .lang-dd-trigger { width: 100%; justify-content: flex-start; }
.lang-dd-side .lang-dd-trigger .lang-dd-caret { margin-left: auto; }
.lang-dd-side .lang-dd-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 100%; transform: translateY(6px); }
.lang-dd-side.is-open .lang-dd-menu { transform: translateY(0); }

/* --- Boutons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm);
  font: 600 .95rem/1 var(--sans); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, transform .08s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--accent); color: #06121C; }
.btn-primary:hover { background: #67E8F9; }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--accent-dark); }

.btn-soft { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-soft:hover { background: var(--surface-hover); }

.btn-danger { background: transparent; color: var(--down); border-color: rgba(251, 113, 133, .35); }
.btn-danger:hover { background: var(--down-soft); }

.btn-sm { padding: 7px 13px; font-size: .84rem; border-radius: 8px; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }

/* --- Cartes ---------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.card-tight { padding: 16px; }
.card-hover { transition: border-color .15s, transform .15s; }
.card-hover:hover { border-color: var(--accent-dark); transform: translateY(-2px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h2, .card-head h3 { margin: 0; }
/* Un titre de section de carte est un <h2> : la page porte déjà un <h1>,
   et sauter directement au <h3> laissait un trou dans la hiérarchie que
   les lecteurs d'écran annoncent. Seule la structure change — la taille
   reste celle d'un <h3>, la mise en page est identique. */
.card h2 { font-size: 1.2rem; }
.card-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 600; }

/* --- Statistiques ---------------------------------------------------- */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); font-weight: 600; }
.stat-value { font-size: 1.65rem; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .84rem; color: var(--text-muted); }

/* --- Étiquettes ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-up { background: var(--up-soft); color: var(--up); border-color: rgba(52, 211, 153, .3); }
.badge-down { background: var(--down-soft); color: var(--down); border-color: rgba(251, 113, 133, .3); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(251, 191, 36, .3); }
.badge-info { background: var(--accent-soft); color: var(--accent); border-color: rgba(34, 211, 238, .3); }
.badge-violet { background: var(--violet-soft); color: #C4B5FD; border-color: rgba(139, 92, 246, .3); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-live { box-shadow: 0 0 0 0 currentColor; animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* --- Note de santé --------------------------------------------------- */
.grade {
  display: grid; place-items: center; flex: none;
  width: 62px; height: 62px; border-radius: 16px;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em;
}
.grade-sm { width: 38px; height: 38px; border-radius: 11px; font-size: 1.15rem; }
.grade-lg { width: 96px; height: 96px; border-radius: 24px; font-size: 3rem; }

.grade-A { background: rgba(52, 211, 153, .14); color: var(--grade-a); border: 1px solid rgba(52, 211, 153, .34); }
.grade-B { background: rgba(34, 211, 238, .14); color: var(--grade-b); border: 1px solid rgba(34, 211, 238, .34); }
.grade-C { background: rgba(251, 191, 36, .14); color: var(--grade-c); border: 1px solid rgba(251, 191, 36, .34); }
.grade-D { background: rgba(251, 113, 133, .14); color: var(--grade-d); border: 1px solid rgba(251, 113, 133, .34); }

/* --- Jauges ---------------------------------------------------------- */
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.meter-up > span { background: var(--up); }
.meter-warn > span { background: var(--warn); }
.meter-down > span { background: var(--down); }
.meter-violet > span { background: var(--violet); }

/* Barre de note d'un robot : jauge 0-100 colorée par grade. */
.score-bar { width: 100%; }
.score-bar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.score-bar-num { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score-bar-max { color: var(--text-muted); font-weight: 500; font-size: .8rem; }
.score-bar-track { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.score-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; background: var(--accent); }
.grade-fill-A { background: var(--grade-a); }
.grade-fill-B { background: var(--grade-b); }
.grade-fill-C { background: var(--grade-c); }
.grade-fill-D { background: var(--grade-d); }
/* Variante liste : chiffres plus discrets, jauge plus fine. */
.score-bar-compact .score-bar-head { margin-bottom: 4px; }
.score-bar-compact .score-bar-num { font-size: .95rem; }
.score-bar-compact .score-bar-track { height: 6px; }
.score-bar-compact .grade-sm { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; }

/* --- Formulaires ----------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field .hint { font-size: .82rem; color: var(--text-dim); margin-top: 6px; }
.field .error { font-size: .82rem; color: var(--down); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 400 .95rem var(--sans); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-dark); box-shadow: var(--ring); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
textarea { min-height: 120px; resize: vertical; }

/* Marche à suivre numérotée : le chiffre porte l'ordre, et l'ordre est ce
   qui manquait — sans lui, on cherche où coller une adresse qui ne sert à
   rien. */
.etapes { counter-reset: etape; list-style: none; margin: 16px 0 0; padding: 0; }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 14px 34px;
  color: var(--text-muted);
  font-size: .93rem;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dark);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.etapes li:last-child { padding-bottom: 0; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%238DA0C4' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 36px;
}
input[type="file"] { padding: 10px; background: var(--bg-elevated); border: 1px dashed var(--border); border-radius: var(--radius-sm); width: 100%; color: var(--text-muted); }

.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .92rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }

.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 0 0 20px; }
legend { padding: 0 8px; font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }

/* --- Tableaux -------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
table.data th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); font-weight: 700; white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* --- Listes de métriques --------------------------------------------- */
.metrics { display: grid; gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.metrics > div { background: var(--surface); padding: 13px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.metrics dt, .metrics .m-label { color: var(--text-muted); font-size: .88rem; margin: 0; }
.metrics dd, .metrics .m-value { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .92rem; }
.metrics-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Messages -------------------------------------------------------- */
.alert-box {
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
  border: 1px solid var(--border); background: var(--surface); font-size: .93rem;
  display: flex; gap: 12px; align-items: flex-start;
}
.alert-box strong { font-weight: 700; }
.alert-success { background: var(--up-soft); border-color: rgba(52, 211, 153, .32); color: #A7F3D0; }
.alert-error   { background: var(--down-soft); border-color: rgba(251, 113, 133, .32); color: #FECDD3; }
.alert-info    { background: var(--accent-soft); border-color: rgba(34, 211, 238, .32); color: #A5F3FC; }
.alert-warn    { background: var(--warn-soft); border-color: rgba(251, 191, 36, .32); color: #FDE68A; }

/* --- Drapeaux de risque ---------------------------------------------- */
.flag { border-radius: var(--radius); border: 1px solid var(--border); padding: 18px 20px; background: var(--surface); }
.flag + .flag { margin-top: 12px; }
.flag-critique      { border-left: 3px solid var(--down); }
.flag-avertissement { border-left: 3px solid var(--warn); }
.flag-info          { border-left: 3px solid var(--accent); }
.flag h3, .flag h4 { margin: 0 0 6px; font-size: 1rem; }
.flag p { margin: 0 0 12px; color: var(--text-muted); font-size: .93rem; }
.flag-evidence { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-evidence span {
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 5px 10px; font-size: .8rem; color: var(--text-muted);
  font-family: var(--mono);
}
.flag-evidence span b { color: var(--text); font-weight: 600; }

/* --- Graphiques ------------------------------------------------------ */
.chart { width: 100%; height: 220px; display: block; }
.chart-sm { height: 120px; }
.chart-lg { height: 300px; }
.spark { width: 100%; height: 34px; display: block; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* --- Calendrier ------------------------------------------------------ */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar .cal-head {
  text-align: center; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim); font-weight: 700; padding-bottom: 4px;
}
.cal-day {
  aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  background: var(--surface); padding: 7px 8px; display: flex; flex-direction: column;
  justify-content: space-between; min-height: 62px;
}
.cal-day .d { font-size: .72rem; color: var(--text-dim); font-weight: 600; }
.cal-day .v { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-day.is-empty { background: transparent; border-color: transparent; }
.cal-day.is-up   { background: var(--up-soft); border-color: rgba(52, 211, 153, .28); }
.cal-day.is-down { background: var(--down-soft); border-color: rgba(251, 113, 133, .28); }
.cal-day.is-today { outline: 2px solid var(--accent-dark); outline-offset: -1px; }

/* Repère d'annonce économique : une pastille en haut à droite de la case,
   chiffrée dès qu'il y a plus d'une publication dans la journée. Elle est
   posée en absolu pour ne pas déplacer le résultat du jour, qui reste ce
   que l'œil vient chercher. */
.cal-day { position: relative; }
.cal-news {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: .6rem;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  cursor: help;
}

/* --- Espace applicatif ----------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.app-side {
  background: var(--bg-elevated); border-right: 1px solid var(--border-soft);
  padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-side .brand { margin: 0 8px 24px; }

.side-group { margin-bottom: 22px; }
.side-group h5 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); font-weight: 700; margin: 0 0 8px; padding: 0 10px;
}
.side-link {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 11px; border-radius: 9px; color: var(--text-muted);
  font-size: .91rem; font-weight: 500; margin-bottom: 2px;
}
.side-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-link .pill {
  background: var(--down); color: #2A0510; border-radius: 999px;
  font-size: .68rem; font-weight: 800; padding: 1px 7px; min-width: 19px; text-align: center;
}

.app-main { padding: 26px 30px 70px; min-width: 0; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.app-head h1 { font-size: 1.65rem; margin: 0 0 4px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.tabs a {
  padding: 9px 15px; color: var(--text-muted); font-size: .92rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Vide ------------------------------------------------------------ */
.empty { text-align: center; padding: 52px 24px; color: var(--text-muted); }
.empty h3 { color: var(--text); margin-bottom: 8px; }
.empty p { max-width: 460px; margin: 0 auto 20px; }

/* --- Site public ----------------------------------------------------- */
.hero { padding: 90px 0 70px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -50% 20% auto; height: 460px;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, .16), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero p.lead { max-width: 62ch; margin-inline: auto; font-size: 1.16rem; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .84rem; color: var(--text-muted); font-weight: 500;
}

.feature { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.feature-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 20px; margin-bottom: 16px;
}
.feature h3 { font-size: 1.08rem; margin-bottom: 8px; }
.feature p { color: var(--text-muted); font-size: .94rem; margin: 0; }

.step { display: flex; gap: 18px; align-items: flex-start; }
.step + .step { margin-top: 26px; }
.step-num {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--violet-soft); color: #C4B5FD; font-weight: 800; font-size: .95rem;
  border: 1px solid rgba(139, 92, 246, .3);
}
.step h3 { font-size: 1.02rem; margin-bottom: 5px; }
.step p { color: var(--text-muted); font-size: .94rem; margin: 0; }

/* Tarifs */
.plan { display: flex; flex-direction: column; position: relative; }
.plan.is-popular { border-color: var(--accent-dark); box-shadow: 0 0 0 1px var(--accent-dark); }
.plan-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #06121C; font-size: .72rem; font-weight: 800;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}
.plan-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 2px; }
.plan-price small { font-size: .95rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
.plan li { padding: 6px 0 6px 26px; position: relative; font-size: .92rem; color: var(--text-muted); }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--up); font-weight: 800; }
.plan li.no { color: var(--text-dim); }
.plan li.no::before { content: "—"; color: var(--text-dim); }

/* FAQ */
details.faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 0; margin-bottom: 10px;
}
details.faq > summary {
  cursor: pointer; padding: 17px 20px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: .98rem;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; font-weight: 300; line-height: 1; flex: none; }
details.faq[open] > summary::after { content: "−"; }
details.faq > div { padding: 0 20px 18px; color: var(--text-muted); font-size: .94rem; }

/* Zone de dépôt — c'est un <label> : sans `display:block`, il reste inline
   et sa bordure se fragmente autour des enfants de type bloc. */
.dropzone {
  display: block; width: 100%;
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  padding: 46px 26px; text-align: center; background: var(--bg-elevated);
  transition: border-color .15s, background .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type="file"] { display: none; }
.dropzone-icon { font-size: 2.4rem; margin-bottom: 12px; }
.dropzone h3 { margin-bottom: 6px; font-size: 1.1rem; }
.dropzone p { color: var(--text-muted); font-size: .91rem; margin: 0; }
.dropzone .filename { margin-top: 14px; font-family: var(--mono); font-size: .86rem; color: var(--accent); }

/* --- Pied de page ---------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-soft); padding: 52px 0 34px; background: var(--bg-elevated); margin-top: 60px; }
/* `repeat(auto-fit, …)` ne peut pas cohabiter avec une piste flexible :
   la déclaration entière deviendrait invalide et la grille retomberait sur
   une colonne unique. Les colonnes sont donc énumérées explicitement. */
.footer-grid {
  display: grid; gap: 34px 28px;
  grid-template-columns: 1.7fr repeat(4, minmax(120px, 1fr));
  align-items: start;
}
.footer-grid h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); margin: 0 0 12px; font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-muted); font-size: .9rem; }
.footer-grid a:hover { color: var(--text); }
.footer-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-soft); font-size: .82rem; color: var(--text-dim); }
.footer-legal p { margin: 0 0 8px; }

/* --- Bandeau cookies -------------------------------------------------- */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 560px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.cookie-bar p { font-size: .88rem; color: var(--text-muted); margin: 0 0 14px; }

/* --- Impression ------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Impression.

   Un diagnostic se lit à l'écran et s'archive en PDF : le second usage
   n'est pas accessoire, c'est ce qu'on transmet à un client ou à un
   associé. Passer le fond en blanc ne suffisait pas — les couleurs
   sémantiques, calibrées pour du bleu nuit, restaient telles quelles :
   `.dim` tombait à 3,52 sur papier, `.muted` à 2,64, `.up` à 1,92. Tout
   le texte explicatif de la page de rapport, ses en-têtes de tableau et
   ses montants colorés devenaient illisibles.

   Ce sont les variables qui sont redéfinies, non chaque règle : la
   feuille entière suit d'un coup, y compris ce qui s'y ajoutera. Les
   valeurs sont contrôlées par `bin/contraste.php`, section impression.
   --------------------------------------------------------------------- */
@media print {
  :root {
    --bg:            #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #F4F4F5;
    --surface-hover: #F4F4F5;
    --border:        #A1A1AA;
    --border-soft:   #D4D4D8;

    --text:       #18181B;
    --text-muted: #3F3F46;
    --text-dim:   #52525B;

    --accent:      #115E75;
    --accent-dark: #0B4757;
    --accent-soft: #FFFFFF;
    --violet:      #5B21B6;
    --violet-soft: #FFFFFF;

    --up:        #046C4E;
    --up-soft:   #FFFFFF;
    --down:      #B42318;
    --down-soft: #FFFFFF;
    --warn:      #8A5A00;
    --warn-soft: #FFFFFF;

    --grade-a: #046C4E;
    --grade-b: #115E75;
    --grade-c: #8A5A00;
    --grade-d: #B42318;

    --shadow: none;
  }

  .site-header, .site-footer, .app-side, .cookie-bar, .btn, .tabs { display: none !important; }
  body { background: #fff; color: var(--text); }
  .card, .stat, .metrics > div { border-color: var(--border-soft); background: #fff; }
  .app-shell { grid-template-columns: 1fr; }
  a { color: var(--text); }

  /* Les étiquettes tiraient leur lisibilité d'un fond teinté, devenu
     blanc : une bordure prend le relais. */
  .badge { border: 1px solid var(--border); }

  /* Les couleurs des graphiques sont posées par le script dans les
     attributs SVG, hors d'atteinte d'une variable. Un assombrissement
     global les ramène dans une plage imprimable — approximatif, mais
     préférable à des aplats pâles sur blanc. */
  .chart { filter: saturate(1.4) brightness(.72); }

  /* Une carte coupée en deux entre deux pages perd son titre. */
  .card { break-inside: avoid; page-break-inside: avoid; }
}

/* --- Adaptatif -------------------------------------------------------- */
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex; gap: 6px; overflow-x: auto; padding: 12px;
  }
  .app-side .brand, .side-group h5 { display: none; }
  .side-group { display: flex; gap: 6px; margin: 0; }
  .side-link { white-space: nowrap; margin: 0; }
  .app-main { padding: 20px 16px 60px; }
}

/* La navigation complète cesse de tenir bien avant le seuil mobile
   habituel : on bascule sur le menu déroulant dès 1024 px. */
@media (max-width: 1024px) {
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: 10px 20px 18px; box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin-top: 12px; }
  .nav-toggle { display: block; margin-left: auto; }
}

@media (max-width: 900px) {
  /* Le bloc de marque passe pleine largeur, les colonnes de liens par deux. */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .section { padding: 48px 0; }
  .hero { padding: 56px 0 44px; }
  .card { padding: 18px; }
  .calendar { gap: 4px; }
  .cal-day { min-height: 48px; padding: 5px 6px; }
  .cal-day .v { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Barre de navigation de l'administration

   Les sections étaient jusqu'ici atteignables par des boutons épars dans
   la vue générale. Un onglet actif net évite de se demander où l'on est
   quand on saute d'un écran à l'autre.
   --------------------------------------------------------------------- */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 22px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-tab {
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  color: var(--text-dim);
  font-size: .89rem;
  font-weight: 600;
  text-decoration: none;
  /* Le trait est porté par le lien lui-même pour qu'il recouvre celui du
     conteneur : sans cela l'onglet actif resterait souligné. */
  border-bottom: 2px solid transparent;
  margin-bottom: -3px;
  transition: color .15s, border-color .15s, background .15s;
}

.admin-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

.admin-tab.is-active {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

@media (max-width: 640px) {
  .admin-nav { gap: 2px; }
  .admin-tab { padding: 7px 10px; font-size: .82rem; }
}

/* ---------------------------------------------------------------------
   Encadré « comment lire cette note »

   Placé sous le verdict, il explique la composition du score et le sens
   de la fiabilité. Ton volontairement effacé : c'est une aide de lecture,
   pas un message d'alerte.
   --------------------------------------------------------------------- */
.note-lecture {
  border-left: 2px solid var(--border-soft);
  padding: 8px 0 8px 14px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 78ch;
}

.note-lecture strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Ventilation d'un pilier : ses sous-composantes

   Trois colonnes par ligne — le libellé, la valeur réelle, les points
   obtenus sur le maximum. Rend le score du pilier transparent : on voit
   quelle mesure l'a fait, et laquelle l'a plombé.
   --------------------------------------------------------------------- */
.pillar-detail {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-soft);
  font-size: .76rem;
}

.pillar-detail li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.pillar-detail .pd-label { color: var(--text-dim); }

.pillar-detail .pd-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pillar-detail .pd-pts {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}

.pillar-detail .pd-max { color: var(--text-dim); }

/* Plan d'action : leviers pour viser la note maximale, du plus payant au moins. */
.action-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: none;
}
.action-plan li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ap-gain {
  flex: 0 0 auto;
  min-width: 3rem;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--up-soft);
  color: var(--up);
  border: 1px solid rgba(52, 211, 153, .28);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  line-height: 1.1;
}
.ap-gain .ap-pts {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .8;
}
.ap-body {
  flex: 1;
  line-height: 1.45;
  padding-top: 2px;
}
.ap-pillar {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Étiquette réservée aux lecteurs d'écran : le champ « code promo » est
   identifié par son bouton pour qui voit la page, par ce libellé pour qui
   ne la voit pas. Un placeholder n'est pas une étiquette. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Prix d'avant la remise : barré et effacé, il situe l'économie sans
   disputer la lecture au prix réellement dû. */
.prix-barre {
  text-decoration: line-through;
  color: var(--text-dim);
  font-size: .62em;
  font-weight: 600;
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Le mur : ce que voit un visiteur sans compte à la place du détail.
   Aucun masquage visuel — le détail n'est pas rendu du tout, côté serveur.
   Une carte floutée se lit dans la source, celle-ci n'existe pas.
   --------------------------------------------------------------------- */
.mur { text-align: center; border-color: var(--accent-dark); }
.mur-intro { max-width: 64ch; margin-inline: auto; }
.mur-liste {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  max-width: 60ch;
}
.mur-liste li {
  position: relative;
  padding-left: 26px;
  line-height: 1.45;
  font-size: .93rem;
}
/* La coche est décorative : elle double une liste déjà lisible sans elle. */
.mur-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .45em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dark);
}