/*
  Page /newsletters/ — inscription aux newsletters en trois temps.
  Fond blanc, texte bleu nuit, accent #d53515 (maquette validée « E1a Blanc »,
  docs/newsletters/maquettes/fonds/e1a-blanc.html).

  Les couleurs secondaires de l'app (teal, corail, orange) passent sous 3:1 sur
  blanc : on utilise ici leurs versions foncées, contrôlées au niveau WCAG AA.
*/

/* ---------- Thème clair : en-tête, pied de page, fond ---------- */
body.theme-light{
  --nl-navy:#05054f;
  --nl-muted:#3c3f6b;
  --nl-soft:#555a78;
  --nl-rule:#cfd2e3;
  --nl-edge:#767a96;
  --nl-pill:rgba(5,5,79,.07);
  --nl-accent:#d53515;
  --nl-accent-hi:#e4431f;
  --nl-frequency:#b52c10;
  --nl-error:#b3261e;
  --nl-info:#0b6b65;
  --nl-ease:cubic-bezier(.2,.7,.2,1);
  background:#fff;
  color:var(--nl-navy);
  font-family:"Poppins",sans-serif;
}
/* Pas de quadrillage ni de points sur fond clair */
body.theme-light::before,
body.theme-light::after{display:none}
body.theme-light .site-header .cta{border-color:rgba(5,5,79,.55);color:var(--nl-navy)}
body.theme-light .site-header .cta:hover{background:var(--nl-pill);border-color:var(--nl-navy)}
body.theme-light .site-header .cta:focus-visible{outline-color:var(--nl-navy)}
body.theme-light .site-header .cta .icon{background:var(--nl-navy)}
body.theme-light .site-header .cta .icon svg{stroke:#fff}
body.theme-light .page-footer{color:var(--nl-navy)}

/* ---------- Éléments communs ---------- */
.nl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nl-ico{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(.nl-flow) :where(button,input){font:inherit;color:inherit}
.nl-flow [data-head]:focus{outline:none}

.nl-check{appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;flex:none;border:1.75px solid var(--nl-edge);border-radius:7px;background:transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
.nl-check:checked{background:var(--nl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--nl-accent)}
.nl-check:focus-visible{outline:2px solid var(--nl-navy);outline-offset:3px}
.nl-check[aria-invalid=true]{border-color:var(--nl-error)}

.nl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.nl-field label{font-size:14px;font-weight:500}
.nl-field label small{font-weight:400;color:var(--nl-soft);font-size:13px}
.nl-input{width:100%;height:54px;border-radius:12px;border:1.5px solid var(--nl-edge);background:#fff;color:var(--nl-navy);padding:0 16px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.nl-input::placeholder{color:#6b6f8c}
.nl-input:hover{border-color:var(--nl-muted)}
.nl-input:focus{outline:none;border-color:var(--nl-navy);box-shadow:0 0 0 3px rgba(5,5,79,.12)}
.nl-input[aria-invalid=true]{border-color:var(--nl-error)}
.nl-input-big{height:74px;font-size:24px;border-radius:16px;padding:0 22px}

.nl-err{margin:8px 0 0;font-size:14px;color:var(--nl-error);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.nl-err svg{width:18px;height:18px;flex:none;margin-top:1px}
.nl-err[hidden]{display:none}

.nl-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--nl-muted);line-height:1.5}
.nl-consent a{color:var(--nl-navy);text-decoration:underline;text-underline-offset:3px}

.nl-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;border:0;border-radius:999px;background:var(--nl-accent);color:#fff;font-weight:600;font-size:16px;padding:8px 10px 8px 24px;cursor:pointer;text-align:center;line-height:1.25;transition:background-color .2s,transform .1s}
.nl-submit:hover{background:var(--nl-accent-hi)}
.nl-submit:active{transform:translateY(1px)}
.nl-submit:focus-visible{outline:2px solid var(--nl-navy);outline-offset:3px}
.nl-submit[aria-busy=true]{opacity:.75;cursor:progress}
.nl-submit-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#fff;flex:none}
.nl-submit-icon svg{width:14px;height:14px}

.nl-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 20px;border-radius:999px;border:1.5px solid var(--nl-edge);background:transparent;color:var(--nl-navy);cursor:pointer;font-weight:500;font-size:15px;transition:background-color .2s,border-color .2s}
.nl-btn-ghost:hover{background:var(--nl-pill);border-color:var(--nl-navy)}
.nl-btn-ghost:focus-visible{outline:2px solid var(--nl-navy);outline-offset:3px}
.nl-btn-ghost svg{width:18px;height:18px}
.nl-btn-ghost[aria-busy=true]{opacity:.6;cursor:progress}

.nl-linkbtn{border:0;background:none;padding:4px 0;cursor:pointer;font-size:14px;font-weight:500;color:var(--nl-navy);text-decoration:underline;text-underline-offset:3px}
.nl-linkbtn:focus-visible{outline:2px solid var(--nl-navy);outline-offset:3px;border-radius:4px}

.nl-pill{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--nl-navy);color:#fff;font-size:13px;font-weight:600}
.nl-resent{font-size:14px;color:var(--nl-info)}
.nl-resent.is-error{color:var(--nl-error)}
.nl-resent:empty{display:none}

.nl-preselect{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--nl-muted);border-left:3px solid var(--nl-info);padding:4px 0 4px 12px;margin:0 0 18px}
.nl-preselect[hidden]{display:none}
.nl-preselect svg{width:18px;height:18px;flex:none;margin-top:2px}
.nl-preselect b{color:var(--nl-navy);font-weight:600}

/* Pot de miel : hors de l'écran plutôt que display:none, que certains robots repèrent. */
.nl-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Transitions entre étapes : entrée seule, courte, interruptible ---------- */
[data-panel]{transition:opacity .24s var(--nl-ease),transform .24s var(--nl-ease)}
[data-panel][hidden]{display:none}
@starting-style{[data-panel]{opacity:0;transform:translateX(18px)}}
@starting-style{[data-dir=back] [data-panel]{opacity:0;transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){
  .nl-flow *,.nl-flow *::before,.nl-flow *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Parcours plein écran, une question par écran ---------- */
.nl-flow{min-height:calc(100vh - 150px);display:flex;flex-direction:column;padding:26px 0 30px}
.nl-top{margin-bottom:10px}
.nl-top h1{margin:0;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--nl-soft)}

.nl-progress{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nl-progress li{position:relative;padding-top:14px;font-size:13px;color:var(--nl-soft);line-height:1.3;transition:color .25s}
.nl-progress li::before,.nl-progress li::after{content:"";position:absolute;left:0;top:0;height:4px;border-radius:4px}
.nl-progress li::before{right:0;background:var(--nl-rule)}
.nl-progress li::after{width:0;background:var(--nl-navy);transition:width .32s var(--nl-ease),background-color .25s}
.nl-progress li.is-current{color:var(--nl-navy)}
.nl-progress li.is-current::after{width:35%}
.nl-progress li.is-done{color:var(--nl-navy)}
.nl-progress li.is-done::after{width:100%;background:var(--nl-accent)}
.nl-progress li.is-waiting{color:var(--nl-accent)}
.nl-progress li.is-waiting::after{width:100%;background:var(--nl-accent)}

.nl-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:34px 0 10px}
.nl-stage form{width:min(100%,780px)}
.nl-stage fieldset{border:0;margin:0;padding:0;min-width:0}

.nl-eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nl-soft);margin:0 0 10px}
.nl-q{font-size:clamp(32px,4.6vw,58px);line-height:1.08;font-weight:700;margin:0 0 14px;letter-spacing:-.3px;color:var(--nl-navy)}
.nl-sub{margin:0 0 30px;color:var(--nl-muted);font-size:17px;max-width:56ch}

