/* ============================================================
   DESIGN TOKENS — Motorsport Dark (color-semantic)
   ============================================================ */
:root{
  --asphalt:#0B0B0E;
  --surface:#141418;
  --elev:#1B1B21;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --text:#F4F4F2;
  --text-soft:#A2A2AB;
  --text-dim:#6E6E78;
  --red:#E11D2A;
  --red-deep:#B3141F;
  --red-glow:rgba(225,29,42,.35);
  --on-red:#FFFFFF;
  --footer-bg:#08080A;
  --scrim:rgba(11,11,14,.82);
  --band-a:#16161b;--band-b:#0d0d11;
  --ghost-hover:rgba(255,255,255,.05);

  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-head:"Bebas Neue", "Space Grotesk", system-ui, sans-serif;
  --font-sans:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --container:1280px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --section:clamp(4.5rem,9vw,8.5rem);

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.55s;

  --z-header:100;--z-menu:300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--asphalt);color:var(--text);
  font-family:var(--font-sans);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* Réservé aux lecteurs d'écran : présent dans le document, absent de l'écran. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.75rem 1.25rem;z-index:var(--z-menu)}
.skip:focus{left:0}

/* ============================================================ TYPOGRAPHY */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1;letter-spacing:.015em;margin:0;text-wrap:balance}
.h-xl{font-size:clamp(2.6rem,1.5rem + 4.2vw,4.8rem);font-weight:600;letter-spacing:.012em;line-height:.96}
h2{font-size:clamp(2.4rem,1.6rem + 3.2vw,4.2rem)}
h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem)}
.lede{font-size:clamp(1.1rem,1.02rem + .5vw,1.35rem);line-height:1.6;color:var(--text-soft);font-weight:300}

.tag{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);font-weight:500;display:inline-flex;align-items:center;gap:.6rem}
.tag::before{content:"";width:18px;height:2px;background:var(--red);display:inline-block}
.tag.dim{color:var(--text-dim)}
.tag.dim::before{background:var(--text-dim)}

/* ============================================================ LAYOUT */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
/* Une section qui suit l'en-tête de page reprend le fil juste en dessous :
   les deux rembourrages cumulés creusaient un trou de 250 px. */
.pagehead + .section{padding-top:clamp(2.2rem,4vw,3.2rem)}
.divider{height:1px;background:var(--line);border:0}
.sec-head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head > :first-child{margin-top:0}

/* racing stripe motif */
.stripe{height:4px;background:
  repeating-linear-gradient(90deg,var(--red) 0 28px,transparent 28px 36px)}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;min-height:50px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:1rem 1.8rem;border-radius:3px;border:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .25s var(--ease),box-shadow var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--red);color:var(--on-red);box-shadow:0 0 0 0 var(--red-glow)}
.btn--primary:hover{background:var(--red-deep);box-shadow:0 8px 30px -6px var(--red-glow)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--text);background:var(--ghost-hover)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:500;position:relative}
.link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link .ar{transition:transform .3s var(--ease)}
.link:hover .ar{transform:translateX(3px)}

/* ============================================================ HEADER */
.header{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.1rem var(--gutter);
  transition:background var(--dur) var(--ease),padding var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent}
.header.scrolled{background:var(--scrim);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line);padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;
  font-size:1.15rem;letter-spacing:.02em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red-glow)}
.brand b{font-weight:700}.brand span{color:var(--red)}
.brand img{height:clamp(26px,2.4vw,32px);width:auto;display:block}
.footer .brand img{height:44px}
.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-soft);position:relative;padding:.4rem 0;transition:color .3s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header .btn{min-height:42px;padding:.6rem 1.2rem}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--text);width:48px;height:48px;padding:.5rem}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:6px auto;transition:.3s var(--ease)}

.mobile{position:fixed;inset:0;z-index:var(--z-menu);background:var(--asphalt);display:flex;flex-direction:column;
  justify-content:center;gap:.2rem;padding:var(--gutter);transform:translateY(-100%);transition:transform .5s var(--ease);visibility:hidden}
