/* ==========================================================
FITZUNIVERSE — CONNEXION / COMPTE (login.html, formulaire de compte
de payment.html — signup.html a été retiré, voir ce commit)
Repose sur les variables et le reset définis dans css/base.css
(même palette, même typographie, même système que index.html,
eligibility-test.html, results.html, offers.html et payment.html)
========================================================== */

/* min-height/overflow seulement ici : le centrage (display:flex,
align/justify-content) vit maintenant sur .auth-page ci-dessous, pas
sur body — voir la refonte "carte flottante sur photo plein écran"
plus bas. payment.html charge aussi ce fichier mais redéclare son
propre body{} dans payment.css, chargé après auth.css : la cascade lui
donne toujours le dernier mot, ce fichier ne le concerne pas. */
body{

min-height:100vh;

overflow-x:hidden;

}

/* ==========================================================
PAGE — carte flottante sur photo plein écran (amphitheatre.jpg),
référence pages de connexion institutionnelles (SSO universitaire).
Remplace l'ancienne mise en page à 2 blocs empilés (.auth-shell avec
.auth-hero au-dessus de .auth-card, fond --gradient-hero uni) : logo +
titre vivent maintenant dans la carte elle-même (voir CARTE plus bas).
========================================================== */

.auth-page{

position:relative;

min-height:100vh;

width:100%;

display:flex;

align-items:center;

justify-content:center;

/* 40px -> 24px (2026-08-13) : avec la carte pleine hauteur, 40px de
chaque côté poussait le total au-delà de 100vh sur des écrans courants
et forçait un scroll — voir aussi les réductions internes de .auth-card
plus bas, qui font l'essentiel du travail. */
padding:24px 20px;

overflow:hidden;

}

/* position:fixed comme .hero-media (css/hero.css) : la photo reste
pleinement cadrée même si le contenu de la carte pousse la page à
scroller (message d'erreur, clavier mobile qui réduit le viewport...). */
.auth-page-bg{

position:fixed;

inset:0;

z-index:0;

width:100%;

height:100%;

object-fit:cover;

}

/* Voile dégradé bleu marine (--primary-dark), pas un aplat uniforme —
même logique que .hero-overlay (css/hero.css) : l'amphithéâtre doit
rester identifiable en arrière-plan, pas juste deviné sous un bloc de
couleur plat. La carte est maintenant elle-même en dégradé bleu (voir
CARTE plus bas, 2026-08-13) : ce voile sert la cohérence de marque et
la lisibilité du bord de carte sur une photo par endroits très claire —
pas le contraste du texte, qui ne touche jamais directement la photo,
seulement le fond de la carte (recalculé séparément, voir plus bas). */
.auth-page-overlay{

position:fixed;

inset:0;

z-index:1;

background:
linear-gradient(180deg, rgba(23,19,16,.5) 0%, rgba(23,19,16,.72) 100%),
radial-gradient(ellipse 70% 60% at 50% 38%, rgba(23,19,16,.22) 0%, rgba(23,19,16,.58) 100%);

}

/* ==========================================================
RÉVÉLATION AU CHARGEMENT
========================================================== */

.reveal{

opacity:1;

transform:none;

}

html.js-ready .reveal{

opacity:0;

transform:translateY(24px);

transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);

}

html.js-ready .reveal.is-visible{

opacity:1;

transform:translateY(0);

}

html.js-ready .auth-card.reveal{

transition-delay:.1s;

}

@media (prefers-reduced-motion: reduce){

.reveal{

opacity:1 !important;

transform:none !important;

transition:none !important;

}

}

