/* Page /creation-site (D177) : parcours commercial sur le design system de l'accueil (sv3, public.css).
   Feuille propre à la page, chargée par $page['css'] (includes/header.php). */
.cs-hero .sv3-hero-texte h1 { max-width: 18ch; }
.cs-hero-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem var(--e-3); margin: 0 0 var(--e-5); color: rgba(255,255,255,.8); font-size: var(--t-sm); }
.cs-hero-montant { color: var(--blanc); font-size: var(--t-md); white-space: nowrap; }
.cs-hero-montant strong { font: 800 2.2rem/1 var(--police-texte); }
.cs-hero-media { position: relative; }
.cs-hero-media::before { content: ""; position: absolute; inset: -6% -4% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(77,141,255,.35), transparent 65%); pointer-events: none; }
.cs-hero-img, .cs-media img { position: relative; width: 100%; height: auto; border-radius: var(--rayon-lg); border: 1px solid rgba(156,195,255,.28); box-shadow: 0 24px 60px rgba(3,10,26,.45); }
.cs-media img { border-color: var(--sv3-ligne); box-shadow: 0 18px 44px rgba(6,16,36,.12); }
.cs-solution .cs-media img { border-color: rgba(156,195,255,.28); box-shadow: 0 24px 60px rgba(3,10,26,.45); }
.cs-duo { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 1024px) { .cs-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e-7); } .cs-duo-inverse { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
@media (max-width: 1023px) { .cs-duo-inverse > .cs-media { order: 2; } }
.cs-constats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.cs-constats .sv3-carte { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-4) var(--e-5); }
.cs-constats h3 { margin: 0 0 .3rem; font: 700 var(--t-base)/1.3 var(--police-texte); color: var(--sv3-nuit); }
.cs-constats p { margin: 0; color: #4a5872; font-size: var(--t-sm); line-height: 1.55; }
.cs-solution .surtitre { color: var(--texte-inverse-doux); letter-spacing: .2em; }
.cs-solution h2 { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.15 var(--police-texte); letter-spacing: -.015em; margin: 0 0 var(--e-3); }
.cs-solution p { color: rgba(255,255,255,.82); margin: 0 0 var(--e-4); max-width: 56ch; }
.cs-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.cs-points li { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: 1px solid rgba(156,195,255,.22); border-radius: var(--rayon); background: rgba(156,195,255,.06); }
.cs-points .ico { flex: none; color: var(--sv3-lueur-2); margin-top: .1rem; }
.cs-benefices .sv3-carte { display: flex; flex-direction: column; gap: var(--e-2); height: 100%; }
.cs-benefices .sv3-carte h3 { margin: var(--e-2) 0 0; font-size: 1.05rem; line-height: 1.3; }
.cs-benefices .sv3-carte p { line-height: 1.55; color: #4a5872; }
@media (min-width: 640px) { .cs-benefices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-benefices { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }
.cs-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.cs-etapes li { position: relative; display: flex; gap: var(--e-3); align-items: flex-start; background: var(--blanc); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4); }
.cs-etapes h3 { margin: 0 0 .3rem; font: 700 var(--t-base)/1.3 var(--police-texte); color: var(--sv3-nuit); }
.cs-etapes p { margin: 0; font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.55; }
@media (min-width: 640px) { .cs-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cs-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4); } .cs-etapes li { flex-direction: column; } }
.cs-etapes-cta { margin-top: var(--e-6); justify-content: center; }
.cs-etapes-cta .btn, .cs-prix-carte .btn { border-radius: 999px; }
.cs-tarif { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .cs-tarif { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--e-7); } }
.cs-tarif h2 { font: 800 clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem)/1.12 var(--police-texte); letter-spacing: -.015em; color: var(--sv3-nuit); margin: 0 0 var(--e-3); }
.cs-tarif-intro { color: #4a5872; max-width: 52ch; margin: 0 0 var(--e-5); }
.cs-tarif-conditions { font-size: var(--t-base); gap: .7rem; }
.cs-prix-carte { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); text-align: center; padding: var(--e-6) var(--e-5); border-radius: var(--rayon-lg); color: var(--blanc);
  background: radial-gradient(420px 260px at 80% 0%, rgba(77,141,255,.35), transparent 70%), linear-gradient(180deg, var(--sv3-nuit), var(--sv3-nuit-2)); box-shadow: 0 24px 60px rgba(6,16,36,.25); }
.cs-prix-carte p { margin: 0; }
.cs-prix-nom { font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-inverse-doux); }
.cs-prix-montant strong { font: 800 clamp(3rem, 2.2rem + 3vw, 4.2rem)/1 var(--police-texte); letter-spacing: -.02em; }
.cs-prix-montant span { color: rgba(255,255,255,.8); }
.cs-prix-offert { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: rgba(156,195,255,.16); border: 1px solid rgba(156,195,255,.4); color: #dbe8ff; font-size: var(--t-sm); font-weight: 700; }
.cs-prix-lien { color: var(--texte-inverse-doux); font-size: var(--t-sm); text-underline-offset: 3px; }
.cs-prix-lien:hover, .cs-prix-lien:focus-visible { color: var(--blanc); }
@media (min-width: 1024px) { .cs-duo .sv3-tete { grid-template-columns: 1fr; } }