@charset "utf-8";
/* =====================================================================
   STAYSTUDIO — LA VITRINE.

   Une seule feuille, une seule page. Pas de cadre, pas de préprocesseur :
   le fichier tient dans une tête et se relit d'un bout à l'autre.

   L'ordre : polices, jetons, socle, éléments partagés, puis les sections
   dans l'ordre de la page. Les points de rupture sont posés au plus près
   de ce qu'ils corrigent, jamais rassemblés en fin de fichier.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LES POLICES

   Trois fichiers, et c'est un plafond. Fraunces porte les titres —
   c'est une serif à fort contraste, magnifique en grand corps et
   illisible en petit. Geist porte tout ce qui se lit. Newsreader en
   italique ne sert qu'aux respirations : les surtitres et les chutes.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2. LES JETONS
   --------------------------------------------------------------------- */
:root {
  /* La palette. Des neutres chauds, une encre qui n'est jamais noire,
     un vert profond pour seul accent. Rien d'autre : une page de vente
     qui emploie six couleurs n'en emploie aucune. */
  --encre:        #1B1813;
  --texte:        #3D3830;
  --fond:         #FBF9F5;
  --sable:        #F1ECE2;
  --sable-fonce:  #E6DFD1;
  --filet:        #DDD5C6;
  --accent:       #3B4A38;
  --or:           #A8875A;

  /* ------------------------------------------------------------------
     LES DEUX TONS SECONDAIRES ONT ÉTÉ ASSOMBRIS, ET C'EST UNE CORRECTION.

     Ils valaient #6B6459 et #6D7C65 : jolis, et sous le seuil. Mesurés
     sur les trois fonds de la page, le gris tombait à 4,41 sur le sable
     foncé du formulaire, et le vert entre 3,36 et 4,23 partout — or il
     ne porte que du petit corps en capitales, c'est-à-dire ce qui se lit
     le plus mal.

     Ces deux teintes-ci passent 4,5 sur les TROIS fonds clairs. La
     nuance perdue est invisible ; ce qui est gagné ne l'est pas.
     ------------------------------------------------------------------ */
  --texte-clair:  #635C51;   /* 6,28 / 5,61 / 4,98 sur fond / sable / sable foncé */
  --accent-clair: #55634E;   /* 6,09 / 5,44 / 4,83 */

  /* Les surfaces sombres. Le même brun très sombre que le thème
     Veillée : jamais du noir, qui durcit tout ce qu'il porte. */
  --nuit:         #191612;
  --nuit-texte:   #E8E2D6;
  --nuit-douce:   #A79E90;
  --nuit-filet:   #3A342C;

  /* La mesure. Une seule largeur de lecture pour toute la page, et une
     gouttière qui suit la fenêtre. */
  --large:  76rem;
  --etroit: 44rem;
  --marge:  clamp(1.25rem, 5vw, 4rem);

  /* Le rythme vertical. Toutes les sections respirent pareil : c'est
     ce qui fait qu'une page de quatorze sections ne fatigue pas. */
  --souffle: clamp(4.5rem, 11vw, 9rem);

  /* La hauteur de la barre posee, et l'air qu'on veut voir entre elle et
     le premier mot d'une section. Ecrits ici parce que l'atterrissage des
     ancres s'en deduit — voir la note devant .section. */
  --barre: 74px;
  --air-sous-barre: 20px;

  /* Et la hauteur de la barre RESSERREE, celle qu'ont sous les yeux
     toutes les ancres : on n'atteint pas une section sans avoir defile,
     et defiler resserre la barre. Sans script elle ne se resserre
     jamais — la valeur retombe alors sur la barre posee. */
  --barre-defilee: var(--barre);

  --rayon: 2px;
  --ombre: 0 1px 2px rgb(27 24 19 / 4%), 0 8px 28px -12px rgb(27 24 19 / 18%);
  --ombre-forte: 0 2px 4px rgb(27 24 19 / 6%), 0 24px 60px -24px rgb(27 24 19 / 30%);
}

/* Des 66rem, la barre porte le lien vers la demonstration sous son
   bouton : elle prend une ligne de plus. Mesure au navigateur, bord a
   bord et filet compris, 90,6 px contre 73,7 px sous le seuil. Les
   ancres se deduisent de ce jeton — le laisser a 74 px les faisait
   toutes atterrir dix-sept pixels sous la barre. */
@media (min-width: 66rem) {
  :root { --barre: 91px; }
}
@media (scripting: enabled) {
  :root { --barre-defilee: 55px; }
}
@media (scripting: enabled) and (min-width: 66rem) {
  :root { --barre-defilee: 69px; }
}

/* ---------------------------------------------------------------------
   3. LE SOCLE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'atterrissage des ancres n'est PAS regle ici : voir .section. Une
     marge posee sur le document viserait le bord haut de la section, et
     ce bord ne se voit pas. */
  scroll-padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

}

/* La barre est posee par-dessus la page, pas dedans : c'est ce
   rembourrage qui lui fait sa place. Voir la note de `.entete`.

   Il ne vaut que pour les pages QUI ONT une barre : la page de reponse
   de `demande.php` n'en porte pas, et se serait ouverte sur une bande
   vide de la hauteur d'une barre absente. */
body:has(> .entete) { padding-top: var(--barre); }

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

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.2rem, 1.35rem + 3.7vw, 4.1rem); line-height: 1.06; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem); line-height: 1.22; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

h1 em, h2 em {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 500; color: var(--encre); }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--fond);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.evitement:focus { left: 0; }

