/* Inter (Google Fonts) supprimée : Neulis Sans est la police de texte,
   le repli se fait sur la pile système — zéro requête tierce. */
/* ==========================================================
   1. FONTES
   ========================================================== */
/* Polices servies par Adobe Fonts (kit tnz5euc) — la licence Adobe
   impose leur CDN, pas d'auto-hébergement. Familles du kit :
   "neulis-sans" 400 / 400i / 700 / 700i / 800
   "neulis-cursive" 400 / 700 / 800 (pas d'italique : jamais en titre)
   Graisse maximale : 800 (ExtraBold) — ne pas déclarer 900. */

/* ==========================================================
   2. VARIABLES
   ========================================================== */
:root {
  --pink: #FF38A3;
  --ink: #14161A;
  --line: #171A20;          /* bordures boutons / ombres */
  --yellow: #FFF062;        /* surlignage gradient */
  --mark: #FFF44F;          /* surlignage <mark> témoignages */
  --red: #FF6269;
  --teal: #2DB9B6;
  --cream: #FCF8F4;         /* fond cartes (haut du gradient) */
  --cream-2: #FFFDFA;       /* fond cartes (bas du gradient) */
  --card-border: #EFE6D9;
  --card-border-2: #F2EBE5;
  --grey: #383838;
  --bg-page: #FEFDF9;       /* fond UNIQUE sur toute la page (v1.4) */
  --yellow-deep: #FFE500;   /* jaune tracés sur fond clair */
  --muted: #6E7076;         /* sous-textes gris (canevas BFM) */
  --swirl-clair: #F2F4FA;  /* bleu clair validé (crème chaud #F8F0E4 testé et rejeté) */
  --blue: #7184F7;          /* encre déco froide : flèches, pointeurs, petits gestes */
  --swirl-mask: url("data:image/svg+xml,%3Csvg%20width%3D%224997%22%20height%3D%221809%22%20viewBox%3D%220%200%204997%201809%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M110.017%201498.14C479.51%201718.21%20949.884%201760.19%201352.41%201608.97C1755.13%201457.95%202081.64%201116.71%202215.16%20708.018C2248.19%20606.94%202312.73%20391.196%202168.52%20208.21C2122.02%20149.21%201928.02%2015.2109%201738.52%20218.21C1620.03%20345.143%201612.02%20522.711%201654.52%20632.711C1727.54%20821.711%201865.99%20960.001%202056.52%201075.71C2185.04%201153.77%202351.28%201262.07%202561.52%201209.28C2662.15%201184.01%202897.6%201016.46%202936.59%20885.969C2995.59%20688.469%202806.94%20607.044%202695.09%20668.969C2550.59%20748.969%202601.59%20915.95%202667.53%20991.878C2851.58%201203.78%203170.74%201236.02%203447.91%201192.04C4058.95%201095.34%204612.5%20687.647%204886.09%20132.71%22%20stroke%3D%22black%22%20stroke-width%3D%22220%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E");
  --swirl-dark: #232834;   /* swirl : un cran plus clair que le fond adouci */
  --bg-section: #FEFDF9;    /* = fond de page : plus d'alternance de sections */
  --content-w: 1160px;      /* largeur maîtresse : TOUS les blocs larges s'y alignent */
  --content-pad: 20px;      /* gouttière horizontale unique */    /* fond des sections alternées */
  --font-body: "neulis-sans", system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cdn: 'https://filedn.eu/l90bmocxzu1X37yEDONNJ4b/oaw-website';
}

/* ==========================================================
   3. BASE
   ========================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "neulis-sans", sans-serif !important; }
.cursive { font-family: "neulis-cursive", sans-serif !important; }

/* Mots entourés (cercle jaune) ou soulignés (ligne verte) des titres
   H1 et H2 : rendus en Neulis Cursive */
h1 .txt, h2 .txt { font-family: "neulis-cursive", sans-serif !important; }
img { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--content-pad); }
section { padding: 100px 0; }
@media (max-width: 768px) { section { padding: 64px 0; } }
section.alt { background: var(--bg-section); }

/* ==========================================================
   4. COMPOSANTS TRANSVERSAUX
   ========================================================== */

/* --- Titre de section : kicker + H2 + décos --- */
.sec-head {
  position: relative;
  text-align: center;
  max-width: var(--content-w);
  margin: 0 auto 72px;      /* air entre le titre et le contenu de section */
  padding: 24px var(--content-pad);
}
@media (max-width: 768px) { .sec-head { margin-bottom: 44px; } }
.kicker {
  margin: 0 0 20px;
  color: var(--pink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(16px, 1.6vw, 20px);
}
.sec-head h2 {
  margin: 0 auto;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(36px, 4vw, 60px);
  color: var(--ink);
}
/* Mot porteur de déco (spits / ligne) */
.deco { position: relative; display: inline-block; overflow: visible; }
.deco > .txt { position: relative; z-index: 1; }
/* Éclats verts — collés à la 1re lettre (gauche, flippés) */
.spits-l {
  position: absolute;
  left: -1ch;
  top: -0.3em;
  width: clamp(22px, 2.8vw, 38px);
  transform: scaleX(-1);
  pointer-events: none;
}
/* Éclats verts — coin sup. droit */
.spits-r {
  position: absolute;
  right: -0.8ch;
  top: -0.25em;
  width: clamp(24px, 2.8vw, 40px);
  transform: rotate(15deg);
  pointer-events: none;
}
/* Ligne verte sous le mot souligné */
.ligne {
  position: absolute;
  left: 50%;
  bottom: -.15em;
  transform: translateX(-50%);
  width: 108%;
  pointer-events: none;
  z-index: 0;
}
.ligne--115 { width: 115%; }
.ligne--130 { width: 130%; }

/* --- Subline de section --- */
.subline {
  margin: 36px auto 0;   /* les décos du H2 descendent : 36px pour respirer */
  max-width: 980px;
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
  font-weight: 800;
}

/* --- Surlignage jaune (gradient, multi-ligne safe) --- */
.hl {
  background-image: linear-gradient(var(--yellow) 0 0);
  background-size: 100% 55%;
  background-position: 0 85%;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .1em;
}

/* --- CTA principal --- */
.oaw-cta { margin-top: 40px; text-align: center; }
.oaw-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: 60px;
  background: var(--pink);
  color: #ffffff !important;
  text-decoration: none;
  /* CHARTE : boutons en Neulis Sans, en capitales */
  font-family: "neulis-sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--line);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oaw-cta__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--line);
}

