/* =========================================================
   LES CHABAUD EN 4L — Feuille de style
   4L Trophy 2027 — Équipage 1523
   ========================================================= */

:root{
  /* Palette (extraite du logo) */
  --sable:#EFE6D4;
  --ecru:#F6F0E2;
  --terracotta:#C2562E;
  --terracotta-dark:#A8451F;
  --petrole:#1E4A59;
  --petrole-dark:#163945;
  --anthracite:#232323;
  --sable-fonce:#D8B98C;
  --blanc:#FFFFFF;
  --gris:#6b6256;

  --ombre:0 10px 30px rgba(35,35,35,.12);
  --ombre-forte:0 18px 50px rgba(35,35,35,.22);
  --rayon:14px;
  --rayon-lg:22px;
  --max:1180px;
  --transition:.25s ease;

  --font-titre:"Oswald","Arial Narrow",sans-serif;
  --font-texte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:var(--font-texte);
  color:var(--anthracite);
  background:var(--ecru);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--terracotta);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--terracotta-dark)}

h1,h2,h3,h4{
  font-family:var(--font-titre);
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--anthracite);
}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,4vw,2.9rem)}
h3{font-size:1.35rem;letter-spacing:.8px}
p{margin-bottom:1rem}
.lead{font-size:1.15rem;color:var(--gris)}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section--sable{background:var(--sable)}
.section--petrole{background:var(--petrole);color:var(--ecru)}
.section--petrole h2,.section--petrole h3{color:var(--blanc)}
.section--anthracite{background:var(--anthracite);color:var(--ecru)}
.section--anthracite h2,.section--anthracite h3{color:var(--blanc)}