.hors-ecran {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   4. LES ÉLÉMENTS PARTAGÉS
   --------------------------------------------------------------------- */
.dedans {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.dedans--etroit { max-width: calc(var(--etroit) + var(--marge) * 2); }

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

  /* ------------------------------------------------------------------
     ON CALE LE PREMIER MOT, PAS LE BORD DE LA SECTION.

     Meme correction que celle passee la veille dans les themes des sites
     clients, et pour la meme raison. Une marge fixe posee sur le document
     immobilise le BORD HAUT du <section> — mais ce bord est invisible :
     le surtitre se trouve --souffle plus bas, soit 72 a 144 px selon la
     largeur de la fenetre.

     Mesure avant correction, a 1280 px : le surtitre s'arretait a 167 px
     sous la barre, avec toute la fin de la section precedente encore a
     l'ecran. En retranchant la marge interieure, c'est lui qui
     s'immobilise, a 20 px sous la barre, quelle que soit la fenetre.

     La valeur devient negative des que --souffle depasse 94 px : c'est
     voulu, et scroll-margin l'accepte.
     ------------------------------------------------------------------ */
  scroll-margin-top: calc(var(--barre-defilee) + var(--air-sous-barre) - var(--souffle));
}
.section--sable { background: var(--sable); }
.section--encre { background: var(--nuit); color: var(--nuit-texte); }
.section--encre h2,
.section--encre h3,
.section--encre h4 { color: var(--nuit-texte); }
.section--encre strong { color: #FFF; }

.section__tete { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__tete--large { max-width: 54rem; }
.section__tete h2 { margin-bottom: 0.5em; }

/* Le titre de la visibilité tient sur une seule ligne. Il demande 950 px à sa
   taille pleine, les 46rem de réserve n'en donnent que 736. On lui rend la
   largeur du bloc à partir de 70rem, où le dedans en offre 1008 — une
   cinquantaine de pixels de marge, comme ailleurs. En dessous la place manque
   vraiment et on le laisse revenir à la ligne, d'autant que la taille du titre
   décroît elle aussi. Même geste que .note-forte--une-ligne. */
@media (min-width: 70rem) {
  .section__tete--une-ligne { max-width: none; }
  .section__tete--une-ligne h2 { text-wrap: nowrap; }
}

.section__chapo {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--texte-clair);
  max-width: 40em;
}
.section--encre .section__chapo { color: var(--nuit-douce); }

.surtitre {
  font-family: 'Geist', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-clair);
  margin: 0 0 1.1rem;
}
.section--encre .surtitre { color: var(--or); }

/* Les boutons. Un seul geste principal sur toute la page, et sa
   déclinaison discrète dans l'en-tête. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.bouton--plein {
  background: var(--encre);
  color: var(--fond);
}
.bouton--plein:hover { background: var(--accent); }
.bouton--plein:active { transform: translateY(1px); }
.bouton--grand {
  font-size: 1.02rem;
  padding: 1.05rem 2rem;
}
.section--encre .bouton--plein {
  background: var(--nuit-texte);
  color: var(--nuit);
}
.section--encre .bouton--plein:hover { background: #FFF; }

.lien-souligne {
  font-size: 0.98rem;
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lien-souligne:hover { color: var(--encre); border-color: var(--encre); }

/* Les plaques : le cadre commun de toutes les maquettes. Un filet, une
   ombre portée très douce, et rien d'autre — surtout pas de fausse
   fenêtre de navigateur, qui ferait passer une direction visuelle pour
   un site livré. */
.plaque { margin: 0; }
.plaque img {
  width: 100%;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  background: var(--sable);
}
.plaque--large img { box-shadow: var(--ombre-forte); }
.plaque figcaption {
  margin-top: 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--texte-clair);
}
.section--encre .plaque img { border-color: var(--nuit-filet); }
.section--encre .plaque figcaption { color: var(--nuit-douce); }

/* Les listes courantes. */
.liste-puces li,
.liste-coches li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
.liste-puces li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--accent-clair);
}
.liste-coches li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.42em;
  width: 0.42rem;
  height: 0.72rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(42deg);
}
.liste-coches li { padding-left: 1.65rem; margin-bottom: 0.75rem; }
.liste-coches .fin { color: var(--texte-clair); font-size: 0.92em; }

/* LA LIGNE OFFERTE. Ce n'est pas une caractéristique de plus : c'est une
   offre datée, et une offre datée qui se range dans la liste ne se lit
   pas. Elle sort donc du rang — un encadré doré, la seule couleur
   d'accent que cette carte porte déjà. Aucune teinte n'entre ici.

   Le doré sur le fond de l'encadré (le doré à 9 % sur la nuit) donne
   4,93 : au-dessus du seuil, ce qui n'allait pas de soi pour du petit
   corps en capitales. Mesuré avant de l'écrire, comme les jetons. */
.liste-coches .coche-offre {
  margin: 1.15rem 0;
  padding: 0.9rem 1.05rem 0.95rem 2.6rem;
  background: rgb(168 135 90 / 9%);
  border: 1px solid rgb(168 135 90 / 45%);
  border-radius: var(--rayon);
}
.liste-coches .coche-offre::before { left: 1.05rem; top: calc(0.42em + 0.9rem); }
.coche-offre__mot {
  display: block;
  margin-top: 0.5rem;
  color: var(--or);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
}
.coche-offre .fin { display: block; margin-top: 0.35rem; }

/* La note qui ferme une section : une phrase, en italique, détachée. */
.note-forte {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--encre);
  max-width: 40em;
}
.section--encre .note-forte { border-color: var(--nuit-filet); color: var(--nuit-texte); }

/* La note du constat tient sur une seule ligne. Deux choses l'en empêchaient :
   les 40em de réserve, trop courtes d'une centaine de pixels, et `text-wrap:
   pretty`, qui renvoyait les quatre derniers mots à la ligne pour éviter une
   fin de paragraphe trop courte. On lui rend la largeur du bloc à partir de
   76rem — en dessous la place manque vraiment, et on la laisse revenir à la
   ligne plutôt que de rétrécir le texte. Même geste que .mention--une-ligne. */
@media (min-width: 76rem) {
  .note-forte--une-ligne { max-width: none; text-wrap: nowrap; }
}

