/* =========================================================
   CERVOLAND POP — Design System v3
   Style "livre jeunesse géant" — bouncy, coloré, joyeux
   ========================================================= */

:root {
  /* Palette pop saturée */
  --rose: #ff4dbb;
  --rose-fonce: #d93a9d;
  --rose-clair: #ffd9ef;
  --bleu: #2d6cdf;
  --bleu-fonce: #1a3c8c;
  --bleu-clair: #cfe0ff;
  --jaune: #ffd028;
  --jaune-fonce: #f4a800;
  --jaune-clair: #fff2b3;
  --vert: #4dd9a1;
  --vert-fonce: #25b07a;
  --vert-clair: #d4f5e6;
  --orange: #ff8a4d;
  --orange-fonce: #e76a26;
  --orange-clair: #ffe0cc;
  --violet: #b39bff;
  --violet-fonce: #8d6efb;
  --violet-clair: #eae4ff;

  --noir: #1a1a25;
  --gris: #4a4a5a;
  --gris-clair: #9a9aab;
  --blanc: #ffffff;
  --fond: #fff8e7;
  --fond-2: #ffeed1;

  --ff-display: "Fredoka", "Quicksand", "Comic Sans MS", system-ui, sans-serif;
  --ff-body: "Quicksand", system-ui, -apple-system, sans-serif;
  --ff-hand: "Caveat", "Comic Sans MS", cursive;

  --pad-x: clamp(20px, 5vw, 80px);
  --max-w: 1280px;

  --r-xs: 12px;
  --r-sm: 18px;
  --r-md: 28px;
  --r-lg: 40px;
  --r-pill: 999px;
  --r-blob-1: 60% 40% 70% 30% / 50% 60% 40% 50%;
  --r-blob-2: 40% 60% 30% 70% / 60% 40% 60% 40%;
  --r-blob-3: 70% 30% 50% 50% / 30% 60% 40% 70%;

  --sh-pop: 6px 6px 0 var(--noir);
  --sh-pop-lg: 10px 10px 0 var(--noir);
  --sh-pop-xl: 14px 14px 0 var(--noir);

  --b-noir: 3px solid var(--noir);
  --b-noir-thin: 2px solid var(--noir);

  --t-fast: .15s cubic-bezier(.4, 0, .2, 1);
  --t-med: .3s cubic-bezier(.4, 0, .2, 1);
  --t-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--fond);
  color: var(--noir);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 8% 15%, var(--jaune-clair) 0%, transparent 2%),
    radial-gradient(circle at 92% 22%, var(--rose-clair) 0%, transparent 2.5%),
    radial-gradient(circle at 15% 68%, var(--vert-clair) 0%, transparent 2.5%),
    radial-gradient(circle at 88% 78%, var(--bleu-clair) 0%, transparent 2.5%),
    radial-gradient(circle at 50% 45%, var(--violet-clair) 0%, transparent 2%);
  background-size: 1100px 1100px;
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--jaune); color: var(--noir); }
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---------- TYPO ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--noir);
}
h1 { font-size: clamp(3rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

.hand {
  font-family: var(--ff-hand);
  font-weight: 500;
  font-size: 1.2em;
  display: inline-block;
  transform: rotate(-3deg);
}

.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--noir);
  color: var(--jaune);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--rose);
  margin-bottom: 22px;
}
.eyebrow.rose { background: var(--rose); color: var(--blanc); box-shadow: 4px 4px 0 var(--noir); }
.eyebrow.bleu { background: var(--bleu); color: var(--blanc); box-shadow: 4px 4px 0 var(--jaune); }
.eyebrow.jaune { background: var(--jaune); color: var(--noir); box-shadow: 4px 4px 0 var(--bleu); }
.eyebrow.vert { background: var(--vert); color: var(--noir); box-shadow: 4px 4px 0 var(--rose); }

.underline-jaune, .underline-rose, .underline-bleu, .underline-vert {
  background-repeat: no-repeat;
  background-size: 100% .35em;
  background-position: 0 88%;
  padding: 0 .1em;
  display: inline;
}
.underline-jaune { background-image: linear-gradient(var(--jaune), var(--jaune)); }
.underline-rose { background-image: linear-gradient(var(--rose), var(--rose)); }
.underline-bleu { background-image: linear-gradient(var(--bleu), var(--bleu)); color: var(--blanc); }
.underline-vert { background-image: linear-gradient(var(--vert), var(--vert)); }

