/* =========================================================
   POLYANCE — Home (V3)
   Système : typographie affirmée, grilles asymétriques (bento),
   sections couleur pleines assumées, cartes avec vraie profondeur.
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  padding-top:clamp(96px, 10vh, 118px); padding-bottom:clamp(24px, 4vh, 48px);
  overflow:hidden;
  background:var(--white);
}
.hero-blob{
  position:absolute;
  border-radius:60% 40% 45% 55%/55% 65% 35% 45%;
  filter:blur(90px);
  background:var(--blue-tint);
  opacity:.045;
  pointer-events:none;
}
.hero-blob.b1{ width:900px; height:620px; top:-180px; right:-320px; transform:rotate(-14deg); }

.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.5fr 1fr;
  align-items:center; gap:36px;
}
.hero-inner{ max-width:680px; min-width:0; }
.hero h1{
  margin-bottom:20px;
  font-size:clamp(26px,3.6vw,48px);
  line-height:1.12;
}
.hero h1 span{ display:block; }
.hero .lede{
  max-width:42ch; margin-bottom:30px;
  font-size:clamp(16px,1.5vw,18px);
}
.hero-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-note{ font-size:13.5px; color:var(--ink-faint); }

/* ---- portrait : Léo au cœur du Y, sans empilement de cartes ---- */
.hero-portrait{
  position:relative;
  max-width:clamp(260px, 54vh, 430px); margin-inline:auto;
}
.portrait-blob{
  position:absolute; z-index:0;
  top:-6%; left:-9%; right:-4%; bottom:-3%;
  border-radius:46% 54% 58% 42% / 58% 42% 60% 40%;
  background:linear-gradient(160deg,#F0F7FD 0%, var(--blue-tint) 55%, #E1EBF8 100%);
  box-shadow:0 40px 90px -50px rgba(5,61,140,.3), 0 16px 40px -26px rgba(5,61,140,.12);
  transform:translate3d(var(--pbl-x,0px),var(--pbl-y,0px),0);
  will-change:transform;
  pointer-events:none;
}
.portrait-frame{
  position:relative; z-index:1;
  aspect-ratio:4/5; border-radius:var(--radius-l);
  overflow:hidden;
}
.portrait-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.portrait-badge{
  position:absolute; z-index:2;
  background:var(--white); border-radius:var(--radius-m);
  display:flex; align-items:center; gap:12px;
  opacity:0;
  animation:badge-in .5s var(--ease-soft) forwards;
}
@keyframes badge-in{ to{ opacity:1; } }
.portrait-badge-main{
  left:-10%; bottom:-7%;
  padding:14px 18px; max-width:220px;
  box-shadow:0 20px 45px -28px rgba(16,24,43,.22);
  animation-delay:.70s;
  transform:translate3d(var(--pb-x,0px),var(--pb-y,0px),0);
  will-change:transform;
}
.portrait-badge-mini{
  right:-5%; top:-5%;
  padding:12px 17px; max-width:195px;
  box-shadow:0 14px 32px -22px rgba(16,24,43,.14);
  animation-delay:.85s;
  transform:translate3d(var(--pm-x,0px),var(--pm-y,0px),0);
  will-change:transform;
}
.portrait-badge .dot{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; color:#fff; }
.portrait-badge-mini .dot{ width:22px; height:22px; background:var(--blue); }
.portrait-badge p{ font-size:12.5px; font-weight:700; color:var(--navy); line-height:1.3; margin:0; }
.portrait-badge-mini p{ font-size:12.5px; }

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.scroll-cue svg{ animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue svg{ animation:none; } }

/* ---- choreographie d'entrée (0 anim si prefers-reduced-motion, voir animations.css) ---- */
.hero-portrait, .hero h1, .hero .lede, .hero-actions{
  opacity:0; transform:translateY(14px);
  animation:hero-in .6s var(--ease-soft) forwards;
}
.hero-portrait{ transform:translateY(12px); animation-duration:.5s; animation-delay:.55s; }
.hero h1 .line{ display:block; }
.hero h1 .line1{ animation:hero-in .55s var(--ease-soft) forwards; opacity:0; transform:translateY(14px); animation-delay:.72s; }
.hero h1 .line3{ animation:hero-in .55s var(--ease-soft) forwards; opacity:0; transform:translateY(14px); animation-delay:.9s; }
.hero h1{ animation:none; opacity:1; transform:none; }
.hero .lede{ animation-delay:1.04s; }
.hero-actions{ animation-delay:1.16s; }
@keyframes hero-in{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-portrait, .hero h1 .line1, .hero h1 .line3, .hero .lede, .hero-actions, .portrait-badge{
    animation:none; opacity:1; transform:none;
  }
}
html.no-intro .hero-portrait,
html.no-intro .hero h1 .line1,
html.no-intro .hero h1 .line3,
html.no-intro .hero .lede,
html.no-intro .hero-actions,
html.no-intro .portrait-badge{
  animation:none; opacity:1; transform:none;
}

@media (max-width:900px){
  .hero{ min-height:auto; }
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-inner{ max-width:none; text-align:center; }
  .hero-inner .hero-actions{ justify-content:center; }
  .hero-portrait{ max-width:200px; }
  .scroll-cue{ display:none; }
}
@media (max-width:600px){
  .hero{ padding-top:96px; padding-bottom:36px; }
  .hero-inner{ text-align:left; }
  .hero-inner .hero-actions{ justify-content:flex-start; }
  .hero-actions{ flex-direction:column; align-items:flex-start; gap:14px; }
  .portrait-badge-main{ max-width:170px; padding:12px 14px; left:-4%; }
  .portrait-badge-mini{ max-width:132px; padding:8px 12px; right:-2%; top:-4%; }
  .hero-portrait{ max-width:190px; }
  .hero h1{ font-size:clamp(24px,7.4vw,32px); }
  .hero h1 .line1, .hero h1 .line3{ white-space:normal; }
}

/* ---------- CONSTAT ---------- */
.constat-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.constat-copy .lede{ max-width:50ch; }
.constat-title{ margin-bottom:22px; }
@media (min-width:861px){
  .constat-title{ margin-bottom:32px; }
}
.constat-copy .closing{
  display:inline-block; margin-top:24px; font-weight:700; color:var(--blue);
  font-size:19px;
}
/* choreographie d'entree propre a cette colonne (n'affecte pas .reveal ailleurs) */
.constat-copy .eyebrow.reveal{ transition-delay:0s; }
.constat-copy h2.reveal{ transition-delay:.12s; }
.constat-copy p.lede.reveal:nth-of-type(1){ transition-delay:.24s; }
.constat-copy p.lede.reveal:nth-of-type(2){ transition-delay:.34s; }
.constat-copy .closing.reveal{ transition-delay:.44s; }

.thoughts{ position:relative; min-height:380px; }
.thought{
  position:absolute;
  font-family:var(--font-display); font-weight:400;
  color:var(--ink-soft);
  opacity:0;
  transform:translate(var(--tx,0px),var(--ty,26px)) scale(.96) rotate(var(--r,0deg));
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease-soft);
  transition-delay:calc(var(--i,0) * 90ms);
  white-space:nowrap;
}
.thought.is-visible{
  opacity:var(--o,1);
  transform:translate(0,0) scale(1) rotate(var(--r,0deg));
  animation:thought-float var(--fd,7s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 90ms + .45s);
}
@keyframes thought-float{
  0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); }
  50%{ transform:translate(var(--fx,3px),var(--fy,-5px)) rotate(calc(var(--r,0deg) + var(--frd,.6deg))); }
}
@media (hover:hover){
  .thought.is-visible:hover{ opacity:1; }
}

