/* ============================================
   ECOTHERM — FULL COMIC BOOK EDITION
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #fffde7;
  color: #111;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ===== TOKENS ===== */
:root {
  --black:    #111;
  --yellow:   #fbbf24;
  --yellow-d: #d97706;
  --red:      #ef4444;
  --red-d:    #b91c1c;
  --blue:     #2563eb;
  --blue-d:   #1d4ed8;
  --blue-l:   #dbeafe;
  --green:    #059669;
  --green-l:  #d1fae5;
  --cream:    #fffde7;
  --white:    #fff;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --t: .15s ease;
  --r-md: 8px;
  --r-lg: 12px;
  --border: 3px solid #111;
  --border-thick: 5px solid #111;
  --sh: 4px 4px 0 #111;
  --sh-big: 6px 6px 0 #111;
}

/* ===== LAYOUT ===== */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ===== ANIMATIONS ===== */
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes wobble   { 0%,100%{transform:rotate(-5deg) scale(1)} 50%{transform:rotate(5deg) scale(1.07)} }
@keyframes wobble2  { 0%,100%{transform:rotate(4deg) scale(1)} 50%{transform:rotate(-4deg) scale(1.06)} }
@keyframes zap      { 0%,100%{opacity:1;transform:scale(1) rotate(-10deg)} 50%{opacity:.7;transform:scale(1.35) rotate(14deg)} }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes popIn    { 0%{transform:scale(.7) rotate(-8deg)} 80%{transform:scale(1.08) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes rayspin  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ===== PERSONNAGES — ANIMATIONS LUDIQUES ===== */
@keyframes char-jump {
  0%   { transform: translateY(0)   scaleY(1)    scaleX(1); }
  20%  { transform: translateY(0)   scaleY(.75)  scaleX(1.25); }   /* squash au sol */
  45%  { transform: translateY(-70px) scaleY(1.15) scaleX(.88); }  /* en l'air + stretch */
  65%  { transform: translateY(-80px) scaleY(1.1)  scaleX(.9);  }  /* apex */
  80%  { transform: translateY(0)   scaleY(.8)   scaleX(1.2);  }   /* atterrissage squash */
  90%  { transform: translateY(-18px) scaleY(1.05) scaleX(.97); }  /* petit rebond */
  100% { transform: translateY(0)   scaleY(1)    scaleX(1); }
}
@keyframes char-wave {
  0%,100% { transform: rotate(0deg)  translateY(0); }
  15%     { transform: rotate(-14deg) translateY(-6px); }
  30%     { transform: rotate(12deg)  translateY(-10px); }
  45%     { transform: rotate(-10deg) translateY(-6px); }
  60%     { transform: rotate(8deg)   translateY(-4px); }
  75%     { transform: rotate(-5deg)  translateY(-2px); }
}
@keyframes char-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  30%  { transform: rotate(180deg) scale(1.15); }
  60%  { transform: rotate(340deg) scale(1.1); }
  80%  { transform: rotate(380deg) scale(.95); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes char-shake {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-8deg) translateX(-6px); }
  30%     { transform: rotate( 8deg) translateX( 6px); }
  45%     { transform: rotate(-6deg) translateX(-4px); }
  60%     { transform: rotate( 6deg) translateX( 4px); }
  75%     { transform: rotate(-3deg) translateX(-2px); }
  90%     { transform: rotate( 3deg) translateX( 2px); }
}
@keyframes char-squash {
  0%,100% { transform: scaleY(1) scaleX(1); }
  50%     { transform: scaleY(.72) scaleX(1.3); }
}
@keyframes bubble-swap {
  0%   { opacity:1; transform: scale(1)   rotate(-2deg); }
  40%  { opacity:0; transform: scale(.6)  rotate(-10deg); }
  60%  { opacity:0; transform: scale(.6)  rotate(10deg); }
  100% { opacity:1; transform: scale(1)   rotate(-2deg); }
}

/* Classes déclenchées par JS */
.char-jump  { animation: char-jump  .7s cubic-bezier(.36,.07,.19,.97) forwards !important; }
.char-wave  { animation: char-wave  .9s ease-in-out forwards !important; }
.char-spin  { animation: char-spin  .8s cubic-bezier(.36,.07,.19,.97) forwards !important; }
.char-shake { animation: char-shake .6s ease-in-out forwards !important; }
.char-squash{ animation: char-squash .4s ease forwards !important; }

/* Transition douce sur les transforms libres (scroll / souris) */
.hc-left,
.hc-right { will-change: transform; transform-origin: bottom center; }

/* Bulle de speech dynamique */
.hc-bubble .hc-body { transition: opacity .25s ease, transform .25s ease; }

/* ===== SCROLL ANIM ===== */
[data-anim] { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
[data-anim].in { opacity:1; transform:none; }
.spin { animation: spin .8s linear infinite; }

/* ============================================
   SPLASH SCREEN
   ============================================ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: splashOut .5s ease forwards;
  animation-delay: 1.8s;
  pointer-events: none;
}
@keyframes splashOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); pointer-events: none; visibility: hidden; }
}

/* Rayons rotatifs */
.splash-rays {
  position: absolute; inset: -50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(251,191,36,.18) 0deg 6deg,
    transparent 6deg 18deg
  );
  animation: rayspin 3s linear infinite;
}

/* Étoile centrale */
.splash-burst {
  position: absolute;
  width: 320px; height: 320px;
  animation: splashBurst .4s cubic-bezier(.17,.67,.28,1.4) both;
}
@keyframes splashBurst {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.splash-burst-inner {
  width: 100%; height: 100%;
  background: var(--yellow);
  clip-path: polygon(
    50% 0%, 61% 9%, 74% 4%, 77% 17%,
    91% 16%, 87% 30%, 100% 38%, 89% 50%,
    100% 62%, 86% 66%, 91% 80%, 76% 79%,
    73% 93%, 60% 88%, 50% 100%, 40% 88%,
    27% 93%, 24% 79%, 9% 80%, 14% 66%,
    0% 62%, 11% 50%, 0% 38%, 13% 30%,
    9% 16%, 23% 17%, 26% 4%, 39% 9%
  );
}

/* Contenu splash */
.splash-content {
  position: relative; z-index: 2;
  text-align: center;
  animation: splashContent .35s ease both;
  animation-delay: .25s;
}
@keyframes splashContent {
  0%   { opacity: 0; transform: scale(.6) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1)  rotate(0deg); }
}
.splash-icon {
  font-size: 2.4rem; color: var(--white);
  animation: wobble 1s ease-in-out infinite;
}
.splash-logo {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(3rem, 14vw, 6rem);
  letter-spacing: .12em;
  color: var(--black);
  text-shadow: 4px 4px 0 var(--yellow-d), 7px 7px 0 rgba(0,0,0,.15);
  line-height: 1;
}
.splash-tagline {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(1.2rem, 5vw, 2rem);
  letter-spacing: .1em;
  color: var(--red);
  text-shadow: 2px 2px 0 #7f1d1d;
  margin-top: 4px;
}

/* Éclairs déco */
.splash-lightning {
  position: absolute; font-size: 3rem;
  animation: zap .7s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(250,204,21,.9));
  z-index: 3;
}
.sl1 { top: 12%;  left: 8%;  animation-delay: 0s;   font-size: 3.5rem; }
.sl2 { top: 10%;  right: 10%; animation-delay: .3s; font-size: 2.5rem; }
.sl3 { bottom: 14%; left: 12%; animation-delay: .5s; font-size: 2rem; }

