/* ==========================================================================
   SHTY — Shepha Travel Agency
   Design system v3 — angles nets · surfaces plates · élévation douce
   Grille 4 px · rayons 2 px (boutons) / 4 px (cartes) · palette bordeaux & or
   Auteur : Felix Ogozi
   --------------------------------------------------------------------------
   01. Tokens & thèmes            10. Événement / compte à rebours
   02. Reset & base               11. Témoignages
   03. Typographie                12. Galerie & visionneuse
   04. Boutons, badges, puces     13. FAQ, formulaires, newsletter
   05. Préchargeur                14. Pied de page
   06. En-tête & navigation       15. Widgets flottants
   07. Héros & recherche          16. Animations
   08. Blocs de section           17. Responsive & accessibilité
   09. Cartes & filtres
   ========================================================================== */

/* ============================ 01. TOKENS & THÈMES ======================== */
:root {
  /* ---- Marque ---- */
  --plum-900: #12030A;
  --plum-800: #2B0718;
  --plum-700: #4A0B2B;   /* survol / état pressé */
  --plum-600: #6B0F3A;   /* couleur primaire du logo */
  --plum-500: #8A1A4E;
  --plum-050: #F2E4EB;

  --gold-700: #8A6116;
  --gold-600: #B8862B;
  --gold-500: #D9AE42;
  --gold-100: #F7EEDA;

  /* ---- Grille 4 px ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 80px;

  /* ---- Rayons (angles nets) ---- */
  --r-btn: 2px;
  --r-chip: 2px;
  --r-card: 4px;
  --r-input: 2px;

  /* ---- Élévation ---- */
  --sh-1: 0 8px 8px -8px rgba(0, 0, 0, .08);
  --sh-2: 0 12px 20px -12px rgba(0, 0, 0, .14);
  --sh-3: 0 24px 40px -20px rgba(0, 0, 0, .22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .2s var(--ease);
  --t: .28s var(--ease);
  --t-slow: .3s var(--ease);

  /* ---- Structure ---- */
  /* Largeur utile de la page. 1 480 px laisse respirer les grands écrans sans
     coller aux bords, et donne aux grilles de cartes la place d'une colonne
     supplémentaire là où elles en avaient besoin. */
  --container: 1480px;
  --gutter: clamp(16px, 3vw, 32px);
  --section-y: clamp(48px, 7vw, 80px);
  --header-h: 72px;
  --topbar-h: 38px;

  /* ---- Couches ---- */
  --z-dropdown: 2;
  --z-nav: 3;
  --z-backdrop: 3;
  --z-notification: 999;
  --z-modal: 1000;
  --z-top: 9999;

  /* ---- Polices ---- */
  --f-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-display: var(--f-sans);
}

/* -------------------------------- Thème clair -------------------------------- */
:root,
html[data-theme="light"] {
  color-scheme: light;
  /* Les fonds ne sont plus des gris purs. Un gris neutre (R=V=B) donne une
     page d'administration, pas un site de voyage : l'œil le lit comme
     « éteint » sans savoir pourquoi. Chaque neutre est donc tiré de quelques
     pour cent vers le prune de la marque, et les tons chauds vers l'or. C'est
     invisible pris isolément, et décisif sur une page entière. */
  --bg: #FBF8F9;          /* ivoire, soupçon de prune — le fond du corps de page,
                             que les sections opaques recouvrent partout. */
  /* Les deux tons de section sont désormais des **gris neutres**. Le prune
     très clair puis le mauve ont été écartés l'un après l'autre : sur de
     grandes surfaces, ils tiraient toute la page vers le vieux rose. Deux
     valeurs, et non une : `--bg-3` est le gris demandé, `--bg-2` descend d'un
     cran pour que l'alternance se voie encore là où les deux se suivent. */
  --bg-2: #E9E9ED;        /* gris un cran plus dense — l'alternance principale */
  --bg-3: #F2F2F4;        /* gris clair — la seconde famille */
  --surface: #FFFFFF;     /* les cartes restent blanches : c'est là qu'est le contraste */
  --surface-2: #F2F2F4;   /* gris clair neutre : le rose d'avant tirait tout
                             le site vers le vieux rose, une fois les grandes
                             surfaces passées au blanc franc. */
  --elevated: #EFE4E9;
  --text: #0A0A0B;
  --text-2: #5A5058;
  --text-3: #6B626A;
  --border: #E6DCE0;      /* bordure chaude : un gris froid sur fond chaud fait sale */
  --border-strong: #8C7F86;
  --rule: #E7E4E7;        /* filet de couture entre deux sections : le gris clair
                             qui délimite les blocs blancs sans les encadrer */
  --faq-bar: #121215;     /* accordéon replié : barre noire, titre blanc */
  --faq-bar-hover: #26262C;
  --topbar-bg: #17171B;   /* barre utilitaire, tout en haut de page */
  --topbar-fg: #C9C9CE;
  --accent: var(--plum-600);
  --accent-hover: var(--plum-700);
  --accent-soft: #EFEFF2;
  --on-accent: #FFFFFF;
  --gold-text: var(--gold-700);
  --header-bg: #FFFFFF;
  --hero-veil: linear-gradient(180deg, rgba(10, 10, 12, .64) 0%, rgba(10, 10, 12, .38) 45%, rgba(10, 10, 12, .82) 100%);
  --outline: var(--plum-600);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* -------------------------------- Thème sombre ------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Même principe en sombre : des noirs tirés vers le prune plutôt que des
     gris de charbon, et un « bg-2 » assez distinct pour que l'alternance des
     sections reste lisible une fois la lumière baissée. */
  --bg: #0F0B0D;
  --bg-2: #1B1B1F;        /* mêmes deux crans, en sombre et en neutre */
  --bg-3: #151519;
  --surface: #171114;
  --surface-2: #1F171B;
  --elevated: #271D23;
  --text: #F4F4F6;
  --text-2: #B4A9AF;
  --text-3: #9E939A;
  --border: #322A2E;
  --border-strong: #5D5158;
  --rule: #2A2328;
  /* En sombre, la surface est déjà foncée : la barre repliée doit descendre
     *plus bas* que le fond pour rester lisible comme un état distinct. */
  --faq-bar: #08080A;
  --faq-bar-hover: #131318;
  --topbar-bg: #17171B;
  --topbar-fg: #C9C9CE;
  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-soft: rgba(217, 174, 66, .14);
  --on-accent: #1A0810;
  --gold-text: var(--gold-500);
  --header-bg: #111113;
  --hero-veil: linear-gradient(180deg, rgba(12, 12, 14, .62) 0%, rgba(12, 12, 14, .34) 45%, rgba(12, 12, 14, .86) 100%);
  --outline: var(--gold-500);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADADB6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================ 02. RESET & BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t-slow), color var(--t-slow);
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--bg-2); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--plum-600); color: #fff; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.reading-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-notification);
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .1s linear;
  pointer-events: none;
}

.skip-link {
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: var(--z-top);
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--plum-600);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--t);
}
.skip-link:focus-visible { transform: translateY(0); }

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- SECTIONS
   Le rythme des fonds
   --------------------------------------------------------------------------
   Une page qui n'alterne que blanc et gris se lit comme un tableur. Ce qui
   donne vie à une page longue, c'est la succession de plans : un fond clair,
   un fond teinté, une bande texturée, une photo pleine largeur, une bande de
   marque. L'œil marque une pause à chaque changement, et la section suivante
   repart comme un nouveau chapitre.

   Cinq tons, à utiliser en alternance délibérée — jamais deux fois le même
   d'affilée :

     .section            blanc franc, délimité par un filet gris clair
     .section--alt       gris un cran plus dense, l'alternance principale
     .section--soft    gris clair, la seconde famille neutre
     .section--fixed     photo floutée, figée au défilement — la profondeur
     .section--dark      photo pleine largeur sous voile sombre
     .section--plum      aplat de marque

   Le ton neutre est **blanc**, et non l'ivoire du corps de page : le client a
   barré ces grandes surfaces teintées sur maquette. Ce qui sépare alors deux
   sections, ce n'est plus un écart de couleur mais un filet gris clair — plus
   net, et qui laisse la couleur aux bandeaux qui la portent vraiment.

   Un ingrédient s'ajoute par-dessus : `--lines`, un relief de courbes de
   niveau posé en pseudo-élément, réservé aux fonds teintés — sur du blanc, il
   ferait retomber la page dans le « fond sale » qu'on vient d'enlever. */
/* Le ton par défaut est le blanc franc — pas l'ivoire du corps de page.
   Le client a demandé que les grandes surfaces vides autour des blocs de
   contenu soient blanches, et que chaque section soit délimitée par un filet
   gris clair. Le filet est posé en haut seulement : deux sections voisines
   n'en affichent donc qu'un, et non deux traits collés. */
