/* Constellation V2 - design system (brand board Claude Design, 2026-07) */

@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../static/fonts/Poppins-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }

:root {
  --c-primary:#5651D6;
  --c-primary-hover:#3B2ADB;
  --c-primary-soft:#5651D6;      /* violet des titres/links sur fond clair */
  --c-accent:#6C5CE7;
  --c-navy:#232A6B;
  --c-ink:#2D3436;
  --c-text:#2D3436;
  --c-text-2:#5A6063;
  --c-muted:#7A8084;
  --c-border:#ECEEF0;
  --c-border-strong:#DDE1E3;
  --c-bg:#FFFFFF;
  --c-bg-alt:#F7F7FA;
  --c-tint:#EEF0FB;
  --c-card:#FFFFFF;
  --c-surface:#FFFFFF;
  --c-surface-hover:#F1F5F9;
  --c-nav-bg:rgba(255,255,255,.92);
  --c-hero-card:rgba(255,255,255,.82);
  --c-footer-bg:#232A6B;
  --c-btn-on-primary:#FFFFFF;
  --shadow-card:0 1px 2px rgba(45,52,54,.04),0 10px 30px rgba(45,52,54,.07);
  --radius-card:16px;
  --radius-btn:10px;
}

[data-theme="dark"] {
  --c-primary:#5651D6;
  --c-primary-hover:#4642c4;
  --c-primary-soft:#9E99F2;      /* violet éclairci pour rester lisible */
  --c-accent:#9E99F2;
  --c-navy:#232A6B;
  --c-ink:#F2F4F5;
  --c-text:#F2F4F5;
  --c-text-2:#C6CACB;
  --c-muted:#9DA3A5;
  --c-border:rgba(255,255,255,.12);
  --c-border-strong:rgba(255,255,255,.2);
  --c-bg:#23292A;
  --c-bg-alt:#262B2C;
  --c-tint:rgba(158,153,242,.18);
  --c-card:#2D3436;
  --c-surface:#2D3436;
  --c-surface-hover:#363D3F;
  --c-nav-bg:rgba(35,41,42,.9);
  --c-hero-card:rgba(45,52,54,.85);
  --c-footer-bg:#1B2022;
  --c-btn-on-primary:#FFFFFF;
  --shadow-card:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.35);
}

/* ---- reset & base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:'Poppins', sans-serif;
  color:var(--c-text); background:var(--c-bg);
  font-size:15px; line-height:1.65;
  transition:background .25s,color .25s;
}
img { max-width:100%; height:auto; }
a { color:var(--c-primary-soft); }
h1,h2,h3,h4 { line-height:1.3; letter-spacing:-.005em; color:var(--c-ink); margin:0 0 18px; font-weight:600; }
h1 { font-size:clamp(30px, 5vw, 45px); }
h2 { font-size:clamp(24px, 3vw, 34px); }
h3 { font-size:20px; }

/* ---- layout ---- */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:72px 0; }
.section-alt { background:var(--c-bg-alt); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .section{padding:52px 0;} }

/* ---- composants ---- */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-primary-soft); background:var(--c-tint);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.kicker {
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-primary-soft); margin-bottom:14px;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:var(--c-btn-on-primary);
  background:var(--c-primary); text-decoration:none;
  padding:13px 22px; border-radius:var(--radius-btn);
  border:1px solid transparent; cursor:pointer; transition:background .2s;
}
.btn-primary:hover { background:var(--c-primary-hover); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:var(--c-ink);
  background:transparent; text-decoration:none;
  padding:13px 22px; border-radius:var(--radius-btn);
  border:1px solid var(--c-border-strong); transition:border-color .2s,color .2s;
}
.btn-ghost:hover { border-color:var(--c-primary-soft); color:var(--c-primary-soft); }
.card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  overflow:hidden;
}
.card-body { padding:24px; }
.card h3 a { color:var(--c-ink); text-decoration:none; }
.card h3 a:hover { color:var(--c-primary-soft); }
.card-thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--c-tint); }
.thumb-fallback {
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/9;
  background:url('../static/img/bg-aurora-gradient.png') center/cover, var(--c-tint);
}
.thumb-fallback img { width:56px; height:56px; opacity:.85; }

