/* =========================================================
   STUDIO MADELEINE — Agence créative des métiers de bouche
   v3 — aligné sur la maquette XD (split hero, food, brigade)
   ========================================================= */

:root {
  --ink:       #17150f;
  --ink-2:     #211e16;
  --cream:     #f6f0e4;
  --cream-2:   #ece3d2;
  --yellow:    #f5c400;   /* jaune maquette */
  --yellow-2:  #ffd429;
  --yellow-deep:#7a5c00;  /* accent texte sur fond clair — contraste AA */
  --white:     #ffffff;
  --fg-soft:   #6a6456;
  --header-h:  68px;
  --green-ok:  #2e7d32;

  --bg: var(--ink);
  --fg: var(--ink);

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-serif:   "Fraunces", Georgia, serif;
  --f-brand:   "Fredoka", system-ui, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, monospace;

  --radius: 16px;
  --radius-lg: 28px;
  --container: 1320px;
  --pad-x: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--f-body); background: var(--bg); color: var(--fg); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

/* Accessibilité : focus clavier visible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.section--dark a:focus-visible, .section--dark button:focus-visible, .footer a:focus-visible, .hero__media a:focus-visible { outline-color: var(--yellow); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Skip link */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--ink); color: var(--cream); font-family: var(--f-display); font-weight: 600; padding: 10px 18px; border-radius: 100px; transition: top .25s var(--ease); }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(76px, 12vw, 168px); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark .eyebrow { color: var(--cream); }
.section--dark .section__title em,
.section--dark .manifesto em,
.section--dark .contact__title em { color: var(--yellow); }
/* Texte secondaire sur fond noir */
.section--dark .studio__text,
.section--dark .step p,
.section--dark .contact__text { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.section--dark .studio__values li { border-color: color-mix(in srgb, var(--cream) 18%, transparent); }
.section--dark .studio__values span,
.section--dark .step__num { color: var(--yellow); }
.section--dark .step { border-top-color: var(--yellow); }
.section--dark .contact__label { color: color-mix(in srgb, var(--cream) 55%, transparent); }
/* Mascotte foncée -> blanche sur fond noir */
.section--dark .studio__peek, .section--dark .contact__mascot { filter: brightness(0) invert(1); }
.section__head { margin-bottom: clamp(44px, 6vw, 80px); }
.section__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; max-width: 18ch; }
.section__title em { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--yellow-deep); }

.eyebrow { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 0.7em; margin-bottom: 1.3em; }
.eyebrow--center { justify-content: center; width: 100%; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); display: inline-block; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

.btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; padding: 1em 1.7em; border-radius: 100px; letter-spacing: -0.01em; transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s; }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn--solid { background: var(--ink); color: var(--cream); }
.btn--solid:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.section--dark .btn--solid { background: var(--yellow); color: var(--ink); }
.section--dark .btn--solid:hover { background: var(--cream); }
.btn--block { width: 100%; justify-content: center; }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: grid; place-items: center; transition: transform 1s var(--ease-out); }
.preloader.is-done { transform: translateY(-100%); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preloader__mascot { width: clamp(90px, 14vw, 150px); animation: walk 0.7s steps(2) infinite, bobup 1.4s ease-in-out infinite; }
.preloader__count { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.4rem); color: var(--yellow); line-height: 1; }
@keyframes walk { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bobup { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Cursor */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000; border-radius: 50%; }
.cursor { width: 40px; height: 40px; border: 1.5px solid var(--ink); transform: translate(-50%,-50%); display: grid; place-items: center; transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s; }
.cursor span { font-family: var(--f-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; }
.cursor-dot { width: 6px; height: 6px; background: var(--ink); transform: translate(-50%,-50%); }
.cursor.is-hover { width: 78px; height: 78px; background: var(--yellow); border-color: var(--yellow); }
.cursor.is-hover span { opacity: 1; transform: scale(1); }
body.on-dark .cursor { border-color: var(--cream); } body.on-dark .cursor-dot { background: var(--cream); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--yellow); z-index: 8000; }

/* Header — sticky strip above the hero split (matches maquette) */
.header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); background: var(--ink); color: var(--cream); transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; }
.header.is-scrolled { background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(16px); padding-block: 9px; box-shadow: 0 1px 0 color-mix(in srgb, var(--cream) 12%, transparent); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mascot { width: 40px; height: 40px; object-fit: contain; transition: transform .5s var(--ease); }
.brand:hover .brand__mascot { transform: rotate(-12deg) scale(1.08); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--f-brand); font-weight: 600; font-size: 1.18rem; letter-spacing: 0.005em; color: var(--cream); }
.brand__tag { font-family: var(--f-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.22em; color: color-mix(in srgb, var(--cream) 55%, transparent); margin-top: 4px; }
/* margin-left auto plutôt que le space-between du header : sans lui, l'arrivée du
   burger sur grand écran renverrait la nav au centre. Là, nav et burger restent
   groupés à droite. */
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); margin-left: auto; margin-right: clamp(6px, 1vw, 16px); }
.nav__link { font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; position: relative; padding: 4px 0; color: var(--cream); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--yellow); transition: width .35s var(--ease); }
.nav__link:hover::after { width: 100%; }
.nav__cta { font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; background: var(--yellow); color: var(--ink); padding: 0.7em 1.3em; border-radius: 100px; transition: background .3s var(--ease), color .3s, transform .3s; }
.nav__cta:hover { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
/* Trois traits, visibles à TOUTES les largeurs : sur grand écran ils ouvrent le
   menu complet en plus des liens de la barre ; sous 980px ils le remplacent. */
.burger { display: flex; width: 46px; height: 46px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; flex: none; }
.burger span { width: 26px; height: 2.5px; background: var(--cream); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.burger:hover span { background: var(--yellow); }
/* Ouvert : les deux traits extrêmes se croisent, celui du milieu s'efface.
   7.5px = hauteur d'un trait (2.5) + gap (5). */
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: var(--pad-x); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-out), visibility .6s; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__link { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 10vw, 3.2rem); letter-spacing: -0.03em; }
.mobile-menu__link:hover { color: var(--yellow); }
.mobile-menu__foot { margin-top: 44px; display: flex; flex-direction: column; gap: 8px; font-family: var(--f-mono); color: var(--yellow); }

