/* * Habillage Drivelane du bandeau de consentement tarteaucitron. * * Objectif tenu ici, et nulle part ailleurs : le bouton « Tout accepter » doit se voir * immédiatement. La feuille d'origine peint les trois boutons du même jaune, à la même taille — * rien ne se détache. « Tout refuser » reste un vrai bouton du même bandeau (un clic, comme * accepter, ce que la CNIL exige) : c'est le remplissage et la taille qui hiérarchisent, pas le * nombre d'actions. * * Les sélecteurs sont préfixés `html body #tarteaucitronRoot` parce que tarteaucitron injecte sa * propre feuille APRÈS celle-ci (il l'ajoute au à l'exécution) : à spécificité égale, la * sienne gagnerait. Les valeurs sont écrites en dur avec repli sur les tokens du design system — * le bandeau s'affiche aussi sur l'espace chauffeur, qui ne charge pas app.css. */ /* --- Bandeau ------------------------------------------------------------- */ html body #tarteaucitronRoot #tarteaucitronAlertBig { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; box-sizing: border-box; padding: 18px 24px; text-align: left; background: #fff; color: var(--color-ink, #0f1b2d); border-top: 1px solid var(--color-border, #e6ecf4); box-shadow: 0 -6px 28px rgba(15, 27, 45, .16); font-size: 14px !important; } html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex: 1 1 320px; max-width: 720px; margin: 0; text-align: left; line-height: 1.5; color: var(--color-text-secondary, #5d6b7e); } html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--color-ink, #0f1b2d); } /* --- Boutons : socle commun ---------------------------------------------- */ html body #tarteaucitronRoot #tarteaucitronAlertBig button { box-sizing: border-box; margin: 0; border: 0; border-radius: var(--radius-md, 10px); font-family: inherit; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color .18s, color .18s, box-shadow .18s; } /* --- « Tout accepter » : le bouton qu'on doit voir en premier ------------- */ html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2 { order: 1; padding: 15px 30px; background: var(--color-success, #10a06a); color: #fff; font-size: 16px !important; font-weight: 700; box-shadow: var(--shadow-success, 0 6px 16px rgba(16, 160, 106, .26)); } html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2:hover { background: var(--color-success-dark, #0e8f5e); } /* --- « Tout refuser » : même clic, poids visuel moindre ------------------- */ html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2 { order: 2; padding: 14px 22px; background: #fff; color: var(--color-text-secondary, #5d6b7e); border: 1.5px solid var(--color-border-input, #e1e8f1); font-size: 14px !important; } html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2:hover { background: var(--color-bg-subtle, #f7faff); color: var(--color-ink, #0f1b2d); } /* --- « Personnaliser » : lien, pour ceux qui veulent entrer dans le détail */ html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert { order: 3; padding: 14px 8px; background: none; color: var(--color-text-tertiary, #677484); font-size: 13px !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert:hover { color: var(--color-ink, #0f1b2d); } /* Lien « Politique de confidentialité », rendu quand une page légale existe pour ce chauffeur. */ html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl { background: none; padding: 0; margin: 0 0 0 4px; color: var(--color-primary, #1f6fe5); font-size: 14px !important; text-decoration: underline; } /* --- Mobile : le bandeau s'empile, « Tout accepter » d'abord et pleine largeur */ @media (max-width: 640px) { html body #tarteaucitronRoot #tarteaucitronAlertBig { padding: 14px 16px; gap: 8px; /* Sur un petit écran, le bandeau montait à 41 % de la hauteur — et jusqu'à 66 % en paysage, où il recouvrait alors le formulaire. Plafonné à 45 % avec défilement interne : le choix reste entièrement accessible, la page derrière aussi. */ max-height: 45vh; overflow-y: auto; } html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { font-size: 13px; line-height: 1.45; } html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2, html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2 { flex: 1 1 100%; width: 100%; } html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert { flex: 1 1 100%; width: 100%; text-align: center; } } /* Écran court — un téléphone tenu en paysage. Empilés pleine largeur, les deux boutons ne tenaient plus dans les 45 % de hauteur : « Tout refuser » passait sous la ligne de flottaison du bandeau, donc derrière un défilement, alors qu'il doit rester aussi accessible qu'accepter. On les remet côte à côte, ce que la largeur permet dans cette orientation. */ @media (max-width: 640px) and (max-height: 480px) { html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2, html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2 { flex: 0 1 auto; width: auto; } html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex: 1 1 100%; } } /* --- Pastille de rappel : discrète, elle ne doit pas concurrencer les CTA du site */ html body #tarteaucitronRoot #tarteaucitronIcon { opacity: .55; transition: opacity .18s; } /* Sur mobile, le tunnel pose une barre d'action collée en bas (« Payer et confirmer », avec le montant à gauche). La pastille s'y superposait et masquait le montant — constaté le 2026-08-18 sur l'écran de paiement. On la remonte au-dessus de la barre ; ailleurs sur le site, il n'y a rien à cette hauteur et le décalage ne se remarque pas. */ @media (max-width: 640px) { html body #tarteaucitronRoot #tarteaucitronIcon { bottom: 84px !important; /* Une pastille flottante recouvre forcément quelque chose sur un écran de 390 px : on réduit sa surface et on l'efface davantage tant qu'on ne la vise pas. Elle reste atteignable — le visiteur doit pouvoir revenir sur son choix depuis n'importe quelle page, y compris celles du tunnel. */ transform: scale(.7); transform-origin: bottom left; opacity: .38; } } html body #tarteaucitronRoot #tarteaucitronIcon:hover { opacity: 1; }