/* ═══════════════════════════════════════════════════
   login-responsive.css — Adaptation fluide de la page de connexion
   ---------------------------------------------------------------
   La page de connexion gardait des dimensions FIXES (carte 480px, padding
   48px, centrage vertical strict) : sur un PC portable (1024x700, 1366x768)
   ou une tablette, la carte depassait la hauteur de l'ecran, son haut passait
   sous l'entete fixe et son bas etait coupe.
   Ce fichier ne change NI la forme NI les couleurs : il rend les memes
   dimensions fluides (clamp) et remplace le centrage qui rognait par un
   centrage a base de marges (le seul sur qui ne coupe jamais le contenu dans
   un conteneur defilable).
   Charge APRES register.css et le <style> inline de login.html : a specificite
   egale, c'est cette feuille qui gagne.
   ═══════════════════════════════════════════════════ */

:root {
    /* Hauteur reelle de l'entete fixe (.premium-header). */
    --login-header-h: 70px;
}

/* ─────────────────────────────────────────────────
   COLONNE DROITE — degage l'entete fixe et defile proprement
───────────────────────────────────────────────── */
.split-layout .split-right {
    /* flex-start + margin:auto sur la carte : en flexbox, un
       justify-content:center rogne le DEBUT du contenu des qu'il deborde
       (le depassement n'est alors plus atteignable au scroll). */
    justify-content: flex-start;
    /* Le bas reserve la place de la fleche « Decouvrir » (.scroll-hint, en
       position absolute) : sans cette reserve, sur un ecran bas la carte
       descendait dessus et les deux textes se chevauchaient. */
    padding: var(--login-header-h) clamp(16px, 3vw, 40px) clamp(76px, 9vh, 96px);
}

/* register.css pose "main { padding: 100px 20px 60px }" pour degager l'entete
   fixe de la page d'inscription autonome. Dans la mise en page en deux colonnes
   c'est .split-right qui reserve deja cette place : ce double padding faisait
   depasser la carte de la hauteur de l'ecran sur un portable.
   Le mode inscription (body.register-mode) garde son propre padding, intact. */
body:not(.register-mode) .split-layout .split-right .auth-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

/* Centrage vertical par marges : sur grand ecran la carte reste centree,
   sur petit ecran elle se cale en haut sans jamais etre coupee. */
body:not(.register-mode) .split-layout .premium-card {
    margin: auto;
}

/* ─────────────────────────────────────────────────
   CARTE — memes proportions, dimensions fluides
───────────────────────────────────────────────── */
body:not(.register-mode) .premium-card {
    max-width: min(480px, 100%);
    padding: clamp(26px, 3.4vw, 48px);
    border-radius: clamp(20px, 2vw, 28px);
}

body:not(.register-mode) .premium-card .card-header {
    margin-bottom: clamp(20px, 3.4vh, 40px);
}

body:not(.register-mode) .premium-card .card-header h1 {
    font-size: clamp(24px, 2.4vw, 32px);
}

body:not(.register-mode) .premium-card .card-header p {
    font-size: clamp(14px, 1.1vw, 16px);
}

body:not(.register-mode) .premium-card .form-group {
    margin-bottom: clamp(14px, 2vh, 24px);
}

body:not(.register-mode) .premium-card .auth-divider {
    margin: clamp(14px, 2vh, 24px) 0;
}

body:not(.register-mode) .premium-card .footer-link {
    margin-top: clamp(18px, 2.6vh, 32px);
}

/* ─────────────────────────────────────────────────
   ECRANS BAS (portables 1366x768, 1440x900 fenetre reduite)
   On resserre le rythme vertical avant d'avoir a faire defiler.
───────────────────────────────────────────────── */
@media (min-width: 769px) and (max-height: 820px) {
    body:not(.register-mode) .premium-card {
        padding-top: clamp(22px, 2.6vw, 34px);
        padding-bottom: clamp(22px, 2.6vw, 34px);
    }

    body:not(.register-mode) .premium-card .btn-google,
    body:not(.register-mode) .premium-card .btn-primary {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    body:not(.register-mode) .premium-card .input-wrapper input,
    body:not(.register-mode) .premium-card .input-wrapper select {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ─────────────────────────────────────────────────
   TABLETTE PAYSAGE / PETIT PORTABLE (769-1100px)
   La colonne visuelle de gauche se retracte au lieu d'ecraser le formulaire.
───────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {
    .split-layout .split-left {
        width: 40%;
    }

    .split-layout .split-right {
        width: 60%;
    }

    .hero-overlay {
        padding: 0 7%;
    }
}

/* ─────────────────────────────────────────────────
   MOBILE (< 769px) — la colonne gauche est deja masquee par login.html.
   On enleve seulement la hauteur minimale plein ecran qui, combinee au
   padding, forcait un defilement inutile et collait la carte sous l'entete.
───────────────────────────────────────────────── */
@media (max-width: 768px) {
    body:not(.register-mode) .split-layout .split-right {
        padding: var(--login-header-h) 16px 80px !important;
    }

    body:not(.register-mode) .split-layout .premium-card {
        min-height: 0;
        margin: auto;
        margin-top: 0;
        border-radius: 24px !important;
    }

    body:not(.register-mode) .premium-card .card-header h1 {
        font-size: clamp(22px, 6.4vw, 28px);
    }
}

/* ─────────────────────────────────────────────────
   ENTETE — le nom de marque passait sur deux lignes sous 480px et venait
   toucher le bouton « Creer un compte ». On reduit l'echelle, sans changer la
   composition (logo a gauche, bouton a droite).
───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .premium-header .header-content {
        padding: 0 14px;
        gap: 10px;
    }

    .premium-header .logo span {
        font-size: 15px;
        white-space: nowrap;
    }

    /* height:28px est pose en style inline sur le <img> du logo. */
    .premium-header .logo img {
        height: 22px !important;
    }

    .premium-header #header-action-btn {
        padding: 9px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* Tres petits telephones : on gagne la derniere marge horizontale. */
@media (max-width: 380px) {
    body:not(.register-mode) .split-layout .split-right {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body:not(.register-mode) .premium-card {
        padding: 22px 18px;
    }

    /* A 320px, le bouton « Creer un compte » sortait de l'ecran a droite. */
    .premium-header .header-content {
        padding: 0 10px;
        gap: 8px;
    }

    .premium-header .logo span {
        font-size: 13px;
    }

    .premium-header .logo img {
        height: 20px !important;
    }

    .premium-header #header-action-btn {
        padding: 8px 11px;
        font-size: 12px;
    }
}

/* Ecran tres bas en paysage (telephone couche) : la carte est plus haute que
   l'ecran, elle defile. On libere le centrage et on retire la fleche
   « Decouvrir » — en position absolute dans le conteneur defilant, elle
   atterrissait au milieu du formulaire. Le contenu sous la page reste
   atteignable par le defilement normal. */
@media (max-height: 520px) {
    body:not(.register-mode) .split-layout .split-right {
        justify-content: flex-start;
        padding-bottom: 24px !important;
    }

    body:not(.register-mode) .split-layout .premium-card {
        margin-top: 0;
        margin-bottom: 0;
    }

    .split-layout .split-right .scroll-hint {
        display: none;
    }
}