/* ==========================================================================
   TOEIC Training — composants
   ========================================================================== */

/* --------------------------------------------------------- BOUTONS ------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  min-block-size:44px;                     /* plancher tactile */
  padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-base); font-weight:var(--fw-semibold);
  line-height:1; text-decoration:none; white-space:nowrap;
  border:var(--bw-thin) solid transparent;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:var(--t-colors), box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; transform:none;
}

.btn--primary{ background:var(--brand); color:var(--text-on-brand); }
.btn--primary:hover:not([disabled]){ background:var(--brand-hover); color:var(--text-on-brand); }
/* Sur un aplat de marque, l'anneau de focus doit contraster avec CE fond. */
.btn--primary:focus-visible{
  outline-color:var(--focus-ring-alt);
  box-shadow:0 0 0 6px var(--brand-ring);
}

.btn--accent{ background:var(--accent); color:var(--slate-950); }
.btn--accent:hover:not([disabled]){ background:var(--accent-hover); }

.btn--secondary{
  background:var(--surface); color:var(--text);
  border-color:var(--border-strong);
}
.btn--secondary:hover:not([disabled]){ background:var(--surface-hover); border-color:var(--brand-border); }

.btn--ghost{ background:transparent; color:var(--text-muted); }
.btn--ghost:hover:not([disabled]){ background:var(--surface-hover); color:var(--text); }

.btn--danger { background:var(--danger);  color:var(--text-on-brand); }
.btn--success{ background:var(--success); color:var(--text-on-brand); }

.btn--sm{ min-block-size:36px; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); }
.btn--lg{ min-block-size:52px; padding:var(--sp-4) var(--sp-8); font-size:var(--fs-lg); border-radius:var(--r-lg); }
.btn--block{ inline-size:100%; }
.btn--icon{ inline-size:44px; padding:0; }
.btn--icon.btn--sm{ inline-size:36px; }

/* ------------------------------------------------------------ CARTE ----- */
.card{
  background:var(--surface);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card__body{ padding:var(--sp-5); }
.card__title{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin:0 0 var(--sp-3); }

.card--interactive{ transition:var(--t-colors), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card--interactive:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand-border); }
/* L'anneau apparaît sur la carte entière quand un lien interne a le focus */
.card--interactive:has(a:focus-visible){
  outline:var(--focus-width) solid var(--focus-ring); outline-offset:var(--focus-offset);
}

/* ------------------------------------------------------------ BADGE ----- */
.badge{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:0.25em 0.7em;
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  line-height:1.5; border-radius:var(--r-full);
  border:var(--bw-hair) solid transparent;
  white-space:nowrap;
}
.badge--brand  { background:var(--brand-subtle);   color:var(--brand-text);   border-color:var(--brand-border); }
.badge--success{ background:var(--success-subtle); color:var(--success-text); border-color:var(--success-border); }
.badge--warning{ background:var(--warning-subtle); color:var(--warning-text); border-color:var(--warning-border); }
.badge--danger { background:var(--danger-subtle);  color:var(--danger-text);  border-color:var(--danger-border); }
.badge--accent { background:var(--accent-subtle);  color:var(--accent-text);  border-color:var(--accent-border); }
.badge--neutral{ background:var(--surface-2);      color:var(--text-muted);   border-color:var(--border); }

/* --------------------------------------------------------- CALLOUT ------ */
.callout{
  padding:var(--sp-4) var(--sp-5);
  border:var(--bw-hair) solid var(--border);
  border-inline-start:4px solid var(--border-strong);
  border-radius:var(--r-md);
  background:var(--surface-2);
  margin-block-end:var(--sp-4);
}
.callout__title{ font-weight:var(--fw-semibold); margin:0 0 var(--sp-2); }
.callout--info   { background:var(--info-subtle);    border-color:var(--info-border);    border-inline-start-color:var(--info); }
.callout--success{ background:var(--success-subtle); border-color:var(--success-border); border-inline-start-color:var(--success); }
.callout--warning{ background:var(--warning-subtle); border-color:var(--warning-border); border-inline-start-color:var(--warning); }
.callout--danger { background:var(--danger-subtle);  border-color:var(--danger-border);  border-inline-start-color:var(--danger); }
.callout--brand  { background:var(--brand-subtle);   border-color:var(--brand-border);   border-inline-start-color:var(--brand); }

