/* ============================================================================
   KAEVO — Feuille de style
   1. Réglages & variables      6. Catalogue
   2. Base & typographie        7. Méthode
   3. Composants                8. Tarif / FAQ / Footer
   4. Header & menu             9. Modales & formulaire
   5. Hero                    10. Responsive & iPhone
   ========================================================================== */

/* ══ 1. RÉGLAGES ═══════════════════════════════════════════════════════ */
:root{
  /* Blancs distingués */
  --paper:      #FFFFFF;
  --paper-2:    #FAF9F6;
  --paper-3:    #F4F2ED;
  --ink:        #0B0B0C;
  --ink-2:      #1C1C1F;
  --ink-soft:   #45454C;
  --muted:      #78787F;
  --muted-2:    #9C9CA4;
  --line:       #E7E4DD;
  --line-2:     #EFEDE7;
  --gold:       #A8834E;
  --gold-soft:  #D8C6A8;

  --radius:     18px;
  --radius-lg:  26px;
  --radius-xl:  34px;

  --shadow-sm:  0 1px 2px rgba(11,11,12,.04), 0 2px 8px rgba(11,11,12,.03);
  --shadow:     0 2px 4px rgba(11,11,12,.03), 0 8px 24px rgba(11,11,12,.05);
  --shadow-lg:  0 4px 12px rgba(11,11,12,.04), 0 24px 60px rgba(11,11,12,.09);
  --shadow-xl:  0 8px 24px rgba(11,11,12,.06), 0 40px 100px rgba(11,11,12,.14);

  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-2:     cubic-bezier(.65,0,.35,1);

  --serif: 'Instrument Serif', ui-serif, 'Iowan Old Style', 'Apple Garamond', Baskerville, Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shell: 1200px;
  --pad:   clamp(20px, 5vw, 48px);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --dock-h: 0px;

  /* Argent poli. Aucun gris très sombre : c'est ce qui créait la barre
     en travers des chiffres. L'horizon à 52 % est un gris moyen. */
  /* Rampe dorée partagée : le mot « gratuitement » du titre et le prix
     « 17,99 € » puisent dans la même — mêmes couleurs, garanti. */
  --gilt: linear-gradient(to bottom,
    #A8834E  0%,
    #D4B478 20%,
    #F0DCA8 34%,
    #E8CE96 44%,
    #B08D50 54%,
    #D9BF8C 70%,
    #EFE0BC 84%,
    #9E7C42 100%);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--paper-2); }

/* Focus discret mais accessible */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}

/* ══ 2. BASE & TYPOGRAPHIE ═════════════════════════════════════════════ */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:max(var(--pad), var(--safe-l));
  padding-inline-end:max(var(--pad), var(--safe-r));
}

.kicker{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}
.kicker--light{ color:var(--gold-soft); }

.sec-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 6.2vw, 68px);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 20px;
}
.sec-title em{
  font-style:italic;
  color:var(--muted-2);
}

.sec-lead{
  font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.65;
  color:var(--muted);
  max-width:56ch;
  margin:0;
}

.sec-head{ margin-bottom:clamp(36px, 5vw, 60px); }
.sec-head--center{
  text-align:center;
  max-width:720px;
  margin-inline:auto;
}
.sec-head--center .sec-lead{ margin-inline:auto; }

section{ position:relative; }

/* Révélations au scroll */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d, 0) * 1ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.05s !important; }
}

/* ══ 3. COMPOSANTS ═════════════════════════════════════════════════════ */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--paper-2);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:100px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:15px;
  font-weight:560;
  letter-spacing:-.01em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform .5s var(--ease); }
.btn::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
  opacity:0;
  transform:translateX(-100%);
  transition:opacity .4s, transform .8s var(--ease);
}
.btn:hover::before{ opacity:1; transform:translateX(0); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--dark{ --btn-bg:var(--ink); --btn-fg:#FAF9F6; }
.btn--light{ --btn-bg:#FAF9F6; --btn-fg:var(--ink); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--line);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--ink); background:rgba(11,11,12,.03); }
.btn--sm{ min-height:42px; padding:10px 20px; font-size:14px; }
.btn--lg{ min-height:56px; padding:17px 34px; font-size:16px; }
.btn--block{ display:flex; width:100%; }

.btn__spin{
  display:none;
  width:17px; height:17px;
  border:2px solid rgba(250,249,246,.3);
  border-top-color:#FAF9F6;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn__label{ opacity:.5; }
.btn.is-loading .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px 8px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
  font-size:12px;
  font-weight:550;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(168,131,78,.5);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(168,131,78,.45); }
  70%{ box-shadow:0 0 0 9px rgba(168,131,78,0); }
  100%{ box-shadow:0 0 0 0 rgba(168,131,78,0); }
}

/* Barre de progression */
.progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:120;
  pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--ink));
  transition:width .12s linear;
}

/* ══ 4. HEADER ═════════════════════════════════════════════════════════ */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding-top:var(--safe-t);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(250,249,246,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--line-2);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:72px;
}

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:9px;
  background:var(--ink);
  color:var(--paper-2);
  font-family:var(--serif);
  font-size:19px;
  line-height:1;
  padding-bottom:2px;
}
/* Logo image de l'en-tête : mêmes dimensions et le même resserrement au
   défilement que l'ancien monogramme typographique. */
.brand__logo{
  width:44px; height:44px;
  border-radius:12px;
  display:block;
  transition:transform .55s var(--ease);
}
.header.is-stuck .brand__logo{ transform:scale(.9); }


.nav{ display:flex; gap:34px; }
.nav a{
  position:relative;
  font-size:14.5px;
  font-weight:480;
  color:var(--ink-soft);
  padding:6px 0;
  transition:color .3s;
}
.nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

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

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  padding:0;
  cursor:pointer;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  position:absolute;
  left:13px;
  width:18px; height:1.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:24px; }
.burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* Menu mobile */
.mobilemenu{
  position:fixed; inset:0;
  z-index:99;
  background:var(--paper-2);
  padding:calc(96px + var(--safe-t)) var(--pad) calc(28px + var(--safe-b));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
.mobilemenu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobilemenu__nav{ display:flex; flex-direction:column; }
.mobilemenu__nav a{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-2);
  font-family:var(--serif);
  font-size:clamp(28px, 8vw, 40px);
  line-height:1.1;
  color:var(--ink);
  opacity:0;
  transform:translateY(14px);
}
.mobilemenu.is-open .mobilemenu__nav a{
  animation:menuIn .6s var(--ease) forwards;
}
.mobilemenu.is-open .mobilemenu__nav a:nth-child(1){ animation-delay:.06s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(2){ animation-delay:.12s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(3){ animation-delay:.18s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(4){ animation-delay:.24s; }
.mobilemenu.is-open .mobilemenu__nav a:nth-child(5){ animation-delay:.30s; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.mobilemenu__i{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gold);
}
.mobilemenu__foot{ padding-top:24px; }
.mobilemenu__note{
  margin:14px 0 0;
  text-align:center;
  font-size:12.5px;
  color:var(--muted-2);
}

/* ══ 5. HERO ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding-top:calc(148px + var(--safe-t));
  padding-bottom:0;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:-20% -10% 0;
  z-index:0;
  pointer-events:none;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
}
.orb--1{
  width:52vw; height:52vw;
  max-width:660px; max-height:660px;
  top:-6%; left:-8%;
  background:radial-gradient(circle at 40% 40%, rgba(168,131,78,.24), transparent 68%);
  animation:float1 22s ease-in-out infinite;
}
.orb--2{
  width:44vw; height:44vw;
  max-width:560px; max-height:560px;
  top:8%; right:-6%;
  background:radial-gradient(circle at 60% 40%, rgba(120,140,190,.20), transparent 68%);
  animation:float2 27s ease-in-out infinite;
}
.orb--3{
  width:38vw; height:38vw;
  max-width:480px; max-height:480px;
  bottom:-4%; left:32%;
  background:radial-gradient(circle at 50% 50%, rgba(200,170,140,.20), transparent 68%);
  animation:float1 31s ease-in-out infinite reverse;
}
@keyframes float1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(4%, 5%, 0) scale(1.08); }
}
@keyframes float2{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-5%, 4%, 0) scale(1.1); }
}
.grain{
  position:absolute; inset:0;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding-bottom:clamp(56px, 8vw, 92px);
}

.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 8.6vw, 104px);
  line-height:1.02;
  letter-spacing:-.028em;
  color:var(--ink);
  margin:26px 0 24px;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title em{
  /* Coupe romaine, volontairement : le g italique de l'Instrument Serif a
     une boucle très calligraphique qui détonnait. En romain le g est
     classique, et c'est l'or qui distingue le mot — pas la pente. */
  font-style:normal;
  color:var(--gold);    /* repli */
}

/* ── Feuille d'or ──────────────────────────────────────────────────────
   La version précédente fusionnait une rampe grise sur un fondu or → noir :
   le gris désaturait l'or et la moitié droite virait au brun sale. Ici la
   rampe est DÉJÀ dorée, aucune fusion ne vient la ternir, et le mot reste
   or sur toute sa largeur. L'horizon à mi-hauteur est doré lui aussi —
   jamais noir — pour éviter la barre en travers des lettres. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title em{
    background-image:
      /* Bande très étroite — 4,8 % d'un calque trois fois plus large que le
         mot, soit environ 14 % de sa largeur : une lettre et demie éclairée
         à la fois. C'était là l'erreur des versions précédentes, où la bande
         couvrait plus de la moitié du mot et ne se voyait donc pas passer. */
      linear-gradient(100deg,
        transparent 47.6%,
        rgba(255,255,255,.45) 48.8%,
        rgba(255,255,255,.98) 50%,
        rgba(255,252,240,.5) 51.2%,
        transparent 52.4%),
      var(--gilt);
    background-size:300% 100%, 100% 100%;
    background-position:15% 0, 0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    filter:
      drop-shadow(0 -1px 0 rgba(255,255,255,.5))
      drop-shadow(0 1px 1px rgba(104,78,34,.3))
      drop-shadow(0 4px 9px rgba(104,78,34,.14));
    animation:goldSheen 5s linear 1.2s infinite;
  }
}
/* Cycle de 5 s. Le calque fait trois fois la largeur du mot : le reflet
   entre par la droite à 15 %, sort à gauche à 85 %. Vitesse constante
   (linear) pour qu'on suive le passage lettre par lettre, puis 1,4 s de
   repos avant le suivant. */
@keyframes goldSheen{
  0%       { background-position:15% 0, 0 0; }
  72%,100% { background-position:85% 0, 0 0; }
}

.hero__lead{
  max-width:60ch;
  margin:0 auto;
  font-size:clamp(15.5px, 1.8vw, 19px);
  line-height:1.62;
  color:var(--muted);
}
.hero__lead strong{ color:var(--ink); font-weight:600; }

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:34px;
}

/* Bandeau défilant */
.marquee{
  position:relative;
  z-index:1;
  border-block:1px solid var(--line-2);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  padding:16px 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  gap:0;
  width:max-content;
  animation:marquee 95s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 26px;
  white-space:nowrap;
  font-size:13.5px;
  color:var(--ink-soft);
  font-weight:480;
}
.marquee__item i{
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.9;
}
.marquee__item s{
  color:var(--muted-2);
  font-size:12.5px;
  text-decoration-thickness:1px;
}
.marquee__item b{
  font-weight:600;
  color:var(--gold);
  font-size:12.5px;
  letter-spacing:.02em;
}