/* ---------- HERO (split) ---------- */
.hero { min-height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.hero__panel { background: var(--yellow); display: flex; flex-direction: column; justify-content: center; padding: clamp(44px,6vw,72px) clamp(28px,4vw,72px) clamp(44px,6vw,72px); }
/* Bouton clair sur le panneau jaune (façon maquette) */
.hero__panel .btn--solid { background: var(--white); color: var(--ink); }
.hero__panel .btn--solid:hover { background: var(--ink); color: var(--cream); }
.hero__eyebrow { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.hero__eyebrow .dot { background: var(--ink); }
.hero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 6.6vw, 5.6rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--ink); }
.hero__title .hl { display: block; overflow: hidden; }
.hero__title .hl__in { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.is-loaded .hero__title .hl__in { transform: translateY(0); }
.is-loaded .hero__title .hl:nth-child(2) .hl__in { transition-delay: .08s; }
.is-loaded .hero__title .hl:nth-child(3) .hl__in { transition-delay: .16s; }
.hero__title em { font-family: var(--f-serif); font-style: italic; font-weight: 500; }
.hero__tag { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: var(--ink); margin-top: clamp(20px,3vw,30px); }
.hero__lead { max-width: 42ch; font-size: clamp(1rem, 1.3vw, 1.15rem); color: color-mix(in srgb, var(--ink) 78%, transparent); margin-top: 16px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px,4vw,40px); }
.hero__media { position: relative; overflow: hidden; background: var(--ink-2); }
.hero__media > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.hero__mascot { position: absolute; left: -34px; bottom: clamp(20px,4vw,48px); width: clamp(90px,10vw,140px); animation: bobup 2.8s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }

/* Marquee */
.marquee { overflow: hidden; }
.marquee--dark { background: var(--ink); color: var(--cream); padding-block: clamp(16px,2.2vw,28px); }
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee__track--rev { animation-direction: reverse; animation-duration: 36s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.8rem); letter-spacing: -0.02em; white-space: nowrap; padding-right: 0.3em; }
.marquee__track i { color: var(--yellow); font-style: normal; margin-inline: 0.25em; }
.marquee__sep { display: inline-block; height: 1.25em; width: auto; margin-inline: 0.4em; vertical-align: -0.32em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Studio */
.studio__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.studio__media { position: relative; }
.studio__media > img:first-child { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); }
.studio__peek { position: absolute; right: -22px; bottom: -22px; width: clamp(80px, 10vw, 130px); }
.manifesto { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 26px; }
.manifesto em { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--yellow-deep); }
.manifesto .word { display: inline-block; opacity: 0.14; transition: opacity .5s var(--ease); }
.manifesto .word.is-in { opacity: 1; }
.studio__text { color: var(--fg-soft); max-width: 54ch; margin-bottom: 30px; font-size: 1.08rem; }
.studio__values { display: flex; flex-direction: column; }
.studio__values li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.studio__values li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.studio__values span { font-family: var(--f-mono); font-size: 0.72rem; color: var(--yellow-deep); }

/* Ambiance / coulisses */
.ambiance { padding-block: clamp(36px, 5vw, 80px); }
.ambiance .eyebrow { margin-bottom: clamp(26px, 4vw, 44px); }
.ambiance__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.ambiance__item { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3/4; background: var(--ink-2); }
.ambiance__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ambiance__item:hover img { transform: scale(1.05); }
@media (max-width: 700px) {
  .ambiance__grid { grid-template-columns: 1fr 1fr; }
  .ambiance__item:last-child { grid-column: 1 / -1; aspect-ratio: 16/10; }
}

