/* ==========================================================================
   La clé du Sens — feuille de style principale
   Palette d'origine conservée : noir #000 / #0d141a / #1C1C3A, or #FEC326,
   blanc #ffffff, gris #b8c0cc. Aucune couleur nouvelle.
   ========================================================================== */

@font-face {
  font-family: 'OldNewspaperTypes';
  src: url('../assets/fonts/OldNewspaperTypes-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- couleurs (identiques au site actuel) ---- */
  --black:      #000000;
  --ink:        #0d141a;
  --navy:       #1C1C3A;
  --gold:       #FEC326;
  --gold-rgb:   254, 195, 38;
  --white:      #ffffff;
  --steel:      #b8c0cc;

  --gold-04: rgba(254, 195, 38, .04);
  --gold-08: rgba(254, 195, 38, .08);
  --gold-14: rgba(254, 195, 38, .14);
  --gold-24: rgba(254, 195, 38, .24);
  --gold-45: rgba(254, 195, 38, .45);

  /* ---- typographie ---- */
  --f-display: 'OldNewspaperTypes', 'Bebas Neue', 'Montserrat', sans-serif;
  --f-script:  'Lobster', 'Montserrat', cursive;
  --f-body:    'Montserrat', 'Oxygen', system-ui, -apple-system, sans-serif;
  --f-btn:     'Bebas Neue', 'Montserrat', sans-serif;

  /* ---- rythme ---- */
  --wrap: 1224px;
  --gut: clamp(20px, 5vw, 56px);
  --sect: clamp(72px, 11vw, 152px);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 100px;

  /* ---- courbes ---- */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, .05, .36, 1);
  --e-spring: cubic-bezier(.34, 1.4, .5, 1);

  --nav-h: 88px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  /* `clip` plutôt que `hidden` : pas de conteneur de défilement créé, donc
     ni `position: fixed` ni `scroll-behavior` ne sont perturbés. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.14; }

::selection { background: var(--gold); color: var(--black); }

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

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--f-btn);
  letter-spacing: .08em;
  border-radius: var(--r-pill);
  transform: translateY(-160%);
  transition: transform .35s var(--e-out);
}
.skip-link:focus-visible { transform: none; }

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

/* ==========================================================================
   Mise en page
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Les éléments de grille ont `min-width: auto` par défaut : ils refusent de
   descendre sous leur largeur min-content, ce qui fait déborder les colonnes
   contenant un `textarea` ou un mot long. */
.about > *,
.pay > *,
.grid-2 > *,
.grid-3 > *,
.cf-panel > *,
.ring-info > *,
.contact-panel > *,
.foot__grid > * { min-width: 0; }

/* `overflow: clip` retient les halos décoratifs sans créer de conteneur de
   défilement ni rogner les ombres portées au survol. */
.section { position: relative; padding-block: var(--sect); overflow: clip; }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

/* liseré de séparation entre les sections */
.section + .section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1224px, calc(100% - 2 * var(--gut)));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-24) 18%, var(--gold-45) 50%, var(--gold-24) 82%, transparent);
  opacity: .55;
}

/* Halo doré discret, pour la profondeur.
   Dégradé radial pur : pas de `filter: blur()` ni de `mix-blend-mode`, qui
   forceraient une couche composée plein écran à chaque frame. */
.glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(254, 195, 38, .12), rgba(254, 195, 38, .05) 45%, transparent 72%);
}
.glow--a { width: 58vw; height: 58vw; max-width: 900px; max-height: 900px; top: -18%; right: -16%; }
.glow--b { width: 52vw; height: 52vw; max-width: 820px; max-height: 820px; bottom: -22%; left: -18%; }

/* ==========================================================================
   Typographie utilitaire
   ========================================================================== */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-script);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
}
.kicker::before {
  content: '';
  width: clamp(26px, 5vw, 54px);
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transition: transform 1s var(--e-out) .15s;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .005em;
}

.h-xl { font-size: clamp(40px, 8.4vw, 96px); }
.h-lg { font-size: clamp(32px, 5.6vw, 64px); }
.h-md { font-size: clamp(26px, 3.6vw, 44px); }
.h-sm { font-size: clamp(21px, 2.4vw, 30px); }

.title {
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.14;
}

.lead {
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .82);
}

.muted { color: rgba(255, 255, 255, .7); }
.gold  { color: var(--gold); }

.balance { text-wrap: balance; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: var(--r-pill);
  font-family: var(--f-btn);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .45s var(--e-spring), box-shadow .45s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), background-color .3s var(--e-out);
}
.btn > span { position: relative; z-index: 2; }

/* le halo suit le curseur (variables posées par main.js) */
.btn::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: var(--my, 50%); left: var(--mx, 50%);
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.35);
  transition: opacity .4s var(--e-out), transform .55s var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; transform: scale(1); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.985); }

.btn .ico {
  position: relative;
  z-index: 2;
  width: 1em; height: 1em;
  transition: transform .45s var(--e-out);
}
.btn:hover .ico { transform: translateX(5px); }

/* or plein */
.btn--gold {
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 10px 30px -14px rgba(254, 195, 38, .8);
}
.btn--gold::before { background: radial-gradient(circle, var(--white), transparent 70%); }
.btn--gold:hover { box-shadow: 0 20px 46px -16px rgba(254, 195, 38, .95); }

/* noir cerclé d'or */
.btn--dark {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--gold-45);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.btn--dark::before { background: radial-gradient(circle, rgba(254, 195, 38, .35), transparent 70%); }
.btn--dark:hover { color: var(--gold); border-color: var(--gold); }

/* contour */
.btn--ghost {
  border: 1px solid var(--gold-45);
  color: var(--gold);
}
.btn--ghost::before { background: radial-gradient(circle, var(--gold-24), transparent 70%); }
.btn--ghost:hover { border-color: var(--gold); }

.btn--wide { width: 100%; }
.btn--sm { padding: 13px 26px; font-size: 15px; }

