/* Guardefense, page d'accueil publique (D02, 18/09/2026). N'emploie que les variables de tokens.css.
   Largeurs en px présentes : 1120px (max-width de la grille), 720px (max-width de l'image En direct et des étapes),
   640px (max-width du texte d'accroche), 300px (largeur du cadre téléphone), 768px et 767.98px (point de
   rupture téléphone / deux colonnes). Les traits font « thin ». */

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--gd-police-interface); line-height: var(--gd-interligne-normal); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--gd-cible-bureau) + var(--gd-espace-6)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--gd-fond); color: var(--gd-texte); font-size: var(--gd-taille-base); font-weight: var(--gd-graisse-normale); overflow-x: hidden; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gd-lien); text-decoration: underline; text-underline-offset: 0.15em; }
:focus-visible { outline: none; box-shadow: var(--gd-ombre-focus); border-radius: var(--gd-rayon-sm); }
.mono { font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); font-variant-numeric: tabular-nums; }
.sprite { position: absolute; }
.visuellement-cache { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo : <picture> choisit la version claire ou sombre selon prefers-color-scheme */
.logo img { height: var(--gd-espace-7); width: auto; }

/* Grille */
.grille { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gd-espace-4); }
@media (min-width: 768px) { .grille { padding: 0 var(--gd-espace-6); } }
.deux { display: grid; gap: var(--gd-espace-8); align-items: center; }
@media (min-width: 768px) { .deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gd-espace-10); } }
.trois { display: grid; gap: var(--gd-espace-4); }
@media (min-width: 768px) { .trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gd-espace-6); } }

/* Boutons (mêmes règles que D01) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gd-espace-2); min-height: var(--gd-cible-bureau); padding: 0 var(--gd-espace-5); border-radius: var(--gd-rayon-md); border: thin solid var(--gd-bordure-2); background: var(--gd-fond-2); color: var(--gd-texte); font-weight: var(--gd-graisse-moyenne); text-decoration: none; white-space: nowrap; transition: background-color var(--gd-duree-rapide) var(--gd-easing), border-color var(--gd-duree-rapide) var(--gd-easing); }
.btn:hover { background: var(--gd-fond-3); }
.btn-principal { background: var(--gd-accent); border-color: var(--gd-accent); color: var(--gd-accent-texte); min-height: var(--gd-cible-min); padding: 0 var(--gd-espace-6); font-size: var(--gd-taille-md); }
.btn-principal:hover { background: var(--gd-accent-survol); border-color: var(--gd-accent-survol); }
.btn-principal:active { background: var(--gd-accent-actif); border-color: var(--gd-accent-actif); }

/* 0. En-tête fixe */
.entete { position: sticky; top: 0; z-index: 10; background: var(--gd-fond-2); border-bottom: thin solid var(--gd-bordure); }
.entete .grille { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-espace-4); min-height: calc(var(--gd-cible-bureau) + var(--gd-espace-4)); flex-wrap: wrap; padding-top: var(--gd-espace-2); padding-bottom: var(--gd-espace-2); }
.entete .logo { display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); }
.entete nav { display: flex; align-items: center; gap: var(--gd-espace-2); flex-wrap: wrap; }
.entete nav a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); padding: 0 var(--gd-espace-3); color: var(--gd-texte-2); text-decoration: none; font-weight: var(--gd-graisse-moyenne); border-radius: var(--gd-rayon-md); }
.entete nav a:not(.btn):hover { color: var(--gd-texte); background: var(--gd-fond-3); }
/* Téléphone : logo et Espace client sur la première ligne, les trois ancres en ligne dessous */
.ancres { display: contents; }
@media (max-width: 767.98px) {
  .entete .grille { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .entete nav { display: contents; }
  .entete .btn { order: 2; }
  .ancres { display: flex; order: 3; grid-column: 1 / -1; gap: 0; margin: 0 calc(-1 * var(--gd-espace-3)); }
  .ancres a { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; padding: 0 var(--gd-espace-2); }
}

/* Sections */
.section { padding: var(--gd-espace-12) 0; }
@media (min-width: 768px) { .section { padding: calc(var(--gd-espace-12) + var(--gd-espace-8)) 0; } }
.section-2 { background: var(--gd-fond-2); border-top: thin solid var(--gd-bordure); border-bottom: thin solid var(--gd-bordure); }
.section h2 { font-size: var(--gd-taille-2xl); font-weight: var(--gd-graisse-forte); line-height: var(--gd-interligne-serre); letter-spacing: -0.01em; max-width: 24ch; }
.section h3 { font-size: var(--gd-taille-lg); font-weight: var(--gd-graisse-forte); line-height: var(--gd-interligne-serre); }
.sur-titre { font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); color: var(--gd-texte-3); margin-bottom: var(--gd-espace-3); }
.intro { color: var(--gd-texte-2); font-size: var(--gd-taille-md); max-width: 60ch; margin-top: var(--gd-espace-4); }
.pile { display: grid; gap: var(--gd-espace-4); }
.pile-6 { display: grid; gap: var(--gd-espace-6); }
.texte-2 { color: var(--gd-texte-2); }