.t-rose { color: var(--rose); }
.t-bleu { color: var(--bleu); }
.t-jaune { color: var(--jaune-fonce); }
.t-vert { color: var(--vert-fonce); }
.t-orange { color: var(--orange-fonce); }
.t-violet { color: var(--violet-fonce); }
.t-noir { color: var(--noir); }
.t-blanc { color: var(--blanc); }

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
}
section {
  padding: clamp(60px, 9vw, 110px) 0;
  position: relative;
}

.bg-cream { background: var(--fond); }
.bg-cream-2 { background: var(--fond-2); }
.bg-rose { background: var(--rose); color: var(--blanc); }
.bg-rose-clair { background: var(--rose-clair); }
.bg-bleu { background: var(--bleu); color: var(--blanc); }
.bg-bleu-clair { background: var(--bleu-clair); }
.bg-jaune { background: var(--jaune); }
.bg-jaune-clair { background: var(--jaune-clair); }
.bg-vert { background: var(--vert); }
.bg-vert-clair { background: var(--vert-clair); }
.bg-violet { background: var(--violet); }
.bg-violet-clair { background: var(--violet-clair); }
.bg-orange { background: var(--orange); color: var(--blanc); }
.bg-orange-clair { background: var(--orange-clair); }
.bg-noir { background: var(--noir); color: var(--blanc); }

.bg-bleu h2, .bg-bleu h3, .bg-rose h2, .bg-rose h3,
.bg-orange h2, .bg-orange h3, .bg-noir h2, .bg-noir h3 { color: var(--blanc); }

