/* ==========================================================================
   Poetrip — Ateliers Slam
   Système visuel relevé sur podia.com : header jaune fixe, canvas blanc cassé,
   titres grotesques énormes en tracking serré, cartes gris clair, panneaux de
   couleur vive griffés de traits fins, pied de page noir.
   Couleurs échantillonnées au pixel sur les captures de référence.
   ========================================================================== */

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs */
  --yellow: #fdc837;
  --yellow-dark: #f0b81f;
  --paper: #fdfdfc;
  --card: #f4f3f1;
  --white: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #2f2d2b;
  --ink-mute: #56534f;
  --footer: #1b1a18;
  --line: #e2e0dc;

  /* Panneaux produit */
  --turquoise: #55e7dd;
  --magenta: #ff98ff;
  --periwinkle: #96b4fc;
  --green: #88e2b3;
  --pink: #f7cbe8;
  --blue: #2f5bbf;

  /* Typographie */
  --font: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-logo: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;

  /* Layout */
  --page: 1200px;
  --gutter: 20px;
  --header-h: 72px;

  /* Rayons */
  --r-btn: 10px;
  --r-pill: 14px;
  --r-card: 20px;
  --r-panel: 20px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 420ms;
  --dur-fast: 180ms;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 300;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; border-radius: var(--r-btn);
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 16px; }

/* Garde un mot et sa ponctuation sur la même ligne. */
.nobr { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(40px, 9.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.h2 {
  font-size: clamp(34px, 7.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
}

/* « Mes interventions pédagogiques » : presque la taille du titre de la page,
   pour qu'il ouvre la section aussi franchement que le hero ouvre le site. */
.h2--grand { font-size: clamp(38px, 8.6vw, 72px); }

.h3 {
  font-size: clamp(34px, 8.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.h4 {
  font-size: clamp(22px, 4.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.lead {
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.45;
  color: var(--ink);
}

.body-lg {
  font-size: clamp(17px, 4.4vw, 19px);
  line-height: 1.55;
  color: var(--ink);
}

.mute { color: var(--ink-soft); }
.mute strong, .hero__note strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(44px, 8.5vw, 76px); }
/* Alterner l'ampleur des blocs donne du relief au défilement. */
.section--xl { padding-block: clamp(72px, 14vw, 132px); }
.section--sm { padding-block: clamp(28px, 5vw, 44px); }
.section--tight { padding-block: clamp(32px, 6vw, 52px); }
/* Modules qui s'enchaînent : on ne garde qu'un souffle en haut, le bas du
   module précédent fournissant déjà l'essentiel de l'écart. */
.section--close { padding-top: clamp(12px, 2.5vw, 24px); }

.center { text-align: center; }
.measure { max-width: 640px; margin-inline: auto; }
.measure-wide { max-width: 820px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: transparent;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--yellow-dark); }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #000; }

.btn--pill { border-radius: var(--r-pill); }

.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--card); }

.btn--link {
  padding: 0;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding-bottom: 2px;
}
.btn--link:hover { color: var(--ink-soft); border-color: var(--ink-soft); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Header jaune fixe
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--yellow);
}

.header__inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 12px;
}

.logo {
  font-family: var(--font-logo);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  padding-bottom: 2px;
  color: var(--ink);
  /* Le logo peut se resserrer si la police chargée est plus large que prévu,
     pour que le header ne casse jamais. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.header__nav { display: none; }

.header__cta { margin-left: auto; padding-left: 8px; }
.header__cta .btn { padding: 14px 22px; font-size: 15px; white-space: nowrap; }

/* Sur le bandeau jaune, un aplat jaune seul disparaîtrait : le liseré d'encre
   le détache tout en gardant la couleur demandée. */
.btn--dossier {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--dossier:hover { background: var(--ink); color: var(--yellow); }
/* Le tiroir mobile prolonge le même jaune juste en dessous : une fois ouvert,
   le bouton passerait en jaune sur jaune. Il repasse au blanc le temps que le
   tiroir reste déployé, et redevient jaune dès qu'on le referme. */
#header:has(.drawer.is-open) .header__cta-mob.btn--dossier {
  background: #fff;
}
.header__cta-desk { display: none; }
@media (min-width: 900px) {
  .header__cta-desk { display: inline-flex; }
  .header__cta-mob { display: none; }
}

/* Sous 420 px, le libellé complet ne tient pas à côté du logo et du burger. */
.cta-long { display: none; }
.cta-short { display: inline; }
@media (min-width: 420px) {
  .cta-long { display: inline; }
  .cta-short { display: none; }
  .header__cta .btn { padding: 15px 22px; font-size: 16px; }
}
@media (max-width: 419px) {
  .header__inner { gap: 14px; }
  .logo { font-size: 31px; }
}
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .logo { font-size: 27px; }
  .burger { width: 38px; }
  .header__cta { padding-left: 4px; }
  .header__cta .btn { padding: 12px 18px; font-size: 14px; }
}

.burger {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
}
.burger span {
  display: block; height: 2.5px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Panneau mobile */

/* Sur téléphone, le tiroir prolonge la barre jaune du header : un seul
   panneau, du haut de l'écran jusqu'au dernier lien. */
.drawer {
  display: none;
  background: var(--yellow);
  border-top: 2px solid var(--ink);
  padding: 4px var(--gutter) 28px;
}
.drawer.is-open { display: block; }
.drawer a:not(.btn) {
  display: block;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Le filet gris clair disparaîtrait sur le jaune. */
  border-bottom: 1px solid rgba(26, 26, 26, 0.16);
}
.drawer a:not(.btn):active { color: var(--ink-soft); }
.drawer__group > button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 0; border: 0; background: transparent;
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; text-align: left;
  color: var(--ink);
  border-bottom: 1px solid rgba(26, 26, 26, 0.16);
}
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.drawer__group > button[aria-expanded='true'] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sub a:not(.btn) {
  font-size: 17px; font-weight: 500;
  padding-left: 16px; margin-left: 2px;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(26, 26, 26, 0.16);
  /* Sur fond jaune, le repère de sous-niveau passe à l'encre. */
  border-left: 3px solid var(--ink);
}
.drawer .btn { margin-top: 20px; }

.caret {
  width: 9px; height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
[aria-expanded='true'] > .caret { transform: translateY(2px) rotate(-135deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(40px, 9vw, 84px) 0; }
.hero__grid { display: grid; gap: clamp(32px, 6vw, 48px); }
.hero__title { max-width: 19ch; margin-inline: auto; text-wrap: balance; }
.hero__sub { margin: 24px auto 0; max-width: 560px; }
.hero__note {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 68ch;
  font-size: clamp(14px, 1.6vw, 15px);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
}
.hero .btn-row { margin-top: 32px; }

/* --------------------------------------------------------------------------
   La vidéo d'accueil
   Un seul plan, vertical : presque tout l'écran sur téléphone, étiré autant
   que la fenêtre le permet sur ordinateur.
   -------------------------------------------------------------------------- */

.reel { display: flex; justify-content: center; }

.reel__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--card);
  /* La hauteur disponible sous le titre borne la largeur : la vidéo grandit
     jusqu'à remplir l'écran, sans jamais le dépasser. */
  max-width: min(100%, calc((100svh - 150px) * 9 / 16));
}
@supports not (height: 100svh) {
  .reel__frame { max-width: min(100%, 420px); }
}

/* Sur téléphone la vidéo sort de la gouttière : bord à bord, sans cadre découpé,
   dans son format d'origine. */
@media (max-width: 899px) {
  .reel__frame {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: min(100vw, calc((100svh - 190px) * 9 / 16));
    border-radius: 0;
  }
}
.reel__frame img, .reel__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 900px) {
  /* Sur ordinateur, le plan vertical est recadré : c'est le seul moyen
     d'occuper toute la colonne sans faire une tour deux fois plus haute que
     le titre d'en face. object-fit: cover garde le centre de l'image. */
  .reel__frame { aspect-ratio: 1 / 1; max-width: 100%; }

  /* Sur grand écran, le titre tient la colonne de gauche et la vidéo celle
     de droite : le bloc d'ouverture se lit d'un seul regard. */
  .hero { padding-bottom: clamp(24px, 4vw, 48px); }
  .hero__grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
  }
  .hero__intro { text-align: left; }
  /* En colonne, la largeur borne déjà le titre : on redescend un peu le corps
     pour qu'il tienne en quatre lignes face à la vidéo. */
  .hero__title { max-width: none; margin-inline: 0; font-size: clamp(42px, 4.5vw, 66px); }
  .hero__note { margin-inline: 0; max-width: 46ch; }
  .hero .btn-row--center { justify-content: flex-start; }
  .hero .reel { justify-content: flex-end; }
}

