/* P104 / P105 — page de connexion (/login et /login-from-app), traduction de la maquette validée
   docs/projet/maquettes-validees/connexion-valide.html (deux volets ; version téléphone sous 768px).
   Toutes les couleurs viennent de assets/css/mm-charte.css (variables --mm-*) ; les mesures sont celles de la maquette. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body.mm-connexion-page { font-family: var(--mm-police); font-size: 14px; color: var(--mm-texte); background: var(--mm-fond); }

.mm-connexion {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 44% 56%;
}

/* volet gauche bleu nuit : filigrane de la semaine en couverture, logo carré centré, pied (copyright et liens légaux) */
.mm-connexion__volet {
    position: relative;
    overflow: hidden;
    background-color: var(--mm-bleu-nuit);
    color: var(--mm-blanc);
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 44px;
}
.mm-connexion__volet::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--mm-filigrane, none);  /* posée par le gabarit : --mm-filigrane: url(...) ; absente = panneau uni */
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.mm-connexion__logo { position: relative; width: 230px; max-width: 80%; height: auto; margin: auto 0; filter: var(--mm-connexion-ombre-logo); }

/* pied du volet : filet or fin dégradé, copyright, liens légaux sur une seule ligne */
.mm-connexion__pied { position: relative; align-self: stretch; padding-top: 30px; }
.mm-connexion__pied::before { content: ""; display: block; height: 1px; background: var(--mm-connexion-filet-or); margin-bottom: 14px; }
.mm-connexion__copyright { margin: 0 0 6px 0; font-size: 11.5px; color: var(--mm-connexion-texte-sur-sombre-attenue); }
.mm-connexion__liens { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; }
.mm-connexion__liens a { color: var(--mm-connexion-texte-sur-sombre); text-decoration: none; }
.mm-connexion__liens a[href]:hover { color: var(--mm-jaune); }
.mm-connexion__liens a:not([href]) { cursor: default; }  /* lien sans page (rapport P104) */
.mm-connexion__liens--telephone { display: none; }

/* volet droit : la carte */
.mm-connexion__contenu {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.mm-carte {
    width: 100%; max-width: 400px;
    background: var(--mm-blanc);
    border-radius: 20px;
    box-shadow: var(--mm-connexion-ombre-carte);
    padding: 34px 32px 30px;
}
.mm-carte__titre { margin: 0 0 26px 0; font-size: 26px; font-weight: 600; letter-spacing: -0.3px; color: var(--mm-texte); }
.mm-carte__texte { margin: 0 0 16px 0; font-size: 14px; color: var(--mm-texte-secondaire); }

.mm-champ { margin-bottom: 18px; }
.mm-champ__libelle { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mm-champ label { font-size: 13px; font-weight: 500; }
.mm-champ__boite {
    display: flex; align-items: center;
    border: 1.5px solid var(--mm-bord); border-radius: 12px;
    background: var(--mm-fond);
    padding: 0 14px;
    transition: 0.15s;
}
.mm-champ__boite:focus-within { border-color: var(--mm-bleu-nuit); background: var(--mm-blanc); box-shadow: var(--mm-connexion-anneau-focus); }
.mm-champ__saisie {
    width: 100%; border: none; outline: none; background: none;
    font: inherit; font-size: 14.5px; color: var(--mm-texte);
    padding: 13px 0;
}
.mm-champ__saisie::placeholder { color: var(--mm-texte-attenue); }
.mm-oeil { border: none; background: none; cursor: pointer; padding: 4px; display: grid; place-items: center; color: var(--mm-texte-attenue); }
.mm-oeil:hover, .mm-oeil[aria-pressed="true"] { color: var(--mm-bleu-nuit); }

.mm-lien-oubli { font-size: 12.5px; font-weight: 500; color: var(--mm-bleu-lien); text-decoration: none; }
.mm-lien-oubli:hover { text-decoration: underline; text-underline-offset: 3px; }

.mm-bouton {
    display: block; width: 100%; margin-top: 8px;
    font: inherit; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--mm-bleu-nuit); background: var(--mm-jaune);
    border: none; border-radius: 12px; padding: 15px; cursor: pointer;
    box-shadow: var(--mm-connexion-ombre-bouton);
    transition: 0.15s;
}
.mm-bouton:hover { background: var(--mm-jaune-survol); transform: translateY(-1px); box-shadow: var(--mm-connexion-ombre-bouton-survol); }
.mm-bouton:focus-visible { outline: var(--mm-focus); outline-offset: 2px; }

.mm-aide { margin: 20px 0 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--mm-texte-attenue); }

/* message d'erreur ou d'information dans la carte (encadré : fond pâle de l'intention, bordure pleine, texte bleu nuit) */
.mm-message { margin: -10px 0 16px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--mm-texte); border: 1px solid; }
.mm-message--erreur { background: var(--mm-danger-fond); border-color: var(--mm-danger); }
.mm-message--info { background: var(--mm-info-fond); border-color: var(--mm-info); }
/* P111 (complément final) : message de réussite (composant composants/_message_succes.html.twig) : intention succès de la
   charte, fond vert clair, coche ; un lien-bouton seul dans la carte garde la mise en forme du bouton */
.mm-message--succes { background: var(--mm-succes-fond); border-color: var(--mm-succes); display: flex; align-items: flex-start; gap: 10px; margin-top: 0; }
.mm-message__coche { flex: 0 0 auto; color: var(--mm-succes); }
a.mm-bouton { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* « Mot de passe oublié ? » (P106, retour d'écran du 16/10/2026) : une seule carte à la fois. Les deux cartes occupent
   la même case de grille (mêmes dimensions : la case prend la plus grande) ; l'ancre #mot-de-passe-oublie (:target,
   sans JavaScript) affiche la carte du mot de passe oublié et masque la carte de connexion, écrite après elle (~).
   visibility et non display : la carte masquée garde sa place, n'est ni cliquable ni atteignable au clavier. */
.mm-cartes { display: grid; width: 100%; justify-items: center; }
.mm-cartes > .mm-carte { grid-area: 1 / 1; }
#mot-de-passe-oublie { visibility: hidden; }
#mot-de-passe-oublie:target { visibility: visible; }
#mot-de-passe-oublie:target ~ .mm-carte--connexion { visibility: hidden; }
.mm-carte__retour { display: block; margin-top: 16px; font-size: 13px; text-align: center; color: var(--mm-bleu-lien); text-decoration: none; }
.mm-carte__retour:hover { text-decoration: underline; }

/* téléphone : panneau réduit en haut, carte chevauchant le panneau, liens légaux centrés sous la carte */
@media (max-width: 767.98px) {
    .mm-connexion { grid-template-columns: 1fr; min-height: 0; }
    .mm-connexion__volet { padding: 26px 22px 40px; }
    .mm-connexion__logo { width: 120px; margin: 0; }
    .mm-connexion__pied { display: none; }
    /* P106, suite du retour d'écran : position relative = la carte, qui chevauche le panneau (marge négative), est peinte
       PAR-DESSUS lui ; avant, le volet (position: relative) recouvrait le haut de la carte (déjà visible en P105) */
    .mm-connexion__contenu { position: relative; padding: 0 14px 22px; margin-top: -18px; justify-content: flex-start; }
    .mm-carte { padding: 24px 20px 22px; border-radius: 18px; }
    .mm-connexion__liens--telephone { display: flex; justify-content: center; margin-top: 16px; }
    .mm-connexion__liens--telephone a { color: var(--mm-texte-secondaire); }
}