/* lien texte animé */
.link-u {
  position: relative;
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e-out);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, rgba(254, 195, 38, .35), var(--gold));
  will-change: transform;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--e-out), border-color .5s var(--e-out), backdrop-filter .5s var(--e-out), height .5s var(--e-out), transform .55s var(--e-out);
}
.nav.is-stuck {
  height: 72px;
  background: rgba(0, 0, 0, .78);
  border-bottom-color: var(--gold-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav.is-hidden { transform: translateY(-102%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.nav__brand {
  display: block;
  flex: 0 0 auto;
  transition: transform .5s var(--e-spring);
}
.nav__brand:hover { transform: translateY(-2px) scale(1.03); }
.nav__logo {
  width: auto;
  height: 56px;
  transition: height .5s var(--e-out);
}
.nav.is-stuck .nav__logo { height: 46px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.1vw, 30px);
}
.nav__links a {
  position: relative;
  display: block;
  padding: 8px 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .015em;
  transition: color .3s var(--e-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--white); }
.nav__links a[aria-current="page"]::after { background: var(--white); }

.nav__side { display: flex; align-items: center; gap: 12px; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid transparent;
  transition: border-color .35s var(--e-out), background-color .35s var(--e-out), transform .45s var(--e-spring);
}
.icon-btn:hover { border-color: var(--gold-45); background: var(--gold-08); transform: translateY(-2px); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-count {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transform: scale(0);
  transition: transform .4s var(--e-spring);
}
.cart-count.is-on { transform: scale(1); }

/* burger */
.burger { display: none; }
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform .45s var(--e-out), opacity .3s var(--e-out);
}
.burger span + span { margin-top: 5px; }
.burger.is-on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger.is-on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* tiroir mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: grid;
  place-content: center;
  padding: var(--nav-h) var(--gut) 40px;
  background: rgba(0, 0, 0, .965);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--e-out), visibility .45s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__list { display: grid; gap: 6px; text-align: center; }
.drawer__list a {
  display: block;
  padding: 12px 4px;
  font-family: var(--f-display);
  font-size: clamp(30px, 8vw, 46px);
  color: var(--gold);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s var(--e-out), transform .6s var(--e-out), color .3s;
}
.drawer.is-open .drawer__list a { opacity: 1; transform: none; }
.drawer__list a:hover { color: var(--white); }
.drawer__foot {
  margin-top: 36px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--e-out) .42s, transform .6s var(--e-out) .42s;
}
.drawer.is-open .drawer__foot { opacity: 1; transform: none; }
.drawer__foot a { display: inline-block; padding: 6px 0; color: var(--gold); }

/* ==========================================================================
   Voile de transition entre les pages
   ========================================================================== */

.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black);
  pointer-events: none;
  opacity: 1;
  transition: opacity .55s var(--e-out);
}
.veil.is-clear { opacity: 0; }
.veil.is-out { opacity: 1; }
.no-js .veil { display: none; }

/* filet de sécurité : si le script plante avant d'avoir levé le voile, la
   page ne reste pas noire. Dès que le script prend la main, l'animation est
   retirée et ce sont ses classes qui décident. */
.veil { animation: veilSafety .6s var(--e-out) 3.5s forwards; }
.veil.is-clear,
.veil.is-out { animation: none; }
@keyframes veilSafety { to { opacity: 0; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 880px);
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(56px, 9vw, 108px);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: -10% 0 -10%;
  z-index: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Le titre reprend le lettrage noir d'origine : le voile éclaircit la zone
     du texte (halo chaud, sans bord dur car il couvre tout le hero) et
     assombrit le bas pour la jonction avec la section suivante. */
  background:
    radial-gradient(70% 52% at 26% 54%, rgba(254, 195, 38, .26), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 26%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.94) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { position: relative; max-width: 15ch; }
.hero__title .l1,
.hero__title .l2,
.hero__title .l3 { display: block; }
/* Pas de text-shadow ici : les mots sont découpés dans des boîtes
   `overflow:hidden` pour l'animation, une ombre floue y serait rognée.
   Le contraste vient du voile radial du hero. */
.hero__title .l1 { color: var(--black); }
.hero__title .l2 { color: var(--gold); font-size: 1.34em; }
.hero__title .l3 { color: var(--black); }

.hero__cta { margin-top: clamp(26px, 4vw, 44px); }

.hero__scroll {
  position: absolute;
  z-index: 2;
  right: var(--gut);
  bottom: clamp(30px, 6vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-btn);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--gold);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  overflow: hidden;
}
.hero__scroll i::after {
  content: '';
  display: block;
  width: 1px; height: 16px;
  background: var(--gold);
  animation: railDrop 2.1s var(--e-io) infinite;
}
@keyframes railDrop {
  0%   { transform: translateY(-18px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}

/* hero secondaire (pages internes) */
.phero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 10vw, 116px));
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow: hidden;
}
.phero__inner { position: relative; z-index: 1; max-width: 900px; }
.phero .lead { max-width: 62ch; margin-top: 22px; }

/* ==========================================================================
   Effets de révélation au scroll
   ========================================================================== */

.js [data-rv] {
  opacity: 0;
  transform: translate3d(0, var(--rv-y, 30px), 0) scale(var(--rv-s, 1));
  transition:
    opacity .95s var(--e-out) var(--rv-d, 0ms),
    transform 1.05s var(--e-out) var(--rv-d, 0ms),
    clip-path 1.15s var(--e-out) var(--rv-d, 0ms);
}
.js [data-rv="left"]  { --rv-y: 0px; transform: translate3d(-38px, 0, 0); }
.js [data-rv="right"] { --rv-y: 0px; transform: translate3d(38px, 0, 0); }
.js [data-rv="zoom"]  { --rv-y: 22px; --rv-s: 1.06; }
.js [data-rv="wipe"]  { --rv-y: 14px; clip-path: inset(0 0 102% 0); }
.js [data-rv].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -2% 0);
}

/* trait du kicker : dessiné à l'entrée */
.js .kicker::before { transform: scaleX(0); }
.js .kicker.is-in::before,
.js .is-in .kicker::before { transform: scaleX(1); }

