/*
 * Bois de Faral — habillage CookieConsent v3 (story 4.5).
 *
 * Classes DOM réelles de la bibliothèque (.cm, .cm__btn, .pm, .pm__section,
 * .section__toggle, .toggle__icon, ...) — surchargées telles quelles, sans renommage,
 * conformément au mockup validé par Samuel le 2026-08-15
 * (design-system/refresh-2026-07/ui_kits/consentement-cookies/index.html), oracle
 * visuel de cette feuille.
 *
 * Gotcha de spécificité : cookieconsent.css (vendorisé, chargé en dépendance juste
 * avant cette feuille) qualifie presque toutes ses règles par l'ID #cc-main que la
 * bibliothèque pose sur son conteneur racine (ex. `#cc-main button{outline:revert}`,
 * spécificité 1-0-1). Une règle `.cm__btn{...}` seule (0-1-0) perdrait systématiquement
 * contre ce reset, ID oblige — donc CHAQUE sélecteur ci-dessous est lui aussi préfixé
 * par #cc-main pour au moins égaler cette spécificité.
 *
 * Deuxième gotcha, découvert en recette (code review 4.5, H2) : le DOM réel rendu par
 * la lib ne correspond PAS au markup simplifié du mockup statique — vendor pose son
 * propre padding/border sur .cm__btns, ses propres cartes .pm__section--toggle (pas
 * .pm__section, réservée à l'intro), un bouton-accordéon .pm__section-title qualifié
 * #cc-main .pm__section--toggle .pm__section-title (spécificité 1-2-0), et un curseur
 * d'interrupteur .toggle__icon-circle distinct de notre ::after. Chaque règle ci-dessous
 * cible le DOM mesuré (relevé dans scripts/tests/harnais-cookieconsent.html), pas la
 * structure du mockup.
 */

#cc-main {
  --cc-btn-h: 46px;
  font-family: var(--font-body);
}

/* ---------- Bannière (consent modal) ---------- */
#cc-main .cm {
  background: var(--paper-0);
  border: var(--border-w-bold) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  overflow: hidden;
}
/* `!important` requis : sous 640px le vendor force `.cm__body{padding:0!important}` et
   reporte le retrait horizontal sur chaque enfant (`.cm__title/.cm__desc/.cm__btns` en
   1.1rem !important). Comme on neutralise justement ces trois-là plus bas pour ne garder
   qu'une seule source de padding, la règle sans `!important` perdait et le contenu se
   retrouvait à 0,5px de la bordure sur toute la plage mobile — mesuré à 390/500/639 en
   recette du 2026-08-16, revenait à 24px dès 641. */
#cc-main .cm__body { padding: var(--space-5) var(--space-5) var(--space-4) !important; }

/* Le vendor pose son propre padding sur .cm__texts/.cm__title/.cm__desc (pensé pour un
   .cm__body SANS padding) : additionné au padding de .cm__body ci-dessus, ça double le
   retrait horizontal. On neutralise le padding vendor, .cm__body est la seule source. */
#cc-main .cm__texts { padding: 0; }
#cc-main .cm__title,
#cc-main .cm__desc {
  padding: 0 !important; /* vendor force padding-left/right en !important sous 640px */
}

/* Le vendor pose `#cc-main .cm__title + .cm__desc{margin-top:1.1em}` (spécificité 1-2-0) :
   la règle `#cc-main .cm__desc{margin:0 0 …}` ci-dessous (1-1-0) perdait, et 16,5px de vide
   parasite s'ajoutaient entre le titre et la description — 24,5px au lieu des 8px du ui_kit,
   aux 5 paliers (recette du 2026-08-16). Sélecteur composé pour égaler la spécificité. */
#cc-main .cm__title + .cm__desc { margin-top: 0; }

