:root{--cream:#f3e8c8;--ink:#211c18;--turquoise:#19aeb5;--orange:#f28b2f;--muted:#756b60}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:15px 4vw;background:#f3e8c8f2;border-bottom:2px solid var(--orange);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}.brand-logo img{display:block;width:110px;height:58px;object-fit:cover;border-radius:7px}nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}nav a{color:var(--turquoise);text-decoration:none;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.045em}nav a:nth-child(even){color:var(--orange)}nav a:hover{color:var(--ink)}.menu{display:none;margin-left:auto;background:none;border:0;color:var(--turquoise);font-size:30px}.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:stretch;background:var(--cream)}.hero-img{height:clamp(480px,66vw,720px);overflow:hidden}.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 67%;display:block}.hero-copy{padding:4.5vw 5vw;display:flex;flex-direction:column;justify-content:center;background:var(--cream)}.logo{display:none}.kicker,.eyebrow{color:var(--turquoise);text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:13px}.hero-copy .kicker{margin:0 0 12px;font-size:15px}.hero-intro{line-height:1.8}.hero h1,.section h2{font-size:clamp(34px,5vw,72px);line-height:1.02;margin:.25em 0;color:var(--orange)}.hero p{font-size:18px;max-width:650px;text-align:justify}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.btn{background:var(--orange);color:#fff;text-decoration:none;padding:14px 18px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.btn.ghost{background:var(--turquoise);color:#fff;border:1px solid var(--turquoise)}.section{padding:90px max(6vw,24px);scroll-margin-top:80px}.section>h2{max-width:1050px}.section p,.card p,details p{text-align:justify}.story{max-width:900px;font-size:18px}.story blockquote{margin:50px 0 0;padding:20px 0 20px 25px;border-left:6px solid var(--orange);font-size:clamp(28px,4vw,50px);font-weight:900;line-height:1.05;color:var(--turquoise)}.alt{background:#eadbb7}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:45px}.card{background:#f8efd9;border:1px solid #d7c49b;overflow:hidden}.card img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:center 28%;display:block}.card div{padding:24px}.card h3{font-size:32px;color:var(--orange);margin:0 0 4px;text-transform:uppercase}.card h3 small{font-size:15px;color:var(--turquoise)}.card b{color:var(--turquoise)}.coming{min-height:46vh;border-top:1px solid #d7c49b}.coming h2{color:var(--orange)}details{max-width:850px;border-top:1px solid #cdb98f;padding:18px 0}summary{cursor:pointer;font-weight:900;color:var(--turquoise)}footer{padding:55px 6vw;border-top:4px solid var(--orange);display:grid;grid-template-columns:1fr 1fr;gap:30px;background:#e9d9b4}footer strong{font-size:32px;color:var(--turquoise)}footer span{color:var(--orange);font-weight:900;text-transform:uppercase}.copy{grid-column:1/-1;color:var(--muted);font-size:12px}@media(max-width:1200px){nav{gap:11px}nav a{font-size:16px}.brand-logo img{width:95px;height:50px}}@media(max-width:900px){.menu{display:block}nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--cream);padding:22px 5vw;flex-direction:column;border-bottom:2px solid var(--orange)}nav.open{display:flex}nav a{font-size:18px}.hero{grid-template-columns:1fr}.hero-img{height:62vw;min-height:330px;max-height:520px}.hero-copy{padding:45px 7vw}.cards{grid-template-columns:1fr}.section{padding-top:70px;padding-bottom:70px}footer{grid-template-columns:1fr}}.hero-copy h1{font-size:clamp(30px,3.3vw,48px);white-space:nowrap}#serie h2{font-size:clamp(30px,3.6vw,52px)}@media(max-width:520px){.hero-copy h1{font-size:clamp(26px,8.5vw,38px);white-space:nowrap}}.bonus h2{font-size:clamp(28px,3.3vw,48px);white-space:nowrap}.bonus-sheets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}.bonus-sheets a{display:block;color:var(--turquoise);font-weight:900;text-decoration:none;text-align:center}.bonus-sheets img{display:block;width:100%;height:auto;border:1px solid #d7c49b;margin-bottom:10px}.bonus-sheets a:hover{color:var(--orange)}@media(max-width:900px){.bonus h2{white-space:normal}.bonus-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.bonus-sheets{grid-template-columns:1fr}}.theme-toggle{position:absolute;right:4vw;top:100%;margin-top:10px;display:flex;gap:4px;padding:4px;border:1px solid var(--orange);border-radius:24px;background:var(--cream);color:var(--ink);font-weight:900;cursor:pointer;box-shadow:0 4px 14px #0002}.theme-toggle span{padding:5px 8px}.theme-toggle span:last-child{opacity:.45}body.dark{--cream:#121212;--ink:#f3e8c8;--muted:#c4bba9;background:#121212;color:#f3e8c8}body.dark .top{background:#121212f2}body.dark .hero,body.dark .hero-copy{background:#121212}body.dark .alt{background:#1b1b1b}body.dark .card{background:#202020;border-color:#3b3b3b}body.dark footer{background:#191919;border-color:var(--orange)}body.dark details,body.dark .coming{border-color:#444}body.dark .theme-toggle{background:#1c1c1c;color:#f3e8c8}body.dark .theme-toggle span:first-child{opacity:.45}body.dark .theme-toggle span:last-child{opacity:1}@media(max-width:900px){.theme-toggle{right:76px;top:12px;margin:0;font-size:12px}.theme-toggle span{padding:4px}}
.lang-toggle{position:absolute;right:250px;top:100%;margin-top:10px;padding:9px 13px;border:1px solid var(--turquoise);border-radius:24px;background:var(--cream);color:var(--turquoise);font-weight:900;text-decoration:none;box-shadow:0 4px 14px #0002}.lang-toggle:hover{color:var(--orange);border-color:var(--orange)}body.dark .lang-toggle{background:#1c1c1c}@media(max-width:900px){.lang-toggle{right:245px;top:12px;margin:0;padding:7px 9px;font-size:12px}}@media(max-width:520px){.lang-toggle{right:70px;top:66px}.theme-toggle{right:10px}}
.author-photo{display:block;width:180px;max-width:45vw;height:auto;margin:20px auto 28px;border:1px solid #d7c49b}.author-text{max-width:900px;font-size:18px}.author-text p{text-align:justify;text-justify:inter-word;hyphens:auto;word-break:normal;overflow-wrap:break-word}.author-text a{color:var(--turquoise);font-weight:700}.author-text a:hover{color:var(--orange)}.author-signature{text-align:right!important;font-size:22px;font-weight:700;margin:28px 12% 28px 0}.author-video{max-width:900px;margin-top:30px}.author-video video,.author-video iframe{width:100%;height:auto;aspect-ratio:16/9;border:0;display:block}
@media(max-width:520px){.author-photo{width:140px;max-width:50vw}.author-text p{text-align:justify;text-justify:inter-word}}
.author-text .author-role{text-align:center!important;margin-top:0;margin-bottom:28px}
/* Author portrait: centered within the same text column */
.author .author-photo{display:block;margin:20px auto 16px!important}.author .author-text{margin-left:auto;margin-right:auto}.author .author-text .author-role{text-align:center!important;margin:0 auto 28px!important}

/* Author section: use one consistent content width so portrait, role and body align */
.author .author-text,.author .author-video{max-width:none;width:100%;margin-left:auto;margin-right:auto}.author .author-photo{margin-left:auto!important;margin-right:auto!important}.author .author-text .author-role{width:100%;text-align:center!important}

/* Pétillant BAD AS refresh */
body{font-family:"Comic Sans MS","Comic Sans",cursive}.hero h1,.section h2,.card h3,footer strong{letter-spacing:.02em;text-shadow:2px 2px 0 rgba(25,174,181,.13)}.hero h1{transform:rotate(-1deg);display:inline-block}.eyebrow,.kicker{font-family:"Comic Sans MS","Comic Sans",cursive;letter-spacing:.16em}.btn{border-radius:18px 7px 18px 7px;box-shadow:4px 4px 0 rgba(33,28,24,.14);transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:6px 7px 0 rgba(33,28,24,.12)}.btn.ghost:hover{transform:translateY(-3px) rotate(1deg)}.card{border-radius:22px 8px 22px 8px;box-shadow:6px 7px 0 rgba(242,139,47,.13);transition:transform .2s ease}.card:nth-child(even){border-radius:8px 22px 8px 22px}.card:hover{transform:translateY(-5px) rotate(-.35deg)}.bonus-sheets a:nth-child(odd){transform:rotate(-1deg)}.bonus-sheets a:nth-child(even){transform:rotate(1deg)}.bonus-sheets img{border-radius:12px;box-shadow:5px 5px 0 rgba(25,174,181,.14)}.story blockquote{transform:rotate(-.5deg)}summary{font-size:18px}.author-photo{border-radius:18px 6px 18px 6px;box-shadow:6px 6px 0 rgba(242,139,47,.18)}
@media(max-width:520px){.card:hover,.btn:hover,.btn.ghost:hover{transform:none}}

/* BAD AS — série / pop / road trip */
.hero-copy{position:relative;overflow:hidden}.hero-copy:after{content:"★  ROAD TRIP  ★";position:absolute;right:-34px;bottom:30px;padding:8px 38px;background:var(--turquoise);color:#fff;font-weight:900;letter-spacing:.08em;transform:rotate(-8deg);opacity:.9}.hero-copy .kicker{display:inline-block;width:max-content;padding:5px 10px;background:var(--turquoise);color:#fff;border-radius:4px;transform:rotate(-1deg)}.hero h1{padding:3px 12px 5px;background:var(--orange);color:#fff!important;text-shadow:3px 3px 0 var(--turquoise);border-radius:7px 18px 7px 18px;width:max-content}.section>.eyebrow{display:inline-block;padding:4px 11px;background:var(--turquoise);color:#fff;border-radius:12px 4px 12px 4px;transform:rotate(-1deg)}.section:nth-of-type(even)>.eyebrow{background:var(--orange);transform:rotate(1deg)}.section h2{position:relative}.cards .card:nth-child(1),.cards .card:nth-child(4){transform:rotate(-.45deg)}.cards .card:nth-child(2),.cards .card:nth-child(3){transform:rotate(.45deg)}.cards .card:hover{transform:translateY(-6px) rotate(0deg)}.card h3:after{content:" ★";color:var(--turquoise);font-size:.65em}.actions .btn:first-child:before{content:"▶ ";}.bonus-sheets span{display:inline-block;background:var(--orange);color:#fff;padding:4px 12px;border-radius:12px 4px 12px 4px}.author-role strong{display:inline-block;padding:5px 14px;border-bottom:4px solid var(--turquoise)}details{background:rgba(255,255,255,.18);padding:16px 18px;margin:8px 0;border-radius:5px 16px 5px 16px}body.dark details{background:rgba(255,255,255,.04)}footer{position:relative;overflow:hidden}footer:after{content:"BAD AS ★";position:absolute;right:4vw;bottom:14px;color:var(--orange);font-size:22px;font-weight:900;transform:rotate(-4deg)}
@media(max-width:900px){.hero-copy:after{font-size:12px;right:-48px;bottom:18px}.cards .card:nth-child(n){transform:none}}@media(max-width:520px){.hero-copy:after{display:none}.hero h1{max-width:100%;padding-left:8px;padding-right:8px}}

/* Navigation tabs — playful raised effect */
nav a{display:inline-block;padding:7px 10px;border-radius:10px 4px 10px 4px;text-shadow:1px 1px 0 rgba(255,255,255,.7);box-shadow:0 3px 0 rgba(33,28,24,.16);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}nav a:nth-child(odd){background:rgba(25,174,181,.09)}nav a:nth-child(even){background:rgba(242,139,47,.10)}nav a:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(33,28,24,.18);background:#fff8}nav a:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(33,28,24,.16)}body.dark nav a{text-shadow:1px 1px 0 #000}body.dark nav a:hover{background:rgba(255,255,255,.08)}

/* Navigation — stronger glossy candy / padded-seat effect */
nav a{position:relative;z-index:2;padding:8px 12px;border:1px solid rgba(255,255,255,.55);border-bottom-color:rgba(33,28,24,.22);text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:inset 0 2px 2px rgba(255,255,255,.65),inset 0 -3px 5px rgba(33,28,24,.13),0 4px 0 rgba(33,28,24,.18),0 6px 10px rgba(33,28,24,.10);touch-action:manipulation;-webkit-tap-highlight-color:transparent}nav a:nth-child(odd){background:linear-gradient(180deg,#55d5da 0%,var(--turquoise) 58%,#118b91 100%);color:#fff}nav a:nth-child(even){background:linear-gradient(180deg,#ffb35f 0%,var(--orange) 58%,#d76b16 100%);color:#fff}nav a:hover{color:#fff;background-position:center;box-shadow:inset 0 2px 3px rgba(255,255,255,.75),inset 0 -4px 6px rgba(33,28,24,.14),0 6px 0 rgba(33,28,24,.18),0 8px 13px rgba(33,28,24,.13)}nav a:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(33,28,24,.15),0 1px 0 rgba(33,28,24,.18)}body.dark nav a{text-shadow:0 1px 1px rgba(0,0,0,.45)}
/* Decorative layers must never block links or buttons */
.hero-copy:after,footer:after,.card h3:after{pointer-events:none}.btn,.lang-toggle,.theme-toggle,.menu,nav a,.bonus-sheets a,summary{position:relative;z-index:3;touch-action:manipulation}

/* Header balance + golden-hour light palette */
:root{--cream:#f8efd9}
.top{align-items:center;gap:18px}
nav{margin-left:auto;margin-right:0;flex:1;justify-content:space-between;gap:8px}
nav a{padding-left:10px;padding-right:10px;white-space:nowrap}
/* Place language/theme controls below the header, above the hero copy */
.lang-toggle{right:180px;top:calc(100% + 14px);margin-top:0}
.theme-toggle{right:4vw;top:calc(100% + 14px);margin-top:0}
@media(min-width:901px){.hero-copy{padding-top:82px}}
@media(max-width:1200px){nav{gap:5px}nav a{font-size:14px;padding-left:7px;padding-right:7px}}
@media(max-width:900px){nav{margin:0;justify-content:flex-start}.lang-toggle{right:145px;top:calc(100% + 8px);margin:0}.theme-toggle{right:12px;top:calc(100% + 8px);margin:0}.hero-copy{padding-top:82px}}
@media(max-width:520px){.lang-toggle{left:7vw;right:auto;top:calc(100% + 8px)}.theme-toggle{right:7vw;top:calc(100% + 8px)}}

/* Header v2 — clean two-row layout, controls never overlap navigation */
:root{--cream:#f8efd9}
body,.top,.hero,.hero-copy{background:var(--cream)}
.alt,footer{background:#f8efd9}
.top{position:sticky;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:20px;row-gap:10px;padding:14px 4vw 12px;background:var(--cream)!important}
.brand{grid-column:1;grid-row:1 / span 2;align-self:center}
nav{grid-column:2;grid-row:1;display:flex;margin:0;width:100%;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap}
.lang-toggle,.theme-toggle{position:static!important;margin:0!important;top:auto!important;right:auto!important;left:auto!important;box-shadow:0 3px 0 rgba(33,28,24,.12)}
.lang-toggle{grid-column:2;grid-row:2;justify-self:end;margin-right:155px!important}
.theme-toggle{grid-column:2;grid-row:2;justify-self:end}
.hero-copy{padding-top:4.5vw}
@media(max-width:1200px) and (min-width:901px){nav a{font-size:13px;padding:7px 6px}.top{column-gap:12px;padding-left:2vw;padding-right:2vw}.brand-logo img{width:88px}}
@media(max-width:900px){.top{display:flex;align-items:center;gap:10px;padding:12px 4vw}.brand{display:flex}.menu{display:block;margin-left:auto}nav{display:none;position:absolute;top:100%;left:0;right:0;width:100%;background:var(--cream);padding:18px 5vw;flex-direction:column;align-items:stretch;border-bottom:2px solid var(--orange);z-index:20}nav.open{display:flex}.lang-toggle,.theme-toggle{position:absolute!important;top:calc(100% + 8px)!important}.lang-toggle{left:5vw!important;right:auto!important;margin:0!important}.theme-toggle{right:5vw!important}.hero-copy{padding-top:82px}}

/* Mobile readability + keep hero faces clear of language/theme controls */
@media(max-width:900px){
  html,body,button,a,input,textarea,select,summary{font-family:"Comic Sans MS","Comic Sans",cursive!important}
  nav a,.lang-toggle,.theme-toggle,.btn,.eyebrow,.kicker,.card h3,.section h2,.hero h1{font-family:"Comic Sans MS","Comic Sans",cursive!important}
  .hero{padding-top:58px}
  .hero-img{height:62vw;min-height:330px;max-height:520px}
  .hero-img img{object-position:center 67%}
}
@media(max-width:520px){
  .hero{padding-top:62px}
  .hero-img{min-height:360px;height:78vw}
}

/* Mobile font fallback: phones without Comic Sans MS must stay readable */
@media(max-width:900px){
  html,body,button,a,input,textarea,select,summary,
  nav a,.lang-toggle,.theme-toggle,.btn,.eyebrow,.kicker,.card h3,.section h2,.hero h1,
  .hero-copy,.story,.card,.author-text,details,footer{
    font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Arial Rounded MT Bold",Arial,sans-serif!important;
    font-style:normal!important;
  }
  .hero h1,.section h2,.card h3,nav a,.eyebrow,.kicker{font-style:normal!important}
}