/* =============================================================================
   DIDOMI — BANNIERE DE CONSENTEMENT
   -----------------------------------------------------------------------------
   Template unique pour tous les sites Asmodee Group (Asmodee.com, Days of
   Wonder, Bezzerwizzer, Print & Play, etc.).

   Perimetre : icone flottante (#cookieButton, rendue par Header & Footer),
   banniere initiale (notice), modale de preferences (purposes), modale des
   partenaires (vendors).

   Principes : tout passe par les tokens --ddm-* (personnalisation par marque,
   aucune valeur en dur), "Tout accepter" en premiere position (mobile-first),
   "Continuer sans accepter" en haut a droite, hauteur de boutons constante,
   focus visibles, prefers-reduced-motion.

   Le SDK Didomi rend ses vues sous #didomi-host dans le DOM de la page (pas
   d'iframe) et injecte son propre <style> APRES cette feuille : les !important
   et la specificite renforcee (#didomi-host + id/chaines descendantes) sont
   necessaires pour le battre. Ne pas "simplifier" les selecteurs qui semblent
   se recouvrir : a specificite egale, c'est le SDK (dernier charge) qui gagne.
   #cookieButton est notre markup : pas de !important requis.

   Charge par inc/class-main.php (handle gamico-didomi-banner).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS DE THEME — surchargeables par marque
   ----------------------------------------------------------------------------- */
:root {
    /* Couleurs */
    --ddm-primary: #FFBC00; /* CTA principal & accents */
    --ddm-primary-hover: #FDC93F;
    --ddm-primary-ink: #18181B; /* Texte sur fond primaire */
    --ddm-ink: #18181B; /* Texte, bordures, ombre stamp */
    --ddm-ink-soft: #52525B;
    --ddm-bg: #FFFFFF;
    --ddm-bg-soft: #FAFAFA;
    /* Liens de texte — portent la couleur de marque.
       CONTRASTE : une primaire claire ne passe pas en texte (WCAG AA = 4.5:1
       sur blanc) : #FFBC00 Asmodee 1.69:1 ECHEC, #2E61D9 DoW 5.49:1 OK. Une
       marque a primaire claire surcharge --ddm-link avec une variante foncee
       de sa couleur (Asmodee : #8A6200 = 5.49:1). Le survol s'obtient en
       ASSOMBRISSANT --ddm-link, jamais via --ddm-primary-hover qui eclaircit
       (#FDC93F tomberait a 1.54:1). */
    --ddm-link: var(--ddm-primary);
    --ddm-link-hover: color-mix(in srgb, var(--ddm-link) 80%, black);
    --ddm-link-wash: color-mix(in srgb, var(--ddm-link) 14%, transparent);

    /* Accent d'interface — jamais la primaire : anneau de focus, sous-titres
       de section et bouton "Voir nos partenaires" doivent rester lisibles
       quelle que soit la marque. */
    --ddm-ui-accent: #2E61D9;
    --ddm-overlay: rgba(24, 24, 27, .55);
    --ddm-border: #E4E4E7;
    --ddm-error: #DC2626; /* "Refuser / Bloquer" selectionne */
    --ddm-success: #16A34A; /* "Accepter / Autoriser" selectionne */

    /* Typographie — Readex Pro n'est chargee par personne aujourd'hui : c'est
       le fallback systeme qui s'affiche. Rien a faire cote Didomi le jour ou
       on l'active (le SDK rend dans le DOM de la page, toute police du
       document est reprise). Deux voies :
       1. Self-host (recommande, licence OFL) : version variable wght 400..700
          en 2 fichiers / 58 Ko (latin + latin-ext, requis pour le tcheque),
          contre 8 fichiers / 231 Ko en graisses statiques.
       2. Filtre gamico_google_font_families ('Readex+Pro:wght@400;500;600;700')
          — reconduit la dependance fonts.googleapis.com deja presente pour
          Unbounded et Anton dans inc/class-main.php (sans consentement), ce
          qu'un self-host corrigerait pour les trois polices. */
    --ddm-font: 'Readex Pro', 'Museo Sans Rounded', system-ui, -apple-system, sans-serif;
    --ddm-fs-title: 24px;
    --ddm-fs-body: 15px;
    --ddm-fs-meta: 13px;
    --ddm-lh-tight: 1.15;
    --ddm-lh-body: 1.5;

    /* Espacements */
    --ddm-pad-card-x: 40px;
    --ddm-pad-card-y: 36px;
    --ddm-gap-actions: 10px;
    /* Gouttiere du panneau de liste des partenaires. Token et non valeur en
       dur parce que trois regles doivent rester d'accord : le padding du
       panneau, et les margin/padding opposes qui font saigner le survol d'une
       ligne bord a bord (section 9). Les desaccorder decale le survol. */
    --ddm-pad-list: 18px;

    /* Forme */
    --ddm-radius-card: 32px;
    --ddm-radius-btn: 999px;
    --ddm-radius-md: 16px;
    --ddm-radius-chip: 8px;
    --ddm-border-w: 2px;

    /* Ombre stamp signature */
    --ddm-stamp: 2px 5px 0 0 var(--ddm-ink);
    --ddm-stamp-sm: 2px 4px 0 0 var(--ddm-ink);

    /* Illustration cookie — 56px aligne son poids visuel sur celui du logo
       marque (section 4), l'autre glyphe de coin de meme gabarit.
       --ddm-cookie-svg : volontairement non defini ici. Point de surcharge
       optionnel du fallback ::before (section 4) : une marque qui change de
       primaire redefinit ce token avec sa propre data URI, les couleurs y
       etant figees. */
    --ddm-cookie-size: 56px;

    /* Puce de liste — pastille ronde + check, portee par un ::before : seule
       une vraie boite recoit le box-shadow stamp (une image de fond, non).
       --ddm-check-mask ne porte QUE la silhouette du check : c'est un masque,
       la couleur vient de background-color et reste donc en var() — le
       fallback suit la marque, la ou une data URI multicolore aurait fige le
       jaune. */
    --ddm-check-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M27.7324 11.7314C28.709 10.7554 30.2925 10.7559 31.2686 11.7324C32.2446 12.709 32.2441 14.2925 31.2676 15.2686L19.2598 27.2686C18.7908 27.7371 18.1551 28.0002 17.4922 28C16.8291 27.9997 16.1932 27.7357 15.7246 27.2666L9.73145 21.2666C8.75573 20.2897 8.75658 18.7072 9.7334 17.7314C10.7103 16.7557 12.2928 16.7566 13.2686 17.7334L17.4941 21.9639L27.7324 11.7314Z' fill='black'/></svg>");
    --ddm-bullet-size: 22px;
    --ddm-bullet-offset: 34px; /* taille + decalage de l'ombre + gouttiere */
    /* Ombre reduite : --ddm-stamp-sm est calibre pour un bouton de 48px, il
       ecraserait une pastille de 22. */
    --ddm-bullet-stamp: 1.5px 3px 0 0 var(--ddm-ink);

    /* Animation — respecte prefers-reduced-motion en bas */
    --ddm-ease: cubic-bezier(.2, .8, .2, 1);
    --ddm-dur: 180ms;

    /* Icone flottante */
    --ddm-floating-size: 52px;
    --ddm-floating-offset: 20px;
    --ddm-floating-z: 9999;
}


/* -----------------------------------------------------------------------------
   1.bis. SURCHARGES PAR MARQUE
   -----------------------------------------------------------------------------
   A declarer dans le style.css du studio (charge apres cette feuille) ou dans
   le Customizer > CSS additionnel. Exemple Days of Wonder :

     :root {
         --ddm-primary:       #2E61D9;
         --ddm-primary-hover: #4A7BE5;
         --ddm-primary-ink:   #FFFFFF;
         --ddm-radius-card:   20px;
     }
   ----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   2. ICONE FLOTTANTE — rappel cookies (#cookieButton)
   Markup injecte par le plugin Header & Footer (seule trace de ce HTML : le
   tenir a jour ici). Le SVG porte ses couleurs en var(--ddm-*) sur chaque
   forme : il suit la marque sans dependre du texte parent. #cookieButton
   etant du HTML reel toujours present dans le DOM, var() s'y resout via la
   cascade — aucun fallback requis, contrairement a la section 4.

     <div id="cookieButton">
       <a href="javascript:Didomi.preferences.show()" aria-label="Modifier mes preferences cookies">
         <svg class="ddm-cookie-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <rect x="6" y="29" width="88" height="42" rx="21"
                 fill="var(--ddm-bg)" stroke="var(--ddm-ink)" stroke-width="3.5"/>
           <circle cx="70" cy="50" r="14.5"
                   fill="var(--ddm-primary)" stroke="var(--ddm-ink)" stroke-width="3"/>
           <circle cx="66" cy="45"   r="2.4" fill="var(--ddm-ink)"/>
           <circle cx="75.5" cy="52" r="2.1" fill="var(--ddm-ink)"/>
           <circle cx="67" cy="56"   r="1.9" fill="var(--ddm-ink)"/>
         </svg>
       </a>
     </div>
   ----------------------------------------------------------------------------- */

