/* =========================================================================
   gidahotes.com — feuille de style
   Jetons repris du design system Gida (project/tokens.json, thèmes clair et sombre).
   Aucune couleur, taille ou ombre en dur hors de ce bloc de jetons.
   ========================================================================= */

/* --- Polices auto-hébergées (SIL OFL) ----------------------------------- */
@font-face { font-family: "Comfortaa"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/comfortaa-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/comfortaa-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }

/* --- Jetons --------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Marque */
  --argile: #8E3B1F;
  --argile-claire: #D9744A;
  --flamme: #F59E1B;
  --nuit: #241510;
  --chaux: #F7F1E6;
  --sable: #EBDFCC;
  --brun-400: #A8998C;

  /* Sémantiques — thème clair */
  --fond: #F7F1E6;
  --surface: #FFFFFF;
  --surface-2: #EFE7DA;
  --surface-inverse: #241510;
  --texte: #241510;
  --texte-2: #5E4A3E;
  --texte-3: #76655A;
  --texte-inverse: #F7F1E6;
  --bordure: #E2D6C4;
  --bordure-champ: #8C7B6E;
  --primaire: #8E3B1F;
  --primaire-survol: #73301A;
  --primaire-doux: #F6E4DA;
  --sur-primaire: #FFFFFF;
  --accent: var(--flamme);
  --sur-accent: #241510;
  --accent-texte: #945600;
  --focus: #285FA0;
  --succes: #276E44;
  --succes-fond: #E3F0E7;
  --attention: #9A5B00;
  --attention-fond: #FCEFD6;
  --erreur: #B3261E;
  --erreur-fond: #F8E1DE;
  --info: #285FA0;
  --info-fond: #E2ECF7;
  --voile: rgba(36, 21, 16, 0.48);
  --planning-bloque: #CDBFAE;

  /* Logo */
  --logo-lampe: var(--argile);
  --logo-nom: var(--nuit);

  /* Bande sombre du site (bandeaux de marque) */
  --bande-fond: var(--nuit);
  --bande-texte: var(--chaux);
  --bande-texte-2: #CDBFAE;
  --bande-surface: #2E1E17;
  --bande-bordure: #4A3A31;

  /* Typographie */
  --police-titre: Comfortaa, "Nunito", system-ui, sans-serif;
  --police-texte: Nunito, system-ui, "Segoe UI", Arial, sans-serif;

  /* Espacements */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;

  /* Rayons */
  --rayon-petit: 6px;
  --rayon-moyen: 10px;
  --rayon-grand: 16px;
  --rayon-feuille: 24px;
  --rayon-pilule: 999px;
  --rayon-point: 25%;

  /* Ombres */
  --ombre-1: 0 1px 2px rgba(36, 21, 16, 0.06), 0 0 0 1px rgba(36, 21, 16, 0.08);
  --ombre-2: 0 8px 24px rgba(36, 21, 16, 0.14);
  --ombre-3: 0 20px 48px rgba(36, 21, 16, 0.22);

  /* Dimensions */
  --cible-tactile: 44px;
  --hauteur-champ: 40px;
  --hauteur-champ-grand: 48px;
  --largeur-contenu: 1200px;
  --hauteur-entete: 72px;

  /* Plans */
  --z-collant: 10;
  --z-navigation: 20;
  --z-menu: 30;
  --z-voile: 40;
  --z-toast: 50;

  /* Mouvement : geste 150 ms en sortie douce (design system) ; mises en scène du site plus longues */
  --sortie-douce: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duree-geste: 150ms;
  --duree-scene: 600ms;
}

/* Thème sombre : préférence système, sauf choix explicite « clair » */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #241510;
    --surface: #2E1E17;
    --surface-2: #3A2820;
    --surface-inverse: #F7F1E6;
    --texte: #F7F1E6;
    --texte-2: #CDBFAE;
    --texte-3: #A8998C;
    --texte-inverse: #241510;
    --bordure: #4A3A31;
    --primaire: #D9744A;
    --primaire-survol: #E58A62;
    --primaire-doux: #4A2A1E;
    --sur-primaire: #241510;
    --accent-texte: #F59E1B;
    --focus: #8DB8EB;
    --succes: #6CC48E;
    --succes-fond: #1E3A28;
    --attention: #F2B33D;
    --attention-fond: #3D2A0C;
    --erreur: #F08A80;
    --erreur-fond: #4A1A16;
    --info: #8DB8EB;
    --info-fond: #1B2B40;
    --voile: rgba(0, 0, 0, 0.6);
    --planning-bloque: #5A4A40;
    --logo-lampe: var(--argile-claire);
    --logo-nom: var(--chaux);
    --bande-fond: #2E1E17;
    --ombre-1: 0 0 0 1px rgba(247, 241, 230, 0.08);
    --ombre-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ombre-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  }
}

/* Thème sombre choisi explicitement */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #241510;
  --surface: #2E1E17;
  --surface-2: #3A2820;
  --surface-inverse: #F7F1E6;
  --texte: #F7F1E6;
  --texte-2: #CDBFAE;
  --texte-3: #A8998C;
  --texte-inverse: #241510;
  --bordure: #4A3A31;
  --primaire: #D9744A;
  --primaire-survol: #E58A62;
  --primaire-doux: #4A2A1E;
  --sur-primaire: #241510;
  --accent-texte: #F59E1B;
  --focus: #8DB8EB;
  --succes: #6CC48E;
  --succes-fond: #1E3A28;
  --attention: #F2B33D;
  --attention-fond: #3D2A0C;
  --erreur: #F08A80;
  --erreur-fond: #4A1A16;
  --info: #8DB8EB;
  --info-fond: #1B2B40;
  --voile: rgba(0, 0, 0, 0.6);
  --planning-bloque: #5A4A40;
  --logo-lampe: var(--argile-claire);
  --logo-nom: var(--chaux);
  --bande-fond: #2E1E17;
  --ombre-1: 0 0 0 1px rgba(247, 241, 230, 0.08);
  --ombre-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ombre-3: 0 20px 48px rgba(0, 0, 0, 0.6);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--espace-4));
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--primaire); text-underline-offset: 3px; }
a:hover { color: var(--primaire-survol); }
p { margin: 0 0 var(--espace-4); }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

