/* ============================================================
   LÉRA CONCEPT — Composants & sections
   ============================================================ */

/* ============================================================
   LOGO — la vraie identité de l'agence (L rouge + LÉRA CONCEPT).
   Dans le header il porte une pastille claire, puisque la barre
   est transparente ; dans le footer c'est la version blanche, nue.
   ============================================================ */
.logo{display:inline-flex;align-items:center;flex:none;
  height:42px;padding:0 18px;border-radius:100px;background:#ebe6f8;
  transition:background-color .35s var(--e-out),transform .35s var(--e-out)}
.logo img{height:19px;width:auto;background:none}
.logo:hover{background:#fff;transform:translateY(-1px)}
.logo--inv{height:auto;padding:0;background:none;border-radius:0}
.logo--inv img{height:38px}
.logo--inv:hover{background:none;transform:none;opacity:.85}
@media(max-width:420px){
  .logo{padding:0 12px}
  .logo img{height:16px}
}

/* ============================================================
   NAVIGATION — pastille « Menu » ancrée en haut, coins concaves,
   panneau déroulant sombre. Géométrie relevée sur la référence :
   pastille 42px (52 sur bureau), rayon 0 0 20px 20px, coins 18×18,
   barre 58px (76), panneau à y=70 (62), rayon 20 (30).
   Le panneau fermé occupe encore de la hauteur : sans pointer-events:none
   le header intercepterait les clics sur le contenu.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;pointer-events:none}
.nav__bar,.nav__panel{pointer-events:auto}

/* Barre 100 % transparente : seuls le logo, la pastille et le bouton
   d'appel portent un fond. Le contenu défile librement dessous. */
.nav__bar{background:transparent;height:58px}
.nav__in{position:relative;display:flex;align-items:center;height:58px}
.nav__side{display:flex;align-items:center;min-width:0}
.nav__side--r{display:none;justify-content:flex-end}
.nav__mid{display:flex;position:static}

/* la pastille */
.nav__toggle{
  position:absolute;top:0;right:max(var(--gut),22px);height:42px;
  display:inline-flex;align-items:center;gap:7px;
  padding:0 24px;border-radius:0 0 20px 20px;
  background:var(--ink);color:#fff;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;line-height:1;
  transition:background-color .35s var(--e-out)}
.nav__toggle:hover{background:#000}
.nav__lbl{display:block;min-width:3.4em;text-align:left}

/* les deux coins concaves, tracés SVG identiques à la référence */
.nav__corner{position:absolute;top:0;width:18px;height:18px;pointer-events:none}
.nav__corner svg{width:100%;height:100%;display:block}
.nav__corner--l{left:-17px}
.nav__corner--r{right:-17px}
.nav__corner path{fill:var(--ink);transition:fill .35s var(--e-out)}
.nav__toggle:hover .nav__corner path{fill:#000}

/* l'icône : 4 points qui pivotent à l'ouverture */
.nav__dots{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:13px;flex:none;
  transition:transform .5s var(--e-spring)}
.nav__dots i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
.is-menu .nav__dots{transform:rotate(45deg)}

/* bouton d'appel */
.nav__cta{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:6px 24px 6px 6px;border-radius:100px;
  background:#ebe6f8;color:var(--ink);
  font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color .35s var(--e-out),transform .35s var(--e-out),color .35s}
.nav__cta:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.nav__cta-ic{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;flex:none;transition:background-color .35s,color .35s}
.nav__cta-ic svg{width:18px;height:18px}
.nav__cta:hover .nav__cta-ic{background:var(--terracotta);color:#fff}

/* le panneau */
.nav__panel{
  position:relative;margin-top:12px;
  background:var(--ink);color:#fff;border-radius:20px;padding:30px;
  display:flex;flex-direction:column;gap:30px;
  max-height:calc(100dvh - 92px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-14px) scale(.985);transform-origin:100% 0;
  transition:opacity .4s var(--e-out),transform .55s var(--e-out),visibility .4s;
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.is-menu .nav__panel{opacity:1;visibility:visible;transform:none}

.nav__links{display:flex;flex-direction:column;align-items:center;gap:4px}
.nav__links a{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.75rem);line-height:1.85;letter-spacing:-.015em;
  color:#8b8b8b;transition:color .3s var(--e-out)}
.nav__links a:hover{color:#fff}
.nav__links a.is-active{color:var(--terracotta)}

.nav__rule{height:1px;background:rgba(255,255,255,.14);border:0;margin:0}
.nav__foot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.nav__foot>span{font-size:.86rem;font-weight:700}
.nav__soc{display:flex;gap:12px}
.nav__soc a{width:32px;height:32px;border-radius:50%;background:#2e2e2e;color:#fff;
  display:grid;place-items:center;transition:background-color .3s,transform .35s var(--e-spring)}
.nav__soc a svg{width:15px;height:15px}
.nav__soc a:nth-child(1):hover{background:var(--rose);color:var(--ink)}
.nav__soc a:nth-child(2):hover{background:var(--majorelle)}
.nav__soc a:nth-child(3):hover{background:var(--majorelle)}
.nav__soc a:nth-child(4):hover{background:var(--zellige)}
.nav__soc a:hover{transform:translateY(-2px)}
.nav__credit{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.5}
.nav__credit a{color:rgba(255,255,255,.72);font-weight:600}
.nav__credit a:hover{color:#fff}

/* le voile flouté */
.nav__scrim{position:fixed;inset:0;z-index:890;background:rgba(0,0,0,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--e-out),visibility .4s}
.is-menu .nav__scrim{opacity:1;visibility:visible}

/* variante bureau : trois colonnes, pastille centrée */
@media(min-width:1200px){
  .nav__bar{height:76px}
  .nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:flex-end;height:76px}
  .nav__side--r{display:flex}
  .nav__mid{align-self:start;justify-content:center}
  .nav__toggle{position:relative;top:auto;right:auto;height:52px;padding:0 40px;font-size:1rem;gap:6px}
  .nav__dots{width:12px;gap:2px}
  .nav__panel{width:min(400px,100%);margin:-14px auto 0;border-radius:30px;padding:40px;gap:26px}
  .nav__links a{font-size:1.6rem;line-height:1.8}
  .nav__credit{font-size:.8rem}
  .logo{height:52px;padding:0 22px}
  .logo img{height:23px}
}
@media(min-width:1200px) and (max-width:1340px){
  .nav__cta{font-size:.94rem;padding-right:20px}
}
@media(max-width:700px){
  .nav__toggle{padding:0 18px;font-size:.9rem}
  .nav__panel{padding:26px 20px;gap:22px}
  .nav__links a{font-size:1.15rem;line-height:1.75}
  .nav__foot{gap:14px}
  .nav__credit{font-size:.78rem}
}

/* ---------- HERO ---------- */
.hero{padding-top:clamp(7rem,13vw,9.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem);
  text-align:center;position:relative;overflow:clip}
.hero__in{display:flex;flex-direction:column;align-items:center;gap:1.8rem}
.hero__title{max-width:15ch;padding-top:.14em}
.hero__sub{max-width:52ch;font-size:var(--t-lead);color:var(--fg-soft);line-height:1.6}
@media(max-width:560px){.hero{padding-top:6.5rem}}

/* rangée de cartes inclinées */
.deck{display:flex;justify-content:center;align-items:stretch;gap:clamp(.5rem,1.3vw,1rem);
  margin-top:clamp(2rem,4vw,3rem);padding-bottom:.5rem}
.deck__card{position:relative;flex:1 1 0;max-width:270px;
  transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px));
  transition:transform .55s var(--e-spring)}
.deck__card:hover{transform:rotate(0deg) translateY(-10px) scale(1.03);z-index:5}
.deck__ph{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  box-shadow:var(--sh-card);background:#ddd;height:100%}
.deck__ph img{width:100%;height:100%;object-fit:cover}
.deck__chip{position:absolute;display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .6rem;border-radius:var(--r-pill);background:var(--white);
  font-size:.68rem;font-weight:700;box-shadow:var(--sh-2);white-space:nowrap;z-index:3}
.deck__chip i{width:13px;height:13px;border-radius:50%;flex:none;display:block}
.deck__chip--tl{top:-9px;left:10px}
.deck__chip--bl{bottom:12px;left:10px}
.deck__chip--tr{top:-9px;right:10px}
.deck__card--stat{background:var(--majorelle);color:#fff;border-radius:var(--r-lg);
  padding:1.2rem 1rem 1.4rem;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;justify-content:center;gap:.45rem;text-align:center}
.deck__card--stat b{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.4rem);
  letter-spacing:-.03em;line-height:1;display:block}
.deck__card--stat em{font-style:normal;font-size:.74rem;opacity:.88;line-height:1.35;display:block}
.deck__avs{display:flex;justify-content:center;margin-bottom:.35rem}
.deck__avs span{width:26px;height:26px;border-radius:50%;border:2px solid var(--majorelle);
  margin-left:-8px;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#fff}
.deck__avs span:first-child{margin-left:0}
@media(max-width:900px){.deck{flex-wrap:wrap}.deck__card{flex:1 1 44%;max-width:none}}
@media(max-width:560px){.deck__card:nth-child(n+4){display:none}.deck__card{flex:1 1 46%;--rot:0deg}}

/* bandeau plateformes */
.plats{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:1.5rem}
.plat{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .95rem;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);font-size:.82rem;font-weight:600;
  box-shadow:var(--sh-1);transition:transform .35s var(--e-spring)}
.plat:hover{transform:translateY(-3px)}
.plat i{width:15px;height:15px;border-radius:5px;flex:none;display:block}

/* ---------- TEXTE À SURLIGNAGES ---------- */
.punch{font-size:clamp(1.1rem,2.35vw,1.95rem);line-height:1.5;letter-spacing:-.025em;font-weight:700}
.punch p+p{margin-top:1em}
.punch .av{display:inline-flex;vertical-align:-.3em;margin:0 .12em}
.punch .av span{width:1.25em;height:1.25em;border-radius:50%;margin-left:-.34em;
  border:2px solid var(--paper);display:inline-grid;place-items:center;
  font-size:.4em;font-weight:800;color:#fff}
.punch .av span:first-child{margin-left:0}
.punch-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media(max-width:900px){.punch-grid{grid-template-columns:1fr}}

/* ---------- CARTES SERVICES EMPILÉES ---------- */
.stack{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.3rem)}
.stack__item{position:sticky;top:var(--st,104px)}
.scard{border-radius:var(--r-2xl);padding:clamp(1.3rem,2.5vw,2.3rem);color:var(--ink);
  box-shadow:var(--sh-card);position:relative;overflow:hidden;display:block}
.scard--majorelle{background:var(--majorelle);color:#fff}
.scard--safran{background:var(--safran)}
.scard--terracotta{background:var(--terracotta);color:#fff}
.scard--zellige{background:var(--zellige);color:#fff}
.scard--rose{background:var(--rose)}
.scard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem}
.scard__num{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--font-display);font-size:.68rem;
  transition:transform .5s var(--e-spring)}
.scard:hover .scard__num{transform:rotate(45deg) scale(1.08)}
.scard h3{font-size:clamp(1.2rem,2.3vw,1.85rem);letter-spacing:-.032em;line-height:1.14}
.scard__desc{font-size:.94rem;line-height:1.55;opacity:.88;max-width:54ch;margin-top:.65rem}
.scard__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.2rem,2.5vw,2.2rem);align-items:end;margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.scard__left{display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}
.scard__big{font-family:var(--font-display);font-size:clamp(1.8rem,4.2vw,3.2rem);
  letter-spacing:-.035em;line-height:.95}
.scard__big small{display:block;font-family:var(--font-body);font-size:.76rem;font-weight:600;
  letter-spacing:0;opacity:.8;margin-top:.5rem}
.scard__ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.scard__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.scard:hover .scard__ph img{transform:scale(1.04)}
@media(max-width:820px){.scard__body{grid-template-columns:1fr}.stack__item{position:static}}

/* ---------- ÉTUDE DE CAS ---------- */
.case{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1rem,2.5vw,2rem);align-items:center}
.case__ph{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-card);
  transform:rotate(-2.2deg);transition:transform .6s var(--e-spring)}
.case__ph:hover{transform:rotate(0)}
.case__ph img{width:100%;height:100%;object-fit:cover}
.case__info{background:var(--white);border-radius:var(--r-xl);padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:1rem}
.case__stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.case__stats b{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:-.03em;line-height:1;display:block;color:var(--terracotta)}
.case__stats span{font-size:.75rem;color:var(--fg-mute);line-height:1.35;display:block;margin-top:.35rem}
@media(max-width:820px){.case{grid-template-columns:1fr}}

/* galerie inclinée */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(.8rem,1.8vw,1.4rem)}
.tile{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--sh-2);transform:rotate(var(--rot,0deg));transition:transform .55s var(--e-spring)}
.tile:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.7))}
.tile__meta{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;z-index:2;color:#fff}
.tile__meta b{display:block;font-weight:700;font-size:1rem;letter-spacing:-.02em}
.tile__meta span{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:.22rem .6rem;border-radius:var(--r-pill);margin-bottom:.5rem;color:var(--ink)}

/* ---------- COMPARATIF ---------- */
.vs{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(.8rem,2vw,1.6rem);align-items:start}
.vs__col h4{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);
  font-weight:700;margin-bottom:1rem;padding-inline:.2rem}
.vs__col li{padding:.82rem .2rem;border-bottom:1px solid var(--line-inv);font-size:.9rem;
  color:rgba(255,255,255,.6);display:flex;gap:.6rem;align-items:flex-start;line-height:1.4}
.vs__col li:last-child{border-bottom:0}
.vs__col:first-child li{color:rgba(255,255,255,.82);font-weight:600}
.vs__col--me{background:var(--white);border-radius:var(--r-xl);padding:1.3rem;box-shadow:var(--sh-3)}
.vs__col--me h4{color:var(--fg-mute);display:flex;align-items:center;gap:.5rem}
.vs__col--me li{color:var(--ink);font-weight:600;border-color:var(--line)}
.vs__ic{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:.12em}
.vs__ic svg{width:10px;height:10px}
.vs__ic--y{background:var(--zellige);color:#fff}
.vs__ic--n{background:rgba(255,255,255,.09);color:rgba(255,255,255,.4)}
@media(max-width:820px){.vs{grid-template-columns:1fr}.vs__col:first-child{display:none}}

/* ---------- PROCESSUS : cartes à onglet ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.7rem,1.5vw,1.1rem);align-items:start}
.step{position:relative;padding-top:24px;transform:translateY(var(--ty,0px)) rotate(var(--rot,0deg));
  transition:transform .5s var(--e-spring)}
.step:hover{transform:translateY(-8px) rotate(0)}
.step__tab{position:absolute;top:0;left:50%;transform:translateX(-50%);
  padding:.26rem 1rem .75rem;border-radius:12px 12px 0 0;font-size:.68rem;
  font-family:var(--font-display);letter-spacing:-.01em}
.step__body{position:relative;border-radius:var(--r-lg);padding:1.2rem 1.1rem 1.4rem;min-height:200px;
  display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--sh-2);z-index:1}
.step__body h4{font-size:.98rem;letter-spacing:-.025em;line-height:1.2}
.step__body p{font-size:.82rem;line-height:1.5;opacity:.85}
.step--majorelle .step__body,.step--majorelle .step__tab{background:var(--majorelle);color:#fff}
.step--safran .step__body,.step--safran .step__tab{background:var(--safran);color:var(--ink)}
.step--zellige .step__body,.step--zellige .step__tab{background:var(--zellige);color:#fff}
.step--terracotta .step__body,.step--terracotta .step__tab{background:var(--terracotta);color:#fff}
.step--rose .step__body,.step--rose .step__tab{background:var(--rose);color:var(--ink)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.step{--rot:0deg;--ty:0px}}

/* ---------- TÉMOIGNAGES ---------- */
.revs{columns:3;column-gap:clamp(.8rem,1.6vw,1.2rem)}
.rev{break-inside:avoid;margin-bottom:clamp(.8rem,1.6vw,1.2rem);background:var(--white);
  border-radius:var(--r-xl);padding:clamp(1.2rem,2.2vw,1.6rem);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.9rem;transition:transform .45s var(--e-out)}
.rev:hover{transform:translateY(-4px)}
.rev__stars{display:inline-flex;gap:1px;color:var(--safran-text)}
.rev__stars svg{width:13px;height:13px}
.rev p{font-size:.94rem;line-height:1.55}
.rev__by{display:flex;align-items:center;gap:.7rem;padding-top:.85rem;border-top:1px solid var(--line)}
.rev__av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:.85rem}
.rev__by b{display:block;font-size:.89rem;letter-spacing:-.015em}
.rev__by em{display:block;font-style:normal;font-size:.75rem;color:var(--fg-mute)}
@media(max-width:900px){.revs{columns:2}}
@media(max-width:600px){.revs{columns:1}}

/* ---------- TARIFS ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem);align-items:stretch}
.plan{background:var(--white);border-radius:var(--r-2xl);padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:1.1rem;position:relative;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.plan--hi{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--sh-3)}
.plan--hi .plan__note,.plan--hi li{color:rgba(255,255,255,.68)}
.plan__tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--safran);
  color:var(--ink);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:var(--r-pill)}
.plan h3{font-size:1.02rem}
.plan__amt{display:block;white-space:nowrap;font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.035em;line-height:1}
.plan__amt small{display:block;white-space:normal;font-family:var(--font-body);font-size:.76rem;
  font-weight:600;letter-spacing:0;color:var(--fg-mute);margin-top:.5rem;line-height:1.35}
.plan--hi .plan__amt small{color:rgba(255,255,255,.5)}
.plan__note{font-size:.87rem;color:var(--fg-soft);line-height:1.5}
.plan__list{display:flex;flex-direction:column;gap:.55rem;flex:1}
.plan__list li{display:flex;gap:.55rem;font-size:.87rem;color:var(--fg-soft);line-height:1.45}
.plan__list svg{width:14px;height:14px;flex:none;margin-top:.24em;color:var(--zellige)}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:.65rem}
.faq__i{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:box-shadow .4s var(--e-out),border-color .4s}
.faq__i.is-open{box-shadow:var(--sh-2);border-color:transparent}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.1rem clamp(1rem,2vw,1.5rem);text-align:left;font-weight:700;
  font-size:clamp(.96rem,1.4vw,1.08rem);letter-spacing:-.02em;line-height:1.35}
.faq__q>span:first-child{flex:1}
.faq__ic{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(17,17,18,.06);
  flex:none;display:grid;place-items:center;
  transition:background-color .35s,color .35s,transform .45s var(--e-spring)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq__ic::before{width:11px;height:1.7px}
.faq__ic::after{width:1.7px;height:11px;transition:transform .4s var(--e-out)}
.faq__i.is-open .faq__ic{background:var(--terracotta);color:#fff;transform:rotate(180deg)}
.faq__i.is-open .faq__ic::after{transform:scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-out)}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__inner{overflow:hidden}
.faq__inner>div{padding:0 clamp(1rem,2vw,1.5rem) 1.3rem;color:var(--fg-soft);font-size:.94rem;
  line-height:1.65;max-width:78ch}
.faq__inner ul{margin-top:.8rem;display:flex;flex-direction:column;gap:.45rem}
.faq__inner li{display:flex;gap:.6rem}
.faq__inner li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--terracotta);
  flex:none;margin-top:.62em}
.faq__inner strong{color:var(--ink);font-weight:700}

/* ---------- CTA FINAL ---------- */
.cta{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-2xl);overflow:hidden;
  padding:clamp(2.2rem,5vw,4.2rem) clamp(1.3rem,4vw,3.2rem);text-align:center}
.cta__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.cta__blob--1{width:36%;padding-bottom:36%;background:var(--terracotta);top:-14%;left:-6%}
.cta__blob--2{width:30%;padding-bottom:30%;background:var(--majorelle);bottom:-16%;right:-4%}
.cta__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.cta h2{max-width:16ch}
.cta .hero-type{font-size:clamp(1.6rem,4.6vw,3.6rem)}
.cta__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;width:100%;
  margin-top:clamp(1.4rem,3vw,2.2rem)}
.cta__ln{background:rgba(255,255,255,.06);border:1px solid var(--line-inv);border-radius:var(--r-lg);
  padding:1rem 1.1rem;text-align:left;transition:background-color .35s,transform .35s var(--e-out)}
