/* 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);
  --rouge: var(--alerte);
  --rouge-pale: var(--papier);

  /* ⚠️ **ENCRE NOIRE SUR CETTE PAGE — 2026-09-18, DEMANDE DE FRANCK**, pour la
     lisibilité : le verre y est presque clair (voile à 19 %), et l'encre marine
     du site n'y tenait plus. *Les deux jetons sont réécrits ICI, donc pour cette
     page seule ; les autres écrans gardent leur encre.* */
  --encre: #000;
  --encre-douce: #000;
}
/* ⚠️ `box-sizing` est posé par `simsimup.css` depuis le 2026-09-01,
   pour les dix-neuf écrans à la fois. */

html { height: 100%; }
body {
  /* ⚠️ **LA PAGE D'ENTRÉE NE POSE AUCUNE ZONE BLANCHE SUR SA PLAQUE — figé.**
     Surcharge de PORTÉE sur `body`, pas seconde variable : `verre-liquide.js`
     lit ce jeton sur `body`, et ce qu'écrit `/apparence.css` sur `:root` ne
     la rejoint donc pas. Les quinze autres réglages de texture sont ceux du
     reste du site. */
  --vl-voile-zones: 0;
  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;
}

/* ⚠️ **PETIT, EN BAS, JUSTE DEVANT LA VERSION — 2026-09-16, DEMANDE DE
   FRANCK** : « diminue beaucoup la taille du logo et place-le juste devant le
   numéro de version ». Il vivait au-dessus du titre, sur 150 à 300 px de
   large, et débordait du panneau de 15 px en haut à gauche. **Il tient
   désormais la hauteur d'une ligne** — 1,35 rem, soit 78 px de large pour un
   dessin de 1 200 × 332. *Toujours la version marine : il est sur le verre
   clair de la zone.* */
.logo { display: block; height: 1.35rem; width: auto; box-shadow: none; }
/* ⚠️⚠️ **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; }

/* ══ LE PANNEAU EST LA PLAQUE — 2026-09-16, DEMANDE DE FRANCK ════════
   « Supprimer la grande plaque de verre » ; « la zone de connexion a des coins
   arrondis, cohérence avec le design global ». La plaque de 90 % est partie
   (`body::after`), et c'est la zone de connexion qui porte désormais la
   matière de verre de la page : copie floutée du fond, voile blanc, arête,
   ombre posée — **et le rayon de la plaque du site, `--r-panneau`**.
   ⚠️ **LA ZONE VISIBLE EST `.panneau`, PAS `.carte`** : la règle commune des
   zones (`simsimup.css`) traite `.carte` comme une zone posée DANS une zone et
   lui retire fond et rayon — (0,2,2). Les réglages de fond et de rayon que
   `.carte` portait ici ne s'appliquaient donc pas : mesuré, 8 px d'arrondi.
   *`body div.panneau` pèse (0,1,2) et passe après la feuille commune.*
   ⚠️⚠️ **68 % DE BLANC ET NON `--verre` (48 %) — MESURÉ LE 2026-09-16 SUR LES
   RAYURES.** Elles sont sombres : à 48 %, « Mot de passe » tombait à 3,93:1,
   « Se connecter » à 3,54, la version à 3,48. **À 60 % tout passait, de
   justesse (4,83) ; à 68 %, 5,82 au plus bas.** *La marge compte : le fond est
   calé sur la fenêtre, les rayures sous la zone changent avec la largeur.* */
/* ⚠️⚠️ **SUR LA VIDÉO, LE DÉPOLI EST FAIT EN DIRECT — 2026-09-17.** La copie
   pré-floutée des rayures (`--fond-flou`) ne pouvait pas suivre un fond qui
   bouge : le panneau prend le flou commun, `--flou`, et **72 % de blanc**, la
   valeur que tient aussi le centre du verre liquide. *Le jeton passe à `none`
   quand le système demande plus de contraste, et le panneau devient blanc. */
