/* Page de connexion de Fortuna (demandes d'Ayoub du 02/11 ~21:20) : la page parle de FORTUNA seulement (ni groupe, ni sociétés). Composition inspirée de la page
   d'accueil d'Axonaut (sans rien en reprendre : ni logo, ni image, ni texte) : grand panneau bleu nuit M&R à gauche au bord droit en BIAIS et coins arrondis, grand
   titre en capitales, accroche, carte de connexion à cheval sur le biais, photo à droite découpée par le panneau, boutons en pilule, encart « Normes appliquées »
   (mentions VRAIES seulement, preuves dans JOURNAL.md). Polices EMBARQUÉES (Inter), aucune ressource externe, aucun style en ligne (CSP style-src 'self').
   La logique (champs, CSRF, messages, limites) est celle de connexion.js, inchangée. */
:root{
  --fond:#F8F7FC;--fond2:#F2F0FA;--carte:rgba(255,255,255,.80);--ligne:rgba(40,30,90,.10);--champ:#FFFFFF;--champ-ligne:rgba(40,30,90,.17);--champ-survol:rgba(40,30,90,.30);
  --texte:#1B1F33;--texte2:#3B4060;--sourd:#6B7088;--violet:#A855F7;--violet-fonce:#7E22CE;--rose:#EC4899;--bleu:#3B82F6;--ok:#059669;--err:#B91C1C;--err-bg:rgba(239,68,68,.08);
  --grad:linear-gradient(90deg,#EC4899,#A855F7,#3B82F6);--grad-bouton:linear-gradient(90deg,#DB2777,#9333EA,#2563EB);
  --ombre:0 1px 2px rgba(27,31,51,.05),0 24px 56px -16px rgba(60,35,130,.28),0 0 0 1px rgba(40,30,90,.06);
  --anneau:0 0 0 4px rgba(168,85,247,.20);
  --voile:linear-gradient(90deg,rgba(248,247,252,.96) 0%,rgba(248,247,252,.90) 30%,rgba(248,247,252,.45) 46%,rgba(248,247,252,0) 60%);
  --titre-police:"Inter",system-ui,sans-serif;--rayon-champ:999px;--rayon-zone:12px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--fond);color:var(--texte);font-family:Inter,system-ui,sans-serif;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;overflow-x:hidden}
.scene{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,520px) 420px;grid-template-areas:"texte carte" "conf carte";
  align-content:center;align-items:center;column-gap:64px;row-gap:28px;padding:48px 32px 48px max(48px,6vw)}
