/* Lettre de GDN : modale d'inscription et page de confirmation.
   Autonome (préfixe gnl-) : elle rend pareil sur les pages V10 (gdn.css) et sur les pages pas
   encore migrées (Bootstrap + style.css), d'où les marges et tailles posées explicitement. */

.gnl{
  --gnl-ink:#181515;--gnl-text:#2f2b2b;--gnl-grey:#5a5555;--gnl-green:#198754;--gnl-green-dk:#146c43;
  --gnl-green-lt:#7fdcae;--gnl-dot:#3ccf8a;--gnl-tint:#f2f7f4;--gnl-line:rgba(24,21,21,.12);--gnl-red:#b4232f;
  position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;
  width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);
  overflow:visible;color:var(--gnl-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;
}
.gnl:not([open]){display:none}
/* Bloc d'abonnement de fin d'article (GDN Journal) : mêmes champ, bouton et messages que la
   modale, donc mêmes variables. */
[data-gnl-inline]{
  --gnl-ink:#181515;--gnl-text:#2f2b2b;--gnl-grey:#5a5555;--gnl-green:#198754;--gnl-green-dk:#146c43;
  --gnl-green-lt:#7fdcae;--gnl-dot:#3ccf8a;--gnl-tint:#f2f7f4;--gnl-line:rgba(24,21,21,.12);--gnl-red:#b4232f;
}
/* Le dialogue et sa carte défilante reçoivent le focus à l'ouverture : pas d'anneau sur eux,
   il reste réservé aux commandes. */
