/* ==========================================================================
   Microlog GIU — Écran de connexion (index.php)
   Fond rouge, cadre blanc en split screen : logo à gauche, formulaire à droite.
   ========================================================================== */

.page-connexion {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background-color: var(--giu-rouge);
    /* Profondeur : halo clair en haut à gauche, rouge plus sombre en bas à droite,
       et une trame de losanges très discrète. */
    background-image:
        radial-gradient(1200px 700px at 12% 8%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(900px 600px at 95% 100%, rgba(22,19,15,.45), transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
}

/* ---------------------------- Cadre ---------------------------- */
.cadre {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--giu-blanc);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(22,19,15,.45), 0 0 0 1px rgba(255,255,255,.08);
    position: relative;
}
/* Filet or en tête du cadre */
.cadre::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--giu-or), var(--giu-or-clair) 50%, var(--giu-or));
    z-index: 1;
}

/* ---------------------------- Volet identité ---------------------------- */
.volet-identite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 56px 40px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FFFFFF 45%, var(--giu-ivoire) 100%);
    border-right: 1px solid var(--giu-gris-100);
}
.volet-identite .logo {
    width: 100%;
    max-width: 340px;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(22,19,15,.10));
}
.volet-identite .marque { display: grid; gap: 10px; justify-items: center; }
.volet-identite h1 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);
    color: var(--giu-noir);
}
.volet-identite h1 em { font-style: italic; font-weight: 500; color: var(--giu-rouge); }
.volet-identite .giu-filet { width: 180px; margin: 2px 0; }
.volet-identite p {
    margin: 0;
    font-size: var(--giu-fs-sm);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--giu-gris-700);
}

/* ---------------------------- Volet formulaire ---------------------------- */
.volet-formulaire {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
}
.formulaire { width: 100%; max-width: 380px; }
.formulaire h2 {
    font-size: var(--giu-fs-xl);
    color: var(--giu-noir);
    margin: 6px 0 8px;
}
.formulaire .intro {
    color: var(--giu-gris-700);
    margin-bottom: 28px;
}

/* Champs MDB aux couleurs de la charte */
.formulaire .form-outline .form-control { font-family: var(--giu-font-ui); font-size: 1rem; }
.formulaire .form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.formulaire .form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.formulaire .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: var(--giu-rouge);
}
.formulaire .form-outline .form-control:focus ~ .form-label { color: var(--giu-rouge); }

.champ-mdp .form-control { padding-right: 88px; }
.voir-mdp {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: var(--giu-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--giu-gris-700);
    cursor: pointer;
    z-index: 2;
}
.voir-mdp:hover { color: var(--giu-rouge); background: var(--giu-rouge-pale); }
.voir-mdp:focus-visible { outline: 2px solid var(--giu-rouge); outline-offset: 1px; }

.ligne-oubli { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.ligne-oubli a {
    font-size: var(--giu-fs-sm);
    font-weight: 600;
    color: var(--giu-rouge);
    text-decoration: none;
}
.ligne-oubli a:hover { color: var(--giu-rouge-fonce); text-decoration: underline; }

.btn-connexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 14px;
    box-shadow: 0 8px 20px rgba(181,18,27,.30);
}
.btn-connexion svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
}
.btn-connexion:hover svg { transform: translateX(3px); }

