/* =====================================================================
 * single-fd_realisation — gabarit « étude de cas » (charte v2 adoucie).
 * Réutilise blog-style (.a-grid, .a-toc, .prose, .callout, .afaq, .ar-by,
 * .bl-crumb) ; ajoute le hero premium, la fiche technique, les stats,
 * l'illustration d'architecture et les résultats.
 * ================================================================== */

/* ===== HERO pleine largeur (premium, anonymisable) ===== */
.cs-hero{position:relative;overflow:hidden;background:var(--ink,#141634);color:#fff;padding:46px 0 62px}
.cs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
   radial-gradient(42% 40% at 85% 12%,rgba(255,207,51,.20),transparent 60%),
   radial-gradient(40% 44% at 8% 90%,rgba(51,85,255,.28),transparent 60%)}
.cs-hero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
   background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;
   -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.cs-hero .wrap{position:relative;z-index:2}
.cs-hero .bl-crumb{color:#a7a9d6;justify-content:center;display:flex;gap:8px}
.cs-hero .bl-crumb a{color:#a7a9d6}.cs-hero .bl-crumb .sep{color:#5a5d8f}
.cs-eyebrow{text-align:center;font-family:var(--fd);font-weight:800;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-top:24px}
.cs-eyebrow::after{content:"";display:block;width:42px;height:2px;background:var(--yellow);border-radius:2px;margin:13px auto 0}
.cs-hero h1{text-align:center;color:#fff;font-family:var(--fd);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.025em;margin:20px auto 0;max-width:22ch}
.cs-hero .cs-lead{text-align:center;color:#c6c8ec;font-size:1.16rem;line-height:1.55;max-width:60ch;margin:18px auto 0}
.cs-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.cs-meta span{font-family:var(--fd);font-weight:700;font-size:.82rem;color:#e7e8fb;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 15px}
.cs-meta span b{color:#fff;font-weight:800}
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:42px auto 0}
@media(max-width:820px){.cs-stats{grid-template-columns:1fr 1fr}}
.cs-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 20px;transition:transform .2s var(--ease),background .2s}
.cs-stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
.cs-stat b{display:block;font-family:var(--fd);font-weight:800;font-size:2.4rem;color:var(--yellow);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.cs-stat span{display:block;color:#c6c8ec;font-size:.85rem;margin-top:11px;font-family:var(--ft);line-height:1.4}
.cs-stat b .u{display:inline;color:#fff;font-size:.55em;font-weight:700;margin-left:.02em;white-space:nowrap}

/* ===== bande fiche technique claire ===== */
.cs-band{background:#fff;border-bottom:1px solid var(--line)}
.cs-band .wrap{padding:26px 24px;max-width:var(--maxw,1200px);margin:0 auto}
.cs-facts{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.cs-facts .row{display:grid;grid-template-columns:190px 1fr}
.cs-facts .row+.row{border-top:1px solid var(--line)}
.cs-facts dt{font-family:var(--fd);font-weight:800;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:14px 18px;background:var(--surf,#F4F1EB);margin:0}
.cs-facts dd{margin:0;padding:14px 18px;color:var(--ink);font-family:var(--ft)}
@media(max-width:640px){.cs-facts .row{grid-template-columns:1fr}.cs-facts dt{padding-bottom:2px;background:#fff}}
.cs-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cs-stack span{font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--ink);border:1px solid var(--line-2,#E2DCD0);border-radius:100px;padding:7px 13px;background:#fff}

/* ===== illustration d'architecture (contenu éditorial, classe .cs-arch) ===== */
.cs-arch{max-width:1000px;margin:26px auto 0;background:var(--surf,#F4F1EB);border:1px solid var(--line);border-radius:22px;padding:26px}
.cs-arch .lyr{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm,0 6px 18px -10px rgba(20,22,52,.14));padding:14px 18px;display:flex;align-items:center;gap:12px}
.cs-arch .lyr .lk{font-family:var(--fd);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:120px}
.cs-arch .lyr .lv{font-family:var(--fd);font-weight:700;color:var(--ink)}
.cs-arch .stack3{display:flex;flex-direction:column;gap:10px}
.cs-arch .conn{height:16px;width:2px;background:var(--line-2,#E2DCD0);margin:0 auto}
.cs-arch .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
@media(max-width:640px){.cs-arch .trio{grid-template-columns:1fr}}
.cs-arch .mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--fd);font-weight:700;font-size:.86rem;color:var(--ink)}
.cs-arch .mini small{display:block;color:var(--muted);font-family:var(--ft);font-weight:400;font-size:.78rem;margin-top:3px}
.cs-arch .seal{margin-top:14px;text-align:center;font-family:var(--fd);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-sage-ink,#0A7D43)}

/* ===== résultats (classe .cs-results dans le contenu) ===== */
.cs-results{margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:720px){.cs-results{grid-template-columns:1fr}}
.cs-res{background:#fff;border:1px solid var(--line);border-radius:var(--r,20px);padding:22px}
.cs-res b{font-family:var(--fd);font-weight:800;font-size:1.9rem;color:var(--ink);display:block;line-height:1}
.cs-res span{display:block;color:var(--muted);font-size:.92rem;margin-top:8px;font-family:var(--ft)}
.cs-res em{font-style:normal;color:var(--blue)}