#cookieButton {
    position: fixed;
    right: var(--ddm-floating-offset);
    bottom: var(--ddm-floating-offset);
    z-index: var(--ddm-floating-z);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ddm-floating-size);
    height: var(--ddm-floating-size);
    padding: 0;
    background-color: var(--ddm-primary);
    border: var(--ddm-border-w) solid var(--ddm-ink);
    border-radius: 999px;
    box-shadow: var(--ddm-stamp-sm);
    transition:
        transform var(--ddm-dur) var(--ddm-ease),
        box-shadow var(--ddm-dur) var(--ddm-ease),
        background-color var(--ddm-dur) var(--ddm-ease);
}

/* hidden doit primer sur le display: flex ci-dessus. */
#cookieButton[hidden] {
    display: none;
}

/* Effet stamp : le bouton s'enfonce dans son ombre. Le deplacement reprend
   exactement l'offset de --ddm-stamp-sm (2px, 4px) — rien ne bouge autour,
   le curseur reste sur la cible. */
#cookieButton:hover,
#cookieButton:focus-within,
#cookieButton:active {
    background-color: var(--ddm-primary-hover);
    transform: translate(2px, 4px);
    box-shadow: 0 0 0 0 var(--ddm-ink);
}

#cookieButton a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    color: var(--ddm-primary-ink);
    text-decoration: none;
}

/* Le theme colore et souligne les liens : on neutralise sur cette ancre. */
#cookieButton a:hover,
#cookieButton a:focus,
#cookieButton a:visited {
    color: var(--ddm-primary-ink);
    text-decoration: none;
}

#cookieButton a:focus-visible {
    outline: 3px solid var(--ddm-ui-accent);
    outline-offset: 4px;
}

/* Le dessin utile n'occupe que la bande centrale du viewBox carre, d'ou une
   boite plus large qu'un glyphe plein cadre. overflow: visible protege les
   bords du stroke si son epaisseur augmente un jour. */
#cookieButton .ddm-cookie-icon {
    width: 34px;
    height: 34px;
    overflow: visible;
}

@media (max-width: 640px) {
    #cookieButton {
        --ddm-floating-size: 46px;
        --ddm-floating-offset: 14px;
    }

    #cookieButton .ddm-cookie-icon {
        width: 30px;
        height: 30px;
    }
}


/* -----------------------------------------------------------------------------
   3. STRUCTURE DU POPUP — overlay + carte
   ----------------------------------------------------------------------------- */

/* Reset des wrappers Didomi natifs (bordures et ombres parasites) */
#didomi-host .didomi-exterior-border,
#didomi-host .didomi-popup__exterior-border,
#didomi-host .didomi-banner-notice-optin-type,
#didomi-host #didomi-notice {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
}

/* Overlay */
#didomi-host .didomi-popup-backdrop,
#didomi-host #didomi-popup {
    background-color: var(--ddm-overlay) !important;
}

/* Carte principale */
#didomi-host .didomi-popup-container {
    position: relative !important;
    max-width: 720px !important;
    width: calc(100vw - 48px) !important;
    padding: var(--ddm-pad-card-y) var(--ddm-pad-card-x) !important;
    overflow: visible !important;
    background-color: var(--ddm-bg) !important;
    border: var(--ddm-border-w) solid var(--ddm-ink) !important;
    border-radius: var(--ddm-radius-card) !important;
    box-shadow: var(--ddm-stamp) !important;
    font-family: var(--ddm-font) !important;
    color: var(--ddm-ink) !important;
}


/* Garde-fou de hauteur — la notice ne depasse jamais l'ecran, a toute largeur.
   Sans lui, une carte plus haute que le viewport se fait couper en bas et les
   boutons passent hors d'atteinte ; c'etait le cas des que le texte de la
   console Didomi s'allongeait.

   La carte porte donc son propre defilement plutot que de laisser l'overlay
   s'en charger : c'est ce qui tronque visiblement le texte, et c'est ce
   defilement interne qui donne sa course au sticky de la barre d'actions
   (section 6). Ancre sur l'overlay, la carte s'etire a la hauteur du contenu
   et la barre n'a presque rien a parcourir.

   Volontairement hors media query : le besoin ne depend pas de la largeur mais
   du rapport entre la hauteur du contenu et celle de l'ecran — un portable en
   paysage deborde bien avant 640px de large. La regle est neutre quand la
   notice tient a l'ecran : pas de depassement, donc ni scroll ni sticky.

   dvh suit la barre d'URL mobile qui se retracte ; vh le precede en repli pour
   les moteurs qui ne connaissent pas l'unite. Les 24px de reserve laissent
   passer l'ombre stamp (5px vers le bas).

   Restreint a la notice par :has() : .didomi-popup-container est aussi le cadre
   des modales de preferences et de partenaires, qui ont deja leur propre zone
   defilante (section 9) — l'appliquer aux deux y creerait un second ascenseur
   imbrique. La ou :has() manque, la regle est ignoree sans casse.

   Effet de bord assume : l'en-tete (logo, illustration, lien "continuer sans
   accepter") defile avec le contenu, comme dans toute bottom sheet. Il reste
   visible a l'ouverture, donc au meme niveau que les autres choix. */
#didomi-host .didomi-popup-container:has(.didomi-popup-notice-buttons) {
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    /* Le scroll ne se propage pas a la page derriere une fois la fin atteinte. */
    overscroll-behavior: contain !important;
}


/* -----------------------------------------------------------------------------
   4. EN-TETE — logo marque + illustration cookie + lien "continuer"
   ----------------------------------------------------------------------------- */

/* Conteneur logo Didomi — en haut a gauche, ancre le contenu */
#didomi-host .didomi-popup-container .didomi-popup-notice-logo-container {
    display: block !important;
    max-width: 60% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    line-height: 0 !important;
    text-align: left !important;
}

#didomi-host .didomi-popup-notice-logo-container img {
    display: block !important;
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
}

/* Illustration cookie en haut a droite — un cookie-bouclier avec badge de
   validation. Deux rendus pour un meme visuel :

   1. SVG INLINE (a privilegier), injecte dans la notice ; ses fills en
      var(--ddm-*) suivent automatiquement la marque, y compris une surcharge
      posee plus tard. aria-hidden est correct : visuel decoratif, le titre et
      le texte de la notice portent deja l'information.

        <div class="ddm-cookie-illustration" aria-hidden="true">
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(-7,-8) scale(0.9)">
              <path d="M50 11a12 12 0 0 1 8.6 20.4c5.2 2.2 9 5.9 11 10.5l13.6 5a7 7 0 0 1-4.8 13.1L68 56.6V83a7 7 0 0 1-7 7h-5.6L50 75.5 44.6 90H39a7 7 0 0 1-7-7V56.6l-10.4 3.4a7 7 0 0 1-4.8-13.1l13.6-5c2-4.6 5.8-8.3 11-10.5A12 12 0 0 1 50 11Z"
                    fill="var(--ddm-primary)" stroke="var(--ddm-ink)" stroke-width="3.4" stroke-linejoin="round"/>
              <circle cx="42" cy="52" r="3.2" fill="var(--ddm-ink)"/>
              <circle cx="57" cy="60" r="2.8" fill="var(--ddm-ink)"/>
              <circle cx="44" cy="70" r="2.6" fill="var(--ddm-ink)"/>
            </g>
            <rect x="57" y="57" width="33" height="33" rx="5"
                  fill="var(--ddm-bg)" stroke="var(--ddm-ink)" stroke-width="3"/>
            <path d="M64.5 73.5l6.5 6.5 12-14"
                  fill="none" stroke="var(--ddm-ink)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>

   2. FALLBACK ::before si le DOM n'est pas injectable — le cas par defaut
      aujourd'hui. Meme dessin en data URI : var() n'y est pas resolu, les
      couleurs sont figees sur les valeurs par defaut (primary #FFBC00,
      ink #18181B, bg #FFFFFF). Une marque qui change de primaire surcharge
      --ddm-cookie-svg avec sa propre data URI.

   Le :has() plus bas eteint le fallback des que le SVG inline est present. */

