/* ==========================================================================
   Construktible — home
   Système : DESIGN.md. Autorité visuelle : logo.svg.
   Trait plein = ce qui existe. Pointillé vert = ce qui est projeté.
   Deux verts : l'aplat profond est une surface, le vert vif est un signal.
   ========================================================================== */

/* Archivo, auto-hébergée (licence SIL OFL, assets/fonts/OFL.txt). Fichiers
   variables : un seul par style couvre les graisses 300 à 500. Le sous-ensemble
   latin couvre le français complet — œ, €, guillemets, espaces fines. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-italic.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground:       #F5F0E8;
  --ground-deep:  #EAE4D9;
  --deep:         #08402A;
  --on-deep:      #F5F0E8;
  --on-deep-soft: rgba(245, 240, 232, 0.78);
  --on-deep-line: rgba(245, 240, 232, 0.55);
  --ink:          #14140F;
  --ink-soft:     #5A5A4E;
  --panel:        #FFFFFF;
  --accent:       #079D57;
  --accent-hover: #0AAE60;
  --control:      #82826F;
  --hairline:     #DCD5C8;
  --hairline-deep:#D3CBBC;
  --error:        #B3261E;

  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  1.1875rem;
  --t-2:  clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --t-3:  clamp(1.8rem, 1.35rem + 1.9vw, 2.45rem);
  --t-4:  clamp(2.35rem, 1.6rem + 3.6vw, 3.9rem);

  --section:  clamp(3.5rem, 6vw, 5.5rem);
  --pad:      clamp(1.75rem, 4.5vw, 4rem);
  --shell:    76rem;
  --measure:  34rem; /* environ 70 caractères de français, en corps courant */

  --r-panel: 2.5rem;
  --r-btn:   0.875rem;
  --r-field: 0.625rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------- reset + base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* L'en-tête est collant : les ancres doivent s'arrêter sous lui. */
[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4); letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }

p { margin: 0; }
p + p { margin-top: 1.15em; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--ink); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--ground);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.measure { max-width: var(--measure); }

.section { padding-block: var(--section); }

.lede {
  font-size: var(--t-1);
  line-height: 1.65;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------- aplats profonds */

.panel-deep {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-panel);
  padding: var(--pad);
  overflow: hidden;
}

/* Grille millimétrée : texture, jamais distraction. */
.panel-deep::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(245,240,232,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(245,240,232,.07) 0 1px, transparent 1px 26px);
}

.panel-deep :focus-visible { outline-color: var(--on-deep); }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  padding-block: 0.5rem;
}

.brand__mark { flex: none; width: auto; height: 2.5rem; }

.mark-ink,
.mark-projected { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark-ink       { stroke: var(--ink); stroke-width: 1.6; }
.mark-projected { stroke: var(--accent); stroke-width: 1.6; }

.mark-projected .d44   { stroke-dasharray: 4.4 4.4; }
.mark-projected .d443  { stroke-dasharray: 4.4286 4.4286; }
.mark-projected .d549  { stroke-dasharray: 5.4937 5.4937; }
.mark-projected .d409  { stroke-dasharray: 4.0912 4.0912; }

.wordmark {
  display: grid;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.32;
  text-transform: uppercase;
}
.wordmark > span:first-child { letter-spacing: 0.1em; }
.wordmark > span:last-child  { letter-spacing: 0.25em; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--t--1);
}

.site-nav > a:not(.btn) {
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease);
}
.site-nav > a:not(.btn):hover { border-bottom-color: var(--ink); }

@media (max-width: 44rem) {
  .site-nav > a:not(.btn) { display: none; }
}

/* Le bouton de l'en-tête garde une seule ligne : libellé court sous 26rem,
   wordmark masqué sous 22.5rem — le hero, juste dessous, le porte en grand. */
.label-short { display: none; }

@media (max-width: 26rem) {
  .label-long  { display: none; }
  .label-short { display: inline; }
  .site-header__inner { gap: 1rem; }
}