.cta__ln:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.cta__ln span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:.35rem}
.cta__ln b{font-size:.9rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;display:block}
@media(max-width:860px){.cta__row{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cta__row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER — calqué sur la référence.
   Bloc sombre à coins hauts arrondis, deux colonnes,
   pastilles de navigation, bouton safran, champ newsletter.
   ============================================================ */
.foot{background:var(--ink);color:#fff;border-radius:30px 30px 0 0;
  padding:clamp(3.5rem,11vw,200px) 0 30px;margin-top:clamp(2rem,5vw,4rem);overflow:clip}
.foot__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,5vw,60px)}
@media(min-width:900px){.foot__grid{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}

.foot__h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:.88rem;letter-spacing:-.01em;color:#ddd;margin-bottom:1.6rem}

.foot__about{font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:500;line-height:1.5;
  color:#8b8b8b;max-width:38ch;margin-top:1.6rem}
.foot__soc{display:flex;gap:16px;margin-top:1.7rem}
.fsoc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:transform .35s var(--e-spring)}
.fsoc svg{width:19px;height:19px}
.fsoc:hover{transform:translateY(-3px)}
.fsoc--ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7)}
.fsoc--fb{background:#1877f2}
.fsoc--li{background:#0a66c2}
.fsoc--wa{background:#25d366}

.fpages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fpage{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  height:54px;padding:0 24px;border-radius:100px;background:rgba(255,255,255,.03);
  font-size:1rem;font-weight:500;color:#ddd;
  transition:background-color .3s var(--e-out),color .3s,transform .35s var(--e-out)}
.fpage svg{width:17px;height:17px;opacity:.5;flex:none}
.fpage span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpage:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-2px)}
.fpage:hover svg{opacity:.9}
@media(max-width:640px){.fpages{grid-template-columns:1fr 1fr}.fpage{padding:0 18px;font-size:.94rem}}
@media(max-width:380px){.fpages{grid-template-columns:1fr}}

.foot__book{display:flex;align-items:center;justify-content:center;height:50px;margin-top:10px;
  border-radius:100px;background:var(--safran);color:var(--ink);
  font-size:1.05rem;font-weight:700;letter-spacing:-.015em;
  transition:background-color .3s,transform .35s var(--e-out),color .3s}
.foot__book:hover{background:var(--terracotta);color:#fff;transform:translateY(-2px)}

.foot__contact a,.foot__contact p{display:block;font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:500;
  line-height:1.72;color:#8b8b8b;transition:color .3s}
.foot__contact a:hover{color:#fff}
.foot__contact p{max-width:32ch;margin-top:.4rem}

.fnews{position:relative;display:flex;align-items:center;height:64px;border-radius:100px;
  background:rgba(255,255,255,.03);padding:0 72px 0 24px;transition:background-color .3s}
.fnews input{width:100%;height:100%;background:none;border:0;color:#fff;font-size:1rem}
.fnews input::placeholder{color:#8b8b8b}
.fnews:focus-within{background:rgba(255,255,255,.07)}
.fnews button{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:100px;
  background:var(--rose);color:var(--ink);display:grid;place-items:center;
  transition:background-color .3s,transform .35s var(--e-spring)}
.fnews button svg{width:19px;height:19px}
.fnews button:hover{background:#fff;transform:rotate(-12deg) scale(1.05)}
.fconsent{display:flex;align-items:flex-start;gap:12px;margin-top:20px;cursor:pointer}
.fconsent input{appearance:none;width:18px;height:18px;flex:none;margin-top:.28em;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.fconsent input::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--ink);
  transform:scale(0);transition:transform .25s var(--e-spring)}
.fconsent input:checked{background:var(--terracotta);border-color:var(--terracotta)}
.fconsent input:checked::after{transform:scale(1)}
.fconsent span{font-size:clamp(.9rem,1.05vw,1rem);font-weight:500;color:#8b8b8b;line-height:1.5}
.fnews__ok{margin-top:.9rem;font-size:.9rem;font-weight:600;color:var(--zellige)}

.foot__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,4vw,40px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.92rem;color:#8b8b8b}
.foot__bar nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot__bar a{transition:color .3s}
.foot__bar a:hover{color:#fff}

/* ---------- EN-TÊTE DE PAGE ---------- */
.phead{padding-top:clamp(7.5rem,13vw,10rem);padding-bottom:clamp(2rem,4vw,3.2rem);text-align:center}
.phead h1{margin-inline:auto;max-width:17ch;padding-top:.1em}
.phead .lead{margin-top:1.2rem;margin-inline:auto}
.phead--left{text-align:left}
.phead--left h1,.phead--left .lead{margin-inline:0}
.crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--fg-mute);margin-bottom:1rem}
.crumb svg{width:11px;height:11px;opacity:.5;flex:none}
.crumb a:hover{color:var(--terracotta)}

/* ---------- PROSE ---------- */
.prose{max-width:72ch;font-size:1.02rem;line-height:1.75;color:#2c2c33}
.prose>*+*{margin-top:1.1em}
/* Titres des pages de texte (CGV, mentions, confidentialité) : Satoshi
   gras, casse normale, comme dans les articles. En Boldonse capitales,
   interligne 1,22 et interlettrage négatif, un titre sur deux lignes
   (« 10. Droit de rétractation (clients particuliers) ») se soudait :
   l'accent du É touchait la ligne du dessus. */
.prose h2{font-family:var(--font-body);text-transform:none;font-weight:700;
  font-size:clamp(1.22rem,2vw,1.6rem);line-height:1.3;letter-spacing:-.03em;
  margin-top:2.1em;margin-bottom:.1em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.02rem,1.5vw,1.24rem);margin-top:1.7em;margin-bottom:.1em;color:var(--ink)}
.prose h4{font-size:1rem;margin-top:1.4em;margin-bottom:.1em;color:var(--ink)}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose ul{display:flex;flex-direction:column;gap:.5em}
.prose li{display:flex;gap:.7em;line-height:1.65}
.prose li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terracotta);
  flex:none;margin-top:.62em}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--terracotta);padding-left:1.3em;font-size:1.12rem;
  font-weight:600;color:var(--ink)}

.art{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(2rem,4vw,4rem);align-items:start}
.toc{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.3rem}
.toc h4{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
  font-family:var(--font-display);font-weight:400;margin-bottom:.9rem}
.toc ul{display:flex;flex-direction:column;gap:.55rem;max-height:52vh;overflow-y:auto}
.toc a{font-size:.82rem;color:var(--fg-soft);line-height:1.35;display:block;transition:color .3s}
.toc a:hover,.toc a.is-active{color:var(--terracotta);font-weight:600}
@media(max-width:1000px){.art{grid-template-columns:1fr}}

/* ---------- CARTES ARTICLE ---------- */
.post{display:flex;flex-direction:column;gap:.85rem;height:100%;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:.65rem .65rem 1.2rem;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.post:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.post .media{border-radius:var(--r-md)}
.post__in{padding-inline:.55rem;display:flex;flex-direction:column;gap:.55rem}
.post__meta{display:flex;align-items:center;gap:.5rem;font-size:.71rem;font-weight:700;color:var(--fg-mute)}
.post__cat{padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--safran-soft);color:#8a5a00;
  text-transform:uppercase;letter-spacing:.06em;font-size:.65rem}
.post h3{font-size:1rem;line-height:1.28;letter-spacing:-.025em}
.post p{font-size:.86rem;color:var(--fg-soft);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- FORMULAIRE ---------- */
.form{display:grid;gap:.85rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.78rem;font-weight:700;color:var(--fg-soft)}
.field input,.field textarea,.field select{width:100%;padding:.88rem 1.1rem;border:1px solid var(--line-2);
  border-radius:var(--r-md);background:var(--white);font-size:.93rem;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(100,53,206,.18)}
.field select{appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e8e96' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.55rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:.84rem;
  font-weight:600;color:var(--fg-soft);background:var(--white);transition:all .3s var(--e-out)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.form__note{font-size:.78rem;color:var(--fg-mute);line-height:1.5}
@media(max-width:600px){.form__row{grid-template-columns:1fr}}

/* ---------- COORDONNÉES ---------- */
.cinfo{display:grid;gap:.55rem}
.cinfo__i{display:flex;gap:.9rem;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1rem 1.2rem;transition:transform .35s var(--e-out)}
.cinfo__i:hover{transform:translateX(4px)}
.cinfo__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.cinfo__ic svg{width:16px;height:16px}
.cinfo__i>div>span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:.2rem}
.cinfo__i b,.cinfo__i a{font-weight:700;font-size:.94rem;letter-spacing:-.015em;line-height:1.35}
.cinfo__i a:hover{color:var(--terracotta)}

/* ---------- MARQUEE ---------- */
.marquee{position:relative;overflow:hidden;--dur:40s}
.marquee__track{display:flex;width:max-content;animation:mq var(--dur) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee__set{display:flex;align-items:center;flex:none}
.mq-item{display:inline-flex;align-items:center;gap:.6rem;padding-inline:clamp(.8rem,1.8vw,1.5rem);
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1rem,2.3vw,1.9rem);
  letter-spacing:-.02em;white-space:nowrap}
.mq-item svg{width:13px;height:13px;flex:none;color:var(--terracotta)}
.mq-item:nth-child(even){color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.section--ink .mq-item:nth-child(even){-webkit-text-stroke-color:rgba(255,255,255,.4)}
.marquee--band{border-block:1px solid var(--line);padding-block:.85rem;background:var(--white)}
.section--ink .marquee--band{background:transparent;border-color:var(--line-inv)}

/* ---------- DIVERS ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.tick{display:flex;flex-direction:column;gap:.65rem}
.tick li{display:flex;gap:.65rem;font-size:.93rem;color:var(--fg-soft);line-height:1.5}
.tick svg{width:17px;height:17px;flex:none;margin-top:.2em;color:var(--zellige)}
.mini{display:flex;flex-wrap:wrap;gap:.4rem}
.mini span{padding:.35rem .8rem;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);
  font-size:.78rem;font-weight:600;color:var(--fg-soft)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.photo-pair .tile{aspect-ratio:3/4}

/* ---------- Normalisation des icônes inline ---------- */
.btn__ic svg{width:15px;height:15px;flex:none}
.alink svg{width:15px;height:15px;flex:none}
.tag svg{flex:none}
.tile__meta span svg{width:11px;height:11px}
.post__meta svg{width:12px;height:12px}

/* ---------- Nav : repli du logo et du bouton d'appel au scroll ----------
   Comme sur la référence : en descendant, seuls la pastille « Menu » reste
   à l'écran ; le logo et le bouton reviennent dès qu'on remonte. */
@media(min-width:1200px){
  .nav__side--l,.nav__side--r{
    transition:transform .45s var(--e-out),opacity .3s var(--e-out)}
  .nav.is-tucked .nav__side--l,
  .nav.is-tucked .nav__side--r{
    transform:translateY(-150%);opacity:0;pointer-events:none}
}

/* ---------- Hero : plus d'air, comme sur la référence ----------
   Pastille → titre → sous-titre → bouton, avec de vrais intervalles,
   puis la rangée de photos nettement plus bas. */
.hero{padding-top:clamp(8rem,15vw,11.5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.hero__in{gap:clamp(1.5rem,2.6vw,2.2rem)}
.hero__title{max-width:17ch;margin-top:clamp(.3rem,1vw,.8rem)}
.hero__sub{max-width:56ch;margin-top:clamp(.2rem,.8vw,.6rem)}
.hero__in>.btns{margin-top:clamp(.4rem,1.2vw,1rem)}
.hero .deck{margin-top:clamp(3rem,6.5vw,5.5rem)}
.hero__kinds{margin-top:clamp(2rem,3.5vw,2.8rem);font-size:.9rem}

/* bouton principal : rond blanc à gauche */
.btn--hero{padding:.52rem 1.7rem .52rem .52rem;font-size:1.05rem;gap:.7em}
.btn--hero .btn__ic{width:38px;height:38px;background:#fff;color:var(--ink)}
.btn--hero .btn__ic svg{width:16px;height:16px}
.btn--hero:hover .btn__ic{transform:translateX(3px);background:var(--terracotta);color:#fff}
@media(max-width:560px){
  .hero{padding-top:7rem}
  .btn--hero{font-size:.98rem;padding-right:1.3rem}
  .btn--hero .btn__ic{width:34px;height:34px}
}

/* Hero mobile : grille 2×2 propre (3 photos + la carte chiffre),
   sinon la dernière carte s'étire sur toute la largeur. */
@media(max-width:560px){
  .deck{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .deck__card{max-width:none;--rot:0deg;--ty:0px}
  .deck__card:nth-child(4){display:none}
  .deck__card:nth-child(n+5){display:flex}
  .deck__card--stat{aspect-ratio:3/4;padding:1rem .8rem}
  .deck__card--stat b{font-size:1.9rem}
  .deck__card--stat em{font-size:.68rem}
}

/* ---------- Hero : mesures relevées sur la référence ----------
   Section : padding-top 200px. Colonne de contenu : 860px, gap 30px.
   Titre : 68px / interligne 1.5 sur un viewport de 1500px. */
.hero{padding-top:clamp(6.5rem,13.3vw,200px);padding-bottom:clamp(2rem,4vw,3rem)}
.hero__in{gap:30px}
.hero__title{max-width:900px;margin-top:0}
.hero__sub{max-width:640px;margin-top:0}
.hero__in>.btns{margin-top:0}
.hero .deck{margin-top:clamp(2.5rem,5vw,50px)}
@media(max-width:700px){.hero__in{gap:22px}}

/* ============================================================
   HERO EN DEUX COLONNES — en production sur l'accueil
   ------------------------------------------------------------
   Le texte à gauche, le visuel du hero (.hv) à droite, au lieu d'être
   empilés au centre. Posé par `home()` dans tools/pages.mjs.

   Le texte vient en premier dans le balisage ET à l'écran : aucune
   inversion par `order`, donc l'ordre de lecture, l'ordre de tabulation
   et l'ordre du document coïncident. Le H1 reste haut dans la page, et
   l'empilement mobile ne demande aucun réglage particulier.

   La colonne du visuel est la plus large des deux (1,06 contre 0,94) :
   l'illustration est le point d'ancrage, le texte a déjà sa mesure. */
.hero--split{padding-top:clamp(6.5rem,11vw,9rem);padding-bottom:clamp(2.5rem,5vw,4rem);
  text-align:left}
.hero__grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:center}
.hero__visual{min-width:0}
.hero__txt{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(.9rem,1.7vw,1.4rem);min-width:0}

/* le visuel remplit sa colonne : plus besoin de la marge d'aération
   qui l'écartait du texte quand il était dessous */
.hero--split .hv{margin-top:0;max-width:none}

/* Dans une demi-largeur, la scène gardait la proportion prévue pour la
   pleine largeur : la fenêtre tombait à 583×320, soit 1,82 — trop écrasée
   pour évoquer un navigateur. Un rapport fixe de 1,55 la fait dériver de
   la largeur de la colonne, donc juste à toutes les tailles, et rapproche
   la hauteur des deux colonnes. Sous 961 px la mise en page repasse sur
   une colonne : on rend la main aux règles d'origine. */
@media(min-width:961px){
  .hero--split .hv__stage{aspect-ratio:1.55;min-height:300px}
}

/* Boldonse est très large, et le titre fait trois lignes pleines. Deux
   réglages hérités le rendaient illisible en bloc :

     · l'interlettrage de `.display` est NÉGATIF (-.018em). Sur une
       graisse d'affiche en capitales, les lettres se soudent et la
       ligne devient un pavé. Une capitale grasse réclame de l'air
       entre les lettres, pas moins — d'où le passage en positif.
     · l'interligne de 1,5 suffit à laisser passer les accents, pas à
       séparer trois lignes de cette densité. 1,62 rend chaque ligne
       lisible séparément.

   Ces deux réglages élargissent la ligne : le corps redescend d'un cran
   pour que « Un site vitrine pro, » tienne toujours sur une seule ligne
   dans une colonne de ~487 px. */
.hero--split .hero__title{font-size:clamp(1.55rem,2.9vw,2.55rem);max-width:100%;
  letter-spacing:.015em;line-height:1.62;
  text-align:left;margin:0;padding-top:0}
.hero--split .hero__sub{max-width:46ch;text-align:left;margin:0}
.hero--split .btns{justify-content:flex-start}

@media(max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}
  .hero--split{text-align:center;padding-top:6.5rem}
  .hero__txt{align-items:center}
  .hero--split .hero__title,.hero--split .hero__sub{text-align:center;max-width:100%}
  .hero--split .btns{justify-content:center}
}

/* ---------- SITES MIS EN LIGNE — bandeau défilant sous le hero ----------
   Même grammaire que la référence : pleine largeur, cartes légèrement
   inclinées, dégradés d'entrée et de sortie sur les bords. Chaque carte est
   une petite fenêtre de navigateur : c'est le format qui prouve un site. */
.shots{padding-block:clamp(2.6rem,5.5vw,4.6rem) clamp(3rem,6.5vw,5.6rem);overflow:hidden}

.shots__head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.9rem;margin-bottom:clamp(1.8rem,3.6vw,2.8rem)}
.shots__lbl{display:inline-flex;align-items:center;gap:.5em;margin:0;
  font-size:.82rem;letter-spacing:.01em;color:var(--fg-soft)}
.shots__lbl svg{width:14px;height:14px;color:var(--terracotta)}
.shots__t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.9rem);line-height:1.5;margin:0}

/* Le bandeau rogne tout ce qui dépasse de son cadre (c'est ce qui fait
   défiler les cartes). Or les cartes sont inclinées de ±1,5° : leurs coins
   supérieurs dépassaient de 2 à 5 px, et de 8 px de plus au survol (la
   carte se soulève) : le haut paraissait coupé. 20 px de marge en haut,
   12 en bas, retirés de l'espace sous le titre : la mise en page ne bouge pas. */
.shots__rail{--dur:80s;width:100%;padding-block:20px 12px}
.shots__head{margin-bottom:calc(clamp(1.8rem,3.6vw,2.8rem) - 20px)}
.shots__set{gap:clamp(.9rem,1.8vw,1.6rem);padding-inline:clamp(.45rem,.9vw,.8rem);
  align-items:flex-start}

.shot{flex:none;display:block;text-decoration:none;color:inherit;width:clamp(232px,25vw,400px);--rot:-1.5deg;
  transform:rotate(var(--rot));transition:transform .5s var(--e-out)}
.shot:nth-child(even){--rot:1.4deg}
.shot:nth-child(3n){--rot:-.6deg}
.shot:hover{transform:rotate(0deg) translateY(-8px)}
.shot:hover .shot__win{box-shadow:0 34px 70px -30px rgba(17,17,18,.5)}
.shot:focus-visible{outline:3px solid var(--tint,#6435ce);outline-offset:6px;border-radius:20px}
.shot:hover .shot__ph img{transform:scale(1.03)}
.shot__ph img{transition:transform .7s var(--e-out)}

.shot__win{display:block;border-radius:16px;overflow:hidden;background:var(--white);transition:box-shadow .5s var(--e-out);
  border:1px solid var(--line);box-shadow:0 26px 60px -34px rgba(17,17,18,.45)}
.shot__bar{display:flex;align-items:center;gap:.7rem;height:34px;padding-inline:.7rem;
  background:var(--paper);border-bottom:1px solid var(--line)}
.shot__dots{display:flex;gap:5px;flex:none}
.shot__dots i{width:7px;height:7px;border-radius:50%;background:rgba(17,17,18,.16)}
.shot__dots i:first-child{background:var(--tint,#6435ce)}
.shot__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.66rem;line-height:1;color:rgba(17,17,18,.62);background:var(--white);
  border:1px solid var(--line);border-radius:100px;padding:.42em .8em;text-align:center}
.shot__ph{display:block;aspect-ratio:1440/1000;background:var(--paper);overflow:hidden}
.shot__ph img{display:block;width:100%;height:100%;object-fit:cover}

.shot__meta{display:flex;flex-direction:column;gap:.1rem;margin:.85rem .2rem 0}
.shot__meta b{font-family:var(--font-display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:-.01em;font-weight:400}
.shot__meta span{font-size:.78rem;color:var(--fg-soft)}

/* dégradés sur les bords : les cartes entrent et sortent du cadre */
.shots__fade{position:absolute;top:0;bottom:0;width:clamp(56px,11vw,200px);
  pointer-events:none;z-index:2}
.shots__fade--l{left:0;background:linear-gradient(90deg,var(--paper),var(--paper-fade))}
.shots__fade--r{right:0;background:linear-gradient(270deg,var(--paper),var(--paper-fade))}

.shots__foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.2rem .7rem;text-align:center;margin:clamp(1.8rem,3.4vw,2.6rem) auto 0;
  padding-inline:var(--gut);color:var(--fg-soft);font-size:.95rem}

/* Fond blanc (ni gris, ni noir) : la section telle qu'à l'origine, seul le
   fond change. Les dégradés des bords s'accordent au blanc. */
.shots{background:var(--white)}
.shots__fade--l{background:linear-gradient(90deg,var(--white),rgba(255,255,255,0))}
.shots__fade--r{background:linear-gradient(270deg,var(--white),rgba(255,255,255,0))}

@media(max-width:700px){
  .shot{--rot:0deg!important}
  .shots__rail{--dur:55s}
}
@media(prefers-reduced-motion:reduce){
  .shots__track{animation:none}
  .shots__rail{overflow-x:auto;scrollbar-width:none}
  .shots__rail::-webkit-scrollbar{display:none}
}

/* ============================================================
   V2 — L'OFFRE : composants calqués sur les références envoyées
   ============================================================ */

/* ---------- Bande de rassurance sous le hero ---------- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem clamp(.6rem,1.6vw,1.4rem);
  margin-top:clamp(1.4rem,3vw,2.2rem);padding:0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:.5em;background:var(--white);
  border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;font-size:.82rem;
  color:var(--fg-soft);box-shadow:0 1px 2px rgba(17,17,18,.03)}
.trust svg{width:14px;height:14px;color:var(--terracotta);flex:none}
.section--ink .trust li{background:rgba(255,255,255,.05);border-color:var(--line-inv);color:rgba(255,255,255,.75)}

/* ---------- CARTES CHIFFRES ---------- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.5vw,1.1rem)}
.fig{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(200px,20vw,268px);background:var(--white);border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(1.3rem,2.4vw,2rem);border:1px solid var(--line);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.fig:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(17,17,18,.3)}
.fig span{font-size:clamp(.86rem,1.05vw,.98rem);line-height:1.4;color:var(--fg-soft);max-width:18ch}
.fig b{align-self:flex-end;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.045em;line-height:.9;margin-top:1.5rem;
  display:flex;align-items:baseline;gap:.06em}
.fig b i{font-style:normal}
.fig:nth-child(1) b i{color:var(--terracotta)}
.fig:nth-child(2) b i{color:var(--majorelle)}
.fig:nth-child(3) b i{color:var(--zellige)}
.fig:nth-child(4) b i{color:var(--safran-text)}
/* sur la carte noire, le violet profond disparaît (1,5:1) :
   c'est la lavande claire qui doit s'y détacher (6,7:1) */
.fig.fig--dark b i{color:var(--safran)}
.fig--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.fig--dark span{color:rgba(255,255,255,.62)}
.section--white .fig{background:var(--paper);border-color:transparent}
.section--white .fig--dark{background:var(--ink)}
@media(max-width:900px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.figs{grid-template-columns:1fr}.fig{min-height:150px}}

/* ---------- SPLIT « MISSION » ---------- */
.mission{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center}
.mission__ph{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1.1rem);align-items:center}
.mph{position:relative;margin:0;border-radius:clamp(16px,2vw,26px);overflow:visible;
  transform:rotate(var(--rot,0deg));transition:transform .6s var(--e-spring)}
.mph:nth-child(2){margin-top:clamp(1.4rem,4vw,3.4rem)}
.mph:hover{transform:rotate(0) translateY(-6px)}
.mph img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:inherit;display:block;
  box-shadow:0 30px 60px -34px rgba(17,17,18,.45)}
.mph__b{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4em;
  padding:.44rem .85rem;border-radius:100px;font-size:.78rem;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(17,17,18,.45)}
.mph__b svg{width:13px;height:13px}
.mph__b--top-l{top:8%;left:-12px}
.mph__b--top-r{top:6%;right:-14px}
.mph__b--bot-l{bottom:12%;left:-14px}
.mission__txt{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1rem,1.8vw,1.4rem)}
.mission__txt .hero-type{font-size:clamp(1.6rem,3.6vw,3.2rem);margin:0}
.mission__txt .lead{margin:0;max-width:46ch}
@media(max-width:900px){.mission{grid-template-columns:1fr}.mph{--rot:0deg}.mph:nth-child(2){margin-top:0}}

/* ---------- APERÇU À COCHER ---------- */
.ovw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.ovw__ph{border-radius:clamp(18px,2.4vw,28px);overflow:hidden;box-shadow:var(--sh-card)}
.ovw__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform 1s var(--e-out)}
.ovw__ph:hover img{transform:scale(1.04)}
.ovw__txt{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.9rem,1.6vw,1.25rem)}
.ovw__txt h2{font-family:var(--font-body);font-weight:700;text-transform:none;
  font-size:clamp(1.45rem,3vw,2.5rem);letter-spacing:-.035em;line-height:1.14;margin:0}
.ovw__txt>p{margin:0;max-width:48ch}
.ovw__list{list-style:none;padding:clamp(1.1rem,2vw,1.6rem);margin:.2rem 0 0;width:100%;
  display:flex;flex-direction:column;gap:clamp(.9rem,1.6vw,1.25rem);
  border-radius:clamp(16px,2vw,24px);background:var(--tintbg,#f3eefd)}
.ovw__list li{display:flex;gap:.9rem;align-items:flex-start}
.ovw__list b{display:block;font-size:.98rem;letter-spacing:-.015em}
.ovw__list em{display:block;font-style:normal;margin-top:.2rem;font-size:.88rem;
  color:var(--fg-soft);line-height:1.45}
.ovw__ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--white);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(17,17,18,.08)}
.ovw__ic svg{width:14px;height:14px;color:var(--ink)}
.ovw--zellige{--tintbg:#e5dbf8}
.ovw--majorelle{--tintbg:#eeeeef}
.ovw--terracotta{--tintbg:#ede6fb}
.ovw--safran{--tintbg:#f3eefd}
@media(max-width:900px){.ovw{grid-template-columns:1fr}.ovw__ph img{aspect-ratio:16/10}}

/* ---------- PREUVE CHIFFRÉE ---------- */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);align-items:stretch}
.proof__ph{position:relative;border-radius:clamp(18px,2.4vw,28px);overflow:hidden;min-height:clamp(340px,44vw,540px)}
.proof__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proof__ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,11,.72),rgba(10,10,11,.05) 62%)}
.proof__lines{position:absolute;left:clamp(1.2rem,2.6vw,2.4rem);bottom:clamp(1.2rem,2.6vw,2.2rem);
  right:clamp(1.2rem,2.6vw,2.4rem);z-index:2;margin:0;display:flex;flex-direction:column}
.proof__lines span{font-family:var(--font-display);text-transform:uppercase;color:#fff;
  font-size:clamp(1.35rem,3.1vw,2.7rem);letter-spacing:-.035em;line-height:1.1}
.proof__card{background:var(--white);border-radius:clamp(18px,2.4vw,28px);border:1px solid var(--line);
  padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;align-items:center;text-align:center}
.proof__big{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.2rem);
  letter-spacing:-.05em;line-height:.9;margin-top:clamp(1rem,2vw,1.6rem);display:block}
.proof__big i{font-style:normal;color:var(--terracotta)}
.proof__sub{margin:.8rem 0 0;font-size:.95rem;color:var(--fg-soft);max-width:32ch}
.proof__rows{list-style:none;padding:0;margin:clamp(1.4rem,3vw,2.4rem) 0 0;width:100%;text-align:left}
.proof__rows li{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.4rem);
  padding:clamp(.85rem,1.6vw,1.15rem) 0;border-top:1px solid var(--line)}
.proof__rows b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.04em;line-height:1;min-width:2.6em}
.proof__rows li:nth-child(1) b i{color:var(--majorelle)}
.proof__rows li:nth-child(2) b i{color:var(--zellige)}
.proof__rows li:nth-child(3) b i{color:var(--safran-text)}
.proof__rows b i{font-style:normal}
.proof__rows span{font-size:.86rem;color:var(--fg-soft);line-height:1.4}
.proof__rows strong{display:block;color:var(--ink);font-size:.94rem;font-weight:700;margin-bottom:.12rem}
@media(max-width:900px){.proof{grid-template-columns:1fr}.proof__ph{min-height:300px}}