/* --- Flèche noire vers le bas --- */
.fleche { margin: 8px 0 12px; text-align: center; }
.fleche img { width: clamp(18px, 2vw, 24px); height: auto; display: inline-block; }

/* --- Étoiles + lien avis --- */
.stars {
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 14px;
  color: #4b4f57;
}
.stars img { height: 22px; width: auto; display: block; }
.stars a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* --- Carte de base (fond crème dégradé) --- */
.oaw-card {
  position: relative;
  overflow: visible;
  width: min(750px, 100%);
  margin: 0 auto 24px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  border-radius: 30px;
  border: 1px solid var(--card-border);
  background: linear-gradient(182deg, #FCF8F4 1.48%, #FFFDFA 98.45%);
}
.oaw-card__title {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.2;
  font-size: clamp(24px, 3vw, 32px);
}
.oaw-card__desc {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
}

/* ==========================================================
   5. SECTIONS
   ========================================================== */

/* --- 5.0 Bannière early birds --- */
.topbar {
  background: var(--yellow);
  border-bottom: 2px solid var(--line);
  text-align: center;
  padding: 12px 16px;
}
.topbar h2 {
  margin: 0;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.topbar p { margin: 2px 0 0; font-size: clamp(13px, 1.5vw, 15px); font-weight: 600; }

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

.hero {
  position: relative;
  text-align: center;
  padding: 140px 16px 120px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-page);
  background-image: url('../img/cerveau-hero-lp.png');
  background-size: auto 92%;
  background-repeat: no-repeat;
  background-position: center top;
}
.hero__logo { width: 46px; height: auto; margin: 0 auto 10px; display: block; }
.hero__brand {
  margin: 0 0 26px;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(40px, 5.2vw, 68px);
}
/* cercle jaune autour de "l'achat" */
.circled { position: relative; display: inline-block; overflow: visible; }
.circled > .txt { position: relative; z-index: 1; }
.circled > img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: 135%;
  pointer-events: none;
  z-index: 0;
}
.hero__sub {
  margin: 22px auto 0;
  max-width: 720px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
}
.hero .oaw-cta { margin-top: 26px; }
/* éclats verts du hero : ajustés au sommet de « psycho » */
.hero .spits-r {
  top: -0.02em;
  right: -1.1ch;
  width: clamp(18px, 2.2vw, 32px);
  transform: rotate(12deg);
}

/* --- 5.2 Bande logos statique (contenue, comme l'original) --- */
.logos-band {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  flex-wrap: wrap;
}
.logos-band__intro {
  flex: 0 0 230px;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  text-align: left;
}
.logos-band__row {
  flex: 1 1 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.logos-band__row img {
  height: 57px;
  width: auto;
  display: block;
}
/* Carrousel infini contenu dans la bande (partie logos uniquement) */
.logos-band__scroller {
  flex: 1 1 400px;
  min-width: 0;
  overflow: hidden;
  --speed: 38s;
  --gap: 56px;
}
.logos-band__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: oaw-scroll var(--speed) linear infinite;
}
.logos-band__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: var(--gap);
}
.logos-band__group img {
  height: 57px;
  width: auto;
  display: block;
  margin-right: var(--gap);
}
.logos-band__group img:last-child { margin-right: 0; }
@media (prefers-reduced-motion: reduce) {
  .logos-band__track { animation: none; }
}
@media (max-width: 768px) {
  .logos-band { justify-content: center; gap: 24px; }
  .logos-band__intro { flex: 1 1 100%; text-align: center; }
  .logos-band__row { justify-content: center; }
  .logos-band__row img { height: 46px; }
  .logos-band__scroller { --gap: 36px; flex: 1 1 100%; }
  .logos-band__group img { height: 46px; }
}

/* --- 5.2bis Marquee logos (ALTERNATIVE, non utilisée sur cette page :
       défilement pleine largeur, dispo pour une déclinaison) --- */
.logos-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 8px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.5;
}
.oaw-marquee {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  --speed: 38s;
  --gap: 32px;
}
.oaw-marquee__track {
  display: flex;
  align-items: center;
  will-change: transform;
  animation: oaw-scroll var(--speed) linear infinite;
}
@keyframes oaw-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.oaw-marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: var(--gap);
}
.oaw-marquee__group img {
  height: 90px;
  width: auto;
  display: block;
  margin-right: var(--gap);
}
.oaw-marquee__group img:last-child { margin-right: 0; }
@media (prefers-reduced-motion: reduce) {
  .oaw-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* --- 5.3 Pains (cartes emoji) --- */
.card-wrap {
  margin-bottom: 56px;
  overflow: visible;
  position: relative;
  isolation: isolate;
  padding: 0 var(--content-pad);
}
.oaw-card__emoji {
  position: absolute;
  top: -32px;
  right: -36px;
  width: 82px;
  height: 82px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08));
}
.oaw-card__emoji--left { left: -36px; top: -32px; right: auto; }
.oaw-card--pain { text-align: center; align-items: center; }
.oaw-card--pain .oaw-card__title { width: 100%; text-align: center; }
.oaw-card--pain .oaw-card__desc { width: 100%; text-align: center; }

