/* ==========================================================================
   Page de connexion — maquette B2 (Léa, 2026-09-29)
   Source : docs/Rapports HTML/v3-ecran-connexion-propositions-2026-09-15.html,
   variante « B2 · Bleu du logo à 80 % ».

   MARQUE BLANCHE : tout ce qui varie selon la marque est déclaré ICI, dans un bloc
   .v3-login--<code> (code = MarqueBlancheResolver::GROUPES), et nulle part dans les
   gabarits. Une marque ne déclare que des variables :
     --login-teinte   couleur du volet, des boutons et des liens ;
     --login-photo    photo du volet (none = aplat plein de la teinte) ;
     --login-opacite  opacité du calque de teinte posé sur la photo ;
     --login-ombre    ombre portée du texte du volet (utile sur photo seulement) ;
     --login-pastille fond du logo (blanc quand le logo est prévu pour fond clair) ;
     --login-ratio    largeur/hauteur de la photo : en téléphone, le volet prend ce
                      rapport pour montrer la photo ENTIÈRE (auto = pas de photo).

   ⚠ Page servie sur la BASE V1 (Bootstrap 3, feuilles bootstrap-smartvitale*.css) :
   cette feuille est chargée APRÈS elles, et tout est scopé sous .v3-login. La racine
   ne s'appelle pas « .login » : la V1 y pose son propre fond.
   ⚠ Cache-buster manuel : incrémenter ?v= dans Security/login.html.twig à chaque
   modification, puis assets:install web, puis seulement ouvrir la page.
   ========================================================================== */

/* --- Jetons (valeurs de v3.css, que la V1 ne charge pas) --------------------- */
.v3-login {
    --v3-ink: #2d3444;
    --v3-ink-2: #5b6577;
    --v3-ink-3: #939cab;
    --v3-bd: #dde3ea;
    --v3-bd-soft: #e9edf2;
    --v3-zone: #f4f6f9;
    --v3-white: #fff;
    --login-err-fond: #fdeaea;
    --login-err-texte: #8e2020;
    --login-err-bord: #f3c0c0;
    --login-info-fond: #eaf5fa;
    --login-info-texte: #136b87;
    --login-info-bord: #bcdcea;

    /* Défaut de marque : le fond bleu de l'ancienne page de connexion. */
    --login-teinte: #1c73b6;
    --login-photo: none;
    --login-opacite: 1;
    --login-ombre: none;
    --login-pastille: var(--v3-white);
    --login-ratio: auto;
}

/* --- Déclarations de marque ------------------------------------------------- */
/* STAG : le volet de la maquette B2 — photo fournie par Léa, bleu du logo à 80 %.
   Contraste mesuré sur la maquette : 4,47. Ne pas descendre l'opacité. */
.v3-login--stag {
    --login-teinte: #0068b3;
    --login-photo: url("../../images/login/stag-fond.jpg");
    --login-opacite: .8;
    --login-ombre: 0 1px 3px rgba(0, 0, 0, .45);
    --login-pastille: transparent;
    --login-ratio: 1128 / 944;
}

/* SMARTVITALE (groupe par défaut, localhost compris) : photo fournie par Léa le
   2026-09-29, sous la teinte de l'ancienne page à 80 %. Le logo garde sa pastille
   blanche : il est dessiné pour fond clair. */
.v3-login--smartvitale {
    --login-photo: url("../../images/login/smartvitale-fond.jpg");
    --login-opacite: .8;
    --login-ombre: 0 1px 3px rgba(0, 0, 0, .45);
    --login-ratio: 1070 / 992;
}

/* NEO : couleur principale de sa feuille V1 (bootstrap-smartvitale2.css). */
.v3-login--neo {
    --login-teinte: #00b1b2;
}

/* akos, smartcb, navigortho : défaut ci-dessus (aplat #1c73b6). */