/* Boite commune aux deux rendus — position, taille, transparence aux clics */
#didomi-host .ddm-cookie-illustration,
#didomi-host .didomi-popup-container::before {
    position: absolute;
    top: 40px;
    right: 28px;
    width: var(--ddm-cookie-size);
    height: var(--ddm-cookie-size);
    pointer-events: none;
}

#didomi-host .ddm-cookie-illustration {
    z-index: 1;
}

#didomi-host .ddm-cookie-illustration svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible; /* le stroke deborde legerement du viewBox */
}

#didomi-host .didomi-popup-container::before {
    content: "";
    background-image: var(--ddm-cookie-svg, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='translate(-7,-8) scale(0.9)'><path d='M50 11a12 12 0 0 1 8.6 20.4c5.2 2.2 9 5.9 11 10.5l13.6 5a7 7 0 0 1-4.8 13.1L68 56.6V83a7 7 0 0 1-7 7h-5.6L50 75.5 44.6 90H39a7 7 0 0 1-7-7V56.6l-10.4 3.4a7 7 0 0 1-4.8-13.1l13.6-5c2-4.6 5.8-8.3 11-10.5A12 12 0 0 1 50 11Z' fill='%23FFBC00' stroke='%2318181B' stroke-width='3.4' stroke-linejoin='round'/><circle cx='42' cy='52' r='3.2' fill='%2318181B'/><circle cx='57' cy='60' r='2.8' fill='%2318181B'/><circle cx='44' cy='70' r='2.6' fill='%2318181B'/></g><rect x='57' y='57' width='33' height='33' rx='5' fill='%23FFFFFF' stroke='%2318181B' stroke-width='3'/><path d='M64.5 73.5l6.5 6.5 12-14' fill='none' stroke='%2318181B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#didomi-host .didomi-popup-container:has(.ddm-cookie-illustration)::before {
    display: none;
}

/* "Continuer sans accepter" — toujours en haut a droite. Les selecteurs
   descendants renforcent la specificite face au style injecte par le SDK. */
#didomi-host .didomi-continue-without-agreeing,
#didomi-host .didomi-popup-notice-optin-type .didomi-continue-without-agreeing,
#didomi-host .didomi-banner-notice-optin-type .didomi-continue-without-agreeing {
    position: absolute !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 14 !important;
    padding: 4px 6px !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 500 !important;
    color: var(--ddm-ink-soft) !important;
    text-decoration: underline;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    transition: color var(--ddm-dur) var(--ddm-ease);
}

#didomi-host .didomi-continue-without-agreeing:hover {
    color: var(--ddm-ink) !important;
}


/* -----------------------------------------------------------------------------
   5. CONTENU — titre, paragraphe, liste a puces
   ----------------------------------------------------------------------------- */

#didomi-host .didomi-popup-notice-text-container,
#didomi-host .didomi-popup-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#didomi-host .ddm-fineprint {
    margin-top: 12px !important;
    font-size: var(--ddm-fs-meta) !important;
    line-height: 1.5 !important;
    color: var(--ddm-ink-soft) !important;
}

/* Typo commune des titres — notice ET modales (le degagement et la marge
   propres aux titres de modales sont poses en section 8). h3 inclus : le
   contenu de la notice est redige en h3 dans la console Didomi ; ses styles
   inline sont neutralises par les !important, mais mieux vaut les retirer du
   HTML — voir didomi-notice-content.{en,fr}.html (console Didomi). */
#didomi-host #didomi-notice h2,
#didomi-host #didomi-notice h3,
#didomi-host .didomi-popup-notice h1,
#didomi-host .didomi-popup-notice h2,
#didomi-host .didomi-popup-notice h3,
#didomi-host .didomi-popup-preferences-title,
#didomi-host #didomi-popup-preferences-title,
#didomi-host #didomi-popup-vendors-title {
    margin: 0 0 10px 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-title) !important;
    font-weight: 700 !important;
    line-height: var(--ddm-lh-tight) !important;
    letter-spacing: -.01em !important;
    color: var(--ddm-ink) !important;
    text-transform: none !important;
}

#didomi-host #didomi-notice p,
#didomi-host #didomi-notice p > span,
#didomi-host .didomi-popup-notice .didomi-popup-notice-text p {
    margin: 0 0 8px 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 400 !important;
    line-height: var(--ddm-lh-body) !important;
    color: var(--ddm-ink) !important;
}

/* -----------------------------------------------------------------------------
   5.bis. LIENS EN LIGNE DANS LES TEXTES DE CONSENTEMENT
   Ex. : <a href="javascript:Didomi.preferences.show('vendors')">ses 13 partenaires</a>
   Ces liens ouvrent une modale sans changement de page : rien dans le contexte
   ne signale qu'ils sont cliquables, ils portent donc seuls toute l'affordance
   — couleur, graisse ET soulignement epais (un daltonien ne verrait que le
   soulignement). "Continuer sans accepter" et les boutons sont exclus : ils
   ont leur propre traitement.
   Regle partagee entre la notice initiale et l'intro de la modale de
   preferences (.didomi-consent-popup-body__explanation) : meme lien, meme
   rendu — une seule regle plutot que deux versions qui finiraient par deriver.
   ----------------------------------------------------------------------------- */

#didomi-host #didomi-notice a:not(.didomi-continue-without-agreeing):not(.didomi-components-button):not(.didomi-button),
#didomi-host .didomi-popup-notice-text-container a:not(.didomi-continue-without-agreeing):not(.didomi-components-button):not(.didomi-button),
#didomi-host .didomi-popup-notice .didomi-popup-notice-text a:not(.didomi-continue-without-agreeing),
#didomi-host .didomi-consent-popup-body__explanation a {
    color: var(--ddm-link) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    border-radius: 3px;
    cursor: pointer !important;
    transition:
        color var(--ddm-dur) var(--ddm-ease),
        background-color var(--ddm-dur) var(--ddm-ease);
}

/* Survol : le lien s'assombrit et prend un fond lave, avec une respiration
   laterale negative pour ne pas decaler le texte autour. */
#didomi-host #didomi-notice a:not(.didomi-continue-without-agreeing):not(.didomi-components-button):not(.didomi-button):hover,
#didomi-host .didomi-popup-notice-text-container a:not(.didomi-continue-without-agreeing):not(.didomi-components-button):not(.didomi-button):hover,
#didomi-host .didomi-popup-notice .didomi-popup-notice-text a:not(.didomi-continue-without-agreeing):hover,
#didomi-host .didomi-consent-popup-body__explanation a:hover {
    margin: 0 -3px !important;
    padding: 0 3px !important;
    background-color: var(--ddm-link-wash) !important;
    color: var(--ddm-link-hover) !important;
    text-decoration-thickness: 3px !important;
}

/* Liste a puces */
#didomi-host .didomi-popup-notice-text-container ul {
    margin: 8px 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#didomi-host .didomi-popup-notice-text-container ul li {
    position: relative;
    margin: 8px 0 !important;
    padding-left: var(--ddm-bullet-offset) !important;
    list-style: none !important;
    background-image: none !important; /* la puce est portee par le ::before */
    font-size: var(--ddm-fs-body) !important;
    line-height: var(--ddm-lh-body) !important;
    color: var(--ddm-ink) !important;
}

/* La pastille — deux rendus, TOUS DEUX aux couleurs de la marque :
   1. SVG INLINE <svg class="ddm-check"> en tete de chaque <li> (rendu le plus
      fidele : contour du check et ombre interne compris). Markup :
      didomi-notice-content.{en,fr}.html (console Didomi).
   2. FALLBACK CSS PUR (::before disque + ::after check via --ddm-check-mask),
      quand la notice ne peut pas porter de SVG — le cas par defaut. Ecart
      assume : pas de contour ink ni d'ombre interne sur le check ; sa
      lisibilite vient de --ddm-primary-ink, le token calibre pour ecrire sur
      la primaire (#18181B sur le jaune Asmodee, #FFFFFF sur le bleu DoW).
   Les trois boites partagent position, taille et ombre ; le :has() eteint le
   fallback des que le SVG inline est present. Un pseudo-element est une vraie
   boite : il porte le box-shadow stamp, ce qu'un background-image ne permet
   pas ; border-radius: 50% aligne l'ombre sur le disque. Le calage vertical
   suit la hauteur de ligne pour rester centre sur la premiere ligne quel que
   soit --ddm-fs-body. */