/* -------------------------------------------------------- PROGRESS ------ */
.progress{
  block-size:8px; inline-size:100%;
  background:var(--surface-3);
  border-radius:var(--r-full); overflow:hidden;
}
.progress__bar{
  block-size:100%; inline-size:var(--value, 0%);
  background:var(--brand);
  border-radius:inherit;
  transition:inline-size var(--dur-slow) var(--ease-out);
}

/* ------------------------------------------------------------ STAT ------ */
.stat{
  padding:var(--sp-4);
  background:var(--surface);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-md);
  text-align:center;
}
.stat-num{
  display:block;
  font-size:var(--fs-2xl); font-weight:var(--fw-black);
  line-height:1; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.stat-label{ display:block; margin-block-start:var(--sp-2); font-size:var(--fs-xs); color:var(--text-muted); }

/* ---------------------------------------------------------- TABLEAU ----- */
.table{ inline-size:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table caption{ text-align:start; padding-block-end:var(--sp-3); color:var(--text-muted); font-size:var(--fs-sm); }
.table th,.table td{
  padding:var(--sp-3) var(--sp-4);
  text-align:start;
  border-block-end:var(--bw-hair) solid var(--border);
}
.table th{ font-weight:var(--fw-semibold); background:var(--surface-2); white-space:nowrap; }
.table tbody tr:hover{ background:var(--surface-hover); }

/* -------------------------------------------------------- SKELETON ------ */
.skeleton{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;
  animation:skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; background:var(--surface-2); } }

/* ------------------------------------------------------ EMPLACEMENT PUB - */
/* Hauteur réservée : sans elle, l'insertion AdSense provoque un CLS. */
.ad-slot{
  display:block; margin-block:var(--sp-6);
  min-block-size:var(--ad-min-h, 280px);
  text-align:center;
}
.ad-slot__label{
  display:block; margin-block-end:var(--sp-1);
  font-size:10px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--text-subtle);
}

/* ==========================================================================
   LE CŒUR DU PRODUIT : question, options, audio collant, verrouillage
   ========================================================================== */

/* ------------------------------------------------- GROUPE DE QUESTION --- */
.qgroup{ border:0; padding:0; margin:0 0 var(--sp-8); }
.qgroup__legend{
  padding:0; margin:0 0 var(--sp-4);
  font-size:var(--fs-lg); font-weight:var(--fw-semibold);
  line-height:var(--lh-snug); color:var(--text);
}
.qgroup__num{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:2em; padding:0.1em 0.5em; margin-inline-end:var(--sp-2);
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  color:var(--brand-text); background:var(--brand-subtle);
  border-radius:var(--r-sm);
}

/* ------------------------------------------------- OPTION DE RÉPONSE ---- */
/* Le <label> ENVELOPPE l'input : association implicite, aucune gestion
   d'id, et toute la ligne devient cliquable. C'est le correctif du pire
   défaut du site actuel (labels non associés, cible de 13 px). */
.opt{
  display:flex; align-items:center; gap:var(--sp-3);
  min-block-size:56px;
  padding:var(--sp-3) var(--sp-4);
  margin-block-end:var(--sp-2);
  background:var(--surface);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:var(--t-colors), box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}

/* L'input reste dans l'arbre d'accessibilité et dans l'ordre de tabulation.
   JAMAIS display:none, qui l'en sortirait. */