/* 1. Accroche */
.accroche { padding: var(--gd-espace-10) 0 var(--gd-espace-12); }
@media (min-width: 768px) { .accroche { padding: calc(var(--gd-espace-12) + var(--gd-espace-6)) 0; } }
.accroche h1 { font-size: var(--gd-taille-3xl); font-weight: var(--gd-graisse-forte); line-height: var(--gd-interligne-serre); letter-spacing: -0.015em; max-width: 640px; }
@media (min-width: 768px) { .accroche h1 { font-size: calc(var(--gd-taille-3xl) * 1.25); } }
.accroche .sous-titre { font-size: var(--gd-taille-md); color: var(--gd-texte-2); max-width: 640px; margin-top: var(--gd-espace-5); }
.accroche .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-espace-4) var(--gd-espace-6); margin-top: var(--gd-espace-8); }
.accroche .actions a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); font-weight: var(--gd-graisse-moyenne); }
.ecran { max-width: 720px; border: thin solid var(--gd-bordure); border-radius: var(--gd-rayon-md); overflow: hidden; background: var(--gd-fond-2); }
.ecran img { width: 100%; }
.legende { font-size: var(--gd-taille-sm); color: var(--gd-texte-3); margin-top: var(--gd-espace-2); }

/* 2. Ce qui manque */
.constats { display: grid; gap: var(--gd-espace-3); }
@media (min-width: 768px) { .constats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gd-espace-6); } }
.constat { padding: var(--gd-espace-5) var(--gd-espace-5); border: thin solid var(--gd-bordure); border-radius: var(--gd-rayon-md); background: var(--gd-fond); font-size: var(--gd-taille-md); color: var(--gd-texte); }

/* 3. Fonctionnement */
.preuves { display: grid; gap: var(--gd-espace-6); counter-reset: preuve; }
.preuve { display: grid; grid-template-columns: var(--gd-espace-10) 1fr; gap: var(--gd-espace-4); align-items: start; }
.preuve::before { counter-increment: preuve; content: counter(preuve); font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-forte); font-size: var(--gd-taille-lg); color: var(--gd-texte-3); line-height: var(--gd-interligne-serre); padding-top: var(--gd-espace-1); }
.preuve p { color: var(--gd-texte-2); margin-top: var(--gd-espace-1); }
.deux-heures { font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); font-size: var(--gd-taille-md); line-height: var(--gd-interligne-normal); padding: var(--gd-espace-5); border-radius: var(--gd-rayon-md); background: var(--gd-fond-inverse); color: var(--gd-texte-inverse); }
.telephone { width: 300px; max-width: 100%; margin: 0 auto; border: thin solid var(--gd-bordure-2); border-radius: var(--gd-rayon-lg); padding: var(--gd-espace-2); background: var(--gd-fond-2); }
.telephone img { width: 100%; border-radius: var(--gd-rayon-md); }