/* mots du titre, révélés un à un */
.js .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js .word > span {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  transition: transform 1.05s var(--e-out) var(--wd, 0ms);
}
.js .is-in .word > span,
.js .word.is-in > span { transform: none; }

/* ==========================================================================
   Cartes
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-14);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s var(--e-out), border-color .5s var(--e-out), box-shadow .6s var(--e-out);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--gold-14), transparent 62%);
  transition: opacity .5s var(--e-out);
}
.card:hover {
  border-color: var(--gold-45);
  box-shadow: 0 34px 68px -40px rgba(254, 195, 38, .55);
}
.card:hover::after { opacity: 1; }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--e-out), filter .7s var(--e-out);
}
.card:hover .card__media img { transform: scale(1.09); filter: saturate(1.12); }
.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62));
  opacity: .85;
}

.card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 32px);
}
.card__title {
  font-size: clamp(19px, 1.75vw, 22px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--gold);
}
.card__text { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.78); }

.card__idx {
  position: absolute;
  top: 18px; right: 22px;
  z-index: 4;
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  opacity: .38;
  transition: opacity .5s var(--e-out), transform .6s var(--e-out);
}
.card:hover .card__idx { opacity: .95; transform: translateY(-3px); }
/* Carte sans image : le numéro suit directement le corps, et le titre passait
   dessous (« sans 01 surprise »). On réserve la place du numéro à droite du
   titre seulement : le paragraphe, plus bas, garde toute la largeur. */
.card__idx + .card__body .card__title { padding-right: 50px; }

/* grille tiltable */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* image parallaxée à l'intérieur d'un cadre : surdimensionnée pour ne jamais
   laisser apparaître de vide pendant le déplacement */
img[data-para] {
  height: 120% !important;
  margin-top: -10%;
  object-fit: cover;
}

/* ==========================================================================
   Sections spécifiques — Accueil
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}
.about__body { position: relative; z-index: 2; }
.about__body h2 { margin-block: 18px 22px; }
.about__claim {
  margin: 30px 0;
  padding-left: 22px;
  border-left: 2px solid var(--gold);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
}
.about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 10 / 9;
  box-shadow: 0 46px 90px -50px rgba(0, 0, 0, .95);
}
.about__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.about__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 1px var(--gold-24);
  border-radius: inherit;
  pointer-events: none;
}
.about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, transparent 45%, rgba(0,0,0,.55));
}

.sect-head { max-width: 780px; }
.sect-head h2 { margin-block: 18px 20px; }
.sect-head--center { margin-inline: auto; text-align: center; }
.sect-head--center .kicker::before { display: none; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(38px, 5vw, 64px);
}
/* Variante pour un nombre de cartes qui ne tombe pas juste (5 sur 3 colonnes) :
   la dernière ligne se centre au lieu de laisser un trou à droite. */
.grid-3--center {
  --g: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g);
}
.grid-3--center > * { flex: 0 1 calc((100% - 2 * var(--g)) / 3); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(38px, 5vw, 64px);
}

/* ==========================================================================
   Avis
   ========================================================================== */

.avis {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 62px) clamp(26px, 4.5vw, 60px);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-24);
  background: linear-gradient(155deg, rgba(254, 195, 38, .07), rgba(255,255,255,.015));
  text-align: center;
  overflow: hidden;
}
.avis::before {
  content: '\201C';
  position: absolute;
  top: -34px; left: 22px;
  font-family: var(--f-script);
  font-size: 190px;
  line-height: 1;
  color: var(--gold);
  opacity: .16;
  pointer-events: none;
}
.avis__quote {
  margin: 0;
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gold);
}
.avis__stars {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 26px;
}
.avis__stars span {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  transform: scale(.35) rotate(-25deg);
  transition: opacity .5s var(--e-out), transform .7s var(--e-spring);
}
.avis.is-in .avis__stars span { opacity: 1; transform: none; }
.avis__stars span:nth-child(1) { transition-delay: .30s; }
.avis__stars span:nth-child(2) { transition-delay: .40s; }
.avis__stars span:nth-child(3) { transition-delay: .50s; }
.avis__stars span:nth-child(4) { transition-delay: .60s; }
.avis__stars span:nth-child(5) { transition-delay: .70s; }

.avis__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.avis__who img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-45);
}
.avis__who p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.86);
}

/* ==========================================================================
   Portfolio — galerie circulaire
   Les sites clients tournent sur un anneau en 3D au fil du défilement.
   Sur ordinateur, l'anneau occupe la colonne de gauche et un panneau à droite
   présente le projet de face et la liste des projets ; sur mobile, tout
   s'empile. La taille des téléphones est calculée en JavaScript d'après la
   place réellement disponible : ils ne peuvent pas chevaucher le texte.
   ========================================================================== */

.ring-sect {
  position: relative;
  /* écran épinglé + une longueur de défilement par projet supplémentaire */
  height: calc(100vh + (var(--projects, 5) - 1) * 68vh);
  height: calc(100svh + (var(--projects, 5) - 1) * 68svh);
}

.ring-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* ---- disposition empilée (mobile, tablette en portrait) ---- */
.ring-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  height: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: 4px var(--gut) clamp(14px, 2.6vh, 28px);
}
.ring-layout > *,
.ring-captions > * { min-width: 0; }

/* le panneau s'efface : ses enfants deviennent des lignes de la grille, ce
   qui permet de placer le titre au-dessus de l'anneau */
.ring-panel    { display: contents; }
.ring-head     { order: 1; }
.ring-stage    { order: 2; }
.ring-captions { order: 3; }
.ring-picks    { order: 4; }
.ring-hint     { display: none; }

.ring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ring-head h2 { color: var(--white); }

/* ---- scène 3D ---- */
.ring-stage {
  --ch: 360px;                     /* réécrit par le script */
  --cw: calc(var(--ch) * .462);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  /* les halos (pseudo-éléments en z-index négatif) restent derrière l'anneau */
  isolation: isolate;
}
/* Lueur fixe derrière le téléphone de face. Elle vivait en `box-shadow` sur la
   carte elle-même, mais la couche 3D de la carte la rognait en un rectangle
   aux bords durs. Le téléphone de face étant toujours centré, un halo posé
   sur la scène donne le même effet, sans découpe. */