.section {
  padding-block: var(--section-y);
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.section--tight { padding-block: clamp(40px, 5vw, 56px); }
.section--alt  { background: var(--bg-2); }
.section--soft { background: var(--bg-3); }
.section--plum { background: #17171B; color: #E9E9EE; }
/* Sur un fond sombre, un filet gris clair ferait cicatrice : il s'efface. */
.section--plum, .section--dark, .section--fixed { border-top-color: transparent; }
/* Juste sous une photo pleine largeur, le filet n'a rien à séparer : il se
   lirait comme un défaut de raccord. */
.hero + .section, .hslider + .section { border-top-color: transparent; }

/* --- Halo de marque (retiré) ----------------------------------------------
   Deux taches radiales très étalées teintaient autrefois ces sections. Le
   client les a barrées sur maquette : « changer ces parties par la couleur
   blanche ». La classe reste en place — elle est posée sur huit pages — mais
   elle ne peint plus rien : la section garde le blanc franc et son filet. */
.section--glow { position: relative; isolation: isolate; }

/* --- Relief de courbes de niveau -----------------------------------------
   Le même motif que le bloc des témoignages, en SVG inline : quelques
   kilo-octets, aucun fichier à charger, et l'aplat cesse d'être plat. */
.section--lines { position: relative; isolation: isolate; }
.section--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-repeat: repeat;
  background-size: 720px 420px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%236B0F3A' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-40 120C110 40 260 210 420 130s220-70 360 10'/%3E%3Cpath d='M-40 160C120 80 250 250 420 170s230-60 360 20'/%3E%3Cpath d='M-40 205C130 125 245 290 420 212s235-50 360 30'/%3E%3Cpath d='M-40 255C140 180 240 330 420 258s240-40 360 40'/%3E%3Cpath d='M-40 310C150 240 235 372 420 306s245-28 360 50'/%3E%3Cpath d='M-40 372C160 305 230 415 420 356s250-16 360 60'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"] .section--lines::before { filter: invert(1); opacity: .16; }

/* --- Bandeau à image figée -------------------------------------------------
   C'est le seul dispositif de cette feuille qui crée une vraie profondeur : la
   photo ne défile pas avec la page. Le contenu glisse par-dessus une image
   immobile, et l'œil lit deux plans distincts au lieu d'une surface unique.

   Trois précautions :

     • **La photo est floutée.** Nette, elle réclamerait l'attention et
       rendrait le texte illisible ; floue, elle devient une matière colorée
       qui laisse toute sa place au contenu. Le `scale(1.1)` masque les bords
       délavés que le flou fait apparaître.
     • **Le voile est violet, pas noir.** Un voile neutre donne une photo
       « assombrie » ; un voile teinté donne une couleur de marque à la
       section, ce qui la distingue franchement de ses voisines.
     • **`position: fixed` est contenu par `clip-path`.** Une valeur de
       clip-path autre que « none » fait de la section le bloc conteneur de ses
       descendants fixés : l'image reste donc immobile, mais rognée aux bords
       de la section. C'est plus fiable que `background-attachment: fixed`, que
       Safari mobile ignore purement et simplement. */
.section--fixed {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);              /* rend la section conteneur du fond fixé */
  color: #fff;
  background-color: var(--plum-800);
}
.section--fixed .section__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.section--fixed .section__bg img,
.section--fixed .section__bg picture {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(9px) saturate(1.15);
  transform: scale(1.1);
}
.section--fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(58, 12, 62, .92) 0%, rgba(74, 11, 43, .88) 48%, rgba(30, 8, 36, .94) 100%);
}
.section--fixed h2,
.section--fixed h3,
.section--fixed .s-head__title { color: #fff; }
.section--fixed p,
.section--fixed .s-head__text { color: rgba(255, 255, 255, .82); }
.section--fixed .s-head__kicker { color: var(--gold-500); }
/* Le bordeaux du lien « Voir les X destinations » se lit mal sur le fond
   sombre de cette section : blanc ici, comme le reste du texte. */
.section--fixed .s-head__row > .link-arrow { color: #fff; }
.section--fixed .btn:not(.btn--light) { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.section--fixed .btn:not(.btn--light):hover { background: var(--gold-600); }
.section--fixed .feature,
.section--fixed .pillar,
.section--fixed .keyfig__item {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
}
.section--fixed .feature h3,
.section--fixed .pillar h3,
.section--fixed .keyfig__num { color: #fff; }
.section--fixed .keyfig__lab,
.section--fixed .feature p,
.section--fixed .pillar p { color: rgba(255, 255, 255, .78); }
.section--fixed .feature__icon,
.section--fixed .pillar__ico { background: rgba(255, 255, 255, .14); color: var(--gold-500); }

/* Une carte posée sur le bandeau garde sa surface opaque : à l'intérieur, le
   texte doit reprendre ses couleurs normales. Sans ce rappel, les règles de la
   section ci-dessus l'éclairciraient jusqu'au blanc sur blanc. Les sélecteurs
   `:is()` valent une classe de plus que `.section--fixed p` : ils passent donc
   devant, sans avoir à répéter la liste ligne par ligne. */
.section--fixed :is(.card, .post, .ctry, .faq__item, .reach__card, .reach__none, .member,
                    .founder, .faq-help, .info-item, .story, .office, .reco__card) {
  color: var(--text);
}
.section--fixed :is(.card, .post, .ctry, .faq__item, .reach__card, .reach__none, .member,
                    .founder, .faq-help, .info-item, .story, .office, .reco__card)
  :is(h2, h3, h4, b, strong) { color: var(--text); }
.section--fixed :is(.card, .post, .ctry, .faq__item, .reach__card, .reach__none, .member,
                    .founder, .faq-help, .info-item, .story, .office, .reco__card)
  p { color: var(--text-2); }
/* Un lien dans une de ces cartes reste bordeaux, pas or : c'est la couleur des
   liens sur fond clair, et la carte, elle, est restée claire. */
.section--fixed :is(.faq-help, .info-item, .office, .reco__card) a { color: var(--accent); }
/* Sauf ce qui est posé sur la photo de la carte : là, le blanc reste juste. */
.section--fixed .card__place b,
.section--fixed .card__tags .badge { color: #fff; }
.section--fixed .card .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  background: transparent;
}
.section--fixed .card .btn--ghost:hover {
  --btn-fg: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* La frise du parcours d'épargne est posée à même le bandeau, sans carte :
   ses filets et son texte secondaire se relisent donc en clair. */
.section--fixed .track__step { border-top-color: rgba(255, 255, 255, .28); }
.section--fixed .track__step b { color: #fff; }
.section--fixed .track__step > span:last-child { color: rgba(255, 255, 255, .80); }
.section--fixed .track__dot { box-shadow: 0 0 0 4px rgba(30, 8, 36, .9); }

/* Les tuiles « par envie » posées sur le bandeau : verre dépoli plutôt que
   surface opaque, pour que la photo floutée continue de se deviner derrière. */
.section--fixed .tilecat {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .20);
  backdrop-filter: blur(6px);
}
.section--fixed .tilecat:hover { border-color: rgba(255, 255, 255, .40); }
.section--fixed .tilecat__name { color: #fff; }
.section--fixed .tilecat__meta { color: var(--gold-500); }
.section--fixed .tilecat__tag { color: rgba(255, 255, 255, .78); }

/* Sur écran tactile, l'image figée saccade — iOS la repositionne à chaque
   image du défilement. On la fixe alors dans la section : on perd l'effet de
   profondeur, on garde la lisibilité. Même chose si le visiteur a demandé
   moins d'animations. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .section--fixed .section__bg { position: absolute; }
}

/* Un logo téléversé remplace le dessin intégré : il tient dans la même boîte,
   sans jamais dépasser la hauteur de l'en-tête. */
img.brand__mark { width: auto; max-height: 44px; object-fit: contain; }
.footer img.brand__mark { max-height: 40px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================ 03. TYPOGRAPHIE =========================== */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.02em;
}

.h-xxl { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; }
.h-xl  { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.11; font-weight: 600; }
.h-lg  { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 600; }
.h-md  { font-size: 20px; line-height: 1.3; font-weight: 600; }

.lead { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.small { font-size: 14px; }

.gold-text { color: var(--gold-text); }

.s-head { max-width: 620px; margin-bottom: var(--s7); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.s-head__kicker::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--gold-500);
}
.s-head--center .s-head__kicker::after {
  content: "";
  width: 20px; height: 2px;
  background: var(--gold-500);
}
.s-head__title { margin-bottom: var(--s3); }
.s-head__text { color: var(--text-2); }

.s-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  max-width: none;
}

/* ====================== 04. BOUTONS, BADGES, PUCES ====================== */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 12px 20px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.25;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--accent-hover); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-fg: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.btn--gold { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.btn--gold:hover { background: var(--gold-600); }
.btn--light {
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: #fff; color: var(--plum-800); border-color: #fff; }
.btn--plum { --btn-bg: var(--plum-600); --btn-fg: #fff; }
.btn--plum:hover { background: var(--plum-700); }
.btn--sm { padding: 8px 14px; font-size: 14px; }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.link-arrow { padding-block: var(--s1); }
.link-arrow:hover { gap: var(--s3); border-bottom-color: currentColor; }
.link-arrow svg { width: 18px; height: 18px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 10px;
  border-radius: var(--r-chip);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border);
}
.badge svg { width: 14px; height: 14px; flex: none; }
.badge--glass { background: rgba(11, 3, 8, .62); color: #fff; backdrop-filter: blur(4px); }
.badge--gold { background: var(--gold-500); color: #2B0718; }
.badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.badge .dot { width: 6px; height: 6px; background: currentColor; animation: pulse-dot 1.8s infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ============================ 05. PRÉCHARGEUR =========================== */
/* Visite déjà entamée : le préchargeur n'apparaît plus du tout. */
html.no-preloader .preloader { display: none; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s6);
  background: #141418;
  transition: opacity var(--t-slow), visibility var(--t-slow);
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo { width: min(240px, 58vw); }
.preloader__logo .pl-plane {
  offset-path: path("M6 96 C 60 40, 150 20, 232 14");
  offset-rotate: auto;
  animation: pl-fly 2s var(--ease) infinite;
}
@keyframes pl-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.preloader__trail { stroke-dasharray: 3 8; animation: pl-trail 2s linear infinite; }
@keyframes pl-trail { to { stroke-dashoffset: -110; } }

.preloader__bar {
  width: min(240px, 56vw);
  height: 2px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-500);
  transition: width var(--t-slow);
}
.preloader__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* ======================= 06. EN-TÊTE & NAVIGATION ======================= */
.topbar {
  position: relative;
  /* Au-dessus de l'en-tête collant : sans cela, le menu déroulant des devises
     passerait derrière lui. */
  z-index: calc(var(--z-nav) + 2);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  /* Fond et texte réglables au dashboard → Apparence. */
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  font-size: 13px;
}
.topbar__inner {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-block: 6px;
}
.topbar a { display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.topbar a:hover { color: var(--gold-500); }
.topbar svg { width: 14px; height: 14px; }
.topbar__spacer { margin-left: auto; }
.topbar strong { color: #fff; font-weight: 600; }

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t);
}
.header.is-stuck { box-shadow: var(--sh-1); }

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand__mark { width: 104px; height: auto; }
.brand__tag {
  display: none;
  padding-left: var(--s3);
  border-left: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s1); }
.nav__link {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-fast);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 700; color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }

.burger { display: none; width: 40px; height: 40px; position: relative; }
.burger span {
  position: absolute;
  left: 10px;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform var(--t-fast), opacity var(--t-fast), width var(--t-fast);
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; width: 14px; }
.burger span:nth-child(3) { top: 25px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 20px; }

/* Tiroir mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__body {
  padding: var(--s5) var(--gutter) var(--s7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(10px);
}
.drawer.is-open .drawer__link {
  animation: drawer-in .3s var(--ease) forwards;
  animation-delay: calc(var(--i) * 40ms + 60ms);
}
@keyframes drawer-in { to { opacity: 1; transform: none; } }
.drawer__link span:last-child { color: var(--text-3); font-size: 13px; font-weight: 600; }
.drawer__meta { display: grid; gap: var(--s3); color: var(--text-2); font-size: 15px; }
.drawer__meta a { display: flex; align-items: center; gap: var(--s2); padding-block: 6px; }
.drawer__meta svg { width: 16px; height: 16px; color: var(--accent); }

/* ==================== 07. HÉROS & BARRE DE RECHERCHE ==================== */
.hero {
  position: relative;
  min-height: min(84svh, 760px);
  display: flex;
  align-items: flex-end;
  padding-top: var(--s8);
  padding-bottom: var(--s7);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero--compact { min-height: 320px; align-items: center; padding-block: var(--s7); }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: hero-zoom 18s var(--ease) forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-veil); }
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  opacity: .4; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero__content { max-width: 720px; }
.hero__title { margin-block: var(--s4) var(--s4); }
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: word-up .5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 50ms + 150ms);
}
@keyframes word-up { to { opacity: 1; transform: none; } }
.hero__text { color: rgba(255, 255, 255, .82); max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.hero__price {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-btn);
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
}
.hero__price b { color: var(--gold-500); font-size: 16px; }
.hero__price svg { width: 16px; height: 16px; flex: none; color: var(--gold-500); }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.hero__scroll i {
  width: 1px; height: 32px;
  background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .8));
  animation: scroll-line 2s var(--ease) infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(.1); transform-origin: 50% 0; }
  50%  { transform: scaleY(1);  transform-origin: 50% 0; }
  51%  { transform: scaleY(1);  transform-origin: 50% 100%; }
  100% { transform: scaleY(.1); transform-origin: 50% 100%; }
}

/* Barre de recherche / devis */
.searchbar {
  position: relative;
  z-index: 4;
  margin-top: var(--s6);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--s3);
  color: var(--text);
}
.searchbar__field {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchbar__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.searchbar__field label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.searchbar__field select,
.searchbar__field input {
  border: 0;
  background-color: transparent;
  outline: none;
  font-size: 15px; font-weight: 500; width: 100%; color: var(--text);
}
.searchbar .btn { padding-inline: var(--s5); }

.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s7); margin-top: var(--s6); }
.hero__stats .stat { border-left: 2px solid var(--gold-500); padding-left: var(--s3); }
.hero__stats .stat__num { color: #fff; }
.hero__stats .stat__label { color: rgba(255, 255, 255, .68); }

/* ========================= 08. BLOCS DE SECTION ========================= */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s5);
}
.stat__num {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}
.stat__num sup { font-size: .5em; vertical-align: super; color: var(--gold-text); }
.stat__label { margin-top: var(--s1); font-size: 14px; color: var(--text-2); }

/* --- Rangée de tuiles --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}
.tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s3);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--plum-600);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
html[data-theme="dark"] .tile { border-top-color: var(--gold-500); }
.tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.tile__media { aspect-ratio: 16 / 9; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile h3 { font-size: 20px; padding-inline: var(--s5); }
.tile p { color: var(--text-2); font-size: 15px; padding-inline: var(--s5); }
.tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 var(--s5) var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}
.tile__price { font-size: 13px; color: var(--text-3); }
.tile__price b { display: block; font-size: 20px; color: var(--text); letter-spacing: -.02em; }

/* --- Grille de styles de voyage --- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3);
}
.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--s5);
  border-radius: var(--r-card);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.cat img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.cat::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 3, 8, .12) 25%, rgba(11, 3, 8, .9));
}
.cat:hover img { transform: scale(1.05); }
.cat__count {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 5px 9px;
  border-radius: var(--r-chip);
  background: var(--gold-500);
  color: #2B0718;
  font-size: 12px;
  font-weight: 700;
}
.cat b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; padding-right: 52px; }
.cat > span { font-size: 14px; color: rgba(255, 255, 255, .76); padding-right: 52px; }
.cat__go {
  position: absolute;
  right: var(--s5); bottom: var(--s5);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cat:hover .cat__go { background: var(--gold-500); color: #2B0718; border-color: transparent; }
.cat__go svg { width: 18px; height: 18px; }

/* --- Encarts statistiques --- */
.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.callout {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
html[data-theme="dark"] .callout { background: var(--surface-2); }
.callout__icon {
  width: 52px; height: 52px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background: var(--plum-600);
  color: #fff;
}
html[data-theme="dark"] .callout__icon { background: var(--gold-500); color: #2B0718; }
.callout__icon svg { width: 26px; height: 26px; }
.callout b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.callout > div > span { display: block; font-size: 14px; color: var(--text-2); }

/* --- Points forts --- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s3);
  align-items: start;
}
.features--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Rangée de tarifs : cartes de même hauteur, boutons alignés en bas */
.features--pricing { align-items: stretch; }
.features--pricing .feature { display: flex; flex-direction: column; }
.features--pricing .feature > .btn { margin-top: auto; }
.features--pricing .feature > .badge,
.features--pricing .feature > .feature__icon { align-self: flex-start; }
.feature {
  position: relative;
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.feature:hover { box-shadow: var(--sh-1); transform: translateY(-2px); border-color: var(--border-strong); }
.feature__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: var(--s4);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 18px; margin-bottom: var(--s2); }
.feature p { color: var(--text-2); font-size: 15px; }

/* --- Étapes --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s5);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--s4); border-top: 2px solid var(--border); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}
.step h3 { font-size: 18px; margin-bottom: var(--s2); }
.step p { color: var(--text-2); font-size: 15px; }

/* --- Bandeau défilant --- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding-block: var(--s4);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; gap: var(--s7); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; color: var(--gold-500); }

/* --- Bloc deux colonnes --- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--r-card);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__badge {
  position: absolute;
  right: 0; bottom: calc(var(--s5) * -1);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-card);
  background: var(--plum-600);
  color: #fff;
  box-shadow: var(--sh-2);
  text-align: center;
}
html[data-theme="dark"] .split__badge { background: var(--gold-500); color: #2B0718; }
.split__badge b { display: block; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.split__badge span { font-size: 13px; opacity: .84; }

.checklist { display: grid; gap: var(--s3); margin-block: var(--s5); }
.checklist li { display: flex; gap: var(--s3); align-items: flex-start; color: var(--text-2); font-size: 15px; }
.checklist svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.checklist--muted svg { color: var(--text-3); }

/* =================== 09. CARTES & FILTRES =============================== */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chip {
  padding: 9px 16px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s3);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.card.is-hidden { display: none; }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 3, 8, .84));
}
/* Les étiquettes s'arrêtent avant le bouton « favori » et passent à la ligne
   plutôt que de lui passer dessous. */
.card__tags {
  position: absolute;
  top: var(--s3); left: var(--s3); right: calc(var(--s3) + 40px);
  display: flex; flex-wrap: wrap; gap: var(--s1); z-index: 2;
}
.card__fav {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: rgba(11, 3, 8, .55);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  transition: all var(--t-fast);
}
.card__fav:hover { background: #fff; color: var(--plum-600); }
.card__fav.is-on { background: var(--gold-500); color: #2B0718; border-color: transparent; }
.card__fav.is-on svg { fill: currentColor; }
.card__fav svg { width: 16px; height: 16px; }

.card__place { position: absolute; left: var(--s4); bottom: var(--s3); z-index: 2; color: #fff; }
.card__place b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; display: block; line-height: 1.15; }
.card__place span { font-size: 13px; opacity: .8; display: flex; align-items: center; gap: 5px; }
.card__place svg { width: 13px; height: 13px; }

.card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
/* Trois lignes réservées : les accroches courtes et longues laissent les
   grilles alignées, prix et boutons sur la même ligne d'une carte à l'autre. */
.card__desc {
  font-size: 15px; color: var(--text-2); line-height: 1.5;
  min-height: 4.5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.card__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 13px; color: var(--text-3); }
.card__meta span { display: flex; align-items: center; gap: 5px; }
.card__meta svg { width: 14px; height: 14px; color: var(--gold-600); }
.card__foot {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;          /* un montant en francs est long : le bouton peut passer dessous */
}
.card__foot .btn { flex: none; }
.card__price { min-width: 0; }
.card__price small { display: block; font-size: 12px; color: var(--text-3); }
.card__price b {
  /* « 2 800 000 FCFA » est nettement plus long que « $95 » : le corps s'adapte
     à la largeur disponible plutôt que de passer à la ligne. */
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.card__price b em { font-style: normal; font-size: .62em; font-weight: 500; color: var(--text-3); }
.card__price .price { white-space: nowrap; }

/* Sur la fiche circuit, le montant tient sur une ligne quelle que soit la devise. */
.booking__price .h-lg { font-size: clamp(24px, 3vw, 32px); }
.booking__price { flex-wrap: wrap; }

.rating { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); }
.rating svg { width: 14px; height: 14px; color: #E8A317; }

/* Cartes compactes */
.mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }
.mini-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--s4);
  color: #fff;
  isolation: isolate;
}
.mini-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.mini-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 3, 8, .08) 35%, rgba(11, 3, 8, .9));
}
.mini-card:hover img { transform: scale(1.05); }
.mini-card b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; display: block; }
.mini-card span { font-size: 13px; opacity: .8; }

