/*
 * Page d'accès V3 (login fermé) : orientation vers les espaces de l'extranet fédéral (V4)
 * Utilisée par templates/page_login.tpl
 * Fond : templates/images/login_fond.jpg (facultatif, bleu nuit sinon)
 */
:root {
    --l2-bleu: #2b3990;          /* bleu FFTA (titre) */
    --l2-rouge: #d7262e;         /* rouge FFTA (sur-titre) */
    --l2-texte: #3c4250;
    --l2-gris: #6b7280;
    --l2-bordure: #e3e6ec;
    --l2-dirigeant: #4fa3f0;
    --l2-dirigeant-fonce: #2f86d6;
    --l2-dirigeant-pastille: #e7f2fd;
    --l2-licencie: #ee6f4b;
    --l2-licencie-fonce: #d9573a;
    --l2-licencie-pastille: #fdece6;
    --l2-police: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body.l2 { height: 100%; }

body.l2 {
    margin: 0;
    font-family: var(--l2-police);
    font-size: 16px;
    line-height: 1.5;
    color: var(--l2-texte);
    background: #1f2433 url('../images/login_fond.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Voile sombre sur la photo de fond */
body.l2::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(24, 28, 42, 0.62);
    pointer-events: none;
}

.l2-page {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    box-sizing: border-box;
}

.l2-carte {
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    padding: 40px 44px 26px;
    box-sizing: border-box;
    text-align: center;
}

.l2-logo img { width: 220px; max-width: 100%; height: auto; }

.l2-surtitre {
    margin: 22px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--l2-rouge);
}

.l2-titre {
    margin: 0 auto 12px;
    max-width: 20em;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--l2-bleu);
    text-wrap: balance;
}

.l2-intro {
    margin: 0 auto 26px;
    max-width: 32em;
    font-size: 16px;
    color: var(--l2-gris);
}

/* Messages ponctuels (fermeture, maintenance) */
.l2-info:empty { display: none; }
.l2-info {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #fff4e5;
    color: #8a4b06;
    font-size: 14px;
    text-align: left;
}

.l2-espaces {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    text-align: left;
}

.l2-espace {
    min-width: 0;
    border: 1px solid var(--l2-bordure);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.l2-espace-entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.l2-pastille {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.l2-pastille svg { width: 20px; height: 20px; }

.l2-espace--dirigeant .l2-pastille { background: var(--l2-dirigeant-pastille); color: var(--l2-dirigeant-fonce); }
.l2-espace--licencie .l2-pastille { background: var(--l2-licencie-pastille); color: var(--l2-licencie-fonce); }

.l2-espace-nom {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1f2433;
    line-height: 1.25;
}

.l2-espace-public {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--l2-gris);
}

.l2-bouton {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s ease;
}
.l2-bouton span { flex: 1; }
.l2-bouton svg { flex: none; width: 16px; height: 16px; }
.l2-bouton:hover, .l2-bouton:focus { color: #fff; text-decoration: none; }
.l2-bouton:focus-visible { outline: 3px solid var(--l2-bleu); outline-offset: 2px; }

.l2-espace--dirigeant .l2-bouton { background: var(--l2-dirigeant); }
.l2-espace--dirigeant .l2-bouton:hover { background: var(--l2-dirigeant-fonce); }
.l2-espace--licencie .l2-bouton { background: var(--l2-licencie); }
.l2-espace--licencie .l2-bouton:hover { background: var(--l2-licencie-fonce); }

.l2-pied {
    margin-top: 22px;
    font-size: 13px;
}
.l2-pied a { color: var(--l2-gris); text-decoration: none; }
.l2-pied a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .l2-carte { padding: 28px 18px 18px; }
    .l2-titre { font-size: 21px; }
    .l2-espaces { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .l2-bouton { transition: none; }
}