/* --- Page ------------------------------------------------------------------- */
/* La V1 réserve 65 px à sa barre fixe, absente de cette page. */
body:has(.v3-login) {
    padding-top: 0;
    background: var(--v3-white, #fff);
}

/* PLEIN ÉCRAN (demande de Léa, 2026-09-29) : plus de carte posée sur un fond gris.
   Les deux volets de la maquette B2 occupent toute la fenêtre, du bord haut au bord
   bas ; seul le formulaire garde une largeur de lecture (voir .v3-login-form). */
.v3-login {
    min-height: 100vh;
    display: flex;
    box-sizing: border-box;
    background: var(--v3-white);
    color: var(--v3-ink);
    font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.v3-login *,
.v3-login *::before,
.v3-login *::after {
    box-sizing: border-box;
}

/* --- Carte à deux volets ---------------------------------------------------- */
.v3-login .v3-login-carte {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    min-height: 100vh;
    background: var(--v3-white);
}

/* --- Volet gauche (marque) -------------------------------------------------- */
.v3-login .v3-login-volet {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 32px 30px;
    color: var(--v3-white);
    background: var(--login-teinte) var(--login-photo) center / cover no-repeat;
}

/* ⚠ Le calque de teinte est une couche À PART, et non un fond mélangé : c'est la
   seule façon de régler l'opacité de la couleur sans faire pâlir le texte. */
.v3-login .v3-login-volet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--login-teinte);
    opacity: var(--login-opacite);
    pointer-events: none;
}

/* Tout le contenu repasse au-dessus du calque. */
.v3-login .v3-login-volet > * {
    position: relative;
    z-index: 1;
    text-shadow: var(--login-ombre);
}

.v3-login .v3-login-logo {
    align-self: flex-start;
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--login-pastille);
    text-shadow: none;
}

.v3-login .v3-login-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 72px;
}

/* Le logo horizontal de STAG est prévu pour la photo : pas de pastille, borné en
   largeur (rapport 8,8:1) et non en hauteur. */
.v3-login--stag .v3-login-logo {
    width: 100%;
    max-width: 210px;
    padding: 0;
}

.v3-login--stag .v3-login-logo img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .14));
}

/* Le message se centre dans la hauteur libre par marges automatiques, et non par
   « space-between » : sans la mention Vitale® (masquée pour AKOS, SmartCB, NEO), il ne
   reste que deux éléments, et space-between plaquerait le message en bas du volet.
   La signature, elle, se cale toujours en bas. */
.v3-login .v3-login-message {
    margin: auto 0;
    padding: 16px 0;
}

.v3-login .v3-login-sig {
    margin-top: auto;
}

.v3-login .v3-login-message + .v3-login-sig {
    margin-top: 0;
}

.v3-login .v3-login-titre {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: inherit;
}

.v3-login .v3-login-accroche {
    margin: 0;
    font-size: 13.5px;
    opacity: .9;
}

.v3-login .v3-login-sig {
    font-size: 11.5px;
    opacity: .72;
}

/* --- Volet droit (formulaire commun) ---------------------------------------- */
.v3-login .v3-login-corps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 28px 24px;
}

.v3-login .v3-login-form {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.v3-login .v3-login-lab {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--v3-ink-2);
}

.v3-login .v3-login-champ {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 11px 13px;
    border: 1px solid var(--v3-bd);
    border-radius: 10px;
    background: var(--v3-white);
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    color: var(--v3-ink);
}

/* La V1 met ses placeholders en italique gris : on reprend ceux de la maquette. */
.v3-login .v3-login-champ::placeholder {
    color: var(--v3-ink-3);
    font-style: normal;
}

.v3-login .v3-login-champ:focus {
    outline: 2px solid var(--login-teinte);
    outline-offset: 1px;
    border-color: var(--login-teinte);
}

.v3-login .v3-login-rang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 14px;
}

.v3-login .v3-login-souv {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--v3-ink-2);
}

.v3-login .v3-login-souv input {
    margin: 0;
    accent-color: var(--login-teinte);
}

.v3-login .v3-login-lien {
    font-size: 13px;
    font-weight: 600;
    color: var(--login-teinte);
    text-decoration: none;
}

.v3-login .v3-login-lien:hover,
.v3-login .v3-login-lien:focus {
    color: var(--login-teinte);
    text-decoration: underline;
}

.v3-login .v3-login-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--login-teinte);
    border-radius: 10px;
    background: var(--login-teinte);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v3-white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.v3-login .v3-login-btn:hover,