.mobile.open{transform:none;visibility:visible}
.mobile a{font-family:var(--font-display);font-size:2rem;font-weight:600;padding:.55rem 0;border-bottom:1px solid var(--line)}
.mobile .x{position:absolute;top:1.1rem;right:var(--gutter);background:none;border:0;color:var(--text);cursor:pointer;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:
   radial-gradient(85% 65% at 88% -10%,rgba(225,29,42,.18),transparent 55%),
   radial-gradient(60% 60% at -5% 110%,rgba(255,255,255,.045),transparent 60%),
   var(--asphalt)}
.hero__grid{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(125% 95% at 72% 8%,#000 28%,transparent 76%);
          mask-image:radial-gradient(125% 95% at 72% 8%,#000 28%,transparent 76%);opacity:.6}
canvas.hero__globe{position:absolute;right:-3%;top:48%;transform:translateY(-50%);z-index:0;
  width:min(60%,720px);aspect-ratio:1;display:block;pointer-events:none}
@media(min-width:881px){canvas.hero__globe{pointer-events:auto;cursor:grab}}
@media(max-width:880px){canvas.hero__globe{opacity:.55;right:-24%;top:34%}.hero__grid{opacity:.4}}
.hero__inner{position:relative;z-index:1;width:100%;padding-block:9rem clamp(3rem,6vw,5rem)}
.hero h1{margin-top:1.3rem;max-width:24ch}
.hero h1 .red{color:var(--red)}
.hero__sub{max-width:46ch;margin-top:1.4rem;font-size:clamp(1.02rem,1rem + .4vw,1.22rem);color:var(--text-soft);font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
.hero__rev{position:absolute;left:var(--gutter);top:7.5rem;z-index:1;display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.live{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--red-glow)}50%{opacity:.5;box-shadow:0 0 0 6px transparent}}

/* telemetry stat bar */
.telemetry{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(11,11,14,.55);
  backdrop-filter:blur(6px)}
.telemetry .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:760px){.telemetry .grid{grid-template-columns:repeat(4,1fr)}}
.telemetry .cell{background:var(--asphalt);padding:1.4rem var(--gutter)}
.telemetry .n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,1.3rem + 1.5vw,2.4rem);
  font-variant-numeric:tabular-nums;line-height:1}
.telemetry .n span{color:var(--red)}
.telemetry .l{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:.45rem}

/* ============================================================ INTRO / split */
.split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1.05fr .95fr}}
.split--rev .split__media{order:-1}
@media(min-width:920px){.split--rev .split__media{order:0}}
.split__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/2;border:1px solid var(--line)}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split__media:hover img{transform:scale(1.05)}
/* Le badge est posé sur une photo, sur un fond volontairement sombre : sa
   couleur est donc fixe. Prise dans les variables de thème, elle virait au noir
   sur noir en mode jour. */
.split__media .badge{position:absolute;left:1rem;bottom:1rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:#F4F4F2;background:rgba(11,11,14,.72);
  border:1px solid rgba(255,255,255,.22);padding:.5rem .8rem;border-radius:3px;backdrop-filter:blur(4px)}
.split__body p{color:var(--text-soft);max-width:60ch}
.split__body h2{margin:1rem 0 1.2rem}

/* ============================================================ PILLARS (3 cards) */
.cards{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.6rem,3vw,2.2rem);overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);transition:width var(--dur) var(--ease)}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--elev)}
.card:hover::before{width:100%}
.card .ic{width:46px;height:46px;border:1px solid var(--line-strong);border-radius:8px;display:grid;place-items:center;color:var(--red);margin-bottom:1.3rem}
.card .ic svg{width:24px;height:24px}
.card .num{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);letter-spacing:.1em}
.card h3{margin-bottom:.6rem}
/* Vignette des cartes de liste (archives, recherche) : l'image occupe toute
   la largeur de la carte, par-dessus son rembourrage. */