/* Bords déchirés : polygones irréguliers, comme un papier arraché à la main */
.tear-b { clip-path: polygon(0 3%, 20% 0, 41% 4%, 62% 1%, 82% 5%, 100% 2%, 98% 24%, 100% 48%, 97% 71%, 100% 94%, 78% 98%, 56% 94%, 34% 99%, 12% 95%, 0 98%, 3% 72%, 0 47%, 2% 25%); }
.tear-c { clip-path: polygon(3% 0, 24% 4%, 45% 0, 66% 5%, 88% 1%, 100% 5%, 97% 28%, 100% 51%, 98% 74%, 100% 97%, 76% 100%, 54% 96%, 31% 100%, 9% 96%, 0 99%, 2% 73%, 0 50%, 3% 27%); }

/* Photo seule, pour les blocs en deux colonnes */
.photo-single {
  position: relative;
  aspect-ratio: 4 / 4.6;
}
.photo-single__shape {
  position: absolute;
  left: -4%; top: -3%;
  width: 78%; height: 62%;
  background: var(--periwinkle);
  clip-path: polygon(2% 6%, 28% 0, 56% 5%, 84% 1%, 100% 8%, 96% 40%, 100% 72%, 94% 100%, 66% 95%, 38% 100%, 12% 94%, 0 98%, 3% 66%, 0 34%);
}
.photo-single__shape--green { background: var(--green); }
.photo-single figure {
  position: absolute;
  margin: 0;
  right: 0; bottom: 0;
  width: 94%; height: 96%;
  overflow: hidden;
}
.photo-single figure img { width: 100%; height: 100%; object-fit: cover; }

.photo-single__front {
  position: absolute;
  left: 8%; bottom: 4%;
  width: 62%; height: 22%;
  background: var(--blue);
  clip-path: polygon(0 18%, 26% 6%, 54% 0, 80% 7%, 100% 2%, 94% 58%, 88% 100%, 58% 94%, 30% 99%, 8% 92%);
}

/* Traits fins griffés, partagés avec les panneaux produit */
.scribbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scribbles path { fill: none; stroke: rgba(26, 26, 26, 0.35); stroke-width: 1; }

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: clamp(48px, 11vw, 64px); text-align: center; }

.stat__value {
  font-size: clamp(60px, 15vw, 104px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.stat__label { margin-top: 12px; font-size: clamp(17px, 4.2vw, 20px); color: var(--ink); }

/* --------------------------------------------------------------------------
   Titre entouré au feutre
   -------------------------------------------------------------------------- */

.circled { position: relative; display: inline-block; padding: 0 0.16em; }
.circled svg {
  position: absolute;
  left: -12%; top: -22%;
  width: 126%; height: 148%;
  /* Le reset « img, svg { max-width: 100% } » ramenait le tracé à la largeur
     exacte du mot : l'ellipse coupait donc toujours les dernières lettres. */
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
/* Le tracé s'étire sur toute la largeur du mot : sans ça, l'ellipse garde ses
   proportions et laisse les premières et dernières lettres dehors. */
.circled path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3.4;
  stroke-linecap: round;
}
/* Boîte plus étroite pour un mot court : le trait y est plus étiré en hauteur. */
/* Un mot court tient dans une boîte étroite : le trait passait sur les
   lettres. On l'écarte franchement pour que « Slam » reste lisible dedans. */
.circled--court svg { left: -15%; top: -17%; width: 130%; height: 136%; }
.circled--court path { stroke-width: 4.2; }
.circled--ponctue { margin-right: -0.15em; }
.circled path.is-draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.circled.is-visible path.is-draw { animation: draw 1100ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Cartes produit : zone grise + panneau coloré
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(32px, 6vw, 56px); align-items: center; }

.products { display: grid; gap: clamp(26px, 5vw, 48px); }

/* Sur téléphone, le titre de section collé à la première carte manquait d'air.
   Sur grand écran l'écart est déjà suffisant. */
@media (max-width: 899px) {
  .products-wrap { padding-top: 18px; }
}
/* Sur ordinateur, le titre entouré est devenu bien plus gros : il lui faut
   la même respiration avant la première carte. */
@media (min-width: 900px) {
  .products-wrap { padding-top: clamp(20px, 2.6vw, 38px); }
}

/* Carte entièrement cliquable : le lien « En savoir plus » étend sa zone
   sensible à tout le bloc, sans dupliquer de lien pour les lecteurs d'écran. */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.product:hover, .product:focus-within {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}

.product__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
/* Le « scale » du bouton pressé ferait du lien le bloc conteneur de son propre
   ::after : la zone sensible se replierait sur le bouton entre l'appui et le
   relâchement, et le clic n'aboutirait pas. C'est la carte qui s'enfonce. */
.product__link:active { transform: none; }
.product:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }
.product__link .arrow { transition: transform var(--dur-fast) var(--ease); }
.product:hover .product__link .arrow { transform: translateX(5px); }

.product__text { padding: clamp(28px, 7vw, 56px); }
.product__text h3 { margin-bottom: 20px; }
.product__text p { max-width: 54ch; }
.product__text .btn { margin-top: 28px; }

.product__panel {
  position: relative;
  padding: clamp(14px, 2.4vw, 22px);
  min-height: 240px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
}

/* La photo occupe le panneau ; l'aplat de couleur reste visible en cadre,
   c'est lui qui garde la signature de chaque atelier. */
.product__photo {
  position: relative; z-index: 1;
  width: 100%;
  /* Sans `height: auto`, l'attribut height de la balise fait autorité et le
     rapport ci-dessous est ignoré : la photo s'étirait à 1050 px de haut. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
}

/* Le numéro se pose sur le coin de la photo : une pastille d'encre, lisible
   quelle que soit l'image en dessous. */
.product__n {
  position: absolute; z-index: 2;
  left: calc(clamp(14px, 2.4vw, 22px) + 12px);
  top: calc(clamp(14px, 2.4vw, 22px) + 12px);
  padding: 4px 13px 5px;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-logo);
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.1;
  pointer-events: none;
}

/* Chorégraphie au défilement, là où le navigateur sait la faire : la photo
   se pose, le numéro dérive. Aucun script, et rien du tout ailleurs. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product__photo {
      animation: photo-pose linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 42%;
    }
    .product__n {
      animation: n-derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes photo-pose {
  from { opacity: 0.55; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes n-derive {
  from { transform: translateY(8px); }
  to { transform: translateY(-8px); }
}
.product__panel--turquoise { background: var(--turquoise); }
.product__panel--magenta { background: var(--magenta); }
.product__panel--green { background: var(--green); }
.product__panel--periwinkle { background: var(--periwinkle); }

/* --------------------------------------------------------------------------
   Carrousel de témoignages
   -------------------------------------------------------------------------- */

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
}
.carousel::-webkit-scrollbar { display: none; }

