/* ==========================================================================
   PAGE D'ACCUEIL
   Les compositions alternent volontairement : deux colonnes inégales avec
   photo débordante, bande dense, bandeau pleine largeur, grille de prix.
   Un enchaînement de blocs identiques donnerait une page qui se lit comme
   un gabarit et non comme une mise en page.
   ========================================================================== */

/* --- Ouverture ----------------------------------------------------------- */

.ouverture { position: relative; background: var(--fond); }

.ouverture__grille {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: var(--gouttiere);
  max-inline-size: calc(var(--contenu-max) + 8rem);
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .ouverture__grille {
    /* La grille prend toute la largeur de l'écran ; c'est le retrait de
       gauche qui réaligne le texte sur la grille du site. Borner le
       conteneur puis tenter de faire déborder l'image ne marche pas : la
       photo s'arrêterait à la gouttière comme le reste. */
    max-inline-size: none;
    /* La colonne de texte suit la largeur de la fenêtre au lieu d'être
       plafonnée à 30 rem : fixe, elle paraissait d'autant plus étroite que
       l'écran était large, la photo absorbant seule tout le gain.

       40 % est la largeur à laquelle le titre passe de quatre lignes à
       trois : mesuré, il bascule entre 504 et 576 px. En deçà, « Le terrain
       où » ne tient plus sur une ligne et le titre se recasse.

       Le plafond de 48 rem ne reprend la main qu'au-delà de 1920 px, pour
       qu'un écran de cette taille tienne encore la proportion. Le chapô
       garde sa propre mesure de 40 caractères : l'élargissement profite au
       titre, pas à la longueur des lignes à lire. */
    grid-template-columns: minmax(0, min(40vw, 48rem)) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-inline-start: max(var(--gouttiere), (100% - 80rem) / 2 + var(--gouttiere));
    padding-inline-end: 0;
  }
}

.ouverture__titre {
  /* Taille propre au hero, et non le jeton --t-4xl : celui-ci atteint son
     plafond dès 900 px de fenêtre, si bien qu'entre 1280 et 1440 le titre
     ne bougeait plus alors que sa colonne s'élargissait. La coupe changeait
     donc avec la largeur — quatre lignes ici, trois là.

     Indexée sur 6vw, la taille suit exactement la colonne, qui vaut 40vw :
     le rapport entre les deux reste constant, et le titre se coupe au même
     endroit à toutes les largeurs. */
  font-size: clamp(2.625rem, 6vw, 5.4rem);
  font-weight: var(--poids-massif);
  margin-block-end: var(--e-5);
  text-wrap: balance;
}

/* Le sur-titre vit dans le h1 (voir accueil.ejs) : il y reprend l'allure
   qu'il avait en paragraphe, sans hériter de la police ni de l'interligne
   du titre. */
.ouverture__titre .sur-titre {
  font-family: var(--police-texte);
  line-height: var(--inter-texte);
  word-spacing: normal;
  text-wrap: wrap;
}

.ouverture__chapo {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-inline-size: 40ch;
  margin-block-end: var(--e-6);
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-block-end: var(--e-4);
}

.ouverture__appui { font-size: var(--t-sm); color: var(--texte-tendre); }
.ouverture__appui a { font-weight: var(--poids-gras); white-space: nowrap; }

.ouverture__visuel { position: relative; }

.ouverture__photo {
  inline-size: 100%;
  block-size: clamp(16rem, 46vw, 30rem);
  object-fit: cover;
  border-radius: var(--r-lg);
}
@media (min-width: 64rem) {
  /* Coins carrés côté bord d'écran : un rayon des deux côtés donnerait une
     vignette flottante au lieu d'une image qui sort du cadre. */
  .ouverture__photo { border-start-end-radius: 0; border-end-end-radius: 0; }
}

/* --- Chiffres clés ---------------------------------------------------------
   Trois mesures sous les boutons d'ouverture. Chasse fixe : sans elle, les
   nombres dansent d'une valeur à l'autre dès qu'ils changent. */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5) var(--e-7);
  margin-block-start: var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: var(--trait) dashed var(--bordure);
}
.chiffre b {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--appui);
  font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: var(--t-sm); color: var(--texte-tendre); }

/* --- Blocs à deux colonnes ----------------------------------------------- */

.duo {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
.duo--encre { background: var(--fond-inverse); color: var(--texte-inverse); }

.duo__texte {
  padding-inline: var(--gouttiere);
  padding-block: var(--section-y);
  max-inline-size: 38rem;
  justify-self: end;
  inline-size: 100%;
}
.duo--photo-gauche .duo__texte { justify-self: start; }

.duo__photo {
  inline-size: 100%;
  block-size: clamp(15rem, 42vw, 34rem);
  object-fit: cover;
}

@media (max-width: 64rem) {
  /* Sur une colonne, la photo passe systématiquement en premier : elle
     annonce la section mieux qu'un titre isolé. */
  .duo { grid-template-columns: 1fr; gap: 0; }
  .duo__visuel { order: -1; }
  .duo__photo { block-size: clamp(13rem, 55vw, 20rem); }
  .duo__texte { padding-block: var(--e-7); max-inline-size: none; }
}

@media (min-width: 64rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .duo--photo-gauche .duo__visuel { order: -1; }
  .duo--photo-gauche .duo__photo { border-start-end-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
  .duo--photo-droite .duo__photo { border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); }
  .duo--photo-gauche .duo__texte { padding-inline-start: 0; }
  .duo--photo-droite .duo__texte { padding-inline-end: 0; }
}

.liste-cochee {
  display: grid;
  gap: var(--e-3);
  margin-block-start: var(--e-5);
}
.liste-cochee li {
  position: relative;
  padding-inline-start: 1.75rem;
  color: var(--texte-doux);
}
.liste-cochee li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  inline-size: .75rem;
  block-size: .75rem;
  border-radius: var(--r-plein);
  background: var(--c-turquoise-bord);
}

/* --- En-tête de section --------------------------------------------------- */

/* Titre à gauche, phrase d'appui à droite : la ligne d'en-tête occupe la
   largeur au lieu d'empiler deux blocs alignés à gauche. */
.entete-section {
  display: grid;
  gap: var(--e-3) var(--e-7);
  align-items: end;
  margin-block-end: var(--e-6);
}
@media (min-width: 56rem) {
  .entete-section { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.entete-section__appui {
  color: var(--texte-doux);
  max-inline-size: 46ch;
}
.section--alterne .entete-section__appui { color: var(--texte-doux); }

/* --- Scénarios de jeu ------------------------------------------------------ */

.scenarios {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.scenario {
  display: flex;
  flex-direction: column;
  padding: var(--e-5);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  transition: transform var(--duree-courte) var(--courbe-entree),
              box-shadow var(--duree-courte) var(--courbe-entree);
}
.scenario:hover { transform: translateY(-4px); box-shadow: var(--ombre-relief); }

/* L'icône est cadrée dans une tache, comme sur les autres sections : c'est
   ce qui relie les blocs entre eux malgré des mises en page différentes. */
.scenario__icone {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: var(--e-4);
  background: var(--accent);
  color: var(--texte);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: 58% 42% 46% 54% / 50% 56% 44% 50%;
  transition: rotate var(--duree-moyenne) var(--courbe-entree);
}
.scenario:hover .scenario__icone { rotate: -8deg; }
.scenario:nth-child(2) .scenario__icone { background: var(--c-turquoise); }
.scenario:nth-child(3) .scenario__icone { background: var(--marque); color: var(--texte-inverse); }
.scenario:nth-child(4) .scenario__icone { background: var(--fond); }

.scenario__icone .icone { inline-size: 1.6rem; block-size: 1.6rem; }

.scenario h2,
.scenario h3 { font-size: var(--t-md); margin-block-end: var(--e-2); }
.scenario__resume { color: var(--texte-doux); font-size: var(--t-sm); }

/* Durée et format d'équipe : les deux questions qu'on pose toujours après
   avoir lu le nom d'un scénario. */
.scenario__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-block-start: auto;
  padding-block-start: var(--e-4);
}
.scenario__meta span {
  padding: var(--e-1) var(--e-3);
  background: var(--fond-alterne);
  border-radius: var(--r-plein);
  font-size: var(--t-xs);
  font-weight: var(--poids-moyen);
  color: var(--texte-doux);
  white-space: nowrap;
}

/* --- Grille de tarifs ------------------------------------------------------ */

.tarifs {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
}

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-5);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-lg);
}

/* La formule mise en avant se distingue par l'ombre pleine et le ruban, pas
   par une couleur de fond : garder le même fond permet de comparer les
   prix sans que l'œil soit tiré par un aplat. */