.card__media{display:block;margin:calc(-1 * clamp(1.6rem,3vw,2.2rem)) calc(-1 * clamp(1.6rem,3vw,2.2rem)) 1.4rem;border-bottom:1px solid var(--line)}
.card__media img{display:block;width:100%;height:190px;object-fit:cover}
.card p{color:var(--text-soft);font-size:.96rem;margin:0}
/* Une carte porte parfois plusieurs paragraphes : sans cette marge, ils se
   touchent et le texte devient un mur. */
.card p + p{margin-top:.9rem}
/* Une carte qui se termine par un lien l'aligne en bas, pour que trois cartes
   de longueurs différentes gardent leurs appels à l'action sur une ligne. */
.card:has(.link){display:flex;flex-direction:column}
.card:has(.link) .link{margin-top:auto;align-self:flex-start;padding-top:1.4rem}
.card blockquote{margin:1.2rem 0 0;padding-left:1.1rem;border-left:2px solid var(--red);
  color:var(--text);font-style:italic;font-size:.96rem}

/* ============================================================ CIRCUITS / VOITURES grids */
.tiles{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:680px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--surface);
  aspect-ratio:3/2;display:flex;align-items:flex-end}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.3s var(--ease)}
/* Le voile démarre plus haut et monte plus vite : sur une photo de ciel,
   la légende rouge devenait illisible. */
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 18%,rgba(11,11,14,.55) 52%,rgba(11,11,14,.96) 100%)}
.tile:hover img{transform:scale(1.06)}
.tile__body{position:relative;z-index:2;padding:clamp(1.3rem,3vw,1.9rem);width:100%}
.tile__cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
/* Une tuile illustrée garde son fond sombre dans les deux thèmes : son texte
   est donc fixé en clair, sans passer par les variables de thème — sinon le
   titre virait au noir sur la photo en mode jour. L'ombre portée le décolle
   des zones claires de l'image. */
.tile:has(img) .tile__body h3,
.tile:has(img) .tile__body h3 a{color:#F4F4F2;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.tile:has(img) .tile__body .meta{color:#D2D2D8;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.tile:has(img) .tile__body .tile__cat{color:#FF4A56;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tile:has(img) .corner{color:#F4F4F2}
.tile h3{margin:.5rem 0 .3rem}
.tile .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--text-soft);letter-spacing:.04em}
.tile .corner{position:absolute;top:1rem;right:1rem;z-index:2;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;color:var(--text);border:1px solid var(--line-strong);background:rgba(11,11,14,.6);
  padding:.4rem .7rem;border-radius:3px;backdrop-filter:blur(4px)}
.tile--wide{aspect-ratio:auto;min-height:260px}
@media(min-width:680px){.tile--wide{grid-column:span 2;min-height:340px}}

/* Voitures — image entière, sans cadre ni crop */
.cars-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem);max-width:760px;margin-inline:auto}
@media(min-width:680px){.cars-grid{grid-template-columns:repeat(2,1fr)}}
.car{transition:transform var(--dur) var(--ease)}
.car:hover{transform:translateY(-4px)}
.car__media{border-radius:4px;overflow:hidden}
.car__media img{width:100%;height:auto;display:block}
.car__body{padding-top:1.2rem}
.car__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.45rem}
.car .spec{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text);
  border:1px solid var(--line-strong);border-radius:3px;padding:.34rem .65rem}
.car h3{margin:0 0 .35rem}
.car .meta{font-family:var(--font-mono);font-size:.82rem;color:var(--text-soft);letter-spacing:.04em}