/* Le séparateur de sous-section : un filet, et beaucoup d'air autour.

   Il sert là où deux propos se suivent DANS LA MÊME SECTION de couleur :
   changer de fond annoncerait une section neuve, et un titre de plus sans
   rupture se lirait comme la suite du précédent.

   Le filet est celui de toute la page ; c'est l'AIR qui dit ce qu'il est.
   Mesuré des deux côtés, il vaut 184 px à 1440 et 112 px à 390 — contre
   288 et 144 px entre deux sections, et une quarantaine entre un filet
   d'étape et son texte. Assez pour qu'on change de sujet, pas assez pour
   qu'on croie avoir changé de chapitre. */
.separateur {
  height: 0;
  margin-block: clamp(3.5rem, 7vw, 5.75rem);
  border: 0;
  border-top: 1px solid var(--filet);
}
.section--encre .separateur { border-color: var(--nuit-filet); }

/* Les réserves : petites, grises, jamais cachées. */
.mention {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texte-clair);
  max-width: 46em;
  margin-top: 2rem;
}
.mention--gauche { margin-top: 1.5rem; }
.section--encre .mention { color: var(--nuit-douce); }

/* Sous les captures : la phrase tient sur une seule ligne. Elle demande un peu
   plus que les 46em de réserve, d'où la largeur libre. En dessous de 64rem la
   place manque : on la laisse revenir à la ligne plutôt que de déborder. */
@media (min-width: 64rem) {
  .mention--une-ligne { max-width: none; }
}

/* ---------------------------------------------------------------------
   5. L'EN-TÊTE
   --------------------------------------------------------------------- */
/* LA BARRE EST POSEE PAR-DESSUS LA PAGE, ET NON DEDANS.

   Elle a longtemps ete `sticky`, ce qui revient a lui garder sa place
   dans le fil du document. Des lors qu'elle se resserre au defilement,
   cette place retrecit — et TOUTE la page remonte de ce qu'elle perd.
   Mesure avant correction : le titre d'accueil sautait de 21,6 px au
   passage du seuil, pendant qu'on faisait defiler. C'est exactement le
   soubresaut qu'on ne voulait pas.

   `fixed`, plus le rembourrage haut du `body`, retire la barre du fil :
   sa hauteur peut changer, la page ne bouge plus d'un pixel. Les ancres
   y gagnent aussi — leur point d'arrivee se calcule sur une mise en
   page qui ne bougera plus, d'ou qu'on parte. */
.entete {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.entete[data-fixe] {
  border-bottom-color: var(--filet);
  background: color-mix(in srgb, var(--fond) 94%, transparent);
}

/* LA BARRE SE RESSERRE UNE FOIS LA PAGE DÉFILÉE.

   Un quart de hauteur en moins, et rien d'autre : les mêmes éléments,
   aux mêmes places, simplement plus près les uns des autres. Ce qui
   maigrit, c'est l'air — le rembourrage de la barre, celui du bouton,
   l'écart de la pile — et l'enseigne d'un cran. Aucun corps de texte ne
   bouge : une barre qui rapetisse ses mots se lit moins bien juste au
   moment où l'on cherche à revenir en haut.

   Le corps du lien ne bouge pas non plus, et c'est important : il est
   calé sur la largeur du bouton, dont seul le rembourrage VERTICAL
   maigrit ici. Toucher au rembourrage horizontal désaccorderait les deux.

   Mesuré à 1440 px : 90,6 px posée, 69,0 px défilée — 23,8 % de moins.
   À 390 px, où l'enseigne fait la hauteur à elle seule : 73,7 contre
   55,0 px, soit 25,4 %. C'est de là que sortent les deux valeurs de
   `--barre` défilée, et donc l'atterrissage des ancres.

   Le seuil est celui du filet, 12 px de défilement : la barre change
   d'état une fois, franchement, et se tient. Pas de hauteur asservie au
   défilement, qui donne cette barre qui respire sous le doigt. */
.entete[data-fixe] .entete__dedans { padding-block: 0.45rem; }
.entete[data-fixe] .marque__signe { width: 23px; height: 24px; }
.entete[data-fixe] .marque__mot { font-size: 1.5rem; }
.entete[data-fixe] .entete__geste { gap: 0.2rem; }
.entete[data-fixe] .entete__action { padding-block: 0.4rem; }

.entete__dedans {
  max-width: var(--large);
  margin-inline: auto;
  padding: 0.85rem var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: padding 0.22s ease;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--encre);
  flex: none;
}
/* L'enseigne, à demi plus grande que la première version. C'est la seule
   marque de la page : elle doit se voir avant le menu, pas après. */
.marque__signe {
  width: 26px;
  height: 27px;
  flex: none;
  transition: width 0.22s ease, height 0.22s ease;
}
.marque__mot {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.725rem;
  letter-spacing: -0.01em;
  transition: font-size 0.22s ease;
}

.menu {
  display: none;
  gap: clamp(1rem, 2vw, 1.9rem);
  font-size: 0.9rem;
}
.menu a {
  text-decoration: none;
  white-space: nowrap;
  color: var(--texte-clair);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.menu a:hover { color: var(--encre); border-bottom-color: var(--encre); }

/* La répartition est faite par `justify-content: space-between` sur le
   conteneur, et non par une marge automatique sur le bouton. C'est ce
   qui permet aux pages annexes — qui n'ont PAS de menu — de garder leur
   bouton à droite : avec la marge, il venait se coller à l'enseigne dès
   qu'il n'y avait plus que deux éléments dans la barre. */
.entete__action {
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  transition: background-color 0.18s ease, color 0.18s ease,
              transform 0.18s ease, padding 0.22s ease;
}

/* Le geste de la barre est devenu une pile : le bouton, et sous lui le
   lien vers la démonstration. Les deux font la MÊME largeur — c'est le
   corps du lien qui a été calé sur celle du bouton, voir
   `.entete__exemple`, et non l'inverse. */
.entete__geste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.22s ease;
}

@media (min-width: 66rem) {
  .menu { display: flex; }
}