.ring-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(var(--cw) * 2.2);
  height: calc(var(--ch) * 1.2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(254, 195, 38, .17), rgba(254, 195, 38, .05) 55%, transparent 76%);
  pointer-events: none;
}
/* halo au sol, accroché au bas des téléphones quelle que soit leur taille */
.ring-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(50% + var(--ch) * .42);
  width: calc(var(--cw) * 4.4);
  height: calc(var(--ch) * .24);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(254, 195, 38, .22), rgba(254, 195, 38, .06) 55%, transparent 78%);
  pointer-events: none;
}

.ring {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  transform-style: preserve-3d;
  will-change: transform;
}
/* tant que le script n'a pas posé les cartes sur l'anneau, elles sont
   empilées au centre : on les masque pour éviter cet éclair au chargement */
.js .ring-sect:not(.ring-sect--flat) .ring { opacity: 0; transition: opacity .8s var(--e-out); }
.js .ring-sect:not(.ring-sect--flat) .ring.is-ready { opacity: 1; }

.ring-card {
  position: absolute;
  inset: 0;
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}

.phone {
  width: 100%;
  height: 100%;
  padding: calc(var(--cw) * .04);
  border-radius: calc(var(--cw) * .15);
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .14);
  /* aucune ombre portée : sur une carte en 3D, elle est rognée au bord de la
     couche et dessine un rectangle visible (voir le halo de la scène) */
  transition: border-color .5s var(--e-out);
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--cw) * .115);
}
.ring-card.is-front .phone { border-color: var(--gold-45); }
.ring-card:not(.is-front):hover .phone { border-color: rgba(255, 255, 255, .3); }

/* ---- projet de face ---- */
.ring-captions { display: grid; }
.ring-info {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  /* sortie brève : l'ancienne légende disparaît avant que la suivante
     n'apparaisse, pour que les deux titres ne se superposent jamais */
  transition: opacity .18s ease-in, transform .22s ease-in, visibility 0s linear .18s;
}
.ring-info.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--e-out) .16s, transform .55s var(--e-out) .16s, visibility 0s;
}

.ring-info__tag {
  font-family: var(--f-btn);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--gold);
}
.ring-info__name {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 6.4vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--white);
  text-wrap: balance;
}
.ring-info__desc {
  max-width: 46ch;
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}
.ring-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ---- liste des projets ---- */
.ring-picks {
  display: flex;
  gap: 2px 22px;
  /* la bulle WhatsApp, fixée en bas à droite, recouvrait la fin de la liste */
  margin-right: 64px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.ring-picks::-webkit-scrollbar { display: none; }
.ring-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  transition: color .3s var(--e-out);
}
.ring-pick::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transition: width .45s var(--e-out), opacity .3s var(--e-out), background-color .3s var(--e-out);
}
.ring-pick:hover { color: var(--white); }
.ring-pick[aria-current="true"] { color: var(--gold); }
.ring-pick[aria-current="true"]::before { width: 26px; opacity: 1; background: var(--gold); }

.ring-arrows { display: flex; flex: 0 0 auto; gap: 10px; }
.ring-arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-24);
  color: var(--gold);
  transition: border-color .3s var(--e-out), background-color .3s var(--e-out), transform .35s var(--e-spring);
}
.ring-arrow:hover { border-color: var(--gold); background: var(--gold-08); }
.ring-arrow--prev:hover { transform: translateX(-3px); }
.ring-arrow--next:hover { transform: translateX(3px); }
.ring-arrow svg { width: 19px; height: 19px; }

.ring-hint {
  align-items: center;
  gap: 10px;
  font-family: var(--f-btn);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .42);
}
.ring-hint svg { width: 14px; height: 14px; color: var(--gold); }

