/* ============================================================
   CLARION STRATUM — da-strates.css (DA validée le 25/09/2026)
   Marine plus clair, or conservé ; une couleur et un dessin
   géométrique gréco-romain par strate ; frise grecque.
   ============================================================ */

:root{
  --navy:#12324A; --deep:#0C2436; --navy-soft:#1B4A66;
  --meandre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15'%3E%3Cpath d='M0 13.5 H20 M3 13.5 V1.5 H16 V10.5 H7.5 V5.5 H12' fill='none' stroke='%23D2A84E' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
}
body{background:var(--navy)}
header{background:rgba(25,50,87,.8)}
header.scrolled{background:rgba(25,50,87,.95)}
/* ---------- Palettes des strates (sur fond bleu nuit) ---------- */
/* --sa : accent lisible sur fond sombre ; --sg : teinte de la carte */
.s1{--sa:#C8643B;--sg:rgba(181,71,46,.30)}
.s2{--sa:#5FA59A;--sg:rgba(60,120,110,.36)}
.s3{--sa:#E08AAA;--sg:rgba(122,40,72,.36)}
.s4{--sa:#6FCBDA;--sg:rgba(29,110,134,.36)}
.s5{--sa:#8FB5F5;--sg:rgba(61,123,217,.30)}
.s6{--sa:#E8C774;--sg:rgba(210,168,78,.24)}

/* ---------- Les six strates en cartes ---------- */
#methode .strates-list{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px;margin-top:48px}
#methode .strate-item{
  display:block !important;margin:0 !important;border-radius:22px !important;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sa) 45%,transparent) !important;
  background:linear-gradient(170deg,var(--sg) 0%,rgba(25,50,87,.55) 55%,rgba(14,40,58,.7) 100%) !important;
  padding:46px 26px 50px !important;box-shadow:0 18px 40px rgba(0,0,0,.28);
}
#methode .strate-item::before,#methode .strate-item::after{content:"";position:absolute;left:0;right:0;height:15px;opacity:.85;background:var(--meandre) repeat-x}
#methode .strate-item::before{top:12px}
#methode .strate-item::after{bottom:12px}
.strate-illu{display:block;width:124px;height:124px;margin:0 auto 12px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.strate-tag{text-align:center;font:700 .72rem/1 var(--serif);letter-spacing:.34em;text-transform:uppercase;color:var(--sa);margin-bottom:10px}
#methode .strate-item h3{text-align:center;font-size:1.55rem}
#methode .strate-item h3 span{color:var(--sa)}
#methode .strate-cle{color:var(--sa) !important}
#methode .strate-lien{text-align:center;margin-top:14px}
#methode .strate-lien a{display:inline-block;color:#0E2A3E;background:var(--sa);border:0;border-radius:999px;padding:9px 18px;font-weight:600}
#methode .attente summary{color:var(--sa);border-color:var(--sa)}

/* ---------- Cartes des guides : liseré de leur strate ---------- */
.pricing.s1,.pricing.s2{border-top:6px solid var(--sa)}

/* ---------- Un seul bleu nuit d'un bout à l'autre : aucune cassure entre sections ---------- */
.reperes,.mindset,.methode,.fondateur,.offre,.contact,.ressources,footer{background:var(--navy) !important}
.band{box-shadow:inset 0 60px 60px -20px var(--navy),inset 0 -60px 60px -20px var(--navy)}
.band{background-image:linear-gradient(rgba(18,50,74,.8),rgba(18,50,74,.84)),url("assets/photos/duo-remparts.jpg") !important}
.hero{background:radial-gradient(ellipse at 50% 28%,#1B4A66 0%,#22416F 55%,var(--navy) 100%)}

/* ---------- Commencez gratuitement : pourquoi ces guides existent ---------- */
.pourquoi{max-width:760px;margin-top:22px}
.pourquoi p{color:var(--ivory-dim);font-size:1.14rem;line-height:1.85;margin-bottom:14px}
.pourquoi b{color:var(--gold-l);font-weight:600}
.res-duo{grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important}
.res-card p.res-quoi{flex:none;margin-bottom:12px}
.res-card p.res-quoi b{color:var(--ivory)}
.res-card .res-quoi + div{margin-top:auto}

/* ---------- Encart « Recevoir l'extrait gratuit » sur les guides payants ---------- */
.extrait-encart{margin:0 0 18px}
.extrait-encart summary{list-style:none;cursor:pointer;width:100%;text-align:center}
.extrait-encart summary::-webkit-details-marker{display:none}
.extrait-encart[open] summary{border-color:var(--gold);color:var(--gold-l)}
.extrait-encart .encart{margin-top:14px;text-align:left;padding:0 2px}
.extrait-encart .encart > p{color:var(--ivory-dim);font-size:1rem;line-height:1.7;margin-bottom:6px}
.extrait-encart .encart > p b{color:var(--ivory)}
.extrait-encart .capture{border-top:none;padding-top:6px}

/* ---------- Le point marché : sa propre section ---------- */
.point-marche{padding:60px 0 100px}
.point-marche .res-card{max-width:620px;margin:0 auto}