/* ---------------------------------------------------------------------
   5 bis. LE MENU DU TÉLÉPHONE

   Sous 66rem, le menu horizontal ne tient plus : il disparaissait, et
   rien ne le remplaçait — la barre n'était plus qu'une enseigne. Le
   tiroir ci-dessous prend le relais.

   Deux choix méritent d'être écrits :

   — Le bouton n'existe que si le script a tourné (`[data-js]`). Un
     burger sans script est un bouton qui ne fait rien ; les mêmes liens
     restent dans le pied de page, qui lui ne dépend de personne.

   — Sous 66rem, le bouton « Créer mon nouveau site » quitte la barre
     et devient le dernier geste du tiroir. Enseigne + bouton + burger
     ne tenaient pas côte à côte sur un téléphone : à 480 px, la ligne
     débordait. Le geste n'est pas perdu, il est déplacé — et la page en
     porte trois autres.
   --------------------------------------------------------------------- */
.burger {
  display: none;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  margin-right: calc(var(--marge) * -0.35);
  padding: 0.6rem calc(var(--marge) * 0.35);
  background: none;
  border: 0;
  color: var(--encre);
  font-family: 'Geist', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
}

/* Deux traits, pas trois : ce sont les deux mêmes qui se croisent une
   fois le tiroir ouvert. Le troisième n'aurait servi qu'à disparaître. */
.burger__traits {
  display: grid;
  gap: 6px;
  width: 22px;
}
.burger__traits > span {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.22s ease;
}
.entete[data-ouvert] .burger__traits > span:first-child { transform: translateY(3.75px) rotate(45deg); }
.entete[data-ouvert] .burger__traits > span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Tiroir ouvert, la barre cesse d'être translucide : le flou laissait
   passer les photos de la page sous les liens du menu. */
.entete[data-ouvert] {
  background: var(--fond);
  border-bottom-color: var(--filet);
}

.tiroir {
  display: none;
  border-top: 1px solid var(--filet);
  padding: 0.75rem var(--marge) 1.5rem;
  max-height: calc(100dvh - var(--barre));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.entete[data-ouvert] .tiroir {
  display: block;
  animation: tiroir-entre 0.2s ease;
}
@keyframes tiroir-entre {
  from { opacity: 0; transform: translateY(-8px); }
}

.tiroir__liens { display: grid; }
.tiroir__liens a {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: var(--texte);
  font-size: 1.02rem;
}
.tiroir__liens a:last-child { border-bottom: 0; }
.tiroir__liens a:hover { color: var(--encre); }

/* Pleine largeur sur un téléphone, où c'est le geste unique de l'écran ;
   à sa taille dès qu'il y a de la place, sinon la barre noire traverse
   la tablette d'un bord à l'autre et pèse plus que la page. */
.tiroir__action {
  width: 100%;
  margin-top: 1.15rem;
}
@media (min-width: 34rem) {
  .tiroir__action { width: auto; }
}

/* Sous 66rem, le lien quitte la barre AVANT le bouton. Sans script, le
   bouton reste — le tiroir n'existe pas pour le remplacer — mais la
   pile, elle, ne tiendrait pas : la barre y gagnerait une ligne que
   `--barre` ne compte pas, et toutes les ancres atterriraient dessous. */
@media (max-width: 65.9375rem) {
  .entete__exemple { display: none; }
}
@media (max-width: 65.9375rem) {
  .entete[data-js] .burger { display: inline-flex; }
  .entete[data-js] .entete__geste,
  .entete[data-js] .entete__action { display: none; }
}
@media (max-width: 30rem) {
  .entete__geste,
  .entete__action { display: none; }
}
/* Le corps ne défile plus derrière le tiroir : sans cela, un doigt qui
   glisse à côté des liens fait partir la page sous le menu resté posé. */
body[data-menu-ouvert] { overflow: hidden; }

/* ---------------------------------------------------------------------
   6. L'ACCUEIL
   --------------------------------------------------------------------- */
.hero {
  /* ------------------------------------------------------------------
     LE HAUT DE PAGE ET LE CLIC SUR L'ENSEIGNE DONNENT LE MÊME ÉCART.

     Ils n'en donnaient pas. À l'arrivée, le surtitre s'affichait 90 px
     sous la barre ; en cliquant sur « Staystudio », 16 px. L'écart
     n'était réglé nulle part : il tombait de ce que l'ancre #haut vise
     le bord du hero, qui commence SOUS la barre — le défilement en
     ramenait donc 74 px, et la barre, posée, en recouvrait autant.

     Deux lignes règlent les deux états d'un coup :
       — le hero ouvre sur le même air que toute autre section, celui
         qu'on retrouve en cliquant une entrée du menu ;
       — son ancre retranche la hauteur de la barre, ce qui fait
         atterrir l'enseigne exactement là où la page se charge. Plus de
         saut entre les deux.
     ------------------------------------------------------------------ */
  padding-top: var(--air-sous-barre);
  padding-bottom: var(--souffle);
  /* Seule ancre a viser la barre POSEE, et non la resserree : elle
     ramene a l'exact endroit ou la page se charge, defilement zero,
     donc barre depliee. La viser resserree ferait s'arreter la page
     dix-neuf pixels plus bas, barre resserree, et l'enseigne ne
     retrouverait jamais sa taille. */
  scroll-margin-top: var(--barre);
  overflow: hidden;
}
.hero__dedans {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.hero h1 { margin-bottom: 0.42em; }

.chapo {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--texte);
  max-width: 34em;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-bottom: 1.15rem;
}

/* LES DÉMONSTRATIONS SONT DEUX, ET « EXEMPLE » N'EN EST PAS UNE.

   Le visiteur ne tient pas un gîte ET une maison d'hôtes : il tient
   l'un des deux, et c'est le mot qu'il cherche. D'où deux liens nommés
   plutôt qu'un seul lien générique. Le mot « Exemple » les annonce et
   ne se clique pas — le souligner ferait un troisième lien qui ne mène
   nulle part. La flèche reste décorative : elle annonce qu'on quitte la
   page, et le nom de l'univers porte le sens pour qui écoute la page.
   Chaque lien porte donc un `aria-label` qui remet « exemple » dans son
   propre nom accessible, puisque le mot vit maintenant à côté. */
.exemples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}
.exemples__mot { color: var(--texte-clair); }