/* 4. Ce que voit l'opérateur : la seule section avec les couleurs de statut */
.colonne { padding: var(--gd-espace-6); border: thin solid var(--gd-bordure); border-radius: var(--gd-rayon-md); background: var(--gd-fond-2); display: grid; gap: var(--gd-espace-3); align-content: start; }
.colonne p { color: var(--gd-texte-2); }
.statuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gd-espace-2); margin-top: var(--gd-espace-2); }
.statut { display: inline-flex; align-items: center; gap: var(--gd-espace-2); min-height: var(--gd-espace-8); padding: 0 var(--gd-espace-3) 0 var(--gd-espace-2); border-radius: var(--gd-rayon-plein); background: var(--statut-fond); color: var(--statut); font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); }
.statut .forme { width: var(--gd-espace-4); height: var(--gd-espace-4); flex: none; color: var(--statut); }
.statut .glyphe { fill: var(--statut-fond); }
.statut .glyphe-trait { stroke: var(--statut-fond); }
[data-statut="a-venir"] { --statut: var(--gd-statut-a-venir); --statut-fond: var(--gd-statut-a-venir-fond); }
[data-statut="en-cours"] { --statut: var(--gd-statut-en-cours); --statut-fond: var(--gd-statut-en-cours-fond); }
[data-statut="complete"] { --statut: var(--gd-statut-complete); --statut-fond: var(--gd-statut-complete-fond); }
[data-statut="partielle"] { --statut: var(--gd-statut-partielle); --statut-fond: var(--gd-statut-partielle-fond); }
[data-statut="manquee"] { --statut: var(--gd-statut-manquee); --statut-fond: var(--gd-statut-manquee-fond); }
[data-statut="critique"] { --statut: var(--gd-statut-critique); --statut-fond: var(--gd-statut-critique-fond); }

/* 5. Pour qui */
.public { padding: var(--gd-espace-6); border-top: thin solid var(--gd-texte); display: grid; gap: var(--gd-espace-3); align-content: start; }
.public p { color: var(--gd-texte-2); }

/* 6. Mise en place */
.etapes { display: grid; gap: var(--gd-espace-4); counter-reset: etape; max-width: 720px; }
.etape { display: grid; grid-template-columns: var(--gd-espace-12) 1fr; gap: var(--gd-espace-4); align-items: baseline; padding-bottom: var(--gd-espace-4); border-bottom: thin solid var(--gd-bordure); }
.etape::before { counter-increment: etape; content: counter(etape) "."; font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-forte); font-size: var(--gd-taille-xl); color: var(--gd-texte); line-height: var(--gd-interligne-serre); }
.etape p { font-size: var(--gd-taille-md); }

/* 7. Contact */
.contact { background: var(--gd-fond-2); border-top: thin solid var(--gd-bordure); }
.coordonnees { display: grid; gap: var(--gd-espace-4); margin-top: var(--gd-espace-6); }
.coordonnees a { display: inline-flex; align-items: center; min-height: var(--gd-cible-min); font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); font-size: var(--gd-taille-xl); color: var(--gd-texte); text-decoration: underline; text-decoration-color: var(--gd-bordure-2); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
@media (min-width: 768px) { .coordonnees a { font-size: var(--gd-taille-2xl); } }
.coordonnees a:hover { text-decoration-color: var(--gd-accent); }
.lieu { color: var(--gd-texte-2); margin-top: var(--gd-espace-4); }

/* 8. Pied de page */
.pied { padding: var(--gd-espace-8) 0; border-top: thin solid var(--gd-bordure); color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.pied .grille { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-espace-4) var(--gd-espace-6); }
.pied .marque { display: inline-flex; align-items: center; gap: var(--gd-espace-2); color: var(--gd-texte); font-weight: var(--gd-graisse-moyenne); }
.pied .marque svg { width: var(--gd-espace-6); height: var(--gd-espace-6); }
.pied nav { display: flex; flex-wrap: wrap; gap: var(--gd-espace-2) var(--gd-espace-4); }
.pied nav a { display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); color: var(--gd-texte-2); }
.pied .copie { margin-left: auto; }
.mentions { margin-top: var(--gd-espace-4); }
.mentions summary { display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); cursor: pointer; color: var(--gd-texte-2); font-weight: var(--gd-graisse-moyenne); }
.mentions[open] summary { color: var(--gd-texte); }
.mentions p { margin-top: var(--gd-espace-2); max-width: 70ch; }

/* Espaces réservés à remplacer avant mise en ligne : visibles, jamais en couleur de statut */
.reserve { background: var(--gd-fond-3); color: var(--gd-texte); padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm); }