/* ---------- HEADER ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fond);
  border-bottom: var(--b-noir);
}
.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--t-bounce);
}
.brand:hover { transform: rotate(-3deg) scale(1.04); }
.brand img { height: 52px; width: auto; max-width: 180px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--noir);
  padding: 10px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: all var(--t-fast);
}
.nav a:not(.nav-cta):hover {
  background: var(--jaune);
  transform: translateY(-2px) rotate(-2deg);
}
.nav a.active:not(.nav-cta) {
  background: var(--rose);
  color: var(--blanc);
  transform: rotate(-2deg);
}
.nav-cta {
  background: var(--noir);
  color: var(--blanc) !important;
  padding: 10px 20px !important;
  border-radius: var(--r-pill);
  box-shadow: 4px 4px 0 var(--jaune);
  margin-left: 6px;
  transition: all var(--t-bounce);
}
.nav-cta:hover {
  transform: translate(-2px, -2px) rotate(-2deg);
  box-shadow: 6px 6px 0 var(--jaune);
}

.burger {
  display: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  position: relative;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 var(--jaune);
}
.burger span {
  display: block;
  width: 20px; height: 2.5px;
  background: currentColor;
  border-radius: 99px;
  position: absolute;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- BUTTONS BALLONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: var(--r-pill);
  border: var(--b-noir);
  background: var(--blanc);
  color: var(--noir);
  text-decoration: none;
  box-shadow: var(--sh-pop);
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
  white-space: nowrap;
}
.btn:hover {
  transform: translate(-3px, -3px) rotate(-2deg);
  box-shadow: 9px 9px 0 var(--noir);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--noir);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.btn:hover svg { transform: translateX(4px) rotate(-15deg); }

.btn-rose { background: var(--rose); color: var(--blanc); }
.btn-bleu { background: var(--bleu); color: var(--blanc); }
.btn-jaune { background: var(--jaune); color: var(--noir); }
.btn-vert { background: var(--vert); color: var(--noir); }
.btn-orange { background: var(--orange); color: var(--blanc); }
.btn-violet { background: var(--violet); color: var(--noir); }
.btn-noir { background: var(--noir); color: var(--blanc); }
.btn-blanc { background: var(--blanc); color: var(--noir); }

.btn-lg { padding: 20px 36px; font-size: 1.2rem; box-shadow: 8px 8px 0 var(--noir); }
.btn-lg:hover { box-shadow: 11px 11px 0 var(--noir); }
.btn-xl { padding: 24px 44px; font-size: 1.4rem; }

/* ---------- HERO ---------- */
.hero {
  padding: clamp(50px, 8vw, 90px) 0 clamp(60px, 10vw, 120px);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.hero-text { position: relative; z-index: 2; }
.hero-text h1 { margin: 16px 0 24px; line-height: .92; }
.hero-text h2 {
  font-family: var(--ff-body);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 22px;
  max-width: 540px;
}
.hero-text p {
  font-size: 1.08rem;
  max-width: 560px;
  margin-bottom: 16px;
  color: var(--gris);
}
.hero-text strong { color: var(--noir); font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 460px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 4px solid var(--noir);
  box-shadow: var(--sh-pop-xl);
  background: var(--blanc);
  transform: rotate(-2deg);
  z-index: 2;
  transition: transform var(--t-bounce);
}
.hero-photo:hover { transform: rotate(0) scale(1.02); }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.bulle {
  position: absolute;
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: var(--sh-pop);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  animation: wobble 4s ease-in-out infinite;
}
.bulle .em { font-size: 1.6rem; }
.bulle:nth-of-type(1) {
  top: -8px; left: -28px;
  background: var(--jaune);
  animation-delay: 0s;
}
.bulle:nth-of-type(2) {
  bottom: 12%; right: -40px;
  background: var(--rose);
  color: var(--blanc);
  animation-delay: 1s;
}
.bulle:nth-of-type(3) {
  bottom: -20px; left: 6%;
  background: var(--vert);
  animation-delay: 2s;
}
@keyframes wobble {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.mascot {
  position: absolute;
  font-size: clamp(60px, 8vw, 110px);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(4px 4px 0 var(--noir));
  animation: float-soft 6s ease-in-out infinite;
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}

/* ---------- SECTION HEAD ---------- */
.section-head {
  max-width: 820px;
  margin: 0 auto clamp(40px, 6vw, 60px);
  text-align: center;
}
.section-head h2 { margin-bottom: 18px; }
.section-head p {
  font-size: 1.1rem;
  color: var(--gris);
  max-width: 60ch;
  margin: 0 auto;
}
.bg-bleu .section-head p, .bg-rose .section-head p,
.bg-orange .section-head p, .bg-noir .section-head p { color: rgba(255,255,255,.92); }

/* ---------- STICKER CARDS ---------- */
.sticker {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow: var(--sh-pop);
  transition: transform var(--t-bounce), box-shadow var(--t-bounce);
  position: relative;
}
.sticker:hover {
  transform: translate(-3px, -3px) rotate(-1deg);
  box-shadow: 9px 9px 0 var(--noir);
}
.sticker.rose { background: var(--rose-clair); }
.sticker.bleu { background: var(--bleu-clair); }
.sticker.jaune { background: var(--jaune-clair); }
.sticker.vert { background: var(--vert-clair); }
.sticker.orange { background: var(--orange-clair); }
.sticker.violet { background: var(--violet-clair); }
.sticker.plain-rose { background: var(--rose); color: var(--blanc); }
.sticker.plain-bleu { background: var(--bleu); color: var(--blanc); }
.sticker.plain-jaune { background: var(--jaune); color: var(--noir); }
.sticker.plain-vert { background: var(--vert); color: var(--noir); }
.sticker.plain-orange { background: var(--orange); color: var(--blanc); }
.sticker.plain-violet { background: var(--violet); color: var(--noir); }
.sticker.plain-rose h3, .sticker.plain-bleu h3, .sticker.plain-orange h3 { color: var(--blanc); }

.cloud-card {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-blob-1);
  padding: 36px 32px;
  box-shadow: var(--sh-pop-lg);
  transition: transform var(--t-bounce), box-shadow var(--t-bounce), border-radius var(--t-med);
  text-align: center;
  position: relative;
}
.cloud-card:nth-child(2n) { border-radius: var(--r-blob-2); }
.cloud-card:nth-child(3n) { border-radius: var(--r-blob-3); }
.cloud-card:hover {
  transform: translate(-3px, -3px) rotate(-1.5deg);
  box-shadow: 14px 14px 0 var(--noir);
  border-radius: var(--r-blob-3);
}

.icon-pop {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--jaune);
  border: var(--b-noir);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  box-shadow: var(--sh-pop);
  margin-bottom: 22px;
  transition: transform var(--t-bounce);
}
.cloud-card:hover .icon-pop { transform: rotate(-15deg) scale(1.1); }
.icon-pop.rose { background: var(--rose); color: var(--blanc); }
.icon-pop.bleu { background: var(--bleu); color: var(--blanc); }
.icon-pop.vert { background: var(--vert); }
.icon-pop.orange { background: var(--orange); color: var(--blanc); }
.icon-pop.violet { background: var(--violet); }
.icon-pop.blanc { background: var(--blanc); }