/* ---------- TOUT EST INCLUS ---------- */
.incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
.incl__i{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:clamp(16px,2vw,24px);padding:clamp(1.2rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;gap:.55rem;overflow:hidden;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.incl__i:hover{transform:translateY(-5px);box-shadow:0 24px 44px -28px rgba(17,17,18,.28)}
.incl__i::before{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--c)}
.incl__n{font-family:var(--font-display);font-size:.7rem;letter-spacing:0;color:var(--c)}
.incl__i h3{font-size:1rem;letter-spacing:-.025em;line-height:1.2}
.incl__i p{font-size:.86rem;line-height:1.5;color:var(--fg-soft)}
.incl__i--terracotta{--c:var(--terracotta)} .incl__i--majorelle{--c:var(--majorelle)}
.incl__i--zellige{--c:var(--zellige)} .incl__i--safran{--c:var(--safran-text)} .incl__i--rose{--c:var(--rose)}
.section--white .incl__i{background:var(--paper);border-color:transparent}
@media(max-width:1000px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.incl{grid-template-columns:1fr}}

/* ---------- CARTE PRIX ---------- */
.offer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1rem,2.2vw,1.6rem);align-items:start}
.pbox{background:var(--white);border:1px solid var(--line);border-radius:clamp(20px,2.6vw,30px);
  overflow:hidden;box-shadow:0 30px 60px -40px rgba(17,17,18,.35)}
.pbox__top{padding:clamp(1.2rem,2.4vw,1.9rem);border-bottom:1px solid var(--line);text-align:center}
.pbox__bar{display:flex;align-items:center;gap:.7rem;height:34px;padding-inline:.7rem;margin:-.4rem -.4rem 1.2rem;
  background:var(--paper);border:1px solid var(--line);border-radius:100px}
.pbox__dots{display:flex;gap:5px;flex:none}
.pbox__dots i{width:7px;height:7px;border-radius:50%;background:rgba(17,17,18,.16)}
.pbox__dots i:first-child{background:var(--terracotta)}
.pbox__url{flex:1;font-size:.7rem;color:rgba(17,17,18,.62);text-align:center}
.pbox__amt b{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:-.05em;line-height:.9;display:block}
.pbox__amt b i{font-style:normal;color:var(--terracotta);margin-left:.06em}
.pbox__amt>span{display:block;margin-top:.7rem;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-mute)}
.pbox__note{margin:1rem 0 0;font-size:.86rem;color:var(--fg-soft)}
.pbox__list{list-style:none;margin:0;padding:clamp(1rem,2vw,1.5rem);display:grid;gap:.62rem}
.pbox__list li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;line-height:1.4}
.pbox__list svg{width:16px;height:16px;flex:none;margin-top:.15em;color:var(--zellige)}
.pbox__foot{padding:0 clamp(1rem,2vw,1.5rem) clamp(1.2rem,2vw,1.5rem)}
.pbox__pay{display:flex;align-items:center;justify-content:center;gap:.45em;margin:.9rem 0 0;
  font-size:.78rem;color:var(--fg-mute);text-align:center}
.pbox__pay svg{width:13px;height:13px;color:var(--zellige);flex:none}

.offer-side{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.1rem)}
.opt{background:var(--white);border:1px solid var(--line);border-radius:clamp(16px,2vw,24px);
  padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.5rem}
.opt__top{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.opt__top b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.8vw,2rem);
  letter-spacing:-.04em;line-height:1}
.opt__top b i{font-style:normal;font-size:.5em;color:var(--fg-mute);margin-left:.1em}
.opt__tag{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
  border:1px solid var(--line);border-radius:100px;padding:.24rem .6rem}
.opt h3{font-size:1rem;letter-spacing:-.025em}
.opt p{font-size:.87rem;line-height:1.5}
.opt--ink{background:var(--ink);border-color:var(--ink);color:#fff;gap:.7rem}
.opt--ink p{color:rgba(255,255,255,.68)}
.opt--ink .btns{margin-top:.4rem}
.section--white .opt{background:var(--paper);border-color:transparent}
.section--white .opt--ink{background:var(--ink)}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr}}

/* ---------- MÉTHODE : intitulé de jour ---------- */
.step__k{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;opacity:.72;font-weight:700}

/* ---------- COMPARATIF : note ---------- */
.vs__note{margin:clamp(1rem,2vw,1.6rem) auto 0;max-width:70ch;text-align:center;
  font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.5}
.shead--inv h2,.shead--inv .hero-type{color:#fff}
.shead--inv .lead{color:rgba(255,255,255,.66)}

/* ---------- FICHES RÉALISATION ---------- */
.cases{display:flex;flex-direction:column;gap:clamp(1rem,2.4vw,2rem)}
.case{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1rem,2.4vw,2rem);align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:clamp(20px,2.6vw,30px);
  padding:clamp(.8rem,1.6vw,1.2rem)}
.case:nth-child(even){direction:rtl}
.case:nth-child(even)>*{direction:ltr}
.case__ph{position:relative;display:block;border-radius:clamp(14px,1.8vw,20px);overflow:hidden;
  aspect-ratio:1440/1000;box-shadow:0 24px 50px -32px rgba(17,17,18,.45);
  transform:rotate(var(--rot,0deg));transition:transform .6s var(--e-spring)}
.case__ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.case__ph:hover{transform:rotate(0) translateY(-5px)}
.case__go{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;
  background:var(--tint,#111112);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px -8px rgba(17,17,18,.5)}
.case__go svg{width:15px;height:15px}
.case__info{padding:clamp(.6rem,1.6vw,1.4rem);display:flex;flex-direction:column;gap:.9rem}
.case__kind{display:inline-flex;align-items:center;gap:.45em;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.case__kind i{width:8px;height:8px;border-radius:50%}
.case__head h3{margin-top:.5rem;font-size:clamp(1.15rem,2.4vw,1.85rem);letter-spacing:-.03em;line-height:1.1}
.case__info>p{font-size:.92rem;line-height:1.55;margin:0}
.case__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.case__tags li{font-size:.75rem;border:1px solid var(--line);border-radius:100px;
  padding:.3rem .7rem;color:var(--fg-soft)}
.case__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.case__stats b{font-family:var(--font-display);font-weight:400;font-size:clamp(.95rem,1.9vw,1.3rem);
  letter-spacing:-.03em;line-height:1;display:block;color:var(--ink)}
.case__stats span{font-size:.72rem;color:var(--fg-mute);display:block;margin-top:.35rem}
.case__link{display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;
  font-size:.86rem;font-weight:600;color:var(--tint,var(--terracotta))}
.case__link svg{width:13px;height:13px;transition:transform .35s var(--e-out)}
.case__link:hover svg{transform:translate(2px,-2px)}
@media(max-width:900px){.case,.case:nth-child(even){grid-template-columns:1fr;direction:ltr}
  .case__ph{--rot:0deg}.case__stats{grid-template-columns:repeat(3,1fr)}}

/* ---------- SERVICES ---------- */
.srvs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
.srv{position:relative;display:flex;flex-direction:column;gap:.55rem;
  border-radius:clamp(16px,2vw,24px);padding:clamp(1.2rem,2.4vw,1.9rem);
  min-height:clamp(190px,20vw,240px);color:#fff;overflow:hidden;
  transition:transform .45s var(--e-out)}
.srv:hover{transform:translateY(-6px)}
.srv--terracotta{background:var(--terracotta)}
.srv--majorelle{background:var(--majorelle)}
.srv--zellige{background:var(--zellige)}
.srv--safran{background:var(--safran);color:var(--ink)}
.srv__n{font-family:var(--font-display);font-size:.7rem;opacity:.7}
.srv h3{font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.03em;line-height:1.15}
.srv p{font-size:.87rem;line-height:1.5;opacity:.9;margin-bottom:2rem}
.srv__go{position:absolute;right:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;transition:transform .4s var(--e-out)}
.srv--safran .srv__go{background:rgba(17,17,18,.12)}
.srv__go svg{width:14px;height:14px}
.srv:hover .srv__go{transform:translate(3px,-3px)}
@media(max-width:1000px){.srvs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.srvs{grid-template-columns:1fr}}

/* ---------- EN-TÊTE DE PAGE SERVICE ---------- */
.srvhead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.srvhead__ph{position:relative;border-radius:clamp(18px,2.4vw,28px);overflow:hidden}
.srvhead__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.srvhead__m{position:absolute;right:clamp(.8rem,1.8vw,1.4rem);bottom:clamp(.8rem,1.8vw,1.4rem);
  border-radius:clamp(14px,1.8vw,20px);padding:.9rem 1.2rem;color:#fff;text-align:right;
  box-shadow:0 14px 32px -14px rgba(17,17,18,.5)}
.srvhead__m b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.04em;line-height:1}
.srvhead__m em{display:block;font-style:normal;font-size:.74rem;opacity:.85;margin-top:.3rem}
@media(max-width:900px){.srvhead{grid-template-columns:1fr}}

/* ---------- VILLES ---------- */
/* Trois par ligne : la photo de chaque ville a la place d'être regardée.
   À quatre colonnes, la pastille tombait sous 40 px et le monument
   devenait une tache de couleur. */
.cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
.city{display:flex;align-items:center;gap:1rem;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:.6rem 1.3rem .6rem .6rem;transition:transform .35s var(--e-out),border-color .3s}
.city:hover{transform:translateY(-3px);border-color:var(--line-2)}
/* La pastille était écrasée en ellipse : `.city>span` (0,1,1) l'emportait
   sur `.city__pin` (0,1,0) et lui rendait le `flex:1` destiné au bloc de
   texte. Les deux sont maintenant nommés — plus de collision possible. */
.city__ph{width:60px;height:60px;border-radius:50%;flex:0 0 60px;overflow:hidden;
  background:var(--paper)}
.city__ph img{width:100%;height:100%;object-fit:cover;display:block;background:none}
.city__txt{flex:1;min-width:0}
.city b{display:block;font-size:.94rem;letter-spacing:-.02em}
.city em{display:block;font-style:normal;font-size:.75rem;color:var(--fg-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city>svg{width:14px;height:14px;flex:none;color:var(--fg-mute);transition:transform .35s var(--e-out)}
.city:hover>svg{transform:translate(3px,-3px)}
.section--white .city{background:var(--paper);border-color:transparent}
.section--white .city__ph{background:var(--white)}
/* Sur fond noir : cartes blanches, texte en encre. La couleur est posée
   explicitement : sinon le nom de ville hériterait du blanc de la section
   (blanc sur blanc, invisible). Au survol, un liseré violet. */
.section--ink .city{background:#fff;border-color:transparent;color:var(--ink)}
.section--ink .city:hover{border-color:var(--safran);box-shadow:0 14px 30px -18px rgba(100,53,206,.8)}
.section--ink .city em{color:var(--fg-mute)}
.section--ink .city>svg{color:var(--fg-mute)}
.section--ink .city__ph{background:var(--paper)}
@media(max-width:1000px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .cities{grid-template-columns:1fr}
  /* en pleine largeur, la pastille peut respirer encore un peu */
  .city__ph{width:56px;height:56px;flex-basis:56px}
}

/* ---------- PARCOURS JOUR PAR JOUR ---------- */
.days{list-style:none;padding:0;margin:0;position:relative;max-width:860px;margin-inline:auto}
.days::before{content:'';position:absolute;left:23px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(var(--brand),var(--brand-deep),var(--ink));opacity:.3}
.day{position:relative;display:grid;grid-template-columns:48px 1fr;gap:clamp(.9rem,2vw,1.6rem);
  align-items:start;padding-bottom:clamp(1rem,2vw,1.5rem)}
.day:last-child{padding-bottom:0}
.day__n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--font-display);font-size:.9rem;
  z-index:1;box-shadow:0 0 0 6px var(--paper)}
.section--white .day__n{box-shadow:0 0 0 6px var(--white)}
.day:nth-child(1) .day__n{background:var(--safran);color:var(--ink)}
.day:nth-child(2) .day__n{background:var(--majorelle)}
.day:nth-child(3) .day__n{background:var(--zellige)}
.day:nth-child(4) .day__n{background:var(--terracotta)}
.day:nth-child(5) .day__n{background:var(--rose);color:var(--ink)}
.day__c{background:var(--white);border:1px solid var(--line);border-radius:clamp(16px,2vw,22px);
  padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.4rem;
  transition:transform .4s var(--e-out)}
.day:hover .day__c{transform:translateX(4px)}
.section--white .day__c{background:var(--paper);border-color:transparent}
.day__k{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-mute);font-weight:700}
.day__c h3{font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.028em;line-height:1.2}
.day__c p{font-size:.9rem;line-height:1.55;margin:0}

/* ---------- QUARTIERS ---------- */
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.zone{background:var(--white);border:1px solid var(--line);border-radius:clamp(16px,2vw,24px);
  padding:clamp(1.2rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem;
  border-top:4px solid var(--c);transition:transform .45s var(--e-out)}
.zone:hover{transform:translateY(-5px)}
.zone--terracotta{--c:var(--terracotta)} .zone--majorelle{--c:var(--majorelle)} .zone--zellige{--c:var(--zellige)}
.zone__k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c);font-weight:700}
.zone p{font-size:.92rem;line-height:1.6;margin:0}
.section--white .zone{background:var(--paper);border-color:transparent;border-top:4px solid var(--c)}
@media(max-width:900px){.zones{grid-template-columns:1fr}}

/* ---------- BANDE D'APPEL FINALE ---------- */
.ecta{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:clamp(22px,3vw,36px);padding:clamp(2.2rem,6vw,5rem) clamp(1.2rem,4vw,3rem);text-align:center}
.ecta__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(.9rem,1.8vw,1.4rem)}
.ecta__in .hero-type{color:#fff;font-size:clamp(1.6rem,4vw,3.2rem);margin:0}
.ecta__in>p{max-width:52ch;color:rgba(255,255,255,.72);margin:0;font-size:clamp(.95rem,1.15vw,1.08rem)}
.ecta__note{display:inline-flex;align-items:center;gap:.5em;margin:.4rem 0 0;
  font-size:.8rem;color:rgba(255,255,255,.5)}
.ecta__note svg{width:13px;height:13px;color:var(--zellige)}
.ecta__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:1}
.ecta__blob--1{width:44%;aspect-ratio:1;background:var(--terracotta);left:-12%;top:-30%}
.ecta__blob--2{width:38%;aspect-ratio:1;background:var(--majorelle);right:-10%;bottom:-34%}

/* ---------- FORMULAIRE DE COMMANDE ---------- */
.order{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1rem,2.4vw,2rem);align-items:start}
.order__h{font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:-.03em;
  font-size:clamp(1.05rem,1.9vw,1.3rem);margin:clamp(1.4rem,2.6vw,2rem) 0 .9rem}
.order__h:first-child{margin-top:0}
.order__p{margin:-.5rem 0 .8rem;font-size:.88rem}
.order__side{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.1rem);position:sticky;top:100px}
.field--full{grid-column:1/-1}
@media(max-width:900px){.order{grid-template-columns:1fr}.order__side{position:static}}

/* ---------- PASTILLES LARGES ---------- */
.plats--wide{max-width:none;justify-content:center}
.plats--wide .plat{font-size:.9rem;padding:.6rem 1.1rem}

/* ---------- CARTES DU HERO : maintenant des liens ---------- */
.deck__card{text-decoration:none;color:inherit}
.deck__card--stat b{font-family:var(--font-display);font-weight:400}

/* ---------- Correctifs de composition ---------- */

/* Un montant marocain est long : on ne le laisse jamais se couper */
.fig b{white-space:nowrap;gap:.14em;font-size:clamp(1.6rem,3.1vw,2.9rem)}
.fig b i{font-size:.56em;line-height:1}

.proof__lines span{line-height:1.26}
.proof__big{white-space:nowrap;font-size:clamp(2.1rem,5vw,3.9rem);padding-bottom:.1em}
.proof__big i{font-size:.56em;margin-left:.1em}
.proof__sub{margin-top:.4rem}
.proof__rows b{white-space:nowrap}
.proof__rows b i{margin-left:.05em}

.pbox__amt b{white-space:nowrap}
.pbox__amt b i{font-size:.5em;margin-left:.14em}
.opt__top b{white-space:nowrap}

.mission__txt .hero-type{font-size:clamp(1.45rem,2.9vw,2.5rem)}

/* Comparatif : quatre colonnes, la nôtre en carte blanche */
.vs{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr)}
.vs__col li{min-height:54px;align-items:center}
.vs__col--me h4 svg{width:14px;height:14px;color:var(--terracotta)}
.vs__col--me li{min-height:54px}
@media(max-width:1000px){
  .vs{grid-template-columns:1fr 1fr}
  .vs__col--me{grid-column:1/-1}
}
@media(max-width:620px){
  .vs{grid-template-columns:1fr}
}

/* ---------- Bouton WhatsApp flottant ---------- */
.wafab{position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);z-index:880;
  display:inline-flex;align-items:center;gap:0;height:54px;padding:0 15px;border-radius:100px;
  background:#25d366;color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.7);
  transition:gap .4s var(--e-out),padding .4s var(--e-out),transform .35s var(--e-out)}
.wafab svg{width:24px;height:24px;flex:none}
.wafab__t{max-width:0;overflow:hidden;white-space:nowrap;font-size:.9rem;font-weight:700;
  transition:max-width .45s var(--e-out)}
.wafab:hover,.wafab:focus-visible{gap:.55rem;padding-right:20px;transform:translateY(-2px)}
.wafab:hover .wafab__t,.wafab:focus-visible .wafab__t{max-width:200px}
.is-menu .wafab{opacity:0;pointer-events:none}
@media(max-width:560px){.wafab{height:48px;padding:0 12px}.wafab svg{width:21px;height:21px}}

/* ---------- Derniers ajustements ---------- */
.pbox__amt b i{margin-left:.2em}
.case__stats b{font-size:clamp(.9rem,1.6vw,1.15rem)}
.ovw__txt .btn{margin-top:.2rem}

/* ---------- Étiquette d'en-tête sur sa propre ligne ---------- */
.phead__tag{margin:.9rem 0 .2rem}
.phead:not(.phead--left) .phead__tag{display:flex;justify-content:center}

/* ---------- Note de la bande d'appel : l'icône reste sur la 1re ligne ---------- */
.ecta__note{align-items:flex-start;max-width:52ch;text-align:left}
.ecta__note svg{margin-top:.3em}

/* ---------- Mobile : on annule les rotations ----------
   Les cartes portent --rot en style inline, qui l'emporte sur une règle de
   media query : on neutralise donc la transform elle-même, pas la variable. */
@media(max-width:900px){
  .mph,.mph:hover{transform:none}
}
@media(max-width:560px){
  .deck__card,.deck__card:hover{transform:none}
  .case__ph,.case__ph:hover{transform:none}
}

/* ============================================================
   V3 — hero illustré, méthode illustrée, comparatif aligné
   ============================================================ */

/* ============================================================
   VISUEL DU HERO — le site se construit en cinq jours
   ------------------------------------------------------------
   Une seule fenêtre, un seul site, qui traverse en boucle de 26,7 s
   les quatre actes de sa fabrication : le brief, le design, le
   contenu et le référencement, la mise en ligne — où le cadre se
   rétrécit en tablette puis en téléphone et la maquette se
   réagence pour de vrai, par container queries.

   SENS DE LECTURE. L'état par défaut de toutes ces règles est le
   site TERMINÉ : c'est lui qui s'affiche sans JavaScript et en
   mouvement réduit. main.js pose .hv--anim pour rembobiner, puis
   ajoute les classes d'acte au fil de la boucle. D'où les `:not()`
   partout — ils décrivent « pas encore arrivé là », jamais
   l'inverse. Ne jamais placer l'état final derrière une classe.

   La chronologie complète est dans main.js, module 8 bis.
   ============================================================ */

/* La scène ne morphe jamais : c'est elle qui fixe la hauteur, une
   fois pour toutes. Le cadre s'y inscrit et ne fait varier que sa
   largeur — sinon la page saute à chaque acte. */
.hv{position:relative;width:100%;max-width:1060px;
  margin:clamp(2.4rem,5vw,4rem) auto 0;perspective:1600px}
.hv__stage{position:relative;width:100%;aspect-ratio:1060/500;min-height:320px}
.hv__frame{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;width:100%;
  container-type:inline-size;container-name:hv;
  transition:width 1.4s var(--e-spring)}
.hv--tablet .hv__frame{width:52%}
.hv--phone  .hv__frame{width:30%}

.hv__win{position:relative;height:100%;display:flex;flex-direction:column;
  border-radius:clamp(14px,1.8vw,20px);overflow:hidden;background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 48px 90px -40px rgba(60,31,128,.45),0 0 0 1px rgba(100,53,206,.18);
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s var(--e-out),box-shadow .6s var(--e-out)}
.hv--anim:not(.hv--live) .hv__win{box-shadow:0 48px 90px -46px rgba(17,17,18,.55)}

/* halo des trois moments clés : brief envoyé, couleur adoptée, publication */
.hv__win::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;
  border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(100,53,206,0);transition:box-shadow .5s}
.hv--flash .hv__win::after{box-shadow:inset 0 0 0 3px rgba(100,53,206,.5)}

/* ---------- la barre du navigateur ---------- */
.hv__load{position:absolute;inset:0 auto auto 0;height:2px;width:100%;z-index:6;
  transform-origin:0 50%;transform:scaleX(var(--load,0));opacity:var(--loadop,0);
  background:linear-gradient(90deg,var(--terracotta),var(--safran));transition:opacity .4s}