/* Le rang se range SOUS les deux actions, et en simples liens : un
   troisième bouton dans l'accueil ferait trois routes également fortes,
   c'est-à-dire aucune évidente.

   ICI AUSSI LE RANG FAIT LA LARGEUR DU BOUTON. Les deux commencent au
   même bord gauche : trois pixels de trop à droite et le rang déborde
   du bouton, ce qui se voit — le premier essai en donnait neuf, à
   0,85rem d'écart, et ça se voyait. Le corps garde ses 0,91rem, c'est
   l'écart qui rend les 249,9 px : 0,55rem, mesuré à 1440 px, à un
   dixième de pixel près. C'est l'écart de base de `.exemples`, la barre
   étant la seule à le resserrer. Le rang ne va pas à la ligne, même à
   320 px de fenêtre. */
.hero__exemple {
  margin: 0 0 2.25rem;
  font-size: 0.91rem;
}

/* LE CORPS ET L'ÉCART DE LA BARRE SONT MESURÉS, PAS CHOISIS.

   Le rang doit faire la largeur du bouton posé au-dessus, et tenir SUR
   UNE SEULE LIGNE : la barre gagnerait sinon une hauteur que `--barre`
   ne compte pas, et toutes les ancres atterriraient dessous — d'où le
   `nowrap`, qui est un garde-fou et non une préférence.

   Deux destinations nommées sont plus longues qu'un lien : à 0,71rem et
   0,85rem d'écart, le rang valait 209,0 px pour un bouton de 195,9 px,
   mesuré à 1440 px. Ce sont les 0,85rem qui ont cédé, pas le corps —
   rapetisser un texte déjà à 11,4 px pour gagner treize pixels
   d'alignement, c'est payer trop cher : 0,46rem d'écart rendent
   196,3 px, à un demi-pixel du bouton, sans toucher à la lisibilité.
   L'écart a déjà été resserré une fois, quand « Exemple » est passé au
   pluriel — un caractère de plus, et il a fallu redescendre de 0,63rem
   à 0,46. Retoucher le nom d'un univers, le mot qui les annonce ou le
   corps du bouton, c'est remesurer les deux. */
.entete__exemple {
  font-size: 0.71rem;
  gap: 0.2rem 0.46rem;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
}
.lien-exemple {
  color: var(--accent-clair);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--filet);
  text-underline-offset: 0.25em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.lien-exemple:hover {
  color: var(--encre);
  text-decoration-color: currentColor;
}

.hero__prix {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--texte-clair);
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  max-width: 32em;
}
.hero__prix strong { color: var(--encre); }

/* Les deux plaques d'accueil. La seconde est décalée derrière la
   première : une direction visuelle ne se montre jamais seule, sinon
   elle ressemble à LA proposition et non à UNE proposition. */
.hero__images { position: relative; }
.hero__plaque { margin: 0; }
.hero__plaque img {
  width: 100%;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--sable);
}
.hero__plaque--arriere {
  position: absolute;
  inset-inline-end: -6%;
  top: -4%;
  width: 62%;
  z-index: 1;
  opacity: 0.9;
}
.hero__plaque--arriere img { box-shadow: var(--ombre); }
.hero__plaque--avant {
  position: relative;
  z-index: 2;
  width: 88%;
  margin-top: 8%;
}
.hero__plaque--avant img { box-shadow: var(--ombre-forte); }

@media (min-width: 60rem) {
  .hero__dedans {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
  }
  .hero__images { min-height: 30rem; }
  .hero__plaque--arriere { width: 66%; top: -8%; inset-inline-end: -14%; }
  .hero__plaque--avant { width: 92%; margin-top: 12%; }
}

/* ---------------------------------------------------------------------
   7. LE CONSTAT
   --------------------------------------------------------------------- */
.constats {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filet);
}
.constats li {
  border-bottom: 1px solid var(--filet);
  padding: 1.15rem 0 1.15rem 2.6rem;
  position: relative;
}
.constats li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 1.72em;
  width: 1.35rem;
  height: 1px;
  background: var(--accent-clair);
}
.constats p {
  margin: 0;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
  color: var(--encre);
}