/* ---------- GRID ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- STATS ---------- */
.stats-pop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-pop {
  text-align: center;
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 30px 18px;
  box-shadow: var(--sh-pop);
  transform: rotate(-1.5deg);
  transition: transform var(--t-bounce);
}
.stat-pop:nth-child(2n) { transform: rotate(1.5deg); }
.stat-pop:hover { transform: rotate(0) translateY(-4px); }
.stat-num-pop {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1;
  color: var(--rose);
}
.stat-pop:nth-child(2) .stat-num-pop { color: var(--bleu); }
.stat-pop:nth-child(3) .stat-num-pop { color: var(--vert-fonce); }
.stat-pop:nth-child(4) .stat-num-pop { color: var(--orange-fonce); }
.stat-label-pop {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--noir);
  margin-top: 10px;
  display: block;
}

/* ---------- DECORATIONS ---------- */
.decor-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.decor-shape.star {
  width: 60px; height: 60px;
  background: var(--jaune);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(3px 3px 0 var(--noir));
  animation: spin 12s linear infinite;
}
.decor-shape.blob {
  width: 90px; height: 90px;
  background: var(--vert);
  border-radius: var(--r-blob-1);
  border: var(--b-noir);
  animation: morph 8s ease-in-out infinite;
}
.decor-shape.circle {
  width: 60px; height: 60px;
  background: var(--violet);
  border: var(--b-noir);
  border-radius: 50%;
}
.decor-shape.squiggle {
  width: 90px; height: 30px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' fill='none'><path d='M2 18 Q 22 -2 45 15 T 88 12' stroke='%231a1a25' stroke-width='5' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: rotate(-5deg); }
  50% { border-radius: 30% 70% 40% 60% / 60% 40% 60% 40%; transform: rotate(5deg); }
}

/* ---------- QUOTE ---------- */
.quote-pop {
  background: var(--jaune);
  border: var(--b-noir);
  border-radius: var(--r-blob-1);
  padding: clamp(36px, 5vw, 60px);
  position: relative;
  box-shadow: var(--sh-pop-lg);
  transform: rotate(-1deg);
}
.quote-pop::before {
  content: "\201C";
  position: absolute;
  top: -40px; left: 28px;
  font-family: var(--ff-hand);
  font-size: 10rem;
  color: var(--noir);
  line-height: 1;
}
.quote-pop blockquote {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--noir);
  margin-top: 14px;
}
.quote-pop cite {
  display: block;
  font-family: var(--ff-hand);
  font-size: 1.4rem;
  font-style: normal;
  color: var(--rose-fonce);
  margin-top: 18px;
  text-align: right;
}

/* ---------- MARQUEE ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  background: var(--noir);
  color: var(--jaune);
  border-top: var(--b-noir);
  border-bottom: var(--b-noir);
}
.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marquee-item .star-tiny {
  width: 22px; height: 22px;
  background: var(--jaune);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: inline-block;
}
.marquee-item:nth-child(3n) .star-tiny { background: var(--rose); }
.marquee-item:nth-child(3n+1) .star-tiny { background: var(--jaune); }
.marquee-item:nth-child(3n+2) .star-tiny { background: var(--vert); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- TIMELINE ---------- */
.timeline-pop {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.timeline-pop::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 7%; right: 7%;
  height: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 5' preserveAspectRatio='none'><line x1='0' y1='2.5' x2='200' y2='2.5' stroke='%231a1a25' stroke-width='4' stroke-dasharray='8 10' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 200px 5px;
  z-index: 0;
}
.step-pop {
  text-align: center;
  position: relative;
  z-index: 1;
}
.step-pop .step-icon {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--blanc);
  border: var(--b-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  margin: 0 auto 18px;
  box-shadow: var(--sh-pop);
  transform: rotate(-3deg);
  transition: transform var(--t-bounce);
}
.step-pop:nth-child(2) .step-icon { background: var(--rose); transform: rotate(3deg); }
.step-pop:nth-child(3) .step-icon { background: var(--bleu); transform: rotate(-3deg); }
.step-pop:nth-child(4) .step-icon { background: var(--jaune); transform: rotate(3deg); }
.step-pop:nth-child(5) .step-icon { background: var(--vert); transform: rotate(-3deg); }
.step-pop:hover .step-icon { transform: rotate(0) scale(1.1); }
.step-pop h3 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.step-pop p { font-size: .92rem; color: var(--gris); }

