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

@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
:root {
  --c-primary:#5551CF;
  --c-primary-hover:#5551CF;
  --c-primary-soft:#5551CF;      /* violet des titres/links sur fond clair */
  --c-accent:#5551CF;
  --c-navy:#232A6B;
  --c-ink:#333333;
  --c-text:#333333;
  --c-text-2:#333333;
  --c-muted:#333333;
  --c-border:#ECEEF0;
  --c-bg:#FFFFFF;
  --c-bg-alt:#F7F7FA;
  --c-tint:#EEF0FB;
  --c-card:#FFFFFF;
  --c-nav-bg:rgba(255,255,255,.92);
  --c-hero-card:rgba(255,255,255,.82);
  --c-footer-bg:#0e123e;
  --c-btn-on-primary:#FFFFFF;
  --shadow-card:0 1px 2px rgba(45,52,54,.04),0 10px 30px rgba(45,52,54,.07);
  --shadow-raised:0 18px 44px rgba(35,42,107,.18);   /* survol + elements flottants */
  --radius-card:7px;   /* review CNS 2026-07-21 : coins <= 8px ; unification a 7px 2026-09-13 */
  --radius-btn:7px;
}

[data-theme="dark"] {
  --c-primary:#5551CF;
  --c-primary-hover:#5551CF;
  --c-primary-soft:#9E99F2;      /* violet éclairci pour rester lisible */
  --c-accent:#9E99F2;
  --c-navy:#232A6B;
  --c-ink:#F2F4F5;
  --c-text:#F2F4F5;
  --c-text-2:#F2F4F5;
  --c-muted:#F2F4F5;
  --c-border:rgba(255,255,255,.12);
  --c-bg:#23292A;
  --c-bg-alt:#262B2C;
  --c-tint:rgba(158,153,242,.18);
  --c-card:#2D3436;
  --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);
  --shadow-raised:0 18px 44px rgba(0,0,0,.5);
}

/* ---- 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-family:inherit; /* CSN-TYPO : un <button> n'herite pas la police du body */
  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); 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('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; }
.nav .logo img.logo-dark { display:none; }
[data-theme="dark"] .nav .logo img.logo-dark { display:block; }
[data-theme="dark"] .nav .logo img.logo-light { display:none; }
.nav-links { display:flex; gap:4px; flex:1; align-items:center; flex-wrap:wrap; }
.nav-links a {
  font-size:14px; color:var(--c-text-2); text-decoration:none;
  padding:9px 14px; border-radius:7px; 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;
  margin-left:auto;
}
.nav-cta:hover { background:var(--c-primary-hover); color:#fff !important; }
.theme-toggle {
  margin-left:28px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--c-border); 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('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:7px; 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:7px; 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:7px; 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;}

/* Footer #35 - classes portées depuis chrome.css (alignement footer groupe) */
.footer .footer-cols-3 { grid-template-columns:1.6fr 1fr 1.2fr; }
.foot-social { display:flex; gap:12px; }
.foot-social a { width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.12); display:grid; place-items:center; transition:background .2s ease; }
.foot-social a:hover { background:var(--c-primary,#5551CF); }
.foot-social svg { width:20px; height:20px; display:block; }
.foot-links { display:flex; gap:26px; flex-wrap:wrap; }
.footer .btn-primary { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:#fff; background:var(--c-primary,#5551CF); text-decoration:none; padding:11px 22px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:background .2s; }
.footer .btn-primary:hover { background:var(--c-primary-hover,var(--c-primary,#5551CF)); text-decoration:none; }
@media(max-width:900px){ .footer .footer-cols-3{ grid-template-columns:1fr; } }
@media(max-width:560px){ .footer .footer-cols-3{ grid-template-columns:1fr; } }


/* ===== Menu deroulant etoiles Constellation (header) - aligne sur homepage V1 ===== */
.nav .cstel{position:relative;}
.nav .cstel>summary{list-style:none;cursor:pointer;font-size:14px;font-weight:400;color:var(--c-text-2);text-decoration:none;padding:9px 13px;border-radius:7px;transition:color .15s;}
.nav .cstel>summary::-webkit-details-marker{display:none;}
.nav .cstel[open]>summary,.nav .cstel>summary:hover{color:var(--c-ink);}
.nav .cstel-menu{position:absolute;top:100%;right:0;margin-top:8px;min-width:460px;background:var(--c-card);border:1px solid var(--c-border);border-radius:7px;box-shadow:var(--shadow-raised);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;z-index:200;}
.nav .cstel-menu a,.nav .cstel-menu span{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:7px;text-decoration:none;color:var(--c-ink);font-size:13px;}
.nav .cstel-menu strong{font-weight:600;font-size:13px;color:var(--c-ink);}
.nav .cstel-menu small{font-size:13px;color:var(--c-muted);font-weight:400;}
.nav .cstel-menu a:hover{background:var(--c-bg-alt);color:var(--c-ink);}
.nav .cstel-soon{opacity:.5;cursor:default;}
@media(max-width:720px){.nav .cstel-menu{min-width:260px;grid-template-columns:1fr;}}

/* CSN-VIOLET-5551CF - les gris du pied se jouent en opacite et non en
   gris fixe : #9AA0A4 tenait sur navy mais pas sur violet, et l'opacite
   tient sur les deux. L'inversion d'accent du pied a ete retiree avec le
   retour au navy #0e123e - voir _apply_cns_navy0e123e.py. */
body .footer .muted{color:rgba(255,255,255,.82);}
body .foot-news input::placeholder{color:rgba(255,255,255,.75);}
body .foot-social a:hover{background:rgba(255,255,255,.22);}
[data-theme="dark"] .footer{--c-primary:#5551CF;--c-primary-hover:#5551CF;--c-btn-on-primary:#FFFFFF;}
[data-theme="dark"] .footer .muted{color:#9AA0A4;}
[data-theme="dark"] .footer .btn-primary{background:#5551CF;color:#FFFFFF;}
/* /CSN-VIOLET-5551CF */