/* ==================================================================
 * Y0U — feuille de style unique. Version « galerie éditoriale » (3 sept. 2026).
 *
 * LA DIRECTION : blanc, calme, une seule famille de caractères serrée
 * (Manrope), une italique éditoriale (Instrument Serif) pour l'unique mot
 * accentué, le logo 3D de l'opérateur, ses deux couleurs en touches : le vert
 * pour les étiquettes et les coches, le rose pour les survols et la pastille de
 * prix. Deux bandes sombres seulement : le sommet de la page (l'avant / après
 * piloté par le défilement) et la fin (appel + pied).
 *
 * CE QU'ON NE FAIT PAS (règles scroll-craft, reprises à notre compte) :
 * grilles de cartes identiques, compteurs « 01 / 06 », texte en dégradé, faux
 * chiffres, bande défilante, halo de curseur, noir pur, gris plats.
 * ================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/polices/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/polices/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/polices/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/polices/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- *
 * Jetons — six rôles de couleur, un accent, jamais de noir pur
 * ---------------------------------------------------------------- */

:root {
  --fond: #ffffff;
  --fond-teinte: #f5f7f6; /* teinté vert, pas gris */
  --encre: #121316;
  --texte-2: #5d6763; /* secondaire teinté, pas gris plat */
  --filet: #e5e8e6;
  --filet-fort: #cfd4d1;

  --sombre: #101114;
  --sombre-2: #17181c;
  --clair-sur-sombre: #f4f5f4;
  --texte-2-sombre: #a4aaa7;
  --filet-sombre: rgba(244, 245, 244, 0.14);

  --vert: #68cf8e;
  --vert-fonce: #1f7d4f; /* 4,6:1 sur blanc */
  --rose: #d92a5b;

  --texte: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --italique: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --marge: clamp(1.15rem, 5vw, 3rem);
  --large: 76rem;
  --colonne: 46rem;
  --rayon: 18px;
  --rayon-petit: 10px;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Le survol : une arrivée qui dépasse légèrement sa cible puis se pose
     (ressort), un retour qui décélère sans rebond (sortie). C'est cet écart
     entre l'aller et le retour qui fait qu'un mouvement paraît vivant plutôt
     que mécanique. */
  --ressort: cubic-bezier(0.34, 1.32, 0.6, 1);
  --sortie: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duree: 0.9s;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-feature-settings: 'ss01', 'cv11';
}
/* Sur `html` seulement : posé aussi sur `body`, celui-ci devient sa propre
   boîte de défilement et l'en-tête collant s'y accroche au lieu de rester à
   l'écran (menu ouvert sans bouton pour le fermer, passé le premier écran). */
html.menu-ouvert {
  overflow: hidden;
}

/* Typographie : une famille, le tracking se resserre avec la taille. */
h1,
h2,
h3,
h4,
.pied-titre,
.sommaire-titre {
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
  font-weight: 700;
}
h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
h3 {
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.italique {
  font-family: var(--italique);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.08em;
  line-height: 1;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--filet-fort);
  transition: text-decoration-color 0.2s;
}
a:hover {
  text-decoration-color: var(--rose);
}
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--vert-fonce);
  outline-offset: 3px;
}
::selection {
  background: var(--vert);
  color: var(--encre);
}
.saut {
  position: absolute;
  left: -9999px;
}
.saut:focus {
  position: fixed;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--encre);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

.enveloppe {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 var(--marge);
  position: relative;
}
.enveloppe--large {
  max-width: var(--large);
}
.bloc {
  padding: clamp(4.5rem, 10vw, 8.5rem) 0;
}
.bloc--teinte {
  background: var(--fond-teinte);
}
.sombre {
  background: var(--sombre);
  color: var(--clair-sur-sombre);
}
.sombre .prose,
.sombre .fin {
  color: var(--texte-2-sombre);
}
.sombre a {
  text-decoration-color: var(--filet-sombre);
}
.sombre a:hover {
  text-decoration-color: var(--vert);
}

.surtitre {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 1.2rem;
}
.sombre .surtitre {
  color: var(--vert);
}
.prose {
  color: var(--texte-2);
  max-width: 60ch;
}
h2 + .prose {
  margin-top: 1.1rem;
  font-size: 1.12rem;
}
.fin {
  font-size: 0.86rem;
  color: var(--texte-2);
}
.entete-section {
  max-width: 58rem;
}