/* ===================== 10. ÉVÉNEMENT / COMPTE À REBOURS ================= */
.event {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  padding: clamp(28px, 5vw, 56px);
}
.event img.event__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.event::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(11, 3, 8, .95) 4%, rgba(11, 3, 8, .82) 48%, rgba(74, 11, 43, .62) 100%);
}
.event__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.event .btn:not(.btn--light) { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.event .btn:not(.btn--light):hover { background: var(--gold-600); }
.event h2 { color: #fff; }
.event p { color: rgba(255, 255, 255, .78); }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin-top: var(--s5);
  max-width: 400px;
}
.countdown div {
  padding: var(--s3) var(--s2);
  border-radius: var(--r-card);
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}
.countdown b {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--gold-500);
}
.countdown span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.packs { display: grid; gap: var(--s2); }
.pack {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.pack:hover { background: rgba(255, 255, 255, .13); border-color: var(--gold-500); transform: translateX(3px); }
.pack__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: var(--gold-500);
  color: #2B0718;
}
.pack__icon svg { width: 20px; height: 20px; }
.pack b { display: block; font-size: 15px; font-weight: 700; }
.pack span { font-size: 13px; color: rgba(255, 255, 255, .66); }
.pack em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--gold-500); white-space: nowrap; font-size: 15px; }

/* ========================== 11. TÉMOIGNAGES ============================= */
.testi { position: relative; overflow: hidden; }
.testi__viewport { overflow: hidden; }
.testi__track { display: flex; transition: transform var(--t-slow); }
.testi__item { flex: 0 0 100%; padding: 2px; }
.testi__card {
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  display: grid;
  gap: var(--s4);
}
.testi__quote { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.testi__quote::before {
  content: "“";
  display: block;
  font-size: 48px;
  line-height: .7;
  color: var(--gold-500);
  margin-bottom: var(--s2);
}
.testi__who { display: flex; align-items: center; gap: var(--s3); }
.testi__avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-card);
  display: grid; place-items: center;
  background: var(--plum-600);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  flex: none;
}
html[data-theme="dark"] .testi__avatar { background: var(--gold-500); color: #2B0718; }
.testi__who b { display: block; font-size: 15px; }
.testi__who span { font-size: 13px; color: var(--text-2); }

.testi__nav { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s5); align-items: center; }
.testi__dots { display: flex; gap: 6px; margin-inline: var(--s3); }
.testi__dots button {
  position: relative;
  width: 8px; height: 8px;
  background: var(--border-strong);
  transition: all var(--t-fast);
}
/* zone de clic confortable sans agrandir le point */
.testi__dots button::before { content: ""; position: absolute; inset: -12px -6px; }
.testi__dots button.is-active { width: 24px; background: var(--accent); }

/* ==================== 12. GALERIE & VISIONNEUSE ========================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: var(--s3);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  cursor: zoom-in;
  border: 1px solid var(--border);
}
.gallery__item.is-hidden { display: none; }
.gallery__item.tall { grid-row: span 2; }
.gallery__item.wide { grid-column: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s6) var(--s4) var(--s3);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(transparent, rgba(11, 3, 8, .9));
  transform: translateY(8px);
  opacity: 0;
  transition: all var(--t);
}
.gallery__item:hover figcaption { transform: none; opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 3, 5, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--r-card); }
.lightbox__cap { margin-top: var(--s4); color: rgba(255, 255, 255, .8); text-align: center; font-size: 14px; }
.lightbox__btn {
  position: absolute;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox__btn:hover { background: var(--gold-500); color: #2B0718; border-color: transparent; }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: var(--s5); right: var(--s5); }
.lightbox__prev { left: var(--s4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--s4); top: 50%; transform: translateY(-50%); }

/* ================= 13. FAQ, FORMULAIRES, NEWSLETTER ===================== */
.faq { display: grid; gap: var(--s2); max-width: 820px; margin-inline: auto; }
/* Une question repliée est une barre noire, celle qu'on ouvre passe au blanc.
   Le contraste dit d'un coup d'œil laquelle est dépliée — on n'a pas à lire le
   « + » ou le « × » pour le savoir. */
.faq__item {
  border: 1px solid var(--faq-bar);
  border-radius: var(--r-card);
  background: var(--faq-bar);
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq__item:hover { background: var(--faq-bar-hover); border-color: var(--faq-bar-hover); }
.faq__item .faq__q { color: #fff; }
.faq__item .faq__q i { background: rgba(255, 255, 255, .16); color: #fff; }
/* Le liseré de focus doit se voir sur le noir : le bordeaux s'y perdrait. */
.faq__item:not(.is-open) .faq__q:focus-visible { outline-color: var(--gold-500); }

.faq__item.is-open {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--sh-1);
}
.faq__item.is-open .faq__q { color: var(--text); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}
.faq__q i {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.faq__q i::before { content: "+"; display: block; transition: transform var(--t-fast); }
.faq__item.is-open .faq__q i { background: var(--accent); color: var(--on-accent); }
.faq__item.is-open .faq__q i::before { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 var(--s5) var(--s5); color: var(--text-2); font-size: 15px; }
/* Tant que la question est repliée, sa réponse est rognée à zéro — mais elle
   existe toujours, et le temps d'un repli elle se peint sur la barre noire.
   Elle y prend donc l'encre claire : jamais de gris sombre sur du noir, même
   pendant une fraction de seconde. */
.faq__item:not(.is-open) .faq__a p { color: rgba(255, 255, 255, .78); }

.form { display: grid; gap: var(--s4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field { display: grid; gap: 6px; position: relative; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--t-fast);
}
.field:hover label,
.field:focus-within label { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-input);
  border: 1px solid #C1C1C1;
  background-color: var(--surface);
  outline: none;
  font-size: 15px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              background-color var(--t-fast), transform var(--t-fast);
}
/* Une hauteur fixe sur les champs à une ligne : sans elle, le sélecteur de
   date de Chrome (icône calendrier) s'impose un peu plus haut que les autres
   champs et désaligne visuellement la ligne — même padding, hauteurs
   différentes. La zone de texte (plusieurs lignes) garde sa propre
   min-height, elle n'est pas concernée. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select { height: 48px; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { border-color: var(--border-strong); }
.field textarea { resize: vertical; min-height: 128px; }
.field select { align-self: start; }

/* Effet de survol : la frontière du champ se teinte et se rapproche
   légèrement avant même le clic, pour que le formulaire réponde dès que la
   souris passe dessus et pas seulement au focus. */
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--accent);
  background-color: var(--surface-2);
  box-shadow: 0 6px 16px -12px rgba(107, 15, 58, .45);
}
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field select:hover,
html[data-theme="dark"] .field textarea:hover {
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .6);
}
.field input:focus:hover,
.field select:focus:hover,
.field textarea:focus:hover { background-color: var(--surface); }

/* Chevron unique pour tous les menus déroulants (aucun raccourci `background`
   ne doit être déclaré après ce bloc, sous peine d'effacer l'image). */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: 34px;
}
select::-ms-expand { display: none; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background-color: var(--surface);
}
.field .err { font-size: 13px; color: #C62828; min-height: 1em; opacity: 0; transition: opacity var(--t-fast); }
html[data-theme="dark"] .field .err { color: #FF8A80; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #C62828; }
.field.is-invalid .err { opacity: 1; }

.form__note { font-size: 13px; color: var(--text-3); }
.form__success {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: rgba(21, 128, 61, .1);
  border: 1px solid rgba(21, 128, 61, .4);
  border-left: 3px solid #15803D;
  color: #15803D;
  font-size: 15px;
  display: none;
}
html[data-theme="dark"] .form__success { color: #6EE7A8; }
.form__success.is-visible { display: block; }

.cta-band {
  position: relative;
  border-radius: var(--r-card);
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: var(--plum-600);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .btn:not(.btn--light) { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.cta-band .btn:not(.btn--light):hover { background: var(--gold-600); }
.cta-band h2 { color: #fff; margin-bottom: var(--s3); }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 56ch; margin-inline: auto; }
.cta-band .newsletter { display: flex; gap: var(--s2); max-width: 480px; margin: var(--s5) auto 0; flex-wrap: wrap; }
.cta-band .newsletter input {
  flex: 1 1 220px;
  padding: 13px 16px;
  border-radius: var(--r-input);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  outline: none;
  font-size: 15px;
}
.cta-band .newsletter input::placeholder { color: rgba(255, 255, 255, .6); }
.cta-band .newsletter input:focus { border-color: var(--gold-500); }

/* Coordonnées */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.info-list { display: grid; gap: var(--s2); }
.info-item {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.info-item:hover { border-color: var(--accent); box-shadow: var(--sh-1); }
.info-item__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--accent);
}
.info-item__icon svg { width: 20px; height: 20px; }
.info-item b { display: block; font-size: 15px; }
.info-item span, .info-item a { color: var(--text-2); font-size: 14px; }
.info-item a { display: inline-block; padding-block: 6px; }
.info-item a:hover { color: var(--accent); }

.map-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note { margin-top: var(--s2); font-size: 13px; color: var(--text-3); }
.map-note a { display: inline-block; padding-block: 6px; color: var(--accent); }
.map-note a:hover { text-decoration: underline; }

/* Chronologie */
.timeline { position: relative; display: grid; gap: var(--s5); padding-left: var(--s6); }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border-strong);
  opacity: .4;
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s6) * -1); top: 5px;
  width: 16px; height: 16px;
  border-radius: 2px;
  background: var(--accent);
}
.timeline__year {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  text-transform: uppercase;
}
.timeline__item h3 { font-size: 18px; margin: 4px 0 var(--s2); }
.timeline__item p { color: var(--text-2); font-size: 15px; }

/* Équipe */
/* --- L'équipe ---------------------------------------------------------------
   Le portrait occupe tout le haut de la carte, en format vertical : un visage
   se regarde en portrait, pas en vignette carrée. Les réseaux du conseiller
   n'apparaissent qu'au survol, au centre de la photo — ils sont utiles à qui
   les cherche et ne parasitent pas la lecture des autres.

   En dessous, un panneau clair, nettement séparé de la photo : nom, fonction,
   puis la ligne de contact. Ce contraste entre l'image pleine et le pavé calme
   est ce qui fait tenir la carte.
   -------------------------------------------------------------------------- */
.team {
  /* Flex plutôt que grid, pour une seule raison : une grille ne sait pas
     centrer sa dernière rangée incomplète. Avec six conseillers sur quatre
     colonnes, les deux derniers resteraient collés à gauche. En flex, ils se
     centrent — et la mise en page reste juste quel que soit l'effectif. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
}
.member { flex: 1 1 300px; max-width: 340px; }
.member {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-strong); }

.member__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* Fond neutre, pas l'aplat de la marque : une grille de six portraits
     manquants ferait un mur bordeaux. L'initiale suffit à tenir la place.
     La couleur pleine est posée sous le dégradé — sans elle, tout outil qui
     lit « background-color » ne voit rien et croit l'initiale posée sur le
     fond clair de la carte. */
  background-color: #201A1F;
  background-image: linear-gradient(150deg, #2A2229, #151115);
}
.member__media img, .member__media picture {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;      /* le regard plutôt que le menton */
  transition: transform .6s var(--ease);
}
.member:hover .member__media img { transform: scale(1.04); }

/* Sans photo : l'initiale, en grand, sur l'aplat de la marque. */
.member__initial {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 800;
  color: var(--gold-500);
}

/* Les réseaux : posés au centre de la photo, révélés au survol. Ils restent
   atteignables au clavier — le focus les fait apparaître comme le survol. */
.member__social {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  background: rgba(20, 8, 15, .42);
  opacity: 0;
  transition: opacity var(--t);
}
.member:hover .member__social,
.member__social:focus-within { opacity: 1; }
.member__social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
  transform: translateY(8px);
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t);
}
.member:hover .member__social a,
.member__social:focus-within a { transform: none; }
.member__social a:nth-child(2) { transition-delay: .05s; }
.member__social a:nth-child(3) { transition-delay: .1s; }
.member__social a:hover,
.member__social a:focus-visible { background: var(--gold-500); color: #2B0718; border-color: transparent; }
.member__social svg { width: 19px; height: 19px; }

.member__body {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: var(--s5) var(--s4);
  text-align: center;
  background: var(--surface-2);
}
.member__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.member__role { font-size: 14.5px; color: var(--gold-text); }
.member__bio { margin-top: var(--s2); font-size: 13.5px; color: var(--text-2); }

.member__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.member__ico { display: grid; place-items: center; color: var(--accent); }
.member__ico svg { width: 16px; height: 16px; }
.member__num { font-weight: 600; font-variant-numeric: tabular-nums; }
.member__num i { font-style: normal; letter-spacing: .12em; color: var(--text-3); }
.member__reveal {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.member__reveal:hover { color: var(--accent); }
.member__mail { font-weight: 600; color: var(--accent); }
.member__mail:hover { text-decoration: underline; }

/* Sans survol — écrans tactiles — les réseaux restent visibles en permanence :
   une interaction qui n'existe pas ne doit pas cacher un contenu utile. */
@media (hover: none) {
  .member__social { opacity: 1; background: linear-gradient(180deg, transparent 40%, rgba(20, 8, 15, .55)); align-items: flex-end; padding-bottom: var(--s4); }
  .member__social a { transform: none; width: 40px; height: 40px; }
}

/* ============================ 14. PIED DE PAGE ========================== */
.footer {
  position: relative;
  background: #121215;
  color: rgba(232, 232, 238, .68);
  padding-top: var(--s8);
  border-top: 3px solid var(--plum-600);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--s5);
}
.footer h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s4);
}
.footer__links { display: grid; gap: var(--s2); }
.footer__links a { transition: color var(--t-fast); font-size: 15px; }
.footer__links a:hover { color: var(--gold-500); }
.footer__brand p { font-size: 15px; margin-block: var(--s4) var(--s5); max-width: 40ch; }
.footer .brand__mark { width: 120px; }

.socials { display: flex; gap: var(--s2); }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  transition: all var(--t-fast);
}
.socials a:hover { background: var(--gold-500); color: #2B0718; border-color: transparent; }
.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  margin-top: var(--s7);
  padding-block: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.footer__bottom a { display: inline-block; padding-block: 6px; }
.footer__bottom a:hover { color: var(--gold-500); }

/* =================== 15. WIDGETS FLOTTANTS ============================== */
.floats {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: var(--z-notification);
  display: grid;
  gap: var(--s2);
  justify-items: center;
}

.fab {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  color: #fff;
  box-shadow: var(--sh-2);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), opacity var(--t), visibility var(--t);
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 22px; height: 22px; }
.fab__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 7px 12px;
  border-radius: var(--r-btn);
  background: #17171B;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-fast);
}
.fab:hover .fab__tip { opacity: 1; transform: translateY(-50%); }

.fab--top {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
}
.fab--top:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fab--top.is-visible { opacity: 1; visibility: visible; }
.fab--top svg { width: 18px; height: 18px; }
.fab--top .ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 2;
  transition: stroke-dashoffset .1s linear;
  pointer-events: none;
}
.fab--wa { background: #25D366; }
.fab--wa:hover { background: #1FB855; }
.fab--chat { width: 56px; height: 56px; background: var(--accent); color: var(--on-accent); }
.fab--chat:hover { background: var(--accent-hover); }
.fab--chat::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-card);
  border: 2px solid var(--gold-500);
  opacity: 0;
  animation: fab-ring 2.4s var(--ease) infinite;
}
@keyframes fab-ring {
  0% { opacity: .6; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.22); }
}
.fab--chat .badge-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: #E4405F;
  border: 2px solid var(--bg);
}
.fab--chat.is-open .ico-open { display: none; }
.fab--chat .ico-close { display: none; }
.fab--chat.is-open .ico-close { display: block; }
.fab--chat.is-open .badge-dot { display: none; }

