/* Kapela V02 - chrome partagé (double header + footer).
   Autonome : AUCUN reset global (body, *, a…) pour ne pas casser
   le corps des pages qui utilisent le CSS kapela.fr. Ne stylise
   que les composants du header et du footer via des sélecteurs ciblés. */

@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:#40a8b0;
  --c-primary-hover:#35949b;
  --c-primary-soft:#40a8b0;
  --c-ink:#2a376a;
  --c-text-2:#3a4a7a;
  --c-muted:#7A8084;
  --c-border:#ECEEF0;
  --c-border-strong:#DDE1E3;
  --c-surface:#FFFFFF;
  --c-surface-hover:#F1F5F9;
  --c-footer-bg:#2a376a;
  --c-btn-on-primary:#FFFFFF;
  --radius-btn:10px;
}

/* ===== Cartouche Constellation flottant (apparaît au scroll) ===== */
.const-badge { position:fixed; right:20px; top:128px; transform:translateX(24px); z-index:900; width:54px; height:54px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(42,55,106,.20); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s; border:1px solid var(--c-border,#e6e8ef); }
.const-badge.visible { opacity:1; visibility:visible; transform:translateX(0); transition:opacity .35s ease, transform .35s ease, visibility 0s; }
.const-badge:hover { box-shadow:0 10px 28px rgba(42,55,106,.28); }
.const-badge img { width:32px; height:32px; display:block; }
@media(max-width:640px){ .const-badge{ width:46px; height:46px; right:12px; top:96px; } .const-badge img{ width:27px; height:27px; } }

/* ===== Top bar (bandeau blanc groupe) ===== */
.top-bar { background:var(--c-surface); border-bottom:1px solid var(--c-border); font-size:13px; font-family:'Poppins', sans-serif; }
.top-bar .container-inner { display:flex; align-items:center; justify-content:center; gap:8px; max-width:1200px; margin:0 auto; padding:4px 24px; }
.top-logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--c-muted); flex-shrink:0; }
.top-logo img { height:26px; width:auto; }
.top-logo span { font-weight:600; font-size:13px; color:var(--c-muted); letter-spacing:.3px; }
.top-sep { color:var(--c-border); font-size:14px; user-select:none; }
.top-links { display:flex; align-items:center; gap:10px; }
.top-baseline { color:var(--c-muted); font-size:15px; font-weight:500; white-space:nowrap; }
.top-links a { color:var(--c-primary,#40a8b0); text-decoration:none; padding:4px 10px; border-radius:6px; font-size:15px; font-weight:600; transition:color .15s,background .15s; white-space:nowrap; }
.top-links a:hover { color:var(--c-primary-hover,#35949b); background:var(--c-surface-hover); }
.top-burger { display:none; flex-direction:column; gap:3px; background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; }
.top-burger span { display:block; width:16px; height:1.5px; background:var(--c-muted); border-radius:2px; transition:all .3s; }
.top-burger.open span:nth-child(1) { transform:rotate(45deg) translate(3px,3px); }
.top-burger.open span:nth-child(2) { opacity:0; }
.top-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(3px,-3px); }

/* ===== Nav Kapela ===== */
.nav {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:28px;
  padding:14px 40px;
  background:var(--c-surface); border-bottom:1px solid var(--c-border);
  font-family:'Poppins', sans-serif;
}
.nav .logo { display:inline-flex; align-items:center; text-decoration:none; }
.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:4px; flex:1; align-items:center; }
.nav-links a { color:var(--c-muted); text-decoration:none; padding:9px 14px; font-size:14px; font-weight:400; border-radius:8px; transition:color .2s,background .2s; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active { color:var(--c-ink); }
.nav-links a.active { font-weight:600; }
.nav-cta { margin-left:auto; background:#FFFFFF !important; color:#2D3436 !important; border:1px solid #DDE1E3 !important; padding:10px 20px !important; border-radius:8px !important; font-weight:600 !important; font-size:15px !important; white-space:nowrap; transition:border-color .2s !important; }
.nav-cta:hover { background:#FFFFFF !important; color:#2D3436 !important; border-color:var(--c-primary,#40a8b0) !important; }
.nav-kapela { background:linear-gradient(180deg,#040139,#0B0457); padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.nav-kapela .nav-links a { color:rgba(255,255,255,.75); }
.nav-kapela .nav-links a:hover, .nav-kapela .nav-links a.active { color:#fff; }
.nav-kapela .nav-cta { background:#FFFFFF !important; color:#2D3436 !important; border:1px solid #DDE1E3 !important; }
.nav-kapela .nav-cta:hover { background:#FFFFFF !important; color:#2D3436 !important; border-color:var(--c-primary,#40a8b0) !important; }
.nav-kapela .nav-dt .chev { stroke:#fff; }
.nav-kapela .nav-sub { background:#fff; border-color:#e2e8f0; }
.nav-kapela .nav-sub a strong { color:#1e293b; }
.nav-kapela .nav-sub a small { color:#64748b; }
.nav-kapela .nav-sub a:hover { background:#f1f5f9; }
.nav-kapela .nav-burger span { background:rgba(255,255,255,.8); }
.nav-dd { position:relative; }
.nav-dt { display:flex; align-items:center; gap:3px; cursor:pointer; }
.nav-dt .chev { transition:transform .3s; flex-shrink:0; }
.nav-dd.open .nav-dt .chev { transform:rotate(180deg); }
.nav-sub { position:absolute; top:100%; left:0; min-width:220px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:8px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.08); opacity:0; visibility:hidden;
  transform:translateY(6px); transition:all .25s ease; z-index:100; }
.nav-dd.open .nav-sub { opacity:1; visibility:visible; transform:translateY(4px); }
.nav-sub--wide { display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; min-width:440px; left:auto; right:0; }
.nav-sub--wide > a:first-child { grid-column:1 / -1; }
.nav-sub a { display:flex; flex-direction:column; gap:1px; padding:10px 14px; border-radius:8px; color:var(--c-ink); font-size:13px; text-decoration:none; }
.nav-sub a strong { font-weight:600; font-size:13px; }
.nav-sub a small { font-size:13px; color:var(--c-muted); font-weight:400; }
.nav-sub a:hover { background:var(--c-surface-hover); }
.nav-sub a:hover small { color:var(--c-ink); }
.nav-sub a.nav-soon { cursor:default; opacity:.55; }
.nav-sub a.nav-soon:hover, .nav-kapela .nav-sub a.nav-soon:hover { background:transparent; }
.nav-burger { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto; }
.nav-burger span { display:block; width:20px; height:2px; background:var(--c-ink); border-radius:2px; transition:all .3s; }
.nav-burger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }
.theme-toggle { background:none; border:none; cursor:pointer; color:var(--c-muted); padding:6px; display:flex; align-items:center; border-radius:8px; transition:color .2s; }
.theme-toggle:hover { color:#fff; }
.top-bar .theme-toggle { padding:4px; }
.top-bar .theme-toggle svg { width:14px; height:14px; }
[data-theme="light"] .ic-moon { display:block; }
[data-theme="light"] .ic-sun { display:none; }
[data-theme="dark"] .ic-moon { display:none; }
[data-theme="dark"] .ic-sun { display:block; }

@media(max-width:920px) {
  .top-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:0 0 8px 8px;
    padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.08); z-index:99; }
  .top-links.open { display:flex; }
  .top-burger { display:flex; }
  .top-bar .container-inner { position:relative; }
  .nav-burger { display:flex; }
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px;
    padding:12px; margin-top:8px; box-shadow:0 8px 30px rgba(0,0,0,.08); z-index:99; }
  .nav-links.open { display:flex; }
  .nav-kapela .nav-links a { color:var(--c-ink); }
  .nav-dd { width:100%; }
  .nav-sub { position:static; box-shadow:none; border:none; padding:0 0 0 12px;
    opacity:1; visibility:visible; transform:none; display:none; }
  .nav-dd.open .nav-sub { display:flex; flex-direction:column; }
  .nav-sub--wide { display:none; grid-template-columns:1fr; min-width:0; right:auto; left:0; }
  .nav-dd.open .nav-sub--wide { display:flex; }
  .nav-cta { text-align:center; margin-left:0; }
}

/* ===== Footer ===== */
.footer { background:var(--c-footer-bg); color:#DDE1E3; padding:56px 0 32px; margin-top:0; font-family:'Poppins', sans-serif; }
.footer .container { max-width:1200px; margin:0 auto; padding:0 24px; }
.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:0 0 14px; font-weight:700; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin-bottom:9px; font-size:15px; }
.footer p { margin:0; }
.footer .muted { color:#9AA0A4; font-size:14px; }
.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; }
.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,#40a8b0); }
.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); 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); text-decoration:none; }
@media(max-width:900px){ .footer .footer-cols-3{ grid-template-columns:1fr; } .footer .cols{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer .footer-cols-3{ grid-template-columns:1fr; } .footer .cols{ grid-template-columns:1fr; } }

/* Espace vertical garanti entre le menu (sticky) et le début du texte du hero (V2) */
.hero, .contact-hero { align-items:flex-start !important; padding-top:clamp(120px,16vh,190px) !important; }
.kv1-hero { align-items:flex-start !important; padding-top:clamp(130px,16vh,200px) !important; }
.page-hero { padding-top:clamp(60px,8vh,100px) !important; }

/* Header collant : le bandeau groupe + la nav restent en haut au scroll */
.site-header{ position:sticky; top:0; z-index:100; }
.site-header .nav{ position:static; top:auto; }

/* CSN-NAVH:START */
/* ===== Hauteur de la bande menu alignee sur les autres sites du groupe =====
   Avant : .nav = 28 px de padding + un .nav-cta de 45,9 px (14,5 px de texte
   a line-height 1,65 + 20 de padding + 2 de bordure) + 1 px de bordure
   basse, soit ~75 px, contre ~53 px sur les 8 sites mirror.
   Apres  : ~53 px. Le logo garde sa taille de marque (30 px) : il n'a jamais
   dicte la hauteur de la bande.
   Selecteur `nav.nav` (0,1,1) : depasse `.nav` et `.nav-kapela` (0,1,0) sans
   dependre de l'ordre de chargement des feuilles. Seuls les longhands
   padding-top / padding-bottom sont poses, pour ne pas ecraser les paddings
   horizontaux (dont ceux de la regle mobile de tokens.css). */
nav.nav { padding-top:9px; padding-bottom:9px; }
nav.nav .nav-links a { padding-top:7px; padding-bottom:7px; line-height:1.3; }
/* La regle .nav-cta d'origine est en !important : la surcharge doit l'etre
   aussi. Le selecteur reste plus specifique (0,2,1). */
nav.nav .nav-cta { padding-top:7px !important; padding-bottom:7px !important; line-height:1.25; }
/* CSN-NAVH:END */

/* CSN-HOVER4 - survol uniforme sur tous les sous-menus : soulignement du
   libelle, aucun aplat. Generalise CSN-HOVER3 de .nav-sub--wide a .nav-sub. */
.nav-sub a:hover,.nav-kapela .nav-sub a:hover{ background:transparent; }
.nav-sub a strong{ align-self:flex-start; background-image:linear-gradient(#5751D7,#5751D7);
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1.5px;
  transition:background-size .16s ease,color .16s ease; }
.nav-sub a:hover strong,.nav-kapela .nav-sub a:hover strong{ color:#5751D7; background-size:100% 1.5px; }
.nav-sub a:hover small,.nav-kapela .nav-sub a:hover small{ color:var(--c-muted); }
.nav-sub a.nav-soon:hover strong,
.nav-kapela .nav-sub a.nav-soon:hover strong{ color:inherit; background-size:0 1.5px; }

/* ===== CSN-GROUP-TOPBAR : sur-bandeau groupe ===============================
   Bloc repris a l'identique de KAPELA/static/chrome.css (KAP-SURBANDEAU),
   lui-meme repris des autres etoiles. Theme sombre par [data-theme] ;
   couleurs du lien via les tokens du site (--c-primary, --c-tint). */
.csngh-top { background:#fff; border-bottom:1px solid rgba(20,31,57,.08); }
.csngh-top .csngh-in { display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:9px; max-width:1240px; margin:0 auto; padding:5px 22px; }
.csngh-brand { display:flex; align-items:center; flex-shrink:0; }
.csngh-brand img { height:26px; width:auto; display:block; }
/* 30/09/2026 mode sombre : logo Constellation du surbandeau en blanc (equivalent de logo-constellation-white.png) */
[data-theme="dark"] .csngh-brand img { filter:brightness(0) invert(1); }
.csngh-sep { color:rgba(20,31,57,.22); font-size:15px; line-height:1; user-select:none; }
.csngh-tag { font-size:13px; font-weight:500; color:#5a6478; white-space:nowrap; }
.csngh-exp { font-size:13px; font-weight:600; color:var(--c-primary,#5651D6);
  text-decoration:none; padding:4px 10px; border-radius:6px; white-space:nowrap; }
.csngh-exp:hover { background:var(--c-tint,#EEF0FB); }
.csngh-exp:focus-visible { outline:2px solid var(--c-primary,#5651D6); outline-offset:2px; }
[data-theme="dark"] .csngh-top { background:#0b1426; border-bottom-color:rgba(255,255,255,.08); }
[data-theme="dark"] .csngh-tag { color:#aeb7cc; }
[data-theme="dark"] .csngh-sep { color:rgba(255,255,255,.25); }
[data-theme="dark"] .csngh-exp { color:var(--c-primary-soft,#9E99F2); }
[data-theme="dark"] .csngh-exp:hover { background:rgba(255,255,255,.07); }
@media(max-width:860px){ .csngh-tag{ display:none; } }
@media(max-width:640px){ .csngh-top .csngh-in{ padding:5px 16px; } }

/* 30/09/2026 mode sombre : liens du corps des articles et mentions legales (#0094A8 -> 3,8:1 sur fond sombre) */
[data-theme="dark"] .am-wrap a{color:var(--am-acc-lt,#73C4CF);}

/* 30/09/2026 mode sombre : intitules du menu "Le groupe" (1,1 a 3,1:1 -> 5:1 mini sur le fond du sous-menu) */
[data-theme="dark"] .nav-sub--wide .np-dc{color:#A5A2F2;}
[data-theme="dark"] .nav-sub--wide .np-sec{color:#D6D2FB;}
[data-theme="dark"] .nav-sub--wide .np-biz{color:#C7A6EE;}
[data-theme="dark"] .nav-sub--wide .np-res{color:#6FC3D6;}