/* julienjimenez.digital : feuille de style unique
   Direction artistique : agence digitale audacieuse en plein jour. Fond blanc, typographie géante variable (Anybody),
   blocs pastel, stickers cerclés de noir, bandeaux qui défilent. Lecture en Instrument Sans.

   Index des composants
   01 Tokens            02 Base et accessibilité      03 Mise en page (wrap, block, grille)
   04 Titres de section 05 Boutons, pilules, stickers  06 En-tête et menu
   07 Hero              08 Marquee                     09 Profil
   10 Canaux (bento)    11 Configurateur de mix        12 Passerelles (schéma)
   13 Méthode           14 Pièges (cartes retournables) 15 Parcours (frise)
   16 Chiffres          17 Recommandations             18 Magazine (cartes .post-card)
   19 FAQ (.faq-item)   20 Contact                     21 Pied de page et .network-links
   22 Retour en haut    23 Page 404
   24 Magazine et articles : .breadcrumb, .page-head, .mag-intro, .progress > .progress__bar, .article-head,
      .article-title, .article-lead, .article-meta, .article-cover, .article-layout, .toc (liens .is-active),
      .prose (h2 numérotés, h3, listes, .table-wrap > table, blockquote, figure), .callout--tip / --key / --warn
      (+ .callout__label), .approach (L'approche de Julien Jimenez), .checklist, .author-box, .related, .cta-band
   25 Animations et états JS (.js)  26 Responsive  27 Mouvement réduit */

/* 01 Tokens */
:root {
  --bg: #FFFFFF;
  --surface: #F7F3FF;
  --ink: #0F0F0F;
  --muted: #5E5A66;
  --line: #E6E0F2;
  --primary: #FF4F00;
  --secondary: #3A86FF;
  --accent: #C6F432;

  --primary-ink: #C43D00;
  --secondary-ink: #1F5FD6;
  --text-soft: #34313A;

  --lav: #DCD0FF;
  --sky: #C9DDFF;
  --lime: #C6F432;
  --lime-soft: #E3F98F;
  --peach: #FFD3BC;
  --orange-soft: #FFB892;

  --lav-pale: #F7F3FF;
  --sky-pale: #EDF4FF;
  --lime-pale: #F4FBDD;
  --peach-pale: #FFF1E9;

  --font-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-giant: clamp(4rem, 17vw, 16rem);
  --fs-h1: clamp(2.4rem, 5.6vw, 4.8rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --max: 1360px;
  --block-max: 1520px;
  --gutter: clamp(16px, 4vw, 64px);
  --edge: clamp(8px, 1.6vw, 24px);
  --gap: 24px;
  --space-section: clamp(56px, 8vw, 120px);

  --r-block: 36px;
  --r-card: 24px;
  --r-pill: 999px;
  --hard: 4px 4px 0 var(--ink);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);

  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C14 3 26 11 40 6.5S64 2.5 78 7.5 104 3 118 6' fill='none' stroke='%23FF4F00' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ast-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4.5v23M6 10.2l20 11.6M6 21.8l20-11.6' fill='none' stroke='%23FF4F00' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ast-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4.5v23M6 10.2l20 11.6M6 21.8l20-11.6' fill='none' stroke='%230F0F0F' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ast-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4.5v23M6 10.2l20 11.6M6 21.8l20-11.6' fill='none' stroke='%230F0F0F' stroke-width='7.5' stroke-linecap='round'/%3E%3Cpath d='M16 4.5v23M6 10.2l20 11.6M6 21.8l20-11.6' fill='none' stroke='%23C6F432' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3L13 4.6' fill='none' stroke='%230F0F0F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M2 6.3c3.4-.4 7.2-.5 11-.2M9.4 2.4c1.4 1.1 2.6 2.2 3.6 3.5-1 1.2-2.3 2.3-3.8 3.4' fill='none' stroke='%235E5A66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 02 Base et accessibilité */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
strong { font-weight: 700; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 300;
  padding: .7em 1.2em; border: 2px solid var(--ink); border-radius: var(--r-pill);
  background: var(--accent); color: var(--ink); font-weight: 700; text-decoration: none;
  translate: 0 -160%; transition: translate .25s var(--ease);
}
.skip-link:focus-visible { translate: 0 0; }
.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
.ico--ast { color: var(--primary); }

/* 03 Mise en page */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.block {
  position: relative;
  width: min(100% - 2 * var(--edge), var(--block-max));
  margin-inline: auto;
  padding-block: var(--space-section);
  border-radius: var(--r-block);
  background: var(--block-bg, var(--bg));
  overflow: clip;
}
.block + .block { margin-top: clamp(14px, 2vw, 24px); }
.block--lav { --block-bg: var(--lav-pale); }
.block--sky { --block-bg: var(--sky-pale); }
.block--lime { --block-bg: var(--lime-pale); }
.block--peach { --block-bg: var(--peach-pale); }
.block--line { --block-bg: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.block::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46%; aspect-ratio: 1; right: -12%; top: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob, rgba(255, 255, 255, .7)), transparent);
}
.block--lav::after { --blob: rgba(198, 244, 50, .16); }
.block--sky::after { --blob: rgba(255, 255, 255, .85); }
.block--lime::after { --blob: rgba(220, 208, 255, .5); }
.block--peach::after { --blob: rgba(198, 244, 50, .22); }
.block--line::after { --blob: rgba(220, 208, 255, .35); }
.block > * { position: relative; z-index: 1; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* 04 Titres de section */
.sec-head { margin-bottom: clamp(32px, 5vw, 64px); max-width: 860px; }
.sec-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); max-width: none; align-items: end; }
.sec-head--split > :first-child { grid-column: 1 / span 7; }
.sec-head--split > :last-child { grid-column: 8 / span 5; }
.sec-head--split .sec-title { margin-bottom: 0; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-label {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 20px; padding: .42em .95em .42em .7em;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--bg);
  font: 600 .8125rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}
.sec-num { font: 800 1rem/1 var(--font-display); font-stretch: 60%; letter-spacing: 0; color: var(--primary-ink); }
.sec-title { font-size: var(--fs-h2); font-stretch: 88%; margin: 0 0 18px; text-wrap: balance; }
.sec-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); margin: 0; max-width: 60ch; }
.sec-head--center .sec-lead { margin-inline: auto; }
.scribble {
  background: var(--scribble) no-repeat 0 100% / 100% .3em;
  padding-bottom: .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 05 Boutons, pilules, stickers */
.btn {
  --bs: 4px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .72em 1.35em;
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink);
  font: 600 1rem/1.1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--bs) var(--bs) 0 var(--ink);
  translate: var(--mx, 0) var(--my, 0);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), background-color .2s, translate .55s var(--spring);
}
.btn.is-magnet { transition: box-shadow .2s var(--ease), transform .2s var(--ease), background-color .2s, translate .12s linear; }
.btn:hover { --bs: 6px; transform: translate(-2px, -2px); }
.btn:active { --bs: 1px; transform: translate(3px, 3px); }
.btn .ico { width: 1.3em; height: 1.3em; transition: translate .3s var(--ease); }
.btn:hover .ico { translate: 4px 0; }
.btn--primary { background: var(--primary); }
.btn--primary:hover { background: #FF6A26; }
.btn--ghost { background: var(--bg); }
.btn--ghost:hover { background: var(--lime-soft); }
.btn--lg { min-height: 56px; padding: .9em 1.6em; font-size: 1.0625rem; }
.btn--sm { --bs: 3px; min-height: 44px; padding: .5em 1.05em; font-size: .9375rem; }
.btn--sm:hover { --bs: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .42em .9em; border: 2px solid var(--ink); border-radius: var(--r-pill);
  background: var(--bg); font: 600 .8125rem/1.15 var(--font-body);
}
.pill .ico { width: 1.15em; height: 1.15em; }
.pill--lime { background: var(--lime); }
.pill--blue { background: var(--secondary); }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink .ico { color: var(--lime); }

.sticker {
  display: inline-block; padding: .6em 1.1em;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--lime);
  font: 800 1rem/1 var(--font-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: var(--hard); rotate: -6deg; white-space: nowrap;
}
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1em .5em .6em;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--chip, var(--lav));
  font: 800 clamp(.95rem, 1.5vw, 1.35rem)/1 var(--font-display); font-stretch: 90%;
  box-shadow: var(--hard); white-space: nowrap; color: var(--ink);
}
.chip .ico { width: 1.6em; height: 1.6em; color: #fff; }
.chip--seo { --chip: var(--lav); }
.chip--sea { --chip: var(--sky); }
.chip--cnt { --chip: var(--lime); }
.chip--mail { --chip: var(--peach); }
.icon-sticker {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ic, var(--lav)); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  color: #fff; rotate: -6deg; transition: rotate .4s var(--spring);
}
.icon-sticker .ico { width: 32px; height: 32px; }
.text-link {
  display: inline-flex; align-items: center; gap: .35em;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding-bottom: 5px;
  background: var(--scribble) no-repeat 0 100% / 0% 7px, linear-gradient(var(--ink), var(--ink)) no-repeat 0 calc(100% - 2px) / 100% 2px;
  transition: background-size .45s var(--ease);
}
.text-link:hover, .text-link:focus-visible { background-size: 100% 7px, 0% 2px; }
.text-link .ico { width: 1.15em; height: 1.15em; }