#cc-main .cm__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: var(--leading-tight);
}
#cc-main .cm__desc {
  font-size: var(--text-sm);
  color: var(--ink-700);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-5);
}
#cc-main .cm__desc a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Parité CNIL : refus et acceptation dans la même grille, mêmes dimensions,
   même graisse. Seule la couleur diffère.
   Le vendor pose sur .cm__btns un padding (1rem 1.3rem, jusqu'à !important sous 640px)
   et un border-top — hérités de sa mise en page par défaut, pas de la nôtre : neutralisés
   ici pour retrouver la largeur cible (200px) du mockup (code review 4.5, H2). */
#cc-main .cm__btns {
  padding: 0 !important;
  border-top: none !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#cc-main .cm__btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* Le vendor espace ses boutons et ses groupes à la marge (`.cm__btn+.cm__btn,
   .cm__btn-group+.cm__btn-group{margin-top:.375rem}`, passé en `margin:.375rem 0 0!important`
   sous 640px) — pensé pour un empilement flex sans `gap`. Chez nous le `gap` fait déjà le
   travail, et ces marges se voyaient : 6px absorbés par le stretch de la grille (boutons à 46
   contre 52, code review 4.5) et 6px de vide sous « Personnaliser mes choix », qui portaient
   le bloc de boutons à 102px au lieu de 96 (recette du 2026-08-16). Neutralisés des deux
   côtés — boutons ET groupes, cette seconde moitié manquait. */
#cc-main .cm__btn-group .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }
/* Second .cm__btn-group du DOM réel : même classe que le premier, pas de modificateur
   dédié (.cm__btn-group--link n'existe pas dans la lib — règle morte supprimée). Il ne
   contient qu'un seul bouton (« Personnaliser mes choix ») : ciblé par position, pas par
   une classe qui n'a jamais existé (code review 4.5, H2/bas). */
#cc-main .cm__btn-group:last-child { display: block; text-align: center; }

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  min-height: var(--cc-btn-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-w-bold) solid var(--ink-900);
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: var(--leading-snug);
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
/* --green-700 et non --green-600 : sur --paper-50 le vert 600 tombe à 4,57:1, trop juste pour
   un bouton de décision. Le 700 monte à 6,7:1, et c'est déjà le token de l'anneau de focus. */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] { background: var(--green-700); color: var(--paper-50); }
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] { background: var(--paper-0); color: var(--ink-900); }
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover { background: var(--green-800); }
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover { background: var(--paper-100); }
#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: transparent;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--weight-semibold);
  min-height: 38px;
  width: auto;
}
#cc-main .cm__btn[data-role="show"]:hover { color: var(--green-800); }
/* « Enregistrer mes choix » est l'action naturelle de qui vient de bouger les interrupteurs :
   un vrai bouton, de même rang que les deux autres, pas un lien en retrait. */
#cc-main .pm__btn[data-role="save"] { background: var(--paper-100); color: var(--ink-900); }
#cc-main .pm__btn[data-role="save"]:hover { background: var(--paper-200); }

/* Anneau de focus — tokens de la story 9.12, ne pas en recréer. #cc-main est toujours en
   dehors de .bdf-on-dark (la bannière/le panneau sont posés sur document.body) : la valeur
   claire --focus-ring suffit ici, la règle .bdf-on-dark *:focus-visible (primitives.css)
   gère déjà le lien de retrait en pied de page sombre sans rien ajouter ici. */
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main .pm__section-title:focus-visible,
#cc-main .section__toggle:focus-visible + .toggle__icon {
  outline: var(--border-w-bold) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Panneau de préférences (preferences modal) ---------- */
#cc-main .pm {
  background: var(--paper-0);
  border: var(--border-w-bold) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
}
#cc-main .pm__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4) !important; /* vendor force .9em sous 640px */
  border-bottom: var(--border-w) solid var(--paper-200);
}
#cc-main .pm__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--ink-900);
  margin: 0;
  flex: 1;
  line-height: var(--leading-tight);
}
#cc-main .pm__close-btn {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--paper-300);
  background: var(--paper-0);
  color: var(--ink-700);
  cursor: pointer;
  display: grid;
  place-items: center;
}
#cc-main .pm__close-btn:hover { background: var(--paper-100); }

/* Aucun plafond de hauteur ici. Le `min(340px, 46vh)` posé par la code review 4.5 (M6) pour
   garder le pied du panneau à portée était plus BAS que le contenu replié lui-même (349px) :
   à l'ouverture, le corps scrollait et tronquait la troisième catégorie de 9px (768/1024/1280)
   à 43px (390), pendant que le panneau gardait 53px de blanc en desktop et 350px à 390 — où il
   fait 1000px de haut pour 650px de contenu (recette du 2026-08-16). Le vendor borne déjà .pm
   (max-height 600px, et 100% du viewport sous 640px) et pose `flex: 1 1 0` sur ce corps : le
   pied reste à portée sans plafond de notre part, et le scroll ne survient que s'il le faut. */
#cc-main .pm__body {
  padding: var(--space-4) var(--space-5) !important; /* vendor force .9em sous 640px */
  overflow-y: auto;
}

/* Section d'intro — seule à conserver la classe .pm__section dans le DOM réel (la lib
   concatène les classes des 3 catégories en "pm__section--toggle pm__section--expandable",
   sans "pm__section" — code review 4.5, H2). */
#cc-main .pm__section {
  border: none;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-4);
  background: transparent;
}
/* `position: relative` : référentiel des deux éléments que le vendor sort du flux, le chevron
   (.pm__section-arrow, left:18px) et — depuis la recette du 2026-08-16 — l'interrupteur. */
#cc-main .pm__section-title-wrapper { display: flex; align-items: center; gap: var(--space-3); position: relative; }
#cc-main .pm__section-title-wrapper .pm__section-desc-wrapper,
#cc-main .pm__section-desc-wrapper { margin: 0; }
#cc-main .pm__section-desc {
  font-size: var(--text-sm);
  color: var(--ink-700);
  line-height: var(--leading-normal);
  margin: 10px 0 0;
}
#cc-main .pm__section:first-child .pm__section-desc { margin-top: 0; }
#cc-main .pm__section-desc code {
  font-family: ui-monospace, monospace;
  font-size: var(--text-xs);
  background: var(--paper-100);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Conteneur des 3 catégories repliables (non prévu par le mockup, présent dans le DOM réel). */
#cc-main .pm__section-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Chaque catégorie : .pm__section--toggle, PAS .pm__section (code review 4.5, H2) — sans
   quoi tout l'habillage retombe dans la palette stock de CookieConsent (--cc-bg, etc.). */
#cc-main .pm__section--toggle {
  border: var(--border-w) solid var(--paper-200);
  border-radius: var(--radius-md);
  background: var(--paper-0);
  overflow: hidden;
  margin-bottom: 0; /* le gap de .pm__section-toggles suffit */
}

/* Titre-accordéon : un <button>, replié par défaut (aria-expanded="false"). Le vendor le
   qualifie #cc-main .pm__section--toggle .pm__section-title (spécificité 1-2-0, supérieure
   à .pm__section-title seul en 1-1-0) et impose min-height:58px + fond + bordure — on
   reproduit le même sélecteur composé pour au moins égaler cette spécificité, et on
   réaffirme chaque propriété que le reset #cc-main button (all:initial) efface sinon
   (code review 4.5, H2). */
#cc-main .pm__section--toggle .pm__section-title {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  /* Gauche/droite en em, comme le vendor : ce sont les mêmes valeurs qu'il utilise pour
     réserver la place du chevron (.pm__section-arrow, left:18px/20px) et de l'interrupteur
     (.section__toggle-wrapper, right:18px/52px) — tous deux positionnés en absolute par
     rapport au wrapper, pas par ce padding, mais le texte ne doit pas venir les chevaucher.
     À 390px, ces deux réserves laissent 184px de texte utile pour un « Strictement
     nécessaires » qui en mesure 198 : le libellé passe sur deux lignes (58 → 63,1px de
     hauteur). Écart assumé, pas un défaut à re-soupçonner — le ui_kit ne montre pas le
     panneau en mobile, et les resserrer assez pour gagner ces 14px rendrait le calage
     dépendant de la longueur exacte du libellé le plus long. */
  padding: var(--space-3) 5.4em var(--space-3) 3.4em;
  background: var(--paper-0);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--ink-900);
  text-align: left;
  transition: background var(--dur-base) var(--ease-soft);
}
#cc-main .pm__section--toggle .pm__section-title:hover { background: var(--paper-100); }
#cc-main .pm__section--toggle.is-expanded .pm__section-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#cc-main .pm__section-arrow svg { color: var(--ink-700); }

/* Badge « Toujours actifs » du ui_kit. CookieConsent v3 ne génère AUCUN badge — sa classe
   .pm__badge existe dans sa feuille mais son JS ne la pose jamais (vérifié dans l'UMD à la
   recette du 2026-08-16) : la seule marque du verrouillage était l'interrupteur grisé. On le
   fabrique donc en ::after, accroché à l'état réel (`:has()` sur l'interrupteur désactivé) et
   non à la position de la section, pour qu'il suive si l'ordre des catégories change.
   Le titre étant en `justify-content: space-between`, il se pose à droite du libellé, comme
   au mockup. Sous 640px il est masqué : la lib masque déjà le sien, et à cette largeur le
   libellé n'a plus la place de partager sa ligne. */
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .pm__section-title::after {
  content: "Toujours actifs";
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green-800);
  background: var(--green-100);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  flex: none;
  margin-left: var(--space-3);
}
@media (max-width: 640px) {
  #cc-main .pm__section--toggle:has(.section__toggle:disabled) .pm__section-title::after {
    display: none;
  }
}

/* Interrupteur — réserve connue et assumée (§ Conception cible du cadrage) : 52×30 px,
   au-dessus du minimum WCAG 2.5.8 AA (24 px) mais sous le confort AAA (44 px). Dimensions
   reprises du mockup, non modifiées par cette story.
   La cible de POINTAGE réelle (.section__toggle-wrapper, le <label>) est ce qui reçoit le
   clic — le vendor la fixe à 50×23px, plus petite que le visuel (52×30) qu'elle porte : la
   zone cliquable faisait donc 23px de haut. Alignée ici sur 52×30, la cible = le visuel
   (code review 4.5, H2).
   `position: absolute` comme au ui_kit, et non `relative` : en flux, l'interrupteur venait
   S'AJOUTER au `padding-right: 5.4em` du titre-accordéon, lequel n'existe justement que pour
   lui réserver sa place. Double réservation — 86px de vide entre la fin du libellé et
   l'interrupteur à 1440, et à 390 seulement 120px de largeur de texte là où 206 étaient
   libres, ce qui faisait wrapper « Strictement nécessaires » sur deux lignes (63,1px au lieu
   de 58). Hors du flux, le titre reprend toute la largeur de la carte : le vide disparaît et
   l'accordéon redevient cliquable de bout en bout (recette du 2026-08-16). Pas de `top` :
   sans lui l'élément garde sa position statique, donc le centrage vertical du wrapper flex. */
#cc-main .section__toggle-wrapper {
  position: absolute;
  right: 18px;
  flex: none;
  display: inline-flex;
  width: 52px;
  height: 30px;
}
#cc-main .section__toggle { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
#cc-main .toggle__icon {
  width: 52px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--paper-300);
  border: var(--border-w) solid var(--ink-300);
  display: block;
  position: relative;
  transition: background var(--dur-base) var(--ease-soft), border-color var(--dur-base);
  pointer-events: none;
}
/* Curseur : celui de la lib (.toggle__icon-circle), pas un ::after du thème — la lib pose
   déjà son propre cursor animé et synchronisé avec :checked ; en ajouter un second créait
   deux ronds désynchronisés superposés (23px/translateX(27px) contre 22px/translateX(22px),
   code review 4.5, H2). On habille le curseur de la lib avec nos tokens et on ajuste sa
   position/transform pour le nouveau track 52×30 (le vendor le calibre pour son 50×23). */
#cc-main .toggle__icon-circle {
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
  background: var(--paper-0);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-bounce), background-color var(--dur-base) var(--ease-soft);
}
#cc-main .toggle__icon-on,
#cc-main .toggle__icon-off { display: none; } /* icônes coche/croix du vendor : pas au mockup */
#cc-main .section__toggle:checked ~ .toggle__icon { background: var(--green-500); border-color: var(--green-700); }
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(24px); }
#cc-main .section__toggle:disabled ~ .toggle__icon { opacity: 0.55; cursor: not-allowed; }
/* Cas « coché ET verrouillé » (la catégorie strictement nécessaire) : le vendor le traite à
   part, `#cc-main .section__toggle:checked:disabled ~ .toggle__icon{background:var(--cc-toggle-readonly-bg)}`,
   spécificité 1-4-0 contre 1-3-0 pour la règle verte ci-dessus. L'interrupteur s'affichait donc
   en #d5dee2, le gris bleuté stock de la bibliothèque — hors de la rampe de tokens, et différent
   des deux autres (recette du 2026-08-16). Même sélecteur pour égaler la spécificité ; l'opacité
   de 0,55 posée juste au-dessus suffit à dire « verrouillé ». */
#cc-main .section__toggle:checked:disabled ~ .toggle__icon { background: var(--green-500); }

/* `flipButtons` retiré (cc-config.js, recette du 2026-08-16) : plus de .pm--flip, donc plus
   de règle vendor `#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}` à
   battre à 1-3-0. Reste `#cc-main .pm__footer{display:flex;justify-content:space-between}`
   (1-1-0), que celle-ci bat par l'ordre de déclaration. */
#cc-main .pm__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5) !important; /* vendor force .9em sous 640px */
  border-top: var(--border-w) solid var(--paper-200);
}
/* Cible .pm__btn-group, pas des boutons enfants directs de .pm__footer : dans le DOM réel,
   .pm__footer contient deux .pm__btn-group (refuser+accepter, puis enregistrer seul) — un
   grid-column:1/-1 posé sur un bouton qui n'est pas un enfant direct de la grille est inerte
   (code review 4.5, H2). */