#didomi-host .didomi-popup-notice-text-container ul li::before,
#didomi-host .didomi-popup-notice-text-container ul li::after,
#didomi-host .didomi-popup-notice-text-container ul li > .ddm-check {
    position: absolute;
    left: 0;
    top: calc((1em * var(--ddm-lh-body) - var(--ddm-bullet-size)) / 2);
    width: var(--ddm-bullet-size);
    height: var(--ddm-bullet-size);
}

/* Le disque : fond de marque, bordure ink, ombre stamp. border-box pour que
   la bordure reste dans --ddm-bullet-size. */
#didomi-host .didomi-popup-notice-text-container ul li::before {
    content: "";
    box-sizing: border-box;
    background-color: var(--ddm-primary);
    border: 2px solid var(--ddm-ink);
    border-radius: 50%;
    box-shadow: var(--ddm-bullet-stamp);
}

/* Le check, pose par-dessus : le masque ne transmet que l'alpha de la forme,
   la couleur vient de background-color, donc variable. */
#didomi-host .didomi-popup-notice-text-container ul li::after {
    content: "";
    background-color: var(--ddm-primary-ink);
    -webkit-mask: var(--ddm-check-mask) no-repeat center / contain;
    mask: var(--ddm-check-mask) no-repeat center / contain;
}

#didomi-host .didomi-popup-notice-text-container ul li > .ddm-check {
    display: block;
    overflow: visible; /* le stroke de la bordure deborde du viewBox */
    border-radius: 50%;
    box-shadow: var(--ddm-bullet-stamp);
}

/* SVG inline present : les deux pseudo-elements du fallback s'effacent. */
#didomi-host .didomi-popup-notice-text-container ul li:has(> .ddm-check)::before,
#didomi-host .didomi-popup-notice-text-container ul li:has(> .ddm-check)::after {
    display: none;
}


/* -----------------------------------------------------------------------------
   6. BOUTONS — ordre, taille, etat
   "Tout accepter" en premier (donc en haut une fois empile sur mobile).
   ----------------------------------------------------------------------------- */

#didomi-host .didomi-popup-notice-buttons,
#didomi-host .didomi-popup-actions .didomi-buttons,
#didomi-host .didomi-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--ddm-gap-actions) !important;
    margin-top: 20px !important;
    padding: 0 !important;
}

/* Barre d'actions en "bottom sheet" — les boutons restent au bas de la carte
   tant que son contenu deborde, puis se posent dans le flux des qu'on atteint
   la fin du texte.

   sticky et non fixed : c'est ce qui donne la bascule automatique, sans JS ni
   mesure de hauteur. Un sticky ne sort jamais du padding box de son parent de
   bloc — ici la carte — donc le retour "en mode normal" en fin de scroll est
   gratuit, et rien ne flotte quand la notice tient a l'ecran.

   Le selecteur descend par .didomi-popup-container pour deux raisons : il
   reserve la regle a la notice (les modales ont leur propre pied de page,
   section 11), et sa specificite passe devant le width: 100% pose sur mobile
   plus bas dans le fichier. */
#didomi-host .didomi-popup-container .didomi-popup-notice-buttons {
    position: sticky !important;
    bottom: -20px !important;
    /* Au-dessus du texte et de l'illustration (z-index: 1), sous le lien
       "continuer sans accepter" (z-index: 14), qui defile avec l'en-tete et
       doit passer par-dessus la barre s'ils se croisent. */
    z-index: 12 !important;
    /* Les marges laterales negatives etendent le fond jusqu'aux bords
       interieurs de la carte : sans elles, le texte resterait visible en
       defilant dans les gouttieres de --ddm-pad-card-x. width: auto annule le
       100% pose sur mobile, qui s'ajouterait aux marges et ferait deborder a
       droite. Pas de marge basse negative : la barre se pose sur le padding de
       carte, et l'overflow du parent la rogne aux coins arrondis. */
    width: auto !important;
    padding: 14px var(--ddm-pad-card-x) !important;
    background-color: var(--ddm-bg) !important;
}

/* Fondu au-dessus de la barre : signale que le texte continue dessous. Le
   degrade part de --ddm-bg, donc il est invisible quand la barre est posee en
   fin de scroll (fond sur fond) et ne se revele que lorsque du texte passe
   dessous — aucun etat a piloter, ce que le CSS seul ne saurait pas faire.
   Un filet net a la place resterait visible barre posee, y compris sur les
   notices courtes qui n'ont jamais defile.

   position: absolute le sort du flux flex de la barre : un ::before y
   deviendrait sinon un item, insere entre les boutons. */
#didomi-host .didomi-popup-container .didomi-popup-notice-buttons::before {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 100% !important;
    left: 0 !important;
    height: 24px !important;
    background: linear-gradient(to top, var(--ddm-bg), transparent) !important;
    pointer-events: none !important;
}

/* Ordre force : Accepter -> Refuser -> Personnaliser */
#didomi-host #didomi-notice-agree-button,
#didomi-host .didomi-popup-notice-buttons .didomi-button-highlight,
#didomi-host .didomi-popup-notice-buttons #didomi-notice-accept-button {
    order: 1 !important;
}

#didomi-host #didomi-notice-disagree-button,
#didomi-host #didomi-notice-reject-button {
    order: 2 !important;
}

#didomi-host #didomi-notice-learn-more-button {
    order: 3 !important;
    margin-left: 0 !important;
}

/* Desktop — les trois boutons sur une ligne, largeurs egales. flex: 1 1 0
   (et non 1 1 auto) garantit qu'"Accepter" et "Refuser" restent de meme
   encombrement quelle que soit la longueur des libelles (traductions
   comprises). min-width: 0 autorise le retrecissement sous la largeur
   intrinseque du texte, sans quoi les boutons deborderaient. */
@media (min-width: 641px) {
    #didomi-host .didomi-popup-notice-buttons,
    #didomi-host .didomi-buttons {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    #didomi-host .didomi-popup-notice-buttons > .didomi-components-button,
    #didomi-host .didomi-popup-notice-buttons > .didomi-button,
    #didomi-host .didomi-popup-notice-buttons > button,
    #didomi-host .didomi-buttons > .didomi-components-button,
    #didomi-host .didomi-buttons > .didomi-button,
    #didomi-host .didomi-buttons > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        line-height: 1.2 !important; /* un libelle long peut passer sur 2 lignes */
        text-align: center !important;
    }
}

/* Base commune a tous les boutons — hauteur constante. Inclut le bouton
   "Enregistrer" des modales (#btn-toggle-save & co, section 10), qui ne garde
   la-bas que son delta de padding. */
#didomi-host .didomi-components-button,
#didomi-host .didomi-button,
#didomi-host .didomi-buttons .standard-button,
#didomi-host #didomi-notice-learn-more-button,
#didomi-host .didomi-save-button,
#didomi-host #btn-toggle-save,
#didomi-host .didomi-popup-actions .didomi-button-highlight {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    border: var(--ddm-border-w) solid var(--ddm-ink) !important;
    border-radius: var(--ddm-radius-btn) !important;
    box-shadow: var(--ddm-stamp-sm) !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition:
        transform var(--ddm-dur) var(--ddm-ease),
        box-shadow var(--ddm-dur) var(--ddm-ease),
        background var(--ddm-dur) var(--ddm-ease) !important;
}

/* "Tout accepter" et "Tout refuser" — STRICTEMENT IDENTIQUES.
   Exigence legale, pas un choix esthetique : la CNIL (deliberation
   n° 2020-092) et l'EDPB imposent que refuser soit aussi simple qu'accepter.
   Un refus rendu moins visible — fond blanc contre fond colore, libelle plus
   petit, bouton plus etroit — constitue un dark pattern et invalide le
   consentement recueilli. Ne pas dissocier ces boutons dans une surcharge de
   marque. Le bouton "Enregistrer" des modales partage les memes couleurs. */
#didomi-host #didomi-notice-agree-button,
#didomi-host #didomi-notice-disagree-button,
#didomi-host #didomi-notice-reject-button,
#didomi-host .didomi-popup-notice-buttons .didomi-button-highlight,
#didomi-host .didomi-buttons .didomi-button-highlight,
#didomi-host .didomi-consent-popup-preferences-purposes .didomi-buttons-all button,
#didomi-host #btn-toggle-save,
#didomi-host .didomi-popup-actions .didomi-button-highlight {
    background-color: var(--ddm-primary) !important;
    color: var(--ddm-primary-ink) !important;
}

#didomi-host #didomi-notice-agree-button:hover,
#didomi-host #didomi-notice-disagree-button:hover,
#didomi-host #didomi-notice-reject-button:hover,
#didomi-host .didomi-popup-notice-buttons .didomi-button-highlight:hover {
    background-color: var(--ddm-primary-hover) !important;
}