.spin {
  position: relative; flex: none; width: 148px; aspect-ratio: 1; border-radius: 50%;
  background: var(--spin-bg, var(--bg)); border: 2px solid var(--ink); box-shadow: var(--hard);
}
.spin__rot, .spin__boost { position: absolute; inset: 0; }
.spin__rot { animation: spin 24s linear infinite; }
.spin__boost { animation: spin 5s linear infinite paused; }
.spin:hover .spin__boost, .photo:hover .spin__boost, .to-top:hover .spin__boost { animation-play-state: running; }
.spin__ring { width: 100%; height: 100%; overflow: visible; }
.spin__ring text, .to-top text {
  font: 800 10.5px var(--font-display); font-stretch: 85%; letter-spacing: .04em; text-transform: uppercase; fill: var(--ink);
}
.spin__core { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; translate: -50% -50%; }

/* 06 En-tête et menu */
.site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; padding-inline: 12px; pointer-events: none;
}
.header-pill {
  pointer-events: auto; position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 1260px); min-height: 64px; padding: 7px 7px 7px 22px;
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  transition: box-shadow .3s var(--ease);
}
.header-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.is-scrolled .header-pill { box-shadow: var(--hard); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; position: relative; z-index: 2; }
.brand__mark { font: 900 1.375rem/1 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; transition: font-stretch .45s var(--ease); }
.brand__slash { color: var(--primary); }
.brand:hover .brand__mark { font-stretch: 150%; }
.brand__label { font: 600 .8125rem/1.15 var(--font-body); color: var(--muted); padding-left: 12px; border-left: 2px solid var(--line); white-space: nowrap; }
.main-nav { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.main-nav__list { display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.main-nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-pill); color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .9375rem; transition: background-color .2s;
}
.main-nav__list a:hover, .main-nav__list a:focus-visible { background: var(--pastel, var(--lav)); }
.main-nav__n { display: none; }
.main-nav__end { display: flex; align-items: center; gap: 6px; }
.nav-mag {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9375rem;
  background: var(--scribble) no-repeat 14px calc(100% - 9px) / 0 6px; transition: background-size .4s var(--ease);
}
.nav-mag:hover, .nav-mag[aria-current] { background-size: calc(100% - 28px) 6px; }
.main-nav__mail { display: none; }
.menu-toggle {
  display: none; position: relative; z-index: 2;
  align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 18px;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--lime);
  font-weight: 700; font-size: .9375rem; cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 20px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: var(--ink); transition: translate .3s var(--ease), rotate .3s var(--ease); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { bottom: 0; }
.menu-open .menu-toggle__bars span:first-child { translate: 0 4.75px; rotate: 45deg; }
.menu-open .menu-toggle__bars span:last-child { translate: 0 -4.75px; rotate: -45deg; }

/* 07 Hero */
.hero { position: relative; padding: clamp(108px, 11vw, 150px) 0 clamp(36px, 5vw, 64px); overflow: clip; }
.hero__blobs {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 30% at 88% 14%, rgba(198, 244, 50, .26), transparent 70%),
    radial-gradient(34% 28% at 6% 52%, rgba(220, 208, 255, .55), transparent 70%),
    radial-gradient(30% 24% at 62% 86%, rgba(255, 211, 188, .4), transparent 70%);
}
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: clamp(14px, 2vw, 26px); }
.hero__meta .sec-num { font-size: 1.125rem; }
.hero__kicker { font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.hero__badge { margin-left: auto; rotate: 2deg; }
.megaword {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: min(calc((100vw - 2 * var(--gutter)) / 7.3), 186px);
  font-variation-settings: "wdth" 100;
  line-height: .8; white-space: nowrap; letter-spacing: 0;
  margin: 0 0 clamp(22px, 3.2vw, 44px); user-select: none;
}
.megaword.is-split { display: flex; justify-content: space-between; font-size: var(--mw-fs); font-variation-settings: "wdth" var(--mw-w, 100); }
.megaword__l { display: block; }
.megaword__l:nth-child(3n + 2) { color: var(--primary); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(22px, 3vw, 34px); align-items: end; }
.hero__title { grid-column: 1 / span 11; font-size: var(--fs-h1); font-stretch: 86%; line-height: 1; margin: 0; text-wrap: balance; }
.hero__lower { grid-column: 1 / span 7; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; max-width: 54ch; margin: 0 0 28px; color: var(--text-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.hero__aside { grid-column: 8 / span 5; justify-self: end; display: flex; align-items: center; gap: 22px; }
.hero__aside .spin { width: 150px; }
.hero__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 240px; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.hero__checks li { position: relative; padding-left: 28px; }
.hero__checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; background: var(--ast-lime) center / contain no-repeat; }

.hero-visual { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 6vw, 72px); }
.hero-visual__media { grid-column: 1 / span 8; margin: 0; aspect-ratio: 16 / 10; border: 2px solid var(--ink); border-radius: var(--r-block); overflow: hidden; background: #F3F2F0; }
.hero-visual__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-visual__panel {
  grid-column: 9 / span 4; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; border: 2px solid var(--ink); border-radius: var(--r-block);
  background-color: var(--lav-pale);
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 15, .16) 1.2px, transparent 1.7px);
  background-size: 18px 18px;
}
.panel-cap { position: relative; z-index: 1; margin: 0; max-width: 30ch; font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.panel-cap__label { display: block; margin-bottom: .45em; font: 800 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); }
.core { position: absolute; left: 50%; top: 42%; width: clamp(124px, 12vw, 172px); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.core__star { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--primary); filter: drop-shadow(4px 4px 0 var(--ink)); animation: spin 36s linear infinite; }
.core__star path { vector-effect: non-scaling-stroke; }
.core__txt { position: relative; font: 900 1.05rem/1 var(--font-display); font-stretch: 80%; text-transform: uppercase; text-align: center; max-width: 6.5ch; }
.hero-visual .chip {
  position: absolute; z-index: 3;
  left: var(--x); top: var(--y);
  rotate: var(--r, 0deg);
  translate: calc(var(--cx, 0px) * var(--p, 0)) calc(var(--cy, 0px) * var(--p, 0));
  will-change: translate;
}
.hero-visual .chip--seo { --x: 3%; --y: 7%; --r: -6deg; }
.hero-visual .chip--sea { --x: 52%; --y: 5%; --r: 7deg; }
.hero-visual .chip--cnt { --x: 5%; --y: 80%; --r: 5deg; }
.hero-visual .chip--mail { --x: 53%; --y: 82%; --r: -8deg; }

.manifesto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 8vw, 104px); align-items: start; }
.manifesto__big { grid-column: 1 / span 6; margin: 0; font: 800 clamp(1.8rem, 3.5vw, 3rem)/1.06 var(--font-display); font-stretch: 88%; text-wrap: balance; }
.manifesto__text { grid-column: 8 / span 5; }
.manifesto__text p:first-child { font-size: 1.125rem; font-weight: 500; }
.manifesto__text p:last-child { margin-bottom: 0; color: var(--text-soft); }

