/* ==========================================================================
   KeyWard — socle commun à toutes les pages du site
   --------------------------------------------------------------------------
   Pourquoi ce fichier existe : la palette était recopiée dans CHACUNE des 14 pages,
   en <style> inline. Quatorze copies. C'est la raison mécanique pour laquelle le site a
   dérivé de l'application — et pour laquelle il dérivait aussi de lui-même : toute
   modification devait être faite quatorze fois, donc elle ne l'était jamais partout.

   Vérifié avant l'extraction : aucun jeton n'avait de valeur différente d'une page à
   l'autre. L'extraction ne change donc l'apparence d'aucune page ; elle ne fait que
   donner à toutes celles qui en manquaient les jetons qu'elles n'avaient pas.

   À charger APRÈS fonts.css et AVANT le <style> propre à la page : chaque page garde ses
   composants, et peut surcharger ce socle si elle a une vraie raison de le faire.
   ========================================================================== */

:root {
  /* ==========================================================================
     REFONTE DU 08/10/2026 : le site s'accorde au LOGICIEL — thème sombre « coffre-fort »,
     violet, un seul thème (le bouton clair/sombre est retiré). Les NOMS des jetons sont
     gardés (--vault, --brass, --ink…) : 23 pages s'en servent, et c'est ce qui fait basculer
     tout le site d'un coup. Seules les valeurs changent. Maquettes validées par Lucas.
     ========================================================================== */
  color-scheme: dark;

  /* ---------- Surfaces ---------- */
  --vault: #05030B;                    /* le fond de page */
  --vault-deep: #120E1B;               /* les cartes : OPAQUE, pour qu'on puisse en mesurer le contraste */
  --vault-soft: #191325;               /* champs, pastilles, bandes */
  --vault-line: rgba(255, 255, 255, 0.12);
  --vault-line-forte: rgba(255, 255, 255, 0.18);
  /* La carte « verre dépoli » de la maquette, posée sur le fond animé (avec backdrop-filter). */
  --verre: rgba(22, 17, 32, 0.74);
  --verre-haut: rgba(255, 255, 255, 0.08);

  /* ---------- La marque : le violet ----------
     Les noms --brass* restent ceux du laiton d'avant : les pages s'en servent partout.
     --brass est le FOND des boutons : #7C3AED et pas le #8B5CF6 de la maquette, parce que
     le blanc posé dessus n'y donne que 4,2 sur 1, sous le seuil de 4,5 ; sur #7C3AED, 5,7.
     --brass-light est le violet de TEXTE sur fond sombre (11,1 sur le fond de page). */
  --brass: #7C3AED;
  --brass-light: #C4B5FD;
  --brass-pale: #8B5CF6;
  --sur-brass: #FFFFFF;
  --accent: #8B5CF6;
  --accent-2: #7C3AED;
  --accent-bg: rgba(139, 92, 246, 0.15);
  --glow: rgba(139, 92, 246, 0.4);

  /* ---------- Texte ---------- */
  --ink: #ECEAF2;
  --ink-soft: #A6A0B6;
  /* Le troisième gris de la maquette (#726A82) tombe à 3,9 sur 1 sur le fond : illisible
     au sens des règles. Remonté à #8F88A0 (5,9). */
  --ink-faible: #8F88A0;

  /* ---------- États ---------- */
  --green: #2FD6A6;
  --green-soft: rgba(47, 214, 166, 0.15);
  --red: #F06A6A;
  --red-soft: rgba(240, 106, 106, 0.15);
  --amber: #F2B44D;
  --amber-soft: rgba(242, 180, 77, 0.15);

  --radius: 12px;

  /* ---------- Colonne latérale (pages applicatives : compte, admin) ---------- */
  --sidebar-text: #ECEAF2;
  --sidebar-text-dim: #A6A0B6;

  /* ---------- Typographie ----------
     JetBrains Mono est la monospace de l'APPLICATION. Le site servait Space Mono : deux
     produits, deux monospaces, alors que c'est précisément la police qui signe le registre
     technique. Servies localement, toutes : le produit vend la confidentialité, on n'appelle
     jamais fonts.googleapis.com au chargement. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Échelle d'espacement, reprise de l'application ----------
     Le site comptait 26 valeurs distinctes : tout était espacé presque pareil, donc rien ne
     se groupait. La règle qui compte : e1-e3 À L'INTÉRIEUR d'un groupe, e5 minimum ENTRE
     deux groupes, e6-e8 entre deux sections. C'est le CONTRASTE entre ces écarts qui sépare,
     pas les traits. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* ---------- Interlignage ---------- */
  --ligne-texte: 1.6;
  --ligne-libelle: 1.45;
  --ligne-titre: 1.2;
}