.thought.t1{ top:0%;  left:2%;  font-size:22px; --r:-3deg; color:var(--blue);
  --ty:-30px; --fx:3px; --fy:-6px; --fd:7s; }
.thought.t2{ top:15%; left:36%; font-size:27px; --r:2deg;  color:var(--navy); font-weight:700;
  --tx:34px; --ty:0px; --fx:-4px; --fy:5px; --fd:8.5s; }
.thought.t3{ top:36%; left:0%;  font-size:18px; --r:2deg;  --o:.7;
  --ty:26px; --fx:2px; --fy:-4px; --fd:6s; }
.thought.t4{ top:48%; left:42%; font-size:21px; --r:-2deg; color:var(--orange-deep); font-weight:700;
  --tx:-30px; --ty:0px; --fx:5px; --fy:3px; --fd:9s; }
.thought.t5{ top:65%; left:8%;  font-size:18px; --r:1.5deg; --o:.65;
  --ty:-22px; --fx:-3px; --fy:6px; --fd:6.5s; }
.thought.t6{ top:79%; left:34%; font-size:25px; --r:-1.5deg; color:var(--blue);
  --tx:28px; --ty:0px; --fx:4px; --fy:-5px; --fd:7.5s; }
.thought.t7{ top:94%; left:4%;  font-size:17px; --r:2.5deg; --o:.6;
  --ty:24px; --fx:-2px; --fy:4px; --fd:5.5s; }