/* 08 Marquee */
.marquee {
  --speed: 38s;
  position: relative; overflow: hidden;
  margin-block: clamp(24px, 4vw, 44px);
  padding-block: 14px;
  border-block: 2px solid var(--ink);
  background: var(--mq-bg, var(--lime-pale));
}
.marquee--lime { --mq-bg: #EEF9C8; }
.marquee--lav { --mq-bg: var(--lav-pale); }
.marquee--sky { --mq-bg: var(--sky-pale); }
.marquee__track { display: flex; width: max-content; }
.is-marquee .marquee__track { animation: marquee var(--speed) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; list-style: none; margin: 0; padding: 0; }
.marquee__group li {
  display: flex; align-items: center; white-space: nowrap; padding-left: .55em;
  font: 900 clamp(1.4rem, 3vw, 2.6rem)/1.05 var(--font-display); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em;
}
.marquee__group li::after { content: ""; width: .62em; height: .62em; margin-left: .55em; background: var(--ast-orange) center / contain no-repeat; }
.marquee__toggle {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--bg);
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.marquee__toggle::before, .marquee__toggle::after { content: ""; position: absolute; top: 14px; width: 4px; height: 14px; border-radius: 2px; background: var(--ink); }
.marquee__toggle::before { left: 15px; }
.marquee__toggle::after { right: 15px; }
.marquee__toggle[aria-pressed="true"]::before { left: 16px; top: 13px; width: 0; height: 0; border-radius: 0; background: none; border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.marquee__toggle[aria-pressed="true"]::after { display: none; }
.marquee--footer { margin: 0; border-bottom: 0; --mq-bg: var(--bg); padding-block: 18px; }
.marquee--footer li { font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-stretch: 100%; }

/* 09 Profil */
.profil__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.profil__media { grid-column: 1 / span 5; position: sticky; top: 112px; padding: 28px 22px 10px 0; }
.profil__body { grid-column: 7 / span 6; }
.photo { position: relative; padding: 0 12px 12px 0; }
.photo::before {
  content: ""; position: absolute; inset: 12px 0 0 12px; border-radius: 32px;
  background: var(--lime); border: 2px solid var(--ink);
}
.photo__frame {
  position: relative; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 32px; overflow: hidden;
  background: #1b1430; rotate: -2.5deg; transition: rotate .6s var(--spring);
}
.photo:hover .photo__frame { rotate: 0deg; }
.photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.spin--photo { position: absolute; top: -30px; right: -20px; z-index: 2; width: 134px; --spin-bg: var(--primary); }
.spin--photo .spin__core { width: 34%; height: 34%; }
.photo__pill { position: absolute; left: -14px; bottom: 44px; z-index: 2; margin: 0; rotate: -4deg; box-shadow: 3px 3px 0 var(--ink); padding: .55em 1em; font-size: .875rem; }
.profil__text p { max-width: 64ch; margin-bottom: 1.1em; }
.spec { margin: 34px 0; padding: 0; border-top: 2px solid var(--ink); }
.spec__row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(15, 15, 15, .16); }
.spec dt { font: 800 .8125rem/1.5 var(--font-display); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.spec dd { margin: 0; font-weight: 500; }
.note-quote {
  position: relative; margin: 40px 0 0; padding: 30px 30px 24px;
  background: var(--lime); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); rotate: -1.4deg;
}
.note-quote::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: 96px; height: 28px; translate: -50% 0; rotate: 4deg;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(15, 15, 15, .22);
}
.note-quote blockquote { margin: 0; }
.note-quote p { margin: 0; font: 800 clamp(1.3rem, 2.1vw, 1.7rem)/1.18 var(--font-display); font-stretch: 88%; }
.note-quote figcaption { margin-top: 14px; font-weight: 600; font-size: .875rem; }

/* 10 Canaux */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--tile-bg, var(--lav-pale)); transition: transform .35s var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile:hover .icon-sticker { rotate: 6deg; }
.tile--seo { grid-column: 1 / span 7; grid-row: span 2; --tile-bg: var(--lav-pale); }
.tile--sea { grid-column: 8 / span 5; --tile-bg: var(--sky-pale); }
.tile--cnt { grid-column: 8 / span 5; --tile-bg: var(--lime-pale); }
.tile--mail { grid-column: span 4; --tile-bg: var(--peach-pale); }
.tile--land { grid-column: span 4; --tile-bg: #FFF7E8; }
.tile--measure { grid-column: span 4; --tile-bg: var(--sky-pale); }
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile__idx { font: 800 .8125rem/1 var(--font-display); font-stretch: 62%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile__title { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .55em; margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.3rem); }
.tile__role { font: 600 .875rem/1 var(--font-body); padding: .45em .8em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); letter-spacing: 0; }
.tile--seo .tile__title { font-size: clamp(3.4rem, 8vw, 7.4rem); font-stretch: 135%; line-height: .9; }
.tile--seo .tile__role { font-size: 1rem; }
.tile__dl { margin: 0; display: grid; gap: 14px; }
.tile__dl > div { padding-top: 12px; border-top: 1.5px solid rgba(15, 15, 15, .14); }
.tile__dl dt { margin-bottom: 4px; font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile__dl dd { margin: 0; }
.tile--seo .tile__dl dd { font-size: 1.125rem; }
.tile__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: auto 0 0; padding: 0; }
.tile__chips li { padding: .4em .85em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); font-weight: 600; font-size: .875rem; }
.tile__chips li:nth-child(odd) { background: var(--lime); }

/* 11 Configurateur de mix */
.mix__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.mix__controls { grid-column: 1 / span 5; }
.mix__result { grid-column: 7 / span 6; position: sticky; top: 104px; }
.pills { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
.pills legend { display: flex; align-items: center; gap: .6em; padding: 0; margin-bottom: 14px; font: 800 1.3rem/1.1 var(--font-display); font-stretch: 92%; }
.pills__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .9375rem; font-stretch: 80%; }
.pills__list { display: flex; flex-wrap: wrap; gap: 10px; }
.pills input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.pills label {
  display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: .5em 1.1em;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--bg);
  font-weight: 600; cursor: pointer; user-select: none; line-height: 1.2;
  transition: background-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pills label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); transition: background-color .2s; flex: none; }
