/* Guides gratuits : la suite du guide contre un e-mail (voir guides/guide-gate.js).
   Chargé dans le <head> : la page est fermée dès le premier rendu, avec ou
   sans JavaScript. En-tête, barre de progression et hero restent lisibles ;
   tout ce qui suit le hero est masqué. Seul guide-gate.js retire
   html.gd-locked, et seulement quand l'e-mail est enregistré.
   html.gd-js (posé par le script) : le premier chapitre reste en aperçu flou,
   inerte, sous le hero. Sans le script, rien n'apparaît après le hero. */
html.gd-locked #main > .hero ~ * { display: none !important; }
html.gd-locked.gd-js #main > .hero + * {
  display: block !important; max-height: 24rem; overflow: hidden;
  filter: blur(8px); opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent);
}
html.gd-pop-open, html.gd-pop-open body { overflow: hidden; }

.gd-noscript { margin: 0; padding: 2.4rem 5vw; background: var(--ice); color: var(--navy); text-align: center; font-weight: 650; }
.gd-noscript a { color: inherit; }

/* Fenêtre : même dessin que l'ancienne fenêtre de /ecole (carte blanche,
   surtitre GUIDE GRATUIT, bouton cyan). */
dialog.gd-pop { max-width: min(460px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 2rem 1.8rem 1.8rem; border-radius: 14px; background: #fff; color: var(--navy); overscroll-behavior: contain; }
dialog.gd-pop::backdrop { background: rgba(5, 33, 57, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.gd-pop-x { position: absolute; top: .7rem; right: .7rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 33, 57, .06); color: var(--navy); font-size: 1.4rem; line-height: 1; text-decoration: none; }
.gd-pop-x:hover { background: rgba(5, 33, 57, .14); }
.gd-pop-kicker { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--electric); }
.gd-pop h2 { margin: .5rem 2.2rem .6rem 0; font-size: 1.8rem; font-weight: 850; letter-spacing: -.045em; line-height: 1.02; color: var(--navy); }
.gd-pop-sub { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.5; color: rgba(5, 33, 57, .75); }
.gd-pop-input { width: 100%; min-height: 50px; padding: 0 1rem; border: 0; border-radius: 8px; background: var(--ice); box-shadow: inset 0 0 0 1px rgba(5, 33, 57, .22); font: inherit; font-size: 1rem; color: var(--navy); }
.gd-pop-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--navy); }
.gd-pop-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b4441a; }
.gd-pop-check { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 .4rem; font-size: .85rem; line-height: 1.45; color: rgba(5, 33, 57, .8); }
.gd-pop-check input { margin: .15rem 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--navy); cursor: pointer; }
.gd-pop-check input[aria-invalid="true"] { outline: 2px solid #b4441a; outline-offset: 2px; }
.gd-pop-check p { margin: 0; }
.gd-pop-check label { cursor: pointer; }
.gd-pop-check a { color: var(--navy); }
.gd-pop-err { min-height: 1.3em; margin: .5rem 0 .8rem; font-size: .88rem; font-weight: 650; color: #b4441a; }
.gd-pop-err.ok { color: var(--electric); }
.gd-pop-btn { width: 100%; min-height: 50px; border: 0; border-radius: 8px; background: var(--cyan); color: var(--navy); font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gd-pop-btn:hover { background: var(--sky); }
.gd-pop-btn[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 560px) { dialog.gd-pop { padding: 1.8rem 1.3rem 1.4rem; } .gd-pop h2 { font-size: 1.6rem; } }