/* ---- nav ---- */
.nav {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:28px;
  padding:14px 40px;
  background:var(--c-nav-bg); backdrop-filter:blur(8px) saturate(1.1);
  border-bottom:1px solid var(--c-border);
}
.nav .logo img { height:30px; width:auto; display:block; }
.logo-dark { display:none; }
[data-theme="dark"] .logo-dark { display:block; }
[data-theme="dark"] .logo-light { display:none; }
.nav-links { display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav-links a {
  font-size:14px; color:var(--c-text-2); text-decoration:none;
  padding:9px 13px; border-radius:8px; transition:color .15s;
}
.nav-links a:hover, .nav-links a.active { color:var(--c-ink); }
.nav-links a.active { font-weight:600; }
.nav-cta {
  font-size:15px; font-weight:600; color:#fff !important;
  background:var(--c-primary); padding:10px 20px !important; border-radius:var(--radius-btn);
  transition:background .2s;
}
.nav-cta:hover { background:var(--c-primary-hover); color:#fff !important; }
.theme-toggle {
  margin-left:6px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--c-border-strong); background:transparent;
  color:var(--c-text-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.theme-toggle:hover { color:var(--c-primary-soft); border-color:var(--c-primary-soft); }
.theme-toggle .ic-sun { display:none; }
[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
[data-theme="dark"] .theme-toggle .ic-moon { display:none; }
@media (max-width:900px){
  .nav { padding:12px 18px; gap:12px; }
  .nav-links a:not(.nav-cta){ padding:8px 9px; font-size:13px; }
}

/* ---- hero ---- */
.hero {
  position:relative; padding:84px 24px; overflow:hidden;
  background:url('../static/img/slots/hero-circuit.webp') center/cover no-repeat, #14181a;
}
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 75%); }
.hero-card {
  position:relative; z-index:2; max-width:680px;
  background:var(--c-hero-card); backdrop-filter:blur(4px);
  border-radius:8px; padding:44px 48px;
}
.hero-card h1 { font-size:clamp(30px, 5vw, 45px); margin-bottom:26px; }
.hero-card h1 em { font-style:normal; color:var(--c-primary-soft); }
.hero-sub { position:relative; z-index:2; }
@media (max-width:640px){ .hero{padding:48px 16px;} .hero-card{padding:28px 22px;} }

/* page hero (pages intérieures) */
.page-hero { padding:64px 0 8px; }
.page-hero .badge { margin-bottom:16px; }
.page-hero p.lead { font-size:15px; color:var(--c-text-2); max-width:760px; margin:0; }

/* ---- stats ---- */
.stat { text-align:center; }
.stat .num { font-size:44px; font-weight:700; color:var(--c-primary-soft); line-height:1.1; }
.stat .lbl { font-size:14px; color:var(--c-text-2); margin-top:6px; }

/* ---- richtext (articles / offres / mentions) ---- */
.richtext { max-width:760px; }
.richtext h2 { font-size:clamp(24px, 3vw, 34px); margin-top:40px; }
.richtext h3 { font-size:20px; margin-top:30px; }
.richtext p, .richtext li { color:var(--c-text-2); font-size:15px; }
.richtext strong { color:var(--c-ink); }
.richtext a { color:var(--c-primary-soft); }
.richtext img { border-radius:var(--radius-card); margin:18px 0; }
.richtext blockquote {
  margin:26px 0; padding:4px 22px; border-left:3px solid var(--c-primary);
  color:var(--c-ink); font-weight:500;
}
.richtext figure { margin:18px 0; }
.richtext iframe { max-width:100%; border-radius:var(--radius-card); }

/* ---- footer ---- */
.footer { background:var(--c-footer-bg); color:#DDE1E3; padding:56px 0 32px; margin-top:0; }
.footer a { color:#FFFFFF; text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:36px; }.footer .cols>*{min-width:0;}.footer .muted,.footer .foot-legal a{overflow-wrap:anywhere;}@media (max-width:900px){.footer .cols{grid-template-columns:1fr;gap:28px;}}@media (max-width:560px){.footer .cols{grid-template-columns:1fr;gap:24px;}.footer .etoiles{flex-wrap:wrap;justify-content:flex-start;gap:12px 14px;}.footer .bottom{gap:8px 18px;}.footer .foot-news{max-width:100%;}.footer .foot-legal{gap:12px 18px;}}
.footer h4 { color:#FFFFFF; font-size:17px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin-bottom:9px; font-size:15px; }
.footer .muted { color:#9AA0A4; font-size:14px; }
.footer .etoiles { display:flex; flex-wrap:nowrap; gap:12px 14px; align-items:center; justify-content:center; margin:30px 0 22px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.footer .etoiles img { height:24px; width:auto; display:block; background:#FFFFFF; border-radius:6px; padding:4px 10px; box-sizing:content-box; }
.footer .bottom { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; margin-top:8px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; }
@media (max-width:900px){ .footer .cols{grid-template-columns:1fr;} }
@media (max-width:560px){ .footer .cols{grid-template-columns:1fr;} }

/* logo étoile sur carte : chip blanche pour rester lisible en dark */
.etoile-chip { display:inline-block; background:#FFFFFF; border:1px solid var(--c-border); border-radius:8px; padding:6px 12px; margin-bottom:12px; }
.etoile-chip img { height:24px; width:auto; display:block; }

/* divers */
.meta { font-size:14px; color:var(--c-muted); }
.center { text-align:center; }
.mt-0{margin-top:0;} .mb-30{margin-bottom:30px;} .mb-40{margin-bottom:40px;}