::selection { background: var(--primaire-doux); color: var(--texte); }

.lien-evitement {
  position: absolute;
  left: var(--espace-4);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--espace-2) var(--espace-4);
  background: var(--surface-inverse);
  color: var(--texte-inverse);
  border-radius: var(--rayon-moyen);
  font-weight: 700;
}
.lien-evitement:focus { top: var(--espace-4); color: var(--texte-inverse); }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bandeau-dev {
  background: var(--attention-fond);
  color: var(--attention);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  padding: var(--espace-1) var(--espace-4);
}
.a-completer {
  background: var(--attention-fond);
  color: var(--attention);
  border-radius: var(--rayon-petit);
  padding: 0 var(--espace-1);
  font-weight: 700;
}

/* --- Typographie ---------------------------------------------------------- */
.display, .titre-1, .titre-2 {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display { font-size: 36px; line-height: 44px; }
.titre-1 { font-size: 26px; line-height: 34px; }
.titre-2 { font-size: 22px; line-height: 30px; }
.titre-3 { font-size: 18px; line-height: 26px; font-weight: 800; }
.texte-grand { font-size: 18px; line-height: 28px; color: var(--texte-2); }
.petit { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--texte-3); }
.legende, .surtitre {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.surtitre { color: var(--accent-texte); margin-bottom: var(--espace-3); }
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 600px) {
  .display { font-size: 48px; line-height: 56px; }
  .titre-1 { font-size: 32px; line-height: 40px; }
  .titre-2 { font-size: 24px; line-height: 32px; }
}

