/* ==========================================================================
   Afoodi — page /cas-clients/little-big-shack
   Un cas client se lit comme une démonstration : les chiffres d'abord, le
   récit ensuite, la preuve statistique en appui, le témoignage en clôture.
   ========================================================================== */

.has-gsap [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HERO + CHIFFRES
   ========================================================================== */
.top {
  background:
    radial-gradient(1100px 620px at 50% -8%, oklch(0.33 0.05 163 / .85), transparent 60%),
    linear-gradient(175deg, var(--green-dark), var(--green-ink) 70%);
  padding-bottom: clamp(46px, 5.5vw, 80px);
}
.hero { padding: clamp(44px, 6vw, 88px) 0 clamp(32px, 4vw, 52px); max-width: 1000px; }
.hero h1 {
  font-size: clamp(36px, 5.4vw, 78px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  margin-top: 18px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--orange); }
.hero__lead {
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--cream-dim);
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 66ch;
  text-wrap: pretty;
}
.hero__lead strong { color: var(--cream); font-weight: 800; }

/* Les quatre résultats, posés d'emblée : sur un cas client, le lecteur veut
   savoir ce que ça a donné avant de lire comment. */
.chiffres {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--panel-line);
}
.chiffres li {
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: clamp(18px, 1.8vw, 26px);
  background: oklch(0.24 0.04 165 / .45);
}
.chiffres__n {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
}
.chiffres__l { font-size: 14px; line-height: 1.45; color: var(--cream-dim); margin-top: 12px; }

/* ==========================================================================
   LE POINT DE DÉPART
   ========================================================================== */
.depart {
  background: linear-gradient(175deg, var(--green-deep), var(--green-ink));
  padding: clamp(56px, 7vw, 108px) 0 clamp(66px, 8vw, 118px);
}
.depart h2 {
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-top: 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.depart h2 .accent { color: var(--orange); }
.depart__texte { display: grid; gap: 16px; margin-top: clamp(28px, 3.2vw, 42px); }
.depart__texte p,
.depart__fin { font-size: 16px; line-height: 1.65; color: var(--cream-dim); max-width: 68ch; text-wrap: pretty; }
.depart__texte strong { color: var(--cream); font-weight: 800; }
.depart__texte em { font-style: italic; }
.depart__fin { margin-top: clamp(28px, 3.2vw, 40px); }

.question {
  max-width: 720px;
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-left: 22px;
  border-left: 3px solid var(--orange);
}
.question p {
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.3;
  text-wrap: pretty;
}
.question footer { font-size: 14px; font-weight: 600; color: var(--cream-dim); margin-top: 12px; }

/* ==========================================================================
   SECTIONS CLAIRES
   ========================================================================== */
.light { background: var(--cream); color: var(--green-ink); position: relative; z-index: 2; }
.light a { color: var(--green-ink); }
.light a:hover { color: var(--orange); }
.light__h2 {
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: center;
  margin: 16px auto 0;
  max-width: 22ch;
  text-wrap: balance;
}
.light__h2 .accent { color: var(--orange); }
.light__h2--left { text-align: left; margin-inline: 0; max-width: 24ch; }

/* ----- Ce qu'on a fait ----- */
.action {
  border-radius: 34px 34px 0 0;
  margin-top: -22px;
  padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 4.6vw, 68px);
}
.action__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(28px, 3.2vw, 44px);
}
.action__texte { display: grid; gap: 16px; }
.action__texte p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.action__texte strong { color: var(--green-ink); font-weight: 800; }

.leviers { list-style: none; display: grid; gap: 2px; }
.leviers li {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  padding: 15px 0 15px 30px;
  border-top: 1px solid var(--ink-line);
  position: relative;
}
.leviers li::before {
  content: "";
  position: absolute; left: 0; top: 1.4em;
  width: 16px; height: 2px;
  background: var(--orange);
}