.tarif--vedette { box-shadow: var(--ombre-relief); }

.tarif__ruban {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--e-5);
  translate: 0 -50%;
  padding: var(--e-1) var(--e-3);
  background: var(--marque);
  color: var(--texte-inverse);
  border-radius: var(--r-plein);
  font-size: var(--t-xs);
  font-weight: var(--poids-gras);
  letter-spacing: .04em;
  white-space: nowrap;
}

.tarif__nom { font-size: var(--t-lg); }
.tarif__argument {
  font-size: var(--t-sm);
  color: var(--texte-tendre);
  margin-block-end: var(--e-4);
  min-block-size: 2.7em;   /* aligne les prix malgré des arguments d'une ou deux lignes */
}

.tarif__prix {
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: clamp(2.4rem, 4.5vw, 3.1rem);
  line-height: .95;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.tarif__euro { font-size: .55em; }
.tarif__unite {
  font-size: var(--t-sm);
  color: var(--texte-tendre);
  margin-block-end: var(--e-4);
}

.tarif__chiffres {
  display: flex;
  gap: var(--e-4);
  padding-block: var(--e-3);
  margin-block-end: var(--e-4);
  border-block: 1px solid var(--bordure);
}

/* Dès que les cartes sont côte à côte, les durées tiennent sur une ligne :
   « environ 1 h » passait sinon sur deux lignes et décalait de 26 px toute
   la carte Éco, désalignant ses prestations de celles des voisines.
   Empilées, la contrainte n'a plus d'objet — et la lever évite de forcer
   un texte plus large que sa carte. */
@media (min-width: 34rem) {
  .tarif__chiffres dd { white-space: nowrap; }
}
.tarif__chiffres dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-capitale);
  color: var(--texte-tendre);
}
.tarif__chiffres dd {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-variant-numeric: tabular-nums;
}

.tarif__inclus { display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.tarif__inclus li { position: relative; padding-inline-start: 1.1em; }
.tarif__inclus li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .4em;
  block-size: .4em;
  border-radius: var(--r-plein);
  background: var(--c-turquoise-bord);
}

.tarif__options {
  display: grid;
  gap: var(--e-1);
  margin-block-start: var(--e-3);
  padding-block-start: var(--e-3);
  border-block-start: 1px solid var(--bordure);
  font-size: var(--t-sm);
  color: var(--accent-texte);
}

/* C'est la liste qui absorbe l'espace disponible, pas le bouton : ainsi
   les boutons s'alignent sur une même ligne d'une carte à l'autre, tout en
   gardant une marge fixe au-dessus quand la carte n'a rien à distribuer
   — sur une seule colonne, par exemple. Un padding sur le bouton
   l'aurait déformé au lieu de l'espacer. */
.tarif__inclus { flex: 1 1 auto; align-content: start; }
.tarif__action { margin-block-start: var(--e-5); align-self: stretch; }

/* --- Encart Gel Battle ---------------------------------------------------- */

.gel {
  display: grid;
  gap: var(--e-4) var(--e-7);
  align-items: center;
  margin-block-start: var(--e-6);
  padding: var(--e-6);
  background: var(--fond-menthe);
  border: var(--trait) solid var(--c-turquoise-bord);
  border-radius: var(--r-lg);
}
@media (min-width: 48rem) {
  .gel { grid-template-columns: minmax(0, 1fr) auto; }
}
.gel__titre {
  font-size: var(--t-xl);
  color: var(--appui);
  margin-block-end: var(--e-3);
}
.gel__detail { color: var(--texte-doux); max-inline-size: 58ch; }
.gel__prix { text-align: start; }
@media (min-width: 48rem) { .gel__prix { text-align: end; } }
.gel__prix b {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--accent-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gel__prix span { font-size: var(--t-sm); color: var(--texte-tendre); }

/* --- Offres --------------------------------------------------------------- */

.offres {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block-start: var(--e-5);
}
.offres li {
  padding: var(--e-4);
  background: var(--fond-alterne);
  border-radius: var(--r-md);
}
.offres h3 { font-size: var(--t-base); margin-block-end: var(--e-1); }
.offres p { font-size: var(--t-sm); color: var(--texte-doux); }

.note-tarifs {
  margin-block-start: var(--e-5);
  font-size: var(--t-sm);
  color: var(--texte-tendre);
}

/* --- Équipement (sur fond encre) ------------------------------------------ */

.equipement {
  display: grid;
  gap: var(--e-4) var(--e-6);
  margin-block-start: var(--e-6);
}
@media (min-width: 34rem) { .equipement { grid-template-columns: 1fr 1fr; } }
.equipement dt {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: var(--chasse-capitale);
  color: var(--appui);
  margin-block-end: var(--e-1);
}
.equipement dd { margin: 0; font-size: var(--t-sm); color: var(--texte-doux); }

/* --- Sur place ------------------------------------------------------------ */


/* --- Coulure entre sections --------------------------------------------- */

/* Le bloc porte la couleur de la section suivante ; le pseudo-élément
   redépose par-dessus la couleur de la section courante, découpée par le
   masque. Passer par un masque plutôt qu'une image de fond garde les deux
   couleurs sous le contrôle des jetons. */
.coulure {
  position: relative;
  block-size: 84px;
  margin-block-start: -1px;
  background: var(--fond-inverse);
}
.coulure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond);
  -webkit-mask: url("/img/coulure.svg") repeat-x left top / 720px 84px;
          mask: url("/img/coulure.svg") repeat-x left top / 720px 84px;
}

@media (max-width: 40rem) {
  .coulure { block-size: 52px; }
  .coulure::before {
    -webkit-mask-size: 400px 52px;
            mask-size: 400px 52px;
  }
}

/* --- Entrées de page intérieures ---------------------------------------- */

/* L'entrée porte le titre de la page ; la section qui suit apporte le
   contenu. Leur deux rembourrages s'additionnaient et creusaient un vide
   de 120 px que rien ne séparait — l'entrée n'en garde donc plus en bas. */
.entree {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}
.entree + .section { padding-block-start: var(--e-6); }

/* Filet de clôture de l'entrée.

   Les pages Modes de jeu et Questions en ont déjà un, mais par accident de
   composition : il appartient aux repères et au sommaire, qui le portent
   sur leur bord haut. Les pages dont l'entrée n'a rien après le chapô n'en
   avaient donc aucun, et le titre se terminait dans le vide.

   Posé en pseudo-élément du conteneur, il suit la largeur du contenu et
   traverse les deux colonnes quand l'entrée est composée en grille. */
.entree--filet .contenu::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  border-block-start: var(--trait) solid var(--c-encre);
  margin-block-start: var(--e-6);
}

/* Le titre et son chapô se partagent la largeur au lieu de s'empiler dans
   la colonne de gauche. Empilés, un titre court laissait près de 400 px de
   vide à droite sur un écran de 1440 : la page s'ouvrait sur un déséquilibre
   avant même d'avoir commencé.

   C'est le même partage que les en-têtes de section (.entete-section), à
   ceci près que les blocs qui suivent — repères, sommaire — reprennent
   toute la largeur.

   La règle ne s'applique qu'aux entrées qui ont un chapô : sans lui, la
   seconde colonne resterait vide et le titre se retrouverait tassé pour
   rien. Les pages légales sont dans ce cas. */
@media (min-width: 60rem) {
  .entree .contenu:has(.chapo) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--e-8);
    /* Alignement par le haut, non par le bas : un chapô de quatre lignes
       repoussait sinon le titre au bas de sa rangée, loin du sur-titre
       auquel il appartient. */
    align-items: start;
  }
  .entree .contenu:has(.chapo) > .sur-titre { grid-column: 1; grid-row: 1; }
  .entree .contenu:has(.chapo) > .titre-page {
    grid-column: 1;
    grid-row: 2;
    margin-block-end: 0;
  }
  .entree .contenu:has(.chapo) > .chapo {
    grid-column: 2;
    grid-row: 2;
    /* La mesure de lecture est déjà tenue par la colonne : la brider en
       plus laisserait un vide dans la colonne de droite. */
    max-inline-size: none;
    /* Le chapô descend à hauteur de la première ligne du titre : calé sur
       le haut de la rangée, il flotterait au-dessus des majuscules. */
    margin-block-start: .55em;
  }
  .entree .contenu:has(.chapo) > :not(.sur-titre):not(.titre-page):not(.chapo) {
    grid-column: 1 / -1;
  }
}

/* Sauf lorsque la section suivante change de fond : l'aplat a besoin de
   respirer autour de son contenu, sinon le texte semble collé au bord de
   la couleur. */