.quote {
  position: relative;
  flex: 0 0 86%;
  scroll-snap-align: center;
  border-radius: var(--r-card);
  padding: clamp(28px, 6vw, 44px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.quote--periwinkle { background: var(--periwinkle); }
.quote--turquoise { background: var(--turquoise); }
.quote--yellow { background: var(--yellow); }
.quote--magenta { background: var(--magenta); }
.quote--green { background: var(--green); }

/* Sans les gribouillis, la citation peut occuper toute la carte. */
.quote__text {
  position: relative; z-index: 1;
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.quote__who { position: relative; z-index: 1; margin-top: 32px; }
.quote__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(26, 26, 26, 0.18);
  display: grid; place-items: center;
  font-weight: 600; font-size: 18px; color: var(--ink);
  margin-bottom: 14px;
}
.quote__name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.quote__role { font-size: 16px; color: var(--ink-soft); margin-top: 2px; }

.dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.dots button {
  width: 11px; height: 11px; padding: 0;
  border: 0; border-radius: 99px;
  background: #d5d2ce;
  transition: width var(--dur) var(--ease), background var(--dur) ease;
}
.dots button.is-active { width: 68px; background: var(--ink); }

/* --------------------------------------------------------------------------
   Atelier express : consignes + chrono
   -------------------------------------------------------------------------- */

.express { display: grid; gap: 16px; }

.express__panel {
  background: var(--card);
  border-radius: var(--r-card);
  padding: clamp(28px, 6vw, 44px);
}

.dials { display: grid; gap: 12px; margin-top: 28px; }
.dial {
  border-radius: 14px;
  padding: 20px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dial--turquoise { background: var(--turquoise); }
.dial--magenta { background: var(--magenta); }
.dial--periwinkle { background: var(--periwinkle); }
.dial__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.dial__value {
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600;
  overflow-wrap: break-word; hyphens: auto;
}
.dial.is-rolling .dial__value { animation: roll 420ms var(--ease); }
@keyframes roll {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.express__prompt {
  margin-top: 24px; padding: 20px;
  border-radius: 14px; background: var(--white);
  font-size: 18px; line-height: 1.45;
}
.express .btn-row { margin-top: 24px; }

.timer {
  background: var(--ink); color: var(--white);
  border-radius: var(--r-card);
  padding: clamp(28px, 6vw, 44px);
  display: flex; flex-direction: column; gap: 28px; justify-content: space-between;
}
.timer p { color: #b9b6b2; }
.timer__display {
  font-size: clamp(56px, 14vw, 88px);
  line-height: 1; letter-spacing: -0.04em; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timer__bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.timer__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--yellow); transform-origin: 0 50%;
  transition: transform 300ms linear;
}
.timer.is-over .timer__display { color: var(--yellow); }
.timer .btn--line { border: 2px solid rgba(255,255,255,0.4); color: var(--white); padding: 15px 26px; }
.timer .btn--line:hover { background: rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   Agenda — fenêtre ouverte depuis le menu
   -------------------------------------------------------------------------- */

.sheet {
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(26, 26, 26, 0.55); }

.sheet[open] { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 320ms var(--ease); }
  .sheet[open]::backdrop { animation: fade-in 320ms var(--ease); }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 4vw, 36px) 20px;
  background: var(--yellow);
}
.sheet__eyebrow {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 8px;
}
.sheet__title {
  font-size: clamp(26px, 5.4vw, 38px);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 600;
}
.sheet__close {
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--ink);
}
.sheet__close span {
  position: absolute; left: 13px; top: 21px;
  width: 18px; height: 2.5px; border-radius: 2px; background: var(--white);
}
.sheet__close span:first-child { transform: rotate(45deg); }
.sheet__close span:last-child { transform: rotate(-45deg); }

.sheet__body {
  padding: clamp(24px, 4vw, 44px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Repère de section dans la fenêtre : un filet jaune plutôt qu'un titre nu. */
.sheet__body .h4 {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sheet__body .h4::before {
  content: ''; position: absolute; left: 0; top: -2px;
  width: 52px; height: 4px; border-radius: 99px; background: var(--yellow);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq__item { background: var(--card); border-radius: 16px; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border: 0; background: transparent; text-align: left;
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.faq__icon {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--yellow); font-size: 18px; line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(135deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 24px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { display: grid; gap: clamp(24px, 4vw, 34px); }

/* Le panneau jaune porte l'invitation, la carte blanche porte le formulaire.
   Même bord d'encre et même ombre dure que les bornes de démo. */
.contact__intro {
  padding: clamp(26px, 5vw, 40px);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--yellow);
}
.contact__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.65;
}
.contact__title {
  margin-top: 10px;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 700;
}
.contact__text {
  margin-top: 16px;
  font-size: clamp(16px, 2vw, 17px); line-height: 1.55;
  color: rgba(26, 26, 26, 0.88);
}

.contact__mail {
  display: block; margin-top: clamp(22px, 3vw, 28px);
  padding: 16px 20px;
  border: 2px solid var(--ink); border-radius: 16px;
  background: var(--paper);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.contact__mail:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.contact__mail-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.contact__mail-value {
  display: block; margin-top: 4px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 700; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.contact__points { margin-top: clamp(20px, 3vw, 26px); display: grid; gap: 10px; }
.contact__points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; font-weight: 600;
}
.contact__points li::before {
  content: ''; flex: 0 0 auto;
  width: 9px; height: 9px; margin-top: 7px;
  border-radius: 50%; background: var(--ink);
}

.form {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(24px, 5vw, 36px);
  display: grid; gap: 18px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 15px;
  border: 2px solid var(--ink); border-radius: 12px;
  background: var(--white); font-size: 16px; font-weight: 500;
  transition: box-shadow var(--dur-fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: 0 0 0 3px var(--periwinkle);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: #c2410c; }
.field__error { font-size: 14px; color: #c2410c; text-transform: none; letter-spacing: 0; }
.field__error[hidden] { display: none; }
.field-row { display: grid; gap: 16px; }

.form__note { font-size: 14px; color: var(--ink-mute); }
.form__status { padding: 14px 16px; border-radius: var(--r-btn); background: var(--yellow); font-size: 16px; }
.form__status[hidden] { display: none; }



/* --------------------------------------------------------------------------
   Pied de page noir
   -------------------------------------------------------------------------- */

.footer {
  background: var(--footer);
  color: var(--white);
  padding-block: clamp(44px, 7vw, 68px) clamp(28px, 4vw, 36px);
}
.footer__logo {
  /* block pour que l'adresse passe à la ligne, width limitée pour que la
     zone cliquable s'arrête au mot et ne traverse pas toute la largeur. */
  display: block; width: fit-content;
  font-family: var(--font-logo);
  font-size: clamp(28px, 4.6vw, 38px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* Les liens du pied de page sont volontairement en retrait : sur fond noir,
   un gris moyen suffit à les rendre lisibles sans qu'ils tirent l'œil. */
.footer a { color: #a3a09c; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease); }
.footer a:hover, .footer a:focus-visible { color: var(--white); }
/* Le logo reste blanc : ".footer a" (classe + balise) est plus spécifique que
   ".footer__logo" seule, donc il faut reprendre la balise ici aussi. */
.footer a.footer__logo, .footer a.footer__logo:hover, .footer a.footer__logo:focus-visible { color: var(--white); }

/* Le logo est en Anton, interligne 1 : sans une marge franche, l'adresse
   vient se coller sous les capitales. */
.footer__mail { display: inline-block; margin-top: clamp(16px, 1.8vw, 22px); font-size: 14px; }

.footer__nav {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin-top: clamp(30px, 4.2vw, 40px);
  padding-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.footer__nav a { font-size: 14px; }

.footer__bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: clamp(24px, 3.4vw, 32px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.footer__copy { font-size: 13px; color: #7e7b77; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__legal a { font-size: 13px; color: #7e7b77; }

/* Les deux réseaux se calent à droite dès qu'il reste de la place. */
.socials { display: flex; gap: 18px; margin-left: auto; }
.socials a { display: grid; place-items: center; width: 24px; height: 24px; }
.socials svg { width: 18px; height: 18px; fill: #a3a09c; transition: fill var(--dur-fast) var(--ease); }
.socials a:hover svg, .socials a:focus-visible svg { fill: var(--white); }

/* --------------------------------------------------------------------------
   Révélations au scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Ordinateur
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 80px; }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 40px;
  }
  .header__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 0; border: 0; background: transparent;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    position: relative;
  }
  .header__link::after {
    content: ''; position: absolute; left: 0; bottom: 4px;
    width: 100%; height: 2px; background: var(--ink);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--dur-fast) var(--ease);
  }
  .header__link:hover::after, .header__link[aria-expanded='true']::after { transform: scaleX(1); }
  .burger { display: none; }
  .drawer { display: none !important; }

  .stats { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .split { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .split--flip > *:first-child { order: 2; }
  /* Le portrait d'Esope tient la plus grande colonne : c'est lui qui porte
     la section. */
  #esope .split { grid-template-columns: 1fr 1.18fr; gap: 56px; }

  /* Sur grand écran les photos occupent nettement plus de surface */
  .photo-single { aspect-ratio: 5 / 5.8; }

  .product { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .product__text { order: 1; display: flex; flex-direction: column; justify-content: center; }
  .product__panel {
    order: 2; min-height: 440px;
    border-bottom: 0; border-left: 2px solid var(--ink);
  }
  /* En deux colonnes, la photo remplit la moitié du bloc ; le rapport 4/3
     reste une hauteur minimale pour qu'elle ne s'écrase pas. */
  .product__panel { align-items: stretch; }
  .product__photo { aspect-ratio: auto; height: 100%; min-height: 0; }
  /* Une carte sur deux inverse les moitiés : le regard zigzague en descendant. */
  .product--flip .product__text { order: 2; }
  .product--flip .product__panel {
    order: 1;
    border-left: 0; border-right: 2px solid var(--ink);
  }

  .quote { flex-basis: 42%; min-height: 480px; }

  .express { grid-template-columns: 1.2fr 0.8fr; }
  .dials { grid-template-columns: repeat(3, 1fr); }


  .contact { grid-template-columns: 0.94fr 1.06fr; align-items: center; }
  .field-row { grid-template-columns: 1fr 1fr; }


}

/* Méga menu (ordinateur uniquement) */

.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: min(760px, calc(100vw - 80px));
  transform: translateX(-50%) translateY(-8px);
  padding: 32px;
  background: var(--white);
  border-radius: var(--r-card);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.header__item { position: static; display: flex; align-items: center; }
.header__item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.mega__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }
.mega__col--2 { padding-left: 32px; border-left: 1px solid var(--line); }
.mega__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); margin-bottom: 16px; }
.mega__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; margin-inline: -12px; border-radius: 12px;
  transition: background var(--dur-fast) ease;
}
.mega__item:hover { background: var(--card); }
.mega__chip { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; }
.mega__chip--turquoise { background: var(--turquoise); }
.mega__chip--magenta { background: var(--magenta); }
.mega__chip--green { background: var(--green); }
.mega__chip--periwinkle { background: var(--periwinkle); }
.mega__item b { display: block; font-size: 16px; font-weight: 600; }
.mega__item small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
.mega__foot {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding-top: 24px; width: 100%;
  border-top: 1px solid var(--line);
  font-size: 16px; font-weight: 600;
}
/* Deux liens au pied du méga-menu : le filet est porté par le conteneur. */
.mega__foots {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mega__foots .mega__foot { width: auto; margin-top: 0; padding-top: 0; border-top: 0; }
.mega__foot .arrow, .btn--link .arrow { transition: transform var(--dur-fast) var(--ease); }
.mega__foot:hover .arrow, .btn--link:hover .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
  .circled path.is-draw { stroke-dashoffset: 0; }
}


/* --------------------------------------------------------------------------
   Bloc ESOPE : bio courte, distinctions, documents
   -------------------------------------------------------------------------- */

.awards { display: grid; gap: 14px; margin-top: 28px; }
.awards li {
  display: flex; align-items: center; gap: 14px;
  font-size: 17px; font-weight: 500;
}
.awards__icon {
  flex: 0 0 auto; width: 26px; height: 26px;
  fill: var(--yellow);
}
/* Sur fond clair, le jaune seul manque de contraste : on le cercle d'encre. */
.awards li { position: relative; }
.awards__icon { filter: drop-shadow(0 0 0.6px rgba(26,26,26,0.55)); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}

.creds {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Le manifeste des ateliers
   Quatre principes, quatre aplats. Le bandeau d'encre porte l'intention,
   les cartes colorées portent les règles.
   -------------------------------------------------------------------------- */

.manifeste { margin-top: 40px; }

.manifeste__head {
  position: relative;
  padding: clamp(24px, 5vw, 34px);
  border: 2px solid var(--ink);
  border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}
.manifeste__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--yellow);
}
.manifeste__title {
  margin-top: 12px;
  max-width: 24ch;
  font-size: clamp(22px, 4.4vw, 30px);
  line-height: 1.14; letter-spacing: -0.03em; font-weight: 700;
}

.manifeste__list {
  display: grid; gap: 0;
  border: 2px solid var(--ink);
  border-radius: 0 0 var(--r-card) var(--r-card);
  overflow: hidden;
}
.manifeste__item {
  position: relative;
  padding: clamp(22px, 4vw, 28px) clamp(20px, 4vw, 28px);
  padding-left: clamp(66px, 11vw, 88px);
}
.manifeste__item + .manifeste__item { border-top: 2px solid var(--ink); }
.manifeste__item--turquoise { background: var(--turquoise); }
.manifeste__item--magenta { background: var(--magenta); }
.manifeste__item--green { background: var(--green); }
.manifeste__item--periwinkle { background: var(--periwinkle); }

.manifeste__n {
  position: absolute;
  left: clamp(20px, 4vw, 28px); top: clamp(20px, 4vw, 26px);
  font-family: var(--font-logo);
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1;
  opacity: 0.4;
}
.manifeste__item b {
  display: block;
  font-size: clamp(17px, 3vw, 19px); font-weight: 700; letter-spacing: -0.02em;
}
.manifeste__item span:not(.manifeste__n) {
  display: block; margin-top: 6px;
  font-size: 15px; line-height: 1.55;
  color: rgba(26, 26, 26, 0.86);
}

@media (min-width: 720px) {
  .manifeste__list { grid-template-columns: 1fr 1fr; }
  /* En deux colonnes, les frontières ne suivent plus l'ordre du document. */
  .manifeste__item + .manifeste__item { border-top: 0; }
  .manifeste__item:nth-child(even) { border-left: 2px solid var(--ink); }
  .manifeste__item:nth-child(n+3) { border-top: 2px solid var(--ink); }
}

/* --------------------------------------------------------------------------
   Emplacements vidéo et audio
   -------------------------------------------------------------------------- */

.media { display: grid; gap: 16px; }
.media__slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--card);
  display: grid; place-items: center; text-align: center;
  padding: 24px;
  overflow: hidden;
}
.media__slot iframe, .media__slot video { width: 100%; height: 100%; border: 0; }
.media__play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center; margin: 0 auto 16px;
}
.media__play::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid var(--white);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.media__slot b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.media__slot span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Définitions
   -------------------------------------------------------------------------- */

.defs { display: grid; gap: 16px; }
/* Pleine largeur sur les pages atelier : le bloc garde son aplat, mais la
   ligne de texte reste lisible. */
.def {
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 38px);
}
.def--neutre { background: var(--card); }
.def--turquoise { background: var(--turquoise); }
.def--periwinkle { background: var(--periwinkle); }
.def--green { background: var(--green); }
.def--magenta { background: var(--magenta); }
.def h3 {
  font-size: clamp(22px, 4.6vw, 30px); line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 700; margin-bottom: 14px;
}
.def p { max-width: 74ch; font-size: 16px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Documents téléchargeables
   -------------------------------------------------------------------------- */

.docs { display: grid; gap: 12px; margin-top: 28px; }
.doc {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--card);
  border-radius: 14px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.doc:hover { background: var(--yellow); transform: translateX(4px); }
.doc__icon {
  flex: 0 0 auto; width: 42px; height: 52px;
  background: var(--ink); border-radius: 4px;
  position: relative;
  display: grid; place-items: end center; padding-bottom: 7px;
}
.doc__icon::before {
  content: ''; position: absolute; right: 0; top: 0;
  border-width: 0 12px 12px 0; border-style: solid;
  border-color: transparent var(--paper) transparent transparent;
}
.doc__icon span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--white);
}
.doc__text b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.doc__text small { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); }
.doc__arrow { margin-left: auto; font-size: 20px; }

/* --------------------------------------------------------------------------
   Ordinateur : grilles des nouveaux blocs
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .trust { grid-template-columns: repeat(4, 1fr); }
  .defs { grid-template-columns: repeat(3, 1fr); }
  .media { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 620px) and (max-width: 899px) {
  .defs { grid-template-columns: repeat(2, 1fr); }
}


/* --------------------------------------------------------------------------
   Chiffres clés
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: clamp(48px, 11vw, 72px); text-align: center; }
.stat__value {
  font-size: clamp(78px, 21vw, 112px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat.is-counting .stat__value { animation: count-pop 1500ms var(--ease); }
@keyframes count-pop {
  0% { transform: translateY(22px) scale(0.94); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.stat__rule {
  height: 4px; width: 0; margin: 0 auto 24px;
  background: var(--yellow); border-radius: 99px;
  transition: width 900ms var(--ease) 250ms;
}
.stat.is-counting .stat__rule { width: 72px; }
.stat__label { margin-top: 14px; font-size: clamp(17px, 4.2vw, 20px); }

/* --------------------------------------------------------------------------
   Pages d'atelier
   -------------------------------------------------------------------------- */

.page-hero { padding-block: clamp(28px, 5vw, 44px) clamp(32px, 6vw, 56px); }
.page-hero__band {
  border-radius: var(--r-card);
  padding: clamp(36px, 7vw, 88px) clamp(28px, 6vw, 64px);
  position: relative; overflow: hidden;
}
/* Mot en filigrane : donne de l'échelle au bandeau sans ajouter de contenu. */
.page-hero__watermark {
  position: absolute;
  right: -2%; bottom: -18%;
  font-family: var(--font-logo);
  font-size: clamp(120px, 26vw, 300px);
  line-height: 0.8;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.09);
  pointer-events: none;
  user-select: none;
}
.band--turquoise { background: var(--turquoise); }
.band--green { background: var(--green); }
.band--periwinkle { background: var(--periwinkle); }
.band--magenta { background: var(--magenta); }
.band--yellow { background: var(--yellow); }
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero h1 { font-size: clamp(34px, 7.6vw, 62px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; }
.page-hero p { margin-top: 20px; font-size: clamp(17px, 4.2vw, 20px); line-height: 1.45; }
.page-hero .btn-row { margin-top: 28px; }

.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; margin-bottom: 20px;
}
.crumb .arrow { transition: transform var(--dur-fast) var(--ease); }
.crumb:hover .arrow { transform: translateX(-5px); }

.facts { display: grid; gap: 2px; background: var(--line); border-radius: var(--r-card); overflow: hidden; }
.fact { background: var(--card); padding: 28px 26px; transition: background var(--dur-fast) ease; }
.fact:hover { background: var(--yellow); }
.fact b { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.fact:hover b { color: var(--ink); }
.fact span { font-size: clamp(18px, 3.8vw, 21px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; display: block; }

.steps { display: grid; counter-reset: step; }
.step {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 0 0 36px 0;
}
.step:last-child { padding-bottom: 0; }
/* Le filet relie les étapes : le parcours se lit comme une progression. */
.step::before {
  content: '';
  position: absolute;
  left: 27px; top: 52px; bottom: 6px;
  width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step__n {
  counter-increment: step;
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-weight: 700; font-size: 17px;
  transition: transform var(--dur) var(--ease), background var(--dur) ease;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step:hover .step__n { transform: scale(1.06); background: var(--yellow); color: var(--ink); }
.step__body { padding-top: 10px; }

/* Le parcours se remplit au défilement : le filet se trace à l'encre et la
   pastille passe au jaune quand l'étape arrive à hauteur de lecture. Les
   étapes déjà lues restent allumées — on voit d'un coup d'œil où l'on en est.
   Aucun script : là où le navigateur ne sait pas faire, il ne se passe
   simplement rien de plus que le survol. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .step::after {
      content: '';
      position: absolute;
      left: 27px; top: 52px; bottom: 6px;
      width: 2px; background: var(--ink);
      transform-origin: top center;
      animation: fil-trace linear both;
      animation-timeline: view();
      /* Plages calées sur « cover » : l'étape s'allume quand elle atteint le
         milieu de l'écran, et la bascule est courte pour ne pas s'attarder
         sur les teintes intermédiaires entre l'encre et le jaune. */
      animation-range: cover 40% cover 66%;
    }
    .step:last-child::after { display: none; }
    .step__n {
      animation: pastille-allumee linear both;
      animation-timeline: view();
      animation-range: cover 34% cover 47%;
    }
  }
}
@keyframes fil-trace {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes pastille-allumee {
  from { background: var(--ink); color: var(--white); transform: scale(1); }
  to { background: var(--yellow); color: var(--ink); transform: scale(1.08); }
}
.step h3 { font-size: clamp(21px, 4.4vw, 26px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; margin-bottom: 10px; }
.step p { color: var(--ink-soft); font-size: clamp(16px, 3.6vw, 17px); line-height: 1.55; max-width: 62ch; }

.goals { display: grid; gap: 14px; counter-reset: goal; }
.goal {
  position: relative;
  background: var(--card); border-radius: 18px;
  padding: 28px 28px 28px 30px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.goal::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--yellow);
}
.goal:hover { transform: translateY(-4px); }
.goal em {
  counter-increment: goal;
  display: block; font-style: normal;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
.goal em::before { content: 'Objectif ' counter(goal, decimal-leading-zero); }
.goal b { display: block; font-size: clamp(20px, 4vw, 23px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.goal span { color: var(--ink-soft); font-size: 16px; line-height: 1.55; }

/* Bloc « essayer la démo » des pages atelier : même grammaire que les bornes
   de la page démo — bord d'encre et ombre dure qui se resserre au survol. */
.tryout {
  display: block;
  padding: clamp(26px, 5vw, 44px);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 7px 7px 0 var(--ink);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tryout:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--ink); }
.tryout:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }
.tryout__label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.68;
}
.tryout__title {
  display: block; margin-top: 10px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
}
.tryout__text {
  display: block; margin-top: 14px; max-width: 56ch;
  font-size: clamp(16px, 2vw, 17px); line-height: 1.55; opacity: 0.9;
}
.tryout__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 3vw, 28px); padding: 14px 24px;
  border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tryout .arrow { transition: transform var(--dur-fast) var(--ease); }
.tryout:hover .arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .tryout, .tryout .arrow { transition: none; }
  .tryout:hover, .tryout:active { transform: none; box-shadow: 7px 7px 0 var(--ink); }
}

/* Respiration entre deux blocs de texte sur les pages atelier. La photo est
   nue : elle porte son propre cadre d'encre, sans aplat derrière elle. */
.shot {
  display: flex;
  justify-content: center;
  /* Sans cela, une colonne étirée étire aussi la photo : le rapport saute. */
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-block: clamp(8px, 2vw, 20px);
  padding: 0;
  border: 0;
  background: none;
}
.shot img {
  width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(300px, 46vh, 480px);
  border: 2px solid var(--ink);
  border-radius: 12px;
  display: block;
}
/* Les vidéos d'atelier sont tournées au téléphone, en vertical : plutôt que
   de les recadrer en bandeau, on les pose debout sur l'aplat de l'atelier. */
/* Paires en deux colonnes sur les pages atelier : une photo face à un bloc.
   Sur téléphone, seule celle qui précède la démo est masquée : la démo est
   déjà un pavé coloré, une photo juste avant alourdit l'enchaînement. */
.paire { display: grid; gap: clamp(24px, 4vw, 36px); }

@media (max-width: 899px) {
  .paire--photo-avant > .shot { display: none; }
}

@media (min-width: 900px) {
  /* Deux colonnes strictement égales, en largeur comme en hauteur : c'est
     l'égalité des deux blocs qui fait tenir la paire. */
  .paire {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(32px, 4vw, 56px);
  }
  .paire > .shot { width: 100%; margin-block: 0; }
  .paire > .def { display: flex; flex-direction: column; }
  /* La photo occupe toute sa colonne : c'est ce qui met les deux blocs à
     la même taille, notamment face à une FAQ qui fait deux fois sa hauteur. */
  .paire > .shot img {
    width: 100%; height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* Sur téléphone, seule la photo qui ouvre la FAQ garde l'aplat de son
   atelier : elle annonce la section. */
@media (max-width: 899px) {
  .paire--faq > .shot {
    width: 100%;
    padding: clamp(14px, 3vw, 22px);
    border: 2px solid var(--ink);
    border-radius: var(--r-card);
    background: var(--bande, var(--card));
  }
}

/* Le déroulé et la vidéo côte à côte sur grand écran. La vidéo reste en vue
   pendant qu'on parcourt les étapes. */
.parcours { display: grid; gap: clamp(28px, 5vw, 44px); }

@media (min-width: 900px) {
  .parcours {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(36px, 4vw, 60px);
  }
  .parcours .steps { order: 1; max-width: none; }
  .parcours .shot--video {
    order: 2;
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}

.shot--video { max-width: 560px; margin-inline: auto; }
.shot--video video, .shot--video img {
  width: auto;
  height: clamp(360px, 60vh, 620px);
  max-height: none;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink);
}
/* Sur téléphone la vidéo prend toute la largeur disponible : à 350 px de
   large, son 9/16 lui donne déjà les trois quarts de l'écran. */
@media (max-width: 899px) {
  .shot--video { max-width: none; }
  .shot--video video, .shot--video img {
    width: 100%;
    height: auto;
    max-width: min(100%, calc((100svh - 120px) * 9 / 16));
  }
}

.related { display: grid; gap: 12px; }
.related__item {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 26px; border-radius: 18px;
  min-height: 116px;
  transition: transform var(--dur-fast) var(--ease);
}
.related__item:hover { transform: translateX(5px); }
.related__item b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.related__item small { display: block; margin-top: 3px; font-size: 15px; opacity: 0.75; }
.related__item .arrow { margin-left: auto; font-size: 20px; }

@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .goals { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .steps { max-width: 860px; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .related { grid-template-columns: repeat(3, 1fr); }
  .related__item:hover { transform: translateY(-5px); }
}
@media (min-width: 620px) and (max-width: 899px) {
  .facts, .goals { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Page « Témoignages & médias »
   ========================================================================== */

/* Bandeau défilant des médias. Les noms sont composés dans la police du site,
   ce ne sont pas les logotypes des rédactions : une citation, pas une
   reproduction de marque. La piste est écrite deux fois pour que la boucle se
   referme sans saut ; la seconde copie est masquée aux lecteurs d'écran. */
.marquee {
  overflow: hidden;
  padding-block: clamp(13px, 2.2vw, 19px);
  background: var(--ink);
  border-block: 2px solid var(--ink);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(20px, 3.4vw, 36px);
  padding-inline: clamp(10px, 1.7vw, 18px);
  font-family: var(--font-logo);
  font-size: clamp(21px, 3.2vw, 32px);
  text-transform: uppercase; letter-spacing: 0.005em;
  color: var(--paper);
  white-space: nowrap;
}
.marquee__item i { font-style: normal; font-size: 0.42em; color: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* Les articles de presse. Même grammaire que les cartes d'atelier de
   l'accueil : bord d'encre, ombre portée dure, la carte s'enfonce au survol. */
.presses { display: grid; gap: clamp(18px, 2.6vw, 26px); }
@media (min-width: 720px) {
  .presses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presse--une { grid-column: span 2; }
}
@media (min-width: 1040px) { .presses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.presse {
  display: flex; flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
  padding: clamp(22px, 2.9vw, 30px);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--ink); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.presse:hover, .presse:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.presse:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }

.presse__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.presse__media {
  font-family: var(--font-logo);
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 1;
}
.presse__tag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1.5px solid var(--ink); border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.presse__titre {
  font-size: clamp(21px, 2.5vw, 26px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.presse--une .presse__titre { font-size: clamp(26px, 4.2vw, 40px); }
.presse__chapo {
  font-size: 16px; line-height: 1.5; color: rgba(26, 26, 26, 0.78);
  max-width: 54ch;
}
.presse__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 18px;
  margin-top: auto; padding-top: clamp(12px, 1.8vw, 18px);
  border-top: 1.5px solid rgba(26, 26, 26, 0.22);
}
.presse__lieu { font-size: 14px; font-weight: 600; color: rgba(26, 26, 26, 0.7); }
.presse__cta { font-size: 15px; font-weight: 700; }
.presse__cta .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.presse:hover .presse__cta .arrow { transform: translate(3px, -3px); }

/* Relais des structures : des lignes, pas des cartes — elles ne doivent pas
   rivaliser avec les articles de presse juste au-dessus. */
.relais-liste { margin-top: clamp(16px, 2.4vw, 22px); border-top: 1.5px solid var(--line); }
.relais {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 18px;
  padding-block: clamp(11px, 1.6vw, 15px);
  border-bottom: 1.5px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.relais:hover { background: rgba(26, 26, 26, 0.04); }
.relais__nom { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.relais__titre { font-size: 15px; color: var(--ink-mute); }
.relais .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.relais:hover .arrow { transform: translate(3px, -3px); }

/* Palmarès */
.def--yellow { background: var(--yellow); }
/* Tout est centré, boutons compris : la carte se lit comme une adresse. Sans
   justify-content, le bloc restait collé en haut et les boutons en bas. */
.def--centre { text-align: center; justify-content: center; }
.def--centre p { margin-inline: auto; }
.palms { list-style: none; margin: clamp(14px, 2vw, 20px) 0 0; padding: 0; display: grid; }
.palm {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0.28em;
  padding-block: clamp(9px, 1.4vw, 13px);
  border-top: 1.5px solid rgba(26, 26, 26, 0.22);
}
.palm:last-child { border-bottom: 1.5px solid rgba(26, 26, 26, 0.22); }
/* Une ligne de palmarès se lit d'un bloc : même graisse d'un bout à l'autre.
   Seul le paragraphe de bas de bloc reste en texte courant. */
.palm b, .palm span { font-size: clamp(17px, 2vw, 20px); font-weight: 700; letter-spacing: -0.02em; }

/* Les douze témoignages, en mosaïque plutôt qu'en carrousel : sur une page
   qui leur est consacrée, on veut pouvoir tous les lire. */
.mosaique { display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 700px) { .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mosaique > .quote {
  flex: initial;
  min-height: 0;
  padding: clamp(24px, 2.9vw, 32px);
  border: 2px solid var(--ink);
}
.mosaique .quote__text { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.2; }
.mosaique .quote__who { margin-top: clamp(20px, 3vw, 28px); }
.mosaique .quote__name { font-size: 17px; }
.mosaique .quote__role { font-size: 14px; }

/* --------------------------------------------------------------------------
   Carte de téléchargement dans le méga-menu
   La colonne « Tous les publics » est plus courte que celle des ateliers :
   le dossier occupe le vide au lieu de le laisser béant.
   -------------------------------------------------------------------------- */

.mega__doc {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 14px 16px;
  background: var(--card); border-radius: 14px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.mega__doc:hover { background: var(--yellow); transform: translateX(3px); }
.mega__doc .doc__icon { width: 34px; height: 42px; }
.mega__doc .doc__text b { font-size: 15px; }
.mega__doc .doc__text small { font-size: 13px; }
.mega__doc .doc__arrow { font-size: 18px; }

/* --------------------------------------------------------------------------
   Lecteurs vidéo posés à la demande
   Rien ne se charge avant le clic : ni la vidéo, ni son affiche.
   -------------------------------------------------------------------------- */

.playline { margin-top: 18px; }
.playbtn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 12px;
  border: 0; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) ease;
}
.playbtn:hover { background: #000; transform: translateY(-2px); }
.playbtn__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow);
  position: relative;
}
/* Le triangle de lecture, dessiné en bordures : pas d'image à charger. */
.playbtn__icon::before {
  content: ''; position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--ink);
}
.playvid {
  display: block; width: 100%;
  max-width: 520px;
  border: 2px solid var(--ink); border-radius: 14px;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   Vidéos à miniature — page « Témoignages & médias »
   L'affiche est visible, la vidéo ne part qu'au clic, avec le son.
   -------------------------------------------------------------------------- */

.filmcard {
  position: relative;
  border: 2px solid var(--ink); border-radius: var(--r-card);
  overflow: hidden; background: var(--ink);
}
.filmcard .playvid { max-width: none; border: 0; border-radius: 0; }
.filmcard__btn {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
  position: relative;
}
/* Dans la grille de presse, le film comble la colonne laissée libre par les
   sept articles : il prend toute la hauteur de la rangée et la même ombre. */
.presses > .filmcard { height: 100%; box-shadow: 8px 8px 0 var(--ink); }
.presses > .filmcard .filmcard__btn { height: 100%; }
.presses > .filmcard .filmcard__poster { aspect-ratio: auto; height: 100%; }
/* Sur deux colonnes, les sept articles tombent juste : le film y prendrait
   une rangée pour lui seul, alors il l'occupe en entier. */
@media (min-width: 720px) and (max-width: 1039px) {
  .presses > .filmcard { grid-column: span 2; }
  .presses > .filmcard .filmcard__poster { aspect-ratio: 16 / 9; height: auto; }
}
.filmcard__poster {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.filmcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.62), rgba(26, 26, 26, 0.08) 55%);
}
.filmcard__disc {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--white);
  box-shadow: 0 6px 24px rgba(26, 26, 26, 0.35);
  transition: transform var(--dur-fast) var(--ease);
}
.filmcard__disc::before {
  content: ''; position: absolute;
  left: 28px; top: 50%; transform: translateY(-50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ink);
}
.filmcard__btn:hover .filmcard__disc { transform: scale(1.08); }
.filmcard__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2.4vw, 22px);
  color: var(--white); text-align: left;
  font-size: clamp(17px, 2vw, 20px); font-weight: 700; letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   « Les derniers projets » — le carnet de bord
   Mêmes cartes que la revue de presse : bord d'encre, ombre dure, la carte
   s'enfonce au survol.
   -------------------------------------------------------------------------- */

.projets { display: grid; gap: clamp(18px, 2.6vw, 26px); }
@media (min-width: 720px) { .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.projet {
  display: flex; flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
  padding: clamp(22px, 2.9vw, 30px);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.projet:hover, .projet:focus-visible { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.projet:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }

.projet__titre {
  font-size: clamp(21px, 2.5vw, 26px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.projet__chapo { font-size: 16px; line-height: 1.5; color: rgba(26, 26, 26, 0.78); }
.projet__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 18px;
  margin-top: auto; padding-top: clamp(12px, 1.8vw, 18px);
  border-top: 1.5px solid rgba(26, 26, 26, 0.22);
}
.projet__cta { font-size: 15px; font-weight: 700; }
.projet__cta .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.projet:hover .projet__cta .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   La page d'un projet
   Une colonne de lecture étroite, des illustrations qui respirent, et un
   encadré d'expertise jaune à mi-parcours. Aucune date n'est affichée.
   -------------------------------------------------------------------------- */

.fil {
  padding-top: clamp(18px, 3vw, 28px);
  font-size: 14px; color: var(--ink-mute);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.fil a { color: var(--ink-mute); text-decoration: none; border-bottom: 1.5px solid transparent; }
.fil a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.fil [aria-current] { color: var(--ink); font-weight: 600; }

.article { padding-block: clamp(20px, 3.5vw, 32px) clamp(20px, 3.5vw, 30px); }

.article__tete {
  padding: clamp(26px, 4.4vw, 48px);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 8px 8px 0 var(--ink);
}
.article__tete h1 {
  font-size: clamp(30px, 6.2vw, 52px);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
  max-width: 20ch;
}
.article__chapo {
  margin-top: clamp(14px, 2vw, 20px);
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5;
  max-width: 62ch;
}
.article__meta {
  display: grid; gap: 14px 30px;
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(16px, 2.4vw, 22px);
  border-top: 1.5px solid rgba(26, 26, 26, 0.24);
}
@media (min-width: 720px) { .article__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.article__meta dt {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(26, 26, 26, 0.65);
}
.article__meta dd { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.article__signature {
  margin-top: clamp(16px, 2.4vw, 20px);
  font-size: 14px; font-weight: 600; color: rgba(26, 26, 26, 0.72);
}

.article__corps { max-width: 720px; margin-inline: auto; }
.article__corps > h2 { margin-top: clamp(32px, 5vw, 48px); }
.article__corps > p {
  margin-top: 16px;
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.68; color: var(--ink-soft);
}
.article__corps > p a { color: var(--ink); font-weight: 600; }
.article__corps > p b { font-weight: 700; color: var(--ink); }
.liste { margin-top: 18px; display: grid; gap: 12px; list-style: none; }
.liste li {
  position: relative; padding-left: 26px;
  font-size: clamp(16px, 1.9vw, 17px); line-height: 1.6; color: var(--ink-soft);
}
.liste li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 12px; height: 4px; background: var(--yellow); border-radius: 2px;
}
.liste li b { color: var(--ink); }

.illus { margin-top: clamp(28px, 4.5vw, 40px); }
.illus img {
  display: block; width: 100%; max-width: 420px; height: auto;
  margin-inline: auto;
  border: 2px solid var(--ink); border-radius: var(--r-card);
  background: var(--card);
}
.illus figcaption {
  max-width: 480px; margin: 12px auto 0;
  font-size: 14px; line-height: 1.5; text-align: center; color: var(--ink-mute);
}
.illus--large { margin-top: clamp(22px, 3.4vw, 32px); }
.illus--large img { max-width: 560px; box-shadow: 8px 8px 0 var(--ink); }

.expert {
  display: block;
  margin-top: clamp(34px, 5.5vw, 52px);
  padding: clamp(22px, 3.4vw, 34px);
  border: 2px solid var(--ink); border-radius: var(--r-card);
}
.expert__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.expert .faq { max-width: none; }
.expert .faq__item { background: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   « Voir plus » — carnet « Les derniers projets »
   Un texte discret, pas un bouton : la charge visuelle doit rester sur les
   cartes, pas sur ce qui permet d'en voir davantage.
   -------------------------------------------------------------------------- */

.projets[data-paginate] > .projet[hidden] { display: none; }

.voirplus {
  display: flex; align-items: center; gap: 6px;
  width: fit-content;
  margin: clamp(28px, 4.5vw, 40px) auto 0;
  padding: 8px 6px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-mute);
  transition: color var(--dur-fast) var(--ease);
}
.voirplus:hover, .voirplus:focus-visible { color: var(--ink); }
/* display:flex est une règle d'auteur : sans ceci, elle l'emporterait sur le
   [hidden] du navigateur et le bouton resterait affiché une fois épuisé. */
.voirplus[hidden] { display: none; }
.voirplus__chevron {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}