.pills label:hover { background: var(--lime-pale); }
.pills input:checked + label { background: var(--lime); box-shadow: 3px 3px 0 var(--ink); transform: translate(-2px, -2px); }
.pills input:checked + label::before { background: var(--ink); }
.pills input:focus-visible + label { outline: 3px solid var(--secondary); outline-offset: 3px; }
.mix__warn { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; border: 1.5px dashed var(--ink); border-radius: 18px; background: var(--bg); font-size: .9375rem; line-height: 1.5; }
.mix__warn .ico { width: 30px; height: 30px; color: var(--sky); }
.mix__warn strong { display: block; }
.mix__screen { position: relative; padding: clamp(22px, 3vw, 38px); border: 2px solid var(--ink); border-radius: 30px; background: var(--bg); box-shadow: 8px 8px 0 var(--ink); }
.mix__label { display: flex; align-items: center; gap: .6em; margin: 0 0 12px; font: 800 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); }
.mix__label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(255, 79, 0, .18); animation: pulse 2s ease-in-out infinite; }
.mix__headline { margin: 0 0 24px; font: 800 clamp(1.3rem, 2.1vw, 1.8rem)/1.15 var(--font-display); font-stretch: 90%; text-wrap: balance; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 20px; background: var(--step-bg); }
.step--1 { --step-bg: var(--lav); rotate: -.6deg; }
.step--2 { --step-bg: var(--sky); rotate: .5deg; margin-left: 20px; }
.step--3 { --step-bg: var(--lime-soft); rotate: -.4deg; margin-left: 40px; }
.step__tag { grid-row: span 2; align-self: start; padding: .5em .75em; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 800 .75rem/1 var(--font-display); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.step__title { margin: 0; font-size: 1.2rem; font-stretch: 94%; line-height: 1.2; }
.step__text { margin: 0; font-size: .96875rem; line-height: 1.5; }
.mix__screen.is-swapping .step { animation: pop .55s var(--spring) both; }
.mix__screen.is-swapping .step--2 { animation-delay: .07s; }
.mix__screen.is-swapping .step--3 { animation-delay: .14s; }
.memo { margin-top: clamp(32px, 4vw, 52px); border: 2px solid var(--ink); border-radius: var(--r-card); background: var(--bg); overflow: hidden; }
.memo summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 22px; cursor: pointer; list-style: none; font: 800 1.125rem/1.2 var(--font-display); font-stretch: 92%; }
.memo summary::-webkit-details-marker { display: none; }
.memo__plus, .faq-item__plus { position: relative; flex: none; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); transition: rotate .35s var(--ease), background-color .3s; }
.memo__plus::before, .memo__plus::after, .faq-item__plus::before, .faq-item__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.memo__plus::after, .faq-item__plus::after { rotate: 90deg; }
.memo[open] .memo__plus, .faq-item[open] .faq-item__plus { rotate: 45deg; background: var(--lime); }
.memo .table-wrap { border-top: 2px solid var(--ink); }
.table-wrap { overflow-x: auto; }
.table, .prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.table th, .table td, .prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th, .prose thead th { background: var(--lav-pale); font: 800 .75rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.table tbody th { font-weight: 700; }
.table tbody tr:last-child > *, .prose tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:nth-child(even), .prose tbody tr:nth-child(even) { background: #FCFBFF; }

/* 12 Passerelles */
.pass__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; margin-bottom: clamp(36px, 5vw, 60px); }
.pass__head .sec-head { grid-column: 1 / span 6; margin-bottom: 0; }
.pass__fig { grid-column: 8 / span 5; position: relative; margin: 0; }
.pass__fig img { width: 100%; border: 2px solid var(--ink); border-radius: 28px; rotate: 1.6deg; box-shadow: 6px 6px 0 var(--ink); }
.pass__sticker { position: absolute; left: -16px; bottom: 22px; background: var(--peach); }
.diagram {
  position: relative; padding: clamp(18px, 3.4vw, 48px);
  border: 2px solid var(--ink); border-radius: 32px; background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 15, .13) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
}
.diagram__stage { position: relative; max-width: 1000px; margin-inline: auto; aspect-ratio: 1000 / 610; }
.diagram__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bridge { cursor: pointer; }
.bridge__hit { fill: none; stroke: transparent; stroke-width: 36; pointer-events: stroke; }
.bridge__line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; marker-end: url(#arrowhead); transition: stroke .25s, stroke-width .25s; }
.bridge.is-lit .bridge__line { stroke: var(--primary); stroke-width: 6; marker-end: url(#arrowhead-hot); }
.node {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; translate: -50% -50%;
  width: clamp(60px, 12.8%, 128px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--node, var(--lav)); border: 2px solid var(--ink); box-shadow: var(--hard);
  font: 900 clamp(.78rem, 1.8vw, 1.3rem)/1 var(--font-display); font-stretch: 82%; text-transform: uppercase;
  transition: transform .35s var(--spring);
}
.node--seo { --node: var(--lav); }
.node--sea { --node: var(--sky); }
.node--cnt { --node: var(--lime); }
.node--mail { --node: var(--peach); }
.node--disco { --node: var(--bg); width: clamp(54px, 9.4%, 94px); font-size: clamp(.62rem, 1.15vw, .9rem); }
.node.is-lit { transform: scale(1.08) rotate(-5deg); }
.badge {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; translate: -50% -50%;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--primary); color: var(--ink);
  font: 900 1.05rem/1 var(--font-display); cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .3s var(--spring), background-color .2s;
}
.badge::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.badge:hover, .badge.is-active { background: var(--lime); transform: scale(1.14); }
.bubble {
  position: absolute; z-index: 4; left: var(--bx, 50%); top: var(--by, 50%);
  width: min(330px, 76%); padding: 16px 18px;
  border: 2px solid var(--ink); border-radius: 20px; background: var(--bg); box-shadow: 5px 5px 0 var(--ink);
  translate: -50% calc(-100% - 26px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, translate .25s var(--ease), visibility 0s .2s;
}
.bubble.is-below { translate: -50% 26px; }
.bubble.is-on { opacity: 1; visibility: visible; transition: opacity .2s, translate .25s var(--ease); }
.bubble__title { margin: 0 0 6px; font: 800 1rem/1.2 var(--font-display); color: var(--primary-ink); }
.bubble__text { margin: 0; font-size: .9375rem; line-height: 1.45; }
.bridges { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bridge-item { position: relative; padding: 24px 18px 20px; border: 1.5px solid var(--ink); border-radius: 22px; background: var(--bg); transition: background-color .3s, transform .3s var(--ease), box-shadow .3s; }
.bridge-item.is-active { background: var(--lime); transform: translateY(-4px); box-shadow: 4px 4px 0 var(--ink); }
.bridge-item__n { position: absolute; top: -15px; left: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); border: 2px solid var(--ink); font: 900 .875rem/1 var(--font-display); }
.bridge-item__title { display: flex; align-items: center; gap: .35em; margin: 4px 0 8px; font-size: 1.125rem; font-stretch: 92%; }
.bridge-item__title .ico { width: 1.2em; height: 1.2em; color: var(--primary-ink); }
.bridge-item p { margin: 0; font-size: .9375rem; line-height: 1.5; }

/* 13 Méthode */
.methode { padding-block: var(--space-section); position: relative; }
.stairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.stair {
  display: grid; grid-template-columns: minmax(130px, .3fr) 1fr; gap: clamp(16px, 3vw, 44px); align-items: center;
  width: 76%; margin-left: calc(var(--i, 0) * 8%);
  padding: clamp(22px, 3vw, 38px) clamp(22px, 3.6vw, 48px);
  border: 2px solid var(--ink); border-radius: 32px; background: var(--stair-bg); box-shadow: 6px 6px 0 var(--ink);
}
.stair--1 { --i: 0; --stair-bg: var(--lav); }
.stair--2 { --i: 1; --stair-bg: var(--sky); }
.stair--3 { --i: 2; --stair-bg: var(--lime-soft); }
.stair--4 { --i: 3; --stair-bg: var(--peach); }
.stair__num { font: 900 clamp(4.2rem, 7vw, 7rem)/.82 var(--font-display); font-variation-settings: "wdth" var(--sw, 100); letter-spacing: -.02em; }
.stair__title { margin: 0 0 10px; font-size: clamp(1.45rem, 2.4vw, 2.1rem); font-stretch: 92%; }
.stair__body p { margin: 0 0 14px; max-width: 62ch; }
.stair__deliv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; font-weight: 600; margin: 0 !important; }
.stair__deliv span { flex: none; padding: .38em .75em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); font: 800 .75rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.values { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 96px); }
.values__title { grid-column: 1 / span 3; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-stretch: 90%; }
.values__list { grid-column: 4 / span 9; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 2px solid var(--ink); }
.values__list li { position: relative; padding: 18px 0 18px 34px; border-bottom: 1px solid rgba(15, 15, 15, .16); line-height: 1.5; }
.values__list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 20px; height: 20px; background: var(--ast-lime) center / contain no-repeat; }
.values__list strong { display: block; margin-bottom: 4px; font: 800 1.0625rem/1.2 var(--font-display); font-stretch: 92%; }
.big-quote { position: relative; max-width: 1000px; margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; }
.big-quote__star { width: 58px; height: 58px; margin: 0 auto 18px; animation: spin 18s linear infinite; }
.big-quote blockquote { margin: 0; }
.big-quote p { margin: 0; font: 800 clamp(1.65rem, 3.6vw, 3rem)/1.12 var(--font-display); font-stretch: 84%; text-wrap: balance; }
.big-quote figcaption { margin-top: 18px; font-weight: 600; color: var(--muted); }

/* 14 Pièges */
.traps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.trap { position: relative; perspective: 1600px; cursor: pointer; }
.trap__inner { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .9, .3, 1); }
.trap__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px;
  padding: 26px 26px 88px; border: 2px solid var(--ink); border-radius: var(--r-card); box-shadow: 6px 6px 0 var(--ink);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.trap__front { background: var(--face, var(--lav)); }
.trap__back { background: var(--bg); transform: rotateY(180deg); background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 15, .1) 1.2px, transparent 1.6px); background-size: 18px 18px; }
.trap.is-flipped .trap__inner { transform: rotateY(180deg); }
.trap__num { position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--ink); font: 900 1.15rem/1 var(--font-display); font-stretch: 70%; rotate: 8deg; }
.trap__tag { align-self: flex-start; padding: .45em .8em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); font: 800 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.trap__tag--ok { background: var(--lime); }
.trap__title { margin: 4px 0 0; padding-right: 60px; font-size: clamp(1.35rem, 2vw, 1.7rem); font-stretch: 90%; line-height: 1.08; }
.trap__face p { margin: 0; }
.trap__back p { font-size: 1.0625rem; font-weight: 500; line-height: 1.55; }
.trap__btn {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1.05em;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-weight: 600; font-size: .9375rem; cursor: pointer; transition: background-color .2s, color .2s;
}
.trap__btn:hover { background: var(--primary); color: var(--ink); }
.trap__btn .ico { width: 1.3em; height: 1.3em; transition: rotate .6s var(--ease); }
.trap.is-flipped .trap__btn { background: var(--bg); color: var(--ink); }
.trap.is-flipped .trap__btn .ico { rotate: 180deg; }
html:not(.js) .trap__inner { display: block; }
html:not(.js) .trap__back { transform: none; margin-top: 14px; padding-bottom: 26px; }
html:not(.js) .trap__front { padding-bottom: 26px; }
html:not(.js) .trap__btn { display: none; }

/* 15 Parcours */
.parcours__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.parcours__head .sec-head { margin-bottom: 0; }
.tl-controls { display: flex; gap: 12px; flex: none; }
.round-btn { width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--bg); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s; }
.round-btn:hover { background: var(--lime); }
.round-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.round-btn[disabled] { opacity: .4; cursor: default; }
.round-btn .ico { width: 26px; height: 26px; }
.ico--flip-x { scale: -1 1; }
.timeline {
  --tl-pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  margin-top: clamp(28px, 4vw, 48px); padding: 30px 0 36px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tl-pad);
  scrollbar-width: none; cursor: grab;
}
.timeline::-webkit-scrollbar { display: none; }
.timeline.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.timeline:focus-visible { outline-offset: -6px; }
.timeline__track { position: relative; display: flex; gap: 22px; width: max-content; margin: 0; padding: 0 var(--tl-pad); list-style: none; }
.timeline__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(15, 15, 15, .35); }
.t-card {
  position: relative; flex: 0 0 clamp(252px, 25vw, 318px); scroll-snap-align: start;
  padding: 22px 22px 24px; border: 2px solid var(--ink); border-radius: var(--r-card);
  background: var(--card, var(--lav)); box-shadow: 5px 5px 0 var(--ink); rotate: -1.6deg;
  transition: rotate .35s var(--spring), translate .35s var(--ease);
}
.t-card:nth-child(even) { rotate: 1.6deg; margin-top: 30px; }
.t-card:hover { rotate: 0deg; translate: 0 -4px; }
.t-card__year { display: block; margin-bottom: 14px; font: 900 clamp(2.2rem, 3.4vw, 3rem)/1 var(--font-display); font-variation-settings: "wdth" 78; white-space: nowrap; transition: font-variation-settings .45s var(--ease); }
.t-card:hover .t-card__year { font-variation-settings: "wdth" 118; }
.t-card__year--mark { display: flex; align-items: center; gap: .4em; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 100; }
.t-card:hover .t-card__year--mark { font-variation-settings: "wdth" 120; }
.t-card__year--mark .ico { width: 1.9em; height: 1.9em; }
.t-card__title { margin: 0 0 8px; font-size: 1.3rem; font-stretch: 94%; }
.t-card p { margin: 0; font-size: .96875rem; line-height: 1.5; }
.t-card--now { box-shadow: 5px 5px 0 var(--primary), 5px 5px 0 2px var(--ink); }
.t-card--mark { border-style: dashed; box-shadow: none; }
.tl-progress { height: 6px; border-radius: var(--r-pill); background: rgba(15, 15, 15, .1); overflow: hidden; }
.tl-progress span { display: block; height: 100%; background: var(--primary); transform-origin: 0 50%; scale: var(--tl, .25) 1; transition: scale .2s linear; }