.entree + .section[class*="section--"],
.entree + .duo { padding-block-start: var(--section-y); }
.entree--centree { text-align: center; }
.entree--centree .chapo { margin-inline: auto; }

/* --- Pastilles ---------------------------------------------------------- */

.pastilles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pastilles li {
  padding: var(--e-2) var(--e-4);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-plein);
  font-weight: var(--poids-moyen);
  font-size: var(--t-sm);
}

/* --- Questions fréquentes ----------------------------------------------- */

.faq { display: grid; gap: var(--e-2); }
.faq__item {
  padding: var(--e-4) var(--e-5);
  background: var(--fond-alterne);
  border-radius: var(--r-md);
}
.faq__item summary {
  min-block-size: var(--cible);
  display: flex;
  align-items: center;
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-md);
  cursor: pointer;
}
.faq__item p { margin-block-start: var(--e-3); color: var(--texte-doux); }

/* --- Texte riche des pages légales -------------------------------------- */

.texte-riche { max-inline-size: var(--mesure-large); }
.texte-riche > * + * { margin-block-start: var(--e-4); }
.texte-riche h2 { font-size: var(--t-lg); margin-block-start: var(--e-6); }
.texte-riche ul { list-style: disc; padding-inline-start: 1.4em; }
.texte-riche li + li { margin-block-start: var(--e-2); }
.texte-riche strong { font-weight: var(--poids-gras); }

/* --- Deux colonnes ------------------------------------------------------ */

.deux-colonnes {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; }
}
.adresse-grande {
  font-style: normal;
  font-size: var(--t-md);
  line-height: var(--inter-dense);
  margin-block-end: var(--e-4);
}

.liens-secours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: center;
  margin-block-start: var(--e-5);
}

/* --- Page d'attente et connexion ---------------------------------------- */

/* La page tient dans l'écran quand elle le peut : en-tête, contenu centré
   verticalement, pied. dvh et non vh : la barre mobile fausse vh. */
.page-attente { display: flex; flex-direction: column; min-block-size: 100dvh; }

.attente__entete { border-block-end: var(--trait) solid var(--bordure-forte); }
.attente__entete-interieur {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  max-width: var(--contenu-max);
  margin-inline: auto;
  padding: var(--e-3) var(--gouttiere);
}
.attente__entete .logo { margin: 0; }

.attente {
  flex: 1;
  display: grid;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.attente__grille {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  max-width: var(--contenu-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (min-width: 64rem) {
  .attente__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-8); }
}
/* Une cellule de grille ne rétrécit pas sous la largeur de son contenu :
   sans ce plancher, un mot long du titre élargirait toute la page. */
.attente__texte,
.attente__visuel { min-inline-size: 0; }

.attente__titre {
  /* Plus mesuré que le hero de l'accueil : la colonne est plus large et
     le titre plus long, à 5,5vw il prenait quatre lignes. */
  font-size: clamp(2.4rem, 4.6vw, 4.25rem);
  font-weight: var(--poids-massif);
  margin-block-end: var(--e-5);
  text-wrap: balance;
}
.attente__chapo {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-inline-size: 44ch;
  margin-block-end: var(--e-6);
}
.attente__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block-end: var(--e-3); }
.attente__note { font-size: var(--t-sm); color: var(--texte-tendre); max-inline-size: 44ch; }
/* Les trois repères tiennent sur une ligne dans la colonne de texte : les
   écarts de la page des scénarios, pensés pour la pleine largeur, les
   faisaient passer à la ligne. */
.attente .reperes { gap: var(--e-4) var(--e-6); }
.attente .reperes b { font-size: var(--t-lg); }

.attente__photo {
  inline-size: 100%;
  block-size: clamp(14rem, 40vw, 28rem);
  object-fit: cover;
  border-radius: var(--r-lg);
}
/* L'adresse se pose sous la photo, comme une légende : c'est la seule
   information de lieu de la page, elle ne doit pas se chercher. */
.attente__adresse {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.attente__adresse b { display: block; color: var(--texte); }
.attente__adresse .icone { flex: none; margin-block-start: .15em; color: var(--appui); }

.attente__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-5);
  max-width: var(--contenu-max);
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--e-4) var(--gouttiere);
  border-block-start: 1px solid var(--bordure);
  font-size: var(--t-sm);
  color: var(--texte-tendre);
}
.attente__reseaux { display: flex; gap: var(--e-4); }
.attente__signature { margin-inline-start: auto; }

.connexion {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding: var(--e-5);
  background: var(--fond-alterne);
}
.connexion__carte {
  inline-size: min(26rem, 100%);
  padding: var(--e-6);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
}
.connexion__titre { font-size: var(--t-xl); margin-block-end: var(--e-5); }
.connexion__carte .bouton { inline-size: 100%; }
.connexion__retour { margin-block-start: var(--e-5); font-size: var(--t-sm); text-align: center; }


/* Le bloc final et le pied de page partagent le fond encre : sans ce filet,
   ils se lisent comme un seul aplat sombre de 700 px de haut. */
.final + .pied { border-block-start: var(--trait) solid var(--c-orange); }

/* ==========================================================================
   HABILLAGE — pastilles, icônes et animations
   Les animations restent courtes et déclenchées une seule fois : sur une
   page vitrine, un mouvement qui se rejoue à chaque passage fatigue.
   Toutes sont neutralisées par prefers-reduced-motion, via les jetons.
   ========================================================================== */

/* --- Introduction centrée --------------------------------------------------
   Variante d'en-tête réservée aux sections qui n'ont pas de contenu à
   aligner à droite. Elle évite que toutes les sections ouvrent sur la même
   ligne titre-à-gauche / phrase-à-droite. */

.intro-centree {
  max-inline-size: 44rem;
  margin-inline: auto;
  margin-block-end: var(--e-7);
  text-align: center;
}
/* Le sur-titre est en flex : c'est justify-content qui le centre, pas
   text-align. Le décalage compense la pastille, présente d'un seul côté. */
.intro-centree .sur-titre { justify-content: center; margin-inline-start: -.75rem; }
.intro-centree__chapo {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-inline-size: 52ch;
  margin-inline: auto;
}

/* --- Bande de réassurance --------------------------------------------------
   Quatre points alignés, sans carte ni fond propre : la section plus bas
   utilise déjà des cartes, et deux grilles de quatre cartes à la suite
   donnent l'impression de relire la même chose. Ici, ce sont des filets
   qui séparent. */

.reassurance__liste {
  display: grid;
  gap: var(--e-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.atout {
  padding-inline: var(--e-5);
  border-inline-start: var(--trait) solid var(--bordure);
}
/* Le premier filet tomberait sur le bord du conteneur : on le retire et on
   récupère le retrait, sinon la première colonne paraît décalée. */
.atout:first-child { border-inline-start: none; padding-inline-start: 0; }

@media (max-width: 52rem) {
  /* En deux colonnes, seul le filet de la colonne de droite a du sens. */
  .atout:nth-child(odd) { border-inline-start: none; padding-inline-start: 0; }
}
@media (max-width: 30rem) {
  .atout { border-inline-start: none; padding-inline: 0; }
}

.atout__pastille {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--e-4);
  color: var(--texte);
  border: var(--trait) solid var(--bordure-forte);
  /* La tache est ici évidée : pleine, elle ferait doublon avec celles des
     scénarios et du parcours, qui portent déjà cette écriture. */
  background: var(--fond);
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  transition: background var(--duree-courte) var(--courbe-entree),
              rotate var(--duree-moyenne) var(--courbe-entree);
}
.atout:hover .atout__pastille { background: var(--accent); rotate: -8deg; }
.atout:nth-child(2):hover .atout__pastille { background: var(--c-turquoise); }
.atout:nth-child(3):hover .atout__pastille { background: var(--marque); color: var(--texte-inverse); }

.atout h3 { font-size: var(--t-md); margin-block-end: var(--e-2); }
.atout p { font-size: var(--t-sm); color: var(--texte-doux); }

/* --- Parcours en quatre étapes ---------------------------------------------
   Toutes les mesures de la section découlent d'une seule : le diamètre de
   la tache. La trajectoire, les écarts et les retraits s'en déduisent, ce
   qui évite les décalages d'un demi-rem accumulés à la main. */

.parcours__liste {
  --tache: 3.75rem;
  --ecart-trace: .5rem;   /* respiration entre une tache et le trait */

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-6) var(--e-5);
}

