@charset "UTF-8";
/* ==========================================================================
Habillage Rama Logic du bandeau de consentement (Tarteaucitron)
==========================================================================
POURQUOI CE FICHIER EST ICI
Il vit à côté de la librairie qu'il habille (public/tarteaucitron/), servi
depuis notre domaine comme les 4 autres fichiers, sans aucun CDN. Il reste
donc cohérent avec la configuration du bandeau (useExternalCss: false,
useExternalJs: false). Il est mis en cache par le navigateur au lieu d'être
recopié dans le HTML de chaque page (le site a un blog et des cas clients).
Il ne va PAS dans src/styles/global.css : ce fichier porte les jetons du
système de design, pas les correctifs d'une librairie tierce.
D'OÙ VIENNENT LES COULEURS
Uniquement des variables du site, déclarées dans src/styles/global.css et
posées sur :root par Tailwind. Aucune couleur n'est recopiée en dur ici :
si la charte bouge, le bandeau suit. Les valeurs de repli après la virgule
ne servent que si cette feuille est chargée sans global.css.
LE PIÈGE DE L'ORDRE DE CHARGEMENT (à lire avant de modifier)
tarteaucitron.js ajoute LUI-MÊME sa feuille de style à la fin du
quand il démarre (tarteaucitron.js, ~ligne 536). Elle arrive donc APRÈS
n'importe quel écrit en dur dans le , y compris celui-ci.
À spécificité égale, c'est la librairie qui gagne. D'où les sélecteurs
volontairement plus lourds ici : « html body #tarteaucitronRoot » suivi
d'un identifiant ou d'un nom de balise en plus. Ne pas les alléger.
Les rares « !important » ne sont posés que là où la librairie en met un :
la spécificité seule ne suffit pas à passer devant.
ACCESSIBILITÉ
« Tout refuser » a exactement la même taille, la même police et la même
graisse que « Tout accepter » : exigence CNIL, refuser doit être aussi
simple qu'accepter. Toutes les cibles tactiles font au moins 44 px de haut.
========================================================================== */
/* --------------------------------------------------------------------------
1. Jetons locaux — traduction de la charte du site pour le bandeau
-------------------------------------------------------------------------- */
/* Ces jetons sont posés sur :root, et surtout PAS sur #tarteaucitronRoot.
Tarteaucitron affiche aussi des encarts « Autoriser » à la place des
contenus qu'on n'a pas encore acceptés (ici le formulaire Tally, dans la
section Contact). Ces encarts sont écrits dans la page, donc HORS de
#tarteaucitronRoot : des jetons déclarés sur le root ne descendraient
jamais jusqu'à eux, et l'encart resterait au thème jaune de la librairie.
Sur :root, ils sont hérités par toute la page, root compris. */
:root {
--tac-surface: var(--color-cream, #fffcf7); /* crème · fond bandeau et panneau */
--tac-surface-sunken: color-mix(in oklab, var(--color-cream, #fffcf7) 92%, var(--color-beige, #d2cfc9));
--tac-text: var(--color-ink, #0d1a14); /* encre · texte principal */
--tac-text-muted: var(--color-slate, #5c6661); /* ardoise · texte secondaire */
--tac-line: var(--color-beige, #d2cfc9); /* beige · filets discrets */
--tac-line-strong: var(--color-aloe-light, #b4c6be); /* aloe clair · filets marqués */
--tac-primary: var(--color-cta, #384941); /* vert sapin du bouton « Prendre RDV » */
--tac-primary-hover: var(--color-cta-hover, #46594f);
--tac-on-primary: var(--color-cream, #fffcf7);
--tac-primary-wash: color-mix(in oklab, var(--color-cta, #384941) 8%, transparent);
--tac-allowed: var(--color-aloe-dark, #475e54); /* état « autorisé » */
--tac-pending: var(--color-mindaro, #dfe971); /* état « en attente » */
--tac-denied: var(--color-accent, #f7641f); /* état « refusé », orange par touches */
--tac-font: var(--font-sans, "Clash Grotesk", system-ui, sans-serif);
--tac-radius: var(--radius-base, 0.5rem);
--tac-radius-pill: var(--radius-pill, 9999px);
--tac-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
--tac-gutter: clamp(1rem, 4vw, 2.5rem);
--tac-tap: 3rem; /* 48 px · cible tactile des boutons principaux */
--tac-tap-min: 2.75rem; /* 44 px · minimum absolu pour les liens de service */
}
/* La librairie impose « font-size: 14px » et une couleur grise à tous ses
descendants. On rebranche la police du site, le reste est repris élément
par élément plus bas. */
html body #tarteaucitronRoot,
html body #tarteaucitronRoot * {
font-family: var(--tac-font);
}
/* Anneau de focus : la librairie pose un pointillé bleu qui jure avec tout.
On reprend celui du site (2 px plein, vert sapin, décalé de 2 px). */
html body #tarteaucitronRoot a:focus-visible,
html body #tarteaucitronRoot button:focus-visible {
outline: 2px solid var(--tac-primary);
outline-offset: 2px;
border-radius: var(--tac-radius);
}
/* --------------------------------------------------------------------------
2. Le bandeau — #tarteaucitronAlertBig
-------------------------------------------------------------------------- */
/* NE JAMAIS poser « display » sur ce bloc : tarteaucitron.js écrit
display: block / none en style en ligne pour montrer et cacher le bandeau
(tarteaucitron.js, ~lignes 1825 et 1854). Un « display: flex !important »
ici empêcherait le bandeau de disparaître une fois le choix fait.
La mise en page se fait donc en flux normal, avec des marges. */
html body #tarteaucitronRoot div#tarteaucitronAlertBig {
box-sizing: border-box;
width: 100%;
/* Le texte et les boutons restent centrés dans une colonne de 52 rem sur
grand écran, sans jamais dépasser la gouttière sur mobile. */
padding-inline: max(var(--tac-gutter), calc((100% - 52rem) / 2));
/* Marge verticale resserrée sur mobile : le bandeau est posé par-dessus la
page, chaque pixel qu'il prend est un pixel de contenu masqué. Elle se
desserre au-delà de 40 rem, où la hauteur n'est plus un enjeu. */
padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
background: var(--tac-surface);
color: var(--tac-text);
font-weight: 300;
font-size: 0.9375rem !important; /* la librairie force 15px !important */
line-height: 1.5;
text-align: center;
/* Aucune ombre lourde : un filet haut et un halo très diffus suffisent à
détacher le bandeau de la page, qui est crème elle aussi. */
border: 0;
border-top: 1px solid var(--tac-line);
box-shadow: 0 -14px 36px rgba(13, 26, 20, 0.08);
}
/* Le texte d'explication occupe toujours sa propre ligne. */
html body #tarteaucitronRoot div#tarteaucitronAlertBig span#tarteaucitronDisclaimerAlert {
box-sizing: border-box;
display: block;
margin: 0 auto 0.5rem;
padding: 0;
max-width: 46rem;
color: var(--tac-text);
font-weight: 300;
/* 14px / 1.4 sur mobile au lieu de 15px / 1.55 : le texte tient sur les
mêmes 3 lignes, mais le bloc perd 11 px. Repasse à 15px / 1.55 dès 40 rem. */
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.01em;
text-wrap: pretty;
/* Garde-fou conservé de la librairie : si le visiteur grossit les textes,
le bandeau défile au lieu de manger l'écran. */
max-height: 40vh;
overflow-y: auto;
}
/* --- Géométrie commune aux quatre boutons du bandeau --- */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPersonalize2,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronAllDenied2,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
box-sizing: border-box;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition:
background-color var(--dur-base, 200ms) var(--tac-ease),
border-color var(--dur-base, 200ms) var(--tac-ease),
color var(--dur-base, 200ms) var(--tac-ease);
}
/* --- « Tout accepter » et « Tout refuser » : même taille, même poids --- */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPersonalize2,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronAllDenied2 {
display: inline-flex; /* les deux partagent la même ligne */
/* Largeur identique au pixel près, quel que soit le libellé : accepter et
refuser ne doivent pas peser différemment à l'oeil. */
width: calc(50% - 0.625rem);
max-width: 16rem;
min-height: var(--tac-tap);
margin: 0 0.25rem; /* 8 px entre les deux, jamais collés */
/* Marge intérieure serrée sur mobile. « Tout accepter » mesure 108 px avec
l'interlettrage du site : à 320 px de large il ne reste que 114 px dans
le bouton. Élargir cette marge le ferait passer sur deux lignes, et il
deviendrait plus haut que « Tout refuser ». */
padding: 0.625rem;
/* 1 px, comme tous les contours du site (cartes, bouton « Prendre RDV »).
Ne pas écrire 1.5px : Chrome arrondit les contours à un pixel physique
entier, donc sur un écran à densité 1 la déclaration rendait 1px. Le
dessin était juste, la valeur écrite ne l'était pas. */
border: 1px solid var(--tac-primary);
border-radius: var(--tac-radius-pill);
font-weight: 500;
font-size: 1rem !important; /* la librairie force 16px !important */
}
/* Bouton principal : exactement l'allure du bouton « Prendre RDV » de la
page d'accueil (fond vert sapin, texte crème, pilule, graisse 500). */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPersonalize2 {
background: var(--tac-primary);
color: var(--tac-on-primary);
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPersonalize2:hover {
background: var(--tac-primary-hover);
border-color: var(--tac-primary-hover);
color: var(--tac-on-primary);
}
/* Bouton secondaire : même gabarit, contour plein. Le texte vert sapin sur
crème contraste davantage que le crème sur vert du bouton principal, donc
refuser n'est jamais le choix le moins lisible. */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronAllDenied2 {
background: transparent;
color: var(--tac-primary);
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronAllDenied2:hover {
background: var(--tac-primary-wash);
color: var(--tac-primary);
}
/* --- Les deux contrôles secondaires ---
Ils partagent UNE ligne, sur la même trame que les deux boutons du dessus :
même largeur de colonne, mêmes marges. Le bandeau est donc une grille de
deux lignes de deux cellules, et non quatre commandes empilées.
C'est le point qui décide de la hauteur du bandeau sur mobile. Empilés, ces
deux contrôles coûtaient 94 px à eux seuls (2 x 44 px de cible tactile plus
les marges) et poussaient le bandeau à 32 % de l'écran, au point de couper
le titre en 320 px. Sur une seule ligne, ils en coûtent 47.
Pourquoi une largeur en pourcentage et pas « fit-content » : « Lire ma
politique de confidentialité » mesure 218 px et « Choisir en détail » 118 px.
Mis côte à côte à leur largeur naturelle, ils réclament 336 px de texte pour
343 px disponibles en 375 px de large : ça tient au pixel près en 375, et ça
repasse à la ligne dès 360. Une colonne de 50 % laisse le libellé long se
plier sur deux lignes à l'intérieur de sa cellule : la ligne reste une ligne,
de 320 px à 640 px, sans dépendre des métriques exactes de la police.
Le calcul de largeur est repris tel quel des deux boutons du dessus :
2 x (50 % - 0.625rem) + 4 x 0.25rem = 100 % - 4 px. Ces 4 px de mou
absorbent l'espace que le HTML laisse entre les deux boutons (un nœud texte
qui vaut une espace mot, ~3.6 px). Sans lui, la deuxième cellule passe à la
ligne. Ne pas réduire ces marges. */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
display: inline-flex;
width: calc(50% - 0.625rem);
margin: 0.25rem 0.25rem 0;
min-height: var(--tac-tap-min);
/* Marge intérieure verticale volontairement faible : la cible tactile est
tenue par min-height, pas par le padding. « Lire ma politique de
confidentialité » se plie sur deux lignes dans sa colonne, et il faut que
ces deux lignes plus leur marge tiennent DANS les 44 px, sinon la ligne
entière grandit et le bandeau avec elle. */
padding: 0.25rem 0.5rem;
background: transparent;
border: 0;
border-radius: var(--tac-radius-pill);
color: var(--tac-text-muted);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--tac-line-strong);
text-wrap: balance;
}
/* « Choisir en détail » ouvre le panneau réglage par réglage : c'est le plus
utile des deux, il garde la graisse 500. */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert {
font-weight: 500;
font-size: 0.8125rem !important;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert:hover {
background: transparent;
color: var(--tac-text);
text-decoration-color: currentColor;
}
/* --- Lien vers la politique de confidentialité --- */
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
font-weight: 300;
font-size: 0.8125rem !important; /* la librairie force 16px !important */
line-height: 1.35;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl:hover {
color: var(--tac-text);
text-decoration-color: currentColor;
}
/* Au-delà de 40 rem, la hauteur du bandeau n'est plus un enjeu : la mise en
page se desserre. Les colonnes de 50 % deviennent inutiles, chaque contrôle
reprend sa largeur naturelle et le texte repasse à sa taille de lecture. */
@media screen and (min-width: 40rem) {
html body #tarteaucitronRoot div#tarteaucitronAlertBig {
padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
/* Colonne de 34 rem au lieu de 52. Deux raisons, dans cet ordre.
1) La mise en page. Les quatre commandes sont des éléments en ligne :
rien dans le HTML de la librairie ne sépare les deux boutons de
décision des deux liens de service, c'est la largeur disponible qui
décide où ça passe à la ligne. Dans 52 rem, « Choisir en détail »
(166 px avec ses marges) tenait encore à côté de « Tout accepter » et
« Tout refuser » (404 px à eux deux) : il se retrouvait collé à la
ligne de décision comme s'il en était la troisième option, et la
politique de confidentialité restait seule en dessous. Dans 34 rem
(544 px) il ne reste que 140 px après les deux boutons : le retour à
la ligne tombe au bon endroit, et les deux liens se retrouvent
ensemble sur la ligne suivante (436 px, large).
2) La lecture. Le texte d'explication passait sur toute la largeur ;
une colonne de 34 rem le ramène à une longueur de ligne normale.
Ne pas élargir cette valeur sans revérifier où retombe la ligne. */
padding-inline: max(var(--tac-gutter), calc((100% - 34rem) / 2));
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig span#tarteaucitronDisclaimerAlert {
margin-bottom: 0.875rem;
font-size: 0.9375rem;
line-height: 1.55;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPersonalize2,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronAllDenied2 {
width: 12rem;
max-width: none;
padding: 0.625rem 1.5rem;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert,
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
width: auto;
margin: 0.5rem 0.5rem 0;
padding: 0.5rem 1rem;
/* Même hauteur que les deux boutons : sinon « Choisir en détail »
retombe quelques pixels plus bas quand il partage leur ligne. */
min-height: var(--tac-tap);
text-underline-offset: 4px;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronCloseAlert {
font-size: 0.9375rem !important;
}
html body #tarteaucitronRoot div#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
font-size: 0.875rem !important;
}
}
/* --------------------------------------------------------------------------
3. Le panneau détaillé — #tarteaucitron
-------------------------------------------------------------------------- */
/* Voile de fond : encre très diluée plutôt que le gris #eee d'origine.
Deux couches se superposent (le bouton de fond et le flou du ::before),
d'où des valeurs basses des deux côtés. */
html body #tarteaucitronRoot button#tarteaucitronBack {
/* L'opacité de ce voile est écrite en style en ligne par la librairie
(0.7 à l'ouverture, 0 à la fermeture) : impossible de la reprendre en CSS
sans !important, et un !important ici l'empêcherait de s'effacer.
On dose donc la transparence dans la couleur elle-même :
32 % d'encre × 0,7 d'opacité ≈ 22 % au rendu. */
background: color-mix(in oklab, var(--tac-text) 32%, transparent);
}
html body.tarteaucitron-modal-open div#tarteaucitronRoot::before {
background: rgba(13, 26, 20, 0.08) !important; /* la librairie force ce fond */
}
html body #tarteaucitronRoot div#tarteaucitron {
background: var(--tac-surface);
color: var(--tac-text);
}
/* L'ombre porte sur le panneau entier, pas sur la liste des services :
posée sur la liste, elle se voyait comme une bande grise sous le bouton
« Fermer », qui vit au-dessus d'elle. L'ombre d'origine
(0 40px 60px #545454) était de toute façon un bloc gris opaque. */
@media screen and (min-width: 768px) {
html body #tarteaucitronRoot div#tarteaucitron {
border-radius: var(--tac-radius);
overflow: hidden;
box-shadow: 0 24px 60px rgba(13, 26, 20, 0.16);
}
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices {
background: var(--tac-surface);
border-radius: 0;
box-shadow: none;
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronMainLineOffset,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronBorder,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronMainLine,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronLine,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronLine:hover,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronSave {
background: var(--tac-surface);
}
/* Les filets du panneau sont forcés en blanc par la librairie (!important). */
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronBorder,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronMainLine {
border-color: var(--tac-surface) !important;
}
/* Titre du panneau : Clash Grotesk 500, comme les titres du site. */
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronH1 {
color: var(--tac-text);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0.5rem 0 1.5rem;
}
/* Encart d'introduction, encadré de deux filets. */
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronInfo {
color: var(--tac-text-muted);
font-weight: 300;
font-size: 0.9375rem;
line-height: 1.55;
border-top: 1px solid var(--tac-line);
border-bottom: 1px solid var(--tac-line);
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronInfo p {
color: var(--tac-text-muted);
font-weight: 300;
font-size: 0.9375rem;
line-height: 1.55;
}
html body #tarteaucitronRoot div#tarteaucitron button#tarteaucitronPrivacyUrlDialog {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tac-tap-min);
padding: 0.5rem 1rem;
background: transparent;
border: 0;
border-radius: var(--tac-radius-pill);
color: var(--tac-text-muted);
font-weight: 300;
font-size: 0.875rem !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: var(--tac-line-strong);
cursor: pointer;
}
html body #tarteaucitronRoot div#tarteaucitron button#tarteaucitronPrivacyUrlDialog:hover {
color: var(--tac-text);
text-decoration-color: currentColor;
}
/* Bouton « Fermer », en haut à droite du panneau.
La librairie le pose en position absolue tout en haut, sur une bande de
23 px. À 44 px de haut il passait sous la liste des services : on décale
donc la liste d'autant (la librairie force ce margin-top, d'où le
!important, seule façon de repasser devant). */
html body #tarteaucitronRoot div#tarteaucitron button#tarteaucitronClosePanel {
box-sizing: border-box;
top: 0;
right: 0.5rem !important; /* la librairie force right: 15px !important */
width: auto;
min-height: var(--tac-tap-min);
padding: 0.5rem 1rem;
background: transparent;
color: var(--tac-text-muted);
font-weight: 500;
font-size: 0.8125rem;
border: 0;
border-radius: var(--tac-radius-pill);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: var(--tac-line-strong);
}
html body #tarteaucitronRoot div#tarteaucitron button#tarteaucitronClosePanel:hover {
background: transparent;
color: var(--tac-text);
text-decoration-color: currentColor;
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices {
margin-top: 3rem !important; /* la librairie force 21px !important */
}
/* Titres de catégorie repliables : « Cookies obligatoires », « APIs ». */
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronTitle button {
box-sizing: border-box;
min-height: var(--tac-tap-min);
padding: 0.5rem 1.25rem;
background: transparent;
color: var(--tac-text);
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
}
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronTitle button:hover {
background: transparent;
color: var(--tac-primary);
}
/* Nom du service et description. */
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronH3 {
color: var(--tac-text);
font-weight: 500 !important; /* la librairie force 700 !important */
font-size: 1rem;
line-height: 1.4;
}
html body #tarteaucitronRoot div#tarteaucitron ul#tarteaucitronServices_mandatory .tarteaucitronH3 {
color: var(--tac-text-muted);
font-weight: 300 !important;
font-size: 0.875rem;
}
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronLine .tarteaucitronName a,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronReadmoreInfo,
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronReadmoreOfficial {
color: var(--tac-text-muted);
font-weight: 300;
font-size: 0.75rem;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--tac-line-strong);
}
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronReadmoreSeparator {
color: var(--tac-line-strong) !important; /* la librairie force #333 !important */
}
/* --- Boutons « Autoriser » / « Refuser » du panneau ---
Non choisi : contour. Choisi : plein. Le libellé reste lisible dans les
deux cas, et les deux options gardent la même taille. */
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button.tarteaucitronAllow,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button.tarteaucitronDeny,
html body #tarteaucitronRoot div#tarteaucitron button#tarteaucitronSaveButton {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: var(--tac-tap);
padding: 0.625rem 1.25rem;
background: transparent;
color: var(--tac-primary);
border: 1px solid var(--tac-primary); /* même contour qu'au bandeau, cf. plus haut */
border-radius: var(--tac-radius-pill);
font-weight: 500;
font-size: 0.9375rem !important;
line-height: 1.2;
cursor: pointer;
}
/* Sous 768 px, la librairie force « display: block » sur ces boutons pour les
passer en pleine largeur. Le libellé se retrouve alors collé en haut des
48 px : on remet un flex centré, avec le même !important qu'elle. */
@media screen and (max-width: 767px) {
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices .tarteaucitronBorder button.tarteaucitronAllow,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices .tarteaucitronBorder button.tarteaucitronDeny {
display: flex !important;
}
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button.tarteaucitronAllow:hover,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button.tarteaucitronDeny:hover {
background: var(--tac-primary-wash);
color: var(--tac-primary);
}
/* État retenu : le bouton se remplit. */
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed button.tarteaucitronAllow,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices ul#tarteaucitronServices_mandatory button.tarteaucitronAllow,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button#tarteaucitronAllAllowed.tarteaucitronIsSelected {
background: var(--tac-allowed);
border-color: var(--tac-allowed);
color: var(--tac-on-primary);
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied button.tarteaucitronDeny,
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices button#tarteaucitronAllDenied.tarteaucitronIsSelected {
background: var(--tac-text-muted);
border-color: var(--tac-text-muted);
color: var(--tac-on-primary);
}
/* Le liseré vertical qui marque l'état de chaque ligne de service. */
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed {
border-left-color: var(--tac-allowed) !important;
}
html body #tarteaucitronRoot div#tarteaucitron .tarteaucitronLine.tarteaucitronIsDenied {
border-left-color: var(--tac-line-strong) !important;
}
/* Les glyphes ☑ / ☒ de la librairie suivent la couleur du bouton. */
html body #tarteaucitronRoot .tarteaucitronCheck::before,
html body #tarteaucitronRoot .tarteaucitronCross::before,
html body #tarteaucitronRoot .tarteaucitronPlus::before {
color: currentColor;
}
/* Barre d'enregistrement en bas du panneau. */
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronSave {
border-top: 1px solid var(--tac-line);
padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
/* « Enregistrer » valide les choix : c'est le bouton principal du panneau,
donc il est plein. Il porte aussi la classe .tarteaucitronAllow et vit dans
#tarteaucitronServices : la règle de contour ci-dessus l'attrape. D'où les
quatre identifiants, seule façon de repasser devant. */
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices div#tarteaucitronSave button#tarteaucitronSaveButton {
background: var(--tac-primary);
border-color: var(--tac-primary);
color: var(--tac-on-primary);
font-size: 1rem !important; /* la librairie force 18px !important */
padding: 0.625rem 1.75rem;
}
html body #tarteaucitronRoot div#tarteaucitron div#tarteaucitronServices div#tarteaucitronSave button#tarteaucitronSaveButton:hover {
background: var(--tac-primary-hover);
border-color: var(--tac-primary-hover);
color: var(--tac-on-primary);
}
/* Crédit « tarteaucitron.js » : on le garde (removeCredit reste à false),
mais son logo jaune vif est ramené au niveau de gris du reste. */
html body #tarteaucitronRoot div#tarteaucitron a.tarteaucitronSelfLink {
display: block;
padding: 0.5rem 0 1rem;
}
html body #tarteaucitronRoot div#tarteaucitron a.tarteaucitronSelfLink img {
filter: grayscale(1);
opacity: 0.35;
transition: opacity var(--dur-base, 200ms) var(--tac-ease);
}
html body #tarteaucitronRoot div#tarteaucitron a.tarteaucitronSelfLink:hover img {
opacity: 0.7;
}
/* --------------------------------------------------------------------------
4. Le rappel discret — pastille « Gérer mes choix »
-------------------------------------------------------------------------- */
html body #tarteaucitronRoot div#tarteaucitronAlertSmall {
background: var(--tac-surface);
border: 1px solid var(--tac-line);
border-right: 0;
border-bottom: 0;
border-radius: var(--tac-radius) 0 0 0;
box-shadow: 0 -6px 24px rgba(13, 26, 20, 0.1);
overflow: hidden;
}
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
min-height: var(--tac-tap-min);
padding: 0.625rem 0.875rem;
background: transparent;
color: var(--tac-text);
font-weight: 500;
font-size: 0.75rem !important; /* la librairie force 11px !important */
line-height: 1.2;
letter-spacing: 0.01em;
cursor: pointer;
}
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager:hover {
background: var(--tac-surface-sunken);
color: var(--tac-primary);
}
/* Jauge des choix : autorisé, en attente, refusé.
La librairie cible ces trois segments avec quatre identifiants
(#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #...),
il en faut donc au moins autant ici. */
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager span#tarteaucitronDot {
background-color: var(--tac-line);
border-radius: var(--tac-radius-pill);
height: 4px;
margin-top: 0.375rem;
margin-bottom: 0;
}
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager span#tarteaucitronDot span#tarteaucitronDotGreen {
background-color: var(--tac-allowed);
}
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager span#tarteaucitronDot span#tarteaucitronDotYellow {
background-color: var(--tac-pending);
}
html body #tarteaucitronRoot div#tarteaucitronAlertSmall button#tarteaucitronManager span#tarteaucitronDot span#tarteaucitronDotRed {
background-color: var(--tac-denied);
}
/* Il n'y a plus qu'UN rappel : la pastille texte ci-dessus. L'icône cookie est
coupée à la source (showIcon: false dans src/layouts/Layout.astro), parce
qu'avec les deux rappels la librairie produisait deux boutons portant le
même identifiant « tarteaucitronManager » et n'en câblait qu'un.
Cette feuille ne contient donc plus aucune règle #tarteaucitronIcon : le
bloc n'est plus construit, ces règles ne serviraient à rien. Si l'icône
devait revenir un jour, c'est le réglage qu'il faut rouvrir, pas du CSS de
contournement à réécrire ici. */
/* --------------------------------------------------------------------------
5. L'encart posé à la place d'un contenu non autorisé — .tac_activate
-------------------------------------------------------------------------- */
/* LIRE CE PARAGRAPHE AVANT DE TOUCHER AUX SÉLECTEURS CI-DESSOUS.
Tout ce qui précède est préfixé « html body #tarteaucitronRoot ». Cet
encart-là, non : il ne vit pas dans le root. La librairie l'écrit DANS la
page, à l'endroit du contenu bloqué (ici .tally-fallback, dans la section
Contact de la page d'accueil), et il ne bouge plus de là. C'est pour cette
raison qu'il était resté au thème d'origine, bloc gris #333 et bouton jaune
#fbd600 posés au milieu d'une carte crème, sur le chemin de conversion du
site, alors que le bandeau voisin était habillé.
Deux conséquences pratiques :
- les jetons --tac-* sont déclarés sur :root (section 1) et pas sur le root
de la librairie, sinon ils ne descendraient pas jusqu'ici ;
- la spécificité doit battre celle de la librairie, qui charge sa feuille
APRÈS celle-ci. Sa règle la plus lourde est
« .tac_activate .tac_float .tarteaucitronAllow » (trois classes) :
« html body div.tac_activate div.tac_float button.tarteaucitronAllow »
passe devant avec trois classes et cinq balises. Ne pas alléger. */
html body div.tac_activate {
box-sizing: border-box;
/* La librairie met display: table + height: 100% pour centrer verticalement
dans un lecteur vidéo. Ici le contenu remplacé est un formulaire : on
revient à un bloc qui fait sa propre hauteur. */
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 1.5rem 1.25rem;
background: var(--tac-surface-sunken);
color: var(--tac-text);
border: 1px solid var(--tac-line);
border-radius: var(--tac-radius);
font-family: var(--tac-font);
font-size: 0.9375rem;
line-height: 1.55;
text-align: center;
}
html body div.tac_activate div.tac_float {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.125rem;
vertical-align: baseline; /* la librairie force table-cell + middle */
text-align: center;
}
/* Le texte d'explication. Sélecteur en enfant direct : le bouton contient lui
aussi un , la coche décorative de la librairie. */
html body div.tac_activate div.tac_float > span {
display: block;
max-width: 34rem;
color: var(--tac-text-muted);
font-weight: 300;
font-size: 0.9375rem;
line-height: 1.55;
letter-spacing: 0.01em;
text-wrap: pretty;
}
/* Cette coche ne s'affiche que dans le panneau : son contenu (☐ / ☑) est posé
par une règle limitée à #tarteaucitronRoot. Hors du root elle est vide, mais
reste un élément de flex : on la retire pour de bon. */
html body div.tac_activate span.tarteaucitronCheck {
display: none;
}
/* Même bouton que « Prendre RDV » : pilule vert sapin, texte crème,
graisse 500, et 48 px de haut au lieu des 31 px de la librairie. */
html body div.tac_activate div.tac_float button.tarteaucitronAllow {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tac-tap);
margin: 0;
padding: 0.625rem 1.75rem;
background: var(--tac-primary);
color: var(--tac-on-primary);
border: 1px solid var(--tac-primary);
border-radius: var(--tac-radius-pill);
font-family: var(--tac-font);
font-weight: 500;
font-size: 1rem;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition:
background-color var(--dur-base, 200ms) var(--tac-ease),
border-color var(--dur-base, 200ms) var(--tac-ease);
}
html body div.tac_activate div.tac_float button.tarteaucitronAllow:hover {
background: var(--tac-primary-hover);
border-color: var(--tac-primary-hover);
color: var(--tac-on-primary);
}
/* L'anneau de focus de la section 2 est limité au root : on le rebranche ici. */
html body div.tac_activate button.tarteaucitronAllow:focus-visible {
outline: 2px solid var(--tac-primary);
outline-offset: 2px;
}