/* ---- ordinateur : anneau à gauche, panneau à droite ---- */
@media (min-width: 1000px) and (min-aspect-ratio: 11/10) {
  .ring-layout {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    align-items: center;
    gap: clamp(28px, 4vw, 80px);
    padding-block: 0;
  }
  .ring-stage {
    order: 0;
    align-self: stretch;
    /* le voisin de droite se dissout avant d'atteindre le texte */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 74%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 74%, transparent);
  }
  .ring-panel {
    display: grid;
    align-content: center;
    gap: clamp(16px, 3vh, 32px);
    padding-block: clamp(12px, 3vh, 36px);
  }
  .ring-head,
  .ring-captions,
  .ring-picks { order: 0; }
  .ring-head {
    padding-bottom: clamp(12px, 2.2vh, 22px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .ring-info__name { font-size: clamp(32px, min(3.4vw, 6.2vh), 58px); }
  .ring-info__desc { font-size: 16px; }
  .ring-info__actions { margin-top: clamp(14px, 2.4vh, 22px); }
  .ring-picks {
    display: grid;
    gap: 0;
    margin-right: 0;
    padding-top: clamp(12px, 2.2vh, 22px);
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ring-pick { padding: clamp(4px, .8vh, 8px) 0; font-size: 15px; }
  .ring-hint { display: inline-flex; }
}
/* ordinateur à écran bas : on resserre plutôt que de laisser déborder */
@media (min-width: 1000px) and (min-aspect-ratio: 11/10) and (max-height: 700px) {
  .ring-hint { display: none; }
  .ring-info__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---- mode à plat : sans JavaScript, mouvement réduit ou écran trop bas ----
   Pas d'épinglage ni de rotation : les téléphones défilent en ligne sous le
   titre, et toutes les légendes sont lisibles. */
.no-js .ring-sect,
.ring-sect--flat { height: auto; padding-block: var(--sect); }

.no-js .ring-sticky,
.ring-sect--flat .ring-sticky {
  position: static;
  height: auto;
  padding: 0;
  overflow: visible;
}
.no-js .ring-layout,
.ring-sect--flat .ring-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: auto;
  max-width: var(--wrap);
  padding: 0 var(--gut);
}
.no-js .ring-panel,
.ring-sect--flat .ring-panel { display: contents; }
.no-js .ring-head,
.ring-sect--flat .ring-head { order: 1; padding: 0; border: 0; }
.no-js .ring-stage,
.ring-sect--flat .ring-stage {
  --ch: 380px;
  order: 2;
  display: block;
  margin-inline: calc(-1 * var(--gut));
  -webkit-mask-image: none;
          mask-image: none;
}
.no-js .ring-stage::before,
.ring-sect--flat .ring-stage::before { display: none; }
.no-js .ring-captions,
.ring-sect--flat .ring-captions {
  order: 3;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px 28px;
}

.no-js .ring,
.ring-sect--flat .ring {
  display: flex;
  gap: 18px;
  width: auto;
  height: auto;
  padding: 0 var(--gut) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  transform: none !important;
}
.no-js .ring-card,
.ring-sect--flat .ring-card {
  position: relative;
  inset: auto;
  flex: 0 0 var(--cw);
  height: var(--ch);
  scroll-snap-align: center;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.no-js .ring-card[data-dup],
.ring-sect--flat .ring-card[data-dup] { display: none; }

.no-js .ring-info,
.ring-sect--flat .ring-info {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.no-js .ring-info__desc,
.ring-sect--flat .ring-info__desc { display: block; -webkit-line-clamp: unset; }

.no-js .ring-arrows,
.no-js .ring-picks,
.no-js .ring-hint,
.ring-sect--flat .ring-arrows,
.ring-sect--flat .ring-picks,
.ring-sect--flat .ring-hint { display: none; }

/* visionneuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--e-out), visibility .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84svh;
  width: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-24);
  transform: scale(.94);
  opacity: 0;
  transition: transform .6s var(--e-out), opacity .5s var(--e-out);
}
.lightbox.is-open img { transform: none; opacity: 1; }
.lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-45);
  color: var(--gold);
  transition: background-color .35s, transform .45s var(--e-spring);
}
.lightbox__close:hover { background: var(--gold-14); transform: rotate(90deg); }
.lightbox__close svg { width: 19px; height: 19px; }

/* ==========================================================================
   Offres
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Traitement « aurora » de la section Offres.
   Les formes dérivent en arrière-plan, chaque carte s'allume au survol.
   Tout est construit sur l'or #FEC326 : aucune teinte nouvelle.
   --------------------------------------------------------------------------- */

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* dégradé radial plutôt que `filter: blur()` : même douceur, sans le coût
     d'une couche floutée recomposée à chaque frame */
  background: radial-gradient(closest-side, rgba(254, 195, 38, .30), rgba(254, 195, 38, .10) 48%, transparent 74%);
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: min(620px, 78vw); height: min(620px, 78vw);
  top: 4%; left: 4%;
  animation: auroraDrift1 20s infinite alternate ease-in-out;
}
.aurora span:nth-child(2) {
  width: min(520px, 66vw); height: min(520px, 66vw);
  bottom: 4%; right: 4%;
  animation: auroraDrift2 25s infinite alternate ease-in-out;
}
@keyframes auroraDrift1 {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(100px, 50px, 0) rotate(180deg); }
}
@keyframes auroraDrift2 {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-100px, -50px, 0) rotate(-180deg); }
}

/* ---------------------------------------------------------------------------
   Carrousel « coverflow » 3D des offres.
   Les trois offres défilent en perspective ; le détail de l'offre au centre
   s'affiche juste en dessous, synchronisé avec le carrousel.
   --------------------------------------------------------------------------- */

.coverflow {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 4.5vw, 56px);

  --cf-w: 330px;
  --cf-h: 500px;
  --cf-x1: 285px;
  --cf-x2: 510px;
}

.cf-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cf-h);
  perspective: 1400px;
}

.cf-card {
  position: absolute;
  width: var(--cf-w);
  height: var(--cf-h);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12);
  transform-origin: center center;
  transform: scale(.4);
  opacity: 0;
  z-index: 0;
  will-change: transform, opacity;
  transition:
    transform .8s cubic-bezier(.25, 1, .5, 1),
    opacity .8s cubic-bezier(.25, 1, .5, 1),
    filter .8s cubic-bezier(.25, 1, .5, 1),
    box-shadow .8s cubic-bezier(.25, 1, .5, 1),
    border-color .5s var(--e-out);
}

/* positions posées par le script à partir d'un décalage signé (-2 … +2) */
.cf-card[data-pos="0"] {
  transform: translateX(0) scale(1) rotateY(0deg);
  opacity: 1;
  z-index: 30;
  border-color: var(--gold-45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .9), 0 0 38px rgba(254, 195, 38, .28);
}
.cf-card[data-pos="1"],
.cf-card[data-pos="-1"] {
  opacity: .62;
  z-index: 20;
  filter: brightness(.72);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.cf-card[data-pos="1"]  { transform: translateX(var(--cf-x1)) scale(.84) rotateY(-24deg); }
.cf-card[data-pos="-1"] { transform: translateX(calc(-1 * var(--cf-x1))) scale(.84) rotateY(24deg); }

.cf-card[data-pos="2"],
.cf-card[data-pos="-2"] {
  opacity: .34;
  z-index: 10;
  filter: brightness(.5);
  cursor: pointer;
}
.cf-card[data-pos="2"]  { transform: translateX(var(--cf-x2)) scale(.68) rotateY(-38deg); }
.cf-card[data-pos="-2"] { transform: translateX(calc(-1 * var(--cf-x2))) scale(.68) rotateY(38deg); }

.cf-card[data-pos="far"] { pointer-events: none; }

.cf-card:not([data-pos="0"]):hover { filter: brightness(.9); }

/* photo de fond */
.cf-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .18) 26%,
    rgba(0, 0, 0, .72) 62%,
    rgba(0, 0, 0, .96) 100%);
}