/* Les jalons partagent les rangées de la grille parente : les titres, qu'ils
   tiennent sur une ou deux lignes, occupent alors la même hauteur partout et
   les paragraphes s'alignent d'une colonne à l'autre. Sans cela, chaque
   colonne empile ses blocs pour son propre compte. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 62rem) {
    .parcours__liste { grid-template-rows: auto auto auto; }
    .jalon {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      gap: var(--e-4) 0;
      align-content: start;
    }
  }
}

.jalon { position: relative; }

/* La trajectoire relie les étapes comme une bille passant d'un jalon au
   suivant. Elle est posée à la hauteur du centre de la tache, et laisse le
   même écart de part et d'autre — sans quoi elle paraît accrochée d'un
   seul côté. */
.jalon::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--tache) / 2 - var(--trait-epais) / 2);
  inset-inline-start: calc(var(--tache) + var(--ecart-trace));
  inset-inline-end: calc((var(--e-5) - var(--ecart-trace)) * -1);
  block-size: 0;
  border-block-start: var(--trait-epais) dashed var(--c-orange-bord);
}
.jalon:last-child::after { display: none; }

.jalon__tache {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--tache);
  block-size: var(--tache);
  background: var(--marque);
  color: var(--texte-inverse);
  border: var(--trait) solid var(--bordure-forte);
  /* Déformation franche et propre à chaque tache : au diamètre où elles
     s'affichent, des écarts de quelques pour cent se liraient encore
     comme des cercles, et quatre formes identiques feraient des pastilles. */
  border-radius: 62% 38% 44% 56% / 58% 40% 60% 42%;
  rotate: -6deg;
}
.jalon:nth-child(2) .jalon__tache { border-radius: 38% 62% 58% 42% / 40% 62% 38% 60%; rotate: 7deg; }
.jalon:nth-child(3) .jalon__tache { border-radius: 55% 45% 36% 64% / 62% 36% 64% 38%; rotate: -10deg; }
.jalon:nth-child(4) .jalon__tache { border-radius: 42% 58% 62% 38% / 36% 60% 40% 64%; rotate: 5deg; }

/* L'icône est remise d'aplomb dans une tache inclinée. */
.jalon__tache .icone {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  rotate: 6deg;
}
.jalon:nth-child(2) .jalon__tache .icone { rotate: -7deg; }
.jalon:nth-child(3) .jalon__tache .icone { rotate: 10deg; }
.jalon:nth-child(4) .jalon__tache .icone { rotate: -5deg; }

/* Le rang passe en badge : il numérote la séquence sans disputer la place
   à l'icône. Décalé vers l'extérieur, il reste lisible sur toutes les
   déformations de tache. */
.jalon__rang {
  position: absolute;
  inset-block-start: -.55rem;
  inset-inline-start: -.55rem;
  display: grid;
  place-items: center;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  background: var(--fond);
  color: var(--texte);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-plein);
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-sm);
  line-height: 1;
  rotate: 6deg;
}
.jalon:nth-child(2) .jalon__rang { rotate: -7deg; }
.jalon:nth-child(3) .jalon__rang { rotate: 10deg; }
.jalon:nth-child(4) .jalon__rang { rotate: -5deg; }

.jalon h3 {
  font-size: var(--t-md);
  /* Sans subgrid, la marge assure seule l'écart ; avec, c'est le gap de la
     grille qui s'en charge et la marge est neutralisée plus bas. */
  margin-block: var(--e-4) var(--e-2);
}
.jalon p { color: var(--texte-doux); font-size: var(--t-sm); }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 62rem) {
    .jalon h3 { margin-block: 0; }
  }
}

@media (max-width: 62rem) {
  /* En colonne, la trajectoire bascule à la verticale plutôt que de
     disparaître : sans elle, quatre blocs empilés ne se lisent plus comme
     une séquence. Elle franchit la gouttière pour rejoindre la tache
     suivante, d'où la hauteur calculée sur le row-gap. */
  .parcours__liste { gap: var(--e-5); }

  .jalon {
    padding-inline-start: calc(var(--tache) + var(--e-4));
    min-block-size: var(--tache);
  }
  .jalon__tache { position: absolute; inset-block-start: 0; inset-inline-start: 0; }

  .jalon::after {
    inset-block: calc(var(--tache) + var(--ecart-trace)) auto;
    inset-inline: calc(var(--tache) / 2 - var(--trait-epais) / 2) auto;
    inline-size: 0;
    block-size: calc(100% - var(--tache) + var(--e-5) - var(--ecart-trace) * 2);
    border-block-start: none;
    border-inline-start: var(--trait-epais) dashed var(--c-orange-bord);
  }
  .jalon h3 { margin-block-start: 0; }
}

/* --- Panneau des commodités ------------------------------------------------
   Un seul bloc, comme le panneau affiché à l'entrée d'un terrain. Six
   cartes en grille donnaient à des commodités le même poids qu'aux
   formules, et prenaient la forme que prend n'importe quelle liste dont on
   n'a pas décidé la hiérarchie. */

.panneau {
  margin-inline: auto;
  background: var(--fond);
  border: var(--trait-epais) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  overflow: hidden;
  /* Très légère bascule : assez pour que l'objet paraisse posé, assez peu
     pour que le texte reste confortable à lire. */
  rotate: -.4deg;
}

.panneau__bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--accent);
  border-block-end: var(--trait-epais) solid var(--bordure-forte);
}
.panneau__titre {
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-lg);
  letter-spacing: var(--chasse-titre);
}
.panneau__lieu {
  font-size: var(--t-sm);
  font-weight: var(--poids-gras);
  letter-spacing: var(--chasse-capitale);
  text-transform: uppercase;
}

.panneau__liste {
  display: grid;
  gap: 0;
  padding: var(--e-2) var(--e-5);
}
@media (min-width: 40rem) {
  .panneau__liste { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
}

.panneau__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding-block: var(--e-4);
  border-block-end: 1px dashed var(--bordure);
}
/* Sur deux colonnes, les deux dernières lignes ferment le bloc : leur
   filet doublerait la bordure du panneau. */
.panneau__liste li:last-child { border-block-end: none; }
@media (min-width: 40rem) {
  .panneau__liste li:nth-last-child(-n+2) { border-block-end: none; }
}

.panneau__liste .icone {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  margin-block-start: .15rem;
  color: var(--appui);
}
.panneau__liste b {
  display: block;
  font-weight: var(--poids-gras);
  font-size: var(--t-base);
}
.panneau__liste i {
  display: block;
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--texte-tendre);
}

.panneau__note {
  padding: var(--e-4) var(--e-5);
  background: var(--fond-alterne);
  border-block-start: 1px solid var(--bordure);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}

/* --- Questions ------------------------------------------------------------ */

.questions {
  display: grid;
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 62rem) {
  /* L'introduction reste visible pendant qu'on parcourt les questions :
     c'est là que se trouve le lien vers la page complète. */
  .questions { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--e-7); }
  .questions__intro { position: sticky; top: 6rem; }
}
.questions__intro .chapo { margin-block-end: var(--e-5); }

/* Sur la page dédiée, la colonne de gauche ne reprend pas le titre — il est
   déjà en tête de page — mais porte le renvoi au téléphone. */
.questions__appui {
  color: var(--texte-doux);
  margin-block-end: var(--e-5);
}
.questions__appui a { font-weight: var(--poids-gras); white-space: nowrap; }

.questions__liste { display: grid; gap: var(--e-3); }

.question {
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.question[open] { box-shadow: var(--ombre-relief); }

.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-block-size: var(--cible);
  padding: var(--e-4) var(--e-5);
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-md);
  cursor: pointer;
  list-style: none;   /* le triangle natif ferait doublon avec le signe + */
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--accent-texte); }

.question__signe {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  background: var(--accent);
  color: var(--texte);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-plein);
  transition: rotate var(--duree-courte) var(--courbe-entree),
              background var(--duree-courte) var(--courbe-entree);
}
/* Le signe pivote d'un huitième de tour : le + devient un ×, ce qui dit
   « refermer » sans changer d'icône. */
.question[open] .question__signe { rotate: 135deg; background: var(--marque); color: var(--texte-inverse); }

/* L'enveloppe est ce que le script anime. overflow caché pour que le texte
   ne déborde pas pendant que la hauteur se réduit ; le retrait est porté
   par le paragraphe et non par elle, sinon il se replierait aussi. */
.question__corps { overflow: hidden; }
.question__corps p {
  padding: 0 var(--e-5) var(--e-5);
  color: var(--texte-doux);
  max-inline-size: 68ch;
}

/* --- Occasions : l'ardoise -------------------------------------------------
   Nom à gauche, avantage tarifaire à droite, reliés par des points de
   conduite. C'est le tarif qui départage ces quatre cas : il doit
   s'aligner et se comparer, ce qu'une grille de pavés ne permet pas. */

