/* ============================================================
   FLID · overlays — tiroir légal + bandeau de consentement
   S'appuie exclusivement sur les tokens de styles.css.
   Chargé après styles.css. Aucune dépendance externe.
   ============================================================ */

/* ===== Tiroir légal (sidebar) ===== */
.lg-scrim{
  position:fixed; inset:0; z-index:900;
  background:rgba(5,5,8,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity var(--flid-dur) var(--flid-ease), visibility var(--flid-dur) var(--flid-ease);
}
.lg-scrim[data-open]{ opacity:1; visibility:visible; }

.lg-drawer{
  position:fixed; top:0; right:0; z-index:901;
  width:min(560px,100vw); height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--flid-panel-spatial);
  background-blend-mode:overlay,normal;
  border-left:1px solid var(--flid-line-strong);
  box-shadow:var(--flid-shadow-3);
  transform:translateX(100%);
  transition:transform var(--flid-dur-slow) var(--flid-ease);
  will-change:transform;
}
.lg-drawer[data-open]{ transform:translateX(0); }

.lg-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px 18px; border-bottom:1px solid var(--flid-line);
  background:linear-gradient(180deg,rgba(11,11,14,.55),transparent);
}
.lg-head h2{
  margin:0; font-family:var(--flid-font-display);
  font-size:clamp(1.5rem,3.4vw,2rem); line-height:1; letter-spacing:.02em;
  color:var(--flid-text); text-transform:uppercase;
}
.lg-close{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--flid-line-strong); border-radius:var(--flid-radius-pill);
  background:rgba(255,255,255,.04); color:var(--flid-text);
  cursor:pointer; transition:background var(--flid-dur-fast) var(--flid-ease), transform var(--flid-dur-fast) var(--flid-ease);
}
.lg-close:hover{ background:rgba(255,255,255,.1); transform:rotate(90deg); }
.lg-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* Onglets de navigation entre les 3 documents */
.lg-tabs{
  flex:0 0 auto; display:flex; gap:8px; padding:16px 26px 0;
  overflow-x:auto; scrollbar-width:none;
}
.lg-tabs::-webkit-scrollbar{ display:none; }
.lg-tab{
  flex:0 0 auto; padding:8px 15px;
  font-family:var(--flid-font-body); font-size:.78rem; font-weight:600;
  letter-spacing:.03em; color:var(--flid-text-muted);
  background:transparent; border:1px solid var(--flid-line); border-radius:var(--flid-radius-pill);
  cursor:pointer; white-space:nowrap;
  transition:color var(--flid-dur-fast) var(--flid-ease), border-color var(--flid-dur-fast) var(--flid-ease), background var(--flid-dur-fast) var(--flid-ease);
}
.lg-tab:hover{ color:var(--flid-text); border-color:var(--flid-line-strong); }
.lg-tab[aria-selected="true"]{
  color:var(--flid-ink); background:var(--flid-blanc); border-color:var(--flid-blanc);
}

.lg-body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:26px 26px 48px;
  -webkit-overflow-scrolling:touch;
}
.lg-panel[hidden]{ display:none; }