.v3-login .v3-login-btn:focus {
    color: var(--v3-white);
    text-decoration: none;
    filter: brightness(.95);
}

/* Le bouton secondaire suit le bouton Connexion : l'écart de 10 px de la maquette. */
.v3-login .v3-login-btn--sec {
    margin-top: 10px;
    background: var(--v3-white);
    color: var(--login-teinte);
}

.v3-login .v3-login-btn--sec:hover,
.v3-login .v3-login-btn--sec:focus {
    color: var(--login-teinte);
}

.v3-login .v3-login-err {
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid var(--login-err-bord);
    border-radius: 9px;
    background: var(--login-err-fond);
    font-size: 13px;
    color: var(--login-err-texte);
}

/* --- Modale d'accès d'essai (V3) ------------------------------------------- */
/* Gabarit : Security/marques/_commun/_modale_essai.html.twig. La mécanique reste celle
   de Bootstrap 3 (base V1) ; seul l'habillage est ici. La modale vit DANS .v3-login,
   elle hérite donc de la teinte de la marque et des jetons ci-dessus. */
.v3-login .v3-essai .v3-essai-dialog {
    width: auto;
    max-width: 720px;
    margin: 32px auto;
    padding: 0 16px;
}

.v3-login .v3-essai .v3-essai-contenu {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(28, 40, 51, .45);
    background: var(--v3-white);
}

.v3-login .v3-essai-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--v3-bd-soft);
}

.v3-login .v3-essai-titre {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--v3-ink);
}

.v3-login .v3-essai-intro {
    margin: 0;
    font-size: 14px;
    color: var(--v3-ink-2);
}

.v3-login .v3-essai-fermer {
    flex: none;
    width: 40px;
    height: 40px;
    margin: -6px -8px 0 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--v3-ink-3);
    cursor: pointer;
}

.v3-login .v3-essai-fermer:hover,
.v3-login .v3-essai-fermer:focus {
    background: var(--v3-zone);
    color: var(--v3-ink);
}

.v3-login .v3-essai-form {
    margin: 0;
}

.v3-login .v3-essai-corps {
    padding: 14px 24px 4px;
}

/* COMPACT (demande de Léa, 2026-09-29) : sur ordinateur, champs et libellés resserrés.
   Le bloc téléphone, plus bas, rend aux champs leur hauteur tactile (≈ 44 px). */
.v3-login .v3-essai .v3-login-champ {
    margin-bottom: 8px;
    padding: 8px 11px;
}

.v3-login .v3-essai .v3-login-lab {
    margin-bottom: 3px;
}

/* Les alertes sont masquées au départ ; le script les montre par .show(). */
.v3-login .v3-essai-alerte {
    display: none;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
}

.v3-login .v3-essai-alerte p {
    margin: 0;
}

.v3-login .v3-essai-alerte--erreur {
    border-color: var(--login-err-bord);
    background: var(--login-err-fond);
    color: var(--login-err-texte);
}

.v3-login .v3-essai-alerte--info {
    border-color: var(--login-info-bord);
    background: var(--login-info-fond);
    color: var(--login-info-texte);
}

/* Piège à robots : hors de l'écran, jamais display:none (certains robots ignorent les
   champs masqués et ne tomberaient plus dans le piège). */
.v3-login .v3-essai-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bootstrap 3 pose sur <legend> 21 px, pleine largeur et une bordure basse. */
.v3-login .v3-essai-groupe {
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.v3-login .v3-essai-legende {
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v3-ink-3);
}

.v3-login .v3-essai-ligne {
    display: grid;
    grid-template-columns: var(--essai-colonnes, 1fr 1fr);
    column-gap: 12px;
}

.v3-login .v3-essai-ligne--entreprise { --essai-colonnes: 1.5fr 1fr; }
.v3-login .v3-essai-ligne--adresse    { --essai-colonnes: 2fr 110px 1.2fr; }
.v3-login .v3-essai-ligne--contact    { --essai-colonnes: 1.2fr 1.3fr 1fr; }

.v3-login .v3-essai-champ {
    min-width: 0;
}

/* Champ en cause d'une erreur (posé par js/login/essai.js, retiré à la saisie). */
.v3-login .v3-essai [aria-invalid="true"] {
    border-color: var(--login-err-texte);
    background: var(--login-err-fond);
}