.opt__input{
  position:absolute; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.opt__key{
  flex:0 0 auto;
  display:grid; place-items:center;
  inline-size:32px; block-size:32px;
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  color:var(--text-muted); background:var(--surface-2);
  border-radius:var(--r-full);
  transition:var(--t-colors);
}
.opt__text{ flex:1 1 auto; line-height:var(--lh-snug); }
.opt__mark{
  flex:0 0 auto; inline-size:20px; block-size:20px;
  border:var(--bw-thick) solid var(--border-strong);
  border-radius:var(--r-full);
  transition:var(--t-colors), box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover:hover){
  .opt:hover:not(.is-locked){ border-color:var(--brand-border); background:var(--surface-hover); }
  .opt:hover:not(.is-locked) .opt__key{ background:var(--brand-subtle); color:var(--brand-text); }
}

.opt:has(.opt__input:checked){
  border-color:var(--brand);
  background:var(--brand-subtle);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.opt:has(.opt__input:checked) .opt__key{ background:var(--brand); color:var(--text-on-brand); }
.opt:has(.opt__input:checked) .opt__mark{ border-color:var(--brand); box-shadow:inset 0 0 0 5px var(--brand); }

/* L'anneau se pose sur le label, piloté par l'input masqué */
.opt:has(.opt__input:focus-visible){
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
}

/* --- ÉTAT VERROUILLÉ : l'audio est terminé, la réponse est figée --------- */
.opt.is-locked{
  cursor:default;
  background:var(--surface-2);
  border-color:var(--border);
  opacity:.72;
}
.opt.is-locked:has(.opt__input:checked){
  /* Le choix reste parfaitement lisible, seulement plus modifiable */
  opacity:1;
  background:var(--brand-subtle);
  border-color:var(--brand-border);
  box-shadow:none;
}
.opt.is-locked .opt__mark{ border-style:solid; }

/* --- ÉTATS DE CORRECTION (après soumission) ------------------------------ */
.opt.is-correct{ border-color:var(--success); background:var(--success-subtle); opacity:1; }
.opt.is-correct .opt__key{ background:var(--success); color:var(--text-on-brand); }
.opt.is-wrong  { border-color:var(--danger);  background:var(--danger-subtle);  opacity:1; }
.opt.is-wrong .opt__key{ background:var(--danger); color:var(--text-on-brand); }
/* Jamais la couleur seule (WCAG SC 1.4.1) : un glyphe double l'information */
.opt.is-correct .opt__mark::after{ content:'✓'; }
.opt.is-wrong   .opt__mark::after{ content:'✕'; }
.opt.is-correct .opt__mark, .opt.is-wrong .opt__mark{
  display:grid; place-items:center; border:0;
  color:var(--text-on-brand); font-size:12px; font-weight:var(--fw-bold);
}
.opt.is-correct .opt__mark{ background:var(--success); }
.opt.is-wrong   .opt__mark{ background:var(--danger); }

/* ==================================================== LECTEUR AUDIO ===== */
/* Barre persistante : reste visible pendant tout le défilement de la
   section, pour ne jamais perdre le contrôle de la lecture. */
.audiobar{
  position:sticky;
  inset-block-start:var(--header-h);
  z-index:var(--z-sticky);
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  padding-inline-end:max(var(--sp-4), env(safe-area-inset-right));
  margin-block-end:var(--sp-6);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.audiobar__play{
  flex:0 0 auto;
  display:grid; place-items:center;
  inline-size:44px; block-size:44px;
  border:0; border-radius:var(--r-full);
  background:var(--brand); color:var(--text-on-brand);
  cursor:pointer; transition:var(--t-colors);
}
.audiobar__play:hover{ background:var(--brand-hover); }
.audiobar__play[disabled]{ opacity:.45; cursor:not-allowed; }

.audiobar__main{ flex:1 1 auto; min-inline-size:0; }
.audiobar__label{
  display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  color:var(--text-muted); margin-block-end:var(--sp-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.audiobar__track{
  block-size:6px; inline-size:100%;
  background:var(--surface-3); border-radius:var(--r-full); overflow:hidden;
}
.audiobar__fill{
  block-size:100%; inline-size:var(--played, 0%);
  background:var(--brand); border-radius:inherit;
}
.audiobar__time{
  flex:0 0 auto;
  font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
  color:var(--text-muted); white-space:nowrap;
}
.audiobar__speed{
  flex:0 0 auto;
  padding:var(--sp-1) var(--sp-2);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  background:var(--surface-2); color:var(--text-muted);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-sm); cursor:pointer;
}
/* En mode examen : ni pause, ni vitesse, ni rembobinage. */
.audiobar--exam .audiobar__speed,
.audiobar--exam .audiobar__play{ display:none; }
.audiobar--playing .audiobar__fill{ background:var(--brand); }
.audiobar--ended .audiobar__fill{ background:var(--success); }

/* ------------------------------------------- BANDEAU DE VERROUILLAGE ---- */
.lockbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  margin-block-start:var(--sp-4);
  background:var(--surface-2);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-lg);
  animation:lockbar-in var(--dur-base) var(--ease-out);
}
.lockbar__text{ font-size:var(--fs-sm); color:var(--text-muted); margin:0; }
@keyframes lockbar-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .lockbar{ animation:none; } }

/* ------------------------------------------------------ CHRONOMÈTRE ----- */
.timer{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--text);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-full);
  transition:var(--t-colors);
}
.timer--warn{ background:var(--warning-subtle); color:var(--warning-text); border-color:var(--warning-border); }
.timer--crit{ background:var(--danger-subtle);  color:var(--danger-text);  border-color:var(--danger-border); }