.ardoise {
  display: grid;
  gap: var(--e-5);
  align-items: stretch;
}
@media (min-width: 56rem) {
  .ardoise { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--e-7); }
}

.ardoise__visuel { display: grid; }
.ardoise__photo {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: clamp(12rem, 26vw, 20rem);
  object-fit: cover;
  /* Les visages occupent le tiers supérieur de la photo : centrer le
     recadrage sur la hauteur couperait les têtes. */
  object-position: center 32%;
  border: var(--trait-epais) solid var(--bordure-forte);
  border-radius: var(--r-lg);
}

@media (max-width: 56rem) {
  /* En une colonne, la photo n'a plus de liste dont épouser la hauteur.
     Un rapport proche de l'original évite de la recadrer en bandeau, ce
     qui reviendrait au défaut que le format portrait corrige. */
  .ardoise__photo {
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: 3 / 4;
    max-block-size: 24rem;
  }
  /* Elle passe aussi sous la liste : placée avant, une photo en portrait
     occupe la moitié de l'écran et repousse ce qu'on vient lire. */
  .ardoise__visuel { order: 2; }
}

.ardoise__liste { display: grid; align-content: center; }

.ardoise__ligne {
  position: relative;
  padding-block: var(--e-4);
  border-block-end: 1px solid var(--bordure);
}
/* Le décalage porte sur le contenu, pas sur le retrait de la ligne :
   animer un padding recalcule la mise en page à chaque image, alors qu'une
   translation reste sur le compositeur. La bordure ne bouge pas non plus,
   ce qui garde la liste alignée pendant le mouvement. */
.ardoise__ligne > * {
  transition: translate var(--duree-survol) var(--courbe-douce);
}
.ardoise__ligne:first-child { padding-block-start: 0; }
.ardoise__ligne:last-child { border-block-end: none; padding-block-end: 0; }
/* La ligne se décale à l'approche : elle signale qu'elle est cliquable
   sans qu'on ait à poser un cadre autour. */
@media (min-width: 56rem) {
  .ardoise__ligne:hover > *,
  .ardoise__ligne:focus-within > * { translate: var(--e-3) 0; }
}

.ardoise__ligne > a {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--texte);
}
/* Le lien couvre toute la ligne, détail et appel à l'action compris :
   viser trois mots sur une ligne de cette largeur serait inutilement
   précis. */
.ardoise__ligne > a::after { content: ""; position: absolute; inset: 0; }

.ardoise__icone {
  /* Sans flex: none, l'icône se laisse comprimer jusqu'à disparaître dès
     que la ligne manque de place — ce qui arrive en colonne étroite. */
  flex: none;
  align-self: center;
  color: var(--appui);
  transition: color var(--duree-survol) var(--courbe-douce);
}
.ardoise__icone .icone { inline-size: 1.4rem; block-size: 1.4rem; }

.ardoise__nom {
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-lg);
  white-space: nowrap;
  transition: color var(--duree-survol) var(--courbe-douce);
}

/* Points de conduite : ils relient le nom au tarif sans imposer de colonne
   fixe et s'étirent seuls quand le nom est court. La couleur de bordure
   courante est trop pâle pour un pointillé, d'où la teinte plus soutenue. */
.ardoise__points {
  flex: 1;
  min-inline-size: var(--e-4);
  border-block-end: 2px dotted var(--c-encre-tendre);
  opacity: .45;
  translate: 0 -.25em;
}

.ardoise__prix {
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-md);
  color: var(--accent-texte);
  white-space: nowrap;
  padding-inline: var(--e-3);
  padding-block: var(--e-1);
  background: var(--fond);
  border: var(--trait) solid var(--accent-bord);
  border-radius: var(--r-plein);
  transition: background var(--duree-survol) var(--courbe-douce),
              color var(--duree-survol) var(--courbe-douce);
}

.ardoise__detail {
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin-block-start: var(--e-2);
  max-inline-size: 54ch;
}

/* L'appel à l'action reste discret : c'est la ligne entière qui est
   cliquable, il ne fait que nommer la destination. */
.ardoise__action {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-block-start: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--poids-gras);
  color: var(--accent-texte);
}
.ardoise__action .icone { transition: translate var(--duree-survol) var(--courbe-douce); }

.ardoise__ligne:hover .ardoise__nom,
.ardoise__ligne:hover .ardoise__icone { color: var(--accent-texte); }
.ardoise__ligne:hover .ardoise__action .icone { translate: .35rem 0; }
.ardoise__ligne:hover .ardoise__prix {
  background: var(--accent);
  color: var(--texte);
}
/* Le focus clavier doit produire le même retour que le survol, sinon la
   ligne active ne se distingue pas au clavier. */
.ardoise__ligne:focus-within .ardoise__nom { color: var(--accent-texte); }

@media (max-width: 40rem) {
  /* En étroit, les points de conduite se réduisent à deux ou trois points
     coincés entre le nom et le tarif : ils ne relient plus rien. Le tarif
     passe alors sous le nom, aligné à gauche comme le reste de la ligne. */
  .ardoise__ligne > a { flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
  .ardoise__points { display: none; }
  .ardoise__nom { white-space: normal; }
  .ardoise__prix { font-size: var(--t-sm); }
}

.ardoise__conclusion {
  margin-block-start: var(--e-6);
  padding-block-start: var(--e-4);
  border-block-start: var(--trait) dashed var(--bordure);
  font-size: var(--t-sm);
  color: var(--texte-tendre);
}

/* --- Sur place : panneau et pêle-mêle --------------------------------------
   Le panneau garde une largeur de lecture, les tirages prennent le reste de
   la grille étendue. */
.surplace {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}
@media (min-width: 62rem) {
  .surplace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-7); }
}

/* Trois tirages posés de biais. Les inclinaisons sont propres à chaque vue :
   une valeur unique répétée ferait motif, pas pêle-mêle. */

.pelemele {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
  padding-block: var(--e-3);
}
.pelemele__vue {
  margin: 0;
  padding: var(--e-2) var(--e-2) var(--e-3);
  background: var(--fond);
  /* Filet clair plutôt qu'un trait d'encre : sur trois tirages voisins, la
     bordure noire du panneau se répétait trois fois et alourdissait tout le
     bloc. Ici c'est le fond blanc du cadre qui détache la photo. */
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  /* Deux ombres empilées, dont la colorée à décalage nul : elle est déjà
     là, cachée sous le cadre. Le survol ne fait que l'en sortir.

     Passer directement d'une ombre floue à une ombre pleine colorée
     obligeait le navigateur à interpoler flou, décalage et couleur en même
     temps : la couleur surgissait au lieu de glisser. */
  box-shadow: var(--ombre-carte), 0 0 0 var(--c-orange);
  transition: rotate var(--duree-tirage) var(--courbe-douce),
              translate var(--duree-tirage) var(--courbe-douce),
              box-shadow var(--duree-tirage) var(--courbe-douce),
              border-color var(--duree-tirage) var(--courbe-douce);
}
.pelemele__vue:nth-child(1) { rotate: -2.5deg; }
.pelemele__vue:nth-child(2) { rotate: 1.8deg; margin-block-start: var(--e-5); }
/* La troisième occupe les deux colonnes : trois tirages sur une grille de
   deux laisseraient un vide en bas à droite. */
.pelemele__vue:nth-child(3) { rotate: 1.2deg; grid-column: span 2; margin-block-start: calc(var(--e-4) * -1); }
/* Chaque tirage a sa teinte, posée dès le repos avec un décalage nul :
   ainsi seul le décalage s'anime, et l'ombre paraît glisser de derrière
   le cadre plutôt que d'apparaître. */
.pelemele__vue:nth-child(2) { box-shadow: var(--ombre-carte), 0 0 0 var(--c-turquoise); }
.pelemele__vue:nth-child(3) { box-shadow: var(--ombre-carte), 0 0 0 var(--marque); }

/* Au survol, le tirage se redresse, se soulève d'un cheveu vers le haut à
   gauche et laisse sortir son ombre en bas à droite — le même geste que
   l'ombre pleine du panneau, mais en couleur. Le léger décalage inverse
   fait lire le mouvement comme un soulèvement et non comme un glissement. */
.pelemele__vue:hover {
  rotate: 0deg;
  translate: -2px -2px;
  border-color: var(--accent-bord);
  box-shadow: var(--ombre-carte), 9px 9px 0 var(--c-orange);
}
.pelemele__vue:nth-child(2):hover {
  border-color: var(--c-turquoise-bord);
  box-shadow: var(--ombre-carte), 9px 9px 0 var(--c-turquoise);
}
.pelemele__vue:nth-child(3):hover {
  border-color: var(--marque);
  box-shadow: var(--ombre-carte), 9px 9px 0 var(--marque);
}

