/* ==========================================================================
   Le bandeau de consentement.

   Deux règles de droit se lisent directement dans ce fichier :
   — « Refuser » a exactement le même poids visuel qu'« Accepter » (même
     taille, même contraste, même rang). Un refus caché en lien gris est
     précisément ce qui fait tomber les décisions.
   — Rien n'est pré-coché. Les interrupteurs partent tous à zéro, sauf les
     cookies strictement nécessaires, qui ne sont pas un choix.
   ========================================================================== */

.cmp{
  position:fixed;inset:auto 0 0 0;z-index:120;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -18px 48px rgba(12,16,18,.14);
  transform:translateY(101%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.cmp[data-ouvert]{transform:none}
@media (prefers-reduced-motion:reduce){.cmp{transition:none}}

.cmp__inner{
  max-width:1200px;margin:0 auto;
  padding:clamp(20px,3vw,28px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,40px);align-items:center;
}
.cmp__txt h2{font-size:17px;letter-spacing:-.015em;margin-bottom:7px}
.cmp__txt p{font-size:14px;color:var(--muted);max-width:64ch}
.cmp__txt a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}

/* Les deux boutons de tête sont jumeaux : même classe, même dimension.
   Seule la couleur les distingue, et le refus reste parfaitement lisible. */
.cmp__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cmp__actions .btn{min-width:148px}
.cmp__lien{
  background:none;border:0;padding:15px 6px;font:inherit;font-size:13.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.cmp__lien:hover{color:var(--ink)}
.cmp__lien:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}

/* ---------- le détail par finalité ---------- */
.cmp__panel{
  display:none;border-top:1px solid var(--line-soft);
  background:var(--bg);
}
.cmp[data-detail] .cmp__panel{display:block}
.cmp__panel .wrap{padding-top:26px;padding-bottom:26px}
.cmp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}

.cmp__cat{
  background:var(--surface);border:1px solid var(--line);
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
}
.cmp__cat h3{font-size:14.5px;margin-bottom:5px}
.cmp__cat p{font-size:12.8px;color:var(--muted);line-height:1.5}
.cmp__cat code{font-family:var(--mono);font-size:11.5px;color:var(--accent-txt)}

/* interrupteur — un vrai <input type=checkbox> dessous, jamais un faux */
.cmp__sw{position:relative;flex:none;margin-top:2px}
.cmp__sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.cmp__sw span{
  display:block;width:42px;height:24px;background:var(--line);
  border:1px solid transparent;transition:background .18s ease;
}
.cmp__sw span::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  background:var(--surface);transition:transform .18s ease;
}
.cmp__sw input:checked + span{background:var(--accent)}
.cmp__sw input:checked + span::after{transform:translateX(18px)}
.cmp__sw input:focus-visible + span{outline:2.5px solid var(--ink);outline-offset:3px}
.cmp__sw input:disabled + span{background:var(--accent-dim);cursor:not-allowed}
.cmp__sw input:disabled + span::after{transform:translateX(18px);background:var(--accent-txt);opacity:.45}

.cmp__panel .btn-row{margin-top:18px}
.cmp__note{font-size:12px;color:var(--muted);margin-top:14px}

@media (max-width:900px){
  .cmp__inner{grid-template-columns:1fr;gap:18px}
  .cmp__actions .btn{flex:1 1 auto;min-width:0}
}

/* Le rappel en pied de page : le choix doit se retirer aussi
   facilement qu'il se donne, sinon il n'est pas révocable. */
.foot-bar .cmp__rappel{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:none;cursor:pointer;
}
.foot-bar .cmp__rappel:hover{text-decoration:underline}