/* ==========================================================
CARTE — dégradé bleu de marque (--gradient-primary), pas blanc opaque
(révision 2026-08-13, remplace le blanc opaque de la 1re version de
cette refonte) : bordure ambre en accent, texte reconstruit en clair.
Contraste recalculé précisément (pas à l'estimation) contre le point
le plus clair du dégradé — c'est le pire cas pour du texte clair,
--gradient-primary va de #4A5BC4 (clair) à #12162E (très sombre) :
- blanc plein (h1, labels) : 5,86:1 minimum -> AA large
- blanc à 85% (sous-texte, texte secondaire) : 4,74:1 -> AA (le palier
  en dessous, .82, tombait à 4,53 — trop juste, .85 pour une vraie
  marge, même logique que le correctif footer d'index.html)
Les champs de saisie eux-mêmes restent sur fond blanc plein (voir
CHAMPS DE SAISIE plus bas, inchangé) : le texte tapé et les
placeholders ne touchent jamais ce fond bleu, donc pas concernés par
ce recalcul — c'est le point que le brief demandait de vérifier en
particulier, et il ne s'applique pas ici pour cette raison précise.
L'ambre (--amber-500) reste en surface uniquement (bordure, bouton
plus bas) — jamais en texte : recalculé aussi, un texte ambre sur le
point le plus clair du dégradé ne tient que 2,71:1, largement sous AA.
========================================================== */

.auth-card{

position:relative;

z-index:2;

width:100%;

max-width:440px;

/* Fond refait le 2026-08-22. C'était --gradient-primary, l'aplat bleu
vif que le reste du site a abandonné (hero, en-tête d'offers, pages
d'éligibilité, fiche université). Posée sur une photo d'amphithéâtre
déjà bleutée, cette carte devenait un rectangle bleu sur fond bleu :
elle ne se détachait pas, et c'était le dernier grand bloc de cette
teinte du site.
Même grammaire que l'en-tête d'offers.html et la carte « Être
accompagné par Fitz » : marine profond + éclat ambré en haut à
droite. La carte se détache enfin de la photo, et l'ambre annonce le
bouton qui l'attend plus bas. */
background:
radial-gradient(ellipse 74% 62% at 84% 6%, rgba(233,163,25,.26) 0%, rgba(233,163,25,.07) 48%, transparent 72%),
linear-gradient(158deg, #342D24 0%, #211D18 48%, #14100D 100%);

border:1px solid rgba(233,163,25,.28);

border-radius:var(--radius-lg);

padding:34px 32px;

/* Ombre portée plus profonde que --shadow-lg : la carte flotte
au-dessus d'une photo, pas au-dessus d'un fond de page. */
box-shadow:0 2px 4px rgba(20,16,13,.28), 0 30px 60px -18px rgba(20,16,13,.62);

}

/* « Ce n'est pas vous ? » — n'apparaît que si un prénom est reconnu
(voir login.js). Discret par construction : c'est une porte de
sortie, pas une action qu'on veut encourager. Mais il doit rester
trouvable sans effort sur un poste partagé, d'où le soulignement au
survol plutôt qu'un simple changement de teinte. */
.auth-not-you{

display:block;

margin:-10px auto 18px;

padding:4px 8px;

border:none;

background:none;

font-family:inherit;

font-size:.8rem;

color:rgba(255,255,255,.62);

cursor:pointer;

transition:color var(--transition);

}

.auth-not-you:hover{

color:var(--amber-500);

text-decoration:underline;

}

.auth-not-you:focus-visible{

outline:2px solid var(--amber-500);

outline-offset:2px;

border-radius:6px;

}

/* SANS CETTE RÈGLE, LE BOUTON RESTE VISIBLE POUR TOUT LE MONDE.
`[hidden]{display:none}` est une feuille de style du NAVIGATEUR : le
`display:block` déclaré ci-dessus, qui est un style d'auteur, la bat
systématiquement. Le bouton « Ce n'est pas vous ? » se serait donc
affiché aussi au visiteur inconnu — à qui il ne veut strictement rien
dire, et qui se serait demandé de qui on parle.
Quatrième fois que ce piège se manifeste dans ce dépôt (voir aussi
.results-loading, .context-banner, .footnote-line) : toute règle qui
pose un `display` sur un élément susceptible de porter `hidden` doit
être accompagnée de son pendant `[hidden]`. */
.auth-not-you[hidden]{ display:none; }

/* text-align:center scopé au logo/titre/sous-texte ci-dessous, pas à
.auth-card entière : les champs du formulaire plus bas (labels, inputs)
restent alignés à gauche, comme tout formulaire normal. */
.auth-logo-wrap{

position:relative;

width:56px;

height:56px;

margin:0 auto 14px;

}

/* Le drop-shadow sur l'image suffit à donner de la profondeur au
logo — pas besoin d'un halo radial + anneau qui pulse en plus. */

.logo-icon{

width:100%;

height:100%;

object-fit:contain;

border-radius:var(--radius-md);

filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));

}