/* ---------------------------------------------------------------- *
 * Le fond vivant
 *
 * Trois voiles de couleur dérivent lentement derrière les sections claires.
 * Ils ne portent aucune information : `aria-hidden`, aucun événement de
 * pointeur, et ils s'arrêtent net en mouvement réduit.
 *
 * Deux règles tenues : on n'anime QUE la transformation (le compositeur s'en
 * charge, le processeur principal reste libre), et l'opacité reste assez basse
 * pour que le texte garde son contraste — un fond qu'on remarque est un fond
 * raté. Les sections teintées et sombres sont opaques : elles le masquent, et
 * la page respire par alternance.
 * ---------------------------------------------------------------- */

.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}
.fond i {
  --mx: 0vw;
  --my: 0vh;
  --ms: 1;
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  animation: derive var(--t) ease-in-out infinite alternate;
}
.fond i:nth-child(1) {
  --t: 31s;
  --mx: 7vw;
  --my: 5vh;
  --ms: 1.16;
  top: -22vw;
  left: -14vw;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle at 50% 50%, rgba(104, 207, 142, 0.22), rgba(104, 207, 142, 0) 68%);
}
.fond i:nth-child(2) {
  --t: 43s;
  --mx: -6vw;
  --my: 7vh;
  --ms: 1.22;
  top: 22vh;
  right: -20vw;
  width: 52vw;
  height: 52vw;
  animation-delay: -12s;
  background: radial-gradient(circle at 50% 50%, rgba(217, 42, 91, 0.12), rgba(217, 42, 91, 0) 66%);
}
.fond i:nth-child(3) {
  --t: 37s;
  --mx: 5vw;
  --my: -6vh;
  --ms: 1.1;
  bottom: -26vw;
  left: 18vw;
  width: 56vw;
  height: 56vw;
  animation-delay: -24s;
  background: radial-gradient(circle at 50% 50%, rgba(104, 207, 142, 0.16), rgba(104, 207, 142, 0) 70%);
}
@keyframes derive {
  to {
    transform: translate3d(var(--mx), var(--my), 0) scale(var(--ms));
  }
}
/* Le contenu passe devant : sans cela, un élément fixe posé après le flux
   recouvrirait le texte des sections transparentes. */
body > main,
body > footer {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fond i {
    animation: none;
  }
}

/* ---------------------------------------------------------------- *
 * Apparitions — sobres : 16 px, 900 ms
 * ---------------------------------------------------------------- */

