/** * Gestion du consentement — Ange Canada. * * Reprend la palette du thème : fond `#232323` (`$dark-txts`), accent `#cdd800` * (`$primary`). La typographie n'est pas déclarée, elle est héritée du corps de page. * * ⚠️ Deux règles ne relèvent pas de l'esthétique et ne doivent pas être « harmonisées » : * * 1. **« Tout refuser » et « Tout accepter » partagent la même classe et donc exactement * la même taille, le même fond et le même contraste.** Rendre l'un plus discret que * l'autre — un contour contre un fond plein, un gris contre un jaune — ferait du refus * le choix le plus coûteux, ce que la Loi 25 n'admet pas. Seul « Personnaliser » est * mis en retrait : ce n'est pas une réponse, c'est un accès au détail. * 2. **La case à cocher est stylée, jamais masquée** (`appearance: none` sur l'élément * lui-même, pas de `opacity: 0` ni de `display: none` avec un faux interrupteur à * côté) : elle reste atteignable au clavier et annoncée par les lecteurs d'écran. */ .ange-consent-banniere, .ange-consent-panneau, .ange-consent { --ange-fond: #232323; --ange-fond-clair: #333435; --ange-texte: #fefefe; --ange-texte-doux: #d5d5d5; --ange-accent: var(--bs-primary, #cdd800); --ange-accent-texte: #232323; --ange-bord: rgba(254, 254, 254, 0.22); /* Au-dessus de tout ce que le thème parent empile. Son plafond est 999999 (`components/_map.scss`, `components/_side-utils.scss` quand le rail est ouvert), avec en dessous le menu hors-écran (100000), l'en-tête (10000) et — le défaut constaté — les puces du slider d'accueil (`layout/_slider.scss` : `.carousel-indicators { z-index: 9999 }`), qui passaient devant le bandeau. Aucun de ces éléments n'ouvre de contexte d'empilement intermédiaire : les valeurs se comparent donc bien entre elles, il faut passer au-dessus du maximum. Le panneau est à +1 du bandeau, il le recouvre. ⚠️ Ne pas redescendre ces valeurs sans revérifier le plafond du parent. */ --ange-plan-banniere: 2000000; --ange-plan-panneau: 2000001; } /* ------------------------------------------------------------------------- * Boutons — communs au bandeau, au panneau et aux espaces réservés * ---------------------------------------------------------------------- */ .ange-consent__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; /* 44px : cible tactile minimale */ padding: 0.625rem 1.25rem; border: 1px solid var(--ange-accent); border-radius: 0.25rem; background: var(--ange-accent); color: var(--ange-accent-texte); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .ange-consent__btn:hover { background: #fefefe; border-color: #fefefe; color: var(--ange-accent-texte); } /* « Personnaliser » : mise en retrait assumée — ce bouton n'est pas une réponse à la question posée, il ouvre le détail. */ .ange-consent__btn--discret { background: transparent; border-color: var(--ange-bord); color: var(--ange-texte); font-weight: 400; text-decoration: underline; } .ange-consent__btn--discret:hover { background: var(--ange-fond-clair); border-color: var(--ange-texte); color: var(--ange-texte); } .ange-consent__lien { padding: 0.25rem 0; border: 0; background: none; color: var(--ange-texte-doux); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; } .ange-consent__lien:hover { color: var(--ange-texte); } .ange-consent-banniere :focus-visible, .ange-consent-panneau :focus-visible, .ange-consent :focus-visible { outline: 2px solid var(--ange-accent); outline-offset: 2px; } /* ------------------------------------------------------------------------- * Bandeau * ---------------------------------------------------------------------- */ /* Le bandeau est le premier enfant de `` — pour l'ordre de tabulation — mais s'affiche en bas : sa place dans le DOM ne dicte pas sa place à l'écran. */ .ange-consent-banniere { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--ange-plan-banniere); border-top: 2px solid var(--ange-accent); background: var(--ange-fond); color: var(--ange-texte); box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.3); } /* `display` explicite : sans cela, la mise en page ci-dessous l'emporterait sur `hidden`. */ .ange-consent-banniere[hidden] { display: none; } .ange-consent-banniere__boite { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; max-width: 82rem; margin: 0 auto; padding: 1.125rem 1.25rem; } .ange-consent-banniere__texte { flex: 1 1 22rem; min-width: 0; } .ange-consent-banniere__titre { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; } .ange-consent-banniere__resume { margin: 0; color: var(--ange-texte-doux); font-size: 0.9375rem; line-height: 1.45; } /* Signal Global Privacy Control / Do Not Track : mention discrète, sous le résumé. On annonce qu'on l'a vu — le bandeau reste affiché, la question reste posée. */ .ange-consent-banniere__signal { margin: 0.5rem 0 0; padding-left: 0.625rem; border-left: 3px solid var(--ange-accent); color: var(--ange-texte-doux); font-size: 0.875rem; line-height: 1.4; } .ange-consent-banniere__politique { color: var(--ange-accent); text-decoration: underline; white-space: nowrap; } .ange-consent-banniere__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; flex: 0 1 auto; } @media (max-width: 767px) { .ange-consent-banniere__boite { padding: 1rem; } .ange-consent-banniere__actions { width: 100%; } /* Les deux réponses occupent la même largeur : à ce format, une différence de largeur suffirait à orienter le choix. */ .ange-consent-banniere__actions .ange-consent__btn { flex: 1 1 8rem; } .ange-consent-banniere__actions .ange-consent__btn--discret { flex-basis: 100%; } } /* ------------------------------------------------------------------------- * Panneau de préférences * ---------------------------------------------------------------------- */ .ange-consent-panneau { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--ange-plan-panneau); display: flex; align-items: center; justify-content: center; padding: 1rem; } .ange-consent-panneau[hidden] { display: none; } .ange-consent-panneau__fond { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.65); } .ange-consent-panneau__boite { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 46rem; max-height: calc(100vh - 2rem); border-radius: 0.375rem; background: var(--ange-fond); color: var(--ange-texte); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); } .ange-consent-panneau__entete { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--ange-bord); } .ange-consent-panneau__titre { margin: 0; font-size: 1.25rem; font-weight: 700; } .ange-consent-panneau__fermer { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin: -0.375rem -0.5rem 0 0; border: 0; border-radius: 0.25rem; background: none; color: var(--ange-texte); font-size: 1.75rem; line-height: 1; cursor: pointer; } .ange-consent-panneau__fermer:hover { background: var(--ange-fond-clair); } .ange-consent-panneau__corps { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1.5rem; } .ange-consent-panneau__intro, .ange-consent-panneau__trace { margin: 0 0 1rem; color: var(--ange-texte-doux); font-size: 0.9375rem; line-height: 1.5; } .ange-consent-panneau__trace { padding: 0.625rem 0.875rem; border-left: 3px solid var(--ange-accent); background: var(--ange-fond-clair); } .ange-consent-panneau__trace:empty { display: none; } .ange-consent-panneau__politique { color: var(--ange-accent); text-decoration: underline; } .ange-consent-panneau__liste { margin: 0; padding: 0; list-style: none; } .ange-consent-finalite { padding: 1rem 0; border-top: 1px solid var(--ange-bord); } .ange-consent-finalite__entete { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; } .ange-consent-finalite__bascule { display: flex; gap: 0.75rem; align-items: center; margin: 0; cursor: pointer; } .ange-consent-finalite__nom { font-size: 1rem; font-weight: 700; } .ange-consent-finalite__mention { flex: 0 0 auto; color: var(--ange-texte-doux); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Interrupteur : la case elle-même, redessinée. Voir l'avertissement en tête de fichier. */ .ange-consent-finalite__case { position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.5rem; margin: 0; -webkit-appearance: none; appearance: none; border: 1px solid var(--ange-bord); border-radius: 1rem; background: #4f4f4f; cursor: pointer; transition: background-color 0.15s ease; } .ange-consent-finalite__case::after { content: ""; position: absolute; top: 50%; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fefefe; transform: translateY(-50%); transition: left 0.15s ease; } .ange-consent-finalite__case:checked { background: var(--ange-accent); border-color: var(--ange-accent); } .ange-consent-finalite__case:checked::after { left: calc(100% - 1.3125rem); } .ange-consent-finalite__case:disabled { cursor: default; opacity: 0.65; } .ange-consent-finalite__details { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; } .ange-consent-finalite__details dt { color: var(--ange-accent); font-weight: 700; } .ange-consent-finalite__details dd { margin: 0 0 0.625rem; color: var(--ange-texte-doux); } .ange-consent-finalite__details dd:last-child { margin-bottom: 0; } .ange-consent-panneau__pied { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: flex-end; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--ange-bord); } @media (max-width: 575px) { .ange-consent-panneau__pied .ange-consent__btn { flex: 1 1 100%; } } /* Le fond de page ne défile plus derrière le panneau. */ .ange-consent-ouvert, .ange-consent-ouvert body { overflow: hidden; } /* ------------------------------------------------------------------------- * Espaces réservés des intégrations * ---------------------------------------------------------------------- */ /* Le rapport hauteur/largeur est repris de l'iframe d'origine par la propriété personnalisée `--ange-consent-ratio`, posée en ligne par le PHP : le bloc occupe exactement la place que prendra la vidéo, donc rien ne se décale à l'activation. */ .ange-consent { position: relative; width: 100%; max-width: 100%; padding-bottom: var(--ange-consent-ratio, 56.25%); overflow: hidden; border-radius: 0.25rem; background: var(--ange-fond); color: var(--ange-texte); } .ange-consent__carte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: center; padding: 1.25rem; text-align: center; } .ange-consent__titre { margin: 0; font-size: 1.0625rem; font-weight: 700; } .ange-consent__texte { max-width: 34rem; margin: 0; color: var(--ange-texte-doux); font-size: 0.9375rem; line-height: 1.45; } .ange-consent__texte a { color: var(--ange-accent); text-decoration: underline; } .ange-consent__actions { display: flex; flex-direction: column; gap: 0.375rem; align-items: center; } .ange-consent__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .ange-consent--actif { background: #000; } /* Sur une vidéo courte en hauteur, le texte n'entre pas : on masque le détail et on garde le titre et le bouton, le panneau restant accessible par le pied de page. */ @media (max-height: 30rem) { .ange-consent__carte { gap: 0.5rem; padding: 0.75rem; } .ange-consent__texte { font-size: 0.875rem; } } /* ------------------------------------------------------------------------- * Surcouche posée sur un élément existant (fond de carte) * ---------------------------------------------------------------------- */ .ange-consent-hote { position: relative; } /* La surcouche ne recouvre pas toute la carte, et ne capte pas les clics : les épingles, les regroupements et les fiches des boulangeries ne dépendent d'aucun tiers, ils doivent rester utilisables sans autorisation. Seule la carte d'explication est cliquable. z-index : au-dessus des `panes` de Leaflet (400-700) et de ses contrôles (800-1000). */ .ange-consent--surcouche { position: absolute; top: 0; right: 0; left: 0; z-index: 1200; display: flex; justify-content: center; width: auto; padding-bottom: 0; border-radius: 0; background: none; pointer-events: none; } .ange-consent--surcouche .ange-consent__carte { position: static; max-width: 34rem; margin: 1rem; padding: 1rem 1.25rem; border-radius: 0.25rem; background: var(--ange-fond); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35); pointer-events: auto; } /* ------------------------------------------------------------------------- * Mouvement réduit * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ange-consent__btn, .ange-consent-finalite__case, .ange-consent-finalite__case::after { transition: none; } }