/* Avant / après : les deux extraits ne sont pas à la même échelle, chacun
   garde donc son cadre et sa légende plutôt qu'un fondu trompeur. */
/* --------------------------------------------------------------------------
   Comparateur avant / après — repris tel quel du comparateur de l'accueil,
   dans sa variante « lbs » (les deux cartes sont en paysage). Le volet est
   découpé au clip-path plutôt qu'en largeur : les deux images gardent leur
   cadrage, seul ce qui est montré change.
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  width: 100%;
  max-width: 1088px;
  margin: clamp(36px, 4vw, 60px) auto 0;
  aspect-ratio: 1088 / 620;
  border-radius: 18px;
  overflow: hidden;
  background: oklch(0.97 0.01 90);
  user-select: none;
  touch-action: none;
  box-shadow: 0 40px 90px -40px oklch(0.10 0.02 165 / .9);
}
.compare .layer { position: absolute; inset: 0; }
.compare .layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: oklch(0.97 0.01 90);
  -webkit-user-drag: none;
  pointer-events: none;
}
.compare .layer.after { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare .layer.before { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.compare .label {
  position: absolute;
  top: 16px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
  backdrop-filter: blur(6px);
  color: oklch(0.98 0.01 90);
}
.compare .label.before { left: 16px; background: oklch(0.20 0.02 40 / .72); }
.compare .label.after { right: 16px; background: oklch(0.30 0.05 160 / .8); }
.compare .label .ld { width: 6px; height: 6px; border-radius: 50%; }
.compare .label.before .ld { background: var(--orange-bright); }
.compare .label.after .ld { background: var(--mint); }
.compare .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  left: var(--split, 50%);
  transform: translateX(-1.5px);
  background: oklch(0.99 0.01 90);
  z-index: 5;
}
.compare .handle {
  position: absolute;
  top: 50%;
  left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: oklch(0.99 0.01 90);
  border: 3px solid var(--orange);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  z-index: 6;
  box-shadow: 0 12px 30px oklch(0.14 0.03 165 / .5);
  transition: transform .15s ease;
}
.compare .handle:hover { transform: translate(-50%, -50%) scale(1.07); }
.compare .handle svg { width: 22px; height: 22px; fill: var(--orange); }
.compare .hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: oklch(0.98 0.01 90);
  background: oklch(0.20 0.03 165 / .72);
  padding: 6px 13px;
  border-radius: 999px;
  z-index: 4;
  pointer-events: none;
  transition: opacity .3s ease;
}
.compare.dragging .hint { opacity: 0; }

/* ----- Le lieu, en images -----
   Les trois photos n'ont pas le même format. Aucune n'est recadrée : elles
   gardent leur cadrage d'origine et s'alignent sur leur milieu. */
.lieu {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: center;
  margin-top: clamp(30px, 3.4vw, 46px);
}
.lieu img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--panel-line);
  display: block;
}

/* ==========================================================================
   VIDÉOS VERTICALES
   Les deux films du cas sont tournés en 9:16 et sonorisés : cadre portrait,
   contrôles natifs, jamais de lecture automatique — on ne déclenche pas du
   son sans que le visiteur l'ait demandé. preload="metadata" pour ne pas
   télécharger 18 Mo à l'ouverture de la page.
   ========================================================================== */
.portrait-video { max-width: 340px; width: 100%; }
.portrait-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
  border-radius: 20px;
  background: var(--green-ink);
  border: 1px solid var(--panel-line);
}
.portrait-video figcaption { display: grid; gap: 4px; margin-top: 16px; }