.visuel{position:absolute;top:0;right:0;bottom:0;width:56%;background:url("/static/connexion-photo.webp?v=428da59fe04e") no-repeat 70% center/cover;border-radius:0 0 0 56px}
.panneau{position:absolute;top:24px;bottom:24px;left:-60px;width:calc(62% + 60px);background:linear-gradient(165deg,#1E2A78 0%,#0F172A 62%);border-radius:0 48px 48px 0;
  transform:skewX(-7deg);transform-origin:100% 0;box-shadow:0 30px 60px -30px rgba(15,23,42,.6)}
.texte{grid-area:texte;position:relative;z-index:1;color:#fff}
.carte{grid-area:carte;position:relative;z-index:2}
.conformite{grid-area:conf;position:relative;z-index:1;justify-self:start;background:#fff;border-radius:18px;padding:14px 20px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cache{display:none!important}

/* marque Fortuna */
.marque{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.marque{flex-direction:column;align-items:flex-start;gap:4px}
.marque img{display:block;width:auto;height:46px}
.marque b{display:block;font-family:var(--titre-police);font-size:18px;font-weight:700;letter-spacing:.08em;color:#fff}
.marque small{display:block;color:#C9CFEA;font-size:13px;font-weight:500;margin-top:1px}
/* grand titre et accroche */
.slogan{max-width:12em;margin:0 0 24px;font-family:var(--titre-police);font-weight:700;font-size:clamp(34px,3.7vw,54px);line-height:1.06;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.accroche{margin:0;max-width:30em;font-size:17px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.86)}
.accroche b{color:#fff;font-weight:700}

/* carte */
.carte{background:rgba(255,255,255,.97);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:32px 32px 28px;box-shadow:var(--ombre)}
h1{font-family:var(--titre-police);font-weight:700;font-size:34px;line-height:1.08;letter-spacing:-.025em;margin:0 0 10px;color:var(--texte)}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sous{color:var(--texte2);margin:0 0 22px;font-size:15px;line-height:1.5}
label{display:block;font-size:13px;color:var(--texte);margin:16px 0 7px;font-weight:600}
input{width:100%;height:48px;padding:0 18px;border-radius:var(--rayon-champ,999px);border:1px solid var(--champ-ligne);background:var(--champ);color:var(--texte);font:inherit;font-size:16px;outline:none;box-shadow:0 1px 2px rgba(27,31,51,.04);transition:border-color .15s,box-shadow .15s}
input:hover{border-color:var(--champ-survol)}
input:focus{border-color:var(--violet);box-shadow:var(--anneau)}
input[type=checkbox]{height:auto;box-shadow:none;width:20px;height:20px;accent-color:var(--violet);margin:0}
input.code{height:60px;font-family:var(--titre-police);font-size:26px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
button{width:100%;min-height:50px;margin-top:22px;padding:13px 16px;border:0;border-radius:999px;background:var(--grad-bouton);color:#fff;font:600 15.5px Inter,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px -8px rgba(147,51,234,.5);transition:transform .15s,filter .15s,box-shadow .15s}
button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 14px 30px -8px rgba(147,51,234,.6)}
button:active{transform:translateY(0);filter:brightness(.97)}
button:focus-visible{outline:3px solid rgba(168,85,247,.55);outline-offset:3px}
button:disabled{opacity:.6;cursor:progress;transform:none;filter:none}
button .fleche{width:18px;height:18px;transition:transform .2s}
button:hover .fleche{transform:translateX(3px)}
.message{display:none;margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--fond2);color:var(--texte2);font-size:13.5px;border:1px solid var(--ligne)}
.message:not(.cache){display:block}
.message.erreur{background:var(--err-bg);color:var(--err);border-color:rgba(220,38,38,.22)}
.note{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--ligne);font-size:13px;color:var(--sourd);line-height:1.55}
.pas{display:flex;gap:6px;margin-bottom:20px}.pas i{flex:1;height:4px;border-radius:4px;background:rgba(40,30,90,.10)}.pas i.fait{background:var(--grad)}
.qr{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;margin:12px 0}
.qr .bloc{background:#fff;border-radius:14px;padding:8px;display:grid;place-items:center;box-shadow:0 0 0 1px var(--ligne)}
.qr .bloc img{width:134px;height:134px}
.qr-aide{font-size:13px;color:var(--texte2);margin-bottom:6px}
.secret{font-family:var(--titre-police);font-size:13px;word-break:break-all;background:var(--champ);border:1px solid var(--champ-ligne);border-radius:10px;padding:10px;color:var(--texte);font-variant-numeric:tabular-nums}
.codes{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;padding:0}
.codes li{font-family:var(--titre-police);font-size:15px;background:var(--champ);border:1px dashed var(--champ-ligne);border-radius:10px;padding:10px;text-align:center;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* case à cocher : texte d'un seul tenant */
label.case{display:block;position:relative;padding-left:30px;line-height:20px;margin-top:14px;font-weight:500;color:var(--texte2);cursor:pointer}
label.case input{position:absolute;left:0;top:0}

/* encart « Normes appliquées » (mentions vérifiées dans le code : JOURNAL.md) */
.conformite-titre{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-fonce)}
.gages{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gages li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.45;color:var(--texte)}
.gages svg{width:16px;height:16px;flex:none;color:var(--violet-fonce)}

/* entrée */
@keyframes monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.texte,.carte,.conformite{animation:monte .55s cubic-bezier(.2,.7,.2,1) both}
.carte{animation-delay:.08s}.conformite{animation-delay:.16s}

/* tablette étroite / téléphone : photo en haut, bloc bleu nuit au haut en biais, carte puis encart, rien ne se chevauche */
@media (max-width:980px){
  .scene{display:block;padding:0 0 calc(24px + env(safe-area-inset-bottom))}
  .panneau{display:none}
  .visuel{position:relative;width:auto;height:30vh;min-height:190px;max-height:300px;background-image:url("/static/connexion-photo-mobile.webp?v=428da59fe04e");background-position:center 30%;border-radius:0}
  .texte{background:linear-gradient(165deg,#1E2A78 0%,#0F172A 70%);clip-path:polygon(0 26px,100% 0,100% 100%,0 100%);border-radius:0 0 28px 28px;padding:44px 20px 28px}
  .marque{margin-bottom:22px}
  .slogan{font-size:30px}
  .accroche{font-size:15.5px}
  .carte{margin:20px 16px 0;border-radius:22px;padding:26px 20px 22px}
  .conformite{margin:16px 16px 0}
  h1{font-size:28px}
  .sous{font-size:14.5px;margin-bottom:18px}
}
@media (max-width:980px) and (max-height:700px){.visuel{height:26vh;min-height:160px}}
@media (max-width:360px){.qr{grid-template-columns:1fr;justify-items:center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.visuel,.panneau,.conformite,.marque{display:none}body{background:#fff}.carte{box-shadow:none;border:0;backdrop-filter:none}}

/* design ROSE (planche Horus n°419 validée le 04/11/2026 au soir, posée sur le socle C) : page toujours en thème clair (aucun utilisateur connu ici),
   bouton = LE dégradé validé (#D2368F → #A53FCB, texte blanc), fond D2 « M&R adouci », panneau de marque prune sombre uni, titres en Space Grotesk. */
@font-face{font-family:"Space Grotesk";src:url(/static/fonts/SpaceGrotesk-Bold.woff2?v=428da59fe04e) format("woff2");font-weight:700;font-display:swap}
:root{--grad-bouton:linear-gradient(100deg,#D2368F 0%,#D2368F 45%,#C13BB0 80%,#A53FCB 100%);--grad:linear-gradient(100deg,#D2368F 0%,#C13BB0 60%,#A53FCB 100%);--titre-police:"Space Grotesk","Inter",system-ui,sans-serif;--violet:#D2368F;--violet-fonce:#8E1A5F;--fond:#FAF7FB;--anneau:0 0 0 4px rgba(210,54,143,.20)}
html,body{background:#FAF7FB linear-gradient(180deg,#FCF8FB 0%,#F7F5FC 100%) fixed}
.panneau{background:#1E1020;box-shadow:0 30px 60px -30px rgba(30,16,32,.6)}
.marque small{color:#E6D3DE}
.carte button[type=submit]{background:var(--grad-bouton);box-shadow:none;border-radius:8px;font-weight:600;font-size:14px}
.carte button[type=submit]:hover{background:linear-gradient(100deg,#B92C7C 0%,#B92C7C 45%,#A6329A 80%,#8E36AF 100%);filter:none}
.carte h1 em,.carte h1 span{background:none;-webkit-text-fill-color:#8E1A5F;color:#8E1A5F}
label{font-size:13px;font-weight:600}
@media (max-width:980px){.texte{background:#1E1020}}
/* lot mot-de-passe (04/11) : lien « Mot de passe oublié ? » et retour, dans la note sous le formulaire */
.note a{color:var(--violet-fonce);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.note a:hover,.note a:focus-visible{border-bottom-color:var(--violet-fonce);outline:none}