/* Sposivia — site vitrine — feuille unique. Aucune couleur hors des variables. */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/nunito-300.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/nunito-400.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/nunito-600.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/nunito-700.woff2) format('woff2'); }

/* ── Couleurs ─────────────────────────────────────────────────────────────── */
:root {
  --fond: #F7F8FA;
  --surface: #FFFFFF;
  --teinte: #EEF2F7;
  --filet: #DDE3EA;
  --encre: #1F3A5F;
  --doux: #5A6B80;
  --accent: #3A6BA5;
  --rose: #E8A2B8;
  --bleu: #4F86C6;
  --sur-encre: #F7F8FA;
  --sombre: #1F3A5F;
  --sombre-texte: #F7F8FA;
  --sombre-doux: #C9D6E5;
  --sombre-filet: #3A5578;
  --voile: rgba(31, 58, 95, 0.55);
  --fixe-encre: #1F3A5F;
  --fixe-blanc: #FFFFFF;
  --en-tete: rgba(247, 248, 250, 0.94);
  --rose-pale: #FBE9EF; --bleu-pale: #E3ECF8; --decor: #DCE5F0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0F1C2E; --surface: #16263B; --teinte: #1B2E47; --filet: #2B4262;
    --encre: #EAF0F7; --doux: #A9B8CB; --accent: #8DB6E6; --bleu: #6FA0DA;
    --sur-encre: #0F1C2E; --sombre: #0A1422; --sombre-texte: #EAF0F7; --sombre-doux: #A9B8CB;
    --sombre-filet: #2B4262; --voile: rgba(5, 10, 18, 0.7); --en-tete: rgba(15, 28, 46, 0.94);
    --rose-pale: #3A2633; --bleu-pale: #1E3350; --decor: #22385A;
    color-scheme: dark;
  }
}
:root[data-theme="fonce"] {
  --fond: #0F1C2E; --surface: #16263B; --teinte: #1B2E47; --filet: #2B4262;
  --encre: #EAF0F7; --doux: #A9B8CB; --accent: #8DB6E6; --bleu: #6FA0DA;
  --sur-encre: #0F1C2E; --sombre: #0A1422; --sombre-texte: #EAF0F7; --sombre-doux: #A9B8CB;
  --sombre-filet: #2B4262; --voile: rgba(5, 10, 18, 0.7); --en-tete: rgba(15, 28, 46, 0.94);
    --rose-pale: #3A2633; --bleu-pale: #1E3350; --decor: #22385A;
  color-scheme: dark;
}

