/* * Declaration de majorite — fenetre bloquante posee sur l'accueil. * * Feuille autonome : elle porte ses propres variables et ne depend d'aucune * regle de home.css, pour que la fenetre s'affiche identiquement quelle que * soit la page qui l'inclut. Elle est chargee dans , avant tout rendu : * le voile est donc peint des la premiere image, sans apparition du site. * * Les etats « ouvert par l'attribut open » (sans JavaScript) et « ouvert par * showModal() » sont volontairement identiques a l'ecran. */ .age-gate { --age-navy: #062a52; --age-blue: #0b57a3; --age-sky: #66c7f4; --age-ink: #0d233c; --age-muted: #62758a; --age-line: #d7e4ef; --age-white: #fff; } /* La feuille ne suppose rien de home.css : le modele de boite est pose ici. */ .age-gate, .age-gate *, .age-gate *::before, .age-gate *::after { box-sizing: border-box; } /* Neutralisation des styles par defaut de . */ .age-gate { padding: 0; border: 0; background: transparent; color: var(--age-ink); } .age-gate:not([open]) { display: none; } .age-gate[open] { position: fixed; z-index: 200; inset: 0; display: flex; /* La feuille du navigateur pose `margin: auto` et des `max-width` / `max-height` sur : sans ces remises a zero, la fenetre se reduit a son contenu et le voile ne couvre pas l'ecran. */ width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: clamp(14px, 4vw, 32px); overflow-y: auto; /* Le voile est porte par la fenetre elle-meme : il est le meme avec et sans showModal(). Le fond du site reste devine, assombri et flou. */ background: rgba(6, 42, 82, .74); backdrop-filter: blur(6px) saturate(.85); -webkit-backdrop-filter: blur(6px) saturate(.85); overscroll-behavior: contain; } /* Un seul voile : celui de la fenetre. */ .age-gate::backdrop { background: transparent; } /* `margin: auto` sur l'element flexible centre sans jamais rogner : au zoom 200 %, ou sur un ecran bas, la carte se cale en haut et la fenetre defile. */ .age-card { position: relative; width: min(420px, 100%); margin: auto; padding: clamp(26px, 5vw, 34px) clamp(22px, 5vw, 34px) clamp(20px, 4vw, 26px); overflow: hidden; border-radius: 18px; background: var(--age-white); box-shadow: 0 20px 60px rgba(3, 20, 40, .34); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; text-align: center; -webkit-font-smoothing: antialiased; } /* Filet degrade repris de l'identite : marine, bleu Liquidelab, ciel. */ .age-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--age-navy), var(--age-blue) 55%, var(--age-sky)); content: ""; } /* Logo officiel, sans recoloration, pose sur la carte claire. */ .age-logo { display: block; width: 168px; height: auto; max-width: 62%; margin: 4px auto 18px; } .age-title { margin: 0 0 6px; color: var(--age-navy); font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } .age-title:focus { outline: 0; } .age-title:focus-visible { outline: 3px solid var(--age-sky); outline-offset: 4px; } .age-question { margin: 0 0 10px; color: var(--age-ink); font-size: clamp(1.32rem, 4.4vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .age-lead { margin: 0; color: var(--age-muted); font-size: .92rem; } .age-message { margin: 14px 0 0; padding: 9px 12px; border-radius: 9px; background: #fdecec; color: #9d1c1c; font-size: .88rem; text-align: left; } .age-message[hidden] { display: none; } .age-actions { display: grid; gap: 9px; margin-top: 20px; } .age-actions form { margin: 0; } .age-btn { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } .age-btn:focus-visible { outline: 3px solid var(--age-sky); outline-offset: 3px; } .age-btn-primary { background: var(--age-blue); color: var(--age-white); } .age-btn-primary:not(:disabled):hover, .age-btn-primary:not(:disabled):focus-visible { background: var(--age-navy); box-shadow: 0 10px 22px rgba(11, 87, 163, .3); transform: translateY(-1px); } .age-btn-quiet { border-color: var(--age-line); background: var(--age-white); color: var(--age-ink); } .age-btn-quiet:not(:disabled):hover, .age-btn-quiet:not(:disabled):focus-visible { border-color: var(--age-blue); color: var(--age-blue); } .age-btn:disabled { cursor: progress; opacity: .78; transform: none; } /* Etat de chargement du bouton positif. */ .age-spinner { display: none; width: 16px; height: 16px; } .age-btn.is-busy .age-spinner { display: block; border: 2px solid rgba(255, 255, 255, .45); border-radius: 50%; border-top-color: var(--age-white); animation: age-spin .8s linear infinite; } .age-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--age-line); color: var(--age-muted); font-size: .76rem; line-height: 1.5; } .age-note a { color: var(--age-blue); text-decoration: underline; text-underline-offset: 2px; } .age-note a:hover { color: var(--age-navy); } .age-note a:focus-visible { outline: 2px solid var(--age-sky); outline-offset: 2px; } /* ---------------------------------------------------------------------- */ /* Page verrouillee */ /* ---------------------------------------------------------------------- */ /* Defilement bloque tant que la declaration n'est pas faite. La classe est posee par PHP sur , donc avant tout rendu. */ html.age-locked, html.age-locked body { overflow: hidden; overscroll-behavior: none; } /* `inert` (pose par PHP, retire par age-gate.js) sort deja le contenu de l'ordre de tabulation et le rend inactif ; ces regles y ajoutent l'effet visuel et couvrent les navigateurs ou `inert` n'est pas connu. */ html.age-locked .site-shell { pointer-events: none; user-select: none; -webkit-user-select: none; } /* Repli pour les navigateurs sans backdrop-filter : le flou est applique au contenu lui-meme, jamais en plus de celui du voile. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html.age-locked .site-shell { filter: blur(4px); } } /* ---------------------------------------------------------------------- */ /* Animations */ /* ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .age-gate[open] { animation: age-veil 200ms ease both; } .age-gate[open] .age-card { animation: age-rise 260ms cubic-bezier(.22, .61, .36, 1) both; } } @keyframes age-veil { from { opacity: 0; } to { opacity: 1; } } @keyframes age-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes age-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .age-btn { transition: none; } .age-btn:not(:disabled):hover, .age-btn:not(:disabled):focus-visible { transform: none; } .age-btn.is-busy .age-spinner { animation: none; opacity: .6; } } /* ---------------------------------------------------------------------- */ /* Petits ecrans */ /* ---------------------------------------------------------------------- */ @media (max-width: 420px) { .age-logo { width: 148px; margin-bottom: 15px; } .age-note { font-size: .74rem; } } /* Ecrans bas ou zoom eleve : la carte reste compacte et la fenetre defile. */ @media (max-height: 620px) { .age-logo { width: 132px; margin-bottom: 12px; } .age-card { padding-top: 22px; } .age-actions { margin-top: 16px; } }