/* ══ 6. CATALOGUE ══════════════════════════════════════════════════════ */
.catalogue{
  padding:clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 66px);
  background:var(--paper-2);
}

.finder{ margin-bottom:20px; }
.search{
  position:relative;
  display:flex;
  align-items:center;
  max-width:560px;
}
.search__icon{
  position:absolute;
  left:20px;
  width:19px; height:19px;
  color:var(--muted-2);
  pointer-events:none;
  transition:color .3s;
}
.search input{
  width:100%;
  height:56px;
  padding:0 52px 0 50px;
  font-family:inherit;
  font-size:16px; /* ≥16px : empêche le zoom auto sur iOS */
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:100px;
  outline:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.search input::placeholder{ color:var(--muted-2); }
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(11,11,12,.05), var(--shadow);
}
.search input:focus ~ .search__icon,
.search:focus-within .search__icon{ color:var(--ink); }
.search__clear{
  position:absolute;
  right:14px;
  display:grid; place-items:center;
  width:32px; height:32px;
  border:none;
  border-radius:50%;
  background:var(--paper-3);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.search__clear svg{ width:14px; height:14px; }
.search__clear:hover{ background:var(--line); transform:rotate(90deg); }

.chips-wrap{
  position:relative;
  margin:0 calc(-1 * max(var(--pad), var(--safe-l)));
  padding:4px 0;
}
.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:6px max(var(--pad), var(--safe-l));
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  /* Sans ceci, l'accroche colle la première pastille au bord du conteneur
     en ignorant le remplissage : elle se retrouvait 18 px à gauche de la
     barre de recherche. scroll-padding décale le point d'accroche d'autant. */
  scroll-padding-inline:max(var(--pad), var(--safe-l));
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  min-height:42px;
  padding:9px 17px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:14px;
  font-weight:490;
  white-space:nowrap;
  cursor:pointer;
  scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chip svg{ width:15px; height:15px; opacity:.62; transition:opacity .3s; }
.chip__n{
  font-size:11.5px;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.chip:hover{ border-color:var(--muted-2); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.chip.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper-2);
  box-shadow:var(--shadow);
}
.chip.is-active svg{ opacity:1; }
.chip.is-active .chip__n{ color:rgba(250,249,246,.6); }

.result-line{
  margin:22px 0 26px;
  font-size:13.5px;
  color:var(--muted);
}
.result-line strong{ color:var(--ink); font-weight:600; }

/* Grille produits */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap:clamp(14px, 1.8vw, 22px);
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper);
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:cardIn .65s var(--ease) forwards;
  animation-delay:calc(var(--i) * 42ms);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
@keyframes cardIn{ to{ opacity:1; transform:none; } }
.card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c) 9%, transparent), transparent 62%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--c) 34%, var(--line));
  box-shadow:var(--shadow-lg);
}
.card:hover::after{ opacity:1; }
.card:active{ transform:translateY(-2px) scale(.995); }

.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.card__mark{
  display:grid; place-items:center;
  width:46px; height:46px;
  flex:none;
  border-radius:14px;
  background:var(--c);
  color:#fff;
  font-size:17px;
  font-weight:640;
  letter-spacing:-.02em;
  box-shadow:0 4px 14px color-mix(in srgb, var(--c) 26%, transparent);
  transition:transform .5s var(--ease);
}
.card:hover .card__mark{ transform:scale(1.06) rotate(-3deg); }
.card__mark svg{ width:22px; height:22px; }

.badge-free{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:100px;
  background:rgba(11,11,12,.05);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  transition:background .35s, color .35s;
}
.card:hover .badge-free{ background:var(--ink); color:var(--paper-2); }

.card__name{
  margin:0 0 6px;
  font-size:17.5px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  line-height:1.25;
}
.card__tag{
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
}

.card__cats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:18px;
}
.minitag{
  padding:4px 9px;
  border-radius:7px;
  background:var(--paper-3);
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.005em;
}

.card__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line-2);
}
.card__price{ display:flex; flex-direction:column; gap:2px; }
.card__old{
  font-size:15px;
  font-weight:600;
  color:var(--muted-2);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
.card__unit{ font-size:11px; color:var(--muted-2); letter-spacing:.04em; }
.card__go{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.card__go svg{ width:15px; height:15px; }
.card:hover .card__go{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper-2);
  transform:rotate(-45deg);
}

.card__flag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-bottom:10px;
  padding:5px 11px;
  border-radius:100px;
  background:color-mix(in srgb, var(--c) 11%, transparent);
  color:color-mix(in srgb, var(--c) 78%, var(--ink));
  font-size:10.5px;
  font-weight:640;
  letter-spacing:.075em;
  text-transform:uppercase;
  white-space:nowrap;
}


/* Pagination du catalogue */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:clamp(30px, 4vw, 46px);
}
.pager__btn{
  display:grid;
  place-items:center;
  min-width:46px;
  height:46px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:14.5px;
  font-weight:520;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease), opacity .3s;
}
.pager__btn svg{ width:16px; height:16px; }
.pager__btn:hover:not(:disabled):not([aria-current]){
  border-color:var(--ink);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.pager__btn[aria-current="page"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper-2);
  box-shadow:var(--shadow);
  cursor:default;
}
.pager__btn:disabled{ opacity:.3; cursor:default; }
.pager__gap{
  padding:0 3px;
  color:var(--muted-2);
  font-size:14px;
  user-select:none;
}