@media (max-width: 22.5rem) {
  .brand .wordmark { display: none; }
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: inherit;
  font-size: var(--t-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

/* Le vert vif ne porte que de l'encre : 5,25:1. Au survol il s'éclaircit au
   lieu de s'assombrir, ce qui éloigne le fond de l'encre (6,37:1). */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-hover); }

.btn--outline {
  background: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-line);
}
.btn--outline:hover { background: rgba(245, 240, 232, 0.1); border-color: var(--on-deep); }

/* Bouton secondaire sur fond clair (pages de contenu). */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: rgba(20, 20, 15, 0.06); }

.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.15rem; font-size: var(--t--1); border-radius: 0.6rem; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- hero */

.hero { padding-block: 0.5rem clamp(1rem, 2vw, 2rem); }

.hero__panel {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

@media (min-width: 60rem) {
  .hero__panel {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.hero__kicker {
  font-style: italic;
  color: var(--on-deep-soft);
  max-width: 44ch;
}

.hero__title { margin-top: 1.3rem; max-width: 16ch; }

/* Trois faits sous le titre : ce qui distingue l'offre dès le premier écran.
   Une liste courte, chaque ligne ouverte par un filet ivoire. */
.hero__facts {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  color: var(--on-deep-soft);
  font-size: var(--t-0);
  line-height: 1.45;
}
.hero__facts li { display: flex; align-items: baseline; gap: 0.7rem; }
.hero__facts li::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1px;
  background: var(--on-deep-line);
  transform: translateY(-0.3em);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

/* Le logo à l'échelle de la page. Il reprend les classes .mark-* de l'en-tête ;
   seul le trait plein change, l'anthracite étant illisible sur l'aplat profond. */
.hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.hero__logo-mark {
  flex: 0 0 auto;
  width: auto;
  height: clamp(9rem, 21vw, 14rem);
}

.hero__logo .mark-ink { stroke: var(--on-deep); }

.wordmark--hero {
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--on-deep);
}

/* Le bloc logo se mesure à sa propre largeur plutôt qu'à celle de la fenêtre :
   dessin et wordmark gardent leur proportion et tiennent dans le panneau
   jusqu'à 320 px. L'écart passe sur le wordmark, une unité de conteneur ne
   pouvant pas dimensionner le conteneur lui-même. */
@supports (width: 1cqi) {
  .hero__logo { container-type: inline-size; gap: 0; }
  .hero__logo-mark { height: min(14rem, 44cqi); }
  .wordmark--hero {
    font-size: min(3rem, 10cqi);
    margin-left: min(1.75rem, 4cqi);
  }
}

/* -------------------------------------------------------------- problème */

.section--problem { padding-block: clamp(4rem, 8vw, 7rem); }

/* Le texte tient la colonne de gauche, l'illustration occupe le vide de droite.
   Le PNG est détouré : posé à même le fond clair, il n'a besoin d'aucune
   plaque — contrairement à celui du hero, qui se détache sur l'aplat profond. */
.problem {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .problem { grid-template-columns: 1fr 0.85fr; }
}

.problem__illustration {
  width: 100%;
  max-width: 32rem;
  height: auto;
  justify-self: center;
}

/* ------------------------------------------------------ 3. la méthode */

.method__panel h2,
.method__panel .lede { color: var(--on-deep); }
.method__panel .lede { color: var(--on-deep-soft); }

.steps {
  list-style: none;
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  row-gap: clamp(3rem, 6vw, 5rem);
}

.steps__pair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

/* Les trois étapes tiennent sur une seule ligne : la règle qui les surmonte
   passe alors du trait plein au pointillé sur toute la séquence, et dit à elle
   seule ce que la page raconte — l'existant à gauche, le projeté à droite. */
@media (min-width: 62rem) {
  .steps__pair { grid-template-columns: repeat(3, 1fr); }
}

.rule {
  width: 100%;
  height: 2px;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow: visible;
}

.rule line { vector-effect: non-scaling-stroke; stroke-width: 2; }
.rule__ink       { stroke: var(--on-deep); }
.rule__projected { stroke: var(--accent); stroke-dasharray: 6 6; }

/* Le seul moment orchestré de la page : la liaison se trace au défilement.
   Elle avance de gauche à droite quand la paire entre dans le champ, reste
   pleine le temps de la lecture, puis se retire dans le même sens quand la
   paire sort. Le mouvement est piloté par la position de défilement, donc il
   s'inverse naturellement quand on remonte. */

@supports (animation-timeline: view()) {
  .steps__row {
    view-timeline-name: --row;
    view-timeline-axis: block;
  }

  .rule {
    animation: rule-scrub linear both;
    animation-timeline: --row;
    animation-range: cover 0% cover 100%;
  }

  @keyframes rule-scrub {
    0%   { clip-path: inset(0 100% 0 0); }
    38%  { clip-path: inset(0 0 0 0); }
    72%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
  }
}

/* Repli : sans animation liée au défilement, un tracé unique à l'entrée. */
.rule.js-draw {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--ease);
}
.rule.js-draw.is-drawn { clip-path: inset(0 0 0 0); }

.step__num {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--on-deep-soft);
}