.center{text-align:center}
.kicker{
  display:inline-block;
  font-family:var(--font-titre);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:.85rem;
  color:var(--terracotta);
  font-weight:600;
  margin-bottom:.6rem;
}
.section--petrole .kicker,.section--anthracite .kicker{color:var(--sable-fonce)}
.section-head{max-width:720px;margin:0 auto 48px}
.section-head.left{margin-left:0;text-align:left}
.divider{width:64px;height:4px;background:var(--terracotta);border:0;margin:18px auto;border-radius:4px}
.section-head.left .divider{margin-left:0}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-titre);
  text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-size:.95rem;
  padding:14px 28px;border-radius:50px;border:2px solid transparent;
  cursor:pointer;transition:all var(--transition);
}
.btn--primary{background:var(--terracotta);color:#fff}
.btn--primary:hover{background:var(--terracotta-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--ombre)}
.btn--petrole{background:var(--petrole);color:#fff}
.btn--petrole:hover{background:var(--petrole-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--light{background:var(--ecru);color:var(--anthracite)}
.btn--light:hover{background:#fff;color:var(--anthracite);transform:translateY(-2px)}
.btn--lg{padding:17px 38px;font-size:1.05rem}

/* ---------- En-tête / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(246,240,226,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(35,35,35,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav__brand{display:flex;align-items:center;gap:12px;font-family:var(--font-titre);
  text-transform:uppercase;font-weight:700;letter-spacing:1px;color:var(--anthracite);font-size:1.05rem}
.nav__brand img{height:46px;width:auto}
.nav__brand .num{color:var(--terracotta)}
.nav__links{display:flex;align-items:center;gap:26px;list-style:none}
.nav__links a{
  font-family:var(--font-titre);text-transform:uppercase;letter-spacing:1px;
  font-size:.92rem;color:var(--anthracite);font-weight:500;
}
.nav__links a:hover,.nav__links a.active{color:var(--terracotta)}
.nav__cta{margin-left:8px}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav__toggle span{display:block;width:26px;height:3px;background:var(--anthracite);border-radius:3px;transition:var(--transition)}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:var(--ecru);
  background:
    linear-gradient(rgba(30,74,89,.78),rgba(35,35,35,.82)),
    url("../img/notre-4l.png") center/cover no-repeat;
  padding:120px 0 110px;text-align:center;overflow:hidden;
}
.hero__badge{display:inline-block;border:2px solid var(--sable-fonce);border-radius:50px;
  padding:7px 20px;font-family:var(--font-titre);letter-spacing:2px;text-transform:uppercase;
  font-size:.85rem;color:var(--sable);margin-bottom:22px}
.hero h1{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.hero h1 span{color:var(--terracotta)}
.hero__slogan{font-family:var(--font-titre);letter-spacing:4px;text-transform:uppercase;
  margin:14px 0 8px;color:var(--sable-fonce);font-size:1.1rem}
.hero__sub{max-width:640px;margin:18px auto 30px;font-size:1.15rem;color:#f0e8d8}
.hero__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* compteur / dates : 3 clés harmonisées */
.hero__meta{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-top:46px}
.hero__meta div{text-align:center;padding:6px 34px;position:relative}
.hero__meta div + div::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.22)}
.hero__meta .n{display:block;font-family:var(--font-titre);font-size:clamp(2.1rem,4.5vw,2.9rem);color:#fff;line-height:1;font-weight:700}
.hero__meta .l{display:block;margin-top:8px;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--sable-fonce)}
.hero__clock{display:block;margin-top:6px;font-family:var(--font-titre);letter-spacing:1px;color:var(--sable);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Page header (pages internes) ---------- */
.page-hero{
  background:linear-gradient(rgba(35,35,35,.7),rgba(30,74,89,.78)),var(--anthracite);
  color:#fff;text-align:center;padding:88px 0 70px;
}
.page-hero h1{color:#fff}
.page-hero p{color:#f0e8d8;max-width:620px;margin:12px auto 0}

/* ---------- Grilles & cartes ---------- */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border-radius:var(--rayon);padding:30px;
  box-shadow:var(--ombre);border:1px solid rgba(35,35,35,.05);
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.card .ico{font-size:2rem;margin-bottom:12px;display:block}
.card h3{margin-bottom:10px;color:var(--petrole)}

/* media + texte côte à côte */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:var(--rayon-lg);box-shadow:var(--ombre)}
.split--rev .split__media{order:2}

/* valeurs (pictos) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.value{text-align:center;padding:22px}
.value .ico{font-size:2.2rem}
.value h3{margin:10px 0 6px;color:var(--terracotta)}

/* ---------- Équipage ---------- */
.crew{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.crew__card{background:#fff;border-radius:var(--rayon-lg);overflow:hidden;box-shadow:var(--ombre)}
.crew__photo{aspect-ratio:4/3;background:var(--sable-fonce) url("../img/logo.png") center/55% no-repeat;
  display:flex;align-items:flex-end;border-bottom:5px solid var(--terracotta)}
.crew__body{padding:26px}
.crew__role{color:var(--terracotta);font-family:var(--font-titre);letter-spacing:1px;text-transform:uppercase;font-size:.9rem}

/* ---------- Sponsors / packs ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;align-items:stretch}
.pack{background:#fff;border-radius:var(--rayon-lg);padding:32px 26px;box-shadow:var(--ombre);
  display:flex;flex-direction:column;border-top:6px solid var(--sable-fonce);position:relative}
.pack--bronze{border-top-color:#b07a47}
.pack--argent{border-top-color:#9aa3a8}
.pack--or{border-top-color:#d4a528}
.pack--partenaire{border-top-color:var(--terracotta)}
.pack__name{font-family:var(--font-titre);text-transform:uppercase;letter-spacing:1px;font-size:1.3rem}
.pack__price{font-family:var(--font-titre);font-size:2.4rem;color:var(--petrole);margin:6px 0 4px}
.pack__price small{font-size:.9rem;color:var(--gris);font-family:var(--font-texte)}
.pack__net{font-size:.85rem;color:var(--terracotta);margin-bottom:16px}
.pack ul{list-style:none;margin:10px 0 24px;flex:1}
.pack li{padding:8px 0;border-bottom:1px dashed rgba(35,35,35,.12);font-size:.95rem;display:flex;gap:8px}
.pack li::before{content:"✔";color:var(--terracotta);font-weight:700}
.pack--or{transform:scale(1.04)}
.badge-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--terracotta);
  color:#fff;font-family:var(--font-titre);letter-spacing:1px;font-size:.72rem;padding:5px 14px;border-radius:50px;text-transform:uppercase}

/* note encadrée */
.note{background:var(--sable);border-left:5px solid var(--terracotta);padding:20px 24px;border-radius:8px;margin-top:24px}
.note--light{background:rgba(255,255,255,.1);border-left-color:var(--sable-fonce)}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery img{border-radius:var(--rayon);box-shadow:var(--ombre);aspect-ratio:1/1;object-fit:cover;width:100%}
.gallery .ph{aspect-ratio:1/1;border-radius:var(--rayon);background:var(--sable-fonce);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-titre);
  letter-spacing:1px;text-align:center;padding:14px;opacity:.85;border:2px dashed rgba(255,255,255,.5)}

/* ---------- CTA bandeau ---------- */
.cta-band{background:var(--terracotta);color:#fff;text-align:center;padding:64px 0}
.cta-band h2{color:#fff}
.cta-band p{color:#ffe9dd;max-width:560px;margin:0 auto 24px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-info li{list-style:none;padding:14px 0;border-bottom:1px solid rgba(35,35,35,.1);display:flex;gap:14px;align-items:center}
.contact-info .ico{font-size:1.4rem;color:var(--terracotta)}
.socials{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(35,35,35,.12);
  padding:10px 18px;border-radius:50px;color:var(--anthracite);font-family:var(--font-titre);letter-spacing:1px;font-size:.9rem}
.socials a:hover{background:var(--petrole);color:#fff;border-color:var(--petrole)}

/* ---------- Placeholder à compléter ---------- */
.todo{background:#fff7d6;border:1px dashed #d4a528;color:#7a5b00;padding:3px 9px;border-radius:6px;
  font-size:.85rem;font-weight:600}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--anthracite);color:#cfc6b6;padding:56px 0 26px}
.site-footer a{color:var(--sable-fonce)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-grid img{height:60px;margin-bottom:14px}
.site-footer h4{font-family:var(--font-titre);color:#fff;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;font-size:1.05rem}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem}

/* ---------- Animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .grid-3,.grid-4,.packs,.gallery{grid-template-columns:repeat(2,1fr)}
  .split,.crew,.contact-grid,.footer-grid{grid-template-columns:1fr;gap:30px}
  .split--rev .split__media{order:0}
  .pack--or{transform:none}
  .values{grid-template-columns:1fr}
}
@media(max-width:680px){
  .section{padding:60px 0}
  .nav__links{
    position:fixed;inset:74px 0 auto 0;background:var(--ecru);flex-direction:column;
    gap:0;padding:10px 0;box-shadow:var(--ombre);transform:translateY(-130%);transition:transform .3s ease;
  }
  .nav__links.open{transform:translateY(0)}
  .nav__links li{width:100%;text-align:center;border-bottom:1px solid rgba(35,35,35,.07)}
  .nav__links a{display:block;padding:14px}
  .nav__cta{margin:10px auto}
  .nav__toggle{display:flex}
  .grid-3,.grid-4,.packs,.gallery,.grid-2{grid-template-columns:1fr}
  .hero__meta{gap:18px}
  .hero__meta div{padding:6px 18px}
  .hero__meta div + div::before{display:none}
}