/* ═══════════════════════════════════════════════════════════════════════════════════════ CAPSULE — PAGE D'ACCÈS. Portée depuis `capsule-auth-FONDS_v1_31.07.2026.html` (19 605 o), design TRANCHÉ par Pedro le 31.07 — repris tel quel, pas rouvert. ⚠️ CE QUI A CHANGÉ EN PASSANT DE LA MAQUETTE AU PRODUIT, et rien d'autre : ① La maquette portait 57 lignes de JavaScript pour le choix du fond, le côté de la fenêtre, l'opacité du voile et les états d'échec. TOUT est passé au serveur ou au CSS : le fond arrive par `?fond=`, ses trois valeurs mesurées sont écrites en style en ligne sur ``, et les échecs sont rendus par Blade. La page ne porte plus **aucun** script — A15 (« les chiffres justes JavaScript coupé ») n'est plus une propriété à surveiller ici, c'est une propriété structurelle. ② Le bouton « Mot de passe oublié » est RETIRÉ. L'e-mail n'est pas dans ce lot (spec §5.6), donc il n'aurait rien envoyé. C'est la règle que Pedro a lui-même appliquée aux boutons Apple/Google le 31.07 : « un bouton mort sur un écran d'accès est un doute à chaque ouverture, pas une promesse. » Décision de chantier n°5, renversable d'un mot. ③ La galerie se replie par une case à cocher CSS au lieu d'un écouteur de clic. DA : accent unique #CB241A, SF Pro en corps, monospace sur les micro-labels, grille 8 pt. ⛔ AUCUNE RESSOURCE RÉSEAU (A21) : polices système uniquement sur cette page. ═══════════════════════════════════════════════════════════════════════════════════════ */ :root{ --rouge:#CB241A; --blanc:#ffffff; --filet:rgba(255,255,255,.16); --voile:.72; --u:8px; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace; } *{box-sizing:border-box} html,body{height:100%} body{margin:0; font-family:var(--sans); color:var(--blanc); background:#05070c; min-height:100svh} .fond{position:fixed; inset:0; overflow:hidden; z-index:0; background:#05070c} .fond video,.fond img{width:100%; height:100%; object-fit:cover; display:block; object-position:var(--cadrage,72% center)} .fond .repli{display:none} .fond::after{content:""; position:absolute; inset:0; background:var(--degrade)} /* la fenêtre est à gauche → le voile est à gauche ; et inversement */ body[data-cote="gauche"]{--cadrage:78% center; --degrade:linear-gradient(100deg,rgba(5,7,12,var(--voile)) 0%,rgba(5,7,12,calc(var(--voile) * .82)) 34%,rgba(5,7,12,.14) 64%,rgba(5,7,12,.4) 100%)} body[data-cote="droite"]{--cadrage:22% center; --degrade:linear-gradient(260deg,rgba(5,7,12,var(--voile)) 0%,rgba(5,7,12,calc(var(--voile) * .82)) 34%,rgba(5,7,12,.14) 64%,rgba(5,7,12,.4) 100%)} .scene{position:relative; z-index:1; min-height:100svh; display:flex; align-items:center; padding:calc(var(--u) * 6) calc(var(--u) * 9) calc(var(--u) * 16)} body[data-cote="droite"] .scene{justify-content:flex-end} .fenetre{width:min(420px,100%); background:rgba(9,10,14,var(--panneau,.44)); -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%); border:1px solid var(--filet); box-shadow:0 24px 64px rgba(0,0,0,.5); padding:calc(var(--u) * 5)} .marque{font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 calc(var(--u) * 3)} h1{margin:0 0 var(--u); font-size:26px; font-weight:600; letter-spacing:-.3px} .sous{margin:0 0 calc(var(--u) * 4); font-size:14px; line-height:1.5; color:rgba(255,255,255,.66)} .row{margin-bottom:calc(var(--u) * 2)} label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:var(--u)} input[type=email],input[type=password]{width:100%; font:inherit; font-size:15px; min-height:44px; padding:11px var(--u); color:var(--blanc); background:rgba(255,255,255,.08); border:1px solid var(--filet); border-radius:0} input:focus-visible{outline:2px solid var(--rouge); outline-offset:2px; background:rgba(255,255,255,.13)} .check{display:flex; align-items:center; gap:var(--u); min-height:44px; cursor:pointer; font-size:13px; color:rgba(255,255,255,.72); font-family:var(--sans); text-transform:none; letter-spacing:0; margin-bottom:0} .check input{flex:none; width:20px; height:20px; accent-color:var(--rouge)} /* ── Les trois états d'échec (A19) — rendus par le serveur, plus par un script ────────── */ .alert{display:flex; gap:calc(var(--u) * 1.5); align-items:flex-start; margin:calc(var(--u) * 2) 0 0; padding:calc(var(--u) * 1.5) calc(var(--u) * 2); border:1px solid var(--rouge); border-left:3px solid var(--rouge); background:rgba(203,36,26,.14); font-size:13px; line-height:1.5} .bang{flex:none; width:18px; height:18px; background:var(--rouge); color:var(--blanc); display:grid; place-items:center; font-size:12px; font-weight:700} .bang::before{content:"!"} .alert b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#ff6a5e; margin-bottom:2px} .btns{display:flex; align-items:center; gap:calc(var(--u) * 2); margin-top:calc(var(--u) * 3)} .b{font-family:var(--mono); font-size:12px; letter-spacing:.5px; text-transform:uppercase; min-height:44px; padding:11px calc(var(--u) * 3); cursor:pointer; color:var(--blanc); background:transparent; border:1px solid var(--filet); border-radius:0; text-decoration:none; display:inline-flex; align-items:center; justify-content:center} .b:focus-visible{outline:2px solid var(--rouge); outline-offset:3px} #go{min-width:116px; margin-left:auto; background:var(--rouge); border-color:var(--rouge)} /* lot 4bis : 10 → 12 px, et le gris éclairci d'un cran (.42 → .58). Mesuré à 4,03:1 sur le panneau ; ce pied nomme le fil qui tient la porte — on le lit, ou il ne sert à rien. */ .pied{margin:calc(var(--u) * 4) 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.58)} /* ── la galerie de thèmes — préfigure la galerie de récompenses ──────────────────────── */ .bascule-t{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none} .galerie{position:fixed; left:0; right:0; bottom:0; z-index:2; background:linear-gradient(0deg,rgba(5,7,12,.92) 0%,rgba(5,7,12,.72) 60%,transparent 100%); padding:calc(var(--u) * 2) calc(var(--u) * 3); overflow-x:auto} #replier:checked ~ .galerie{display:none} .fams{display:flex; gap:calc(var(--u) * 4); list-style:none; margin:0; padding:0; align-items:flex-end} .fam > span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--u)} .lot{display:flex; gap:var(--u); list-style:none; margin:0; padding:0} .vig{width:104px; height:58px; padding:0; cursor:pointer; position:relative; overflow:hidden; background-size:cover; background-position:center; border:1px solid var(--filet); border-radius:0; display:block; text-decoration:none} .vig span{position:absolute; inset:auto 0 0 0; padding:3px 4px; font-family:var(--mono); font-size:8.5px; line-height:1.25; letter-spacing:.3px; color:var(--blanc); background:rgba(5,7,12,.72); text-align:left} .vig[aria-current="true"]{outline:2px solid var(--rouge); outline-offset:0} .vig:focus-visible{outline:2px solid var(--blanc); outline-offset:2px} /* état prévu pour les récompenses — aucune vignette ne le porte aujourd'hui */ .vig[data-etat="verrouille"]{filter:grayscale(1) brightness(.42); cursor:not-allowed} .vig[data-etat="verrouille"] span{color:rgba(255,255,255,.55)} .poignee{position:fixed; right:calc(var(--u) * 2); top:calc(var(--u) * 2); z-index:3; background:rgba(5,7,12,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)} .poignee .ouvrir{display:none} #replier:checked ~ .poignee .ouvrir{display:inline} #replier:checked ~ .poignee .fermer{display:none} /* ⛔ `prefers-reduced-motion` coupe TOUT (spec §5.1) : la vidéo disparaît, son image de remplacement prend sa place. Ce n'est pas une dégradation — c'est la même composition, au même cadrage, sans mouvement. */ @media (prefers-reduced-motion:reduce){ .fond video{display:none} .fond .repli{display:block} } @media (max-width:720px){ .scene{padding:calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 14); align-items:flex-end} body[data-cote="droite"] .scene{justify-content:flex-start} .fenetre{width:100%; padding:calc(var(--u) * 4)} .fond video,.fond img{object-position:center 30%} body[data-cote="gauche"],body[data-cote="droite"]{ --degrade:linear-gradient(180deg,rgba(5,7,12,.3) 0%,rgba(5,7,12,.62) 45%,rgba(5,7,12,.96) 100%)} }