/* contenu, visible seulement sur la carte centrale */
.cf-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 20px 20px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
  pointer-events: none;
}
.cf-card[data-pos="0"] .cf-card__body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cf-card__tag {
  align-self: flex-end;
  font-family: var(--f-btn);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.cf-card__foot { margin-top: auto; }

.cf-card__name {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--white);
  text-shadow: 0 3px 12px rgba(0, 0, 0, .95);
}
.cf-card__price {
  display: block;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .95);
}
.cf-card__rule {
  width: 34px; height: 2px;
  margin: 12px auto 10px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(254, 195, 38, .7);
}
.cf-card__desc {
  max-width: 260px;
  margin: 0 auto 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

/* flèches */
.cf-nav {
  position: absolute;
  top: calc(var(--cf-h) / 2);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--gold-24);
  color: var(--gold);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  transform: translateY(-50%);
  transition: background-color .3s var(--e-out), border-color .3s var(--e-out), transform .35s var(--e-spring);
}
.cf-nav:hover { background: rgba(0, 0, 0, .8); border-color: var(--gold); }
.cf-nav--prev { left: 0; }
.cf-nav--next { right: 0; }
.cf-nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.cf-nav--next:hover { transform: translateY(-50%) translateX(3px); }
.cf-nav svg { width: 20px; height: 20px; }

/* pastilles */
.cf-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.cf-dots button {
  height: 8px;
  width: 8px;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .25);
  transition: width .35s var(--e-out), background-color .35s var(--e-out), box-shadow .35s var(--e-out);
}
.cf-dots button[aria-current="true"] {
  width: 28px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(254, 195, 38, .7);
}

/* panneau de détail, synchronisé avec la carte centrale */
.cf-detail {
  position: relative;
  margin-top: clamp(34px, 4.5vw, 52px);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-24);
  background: linear-gradient(160deg, rgba(254, 195, 38, .06), rgba(255, 255, 255, .015));
}
.cf-panel { display: none; }
.cf-panel[data-active] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 44px);
  animation: cfPanelIn .55s var(--e-out) both;
}
@keyframes cfPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.cf-panel h4 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
.cf-panel__terms {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .64);
  font-variant-numeric: tabular-nums;
}
.cf-panel__terms b { color: var(--gold); font-weight: 600; }
.cf-detail__cta { margin-top: clamp(26px, 3vw, 34px); text-align: center; }

/* ---------------------------------------------------------------------------
   Comparatif avec les tarifs du marché.
   Chaque barre couvre une fourchette, positionnée sur une échelle commune ;
   les bornes viennent de variables posées dans le HTML.
   --------------------------------------------------------------------------- */

.bars {
  display: grid;
  gap: 20px;
  margin-top: clamp(34px, 4.5vw, 54px);
  /* largeur figée pour la colonne des montants : en `auto` elle se réduirait
     dans la ligne d'échelle, où cette colonne est vide, et les graduations ne
     tomberaient plus sous les pistes. */
  --bar-val-w: 140px;
}

.bar {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr var(--bar-val-w);
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}
.bar__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, .76);
}
.bar--us .bar__label { color: var(--gold); font-weight: 600; }
.bar__label small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
}

.bar__track {
  position: relative;
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--e-out) var(--rv-d, 0ms);
}
.bar.is-in .bar__fill { transform: none; }
.bar--us .bar__fill {
  background: linear-gradient(90deg, var(--gold), rgba(254, 195, 38, .62));
  box-shadow: 0 0 20px rgba(254, 195, 38, .5);
}

.bar__val {
  font-family: var(--f-btn);
  font-size: 16px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .74);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar--us .bar__val { color: var(--gold); }
.bar__val { text-align: right; }

/* l'échelle rejoue la grille d'une barre, pour tomber pile sous les pistes */
.bars__scale {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr var(--bar-val-w);
  gap: clamp(14px, 2vw, 26px);
  margin-top: 12px;
}
.bars__ticks {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .4);
  font-variant-numeric: tabular-nums;
}

.bars__note {
  max-width: 72ch;
  margin: 24px auto 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .52);
  text-align: center;
}

@media (max-width: 760px) {
  .bar {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }
  .bar__label { grid-column: 1 / 2; }
  .bar__val { grid-column: 2 / 3; text-align: right; align-self: start; }
  .bar__track { grid-column: 1 / -1; }

  .bars__scale { grid-template-columns: 1fr; }
  .bars__scale > span:empty { display: none; }
  .bars__ticks { font-size: 11px; }
}