/* Services */
/* Feuillets empilés (façon Smaak) : chaque fiche colle sous le header et la
   suivante vient se poser dessus au scroll. L'onglet « intercalaire » nommé
   dépasse du feuillet et reste lisible dans la pile (positions décalées). */
.sheets { display: flex; flex-direction: column; gap: clamp(42px, 5vw, 58px); padding-top: 34px; }
.sheet { position: sticky; background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: clamp(300px, 44vh, 460px); }
.sheet--yellow { background: var(--yellow); }
/* Tous les feuillets s'empilent au MÊME niveau : seule la rangée d'onglets
   (une position horizontale par feuillet) reste visible — comme un classeur. */
.sheet { top: calc(var(--header-h) + 48px); }
/* Onglets côte à côte sur une seule rangée */
.sheet__tab { position: absolute; top: -33px; height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 clamp(14px, 2vw, 24px); background: inherit; border-radius: 12px 12px 0 0; font-family: var(--f-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; }
/* Pastille stylisée (forme organique propre à chaque catégorie) */
.tab__dot { width: 14px; height: 14px; flex: none; fill: var(--yellow); }
.sheet--yellow .tab__dot { fill: var(--white); }
.sheet:nth-child(1) .sheet__tab { left: 2%; }
.sheet:nth-child(2) .sheet__tab { left: 16%; }
.sheet:nth-child(3) .sheet__tab { left: 33%; }
.sheet:nth-child(4) .sheet__tab { left: 51%; }
.sheet:nth-child(5) .sheet__tab { left: 67%; }
.sheet:nth-child(6) .sheet__tab { left: 83%; }
.sheet__num { font-family: var(--f-mono); font-size: 0.8rem; color: var(--yellow-deep); }
.sheet--yellow .sheet__num { color: var(--ink); }
.sheet__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 3rem); letter-spacing: -0.02em; line-height: 1; margin: 14px 0 20px; }
.sheet__tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 58ch; margin-bottom: 26px; }
.sheet__tags li { font-family: var(--f-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 15px; border: 1.5px solid var(--yellow-deep); border-radius: 10px; color: var(--yellow-deep); }
.sheet--yellow .sheet__tags li { border-color: var(--ink); color: var(--ink); }
.sheet__desc { color: var(--fg-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 52ch; }
.sheet--yellow .sheet__desc { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.sheet__mascot { width: clamp(110px, 16vw, 210px); height: auto; justify-self: end; transition: transform .5s var(--ease); }
.sheet:hover .sheet__mascot { transform: rotate(-6deg) scale(1.08); }
/* Brigade intégrée à la section L'agence */
.studio .brigade { margin-top: clamp(64px, 9vw, 120px); }

/* Projets — mosaïque imbriquée (colonnes décalées, tuiles) */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
.mosaic__col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.mosaic__col--offset { margin-top: clamp(48px, 8vw, 120px); }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 0.9s var(--ease); }
.tile--port img { aspect-ratio: 3/4; }
.tile--land img { aspect-ratio: 4/3; }
.tile:hover img { transform: scale(1.055); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.12) 42%, transparent 66%); pointer-events: none; }
.tile__cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(16px,1.7vw,24px); transition: transform 0.5s var(--ease); }
.tile:hover .tile__cap { transform: translateY(-4px); }
.tile__kind { display: block; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); margin-bottom: 0.55em; }
.tile__name { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.65rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--cream); }
.tile__seg { display: block; font-family: var(--f-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: color-mix(in srgb, var(--cream) 72%, transparent); margin-top: 0.5em; }

/* Stats */
.stats { background: var(--yellow); color: var(--ink); padding-block: clamp(56px, 8vw, 116px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; align-items: start; }
.stats__grid--three { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); max-width: 1060px; margin-inline: auto; }
.stats__grid--three .stat__label { max-width: 22ch; margin-inline: auto; }
.stat__num, .stat__suffix { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -0.04em; }
/* Chiffre qui est en réalité une phrase (« 1 marque. 100+ supports. ») : à la taille
   normale il déborderait de sa colonne. Posée par gen_services.py au-delà de 6 signes. */
.stat--long .stat__num, .stat--long .stat__suffix { font-size: clamp(1.45rem, 2.7vw, 2.05rem); line-height: 1.15; letter-spacing: -0.02em; }
.stat__label { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 14px; color: color-mix(in srgb, var(--ink) 75%, transparent); }

/* Approche */
/* auto-fit plutôt que repeat(4) : 4 étapes occupent 4 colonnes comme avant, mais
   une méthode en 5 temps ne laisse plus d'orpheline en seconde rangée. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: clamp(20px, 2.4vw, 38px); }
.step { padding-top: 24px; border-top: 2.5px solid var(--ink); }

/* ---------------------------------------------------------------------------
   La mascotte qui marche au-dessus des étapes (option "stepswalk").
   Sa position vient de --walk (0 → 1), calculé au scroll dans js/script.js.
   Chaque étape s'allume quand la mascotte passe devant.
   --------------------------------------------------------------------------- */
.steps-walk { position: relative; }
.steps-walk__rail { position: relative; height: clamp(74px, 8.5vw, 104px); margin-bottom: clamp(14px, 1.8vw, 24px); }

/* Le chemin : un trait continu qui ondule d'un arrêt à l'autre. Le tracé est
   calculé par walkpath() dans gen_services.py, les arrêts sont aux extrêmes des
   courbes. non-scaling-stroke garde une épaisseur constante malgré l'étirement. */
.walkline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.walkline path { fill: none; stroke-width: 2.5px; stroke-linecap: round; }
.walkline__base { stroke: color-mix(in srgb, var(--yellow) 24%, transparent); }
.walkline__done {
  stroke: var(--yellow);
  stroke-dasharray: var(--len, 0); stroke-dashoffset: calc(var(--len, 0) * (1 - var(--walk, 0)));
}

/* Les arrêts, un par étape */
.walkdot {
  position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--ink);
  border: 2.5px solid color-mix(in srgb, var(--yellow) 34%, transparent);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.walkdot.is-on { background: var(--yellow); border-color: var(--yellow); transform: scale(1.25); }

/* La mascotte, en trois calques découpés dans la même image : corps, jambe avant,
   jambe arrière. Sous 81 % de hauteur les deux jambes sont franchement séparées
   (vide entre 33 % et 50 % de largeur), ce qui rend le découpage possible. */
.walker {
  position: absolute; left: 0; top: 0;
  /* Assez grande pour que le jeu de jambes se lise : sous ~60px la rotation des
     jambes (±16°) ne représente que 2 ou 3 pixels et passe inaperçue. */
  width: clamp(62px, 7vw, 88px); aspect-ratio: 694 / 720;
  transform: translate(-50%, -92%) scaleX(-1);   /* pieds sur le trait, sens de la marche */
  animation: walker-bob .72s ease-in-out infinite;
  animation-play-state: paused;
}
.walker > * {
  position: absolute; inset: 0;
  background: url(../assets/madeleines/officiel-jaune.png) center / contain no-repeat;
}
/* Le corps : tout sauf les deux encoches latérales occupées par les bras, sinon
   les bras figés du calque corps resteraient visibles sous les bras animés. */
.walker__body {
  clip-path: polygon(0 0, 100% 0, 100% 36%, 80% 36%, 80% 60%, 100% 60%,
                     100% 81%, 0 81%, 0 60%, 19% 60%, 19% 36%, 0 36%);
}
.walker__leg--a   { clip-path: inset(81% 60% 0 0);   transform-origin: 25% 81%; animation: walker-leg-a .72s ease-in-out infinite; }
.walker__leg--b   { clip-path: inset(81% 0 0 40%);   transform-origin: 60% 81%; animation: walker-leg-b .72s ease-in-out infinite; }
/* Bras : pivot à l'épaule, c'est-à-dire sur la limite même de la découpe. */
.walker__arm--a   { clip-path: inset(36% 81% 40% 0); transform-origin: 19% 40%; animation: walker-arm-a .72s ease-in-out infinite; }
.walker__arm--b   { clip-path: inset(36% 0 40% 80%); transform-origin: 80% 40%; animation: walker-arm-b .72s ease-in-out infinite; }
.walker__leg, .walker__arm { animation-play-state: paused; }
.steps-walk.is-walking .walker,
.steps-walk.is-walking .walker__leg,
.steps-walk.is-walking .walker__arm { animation-play-state: running; }

@keyframes walker-bob   { 0%,100% { transform: translate(-50%,-92%) scaleX(-1); }
                          25%,75% { transform: translate(-50%,-95%) scaleX(-1); } }
@keyframes walker-leg-a { 0%,100% { transform: rotate(16deg); }  50% { transform: rotate(-16deg); } }
@keyframes walker-leg-b { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
/* Balancier inverse de la jambe du même côté : c'est ce qui fait lire une marche. */
@keyframes walker-arm-a { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes walker-arm-b { 0%,100% { transform: rotate(13deg); }  50% { transform: rotate(-13deg); } }

.steps--walk .step {
  opacity: .18; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.steps--walk .step.is-passed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .walker, .walker__leg, .walker__arm { animation: none; }
  .walker { transform: translate(-50%, -92%) scaleX(-1); }
  .steps--walk .step { opacity: 1; transform: none; transition: none; }
}
.step__num { font-family: var(--f-mono); font-size: 0.82rem; color: var(--yellow-deep); }
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -0.02em; margin: 16px 0 12px; }
.step p { color: var(--fg-soft); font-size: 1.02rem; }

/* La Brigade Créative */
.brigade__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
.member { display: flex; flex-direction: column; align-items: center; text-align: center; }
.member__face { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--yellow); display: grid; place-items: center; overflow: hidden; transition: background .4s var(--ease), transform .4s var(--ease); }
.member:hover .member__face { background: var(--yellow-2); transform: translateY(-6px) rotate(-1.5deg); }
.member__face img { width: 82%; height: 82%; object-fit: contain; transition: transform .5s var(--ease); }
.member:hover .member__face img { transform: scale(1.06); }
.member figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.member strong { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.member span { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--cream) 60%, transparent); }