/* ----- Le cas en vidéo, à la suite des résultats ----- */
.film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 900px;
  margin: clamp(34px, 4vw, 54px) auto 0;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  border-radius: 22px;
}
.film__k { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.film__t { font-size: clamp(20px, 2vw, 28px); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; margin-top: 12px; text-wrap: balance; }
.film__d { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; max-width: 44ch; text-wrap: pretty; }

/* ----- Témoignages : l'interview filmée et le verbatim écrit ----- */
.temoignage__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.temoignage__grid blockquote { text-align: left; margin-inline: 0; }
.temoignage__grid blockquote p { font-size: clamp(21px, 2.4vw, 34px); }
.temoignage__grid footer { margin-top: clamp(18px, 2vw, 26px); }
.portrait-video figcaption .temoignage__nom,
.portrait-video figcaption .temoignage__role { display: block; }

/* ----- Les résultats ----- */
.resultats { padding: clamp(20px, 2.4vw, 34px) 0 clamp(56px, 7vw, 100px); }
.split-rule { display: flex; align-items: center; gap: 22px; margin-bottom: clamp(48px, 5.5vw, 84px); }
.split-rule i { flex: 1; height: 1px; background: oklch(0.30 0.045 165 / .18); }
.split-rule span { display: flex; gap: 7px; }
.split-rule b { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.split-rule b:nth-child(2) { opacity: .55; }
.split-rule b:nth-child(3) { opacity: .25; }

.detail {
  list-style: none;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(40px, 4.6vw, 66px);
  max-width: 900px;
  margin-inline: auto;
}
.detail__bloc {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: baseline;
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 32px);
}
.detail__n {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
}
.detail__t { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.detail__d { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; text-wrap: pretty; }
.detail__d strong { color: var(--green-ink); font-weight: 800; }
.detail__bloc > .detail__t { grid-column: 2; }
.detail__bloc > .detail__d { grid-column: 2; }

.preuve-stat {
  max-width: 900px;
  margin: clamp(24px, 2.8vw, 36px) auto 0;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--orange);
  border-radius: 20px;
  background: var(--cream);
}
.preuve-stat__k { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.preuve-stat__t { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin-top: 12px; }
.preuve-stat__d { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; text-wrap: pretty; }

/* ==========================================================================
   TÉMOIGNAGE
   ========================================================================== */
/* Placé juste sous le hero, sur un fond de même teinte : un filet marque la
   césure, sinon les deux blocs sombres se confondent. */
.temoignage {
  background: var(--green-ink);
  padding: clamp(48px, 6vw, 88px) 0;
  border-top: 1px solid var(--panel-line);
}
.temoignage blockquote { max-width: 900px; margin-inline: auto; }
.temoignage blockquote p {
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--cream);
  text-wrap: balance;
}
.temoignage footer { margin-top: clamp(22px, 2.4vw, 32px); display: grid; gap: 5px; }
.temoignage__nom { font-size: clamp(16px, 1.4vw, 19px); font-weight: 800; color: var(--orange); }
.temoignage__role { font-size: 14px; color: var(--cream-dim); }

/* ==========================================================================
   CE QU'IL FAUT EN RETENIR
   ========================================================================== */
.retenir { padding: clamp(56px, 7vw, 104px) 0; text-align: center; }
.retenir__p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: clamp(24px, 2.8vw, 36px) auto 0;
  text-wrap: pretty;
}
.retenir__punch {
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.25;
  max-width: 40ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  text-wrap: balance;
}
.retenir__liens { margin-top: clamp(26px, 3vw, 38px); font-size: 15px; line-height: 2.4; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .action__grid { grid-template-columns: 1fr; }
  .lieu { grid-template-columns: 1fr; max-width: 420px; }
  /* Sur petit écran la poignée mange le volet : on la réduit. */
  .compare .handle { width: 44px; height: 44px; }
  .compare .handle svg { width: 18px; height: 18px; }
  /* Les vidéos passent au-dessus du texte plutôt qu'à côté. */
  .film, .temoignage__grid { grid-template-columns: 1fr; justify-items: start; }
  .film { text-align: left; }
}
@media (max-width: 620px) {
  .chiffres { grid-template-columns: 1fr; }
  .detail__bloc { grid-template-columns: 1fr; gap: 10px; }
  .detail__bloc > .detail__t,
  .detail__bloc > .detail__d { grid-column: 1; }
}