.gnl:focus,.gnl:focus-visible,.gnl .gnl-carte:focus,.gnl .gnl-carte:focus-visible,.gnl .gnl-ok:focus-visible{outline:none}
.gnl::backdrop{background:rgba(24,21,21,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:gnl-fondu .35s ease both}

.gnl-carte{
  position:relative;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  background-color:#fff;
  background-image:radial-gradient(60% 50% at 8% 0%,#fff1bf 0%,rgba(255,241,191,0) 70%),radial-gradient(50% 45% at 92% 0%,#eedcff 0%,rgba(238,220,255,0) 70%);
  background-repeat:no-repeat;
  border-radius:25px;padding:clamp(28px,5vw,40px);
  box-shadow:0 40px 90px rgba(24,21,21,.32),0 0 0 1px rgba(24,21,21,.06);
  transform-origin:50% 60%;
  animation:gnl-pop .55s cubic-bezier(.34,1.45,.64,1) both;
}
.gnl.is-fermeture .gnl-carte{animation:gnl-sortie .2s ease-in both}
.gnl.is-fermeture::backdrop{animation:gnl-fondu .2s ease-in reverse both}

@keyframes gnl-pop{0%{opacity:0;transform:translateY(24px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gnl-sortie{to{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes gnl-fondu{from{opacity:0}to{opacity:1}}

.gnl-fermer{
  position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);
  color:var(--gnl-grey);cursor:pointer;transition:background .2s ease,color .2s ease;
}
.gnl-fermer:hover{background:#fff;color:var(--gnl-ink)}
.gnl :focus-visible{outline:2px solid var(--gnl-green);outline-offset:3px}

.gnl-vue[hidden]{display:none}
/* Logo GDN Journal : à la place de l'ancien surtitre, aligné sur le haut du bouton de fermeture. */
.gnl-logo{display:block;margin:-6px 0 20px;line-height:0}
.gnl-logo img{display:block;width:auto;height:38px;max-width:calc(100% - 48px)}
.gnl-titre{margin:0 0 12px;padding-right:32px;font-size:clamp(1.6rem,4.4vw,2.05rem);line-height:1.12;font-weight:500;letter-spacing:-.022em;color:var(--gnl-ink);text-wrap:balance}
.gnl-lead{margin:0;font-size:1rem;line-height:1.65;font-weight:300;color:var(--gnl-text);text-wrap:pretty}

.gnl-recents{margin:20px 0 0;padding:14px 18px;border-radius:15px;background:rgba(255,255,255,.75);border:1px solid var(--gnl-line)}
.gnl-recents-titre{margin:0 0 10px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gnl-grey)}
.gnl-recents ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
/* Deux lignes par titre : le titre se lit en entier dans presque tous les cas, et coupe
   proprement à la fin de la deuxième ligne sinon. */
.gnl-recents li{margin:0;padding:0 0 0 14px;position:relative;font-size:.875rem;line-height:1.4;font-weight:500;color:var(--gnl-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-wrap:pretty}
.gnl-recents li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gnl-green)}
/* Écran bas (portable 13 pouces, fenêtre réduite) : le formulaire doit rester visible sans défiler. */
@media (max-height:720px){
  .gnl-carte{padding-top:26px;padding-bottom:22px}
  .gnl-titre{font-size:1.6rem}
  .gnl-logo{margin-bottom:16px}
  .gnl-logo img{height:33px}
  .gnl-promesses{margin-top:10px}
  .gnl-refus{margin-top:8px}
}

.gnl-form{margin:20px 0 0}
/* Cadre d'inscription : du titre aux engagements, même famille visuelle que l'encadré des
   articles, un cran plus présent (fond teinté) pour signaler l'action. */
.gnl-inscription{padding:18px 18px 16px;border-radius:18px;background:var(--gnl-tint);border:1px solid rgba(25,135,84,.16)}
.gnl-inscription-titre{margin:0 0 14px;text-align:center;font-size:.9375rem;line-height:1.4;font-weight:600;color:var(--gnl-ink);text-wrap:balance}
.gnl-inscription .gnl-promesses{justify-content:center}
.gnl-champ{display:flex;gap:8px;padding:6px;border-radius:50px;background:#fff;border:1px solid rgba(24,21,21,.18);transition:border-color .2s ease,box-shadow .2s ease}
.gnl-champ:focus-within{border-color:var(--gnl-green);box-shadow:0 0 0 4px rgba(25,135,84,.14)}
.gnl-champ.is-erreur{border-color:var(--gnl-red);box-shadow:0 0 0 4px rgba(180,35,47,.1)}
.gnl-input{flex:1 1 auto;min-width:0;margin:0;padding:10px 6px 10px 16px;border:0;background:transparent;font:inherit;font-size:1rem;color:var(--gnl-ink);outline:none;box-shadow:none}
.gnl-input::placeholder{color:#8a8484}
.gnl-input:focus-visible{outline:none}
.gnl-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;margin:0;
  padding:12px 20px;border:0;border-radius:50px;background:var(--gnl-green);color:#fff;
  font:inherit;font-size:.9375rem;font-weight:500;line-height:1.2;white-space:nowrap;text-transform:none;letter-spacing:0;
  cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.gnl-bouton:hover{background:var(--gnl-green-dk);box-shadow:0 10px 24px rgba(25,135,84,.3);transform:translateY(-1px)}
.gnl-bouton:active{transform:none;box-shadow:none}
.gnl-bouton[disabled]{opacity:.7;cursor:progress;transform:none;box-shadow:none}
.gnl-bouton-sombre{background:var(--gnl-ink);margin-top:22px}
.gnl-bouton-sombre:hover{background:#2e2a2a;box-shadow:0 10px 24px rgba(0,0,0,.2)}

.gnl-msg{margin:8px 0 0;min-height:0;font-size:.875rem;line-height:1.5;color:var(--gnl-red)}
.gnl-msg:empty{display:none}
.gnl-msg button{margin:0 0 0 6px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--gnl-green-dk);text-decoration:underline;cursor:pointer}
.gnl-turnstile:empty{display:none}
.gnl-turnstile{margin:12px 0 0}

.gnl-promesses{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0}
.gnl-promesses li{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.8125rem;color:var(--gnl-text)}
.gnl-promesses svg{color:var(--gnl-green);flex:none}
.gnl-mention{margin:14px 0 0;font-size:.75rem;line-height:1.55;color:var(--gnl-grey)}
.gnl-mention a{color:var(--gnl-grey);text-decoration:underline;text-underline-offset:2px}
.gnl-mention a:hover{color:var(--gnl-green-dk)}

.gnl-refus{display:block;margin:16px auto 0;padding:6px 10px;border:0;background:none;font:inherit;font-size:.8125rem;color:var(--gnl-grey);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gnl-refus:hover{color:var(--gnl-ink)}

.gnl-ok{text-align:center;padding:12px 0 4px;outline:none}
.gnl-ok .gnl-titre{padding-right:0}
.gnl-ok-icone,.gnl-conf-coche{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 18px;
  border-radius:50%;background:var(--gnl-tint,#f2f7f4);color:var(--gnl-green,#198754);
  box-shadow:0 0 0 8px rgba(60,207,138,.12);animation:gnl-pop .6s cubic-bezier(.34,1.6,.64,1) .05s both;
}
.gnl-note{margin:12px 0 0;font-size:.8125rem;color:var(--gnl-grey)}

/* Mobile : un tiroir qui monte du bas de l'écran, plus naturel au pouce qu'une boîte centrée. */
@media (max-width:600px){
  .gnl{inset:auto 0 0 0;margin:0;width:100%;max-height:92dvh}
  .gnl-carte{max-height:92dvh;border-radius:25px 25px 0 0;padding:30px 20px calc(22px + env(safe-area-inset-bottom));animation-name:gnl-tiroir;animation-duration:.5s;transform-origin:50% 100%}
  .gnl.is-fermeture .gnl-carte{animation:gnl-tiroir-sortie .22s ease-in both}
  .gnl-champ{flex-direction:column;border-radius:18px;padding:6px}
  .gnl-input{padding:12px 12px}
  .gnl-bouton{width:100%;padding:14px 20px}
  .gnl-logo{margin:-4px 0 16px}
  .gnl-inscription{padding:14px 12px 14px}
  .gnl-logo img{height:31px}
}
@keyframes gnl-tiroir{0%{transform:translateY(100%)}100%{transform:none}}
@keyframes gnl-tiroir-sortie{to{transform:translateY(100%)}}

@media (prefers-reduced-motion:reduce){
  .gnl-carte,.gnl::backdrop,.gnl-ok-icone,.gnl-conf-coche{animation-duration:.01ms !important;animation-delay:0s !important}
}

/* Corps de page bloqué pendant que la modale est ouverte. */
html.gnl-ouverte{overflow:hidden}