.step__title { margin-top: 1.15rem; color: var(--on-deep); }

.step p:not(.step__num) {
  margin-top: 0.9rem;
  max-width: 44ch;
  color: var(--on-deep-soft);
}

/* ------------------------------------------------------------ 4. tarifs */

/* Le filet en tête de bloc porte le sens, comme aux piliers — et il le porte
   ici selon le principe du logo : plein pour le prix certain, pointillé vert
   pour celui qui reste à déterminer. */
.tarifs {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(2.25rem, 4vw, 3rem);
}

@media (min-width: 60rem) {
  .tarifs { grid-template-columns: repeat(3, 1fr); }
}

.tarif { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.tarif p:last-child { margin-top: 0.9rem; max-width: 42ch; }

/* Le montant n'est pas arrêté : le filet passe au pointillé vert. Il est
   épaissi, un trait discontinu de 1px se lisant mal à cette échelle. */
.tarif--variable { border-top: 2px dashed var(--accent); padding-top: 1.4375rem; }

.tarif__prix {
  font-size: var(--t-3);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* La précision qui accompagne un prix, sous le chiffre. */
.tarif__sous {
  margin: -0.35rem 0 0.6rem;
  font-size: var(--t--1);
  color: var(--ink-soft);
}

/* -------------------------------------------------------- 5. comparatif */

/* Quatre paires « Seul / Avec ». Sur mobile, chaque situation est suivie de
   sa réponse : une carte claire, puis la carte en aplat profond qui y répond.
   Sur grand écran, les paires se font face ligne à ligne, posées sur deux
   surfaces continues dessinées par les pseudo-éléments de la grille : le
   fond clair densifié à gauche, l'aplat profond à droite, plus large — le
   regard doit aller d'abord à ce qu'on propose. Aucune ombre ici. */
.compare {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: 1rem;
}

.compare__head {
  display: none;
  margin: 0;
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

.compare__pair { display: grid; }

.compare__alone,
.compare__with { margin: 0; padding: 1.4rem var(--pad); }

.compare__alone {
  background: var(--ground-deep);
  color: var(--ink-soft);
  border-radius: 1.5rem 1.5rem 0 0;
}

.compare__with {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep-soft);
  border-radius: 0 0 1.5rem 1.5rem;
}

/* Même grille millimétrée que les aplats profonds. */
.compare__with::before,
.compare::after {
  background-image:
    repeating-linear-gradient(to right,  rgba(245,240,232,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(245,240,232,.07) 0 1px, transparent 1px 26px);
}
.compare__with::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.compare__label { display: block; margin-bottom: 0.4rem; font-size: var(--t--1); font-weight: 500; }
.compare__alone .compare__label { color: var(--ink); }
.compare__with .compare__label { color: var(--on-deep); }
.compare__with strong { color: var(--on-deep); font-weight: 500; }
.compare__with :focus-visible { outline-color: var(--on-deep); }

@media (min-width: 60rem) {
  .compare {
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: auto repeat(4, auto);
    column-gap: 1.5rem;
    row-gap: 0;
    isolation: isolate;
  }

  .compare::before,
  .compare::after {
    content: '';
    grid-row: 1 / -1;
    z-index: -1;
    border-radius: var(--r-panel);
  }
  .compare::before { grid-column: 1; background-color: var(--ground-deep); }
  .compare::after  { grid-column: 2; background-color: var(--deep); }

  .compare__head { display: block; grid-row: 1; padding: var(--pad) var(--pad) 1.75rem; }
  .compare__head--alone { grid-column: 1; }
  .compare__head--with  { grid-column: 2; color: var(--on-deep); }

  .compare__pair { display: contents; }

  /* Placement explicite : les deux surfaces occupent déjà toutes les cases,
     un placement automatique repousserait les paires sous la grille. */
  .compare__pair:nth-of-type(1) > * { grid-row: 2; }
  .compare__pair:nth-of-type(2) > * { grid-row: 3; }
  .compare__pair:nth-of-type(3) > * { grid-row: 4; }
  .compare__pair:nth-of-type(4) > * { grid-row: 5; }

  /* Marge plutôt que retrait : le filet de chaque ligne s'arrête à la marge
     du panneau, comme dans une liste posée dedans. */
  .compare__alone,
  .compare__with {
    margin-inline: var(--pad);
    padding: 1.1rem 0;
    background: none;
    border-radius: 0;
    overflow: visible;
  }
  .compare__alone { grid-column: 1; border-top: 1px solid var(--hairline-deep); }
  .compare__with  { grid-column: 2; border-top: 1px solid var(--on-deep-line); }
  .compare__with::before { content: none; }
  .compare__pair:last-child > * { padding-bottom: var(--pad); }

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

/* --------------------------------------------------------------- 5. FAQ */

.faq-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

@media (min-width: 56rem) {
  .faq-layout { grid-template-columns: 4fr 7fr; gap: clamp(3rem, 6vw, 5rem); }
  .faq-layout__head { position: sticky; top: 7rem; }
}

.faq {
  max-width: 40rem;
  border-bottom: 1px solid var(--hairline);
}

.faq__group {
  margin: 0;
  padding: 2.5rem 0 0.9rem;
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.faq__group:first-child { padding-top: 0; }

.qa { border-top: 1px solid var(--hairline); }

.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span { flex: 1; text-wrap: pretty; }

/* Marqueur + / − dessiné au trait, pas une icône rapportée. */
.qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.45rem;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1px, 1px 100%;
  transition: background-size 0.24s var(--ease);
}
.qa[open] summary::after { background-size: 100% 1px, 1px 0; }

.qa__body { padding-bottom: 1.75rem; max-width: var(--measure); }
.qa__body p { line-height: 1.75; }

/* ------------------------------------------------------------- 6. devis */

.devis { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }

@media (min-width: 56rem) {
  .devis { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 5rem); }
  .devis__intro { position: sticky; top: 7rem; }
}

.panel {
  background: var(--panel);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 12px 32px rgba(20, 20, 15, 0.06);
}

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}

.field__opt { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--control);
  border-radius: var(--r-field);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; }

.field input:hover,
.field textarea:hover { border-color: var(--ink); }

.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--ink); }