/* Bloc de conclusion (🔥 + textes + flèche) */
.punch {
  max-width: 920px;
  margin: 48px auto 0;
  text-align: center;
  padding: 0 var(--content-pad);
}
.punch .emoji-lg { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.punch p { margin: 0; color: var(--ink); font-size: 18px; }
.punch p.b { font-weight: bold; }
.punch p + p { margin-top: 2px; }

/* --- 5.4 Cibles (3 cartes) --- */
.cibles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  align-items: stretch;
}
.oaw-card--cible {
  width: 100%;
  margin: 0;
  padding: 28px 22px;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.oaw-card--cible .oaw-card__img {
  width: clamp(140px, 16vw, 200px);
  height: 170px;
  object-fit: contain;
  display: inline-block;
  margin: 8px auto;
}
.oaw-card--cible .oaw-card__title {
  font-size: clamp(19px, 1.9vw, 23px);
  text-align: center;
  margin: 0 0 8px;
}
.oaw-card--cible .oaw-card__desc {
  font-size: clamp(15px, 1.6vw, 17px);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* --- 5.5 Bénéfices : 3 colonnes + cerveau --- */
.oaw-3col {
  display: grid;
  grid-template-columns: 330px minmax(300px, 1fr) 330px;
  column-gap: 56px;
  align-items: start;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.oaw-3col__col { text-align: center; }
.oaw-3col__left .oaw-benefit,
.oaw-3col__right .oaw-benefit { margin-bottom: 48px; }
.oaw-benefit__icon {
  display: block;
  margin: 0 auto 12px;
  width: 80px;
  height: auto;
}
.oaw-benefit__title {
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
}
.oaw-benefit__text {
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  max-width: 520px;
}
.oaw-3col__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.oaw-brain {
  width: clamp(300px, 30vw, 420px);
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.9;
}
.oaw-arrow {
  display: block;
  margin: 12px auto 0;
  width: clamp(20px, 2.6vw, 34px);
  height: auto;
}

/* --- 5.6 En pratique (cartes larges 2/3 - 1/3) --- */
.oaw-card--wide {
  /* bord de carte sur la même verticale que les cartes des autres
     sections : largeur maîtresse MOINS la gouttière de part et d'autre */
  max-width: calc(var(--content-w) - 2 * var(--content-pad));
  width: calc(100% - 2 * var(--content-pad));
  margin: 0 auto;
  text-align: left;
  align-items: stretch;
}
.oaw-card--wide .oaw-card__title { text-align: left; font-size: clamp(24px, 3vw, 36px); margin: 0 0 14px; }
.oaw-card--wide .oaw-card__desc { text-align: left; }
.oaw-grid {
  display: grid;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.oaw-grid--txtimg { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.oaw-grid--imgtxt { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
.oaw-kicker {
  margin: 0 0 10px;
  color: var(--pink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(14px, 1.4vw, 18px);
}
.oaw-media--right { text-align: right; }
.oaw-media--left { text-align: left; }
.oaw-media--right img { width: clamp(200px, 24vw, 320px); height: auto; }
.oaw-media--left img { width: clamp(220px, 26vw, 360px); height: auto; }
.refs { font-size: 14px; }
.refs .who { color: var(--ink); font-weight: 500; }
.oaw-sp-32 { height: 48px; }

/* --- 5.7 Témoignages --- */
.temoignages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--content-pad);
  align-items: start;
}
.t-card {
  background: linear-gradient(180deg, #fffaf5 0%, #fffdfb 100%);
  border: 1px solid var(--card-border-2);
  border-radius: 28px;
  padding: 28px 22px;
  color: var(--ink);
}
.t-card__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.t-card__photo { flex: 0 0 auto; }
.t-card__photo img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.t-card__id { flex: 1 1 220px; min-width: 200px; text-align: left; }
.t-card__name {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.25;
}
.t-card__org { display: flex; align-items: center; gap: 8px; }
.t-card__org img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.t-card__org p { margin: 0; font-size: clamp(14px, 1.9vw, 16px); color: var(--grey); }
.t-card__org strong { color: #000; }
.t-card__body { margin-top: 18px; text-align: left; }
.t-card__stars { display: flex; gap: 4px; margin: 0 0 12px; }
.t-card__stars img { height: 22px; width: auto; display: block; }
.t-card__text { font-size: clamp(15px, 1.6vw, 16px); line-height: 1.6; }
.t-card__text p { margin: 0 0 12px; }
.t-card__text p:last-child { margin-bottom: 0; }
mark { background: var(--mark); color: inherit; }

/* --- 5.8 À propos --- */
.apropos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.apropos__img { flex: 1 1 400px; text-align: center; }
.apropos__img img { max-width: 80%; height: auto; display: inline-block; }
.apropos__txt { flex: 1 1 480px; text-align: left; }
.apropos__txt .kicker { margin-bottom: 16px; }
.apropos__txt h2 {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--ink);
}
.apropos__body { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; margin-top: 20px; }
.apropos__body p { margin: 0 0 16px; }
.apropos__body p:last-child { margin-bottom: 0; }
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: var(--content-w);
  margin: 64px auto 0;
  padding: 0 var(--content-pad);
}
.tags > div { flex: 1 1 280px; text-align: center; }
.tags img { max-width: 65%; height: auto; display: inline-block; }
/* Flottement des stickers (proposition Shirley, réf. heysimon.fr) :
   oscillation lente ease-in-out, désynchronisée — durées, amplitudes
   et phases différentes pour les 3, donc jamais de mouvement d'ensemble. */
@keyframes oaw-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(var(--float-y, -6px)) rotate(var(--float-r, .5deg)); }
}
.tags img {
  animation: oaw-float var(--float-t, 4s) ease-in-out infinite;
  animation-delay: var(--float-d, 0s);
  will-change: transform;
}
.tags > div:nth-child(1) img { --float-t: 3.2s; --float-y: -11px; --float-r: 1.4deg;  --float-d: -0.6s; }
.tags > div:nth-child(2) img { --float-t: 4s;   --float-y: -14px; --float-r: -1.1deg; --float-d: -2.1s; }
.tags > div:nth-child(3) img { --float-t: 3.6s; --float-y: -9px;  --float-r: 1deg;    --float-d: -3.3s; }
@media (prefers-reduced-motion: reduce) {
  .tags img { animation: none; }
}
.tags .tag-wide img { max-width: 90%; }

/* --- 5.9 Est-ce pour moi ? (blocs oui / non) --- */
.fit-section {
  background-color: var(--bg-section);
}
.fit-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.fit-block {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);   /* même langage sticker que les chiffres */
  padding: 52px 30px 34px;
  margin: 0;
  color: var(--ink);
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  /* empilés : l'emoji déborde de 34px au-dessus de chaque carte
     + ombre dure 6px de la carte précédente -> il faut ~72px d'air */
  .fit-cols { grid-template-columns: 1fr; gap: 72px; }
}


.fit-block__emoji {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: 68px;
  height: auto;
  pointer-events: none;
}
.fit-block h3 {
  text-align: center;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 28px;
}
.fit-block--no h3 span { color: var(--red); }
.fit-block--yes h3 span { color: var(--teal); }
.fit-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}
.fit-item { display: flex; align-items: flex-start; gap: 14px; }
.fit-item img { width: 22px; height: 22px; margin-top: 4px; flex: 0 0 auto; }
.fit-item p { margin: 0; }


/* --- 5.10 Offre --- */
.offre {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.offre__card {
  background: linear-gradient(180deg, #fffaf5 0%, #fffdfb 100%);
  border: 1px solid var(--card-border-2);
  border-radius: 28px;
  padding: clamp(20px, 2.2vw, 32px);
  color: var(--ink);
}
.offre__list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
  font-weight: bold;
}
.offre__list .fit-item img { margin-top: 4px; }
.offre__card .oaw-cta { margin: clamp(18px, 2.6vw, 28px) 0 0; }
.pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(16px, 2.4vw, 22px);
  flex-wrap: wrap;
}
.pay__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: clamp(14px, 1.7vw, 16px);
  color: #2b2f36;
}
.pay__logos { display: flex; align-items: center; gap: 10px; }
.pay__logos img.visa { height: 46px; width: auto; display: block; }
.pay__logos img.paypal { height: 34px; width: auto; display: block; }
.offre__visual { text-align: center; max-width: 640px; margin: 0 auto; }
.offre__visual img { width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.offre__note { text-align: center; margin: 40px auto 0; font-size: 15px; }

/* --- 5.11 Bannière image défilante (bord à bord) --- */
.banner-strip {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.banner-strip img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- 5.12 FAQ --- */
.faq {
  max-width: 880px;
  margin: 32px auto 0;
  padding: 0 var(--content-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq details {
  background: #fff;
  border: 1px solid var(--card-border-2);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(20, 22, 26, 0.04);
  padding: 0;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--pink);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: '\2212'; transform: none; }  /* − : ouvert = replier */
.faq details p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.6;
}

/* --- 5.13 Footer --- */
footer {
  text-align: center;
  padding: 40px 16px;
  font-size: 13px;
  color: #8a8f98;
}

/* ==========================================================
   6. RESPONSIVE
   ========================================================== */
@media (max-width: 1200px) {
  .oaw-3col {
    grid-template-columns: 320px minmax(300px, 1fr) 320px;
    column-gap: 64px;
  }
}
@media (max-width: 992px) {
  .oaw-3col {
    grid-template-columns: 300px minmax(280px, 1fr) 300px;
    column-gap: 48px;
  }
  .cibles { grid-template-columns: 1fr; max-width: 620px; }
  .temoignages { grid-template-columns: 1fr; max-width: 720px; }
  .offre { grid-template-columns: 1fr; max-width: 720px; }
}
@media (max-width: 900px) {
  .oaw-marquee { --gap: 28px; }
  .oaw-marquee__group img { height: 70px; }
  .oaw-grid--txtimg,
  .oaw-grid--imgtxt { grid-template-columns: 1fr; row-gap: 24px; }
  .oaw-media--right, .oaw-media--left { text-align: center; }
  .oaw-media--right img, .oaw-media--left img { width: clamp(200px, 60vw, 320px); }
  .oaw-grid--imgtxt .oaw-media--left { order: 2; }
}
@media (max-width: 768px) {
  .hero {
    padding: 100px 16px 84px;
    min-height: 460px;
    background-position: center top;
    background-size: auto 100%;
  }
  .oaw-cta__btn { padding: 14px 28px; font-size: 18px; box-shadow: 0 2px 0 var(--line); }
  .oaw-card__emoji { top: -20px; right: -20px; width: 64px; height: 64px; }
  .oaw-card__emoji--left { left: -20px; top: -20px; right: auto; }
  .oaw-3col { grid-template-columns: 1fr; row-gap: 28px; max-width: 680px; }
  .oaw-3col__left { order: 1; }
  .oaw-3col__right { order: 2; }
  .oaw-3col__center { order: 3; }
  .oaw-brain { width: 380px; max-width: 90%; }
  .oaw-arrow { width: 22px; }
  .apropos__img img { max-width: 90%; }
}
@media (max-width: 600px) {
  .oaw-marquee { --gap: 22px; }
  .oaw-marquee__group img { height: 55px; }
}
@media (max-width: 480px) {
  .hero {
    background-position: center top;
    background-size: auto 100%;
  }
  .oaw-cta__btn { padding: 12px 24px; font-size: 16px; box-shadow: 0 2px 0 var(--line); }
  .oaw-card__emoji { top: -12px; right: -12px; width: 56px; height: 56px; }
  .oaw-card__emoji--left { left: -12px; top: -12px; }
}


/* ==========================================================
   7. DESIGN SYSTEM v1.1 — néobrutalisme minimaliste
   Canevas BFM : air, sobriété du courant, hiérarchie limpide.
   UN geste par écran (pilule OU souligné OU Axone).
   Exception sanctionnée : H1 = pilule + marker.
   ========================================================== */

/* Pilule — rose sur fond clair UNIQUEMENT, jaune sur dark */
.pill {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  padding: .02em .34em .06em;
  border-radius: .42em;
  border: .09em solid #fff;
  box-shadow: 0 .18em .5em rgba(20, 22, 26, .22);
  transform: rotate(-2deg);
  --pill-shift: -.02em;    /* recentrage vertical du mot (métriques Adobe),
                              calé pour les mots SANS descendante (j, g, q…) —
                              ajuster ICI si le mot semble haut/bas, la boîte
                              ne bouge pas */
}
/* le décalage s'applique aux glyphes seuls, jamais à la boîte */
.pill > .pill__t {
  display: inline-block;
  position: relative;
  top: var(--pill-shift);
}
.pill--yellow { background: var(--yellow); color: var(--ink); }

/* Souligné double (traces.svg) — 5em fixe, sous le mot */
.ul { display: inline-block; position: relative; }
.ul::after {
  content: ""; position: absolute;
  top: calc(100% - .08em); left: 50%; transform: translateX(-50%);
  width: 5em; aspect-ratio: 1560 / 189;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%221560%22%20height%3D%22189%22%20viewBox%3D%220%200%201560%20189%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M23.5039%20119.324C553.746%2034.5872%20884.125%2013.7225%201536.5%2027.3237%22%20stroke%3D%22%23FFE500%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M228.004%20165.324C610.751%20105.995%20851.772%2087.8568%201346%2092.3238%22%20stroke%3D%22%23FFE500%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") no-repeat top center / contain;
  pointer-events: none;
}
.dark .ul::after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221560%22%20height%3D%22189%22%20viewBox%3D%220%200%201560%20189%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M23.5039%20119.324C553.746%2034.5872%20884.125%2013.7225%201536.5%2027.3237%22%20stroke%3D%22%23FFF062%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M228.004%20165.324C610.751%20105.995%20851.772%2087.8568%201346%2092.3238%22%20stroke%3D%22%23FFF062%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E"); }

/* Vague (wave.svg) — 3.75em fixe */
.wv { display: inline-block; position: relative; }
.wv::after {
  content: ""; position: absolute;
  top: calc(100% - .08em); left: 50%; transform: translateX(-50%);
  width: 3.75em; aspect-ratio: 1062 / 116;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%221062%22%20height%3D%22116%22%20viewBox%3D%220%200%201062%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M23.5049%2091.9301C164.677%2020.4137%20269.967%202.73259%20549.005%2049.4301C899.005%20121.43%201038.5%2025.4297%201038.5%2025.4297%22%20stroke%3D%22%23FFE500%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") no-repeat top center / contain;
  pointer-events: none;
}
.dark .wv::after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221062%22%20height%3D%22116%22%20viewBox%3D%220%200%201062%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M23.5049%2091.9301C164.677%2020.4137%20269.967%202.73259%20549.005%2049.4301C899.005%20121.43%201038.5%2025.4297%201038.5%2025.4297%22%20stroke%3D%22%23FFF062%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E"); }

/* Cercle (circle.svg) — derrière le texte, mots courts */
.cr { display: inline-block; position: relative; padding: .05em .15em; }
.cr::after {
  content: ""; position: absolute; z-index: -1;
  inset: -0.18em -0.05em -0.14em;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%22782%22%20height%3D%22477%22%20viewBox%3D%220%200%20782%20477%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M416%2023.5015C189.27%2045.0826%2023.5%20139.001%2023.5%20277.501C27%20380.001%20114.237%20458.805%20390%20453.001C634.472%20437.299%20766%20363.501%20758%20253.001C750%20142.501%20503.5%2068.0015%20308%20108.001%22%20stroke%3D%22%23FFE500%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain;
  pointer-events: none;
}
.dark .cr::after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22782%22%20height%3D%22477%22%20viewBox%3D%220%200%20782%20477%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M416%2023.5015C189.27%2045.0826%2023.5%20139.001%2023.5%20277.501C27%20380.001%20114.237%20458.805%20390%20453.001C634.472%20437.299%20766%20363.501%20758%20253.001C750%20142.501%20503.5%2068.0015%20308%20108.001%22%20stroke%3D%22%23FF38A3%22%20stroke-width%3D%2236%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E"); }

/* Axone — jamais flippée */
.mascotte { width: 1.5em; height: auto; vertical-align: -0.25em; transform: rotate(6deg); }

/* Swirl signature en mask */
.has-wave { position: relative; overflow: hidden; }
.has-wave > * { position: relative; z-index: 1; }
.has-wave::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-color: var(--swirl-clair);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%224997%22%20height%3D%221809%22%20viewBox%3D%220%200%204997%201809%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M110.017%201498.14C479.51%201718.21%20949.884%201760.19%201352.41%201608.97C1755.13%201457.95%202081.64%201116.71%202215.16%20708.018C2248.19%20606.94%202312.73%20391.196%202168.52%20208.21C2122.02%20149.21%201928.02%2015.2109%201738.52%20218.21C1620.03%20345.143%201612.02%20522.711%201654.52%20632.711C1727.54%20821.711%201865.99%20960.001%202056.52%201075.71C2185.04%201153.77%202351.28%201262.07%202561.52%201209.28C2662.15%201184.01%202897.6%201016.46%202936.59%20885.969C2995.59%20688.469%202806.94%20607.044%202695.09%20668.969C2550.59%20748.969%202601.59%20915.95%202667.53%20991.878C2851.58%201203.78%203170.74%201236.02%203447.91%201192.04C4058.95%201095.34%204612.5%20687.647%204886.09%20132.71%22%20stroke%3D%22black%22%20stroke-width%3D%22220%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg%20width%3D%224997%22%20height%3D%221809%22%20viewBox%3D%220%200%204997%201809%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M110.017%201498.14C479.51%201718.21%20949.884%201760.19%201352.41%201608.97C1755.13%201457.95%202081.64%201116.71%202215.16%20708.018C2248.19%20606.94%202312.73%20391.196%202168.52%20208.21C2122.02%20149.21%201928.02%2015.2109%201738.52%20218.21C1620.03%20345.143%201612.02%20522.711%201654.52%20632.711C1727.54%20821.711%201865.99%20960.001%202056.52%201075.71C2185.04%201153.77%202351.28%201262.07%202561.52%201209.28C2662.15%201184.01%202897.6%201016.46%202936.59%20885.969C2995.59%20688.469%202806.94%20607.044%202695.09%20668.969C2550.59%20748.969%202601.59%20915.95%202667.53%20991.878C2851.58%201203.78%203170.74%201236.02%203447.91%201192.04C4058.95%201095.34%204612.5%20687.647%204886.09%20132.71%22%20stroke%3D%22black%22%20stroke-width%3D%22220%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") no-repeat;
  -webkit-mask-size: 160% auto; mask-size: 160% auto;
  -webkit-mask-position: 20% 40%; mask-position: 20% 40%;
  pointer-events: none;
}
.dark.has-wave::before { background-color: var(--swirl-dark); }
/* noir adouci : entre le noir pur (fatigue oculaire) et l'anthracite (perte de puissance) */
.dark { background: #1A1E24; color: var(--cream); }

/* Manifeste (canevas BFM) — 1 affirmation, 1 accent, air maximal */
.manifesto {
  max-width: var(--content-w);   /* largeur maîtresse : évite le point orphelin
                                    et garde le souligné accroché au mot */
  margin: 96px auto 0;
  text-align: center;
  padding: 0 var(--content-pad);
}
.manifesto h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.manifesto p {
  margin: 40px auto 0;   /* le souligné du H2 descend sous la ligne de base */
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

/* Hover néobrutaliste : réservé aux éléments CLIQUABLES uniquement. */

/* Cartes cibles : même langage sticker que les chiffres et les blocs oui/non */
.oaw-card--cible {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
}
.cibles > .oaw-card--cible:nth-child(1) { transform: rotate(-.9deg); }
.cibles > .oaw-card--cible:nth-child(2) { transform: rotate(.5deg); }
.cibles > .oaw-card--cible:nth-child(3) { transform: rotate(-.5deg); }

/* Cartes pains : titres réduits pour laisser le manifeste dominer l'écran */
.oaw-card--pain .oaw-card__title { font-size: clamp(19px, 2.2vw, 24px); }

/* CHARTE : tout mot mis en avant dans un titre passe en Neulis Cursive */
h1 .pill, h2 .pill, h3 .pill,
h1 .hl,   h2 .hl,   h3 .hl,
h1 .ul,   h2 .ul,
h1 .wv,   h2 .wv,
h1 .cr,   h2 .cr,
.manifesto h2 .ul, .manifesto h2 .hl {
  font-family: "neulis-cursive", sans-serif !important;
}

/* Édito (canevas BFM) : les cartes larges perdent leur cadre, l'air fait le travail */
.oaw-card--wide {
  background: transparent;
  border: none;
  padding: 12px 24px;
}
.oaw-card--wide .oaw-card__desc { color: var(--muted); }
.refs { color: var(--muted); }
.oaw-sp-32 { height: 72px; }

/* Citation épurée (témoignages) */
.quote {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
  padding: 0 var(--content-pad);
}
.quote blockquote {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.quote blockquote .hl { font-family: "neulis-cursive", sans-serif !important; }
.quote figcaption { margin-top: 20px; font-size: 14.5px; color: var(--muted); }

/* Chiffres clés (typographie pure, zéro décoration) */
/* Chiffres clés : CARTES STICKER néobrutalistes —
   bordure encre, ombre dure, légère rotation (codes des CTA) */
.stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--content-pad);
}
.stats > div {
  /* habillage sticker déporté sur ::before (z:-1) pour permettre
     à Axone (z:-2) de passer DERRIÈRE la carte, mains sur le bord */
  padding: 30px 36px 24px;
  text-align: center;
  width: 240px;
  box-sizing: border-box;
}
.stats > div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
}
.stats > div:nth-child(1) { transform: rotate(-1.6deg); }
.stats > div:nth-child(2) { transform: rotate(.8deg); }
.stats > div:nth-child(3) { transform: rotate(-.7deg); }
.stats .n { font-family: "neulis-sans", sans-serif; font-weight: 800; font-size: clamp(46px, 5vw, 60px); letter-spacing: -.03em; line-height: 1; }
.stats .sym { color: inherit; }
.stats .l {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .stats { gap: 22px; }
  .stats > div { width: min(320px, 100%); }
}

/* Sections DARK : jamais bord à bord — conteneur arrondi
   posé sur le fond de page, façon heysimon */
section.dark {
  width: min(1560px, calc(100% - 48px));
  margin: 32px auto;
  border-radius: 32px;
  overflow: hidden;
}
@media (max-width: 768px) {
  section.dark { width: calc(100% - 24px); border-radius: 24px; }
}
/* marker sur dark : texte en encre + bande élargie
   (sinon les hampes dépassent et se noient dans le noir) */
.dark .hl {
  color: var(--ink);
  background-size: 100% 92%;
  background-position: 0 55%;
}

.dark mark { color: var(--ink); }   /* surlignage jaune : texte en encre sur dark */
/* … sauf dans les corps de citation : l'aplat jaune sur plusieurs lignes
   fragmente la lecture (contraste simultané). L'accent devient
   typographique : texte jaune gras, sans fond. L'aplat plein reste
   l'exclusivité des titres (.hl) sur dark. */
.t-slide__quote mark {
  background: none;
  color: var(--yellow);
  font-weight: 700;
  padding: 0;
}

/* Overrides dark génériques */
.dark .sec-head h2 { color: var(--cream); }
.dark .subline { color: var(--cream); }
.dark .offre__card {
  background: #1B1E24;
  border-color: #2A2D33;
  color: var(--cream);
}
.dark .pay__label { color: #B9BDC4; }
.dark .offre__note { color: #B9BDC4; }
.dark .stars, .dark .stars a { color: #B9BDC4; }



/* ==========================================================
   8. SWIRL CROSS-SECTION + CHIFFRES CLÉS + DÉCO FROIDE
   ========================================================== */

/* Zone swirl : enjambe deux sections SANS être coupée.
   Le wrapper porte le fond et le swirl géant ; les sections
   à l'intérieur deviennent transparentes. */
.swirl-zone {
  position: relative;
  background: var(--bg-page);
}
/* Swirl dessiné au scroll (réf. heysimon) : le tracé se dessine au fil
   du défilement — démarre quand la zone entre à l'écran, complet quand
   toute la zone a été vue. Piloté en JS via stroke-dashoffset
   (pathLength=1). UNIQUEMENT les swirls d'espaces ouverts — jamais ceux
   encapsulés dans un cadre (panneau dark témoignages).
   Géométrie = réplique de l'ancien masque (150% / 60% 58%). */
.swirl-zone { overflow: hidden; }
.swirl-draw {
  position: absolute;
  z-index: 0;
  width: 150%;
  aspect-ratio: 4997 / 1809;
  left: -30%;                    /* équiv. mask-position-x 60% */
  top: 58%;
  margin-top: -31.5%;            /* équiv. mask-position-y 58% (marge en % de largeur) */
  pointer-events: none;
  opacity: 0;
}
.swirl-draw path {
  stroke: var(--swirl-clair);
  stroke-width: 220;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;          /* invisible avant le scroll */
}
/* Variante pains : équiv. mask 175% / 50% 97% */
.swirl-zone--pains .swirl-draw {
  width: 175%;
  left: -37.5%;
  top: 97%;
  margin-top: -61.5%;
}
@media (prefers-reduced-motion: reduce) {
  .swirl-draw { opacity: 1; }
  .swirl-draw path { stroke-dashoffset: 0; }
}
.swirl-zone > section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Variante de zone : le swirl vit dans l'espace OUVERT (manifeste + CTA),
   les cartes restent sur fond calme — pas de motif masqué par les blocs */
.swirl-zone--pains::before {
  -webkit-mask-position: 50% 97%;
          mask-position: 50% 97%;
  -webkit-mask-size: 175% auto;
          mask-size: 175% auto;
}

/* Chiffres clés */
.stats-head {
  text-align: center;
  margin: 0 0 48px;
}

/* Flèche déco froide (annotation bleue) */
.arrow-blue {
  stroke: var(--blue);
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}


/* ==========================================================
   9. TÉMOIGNAGES v3 — carrousel scroll-snap
   Cartes anthracite (#22262E) avec swirl en filigrane DANS
   la carte (un seul calque de texture : la section reste nue).
   Défilement : CSS scroll-snap (tactile/trackpad natif) ;
   flèches + progression pilotées par ~25 lignes de JS vanille.
   ========================================================== */
/* la piste s'étend sur toute la section : la carte qui dépasse est
   coupée par le bord arrondi du panneau dark, pas dans le vide.
   La 1re carte reste alignée sur la grille (padding calculé). */
.t-carousel { width: 100%; }
.t-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--content-pad), calc(50% - var(--content-w) / 2 + var(--content-pad)));
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  --t-inset: max(var(--content-pad), calc(50% - var(--content-w) / 2 + var(--content-pad)));
  padding: 4px var(--content-pad) 8px var(--t-inset);
}
.t-track::-webkit-scrollbar { display: none; }
.t-slide {
  position: relative;
  overflow: hidden;
  flex: 0 0 min(520px, 88%);
  scroll-snap-align: start;
  background: #22262E;
  border: 1px solid #353A46;
  border-radius: 24px;
  padding: 30px 28px 28px;
  color: var(--cream);
}
.t-slide__stars { display: flex; gap: 4px; margin-bottom: 18px; }
.t-slide__stars img { height: 22px; width: auto; display: block; }
.t-slide__quote {
  border-left: 3px solid #3C4250;
  padding-left: 18px;
  /* micro-typo « nuit » : compense la halation du clair-sur-sombre
     sans toucher au corps (15px) */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.7;
  color: #D8DBE1;
  min-height: 128px;
}
.t-slide__quote p { margin: 0 0 10px; }
.t-slide__quote p:last-child { margin-bottom: 0; }
.t-slide__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.t-slide__photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.t-slide__name { margin: 0 0 4px; font-weight: 800; font-size: 16px; color: var(--cream); }
.t-slide__org { display: flex; align-items: center; gap: 8px; }
.t-slide__org img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.t-slide__org p { margin: 0; font-size: 13.5px; font-weight: 700; color: #9BA1AD; }

/* barre de contrôle : progression à gauche, flèches à droite */
.t-nav {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 0 20px;
}
.t-dots { display: flex; align-items: center; gap: 8px; }
.t-dot {
  width: 14px; height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #3A404C;
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}
.t-dot.is-active { width: 44px; background: var(--pink); }
.t-arrows { display: flex; gap: 10px; }
.t-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #22262E;
  border: 1px solid #353A46;
  color: var(--pink);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.t-arrow:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 #0E1013;      /* hover néobrutaliste : cliquable */
}
.t-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) {
  .t-slide { flex-basis: 86%; padding: 24px 20px 22px; }
  .t-slide__quote { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-track { scroll-behavior: auto; }
  .t-dot, .t-arrow { transition: none; }
}

/* ==========================================================
   10. MICRO-INTERACTIONS LUDIQUES (test)
   Nuance de charte : le hover néobrutaliste (soulèvement +
   ombre) reste réservé aux CLIQUABLES. Ici c'est un geste
   d'humour — la carte s'incline, sans mimer un bouton.
   ========================================================== */

/* Cartes cibles : inclinaison amusée au passage de la souris */
.cibles > .oaw-card--cible { transition: transform .25s ease; }
.cibles > .oaw-card--cible:nth-child(1):hover { transform: rotate(-2.4deg); }
.cibles > .oaw-card--cible:nth-child(2):hover { transform: rotate(2deg); }
.cibles > .oaw-card--cible:nth-child(3):hover { transform: rotate(-2deg); }

/* Cartes chiffres : même clin d'œil */
.stats > div { transition: transform .25s ease; }
.stats > div:nth-child(1):hover { transform: rotate(-3.2deg); }
.stats > div:nth-child(2):hover { transform: rotate(2.6deg); }
.stats > div:nth-child(3):hover { transform: rotate(-2.6deg); }

/* Flèches : rebond doux vers le bas, pour guider l'œil vers le CTA */
@keyframes oaw-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}
.fleche img, .oaw-arrow {
  /* flèche vectorielle (le PNG floutait à l'agrandissement) */
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2044%22%3E%3Cpath%20d%3D%22M12%202v33M4.5%2028.5%2012%2038l7.5-9.5%22%20stroke%3D%22%2314161A%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  animation: oaw-bounce 1.1s ease-in-out infinite;
}