/* 16 Chiffres */
.stats { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.stat { container-type: inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; padding: clamp(14px, 2vw, 26px) 0; border-bottom: 2px solid var(--ink); }
.stat__num {
  grid-column: 1 / span 7; grid-row: 1; margin: 0; white-space: nowrap;
  font: 900 min(10.4cqi, 9.6rem)/.86 var(--font-display); letter-spacing: -.02em;
  font-variation-settings: "wdth" var(--gw, 125);
  transition: font-variation-settings 1.5s cubic-bezier(.2, .8, .2, 1);
}
.stat__suf { color: var(--primary); }
.stat__label { grid-column: 8 / span 5; grid-row: 1; margin: 0; font-size: 1.0625rem; line-height: 1.45; max-width: 36ch; }
.stat__label strong { display: block; margin-bottom: 4px; font: 800 clamp(1.15rem, 1.7vw, 1.4rem)/1.15 var(--font-display); font-stretch: 92%; }
.stat:nth-child(even) .stat__num { grid-column: 6 / span 7; text-align: right; }
.stat:nth-child(even) .stat__label { grid-column: 1 / span 5; }
.stats__note { display: flex; align-items: flex-start; gap: 10px; max-width: 72ch; margin: 26px 0 0; color: var(--text-soft); font-size: .9375rem; }
.stats__note .ico { width: 20px; height: 20px; margin-top: .15em; }

/* 17 Recommandations */
.recos { position: relative; padding-block: var(--space-section); overflow: clip; }
.recos::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: 20%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 221, 255, .55), transparent);
}
.recos__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); align-items: start; }
.reco { position: relative; margin: 0; padding: clamp(26px, 3.2vw, 42px); border: 2px solid var(--ink); border-radius: 30px; background: var(--reco-bg); box-shadow: 8px 8px 0 var(--ink); }
.reco::before {
  content: "«"; position: absolute; top: -26px; right: 30px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; padding-bottom: 4px;
  background: var(--primary); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 900 2rem/1 var(--font-display); rotate: 10deg;
}
.reco--1 { grid-column: 1 / span 7; --reco-bg: var(--lav); rotate: -1.4deg; }
.reco--2 { grid-column: 8 / span 5; --reco-bg: var(--sky); rotate: 1.8deg; margin-top: 64px; }
.reco--3 { grid-column: 3 / span 8; --reco-bg: var(--lime-soft); rotate: -.8deg; }
.reco__pull { margin: 0 0 18px; font: 800 clamp(1.4rem, 2.4vw, 2.05rem)/1.12 var(--font-display); font-stretch: 86%; text-wrap: balance; }
.reco__text { margin: 0; }
.reco__text p { margin: 0; font-size: 1rem; line-height: 1.62; }
.reco__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1.5px solid rgba(15, 15, 15, .2); }
.reco__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--ink); font: 900 1rem/1 var(--font-display); font-stretch: 80%; }
.reco__who strong { display: block; font-size: 1.0625rem; line-height: 1.25; }
.reco__who span span { display: block; font-size: .875rem; line-height: 1.35; color: var(--text-soft); }
.recos__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: clamp(48px, 6vw, 72px) 0 0; text-align: center; }

/* 18 Magazine : cartes */
.mag__all { margin: 22px 0 0; }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.post-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--r-card); background: var(--card, var(--lav));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover, .post-card:focus-within { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--bg); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.post-card:hover .post-card__media img { scale: 1.05; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 22px 24px; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--text-soft); }
.post-card__meta > * + *::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 12px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.post-card__meta .cat + *::before { display: none; }
.cat { display: inline-block; padding: .38em .8em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font-weight: 700; font-size: .8125rem; line-height: 1.1; }
.cat--seo-sea { background: var(--sky); }
.cat--arbitrages { background: var(--peach); }
.cat--methode { background: var(--lime); }
.post-card .cat--seo-sea { background: var(--bg); }
.post-card__title { margin: 0; font-size: clamp(1.25rem, 1.75vw, 1.5rem); font-stretch: 92%; line-height: 1.14; text-wrap: balance; }
.post-card__excerpt { margin: 0; font-size: .96875rem; line-height: 1.55; color: var(--text-soft); }
.post-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5em; align-self: flex-start;
  padding-bottom: 6px; color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.3;
  background: var(--scribble) no-repeat 0 100% / 0% 7px; transition: background-size .5s var(--ease);
}
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__link .ico { width: 1.3em; height: 1.3em; transition: translate .35s var(--ease); }
.post-card:hover .post-card__link { background-size: 100% 7px; }
.post-card:hover .post-card__link .ico { translate: 6px 0; }

/* 19 FAQ */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.faq__intro { grid-column: 1 / span 4; position: sticky; top: 112px; }
.faq__intro .sec-head { margin-bottom: 22px; }
.faq__mail { margin: 0; }
.faq__sticker { margin-top: 30px; background: var(--peach); }
.faq__list { grid-column: 6 / span 7; display: grid; gap: 12px; }
.faq-item { border: 2px solid var(--ink); border-radius: 22px; background: var(--bg); transition: background-color .3s, box-shadow .3s var(--ease); }
.faq-item[open] { background: var(--lav-pale); box-shadow: 5px 5px 0 var(--ink); }
.faq-item summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 68px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover .faq-item__plus { background: var(--lime-soft); }
.faq-item__dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--dot, var(--lav)); border: 2px solid var(--ink); font: 900 .875rem/1 var(--font-display); font-stretch: 70%; }
.faq-item__q { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-stretch: 94%; line-height: 1.25; }
.faq-item__a { padding: 0 26px 24px 76px; }
.faq-item__a p { margin: 0; max-width: 64ch; }
.faq-item__a p + p { margin-top: .8em; }

/* 20 Contact */
.contact .wrap { container-type: inline-size; }
.contact .sec-head { margin-bottom: 10px; }
.mega-mail {
  display: block; width: fit-content; max-width: 100%; margin: 6px 0 clamp(34px, 4vw, 52px);
  font: 900 min(6.1cqi, 6rem)/1.02 var(--font-display); letter-spacing: -.01em; white-space: nowrap;
  font-variation-settings: "wdth" 88; color: var(--ink); text-decoration: none;
  padding-bottom: .12em; background: var(--scribble) no-repeat 0 100% / 0% .16em;
  transition: font-variation-settings .7s var(--ease), background-size .6s var(--ease);
}
.mega-mail span:last-child { color: var(--primary-ink); }
.mega-mail:hover, .mega-mail:focus-visible { font-variation-settings: "wdth" 100; background-size: 100% .16em; }
.contact__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.contact__text { grid-column: 1 / span 6; }
.contact__lead { margin: 0 0 22px; font-size: var(--fs-lead); line-height: 1.5; }
.ast-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ast-list li { position: relative; padding-left: 30px; }
.ast-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 17px; height: 17px; background: var(--ast-orange) center / contain no-repeat; }
.contact__side { grid-column: 7 / span 4; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; }
.copy-status {
  padding: .5em 1em; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--lime); box-shadow: 3px 3px 0 var(--ink);
  font: 800 .875rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  rotate: -6deg; opacity: 0; scale: .6; transition: opacity .2s, scale .35s var(--spring);
}
.copy-status:empty { padding: 0; border: 0; box-shadow: none; }
.copy-status.is-on { opacity: 1; scale: 1; }
.contact__facts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.contact__facts li { padding: 12px 0; border-bottom: 1px solid rgba(15, 15, 15, .16); }
.contact__facts strong { display: block; margin-bottom: 2px; font: 800 .75rem/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--primary-ink); }
.spin--contact { grid-column: 11 / span 2; justify-self: end; width: 140px; --spin-bg: var(--lime); rotate: 8deg; }