/* ==========================================================================
   Thème sombre : il n'y en a plus qu'UN depuis la refonte du 08/10/2026, porté par :root
   ci-dessus. L'ancien bloc [data-theme="dark"] est retiré ; l'attribut, encore posé par le
   bouton du guide d'utilisation (fabriqué dans le dépôt du logiciel), n'a plus d'effet.
   ========================================================================== */

/* ==========================================================================
   Sélecteur de langue des pages secondaires
   --------------------------------------------------------------------------
   Il n'existait que sur l'accueil : on choisissait l'anglais, on cliquait
   « Téléchargement », et la page revenait en français sans moyen d'en changer.
   ========================================================================== */

.barre-langue {
  display: flex;
  justify-content: flex-end;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e4) var(--e5) 0;
}
.barre-langue select {
  border: 1px solid var(--vault-line);
  background: none;
  border-radius: 999px;
  padding: var(--e1) var(--e3);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  cursor: pointer;
}
.barre-langue select:hover { border-color: var(--brass); color: var(--brass-light); }

/* Les pictogrammes du site suivent ceux de l'application : trait, monochrome,
   currentColor — jamais un émoji, qui ne se recolore pas et change de dessin
   selon le système. */
.ic { display: inline-block; vertical-align: -0.15em; }

/* Visible pour un lecteur d'écran, invisible à l'oeil. Sert aux libellés de champ qu'un
   indice de saisie ne remplace pas : un placeholder disparaît dès la première frappe, et
   n'est pas un libellé. Sans cette règle, le libellé s'affiche en clair au milieu du
   formulaire — ce qui a failli partir tel quel. */
.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;
}

/* ==========================================================================
   Base commune des pages
   --------------------------------------------------------------------------
   Ces règles étaient recopiées à l'identique dans chaque page. Elles sont chargées AVANT
   le <style> de la page, qui peut donc toujours les surcharger quand il a une raison.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Le fond « coffre » V5 (refonte du 08/10/2026), comme dans le logiciel
   --------------------------------------------------------------------------
   Aucune ligne de HTML par page : le dégradé de base est sur <html>, l'orbe et son arc sur
   html::before/::after, les anneaux (img/coffre-fond.svg) et le voile sur body::before, le
   halo sur body::after. Tout est local (CSP 'self'), sans script.
   Fluidité : seuls l'opacité du halo et les tracés du SVG bougent ; le flou ne bouge jamais.
   Sans mouvement (prefers-reduced-motion) : coffre-fond-fixe.svg, halo immobile.
   Le <body> est transparent : un fond posé sur lui recouvrirait toute la couche. */
