/* ==========================================================================
   Alvéole App — feuille de style du site promotionnel
   --------------------------------------------------------------------------
   Palette : charte de marque déposée (assets/Pack inpi/palette.png).

   ⚠⚠ LES CONTRASTES CI-DESSOUS SONT MESURÉS, PAS ESTIMÉS (WCAG 2.1, 2026-09-12).
   Quatre combinaisons « naturelles » de la palette ÉCHOUENT — ne pas les rétablir
   en croyant faire plus fidèle à la marque :
     • blanc sur or ambré  #F4B82A .... 1,79:1  ❌ (même défaut que le vert WhatsApp)
     • blanc sur ambre cuivré #D88B0E . 2,76:1  ❌
     • ambre cuivré #D88B0E EN TEXTE . 2,56:1  ❌ (5ᵉ cas, trouvé le 2026-09-13
       par le contrôle de contraste une fois RÉPARÉ — il servait l'accent du
       titre de la home, sous le seuil de 3:1 des grands textes)
     • or ambré en BORDURE sur crème .. 1,66:1  ❌ (WCAG 1.4.11 : limite invisible)
     • brun cire #A66F12 en TEXTE ..... 3,98:1  ❌ AA de peu
   Ce qui passe, et qu'on utilise :
     • brun nuit sur crème ............ 15,84:1 ✓ AAA   (texte courant)
     • sépia sur crème ................ 10,12:1 ✓ AAA   (texte secondaire, liens)
     • brun nuit sur or ambré .......... 9,52:1 ✓ AAA   (bouton primaire)
     • miel vif sur brun nuit ......... 11,82:1 ✓ AAA   (accent en mode sombre)
   #A66F12 est réservé aux BORDURES et au TRÈS GRAND TEXTE — 3,98:1 passe le
  seuil de 3:1 que WCAG 1.4.3 applique dès 24 px (ou 18,66 px en gras), mais
  PAS le 4,5:1 du texte courant. ⚠ Un titre qui rétrécirait sous 24 px en
  responsive repasserait donc en défaut : vérifier la taille RENDUE, pas celle
  du CSS de bureau.
   ========================================================================== */

:root {
  /* — Fonds & surfaces claires — */
  --creme:        #FDF6E8;
  --beige-pale:   #FBE5B0;
  --sable:        #E8D4B0;
  --beige-neutre: #A8825A;

  /* — Famille miel — */
  --miel-vif:     #FBD274;
  --miel-dore:    #FBD24E;
  --or-ambre:     #F4B82A;
  --dore-profond: #E89A1F;
  --ambre-cuivre: #D88B0E;
  --bronze:       #C88810;

  /* — Famille terre & cire — */
  --brun-cire:    #A66F12;
  --sepia:        #5C3303;
  --brun-tres-fonce: #4A2E05;
  --brun-chocolat:   #3E2204;
  --brun-nuit:    #2A1808;

  --blanc:        #FFFFFF;

  /* — Rôles sémantiques (mode clair) — */
  --fond:            var(--creme);
  --fond-alt:        #FFFBF2;
  --fond-accent:     var(--beige-pale);
  --fond-sombre:     var(--brun-nuit);
  --surface:         var(--blanc);
  --texte:           var(--brun-nuit);
  --texte-doux:      var(--sepia);
  --texte-sur-sombre:      var(--creme);
  --texte-doux-sur-sombre: #D8C3A4; /* mesuré 9,6:1 sur brun nuit */
  --accent:          var(--or-ambre);
  /* ⚠⚠ ÉTAIT `--ambre-cuivre` (#D88B0E) JUSQU'AU 2026-09-13 : mesuré **2,56:1**
     sur le crème, sous le seuil de 3:1 des grands textes — l'accent du titre de
     la home était donc en défaut depuis l'origine, sur les trois profils clairs.
     `--brun-cire` donne **3,98:1** et reste dans la même famille chromatique.
     ⚠ Le mode sombre garde `--or-ambre` : sur fond brun il est très lisible, et
     c'est bien le fond clair qui posait problème, pas la teinte en soi.
     ⚠ Ses DEUX usages sont du grand texte (titre 34-60 px) et une icône — seuil
     3:1 dans les deux cas. Ne pas réutiliser ce token pour du texte courant,
     qui exige 4,5:1. */
  --accent-fort:     var(--brun-cire);
  --bordure:         #E0CFAE;
  --bordure-forte:   var(--brun-cire);
  --ombre:           0 1px 2px rgba(42, 24, 8, .06), 0 8px 24px rgba(42, 24, 8, .07);
  --ombre-forte:     0 2px 4px rgba(42, 24, 8, .08), 0 16px 40px rgba(42, 24, 8, .12);

  --rayon:    14px;
  --rayon-sm: 9px;
  --gouttiere: clamp(1rem, 5vw, 2.5rem);
  --max:      1180px;

  /* Pile 100 % système : aucune police tierce, aucune requête externe (RGPD). */
  --police: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  color-scheme: light dark;
}

