/* ==========================================================================
   Commune, par l'Agence SBA : page de présentation
   Couleurs et polices de l'identité de l'agence (Lora, Ubuntu)
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --tint: #f2ece3;
  --text: #2c3440;
  --muted: #404f64;
  --heading: #0c0947;
  --blue: #1f16c7;
  --blue-hover: #160f96;
  /* Rouge des mots mis en avant dans les titres (bleu, blanc, rouge), même saturation et luminosité que --blue ; distinct du rouge « non conforme » de la jauge RGAA */
  --red: #c51624;
  --border: #ddd3c4;
  --dark: #0c0947;
  --on-dark: #ffffff;
  --on-dark-muted: #d4d3ea;

  --radius: 10px;
  --shadow: 0 1px 2px rgb(12 9 71 / 6%), 0 8px 24px rgb(12 9 71 / 8%);
  --shadow-hover: 0 2px 4px rgb(12 9 71 / 8%), 0 12px 32px rgb(12 9 71 / 12%);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: clamp(4rem, 8vw, 6.5rem);

  --gutter: 16px;
  --content: 1200px;

  --font-text: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Lora", Georgia, serif;

  /* Flèches des schémas : trait de 2 px et pointe effilée, en masque */
  --head-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0l12 6-12 6 3.5-6z'/%3E%3C/svg%3E");
  --head-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0l6 3.5L12 0 6 12z'/%3E%3C/svg%3E");
  --arrow-right: var(--head-right) right center / 12px 12px no-repeat, linear-gradient(#000 0 0) left center / calc(100% - 6px) 2px no-repeat;
  --arrow-down: var(--head-down) center bottom / 12px 12px no-repeat, linear-gradient(#000 0 0) center top / 2px calc(100% - 6px) no-repeat;
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}

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

html {
  scroll-behavior: smooth;
  /* Une ancre s'arrête juste sous l'en-tête collant : hauteur mesurée par assets/js/main.js,
     72 px + la bordure sans script */
  scroll-padding-top: var(--header-h, 73px);
  -webkit-text-size-adjust: 100%;
}
/* Un peu d'air au-dessus des ancres (titres, questions, cartes) ; les sections ont déjà leur marge intérieure */
[id]:not(section, main) { scroll-margin-top: var(--space-3); }

/* Les captures qui entrent de côté (assets/js/animations.js) ne font jamais défiler la page
   en largeur ; clip ne crée pas de zone de défilement (l'en-tête collant n'est pas touché) */
main { overflow-x: clip; }

/* Le temps que le script d'animations pose ses états de départ (2 s au plus, voir head.php) */
.anim-wait main { visibility: hidden; }
/* Sauf le hero, animé en CSS sans attendre le script (voir « Hero : apparition ») */
.anim-wait main .hero { visibility: visible; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}
/* Pied de page en bas de l'écran sur les pages courtes (404) */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

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

h1, h2, h3 {
  margin: 0 0 var(--space-2);
  color: var(--heading);
  line-height: 1.2;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem); }

/* Mot clé d'un titre, en rouge */
.accent { color: var(--red); }
/* Garde le mot clé et sa ponctuation sur la même ligne, y compris pendant le découpage en lignes du hero */
.nowrap { white-space: nowrap; }
h3 { font-size: 1.3125rem; font-weight: 500; }

p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mail-at::before { content: "@"; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--on-dark);
}
.skip-link:focus { top: var(--space-1); color: var(--on-dark); }

/* Boutons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

.btn--secondary { background: var(--surface); color: var(--blue); }
.btn--secondary:hover { background: #ecebfb; color: var(--blue-hover); border-color: var(--blue-hover); }

.btn--small { min-height: 44px; padding: 0.5rem 1rem; }

/* Flèche des liens sortants, ajoutée par liens_sortants() : la même que celle du lien Fonctionnalités */
.lien-sortant {
  width: 0.875em;
  height: 0.875em;
  margin-left: 0.125em;
  vertical-align: -0.0625em;
  transition: transform 0.2s ease;
}
.btn .lien-sortant { flex: none; width: 1rem; height: 1rem; margin-left: 0; }
a:hover > .lien-sortant { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .lien-sortant { transition: none; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(250 249 247 / 94%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
  text-decoration: none;
}
.brand img { width: 72px; height: auto; }
.brand__name {
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
}
.brand:hover { color: var(--heading); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Intitulé du menu : un lien, ou le bouton d'un méga menu (créé par main.js) */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link:hover { color: var(--blue); text-decoration: underline; }
.site-nav__link svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
a.site-nav__link svg { display: none; }
.site-nav__link[aria-expanded="true"] { color: var(--blue); }
.site-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Page en cours, rubrique de la page en cours, ou rubrique de la section de l'accueil où l'on se trouve (is-here, posé par main.js) */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.site-nav__link[aria-current],
.site-nav__item:is(.is-current, .is-here) > .site-nav__link { color: var(--blue); }
.site-nav__link[aria-current]::after,
.site-nav__item:is(.is-current, .is-here) > .site-nav__link::after { transform: scaleX(1); }
.site-nav__link[aria-current]:hover,
.site-nav__item:is(.is-current, .is-here) > .site-nav__link:hover { text-decoration: none; }

/* Grand écran : pastille de fond au survol et sur la rubrique ouverte ; la rubrique en cours garde une pastille bleue,
   comme le lien en cours dans le méga menu, plutôt que le trait */
@media (min-width: 1024px) {
  .site-nav__list { gap: 0.25rem; }
  .site-nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .site-nav__link:hover,
  .site-nav__link[aria-expanded="true"] { background: rgb(12 9 71 / 6%); color: var(--heading); text-decoration: none; }
  .site-nav__link:focus-visible { border-radius: var(--radius); }
  .site-nav__link::after { display: none; }
  .site-nav__link[aria-current],
  .site-nav__item:is(.is-current, .is-here) > .site-nav__link { background: rgb(31 22 199 / 12%); color: var(--blue); }
  .site-nav__link[aria-current]:hover,
  .site-nav__item:is(.is-current, .is-here) > .site-nav__link:is(:hover, [aria-expanded="true"]) { background: rgb(31 22 199 / 18%); color: var(--blue); }
  /* « Voir la démo » : même hauteur (40 px) et même corps que les intitulés */
  .site-nav > .btn { min-height: 40px; padding-block: 0.375rem; font-size: 0.9375rem; }
}

/* Méga menu : panneau sous l'en-tête, sur toute sa largeur (positionné par rapport à .site-header).
   Sans script, il reste masqué et l'intitulé mène à la page. */
.mega__group { --halo: 31 22 199; }
.mega__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--heading);
  text-decoration: none;
}
/* Survol : même pastille que les liens, alignée sur eux et arrêtée avant le filet */
a.mega__head { position: relative; isolation: isolate; }
a.mega__head::before {
  position: absolute;
  z-index: -1;
  inset: -0.375rem -0.5rem 0.375rem;
  border-radius: var(--radius);
  content: "";
  transition: background-color 0.15s;
}
a.mega__head:hover { color: var(--heading); }
a.mega__head:hover::before { background: rgb(var(--halo) / 8%); }
.mega__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: rgb(var(--halo) / 10%);
  color: rgb(var(--halo));
}
.mega__icon svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.75; }
.mega__name { font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.mega__links {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega__links a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline: -0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.mega__links svg { flex: none; width: 1.125rem; height: 1.125rem; color: rgb(var(--halo)); stroke-width: 1.75; }
.mega__links a:hover { background: rgb(var(--halo) / 8%); color: var(--heading); }
.mega__links a[aria-current] { background: rgb(var(--halo) / 10%); color: rgb(var(--halo)); font-weight: 500; }
.mega__text { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
/* Bouton du diagnostic en bas de l'encadré, aligné sur le bas des listes voisines */
.mega__cta { display: flex; flex-direction: column; align-items: flex-start; }
.mega__cta .mega__text { margin-bottom: var(--space-2); }
.mega__cta .btn { margin-top: auto; }

/* Thèmes de « Offre » : vignettes de l'accueil de chaque thème */
.mega__themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
}
.mega__themes a { display: grid; gap: 0.125rem; color: var(--text); text-decoration: none; }
.mega__themes img {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mega__themes a:hover img { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.mega__theme-name { color: var(--heading); font-weight: 500; }
.mega__themes a:hover .mega__theme-name { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.mega__theme-resume { color: var(--muted); font-size: 0.875rem; line-height: 1.35; }

/* Diagnostic gratuit : seul encadré du menu, sur fond teinté */
.mega__group--cta { padding: var(--space-2); border-radius: var(--radius); background: var(--tint); }
.mega__group--cta .mega__head { border-bottom-color: var(--border); }

.mega__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-4);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.mega__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
  text-decoration: none;
}
.mega__foot a:hover { text-decoration: underline; }
.mega__foot svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.mega__foot a:hover svg { transform: translate(2px, -2px); }
.js .mega[hidden] { display: none; }

@media (min-width: 1024px) {
  .js .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 16px 32px rgb(12 9 71 / 10%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.375rem);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .js .site-nav__item.is-open > .mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }
  .mega__inner {
    display: grid;
    gap: var(--space-4) var(--space-5);
    padding-block: var(--space-4) var(--space-3);
  }
  .mega__foot { grid-column: 1 / -1; }
  /* Titre et contenu de chaque groupe sur des rangées communes : les filets restent alignés si un titre passe à la ligne */
  .mega__group { display: grid; grid-row: span var(--rows, 2); grid-template-rows: subgrid; row-gap: 0; }
  .mega__head { align-self: stretch; }
  /* Encadré : le retrait vertical compense le fond, pour que son titre reste aligné sur ceux des autres groupes */
  .mega__group--cta { margin-block: calc(-1 * var(--space-2)); }
  /* Fonctionnalités : « Informer les habitants », la plus fournie, sur deux colonnes */
  .mega__inner--fonctionnalites { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-4); }
  .mega__group--habitants .mega__links { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-3); }
  .mega__inner--offre { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .mega__themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Accessibilité : titre, phrase d'introduction, liens */
  .mega__inner--accessibilite { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: var(--space-4); --rows: 3; }
  .mega__cta { grid-row: span 2; }
  /* Ressources : deux groupes de guides et le dossier pour les élus */
  .mega__inner--ressources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
/* Petit écran : le libellé ne tient plus à côté du logo jusqu'à 416 px (l'en-tête passerait sur deux lignes),
   le pictogramme reste seul (le libellé est conservé pour les lecteurs d'écran) */
@media (max-width: 429.98px) {
  .nav-toggle { justify-content: center; min-width: 44px; padding-inline: 0.75rem; }
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* « Commune », le logo, la recherche et le menu tiennent sur une ligne jusqu'à 320 px */
  .site-header__inner { column-gap: 0.5rem; }
  .brand { gap: 0.5rem; }
  .brand img { width: 64px; }
  .brand__name { padding-left: 0.5rem; font-size: 1.25rem; }
}

@media (max-width: 1023px) {
  /* Menu replié derrière le bouton dès que le script est chargé. Ouvert, c'est un panneau
     posé sous l'en-tête, par-dessus la page : la barre du logo ne bouge pas. */
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: 0 var(--gutter) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    /* Ombre, puis voile sur la page ; découpé au ras du haut pour laisser la barre du logo intacte */
    box-shadow: 0 16px 32px rgb(12 9 71 / 14%), 0 0 0 100vmax rgb(12 9 71 / 30%);
    clip-path: inset(0 -100vmax -100vmax);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .js .site-nav__list { flex-direction: column; gap: 0; margin-bottom: var(--space-2); }
  .js .site-nav__link { display: flex; justify-content: space-between; width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--border); text-align: left; }
  /* Liste verticale : le repère passe à gauche du lien */
  .js .site-nav__link::after { inset: 0.75rem auto 0.75rem calc(-1 * var(--space-1) - 1px); width: 3px; height: auto; transform: scaleY(0); }
  .js .site-nav__link[aria-current]::after,
  .js .site-nav__item:is(.is-current, .is-here) > .site-nav__link::after { transform: scaleY(1); }
  /* Méga menu : volet déplié sous son intitulé */
  .js .mega { display: none; padding-block: var(--space-2); border-bottom: 1px solid var(--border); }
  .js .site-nav__item.is-open > .mega { display: block; }
  .mega__inner { display: grid; gap: var(--space-3); padding-inline: 0; }
  .site-nav { flex-wrap: wrap; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .js .site-nav,
  .js .site-nav.is-open { transform: none; transition: none; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none !important; }
}
/* Petits écrans de bureau : menu resserré pour tenir sur une ligne */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav { column-gap: var(--space-2); }
  .site-nav__list { column-gap: 0; }
  .mega__inner--fonctionnalites { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3); }
  .mega__group--habitants .mega__links { column-gap: var(--space-2); }
}