@media (max-width: 900px) {
  .coverflow { --cf-w: 280px; --cf-h: 440px; --cf-x1: 205px; --cf-x2: 370px; }
  .cf-card__name { font-size: 24px; }
  .cf-card__price { font-size: 33px; }
  .cf-panel[data-active] { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .coverflow { --cf-w: min(250px, 74vw); --cf-h: 400px; --cf-x1: 120px; --cf-x2: 210px; }
  .cf-card__body { padding: 16px 16px 20px; }
  .cf-card__desc { display: none; }
  .cf-nav { width: 40px; height: 40px; }
  .cf-nav svg { width: 17px; height: 17px; }
}

/* Sans animation : plus de perspective ni de défilement automatique, les trois
   offres sont simplement empilées et toutes lisibles. */
@media (prefers-reduced-motion: reduce) {
  .cf-stage {
    height: auto;
    flex-direction: column;
    gap: 20px;
    perspective: none;
  }
  .cf-card {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    width: min(var(--cf-w), 100%);
  }
  .cf-card__body { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .cf-nav, .cf-dots { display: none; }
  .cf-panel { display: block !important; }
  .cf-panel + .cf-panel { margin-top: 32px; }
}

/* Deux offres : sur un écran assez large, les cartes se font face côte à côte
   au lieu de laisser un côté du carrousel vide. La carte choisie se redresse
   et s'éclaire ; un trait doré sur le détail indique à quelle offre il
   correspond. Classe et attributs posés par le script (section 13 bis). */
@media (min-width: 720px) {
  .coverflow--duo {
    --cf-gap: clamp(28px, 4vw, 64px);
    --cf-off: calc(var(--cf-w) / 2 + var(--cf-gap) / 2);
  }
  .coverflow--duo .cf-card {
    opacity: .74;
    z-index: 10;
    filter: brightness(.74) saturate(.85);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    cursor: pointer;
  }
  .coverflow--duo .cf-card[data-slot="0"] { transform: translateX(calc(-1 * var(--cf-off))) rotateY(13deg) scale(.93); }
  .coverflow--duo .cf-card[data-slot="1"] { transform: translateX(var(--cf-off)) rotateY(-13deg) scale(.93); }

  .coverflow--duo .cf-card.is-active {
    opacity: 1;
    z-index: 30;
    filter: none;
    cursor: default;
    border-color: var(--gold-45);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .9), 0 0 38px rgba(254, 195, 38, .28);
  }
  .coverflow--duo .cf-card.is-active[data-slot="0"] { transform: translateX(calc(-1 * var(--cf-off))) rotateY(5deg) scale(1); }
  .coverflow--duo .cf-card.is-active[data-slot="1"] { transform: translateX(var(--cf-off)) rotateY(-5deg) scale(1); }

  .coverflow--duo .cf-card:not(.is-active):hover {
    opacity: .92;
    filter: brightness(.92);
    border-color: var(--gold-24);
  }

  /* les deux fiches restent lisibles et cliquables */
  .coverflow--duo .cf-card__body {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .coverflow--duo .cf-nav { display: none; }

  .coverflow--duo .cf-detail::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: clamp(56px, 6vw, 84px);
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(254, 195, 38, .7);
    transform: translateX(calc(-50% - var(--cf-off)));
    transition: transform .8s cubic-bezier(.25, 1, .5, 1);
  }
  .coverflow--duo[data-active="1"] .cf-detail::before {
    transform: translateX(calc(-50% + var(--cf-off)));
  }
}

@media (min-width: 720px) and (prefers-reduced-motion: reduce) {
  .coverflow--duo .cf-stage { flex-direction: row; align-items: stretch; }
  .coverflow--duo .cf-card { flex: 0 1 var(--cf-w); height: var(--cf-h); }
}

/* Sans JavaScript (ou si le script n'a pas pu se charger) : les offres sont
   posées à plat, toutes visibles, avec leurs deux détails. */
.no-js .cf-stage {
  height: auto;
  flex-wrap: wrap;
  gap: 20px;
  perspective: none;
}
.no-js .cf-card {
  position: relative;
  transform: none;
  opacity: 1;
  filter: none;
  width: min(var(--cf-w), 100%);
}
.no-js .cf-card__body { opacity: 1; transform: none; pointer-events: auto; }
.no-js .cf-nav,
.no-js .cf-dots { display: none; }
.no-js .cf-panel { display: block; }
.no-js .cf-panel + .cf-panel { margin-top: 32px; }

.ticks { display: grid; gap: 11px; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .42em;
  width: 15px; height: 8px;
  border-left: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  transform: rotate(-45deg);
}
.ticks .ticks { margin-top: 11px; padding-left: 4px; }
.ticks .ticks li { font-size: 14.5px; color: rgba(255,255,255,.68); }
.ticks .ticks li::before {
  width: 6px; height: 6px;
  top: .6em;
  border: 0;
  border-radius: 50%;
  background: var(--gold-45);
  transform: none;
}


.pay {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}
/* Échéancier : ce que « 12 fois sans frais » représente pour chaque offre.
   Remplace l'ancienne image, un aplat jaune sans contenu hérité du site
   d'origine, qui passait pour un emplacement vide. */
.pay-card {
  display: grid;
  gap: 4px;
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-24);
  background: linear-gradient(160deg, rgba(254, 195, 38, .09), rgba(255, 255, 255, .015));
}
.pay-card__label {
  margin-bottom: 10px;
  font-family: var(--f-btn);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--gold);
}
.pay-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(14px, 2vw, 22px);
}
.pay-card__row + .pay-card__row { border-top: 1px solid rgba(255, 255, 255, .1); }
.pay-card__name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}
.pay-card__total {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}
.pay-card__month {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-card__month small {
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-groups { display: grid; gap: clamp(30px, 4vw, 46px); margin-top: clamp(34px, 4.5vw, 56px); }

.faq-group__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.faq-group__head h2,
.faq-group__head h3 {
  font-family: var(--f-body);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 600;
  color: var(--gold);
}
.faq-group__head i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-45), transparent);
}

.acc { display: grid; gap: 12px; }

.acc__item {
  border-radius: var(--r-md);
  border: 1px solid var(--gold-14);
  background: rgba(255,255,255,.022);
  overflow: hidden;
  transition: border-color .45s var(--e-out), background-color .45s var(--e-out);
}
.acc__item:hover { border-color: var(--gold-24); background: rgba(255,255,255,.04); }
.acc__item.is-open { border-color: var(--gold-45); background: rgba(254, 195, 38, .05); }

.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px clamp(18px, 2.2vw, 26px);
  text-align: left;
  font-size: clamp(15px, 1.45vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  transition: color .35s var(--e-out);
}
.acc__item.is-open .acc__btn { color: var(--gold); }

.acc__sign {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--gold-45);
  transition: transform .55s var(--e-out), background-color .4s var(--e-out), border-color .4s;
}
.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  background: var(--gold);
  transition: transform .5s var(--e-out), background-color .4s;
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign { transform: rotate(180deg); background: var(--gold); border-color: var(--gold); }
.acc__item.is-open .acc__sign::before,
.acc__item.is-open .acc__sign::after { background: var(--black); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--e-out);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 26px) 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .5s var(--e-out) .1s, transform .55s var(--e-out) .1s;
}
.acc__item.is-open .acc__panel p { opacity: 1; transform: none; }
.acc__panel a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form { display: grid; gap: 18px; }

.field { position: relative; }

.field label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold);
}

.field input,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--steel);
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .35s var(--e-out), box-shadow .4s var(--e-out), transform .4s var(--e-out);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(13, 20, 26, .48); }
.field input:hover,
.field textarea:hover { border-color: var(--ink); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-24);
  transform: translateY(-1px);
}
.field.is-bad input,
.field.is-bad textarea { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-24); }

