/* connexion — la peinture propre à cet écran. Sortie de `app/templates/connexion.html` le 2026-08-28. Chargée APRÈS simsimup.css et AVANT navigation.css : cet ordre est celui qui était en service, il ne change pas. */ :root { --trait: var(--filet); --trait-fort: var(--filet-fort); --accent-vif: var(--marque-vif); --rouge: var(--alerte); --rouge-pale: var(--papier); --encre-douce: #2c3650; } /* ⚠️ `box-sizing` est posé par `simsimup.css` depuis le 2026-09-01, pour les dix-neuf écrans à la fois. */ html { height: 100%; } body { font-family: var(--mesure); margin: 0; max-width: none; background: var(--papier); color: var(--encre); line-height: 1.6; -webkit-font-smoothing: antialiased; padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 3rem); min-height: 100svh; /* ⚠️ **PANNEAU UNIQUE, CENTRÉ — 2026-09-11, DEMANDE DE FRANCK.** Le logo vivait ICI, à côté du panneau (flex row) ; il est passé DANS la carte, au-dessus du titre. Une seule colonne centrée suffit donc. */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .logo { display: block; height: auto; /* ⚠️ **DANS LA CARTE, ET TOUJOURS LA VERSION MARINE — 2026-09-11, DEMANDE DE FRANCK.** Le logo est passé au-dessus du titre, sur le verre clair du panneau : le gabarit sert donc `logo-simsimup.png` (marine) quel que soit le fond, et non plus la variante claire/sombre choisie pour le FOND — sur le panneau clair, la version blanche disparaissait. La largeur suit la résolution (`18vw`, bornée), comme le panneau. */ box-shadow: none; width: clamp(150px, 18vw, 300px); max-width: 100%; /* ⚠️ **DÉBORD DE 15 px EN HAUT-GAUCHE — effet voulu, jamais à droite ni en bas.** `--pad-carte` (le padding de la carte) est compensé pour que le débord vaille 15 px au BORD du panneau, quel que soit ce padding. */ margin: calc(-1 * var(--pad-carte) - 15px) 0 .5rem calc(-1 * var(--pad-carte) - 15px); } /* ⚠️⚠️ **LE HALO EST RETIRÉ — 2026-09-06, DEMANDE DE FRANCK.** Deux `drop-shadow` entouraient le logo d'une auréole, claire sur les fonds clairs et sombre sur les fonds sombres. **Elle a cessé d'être utile quand le logo a changé** : le dessin neuf est un marine bien plus profond — L = 0,037 contre 0,217 — et sa version blanche est du blanc pur. *Les sept fonds passent désormais 4,5 sans aucune aide, de 5,37 à 8,84 ; cinq sur sept en avaient besoin avec l'ancien.* ⚠️ **LES MESURES DE CONTRASTE NE CHANGENT PAS EN LE RETIRANT** : elles ont toujours été faites sur les pixels d'encre du dessin, jamais sur son ombre. *Le halo n'entrait dans aucun chiffre — il ne faisait qu'épaissir le trait à l'œil.* ⚠️ **LES CLASSES `clair`/`sombre` NE SONT PLUS POSÉES SUR LE LOGO — 2026-09-11.** Depuis que le logo vit sur le panneau (verre clair) et non plus sur le fond, il est TOUJOURS en version marine : le gabarit ne lit plus `fonds[fond-1][1]` ni `[2]` pour lui. `FONDS` garde ces colonnes — c'est la carte des fonds — mais la connexion ne s'en sert désormais que pour l'image de fond (`[0]`) et le nom du flou (`data-fond`). */ /* ⚠️ **LARGEUR FLUIDE — 2026-09-11.** Le panneau suivait `34rem` FIXE : il ne rétrécissait qu'en dessous, jamais au-dessus. Il suit désormais la résolution (`40vw`, borné 300–640 px), comme le logo et les textes. */ .panneau { width: clamp(300px, 40vw, 640px); max-width: 100%; padding: 0; } .carte { /* ⚠️ **`--pad-carte` FLUIDE, ET LE LOGO EN DÉPEND — 2026-09-11.** Le padding suit la résolution ; `.logo` le compense pour déborder de 15 px. `position: relative` + `overflow: visible` laissent ce débord sortir du panneau sans être rogné. */ --pad-carte: clamp(1.1rem, 2.2vw, 2rem); position: relative; overflow: visible; background: linear-gradient(140deg, rgba(255, 255, 255, .60) 0%, var(--verre-creux) 38%, var(--reflet-nul) 62%), var(--verre-vif); /* ⚠️ **PLUS AUCUN FLOU ICI — 2026-09-06.** La carte est passée au niveau 1 : elle se pose sur `body::after`, qui floute pour toute la page. *Interdit n°12 : un seul flou par plaque. Deux `backdrop-filter` empilés coûtent deux passes de rendu pour un effet que personne ne distingue.* */ border: 1px solid rgba(23, 35, 63, .10); border-radius: var(--r-doux); padding: var(--pad-carte); box-shadow: 0 14px 44px rgba(23, 35, 63, .15), inset 0 1px 0 var(--clair-papier), inset 0 -1px 0 rgba(23, 35, 63, .07); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .carte { background: var(--blanc); } .carte input[type="email"], .carte input[type="password"] { background: #f1f1ee; } } @media (prefers-contrast: more) { .carte { background: var(--blanc); border-color: var(--trait-fort); -webkit-backdrop-filter: none; backdrop-filter: none; } .carte input[type="email"], .carte input[type="password"] { background: #f1f1ee; border-color: var(--encre); } } label { display: block; margin-top: 1rem; font-size: var(--taille-courant); font-weight: 600; color: var(--encre-douce); } .carte input[type="email"], .carte input[type="password"] { width: 100%; padding: .65rem .8rem; font-size: var(--taille-fort); font-family: var(--mesure); color: var(--encre); margin-top: .3rem; background: rgba(23, 35, 63, .05); border: 1px solid var(--reflet); border-radius: var(--r); box-shadow: inset 0 1px 3px rgba(23, 35, 63, .09); transition: box-shadow .12s ease; } .carte input[type="email"]:hover, .carte input[type="password"]:hover { box-shadow: inset 0 1px 3px rgba(23, 35, 63, .09); } button { font-family: var(--mesure); font-size: var(--taille-appui); font-weight: 650; padding: .7rem 1.4rem; cursor: pointer; margin-top: 1.5rem; width: 100%; transition: background .12s ease, transform .06s ease; } button:active { transform: translateY(1px); } /* ⚠️ **TAILLES FLUIDES DU PANNEAU — 2026-09-11, DEMANDE DE FRANCK.** Le titre, le sous-titre, les libellés, les champs et le bouton suivent la résolution, pour que le contenu réduise AVEC le panneau et le logo — et ne paraisse pas géant dans un petit panneau. Bornés pour rester lisibles sur petit écran. */ .carte h1 { font-size: clamp(1.35rem, 2.4vw, 2rem); margin-top: 0; } .carte .sous-titre { font-size: clamp(.85rem, 1.1vw, 1rem); } .carte label { font-size: clamp(.85rem, 1vw, 1rem); } .carte input[type="email"], .carte input[type="password"] { font-size: clamp(.9rem, 1.15vw, 1.1rem); } .carte button { font-size: clamp(.95rem, 1.2vw, 1.15rem); } .version { margin: 1.1rem 0 0; text-align: right; font-size: var(--taille-etiquette); color: var(--encre-douce); font-variant-numeric: tabular-nums; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* ⚠️⚠️ **UNE COULEUR, PLUS UNE IMAGE — 2026-09-06.** Ce repli portait `fond-blanc-rouge.jpg`, 473 Ko, hérité de l'ancienne identité. Il n'avait plus rien à voir avec les sept fonds : **il apparaissait en rouge pendant le chargement de l'image tirée**, puis disparaissait. *Un repli qui montre autre chose que ce qu'il remplace n'est pas un repli, c'est un clignotement.* ⚠️ **ET IL COÛTAIT UN SECOND TÉLÉCHARGEMENT** pour n'être vu qu'un instant. Une couleur ne coûte rien et tient le même rôle : donner un fond au cas où l'image manque. */ background: var(--blanc-casse); } .fond { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* ══ LA PLAQUE DE NIVEAU 0 — 2026-09-06 ═══════════════════════════ ⚠️⚠️ **LA CONNEXION N'EN AVAIT AUCUNE, SEULE PAGE DU SERVICE DANS CE CAS.** Toutes les autres portent la grande plaque par `body::before` ; ici le fond était nu, et seule la carte posait du verre. **Demande de Franck : « les surfaces vitrées doivent couvrir 90 % de la surface affichée ».** ⚠️ **`::after` ET NON `::before`, QUI EST DÉJÀ PRIS** par le repli de fond. Les deux sont peints dans l'ordre de l'arbre : `::after` passe donc au-dessus du repli, et sous le contenu. ⚠️ **`inset: 5vh 5vw` DONNE EXACTEMENT 90 %** de la largeur et de la hauteur, et laisse voir le fond tout autour — c'est là qu'il vit, maintenant que le voile est tombé à 30 %. ⚠️ **`pointer-events: none`** : une plaque qui intercepterait un clic rendrait le formulaire inutilisable, et rien ne le dirait. */ body::after { content: ""; position: fixed; inset: 5vh 5vw; z-index: 1; pointer-events: none; border-radius: var(--r-panneau); /* ⚠️ **PLUS DE `backdrop-filter` ICI — 2026-09-06.** Le verre se fait par la copie floutée du fond et le grain, qui ne dépendent d'aucun filtre du moteur. *`background-attachment: fixed` cale la copie sur le viewport, donc exactement sur le fond net qu'elle recouvre.* */ /* ⚠️⚠️ **`cover` SUR LA COUCHE DE GRAIN : UNE SEULE TUILE, DONC AUCUNE COUTURE.** À 420 px répétés, **le quadrillage se voyait** — `feTurbulence` n'est pas périodique, les bords ne se raccordent pas, et l'œil suit la grille au lieu de voir du verre. *La tuile fait maintenant 1600 × 1200 et se met à l'échelle de la plaque : elle est toujours plus grande qu'elle, donc jamais répétée.* ⚠️ **LE `cover` DÉFORME LÉGÈREMENT LE MOTIF**, et c'est sans conséquence : un bruit n'a pas d'orientation propre. *C'est ce qui permet de garder une seule image pour tous les formats d'écran.* */ background: var(--verre-grain) center center / cover no-repeat, linear-gradient(var(--verre), var(--verre)), var(--fond-flou) center center / cover fixed no-repeat; /* ⚠️⚠️ **`soft-light` SUR LA COUCHE DE GRAIN — 2026-09-06, ET C'EST CE QUI SÉPARE UNE IMPERFECTION D'UNE SALISSURE.** Posé en `normal`, un bruit fractal **ne peut qu'assombrir** : sa moyenne est un gris moyen, donc les trois couches empilées couvraient **64 %** de la plaque de gris. *Mesuré : 41 niveaux sur 255 d'écart moyen — la plaque virait au gris de voile, et le verre disparaissait.* ⚠️ **EN `soft-light`, LE GRIS MOYEN NE FAIT RIEN.** Seuls les écarts comptent : le clair éclaircit, le sombre assombrit, et la luminance générale ne bouge pas. C'est la définition même d'un micro-relief — **une modulation, pas une couche**. ⚠️ **LES TROIS AUTRES COUCHES RESTENT EN `normal`.** Le voile de verre doit, lui, couvrir : c'est ce qui porte le contraste du texte, et le passer en fondu ferait retomber la lisibilité. */ background-blend-mode: soft-light, normal, normal; border: 1px solid var(--verre-bord); box-shadow: var(--pose), inset 0 1px 0 var(--verre-arete); } body > * { position: relative; z-index: 2; } /* ⚠️ **LE PALIER `max-width: 60rem` A ÉTÉ RETIRÉ — 2026-09-11.** Il faisait basculer la disposition de deux colonnes (logo | panneau) à une colonne, et re-fixait la largeur du logo et du panneau. Tout est désormais FLUIDE (`clamp` avec `vw`) et en une seule colonne à toute taille : ce palier ne ferait que re-figer ce qu'on vient de rendre continu. */ /* ⚠️⚠️ **LA RÈGLE `prefers-reduced-motion` A ÉTÉ RETIRÉE LE 2026-09-06 — ELLE CASSAIT LA PAGE AU LIEU DE LA CALMER.** Elle datait de l'époque où `.fond` était une `