/* 21 Pied de page */
.site-footer { position: relative; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(48px, 6vw, 88px); border-top: 2px solid var(--ink); background: var(--bg); }
.footer-top { container-type: inline-size; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 2px solid var(--ink); }
.footer-kicker { display: flex; align-items: center; gap: .6em; margin: 0 0 14px; font-weight: 600; }
.footer-kicker .ico { width: 1.1em; height: 1.1em; }
.footer-mail {
  display: block; width: fit-content; max-width: 100%;
  font: 900 min(5.7cqi, 5.2rem)/1.04 var(--font-display); letter-spacing: -.01em; white-space: nowrap;
  font-variation-settings: "wdth" 92; color: var(--ink); text-decoration: none;
  transition: font-variation-settings .6s var(--ease), color .3s;
}
.footer-mail:hover, .footer-mail:focus-visible { font-variation-settings: "wdth" 100; color: var(--primary-ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-block: clamp(36px, 5vw, 60px); }
.brand--footer { margin-bottom: 16px; }
.footer-col--about p { max-width: 42ch; color: var(--text-soft); font-size: .9375rem; }
.footer-linkedin a { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; }
.footer-title { margin: 0 0 12px; font: 800 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); }
.footer-links, .network-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-links a, .network-links a {
  display: inline-block; padding: 7px 0 9px; color: var(--ink); text-decoration: none; font-weight: 500;
  background: var(--scribble) no-repeat 0 calc(100% - 3px) / 0% 6px; transition: background-size .4s var(--ease);
}
.footer-links a:hover, .network-links a:hover, .footer-links a:focus-visible, .network-links a:focus-visible { background-size: 100% 6px; }
.network-links a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--ink); vertical-align: 1px; }
.network-links li:nth-child(2) a::before { background: var(--sky); }
.network-links li:nth-child(3) a::before { background: var(--peach); }
.network-links li:nth-child(4) a::before { background: var(--lav); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 22px 0 28px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.footer-legal p { margin: 0; max-width: 92ch; }
.footer-copy { font-weight: 700; color: var(--ink); }

/* 22 Retour en haut */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink);
  opacity: 0; visibility: hidden; translate: 0 18px;
  transition: opacity .3s, translate .4s var(--spring), visibility 0s .3s;
}
.to-top.is-visible, html:not(.js) .to-top { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s, translate .4s var(--spring); }
.to-top .spin__rot { animation-duration: 16s; }
.to-top .spin__ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.to-top__arrow { width: 26px; height: 26px; position: relative; }
.to-top:hover { background: var(--primary); }

/* 23 Page 404 */
.nf { position: relative; padding: clamp(120px, 13vw, 168px) 0 var(--space-section); overflow: clip; }
.nf__wrap { text-align: center; }
.nf__code { position: relative; display: flex; align-items: center; justify-content: center; gap: .06em; margin: 18px auto 30px; font: 900 clamp(7rem, 24vw, 19rem)/.8 var(--font-display); }
.nf__digit { font-variation-settings: "wdth" var(--sw, 100); }
.nf__zero { width: .76em; height: .76em; border-radius: 50%; display: grid; place-items: center; background: var(--primary); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.nf__zero .ico { width: 54%; height: 54%; color: #fff; }
.nf__chip { position: absolute; font-size: clamp(.85rem, 1.6vw, 1.25rem); }
.nf__chip--1 { left: 6%; top: 4%; rotate: -8deg; }
.nf__chip--2 { right: 6%; bottom: 0; rotate: 6deg; }
.nf__title { max-width: 18ch; margin: 0 auto 18px; font-size: var(--fs-h1); font-stretch: 86%; text-wrap: balance; }
.nf__text { max-width: 58ch; margin: 0 auto 44px; font-size: var(--fs-lead); color: var(--text-soft); }
.nf__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.nf-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 2px solid var(--ink); border-radius: var(--r-card); background: var(--card); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.nf-card:hover, .nf-card:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.nf-card:hover .icon-sticker { rotate: 8deg; }
.nf-card strong { margin-top: 6px; font: 800 1.45rem/1.1 var(--font-display); font-stretch: 92%; }
.nf-card span:last-child { color: var(--text-soft); line-height: 1.5; }
.nf__mail { margin: 36px 0 0; }

/* 24 Magazine et articles */
.page-head { position: relative; padding: clamp(112px, 12vw, 160px) 0 clamp(36px, 5vw, 64px); overflow: clip; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .875rem; font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: ""; width: 16px; height: 12px; background: var(--chev) center / contain no-repeat; }
.breadcrumb a { color: var(--ink); text-decoration: none; padding-block: 6px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 calc(100% - 3px) / 100% 1.5px; }
.breadcrumb a:hover { background-image: var(--scribble); background-size: 100% 6px; }
.breadcrumb [aria-current] { color: var(--muted); }
.page-head__title { max-width: 20ch; margin: 0 0 22px; font-size: var(--fs-h1); font-stretch: 86%; line-height: 1; text-wrap: balance; }
.page-head__lead { max-width: 62ch; margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); }
.mag-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.mag-intro__lead { grid-column: 1 / span 5; margin: 0; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--font-display); font-stretch: 88%; }
.mag-intro__text { grid-column: 7 / span 6; }
.mag-intro__text p { color: var(--text-soft); }
.post-grid--mag { margin-top: clamp(36px, 5vw, 60px); }

.progress { position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 6px; pointer-events: none; }
.progress__bar { height: 100%; background: var(--primary); transform-origin: 0 50%; scale: var(--progress, 0) 1; border-bottom: 2px solid var(--ink); }
.article-head { position: relative; padding: clamp(112px, 12vw, 156px) 0 clamp(28px, 4vw, 44px); overflow: clip; }
.article-head__inner { max-width: 1000px; }
.article-head .cat { margin-bottom: 18px; }
.article-title { margin: 0 0 22px; font-size: clamp(2.1rem, 4.8vw, 4.2rem); font-stretch: 86%; line-height: 1.03; text-wrap: balance; }
.article-lead { max-width: 64ch; margin: 0 0 28px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--text-soft); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; font-size: .9375rem; font-weight: 600; }
.article-meta__author { display: inline-flex; align-items: center; gap: 10px; }
.article-meta__author img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.article-meta > * + *::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 18px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.article-cover { margin: 0; }
.article-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border: 2px solid var(--ink); border-radius: 32px; }
.article-cover figcaption { margin-top: 10px; font-size: .8125rem; color: var(--muted); }
.article-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-block: clamp(40px, 6vw, 80px); }
.toc { grid-column: 1 / span 3; position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; padding: 20px 16px; border: 2px solid var(--ink); border-radius: 22px; background: var(--lav-pale); }
.toc__title { margin: 0 0 12px 8px; font: 800 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 8px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .90625rem; line-height: 1.35; font-weight: 500; transition: background-color .2s; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); padding-top: 2px; font: 800 .8125rem/1 var(--font-display); font-stretch: 70%; color: var(--muted); }
.toc a:hover { background: var(--bg); }
.toc a.is-active { background: var(--lime); font-weight: 700; }
.toc a.is-active::before { color: var(--ink); }
.prose { grid-column: 5 / span 8; max-width: 740px; font-size: 1.125rem; line-height: 1.72; counter-reset: h2; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { position: relative; margin: 2.3em 0 .7em; padding-top: .9em; border-top: 2px solid var(--ink); font-size: clamp(1.7rem, 3vw, 2.4rem); font-stretch: 88%; line-height: 1.08; scroll-margin-top: 110px; text-wrap: balance; }
.prose h2::before { counter-increment: h2; content: "(" counter(h2, decimal-leading-zero) ")"; display: block; margin-bottom: .55em; font: 800 .875rem/1 var(--font-display); font-stretch: 60%; color: var(--primary-ink); }
.prose h3 { margin: 1.8em 0 .5em; font-size: clamp(1.25rem, 2vw, 1.5rem); font-stretch: 94%; line-height: 1.2; scroll-margin-top: 110px; }
.prose ul, .prose ol { margin: 0 0 1.35em; padding: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 30px; margin-bottom: .55em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; background: var(--ast-orange) center / contain no-repeat; }
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; position: relative; padding-left: 44px; margin-bottom: .65em; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: .15em; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); border: 1.5px solid var(--ink); font: 800 .8125rem/1 var(--font-display); }
.prose a { color: var(--secondary-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); text-decoration-color: var(--primary); }
.prose blockquote { margin: 1.9em 0; padding: 26px 30px; border: 2px solid var(--ink); border-radius: 24px; background: var(--lime-soft); box-shadow: 5px 5px 0 var(--ink); rotate: -.5deg; }
.prose blockquote p { margin: 0; font: 700 1.3rem/1.35 var(--font-display); font-stretch: 92%; }
.prose blockquote footer, .prose blockquote cite { display: block; margin-top: 12px; font: 600 .875rem/1.4 var(--font-body); font-style: normal; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border: 2px solid var(--ink); border-radius: 24px; }
.prose figcaption { margin-top: 8px; font-size: .875rem; color: var(--muted); }
.prose .table-wrap { margin: 1.9em 0; border: 2px solid var(--ink); border-radius: 20px; background: var(--bg); }
.prose table { font-size: .96875rem; }
.prose hr { margin: 2.5em 0; border: 0; border-top: 2px dashed var(--line); }
.callout { position: relative; margin: 1.9em 0; padding: 22px 26px; border: 2px solid var(--ink); border-radius: 22px; background: var(--callout-bg, var(--sky-pale)); font-size: 1.0625rem; }
.callout__label { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 12px; padding: .45em .85em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--bg); font: 800 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.callout__label .ico { width: 1.4em; height: 1.4em; }
.callout > :last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--tip { --callout-bg: var(--sky-pale); }
.callout--key { --callout-bg: var(--lime-pale); }
.callout--key .callout__label { background: var(--lime); }
.callout--warn { --callout-bg: var(--peach-pale); }
.callout--warn .callout__label { background: var(--primary); }
.approach { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; margin: 2.3em 0; padding: clamp(24px, 3vw, 36px); border: 2px solid var(--ink); border-radius: 28px; background: var(--lav-pale); box-shadow: 8px 8px 0 var(--primary), 8px 8px 0 2px var(--ink); }
.approach__photo { width: 92px; height: 92px; border: 2px solid var(--ink); border-radius: 24px; object-fit: cover; rotate: -4deg; box-shadow: 4px 4px 0 var(--lime); }
.approach__label { margin: 0 0 6px; font: 800 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); }
.prose .approach__title, .approach__title { margin: 0 0 10px; padding: 0; border: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-stretch: 90%; }
.prose .approach__title::before { display: none; }
.approach p { margin: 0 0 .8em; }
.approach > div > :last-child { margin-bottom: 0; }
.prose .checklist { margin: 1.5em 0; }
.prose .checklist > li { padding: 13px 16px 13px 54px; margin-bottom: 10px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--bg); }
.prose .checklist > li::before { left: 16px; top: 14px; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 8px; background: var(--lime) var(--check) center / 15px no-repeat; }
.prose .faq-item__q { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.prose .faq-item { margin-bottom: 12px; }
.prose .faq-item__a { font-size: 1.0625rem; }
.author-box { display: grid; grid-template-columns: 124px 1fr; gap: 26px; align-items: start; margin: 3em 0 0; padding: clamp(24px, 3vw, 34px); border: 2px solid var(--ink); border-radius: 28px; background: var(--lime-pale); }
.author-box__photo { width: 124px; height: 124px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; box-shadow: 4px 4px 0 var(--ink); }
.author-box__label { margin: 0 0 4px; font: 800 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); }
.prose .author-box__name, .author-box__name { margin: 0 0 10px; padding: 0; border: 0; font-size: 1.55rem; font-stretch: 92%; }
.prose .author-box__name::before { display: none; }
.author-box p { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; }
.author-box__links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.prose .author-box__links a { color: var(--ink); text-decoration: none; }
.related { padding-block: var(--space-section); }
.related .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.cta-band__title { grid-column: 1 / span 7; margin: 0; font-size: var(--fs-h2); font-stretch: 88%; }
.cta-band__side { grid-column: 9 / span 4; }
.cta-band__side p { color: var(--text-soft); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 22px 0 0; }