.nl-opt{display:grid;grid-template-columns:44px 1fr auto;gap:0 18px;align-items:center;padding:20px 12px 20px 16px;border-top:1px solid var(--nl-rule);cursor:pointer;position:relative;transition:background-color .2s}
.nl-opt:last-of-type{border-bottom:1px solid var(--nl-rule)}
.nl-opt::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--nl-accent);transform:scaleY(0);transition:transform .22s var(--nl-ease)}
.nl-opt:hover{background:rgba(5,5,79,.03)}
.nl-opt:has(.nl-check:checked){background:rgba(213,53,21,.07)}
.nl-opt:has(.nl-check:checked)::before{transform:scaleY(1)}
.nl-opt-icon{width:44px;height:44px;display:grid;place-items:center;color:var(--nl-navy)}
.nl-opt-icon svg{width:30px;height:30px}
.nl-name{display:block;font-size:24px;font-weight:600;line-height:1.2}
/* Fréquence : libellé qui se détache du nom et de la description */
.nl-frequency{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin:6px 0 8px;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(213,53,21,.08);color:var(--nl-frequency);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:18px}
.nl-frequency::before{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.nl-description{display:block;color:var(--nl-muted);font-size:15px}

.nl-actions{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:30px}
.nl-hint{font-size:13px;color:var(--nl-soft)}
/* Ordinateur : actions ferrées à droite, bouton principal en dernier, texte d'état juste à sa gauche */
@media (min-width:761px){
  .nl-actions{justify-content:flex-end}
  .nl-actions .nl-submit{order:2}
  .nl-actions .nl-hint{text-align:right}
}
.nl-fields{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:22px}
.nl-recap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 26px;font-size:14px;color:var(--nl-soft)}
.nl-recap-list{display:contents}