/* Tertiaire — "Personnaliser" / "En savoir plus". Peut rester distinct : la
   symetrie exigee porte sur le couple accepter / refuser, pas sur l'acces au
   reglage fin. */
#didomi-host #didomi-notice-learn-more-button {
    background-color: var(--ddm-bg) !important;
    color: var(--ddm-ink) !important;
}

#didomi-host #didomi-notice-learn-more-button:hover {
    background-color: var(--ddm-bg-soft) !important;
}

/* Effet stamp — survol, clic et focus clavier : l'element s'enfonce de
   l'offset exact de son ombre, la surface finale est inchangee, seul le
   relief disparait. Regle UNIQUE partagee par tous les elements a ombre stamp
   du popup : boutons de la notice, pilules radio Refuser/Accepter (section 8)
   et bouton "Enregistrer" des modales (section 10). */
#didomi-host .didomi-components-button:hover,
#didomi-host .didomi-components-button:focus-visible,
#didomi-host .didomi-components-button:active,
#didomi-host .didomi-button:hover,
#didomi-host .didomi-button:focus-visible,
#didomi-host .didomi-button:active,
#didomi-host .didomi-buttons .standard-button:hover,
#didomi-host .didomi-buttons .standard-button:active,
#didomi-host #didomi-notice-learn-more-button:hover,
#didomi-host #didomi-notice-learn-more-button:focus-visible,
#didomi-host #didomi-notice-learn-more-button:active,
#didomi-host .didomi-save-button:hover,
#didomi-host .didomi-save-button:active,
#didomi-host .didomi-components-radio__option:hover,
#didomi-host .didomi-components-radio__option:focus-visible,
#didomi-host .didomi-components-radio__option:active,
#didomi-host #btn-toggle-save:hover,
#didomi-host #btn-toggle-save:focus-visible,
#didomi-host #btn-toggle-save:active,
#didomi-host .didomi-popup-actions .didomi-button-highlight:hover,
#didomi-host .didomi-popup-actions .didomi-button-highlight:focus-visible,
#didomi-host .didomi-popup-actions .didomi-button-highlight:active {
    transform: translate(2px, 4px) !important;
    box-shadow: 0 0 0 0 var(--ddm-ink) !important;
}

/* Un bouton desactive ne s'enfonce pas et ne se colore pas : il n'y a rien a
   declencher. Sans ce garde-fou, la regle de survol du bouton "Enregistrer"
   (section 10) repeindrait un bouton grise en couleur primaire. */
#didomi-host #btn-toggle-save.disabled:hover,
#didomi-host #btn-toggle-save.disabled:focus-visible,
#didomi-host #btn-toggle-save:disabled:hover,
#didomi-host #btn-toggle-save:disabled:focus-visible,
#didomi-host .didomi-button:disabled:hover,
#didomi-host .didomi-button:disabled:focus-visible {
    background-color: var(--ddm-bg-soft) !important;
    border-color: var(--ddm-ink-soft) !important;
    transform: none !important;
    box-shadow: 2px 4px 0 0 var(--ddm-ink-soft) !important;
}

/* Desactive */
#didomi-host #btn-toggle-save.disabled,
#didomi-host #btn-toggle-save:disabled,
#didomi-host .didomi-button:disabled {
    background-color: var(--ddm-bg-soft) !important;
    border-color: var(--ddm-ink-soft) !important;
    box-shadow: 2px 4px 0 0 var(--ddm-ink-soft) !important;
    opacity: .6 !important;
    cursor: not-allowed !important;
}


/* -----------------------------------------------------------------------------
   7. PIED DE BANNIERE — partenaires, mentions
   ----------------------------------------------------------------------------- */

#didomi-host .didomi-popup-footer,
#didomi-host .didomi-banner-notice-optin-type__footer {
    padding: 16px 0 0 0 !important;
    background: transparent !important;
    border-top: 0 !important;
}

#didomi-host .didomi-notice-data-processing-container {
    margin-top: 8px !important;
    padding-top: 8px !important;
    font-size: var(--ddm-fs-meta) !important;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-notice-data-processing-list {
    color: var(--ddm-link) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   8. MODALE DE PREFERENCES — gestion fine par categorie de cookies
   ----------------------------------------------------------------------------- */

/* Titres de modales — typo commune en section 5 ; ici seulement le degagement
   pour l'illustration cookie (sa largeur + son retrait droit) et la marge. */
#didomi-host .didomi-popup-preferences-title,
#didomi-host #didomi-popup-preferences-title,
#didomi-host #didomi-popup-vendors-title {
    margin: 0 0 18px !important;
}

/* La fleche retour est le seul element cliquable de ce titre — le texte du
   heading est un span voisin, hors du <a>. padding+margin negatif agrandit la
   zone de survol sans decaler le texte qui suit. */
#didomi-host #didomi-popup-vendors-title a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    color: var(--ddm-ink) !important;
    text-decoration: none !important;
    transition: background-color var(--ddm-dur) var(--ddm-ease);
}

#didomi-host #didomi-popup-vendors-title a:hover,
#didomi-host #didomi-popup-vendors-title a:focus-visible {
    background-color: var(--ddm-bg-soft) !important;
}

#didomi-host .didomi-arrow-back-popup-preferences-vendors {
    font-size: 1.2em;
    line-height: 1;
}

/* Lien d'accessibilite "Aller a Enregistrer" — masque hors-ecran (pas
   display:none : il doit rester annonce par les lecteurs d'ecran et
   atteignable au Tab), rendu visible au focus clavier avec le meme traitement
   pill que les autres liens discrets du fichier. */
#didomi-host .didomi-components-skip-link {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

#didomi-host .didomi-components-skip-link:focus-visible {
    position: static !important;
    display: inline-flex !important;
    width: auto;
    height: auto;
    margin: 0 0 12px !important;
    padding: 6px 14px !important;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--ddm-bg) !important;
    border: 1.5px solid var(--ddm-link) !important;
    border-radius: var(--ddm-radius-btn) !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 600 !important;
    color: var(--ddm-link) !important;
}

#didomi-host .didomi-consent-popup-header,
#didomi-host .didomi-popup-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

/* Bouton de fermeture en haut a droite */
#didomi-host .didomi-popup-close,
#didomi-host .didomi-consent-popup-header-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 14 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--ddm-ink-soft) !important;
    text-decoration: none !important;
    cursor: pointer;
}

#didomi-host .didomi-popup-close:hover {
    background: var(--ddm-bg-soft) !important;
    color: var(--ddm-ink) !important;
}

/* Paragraphe d'intro. Le style de ses liens ("Nos 13 partenaires") vit dans
   la regle partagee de la section 5.bis. */
#didomi-host .didomi-consent-popup-body__explanation,
#didomi-host .didomi-consent-popup-body__explanation > span {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    line-height: var(--ddm-lh-body) !important;
    color: var(--ddm-ink) !important;
}

/* Sous-titre de section — "Vous autorisez", "Tous les partenaires" */
#didomi-host .didomi-consent-popup-body__title {
    display: inline-block !important;
    margin: 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--ddm-ui-accent) !important;
}

/* Ligne "Tout accepter / refuser" en tete de la liste des categories */
#didomi-host .didomi-consent-popup-purpose,
#didomi-host .didomi-consent-popup-container-click-all {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 8px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--ddm-border) !important;
}

/* flex-basis:auto fige la largeur naturelle des groupes de boutons pour que
   ce ne soit jamais eux qui cedent face a un titre long : c'est le titre qui
   s'enroule, via les min-width:0 poses plus bas sur les accordeons. */
#didomi-host .didomi-consent-popup-purpose__buttons,
#didomi-host .didomi-consent-popup-data-processing__buttons,
#didomi-host .didomi-consent-popup-vendor__buttons {
    flex: 0 0 auto !important;
}

/* Boutons radio — segmented control Refuser / Accepter */
#didomi-host .didomi-components-radio {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Meme signature "stamp" que les boutons de la notice (bordure ink epaisse +
   ombre decalee). L'effet d'enfoncement au survol/press vit dans la regle
   stamp partagee de la section 6. */
#didomi-host .didomi-components-radio__option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 96px !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    background-color: var(--ddm-bg) !important;
    border: var(--ddm-border-w) solid var(--ddm-ink) !important;
    border-radius: var(--ddm-radius-btn) !important;
    box-shadow: var(--ddm-stamp-sm) !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    color: var(--ddm-ink-soft) !important;
    cursor: pointer !important;
    transition:
        transform var(--ddm-dur) var(--ddm-ease),
        box-shadow var(--ddm-dur) var(--ddm-ease),
        background-color var(--ddm-dur) var(--ddm-ease),
        color var(--ddm-dur) var(--ddm-ease),
        border-color var(--ddm-dur) var(--ddm-ease);
}