/* --- Mise en page --------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--espace-7));
  margin-inline: auto;
  padding-inline: var(--espace-4);
}
@media (min-width: 600px) { .conteneur { padding-inline: var(--espace-5); } }
@media (min-width: 1024px) { .conteneur { padding-inline: var(--espace-7); } }

.section { padding-block: var(--espace-7); }
@media (min-width: 1024px) { .section { padding-block: calc(var(--espace-8) + var(--espace-5)); } }
.section--retrait { background: var(--surface-2); }
.section--bande {
  background: var(--bande-fond);
  color: var(--bande-texte);
  --texte: var(--bande-texte);
  --texte-2: var(--bande-texte-2);
  --texte-3: var(--brun-400);
  --surface: var(--bande-surface);
  --surface-2: #3A2820;
  --bordure: var(--bande-bordure);
  --primaire: var(--argile-claire);
  --primaire-survol: #E58A62;
  --sur-primaire: var(--nuit);
  --accent-texte: var(--flamme);
  --focus: #8DB8EB;
  --logo-lampe: var(--argile-claire);
  --succes: #6CC48E; --succes-fond: #1E3A28;
  --attention: #F2B33D; --attention-fond: #3D2A0C;
  --info: #8DB8EB; --info-fond: #1B2B40;
  --ombre-1: 0 0 0 1px rgba(247, 241, 230, 0.08);
}

.entete-section { max-width: 720px; margin-bottom: var(--espace-6); }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section .titre-1 + p, .entete-section .titre-2 + p { margin-top: var(--espace-3); }

.groupe-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin-top: var(--espace-5); }

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--hauteur-champ);
  padding: 0 var(--espace-4);
  border: 1px solid transparent;
  border-radius: var(--rayon-moyen);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duree-geste) var(--sortie-douce), color var(--duree-geste) var(--sortie-douce),
    border-color var(--duree-geste) var(--sortie-douce), transform var(--duree-geste) var(--sortie-douce);
}
.bouton .icone { width: 18px; height: 18px; transition: transform var(--duree-geste) var(--sortie-douce); }
.bouton:active { transform: scale(0.97); }
.bouton--grand { min-height: var(--hauteur-champ-grand); padding: 0 var(--espace-5); font-size: 16px; }
.bouton--bloc { width: 100%; }

.bouton--primaire { background: var(--primaire); color: var(--sur-primaire); }
.bouton--primaire:hover { background: var(--primaire-survol); color: var(--sur-primaire); }
.bouton--primaire:hover .icone { transform: translateX(3px); }

.bouton--secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure-champ); }
.bouton--secondaire:hover { border-color: var(--primaire); color: var(--primaire); }
.bouton--secondaire[aria-current="page"] { background: var(--primaire-doux); border-color: var(--primaire); }

.bouton--lien { background: transparent; color: var(--primaire); padding-inline: var(--espace-2); }
.bouton--lien:hover { color: var(--primaire-survol); text-decoration: underline; }

.bouton[aria-busy="true"] { pointer-events: none; }
.bouton[aria-busy="true"] .bouton__chargement { display: inline-block; }
.bouton__chargement {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tourne 700ms linear infinite;
}

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border: 0;
  border-radius: var(--rayon-moyen);
  background: transparent;
  color: var(--texte);
  cursor: pointer;
  transition: background-color var(--duree-geste) var(--sortie-douce);
}
.bouton-icone:hover { background: var(--surface-2); }
.bouton-icone .icone { width: 22px; height: 22px; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  font-weight: 700;
  text-decoration: none;
}
.lien-fleche .icone { width: 18px; height: 18px; transition: transform var(--duree-geste) var(--sortie-douce); }
.lien-fleche:hover .icone { transform: translateX(4px); }

.icone { width: 24px; height: 24px; flex: none; }

/* --- Logo ----------------------------------------------------------------- */
.logo { display: block; height: 34px; width: auto; overflow: visible; }
.logo__symbole { display: block; overflow: visible; }
.logo__nom { fill: var(--logo-nom); }
.logo__corps { fill: var(--logo-lampe); stroke: var(--logo-lampe); stroke-width: 0; stroke-linejoin: round; }
.logo__flamme {
  fill: var(--flamme);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.logo__halo { fill: var(--flamme); opacity: 0; transform-box: fill-box; transform-origin: center; }
.menu-mobile__haut .logo { height: 30px; }
.logo--pied { height: 32px; }

/* Survol : la flamme vacille */
a:hover > .logo .logo__flamme,
.logo--vivant .logo__flamme { animation: vacille 1.4s ease-in-out infinite; }

/* Intro à la première page de la visite : la lampe se dessine, se remplit, puis s'allume */
.intro .logo--entete .logo__corps {
  fill-opacity: 0;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trace 900ms var(--sortie-douce) 200ms forwards, remplit 400ms var(--sortie-douce) 1000ms forwards;
}
.intro .logo--entete .logo__flamme { transform: scale(0); animation: allume 700ms var(--sortie-douce) 1250ms forwards; }
.intro .logo--entete .logo__halo { animation: halo 900ms var(--sortie-douce) 1350ms; }
.intro .logo--entete .logo__nom {
  clip-path: inset(0 100% 0 0);
  animation: devoile 700ms var(--sortie-douce) 1450ms forwards;
}

@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes remplit { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes apparait { to { opacity: 1; } }
@keyframes devoile { to { clip-path: inset(0 -2% 0 0); } }
@keyframes allume {
  0% { transform: scale(0) rotate(-12deg); }
  55% { transform: scale(1.25) rotate(4deg); }
  75% { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes halo {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 0.28; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes vacille {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  25% { transform: scale(0.94, 1.08) rotate(-3deg); }
  50% { transform: scale(1.04, 0.95) rotate(2deg); }
  75% { transform: scale(0.97, 1.05) rotate(-1deg); }
}
@keyframes eteint {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.1, 0.8); }
  100% { transform: scale(0.2, 0); opacity: 0; }
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Grande lampe : allumée quand elle entre dans l'écran */
.logo--geant { height: auto; width: 100%; max-width: 260px; }
.logo--geant .logo__flamme { transform-origin: 50% 100%; }
.js [data-lampe-scroll] .logo__flamme { transform: scale(0); }
.js [data-lampe-scroll].est-allumee .logo__flamme {
  animation: allume 700ms var(--sortie-douce) forwards, vacille 2.4s ease-in-out 800ms 3;
}
.js [data-lampe-scroll].est-allumee .logo__halo { animation: halo 1100ms var(--sortie-douce) 100ms; }
.js [data-lampe-scroll] .logo__corps { fill-opacity: 0; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-lampe-scroll].est-tracee .logo__corps { animation: trace 900ms var(--sortie-douce) forwards, remplit 400ms var(--sortie-douce) 800ms forwards; }

.point-dsv {
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: var(--espace-2);
  border-radius: var(--rayon-point);
  background: var(--flamme);
  vertical-align: 1px;
}

/* --- En-tête -------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-navigation);
  background: var(--fond);
  border-bottom: 1px solid transparent;
  transition: transform 300ms var(--sortie-douce), border-color var(--duree-geste) var(--sortie-douce), background-color var(--duree-geste);
  view-transition-name: entete;
}
.entete.est-defile { background: var(--surface); border-bottom-color: var(--bordure); }
.entete.est-cache { transform: translateY(-100%); }
.entete__barre { display: flex; align-items: center; gap: var(--espace-4); height: var(--hauteur-entete); }
.entete__marque { display: inline-flex; text-decoration: none; border-radius: var(--rayon-moyen); }
.entete__marque .logo { view-transition-name: logo; }
.entete__nav { position: relative; display: none; margin-left: auto; }
.entete__nav ul { display: flex; gap: var(--espace-1); list-style: none; }
.entete__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  color: var(--texte-2);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--rayon-moyen);
  transition: color var(--duree-geste) var(--sortie-douce);
}
.entete__nav a:hover, .entete__nav a[aria-current="page"] { color: var(--texte); }
.entete__indicateur {
  position: absolute;
  bottom: 4px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: var(--rayon-pilule);
  background: var(--primaire);
  opacity: 0;
  transition: transform 300ms var(--sortie-douce), width 300ms var(--sortie-douce), opacity var(--duree-geste);
}
.entete__actions { display: flex; align-items: center; gap: var(--espace-2); margin-left: auto; }
.entete__demo { display: none; }
.icone--soleil { display: none; }
:root[data-theme="sombre"] .icone--soleil { display: block; }
:root[data-theme="sombre"] .icone--lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .icone--soleil { display: block; }
  :root:not([data-theme="clair"]) .icone--lune { display: none; }
}

@media (min-width: 600px) { .entete__demo { display: inline-flex; } }
@media (min-width: 1024px) {
  .entete__nav { display: block; }
  .entete__actions { margin-left: var(--espace-3); }
  .entete__menu { display: none; }
}

/* Menu mobile */
.menu-mobile { position: fixed; inset: 0; z-index: var(--z-voile); }
.menu-mobile[hidden] { display: none; }
.menu-mobile__voile { position: absolute; inset: 0; background: var(--voile); opacity: 0; transition: opacity 250ms var(--sortie-douce); }
.menu-mobile__feuille {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
  padding: var(--espace-4) var(--espace-5) var(--espace-6);
  background: var(--fond);
  box-shadow: var(--ombre-3);
  transform: translateX(100%);
  transition: transform 350ms var(--sortie-douce);
  overflow-y: auto;
}
.menu-mobile.est-ouvert .menu-mobile__voile { opacity: 1; }
.menu-mobile.est-ouvert .menu-mobile__feuille { transform: none; }
.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__liens { list-style: none; display: grid; gap: var(--espace-1); }
.menu-mobile__liens a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--espace-3);
  border-radius: var(--rayon-moyen);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 22px;
  color: var(--texte);
  text-decoration: none;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 300ms var(--sortie-douce), transform 300ms var(--sortie-douce), background-color var(--duree-geste);
}
.menu-mobile.est-ouvert .menu-mobile__liens a { opacity: 1; transform: none; }
.menu-mobile__liens a:hover { background: var(--surface-2); }
.menu-mobile__liens a[aria-current="page"] { background: var(--primaire-doux); }
.menu-mobile__liens li:nth-child(2) a { transition-delay: 40ms; }
.menu-mobile__liens li:nth-child(3) a { transition-delay: 80ms; }
.menu-mobile__liens li:nth-child(4) a { transition-delay: 120ms; }
.menu-mobile__liens li:nth-child(5) a { transition-delay: 160ms; }
.menu-mobile__liens li:nth-child(6) a { transition-delay: 200ms; }
.menu-mobile__liens li:nth-child(7) a { transition-delay: 240ms; }

/* --- Apparitions au défilement ------------------------------------------- */
.js [data-apparait] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duree-scene) var(--sortie-douce), transform var(--duree-scene) var(--sortie-douce);
  transition-delay: calc(var(--rang, 0) * 80ms);
}
.js [data-apparait].est-visible { opacity: 1; transform: none; }
.js.intro .heros [data-apparait] { transition-delay: calc(900ms + var(--rang, 0) * 80ms); }
.js.intro .planning.est-visible .resa { animation-delay: calc(1300ms + var(--rang, 0) * 110ms); }
.js.intro .planning.est-visible .planning__toast { animation-delay: 2600ms; }