@media (prefers-reduced-motion: reduce){
  .thought{ transition:none; opacity:var(--o,1); transform:rotate(var(--r,0deg)); }
  .thought.is-visible{ animation:none; }
}
/* palier laptop : entre le flux mobile (<=860px) et le plein desktop (>=1240px),
   les mots les plus longs en nowrap peuvent depasser la largeur de la colonne
   et provoquer un scroll horizontal de page — legerement reduits ici, pas de
   changement de mise en page (toujours position absolue + word cloud) */
@media (min-width:861px) and (max-width:1290px){
  .thought.t1{ font-size:19px; }
  .thought.t2{ font-size:18px; left:26%; }
  .thought.t3{ font-size:15px; }
  .thought.t4{ font-size:17px; }
  .thought.t5{ font-size:15px; }
  .thought.t6{ font-size:19px; }
  .thought.t7{ font-size:15px; }
}

@media (max-width:860px){
  .constat-grid{ grid-template-columns:1fr; gap:24px; }
  /* en dessous de 860px, le texte peut s'enrouler : le positionnement absolu
     pensé pour desktop provoquerait des chevauchements, donc on repasse en
     flux normal (flex-wrap) — translation/rotation/flottement restent actifs
     puisqu'ils utilisent transform, indépendant du mode de positionnement */
  .thoughts{
    position:static; min-height:auto;
    display:flex; flex-wrap:wrap; align-items:baseline;
    gap:10px 20px;
    padding-top:4px;
  }
  .thought{ position:static; white-space:normal; max-width:none; }
  .thought.t1{ font-size:17px; } .thought.t2{ font-size:20px; } .thought.t3{ font-size:14px; }
  .thought.t4{ font-size:16px; } .thought.t5{ font-size:14px; } .thought.t6{ font-size:18px; } .thought.t7{ font-size:14px; }
}

/* ---------- QUI EST DERRIERE : section couleur pleine, composition editoriale ---------- */
.leo-section{
  background:var(--blue); color:#fff; overflow:hidden; position:relative;
  padding-top:clamp(72px, 9vw, 130px); padding-bottom:clamp(72px, 9vw, 130px);
}
.leo-grid{
  display:grid;
  grid-template-columns:.82fr 1fr;
  grid-template-areas:
    "visual heading"
    "visual copy";
  column-gap:64px; row-gap:6px;
  align-items:center;
  position:relative; z-index:1;
}
.leo-visual{ grid-area:visual; position:relative; }
.leo-heading{ grid-area:heading; align-self:end; }
.leo-copy{ grid-area:copy; align-self:start; }

/* logo vertical complet (Y + POLYANCE) = signature graphique en haut-gauche
   du portrait, quasi entierement visible, ton sur ton avec le fond bleu */
