/* ============================================================
   ASL MOTORSPORTS — Feuille de style partagée
   Identité : noir piste / rouge course / chrome, dans la
   continuité de l'app ASL Pit Book et du logo (kart n°7).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --noir:      #1b1c1f;
  --noir-2:    #222327;
  --carte:     #2a2b2f;
  --bordure:   #3a3b40;
  --rouge:     #dc2626;
  --rouge-fonce:#7f1418;
  --chrome:    #c7ccd1;
  --blanc:     #f5f6f7;
  --gris:      #a3a8ad;
  --gris-fonce:#797d82;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--blanc);
  font-family:'Inter', system-ui, sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-color:var(--noir);
  background-image:url('../images/logo-fond.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:900px;
  background-attachment:fixed;
}
h1,h2,h3,.chiffre-course{
  font-family:'Bebas Neue', 'Inter', sans-serif; font-weight:400;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.05;
}
h1{font-size:clamp(2.4rem,6vw,4.2rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.6em;}
h3{font-size:1.05rem; letter-spacing:.06em; color:var(--rouge);}
p{color:var(--gris); margin:0 0 1em;}
a{color:var(--blanc);}
img{max-width:100%; display:block;}

.conteneur{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- En-tête ---------- */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(12,13,15,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--bordure);
}
.barre-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1080px; margin:0 auto;
}
.marque{display:flex; align-items:center; gap:12px; text-decoration:none;}
.marque img{width:40px; height:40px; border-radius:9px;}
.marque span{font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:.04em;}
nav.liens{display:flex; gap:6px; flex-wrap:wrap;}
nav.liens a{
  color:var(--gris); text-decoration:none; font-size:.86rem; font-weight:600;
  padding:9px 14px; border-radius:7px; transition:color .15s, background .15s;
}
nav.liens a:hover, nav.liens a.actif{color:var(--blanc); background:var(--carte);}
nav.liens a.cta{
  background:transparent; color:var(--rouge); border:1px solid var(--rouge); padding:8px 17px;
}
nav.liens a.cta:hover{background:var(--rouge); color:#fff;}
nav.liens img.icone-nav{width:18px; height:18px; border-radius:4px; vertical-align:-4px; margin-right:2px;}
nav.liens a.lien-icone, nav.liens a:has(img.icone-nav){display:inline-flex; align-items:center; gap:6px;}

/* ---------- Hero avec numéro de course en filigrane ---------- */
.hero{
  position:relative; overflow:hidden; padding:90px 24px 70px;
  background:linear-gradient(135deg, transparent 40%, rgba(220,38,38,.12) 55%, transparent 70%);
  border-bottom:1px solid var(--bordure);
}
.hero::before{
  content:"7"; position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  font-family:'Bebas Neue',sans-serif; font-size:38rem; line-height:1; color:#fff;
  opacity:.035; pointer-events:none; user-select:none;
}
.hero-contenu{position:relative; max-width:640px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--rouge);
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:16px;
}
.hero p.lead{font-size:1.08rem; color:var(--chrome); margin-bottom:1.6em;}