/* Captures d'écran
   ========================================================================== */

.screen {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Téléphone : iPhone dessiné en CSS. Bord noir et liseré titane, barre d'état (heure,
   Dynamic Island, réseau, batterie) au-dessus de la capture, boutons latéraux.
   Les captures font 390 × 844 points, le format d'un iPhone 14 ou 15 : rien n'est recadré.
   Les mesures en cqi suivent la largeur de l'écran ; le script donne à la barre d'état
   la couleur du haut de la capture (--statusbar, data-statusbar="dark" sur fond foncé). */
.screen.screen--phone {
  --bezel: 6px;
  --titanium: #9b9ea5;
  --statusbar: #fff;
  /* Rayon intérieur : celui du cadre (15 % de sa largeur) moins le bord */
  --inner: calc(15cqi - 0.7 * var(--bezel));
  container-type: inline-size;
  position: relative;
  width: min(100%, 260px);
  overflow: visible;
  border: var(--bezel) solid #0b0b0d;
  border-radius: 15% / 6.8%;
  background: #0b0b0d;
  box-shadow: 0 0 0 1.5px var(--titanium), 0 0 0 2.5px #5f626a, var(--shadow);
}
.screen--phone img { border-radius: 0 0 var(--inner) var(--inner); }

.screen--phone::before {
  content: "9:41";
  content: "9:41" / "";
  display: block;
  height: 13cqi;
  padding-left: 11cqi;
  border-radius: var(--inner) var(--inner) 0 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 37'%3E%3Crect width='126' height='37' rx='18.5'/%3E%3C/svg%3E") center top 2.2cqi / 31cqi 9cqi no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cpath d='M0 8h3v4H0zm5-2h3v6H5zm5-2.5h3V12h-3zM15 1h3v11h-3z'/%3E%3Cpath d='M22.6 4.1a10.5 10.5 0 0 1 14.8 0M25 6.5a7 7 0 0 1 10 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='10.5' r='1.7'/%3E%3Crect x='44.5' y='1.5' width='21' height='10' rx='3' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='46.5' y='3.5' width='17' height='6' rx='1.5'/%3E%3Crect x='67' y='5' width='1.5' height='3' rx='.75' fill-opacity='.4'/%3E%3C/svg%3E") right 7cqi center / 18cqi 3.4cqi no-repeat,
    var(--statusbar);
  color: #000;
  font: 600 4.4cqi/13cqi -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.01em;
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
}
.screen--phone[data-statusbar="dark"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 37'%3E%3Crect width='126' height='37' rx='18.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13' fill='%23fff'%3E%3Cpath d='M0 8h3v4H0zm5-2h3v6H5zm5-2.5h3V12h-3zM15 1h3v11h-3z'/%3E%3Cpath d='M22.6 4.1a10.5 10.5 0 0 1 14.8 0M25 6.5a7 7 0 0 1 10 0' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='10.5' r='1.7'/%3E%3Crect x='44.5' y='1.5' width='21' height='10' rx='3' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='46.5' y='3.5' width='17' height='6' rx='1.5'/%3E%3Crect x='67' y='5' width='1.5' height='3' rx='.75' fill-opacity='.4'/%3E%3C/svg%3E");
  color: #fff;
}

/* Boutons : action et volume à gauche, verrouillage à droite */
.screen--phone::after {
  content: "";
  position: absolute;
  top: 16%;
  right: calc(-1 * var(--bezel) - 3.5px);
  left: calc(-1 * var(--bezel) - 3.5px);
  height: 30%;
  background:
    linear-gradient(var(--titanium) 0 9%, transparent 0 22%, var(--titanium) 0 46%, transparent 0 54%, var(--titanium) 0 78%, transparent 0) left / 2.5px 100% no-repeat,
    linear-gradient(transparent 0 22%, var(--titanium) 0 62%, transparent 0) right / 2.5px 100% no-repeat;
  pointer-events: none;
}

/* Agrandissement des captures */
.js .screen { position: relative; }
.screen__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: zoom-in;
}
.screen__zoom:focus-visible { outline-offset: 4px; }

.has-lightbox { overflow: hidden; }

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-4) var(--gutter);
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(12 9 71 / 85%); }

.lightbox__img {
  max-width: min(100%, 1440px);
  max-height: calc(100vh - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 48px rgb(0 0 0 / 35%);
  cursor: default;
}
.lightbox--phone .lightbox__img { border-radius: 28px; }
.lightbox__img[hidden] { display: none; }
.lightbox--phone .lightbox__video { border-radius: 28px; }
.lightbox__video {
  max-width: min(100%, 1600px);
  max-height: calc(100vh - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 48px rgb(0 0 0 / 35%);
  cursor: default;
}

.lightbox__close {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.lightbox__close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.lightbox__close:focus-visible { outline-color: var(--on-dark); }

/* Prise de rendez-vous : page Cal.com dans une boîte de dialogue */
.rdv {
  width: min(100vw - 2 * var(--gutter), 1060px);
  max-width: none;
  height: min(100vh - 2 * var(--space-4), 780px);
  height: min(100dvh - 2 * var(--space-4), 780px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 48px rgb(0 0 0 / 35%);
}
.rdv[open] { display: flex; flex-direction: column; }
.rdv::backdrop { background: rgb(12 9 71 / 85%); }

.rdv__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.rdv__header h2 { margin: 0; font-size: 1.375rem; }
.rdv__header p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.rdv__header a[href^="tel:"] { white-space: nowrap; }

.rdv__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.rdv__close:hover { border-color: var(--blue); color: var(--blue); }
.rdv__close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.rdv__frame { position: relative; flex: 1; }
.rdv__frame p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
}
.rdv__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

@media (max-width: 599px) {
  .rdv { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .rdv__header { padding-inline: var(--gutter); }
}

/* Recherche du site (assets/js/recherche.js)
   ========================================================================== */

/* Bouton de l'en-tête : pictogramme seul sur petit écran (contre « Menu »),
   champ factice avec libellé et raccourci à côté du logo sur grand écran */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.search-toggle[hidden] { display: none; }
.search-toggle:hover { border-color: var(--blue); color: var(--blue); }
.search-toggle svg { flex: none; width: 1.125rem; height: 1.125rem; }
.search-toggle__label,
.search-toggle kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Petit écran : le bouton se range contre « Menu » */
.search-toggle + .nav-toggle { margin-left: calc(var(--space-1) - var(--space-2)); }

/* Le champ ne tient qu'à partir de 1 152 px ; entre 1 024 et 1 151, la loupe seule précède le menu */
@media (min-width: 1152px) {
  .search-toggle {
    justify-content: flex-start;
    width: 13.5rem;
    margin: 0 auto 0 var(--space-2);
    color: var(--muted);
  }
  .search-toggle__label,
  .search-toggle kbd { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .search-toggle kbd { margin-left: auto; }
}

kbd {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

.search {
  width: min(100vw - 2 * var(--gutter), 680px);
  max-width: none;
  max-height: min(100vh - 20vh, 640px);
  max-height: min(100dvh - 20dvh, 640px);
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 48px rgb(0 0 0 / 35%);
}
.search[open] { display: flex; flex-direction: column; }
.search::backdrop { background: rgb(12 9 71 / 60%); }
@media (prefers-reduced-motion: no-preference) {
  .search[open] { animation: search-in 0.16s ease-out; }
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(-8px); }
}

.search__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem var(--space-3);
  border-bottom: 1px solid var(--border);
}
.search__bar > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--muted); }

/* La complétion s'affiche en gris derrière la saisie, aux mêmes dimensions */
.search__field { position: relative; flex: 1; min-width: 0; }
.search__input,
.search__ghost {
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: normal;
}
.search__input { position: relative; background: transparent; color: var(--heading); }
.search__input::placeholder { color: var(--muted); opacity: 1; }
.search__input:focus-visible { outline: 0; }
.search__ghost { position: absolute; inset: 0; overflow: hidden; color: var(--muted); white-space: pre; pointer-events: none; }
.search__ghost[hidden] { display: none; }
.search__ghost span:first-child { visibility: hidden; }

/* Focus du champ : un trait bleu sous la barre de recherche */
.search__bar:has(.search__input:focus-visible) { border-bottom-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }

.search__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.search__close:hover { border-color: var(--blue); color: var(--blue); }
.search__close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.search__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); }
.search__message { margin: 0; padding: var(--space-2); color: var(--muted); }
.search__message:not([hidden]) + .search__results:not(:empty) { border-top: 1px solid var(--border); }

.search__group + .search__group { margin-top: var(--space-1); }
.search__label {
  padding: var(--space-1) var(--space-2) 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.search__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem var(--space-2);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  scroll-margin: var(--space-1);
}
.search__option[aria-selected="true"] { background: #ecebfb; color: var(--text); }
.search__option[aria-selected="true"] .search__title { color: var(--blue); }

.search__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--heading);
}
.search__icon svg { width: 1rem; height: 1rem; }

.search__content { display: grid; min-width: 0; gap: 0.125rem; }
.search__title { color: var(--heading); font-weight: 500; line-height: 1.35; }
.search__meta { color: var(--muted); font-size: 0.8125rem; }
.search__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.search mark { padding: 0 0.0625rem; border-radius: 2px; background: #fdeab4; color: inherit; }

.search__tries { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2) var(--space-2); color: var(--muted); font-size: 0.875rem; }
.search__tries[hidden] { display: none; }
.search__tries button {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  cursor: pointer;
}
.search__tries button:hover { border-color: var(--blue); color: var(--blue); }

.search__keys {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  margin: 0;
  padding: 0.625rem var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8125rem;
}
.search__keys kbd + kbd { margin-left: -0.125rem; }
.search__keys kbd:not(:first-child) { margin-left: 0.5rem; }
.search__keys kbd + kbd:not(:first-child) { margin-left: -0.125rem; }

/* Écrans tactiles : pas de clavier, pas d'aide sur les touches */
@media (hover: none) {
  .search__keys { display: none; }
}

