/* ==========================================================================
   SO PRESTIGE - Feuille de style
   Agent : Inès (dev-site) · 2026-10-25 · Statut : À VALIDER
   Source : site/STYLEGUIDE.md (Jade). Les tokens ci-dessous en sont copiés.
   ========================================================================== */

/* ---------- Polices (auto-hébergées, voir STYLEGUIDE § 3) ----------
   Chemins relatifs à ce fichier (fonctionne en file:// et en ligne).
   2026-10-25 : téléchargement impossible depuis l'atelier (réseau bloqué),
   polices de repli actives. Licence OFL : Inter (github.com/rsms/inter),
   Cormorant Garamond (fontsource).
   TODO : déposer dans assets/fonts/ les fichiers InterVariable.woff2,
   cormorant-garamond-latin-500-normal.woff2 et -600-normal.woff2, puis
   décommenter ce bloc et la ligne <link rel="preload"> des pages HTML.
   En attendant, les polices de repli (Georgia / system-ui) s'appliquent.
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
*/
@font-face {
  font-family: "Inter Repli";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%;
}

:root {
  --c-noir: #0F0618; --c-noir-2: #1A0B2A; --c-noir-3: #26103D;
  --c-ligne: #3A2259; --c-bordure: #8E8E99;
  --c-blanc: #F4F3F7; --c-gris: #C0C0C0; --c-desactive: #8E8E99;
  --c-champagne: #D4AF37; --c-champagne-clair: #E6C65A; --c-champagne-fonce: #4B0082;
  --c-clair: #F4F3F7; --c-encre: #0F0618; --c-encre-2: #4E4A5A;
  --c-erreur: #F2867A; --c-erreur-clair: #A3281B; --c-succes: #7FC8A0; --c-succes-clair: #2F6B4A;
  --c-voile-hero: linear-gradient(180deg, rgba(15,6,24,.55) 0%, rgba(15,6,24,.75) 45%, #0F0618 100%);
  --c-focus: var(--c-champagne);

  --f-titre: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --f-texte: "Inter", "Inter Repli", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-h1: clamp(2.375rem, 1.7rem + 3.2vw, 4.5rem);
  --fs-prix: clamp(2.5rem, 2rem + 2.4vw, 3.5rem);
  --lh-serre: 1.08; --lh-titre: 1.2; --lh-texte: 1.6; --ls-titre: -0.01em; --mesure: 62ch;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --conteneur: 1200px; --conteneur-etroit: 760px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-rond: 999px;
  --ombre-1: inset 0 1px 0 rgba(244,243,247,.04), 0 1px 2px rgba(0,0,0,.5);
  --ombre-2: inset 0 1px 0 rgba(244,243,247,.05), 0 24px 48px -24px rgba(0,0,0,.8);
  --ombre-3: 0 -12px 40px rgba(0,0,0,.6);
  --halo-champagne: 0 0 0 1px rgba(212,175,55,.35), 0 12px 40px -12px rgba(212,175,55,.25);
  --cible: 48px;
  --barre-mobile: calc(64px + env(safe-area-inset-bottom));
  --header-h: 64px;

  --d-rapide: 150ms; --d-base: 240ms; --d-lent: 480ms;
  --e-sortie: cubic-bezier(.22, 1, .36, 1); --e-entree: cubic-bezier(.55, 0, 1, .45); --e-douce: cubic-bezier(.65, 0, .35, 1);
}

.section--clair {
  --c-noir: #F4F3F7; --c-noir-2: #FFFFFF; --c-noir-3: #E9E6EF;
  --c-blanc: #0F0618; --c-gris: #4E4A5A;
  --c-champagne: #4B0082; --c-focus: #4B0082;
  --c-bordure: #8A8796;
  --c-erreur: #A3281B; --c-succes: #2F6B4A;
  background: var(--c-noir); color: var(--c-blanc);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 var(--fs-base)/var(--lh-texte) var(--f-texte); color: var(--c-blanc); background: var(--c-noir);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--barre-mobile); }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 500; line-height: var(--lh-serre); letter-spacing: var(--ls-titre); text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-titre); }
h4 { font: 600 var(--fs-h4)/var(--lh-titre) var(--f-texte); margin: 0; }
p { max-width: var(--mesure); text-wrap: pretty; margin: 0; }
a { color: var(--c-champagne); text-underline-offset: .2em; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: var(--sp-4); top: -100px; z-index: 200; background: var(--c-champagne); color: #0F0618; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.lien-evitement:focus { top: var(--sp-4); }
[hidden] { display: none !important; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--conteneur)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.grille { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille--2, .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille { gap: var(--sp-6); } }
.surtitre { font: 500 var(--fs-xs)/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--c-champagne); margin-bottom: var(--sp-3); }
.section__entete { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.section__entete p { color: var(--c-gris); font-size: var(--fs-lg); }
.texte-gris { color: var(--c-gris); }

/* ---------- Mouvement ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--d-lent) var(--e-sortie), transform var(--d-lent) var(--e-sortie); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@keyframes prix-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prix__montant.is-updated { animation: prix-in var(--d-lent) var(--e-sortie); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Boutons ---------- */
.btn { --_h: var(--cible); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--_h); padding: 0 var(--sp-5); border-radius: var(--r-md); border: 1px solid transparent;
  font: 550 var(--fs-base)/1 var(--f-texte); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-rapide) var(--e-douce), border-color var(--d-rapide) var(--e-douce), color var(--d-rapide) var(--e-douce), transform var(--d-rapide) var(--e-douce); }
.btn:active { transform: scale(.98); }
.btn--primaire { background: var(--c-champagne); color: #0F0618; }
.btn--primaire:hover { background: var(--c-champagne-clair); }
.section--clair .btn--primaire { background: var(--c-champagne-fonce); color: #F4F3F7; }
.btn--secondaire { background: transparent; color: var(--c-blanc); border-color: var(--c-bordure); }
.btn--secondaire:hover { border-color: var(--c-champagne); color: var(--c-champagne); }
.btn--lien { min-height: auto; padding: 0; background: none; border: 0; color: var(--c-champagne); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.btn--plein { width: 100%; --_h: 56px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--c-noir-3); color: var(--c-desactive); border-color: transparent; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(15,6,24,.25); border-top-color: #0F0618; animation: tourne .8s linear infinite; }
.btn--secondaire[aria-busy="true"]::after { border-color: rgba(244,243,247,.25); border-top-color: var(--c-blanc); }
@keyframes tourne { to { transform: rotate(360deg); } }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); display: flex; align-items: center;
  transition: background-color var(--d-base), box-shadow var(--d-base); }
.header.is-scrolled { background: rgba(15,6,24,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--c-ligne); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.logo { font: 600 var(--fs-lg)/1 var(--f-titre); letter-spacing: .18em; color: var(--c-blanc); text-decoration: none; white-space: nowrap; }
.header__nav { display: none; }
.header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.header__tel, .header__wa { display: none; }
.langue { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); color: var(--c-blanc); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--sp-2); }
.langue:hover { color: var(--c-champagne); }
.langues { display: inline-flex; align-items: center; }
.langue { gap: 6px; min-width: 40px; justify-content: center; opacity: .6; transition: opacity var(--d-base); }
.langue:hover, .langue[aria-pressed="true"] { opacity: 1; }
.langue[aria-pressed="true"] span { color: var(--c-champagne); }
.drapeau { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); flex: none; }
.langue[aria-pressed="true"] .drapeau { box-shadow: 0 0 0 1.5px var(--c-champagne); }
@media (max-width: 599px) { .langue span { display: none; } .langue { padding: 0 4px; min-width: 32px; } }
.menu-btn { width: var(--cible); height: var(--cible); display: grid; place-items: center; background: none; border: 1px solid var(--c-bordure); border-radius: var(--r-md); color: var(--c-blanc); cursor: pointer; }
.menu-mobile { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 59; background: var(--c-noir-2); border-bottom: 1px solid var(--c-ligne); padding: var(--sp-4) var(--gouttiere) var(--sp-5); box-shadow: var(--ombre-2); }
.menu-mobile ul { list-style: none; display: grid; }
.menu-mobile a { display: flex; align-items: center; min-height: var(--cible); color: var(--c-blanc); text-decoration: none; border-bottom: 1px solid var(--c-ligne); }
@media (min-width: 960px) {
  .header__nav { display: flex; gap: var(--sp-5); list-style: none; }
  .header__nav a { color: var(--c-blanc); text-decoration: none; font-size: var(--fs-sm); }
  .header__nav a:hover { color: var(--c-champagne); }
  .header__tel, .header__wa { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-blanc); text-decoration: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-height: 44px; }
  .header__tel:hover, .header__wa:hover { color: var(--c-champagne); }
  .menu-btn, .menu-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: calc(var(--header-h) + var(--sp-4)); padding-bottom: var(--sp-7); }
/* Calendrier ouvert : la section passe au-dessus du voile, sinon on ne peut rien cliquer */
.hero:has(.sheet.is-open), .champ:has(.sheet.is-open) { z-index: 81; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(60% 50% at 70% 20%, rgba(75,0,130,.45), transparent 70%), radial-gradient(40% 40% at 20% 80%, rgba(212,175,55,.08), transparent 70%), var(--c-noir); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--c-voile-hero); }
.hero__grille { display: grid; gap: var(--sp-5); }
.hero__texte { display: grid; gap: var(--sp-4); align-content: start; }
.hero__titre { font-size: var(--fs-h1); max-width: 14ch; }
.hero__sous-titre { color: var(--c-gris); font-size: var(--fs-lg); }
.hero__garanties { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.hero__garanties li { display: flex; gap: var(--sp-3); align-items: center; color: var(--c-blanc); }
.hero__garanties .icone { color: var(--c-champagne); }
@media (max-width: 639px) { .hero__sous-titre, .hero__garanties, .hero .surtitre { display: none; } .hero__titre { font-size: clamp(2rem, 1.5rem + 3vw, 2.375rem); } }
@media (min-width: 960px) {
  .hero { min-height: min(100svh, 860px); display: grid; align-items: center; }
  .hero__grille { grid-template-columns: 1.1fr minmax(380px, 440px); gap: var(--sp-8); align-items: start; }
  .hero__texte { padding-top: var(--sp-7); }
  .hero__media::after { background: linear-gradient(90deg, rgba(15,6,24,.85) 0%, rgba(15,6,24,.6) 50%, rgba(15,6,24,.75) 100%); }
}

/* ---------- Carte du formulaire ---------- */
.resa { position: relative; background: var(--c-noir-2); border-radius: var(--r-lg); box-shadow: var(--ombre-2); border: 1px solid var(--c-ligne); padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .resa { padding: var(--sp-5); } }
.resa__etapes { display: flex; gap: var(--sp-3); list-style: none; font-size: var(--fs-xs); color: var(--c-gris); letter-spacing: .04em; }
.resa__etapes li[aria-current="step"] { color: var(--c-champagne); font-weight: 600; }
.resa__etape { display: grid; gap: var(--sp-4); border: 0; padding: 0; margin: 0; min-width: 0; }
.resa__etape > legend { padding: 0; margin-bottom: var(--sp-2); font: 600 var(--fs-lg)/1.2 var(--f-texte); }
.resa__nav { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); }
.segmente { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--c-noir); border: 1px solid var(--c-ligne); border-radius: var(--r-md); }
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label { display: grid; place-items: center; min-height: 44px; border-radius: 7px; cursor: pointer; font-size: var(--fs-sm); font-weight: 550; color: var(--c-gris); transition: background-color var(--d-rapide), color var(--d-rapide); text-align: center; padding: 0 var(--sp-2); }
.segmente input:checked + label { background: var(--c-noir-3); color: var(--c-blanc); box-shadow: inset 0 0 0 1px rgba(212,175,55,.4); }
.segmente input:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ---------- Champs ---------- */
.champ { display: grid; gap: var(--sp-2); position: relative; }
.champ__label { font: 500 var(--fs-sm)/1.2 var(--f-texte); color: var(--c-gris); }
.champ__boite { position: relative; display: flex; align-items: center; }
.champ__input { width: 100%; min-height: 52px; padding: 0 var(--sp-4); background: var(--c-noir); color: var(--c-blanc);
  border: 1px solid var(--c-bordure); border-radius: var(--r-md); font: 400 max(16px, var(--fs-base))/1.3 var(--f-texte);
  transition: border-color var(--d-rapide), box-shadow var(--d-rapide); -webkit-appearance: none; appearance: none; }