/* ---------- PROCESS ---------- */
.process-pop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.process-step-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--sh-pop);
  transform: rotate(-1deg);
  position: relative;
  transition: transform var(--t-bounce);
}
.process-step-pop:nth-child(2n) { transform: rotate(1deg); }
.process-step-pop:hover { transform: rotate(0) translateY(-6px); }
.process-step-pop .num {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: var(--b-noir);
  background: var(--rose);
  color: var(--blanc);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 3px 3px 0 var(--noir);
}
.process-step-pop:nth-child(2) .num { background: var(--bleu); }
.process-step-pop:nth-child(3) .num { background: var(--jaune); color: var(--noir); }
.process-step-pop:nth-child(4) .num { background: var(--vert); color: var(--noir); }

/* ---------- FAQ ---------- */
.faq-pop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  transition: transform var(--t-fast);
}
.faq-item-pop:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--noir); }
.faq-q-pop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 28px;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--noir);
}
.faq-q-pop .plus {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: var(--b-noir-thin);
  background: var(--jaune);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  transition: transform var(--t-bounce), background var(--t-fast);
}
.faq-item-pop.is-open .faq-q-pop .plus {
  transform: rotate(135deg);
  background: var(--rose);
  color: var(--blanc);
}
.faq-a-pop {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-med);
}
.faq-a-inner-pop {
  padding: 0 28px 22px;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- BOOK FEATURE ---------- */
.book-feature-pop {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.book-cover-pop {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 380px;
  border-radius: var(--r-md);
  background: var(--vert);
  border: var(--b-noir);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-pop-xl);
  transform: rotate(-4deg);
  transition: transform var(--t-bounce);
}
.book-feature-pop:hover .book-cover-pop { transform: rotate(0); }
.book-cover-inner-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-sm);
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.book-cover-inner-pop .mini-logo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--rose);
  margin-bottom: 14px;
}
.book-cover-inner-pop h3 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin-bottom: 12px;
  line-height: 1;
}
.book-cover-inner-pop .sub {
  font-size: .92rem;
  color: var(--gris);
  margin-bottom: 18px;
}
.book-cover-inner-pop .price-tag {
  display: inline-block;
  background: var(--noir);
  color: var(--jaune);
  font-family: var(--ff-display);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: 1.1rem;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials-pop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 30px;
  box-shadow: var(--sh-pop-lg);
  transform: rotate(-1.5deg);
  transition: transform var(--t-bounce);
  display: flex;
  flex-direction: column;
}
.testimonial-pop:nth-child(2) { transform: rotate(1.5deg); background: var(--rose-clair); }
.testimonial-pop:nth-child(3) { transform: rotate(-1deg); background: var(--bleu-clair); }
.testimonial-pop:hover { transform: rotate(0) translateY(-6px); }
.testimonial-pop .stars {
  color: var(--jaune-fonce);
  font-size: 1.3rem;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.testimonial-pop p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--noir);
}
.testimonial-pop .who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 2px dashed var(--noir);
}
.testimonial-pop .avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: var(--b-noir);
  background: var(--jaune);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.3rem;
}
.testimonial-pop:nth-child(2) .avatar { background: var(--vert); }
.testimonial-pop:nth-child(3) .avatar { background: var(--orange); color: var(--blanc); }
.testimonial-pop .name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
}
.testimonial-pop .role {
  font-size: .85rem;
  color: var(--gris);
}

/* ---------- PUBLICS ---------- */
.publics-pop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.public-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-blob-1);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--sh-pop);
  transition: transform var(--t-bounce), border-radius var(--t-med);
}
.public-pop:nth-child(2n) { border-radius: var(--r-blob-2); background: var(--jaune-clair); }
.public-pop:nth-child(3n) { background: var(--vert-clair); }
.public-pop:nth-child(4n) { background: var(--rose-clair); }
.public-pop:hover {
  transform: rotate(-3deg) translateY(-4px);
  border-radius: var(--r-blob-3);
}
.public-pop .em { font-size: 3rem; display: block; margin-bottom: 12px; }
.public-pop h4 {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- CONTACT BLOCKS ---------- */
.contact-grid-pop {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: start;
}
.contact-block-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: var(--sh-pop);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
  transition: transform var(--t-fast);
}
.contact-block-pop:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--noir); }
.contact-block-pop:nth-child(1) { background: var(--rose-clair); }
.contact-block-pop:nth-child(2) { background: var(--jaune-clair); }
.contact-block-pop:nth-child(3) { background: var(--vert-clair); }
.contact-block-pop:nth-child(4) { background: var(--violet-clair); }
.contact-block-pop .icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: var(--b-noir-thin);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--blanc);
}
.contact-block-pop h3 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.contact-block-pop p, .contact-block-pop a {
  font-size: .95rem;
  color: var(--gris);
}
.contact-block-pop a { color: var(--rose-fonce); font-weight: 700; }