/* État vide */
.empty{
  text-align:center;
  padding:80px 20px;
}
.empty__mark{
  font-family:var(--serif);
  font-size:64px;
  color:var(--line);
  line-height:1;
  margin-bottom:14px;
}
.empty h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  color:var(--ink);
  margin:0 0 8px;
}
.empty p{ margin:0 0 22px; color:var(--muted); font-size:14.5px; }

/* ══ 7. MÉTHODE ═══════════════════════════════════════════════════════════ */
.method{
  padding:clamp(38px, 4.5vw, 62px) 0 clamp(36px, 4.5vw, 56px);
  background:var(--paper-2);
}
.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(18px, 2.4vw, 30px);
  margin:0;
  padding:0;
}
.step{
  position:relative;
  padding:clamp(28px, 3.6vw, 40px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-soft); }
.step__n{
  display:grid; place-items:center;
  width:42px; height:42px;
  margin-bottom:20px;
  border-radius:50%;
  border:1px solid var(--line);
  font-family:var(--serif);
  font-size:19px;
  color:var(--ink);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.step:hover .step__n{ background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.step h3{
  margin:0 0 10px;
  font-size:19.5px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
}
.step p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--muted); }

.legalnote{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-top:clamp(28px, 4vw, 44px);
  padding:clamp(20px, 3vw, 28px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  font-size:13.5px;
  line-height:1.62;
  color:var(--muted);
}
.legalnote svg{ width:24px; height:24px; flex:none; color:var(--gold); }
.legalnote strong{ color:var(--ink); font-weight:600; display:block; margin-bottom:3px; }

/* ══ 8. TARIF ══════════════════════════════════════════════════════════ */
.pricing{
  padding:clamp(36px, 4.5vw, 56px) 0 clamp(64px, 9vw, 120px);
  background:var(--paper-2);
}
.pricing__card{
  position:relative;
  max-width:620px;
  margin-inline:auto;
  padding:clamp(34px, 5vw, 58px);
  border-radius:var(--radius-xl);
  background:linear-gradient(165deg, #17171A 0%, #0B0B0C 55%, #121215 100%);
  color:#EFEDE7;
  text-align:center;
  overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.pricing__glow{
  position:absolute;
  top:-45%; left:50%;
  width:120%; aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(168,131,78,.20), transparent 58%);
  pointer-events:none;
  animation:float1 18s ease-in-out infinite;
}
.pricing__top{ position:relative; }
.pricing__logo{
  display:block;
  width:84px; height:84px;
  margin:0 auto 20px;
  border-radius:20px;
  /* Le fond du logo est un noir plus profond que la carte : le liseré doré
     assume la différence et le fait lire comme un sceau, pas comme un patch. */
  border:1px solid rgba(216,198,168,.18);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.pricing__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 4.6vw, 44px);
  letter-spacing:-.02em;
  margin:0 0 12px;
  color:#FAF9F6;
}
.pricing__desc{
  margin:0 auto;
  max-width:42ch;
  font-size:14.5px;
  line-height:1.6;
  color:rgba(239,237,231,.62);
}
.pricing__price{
  position:relative;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin-top:34px;
}
.pricing__amount{
  font-family:var(--serif);
  font-size:clamp(64px, 12vw, 104px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--gold-soft); /* repli assorti à l'or */
  font-variant-numeric:tabular-nums;
}
/* ── Chrome poli ───────────────────────────────────────────────────────
   Le métal est porté par le GROUPE, pas par chaque chiffre : le dégradé
   s'étend donc sur « 17,99 € » d'un seul tenant et le reflet le traverse
   sans rupture. Les enfants ne portent plus que leur taille de corps.
   Deux temps :
     · toutes les 7 s — un reflet lent glisse sur l'ensemble
     · toutes les 6 s — le groupe bascule d'un rien puis revient */
.pricing__metal{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  transform-origin:50% 68%;
  animation:priceTilt 6s cubic-bezier(.33,1,.4,1) 2.2s infinite;
}
.pricing__amount{
  font-family:var(--serif);
  font-size:clamp(64px, 12vw, 104px);
  line-height:.9;
  letter-spacing:-.04em;
  color:#FAF9F6;
  font-variant-numeric:tabular-nums;
}
.pricing__cur{
  font-family:var(--serif);
  font-size:clamp(28px, 4.5vw, 42px);
  color:var(--gold-soft); /* repli */
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pricing__metal{
    background-image:
      /* Même bande lumineuse que sur « gratuitement » : étroite, blanc
         chaud, elle parcourt le nombre ET le symbole d'un bout à l'autre. */
      linear-gradient(100deg,
        transparent 47.6%,
        rgba(255,255,255,.45) 48.8%,
        rgba(255,255,255,.98) 50%,
        rgba(255,252,240,.5) 51.2%,
        transparent 52.4%),
      var(--gilt);
    background-size:300% 100%, 100% 100%;
    background-position:15% 0, 0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    /* Le relief vient d'ici. Les drop-shadow s'enchaînent : chacune agit
       sur le résultat de la précédente. Six décalages de 1 px, du gris clair
       au gris sombre, construisent donc une véritable tranche extrudée qui
       épouse exactement la forme des chiffres — impossible à obtenir avec
       une simple ombre portée. Puis l'ombre de contact et l'ombre ambiante
       décollent le tout de la carte. */
    /* La tranche extrudée passe du gris acier au bronze : c'est elle qui
       donne l'épaisseur sous les chiffres, elle doit être de la même
       matière que la face. */
    filter:
      drop-shadow(0 -1px 0 rgba(255,248,228,.5))
      drop-shadow(0 1px 0 #8A6B33)
      drop-shadow(0 1px 0 #75592A)
      drop-shadow(0 1px 0 #604822)
      drop-shadow(0 1px 0 #4C381A)
      drop-shadow(0 1px 0 #3A2B13)
      drop-shadow(0 4px 6px rgba(0,0,0,.5))
      drop-shadow(0 18px 36px rgba(0,0,0,.4));
    will-change:transform;
    animation:
      giltSheen 5s linear .5s infinite,
      priceTilt 6s cubic-bezier(.33,1,.4,1) 2.2s infinite;
  }
  .pricing__amount,
  .pricing__cur{ color:inherit; }
}

/* Cycle de 5 s, calé sur celui de la dorure du titre : le reflet entre à
   droite et sort à gauche en 3,6 s à vitesse constante, puis 1,4 s de repos. */
@keyframes giltSheen{
  0%       { background-position:15% 0, 0 0; }
  72%,100% { background-position:85% 0, 0 0; }
}

/* Cycle de 6 s : 5 s d'immobilité, puis un basculement d'une seconde qui
   revient à sa place. L'amplitude reste sous les 6° — au-delà, le chiffre
   se déforme et l'effet devient un gadget. */
@keyframes priceTilt{
  0%, 76%, 100% { transform:perspective(620px) rotateX(0deg) translateY(0); }
  84%           { transform:perspective(620px) rotateX(5.5deg) translateY(-2px); }
  92%           { transform:perspective(620px) rotateX(-2deg) translateY(1px); }
}

.pricing__once{
  align-self:flex-end;
  margin-bottom:10px;
  margin-left:6px;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(239,237,231,.5);
}
.pricing__compare{
  margin:12px 0 34px;
  font-size:13.5px;
  color:rgba(239,237,231,.5);
}
.pricing__compare s{ color:rgba(239,237,231,.72); text-decoration-thickness:1px; }

.pricing__list{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  text-align:left;
  display:grid;
  gap:1px;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.07);
}
.pricing__list li{
  position:relative;
  padding:14px 18px 14px 46px;
  background:rgba(255,255,255,.028);
  font-size:14.5px;
  color:rgba(239,237,231,.88);
}
.pricing__list li::before{
  content:'';
  position:absolute;
  left:20px; top:50%;
  width:12px; height:7px;
  margin-top:-5px;
  border-left:1.6px solid var(--gold-soft);
  border-bottom:1.6px solid var(--gold-soft);
  transform:rotate(-45deg);
}
.pricing__reassure{
  max-width:60ch;
  margin:22px auto 0;
  font-size:12px;
  line-height:1.6;
  color:rgba(239,237,231,.45);
  text-align:center;
  text-wrap:balance;
}
.pricing__reassure svg{
  display:inline-block;
  width:13px; height:13px;
  margin-right:6px;
  vertical-align:-2px;
}


/* Bonus offert — dans la carte tarif (fond sombre) */
.bonus{
  position:relative;
  margin:0 0 26px;
  padding:22px 20px 16px;
  border:1px dashed rgba(216,198,168,.42);
  border-radius:var(--radius);
  background:rgba(168,131,78,.10);
  text-align:left;
}
.bonus__flag{
  position:absolute;
  top:-9px; left:18px;
  padding:4px 11px;
  border-radius:100px;
  background:var(--gold-soft);
  color:#0B0B0C;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.bonus__body{ display:flex; align-items:flex-start; gap:13px; }
.bonus__gift{ width:25px; height:25px; flex:none; color:var(--gold-soft); margin-top:1px; }
.bonus__text{ min-width:0; }
.bonus__name{
  margin:0 0 5px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#FAF9F6;
  line-height:1.35;
}
.bonus__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:3px 10px;
  border-radius:100px;
  background:rgba(216,198,168,.16);
  font-size:11px;
  font-weight:650;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-soft);
  white-space:nowrap;
  vertical-align:2px;
}
.bonus__tag s{ color:rgba(239,237,231,.45); font-weight:500; letter-spacing:0; text-transform:none; }
.bonus__desc{ margin:0; font-size:13px; line-height:1.55; color:rgba(239,237,231,.62); }
.bonus__delivery{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;
  line-height:1.45;
  color:rgba(239,237,231,.52);
}
.bonus__delivery svg{ width:15px; height:15px; flex:none; }

/* Bonus offert — ligne du récapitulatif de paiement (fond clair) */
.co-summary__bonus{ display:flex; justify-content:space-between; gap:12px; }
.co-summary__bonus span{ color:var(--muted); }
.co-summary__bonus strong{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  color:var(--gold);
  font-weight:650;
  white-space:nowrap;
}
.co-summary__bonus s{ color:var(--muted-2); font-weight:400; }


/* ══ ANIMATIONS ═════════════════════════════════════════════════════════
   Cinq gestes seulement, placés là où ils servent la lecture :
   1. le titre du hero se lève ligne par ligne derrière un masque
   2. le hero recule doucement au défilement (parallaxe, piloté en JS)
   3. l'en-tête se resserre une fois qu'on a quitté le haut de page
   4. les avantages de l'offre apparaissent en cascade
   5. le bonus reçoit un unique reflet doré, puis plus rien
   ═════════════════════════════════════════════════════════════════════ */

/* 1. Titre du hero — les lignes montent derrière leur masque.
      On neutralise le fondu générique de .reveal pour piloter les lignes. */
.hero__title.reveal{
  opacity:1;
  transform:none;
  transition:none;
}
.hero__title .line{
  /* overflow:hidden sert au dévoilement ligne par ligne, mais il coupe aussi
     ce qui dépasse. Deux dépassements à couvrir :
       · en bas — la descendante du « g » italique PLUS son ombre portée
         diffuse, qui s'étend 13 px sous l'encre ;
       · sur les côtés — les déliés de l'italique sortent de leur chasse.
     Les marges négatives annulent tout effet sur la mise en page. */
  padding-bottom:.62em;
  margin-bottom:-.62em;
  padding-inline:.16em;
  margin-inline:-.16em;
}
.hero__title .line > span{
  transform:translateY(112%);
  transition:transform 1.15s var(--ease);
}
.hero__title.is-in .line > span{ transform:none; }
.hero__title.is-in .line:nth-child(2) > span{ transition-delay:.11s; }

/* 2. Parallaxe du hero : la translation est appliquée en JS, on ne pose
      ici que le lissage et l'indice de composition. */
.hero__inner{ will-change:transform, opacity; }

/* 3. En-tête resserré au défilement */
.header__inner{ transition:height .55s var(--ease); }
.header.is-stuck .header__inner{ height:62px; }
.brand__mark{ transition:transform .55s var(--ease); }
.header.is-stuck .brand__mark{ transform:scale(.9); }

/* 4. Avantages de l'offre en cascade */
.pricing__list li{
  opacity:0;
  transform:translateY(9px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.pricing__card.is-in .pricing__list li{ opacity:1; transform:none; }
.pricing__card.is-in .pricing__list li:nth-child(1){ transition-delay:.22s; }
.pricing__card.is-in .pricing__list li:nth-child(2){ transition-delay:.29s; }
.pricing__card.is-in .pricing__list li:nth-child(3){ transition-delay:.36s; }
.pricing__card.is-in .pricing__list li:nth-child(4){ transition-delay:.43s; }
.pricing__card.is-in .pricing__list li:nth-child(5){ transition-delay:.50s; }
.pricing__card.is-in .pricing__list li:nth-child(6){ transition-delay:.57s; }

/* 5. Reflet doré du bonus — une seule fois, à l'entrée dans le champ.
      Le dégradé glisse par background-position : rien ne déborde du bloc,
      l'étiquette « En cadeau » reste visible hors cadre. */
.bonus::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg, transparent 42%, rgba(216,198,168,.15) 50%, transparent 58%);
  background-size:260% 100%;
  background-position:160% 0;
  background-repeat:no-repeat;
  pointer-events:none;
}
.pricing__card.is-in .bonus::after{
  animation:bonusSweep 9s cubic-bezier(.45,0,.3,1) 1s infinite;
}
/* Cycle de 9 s : traversée lente de 4,5 s, puis 4,5 s de repos. */
@keyframes bonusSweep{
  0%       { background-position:160% 0; }
  50%,100% { background-position:-70% 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero__title em, .pricing__metal{ animation:none !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; transition:none !important; }
  .hero__inner{ transform:none !important; opacity:1 !important; }
  .pricing__list li{ opacity:1 !important; transform:none !important; }
  .bonus::after{ display:none; }
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════ */
.faq{
  padding:clamp(64px, 9vw, 120px) 0;
  background:var(--paper);
  border-top:1px solid var(--line-2);
}
.faq__inner{
  display:grid;
  grid-template-columns:minmax(240px, .85fr) 1.15fr;
  gap:clamp(32px, 6vw, 80px);
  align-items:start;
}
.faq .sec-head{ margin-bottom:0; position:sticky; top:100px; }

.faq__list{ border-top:1px solid var(--line-2); }
.qa{ border-bottom:1px solid var(--line-2); }
.qa__q{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  background:none;
  border:none;
  text-align:left;
  font-size:16.5px;
  font-weight:550;
  letter-spacing:-.01em;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s;
}
.qa__q:hover{ color:var(--gold); }
.qa__ico{
  position:relative;
  flex:none;
  width:22px; height:22px;
  margin-top:2px;
}
.qa__ico::before,
.qa__ico::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:13px; height:1.5px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--ease), opacity .35s;
}
.qa__ico::after{ transform:translate(-50%,-50%) rotate(90deg); }
.qa.is-open .qa__ico::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }
.qa__a{
  overflow:hidden;
  height:0;
  transition:height .55s var(--ease);
}
.qa__a > div{
  padding:0 40px 26px 0;
  font-size:14.8px;
  line-height:1.68;
  color:var(--muted);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.qa.is-open .qa__a > div{ opacity:1; transform:none; }

/* ══ CTA FINAL ═════════════════════════════════════════════════════════ */
.final{
  padding:clamp(70px, 10vw, 130px) 0;
  background:var(--paper-2);
  text-align:center;
}
.final__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 5.4vw, 60px);
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--ink);
  margin:0 0 32px;
}
.final__title em{
  font-style:italic;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */
.footer{
  padding:clamp(48px, 6vw, 72px) 0 calc(clamp(32px, 4vw, 48px) + var(--safe-b) + var(--dock-h));
  background:var(--ink);
  color:rgba(239,237,231,.55);
}
.footer__inner{ display:grid; gap:28px; }
.footer__brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer__logo{
  width:64px; height:64px;
  border-radius:14px;
  flex:none;
}
.footer__brand p{
  margin:0;
  font-family:var(--serif);
  font-size:19px;
  color:#FAF9F6;
  letter-spacing:-.01em;
}
.footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  padding-block:22px;
  border-block:1px solid rgba(255,255,255,.09);
  font-size:14px;
}
.footer__nav a{ transition:color .3s; }
.footer__nav a:hover{ color:#FAF9F6; }
.footer__legal{
  margin:0;
  font-size:11.5px;
  line-height:1.7;
  color:rgba(239,237,231,.34);
  max-width:80ch;
}

/* ══ BARRE CTA MOBILE ══════════════════════════════════════════════════ */
.dockbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px max(16px, var(--safe-l)) calc(12px + var(--safe-b)) max(16px, var(--safe-r));
  background:rgba(250,249,246,.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  transform:translateY(120%);
  transition:transform .55s var(--ease);
}
.dockbar.is-up{ transform:none; }
.dockbar__info{ display:flex; flex-direction:column; line-height:1.25; }
.dockbar__info strong{
  font-family:var(--serif);
  font-size:22px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.dockbar__info span{ font-size:11px; color:var(--muted-2); letter-spacing:.03em; }
.dockbar .btn{ flex:1; max-width:230px; }

/* ══ 9. MODALES ════════════════════════════════════════════════════════ */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(11,11,12,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.modal.is-open .modal__scrim{ opacity:1; }

.modal__panel{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:min(88vh, 900px);
  background:var(--paper);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(24px) scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.modal.is-open .modal__panel{ opacity:1; transform:none; }
.modal__panel--checkout{ max-width:520px; }

.modal__body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:clamp(26px, 4vw, 40px);
}

.modal__close{
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  display:grid; place-items:center;
  width:38px; height:38px;
  border:none;
  border-radius:50%;
  background:rgba(244,242,237,.9);
  backdrop-filter:blur(8px);
  color:var(--ink);
  cursor:pointer;
  transition:background .3s, transform .4s var(--ease);
}
.modal__close svg{ width:16px; height:16px; }
.modal__close:hover{ background:var(--line); transform:rotate(90deg); }

/* Contenu fiche produit */
.pm-hero{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  padding-right:44px; /* dégage la zone du bouton de fermeture */
}
.pm-mark{
  display:grid; place-items:center;
  width:58px; height:58px;
  flex:none;
  border-radius:17px;
  background:var(--c);
  color:#fff;
  font-size:21px;
  font-weight:640;
  box-shadow:0 6px 20px color-mix(in srgb, var(--c) 30%, transparent);
}
.pm-hero h2{
  margin:0 0 4px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px, 4.6vw, 34px);
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.1;
}
.pm-hero p{ margin:0; font-size:13.5px; color:var(--muted); }

.pm-price{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 18px;
  margin-bottom:24px;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line-2);
}
.pm-price__old{
  font-family:var(--serif);
  font-size:28px;
  color:var(--muted-2);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  line-height:1;
}
.pm-price__arrow{ color:var(--gold-soft); }
.pm-price__free{
  font-family:var(--serif);
  font-size:28px;
  color:var(--ink);
  line-height:1;
}
.pm-price__unit{ font-size:12px; color:var(--muted-2); letter-spacing:.05em; margin-left:auto; }

.pm-text{ font-size:14.8px; line-height:1.68; color:var(--ink-soft); margin:0 0 26px; }

.pm-block{ margin-bottom:24px; }
.pm-block h3{
  margin:0 0 12px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.pm-perks{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pm-perks li{
  position:relative;
  padding-left:24px;
  font-size:14.2px;
  line-height:1.5;
  color:var(--ink-soft);
}
.pm-perks li::before{
  content:'';
  position:absolute;
  left:1px; top:7px;
  width:11px; height:6px;
  border-left:1.6px solid var(--c);
  border-bottom:1.6px solid var(--c);
  transform:rotate(-45deg);
}
.pm-methods{ display:flex; flex-wrap:wrap; gap:7px; }
.pm-method{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:100px;
  font-size:12.5px;
  color:var(--ink-soft);
  background:var(--paper-2);
}
.pm-cats{ display:flex; flex-wrap:wrap; gap:6px; }


/* Point d'information — même message sur toutes les fiches produit.
   Traité en encadré et non en .pm-block : c'est une précision de vente,
   pas une caractéristique du service, la distinction doit se voir. */
.pm-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:24px;
  padding:15px 16px;
  border:1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 7%, transparent);
}
.pm-note svg{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--gold); }
.pm-note h3{
  margin:0 0 4px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.pm-note p{
  margin:0;
  font-size:13.4px;
  line-height:1.58;
  color:var(--ink-soft);
}

.pm-cta{
  padding-top:22px;
  border-top:1px solid var(--line-2);
}
.pm-cta p{
  margin:0 0 14px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

/* ══ FORMULAIRE ════════════════════════════════════════════════════════ */
.co-head{ margin-bottom:26px; }
.co-head .kicker{ margin-bottom:10px; }
.co-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(27px, 5vw, 36px);
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 14px;
  line-height:1.1;
}
.co-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line-2);
}
.co-price span{
  font-family:var(--serif);
  font-size:30px;
  color:var(--ink);
  line-height:1;
}
.co-price em{ font-style:normal; font-size:12px; color:var(--muted); letter-spacing:.03em; }