.field__msg {
  display: block;
  margin-top: 7px;
  min-height: 17px;
  font-size: 13px;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
.field.is-bad .field__msg { opacity: 1; transform: none; }

.form__note {
  min-height: 20px;
  margin: 0;
  font-size: 14px;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out);
}
.form__note.is-on { opacity: 1; transform: none; }

.contact-panel {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(30px, 4.5vw, 70px);
}
.contact-card {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-24);
  background: linear-gradient(160deg, rgba(254, 195, 38, .06), rgba(255,255,255,.014));
}

.contact-rows { display: grid; gap: 14px; margin-top: 26px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-14);
  background: rgba(255,255,255,.022);
  transition: border-color .45s var(--e-out), transform .5s var(--e-out), background-color .45s;
}
.contact-row:hover { border-color: var(--gold-45); background: rgba(255,255,255,.045); transform: translateX(5px); }
.contact-row__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gold-45);
  color: var(--gold);
}
.contact-row__ico svg { width: 18px; height: 18px; }
.contact-row b {
  display: block;
  font-family: var(--f-btn);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  color: rgba(255,255,255,.62);
}
.contact-row span { font-size: 15.5px; font-weight: 500; color: var(--gold); word-break: break-word; }

.contact-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--gold-14);
  aspect-ratio: 4 / 3;
}
.contact-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ==========================================================================
   Bandeau CTA
   ========================================================================== */

.cta {
  position: relative;
  padding: clamp(38px, 6vw, 78px) clamp(24px, 4vw, 64px);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-24);
  background: linear-gradient(135deg, rgba(254, 195, 38, .12), rgba(255,255,255,.015) 55%);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: conic-gradient(from 0deg, transparent, var(--gold-08), transparent 40%);
  animation: ctaSpin 16s linear infinite;
  pointer-events: none;
}
@keyframes ctaSpin { to { transform: rotate(360deg); } }
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 26px; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.foot {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px) 34px;
  border-top: 1px solid var(--gold-14);
  background: var(--black);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.1fr .8fr 1.1fr;
  gap: clamp(30px, 4.5vw, 64px);
}
.foot h5 {
  font-family: var(--f-script);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 22px;
}
.foot__contact p { margin: 0 0 6px; font-size: 15.5px; color: var(--gold); }
.foot__contact a { display: inline-block; padding: 4px 0; font-weight: 700; }
.foot__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

.foot__nav { display: grid; gap: 4px; }
.foot__nav a {
  position: relative;
  display: inline-block;
  width: fit-content;
  min-width: 44px;
  padding: 5px 0;
  font-size: 15px;
  color: rgba(255,255,255,.76);
  transition: color .35s var(--e-out), transform .4s var(--e-out);
}
.foot__nav a::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%;
  width: 7px; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--e-out);
}
.foot__nav a:hover { color: var(--gold); transform: translateX(13px); }
.foot__nav a:hover::before { transform: scaleX(1); }

.foot__form { max-width: 380px; }
.foot__form .btn {
  margin-top: 14px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--gold-24);
}
.foot__form .btn::before { background: radial-gradient(circle, rgba(254, 195, 38, .35), transparent 70%); }
.foot__form .btn:hover { background: var(--navy); border-color: var(--gold); color: var(--white); }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(38px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.foot__bar p { margin: 0; font-size: 14px; color: var(--white); }
.foot__logo { height: 62px; width: auto; opacity: .92; transition: opacity .4s, transform .5s var(--e-spring); }
.foot__logo:hover { opacity: 1; transform: translateY(-2px); }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--f-btn);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--gold);
  transition: transform .45s var(--e-out);
}
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 15px; height: 15px; }

/* ==========================================================================
   Bulle WhatsApp
   ========================================================================== */

.wa {
  position: fixed;
  right: 20px; bottom: 24px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.65);
  transform: scale(0);
  transition: transform .6s var(--e-spring), box-shadow .45s var(--e-out);
}
.wa.is-on { transform: scale(1); }
.wa:hover { box-shadow: 0 16px 40px -10px rgba(254, 195, 38, .8); }
.wa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: waPulse 2.8s var(--e-out) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa svg { width: 28px; height: 28px; }

/* ==========================================================================
   Panier (Store)
   ========================================================================== */

.cart-back {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--e-out), visibility .45s;
}
.cart-back.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 70;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 3vw, 30px) 30px;
  background: var(--ink);
  border-left: 1px solid var(--gold-24);
  transform: translateX(102%);
  /* masqué tant qu'il est fermé : sinon le tiroir hors écran élargit la page */
  visibility: hidden;
  transition: transform .6s var(--e-out), visibility .6s;
}
.cart.is-open { transform: none; visibility: visible; }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gold-14);
}
.cart__head h2 {
  font-family: var(--f-script);
  font-size: 27px;
  font-weight: 400;
  color: var(--gold);
}
.cart__body {
  flex: 1;
  display: grid;
  place-content: center;
  gap: 18px;
  text-align: center;
  color: rgba(255,255,255,.72);
}
.cart__body svg { width: 46px; height: 46px; margin-inline: auto; color: var(--gold); opacity: .55; }
.cart__body p { margin: 0; font-size: 15.5px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__form { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 960px) {
  :root { --nav-h: 76px; }

  .nav__links { display: none; }
  .burger { display: grid; place-items: center; }

  .about,
  .pay,
  .contact-panel { grid-template-columns: 1fr; }
  .about__media { order: -1; aspect-ratio: 16 / 11; }

  .grid-3,
  .grid-2,
  .offers { grid-template-columns: 1fr; }
  .grid-3--center > * { flex-basis: 100%; }

  .hero { min-height: 84svh; }
  .hero__scroll { display: none; }
}

@media (max-width: 640px) {
  .foot__grid { grid-template-columns: 1fr; }
  .avis::before { font-size: 130px; top: -22px; left: 8px; }
  .contact-row { padding: 13px 15px; }
  .wa { width: 52px; height: 52px; right: 16px; bottom: 18px; }
  .btn { padding: 15px 26px; }
}

/* ==========================================================================
   Accessibilité — mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .word > span { transform: none !important; }
  .hero__media img { transform: scale(1.02) !important; }
  .veil { display: none; }
}