/* 24 bis Lecture longue : compléments (index du magazine, en-tête d'article, citation, FAQ dans la prose) */
.page-head__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.page-head__main { min-width: 0; }
.spin--mag { width: 150px; margin: 0 0 6px; --spin-bg: var(--peach); rotate: -6deg; }
.mag-intro__side { grid-column: 1 / span 5; position: sticky; top: 112px; }
.mag-intro__side .mag-intro__lead { margin: 0; }
.mag-intro__fig { position: relative; margin: 34px 12px 0 0; }
.mag-intro__fig img { width: 100%; border: 2px solid var(--ink); border-radius: 28px; rotate: -1.4deg; box-shadow: 6px 6px 0 var(--ink); }
.mag-intro__sticker { position: absolute; right: -12px; bottom: 26px; background: var(--peach); rotate: 6deg; }
.mag-intro__text .mag-intro__kicker { margin: 1.5em 0 .6em; color: var(--ink); font-weight: 700; }
.mag-intro__text .ast-list { color: var(--text-soft); }
.article-head .wrap { position: relative; z-index: 1; }
.article-head__inner { max-width: min(1000px, calc(100% - 190px)); }
.spin--article { position: absolute; z-index: 0; right: max(var(--gutter), calc((100% - var(--max)) / 2)); top: clamp(132px, 12vw, 172px); width: 136px; --spin-bg: var(--lime); rotate: 8deg; }
.article-meta__author a { color: inherit; text-decoration: none; background: var(--scribble) no-repeat 0 100% / 0 5px; transition: background-size .4s var(--ease); }
.article-meta__author a:hover, .article-meta__author a:focus-visible { background-size: 100% 5px; }
.prose .faq-item__a p { margin: 0; }
.prose .faq-item__a p + p { margin-top: .8em; }
.prose .quote { margin: 2.1em 0; }
.prose .quote blockquote { margin: 0; }
.prose .quote figcaption { margin: 16px 0 0 30px; font-weight: 700; font-size: .9375rem; color: var(--ink); }
.prose .quote figcaption::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 10px; background: var(--primary); vertical-align: middle; }
.prose .table-wrap + p { margin-top: 1.4em; }
.related .post-card__media { aspect-ratio: 16 / 9; }