.leo-logo-mark{
  position:absolute; z-index:0;
  width:clamp(170px, 13vw, 200px); height:auto; max-width:none;
  left:-10%; bottom:calc(100% + 12px);
  opacity:0;
  transform:scale(.95) translateY(10px) translate3d(0, var(--ly,0px), 0);
  pointer-events:none;
  will-change:transform, opacity;
}
.leo-visual.is-visible .leo-logo-mark{
  animation:leo-y-in .7s var(--ease-soft) forwards;
}
@keyframes leo-y-in{
  from{ opacity:0; transform:scale(.95) translateY(10px) translate3d(0, var(--ly,0px), 0); }
  to{ opacity:.18; transform:scale(1) translateY(0) translate3d(0, var(--ly,0px), 0); }
}
.leo-photo-frame{
  position:relative; z-index:1;
  aspect-ratio:4/5; border-radius:var(--radius-l);
  overflow:hidden;
}
.leo-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.leo-name{ font-size:14px; font-weight:700; color:#FFD9AE; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; display:block; }
.leo-heading h2{ color:#fff; margin-bottom:0; }
.leo-heading h2 .soft{ font-weight:400; opacity:.82; }

.leo-copy{ margin-top:20px; }
.leo-copy p{ color:rgba(255,255,255,.82); font-size:16.5px; line-height:1.6; margin-bottom:16px; max-width:50ch; }
.leo-copy p.lede{ font-size:19px; color:#fff; margin-bottom:20px; }
.leo-copy p:last-of-type{ margin-bottom:26px; }

.leo-signature{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.leo-signature .sep{ color:var(--orange); font-weight:400; opacity:.9; }

/* choreographie d'entree calme (rythme volontairement plus doux qu'apres La Methode) */
.leo-visual.reveal-scale{ transform:translateY(20px); }
.leo-section .reveal{ transform:translateY(15px); }

@media (prefers-reduced-motion: reduce){
  .leo-logo-mark{ animation:none; opacity:.18; transform:none; }
}

@media (max-width:860px){
  .leo-logo-mark{ width:clamp(110px, 24vw, 140px); left:-6%; bottom:calc(100% + 8px); }
  .leo-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "heading"
      "visual"
      "copy";
    row-gap:28px;
  }
  .leo-visual{ max-width:280px; margin:0 auto; }
  .leo-copy{ margin-top:0; }
}

/* ---------- METHODE : timeline continue au scroll (remplace les 3 cartes) ---------- */
#methode{ padding-top:clamp(56px,8vw,104px); }
#methode .eyebrow.reveal{ transition-delay:0s; }
#methode h2.reveal{ transition-delay:.1s; }
#methode .lede.reveal{ transition-delay:.2s; }
#methode .method-flow.reveal{ transition-delay:.3s; }

.method-flow{ position:relative; max-width:820px; margin:56px auto 0; --progress:0; }
.method-track{
  position:absolute; top:5px; left:0; right:0; height:2px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
/* le fill est peint en entier (tout le degrade bleu->orange) et masque a droite
   par .method-track-mask, qui se retracte vers la droite pour reveler le fill
   progressivement de gauche a droite ; scaleX seul (sans masque) aurait
   "ecrase" tout le degrade dans la largeur visible au lieu de le reveler. */
.method-track-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue) 85%, var(--orange) 100%);
}
.method-track-mask{
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleX(calc(1 - var(--progress,0))); transform-origin:right;
  transition:transform .15s linear;
}
.method-points{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.method-point{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.method-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--white); border:2px solid var(--line);
  transition:background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.method-point.is-active .method-dot{ transform:scale(1.15); }
.method-point[data-step="1"].is-active .method-dot,
.method-point[data-step="2"].is-active .method-dot{ background:var(--blue); border-color:var(--blue); }
.method-point[data-step="3"].is-active .method-dot{ background:var(--orange); border-color:var(--orange); }

.method-num{
  font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-faint);
  transition:color var(--dur-m) var(--ease);
}
.method-point.is-active .method-num{ color:var(--blue); }
.method-point[data-step="3"].is-active .method-num{ color:var(--orange); }

.method-word{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(19px,2.1vw,25px);
  color:var(--ink-soft); opacity:.5;
  transform:translateY(6px) scale(1);
  transition:opacity .32s var(--ease-soft), color .32s var(--ease-soft), font-size .32s var(--ease-soft), font-weight .32s var(--ease-soft), transform .32s var(--ease-soft);
}
.method-point.is-active .method-word{
  opacity:1; font-weight:700; color:var(--blue);
  font-size:clamp(25px,3.4vw,36px);
  transform:translateY(0) scale(1.02);
}
.method-point[data-step="3"].is-active .method-word{ color:var(--orange); }

/* zone de texte partagee (desktop) : un seul texte visible a la fois, hauteur stable */
.method-detail{ max-width:620px; margin:40px auto 0; text-align:center; }
.method-detail-inner{ position:relative; min-height:84px; }
.method-text{
  position:absolute; inset:0;
  opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
  font-size:clamp(16px,1.6vw,18px); color:var(--ink-soft); line-height:1.55;
  pointer-events:none;
}
.method-text.is-active{ opacity:1; transform:none; pointer-events:auto; }

.method-verbs{
  margin-top:22px;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.method-verbs.is-active{ opacity:1; transform:none; }
.method-verbs .verb{
  display:inline-block;
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--orange-deep);
}
.method-verbs .verb:not(:first-child)::before{ content:"·"; display:inline-block; margin:0 8px; color:var(--ink-faint); opacity:.6; }

/* structure mobile : texte propre a chaque etape, masquee sur desktop */
.method-text-mobile, .method-verbs-mobile{ display:none; }

@media (prefers-reduced-motion: reduce){
  .method-track-mask{ transition:none; transform:scaleX(0); }
  .method-dot, .method-num, .method-word{ transition:none; }
  .method-point .method-word{ opacity:1; font-weight:700; color:var(--blue); font-size:clamp(21px,2.4vw,28px); }
  .method-point[data-step="3"] .method-word{ color:var(--orange); }
  .method-point .method-num{ color:var(--blue); }
  .method-point[data-step="3"] .method-num{ color:var(--orange); }
  .method-point .method-dot{ background:var(--blue); border-color:var(--blue); transform:none; }
  .method-point[data-step="3"] .method-dot{ background:var(--orange); border-color:var(--orange); }
  .method-detail-inner{ position:static; min-height:auto; }
  .method-text{ position:static; opacity:1; transform:none; margin-bottom:16px; pointer-events:auto; }
  .method-text:last-child{ margin-bottom:0; }
  .method-verbs{ opacity:1; transform:none; }
}

@media (max-width:760px){
  .method-flow{ max-width:100%; margin-top:44px; }
  .method-track{ top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; }
  .method-track-fill{
    background:linear-gradient(180deg, var(--blue) 0%, var(--blue) 85%, var(--orange) 100%);
  }
  .method-track-mask{
    transform:scaleY(calc(1 - var(--progress,0))); transform-origin:bottom;
  }
  .method-points{ display:flex; flex-direction:column; gap:34px; }
  .method-point{ display:block; position:relative; padding-left:26px; text-align:left; }
  .method-point .method-dot{ position:absolute; left:2px; top:6px; }
  .method-point .method-num{ display:block; margin-bottom:6px; }
  .method-point .method-word{ display:block; }

  .method-detail{ display:none; }
  .method-text-mobile{ display:block; margin-top:10px; font-size:15.5px; color:var(--ink-soft); line-height:1.55; }
  .method-verbs-mobile{ display:flex; flex-wrap:wrap; gap:8px 4px; margin-top:14px; }
  .method-verbs-mobile .verb{
    font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
    color:var(--orange-deep);
  }
  .method-verbs-mobile .verb:not(:first-child)::before{ content:"·"; margin:0 6px; color:var(--ink-faint); }
}

/* ---------- LEVIERS : bascule interactive ---------- */
#leviers{ padding-top:clamp(72px, 9vw, 130px); }
.levier-switcher{ display:grid; grid-template-columns:.38fr .62fr; gap:16px; align-items:stretch; }
.levier-tabs{ display:flex; flex-direction:column; gap:4px; }
.levier-tab{
  display:flex; align-items:baseline; gap:14px;
  background:none; border:none; cursor:pointer;
  text-align:left; padding:18px 20px; border-radius:var(--radius-m);
  font-family:var(--font-display); font-size:21px; font-weight:400; color:var(--ink-soft);
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border-left:3px solid transparent;
}
.levier-tab .n{ font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--ink-faint); transition:color var(--dur-s) var(--ease); }
.levier-tab:hover{ background:var(--grey-tint); color:var(--navy); transform:translateX(3px); }
.levier-tab.is-active{ background:var(--blue-tint); color:var(--blue); border-left-color:var(--orange); font-weight:700; }
.levier-tab.is-active .n{ color:var(--orange-deep); }