/* — Mode sombre : uniquement une redéfinition de rôles, jamais de couleur inédite — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:        var(--brun-nuit);
    --fond-alt:    #221305;
    --fond-accent: var(--brun-chocolat);
    --surface:     #33200A;
    --texte:       var(--creme);
    --texte-doux:  var(--texte-doux-sur-sombre);
    --accent:      var(--miel-vif);
    --accent-fort: var(--or-ambre);
    --bordure:     #4A3416;
    --bordure-forte: var(--brun-cire);
    --ombre:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --ombre-forte: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --fond:        var(--brun-nuit);
  --fond-alt:    #221305;
  --fond-accent: var(--brun-chocolat);
  --surface:     #33200A;
  --texte:       var(--creme);
  --texte-doux:  var(--texte-doux-sur-sombre);
  --accent:      var(--miel-vif);
  --accent-fort: var(--or-ambre);
  --bordure:     #4A3416;
  --bordure-forte: var(--brun-cire);
  --ombre:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --ombre-forte: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
}

/* ===================== Base ===================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  /* Encoches iOS / punch-hole Android */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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

h1, h2, h3 { line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .5em; font-weight: 750; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem); }
h2 { font-size: clamp(1.65rem, 1.22rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1.03rem + .4vw, 1.32rem); font-weight: 700; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--texte-doux); text-decoration-thickness: .08em; text-underline-offset: .18em; }
@media (hover: hover) { a:hover { color: var(--texte); } }
:focus-visible {
  outline: 3px solid var(--bordure-forte);
  outline-offset: 3px;
  border-radius: 4px;
}

.lien-invisible { text-decoration: none; color: inherit; }

/* ===================== Utilitaires ===================== */

.enveloppe { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem); }
.section--alt    { background: var(--fond-alt); }
.section--accent { background: var(--fond-accent); }
.section--sombre { background: var(--fond-sombre); color: var(--texte-sur-sombre); }
.section--sombre h2, .section--sombre h3 { color: var(--texte-sur-sombre); }
.section--sombre .sur-titre, .appel .sur-titre { color: var(--miel-vif); }
.section--sombre .section__intro { color: var(--texte-doux-sur-sombre); }