/* Titre principal : mots qui montent un à un */
.titre-mot { display: inline-block; }
.js .titre-anime .titre-mot {
  opacity: 0;
  transform: translateY(0.45em);
  animation: mot 650ms var(--sortie-douce) forwards;
  animation-delay: calc(150ms + var(--rang, 0) * 70ms);
}
.js.intro .titre-anime .titre-mot { animation-delay: calc(900ms + var(--rang, 0) * 70ms); }
.menu-ouvert, .menu-ouvert body { overflow: hidden; }
@keyframes mot { to { opacity: 1; transform: none; } }

/* --- Héros ---------------------------------------------------------------- */
.heros { padding-block: var(--espace-6) var(--espace-7); overflow: hidden; }
.heros__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-7); align-items: center; }
.heros__grille > *, .coupure > *, .demo > *, .fonction > * { min-width: 0; }
.heros__texte .texte-grand { max-width: 560px; margin-top: var(--espace-4); }
.heros__atouts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-5);
  margin-top: var(--espace-5);
  color: var(--texte-2);
  font-size: 14px;
  font-weight: 700;
}
.heros__atouts li { display: inline-flex; align-items: center; gap: var(--espace-2); }
.heros__atouts .icone { width: 18px; height: 18px; color: var(--succes); }

@media (min-width: 1024px) {
  .heros { padding-block: var(--espace-8) calc(var(--espace-8) + var(--espace-5)); }
  .heros__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

/* --- Carte et planning ---------------------------------------------------- */
.carte {
  background: var(--surface);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-1);
  padding: var(--espace-5);
}

.planning {
  position: relative;
  margin: 0;
  background: var(--surface);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-2);
  padding: var(--espace-4);
  user-select: none;
}
.planning__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); margin-bottom: var(--espace-3); }
.planning__titre { font-weight: 800; font-size: 15px; }
.planning__defile { overflow-x: auto; margin-inline: calc(-1 * var(--espace-4)); padding-inline: var(--espace-4); scrollbar-width: thin; }
.planning__grille {
  position: relative;
  min-width: 540px;
  display: grid;
  grid-template-columns: minmax(84px, 1.15fr) repeat(7, minmax(0, 1fr));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
}
.planning__jour, .planning__unite, .planning__case {
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  min-height: 40px;
}
.planning__jour { display: grid; place-items: center; background: var(--surface-2); font-weight: 700; color: var(--texte-2); min-height: 36px; text-align: center; }
.planning__jour--aujourdhui { color: var(--primaire); box-shadow: inset 0 -3px 0 var(--primaire); }
.planning__unite { display: flex; align-items: center; padding: 0 var(--espace-2); font-weight: 700; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning__coin { background: var(--surface-2); }
.planning__ligne { display: contents; }
.planning__case--aujourdhui { background: var(--primaire-doux); }

.resa {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: 0 3px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-petit);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid currentColor;
  transition: box-shadow var(--duree-geste) var(--sortie-douce), transform var(--duree-geste) var(--sortie-douce);
}
.resa__nom { overflow: hidden; text-overflow: ellipsis; color: var(--texte); }
.resa--confirmee { background: var(--info-fond); color: var(--info); }
.resa--sejour { background: var(--succes-fond); color: var(--succes); }
.resa--option { background: var(--attention-fond); color: var(--attention); border-left-style: dashed; }
.resa--bloque { background: var(--planning-bloque); color: var(--texte-2); border-left-color: transparent; }
.resa--deplacable { cursor: grab; touch-action: none; }
.resa--deplacable:hover { box-shadow: var(--ombre-2); }
.resa.est-saisie { cursor: grabbing; box-shadow: var(--ombre-2); z-index: 3; transition: none; }
.resa.est-refusee { animation: refus 300ms var(--sortie-douce); }
@keyframes refus { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Positions : colonne 1 = unités, colonnes 2 à 8 = jours */
.d2 { grid-column-start: 2; } .d3 { grid-column-start: 3; } .d4 { grid-column-start: 4; }
.d5 { grid-column-start: 5; } .d6 { grid-column-start: 6; } .d7 { grid-column-start: 7; } .d8 { grid-column-start: 8; }
.n1 { grid-column-end: span 1; } .n2 { grid-column-end: span 2; } .n3 { grid-column-end: span 3; }
.n4 { grid-column-end: span 4; } .n5 { grid-column-end: span 5; } .n6 { grid-column-end: span 6; } .n7 { grid-column-end: span 7; }
.l2 { grid-row-start: 2; } .l3 { grid-row-start: 3; } .l4 { grid-row-start: 4; } .l5 { grid-row-start: 5; }
.l6 { grid-row-start: 6; } .l7 { grid-row-start: 7; }

.js .planning .resa { opacity: 0; transform: translateX(-16px); }
.js .planning.est-visible .resa { animation: resa-entre 500ms var(--sortie-douce) forwards; animation-delay: calc(400ms + var(--rang, 0) * 110ms); }
@keyframes resa-entre { to { opacity: 1; transform: none; } }

.planning__legende { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); margin-top: var(--espace-3); }
.planning__aide { margin: var(--espace-3) 0 0; }