html {
  background:
    radial-gradient(ellipse at 94% 30%, rgba(76, 29, 149, 0.12) 0%, rgba(46, 16, 101, 0.05) 31%, transparent 56%),
    radial-gradient(ellipse at 0% 100%, rgba(109, 40, 217, 0.07) 0%, transparent 33%),
    linear-gradient(160deg, #07060D 0%, #05030B 50%, #07040E 100%);
  background-color: var(--vault);
  background-attachment: fixed;
}
html::before,
html::after,
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
html::before,
html::after {
  width: 560px;
  height: 560px;
  left: -380px;
  bottom: -380px;
  border-radius: 50%;
}
html::before {
  background: radial-gradient(circle at 72% 27%, rgba(124, 58, 237, 0.11) 0%, rgba(29, 14, 52, 0.26) 25%, rgba(10, 6, 19, 0.86) 52%, #05030B 74%);
  border: 1px solid rgba(139, 92, 246, 0.14);
}
html::after {
  border-top: 3px solid rgba(250, 245, 255, 0.8);
  border-right: 2px solid rgba(192, 132, 252, 0.35);
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px #C084FC) drop-shadow(0 0 22px #7C3AED);
  transform: rotate(-31deg);
}
body::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, transparent 30%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.4) 130%),
    url('img/coffre-fond.svg') center / cover no-repeat;
}
body::after {
  width: 520px;
  height: 520px;
  right: -240px;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 42%, rgba(216, 180, 254, 0.14) 0%, rgba(168, 85, 247, 0.11) 13%, transparent 60%);
  filter: blur(70px);
  opacity: 0.4;
  /* PAS de mix-blend-mode (retiré le 12/10/2026) : fusionner ce halo animé avec toute la page
     obligeait le navigateur à recomposer la page entière à chaque image. Sur le guide (26 000 px
     de haut), la page se figeait et le texte se dédoublait en défilant (vu par Lucas). */
  animation: kw-halo 12s ease-in-out infinite;
}
@keyframes kw-halo { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.46; } }
@media (prefers-reduced-motion: reduce) {
  body::before {
    background:
      radial-gradient(ellipse at 50% 20%, transparent 30%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.4) 130%),
      url('img/coffre-fond-fixe.svg') center / cover no-repeat;
  }
  body::after { animation: none; }
}

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: var(--ligne-texte);
  -webkit-font-smoothing: antialiased;
}

/* Le logo de la refonte (08/10/2026) : une tuile violette au bouclier coché, comme le logiciel.
   Le texte « KeyWard » à côté garde la mise en forme de chaque page. */
.logo-tuile {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  color: #FFFFFF;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px var(--glow);
}
.logo-tuile svg { width: 18px; height: 18px; }

/* Une seule échelle de titres, au lieu de huit tailles décidées page par page. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--ligne-titre);
  letter-spacing: -0.01em;
}
h1 { font-size: 30px; margin-bottom: var(--e3); }
h2 { font-size: 18px; }

p, li { line-height: var(--ligne-texte); }
label { line-height: var(--ligne-libelle); }

a { color: inherit; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* L'encoche de focus du logiciel : un trait violet à gauche du champ, et une lueur. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent), 0 0 18px -7px var(--glow);
}

/* Le bouton de thème : retiré du site à la refonte du 08/10/2026. Seul le guide
   d'utilisation, fabriqué dans le dépôt du logiciel, le porte encore : on garde son style. */
.theme-toggle-btn {
  background: none;
  border: 1px solid var(--vault-line);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  /* Sans ceci, le bouton est écrasé par le flex de la barre de navigation : mesuré à
     18 px de large au lieu de 32. Perdu en retapant la règle au lieu de la copier. */
  flex-shrink: 0;
}
.theme-toggle-btn:hover { border-color: var(--brass); color: var(--brass-light); }

/* --------------------------------------------------------------------------
   Le bouton d'action principal
   --------------------------------------------------------------------------
   Six pages le définissaient, avec quatre couleurs de texte différentes. Deux d'entre
   elles étaient illisibles — « Se connecter » en blanc sur laiton, à 3,82 sur 1 — et
   personne ne pouvait le voir en lisant une page, puisque la faute n'existait qu'en
   comparant les six.

   Ce qui reste légitimement propre à une page, c'est la GÉOMÉTRIE : la largeur pleine du
   formulaire de connexion, le rembourrage plus large de l'accueil. Pas la couleur.

   Survol : --brass-pale et pas --brass-light. Les deux jetons échangent leur rôle entre
   les thèmes, et --brass-light est SOMBRE en thème clair : le texte presque noir y tombait
   à 2,93 sur 1. --brass-pale est clair des deux côtés.
   -------------------------------------------------------------------------- */