.section__entete { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section__entete--centre { margin-inline: auto; text-align: center; }
.section__intro { font-size: 1.1em; color: var(--texte-doux); margin-bottom: 0; }

.sur-titre {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: .85em;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ⚠ Sans ce bloc, le lien d'évitement reste à 1 px MÊME FOCALISÉ : il existe pour
   l'arbre d'accessibilité mais reste invisible à qui navigue au clavier sans lecteur
   d'écran. Mesuré le 2026-09-12 (hauteur 1 px au focus). */
.visuellement-cache:focus, .visuellement-cache:focus-visible {
  position: fixed; top: calc(.75rem + env(safe-area-inset-top)); left: .75rem;
  width: auto; height: auto; min-height: 48px; margin: 0;
  display: inline-flex; align-items: center;
  padding: .6rem 1.1rem; clip-path: none; z-index: 100;
  background: var(--or-ambre); color: var(--brun-nuit);
  border: 2px solid var(--brun-cire); border-radius: var(--rayon-sm);
  font-weight: 700; text-decoration: none; box-shadow: var(--ombre-forte);
}

/* ===================== Boutons ===================== */
/* ⚠ Cible tactile ≥ 48 px : max(Apple HIG 44pt, Material 48dp). */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px;
  padding: .78em 1.55em;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Fond or + texte brun nuit = 9,52:1.
   ⚠ Le liseré n'est PAS décoratif : or ambré contre crème ne fait que 1,66:1,
   donc sans lui le bouton n'a aucune frontière visible (WCAG 1.4.11). */
.bouton--primaire {
  background: var(--or-ambre);
  color: var(--brun-nuit);
  border-color: var(--brun-cire);
  box-shadow: var(--ombre);
}
@media (hover: hover) {
  .bouton--primaire:hover { background: var(--dore-profond); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
}
.bouton--primaire:active { transform: translateY(0); }

.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border-color: var(--bordure-forte);
}
@media (hover: hover) { .bouton--secondaire:hover { background: rgba(166, 111, 18, .1); } }
.bouton--secondaire:active { background: rgba(166, 111, 18, .18); }

/* ⚠⚠ `.appel` EST UN CONTEXTE SOMBRE AU MÊME TITRE QUE `.section--sombre` — il a un
   fond brun nuit sans porter cette classe. Oublié à la 1ʳᵉ écriture : le bouton
   secondaire y gardait la couleur de texte du mode clair, soit brun nuit sur brun
   nuit = **1,00:1**, invisible autrement que par sa bordure (mesuré le 2026-09-12,
   signalé par Patrick). ➡ Tout sélecteur `.section--sombre <composant>` doit lister
   `.appel` aussi ; à défaut, ajouter la classe `.section--sombre` au bloc. */
.section--sombre .bouton--secondaire,
.appel .bouton--secondaire { color: var(--creme); border-color: var(--miel-vif); }
@media (hover: hover) {
  .section--sombre .bouton--secondaire:hover,
  .appel .bouton--secondaire:hover { background: rgba(251, 210, 116, .16); }
}
.section--sombre .bouton--secondaire:active,
.appel .bouton--secondaire:active { background: rgba(251, 210, 116, .26); }

.bouton--large { width: 100%; }

/* ===================== En-tête ===================== */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  padding-top: env(safe-area-inset-top);
}
@supports not (backdrop-filter: blur(10px)) { .entete { background: var(--fond); } }

.entete__barre {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px;
}

.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--texte); flex-shrink: 0; min-height: 48px; }
.marque img { width: 38px; height: 38px; display: block; flex-shrink: 0; }
.marque__texte { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }

/* Symbole de marque enregistrée, accolé au lockup de l'en-tête.
   ⚠ Il n'est PAS dans le SVG du logo, et ne doit pas y entrer : le signe déposé
     (INPI FR 5 263 335) est figuratif, l'altérer reviendrait à ne plus utiliser
     la marque telle qu'enregistrée. Le symbole s'appose À CÔTÉ du signe.
   ⚠ PARTOUT OÙ LE SIGNE EST REPRODUIT — en-tête ET pied de page. La règle était
     « en-tête uniquement » jusqu'au 2026-09-13 ; c'était une convention
     typographique (éviter la répétition), pas une contrainte juridique, et elle
     laissait le lockup du pied — logo compris — sans son symbole. Corrigée à la
     demande de Patrick : là où le signe figuratif apparaît, le ® l'accompagne.
   ⚠ `aria-hidden` sur l'élément : « Alvéole app marque déposée » comme libellé du
     lien de retour à l'accueil est bruyant au lecteur d'écran. L'information reste
     écrite en toutes lettres dans le pied de page et les mentions légales. */