#didomi-host .didomi-components-radio__option:hover {
    background-color: var(--ddm-bg-soft) !important;
    color: var(--ddm-ink) !important;
}

/* Selectionne = "Refuser / Bloquer" -> rouge plein. Seule la couleur change,
   l'epaisseur et le style de bordure viennent de la regle de base. */
#didomi-host .didomi-components-radio__option--selected.didomi-components-radio__option--disagree {
    background-color: var(--ddm-error) !important;
    color: #FFFFFF !important;
}

/* Selectionne = "Accepter / Autoriser" -> vert plein */
#didomi-host .didomi-components-radio__option--selected.didomi-components-radio__option--agree {
    background-color: var(--ddm-success) !important;
    color: #FFFFFF !important;
}

#didomi-host .didomi-components-radio__option svg {
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important;
}

/* Categories de cookies — accordion + nom + boutons radio */
#didomi-host .didomi-consent-popup-categories,
#didomi-host .didomi-consent-popup-categories-nested {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#didomi-host .didomi-consent-popup-category {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--ddm-border) !important;
}

#didomi-host .didomi-consent-popup-category:last-child {
    border-bottom: 0 !important;
}

#didomi-host .didomi-components-accordion {
    margin: 0 !important;
    padding: 0 !important;
}

#didomi-host .didomi-components-accordion-label-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 14px 0 !important;
}

/* padding+margin negatif : meme idiome que le lien "retour" plus haut — la
   zone de survol deborde le texte sans decaler la ligne autour. Partage par
   les accordeons de categories, de partenaires et de "voir les infos". */
#didomi-host .label-click {
    display: inline-flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 6px !important;
    margin: -4px -6px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--ddm-ink) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color var(--ddm-dur) var(--ddm-ease) !important;
}

#didomi-host .label-click:hover,
#didomi-host .label-click:focus-visible {
    background-color: var(--ddm-bg-soft) !important;
}

/* Pastille +/− dessinee entierement en CSS, sans dependre du glyphe injecte
   par Didomi dans le span (font-size/color a 0 le neutralise, quel qu'il
   soit : la rotation ne portera jamais sur un signe imprevisible). Reprend le
   vocabulaire visuel des pilules radio non selectionnees (meme bordure, meme
   fond). */
#didomi-host .trigger-icon {
    position: relative;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    background-color: var(--ddm-bg) !important;
    border: 1.5px solid var(--ddm-border) !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transition:
        transform var(--ddm-dur) var(--ddm-ease) !important,
        border-color var(--ddm-dur) var(--ddm-ease) !important,
        background-color var(--ddm-dur) var(--ddm-ease) !important;
}

/* Les deux barres du "+", dessinees par les pseudo-elements — jamais par le
   texte du span. */
#didomi-host .trigger-icon::before,
#didomi-host .trigger-icon::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: var(--ddm-ink-soft) !important;
    transition: background-color var(--ddm-dur) var(--ddm-ease) !important;
}

#didomi-host .trigger-icon::before {
    width: 10px !important;
    height: 2px !important;
}

#didomi-host .trigger-icon::after {
    width: 2px !important;
    height: 10px !important;
}

#didomi-host .label-click:hover .trigger-icon,
#didomi-host .label-click:focus-visible .trigger-icon {
    border-color: var(--ddm-ink) !important;
}

#didomi-host .label-click:hover .trigger-icon::before,
#didomi-host .label-click:hover .trigger-icon::after,
#didomi-host .label-click:focus-visible .trigger-icon::before,
#didomi-host .label-click:focus-visible .trigger-icon::after {
    background-color: var(--ddm-ink) !important;
}

/* Ouvert : la pastille pivote de 45deg — les deux memes barres, de longueur
   et epaisseur identiques, forment une croix nette quel que soit l'etat.
   L'etat reel reste porte par aria-expanded ; cette rotation n'est qu'un
   indice visuel redondant, sans impact sur les lecteurs d'ecran. */
#didomi-host [aria-expanded="true"] > .trigger-icon {
    background-color: var(--ddm-bg-soft) !important;
    border-color: var(--ddm-ink) !important;
    transform: rotate(45deg) !important;
}

#didomi-host [aria-expanded="true"] > .trigger-icon::before,
#didomi-host [aria-expanded="true"] > .trigger-icon::after {
    background-color: var(--ddm-ink) !important;
}

#didomi-host .didomi-consent-popup-category__name {
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 600 !important;
    color: var(--ddm-ink) !important;
}

/* Mention "Requis" des cookies obligatoires */
#didomi-host .didomi-consent-popup-data-processing__essential_purpose {
    padding: 6px 10px !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 500 !important;
    font-style: italic;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-consent-popup-category__description,
#didomi-host .didomi-consent-popup-data-processing__description {
    margin: 0 !important;
    padding: 0 0 12px 30px !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    line-height: var(--ddm-lh-body) !important;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-consent-popup-category__description p,
#didomi-host .didomi-consent-popup-data-processing__description p {
    margin: 0 0 8px !important;
}

/* Un intitule de finalite legale ("Traitements de donnees bases sur le
   consentement / sur l'interet legitime") est long, gras et souligne. Sans
   flex-wrap:nowrap ici et min-width:0 sur l'accordeon voisin, il garde sa
   largeur intrinseque pleine et pousse le groupe Bloquer/Autoriser a la
   ligne suivante au lieu de rester aligne a droite. */
#didomi-host .didomi-consent-popup-data-processing {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--ddm-border) !important;
}

/* min-width:0 laisse le titre s'enrouler sur deux lignes dans SA propre boite
   plutot que de forcer tout le groupe a deborder ou sauter de ligne. */
#didomi-host .didomi-consent-popup-data-processing .didomi-components-accordion {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#didomi-host .didomi-consent-popup-data-processing-illustrations {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    background: var(--ddm-bg-soft) !important;
    border-radius: var(--ddm-radius-chip) !important;
}

#didomi-host .didomi-consent-popup-data-processing-illustration {
    display: block;
    font-family: var(--ddm-font) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-consent-popup-data-processing-illustrations b {
    font-size: var(--ddm-fs-meta) !important;
    color: var(--ddm-ink) !important;
}

#didomi-host .didomi-consent-popup-preferences-purposes-features {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ddm-border) !important;
}

#didomi-host .didomi-consent-popup-preferences-purposes-features p {
    margin: 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    line-height: var(--ddm-lh-body) !important;
    color: var(--ddm-ink) !important;
}

#didomi-host .feature-and-special-purpose {
    text-decoration: underline;
    text-decoration-color: var(--ddm-ink-soft);
    text-underline-offset: 3px;
    cursor: help;
}

/* Lien "Voir nos partenaires" -> pill button discret */
#didomi-host .didomi-consent-popup-view-vendors-list {
    display: block;
    margin-top: 16px !important;
    text-align: right;
}

#didomi-host .didomi-consent-popup-view-vendors-list-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: 1.5px solid var(--ddm-ui-accent) !important;
    border-radius: var(--ddm-radius-btn) !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 600 !important;
    color: var(--ddm-ui-accent) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

#didomi-host .didomi-consent-popup-view-vendors-list-link:hover {
    background: var(--ddm-ui-accent) !important;
    color: #FFFFFF !important;
}


/* -----------------------------------------------------------------------------
   9. MODALE DES PARTENAIRES — liste alphabetique des vendors
   ----------------------------------------------------------------------------- */

/* gap dissocie : 16px separent le nom des boutons sur une meme ligne, mais
   des que la ligne se replie (mobile, ou passage en colonne impose par la
   feuille du SDK), c'est row-gap qui gouverne l'ecart vertical — a 16px il
   creusait un vide entre le nom et ses boutons. */
#didomi-host .didomi-consent-popup-vendor {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px 16px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

/* Densite de la liste : la ligne porte deja son propre padding, l'accordeon
   qu'elle contient n'en a pas besoin. Le 14px de
   .didomi-components-accordion-label-container est calibre pour les categories
   de cookies, ou chaque ligne est un bloc autonome borde ; repris ici il
   s'ajoutait a celui de la ligne et pesait 28px par partenaire, soit plus que
   la hauteur du texte lui-meme. */
#didomi-host .didomi-consent-popup-vendor .didomi-components-accordion-label-container {
    padding: 0 !important;
}