/* ============================================================ CALENDAR strip */
.section--surface{background:var(--surface);border-block:1px solid var(--line)}
.cal{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.cal__row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.1rem clamp(1rem,3vw,1.6rem);
  background:var(--asphalt);border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.cal__row:last-child{border-bottom:0}
.cal__row:hover{background:var(--elev)}
.cal__date{font-family:var(--font-mono);font-size:.82rem;color:var(--red);font-weight:600;letter-spacing:.05em;font-variant-numeric:tabular-nums;min-width:7.5rem}
.cal__name{font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.cal__loc{font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:560px){.cal__row{grid-template-columns:auto 1fr}.cal__loc{display:none}}

/* ============================================================ COMMUNITY band */
.band{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(120deg,var(--band-a),var(--band-b));padding:clamp(2.2rem,5vw,3.5rem)}
.band::before{content:"";position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,var(--red-glow),transparent 70%);filter:blur(20px)}
.band__in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.band h2{max-width:18ch}
.band p{color:var(--text-soft);max-width:48ch;margin:.8rem 0 0}

/* ============================================================ FAQ */
.faq{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  transition:color .3s var(--ease);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq .pm{flex:none;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--red);transition:transform .4s var(--ease),border-color .3s}
.faq details[open] .pm{transform:rotate(45deg)}
.faq .pm svg{width:16px;height:16px}
.faq .ans{color:var(--text-soft);padding:0 0 1.6rem;max-width:80ch;font-size:.98rem}
.faq .ans strong{color:var(--text);font-weight:600}

/* ============================================================ NEWSLETTER */
.news{max-width:620px}
.news form{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.news .field{flex:1 1 240px;display:flex;flex-direction:column;gap:.4rem}
.news label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.news input{font-family:inherit;font-size:1rem;color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:3px;padding:.9rem 1rem;min-height:50px;transition:border-color .3s var(--ease)}
.news input::placeholder{color:var(--text-dim)}
.news input:focus{outline:none;border-color:var(--red)}
.news .err{font-family:var(--font-mono);font-size:.72rem;color:#FF6B6B;min-height:.9rem}
.news .btn{align-self:flex-end}
.news__status{font-family:var(--font-mono);font-size:.8rem;color:var(--red);min-height:1.1rem;margin-top:.6rem;letter-spacing:.04em}
.news small{display:block;color:var(--text-dim);font-size:.8rem;margin-top:.8rem}

/* ============================================================ FOOTER */
.footer{background:var(--footer-bg);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer__top{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
@media(min-width:760px){.footer__top{grid-template-columns:1.4fr 1fr 1fr}}
.footer h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);font-weight:500;margin-bottom:1.2rem}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.footer ul a{color:var(--text-soft);font-size:.92rem;transition:color .3s var(--ease)}
.footer ul a:hover{color:var(--text)}
.footer .lead{color:var(--text-soft);max-width:38ch;margin:1rem 0 1.5rem;font-size:.95rem}
.socials{display:flex;gap:.7rem}
.socials a{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:8px;display:grid;place-items:center;
  color:var(--text-soft);transition:.3s var(--ease)}
.socials a:hover{color:var(--text);border-color:var(--red);background:rgba(225,29,42,.08)}
.socials svg{width:20px;height:20px}
.footer__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:2rem;
  font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);letter-spacing:.04em}
.footer__bot a{color:var(--text-soft)}

/* ============================================================ REVEAL */
/* L'apparition au défilement n'est armée que si le script tourne : sans lui,
   `opacity:0` rendrait la page blanche au lieu de la rendre sobre. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .split__media img,.tile img{transition:none!important}
  .live{animation:none}*{scroll-behavior:auto!important}
}
@media(max-width:880px){.nav,.header .btn{display:none}.burger{display:block}.hero__rev{display:none}}

/* Hero sur écran étroit. À placer ici, après les règles de base : déclaré plus
   haut, ce bloc se faisait écraser par `.hero__inner` à spécificité égale.
   Le bloc se cale sur son contenu au lieu de la hauteur de l'écran, et le titre
   remonte jusqu'à effleurer l'en-tête — le globe passe derrière, c'est voulu. */
@media(max-width:880px){
  .hero{min-height:auto;align-items:center}
  .hero__inner{padding-block:6rem 3rem}
}

/* ============================================================ NAV : état actif */
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ============================================================ EN-TÊTE SOUS-PAGE */
.pagehead{position:relative;overflow:hidden;
  padding:clamp(7rem,9vw,9rem) 0 clamp(2.5rem,5vw,4rem);
  background:radial-gradient(80% 75% at 85% -25%,rgba(225,29,42,.16),transparent 55%),var(--asphalt)}
.pagehead__grid{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 80% 0%,#000 25%,transparent 78%);opacity:.5}
.pagehead .container{position:relative;z-index:1}
.pagehead h1{font-size:clamp(2.6rem,1.7rem + 4vw,4.8rem);max-width:18ch}
.pagehead .lede{margin-top:1rem;max-width:58ch}
.crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.3rem}
.crumb a{color:var(--text-soft);transition:color .3s var(--ease)}
.crumb a:hover{color:var(--text)}
.crumb i{color:var(--text-dim);font-style:normal;margin:0 .5rem}
.crumb b{color:var(--red);font-weight:500}

/* ============================================================ FILTRES (pages liste) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2rem,4vw,3rem)}
.filters button,.filters a{display:inline-flex;align-items:center;background:none;border:1px solid var(--line-strong);cursor:pointer;color:var(--text-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.6rem 1.05rem;border-radius:100px;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);min-height:42px}
.filters button:hover,.filters a:hover{color:var(--text);border-color:var(--text)}
.filters button[aria-pressed="true"],.filters a[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ============================================================ CARTES CIRCUIT (graphique, sans photo) */
.circ-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(min-width:600px){.circ-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.circ-grid{grid-template-columns:repeat(3,1fr)}}
.circ{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:1.5rem;overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.circ::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);transition:width var(--dur) var(--ease)}
.circ:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--elev)}
.circ:hover::before{width:100%}
.circ__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.circ__reg{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);padding-top:.2rem}
.circ__svg{width:46px;height:46px;flex:none;color:var(--text-dim);opacity:.85;transition:color .3s var(--ease)}
.circ:hover .circ__svg{color:var(--red)}
.circ h3{font-size:clamp(1.45rem,1.2rem + .7vw,1.75rem);margin:1.4rem 0 .35rem}
.circ__meta{font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);letter-spacing:.05em}
.circ__go{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);transition:color .3s var(--ease)}
.circ__go .ar{transition:transform .3s var(--ease)}
.circ:hover .circ__go{color:var(--text)}
.circ:hover .circ__go .ar{transform:translateX(3px)}
/* Utilitaire d'état posé par les filtres. Le `!important` n'est pas un aveu de
   faiblesse : `.event` et `.post` redéfinissent `display` plus bas dans ce
   fichier, à spécificité égale, et gagnaient donc par simple ordre d'écriture —
   les cartes filtrées restaient à l'écran. */