@media (min-width: 52rem) {
  .constats { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
  /* Deux colonnes, mais un seul filet de tête : sans cela, la colonne
     de droite commence par un trait qui ne ferme rien. */
  .constats li:nth-child(-n+2) { border-top: 0; }
}

/* ---------------------------------------------------------------------
   8. LES BÉNÉFICES
   --------------------------------------------------------------------- */
.grille-benefices {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}
.grille-benefices article { max-width: 34em; }
.grille-benefices h3 { margin-bottom: 0.45em; }
.grille-benefices p { color: var(--texte-clair); margin: 0; }

@media (min-width: 46rem) { .grille-benefices { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .grille-benefices { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
   9. LES RÉSERVATIONS DIRECTES
   --------------------------------------------------------------------- */
.direct { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.direct__mots p { color: var(--nuit-douce); max-width: 36em; }

.direct__chute {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.35;
  color: var(--nuit-texte) !important;
  margin-top: 1.75rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nuit-filet);
}

.direct__points { display: grid; gap: 1.75rem; align-content: start; }
.direct__points li {
  padding-left: 1.5rem;
  border-left: 1px solid var(--nuit-filet);
}
.direct__points h3 {
  /* Geist, et non Fraunces : à ce corps-là, une serif à fort contraste
     posée sur du brun très sombre perd ses pleins et ses déliés, et
     l'intertitre disparaît. C'est ce que dit déjà le thème Veillée de
     sa propre display — « illisible en petit corps ». */
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0;
  margin-bottom: 0.35em;
}
.direct__points p { color: var(--nuit-douce); font-size: 0.97rem; margin: 0; }

@media (min-width: 58rem) {
  .direct { grid-template-columns: 1.15fr 0.85fr; gap: clamp(3rem, 6vw, 6rem); }
}

/* ---------------------------------------------------------------------
   10. LES ÉTAPES
   --------------------------------------------------------------------- */
.etapes { display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); counter-reset: none; }
.etapes li {
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.etapes__rang {
  font-family: 'Geist', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-clair);
  margin: 0 0 1.5rem;
}
.etapes h3 { margin-bottom: 0.5em; }
.etapes p:last-child { color: var(--texte-clair); font-size: 0.99rem; }

@media (min-width: 46rem) { .etapes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .etapes { grid-template-columns: repeat(4, 1fr); } }

/* Les langues, seconde sous-section de « Comment ça marche ». Deux colonnes
   de prose et pas de liste à puces : le sujet se raconte, il ne s'énumère
   pas. Même mesure que la visibilité, qui fait la même chose plus bas.

   Et comme elle, pas de `margin: 0` sur les paragraphes : une colonne en
   porte deux, et le socle retire déjà la marge du dernier. */
.grille-langues { display: grid; gap: clamp(2.25rem, 4vw, 4rem); }
.grille-langues h3 { margin-bottom: 0.5em; }
.grille-langues p { color: var(--texte-clair); }

@media (min-width: 52rem) { .grille-langues { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
   11. LES UNIVERS
   --------------------------------------------------------------------- */
.univers { display: grid; gap: clamp(4rem, 8vw, 7rem); }

.univers__bloc {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--filet);
}
.univers__bloc:first-child { padding-top: 0; border-top: 0; }

.univers__rang {
  font-family: 'Geist', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-clair);
  margin: 0 0 1rem;
}
.univers__mots h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  margin-bottom: 0.2em;
}
.univers__soustitre {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--texte-clair);
  margin-bottom: 1.25rem;
}
.univers__mots > p { color: var(--texte-clair); max-width: 34em; }

.univers__pour {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  font-size: 0.92rem;
  line-height: 1.5;
}
.univers__pour span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-clair);
  margin-bottom: 0.35rem;
}

/* Les trois vues : la grande en haut, les deux autres dessous. Elles
   ne sont pas de même poids, et c'est voulu — l'accueil décide, les
   deux autres confirment. */
.univers__vues {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  grid-template-columns: 1fr 1fr;
}
.univers__vues .plaque--large { grid-column: 1 / -1; }

@media (min-width: 58rem) {
  .univers__bloc {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  /* Un bloc inversé inverse aussi la LARGEUR des colonnes, et pas
     seulement l'ordre. Sans cette ligne, les maquettes d'un univers sur
     deux atterrissaient dans la colonne étroite : à l'écran, Comptoir et
     Veillée paraissaient moins soignés que leurs voisins, alors que
     seule la grille était en cause. */
  .univers__bloc--inverse { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
  .univers__bloc--inverse .univers__mots { order: 2; }
  .univers__bloc--inverse .univers__vues { order: 1; }
}

/* ---------------------------------------------------------------------
   12. L'ADMINISTRATION
   --------------------------------------------------------------------- */
.admin { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: start; }
.admin__mots h3 { margin-bottom: 0.55em; }
.admin__mots h3 + p,
.admin__mots ul + h3 { margin-top: 2rem; }
.admin__mots p { color: var(--texte-clair); }
.admin__chute {
  margin-top: 1.5rem !important;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filet);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--encre) !important;
}