/* Toast d'exemple sur le planning */
.toast {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-moyen);
  background: var(--surface-inverse);
  color: var(--texte-inverse);
  box-shadow: var(--ombre-2);
  font-size: 14px;
  line-height: 20px;
}
.toast strong { font-weight: 800; }
.toast .icone { width: 20px; height: 20px; }
.planning__toast { margin-top: var(--espace-3); }
@media (min-width: 1024px) {
  .planning__toast { position: absolute; left: calc(-1 * var(--espace-6)); bottom: calc(-1 * var(--espace-7)); max-width: 380px; z-index: 4; margin: 0; }
}
.js .planning__toast { opacity: 0; transform: translateY(12px) scale(0.98); }
.js .planning.est-visible .planning__toast { animation: toast-entre 500ms var(--sortie-douce) 1700ms forwards; }
@keyframes toast-entre { to { opacity: 1; transform: none; } }

/* --- Badges de statut : couleur + forme + mot ----------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  height: 24px;
  padding: 0 var(--espace-2) 0 6px;
  border-radius: var(--rayon-pilule);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.badge::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor; }
.badge--succes { background: var(--succes-fond); color: var(--succes); }
.badge--succes::before { border-radius: 50%; }
.badge--info { background: var(--info-fond); color: var(--info); }
.badge--info::before { border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; }
.badge--attention { background: var(--attention-fond); color: var(--attention); }
.badge--attention::before { width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.badge--erreur { background: var(--erreur-fond); color: var(--erreur); }
.badge--erreur::before { border-radius: 1px; }
.badge--neutre { background: var(--surface-2); color: var(--texte-2); }
.badge--neutre::before { border-radius: 50%; background: none; border: 2px solid currentColor; width: 8px; height: 8px; }
.badge--neutre-plein::before { background: var(--planning-bloque); }

/* --- Douleurs ------------------------------------------------------------- */
.douleurs { display: grid; gap: var(--espace-4); }
@media (min-width: 900px) { .douleurs { grid-template-columns: repeat(3, 1fr); gap: var(--espace-5); } }
.douleur { position: relative; overflow: hidden; }
.douleur__icone {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--espace-4);
  border-radius: var(--rayon-moyen);
  background: var(--erreur-fond);
  color: var(--erreur);
}
.douleur h3 { margin-bottom: var(--espace-2); }
.douleur p { margin: 0; color: var(--texte-2); }
.douleur__rature {
  position: absolute;
  top: var(--espace-5);
  right: var(--espace-5);
  width: 56px;
  height: 56px;
  color: var(--texte-3);
}
.douleur__rature path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.douleur.est-visible .douleur__rature path { animation: trace 500ms var(--sortie-douce) forwards; animation-delay: calc(500ms + var(--rang, 0) * 120ms); }

.transition-phrase {
  margin: var(--espace-6) auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
.souligne {
  background-image: linear-gradient(var(--primaire), var(--primaire));
  background-repeat: no-repeat;
  background-size: 0 3px;
  background-position: 0 100%;
  transition: background-size 700ms var(--sortie-douce);
}
.est-visible .souligne { background-size: 100% 3px; }
.est-visible .souligne:nth-of-type(2) { transition-delay: 250ms; }
.est-visible .souligne:nth-of-type(3) { transition-delay: 500ms; }
.sans-js .souligne { background-size: 100% 3px; }
@media (min-width: 600px) { .transition-phrase { font-size: 24px; line-height: 34px; } }

/* --- Étapes --------------------------------------------------------------- */
.etapes { position: relative; }
.etapes__liste { position: relative; display: grid; gap: var(--espace-6); list-style: none; }
.etapes__fil {
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: var(--rayon-pilule);
  background: var(--bordure);
  overflow: hidden;
}
.etapes__fil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primaire);
  transform-origin: top;
  transform: scaleY(var(--progression, 0));
}
.etape { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--espace-4); }
.etape__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--bordure);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 20px;
  color: var(--texte-2);
  transition: background-color 300ms var(--sortie-douce), border-color 300ms, color 300ms, transform 300ms var(--sortie-douce);
}
.etape.est-atteinte .etape__numero { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); transform: scale(1.06); }
.etape h3 { margin: 10px 0 var(--espace-2); }
.etape p { margin: 0; color: var(--texte-2); }

@media (min-width: 900px) {
  .etapes__liste { grid-template-columns: repeat(3, 1fr); gap: var(--espace-5); }
  .etapes__fil { left: 24px; right: calc((100% - 2 * var(--espace-5)) / 3 - 24px); top: 23px; bottom: auto; width: auto; height: 3px; }
  .etapes__fil::after { transform-origin: left; transform: scaleX(var(--progression, 0)); }
  .etape { grid-template-columns: 1fr; gap: var(--espace-3); }
  .etape h3 { margin-top: var(--espace-2); }
}

/* --- Modules -------------------------------------------------------------- */
.modules { display: grid; gap: var(--espace-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .modules { grid-template-columns: repeat(4, 1fr); } }
.module {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-5);
  background: var(--surface);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-1);
  color: var(--texte);
  text-decoration: none;
  transition: transform 250ms var(--sortie-douce), box-shadow 250ms var(--sortie-douce);
}
.module:hover { color: var(--texte); transform: translateY(-4px); box-shadow: var(--ombre-2); }
@media (max-width: 599px) {
  .module { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--espace-4); row-gap: var(--espace-1); padding: var(--espace-4); }
  .module__icone { grid-row: span 2; margin: 0; }
  .module__suite { display: none; }
}
.module__icone {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--espace-2);
  border-radius: var(--rayon-moyen);
  background: var(--primaire-doux);
  color: var(--primaire);
  transition: transform 300ms var(--sortie-douce);
}
.module:hover .module__icone { transform: rotate(-8deg) scale(1.08); }
.module__titre { font-weight: 800; font-size: 17px; line-height: 24px; }
.module__texte { color: var(--texte-2); font-size: 15px; line-height: 22px; }
.module__suite {
  margin-top: auto;
  padding-top: var(--espace-2);
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  color: var(--primaire);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms var(--sortie-douce), transform 200ms var(--sortie-douce);
}
.module__suite .icone { width: 16px; height: 16px; }
.module:hover .module__suite, .module:focus-visible .module__suite { opacity: 1; transform: none; }
@media (hover: none) { .module__suite { opacity: 1; transform: none; } }