html.js .revele {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .revele.vu {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .revele {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------- *
 * Rideau de chargement
 * ---------------------------------------------------------------- */

.rideau {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--sombre);
  display: grid;
  place-items: center;
  animation: rideau-sortie 0.8s cubic-bezier(0.7, 0, 0.2, 1) 1.25s forwards;
}
html:not(.rideau-actif) .rideau {
  display: none;
}
.rideau-logo {
  width: min(48vw, 18rem);
  animation: rideau-logo 1s var(--courbe) both;
}
.rideau-logo .logo {
  width: 100%;
  height: auto;
}
@keyframes rideau-logo {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rideau-sortie {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rideau {
    display: none;
  }
}

/* ---------------------------------------------------------------- *
 * En-tête — blanc, flottant
 * ---------------------------------------------------------------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.bandeau--colle {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--filet);
}
.bandeau-corps {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0.75rem var(--marge);
  display: flex;
  align-items: center;
  gap: 1rem 1.75rem;
  min-height: 4.5rem;
}
.marque {
  display: block;
  text-decoration: none;
  flex: none;
}
.logo {
  display: block;
  height: auto;
}
.logo--entete {
  height: 2.35rem;
  width: auto;
  transition: transform 0.35s var(--courbe);
}
.marque:hover .logo--entete {
  transform: translateY(-1px);
}
.bandeau-nav {
  margin-left: auto;
}
.bandeau-nav ul {
  display: flex;
  gap: 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.bandeau-nav a {
  color: var(--texte-2);
  text-decoration: none;
  transition: color 0.2s;
}
.bandeau-nav a:hover {
  color: var(--encre);
}
.pays {
  position: relative;
  font-size: 0.8rem;
}
.pays summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  color: var(--encre);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: border-color 0.2s;
}
.pays summary::-webkit-details-marker {
  display: none;
}
.pays summary:hover,
.pays[open] summary {
  border-color: var(--encre);
}
.pays ul {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 12rem;
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  padding: 0.35rem;
  box-shadow: 0 24px 60px -24px rgba(18, 19, 22, 0.35);
}
.pays ul {
  min-width: 15rem;
}
.pays-titre {
  padding: 0.5rem 0.75rem 0.45rem;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.pays li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  color: var(--encre);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.25s var(--sortie);
}
.pays li a em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.86em;
  color: var(--texte-2);
}
.pays li a:hover {
  background: var(--fond-teinte);
}
/* La version lue est marquée, jamais désactivée : on doit pouvoir y revenir
   d'un clic après s'être trompé de pays. */
.pays li a[aria-current] {
  background: var(--fond-teinte);
}
.pays li a[aria-current] span::before {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--vert-fonce);
}
.bandeau .bouton {
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
}

.burger {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  place-content: center;
  gap: 6px;
  flex: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.burger span {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.3s var(--courbe);
}
.burger[aria-expanded='true'] {
  background: var(--encre);
  border-color: var(--encre);
}
.burger[aria-expanded='true'] span {
  background: #fff;
}
.burger[aria-expanded='true'] span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.burger[aria-expanded='true'] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.menu-mobile {
  position: fixed;
  inset: 4.5rem 0 0 0;
  z-index: 39;
  background: var(--fond);
  overflow: auto;
  padding: 1.5rem var(--marge) 2.5rem;
}
.menu-mobile[hidden] {
  display: none;
}
.menu-mobile-liens li {
  border-bottom: 1px solid var(--filet);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--courbe), transform 0.5s var(--courbe);
  transition-delay: calc(60ms + var(--i, 0) * 60ms);
}
.menu-mobile[data-ouvert] .menu-mobile-liens li {
  opacity: 1;
  transform: none;
}
.menu-mobile-liens a {
  display: block;
  padding: 1.1rem 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 6.5vw, 2.3rem);
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--encre);
}
.menu-mobile-liens li:last-child a {
  color: var(--vert-fonce);
}
.menu-mobile-bas {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
}
.menu-mobile-pays {
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}
.menu-mobile-pays .pays-titre {
  padding: 0 0 0.35rem;
}
.menu-mobile-pays ul {
  display: grid;
  gap: 0.15rem;
}
.menu-mobile-pays a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: var(--rayon-petit);
  color: var(--encre);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
}
.menu-mobile-pays a em {
  font-style: normal;
  font-weight: 500;
  color: var(--texte-2);
  font-size: 0.9em;
}
.menu-mobile-pays a[aria-current] {
  background: var(--fond-teinte);
}
.menu-mobile-pays a[aria-current] span::before {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--vert-fonce);
}
@media (max-width: 62rem) {
  .bandeau-nav,
  .bandeau .pays {
    display: none;
  }
  .bandeau .bandeau-action {
    margin-left: auto;
    padding: 0.55rem 0.95rem;
    font-size: 0.84rem;
  }
  .burger {
    display: grid;
  }
}
@media (max-width: 22rem) {
  .bandeau .bandeau-action {
    display: none;
  }
  .burger {
    margin-left: auto;
  }
}

/* Sur la page sombre du choix de pays, l'en-tête suit. */
body:has(.page--sombre) .bandeau {
  background: rgba(16, 17, 20, 0.85);
  border-bottom-color: var(--filet-sombre);
}
body:has(.page--sombre) .burger {
  border-color: var(--filet-sombre);
}
body:has(.page--sombre) .burger span {
  background: var(--clair-sur-sombre);
}

/* ---------------------------------------------------------------- *
 * Boutons — pilules, encre ; le rose n'apparaît qu'au survol
 * ---------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.4s var(--sortie), background-color 0.35s var(--sortie), color 0.25s, border-color 0.25s,
    box-shadow 0.4s var(--sortie);
}
.bouton:hover {
  transform: translateY(-2px);
  text-decoration: none;
  transition-timing-function: var(--ressort);
}
.bouton:active {
  transform: translateY(0);
}
.bouton--plein {
  background: var(--encre);
  color: #fff;
}
.bouton--plein:hover {
  background: var(--rose);
  box-shadow: 0 14px 34px -14px rgba(217, 42, 91, 0.6);
}
.bouton--blanc {
  background: #fff;
  color: var(--encre);
}
.bouton--blanc:hover {
  background: var(--vert);
}
.bouton--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--filet-fort);
}
.bouton--contour:hover {
  border-color: var(--encre);
}
.sombre .bouton--contour {
  color: var(--clair-sur-sombre);
  border-color: var(--filet-sombre);
}
.sombre .bouton--contour:hover {
  border-color: var(--clair-sur-sombre);
}
.bouton--texte {
  background: transparent;
  color: var(--encre);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.bouton--texte:hover {
  transform: none;
}
.bouton--grand {
  padding: 1.05rem 1.75rem;
  font-size: 1.04rem;
}
.bouton--large {
  width: 100%;
}
.bouton[disabled] {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.pastille {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rose);
  background: rgba(217, 42, 91, 0.08);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- *
 * Hero — centré, blanc, puis la galerie en éventail
 * ---------------------------------------------------------------- */

