/*
* ============================================================================
* 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); }
/* ---- Écran d'entrée du flow (maquette register01) ------------------------
Page centrée : titre bicolore, carte à deux panneaux Pro (violet) /
Client (vert) séparés par « ou », bande sécurité bleue. */
/* Maquette : le titre commence a y173. */
.auth-choice-page { padding: 66px 0 72px; background: var(--pl-white); }
.auth-choice-page__title {
margin: 0 0 var(--pl-sp-16);
text-align: center;
/* Maquette : 540px d'encre pour « Bienvenue sur TrouveMoi », soit 44px. */
font-size: 44px;
font-weight: var(--pl-fw-bold);
line-height: 1.16;
color: var(--pl-text);
}
.auth-choice-page__title .is-plaisirs { color: var(--pl-success); }
.auth-choice-page__title .is-loisirs { color: var(--pl-info); }
.auth-choice-page__subtitle {
/* Maquette : 18px, premiere ligne de 586px d'encre. */
max-width: 660px;
margin: 0 auto var(--pl-sp-32);
text-align: center;
font-size: 18px;
line-height: var(--pl-lh-base);
color: var(--pl-text-secondary);
}
/* Maquette « register01 » : la carte fait 1146 de large (x147 -> x1292) et non
toute la grille ; retrait interne de 39, panneaux de 446 et 176px entre eux
(nous avions 1222 de large, 33 de retrait, des panneaux de 553 et 50). */
.auth-choice-card {
max-width: 1146px;
margin-inline: auto;
display: grid;
grid-template-columns: 446px auto 446px;
justify-content: space-between;
gap: 0;
padding: 39px;
background: var(--pl-white);
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-md);
box-shadow: var(--pl-shadow-sm);
}
/* Maquette : le panneau n'a pas un ecart uniforme — 19px du pictogramme au nom,
12 du nom au texte, 45 avant la liste d'avantages, 40 avant le bouton et 19
avant le lien. On pose donc un ecart minimal et des marges explicites. */
.auth-choice-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
padding: var(--pl-sp-32) var(--pl-sp-24);
border-radius: var(--pl-radius-md);
}
.auth-choice-panel--pro { background: #fbf9ff; }
.auth-choice-panel--client { background: #fbfffd; }
.auth-choice-panel__badge {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--pl-white);
border-radius: var(--pl-radius-sm);
}
.auth-choice-panel--pro .auth-choice-panel__badge { background: var(--pl-action); }
.auth-choice-panel--client .auth-choice-panel__badge { background: #16a34a; }
/* Maquette : 16px (115px d'encre pour « Pro Prestataire »), pose 19px sous
le pictogramme. */
.auth-choice-panel__name { margin: 13px 0 0; font-size: 16px; font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.auth-choice-panel__desc { margin: 0; font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-sm); color: var(--pl-text-secondary); }
.auth-choice-feats {
list-style: none;
width: 100%;
margin: 33px 0 27px;
padding: 0;
/* Maquette : 34px d'encre a encre entre deux avantages (nous etions a 30). */
display: flex; flex-direction: column; gap: 22px;
text-align: left;
}
.auth-choice-feats li { display: flex; gap: var(--pl-sp-12); font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-sm); color: var(--pl-text-secondary); }
/* Maquette : l'intitule d'un avantage est en 16px (284px d'encre pour
« Déposez et gérez vos activités »), la description reste en 14. */
.auth-choice-feats strong { display: block; font-size: 16px; color: var(--pl-text); font-weight: var(--pl-fw-bold); }
.auth-choice-feats__icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--pl-radius-sm);
}
.auth-choice-panel--pro .auth-choice-feats__icon { background: var(--pl-action-light); color: var(--pl-action); }
.auth-choice-panel--client .auth-choice-feats__icon { background: #e8f6ed; color: #16a34a; }
/* Bouton vert du panneau Client. */
.pl-btn--client { background: #16a34a; color: var(--pl-white); }
.pl-btn--client:hover { background: #128a3f; color: var(--pl-white); }
/* Maquette : 229px d encre pour « En savoir plus sur l espace pro » (204 en 14px). */
.auth-choice-panel__more { margin-top: 12px; font-size: 15.5px; font-weight: var(--pl-fw-semibold); text-decoration: none; }
.auth-choice-panel--pro .auth-choice-panel__more { color: var(--pl-action); }
.auth-choice-panel--client .auth-choice-panel__more { color: #16a34a; }
.auth-choice-panel__more:hover { text-decoration: underline; }
/* Séparateur vertical + pastille « ou ». */
.auth-choice-card__sep { position: relative; width: 1px; background: var(--pl-border); }
.auth-choice-card__sep span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 8px 12px;
background: var(--pl-white);
border: 1px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-size: var(--pl-fs-body-sm);
color: var(--pl-text);
}
/* Bande « Une expérience sécurisée pour tous ». */
.auth-choice-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pl-sp-24);
flex-wrap: wrap;
margin-top: var(--pl-sp-32);
padding: var(--pl-sp-24) var(--pl-sp-32);
background: #e9effd;
border-radius: var(--pl-radius-md);
}
.auth-choice-band__intro { display: flex; align-items: center; gap: var(--pl-sp-16); color: #2563eb; }
.auth-choice-band__intro div { display: flex; flex-direction: column; }
.auth-choice-band__intro strong { font-size: var(--pl-fs-body); color: #2563eb; }
.auth-choice-band__intro span { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); max-width: 360px; }
.auth-choice-band__points { list-style: none; display: flex; gap: var(--pl-sp-24); margin: 0; padding: 0; }
.auth-choice-band__points li { display: flex; align-items: center; gap: var(--pl-sp-8); font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.auth-choice-band__points .pl-icon { color: #2563eb; }
@media (max-width: 1199.98px) {
.auth-choice-card { grid-template-columns: 1fr; }
.auth-choice-card__sep { display: none; }
}
/* ---- 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