/* Alertes */
.alerte {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--giu-radius);
    font-size: var(--giu-fs-sm);
    font-weight: 600;
    margin-bottom: 22px;
}
.alerte svg {
    flex: none; width: 18px; height: 18px; margin-top: 1px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.alerte-erreur { color: var(--giu-rouge-fonce); background: var(--giu-rouge-pale); border: 1px solid #F2C5C8; }
.alerte-info   { color: var(--giu-vert); background: var(--giu-vert-pale); border: 1px solid #C3DFD1; }

.formulaire .pied {
    margin: 32px 0 0;
    font-size: var(--giu-fs-xs);
    color: var(--giu-gris-500);
    text-align: center;
}

/* Modale */
.modal-content { border-radius: var(--giu-radius-lg); }
.modal-title { font-family: var(--giu-font-display); font-weight: 700; font-size: 1.4rem; }

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 860px) {
    .cadre { grid-template-columns: 1fr; max-width: 480px; }
    .volet-identite {
        padding: 36px 24px 24px;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--giu-gris-100);
    }
    .volet-identite .logo { max-width: 200px; }
    .volet-identite h1 { font-size: 2rem; }
    .volet-formulaire { padding: 32px 24px 28px; }
}

@media (prefers-reduced-motion: no-preference) {
    .cadre { animation: cadre-entree .5s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes cadre-entree {
        from { transform: translateY(14px); opacity: .6; }
        to   { transform: none; opacity: 1; }
    }
}

/* ---------------------------- Choix de l'année (choix_annee.php) ---------------------------- */
.liste-annees {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    max-height: 340px;
    overflow-y: auto;
}
.annee-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--giu-gris-300);
    border-radius: var(--giu-radius);
    background: var(--giu-blanc);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.annee-option:hover { border-color: var(--giu-rouge); }
.annee-option input {
    flex: none;
    width: 18px; height: 18px;
    accent-color: var(--giu-rouge);
}
.annee-option:has(input:checked) {
    border-color: var(--giu-rouge);
    background: #FFFCFC;
    box-shadow: 0 0 0 4px rgba(181,18,27,.10);
}
.annee-option:has(input:focus-visible) { outline: 2px solid var(--giu-rouge); outline-offset: 2px; }
.annee-lib { flex: 1; display: grid; gap: 2px; min-width: 0; }
.annee-titre {
    font-family: var(--giu-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--giu-noir);
    font-variant-numeric: lining-nums;
}
.annee-detail {
    font-size: var(--giu-fs-sm);
    color: var(--giu-gris-700);
    font-variant-numeric: tabular-nums;
}

.ligne-bas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.ligne-bas form { margin: 0; }
.ligne-bas a,
.lien-bouton {
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--giu-fs-sm);
    font-weight: 600;
    color: var(--giu-gris-700);
    text-decoration: none;
    cursor: pointer;
}
.ligne-bas a:hover,
.lien-bouton:hover { color: var(--giu-rouge); text-decoration: underline; }

/* ---------------------------- Installation PWA (index.php) ---------------------------- */
/* data-pwa est posé dans le <head> avant l'affichage : aucun clignotement. */
html:not([data-pwa="app"]) .vue-connexion { display: none; }
html[data-pwa="app"] .vue-installation { display: none; }

.atouts {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.atouts li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--giu-fs-sm);
    font-weight: 600;
    color: var(--giu-gris-900);
}
.atouts svg {
    flex: none;
    width: 34px; height: 34px;
    padding: 8px;
    border-radius: 10px;
    background: var(--giu-or-pale);
    fill: none; stroke: #7A5E17; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.btn-installer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 0;
    border-radius: var(--giu-radius-lg);
    background: linear-gradient(135deg, var(--giu-rouge) 0%, var(--giu-rouge-fonce) 100%);
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(181,18,27,.35), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-installer:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(181,18,27,.42), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-installer:active:not(:disabled) { transform: translateY(0); }
.btn-installer:focus-visible { outline: 3px solid var(--giu-or); outline-offset: 3px; }
.btn-installer:disabled { cursor: progress; filter: saturate(.55); opacity: .85; }
.btn-installer-icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--giu-or-clair), var(--giu-or));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-installer-icone svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--giu-noir); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.btn-installer-texte { display: grid; gap: 2px; }
.btn-installer-texte strong { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.btn-installer-texte small { font-size: var(--giu-fs-xs); font-weight: 600; opacity: .85; }

.etat-pwa {
    padding: 18px 20px;
    border-radius: var(--giu-radius);
    background: var(--giu-ivoire);
    border: 1px solid var(--giu-gris-100);
    display: grid;
    gap: 8px;
    font-size: var(--giu-fs-sm);
    color: var(--giu-gris-700);
}
.etat-pwa h3 { margin: 0; font-size: 1rem; color: var(--giu-noir); }
.etat-pwa p { margin: 0; }
.etat-pwa b { color: var(--giu-noir); }
.etat-pwa ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.etat-pwa .adresse {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--giu-blanc);
    border: 1px dashed var(--giu-gris-300);
    color: var(--giu-noir);
    word-break: break-all;
    user-select: all;
}
.etat-ok { background: var(--giu-vert-pale); border-color: #C3DFD1; }
.etat-ok h3 { color: var(--giu-vert); }

/* Page hors ligne */
.cadre-simple { grid-template-columns: 1fr; max-width: 480px; }
.logo-petit { display: block; width: 160px; height: auto; margin: 0 auto 20px; }