.hero {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
  overflow: hidden;
}
.hero-texte {
  max-width: 60rem;
  text-align: center;
}
.hero-texte .surtitre {
  justify-content: center;
}
.hero h1 {
  margin: 0 auto;
}
.hero h1 .ligne {
  display: block;
  overflow: hidden;
  padding: 0 0.1em 0.12em;
  margin-bottom: -0.12em;
}
.hero h1 .ligne > span {
  display: block;
}
html.js .hero h1 .ligne > span {
  transform: translateY(105%);
  animation: monte 1s var(--courbe) forwards;
  animation-delay: calc(0.1s + var(--i, 0) * 0.12s);
}
html.rideau-actif .hero h1 .ligne > span {
  animation-delay: calc(1.5s + var(--i, 0) * 0.12s);
}
@keyframes monte {
  to {
    transform: translateY(0);
  }
}
.hero .accroche {
  margin: 1.4rem auto 0;
  font-size: 1.15rem;
  color: var(--texte-2);
  max-width: 44ch;
}
.hero .actions {
  justify-content: center;
  margin-top: 2rem;
}
html.js .hero .surtitre,
html.js .hero .accroche,
html.js .hero .actions {
  animation: apparait 1s var(--courbe) both;
  animation-delay: 0.45s;
}
html.rideau-actif .hero .surtitre,
html.rideau-actif .hero .accroche,
html.rideau-actif .hero .actions {
  animation-delay: 1.85s;
}
@keyframes apparait {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* La galerie : cinq pages en portrait, disposées en arc, la centrale devant.
   Chaque carte porte sa rotation et sa hauteur ; l'entrée les fait monter
   l'une après l'autre. Au survol, la carte se redresse. */
.eventail {
  --largeur: clamp(9.5rem, 17vw, 15rem);
  position: relative;
  height: calc(var(--largeur) * 1.62);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  max-width: var(--large);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  perspective: 1200px;
}
.carte {
  --rot: 0deg;
  --dx: 0px;
  --dy: 0px;
  --z: 3;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--largeur);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid rgba(18, 19, 22, 0.08);
  box-shadow: 0 30px 60px -30px rgba(18, 19, 22, 0.35), 0 10px 24px -14px rgba(18, 19, 22, 0.25);
  background: var(--fond-teinte);
  z-index: var(--z);
  /* Une seule transformation composée, pilotée par des variables : le survol
     et le pointeur n'ont plus qu'à changer un nombre, jamais à réécrire la
     règle — et donc jamais à perdre la position de la carte dans l'éventail. */
  transform: translateX(calc(-50% + var(--dx) + var(--px, 0px)))
    translateY(calc(var(--dy) + var(--lift, 0px) + var(--flotte, 0px)))
    rotate(calc(var(--rot) * var(--redresse, 1) + var(--incl, 0deg))) scale(var(--sc, 1));
  transform-origin: 50% 100%;
  transition: transform 0.62s var(--sortie), box-shadow 0.62s var(--sortie), opacity 0.45s var(--sortie),
    filter 0.45s var(--sortie);
}
.carte img {
  transition: transform 1.15s var(--sortie);
}
.carte picture,
.carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.carte:nth-child(1) { --dx: calc(var(--largeur) * -1.55); --dy: 34px; --rot: -13deg; --z: 1; }
.carte:nth-child(2) { --dx: calc(var(--largeur) * -0.8); --dy: 12px; --rot: -6.5deg; --z: 2; }
.carte:nth-child(3) { --dx: 0px; --dy: 0px; --rot: 0deg; --z: 3; }
.carte:nth-child(4) { --dx: calc(var(--largeur) * 0.8); --dy: 12px; --rot: 6.5deg; --z: 2; }
.carte:nth-child(5) { --dx: calc(var(--largeur) * 1.55); --dy: 34px; --rot: 13deg; --z: 1; }
.carte:hover {
  --lift: -24px;
  --redresse: 0;
  --sc: 1.045;
  z-index: 5;
  box-shadow: 0 46px 80px -34px rgba(18, 19, 22, 0.5), 0 14px 30px -18px rgba(18, 19, 22, 0.3);
  transition-duration: 0.55s;
  transition-timing-function: var(--ressort);
}
.carte:hover img {
  transform: scale(1.05);
}
/* Les voisines reculent : c'est le recul, plus que l'avancée, qui fait lire le
   geste. Flou léger, couleur retenue, un rien plus petites. */