.levier-panels{ position:relative; }
.levier-panel{
  display:none;
  background:var(--grey-tint); border-radius:var(--radius-l);
  padding:38px 40px; height:100%;
  box-shadow:var(--shadow-card);
  opacity:0; transform:translateY(8px);
  transition:opacity .24s var(--ease-soft), transform .24s var(--ease-soft);
}
.levier-panel.is-active{ display:block; }
.levier-panel.is-shown{ opacity:1; transform:none; }
.levier-panel.is-leaving{ opacity:0; transform:translateY(-8px); }
.levier-panel h3{ font-size:28px; color:var(--blue); margin-bottom:12px; }
.levier-panel .desc{ font-size:17px; color:var(--ink-soft); margin-bottom:22px; max-width:48ch; }

.levier-problems{ margin-bottom:24px; }
.levier-problems .problems-label{
  font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:12px;
}
.levier-problems .problems-list{ display:flex; flex-direction:column; gap:8px; }
.levier-problems .problems-list li{
  font-family:var(--font-body); font-style:italic; font-size:14.5px; line-height:1.4;
  color:var(--ink-soft); padding-left:13px; border-left:2px solid var(--line);
}

.levier-panel .examples-label{
  font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--orange-deep); display:block; margin-bottom:14px;
}
.levier-panel .examples-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.levier-panel .examples-list li{ font-size:15px; color:var(--navy); padding-left:20px; position:relative; }
.levier-panel .examples-list li::before{ content:"→"; position:absolute; left:0; color:var(--orange); }