.auth-card h1{

text-align:center;

font-size:clamp(1.3rem,3vw,1.6rem);

line-height:1.25;

font-weight:800;

color:#fff;

margin-bottom:8px;

}

/* Titres posés directement sur la carte encre (suspended.html
« Besoin d'aide ? ») : la couleur de base des h2 est l'encre du site,
invisible ici — pré-existant depuis l'époque navy, corrigé 2026-09-02. */
.auth-card h2{

color:#fff;

}

.auth-card-subtext{

text-align:center;

max-width:340px;

margin:0 auto 18px;

color:rgba(255,255,255,.85);

font-size:.88rem;

line-height:1.55;

}

/* ==========================================================
CHAMPS DE SAISIE
========================================================== */

/* 20px -> 14px (2026-08-13, densité verticale pour tenir en 100vh) */
.input-group{

margin-bottom:14px;

}

.input-group label{

display:block;

margin-bottom:6px;

font-weight:600;

font-size:.86rem;

color:var(--text-color);

}

/* Label en clair sur la carte bleue — override scopé à .auth-card
plutôt que de changer .input-group label directement : cette classe
est partagée avec payment.html (fond de carte différent, non touché
par cette refonte), donc pas question de changer sa couleur de base. */
.auth-card .input-group label{

color:#fff;

}

.input-wrap{

position:relative;

display:flex;

align-items:center;

}

.input-icon{

position:absolute;

left:16px;

width:18px;

height:18px;

color:var(--text-decorative);

pointer-events:none;

transition:color .25s var(--ease-premium);

}

.input-wrap input{

width:100%;

padding:14px 16px 14px 46px;

border:1.5px solid var(--border-color);

border-radius:var(--radius-md);

font-family:"Inter",sans-serif;

font-size:.96rem;

color:var(--text-color);

background:var(--background);

transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);

}

.input-wrap.has-toggle input{

padding-right:46px;

}

.input-wrap input::placeholder{

color:var(--text-muted);

}

/* AUTOFILL Chrome/Edge : même correctif que admin/login.css (le
remplissage automatique repeignait les champs en blanc sur la scène
encre) — ombre interne opaque à la couleur du champ. */
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus{

-webkit-box-shadow:0 0 0 1000px #241F19 inset;

box-shadow:0 0 0 1000px #241F19 inset;

-webkit-text-fill-color:#F5F0E7;

caret-color:#F5F0E7;

transition:background-color 999999s ease-out;

}

.input-wrap input{ caret-color:var(--amber-500); }

.input-wrap:focus-within .input-icon{

color:var(--primary-color);

}

.input-wrap input:focus{

outline:none;

border-color:var(--primary-color);

box-shadow:0 0 0 4px rgba(233,163,25,.14);

}

.password-toggle{

position:absolute;

right:12px;

display:flex;

align-items:center;

justify-content:center;

width:30px;

height:30px;

border:none;

border-radius:var(--radius-xs);

background:none;

color:var(--text-muted);

cursor:pointer;

transition:color .2s ease, background-color .2s ease;

}

.password-toggle i,
.password-toggle svg{

width:18px;

height:18px;

}

.password-toggle:hover{

color:var(--primary-color);

background:var(--background-light);

}

.password-toggle:focus-visible{

outline:none;

box-shadow:0 0 0 3px rgba(233,163,25,.24);

}

.input-hint{

display:flex;

align-items:center;

gap:6px;

margin:-10px 0 20px;

color:var(--text-muted);

font-size:.78rem;

line-height:1.5;

}

.input-hint i,
.input-hint svg{

flex-shrink:0;

width:13px;

height:13px;

color:var(--primary-color);

}

/* ==========================================================
GRILLE MOT DE PASSE / CONFIRMATION (signup)
========================================================== */

.password-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:0 16px;

}

/* ==========================================================
INDICATEUR DE FORCE DU MOT DE PASSE
========================================================== */

.password-strength{

margin:-8px 0 22px;

}

.password-strength-bar{

height:5px;

border-radius:var(--radius-full);

background:var(--background-alt);

overflow:hidden;

margin-bottom:6px;

}