.eventail:hover .carte:not(:hover) {
  --sc: 0.973;
  opacity: 0.6;
  filter: blur(1.6px) saturate(0.9);
}
/* `backwards` et non `both` : une animation qui remplit encore garde la main
   sur `transform` et ecrase la regle de survol — la carte se soulevait dans la
   feuille de style et jamais a l'ecran. L'etat final de l'animation etant
   exactement l'etat au repos, la rendre a la cascade ne se voit pas. */
html.js .carte {
  animation: carte-entre 1.1s var(--courbe) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.09s);
}
html.rideau-actif .carte {
  animation-delay: calc(1.75s + var(--i, 0) * 0.09s);
}
@keyframes carte-entre {
  from {
    opacity: 0;
    transform: translateX(calc(-50% + var(--dx))) translateY(calc(var(--dy) + 70px)) rotate(var(--rot)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(calc(-50% + var(--dx))) translateY(var(--dy)) rotate(var(--rot)) scale(1);
  }
}
.hero-legende {
  text-align: center;
  margin: 3.2rem auto 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-2);
  padding: 0 var(--marge) clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 44rem) {
  .eventail {
    --largeur: 42vw;
    height: calc(var(--largeur) * 1.5);
  }
  .carte:nth-child(1),
  .carte:nth-child(5) {
    display: none;
  }
  .carte:nth-child(2) { --dx: calc(var(--largeur) * -0.62); --rot: -7deg; }
  .carte:nth-child(4) { --dx: calc(var(--largeur) * 0.62); --rot: 7deg; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .ligne > span,
  html.js .hero .surtitre,
  html.js .hero .accroche,
  html.js .hero .actions,
  html.js .carte {
    animation: none;
    transform: none;
    opacity: 1;
  }
  html.js .carte {
    transform: translateX(calc(-50% + var(--dx))) translateY(var(--dy)) rotate(var(--rot));
  }
}

/* Les repères : une ligne calme, quatre faits, séparés par des filets. */
.reperes {
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.reperes-ligne {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reperes-ligne li {
  padding: 1.2rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texte-2);
  border-left: 1px solid var(--filet);
}
.reperes-ligne li:first-child {
  border-left: 0;
}
@media (max-width: 44rem) {
  .reperes-ligne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reperes-ligne li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }
  .reperes-ligne li:nth-child(4) {
    border-top: 1px solid var(--filet);
  }
}

/* ---------------------------------------------------------------- *
 * Prix — deux offres, séparées par un filet, pas de cartes
 * ---------------------------------------------------------------- */

.offres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 3rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.offre {
  padding: 2.25rem clamp(1.25rem, 3vw, 2.75rem) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  transition: background-color 0.6s var(--sortie);
}
.offre:hover {
  background: var(--fond-teinte);
}
.offre--vedette:hover {
  background: #eef2f0;
}
.offre + .offre {
  border-left: 1px solid var(--filet);
}
.offre--vedette {
  background: var(--fond-teinte);
}
.offre-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.offre h3 {
  font-size: 1.35rem;
}
.offre-etiquette {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  background: rgba(104, 207, 142, 0.16);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.offre-sous {
  color: var(--texte-2);
}
.offre-prix {
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.offre-prix span {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte-2);
}
.offre-echeance {
  font-weight: 600;
  color: var(--vert-fonce);
  font-size: 0.95rem;
}
.inclus li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.6rem;
  color: var(--texte-2);
  font-size: 0.97rem;
}
.inclus li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.95rem;
  width: 0.36rem;
  height: 0.62rem;
  border: solid var(--vert-fonce);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.offre .bouton {
  margin-top: auto;
}
.garantie-ligne {
  margin-top: 1.75rem;
  max-width: 62rem;
  color: var(--texte-2);
  font-size: 0.95rem;
}
.garantie-ligne b {
  color: var(--encre);
}
@media (max-width: 48rem) {
  .offres {
    grid-template-columns: 1fr;
  }
  .offre + .offre {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }
}

/* ---------------------------------------------------------------- *
 * Le sommet — avant / après piloté par le défilement
 * ---------------------------------------------------------------- */

.sommet-piste {
  --p: 0.5;
}
html.sommet-anime .sommet-piste {
  height: 240vh;
}
.sommet-scene {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vh, 6rem) 0;
}
html:not(.sommet-anime) .sommet-scene {
  position: static;
  min-height: 0;
  padding: clamp(4.5rem, 10vw, 8.5rem) 0;
}
.sommet-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.sommet-etat {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sommet-etat span {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--filet-sombre);
  color: var(--texte-2-sombre);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.sommet-piste:not(.sommet--fin) .etat-avant,
.sommet--fin .etat-apres {
  background: var(--clair-sur-sombre);
  color: var(--sombre);
  border-color: var(--clair-sur-sombre);
}
.sommet--fin .etat-apres {
  background: var(--vert);
  border-color: var(--vert);
}
.sommet-texte .fin {
  margin-top: 1.5rem;
}
.scrub {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--filet-sombre);
  background: var(--sombre-2);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.8);
}
.scrub picture,
.scrub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scrub-apres,
.scrub-avant {
  position: absolute;
  inset: 0;
}
.scrub-avant {
  clip-path: inset(0 0 0 calc(var(--p) * 100%));
  filter: saturate(0.8);
}
.scrub-trait {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--p) * 100%);
  width: 2px;
  margin-left: -1px;
  background: var(--clair-sur-sombre);
  box-shadow: 0 0 24px rgba(244, 245, 244, 0.5);
}
@media (max-width: 60rem) {
  .sommet-grille {
    grid-template-columns: 1fr;
    align-items: start;
  }
  html.sommet-anime .sommet-piste {
    height: 200vh;
  }
}

