/* Habillage SOMBRE de la CMP Silktide v2.0.0, lot M1 (2026-09-25).
   PARTI PRIS, EN ATTENTE FRED : aucun noeud de bandeau de consentement dans la page Website v2.
   Le fichier vendor n'est pas touché : cette feuille le surcharge, chargée comme lui (préchargée puis
   basculée, jamais bloquante), après lui. Seuls servent les variables et les sélecteurs PRÉSENTS dans
   silktide-consent-manager.min.css (relevé M1, 9 variables, 78 règles).
   1. Variables exposées, sur `html #stcm-wrapper` : un cran de spécificité au-dessus de l'habillage
      inline du layout (`#stcm-wrapper`), quelle que soit la place que React donne aux balises.
   2. Sélecteurs, seulement pour ce que les variables ne couvrent pas : trait de séparation du fond de
      page, forme et survol des boutons, trait du bouton de réouverture. Aucun `!important`.
   Tokens du site uniquement ; aucune fonte ni graisse nouvelle (Figtree, déjà chargée, variable).
   Survol et focus des boutons : la grammaire du survol (300 ms `--ease-survol`, `:focus-visible` =
   survol), état « on » du Button Primary du site (#FED548 à 0,6), par l'OPACITÉ d'un calque de fond.
   Accepter et Refuser portent la même classe dans le vendor (`stcm-button stcm-button-primary`) : même
   taille, même poids, même contraste, même niveau d'accès. Rien ici ne les distingue. */

html #stcm-wrapper {
  --fontFamily: var(--font-sans);
  --primaryColor: var(--color-accent);
  --backgroundColor: var(--color-fond-carte);
  --textColor: var(--color-texte);
  --backdropBackgroundColor: color-mix(in srgb, var(--color-fond) 70%, transparent);
  --iconColor: var(--color-fond-carte);
  --iconBackgroundColor: var(--color-accent);
}

/* Bandeau et modale : distincts du fond de page (#0B0E11 sous le voile) par un trait séparateur. */
#stcm-banner,
#stcm-modal {
  border: 1px solid var(--color-separateur);
  border-radius: var(--radius-nav);
}

/* Lot M2 : le BANDEAU reçoit le focus à son ouverture (`tabindex="-1"`, `boot()` d'app/layout.tsx),
   jamais un bouton. Le vendor l'arrondit alors à 50 % (`#stcm-banner:focus{border-radius:50%}`,
   spécificité 1,1,0) : forme gardée ici, un cran au-dessus (2,1,0). Aucun anneau sur le conteneur : il
   n'est pas une commande (hors de l'ordre de tabulation) ; les boutons gardent le leur au focus
   clavier. */
#stcm-wrapper #stcm-banner:focus {
  border-radius: var(--radius-nav);
  outline: none;
}

/* Bouton de réouverture : même trait. */
#stcm-icon {
  border: 1px solid var(--color-separateur);
}

/* Boutons d'action (Accepter, Refuser, Enregistrer, Refuser de la modale) : forme du Button Primary du
   site (angles vifs), fond porté par un calque dont seule l'opacité change au survol et au focus. */
#stcm-wrapper .stcm-button {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
}
#stcm-wrapper .stcm-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background-color: var(--color-accent);
  transition: opacity var(--duree-survol) var(--ease-survol);
}
#stcm-wrapper .stcm-button-primary:hover {
  background-color: transparent;
  color: var(--backgroundColor);
}
#stcm-wrapper .stcm-button:focus-visible::before {
  opacity: 0.6;
}
@media (hover: hover) {
  #stcm-wrapper .stcm-button:hover::before {
    opacity: 0.6;
  }
}

/* Lot C1a (décision 5, n° 144) : le titre du panneau est un h2 (un seul h1 par page), par la vendorisation (le gabarit du vendor
   écrivait `<h1>` en dur). La seule règle du vendor sur ce titre visait `#stcm-modal h1` : elle est reprise ici, valeur pour
   valeur, sur le h2 (même rendu). */
#stcm-wrapper #stcm-modal header h2 {
  font-family: var(--fontFamily);
  color: var(--textColor);
  font-size: 24px;
  font-weight: 500;
  margin: 0;
}

/* Lot C1a (décision 3) : liste détaillée des traceurs sous la description de chaque catégorie (`lib/cmp-init.ts`, `listeTraceurs`).
   Corps de 14 / 20, nom en graisse 600 (Figtree variable, déjà chargée), sans puce (`role="list"` garde la sémantique). */
#stcm-wrapper .tar-traceurs,
#stcm-wrapper .tar-traceurs-vide {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
}
#stcm-wrapper .tar-traceurs li {
  margin: 8px 0 0;
}
/* La mention « aucun traceur » est un `p` : le vendor met tout `#stcm-modal p` à 0,6 d'opacité (description du panneau) ; elle
   reprend celle des lignes de la liste. */
#stcm-wrapper .tar-traceurs-vide {
  opacity: 1;
}
#stcm-wrapper .tar-traceur-nom {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Lot V2, reprise (décision 4, fenêtre allégée) : sous la phrase de chaque catégorie, ses ACTEURS (corps de 14 / 20, opacité 1
   comme les lignes de la liste : le vendor met tout `#stcm-modal p` à 0,6), puis la liste détaillée REPLIÉE (`<details>`
   natif, `lib/cmp-init.ts`). Repli : aspect d'un lien du texte légal (souligné en permanence, couleur du texte au repos, accent
   au survol et au focus, anneau 2 px accent décalé de 2, `--anneau-lien`), marqueur natif gardé (triangle, état lisible).
   Aucune animation d'ouverture. */
#stcm-wrapper .tar-acteurs {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  opacity: 1;
}
#stcm-wrapper .tar-detail {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
}
#stcm-wrapper .tar-detail > summary {
  width: fit-content;
  color: var(--textColor);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--duree-lien, 150ms) var(--ease-survol);
}
#stcm-wrapper .tar-detail > summary:focus-visible {
  outline: var(--anneau-lien, 2px) solid var(--primaryColor);
  outline-offset: 2px;
  color: var(--primaryColor);
}
@media (hover: hover) and (pointer: fine) {
  #stcm-wrapper .tar-detail > summary:hover {
    color: var(--primaryColor);
  }
}
@media (prefers-reduced-motion: reduce) {
  #stcm-wrapper .tar-detail > summary {
    transition: none;
  }
}

/* Lot C1a (décision 6, « Refuser est aussi simple qu'accepter ») : à partir de 600 px, le vendor met les boutons en rangée, chacun
   à la largeur de son libellé (relevé du lot à 1440 : « Tout accepter » 143,88, « Tout refuser » 130,64). Largeur MINIMALE
   commune : 9em (144 px à 16 px), la plus grande des deux arrondie au pixel supérieur ; sous 600 px, colonne, largeurs déjà
   égales. Une copy qui change se remesure (`audit:consent`, étape 14). */
@media (min-width: 600px) {
  #stcm-wrapper #stcm-banner .stcm-accept-all,
  #stcm-wrapper #stcm-banner .stcm-reject-all {
    min-width: 9em;
  }
}