@media (max-width: 599px) {
  .search { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .search__bar { padding-left: var(--gutter); }
}

/* Hero
   ========================================================================== */

.hero { padding-block: var(--space-5) var(--space-6); }

.hero__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.lead {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.1875rem;
}

/* Prix d'appel, sous le chapeau de l'accueil */
.hero__price { color: var(--heading); font-size: 1.0625rem; }
.hero__price strong { font-weight: 500; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
}
.hero__points li { display: flex; align-items: center; gap: 0.5rem; }
/* --tick : tracé de la coche, de gauche à droite (animé par le script, 1 sans lui) */
.checklist li::before { clip-path: inset(0 calc(100% - var(--tick, 1) * 100%) 0 0); }
.hero__points li::before,
.checklist li::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hero : apparition
   En CSS et non dans assets/js/animations.js : elle part dès le premier rendu, sans attendre le
   chargement de GSAP. Le chapeau est l'élément que Google mesure (LCP), il ne doit pas attendre.
   Le texte apparaît dans l'ordre de la page, le titre monte derrière un masque, puis les écrans
   et le bouton pause. Seuls translate et opacity sont animés : transform reste au script (effet
   de profondeur du téléphone). Rien d'animé si le visiteur limite les animations, ni à l'impression. */
@media screen and (prefers-reduced-motion: no-preference) {
  :is(.hero__text, .hero--compact > .container) > * {
    animation: hero-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) backwards;
  }
  /* Fil d'Ariane, puis titre ; ce qui suit le titre part quand ses dernières lignes sortent du masque */
  .hero :is(.hero__text, .hero--compact > .container) > h1 { animation-name: hero-title; }
  :is(.hero__text, .hero--compact > .container) > * + h1 { animation-delay: 0.08s; }
  :is(.hero__text, .hero--compact > .container) > h1 + * { animation-delay: 0.3s; }
  :is(.hero__text, .hero--compact > .container) > * + h1 + * { animation-delay: 0.38s; }
  :is(.hero__text, .hero--compact > .container) > h1 + * + * { animation-delay: 0.38s; }
  :is(.hero__text, .hero--compact > .container) > * + h1 + * + * { animation-delay: 0.46s; }
  :is(.hero__text, .hero--compact > .container) > h1 + * + * + * { animation-delay: 0.46s; }
  :is(.hero__text, .hero--compact > .container) > * + h1 + * + * + * { animation-delay: 0.54s; }
  :is(.hero__text, .hero--compact > .container) > h1 + * + * + * + * { animation-delay: 0.54s; }

  .hero__visual .screen--desktop { --rise: 48px; animation: hero-rise 1s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
  .hero__visual .screen--phone { --rise: 72px; animation: hero-rise 1s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
  .hero__visual .screen--desktop ~ .screen--phone { animation-delay: 0.5s; }
  .hero__visual :is(.slideshow-bar, .video-controls) { --rise: 12px; animation: hero-rise 0.6s 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 var(--rise, 24px); } }
/* Le masque reste au bas de la boîte du titre pendant que le texte monte (marges pour les accents) */
@keyframes hero-title {
  from { translate: 0 100%; clip-path: inset(-100% -10% 100% -10%); }
  to { translate: 0 0; clip-path: inset(-100% -10% 0 -10%); }
}

.hero__visual,
.theme__visual {
  position: relative;
  padding-bottom: var(--space-5);
}
.hero__visual .screen--phone,
.theme__visual .screen--phone {
  position: absolute;
  right: 0;
  bottom: 0;
  --bezel: 4px;
  width: clamp(110px, 24%, 200px);
}
.hero__visual .screen--desktop,
.theme__visual .screen--desktop { margin-right: clamp(40px, 12%, 110px); }

/* Vidéo de démonstration : bouton pause et description dépliable sous la vidéo */
.hero__visual--video { padding-bottom: 0; }
.screen video { display: block; width: 100%; height: auto; }
.screen--phone video { border-radius: 0 0 var(--inner) var(--inner); }
.hero__visual--video.hero__visual--phone { justify-items: center; }
.video-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.video-controls .slideshow-toggle { flex: none; }
.video-controls .slideshow-toggle[hidden] { display: none; }
.video-description { flex: 1; min-width: 12rem; color: var(--muted); font-size: 0.9375rem; }
.video-description summary { line-height: 2rem; color: var(--heading); cursor: pointer; }
.video-description ol { margin: var(--space-1) 0 0; padding-left: 1.25rem; }
.video-description li + li { margin-top: 0.25rem; }

/* Diaporama des thèmes : images superposées, seule .is-active est visible */
.slides { display: grid; }
.slides img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slides img.is-active { opacity: 1; }

.slideshow-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.slideshow-bar[hidden] { display: none; }

.slideshow-toggle {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.slideshow-toggle:hover { border-color: var(--blue); color: var(--blue); }
.slideshow-toggle svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.slideshow-toggle .icon-play,
.slideshow-toggle[aria-pressed="true"] .icon-pause { display: none; }
.slideshow-toggle[aria-pressed="true"] .icon-play { display: block; }

.slideshow-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.slideshow-label span { color: var(--heading); font-weight: 500; }

/* Accueil : atouts en cartes sous le texte et les écrans, sur toute la largeur.
   Le pictogramme de l'hébergement porte un petit drapeau, aux bleu et rouge du site. */
.hero__assets {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__assets li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font-weight: 500;
  line-height: 1.35;
}
.hero__assets .guarantees__icon { position: relative; width: 3rem; height: 3rem; }
.hero__assets .guarantees__icon svg { width: 1.5rem; height: 1.5rem; }
.hero__asset--fr .guarantees__icon::after {
  content: "";
  position: absolute;
  right: -0.375rem;
  bottom: -0.25rem;
  width: 1.25rem;
  height: 0.875rem;
  border: 2px solid var(--surface);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue) 0 33.4%, #fff 33.4% 66.6%, var(--red) 66.6%);
  box-shadow: 0 1px 2px rgb(12 9 71 / 20%);
}
/* Téléphone : deux colonnes, pictogramme au-dessus ; plus large : pictogramme à gauche, quatre colonnes dès 960 px */
@media (min-width: 600px) {
  .hero__assets li { flex-direction: row; align-items: center; gap: var(--space-2); padding-right: var(--space-3); }
}
@media (min-width: 960px) { .hero__assets { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-4); } }
@media screen and (prefers-reduced-motion: no-preference) {
  .hero__assets > li { animation: hero-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s backwards; }
  .hero__assets > li + li { animation-delay: 0.68s; }
  .hero__assets > li + li + li { animation-delay: 0.76s; }
  .hero__assets > li + li + li + li { animation-delay: 0.84s; }
}

@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 5fr 6fr; }
  .hero { padding-top: var(--space-6); }
}

/* Sections
   ========================================================================== */

.section { padding-block: var(--space-6); }
.section--tinted { background: var(--tint); }

.section--dark {
  background: var(--dark);
  color: var(--on-dark-muted);
}
.section--dark h2 { color: var(--on-dark); }
.section--dark :focus-visible { outline-color: var(--on-dark); }
.section--dark .checklist li::before { background: #a9a5ff; }
.section--dark .checklist li { color: var(--on-dark); }
.section--dark .screen:not(.screen--phone) { border-color: transparent; }

.section__intro {
  max-width: 44rem;
  margin-bottom: var(--space-5);
}
.section__intro p { color: var(--muted); font-size: 1.125rem; }
/* Seconde partie d'une section, après un premier bloc */
.section__intro--next { margin-top: var(--space-6); margin-bottom: var(--space-3); }

/* Bénéfices : bandeau sous le hero de l'accueil, sur deux colonnes, pictogramme en face du titre */
.section--benefits { padding-block: var(--space-6); }

.benefits {
  display: grid;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefits li { display: flex; gap: var(--space-3); }
.benefits__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: rgb(31 22 199 / 10%);
  color: var(--blue);
}
.benefits__icon svg { width: 1.75rem; height: 1.75rem; stroke-width: 1.75; }
.benefits h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-title);
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.benefits p { margin: 0; color: var(--muted); font-size: 1rem; }

@media (min-width: 760px) { .benefits { grid-template-columns: repeat(2, 1fr); } }

/* Thèmes : onglets (le script les active, sinon les quatre thèmes s'enchaînent)
   ========================================================================== */

.themes__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.themes__bar[hidden] { display: none; }

.themes__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  gap: var(--space-2);
}

/* Onglet : nom du thème sur une jauge, qui se remplit pendant le défilement automatique */
.themes__tabs [role="tab"] {
  position: relative;
  min-height: 48px;
  padding: 0.5rem 0 0.875rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}