/* Typographie des documents légaux */
.lg-panel{
  font-family:var(--flid-font-body); font-size:.875rem; font-weight:300;
  line-height:1.72; color:var(--flid-text-muted);
}
.lg-panel h3{
  margin:30px 0 10px; font-family:var(--flid-font-body);
  font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--flid-text);
}
.lg-panel h3:first-child{ margin-top:0; }
.lg-panel p{ margin:0 0 12px; }
.lg-panel ul{ margin:0 0 14px; padding-left:18px; }
.lg-panel li{ margin-bottom:6px; }
.lg-panel strong{ color:var(--flid-text); font-weight:600; }
.lg-panel a{ color:var(--flid-text); text-decoration:underline; text-underline-offset:3px; }
.lg-panel a:hover{ text-decoration-color:var(--flid-magenta); }
.lg-panel table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:.8rem; }
.lg-panel th,.lg-panel td{ padding:9px 10px; text-align:left; border-bottom:1px solid var(--flid-line); vertical-align:top; }
.lg-panel th{ color:var(--flid-text); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.lg-maj{ margin-top:28px; font-size:.75rem; color:var(--flid-text-faint); }

/* Marqueur des informations à compléter avant mise en ligne */
.lg-todo{
  display:inline-block; padding:1px 7px; border-radius:var(--flid-radius-sm);
  background:rgba(240,70,110,.14); border:1px solid rgba(240,70,110,.4);
  color:#FF9DB4; font-weight:600; font-size:.8em; letter-spacing:.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ===== Bandeau de consentement ===== */
.cs-banner{
  position:fixed; z-index:950; left:16px; right:16px; bottom:16px;
  max-width:var(--flid-maxw); margin-inline:auto;
  padding:22px 24px;
  background:var(--flid-panel-spatial); background-blend-mode:overlay,normal;
  border:1px solid var(--flid-line-strong); border-radius:var(--flid-radius-lg);
  box-shadow:var(--flid-shadow-3);
  opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity var(--flid-dur-slow) var(--flid-ease), transform var(--flid-dur-slow) var(--flid-ease), visibility var(--flid-dur-slow);
}
.cs-banner[data-open]{ opacity:1; transform:translateY(0); visibility:visible; }

.cs-grid{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px; }
.cs-txt{ flex:1 1 320px; min-width:260px; }
.cs-txt h2{
  margin:0 0 7px; font-family:var(--flid-font-display);
  font-size:1.35rem; line-height:1; letter-spacing:.02em; text-transform:uppercase; color:var(--flid-text);
}
.cs-txt p{
  margin:0; font-family:var(--flid-font-body); font-size:.82rem; font-weight:300;
  line-height:1.6; color:var(--flid-text-muted);
}
.cs-txt a{ color:var(--flid-text); text-decoration:underline; text-underline-offset:3px; }

.cs-actions{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Refuser et Accepter ont strictement le même poids visuel (exigence CNIL) */
.cs-btn{
  padding:12px 22px; min-width:132px;
  font-family:var(--flid-font-body); font-size:.8rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  border-radius:var(--flid-radius-pill); border:1px solid var(--flid-blanc);
  background:transparent; color:var(--flid-text); cursor:pointer;
  transition:background var(--flid-dur-fast) var(--flid-ease), color var(--flid-dur-fast) var(--flid-ease);
}
.cs-btn:hover{ background:rgba(255,255,255,.1); }
.cs-btn--solid{ background:var(--flid-blanc); color:var(--flid-ink); }
.cs-btn--solid:hover{ background:rgba(255,255,255,.86); }
.cs-link{
  padding:12px 6px; font-family:var(--flid-font-body); font-size:.78rem; font-weight:500;
  color:var(--flid-text-muted); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.cs-link:hover{ color:var(--flid-text); }

/* Panneau de réglages granulaires */
.cs-prefs{ margin-top:20px; padding-top:20px; border-top:1px solid var(--flid-line); }
.cs-prefs[hidden]{ display:none; }
.cs-row{
  display:flex; align-items:flex-start; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--flid-line);
}
.cs-row:last-of-type{ border-bottom:0; }
.cs-row-txt{ flex:1 1 auto; }
.cs-row-txt b{
  display:block; font-family:var(--flid-font-body); font-size:.8rem; font-weight:600;
  color:var(--flid-text); margin-bottom:3px;
}
.cs-row-txt span{
  font-family:var(--flid-font-body); font-size:.76rem; font-weight:300;
  line-height:1.55; color:var(--flid-text-faint);
}

/* Interrupteur */
.cs-sw{ flex:0 0 auto; position:relative; width:46px; height:26px; margin-top:2px; }
.cs-sw input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cs-sw i{
  position:absolute; inset:0; border-radius:var(--flid-radius-pill);
  background:rgba(255,255,255,.1); border:1px solid var(--flid-line-strong);
  transition:background var(--flid-dur) var(--flid-ease);
  pointer-events:none;
}
.cs-sw i::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--flid-blanc);
  transition:transform var(--flid-dur) var(--flid-ease);
}
.cs-sw input:checked + i{ background:var(--flid-gradient-explosion); border-color:transparent; }
.cs-sw input:checked + i::after{ transform:translateX(20px); }
.cs-sw input:disabled + i{ opacity:.45; }
.cs-sw input:disabled ~ *{ cursor:not-allowed; }
.cs-sw input:focus-visible + i{ outline:2px solid var(--flid-blanc); outline-offset:3px; }

.cs-prefs-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Lien textuel à l'intérieur d'un paragraphe du bandeau */
.cs-inline-link{
  padding:0; font:inherit; background:none; border:0; cursor:pointer;
  color:var(--flid-text); text-decoration:underline; text-underline-offset:3px;
}
.cs-inline-link:hover{ text-decoration-color:var(--flid-magenta); }

/* ============================================================
   Tiroir newsletter
   Réutilise .lg-scrim / .lg-drawer / .lg-head / .lg-body : seuls
   les styles propres au formulaire sont définis ici.
   ============================================================ */
/* Le tiroir newsletter arrive après le tiroir légal dans le DOM : à z-index
   égal il peindrait par-dessus. Or il contient des liens « En savoir plus »
   qui ouvrent le tiroir légal — celui-ci doit donc pouvoir passer devant.
   On descend la newsletter d'un cran. */
#nl-scrim{ z-index:898; }
#nl-drawer{ z-index:899; }

/* Visuel d'accroche. Débordé jusqu'aux bords du tiroir — le padding du
   .lg-body est annulé par des marges négatives — pour qu'il se lise comme une
   image de couverture et non comme une vignette posée dans du texte. */
.nl-visuel{
  margin:-26px -26px 22px; padding:0;
  /* Rapport exact du fichier : aucun recadrage, donc aucun visage tronqué,
     et une bande basse qui laisse le formulaire visible sans défilement. */
  aspect-ratio:1290/518; overflow:hidden;
  background:var(--flid-surface-2,#1C1C24);
  border-bottom:1px solid var(--flid-line);
  position:relative;
}
.nl-visuel img{ width:100%; height:100%; object-fit:cover; display:block;
  object-position:center; }
/* Dégradé de pied pour que le texte qui suit ne se heurte pas à l'image. */
.nl-visuel::after{
  content:''; position:absolute; inset:auto 0 0; height:45%;
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.85));
  pointer-events:none;
}