.form{ display:grid; gap:16px; }
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{ display:grid; gap:7px; }
.field label{
  font-size:13px;
  font-weight:550;
  color:var(--ink);
  letter-spacing:-.005em;
}
.opt{ font-weight:400; color:var(--muted-2); font-size:11.5px; }
.field input,
.field select{
  width:100%;
  height:52px;
  padding:0 16px;
  font-family:inherit;
  font-size:16px; /* ≥16px : pas de zoom auto iOS */
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:13px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2378787F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:19px;
  padding-right:44px;
}
.field input::placeholder{ color:var(--muted-2); }
.field input:focus,
.field select:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(11,11,12,.05);
}
.field input:-webkit-autofill{ -webkit-box-shadow:0 0 0 40px var(--paper) inset; }
.field__hint{ font-size:12px; color:var(--muted-2); line-height:1.45; }
.field__err{
  display:none;
  font-size:12.2px;
  color:#C0392B;
  line-height:1.4;
}
.field.has-error input,
.field.has-error select{
  border-color:#E0A9A2;
  box-shadow:0 0 0 4px rgba(192,57,43,.07);
}
.field.has-error .field__err,
.field__err.is-shown{ display:block; }

.check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  padding:2px 0;
  -webkit-tap-highlight-color:transparent;
}
.check input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}
.check__box{
  display:grid;
  place-items:center;
  width:22px; height:22px;
  flex:none;
  margin-top:1px;
  border:1.5px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .2s;
}
.check__box svg{ width:13px; height:13px; }
.check input:checked + .check__box{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper-2);
}
.check input:focus-visible + .check__box{ outline:2px solid var(--ink); outline-offset:3px; }
.check__text{ font-size:13.2px; line-height:1.55; color:var(--muted); }
.check__text a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