/* Chatbot */
.chat {
  position: fixed;
  right: var(--s5);
  bottom: calc(var(--s5) + 68px);
  z-index: var(--z-notification);
  width: min(372px, calc(100vw - 32px));
  max-height: min(600px, calc(100svh - 140px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--t);
}
.chat.is-open { opacity: 1; visibility: visible; transform: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--plum-600);
  color: #fff;
}
.chat__head .avatar {
  width: 38px; height: 38px;
  border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  flex: none;
}
.chat__head .avatar svg { width: 20px; height: 20px; }
.chat__head b { display: block; font-size: 15px; }
.chat__head span { font-size: 12px; opacity: .78; display: flex; align-items: center; gap: 5px; }
.chat__head span i { width: 6px; height: 6px; background: #4ADE80; animation: pulse-dot 2s infinite; }
.chat__head .icon-btn {
  margin-left: auto;
  width: 32px; height: 32px;
  background: transparent;
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}
.chat__head .icon-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }

.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--bg);
  scroll-behavior: smooth;
}
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 1.5;
  animation: msg-in .28s var(--ease) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.msg--user { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.msg a { color: var(--accent); text-decoration: underline; }
.msg--user a { color: inherit; }
.msg ul { display: grid; gap: 3px; margin-top: 6px; }
.msg li { padding-left: 12px; position: relative; }
.msg li::before { content: "▪"; position: absolute; left: 0; color: var(--gold-600); }

.typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; background: var(--text-3); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) var(--s4) 0; background: var(--bg); }
.chat__quick button {
  padding: 7px 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.chat__quick button:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.chat__form {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat__form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--bg);
  outline: none;
  font-size: 15px;
}
.chat__form input:focus { border-color: var(--accent); }
.chat__form button {
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  transition: background var(--t-fast);
}
.chat__form button:hover { background: var(--accent-hover); }
.chat__form svg { width: 18px; height: 18px; }

/* Cookies */
.cookie {
  position: fixed;
  left: var(--s5);
  bottom: var(--s5);
  z-index: var(--z-notification);
  width: min(380px, calc(100vw - 32px));
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: var(--sh-3);
  transform: translateY(160%);
  transition: transform var(--t-slow);
}
.cookie.is-visible { transform: none; }
.cookie p { font-size: 14px; color: var(--text-2); margin-bottom: var(--s3); }
.cookie__actions { display: flex; gap: var(--s2); }

/* Fil d'Ariane */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .66);
}
.crumbs a:hover { color: var(--gold-500); }
.crumbs span { opacity: .45; }

/* =============== 16. APPARITION AU DÉFILEMENT ========================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-20px); }
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal="zoom"] { transform: scale(.98); }

/* Sous 900 px les colonnes occupent toute la largeur : un décalage latéral
   ferait dépasser la page de quelques pixels avant le déclenchement. On
   n'anime plus alors que la verticale. */
@media (max-width: 900px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(16px); }
}

/* ================ 17. RESPONSIVE & ACCESSIBILITÉ ======================== */
@media (min-width: 1100px) { .brand__tag { display: block; } }

@media (max-width: 959px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .event__grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar .btn { grid-column: 1 / -1; }
}

@media (max-width: 839px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__actions > .btn { display: none; }
  .topbar__hide-sm { display: none; }
}

@media (max-width: 599px) {
  :root { --header-h: 64px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .gallery { grid-auto-rows: 180px; }
  .gallery__item.wide { grid-column: span 1; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .split__badge { right: var(--s3); bottom: calc(var(--s4) * -1); }
  .hero { min-height: 88svh; }
  .searchbar { grid-template-columns: 1fr; }
  .cookie { width: calc(100vw - 32px); left: var(--s4); bottom: var(--s4); }
  .floats { right: var(--s4); bottom: var(--s4); }
  .chat { right: var(--s4); bottom: calc(var(--s4) + 64px); max-height: calc(100svh - 120px); }
  .topbar { display: none; }
  .hero__stats { gap: var(--s5); }
  .hero__price { font-size: 13px; padding: 8px 12px; }
  .hero__price b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__title .word { opacity: 1; transform: none; }
}

@media print {
  .header, .topbar, .floats, .chat, .preloader, .cookie, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   18. COMPOSANTS v4 — slider d'accueil, devis, catégories, rails, blog
   Mêmes règles que le reste : grille 4 px, rayons 2/4 px, une seule ombre.
   ========================================================================== */

/* ------------------------------------------------ 18.1 sélecteur de devise */
.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-width: 0;
}
.topbar__right { margin-left: auto; gap: var(--s4); }
.topbar__left em { font-style: normal; color: rgba(255, 255, 255, .48); }
.topbar__left b { color: #fff; font-weight: 600; }
.topbar__loc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__hi { color: rgba(255, 255, 255, .72); white-space: nowrap; }
.topbar__hi b { color: #fff; font-weight: 600; }
.topbar a { white-space: nowrap; }

.curr { position: relative; }
.curr__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 4px var(--s2);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-chip);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.curr__btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.curr__btn svg { width: 12px; height: 12px; transition: transform var(--t-fast); }
.curr__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.curr__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  min-width: 176px;
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
}
.curr.is-open .curr__list { opacity: 1; visibility: visible; transform: none; }
.curr__list button {
  display: block;
  width: 100%;
  padding: var(--s2) var(--s3);
  text-align: left;
  font-size: 13px;
  color: var(--text);
  border-radius: var(--r-chip);
  transition: background var(--t-fast);
}
.curr__list button:hover,
.curr__list button[aria-selected="true"] { background: var(--accent-soft); }

/* ------------------------------------------------- 18.2 slider d'ouverture */
.hslider {
  position: relative;
  isolation: isolate;
  background: #0A0A0C;
}
.hslider__stage {
  position: relative;
  min-height: min(92svh, 900px);
}
.hslide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--topbar-h) + var(--s6));
  padding-bottom: calc(var(--s8) + var(--s3));
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.hslide.is-active { position: relative; opacity: 1; visibility: visible; }
.hslide__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hslide__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.hslide.is-active .hslide__bg img { transform: scale(1); }
.hslide__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Le voile ne couvre que la colonne de texte et s'efface avant le milieu :
     la photo doit rester une photo, pas un fond assombri. */
  background:
    linear-gradient(90deg, rgba(8, 8, 10, .88) 0%, rgba(8, 8, 10, .70) 30%, rgba(8, 8, 10, .22) 58%, rgba(8, 8, 10, 0) 78%),
    linear-gradient(180deg, rgba(8, 8, 10, .42) 0%, transparent 30%, rgba(8, 8, 10, .62) 100%);
}
.hslide__inner { max-width: 780px; }
.hslide__kicker,
.hslide__title,
.hslide__text,
.hslide__cta,
.hslide__price {
  opacity: 0;
  transform: translateY(18px);
}
.hslide.is-active .hslide__kicker { animation: slide-in .7s var(--ease) .10s forwards; }
.hslide.is-active .hslide__title  { animation: slide-in .7s var(--ease) .18s forwards; }
.hslide.is-active .hslide__text   { animation: slide-in .7s var(--ease) .28s forwards; }
.hslide.is-active .hslide__cta    { animation: slide-in .7s var(--ease) .54s forwards; }
.hslide.is-active .hslide__price  { animation: slide-in .7s var(--ease) .44s forwards; }
@keyframes slide-in { to { opacity: 1; transform: none; } }

.hslide__title { margin: var(--s4) 0 var(--s4); color: #fff; }
.hslide__text { color: rgba(255, 255, 255, .82); max-width: 58ch; }
.hslide__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.hslider__ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding-bottom: var(--s5);
}
.hslider__ui-inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.hslider__nav { display: flex; align-items: center; gap: var(--s3); }
.hslider__arrow {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-btn);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hslider__arrow:hover { background: var(--plum-600); border-color: var(--plum-600); transform: translateY(-2px); }
.hslider__arrow svg { width: 20px; height: 20px; }
.hslider__count {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}
.hslider__count b { color: #fff; font-size: 18px; font-weight: 700; }
.hslider__count i { width: 26px; height: 1px; background: rgba(255, 255, 255, .4); }

.hslider__dots { display: flex; gap: var(--s2); margin-right: auto; }
.hslider__dots button {
  position: relative;
  width: 26px; height: 3px;
  background: rgba(255, 255, 255, .28);
  transition: background var(--t-fast), width var(--t-fast);
}
.hslider__dots button::before { content: ""; position: absolute; inset: -12px -3px; }
.hslider__dots button.is-active { width: 44px; background: var(--gold-500); }

.hslider__play {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-btn);
  color: #fff;
  transition: background var(--t-fast);
}
.hslider__play:hover { background: rgba(255, 255, 255, .14); }
.hslider__play svg { width: 15px; height: 15px; }
.hslider__play .ico-play { display: none; }
.hslider.is-paused .hslider__play .ico-play { display: block; }
.hslider.is-paused .hslider__play .ico-pause { display: none; }

.hslider__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .16);
}
.hslider__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold-500);
}

/* --------------------------------------------------- 18.3 bloc de demande */
.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.avatars { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.avatars__stack { display: flex; }
.avatars__a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  margin-right: -10px;
  border: 2px solid var(--bg);
  border-radius: var(--r-chip);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
}
.avatars__a:nth-child(2) { background: var(--plum-500); color: #fff; }
.avatars__a:nth-child(3) { background: var(--gold-600); color: #1A0810; }
.avatars__a:nth-child(4) { background: var(--text); color: var(--bg); }
.avatars__a:nth-child(5) { background: var(--gold-500); color: #1A0810; }
.avatars__txt b { display: block; font-size: 15px; }
.avatars__txt span {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: 13px;
  color: var(--text-2);
}
.avatars__txt svg { width: 14px; height: 14px; color: var(--gold-500); }

.quote__form {
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.quote__fields,
.quote__contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
}
.quote__contact { margin-top: var(--s3); }
.quote__submit {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg {
  margin: 0;
  font-size: 14px;
  min-height: 1.2em;
  color: var(--text-2);
}
.form-msg.is-ok { color: #1E7A50; font-weight: 600; }
.form-msg.is-ko { color: #C0392B; font-weight: 600; }
html[data-theme="dark"] .form-msg.is-ok { color: #6FE0A8; }
html[data-theme="dark"] .form-msg.is-ko { color: #F1948A; }

/* ------------------------------------------------- 18.4 cartes catégories */
.tilecats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--s4);
}
.tilecat {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tilecat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.tilecat__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.tilecat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Dérive lente des visuels ---------------------------------------------
   Les quatre tuiles respirent : l'image glisse et revient, très lentement,
   entre deux positions rapprochées. C'est le mouvement qu'on remarque sans le
   regarder — celui qui donne l'impression que la page est vivante sans jamais
   demander l'attention.

   Trois précautions font toute la différence entre « vivant » et « agité » :

     • **L'amplitude est minuscule** (±1,5 % de la largeur) et l'image est
       agrandie de 9 % pour que le déplacement ne découvre jamais un bord.
     • **Le cycle est très long** (24 à 32 secondes) et repart en sens inverse
       (« alternate ») : jamais de saut au bouclage, jamais de retour brutal.
     • **Les quatre tuiles sont désynchronisées** par des durées différentes et
       des délais négatifs — chacune démarre au milieu de son propre cycle.
       Quatre images qui bougeraient à l'unisson feraient un diaporama ; quatre
       images décalées font une scène.

   Le survol n'agrandit plus l'image : la carte se soulève déjà et prend son
   ombre. Superposer un zoom à une dérive en cours produirait un à-coup. */
@keyframes tilecat-drift {
  from { transform: scale(var(--z1)) translate3d(calc(var(--dx) * -1), calc(var(--dy) * -1), 0); }
  to   { transform: scale(var(--z2)) translate3d(var(--dx), var(--dy), 0); }
}
.tilecat__media img {
  /* Le zoom respire de 5 % à 13 % en même temps que l'image glisse : un
     changement d'échelle se remarque là où un glissement seul, à cette
     lenteur, passerait inaperçu. L'amplitude latérale reste inférieure à la
     marge du plus petit zoom (2,5 %), sans quoi un bord apparaîtrait au
     moment où l'image est la moins agrandie. */
  --z1: 1.05;
  --z2: 1.13;
  --dx: 1.8%;
  --dy: 1.4%;
  transform: scale(var(--z1));
  animation: tilecat-drift var(--dur, 27s) var(--delay, 0s) ease-in-out infinite alternate;
}
/* Décalages : durées premières entre elles et départs en cours de route. */
.tilecats > :nth-child(4n + 1) .tilecat__media img { --dur: 27s; --delay:  -3s; --dx:  1.8%; --dy: -1.2%; }
.tilecats > :nth-child(4n + 2) .tilecat__media img { --dur: 32s; --delay: -11s; --dx: -1.5%; --dy:  1.5%; --z2: 1.11; }
.tilecats > :nth-child(4n + 3) .tilecat__media img { --dur: 23s; --delay:  -7s; --dx:  1.4%; --dy:  1.6%; --z2: 1.14; }
.tilecats > :nth-child(4n + 4) .tilecat__media img { --dur: 29s; --delay: -16s; --dx: -1.9%; --dy: -1.3%; }

/* Hors de l'écran, on arrête tout : une animation qui tourne sous le pli ne
   sert personne et vide la batterie. La classe est posée par le script ; sans
   JavaScript, la dérive fonctionne quand même. */
.tilecat.is-still .tilecat__media img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .tilecat__media img { animation: none; transform: none; }
}
.tilecat__body { display: block; padding: var(--s4); }
.tilecat__name { display: block; font-size: 17px; font-weight: 700; }
.tilecat__meta {
  display: block;
  margin-top: var(--s1);
  font-size: 13px;
  color: var(--gold-text);
  font-weight: 600;
}
.tilecat__tag {
  display: block;
  margin-top: var(--s2);
  font-size: 13px;
  color: var(--text-2);
}
.tilecat__go {
  position: absolute;
  right: var(--s3);
  top: calc(4 / 3 * 100% - 22px);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-btn);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
}
.tilecat:hover .tilecat__go { opacity: 1; transform: none; }
.tilecat__go svg { width: 18px; height: 18px; }

/* ------------------------------------------------------- 18.5 rail (pays) */
.carousel__nav { display: flex; gap: var(--s2); }
.rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--s2);
}
/* Un rail sans fin est replacé par le script d'un exemplaire à l'autre :
   l'accrochage impératif combattrait ces sauts, on l'assouplit. */
.rail--loop { scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { display: none; }
.rail__inner {
  display: flex;
  gap: var(--s4);
}
.ctry {
  position: relative;
  flex: 0 0 clamp(220px, 24vw, 268px);
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ctry:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.ctry__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.ctry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ctry:hover .ctry__media img { transform: scale(1.06); }
.ctry__body { display: block; padding: var(--s3) var(--s4) var(--s4); }
.ctry__body b { display: block; font-size: 16px; }
.ctry__body > span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }

/* ---------------------------------- carrousel « pays recommandés » (favdest) */
/* Le rail mord volontairement hors du conteneur (marge droite négative, comme
   .stories__rail) : sans ce clip, ce débordement assumé pousserait la page en
   largeur au lieu de rester une simple invitation visuelle à faire défiler. */
.favdest { overflow-x: clip; }
.favdest__rail {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--s2) 0 var(--s3);
  margin-right: calc(clamp(20px, 6vw, 140px) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.favdest__rail::-webkit-scrollbar { display: none; }
.favdest__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-card); }

.favdest__card {
  position: relative;
  flex: 0 0 clamp(220px, 26vw, 280px);
  scroll-snap-align: start;
  display: block;
}
.favdest__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.favdest__media img, .favdest__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.favdest__card:hover .favdest__media img { transform: scale(1.06); }
.favdest__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 8, 0) 55%, rgba(10, 4, 8, .72) 100%);
}
.favdest__pin {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 4, 8, .45);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.favdest__pin svg { width: 14px; height: 14px; }