.grille-vues {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.grille-vues figcaption strong { color: var(--encre); }

@media (min-width: 46rem) { .grille-vues { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 58rem) {
  .admin { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------------------------------------------------------------------
   13. LE CALENDRIER
   --------------------------------------------------------------------- */
.calendrier { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: start; }
.calendrier__vues { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.encadre-franc {
  margin-top: 2.25rem;
  padding: 1.5rem 1.65rem;
  background: var(--sable);
  border-left: 2px solid var(--accent);
  border-radius: var(--rayon);
}
.section--sable .encadre-franc { background: var(--fond); }
.encadre-franc h4 { margin-bottom: 0.6em; }
.encadre-franc p { font-size: 0.95rem; color: var(--texte-clair); }

@media (min-width: 58rem) {
  .calendrier { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------------------------------------------------------------------
   14. LA VISIBILITÉ
   --------------------------------------------------------------------- */
.grille-seo { display: grid; gap: clamp(2.25rem, 4vw, 4rem); }
.grille-seo h3 { margin-bottom: 0.8em; }
.grille-seo p { color: var(--texte-clair); }

.avertissement {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-size: 0.95rem;
  color: var(--texte-clair) !important;
}
.avertissement strong { display: block; margin-bottom: 0.3rem; }

@media (min-width: 52rem) { .grille-seo { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
   15. LE TARIF
   --------------------------------------------------------------------- */
.tarifs { display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-items: start; }

.tarif {
  padding: clamp(1.85rem, 3.5vw, 2.75rem);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--sable);
}
.tarif--creation { background: var(--nuit); color: var(--nuit-texte); border-color: var(--nuit); }
.tarif--creation .tarif__quoi { color: var(--or); }
.tarif--creation .tarif__prix { color: var(--nuit-texte); }
.tarif--creation .tarif__quand { color: var(--nuit-douce); }
.tarif--creation .liste-coches li::before { border-color: var(--or); }
.tarif--creation .fin { color: var(--nuit-douce); }

.tarif__quoi {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-clair);
  margin-bottom: 1.1rem;
}
.tarif__prix {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--encre);
  line-height: 1;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  flex-wrap: wrap;
}
.tarif__chiffre { font-size: clamp(3rem, 2.1rem + 3.6vw, 4.6rem); letter-spacing: -0.02em; }
.tarif__unite { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.tarif__periode {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--texte-clair);
  letter-spacing: 0;
}
/* Le « HT ». Il se lit sans se disputer le chiffre : même corps que la
   périodicité, et la même teinte secondaire sur chacun des deux fonds. */
.tarif__ht {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--texte-clair);
  /* La gouttière du prix vaut 0,18em du CHIFFRE, c'est-à-dire trois fois
     rien à côté de l'euro : sans ce retrait, on lit « €HT ». */
  margin-left: 0.28em;
}
.tarif--creation .tarif__ht { color: var(--nuit-douce); }
.tarif__quand {
  font-size: 0.95rem;
  color: var(--texte-clair);
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--filet);
}
.tarif--creation .tarif__quand { border-color: var(--nuit-filet); }
.tarif__note {
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filet);
  font-size: 0.92rem;
  color: var(--texte-clair);
}

@media (min-width: 52rem) { .tarifs { grid-template-columns: 1fr 1fr; } }

/* LA PRÉCISION QUI TIENT AU CHIFFRE. « À la création », « Sans
   engagement. Site cédé après 24 mois » : ce n'est pas une note de bas
   de page, c'est la moitié de l'information. Elle se lit donc à l'encre
   pleine, sous le nombre, et jamais en gris de mention. */
.tarif__quand--fort { color: var(--encre); font-weight: 500; }
.tarif--creation .tarif__quand--fort { color: var(--nuit-texte); }
/* LA PHRASE QUI SUIT LA PRÉCISION. Ce qu'on emporte en arrêtant avant
   24 mois se dit sous le libellé, dans la teinte des mentions : c'est
   une explication, pas une condition en petits caractères — d'où sa
   place à l'intérieur du même bloc, au-dessus du filet. */
.tarif__precision {
  display: block; margin-top: 0.5rem;
  /* D'un quart plus petite : trois phrases au corps du libellé pesaient
     plus lourd que le prix qu'elles précisent. */
  font-size: 0.75em;
  font-weight: 400; color: var(--texte-clair);
}

/* ---------------------------------------------------------------------
   15 bis. LES DEUX FAÇONS DE RÉGLER
   ---------------------------------------------------------------------
   UN CONTRÔLE SEGMENTÉ, ET RIEN QUI RESSEMBLE À UNE GAMME. Pas de
   bascule à pastille, pas de dégradé, pas de « recommandé » : deux
   libellés dans un même cadre, dont un seul est allumé. Ce sont deux
   radios véritables — le clavier, les flèches et les lecteurs d'écran
   n'ont alors rien à apprendre, et l'état sélectionné se dit tout seul.

   SANS SCRIPT, LE CONTRÔLE N'EXISTE PAS. `data-js`, posé par le script
   sur le bloc, est la seule chose qui l'affiche : un sélecteur qui ne
   sélectionne rien serait pire que son absence. Les deux états restent
   alors l'un sous l'autre, chacun nommé. C'est la règle du menu.
   --------------------------------------------------------------------- */
.reglement { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.reglement__choix {
  display: inline-flex; gap: 2px;
  margin: 0; padding: 3px; border: 1px solid var(--filet);
  border-radius: var(--rayon); background: var(--sable);
}
.reglement__option { position: relative; display: block; }
/* La radio ne se voit pas, elle n'est pas retirée pour autant : masquée
   par `display: none`, elle sortirait de la tabulation et le contrôle
   redeviendrait un décor cliquable. */
.reglement__option input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.reglement__option span {
  display: block; padding: 0.6rem 1.15rem;
  border-radius: var(--rayon);
  font-size: 0.95rem; color: var(--texte-clair);
  cursor: pointer; text-align: center;
  transition: background-color 130ms ease, color 130ms ease;
}
.reglement__option input:checked + span {
  background: var(--fond); color: var(--encre); font-weight: 500;
  box-shadow: 0 0 0 1px var(--filet);
}
.reglement__option input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (hover: hover) {
  .reglement__option input:not(:checked):hover + span { color: var(--encre); }
}
/* SOUS 520 px, LES DEUX LIBELLÉS NE TIENNENT PAS CÔTE À CÔTE. Vingt-deux
   caractères par bouton : à deux, ils débordent d'un téléphone. Ils
   passent l'un sous l'autre, pleine largeur — la zone tactile y gagne ce
   que la ligne y perd. */
@media (max-width: 520px) {
  .reglement__choix { display: flex; flex-direction: column; width: 100%; }
}

[data-reglement][data-js] .tarif__etat { display: none; }
[data-reglement][data-js][data-mode="creation"] .tarif__etat[data-mode="creation"],
[data-reglement][data-js][data-mode="mensuel"]  .tarif__etat[data-mode="mensuel"] { display: block; }
[data-reglement][data-js] .tarif__mode { display: none; }

/* L'ÉTAT SANS SCRIPT : les deux l'un sous l'autre, chacun annoncé par
   son nom. */
[data-reglement]:not([data-js]) .reglement__choix { display: none; }
[data-reglement]:not([data-js]) .tarif__mode {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-clair); margin-bottom: 0.6rem;
}
[data-reglement]:not([data-js]) .tarif--creation .tarif__mode { color: var(--or); }

/* LE CHANGEMENT D'ÉTAT SE VOIT SANS SE MONTRER. Un fondu de 140 ms, et
   rien d'autre : pas de chiffre qui roule, pas de glissement. */
@media (prefers-reduced-motion: no-preference) {
  [data-reglement][data-js] .tarif__etat { animation: reglement-fondu 140ms ease-out; }
}
@keyframes reglement-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   16. LA COMPARAISON
   --------------------------------------------------------------------- */
.comparaison { display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-items: start; }
.comparaison article {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--nuit-filet);
  border-radius: var(--rayon);
}

.comparaison h3 { font-size: 1.3rem; margin-bottom: 0.5em; }
.comparaison__resume {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--nuit-texte);
  padding-bottom: 1.35rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--nuit-filet);
}
.comparaison li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  color: var(--nuit-douce);
}
.comparaison li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 1px;
  background: var(--or);
}
.comparaison__cout {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--nuit-filet);
  font-size: 0.92rem;
  color: var(--nuit-douce);
}
.comparaison__cout span {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.35rem;
}