/* ============================================
   HERO ENTRANCE ANIMATIONS
   ============================================ */
.anim-slide-left,
.anim-slide-right,
.anim-slide-up,
.anim-pop {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: .55s;
  animation-delay: calc(var(--d, 0s) + 1.9s); /* démarre après le splash */
}

.anim-slide-left  { animation-name: heroSlideLeft; }
.anim-slide-right { animation-name: heroSlideRight; }
.anim-slide-up    { animation-name: heroSlideUp; }
.anim-pop         { animation-name: heroPop; }

@keyframes heroSlideLeft {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroSlideRight {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroSlideUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroPop {
  0%   { opacity: 0; transform: scale(.7) rotate(-4deg); }
  70%  { transform: scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ============================================
   HEADER
   ============================================ */
.comic-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: var(--border-thick);
  padding: 10px 0;
}
.ch-inner { display: flex; align-items: center; justify-content: space-between; }
.ch-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1.6rem; letter-spacing: .1em;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--yellow-d);
}
.ch-icon { color: var(--white); }

/* ===== COMIC BUTTONS ===== */
.btn-comic {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1rem; letter-spacing: .08em;
  background: var(--yellow); color: var(--black);
  border: var(--border); box-shadow: var(--sh);
  border-radius: 6px; padding: 10px 20px;
  cursor: pointer; transition: transform var(--t), box-shadow var(--t);
  white-space: nowrap; text-decoration: none;
}
.btn-comic:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #111; }
.btn-comic:active { transform: translate(1px,1px);   box-shadow: 2px 2px 0 #111; }

.btn-sm   { font-size: .85rem; padding: 8px 16px; }
.btn-hero {
  font-size: 1.15rem; padding: 18px 30px;
  background: var(--red); color: var(--white);
  box-shadow: var(--sh-big);
  animation: float 3s ease-in-out infinite;
}
.btn-hero:hover { filter: brightness(1.1); }

/* ============================================
   HERO
   ============================================ */
.hero-panel {
  position: relative; overflow: hidden;
  background: #fffde7;
  border-bottom: var(--border-thick);
  display: flex; flex-direction: column;
}

/* Halftone dots */
.hero-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(37,99,235,.09) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Radial rays */
.hero-rays {
  position: absolute; inset: -30%; pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 70% 50%,
    rgba(251,191,36,.22) 0deg 5deg,
    transparent 5deg 14deg
  );
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; gap: 32px; align-items: center;
  padding: 56px 20px 32px;
  min-height: 85vh;
}
@media (min-width: 800px) {
  .hero-inner { grid-template-columns: 1fr 1fr; min-height: 80vh; }
}

/* --- Hero text --- */
.hero-text { display: flex; flex-direction: column; gap: 22px; }

.hero-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--yellow); color: var(--black);
  border: var(--border); border-radius: 4px;
  padding: 5px 14px; width: fit-content;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; box-shadow: var(--sh);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  animation: blink 1.2s ease-in-out infinite;
}