.is-hidden{display:none !important}

/* ============================================================ PAGINATION */
.pager{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.pager a,.pager span{font-family:var(--font-mono);font-size:.8rem;min-width:44px;height:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 .9rem;border:1px solid var(--line-strong);border-radius:4px;
  color:var(--text-soft);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.pager a:hover{color:var(--text);border-color:var(--text)}
.pager [aria-current="page"]{background:var(--red);border-color:var(--red);color:#fff}
.pager .dots{border:0;color:var(--text-dim)}

/* ============================================================ VARIANTES GRILLE / CONTENU */
.cards--2{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:760px){.cards--2{grid-template-columns:repeat(2,1fr)}}
.card h4.sub{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:500;margin:1.4rem 0 .7rem}
.card p + .chips{margin-top:1.1rem}

/* Chips / repères */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chip{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--text-soft);
  border:1px solid var(--line-strong);border-radius:100px;padding:.45rem .85rem}
.chip b{color:var(--red);font-weight:600}

/* Listes modèle / valeur */
.tlist{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column}
.tlist li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}
/* Bloc de caractéristiques d'une fiche : une largeur de lecture, pas la pleine
   largeur du contenu, pour que l'œil relie facilement le libellé à sa valeur. */
.specs{margin-top:3rem;max-width:52ch}
.specs h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:.6rem}
.specs .tlist li:last-child{border-bottom:1px solid var(--line)}
.specs .m{color:var(--text-soft)}
/* Sélecteurs volontairement plus spécifiques que `.tlist .v`, déclarée plus bas
   dans ce fichier : elle impose `white-space:nowrap`, ce qui convient à ses
   valeurs courtes (« 410 ch ») mais faisait déborder de la page une adresse
   comme « Saint-Genès-Champanelle (Clermont-Ferrand), France ». */