/* Replie, ce div est vide et son padding-bottom reservait 8px par ligne pour
   rien. Deplie, Didomi y injecte le texte : :empty ne matche plus et
   l'espacement revient de lui-meme. */
#didomi-host .didomi-consent-popup-vendor__description:empty {
    padding: 0 !important;
}

/* Survol pleine largeur des lignes de la liste : la rangee se detache en
   blanc sur le fond gris du conteneur. Exclut la ligne "Tous les
   partenaires", hors conteneur et deja traitee. La marge negative reprend
   exactement --ddm-pad-list, le padding horizontal du conteneur, pour aller
   bord a bord quelle que soit la valeur du token. */
#didomi-host .didomi-consent-popup-vendor:not(.didomi-consent-popup-container-click-all) {
    margin: 0 calc(-1 * var(--ddm-pad-list)) !important;
    padding: 6px var(--ddm-pad-list) !important;
    border-radius: var(--ddm-radius-chip) !important;
    transition: background-color var(--ddm-dur) var(--ddm-ease) !important;
}

#didomi-host .didomi-consent-popup-vendor:not(.didomi-consent-popup-container-click-all):hover,
#didomi-host .didomi-consent-popup-vendor:not(.didomi-consent-popup-container-click-all):has(.label-click:focus-visible) {
    background-color: var(--ddm-bg) !important;
}

#didomi-host .didomi-consent-popup-vendor .didomi-components-accordion {
    flex: 1 !important;
}

#didomi-host .didomi-consent-popup-vendor__name {
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 500 !important;
    color: var(--ddm-ink) !important;
}

/* Lettre A/B/C separant la liste alphabetique */
#didomi-host .didomi-first-letter-vendors-list {
    margin: 10px 0 2px !important;
    padding: 0 !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 700 !important;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-first-letter-vendors-list:first-child {
    margin-top: 0 !important;
}

#didomi-host .didomi-consent-popup-vendor__description {
    padding: 0 0 8px 30px !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-meta) !important;
    color: var(--ddm-ink-soft) !important;
}

/* Le SDK souligne tout le bloc de details d'un partenaire (titres des bases
   legales, libelles des pilules, categories de donnees). Un soulignement
   herite ne s'annule PAS sur le descendant : la specification le propage
   depuis la boite qui le declare et un text-decoration: none plus bas est sans
   effet — d'ou la regle en cascade sur le sous-arbre entier, seule facon
   d'atteindre l'element declarant sans le connaitre. Les <a> et leur contenu
   sont exclus : le lien "politique de confidentialite" du disclaimer est le
   seul element de ce bloc pour qui le soulignement veut dire quelque chose. */
#didomi-host .didomi-consent-popup-vendor__description,
#didomi-host .didomi-consent-popup-vendor__description *:not(a):not(a *) {
    text-decoration: none !important;
}

/* Identifiants techniques non coupables aux frontieres de mots
   (com.google.android.libraries.ads.mobile.sdk, _gac_gb_<wpid>) : sans point
   de cesure, un seul de ces mots elargit la liste au-dela de la carte. */
#didomi-host .didomi-vendor-storage-disclosure,
#didomi-host .didomi-vendor-data-categories-category {
    overflow-wrap: anywhere !important;
}

/* Bases legales par partenaire — structure differente de tout le reste : le
   titre (.didomi-vendors-details-title) et le groupe de boutons
   (__right_aligned_buttons) sont loges dans le MEME <span>, enfant de
   .label-click. Sans flex sur ce span, un <div> de boutons place apres du
   texte inline demarre toujours sa propre ligne en flux normal. Le span n'a
   pas de classe stable (id genere dynamiquement, inutilisable comme
   selecteur) : le :has() le cible sans en dependre.

   flex-wrap: wrap est indispensable ici : les deux pilules Bloquer/Autoriser
   pesent 200px incompressibles (2 x min-width 96px + gap 8px). En nowrap,
   c'est le titre qui absorbait seul le manque de place et tombait a une
   lettre par ligne des que la carte descendait sous ~450px. */
#didomi-host .label-click > span:has(> .didomi-vendors-details-title) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ddm-gap-actions) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* La base en ch fixe le seuil de repli : tant qu'il reste la place de 14
   caracteres a cote des pilules, le titre partage leur ligne et s'enroule sur
   deux lignes dans sa propre boite ; en dessous, il prend la premiere ligne
   pour lui et les pilules descendent. C'est ce plancher qui manquait — avec
   min-width: 0, le titre se laissait ecraser jusqu'a la largeur d'un
   caractere au lieu de provoquer le passage a la ligne. */
#didomi-host .didomi-vendors-details-title {
    flex: 1 1 14ch !important;
    min-width: 14ch !important;
    font-family: var(--ddm-font) !important;
    font-size: var(--ddm-fs-body) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--ddm-ink) !important;
}

/* margin-left: auto tient les pilules a droite dans les deux dispositions :
   sur la ligne du titre (ou justify-content suffisait) comme sur leur propre
   ligne apres repli, ou space-between n'a plus de second element a repousser
   et les aurait ramenees a gauche. */
#didomi-host .didomi-consent-popup-vendor__right_aligned_buttons {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Gouttiere du corps de la modale des partenaires — la liste est un panneau
   borde, elle ne doit pas toucher le bord de la carte. Le token la fait
   retrecir avec le reste sur petit ecran : ces 20px par cote etaient les plus
   couteux de la chaine, ils s'ajoutaient au padding de la carte ET a celui du
   panneau avant d'arriver au texte. */
#didomi-host .didomi-consent-popup-preferences-vendors .didomi-consent-popup-body {
    padding: 0 var(--ddm-pad-list) var(--ddm-pad-list) !important;
}

/* Hauteur bornee : sans plafond, une longue liste de partenaires pousserait
   toute la modale hors du viewport. role="list" tabindex="0" (pose par
   Didomi) signale une region de defilement focusable au clavier — la
   scrollbar themee ci-dessous le confirme visuellement. */
#didomi-host .didomi-consent-popup-body_vendors-list {
    max-height: min(44vh, 340px);
    margin-top: 12px !important;
    padding: 12px var(--ddm-pad-list) !important;
    overflow-y: auto;
    background: var(--ddm-bg-soft) !important;
    border: 1px solid var(--ddm-border) !important;
    border-radius: var(--ddm-radius-md) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ddm-ink-soft) transparent;
}

#didomi-host .didomi-consent-popup-body_vendors-list::-webkit-scrollbar {
    width: 8px;
}

#didomi-host .didomi-consent-popup-body_vendors-list::-webkit-scrollbar-track {
    background: transparent;
}

/* La bordure a la couleur du fond (--ddm-bg-soft) simule un espace autour du
   pouce, qui semble flotter plutot que toucher les bords de la piste. */
#didomi-host .didomi-consent-popup-body_vendors-list::-webkit-scrollbar-thumb {
    background-color: var(--ddm-ink-soft);
    border: 2px solid var(--ddm-bg-soft);
    border-radius: 999px;
}

#didomi-host .didomi-consent-popup-body_vendors-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--ddm-ink);
}

#didomi-host .didomi-consent-popup-vendor.didomi-consent-popup-container-click-all {
    margin-bottom: 8px !important;
    padding: 14px var(--ddm-pad-list) !important;
    background: var(--ddm-bg-soft) !important;
    border-bottom: 0 !important;
    border-radius: var(--ddm-radius-md) !important;
}

#didomi-host .didomi-consent-popup-vendor.didomi-consent-popup-container-click-all .didomi-consent-popup-vendor__name {
    font-weight: 700 !important;
}

#didomi-host .didomi-user-information-trigger {
    font-size: var(--ddm-fs-meta) !important;
    font-weight: 500 !important;
    color: var(--ddm-ink-soft) !important;
}

#didomi-host .didomi-user-information-container {
    padding: 12px !important;
    background: var(--ddm-bg-soft) !important;
    border-radius: var(--ddm-radius-chip) !important;
    font-family: var(--ddm-font) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--ddm-ink-soft) !important;
    word-break: break-all !important;
}


/* -----------------------------------------------------------------------------
   10. FOOTER DES MODALES — logo Didomi a gauche, "Enregistrer" a droite
   ----------------------------------------------------------------------------- */

#didomi-host .didomi-consent-popup-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 24px !important;
    padding: 16px 0 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--ddm-border) !important;
}