.password-strength-bar span{

display:block;

height:100%;

width:4%;

border-radius:inherit;

background:var(--border-color);

transition:width .35s var(--ease-premium), background-color .35s var(--ease-premium);

}

.password-strength-label{

font-size:.78rem;

color:var(--text-muted);

font-weight:600;

}

/* ==========================================================
OPTIONS DE CONNEXION (login)
========================================================== */

/* margin-bottom 26px -> 18px (2026-08-13, densité verticale) */
.auth-options{

display:flex;

align-items:center;

justify-content:space-between;

flex-wrap:wrap;

gap:10px;

margin:-4px 0 18px;

font-size:.86rem;

}

.remember-me{

display:flex;

align-items:center;

gap:8px;

color:var(--text-light);

font-weight:500;

cursor:pointer;

}

.remember-me input{

width:16px;

height:16px;

accent-color:var(--primary-color);

cursor:pointer;

}

.forgot-link{

color:var(--primary-color);

font-weight:600;

}

.forgot-link:hover{

text-decoration:underline;

}

/* Overrides scopés à .auth-card (fond bleu) — .remember-me/.forgot-link
sont partagés avec payment.html, base non touchée, même logique que
.input-group label ci-dessus. .forgot-link reste blanc (pas ambre) :
un texte ambre sur ce dégradé bleu tombe à 2,71:1 au pire endroit,
largement sous AA — l'ambre reste réservé aux surfaces (bordure de
carte, bouton), jamais au texte, voir le commentaire au-dessus de
.auth-card. */
.auth-card .remember-me{

color:rgba(255,255,255,.85);

}

.auth-card .forgot-link{

color:#fff;

}

/* ==========================================================
CASE CONDITIONS D'UTILISATION (signup)
========================================================== */

.terms-row{

display:flex;

align-items:flex-start;

gap:10px;

margin-bottom:26px;

font-size:.85rem;

color:var(--text-light);

line-height:1.55;

}

.terms-row input{

flex-shrink:0;

width:16px;

height:16px;

margin-top:2px;

accent-color:var(--primary-color);

cursor:pointer;

}

.terms-row a{

color:var(--primary-color);

font-weight:600;

}

.terms-row a:hover{

text-decoration:underline;

}

/* ==========================================================
MESSAGE D'ERREUR (créé par auth-ui.js)
========================================================== */

/* Fond quasi-blanc plein (pas une teinte rouge à 8% d'opacité) : ce
bloc doit rester lisible quel que soit ce qu'il y a derrière lui — sur
la carte bleue de login.html en particulier, un rouge sombre à 8%
d'opacité sur fond bleu marine ne tenait plus du tout le contraste
(texte #9f1c1c dessus déjà sombre pour commencer). Surface propre,
détachée du fond de la carte, plutôt qu'un recalcul fragile à chaque
nouvelle couleur de carte. */
.form-error{

display:none;

align-items:center;

gap:10px;

background:rgba(255,255,255,.96);

border:1px solid rgba(239,68,68,.35);

border-left:3px solid var(--danger);

color:#9f1c1c;

padding:13px 16px;

border-radius:var(--radius-md);

font-size:.85rem;

font-weight:600;

line-height:1.5;

margin-bottom:14px;

}

.form-error::before{

content:"⚠";

flex-shrink:0;

font-size:1rem;

}

/* ==========================================================
BOUTON PRINCIPAL
========================================================== */

.btn-auth-submit{

position:relative;

overflow:hidden;

width:100%;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 24px;

border:none;

border-radius:var(--radius-md);

/* Ambre + encre par défaut (2026-09-02) : le dégradé indigo de base.css
ne doit plus jamais apparaître — c'était le bouton bleu de
suspended.html signalé par l'utilisateur. */
background:linear-gradient(135deg,var(--amber-500),var(--amber-600));

color:var(--ink-surface);

font-family:"Inter",sans-serif;

font-size:1rem;

font-weight:700;

cursor:pointer;

transition:transform .15s var(--ease-standard), box-shadow .15s var(--ease-standard), background-color .15s var(--ease-standard);

}

.btn-auth-submit::before{

content:"";

flex-shrink:0;

width:19px;

height:19px;

background-size:contain;

background-repeat:no-repeat;

background-position:center;

}

