/*
 * ============================================================================
 *  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 du contenu. */
.auth-hero {
    position: relative;
    max-width: var(--pl-container-desktop);   /* 1440px */
    margin: 0 auto;
    min-height: 913px;
    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__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;
    gap: var(--pl-sp-38);                     /* 38px entre les blocs */
    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);
}

/* Le formulaire empile ses blocs avec le même écart que la carte. */
.auth-form { display: flex; flex-direction: column; gap: var(--pl-sp-38); }

.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é). */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-sp-4);
    color: var(--pl-text-secondary);
    font-size: var(--pl-fs-body-sm);
    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. */
.auth-choice-page { padding: 56px 0 72px; background: var(--pl-white); }

.auth-choice-page__title {
    margin: 0 0 var(--pl-sp-16);
    text-align: center;
    font-size: 40px;
    font-weight: var(--pl-fw-bold);
    line-height: 1.3;
    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 {
    max-width: 620px;
    margin: 0 auto var(--pl-sp-32);
    text-align: center;
    font-size: var(--pl-fs-body);
    line-height: var(--pl-lh-base);
    color: var(--pl-text-secondary);
}

.auth-choice-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--pl-sp-24);
    padding: var(--pl-sp-32);
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    box-shadow: var(--pl-shadow-sm);
}

.auth-choice-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pl-sp-12);
    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; }

.auth-choice-panel__name { margin: 0; font-size: var(--pl-fs-body-lg); 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: var(--pl-sp-8) 0 var(--pl-sp-16);
    padding: 0;
    display: flex; flex-direction: column; gap: var(--pl-sp-16);
    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); }
.auth-choice-feats strong { display: block; 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); }

.auth-choice-panel__more { font-size: var(--pl-fs-body-sm); 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: 1100px) {
    .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);
}

/* Champ « Statut juridique » : visible seulement quand « Professionnel »
   est coché (aucun JavaScript nécessaire). */
.auth-field.auth-field--pro { display: none; }
.auth-form:has(.auth-acctype input[value="pro"]:checked) .auth-field.auth-field--pro { display: flex; }

.auth-input--select select { cursor: pointer; }

/* ---- Champs de formulaire ---------------------------------------------- */
.auth-fields { display: flex; flex-direction: column; gap: var(--pl-sp-12); }

.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); }
.auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--pl-fs-body);
    color: var(--pl-text);
}

/* Case à cocher des conditions (inscription). */
.auth-terms {
    display: flex;
    align-items: flex-start;
    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: 1200px) {
    .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; }
}