.favdest__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.favdest__card:hover .favdest__pill { border-color: var(--accent); transform: translateX(2px); }
.favdest__pilltxt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favdest__go {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: background var(--t-fast);
}
.favdest__go svg { width: 16px; height: 16px; }
.favdest__card:hover .favdest__go { background: var(--accent-hover); }

.favdest__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s5); }
.favdest__dots button {
  position: relative;
  width: 30px; height: 6px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
  transition: width var(--t-fast), background var(--t-fast);
}
.favdest__dots button::after { content: ""; position: absolute; inset: -11px -4px; }
.favdest__dots button[aria-selected="true"] { width: 54px; background: var(--accent); }

@media (max-width: 640px) {
  .favdest__rail { margin-right: calc(var(--s5) * -1); }
}

/* -------------------------------------------- 18.6 voyages personnalisés */
.perso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.perso__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.perso__img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}
.perso__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.perso__img--tall { grid-row: span 2; }
.perso__img--tall img { aspect-ratio: 3 / 4; height: 100%; }
.perso__feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s5);
  margin-top: var(--s5);
}
.perso__feat h3 { font-size: 17px; margin: var(--s3) 0 var(--s1); }
.perso__feat p { font-size: 14px; color: var(--text-2); }
.checklist--sm { margin: var(--s3) 0; gap: var(--s2); }
.checklist--sm li { font-size: 14px; }
.checklist--sm svg { width: 17px; height: 17px; }

/* ------------------------------------------------------- 18.7 actualités */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: var(--s5);
}
.post {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.post__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__cat {
  position: absolute;
  left: var(--s3); top: var(--s3);
  padding: 5px 10px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-chip);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 12.5px; color: var(--text-3); }
.post__meta span { display: inline-flex; align-items: center; gap: 5px; }
.post__meta svg { width: 14px; height: 14px; color: var(--gold-500); }
.post__title { font-size: 19px; line-height: 1.28; }
.post__title a:hover { color: var(--accent); }
.post__excerpt { font-size: 14px; color: var(--text-2); }
.post__body .link-arrow { margin-top: auto; }

/* ----------------------------------------------------- 18.8 encarts stats */
.statboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
.statbox {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-card);
}
.statbox b {
  display: block;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
}
.statbox > span {
  display: block;
  margin-top: var(--s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-text);
}
.statbox p { margin-top: var(--s2); font-size: 14px; color: var(--text-2); }

/* ------------------------------------------------------ 18.9 bande d'avis */
.testi-band { position: relative; isolation: isolate; overflow: hidden; }
.testi-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.testi-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 10, .9), rgba(8, 8, 10, .82));
}
.testi-band .s-head__kicker { color: var(--gold-500); }
.testi-band .s-head__title { color: #fff; }
.testi-band .s-head__text { color: rgba(255, 255, 255, .74); }
.testi-band .icon-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.testi-band .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.testi-band .testi__dots button { background: rgba(255, 255, 255, .3); }
.testi-band .testi__dots button.is-active { background: var(--gold-500); }
.testi-band__cta { text-align: center; margin-top: var(--s4); }
.testi-band__cta .link-arrow { color: var(--gold-500); }

/* ------------------------------------------------------------ 18.10 FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.faq-help {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.faq-help b { display: block; font-size: 14px; }
.faq-help a { display: inline-block; padding-block: 6px; font-size: 14px; color: var(--accent); }
.faq-help a:hover { text-decoration: underline; }

/* --------------------------------------------------- 18.11 appel à action */
.cta-band__actions {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s5);
}

/* ------------------------------------------------------ 18.12 pied de page */
.footer__news { position: relative; display: flex; gap: var(--s2); margin: var(--s4) 0; }
.footer__news input {
  flex: 1;
  min-width: 0;
  padding: 10px var(--s3);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
}
.footer__news input::placeholder { color: rgba(255, 255, 255, .5); }
.footer__news input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.footer__news .btn { padding: 10px 14px; }
.footer__news .form-msg { position: absolute; top: 100%; left: 0; font-size: 12.5px; margin-top: 4px; }
/* Le montant converti reste dans le flux du texte qui l'entoure. */
.price { display: inline; }

.footer__hours { display: block; font-size: 13px; opacity: .7; line-height: 1.5; }
.footer__dev a { color: var(--gold-500); }
.footer__dev a:hover { text-decoration: underline; }

/* ------------------------------------------------------- 18.13 responsive */
@media (max-width: 1100px) {
  .quote__grid,
  .perso,
  .faq-grid { grid-template-columns: 1fr; }
  .perso__media { grid-template-columns: repeat(3, 1fr); }
  .perso__img--tall { grid-row: auto; }
  .perso__img--tall img { aspect-ratio: 4 / 3; }
}

@media (max-width: 1180px) {
  .topbar__loc { display: none; }
  .topbar__left em { display: none; }
}
@media (max-width: 980px) {
  .topbar__hi { display: none; }
  .topbar__left a[href^="mailto"] { display: none; }
}

@media (max-width: 720px) {
  .hslider__stage { min-height: 100svh; }
  .hslide { padding-bottom: calc(var(--s8) + var(--s8)); }
  .hslider__ui-inner { gap: var(--s3); }
  .hslider__dots { order: 3; width: 100%; }
  .hslider__play { display: none; }
  .perso__media { grid-template-columns: 1fr 1fr; }
  .perso__img:last-child { display: none; }
  .statbox { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .hslide__bg img { transition: none; transform: none; }
  .hslide__kicker, .hslide__title, .hslide__text, .hslide__cta, .hslide__price {
    opacity: 1; transform: none; animation: none !important;
  }
}

/* ==========================================================================
   19. BLOCS SANS STYLE — fiche circuit, article, pagination, dépôt d'avis
   --------------------------------------------------------------------------
   Ces composants existaient dans les gabarits mais n'avaient jamais reçu leurs
   règles : les icônes s'affichaient à la taille du conteneur et les colonnes
   se superposaient. Tout est repris ici, dans le même système que le reste.
   ========================================================================== */

/* ---------------------------------------------- 19.1 fil d'Ariane (courant) */
.crumbs__cur { opacity: .9; }

/* -------------------------------------------------- 19.2 repères d'en-tête */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}
.hero__facts > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.hero__facts svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gold-500);
}

/* ------------------------------------------- 19.3 colonne de réservation */
.booking { position: relative; }
.booking__card {
  position: sticky;
  top: calc(var(--header-h) + var(--s4));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  padding: var(--s5);
}
.booking__price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-top: var(--s4);
}
.booking__price .h-lg { line-height: 1; }
.booking__per { font-size: 14px; color: var(--text-2); }
.booking__note {
  margin-top: var(--s2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}
.booking__form { margin-top: var(--s5); }
.booking__form .form__row { gap: var(--s3); }
.booking__form .btn { margin-top: var(--s4); }
.booking__card > .btn--ghost { margin-top: var(--s3); }
.booking__sub {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ------------------------------------------------ 19.4 avis sur la fiche */
.dest-revs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}
.dest-rev {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-card);
  padding: var(--s4);
}
.dest-rev p {
  margin-top: var(--s3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.dest-rev cite {
  display: block;
  margin-top: var(--s3);
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
}

/* ----------------------------------------------------- 19.5 page article */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.article__body { max-width: 72ch; }
.article__body > * + * { margin-top: var(--s4); }
.article__body h2 {
  margin-top: var(--s6);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.article__body h3 { margin-top: var(--s5); font-size: 19px; }
.article__body p { color: var(--text-2); line-height: 1.75; }
.article__body ul,
.article__body ol { padding-left: var(--s5); display: grid; gap: var(--s2); }
.article__body li { color: var(--text-2); line-height: 1.7; }
.article__body ol li { list-style: decimal; }
.article__body ul li { list-style: disc; }
.article__body a { color: var(--accent); text-decoration: underline; }
.article__body blockquote {
  border-left: 3px solid var(--gold-500);
  padding-left: var(--s4);
  font-size: 17px;
  color: var(--text);
}
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-card); }

.article__share {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.article__share span { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.article__share a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text-2);
  transition: all var(--t-fast);
}
.article__share a:hover {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}
.article__share svg { width: 17px; height: 17px; }

.article__aside { position: sticky; top: calc(var(--header-h) + var(--s4)); }

/* -------------------------------------------------------- 19.6 pagination */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s7);
}
.pager__link {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--t-fast);
}
.pager__link:hover { border-color: var(--border-strong); color: var(--text); }
.pager__link.is-current {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

/* ---------------------------------------------------- 19.7 dépôt d'un avis */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.review-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: var(--s4);
}

/* Notation : les étoiles sont rendues en ordre inverse pour que le survol
   d'une étoile allume aussi celles qui la précèdent, sans une ligne de JS. */
.stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-self: start;          /* sinon la grille de .field l'étire à droite */
  gap: var(--s1);
}
.stars-input input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.stars-input label {
  cursor: pointer;
  color: var(--border-strong);
  transition: color var(--t-fast), transform var(--t-fast);
}
.stars-input svg { width: 26px; height: 26px; display: block; }
.stars-input label:hover,
.stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: var(--gold-500); }
.stars-input label:hover { transform: scale(1.1); }
.stars-input input:focus-visible + label {
  outline: 2px solid var(--outline);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------- 19.8 responsive */
@media (max-width: 1000px) {
  .article,
  .review-grid { grid-template-columns: 1fr; }
  .article__aside { position: static; }
  .booking__card { position: static; }
}
@media (max-width: 560px) {
  .booking__form .form__row,
  .review-form .form__row { grid-template-columns: 1fr; }
  .hero__facts { gap: var(--s2) var(--s4); }
}

/* Même règle côté site : l'attribut hidden l'emporte sur les display posés
   par les composants (boutons, listes de suggestions, messages d'état). */
[hidden] { display: none !important; }

/* ==========================================================================
   20. RUBAN PARTENAIRES & FENÊTRE DE PROMOTION
   ========================================================================== */

/* -------------------------------------------------- 20.1 ruban partenaires */
.partners { overflow: hidden; }
.partners__lead {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s5);
}
.partners__rail {
  position: relative;
  overflow: hidden;
  /* Le ruban s'efface sur les bords : la boucle ne se voit pas. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  --dur: 30s;
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  width: max-content;
  animation: partners-scroll var(--dur) linear infinite;
}
.partners__rail:hover .partners__track,
.partners__rail:focus-within .partners__track { animation-play-state: paused; }

.partners__item {
  flex: none;
  display: grid;
  place-items: center;
  width: 180px;
  height: 84px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  /* Fond blanc dans les deux thèmes : les logos des partenaires sont fournis
     sur blanc, un thème sombre les entourerait d'un halo. */
  background: #FFFFFF;
  filter: grayscale(.3);
  opacity: .92;
  transition: filter var(--t), opacity var(--t), border-color var(--t), transform var(--t);
}
.partners__item:hover {
  filter: none;
  opacity: 1;
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.partners__item img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
a.partners__item:focus-visible { outline: 2px solid var(--outline); outline-offset: 2px; }

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .partners__rail { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------- 20.2 fenêtre de promotion */
.promo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s5);
}
.promo__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, .62);
  opacity: 0;
  transition: opacity var(--t);
}
.promo__box {
  position: relative;
  width: min(100%, 720px);
  max-height: calc(100svh - var(--s7));
  overflow: auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--t), transform var(--t);
}
.promo.is-open .promo__backdrop { opacity: 1; }
.promo.is-open .promo__box { opacity: 1; transform: none; }

.promo__media { position: relative; overflow: hidden; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.promo__body {
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  align-content: center;
  gap: var(--s3);
}
.promo__title {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.promo__text { color: var(--text-2); font-size: 15px; line-height: 1.65; }
.promo__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

.promo__close {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all var(--t-fast);
}
.promo__close:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.promo__close svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .promo { padding: var(--s4); }
  .promo__box { grid-template-columns: 1fr; }
  .promo__media { aspect-ratio: 16 / 9; }
}

/* Tarif « à deux », sous le tarif par personne de la fiche circuit. */
.booking__couple {
  margin-top: var(--s2);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
}
.booking__couple .price { color: var(--text); }
.booking__couple span { font-weight: 400; color: var(--text-3); }

/* =========================================================================
   21. SLIDER D'OUVERTURE — DISPOSITION
   Le bloc de texte est centré par défaut et calé à gauche si le dashboard le
   demande ; le tarif d'appel, la preuve sociale et la pastille tournante
   occupent le reste de l'image.
   ========================================================================= */

/* Le slider occupe l'écran exactement : la hauteur des barres fixes est
   retranchée, sinon les flèches et le compteur tombent sous la ligne de
   flottaison sur un portable ou un écran d'ordinateur portable.
   La consigne va aussi sur la diapositive elle-même : la diapositive active
   est dans le flux, et sans cela elle s'arrêtait à la hauteur de son texte —
   l'image laissait alors une bande noire en bas des écrans hauts. */
.hslider__stage,
.hslide {
  min-height: min(calc(100svh - var(--header-h) - var(--topbar-h)), 900px);
}

/* -------------------------------------------------- disposition du contenu */
.hslider--center .hslide__inner {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}
/* Le titre est calibré pour tenir en deux lignes plutôt que d'abandonner un
   mot seul en bas — et pour que le bloc reste assez court, dans les deux
   dispositions, pour ne pas descendre sur la preuve sociale. */
.hslide__title { font-size: clamp(33px, 4.6vw, 58px); }
.hslider--center .hslide__cta { justify-content: center; }
.hslider--center .hslide__text { margin-inline: auto; }
/* Le conteneur reste centré et pleine largeur ; ce sont ses enfants qu'on
   borne. Poser un max-width sur le conteneur l'aurait recentré au milieu de
   l'image, ce qui est exactement l'inverse du but recherché. */
.hslider--left .hslide__inner { max-width: none; text-align: left; }
.hslider--left .hslide__inner > * { max-width: 620px; margin-right: auto; }

/* Un texte centré doit être lisible sur toute la largeur : le voile passe
   d'un dégradé latéral à un assombrissement d'ensemble. */
.hslider--center .hslide__veil {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(8, 8, 10, .34) 0%, rgba(8, 8, 10, .72) 68%, rgba(8, 8, 10, .9) 100%),
    linear-gradient(180deg, rgba(8, 8, 10, .62) 0%, rgba(8, 8, 10, .28) 34%, rgba(8, 8, 10, .86) 100%);
}

