/* Page de connexion/inscription (login.php) — design fourni par l'utilisateur (dossier
de référence "login", hors du repo). Rendu volontairement FIXE (pas de bascule
clair/sombre comme le reste de l'app) : glassmorphism sur photo de fond, tel que dans
la référence. Les tokens déjà globaux ET non liés au thème (variables.css) sont
réutilisés tels quels (valeurs identiques garanties) ; --text/--border de l'app
changent avec le thème, donc fixés ici en local pour ne jamais dévier du rendu de
référence. */
/* Même déclaration que style.css (non chargé sur cette page) : sans ça, --font-script
(variables.css) retombe sur "Segoe Script" système (souvent absente) puis Comic Sans
au lieu de la vraie police custom du logo "Îdiää". */
@font-face {
font-family: "Segoe Script Idiaa";
src: url("../font/segoe-script.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--login-text: #1d1d1f;
/* Valeur alignée sur --border du mode Îdiää (variables.css), pas la #e8e8e8 d'origine
(inutilisée jusqu'ici) — cohérence demandée entre le .wrapper et le reste de l'app
(voir .idiaa-page-wrap, style.css). */
--login-border: rgba(29, 29, 31, 0.7);
--login-shadow-btn: rgba(29, 29, 31, 0.4);
--login-text-tint: rgba(29, 29, 31, 0.1);
--login-panel-bg: rgba(255, 255, 255, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-system);
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* Toujours ce fichier précis, jamais un tirage aléatoire (contrairement au reste de
l'app en mode Îdiää, voir includes/header.php) — cohérent avec le rendu "fixe" de
cette page (voir commentaire en tête de fichier). assets/img/background/ contient
aussi login-background.jpg (utilisé ici) en plus des autres photos piochées
ailleurs — même dossier, deux usages différents. */
background: url("../img/background/login-background.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
position: relative;
width: 400px;
/* 500px (480px avant) : +20px pour la marge ajoutée sous les boutons Google/Apple
(.sign-up, demandé explicitement) — sans ce report, .overflow:hidden aurait rogné
le bas du formulaire "Se connecter" au lieu de simplement réduire sa marge
restante. */
height: 500px;
background: var(--login-panel-bg);
border: 1px solid var(--login-border);
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 0 30px var(--shadow-md);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: height 0.2s ease;
}
.wrapper.active {
height: 520px;
}
/* Popup "Se connecter" (pas .wrapper.active, qui reste au format inscription, 520px,
inchangé) agrandie de 20px vers le bas en mobile, demandé explicitement — même seuil
desktop/mobile que le reste de l'app (900px, voir CLAUDE.md / Détection tactile vs
pointeur), première media query de ce fichier jusqu'ici entièrement fixe (voir
commentaire en tête de fichier — le reste de la page reste volontairement identique
quel que soit le viewport, seule cette hauteur change). */
@media (max-width: 899px) {
.wrapper:not(.active) {
/* 520px (500px avant) — même report +20px que la base desktop ci-dessus (marge
sous .sign-up), écart mobile/desktop de 20px conservé tel quel. */
height: 520px;
}
/* Popup "Créer un compte" agrandie de 20px vers le bas ET 20px vers le haut en
mobile (40px au total), demandé explicitement — .wrapper reste centré
verticalement sur la page (voir body { align-items: center }), donc une hauteur
plus grande grandit déjà symétriquement vers le haut et le bas depuis son centre ;
pas de décalage de position supplémentaire nécessaire pour obtenir ce résultat. */
.wrapper.active {
height: 560px;
}
}
.input-box svg {
position: absolute;
right: 8px;
fill: var(--login-text);
stroke: none;
height: 20px;
width: 20px;
}
.wrapper .form-box {
width: 100%;
padding: 40px;
}
.wrapper .form-box.login {
transition: transform 0.18s ease;
transform: translateX(0);
}
.wrapper.active .form-box.login {
transform: translateX(-400px);
}
.wrapper .form-box.register {
position: absolute;
transition: transform 0.18s ease;
transform: translateX(400px);
}
.wrapper.active .form-box.register {
transform: translateX(0);
}
.form-box h2 {
font-size: 20px;
color: var(--login-text);
text-align: center;
}
.form-box h3 {
font-size: 60px;
color: var(--login-text);
text-align: center;
font-family: var(--font-script);
}
.input-box {
position: relative;
width: 100%;
border-bottom: 2px solid var(--login-text);
margin: 30px 0;
padding: 5px 0;
}
.input-box label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 1em;
color: var(--login-text);
font-weight: 500;
pointer-events: none;
/* Transitions séparées, demandé explicitement : la montée du libellé garde sa vitesse
d'origine (0.5s) au focus, seule sa disparition (opacity, une fois le champ rempli —
voir :valid ci-dessous) doit être un fondu rapide (0.2s). */
transition: top 0.5s, opacity 0.2s;
opacity: 1;
}
.input-box input:focus ~ label,
.input-box input:not(:placeholder-shown) ~ label,
.input-box input:-webkit-autofill ~ label,
.input-box input:autofill ~ label {
top: -5px;
}
/* Une fois le champ rempli — plus seulement focus — le libellé disparaît en fondu au
lieu de rester affiché en haut du champ, demandé explicitement. Reste visible tant que
le champ est vide, focus compris (l'utilisateur voit toujours le libellé monter avant
de taper quoi que ce soit).
:not(:placeholder-shown) plutôt que :valid (essai précédent) — bug signalé : le champ
email (type="email") n'est valide QUE si la chaîne SAISIE JUSQU'ICI ressemble déjà à
un email complet, donc :valid clignotait vrai/faux à chaque caractère tapé ("contact@"
invalide, "contact@i" valide, "contact@idiaa" invalide, ...) — le libellé
apparaissait/disparaissait en boucle pendant la frappe au lieu de disparaître
définitivement dès la première lettre. :placeholder-shown ne dépend que du VIDE/NON
VIDE du champ (voir aussi .idiaa-field, même choix déjà fait ailleurs dans l'app pour
la même raison) — nécessite un attribut placeholder non vide sur l'
(placeholder=" ", un simple espace, voir login.php : le libellé sert déjà de
placeholder visuel, cet attribut ne sert qu'à activer :placeholder-shown). */
.input-box input:not(:placeholder-shown) ~ label {
opacity: 0;
}
/* Pré-remplissage par le navigateur (identifiants enregistrés) : signalé par
l'utilisateur, le libellé restait visible par-dessus le texte pré-rempli au
chargement de la page. :placeholder-shown seul ne suffit pas dans ce cas — Chrome
applique son état "autofilled" (fond jaunâtre, :-webkit-autofill) sans forcément
redéclencher :placeholder-shown de façon synchrone au chargement de la page (avant
toute interaction). :-webkit-autofill (Chrome/Safari/Edge) + :autofill (standard,
Firefox et Chromium récents) couvrent les deux moteurs — mêmes règles top/opacity
que :not(:placeholder-shown) ci-dessus (voir aussi la même paire de sélecteurs
ajoutée à la règle top:-5px un peu plus haut), juste une condition de déclenchement
supplémentaire. */
.input-box input:-webkit-autofill ~ label,
.input-box input:autofill ~ label {
opacity: 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 15px;
color: var(--login-text);
font-weight: 600;
padding: 0 35px 0 5px;
}
.remember-forgot {
font-size: 13px;
color: var(--login-text);
font-weight: 500;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
}
.remember-forgot label input {
accent-color: var(--login-text);
margin-right: 3px;
}
.remember-forgot a {
color: var(--login-text);
text-decoration: none;
}
.remember-forgot a:hover {
text-decoration: underline;
}
/* Liens CGU/politique de confidentialité (case à cocher "Créer un compte") : soulignés
en permanence, pas seulement au survol comme .remember-forgot a ci-dessus — signalé
par l'utilisateur, on ne voyait pas que c'étaient des liens. .terms-label plus
spécifique que .remember-forgot a (même poids de sélecteur, déclarée après :
l'emporte), inutile de toucher aux autres liens de ce bloc ("Mot de passe oublié ?"). */
.terms-label a {
text-decoration: underline;
}
.sign-up {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
/* Demandé explicitement — .wrapper (mode "Se connecter") agrandi d'autant ci-dessus
pour compenser (même overflow:hidden que le reste du panneau, voir son
commentaire) : sans ça, ces 20px auraient juste réduit la marge restante avant que
le contenu ne commence à être rogné. */
margin-bottom: 20px;
}
.btn {
position: relative;
width: 100%;
height: 45px;
background: transparent;
border: 1px solid var(--login-text);
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
color: var(--login-text);
font-weight: 500;
box-shadow: 6px 6px 12px var(--login-shadow-btn);
transition: transform 0.2s ease;
}
.btn:hover {
background: var(--login-text-tint);
transform: scale(1.02);
}
/* État "en cours de connexion" (login.php/auth-page.js) — le texte du bouton (déjà
posé en HTML, pas remplacé/dupliqué) devient transparent le temps de la requête,
remplacé par un petit spinner centré (::after, classique "border-spin" — plus léger
qu'un