.specs .tlist .v{font-family:var(--font-mono);font-size:.86rem;color:var(--text);text-align:right;
  min-width:0;white-space:normal;overflow-wrap:anywhere}
/* Sur écran étroit, libellé et valeur ne tiennent plus côte à côte : ils
   s'empilent, valeur alignée à gauche sous son libellé. */
@media(max-width:560px){
  .specs .tlist li{flex-direction:column;gap:.15rem}
  .specs .tlist .v{text-align:left}
}
.tlist li:first-child{border-top:0}
.tlist .m{font-weight:500;font-size:.95rem}
.tlist .v{font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);letter-spacing:.03em;text-align:right;white-space:nowrap}
.price{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.5rem}

/* Tableau récapitulatif */
.tablewrap{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-radius:6px;overflow:auto}
.spec-table{width:100%;border-collapse:collapse;min-width:580px}
.spec-table th,.spec-table td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.spec-table thead th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:500;background:var(--surface)}
.spec-table tbody tr:last-child td{border-bottom:0}
.spec-table tbody tr{transition:background .25s var(--ease)}
.spec-table tbody tr:hover{background:var(--elev)}
.spec-table .model{font-family:var(--font-display);font-weight:600}
.spec-table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-soft);font-size:.86rem}
.spec-table .b{color:var(--red);font-family:var(--font-mono);font-size:.8rem}