.hslide__title { text-wrap: balance; }
.hslide__text { max-width: 46ch; }

/* ------------------------------------------------------- tarif d'appel */
.hslide__price {
  margin-top: var(--s4);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .74);
}
.hslide__price b {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F3E2A8;
  /* Le montant tombe parfois sur une zone claire de la photo. */
  text-shadow: 0 1px 3px rgba(8, 8, 10, .7), 0 2px 18px rgba(8, 8, 10, .65);
}
.hslide__price span { color: rgba(255, 255, 255, .6); }
.hslide__cta { margin-top: var(--s4); }

/* --------------------------------------------------- preuve sociale */
.hslide__proof {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  color: #fff;
}
.hslide__proof p { display: grid; gap: 2px; line-height: 1.3; }
.hslide__proof b { font-size: 14px; font-weight: 700; }
.hslide__proof span {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: rgba(255, 255, 255, .7);
}
.hslide__proof svg { width: 13px; height: 13px; color: var(--gold-500); }
.hslide__proof .avatars__a {
  width: 32px; height: 32px; font-size: 12px;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, .5);
}

/* Écrans peu hauts (portables 1280×800, fenêtres réduites) : la hauteur utile
   tombe sous 700 px une fois les barres retranchées. On resserre alors le bloc
   plutôt que de laisser les commandes du carrousel passer sous la ligne de
   flottaison — c'est le contenu le moins essentiel qui cède. */
@media (min-width: 901px) and (max-height: 880px) {
  .hslide__title { font-size: clamp(30px, 3.6vw, 46px); }
  .hslide__text  { font-size: 15.5px; }
  .hslide__price b { font-size: clamp(22px, 2.2vw, 28px); }
  .hslide__proof { display: none; }
}

/* --------------------------------------------------------- écrans étroits */
@media (max-width: 900px) {
  .hslider--center .hslide__inner,
  .hslider--left .hslide__inner { text-align: left; max-width: 100%; }
  .hslider--center .hslide__cta { justify-content: flex-start; }
  .hslider--center .hslide__text { margin-inline: 0; }
  .hslider--center .hslide__veil {
    background:
      linear-gradient(180deg, rgba(8, 8, 10, .74) 0%, rgba(8, 8, 10, .42) 38%, rgba(8, 8, 10, .9) 100%);
  }
}


/* =========================================================================
   22. CONSEILS EN VIDÉO
   Cartes au format des publications TikTok (9:16). Le lecteur n'est inséré
   qu'au clic : tant qu'il ne l'est pas, la carte reste une simple image.
   ========================================================================= */
.tips__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 72ch;
  margin: 0 auto var(--s6);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}
.tips__note svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); margin-top: 1px; }

.tips {
  /* Hauteur du bandeau que TikTok empile sous la vidéo — nom du compte,
     légende, piste audio. C'est la seule mesure que je n'ai pas pu relever
     moi-même : si une barre de défilement réapparaît, augmentez ; si une bande
     noire subsiste sous le lecteur, diminuez. Un seul nombre à changer. */
  --tip-chrome: 190px;
  display: grid;
  /* 330 px au minimum : en dessous, le lecteur de TikTok rogne sa propre
     interface — nom du compte, bouton « Regarder maintenant », légende. Leur
     documentation donne 325 px comme largeur plancher ; on garde une marge. */
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--s5);
}
.tip {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tip:hover { transform: translateY(-3px); box-shadow: var(--sh-1); border-color: var(--border-strong); }

.tip__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  /* Fond neutre sombre, et non pas la couleur de marque : sans vignettes, une
     grille entière de prune devient un mur — c'est le reproche fait au thème
     à ses débuts, et le contrôle visuel le signale encore. */
  background: #1A151A;
}
.tip__frame img { width: 100%; height: 100%; object-fit: cover; }
.tip__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* En lecture, le cadre cesse d'être un 9:16. Le lecteur de TikTok, ce n'est pas
   que la vidéo : il empile en dessous le nom du compte, la légende et la piste
   audio — une bande d'environ 190 px qui ne se met pas à l'échelle. Contraindre
   le tout au format de la vidéo revenait à le rogner, et le lecteur affichait
   alors sa propre barre de défilement.
   D'où la vieille recette du « padding-bottom » : le pourcentage se calcule sur
   la largeur du cadre — 177,78 % donnant le 9:16 de la vidéo — auquel on ajoute
   la bande, elle en pixels fixes. Le cadre suit donc la largeur de la carte
   sans jamais tronquer le lecteur. */
.tip__frame.is-playing {
  aspect-ratio: auto;
  height: 0;
  padding-bottom: calc(177.78% + var(--tip-chrome));
  background: #000;
}

/* Sans vignette : un aplat de marque avec l'initiale du titre. */
.tip__blank {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #2A2229 0%, #151115 100%);
  color: rgba(243, 226, 168, .34);           /* l'or de la marque, en retrait */
  font-size: 96px; font-weight: 800; letter-spacing: -.04em;
}

.tip__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(11, 3, 8, .48);
  backdrop-filter: blur(4px);
  color: #fff;
  transition: transform var(--t-fast), background var(--t-fast);
}
.tip__play:hover { background: var(--gold-500); color: #2B0718; transform: translate(-50%, -50%) scale(1.06); }
.tip__play svg { width: 26px; height: 26px; margin-left: 3px; }
.tip__frame.is-playing .tip__play,
.tip__frame.is-playing img,
.tip__frame.is-playing .tip__blank { display: none; }

.tip__body { padding: var(--s4); display: grid; gap: var(--s2); align-content: start; flex: 1; }
.tip__title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.tip__text { font-size: 14px; color: var(--text-2); }
.tip__link {
  margin-top: auto;
  padding-top: var(--s2);
  font-size: 13.5px; font-weight: 600;
  color: var(--accent);
}
.tip__link:hover { text-decoration: underline; }

/* Sous 720 px, une seule colonne : mieux vaut une carte pleine largeur qu'une
   grille de lecteurs tronqués. */
@media (max-width: 720px) {
  .tips { grid-template-columns: 1fr; gap: var(--s4); }
  /* Une colonne, mais pas un lecteur démesuré : TikTok conseille 605 px au
     maximum, au-delà l'interface se dilue. */
  .tip { max-width: 560px; margin-inline: auto; width: 100%; }
  .tip__play { width: 52px; height: 52px; }
}

/* =========================================================================
   23. BANDEAU DE CAMPAGNES
   -------------------------------------------------------------------------
   Le bas de page n'est plus un encart fixe mais un carrousel d'offres géré
   depuis le dashboard. Trois partis pris :

     • Le rail est un simple conteneur à défilement horizontal avec accroche.
       Sans JavaScript, le visiteur fait glisser du doigt et tout fonctionne ;
       le script n'ajoute que l'avance automatique et les flèches.
     • Les diapositives font toutes la hauteur de la plus haute (align-items
       n'est pas « stretch » par accident) : le bandeau ne saute pas d'une
       offre à l'autre.
     • Avec un visuel, le texte occupe la moitié gauche et l'image la moitié
       droite, fondue dans le fond par un voile. Sans visuel, on retrouve
       exactement l'ancien encart centré.
   ========================================================================= */
.camp { position: relative; }

.camp__rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--r-card);
  /* Barre masquée : le rail se pilote aux flèches, aux repères ou au doigt. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.camp__rail::-webkit-scrollbar { display: none; }

.camp__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  color: #fff;
  text-align: center;
  background: var(--plum-600);
  display: grid;
  align-content: center;
}
.camp__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
/* La couleur pleine est posée sous le dégradé : un dégradé n'a pas de
   « background-color », et sans elle un outil d'analyse — comme un lecteur qui
   bloque les images — voit du texte blanc sur du blanc. */
.camp__slide--gold { background-color: #4E0C2C;
  background-image: linear-gradient(135deg, #7A1442 0%, #4E0C2C 55%, #2B0718 100%); }
.camp__slide--dark { background-color: #1A151A;
  background-image: linear-gradient(150deg, #241C22 0%, #141014 100%); }

.camp__body { position: relative; display: grid; justify-items: center; }
.camp__slide h2 { color: #fff; margin: var(--s4) 0 var(--s3); }
.camp__slide p { color: rgba(255, 255, 255, .82); max-width: 56ch; margin-inline: auto; }
.camp__slide .btn:not(.btn--light) { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.camp__slide .btn:not(.btn--light):hover { background: var(--gold-600); }

.camp__actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s5);
}

.camp__slide .newsletter {
  display: flex;
  gap: var(--s2);
  max-width: 480px;
  width: 100%;
  margin: var(--s5) auto 0;
  flex-wrap: wrap;
}
.camp__slide .newsletter input[type="email"] {
  flex: 1 1 220px;
  padding: 13px 16px;
  border-radius: var(--r-input);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  outline: none;
  font-size: 15px;
}
.camp__slide .newsletter input::placeholder { color: rgba(255, 255, 255, .6); }
.camp__slide .newsletter input:focus { border-color: var(--gold-500); }
.camp__slide .form-msg { flex: 1 0 100%; color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------ diapositive illustrée */
.camp__media {
  position: absolute;
  inset: 0 0 0 42%;
  overflow: hidden;
}
.camp__media img, .camp__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le voile éteint l'image côté texte et la laisse respirer côté droit. */
.camp__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              var(--plum-600) 0%, rgba(107, 15, 58, .92) 22%, rgba(107, 15, 58, .35) 62%, rgba(107, 15, 58, .12) 100%);
}
.camp__slide--gold .camp__media::after {
  background: linear-gradient(90deg, #4E0C2C 0%, rgba(78, 12, 44, .92) 22%, rgba(78, 12, 44, .35) 62%, rgba(78, 12, 44, .1) 100%);
}
.camp__slide--dark .camp__media::after {
  background: linear-gradient(90deg, #141014 0%, rgba(20, 16, 20, .92) 22%, rgba(20, 16, 20, .38) 62%, rgba(20, 16, 20, .12) 100%);
}
.camp__slide.has-img { text-align: left; }
.camp__slide.has-img .camp__body { justify-items: start; max-width: 52%; }
.camp__slide.has-img p { margin-inline: 0; }
.camp__slide.has-img .camp__actions { justify-content: flex-start; }
.camp__slide.has-img .newsletter { margin-inline: 0; }

/* ------------------------------------------------------------------ pilotage */
.camp__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.camp__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.camp__arrow:hover { background: var(--surface-2); border-color: var(--plum-600); }
.camp__arrow svg { width: 20px; height: 20px; }
.camp__dots { display: flex; gap: 8px; align-items: center; }
.camp__dot {
  position: relative;
  width: 9px; height: 9px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: var(--border-strong, #C9C9CE);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
/* Le repère reste discret, mais la zone de clic fait bien 24 px : au doigt,
   viser une pastille de 9 px est un exercice de patience. */
.camp__dot::after { content: ""; position: absolute; inset: -9px -8px; }
.camp__dot.is-current { width: 26px; background: var(--plum-600); }

@media (max-width: 900px) {
  /* Sous 900 px, l'image passe en fond plein et le texte revient au centre :
     une colonne de 45 % de large sur téléphone ne se lit pas. */
  .camp__media { inset: 0; }
  .camp__media::after {
    background: linear-gradient(180deg, rgba(20, 10, 18, .78) 0%, rgba(20, 10, 18, .88) 100%);
  }
  .camp__slide.has-img { text-align: center; }
  .camp__slide.has-img .camp__body { justify-items: center; max-width: none; }
  .camp__slide.has-img p { margin-inline: auto; }
  .camp__slide.has-img .camp__actions { justify-content: center; }
  .camp__slide.has-img .newsletter { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .camp__rail { scroll-behavior: auto; }
}

/* =========================================================================
   24. ÉPARGNE VOYAGE — SIMULATEUR
   -------------------------------------------------------------------------
   Deux colonnes : les réglages à gauche, le résultat à droite, mis en avant.
   Le résultat reste visible pendant qu'on manipule le curseur — c'est tout
   l'intérêt d'un simulateur : voir le chiffre bouger.
   ========================================================================= */
.save {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.save__panel {
  display: grid;
  gap: var(--s5);
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.save__panel input[type="range"] {
  width: 100%;
  accent-color: var(--plum-600);
  padding: 0;
  border: 0;
  background: transparent;
  align-self: center;
}
.save__result {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--s3);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-card);
  color: #fff;
  background: var(--plum-600);
  text-align: center;
}
.save__label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.save__amount {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}
.save__detail { color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.save__fine { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.save__result .btn { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.save__result .btn:hover { background: var(--gold-600); }

.save__rules { display: grid; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.save__rules li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--text-2);
  font-size: 15px;
}
.save__check { color: var(--accent); flex: 0 0 auto; display: grid; place-items: center; }
.save__check svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .save { grid-template-columns: 1fr; }
  .save__result { position: static; }
}

/* Sur le fond alterné, la note de bas de formulaire passait tout juste sous le
   seuil de contraste (4,48 pour 4,5 exigés). Un cran plus foncé suffit. */
.section--alt .form__note { color: var(--text-2); }

/* =========================================================================
   25. ÉPARGNE VOYAGE — LE RESTE DE LA PAGE
   -------------------------------------------------------------------------
   Une page d'épargne qui n'aligne que des chiffres et des conditions ne donne
   envie de rien. Ces blocs remettent le voyage au centre : ce que la mensualité
   ouvre concrètement, ce qui se passe entre le premier versement et le
   décollage, et la parole de ceux qui l'ont fait.
   ========================================================================= */

/* --- Bandeau de preuve, sous le titre --- */
.save__hero-acts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.save__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 52px);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
}
.save__proof li { display: grid; }
.save__proof b {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gold-500);
  line-height: 1.1;
}
.save__proof span { font-size: 13.5px; color: rgba(255, 255, 255, .78); }

/* --- « À ce rythme, voici où vous partez » ---
   Les cartes sont toutes rendues côté serveur et masquées ; le script révèle
   celles que l'épargne finance. Une grille qui se remplit à mesure qu'on pousse
   le curseur en dit plus long que n'importe quelle phrase de vente. */
.reach {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s4);
}
/* Quatre colonnes exactement sur grand écran : la liste s'arrête à huit
   circuits, soit deux rangées pleines. En colonnes libres, cinq cases par
   rangée laissaient une carte orpheline en dessous — un défaut de mise en
   page qui donne l'impression d'un bug. */
@media (min-width: 1100px) { .reach { grid-template-columns: repeat(4, 1fr); } }
.reach__card {
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.reach__card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.reach__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.reach__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reach__body { display: grid; gap: 2px; padding: var(--s4); }
.reach__name { font-size: 16px; font-weight: 700; }
.reach__meta { font-size: 13px; color: var(--text-2); }
.reach__price { margin-top: var(--s2); font-size: 14px; font-weight: 700; color: var(--gold-text); }
.reach__when {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.reach__none {
  grid-column: 1 / -1;
  padding: var(--s6) var(--s5);
  text-align: center;
  color: var(--text-2);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
}

/* --- Frise du parcours --- */
.track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0;
  counter-reset: track;
}
.track__step {
  position: relative;
  display: grid;
  gap: 6px;
  padding-top: var(--s5);
  border-top: 2px solid var(--border);
}
.track__dot {
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.track__step b { font-size: 15px; }
.track__step > span:last-child { font-size: 14px; color: var(--text-2); }

/* --- Témoignages --- */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
}
.voice {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.voice__quote { font-size: 15.5px; line-height: 1.65; }
.voice__quote::before { content: "“"; color: var(--gold-500); font-size: 34px; line-height: 0; vertical-align: -6px; margin-right: 4px; }
.voice__who { display: flex; align-items: center; gap: var(--s3); }
.voice__avatar {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--plum-600);
  color: #fff;
  font-weight: 700;
}
.voice__who b { display: block; font-size: 15px; }
.voice__who span span { font-size: 13px; color: var(--text-2); }

/* =========================================================================
   26. SOUS-MENU « NOS SERVICES »
   -------------------------------------------------------------------------
   Le libellé reste un lien vers sa propre page ; le chevron, lui, est un
   bouton distinct qui ouvre la liste. Deux raisons : au clavier, on doit
   pouvoir atteindre la page sans traverser le sous-menu ; et sur un écran
   tactile, où le survol n'existe pas, il faut une cible explicite pour
   déplier — un onglet qui exige un survol est inaccessible au doigt.
   ========================================================================= */
.nav__has-sub { position: relative; display: flex; align-items: center; }
.nav__has-sub > .nav__link { padding-right: 4px; }
.nav__caret {
  display: grid;
  place-items: center;
  width: 30px; height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--r-btn);
}
.nav__caret svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.nav__has-sub:hover .nav__caret,
.nav__has-sub.is-open .nav__caret { color: var(--accent); }
.nav__has-sub.is-open .nav__caret svg { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: 100%; left: 0;
  z-index: 40;
  min-width: 244px;
  margin-top: 8px;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
  /* Fermé, le panneau ne doit être ni cliquable ni atteignable au clavier. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Fermeture retardée : en partant vers le panneau, on quitte forcément
     l'onglet pendant un instant. Sans ce délai, le menu se referme sous le
     curseur avant qu'on l'ait atteint — le défaut le plus courant des menus
     déroulants, et le plus agaçant. */
  transition: opacity var(--t-fast) .22s, transform var(--t-fast) .22s,
              visibility 0s linear calc(var(--t-fast) + .22s);
}
/* Passerelle invisible sous l'onglet : elle couvre les 8 px de vide entre le
   libellé et le panneau, pour que le trajet de la souris ne rencontre jamais
   de zone morte. */
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
}
/* « focus-within » porte sur le panneau, pas sur toute la rubrique : sinon le
   chevron, qui garde le focus après une fermeture au clavier, rouvrirait
   aussitôt ce qu'on vient de fermer avec Échap. */
.nav__has-sub:hover .nav__sub,
.nav__sub:hover,
.nav__sub:focus-within,
.nav__has-sub.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* À l'ouverture, aucun délai : le menu doit répondre à l'instant. */
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
}
.nav__sub a {
  display: block;
  padding: 11px 12px;
  border-radius: var(--r-btn);
  font-size: 14.5px;
  color: var(--text);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__sub a:hover { background: var(--surface-2); color: var(--accent); }
.nav__sub a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* Menu mobile : pas de survol, donc pas de panneau — les sous-entrées sont
   listées en retrait sous leur rubrique. */
.drawer__link--sub {
  padding-left: var(--s6);
  font-size: 17px;
  color: var(--text-2);
}
.drawer__link--sub::before {
  content: "";
  width: 14px; height: 1px;
  margin-right: 10px;
  background: var(--border-strong);
}

/* =========================================================================
   27. NOS SERVICES
   -------------------------------------------------------------------------
   Sept services décrits d'affilée risquent la litanie. Trois choses cassent la
   monotonie sans coûter une photo par service : l'alternance gauche/droite, le
   fond alterné d'une section à l'autre, et un grand chiffre en filigrane qui
   sert de repère de progression — on sait toujours où l'on en est.
   ========================================================================= */
.svc-jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2);
}
.svc-jump__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.svc-jump__item:hover { border-color: var(--accent); transform: translateY(-2px); }
.svc-jump__ico { display: grid; place-items: center; color: var(--accent); flex: none; }
.svc-jump__ico svg { width: 20px; height: 20px; }

.svc-claim {
  margin-top: var(--s7);
  text-align: center;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.svc-claim b { color: var(--text); font-weight: 800; }

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.svc--flip .svc__text { order: 2; }
.svc--flip .svc__mark { order: 1; }
.svc__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.svc__badge svg { width: 16px; height: 16px; }
.svc__lead { margin: var(--s4) 0 var(--s4); }
.svc__text p { color: var(--text-2); max-width: 62ch; }
.svc__more { margin-top: var(--s3); }

/* Le chiffre et le pictogramme ne sont que du repère visuel : ils sont
   masqués aux lecteurs d'écran et disparaissent sur petit écran, où ils
   voleraient la place au texte. */
.svc__mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
}
.svc__num {
  font-size: clamp(90px, 13vw, 190px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--surface-2);
}
.svc__glyph {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: var(--r-card);
  background: var(--plum-600);
  color: #fff;
  box-shadow: var(--sh-2);
}
.svc__glyph svg { width: 38px; height: 38px; }

@media (max-width: 820px) {
  .svc { grid-template-columns: 1fr; }
  .svc__mark { display: none; }
  .svc--flip .svc__text { order: 0; }
}

/* --- Les trois engagements --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}
.pillar {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pillar__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-btn);
  background: var(--surface-2);
  color: var(--accent);
}
.pillar__ico svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 18px; }
.pillar p { color: var(--text-2); font-size: 15px; }

/* =========================================================================
   28. À PROPOS — CHIFFRES, CHAÎNE DU VOYAGE, MOT DE LA FONDATRICE
   ========================================================================= */
.keyfig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
}
.keyfig__item {
  padding: var(--s5);
  text-align: center;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.keyfig__num {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.keyfig__num sup { font-size: .5em; vertical-align: super; }
.keyfig__lab { margin-top: var(--s2); font-size: 14px; color: var(--text-2); }

/* La chaîne du voyage : une liste ordonnée, reliée par un filet vertical.
   Le trait dit ce que sept cartes séparées ne diraient pas — que ces métiers
   se suivent et se tiennent. */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chain__item {
  position: relative;
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4) 0;
}
.chain__item + .chain__item { border-top: 1px solid var(--border); }
.chain__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-btn);
  background: var(--surface-2);
  color: var(--accent);
}
.chain__ico svg { width: 20px; height: 20px; }
.chain__item b { display: block; font-size: 16px; }
.chain__item > span:last-child > span { font-size: 14px; color: var(--text-2); }