.btn-primary {
  display: inline-block;
  background: linear-gradient(165deg, var(--brass), #6D28D9);
  color: var(--sur-brass);
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--glow);
  transition: filter 0.15s, transform 0.15s;
}
/* Survol : on éclaircit à peine (filtre), sans repasser au #8B5CF6 sous le seuil. */
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: none; }
  .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   Avis de langue des pages juridiques
   --------------------------------------------------------------------------
   Ces pages ne sont pas traduites. Un visiteur passé en anglais y arrive et tombe sur du
   français sans explication : l'avis lève l'ambiguïté, et il est bilingue plutôt que
   traduit — il doit être lisible par quelqu'un qui ne lit pas le français.
   ========================================================================== */

.avis-langue {
  padding: 12px 14px;
  margin: var(--e5) 0 var(--e6);
  font-size: 13px;
  line-height: var(--ligne-texte);
  color: var(--ink-soft);
  background: var(--verre);
  border: 1px solid var(--vault-line);
  border-radius: 12px;
}
.avis-langue strong { color: var(--brass-light); }
.avis-langue span[lang="en"] { display: block; margin-top: var(--e1); font-style: italic; }

/* ==========================================================================
   TABLEAUX DES PAGES JURIDIQUES, SUR TÉLÉPHONE (22/09/2026)
   À 375 px, le tableau de confidentialite.html mesurait 382 px et toute la page
   glissait de côté : « création/connexion, » ou « authentification » ne tiennent pas
   dans un tiers d'écran. Couper ces mots n'importe où les rendait illisibles
   (« Métado / nnées ») et le navigateur n'a pas de dictionnaire de césure français.
   Chaque ligne devient donc une petite fiche : la donnée en titre, sur toute la
   largeur, puis les deux autres cases côte à côte. La ligne d'en-tête garde la même
   disposition et sert de légende (« Finalité » au-dessus de la finalité…).
   La règle vit ici et non dans la page : toucher confidentialite.html obligerait à
   changer sa date de mise à jour (verifier-dates-juridiques.cjs), alors que son
   contenu, lui, n'a pas changé.
   « .wrap > table » vise les tableaux posés à même la page (confidentialité,
   cookies : tous en trois colonnes). Ceux de l'admin, du guide et de la
   transparence sont dans une enveloppe qui défile de côté : ils ne changent pas.
   ========================================================================== */

@media (max-width: 480px) {
  .wrap > table,
  .wrap > table > tbody { display: block; }
  .wrap > table tr {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--vault-line);
  }
  .wrap > table th,
  .wrap > table td { padding: 0; border-bottom: 0; }
  .wrap > table tr > :first-child { grid-column: 1 / -1; }
  .wrap > table td:first-child { color: var(--ink); font-weight: 600; }
}

/* ==========================================================================
   LA CASE ANTI-ROBOT SUR UN PETIT TÉLÉPHONE (24/09/2026)
   hCaptcha dessine une case de 302 px de large, quelle que soit la place. Sur un
   écran de 320 px il n'en reste que 264 dans la carte : la page glissait de côté
   de 39 px sur la connexion, et de 35 px sur le support une fois le formulaire de
   ticket ouvert. Sous 360 px on réduit la case à 85 % : elle passe à 257 px, et
   reste cliquable (une transformation déplace aussi la zone de clic).
   Pourquoi une réduction visuelle plutôt que la taille « compact » de hCaptcha :
   celle-ci se choisit AVANT que le script tiers ne dessine la case, et ce script
   est chargé en async — l'ordre n'est pas garanti sur ces deux pages, où la case
   est posée dans le HTML. Là où la case est créée à la demande (accueil), le code
   pose « data-size=compact » lui-même : le :not() ci-dessous évite de la réduire
   deux fois.
   PIÈGE DE MESURE : sous émulation, window.innerWidth a répondu 374 pour un écran
   de 320 (relevé du 24/09, confirmé des deux côtés). Mesurer une largeur d'écran
   avec document.documentElement.clientWidth, jamais innerWidth.
   ========================================================================== */