/* ------------------------------------------------ PALETTE DE QUESTIONS -- */
.palette{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.palette__item{
  inline-size:40px; block-size:40px;
  display:grid; place-items:center;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
  background:var(--surface); color:var(--text-muted);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer;
  transition:var(--t-colors);
}
.palette__item:hover{ border-color:var(--brand-border); }
.palette__item.is-seen     { background:var(--surface-3); }
.palette__item.is-answered { background:var(--brand); color:var(--text-on-brand); border-color:var(--brand); }
.palette__item.is-flagged  { box-shadow:0 0 0 2px var(--accent); }
.palette__item.is-current  { outline:var(--focus-width) solid var(--focus-ring); outline-offset:1px; }

/* ==================================================== EN-TÊTE / NAV ===== */
.site-header{
  position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block-end:var(--bw-hair) solid var(--border);
}
.site-header__inner{
  display:flex; align-items:center; gap:var(--sp-4);
  block-size:var(--header-h);
}
.brand{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:var(--fw-bold); font-size:var(--fs-base);
  color:var(--text); text-decoration:none; white-space:nowrap;
  margin-inline-end:auto;
}
.brand img{ inline-size:28px; block-size:28px; border-radius:var(--r-sm); }

.nav__list{
  display:flex; align-items:center; gap:var(--sp-1);
  list-style:none; margin:0; padding:0;
}
.nav__link{
  display:inline-flex; align-items:center;
  min-block-size:40px; padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-muted); text-decoration:none;
  border-radius:var(--r-md);
  transition:var(--t-colors);
}
.nav__link:hover{ background:var(--surface-hover); color:var(--text); }
.nav__link[aria-current="page"]{ color:var(--brand-text); background:var(--brand-subtle); }

.nav--inline{ display:none; }
.nav__toggle{ display:inline-flex; }

/* Tiroir mobile via l'attribut HTML popover : couche supérieure, fermeture
   au clic extérieur et à Échap, gestion du focus — fournis par le
   navigateur, zéro ligne de JavaScript. */
.nav__drawer{
  position:fixed; inset:0 0 0 auto;
  inline-size:min(340px, 86vw); block-size:100dvh;
  margin:0; padding:var(--sp-6);
  padding-inline-end:max(var(--sp-6), env(safe-area-inset-right));
  border:0; border-inline-start:var(--bw-hair) solid var(--border);
  background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-xl);
  translate:100% 0;
  transition: translate var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete,
              display  var(--dur-base) allow-discrete;
}
.nav__drawer:popover-open{ translate:0 0; }
@starting-style{ .nav__drawer:popover-open{ translate:100% 0; } }

.nav__drawer::backdrop{
  background:var(--overlay);
  opacity:1;
  transition: opacity var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete,
              display var(--dur-base) allow-discrete;
}
@starting-style{ .nav__drawer:popover-open::backdrop{ opacity:0; } }

.nav__drawer .nav__list{ flex-direction:column; align-items:stretch; gap:var(--sp-1); margin-block-start:var(--sp-6); }
.nav__drawer .nav__link{ min-block-size:48px; font-size:var(--fs-base); }

@media (min-width:900px){
  .nav--inline{ display:block; }
  .nav__toggle{ display:none; }
  .nav__drawer{ display:none !important; }
}

/* Filet de sécurité : navigateurs sans support de popover */
@supports not selector(:popover-open){
  .nav__drawer{
    position:static; inline-size:auto; block-size:auto;
    translate:none; box-shadow:none; padding:0;
    border-inline-start:0;
  }
  .nav__drawer[hidden]{ display:none; }
}

