/* Animations du site, inspirées des sites Agiltym (refonte) et H&C Executive Education.
   Tout est réservé à « html.js » (le script tourne) et à « aucune préférence de mouvement réduit » :
   sans script ou en mouvement réduit, la page s'affiche telle quelle, sans rien de caché. */

@property --beam { syntax: "<number>"; inherits: true; initial-value: 104; }
@property --spot { syntax: "<percentage>"; inherits: true; initial-value: 420%; }
@property --ang  { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fill { syntax: "<number>"; inherits: true; initial-value: 1; }

:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.76, 0, 0.24, 1); }

/* Lenis : le défilement doux remplace le smooth-scroll CSS */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Loader (accueil, une fois par visite) ---------- */
.intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-intro) .intro {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, #0d3465 0%, #06172f 58%, #031126 100%);
    clip-path: polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%);
  }
  html.js.is-ready .intro:not(.is-leaving) { display: none; }
  .intro.is-leaving { clip-path: polygon(-5% -5%, 105% -5%, 105% -40%, -5% -5%) !important; transition: clip-path .95s var(--ease-io); pointer-events: none; }
  .intro-inner { display: grid; justify-items: center; gap: 18px; color: #cbd7e7; transition: opacity .4s, translate .6s var(--ease-io); }
  .intro.is-leaving .intro-inner { opacity: 0; translate: 0 -40px; }
  .intro-logo { position: relative; width: min(300px, 64vw); }
  .intro-logo img { display: block; width: 100%; height: auto; }
  .intro-logo img:first-child { filter: grayscale(1) brightness(.55); opacity: .35; }
  .intro-logo img + img { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0); }
  .intro.run .intro-logo { --fill: 0; animation: intro-fill 1.1s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
  @keyframes intro-fill { to { --fill: 1; } }
  .intro-bar { width: min(240px, 50vw); height: 2px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
  .intro-bar::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); transform-origin: left; scale: 0 1; }
  .intro.run .intro-bar::after { scale: 1 1; transition: scale 1.25s var(--ease-io) .1s; }
  .intro-meta { font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; opacity: 0; translate: 0 8px; }
  .intro.run .intro-meta { opacity: 1; translate: 0 0; transition: opacity .6s .45s, translate .8s var(--ease-out) .45s; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Reveal générique, plus ample ---------- */
  html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.05s var(--ease-out); }
  html.js .reveal.visible { opacity: 1; transform: none; }

  /* ---------- Hero : intro orchestrée (Agiltym), projecteur (H&C) ---------- */
  html.js .hero::before { scale: 1.12; translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -10px); transition: translate .2s linear; }
  html.js.is-ready .hero::before { animation: hero-settle 2.6s var(--ease-out) both; }
  @keyframes hero-settle { from { scale: 1.12; } to { scale: 1; } }
  html.js.is-ready .hero::before { scale: 1; }

  .hero-spot {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background:
      radial-gradient(circle min(34vmax, 520px) at var(--sx, 70%) var(--sy, 40%), rgba(255, 214, 140, .16) 0%, rgba(255, 214, 140, .05) 38%, transparent 62%),
      radial-gradient(circle min(46vmax, 700px) at var(--sx, 70%) var(--sy, 40%), transparent 30%, rgba(2, 10, 24, .5) 85%);
    transition: opacity 1.4s ease;
  }
  html.js.is-ready .hero-spot { opacity: 1; transition-delay: .5s; }

  html.js .hero-title:not(.is-split) { opacity: 0; }
  /* La page colore en or tous les span du titre : les masques des mots gardent la couleur de leur ligne */
  .hero-title .w, .hero-title .w > span { display: inline-block; color: inherit; }
  .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .w > span { display: inline-block; translate: 0 110%; }
  html.js.is-ready .hero-title.is-split .w > span { animation: word-rise 1.15s var(--ease-out) calc(.25s + var(--i) * 70ms) both; }
  @keyframes word-rise { from { translate: 0 110%; } to { translate: 0 0; } }
  .hero-title .hl { position: relative; }
  .hero-title.is-split .hl::after { content: ""; position: absolute; left: 0; right: .2em; bottom: .04em; height: .07em; border-radius: 99px; background: var(--gold); transform-origin: left; scale: 0 1; }
  html.js.is-ready .hero-title.is-split .hl::after { animation: ribbon .9s var(--ease-io) 1.2s both; }
  @keyframes ribbon { from { scale: 0 1; } to { scale: 1 1; } }

  html.js .hero .eyebrow, html.js .hero-copy, html.js .hero-actions, html.js .hero-meta > span, html.js .hero-panel, html.js .hero-trust { opacity: 0; }
  html.js.is-ready .hero .eyebrow { animation: rise .9s var(--ease-out) .1s both; }
  html.js.is-ready .hero-copy { animation: rise .9s var(--ease-out) .55s both; }
  html.js.is-ready .hero-actions { animation: rise .9s var(--ease-out) .7s both; }
  html.js.is-ready .hero-meta > span { animation: rise .8s var(--ease-out) both; }
  html.js.is-ready .hero-meta > span:nth-child(1) { animation-delay: .85s; }
  html.js.is-ready .hero-meta > span:nth-child(2) { animation-delay: .93s; }
  html.js.is-ready .hero-meta > span:nth-child(3) { animation-delay: 1.01s; }
  html.js.is-ready .hero-panel { animation: panel-in 1.2s var(--ease-out) .6s both; }
  html.js.is-ready .hero-trust { animation: fade-in 1s ease 1.1s both; }
  @keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes panel-in { from { opacity: 0; translate: 40px 0; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }

  /* Compte à rebours : chaque chiffre qui change monte d'un cran */
  .count-item strong.tick { animation: tick .45s var(--ease-out); }
  @keyframes tick { from { opacity: .2; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

  /* ---------- Barre de navigation : se range en descendant (H&C), ruban (Agiltym) ---------- */
  .header { transition: transform .45s var(--ease-out), background-color .3s; }
  .header.is-hidden { transform: translateY(-100%); }
  @media (min-width: 981px) {
    .nav-links { position: relative; }
    .nav-links::after {
      content: ""; position: absolute; left: 0; bottom: -10px; height: 2px; border-radius: 2px;
      width: var(--rw, 0); translate: var(--rx, 0) 0; background: var(--gold); opacity: var(--ro, 0);
      transition: translate .45s var(--ease-out), width .45s var(--ease-out), opacity .3s;
    }
    .nav-links a.is-current { color: #fff; }
  }

  /* ---------- Titres de section : le coup de lumière (H&C) ---------- */
  .sweep.is-armed {
    --title-on: var(--navy); --title-off: rgba(6, 23, 47, .16); --glow: 255 214 140;
    --beam: -30; --spot: 24%;
    color: transparent;
    background-image:
      radial-gradient(var(--spot) 160% at calc(var(--beam) * 1%) 50%, var(--title-on) 50%, var(--title-off) 100%),
      radial-gradient(2.2em 1em at calc(var(--beam) * 1%) 50%, rgb(var(--glow) / calc(.85 * clamp(0, min(var(--beam) - 10, 90 - var(--beam)) / 8, 1))) 0%, rgb(var(--glow) / 0) 66%);
    -webkit-background-clip: text, border-box; background-clip: text, border-box;
    /* la boîte descend sous la dernière ligne : les jambages (g, p, q) restent peints */
    padding-block: .1em .24em; margin-block: -.1em calc(20px - .24em);
  }
  .audience .sweep.is-armed, .cta-box .sweep.is-armed, .exit-card .sweep.is-armed { --title-on: #fff; --title-off: rgba(255, 255, 255, .16); }
  .sweep.is-armed.is-lit { animation: sweep-light 1.2s cubic-bezier(.45, 0, .3, 1) both; }
  @keyframes sweep-light { 0% { --beam: -30; --spot: 24%; } 62% { --beam: 104; --spot: 26%; } 100% { --beam: 104; --spot: 420%; } }

  /* ---------- Chiffres clés : ouverture en biais, compteurs, barres (Agiltym) ---------- */
  html.js .snapshot .snapshot-grid { clip-path: polygon(-80px calc(135% + 80px), calc(100% + 80px) calc(100% + 80px), calc(100% + 80px) calc(100% + 80px), -80px calc(100% + 80px)); }
  html.js .snapshot.visible .snapshot-grid { clip-path: polygon(-80px -80px, calc(100% + 80px) calc(-35% - 80px), calc(100% + 80px) calc(100% + 80px), -80px calc(100% + 80px)); transition: clip-path 1.2s var(--ease-io); }
  .stat { position: relative; }
  .stat strong [data-count] { display: inline; font-size: inherit; color: inherit; margin: 0; } /* la page met tous les span des chiffres en petit */
  .stat::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--gold), var(--cyan)); transform-origin: left; scale: 0 1; }
  .snapshot.visible .stat::after { scale: 1 1; transition: scale 1.6s var(--ease-out) calc(.7s + var(--k, 0) * .25s); }
  html.js .snapshot .stat > * { opacity: 0; translate: 0 18px; }
  html.js .snapshot.visible .stat > * { opacity: 1; translate: 0 0; transition: opacity .7s calc(.55s + var(--k, 0) * .25s), translate .9s var(--ease-out) calc(.55s + var(--k, 0) * .25s); }

  /* ---------- Lettre : la photo s'ouvre, la citation s'allume mot à mot ---------- */
  html.js .founder-card { clip-path: inset(8% 6% round 32px); transition: clip-path 1.25s var(--ease-io); }
  html.js .founder-card img { scale: 1.15; transition: scale 2s var(--ease-out); }
  html.js .founder-card .founder-badge { opacity: 0; translate: 0 18px; }
  html.js .founder-card.visible { clip-path: inset(0 round 32px); opacity: 1; transform: none; }
  html.js .founder-card.visible img { scale: 1; }
  html.js .founder-card.visible .founder-badge { opacity: 1; translate: 0 0; transition: opacity .8s .6s, translate .9s var(--ease-out) .6s; }

  .mw { transition: opacity .5s ease; }
  html.js .quote.lightup .mw { opacity: .16; }
  html.js .invite-copy.visible .quote.lightup .mw { opacity: 1; transition-delay: calc(.2s + var(--i) * 45ms); }
  @supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
    html.js .quote.lightup { view-timeline: --quote block; }
    html.js .quote.lightup .mw, html.js .invite-copy.visible .quote.lightup .mw {
      opacity: .16; transition: none;
      animation: light-up linear both; animation-timeline: --quote;
      animation-range: cover calc(10% + var(--i) / var(--n) * 38%) cover calc(16% + var(--i) / var(--n) * 38%);
    }
    @keyframes light-up { to { opacity: 1; } }
  }
  html.js .problem { opacity: 0; translate: 0 22px; }
  html.js .invite-copy.visible .problem { opacity: 1; translate: 0 0; transition: opacity .7s calc(.5s + var(--k, 0) * .12s), translate .9s var(--ease-out) calc(.5s + var(--k, 0) * .12s), border-color .3s, box-shadow .3s; }
  .problem:hover { border-color: rgba(19, 104, 232, .35); box-shadow: 0 14px 34px rgba(6, 23, 47, .08); }

  /* ---------- Cartes objectifs : ouverture depuis le centre (Agiltym) ---------- */
  html.js .outcome-card { clip-path: inset(14% 10% round 24px); transition: clip-path 1.2s var(--ease-io) calc(var(--k, 0) * .1s), opacity .9s calc(var(--k, 0) * .1s), transform 1.05s var(--ease-out) calc(var(--k, 0) * .1s); }
  html.js .outcome-card::after { scale: 1.22; transition: scale 2s var(--ease-out), transform .45s; }
  html.js .outcome-card.visible { clip-path: inset(0 round 24px); }
  html.js .outcome-card.visible::after { scale: 1; }
  html.js .outcome-card > :not(.spot) { opacity: 0; translate: 0 18px; }
  html.js .outcome-card.visible > :not(.spot) { opacity: 1; translate: 0 0; transition: opacity .7s calc(.45s + var(--k, 0) * .1s), translate .9s var(--ease-out) calc(.45s + var(--k, 0) * .1s); }

  /* Lumière qui suit le pointeur sur les cartes (projecteur H&C) */
  .spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
    background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 140, .22), transparent 70%); }
  .has-spot:hover > .spot { opacity: 1; }
  .outcome-card > :not(.spot), .audience-card > :not(.spot), .price-card > :not(.spot), .cta-box > :not(.spot) { position: relative; z-index: 1; }
  .outcome-card > .outcome-num { position: absolute; }
  .price-card > .price-tag { position: absolute; }
  .price-card .spot { background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), rgba(19, 104, 232, .10), transparent 70%); }
  .price-card.featured .spot, .audience-card .spot, .cta-box .spot { background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 140, .14), transparent 70%); }

  .deliverables { position: relative; overflow: hidden; }
  .deliverables::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .09) 50%, transparent 70%); translate: -100% 0; pointer-events: none; }
  .deliverables.visible::before { translate: 100% 0; transition: translate 1.6s var(--ease-io) .4s; }

  /* ---------- Bandeau défilant (Agiltym / H&C) ---------- */
  .marquee { overflow: hidden; background: var(--navy); color: #d7e1ee; border-block: 1px solid rgba(255, 255, 255, .08); }
  .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
  .marquee.is-paused .marquee-track, .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- Programme : la journée se déroule ---------- */
  .program-wrap.visible .program-panel .program-kicker { animation: rise .7s var(--ease-out) both; }
  .program-wrap.visible .timeline-item { animation: rise .8s var(--ease-out) both; }
  .program-wrap.visible .timeline-item:nth-child(1) { animation-delay: .08s; }
  .program-wrap.visible .timeline-item:nth-child(2) { animation-delay: .18s; }
  .program-wrap.visible .timeline-item:nth-child(3) { animation-delay: .28s; }
  .program-wrap.visible .timeline-item:nth-child(4) { animation-delay: .38s; }
  .program-wrap.visible .timeline-line::before { transform-origin: top; animation: draw-y 1.1s var(--ease-io) .2s both; }
  .program-wrap.visible .program-note { animation: rise .8s var(--ease-out) .5s both; }
  @keyframes draw-y { from { scale: 1 0; } to { scale: 1 1; } }
  html.js .day-tab { opacity: 0; translate: -20px 0; }
  .program-wrap.visible .day-tab { opacity: 1; translate: 0 0; transition: opacity .6s calc(var(--k, 0) * .08s), translate .8s var(--ease-out) calc(var(--k, 0) * .08s), background-color .25s, color .25s, transform .25s, box-shadow .25s; }

  /* ---------- Profils : ils sortent de l'ombre (H&C) ---------- */
  html.js .audience-card { filter: brightness(.35) saturate(.6); }
  html.js .audience-card.visible { filter: none; transition: opacity .9s calc(var(--k, 0) * .15s), transform 1.05s var(--ease-out) calc(var(--k, 0) * .15s), filter 1.4s ease calc(.2s + var(--k, 0) * .15s), background-color .25s; }
  .audience-card { position: relative; }
  .audience-icon { transition: transform .5s var(--ease-out), background-color .3s; }
  .audience-card:hover .audience-icon { transform: rotate(-8deg) scale(1.08); background: rgba(245, 185, 66, .22); }

  /* ---------- Le cadre : photo qui s'ouvre et glisse au défilement ---------- */
  html.js .experience-image { clip-path: inset(10% 8% round 28px); background-size: 100% 100%, auto calc(100% + 150px); background-position: 0 0, 30% calc(50% + var(--pp, 0) * 70px); transition: clip-path 1.3s var(--ease-io), opacity .9s, transform 1.05s var(--ease-out); }
  html.js .experience-image.visible { clip-path: inset(0 round 28px); }
  html.js .experience-label > * { opacity: 0; translate: 0 16px; }
  html.js .experience-image.visible .experience-label > * { opacity: 1; translate: 0 0; transition: opacity .8s .7s, translate .9s var(--ease-out) .7s; }
  html.js .venue-card { transform: translateX(40px); }
  html.js .venue-card.visible { transform: none; transition: opacity .9s calc(var(--k, 0) * .12s), transform 1.05s var(--ease-out) calc(var(--k, 0) * .12s); }

  /* ---------- Témoignages : un témoin à la fois, barres de progression (H&C) ---------- */
  .testimonial-card.active { animation: voice-in .8s var(--ease-out) both; }
  @keyframes voice-in { from { opacity: 0; translate: 0 22px; clip-path: inset(0 0 30% 0 round 28px); } to { opacity: 1; translate: 0 0; clip-path: inset(0 round 28px); } }
  .voice-ticks { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .voice-ticks button { width: 46px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(6, 23, 47, .12); cursor: pointer; overflow: hidden; }
  .voice-ticks button i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
  .voice-ticks button.is-done i { transform: none; }
  .voice-ticks button.is-current i { animation: voices-tick var(--dur, 7s) linear both; }
  .testimonial-shell.is-paused .voice-ticks button.is-current i { animation-play-state: paused; }
  @keyframes voices-tick { from { transform: scaleX(0); } to { transform: none; } }

  /* ---------- Tarifs : bordure lumineuse tournante sur l'offre phare ---------- */
  .price-card { transition: transform .45s var(--ease-out), box-shadow .45s; }
  .price-card:hover { transform: translateY(-6px); }
  .price-card.featured { isolation: isolate; }
  .price-card.featured::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 30px; padding: 2px;
    background: conic-gradient(from var(--ang), transparent 0 60%, var(--gold) 72%, var(--cyan) 80%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spin-border 5s linear infinite; }
  @keyframes spin-border { to { --ang: 360deg; } }
  html.js .pricing-grid .price-card { opacity: 0; translate: 0 40px; }
  html.js .pricing-grid.visible .price-card { opacity: 1; translate: 0 0; transition: opacity .9s calc(var(--k, 0) * .15s), translate 1.05s var(--ease-out) calc(var(--k, 0) * .15s), transform .45s var(--ease-out), box-shadow .45s; }

  /* ---------- FAQ ---------- */
  html.js .faq-list .faq-item { opacity: 0; translate: 0 18px; }
  html.js .faq-list.visible .faq-item { opacity: 1; translate: 0 0; transition: opacity .7s calc(var(--k, 0) * .08s), translate .9s var(--ease-out) calc(var(--k, 0) * .08s), border-color .3s; }
  .faq-item:hover { border-color: rgba(19, 104, 232, .3); }

  /* ---------- Appel final ---------- */
  .cta-box .w > span { translate: 0 110%; }
  .cta-box.visible .w > span { animation: word-rise 1.1s var(--ease-out) calc(.15s + var(--i) * 60ms) both; }
  html.js .cta-side { opacity: 0; translate: 30px 0; }
  html.js .cta-box.visible .cta-side { opacity: 1; translate: 0 0; transition: opacity .9s .5s, translate 1s var(--ease-out) .5s; }

  /* ---------- Pied de page : le grand nom éclairé (Agiltym / H&C) ---------- */
  .footer-sign { margin: 34px 0 6px; font-weight: 950; font-size: clamp(2.6rem, 12.4vw, 11.5rem); line-height: .86; letter-spacing: -.06em; text-align: center; white-space: nowrap; user-select: none;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
    background: radial-gradient(circle min(22vw, 300px) at var(--mx, 50%) var(--my, 60%), rgba(245, 185, 66, .95), rgba(245, 185, 66, .25) 45%, rgba(255, 255, 255, .05) 75%);
    -webkit-background-clip: text; background-clip: text; opacity: .35; transition: opacity 1.2s ease; }
  .footer-sign.is-lit { opacity: 1; }

  /* ---------- Boutons : la flèche avance, un reflet passe ---------- */
  .btn-primary { overflow: hidden; }
  .btn-primary:not(.floating-cta) { position: relative; } /* le bouton flottant garde sa position fixe */
  .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); translate: -120% 0; pointer-events: none; }
  .btn-primary:hover::after { translate: 120% 0; transition: translate .8s var(--ease-out); }

  /* ---------- Page brochure ---------- */
  html.js .brochure-hero-title .w > span { translate: 0 110%; }
  html.js .visible .brochure-hero-title .w > span { animation: word-rise 1.1s var(--ease-out) calc(.1s + var(--i) * 60ms) both; }
}