.marque__r {
  font-size: .52em;
  font-style: normal;
  font-weight: 600;
  vertical-align: super;
  line-height: 1;
  margin-left: .12em;
  opacity: .7;
}
.marque__texte i { font-style: italic; font-weight: 700; color: var(--texte-doux); }
/* ⚠⚠ SUR FOND SOMBRE, `--texte-doux` (sépia #5C3303) EST ILLISIBLE : mesuré
   **1,34:1** sur le brun chocolat du pied de page — pire que le vert WhatsApp
   (1,98:1) qu'on s'interdit. « Alvéole » héritait bien du crème via `.pied
   .marque`, mais le `i` gardait sa propre couleur, plus spécifique : le mot
   « App » disparaissait dans le fond. Signalé par Patrick le 2026-09-13.
   ⚠ On ne le passe PAS en crème pur : garder une teinte adoucie préserve la
   hiérarchie de la marque (« Alvéole » fort, « App » en appui), exactement
   comme le sépia le fait en mode clair. `--texte-doux-sur-sombre` donne 8,0:1.
   ⚠ Les TROIS contextes sombres sont listés — cf. l'avertissement plus bas :
   `.appel` est un contexte sombre au même titre que `.section--sombre`, et
   l'oublier laisse le défaut vivant là où personne ne le cherche. */
.pied .marque__texte i,
.section--sombre .marque__texte i,
.appel .marque__texte i { color: var(--texte-doux-sur-sombre); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav__lien {
  min-height: 48px; display: inline-flex; align-items: center;
  padding: 0 .85rem; border-radius: var(--rayon-sm);
  text-decoration: none; color: var(--texte-doux); font-weight: 600; font-size: .96rem;
}
@media (hover: hover) { .nav__lien:hover { color: var(--texte); background: rgba(166, 111, 18, .1); } }
.nav__lien:active { background: rgba(166, 111, 18, .18); }
.nav .bouton { margin-left: .5rem; }

.burger {
  display: none;
  margin-left: auto;
  min-width: 48px; min-height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--bordure-forte);
  border-radius: var(--rayon-sm); color: var(--texte); cursor: pointer;
}

@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: .75rem var(--gouttiere) 1.25rem;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-forte);
  }
  .nav[data-ouvert="true"] { display: flex; }
  .nav__lien { padding: 0 1rem; }
  .nav .bouton { margin: .5rem 0 0; }
}

/* ===================== Héros ===================== */

.heros { position: relative; overflow: hidden; padding-block: clamp(3rem, 1.5rem + 7vw, 6rem); }
.heros::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 62% at 78% 18%, rgba(251, 210, 116, .42), transparent 62%),
    radial-gradient(48% 55% at 12% 88%, rgba(232, 154, 31, .20), transparent 66%);
  pointer-events: none;
}
.heros > * { position: relative; }

.heros__grille {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center;
}
@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; text-align: center; }
  /* ⚠ NE PAS remettre `order: -1` : le logo occupait alors tout le premier
     écran et la promesse passait sous la ligne de flottaison (vu en capture
     iPhone 13 le 2026-09-12). Sur mobile, le titre d'abord. */
  .heros__visuel { margin-top: .5rem; }
  .heros__visuel img { width: min(58%, 210px); }
  .heros__actions { justify-content: center; }
  .heros__preuves { justify-content: center; }
}

.heros__titre { margin-bottom: .35em; }
.heros__titre em { font-style: normal; color: var(--accent-fort); }
.heros__accroche { font-size: clamp(1.06rem, 1rem + .45vw, 1.3rem); color: var(--texte-doux); max-width: 34rem; }
@media (max-width: 900px) { .heros__accroche { margin-inline: auto; } }

.heros__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.heros__preuves {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
  font-size: .92rem; color: var(--texte-doux);
}
.heros__preuve { display: inline-flex; align-items: center; gap: .45em; }
.heros__preuve svg { flex-shrink: 0; color: var(--accent-fort); }

.heros__visuel { display: flex; justify-content: center; }
.heros__visuel img { width: min(100%, 360px); }

/* ⚠ Fond TOUJOURS clair, dans les deux thèmes : le lettrage de la marque est brun
   foncé. Un médaillon qui suivrait le thème rendrait le nom illisible en mode nuit —
   c'est précisément ce qui m'avait fait retirer la marque complète, à tort. */
