/* ==========================================================================
   Accueil — base commune
   Toute la page passe sur fond sombre, avec les détails HUD des visuels réseaux sociaux
   (chargé après style.css, uniquement par index.html)
   ========================================================================== */

:root{
  --neon: #ff1a12;
  --neon-glow: rgba(255,26,18,.45);
  /* équerres rouges aux 4 coins d'un panneau */
  --hud-coins:
    linear-gradient(var(--neon), var(--neon)) left top / 22px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left top / 3px 22px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right top / 22px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right top / 3px 22px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left bottom / 22px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left bottom / 3px 22px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right bottom / 22px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right bottom / 3px 22px no-repeat;
}

/* -------------------- sections « papier » → sections sombres -------------------- */
.section-diagonal{
  --bg: #050505;
  --fg: #f4efe8;
  --fg-soft: #d8d1c7;
  --muted: #a69e94;
  --line: #2a2524;
  --surface: #0d0b0b;
  --surface-2: #141111;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,26,18,.08), transparent 70%),
    #050505;
  color:var(--fg);
  -webkit-mask:none; mask:none;
  margin:0; padding:130px 0 120px;
}

/* séparateur HUD en haut des sections sombres : filet néon + chevrons au centre */
.section-diagonal::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1220px, calc(100% - 32px)); height:16px; pointer-events:none;
  background:
    url('../img/hud/chevron-gauche.svg') calc(50% - 46px) center / 10px 14px no-repeat,
    url('../img/hud/chevron-gauche.svg') calc(50% - 30px) center / 10px 14px no-repeat,
    url('../img/hud/chevron-droite.svg') calc(50% + 30px) center / 10px 14px no-repeat,
    url('../img/hud/chevron-droite.svg') calc(50% + 46px) center / 10px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--neon) 12%, var(--neon) calc(50% - 64px), transparent calc(50% - 64px),
                    transparent calc(50% + 64px), var(--neon) calc(50% + 64px), var(--neon) 88%, transparent) center / 100% 2px no-repeat;
  filter:drop-shadow(0 0 5px var(--neon-glow));
}

/* -------------------- panneaux HUD : objectifs, événements, appel à l'action -------------------- */
.slab,
.cta-banner,
.events-grid .card{
  clip-path:none;
  border:1.5px solid rgba(255,26,18,.4);
  background:var(--hud-coins), #090808;
  box-shadow:0 0 22px rgba(255,26,18,.08), inset 0 0 40px rgba(0,0,0,.6);
}
.events-grid .card:hover{ border-color:var(--neon); box-shadow:0 0 26px rgba(255,26,18,.22); }
.events-grid .card .card-media{ margin:-28px -28px 22px; border-bottom:1.5px solid rgba(255,26,18,.4); }

/* -------------------- liste « Trois façons » -------------------- */
.ways-list{ border-top:2px solid var(--neon); box-shadow:0 -1px 8px -2px var(--neon-glow); }
.ways-list li{ border-bottom-color:var(--line); }
.ways-num{ text-shadow:0 0 18px var(--neon-glow); }

/* -------------------- titres de section : un léger halo -------------------- */
main h2{ text-shadow:0 2px 0 #000, 0 0 30px rgba(0,0,0,.8); }

@media (max-width:640px){
  .section-diagonal{ padding:90px 0 80px; }
}