[hidden]{display:none!important}
.auth-page .field label,.auth-page .terms-consent,.auth-page .forgot{font-size:14px}
.auth-page .auth-intro{font-size:16px}
.auth-page .input-wrap input{padding-right:46px}
.auth-page .back-link{font-size:14px}
.google-action{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;border:1px solid #dce4ef;border-radius:10px;background:#fff;color:#1e293b;font-size:14px;font-weight:650;cursor:pointer}
.google-action:hover{background:#f7faff;border-color:#a8bde1}
.google-note{font-size:12px;color:#64748b;line-height:1.5;text-align:center;margin:9px 0 0}
.auth-divider{display:flex;align-items:center;gap:14px;font-size:12px;color:#64748b;margin:20px 0}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#e7edf5}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #73a0ef;outline-offset:3px}
.strength-line{display:flex;align-items:center;gap:10px;min-height:22px;margin-top:2px}
.strength-bars{display:flex;gap:5px}
.strength-bars span{width:26px;height:4px;border-radius:3px;background:#e5eaf2;transition:background .15s}
.strength-line>span{font-size:12px;font-weight:700;color:#64748b}
[data-level="1"] .strength-bars span:first-child{background:#d63344}
[data-level="1"] [data-strength-label]{color:#be2336}
[data-level="2"] .strength-bars span:nth-child(-n+2){background:#df8b18}
[data-level="2"] [data-strength-label]{color:#99600f}
[data-level="3"] .strength-bars span{background:#159266}
[data-level="3"] [data-strength-label]{color:#0e7854}
.password-rules{list-style:none;display:flex;flex-wrap:wrap;gap:5px 12px;margin:7px 0 0;padding:0;color:#64748b;font-size:12px;line-height:1.6}
.password-rules li:before{content:"○";display:inline-block;width:15px;color:#8d9aad}
.password-rules li.met{color:#167451}
.password-rules li.met:before{content:"✓";color:#167451}
.terms-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;line-height:1.6;font-weight:400!important;color:#475569!important}
.field .terms-consent input{width:18px;height:18px;flex:0 0 18px;margin:3px 0 0;accent-color:#2563eb}
.terms-consent a,.portfolio-link a{color:#245bc5;text-decoration:underline;text-underline-offset:3px}
.form-status{font-size:14px;line-height:1.5;border:1px solid #f4cbd1;color:#a92336;background:#fff5f6;padding:12px 14px;border-radius:10px;margin:0 0 18px;overflow-wrap:anywhere}
.form-status.success{color:#126b4d;background:#f0faf6;border-color:#b8e1d1}
.site-legal-footer{font-family:Arial,sans-serif;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 24px;padding:22px 16px;border-top:1px solid #e7edf5;background:#fff;font-size:13px;color:#64748b;line-height:1.5}
.site-legal-footer a{text-decoration:none;color:inherit}
.site-legal-footer a:hover{color:#2563eb}
.photo-credits{font-family:Arial,sans-serif;box-sizing:border-box;max-width:560px;margin:0 auto 24px;padding:10px 14px;border:1px solid #e7edf5;border-radius:10px;background:#f8fafd;text-align:center;font-size:11px;line-height:1.55;color:#7b879f}
.photo-credits a{text-decoration:underline;text-underline-offset:2px;color:inherit}
.recovery-codes{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;padding:16px;background:#f5f8fc;border:1px solid #e7edf5;border-radius:10px;font-family:monospace;font-size:14px;overflow-wrap:anywhere}
.reset-done{display:flex;align-items:center;justify-content:center}
.text-button{font-size:14px;font-weight:600;background:none;border:0;color:#245bc5;cursor:pointer;padding:6px}
.positions-list{font-size:14px;color:#475569;line-height:1.7}
.positions-list .watch-item{justify-content:space-between;gap:15px}
.positions-list strong{font-size:14px}
.portfolio-link{font-size:13px;line-height:1.6;margin:18px 0 0}
.legal-page{background:#f7f9fd}
.legal-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1100px)/2));border-bottom:1px solid #e1e8f3;background:#fff;gap:20px}
.legal-login{font-size:14px;color:#245bc5;font-weight:700}
.legal-intro{max-width:1100px;margin:auto;padding:42px 0 38px}
.legal-intro .back-link{margin-bottom:35px}
.legal-kicker{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#2563eb;margin:0 0 14px}
.legal-intro h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,54px);line-height:1.1;letter-spacing:-1.8px;margin:0;color:#102142}
.legal-layout{max-width:1100px;margin:0 auto 70px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:38px;align-items:start}
.legal-toc{position:sticky;top:26px;padding:20px 0}
.legal-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#71809a;margin:0 0 15px}
.legal-toc a{display:flex;gap:12px;padding:10px 0;font-size:14px;color:#51617a;line-height:1.5}
.legal-toc a span{color:#8597b3;font-size:12px;padding-top:2px}
.legal-toc a:hover{color:#2563eb}
.legal-content{border:1px solid #e3eaf4;border-radius:18px;background:#fff;padding:0 36px;box-shadow:0 10px 35px rgba(19,46,91,.035)}
.legal-article{display:grid;grid-template-columns:30px minmax(0,1fr);gap:18px;padding:30px 0;border-bottom:1px solid #e9eef6;scroll-margin-top:24px}
.article-number{font-size:12px;color:#3d73d7;font-weight:700;padding-top:4px}
.legal-article h2{font-size:20px;color:#19315a;line-height:1.4;margin:0 0 12px}
.legal-article p{font-size:16px;line-height:1.8;color:#516078;margin:0;overflow-wrap:anywhere}
.legal-return{display:inline-flex;margin:28px 0;color:#245bc5;font-size:14px;font-weight:600}
@media(max-width:1160px){.legal-intro,.legal-layout{margin-left:24px;margin-right:24px}}
@media(max-width:760px){.legal-header{height:68px;padding:0 22px}
.legal-intro{padding-top:28px;padding-bottom:26px}
.legal-intro .back-link{margin-bottom:26px}
.legal-layout{grid-template-columns:1fr;gap:20px}
.legal-toc{position:static;display:flex;gap:8px;overflow-x:auto;padding:0 0 10px}
.legal-toc h2{display:none}
.legal-toc a{white-space:nowrap;border:1px solid #dfe7f3;background:#fff;border-radius:8px;padding:9px 12px}
.legal-content{padding:0 20px;border-radius:13px}
.legal-article{grid-template-columns:22px minmax(0,1fr);gap:10px;padding:24px 0}
.legal-article h2{font-size:18px}
.legal-kicker{font-size:11px}
.legal-intro h1{letter-spacing:-1px}
.auth-main{padding-top:26px}
.mobile-logo{margin-bottom:28px}
.back-link{margin-bottom:26px}
.dash+.site-legal-footer{padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){.strength-bars span{transition:none}}
/* Même famille que le logo de la page d'accueil et que le titre principal, pour que
   « Newswatch » ait exactement le même dessin d'un écran à l'autre. */
.logo{font-family:"Suisse Int’l","Suisse Int'l","Suisse Intl","Helvetica Neue",Helvetica,Arial,sans-serif!important;font-style:normal;font-weight:800;letter-spacing:-.045em}
.strength-line{display:block}
.strength-bars{width:100%;display:flex;gap:5px}
.strength-bars span{flex:1;width:auto}
.strength-line>span{display:block;margin-top:7px}
.forgot{display:inline-flex!important;align-items:center;gap:6px;border:0!important;background:transparent!important;padding:0!important;color:#3565c2!important;font:inherit!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.forgot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 15px}

/* ============================================================================
   FENÊTRE LÉGALE (CGU / confidentialité) — couche unique et faisant autorité.
   Remplace les 4 passes d'overrides `!important` contradictoires précédentes.
   Deux exigences :
     1. La fenêtre s'ouvre PAR-DESSUS la page, en retrait des bords et du haut,
        sur un fond flouté qui laisse deviner la page en dessous.
     2. Un SEUL conteneur de défilement de chaque côté. Le bug « ça me remet en
        bas » venait de conteneurs imbriqués (html + body + .simple-legal +
        .simple-legal-card défilaient tous) et du chaînage du défilement de
        l'iframe vers la page hôte.
   ========================================================================== */

/* --- Page hôte : voile flouté ------------------------------------------- */
.terms-modal-backdrop{
  position:fixed;
  top:0; left:0; right:0;
  /* `inset:0` seul dimensionne la fenêtre sur la zone de mise en page, qui sur
     mobile s'étend SOUS la barre du navigateur : le bas de la carte passait
     dessous et se retrouvait coupé. `dvh` suit la hauteur réellement visible et
     se réajuste quand la barre apparaît ou disparaît. `vh` reste en repli pour
     les navigateurs anciens. */
  height:100vh;
  height:100dvh;
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  /* Marges de flou : plus larges sur les côtés et en haut, et jamais nulles en
     bas. `max(..., env(...))` ajoute l'encoche ou la barre d'accueil là où le
     navigateur les expose, sans rien retrancher ailleurs. */
  padding-top:max(clamp(30px,7vh,84px), env(safe-area-inset-top));
  padding-inline:clamp(22px,5.5vw,72px);
  padding-bottom:max(clamp(26px,5vh,64px), calc(env(safe-area-inset-bottom) + 24px));
  /* Aucune teinte : c'est la page elle-même que l'on doit voir, floutée.
     L'ancien voile bleuté (rgba(226,236,250,.42)) colorait tout l'écran au lieu
     de laisser transparaître le fond réel. Le très léger blanc ci-dessous sert
     seulement à décoller la carte d'un fond très chargé ; il est neutre. */
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(1.05);
  -webkit-backdrop-filter:blur(20px) saturate(1.05);
  isolation:isolate;
  animation:nw-legal-in .22s ease-out both;
}
@keyframes nw-legal-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.terms-modal-backdrop{animation:none}}

/* La page hôte ne défile plus pendant l'ouverture. Le verrou est posé en JS
   (position:fixed + restauration du scrollY), seule méthode fiable sur iOS ;
   `overflow:hidden` seul y est ignoré — c'était l'autre moitié du bug. */
body.legal-modal-open{position:fixed; inset-inline:0; width:100%; overflow:hidden}

/* --- La carte ------------------------------------------------------------ */
.terms-modal{
  position:relative;
  display:flex; flex-direction:column;
  width:min(860px,100%);
  height:100%; max-height:100%; min-height:0;
  background:#fff;
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  box-shadow:0 32px 90px rgba(16,42,88,.28), 0 2px 8px rgba(16,42,88,.10);
  overflow:hidden;
}
.terms-modal-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:64px; padding:0 22px;
  background:#fff; border-bottom:1px solid #e6ecf5;
}
.terms-modal-head strong{font-size:15px; color:#14284b; font-weight:700}
.terms-modal-close{
  display:grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; padding:0;
  border:1px solid #c8d8ee; border-radius:50%;
  background:#eef4ff; color:#214b88;
  font-size:24px; line-height:1; cursor:pointer;
  transition:background .15s ease;
}
.terms-modal-close:hover{background:#dfebff; color:#173d77}
.terms-modal iframe{
  display:block; flex:1 1 auto; min-height:0;
  width:100%; border:0; background:#fff;
}

@media(max-width:600px){
  .terms-modal-backdrop{
    padding-top:max(26px, env(safe-area-inset-top));
    padding-inline:20px;
    padding-bottom:max(24px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .terms-modal{border-radius:18px}
  .terms-modal-head{height:58px; padding:0 16px}
}

/* --- Bandeau cookies ------------------------------------------------------ */
/* Reprend l'apparence de celui de l'application, pour qu'un visiteur qui s'inscrit ne
   voie pas deux bandeaux d'aspect différent de part et d'autre de la connexion. */
.nw-cookies{
  position:fixed; left:0; right:0; bottom:0;
  /* Sous la barre d'accueil de l'iPhone, les boutons deviendraient impossibles à viser. */
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:#0f172a; color:#f8fafc;
  /* Au-dessus de tout, fenêtres légales comprises (300) : le consentement ne doit jamais
     se retrouver derrière un autre élément, sans quoi il devient impossible à donner. */
  z-index:400;
  font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 -6px 24px rgba(8,20,44,.28);
}
.nw-cookies-texte{
  margin:0 0 10px; font-size:11.5px; line-height:1.6; color:#cbd5e1;
}
.nw-cookies-texte a{color:#93b8ff; text-decoration:underline}
.nw-cookies-actions{display:flex; gap:8px}
.nw-cookies-actions button{
  flex:1 1 0; min-width:0;
  padding:9px 4px; border-radius:7px;
  font-size:11.5px; font-weight:700; cursor:pointer;
  font-family:inherit;
}
/* « Tout refuser » et « Tout accepter » : exactement le même aspect (CNIL : refuser ne doit pas être
   découragé par la mise en forme). */
.nw-cookies-bouton{background:#fff; color:#0f172a; border:1.5px solid #f8fafc}
.nw-cookies-bouton:hover{background:#e2e8f0}

/* --- Fenêtre de consentement avant la connexion Google -------------------- */
/* Même voile flouté que la fenêtre légale, mais une carte courte, centrée, qui ne prend
   que la place de son contenu. z-index inférieur à celui de la fenêtre légale (300) :
   lire les conditions depuis ici doit passer PAR-DESSUS, sans refermer le consentement. */
.consent-modal-backdrop{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;
  height:100dvh;
  z-index:290;
  display:flex; align-items:center; justify-content:center;
  padding-top:max(24px, env(safe-area-inset-top));
  padding-inline:clamp(18px,6vw,40px);
  padding-bottom:max(24px, calc(env(safe-area-inset-bottom) + 20px));
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(1.05);
  -webkit-backdrop-filter:blur(20px) saturate(1.05);
  isolation:isolate;
  animation:nw-legal-in .22s ease-out both;
}
@media(prefers-reduced-motion:reduce){.consent-modal-backdrop{animation:none}}

.consent-modal{
  width:min(420px,100%);
  max-height:100%;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  box-shadow:0 32px 90px rgba(16,42,88,.28), 0 2px 8px rgba(16,42,88,.10);
  padding:24px 22px 20px;
}
.consent-modal-title{
  margin:0 0 8px;
  font-size:18px; line-height:1.25; font-weight:800; color:#14284b;
  letter-spacing:-.2px;
}
.consent-modal-intro{
  margin:0 0 18px;
  font-size:13.5px; line-height:1.5; color:#5c6a84;
}
.consent-modal-check{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; margin-bottom:18px;
  background:#f5f8ff; border:1px solid #dde7f8; border-radius:12px;
  font-size:13.5px; line-height:1.45; color:#2b3a55;
  cursor:pointer;
}
/* La case reste confortable à viser au doigt : 20px est le minimum lisible, et le
   flex-shrink l'empêche d'être écrasée par un texte long. */
.consent-modal-check input{
  flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:#1263f5; cursor:pointer;
}
.consent-modal-check a{color:#1263f5; font-weight:600; text-decoration:underline}
.consent-modal-actions{display:flex; gap:10px}
.consent-modal-actions button{
  flex:1 1 auto; height:46px; padding:0 14px;
  border-radius:12px; font-size:14.5px; font-weight:700; cursor:pointer;
  font-family:inherit;
}
.consent-modal-cancel{
  flex:0 0 auto; min-width:96px;
  background:#f1f5fb; color:#41506b; border:1px solid #dbe4f1;
}
.consent-modal-go{
  background:linear-gradient(180deg,#286dfb,#0b59eb); color:#fff; border:none;
  box-shadow:0 2px 8px rgba(18,99,245,.22);
}
/* Tant que la case n'est pas cochée, le bouton reste inopérant ET le montre : un bouton
   désactivé qui garde son apparence normale donne l'impression que le site ne répond pas. */
.consent-modal-go:disabled{
  background:#c9d7ec; color:#f4f8ff; box-shadow:none; cursor:not-allowed;
}

/* --- Document légal, vue autonome (/conditions-utilisation/) ------------- */
.simple-legal{
  margin:0; min-height:100vh;
  background:linear-gradient(135deg,#dce7fa,#f6f9fc 45%,#cfdcf4);
  padding:clamp(14px,4vh,40px) clamp(12px,4vw,32px);
  display:grid; place-items:start center;
}
.simple-legal-card{
  width:min(860px,100%);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  box-shadow:0 25px 80px rgba(30,62,112,.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.simple-legal-head{
  display:flex; align-items:center; justify-content:space-between;
  height:66px; padding:0 24px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(215,225,239,.9);
}
.legal-close{
  display:grid; place-items:center;
  width:38px; height:38px; padding:0;
  border:1px solid #c8d8ee; border-radius:50%;
  background:#eef4ff; color:#214b88;
  font-size:24px; line-height:1; cursor:pointer;
}
.legal-close:hover{background:#dfebff}
.simple-legal-body{padding:32px clamp(20px,5vw,48px) 44px}
.simple-legal-body .back-link{display:inline-block; margin-bottom:26px}
.simple-legal-body h1{
  font-family:Georgia,serif; font-size:clamp(30px,5vw,46px);
  letter-spacing:-1.4px; margin:0 0 6px; color:#13264b;
}
.simple-legal-meta{font-size:11px; color:#8492a5; margin:0 0 26px}
.simple-legal-body section{padding:18px 0; border-top:1px solid #e8edf4}
.simple-legal-body section h2{font-size:15px; color:#1c3768; margin:0 0 8px}
.simple-legal-body section p,.simple-legal-body section li{
  font-size:13px; line-height:1.75; color:#52627a; margin:0 0 8px;
}
.simple-legal-body section p:last-child,
.simple-legal-body section li:last-child{margin-bottom:0}
.simple-legal-body section ul{margin:0 0 8px; padding-left:20px}
.simple-legal-todo{
  display:inline-block; padding:1px 7px; margin:0 2px;
  border-radius:5px; background:#fff3d6; border:1px solid #e9c877;
  color:#8a5b00; font-size:11px; font-weight:700; letter-spacing:.2px;
}
.simple-legal-end{font-size:13px; color:#244d9b; margin:28px 0 0}

/* --- Document légal, vue intégrée dans la fenêtre (?modal=1) ------------- */
/* UN SEUL défileur : .simple-legal-card. html et body sont figés, la carte
   occupe toute la hauteur et contient son propre défilement.
   `overscroll-behavior:contain` empêche le défilement de repartir vers la page
   hôte une fois arrivé en haut ou en bas : c'est la cause directe du retour
   brutal en bas de page. `overflow-anchor:none` désactive l'ancrage
   automatique du navigateur, qui repositionnait le contenu tout seul. */
html.legal-modal-view,
html.legal-modal-view body.simple-legal{
  height:100%; margin:0; padding:0;
  overflow:hidden;
  background:#fff;
}
html.legal-modal-view body.simple-legal{display:block}
html.legal-modal-view .simple-legal-card{
  width:100%; height:100%;
  margin:0; border:0; border-radius:0; box-shadow:none;
  background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
  display:flex; flex-direction:column;
}
html.legal-modal-view .simple-legal-head{display:none}
html.legal-modal-view .simple-legal-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
  max-width:none; margin:0;
  padding:30px clamp(20px,5vw,44px) 56px;
}
html.legal-modal-view .simple-legal-body .back-link{display:none}
html.legal-modal-view .simple-legal-body::-webkit-scrollbar{width:10px}
html.legal-modal-view .simple-legal-body::-webkit-scrollbar-thumb{
  background:#cfdcee; border-radius:6px; border:3px solid #fff;
}

.plan-note{
  margin:-16px 0 24px; padding:10px 14px;
  background:#eef4ff; border:1px solid #d7e6ff; border-radius:10px;
  color:#1d4ed8; font-size:12.5px; font-weight:650; line-height:1.5;
}

.code-countdown{margin:-10px 0 4px;font-size:11.5px;font-weight:700;color:#64748b}
.code-countdown.expired{color:#dc2626}
.recovery-result{padding:12px 14px;border-radius:8px;font-size:12px;font-weight:650;line-height:1.5;margin:0 0 14px}
.recovery-result.success{color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0}
.recovery-result.warning{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}
.recovery-result.exhausted{color:#c2620a;background:#fef3c7;border:1px solid #fcd34d}
.recovery-actions{display:flex;gap:10px;margin:14px 0}
.recovery-actions .text-button{flex:1;border:1px solid #dce4ef;border-radius:8px;background:#fff}

/* Explication affichée après une déconnexion automatique pour inactivité (cf. le script en tête
   de landing/index.html). Placée tout en haut, avant l'en-tête : elle doit être lue par quelqu'un
   qui revient devant son écran et ne sait pas pourquoi il a quitté l'application. */
.nw-deconnexion-avis{
  background:#fef3c7; color:#78350f; border-bottom:1px solid #fcd34d;
  padding:11px 16px; text-align:center;
  font-size:13px; font-weight:650; line-height:1.45;
}
.nw-deconnexion-avis[hidden]{display:none}