/* =====================================================================
   Écran de connexion — maquette du 11/08/2026 (« ChatGPT Image 22_22_08 »).
   Deux panneaux plein écran : marque à gauche sur fond menthe, carte de
   connexion blanche à droite. Portée limitée aux classes .ax-* : aucun
   impact sur le reste du site ni sur les autres pages d'authentification,
   qui gardent layouts.guest et assets/css/auth.css.
   ===================================================================== */

.ax-split {
    --ax-green: #178A43;
    --ax-green-600: #14803D;
    --ax-green-700: #106533;
    --ax-green-link: #1A9A4C;
    --ax-mint-50: #F5FBF7;
    --ax-mint-100: #E9F5EC;
    --ax-ink: #12263B;
    --ax-muted: #667A8C;
    --ax-line: #E6EBF0;

    display: flex;
    /* L'écran vit ENTRE l'en-tête et le pied de page : plus de 100vh, qui
       ajoutait une hauteur d'en-tête de défilement inutile. */
    min-height: clamp(620px, calc(100vh - 210px), 980px);
    /* Aucune barre horizontale possible : le thème applique des marges
       négatives et des largeurs fixes à des sélecteurs très génériques. */
    overflow-x: hidden;
    background: #FBFCFD;
    font-family: 'Manrope', 'Nunito', system-ui, -apple-system, sans-serif;
    color: var(--ax-ink);
}

/* ------------------------------------------------ panneau de marque */
.ax-split, .ax-split *, .ax-split *::before, .ax-split *::after { box-sizing: border-box; }

.ax-brand {
    position: relative;
    flex: 0 0 42.5%;
    max-width: 42.5%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 44px 48px 0;
    background: linear-gradient(168deg, #F2F9F4 0%, #E8F4EC 55%, #E2F1E8 100%);
}

/* Motifs discrets de la maquette : grilles de points, patte, cœur. */
.ax-brand__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: #B9DCC6;
    opacity: .75;
}
.ax-brand__deco svg { position: absolute; }
/* Les motifs restent des ORNEMENTS : jamais par-dessus un texte lisible —
   d'où le décalage de la patte et de la 2e grille de points par rapport à
   un placement naïf au centre du panneau. */
.ax-brand__deco .ax-deco-dots1 { top: 42px; inset-inline-end: 64px; }
.ax-brand__deco .ax-deco-dots2 { top: 47%; inset-inline-end: 34px; }
.ax-brand__deco .ax-deco-paw   { top: 112px; inset-inline-end: 34px; opacity: .85; }
.ax-brand__deco .ax-deco-heart { top: 268px; inset-inline-end: 96px; opacity: .8; }

.ax-brand > *:not(.ax-brand__deco) { position: relative; z-index: 1; }

.ax-brand__logo img {
    height: 62px;
    width: auto;
    display: block;
}

.ax-brand__title {
    margin: 44px 0 0;
    font-size: clamp(1.85rem, 1rem + 1.9vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
    max-width: 19ch;
}

.ax-brand__text {
    margin: 20px 0 0;
    max-width: 34ch;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.62;
    color: #52657A;
}
.ax-brand__text strong { color: var(--ax-green-link); font-weight: 700; }

.ax-brand__list {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    gap: 22px;
}
.ax-brand__list li { display: flex; align-items: flex-start; gap: 16px; }
.ax-brand__ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ax-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(23, 138, 67, .22);
}
.ax-brand__ftitle { display: block; font-size: 1.03rem; font-weight: 700; letter-spacing: -.01em; }
.ax-brand__ftext  { display: block; margin-top: 3px; font-size: .9rem; font-weight: 500; color: var(--ax-muted); }

/* Photo d'animaux : ancrée en bas, pleine largeur du panneau.
   `max-width: none` est OBLIGATOIRE : le thème impose `img { max-width: 100% }`,
   qui rognait la photo aux 100 % de la zone de contenu (padding déduit) et
   laissait une bande vide à droite. */
.ax-brand__photo {
    margin: auto -48px 0;
    width: calc(100% + 96px);
    max-width: none;
    height: auto;
    display: block;
}

/* ------------------------------------------------ colonne du formulaire */
.ax-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px 24px 48px;
}

.ax-card {
    width: 100%;
    max-width: 660px;
    background: #fff;
    border: 1px solid #EFF3F6;
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(18, 38, 59, .07), 0 2px 8px rgba(18, 38, 59, .04);
    padding: 40px clamp(24px, 3.4vw, 56px) 38px;
}

