/*
* ============================================================================
* PAGES D'AUTHENTIFICATION — connexion, inscription, mot de passe oublié
* Mise en page en deux colonnes : à gauche l'accroche + l'illustration,
* à droite la carte contenant le formulaire.
* Valeurs (largeurs, espacements, couleurs) reprises de la maquette Figma.
* ============================================================================
*/
/* Zone « héros » : porte l'illustration de fond, sur toute la largeur de la page.
*
* LA LARGEUR MAXIMALE A ÉTÉ RETIRÉE LE 25/08.
*
* Elle enfermait le bloc dans 1440px centrés. Sur la maquette, qui est dessinée
* à 1440, l'illustration touche le bord gauche : à cette largeur exacte les deux
* coïncidaient, et la mesure le confirmait à 0px près. Mais sur un écran plus
* large — 1920, le cas courant — l'illustration s'arrêtait à x=240 et laissait
* une bande blanche de 240px de chaque côté, tandis que l'en-tête et le pied de
* page, eux, allaient d'un bord à l'autre. D'où l'impression de marge signalée
* par le client, à gauche surtout, du côté de l'image.
*
* Le retrait latéral suit désormais celui de la barre de navigation (padding
* sans largeur maximale, components.css) : même comportement d'un bout à
* l'autre de la page. À 1440 le rendu ne bouge pas d'un pixel — vérifié par
* mesure avant/après sur les cinq écrans du parcours.
*/
.auth-hero {
position: relative;
/* L'illustration mesure exactement 1440x913, la taille du bloc à la largeur
de la maquette : à 1440 elle s'affiche donc au 1:1, sans recadrage.
Au-delà, `object-fit: cover` l'agrandit pour couvrir la largeur et rogne
le haut — le ciel disparaît et les personnages remontent DANS le texte
« Profitez ». Le bloc conserve donc le rapport de l'image : elle reste
entière, d'un bord à l'autre, et le texte garde son ciel derrière lui.
913 / 1440 = 0,634. */
min-height: max(913px, calc(100vw * 913 / 1440));
padding: 82px 141px 103px 164px;
overflow: hidden;
}
/* L'illustration est posée en fond, derrière le contenu (z-index négatif). */
.auth-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
pointer-events: none;
z-index: 0;
}
/* Rangée : colonne de gauche + carte de droite. */
.auth-hero__row {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 92px;
}
/* ---- Colonne de gauche (accroche) -------------------------------------- */
.auth-welcome { width: 590px; flex-shrink: 0; }
.auth-welcome__title {
font-size: 44px;
font-weight: var(--pl-fw-bold);
line-height: 52px;
color: var(--pl-text);
margin: 0 0 var(--pl-sp-12);
}
.auth-welcome__brand { white-space: nowrap; }
.auth-welcome__title .is-plaisirs { color: var(--pl-success); } /* vert */
.auth-welcome__title .is-loisirs { color: var(--pl-info); } /* bleu */
.auth-welcome__subtitle {
font-size: var(--pl-fs-s1); /* 18px */
font-weight: var(--pl-fw-medium);
line-height: var(--pl-lh-tight);
color: var(--pl-text-secondary);
margin: 0 0 27px;
}
.auth-features { display: flex; flex-direction: column; gap: var(--pl-sp-12); width: 304px; }
.auth-feature { display: flex; align-items: center; gap: var(--pl-sp-12); }
.auth-feature__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
background: var(--pl-surface-dashboard);
border-radius: var(--pl-radius-xs);
color: var(--pl-action);
}
.auth-feature__title {
font-size: var(--pl-fs-body);
font-weight: var(--pl-fw-bold);
color: var(--pl-text);
}
.auth-feature__desc {
font-size: var(--pl-fs-body-sm);
line-height: var(--pl-lh-sm);
color: var(--pl-text-secondary);
}
/* ---- Carte du formulaire ----------------------------------------------- */
.auth-card {
width: 453px;
flex-shrink: 0;
display: flex;
flex-direction: column;
/* Maquette : 23px entre l'en-tête et le formulaire (mesuré sur 591:65942). */
gap: 23px;
padding: var(--pl-sp-32) var(--pl-sp-24);
background: var(--pl-white);
border-radius: 24px;
box-shadow: 0 8px 12px rgba(15, 23, 42, .1);
}
/* Maquette : 10px entre le dernier champ et le bloc conditions + bouton. */
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-card__header { display: flex; flex-direction: column; gap: var(--pl-sp-4); }
.auth-card__title {
font-size: var(--pl-fs-h3); /* 26px */
font-weight: var(--pl-fw-bold);
color: var(--pl-text);
margin: 0;
}
.auth-card__subtitle {
font-size: var(--pl-fs-body-sm);
line-height: var(--pl-lh-sm);
color: var(--pl-text-secondary);
margin: 0;
}
/* Lien retour (écrans mot de passe oublié). */
/* Maquette : « Retour à la page de connexion » mesure 247px d'encre (218 chez
nous), en 16px et en TEXTE PRINCIPAL — nous l'avions en 13px gris. Il est
aussi retrait de 11px par rapport au bord de contenu de la carte. Relevé
identique sur les trois écrans « Mot de passe oublié ». */
.auth-back {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--pl-sp-4);
padding-left: 11px;
color: var(--pl-text);
font-size: 16px;
font-weight: var(--pl-fw-medium);
text-decoration: none;
}
.auth-back:hover { color: var(--pl-action); }
/* ---- Type de compte : Client / Professionnel ---------------------------- */
.auth-acctype {
display: flex;
gap: var(--pl-sp-8);
}
.auth-acctype__opt { flex: 1; cursor: pointer; }
.auth-acctype__opt input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.auth-acctype__pill {
display: flex;
align-items: center;
justify-content: center;
gap: var(--pl-sp-8);
padding: var(--pl-sp-12);
background: var(--pl-white);
border: 1.5px solid var(--pl-border);
border-radius: var(--pl-radius-md);
font-size: var(--pl-fs-body);
font-weight: var(--pl-fw-semibold);
color: var(--pl-text-secondary);
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.auth-acctype__opt:hover .auth-acctype__pill { border-color: var(--pl-action); }
.auth-acctype__opt input:checked + .auth-acctype__pill {
border-color: var(--pl-action);
background: var(--pl-action-light);
color: var(--pl-action);
}
.auth-acctype__opt input:focus-visible + .auth-acctype__pill {
box-shadow: 0 0 0 3px var(--pl-action-light);
}
.auth-input--select select { cursor: pointer; }
/* ---- Champs de formulaire ---------------------------------------------- */
/* Maquette : pas de 93px d'un libellé au suivant, soit 9px entre les champs. */
.auth-fields { display: flex; flex-direction: column; gap: 9px; }
.auth-field { display: flex; flex-direction: column; gap: var(--pl-sp-8); }
.auth-field__label {
font-size: var(--pl-fs-body);
font-weight: var(--pl-fw-medium);
color: var(--pl-text);
}
/* Habillage de l'input : bordure, icône à gauche, œil à droite. */
.auth-input {
display: flex;
align-items: center;
gap: var(--pl-sp-12);
padding: var(--pl-sp-12);
background: var(--pl-white);
border: 1.5px solid var(--pl-border);
border-radius: var(--pl-radius-md); /* 12px */
transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input:focus-within {
border-color: var(--pl-action);
box-shadow: 0 0 0 3px var(--pl-action-light);
}
.auth-input__icon { color: var(--pl-text-secondary); display: flex; }
/* Le vrai champ texte : sans bordure ni contour, il occupe l'espace restant. */
.auth-input__control {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-family: var(--pl-font-family);
font-size: var(--pl-fs-body);
color: var(--pl-text);
}
.auth-input__control::placeholder { color: #8390a2; }
/* Bouton « œil » pour afficher / masquer le mot de passe. */
.auth-input__eye {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--pl-text-secondary);
cursor: pointer;
}
.auth-input__eye:hover { color: var(--pl-text); }
/* ---- Ligne « se souvenir de moi » / « mot de passe oublié » ------------- */
.auth-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pl-sp-12);
}
.auth-remember {
display: inline-flex;
align-items: center;
gap: var(--pl-sp-8);
font-size: var(--pl-fs-body);
color: var(--pl-text);
cursor: pointer;
}
.auth-remember input { width: 18px; height: 18px; accent-color: var(--pl-action); cursor: pointer; }
.auth-link {
color: var(--pl-action);
font-weight: var(--pl-fw-semibold);
font-size: var(--pl-fs-body-sm);
text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
/* Lien fort en ligne (« S'inscrire », « Connectez-vous », « Renvoyer »). */
.auth-inline-link { color: var(--pl-action); font-weight: var(--pl-fw-bold); text-decoration: none; }
.auth-inline-link:hover { text-decoration: underline; }
/* ---- Zone d'actions (bouton + phrase de bascule) ----------------------- */
.auth-actions { display: flex; flex-direction: column; gap: var(--pl-sp-12); }
/* `margin: 0` indispensable : le Reboot de Bootstrap pose `margin-bottom: 1rem`
sur tout , ce qui ajoutait 16px fantomes sous chaque ligne de bascule
(l'ecart au bouton de l'ecran « Verifier le code » sortait a 58 pour 42). */
.auth-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
font-size: var(--pl-fs-body);
color: var(--pl-text);
}
/* Ligne « Vous n'avez pas reçu de code ? » : alignée à gauche (elle portait un
style inline). */
.auth-switch--start { justify-content: flex-start; }
/* Maquette : l'accès professionnel s'affiche sur deux lignes centrées, sous
le lien de connexion. Bloc (et non flex) pour que le retour à la ligne
fonctionne. */
.auth-switch--pro {
display: block;
text-align: center;
line-height: var(--pl-lh-base);
}
/* Maquette : bouton principal de la carte à 40px de haut. */
.auth-actions .pl-btn--block { min-height: 40px; }
/* Case à cocher des conditions (inscription).
Maquette : 30px entre la 2e ligne des conditions et le bouton (nous étions
à 18). */
.auth-terms {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
gap: var(--pl-sp-8);
font-size: var(--pl-fs-body-sm);
line-height: var(--pl-lh-sm);
color: var(--pl-text);
}
.auth-terms input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pl-action); flex-shrink: 0; }
/* ---- Séparateur « Ou » -------------------------------------------------- */
.auth-separator {
display: flex;
align-items: center;
gap: var(--pl-sp-16);
color: var(--pl-text-secondary);
font-size: var(--pl-fs-body);
font-weight: var(--pl-fw-medium);
}
.auth-separator::before,
.auth-separator::after { content: ""; flex: 1; height: 1px; background: var(--pl-border); }
/* ---- Boutons de connexion sociale (Google / Facebook / Apple) ---------- */
.auth-socials { display: flex; gap: var(--pl-sp-12); }
.auth-social {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: var(--pl-surface-dashboard);
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
transition: background-color .15s ease;
}
.auth-social:hover { background: var(--pl-border-hover); }
.auth-social img { width: 20px; height: 20px; display: block; }
/* ---- Message d'erreur d'authentification ------------------------------- */
.auth-alert {
padding: var(--pl-sp-12);
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--pl-radius-sm);
color: var(--pl-error);
font-size: var(--pl-fs-body-sm);
}
/* ---- Adaptation pour largeurs intermédiaires (< 1200px) ---------------- */
@media (max-width: 1199.98px) {
.auth-hero { padding: 48px var(--pl-sp-32); min-height: 0; }
.auth-hero__row { flex-direction: column; align-items: center; gap: var(--pl-sp-32); }
.auth-welcome { width: 100%; max-width: 590px; }
.auth-card { width: 100%; max-width: 453px; }
}
/* ---- Carte « Connexion » : rythme propre à cet écran ------------------- */
/* La maquette « Connexion » est plus aérée que celle de l'inscription (elle a
deux champs au lieu de quatre) : 50px du sous-titre au premier libellé
(33 sur l'inscription), 31 du dernier champ à la ligne « Se souvenir de
moi », 56 avant le bouton et 51 avant les boutons sociaux. Mesuré sur
assets/auth-flow/Connexion (1).png. */
.auth-card--login .auth-card__header { padding-bottom: 15px; }
.auth-card--login .auth-options { margin-top: 15px; }
.auth-card--login .auth-actions { margin-top: 42px; }
.auth-card--login .auth-switch--pro { margin-top: 26px; margin-bottom: 15px; }
/* Maquette « Inscription » : 34px entre la ligne de bascule et l'acces pro. */
.auth-card--register .auth-switch--pro { margin-top: 12px; }
.auth-card--login .auth-socials { margin-top: 16px; }
/* ---- Cartes « Mot de passe oublié » (3 étapes) ------------------------- */
/* Ces trois écrans sont nettement plus aérés que la connexion : la maquette y
met 38px entre les blocs de la carte (23 ailleurs), 55 entre le lien de
retour et le titre, et le bouton principal y fait 40px de haut comme partout
— chez nous l'ancre `.pl-btn--block` sortait à 48 faute d'être dans
`.auth-actions`. Mesuré sur assets/auth-flow/Mot de passe oublié*.png. */
.auth-card--pw { gap: 38px; padding-top: 41px; }
.auth-card--pw .auth-back { margin-bottom: 9px; }
/* Au câblage du 17/08, les champs et le bouton de ces trois écrans ont été
entourés d'un