.champ__input--action { padding-right: 52px; }
textarea.champ__input { padding-block: var(--sp-3); min-height: 88px; resize: vertical; }
.champ__input::placeholder { color: var(--c-gris); opacity: .8; }
.champ__input:hover { border-color: var(--c-gris); }
.champ__input:focus { outline: none; border-color: var(--c-champagne); box-shadow: 0 0 0 3px rgba(212,175,55,.25); }
button.champ__input { text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.champ__action { position: absolute; right: 2px; width: var(--cible); height: var(--cible); display: grid; place-items: center; background: none; border: 0; color: var(--c-champagne); border-radius: var(--r-sm); cursor: pointer; }
.champ__action[aria-busy="true"] .icone { animation: tourne 1.2s linear infinite; }
.champ__charge { position: absolute; right: 56px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-ligne); border-top-color: var(--c-champagne); animation: tourne .8s linear infinite; }
.champ__aide { font-size: var(--fs-sm); color: var(--c-gris); }
.champ--erreur .champ__input { border-color: var(--c-erreur); }
.champ__erreur { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-erreur); }
.champ__erreur::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 12px/1 var(--f-texte); margin-top: 1px; }
input:-webkit-autofill { -webkit-text-fill-color: var(--c-blanc); -webkit-box-shadow: 0 0 0 100px var(--c-noir-3) inset; caret-color: var(--c-blanc); }

/* Autocomplétion */
.suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 4px;
  background: var(--c-noir-3); border-radius: var(--r-md); box-shadow: var(--ombre-2); border: 1px solid var(--c-ligne); }
.suggestions li { min-height: 52px; padding: 6px var(--sp-3); border-radius: var(--r-sm); display: grid; align-content: center; cursor: pointer; border-left: 2px solid transparent; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: rgba(212,175,55,.10); border-left-color: var(--c-champagne); }
.suggestions .s__l1 { color: var(--c-blanc); font-size: var(--fs-base); line-height: 1.3; }
.suggestions .s__l2 { color: var(--c-gris); font-size: var(--fs-sm); line-height: 1.3; }
.suggestions mark { background: none; color: inherit; font-weight: 650; }

/* Raccourcis */
.puces { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px; }
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 14px; border: 1px solid var(--c-bordure); border-radius: var(--r-rond); font-size: var(--fs-sm); background: none; color: var(--c-blanc); cursor: pointer; white-space: nowrap; }
.puce:hover, .puce[aria-pressed="true"] { border-color: var(--c-champagne); color: var(--c-champagne); }

/* Interrupteur */
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--cible); background: none; border: 0; padding: 0; width: 100%; cursor: pointer; text-align: left; }
.interrupteur__piste { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--r-rond); background: var(--c-noir-3); border: 1px solid var(--c-bordure); transition: background-color var(--d-base); }
.interrupteur__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-blanc); transition: transform var(--d-base) var(--e-sortie), background-color var(--d-base); }
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--c-champagne); border-color: var(--c-champagne); }
.interrupteur[aria-checked="true"] .interrupteur__piste::after { transform: translateX(18px); background: #0F0618; }
.depli { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--e-sortie); }
.depli.is-open { grid-template-rows: 1fr; }
.depli > div { overflow: hidden; min-width: 0; }
.depli.is-open > div { overflow: visible; }

/* Options */
.option { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; border-bottom: 1px solid var(--c-ligne); cursor: pointer; }
.option input { width: 22px; height: 22px; flex: none; accent-color: var(--c-champagne); margin: 0; cursor: pointer; }
.option__texte { flex: 1; }
.option__prix { color: var(--c-champagne); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Compteurs */
.compteur { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; padding-block: var(--sp-2); border-bottom: 1px solid var(--c-ligne); }
.compteur__libelle { display: grid; }
.compteur__libelle small { color: var(--c-gris); font-size: var(--fs-sm); }
.compteur__ctrl { display: flex; align-items: center; gap: var(--sp-3); }
.compteur__btn { width: var(--cible); height: var(--cible); border-radius: var(--r-rond); border: 1px solid var(--c-bordure); background: none; color: var(--c-blanc); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.compteur__btn:hover:not([disabled]) { border-color: var(--c-champagne); color: var(--c-champagne); }
.compteur__btn[disabled] { color: var(--c-desactive); border-color: var(--c-ligne); cursor: not-allowed; }
.compteur__valeur { min-width: 2ch; text-align: center; font: 600 var(--fs-lg)/1 var(--f-texte); font-variant-numeric: tabular-nums; }

/* Bloc prix */
.prix { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-noir-3); border: 1px solid rgba(212,175,55,.3); }
.prix__surtitre { font: 500 var(--fs-xs)/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--c-champagne); }
.prix__montant { display: block; margin-block: var(--sp-2); font: 600 var(--fs-prix)/var(--lh-serre) var(--f-titre); font-variant-numeric: lining-nums tabular-nums; color: var(--c-blanc); }
.prix__detail { color: var(--c-gris); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.prix__inclus { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-ligne); font-size: var(--fs-sm); color: var(--c-gris); display: grid; gap: 2px; }
.prix__lignes { margin-top: var(--sp-3); }
.prix__lignes summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-champagne); min-height: 32px; display: flex; align-items: center; }
.prix__lignes table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--c-gris); font-variant-numeric: tabular-nums; }
.prix__lignes td { padding: 4px 0; vertical-align: top; }
.prix__lignes td:last-child { text-align: right; white-space: nowrap; padding-left: var(--sp-3); }
.prix--vide .prix__montant { display: none; }
.squelette { display: block; height: 48px; width: 60%; margin-block: var(--sp-2); border-radius: var(--r-sm); background: linear-gradient(90deg, #1F0E33 0%, #2D1748 50%, #1F0E33 100%); background-size: 200% 100%; animation: respire 1.6s var(--e-douce) infinite; }
@keyframes respire { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }

/* Alertes */
.alerte { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--c-noir-2); border: 1px solid var(--c-ligne); border-left-width: 3px; }
.alerte p { max-width: none; }
.alerte--erreur { border-left-color: var(--c-erreur); }
.alerte--succes { border-left-color: var(--c-succes); }
.alerte--info { border-left-color: var(--c-champagne); }
.alerte .alerte__titre { font-weight: 600; color: var(--c-blanc); }
.alerte__corps { display: grid; gap: var(--sp-2); }

/* Récapitulatif */
.recap { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); margin: 0; }
.recap div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--sp-3); padding-block: 4px; border-bottom: 1px solid var(--c-ligne); }
.recap dt { color: var(--c-gris); }
.recap dd { margin: 0; overflow-wrap: anywhere; }
.message-apercu { white-space: pre-wrap; font: 400 var(--fs-sm)/1.5 var(--f-texte); background: var(--c-noir); border: 1px solid var(--c-ligne); border-radius: var(--r-md); padding: var(--sp-3); max-height: 220px; overflow: auto; }
.actions { display: grid; gap: var(--sp-3); }
.mention { font-size: var(--fs-xs); color: var(--c-gris); line-height: 1.5; }

/* ---------- Carte Leaflet ---------- */
.carte-zone { display: grid; gap: var(--sp-2); }
.carte { position: relative; z-index: 0; isolation: isolate; height: 220px; border-radius: var(--r-lg); overflow: hidden; background: #130820; border: 1px solid var(--c-ligne); }
@media (min-width: 960px) { .carte { height: 260px; } }
.carte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.25) brightness(.85) contrast(1.05); }
/* leaflet.css est injecté APRÈS styles.css : on monte la spécificité, sinon fond #ddd et Helvetica reviennent */
.carte .leaflet-container { background: #130820; font: 400 var(--fs-xs)/1.4 var(--f-texte); }
.carte-zone:not([hidden]) { animation: prix-in var(--d-lent) var(--e-sortie); } /* dépliage doux (§ 9.12), neutralisé en mouvement réduit */
.leaflet-control-attribution { background: rgba(15,6,24,.75) !important; color: var(--c-gris) !important; padding: 2px 6px !important; border-radius: var(--r-sm) 0 0 0; }
.leaflet-control-attribution a { color: var(--c-blanc) !important; }
.leaflet-bar { border: 0 !important; box-shadow: var(--ombre-1) !important; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; background: var(--c-noir-3) !important; color: var(--c-blanc) !important; border-color: var(--c-ligne) !important; }
.leaflet-bar a:hover { color: var(--c-champagne) !important; }
.marqueur { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px #0F0618, 0 2px 8px rgba(0,0,0,.6); }
.marqueur--depart { background: #0F0618; border: 3px solid var(--c-champagne); }
.marqueur--arrivee { background: var(--c-champagne); }
.carte__activer { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; background: transparent; border: 0; color: var(--c-blanc); font-size: var(--fs-sm); cursor: pointer; }
.carte__activer span { background: rgba(15,6,24,.8); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-rond); border: 1px solid var(--c-ligne); }
.carte__infos { font-size: var(--fs-sm); color: var(--c-gris); font-variant-numeric: tabular-nums; }

/* ---------- Bottom sheet / popover (calendrier) ---------- */
.sheet { position: fixed; inset: auto 0 0 0; z-index: 80; max-height: 88svh; overflow: auto; overscroll-behavior: contain;
  padding: var(--sp-3) var(--gouttiere) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: var(--c-noir-3); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--ombre-3);
  transform: translateY(100%); visibility: hidden; transition: transform var(--d-lent) var(--e-sortie), visibility 0s linear var(--d-lent); }
.sheet.is-open { transform: none; visibility: visible; transition: transform var(--d-lent) var(--e-sortie), visibility 0s; }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--sp-4); border-radius: 2px; background: var(--c-bordure); }
.sheet-voile { position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.6); opacity: 0; transition: opacity var(--d-base); pointer-events: none; }
.sheet-voile.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 960px) {
  .sheet { position: absolute; inset: calc(100% + 8px) auto auto 0; width: 360px; max-height: 70vh; border-radius: var(--r-lg); transform: translateY(-4px); opacity: 0; padding: var(--sp-4); transition: opacity var(--d-base), transform var(--d-base) var(--e-sortie), visibility 0s linear var(--d-base); }
  .sheet.is-open { opacity: 1; transform: none; transition: opacity var(--d-base), transform var(--d-base) var(--e-sortie), visibility 0s; }
  .sheet::before { display: none; }
  .sheet-voile { background: transparent; }
}
.sheet__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sheet__titre { font: 600 var(--fs-base)/1.2 var(--f-texte); }
.sheet__fermer { width: var(--cible); height: var(--cible); display: grid; place-items: center; background: none; border: 1px solid var(--c-bordure); border-radius: var(--r-rond); color: var(--c-blanc); cursor: pointer; }
.sheet__bas { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }

.cal__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.cal__mois { font: 500 var(--fs-h4)/1 var(--f-titre); text-transform: capitalize; }
.cal__nav { width: var(--cible); height: var(--cible); border-radius: var(--r-rond); border: 1px solid var(--c-bordure); background: none; color: var(--c-blanc); cursor: pointer; display: grid; place-items: center; }
.cal__nav[disabled] { color: var(--c-desactive); border-color: var(--c-ligne); cursor: not-allowed; }
.cal__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__jsem { font-size: var(--fs-xs); color: var(--c-gris); padding-block: var(--sp-2); }
.cal__jsem abbr { text-decoration: none; }
.cal__jour { aspect-ratio: 1; min-height: 44px; border: 0; border-radius: var(--r-rond); background: none; color: var(--c-blanc); font: 500 var(--fs-base)/1 var(--f-texte); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--d-rapide); }
.cal__jour:hover:not([disabled]) { background: var(--c-noir-2); }
.cal__jour[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--c-champagne); }
.cal__jour[aria-selected="true"] { background: var(--c-champagne); color: #0F0618; font-weight: 650; }
.cal__jour[disabled] { color: var(--c-desactive); cursor: not-allowed; }
.periodes { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.periode__titre { font-size: var(--fs-xs); color: var(--c-gris); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.heures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
@media (min-width: 640px) { .heures { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 960px) { .heures { grid-template-columns: repeat(4, 1fr); } }
.heure { min-height: var(--cible); border-radius: var(--r-md); border: 1px solid var(--c-bordure); background: none; color: var(--c-blanc); font: 500 var(--fs-sm)/1 var(--f-texte); font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 4px; }
.heure[aria-pressed="true"] { background: var(--c-champagne); border-color: var(--c-champagne); color: #0F0618; }
.heure[disabled] { color: var(--c-desactive); border-style: dashed; cursor: not-allowed; }

/* ---------- Barre mobile ---------- */
.barre-mobile { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  padding: var(--sp-2) var(--gouttiere) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(22,22,26,.92); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid var(--c-ligne); box-shadow: var(--ombre-3); transition: transform var(--d-base) var(--e-sortie); }
.barre-mobile .btn { --_h: 48px; padding: 0 var(--sp-3); }
.barre-mobile__prix { display: none; }
.barre-mobile--prix { grid-template-columns: auto 1fr var(--cible) var(--cible); align-items: center; }
.barre-mobile--prix .barre-mobile__prix { display: grid; line-height: 1.1; }
.barre-mobile__prix strong { font: 600 1.5rem/1 var(--f-titre); font-variant-numeric: lining-nums tabular-nums; }
.barre-mobile__prix small { font-size: var(--fs-xs); color: var(--c-gris); }
.barre-mobile__continuer { display: none !important; }
.barre-mobile--prix .barre-mobile__continuer { display: inline-flex !important; }
.barre-mobile--prix .barre-mobile__appel, .barre-mobile--prix .barre-mobile__wa { width: var(--cible); padding: 0; }
.barre-mobile--prix .barre-mobile__appel .txt, .barre-mobile--prix .barre-mobile__wa .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body:has(input:focus, textarea:focus) .barre-mobile { transform: translateY(110%); }
@media (min-width: 960px) { .barre-mobile { display: none; } body { padding-bottom: 0; } }

/* ---------- Sections de contenu ---------- */
.forfaits { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.forfaits th, .forfaits td { text-align: left; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-ligne); vertical-align: top; }
.forfaits th { font: 500 var(--fs-xs)/1.2 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris); }
.forfaits td:last-child, .forfaits th:last-child { text-align: right; white-space: nowrap; padding-left: var(--sp-4); }
.forfaits .montant { font: 600 var(--fs-h4)/1 var(--f-titre); color: var(--c-champagne); font-size: 1.6rem; }
.forfaits small { display: block; color: var(--c-gris); font-size: var(--fs-sm); }
.formule { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.formule ul { list-style: none; display: grid; gap: var(--sp-2); color: var(--c-gris); }

.service { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg); background: var(--c-noir-2); box-shadow: var(--ombre-1); text-decoration: none; color: inherit; transition: box-shadow var(--d-base), transform var(--d-base) var(--e-sortie); }
.service:hover { box-shadow: var(--halo-champagne); transform: translateY(-2px); }
.service__media { aspect-ratio: 4 / 3; overflow: hidden; }
.service__corps { padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.service__titre { font-size: var(--fs-h3); }
.service__prix { color: var(--c-champagne); font-weight: 550; font-variant-numeric: tabular-nums; }
.service p { color: var(--c-gris); }
.photo-slot { position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio, 4 / 3); background: linear-gradient(135deg, #1A0B2A 0%, #22103A 100%); border: 1px dashed rgba(212,175,55,.35); border-radius: inherit; height: 100%; }
.photo-slot::after { content: attr(data-photo-label); max-width: 24ch; text-align: center; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); padding: var(--sp-3); }

.colonnes { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 960px) { .colonnes { grid-template-columns: 1fr 1fr; } }
.liste-points { list-style: none; display: grid; gap: var(--sp-3); }
.liste-points li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.liste-points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .65em; border-radius: 50%; background: var(--c-champagne); }
.etapes-resa { list-style: none; counter-reset: etape; display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .etapes-resa { grid-template-columns: repeat(3, 1fr); } }
.etapes-resa li { counter-increment: etape; display: grid; gap: var(--sp-2); }
.etapes-resa li::before { content: counter(etape); font: 600 var(--fs-h2)/1 var(--f-titre); color: var(--c-champagne); }
.etapes-resa p { color: var(--c-gris); }
.inclus { display: grid; gap: var(--sp-4); list-style: none; }
@media (min-width: 640px) { .inclus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .inclus { grid-template-columns: repeat(3, 1fr); } }
.inclus li { padding: var(--sp-5); background: var(--c-noir-2); border-radius: var(--r-lg); display: grid; gap: var(--sp-2); }
.inclus strong { font-weight: 600; }
.inclus span { color: var(--c-gris); font-size: var(--fs-sm); }
.faq { display: grid; gap: var(--sp-2); max-width: var(--conteneur-etroit); }
.faq details { border-bottom: 1px solid var(--c-ligne); }
.faq summary { cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-weight: 550; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-champagne); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--sp-5); color: var(--c-gris); }
.cta-final { text-align: center; display: grid; gap: var(--sp-5); justify-items: center; }
.cta-final__boutons { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--c-ligne); padding-block: var(--sp-8) var(--sp-6); font-size: var(--fs-sm); color: var(--c-gris); }
.pied__grille { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied h2 { font: 600 var(--fs-xs)/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--c-blanc); margin-bottom: var(--sp-3); }
.pied ul { list-style: none; display: grid; gap: var(--sp-1); }
.pied a { color: var(--c-gris); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.pied a:hover { color: var(--c-champagne); }
.pied__bas { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-ligne); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: var(--fs-xs); }

/* Bandeau maquette (local uniquement) */
.bandeau-maquette { background: var(--c-champagne-fonce); color: #F4F3F7; font-size: var(--fs-xs); text-align: center; padding: 6px var(--gouttiere); position: relative; z-index: 70; }

/* Page simple (pages légales provisoires) */
.page-simple { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
.page-simple .conteneur { max-width: var(--conteneur-etroit); display: grid; gap: var(--sp-5); }

/* ---------- Ajouts pages ---------- */
/* Lot 1 (2026-10-25, Inès) : consignes de Jade § 2 et § 3. Les lots 2 et 3 ne modifient plus ce fichier. */

/* Cibles tactiles et clavier ouvert */
.pied a { min-height: 44px; }
body.clavier-ouvert .barre-mobile { transform: translateY(100%); }
.barre-mobile .btn--secondaire { background: var(--c-noir-2); }

/* Fil d'Ariane (pages intérieures) */
.ariane { padding-top: calc(var(--header-h) + var(--sp-5)); font-size: var(--fs-sm); color: var(--c-gris); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; }
.ariane li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-ligne); }
.ariane a { color: var(--c-gris); min-height: 44px; display: inline-flex; align-items: center; }
.ariane [aria-current="page"] { color: var(--c-blanc); }

/* En-tête de page intérieure */
.hero--page { min-height: auto; padding-block: var(--sp-6) var(--sp-8); }
.hero--page .hero__titre { max-width: 20ch; }
.hero--page .photo-slot { --ratio: 16 / 9; border-radius: var(--r-lg); }
@media (max-width: 639px) { .hero--page .hero__sous-titre { display: block; } }

/* Mini-CTA */
.cta-mini { display: grid; gap: var(--sp-4); padding: var(--sp-6); background: var(--c-noir-2); border-radius: var(--r-lg); border: 1px solid var(--c-ligne); }
@media (min-width: 640px) { .cta-mini { grid-template-columns: 1fr auto; align-items: center; } }
.cta-mini__boutons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Liens entre pages (maillage) */
.maillage { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
@media (min-width: 640px) { .maillage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .maillage { grid-template-columns: repeat(3, 1fr); } }
.maillage a { display: flex; justify-content: space-between; min-height: 56px; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-4); border: 1px solid var(--c-ligne); border-radius: var(--r-md); color: var(--c-blanc); text-decoration: none; transition: border-color var(--d-base); }
.maillage a:hover { border-color: var(--c-champagne); }
.maillage a::after { content: "→"; color: var(--c-champagne); }

/* Bloc avis à venir */
.avis-vide { padding: var(--sp-6); border: 1px dashed var(--c-ligne); border-radius: var(--r-lg); color: var(--c-gris); text-align: center; }
.avis-vide p { margin-inline: auto; }

/* Hero : emplacement photo en fond */
.hero__media.photo-slot { position: absolute; aspect-ratio: auto; height: auto; border: 0; border-radius: 0; place-items: end start; }
.hero__media.photo-slot::after { position: relative; z-index: 1; background: none; }

/* Module de réservation : compléments */
.resa__titre { font: 600 var(--fs-lg)/1.2 var(--f-texte); margin: 0; }
.resa__adresses { display: grid; gap: var(--sp-3); position: relative; }
.resa__inverser { justify-self: end; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; background: none; border: 0; padding: 0 var(--sp-2); color: var(--c-champagne); font-size: var(--fs-sm); cursor: pointer; }
.resa__nav--seul { grid-template-columns: 1fr; }
.resa__aide { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-gris); }
.resa__aide a { color: var(--c-blanc); min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); }
.champ__opt { font-weight: 400; color: var(--c-gris); }
.prix__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-gris); }
.prix__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.alerte a { color: var(--c-blanc); }
.mention a { color: var(--c-gris); text-decoration: underline; }
.minutes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }

/* Header : liens réservation et appel */
.header__nav a[aria-current="page"] { color: var(--c-champagne); }
.menu-mobile .menu-mobile__titre { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gris); }