/* ============================================================ CARTES ARTICLE (blog / pilotage) */
.posts{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
/* Une grille qui ouvre sa section n'a pas besoin de sa marge : le rembourrage
   de la section s'en charge déjà. */
.section > .posts:first-child,.container > .posts:first-child{margin-top:0}
@media(min-width:760px){.posts{grid-template-columns:repeat(2,1fr)}}
.post{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:clamp(1.6rem,3vw,2.3rem);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.post::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);transition:width var(--dur) var(--ease)}
.post:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--elev)}
.post:hover::before{width:100%}
.post__meta{display:flex;flex-wrap:wrap;gap:1.1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.post__meta .cat{color:var(--red)}
.post h3{margin:1.1rem 0 .65rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.post p{color:var(--text-soft);font-size:.96rem;margin:0 0 1.4rem;max-width:54ch}
.post .link{margin-top:auto}
/* Vignette de l'article : elle déborde le rembourrage de la carte pour occuper
   toute sa largeur, et garde un rapport fixe pour que deux cartes voisines
   restent alignées quelle que soit la taille de l'image d'origine. */
.post__media{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;
  margin:calc(-1 * clamp(1.6rem,3vw,2.3rem)) calc(-1 * clamp(1.6rem,3vw,2.3rem)) 1.5rem;
  border-bottom:1px solid var(--line);background:var(--elev)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .post__media img{transform:scale(1.04)}

/* ============================================================ CALENDRIER (liste d'événements) */
.cal-count{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:1.5rem}
.cal-count b{color:var(--text)}
.events{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.event{display:grid;grid-template-columns:6.5rem 1fr auto;gap:.5rem 1.6rem;align-items:center;
  padding:1.15rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--line);background:var(--asphalt);
  transition:background .25s var(--ease)}
.event:last-child{border-bottom:0}
.event:hover{background:var(--elev)}
.event__date{line-height:1.05}
.event__date .d{display:block;font-family:var(--font-head);font-size:2rem;color:var(--red);letter-spacing:.02em}
.event__date .my{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.event__main{min-width:0}
.event__name{font-family:var(--font-head);font-weight:600;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:.01em}
.event__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.4rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
.event__meta .sep{opacity:.5}
.event__meta .stat{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-soft)}
.event__meta .stat::before{content:"";width:7px;height:7px;border-radius:50%;background:#3FB950}
.event__meta .stat.soon::before{background:#E3A008}
.event__meta .stat.full::before{background:var(--text-dim)}
.event__right{display:flex;align-items:center;gap:1.3rem;justify-self:end}
.event__price{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.event__price .cur{color:var(--text-dim);font-size:.72rem;font-weight:400}
.event__price.tba{color:var(--text-dim);font-size:.8rem;font-weight:400;letter-spacing:.06em}
.event .btn{min-height:42px;padding:.6rem 1.15rem;white-space:nowrap}
@media(max-width:720px){
  .event{grid-template-columns:auto 1fr;gap:.3rem 1.1rem;row-gap:.6rem}
  .event__date .d{font-size:1.6rem}
  .event__right{grid-column:1/-1;justify-self:start;width:100%;justify-content:space-between;
    padding-top:.8rem;border-top:1px solid var(--line);margin-top:.2rem}
}

/* ============================================================ MODE JOUR (thème clair) */
html[data-theme="light"]{
  --asphalt:#F7F6F3;
  --surface:#FFFFFF;
  --elev:#EFEDE8;
  --line:rgba(18,18,24,.10);
  --line-strong:rgba(18,18,24,.22);
  --text:#14141A;
  --text-soft:#4C4C55;
  --text-dim:#7A7A84;
  --red:#D11423;
  --red-deep:#A20F1B;
  --red-glow:rgba(209,20,35,.22);
  --footer-bg:#EFEDE8;
  --scrim:rgba(247,246,243,.85);
  --band-a:#FFFFFF;--band-b:#EFEDE8;
  --ghost-hover:rgba(18,18,24,.05);
}
/* transition douce au changement de thème */
body,.header,.footer,.card,.circ,.post,.event,.band,.tile,.news input{
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}

/* Bouton thème (injecté par site.js) */
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line-strong);border-radius:8px;background:none;color:var(--text);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.theme-toggle:hover{border-color:var(--text);background:var(--ghost-hover)}
.theme-toggle svg{width:19px;height:19px}
/* Le bouton annonce la destination, pas l'état courant : en thème sombre il
   montre un soleil (cliquer éclaire), en thème clair une lune. C'est aussi ce
   que dit son libellé — « Activer le mode jour » —, les deux concordent. */
.theme-toggle .i-sun{display:block}
.theme-toggle .i-moon{display:none}
html[data-theme="light"] .theme-toggle .i-sun{display:none}
html[data-theme="light"] .theme-toggle .i-moon{display:block}
@media(max-width:880px){.theme-toggle{margin-left:auto}}

/* ============================================================ COMPAT MENU WORDPRESS (wp_nav_menu) */
.nav ul{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--text)}
.nav .current-menu-item>a::after,.nav .current_page_item>a::after{transform:scaleX(1)}
.mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}

/* ============================================================ PROSE (contenu the_content) */
.prose{font-size:1.06rem;line-height:1.8;color:var(--text-soft);max-width:75ch}
.prose>*+*{margin-top:1.25rem}
.prose h2{font-family:var(--font-head);color:var(--text);font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);letter-spacing:.01em;margin-top:2.6rem;line-height:1.05}
.prose h3{font-family:var(--font-head);color:var(--text);font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);letter-spacing:.01em;margin-top:2rem}
.prose h4{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--text-dim);margin-top:1.8rem}
.prose p{margin:0}
/* `.prose p{margin:0}` l'emportait sur la règle d'espacement générique — plus
   spécifique, et écrite plus bas. Deux paragraphes se touchaient donc. */
.prose > p + p{margin-top:1.25rem}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--red-deep)}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.prose li{padding-left:.2rem}
.prose ul li::marker{color:var(--red)}
.prose img{border-radius:6px;margin-block:1.6rem;border:1px solid var(--line)}
.prose blockquote{border-left:2px solid var(--red);padding:.2rem 0 .2rem 1.3rem;margin-left:0;font-style:italic;color:var(--text)}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2rem}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:.1em .4em}