.v3-login .v3-essai-requis::after {
    content: " *";
    color: var(--login-err-texte);
}

.v3-login .v3-essai-message {
    min-height: 58px;
    resize: vertical;
}

/* Case « recontacté(e) » et mention des champs obligatoires sur une même ligne. */
.v3-login .v3-essai-bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}

.v3-login .v3-essai-mention {
    margin: 0;
    font-size: 12px;
    color: var(--v3-ink-3);
}

.v3-login .v3-essai-mention span {
    color: var(--login-err-texte);
}

.v3-login .v3-essai-pied {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--v3-bd-soft);
}

.v3-login .v3-essai-pied .v3-login-btn {
    width: auto;
    min-width: 150px;
    margin-top: 0;
    padding: 11px 18px;
}

/* Liste de suggestions d'entreprise (rendue par le serveur), à la manière V3. */
.v3-login .v3-essai .autocomplete-entreprise-wrapper {
    position: relative;
}

.v3-login .v3-essai .autocomplete-entreprise-dropdown {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--v3-bd);
    border-radius: 10px;
    background: var(--v3-white);
    box-shadow: 0 12px 28px -12px rgba(28, 40, 51, .35);
}

.v3-login .v3-essai .autocomplete-entreprise-dropdown.open {
    display: block;
}

.v3-login .v3-essai .autocomplete-entreprise-item {
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--v3-ink-2);
    cursor: pointer;
}

.v3-login .v3-essai .autocomplete-entreprise-item:hover {
    background: var(--v3-zone);
}

.v3-login .v3-essai .autocomplete-entreprise-nom {
    font-weight: 600;
    color: var(--v3-ink);
}

.v3-login .v3-essai .autocomplete-entreprise-item .text-muted {
    color: var(--v3-ink-3);
}

/* --- Grand écran ------------------------------------------------------------ */
/* Demande de Léa (2026-09-29) : sur un grand écran, textes, champs, boutons et logo
   grandissent avec la largeur de la fenêtre, par des clamp(minimum de la maquette,
   proportion, plafond) — pas de saut à 1400 px. La page étant en plein écran, seule
   la largeur du formulaire suit (440 px → 560 px au plus). En dessous de 1400 px, ce
   bloc ne s'applique pas. */
@media (min-width: 1400px) {
    .v3-login .v3-login-form {
        max-width: clamp(440px, 26vw, 560px);
    }

    .v3-login .v3-login-volet {
        padding: clamp(32px, 2.3vw, 48px) clamp(30px, 2.2vw, 46px);
    }

    .v3-login .v3-login-logo img {
        max-width: clamp(210px, 15vw, 290px);
        max-height: clamp(72px, 5vw, 100px);
    }

    .v3-login--stag .v3-login-logo {
        max-width: clamp(210px, 15vw, 290px);
    }

    .v3-login .v3-login-titre {
        font-size: clamp(22px, 1.6vw, 32px);
    }

    .v3-login .v3-login-accroche {
        font-size: clamp(13.5px, .95vw, 18px);
    }

    .v3-login .v3-login-sig {
        font-size: clamp(11.5px, .72vw, 14px);
    }

    .v3-login .v3-login-corps {
        padding: clamp(26px, 2.6vw, 52px) clamp(28px, 2.9vw, 58px);
    }

    .v3-login .v3-login-lab {
        margin-bottom: 7px;
        font-size: clamp(12px, .75vw, 14px);
    }

    .v3-login .v3-login-champ {
        margin-bottom: clamp(10px, .8vw, 16px);
        padding: clamp(11px, .8vw, 15px) clamp(13px, .95vw, 18px);
        font-size: clamp(14px, .88vw, 17px);
    }

    .v3-login .v3-login-rang {
        margin: 4px 0 clamp(14px, 1.1vw, 22px);
    }

    .v3-login .v3-login-souv,
    .v3-login .v3-login-lien {
        font-size: clamp(13px, .8vw, 15.5px);
    }

    /* La case native garde 13 px quelle que soit la police : on la suit. */
    .v3-login .v3-login-souv input {
        width: clamp(13px, .95vw, 18px);
        height: clamp(13px, .95vw, 18px);
    }

    .v3-login .v3-login-btn {
        padding: clamp(12px, .85vw, 16px);
        font-size: clamp(14.5px, .9vw, 17px);
    }

    .v3-login .v3-login-btn--sec {
        margin-top: clamp(10px, .75vw, 14px);
    }
}

/* --- Téléphone -------------------------------------------------------------- */
@media (max-width: 760px) {
    .v3-login .v3-login-carte {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* Retour de Léa (2026-09-29) : à 150 px de haut, la photo était tronquée en
       bande. Le volet prend le rapport de SA photo, qui s'affiche donc entière ;
       sans photo, --login-ratio vaut auto et le bandeau garde ses 150 px. */
    .v3-login .v3-login-volet {
        min-height: 150px;
        aspect-ratio: var(--login-ratio);
        padding: 20px 18px;
    }

    /* Modale d'essai en téléphone (retour de Léa, 2026-09-29 : « grande en hauteur »,
       1055 px à 390 px de large). Plein écran, espacements resserrés, code postal et
       ville côte à côte, boutons collés en bas pendant le défilement. Les champs
       gardent 44 px de haut : c'est le plancher tactile des Normes UX, on ne le
       rogne pas. Nom et téléphone ne sont PAS mis côte à côte : l'ordre de tabulation
       ne suivrait plus l'ordre visuel. */
    .v3-login .v3-essai .v3-essai-dialog {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* ⚠ overflow: visible OBLIGATOIRE : le overflow: hidden du bureau (coins arrondis)
       fait de la fenêtre un conteneur de défilement, et le pied « sticky » s'y
       accrocherait au lieu de l'écran — les boutons sortaient de la vue. */
    .v3-login .v3-essai .v3-essai-contenu {
        min-height: 100vh;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
    }

    .v3-login .v3-essai-tete {
        padding-top: 14px;
        padding-bottom: 10px;
    }

    .v3-login .v3-essai-titre {
        font-size: 18px;
    }

    .v3-login .v3-essai-intro {
        font-size: 13px;
    }

    .v3-login .v3-essai-corps {
        padding-top: 10px;
    }

    .v3-login .v3-essai-ligne {
        grid-template-columns: 1fr;
    }

    /* Adresse sur toute la largeur, puis code postal | ville. */
    .v3-login .v3-essai-ligne--adresse {
        grid-template-columns: 112px 1fr;
    }

    .v3-login .v3-essai-ligne--adresse > .v3-essai-champ:first-child {
        grid-column: 1 / -1;
    }

    /* 44 px de haut : 14 px de texte, 1,55 d'interligne, 10 px de marge intérieure. */
    .v3-login .v3-essai .v3-login-champ {
        margin-bottom: 6px;
        padding: 10px 12px;
    }

    .v3-login .v3-essai .v3-login-lab {
        margin-bottom: 2px;
    }

    .v3-login .v3-essai-legende {
        margin-bottom: 4px;
    }

    .v3-login .v3-essai-groupe {
        margin-bottom: 8px;
    }

    .v3-login .v3-essai-tete,
    .v3-login .v3-essai-corps,
    .v3-login .v3-essai-pied {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Boutons toujours à portée de pouce : le pied colle au bas de la modale, qui est
       le conteneur de défilement de Bootstrap 3. */
    .v3-login .v3-essai-pied {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-top: 10px;
        padding-bottom: 12px;
        background: var(--v3-white);
    }

    .v3-login .v3-essai-pied .v3-login-btn {
        flex: 1;
        min-width: 0;
    }

    /* Le formulaire suit la photo au lieu de se centrer dans la hauteur restante,
       ce qui laissait un grand vide blanc entre les deux. */
    .v3-login .v3-login-corps {
        justify-content: flex-start;
    }

    .v3-login .v3-login-titre {
        margin: 10px 0 6px;
        font-size: 17px;
    }

    .v3-login .v3-login-accroche {
        font-size: 12.5px;
    }

    .v3-login--stag .v3-login-logo {
        max-width: 190px;
    }

    .v3-login .v3-login-corps {
        padding: 18px;
    }
}