@media (max-width: 359px) {
  .h-captcha:not([data-size="compact"]) {
    transform: scale(.85);
    transform-origin: left top;
  }
}

/* ==========================================================================
   LES PAGES SECONDAIRES — refonte du 08/10/2026 (maquettes « coffre » validées par Lucas)
   --------------------------------------------------------------------------
   Agents IA, Transparence, Accès d'urgence, Avis, Support, pages juridiques : la même barre
   collante (logo + bouton « Accueil »), le même article, le même pied de page. Une fois ici,
   plutôt que recopiés page par page.
   ========================================================================== */
.barre-page {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 6, 13, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vault-line);
}
.barre-page-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.barre-page .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; text-decoration: none; color: var(--ink); }
.barre-page-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.barre-page-droite select {
  border: 1px solid var(--vault-line);
  background: none;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.bouton-accueil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 15px;
  border-radius: 11px;
  border: 1px solid var(--vault-line-forte);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.bouton-accueil:hover { background: rgba(255, 255, 255, 0.04); }
.bouton-accueil svg { width: 16px; height: 16px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brass-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.article { max-width: 720px; margin: 0 auto; padding: 60px 24px 80px; line-height: 1.7; }
.article h1 { font-size: 40px; line-height: 1.1; font-weight: 600; margin-bottom: 16px; }
.article .chapeau { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; }
.article h2 { font-size: 24px; margin: 40px 0 12px; }
.article h3 { font-size: 18px; margin: 26px 0 10px; }
.article p { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; }
.article strong { color: var(--ink); }
.article a { color: var(--brass-light); }
/* La phrase qui porte une page : sortie du corps de texte, liseré violet. */
.article .these {
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--verre);
  border: 1px solid var(--vault-line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.article .these p { font-family: var(--font-display); font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; }
/* Une liste numérotée en cartes, la pastille violette portant le numéro. */
.article ol.liste-cartes { counter-reset: carte; list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.article ol.liste-cartes li {
  position: relative;
  padding: 15px 16px 15px 52px;
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--verre);
  border: 1px solid var(--vault-line);
  border-radius: 13px;
}
.article ol.liste-cartes li::before {
  counter-increment: carte;
  content: counter(carte);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brass-light);
  background: var(--accent-bg);
}
.retour-accueil { display: inline-flex; align-items: center; gap: 7px; margin-top: 36px; font-size: 14px; font-weight: 500; color: var(--brass-light); text-decoration: none; }
.retour-accueil svg { width: 16px; height: 16px; }

.pied-simple { border-top: 1px solid var(--vault-line); background: rgba(7, 6, 13, 0.6); padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--ink-soft); }
.pied-simple a { color: var(--ink-soft); }

@media (max-width: 700px) {
  .article h1 { font-size: 31px; }
  .article h2 { font-size: 21px; }
  .barre-page-in { padding: 0 16px; }
}

/* La mention hCaptcha, obligatoire en mode invisible (08/10/2026, docs.hcaptcha.com/invisible) :
   il n'y a plus de case, le visiteur doit quand même savoir qui vérifie et à quelles conditions. */
.mention-hcaptcha { margin: 10px 0 14px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.mention-hcaptcha a { color: var(--brass-light); }

/* Les documents juridiques (refonte, étape 3, d'après le gabarit légal) : sommaire collant à gauche,
   date en pastille, sections séparées d'un filet. Seul l'HABILLAGE change : le texte et sa date
   sont gardés par verifier-dates-juridiques. */
.page-doc { max-width: 1000px; margin: 0 auto; padding: 54px 24px 90px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; align-items: start; }
.page-doc .sommaire { position: sticky; top: 88px; }
.page-doc .sommaire .eyebrow { margin-bottom: 14px; }
.page-doc .sommaire a { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); text-decoration: none; padding: 6px 0 6px 12px; border-left: 2px solid var(--vault-line); transition: color .15s, border-color .15s; }
.page-doc .sommaire a:hover { color: var(--ink); border-left-color: var(--accent); }
.doc { line-height: 1.75; min-width: 0; }
.doc h1 { font-size: 36px; line-height: 1.1; font-weight: 500; margin: 0 0 10px; }
.doc .updated { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); background: var(--verre); border: 1px solid var(--vault-line); border-radius: 999px; padding: 5px 12px; margin: 0 0 22px; }
.doc .updated svg { width: 14px; height: 14px; flex: none; }
.doc h2 { scroll-margin-top: 88px; font-size: 21px; font-weight: 500; margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--vault-line); }
.doc h3 { font-size: 16.5px; margin: 20px 0 8px; color: var(--ink); }
.doc p, .doc li { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 12px; }
.doc ul { padding-left: 20px; margin: 0 0 14px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.doc a { color: var(--brass-light); }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--vault-line); font-size: 13.5px; }
.doc th { color: var(--brass-light); font-weight: 600; }
.doc .placeholder { border: 1px dashed var(--brass-light); border-radius: 6px; padding: 1px 7px; color: var(--brass-light); font-size: 14px; }
@media (max-width: 820px) {
  .page-doc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 36px; }
  .page-doc .sommaire { position: static; border-bottom: 1px solid var(--vault-line); padding-bottom: 16px; }
  .page-doc .sommaire nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .page-doc .sommaire a { border-left: none; padding: 4px 0; }
  .doc h1 { font-size: 28px; }
}