/* --- Sans Internet : simulateur ------------------------------------------ */
.coupure { display: grid; gap: var(--espace-7); align-items: center; }
@media (min-width: 1024px) { .coupure { grid-template-columns: 1fr 1fr; } }
.coupure__texte .texte-grand { margin-top: var(--espace-4); }

.simulateur {
  background: var(--surface);
  border-radius: var(--rayon-feuille);
  box-shadow: var(--ombre-1);
  padding: var(--espace-5);
}
.simulateur__haut { display: flex; align-items: center; gap: var(--espace-4); margin-bottom: var(--espace-4); }
.simulateur__lampe { width: 72px; flex: none; }
.simulateur__lampe .logo__symbole { height: auto; width: 100%; }
.simulateur__lampe .logo__flamme { animation: vacille 2.6s ease-in-out infinite; }
.simulateur__etat { flex: 1; }
.simulateur__etat strong { display: block; font-size: 17px; line-height: 24px; font-weight: 800; }
.simulateur__etat span { color: var(--texte-2); font-size: 14px; }

.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3);
  min-height: var(--cible-tactile);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--texte);
}
.interrupteur__piste {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: var(--rayon-pilule);
  background: var(--succes);
  transition: background-color var(--duree-geste) var(--sortie-douce);
}
.interrupteur__piste::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--ombre-1);
  transform: translateX(22px);
  transition: transform var(--duree-geste) var(--sortie-douce);
}
.interrupteur[aria-checked="false"] .interrupteur__piste { background: var(--bordure-champ); }
.interrupteur[aria-checked="false"] .interrupteur__piste::after { transform: none; }
.interrupteur .icone { width: 20px; height: 20px; }
.interrupteur .icone--coupe { display: none; color: var(--erreur); }
.interrupteur[aria-checked="false"] .icone--relie { display: none; }
.interrupteur[aria-checked="false"] .icone--coupe { display: block; }
.interrupteur .icone--relie { color: var(--succes); }

.banniere {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-moyen);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.banniere .icone { width: 20px; height: 20px; margin-top: 0; }
.banniere--succes { background: var(--succes-fond); color: var(--succes); }
.banniere--attention { background: var(--attention-fond); color: var(--attention); }
.banniere--info { background: var(--info-fond); color: var(--info); }
.banniere--erreur { background: var(--erreur-fond); color: var(--erreur); }
.banniere p { margin: 0; }
.banniere strong { font-weight: 800; }

.simulateur__flux { list-style: none; display: grid; gap: var(--espace-2); margin-top: var(--espace-4); min-height: 228px; }
.evenement {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border-radius: var(--rayon-moyen);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 20px;
}
.evenement__icone { color: var(--texte-2); }
.evenement__icone .icone { width: 20px; height: 20px; }
.evenement__texte { flex: 1; min-width: 0; }
.evenement__texte span { display: block; color: var(--texte-3); font-size: 13px; }
.evenement.est-nouveau { animation: evenement-entre 400ms var(--sortie-douce); }
@keyframes evenement-entre { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.icone-tourne { animation: tourne 900ms linear infinite; }

/* --- Formules ------------------------------------------------------------- */
.formules { display: grid; gap: var(--espace-4); }
@media (min-width: 900px) { .formules { grid-template-columns: 1fr 1fr; gap: var(--espace-5); } }
.formule {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-6) var(--espace-5);
  background: var(--surface);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-1);
  transition: transform 250ms var(--sortie-douce), box-shadow 250ms var(--sortie-douce);
}
.formule:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.formule__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rayon-moyen); background: var(--surface-2); color: var(--primaire); }
.formule__icone .icone { width: 28px; height: 28px; }
.formule p { margin: 0; color: var(--texte-2); }
.formule ul { list-style: none; display: grid; gap: var(--espace-2); margin-top: var(--espace-2); }
.formule li { display: flex; gap: var(--espace-2); align-items: flex-start; }
.formule li .icone { width: 20px; height: 20px; margin-top: 2px; color: var(--succes); }
.formule li.non .icone { color: var(--texte-3); }

/* Tableau comparatif */
.comparatif { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--rayon-grand); box-shadow: var(--ombre-1); overflow: hidden; }
.comparatif th, .comparatif td { padding: var(--espace-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordure); font-size: 15px; line-height: 22px; }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif thead th { background: var(--surface-2); font-size: 16px; font-weight: 800; }
.comparatif tbody th { font-weight: 700; color: var(--texte-2); width: 28%; }
.comparatif td { transition: background-color var(--duree-geste) var(--sortie-douce); }
.comparatif [data-col].est-survolee { background: var(--primaire-doux); }
.comparatif__entete { display: flex; align-items: center; gap: var(--espace-2); }
.comparatif__entete .icone { color: var(--primaire); }

.segmente.choix-formule { display: none; }
@media (max-width: 719px) {
  .segmente.choix-formule { display: flex; }
  .comparatif thead { display: none; }
  .comparatif tbody tr { display: grid; grid-template-columns: 1fr; }
  .comparatif tbody th { width: auto; padding-bottom: 0; border-bottom: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
  .comparatif td[data-col] { display: none; }
  .comparatif[data-affiche="1"] td[data-col="1"], .comparatif[data-affiche="2"] td[data-col="2"] { display: block; }
}

.segmente {
  display: inline-flex;
  position: relative;
  padding: var(--espace-1);
  border-radius: var(--rayon-moyen);
  background: var(--surface-2);
  margin-bottom: var(--espace-4);
  width: 100%;
}
.segmente button {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 40px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--texte-2);
  cursor: pointer;
  transition: color var(--duree-geste);
}
.segmente button[aria-pressed="true"] { color: var(--texte); }
.segmente__curseur {
  position: absolute;
  top: var(--espace-1);
  bottom: var(--espace-1);
  left: var(--espace-1);
  width: calc(50% - var(--espace-1));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--ombre-1);
  transition: transform 250ms var(--sortie-douce);
}
.segmente[data-actif="2"] .segmente__curseur { transform: translateX(100%); }