/* Clients */
.clients { padding-block: clamp(50px, 7vw, 96px); }
.clients .marquee__track span { opacity: .72; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact__intro { position: relative; }
.contact__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: 22px; max-width: 16ch; }
.contact__title em { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--yellow-deep); }
.contact__text { color: var(--fg-soft); max-width: 42ch; margin-bottom: 32px; font-size: 1.08rem; }
.contact__list { display: flex; flex-direction: column; gap: 22px; }
.contact__list li { display: flex; flex-direction: column; gap: 4px; }
.contact__label { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-soft); }
.contact__list a { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.55rem); width: fit-content; position: relative; }
.contact__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--yellow); transition: width .35s var(--ease); }
.contact__list a:hover::after { width: 100%; }
.contact__mascot { position: absolute; right: 6%; bottom: -6px; width: clamp(90px, 11vw, 140px); pointer-events: none; }

.form { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 42px); border: 1.5px solid var(--cream-2); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--f-body); font-size: 1.05rem; padding: 14px 16px; border: 1.5px solid var(--cream-2); border-radius: 12px; background: var(--cream); color: var(--ink); transition: border-color .3s var(--ease), background .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); background: var(--white); }
.field textarea { resize: vertical; min-height: 110px; }
.form__status { margin-top: 14px; font-family: var(--f-mono); font-size: 0.8rem; min-height: 1.2em; }
.form__status.is-ok { color: var(--green-ok); }
.form__status.is-err { color: #c0392b; }
/* Champ-piège anti-robots : invisible à l'œil ET aux lecteurs d'écran, mais
   bien présent dans le DOM, donc rempli par les robots. `display:none` est
   repéré par les plus malins — on le sort de l'écran à la place. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Bouton pendant l'envoi */
.form button[disabled] { opacity: .6; cursor: progress; }

/* Footer */
.footer { background: var(--ink); color: var(--cream); padding-block: clamp(56px, 7vw, 96px); }
.footer__big { display: flex; align-items: center; gap: clamp(20px,3vw,44px); padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); }
.footer__mascot { width: clamp(84px, 11vw, 150px); }
.footer__lock { display: flex; flex-direction: column; line-height: 0.92; }
.footer__studio { font-family: var(--f-brand); font-weight: 500; font-size: clamp(1.2rem,3vw,2rem); letter-spacing: 0.04em; }
.footer__name { font-family: var(--f-brand); font-weight: 700; font-size: clamp(2.4rem,7vw,5rem); letter-spacing: -0.01em; }
.footer__bl { font-family: var(--f-serif); font-style: italic; font-size: clamp(1rem,2vw,1.3rem); color: var(--yellow); margin-top: 10px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: clamp(36px, 5vw, 56px); }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__label { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--yellow); margin-bottom: 6px; }
.footer__col a { color: color-mix(in srgb, var(--cream) 78%, transparent); width: fit-content; transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--yellow); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); font-family: var(--f-mono); font-size: 0.72rem; color: color-mix(in srgb, var(--cream) 58%, transparent); }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-float] { animation: bobup 4s ease-in-out infinite; }
/* Filet de sécurité : si JS désactivé/échoue, tout reste visible */
@media (scripting: none) { [data-reveal] { opacity: 1; transform: none; } .hero__title .hl__in { transform: none; } }
/* Cibles tactiles confortables */
@media (hover: none) and (pointer: coarse) {
  .footer__col a, .mobile-menu__foot a { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero__title .hl__in { opacity: 1 !important; transform: none !important; }
  .dot, .marquee__track, .preloader__mascot, .hero__mascot, [data-float] { animation: none !important; }
}

/* Responsive */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .brigade__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: flex; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__panel { padding-top: clamp(40px,7vw,60px); }
  .hero__media { aspect-ratio: 16/11; }
  .hero__mascot { left: auto; right: 18px; }
  .studio__grid { grid-template-columns: 1fr; }
  .studio__media { max-width: 440px; }
}
@media (max-width: 860px) {
  .mosaic__col--offset { margin-top: clamp(20px, 5vw, 36px); }
  .mosaic { gap: 14px; }
  .mosaic__col { gap: 20px; }
  /* Légende SOUS la photo (l'overlay gâche la photo en petit) */
  .tile::after { display: none; }
  .tile__cap { position: static; padding: 10px 2px 0; }
  .tile:hover .tile__cap { transform: none; }
  .tile__kind { font-size: 0.55rem; letter-spacing: 0.07em; margin-bottom: 0.35em; }
  .tile__name { font-size: 1.02rem; }
  .tile__seg { font-size: 0.55rem; letter-spacing: 0.03em; margin-top: 0.35em; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  /* 3 chiffres : une colonne plutôt qu'un orphelin sur la 2e ligne */
  .stats__grid--three { grid-template-columns: 1fr; gap: 34px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__mascot { display: none; }
}
@media (max-width: 700px) {
  /* La mascotte du hero est retirée sur téléphone : la photo y est bien plus
     petite (ratio 16/11 sur 375px de large), la mascotte y occupait un tiers de
     la hauteur et masquait le sujet. Sur tablette et au-delà, elle reste. */
  .hero__mascot { display: none; }

  /* Feuillets : mascotte au-dessus du texte, onglets + offsets réduits */
  .sheets { gap: 36px; padding-top: 26px; }
  .sheet { grid-template-columns: 1fr; min-height: auto; padding: 24px 20px 28px; }
  .sheet__mascot { justify-self: start; width: 84px; order: -1; margin-bottom: 6px; }
  .sheet__tab { top: -23px; height: 24px; font-size: 0.52rem; padding: 0 11px; border-radius: 9px 9px 0 0; gap: 5px; }
  .tab__dot { width: 10px; height: 10px; }
  .sheet { top: calc(var(--header-h) + 28px); }
  /* Escalier resserré pour la carte étroite du mobile (335px à 375px de large).
     Départ à 10 % : l'arrondi du coin fait 28px, en deçà l'onglet se pose dessus
     et paraît de travers. Arrivée à 65 % : au-delà, le dernier onglet (Packaging)
     dépassait de 22px hors de sa propre carte. Pas de 11 points entre chacun. */
  .sheet:nth-child(1) .sheet__tab { left: 10%; }
  .sheet:nth-child(2) .sheet__tab { left: 21%; }
  .sheet:nth-child(3) .sheet__tab { left: 32%; }
  .sheet:nth-child(4) .sheet__tab { left: 43%; }
  .sheet:nth-child(5) .sheet__tab { left: 54%; }
  .sheet:nth-child(6) .sheet__tab { left: 65%; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .brigade__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .footer__big { flex-direction: column; align-items: flex-start; }
}

/* ============ Menu déroulant Services (header) ============ */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__item > .nav__link .nav__chev { width: 12px; height: 12px; margin-left: 5px; transition: transform .3s var(--ease); }
.nav__item:hover > .nav__link .nav__chev, .nav__item:focus-within > .nav__link .nav__chev { transform: rotate(180deg); }
.nav__drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 250px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); border-radius: 14px; padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__drop a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream); transition: background .25s var(--ease), color .25s var(--ease); }
.nav__drop a:hover { background: color-mix(in srgb, var(--cream) 9%, transparent); color: var(--yellow); }
.nav__drop .tab__dot { width: 12px; height: 12px; fill: var(--yellow); }
.nav__drop a.nav__drop-all { border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 12px; color: color-mix(in srgb, var(--cream) 65%, transparent); }
/* Sous-liste services du menu mobile */
.mobile-menu__sub { display: grid; gap: 4px; margin: -6px 0 8px; padding-left: 18px; }
.mobile-menu__sub a { font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--cream) 72%, transparent); padding: 5px 0; display: inline-flex; align-items: center; gap: 8px; }
.mobile-menu__sub .tab__dot { width: 10px; height: 10px; fill: var(--yellow); }