.ax-card__paw {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--ax-mint-100);
    color: var(--ax-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ax-card__title {
    margin: 20px 0 0;
    text-align: center;
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.ax-card__sub {
    margin: 8px 0 30px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ax-muted);
}

/* Champs */
.ax-lab {
    display: block;
    margin-bottom: 9px;
    font-size: .95rem;
    font-weight: 700;
    color: #21384E;
}
.ax-fld { position: relative; margin-bottom: 20px; }
.ax-fld__ico {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 18px;
    color: #9BAAB8;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}
.ax-split .ax-fld .form-control {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    border: 1.5px solid var(--ax-line);
    background: #fff;
    padding-inline-start: 52px;
    padding-inline-end: 52px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ax-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.ax-split .ax-fld .form-control::placeholder { color: #9BAAB8; font-weight: 500; }
.ax-split .ax-fld .form-control:focus {
    border-color: var(--ax-green);
    box-shadow: 0 0 0 4px rgba(23, 138, 67, .12);
    outline: none;
}
.ax-split .ax-fld .form-control.is-invalid { border-color: #DC5B5B; background: #FFF7F7; }

/* Œil : on garde la mécanique du thème (.password-toggle-button) */
.ax-split .password-toggle { position: relative; }
.ax-split .password-toggle-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 16px;
    color: #9BAAB8;
    cursor: pointer;
    z-index: 2;
    margin: 0;
}

.ax-forgot {
    display: block;
    margin: -8px 0 24px;
    text-align: end;
    font-size: .93rem;
    font-weight: 600;
    color: var(--ax-green-link);
    text-decoration: none;
}
.ax-forgot:hover { color: var(--ax-green-700); text-decoration: underline; }

.ax-remember { display: flex; align-items: center; gap: .5rem; margin: -4px 0 20px; }
.ax-remember label { font-size: .92rem; font-weight: 600; color: var(--ax-muted); margin: 0; }
.ax-split .ax-remember .form-check-input:checked { background-color: var(--ax-green); border-color: var(--ax-green); }

/* Bouton principal */
.ax-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 14px;
    background: var(--ax-green);
    color: #fff;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: 0 10px 22px rgba(23, 138, 67, .26);
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ax-submit:hover { background: var(--ax-green-600); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23, 138, 67, .32); }
.ax-submit:active { transform: translateY(0); }

/* Séparateur « ou » */
.ax-or { display: flex; align-items: center; gap: 18px; margin: 26px 0; }
.ax-or::before, .ax-or::after { content: ''; flex: 1; height: 1px; background: var(--ax-line); }
.ax-or span { font-size: .95rem; font-weight: 500; color: var(--ax-muted); }

/* Bouton Google */
.ax-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 60px;
    border-radius: 14px;
    border: 1.5px solid var(--ax-line);
    background: #fff;
    color: var(--ax-ink);
    font-size: 1.02rem;
    font-weight: 700;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ax-google:hover { border-color: #CBD6DF; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(18, 38, 59, .08); }

.ax-foot {
    margin: 28px 0 0;
    text-align: center;
    font-size: .98rem;
    font-weight: 500;
    color: var(--ax-muted);
}
.ax-foot a { margin-inline-start: 8px; color: var(--ax-green-link); font-weight: 700; text-decoration: none; }
.ax-foot a:hover { text-decoration: underline; }

/* Bandeau de réassurance sous la carte */
.ax-secure {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 660px;
    width: 100%;
    color: var(--ax-muted);
}
.ax-secure svg { flex: 0 0 auto; color: var(--ax-green); }
.ax-secure b { display: block; color: #21384E; font-size: .95rem; font-weight: 700; }
.ax-secure span { font-size: .9rem; font-weight: 500; }

/* Alertes et erreurs de validation */
.ax-split .alert { border-radius: 14px; font-weight: 600; font-size: .93rem; }
.ax-err { display: block; margin: -14px 0 16px; font-size: .87rem; font-weight: 600; color: #C4453F; }

/* Langues + retour au site : discret, en haut de la colonne de droite */
.ax-top {
    position: absolute;
    top: 22px;
    inset-inline-end: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.ax-top a {
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ax-line);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ax-muted);
    text-decoration: none;
}
.ax-top a.is-on { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-top a:hover { color: var(--ax-ink); }
.ax-top a.is-on:hover { color: #fff; }

/* ------------------------------------------------------- responsive */
@media (max-width: 1199.98px) {
    .ax-brand { flex-basis: 46%; max-width: 46%; padding: 36px 32px 0; }
    .ax-brand__photo { margin: auto -32px 0; width: calc(100% + 64px); }
    .ax-card { padding: 34px 30px 32px; }
}

/* Sous 992px la maquette n'a pas de version : le panneau de marque
   devient un bandeau compact (logo + titre), la photo et les arguments
   laissent la place au formulaire — l'écran sert à se connecter. */
@media (max-width: 991.98px) {
    .ax-split { flex-direction: column; min-height: 0; }
    .ax-brand {
        flex: 0 0 auto;
        max-width: none;
        padding: 26px 22px 24px;
        text-align: center;
        align-items: center;
    }
    .ax-brand__logo img { height: 48px; margin: 0 auto; }
    .ax-brand__title { margin-top: 18px; font-size: 1.5rem; max-width: 22ch; }
    .ax-brand__text,
    .ax-brand__list,
    .ax-brand__photo,
    .ax-brand__deco { display: none; }
    /* `min-width: 0` sur les colonnes : sans lui, un enfant flex refuse de
       se réduire sous sa largeur mini-contenu et déborde à droite. */
    .ax-brand { width: 100%; max-width: 100%; min-width: 0; }
    .ax-pane { width: 100%; max-width: 100%; min-width: 0; padding: 26px 18px 40px; justify-content: flex-start; }
    .ax-card, .ax-secure { width: 100%; max-width: 100%; min-width: 0; }
    .ax-card { border-radius: 22px; padding: 30px 22px 28px; box-shadow: 0 14px 34px rgba(18, 38, 59, .07); }
    .ax-card__title { font-size: 1.7rem; }
    .ax-card__paw { width: 58px; height: 58px; }
    .ax-top { position: static; margin: 0 auto; justify-content: center; }
}

@media (max-width: 480px) {
    .ax-card { padding: 26px 18px 24px; }
    .ax-card__sub { margin-bottom: 24px; font-size: .95rem; }
    .ax-submit, .ax-google { height: 56px; font-size: 1rem; }
    .ax-secure { padding: 0 6px; }
}