/* --- Pages intérieures ---------------------------------------------------- */
.page-titre { padding-block: var(--espace-7) var(--espace-6); }
.page-titre .texte-grand { margin-top: var(--espace-4); max-width: 640px; }
@media (min-width: 1024px) { .page-titre { padding-block: var(--espace-8) var(--espace-7); } }

/* Navigation par ancres (Fonctionnalités) */
.ancres {
  position: sticky;
  top: 0;
  z-index: var(--z-collant);
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  transition: top 300ms var(--sortie-douce);
}
.entete:not(.est-cache) ~ main .ancres { top: var(--hauteur-entete); }
.ancres__liste {
  position: relative;
  display: flex;
  gap: var(--espace-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--espace-2);
}
.ancres__liste::-webkit-scrollbar { display: none; }
.ancres a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--espace-3);
  border-radius: var(--rayon-pilule);
  font-weight: 700;
  font-size: 14px;
  color: var(--texte-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duree-geste);
}
.ancres a:hover { color: var(--texte); }
.ancres a.est-actif { color: var(--sur-primaire); }
.ancres__pastille {
  position: absolute;
  top: var(--espace-2);
  left: 0;
  height: 40px;
  width: 0;
  border-radius: var(--rayon-pilule);
  background: var(--primaire);
  opacity: 0;
  transition: transform 300ms var(--sortie-douce), width 300ms var(--sortie-douce), opacity 200ms;
}

.fonction { display: grid; gap: var(--espace-6); align-items: center; padding-block: var(--espace-7); border-bottom: 1px solid var(--bordure); }
.fonction:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .fonction { grid-template-columns: 1fr 1fr; gap: var(--espace-8); padding-block: var(--espace-8); }
  .fonction--inverse .fonction__visuel { order: -1; }
}
.fonction__texte .titre-2 { margin-bottom: var(--espace-4); }
.liste-coches { list-style: none; display: grid; gap: var(--espace-3); }
.liste-coches li { display: flex; gap: var(--espace-3); align-items: flex-start; color: var(--texte-2); }
.liste-coches li strong { color: var(--texte); }
.liste-coches .icone { width: 20px; height: 20px; margin-top: 2px; color: var(--primaire); }
.fonction__visuel { display: grid; place-items: center; }
.icone-geante {
  display: grid;
  place-items: center;
  width: 180px; height: 180px;
  border-radius: var(--rayon-feuille);
  background: var(--primaire-doux);
  color: var(--primaire);
}
.icone-geante .icone { width: 72px; height: 72px; stroke-width: 1.5; }
.note-interne { color: var(--texte-3); font-size: 13px; }

/* Maquettes compactes */
.maquette { width: 100%; max-width: 440px; }
.folio__ligne { display: flex; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-2) 0; border-bottom: 1px solid var(--bordure); font-size: 14px; }
.folio__ligne span:first-child { color: var(--texte-2); }
.folio__ligne .montant { font-weight: 700; }
.folio__reste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--espace-4);
  padding: var(--espace-4);
  border-radius: var(--rayon-moyen);
  background: var(--surface-inverse);
  color: var(--texte-inverse);
}
.folio__reste .montant { font-size: 22px; font-weight: 800; }
.folio__reste .point-dsv { margin: 0 var(--espace-2) 0 0; }

.taches { list-style: none; display: grid; gap: var(--espace-2); }
.tache {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  width: 100%;
  min-height: 56px;
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform var(--duree-geste) var(--sortie-douce), border-color var(--duree-geste);
}
.tache:hover { border-color: var(--bordure-champ); }
.tache:active { transform: scale(0.98); }
.tache__nom { flex: 1; font-weight: 800; }
.tache__nom span { display: block; font-weight: 600; font-size: 13px; color: var(--texte-3); }
.tache .badge { transition: transform 200ms var(--sortie-douce); }
.tache.vient-de-changer .badge { animation: rebond 350ms var(--sortie-douce); }
@keyframes rebond { 40% { transform: scale(1.15); } }

.widget-resa { display: grid; gap: var(--espace-3); }
.widget-resa__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-2); }
.champ-faux { padding: var(--espace-2) var(--espace-3); border: 1px solid var(--bordure-champ); border-radius: var(--rayon-moyen); font-size: 14px; }
.champ-faux span { display: block; font-size: 12px; font-weight: 700; color: var(--texte-3); text-transform: uppercase; letter-spacing: 0.04em; }
.moyens { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.moyen { padding: var(--espace-1) var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-pilule); font-size: 13px; font-weight: 700; color: var(--texte-2); }
.moyen.est-choisi { border-color: var(--primaire); background: var(--primaire-doux); color: var(--texte); }
.widget-resa__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--espace-3); border-top: 1px solid var(--bordure); font-size: 14px; }
.widget-resa__total .montant { font-size: 20px; font-weight: 800; }

/* Pour qui */
.cibles { display: grid; gap: var(--espace-4); }
@media (min-width: 720px) { .cibles { grid-template-columns: 1fr 1fr; gap: var(--espace-5); } }
.cible { display: flex; gap: var(--espace-4); align-items: flex-start; }
.cible__icone { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--rayon-grand); background: var(--primaire-doux); color: var(--primaire); transition: transform 300ms var(--sortie-douce); }
.cible:hover .cible__icone { transform: rotate(-6deg) scale(1.06); }
.cible__icone .icone { width: 28px; height: 28px; }
.cible h2 { margin-bottom: var(--espace-2); }
.cible p { margin: 0; color: var(--texte-2); }

/* À propos */
.histoire { display: grid; gap: var(--espace-7); align-items: center; }
@media (min-width: 900px) { .histoire { grid-template-columns: 0.8fr 1.2fr; } }
.histoire__lampe { display: grid; place-items: center; padding: var(--espace-6); border-radius: var(--rayon-feuille); background: var(--surface-2); }
.prose { max-width: 680px; }
.prose h2 { margin: var(--espace-6) 0 var(--espace-3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--texte-2); }
.prose ul, .prose ol { padding-left: var(--espace-5); margin-bottom: var(--espace-4); display: grid; gap: var(--espace-2); }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--espace-2) var(--espace-5); margin: 0 0 var(--espace-4); }
.prose dt { font-weight: 800; }
.prose dd { margin: 0; color: var(--texte-2); }