#didomi-host .didomi-consent-popup-footer .didomi-logo,
#didomi-host .didomi-consent-popup-footer img.didomi-logo,
#didomi-host .didomi-consent-popup-footer svg.didomi-logo {
    flex-shrink: 0;
    width: auto !important;
    max-width: 140px !important;
    height: 28px !important;
    margin: 0 !important;
    color: var(--ddm-ink-soft);
    opacity: .55;
}

#didomi-host .didomi-consent-popup-actions,
#didomi-host .didomi-popup-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 0 !important;
}

/* Bouton "Enregistrer" — base, couleurs et effet stamp vivent dans les regles
   communes de la section 6 ; seul le padding elargi lui est propre. */
#didomi-host #btn-toggle-save,
#didomi-host .didomi-popup-actions .didomi-button-highlight {
    padding: 12px 26px !important;
}

#didomi-host #btn-toggle-save:hover,
#didomi-host #btn-toggle-save:focus-visible,
#didomi-host #btn-toggle-save:active,
#didomi-host .didomi-popup-actions .didomi-button-highlight:hover,
#didomi-host .didomi-popup-actions .didomi-button-highlight:focus-visible,
#didomi-host .didomi-popup-actions .didomi-button-highlight:active {
    background-color: var(--ddm-primary-hover) !important;
}


/* -----------------------------------------------------------------------------
   11. FOCUS — accessibilite clavier
   ----------------------------------------------------------------------------- */

#didomi-host :focus-visible {
    outline: 3px solid var(--ddm-ui-accent) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}

#didomi-host button:focus-visible,
#didomi-host .didomi-button:focus-visible {
    outline-offset: 4px !important;
}


/* -----------------------------------------------------------------------------
   12. RESPONSIVE — mobile
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
    #didomi-host {
        /* Les gouttieres cedent la place au contenu : sur 375px, 40px de
           padding cumule en moins et un panneau de liste resserre rendent
           ~50px de largeur de texte, soit un cinquieme de plus pour les
           libelles imbriques des bases legales (section 9). */
        --ddm-pad-card-x: 14px;
        --ddm-pad-card-y: 18px;
        --ddm-pad-list: 10px;
        --ddm-fs-title: 20px;
        /* 13px et non 12 : --ddm-fs-meta vaut 13px a toutes les tailles, un
           corps a 12 rendait les titres des bases legales plus petits que les
           listes qu'ils coiffent — hierarchie inversee, et le texte le plus
           dense de la modale etait aussi le plus petit. */
        --ddm-fs-body: 13px;
        --ddm-radius-card: 24px;
        /* Reduction proportionnelle a la valeur desktop (56px), meme ratio
           que les autres tokens qui retrecissent sous ce point de rupture. */
        --ddm-cookie-size: 46px;
        /* La puce suit la reduction du corps de texte : a 19px elle depassait
           la hauteur de ligne (18px) une fois --ddm-fs-body a 12. */
        --ddm-bullet-size: 16px;
        --ddm-bullet-offset: 26px;
    }

    /* Les 16px restants de chaque cote laissent respirer l'ombre stamp et
       absorbent une eventuelle scrollbar : 100vw l'inclut, la carte deborderait
       sans cette reserve. Le padding vient des tokens ci-dessus plutot que
       d'une valeur en dur, pour que le lien "continuer" (positionne en absolu
       sur --ddm-pad-card-x) reste aligne sur le bord du contenu. */
    #didomi-host .didomi-popup-container {
        width: calc(100vw - 16px) !important;
        max-width: 100% !important;
        padding: var(--ddm-pad-card-y) var(--ddm-pad-card-x) !important;
    }


    /* Le panneau gagne aussi en hauteur : la carte mobile est plus haute que
       large, borner la liste a 44vh y laissait un vide sous le footer. */
    #didomi-host .didomi-consent-popup-body_vendors-list {
        max-height: min(56vh, 460px);
    }

    /* Illustration cookie — plus petite et decalee pour liberer le coin droit
       ou passe le lien "continuer sans accepter". Les deux rendus (SVG inline
       et fallback ::before) suivent le meme deplacement. */
    #didomi-host .ddm-cookie-illustration,
    #didomi-host .didomi-popup-container::before {
        left: auto;
        right: var(--ddm-pad-card-x);
    }

    #didomi-host .didomi-popup-notice-text-container {
        max-width: 100% !important;
        margin-top: 8px !important;
    }

    #didomi-host .didomi-continue-without-agreeing {
        top: 14px !important;
        right: var(--ddm-pad-card-x) !important;
    }

    /* Boutons empiles, "Tout accepter" en haut grace au flex-order */
    #didomi-host .didomi-popup-notice-buttons,
    #didomi-host .didomi-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* La notice, elle, repasse sur deux colonnes : empilee, sa barre d'actions
       mangeait 218px des 602px d'un ecran courant, soit 37% de la hauteur —
       collee, elle masquait le texte qu'elle est censee laisser lire. Les deux
       actions principales cote a cote et le lien de personnalisation en texte
       la ramenent a ~128px, 90px rendus a la lecture.

       Le selecteur passe par .didomi-popup-container pour ne viser que la
       notice : .didomi-buttons ci-dessus sert aussi aux modales, dont le pied
       de page reste empile. */
    #didomi-host .didomi-popup-container .didomi-popup-notice-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* "Tout accepter" et "Tout refuser" partagent la ligne a parts strictement
       egales — flex: 1 1 0 repartit sur la base, pas sur la longueur du
       libelle, donc les deux boutons font la meme largeur quelle que soit la
       langue. C'est aussi ce que demande la CNIL : refuser doit etre aussi
       simple et aussi visible qu'accepter.

       min-width: 0 les rend compressibles : sans lui, la largeur minimale du
       contenu empeche le partage et le second bouton passe a la ligne des que
       la traduction s'allonge (l'allemand, typiquement). */
    #didomi-host .didomi-popup-notice-buttons #didomi-notice-agree-button,
    #didomi-host .didomi-popup-notice-buttons #didomi-notice-disagree-button,
    #didomi-host .didomi-popup-notice-buttons #didomi-notice-reject-button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* "En savoir plus" : lien de personnalisation, pas une troisieme action de
       meme rang. flex-basis a 100% le renvoie seul sur la ligne suivante.
       Le gabarit de bouton (section 6) est entierement neutralise — fond,
       bordure, ombre stamp, hauteur minimale — pour le rendre au texte.

       Il reste un <button> : le clic, le focus et le libelle accessible sont
       inchanges, seule sa presentation descend d'un cran dans la hierarchie. */
    #didomi-host .didomi-popup-notice-buttons #didomi-notice-learn-more-button {
        flex: 1 0 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--ddm-ink-soft) !important;
        font-size: var(--ddm-fs-meta) !important;
        font-weight: 500 !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    #didomi-host .didomi-popup-notice-buttons #didomi-notice-learn-more-button:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--ddm-ink) !important;
    }

    /* Cible de tap pleine largeur : 50px de haut, au-dessus du minimum
       recommande de 44px. */
    #didomi-host .didomi-components-button,
    #didomi-host .didomi-button,
    #didomi-host #didomi-notice-learn-more-button {
        width: 100% !important;
        min-height: 50px !important;
    }

    /* Le retrait de 30px alignait la description sous le nom du partenaire :
       a cette largeur il coute plus qu'il n'apporte. 8px suffisent a la lire
       comme un bloc subordonne, le reste va au texte. */
    #didomi-host .didomi-consent-popup-vendor__description {
        padding-left: 8px !important;
    }

    /* Les 96px de min-width des pilules (section 8) sont calibres pour les
       categories de cookies, en pleine largeur de carte ; dans cette liste
       imbriquee, 2 x 96 + 8 de gap depassent la place disponible sous 375px.
       max-width + min-width: 0 les rend compressibles : elles gardent leur
       taille naturelle quand la ligne le permet et se resserrent sinon, au
       lieu d'imposer une largeur que le conteneur ne peut pas donner.
       display: flex sur les deux wrappers (blocs par defaut) est ce qui
       transmet la contrainte jusqu'aux pilules. */
    #didomi-host .didomi-consent-popup-vendor__description .didomi-consent-popup-vendor__right_aligned_buttons,
    #didomi-host .didomi-consent-popup-vendor__description .didomi-consent-popup-vendor__buttons,
    #didomi-host .didomi-consent-popup-vendor__description .didomi-components-radio {
        display: flex !important;
        max-width: 100% !important;
    }

    #didomi-host .didomi-consent-popup-vendor__description .didomi-components-radio__option {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}


/* -----------------------------------------------------------------------------
   13. REDUCED MOTION
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #cookieButton,
    #didomi-host *,
    #didomi-host *::before,
    #didomi-host *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}