/* ---------- FORM ---------- */
.form-card-pop {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--sh-pop-lg);
}
.form-row-pop { display: grid; gap: 18px; margin-bottom: 20px; }
.form-row-pop.two { grid-template-columns: 1fr 1fr; }
.field-pop { display: flex; flex-direction: column; gap: 8px; }
.field-pop label {
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--noir);
}
.field-pop input, .field-pop textarea, .field-pop select {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border: var(--b-noir-thin);
  background: var(--fond);
  font-family: inherit;
  font-size: 1rem;
  color: var(--noir);
  font-weight: 500;
  transition: border var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field-pop input:focus, .field-pop textarea:focus, .field-pop select:focus {
  outline: 0;
  border-color: var(--rose);
  background: var(--blanc);
  box-shadow: 4px 4px 0 var(--rose);
}
.field-pop textarea { min-height: 140px; resize: vertical; }
.field-pop .err { font-size: .85rem; color: var(--rose-fonce); display: none; font-weight: 600; }
.field-pop.has-error input, .field-pop.has-error textarea, .field-pop.has-error select { border-color: var(--rose-fonce); background: var(--rose-clair); }
.field-pop.has-error .err { display: block; }
.form-consent-pop {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--gris);
  margin-bottom: 22px;
}
.form-consent-pop input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--rose); }
.form-success-pop {
  display: none;
  background: var(--jaune);
  border: var(--b-noir);
  border-radius: var(--r-md);
  padding: 28px;
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--noir);
  text-align: center;
  box-shadow: var(--sh-pop);
}
.form-card-pop.is-sent .form-success-pop { display: block; }
.form-card-pop.is-sent form { display: none; }

/* ---------- UNIVERS CERVOLAND ---------- */
.univers-pop {
  background: var(--noir);
  color: var(--blanc);
  position: relative;
  overflow: hidden;
}
.univers-pop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, var(--jaune) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 28% 70%, var(--rose) 50%, transparent 50%),
    radial-gradient(2px 2px at 45% 25%, var(--blanc) 50%, transparent 50%),
    radial-gradient(2px 2px at 62% 55%, var(--vert) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 78% 18%, var(--jaune) 50%, transparent 50%),
    radial-gradient(2px 2px at 85% 75%, var(--rose) 50%, transparent 50%),
    radial-gradient(2px 2px at 18% 88%, var(--blanc) 50%, transparent 50%),
    radial-gradient(2px 2px at 95% 42%, var(--blanc) 50%, transparent 50%);
  pointer-events: none;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }
.univers-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.univers-logo {
  background: var(--blanc);
  border: var(--b-noir);
  border-radius: var(--r-blob-1);
  padding: 36px;
  box-shadow: var(--sh-pop-xl);
  text-align: center;
  transform: rotate(-3deg);
  transition: transform var(--t-bounce), border-radius var(--t-med);
}
.univers-logo:hover { transform: rotate(0); border-radius: var(--r-blob-2); }
.univers-logo img { max-width: 280px; margin: 0 auto; }
.univers-pop h2 { color: var(--blanc); }
.univers-pop h2 span.a { color: var(--rose); }
.univers-pop h2 span.b { color: var(--jaune); }
.univers-pop p { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.univers-quote-pop {
  background: rgba(255, 208, 40, .14);
  border-left: 5px solid var(--jaune);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 20px 24px;
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--blanc);
  margin-top: 22px;
}

/* ---------- CTA BAND ---------- */
.cta-band {
  background: var(--rose);
  color: var(--blanc);
  position: relative;
  text-align: center;
  border-top: var(--b-noir);
  border-bottom: var(--b-noir);
}
.cta-band h2 { color: var(--blanc); margin-bottom: 14px; }
.cta-band p { max-width: 640px; margin: 0 auto 30px; font-size: 1.1rem; opacity: .94; }