.field__hint { margin-top: 0.45rem; font-size: var(--t--1); color: var(--ink-soft); }
.field__hint--before { margin: 0 0 0.5rem; }

.form__note { margin: 0 0 1.5rem; font-size: var(--t--1); color: var(--ink-soft); }

.field__error,
.form__error {
  margin-top: 0.5rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--error);
}

.form__error {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--error);
  border-radius: var(--r-field);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--error); }

/* Suggestions d'adresses : une liste posée sous le champ, dans le blanc du
   formulaire, au rayon des champs. Seul autre élément à porter une ombre,
   parce qu'il passe au-dessus du contenu. */
.field--suggest { position: relative; }

.suggest {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0.35rem 0 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 19rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--control);
  border-radius: var(--r-field);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.06), 0 12px 28px rgba(20, 20, 15, 0.12);
}

.suggest__option {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.45rem;
  line-height: 1.35;
  cursor: pointer;
}
.suggest__option:hover,
.suggest__option[aria-selected='true'] { background: var(--ground); }
.suggest__main { font-weight: 500; }
.suggest__sub { font-size: var(--t--1); color: var(--ink-soft); }

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

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

.rgpd {
  max-width: var(--measure);
  margin-top: 1.5rem;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.rgpd a { color: var(--ink); text-underline-offset: 0.2em; }

.btn[aria-busy='true'] { opacity: 0.75; pointer-events: none; }

.form-sent h3 { margin-bottom: 1rem; }
.form-sent p { max-width: 46ch; color: var(--ink-soft); }

/* -------------------------------------------------------------- footer */

.site-footer { padding-block: 0 clamp(1rem, 2vw, 2rem); }

.site-footer__inner {
  display: grid;
  gap: 1.5rem;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-panel);
  padding: clamp(2rem, 4.5vw, 3.5rem);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
    row-gap: 2rem;
  }
  .site-footer__brand   { grid-column: 1; }
  .site-footer__nav     { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-footer__legal   { grid-column: 2; grid-row: 2; justify-self: end; }
  .site-footer__contact { grid-column: 1; grid-row: 2; }
  .site-footer__copy    { grid-column: 1 / -1; }
}