#cc-main .pm__footer > .pm__btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
}
#cc-main .pm__footer > .pm__btn-group:last-child { grid-template-columns: 1fr; }
/* Plus d'`order: -1` ici ni sur la bannière : il déplaçait le rendu sans toucher au DOM, donc
   la tabulation proposait l'acceptation avant le refus, à rebours de l'écran (WCAG 2.4.3 —
   défaut que le ui_kit partageait, corrigé des deux côtés). L'ordre est désormais posé dans le
   DOM par `refusAvantAcceptation()` (cc-config.js), et le mockup l'a été aussi.
   Le vendor espace ses groupes à la marge, comme sur la bannière — neutralisé de même. */
#cc-main .pm__btn-group + .pm__btn-group,
#cc-main .pm__btn + .pm__btn { margin: 0 !important; }

/* ---------- Accessibilité transverse ---------- */
/* Les utilisateurs sensibles au mouvement doivent pouvoir traverser cette bannière pour
   exercer leurs droits : aucun prefers-reduced-motion n'existait dans tout le thème avant
   cette story (code review 4.5, bas). Le curseur d'interrupteur (--ease-bounce) est
   l'animation la plus marquée du composant. */
@media (prefers-reduced-motion: reduce) {
  #cc-main .cm__btn,
  #cc-main .pm__btn,
  #cc-main .pm__section--toggle .pm__section-title,
  #cc-main .toggle__icon,
  #cc-main .toggle__icon-circle {
    transition: none;
  }
}

/* ---------- Lien de retrait, pied de page ---------- */
/* Bouton nu remis au style du lien voisin (Mentions légales / Politique de confidentialité) :
   le pied de page porte déjà .bdf-on-dark, qui bascule l'anneau de focus sur
   --focus-ring-on-dark (primitives.css) — rien à ajouter ici pour AC8. */
.bdf-footer-bottom .cc-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  /* Les deux liens voisins (Mentions légales / Politique de confidentialité) héritent du
     preset WordPress "small" (0.875rem) ; --text-sm vaut 0.9375rem — 1px d'écart visible
     sur trois éléments alignés dans le même paragraphe (code review 4.5, bas). On réutilise
     le preset lui-même plutôt qu'une valeur dupliquée en dur. */
  font-size: var(--wp--preset--font-size--small);
  color: var(--paper-50);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bdf-footer-bottom .cc-link:hover { color: var(--paper-0); }