/* Page GS Live (gs-live.php) — s'appuie sur les variables de theme.css */
/* En-tête compact : badge + titre + une ligne, puis la démo tout de suite visible */
.gsp-hero{padding-top:var(--e5);padding-bottom:var(--e8);overflow:hidden}
.gsp-hero-texte{text-align:center}
.gsp-hero-texte .gsp-badge{margin-bottom:var(--e3)}
.gsp-accroche{font-size:var(--t-lede);color:color-mix(in srgb,var(--lin) 85%,transparent);max-width:62ch;margin:0 auto var(--e5);text-wrap:balance}
.gsp-sous-demo{margin-top:var(--e7);text-align:center}
.gsp-sous-demo .lede{margin-inline:auto}
.gsp-sous-demo .gsp-actions{justify-content:center}
.gsp-hero .etiquette{color:var(--bougie)}
.gsp-hero h1{font-size:clamp(2.4rem,5.5vw,4.6rem);margin:0 0 var(--e2);color:var(--papier)}
.gsp-hero h1 span{color:var(--bougie)}
.gsp-hero .lede{max-width:40ch;color:color-mix(in srgb,var(--lin) 88%,transparent)}
.gsp-actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.gsp-inclus{margin-top:var(--e5);font-size:var(--t-petit);color:var(--brume)}
.gsp-inclus i{color:var(--bougie);margin-right:.4em}
.gsp-badge{display:inline-flex;align-items:center;gap:.5em;padding:.4em 1em;border-radius:999px;border:1px solid color-mix(in srgb,var(--bougie) 55%,transparent);
  color:var(--bougie);font-size:var(--t-petit);font-weight:600;letter-spacing:.04em}
.gsp-badge:before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--bougie);box-shadow:0 0 .8em var(--bougie)}

/* La démo tient dans la hauteur de l'écran (16:9 limité par la hauteur disponible) */
.gsp-demo{scroll-margin-top:6rem}
.gsp-demo .gsl{max-width:max(560px,calc((100svh - 385px) * 16 / 9));margin-inline:auto}
.gsp-demo .gsl{box-shadow:0 2.5rem 5rem -2rem rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--lin) 10%,transparent)}
.gsp-demo[data-format="carre"] .gsl{max-width:640px;margin-inline:auto}
.gsp-note{margin-top:var(--e4);text-align:center;font-size:var(--t-petit);color:var(--brume)}

.gsp-etapes{list-style:none;padding:0;margin:var(--e7) 0 0;display:grid;gap:var(--e6)}
.gsp-etapes li{border-top:1px solid var(--trait);padding-top:var(--e5)}
.gsp-etapes .rang{display:block;font-family:var(--police-display);font-style:italic;font-size:2rem;color:var(--bougie-sourde);margin-bottom:var(--e3)}
.gsp-etapes h3{font-family:var(--police-display);font-style:italic;font-weight:400;font-size:1.75rem;margin-bottom:var(--e2);color:var(--encre)}
.gsp-etapes p{color:var(--encre-douce);max-width:36ch}
@media (min-width:720px){.gsp-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.gsp-etapes{grid-template-columns:repeat(4,minmax(0,1fr))}}

.gsp-atouts{display:grid;gap:var(--e5);margin-top:var(--e7)}
@media (min-width:720px){.gsp-atouts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.gsp-atouts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gsp-atout{padding:var(--e6);border:1px solid var(--trait);background:color-mix(in srgb,var(--papier) 60%,transparent)}
.gsp-atout i{font-size:1.4rem;color:var(--bougie-sourde);margin-bottom:var(--e4);display:block}
.gsp-atout h3{font-family:var(--police-display);font-style:italic;font-weight:400;font-size:1.6rem;margin-bottom:var(--e2);color:var(--encre)}
.gsp-atout p{color:var(--encre-douce);margin:0}

.gsp-pour{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}
.gsp-pour span{padding:.6em 1.3em;border-radius:999px;border:1px solid var(--trait);font-weight:600}

.gsp-faq details{border-top:1px solid var(--trait);padding:var(--e4) 0}
.gsp-faq details:last-child{border-bottom:1px solid var(--trait)}
.gsp-faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:var(--e4)}
.gsp-faq summary::-webkit-details-marker{display:none}
.gsp-faq summary:after{content:"+";font-family:var(--police-display);font-size:1.6rem;line-height:1;color:var(--bougie-sourde)}
.gsp-faq details[open] summary:after{content:"–"}
.gsp-faq details p{margin-top:var(--e3);color:var(--encre-douce)}

.gsp-final{text-align:center}
.gsp-final h2{color:var(--papier)}
.gsp-final .lede{max-width:44ch;margin:var(--e4) auto 0;color:color-mix(in srgb,var(--lin) 85%,transparent)}
.gsp-final .gsp-actions{justify-content:center}