.nl-lede{
  margin:0 0 14px; font-family:var(--flid-font-body);
  font-size:.9rem; font-weight:300; line-height:1.68;
  color:var(--flid-text-muted);
}

/* Les trois bénéfices. Puces dessinées en CSS, teintées de la couleur
   d'accent, pour ne pas dépendre d'une icône supplémentaire. */
.nl-args{ margin:0 0 22px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px; }
.nl-args li{
  position:relative; padding-left:20px;
  font-family:var(--flid-font-body); font-size:.86rem; font-weight:300;
  line-height:1.6; color:var(--flid-text-muted);
}
.nl-args li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--flid-gradient-explosion,#F0466E);
}
.nl-args strong{ color:var(--flid-text); font-weight:600; }

.nl-form{ display:flex; flex-direction:column; gap:18px; }

/* Champ-piège : jamais visible, jamais tabulable, jamais annoncé. */
.nl-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.nl-field{ display:flex; flex-direction:column; gap:7px; }
.nl-field label{
  font-family:var(--flid-font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--flid-text);
}
.nl-opt{ font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--flid-text-faint); }

.nl-field input,
.nl-field select{
  width:100%; padding:13px 15px;
  font-family:var(--flid-font-body); font-size:.9rem; font-weight:300;
  color:var(--flid-text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--flid-line-strong); border-radius:var(--flid-radius-sm,8px);
  transition:border-color var(--flid-dur-fast) var(--flid-ease), background var(--flid-dur-fast) var(--flid-ease);
  -webkit-appearance:none; appearance:none;
}
.nl-field input::placeholder{ color:var(--flid-text-faint); }
.nl-field input:hover,
.nl-field select:hover{ border-color:rgba(255,255,255,.28); }
.nl-field input:focus,
.nl-field select:focus{ outline:none; border-color:var(--flid-blanc); background:rgba(255,255,255,.07); }
.nl-field input[aria-invalid="true"]{ border-color:#F0466E; }

/* Chevron du select, dessiné en CSS pour ne pas charger d'image. */
.nl-field select{
  padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--flid-text-muted) 50%),
                   linear-gradient(135deg,var(--flid-text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.nl-field select option{ background:#12121A; color:#fff; }

.nl-err{
  margin:0; font-family:var(--flid-font-body); font-size:.76rem; font-weight:400;
  line-height:1.5; color:#FF9DB4;
}
.nl-err[hidden]{ display:none; }

/* Consentement : case à cocher native agrandie, libellé cliquable entier. */
.nl-consent{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:4px; cursor:pointer;
}
.nl-consent input{
  flex:0 0 auto; width:19px; height:19px; margin:2px 0 0;
  accent-color:#F0466E; cursor:pointer;
}
.nl-consent span{
  font-family:var(--flid-font-body); font-size:.8rem; font-weight:300;
  line-height:1.6; color:var(--flid-text-muted);
}

.nl-submit{
  position:relative; margin-top:6px; padding:15px 26px; min-height:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--flid-font-body); font-size:.82rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--flid-ink); background:var(--flid-blanc);
  border:1px solid var(--flid-blanc); border-radius:var(--flid-radius-pill);
  cursor:pointer;
  transition:background var(--flid-dur-fast) var(--flid-ease), opacity var(--flid-dur-fast) var(--flid-ease);
}
.nl-submit:hover{ background:rgba(255,255,255,.86); }
.nl-submit[disabled]{ opacity:.55; cursor:progress; }

/* Témoin d'envoi : visible seulement pendant la requête. */
.nl-spin{ display:none; width:15px; height:15px; flex:none;
  border:2px solid rgba(0,0,0,.2); border-top-color:var(--flid-ink);
  border-radius:50%; animation:nl-spin .7s linear infinite; }
.nl-form[data-sending] .nl-spin{ display:block; }

@keyframes nl-spin{ to{ transform:rotate(360deg); } }

.nl-status{
  margin:4px 0 0; font-family:var(--flid-font-body); font-size:.84rem;
  font-weight:400; line-height:1.6; color:var(--flid-text-muted);
}
.nl-status[data-state="ok"]{ color:#7CE0A8; }
.nl-status[data-state="err"]{ color:#FF9DB4; }

/* Après succès, le formulaire s'efface et seul le message reste. */
.nl-form[data-done] .nl-field,
.nl-form[data-done] .nl-consent,
.nl-form[data-done] .nl-submit,
.nl-form[data-done] .nl-err{ display:none; }

/* ===== Lien « Gérer mes cookies » dans le footer ===== */
.f-mentions button{
  padding:0; font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* ===== Focus visible global sur les overlays ===== */
.lg-drawer :focus-visible,
.cs-banner :focus-visible{ outline:2px solid var(--flid-blanc); outline-offset:3px; border-radius:4px; }

/* ===== Verrouillage du scroll de fond ===== */
body.lg-locked{ overflow:hidden; }

/* ===== Responsive ===== */
@media (max-width:760px){
  .lg-drawer{ width:100vw; border-left:0; }
  .lg-head{ padding:18px 20px 14px; }
  .lg-tabs{ padding:14px 20px 0; }
  .lg-body{ padding:20px 20px 56px; }
  .cs-banner{ left:10px; right:10px; bottom:10px; padding:18px 18px 20px; border-radius:var(--flid-radius-md); }
  .cs-actions{ width:100%; }
  .cs-btn{ flex:1 1 140px; }
  .cs-link{ flex:1 1 100%; text-align:center; }
}

/* ===== Mouvement réduit ===== */
@media (prefers-reduced-motion:reduce){
  .lg-scrim,.lg-drawer,.cs-banner,.lg-close,.cs-sw i,.cs-sw i::after{ transition:none !important; }
  .nl-spin{ animation-duration:1.6s; }
  .lg-close:hover{ transform:none; }
}