.hv__bar{flex:none;display:flex;align-items:center;gap:.7rem;
  height:clamp(34px,3.4cqw + 26px,44px);padding-inline:clamp(.6rem,1.2vw,1rem);
  background:#e9e6e1;border-bottom:1px solid var(--line)}
.hv__dots{display:flex;gap:5px;flex:none}
.hv__dots i{width:8px;height:8px;border-radius:50%;background:rgba(17,17,18,.16)}
.hv__dots i:first-child{background:var(--terracotta)}
.hv__tab{display:inline-flex;align-items:center;gap:.45em;flex:none;background:var(--white);
  border-radius:8px 8px 0 0;padding:.42em .8em;margin-bottom:-1px;
  font-size:clamp(.6rem,.72vw,.72rem);color:var(--fg-soft)}
.hv__tab em{width:14px;height:14px;border-radius:4px;background:var(--terracotta);color:#fff;
  font-style:normal;font-weight:800;font-size:.62em;display:grid;place-items:center}
.hv__badge{flex:none;display:inline-flex;align-items:center;gap:.4em;padding:.3em .68em;
  border-radius:100px;background:#e2f5ec;color:#0e7a4c;white-space:nowrap;
  font-size:clamp(.55rem,.66vw,.66rem);font-weight:700;
  transition:opacity .4s,transform .5s var(--e-spring)}
.hv__badge i{width:5px;height:5px;border-radius:50%;background:#16b46e;
  animation:hvDot 2.4s ease-in-out infinite}
.hv--anim:not(.hv--online) .hv__badge{opacity:0;transform:scale(.4)}
.hv__adr{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.4em;
  background:var(--white);border-radius:100px;padding:.34em 1em;
  font-size:clamp(.58rem,.7vw,.7rem);color:rgba(17,17,18,.62)}
.hv__lock{display:inline-flex;flex:none;color:var(--zellige);
  transition:opacity .35s,transform .45s var(--e-spring)}
.hv__lock svg{width:11px;height:11px;display:block}
.hv--anim:not(.hv--secure) .hv__lock{opacity:0;transform:scale(.4)}
.hv__url{white-space:nowrap;overflow:hidden}
/* tant que rien n'est publié, l'adresse n'est qu'un squelette */
.hv__ph{width:0;height:7px;border-radius:100px;background:rgba(17,17,18,.12);
  opacity:0;transition:opacity .4s,width .5s var(--e-out)}
.hv--anim:not(.hv--live) .hv__ph{width:clamp(90px,14cqw,150px);opacity:1}
.hv__caret{width:1.5px;height:1em;flex:none;background:var(--fg-soft);opacity:0}
.hv--typing .hv__caret{opacity:1;animation:hvBlink .85s steps(2,end) infinite}
@keyframes hvBlink{50%{opacity:0}}
@keyframes hvDot{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- la page : un seul site, quatre états ---------- */
.hv__page{position:relative;flex:1;min-height:0;overflow:hidden;
  background:var(--paper);padding:clamp(.8rem,2cqw,1.6rem)}
.hv__page > *{transition:opacity .75s var(--e-out),transform .8s var(--e-spring)}
.hv--anim:not(.hv--wire) .hv__nav,
.hv--anim:not(.hv--wire) .hv__hero,
.hv--anim:not(.hv--wire) .hv__cards{opacity:0;transform:translateY(10px) scale(.96)}
.hv--wire .hv__nav{transition-delay:.1s}
.hv--wire .hv__hero{transition-delay:.4s}
.hv--wire .hv__cards{transition-delay:.75s}

.hv__nav{display:flex;align-items:center;gap:clamp(.5rem,1.4cqw,1.2rem);
  padding-bottom:clamp(.7rem,1.6cqw,1.3rem)}
.hv__logo{display:inline-flex;align-items:center;gap:.4em;flex:none}
.hv__logo i{width:clamp(12px,1.4cqw,16px);aspect-ratio:1;border-radius:4px;
  background:var(--terracotta);transition:background .8s}
.hv__logo u{width:clamp(38px,5cqw,54px);height:clamp(6px,.8cqw,8px);border-radius:100px;
  background:var(--ink);text-decoration:none;display:block;transition:background .8s}
.hv__links{display:flex;gap:clamp(.5rem,1.2cqw,1rem);margin-left:auto}
.hv__links i{width:clamp(24px,3cqw,34px);height:clamp(5px,.7cqw,7px);border-radius:100px;
  background:rgba(17,17,18,.16)}
.hv__burger{display:none;width:18px;height:12px;margin-left:auto;flex:none;
  background:linear-gradient(var(--fg-mute) 2px,transparent 0) 0 0/100% 5px repeat}
.hv__navcta{width:clamp(46px,6cqw,68px);height:clamp(16px,2.2cqw,24px);border-radius:100px;
  background:var(--terracotta);flex:none;transition:background .8s,box-shadow .6s}
.hv--anim:not(.hv--color) .hv__logo i{background:var(--fg-mute)}
.hv--anim:not(.hv--color) .hv__logo u{background:rgba(17,17,18,.35)}
.hv--anim:not(.hv--color) .hv__navcta{background:rgba(17,17,18,.22)}

.hv__hero{display:flex;flex-direction:column;align-items:center;gap:clamp(.35rem,.75cqw,.6rem);
  background:var(--white);border-radius:clamp(10px,1.4cqw,14px);
  padding:clamp(.9rem,2.6cqw,2rem) clamp(.8rem,2cqw,1.6rem);
  box-shadow:0 12px 34px -22px rgba(17,17,18,.4);transition:box-shadow .6s}
.hv--anim:not(.hv--live) .hv__hero{box-shadow:none}
.hv__eyebrow{width:clamp(70px,10cqw,110px);height:clamp(10px,1.4cqw,15px);border-radius:100px;
  background:var(--terracotta-soft);transition:background .8s}
.hv__t1{width:min(78%,520px);height:clamp(14px,2.4cqw,26px);border-radius:6px;
  background:var(--ink);transition:background .8s}
.hv__t2{position:relative;width:min(52%,340px);height:clamp(14px,2.4cqw,26px);border-radius:6px;
  background:var(--ink);overflow:hidden;transition:background .8s}
.hv__t2 em{position:absolute;inset:0 0 0 auto;width:38%;border-radius:100px;
  background:var(--terracotta);transition:width .6s var(--e-out)}
.hv--anim:not(.hv--color) .hv__eyebrow{background:rgba(17,17,18,.10)}
.hv--anim:not(.hv--color) .hv__t1,
.hv--anim:not(.hv--color) .hv__t2{background:rgba(17,17,18,.32)}
.hv--anim:not(.hv--color) .hv__t2 em{width:0}
.hv__lead{width:min(62%,420px);height:clamp(5px,.8cqw,8px);border-radius:100px;
  background:rgba(17,17,18,.13);margin-top:.3rem}
.hv__lead--2{width:min(44%,300px);margin-top:0}
.hv__lead--3{width:min(52%,350px);margin-top:0;
  transition:height .5s var(--e-out),opacity .4s}
.hv__lead--4{width:min(36%,240px);margin-top:0;
  transition:height .5s var(--e-out),opacity .4s}
.hv--anim:not(.hv--content) .hv__lead--3,
.hv--anim:not(.hv--content) .hv__lead--4{height:0;opacity:0}
.hv__btns{display:flex;gap:.5rem;margin-top:clamp(.5rem,1.3cqw,.9rem)}
.hv__btns u{width:clamp(56px,8cqw,92px);height:clamp(18px,2.6cqw,30px);border-radius:100px;
  background:var(--ink);display:block;text-decoration:none;transition:background .8s,box-shadow .6s}
.hv__btns u.is-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(17,17,18,.16);
  transition:width .5s var(--e-spring),opacity .4s}
.hv--anim:not(.hv--color) .hv__btns u:first-child{background:rgba(17,17,18,.3)}
.hv--anim:not(.hv--grid) .hv__btns u.is-ghost{width:0;opacity:0}

/* Les trois cartes sont placées sur la même rangée : la première les
   couvre toutes, puis se divise. La rangée garde donc la hauteur d'une
   seule carte — c'est ce qui empêchait la fenêtre de rester stable. */
.hv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,1cqw,.8rem);
  margin-top:clamp(.5rem,1.4cqw,1rem)}
.hv__cards span{height:clamp(34px,6cqw,74px);border-radius:clamp(8px,1.2cqw,12px);
  background:rgba(17,17,18,.07);transition:background .8s,opacity .7s,transform .8s var(--e-spring)}
.hv__cards span:nth-child(1){background:var(--ink)}
.hv__cards span:nth-child(3){background:var(--terracotta-soft)}
.hv--anim:not(.hv--color) .hv__cards span:nth-child(1),
.hv--anim:not(.hv--color) .hv__cards span:nth-child(3){background:rgba(17,17,18,.07)}
.hv--anim:not(.hv--grid) .hv__cards span:first-child{grid-area:1/1/2/4}
.hv--anim:not(.hv--grid) .hv__cards span:nth-child(n+2){grid-area:1/1;opacity:0;transform:scale(.9)}

/* la maquette se réagence pour de vrai quand le cadre rétrécit */
@container hv (max-width:560px){
  .hv__cards{grid-template-columns:repeat(2,1fr)}
  .hv__links i:nth-child(n+3){display:none}
}
@container hv (max-width:330px){
  .hv__cards{grid-template-columns:1fr}
  /* empilées, trois cartes coûtent trois fois leur hauteur : on les
     tasse pour que la page tienne toujours dans le cadre */
  .hv__cards span{height:clamp(22px,7cqw,34px)}
  .hv__links{display:none}
  .hv__burger{display:block}
  .hv__btns{flex-direction:column;align-items:stretch;width:70%}
  .hv__btns u.is-ghost{width:auto}
  .hv__tab,.hv__badge{display:none}
}

/* ---------- acte 1 : le brief ----------
   La carte est centrée par la mise en page, pas par une translation :
   le curseur déduit ses cibles des offsets, et un centrage par
   transformation les décalerait tous de la moitié de la carte. */
.hv__modal{position:absolute;inset:clamp(.8rem,2cqw,1.6rem);z-index:5;
  display:grid;place-items:center;pointer-events:none}
.hv__brief{width:min(100%,clamp(280px,46cqw,440px));background:var(--white);
  border-radius:clamp(12px,1.6cqw,18px);border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(17,17,18,.45);
  padding:clamp(.9rem,2.2cqw,1.5rem);display:flex;flex-direction:column;gap:.5rem;
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .5s var(--e-out),transform .6s var(--e-spring)}
.hv--brief .hv__brief{opacity:1;transform:none}
.hv__brief h4{font-size:clamp(.62rem,1.1cqw,.72rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);font-weight:700}
.hv__chk{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:10px;
  font-size:clamp(.64rem,1.15cqw,.8rem);font-weight:600;color:var(--fg-soft);
  background:rgba(17,17,18,.025);transition:background .35s,color .35s}
.hv__chk i{width:16px;height:16px;border-radius:5px;flex:none;
  box-shadow:inset 0 0 0 1.6px var(--line-2);display:grid;place-items:center;
  transition:background .3s,box-shadow .3s}
.hv__chk i svg{width:9px;height:9px;color:#fff;opacity:0;transform:scale(.4);
  transition:opacity .25s,transform .35s var(--e-spring)}
.hv__chk.is-on{background:var(--terracotta-soft);color:var(--fg)}
.hv__chk.is-on i{background:var(--terracotta);box-shadow:inset 0 0 0 1.6px var(--terracotta)}
.hv__chk.is-on i svg{opacity:1;transform:none}
.hv__note{margin-top:.1rem;min-height:2.2em;border-radius:10px;padding:.42rem .6rem;
  box-shadow:inset 0 0 0 1.5px var(--line);font-size:clamp(.62rem,1.1cqw,.76rem);
  color:var(--fg-soft);line-height:1.45;transition:box-shadow .3s}
.hv--focus .hv__note{box-shadow:inset 0 0 0 1.6px var(--terracotta),0 0 0 3px rgba(100,53,206,.14)}
.hv__note b{font-weight:500}
.hv__send{align-self:flex-start;margin-top:.35rem;padding:.5rem 1rem;border-radius:100px;
  background:var(--ink);color:#fff;font-size:clamp(.62rem,1.1cqw,.76rem);font-weight:700;
  transition:background .3s}
.hv--sent .hv__send{background:var(--terracotta)}

/* ---------- acte 2 : la palette ---------- */
.hv__palette{position:absolute;left:-14px;top:30%;z-index:8;display:flex;flex-direction:column;
  gap:.4rem;padding:.5rem;border-radius:100px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(17,17,18,.42);
  opacity:0;transform:translateX(-24px) scale(.9);
  transition:opacity .45s var(--e-out),transform .6s var(--e-spring)}
.hv--palette .hv__palette{opacity:1;transform:none}
.hv__sw{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .35s var(--e-spring),box-shadow .3s,opacity .3s}
.hv--picked .hv__sw--pick{transform:scale(1.3);
  box-shadow:0 0 0 3px rgba(100,53,206,.28),inset 0 0 0 1px rgba(0,0,0,.08)}
/* pendant le glisser, la pastille est « dans la main » : sa case se vide */
.hv--drag .hv__sw--pick{opacity:.18;transform:scale(.85)}

/* ---------- acte 3 : le panneau de référencement ---------- */
.hv__seo{position:absolute;right:clamp(.8rem,2cqw,1.6rem);top:20%;z-index:8;
  width:clamp(140px,20cqw,186px);background:var(--white);border-radius:16px;
  border:1px solid var(--line);box-shadow:0 24px 55px -26px rgba(17,17,18,.45);
  padding:.85rem .9rem;display:flex;flex-direction:column;gap:.5rem;
  opacity:0;transform:translateX(26px) scale(.95);
  transition:opacity .45s var(--e-out),transform .6s var(--e-spring)}
.hv--seo .hv__seo{opacity:1;transform:none}
.hv__seo h4{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);font-weight:700}
.hv__gauge{display:flex;align-items:center;gap:.7rem}
.hv__gauge svg{width:52px;height:52px;flex:none;transform:rotate(-90deg)}
.hv__gauge circle{fill:none;stroke-width:6;stroke-linecap:round}
.hv__gtrack{stroke:rgba(17,17,18,.08)}
.hv__gval{stroke:var(--terracotta);stroke-dasharray:132;stroke-dashoffset:0}
.hv__gnum{font-family:var(--font-display);font-size:1.2rem;line-height:1;letter-spacing:-.02em}
.hv__gnum small{font-size:.53rem;font-family:var(--font-body);color:var(--fg-mute);display:block;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem;font-weight:700}
.hv__seo li{list-style:none;display:flex;align-items:center;gap:.45rem;font-size:.63rem;
  font-weight:600;color:var(--fg-mute);transition:color .35s}
.hv__seo li i{width:13px;height:13px;border-radius:50%;flex:none;background:rgba(17,17,18,.08);
  display:grid;place-items:center;transition:background .3s}
.hv__seo li i svg{width:7px;height:7px;color:#fff;opacity:0;transform:scale(.4);
  transition:opacity .25s,transform .35s var(--e-spring)}
.hv__seo li.is-on{color:var(--fg)}
.hv__seo li.is-on i{background:#16b46e}
.hv__seo li.is-on i svg{opacity:1;transform:none}

/* ---------- le curseur ---------- */
.hv__cursor{position:absolute;z-index:12;left:0;top:0;width:24px;height:24px;margin:-3px 0 0 -3px;
  pointer-events:none;opacity:0;transition:opacity .3s;
  filter:drop-shadow(0 5px 12px rgba(17,17,18,.34))}
.hv__cursor svg{display:block;width:100%;height:100%}
.hv__cursor.is-on{opacity:1}
.hv__cursor.is-press{scale:.8;transition:scale .12s}
.hv__cursor::before{content:'';position:absolute;left:13px;top:13px;width:18px;height:18px;
  border-radius:50%;background:var(--terracotta);box-shadow:0 6px 16px -4px rgba(60,31,128,.6);
  opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s var(--e-spring)}
.hv--drag .hv__cursor::before{opacity:1;transform:none}
.hv__ring{position:absolute;z-index:11;width:34px;height:34px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid var(--terracotta);pointer-events:none;opacity:0}
.hv__ring.is-go{animation:hvRing .62s var(--e-out)}
@keyframes hvRing{from{opacity:.85;transform:scale(.25)}to{opacity:0;transform:scale(1)}}

/* ---------- la frise des cinq jours ---------- */
.hv__days{margin:clamp(1.2rem,2.6vw,1.9rem) auto 0;max-width:780px;position:relative}
.hv__rail{position:relative;height:2px;background:var(--line);border-radius:2px}
.hv__fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--zellige),var(--terracotta),var(--safran))}
.hv__marks{display:flex;justify-content:space-between;margin-top:-5px}
.hv__mark{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hv__mark b{width:8px;height:8px;border-radius:50%;background:var(--terracotta);
  transform:scale(1.45);transition:background .35s,transform .45s var(--e-spring)}
.hv__mark span{font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--fg);
  text-transform:uppercase;transition:color .35s;white-space:nowrap}
.hv--anim .hv__mark:not(.is-on) b{background:var(--line-2);transform:none}
.hv--anim .hv__mark:not(.is-on) span{color:var(--fg-mute)}
.hv__act{text-align:center;margin-top:clamp(.8rem,1.8vw,1.2rem);font-family:var(--font-display);
  font-size:clamp(.72rem,1.4vw,.95rem);letter-spacing:.01em;text-transform:uppercase;line-height:1.5}
.hv__act i{font-style:normal;color:var(--terracotta)}

/* ---------- replis ---------- */
/* Le curseur est une métaphore de bureau : inutile au doigt. On se fie
   au pointeur, pas à la largeur — une tablette de 800 px reste tactile. */
@media(hover:none),(pointer:coarse){.hv__cursor,.hv__ring{display:none}}
@media(max-width:900px){
  /* Sous 900 px le cadre est déjà étroit : le rétrécir encore
     donnerait un timbre-poste au lieu d'un téléphone. */
  .hv--tablet .hv__frame,.hv--phone .hv__frame{width:100%}
  .hv__stage{aspect-ratio:auto;height:clamp(320px,52vw,430px)}
}
@media(max-width:560px){
  .hv__mark span{font-size:.55rem}
  .hv__stage{height:clamp(390px,100vw,440px)}
}
@media(max-width:400px){
  .hv__mark:nth-child(even) span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hv__win{transform:none;transition:none}
  .hv__cursor,.hv__ring,.hv__load{display:none}
  .hv__badge i{animation:none}
}

/* ============================================================
   VISUEL DU HERO, VERSION RÉALISTE — en production sur l'accueil
   ------------------------------------------------------------
   Tout est porté par `.hvpro`, un PARENT de `.hv`. Raison : main.js
   fait `hv.className = 'hv in hv--anim'` à chaque tour de boucle et
   écrase les classes du nœud `.hv`. Sur un parent, la variante survit
   — et l'animation d'origine pilote le tout sans une ligne de JS en plus.

   SENS DE LECTURE, comme pour l'original : l'état par défaut est le site
   TERMINÉ. C'est lui qui s'affiche sans JavaScript et en mouvement réduit.
   Les `:not()` décrivent « pas encore arrivé là », jamais l'inverse.

   Le récit gagne une étape lisible : le squelette gris devient un vrai
   site au moment exact où l'acte « contenu & référencement » commence
   — ce que l'ancienne version ne faisait qu'évoquer.

   Le site montré est esimmaroc.com, réellement livré par l'agence :
   la maquette est une preuve, pas une invention. Ses couleurs sont
   celles du client (voir --demo), pas celles de l'agence.
   ============================================================ */

/* ---------- la page : plus de marge, c'est un vrai site ----------
   Colonne flexible : la barre de navigation et les plats prennent leur
   hauteur naturelle, le hero absorbe le reste. La fenêtre change de
   largeur à chaque acte (bureau → tablette → téléphone) et sa hauteur
   est fixée par la scène : sans cette élasticité, le contenu déborderait
   et `overflow:hidden` couperait les prix des plats. */
.hvpro{--demo:#18e05a;--demo-deep:#0fba48;--demo-text:#0a7c31;
  --demo-ink:#1a2b1c;--demo-bg:#f7f9f5;--demo-pale:#e6f9ed;--demo-on:#06301a;
  --onde:24,224,90}   /* lue par main.js pour l'onde au clic */

/* ---------- LA COULEUR QU'ON PREND EST CELLE QU'ON POSE ----------
   Toute la chaîne du choix de couleur était restée au violet de
   l'agence : on prenait le vert du client dans la palette et c'est du
   violet qui se posait. Cinq endroits, tous corrigés ici.
   Le reste de l'habillage — pastilles du navigateur, panneau de
   référencement, frise des jours — garde le violet : ce sont les
   outils de l'agence, pas le site du client. */
.hvpro .hv__cursor::before{background:var(--demo);            /* la couleur « en main » */
  box-shadow:0 6px 16px -4px rgba(10,124,49,.55)}
.hvpro .hv__ring{border-color:var(--demo)}                     /* l'onde du clic */
.hvpro .hv--picked .hv__sw--pick{                              /* la pastille choisie */
  box-shadow:0 0 0 3px rgba(24,224,90,.38),inset 0 0 0 1px rgba(0,0,0,.10)}
.hvpro .hv--flash .hv__win::after{                             /* l'éclair de validation */
  box-shadow:inset 0 0 0 3px rgba(24,224,90,.55)}
.hvpro .hv__load{background:linear-gradient(90deg,var(--demo-deep),var(--demo))}
.hvpro .hv__page{padding:0;background:var(--demo-bg);display:flex;flex-direction:column}
.hvpro .hv__nav,.hvpro .hv__cards{flex:none}
.hvpro .hv__hero{flex:1;min-height:0;justify-content:center}

/* ---------- barre de navigation ---------- */
.hvpro .hv__tab em{background:var(--demo);color:var(--demo-on)}
.hvpro .hv__nav{padding:clamp(.45rem,1.3cqw,.85rem) clamp(.6rem,1.9cqw,1.2rem);
  border-bottom:1px solid rgba(26,43,28,.10);background:#fff}
.hvpro .hv__logo i{width:clamp(13px,1.5cqw,17px);border-radius:5px;background:var(--demo)}
.hvpro .hv__logo u{display:inline-block;width:auto;height:auto;background:none;
  font-family:var(--font-body);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(.58rem,1.2cqw,.84rem);line-height:1.2;white-space:nowrap}
.hvpro .hv__links i{width:auto;height:auto;background:none;font-style:normal;
  font-size:clamp(.5rem,1cqw,.7rem);color:var(--fg-soft);white-space:nowrap;line-height:1.2}
.hvpro .hv__navcta{width:auto;height:auto;padding:.45em .95em;border-radius:100px;
  background:var(--demo);color:var(--demo-on);line-height:1.2;white-space:nowrap;
  font-size:clamp(.48rem,.98cqw,.68rem);font-weight:700}

/* ---------- le hero du restaurant : photo, voile, texte ---------- */
.hvpro .hv__hero{--skel:rgba(255,255,255,.42);
  position:relative;overflow:hidden;border-radius:0;box-shadow:none;
  padding:clamp(.5rem,1.5cqw,1.1rem) clamp(.7rem,2.2cqw,1.5rem);background:var(--ink)}
.hvpro .hv__shot{position:absolute;inset:0;display:block}
.hvpro .hv__shot img{width:100%;height:100%;object-fit:cover;display:block;background:none}
/* Dégradé repris d'esimmaroc.com — même angle, même teinte
   rgba(13,26,15). Seules les opacités du milieu sont renforcées :
   sur le vrai site le hero est haut et le texte tombe dans la zone
   sombre du bas ; ici la fenêtre est miniature et le texte se centre
   pile sur le palier à 18 %, où du blanc sur une photo de terre claire
   devient illisible. .42/.18/.65 → .54/.44/.74. */
.hvpro .hv__shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(13,26,15,.54) 0%,rgba(13,26,15,.44) 52%,rgba(13,26,15,.74) 100%)}
.hvpro .hv__hero-in{position:relative;z-index:2;width:100%;display:flex;
  flex-direction:column;align-items:center;gap:clamp(.2rem,.5cqw,.42rem)}

.hvpro .hv__eyebrow{width:auto;height:auto;border-radius:100px;padding:.32em .85em;
  background:rgba(255,255,255,.18);color:#fff;white-space:nowrap;line-height:1.2;
  font-size:clamp(.42rem,.88cqw,.6rem);font-weight:600;letter-spacing:.01em}
/* esimmaroc.com titre en sans-serif nette, casse normale : la maquette
   doit lui ressembler, pas ressembler à l'agence. C'est aussi plus
   lisible qu'une display en capitales à cette taille. */
.hvpro .hv__t1,.hvpro .hv__t2{width:auto;height:auto;background:none;border-radius:0;
  overflow:visible;color:#fff;font-family:var(--font-body);font-weight:700;
  text-transform:none;letter-spacing:-.022em;
  font-size:clamp(.8rem,2.05cqw,1.5rem);line-height:1.2}
.hvpro .hv__t2 em{position:static;inset:auto;width:auto;display:inline-block;
  background:var(--demo);color:var(--demo-on);border-radius:.28em;padding:.02em .3em;font-style:normal}
.hvpro .hv__lead{width:auto;height:auto;background:none;margin:0;line-height:1.45;
  color:rgba(255,255,255,.84);font-size:clamp(.44rem,.94cqw,.64rem)}
.hvpro .hv__btns{margin-top:clamp(.35rem,1cqw,.7rem);gap:.4rem}
.hvpro .hv__btns u{width:auto;height:auto;border-radius:100px;padding:.52em 1.05em;
  background:var(--demo);color:var(--demo-on);line-height:1.2;white-space:nowrap;
  font-size:clamp(.44rem,.92cqw,.64rem);font-weight:700}
.hvpro .hv__btns u.is-ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.5)}

/* ---------- « Comment ça marche » : titre de section + trois étapes ---------- */
.hvpro .hv__sect{flex:none;display:flex;flex-direction:column;align-items:center;
  gap:clamp(.15rem,.4cqw,.35rem);text-align:center;
  padding:clamp(.5rem,1.5cqw,1rem) clamp(.6rem,1.9cqw,1.2rem) 0}
.hvpro .hv__sect-k{color:var(--demo-text);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;font-size:clamp(.36rem,.72cqw,.5rem)}
.hvpro .hv__sect-t{color:var(--demo-ink);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;font-size:clamp(.56rem,1.35cqw,.95rem)}

.hvpro .hv__cards{margin-top:0;gap:clamp(.3rem,.85cqw,.65rem);
  padding:clamp(.4rem,1.1cqw,.75rem) clamp(.6rem,1.9cqw,1.2rem) clamp(.5rem,1.5cqw,.95rem)}
.hvpro .hv__cards .hv__card{height:auto;border-radius:clamp(5px,.9cqw,10px);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(26,43,28,.08);
  padding:clamp(.35rem,1cqw,.7rem) clamp(.3rem,.8cqw,.55rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.12rem,.35cqw,.3rem);transform:none}
/* Une carte de forfait : bloc de durée, intitulé, prix. Le rapport de
   La pastille numérotée du site réel : disque vert pâle, chiffre vert. */
.hvpro .hv__card-ph{display:flex;align-items:center;justify-content:center;
  width:clamp(20px,3.4cqw,38px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--demo-pale);margin-bottom:clamp(.1rem,.3cqw,.25rem)}
.hvpro .hv__card-ph u{text-decoration:none;font-family:var(--font-body);font-weight:700;
  letter-spacing:-.02em;line-height:1;color:var(--demo-text);
  font-size:clamp(.42rem,.92cqw,.66rem)}
.hvpro .hv__card b{color:var(--demo-ink);font-weight:700;line-height:1.22;
  font-size:clamp(.42rem,.88cqw,.62rem)}
.hvpro .hv__card em{color:#5d6b60;font-style:normal;font-weight:500;line-height:1.35;
  font-size:clamp(.36rem,.76cqw,.53rem)}

