/* TDP Age Gate — Terre de Pixels */ :root { --tdp-ag-overlay: rgba(0, 0, 0, .85); --tdp-ag-btn-bg: #6b6060; --tdp-ag-btn-color: #fff; --tdp-ag-title-font: inherit; --tdp-ag-text: #1a1a1a; --tdp-ag-muted: #6f6f6f; --tdp-ag-z: 2147483000; } /* Masqué tant que la vérification n'est pas requise */ .tdp-ag { display: none; } /* Bloque le défilement de la page */ html.tdp-ag-lock, html.tdp-ag-lock body { overflow: hidden !important; } /* Fond noir transparent, posé dès le pour éviter tout flash du contenu */ html.tdp-ag-lock::after { content: ""; position: fixed; inset: 0; z-index: var(--tdp-ag-z); background: var(--tdp-ag-overlay); transition: opacity .25s ease; } html.tdp-ag-lock .tdp-ag { position: fixed; inset: 0; z-index: calc(var(--tdp-ag-z) + 1); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Cadre blanc */ .tdp-ag .tdp-ag__box { box-sizing: border-box; width: 100%; max-width: 560px; margin: auto; padding: clamp(28px, 7vw, 60px) clamp(20px, 6vw, 56px); background: #fff; color: var(--tdp-ag-text); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: tdp-ag-in .35s ease-out both; } .tdp-ag .tdp-ag__logo { display: block; max-width: 160px; max-height: 90px; width: auto; height: auto; margin: 0 auto 20px; } .tdp-ag .tdp-ag__title { margin: 0 0 clamp(18px, 4vw, 28px); padding: 0; font-family: var(--tdp-ag-title-font); font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: normal; text-transform: none; color: var(--tdp-ag-text); } .tdp-ag .tdp-ag__question, .tdp-ag .tdp-ag__denied { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; color: var(--tdp-ag-text); } .tdp-ag .tdp-ag__denied { margin-bottom: 0; outline: none; } .tdp-ag .tdp-ag__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; } .tdp-ag .tdp-ag__btn { -webkit-appearance: none; appearance: none; margin: 0; border: 0; border-radius: 0; font: inherit; font-size: 1rem; line-height: 1.2; cursor: pointer; box-shadow: none; text-decoration: none; transition: background-color .2s ease, color .2s ease, filter .2s ease; } .tdp-ag .tdp-ag__btn--yes { padding: 12px 22px; background: var(--tdp-ag-btn-bg); color: var(--tdp-ag-btn-color); font-weight: 600; } .tdp-ag .tdp-ag__btn--yes:hover { filter: brightness(.88); } .tdp-ag .tdp-ag__btn--no { padding: 12px 4px; background: transparent; color: var(--tdp-ag-muted); } .tdp-ag .tdp-ag__btn--no:hover { color: var(--tdp-ag-text); text-decoration: underline; text-underline-offset: 3px; } .tdp-ag .tdp-ag__btn:focus-visible { outline: 2px solid var(--tdp-ag-btn-bg); outline-offset: 3px; } .tdp-ag .tdp-ag__legal { margin: clamp(22px, 5vw, 32px) 0 0; font-size: .8125rem; line-height: 1.4; color: var(--tdp-ag-muted); } .tdp-ag [hidden] { display: none !important; } /* Mobile : boutons pleine largeur, empilés */ @media (max-width: 420px) { .tdp-ag .tdp-ag__actions { flex-direction: column; gap: 6px; } .tdp-ag .tdp-ag__btn { width: 100%; } } /* Fermeture */ html.tdp-ag-leaving::after { opacity: 0; } html.tdp-ag-leaving .tdp-ag__box { animation: none; opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; } @keyframes tdp-ag-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tdp-ag .tdp-ag__box { animation: none; } html.tdp-ag-lock::after, html.tdp-ag-leaving .tdp-ag__box { transition: none; } }