/* ---------------------------------------------------------------- *
 * Listes éditoriales — titre fixe à gauche, lignes à droite
 * ---------------------------------------------------------------- */

.grille-editoriale {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.colonne-fixe {
  position: sticky;
  top: 6rem;
}
.liste-editoriale {
  border-top: 1px solid var(--filet);
}
.liste-editoriale li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.4rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--filet);
}
.liste-editoriale li {
  transition: background-color 0.5s var(--sortie);
}
.liste-editoriale li:hover {
  background: linear-gradient(90deg, rgba(104, 207, 142, 0.07), rgba(104, 207, 142, 0));
}
.liste-editoriale h3 {
  font-size: 1.12rem;
}
.liste-editoriale p {
  color: var(--texte-2);
}
@media (max-width: 56rem) {
  .grille-editoriale {
    grid-template-columns: 1fr;
  }
  .colonne-fixe {
    position: static;
  }
  .liste-editoriale li {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- *
 * Comment ça marche — un chemin, trois points
 * ---------------------------------------------------------------- */

.chemin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}
.chemin::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.55rem;
  height: 1px;
  background: var(--filet-fort);
}
.chemin li {
  position: relative;
  padding-top: 2rem;
}
.chemin-point {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--fond-teinte);
  border: 2px solid var(--encre);
}
.chemin li:nth-child(2) .chemin-point {
  background: var(--vert);
  border-color: var(--vert);
}
.chemin li:nth-child(3) .chemin-point {
  background: var(--encre);
}
.chemin h3 {
  font-size: 1.25rem;
}
.chemin p {
  margin-top: 0.5rem;
  color: var(--texte-2);
}
@media (max-width: 56rem) {
  .chemin {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .chemin::before {
    top: 0;
    bottom: 0;
    left: 0.5rem;
    right: auto;
    width: 1px;
    height: auto;
  }
  .chemin li {
    padding: 0 0 0 2.25rem;
  }
}

/* ---------------------------------------------------------------- *
 * Conformité
 * ---------------------------------------------------------------- */

.conforme-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2.5rem 4rem;
  align-items: center;
}
.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.puces li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
}
.puces li {
  transition: transform 0.45s var(--sortie), border-color 0.45s var(--sortie);
}
.puces li:hover {
  transform: translateY(-2px);
  border-color: var(--filet-fort);
  transition-timing-function: var(--ressort);
}
.puces li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vert);
}
@media (max-width: 56rem) {
  .conforme-grille {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- *
 * Demande de maquette — le formulaire, sur fond teinté
 * ---------------------------------------------------------------- */

.demande-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.demande-texte {
  position: sticky;
  top: 6rem;
}
.etapes-mini {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.5rem;
  counter-reset: mini;
}
.etapes-mini li {
  counter-increment: mini;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  color: var(--texte-2);
  font-weight: 600;
}
.etapes-mini li::before {
  content: counter(mini) '.';
  color: var(--vert-fonce);
  font-variant-numeric: tabular-nums;
}
.demande {
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 30px 60px -45px rgba(18, 19, 22, 0.3);
}
.champs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.champ--large {
  grid-column: 1 / -1;
}
.champ label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.requis {
  color: var(--rose);
}
.champ input:not([type='checkbox']),
.champ textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 0.9rem;
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  color: var(--encre);
  font-size: 0.98rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.champ input::placeholder,
.champ textarea::placeholder {
  color: #9aa19d;
}
.champ input:not([type='checkbox']):focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(104, 207, 142, 0.25);
}
.champ input:disabled {
  opacity: 0.45;
}
.champ textarea {
  min-height: 6rem;
  resize: vertical;
}
.champ[data-erreur='true'] input,
.champ[data-erreur='true'] textarea {
  border-color: var(--rose);
}
.champ-erreur {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--rose);
}
.case,
.champ .case {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--texte-2);
  cursor: pointer;
  margin-top: 0.55rem;
  font-weight: 500;
}
.case input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--encre);
}
.consentement {
  margin: 1.4rem 0 1.25rem;
}
.consentement[data-erreur='true'] {
  color: var(--rose);
}
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-etat {
  margin-top: 1rem;
  font-weight: 600;
}
.form-etat--ok {
  padding: 1.1rem 1.2rem;
  border-radius: var(--rayon-petit);
  background: rgba(104, 207, 142, 0.16);
  color: var(--vert-fonce);
}
.form-secours {
  margin-top: 1rem;
}
@media (max-width: 60rem) {
  .demande-grille {
    grid-template-columns: 1fr;
  }
  .demande-texte {
    position: static;
  }
}
@media (max-width: 40rem) {
  .champs {
    grid-template-columns: 1fr;
  }
}

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