/* Pied : NAP */
.pied__nap { display: grid; gap: var(--sp-2); font-style: normal; }
.pied__nap strong { color: var(--c-blanc); font: 600 var(--fs-lg)/1 var(--f-titre); letter-spacing: .14em; }
.pied__marqueur { color: var(--c-champagne); }

/* ---------- Module de prix à l'horizontale (grand écran) ---------- */
@media (min-width: 1100px) {
  .hero__grille { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__texte { padding-top: var(--sp-5); }
  .hero__titre { max-width: 22ch; }
  .resa { padding: var(--sp-5) var(--sp-6); }
  .resa__etape[data-etape="1"] { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: end;
    grid-template-areas: "adr date ar" "puces depli depli" "carte carte carte" "prix prix nav" "alerte alerte alerte"; }
  .resa__etape[data-etape="1"] .resa__adresses { grid-area: adr; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
  .resa__etape[data-etape="1"] .resa__inverser { justify-self: center; width: 44px; height: 52px; padding: 0; justify-content: center; }
  .resa__etape[data-etape="1"] .resa__inverser span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .resa__etape[data-etape="1"] .resa__inverser .icone { transform: rotate(90deg); }
  .resa__etape[data-etape="1"] > [data-champ="date"] { grid-area: date; }
  .resa__etape[data-etape="1"] > .interrupteur { grid-area: ar; min-height: 52px; }
  .resa__etape[data-etape="1"] > .puces { grid-area: puces; flex-wrap: wrap; overflow: visible; align-self: center; }
  .resa__etape[data-etape="1"] > .depli { grid-area: depli; min-width: 0; }
  .resa__etape[data-etape="1"] > .depli:not(.is-open) { display: none; }
  .resa__etape[data-etape="1"] [data-champ="retour"] .sheet { left: auto; right: 0; }
  .resa__etape[data-etape="1"] > .carte-zone { grid-area: carte; }
  .resa__etape[data-etape="1"] > .prix { grid-area: prix; }
  .resa__etape[data-etape="1"] > .alerte { grid-area: alerte; }
  .resa__etape[data-etape="1"] > .resa__nav { grid-area: nav; align-self: center; }
  .resa__etape[data-etape="1"] .champ__erreur { position: absolute; top: 100%; }
}

/* ---------- Petites animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__texte > *, .hero .resa { animation: entree .7s var(--e-sortie) both; }
  .hero__texte > :nth-child(2) { animation-delay: .08s; }
  .hero__texte > :nth-child(3) { animation-delay: .16s; }
  .hero__texte > :nth-child(4) { animation-delay: .24s; }
  .hero .resa { animation-delay: .3s; }
  .resa__etape:not([hidden]) { animation: entree .45s var(--e-sortie); }
  .carte-zone:not([hidden]), .prix:not(.prix--vide) { animation: entree .5s var(--e-sortie); }
  .btn { transition: transform var(--d-rapide) var(--e-sortie), background-color var(--d-rapide), box-shadow var(--d-base); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,55,.18); }
  .btn:active, .puce:active { transform: scale(.97); }
  .puce { transition: transform var(--d-rapide), border-color var(--d-rapide), color var(--d-rapide), background-color var(--d-rapide); }
  .puce:hover { border-color: var(--c-champagne); color: var(--c-champagne); }
  .service { transition: transform var(--d-base) var(--e-sortie), box-shadow var(--d-base); }
  .service:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
  .service__media { transition: transform .8s var(--e-sortie); }
  .service:hover .service__media { transform: scale(1.03); }
  .champ__input:hover { border-color: var(--c-bordure); }
  .reveal:nth-child(2) { transition-delay: .06s; } .reveal:nth-child(3) { transition-delay: .12s; } .reveal:nth-child(4) { transition-delay: .18s; }
}
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 1100px) {
  .resa__etape[data-etape="1"] [data-ouvrir-date] [data-valeur] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .resa__etape[data-etape="1"] > .resa__nav { align-self: end; }
}

/* ---------- Module de prix mis en avant (consignes Jade) ---------- */
.resa { background: linear-gradient(160deg, #26103D 0%, #1C1813 100%); border: 1px solid rgba(212,175,55,.55);
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 12px 40px -12px rgba(212,175,55,.25), inset 0 1px 0 rgba(244,243,247,.05), 0 24px 48px -24px rgba(0,0,0,.8); }
.resa__titre { color: #D4AF37; font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-titre); }
.resa .champ__input { background: #0F0618; border-color: #8E8E99; color: #F4F3F7; }
.resa .champ__label { color: #C0C0C0; }
.resa .champ__input:focus, .resa .champ__input:focus-visible { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,.35); outline: none; }

/* ---------- Carrousel des forfaits (consignes Jade) ---------- */
.carrousel { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.carrousel__piste { --vis: 1.15; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--sp-4)) / var(--vis) - .01px);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; list-style: none; margin: 0; padding: 4px 2px var(--sp-2); scrollbar-width: none; }
.carrousel__piste::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .carrousel__piste { --vis: 2; } }
@media (min-width: 1024px) { .carrousel__piste { --vis: 3; } }
@media (prefers-reduced-motion: reduce) { .carrousel__piste { scroll-behavior: auto; } }
.forfait { scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; gap: var(--sp-5); min-height: 190px; padding: var(--sp-5);
  background: var(--c-noir-2); border: 1px solid var(--c-ligne); border-radius: var(--r-lg); box-shadow: var(--ombre-1);
  transition: transform var(--d-base) var(--e-sortie), border-color var(--d-base); }
.forfait:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.55); }
.forfait__trajet { font: 600 var(--fs-lg)/1.3 var(--f-texte); color: var(--c-blanc); }
.forfait__note { display: block; margin-top: var(--sp-2); color: var(--c-gris); font-size: var(--fs-sm); }
.forfait .montant { align-self: end; font: 600 2.2rem/1 var(--f-titre); color: var(--c-champagne); font-variant-numeric: tabular-nums; }
.carrousel__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.carrousel__points { display: flex; flex-wrap: wrap; }
.carrousel__point { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; margin-right: -24px; }
.carrousel__point::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #8E8E99; transition: width var(--d-base) var(--e-sortie), background-color var(--d-base); }
.carrousel__point[aria-current="true"]::before { width: 24px; background: #D4AF37; }
.carrousel__point[aria-current="true"] { margin-right: -8px; }
.carrousel__fleches { display: none; gap: var(--sp-3); }
@media (min-width: 1024px) { .carrousel__fleches { display: flex; } }
.carrousel__fleche { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: none; border: 1px solid #8E8E99; color: #F4F3F7; cursor: pointer; transition: border-color var(--d-rapide), color var(--d-rapide); }
.carrousel__fleche:hover:not(:disabled) { border-color: #D4AF37; color: #D4AF37; }
.carrousel__fleche:disabled { color: #8E8E99; cursor: default; }
.carrousel__fleche .icone { width: 22px; height: 22px; }

/* ---------- Corrections d'affichage (revue visuelle) ---------- */
/* Titre d'accueil centré (téléphone et grand écran, là où le module est en dessous) */
@media (max-width: 959px), (min-width: 1100px) {
  .hero__texte { text-align: center; justify-items: center; }
  .hero__titre, .hero__sous-titre { margin-inline: auto; }
  .hero__sous-titre { max-width: 52ch; }
}
@media (min-width: 1100px) {
  .hero__garanties { grid-template-columns: repeat(2, auto); justify-content: center; gap: var(--sp-3) var(--sp-7); }
}
@media (min-width: 640px) and (max-width: 959px) { .hero__garanties { justify-content: center; } }
/* Le texte « Photo : … » de l'image d'accueil passait sous le module de prix */
.hero__media.photo-slot::after { display: none; }
/* Listes numérotées sans retrait parasite */
.resa__etapes, .etapes-resa { padding: 0; margin: 0; }
.etapes-resa li { align-content: start; }
/* « Besoin d'aide ? » aligné sur une ligne */
.resa__aide { align-items: center; }
.resa__aide > span { min-height: 44px; display: inline-flex; align-items: center; }
/* Services : la 7e carte seule sur sa ligne prend toute la largeur, en horizontal */
@media (min-width: 960px) {
  .grille--3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .grille--3 > :last-child:nth-child(3n + 1) .service__media, .grille--3 > :last-child:nth-child(3n + 1) .photo-slot { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .grille--3 > :last-child:nth-child(3n + 1) > :last-child { align-self: center; }
}
/* Photos du véhicule : la 1re en grand, les deux autres dessous (plus de trou) */
@media (min-width: 640px) {
  .colonnes .grille--2 > :first-child:nth-last-child(3) { grid-column: 1 / -1; --ratio: 16 / 9; }
}
@media (max-width: 639px) {
  .colonnes .grille--2 { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .colonnes .grille--2 > :first-child { grid-column: 1 / -1; }
  .colonnes .grille--2 .photo-slot::after { font-size: 10px; }
}
/* Boutons de fin de page : empilés et pleine largeur sur téléphone */
@media (max-width: 639px) {
  .cta-final__boutons { display: grid; width: 100%; }
  .cta-final__boutons > * { width: 100%; }
}

/* ---------- Avis clients avec étoiles ---------- */
.avis-entete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.avis-note { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-gris); font-size: var(--fs-sm); }
.avis-note strong { font: 600 2rem/1 var(--f-titre); color: var(--c-blanc); }
.etoiles { --note: 5; position: relative; display: inline-block; font-size: 1.15rem; letter-spacing: 3px; line-height: 1; color: #55515F; }
.etoiles::before { content: "★★★★★"; }
.etoiles::after { content: "★★★★★"; position: absolute; inset: 0; width: calc(var(--note) / 5 * 100%); overflow: hidden; color: #D4AF37; white-space: nowrap; }
.avis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 960px) { .avis-liste { grid-template-columns: repeat(3, 1fr); } }
.avis { position: relative; display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-5); background: var(--c-noir-2); border: 1px solid var(--c-ligne); border-radius: var(--r-lg); box-shadow: var(--ombre-1); transition: transform var(--d-base) var(--e-sortie), border-color var(--d-base); }
.avis:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.55); }
.avis blockquote { margin: 0; color: var(--c-blanc); line-height: 1.6; }
.avis footer { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-gris); font-size: var(--fs-sm); }
.avis__initiale { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #4B0082; color: #D4AF37; font: 600 1rem/1 var(--f-titre); }
.avis__nom { color: var(--c-blanc); font-weight: 600; display: block; }
.avis__exemple { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #D4AF37; border: 1px dashed rgba(212,175,55,.6); border-radius: var(--r-rond); padding: 3px 8px; }

/* ---------- Carrousel : défilement automatique et animations ---------- */
.forfait { transition: transform .6s var(--e-sortie), opacity .6s var(--e-sortie), border-color var(--d-base), box-shadow .6s var(--e-sortie); }
.carrousel[data-auto] .forfait { opacity: .55; transform: scale(.96); }
.carrousel[data-auto] .forfait.is-active { opacity: 1; transform: none; border-color: rgba(212,175,55,.55); box-shadow: 0 12px 40px -12px rgba(212,175,55,.25), var(--ombre-1); }
.carrousel[data-auto] .forfait.is-active .montant { animation: prix-in .6s var(--e-sortie); }
.carrousel__pause { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: none; border: 1px solid #8E8E99; color: #F4F3F7; cursor: pointer; }
.carrousel__pause:hover { border-color: #D4AF37; color: #D4AF37; }
.carrousel__pause .icone { width: 18px; height: 18px; }
.carrousel__fleches { align-items: center; }
@media (max-width: 1023px) { .carrousel__fleches { display: flex; } .carrousel__fleches .carrousel__fleche { display: none; } }
.carrousel__progres { height: 2px; background: var(--c-ligne); border-radius: 2px; overflow: hidden; }
.carrousel__progres span { display: block; height: 100%; width: 100%; background: #D4AF37; transform-origin: left; transform: scaleX(0); }
.carrousel.is-lecture .carrousel__progres span { animation: progres var(--duree, 4.5s) linear forwards; }
.carrousel:not([data-auto]) .carrousel__progres { display: none; }
@keyframes progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carrousel__points { gap: 0; }
.carrousel__point, .carrousel__point[aria-current="true"] { width: 20px; margin: 0; }
.carrousel__point[aria-current="true"] { width: 36px; }
.forfait { min-height: 0; gap: var(--sp-4); }
/* Barre du bas (téléphone) : cachée tant que le module de prix est à l'écran, pour ne rien recouvrir */
.barre-mobile { transition: transform var(--d-base) var(--e-sortie); }
body.resa-a-l-ecran .barre-mobile { transform: translateY(110%); }
@media (max-width: 639px) {
  .cta-final__boutons { width: min(100%, 360px); }
  .cta-final__boutons > * { justify-content: center; }
}
.depli:not(.is-open) > div { visibility: hidden; }

/* ---------- Photos des lieux ---------- */
.photo-slot.a-photo { background: #130820; border: 0; }
.photo-slot.a-photo::after { display: none; }
.photo-slot.a-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media.a-photo img { object-position: 50% 60%; }
.hero__media.a-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,6,24,.72) 0%, rgba(15,6,24,.55) 40%, rgba(15,6,24,.92) 100%); }
.pied__credits { color: var(--c-gris); font-size: var(--fs-xs); min-height: 44px; display: inline-flex; align-items: center; }
.hero__media.a-photo::before { background: linear-gradient(180deg, rgba(15,6,24,.8) 0%, rgba(15,6,24,.72) 45%, rgba(15,6,24,.95) 100%); }

/* ---------- Ajouts pages ---------- */
.page-interieure .ariane { padding-bottom: 0; }
.hero--page { padding-top: var(--sp-4); }
.hero__grille--page { align-items: center; }
@media (min-width: 960px) { .hero__grille--page { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.hero--page .hero__texte { text-align: left; justify-items: start; }
.hero--page .hero__titre, .hero--page .hero__sous-titre { margin-inline: 0; }
.hero--page .hero__sous-titre { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero--page .photo-slot { aspect-ratio: 16 / 9; overflow: hidden; }
.conteneur--etroit { max-width: var(--conteneur-etroit, 760px); }
.bloc { display: grid; gap: var(--sp-3); max-width: 72ch; }
.bloc + .bloc { margin-top: var(--sp-7); }
.bloc h3 { font: 600 var(--fs-lg)/1.3 var(--f-texte); margin-top: var(--sp-3); }
.bloc p { color: var(--c-gris); line-height: 1.7; }
.section--clair .bloc p { color: #55515F; }
.bloc a, .texte-long a { color: var(--c-champagne); text-decoration: underline; text-underline-offset: 3px; }
.section--clair .bloc a { color: var(--c-champagne-fonce); }
.colonnes--haut { align-items: start; }
.prix--page { display: grid; gap: var(--sp-2); }
.prix__montant--page { display: block; font: 600 clamp(2.4rem, 2rem + 2vw, 3.4rem)/1 var(--f-titre); color: var(--c-champagne); }
.prix__montant--page span:not([data-tarif]) { font-size: .45em; color: var(--c-gris); font-family: var(--f-texte); }
.photo-inline { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; margin-top: var(--sp-3); }
.cta-mini__titre { font-size: var(--fs-h3, 1.6rem); margin-bottom: var(--sp-2); }
.maillage__titre { margin: var(--sp-8) 0 var(--sp-5); }
.faq__theme { margin: var(--sp-7) 0 var(--sp-3); }
.faq__theme:first-child { margin-top: 0; }
.tableau { overflow-x: auto; }
.forfaits td a { color: var(--c-blanc); text-decoration: none; }
.forfaits td a:hover { color: var(--c-champagne); }
.contact-cartes { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .contact-cartes { grid-template-columns: repeat(3, 1fr); } }
.contact-carte { display: grid; gap: var(--sp-2); padding: var(--sp-6); background: var(--c-noir-2); border: 1px solid var(--c-ligne); border-radius: var(--r-lg); color: var(--c-blanc); text-decoration: none; transition: border-color var(--d-base), transform var(--d-base) var(--e-sortie); }
a.contact-carte:hover { border-color: rgba(212,175,55,.55); transform: translateY(-3px); }
.contact-carte .icone { width: 28px; height: 28px; color: var(--c-champagne); }
.contact-carte span { color: var(--c-gris); }
/* Pages légales */
.page-legale { padding-top: var(--sp-5); }
.texte-long { display: grid; gap: var(--sp-4); }
.texte-long h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.texte-long h2 { font-size: var(--fs-h4, 1.4rem); margin-top: var(--sp-6); }
.texte-long h3 { font: 600 var(--fs-lg)/1.3 var(--f-texte); margin-top: var(--sp-4); }
.texte-long p, .texte-long li { color: var(--c-gris); line-height: 1.7; }
.texte-long ul, .texte-long ol { padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.texte-long table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.texte-long th, .texte-long td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-ligne); vertical-align: top; color: var(--c-gris); }
.texte-long th { color: var(--c-blanc); }
.texte-long td:first-child { color: var(--c-blanc); min-width: 12ch; }
.texte-long strong { color: var(--c-blanc); }
.texte-long code { font-size: .9em; }
.page-interieure .barre-mobile { transform: none; }
.hero__grille--page > * { min-width: 0; }
.hero--page .photo-slot { width: 100%; height: auto; align-self: center; }
.ariane li { display: inline-flex; align-items: center; }
.ariane a { text-decoration: none; }
.ariane a:hover { color: var(--c-champagne); }
.hero--page { padding-bottom: var(--sp-6); }
@media (min-width: 960px) {
  .page-interieure .section > .conteneur:has(> .bloc + .bloc) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-8); align-items: start; }
  .page-interieure .section > .conteneur > .bloc + .bloc { margin-top: 0; }
  .page-interieure .section > .conteneur:has(> .bloc + .bloc) > .bloc:has(.tableau) { grid-row: span 2; }
}
.bloc .etapes-resa { grid-template-columns: 1fr; gap: var(--sp-4); }

/* ---------- Animations supplémentaires (discrètes) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Cascade des cartes */
  .reveal--cascade { transition-delay: var(--delai, 0ms); }
  .reveal--cascade.is-visible { transition-delay: var(--delai, 0ms); }
  /* Photo d'accueil : léger zoom lent, effet « cinéma » */
  .hero__media.a-photo img { animation: zoom-lent 22s ease-out both; }
  @keyframes zoom-lent { from { transform: scale(1.08); } to { transform: scale(1); } }
  /* Photos des pages : apparition douce */
  .hero--page .photo-slot img { animation: photo-in 1s var(--e-sortie) .15s both; }
  @keyframes photo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
  .hero--page .hero__texte > * { animation: entree .7s var(--e-sortie) both; }
  .hero--page .hero__texte > :nth-child(2) { animation-delay: .08s; }
  .hero--page .hero__texte > :nth-child(3) { animation-delay: .16s; }
  /* Trait doré qui se dessine sous les titres de section */
  .section__entete h2::after, .bloc > h2::after { content: ""; display: block; width: 48px; height: 2px; margin-top: var(--sp-3); background: #D4AF37; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--e-sortie) .25s; }
  .section__entete.is-visible h2::after, .bloc.is-visible > h2::after { transform: scaleX(1); }
  /* Zoom des photos des services au survol */
  .service .service__media img { transition: transform .9s var(--e-sortie); }
  .service:hover .service__media img { transform: scale(1.06); }
  .service:hover .service__media { transform: none; }
  /* Reflet qui passe sur les boutons dorés au survol */
  .btn--primaire { position: relative; overflow: hidden; }
  .btn--primaire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
  .btn--primaire:hover::after { transform: translateX(120%); transition: transform .8s var(--e-sortie); }
  /* FAQ : la réponse glisse en douceur */
  .faq details[open] p { animation: entree .4s var(--e-sortie); }
  .faq summary::after { transition: transform var(--d-base) var(--e-sortie); }
  .faq details[open] summary::after { transform: rotate(180deg); }
  /* Liens du maillage : la flèche avance au survol */
  .maillage a::after { transition: transform var(--d-base) var(--e-sortie); }
  .maillage a:hover::after { transform: translateX(4px); }
  /* Cartes contact et « inclus » : léger soulèvement */
  .inclus li { transition: transform var(--d-base) var(--e-sortie), background-color var(--d-base); }
  .inclus li:hover { transform: translateY(-3px); }
  /* Étoiles des avis qui se remplissent */
  .avis-liste.is-visible .etoiles::after, .avis.is-visible .etoiles::after { animation: etoiles 1.2s var(--e-sortie) .3s both; }
  @keyframes etoiles { from { width: 0; } }
}
@media (prefers-reduced-motion: no-preference) { .reveal--cascade.is-visible:hover, .reveal--cascade.is-visible:focus-within { transition-delay: 0ms; } }

/* ---------- Module « Calculez votre prix » animé ---------- */
@property --angle-resa { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@media (prefers-reduced-motion: no-preference) {
  /* Liseré de lumière dorée qui fait le tour du cadre */
  .resa { isolation: isolate; }
  .resa::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--angle-resa), transparent 0deg, transparent 280deg, rgba(236,206,104,.95) 320deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: tour-resa 6s linear infinite; }
  @keyframes tour-resa { to { --angle-resa: 360deg; } }
  /* Halo doré qui respire doucement */
  .resa { animation: entree .7s var(--e-sortie) .3s both, halo-resa 5s ease-in-out 1.2s infinite; }
  @keyframes halo-resa {
    0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 12px 40px -12px rgba(212,175,55,.25), 0 24px 48px -24px rgba(0,0,0,.8); }
    50% { box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 16px 60px -10px rgba(212,175,55,.42), 0 24px 48px -24px rgba(0,0,0,.8); }
  }
  /* Les champs arrivent l'un après l'autre */
  .resa__titre, .resa__etapes, .resa__etape[data-etape="1"] > * { animation: entree .6s var(--e-sortie) both; }
  .resa__titre { animation-delay: .45s; }
  .resa__etapes { animation-delay: .55s; }
  .resa__etape[data-etape="1"] > :nth-child(2) { animation-delay: .62s; }
  .resa__etape[data-etape="1"] > :nth-child(3) { animation-delay: .7s; }
  .resa__etape[data-etape="1"] > :nth-child(4) { animation-delay: .78s; }
  .resa__etape[data-etape="1"] > :nth-child(5) { animation-delay: .86s; }
  .resa__etape[data-etape="1"] > :nth-child(n+6) { animation-delay: .94s; }
  /* Titre : reflet doré qui glisse */
  .resa__titre { background: linear-gradient(100deg, #D4AF37 0%, #D4AF37 40%, #F3E3BC 50%, #D4AF37 60%, #D4AF37 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: entree .6s var(--e-sortie) .45s both, reflet-titre 7s ease-in-out 2s infinite; }
  @keyframes reflet-titre { 0%, 70% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
  /* Champs : légère lueur dorée à la saisie */
  .resa .champ__input { transition: border-color var(--d-rapide), box-shadow var(--d-base), transform var(--d-rapide); }
  .resa .champ__input:focus { transform: translateY(-1px); }
  /* Raccourcis : se remplissent de doré au survol */
  .resa .puce:hover { background: rgba(212,175,55,.12); }
  .resa .puce[aria-pressed="true"] { animation: puce-choisie .45s var(--e-sortie); }
  @keyframes puce-choisie { 40% { transform: scale(1.06); } }
  /* Quand le prix apparaît : le cadre du prix s'illumine, le bouton Continuer pulse 3 fois */
  .resa .prix:not(.prix--vide) { animation: entree .5s var(--e-sortie), prix-lueur 1.6s var(--e-sortie) .2s; }
  @keyframes prix-lueur { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); } 100% { box-shadow: 0 0 0 14px rgba(212,175,55,0); } }
  .resa:has(.prix:not(.prix--vide)) [data-etape="1"] [data-suivant] { animation: bouton-pulse 1.8s var(--e-sortie) .6s 3; }
  @keyframes bouton-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(212,175,55,0); } }
  /* Passage d'une étape à l'autre : glissement latéral */
  .resa__etape[data-etape="2"]:not([hidden]), .resa__etape[data-etape="3"]:not([hidden]) { animation: etape-in .5s var(--e-sortie); }
  @keyframes etape-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  .resa__etapes li { transition: color var(--d-base); }
  .resa__etapes li[aria-current="step"] { position: relative; }
  .resa__etapes li[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #D4AF37; animation: trait-etape .5s var(--e-sortie); transform-origin: left; }
  @keyframes trait-etape { from { transform: scaleX(0); } }
}
/* Calendrier ouvert : le module et sa section passent au-dessus du voile (toutes pages) */
.resa:has(.sheet.is-open), .section:has(.sheet.is-open) { position: relative; z-index: 81; }

/* ---------- Module de prix : effet au survol de la souris ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .resa { transition: translate .5s var(--e-sortie), border-color .5s, box-shadow .5s; }
  .resa::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--e-sortie);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212,175,55,.13), transparent 65%); }
  .resa:hover::after { opacity: 1; }
  .resa:hover:not(:has(.sheet.is-open)) { translate: 0 -4px; border-color: rgba(236,206,104,.85); }
  .resa:hover { animation: none; box-shadow: 0 0 0 1px rgba(212,175,55,.6), 0 22px 70px -12px rgba(212,175,55,.45), 0 30px 60px -24px rgba(0,0,0,.85); }
  .resa::before { transition: opacity .5s; }
  .resa:hover::before { animation-duration: 2.5s; filter: brightness(1.3) drop-shadow(0 0 6px rgba(236,206,104,.8)); }
  .resa:hover .resa__titre { animation-duration: .6s, 2.5s; }
}

/* Survol du module de prix : lumière et contour visibles même avec « Réduire les animations » (aucun mouvement) */
@media (hover: hover) {
  .resa { position: relative; isolation: isolate; }
  .resa::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(212,175,55,.2), transparent 65%); }
  .resa:hover::after { opacity: 1; }
  .resa:hover { border-color: rgba(236,206,104,.95); box-shadow: 0 0 0 1px rgba(212,175,55,.7), 0 0 50px -6px rgba(212,175,55,.5), 0 30px 60px -24px rgba(0,0,0,.85); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .resa:hover:not(:has(.sheet.is-open)) { translate: 0 -6px; }
}

/* ---------- Bouton flottant « Nous contacter » ---------- */
.contact-flottant { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: grid; justify-items: end; gap: var(--sp-3);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .35s var(--e-sortie), transform .35s var(--e-sortie), visibility 0s linear .35s; }
.contact-flottant.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--e-sortie), transform .35s var(--e-sortie), visibility 0s; }
.contact-flottant__bouton { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 18px; border: 0; border-radius: 30px; cursor: pointer;
  background: linear-gradient(135deg, #E6C65A, #D4AF37 55%, #A8871E); color: #0F0618; font: 600 var(--fs-sm)/1 var(--f-texte);
  box-shadow: 0 10px 30px -6px rgba(212,175,55,.55), 0 4px 12px rgba(0,0,0,.4); transition: transform var(--d-base) var(--e-sortie), box-shadow var(--d-base); }
.contact-flottant__bouton:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -6px rgba(212,175,55,.7), 0 4px 12px rgba(0,0,0,.4); }
.contact-flottant__bouton svg { width: 24px; height: 24px; flex: none; }
.contact-flottant__fermer { display: none; }
.contact-flottant.is-ouvert .contact-flottant__icone { display: none; }
.contact-flottant.is-ouvert .contact-flottant__fermer { display: block; }
.contact-flottant__menu { display: grid; gap: 4px; min-width: 260px; padding: 8px; background: var(--c-noir-2); border: 1px solid rgba(212,175,55,.45); border-radius: var(--r-lg);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.8), 0 0 40px -12px rgba(212,175,55,.35); }
.contact-flottant__menu:not([hidden]) { animation: entree .3s var(--e-sortie); }
.contact-flottant__menu a { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; min-height: 52px; border-radius: var(--r-md, 10px); color: var(--c-blanc); text-decoration: none; transition: background-color var(--d-rapide); }
.contact-flottant__menu a:hover, .contact-flottant__menu a:focus-visible { background: rgba(212,175,55,.12); }
.contact-flottant__menu .icone { grid-row: span 2; width: 22px; height: 22px; color: #D4AF37; }
.contact-flottant__menu span { font-weight: 600; }
.contact-flottant__menu small { color: var(--c-gris); font-size: var(--fs-xs); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .contact-flottant.is-visible:not(.is-ouvert) .contact-flottant__bouton::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(212,175,55,.55); animation: appel-pulse 2.6s var(--e-sortie) 1s infinite; pointer-events: none; }
  @keyframes appel-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(212,175,55,0); } }
}
/* Sur téléphone : la barre du bas (Appeler / WhatsApp) fait déjà ce travail, le bouton reste rond et se place au-dessus */
@media (max-width: 959px) {
  .contact-flottant { right: 16px; bottom: calc(var(--barre-mobile) + 12px); }
  .contact-flottant__bouton { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .contact-flottant__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.resa-a-l-ecran .contact-flottant { bottom: 16px; }
}

/* ---------- Même effet au survol pour toutes les cases ---------- */
@media (hover: hover) {
  :is(.forfait, .service, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .maillage a, .alerte--info, .etapes-resa li) { position: relative; isolation: isolate; }
  :is(.forfait, .service, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .maillage a, .alerte--info, .etapes-resa li)::before {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--e-sortie);
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(212,175,55,.16), transparent 65%); }
  :is(.forfait, .service, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .maillage a, .alerte--info, .etapes-resa li):hover::before { opacity: 1; }
  :is(.forfait, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .alerte--info):hover { border-color: rgba(236,206,104,.9); box-shadow: 0 0 0 1px rgba(212,175,55,.55), 0 0 40px -8px rgba(212,175,55,.45), 0 20px 40px -20px rgba(0,0,0,.8); }
  .service:hover { box-shadow: 0 0 0 1px rgba(212,175,55,.6), 0 0 44px -8px rgba(212,175,55,.45), 0 24px 48px -24px rgba(0,0,0,.5); }
  .maillage a:hover { box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 0 30px -10px rgba(212,175,55,.45); }
  .inclus li, .etapes-resa li { border: 1px solid transparent; border-radius: var(--r-lg); }
  .etapes-resa li { padding: var(--sp-3); margin: calc(var(--sp-3) * -1); }
  .etapes-resa li:hover { border-color: rgba(212,175,55,.4); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.forfait, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .alerte--info, .etapes-resa li) { transition: translate .4s var(--e-sortie), border-color .4s, box-shadow .4s, opacity .6s var(--e-sortie), transform .6s var(--e-sortie); }
  :is(.forfait, .inclus li, .avis, .contact-carte, .cta-mini, .prix--page, .alerte--info, .etapes-resa li):hover { translate: 0 -4px; }
}
.forfait:hover, .avis:hover, .inclus li:hover { transform: none; }