@media (prefers-reduced-motion: reduce){
  .levier-panel{ transition:none; }
  .levier-panel.is-active{ opacity:1; transform:none; }
}
@media (max-width:900px){
  .levier-switcher{ grid-template-columns:1fr; }
  .levier-tabs{ flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .levier-tab{ flex:none; font-size:15px; padding:10px 16px; border-left:none; border-bottom:3px solid transparent; border-radius:var(--radius-pill); background:var(--grey-tint); }
  .levier-tab:hover{ transform:none; }
  .levier-tab.is-active{ border-bottom-color:var(--orange); }
  .levier-panel{ padding:30px 24px; }
  .levier-panel .examples-list{ grid-template-columns:1fr; }
}

/* ---------- OFFRES ---------- */
#offres{ padding-top:clamp(72px, 10vw, 130px); }
.offres-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.offre-card{
  border-radius:var(--radius-l); padding:48px 42px;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.offre-card:hover{ transform:translateY(-6px); }
.offre-card.quotidien{ background:var(--blue); color:#fff; box-shadow:var(--shadow-card); }
.offre-card.quotidien:hover{ box-shadow:0 30px 60px -22px rgba(5,61,140,.55); }
.offre-card.carte{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); }
.offre-card.carte:hover{ box-shadow:var(--shadow-l); }
.offre-card .kicker{ font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.offre-card.quotidien .kicker{ color:#BFD6FF; }
.offre-card.carte .kicker{ color:var(--orange-deep); }
.offre-card h3{ font-size:28px; margin-bottom:16px; }
.offre-card.quotidien h3{ color:#fff; }
.offre-card.carte h3{ color:var(--blue); }
.offre-card p{ font-size:16px; line-height:1.65; margin-bottom:24px; }
.offre-card.quotidien p{ color:rgba(255,255,255,.82); }
.offre-card.carte p{ color:var(--ink-soft); }

.offre-fit{ margin-bottom:26px; }
.offre-fit-label{
  display:block; font-family:var(--font-body); font-weight:700; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;
}
.offre-card.quotidien .offre-fit-label{ color:#BFD6FF; }
.offre-card.carte .offre-fit-label{ color:var(--ink-faint); }
.offre-fit-list{ display:flex; flex-direction:column; gap:6px; }
.offre-fit-list li{ font-size:14px; line-height:1.45; padding-left:18px; position:relative; }
.offre-fit-list li::before{ content:"→"; position:absolute; left:0; }
.offre-card.quotidien .offre-fit-list li{ color:rgba(255,255,255,.78); }
.offre-card.quotidien .offre-fit-list li::before{ color:#BFD6FF; }
.offre-card.carte .offre-fit-list li{ color:var(--ink-soft); }
.offre-card.carte .offre-fit-list li::before{ color:var(--orange); }

.offre-logic{
  margin-top:auto; padding-top:22px; border-top:1px solid;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
}
.offre-card.quotidien .offre-logic{ border-color:rgba(255,255,255,.2); color:#fff; }
.offre-card.carte .offre-logic{ border-color:var(--line); color:var(--blue); }
.offres-note{ text-align:center; margin-top:36px; color:var(--ink-soft); font-size:15px; }

@media (max-width:820px){
  .offres-grid{ grid-template-columns:1fr; }
}

/* ---------- POURQUOI ---------- */
.pourquoi{ padding-top:clamp(64px, 9vw, 120px); padding-bottom:clamp(48px, 6vw, 80px); }
.pourquoi-grid{ display:grid; grid-template-columns:.8fr 1fr; gap:64px; align-items:start; }
.pourquoi-quote{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,3.4vw,38px); line-height:1.25; color:var(--navy);
  position:sticky; top:120px;
}
.pourquoi-quote .accent{ font-style:italic; color:var(--orange); }

.pourquoi-list{ display:flex; flex-direction:column; }
.pourquoi-item{
  display:flex; align-items:flex-start; gap:20px;
  padding:21px 20px;
  border-radius:var(--radius-m);
  border-left:3px solid transparent;
  border-bottom:1px solid var(--line);
  transition:background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.pourquoi-item:last-child{ border-bottom:none; }
.pourquoi-num{
  flex:none; width:28px; padding-top:3px;
  font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink-faint);
  transition:color .22s var(--ease);
}
.pourquoi-item h3{ font-size:18px; margin-bottom:5px; color:var(--navy); transition:color .22s var(--ease); }
.pourquoi-item p{ font-size:14.5px; color:var(--ink-soft); max-width:46ch; margin:0; }

.pourquoi-item:hover{
  background:var(--blue-tint);
  border-left-color:var(--orange);
  transform:translateX(6px);
}
.pourquoi-item:hover .pourquoi-num{ color:var(--orange-deep); }
.pourquoi-item:hover h3{ color:var(--blue); }
.pourquoi-item:nth-child(even):hover{ border-left-color:var(--blue); }
.pourquoi-item:nth-child(even):hover .pourquoi-num{ color:var(--blue); }

@media (max-width:860px){
  .pourquoi-grid{ grid-template-columns:1fr; gap:28px; }
  .pourquoi-quote{ position:static; }
  .pourquoi-item{ padding:18px 4px; }
  .pourquoi-item:hover{ transform:none; }
}

/* ---------- CTA FINAL ---------- */
.cta-final{
  background:var(--navy); color:#fff;
  text-align:center; position:relative; overflow:hidden;
  padding-top:clamp(96px, 9vw, 130px);
  padding-bottom:clamp(64px, 8vw, 96px);
}
.cta-final .container{ position:relative; z-index:2; max-width:760px; }
.cta-final h2{ color:#fff; max-width:640px; margin-inline:auto; margin-bottom:18px; }
.cta-final p{ color:rgba(255,255,255,.85); font-size:18px; line-height:1.55; margin-bottom:34px; max-width:52ch; margin-inline:auto; }
.cta-final .cta-lede{ margin-bottom:10px; color:#fff; font-weight:500; }
.cta-final .cta-sub{ color:rgba(255,255,255,.6); font-size:15.5px; margin-bottom:32px; }
.cta-microinfo{ display:block; margin-top:16px; font-size:13px; color:rgba(255,255,255,.6); }