/* ============================================================
   Sauver Les Others — campagne d'abonnement
   Design tokens (subset of the Les Others design system actually
   used by this page) + page styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face{font-family:"ABC Monument Grotesk";src:url("fonts/ABCMonumentGrotesk-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Monument Grotesk";src:url("fonts/ABCMonumentGrotesk-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Monument Grotesk";src:url("fonts/ABCMonumentGrotesk-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* NOTE: source file is named "for-sancyunlicensedtrial-medium.otf" — confirm a production
   license is in hand for Sancy before shipping; swap this file if a licensed one arrives. */
@font-face{font-family:"Sancy";src:url("fonts/Sancy-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Stefan";src:url("fonts/Stefan-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* colors */
  --lo-black:#1B1B1B;
  --lo-smoke:#F5F5F5;
  --lo-white:#FFFFFF;
  --lo-gray:#919191;
  --border-subtle:#DDDDDD;
  --text-body:#1E1E1E;
  --text-muted:#919191;
  --blue:#2E63D4;

  /* fonts */
  --font-sans:"ABC Monument Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Sancy",var(--font-sans);
  --font-eyebrow:"Stefan",var(--font-sans);
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* rhythm */
  --gap:200px;
  --gut:64px;
  --off-gut:80px;

  --h:clamp(48px,min(8.6vw,13.2vh),124px);
}

@media (max-width:1023px){
  :root{ --gap:140px; }
}
@media (max-width:679px){
  :root{
    --gap:100px;
    --gut:28px;
    --off-gut:28px;
    --h:clamp(46px,min(15.5vw,10vh),88px);
  }
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans),Arial,sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:1.3;
  color:var(--lo-black);
  background:#f2f1eb;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:var(--lo-black);text-decoration:none;transition:opacity .2s;}
a:hover{opacity:.55;}

.eyebrow{
  font-family:var(--font-eyebrow);
  font-weight:400;
  font-size:20px;
  line-height:1.15;
  letter-spacing:0;
  color:var(--blue);
  white-space:pre-line;
}
.h2{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(32px,7vw,55px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:27px;
  letter-spacing:-.015em;
}
/* 1.3 partout sur le texte courant : l'interlignage retenu sur la section
   « Répartition des coûts », qui sert de référence. */
.body-copy{
  font-size:18px;
  line-height:1.3;
  color:var(--text-body);
}
.btn{
  display:inline-block;
  background:var(--lo-white);
  color:var(--blue);
  border:1.5px solid var(--blue);
  border-radius:2px;
  padding:14px 30px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:21px;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease,opacity .2s ease;
}
.btn:hover{
  background:var(--lo-black);
  color:#f2f1eb;
  border-color:var(--lo-black);
  opacity:1;
}

.section{
  margin:var(--gap) auto 0;
  padding:0 var(--gut);
}
.section--narrow{ max-width:760px; text-align:center; }
.section--manifesto{ max-width:860px; text-align:center; }
/* Stefan, comme les eyebrow : le texte est une adresse au lecteur, pas du
   corps de texte. Ligne un peu plus aérée, la police est étroite. */
.section--manifesto p{
  font-family:var(--font-eyebrow);
  font-weight:400;
  font-size:clamp(19px,2.4vw,26px);
  line-height:1.25;
  letter-spacing:0;
  color:var(--blue);
}
.section--manifesto p + p{ margin-top:1.25em; }
.section--video{ max-width:1000px; }
.section--countdown{ max-width:1000px; }
.section--offers{ max-width:1080px; padding-left:var(--off-gut); padding-right:var(--off-gut); }
.section--costs{ padding-top:0; }
.section--fuji{ max-width:1390px; }
.section--about{ padding-top:0; }
.section--faq{ max-width:1000px; }
.section--recits{ max-width:1200px; }
.section--finalcta{ max-width:1000px; text-align:center; }

.head-block{ text-align:center; max-width:720px; margin:0 auto; }
.head-block--wide{ max-width:880px; }

/* ---------- sticky subscribe bar ---------- */
.stickybar{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:90;
  /* Pas de fond : seul le bouton se voit. La barre reste pleine largeur, donc
     elle laisse passer les clics — sans ça elle intercepterait tout ce qui se
     trouve derrière elle sur toute la largeur de l'écran. */
  pointer-events:none;
  transform:translateY(110%);
  transition:transform .3s ease;
}
.stickybar .btn{ pointer-events:auto; }
.stickybar.is-visible{ transform:translateY(0); }
.stickybar__inner{
  max-width:1390px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 25px;
  gap:28px;
}
@media (max-width:679px){
  .stickybar__inner{ flex-direction:column; align-items:stretch; padding:10px 20px 12px; gap:10px; }
  .stickybar .btn{ width:100%; }
}
/* Rien en collant sur grand écran : le CTA à portée de pouce n'a de sens
   qu'au toucher, et les CTA de la page suffisent au-delà. */
@media (min-width:1024px){
  .stickybar{ display:none; }
}

/* ---------- hero ---------- */
.hsec{ min-height:100dvh; display:flex; flex-direction:column; padding:2.2vh 34px 2.6vh; background:#f2f1eb; position:relative; overflow-x:clip; }
.hwrap{ max-width:1180px; width:100%; margin:0 auto; display:flex; flex-direction:column; flex:1; }
.hmeta{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-family:var(--font-display); font-weight:500; font-size:14px; letter-spacing:-.01em; text-transform:uppercase; color:var(--blue); }
.hmeta span{ white-space:nowrap; }
.hbody{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
.htitle{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:-.035em;
  line-height:.88; text-align:center; position:relative; z-index:1; color:transparent;
  background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
  background-size:200px 200px; background-blend-mode:multiply;
  -webkit-background-clip:text; background-clip:text;
  font-size:var(--h); padding:.25em 0 1em; margin:-.25em 0 -1em;
}
.hbig{ display:inline-block; font-size:1.45em; line-height:.8; letter-spacing:-.04em; }
.hcover{ position:relative; z-index:2; width:clamp(180px,min(24vw,34vh),302px); height:auto; aspect-ratio:674/745; margin-top:calc(-1 * var(--h) * .544); margin-bottom:clamp(18px,4.4vh,38px); transform:rotate(-10.78deg); filter:drop-shadow(0 24px 34px rgba(27,27,27,.22)); }
.hobj{ font-family:var(--font-eyebrow); font-size:clamp(17px,min(2.4vw,3.4vh),30px); line-height:1.1; letter-spacing:.02em; text-transform:uppercase; text-align:center; text-wrap:pretty; max-width:24ch; margin:0; color:var(--blue); }
.hcta{
  margin-top:clamp(22px,5.6vh,54px); padding:clamp(11px,1.6vh,18px) clamp(26px,3vw,38px);
  font-size:clamp(19px,min(2.2vw,3vh),27px);
  transform:rotate(-1.2deg);
  transform-origin:center;
}
.hcta:hover{ transform:rotate(0deg); }
@media (max-width:679px){
  .hbig{ font-size:1em; line-height:.9; letter-spacing:-.035em; }
  .hobj{ font-size:clamp(19px,5.2vw,26px); max-width:22ch; }
  .hsec{ padding:2.4vh 20px 3.4vh; }
  .htitle{ text-wrap:balance; }
  .hcover{ width:min(52vw,26vh); margin-top:clamp(18px,3vh,28px); margin-bottom:22px; }
}

/* ---------- video ---------- */
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; margin-top:48px; overflow:hidden; background:#1B1B1B; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- countdown + paliers ---------- */
.countdown-label{ font-size:18px; color:var(--blue); text-align:center; }
.countdown{
  display:flex; justify-content:center; align-items:flex-start; gap:0; margin-top:14px;
}
.countdown__item{ min-width:140px; text-align:center; }
/* Chiffres à chasse fixe : sans ça la ligne se décale à chaque seconde,
   « 11 » n'occupant pas la même largeur que « 20 ». */
.countdown__num{ font-family:var(--font-display); font-weight:500; font-size:clamp(76px,19vw,132px); line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--blue); }
.countdown__sep{ width:52px; text-align:center; font-family:var(--font-display); font-weight:500; font-size:clamp(76px,19vw,132px); line-height:.9; color:var(--blue); }
.countdown__unit{ font-family:var(--font-display); font-weight:500; font-size:19px; letter-spacing:-.01em; margin-top:10px; color:var(--blue); }
@media (max-width:679px){
  .countdown{ display:grid; grid-template-columns:1fr 1fr; gap:14px 4px; }
  .countdown__item{ min-width:0; }
  .countdown__sep{ display:none; }
}

.gauge{ max-width:980px; margin:46px auto 0; }
.gauge__row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-eyebrow); font-weight:400; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.gauge__row span{ white-space:nowrap; }
.gauge__track{ height:13.5px; border:1.5px solid var(--blue); border-radius:1px; padding:2px; }
.gauge__fill{ height:100%; width:0%; background:var(--blue); transition:width 1.6s cubic-bezier(.2,.7,.2,1); }
.gauge.is-visible .gauge__fill{ width:var(--gauge-pct,0%); }

.perks{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:24px; margin:34px 0 0; padding-bottom:52px; }
@media (max-width:679px){ .perks{ gap:12px; margin:30px 0 0; padding-bottom:46px; } }
.perk{ flex:1 1 0; min-width:0; max-width:260px; opacity:.42; transition:opacity .5s ease; }
.perk.is-unlocked{ opacity:1; }
@media (max-width:679px){ .perk{ flex:0 1 calc(50% - 6px); max-width:none; } }
.perk__label{ font-family:var(--font-eyebrow); font-size:20px; line-height:1.15; letter-spacing:0; color:var(--blue); }
/* Deux lignes sur mobile pour toutes les cartes : à hauteur de libellé égale,
   les vignettes démarrent au même niveau. */
@media (max-width:679px){ .perk__label-n{ display:block; } }
.perk__img{ width:100%; aspect-ratio:3/4; margin-top:12px; background-color:var(--lo-smoke); background-size:cover; background-position:center; filter:grayscale(1); }
.perk.is-unlocked .perk__img{ filter:none; }
.perk__title{ font-size:15px; line-height:1.3; margin-top:10px; max-width:100%; text-wrap:pretty; }

/* ---------- offers ---------- */
.offers-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:50px; }
@media (max-width:1023px){ .offers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:679px){ .offers-grid{ grid-template-columns:minmax(0,1fr); } }
.offer{ background:var(--lo-smoke); border-radius:10px; padding:18px; display:flex; flex-direction:column; }
.offer__media{ position:relative; background:transparent; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.offer__media img{ width:72%; height:86%; object-fit:contain; }
.offer__media--pair{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; }
.offer__media--pair img{ width:44%; height:82%; object-fit:contain; }
.offer__name{ text-align:center; font-size:clamp(34px,4.4vw,40px); line-height:1.02; letter-spacing:-.035em; margin-top:22px; font-family:var(--font-display); font-weight:500; }
.offer__tagline-row{ display:flex; justify-content:center; margin-top:12px; }
/* Plus de capsule : positionnement et cadence sont du texte, en Stefan bleu. */
.pill{ font-family:var(--font-eyebrow); font-size:17px; color:var(--blue); background:none; border-radius:0; padding:0; }
.offer__note{ margin-top:20px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
.offer__items{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.offer__items li{ font-size:17px; line-height:1.3; display:flex; gap:10px; align-items:flex-start; }
.offer__items li::before{ content:""; flex:none; width:5px; height:5px; margin-top:8px; border-radius:50%; background:var(--lo-black); }
.offer__price{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.offer__price-big{ font-family:var(--font-sans); font-weight:500; font-size:24px; letter-spacing:-.01em; color:var(--lo-black); }
/* Un point de moins que le libellé de positionnement : la cadence accompagne
   le prix, elle ne le concurrence pas. */
.offer__cadence.pill{ font-size:16px; line-height:1.2; white-space:nowrap; }
/* Même bouton dans les cartes d'offre et dans la barre collante. */
.offer .btn,
.stickybar .btn{ text-align:center; padding:14px 15px; font-size:21px; }
.offer .btn{ margin-top:14px; }

/* ---------- costs / qui sommes-nous shared text blocks ---------- */
.text-block{ max-width:720px; margin:0 auto; }
.text-block .h2{ text-align:center; margin:0; }
.text-block .h3{ margin:64px 0 0; }
.text-block p{ margin:18px 0 0; }
.text-block p + p{ margin-top:44px; }
/* Puces alignées sur la marge du bloc : le texte reprend à la même colonne
   quelle que soit la longueur de la puce. D'autres entrées viendront. */
.text-block .text-list{ margin:26px 0 0; padding:0; list-style:none; }
.text-block .text-list li{ position:relative; padding-left:1.1em; }
.text-block .text-list li::before{ content:"•"; position:absolute; left:0; }
.text-block .text-list li + li{ margin-top:18px; }
.text-block .text-list strong{ font-weight:700; color:var(--lo-black); }
.text-photo{ height:420px; margin:44px 0 0; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ---------- fuji contest ---------- */
.fuji{ background:var(--lo-smoke); display:flex; align-items:stretch; gap:0; flex-wrap:wrap; overflow:hidden; }
.fuji__copy{ flex:1; min-width:280px; padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:679px){ .fuji__copy{ padding:32px 22px; } }
.fuji__copy p{ font-size:16px; color:var(--text-body); margin-top:14px; }
.fuji__copy .btn{ align-self:flex-start; margin-top:26px; padding:16px 30px; font-size:18px; }
.fuji__img{ flex:1; min-width:280px; flex-grow:1; background-size:cover; background-position:center; background-repeat:no-repeat; min-height:320px; }
@media (max-width:679px){ .fuji__img{ min-height:240px; } }

/* ---------- carousel ---------- */
.carousel{ margin:34px 0 0; }
.carTrack{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0; padding:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carTrack::-webkit-scrollbar{ display:none; }
.carTrack__slide{ flex:0 0 calc(33.333% - 8px); scroll-snap-align:start; aspect-ratio:3/4; background-color:var(--lo-smoke); background-size:cover; background-position:center; }
@media (max-width:679px){ .carTrack__slide{ flex:0 0 82%; } }
.carDots{ display:none; justify-content:center; gap:7px; margin-top:12px; }
@media (max-width:679px){ .carDots{ display:flex; } }
.carDots__dot{ width:7px; height:7px; border-radius:50%; background:rgba(27,27,27,.2); transition:background .25s ease; }
.carDots__dot.is-active{ background:var(--blue); }

/* ---------- engagements ---------- */
.engagements{ display:flex; flex-direction:column; gap:26px; margin:28px 0 0; }
.engagement{ display:flex; gap:18px; }
.engagement__num{ flex:none; width:30px; height:30px; border:1px solid rgba(0,0,0,.35); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; }
.engagement__body{ font-size:17px; line-height:1.3; color:var(--text-body); margin:0; }
.engagement__body strong{ font-weight:500; color:var(--lo-black); }
.about-cta{ display:flex; justify-content:center; margin:56px 0 0; }
.about-cta .btn{ display:inline-flex; align-items:center; gap:10px; font-size:18px; padding:17px 32px; }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:60px; align-items:start; }
@media (max-width:1023px){ .faq-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }
.faq-head{ position:sticky; top:90px; }
@media (max-width:1023px){ .faq-head{ position:static; } }
.faq-item{ border-bottom:.5px solid var(--border-subtle); }
.faq-item__btn{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; background:none; border:none; cursor:pointer; text-align:left; padding:24px 0; font-family:inherit; font-size:20px; color:var(--lo-black); }
.faq-item__icon{ flex:0 0 auto; transition:transform .3s; }
.faq-item.is-open .faq-item__icon{ transform:rotate(180deg); }
.faq-item__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-item.is-open .faq-item__panel{ grid-template-rows:1fr; }
.faq-item__panel-inner{ overflow:hidden; }
.faq-item__answer{ padding-bottom:24px; font-size:17px; line-height:1.3; color:var(--text-body); max-width:760px; }

/* ---------- récits ---------- */
.recits-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:64px; }
@media (max-width:1023px){ .recits-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:679px){ .recits-grid{ grid-template-columns:minmax(0,1fr); } }
.recit__img{ aspect-ratio:3/4; width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; }
.recit__title{ font-weight:500; font-size:25px; letter-spacing:-.01em; text-transform:none; margin-top:26px; font-family:var(--font-display); }
.recit__body{ font-size:16px; line-height:1.3; color:var(--text-body); margin-top:16px; }

/* ---------- final CTA ---------- */
.finalcta__gauge{ max-width:560px; margin:34px auto 0; }
.finalcta__gauge-row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-eyebrow); font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--blue); }
.finalcta__track{ margin-top:12px; height:22px; border:2px solid var(--blue); border-radius:1px; padding:3px; }
.finalcta__fill{ height:100%; width:0%; background:var(--blue); transition:width 1.6s cubic-bezier(.2,.7,.2,1); }

/* ---------- footer ---------- */
.site-footer{ margin-top:var(--gap); background:transparent; padding:0 25px 130px; }
.site-footer img{ width:100%; max-width:1160px; margin:0 auto; }