/* ---------- Section services : fond sombre aux couleurs du site ---------- */
.section--services { background: linear-gradient(180deg, var(--c-noir) 0%, #1E0A36 50%, var(--c-noir) 100%); border-block: 1px solid var(--c-ligne); }
.section--services .service { background: var(--c-noir-2); color: var(--c-blanc); border: 1px solid var(--c-ligne); }
.section--services .service h3 { color: var(--c-blanc); }
.section--services .service p { color: var(--c-gris); }
.section--services .service__prix { color: #D4AF37; font-weight: 600; }
.section--services .service:hover { border-color: rgba(236,206,104,.9); }
.section--services .surtitre { color: var(--c-champagne); }
.section--services .service .service__prix { color: #D4AF37; }

/* ---------- Bouton « Faire un devis rapide » sous les services ---------- */
.services__cta { display: flex; justify-content: center; margin-top: var(--sp-7); }
.btn--devis { gap: 10px; min-height: 58px; padding: 0 34px; font-size: var(--fs-lg, 1.1rem); font-weight: 600; border-radius: var(--r-rond, 999px);
  background: linear-gradient(135deg, #E3CB98, #D4AF37 55%, #A8871E); color: #0F0618; box-shadow: 0 12px 34px -8px rgba(212,175,55,.55); }
.btn--devis:hover { background: linear-gradient(135deg, #EBD6A8, #D4B57B 55%, #BD9C5E); box-shadow: 0 16px 44px -8px rgba(212,175,55,.75); }
.btn--devis .icone { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .btn--devis .icone { transition: transform var(--d-base) var(--e-sortie); }
  .btn--devis:hover .icone { transform: translateX(4px); }
  .btn--devis:hover { transform: translateY(-2px); }
}
@media (max-width: 639px) { .btn--devis { width: 100%; justify-content: center; } }
.services__cta { width: 100%; grid-column: 1 / -1; justify-self: stretch; text-align: center; }
.services__cta { max-width: none; margin-inline: 0; }

/* ---------- « Comment ça marche » centré ---------- */
.section--etapes .section__entete { text-align: center; justify-items: center; }
.section--etapes .section__entete h2::after { margin-inline: auto; transform-origin: center; }
.section--etapes .etapes-resa li { text-align: center; justify-items: center; }
.section--etapes .etapes-resa li p { max-width: 34ch; margin-inline: auto; }
.section--etapes .alerte { justify-content: center; text-align: center; }
/* Numéros des étapes (rétablis : l'effet de survol n'utilise plus cet emplacement) */
.etapes-resa li::before { content: counter(etape) !important; position: static; inset: auto; z-index: auto; opacity: 1 !important; background: none; pointer-events: auto; border-radius: 0;
  font: 600 var(--fs-h2)/1 var(--f-titre); color: var(--c-champagne); }

/* ---------- « Ce qui est inclus » centré ---------- */
.inclus__titre { text-align: center; font-size: var(--fs-h2); }
.inclus__titre::after { content: ""; display: block; width: 48px; height: 2px; margin: var(--sp-3) auto 0; background: #D4AF37; }
.inclus--centre li { text-align: center; justify-items: center; }

/* ---------- Avis clients : bande qui défile de droite à gauche (sens inversé à la demande du fondateur) ---------- */
/* Volontairement actif même avec « Réduire les animations » (demande du fondateur) : défilement lent, pause au survol et bouton pause */
.avis-defile { overflow: hidden; margin-inline: calc(var(--gouttiere) * -1); padding-block: 8px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
@media (min-width: 1300px) { .avis-defile { margin-inline: calc((100vw - 1200px) / -2 + 8px); } }
.avis-defile__piste { display: flex; width: max-content; animation: avis-defile var(--duree-defile, 60s) linear infinite; }
.avis-defile:hover .avis-defile__piste, .avis-defile:focus-within .avis-defile__piste, .avis-defile.is-pause .avis-defile__piste { animation-play-state: paused; }
@keyframes avis-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.avis-liste--defile { display: flex !important; gap: var(--sp-4); padding: 0 var(--sp-4) 0 0; margin: 0; grid-template-columns: none !important; }
.avis-liste--defile .avis { flex: none; width: min(340px, 82vw); }
.avis-defile__controle { display: flex; justify-content: center; max-width: none; margin-top: var(--sp-4); }
.avis-defile__pause { background: none; border: 0; color: var(--c-gris); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.avis-defile__pause:hover { color: var(--c-champagne); }

/* Avis : le bandeau défile même avec « Réduire les animations » (lent, pause au survol et bouton pause) */
@media (prefers-reduced-motion: reduce) {
  .avis-defile__piste { animation-duration: var(--duree-defile, 60s) !important; animation-iteration-count: infinite !important; }
}
/* ---------- En-têtes « Tarifs » et « Services » centrés ---------- */
.section--centre .section__entete { text-align: center; justify-items: center; }
.section--centre .section__entete p { margin-inline: auto; max-width: 60ch; }
.section--centre .section__entete h2::after { margin-inline: auto; transform-origin: center; }
.tarifs__lien { display: flex; justify-content: center; max-width: none; margin-top: var(--sp-2); }
.tarifs__lien a { color: var(--c-champagne); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.section--avis #avis-titre { text-align: center; }
.section--avis .avis-entete { justify-content: center; }

/* ---------- FAQ de l'accueil : fond sombre aux couleurs du site ---------- */
.section--faq { background: linear-gradient(180deg, var(--c-noir) 0%, #1E0A36 50%, var(--c-noir) 100%); border-block: 1px solid var(--c-ligne); }
.section--faq .faq { margin-inline: auto; max-width: 820px; gap: var(--sp-3); }
.section--faq .faq details { background: var(--c-noir-2); border: 1px solid var(--c-ligne); border-radius: var(--r-lg); padding: 0 var(--sp-5); transition: border-color var(--d-base), box-shadow var(--d-base); }
.section--faq .faq details:hover, .section--faq .faq details[open] { border-color: rgba(212,175,55,.6); box-shadow: 0 0 30px -10px rgba(212,175,55,.35); }
.section--faq .faq summary { color: var(--c-blanc); }
.section--faq .faq details p { color: var(--c-gris); }
.section--faq .faq summary::after { color: #D4AF37; }
.section--faq .conteneur > p:last-child, .section--faq .conteneur > a:last-child { text-align: center; max-width: none; }
.section--faq a { color: var(--c-champagne); }
.faq__lien-tout { text-align: center; max-width: none; } .faq__lien-tout a { text-decoration: underline; text-underline-offset: 3px; }
/* Moins d'espace entre « Tarifs » et « Services » */
#tarifs { padding-bottom: var(--sp-6); }
#tarifs .carrousel { margin-bottom: var(--sp-3); }
#services { padding-top: var(--sp-7); }

/* ---------- Flèches dorées entre les étapes « Comment ça marche » ---------- */
.section--etapes .etapes-resa { --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M2 12h40M32 3l10 9-10 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section--etapes .etapes-resa li { position: relative; }
.section--etapes .etapes-resa li:not(:last-child)::after {
  content: ""; position: absolute; width: 48px; height: 24px; background: linear-gradient(90deg, #A8871E, #E3CB98);
  -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat; pointer-events: none;
  /* Téléphone : flèche vers le bas, sous l'étape */
  left: 50%; bottom: calc(var(--sp-6) * -1); transform: translate(-50%, 50%) rotate(90deg); }
@media (min-width: 960px) {
  .section--etapes .etapes-resa { column-gap: var(--sp-8); }
  .section--etapes .etapes-resa li:not(:last-child)::after { left: auto; bottom: auto; right: calc(var(--sp-8) / -2); top: 1.1rem; transform: translateX(50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .section--etapes .etapes-resa li:not(:last-child)::after { animation: fleche-avance 2.4s ease-in-out infinite; }
  .section--etapes .etapes-resa li:nth-child(2)::after { animation-delay: .4s; }
  @keyframes fleche-avance { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: 6px 0; opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  @keyframes fleche-avance-bas { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: 0 6px; opacity: 1; } }
  .section--etapes .etapes-resa li:not(:last-child)::after { animation-name: fleche-avance-bas; }
}
@media (max-width: 959px) {
  .section--etapes .etapes-resa { row-gap: calc(var(--sp-8) + var(--sp-4)); }
  .section--etapes .etapes-resa li:not(:last-child)::after { bottom: calc((var(--sp-8) + var(--sp-4)) / -2 + var(--sp-3) * -1); width: 40px; height: 20px; }
}
@media (max-width: 959px) { .section--etapes .etapes-resa li:not(:last-child)::after { bottom: calc(var(--sp-8) / -2 + var(--sp-2)); } }
@media (min-width: 960px) { .section--etapes .etapes-resa li:not(:last-child)::after { top: 50%; transform: translate(50%, -50%); } }
@media (min-width: 960px) { .section--etapes .etapes-resa li:not(:last-child)::after { right: auto; left: var(--fleche-x, calc(100% + var(--sp-8) / 2)); transform: translate(-50%, -50%); } }

/* ---------- Tarifs : optimisation de l'affichage (Inès) ---------- */
/* Accueil : cartes .forfait compactes, prix alignés en bas de chaque carte */
#tarifs .surtitre { color: #D4AF37; }
#tarifs .forfait { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); min-height: 0; }
#tarifs .forfait__trajet { font-size: var(--fs-base); line-height: 1.35; min-height: calc(2 * 1.35em); }
#tarifs .forfait__note { margin-top: 0; }
#tarifs .forfait .montant { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-ligne); font-size: 2rem; }
@media (min-width: 640px) { #tarifs .forfait__trajet { font-size: var(--fs-lg); } }

/* Page Tarifs : sections sombres, cases #1A0B2A, titres centrés */
.section--tarifs .section__entete { margin-bottom: var(--sp-6); }
.section--tarifs .surtitre { color: #D4AF37; }
.tarifs-grille { display: grid; gap: var(--sp-4); text-align: left; }
@media (min-width: 960px) {
  .tarifs-grille { grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); align-items: start; }
  .tarifs-grille--4 { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.tarifs-carte { max-width: none; align-content: start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); background: #1A0B2A; border: 1px solid var(--c-ligne); border-radius: var(--r-lg); color: #F4F3F7; }
@media (min-width: 640px) { .tarifs-carte { padding: var(--sp-6); } }
.bloc.tarifs-carte + .bloc.tarifs-carte { margin-top: 0; }
.tarifs-carte > h3 { margin: 0; font: 500 var(--fs-h4)/1.25 var(--f-titre); color: #F4F3F7; }
.tarifs-carte > h3::after { content: ""; display: block; width: 32px; height: 2px; margin-top: var(--sp-3); background: #D4AF37; }
.tarifs-carte p { color: #C0C0C0; line-height: 1.65; margin: 0; }
.tarifs-carte a { color: #D4AF37; }
.tarifs-carte .liste-points { gap: var(--sp-3); padding: 0; margin: 0; }
.tarifs-carte .liste-points li { color: #F4F3F7; font-size: var(--fs-sm); line-height: 1.55; }
.tarifs-carte [data-tarif] { color: #D4AF37; font-weight: 600; white-space: nowrap; }

/* Tableau des forfaits : lisible à 390 px, prix alignés à droite */
.tarifs-carte .tableau { overflow: visible; }
.tarifs-carte .forfaits { table-layout: fixed; }
.tarifs-carte .forfaits th:last-child, .tarifs-carte .forfaits td:last-child { width: 5.5rem; }
.tarifs-carte .forfaits th, .tarifs-carte .forfaits td { padding: var(--sp-3) 0; vertical-align: middle; }
.tarifs-carte .forfaits tbody tr:last-child td { border-bottom: 0; }
.tarifs-carte .forfaits td a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); line-height: 1.4; color: #F4F3F7; }
.tarifs-carte .forfaits td a:hover { color: #D4AF37; }
.tarifs-carte .forfaits td small { margin-top: calc(var(--sp-1) * -1); font-size: var(--fs-xs); color: #C0C0C0; }
.tarifs-carte .forfaits .montant { font-size: 1.45rem; }
.tarifs-carte .forfaits .montant [data-tarif] { font-weight: inherit; }
@media (min-width: 640px) { .tarifs-carte .forfaits td a { font-size: var(--fs-base); } .tarifs-carte .forfaits .montant { font-size: 1.6rem; } }

/* Page Tarifs : rythme entre les deux sections sombres */
.section--tarifs + .section--tarifs { border-top: 1px solid var(--c-ligne); }
@media (max-width: 639px) { .section--tarifs { padding-block: var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { #tarifs .forfait .montant, .tarifs-carte { animation: none; transition: none; } }

/* ---------- Téléphone : services et « Ce qui est inclus » en carrousel horizontal ---------- */
@media (max-width: 639px) {
  [data-carrousel-mobile] { display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important; gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gouttiere) * -1); padding: 6px var(--gouttiere) 14px; scroll-padding-inline: var(--gouttiere); }
  [data-carrousel-mobile]::-webkit-scrollbar { display: none; }
  [data-carrousel-mobile] > * { scroll-snap-align: start; min-width: 0; }
  #services [data-carrousel-mobile] > :last-child { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; }
  #services [data-carrousel-mobile] .service__media { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .inclus[data-carrousel-mobile] { grid-auto-columns: 78%; }
}

/* ==========================================================================
   Pages intérieures : tout centré, tout sombre (demande du fondateur, 2026-10-26)
   ========================================================================== */
/* Hero : texte centré, photo en dessous */
.page-interieure .hero__grille--page { grid-template-columns: 1fr; gap: var(--sp-6); justify-items: center; }
.page-interieure .hero--page .hero__texte { text-align: center; justify-items: center; }
.page-interieure .hero--page .hero__titre { margin-inline: auto; max-width: 22ch; }
.page-interieure .hero--page .hero__sous-titre { margin-inline: auto; max-width: 62ch; }
.page-interieure .hero--page .hero__actions { justify-content: center; }
.page-interieure .hero--page .photo-slot { max-width: 960px; aspect-ratio: 21 / 9; }
.page-interieure .ariane { text-align: center; }
.page-interieure .ariane ol { justify-content: center; }
/* Blocs de texte : cases sombres, texte centré */
.page-interieure .bloc:not(.tarifs-carte) { background: #1A0B2A; border: 1px solid var(--c-ligne); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); text-align: center; justify-items: center; max-width: none; }
.page-interieure .section > .conteneur > .bloc:not(.tarifs-carte) { max-width: 820px; margin-inline: auto; }
.page-interieure .section > .conteneur:has(> .bloc + .bloc) > .bloc { max-width: none; margin-inline: 0; }
.page-interieure .section > .conteneur:has(> .bloc + .bloc) > .bloc:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 820px; width: 100%; justify-self: center; }
.page-interieure .bloc h2 { text-align: center; }
.page-interieure .bloc h2::after { content: ""; display: block; width: 40px; height: 2px; background: var(--c-champagne); margin: var(--sp-3) auto 0; }
.page-interieure .bloc p { max-width: 62ch; margin-inline: auto; }
.page-interieure .bloc ul, .page-interieure .bloc ol { text-align: left; justify-self: center; }
.page-interieure .bloc .etapes-resa { justify-items: center; text-align: center; }
.page-interieure .bloc .inclus { width: 100%; }
/* FAQ : colonne centrée, titres de thèmes centrés */
.page-interieure .faq__theme { max-width: 820px; margin-inline: auto; }
.page-interieure .faq__theme > h2 { text-align: center; }
.page-interieure .faq { max-width: 820px; margin-inline: auto; }
/* Pages légales : colonne centrée, titres centrés, texte lisible à gauche */
.page-legale .texte-long { margin-inline: auto; }
.page-legale .texte-long > h1, .page-legale .texte-long > h2, .page-legale .texte-long > p:first-of-type em { text-align: center; display: block; }
/* Bandeau d'appel et cases de contact centrés */
.page-interieure .cta-mini { text-align: center; justify-content: center; flex-direction: column; }
.page-interieure .cta-mini__boutons { justify-content: center; }
.page-interieure .contact-cartes > * { text-align: center; justify-items: center; }
/* Encadré prix des pages services et bandeau d'appel : centrés */
.page-interieure .prix--page { text-align: center; justify-items: center; }
.page-interieure .prix--page + .reveal .inclus li { text-align: center; }
.page-interieure .cta-mini { grid-template-columns: 1fr; justify-items: center; max-width: 820px; margin-inline: auto; }
.page-interieure .colonnes--haut:has(> .prix--page) { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; gap: var(--sp-5); }

/* ==========================================================================
   Tour de la voiture : la voiture tourne quand on fait défiler la page
   ========================================================================== */
.tour { position: relative; height: 320vh; }
.tour__collant { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); overflow: hidden; }
.tour__entete { text-align: center; }
.tour__entete h2 { margin-top: var(--sp-2); }
.tour__scene { position: relative; aspect-ratio: 1600 / 820; max-height: 56vh; margin-inline: auto; border-radius: var(--r-lg); background: #fff; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.tour__scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10,10,12,.22) 100%); }
.tour__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; will-change: opacity, transform; }
.tour__scene img:first-child { opacity: 1; }
.tour__legendes { list-style: none; margin: 0; padding: 0; position: relative; min-height: 3.2em; text-align: center; }
.tour__legendes li { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--e-sortie); color: var(--c-blanc); font-size: var(--fs-lg); }
.tour__legendes li.is-active { opacity: 1; transform: none; }
.tour__progression { width: min(320px, 70%); height: 2px; margin: 0 auto; background: var(--c-ligne); border-radius: 2px; overflow: hidden; }
.tour__progression span { display: block; height: 100%; width: 100%; background: var(--c-champagne); transform-origin: left; transform: scaleX(0); }
@media (max-width: 639px) { .tour { height: 260vh; } .tour__legendes li { font-size: var(--fs-base); } }
.tour__entete .surtitre { justify-content: center; text-align: center; width: 100%; }
.tour__entete { display: flex; flex-direction: column; align-items: center; }

/* Diaporama : les photos de l'intérieur remplissent toute la scène */
.tour__scene img.tour__photo { object-fit: cover; }
/* Section « Le véhicule » : texte seul, centré */
.vehicule-texte { max-width: 760px; margin-inline: auto; text-align: center; }
.vehicule-texte .surtitre { text-align: center; }
.vehicule-texte .liste-points { justify-self: center; text-align: left; }
/* Scène sur fond noir assorti au site : voiture détourée, vitres teintées, léger halo doré au sol */
.tour__scene { background: var(--c-noir); box-shadow: none; overflow: visible; }
.tour__scene::after { background: radial-gradient(ellipse 45% 9% at 50% 89%, rgba(212,175,55,.16), transparent 70%); z-index: -1; }
.tour__scene img.tour__photo { border-radius: var(--r-lg); }
.tour__scene::after { z-index: 0; }
.tour__scene img { z-index: 1; }
.tour__legendes { margin-top: var(--sp-3); }
/* En-tête : le numéro ne passe jamais à la ligne ; sur écran moyen, seules les icônes téléphone / WhatsApp restent */
.header__tel, .header__wa { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1279px) {
  .header__tel, .header__wa { font-size: 0; gap: 0; }
  .header__tel .icone, .header__wa .icone { width: 20px; height: 20px; }
  .header__nav { gap: var(--sp-4); }
}
/* Cases date / heure : jamais plus larges que leur colonne (texte coupé proprement si besoin) */
.champ { min-width: 0; }
button.champ__input { min-width: 0; overflow: hidden; }
button.champ__input [data-valeur] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.champ__input .icone { flex: none; }
.depli.is-open > div { visibility: visible; }
/* Audit 2026-10-26 : corrections pc / téléphone */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 959px) { .contact-flottant { display: none; } }
input.champ__input { text-overflow: ellipsis; }

/* Carte sur téléphone : rien ne doit se chevaucher (zoom aux doigts, crédits sur une ligne, bouton en haut) */
@media (max-width: 639px) {
  .carte { height: 240px; }
  .carte .leaflet-control-zoom { display: none; }
  .carte .leaflet-control-attribution { font-size: 10px !important; line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carte .leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }
  .carte__activer { align-items: start; padding-top: var(--sp-3); }
  .carte__activer span { font-size: var(--fs-xs); padding: 6px var(--sp-3); }
}
/* Téléphone : « Besoin d'aide ? » sur sa propre ligne, téléphone et WhatsApp côte à côte dessous */
@media (max-width: 639px) {
  .resa__aide { row-gap: 0; }
  .resa__aide > span { flex-basis: 100%; min-height: 32px; }
}

/* Liste des adresses proposées : bien détachée du fond, lisible au soleil sur téléphone */
.suggestions { z-index: 60; background: #3B1D5C; border: 1px solid rgba(212,175,55,.7); box-shadow: 0 18px 40px rgba(0,0,0,.75), 0 0 0 4px rgba(15,6,24,.9); opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; }
.suggestions li + li { border-top: 1px solid rgba(244,243,247,.12); }
.suggestions .s__l1 { color: #FFFFFF; font-weight: 600; }
.suggestions .s__l2 { color: #DCD6E8; }
.suggestions li[aria-selected="true"], .suggestions li:hover, .suggestions li:active { background: rgba(212,175,55,.22); }

/* Bouton « Appelez maintenant » collé sous l'en-tête : téléphone et tablette uniquement */
.appel-mobile { display: none; }
@media (max-width: 959px) {
  html.avec-appel { --header-h: 108px; }
  .avec-appel .header { flex-direction: column; align-items: stretch; background: rgba(15,6,24,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .avec-appel .header__inner { width: min(100% - 2 * var(--gouttiere), var(--conteneur)); height: 64px; flex: none; }
  .appel-mobile { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; flex: none;
    background: linear-gradient(135deg, #E6C65A, #D4AF37 55%, #A8871E); color: #0F0618; font: 650 var(--fs-base)/1 var(--f-texte); text-decoration: none; letter-spacing: .01em; }
  .appel-mobile .icone { width: 18px; height: 18px; }
  .appel-mobile__num { font-weight: 500; opacity: .8; }
  .appel-mobile:active { filter: brightness(.92); }
}

/* iPhone (Safari) : la liste d'adresses passait derrière les raccourcis, la date et le prix.
   On monte toute la branche du champ actif au premier plan et on donne à la liste son propre calque. */
.resa__adresses:focus-within, .champ:focus-within, .champ__boite:focus-within, .champ.suggestions-ouvertes, .resa__adresses:has(.suggestions-ouvertes) { position: relative; z-index: 90; }
.suggestions { z-index: 95; -webkit-transform: translateZ(0); transform: translateZ(0); }
.resa .puces, .resa [data-champ="date"], .resa .interrupteur, .resa .carte-zone, .resa .prix, .resa__nav { position: relative; z-index: 1; }

/* « Appelez maintenant » : apparition lente (fondu + glissé), puis un reflet doré qui passe de temps en temps */
@media (max-width: 959px) {
  .appel-mobile { position: relative; overflow: hidden; animation: appel-entree 2.6s cubic-bezier(.25, .8, .25, 1) .6s both; }
  .appel-mobile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform: translateX(-120%); animation: appel-reflet 7s ease-in-out 3.6s infinite; }
}
@keyframes appel-entree { from { opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes appel-reflet { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .appel-mobile, .appel-mobile::after { animation: none !important; } }

/* Tour de la voiture : chaque vue garde son propre calque graphique (défilement fluide sur iPhone) */
.tour__scene img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }

/* ==========================================================================
   Fluidité : les animations en boucle s'arrêtent hors de l'écran et pendant le défilement,
   et sur téléphone on supprime les effets les plus lourds pour le processeur graphique.
   ========================================================================== */
.anim-pause, .anim-pause::before, .anim-pause::after,
.anim-pause *, .anim-pause *::before, .anim-pause *::after,
.defile-en-cours .resa, .defile-en-cours .resa::before, .defile-en-cours .resa__titre { animation-play-state: paused !important; }
@media (max-width: 959px) {
  /* Flou d'arrière-plan = très coûteux pendant le défilement : fond plein à la place */
  .header.is-scrolled, .avec-appel .header, .barre-mobile { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .header.is-scrolled, .avec-appel .header { background: #0F0618 !important; }
  .barre-mobile { background: #160A24 !important; }
  /* Halo qui « respire » (ombre redessinée en boucle) et reflet du titre : version fixe sur téléphone */
  .resa { animation: entree .7s var(--e-sortie) .3s both !important; box-shadow: 0 0 0 1px rgba(212,175,55,.45), 0 14px 50px -12px rgba(212,175,55,.32), 0 24px 48px -24px rgba(0,0,0,.8); }
  .resa__titre { animation: entree .6s var(--e-sortie) .45s both !important; }
  .resa::before { animation-duration: 8s !important; }
}

/* Téléphone : plus de grand vide entre les photos de la voiture et le texte du dessous.
   Le bloc collant prend la hauteur de son contenu (au lieu de tout l'écran) et se cale sous l'en-tête. */
@media (max-width: 639px) {
  .tour__collant { height: auto; top: var(--header-h); padding-block: var(--sp-5) var(--sp-4); justify-content: flex-start; }
  .tour + .section { padding-top: var(--sp-6); }
}