.nl-done-icon{width:84px;height:84px;border-radius:26px;background:var(--nl-accent);display:grid;place-items:center;margin-bottom:26px;color:#fff}
.nl-done-icon svg{width:44px;height:44px}
.nl-done-text{font-size:18px;color:var(--nl-muted);margin:0 0 22px;max-width:52ch}
.nl-done-text strong{color:var(--nl-navy);overflow-wrap:anywhere}
.nl-tips{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;border-top:1px solid var(--nl-rule);padding-top:20px;margin-bottom:6px}
.nl-tips h3{font-size:15px;margin:0 0 4px}
.nl-tips p{margin:0;font-size:14px;color:var(--nl-muted)}

.nl-foot-note{display:flex;gap:10px;align-items:flex-start;justify-content:center;font-size:13px;color:var(--nl-soft);margin:22px auto 0;max-width:780px;width:100%}
.nl-foot-note svg{width:18px;height:18px;flex:none;margin-top:1px}

@media (max-width:760px){
  .nl-flow{min-height:0;padding-top:18px}
  .nl-stage{align-items:flex-start;padding-top:24px}
  .nl-eyebrow,.nl-q{text-align:center}
  .nl-sub{font-size:16px;margin-bottom:22px}
  .nl-sub,.nl-done-text{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .nl-opt{grid-template-columns:32px 1fr auto;gap:0 12px;padding:16px 4px 16px 12px}
  .nl-opt-icon{width:32px;height:32px}
  .nl-opt-icon svg{width:24px;height:24px}
  .nl-name{font-size:20px}
  .nl-description{font-size:14px}
  /* Le bouton d'action reste accessible au pouce, collé en bas de l'écran */
  /* L'élément qu'on atteint au clavier ou qu'on fait défiler reste au-dessus de la barre collante */
  .nl-check,.nl-input{scroll-margin-bottom:120px}
  .nl-actions{position:sticky;bottom:0;background:linear-gradient(to top,#fff 78%,rgba(255,255,255,0));padding:18px 0 14px;margin-top:10px;flex-direction:column-reverse;align-items:stretch;z-index:2}
  .nl-actions .nl-submit,.nl-actions .nl-btn-ghost{width:100%}
  .nl-hint{display:none}
  .nl-input-big{height:62px;font-size:19px}
  .nl-tips{grid-template-columns:1fr}
  .nl-done-icon{width:60px;height:60px;border-radius:18px;margin:0 auto 20px}
  .nl-done-icon svg{width:32px;height:32px}
  .nl-done-text{font-size:16px}
  .nl-progress li{font-size:12px}
  .nl-foot-note{justify-content:flex-start}
  body.theme-light .page-footer .inner{flex-direction:column;align-items:center;text-align:center}
  body.theme-light .page-footer .footer-links{justify-content:center}
}
/* main.css retire la gouttière de #contenu sous 520 px : on la rend au parcours */
@media (max-width:520px){
  .nl-flow{padding-left:16px;padding-right:16px}
}

/* ---------- Page de confirmation (/newsletters/confirmee/) ---------- */
.nl-confirmed{width:min(100%,780px)}
.nl-store-badges{justify-content:flex-start;margin-top:26px}
body.theme-light .store-badge:focus-visible{outline-color:var(--nl-navy)}
@media (max-width:760px){
  .nl-store-badges{justify-content:center}
}