.heros__medaillon {
  background: var(--creme);
  border: 2px solid var(--brun-cire);
  border-radius: 28px;
  padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  box-shadow: 0 18px 46px rgba(42, 24, 8, .20);
  display: inline-flex;
}
.heros__medaillon img { width: min(100%, 300px); display: block; }

/* ===================== Cartes ===================== */

.grille { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.6rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  box-shadow: var(--ombre);
}
.carte h3 { margin-bottom: .4em; }
.carte p  { color: var(--texte-doux); margin-bottom: 0; font-size: .97em; }

.carte__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--beige-pale);
  color: var(--brun-nuit); /* 13,74:1 sur beige doré pâle */
}
.carte__icone svg { width: 24px; height: 24px; }

/* En sombre, le beige pâle devient une tache claire : on repasse sur un fond
   translucide + accent miel (11,82:1 sur brun nuit). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte__icone { background: rgba(251, 210, 116, .16); color: var(--miel-vif); }
}
:root[data-theme="dark"] .carte__icone { background: rgba(251, 210, 116, .16); color: var(--miel-vif); }

.section--sombre .carte {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(251, 210, 116, .22);
  box-shadow: none;
}
.section--sombre .carte p { color: var(--texte-doux-sur-sombre); }
.section--sombre .carte__icone { background: rgba(251, 210, 116, .16); color: var(--miel-vif); }

/* — Constats (le problème) — */
.constat { display: flex; gap: 1rem; align-items: flex-start; }
.constat__marque {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brun-nuit); color: var(--miel-vif);
  font-weight: 800; font-size: .95rem;
}
.constat p { margin-bottom: 0; }
.constat strong { display: block; margin-bottom: .2em; color: var(--texte); }

/* — Étapes — */
.etapes { counter-reset: etape; }
.etape { position: relative; padding-left: 3.6rem; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; left: 0; top: -.1rem;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--or-ambre); color: var(--brun-nuit); /* 9,52:1 */
  border: 2px solid var(--brun-cire);
  font-weight: 800;
}

/* ===================== FAQ ===================== */

.faq { max-width: 48rem; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  margin-bottom: .8rem;
  overflow: hidden;
}
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px;
  padding: 1.05rem 1.35rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: ""; flex-shrink: 0;
  width: .62rem; height: .62rem;
  border-right: 2.5px solid var(--brun-cire);
  border-bottom: 2.5px solid var(--brun-cire);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.faq__item[open] .faq__question::after { transform: rotate(-135deg) translateY(-2px); }
@media (hover: hover) { .faq__question:hover { background: rgba(166, 111, 18, .07); } }
.faq__reponse { padding: 0 1.35rem 1.35rem; color: var(--texte-doux); }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ===================== Appel final ===================== */

.appel {
  border-radius: clamp(var(--rayon), 1vw, 24px);
  background: var(--brun-nuit);
  color: var(--creme);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  text-align: center;
  background-image: radial-gradient(60% 80% at 50% 0%, rgba(251, 210, 116, .17), transparent 70%);
}
.appel h2 { color: var(--creme); }
.appel p { color: var(--texte-doux-sur-sombre); max-width: 40rem; margin-inline: auto; }
.appel__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2rem; }
.appel__mention { font-size: .9rem; margin-top: 1.5rem; }

/* ===================== Pied de page ===================== */

.pied {
  background: var(--brun-chocolat);
  color: var(--texte-doux-sur-sombre);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem) 2rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  font-size: .94rem;
}
.pied a { color: var(--creme); text-decoration: none; }
@media (hover: hover) { .pied a:hover { text-decoration: underline; } }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 720px) { .pied__grille { grid-template-columns: 1fr; gap: 1.75rem; } }
.pied .marque { color: var(--creme); margin-bottom: .85rem; }
.pied h3 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--miel-vif); margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .1rem; }
.pied li a { display: inline-flex; align-items: center; min-height: 48px; }
/* ⚠ Un lien SEUL dans son conteneur n'est pas « inline dans une phrase » : l'exception
   WCAG 2.5.5 ne le couvre pas, il lui faut ses 48 px. La 1ʳᵉ version du contrôle excluait
   `.pied__bas` en bloc — une exclusion de complaisance qui cachait le défaut. */