.hero-title {
  display: flex; flex-direction: column; gap: 2px;
}
.ht-white {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--black); letter-spacing: .06em;
  line-height: 1;
  text-shadow: 3px 3px 0 rgba(0,0,0,.15);
}
.ht-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ht-pct {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(5rem, 16vw, 10rem);
  color: var(--red); line-height: .9;
  letter-spacing: -.01em;
  text-shadow: 5px 5px 0 #7f1d1d, -2px -2px 0 #fca5a5;
  animation: popIn .6s ease both;
}
.ht-inter {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--yellow); line-height: 1;
  text-shadow: 3px 3px 0 var(--yellow-d);
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.htag {
  background: var(--white);
  border: 2px solid #111;
  border-radius: 4px; padding: 5px 10px;
  font-size: .8rem; font-weight: 700;
  color: #111;
  box-shadow: 2px 2px 0 #111;
}

.hero-reassure { font-size: .8rem; color: #555; font-weight: 600; }

/* --- Hero characters --- */
.hero-chars {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; align-items: end;
  padding-bottom: 16px;
}

/* Central pct badge */
.pct-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10; pointer-events: none;
}
.pct-rays {
  position: absolute; inset: -16px;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(251,191,36,.55) 0deg 7deg,
    transparent 7deg 20deg
  );
  border-radius: 50%;
  animation: rayspin 6s linear infinite;
}
.pct-body {
  position: relative; z-index: 1;
  background: var(--yellow);
  border: var(--border-thick);
  box-shadow: var(--sh);
  border-radius: 50%;
  width: 86px; height: 86px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pct-num {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1.7rem; line-height: 1; color: var(--black);
  letter-spacing: .02em;
}
.pct-sub { font-size: .6rem; font-weight: 800; color: #333; }

/* Character card */
.hc {
  position: relative; display: flex;
  flex-direction: column; align-items: center; gap: 6px;
}
.hc-avatar {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: var(--border-thick);
  box-shadow: var(--sh-big);
  background: transparent;
  object-fit: contain;
}
@media (min-width: 800px) { .hc-avatar { width: 190px; height: 190px; } }
.hc-avatar-mamie { animation: wobble    3s ease-in-out infinite; background: #fde68a; }
.hc-avatar-papi  { animation: wobble2alt 3.4s ease-in-out infinite; background: #bfdbfe; }

.hc-name {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: .95rem; letter-spacing: .06em;
  color: var(--yellow); text-shadow: 1px 1px 0 #111;
}
.hc-thumb {
  font-size: 2rem;
  animation: wobble 2s ease-in-out infinite;
}
.hc-lightning {
  position: absolute; top: 4px; right: -4px;
  font-size: 2rem;
  animation: zap 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(250,204,21,.8));
}

/* Cloud speech bubble on characters */
.hc-bubble {
  position: absolute; z-index: 5;
  top: -20px;
  filter: drop-shadow(2px 2px 0 #111);
  width: 130px;
}
.hc-left  .hc-bubble { right: -8px; }
.hc-right .hc-bubble { left:  -8px; }

.hc-bumps {
  display: flex; justify-content: center; gap: 3px;
  padding: 0 8px; margin-bottom: -4px; position: relative; z-index: 1;
}
.hc-bumps span {
  display: block;
  width: 16px; height: 16px;
  background: var(--white);
  border: 2.5px solid #111;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}
.hc-bumps span:first-child, .hc-bumps span:last-child { width: 10px; height: 10px; }
.hc-bumps span:nth-child(2), .hc-bumps span:nth-child(4) { width: 13px; height: 13px; }

.hc-body {
  background: var(--white);
  border: 2.5px solid #111;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .75rem; color: #111; line-height: 1.4;
  text-align: center;
}
.hc-body strong { color: var(--blue); font-weight: 800; }

.hc-tail-right {
  position: absolute; bottom: -12px; right: 20px;
  width: 10px; height: 10px;
  background: var(--white); border: 2.5px solid #111;
  border-radius: 50%;
}
.hc-tail-right::after {
  content: ''; position: absolute;
  bottom: -9px; right: 3px;
  width: 7px; height: 7px;
  background: var(--white); border: 2px solid #111;
  border-radius: 50%;
}

/* Explosion mini (papi) */
.explosion-mini {
  position: absolute; top: -16px; left: -12px;
  z-index: 5;
  animation: popIn .5s ease both;
}
.em-rays {
  position: absolute; inset: -8px;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(239,68,68,.4) 0deg 6deg,
    transparent 6deg 18deg
  );
  border-radius: 50%;
  animation: rayspin 4s linear infinite;
}
.em-body {
  position: relative; z-index: 1;
  background: var(--red);
  clip-path: polygon(
    50% 0%, 61% 9%, 74% 4%, 77% 18%, 91% 17%,
    87% 31%, 100% 38%, 89% 50%, 100% 62%, 86% 66%,
    91% 80%, 76% 79%, 73% 93%, 60% 88%, 50% 100%,
    40% 88%, 27% 93%, 24% 79%, 9% 80%, 14% 66%,
    0% 62%, 11% 50%, 0% 38%, 13% 31%, 9% 17%,
    23% 18%, 26% 4%, 39% 9%
  );
  width: 100px; padding: 26% 14%;
  text-align: center;
}
.em-l1, .em-l2 {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: .82rem; color: var(--white);
  text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 1px 1px 0 #7f1d1d; line-height: 1.1;
}
.em-l2 { color: #fef08a; font-size: .72rem; }
.em-l3 { font-size: 1.1rem; line-height: 1; }

/* MaPrimeAdapt' band */
.hero-mpa-band {
  position: relative; z-index: 2;
  background: var(--yellow);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  padding: 10px 0;
  text-align: center;
  font-size: .9rem; font-weight: 700; color: var(--black);
}

/* ============================================
   COMIC-BOOK SECTION (BD strip)
   ============================================ */
@keyframes wobble2alt  { 0%,100%{transform:rotate(3deg) scale(1)} 50%{transform:rotate(-3deg) scale(1.05)} }
@keyframes explosionPop { 0%{transform:scale(.85) rotate(-2deg)} 60%{transform:scale(1.04) rotate(1deg)} 100%{transform:scale(1) rotate(0)} }

.cartoon-section {
  background: #fffde7;
  border-top: 4px solid #111;
  border-bottom: 4px solid #111;
  overflow: hidden;
  padding: 0;
}

/* BD header */
.cartoon-header {
  background: #111; text-align: center;
  padding: 26px 0 16px; position: relative; overflow: hidden;
}
.cartoon-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1.5px, transparent 1.5px);
  background-size: 14px 14px; pointer-events: none;
}
.cartoon-headline {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(1.6rem, 5.5vw, 3.2rem);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; line-height: 1; position: relative;
  text-shadow: 4px 4px 0 #2563eb, -1px -1px 0 #1d4ed8;
}
.cartoon-headline-green { color: #fbbf24; text-shadow: 3px 3px 0 #d97706, -1px -1px 0 #92400e; }
.deco-arrow { color: #ef4444; }
.mpa-strip  { margin-top: 10px; font-size: .9rem; color: rgba(255,255,255,.7); position: relative; }
.mpa-badge  {
  display: inline-block;
  background: linear-gradient(135deg, var(--green), #0d9488);
  color: white; padding: 3px 12px; border-radius: 999px;
  font-size: .88rem; font-weight: 800; border: 2px solid #fff;
  vertical-align: middle;
}

/* Comic strip grid */
.comic-strip {
  display: grid; grid-template-columns: 1fr; position: relative;
}
@media (min-width: 700px) { .comic-strip { grid-template-columns: 1fr 1fr; } }

.comic-panel {
  position: relative; min-height: 380px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-bottom: 4px solid #111;
}
@media (min-width: 700px) { .comic-panel { min-height: 440px; } }
.comic-panel-left  { background: #e0f2fe; border-right: 2px solid #111; }
.comic-panel-right { background: #fef3c7; border-left:  2px solid #111; }

.action-lines { position: absolute; inset: -20%; pointer-events: none; z-index: 0; }
.action-lines-blue {
  background: repeating-conic-gradient(from 0deg at 40% 60%,rgba(37,99,235,.12) 0deg 3deg,transparent 3deg 9deg);
}
.action-lines-warm {
  background: repeating-conic-gradient(from 0deg at 60% 55%,rgba(245,158,11,.16) 0deg 3deg,transparent 3deg 9deg);
}

.panel-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.panel-decor > * { position: absolute; font-size: 2rem; opacity: .5; }
.shower-head { top: 14px; right: 16px; font-size: 2.4rem; }
.bath-duck   { bottom: 80px; right: 14px; font-size: 1.6rem; opacity: .4; }
.window-volet{ top: 14px; right: 14px; font-size: 2.4rem; }
.remote      { bottom: 90px; left: 14px; font-size: 1.8rem; opacity: .4; }

.comic-char-wrap {
  position: absolute; z-index: 3; bottom: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.char-left  { left: 12px; }
.char-right { right: 12px; }
.comic-char { font-size: 6rem; line-height: 1; filter: drop-shadow(2px 4px 0 rgba(0,0,0,.25)); }
.comic-panel-left  .comic-char { animation: wobble  2.8s ease-in-out infinite; }
.comic-panel-right .comic-char { animation: wobble2alt 3.2s ease-in-out infinite; }
.char-thumb { font-size: 2rem; animation: wobble 1.5s ease-in-out infinite; }

/* Cloud bubble */
.cloud-bubble {
  position: absolute; z-index: 4; top: 24px; right: 8px;
  width: min(200px, 52vw);
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.22));
}
@media (min-width: 700px) { .cloud-bubble { right: 12px; width: 200px; } }
.cloud-bumps {
  display: flex; justify-content: center; gap: 4px;
  padding: 0 8px; margin-bottom: -4px; position: relative; z-index: 1;
}
.cloud-bumps span {
  display: block; width: 22px; height: 22px;
  background: #fff; border: 3px solid #111; border-bottom: none;
  border-radius: 50% 50% 0 0;
}
.cloud-bumps span:first-child, .cloud-bumps span:last-child { width: 14px; height: 14px; }
.cloud-bumps span:nth-child(2), .cloud-bumps span:nth-child(4) { width: 18px; height: 18px; }
.cloud-body {
  background: #fff; border: 3px solid #111; border-radius: 16px;
  padding: 10px 12px; font-size: .8rem; color: #111; line-height: 1.45;
  text-align: center; position: relative;
}
.cloud-body p { margin: 0 0 4px; }
.cloud-body em { font-style: italic; color: #666; }
.cloud-body strong { color: var(--blue); font-weight: 800; }
.bubble-punchline {
  font-weight: 700; font-size: .85rem;
  border-top: 1.5px dashed #ddd; padding-top: 6px; margin-top: 4px !important;
}
.cloud-tail-left {
  position: absolute; bottom: -14px; left: 20px;
  width: 12px; height: 12px; background: #fff; border: 3px solid #111; border-radius: 50%;
}
.cloud-tail-left::after {
  content: ''; position: absolute; bottom: -10px; left: 4px;
  width: 8px; height: 8px; background: #fff; border: 2px solid #111; border-radius: 50%;
}

/* Explosion bubble */
.explosion-bubble {
  position: absolute; z-index: 4; top: 16px; left: 8px;
  width: min(190px, 50vw);
  animation: explosionPop .5s ease both;
}
@media (min-width: 700px) { .explosion-bubble { left: 14px; width: 190px; } }
.explosion-body {
  background: #ef4444;
  clip-path: polygon(
    50% 0%, 61% 8%, 74% 4%, 78% 17%,
    91% 18%, 88% 31%, 100% 38%, 90% 49%,
    100% 60%, 87% 65%, 91% 79%, 77% 79%,
    74% 93%, 61% 88%, 50% 100%, 39% 88%,
    26% 93%, 23% 79%, 9% 79%, 13% 65%,
    0% 60%, 10% 49%, 0% 38%, 12% 31%,
    9% 18%, 22% 17%, 26% 4%, 39% 8%
  );
  width: 100%; padding: 22% 14%; text-align: center; position: relative; z-index: 1;
}
.explosion-rays {
  position: absolute; inset: -10px;
  background: repeating-conic-gradient(from 0deg at 50% 50%,rgba(250,204,21,.45) 0deg 5deg,transparent 5deg 15deg);
  border-radius: 50%; z-index: 0;
  animation: wobble2alt 2s linear infinite;
}
.exp-line1 {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(.85rem,3vw,1.1rem); color: #fff;
  text-transform: uppercase; text-shadow: 2px 2px 0 #7f1d1d;
  letter-spacing: .05em; line-height: 1.1; margin: 0;
}
.exp-line2 {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(.75rem,2.5vw,.95rem); color: #fef08a;
  text-transform: uppercase; text-shadow: 1px 1px 0 #7f1d1d;
  letter-spacing: .03em; line-height: 1.1; margin: 2px 0;
}
.exp-line3 { font-size: .7rem; color: #fff; line-height: 1.3; margin: 4px 0 0; }
.exp-line3 strong { color: #fef08a; font-weight: 800; }

.lightning {
  position: absolute; z-index: 5;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 4px rgba(250,204,21,.8));
  animation: zap 1s ease-in-out infinite;
  pointer-events: none;
}
.l1 { top: 38px; left: 12px; font-size: 1.8rem; animation-delay: .2s; }
.l2 { top: 180px; right: 10px; font-size: 2.4rem; animation-delay: 0s; }
.l3 { bottom: 90px; left: 50%; font-size: 1.4rem; animation-delay: .5s; opacity: .7; }

.comic-label {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: .85rem; font-weight: 700;
  border-top: 3px solid #111;
}
.comic-label span { font-size: 1.4rem; flex-shrink: 0; }
.comic-label div  { display: flex; flex-direction: column; line-height: 1.3; }
.comic-label strong { font-size: .88rem; }
.comic-label div span { font-size: .76rem; font-weight: 500; }
.label-blue  { background: #2563eb; color: #fff; }
.label-green { background: #059669; color: #fff; }
.label-green div span { color: rgba(255,255,255,.85); }

.comic-sep { display: none; }
@media (min-width: 700px) { .comic-sep { display: block; width: 4px; background: #111; } }

/* Comic footer */
.comic-footer {
  display: flex; align-items: stretch; justify-content: space-around;
  flex-wrap: wrap; background: #111; padding: 20px 16px; gap: 0;
}
.cf-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center; flex: 1; min-width: 100px; padding: 4px 12px;
}
.cf-ico    { font-size: 1.8rem; }
.cf-item strong { font-size: .9rem; font-weight: 800; color: #fbbf24; }
.cf-item span   { font-size: .75rem; color: rgba(255,255,255,.7); }
.cf-sep { width: 2px; background: rgba(255,255,255,.15); flex-shrink: 0; align-self: stretch; margin: 4px 0; }

/* ============================================
   TRAVAUX — STAMPS PANEL
   ============================================ */
.travaux-panel {
  background: var(--white);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  padding: 44px 0 48px;
}
.tp-header { text-align: center; margin-bottom: 30px; }
.tp-headline {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--black);
  text-shadow: 4px 4px 0 var(--yellow), 6px 6px 0 #111;
}
.tp-sub { font-size: .9rem; font-weight: 600; color: #555; margin-top: 8px; }

.stamps-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 560px; margin: 0 auto;
}
@media (min-width: 540px) { .stamps-grid { grid-template-columns: repeat(3, 1fr); } }

.stamp {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 12px; background: var(--cream);
  border: var(--border); border-radius: 8px; box-shadow: var(--sh);
  font-size: 2.6rem; cursor: default;
  transition: transform var(--t), box-shadow var(--t);
  text-align: center;
}
.stamp:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 #111; }
.stamp span  { font-size: .82rem; font-weight: 800; color: var(--black); line-height: 1.3; }

.stamp-blue  { border-color: var(--blue);  box-shadow: 4px 4px 0 var(--blue); }
.stamp-green { border-color: var(--green); box-shadow: 4px 4px 0 var(--green); }
.stamp-red   { border-color: var(--red);   box-shadow: 4px 4px 0 var(--red); }
.stamp-yellow{ border-color: var(--yellow-d); box-shadow: 4px 4px 0 var(--yellow-d); }

/* ============================================
   FORMULAIRE PANEL
   ============================================ */
.form-panel { background: var(--cream); }

.form-panel-header {
  background: var(--black);
  border-bottom: var(--border-thick);
  padding: 24px 0; text-align: center;
}
.fp-headline {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--yellow-d);
}
.fp-sub { font-size: .88rem; color: rgba(255,255,255,.55); margin-top: 6px; font-weight: 500; }

.form-panel-body { padding: 40px 0 52px; }

/* ===== FORM FIELDS ===== */
form { display: flex; flex-direction: column; gap: 20px; max-width: 680px; margin: 0 auto; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 520px) { .form-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .87rem; font-weight: 700; color: #222; }
.req { color: var(--red); }

.field input,
.field select {
  font-family: inherit; font-size: 1rem; color: #111;
  background: var(--white); border: var(--border);
  border-radius: var(--r-md); padding: 12px 16px; width: 100%;
  -webkit-appearance: none; appearance: none;
  box-shadow: var(--sh); transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 4px 4px 0 var(--blue);
}
.field input.error, .field select.error {
  border-color: var(--red); box-shadow: 4px 4px 0 rgba(239,68,68,.3);
}

.sel-wrap { position: relative; }
.sel-wrap select { padding-right: 38px; cursor: pointer; }
.sel-arrow { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none; }

/* Toggle radio */
.toggle-row { display: flex; gap: 12px; }
.toggle-btn { flex: 1; cursor: pointer; }
.toggle-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-btn span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border: var(--border); border-radius: var(--r-md);
  font-size: .9rem; font-weight: 700; color: #333;
  background: var(--white); box-shadow: var(--sh); transition: all var(--t);
}
.toggle-btn:hover span { border-color: var(--blue); color: var(--blue); }
.toggle-btn input:checked + span {
  border-color: var(--blue); background: var(--blue-l); color: var(--blue);
  box-shadow: 4px 4px 0 var(--blue);
}

/* Pills (checkboxes) */
.pills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 480px) { .pills-grid { grid-template-columns: repeat(3, 1fr); } }
.pill-wide { grid-column: 1 / -1; }
@media (min-width: 480px) { .pill-wide { grid-column: span 1; } }

.pill {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px; border: var(--border); border-radius: var(--r-md);
  font-size: .82rem; font-weight: 600; color: #333;
  background: var(--white); cursor: pointer;
  box-shadow: 3px 3px 0 #111; transition: all var(--t); line-height: 1.3;
}
.pill:hover { border-color: var(--blue); color: var(--blue); }
.pill:has(input:checked) {
  border-color: var(--blue); background: var(--blue-l);
  color: var(--blue); box-shadow: 3px 3px 0 var(--blue);
}
.pill input[type="checkbox"],
.consent-line input[type="checkbox"],
.toggle-btn input[type="radio"] {
  width: 16px !important; height: 16px !important;
  min-width: 16px !important; max-width: 16px !important;
  accent-color: var(--blue); cursor: pointer;
  border: none !important; padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 3px !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  font-size: inherit;
}
.field-hint { display: block; font-size: .72rem; font-weight: 400; color: #888; margin-top: 1px; }

/* Consents */
.consents {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--white); border: var(--border); border-radius: var(--r-md);
  padding: 16px; box-shadow: var(--sh);
}
.consent-line {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .83rem; color: #444; cursor: pointer; line-height: 1.5;
}
.consent-line input[type="checkbox"] {
  width: 17px; height: 17px; min-width: 17px; margin-top: 1px;
  accent-color: var(--blue); cursor: pointer;
}
.link-u { color: var(--blue); text-decoration: underline; }

/* Submit button — full comic style */
.btn-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--black); background: var(--yellow);
  border: var(--border-thick); box-shadow: var(--sh-big);
  border-radius: var(--r-md); padding: 18px;
  cursor: pointer; margin-top: 4px;
  transition: transform var(--t), box-shadow var(--t);
  animation: float 4s ease-in-out infinite;
}
.btn-submit:hover  { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #111; animation: none; }
.btn-submit:active { transform: translate(2px,2px);   box-shadow: 2px 2px 0 #111; }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; animation: none; }

/* Form privacy */
.form-privacy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .74rem; color: #999; margin-top: -4px;
}

/* Form states */
.form-success {
  text-align: center; padding: 32px 20px;
  background: var(--green-l); border-radius: var(--r-md);
  border: var(--border-thick); box-shadow: var(--sh-big);
}
.success-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--green);
  border: var(--border); box-shadow: var(--sh);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.form-success h3 { font-family: 'Bangers', sans-serif; font-size: 1.6rem; color: #047857; letter-spacing: .06em; margin-bottom: 6px; }
.form-success p  { font-size: .9rem; color: #555; }
.form-error {
  background: #fee2e2; border: var(--border); border-radius: var(--r-md);
  padding: 13px 16px; color: var(--red-d); font-size: .87rem;
  box-shadow: var(--sh);
}

/* ============================================
   FOOTER
   ============================================ */
.comic-footer-bar {
  background: var(--black); border-top: var(--border-thick); padding: 28px 0;
}
.cfb-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cfb-logo {
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1.4rem; letter-spacing: .1em;
  color: var(--yellow); text-shadow: 2px 2px 0 var(--yellow-d);
}
.cfb-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; }
.cfb-links a { font-size: .82rem; color: rgba(255,255,255,.45); transition: color var(--t); }
.cfb-links a:hover { color: var(--yellow); }
.cfb-copy { font-size: .75rem; color: rgba(255,255,255,.25); }

/* ============================================
   STICKY MOBILE
   ============================================ */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--black); border-top: var(--border-thick);
  padding: 12px 16px; z-index: 90; display: none;
}
.btn-sticky {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: 'Bangers', 'Impact', sans-serif;
  font-size: 1.05rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--black); background: var(--yellow);
  border: var(--border); box-shadow: var(--sh);
  border-radius: 6px; padding: 14px; text-decoration: none;
}
@media (max-width: 767px) { .sticky-bar { display: block; } body { padding-bottom: 68px; } }