/* ==========================================================================
   Univers 3 — Mégane III RS Trophy
   ========================================================================== */

body.p-cars{
  --void:#0A0A0B;
  --ink:#121213;
  --display:'Archivo Black',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --data:'Barlow Condensed',system-ui,sans-serif;
  --line:rgba(255,255,255,.09);
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(255,212,0,.14), transparent 55%),
    radial-gradient(70% 50% at 10% 90%, rgba(232,17,45,.1), transparent 50%),
    #0A0A0B;
  overflow-x:hidden;
}
body.p-cars .page,body.p-cars .shell{max-width:100%}
body.p-cars .section-head h2{overflow-wrap:anywhere}
body.p-cars h1,body.p-cars h2,body.p-cars h3{
  font-weight:400;text-transform:uppercase;letter-spacing:-.015em;
}
body.p-cars .kicker{color:var(--a1)}
body.p-cars .govee b{opacity:.16}
body.p-cars .btn-glow{background:var(--a1);color:#0A0A0B;box-shadow:0 10px 40px -10px var(--a1)}
body.p-cars .btn-glow:hover{background:#fff}

/* fibre de carbone */
.carbon{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px);
}

/* ---------- Hero -------------------------------------------------------- */
.c-hero{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding:clamp(110px,16vw,160px) 0 clamp(48px,8vw,80px);overflow:hidden;
}
.c-hero::before{
  content:"";position:absolute;top:0;right:-10%;width:58%;height:100%;z-index:0;
  background:linear-gradient(200deg,var(--a1) 0%,rgba(255,212,0,.06) 46%,transparent 62%);
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);
  opacity:.16;
}
.c-hero .shell{position:relative;z-index:2;width:100%;min-width:0}
.c-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);
  align-items:center;width:100%;min-width:0;
}
.c-hero-grid > *{min-width:0}
.c-hero h1{
  font-size:clamp(28px,5vw,56px);line-height:1.05;margin:0 0 8px;font-weight:700;
  transform:skewX(-4deg);transform-origin:left;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
.c-hero h1 .y{color:var(--a1);display:block;text-shadow:0 0 60px rgba(255,212,0,.35)}
.c-hero .sub{
  font-family:var(--data);font-size:clamp(14px,2vw,22px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 20px;overflow-wrap:anywhere;line-height:1.35;
}
.c-hero .lead{color:var(--dim);max-width:46ch;font-size:clamp(15px,1.6vw,17px);margin-bottom:24px;line-height:1.6}
.c-hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.plate{
  display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;max-width:100%;
  font-family:var(--data);font-weight:700;letter-spacing:.1em;box-shadow:0 6px 24px rgba(0,0,0,.6);
}
.plate .eu{background:#003399;color:#FFCC00;padding:9px 8px;font-size:12px;display:grid;place-items:center;line-height:1;flex:none}
.plate .no{
  background:#EDEDE8;color:#111;padding:9px 14px;font-size:clamp(15px,3.5vw,20px);
  display:grid;place-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,220px);
}

@media(max-width:900px){
  .c-hero{min-height:auto;padding:clamp(108px,20vw,130px) 0 48px;align-items:flex-start}
  .c-hero::before{width:100%;right:0;opacity:.1;clip-path:none}
  .c-hero-grid{grid-template-columns:1fr;gap:32px}
  .c-hero h1{transform:none;font-size:clamp(26px,8vw,40px)}
  .c-hero .sub{letter-spacing:.12em;font-size:clamp(13px,3.4vw,16px)}
  .c-hero-actions{width:100%}
  .c-hero-actions .btn{flex:1 1 auto;justify-content:center;min-width:min(100%,140px)}
}

/* bandeau défilant */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);padding:16px 0;
  background:linear-gradient(90deg,rgba(255,212,0,.07),transparent 40%,rgba(255,212,0,.07));
  position:relative;z-index:1;
}
.marquee-in{display:flex;gap:44px;width:max-content;animation:mv 34s linear infinite}
.marquee span{
  font-family:var(--display);font-size:clamp(16px,3vw,32px);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);white-space:nowrap;
}
.marquee span.on{color:var(--a1);-webkit-text-stroke:0}
@keyframes mv{to{transform:translateX(-50%)}}

/* photo principale */
.c-shot{
  border-radius:20px;overflow:hidden;border:1px solid var(--line);position:relative;
  aspect-ratio:16/10;background:#101012;margin:0;width:100%;
}
.c-shot img{width:100%;height:100%;object-fit:cover}
.c-shot .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:34px;color:var(--faint);font-size:14px}
.c-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));
}