.bouton{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:700; font-size:.92rem; padding:13px 26px; border-radius:8px;
  border:none; cursor:pointer;
}
.bouton-rouge{background:var(--rouge); color:#fff;}
.bouton-rouge:hover{background:#b91c1c;}
.bouton-contour{background:transparent; color:var(--blanc); border:1px solid var(--bordure);}
.bouton-contour:hover{border-color:var(--chrome);}
.groupe-boutons{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;}
.bouton-cible{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.bouton-cible .legende{font-size:.74rem; color:var(--gris-fonce); padding-left:4px;}
.bouton img.icone-bouton{width:20px; height:20px; border-radius:5px; object-fit:cover;}
.bouton svg.icone-bouton{width:20px; height:20px; flex-shrink:0;}

/* ---------- Sections ---------- */
section{padding:64px 24px;}
section.alt{background:rgba(34,35,39,.55); border-top:1px solid var(--bordure); border-bottom:1px solid var(--bordure);}
.entete-section{max-width:640px; margin-bottom:36px;}

/* ---------- Calendrier / feuille de temps ---------- */
.feuille-temps{border:1px solid var(--bordure); border-radius:12px; overflow:hidden;}
.ligne-temps{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--bordure);
  font-variant-numeric:tabular-nums;
}
.ligne-temps:last-child{border-bottom:none;}
.ligne-temps:nth-child(odd){background:var(--carte);}
.ligne-temps .repere{font-size:1.3rem;}
.ligne-temps .libelle{color:var(--blanc); font-weight:600; font-size:.92rem;}
.ligne-temps .periode{color:var(--gris); font-size:.82rem; text-align:right; white-space:nowrap;}

/* ---------- Grille de cartes ---------- */
.grille-cartes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.carte{
  background:var(--carte); border:1px solid var(--bordure); border-radius:12px;
  padding:22px; position:relative;
}
.carte h3{margin:0 0 10px;}
.carte p{margin:0; font-size:.9rem;}
.carte .icone{font-size:1.6rem; margin-bottom:12px; display:block;}

/* ---------- Colonnes ---------- */
.deux-colonnes{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:720px){.deux-colonnes{grid-template-columns:1fr;}}
ul.liste-check{list-style:none; padding:0; margin:0;}
ul.liste-check li{
  padding-left:28px; position:relative; margin-bottom:12px; color:var(--chrome); font-size:.94rem;
}
ul.liste-check li::before{
  content:"—"; position:absolute; left:0; color:var(--rouge); font-weight:700;
}

/* ---------- Bandeau CTA ---------- */
.bandeau-cta{
  background:linear-gradient(135deg, var(--rouge-fonce), var(--noir) 60%);
  border-radius:16px; padding:48px 36px; text-align:center;
  max-width:900px; margin:0 auto;
}
.bandeau-cta h2{margin-bottom:.3em;}
.bandeau-cta p{color:var(--chrome); max-width:520px; margin:0 auto 24px;}

/* ---------- Placeholder image (photo perso à ajouter) ---------- */
.emplacement-photo{
  aspect-ratio:4/3; border:2px dashed var(--bordure); border-radius:12px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--gris-fonce); font-size:.8rem; padding:20px; background:var(--carte);
}

/* ---------- Bloc pilote : photo + origines (drapeaux) ---------- */
.bloc-pilote{display:flex; gap:14px; align-items:stretch; flex-wrap:wrap;}
.bloc-pilote .photo-pilote{
  flex:1 1 220px; max-width:260px; border-radius:12px; overflow:hidden;
  border:1px solid var(--bordure);
}
.bloc-pilote .photo-pilote img{width:100%; height:100%; object-fit:cover;}
.bandeau-origines{display:flex; flex-direction:column; gap:8px; flex:0 0 auto;}
.bandeau-origines a{
  display:block; width:110px; height:73px; border-radius:8px; overflow:hidden;
  border:1px solid var(--bordure); text-decoration:none; position:relative;
}
.bandeau-origines img{width:100%; height:100%; object-fit:cover; display:block;}
.lien-origines{
  font-size:.78rem; color:var(--gris); text-decoration:underline; margin-top:4px; display:inline-block;
}

/* ---------- Page Origines / Logo ---------- */
.grille-origine{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
@media (max-width:720px){.grille-origine{grid-template-columns:1fr;}}
.cadre-logo{
  background:var(--carte); border:1px solid var(--bordure); border-radius:16px;
  padding:32px; text-align:center;
}
.cadre-logo img{max-width:100%; margin-bottom:14px;}

/* ---------- Réseaux sociaux ---------- */
.carte-reseau{
  display:flex; align-items:center; gap:16px; background:var(--carte);
  border:1px solid var(--bordure); border-radius:12px; padding:20px 22px;
  text-decoration:none; margin-bottom:14px; transition:border-color .15s;
}
.carte-reseau:hover{border-color:var(--rouge);}
.carte-reseau .icone-reseau{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.icone-reseau.instagram{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
.icone-reseau.facebook{background:#1877F2;}
.icone-reseau svg{width:24px; height:24px; fill:#fff;}
.carte-reseau strong{display:block; color:var(--blanc); font-size:.98rem;}
.carte-reseau span{color:var(--gris); font-size:.85rem;}

/* ---------- Tagline Performance / Passion / Précision ---------- */
.tagline-ppp{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:20px 0 8px;
}
.tagline-ppp span{
  font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.04em;
  color:var(--blanc); padding:6px 4px;
}
.tagline-ppp span.sep{color:var(--rouge); font-family:'Inter',sans-serif; font-size:1rem;}

.bloc-avant-apres{
  border-left:3px solid var(--rouge); background:var(--carte); border-radius:0 10px 10px 0;
  padding:18px 22px; margin:28px 0; font-style:italic; color:var(--chrome);
}

/* ---------- Galerie calendrier saison ---------- */
.galerie-calendrier{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media (max-width:720px){.galerie-calendrier{grid-template-columns:1fr; max-width:340px; margin:0 auto;}}
.carte-calendrier{
  border-radius:14px; overflow:hidden; border:1px solid var(--bordure);
  background:var(--carte);
}
.carte-calendrier img{width:100%; display:block;}
.carte-calendrier .legende-calendrier{
  padding:12px 14px; font-size:.82rem; font-weight:700; color:var(--blanc); text-align:center;
}
.bloc-prix{
  background:var(--carte); border:1px solid var(--bordure); border-radius:16px;
  padding:32px; text-align:center;
}
.bloc-prix .montant{font-family:'Bebas Neue',sans-serif; font-size:3.2rem; color:var(--blanc);}
.bloc-prix .montant span{font-size:1.1rem; color:var(--gris); font-family:'Inter',sans-serif;}
.badge-gratuit{
  display:inline-block; background:#16a34a20; color:#4ade80; border:1px solid #16a34a50;
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:6px; letter-spacing:.04em;
}
.badge-premium{
  display:inline-block; background:#dc262620; color:#f87171; border:1px solid #dc262650;
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:6px; letter-spacing:.04em;
}

/* ---------- Formulaire intégré ---------- */
.cadre-formulaire{
  border:1px solid var(--bordure); border-radius:12px; overflow:hidden; background:#fff;
}
.cadre-formulaire iframe{display:block; width:100%; height:1400px; border:none;}

/* ---------- Pied de page ---------- */
footer.site{
  border-top:1px solid var(--bordure); padding:40px 24px; text-align:center;
}
footer.site p{font-size:.78rem; color:var(--gris-fonce); margin:0;}
footer.site .liens-pied{margin-bottom:16px;}
footer.site .liens-pied a{
  color:var(--gris); text-decoration:none; font-size:.85rem; margin:0 10px;
}
footer.site .liens-pied a:hover{color:var(--blanc);}

@media (max-width:640px){
  .barre-nav{flex-direction:column; gap:12px; align-items:flex-start;}
  nav.liens{width:100%;}
  .hero{padding:70px 20px 50px;}
}