/* ---------- FOOTER ---------- */
.footer-pop {
  background: var(--noir);
  color: rgba(255, 255, 255, .85);
  padding: 70px 0 30px;
  position: relative;
  border-top: var(--b-noir);
}
.footer-pop::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--rose), var(--jaune), var(--vert), var(--bleu), var(--rose));
}
.footer-grid-pop {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand-pop { max-width: 320px; }
.footer-brand-pop h3 {
  color: var(--blanc);
  font-family: var(--ff-display);
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.footer-brand-pop .tag {
  color: var(--jaune);
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
  display: block;
}
.footer-brand-pop p { font-size: .94rem; opacity: .8; margin-bottom: 18px; }
.footer-pop h4 {
  font-family: var(--ff-display);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--jaune);
  margin-bottom: 18px;
}
.footer-pop ul { display: flex; flex-direction: column; gap: 10px; }
.footer-pop ul a {
  color: rgba(255,255,255,.85);
  font-size: .94rem;
  transition: color var(--t-fast);
}
.footer-pop ul a:hover { color: var(--rose); }
.footer-social-pop { display: flex; gap: 10px; margin-top: 14px; }
.footer-social-pop a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
  transition: all var(--t-fast);
}
.footer-social-pop a:hover {
  background: var(--rose);
  border-color: var(--rose);
  transform: translate(-2px, -2px) rotate(-6deg);
  box-shadow: 3px 3px 0 var(--jaune);
}
.footer-social-pop svg { width: 18px; height: 18px; }
.footer-bottom-pop {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
  opacity: .7;
}

/* ---------- REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.34, 1.56, .64, 1), transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(.9); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in { transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .4s; }

/* ---------- TAGS ---------- */
.tag-pop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--jaune);
  color: var(--noir);
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--r-pill);
  border: 2px solid var(--noir);
}
.tag-pop.rose { background: var(--rose); color: var(--blanc); }
.tag-pop.bleu { background: var(--bleu); color: var(--blanc); }
.tag-pop.vert { background: var(--vert); }
.tag-pop.orange { background: var(--orange); color: var(--blanc); }
.tag-pop.violet { background: var(--violet); }

/* ---------- RESPONSIVE ---------- */

/* Tablette / desktop intermédiaire : bascule en burger nav */
@media (max-width: 1100px) {
  :root { --pad-x: clamp(18px, 4vw, 60px); }
  .grid-4, .grid-5, .stats-pop, .publics-pop, .process-pop { grid-template-columns: repeat(2, 1fr); }
  .timeline-pop { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .timeline-pop::before { display: none; }
  .footer-grid-pop { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--fond);
    flex-direction: column;
    align-items: stretch;
    padding: 24px var(--pad-x);
    gap: 10px;
    overflow-y: auto;
    z-index: 99;
  }
  .nav.is-open a {
    padding: 16px 22px;
    font-size: 1.1rem;
    border-radius: var(--r-md);
    border: var(--b-noir-thin);
    background: var(--blanc);
    white-space: normal;
  }
  .nav.is-open a.active { background: var(--rose); color: var(--blanc); }
  .nav-cta { margin: 12px 0 0 !important; text-align: center; justify-content: center; }
  .burger { display: flex; }
  body.menu-open { overflow: hidden; }
}

/* Tablette portrait & mobile large */
@media (max-width: 920px) {
  .hero-grid, .univers-grid, .contact-grid-pop, .book-feature-pop { grid-template-columns: 1fr; }
  .hero { padding-top: clamp(30px, 6vw, 60px); }
  .hero-visual {
    aspect-ratio: 1 / 1;
    max-width: 460px;
    width: calc(100% - 64px);
    margin: 20px auto 30px;
    min-height: auto;
  }
  /* Bulles flottantes : repositionnées en sécurité dans la zone visible */
  .bulle:nth-of-type(1) { top: -14px; left: 12px; }
  .bulle:nth-of-type(2) { bottom: 12%; right: 4px; }
  .bulle:nth-of-type(3) { bottom: -16px; left: 28%; }
  .book-cover-pop { max-width: 320px; margin: 0 auto; transform: none; }
  /* Décor shapes : on en cache certains pour pas overflow */
  .decor-shape.squiggle, .decor-shape.blob { transform: scale(.7); }
  .mascot { font-size: clamp(50px, 10vw, 80px); }
  /* Cards rotation atténuée */
  .stat-pop, .stat-pop:nth-child(2n) { transform: rotate(-1deg); }
  .testimonial-pop, .testimonial-pop:nth-child(2), .testimonial-pop:nth-child(3) { transform: rotate(0); }
  /* Quote */
  .quote-pop::before { font-size: 7rem; top: -22px; }
  /* Form */
  .form-row-pop.two { grid-template-columns: 1fr; }
}