.themes__tabs [role="tab"]::after,
.themes__progress {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--border);
}
.themes__tabs [role="tab"]:hover { color: var(--blue); }
.themes__tabs [aria-selected="true"] { color: var(--heading); }
.themes__progress {
  z-index: 1;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
[aria-selected="true"] > .themes__progress { transform: none; }
.themes--playing [aria-selected="true"] > .themes__progress { animation: themes-progress var(--themes-delay, 6s) linear; }
.themes--paused [aria-selected="true"] > .themes__progress { animation-play-state: paused; }
@keyframes themes-progress { from { transform: scaleX(0); } }

.themes__bar .slideshow-toggle { flex: none; }
.themes__bar .slideshow-toggle[hidden] { display: none; }

@media (max-width: 479.98px) {
  .themes__tabs { gap: var(--space-1); }
  .themes__tabs [role="tab"] { font-size: 1.0625rem; }
}

.theme {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.theme + .theme { margin-top: var(--space-6); }
.js .theme + .theme { margin-top: 0; }
.theme[hidden] { display: none; }
.theme:focus-visible { outline-offset: 8px; }

.theme h3 {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 600;
}
.theme__summary {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
}
.theme__text p { color: var(--muted); }
.theme__text .btn { margin-top: var(--space-2); }

@media (min-width: 960px) {
  .theme { grid-template-columns: 4fr 8fr; gap: var(--space-5); }
}

/* Fonctionnalités : texte et capture côte à côte
   ========================================================================== */

.feature {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.feature + .feature { margin-top: var(--space-6); }
.feature__text { max-width: 34rem; }
.feature__text p { color: var(--muted); }
.feature--phone .screen--phone { justify-self: center; }

@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
  .feature--reverse { grid-template-columns: 7fr 5fr; }
  .feature--reverse .feature__text { order: 2; }
  /* Téléphone : colonne de texte plus large, capture centrée dans la sienne */
  .feature--phone { grid-template-columns: 6fr 5fr; }
  .feature--phone.feature--reverse { grid-template-columns: 5fr 6fr; }
}

/* Fonctionnalités par usage : trois familles en onglets (assets/js/main.js, [data-tabs]), chacune
   avec sa couleur (--halo, en composantes RVB) reprise par ses cartes. Sans script, les familles
   s'affichent à la suite, avec leur titre. */
.families__tabs {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.families__tabs[hidden] { display: none; }
.families__tabs [role="tab"] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.125rem 0.875rem;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.families__tabs [role="tab"]:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.families__tabs [aria-selected="true"],
.families__tabs [aria-selected="true"]:hover {
  border-color: rgb(var(--halo));
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgb(var(--halo)), var(--shadow);
}
.families__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  background: rgb(var(--halo) / 10%);
  color: rgb(var(--halo));
}
.families__icon svg { width: 1.375rem; height: 1.375rem; stroke-width: 1.75; }
.families__name { color: var(--heading); font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.families__promise { font-size: 0.9375rem; line-height: 1.35; }

@media (max-width: 639.98px) {
  .families__tabs { gap: var(--space-1); margin-bottom: var(--space-3); }
  .families__tabs [role="tab"] { padding: 0.75rem var(--space-2) 0.75rem 0.75rem; }
  .families__icon { width: 2.25rem; height: 2.25rem; }
  .families__icon svg { width: 1.125rem; height: 1.125rem; }
  .families__name { font-size: 1.0625rem; }
  .families__promise { font-size: 0.875rem; }
}
@media (min-width: 900px) {
  .families__tabs { grid-template-columns: repeat(3, 1fr); }
}

.family + .family { margin-top: var(--space-6); }
.js .family + .family { margin-top: 0; }
.family[hidden] { display: none; }
.family:focus-visible { outline-offset: 8px; }

/* Onglets côte à côte : l'onglet choisi et sa famille partagent un même fond, teinté de la
   couleur de la famille (sans bordure ni ombre : un fond, pas une carte). Les autres onglets,
   un peu plus courts, restent en retrait. */
@media (min-width: 900px) {
  /* Déclaré sur chaque onglet et chaque famille, qui portent leur --halo */
  .families__tabs [role="tab"], .family { --family-bg: color-mix(in srgb, rgb(var(--halo)) 9%, var(--surface)); }
  .js .families__tabs { gap: var(--space-1); margin-bottom: 0; }
  .js .families__tabs [role="tab"] { margin-bottom: var(--space-1); }
  .js .families__tabs [aria-selected="true"],
  .js .families__tabs [aria-selected="true"]:hover {
    margin-bottom: 0;
    padding-bottom: calc(var(--space-2) + var(--space-1));
    border-color: transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--family-bg);
    box-shadow: none;
  }
  .js .families__tabs [aria-selected="true"] .families__icon { background: var(--surface); }
  .js .family {
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--family-bg);
  }
  /* Le coin collé à l'onglet choisi, quand celui-ci est au bord */
  .families:has([role="tab"]:first-child[aria-selected="true"]) .family { border-top-left-radius: 0; }
  .families:has([role="tab"]:last-child[aria-selected="true"]) .family { border-top-right-radius: 0; }
}
.family__head { margin-bottom: var(--space-3); }
.family__head h3 { margin-bottom: 0.25rem; font-family: var(--font-title); font-weight: 600; }
.family__head p { margin: 0; color: var(--muted); }
/* Avec les onglets, le titre de la famille est celui de son onglet */
.js .family__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.families__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.families__foot .btn,
.families__foot .showcase-toggle { margin: 0; }

/* Cartes de fonctionnalités : en-tête (pictogramme, flèche), titre en deux tons, texte, puis
   une mini-interface animée (assets/js/showcase.js) sur un halo de la couleur de la carte (--halo,
   en composantes RVB). Toute la carte mène à la page de la fonctionnalité (lien du titre étendu). */
.showcase {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.showcase > li {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-3) var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.showcase > li:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }

.showcase__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.showcase__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: rgb(var(--halo) / 10%);
  color: rgb(var(--halo));
}
.showcase__icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }
.showcase__arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--heading);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.showcase__arrow svg { width: 1rem; height: 1rem; }
.showcase > li:hover .showcase__arrow { border-color: var(--blue); background: var(--blue); color: #fff; }

.showcase h4 { margin: 0 0 var(--space-1); color: var(--heading); font-size: 1.3125rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.showcase h4 a { color: var(--heading); text-decoration: none; }
/* Le bénéfice d'abord, puis le nom de la fonctionnalité */
.showcase h4 a span { display: block; margin-top: 0.375rem; color: rgb(var(--halo)); font-size: 0.9375rem; font-weight: 500; }
.showcase h4 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.showcase > li > p { margin: 0 0 var(--space-3); color: var(--muted); font-size: 0.9375rem; }

/* Illustration : pleine largeur de la carte, halo coloré, mini-interface coupée en bas */
.showcase__visual {
  height: 16rem;
  margin: auto calc(-1 * var(--space-3)) 0;
  padding: var(--space-3) var(--space-3) 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, rgb(var(--halo) / 22%), transparent 70%);
}

.showcase-wrap { position: relative; }
.showcase-toggle { margin-top: var(--space-2); }
.showcase-toggle[hidden] { display: none; }

/* Mini-interfaces : rendu inspiré de l'administration, texte réduit */
.mini {
  position: relative;
  min-height: 16rem;
  padding: var(--space-2);
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(12 9 71 / 6%), 0 12px 32px rgb(12 9 71 / 10%);
  color: #1d2327;
  font: 0.8125rem/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
}
.mini p { margin: 0; }
.mini__title { margin-bottom: 0.5rem !important; color: #1d2327; font-weight: 600; }
.mini__title + .mini__title,
.mini__shortcuts + .mini__title { margin-top: 0.875rem !important; }

.mini__shortcuts { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.mini__shortcut {
  padding: 0.25rem 0.625rem;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  background: #f6f7f7;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.mini__shortcut.is-active { border-color: rgb(var(--halo)); background: rgb(var(--halo) / 8%); color: rgb(var(--halo)); box-shadow: 0 0 0 2px rgb(var(--halo) / 15%); }

.mini__todo { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.mini__todo li { display: flex; align-items: center; gap: 0.5rem; transition: color 0.25s; }
.mini__check {
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #8c8f94;
  border-radius: 4px;
  transition: background-color 0.25s, border-color 0.25s;
}
.mini__todo li.is-done { color: #8c8f94; text-decoration: line-through; }
.mini__todo li.is-done .mini__check {
  border-color: #1a7f37;
  background: #1a7f37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.mini__label { margin-bottom: 0.25rem !important; font-weight: 600; }
.mini__field { min-height: 3.75rem; margin-bottom: 0.75rem !important; padding: 0.375rem 0.5rem; border: 1px solid rgb(var(--halo)); border-radius: 4px; box-shadow: 0 0 0 1px rgb(var(--halo)); }
.mini__button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 4px;
  background: #2271b1;
  color: #fff;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.2s;
}
.mini__button svg { width: 0.875rem; height: 0.875rem; }
.mini__button.is-pressed { background: #135e96; transform: scale(0.95); }
.mini__toast {
  margin-top: 0.75rem !important;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: #1d2327;
  color: #fff;
}

.mini__row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f1; }
.mini__avatar { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(var(--halo) / 12%); color: rgb(var(--halo)); font-weight: 600; }
.mini__row-text { display: grid; color: #646970; }
.mini__row-text strong { color: #1d2327; font-weight: 600; }
.mini__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }
.mini__status { padding: 0.125rem 0.625rem; border-radius: 999px; background: #fcf0e3; color: #8a4b0a; font-weight: 500; transition: background-color 0.25s, color 0.25s; }
.mini__status.is-published { background: #e6f4ea; color: #1a7f37; }

.mini__cursor { position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem; opacity: 0; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%)); pointer-events: none; }

/* Recherche : champ, puis suggestions groupées */
.mini__field--line { min-height: 0; }
.mini__suggestions { margin-top: 0.375rem; padding: 0.375rem; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgb(12 9 71 / 8%); }
.mini__group { padding: 0.125rem 0.375rem 0.25rem; color: #646970; font-size: 0.75rem; font-weight: 600; }
.mini__suggestion { display: grid; padding: 0.3125rem 0.375rem; border-radius: 4px; color: #646970; font-size: 0.75rem; transition: background-color 0.2s; }
.mini__suggestion strong { color: #1d2327; font-size: 0.8125rem; font-weight: 600; }
.mini__suggestion.is-active { background: rgb(var(--halo) / 8%); }

/* Signalement : liste déroulante, photo jointe */
.mini__select {
  margin-bottom: 0.625rem !important;
  padding: 0.375rem 1.75rem 0.375rem 0.5rem;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23646970' stroke-width='2'/%3E%3C/svg%3E") right 0.375rem center / 1rem no-repeat;
}
.mini__select.is-empty { color: #8c8f94; }
.mini__photo { display: inline-flex; align-items: center; gap: 0.375rem; color: #646970; }
.mini__thumb { width: 1.75rem; height: 1.75rem; border-radius: 4px; background: linear-gradient(160deg, #2b3a55, #f5c451 55%, #3d4a63); }

/* Je suis : démarches du profil */
.mini__list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.mini__list li { padding: 0.25rem 0.5rem; border-left: 2px solid rgb(var(--halo)); background: #f6f7f7; }

/* Bandeau d'alerte : interrupteur, aperçu du bandeau sur l'accueil, puis la vigilance qui prend sa place */
.mini__toggle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.mini__toggle .mini__title { margin-bottom: 0 !important; }
.mini__switch { position: relative; flex: none; width: 2rem; height: 1.125rem; border-radius: 999px; background: #8c8f94; transition: background-color 0.2s; }
.mini__switch::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.mini__switch.is-on { background: rgb(var(--halo)); }
.mini__switch.is-on::after { transform: translateX(0.875rem); }
.mini__banner { display: grid; border-radius: 6px; background: rgb(var(--halo)); color: #fff; font-size: 0.75rem; transition: background-color 0.4s, color 0.4s; }
.mini__banner > p { grid-area: 1 / 1; padding: 0.5rem 0.625rem; transition: opacity 0.4s; }
.mini__banner u { margin-left: 0.25rem; font-weight: 600; }
.mini__banner-vigilance,
.mini__banner.is-vigilance .mini__banner-message { opacity: 0; }
.mini__banner.is-vigilance { background: #ffa424; color: #1d2327; }
.mini__banner.is-vigilance .mini__banner-vigilance { opacity: 1; }
.mini__note { margin-top: 0.5rem !important; color: #646970; font-size: 0.75rem; }

/* Connecteur IA : la demande dans l'assistant, l'outil du site, le brouillon déposé */
.mini__bubble { margin-left: 2rem !important; padding: 0.5rem 0.75rem; border-radius: 12px 12px 4px 12px; background: #f0f0f1; }
.mini__tool { display: flex; align-items: center; gap: 0.375rem; margin: 0.625rem 0 0.375rem !important; color: #646970; font-size: 0.75rem; }
.mini__tool svg { width: 0.875rem; height: 0.875rem; color: rgb(var(--halo)); }
.mini__draft { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.625rem; border: 1px solid #dcdcde; border-radius: 6px; }
.mini__hint { color: #646970; font-size: 0.75rem; }

/* Agenda : évènement et boutons */
.mini__publication { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.mini__buttons { display: flex; gap: 0.375rem; }
.mini__button--secondary { border: 1px solid #2271b1; background: #fff; color: #2271b1; }

/* Conseil municipal : documents de la séance, PDF à publier */
.mini__docs { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.mini__docs li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3125rem 0.5rem; border-radius: 4px; background: #f6f7f7; }
.mini__pdf { display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 4px; background: #b32d2e; color: #fff; font-size: 0.5625rem; font-weight: 700; }

/* Agenda : date en pastille */
.mini__date { display: grid; flex: none; place-items: center; align-content: center; width: 3.25rem; height: 3.25rem; border-radius: 6px; background: rgb(var(--halo) / 10%); color: rgb(var(--halo)); font-size: 0.75rem; line-height: 1.1; }
.mini__date strong { font-size: 1.125rem; }

/* Écrans étroits : le texte des mini-interfaces passe sur plus de lignes */
@media (max-width: 479.98px) { .showcase__visual { height: 17rem; } }

@media (min-width: 900px) {
  .showcase { grid-template-columns: repeat(3, 1fr); }
}

/* Garanties : compris dans toutes les formules, sous les cartes de la page des tarifs */
.guarantees__title { margin-top: var(--space-5); }

.guarantees {
  display: grid;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.guarantees li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
  font-weight: 500;
  line-height: 1.35;
}
/* Tout le texte est le lien : rien à distinguer autour, le soulignement vient au survol */
.guarantees a { color: inherit; text-decoration: none; }
.guarantees a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 560px) { .guarantees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .guarantees { grid-template-columns: repeat(4, 1fr); } }

/* Pastille de pictogramme comme .showcase__icon : formules, garanties, étapes, atouts du hero, bandeau accessibilité */
.plan__icon,
.guarantees__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: rgb(31 22 199 / 10%);
  color: var(--blue);
}
.plan__icon svg,
.guarantees__icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }


/* Comparatif des formules
   Un tableau sur grand écran, en-tête collant sous celui du site. Sur téléphone, chaque ligne
   devient une grille : le libellé sur toute la largeur, les trois valeurs dessous, sous les
   noms des formules restés collants. La colonne de la formule recommandée est teintée. */
.compare__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.compare__head .section__intro { margin-bottom: 0; }

/* Interrupteur : case à cocher native (role="switch"), piste dessinée à côté */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--heading);
  font-weight: 500;
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--muted);
  transition: background-color 0.2s;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.switch input:checked + .switch__track { background: var(--blue); }
.switch input:checked + .switch__track::after { transform: translateX(1.25rem); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--blue); outline-offset: 3px; }

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.compare th,
.compare td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
.compare thead th {
  position: sticky;
  top: var(--header-h, 73px);
  z-index: 1;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.9375rem;
}
.compare thead th:not(:first-child) {
  color: var(--heading);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
}
.compare thead th:not(:first-child),
.compare td { width: 12rem; text-align: center; }
.compare .is-featured { background: color-mix(in srgb, var(--blue) 5%, var(--bg)); }
.compare thead .is-featured { color: var(--blue); }

.compare__group th {
  padding-top: var(--space-4);
  color: var(--heading);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
}
.compare th[scope="row"] { color: var(--text); }
.compare th[scope="row"] a { color: inherit; text-decoration-color: var(--border); text-underline-offset: 3px; }
.compare th[scope="row"] a:hover { color: var(--blue); text-decoration-color: currentColor; }
.compare td { color: var(--heading); font-size: 0.9375rem; line-height: 1.35; }

.compare__yes {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--blue);
  vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compare__no { color: var(--muted); }
.compare__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Différences uniquement : lignes (et groupes) identiques dans les trois formules masqués */
#comparatif:has(.switch input:checked) .compare [data-commun] { display: none; }

/* Comparatif avec un concurrent (partials/comparatif-tableau.php) : deux colonnes de texte,
   alignées à gauche ; Commune, en second, est la colonne teintée */
.compare--duo thead th:not(:first-child),
.compare--duo td { width: 34%; text-align: left; }
.compare--duo th[scope="row"] { color: var(--heading); font-weight: 500; }
@media (max-width: 719.98px) {
  .compare.compare--duo tr { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 719.98px) {
  .compare,
  .compare thead,
  .compare tbody { display: block; }
  .compare thead {
    position: sticky;
    top: var(--header-h, 73px);
    z-index: 1;
    background: var(--bg);
  }
  .compare thead th { position: static; }
  .compare thead th:first-child { display: none; }
  .compare tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .compare th,
  .compare td { width: auto; padding: 0.5rem; }
  .compare thead th:not(:first-child) { width: auto; font-size: 1.0625rem; }
  .compare th[scope="row"],
  .compare__group th { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  .compare th[scope="row"] { padding-top: 0.875rem; padding-bottom: 0.25rem; border-bottom: 0; }
  .compare td { padding-top: 0.25rem; padding-bottom: 0.875rem; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__track::after { transition: none; }
}

.also__title { margin-top: var(--space-6); }

.also {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Enfants directs seulement : une liste à puces dans une carte ne devient pas une carte */
.also > li {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}
.also strong { display: block; color: var(--heading); font-weight: 500; }
.also h3 { margin-bottom: var(--space-1); font-size: 1.1875rem; }
.also .more { margin-top: var(--space-1); }

@media (min-width: 640px) { .also { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .also { grid-template-columns: repeat(3, 1fr); } }

/* Reprise des contenus et options, sous le comparatif */
.also--extras { margin-top: var(--space-5); }
.also--extras h3 { margin-bottom: var(--space-2); }
@media (min-width: 640px) { .also--extras { grid-template-columns: 1fr; } }
@media (min-width: 960px) { .also--extras { grid-template-columns: 3fr 2fr; } }

/* Guides des ressources : cartes de texte deux par deux, point à vérifier sous un filet en bas de carte */
@media (min-width: 960px) { .also--duo { grid-template-columns: repeat(2, 1fr); } }
.also--duo > li { display: flex; flex-direction: column; }
.also__check {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--heading);
  font-size: 0.9375rem;
}
.also--duo > li > p:not(.also__check) { margin-bottom: var(--space-2); }

/* Deux colonnes sur grand écran aussi : deux offres côte à côte, ou quatre cartes en deux rangées */
@media (min-width: 960px) { .also--duo { grid-template-columns: repeat(2, 1fr); } }

/* Simulateur : le curseur avance de REPRISE['pas'] pages, le total suit (assets/js/main.js) */
.simulator {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.simulator label { display: block; margin-bottom: 0.25rem; color: var(--heading); font-weight: 500; }
.simulator__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}
.simulator input[type="range"] {
  flex: 1 1 14rem;
  height: 2.75rem;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.simulator__result { display: grid; min-width: 8rem; text-align: right; }
.simulator__result span { color: var(--muted); font-size: 0.9375rem; }
.also .simulator__result strong { display: block; color: var(--heading); font-size: 1.75rem; font-weight: 500; line-height: 1.2; }
.simulator__note { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 559.98px) { .simulator__result { text-align: left; } }

.checklist {
  display: grid;
  gap: 0.75rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
/* Texte qui reprend après une liste */
.checklist + p { margin-top: var(--space-3); }
/* Coche positionnée à gauche : le texte de l'élément reste un seul bloc, même avec du gras ou un lien */
.checklist li { position: relative; padding-left: 1.875rem; }
.checklist li::before { position: absolute; left: 0; top: 0.25rem; }

/* Encart d'appel à l'action (besoin propre à la commune, sous les formules)
   ========================================================================== */

.callout {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.callout :is(h2, h3) { margin-bottom: var(--space-1); font-size: 1.5rem; }
.callout p { max-width: 44rem; margin: 0; color: var(--muted); }
.callout .btn { justify-self: start; }

/* Bandeau sombre de l'accueil (accessibilité), seul dans sa section : les sections voisines font l'espace */
.section--banner { padding-block: 0; }
.callout--dark {
  align-items: start;
  border-color: transparent;
  background: var(--dark);
  color: var(--on-dark-muted);
}
.callout--dark :focus-visible { outline-color: var(--on-dark); }
.callout--dark h2 { color: var(--on-dark); }
.callout--dark p { color: var(--on-dark-muted); }
.callout--dark .guarantees__icon { background: rgb(255 255 255 / 12%); color: var(--on-dark); }
.callout--dark a { color: var(--on-dark); }
.callout--dark .more { margin-top: var(--space-2); }
/* Diagnostic : sous le texte sur téléphone, en colonne à droite, après un filet, sur grand écran */
.callout__note { padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / 16%); }

@media (min-width: 900px) {
  .callout { grid-template-columns: 1fr auto; gap: var(--space-5); padding: var(--space-4) var(--space-5); }
  .callout--dark { grid-template-columns: auto 3fr 2fr; gap: var(--space-3) var(--space-5); padding: var(--space-4); }
  .callout--dark .callout__note { grid-column: 3; align-self: center; padding: 0 0 0 var(--space-5); border-top: 0; border-left: 1px solid rgb(255 255 255 / 16%); }
}

/* Formules
   ========================================================================== */

.plans {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Côte à côte, les cartes partagent leurs lignes (subgrid) : prix, listes et boutons alignés
   d'une carte à l'autre, quelle que soit la longueur des textes. 8 = nombre d'enfants de .plan */
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(8, auto); row-gap: 0; }
  .plans > .plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
  .plans > .plan .btn { justify-self: start; align-self: end; }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.plan:hover { box-shadow: var(--shadow-hover); }
.plan--featured { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.plan__badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(31 22 199 / 10%);
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 500;
}
/* Formule nécessaire à une fonctionnalité (badge_formule()) : sous le chapeau d'une page, ou sous le titre d'une section */
.formule-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(31 22 199 / 10%);
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.formule-badge:hover { text-decoration: underline; }
.formule-badge svg { flex: none; width: 1rem; height: 1rem; stroke-width: 1.75; }
.lead + .formule-badge { margin-top: var(--space-3); }
h2 ~ .formule-badge { margin: 0 0.5rem var(--space-2) 0; }
.plan h3 { margin-bottom: var(--space-1); font-family: var(--font-title); font-size: 1.625rem; font-weight: 600; }
.plan__promise { margin-bottom: var(--space-1); color: var(--heading); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.plan__for { color: var(--muted); }
.plan__price {
  margin: var(--space-2) 0 0;
  color: var(--heading);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}
.plan__price span { color: var(--muted); font-size: 1rem; font-weight: 400; }
.plan__terms { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; }
.plan .checklist { align-content: start; margin: var(--space-3) 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.plan .btn { align-self: flex-start; }
/* Besoin propre à la commune : encart sous les cartes */
.callout--plans { margin-top: var(--space-4); }
.plans__more { margin: var(--space-4) 0 0; text-align: center; }

/* Contact
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.contact p { color: var(--muted); max-width: 38rem; }

.contact__card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-style: normal;
}
.contact__card p { color: var(--text); }
.contact__card p + p { margin-top: var(--space-2); }

@media (min-width: 900px) {
  .contact { grid-template-columns: 7fr 4fr; gap: var(--space-6); }
}

/* Pages de fonctionnalités
   ========================================================================== */

/* Fil d'Ariane : chevrons et pictogramme d'accueil décoratifs (pseudo-éléments vides,
   rien n'est lu par les lecteurs d'écran) */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.875rem;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before,
.breadcrumb li:first-child a::before {
  content: "";
  flex: none;
  background: currentColor;
}
.breadcrumb li + li::before {
  width: 0.5rem;
  height: 0.75rem;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1l4.5 5-4.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1l4.5 5-4.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--muted);
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
}
.breadcrumb a:hover { color: var(--blue); text-decoration-color: currentColor; }
.breadcrumb li:first-child a::before {
  width: 0.9375rem;
  height: 0.9375rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.2 8 2l6 5.2V14H9.8v-4H6.2v4H2z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.2 8 2l6 5.2V14H9.8v-4H6.2v4H2z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb [aria-current] { color: var(--heading); font-weight: 500; }

/* Téléphone seul dans le hero : centré, sans capture d'ordinateur */
.hero__visual--phone { display: grid; justify-items: center; padding-bottom: 0; }
.hero__visual--phone .screen--phone { position: relative; width: min(100%, 280px); }

/* Plusieurs captures dans la même colonne */
.stack { display: grid; gap: var(--space-3); }

/* Schémas : boîtes reliées par des traits terminés d'une pointe effilée. Le texte reste
   du HTML : il se zoome, se lit au lecteur d'écran et passe à 320 px.
   Chaque trait appartient à la boîte d'où il part, ou à une enveloppe placée entre deux
   boîtes : ainsi il n'apparaît jamais avant la boîte de départ. --draw (de 0 à 1, posé par
   le script d'animations) le trace progressivement ; sans script, il vaut 1.
   ========================================================================== */

/* Traits et flèches : pseudo-éléments communs */
.flow > li:not(:last-child)::after,
.cascade > .node--start::after,
.cascade__yes::before,
.cascade__yes::after,
.fork > .node--start::after,
.fork__branches::before,
.fork__branches > li::before,
.fork__branches > li::after,
.fork__end::before,
.fork__end::after {
  content: "";
  position: absolute;
  background: var(--blue);
}
/* Vers le bas : tracé de haut en bas */
.flow > li:not(:last-child)::after,
.cascade > .node--start::after,
.cascade__yes::after,
.fork__end::before {
  width: 12px;
  -webkit-mask: var(--arrow-down);
  mask: var(--arrow-down);
  clip-path: inset(0 0 calc(100% - var(--draw, 1) * 100%) 0);
}
/* Vers la droite : tracé de gauche à droite */
.cascade__yes::before,
.fork__branches > li::before {
  height: 12px;
  -webkit-mask: var(--arrow-right);
  mask: var(--arrow-right);
  clip-path: inset(0 calc(100% - var(--draw, 1) * 100%) 0 0);
}
/* Simples traits */
.fork > .node--start::after,
.fork__branches > li::after { width: 2px; clip-path: inset(0 0 calc(100% - var(--draw, 1) * 100%) 0); }
.fork__branches::before { height: 2px; clip-path: inset(0 calc(50% - var(--draw, 1) * 50%)); }

/* Étapes : en colonne sur mobile, en ligne sur grand écran */
.flow {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow > li {
  position: relative;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.flow > li:not(:last-child)::after { top: calc(100% + 0.25rem); height: calc(var(--space-5) - 0.5rem); left: calc(50% - 6px); }
.flow__title {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--heading);
  font-weight: 500;
}
.flow p { color: var(--muted); font-size: 0.9375rem; }
.flow p + p { margin-top: var(--space-1); }

@media (min-width: 900px) {
  .flow { grid-auto-columns: 1fr; grid-auto-flow: column; gap: var(--space-5); }
  .flow:not(.flow--stack) > li:not(:last-child)::after {
    top: calc(50% - 6px);
    left: calc(100% + 0.25rem);
    width: calc(var(--space-5) - 0.5rem);
    height: 12px;
    -webkit-mask: var(--arrow-right);
    mask: var(--arrow-right);
    clip-path: inset(0 calc(100% - var(--draw, 1) * 100%) 0 0);
  }
}

.section__intro + .flow,
.flow + .feature { margin-top: var(--space-5); }

/* Étapes empilées, même sur grand écran (textes longs) */
.flow--stack { max-width: 46rem; }
@media (min-width: 900px) { .flow--stack { grid-auto-flow: row; } }

.node {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
}
.node p { margin: 0; }
.node p + p { margin-top: 0.25rem; }
.node__title { color: var(--heading); font-size: 1rem; font-weight: 500; }
.node--start,
.node--end { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.node--muted { border-style: dashed; background: var(--bg); }
.section--tinted .node--muted { background: var(--tint); }

/* Réponse « Oui » ou « Non » devant l'intitulé */
.answer {
  display: inline-block;
  margin-right: 0.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--heading);
  font-size: 0.8125rem;
  line-height: 1.5rem;
}
.answer--yes { background: #e8e7fb; color: var(--blue); }

/* Cascade : chaque question mène, si oui, à une réponse et, sinon, à la question suivante.
   L'enveloppe de la réponse (.cascade__yes) porte la flèche « oui » (::before) et le tronc
   qui descend vers la question suivante (::after). --trunk : position du tronc. */
.cascade { --gap: var(--space-5); --trunk: 1.25rem; --indent: var(--space-5); display: grid; gap: var(--gap); max-width: 62rem; }
.cascade__steps { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.cascade__steps > li { display: grid; gap: var(--space-2); }
.cascade > .node--start::after { top: calc(100% + 0.25rem); height: calc(var(--gap) - 0.5rem); left: calc(var(--trunk) - 7px); }
.cascade__yes { position: relative; padding-left: var(--indent); }
.cascade__yes::before { top: calc(50% - 6px); left: calc(var(--trunk) - 1px); right: calc(100% - var(--indent) + 0.25rem); }
.cascade__yes::after { top: calc(-1 * var(--space-2) - 1px); bottom: calc(-1 * var(--gap) + 0.25rem); left: calc(var(--trunk) - 6px); }

@media (min-width: 900px) {
  .cascade > .node { width: calc(50% - var(--space-6) / 2); }
  .cascade > .node--start::after { left: calc(50% - 6px); }
  .cascade__steps > li { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .cascade__yes { display: grid; align-content: center; padding-left: 0; }
  .cascade__yes::before { left: calc(-1 * var(--space-6) + 0.25rem); right: calc(100% + 0.25rem); }
  /* Tronc : sous la question, au milieu de la colonne de gauche */
  .cascade__yes::after { top: calc(100% + 0.25rem); bottom: auto; height: calc(var(--gap) - 0.5rem); left: calc(-50% - var(--space-6) - 6px); }
}

/* Embranchement : un départ, plusieurs branches côte à côte, et une arrivée commune
   (fork--open : sans arrivée). --branches donne le nombre de branches.
   Chaque branche (li) et l'arrivée (.fork__end) enveloppent leur boîte et portent ses traits. */
.fork { --gap: var(--space-5); --rail: 1rem; --indent: 2.75rem; display: grid; gap: var(--gap); max-width: 62rem; }
.fork__branches { position: relative; display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fork__branches > li { position: relative; padding-left: var(--indent); }
.fork__end { position: relative; }

/* Mobile : un rail vertical à gauche dessert les branches */
.fork > .node--start::after { top: 100%; left: calc(var(--rail) - 2px); height: calc(var(--gap) / 2 + 1px); }
.fork__branches > li::after { top: calc(-1 * var(--space-2)); bottom: 0; left: calc(var(--rail) - 1px); }
.fork__branches > li:first-child::after { top: calc(-1 * var(--gap) / 2); }
.fork__branches > li:last-child::after { bottom: calc(-1 * var(--gap) / 2); }
.fork--open .fork__branches > li:last-child::after { bottom: 50%; }
.fork__branches > li::before { top: calc(50% - 6px); left: calc(var(--rail) - 1px); right: calc(100% - var(--indent) + 0.25rem); }
.fork__end::before { top: calc(-1 * var(--gap) / 2); height: calc(var(--gap) / 2 - 0.25rem); left: calc(var(--rail) - 6px); }

/* Grand écran : branches en colonnes, reliées par des traits horizontaux */
@media (min-width: 900px) {
  .fork { justify-items: center; }
  .fork > .node { width: min(100%, 28rem); }
  .fork__branches,
  .fork__end {
    --col: calc((100% - (var(--branches) - 1) * var(--space-4)) / var(--branches));
    width: 100%;
  }
  .fork__branches { grid-template-columns: repeat(var(--branches), 1fr); gap: var(--space-4); }
  .fork__branches > li { display: grid; padding-left: 0; }
  .fork__branches::before {
    top: calc(-1 * var(--gap) / 2 - 1px);
    right: calc(var(--col) / 2 - 1px);
    left: calc(var(--col) / 2 - 1px);
  }
  .fork > .node--start::after { left: calc(50% - 1px); }
  .fork__branches > li::before {
    top: calc(-1 * var(--gap) / 2);
    bottom: calc(100% + 0.25rem);
    left: calc(50% - 6px);
    right: auto;
    width: 12px;
    height: auto;
    -webkit-mask: var(--arrow-down);
    mask: var(--arrow-down);
    clip-path: inset(0 0 calc(100% - var(--draw, 1) * 100%) 0);
  }
  .fork__branches > li::after { content: none; }
  .fork__end { display: grid; justify-items: center; }
  .fork__end > .node { width: min(100%, 28rem); }
  /* Les branches rejoignent l'arrivée : un U sous les colonnes, puis la flèche */
  .fork__end::after {
    top: calc(-1 * var(--gap) - 1px);
    right: calc(var(--col) / 2 - 1px);
    left: calc(var(--col) / 2 - 1px);
    height: calc(var(--gap) / 2 + 2px);
    border: 2px solid var(--blue);
    border-top: 0;
    background: none;
    clip-path: inset(0 0 calc(100% - var(--draw, 1) * 100%) 0);
  }
  .fork__end::before { left: calc(50% - 6px); }
}

.cascade + .feature,
.fork + .feature,
.fork + .chips,
.fork + .faq,
.flow + .matrix-wrap { margin-top: var(--space-5); }

/* Jauge des niveaux de conformité : de 0 à 100 % des critères */
.gauge { max-width: 46rem; margin-bottom: var(--space-4); }
.gauge__bar { display: flex; gap: 3px; }
.gauge__seg {
  display: flex;
  flex: 50;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--level);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.gauge__seg:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.gauge__seg--non { flex: 0 0 calc(50% - 1.5px); }
.gauge__seg--total { flex: 0 0 0.625rem; padding: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.gauge__seg--non { --level: #b3261e; }
.gauge__seg--partiel { --level: #b06000; }
.gauge__seg--total { --level: #1a7f37; }
.gauge__scale { position: relative; display: flex; justify-content: space-between; margin: 0.375rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.gauge__scale span:nth-child(2) { position: absolute; left: 50%; translate: -50% 0; }
.gauge__scale span:last-child { max-width: 40%; text-align: right; }
.gauge__scale span:last-child { color: var(--heading); font-weight: 500; }

/* Tableau de réglages : un réglage par ligne, une colonne par niveau */
.matrix-wrap { max-width: 40rem; overflow-x: auto; }
.matrix {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  font-size: 0.9375rem;
}
.matrix caption { margin-bottom: var(--space-1); color: var(--heading); font-weight: 500; text-align: left; }
.matrix th,
.matrix td { padding: 0.75rem; border-bottom: 1px solid var(--border); text-align: center; }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix thead th { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.matrix tbody th { color: var(--heading); font-weight: 500; text-align: left; }
.matrix tbody th span { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.matrix td { color: var(--muted); }
.level-pill {
  display: inline-block;
  min-width: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--level);
  color: var(--on-level, #1d1d1b);
  font-weight: 500;
  line-height: 1.75rem;
}
.level-pill--jaune { --level: #fdd835; }
.level-pill--orange { --level: #f08c00; }
.level-pill--rouge { --level: #c62828; --on-level: #fff; }

/* Niveaux de conformité : trois paliers côte à côte */
.levels {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.levels__item {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.levels__item strong { color: var(--heading); font-weight: 500; }
.levels__item span { color: var(--muted); font-size: 0.9375rem; }
/* Pastille de niveau devant l'intitulé, la couleur n'est jamais seule porteuse d'information */
.levels__item strong::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--level);
}
.levels__item--non { --level: #b3261e; }
.levels__item--partiel { --level: #b06000; }
.levels__item--total { --level: #1a7f37; }

@media (min-width: 720px) { .levels { grid-template-columns: repeat(3, 1fr); } }

.note { margin-top: var(--space-2); color: var(--muted); font-size: 0.875rem; }

/* Mots-clés : courtes étiquettes en ligne */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: #ecebfb;
  color: var(--heading);
  font-size: 0.875rem;
}

/* Maquette d'e-mail */
.mail {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
}
.mail__head {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.mail__head p { margin: 0; color: var(--muted); }
.mail__head strong { color: var(--heading); font-weight: 500; }
.mail__body { padding: var(--space-3); }
.mail__body dl { display: grid; gap: 0.75rem; margin: var(--space-2) 0 0; }
.mail__body dt { color: var(--muted); font-size: 0.8125rem; }
.mail__body dd { margin: 0; color: var(--text); }
.mail__link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.mail__attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mail__attachment svg { width: 1rem; height: 1rem; fill: var(--muted); }
.mail figcaption {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Maquette de conversation avec un assistant IA (connecteur), sur le modèle de .mail */
.chat {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
}
.chat__head {
  margin: 0;
  padding: 0.75rem var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8125rem;
}
.chat__body { display: grid; gap: var(--space-2); padding: var(--space-3); }
.chat__msg p + p { margin-top: 0.75rem; }
.chat__msg--user {
  justify-self: end;
  max-width: 88%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--tint);
}
.chat__tools { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.8125rem; }
.chat__tools li { position: relative; display: flex; align-items: center; gap: 0.5rem; }
/* Action en cours : anneau qui tourne à la place de la coche (seulement pendant la lecture) */
.chat__tools li::after {
  content: "";
  position: absolute;
  left: 0.0625rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  opacity: 0;
}
.chat__tools li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat__link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.chat figcaption {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
}
/* Résultats d'une recherche : une ligne par contenu, date, titre, statut */
.chat__rows { margin: 0.75rem 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.chat__rows li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.chat__rows .answer { margin: 0 0 0 auto; }
.chat__date { flex: none; min-width: 3.75rem; color: var(--muted); font-size: 0.8125rem; }
.hero__visual--mock { padding-bottom: 0; }

/* Roue des actions du connecteur IA (hero) : l'assistant à gauche, une flèche vers l'action en cours,
   les autres sur un arc au-dessus et au-dessous. Chaque action porte sa place (--k, de -4 à 3) et
   son éloignement (--a) ; main.js ([data-orbit]) les fait avancer d'un cran. Seules les cinq
   du milieu sont visibles, toujours au contraste normal : la profondeur vient de la taille */
.orbit { display: grid; justify-items: start; gap: var(--space-2); }
.orbit__stage {
  --step: 4rem;
  --curve: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 18rem);
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  height: 24rem;
  background: radial-gradient(50% 50% at 50% 50%, rgb(31 22 199 / 10%), transparent 70%);
}
.orbit__hub { position: relative; margin: 0; }
.orbit__tile {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius);
  background: var(--blue);
  box-shadow: var(--shadow);
  color: #fff;
}
.orbit__tile svg { width: 2rem; height: 2rem; }
.orbit__name {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 6rem;
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}
/* Flèche de l'assistant vers l'action en cours */
.orbit__hub::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5rem);
  width: calc(var(--space-5) - 1rem);
  height: 12px;
  translate: 0 -50%;
  background: var(--blue);
  -webkit-mask: var(--arrow-right);
  mask: var(--arrow-right);
}
.orbit__items { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
.orbit__items li {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
  white-space: nowrap;
  transform-origin: left center;
  translate: calc(var(--k) * var(--k) * var(--curve)) calc(-50% + var(--k) * var(--step));
  scale: calc(1 - var(--a) * 0.06);
  opacity: clamp(0, 3 - var(--a), 1);
  transition: translate 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), scale 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.6s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.orbit__items svg { flex: none; width: 1rem; height: 1rem; }
.orbit__items .is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--shadow); color: var(--heading); font-weight: 500; }
.orbit__items .is-active svg { color: var(--blue); }
/* Téléphone : roue resserrée pour tenir dans la largeur */
@media (max-width: 599.98px) {
  .orbit__stage { --step: 3.5rem; --curve: 0.5rem; gap: var(--space-4); height: 21rem; }
  .orbit__tile { width: 4rem; height: 4rem; }
  .orbit__hub::after { width: calc(var(--space-4) - 1rem); }
  .orbit__items li { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}

/* Lecture : les étapes apparaissent chacune à son heure (--at, partials/conversation.php), une action
   tourne avant d'être cochée. En attente (posé par animations.js), les étapes sont masquées */
@media screen and (prefers-reduced-motion: no-preference) {
  .hero__visual .orbit { --rise: 48px; animation: hero-rise 1s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
  .chat--waiting [style*="--at"] { opacity: 0; }
  .chat.is-playing [style*="--at"] { animation: chat-step 0.5s var(--at) cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
  .chat.is-playing .chat__tools li::after { animation: chat-run 0.6s var(--at) linear; }
  .chat.is-playing .chat__tools li::before { animation: chat-done 0.25s calc(var(--at) + 0.6s) ease-out backwards; }
}
@keyframes chat-step { from { opacity: 0; translate: 0 12px; } }
@keyframes chat-run { from { opacity: 1; rotate: 0deg; } 99% { opacity: 1; rotate: 360deg; } to { opacity: 0; } }
@keyframes chat-done { from { opacity: 0; scale: 0.4; } }

/* Exemples de demandes : onglets, puis la conversation choisie (sans script, elles se suivent) */
.scenarios { display: grid; gap: var(--space-3); max-width: 46rem; margin-top: var(--space-4); }
.scenarios__tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.scenarios__tabs[hidden] { display: none; }
.scenarios__tabs [role="tab"] {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.scenarios__tabs [role="tab"]:hover { border-color: var(--blue); color: var(--blue); }
.scenarios__hint { display: none; }
.scenarios__tabs [aria-selected="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); color: var(--heading); font-weight: 500; }
/* Panneaux superposés : le cadre garde la hauteur de la plus longue conversation d'un onglet à l'autre */
.scenarios__panels { display: grid; gap: var(--space-3); }
.js .scenarios__panels > .scenario { display: grid; grid-area: 1 / 1; }
.js .scenarios__panels > .scenario[hidden] { visibility: hidden; }

/* Grand écran : les onglets en colonne, avec leur description, à côté de la conversation */
@media (min-width: 960px) {
  .scenarios { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-5); max-width: none; align-items: start; }
  .scenarios__tabs { flex-direction: column; }
  .scenarios__tabs [role="tab"] { display: grid; gap: 0.125rem; padding: 0.875rem 1.25rem; text-align: left; }
  .scenarios__name { color: var(--heading); font-weight: 500; }
  .scenarios__hint { display: block; color: var(--muted); font-size: 0.875rem; font-weight: 400; }
}

/* Droits de l'assistant : une action par ligne, « Oui » ou « Non » devant */
.permissions__title { margin-bottom: var(--space-2); font-family: var(--font-text); font-size: 1rem; font-weight: 500; }
.permissions {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  list-style: none;
}
.permissions li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem var(--space-2); border-bottom: 1px solid var(--border); }
.permissions li:last-child { border-bottom: 0; }
.permissions .answer { flex: none; min-width: 2.75rem; margin-right: 0; text-align: center; }

/* Liens vers les autres fonctionnalités */
.related {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.related li {
  position: relative;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.related li:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.related a { color: var(--heading); font-weight: 500; text-decoration: none; }
/* Toute la carte est cliquable, le lien reste le seul élément interactif */
.related a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.related p { margin-top: 0.25rem; color: var(--muted); font-size: 0.9375rem; }
.related .related__meta { margin-top: var(--space-1); color: var(--heading); font-size: 0.875rem; }

/* Sources datées d'un comparatif (partials/comparatif-fin.php) */
.sources__title { font-size: 1.3125rem; }
.sources__intro { max-width: 46rem; margin-top: var(--space-1); color: var(--muted); }
.sources { margin: var(--space-2) 0 0; padding-left: 1.25rem; color: var(--muted); }
.sources li + li { margin-top: 0.25rem; }

@media (min-width: 720px) { .related { grid-template-columns: repeat(3, 1fr); } }

/* Page de listing : en-tête sans visuel et grille de fonctionnalités */
.hero--compact { padding-bottom: var(--space-4); }
.hero--compact .lead { max-width: 44rem; }
.catalog__promise { margin: 0; color: var(--muted); font-size: 1.125rem; }

.catalog {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.catalog li {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.catalog li:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.catalog img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--border);
}
/* Capture de téléphone : entière, centrée sur un fond teinté */
.catalog img.catalog__img--phone {
  object-fit: contain;
  object-position: center;
  padding: var(--space-2) 0;
  background: var(--tint);
}
.catalog__text { padding: var(--space-3); }
.catalog h3 { margin-bottom: var(--space-1); font-size: 1.1875rem; }
.catalog a { color: var(--heading); text-decoration: none; }
/* Toute la carte est cliquable, le lien du titre reste le seul élément interactif */
.catalog a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.catalog p { color: var(--muted); font-size: 0.9375rem; }

@media (min-width: 640px) { .catalog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .catalog { grid-template-columns: repeat(3, 1fr); } }

/* Questions fréquentes : accordéon natif <details> */
.accordion {
  max-width: 48rem;
  border-top: 1px solid var(--border);
}
h2 + .accordion { margin-top: var(--space-4); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  position: relative;
  padding: var(--space-3) 2.5rem var(--space-3) 0;
  color: var(--heading);
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s;
}
.accordion details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.accordion summary:hover { color: var(--blue); }
.accordion__answer { padding-bottom: var(--space-3); color: var(--muted); }
.accordion__answer p + p { margin-top: var(--space-1); }
.accordion__more { margin-top: var(--space-4); color: var(--muted); }

/* Page des questions fréquentes : sommaire des catégories (en ligne sur téléphone, colonne
   collante sur grand écran, repère de la catégorie en cours par assets/js/main.js), puis une section par catégorie */
.faq-layout { display: grid; gap: var(--space-4); align-items: start; }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.faq-nav a {
  display: block;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.faq-nav a:hover { background: rgb(31 22 199 / 8%); color: var(--heading); }
.faq-nav a[aria-current] { background: rgb(31 22 199 / 10%); color: var(--blue); font-weight: 500; }
.faq-group + .faq-group { margin-top: var(--space-5); }
.faq-group h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: 14rem 1fr; gap: var(--space-6); }
  .faq-nav { position: sticky; top: 7rem; }
  .faq-nav ul { flex-direction: column; gap: 0.25rem; }
  .faq-nav a { margin-inline: -0.875rem; border-color: transparent; background: none; }
}

/* Références : communes équipées, avec capture et témoignage facultatifs */
.references {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reference {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.reference img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--border);
}
.reference__text { padding: var(--space-3); }
.reference :is(h3, h4) { margin: 0 0 0.25rem; color: var(--heading); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; }
.reference :is(h3, h4) a { color: var(--heading); text-decoration: none; }
.reference__meta { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.reference blockquote { margin: var(--space-2) 0 0; }
.reference blockquote p { margin-bottom: var(--space-1); color: var(--text); font-family: var(--font-title); font-size: 1.0625rem; }
.reference blockquote footer { color: var(--muted); font-size: 0.875rem; }

@media (min-width: 640px) { .references { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .references { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .references--4 { grid-template-columns: repeat(4, 1fr); } }

/* Toute la carte est cliquable, le lien du titre reste le seul élément interactif */
.reference:has(a) { position: relative; transition: box-shadow 0.15s, border-color 0.15s; }
.reference a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.reference:has(a):hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.reference:has(a):hover :is(h3, h4) a { color: var(--blue); }
.references__title { margin: var(--space-5) 0 var(--space-3); font-size: 1.375rem; }

/* L'agence : présentation et chiffres côte à côte */
.agency { display: grid; gap: var(--space-4); align-items: center; }
.agency .section__intro { margin-bottom: 0; }
.section__intro .btn { margin-top: var(--space-3); }
.figures {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.figures li {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}
.figures strong {
  display: block;
  color: var(--heading);
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 900px) {
  .agency { grid-template-columns: 7fr 4fr; gap: var(--space-6); }
}

/* Comment ça se passe : introduction à gauche, étapes à droite */
.process { display: grid; gap: var(--space-4); align-items: start; }
.process .section__intro { margin-bottom: 0; }
@media (min-width: 900px) {
  .process { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
  .process .section__intro { position: sticky; top: 7rem; }
}

/* Frise verticale : une ligne relie les pastilles des étapes, la dernière, pleine, marque la
   mise en ligne. La ligne appartient à l'étape d'où elle part et se trace selon --draw, comme
   les flèches des schémas ; sans script, elle vaut 1. */
.timeline { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.timeline > li { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-3); }
.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: calc(0.5rem - var(--space-4));
  left: calc(1.25rem - 1px);
  width: 2px;
  border-radius: 1px;
  background: rgb(31 22 199 / 25%);
  clip-path: inset(0 0 calc(100% - var(--draw, 1) * 100%) 0);
}
.timeline > li:last-child .guarantees__icon { background: var(--blue); color: #fff; }
.timeline h3 { margin: 0.4rem 0 var(--space-1); font-size: 1.1875rem; }
.timeline p { color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 900px) { .timeline { padding-top: var(--space-1); } }

.related__all { margin-top: var(--space-3); }

/* Lien « En savoir plus » sous un bloc de la page d'accueil */
.more { display: inline-block; margin-top: var(--space-2); font-weight: 500; }
.section--dark .more { color: var(--on-dark); }
.more-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.also a { color: inherit; text-decoration-color: var(--border); }
.also a strong { color: var(--heading); }

/* Encadré de questions, sous forme de liste de définitions */
.faq { display: grid; gap: var(--space-3); max-width: 46rem; margin: 0; }
.faq dt { color: var(--heading); font-weight: 500; font-size: 1.125rem; }
.faq dd { margin: 0.25rem 0 0; color: var(--muted); }
.faq--columns { max-width: none; margin-top: var(--space-4); }
@media (min-width: 900px) { .faq--columns { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); } }

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

.site-footer {
  padding-top: var(--space-5);
  background: var(--dark);
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
}
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--on-dark); text-decoration-thickness: 2px; }
.site-footer :focus-visible { outline-color: var(--on-dark); }

.site-footer__inner {
  display: grid;
  gap: var(--space-4) var(--space-3);
}
.site-footer__brand img {
  width: 100px;
  height: auto;
  margin-bottom: var(--space-2);
}
.site-footer__brand p { max-width: 32ch; }
.site-footer__title {
  margin: 0 0 var(--space-2);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
}
.site-footer address { font-style: normal; line-height: 1.7; }

.site-footer__links,
.site-footer__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links { display: grid; gap: 0.5rem; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid rgb(255 255 255 / 16%);
  font-size: 0.875rem;
}
.site-footer__copy { margin: 0; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

@media (min-width: 560px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .site-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .site-footer__brand { grid-column: auto; }
}

/* Pages de texte (mentions légales)
   ========================================================================== */

.text-page { padding-block: var(--space-5) var(--space-6); }
.text-page .container { max-width: calc(48rem + 2 * var(--gutter)); }
.text-page h2 { margin-top: var(--space-5); font-size: 1.625rem; }
.text-page dl { margin: 0; }
.text-page dt { margin-top: var(--space-2); color: var(--heading); font-weight: 500; }
.text-page dd { margin: 0; }
.text-page .checklist { margin-bottom: var(--space-2); }
/* Liste qui suit un paragraphe : l'écart du paragraphe suffit, moins grand que celui avant le titre suivant */
.text-page p + .checklist { margin-top: 0; }

/* Opposition à la mesure d'audience (mentions légales) */
.text-page h3 { margin-top: var(--space-4); }
.optout label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--heading); font-weight: 500; cursor: pointer; }
.optout input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--blue); }

/* Dossier de présentation : lisible à l'écran, mis en page pour l'impression A4
   Une seule sorte de card (.dossier__card), en grilles de 2 à 4 colonnes
   ========================================================================== */

.dossier .container { max-width: calc(60rem + 2 * var(--gutter)); }
.dossier .lead, .dossier__intro { max-width: 48rem; }
.dossier h3 { margin-top: var(--space-4); font-size: 1.1875rem; }
.dossier__print { margin-top: var(--space-3); }

/* Synthèse de la première page et QR code de la démo (repris dans le contact) */
.dossier__demo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
@media (min-width: 640px) {
  .dossier__demo { flex-direction: row; align-items: center; gap: var(--space-3); }
}
.dossier__synthese .dossier__demo {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--tint);
}
.dossier__demo p { margin: 0; }
.dossier__demo p + p { margin-top: var(--space-1); }
.dossier__qr { flex: none; width: 7rem; height: auto; }

.dossier__grid {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.dossier h3 + .dossier__grid { margin-top: var(--space-2); }
@media (min-width: 640px) {
  .dossier__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .dossier__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.dossier__card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.dossier__card dd, .dossier__card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.dossier__card-title,
.dossier__card dt { margin: 0 0 0.25rem; color: var(--heading); font-weight: 500; }

/* Picto dans la marge gauche de la card, aligné sur le titre (il reste dans le dt ou le titre) */
.dossier__card--icon { position: relative; padding-left: calc(var(--space-3) + 2.5rem + 0.875rem); }
.dossier__icon {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: rgb(31 22 199 / 10%);
  color: var(--blue);
}
.dossier__icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }

/* Thèmes : la capture occupe le haut de la card */
.dossier__theme { padding: 0; overflow: hidden; }
.dossier__theme img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border); }
.dossier__theme p { padding: var(--space-2) var(--space-3) var(--space-3); }

/* Formules : la mise en avant reprend celle de la page d'accueil */
.dossier__plan { display: flex; flex-direction: column; }
.dossier__plan--featured { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.dossier__plan h3 { margin: 0 0 0.25rem; font-family: var(--font-title); font-size: 1.375rem; font-weight: 600; }
.dossier__plan .dossier__price { margin-top: var(--space-1); color: var(--heading); font-weight: 500; }
.dossier .dossier__plan .checklist { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: 0.9375rem; }
.dossier__grid--3 + .dossier__intro { margin-top: var(--space-2); }

/* Comparatif : tableau simple, lisible à l'impression */
.dossier__compare { width: 100%; margin-top: var(--space-2); border-collapse: collapse; font-size: 0.9375rem; }
.dossier__compare th, .dossier__compare td { padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 400; text-align: left; }
.dossier__compare td, .dossier__compare thead th:not(:first-child) { width: 9rem; text-align: center; }
.dossier__compare thead th { color: var(--heading); font-weight: 500; }
.dossier__compare tbody th[scope="rowgroup"] { padding-top: var(--space-2); color: var(--heading); font-weight: 500; }

/* Encart sans card : propriété et données */
.dossier__panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--tint);
}
.dossier__panel p:last-child { margin-bottom: 0; }

.dossier__steps { max-width: 48rem; margin: var(--space-3) 0 0; padding-left: 1.25rem; }
.dossier__steps li + li { margin-top: var(--space-1); }
.dossier__steps li::marker { color: var(--blue); font-weight: 500; }

.dossier__contact { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.dossier__contact p { font-size: 1rem; }
.dossier__contact address { font-style: normal; color: var(--text); }
@media (min-width: 768px) {
  .dossier__contact { grid-template-columns: 3fr 2fr; gap: var(--space-4); }
}

@media print {
  /* Marge de page nulle : Chrome n'a plus la place d'ajouter ses en-têtes et pieds de page
     (adresse, date). Les marges sont refaites par le padding de main, répété sur chaque page. */
  @page { size: A4; margin: 0; }
  .skip-link, .site-header, .site-footer, .breadcrumb, .dossier__print, dialog { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  /* La mise en page d'impression passe sous 900 px : gsap.matchMedia relance alors les
     animations et remasque les éléments après beforeprint. Le contenu s'imprime quand même. */
  .anim-wait main { visibility: visible; }
  [data-animated] { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; --tick: 1 !important; --draw: 1 !important; }
  .dossier { padding: 14mm 18mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dossier .container { max-width: none; padding: 0; }
  .dossier h1 { font-size: 22pt; }
  .dossier h2 { margin-top: 16pt; margin-bottom: 0; font-size: 15pt; break-after: avoid; }
  .dossier h3 { margin-top: 10pt; margin-bottom: 0; font-size: 11.5pt; break-after: avoid; }
  .dossier p { margin-bottom: 6pt; }
  .dossier .lead { font-size: 12pt; }

  /* La synthèse occupe seule la première page, que l'on peut photocopier pour la séance */
  .dossier__synthese { break-after: page; }
  .dossier__synthese h2 { margin-top: 22pt; }
  .dossier__synthese .dossier__grid { gap: 9pt; margin-top: 12pt; }
  .dossier__synthese .dossier__card { padding: 13pt 14pt 13pt calc(14pt + 24pt + 9pt); }
  .dossier__synthese .dossier__icon { top: 12pt; left: 14pt; width: 24pt; height: 24pt; }
  .dossier__synthese .dossier__icon svg { width: 13pt; height: 13pt; }
  .dossier .dossier__synthese .dossier__card dt { margin-bottom: 4pt; font-size: 12pt; }
  .dossier__synthese .dossier__card dd { font-size: 10.5pt; line-height: 1.5; }
  .dossier__synthese .dossier__demo { gap: 14pt; margin-top: 16pt; padding: 12pt 14pt; break-inside: avoid; }
  .dossier__demo p { font-size: 10.5pt; }
  .dossier .dossier__demo p + p { margin-top: 6pt; }
  .dossier__qr { width: 30mm; }
  .dossier .lien-sortant { display: none; }

  .dossier__grid, .dossier__grid--3 { gap: 6pt; margin-top: 8pt; }
  .dossier h3 + .dossier__grid { margin-top: 6pt; }
  .dossier__grid { grid-template-columns: repeat(2, 1fr); }
  .dossier__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .dossier__card { padding: 7pt 9pt; break-inside: avoid; }
  .dossier__card dd, .dossier__card p { font-size: 9pt; line-height: 1.4; }
  .dossier .dossier__card p { margin: 0; }
  .dossier .dossier__card-title, .dossier__card dt { margin-bottom: 2pt; font-size: 9.5pt; }
  .dossier__card--icon { padding-left: calc(9pt + 20pt + 7pt); }
  .dossier__icon { top: 7pt; left: 9pt; width: 20pt; height: 20pt; border-radius: 5pt; }
  .dossier__icon svg { width: 11pt; height: 11pt; }

  /* Le bloc des thèmes ne se coupe pas : vignettes sur 4 colonnes */
  .dossier__univers { break-inside: avoid; }
  .dossier__themes { grid-template-columns: repeat(4, 1fr); }
  .dossier__theme { padding: 0; }
  .dossier__theme img { aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
  .dossier__theme p { padding: 6pt 7pt 7pt; font-size: 8.5pt; }

  .dossier__plan h3 { margin: 0; font-size: 13pt; }
  .dossier__compare { margin-top: 6pt; font-size: 8.5pt; }
  .dossier__compare th, .dossier__compare td { padding: 2pt 5pt; }
  .dossier__compare thead { display: table-header-group; }
  .dossier__compare tr { break-inside: avoid; }
  .dossier__compare tbody th[scope="rowgroup"] { padding-top: 6pt; }
  .dossier__garanties { grid-template-columns: repeat(4, 1fr); }
  .dossier .dossier__plan .checklist { gap: 3pt; margin-top: 6pt; padding-top: 6pt; font-size: 9pt; }
  .dossier__plan .checklist li { padding-left: 1.25rem; }
  .dossier__plan .checklist li::before { top: 0.05rem; width: 0.875rem; height: 0.875rem; }

  .dossier__panel { margin-top: 8pt; padding: 9pt 11pt; break-inside: avoid; }
  .dossier__panel p { font-size: 9.5pt; }
  .dossier__steps { margin-top: 8pt; }
  .dossier__steps li { break-inside: avoid; }
  .dossier__steps li + li { margin-top: 3pt; }
  .dossier__contact { grid-template-columns: 3fr 2fr; gap: 12pt; margin-top: 8pt; break-inside: avoid; }
  .dossier__contact p { font-size: 10pt; }
  .dossier a { color: inherit; text-decoration: none; }
}