.co-summary{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border-radius:var(--radius);
  background:var(--paper-2);
  border:1px solid var(--line-2);
  font-size:14px;
}
.co-summary > div{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.co-summary strong{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.co-summary__total{
  padding-top:10px;
  border-top:1px solid var(--line);
}
.co-summary__total span{ color:var(--ink); font-weight:550; }
.co-summary__total strong{ font-size:17px; }

/* Surtout pas de display:flex ici : chaque fragment de texte et le <strong>
   deviendraient des boîtes distinctes, se repliant chacune de leur côté.
   Un bloc de texte centré, icône posée dans le fil, se comporte bien. */
.co-secure{
  max-width:60ch;
  margin:0 auto;
  font-size:12px;
  line-height:1.6;
  color:var(--muted-2);
  text-align:center;
  text-wrap:balance;
}
.co-secure svg{
  display:inline-block;
  width:13px; height:13px;
  margin-right:6px;
  vertical-align:-2px;
}
.co-secure strong{ white-space:nowrap; }
.co-secure strong{ color:var(--ink-soft); font-weight:600; }

.co-status{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  text-align:center;
  color:var(--muted);
}
.co-status.is-ok{ color:#1E7A4B; }
.co-status.is-ko{ color:#C0392B; }

/* Contenu légal */
.legal h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(25px, 4.6vw, 32px);
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 18px;
}
.legal h3{
  margin:22px 0 8px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.legal p{ margin:0 0 12px; font-size:14px; line-height:1.66; color:var(--muted); }
.legal ul{ margin:0 0 12px; padding-left:20px; font-size:14px; line-height:1.66; color:var(--muted); }
.legal li{ margin-bottom:6px; }
.legal a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ══ 10. RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width: 1080px){
  .faq__inner{ grid-template-columns:1fr; }
  .faq .sec-head{ position:static; margin-bottom:32px; }
}

@media (max-width: 900px){
  .nav{ display:none; }
  .burger{ display:block; }
  html{ scroll-padding-top:80px; }
}

@media (max-width: 700px){
  /* Le titre du hero a besoin de toute la largeur pour tenir en deux
     lignes. On resserre la gouttière ici seulement — les autres sections
     gardent la leur. La zone sûre de l'iPhone reste respectée. */
  .hero__inner{
    padding-inline:max(13px, var(--safe-l));
    padding-inline-end:max(13px, var(--safe-r));
  }

  /* Hiérarchie téléphone : le titre domine, l'accroche s'efface.
     À 12vw le titre passe sur trois lignes — c'est voulu, il occupe
     l'écran. Le masque du « g » est en em : il suit la taille. */
  .hero__title{ font-size:12vw; }
  .hero__lead{ font-size:14px; line-height:1.6; }

  .header__inner{ height:66px; }
  .header__actions .btn--sm{ display:none; }
  .hero{ padding-top:calc(112px + var(--safe-t)); }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }


  .form__row{ grid-template-columns:1fr; }

  .dockbar{ display:flex; }
  :root{ --dock-h:82px; }

  /* Cibles tactiles confortables (≥44px) */
  .footer__nav{ gap:0 22px; }
  .footer__nav a{ padding-block:11px; }
  .brand{ padding-block:6px; }

  .modal{ padding:0; align-items:flex-end; }
  .modal__panel{
    max-width:none;
    max-height:92dvh;
    border-radius:26px 26px 0 0;
    transform:translateY(100%) scale(1);
  }
  .modal.is-open .modal__panel{ transform:none; }
  .modal__body{
    padding:32px 20px calc(28px + var(--safe-b));
  }
  .modal__panel::before{
    content:'';
    position:absolute;
    top:9px; left:50%;
    transform:translateX(-50%);
    width:38px; height:4px;
    border-radius:100px;
    background:var(--line);
    z-index:3;
  }
  .modal__close{ top:14px; right:12px; width:44px; height:44px; }
  .modal__close svg{ width:17px; height:17px; }

  .qa__a > div{ padding-right:0; }
}

@media (max-width: 420px){
  :root{ --pad:18px; }
  .pager{ gap:5px; }
  .pager__btn{ min-width:42px; height:42px; padding:0 9px; font-size:14px; }
  .bonus__tag{ margin-left:0; margin-top:6px; display:flex; width:fit-content; }
  .bonus__name{ display:flex; flex-direction:column; }
  .card{ padding:20px; }
  .pm-price__unit{ margin-left:0; width:100%; }
}

/* Écrans très larges */
@media (min-width: 1500px){
  :root{ --shell:1280px; }
}

/* Confort tactile : neutralise les états :hover collants sur iOS */
@media (hover: none){
  .btn:hover{ transform:none; box-shadow:none; }
  .card:hover{ transform:none; box-shadow:none; border-color:var(--line); }
  .card:hover .card__mark{ transform:none; }
  .card:hover .card__go{ transform:none; background:transparent; color:var(--ink); border-color:var(--line); }
  .card:hover .badge-free{ background:rgba(11,11,12,.05); color:var(--ink); }
  .step:hover{ transform:none; box-shadow:none; }
  .card:active{ transform:scale(.985); }
  .chip:hover{ transform:none; box-shadow:none; border-color:var(--line); }
}

/* Impression */
@media print{
  .header,.dockbar,.marquee,.modal,.mobilemenu,.progress{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
}