/* ------------------------------------------------- SÉLECTEUR DE THÈME -- */
.theme-toggle{
  display:inline-flex; gap:2px; padding:2px;
  background:var(--surface-2);
  border:var(--bw-hair) solid var(--border);
  border-radius:var(--r-full);
}
.theme-toggle__opt{ position:relative; display:inline-grid; }
.theme-toggle__opt input{
  position:absolute; inline-size:1px; block-size:1px;
  clip-path:inset(50%); margin:-1px; border:0;
}
.theme-toggle__opt span{
  display:grid; place-items:center;
  inline-size:32px; block-size:32px;
  border-radius:var(--r-full);
  font-size:13px; color:var(--text-muted);
  cursor:pointer; transition:var(--t-colors);
}
.theme-toggle__opt:has(input:checked) span{ background:var(--surface); color:var(--brand-text); box-shadow:var(--shadow-xs); }
.theme-toggle__opt:has(input:focus-visible) span{ outline:var(--focus-width) solid var(--focus-ring); outline-offset:1px; }

/* --------------------------------------------------- SÉLECTEUR LANGUE -- */
.lang-switch{ display:inline-flex; gap:var(--sp-1); align-items:center; font-size:var(--fs-sm); }
.lang-switch__link{
  padding:var(--sp-1) var(--sp-2);
  color:var(--text-muted); text-decoration:none;
  border-radius:var(--r-sm); transition:var(--t-colors);
}
.lang-switch__link:hover{ background:var(--surface-hover); color:var(--text); }
.lang-switch__link[aria-current="true"]{ color:var(--brand-text); font-weight:var(--fw-semibold); }

/* ------------------------------------------------------------ HERO ----- */
.hero{ padding-block:var(--sp-section); }
.hero__title{ font-size:var(--fs-4xl); margin-block-end:var(--sp-5); }
.hero__lede{
  font-size:var(--fs-lg); color:var(--text-muted);
  max-inline-size:56ch; margin-block-end:var(--sp-8);
}

/* ----------------------------------------------------- FIL D'ARIANE ---- */
.breadcrumb{ font-size:var(--fs-sm); margin-block-end:var(--sp-6); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.breadcrumb li{ margin:0; display:flex; align-items:center; gap:var(--sp-2); color:var(--text-muted); }
.breadcrumb li + li::before{ content:'/'; color:var(--text-subtle); }

/* ---------------------------------------------------------- FOOTER ----- */
.site-footer{
  margin-block-start:var(--sp-section);
  padding-block:var(--sp-12) var(--sp-8);
  background:var(--surface);
  border-block-start:var(--bw-hair) solid var(--border);
  font-size:var(--fs-sm); color:var(--text-muted);
}
.site-footer a{ color:var(--text-muted); text-decoration:none; }
.site-footer a:hover{ color:var(--brand-text); text-decoration:underline; }
.site-footer__grid{
  display:grid; gap:var(--sp-8);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin-block-end:var(--sp-8);
}
.site-footer__title{ font-weight:var(--fw-semibold); color:var(--text); margin-block-end:var(--sp-3); font-size:var(--fs-sm); }
.site-footer__list{ list-style:none; margin:0; padding:0; }
.site-footer__list li{ margin-block-end:var(--sp-2); }
.site-footer__legal{
  padding-block-start:var(--sp-6);
  border-block-start:var(--bw-hair) solid var(--border);
  font-size:var(--fs-xs); color:var(--text-subtle);
}

/* ------------------------------------------------------- ACCORDÉON ----- */
/* <details> natif : le contenu reste dans le DOM, donc indexable —
   condition nécessaire pour un balisage FAQPage honnête. */
.accordion{ border:var(--bw-hair) solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.accordion + .accordion{ margin-block-start:var(--sp-3); }
.accordion > summary{
  padding:var(--sp-4) var(--sp-5);
  font-weight:var(--fw-semibold); cursor:pointer;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.accordion > summary::-webkit-details-marker{ display:none; }
.accordion > summary::after{
  content:'⌄'; font-size:1.2em; color:var(--text-muted);
  transition:transform var(--dur-fast) var(--ease-out);
}
.accordion[open] > summary::after{ transform:rotate(180deg); }
.accordion__body{ padding:0 var(--sp-5) var(--sp-5); color:var(--text-muted); }

/* ----------------------------------------------------------- TOAST ----- */
.toasts{
  position:fixed; inset-block-end:var(--sp-6); inset-inline:0;
  z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  pointer-events:none; padding-inline:var(--sp-4);
}
.toast{
  pointer-events:auto;
  padding:var(--sp-3) var(--sp-5);
  background:var(--slate-900); color:var(--slate-0);
  border-radius:var(--r-full); box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
}