/* ---------- Fiche technique --------------------------------------------- */
.tech{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:center}
.gauge{position:relative;width:100%;max-width:min(100%,300px);aspect-ratio:1;margin-inline:auto}
.gauge svg{width:100%;height:100%;transform:rotate(135deg)}
.gauge .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14;stroke-linecap:round}
.gauge .fg{fill:none;stroke:var(--a1);stroke-width:14;stroke-linecap:round;
  filter:drop-shadow(0 0 14px rgba(255,212,0,.6));transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.gauge .red{fill:none;stroke:var(--a3);stroke-width:14;stroke-linecap:round;opacity:.85}
.gauge-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:16px}
.gauge-c b{
  font-family:var(--display);font-size:clamp(32px,8vw,48px);line-height:1;color:var(--a1);
  overflow-wrap:anywhere;
}
.gauge-c i{font-style:normal;font-family:var(--data);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:block;margin-top:6px}

.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;
}
.spec{background:#0E0E10;padding:clamp(16px,2.5vw,22px) clamp(14px,2vw,20px);min-width:0}
.spec span{
  font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:6px;
}
.spec b{
  font-family:var(--display);font-size:clamp(18px,4vw,26px);color:var(--txt);line-height:1.15;
  overflow-wrap:anywhere;word-break:break-word;
}
.spec b em{font-style:normal;font-family:var(--data);font-size:13px;color:var(--a1);margin-left:5px;letter-spacing:.06em}

@media(max-width:840px){
  .tech{grid-template-columns:1fr;gap:28px}
  .gauge{max-width:260px}
}
@media(max-width:420px){
  .specs{grid-template-columns:1fr}
}

/* ---------- Modifications ----------------------------------------------- */
.mods{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mod{
  background:#0E0E10;padding:clamp(18px,3vw,26px) clamp(16px,3vw,28px);
  display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) minmax(0,100px);
  gap:clamp(12px,2vw,24px);align-items:center;transition:.24s;position:relative;min-width:0;
}
.mod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a1);transform:scaleY(0);transition:.24s}
.mod:hover{background:#131315}
.mod:hover::before{transform:scaleY(1)}
.mod .cat{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a1);overflow-wrap:anywhere}
.mod h3{font-size:clamp(16px,2.5vw,19px);margin-bottom:6px;overflow-wrap:anywhere}
.mod p{color:var(--dim);font-size:14px;margin:0;overflow-wrap:anywhere}
.mod .gain{
  font-family:var(--display);font-size:clamp(16px,2.5vw,20px);color:var(--a1);text-align:right;overflow-wrap:anywhere;
}
@media(max-width:760px){
  .mod{grid-template-columns:1fr;gap:8px;padding:18px 16px}
  .mod .gain{text-align:left}
}

/* ---------- Galerie ----------------------------------------------------- */
.gallery{columns:3;column-gap:14px}
@media(max-width:900px){.gallery{columns:2}}
@media(max-width:560px){.gallery{columns:1}}
.shot{
  break-inside:avoid;margin-bottom:14px;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--line);display:block;background:#101012;
}
.shot img{width:100%;transition:.5s}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-size:13.5px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));color:#EDEDE8;opacity:0;transition:.3s;
}
.shot:hover figcaption{opacity:1}

#lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(6,6,8,.96);backdrop-filter:blur(10px);
  display:none;place-items:center;padding:5vh 5vw;cursor:zoom-out;
}
#lightbox.open{display:grid}
#lightbox img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.8)}
#lightbox figcaption{text-align:center;color:var(--dim);margin-top:16px;font-size:14px}

/* ---------- Sorties ----------------------------------------------------- */
.events{border-left:2px solid var(--line);padding-left:0;margin-left:8px}
.event{position:relative;padding:0 0 34px 34px}
.event::before{
  content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--a1);box-shadow:0 0 0 5px rgba(255,212,0,.14);
}
.event .when{font-family:var(--data);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--a1)}
.event h3{font-size:clamp(18px,3vw,22px);margin:6px 0;overflow-wrap:anywhere}
.event .where{font-family:var(--data);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;overflow-wrap:anywhere}
.event p{color:var(--dim);margin:0;max-width:62ch;overflow-wrap:anywhere}

@media(max-width:560px){
  .events{margin-left:2px}
  .event{padding:0 0 28px 24px}
}