/* Trait #12162E (--primary-900), pas blanc : le bouton "Se connecter"
est passé en fond ambre (voir .login-form .btn-auth-submit plus bas),
l'icône doit suivre la même couleur de texte que le libellé. */
.login-form .btn-auth-submit::before{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312162E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");

}

/* Seul bouton ambre de cette page (voir la même règle sur index.html,
css/homepage-sections.css) : "Se connecter" est l'action de la page,
il doit ressortir sur la carte bleue — un bouton bleu s'y serait fondu.
Texte en --primary-900 (pas blanc) sur ambre : 8,24:1, largement AA. */
.login-form .btn-auth-submit{

background:var(--amber-500);

color:var(--primary-900);

}

.login-form .btn-auth-submit:hover{

background:var(--amber-600);

}

.signup-form .btn-auth-submit::before{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23211D18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");

}

.btn-auth-submit:hover{

transform:translateY(-1px);

box-shadow:var(--shadow-md);

background:var(--amber-600);

}

.btn-auth-submit:active{

transform:translateY(0) scale(.98);

}

.btn-auth-submit:focus-visible{

outline:none;

box-shadow:0 0 0 4px rgba(233,163,25,.26);

}

.btn-auth-submit:disabled{

opacity:.6;

cursor:not-allowed;

transform:none;

box-shadow:none;

}

.btn-loading::after{

content:"";

width:16px;

height:16px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid #fff;

border-radius:50%;

animation:authBtnSpin .7s linear infinite;

}

@keyframes authBtnSpin{

100%{ transform:rotate(360deg); }

}

@media (prefers-reduced-motion: reduce){

.btn-loading::after{

animation-duration:1.4s;

}

}

/* ==========================================================
CONFIANCE / LIENS
========================================================== */

/* margin-top réduits (20/18/8 -> 14/14/6, densité verticale 2026-08-13) */
.auth-trust{

display:flex;

align-items:center;

justify-content:center;

gap:7px;

margin-top:14px;

color:var(--text-muted);

font-size:.8rem;

}

.auth-trust i,
.auth-trust svg{

width:14px;

height:14px;

color:var(--primary-color);

}

.login-link{

margin-top:14px;

text-align:center;

font-size:.9rem;

color:var(--text-light);

}

.login-link a{

color:var(--primary-color);

font-weight:700;

}

.login-link a:hover{

text-decoration:underline;

}

.forgot-note{

margin-top:6px;

text-align:center;

font-size:.8rem;

color:var(--text-muted);

font-style:italic;

}

/* Overrides scopés à .auth-card (fond bleu), même logique que plus
haut : .auth-trust/.login-link/.forgot-note sont partagés (ou
potentiellement réutilisés) ailleurs, base non touchée. Icône
.auth-trust en blanc, pas bleu (--primary-color s'y fondrait). Lien
"Choisir ma formule" en blanc, pas ambre — même raison que
.forgot-link plus haut (ambre-texte hors seuil AA sur ce dégradé). */
.auth-card .auth-trust,
.auth-card .login-link,
.auth-card .forgot-note{

color:rgba(255,255,255,.85);

}

.auth-card .auth-trust i,
.auth-card .auth-trust svg{

color:rgba(255,255,255,.85);

}

.auth-card .login-link a{

color:#fff;

}

/* ==========================================================
RESPONSIVE — MOBILE (< 768px)
Carte pleine largeur confortable (pas de marges écrasées) : .auth-page
garde un padding généreux plutôt que de laisser .auth-card toucher les
bords, le fond photo reste visible tout autour. (Le palier "tablette
768–1023px" qui vivait ici avant ne stylait que .auth-page::before/
::after — deux pseudo-éléments jamais déclarés ailleurs dans ce
fichier, donc du CSS mort depuis le début ; retiré au passage.)
========================================================== */

@media(max-width:767px){

.auth-page{

padding:16px;

}

.auth-card{

padding:24px 22px;

}

.auth-logo-wrap{

width:48px;

height:48px;

margin-bottom:10px;

}

.auth-card h1{

font-size:1.25rem;

}

.password-grid{

grid-template-columns:1fr;

gap:0;

}

.auth-options{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

}

@media(max-width:380px){

.auth-card{

padding:20px 16px;

}

}