/* =====================================================================
   Blocs Kapela - STRUCTURE réutilisée, recolorée en charte Constellation.
   S'utilise APRÈS tokens.css (charte Constellation : violet #5551CF,
   navy #232A6B). On NE réapplique PAS la surcharge :root Kapela : les
   composants héritent donc des couleurs Constellation via les var(--c-*).
   Seules les couleurs teal/navy codées en dur ont été remappées.
   ===================================================================== */

/* Compat : quelques variables utilisées par les blocs Kapela mais absentes
   de tokens.css Constellation. */
:root{
  --c-surface:#FFFFFF;
  --c-surface-hover:#F3F4F5;
}
[data-theme="dark"]{
  --c-surface:#2D3436;
  --c-surface-hover:#343B3C;
}

/* ---- Chiffres clés ---- */
.stats-constellation { background:transparent; }
.stats-constellation .grid-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .stats-constellation .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .stats-constellation .grid-4{ grid-template-columns:1fr; } }
.stat-ico { width:52px; height:52px; border-radius:7px; background:var(--c-tint); color:var(--c-primary-soft); display:inline-flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.stat-ico svg { width:26px; height:26px; }

/* ---- Pôles métiers (cartes couleur) ---- */
.poles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pole-card { display:flex; flex-direction:column; background:var(--c-surface); border-radius:7px; overflow:hidden;
  box-shadow:var(--shadow-card); text-decoration:none; color:inherit;
  border:1px solid var(--c-border); transition:transform .25s ease,box-shadow .25s ease; }
.pole-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-raised); }
.pole-head { background:var(--pole,#232A6B); color:#fff; padding:14px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; min-height:0; }
.pole-head h3 { margin:0; color:#fff; font-size:20px; font-weight:700; line-height:1.22; }
.pole-head svg { flex-shrink:0; opacity:.92; }
.pole-body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.pole-body p { font-size:15px; color:var(--c-text-2); line-height:1.55; margin:0 0 18px; flex:1; }
.pole-link { font-weight:600; color:var(--c-ink); display:inline-flex; align-items:center; gap:8px; font-size:14px; }
.pole-link svg { transition:transform .2s ease; }
.pole-card:hover .pole-link svg { transform:translateX(4px); }
@media(max-width:720px){ .poles-grid{ grid-template-columns:1fr; } }

/* ---- Approche (étapes) ---- */
.approach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.approach-item { background:var(--c-card); border-radius:7px; padding:26px 24px 30px;
  box-shadow:var(--shadow-card); border:1px solid var(--c-border); }
.approach-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.approach-ic { width:46px; height:46px; border-radius:7px; background:var(--c-navy); color:#fff;
  display:grid; place-items:center; flex-shrink:0; }
.approach-head h3 { margin:0; font-size:20px; font-weight:700; line-height:1.25; }
.approach-item h3 { margin:0 0 8px; font-size:20px; font-weight:700; line-height:1.25; }
.approach-item p { font-size:15px; color:var(--c-text-2); line-height:1.55; margin:0; }
@media(max-width:720px){ .approach-grid{ grid-template-columns:1fr; } }

/* ---- Bande "offre" foncée + slider ---- */
.ia-band { background:linear-gradient(155deg,#232A6B 0%,#171B45 100%); border-radius:7px;
  padding:56px 54px; box-shadow:var(--shadow-raised); }
.ia-split { display:grid; grid-template-columns:0.92fr 1.08fr; gap:52px; align-items:center; }
.ia-intro .kicker { color:#9E99F2; }
.ia-intro h2 { color:#fff; margin:0 0 18px; }
.ia-intro p { color:rgba(255,255,255,.74); font-size:15px; line-height:1.6; margin:0 0 28px; max-width:420px; }
.ia-list { display:flex; flex-direction:column; }
.ia-row { display:flex; gap:18px; padding:22px 0; border-top:1px solid rgba(255,255,255,.12); }
.ia-row:first-child { border-top:none; padding-top:0; }
.ia-row:last-child { padding-bottom:0; }
.ia-ic2 { width:46px; height:46px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
  background:rgba(158,153,242,.18); color:#9E99F2; }
.ia-row h3 { margin:0 0 5px; font-size:20px; font-weight:700; line-height:1.25; color:#fff; }
.ia-row p { margin:0; font-size:15px; line-height:1.5; color:rgba(255,255,255,.68); }
@media(max-width:880px){ .ia-split{ grid-template-columns:1fr; gap:34px; } .ia-band{ padding:40px 26px; } }

.offer-slider { position:relative; }
.offer-slide { display:none; }
.offer-slide.is-active { display:block; animation:offerFade .45s ease; }
@keyframes offerFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.offer-ctrl { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; }
.offer-nav { width:46px; height:46px; border-radius:50%; border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-ink); font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-card); transition:transform .2s,box-shadow .2s; }
.offer-nav:hover { transform:translateY(-2px); box-shadow:var(--shadow-raised); }
.offer-dots { display:flex; gap:9px; }
.offer-dot { width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(35,42,107,.22); transition:background .2s,width .2s; }
.offer-dot.on { background:var(--c-primary); width:24px; border-radius:999px; }

/* ---- Bouton clair sur fond foncé ---- */
.btn-light { background:#fff !important; color:#232A6B !important; }
.btn-light span { color:#232A6B !important; }
.btn-light:hover { background:#f0f2f5 !important; }

/* ---- Carte CTA foncée (#Ensemble) ---- */
.cta-dark { background:#232A6B; border-radius:7px; padding:56px 40px; text-align:center; box-shadow:var(--shadow-raised); }
@media(max-width:600px){ .cta-dark{ padding:40px 24px; } }

/* ---- Hero band foncé (haut de page, recoloré Constellation) ---- */
.hero-band { position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #2A327C 0%, #232A6B 42%, #171B45 100%);
  padding:104px 24px 112px; }
.hero-band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(90% 90% at 50% 30%,#000 0%,transparent 78%); mask-image:radial-gradient(90% 90% at 50% 30%,#000 0%,transparent 78%); }
.hero-band .hero-inner { position:relative; max-width:960px; margin:0 auto; }
.hero-band h1 { margin:0 0 24px; color:#fff; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(30px, 5vw, 45px); line-height:1.03; }
.hero-band h1 .accent { display:block; color:#9E99F2; }
.hero-band p { margin:0 auto 40px; max-width:720px; color:rgba(255,255,255,.74);
  font-size:15px; line-height:1.6; }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-btn-primary { display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:#fff; color:#232A6B; font-weight:600; font-size:15px; padding:16px 32px; border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease; }
.hero-btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-raised); }
.hero-btn-ghost { display:inline-flex; align-items:center; text-decoration:none; color:#fff; font-weight:600; font-size:15px;
  padding:16px 32px; border-radius:999px; border:1.5px solid rgba(255,255,255,.4); transition:background .2s ease, border-color .2s ease; }
.hero-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.72); }
@media(max-width:640px){ .hero-band{ padding:70px 20px 76px; } }

/* ===== Corrections review CNS (2026-07-21) : coins <= 8px, blocs plus compacts, hovers adoucis ===== */
.card,.pole-card,.approach-item,.ia-band,.cta-dark,.hero-card{ border-radius:7px !important; }
.section{ padding:56px 0; }
@media(max-width:640px){ .section{ padding:44px 0; } }
.hero-arrow,.offer-nav,.carousel-btn{ box-shadow:none !important; }
.cta-dark{ padding:44px 40px; }
@media(max-width:600px){ .cta-dark{ padding:36px 22px; } }

/* ===== Classes utilitaires (2026-07-22) : variantes de fond CTA + grille configurable ===== */
.cta-dark.cta-grad{ background:linear-gradient(135deg,var(--c-navy,#2a376a) 0%,var(--c-primary,#40a8b0) 100%); }
.cta-dark.cta-img{ position:relative; overflow:hidden; }
.cta-dark.cta-img::before{ content:""; position:absolute; inset:0; background:var(--cta-img) center/cover no-repeat; opacity:.28; z-index:0; }
.cta-dark.cta-img > *{ position:relative; z-index:1; }
.grid-cols-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.grid-cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:980px){ .grid-cols-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-cols-2,.grid-cols-3{ grid-template-columns:1fr; } }

/* ---- CSN-HEROLITE : heros de liste, sans boutons et plus courts ---- */
.hero-band--tight { padding:64px 24px 68px; }
.hero-band--tight h1 { font-size:clamp(30px, 5vw, 45px); margin-bottom:16px; }
.hero-band--tight p { max-width:800px; margin-bottom:0; }
@media(max-width:640px){ .hero-band--tight{ padding:48px 20px 52px; } }