.pelemele__photo {
  inline-size: 100%;
  block-size: clamp(8rem, 15vw, 11rem);
  object-fit: cover;
  border-radius: 2px;
}
.pelemele__vue:nth-child(3) .pelemele__photo { block-size: clamp(7rem, 12vw, 9rem); }
.pelemele__vue figcaption {
  margin-block-start: var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--poids-gras);
  text-align: center;
  color: var(--texte-doux);
}



/* --- Appel final : la carte flottante ---------------------------------------
   La carte descend sur le pied de page. Le chevauchement remplace la
   rupture nette d'un aplat clair à un aplat sombre : c'est un objet qui
   fait la transition, pas une frontière. */

.final {
  position: relative;
  /* Au-dessus du pied, qui vient après dans le flux et le recouvrirait. */
  z-index: var(--z-contenu);
  padding-block-start: var(--section-y);
}

.appel-carte {
  /* Le débordement est repris par le retrait haut du pied : les deux
     valeurs vont de pair, changer l'une oblige à changer l'autre. */
  margin-block-end: calc(var(--debord-carte) * -1);
  padding: var(--e-7) var(--e-6);
  background: var(--fond);
  border: var(--trait-epais) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 var(--c-orange);
  text-align: center;
}

/* Le sur-titre est en flex : c'est justify-content qui le centre, pas
   text-align. Le décalage compense la pastille, présente d'un seul côté. */
.appel-carte .sur-titre { justify-content: center; margin-inline-start: -.75rem; }

.appel-carte__titre {
  font-size: var(--t-2xl);
  font-weight: var(--poids-massif);
  margin-block-end: var(--e-4);
}
.appel-carte__texte {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-inline-size: 44ch;
  margin-inline: auto;
  margin-block-end: var(--e-6);
}
.appel-carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  margin-block-end: var(--e-5);
}
.appel-carte__adresse {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte-tendre);
}

@media (max-width: 40rem) {
  .appel-carte { padding: var(--e-6) var(--e-5); }
}

/* --- Carte tarif de l'ouverture --------------------------------------------
   Un objet utile plutôt qu'un décor : le prix d'appel, l'âge et le nombre
   de joueurs, que rien d'autre ne porte dans l'ouverture. Posée à cheval
   sur le bord gauche de la photo, elle mord sur la colonne de texte, ce
   qui relie les deux moitiés de la composition. */

.carte-tarif {
  position: absolute;
  inset-block-end: var(--e-5);
  inset-inline-start: calc(var(--e-6) * -1);
  inline-size: min(15rem, 60%);
  padding: var(--e-5);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  text-align: start;
}
.carte-tarif__intro {
  font-size: var(--t-xs);
  letter-spacing: var(--chasse-capitale);
  text-transform: uppercase;
  color: var(--texte-tendre);
}
.carte-tarif__prix {
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--accent-texte);
  margin-block: var(--e-1) var(--e-3);
}
.carte-tarif__prix small {
  display: block;
  font-family: var(--police-texte);
  font-weight: var(--poids-normal);
  font-size: var(--t-xs);
  color: var(--texte-tendre);
  margin-block-start: var(--e-1);
}
.carte-tarif__points {
  display: grid;
  gap: var(--e-1);
  font-size: var(--t-xs);
  color: var(--texte-doux);
  padding-block-end: var(--e-4);
}
.carte-tarif__points li { position: relative; padding-inline-start: .9em; }
.carte-tarif__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .5em;
  inline-size: .35em;
  block-size: .35em;
  border-radius: var(--r-plein);
  background: var(--c-turquoise-bord);
}
.carte-tarif__action { inline-size: 100%; font-size: var(--t-sm); padding-inline: var(--e-3); }

@media (max-width: 64rem) {
  .carte-tarif { inset-inline-start: var(--e-4); inset-block-end: var(--e-4); }
}

/* Sur un téléphone, la carte est plus haute que la photo : 284 px mesurés
   contre 256 px. Posée en absolu, elle la recouvrait donc entièrement et
   débordait par le haut sur les chiffres clés. Aucun réglage d'écart n'y
   change rien — c'est le contenu qui ne tient pas.

   Elle repasse dans le flux, sous la photo, en remontant juste assez pour
   rester solidaire d'elle. Rendue à toute la largeur, ses points et son
   bouton cessent de se couper en deux lignes, et elle y gagne en hauteur. */
@media (max-width: 47.99rem) {
  .carte-tarif {
    position: static;
    inline-size: auto;
    margin: calc(var(--e-6) * -1) var(--e-4) 0;
  }
}


/* ==========================================================================
   PAGES À FORMULAIRE — réservation et contact
   ========================================================================== */

/* Deux colonnes inégales : le formulaire tient la largeur utile, la colonne
   d'appui reste lisible sans lui disputer l'attention. Elle passe dessous
   avant que les champs ne deviennent trop étroits pour être remplis. */
.formulaire-page {
  display: grid;
  gap: var(--e-7);
  align-items: start;
}
@media (min-width: 60rem) {
  .formulaire-page {
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .85fr);
    gap: var(--e-8);
  }
  /* L'appui suit la lecture d'un formulaire long sans repartir en haut. */
  .formulaire-page__appui { position: sticky; top: calc(var(--e-9) + var(--e-4)); }
}

/* Un élément de grille prend par défaut la largeur minimale de son contenu :
   sans cette remise à zéro, un long libellé ou une zone de saisie large
   pousse la colonne au-delà de la part qui lui est accordée. */
.formulaire-page__principal { min-inline-size: 0; }

/* Le formulaire ne prend sa marge haute que s'il suit un texte. En tête de
   colonne — sur la page de réservation — elle le décalait de 32 px sous le
   premier encart de la colonne voisine. */
.formulaire { margin-block-start: var(--e-6); }
.formulaire-page__principal > .formulaire:first-child,
.formulaire-page__principal > .message:first-child + .formulaire { margin-block-start: 0; }

.formulaire__groupe {
  border: none;
  padding: 0;
  margin: 0 0 var(--e-7);
}
.formulaire__legende {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--poids-gras);
  letter-spacing: var(--chasse-titre);
  padding: 0 0 var(--e-4);
}

/* Les paires se séparent tôt : deux champs côte à côte sous 30rem donnent
   des zones de saisie où le texte défile au lieu de tenir. */
.formulaire__paire { display: grid; gap: 0 var(--e-4); }
@media (min-width: 34rem) {
  .formulaire__paire { grid-template-columns: 1fr 1fr; }
}

/* Hauteur fixée plutôt que minimale : un champ de date, une liste
   déroulante et un champ texte ne se rembourrent pas de la même façon, et
   la ligne « date / heure » affichait 56 px contre 53. L'écart est faible
   mais l'œil suit la base des champs, qui ne s'alignait plus. */
.champ input:not([type="checkbox"]):not([type="radio"]),
.champ select { block-size: 3.375rem; }

.champ__note { font-weight: var(--poids-normal); color: var(--texte-doux); }

/* Ces deux textes appartiennent aux champs qu'ils commentent : les brider
   à la mesure de lecture (38 caractères) les réduisait à la moitié de la
   largeur des champs, et la colonne semblait se rétrécir en descendant. */
.formulaire__aide,
.formulaire__mention {
  font-size: var(--t-sm);
  color: var(--texte-doux);
  max-width: var(--mesure-large);
}
.formulaire__aide {
  /* Rattaché au dernier champ du groupe, dont il commente la contrainte. */
  margin-block-start: calc(var(--e-2) * -1);
}
.formulaire__mention {
  margin-block: var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--bordure);
}

.formulaire__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
}
.formulaire__appui { font-size: var(--t-sm); color: var(--texte-doux); }

/* Champ piège. Déporté hors du cadre plutôt que masqué : `display: none`
   est un signal que les robots à jour contournent, tandis qu'un champ
   présent dans le flux mais invisible se fait remplir. La position absolue
   l'empêche de réserver de la place. */
.piege {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Encarts d'appui ----------------------------------------------------- */

.encart {
  background: var(--fond-abricot);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-5);
  margin-block-end: var(--e-6);
}
.encart:last-child { margin-block-end: 0; }
.encart--sobre { background: var(--fond-alterne); box-shadow: none; }

.encart__titre {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
  margin-block-end: var(--e-4);
}

/* Numéros posés dans leur propre colonne plutôt que dans un retrait de
   liste : le retrait décalait le texte du titre de l'encart et de la note
   qui le suit, alors que les trois appartiennent au même bloc. */