/* LA CARTE CLAIRE — ses surcharges viennent APRÈS celles ci-dessus, et
   c'est nécessaire : à spécificité égale, c'est l'ordre du fichier qui
   tranche. Déclarées avant, elles perdaient toutes, et le texte de la
   seule carte qui compte s'affichait en gris pâle sur fond sable. */
.comparaison--nous {
  background: var(--nuit-texte);
  color: var(--nuit);
  border-color: var(--nuit-texte);
}
.comparaison--nous h3,
.comparaison--nous .comparaison__resume { color: var(--nuit); }
.comparaison--nous .comparaison__resume { border-bottom-color: rgb(27 24 19 / 20%); }
.comparaison--nous li { color: #3A342B; }
.comparaison--nous li::before { background: var(--accent); }
.comparaison--nous .comparaison__cout {
  border-top-color: rgb(27 24 19 / 20%);
  color: #3A342B;
}
.comparaison--nous .comparaison__cout span { color: var(--accent); }

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

/* ---------------------------------------------------------------------
   17. LA FAQ
   --------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--filet); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--filet); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
  font-weight: 500;
  color: var(--encre);
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

/* Le signe : un plus qui devient un moins. Deux traits, pas d'image. */
.faq summary::after {
  content: '';
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35em;
  background:
    linear-gradient(var(--accent-clair), var(--accent-clair)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent-clair), var(--accent-clair)) center / 1px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;
  transform: rotate(180deg);
}

.faq__reponse {
  padding-bottom: 1.5rem;
  max-width: 44em;
}
.faq__reponse p { color: var(--texte-clair); font-size: 0.99rem; }

/* ---------------------------------------------------------------------
   18. LE FORMULAIRE
   --------------------------------------------------------------------- */
.section--final { background: var(--sable-fonce); }

.formulaire { display: grid; gap: 1.5rem; }

.champ { display: grid; gap: 0.45rem; }
.champ label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--encre);
}
.champ__facultatif {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--texte-clair);
  font-style: italic;
  margin-left: 0.4rem;
}
.champ__aide {
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--texte-clair);
  margin: 0;
}

.champ input[type="text"],
.champ input[type="email"],
.champ textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.champ textarea { resize: vertical; min-height: 3rem; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(59 74 56 / 12%);
}
.champ input::placeholder,
.champ textarea::placeholder { color: #9C9486; }

.champ[data-invalide] input,
.champ[data-invalide] textarea { border-color: #A5432E; }

.champ--consentement {
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.25rem;
}
.champ--consentement input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.champ--consentement label { font-weight: 400; font-size: 0.88rem; line-height: 1.5; color: var(--texte-clair); }

.formulaire__erreur {
  margin: 0;
  padding: 0.85rem 1rem;
  background: #F6E7E2;
  border-left: 2px solid #A5432E;
  border-radius: var(--rayon);
  font-size: 0.92rem;
  color: #7A3020;
}

.formulaire button { justify-self: start; margin-top: 0.5rem; }

.formulaire__pied {
  font-size: 0.9rem;
  color: var(--texte-clair);
  margin: 0;
}
.formulaire__pied a { color: var(--encre); }

.formulaire__merci {
  padding: clamp(1.85rem, 4vw, 2.75rem);
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.formulaire__merci h3 { margin-bottom: 0.4em; }
.formulaire__merci p { color: var(--texte-clair); margin: 0; }

/* ---------------------------------------------------------------------
   19. LES PAGES ANNEXES

   Mentions légales, confidentialité, page de retour du formulaire. Elles
   réemploient tout le vocabulaire de la page principale et n'ajoutent
   que ces trois règles.

   ELLES SONT DES CLASSES, ET NON DES ATTRIBUTS « style= ». La politique
   de sécurité du site déclare `style-src 'self'` : un style écrit dans
   la balise est un style EN LIGNE, et il est purement et simplement
   ignoré par le navigateur. La marge n'aurait pas été posée, et la page
   de retour du formulaire se serait collée en haut de l'écran — sans
   erreur visible ailleurs que dans la console.
   --------------------------------------------------------------------- */
.retour { margin-top: 3rem; }

/* Sur une page annexe, les intertitres n'ont pas à peser autant que sur
   la page de vente : il n'y a qu'un seul niveau, et le lecteur cherche
   un paragraphe précis plutôt qu'un rythme. */
.annexe__corps h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  margin-top: 2.4em;
  margin-bottom: 0.7em;
}
.annexe__corps h2:first-of-type { margin-top: 1.6em; }
.annexe__corps p,
.annexe__corps li { color: var(--texte-clair); }
.annexe__corps .section__chapo { color: var(--texte); }

.page-reponse {
  min-height: 70vh;
  display: grid;
  place-items: center;
}

.pied--mince { padding-block: 2.5rem; }
.pied--mince .pied__bas { border: 0; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------
   20. LE PIED
   --------------------------------------------------------------------- */
.pied {
  background: var(--nuit);
  color: var(--nuit-douce);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: 0.92rem;
}
.pied__haut {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--nuit-filet);
}
.pied__marque {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--nuit-texte);
  margin-bottom: 0.5rem;
}
.pied__phrase { max-width: 32em; margin: 0; }

/* La phrase du pied tient sur une seule ligne. Elle demande environ 725px, les
   32em de réserve n'en donnent que 471. Le pied est en pleine largeur du bloc :
   la place est là dès 54rem, avec une cinquantaine de pixels de marge. En
   dessous on la laisse revenir à la ligne. Même geste que .note-forte--une-ligne. */
@media (min-width: 54rem) {
  .pied__phrase--une-ligne { max-width: none; text-wrap: nowrap; }
}

.pied__colonnes { display: grid; gap: 2.25rem; }
.pied__colonnes h2 {
  font-family: 'Geist', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1rem;
}
.pied__colonnes li { margin-bottom: 0.55rem; }
.pied__colonnes a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pied__colonnes a:hover { color: var(--nuit-texte); border-bottom-color: var(--nuit-filet); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--nuit-filet);
  font-size: 0.83rem;
}

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