/* ============================================================
   LE SQUELETTE — uniquement pendant l'animation
   Avant l'acte « contenu », le site n'a ni photos ni textes : ce sont
   les mêmes blocs gris que dans la version d'origine. C'est le passage
   de l'un à l'autre qui raconte la rédaction et l'intégration.
   ============================================================ */
.hvpro .hv__shot,.hvpro .hv__card-ph,.hvpro .hv__card-ph u,
.hvpro .hv__sect-k,.hvpro .hv__sect-t,.hvpro .hv__cards .hv__card,
.hvpro .hv__logo u,.hvpro .hv__links i,.hvpro .hv__navcta,
.hvpro .hv__eyebrow,.hvpro .hv__t1,.hvpro .hv__t2,.hvpro .hv__lead,.hvpro .hv__btns u,
.hvpro .hv__card b,.hvpro .hv__card em{
  transition:opacity .6s var(--e-out),color .5s var(--e-out),background-color .7s var(--e-out),
             width .5s var(--e-out),height .5s var(--e-out)}

/* photos absentes */
.hvpro .hv--anim:not(.hv--content) .hv__shot{opacity:0}
.hvpro .hv--anim:not(.hv--content) .hv__card-ph u{color:transparent}
/* le bloc de durée ne prend la couleur du client qu'à l'acte « palette » */
.hvpro .hv--anim:not(.hv--color) .hv__card-ph,
.hvpro .hv--anim:not(.hv--color) .hv__card--hi .hv__card-ph{background:rgba(17,17,18,.10)}
.hvpro .hv--anim:not(.hv--color) .hv__btns u{background:var(--skel)}

/* fond du hero : gris tant que la couleur n'est pas posée */
.hvpro .hv--anim:not(.hv--color) .hv__hero{--skel:rgba(17,17,18,.22);background:rgba(17,17,18,.09)}

/* textes remplacés par leurs barres */
.hvpro .hv--anim:not(.hv--content) .hv__logo u{color:transparent;background:rgba(17,17,18,.34);
  width:clamp(34px,4.6cqw,50px);height:clamp(6px,.8cqw,8px);border-radius:100px}
.hvpro .hv--anim:not(.hv--content) .hv__links i{color:transparent;background:rgba(17,17,18,.16);
  width:clamp(22px,2.8cqw,32px);height:clamp(5px,.7cqw,7px);border-radius:100px}
.hvpro .hv--anim:not(.hv--content) .hv__navcta{color:transparent;
  width:clamp(42px,5.6cqw,62px);height:clamp(15px,2.1cqw,22px);padding:0}
.hvpro .hv--anim:not(.hv--color) .hv__navcta{background:rgba(17,17,18,.22)}
.hvpro .hv--anim:not(.hv--color) .hv__logo i{background:var(--fg-mute)}

.hvpro .hv--anim:not(.hv--content) .hv__eyebrow{color:transparent;background:var(--skel);
  width:clamp(58px,8cqw,92px);height:clamp(9px,1.3cqw,14px);padding:0}
.hvpro .hv--anim:not(.hv--content) .hv__t1{color:transparent;background:var(--skel);
  width:min(72%,320px);height:clamp(12px,2cqw,22px);border-radius:5px}
.hvpro .hv--anim:not(.hv--content) .hv__t2{color:transparent;background:var(--skel);
  width:min(48%,210px);height:clamp(12px,2cqw,22px);border-radius:5px}
.hvpro .hv--anim:not(.hv--content) .hv__t2 em{opacity:0}
.hvpro .hv--anim:not(.hv--content) .hv__lead{color:transparent;background:var(--skel);
  width:min(58%,260px);height:clamp(4px,.7cqw,7px);border-radius:100px;opacity:.7}
.hvpro .hv--anim:not(.hv--content) .hv__lead--2{width:min(42%,190px)}
.hvpro .hv--anim:not(.hv--content) .hv__btns u{color:transparent;background:var(--skel);
  width:clamp(48px,7cqw,84px);height:clamp(15px,2.2cqw,25px);padding:0;box-shadow:none}
.hvpro .hv--anim:not(.hv--content) .hv__card b,
.hvpro .hv--anim:not(.hv--content) .hv__card em{color:transparent;background:rgba(17,17,18,.14);
  border-radius:100px;height:clamp(4px,.65cqw,6px);width:70%}
.hvpro .hv--anim:not(.hv--content) .hv__card em{width:45%}
/* la carte n'est blanche qu'une fois le contenu écrit */
.hvpro .hv--anim:not(.hv--content) .hv__cards .hv__card{background:rgba(17,17,18,.05);box-shadow:none}
.hvpro .hv--anim:not(.hv--content) .hv__sect-k,
.hvpro .hv--anim:not(.hv--content) .hv__sect-t{color:transparent;background:rgba(17,17,18,.16);
  border-radius:100px}
.hvpro .hv--anim:not(.hv--content) .hv__sect-k{width:clamp(40px,6cqw,70px);height:clamp(4px,.6cqw,6px)}
.hvpro .hv--anim:not(.hv--content) .hv__sect-t{width:clamp(90px,14cqw,170px);height:clamp(7px,1.1cqw,12px)}
/* le titre de section apparaît avec le reste de la page, à l'acte « design » */
.hvpro .hv--anim:not(.hv--wire) .hv__sect{opacity:0;transform:translateY(10px) scale(.96)}
.hvpro .hv--wire .hv__sect{transition-delay:.75s}

/* Avant l'acte « grille », la première carte couvre les trois colonnes.
   Un rapport d'image lui donnerait alors une hauteur proportionnelle à
   toute la largeur de la fenêtre (425 px sur 1020) : elle écraserait le
   hero. Pendant cette phase, la vignette est donc un bloc de hauteur
   fixe — exactement comme les blocs gris de la version d'origine. */
.hvpro .hv--anim:not(.hv--grid) .hv__card-ph{aspect-ratio:auto;height:clamp(26px,4.4cqw,52px)}

/* les deux dernières lignes n'existent qu'après la rédaction */
.hvpro .hv--anim:not(.hv--content) .hv__lead--3,
.hvpro .hv--anim:not(.hv--content) .hv__lead--4{height:0;opacity:0;margin:0}

/* ---------- replis du cadre : tablette puis téléphone ---------- */
@container hv (max-width:560px){
  .hvpro .hv__lead--3,.hvpro .hv__lead--4{display:none}
}
@container hv (max-width:330px){
  /* trois plats empilés ne tiendraient pas : on n'en garde qu'un */
  .hvpro .hv__cards .hv__card:nth-child(n+2){display:none}
  .hvpro .hv__btns{flex-direction:column;align-items:stretch;width:80%}
  .hvpro .hv__btns u{width:auto}
}

/* ---------- MÉTHODE : quatre cartes illustrées ---------- */
.steps{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.step{display:flex;flex-direction:column}
.step__body{min-height:0;flex:1;text-align:center;align-items:center;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(.9rem,1.6vw,1.2rem) clamp(1.2rem,2.2vw,1.7rem);gap:.4rem}
.step__body h4{font-size:clamp(1rem,1.5vw,1.25rem)}
.step__body p{font-size:.85rem;opacity:.9;max-width:26ch}
.step__k{margin-bottom:.1rem}
.step--cta .step__body{border-radius:var(--r-lg) var(--r-lg) 0 0}
.step__cta{display:flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--white);color:var(--ink);border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:clamp(.85rem,1.5vw,1.1rem);font-weight:700;font-size:.9rem;box-shadow:var(--sh-2)}
.step__cta span{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;transition:transform .35s var(--e-out)}
.step__cta span svg{width:12px;height:12px}
.step__cta:hover span{transform:translate(2px,-2px)}
/* la lavande est claire : du blanc dessus tombe à 2,8:1 */
.step--safran .step__body,.step--safran .step__tab{color:var(--ink)}
.step--rose .step__body,.step--rose .step__tab{color:var(--ink)}

/* les petites interfaces */
.ill{width:100%;margin-bottom:clamp(.7rem,1.4vw,1.1rem);position:relative}

.ill--order{display:flex;flex-direction:column;gap:.4rem}
.ill__row{display:flex;align-items:center;gap:.55rem;background:var(--white);
  border-radius:10px;padding:.55rem .65rem;text-align:left;color:var(--ink)}
.ill__row b{display:block;font-size:.78rem;line-height:1.15}
.ill__row em{display:block;font-style:normal;font-size:.68rem;color:var(--fg-mute);margin-top:.1rem}
.ill__ck{width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand);color:#fff}
.ill__ck svg{width:10px;height:10px}
.ill__ck--now{background:var(--ink);position:relative}
.ill__ck--now::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.ill__ck--todo{background:rgba(17,17,18,.1)}

.ill--brief .ill__card{background:var(--white);border-radius:12px;padding:.75rem;text-align:left;color:var(--ink)}
.ill__lbl{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-mute);font-weight:700;margin-bottom:.5rem}
.ill__chips{display:flex;flex-wrap:wrap;gap:.28rem;margin-bottom:.65rem}
.ill__chips i{font-style:normal;font-size:.66rem;border-radius:100px;padding:.24rem .55rem;
  border:1px solid var(--line);color:var(--fg-soft)}
.ill__chips i.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ill__bar{height:6px;border-radius:100px;background:rgba(17,17,18,.1);overflow:hidden}
.ill__bar span{display:block;height:100%;border-radius:100px;background:var(--brand)}
.ill__meta{display:block;margin-top:.35rem;font-size:.65rem;color:var(--fg-mute)}