/* ── Taille du texte ──────────────────────────────────────────────────────── */
html { font-size: 100%; scroll-behavior: smooth; scroll-snap-type: y mandatory; }
html.taille-2 { font-size: 112.5%; }
html.taille-3 { font-size: 125%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.125rem; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--encre); }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 300; line-height: 1.08; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); font-weight: 300; }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }
.conteneur { max-width: 75rem; margin: 0 auto; padding: 0 1.5rem; }
.surtitre { font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.doux { color: var(--doux); }
.chapeau { color: var(--doux); font-size: 1.2rem; max-width: 36rem; }
.accent { color: var(--accent); font-weight: 400; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--surface); padding: 0.6rem 1rem; border-radius: 0.6rem; }
.aller-contenu:focus { top: 1rem; }
.fond-surface { background: var(--surface); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.fond-teinte { background: var(--teinte); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.boutons { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0.75rem 1.6rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  border: 1.5px solid var(--encre); transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton-plein { background: var(--encre); color: var(--sur-encre); }
.bouton-plein:hover { color: var(--sur-encre); }
.bouton-contour { background: transparent; color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: var(--sur-encre); }
.bouton-inverse { background: var(--sombre-texte); color: var(--sombre); border-color: var(--sombre-texte); }
.bouton-inverse:hover { color: var(--sombre); }
.bouton-carre {
  width: 3rem; height: 3rem; border-radius: 0.8rem; border: 1px solid var(--filet); background: var(--surface);
  color: var(--encre); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bouton-carre svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bouton-carre-sombre { background: transparent; border-color: var(--sombre-filet); color: var(--sombre-texte); }

/* ── Bandeau « en développement » ─────────────────────────────────────────── */
.bandeau-case { position: absolute; opacity: 0; pointer-events: none; }
.bandeau-dev {
  background: var(--rose); color: var(--fixe-encre); font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem 3.5rem 0.6rem 1.5rem;
  position: relative; text-align: center;
}
.bandeau-croix {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; cursor: pointer;
}
.bandeau-croix svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--fixe-encre); stroke-width: 2.4; stroke-linecap: round; }
.bandeau-croix:hover { background: rgba(31, 58, 95, 0.12); }
.bandeau-case:checked + .bandeau-dev { display: none; }

/* ── En-tête fixe : bandeau + barre ───────────────────────────────────────── */
.tete { position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
.entete-site { background: var(--en-tete); border-bottom: 1px solid var(--filet); backdrop-filter: blur(8px); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.logo img { height: 2.4rem; width: auto; }
.logo-sombre { display: none; }
:root[data-theme="fonce"] .logo-clair { display: none; }
:root[data-theme="fonce"] .logo-sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .logo-clair { display: none; }
  :root:not([data-theme="clair"]) .logo-sombre { display: block; }
}
.bandeau-dev p { margin: 0; }

/* ── L'écran : une page plein écran, aimantée ─────────────────────────────── */
.ecran {
  position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center; padding-top: var(--haut, 7.5rem); padding-bottom: 2.5rem;
  overflow: hidden; overflow: clip; isolation: isolate;
}
/* « clip » et non « hidden » : un écran ne doit pas devenir son propre conteneur de défilement,
   sinon ses moitiés (téléphone) cessent d'aimanter la page. */
.decor { position: absolute; left: 0; right: 0; top: -20%; bottom: -20%; z-index: -1; pointer-events: none; }
.decor svg { position: absolute; max-width: none; }
.decor .d-arche { fill: none; stroke: var(--decor); stroke-linecap: round; }
.decor .d-rond { fill: var(--decor); }
.decor .d-rose { fill: var(--rose); opacity: 0.55; }
.decor .d-bleu { fill: var(--bleu); opacity: 0.5; }
.d1 { width: 46rem; right: -12rem; top: 18%; }
.d2 { width: 40rem; left: -14rem; top: 30%; }
.d3 { width: 52rem; left: 50%; margin-left: -26rem; top: 22%; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
.grille.illus-gauche .cadre-illus { order: -1; }
.texte { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cadre-illus { min-width: 0; }
.illus { width: 100%; height: auto; max-height: 60vh; margin: 0 auto; }
.moitie { display: contents; }
.mobile-seul { display: none; }

/* ── Listes à coches ──────────────────────────────────────────────────────── */
.liste { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.liste li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.liste li::before {
  content: ""; width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; border-radius: 50%;
  background: var(--bleu-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F86C6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.liste b { font-weight: 700; }

/* ── En-têtes d'écran et cartes ───────────────────────────────────────────── */
.entete { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; margin-bottom: 2rem; }
.entete .chapeau, .entete .doux { max-width: 44rem; }
.formules .entete { margin-bottom: 1.25rem; }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.carte { background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; padding: 1.25rem 1.4rem; display: flex; align-items: flex-start; gap: 1rem; }
.carte-corps { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.carte p { color: var(--doux); font-size: 1rem; }
.pastille-icone { width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: grid; place-items: center; background: var(--rose-pale); color: var(--encre); flex-shrink: 0; }
.pastille-icone.b { background: var(--bleu-pale); }
.pastille-icone svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Étapes ───────────────────────────────────────────────────────────────── */
.etapes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; }
.etapes .entete { grid-column: 1 / -1; }
.etapes ol { display: contents; }
.etape { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
.num { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--encre); color: var(--sur-encre); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.etape:nth-child(odd) .num { background: var(--bleu); color: var(--fixe-blanc); }
.etape-corps { display: flex; flex-direction: column; gap: 0.3rem; }
.etape h3 { font-size: 1.05rem; }
.etape p { color: var(--doux); font-size: 0.95rem; line-height: 1.45; }

/* ── Ce qui nous distingue ────────────────────────────────────────────────── */
.atouts-cadre { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.atout { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--filet); border-radius: 1rem; padding: 0.85rem 1.1rem; }
.atout .pastille-icone { width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; }
.atout .pastille-icone svg { width: 1.4rem; height: 1.4rem; }
.atout b { display: block; }
.atout span { color: var(--doux); font-size: 0.95rem; }

/* ── Formules et options ──────────────────────────────────────────────────── */
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.formule { background: var(--surface); border: 1px solid var(--filet); border-radius: 1.5rem; padding: 1.6rem 2rem; display: flex; flex-direction: column; gap: 0.65rem; }
.formule ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.98rem; }
.formule .bouton { margin-top: auto; align-self: flex-start; }
.prix { font-size: 2.8rem; font-weight: 300; line-height: 1; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ancien-prix { font-size: 1.1rem; font-weight: 400; }
.formule-complete { background: var(--sombre); color: var(--sombre-texte); border-color: var(--sombre); }
.formule-complete .surtitre, .formule-complete .doux, .formule-complete .ancien-prix { color: var(--sombre-doux); }
.options { background: var(--surface); border: 1px solid var(--filet); border-radius: 1.5rem; padding: 1.5rem 2.25rem; max-width: 52rem; margin: 0 auto; width: 100%; }
.options dl { margin: 0; }
.option { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--filet); }
.option:last-child { border-bottom: 0; }
.option dt { margin: 0; }
.option dd { margin: 0; font-weight: 700; white-space: nowrap; font-size: 1.25rem; }

/* ── Dernier écran et pied de page ────────────────────────────────────────── */
.ecran.final { justify-content: space-between; padding-bottom: 0; }
.ecran.final > .moitie > .final-milieu { flex: 1; display: flex; align-items: center; }
.final-pile { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.final-pile h2 { font-size: clamp(2.2rem, 4.5vw, 3.25rem); }
.arche-finale { width: 5.5rem; height: 5.5rem; }
.pied { background: var(--sombre); color: var(--sombre-texte); }
.pied a { color: var(--sombre-texte); }
.pied a:hover { color: var(--sombre-doux); }
.pied-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.25rem; padding-bottom: 1.25rem; font-size: 0.95rem; }
.pied-marque { display: flex; flex-direction: column; gap: 0.7rem; }
.pied-marque img { height: 2.1rem; width: auto; align-self: flex-start; }
.pied-marque p { color: var(--sombre-doux); }
.pied-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.pied-bas { border-top: 1px solid var(--sombre-filet); padding-top: 0.9rem; padding-bottom: 1.25rem; color: var(--sombre-doux); font-size: 0.85rem; }


/* ── Languette du panneau ─────────────────────────────────────────────────── */
.languette {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 25; width: 2.5rem; height: 4.5rem;
  border: 1px solid var(--filet); border-left: 0; border-radius: 0 0.9rem 0.9rem 0; background: var(--surface);
  color: var(--encre); display: flex; align-items: center; justify-content: center;
  transition: width 0.2s ease;
}
.languette:hover { width: 2.9rem; color: var(--encre); }
.languette svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Illustrations ────────────────────────────────────────────────────────── */
.illus { width: 100%; height: auto; }
.i-texte { font-family: 'Nunito', system-ui, sans-serif; }
.i-fond { fill: var(--fond); } .i-surface { fill: var(--surface); } .i-teinte { fill: var(--teinte); }
.i-filet { fill: var(--filet); } .i-encre { fill: var(--encre); } .i-doux { fill: var(--doux); }
.i-accent { fill: var(--accent); } .i-rose { fill: var(--rose); } .i-bleu { fill: var(--bleu); }
.i-rose-pale { fill: var(--rose-pale); } .i-bleu-pale { fill: var(--bleu-pale); }
.i-sur-encre { fill: var(--sur-encre); } .i-fixe-encre { fill: var(--fixe-encre); } .i-fixe-blanc { fill: var(--fixe-blanc); }
.sans { fill: none; }
.t-filet { stroke: var(--filet); } .t-encre { stroke: var(--encre); } .t-rose { stroke: var(--rose); }
.t-bleu { stroke: var(--bleu); } .t-teinte { stroke: var(--teinte); } .t-blanc { stroke: var(--fixe-blanc); }
.final-icone { width: 6rem; height: 6rem; }


/* ── Animations : apparition, et parallaxe à trois plans ──────────────────── */
/* --d va de -1 (l'écran est au-dessus) à 1 (l'écran est en dessous) ; 0 quand il est en place. */
@media (prefers-reduced-motion: no-preference) {
  .decor { transform: translate3d(0, calc(var(--d, 0) * 45vh), 0); will-change: transform; }
  .decor .d-rose, .decor .d-bleu { transform: translateY(calc(var(--d, 0) * -200px)); }
  .avant { transform: translate3d(0, calc(var(--d, 0) * -28vh), 0); will-change: transform; }
  .js .anim { opacity: 0; transform: translateY(1.6rem); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .actif .anim { opacity: 1; transform: none; }
  .i1 { transition-delay: 90ms; } .i2 { transition-delay: 180ms; } .i3 { transition-delay: 270ms; }
  .i4 { transition-delay: 360ms; } .i5 { transition-delay: 450ms; } .i6 { transition-delay: 540ms; }
  .i7 { transition-delay: 630ms; } .i8 { transition-delay: 720ms; }
  .flotte { animation: flotter 6s ease-in-out infinite; transform-box: fill-box; }
  .flotte-2 { animation-delay: -3s; }
  .js .monte { transform: scaleY(0.15); transform-box: fill-box; transform-origin: bottom; transition: transform 1s ease 0.35s; }
  .js .actif .monte { transform: none; }
}
/* Le texte ne glisse que sur ordinateur : sur téléphone, il porte les points d'aimantation. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .ecran .texte, .ecran .entete { transform: translate3d(0, calc(var(--d, 0) * 8vh), 0); }
}
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }


/* ── Tiroirs : menu et réglages ───────────────────────────────────────────── */
.tiroir { position: fixed; inset: 0; z-index: 40; visibility: hidden; }
.tiroir:target, .tiroir.ouvert { visibility: visible; }
.tiroir-fond { position: absolute; inset: 0; background: var(--voile); opacity: 0; transition: opacity 0.25s ease; }
.tiroir:target .tiroir-fond, .tiroir.ouvert .tiroir-fond { opacity: 1; }
.tiroir-panneau {
  position: absolute; top: 0; bottom: 0; width: min(24rem, 88vw); overflow-y: auto; background: var(--surface);
  padding: 1.25rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.9rem; transition: transform 0.3s ease;
}
.tiroir-droit .tiroir-panneau { right: 0; transform: translateX(100%); width: min(27.5rem, 92vw); }
.tiroir-gauche .tiroir-panneau { left: 0; transform: translateX(-100%); border-right: 1px solid var(--filet); }
.tiroir:target .tiroir-panneau, .tiroir.ouvert .tiroir-panneau { transform: none; }
.tiroir-sombre { background: var(--sombre); color: var(--sombre-texte); }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tiroir-tete img { height: 2.5rem; width: auto; }
.tiroir-tete h2 { font-size: 1.4rem; font-weight: 700; }
.menu-liens { display: flex; flex-direction: column; }
.menu-liens a { color: var(--sombre-texte); text-decoration: none; font-size: 1.9rem; font-weight: 300; padding: 0.5rem 0; border-bottom: 1px solid var(--sombre-filet); }
.menu-liens a:hover { color: var(--sombre-doux); }
.menu-bas { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; }
.menu-bas a { color: var(--sombre-doux); }
.reglage { display: flex; flex-direction: column; gap: 0.75rem; }
.reglage-grille { display: grid; gap: 0.6rem; }
.reglage-grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reglage-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reglage-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.choix {
  border: 1px solid var(--filet); border-radius: 0.9rem; background: var(--surface); color: var(--encre);
  text-decoration: none; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 3rem; padding: 0.5rem 1rem;
}
.choix:hover { color: var(--encre); border-color: var(--encre); }
.choix[aria-pressed="true"], .choix[aria-current="true"] { border: 2px solid var(--encre); background: var(--teinte); font-weight: 700; }
.choix-theme { flex-direction: column; min-height: 4.75rem; }
.choix-theme svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choix-fonce { background: var(--fixe-encre); color: var(--fixe-blanc); }
.choix-fonce:hover, .choix-fonce[aria-pressed="true"] { background: var(--fixe-encre); color: var(--fixe-blanc); }
.choix-taille { font-weight: 700; }
.choix-taille-1 { font-size: 1rem; } .choix-taille-2 { font-size: 1.3rem; } .choix-taille-3 { font-size: 1.65rem; }
.choix-langue { justify-content: flex-start; gap: 0.75rem; }
.choix-langue .drapeau { width: 1.9rem; height: auto; border-radius: 0.25rem; box-shadow: 0 0 0 1px var(--filet); }

/* ── Cookies ──────────────────────────────────────────────────────────────── */
.cookies {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 30; width: min(61rem, calc(100% - 2rem));
  background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; padding: 1.5rem 2rem;
  display: flex; align-items: center; gap: 2rem; box-shadow: 0 10px 40px rgba(15, 28, 46, 0.18);
}
.cookies.cache { display: none; }
.cookies-texte { display: flex; flex-direction: column; gap: 0.35rem; flex-grow: 1; }
.cookies-texte h2 { font-size: 1.2rem; font-weight: 700; }
.cookies-texte p { color: var(--doux); font-size: 1rem; }
.cookies-boutons { display: flex; gap: 0.75rem; flex-shrink: 0; }

/* ── Choix de la langue ───────────────────────────────────────────────────── */
.langue-voile { position: fixed; inset: 0; z-index: 60; background: var(--voile); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.langue-voile.cache { display: none; }
.langue-boite { background: var(--surface); border-radius: 1.5rem; padding: 2.5rem 2.75rem; display: flex; flex-direction: column; gap: 1.75rem; align-items: center; text-align: center; max-width: 100%; }
.langue-boite h2 { font-size: 1.75rem; }
.drapeaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.drapeau-choix { padding: 0.35rem; border-radius: 1rem; border: 2px solid transparent; display: flex; transition: transform 0.2s ease; }
.drapeau-choix:hover { transform: translateY(-3px); border-color: var(--filet); }
.drapeau-choix.propose { border-color: var(--encre); }
.drapeau-choix .drapeau { width: 5.25rem; height: auto; border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--filet); }


/* ── Ordinateurs à petit écran ────────────────────────────────────────────── */
@media (max-height: 920px) and (min-width: 761px) { html { font-size: 93%; } }
@media (max-height: 760px) and (min-width: 761px) {
  .formule { padding: 1.2rem 1.6rem; gap: 0.45rem; } .formule ul { font-size: 0.92rem; } .prix { font-size: 2.4rem; } .entete { margin-bottom: 1.25rem; }
}
@media (max-height: 700px) and (min-width: 761px) {
  html { font-size: 80%; } .ecran { padding-bottom: 1rem; } .cartes { gap: 0.9rem; }
  .entete { margin-bottom: 1rem; gap: 0.45rem; } .carte { padding: 1rem 1.2rem; } .formule ul { gap: 0; }
}
@media (min-width: 761px) {
  html.taille-2 { font-size: 106%; }
  html.taille-3 { font-size: 112.5%; }
}
@media (max-width: 1100px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.75rem; }
}
@media (max-width: 960px) {
  .cookies { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem; }
  .cookies-boutons .bouton { flex: 1 1 0; }
}

/* ── Téléphone : chaque « moitié » devient un écran à part entière ────────── */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .conteneur { padding-left: 3rem; padding-right: 1rem; }
  .entete-ligne { padding-left: 1rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .logo img { height: 2rem; }
  .bouton-carre { width: 2.75rem; height: 2.75rem; }
  .bandeau-dev { font-size: 0.85rem; padding: 0.45rem 3rem; }
  .ecran { padding-bottom: 2.25rem; }
  .ecran:not(.coupe) > .conteneur { padding-top: 0.75rem; }
  .ordi-seul { display: none; }
  .mobile-seul { display: block; }
  .ecran.coupe { display: block; min-height: 0; padding: 0; scroll-snap-align: none; }
  .coupe .grille, .coupe .texte, .coupe .cartes, .coupe .deux, .coupe .etapes, .coupe .atouts-cadre { display: block; }
  .coupe .moitie {
    display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; min-height: 100vh; min-height: 100svh;
    padding-top: calc(var(--haut, 7.5rem) + 0.75rem); padding-bottom: 2.25rem; scroll-snap-align: start; scroll-snap-stop: always;
  }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.65rem; }
  .chapeau { font-size: 1.05rem; }
  .surtitre { font-size: 0.75rem; }
  .grille { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .illus { max-height: 34svh; width: auto; }
  .ecran:not(.coupe) .illus { max-height: 28svh; }
  .illus-mobile { margin-bottom: 0.75rem; }
  .liste { gap: 0.7rem; font-size: 1rem; line-height: 1.5; }
  .liste li { grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; }
  .liste li::before { width: 1.2rem; height: 1.2rem; background-size: 0.72rem; }
  .boutons { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 0.75rem; }
  .entete { margin-bottom: 0; gap: 0.6rem; }
  .carte { gap: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 1rem; }
  .carte .pastille-icone { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; }
  .carte .pastille-icone svg { width: 1.35rem; height: 1.35rem; }
  .carte h3 { font-size: 1rem; }
  .carte p { font-size: 0.87rem; line-height: 1.4; }
  .etapes ol { list-style: none; margin: 0; padding: 0; }
  .coupe .etapes ol { display: flex; flex-direction: column; gap: 0.8rem; }
  .etape { flex-direction: row; align-items: center; text-align: left; gap: 0.9rem; }
  .num { width: 2.4rem; height: 2.4rem; font-size: 1rem; flex-shrink: 0; }
  .etape h3 { font-size: 1rem; }
  .etape p { font-size: 0.92rem; line-height: 1.4; }
  .atouts { gap: 0.6rem; }
  .atout { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0.85rem; }
  .atout .pastille-icone { width: 2.4rem; height: 2.4rem; }
  .atout span { font-size: 0.9rem; line-height: 1.4; }
  .formule { padding: 1.25rem 1.35rem; gap: 0.55rem; border-radius: 1.1rem; }
  .formule ul { font-size: 0.87rem; line-height: 1.3; gap: 0.1rem; }
  .formule .bouton { display: none; }
  .prix { font-size: 2.3rem; }
  .formule .doux { font-size: 0.88rem; line-height: 1.35; }
  .options { padding: 0.5rem 1.2rem; }
  .option { padding: 0.75rem 0; font-size: 0.95rem; }
  .option dd { font-size: 1.05rem; }
  .final-pile { gap: 0.9rem; }
  .coupe .pied-moitie { padding-top: var(--haut, 7.5rem); padding-bottom: 0; background: var(--sombre); justify-content: center; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 2rem; font-size: 1rem; }
  .pied-marque img { height: 2.4rem; }
  .pied-nav { gap: 0.5rem; }
  .langue-boite { padding: 1.75rem 1.25rem; }
  .drapeau-choix .drapeau { width: 4rem; }
}

/* ── Page d'erreur (404.html, statique) ───────────────────────────────────── */
.page-erreur { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; padding: 2rem 1rem; }
.page-erreur .logo img { height: 2.75rem; width: auto; }
.page-erreur h1 { font-size: clamp(2rem, 5vw, 3rem); }
.erreur-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }