/* Overlay de chargement plein écran — Phase 101. Page actuelle visible en légère transparence en dessous, overlay cream semi-opaque par-dessus, spinner "chien + engrenages" centré. */ .pl-overlay { position: fixed; inset: 0; /* Valeur maximale du standard CSS — les gestionnaires de mots de passe (Bitwarden, etc.) injectent leur icône avec ce même z-index pour rester visibles au-dessus de tout contenu de page (Phase 106) ; à z-index égal, page-loader.js déplace l'overlay en fin de juste avant l'affichage pour gagner le départage par ordre du DOM. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: rgba(248, 244, 235, 0.88); /* cream #F8F4EB à 88% */ opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; } .pl-overlay.pl-visible { opacity: 1; visibility: visible; transition: opacity 180ms ease, visibility 0s linear 0s; } .pl-box { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0 1rem; } .pl-dog-wrap { position: relative; /* Au moins la moitié de la plus petite dimension de l'écran (vmin = min(vw, vh)), sans jamais déborder horizontalement (90vw) ni verticalement (90vh). L'élément n'a pas de hauteur intrinsèque contrainte (l'image est en height:auto) : un simple max-height serait un no-op et laisserait déborder un viewport large et bas (ex. 1000x350). On borne donc directement la largeur via la hauteur dispo, convertie par le ratio intrinsèque de l'image (700x757 — spinner-dog.webp). */ width: min(50vmin, 90vw, 90vh * 700 / 757); line-height: 0; } .pl-dog-img { width: 100%; height: auto; display: block; } .pl-gears { /* Position empirique (pas une formule) : centre du plus grand cercle inscriptible dans la partie ronde de la bulle de pensée sur spinner-dog.webp (700x757), mesuré par transformée de distance — corrige le décalage du cluster d'engrenages dans son propre viewBox SVG (~-4.3%/+17.6%, le cluster n'est pas centré dans son 200x200). Si l'image est régénérée avec un cadrage différent, ces valeurs doivent être re-mesurées, pas simplement recopiées. */ position: absolute; left: 66.8%; top: 13.5%; width: 45%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); } .pl-gears svg { width: 100%; height: 100%; display: block; overflow: visible; } .pl-gear-outline { fill: #fff; stroke: #111; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .pl-gear-hole { fill: #fff; stroke: #111; stroke-width: 4; vector-effect: non-scaling-stroke; } .pl-text { font-family: 'Lora', serif; font-size: 0.95rem; color: #3D3D3D; } /* Respecte la préférence système : pas d'animation, chien statique seul. */ @media (prefers-reduced-motion: reduce) { .pl-gears { display: none; } .pl-overlay { transition: none; } }