/* Mobile (≤ 680px) */
@media (max-width: 680px) {
  :root {
    --pad-x: 18px;
    --r-md: 22px;
    --r-lg: 32px;
    --sh-pop: 4px 4px 0 var(--noir);
    --sh-pop-lg: 6px 6px 0 var(--noir);
    --sh-pop-xl: 8px 8px 0 var(--noir);
  }
  body { font-size: 16px; }
  h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: .95; }
  h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  h3 { font-size: 1.25rem; }
  .grid-2, .grid-3, .grid-4, .grid-5,
  .stats-pop, .publics-pop, .process-pop,
  .testimonials-pop, .timeline-pop { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid-pop { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-pop { flex-direction: column; gap: 8px; text-align: center; }
  .marquee-item { font-size: 1.05rem; gap: 12px; }
  .marquee-track { gap: 28px; }
  .marquee { padding: 18px 0; }
  .marquee-item .star-tiny { width: 18px; height: 18px; }
  section { padding: 50px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head p { font-size: 1rem; }
  /* Hero compacté */
  .hero { padding: 30px 0 50px; }
  .hero-text h2 { font-size: 1.1rem; }
  .hero-text p { font-size: 1rem; }
  .hero-visual {
    width: calc(100% - 40px);
    max-width: 360px;
    margin: 24px auto;
    aspect-ratio: 4 / 5;
    min-height: 380px;
  }
  /* Bulles plus compactes et bien dans la zone */
  .bulle {
    padding: 10px 14px;
    font-size: .85rem;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--noir);
  }
  .bulle .em { font-size: 1.2rem; }
  .bulle:nth-of-type(1) { top: -10px; left: 8px; }
  .bulle:nth-of-type(2) { bottom: 12%; right: 4px; }
  .bulle:nth-of-type(3) { bottom: -10px; left: 22%; }
  /* CTAs full-width sur mobile */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; }
  /* Cards compactées */
  .sticker, .cloud-card { padding: 24px; }
  .icon-pop { width: 70px; height: 70px; font-size: 2rem; margin-bottom: 18px; }
  /* Quote */
  .quote-pop { padding: 32px 24px; transform: rotate(0); }
  .quote-pop::before { font-size: 6rem; top: -16px; left: 16px; }
  .quote-pop blockquote { font-size: 1.15rem; }
  /* Process steps */
  .process-step-pop, .process-step-pop:nth-child(2n) { transform: rotate(0); }
  /* Timeline icons rotation à 0 */
  .step-pop .step-icon { transform: rotate(0); width: 90px; height: 90px; font-size: 2.2rem; }
  /* Univers section : logo non incliné */
  .univers-logo { transform: rotate(0); padding: 24px; }
  .univers-logo img { max-width: 220px; }
  /* Book cover */
  .book-cover-pop { max-width: 280px; transform: rotate(0); padding: 20px; }
  .book-cover-inner-pop { padding: 24px 18px; }
  .book-cover-inner-pop h3 { font-size: 1.8rem; }
  /* Decor shapes : on cache les plus gros */
  .decor-shape.blob { display: none; }
  .decor-shape.squiggle { transform: scale(.6); }
  .mascot { display: none; }
  /* Stats */
  .stat-num-pop { font-size: 2.6rem; }
  .stat-label-pop { font-size: .78rem; }
  /* FAQ */
  .faq-q-pop { font-size: .98rem; padding: 18px 22px; gap: 12px; }
  .faq-q-pop .plus { width: 30px; height: 30px; font-size: 1.2rem; }
  .faq-a-inner-pop { padding: 0 22px 18px; font-size: .95rem; }
  /* CTA band buttons */
  .cta-band .btn { width: 100%; max-width: 320px; }
  /* Tags responsive */
  .tag-pop { font-size: .72rem; padding: 5px 12px; }
  /* Eyebrow */
  .eyebrow { font-size: .78rem; padding: 6px 14px; }
  /* Nav burger */
  .header .brand img { height: 44px; }
  .burger { width: 42px; height: 42px; }
  .nav-wrap { padding: 10px 18px; gap: 12px; }
}

/* Très petits écrans (< 380px) */
@media (max-width: 380px) {
  :root { --pad-x: 14px; }
  h1 { font-size: clamp(2rem, 12vw, 2.8rem); }
  h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero-visual { min-height: 320px; max-width: 280px; }
  .bulle { font-size: .75rem; padding: 8px 12px; }
  .bulle:nth-of-type(1) { top: -8px; left: 0; }
  .bulle:nth-of-type(2) { right: 0; }
  .bulle:nth-of-type(3) { bottom: -8px; left: 18%; }
  .btn { padding: 14px 22px; font-size: .95rem; }
  .btn-lg { padding: 16px 26px; font-size: 1.05rem; }
  .quote-pop blockquote { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}