/* ========================================================================== core/notice-gate.css — L2 « Conformité au premier contact » (23/07/2026) Couche PUREMENT ADDITIVE : ne redéfinit aucun sélecteur existant, tout est préfixé .ng-. Couleurs exclusivement par tokens core/tokens.css (zéro hex). z-index 9000 : au-dessus du plus haut existant en production (3000). Verrou de fond : .ng-verrouille sur coupe le défilement du document pendant que l'écran est présent. Il est retiré à la fermeture. ========================================================================== */ .ng-verrouille, .ng-verrouille body { overflow: hidden !important; } .ng-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: calc(var(--sn-space-4) + var(--sn-safe-top)) calc(var(--sn-space-4) + var(--sn-safe-right)) calc(var(--sn-space-4) + var(--sn-safe-bottom)) calc(var(--sn-space-4) + var(--sn-safe-left)); background: var(--sn-bg); font-family: var(--sn-font-ui); /* Le fond est opaque : la surface applicative n'est pas seulement masquée, elle n'est de toute façon pas alimentée (aucun appel de données émis). */ } .ng-carte { display: flex; flex-direction: column; width: 100%; max-width: 44rem; /* relatif : tient du mobile 320 px au desktop */ max-height: 100%; background: var(--sn-surface); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-rest); padding: var(--sn-space-5); gap: var(--sn-space-3); } .ng-titre { margin: 0; font-size: var(--sn-fs-h1); line-height: 1.2; color: var(--sn-ink-100); } .ng-sous { margin: 0; font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } .ng-corps { flex: 1 1 auto; min-height: 6rem; overflow-y: auto; /* le texte défile DANS sa boîte, jamais la page */ overscroll-behavior: contain; padding: var(--sn-space-3); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); background: var(--sn-bg); color: var(--sn-ink-80); font-size: var(--sn-fs-base-terrain); line-height: 1.55; } .ng-corps:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } .ng-p { margin: 0 0 var(--sn-space-3) 0; } .ng-p:last-child { margin-bottom: 0; } .ng-vide { margin: 0; color: var(--sn-ink-60); font-style: italic; } .ng-actions { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); align-items: center; } /* L'acceptation prend la place restante et reste la cible dominante ; Écouter et Télécharger sont des canaux secondaires — les proposer ne les confond jamais avec le geste qui vaut consentement. */ .ng-actions .ng-accepter { flex: 1 1 14rem; } .ng-actions .sn-btn { min-height: var(--sn-tap-min); } .ng-mention { margin: 0; font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } .ng-lien { align-self: flex-start; min-height: var(--sn-tap-min); padding: 0; border: 0; background: none; color: var(--sn-ink-60); font-family: inherit; font-size: var(--sn-fs-caption); text-decoration: underline; cursor: pointer; } .ng-lien:hover { color: var(--sn-ink-100); } /* Desktop : la carte respire, le texte reste lisible sans s'étirer. */ @media (min-width: 1024px) { .ng-carte { padding: var(--sn-space-6); gap: var(--sn-space-4); } .ng-corps { min-height: 14rem; max-height: 52vh; } } /* PAS d'animation d'apparition. Mesure du 23/07 : une animation `opacity: 0 -> 1` laisse l'element a 0 tant que le moteur n'a pas peint une premiere frame. Sur un ecran DECORATIF c'est un detail ; sur un ecran BLOQUANT, c'est une surface invisible qui verrouille l'application sans rien montrer. La visibilite d'un verrou ne depend jamais d'une animation. */