/*
 * Bandeau de consentement cookies -- 2026-09-22, demande de Lorenzo suite à
 * l'audit RGPD/APD (voir TODO.md, "Bandeau de consentement cookies").
 *
 * Fichier autonome (pas de dépendance à la <style> propre à chaque page) :
 * injecté par une edge function sur TOUTE page HTML du site (même celles
 * sans en-tête ni pied de page partagés -- 404.html, admin.html,
 * reset-password.html, annulation.html, partenaires.html,
 * contact-partenaires.html, pro/hebergements.html), voir
 * netlify/edge-functions/cookie-consent-inject.js. Utilise UNIQUEMENT les
 * quatre variables de charte confirmées déclarées dans le :root de TOUTES
 * les pages réelles du site (--ink/--ink-soft/--line/--sand, vérifié par
 * grep) -- jamais --cream (absente de admin.html) ni --title-grad/--gold-1
 * sur les boutons Accepter/Refuser (voir plus bas, "AUCUN DÉGRADÉ").
 * Valeur de repli (var(--x, #hex)) posée sur chacune au cas où une page
 * future omettrait l'une d'elles.
 *
 * AUCUN DÉGRADÉ NI COULEUR DE MARQUE SUR "TOUT ACCEPTER"/"TOUT REFUSER" --
 * seule exception à la charte "dégradé partout" (validée par Lorenzo,
 * 2026-09-22) : l'Autorité de protection des données belge cite
 * explicitement "l'incitation par l'utilisation de la couleur" comme un
 * procédé de "deceptive design" interdit (check-list cookies, note 5 :
 * "Bon exemple : les boutons 'Tout refuser' et 'Tout accepter' sont
 * affichés de la même façon"). Les deux boutons partagent donc EXACTEMENT
 * la même classe, la même couleur pleine (--ink), la même taille -- rien ne
 * doit orienter le choix. Le dégradé de marque reste utilisé PARTOUT
 * ailleurs sur ce bandeau (lien vers la politique de cookies, bordure du
 * panneau, badge "toujours actif" restent neutres eux aussi par cohérence
 * avec les deux boutons, mais rien ne l'exige légalement pour eux).
 */

#sxCookieBar, #sxCookiePanel, .sx-cookie-fab { font-family:'Work Sans', Arial, sans-serif; }

/* ---------- niveau 1 : bandeau bas d'écran (pas un plein écran, pas de
   cookie wall -- le site reste utilisable en dessous, conforme à la
   check-list APD "je n'utilise pas de cookie walls"). ---------- */
/* z-index 9998 (9999 jusqu'au 2026-09-23) : le panneau du chat doit pouvoir
   passer devant le bandeau quand un téléphone couché manque de place
   (chat-widget.js, 9999), sans dépendre de l'ordre des éléments dans la
   page ; le panneau des préférences (10000) reste devant les deux, et le
   bouton "Cookies" (9997) sous le bandeau, comme avant. */
#sxCookieBar{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  background:#fff; border-top:1px solid var(--line, #E7DDCE);
  box-shadow:0 -8px 30px rgba(43,36,32,0.12);
  padding:18px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
/* Zones de sécurité (2026-09-23, voir assets/css/fonts.css) : bandeau fixé
   sur toute la largeur et en bas de l'écran, la marge de body ne le touche
   pas -- son texte et ses boutons s'écartent eux-mêmes de l'encoche en
   paysage et de la barre d'accueil en bas (bouton "Paramètres" mesuré
   dans sa zone en portrait). 0 partout ailleurs : rien ne change. */
#sxCookieBar{ padding-left:calc(24px + var(--sal, 0px)); padding-right:calc(24px + var(--sar, 0px)); padding-bottom:calc(18px + var(--sab, 0px)); }
#sxCookieBar[hidden]{ display:none; }
#sxCookieBar .sx-cookie-text{
  flex:1 1 340px; min-width:0; font-size:.85rem; line-height:1.55;
  color:var(--ink-soft, #6B5F54); margin:0;
}
#sxCookieBar .sx-cookie-text a{ color:var(--ink, #2B2420); font-weight:600; text-decoration:underline; }
.sx-cookie-actions{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; flex-shrink:0; }