/* ============ Feuillets : onglet cliquable + lien détail ============ */
.sheet__tab { cursor: pointer; }
.sheet__more { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 22px; font-family: var(--f-mono); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: 3px; }
.sheet--yellow .sheet__more { border-color: var(--ink); }
.sheet__more span { transition: transform .35s var(--ease); }
.sheet__more:hover span { transform: translateX(5px); }

/* ============ Pages service ============ */
.svc-hero { padding: calc(var(--header-h) + clamp(46px, 8vw, 90px)) 0 clamp(40px, 6vw, 70px); }
.svc-hero .tab__dot--big { width: 30px; height: 30px; fill: var(--yellow); margin-bottom: 18px; }
.svc-hero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.02em; max-width: 18ch; }
.svc-hero__title em { font-family: var(--f-accent); font-style: italic; font-weight: 500; color: var(--yellow); }
.svc-hero__lead { max-width: 58ch; margin-top: 22px; font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: color-mix(in srgb, var(--cream) 78%, transparent); }
.svc-hero .sheet__tags { margin: 26px 0 0; }
.svc-hero .sheet__tags li { border-color: var(--yellow); color: var(--yellow); }
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.svc-card { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 38px); }
.svc-card--yellow { background: var(--yellow); }
.svc-card h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; margin-bottom: 10px; }
.svc-card p { font-size: 0.97rem; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.svc-note { font-family: var(--f-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--ink) 55%, transparent); text-align: center; padding-bottom: 26px; }
.stats--svc { padding-top: clamp(40px, 6vw, 64px); }
/* FAQ accordéon */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq__item { background: color-mix(in srgb, var(--cream) 6%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius: 14px; overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.18rem); letter-spacing: -0.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.3rem; color: var(--yellow); flex: none; transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 22px 20px; color: color-mix(in srgb, var(--cream) 75%, transparent); max-width: 68ch; }
.svc-cta { text-align: center; padding-block: clamp(56px, 9vw, 110px); }
.svc-cta h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 28px; }
.svc-cta h2 em { font-family: var(--f-accent); font-style: italic; font-weight: 500; color: var(--yellow); }
.svc-breadcrumb { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--cream) 55%, transparent); margin-bottom: 20px; display: inline-flex; gap: 8px; }
.svc-breadcrumb a { color: inherit; } .svc-breadcrumb a:hover { color: var(--yellow); }
@media (max-width: 900px) { .svc-cards { grid-template-columns: 1fr; } }