/* la flèche sous le cerveau se rapproche du CTA */
.oaw-3col + .oaw-cta { margin-top: 8px; }
.oaw-3col__center .oaw-arrow { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .fleche img, .oaw-arrow { animation: none; }
  .cibles > .oaw-card--cible, .stats > div { transition: none; }
}


/* ==========================================================
   11. BURST AU SURVOL DES CTA (heypongo, réanalysé frame par frame)
   3 traits en éventail sur CHAQUE CÔTÉ, mesurés sur la vidéo :
   haut +26°, milieu +7°, bas -19° — éventail centré sur le bouton,
   asymétrique, traits courts (15-20px) et épais (3,5), à ~6px du bord.
   Chaque trait vit en comète : point -> s'allonge vers l'extérieur
   -> se résorbe par la queue -> point -> disparaît.
   Cascade : les 3 traits partent en décalé (haut, puis milieu
   avant la fin du haut, puis bas avant la fin du milieu).
   Technique : 3 bandes de masque indépendantes (une par trait,
   découpage vertical calé sur la géométrie du SVG), chacune
   balaye du bouton vers l'extérieur dans sa propre fenêtre
   temporelle. Une salve de 0,9s par survol.
   ========================================================== */
.oaw-cta__btn { position: relative; }
.oaw-cta__btn::before,
.oaw-cta__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -38px;          /* centré sur la hauteur du bouton */
  width: 56px;
  height: 76px;
  opacity: 0;
  pointer-events: none;
  /* 3 couches de masque : trait haut / trait milieu / trait bas.
     Chaque couche est la même bande-comète, limitée verticalement
     à la zone de son trait (0-33px / 33-47px / 47-76px). */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 36%, #000 45%, #000 57%, transparent 66%, transparent 100%);
  -webkit-mask-size: 280% 44%, 280% 15%, 280% 41%;
          mask-size: 280% 44%, 280% 15%, 280% 41%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.oaw-cta__btn::before {
  left: -62px;                       /* traits à ~6px du bord, comme la référence */
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2076%22%3E%20%3Cg%20stroke%3D%22%2314161A%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M51%2028.5%20L33%2019.5%22%2F%3E%20%3Cpath%20d%3D%22M51%2040%20L36%2038%22%2F%3E%20%3Cpath%20d%3D%22M51%2049%20L35%2054.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.oaw-cta__btn::after {
  right: -62px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2076%22%3E%20%3Cg%20stroke%3D%22%2314161A%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M5%2028.5%20L23%2019.5%22%2F%3E%20%3Cpath%20d%3D%22M5%2040%20L20%2038%22%2F%3E%20%3Cpath%20d%3D%22M5%2049%20L21%2054.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* Droite : chaque bande balaye du bouton vers l'extérieur (x 95% -> 18%).
   Fenêtres : haut 0-55%, milieu 15-70%, bas 30-85% de la salve. */
@keyframes oaw-burst-sweep-r {
  0%   { opacity: 0; -webkit-mask-position: 100% 0%, 100% 51%, 100% 100%; mask-position: 100% 0%, 100% 51%, 100% 100%; }
  3%   { opacity: 1; }
  15%  { -webkit-mask-position: 78% 0%, 100% 51%, 100% 100%; mask-position: 78% 0%, 100% 51%, 100% 100%; }
  30%  { -webkit-mask-position: 55% 0%, 78% 51%, 100% 100%; mask-position: 55% 0%, 78% 51%, 100% 100%; }
  55%  { -webkit-mask-position: 18% 0%, 40% 51%, 63% 100%; mask-position: 18% 0%, 40% 51%, 63% 100%; }
  70%  { -webkit-mask-position: 18% 0%, 18% 51%, 40% 100%; mask-position: 18% 0%, 18% 51%, 40% 100%; }
  85%  { -webkit-mask-position: 18% 0%, 18% 51%, 18% 100%; mask-position: 18% 0%, 18% 51%, 18% 100%; }
  97%  { opacity: 1; }
  100% { opacity: 0; -webkit-mask-position: 18% 0%, 18% 51%, 18% 100%; mask-position: 18% 0%, 18% 51%, 18% 100%; }
}
/* Gauche : miroir (x 8% -> 85%), mêmes fenêtres temporelles. */
@keyframes oaw-burst-sweep-l {
  0%   { opacity: 0; -webkit-mask-position: 2% 0%, 2% 51%, 2% 100%; mask-position: 2% 0%, 2% 51%, 2% 100%; }
  3%   { opacity: 1; }
  15%  { -webkit-mask-position: 25% 0%, 2% 51%, 2% 100%; mask-position: 25% 0%, 2% 51%, 2% 100%; }
  30%  { -webkit-mask-position: 47% 0%, 25% 51%, 2% 100%; mask-position: 47% 0%, 25% 51%, 2% 100%; }
  55%  { -webkit-mask-position: 85% 0%, 62% 51%, 40% 100%; mask-position: 85% 0%, 62% 51%, 40% 100%; }
  70%  { -webkit-mask-position: 85% 0%, 85% 51%, 62% 100%; mask-position: 85% 0%, 85% 51%, 62% 100%; }
  85%  { -webkit-mask-position: 85% 0%, 85% 51%, 85% 100%; mask-position: 85% 0%, 85% 51%, 85% 100%; }
  97%  { opacity: 1; }
  100% { opacity: 0; -webkit-mask-position: 85% 0%, 85% 51%, 85% 100%; mask-position: 85% 0%, 85% 51%, 85% 100%; }
}
.oaw-cta__btn:hover::before {
  animation: oaw-burst-sweep-l .9s linear forwards;
}
.oaw-cta__btn:hover::after {
  animation: oaw-burst-sweep-r .9s linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  .oaw-cta__btn:hover::before, .oaw-cta__btn:hover::after { animation: none; }
}

/* Check / croix : SVG vectoriel net (remplace les PNG flous, même
   patron content:url que les flèches). Couleurs de charte :
   teal #2DB9B6 (validation) · rouge #FF6269 (exclusion). */
img[src$="check-vert.png"] { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M4.5%2013.2%20Q8.5%2016.6%209.8%2018.2%20Q14.2%2010.4%2019.8%205.8%22%20stroke%3D%22%232DB9B6%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
img[src$="croix-rouge.png"], img[src*="croix-rouge"] { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cg%20stroke%3D%22%23FF6269%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M5.6%205.9%20Q12%2011.8%2018.6%2018.4%22%2F%3E%3Cpath%20d%3D%22M18.3%205.6%20Q11.9%2012%205.7%2018.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* ==========================================================
   12. AXONE, LA MASCOTTE
   Apparitions rares et contextuelles (réf. heysimon).
   JAMAIS de transformation du dessin (ni miroir, ni rotation) :
   chaque pose se place du côté qu'elle regarde. Besoin d'une
   autre expression/position -> la demander, pas la bricoler.
   ========================================================== */
.axone { pointer-events: none; user-select: none; }

/* Chiffres : sort la tête de la carte 95% (pose head+mains,
   dessinée pour chevaucher un bord) */
.stats > div { position: relative; }
/* DOCTRINE de cette pose : toujours DERRIÈRE le bord qu'elle agrippe
   (z:-2 sous la face de carte z:-1), les deux POINTS DES MAINS posés
   pile sur la ligne de bordure — mesuré au pixel : les mains sont à
   52,8 % de la largeur depuis le haut du dessin. Le menton plonge
   alors ~15px sous la ligne et se cache derrière la carte. */
.axone--peek {
  --peek-w: 90px;
  position: absolute;
  top: calc(var(--peek-w) * -0.528 + 1px);  /* bas des mains = ligne */
  left: 50%;
  margin-left: calc(var(--peek-w) / -2);    /* centrage sans transform */
  width: var(--peek-w);
  z-index: -2;
}

/* Pains : sonné, en ponctuation du titre après « bloque. » */
.axone--inline {
  height: 1.35em;
  width: auto;
  display: inline-block;
  vertical-align: -.32em;
  margin-left: .12em;
}

/* FAQ : perplexe, les pieds posés sur le premier accordéon.
   Ratio du SVG : 214/196 = 1.092. */
.faq { position: relative; }
.axone--faq {
  position: absolute;
  top: calc(104px * -1.092 + 8px);  /* pieds posés sur le bord (le halo blanc du sticker absorbe 4px) */
  right: 44px;
  width: 104px;
}
@media (max-width: 900px) {
  .axone--faq { display: none; }   /* évite la collision avec le titre */
}

/* ==========================================================
   13. MENU LP — minimal : logo à gauche, CTA à droite.
   Sticky : le CTA reste accessible tout au long du scroll
   (pattern de conversion). Pas de liens de navigation :
   une LP ne propose qu'une seule action.
   ========================================================== */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--content-pad);
  background: rgba(254, 253, 249, .92);   /* --bg-page à 92 % + flou */
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid #EFE6D9;
}
.lp-nav__logo { display: block; line-height: 0; }
.lp-nav__logo img { height: 26px; width: auto; display: block; }
.lp-nav__cta { margin: 0; }
.oaw-cta__btn--sm {
  padding: 10px 22px;
  font-size: 15px;
  box-shadow: 0 2px 0 var(--line);
}
@media (max-width: 480px) {
  .lp-nav__logo img { height: 22px; }
  .oaw-cta__btn--sm { padding: 8px 16px; font-size: 13.5px; }
}