.faq {
  border-top: 1px solid var(--filet);
}
.q {
  border-bottom: 1px solid var(--filet);
}
.q summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.6rem 1.15rem 0;
  position: relative;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.q summary::-webkit-details-marker {
  display: none;
}
.q summary:hover {
  color: var(--vert-fonce);
}
.q summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 0.95rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--encre);
  transition: transform 0.25s var(--courbe), background-color 0.25s;
}
.q[open] summary::after {
  transform: rotate(45deg);
  background: var(--vert);
  border-color: var(--vert);
}
.q p {
  padding: 0 0 1.25rem;
  color: var(--texte-2);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- *
 * Appel final
 * ---------------------------------------------------------------- */

.appel {
  padding: clamp(5rem, 12vw, 10rem) 0;
  text-align: center;
}
.appel-corps {
  max-width: 54rem;
}
.appel h2 {
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  margin: 0 auto;
  letter-spacing: -0.035em;
}
.appel h2 .ligne {
  display: block;
}
.appel .prose {
  margin: 1.2rem auto 0;
  font-size: 1.15rem;
}
.appel .actions {
  justify-content: center;
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------------- *
 * Barre mobile
 * ---------------------------------------------------------------- */

.barre-achat {
  display: none;
}
@media (max-width: 44rem) {
  .barre-achat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 30;
    padding: 0.55rem 0.55rem 0.55rem 1.1rem;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--filet);
    color: var(--encre);
    border-radius: 999px;
    box-shadow: 0 16px 40px -16px rgba(18, 19, 22, 0.35);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    transform: translateY(130%);
    transition: transform 0.4s var(--courbe);
  }
  .barre-achat small {
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--texte-2);
  }
  .barre-achat .bouton {
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
  }
  .barre-achat--visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------- *
 * Pied de page — sombre
 * ---------------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--filet-sombre);
  padding: 3.5rem 0 3rem;
  font-size: 0.9rem;
  color: var(--texte-2-sombre);
}
.pied-grille {
  display: grid;
  gap: 2rem 2rem;
  grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
}
.pied-logo {
  display: block;
  width: 7rem;
  margin-bottom: 1rem;
}
.pied-societe {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.6;
}
.pied-titre {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 0.8rem;
}
.pied li {
  padding: 0.22rem 0;
}
.pied a {
  color: var(--texte-2-sombre);
  text-decoration: none;
}
.pied a:hover {
  color: var(--clair-sur-sombre);
  text-decoration: underline;
}
.pied-bas {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet-sombre);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.84rem;
}
.pied-bas p {
  max-width: 64ch;
}
@media (max-width: 62rem) {
  .pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pied-identite {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- *
 * Pages blanches : achat, merci, documents
 * ---------------------------------------------------------------- */

.page,
.doc {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem;
}
.page h1,
.doc h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
}
.colonnes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 58rem) {
  .colonnes {
    grid-template-columns: 1fr;
  }
}
.panneau {
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.panneau h2 {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  max-width: none;
}
.panneau > * + h2 {
  margin-top: 1.9rem;
}
.recap {
  position: sticky;
  top: 6rem;
  background: var(--fond-teinte);
}
.choix {
  display: grid;
  gap: 0.6rem;
}
.choix label {
  display: block;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.choix label:hover {
  border-color: var(--encre);
}
.choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choix label:has(input:checked) {
  border-color: var(--encre);
  box-shadow: inset 3px 0 0 var(--vert);
  background: var(--fond-teinte);
}
.choix label:has(input:focus-visible) {
  outline: 2px solid var(--vert-fonce);
  outline-offset: 2px;
}
.choix-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
}
.choix-tete em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.choix-detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.87rem;
  color: var(--texte-2);
  line-height: 1.5;
}
.page .consentement {
  color: var(--texte-2);
}
.recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--texte-2);
  border-bottom: 1px solid var(--filet);
}
.recap-ligne b {
  color: var(--encre);
  text-align: right;
}
.recap-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet-fort);
}
.recap-total b {
  font-size: 2rem;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.recap-echeances {
  margin-top: 0.9rem;
  padding: 0.8rem 0.95rem;
  background: rgba(104, 207, 142, 0.16);
  border-radius: var(--rayon-petit);
  font-size: 0.87rem;
  color: var(--texte-2);
}
.recap-echeances p + p {
  margin-top: 0.25rem;
}
.recap-echeances b {
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.recap .bouton {
  margin-top: 1.4rem;
}
.recap-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--texte-2);
  line-height: 1.5;
}
.echec {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--rose);
  background: rgba(217, 42, 91, 0.06);
  font-size: 0.88rem;
  color: var(--texte-2);
}
.sans-js {
  display: block;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  font-size: 0.88rem;
  color: var(--texte-2);
}
.suite {
  counter-reset: etape;
  margin-top: 2rem;
  border-top: 1px solid var(--filet);
}
.suite li {
  counter-increment: etape;
  position: relative;
  padding: 0.9rem 0 0.9rem 2.4rem;
  border-bottom: 1px solid var(--filet);
  color: var(--texte-2);
}
.suite li::before {
  content: counter(etape) '.';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--vert-fonce);
}
.doc-chapo {
  margin-top: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--filet);
  color: var(--texte-2);
  max-width: 62ch;
  font-size: 1.1rem;
}
.doc-grille {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}
.sommaire {
  position: sticky;
  top: 6rem;
  align-self: start;
  font-size: 0.86rem;
}
.sommaire-titre {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 0.7rem;
}
.sommaire li a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.6rem;
  margin-left: -0.6rem;
  color: var(--texte-2);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.sommaire li a:hover {
  color: var(--encre);
  border-color: var(--vert);
}
.doc-grille section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--filet);
}
.doc-grille section:first-child {
  padding-top: 0;
}
.doc-grille h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  max-width: none;
}
.doc-grille p {
  color: var(--texte-2);
  font-size: 0.97rem;
  max-width: 70ch;
}
.doc-grille p + p {
  margin-top: 0.75rem;
}
.doc-grille dl {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.55rem 1.75rem;
  margin-top: 1rem;
  font-size: 0.93rem;
}
.doc-grille dt {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--vert-fonce);
  padding-top: 0.2em;
}
.doc-grille dd {
  color: var(--texte-2);
}
@media (max-width: 62rem) {
  .doc-grille {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sommaire {
    position: static;
  }
}
@media (max-width: 44rem) {
  .doc-grille dl {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .doc-grille dd {
    margin-bottom: 0.7rem;
  }
}

/* ---------------------------------------------------------------- *
 * Choix du pays — sombre
 * ---------------------------------------------------------------- */

.page--sombre {
  background: var(--sombre);
  color: var(--clair-sur-sombre);
  min-height: calc(100vh - 4.5rem);
  padding-top: clamp(4rem, 10vw, 7rem);
}
.page--sombre .surtitre {
  color: var(--vert);
}
.page--sombre .prose,
.page--sombre .fin {
  color: var(--texte-2-sombre);
}
.marches {
  margin-top: 2.5rem;
  border-top: 1px solid var(--filet-sombre);
}
.marches > li {
  border-bottom: 1px solid var(--filet-sombre);
}
.marches a.marche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  color: inherit;
  text-decoration: none;
  transition: padding-left 0.3s var(--courbe);
}
.marches a.marche:hover {
  padding-left: 0.6rem;
}
.marches a.marche:hover .nom {
  color: var(--vert);
}
.marches .nom {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.marches .tarif {
  font-weight: 700;
  white-space: nowrap;
  color: var(--vert);
  font-variant-numeric: tabular-nums;
}
.marches .note {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--texte-2-sombre);
}
.page--sombre .fin a {
  color: var(--clair-sur-sombre);
}

/* ---------------------------------------------------------------- *
 * Impression
 * ---------------------------------------------------------------- */

@media print {
  .bandeau,
  .sommaire,
  .actions,
  .bouton,
  .barre-achat,
  .menu-mobile,
  .rideau {
    display: none !important;
  }
  body,
  .page,
  .doc {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }
  .doc-grille {
    display: block;
  }
  .doc-grille section {
    break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: none;
  }
}