/* Bandeau : la mise en page, valable aussi en mouvement réduit (le ruban reste alors immobile) */
.marquee { overflow: hidden; background: var(--navy); color: #d7e1ee; }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; gap: 34px; padding: 20px 17px; font-size: .9rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.marquee-group i { color: var(--gold); font-style: normal; }
.footer-sign { margin: 34px 0 6px; font-weight: 950; font-size: clamp(2.6rem, 12.4vw, 11.5rem); line-height: .86; letter-spacing: -.06em; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, .07); overflow: hidden; }

/* Profils sur mobile : les cartes s'empilent en collant en haut de l'écran (pile H&C) */
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .audience-grid { align-items: start; }
  .audience-card { position: sticky; top: calc(84px + var(--k, 0) * 14px); background: #0b2a50; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
}

/* ---------- Édition précédente : galerie (d'après la section « Vous êtes… » du site H&C) ----------
   Sans animation : texte à gauche, rangée de photos à faire défiler à droite.
   Avec animation (.is-pinned, posé par motion.js) : la section reste à l'écran ; au défilement, chaque photo
   glisse de la droite et se pose sur la pile, la précédente recule (plus haut, plus petite, en noir et blanc).
   En remontant, la pile se relâche vers la droite. */
.gallery { background: linear-gradient(180deg, #eef2f7, #f7f9fc); padding: 0; overflow: clip; }
.gallery-stage { padding: 110px 0; }
.gallery-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 60px; align-items: center; }
.gallery-pill { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gallery-copy h2 { margin: 22px 0 16px; }
.gallery-lead { color: var(--muted); }
.gallery-count, .gallery-caps, .gallery-bars { display: none; }
.gallery-copy .btn { margin-top: 10px; }
.gallery-cards { list-style: none; margin: 0; padding: 0 0 12px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.gcard { flex: 0 0 min(340px, 72vw); aspect-ratio: 4 / 5; scroll-snap-align: start; }
.gcard-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--navy); box-shadow: 0 24px 60px rgba(6, 23, 47, .22); color: #fff; text-align: left; }
/* les photos portent un bandeau « TANZANIE » en bas (11 % de la hauteur) : on le fait sortir du cadre */
.gcard-btn img { position: absolute; top: 0; left: 0; width: 100%; height: 113%; object-fit: cover; object-position: 50% 0; }
.gcard-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 17, 39, .35) 0%, transparent 28%, transparent 55%, rgba(3, 17, 39, .85) 100%); }
.gcard-num { position: absolute; z-index: 1; top: 18px; left: 22px; font-size: 1.7rem; font-weight: 300; letter-spacing: .02em; color: #fff; transition: color .4s; }
.gcard-title { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.08; }
.gcard-title strong { display: block; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .gallery.is-pinned .gallery-track { height: calc(var(--n) * 62vh + 100vh); }
  .gallery.is-pinned .gallery-stage { position: sticky; top: 0; height: 100vh; padding: 0; display: flex; align-items: center; overflow: hidden; }
  .gallery.is-pinned .gallery-grid { width: min(1180px, calc(100% - 40px)); }
  .gallery.is-pinned .gallery-lead { display: none; }
  .gallery.is-pinned .gallery-count { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; font-weight: 700; letter-spacing: .12em; font-size: .9rem; }
  .gallery-count i { width: 34px; height: 3px; border-radius: 3px; background: var(--gold); }
  .gallery-tot { color: var(--muted); font-weight: 500; }
  .gallery.is-pinned .gallery-caps { display: grid; margin-bottom: 18px; }
  .gcap { grid-area: 1 / 1; opacity: 0; translate: 0 14px; transition: opacity .45s ease, translate .6s var(--ease-out); pointer-events: none; }
  .gcap.is-active { opacity: 1; translate: 0 0; transition-delay: .12s; pointer-events: auto; }
  .gcap h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.1; margin-bottom: 14px; color: var(--navy); }
  .gcap h3 strong { font-weight: 700; }
  .gcap p { color: var(--muted); margin: 0; max-width: 470px; }
  .gallery.is-pinned .gallery-bars { display: flex; gap: 8px; margin-top: 34px; }
  .gbar { flex: 1 1 0; max-width: 54px; height: 10px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
  .gbar i { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(6, 23, 47, .14); transition: background-color .3s; }
  .gbar.is-active i { background: var(--gold); }

  .gallery.is-pinned .gallery-cards { --cw: min(30vw, 400px); position: relative; display: block; overflow: visible; height: calc(var(--cw) * 1.25); padding: 0; margin-top: 70px; }
  /* le projecteur suspendu au-dessus de la pile (H&C) */
  .gallery.is-pinned .gallery-cards::before { content: ""; position: absolute; left: calc(var(--cw) * -.2); top: -160px; width: calc(var(--cw) * 1.4); height: calc(var(--cw) * 1.8); pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255, 230, 170, .55), rgba(255, 230, 170, 0) 70%); filter: blur(6px); }
  .gallery.is-pinned .gcard { position: absolute; top: 0; left: 0; width: var(--cw); height: 100%; aspect-ratio: auto; will-change: transform, filter; transform-origin: 50% 0; }
  .gallery.is-pinned .gcard.is-active .gcard-num { color: var(--gold); }
}
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gallery.is-pinned .gallery-grid { gap: 8px; }
  .gallery.is-pinned .gallery-copy h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); margin: 12px 0 8px; }
  .gallery.is-pinned .gallery-count { margin: 0 0 8px; }
  .gallery.is-pinned .gallery-caps { margin-bottom: 8px; }
  .gcap h3 { margin-bottom: 6px; }
  .gcap p { font-size: .88rem; }
  .gallery.is-pinned .gallery-copy .btn { display: none; }
  .gallery.is-pinned .gallery-bars { margin-top: 12px; }
  .gallery.is-pinned .gallery-cards { --cw: min(52vw, 300px, 30vh); margin-top: 56px; }
}
@media (max-width: 980px) { .gallery-grid { grid-template-columns: minmax(0, 1fr); } }

/* Bouton des livrables : il garde sa largeur, le texte n'est plus coupé */
.deliverables .btn { flex-shrink: 0; }