.pied__bas a, .lien-cible {
  display: inline-flex; align-items: center; min-height: 48px;
}
.pied__bas {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 210, 116, .2);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .88rem;
}

/* ===================== Page intérieure ===================== */

.page-entete { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }
/* ⚠⚠ `.contenu` ET `.enveloppe` SONT PORTÉES PAR LA MÊME BOÎTE dans les pages
   légales (`<div class="enveloppe contenu">`). Le `max-width: 46rem` écrasait
   donc les 1180px de l'enveloppe, et le `margin-inline: auto` de celle-ci
   RECENTRAIT la colonne de lecture : le corps de texte démarrait 222px à DROITE
   du titre de la page (mesuré à 1440px le 2026-09-12, signalé par Patrick comme
   « pas harmonieux »). Invisible dans le CSS source : le décalage naît de la
   RENCONTRE de deux règles, aucune des deux n'étant fautive isolément.
   ➡ La boîte reprend la largeur de l'enveloppe ; c'est le CONTENU qui est borné
     à la largeur de lecture, et il s'aligne alors sur le même bord que le titre. */
.enveloppe.contenu { max-width: var(--max); }
.enveloppe.contenu > * { max-width: 46rem; }
.contenu { max-width: 46rem; }
.contenu h2 { margin-top: 2.5em; }
.contenu h2:first-child { margin-top: 0; }
.contenu ul { padding-left: 1.25rem; }
.contenu li { margin-bottom: .45em; }
.contenu dt { font-weight: 700; margin-top: 1.2em; }
.contenu dd { margin: .2em 0 0; color: var(--texte-doux); }

/* ===================== Formulaire de connexion ===================== */

/* ⚠ `minmax(0, 1fr)` n'est PAS cosmétique : sans lui, la colonne prend la largeur
   min-content de son contenu — ici le suffixe « .alveole.app » en `nowrap` — et la
   boîte déborde de 15 px sur un iPhone 13 (mesuré). */