/* Bloc « Pourquoi nous » des pages service */
.svc-why__intro { max-width: 64ch; margin-bottom: clamp(38px, 5vw, 60px); color: color-mix(in srgb, var(--cream) 76%, transparent); font-size: clamp(1rem, 1.3vw, 1.12rem); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(20px, 2.6vw, 38px); }
.why { border-top: 2px solid var(--yellow); padding-top: 18px; }
.why h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.02rem, 1.5vw, 1.2rem); letter-spacing: -0.01em; margin-bottom: 9px; }
.why p { font-size: 0.95rem; color: color-mix(in srgb, var(--cream) 68%, transparent); }
.steps__intro { max-width: 64ch; margin-bottom: clamp(34px, 4.5vw, 54px); color: color-mix(in srgb, var(--cream) 76%, transparent); }
/* Phrase de clôture APRÈS les étapes (champ facultatif "procoutro"). */
.steps__outro { max-width: 64ch; margin-top: clamp(34px, 4.5vw, 52px); font-family: var(--f-serif);
  font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--yellow); }
.svc-card__seg { display: block; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow-deep); margin-bottom: 10px; }
.svc-card--yellow .svc-card__seg { color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* Carte qui se retourne : ferme la grille des situations sur une invitation
   plutôt que sur un vide. Le retournement est déclenché par la classe `is-in`
   que pose l'observateur `[data-reveal]` déjà en place — aucun JS spécifique.
   Recto : la question, sur fond sombre. Verso : fond jaune, mascotte noire, CTA. */
.svc-card--flip {
  position: relative;
  background: none; border: 0; padding: 0;
  min-height: 300px;
  perspective: 1400px;
}
.flip__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* Court délai seulement : c'est le seuil de l'observateur (60 % visible) qui
     donne le temps de lire le recto pendant qu'on approche en scrollant. Un long
     délai rendrait le retour en arrière poussif.
     Courbe en ease-in-out plutôt que le --ease du site (ease-out) : sur une
     rotation, un démarrage brutal se voit beaucoup. Durée = le curseur à régler
     si le retournement paraît trop vif ou trop mou. */
  transition: transform 1.5s cubic-bezier(0.62, 0.02, 0.34, 1) .3s;
}
/* Classe posée ET retirée par l'observateur dédié : la carte se retourne dans
   les deux sens de défilement. Distincte de `is-in`, qui ne sert qu'au fondu
   d'apparition et n'est posée qu'une fois. */