.encart__etapes {
  display: grid;
  gap: var(--e-3);
  padding-inline-start: 0;
  margin-block-end: var(--e-5);
  counter-reset: etape;
}
.encart__etapes li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--e-3);
  font-size: var(--t-sm);
  list-style: none;
}
.encart__etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  color: var(--accent-texte);
}

.encart__horaires,
.encart__liens {
  list-style: none;
  display: grid;
  gap: var(--e-2);
  margin-block-end: var(--e-4);
  font-size: var(--t-sm);
}

.encart__tarifs {
  list-style: none;
  display: grid;
  gap: var(--e-2);
  margin-block-end: var(--e-4);
}
.encart__tarifs li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-sm);
  padding-block-end: var(--e-2);
  border-block-end: 1px dotted var(--bordure);
}
.encart__tarifs li:last-child { border-block-end: none; padding-block-end: 0; }
.encart__tarifs b { font-family: var(--police-titre); }

.encart__note { font-size: var(--t-sm); color: var(--texte-doux); }
.encart__manquant {
  font-size: var(--t-sm);
  color: var(--c-erreur);
  background: var(--c-erreur-fond);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  margin-block-end: var(--e-3);
}

/* --- Fiche de réservation ------------------------------------------------ */

.fiche {
  background: var(--fond);
  border: var(--trait-epais) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-6);
  margin-block-start: var(--e-5);
}

.fiche__etat {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--c-succes-fond);
  color: var(--c-succes);
  font-weight: var(--poids-gras);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-plein);
  margin-block-end: var(--e-5);
}

.fiche__titre {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--poids-massif);
  letter-spacing: var(--chasse-titre);
  margin-block-end: var(--e-5);
}

.fiche__lignes { display: grid; gap: var(--e-3); margin-block-end: var(--e-4); }
.fiche__lignes > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  /* Points de conduite : l'œil relie l'intitulé à sa valeur sans qu'un
     filet plein vienne découper la fiche en tableau. */
  border-block-end: 1px dotted var(--bordure);
  padding-block-end: var(--e-2);
}
.fiche__lignes dt { color: var(--texte-doux); }
.fiche__lignes dd { font-weight: var(--poids-moyen); text-align: end; }

.fiche__total {
  border-block-end: none !important;
  border-block-start: var(--trait) solid var(--c-encre);
  padding-block-start: var(--e-3);
  margin-block-start: var(--e-2);
}
.fiche__total dt { color: var(--texte); font-weight: var(--poids-gras); }
.fiche__total dd {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--poids-massif);
  color: var(--accent-texte);
}

.fiche__mention,
.fiche__suite { font-size: var(--t-sm); color: var(--texte-doux); }
.fiche__mention { margin-block-end: var(--e-6); }

.fiche__lignes--sobres { font-size: var(--t-sm); margin-block-end: var(--e-5); }
.fiche__suite { margin-block-end: var(--e-5); }

.fiche__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --- Page contact : les trois voies -------------------------------------- */

.joindre {
  list-style: none;
  display: grid;
  gap: var(--e-5);
}
@media (min-width: 48rem) {
  .joindre { grid-template-columns: repeat(3, 1fr); }
}

.joindre__voie {
  background: var(--fond);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre-relief);
}
.joindre__voie h2 {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
  margin-block: var(--e-4) var(--e-2);
}

.joindre__pastille {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: var(--fond-menthe);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-plein);
}
.joindre__pastille .icone { inline-size: 1.35rem; block-size: 1.35rem; }

.joindre__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
  margin-block-end: var(--e-2);
  /* Une adresse électronique longue casse la carte sur mobile si rien ne
     l'autorise à se couper. */
  overflow-wrap: anywhere;
}
.joindre__adresse { font-size: var(--t-base); font-style: normal; line-height: var(--inter-texte); }
.joindre__note { font-size: var(--t-sm); color: var(--texte-doux); }

/* --- Page contact : l'itinéraire ----------------------------------------- */

.chemin {
  display: grid;
  gap: var(--e-3);
  padding-inline-start: var(--e-5);
  margin-block: var(--e-5);
}
/* Même raison que pour .encart__etapes. */
.chemin li { display: list-item; }
.chemin__note {
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin-block-end: var(--e-5);
}
.chemin__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --- Impression ----------------------------------------------------------
   Seule la fiche de réservation mérite le papier. Tout le reste est masqué
   plutôt que réduit : une page imprimée qui reprend l'en-tête, la navigation
   et le pied gaspille une feuille avant d'arriver à l'information. */
@media print {
  body > *:not(main),
  main > *:not(.section),
  .formulaire-page__appui,
  .fiche__actions { display: none !important; }

  .fiche {
    border: 1px solid var(--c-encre);
    box-shadow: none;
    padding: 0;
  }
  .fiche__etat { background: none; padding-inline: 0; }

  /* Le fond du papier est déjà blanc : le peindre gaspille de l'encre et
     grise le texte sur les imprimantes qui rendent les aplats. */
  .section { padding-block: 0; }
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Voir le commentaire correspondant dans main.js : un bouton qui ne peut
   rien déclencher vaut moins que pas de bouton. */
.no-js [data-imprimer] { display: none; }

/* --- Avis Google ---------------------------------------------------------
   Section absente tant qu'aucun avis n'est chargé : voir le partiel. Les
   styles restent ici pour qu'elle soit d'aplomb dès la première clé. */

.avis {
  list-style: none;
  display: grid;
  gap: var(--e-5);
  margin-block-end: var(--e-5);
}
@media (min-width: 46rem) { .avis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .avis { grid-template-columns: repeat(3, 1fr); } }

.avis__carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  background: var(--fond);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-5);
}

.avis__note {
  font-size: var(--t-3xl);
  color: var(--accent-texte);
}

.avis__etoiles {
  color: var(--accent-texte);
  font-size: var(--t-md);
  letter-spacing: .1em;
  line-height: 1;
}

.avis__texte {
  margin: 0;
  /* La citation prend la place qu'il faut pour que les signatures
     s'alignent d'une carte à l'autre, quelle que soit la longueur. */
  flex: 1;
}

.avis__signature {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  align-items: baseline;
  font-size: var(--t-sm);
  padding-block-start: var(--e-3);
  border-block-start: 1px dotted var(--bordure);
}
.avis__signature b { font-family: var(--police-titre); }
.avis__signature span { color: var(--texte-doux); }

.avis__source {
  font-size: var(--t-sm);
  color: var(--texte-doux);
  text-align: center;
}

/* ==========================================================================
   MODES DE JEU — composants propres à la page
   ========================================================================== */

/* --- Repères d'ouverture ------------------------------------------------- */

.reperes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-7);
  margin-block-start: var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: var(--trait) solid var(--c-encre);
}
.reperes li { display: grid; gap: var(--e-1); }
.reperes b {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--poids-massif);
  letter-spacing: var(--chasse-titre);
  color: var(--appui);
}
.reperes span { font-size: var(--t-sm); color: var(--texte-doux); }

/* --- Fiches de scénario --------------------------------------------------
   Une fiche par ligne, et non la grille de cartes de l'accueil : cette page
   détaille là où l'accueil survole. Le rang à gauche, l'icône, le texte,
   puis les repères de jeu à droite. */

.modes { list-style: none; display: grid; gap: var(--e-5); }

.mode {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: var(--e-4) var(--e-5);
  background: var(--teinte);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-5);
  transition: translate var(--duree-survol) var(--courbe-douce),
              box-shadow var(--duree-survol) var(--courbe-douce);
}
@media (hover: hover) {
  .mode:hover {
    translate: 0 -3px;
    box-shadow: var(--ombre-relief-bas);
  }
}

/* Le rang est décoratif : il numérote une lecture, il ne porte pas
   d'information que le titre ne donne pas déjà. */
.mode__rang {
  font-family: var(--police-titre);
  font-size: var(--t-2xl);
  font-weight: var(--poids-massif);
  line-height: 1;
  color: var(--teinte-forte);
}

/* Chaque scénario porte sa teinte : la pastille, le numéro et les repères
   de jeu la reprennent. Quatre fiches blanches à la suite se lisaient comme
   une liste ; la couleur les distingue sans rien ajouter au contenu.

   Les trois teintes tournent, le quatrième scénario reprenant la première :
   c'est un motif, pas un manque — la charte n'a que trois pastels, et en
   inventer un quatrième pour la seule occasion l'aurait affaiblie. */
.mode {
  --teinte: var(--c-abricot);
  --teinte-forte: var(--c-orange-profond);
}
.mode:nth-child(3n + 2) {
  --teinte: var(--c-menthe);
  --teinte-forte: var(--c-turquoise-sombre);
}
.mode:nth-child(3n) {
  --teinte: var(--c-paille);
  --teinte-forte: var(--c-vermillon-sombre);
}