.connexion { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
             align-items: center; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.connexion__boite {
  width: 100%; max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.champ { margin-bottom: 1.25rem; }
.champ label { display: block; font-weight: 700; margin-bottom: .45rem; }
.champ__aide { font-size: .9rem; color: var(--texte-doux); margin: 0 0 .6rem; }
.champ__saisie { display: flex; align-items: stretch; border: 2px solid var(--bordure-forte); border-radius: var(--rayon-sm); background: var(--fond); overflow: hidden; }
.champ__saisie:focus-within { outline: 3px solid var(--bordure-forte); outline-offset: 2px; }
.champ__saisie input {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  border: 0; background: transparent; padding: 0 .9rem;
  font: inherit; color: var(--texte);
}
.champ__saisie input:focus { outline: none; }
.champ__suffixe {
  display: inline-flex; align-items: center; padding: 0 .9rem; flex-shrink: 0;
  background: var(--beige-pale); color: var(--brun-nuit);
  font-weight: 700; white-space: nowrap;
  border-left: 2px solid var(--bordure-forte);
}
.message { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--rayon-sm); font-size: .95rem; }
.message--erreur { background: rgba(200, 136, 16, .14); border: 1px solid var(--brun-cire); color: var(--texte); }

/* Sur les très petits écrans, le suffixe passe sous le champ plutôt que de le comprimer. */
@media (max-width: 380px) {
  .champ__saisie { flex-wrap: wrap; }
  .champ__suffixe { width: 100%; border-left: 0; border-top: 2px solid var(--bordure-forte); padding-block: .5rem; }
}

/* Champs du formulaire de demande : la case à cocher et le champ numérique
   descendaient sous 48 px de haut (mesuré iPhone 13/Pixel 7 le 2026-09-12).
   ⚠ La cible tactile, c'est le LABEL entier, pas seulement la case : on donne
   donc sa hauteur au conteneur cliquable. */
.champ__saisie input[type="number"] { min-height: 48px; }
label:has(> input[type="checkbox"]) { min-height: 48px; align-items: center; }
@supports not selector(:has(*)) {
  form label input[type="checkbox"] { width: 26px; height: 26px; }
}

/* ===================== Visite guidée (captures) ===================== */

.visite { max-width: 1100px; margin-inline: auto; }

.visite__onglets {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: 1.5rem;
}
.visite__onglet {
  min-height: 48px;                      /* cible tactile (max Apple/Material) */
  padding: .55em 1.05em;
  border-radius: 999px;
  border: 2px solid var(--bordure-forte);
  background: transparent;
  color: var(--texte);                   /* brun nuit sur crème : 15,84:1 */
  font: inherit; font-size: .94rem; font-weight: 650;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .visite__onglet:hover { background: rgba(166, 111, 18, .12); } }
.visite__onglet:active { background: rgba(166, 111, 18, .2); }


/* ⚠ Onglet actif : or ambré + brun nuit = 9,52:1. JAMAIS de blanc sur ce fond
   (1,79:1 — mesuré). Le liseré brun donne la frontière, l'or seul contre la
   crème ne fait que 1,66:1.
   ⚠⚠ DÉCLARÉ APRÈS `:hover` ET `:active`, ET C'EST NÉCESSAIRE : à spécificité
      égale, la dernière règle l'emporte. Placé avant, le survol écrasait l'état
      actif et l'onglet sélectionné devenait indistinguable des autres dès que la
      souris passait dessus (mesuré le 2026-09-12 : fond rgba(166,111,18,.12)
      au lieu de l'or). Ne pas remonter ce bloc. */
.visite__onglet--actif,
.visite__onglet--actif:hover,
.visite__onglet--actif:active {
  background: var(--or-ambre);
  color: var(--brun-nuit);
  border-color: var(--brun-cire);
}

.visite__vue { margin: 0; }
.visite__vue img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-forte);
  background: var(--surface);
}
.visite__vue figcaption {
  margin-top: 1.1rem;
  text-align: center;
  color: var(--texte-doux);
  font-size: 1.02em;
  max-width: 46rem; margin-inline: auto;
}

@media (max-width: 700px) {
  .visite__onglets { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
                     padding-bottom: .4rem; scrollbar-width: thin; }
  .visite__onglet { flex: 0 0 auto; }
}

/* ── Encart d'information (« sur téléphone, vous verrez la version mobile ») ──
   ⚠ Fond `--fond-accent` et texte `--texte` : deux tokens SÉMANTIQUES, donc
     redéfinis dans les trois thèmes (clair, prefers-color-scheme, data-theme).
     Mesuré : brun nuit sur beige pâle = 13,4:1 en clair, crème sur brun
     chocolat = 12,9:1 en sombre. Ne PAS y poser d'or ambré en texte (1,79:1
     sur blanc, 3,98:1 pour le brun cire) — cf. l'en-tête de ce fichier. */
.note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--fond-accent);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--texte);
}
.note__icone { flex-shrink: 0; margin-top: .15rem; color: var(--texte-doux); }
/* ⚠⚠ `> div >` N'EST PAS UN DÉTAIL : le sélecteur large `.note strong`
   mettait EN BLOC tous les mots en gras du paragraphe, pas seulement le
   titre de l'encart — « version mobile » et « ordinateur ou tablette » se
   retrouvaient seuls sur leur ligne, avec la virgule suivante rejetée au
   début de la ligne d'après. Servi tel quel en production, signalé par
   Patrick le 2026-09-13. On ne cible donc que l'enfant DIRECT, qui est le
   titre ; ceux du `<p>` restent en ligne.
   ⚠ Le contrôle de rendu ne pouvait pas le voir : rien ne débordait, rien
   n'était illisible — c'est la mise en page qui était fausse. Un contrôle
   automatique ne remplace pas un regard sur la page. */
.note > div > strong { display: block; margin-bottom: .25rem; }
.note p { margin: 0; color: var(--texte-doux); }
/* ⚠ Le picto est décoratif : `aria-hidden` dans le HTML. Sous 380 px il passe
   en colonne plutôt que de comprimer le texte à une largeur illisible. */