.svc-card--flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 38px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 2vw, 26px); text-align: center;
}
.flip__face--front {
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--yellow) 26%, transparent);
}
/* Spécificité : `.svc-card p` (0,1,1) l'emporterait sur `.flip__ask` (0,1,0) et
   imposerait sa couleur d'encre sombre — invisible sur le recto sombre. */
.svc-card--flip .flip__ask {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--cream);
}
.svc-card--flip .flip__ask em { font-family: var(--f-serif); font-style: italic; color: var(--yellow); }
.flip__face--back { background: var(--yellow); color: var(--ink); transform: rotateY(180deg); justify-content: flex-start; }
/* Les deux marges automatiques se partagent l'espace libre : la mascotte se pose
   au tiers supérieur, le bouton descend en bas de carte. Composition équilibrée. */
/* max-* plutôt qu'une largeur fixe : la mascotte cède la place au bouton sur les
   cartes courtes, au lieu de le pousser hors de la carte. Le ratio est préservé
   parce que largeur ET hauteur sont en auto. */
.flip__face--back img { max-width: min(60%, 155px); max-height: 44%; width: auto; height: auto; margin-top: auto; }
.flip__face--back .btn { margin-top: auto; }
/* Le bouton jaune hérité de .section--dark disparaîtrait sur le verso jaune */
.section--dark .flip__face--back .btn--solid { background: var(--ink); color: var(--cream); }
.section--dark .flip__face--back .btn--solid:hover { background: var(--white); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  /* verso d'emblée, sans animation : c'est le côté utile, il porte le bouton */
  .flip__inner { transition: none; transform: rotateY(180deg); }
}

/* Blocs de texte multi-paragraphes des fiches services.
   Le reset global met margin:0 partout : sans cette règle, deux paragraphes
   successifs se collent. Voir _generateur/gen_services.py, fonction paras(). */