/* Mot de la fondatrice */
.founder {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.founder__quote {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.4;
  letter-spacing: -.02em;
  font-weight: 700;
}
.founder__quote::before,
.founder__quote::after { content: "“"; color: var(--gold-500); }
.founder__quote::after { content: "”"; }
.founder__text { margin-top: var(--s4); color: var(--text-2); max-width: 62ch; margin-inline: auto; }
.founder__who {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  text-align: left;
}
.founder__avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--plum-600);
  color: #fff;
  font-weight: 700;
}
.founder__who b { display: block; font-size: 15.5px; }
.founder__who span span { font-size: 13.5px; color: var(--text-2); }

/* =========================================================================
   29. TÉMOIGNAGES — « CE QU'ILS RACONTENT »
   -------------------------------------------------------------------------
   Structure reprise partout où le site donne la parole aux clients.

   Le parti pris central : **le rail dépasse du conteneur à droite**. La carte
   coupée au bord de l'écran dit qu'il y en a d'autres, ce qu'aucune flèche ne
   dit aussi bien. Techniquement, la section porte overflow-x: clip pour que ce
   débordement volontaire ne crée jamais de barre de défilement horizontale sur
   la page — c'est la nuance entre « ça déborde » et « c'est cassé ».
   ========================================================================= */
.stories {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--surface-2);
}

/* Variante posée sur une photo floutée et figée. Le bloc porte aussi la classe
   `section--fixed`, qui apporte le cadrage, le voile violet et le traitement
   des cartes opaques ; il ne reste ici qu'à annuler l'aplat gris — déclaré
   plus bas dans la feuille, donc plus fort — et à éclaircir le titre. */
.stories--fixed { background: none; background-color: var(--plum-800); }
.stories--fixed .stories__lines { opacity: .16; filter: invert(1); }
.stories--fixed .stories__title { color: #fff; }
.stories--fixed .stories__note { color: rgba(255, 255, 255, .82); }
.stories--fixed .stories__all { color: var(--gold-500); }
.stories--fixed .stories__dots button { background: rgba(255, 255, 255, .38); }
.stories--fixed .stories__dots button[aria-selected="true"] { background: var(--gold-500); }

/* Fond de courbes de niveau, en SVG inline : quelques kilo-octets, aucun
   fichier à charger, et l'aplat gris cesse d'être plat. */
.stories__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-repeat: repeat;
  background-size: 720px 420px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.055' stroke-width='1.2'%3E%3Cpath d='M-40 120C110 40 260 210 420 130s220-70 360 10'/%3E%3Cpath d='M-40 160C120 80 250 250 420 170s230-60 360 20'/%3E%3Cpath d='M-40 205C130 125 245 290 420 212s235-50 360 30'/%3E%3Cpath d='M-40 255C140 180 240 330 420 258s240-40 360 40'/%3E%3Cpath d='M-40 310C150 240 235 372 420 306s245-28 360 50'/%3E%3Cpath d='M-40 372C160 305 230 415 420 356s250-16 360 60'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"] .stories__lines { filter: invert(1); opacity: .18; }

.stories__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
}

/* Le portrait déborde vers le bas et vers la gauche : il sort du cadre, comme
   la personne sortirait de la page. La forme organique évite le rectangle
   photo, qui ferait « encart publicitaire ». */
.stories__portrait {
  position: relative;
  align-self: end;
  margin-bottom: calc(clamp(56px, 8vw, 104px) * -1);
  margin-left: clamp(-40px, -3vw, 0px);
}
.stories__portrait img, .stories__portrait picture {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 46% 54% 40% 60% / 34% 30% 70% 66%;
}

/* Sans « min-width: 0 », une colonne de grille se dimensionne sur son contenu
   le plus large : le rail, qui contient six cartes, poussait tout le bloc à
   1 000 px de large sur un écran de 390 px. Le titre et la phrase se
   retrouvaient coupés hors de l'écran. */
.stories__main { min-width: 0; }

.stories__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.stories__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--gold-text);
}
.stories__kicker svg { width: 18px; height: 18px; }
.stories__title {
  margin-top: var(--s2);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.stories__note { margin-top: var(--s3); color: var(--text-2); max-width: 56ch; }
.stories__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Un lien de 24 px de haut se rate au doigt : on l'épaissit sans le
     déplacer, grâce à une marge négative qui compense le rembourrage. */
  padding: 6px 0;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.stories__all svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.stories__all:hover svg { transform: translateX(3px); }

/* Le rail : défilement au doigt avec accroche, barre masquée, et une marge
   droite négative pour laisser la carte suivante mordre hors de l'écran. */
.stories__rail {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 26px 0 var(--s2);
  margin-right: calc(clamp(20px, 6vw, 140px) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stories__rail::-webkit-scrollbar { display: none; }
.stories__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-card); }

.story {
  position: relative;
  flex: 0 0 min(400px, 78%);
  scroll-snap-align: start;
  display: grid;
  gap: var(--s5);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
/* Le guillemet chevauche le coin haut-gauche de la carte. */
.story__mark {
  position: absolute;
  top: -22px; left: var(--s5);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 34px;
  font-weight: 800;
  line-height: 0;
  padding-top: 16px;
}
.story__quote { color: var(--text-2); font-size: 15.5px; line-height: 1.7; }
.story__who { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.story__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.story__score i { display: grid; place-items: center; color: var(--gold-500); }
.story__score svg { width: 15px; height: 15px; }
.story__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--plum-600);
  color: #fff;
  font-weight: 700;
}
.story__id b { display: block; font-size: 15px; }
.story__id em { font-style: italic; font-size: 13.5px; color: var(--gold-text); }

/* Repères en barres : la barre active s'allonge au lieu de changer de couleur
   seulement — le repère reste lisible pour qui distingue mal les teintes. */
.stories__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s5); }
.stories__dots button {
  position: relative;
  width: 30px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong, #C9C9CE);
  cursor: pointer;
  transition: width var(--t), background var(--t);
}
/* La barre reste fine, mais la zone de clic fait 28 px de haut. */
.stories__dots button::after { content: ""; position: absolute; inset: -11px -4px; }
.stories__dots button[aria-selected="true"] { width: 54px; background: var(--accent); }

@media (max-width: 1080px) {
  /* Sous 1080 px, le portrait mangerait la moitié de la largeur utile : il
     passe en bandeau au-dessus, en format paysage. */
  .stories__grid { grid-template-columns: 1fr; }
  .stories__portrait {
    margin: 0 auto var(--s5);
    max-width: 260px;
    align-self: center;
  }
  .stories__portrait img, .stories__portrait picture { aspect-ratio: 1 / 1; }
  .stories__rail { margin-right: calc(var(--s5) * -1); }
  .story { flex-basis: min(380px, 86%); }
}
@media (prefers-reduced-motion: reduce) { .stories__rail { scroll-behavior: auto; } }

/* Sans portrait — le cas tant que l'agence n'en a pas fourni — le bloc occupe
   toute la largeur plutôt que de laisser une colonne vide. */
.stories__grid--nophoto { grid-template-columns: 1fr; }

/* Une fois révélé, le numéro est un lien d'appel : sur téléphone, un numéro
   qu'on ne peut pas composer d'un geste ne sert à rien. */
.member__tel { font-weight: 600; color: var(--accent); }
.member__tel:hover { text-decoration: underline; }

/* =========================================================================
   30. BANDEAUX SOMBRES — LE RYTHME DES FONDS
   -------------------------------------------------------------------------
   Une page qui alterne seulement blanc et gris finit par se lire comme une
   liste. Ce qui crée la dynamique, c'est la respiration : une bande pleine
   photo, sombre, tous les deux ou trois blocs. L'œil marque une pause, et la
   section suivante repart comme un nouveau chapitre.

   Le voile est double : un aplat sombre pour garantir le contraste du texte,
   et un dégradé qui laisse la photo respirer sur un bord. Sans lui, le texte
   blanc deviendrait illisible dès qu'on change d'image — et l'agence change
   les images depuis le dashboard.
   ========================================================================= */