/* La pastille prend la teinte pleine, l'icône passe en clair : sur une
   carte déjà colorée, une pastille du même pastel ne se détacherait plus. */
.mode__icone {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex: none;
  background: var(--teinte-forte);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-plein);
}
.mode__icone .icone { color: var(--texte-inverse); }
.mode__icone .icone { inline-size: 1.5rem; block-size: 1.5rem; }

.mode__corps h2 {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--poids-gras);
  margin-block-end: var(--e-2);
}
.mode__corps p { max-width: var(--mesure); }

.mode__reperes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  grid-column: 1 / -1;
}
/* Les repères repassent sur le fond papier : c'est le seul moyen qu'ils
   ressortent d'une carte désormais teintée. */
.mode__reperes li {
  font-size: var(--t-sm);
  font-weight: var(--poids-moyen);
  padding: var(--e-1) var(--e-3);
  background: var(--fond);
  border: 1px solid var(--c-encre);
  border-radius: var(--r-plein);
}

@media (min-width: 52rem) {
  /* Les repères remontent sur la ligne du titre : à cette largeur, les
     laisser dessous laisse une bande vide sur toute la droite de la fiche. */
  .mode { grid-template-columns: auto auto 1fr auto; align-items: center; }
  .mode__reperes { grid-column: auto; flex-direction: column; align-items: flex-end; }
}

/* --- Bandeau photo -------------------------------------------------------
   La photo tient toute la largeur, la carte se pose dessus. Remplace le duo
   photo-texte, employé trois fois sur l'accueil et qui aurait fait de cette
   page un résumé de celle-là. */

.bandeau { position: relative; padding-block: var(--section-y); }

.bandeau__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bandeau__photo,
.bandeau__fond picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* Voile sombre : sans lui, la carte blanche flotte sur une photo claire et
   son ombre pleine disparaît. */
.bandeau__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-encre);
  opacity: .45;
}

.bandeau__carte {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  background: var(--fond);
  border: var(--trait-epais) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-6);
}
.bandeau__carte .titre-section { margin-block-end: var(--e-4); }

/* --- Pièces d'équipement ------------------------------------------------- */

.pieces {
  list-style: none;
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 40rem) { .pieces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pieces { grid-template-columns: repeat(4, 1fr); } }

.piece {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding-block-start: var(--e-4);
  border-block-start: var(--trait) solid var(--c-encre);
}
.piece b {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
}
.piece span { font-size: var(--t-sm); color: var(--texte-doux); }

/* --- Rappel de fin de page ----------------------------------------------- */

.rappel { text-align: center; }
.rappel .chapo { margin-inline: auto; }
.rappel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  margin-block-start: var(--e-6);
}

/* ==========================================================================
   FORMULES — comparatif
   ========================================================================== */

/* Le tableau défile horizontalement dans son propre cadre : à quatre
   colonnes, le faire tenir sur un téléphone rendrait les libellés
   illisibles. Le conteneur est focalisable pour que le défilement soit
   atteignable au clavier — un bloc défilant sans point de focus est
   inaccessible à qui n'utilise pas de souris. */
.comparatif {
  overflow-x: auto;
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-lg);
  background: var(--fond);
  box-shadow: var(--ombre-relief);
}

.comparatif table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: collapse;
}

.comparatif th,
.comparatif td {
  padding: var(--e-3) var(--e-4);
  text-align: center;
  border-block-end: 1px solid var(--bordure);
}
.comparatif tr:last-child th,
.comparatif tr:last-child td { border-block-end: none; }

.comparatif thead th {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
  background: var(--fond-paille);
  border-block-end: var(--trait) solid var(--c-encre);
}

/* La colonne des intitulés reste en place pendant le défilement : sans
   elle, on ne sait plus de quelle ligne on lit les valeurs. */
.comparatif tbody th,
.comparatif thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  text-align: start;
  font-weight: var(--poids-moyen);
  background: var(--fond);
  border-inline-end: var(--trait) solid var(--c-encre);
}
.comparatif thead th:first-child { background: var(--fond-paille); }

.comparatif__prix td b {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  color: var(--accent-texte);
}
.comparatif__prix td span {
  display: block;
  font-size: var(--t-xs);
  color: var(--texte-doux);
}

/* Le conteneur doit être un contexte de mise en page, pas un inline : le
   SVG à l'intérieur est un bloc, et un bloc dans un inline sort du flux
   des lignes — la coche se collait alors au bord gauche de sa cellule,
   à 48 px du centre, quand le tiret voisin restait centré. */
.comparatif__oui {
  display: inline-flex;
  color: var(--c-turquoise-sombre);
}
.comparatif__oui .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.comparatif__non { color: var(--texte-tendre); }

/* ==========================================================================
   QUESTIONS — sommaire et groupes
   ========================================================================== */

.sommaire {
  display: grid;
  gap: var(--e-3);
  margin-block-start: var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: var(--trait) solid var(--c-encre);
}
@media (min-width: 40rem) {
  .sommaire { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.sommaire a {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-block-size: var(--cible);
  padding: var(--e-3) var(--e-4);
  background: var(--fond);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-md);
  color: var(--texte);
  text-decoration: none;
  transition: translate var(--duree-survol) var(--courbe-douce),
              box-shadow var(--duree-survol) var(--courbe-douce);
  box-shadow: 0 0 0 var(--c-encre);
}
@media (hover: hover) {
  .sommaire a:hover { translate: 0 -2px; box-shadow: var(--ombre-relief); }
}
.sommaire b { font-family: var(--police-titre); font-weight: var(--poids-gras); }
.sommaire span { font-size: var(--t-sm); color: var(--texte-doux); }

.questions__entete { margin-block-end: var(--e-6); }
.questions__entete p { color: var(--texte-doux); max-width: var(--mesure); }

/* Une ancre visée depuis le sommaire ne doit pas passer sous l'en-tête
   collant : le titre du groupe se retrouverait masqué à l'arrivée. */
.section[id] { scroll-margin-block-start: var(--e-9); }

/* ==========================================================================
   CONTACT — le trajet
   ========================================================================== */

.trajet {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}
@media (min-width: 52rem) {
  .trajet { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--e-7); }
}

.trajet__depart {
  background: var(--fond);
  border: var(--trait-epais) solid var(--c-encre);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  padding: var(--e-5);
}
.trajet__etiquette {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-capitale);
  color: var(--texte-tendre);
  margin-block-end: var(--e-3);
}
.trajet__adresse {
  font-style: normal;
  line-height: var(--inter-texte);
  margin-block-end: var(--e-5);
}
.trajet__adresse b {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: var(--poids-gras);
  margin-block-end: var(--e-1);
}

/* Le bouton occupe toute la largeur de la carte : à côté d'une adresse
   courte, un bouton ajusté à son texte paraît posé de travers. */
.trajet__actions .bouton { inline-size: 100%; justify-content: center; }

.trajet__etapes { list-style: none; display: grid; gap: var(--e-5); }

/* Chaque étape porte le trait qui la relie à la suivante : c'est ce filet
   qui fait lire la liste comme une route et non comme une énumération. */
.trajet__etape {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}
.trajet__etape::before {
  content: "";
  position: absolute;
  inset-block: 2.5rem calc(var(--e-5) * -1);
  inset-inline-start: 1.25rem;
  inline-size: 2px;
  background: repeating-linear-gradient(
    var(--c-encre) 0 4px, transparent 4px 9px
  );
}
.trajet__etape:last-child::before { display: none; }

.trajet__rang {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  background: var(--fond);
  border: var(--trait) solid var(--c-encre);
  border-radius: var(--r-plein);
}
.trajet__etape p { padding-block-start: var(--e-2); max-width: var(--mesure); }

.trajet__note {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-sm);
  margin-block-start: var(--e-6);
  padding: var(--e-4);
  background: var(--fond);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--r-md);
}
.trajet__note .icone { flex: none; margin-block-start: .15em; }

/* --- Bloc de texte en deux colonnes, sans photo --------------------------
   Employé par la section sécurité de l'accueil depuis qu'elle a perdu son
   illustration : le client a signalé que le masque photographié n'était pas
   le sien, et lui substituer une autre image de banque aurait montré un
   second matériel qu'il n'a pas davantage.

   Le propos tient la colonne de gauche, la liste d'équipement la droite.
   Sans ce partage, un texte court laisserait la section se réduire à une
   bande maigre au milieu de la page. */
.duo-texte {
  display: grid;
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 56rem) {
  .duo-texte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-8);
  }
}
.duo-texte__propos { min-inline-size: 0; }