/* FAQ */
.faq { display: grid; gap: var(--espace-3); max-width: 820px; }
.question { background: var(--surface); border-radius: var(--rayon-grand); box-shadow: var(--ombre-1); overflow: hidden; }
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  min-height: 64px;
  padding: var(--espace-4) var(--espace-5);
  font-weight: 800;
  font-size: 17px;
  line-height: 24px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duree-geste);
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { background: var(--surface-2); }
.question summary .icone { transition: transform 300ms var(--sortie-douce); color: var(--primaire); }
.question[open] summary .icone { transform: rotate(180deg); }
.question__reponse { padding: 0 var(--espace-5) var(--espace-5); color: var(--texte-2); }
.question__reponse p { margin: 0; }

/* --- Formulaire ----------------------------------------------------------- */
.demo { display: grid; gap: var(--espace-7); align-items: start; }
@media (min-width: 1024px) { .demo { grid-template-columns: 1.15fr 0.85fr; } }
.formulaire { display: grid; gap: var(--espace-4); }
.formulaire__deux { display: grid; gap: var(--espace-4); }
@media (min-width: 600px) { .formulaire__deux { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 700; font-size: 14px; line-height: 20px; }
.champ label .optionnel { font-weight: 600; color: var(--texte-3); }
.champ input, .champ textarea {
  width: 100%;
  min-height: var(--hauteur-champ-grand);
  padding: var(--espace-3);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-moyen);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  transition: border-color var(--duree-geste), box-shadow var(--duree-geste);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-color: var(--texte-2); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.champ--erreur input, .champ--erreur textarea { border-color: var(--erreur); border-width: 2px; }
.champ__aide { font-size: 13px; line-height: 18px; color: var(--texte-3); }
.champ__erreur { display: flex; align-items: center; gap: var(--espace-1); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--erreur); }
.champ__erreur .icone { width: 16px; height: 16px; }
.champ--erreur .champ__erreur { animation: refus 300ms var(--sortie-douce); }
.case { display: flex; gap: var(--espace-3); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--texte-2); cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--primaire); cursor: pointer; }
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.merci { text-align: center; padding: var(--espace-6) var(--espace-5); }
.merci .logo__symbole { width: 140px; height: auto; margin: 0 auto var(--espace-5); }
.merci .logo__flamme { animation: allume 700ms var(--sortie-douce) 300ms backwards, vacille 2.4s ease-in-out 1.1s 3; }

.encart { display: grid; gap: var(--espace-4); }
.encart__ligne { display: flex; gap: var(--espace-3); align-items: flex-start; }
.encart__ligne .icone { color: var(--primaire); margin-top: 2px; }
.encart__ligne p { margin: 0; }
.encart__ligne strong { display: block; }

/* --- Bloc démo ------------------------------------------------------------ */
.bloc-demo { padding-block: var(--espace-7); background: var(--surface-2); }
.bloc-demo__grille { display: grid; gap: var(--espace-5); align-items: center; }
.bloc-demo__lampe { display: grid; place-items: center; }
.bloc-demo__lampe .logo--geant { max-width: 200px; }
@media (min-width: 900px) {
  .bloc-demo { padding-block: var(--espace-8); }
  .bloc-demo__grille { grid-template-columns: 280px 1fr; gap: var(--espace-7); }
  .bloc-demo__lampe .logo--geant { max-width: 240px; }
}

/* --- 404 ------------------------------------------------------------------ */
.introuvable { text-align: center; padding-block: var(--espace-8); }
.introuvable .logo__symbole { width: 180px; height: auto; margin: 0 auto var(--espace-5); }
.introuvable .logo__flamme { animation: eteint 900ms var(--sortie-douce) 800ms forwards; }
.introuvable .titre-1 { margin-bottom: var(--espace-3); }
.introuvable .groupe-boutons { justify-content: center; }

/* --- Pied de page --------------------------------------------------------- */
.pied { background: var(--bande-fond); color: var(--bande-texte); padding-top: var(--espace-7); --logo-lampe: var(--argile-claire); --logo-nom: var(--chaux); --focus: #8DB8EB; }
.pied__grille { display: grid; gap: var(--espace-6); grid-template-columns: 1fr 1fr; }
.pied__marque { grid-column: 1 / -1; }
.pied__marque p { margin-top: var(--espace-3); color: var(--bande-texte-2); }
.pied .legende { color: var(--brun-400); margin-bottom: var(--espace-3); }
.pied ul { list-style: none; display: grid; gap: var(--espace-1); }
.pied nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--bande-texte); text-decoration: none; }
.pied nav a:hover { color: var(--chaux); text-decoration: underline; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-2);
  margin-top: var(--espace-7);
  padding-block: var(--espace-5);
  border-top: 1px solid var(--bande-bordure);
  color: var(--bande-texte-2);
  font-size: 14px;
}
.pied__bas p { margin: 0; }
.pied .logo__flamme { transition: transform 300ms var(--sortie-douce); }
@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .pied__marque { grid-column: auto; }
}

/* --- Transitions entre pages (navigateurs compatibles) ------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--sortie-douce) both page-sort; }
::view-transition-new(root) { animation: 420ms var(--sortie-douce) 60ms both page-entre; }
::view-transition-group(logo), ::view-transition-group(entete) { animation-duration: 0s; }
@keyframes page-sort { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(14px); } }

/* Bascule de thème : révélation circulaire depuis le bouton */
.bascule-theme::view-transition-old(root),
.bascule-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.bascule-theme::view-transition-new(root) { animation: revele 550ms var(--sortie-douce); }
@keyframes revele {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* --- Animations forcées : le réglage « moins d'animations » du système n'est pas appliqué (choix éditorial). */

/* --- Impression ----------------------------------------------------------- */
@media print {
  .entete, .menu-mobile, .bloc-demo, .pied, .ancres, .bandeau-dev { display: none !important; }
  body { background: #FFFFFF; }
  .js [data-apparait] { opacity: 1; transform: none; }
}

/* Ajustements d'espacement */
.prose > div + div { margin-top: var(--espace-6); }
.bloc-demo__texte .titre-1 { margin-bottom: var(--espace-3); }