/* * Bandeau et fenêtre de préférences cookies (CookieYes) — habillage refonte. * * Maquettes : Figma « Home », node 1-91488 (bandeau) et 1-91527 (préférences). * * ── Pourquoi une feuille d'override et pas un composant ── * Le widget n'existe PAS dans le dépôt : il est injecté à l'exécution par Google * Tag Manager (cdn-cookieyes.com/client_data/…/banner.js), qui fabrique tout le * DOM `.cky-*` et sa feuille de style. Il n'y a donc rien à « redesigner en * place » au sens de CLAUDE.md — le seul levier depuis le dépôt est de repeindre * un balisage qu'on ne choisit pas. D'où ce fichier, chargé après `global.css` * dans `Head.astro`. * * ── Pourquoi `!important` partout ── * Deux raisons cumulées, aucune contournable : * 1. CookieYes pose des styles EN LIGNE (couleurs du tableau de bord) sur la * barre, le titre, chaque bouton, chaque interrupteur. Une déclaration * d'auteur `!important` est le seul niveau de cascade qui batte un style * en ligne normal (même règle que le `@media print` de `Head.astro`). * 2. Sa feuille est ajoutée au `` À L'EXÉCUTION, donc APRÈS celle-ci : * à spécificité égale c'est la dernière qui gagne. Un `@layer` ne sauverait * rien — une règle non calquée bat toujours une règle calquée. * Les rares propriétés que CookieYes ne déclare pas s'écrivent sans, pour que la * lecture distingue « je reprends la main » de « je pose une valeur neuve ». * * ── Ce qui ne peut PAS se faire d'ici (tableau de bord CookieYes) ── * cf. `docs/apres-mise-en-prod.md`. En résumé : les TEXTES du bandeau et des * catégories, l'affichage de la croix de fermeture du bandeau (option « bouton * de fermeture », absente du DOM en prod aujourd'hui — les styles ci-dessous * l'attendent et ne coûtent rien tant qu'elle n'existe pas), et la position du * bandeau (bas-gauche, conservée telle quelle). */ :root { /* Filet pointillé du widget. La période vient des tokens du site (`--dash-on` / `--dash-period`), mais PAS le dégradé lui-même : le `currentColor` de `--dash-h` se résout sur l'élément qui pose le filet, c'est-à-dire dans l'encre du texte à 100 % au lieu du filet à 30 % (cf. l'avertissement de `variables.css`). D'où une déclinaison qui nomme sa couleur. */ --cky-dash: repeating-linear-gradient( to right, var(--color-dark-30) 0 var(--dash-on), transparent var(--dash-on) var(--dash-period) ); /* Glyphes en `mask-image` et non en `background-image` : une URI de données ne connaît pas `currentColor`, alors qu'un masque prend la couleur de fond de l'élément — donc le token, donc le thème de la navbar. */ /* Flèche de retour, 12 × 8 — MÊME tracé que `ArrowButton.astro`. Orientée comme son `direction="right"` : `scaleY(-1) rotate(180deg)`, appliqué sur l'élément (le crochet doit basculer avec la flèche, pas se refléter). */ --cky-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M4%208L0%204L4%200L4.93333%200.933333L2.53333%203.33333H10.6667V0.666667H12V4.66667H2.53333L4.93333%207.06667L4%208Z%22%2F%3E%3C%2Fsvg%3E"); /* Croix de fermeture, 16 × 16 (maquette). */ --cky-close: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M7.05719%207.93294L4.22876%205.10452L5.17157%204.16171L8%206.99013L10.8284%204.16171L11.7712%205.10452L8.94281%207.93294L11.7712%2010.7614L10.8284%2011.7042L8%208.87575L5.17157%2011.7042L4.22876%2010.7614L7.05719%207.93294Z%22%2F%3E%3C%2Fsvg%3E"); /* Le « G » de la marque. COPIE des tracés de `src/assets/refonte/galadrim-g.svg` (même viewBox, `currentColor` remplacé par `black` — un masque n'utilise que l'alpha) : une feuille de `public/css` ne peut pas faire d'import Vite `?raw`. ⚠️ Toute reprise du glyphe doit être répercutée ici, comme dans `public/img/favicon.svg`. */ --cky-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020.947%2021.7329%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.7304%2021.7329C8.71531%2021.7329%206.89164%2021.2492%205.25941%2020.282C3.62718%2019.2946%202.33752%2017.9646%201.39042%2016.2921C0.463473%2014.6196%200%2012.7858%200%2010.7909C0%208.79591%200.473548%206.97225%201.42065%205.31986C2.36774%203.66748%203.64733%202.36774%205.25941%201.42065C6.89164%200.473548%208.70523%200%2010.7002%200C12.4332%200%2014.0553%200.352643%2015.5666%201.05793C17.078%201.76321%2018.3173%202.70023%2019.2845%203.86899C19.8429%204.54369%2020.2636%205.24524%2020.5466%205.97366H17.8611H13.969C13.5832%205.68014%2013.1384%205.45213%2012.6347%205.28964C12.0301%205.06798%2011.3853%204.95715%2010.7002%204.95715C9.65233%204.95715%208.71531%205.20903%207.88912%205.71281C7.06293%206.21658%206.41809%206.91179%205.95462%207.79844C5.49115%208.68508%205.25941%209.68256%205.25941%2010.7909C5.25941%2011.9395%205.5113%2012.9672%206.01507%2013.874C6.51885%2014.7808%207.21406%2015.4961%208.1007%2016.02C9.0075%2016.5238%2010.015%2016.7757%2011.1234%2016.7757C12.1446%2016.7757%2013.0277%2016.6283%2013.7725%2016.3335V19.5565V21.4377C12.8077%2021.6345%2011.7936%2021.7329%2010.7304%2021.7329Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M20.947%2013.3601V8.94704H17.8611H16.5339V13.3601H20.947Z%20M16.5339%2019.5565H18.2837C19.4094%2018.7799%2020.2972%2017.8429%2020.947%2016.7455V13.3601H16.5339V14.4483V19.5565Z%20M18.2837%2019.5565H20.947V16.7455C20.2972%2017.8429%2019.4094%2018.7799%2018.2837%2019.5565Z%20M16.5339%2013.3601V8.94704H10.3375V13.3601H13.7725H14.2367H15.8387H16.5339Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); /* Fond de l'interrupteur ACTIF : la photo bichromique de la maquette, en URI de données (~5 ko) plutôt qu'en fichier. `public/img` est fermé aux nouveaux assets (cf. CLAUDE.md) et la banque S3 écrit en base de prod — pour une texture de 56 × 32, l'inliner évite les deux et supprime une requête. Rendue à 168 px de large : 3× la cote CSS, ce qui couvre un écran retina jusqu'à `--page-scale` 1,5. */ --cky-toggle-on: url("data:image/webp;base64,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"); } /* ══════════════════════════════════════════════════════════════════════════ Voile ═════════════════════════════════════════════════════════════════════════ */ /* Même recette que le voile du méga-menu (`.megaScrim`, Navbar) : le sombre du thème à 30 % plus un flou. `.cky-overlay` porte son opacité sur l'ÉLÉMENT et non sur la couleur — d'où 0.3 ici et une couleur pleine. */ .cky-overlay { background: var(--color-dark) !important; opacity: 0.3 !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ══════════════════════════════════════════════════════════════════════════ Boutons — recette commune au bandeau et à la fenêtre Reprend `.button` de global.css (Fira Mono 12, capitales, carré, sans bordure) : c'est le bouton du site, il n'y a pas de raison d'en inventer un. ═════════════════════════════════════════════════════════════════════════ */ .cky-btn { flex: 0 0 auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; border: none !important; border-radius: 0 !important; font-family: "Fira Mono", monospace !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; transition: background-color 200ms ease-in-out; } /* CookieYes assombrit indistinctement au survol (`filter: brightness(.9)`), ce qui grise le bouton clair au lieu de l'appuyer. Chaque variante prend donc son propre survol, comme `.button` / `ArrowButton`. */ .cky-btn:hover { filter: none !important; } .cky-btn-customize, .cky-btn-preferences { background-color: var(--color-white) !important; color: var(--color-dark) !important; } .cky-btn-reject { background-color: var(--color-creme) !important; color: var(--color-dark) !important; } .cky-btn-accept { background-color: var(--color-dark) !important; color: var(--color-white) !important; } @media (hover: hover) { .cky-btn-customize:hover, .cky-btn-preferences:hover { background-color: var(--color-creme) !important; } .cky-btn-reject:hover { background-color: var(--color-dark-10) !important; } .cky-btn-accept:hover { background-color: var(--color-button-bg-hover) !important; } } /* Flèche du bouton d'acceptation. La boîte fait 16 (cote de la maquette) et le glyphe 12 × 8 dedans : garder les deux séparées préserve la gouttière dessinée (6 de gap + 2 de marge interne). */ .cky-btn-accept::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background-color: currentColor; mask-image: var(--cky-arrow); mask-size: 12px 8px; mask-position: center; mask-repeat: no-repeat; transform: scaleY(-1) rotate(180deg); } /* ══════════════════════════════════════════════════════════════════════════ Bandeau (Figma 1-91488) ═════════════════════════════════════════════════════════════════════════ */ .cky-consent-container { width: 640px !important; border-radius: 0 !important; } .cky-consent-container .cky-consent-bar { box-sizing: border-box; padding: 24px !important; border: none !important; border-radius: 0 !important; background-color: var(--color-white) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; } /* * La maquette pose trois zones : la tuile de marque et le texte sur une * première ligne, puis le filet et les boutons SUR TOUTE LA LARGEUR — filet * compris, il passe sous la tuile. Le balisage, lui, enferme le texte ET les * boutons dans un même `.cky-notice-group`. * * D'où une grille sur `.cky-notice` et `display: contents` sur le groupe : ses * deux enfants deviennent des éléments de la grille et peuvent donc se placer * l'un dans la colonne du texte, l'autre à cheval sur toutes. Le groupe est un * `
` sans rôle ni libellé — le retirer de la boîte ne retire rien de * l'arbre d'accessibilité. */ .cky-notice { position: relative; display: grid !important; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 20px; align-items: start; } /* La croix de fermeture est absolue (CookieYes la sort du flux) : la troisième colonne lui réserve sa place pour que le texte ne coure pas dessous. Elle n'existe que si l'option est activée au tableau de bord, d'où le `:has()` — sans elle, pas de colonne vide. */ .cky-consent-bar:has(.cky-banner-btn-close) .cky-notice { grid-template-columns: 48px 1fr 36px; } /* Le titre n'existe pas dans la maquette : la tuile de marque en tient lieu. ⚠️ `display: none` le retire AUSSI de l'arbre d'accessibilité — c'est un `role="heading" aria-level="2"`, il disparaît donc de la liste des titres. Ce qui reste annoncé, c'est le `aria-label` de la région, porté par `.cky-consent-container` : un attribut DISTINCT, que cette règle ne touche pas. Le bandeau garde donc son nom accessible, mais perd son titre interne. */ .cky-notice .cky-title { display: none !important; } /* Tuile de marque : le carré crème… */ .cky-notice::before { content: ""; grid-column: 1; grid-row: 1; width: 48px; height: 48px; background-color: var(--color-creme); } /* …et le « G » posé dessus. Cotes et position exactes de la maquette : la boîte de l'asset est à 15,75 / 15,75 dans la tuile, le glyphe fait 15,903 × 16,5 (le reste de la boîte est le vide à droite du bras du G). */ .cky-notice::after { content: ""; position: absolute; top: 15.75px; left: 15.75px; width: 15.903px; height: 16.5px; background-color: var(--color-dark); mask-image: var(--cky-logo); mask-size: 100% 100%; } .cky-notice-group { display: contents !important; } .cky-notice-des { grid-column: 2; grid-row: 1; align-self: center; font-family: "Jost", sans-serif; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -0.12px; color: var(--color-dark-60) !important; } .cky-notice-des * { font-size: 12px !important; } .cky-consent-bar .cky-notice-des p { margin: 0 !important; } /* Le lien de la politique reprend l'encre du texte et son souligné. CookieYes le fige en bleu, l'entoure d'une bordure et l'empêche de se couper (`white-space: nowrap`), ce qui déborde la carte sur les libellés longs. La maquette ne le souligne pas dans le bandeau, mais le souligne dans la fenêtre : on garde le souligné — c'est le seul repère qui distingue le lien de son paragraphe, la couleur étant la même. */ .cky-notice-des a.cky-policy, .cky-notice-des button.cky-policy { font-size: inherit !important; color: inherit !important; border: none !important; background: transparent !important; text-decoration: underline !important; white-space: normal !important; } .cky-notice-btn-wrapper { grid-column: 1 / -1; grid-row: 2; margin-top: 0 !important; padding-top: 20px !important; gap: 4px !important; flex-wrap: nowrap !important; justify-content: flex-end !important; /* Le filet est le bord haut de la rangée de boutons : la gouttière de grille de 20 le place sous le texte, son propre retrait de 20 le décolle des boutons — les deux cotes de la maquette. */ border-top: 1px solid transparent !important; border-image: var(--cky-dash) 1 !important; } .cky-notice-btn-wrapper .cky-btn { height: 36px; padding: 10px 14px !important; } /* Croix de fermeture du bandeau : carré de 36 aligné sur le retrait de la carte, glyphe de 16 à 40 % d'encre. Sans effet tant que l'option n'est pas activée au tableau de bord (l'élément n'est alors pas rendu). */ .cky-consent-bar .cky-banner-btn-close { top: 24px !important; right: 24px !important; width: 36px !important; height: 36px !important; display: inline-flex; align-items: center; justify-content: center; } .cky-consent-bar .cky-banner-btn-close img { display: none !important; } .cky-consent-bar .cky-banner-btn-close::before { content: ""; width: 16px; height: 16px; background-color: var(--color-dark-40); mask-image: var(--cky-close); mask-size: 100% 100%; } /* ══════════════════════════════════════════════════════════════════════════ Fenêtre de préférences (Figma 1-91527) ═════════════════════════════════════════════════════════════════════════ */ .cky-modal { border-radius: 0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; } .cky-preference-center { box-sizing: border-box; width: 560px !important; /* Divisé par l'échelle du site : une unité viewport se résout contre la fenêtre réelle PUIS se fait multiplier par le `zoom` de ``. Sans la division, la fenêtre dépasse l'écran dès que le site est agrandi (cf. `.megaScrim` et `404.astro`). */ max-height: calc(79vh / var(--page-scale)) !important; padding: 24px !important; border: none !important; border-radius: 0 !important; background-color: var(--color-white) !important; color: var(--color-dark) !important; } /* ── En-tête : même trio tuile / titre / croix que le bandeau ── */ .cky-preference-header { position: relative; display: grid !important; grid-template-columns: 48px 1fr 36px; column-gap: 16px; align-items: start; padding: 0 !important; border-bottom: none !important; } .cky-preference-header::before { content: ""; width: 48px; height: 48px; background-color: var(--color-creme); } .cky-preference-header::after { content: ""; position: absolute; top: 15.75px; left: 15.75px; width: 15.903px; height: 16.5px; background-color: var(--color-dark); mask-image: var(--cky-logo); mask-size: 100% 100%; } .cky-preference-header .cky-preference-title { font-family: "Jost", sans-serif; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -0.48px; color: var(--color-dark) !important; } .cky-preference-header .cky-btn-close { width: 36px !important; height: 36px !important; display: inline-flex; align-items: center; justify-content: center; } .cky-preference-header .cky-btn-close img { display: none !important; } .cky-preference-header .cky-btn-close::before { content: ""; width: 16px; height: 16px; background-color: var(--color-dark-40); mask-image: var(--cky-close); mask-size: 100% 100%; } /* ── Corps ── */ .cky-preference-body-wrapper { padding: 0 !important; } .cky-preference-content-wrapper, .cky-preference-body-wrapper .cky-dma-content-wrapper { font-family: "Jost", sans-serif; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -0.12px; color: var(--color-dark-60) !important; } /* Les trois paragraphes d'introduction forment un seul bloc dans la maquette (interlignage 1,3, aucune marge entre eux) — d'où des marges à zéro et le retrait de 16 porté par le premier seulement. */ .cky-preference-content-wrapper { padding: 16px 0 0 !important; } .cky-preference-body-wrapper .cky-dma-content-wrapper { padding: 0 !important; } .cky-preference-content-wrapper *, .cky-dma-content-wrapper * { font-size: 12px !important; } .cky-preference-body-wrapper .cky-preference-content-wrapper p, .cky-preference-body-wrapper .cky-dma-content-wrapper p { margin: 0 !important; } .cky-preference-content-wrapper .cky-show-desc-btn, .cky-dma-content-wrapper a.cky-policy, .cky-dma-content-wrapper button.cky-policy { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; border: none !important; background: transparent !important; text-decoration: underline !important; white-space: normal !important; } .cky-preference-body-wrapper .cky-horizontal-separator { margin: 24px 0 !important; border-bottom: 1px solid transparent !important; border-image: var(--cky-dash) 1 !important; } /* ── Liste des catégories ── */ .cky-accordion-wrapper { display: flex; flex-direction: column; gap: 24px; margin-bottom: 0 !important; } /* La maquette sépare les catégories par du vide, pas par un trait. */ .cky-accordion { border-bottom: none !important; } .cky-accordion .cky-accordion-item { margin-top: 0 !important; } /* Le chevron de gauche disparaît : la maquette met un « + » à droite du titre, dessiné plus bas. Le bouton de titre reste le point de clic. */ .cky-accordion .cky-accordion-chevron { display: none !important; } .cky-accordion-header-wrapper { width: 100% !important; } .cky-accordion-item .cky-accordion-header { gap: 16px; align-items: center; } .cky-accordion-header .cky-accordion-btn { display: inline-flex; align-items: center; gap: 4px; font-family: "Jost", sans-serif; font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -0.16px; color: var(--color-dark) !important; text-align: left; } /* Le « + » (et son « − » à l'ouverture) en deux dégradés plutôt qu'en masque : deux barres pleines n'ont pas besoin d'un tracé, et le repli se fait en retirant la verticale. Boîte de 16, barres de 9,34 × 1,34 — cotes de la maquette. */ .cky-accordion-header .cky-accordion-btn::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 9.34px 1.34px, 1.34px 9.34px; background-position: center; background-repeat: no-repeat; } .cky-accordion.cky-accordion-active .cky-accordion-btn::after { background-size: 9.34px 1.34px, 0 0; } .cky-accordion-header-des { margin: 8px 0 0 !important; font-family: "Jost", sans-serif; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: -0.12px; color: var(--color-dark-60) !important; } .cky-accordion-header-des * { font-size: 12px !important; } .cky-accordion-header-wrapper .cky-accordion-header-des p { margin: 0 !important; } .cky-accordion.cky-accordion-active .cky-accordion-body { padding: 0 !important; margin: 16px 0 0 !important; } /* Tableau d'audit : la maquette ne le dessine pas (les catégories y sont repliées). Il reprend la case en creux du site — fond crème, filet à 15 %, carré — pour ne pas rester en gris CookieYes une fois dépliée. */ .cky-audit-table { border-radius: 0 !important; border-color: var(--color-dark-15) !important; background-color: var(--color-creme) !important; color: var(--color-dark) !important; font-family: "Jost", sans-serif; font-size: 12px !important; line-height: 1.3 !important; } /* ── Interrupteurs ── * * Trois états dans la maquette, et le balisage n'en offre que deux supports : * · éteint → piste transparente, filet POINTILLÉ à 30 %, pastille crème * portant la flèche de retour, à gauche ; * · allumé → piste en photo bichromique, pastille blanche, à droite ; * · toujours actif (« Nécessaire ») → pas de `` du tout, CookieYes * rend un simple ``. L'interrupteur inerte de la maquette * est donc dessiné SUR ce span (cf. plus bas). * * La piste garde son filet de 1px dans les deux états — transparent quand elle * est allumée — pour que la pastille n'ait pas deux géométries à suivre. */ .cky-switch input[type="checkbox"] { box-sizing: border-box; width: 56px !important; height: 32px !important; border-radius: 40px !important; border: 1px dashed var(--color-dark-30) !important; background-color: transparent !important; background-image: none !important; } .cky-switch input[type="checkbox"]:checked { border-color: transparent !important; background-image: var(--cky-toggle-on) !important; background-size: cover !important; background-position: center !important; background-origin: border-box !important; background-clip: border-box !important; } /* Pastille. `left`/`bottom` se mesurent sur la boîte de padding, donc à l'INTÉRIEUR du filet : 3 + 1 = les 4 de la maquette. */ .cky-switch input[type="checkbox"]::before { width: 24px !important; height: 24px !important; left: 3px !important; bottom: 3px !important; background-color: var(--color-creme) !important; } .cky-switch input[type="checkbox"]:checked::before { background-color: var(--color-white) !important; transform: translateX(24px) !important; } /* Flèche portée par la pastille éteinte. CookieYes neutralise `::after` (`display: none`) : on le reprend. */ .cky-switch input[type="checkbox"]::after { content: "" !important; display: block !important; position: absolute; left: 7px; bottom: 11px; width: 12px; height: 8px; background-color: var(--color-dark); mask-image: var(--cky-arrow); mask-size: 100% 100%; transform: scaleY(-1) rotate(180deg); pointer-events: none; } .cky-switch input[type="checkbox"]:checked::after { display: none !important; } /* « Toujours actif » : le texte reste dans l'arbre d'accessibilité (`font-size: 0` le masque sans le retirer, contrairement à `display: none`) et le span devient la piste inerte de la maquette — sombre à 20 %, pastille à droite. */ .cky-accordion-header .cky-always-active { position: relative; flex-shrink: 0; box-sizing: border-box; width: 56px; height: 32px; border-radius: 50px; background-color: var(--color-dark-20); color: transparent !important; font-size: 0 !important; } .cky-accordion-header .cky-always-active::before { content: ""; position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-white); } /* ── Pied ── */ .cky-footer-wrapper { display: flex !important; flex-direction: column; } /* La signature CookieYes passe AU-DESSUS du filet et se centre, sans sa bande grise (elle est imposée en style en ligne, d'où la salve de `!important`). */ [data-cky-tag="detail-powered-by"] { order: -1 !important; padding: 24px 0 0 !important; gap: 6px; justify-content: center !important; border-radius: 0 !important; background-color: transparent !important; color: var(--color-dark-60) !important; font-family: "Jost", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -0.12px; } [data-cky-tag="detail-powered-by"] a { margin-left: 0 !important; } .cky-prefrence-btn-wrapper { margin-top: 24px !important; padding: 24px 0 0 !important; gap: 4px !important; flex-wrap: nowrap !important; justify-content: flex-end !important; border-top: 1px solid transparent !important; border-image: var(--cky-dash) 1 !important; } .cky-prefrence-btn-wrapper .cky-btn { height: 44px; padding: 14px 18px !important; } /* Le DOM sort les boutons dans l'ordre refuser / enregistrer / accepter ; la maquette veut « enregistrer » seul à gauche et le couple refuser-accepter à droite. `order` remet la séquence, `margin-right: auto` ouvre le vide. */ .cky-prefrence-btn-wrapper .cky-btn-preferences { order: 1; margin-right: auto; } .cky-prefrence-btn-wrapper .cky-btn-reject { order: 2; } .cky-prefrence-btn-wrapper .cky-btn-accept { order: 3; } /* ══════════════════════════════════════════════════════════════════════════ Étroit Les seuils sont ceux de CookieYes (440 / 576) : il faut défaire ses propres règles, pas en ajouter à côté. Un seuil s'évalue sur la fenêtre RÉELLE, que la mise à l'échelle ne touche jamais — et sous 1622 px de large le facteur vaut de toute façon 1 (cf. CLAUDE.md). ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .cky-consent-container { width: 100% !important; max-width: 100% !important; } .cky-consent-container .cky-consent-bar { padding: 24px !important; } /* CookieYes remet un retrait latéral sur chaque zone quand la barre perd le sien ; la barre garde le sien ici, donc les zones n'en veulent pas. */ .cky-notice .cky-title, .cky-notice-des, .cky-notice-btn-wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* Il empile aussi les boutons en colonne et les réordonne (accepter en premier). La maquette les garde en ligne, dans l'ordre du DOM. */ .cky-notice-btn-wrapper { flex-direction: row !important; flex-wrap: wrap !important; padding-top: 20px !important; } .cky-notice-btn-wrapper .cky-btn, .cky-prefrence-btn-wrapper .cky-btn { width: auto !important; } .cky-notice-btn-wrapper .cky-btn-customize, .cky-notice-btn-wrapper .cky-btn-reject, .cky-notice-btn-wrapper .cky-btn-accept { order: 0 !important; } .cky-preference-center { width: 100% !important; max-height: calc(100vh / var(--page-scale)) !important; } .cky-prefrence-btn-wrapper { flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 4px !important; } }