/* 25 Animations et états JS */
@keyframes spin { to { rotate: 360deg; } }
@keyframes marquee { to { translate: -50% 0; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 79, 0, 0); } }
@keyframes pop { from { opacity: 0; translate: 0 14px; scale: .96; } }
.js [data-reveal] { opacity: 0; translate: 0 30px; transition: opacity .85s var(--ease), translate .85s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.js .block[data-clip] { clip-path: inset(7% 6% round var(--r-block)); transition: clip-path 1.15s var(--ease); }
.js .block[data-clip].is-in { clip-path: inset(0 0 round var(--r-block)); }
.js .block[data-clip].is-done { clip-path: none; }
.js .scribble { background-size: 0% .3em; transition: background-size 1.1s var(--ease) .35s; }
.js .is-in .scribble, .js .is-ready .scribble { background-size: 100% .3em; }
.js .stat:not(.is-in) .stat__num { --gw: 50; }
.js .diagram:not(.is-drawn) .bridge__line { marker-end: none; }
.trap__inner, .t-card, .post-card { will-change: auto; }

/* 26 Responsive */
@media (max-width: 1240px) {
  .main-nav__list a { padding: 0 11px; }
  .brand__label { display: none; }
}
@media (max-width: 1100px) {
  .spin--article { display: none; }
  .article-head__inner { max-width: 1000px; }
  .header-pill { width: auto; min-width: min(100%, 360px); justify-content: space-between; padding: 6px 6px 6px 20px; }
  .brand__label { display: inline; }
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 108px max(24px, 6vw) 32px; overflow-y: auto;
    background: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 15, .09) 1.2px, transparent 1.7px);
    background-size: 22px 22px;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
  }
  .menu-open .main-nav { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .main-nav__list { flex-direction: column; margin: 0; gap: 0; }
  .main-nav__list a {
    width: 100%; min-height: 0; padding: .16em 0; border-radius: 0; border-bottom: 2px solid var(--line);
    font: 900 clamp(2.5rem, 10.5vw, 4.6rem)/1.02 var(--font-display); font-stretch: 82%;
    transition: font-stretch .45s var(--ease), color .2s;
  }
  .main-nav__list a:hover, .main-nav__list a:focus-visible { background: none; font-stretch: 122%; color: var(--primary-ink); }
  .main-nav__n { display: inline-block; align-self: flex-start; margin: .5em .7em 0 0; font: 700 .875rem/1 var(--font-body); color: var(--muted); }
  .main-nav__end { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
  .nav-mag { padding: 0; font: 900 1.9rem/1 var(--font-display); font-stretch: 100%; background-position: 0 calc(100% - 4px); }
  .nav-mag:hover, .nav-mag[aria-current] { background-size: 100% 6px; }
  .main-nav__mail { display: block; margin: auto 0 0; padding-top: 30px; font-weight: 600; }
  .main-nav__mail a { color: var(--ink); }
  .menu-open, .menu-open body { overflow: hidden; }
}
@media (max-width: 1024px) {
  :root { --gap: 20px; }
  .sec-head--split > :first-child, .sec-head--split > :last-child { grid-column: 1 / -1; }
  .hero__title { grid-column: 1 / -1; }
  .hero__lower { grid-column: 1 / -1; }
  .hero__aside { grid-column: 1 / -1; justify-self: start; }
  .hero-visual__media { grid-column: 1 / span 7; }
  .hero-visual__panel { grid-column: 8 / span 5; }
  .manifesto__big, .manifesto__text { grid-column: 1 / -1; }
  .profil__media { grid-column: 1 / -1; position: relative; top: 0; max-width: 520px; width: 100%; margin-inline: auto; }
  .profil__body { grid-column: 1 / -1; margin-top: 24px; }
  .tile--seo { grid-column: 1 / -1; grid-row: auto; }
  .tile--sea, .tile--cnt { grid-column: span 6; }
  .tile--mail, .tile--land, .tile--measure { grid-column: span 6; }
  .tile--measure { grid-column: 1 / -1; }
  .mix__controls, .mix__result { grid-column: 1 / -1; }
  .mix__result { position: relative; top: 0; }
  .pass__head .sec-head, .pass__fig { grid-column: 1 / -1; }
  .pass__fig { max-width: 560px; }
  .bridges { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .stair { width: 88%; margin-left: calc(var(--i, 0) * 4%); }
  .values__title, .values__list { grid-column: 1 / -1; }
  .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reco--1, .reco--2, .reco--3 { grid-column: 1 / -1; margin-top: 0; }
  .reco--2 { margin-left: 8%; }
  .reco--3 { margin-right: 6%; }
  .faq__intro { grid-column: 1 / -1; position: relative; top: 0; }
  .faq__list { grid-column: 1 / -1; }
  .faq__sticker { display: none; }
  .contact__text { grid-column: 1 / -1; }
  .contact__side { grid-column: 1 / span 8; }
  .spin--contact { grid-column: 10 / span 3; align-self: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { grid-column: 1 / -1; position: relative; top: 0; width: 100%; max-width: 740px; max-height: none; margin-inline: auto; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .prose { grid-column: 1 / -1; margin-inline: auto; }
  .mag-intro__lead, .mag-intro__text, .mag-intro__side { grid-column: 1 / -1; }
  .mag-intro__side { position: relative; top: 0; }
  .mag-intro__fig { max-width: 560px; }
  .mag-intro__text { margin-top: 12px; }
  .cta-band__title, .cta-band__side { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .post-card__media { aspect-ratio: auto; border-bottom: 0; border-right: 2px solid var(--ink); }
  .related .post-grid { grid-template-columns: 1fr; }
  .nf__links { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --r-block: 26px; --r-card: 20px; }
  body { font-size: 1rem; }
  .sec-label { font-size: .75rem; }
  .hero__meta { gap: 10px 12px; }
  .hero__badge { margin-left: 0; }
  .hero__kicker { font-size: .75rem; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__aside { gap: 16px; }
  .hero__aside .spin { width: 116px; }
  .hero-visual { grid-template-columns: 1fr; gap: 16px; }
  .hero-visual__media, .hero-visual__panel { grid-column: 1 / -1; }
  .hero-visual__media { aspect-ratio: 4 / 3; }
  .hero-visual__panel { min-height: 250px; padding: 20px; }
  .core { top: 40%; width: 118px; }
  .hero-visual .chip { font-size: .9rem; }
  .hero-visual .chip--seo { --x: 3%; --y: 3%; }
  .hero-visual .chip--sea { --x: 56%; --y: 2%; }
  .hero-visual .chip--cnt { --x: 4%; --y: 46%; }
  .hero-visual .chip--mail { --x: 58%; --y: 48%; }
  .marquee { padding-block: 10px; }
  .marquee__toggle { width: 40px; height: 40px; right: 6px; }
  .marquee__toggle::before { left: 13px; top: 12px; }
  .marquee__toggle::after { right: 13px; top: 12px; }
  .marquee__toggle[aria-pressed="true"]::before { left: 14px; top: 11px; }
  .profil__media { padding: 26px 14px 6px 0; }
  .spin--photo { width: 104px; right: -6px; top: -22px; }
  .photo__pill { left: -4px; font-size: .8125rem; }
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
  .bento { gap: 14px; }
  .tile--sea, .tile--cnt, .tile--mail, .tile--land, .tile--measure { grid-column: 1 / -1; }
  .step--2 { margin-left: 10px; }
  .step--3 { margin-left: 20px; }
  .step { grid-template-columns: 1fr; padding: 16px; }
  .step__tag { grid-row: auto; justify-self: start; }
  .mix__screen { box-shadow: 5px 5px 0 var(--ink); }
  .pills label { min-height: 44px; padding: .45em .95em; font-size: .9375rem; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { padding: 3px 0; border: 0; }
  .table--stack tbody th { font: 800 1.05rem/1.3 var(--font-display); margin-bottom: 4px; }
  .table--stack td::before { content: attr(data-label) " : "; font-weight: 700; color: var(--muted); }
  .diagram { padding: 14px 10px; border-radius: 24px; }
  .bridge__line { stroke-width: 7; }
  .bridge.is-lit .bridge__line { stroke-width: 9; }
  .badge { width: 32px; height: 32px; font-size: .875rem; }
  .badge::after { inset: -8px; }
  .bubble, .bubble.is-below { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 16px 6px 4px; opacity: 1; visibility: visible; box-shadow: 4px 4px 0 var(--ink); }
  .bridges { grid-template-columns: 1fr; }
  .stair { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 6px; box-shadow: 5px 5px 0 var(--ink); }
  .stair__num { font-size: 4.4rem; }
  .values__list { grid-template-columns: 1fr; }
  .traps { grid-template-columns: 1fr; gap: 22px; }
  .parcours__head { flex-direction: column; align-items: flex-start; }
  .tl-controls { align-self: flex-end; }
  .round-btn { width: 50px; height: 50px; }
  .t-card { flex-basis: 78vw; max-width: 300px; }
  .stat { grid-template-columns: 1fr; gap: 10px; }
  .stat__num, .stat:nth-child(even) .stat__num { grid-column: 1; grid-row: auto; text-align: left; font-size: min(18cqi, 6rem); }
  .stat__label, .stat:nth-child(even) .stat__label { grid-column: 1; grid-row: auto; }
  .reco { box-shadow: 5px 5px 0 var(--ink); }
  .reco--2 { margin-left: 0; }
  .reco--3 { margin-right: 0; }
  .reco::before { right: 20px; }
  .faq-item summary { gap: 12px; padding: 12px 14px; }
  .faq-item__dot { width: 36px; height: 36px; }
  .faq-item__plus { width: 30px; height: 30px; }
  .faq-item__a { padding: 0 18px 20px 18px; }
  .mega-mail { white-space: normal; font-size: min(10.2cqi, 4.2rem); }
  .mega-mail span { display: block; }
  .contact__side { grid-column: 1 / -1; }
  .spin--contact { grid-column: 1 / -1; justify-self: end; width: 112px; margin-top: -10px; }
  .footer-mail { white-space: normal; font-size: min(9.4cqi, 3.6rem); }
  .footer-mail span { display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-legal { flex-direction: column; }
  .to-top { width: 64px; height: 64px; right: 12px; bottom: 12px; }
  .post-card { display: flex; }
  .post-card__media { aspect-ratio: 3 / 2; border-right: 0; border-bottom: 2px solid var(--ink); }
  .nf__chip { display: none; }
  .article-cover img { aspect-ratio: 3 / 2; border-radius: 22px; }
  .approach, .author-box { grid-template-columns: 1fr; }
  .toc ol { grid-template-columns: 1fr; }
  .article-meta__author { flex-basis: 100%; }
  .article-meta__author + *::before { display: none; }
  .post-card__meta::after { content: ""; order: 1; flex-basis: 100%; height: 0; margin-top: -6px; }
  .post-card__meta > :not(.cat) { order: 2; }
  .post-card__meta time::before { display: none; }
  .spin--mag { display: none; }
  .mag-intro__fig { margin-right: 6px; }
  .mag-intro__sticker { right: -4px; bottom: 18px; }
  .cta-band__actions .btn { flex: 1 1 auto; }
  .callout { padding: 18px 18px; }
  .prose { font-size: 1.0625rem; }
  .prose blockquote { padding: 20px; }
}
@media (max-width: 420px) {
  .header-pill { padding-left: 14px; gap: 6px; }
  .brand__label { display: none; }
  .hero__checks { font-size: .875rem; }
  .hero__aside .spin { width: 100px; }
  .chip { padding: .45em .8em .45em .5em; }
  .sticker { font-size: .875rem; }
}

/* 27 Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .spin__rot, .spin__boost, .core__star, .big-quote__star, .marquee__track { animation: none !important; }
  .js [data-reveal] { opacity: 1; translate: none; }
  .js .block[data-clip] { clip-path: none; }
  .js .scribble { background-size: 100% .3em; }
  .js .stat:not(.is-in) .stat__num { --gw: 125; }
  .js .diagram:not(.is-drawn) .bridge__line { marker-end: url(#arrowhead); }
  .hero-visual .chip { translate: none; }
}