.ill--build .ill__win{background:var(--white);border-radius:12px;overflow:hidden}
.ill__bar-top{display:flex;gap:4px;padding:.42rem .55rem;background:#eceae6}
.ill__bar-top i{width:6px;height:6px;border-radius:50%;background:rgba(17,17,18,.16)}
.ill__bar-top i:first-child{background:var(--brand)}
.ill__page{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:.55rem}
.ill__page span{border-radius:5px;background:rgba(17,17,18,.09)}
.ill__page .b1{grid-column:1/-1;height:26px;background:var(--ink)}
.ill__page .b2{grid-column:1/-1;height:9px;width:70%}
.ill__page .b3,.ill__page .b4,.ill__page .b5{height:22px}
.ill__page .b3{background:var(--brand);opacity:.85}
.ill__page .b5{grid-column:1/-1;height:9px;width:45%}

.ill--live{display:flex;flex-direction:column;gap:.45rem}
.ill__serp{display:flex;align-items:center;gap:.5rem;background:var(--white);
  border-radius:10px;padding:.55rem .65rem;text-align:left;color:var(--ink)}
.ill__fav{width:22px;height:22px;border-radius:6px;background:var(--brand);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:.7rem}
.ill__serp b{display:block;font-size:.76rem;line-height:1.15}
.ill__serp em{display:block;font-style:normal;font-size:.66rem;color:var(--fg-mute);margin-top:.1rem}
.ill__gauge{background:var(--white);border-radius:10px;padding:.5rem;color:var(--ink);
  display:flex;align-items:baseline;justify-content:center;gap:.4rem}
.ill__gauge b{font-family:var(--font-display);font-weight:400;font-size:1.5rem;
  letter-spacing:-.04em;line-height:1;color:var(--brand)}
.ill__gauge em{font-style:normal;font-size:.66rem;color:var(--fg-mute)}

.ill__pill{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.35em;
  background:var(--ink);color:#fff;border-radius:100px;padding:.3rem .6rem;
  font-size:.64rem;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.ill__pill svg{width:10px;height:10px}
.ill__pill--a{top:-8px;right:-6px}
.ill__pill--b{bottom:-8px;left:-6px;background:var(--white);color:var(--ink)}
.ill__pill--c{align-self:center;position:static;margin-top:.1rem}

@media(max-width:1040px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step,.step:hover{transform:none}}

/* ---------- Réalisations : on reste dans la famille rouge/noir ---------- */
.case__go{background:var(--ink)}
.case__link{color:var(--brand)}

/* ---------- COMPARATIF ----------
   Une grille de N lignes ; notre colonne est un enfant qui reprend les mêmes
   lignes (`grid-template-rows: subgrid`) : les sept critères restent alignés
   au pixel près, et la carte blanche est d'un seul tenant. */
.vs{position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr);
  grid-template-rows:repeat(var(--n,8),auto);
  column-gap:clamp(.8rem,2vw,1.6rem);row-gap:0;align-items:stretch}

.vs__h{display:flex;align-items:flex-end;padding-bottom:1rem;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700}
.vs__k,.vs__v{display:flex;align-items:center;min-height:58px;padding-block:.9rem;
  font-size:.9rem;line-height:1.35;border-bottom:1px solid var(--line-inv)}
.vs__k{font-weight:600;color:rgba(255,255,255,.85)}
.vs__v{gap:.6rem;color:rgba(255,255,255,.6)}
.vs>.vs__k:last-of-type,.vs>.vs__v:nth-last-child(-n+2){border-bottom:0}

/* notre colonne : carte blanche surélevée, calée sur les mêmes lignes */
.vs__me{grid-column:4;grid-row:1/-1;display:grid;grid-template-rows:subgrid;
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding-inline:clamp(.9rem,1.6vw,1.3rem);margin-block:-.5rem}
/* le logo tient lieu de titre de colonne : il doit poser sur la même
   ligne que les trois autres, pas sur le bas de la cellule.
   Le padding-haut compense le `margin-block:-.5rem` de la carte, qui
   la fait déborder vers le haut et collait le logo au bord. */
.vs__h--me{padding-top:1.6rem;padding-bottom:1rem}
.vs__h--me img{height:20px;width:auto;display:block;background:none}
.vs__v--me{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.vs__me>*:last-child{border-bottom:0}

.vs__ic{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center}
.vs__ic svg{width:10px;height:10px}
.vs__ic--y{background:var(--brand);color:#fff}
.vs__ic--n{background:rgba(255,255,255,.09);color:rgba(255,255,255,.4)}

/* Sans subgrid : on garde la carte, l'alignement se fait à la hauteur de ligne */
@supports not (grid-template-rows: subgrid){
  .vs__me{grid-template-rows:repeat(var(--n,8),minmax(58px,auto))}
  .vs__me>.vs__h--me{min-height:0}
}

@media(max-width:1000px){
  .vs{grid-template-columns:1fr 1fr;grid-template-rows:none;column-gap:1rem}
  .vs__h{grid-column:auto;padding-top:1.2rem}
  /* seulement l'en-tête « Ce qu'on compare » du tableau : sans le '>', la règle
     masquait aussi le logo, premier élément de la carte blanche */
  .vs>.vs__h:first-child{display:none}
  .vs__k{grid-column:1/-1;border-bottom:0;padding-bottom:.2rem;min-height:0}
  .vs__me{grid-column:1/-1;grid-row:auto;display:flex;flex-direction:column;
    order:-1;margin-block:0 1.4rem;padding-block:.4rem 1rem}
  .vs__h--me{padding:1.4rem 0 .6rem}
  .vs__v--me{min-height:48px}
}

/* ============================================================
   CONTACT — calqué sur la page /contact de la référence.
   Valeurs relevées dans son DOM : deux colonnes égales, gap 50 ;
   titre Boldonse 68/102 à mots libres (gap 10), dernier mot en
   pastille (padding 16, rayon 50px 10px) ; carte rayon 30 à en-tête
   violet 20×40 et corps blanc 40 ; champs 50 px, rayon 6, fond #f5f5f5 ;
   puces radio 10×16 ; bouton 16×32 rayon 6 ; badges 38 px rayon 100.
   ============================================================ */
.ct{padding-top:clamp(7rem,12.5vw,200px);padding-bottom:clamp(2.5rem,5vw,4rem)}
.ct__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:stretch}
.ct__left{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-width:0}
.ct__top{display:flex;flex-direction:column;gap:30px;align-items:flex-start}

/* le titre : chaque mot est un bloc, le dernier porte la pastille */
.ct__h1{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:100%;
  font-size:clamp(2.1rem,5.3vw,68px);line-height:1.5;letter-spacing:0;text-wrap:initial;padding:0}
.ct__w{display:block}
.ct__w--pill{padding:16px;border-radius:50px 10px;background:var(--rose);color:var(--ink)}

/* « ils nous ont fait confiance » + bandeau */
.ct__trust{display:flex;flex-direction:column;gap:20px;min-width:0}
.ct__trust>p{font-size:16px;font-weight:500;line-height:1.2}
.ct__mq{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ct__mq .marquee__set{gap:40px;padding-right:40px}
.ct__logo{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:22px;
  letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
/* les logos complets des clients, tels qu'en tête de leur site */
.ct__logo img{width:auto;flex:none;background:none;display:block}
.ct__logo.is-dark{padding:6px 10px;border-radius:10px;background:#000}

/* la carte : en-tête violet, corps blanc arrondi qui s'y encastre */
.ct__card{background:var(--terracotta);border-radius:30px;overflow:clip;display:flex;flex-direction:column;min-width:0}
.ct__head{padding:20px 40px;color:#fff}
.ct__head h2{font-family:var(--font-body);text-transform:none;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.2vw,28px);line-height:1.2;text-wrap:initial}
.ct__form{background:#fff;border-radius:30px;padding:40px;flex:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px}

/* champs */
.ct__f{display:flex;flex-direction:column;gap:10px;width:100%}
.ct__f>span:first-child{font-size:18px;font-weight:500;line-height:1.2;color:#161616}
.ct__box{position:relative;display:flex;align-items:center;width:100%;height:50px;padding:10px 20px;
  border-radius:6px;background:#f5f5f5;transition:box-shadow .3s var(--e-out),background-color .3s}
.ct__box:focus-within{box-shadow:0 0 0 2px var(--terracotta)}
.ct__box input,.ct__box select{width:100%;height:30px;font-size:16px;line-height:1.2;color:#161616}
.ct__box input:focus-visible,.ct__box select:focus-visible{outline:none}
.ct__box input::placeholder{color:rgba(75,75,75,.85)}
.ct__box--sel{padding:0}
.ct__box select{height:50px;padding:10px 44px 10px 20px;appearance:none;-webkit-appearance:none;cursor:pointer}
.ct__box select:has(option[value=""]:checked){color:rgba(75,75,75,.85)}
.ct__chev{position:absolute;right:20px;top:50%;translate:0 -50%;width:12px;color:#161616;pointer-events:none}
/* le champ message : même boîte grise, en plusieurs lignes */
.ct__box--area{height:auto;align-items:stretch;padding:14px 20px}
.ct__box textarea{width:100%;min-height:124px;resize:vertical;font-size:16px;line-height:1.5;color:#161616}
.ct__box textarea:focus-visible{outline:none}
.ct__box textarea::placeholder{color:rgba(75,75,75,.85)}
.ct__f>span:first-child em{font-style:normal;font-weight:400;font-size:.85em;color:#6b6b6b}

/* puces radio */
.ct__radios{display:flex;flex-wrap:wrap;gap:10px}
.ct__radio{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:6px;
  background:#f5f5f5;font-size:16px;line-height:1.2;cursor:pointer;transition:background-color .3s var(--e-out)}
.ct__radio:hover{background:#ececec}
.ct__radio input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;flex:none;
  background:#fff;border:1px solid #ddd;transition:border .25s var(--e-out)}
.ct__radio input:checked{border:5px solid var(--terracotta)}
.ct__radio:has(input:checked){background:var(--terracotta-soft)}

/* bouton : grisé tant que le formulaire n'est pas valide, texte qui roule au survol */
.ct__send{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border-radius:6px;
  background:#161616;color:#fff;font-size:18px;font-weight:500;line-height:1.1;opacity:.5;
  transition:opacity .35s,transform .35s var(--e-out),background-color .3s}
.ct__form.is-ready .ct__send{opacity:1}
.ct__send:hover{background:#000;transform:translateY(-2px)}
.ct__roll{display:block;overflow:hidden;height:1.1em}
.ct__roll i{display:block;font-style:normal;transition:transform .5s var(--e-out)}
.ct__send:hover .ct__roll i{transform:translateY(-100%)}
.ct .form__sent{font-size:.86rem;color:var(--fg-soft)}
/* envoi par api/contact.php : bouton en attente, confirmation, erreur */
.ct__form.is-sending .ct__send{opacity:.6;pointer-events:none}
.ct .form__sent:not([hidden]){width:100%;padding:.8rem 1rem;border-radius:10px;background:#f2fbf4;
  border:1px solid rgba(40,200,64,.3);color:#14532d;font-weight:500;line-height:1.5}
.ct .form__err:not([hidden]){width:100%;padding:.8rem 1rem;border-radius:10px;background:#fdf2f2;
  border:1px solid rgba(217,58,58,.3);color:#8a1c1c;font-size:.86rem;line-height:1.5}
.ct .form__err a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ct__rgpd{font-size:.76rem;line-height:1.5;color:#6b6b6b}
.ct__rgpd a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* le champ piège : hors écran, jamais visible ni atteignable au clavier */
.ct__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:1000px){
  .ct__in{grid-template-columns:1fr;gap:40px}
  .ct__left{display:contents}
  .ct__top{order:1}.ct__card{order:2}.ct__trust{order:3}
}
@media(max-width:600px){
  .ct{padding-top:6.5rem}
  .ct__card,.ct__form{border-radius:24px}
  .ct__head{padding:18px 24px}
  .ct__form{padding:24px}
  .ct__h1{gap:6px 10px}
  .ct__w--pill{padding:8px 14px;border-radius:32px 8px}
  .ct__f>span:first-child{font-size:16px}
  .ct__send{width:100%}
}

/* ============================================================
   JOURNAL — calqué sur la page /blog de la référence.
   Valeurs relevées : en-tête padding 200/120, titre Boldonse 68/102
   centré sur 860 max, chapeau 18/500 gris #4b4b4b ; grille de deux
   colonnes gap 50 ; carte = image 5:4 rayon 20 + pastille noire
   (8×10, rayon 16, 16/500) + méta 16/500 gris + titre 28/600 ;
   bouton « Charger plus » 46 px, rayon 100, padding 12 20 12 46,
   pastille ronde blanche à gauche.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.bhead{padding-top:clamp(7rem,12.5vw,200px);padding-bottom:clamp(3rem,7.5vw,120px);text-align:center}
.bhead h1{font-size:clamp(2rem,4.25vw,68px);line-height:1.5;letter-spacing:0;max-width:860px;margin-inline:auto}
.bhead__lead{max-width:860px;margin:16px auto 0;font-size:clamp(.95rem,1.15vw,18px);font-weight:500;line-height:1.2;color:#4b4b4b}
@media(max-width:700px){.bhead__lead{line-height:1.4}}



/* la grille */
.blog{padding-bottom:clamp(3rem,6vw,5rem)}
.blog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px}
.bpost{display:flex;flex-direction:column;gap:16px;color:var(--ink);min-width:0;border-radius:22px}
.bpost:focus-visible{outline:3px solid var(--terracotta);outline-offset:6px}
.bpost__ph{position:relative;display:block;aspect-ratio:5/4;border-radius:20px;overflow:hidden;background:rgba(17,17,18,.06)}
.bpost__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.bpost:hover .bpost__ph img{transform:scale(1.04)}
.bpost__cat{position:absolute;top:20px;left:20px;z-index:1;display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:16px;background:#161616;color:#fff;font-size:16px;font-weight:500;line-height:1.2}
.bpost__in{display:flex;flex-direction:column;gap:10px}
.bpost__meta{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;line-height:1.2;color:#4b4b4b}
.bpost__meta i{font-style:normal;font-size:12px}
.bpost__t{font-family:var(--font-body);text-transform:none;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2vw,28px);line-height:1.2;text-wrap:pretty;transition:color .3s}
.bpost:hover .bpost__t{color:var(--terracotta)}

/* charger plus */
.blog__more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(2.5rem,5vw,4rem);text-align:center}
.bmore{position:relative;display:inline-flex;align-items:center;gap:6px;height:46px;padding:12px 20px 12px 46px;
  border-radius:100px;background:#161616;color:#fff;font-size:18px;font-weight:500;line-height:1.2;
  transition:background-color .3s,transform .35s var(--e-out),box-shadow .35s}
.bmore i{position:absolute;left:5px;top:5px;width:36px;height:36px;border-radius:50%;background:#fff;color:#161616;
  display:grid;place-items:center}
.bmore i svg{width:16px;height:16px;transition:transform .4s var(--e-out)}
.bmore:hover{background:#000;transform:translateY(-2px);box-shadow:var(--sh-2)}
.bmore:hover i svg{transform:translateX(3px)}
.blog__count{font-size:14px;font-weight:500;color:#4b4b4b}
.blog__bar{display:block;width:160px;height:3px;border-radius:3px;background:rgba(17,17,18,.1);overflow:hidden}
.blog__bar span{display:block;height:100%;width:0;border-radius:3px;background:var(--terracotta);transition:width .6s var(--e-out)}
.blog__done{font-size:14px;font-weight:500;color:#4b4b4b}
.blog__done a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.blog__empty{text-align:center;color:#4b4b4b;font-weight:500;padding:2rem 0}

@media(max-width:900px){
  .blog__grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:600px){
  .bhead{padding-top:6.5rem}
  .bpost__cat{top:12px;left:12px;font-size:14px}
  .bpost__meta{font-size:14px}
  .bpost__t{font-size:20px;line-height:24px}
  .bmore{font-size:14px;height:41px;padding:12px 20px 12px 46px}
  .bmore i{width:31px;height:31px}
}

/* ============================================================
   ARTICLE — gabarit d'article, calqué sur la page article de la
   référence. Rien ici ne touche à la page Journal : les seules
   classes partagées sont celles de la carte (.bpost*), volontairement
   reprises telles quelles pour que les deux pages montrent la même.

   Structure : .ahead (carte lilas centrée) → .acover (16:9) →
   .art (corps + sommaire collant) → .rel (articles récents).
   ============================================================ */

/* ---------- l'en-tête en carte pleine couleur ---------- */
.ahead{padding-top:clamp(6.5rem,11.5vw,9rem)}
.crumb--a{margin-bottom:.9rem}

.ahead__card{background:var(--rose);border-radius:clamp(22px,3.2vw,40px);
  padding:clamp(1.8rem,4.6vw,3.6rem) clamp(1.2rem,4vw,3.4rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.9rem,1.9vw,1.5rem)}

.ahead__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .7rem;margin:0;font-size:clamp(.85rem,1.05vw,1rem);font-weight:500;
  line-height:1.2;color:#3d3350}
.ahead__meta i{font-style:normal;font-size:.72em;opacity:.5}
.ahead__cat{background:#fff;color:var(--ink);border-radius:100px;
  padding:.5em 1em;font-weight:600;line-height:1}

/* Boldonse est très large : un titre d'article se lit mieux sur trois
   lignes courtes que sur deux lignes pleine largeur. Et une capitale
   grasse réclame de l'air entre les lettres, pas moins : d'où
   l'interlettrage positif, à l'inverse du reste du site où le display
   n'a que deux ou trois mots à porter. */
.ahead__t{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.25rem,2.9vw,2.35rem);line-height:1.5;letter-spacing:.012em;
  color:var(--ink);max-width:22ch;margin:0;text-wrap:balance}
.ahead__lead{margin:0;max-width:56ch;font-weight:500;color:#3d3350;
  font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.5;text-wrap:pretty}

/* ---------- la photo de couverture ---------- */
.acover{margin:clamp(1.4rem,3.2vw,2.6rem) 0 0;border-radius:clamp(18px,2.6vw,30px);
  overflow:hidden;background:rgba(17,17,18,.06)}
.acover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- LISIBILITÉ DES TITRES ----------
   Boldonse est une graisse d'affiche : en capitales, avec un
   interlettrage négatif, les lettres se touchent, les mots perdent
   leur silhouette et l'œil n'a plus de prise. C'est tenable pour un
   titre qu'on voit, pas pour un intertitre qu'on lit.

   Donc : le display en capitales reste sur le H1 et sur les titres de
   section — là il fait signe. Dans le corps de l'article, les
   intertitres passent en Satoshi gras, casse normale, avec de l'air.
   C'est exactement ce que fait la référence pour ses titres de carte.
   Portée limitée à .apost : les pages service et légales ne bougent pas. */
/* 1,9 rem plaçait un intertitre d'une cinquantaine de caractères pile sur
   la largeur de la colonne (804 px pour 803 disponibles) : il repassait à
   la ligne pour un pixel, et `text-wrap:balance` équilibrait alors les deux
   lignes, ce qui donnait l'impression d'une coupure volontaire. 1,75 rem
   laisse la marge qu'il faut ; au-delà, un titre long coupe pour de bonnes
   raisons — et il coupe en deux lignes égales, ce qui est le but. */
.apost .prose h2{font-family:var(--font-body);text-transform:none;font-weight:700;
  font-size:clamp(1.28rem,2.2vw,1.75rem);line-height:1.26;letter-spacing:-.032em;
  margin-top:2.5em;margin-bottom:.2em}
.apost .prose h3{font-family:var(--font-body);text-transform:none;font-weight:700;
  font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.3;letter-spacing:-.028em;
  margin-top:2em;margin-bottom:.2em}
.apost .prose h2:first-child{margin-top:0}
/* Un intertitre qui suit immédiatement celui du dessus lui appartient :
   il n'y a rien à séparer. L'écart de 2 em sert à détacher une nouvelle
   sous-partie d'un paragraphe, pas à éloigner un titre de son parent —
   sinon le H3 flotte entre les deux et on ne sait plus à qui il est. */
.apost .prose h2 + h3,
.apost .prose h2 + h4,
.apost .prose h3 + h4{margin-top:.8em}

/* ---------- TABLEAUX ----------
   Un comparatif chiffré est le format que les moteurs — classiques comme
   génératifs — extraient le plus proprement. Le tableau défile dans son
   propre cadre : c'est lui qui déborde, jamais la page. */
.apost .prose .tbl{margin-top:1.6em;margin-bottom:.4em}
.apost .prose .tbl__scroll{overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--white)}
.apost .prose table{width:100%;min-width:32rem;border-collapse:collapse;font-size:.92rem}
.apost .prose thead th{background:var(--paper);text-align:left;white-space:nowrap;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute);
  font-weight:700;padding:.75rem 1rem}
.apost .prose tbody th{text-align:left;font-weight:700;color:var(--ink)}
.apost .prose tbody th,.apost .prose td{padding:.8rem 1rem;line-height:1.45;
  vertical-align:top;border-top:1px solid var(--line)}
.apost .prose td{color:var(--fg-soft)}
.apost .prose tbody tr:hover th,.apost .prose tbody tr:hover td{background:var(--rose-soft)}
.apost .prose .tbl figcaption{margin-top:.7rem;font-size:.82rem;color:var(--fg-mute);
  line-height:1.45}
@media(max-width:600px){
  .apost .prose table{font-size:.86rem;min-width:28rem}
  .apost .prose thead th,.apost .prose tbody th,.apost .prose td{padding:.65rem .8rem}
}

/* ---------- le corps ---------- */
.art__main{min-width:0;display:flex;flex-direction:column;
  gap:clamp(1.8rem,3.4vw,2.8rem)}

/* ---------- « À retenir » : la réponse avant l'article ---------- */
.tako{max-width:72ch;background:var(--zellige-soft);border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.4vw,1.7rem)}
.tako__h{display:flex;align-items:center;gap:.5em;font-family:var(--font-body);
  text-transform:none;font-weight:700;font-size:1.02rem;letter-spacing:-.025em;
  line-height:1.2;color:var(--ink);margin-bottom:.9rem}
.tako__h svg{width:15px;height:15px;color:var(--terracotta);flex:none}
.tako ul{display:flex;flex-direction:column;gap:.65rem}
.tako li{display:flex;gap:.7rem;font-size:.95rem;line-height:1.55;color:#2c2c33}
.tako li svg{width:16px;height:16px;flex:none;margin-top:.25em;color:var(--terracotta)}

/* ---------- questions de fin d'article ---------- */
.afaq{max-width:72ch}
.afaq__h{font-family:var(--font-body);text-transform:none;font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.032em;line-height:1.26;
  margin-bottom:1.1rem}
.section--white .afaq .faq__i{background:var(--paper);border-color:transparent}

/* ---------- sources ---------- */
.srcs{max-width:72ch;padding-top:clamp(1.2rem,2.4vw,1.6rem);border-top:1px solid var(--line)}
.srcs__h{font-family:var(--font-body);text-transform:none;font-weight:700;
  font-size:1rem;letter-spacing:-.025em;margin-bottom:.8rem}
.srcs ol{list-style:decimal;padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.srcs li{font-size:.88rem;line-height:1.5;color:var(--fg-soft)}
.srcs a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.srcs em{font-style:normal;color:var(--fg-mute)}
.srcs em::before{content:" — "}

/* ---------- SOMMAIRE ----------
   Un seul élément pour les deux mises en forme : <details>. Au-delà de
   1000 px il est ouvert, collant, et le résumé n'est plus cliquable ;
   en dessous il devient un accordéon posé au-dessus de l'article, que
   le lecteur ouvre s'il en a envie. main.js ne fait que basculer
   l'attribut `open` au franchissement du seuil. */
.toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0}
.toc summary::-webkit-details-marker{display:none}
.toc__h span{font-family:var(--font-display);font-weight:400;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.toc__h i{width:26px;height:26px;border-radius:50%;flex:none;position:relative;
  background:rgba(17,17,18,.06);transition:transform .35s var(--e-out),background-color .3s}
.toc__h i::before{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;
  border:1.8px solid currentColor;border-top:0;border-left:0;
  transform:translateY(-2px) rotate(45deg)}
.toc[open] .toc__h i{transform:rotate(180deg);background:var(--terracotta);color:#fff}
.toc ul{margin-top:1rem}

@media(min-width:1001px){
  .toc summary{cursor:default;pointer-events:none}
  .toc__h i{display:none}
}
@media(max-width:1000px){
  /* au-dessus de l'article : on choisit sa section avant de lire */
  .toc{display:block;position:static;order:-1;padding:1rem 1.15rem}
  .toc ul{max-height:none}
  .toc summary{cursor:pointer;padding:.15rem 0}
  .toc__h span{font-size:.72rem}
}

/* bande d'auteur : qui écrit, depuis quand — signal E-E-A-T */
.abio{display:flex;align-items:flex-start;gap:clamp(.9rem,1.8vw,1.3rem);max-width:72ch;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.2vw,1.5rem)}
/* L'avatar est un carré à bord perdu : il remplit le cercle. L'ancien
   logo-mark, lui, touchait les bords de sa propre boîte — le masque rond
   lui coupait les angles du « L ». */
/* l'avatar est blanc : sans ce filet, le cercle se fondrait dans la carte */
.abio__av{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-2)}
.abio__av img{width:100%;height:100%;object-fit:cover;background:none;display:block}
.abio__txt{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.abio__k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
  font-weight:700}
.abio b{font-size:1rem;letter-spacing:-.02em}
.abio p{font-size:.9rem;line-height:1.55;color:var(--fg-soft);margin:0}
.abio .alink{margin-top:.35rem;font-size:.86rem}
.section--white .abio{background:var(--paper);border-color:transparent}

/* ---------- articles récents ---------- */
.rel__head{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
.rel__t{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.45rem,3.4vw,2.9rem);line-height:1.5;letter-spacing:-.02em;margin:0}
.rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2rem)}
/* la même carte que le journal, à l'échelle de trois colonnes */
.rel__grid .bpost{gap:14px}
.rel__grid .bpost__t{font-size:clamp(1.05rem,1.6vw,1.4rem)}
.rel__grid .bpost__cat{top:14px;left:14px;padding:6px 10px;font-size:14px}
.rel__grid .bpost__meta{font-size:14px}

@media(max-width:900px){
  .rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel__grid .bpost:nth-child(3){display:none}
}
@media(max-width:600px){
  .ahead{padding-top:6.2rem}
  .rel__grid{grid-template-columns:1fr}
  .rel__grid .bpost:nth-child(3){display:flex}
  .rel__grid .bpost__t{font-size:20px}
  .abio{flex-direction:column}
}

/* ---------- Journal : correctifs du chargement progressif ----------
   `hidden` doit l'emporter sur le display:flex de la carte, sinon
   rien ne se cache. Et le bouton montre qu'il travaille. */
.bpost[hidden]{display:none}
.bmore.is-loading{pointer-events:none;opacity:.85}
.bmore.is-loading i svg{display:none}
.bmore.is-loading i::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(17,17,18,.2);
  border-top-color:#161616;animation:bspin .7s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}

/* ============================================================
   COMMANDER — tunnel de commande en deux étapes
   ------------------------------------------------------------
   Calqué sur le parcours de grateauagency.com : en-tête centré avec
   frise d'étapes, formulaire à gauche, récapitulatif collant à droite.
   Le titre passe en Satoshi, casse normale : sur une page où l'on
   paie, le calme rassure plus que l'affiche. Le violet de marque
   remplace l'orange de la référence.
   ============================================================ */
.ck{padding:clamp(7rem,12vw,9.5rem) 0 clamp(3rem,6vw,5rem)}
.ck__head{max-width:680px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.9rem}
.ck__k{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.ck__t{font-family:var(--font-body);text-transform:none;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;text-wrap:balance}
.ck__lead{color:var(--fg-soft);font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.55;max-width:56ch}

/* la frise : étape faite, étape courante, étape à venir */
.ck__steps{display:flex;align-items:center;gap:.8rem;margin-top:.4rem;flex-wrap:wrap;justify-content:center}
.ck__steps li{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.ck__steps li+li::before{content:"";width:34px;height:1.5px;background:var(--line-2);margin-right:.25rem}
.ck__steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.72rem;letter-spacing:0;background:var(--white);border:1px solid var(--line-2);color:var(--fg-soft)}
.ck__steps li.is-on{color:var(--ink)}
.ck__steps li.is-on b{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.ck__steps li.is-done b{background:var(--zellige);border-color:var(--zellige);color:#fff}

/* la grille : formulaire + récapitulatif */
.ck__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
.ck__panel{display:flex;flex-direction:column;gap:1.05rem}
.ck__panel[hidden]{display:none}
.ck__h{font-family:var(--font-body);text-transform:none;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.2}

/* champs */
.ck__f{display:flex;flex-direction:column;gap:.45rem}
.ck__f>span{font-size:.92rem;font-weight:700;color:var(--ink)}
.ck__f>span em{font-style:normal;font-weight:500;color:var(--fg-mute);margin-left:.3em}
.ck__f small{font-size:.8rem;color:var(--fg-mute);line-height:1.45}
.ck__f input[type=text],.ck__f input[type=email],.ck__f input[type=tel]{width:100%;height:52px;padding:0 1.05rem;
  background:var(--white);border:1px solid var(--line-2);border-radius:12px;font-size:1rem;
  transition:border-color .25s,box-shadow .25s}
.ck__f input::placeholder{color:#9a98a3}
.ck__f input:focus{border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(100,53,206,.14)}
.ck__f input.is-bad{border-color:#d93a3a;box-shadow:0 0 0 4px rgba(217,58,58,.12)}

/* bascule à deux choix : un rail beige, une pastille blanche */
.ck__seg{display:inline-flex;align-self:flex-start;padding:4px;border-radius:100px;background:#ebe6f8;gap:2px}
.ck__seg label{position:relative;cursor:pointer}
.ck__seg input{position:absolute;opacity:0;pointer-events:none}
.ck__seg span{display:inline-flex;align-items:center;gap:.45em;padding:.6rem 1.15rem;border-radius:100px;
  font-size:.92rem;font-weight:700;color:var(--fg-soft);transition:background-color .25s,color .25s,box-shadow .25s}
.ck__seg input:checked+span{background:var(--white);color:var(--ink);box-shadow:0 2px 8px rgba(17,17,18,.1)}
.ck__seg input:focus-visible+span{outline:2px solid var(--terracotta);outline-offset:2px}
.ck__seg i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--zellige);
  background:var(--zellige-soft);border-radius:100px;padding:.18em .55em}

.ck__cta{display:flex;align-items:center;justify-content:center;gap:.6rem;height:56px;margin-top:.3rem;
  border-radius:14px;background:var(--terracotta);color:#fff;font-weight:700;font-size:1.02rem;
  box-shadow:0 14px 30px -14px rgba(100,53,206,.7);transition:transform .3s var(--e-out),background-color .3s}
.ck__cta svg{width:16px;height:16px}
.ck__cta:hover{background:var(--brand-dark);transform:translateY(-2px)}
.ck__next{font-size:.82rem;color:var(--fg-mute)}
.ck__rgpd{display:flex;gap:.5rem;font-size:.76rem;line-height:1.5;color:var(--fg-mute)}
.ck__rgpd svg{width:13px;height:13px;flex:none;margin-top:.22em;color:var(--zellige)}
.ck__rgpd a{color:var(--fg-soft);text-decoration:underline;text-underline-offset:2px}

/* l'essentiel des CGV, juste avant le paiement */
.ck__key{margin-top:.6rem;padding:1.15rem 1.2rem;border-radius:18px;background:var(--white);border:1px solid var(--line)}
.ck__key h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:.98rem;letter-spacing:-.02em;margin-bottom:.8rem}
.ck__key ul{display:grid;gap:.75rem}
.ck__key li{display:grid;grid-template-columns:30px 1fr;gap:.7rem;align-items:start;font-size:.84rem;line-height:1.5;color:var(--fg-soft)}
.ck__key li>svg{width:30px;height:30px;padding:7px;border-radius:9px;background:var(--rose-soft);color:var(--terracotta)}
.ck__key b{color:var(--ink);font-weight:700}
.ck__key a{font-size:.76rem;font-weight:600;color:var(--terracotta);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* étape 2 : qui commande, et la formule */
.ck__who{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;
  background:var(--white);border:1px solid var(--line);border-radius:14px;font-size:.92rem}
.ck__who b{font-weight:700}
.ck__who button{font-weight:700;color:var(--terracotta);flex:none}
.ck__who button:hover{text-decoration:underline;text-underline-offset:3px}

.ck__opts{display:flex;flex-direction:column;gap:.7rem}
.ck__opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:1.05rem 1.15rem;background:var(--white);border:1.5px solid var(--line);border-radius:16px;cursor:pointer;
  transition:border-color .25s,background-color .25s,box-shadow .25s}
.ck__opt:hover{border-color:var(--line-2)}
.ck__opt input{position:absolute;opacity:0;pointer-events:none}
.ck__tick{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);background:var(--white);
  display:grid;place-items:center;color:#fff;transition:background-color .2s,border-color .2s}
.ck__tick svg{width:13px;height:13px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--e-spring)}
.ck__opt:has(input:checked){border-color:var(--terracotta);background:var(--rose-soft);box-shadow:0 10px 26px -18px rgba(100,53,206,.55)}
.ck__opt:has(input:checked) .ck__tick{background:var(--terracotta);border-color:var(--terracotta)}
.ck__opt:has(input:checked) .ck__tick svg{opacity:1;transform:none}
.ck__opt:has(input:focus-visible){outline:2px solid var(--terracotta);outline-offset:3px}
.ck__opt.is-locked{cursor:default}
.ck__opt-t b{display:block;font-size:1rem;letter-spacing:-.02em}
.ck__opt-t em{display:block;font-style:normal;font-size:.84rem;color:var(--fg-soft);line-height:1.45;margin-top:.2rem}
.ck__opt-p{text-align:right;white-space:nowrap}
.ck__opt-p b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.ck__opt-p em{display:block;font-style:normal;font-size:.76rem;color:var(--fg-mute)}
.ck__cycle{margin-top:.4rem}

/* le récapitulatif */
.ck__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:.9rem}
.ck__recap{background:var(--white);border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.3rem,2.4vw,1.8rem);box-shadow:0 30px 60px -36px rgba(60,31,128,.35);
  display:flex;flex-direction:column;gap:1rem}
.ck__rh{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.ck__lines{display:flex;flex-direction:column;gap:.55rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ck__lines li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.ck__lines em{font-style:normal;font-size:.78rem;color:var(--fg-mute);margin-left:.3em}
.ck__lines b{font-weight:700;white-space:nowrap}
.ck__lines .is-sub span,.ck__lines .is-sub b{color:var(--fg-soft);font-weight:500}
.ck__total{display:flex;align-items:baseline;gap:.5rem}
.ck__total span{font-weight:700;margin-right:auto}
.ck__total b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.02em;line-height:1;white-space:nowrap}
.ck__total em{font-style:normal;font-size:.76rem;color:var(--fg-mute);font-weight:700}
.ck__subs{font-size:.8rem;color:var(--fg-soft);line-height:1.5;background:var(--paper);border-radius:12px;padding:.7rem .85rem}
.ck__subs[hidden]{display:none}

.ck__incl{display:grid;gap:.5rem}
.ck__incl li{display:flex;gap:.55rem;font-size:.88rem;color:var(--fg-soft)}
.ck__incl svg{width:15px;height:15px;flex:none;margin-top:.2em;color:var(--terracotta)}
.ck__incl[hidden],.ck__legal[hidden],.ck__part[hidden]{display:none}

.ck__legal{display:flex;flex-direction:column;gap:.8rem}
.ck__chk{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.84rem;line-height:1.5;color:var(--fg-soft);cursor:pointer}
.ck__chk input{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:.15em;border-radius:5px;
  border:1.5px solid var(--line-2);background:var(--white);display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s,border-color .2s}
.ck__chk input::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;
  transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s var(--e-spring)}
.ck__chk input:checked{background:var(--terracotta);border-color:var(--terracotta)}
.ck__chk input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.ck__chk input:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.ck__chk a{color:var(--terracotta);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ck__chk em{font-style:normal;color:var(--fg-mute)}
.ck__part{display:flex;flex-direction:column;gap:.55rem;padding:.85rem .9rem;border-radius:14px;
  background:var(--rose-soft);border:1px solid var(--terracotta-soft)}
.ck__delai{font-size:.78rem;color:var(--fg-soft);line-height:1.5;padding-left:1.9rem}
.ck__delai[hidden]{display:none}

.ck__pay{display:flex;align-items:center;justify-content:center;gap:.6rem;height:58px;border-radius:14px;
  background:var(--terracotta);color:#fff;font-weight:700;font-size:1.06rem;
  box-shadow:0 16px 34px -14px rgba(100,53,206,.75);transition:transform .3s var(--e-out),opacity .3s,background-color .3s}
.ck__pay svg{width:17px;height:17px}
.ck__pay:hover:not(:disabled){background:var(--brand-dark);transform:translateY(-2px)}
.ck__pay:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.ck__pay[hidden]{display:none}
.ck__msg{font-size:.84rem;line-height:1.5;color:var(--ink);background:var(--zellige-soft);border-radius:12px;padding:.8rem .9rem}
.ck__msg[hidden]{display:none}

.ck__assur{display:grid;gap:.5rem;padding-top:.2rem}
.ck__assur li{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--fg-soft)}
.ck__assur svg{width:15px;height:15px;flex:none;color:var(--terracotta)}

.ck__secure{padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.ck__secure>p{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.ck__secure>p svg{width:15px;height:15px;color:var(--zellige)}
.ck__secure>p.ck__by{font-weight:500;font-size:.78rem;color:var(--fg-mute)}
/* les vrais logos des moyens de paiement, chacun dans une tuile de même
   hauteur. Lana Cash garde son fond sombre : son lettrage est blanc. */
.ck__pays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.ck__pl{height:46px;padding:4px;border-radius:10px;border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center}
.ck__pl img{height:17px;width:auto;max-width:100%;display:block}
.ck__pl img[alt=Mastercard]{height:24px}
/* CMI et Lana Cash un cran plus petits que la tuile : pleine hauteur, ils
   écrasaient Visa et Mastercard. Lana Cash est désormais sur fond blanc
   (lettrage passé en noir), comme les trois autres. */
.ck__pl--cmi img{height:30px}
.ck__pl--lana img{height:38px}

/* la preuve sous le récapitulatif : les icônes réelles des sites livrés */
.ck__proof{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:16px;
  background:var(--white);border:1px solid var(--line);transition:transform .3s var(--e-out),border-color .3s}
.ck__proof:hover{transform:translateY(-2px);border-color:var(--line-2)}
.ck__avs{display:flex;flex:none}
.ck__avs img{width:32px;height:32px;border-radius:50%;margin-left:-7px;object-fit:cover;
  background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.ck__avs img:first-child{margin-left:0}
.ck__proof>span:not(.ck__avs){flex:1;min-width:0}
.ck__proof b{display:block;font-size:.88rem}
.ck__proof em{display:block;font-style:normal;font-size:.78rem;color:var(--terracotta);font-weight:600}
.ck__proof>svg{width:14px;height:14px;flex:none;color:var(--fg-mute)}

@media(max-width:960px){
  .ck__grid{grid-template-columns:1fr}
  .ck__side{position:static}
}
@media(max-width:560px){
  .ck{padding-top:6.5rem}
  /* la frise passe sur deux lignes : le trait de liaison tomberait en tête de la seconde */
  .ck__steps{gap:.55rem 1rem}
  .ck__steps li+li::before{display:none}
  .ck__opt{grid-template-columns:auto 1fr;padding:.95rem}
  .ck__opt-p{grid-column:2;text-align:left;display:flex;gap:.4rem;align-items:baseline}
  .ck__seg{align-self:stretch}
  .ck__seg label{flex:1}
  .ck__seg span{justify-content:center;width:100%}
}

/* ============================================================
   « LA PROMESSE » — le prix devient la carte phare
   ------------------------------------------------------------
   Les quatre cartes pesaient le même poids, et c'était même la carte
   « 30 pages » qui ressortait le plus (fond noir). Le prix, seul
   argument décisif de la rangée, s'y noyait. Il prend donc :
     · une colonne plus large (1,6 part contre 1),
     · le violet plein de la marque, texte blanc (7,14:1),
     · un chiffre agrandi, « DH » en lilas (4,73:1 — la lavande
       n'aurait tenu que 2,57:1),
     · une pastille « TTC · tout compris ».
   Le fond noir quitte la carte 30 pages : deux cartes fortes côte à
   côte se neutralisent, il ne doit y avoir qu'un seul point focal.
   ============================================================ */
.figs--lead{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.figs .fig.fig--hi{justify-content:flex-start;color:#fff;border-color:transparent;
  background:radial-gradient(20rem 14rem at 100% 0%,rgba(255,255,255,.16),transparent 70%),var(--terracotta);
  box-shadow:0 26px 50px -26px rgba(60,31,128,.65)}
.figs .fig.fig--hi:hover{box-shadow:0 32px 60px -26px rgba(60,31,128,.75)}
.figs .fig.fig--hi span{color:rgba(255,255,255,.86);max-width:24ch}
.fig__note{align-self:flex-start;margin-top:.8rem;padding:.38em .8em;border-radius:100px;
  background:rgba(255,255,255,.16);color:#fff;font-style:normal;font-weight:700;
  font-size:.74rem;letter-spacing:.02em;white-space:nowrap}
.figs .fig.fig--hi b{margin-top:auto;padding-top:1.4rem;font-size:clamp(2.3rem,4.4vw,4.2rem)}
.figs .fig.fig--hi b i{color:var(--rose)}
@media(max-width:900px){
  .figs--lead{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figs--lead .fig--hi{grid-column:1/-1;min-height:clamp(170px,32vw,230px)}
}
@media(max-width:460px){
  .figs--lead{grid-template-columns:1fr}
}


/* ============================================================
   L'OFFRE : page d'atterrissage des campagnes
   ------------------------------------------------------------
   Logique de conversion : voir tools/blocks-offre.mjs. Toutes les
   classes de cette page commencent par « of » (ou « bento », « bi »,
   « tkt ») : aucune ne touche un composant partagé, sauf le bouton
   WhatsApp .btn--wa, réutilisable ailleurs.
   ============================================================ */

/* Les feuilles inclinées de « Sans risque », le tampon, la trame du hero et
   une pastille photo de l'accueil débordaient de quelques pixels : sur mobile,
   ce débord élargissait toute la page (Chrome agrandit la zone d'affichage). */
/* clip et non hidden : pas de conteneur de défilement, les éléments
   collants (récapitulatif Commander, sommaire des articles) restent collants */
#main{overflow-x:clip}

/* ---------- le bouton WhatsApp ----------
   Fond blanc, texte encre : le vert WhatsApp ne tient pas le contraste
   AA sous un texte blanc (1,98:1). Le vert reste dans la pastille de
   l'icône, qui suffit à le faire reconnaître. */
.btn--wa{--bg:#fff;--fg:var(--ink);border-color:var(--line-2);padding:.52rem 1.15rem .52rem .52rem}
.btn--wa.btn--lg{padding:.62rem 1.4rem .62rem .62rem}
.btn--wa__ic{width:30px;height:30px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;flex:none;transition:transform .5s var(--e-spring)}
.btn--lg .btn--wa__ic{width:36px;height:36px}
.btn--wa__ic svg{width:17px;height:17px}
.btn--wa:hover{border-color:#25d366}
.btn--wa:hover .btn--wa__ic{transform:rotate(-12deg) scale(1.06)}
.btn--wa.btn--block{justify-content:center}
.btn--wa-inv{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.28)}

/* ---------- 1. HERO ---------- */
.ofh{position:relative;overflow:hidden;padding-top:clamp(6.5rem,10vw,8.4rem);padding-bottom:clamp(2.6rem,5vw,4.6rem);
  background:radial-gradient(52rem 34rem at 92% 30%,rgba(100,53,206,.10),transparent 70%),var(--paper)}
/* variante de l'accueil : fond blanc, une seule petite tache violette derrière la vitrine */
.ofh--blanc{background:radial-gradient(32rem 24rem at 80% 40%,rgba(100,53,206,.17),transparent 70%),var(--white)}
.ofh__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
/* Colonne de gauche volontairement dépouillée : un titre, un prix, une
   phrase, deux boutons. Le prix est le seul élément violet
   et le plus grand après le titre : c'est lui que l'œil doit trouver. */
.ofh__txt{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.15rem,2vw,1.6rem);min-width:0}
/* mêmes réglages que le titre de l'accueil : Boldonse en capitales
   réclame un interlettrage positif et un interligne généreux */
.ofh__t{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:.015em;line-height:1.52;text-align:left;margin:0;max-width:100%}

/* le prix, en grand, suivi de ses deux conditions derrière un filet */
.ofh__price{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.3rem)}
.ofh__price b{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,5.8vw,4.9rem);line-height:.95;
  letter-spacing:-.02em;color:var(--terracotta);white-space:nowrap}
.ofh__price b i{margin-left:.14em;font-style:normal;font-size:.4em;letter-spacing:0}
.ofh__price span{display:flex;flex-direction:column;gap:.25rem;padding-left:clamp(.9rem,1.6vw,1.3rem);border-left:2px solid var(--line-2);
  font-size:1rem;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap}
.ofh__price em{font-style:normal;font-weight:500;font-size:.9rem;color:var(--fg-mute)}

.ofh__sub{max-width:42ch;margin:0;font-size:var(--t-lead);line-height:1.6;color:var(--fg-soft)}
.ofh__btns{gap:.6rem}


/* ----- la vitrine : nos sites se construisent sous vos yeux -----
   États posés par main.js (module 16) sur .ofv :
     (aucun)      maquette en fil de fer, capture masquée
     .is-typing   l'adresse du site s'écrit dans la barre
     .is-build    la capture bureau se révèle sous la ligne de balayage,
                  puis la version téléphone ; la barre de progression file
     .is-done     tout est affiché, le statut passe à « En ligne »
     .is-auto     défilement automatique en cours : l'anneau de la pastille
                  active se remplit jusqu'au site suivant
     .is-pause    survol ou focus : tout attend, l'anneau aussi
   Rythme : 1,4 s de construction (bureau et téléphone se chevauchent),
   puis 3 s sur le site terminé. Le visiteur voit surtout de vrais sites,
   la construction n'est qu'une transition. Une première version tenait
   4 s en chantier pour 2,6 s de site fini : c'était trop long.
   Le HTML porte .is-done : sans script, le premier site s'affiche fini. */
.ofh__vis{min-width:0}
.ofv{position:relative}
.ofv__stage{position:relative;padding:0 clamp(2rem,5.5vw,3.8rem) clamp(1.8rem,3.2vw,2.6rem) 0}
/* la table de travail : une trame de points, fondue sur les bords */
.ofv__stage::before{content:"";position:absolute;inset:-7% -5% -4% -7%;z-index:0;
  background:radial-gradient(circle at 1px 1px,rgba(100,53,206,.26) 1.2px,transparent 1.7px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(closest-side,#000 50%,transparent);mask:radial-gradient(closest-side,#000 50%,transparent)}
.ofv__win{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -36px rgba(40,20,90,.45),0 0 0 1px rgba(17,17,18,.08)}
.ofv__bar{display:flex;align-items:center;gap:.7rem;height:40px;padding-inline:.85rem;background:#efecf7;border-bottom:1px solid var(--line)}
.ofv__dots{display:flex;gap:6px;flex:none}
.ofv__dots i{width:10px;height:10px;border-radius:50%}
.ofv__dots i:nth-child(1){background:#ff5f57}
.ofv__dots i:nth-child(2){background:#febc2e}
.ofv__dots i:nth-child(3){background:#28c840}
.ofv__url{flex:1;min-width:0;max-width:50%;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:.4rem;
  height:25px;padding-inline:.7rem;border-radius:8px;background:#fff;font-size:.76rem;font-weight:600;color:var(--fg-soft)}
.ofv__url>span{overflow:hidden;white-space:nowrap;text-overflow:clip}
.ofv__url>span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;
  background:var(--terracotta);opacity:0}
.ofv.is-typing .ofv__url>span::after{opacity:1;animation:ofv-caret .7s steps(1) infinite}
@keyframes ofv-caret{50%{opacity:0}}
.ofv__url svg{width:11px;height:11px;flex:none;color:#1f9d55}
.ofv__st{flex:none;display:inline-flex;align-items:center;gap:.4rem;height:25px;padding:0 .7rem 0 .55rem;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--fg-soft);transition:background-color .4s,color .4s,border-color .4s}
.ofv__st i{width:7px;height:7px;border-radius:50%;background:#febc2e;box-shadow:0 0 0 3px rgba(254,188,46,.25)}
.ofv:not(.is-done) .ofv__st i{animation:ofv-pulse 1s ease-in-out infinite}
@keyframes ofv-pulse{50%{box-shadow:0 0 0 6px rgba(254,188,46,0)}}
.ofv__st .st-live{display:none}
.ofv.is-done .ofv__st{background:#effbf2;border-color:rgba(40,200,64,.35);color:#137a3a}
.ofv.is-done .ofv__st i{background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.25)}
.ofv.is-done .ofv__st .st-build{display:none}
.ofv.is-done .ofv__st .st-live{display:inline}

.ofv__prog{position:absolute;left:0;right:0;top:40px;z-index:4;height:2px}
.ofv__prog i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6435ce,#a78bee);box-shadow:0 0 8px rgba(139,92,246,.7)}
.ofv.is-build .ofv__prog i{width:100%;transition:width 1.3s cubic-bezier(.3,.6,.4,1)}
.ofv.is-done .ofv__prog i{width:100%;opacity:0;transition:opacity .5s}

/* l'écran : la maquette dessous, la capture réelle par-dessus */
.ofv__screen{position:relative;display:block;aspect-ratio:1440/1000;overflow:hidden;background:#fbfaff}
.ofv__wire{position:absolute;inset:0;z-index:0;display:grid;padding:4.5% 5.5%;gap:3.4% 3.5%;
  grid-template-columns:1fr 1fr 1.15fr;grid-template-rows:6% 10% 10% 8% 1fr 22%;
  grid-template-areas:"nav nav nav" "t1 t1 img" "t2 t2 img" "btn . img" ". . img" "c1 c2 c3"}
.ofv__wire i{border-radius:8px;background:linear-gradient(90deg,#ebe6f7 0%,#f7f4fd 45%,#ebe6f7 90%) 0 0/220% 100%;
  animation:ofv-shim 1.5s linear infinite}
@keyframes ofv-shim{to{background-position:-220% 0}}
.ofv__wire .w-nav{grid-area:nav;border-radius:6px}
.ofv__wire .w-t1{grid-area:t1}
.ofv__wire .w-t2{grid-area:t2;width:72%}
.ofv__wire .w-btn{grid-area:btn;width:44%;border-radius:100px;background:#dcd0f7}
.ofv__wire .w-img{grid-area:img;border-radius:12px}
.ofv__wire .w-c:nth-of-type(6){grid-area:c1}
.ofv__wire .w-c:nth-of-type(7){grid-area:c2}
.ofv__wire .w-c:nth-of-type(8){grid-area:c3}
.ofv__wire--m{padding:22% 8% 8%;gap:3.5%;grid-template-columns:1fr;grid-template-rows:4% 34% 6% 6% 5% 1fr;
  grid-template-areas:"nav" "img" "t1" "t2" "btn" "c1"}
.ofv__wire--m .w-c:nth-of-type(7),.ofv__wire--m .w-c:nth-of-type(8){display:none}

.ofv__shot{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top;background:none;
  opacity:0;clip-path:inset(0 0 100% 0)}
.ofv__shot.is-on{opacity:1}
.ofv.is-done .ofv__shot.is-on{clip-path:inset(0)}
.ofv.is-build .ofv__screen .ofv__shot.is-on{clip-path:inset(0);transition:clip-path 1.05s cubic-bezier(.55,0,.25,1)}
.ofv.is-build .ofv__pscreen .ofv__shot.is-on{clip-path:inset(0);transition:clip-path .75s cubic-bezier(.55,0,.25,1) .5s}
.ofv__scan{position:absolute;left:0;right:0;top:0;z-index:2;height:2px;opacity:0;pointer-events:none;
  background:#8b5cf6;box-shadow:0 0 14px 3px rgba(139,92,246,.55),0 -34px 44px -12px rgba(139,92,246,.22)}
.ofv.is-build .ofv__screen .ofv__scan{animation:ofv-scan 1.05s cubic-bezier(.55,0,.25,1) both}
.ofv.is-build .ofv__pscreen .ofv__scan{animation:ofv-scan .75s cubic-bezier(.55,0,.25,1) .5s both}
@keyframes ofv-scan{0%{top:0;opacity:1}94%{top:100%;opacity:1}100%{top:100%;opacity:0}}

/* le téléphone, posé sur le coin de la fenêtre */
.ofv__phone{position:absolute;right:0;bottom:0;z-index:3;width:clamp(96px,24%,152px);aspect-ratio:390/800;padding:6px;
  border-radius:24px;background:#111112;box-shadow:0 30px 60px -22px rgba(17,17,18,.65),inset 0 0 0 1px rgba(255,255,255,.1)}
.ofv__notch{position:absolute;top:11px;left:50%;z-index:5;translate:-50% 0;width:32%;height:8px;border-radius:10px;background:#111112}
.ofv__pscreen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px;background:#fbfaff}

/* sous la vitrine : quel site, et le choix d'un autre */
.ofv__foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;margin-top:1.1rem;
  padding-right:clamp(2rem,5.5vw,3.8rem)}
.ofv__cap{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ofv__cap b{font-size:.98rem;letter-spacing:-.02em}
.ofv__cap span{font-size:.8rem;color:var(--fg-mute)}
.ofv__pick{display:flex;gap:.4rem}
.ofv__dot{position:relative;width:32px;height:32px;padding:0;border-radius:50%;opacity:.5;
  transition:opacity .3s,transform .35s var(--e-out)}
.ofv__dot img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ofv__dot:hover,.ofv__dot:focus-visible{opacity:1;transform:translateY(-2px)}
.ofv__dot.is-on{opacity:1}
/* l'anneau de la pastille active : plein à l'arrêt, il se remplit pendant
   le défilement automatique (angle animé grâce à @property) */
@property --ofa{syntax:'<angle>';inherits:false;initial-value:360deg}
.ofv__dot.is-on::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(var(--terracotta) var(--ofa),rgba(100,53,206,.18) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.ofv.is-auto .ofv__dot.is-on::after{animation:ofv-anneau var(--cycle,4400ms) linear both}
.ofv.is-pause .ofv__dot.is-on::after{animation-play-state:paused}
@keyframes ofv-anneau{from{--ofa:0deg}to{--ofa:360deg}}

@media(max-width:960px){
  .ofh{padding-top:6.5rem}
  .ofh__grid{grid-template-columns:1fr}
  .ofh__txt{align-items:center;text-align:center}
  .ofh__t,.ofh__sub{text-align:center}
  .ofh__btns{justify-content:center}
  .ofh__price span{text-align:left}
  .ofv{max-width:640px;margin-inline:auto}
}
@media(max-width:560px){
  .ofh__btns{flex-direction:column;align-items:stretch;width:100%}
  .ofh__btns .btn{justify-content:center}
  /* « Commander mon site » vraiment centré : la flèche sort du flux et se
     cale sur le bord droit ; padding symétrique et hauteur conservée */
  .ofh__btns .btn--terracotta{position:relative;min-height:56px;padding-inline:3.3rem}
  .ofh__btns .btn--terracotta .btn__ic{position:absolute;right:.62rem;top:50%;translate:0 -50%}
  .ofh__price span{font-size:.92rem}
  .ofh__price em{font-size:.84rem}
  .ofv__stage{padding-right:2.2rem}
  .ofv__phone{width:26%;border-radius:18px;padding:4px}
  .ofv__pscreen{border-radius:14px}
  .ofv__notch{top:8px;height:6px}
  .ofv__url{max-width:none}
  .ofv__st{padding:0 .5rem}
  .ofv__st b{display:none!important}
  .ofv__foot{flex-direction:column;align-items:center;text-align:center;padding-right:0}
}

/* ---------- 2. LE CARROUSEL DE LOGOS ----------
   Les logos réels, chacun sur sa carte. Pocket WiFi a un logo blanc sur
   noir : sa carte est noire. Défilement continu, en pause au survol. */
.oflg{padding:clamp(1.6rem,3vw,2.4rem) 0;background:var(--white);border-block:1px solid var(--line);overflow:hidden}
.oflg__t{text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:1.1rem}
.oflg__mq{-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.oflg__mq .marquee__set{gap:.9rem;padding-right:.9rem}
.oflg__card{flex:none;display:grid;place-items:center;height:86px;min-width:170px;padding:0 1.8rem;border-radius:18px;
  background:var(--paper);border:1px solid var(--line)}
.oflg__card.is-dark{background:#000;border-color:#000}
.oflg__card img{display:block;background:none;max-width:none}
@media(max-width:560px){.oflg__card{height:72px;min-width:140px;padding:0 1.3rem}.oflg__card img{scale:.85}}

/* ---------- 3. LA GRILLE ----------
   Quatre colonnes, remplissage « dense » : le studio occupe un carré de
   deux sur deux, Google une bande de deux, les six autres une case. */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(.7rem,1.3vw,1rem)}
.bento__i{position:relative;display:flex;flex-direction:column;gap:1.1rem;min-height:258px;overflow:hidden;
  padding:clamp(1rem,1.6vw,1.3rem);border-radius:24px;background:var(--paper);border:1px solid var(--line);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.bento__i:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.bento__i--design{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#fff;border-color:transparent}
.bento__i--seo{grid-column:span 2}
.bento__i--lang{background:var(--terracotta);color:#fff;border-color:transparent}
.bento__txt{margin-top:auto}
.bento__txt h3{font-size:1.04rem;letter-spacing:-.02em;margin-bottom:.3rem}
.bento__txt p{font-size:.86rem;line-height:1.5;color:var(--fg-soft)}
.bento__i--design .bento__txt h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.bento__i--design .bento__txt p{max-width:52ch;font-size:.94rem;color:rgba(255,255,255,.68)}
.bento__i--lang .bento__txt p{color:rgba(255,255,255,.85)}

/* les petites illustrations, en HTML et CSS */
.bi{position:relative;flex:1;min-height:112px;display:flex;align-items:center;justify-content:center}

.bi--pages span{position:absolute;width:76px;height:96px;border-radius:10px;border:1px solid var(--line);
  box-shadow:0 10px 22px -12px rgba(17,17,18,.35);
  background:linear-gradient(#e6e0f5,#e6e0f5) 10px 12px/44px 7px no-repeat,
             linear-gradient(#efebf8,#efebf8) 10px 26px/56px 5px no-repeat,
             linear-gradient(#efebf8,#efebf8) 10px 36px/48px 5px no-repeat,
             linear-gradient(#efebf8,#efebf8) 10px 46px/52px 5px no-repeat,#fff}
.bi--pages span:nth-child(1){transform:translate(-34px,6px) rotate(-11deg)}
.bi--pages span:nth-child(2){transform:translate(32px,4px) rotate(10deg)}
.bi--pages span:nth-child(3){display:grid;place-content:center;text-align:center;font-size:.7rem;font-weight:700;
  color:var(--fg-mute);background:#fff}
.bi--pages b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.8rem;line-height:1.1;color:var(--terracotta)}

.bi--resp .tab{width:122px;height:90px;border-radius:12px;border:3px solid var(--ink);background:#fff;padding:6px;transform:translateX(-16px)}
.bi--resp .ph{position:absolute;width:46px;height:88px;border-radius:11px;border:3px solid var(--ink);background:#fff;padding:5px;
  transform:translate(52px,12px);box-shadow:-8px 10px 18px -10px rgba(17,17,18,.4)}
.bi--resp i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(var(--terracotta) 0 30%,transparent 30% 38%,#e6e0f5 38% 46%,transparent 46% 54%,#efebf8 54% 60%,transparent 60% 66%,#efebf8 66% 72%,transparent 72%)}

.bi--wa{flex-direction:column;align-items:stretch;justify-content:center;gap:.45rem;padding:.7rem;border-radius:16px;background:#efeae2}
.bi--wa span{max-width:88%;padding:.45rem .65rem;border-radius:10px;font-size:.74rem;line-height:1.35;color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bi--wa .in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.bi--wa .out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}

.bi--serp{flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem;padding:1rem 1.15rem;
  border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -22px rgba(17,17,18,.35)}
.bi--serp .u{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:#4d5156}
.bi--serp .u i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;
  font-size:.72rem;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--terracotta)}
.bi--serp b{font-size:clamp(.98rem,1.3vw,1.12rem);font-weight:500;color:#1a0dab;letter-spacing:-.01em;line-height:1.3}
.bi--serp .d{font-size:.8rem;color:#4d5156;line-height:1.45}

.bi--lang{gap:.4rem;flex-wrap:wrap}
.bi--lang span{padding:.5rem .95rem;border-radius:100px;background:rgba(255,255,255,.16);color:#fff;font-weight:800;font-size:.92rem}
.bi--lang span.on{background:#fff;color:var(--terracotta)}

.bi--gbp{flex-direction:column;align-items:stretch;gap:.5rem}
.bi--gbp .map{position:relative;flex:1;min-height:74px;border-radius:14px;
  background:linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%),
             linear-gradient(0deg,transparent 58%,#fff 58% 64%,transparent 64%),
             linear-gradient(32deg,transparent 30%,rgba(255,255,255,.9) 30% 33%,transparent 33%),#dfe9d8}
.bi--gbp .pin{position:absolute;left:50%;top:50%;translate:-50% -60%;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--terracotta);color:#fff;box-shadow:0 0 0 6px rgba(100,53,206,.2)}
.bi--gbp .pin svg{width:18px;height:18px}
.bi--gbp .card{display:flex;flex-direction:column;padding:.45rem .7rem;border-radius:10px;background:#fff;border:1px solid var(--line)}
.bi--gbp .card b{font-size:.8rem}
.bi--gbp .card em{font-style:normal;font-size:.72rem;color:#1e7e34}

.bi--speed{flex-direction:column;align-items:stretch;justify-content:center;gap:.5rem}
.bi--speed .bar{height:12px;border-radius:100px;background:#e5e1ee;overflow:hidden}
.bi--speed .bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#6435ce,#a78bee);
  transition:width 1.4s var(--e-out) .35s}
.bento__i.in .bi--speed .bar i{width:100%}
.bi--speed em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--fg-soft)}

/* ----- le studio de maquette (tuile « design ») -----
   Trois palettes de couleurs et d'arrondis. main.js déplace d'abord le
   curseur (data-cur), puis applique la palette (data-pal) : on voit le
   clic, puis la maquette qui change de peau. */
.bi--studio{--c1:#c2683e;--c2:#2b1d16;--c3:#f6ede3;--r:6px;--k:42%;
  flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:300px;overflow:hidden;
  border-radius:16px;background:#1b1b1f;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.bi--studio[data-pal="1"]{--c1:#2f4fd8;--c2:#0f1a3d;--c3:#edf1ff;--r:14px;--k:86%}
.bi--studio[data-pal="2"]{--c1:#1f8a5b;--c2:#0e2a1f;--c3:#ebf6ef;--r:2px;--k:12%}
.st__bar{display:flex;align-items:center;gap:.7rem;height:32px;padding:0 .75rem;flex:none;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:.7rem;color:rgba(255,255,255,.55)}
.st__dots{display:flex;gap:5px}
.st__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.st__file{flex:1;text-align:center;font-weight:600;color:rgba(255,255,255,.78)}
.st__zoom{font-variant-numeric:tabular-nums}
.st__body{flex:1;display:grid;grid-template-columns:98px minmax(0,1fr) 122px;min-height:0}
.st__layers,.st__props{display:flex;flex-direction:column;gap:.3rem;padding:.7rem .6rem;font-size:.66rem;color:rgba(255,255,255,.6)}
.st__layers{border-right:1px solid rgba(255,255,255,.07)}
.st__props{position:relative;border-left:1px solid rgba(255,255,255,.07)}
.st__lh{margin:.2rem 0 .1rem;font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.st__layers span:not(.st__lh){display:flex;align-items:center;gap:.45rem;padding:.3rem .4rem;border-radius:5px;white-space:nowrap}
.st__layers span i{width:9px;height:7px;flex:none;border-radius:2px;border:1.2px solid currentColor;opacity:.7}
.st__layers span.on{background:rgba(100,53,206,.4);color:#fff}
.st__canvas{position:relative;display:grid;place-items:center;padding:1rem .9rem;
  background:#141417 radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/14px 14px}

/* la maquette du riad, peinte avec les variables de la palette */
.st__art{position:relative;width:100%;max-width:340px;padding:.6rem .65rem .65rem;border-radius:8px;
  background:var(--c3);color:var(--c2);box-shadow:0 16px 34px -14px rgba(0,0,0,.7);transition:background-color .7s,color .7s}
.sa__nav{display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem;font-size:.54rem}
.sa__nav b{margin-right:auto;font-family:Georgia,"Times New Roman",serif;font-size:.74rem;font-weight:400}
.sa__nav i{width:15px;height:3px;border-radius:2px;background:currentColor;opacity:.3}
.sa__nav span{padding:.22rem .5rem;border-radius:var(--r);background:var(--c1);color:#fff;font-weight:700;
  transition:background-color .7s,border-radius .7s}
.sa__hero{display:grid;grid-template-columns:1.12fr .88fr;gap:.6rem;align-items:center}
.sa__txt{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.sa__txt em{font-style:normal;font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c1);transition:color .7s}
.sa__h{position:relative;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(.86rem,1.25vw,1.12rem);
  line-height:1.14;letter-spacing:-.01em}
.sa__btn{padding:.3rem .65rem;border-radius:var(--r);background:var(--c1);color:#fff;font-size:.52rem;font-weight:700;
  transition:background-color .7s,border-radius .7s}
.sa__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);transition:border-radius .7s}
.sa__img img{width:100%;height:100%;object-fit:cover;background:none}
.sa__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.6rem}
.sa__cards i{height:22px;border-radius:var(--r);background:color-mix(in srgb,var(--c1) 18%,transparent);transition:background-color .7s,border-radius .7s}
/* le cadre de sélection posé sur le titre, avec ses poignées */
.sa__hw{position:relative;display:block}
.st__sel{position:absolute;inset:-4px -6px;border:1.5px solid #8b5cf6;pointer-events:none}
.st__sel i{position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid #8b5cf6}
.st__sel i:nth-child(1){left:-4px;top:-4px}.st__sel i:nth-child(2){right:-4px;top:-4px}
.st__sel i:nth-child(3){left:-4px;bottom:-4px}.st__sel i:nth-child(4){right:-4px;bottom:-4px}
.st__sel b{position:absolute;right:-1.5px;bottom:-16px;padding:.1rem .35rem;border-radius:0 0 3px 3px;background:#8b5cf6;color:#fff;
  font-size:.5rem;font-weight:700;white-space:nowrap}

/* le panneau de propriétés */
.st__pals{position:relative;display:flex;flex-direction:column;gap:5px}
.st__pal{display:flex;gap:3px;height:24px;padding:4px;border-radius:7px;border:1.5px solid transparent;transition:border-color .3s,background-color .3s}
.st__pal i{flex:1;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bi--studio[data-pal="0"] .st__pal[data-p="0"],
.bi--studio[data-pal="1"] .st__pal[data-p="1"],
.bi--studio[data-pal="2"] .st__pal[data-p="2"]{border-color:#8b5cf6;background:rgba(139,92,246,.14)}
.st__font{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:7px;background:rgba(255,255,255,.05)}
.st__font b{font-family:Georgia,"Times New Roman",serif;font-size:1.15rem;font-weight:400;color:#fff}
.st__font span{display:flex;flex-direction:column;line-height:1.25;color:#fff;font-size:.64rem}
.st__font em{font-style:normal;color:rgba(255,255,255,.45)}
.st__slide{position:relative;height:4px;margin:.45rem .2rem;border-radius:4px;background:rgba(255,255,255,.14)}
.st__slide i{position:absolute;top:50%;left:var(--k);width:12px;height:12px;border-radius:50%;background:#fff;translate:-50% -50%;
  box-shadow:0 0 0 3px rgba(139,92,246,.35);transition:left .7s var(--e-out)}
/* le curseur : il vise la palette dont c'est le tour (data-cur) */
.st__cur{position:absolute;right:2px;top:calc(var(--cy,0) * 29px + 9px);z-index:3;width:20px;height:20px;pointer-events:none;
  transition:top .6s var(--e-out),transform .15s}
.st__cur svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.bi--studio[data-cur="1"] .st__cur{--cy:1}
.bi--studio[data-cur="2"] .st__cur{--cy:2}
.bi--studio.is-click .st__cur{transform:scale(.8)}

@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__i--design{grid-row:span 1}
}
@media(max-width:600px){
  .bento{grid-template-columns:1fr}
  .bento__i--design,.bento__i--seo{grid-column:auto}
  .bento__i{min-height:0}
  .st__body{grid-template-columns:minmax(0,1fr) 108px}
  .st__layers{display:none}
}

/* ---------- 4. LE TICKET ---------- */
.oft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4.5vw,4.5rem);align-items:start;
  max-width:1060px;margin-inline:auto}
/* `rotate` (et non `transform`) : l'inclinaison survit à l'animation
   d'apparition, qui remet `transform` à zéro */
.tkt{position:relative;rotate:-1.3deg;background:#fff;border-radius:22px 22px 0 0;
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1.2rem,2.6vw,2rem) clamp(1.6rem,2.6vw,2rem);
  filter:drop-shadow(0 26px 30px rgba(60,31,128,.16))}
/* le bord dentelé du ticket de caisse */
.tkt::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:radial-gradient(circle at 50% 0,#fff 8.5px,transparent 9px) 0 0/20px 12px repeat-x}
.tkt__head{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-bottom:1rem;border-bottom:2px dashed var(--line-2);text-align:center}
.tkt__head img{width:150px;height:auto;background:none}
.tkt__head span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.tkt__lines{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 0;border-bottom:2px dashed var(--line-2);
  font-family:var(--font-mono);font-size:.8rem}
.tkt__lines li{display:flex;align-items:baseline;gap:.5rem}
.tkt__lines span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkt__lines i{flex:1;min-width:1rem;border-bottom:1.5px dotted var(--line-2);translate:0 -3px}
.tkt__lines b{font-weight:700;color:var(--zellige)}
.tkt__total{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:1.1rem}
.tkt__total span{font-family:var(--font-mono);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.tkt__total em{display:block;font-style:normal;font-weight:500;font-size:.72rem;color:var(--fg-mute);text-transform:none;letter-spacing:0}
.tkt__total b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;color:var(--terracotta);white-space:nowrap}
.tkt__foot{margin-top:1rem;font-family:var(--font-mono);font-size:.74rem;text-align:center;color:var(--fg-mute)}

.oft__side{display:flex;flex-direction:column;gap:.9rem;padding-top:.4rem}
.oft__h{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.oft__lead{font-size:.95rem;line-height:1.55;color:var(--fg-soft)}
.oft__opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-radius:18px;
  background:#fff;border:1px solid var(--line)}
.oft__opt b{display:block;font-size:.98rem;letter-spacing:-.015em}
.oft__opt em{display:block;margin-top:.15rem;font-style:normal;font-size:.82rem;line-height:1.45;color:var(--fg-soft)}
.oft__opt>span{font-weight:800;font-size:1.05rem;white-space:nowrap}
.oft__opt>span i{font-style:normal;font-weight:500;font-size:.78rem;color:var(--fg-mute)}
.oft__year{display:flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:var(--zellige)}
.oft__year svg{width:13px;height:13px;flex:none}
.oft__cta{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.oft__secure{display:flex;align-items:center;gap:.45rem;margin-top:.2rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.oft__secure svg{width:14px;height:14px;flex:none;color:var(--zellige)}
.oft__pay{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.oft__pay li{height:42px;min-width:58px;padding:4px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.oft__pay img{height:14px;width:auto;background:none}
.oft__pay .is-cmi img{height:27px}
.oft__pay .is-lana img{height:34px}
.oft__pay .is-mc img{height:22px}
@media(max-width:860px){
  .oft{grid-template-columns:1fr;max-width:560px}
  .tkt{rotate:0deg}
}

/* ---------- 5. L'ANCRAGE ---------- */
.ofc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);max-width:1080px;margin-inline:auto}
.ofc__g{padding:clamp(1.2rem,2.4vw,1.8rem);border-radius:26px;background:rgba(255,255,255,.04);border:1px solid var(--line-inv)}
.ofc__g h3{margin-bottom:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ofc__row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who val" "bar bar";gap:.55rem 1rem;
  align-items:center;padding:.9rem 0;border-top:1px solid var(--line-inv)}
.ofc__row:first-of-type{border-top:0}
.ofc__who{grid-area:who;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.78)}
.ofc__who img{height:18px;width:auto;background:none}
.ofc__val{grid-area:val;font-weight:800;font-size:1rem;white-space:nowrap}
.ofc__row.is-me .ofc__val{color:var(--safran)}
.ofc__bar{grid-area:bar;position:relative;height:12px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.ofc__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.42) var(--s),rgba(255,255,255,.1));
  transition:width 1.3s var(--e-out);transition-delay:calc(var(--i,0) * 160ms + 250ms)}
.ofc__row{--i:0}
.ofc__g.in .ofc__fill{width:var(--w)}
.ofc__fill.is-me{background:var(--safran);box-shadow:0 0 18px rgba(167,139,238,.9)}
.ofc__note{max-width:70ch;margin:1.1rem auto 0;text-align:center;font-size:.78rem;color:rgba(255,255,255,.5)}
.ofc__why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);max-width:1080px;margin:clamp(2rem,4vw,3rem) auto 0}
.ofc__why li{padding-top:1rem;border-top:2px solid var(--terracotta)}
.ofc__why b{display:block;margin-bottom:.3rem;font-size:1.02rem}
.ofc__why span{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.62)}
@media(max-width:860px){
  .ofc,.ofc__why{grid-template-columns:1fr}
}

/* ---------- 6. LE PLANNING ----------
   À gauche la phrase et les boutons ; à droite une carte générale,
   sans date : aujourd'hui, cinq jours ouvrés, en ligne. À l'apparition
   (.in), le trait se remplit en 1,8 s, les cinq jours s'allument au
   passage, le point « En ligne » s'active, puis la notification monte. */
.ofd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:1120px;margin-inline:auto}
.ofd__l{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
/* trois lignes voulues : « Commandez » / « cette semaine, » / « en ligne la suivante » */
.ofd__t{margin:0;font-size:clamp(1.45rem,2.6vw,2.35rem);letter-spacing:.012em;line-height:1.6;text-align:left}
.ofd__p{max-width:46ch;font-size:var(--t-lead);line-height:1.6;color:var(--fg-soft)}
.ofd__btns{margin-top:.3rem}

.ofd__card{padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:26px;background:#fff;border:1px solid var(--line);rotate:1deg;
  box-shadow:0 34px 64px -36px rgba(60,31,128,.42)}
.ofd__ch{display:flex;align-items:center;gap:.75rem}
.ofd__ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--rose-soft);color:var(--terracotta)}
.ofd__ic svg{width:20px;height:20px}
.ofd__ch b{flex:1;min-width:0;font-size:1.02rem;letter-spacing:-.02em;line-height:1.25}
.ofd__ch b em{display:block;font-style:normal;font-weight:500;font-size:.8rem;color:var(--fg-mute)}
.ofd__pill{flex:none;padding:.4rem .75rem;border-radius:100px;background:var(--ink);color:#fff;font-size:.76rem;font-weight:700;white-space:nowrap}

/* le parcours : sept points sur un trait, du centre du premier au centre du dernier */
.ofd__track{position:relative;margin:1.7rem 0 1.4rem}
.ofd__track ol{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:start}
.ofd__rail{position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:21px;height:4px;border-radius:4px;background:#ece8f6}
.ofd__rail i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#111112,#6435ce 45%,#8b5cf6);
  transition:width 1.8s cubic-bezier(.45,0,.2,1) .3s}
.ofd__card.in .ofd__rail i{width:100%}
.ofd__n{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;min-width:0}
.ofd__n>span{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;margin-top:8px;border-radius:50%;
  background:#fff;border:2px solid #e3ddf3;font-size:.8rem;font-weight:800;color:#a9a4b8;
  transition:background-color .35s,border-color .35s,color .35s,scale .45s var(--e-spring);transition-delay:calc(var(--i) * .3s + .3s)}
.ofd__card.in .ofd__n>span{background:var(--rose-soft);border-color:var(--terracotta);color:var(--terracotta)}
.ofd__n--start>span,.ofd__n--live>span{width:46px;height:46px;margin-top:0}
.ofd__n>span svg{width:18px;height:18px}
.ofd__n--start>span,.ofd__card.in .ofd__n--start>span{background:var(--ink);border-color:var(--ink);color:#fff}
.ofd__card.in .ofd__n--live>span{background:var(--terracotta);border-color:var(--terracotta);color:#fff;scale:1.08;
  box-shadow:0 0 0 7px rgba(100,53,206,.16)}
.ofd__n b{font-size:.78rem;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap}
.ofd__n em{font-style:normal;font-size:.7rem;line-height:1.2;color:var(--fg-mute);white-space:nowrap}

/* la notification finale */
.ofd__notif{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:16px;background:#f2fbf4;
  border:1px solid rgba(40,200,64,.3);opacity:0;translate:0 12px;transition:opacity .45s ease 2.3s,translate .6s var(--e-spring) 2.3s}
.ofd__card.in .ofd__notif{opacity:1;translate:0 0}
.ofd__nic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#28c840;color:#fff}
.ofd__nic svg{width:16px;height:16px}
.ofd__notif b{display:block;font-size:.92rem;letter-spacing:-.01em}
.ofd__notif em{display:block;font-style:normal;font-size:.78rem;color:var(--fg-soft)}
.ofd__foot{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;font-size:.78rem;color:var(--fg-soft)}
.ofd__foot li{display:inline-flex;align-items:center;gap:.4rem}
.ofd__foot svg{width:13px;height:13px;flex:none;color:var(--terracotta)}
@media (prefers-reduced-motion:reduce){.ofd__card *{transition-delay:0s!important}}
@media(max-width:900px){
  .ofd{grid-template-columns:1fr}
  .ofd__l{align-items:center;text-align:center}
  .ofd__t{text-align:center}
  .ofd__btns{justify-content:center}
  .ofd__card{max-width:480px;width:100%;margin-inline:auto;rotate:0deg}
}
@media(max-width:420px){
  .ofd__n>span{width:26px;height:26px;margin-top:9px;font-size:.72rem}
  .ofd__n--start>span,.ofd__n--live>span{width:44px;height:44px;margin-top:0}
  .ofd__rail{top:20px}
  .ofd__pill{display:none}
}

/* ---------- 7. SANS RISQUE : nos clauses, mot pour mot ----------
   Une vraie page de CGV, posée sur deux autres feuilles : les phrases
   clés surlignées au feutre (le surlignage se trace à l'apparition),
   des notes manuscrites dans la marge, la signature et le tampon. */
.ofg{position:relative;max-width:900px;margin-inline:auto}
.ofg::before,.ofg::after{content:"";position:absolute;inset:0;border-radius:8px;background:#fff;
  box-shadow:0 10px 30px -18px rgba(60,31,128,.35)}
.ofg::before{rotate:2.2deg;translate:10px 8px;background:#fbfaff}
.ofg::after{rotate:-1.4deg;translate:-8px 10px}
.ofg__doc{position:relative;z-index:1;padding:clamp(1.5rem,4vw,3rem) clamp(1.2rem,4.5vw,3.4rem);border-radius:8px;background:#fff;
  box-shadow:0 1px 0 rgba(17,17,18,.04),0 34px 64px -36px rgba(60,31,128,.4)}
.ofg__dh{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1.5px solid var(--ink)}
.ofg__dh img{width:clamp(120px,16vw,160px);height:auto;background:none}
.ofg__dh span{text-align:right;font-weight:800;font-size:.86rem;letter-spacing:-.01em}
.ofg__dh em{display:block;font-style:normal;font-weight:500;font-size:.74rem;color:var(--fg-mute)}
.ofg__cl{display:flex;flex-direction:column;gap:clamp(1.1rem,2.4vw,1.6rem);margin-top:clamp(1.3rem,3vw,2rem)}
.ofg__cl li{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(150px,190px);gap:.4rem 1.2rem;align-items:start}
.ofg__art{padding-top:.3rem;font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:var(--terracotta);white-space:nowrap}
.ofg__art:hover{text-decoration:underline;text-underline-offset:3px}
.ofg__cl p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.62;color:#2c2c33}
/* le surligneur : la bande se tire de gauche à droite à l'apparition */
.ofg__cl mark{padding:0 .08em;color:inherit;background:linear-gradient(transparent 52%,rgba(167,139,238,.5) 52% 92%,transparent 92%) no-repeat 0 0/0% 100%;
  transition:background-size 1.1s var(--e-out)}
.ofg__doc.in mark{background-size:100% 100%}
.ofg__cl li:nth-child(2) mark{transition-delay:.25s}
.ofg__cl li:nth-child(3) mark{transition-delay:.5s}
.ofg__cl li:nth-child(4) mark{transition-delay:.75s}
.ofg__note{position:relative;padding-left:1.5rem;rotate:-3deg;font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
  font-size:1.6rem;font-weight:600;line-height:1.05;color:var(--terracotta)}
.ofg__note::before{content:"";position:absolute;left:0;top:.55em;width:1.05rem;height:2px;border-radius:2px;background:currentColor}
.ofg__df{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem);
  padding-top:1.2rem;border-top:1px dashed var(--line-2)}
.ofg__sign{font-family:"Caveat","Segoe Script","Bradley Hand",cursive;font-size:2rem;font-weight:600;line-height:1;color:var(--ink)}
.ofg__sign em{display:block;margin-top:.35rem;font-family:var(--font-body);font-style:normal;font-size:.76rem;font-weight:500;color:var(--fg-mute)}
/* le tampon : il tombe sur la page une fois les surlignages tracés */
.ofg__stamp{flex:none;width:clamp(88px,11vw,112px);height:auto;color:var(--terracotta);rotate:-14deg;mix-blend-mode:multiply;
  opacity:0;scale:1.6;transition:opacity .25s 1.5s,scale .45s var(--e-spring) 1.5s}
.ofg__doc.in .ofg__stamp{opacity:.88;scale:1}
.ofg__law{display:flex;align-items:flex-start;justify-content:center;gap:.5rem;max-width:64ch;margin:clamp(1.8rem,3vw,2.4rem) auto 0;
  font-size:.86rem;line-height:1.55;color:var(--fg-soft);text-align:center}
.ofg__law svg{width:17px;height:17px;flex:none;margin-top:.15em;color:var(--terracotta)}
.ofg__law a{color:var(--terracotta);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
  .ofg__cl li{grid-template-columns:1fr;gap:.3rem}
  .ofg__art{padding-top:0}
  .ofg__note{justify-self:start;margin-top:.1rem;font-size:1.45rem}
  .ofg__dh{flex-direction:column;align-items:flex-start}
  .ofg__dh span{text-align:left}
}

/* ---------- 8. FAQ + APPEL FINAL ---------- */
.ofq__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem;margin-top:1.8rem;font-weight:600}

.ofe{position:relative;overflow:hidden;border-radius:clamp(26px,3.4vw,44px);background:var(--ink);color:#fff;
  padding:clamp(2.6rem,6vw,5rem) clamp(1.2rem,4vw,3rem)}
.ofe__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.ofe__in .hero-type{margin:0;color:#fff;font-size:clamp(1.45rem,3.5vw,2.9rem)}
.ofe__price{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.ofe__price b{font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,6vw,4.6rem);line-height:1}
.ofe__price b i{margin-left:.15em;font-style:normal;font-size:.45em;color:var(--safran)}
.ofe__price span{font-size:.88rem;color:rgba(255,255,255,.66)}
.ofe__btns{justify-content:center}
.ofe__note{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:rgba(255,255,255,.6)}
.ofe__note svg{width:13px;height:13px;flex:none}
.ofe__blob{position:absolute;z-index:1;border-radius:50%;filter:blur(70px);opacity:.55}
.ofe__blob--1{width:46%;aspect-ratio:1;left:-12%;top:-36%;background:var(--terracotta)}
.ofe__blob--2{width:40%;aspect-ratio:1;right:-10%;bottom:-42%;background:var(--zellige)}

/* ---------- 9. LA BARRE COLLANTE ---------- */
.ofbar{position:fixed;left:0;right:0;bottom:clamp(.7rem,1.6vw,1.2rem);z-index:870;display:flex;justify-content:center;
  padding-inline:.7rem;pointer-events:none;transform:translateY(170%);transition:transform .55s var(--e-out)}
.ofbar.is-on{transform:none}
.ofbar__in{pointer-events:auto;display:flex;align-items:center;gap:.5rem;width:100%;max-width:660px;
  padding:.45rem .45rem .45rem 1.2rem;border-radius:100px;background:rgba(17,17,18,.94);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 22px 50px -16px rgba(17,17,18,.65)}
.ofbar__t{flex:1;min-width:0;line-height:1.25}
.ofbar__t b{display:block;font-size:.9rem}
.ofbar__t>span{display:block;font-size:.76rem;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* texte encre sur le vert : 10,6:1, là où le blanc n'aurait tenu que 1,98:1 */
.ofbar__wa,.ofbar__go{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:46px;border-radius:100px;
  font-weight:700;font-size:.9rem;white-space:nowrap;transition:transform .35s var(--e-out)}
.ofbar__wa{padding:0 1.05rem 0 .75rem;background:#25d366;color:#0b2e1a}
.ofbar__wa svg{width:20px;height:20px}
.ofbar__go{padding:0 1.15rem;background:var(--terracotta);color:#fff}
.ofbar__go svg{width:13px;height:13px}
.ofbar__p{font-weight:500;opacity:.82}
.ofbar__wa:hover,.ofbar__go:hover{transform:translateY(-2px)}
/* la barre porte déjà WhatsApp : le bouton flottant s'efface tant qu'elle est là */
.wafab{transition:gap .4s var(--e-out),padding .4s var(--e-out),transform .35s var(--e-out),opacity .3s}
.has-ofbar .wafab{opacity:0;pointer-events:none;transform:translateY(16px)}
@media(max-width:600px){
  .ofbar{bottom:0;padding:0}
  .ofbar__in{max-width:none;gap:.45rem;border-radius:20px 20px 0 0;padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom))}
  .ofbar__t{display:none}
  .ofbar__wa,.ofbar__go{flex:1;height:48px}
}
@media(max-width:400px){.ofbar__p{display:none}}

/* ============================================================
   MUR DE TÉLÉPHONES (accueil, après « Tout est inclus »)
   Plan incliné en 3D, quatre colonnes en sens alternés. Le masque
   efface les téléphones derrière le texte, à gauche.
   ============================================================ */
.mur{position:relative;overflow:hidden;min-height:clamp(560px,70vw,760px);display:flex;align-items:center}
.mur__wall{position:absolute;inset:0;perspective:1400px;
  -webkit-mask:linear-gradient(90deg,transparent 0,transparent 28%,#000 62%);mask:linear-gradient(90deg,transparent 0,transparent 28%,#000 62%)}
.mur__plane{position:absolute;top:-30%;right:-10%;width:72%;height:160%;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  transform:rotateX(28deg) rotateZ(-18deg) rotateY(-8deg);transform-style:preserve-3d}
.mur__track{display:flex;flex-direction:column;gap:22px;animation:mur-monte var(--dur) linear infinite}
.mur__col--b .mur__track{animation-name:mur-descend}
.mur.is-pause .mur__track{animation-play-state:paused}
@keyframes mur-monte{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes mur-descend{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.mur__tel{display:block;aspect-ratio:390/800;padding:6px;border-radius:26px;background:#2a2a2e;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12)}
.mur__tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;background:#1b1b1d}
.mur__txt{position:relative;z-index:2}
.mur__txt>*{max-width:34rem}
.mur__txt h2{color:#fff;margin:1rem 0;font-size:clamp(1.55rem,4.3vw,3.3rem)}
.mur__txt p{color:rgba(255,255,255,.7);font-size:var(--t-lead);line-height:1.6;margin-bottom:1.4rem}
@media(max-width:800px){.mur__plane{width:120%;right:-40%;opacity:.45}.mur__wall{-webkit-mask:none;mask:none}}
@media (prefers-reduced-motion:reduce){.mur__track{animation:none}}