/* =========================================================
   Rivmont — le panneau de consentement
   Sur les jetons et les boutons du site, rien d'autre : le noir, le
   filet, le crème, les deux familles, `.btn` / `.btn--ghost`.
   Une bande en bas de l'écran — pas une carte, pas un mur : la page
   reste entière et utilisable derrière. « Tout refuser » et « Tout
   accepter » sont le même bouton, au même poids ; « Personnaliser »
   est le bouton fantôme. Sur téléphone, les boutons s'empilent en
   pleine largeur et la bande défile si elle dépasse l'écran.
   ========================================================= */
.consent{
  position:fixed;
  inset:auto 0 0 0;
  z-index:var(--z-modal);
  background:var(--bg);
  color:var(--ink);
  border-top:1px solid var(--line);
  /* Le bord bas des téléphones à encoche. */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.consent[hidden]{display:none}
.consent__inner{
  max-height:min(88svh, 100vh);
  overflow:auto;
  padding-block:var(--s-md);
}
.consent__level{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--s-md) var(--s-lg);
  align-items:end;
}
.consent__level[hidden]{display:none}
.consent__copy{max-width:60ch}
.consent__eyebrow{
  display:flex;align-items:center;gap:var(--s-2xs);
  margin:0 0 var(--s-xs);
}
.consent__title{
  margin:0 0 var(--s-2xs);
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px, 1.8vw, 30px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.012em;
  color:var(--ink);
}
.consent__title:focus{outline:none}
.consent__text{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-soft);
}
.consent__more{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.2em;
  white-space:nowrap;
}
.consent__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-2xs);
  justify-content:flex-end;
}
.consent__btn{white-space:nowrap}

/* ---------- les préférences ---------- */
.consent__cats{
  display:grid;
  gap:var(--s-xs);
  margin-top:var(--s-xs);
  border-top:1px solid var(--line-soft);
}
.consent__cat{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--s-sm);
  align-items:center;
  padding-block:var(--s-xs);
  border-bottom:1px solid var(--line-soft);
}
.consent__cat-name{
  display:block;
  font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
}
.consent__cat-desc{
  margin:4px 0 0;
  font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink-soft);
}
/* L'interrupteur : la case native, invisible mais présente pour le
   clavier et le lecteur d'écran (`role="switch"`), et un rail dessiné
   sur les jetons — le bleu quand c'est accordé, le filet sinon. */
.consent__toggle{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.consent__switch{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;opacity:0;
  cursor:pointer;
}
.consent__toggle i{
  position:absolute;inset:0;
  border:1px solid var(--line);
  border-radius:13px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  pointer-events:none;
}
.consent__toggle i::after{
  content:"";
  position:absolute;top:4px;left:4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--ink-soft);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.consent__switch:checked + i{background:var(--accent);border-color:var(--accent)}
.consent__switch:checked + i::after{transform:translateX(20px);background:var(--accent-ink)}
.consent__switch:focus-visible + i{outline:2px solid var(--accent-text);outline-offset:3px}
.consent__toggle.is-locked i{border-style:dashed}
.consent__toggle.is-locked .consent__switch{cursor:not-allowed}
.consent__toggle.is-locked .consent__switch:checked + i{background:var(--faint);border-color:var(--faint)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .consent__level{grid-template-columns:1fr;align-items:start}
  .consent__actions{justify-content:flex-start}
}
@media (max-width:760px){
  .consent__inner{padding-block:var(--s-sm)}
  .consent__actions{display:grid;grid-template-columns:1fr;gap:10px}
  .consent__btn{width:100%}
  .consent__cat{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-xs)}
}
@media (prefers-reduced-motion:reduce){
  .consent__toggle i,.consent__toggle i::after{transition:none}
}