@media (max-width: 380px) {
  .note { flex-direction: column; gap: .5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fenêtre superposée des pages légales (Sécurité, Mentions légales)
   ⚠ Le contenu reste atteignable à son URL propre : cette fenêtre est un
     confort ajouté par JavaScript, jamais le seul chemin (cf. modale-legale.js).
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠⚠ CETTE RÈGLE N'EST PAS FACULTATIVE — sans elle, la fenêtre NE SE FERME PAS.
   `modale-legale.js` ferme en posant l'attribut `hidden`. Or `[hidden]{display:none}`
   vient de la feuille du NAVIGATEUR, et toute règle d'AUTEUR l'emporte sur elle —
   la spécificité n'entre même pas en jeu, c'est l'ordre des origines en cascade.
   Le `display:flex` ci-dessous gagnait donc systématiquement : croix, Échap et clic
   sur le fond posaient bien l'attribut, sans le moindre effet visuel.
   ⚠ Le défaut était INVISIBLE à l'ouverture de la page : la coque n'est créée qu'au
   premier clic puis démasquée aussitôt, si bien que l'état `hidden` n'était jamais
   exercé avant la première tentative de fermeture.
   ⚠ Diagnostiqué à tort comme un cache navigateur périmé le 2026-09-12 ; mesuré et
   corrigé le 2026-09-13. Régression couverte par `scripts/test-modale.js`. */
.modale[hidden] { display: none; }

.modale {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 4vw, 2.5rem);
  background: rgba(42, 24, 8, .58);
  /* ⚠ Pas d'animation sous `prefers-reduced-motion` (voir plus bas). */
  animation: modale-fond .18s ease-out;
}
@keyframes modale-fond { from { opacity: 0 } to { opacity: 1 } }

.modale__boite {
  position: relative;
  width: 100%; max-width: 46rem;
  max-height: min(86vh, 52rem);
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  color: var(--texte);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(42, 24, 8, .3);
  animation: modale-boite .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modale-boite { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1 } }

.modale__fermer {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  /* ⚠ 48px : cible tactile confortable sur les DEUX plateformes (Apple 44pt,
     Material 48dp) — on prend le maximum, pas le minimum. */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--fond, #FDF6E8); color: var(--texte);
  cursor: pointer;
}
@media (hover: hover) { .modale__fermer:hover { background: var(--sable, #E8D4B0); } }
.modale__fermer:active { background: var(--sable, #E8D4B0); }
.modale__fermer:focus-visible { outline: 2px solid var(--or-ambre); outline-offset: 2px; }

.modale__corps {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(2.75rem, 6vw, 3.25rem);
}
/* Le contenu repris vient d'une page entière : on neutralise ses marges de page
   pour qu'il se comporte comme le contenu d'une fenêtre. */
.modale__corps .section { padding-block: 0; }
.modale__corps .page-entete { padding-block: 0 .5rem; }
.modale__corps .enveloppe { max-width: none; padding-inline: 0; margin-inline: 0; }
.modale__corps .enveloppe.contenu > * { max-width: none; }
.modale__corps h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-top: 0; margin-bottom: .5rem; }
/* ⚠ `.contenu h2` porte `margin-top: 2.5em`, calibré pour une page entière : dans
   une fenêtre haute de 86vh, cela ouvre un vide énorme sous le titre. On resserre
   ici seulement, sans toucher au rythme des pages elles-mêmes.
   ⚠ `:first-of-type` ne suffit PAS : chaque h2 vit dans un parent différent, ils
   sont donc TOUS « premiers de leur type ». Mesuré en regardant le rendu. */
.modale__corps .contenu h2 { margin-top: 1.8em; }
.modale__corps .contenu > *:first-child h2,
.modale__corps .contenu h2:first-child { margin-top: .25rem; }
.modale__corps .page-entete + .section { padding-top: 0; }


/* ⚠ Respect de « mouvement réduit » : on retire les animations, pas la fenêtre. */
@media (prefers-reduced-motion: reduce) {
  .modale, .modale__boite { animation: none; }
}