.section--dark {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #171115;
}
.section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.section__bg img, .section__bg picture {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 10, 18, .94) 0%, rgba(20, 10, 18, .86) 45%, rgba(20, 10, 18, .55) 100%),
    linear-gradient(180deg, rgba(20, 10, 18, .35), rgba(20, 10, 18, .55));
}
.section--dark h2,
.section--dark h3,
.section--dark .svc__lead { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, .82); }
.section--dark .svc__badge {
  background: rgba(255, 255, 255, .14);
  color: var(--gold-500);
}
.section--dark .btn:not(.btn--light) { --btn-bg: var(--gold-500); --btn-fg: #2B0718; }
.section--dark .btn:not(.btn--light):hover { background: var(--gold-600); }

/* Sur un bandeau sombre, le texte occupe une colonne et la photo se voit
   dans la moitié droite : pas de second visuel à côté, ce serait redondant. */
.svc--dark { grid-template-columns: minmax(0, 1fr); }
.svc--dark .svc__text { max-width: 62ch; }

/* Visuel du service, quand le bloc reste sur fond clair. */
.svc__photo { position: relative; }
.svc__photo img, .svc__photo picture {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-card);
}
.svc__num--tag {
  position: absolute;
  left: -14px; bottom: -18px;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  color: var(--surface);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

/* Sur un bandeau sombre, les cartes et intertitres reprennent le contraste
   inverse : verre dépoli plutôt que blanc plein, pour laisser voir la photo. */
.section--dark .s-head__kicker { color: var(--gold-500); }
.section--dark .s-head__text { color: rgba(255, 255, 255, .78); }
.section--dark .feature,
.section--dark .pillar {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}
.section--dark .feature h3,
.section--dark .pillar h3 { color: #fff; }
.section--dark .feature p,
.section--dark .pillar p { color: rgba(255, 255, 255, .78); }
.section--dark .feature__icon,
.section--dark .pillar__ico {
  background: rgba(255, 255, 255, .14);
  color: var(--gold-500);
}

/* =========================================================================
   31. PAGE CONTACT — PANNEAU, BUREAUX, BANDEAU DE RECONNAISSANCE
   -------------------------------------------------------------------------
   La page suit la structure demandée par le client : un bandeau de titre
   centré, un grand panneau clair qui tient la colonne de contact et le
   formulaire encarté, une carte plein cadre flanquée des fiches de bureau,
   puis un bandeau de reconnaissance juste avant le pied de page.
   ========================================================================= */

/* --- Bandeau de titre centré --------------------------------------------- */
.hero--center { text-align: center; }
.hero--center .crumbs { justify-content: center; }
.hero--center .hero__text { margin-inline: auto; max-width: 62ch; }

/* --- Le panneau « Nous joindre » -----------------------------------------
   Deux colonnes dans une même boîte teintée. Le formulaire est une carte
   blanche posée dessus : c'est le décalage des deux surfaces qui donne le
   relief, pas une ombre portée. */
.reachout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-card);
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.reachout__aside { display: grid; gap: var(--s4); align-content: start; }
.reachout__intro { color: var(--text-2); font-size: 15px; }
.reachout__intro a { color: var(--accent); text-decoration: underline; }

/* Une ligne de contact : libellé et valeur à gauche, pastille à droite. */
.rchips { display: grid; gap: var(--s2); }
.rchip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.rchip:hover { border-color: var(--accent); transform: translateX(2px); }
.rchip__txt { display: grid; gap: 2px; min-width: 0; }
.rchip__txt b { font-size: 13px; font-weight: 600; color: var(--text-2); }
.rchip__txt span {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.rchip__ico {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.rchip__ico svg { width: 18px; height: 18px; }
.rchip:hover .rchip__ico { background: var(--accent-hover); }

.reachout__social { margin-top: var(--s2); }
.reachout__social b { display: block; font-size: 13px; color: var(--text-2); margin-bottom: var(--s2); }
/* Les mêmes pastilles que le pied de page, mais sur fond clair. */
.socials--light a { border-color: var(--border); color: var(--text-2); }
.socials--light a:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }

.reachout__form {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.reachout__form h3 { font-size: 20px; margin-bottom: var(--s4); }

/* --- Carte et fiches de bureau ------------------------------------------- */
.offices {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.offices .map-frame { aspect-ratio: 4 / 3; }
.offices__list { display: grid; gap: var(--s4); }
.office {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.office__media {
  display: block;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-card);
  overflow: hidden;
}
.office__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.office__name { font-size: 17px; font-weight: 700; }
.office__name em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-2); }
.office__lines { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.office__lines a { color: var(--accent); display: inline-block; padding-block: 4px; }
.office__lines a:hover { text-decoration: underline; }

/* --- Bandeau de reconnaissance -------------------------------------------
   Texte à gauche, carte blanche à droite : ce sont des chiffres tenus par
   l'agence, pas des distinctions décernées par un tiers — le libellé le dit. */
.reco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
}
.reco__txt { max-width: 46ch; }
.reco__card {
  display: flex;
  align-items: stretch;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.reco__item { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 150px; }
.reco__item + .reco__item { border-left: 1px solid var(--border); padding-left: var(--s5); }
.reco__ico { color: var(--gold-text); }
.reco__ico svg { width: 26px; height: 26px; }
.reco__num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.reco__lab { font-size: 13px; color: var(--text-2); }

@media (max-width: 900px) {
  .reachout { grid-template-columns: 1fr; }
  .offices { grid-template-columns: 1fr; }
  .reco { justify-content: flex-start; }
  .reco__card { width: 100%; }
}
@media (max-width: 520px) {
  .reco__card { flex-direction: column; gap: var(--s4); }
  .reco__item + .reco__item {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--s4);
  }
}

/* =========================================================================
   32. PAGE D'ATTERRISSAGE « BILLET + VISA »
   -------------------------------------------------------------------------
   Une page d'atterrissage ne poursuit qu'un but : le formulaire. Sa mise en
   page est donc plus resserrée que celle du site — pas de rail, pas de
   catalogue, rien qui invite à partir ailleurs.
   ========================================================================= */
.visa__hl { color: var(--gold-500); }

/* Fond « carnet de voyage » : quelques instruments de voyage au trait, comme
   le relief de courbes de niveau plus haut dans la feuille — même technique
   (SVG inline en fond, inversé en thème sombre), motif différent. */
.section--travel { position: relative; isolation: isolate; }
.section--travel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background-repeat: repeat;
  background-size: 560px 560px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%236B0F3A' stroke-opacity='.1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(40,50) rotate(18) scale(1.7)'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.9-2 2-2.2-.4a.5.5 0 0 0-.5.8L5 16l2.7 2.2a.5.5 0 0 0 .8-.5l-.4-2.2 2-2 3.9 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/g%3E%3Cg transform='translate(300,30) scale(1.9)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5Z'/%3E%3C/g%3E%3Cg transform='translate(430,130) rotate(-8) scale(1.6)'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/g%3E%3Cg transform='translate(50,250) rotate(10) scale(1.6)'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z'/%3E%3Cpath d='M14 6v12'/%3E%3C/g%3E%3Cg transform='translate(320,290) scale(1.8)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/g%3E%3Cg transform='translate(170,410) rotate(-6) scale(1.6)'%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Crect x='4' y='7' width='16' height='12' rx='2'/%3E%3Cpath d='M4 12h16'/%3E%3C/g%3E%3Cpath d='M20 480 C120 420,220 520,340 460 S520 420,540 380' stroke-dasharray='2 8'/%3E%3Cg transform='translate(470,60) rotate(-30) scale(1.4)'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.9-2 2-2.2-.4a.5.5 0 0 0-.5.8L5 16l2.7 2.2a.5.5 0 0 0 .8-.5l-.4-2.2 2-2 3.9 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/g%3E%3Cg transform='translate(430,410) scale(1.6)'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='2 3'/%3E%3Cpath d='m12 8 1.2 2.6L16 11l-2 2 .5 2.8L12 14.5 9.5 15.8 10 13l-2-2 2.8-.4Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"] .section--travel::before { filter: invert(1); opacity: .18; }

/* Les quatre destinations, en accordéon : le premier volet est ouvert au
   repos, chaque volet s'élargit au survol ou au focus clavier — géré en
   CSS pur via flex-grow, sans JavaScript. */
.vacc {
  display: flex;
  gap: 3px;
  height: clamp(300px, 40vw, 440px);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.vacc__item {
  position: relative;
  flex: 1 1 0;
  min-width: 60px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: var(--surface-2);
  transition: flex-grow .55s cubic-bezier(.22, .8, .2, 1);
}
/* L'état « ouvert » est posé par JS (voir initVacc() dans main.js) sur le
   dernier volet survolé ou focus — et y reste tant qu'un autre n'a pas pris
   le relais, plutôt que de revenir au premier au départ de la souris. Seule
   la photo se floute pour détacher le volet ouvert : le texte (code, nom,
   badge), lui, reste net à tout moment — le flou est posé sur l'image, pas
   sur la carte entière. */
.vacc__item.is-active { flex-grow: 3.2; }
.vacc__item:focus-visible { box-shadow: inset 0 0 0 3px var(--gold-500); }

.vacc__img, .vacc__item picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vacc__img {
  object-fit: cover;
  transition: filter .45s ease;
}
.vacc__item:not(.is-active) .vacc__img { filter: blur(2.5px) saturate(.75); }
.vacc__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 8, 0) 42%, rgba(10, 4, 8, .8) 100%);
}

.vacc__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--plum-800);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease .08s, transform .3s ease .08s;
}
.vacc__badge svg { width: 14px; height: 14px; }
.vacc__item.is-active .vacc__badge { opacity: 1; transform: none; }

.vacc__foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
}
.vacc__code {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: opacity .2s ease;
}
.vacc__full {
  display: grid;
  gap: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease .08s;
}
.vacc__full b { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; }
.vacc__full small { font-size: 13px; color: rgba(255, 255, 255, .82); }

.vacc__item.is-active .vacc__code { opacity: 0; position: absolute; }
.vacc__item.is-active .vacc__full { opacity: 1; max-height: none; }

@media (max-width: 640px) {
  .vacc { flex-direction: column; height: auto; }
  .vacc__item { flex: 0 0 auto !important; height: 76px; }
  .vacc__item.is-active { height: 240px; }
  .vacc__item:not(.is-active) .vacc__img { filter: none; }
}

/* Variante verticale : la galerie, calée sur la hauteur du formulaire
   voisin plutôt que sur une hauteur fixe. Même logique flex-grow que la
   version horizontale — seul l'axe change. */
.visa__gallery { height: 100%; }
.vacc--vertical {
  flex-direction: column;
  height: 100%;
  min-height: 460px;
}
.vacc--vertical .vacc__item { min-width: 0; min-height: 54px; }
@media (max-width: 900px) {
  .vacc--vertical { min-height: 320px; }
}

/* Le mode d'emploi en tête, pleine largeur sur le blanc de la section ;
   en dessous, un panneau grisé regroupe galerie + formulaire — c'est ce
   panneau, et lui seul, qui porte le fond gris. */
.visa {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "aside" "panel";
  gap: clamp(20px, 3vw, 40px);
}
.visa__aside { align-self: start; grid-area: aside; }
.visa__panel {
  grid-area: panel;
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, 1fr);
  grid-template-areas: "gallery form";
  gap: clamp(20px, 3vw, 40px);
  background: var(--bg-3);
  border-radius: var(--r-card);
  padding: clamp(16px, 2.4vw, 28px);
}
.visa__gallery { grid-area: gallery; }
.visa__form { grid-area: form; }
@media (max-width: 900px) {
  .visa__panel { grid-template-columns: 1fr; grid-template-areas: "gallery" "form"; }
}
/* Frise « parcours » de la page visa : trois cartes reliées par une ligne
   de route en tirets — un clin d'œil au sujet (un dossier de voyage) plutôt
   qu'une simple puce numérotée. Composant dédié : .track reste inchangé
   pour ne pas affecter les autres pages qui l'utilisent (épargne...). */
.vsteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
}
.vsteps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 27px;
  right: 27px;
  border-top: 2px dashed var(--border-strong);
  opacity: .5;
}
@media (max-width: 640px) {
  .vsteps { grid-template-columns: 1fr; gap: var(--s5); }
  .vsteps::before { display: none; }
}
.vsteps__item {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: start;
}
/* Lueur discrète derrière le badge, révélée au survol — pas un cadre net,
   juste de quoi donner du répondant sans transformer la frise en boutons. */
.vsteps__item::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-500) 0%, transparent 72%);
  opacity: 0;
  filter: blur(1px);
  transition: opacity .4s ease;
  z-index: -1;
  pointer-events: none;
}
.vsteps__item:hover::before { opacity: .3; }
.vsteps__badge {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--plum-600), var(--plum-500));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(107, 15, 58, .55);
  transition: transform .4s cubic-bezier(.22, .8, .2, 1), box-shadow .4s ease;
}
.vsteps__item:hover .vsteps__badge {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 16px 28px -10px rgba(107, 15, 58, .6), 0 0 0 4px var(--gold-500);
}
.vsteps__badge svg {
  width: 22px;
  height: 22px;
  transition: transform .4s cubic-bezier(.22, .8, .2, 1);
}
.vsteps__item:hover .vsteps__badge svg { transform: scale(1.12); }
.vsteps__badge::after {
  content: attr(data-n);
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--plum-800);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform .4s cubic-bezier(.22, .8, .2, 1);
}
.vsteps__item:hover .vsteps__badge::after { transform: scale(1.18); }
.vsteps__item b { font-size: 16px; transition: color .3s ease; }
.vsteps__item:hover b { color: var(--accent); }
.vsteps__item > span:last-child { font-size: 14px; color: var(--text-2); line-height: 1.55; }
/* Le panneau grisé (.visa__panel) fait déjà office de carte : le formulaire
   n'a plus besoin de son propre fond blanc, seuls ses champs (déjà blancs)
   se détachent du gris. */
.visa__form h3 { font-size: 20px; margin-bottom: var(--s4); }

/* Le champ « précisez votre ville » n'a de sens qu'après avoir choisi
   « Autre ». Sans JavaScript il reste affiché : mieux vaut un champ de trop
   qu'un formulaire dans lequel on ne peut pas écrire sa ville. */
.visa__form [data-visa-other].is-off { display: none; }

/* Pièces à fournir : un groupe de cases par profession, un seul affiché à
   la fois (voir initVisaDocs() dans main.js). Sans JavaScript, les sept
   groupes restent visibles — même logique que le champ ville ci-dessus. */
[data-visa-docs].is-off { display: none; }
.vdocs { display: grid; gap: var(--s5); margin-top: var(--s2); }
.vdocs__group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 20px;
  border: 0;
  padding: 0;
  margin: 0;
}
.vdocs__group.is-off { display: none; }
.vdocs__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
  cursor: pointer;
}
.vdocs__item input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
}
.vdocs__item:hover span { color: var(--text); }

.visa__terms {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-card);
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.visa__terms ul { margin: var(--s4) 0 0; padding-left: 1.1em; display: grid; gap: var(--s3); }
.visa__terms li { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.visa__terms li b { color: var(--text); }
.visa__contact { margin-top: var(--s5); font-size: 15px; color: var(--text-2); }
.visa__contact a { color: var(--accent); font-weight: 600; }
.visa__contact a:hover { text-decoration: underline; }