.site-footer__brand { font-weight: 500; }

.site-footer__nav,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: var(--t--1);
}

/* Souligné par text-decoration et non par une bordure : la zone de clic peut
   ainsi atteindre 44 px de haut sans éloigner le trait du texte. */
.site-footer a {
  display: inline-block;
  padding-block: 0.7rem;
  color: var(--on-deep);
  text-decoration: underline;
  text-decoration-color: var(--on-deep-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.18s var(--ease);
}
.site-footer a:hover { text-decoration-color: var(--on-deep); }

.site-footer :focus-visible { outline-color: var(--on-deep); }

.site-footer__legal a,
.site-footer__copy { color: var(--on-deep-soft); }

.site-footer__contact { font-size: var(--t-0); }

.site-footer__copy {
  font-size: var(--t--1);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Une animation liée au défilement n'a pas de durée : il faut la couper
     explicitement, sinon la règle ci-dessus ne l'atteint pas. */
  .rule {
    animation: none !important;
    clip-path: none !important;
  }
}

/* ---------------------------------------------------- pages de contenu */

/* Mentions légales, confidentialité, confirmation d'envoi, page introuvable :
   une colonne de lecture posée sur le fond clair, sans panneau. Ce sont des
   pages qu'on consulte, pas des pages qu'on parcourt. */
.doc { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section); }
.doc h1 { font-size: var(--t-3); max-width: 24ch; }
.doc__lede { margin-top: 1.25rem; font-size: var(--t-1); color: var(--ink-soft); }

.doc h2 {
  font-size: var(--t-2);
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.doc h2 + * { margin-top: 1rem; }
.doc p + p { margin-top: 1em; }
.doc ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.doc li + li { margin-top: 0.4rem; }
.doc a { text-underline-offset: 0.2em; }

.doc dl {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.6rem 1.5rem;
  margin: 1rem 0 0;
}
.doc dt { color: var(--ink-soft); }
.doc dd { margin: 0; }

@media (max-width: 36rem) {
  .doc dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .doc dd + dt { margin-top: 0.8rem; }
}

.doc__date { margin-top: clamp(2.5rem, 5vw, 3.25rem); font-size: var(--t--1); color: var(--ink-soft); }
.doc__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }

/* Information à compléter avant la mise en ligne : visible à l'écran, pour
   qu'aucune ne parte en ligne par mégarde. */
.todo {
  background: #F6E3A8;
  color: var(--ink);
  padding: 0 0.3em;
  border-radius: 0.25rem;
}