/** * YEP'S — Habillage du consentement cookies (tarteaucitron.js). * * tarteaucitron est lancé avec useExternalCss:true : aucun style interne, on * fournit tout ici, scopé sous #tarteaucitronRoot pour ne rien faire fuiter. * Objectifs : charte YEP'S (bleu sombre / jaune / Futura / rayons), conformité * CNIL (boutons « Tout accepter » et « Tout refuser » de POIDS VISUEL ÉGAL, * différenciés par la couleur seule), et RGAA (focus visible jaune, contrastes * AA, prefers-reduced-motion). * * Tokens consommés (définis par theme.json sur :root) : * --wp--preset--color--bleu-sombre #1A1A2E * --wp--preset--color--bleu-yeps #2B2D6E * --wp--preset--color--jaune-yeps #FFD100 * --wp--preset--font-family--futura * --wp--custom--yeps--radius--md / --lg (16px / 24px) * --wp--custom--yeps--motion--duration--base / easing--out */ /* Repli si les tokens ne sont pas chargés (sécurité). */ #tarteaucitronRoot { --yc-bg: var(--wp--preset--color--bleu-sombre, #1A1A2E); --yc-bg-2: var(--wp--preset--color--bleu-yeps, #2B2D6E); --yc-accent: var(--wp--preset--color--jaune-yeps, #FFD100); --yc-fg: #FFFFFF; --yc-font: var(--wp--preset--font-family--futura, "Helvetica Neue", Arial, sans-serif); --yc-radius: var(--wp--custom--yeps--radius--md, 16px); --yc-radius-lg: var(--wp--custom--yeps--radius--lg, 24px); --yc-ease: var(--wp--custom--yeps--motion--easing--out, cubic-bezier(0.2, 0.7, 0.1, 1)); --yc-dur: var(--wp--custom--yeps--motion--duration--base, 240ms); } #tarteaucitronRoot, #tarteaucitronRoot * { box-sizing: border-box; font-family: var(--yc-font); } /* Contenu réservé aux lecteurs d'écran (titre du panneau #tac_title, libellé de fermeture). tarteaucitron pose la classe `tac_visually-hidden` mais, en useExternalCss, n'en fournit pas la définition : sans cette règle, le titre « Panneau de gestion des cookies » s'affiche en clair au bas de #tarteaucitronRoot (visible quand la page est scrollée tout en bas). */ #tarteaucitronRoot .tac_visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ────────────────────────────────────────────── * Bandeau de consentement — STICKY EN BAS, contenu centré * ────────────────────────────────────────────── */ #tarteaucitronRoot #tarteaucitronAlertBig { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; /* au-dessus du contenu, de la bannière app (70) et du chat (99999) */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; /* contenu (texte + boutons) centré dans la barre */ gap: 16px 12px; /* écart message ↔ boutons (et entre boutons) */ margin: 0; padding: clamp(14px, 2.5vw, 20px) clamp(16px, 4vw, 32px); padding-bottom: calc(clamp(14px, 2.5vw, 20px) + env(safe-area-inset-bottom, 0px)); background: var(--yc-bg); color: var(--yc-fg); border-top: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 -8px 32px rgba(11, 11, 20, 0.35); text-align: center; } /* tarteaucitron force `display:block` en inline sur le bandeau à l'ouverture, ce qui neutralisait le flex (et donc le `gap` message ↔ boutons). On rétablit le flex UNIQUEMENT quand le bandeau est visible (classe posée sur le root), sans casser le `display:none` de fermeture posé par la lib. */ #tarteaucitronRoot.tarteaucitronBeforeVisible #tarteaucitronAlertBig { display: flex !important; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert { flex: 0 1 auto; /* ne s'étire pas : le groupe reste centré */ margin: 0; font-size: var(--wp--preset--font-size--medium, 16px); line-height: 1.45; color: var(--yc-fg); } /* Quand le panneau de paramétrage est ouvert (classe posée sur par tarteaucitron), on masque le bandeau du bas (le panneau centré + son voile prennent le relais). */ body.tarteaucitron-modal-open #tarteaucitronRoot #tarteaucitronAlertBig { display: none !important; } /* ────────────────────────────────────────────── * Boutons « Tout accepter » / « Tout refuser » : MÊME GABARIT (CNIL) * Seule la couleur les distingue, jamais la taille ni la hiérarchie. * ────────────────────────────────────────────── */ #tarteaucitronRoot .tarteaucitronCTAButton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 168px; min-height: 48px; /* cible tactile RGAA */ margin: 0; padding: 12px 22px; font-family: var(--yc-font); font-size: var(--wp--preset--font-size--medium, 16px); font-weight: 700; line-height: 1.2; text-align: center; border: 2px solid transparent; border-radius: 999px; /* pilule, identique aux boutons du header */ cursor: pointer; transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease), border-color var(--yc-dur) var(--yc-ease), transform var(--yc-dur) var(--yc-ease); } /* « Tout accepter » : fond jaune, texte sombre (contraste 11.6:1). */ #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2, #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow { background: var(--yc-accent); color: var(--yc-bg); border-color: var(--yc-accent); } /* « Tout refuser » : contour clair, texte blanc (contraste AA), même taille. */ #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2, #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny { background: transparent; color: var(--yc-fg); border-color: rgba(255, 255, 255, 0.55); } /* Hover identique au header : seule la couleur change (jaune éclairci sur « Tout accepter », léger voile blanc sur « Tout refuser »), sans décalage vertical. L'enfoncement est réservé au clic (:active, plus bas). */ #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow:hover { background: #ffd84d; } #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny:hover { background: rgba(255, 255, 255, 0.08); } /* Micro-interaction du header : enfoncement léger au clic. */ #tarteaucitronRoot .tarteaucitronCTAButton:active, #tarteaucitronRoot #tarteaucitronCloseAlert:active { transform: scale(0.98); } /* « Personnaliser » : vrai bouton (style ghost, contour discret), distinct des deux CTA de poids égal mais clairement cliquable. */ #tarteaucitronRoot #tarteaucitronCloseAlert { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; background: transparent; color: var(--yc-fg); font-family: var(--yc-font); font-size: var(--wp--preset--font-size--medium, 16px); font-weight: 700; line-height: 1.2; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px; /* pilule, identique aux boutons du header */ cursor: pointer; transition: background-color var(--yc-dur) var(--yc-ease), border-color var(--yc-dur) var(--yc-ease); } #tarteaucitronRoot #tarteaucitronCloseAlert:hover { background: rgba(255, 255, 255, 0.08); } /* Le lien « politique de confidentialité » du bandeau bas (#tarteaucitronPrivacyUrl) est retiré du DOM par yeps-cookies-init.js : aucun style requis ici. La politique reste accessible via le panneau (#tarteaucitronPrivacyUrlDialog) et le pied de page. */ /* Pastilles check/croix décoratives. */ #tarteaucitronRoot .tarteaucitronCheck, #tarteaucitronRoot .tarteaucitronCross { display: none; /* sobriété : le libellé texte suffit, évite le bruit visuel */ } /* ────────────────────────────────────────────── * Panneau « Gestion des cookies » (paramétrage détaillé) * ────────────────────────────────────────────── */ /* Verrou du scroll de l'arrière-plan quand le panneau est ouvert. tarteaucitron pose .tarteaucitron-modal-open-noscroll sur et .tarteaucitron-modal-open sur ; en useExternalCss, la règle de blocage doit être fournie ici. */ html.tarteaucitron-modal-open-noscroll, html.tarteaucitron-modal-open-noscroll body, body.tarteaucitron-modal-open { overflow: hidden !important; } /* iOS : `overflow:hidden` ne bloque pas le scroll tactile ni le chaînage du scroll depuis le corps scrollable du panneau vers l'arrière-plan. On fige le body en position:fixed (top = -scrollY, posé/restauré par yeps-cookies-init.js) tant que le panneau est ouvert. Même technique que le chat et la recherche. */ body.yeps-cookies-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } #tarteaucitronRoot #tarteaucitronBack { position: fixed; inset: 0; z-index: 100001; background: rgba(11, 11, 20, 0.6); display: none; } #tarteaucitronRoot #tarteaucitron { display: none; /* masqué par défaut ; tarteaucitron passe en block à l'ouverture */ position: fixed; z-index: 100002; /* Centrage vertical ET horizontal. On force `top` en !important car tarteaucitron pose un `top` inline (calcul de sa max-height) qui, sinon, colle le panneau en haut de l'écran. */ top: 50% !important; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 720px); max-height: 90vh !important; /* override la max-height inline de tarteaucitron */ overflow: hidden; /* le scroll se fait dans le corps (flex), pas ici */ margin: 0; padding: 0; background: #fff; color: var(--wp--custom--yeps--color--text--dark, #1A1A2E); border-radius: var(--yc-radius-lg); box-shadow: 0 24px 64px rgba(11, 11, 20, 0.4); } /* À l'ouverture (classe posée sur ), le panneau devient une colonne flex : corps scrollable + footer fixe. On scope sur la classe d'ouverture pour ne pas surcharger le display:none/​block que tarteaucitron pose en inline. */ body.tarteaucitron-modal-open #tarteaucitronRoot #tarteaucitron { display: flex !important; flex-direction: column; } /* En-tête : croix de fermeture (SVG maison injecté en JS), ronde, haut-droite. */ #tarteaucitronRoot #tarteaucitronClosePanel { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--yc-fg); /* croix blanche sur le header bleu */ border: 0; border-radius: 999px; cursor: pointer; transition: background-color var(--yc-dur) var(--yc-ease); } #tarteaucitronRoot #tarteaucitronClosePanel svg { width: 22px; height: 22px; } #tarteaucitronRoot #tarteaucitronClosePanel:hover { background: rgba(255, 255, 255, 0.15); } /* ── Lignes de service : libellé à gauche, SWITCH à droite ──────────── */ /* (on exclut la ligne maître .tarteaucitronMainLine qui sert au footer) */ #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) { display: flex; align-items: center; justify-content: space-between; /* libellé à gauche, switch poussé à droite */ gap: 24px; /* écart minimal libellé ↔ switch */ padding: 14px clamp(16px, 4vw, 28px); } /* Séparateur UNIQUEMENT entre plusieurs items : la classe yeps-line-sep est posée en JS (decoratePanel) sur chaque ligne visible sauf la dernière. Un item unique n'a donc aucun trait, et il n'y a jamais de trait terminal. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.yeps-line-sep:not(.tarteaucitronMainLine) { border-bottom: 1px solid rgba(26, 26, 46, 0.08); } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronName { flex: 1 1 auto; /* occupe la largeur dispo → switch aligné à droite */ min-width: 0; /* autorise le retour à la ligne du libellé */ text-align: left; font-weight: 700; font-size: 15px; color: var(--wp--custom--yeps--color--text--dark, #1A1A2E); } /* Nom du service sur sa propre ligne → les liens (En savoir plus / Voir le site officiel) passent automatiquement à la ligne en dessous. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronName .tarteaucitronH3 { display: block; margin-bottom: 5px; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronName a { font-weight: 500; font-size: 13px; } /* Switch : piste (::before) + thumb (::after) ; les boutons Autoriser/Interdire deviennent des cibles invisibles couvrant la piste. OFF = gris / Autoriser cliquable ; ON (.tarteaucitronIsAllowed) = bleu YEP'S / thumb à droite / Interdire cliquable → un clic bascule. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk { position: relative; flex: 0 0 auto; width: 48px; height: 26px; margin: 0; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #c7c8d2; transition: background-color 0.18s ease; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 11, 20, 0.3); transition: transform 0.18s ease; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk button { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; z-index: 2; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk button.tarteaucitronDeny { display: none; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed:not(.tarteaucitronMainLine) .tarteaucitronAsk::before { background: var(--yc-bg-2); } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed:not(.tarteaucitronMainLine) .tarteaucitronAsk::after { transform: translateX(22px); } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed:not(.tarteaucitronMainLine) .tarteaucitronAsk button.tarteaucitronAllow { display: none; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed:not(.tarteaucitronMainLine) .tarteaucitronAsk button.tarteaucitronDeny { display: block; } /* Focus clavier visible : anneau jaune autour de la piste. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) .tarteaucitronAsk:focus-within::before { outline: 3px solid var(--yc-accent); outline-offset: 2px; } /* Pastilles check/croix décoratives masquées dans le switch. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronCheck, #tarteaucitronRoot #tarteaucitron .tarteaucitronCross { display: none; } /* ── Titre (header) + texte explicatif ──────────────────────────────── */ #tarteaucitronRoot #tarteaucitron #dialogTitle, #tarteaucitronRoot #tarteaucitron .tarteaucitronH1 { display: block; padding: 18px 56px; /* room à gauche/droite pour la croix */ /* Même typographie que le titre du dialogue du chat IA (police système, 17px). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 17px; background: var(--yc-bg-2); /* header bleu YEP'S (comme le dialogue du chat) */ color: var(--yc-fg); text-align: center; } #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo { padding: 16px clamp(16px, 4vw, 28px); margin: 0; font-family: var(--yc-font); font-size: var(--wp--preset--font-size--medium, 16px); line-height: 1.5; color: var(--wp--custom--yeps--color--text--muted, #555555); border: 0; text-align: center; } #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo p { margin: 0; } /* Lien « politique cookies » injecté dans l'info du panneau (remplace le bouton natif #tarteaucitronPrivacyUrlDialog, non charté). Vrai lien hypertexte sur fond clair, couleur de marque. */ #tarteaucitronRoot #tarteaucitron a#tarteaucitronPrivacyUrlDialog.yeps-cookies-policy-link { display: inline-block; margin-top: 6px; color: var(--yc-bg-2); font-family: var(--yc-font); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } #tarteaucitronRoot #tarteaucitron a#tarteaucitronPrivacyUrlDialog.yeps-cookies-policy-link:hover, #tarteaucitronRoot #tarteaucitron a#tarteaucitronPrivacyUrlDialog.yeps-cookies-policy-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Ligne maître « tout accepter / refuser » : on garde les 2 boutons (poids égal), on masque le libellé technique. */ #tarteaucitronRoot #tarteaucitronMainLineOffset { display: block; padding: 0; border: 0; } #tarteaucitronRoot #tarteaucitronMainLineOffset .tarteaucitronName { display: none; } /* ── Footer : Tout refuser / Tout accepter / Enregistrer, centré ─────── */ /* (#tarteaucitronScrollbarAdjust est la zone des boutons de la ligne maître ; on la fixe en bas du panneau. Le bouton Enregistrer y est déplacé en JS.) */ #tarteaucitronRoot #tarteaucitronScrollbarAdjust { flex: 0 0 auto; /* pied de panneau fixe (corps scrolle au-dessus) */ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 16px clamp(12px, 3vw, 20px); background: #fff; border-top: 1px solid rgba(26, 26, 46, 0.12); border-radius: 0 0 var(--yc-radius-lg) var(--yc-radius-lg); } /* Tout accepter ET Tout refuser : MÊME style (poids égal, aucun mis en avant). */ #tarteaucitronRoot #tarteaucitronAllAllowed, #tarteaucitronRoot #tarteaucitronAllDenied { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; font-family: var(--yc-font); font-weight: 700; font-size: 14px; line-height: 1.2; background: #fff; color: var(--yc-bg-2); border: 2px solid var(--yc-bg-2); border-radius: 999px; /* pilule, identique aux boutons du header */ cursor: pointer; transition: background-color var(--yc-dur) var(--yc-ease), transform var(--wp--custom--yeps--motion--duration--fast, 140ms); } #tarteaucitronRoot #tarteaucitronAllAllowed:hover, #tarteaucitronRoot #tarteaucitronAllDenied:hover { background: rgba(43, 45, 110, 0.06); } /* Enregistrer : CTA primaire jaune. */ #tarteaucitronRoot #tarteaucitronScrollbarAdjust #tarteaucitronSaveButton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; font-family: var(--yc-font); font-weight: 700; font-size: 14px; line-height: 1.2; background: var(--yc-accent); color: var(--yc-bg); border: 2px solid var(--yc-accent); border-radius: 999px; /* pilule, identique aux boutons du header */ cursor: pointer; transition: background-color var(--yc-dur) var(--yc-ease), transform var(--wp--custom--yeps--motion--duration--fast, 140ms); } #tarteaucitronRoot #tarteaucitronScrollbarAdjust #tarteaucitronSaveButton:hover { background: #ffd84d; /* jaune éclairci du header (au lieu de #ffdd33) */ } /* Enfoncement léger au clic, comme les boutons du header. */ #tarteaucitronRoot #tarteaucitronAllAllowed:active, #tarteaucitronRoot #tarteaucitronAllDenied:active, #tarteaucitronRoot #tarteaucitronScrollbarAdjust #tarteaucitronSaveButton:active { transform: scale(0.98); } /* ── Corps scrollable (flex) : seul le corps scrolle, le footer reste fixe ─ */ #tarteaucitronRoot #tarteaucitron #tarteaucitronServices { flex: 1 1 auto; min-height: 0; /* indispensable pour qu'un enfant flex puisse scroller */ overflow-y: auto !important; /* Coupe le chaînage du scroll vers la page quand on atteint les extrémités du corps du panneau (complément au verrou position:fixed du body). */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: none !important; } /* ── Élagage : ne garder que le texte + l'item Vidéos (YouTube) ──────── */ /* Catégories SANS service actif (APIs, pub, réseaux sociaux…) → masquées. */ #tarteaucitronRoot #tarteaucitron #tarteaucitronServices li[id^="tarteaucitronServicesTitle"]:not(:has(.tarteaucitronLine)) { display: none !important; } /* Bloc « cookies obligatoires », liste détaillée des cookies, compteurs. */ #tarteaucitronRoot #tarteaucitron #tarteaucitronServicesTitle_mandatory, #tarteaucitronRoot #tarteaucitron #tarteaucitronCookiesListContainer, #tarteaucitronRoot #tarteaucitron .tarteaucitronStatusInfo, #tarteaucitronRoot #tarteaucitron #tarteaucitronNoServicesTitle { display: none !important; } /* Dans la catégorie restante, masquer le libellé/description de catégorie : on ne conserve que la (les) ligne(s) de service. */ #tarteaucitronRoot #tarteaucitron #tarteaucitronServices li[id^="tarteaucitronServicesTitle"] > :not(ul[id^="tarteaucitronServices_"]) { display: none !important; } /* Reset des listes tarteaucitron : sans ça, le