/* ⚠️⚠️ **LES CINQ PARAMÈTRES DE VERRE VIENNENT DU JEU COMMUN — 2026-09-22.**
   Demande de Franck : *« applique aux plaques de verre (Couche 1) les mêmes
   paramètres de transparence, rebord, reflet, pour toutes les pages »*.
   Fond, flou, rebord, arête et reflet étaient écrits ici en toutes lettres,
   et le rail les réécrivait de son côté, aux mêmes valeurs. **Ils pointent
   désormais tous les cinq vers `--plaque-*`** : régler la plaque règle les
   deux écrans à la fois.

   ⚠️ **L'ARRONDI, LUI, N'EST PAS DANS LE JEU, ET C'EST VOULU.** Ce panneau
   est un rectangle de 40 px de rayon, le rail une pilule de 999. *La demande
   parle de transparence, de rebord et de reflet — pas de forme.*

   ⚠️ **`--pose` VAUT `none` DEPUIS LE 2026-09-22** : l'ombre portée du
   panneau est partie avec les autres. Le jeton reste dans la valeur pour
   que `/apparence` puisse la rendre sans rouvrir ce fichier. */
body div.panneau {
  background-color: var(--plaque);
  background-image: var(--plaque-reflet);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r-panneau);
  box-shadow: var(--pose), inset 0 1px 0 var(--verre-arete);
}

.carte {
  /* `--pad-carte` suit la résolution. *Le logo ne déborde plus du panneau
     depuis le 2026-09-16 : il est en bas, dans le pied de la carte.* */
  --pad-carte: clamp(1.1rem, 2.2vw, 2rem);
  position: relative; overflow: visible;
  padding: var(--pad-carte);
}