/* Boutons "Tout accepter"/"Tout refuser" : UNE SEULE classe, styles
   identiques -- voir en-tête du fichier. */
.sx-cookie-btn{
  font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  border:none; border-radius:999px; padding:12px 22px; white-space:nowrap;
  background:var(--ink, #2B2420); color:#fff; min-height:44px;
}
.sx-cookie-btn:hover{ background:var(--ink-soft, #6B5F54); }
.sx-cookie-link{
  font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  background:none; border:none; color:var(--ink-soft, #6B5F54);
  text-decoration:underline; padding:12px 4px; min-height:44px;
}
.sx-cookie-btn:focus-visible, .sx-cookie-link:focus-visible, .sx-cookie-panel-close:focus-visible, .sx-cookie-fab:focus-visible{
  outline:2px solid var(--ink, #2B2420); outline-offset:2px;
}

/* ---------- niveau 2 : panneau des préférences (granularité par
   finalité -- une seule finalité non essentielle existe aujourd'hui). Même
   patron visuel que les panneaux déjà établis sur le site (fenêtre de
   connexion, menu langue/devise mobile) : plein écran en dessous de 768px,
   fenêtre centrée au-dessus -- sans dépendre de leurs classes CSS
   (partielles, non chargées sur toutes les pages, voir en-tête). ---------- */
#sxCookiePanel{
  position:fixed; inset:0; z-index:10000; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(20,15,12,0.55);
}
#sxCookiePanel[hidden]{ display:none; }
/* Zones de sécurité (2026-09-23, voir assets/css/fonts.css) : le voile reste
   plein écran, la fenêtre s'écarte de l'encoche (paysage) et des barres
   d'état/d'accueil (portrait). 0 partout ailleurs : rendu inchangé. */
#sxCookiePanel{ padding:calc(20px + var(--sat, 0px)) calc(20px + var(--sar, 0px)) calc(20px + var(--sab, 0px)) calc(20px + var(--sal, 0px)); }
.sx-cookie-panel-inner{
  background:#fff; border-radius:20px; width:480px; max-width:100%;
  max-height:86vh; overflow-y:auto; padding:32px 32px 28px; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,0.3);
}
.sx-cookie-panel-close{
  position:absolute; top:18px; right:18px; width:40px; height:40px;
  border-radius:50%; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft, #6B5F54); font-size:1.15rem;
}
.sx-cookie-panel-close:hover{ background:var(--sand, #F1E9DC); }
#sxCookiePanel h2{
  font-family:'Source Serif 4', serif; font-weight:500; font-size:1.3rem;
  color:var(--ink, #2B2420); margin:0 0 12px; padding-right:36px;
}
/* Back-office (admin.html) : décision de Lorenzo « ne touche à rien » -- le titre du
   panneau y garde Fraunces, comme les titres de la page (2026-09-24, titres du site
   passés en Source Serif 4). admin.html est la seule page qui ne charge pas
   assets/css/typographie.css. */
html:not(:has(link[href="/assets/css/typographie.css"])) #sxCookiePanel h2{font-family:'Fraunces', serif;}
.sx-cookie-panel-intro{ font-size:.85rem; line-height:1.6; color:var(--ink-soft, #6B5F54); margin:0 0 22px; }
.sx-cookie-category{ border-top:1px solid var(--line, #E7DDCE); padding:16px 0; }
.sx-cookie-category:first-of-type{ border-top:none; padding-top:0; }
.sx-cookie-category-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.sx-cookie-category-head > span:first-child{ font-size:.92rem; font-weight:600; color:var(--ink, #2B2420); }
.sx-cookie-category p{ font-size:.8rem; line-height:1.55; color:var(--ink-soft, #6B5F54); margin:0; }
.sx-cookie-badge{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink-soft, #6B5F54); background:var(--sand, #F1E9DC);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}

/* Bascule (une seule finalité aujourd'hui : mesure technique des erreurs).
   Éteinte par défaut -- jamais de case précochée, la check-list APD
   l'interdit explicitement. Le doré de la charte (--gold-1) reste
   acceptable ICI : c'est un simple indicateur d'état marche/arrêt d'un
   réglage, pas un choix accepter/refuser mis en scène -- rien de comparable
   à la règle "aucun dégradé" ci-dessus, qui ne vise que les deux boutons
   d'action. */
.sx-cookie-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.sx-cookie-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.sx-cookie-toggle-track{
  position:relative; flex-shrink:0; width:42px; height:24px; border-radius:999px;
  background:var(--line, #E7DDCE); transition:background .15s ease;
}
.sx-cookie-toggle-track::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(43,36,32,0.3);
  transition:transform .15s ease;
}
.sx-cookie-toggle input:checked + .sx-cookie-toggle-track{ background:var(--gold-1, #A9833F); }
.sx-cookie-toggle input:checked + .sx-cookie-toggle-track::after{ transform:translateX(18px); }
.sx-cookie-toggle input:focus-visible + .sx-cookie-toggle-track{ outline:2px solid var(--ink, #2B2420); outline-offset:2px; }

.sx-cookie-panel-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.sx-cookie-panel-actions .sx-cookie-btn{ flex:1 1 auto; text-align:center; }
/* "Enregistrer mes choix" : seul bouton qui peut se distinguer visuellement
   des deux autres -- ce n'est pas la paire accepter/refuser visée par la
   règle APD, c'est une troisième option (choix granulaire), toujours
   présente dans les bandeaux conformes (CNIL, EDPB). [Jusqu'au 2026-09-24,
   voir juste dessous :] Reste sans dégradé, par cohérence avec le reste du
   bandeau. */
/* [2026-09-24] Passé au dégradé de marque, au repos ET au survol, comme
   tous les boutons du site (règle de Lorenzo du 2026-09-20 : tout le
   terracotta remplacé par le dégradé, sans exception). Avant : or uni au
   repos (choix de Claude, jamais validé) et terracotta UNI au survol --
   le seul bouton du site qui virait au terracotta uni, à la souris donc
   sur ordinateur seulement (audit du 2026-09-24, voir TODO.md). La règle
   :hover reste nécessaire : sans elle, ".sx-cookie-btn:hover" (plus
   spécifique : une classe + :hover, contre une seule classe) le passerait
   en --ink-soft. Libellé blanc : même contraste que les autres boutons en
   dégradé du site (fin du dégradé pâle, point connu accepté par Lorenzo le
   2026-09-20). Back-office (admin.html,
   seule page sans typographie.css) : rendu d'avant gardé, décision de
   Lorenzo "ne touche à rien". */
.sx-cookie-btn--save, .sx-cookie-btn--save:hover{ background:var(--title-grad, linear-gradient(95deg, #C15A34 0%, #A9833F 55%, #E8C36A 100%)); }
html:not(:has(link[href="/assets/css/typographie.css"])) .sx-cookie-btn--save{ background:var(--gold-1, #A9833F); }
html:not(:has(link[href="/assets/css/typographie.css"])) .sx-cookie-btn--save:hover{ background:var(--terracotta, #C15A34); }

/* ---------- lien de repli (2026-09-22) : posé automatiquement UNIQUEMENT
   sur les pages sans pied de page partagé (voir en-tête du fichier) --
   ailleurs, le script relie le lien "Gérer les cookies" déjà présent dans
   partials/footer-public.html / footer-tunnel.html, aucun doublon. ---------- */
/* Coin bas-DROIT (et non gauche) : défaut réel trouvé le 2026-09-22 en
   corrigeant le recouvrement bandeau/bulle de chat (voir TODO.md) --
   reset-password.html charge à la fois ce repli (aucun pied de page
   partagé) ET chat-widget.js, dont la bulle occupe en permanence le coin
   bas-gauche (left:24px; bottom:24px) -- les deux se chevauchaient en
   continu, sans rapport avec l'état du bandeau. Aucune coordination JS
   nécessaire : les deux coins opposés ne peuvent jamais se toucher, sur
   aucune page, présente ou future. */
.sx-cookie-fab{
  position:fixed; right:16px; bottom:16px; z-index:9997;
  background:var(--ink, #2B2420); color:#fff; border:none; border-radius:999px;
  font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  padding:10px 16px; box-shadow:0 6px 20px rgba(43,36,32,0.25);
}
/* Même raison que le bandeau ci-dessus : bouton fixé au coin bas-droit (encoche en paysage, barre d'accueil en bas). */
.sx-cookie-fab{ right:calc(16px + var(--sar, 0px)); bottom:calc(16px + var(--sab, 0px)); }
.sx-cookie-fab:hover{ background:var(--ink-soft, #6B5F54); }

/* ---------- mobile (<768px, palier déjà utilisé par le reste du site --
   voir partials/footer-public.html) : bandeau empilé, panneau plein
   écran. ---------- */
@media (max-width:767px){
  #sxCookieBar{ padding:16px; flex-direction:column; align-items:stretch; gap:14px; }
  #sxCookieBar{ padding-left:calc(16px + var(--sal, 0px)); padding-right:calc(16px + var(--sar, 0px)); padding-bottom:calc(16px + var(--sab, 0px)); }
  /* DÉFAUT CORRIGÉ le 2026-09-23 (trouvé en mesurant le paysage) : en
     colonne, le flex:1 1 340px du texte -- pensé pour sa LARGEUR sur une
     rangée -- s'appliquait à sa HAUTEUR : bloc de texte de 340px quelle que
     soit sa longueur (105px réels à 390px, 63px en paysage), bandeau de
     485px de haut (mesuré : 250px une fois corrigé en portrait, 208px en
     paysage) -- plus haut que l'écran d'un téléphone couché (375px, iPhone
     SE), début du texte alors hors écran. Hauteur naturelle du texte, et
     bandeau borné à l'écran par sécurité (défile au-delà). */
  #sxCookieBar .sx-cookie-text{ flex:0 0 auto; }
  #sxCookieBar{ max-height:calc(100vh - var(--sat, 0px)); overflow-y:auto; }
  .sx-cookie-actions{ justify-content:space-between; }
  .sx-cookie-actions .sx-cookie-btn{ flex:1 1 0; text-align:center; }
  .sx-cookie-actions .sx-cookie-link{ flex:0 0 100%; text-align:center; order:3; }
  #sxCookiePanel{ padding:0; align-items:stretch; }
  .sx-cookie-panel-inner{
    width:100%; max-width:none; height:100%; max-height:none;
    border-radius:0; padding:24px 20px calc(24px + var(--sab, 0px));
  }
  /* Plein écran : texte et croix s'écartent eux-mêmes des zones de sécurité
     -- en portrait sur iPhone à encoche, la croix (18px du haut) passait
     sous la barre d'état, où Safari ne transmet pas le toucher à la page ;
     en paysage « Affichage agrandi » (moins de 768px de large), texte à
     20px du bord, sous l'encoche. Relevé par la relecture du 2026-09-23. */
  .sx-cookie-panel-inner{ padding:calc(24px + var(--sat, 0px)) calc(20px + var(--sar, 0px)) calc(24px + var(--sab, 0px)) calc(20px + var(--sal, 0px)); }
  .sx-cookie-panel-close{ top:calc(18px + var(--sat, 0px)); right:calc(18px + var(--sar, 0px)); }
}