/* Les pages à carte centrée (refonte, étape 4, d'après la maquette « Compte web ») : connexion,
   nouveau mot de passe, confirmations, désinscription, préférences d'e-mails. La carte devient du
   verre dépoli ; le pictogramme d'état prend une pastille teintée de SA couleur (currentColor) :
   les scripts posent le vert, le rouge ou le gris, la pastille suit sans qu'on y touche. */
.page-carte .card {
  background: var(--verre);
  border: 1px solid var(--vault-line);
  border-top-color: var(--verre-haut);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52);
  padding: 32px 30px;
}
.page-carte .card h1 { font-weight: 500; letter-spacing: -0.01em; }
.page-carte .marque, .page-carte .checkmark {
  width: 64px;
  height: 64px;
  min-height: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
/* Vide (état « demande » de la désinscription) : la place reste réservée, la carte ne saute pas. */
.page-carte .marque:empty { visibility: hidden; }
.page-carte .checkmark { color: var(--green); }
.page-carte .card input:not([type="checkbox"]):not([type="radio"]) { border-radius: 12px; padding: 13px 14px; }
.page-carte .card .btn-primary { border-radius: 12px; min-height: 48px; }
@media (max-width: 420px) { .page-carte .card { padding: 26px 20px; } }

/* Le guide (guide-utilisation.html, fabriqué dans le dépôt du logiciel) écrit son gras avec
   l'encre d'impression #1C1814, faite pour le papier blanc : sur le fond sombre du site, ses
   154 passages en gras devenaient invisibles (12/10/2026). Corrigé ici, sans toucher au guide :
   `.page strong` l'emporte sur son `strong` simple. À reprendre dans le dépôt du logiciel. */
.page strong { color: var(--ink); }