@supports not ((backdrop-filter: blur(1px)) or
               (-webkit-backdrop-filter: blur(1px))) {
  body div.panneau { background: var(--blanc); }
  .carte input[type="email"],
  .carte input[type="password"] { background: #f1f1ee; }
}

@media (prefers-contrast: more) {
  body div.panneau { background: var(--blanc); border-color: var(--trait-fort); }
  .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. */
/* ⚠️ **UN CRAN PLUS GRAND — 2026-09-18, DEMANDE DE FRANCK** : « police légèrement
   plus grande », pour la lisibilité sur un verre presque clair. Environ +12 %,
   bornes comprises. */
.carte h1 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); margin-top: 0; }
.carte label { font-size: clamp(.95rem, 1.12vw, 1.12rem); }
.carte input[type="email"],
.carte input[type="password"] { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.carte button { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.version { font-size: clamp(.8rem, .95vw, .95rem); }



/* La signature : le logo, puis la version, alignés à droite sur une
   ligne. Le logo reste là même quand la version n'est pas connue. ⚠️ **Le nom
   ne contient ni « carte », ni « bloc », ni « panneau »** : la règle commune des
   zones (`simsimup.css`) peindrait sinon un cadre derrière — vu à la capture. */
.signature {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  margin: 1.1rem 0 0;
}
.version {
  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);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.fond {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}

/* ⚠️ **LA GRANDE PLAQUE (`body::after`, 90 % de l'écran) EST PARTIE LE
   2026-09-16**, demande de Franck : la zone de connexion porte seule le verre.
   Voir « LE PANNEAU EST LA PLAQUE », plus haut. */

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 `<video>` : masquer une vidéo pour qui
   demande moins de mouvement a du sens. **`.fond` est une `<img>` depuis
   ce matin : il n'y a plus aucun mouvement à réduire.**

   ⚠️ **ET ELLE NE MASQUAIT PAS TOUT** : `body::after` continuait
   d'afficher la copie floutée du fond. Le lecteur voyait donc une plaque
   photographique posée sur un aplat `--blanc-casse` — le fond retiré, son
   reflet gardé. *Une règle d'accessibilité qui dégrade le rendu de ceux
   qu'elle vise est pire que son absence.* */

/* ⚠️ **`body::after` A ÉTÉ AJOUTÉ ICI LE 2026-09-06** : c'est lui qui porte
   désormais l'image, et l'impression le gardait alors qu'elle écartait les
   deux autres. *Une page imprimée avec une photo en fond gaspille l'encre
   et rend le texte gris.* */
@media print { body::before, .fond { display: none; } }


/* ⚠️⚠️ **PÉRIMÉ LE 2026-09-19 — relevé au déploiement** : ce PNG n'est PLUS servi et
   `app/.dockerignore` l'exclut de l'image.
   ⚠⚠ **ET CE QUI LE REMPLAÇAIT A ÉTÉ REMPLACÉ À SON TOUR — 2026-09-21.** Il était écrit ici
   que *« le gabarit sert `marcvanduffel-architect-1073607_1920.jpg` »* : `connexion.html:42`
   sert désormais **`fonds/sim-fond.jpg`**, demande de Franck. `marcvanduffel` est donc devenu
   orphelin à son tour, et il est entré dans `app/.dockerignore` le même jour — **406 Ko qui
   entraient dans l'image sans que rien ne les demande**. *Relevé par la revue d'intention.*
   Le bloc ci-dessous est gardé pour la trace, et pour ses mesures de poids.
   ⚠️ **`fonds/pexels-matreding-10410128.png` DEPUIS LE 2026-09-18** — demande de Franck, après la
   vidéo étoilée du matin. **Une image, plus une vidéo** : ni affiche, ni lecture, ni règle de
   mouvement réduit — elles sont parties avec elle. ⚠️ **3 052 Ko en PNG** ; la même image en JPEG
   de qualité 85 pèse **238 Ko**, treize fois moins, à l'œil identique. *Le nom demandé a été gardé
   tel quel.* */
/* ══ UN SEUL FOND : LA VIDÉO `fond-2.webm` — 2026-09-17 ════════════
   Demande de Franck : « met en fond de page cette vidéo animatio_intro_2.webm »
   — le même fichier, au même octet, que `fond-2.webm`, présent depuis le
   2026-08-19 et inerte depuis le 2026-08-30. VP9, 1 920 × 1 080, 29 s, 30 im/s,
   1,32 Mo, sans piste audio. **Son affiche `fond-2.jpg` (54 Ko) est sa première
   image**, extraite dans un navigateur : c'est elle qui s'affiche avant la
   lecture, et à la place de la vidéo quand le mouvement est réduit.
   *Elle remplace les rayures de la marque du 2026-09-16, qui restent sur le
   disque. Pour y revenir : `<img class="fond">` dans le gabarit, et la règle
   `--fond-flou` de ce jour-là, dans l'historique Git.* */

/* ══ LE VERRE LIQUIDE — 2026-09-17, DEMANDE DE FRANCK ════════════════
   `connexion.js` dessine le fond ET le verre dans un canevas plein écran,
   posé juste après `.fond`. **Rien ici ne s'applique tant que le script n'a
   pas posé `verre-liquide` sur `<html>`** — c'est-à-dire tant qu'une première
   image n'est pas dessinée. Sans WebGL, sans script, ou à la moindre panne, la
   page reste celle d'avant, mesurée le 2026-09-16 : c'est le repli.
   ⚠️ **Le canevas est `visibility: hidden` et non `display: none`** avant
   l'activation : le script lit sa taille pour caler le fond, et un élément
   non affiché n'en a pas.
   ⚠️ **Le panneau garde sa bordure, son arête, son reflet à 140° et son ombre
   `--pose`** — le jeton commun, réglable depuis `/verre`. Une ombre extérieure
   n'est jamais peinte sous l'élément : elle n'assombrit pas le verre.
   ⚠️ **Le passage se fait en fondu** : le blanc et le flou du panneau s'effacent
   en 450 ms au-dessus du verre liquide, déjà dessiné. *La première image est
   donc exactement le verre dépoli — rien à imiter dans le shader.*
   ⚠️ **La vidéo reste affichée sous le canevas** : un navigateur peut suspendre
   une vidéo muette qu'il croit invisible.
   ⚠️ **Le filet de `.carte` part** : ses coins de 8 px traçaient une ligne
   droite sur la courbure de 40 px du verre. `body .panneau .carte` pèse
   (0,3,2) — il faut passer la règle commune des zones, (0,2,2). */
/* ⚠️ **LES TROIS RÈGLES DE `.verre-toile` SONT PARTIES DANS `simsimup.css`
   LE 2026-09-21** — la pose du canevas, sa révélation, et son retrait à
   l'impression. Motif : les pages à rail chargent le script à leur tour, et la
   mécanique du canevas n'appartient plus à cet écran. **Ce qui suit reste
   ici** : ce que le verre liquide fait AU PANNEAU de cette page, et rien d'autre. */
html.verre-liquide body div.panneau {
  background-color: transparent;
  /* ⚠️⚠️ **PLUS AUCUN BLANC POSÉ EN CSS SUR CE PANNEAU — ARBITRAGE DE FRANCK,
     2026-09-18 AU SOIR** : *« supprime les règles de lisibilité »*, après
     *« ② un voile uniforme posé par-dessus en CSS → supprime ça »*.

     **HISTORIQUE, PARCE QU'IL EXPLIQUE CE QUI DISPARAÎT.** `body div.panneau`
     peint DEUX choses : une couleur de fond, éteinte par la ligne au-dessus, et
     une `background-image` — un dégradé `140deg`, blanc à 30 % sur le premier
     tiers. Cette règle n'éteignait que la première : le dégradé restait, et
     c'est le voile que Franck a vu. Il a d'abord été remplacé par un voile
     UNIFORME de 25 %, le même soir, pour tenir le contraste.

     ⚠️⚠️ **CE QUE LA SUPPRESSION COÛTE, MESURÉ ET NON DÉDUIT** : *3,73:1* avec
     le dégradé d'origine, ***5,83:1*** avec le voile uniforme, ***3,42:1*
     ainsi** — et le seuil de lisibilité AA est à **4,5:1**. **La page de
     connexion ne le tient donc plus**, et c'est un arbitrage assumé, pas un
     oubli. *Le blanc qui reste est celui du VERRE lui-même — « Voile au
     centre », 19 % —, et il se règle au curseur, sans toucher au code.*

     ⚠️ **CE QUI N'EST PAS RETIRÉ, ET POURQUOI** : les deux replis plus haut —
     `@supports not (backdrop-filter)` et `@media (prefers-contrast: more)`. Ils
     ne posent rien sur cet écran-ci : le premier sert un navigateur qui ne sait
     pas flouter, le second **quelqu'un qui a demandé plus de contraste à son
     système**. *Les retirer n'éclaircirait rien ici et rendrait la page
     illisible là-bas.*

     **POUR REVENIR EN ARRIÈRE** : remettre
     `linear-gradient(0deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .25))`
     — le jeton `--voile-entree` qui portait ce 25 % est retiré (2026-10-12) : plus
     aucune règle ne le lisait. */
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .45s ease-out, -webkit-backdrop-filter .45s ease-out,
              backdrop-filter .45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html.verre-liquide body div.panneau { transition: none; }
}
html.verre-liquide body .panneau .carte { box-shadow: none; }

/* ⚠️ **LE PANNEAU SE DÉPLACE À LA SOURIS — 2026-09-18, DEMANDE DE FRANCK.**
   `connexion.js`… pardon, `verre-liquide.js` pose le `transform` ; ici, on dit
   seulement que le geste ne doit ni sélectionner du texte, ni faire défiler la
   page au doigt, et que le curseur l'annonce. *Les champs, boutons et libellés
   gardent leur curseur : le geste ne part pas d'eux.* */
html.verre-liquide .panneau { cursor: grab; touch-action: none; }
html.verre-liquide .panneau.deplace { cursor: grabbing; user-select: none; }
html.verre-liquide .panneau :is(input, button, a, label) { cursor: auto; }
html.verre-liquide .panneau button { cursor: pointer; }