.svc-hero__lead p + p,
.svc-why__intro p + p,
.steps__intro p + p,
.why p + p,
.svc-card p + p,
.step p + p,
.faq__item p + p { margin-top: 0.9em; }

/* ===========================================================================
   COMPOSANT — BLOCS EMPILÉS AU SCROLL  (sticky stacking cards)
   ---------------------------------------------------------------------------
   Chaque bloc se fige sous le header, puis le suivant vient se superposer
   par-dessus au scroll. 100 % CSS (position: sticky) — aucun JS, donc aucun
   jank ni layout shift.

   Balisage :
     <div class="stack">
       <section class="stack__card">…</section>   <!-- autant que voulu -->
     </div>

   Points clés du fonctionnement :
   - Chaque carte est `sticky` avec le MÊME `top` : elle se cale sous le header
     et la suivante la recouvre intégralement.
   - Chaque carte a un fond OPAQUE (sinon on verrait la carte du dessous par
     transparence) et une ombre portée vers le haut qui matérialise la
     superposition.
   - `z-index` croissant : la dernière carte passe au-dessus des précédentes.
   - Désactivé sous 860px et en `prefers-reduced-motion` (voir plus bas).
   =========================================================================== */
.stack {
  --stack-top: calc(var(--header-h) + 18px);
  /* Respiration entre deux cartes : c'est cette distance de scroll que l'on
     parcourt avec une carte figée AVANT que la suivante ne vienne la recouvrir.
     L'augmenter ralentit le chevauchement, la réduire l'accélère. */
  --stack-gap: clamp(120px, 22vh, 260px);
  display: flex; flex-direction: column;
  gap: var(--stack-gap);
}
.stack__card {
  position: sticky;
  top: var(--stack-top);
  /* Chaque carte occupe au moins tout l'espace sous le header : sans ça, une
     carte courte laisse voir le fond de page sous elle pendant la respiration. */
  min-height: calc(100vh - var(--stack-top));
  background: var(--ink);              /* fond opaque obligatoire */
  border-top: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -26px 54px -26px rgba(0, 0, 0, 0.9);
  padding-block: clamp(52px, 8vw, 104px);
}
/* Empilement : chaque carte passe au-dessus de la précédente */
.stack__card:nth-child(1) { z-index: 1; }
.stack__card:nth-child(2) { z-index: 2; }
.stack__card:nth-child(3) { z-index: 3; }
.stack__card:nth-child(4) { z-index: 4; }
.stack__card:nth-child(5) { z-index: 5; }
.stack__card:nth-child(6) { z-index: 6; }
/* Liseré jaune : repère visuel du haut de carte pendant la superposition */
.stack__card::before {
  content: "";
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: clamp(56px, 9vw, 104px); height: 3px;
  background: var(--yellow); border-radius: 0 0 3px 3px;
}
/* La dernière carte ne colle pas : elle laisse repartir le flux normal */
.stack__card:last-child { position: relative; top: auto; }

/* Carte plus haute que l'espace disponible sous le header : figée par le haut,
   son bas serait INATTEIGNABLE — la carte suivante passerait par-dessus avant
   qu'on ait pu le lire.
   Ces cartes-là sont figées par le BAS : js/script.js leur pose un `top` négatif
   inline, égal à (hauteur de fenêtre − hauteur de carte). Elles défilent donc
   intégralement, puis se figent quand leur bas atteint le bas de l'écran, et la
   carte suivante vient les recouvrir comme les autres. L'empilement est conservé,
   le texte reste lisible. La classe `is-tall` ne sert que de repère de débogage. */

/* Mobile : l'empilement nuit à la lecture de blocs longs sur petit écran */
@media (max-width: 860px) {
  .stack { gap: 0; }
  .stack__card {
    position: relative; top: auto;
    min-height: 0;
    box-shadow: none;
    padding-block: clamp(46px, 11vw, 68px);
  }
  /* La marche n'a plus de sens quand les étapes s'empilent à la verticale : la
     mascotte avancerait horizontalement pendant que la liste descend, et les
     étapes non atteintes resteraient estompées sans raison. */
  .steps-walk__rail { display: none; }
  .steps--walk .step { opacity: 1; transform: none; }
}
/* Accessibilité : aucun effet si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
  .stack { gap: 0; }
  .stack__card { position: relative; top: auto; min-height: 0; box-shadow: none; }
}

/* Badge « Notre maison » / « Client » sur les tuiles projet */
.tile__badge { display: inline-block; margin-right: .6em; padding: .18em .5em; border-radius: 4px;
  background: var(--yellow); color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.tile__badge--client { background: color-mix(in srgb, var(--cream) 88%, transparent); }
@media (max-width: 860px) { .tile__badge { background: var(--yellow); color: var(--ink); } }
.section__intro { max-width: 56ch; margin-top: 22px; color: color-mix(in srgb, var(--cream) 72%, transparent); }