/* ==========================================================================
   Microlog GIU — Charte graphique (Gestion Informatisée de l'Université)
   A charger APRES mdb.min.css (Material Design for Bootstrap 5).
   Polices : Bodoni Moda (titres), Manrope (interface), IBM Plex Mono (données)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* --- Couleurs de marque --- */
    --giu-rouge:        #B5121B;  /* Rouge Toge : action principale, marque */
    --giu-rouge-fonce:  #8C0E15;  /* survol / pressé */
    --giu-rouge-pale:   #FBEAEB;  /* fonds d'alerte, sélection */
    --giu-noir:         #16130F;  /* Noir Encre : sidebar, titres */
    --giu-noir-2:       #26221D;  /* surfaces sombres secondaires */
    --giu-blanc:        #FFFFFF;
    --giu-ivoire:       #F7F5F0;  /* fond d'application */
    --giu-vert:         #0F6B45;  /* Vert Laurier : validé, admis, payé */
    --giu-vert-pale:    #E6F2EC;
    --giu-or:           #B8912F;  /* Or Sceau : distinction, premium, accents fins */
    --giu-or-clair:     #D9B95E;
    --giu-or-pale:      #F8F1DE;

    /* --- Neutres (gris chauds, biais vers l'or) --- */
    --giu-gris-900: #2B2721;
    --giu-gris-700: #57504A;
    --giu-gris-500: #8A8279;
    --giu-gris-300: #D6D0C6;
    --giu-gris-100: #EEEBE4;

    /* --- Sémantique --- */
    --giu-succes:  var(--giu-vert);
    --giu-danger:  var(--giu-rouge);
    --giu-alerte:  #C27A0E;
    --giu-info:    #2F5C8A;

    /* --- Typographie --- */
    --giu-font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --giu-font-ui:      'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --giu-font-mono:    'IBM Plex Mono', 'Consolas', ui-monospace, monospace;

    /* Echelle 1.250 (tierce majeure), base 15px */
    --giu-fs-xs:   0.75rem;   /* 12px  légendes, étiquettes */
    --giu-fs-sm:   0.8125rem; /* 13px  tableaux denses */
    --giu-fs-base: 0.9375rem; /* 15px  texte courant */
    --giu-fs-md:   1.125rem;  /* 18px  titres de carte */
    --giu-fs-lg:   1.5rem;    /* 24px  titres de section */
    --giu-fs-xl:   2rem;      /* 32px  titres de page */
    --giu-fs-2xl:  2.75rem;   /* 44px  chiffres clés */

    /* --- Formes & profondeur --- */
    --giu-radius-sm: 4px;
    --giu-radius:    8px;
    --giu-radius-lg: 14px;
    --giu-shadow-1: 0 1px 2px rgba(22,19,15,.06), 0 1px 3px rgba(22,19,15,.08);
    --giu-shadow-2: 0 4px 12px rgba(22,19,15,.08), 0 2px 4px rgba(22,19,15,.05);
    --giu-shadow-3: 0 18px 40px rgba(22,19,15,.14);
    --giu-filet-or: linear-gradient(90deg, transparent, var(--giu-or) 20%, var(--giu-or-clair) 50%, var(--giu-or) 80%, transparent);

    /* --- Surfaces (mode clair) --- */
    --giu-bg:       var(--giu-ivoire);
    --giu-surface:  var(--giu-blanc);
    --giu-texte:    var(--giu-noir);
    --giu-texte-2:  var(--giu-gris-700);
    --giu-bordure:  var(--giu-gris-300);

    /* --- Surcharge des variables MDB / Bootstrap 5 --- */
    --mdb-primary: #B5121B;   --mdb-primary-rgb: 181,18,27;
    --mdb-secondary: #16130F; --mdb-secondary-rgb: 22,19,15;
    --mdb-success: #0F6B45;   --mdb-success-rgb: 15,107,69;
    --mdb-danger: #B5121B;    --mdb-danger-rgb: 181,18,27;
    --mdb-warning: #C27A0E;   --mdb-warning-rgb: 194,122,14;
    --mdb-info: #2F5C8A;      --mdb-info-rgb: 47,92,138;
    --mdb-dark: #16130F;      --mdb-dark-rgb: 22,19,15;
    --mdb-body-font-family: var(--giu-font-ui);
    --mdb-body-font-size: var(--giu-fs-base);
    --mdb-body-color: var(--giu-texte);
    --mdb-body-bg: var(--giu-bg);
    --mdb-border-radius: var(--giu-radius);
    --mdb-link-color: var(--giu-rouge);
    --mdb-link-hover-color: var(--giu-rouge-fonce);
}

/* Mode sombre (activé par data-mdb-theme="dark" sur <html>) */
[data-mdb-theme="dark"] {
    --giu-bg:       #110F0C;
    --giu-surface:  #1C1915;
    --giu-texte:    #F2EEE6;
    --giu-texte-2:  #B3AB9F;
    --giu-bordure:  #35302A;
    --giu-rouge:    #E0404A;
    --giu-or:       #D9B95E;
    --giu-vert:     #3FA877;
    --mdb-body-bg: var(--giu-bg);
    --mdb-body-color: var(--giu-texte);
}

/* ---------------------------- Base ---------------------------- */
body {
    font-family: var(--giu-font-ui);
    font-size: var(--giu-fs-base);
    line-height: 1.6;
    color: var(--giu-texte);
    background: var(--giu-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, .giu-display {
    font-family: var(--giu-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-wrap: balance;
}
h3, h4, h5, h6 {
    font-family: var(--giu-font-ui);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-wrap: balance;
}
h1 { font-size: var(--giu-fs-xl); }
h2 { font-size: var(--giu-fs-lg); }
h3 { font-size: var(--giu-fs-md); }

.giu-eyebrow {
    font-size: var(--giu-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--giu-or);
}
.giu-mono, .giu-matricule, .giu-montant {
    font-family: var(--giu-font-mono);
    font-variant-numeric: tabular-nums;
}
.giu-montant { font-weight: 500; white-space: nowrap; }
.table td, .table th { font-variant-numeric: tabular-nums; }
.giu-filet { height: 1px; border: 0; background: var(--giu-filet-or); opacity: 1; }

/* ---------------------------- Boutons ---------------------------- */
.btn { font-family: var(--giu-font-ui); font-weight: 700; letter-spacing: .04em; border-radius: var(--giu-radius); }
.btn-primary { background: var(--giu-rouge); }
.btn-primary:hover, .btn-primary:focus { background: var(--giu-rouge-fonce); }
.btn-or {
    color: var(--giu-noir);
    background: linear-gradient(180deg, var(--giu-or-clair), var(--giu-or));
    box-shadow: var(--giu-shadow-1);
}
.btn-or:hover { color: var(--giu-noir); filter: brightness(1.05); }

/* ---------------------------- Cartes ---------------------------- */
.card { border: 1px solid var(--giu-bordure); border-radius: var(--giu-radius-lg); box-shadow: var(--giu-shadow-1); background: var(--giu-surface); }
.giu-card-prestige { border-top: 3px solid var(--giu-or); }

/* ---------------------------- Statuts ---------------------------- */
.giu-statut {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .2em .7em; border-radius: 999px;
    font-size: var(--giu-fs-xs); font-weight: 700; letter-spacing: .03em;
}
.giu-statut::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.giu-statut--ok      { color: var(--giu-vert);   background: var(--giu-vert-pale); }
.giu-statut--attente { color: var(--giu-alerte); background: #FBF0DC; }
.giu-statut--refus   { color: var(--giu-rouge);  background: var(--giu-rouge-pale); }
.giu-statut--mention { color: #7A5E17;           background: var(--giu-or-pale); }

/* ---------------------------- Sidebar ---------------------------- */
.giu-sidebar { background: var(--giu-noir); color: #EDE8DF; }
.giu-sidebar .nav-link { color: #BDB5A8; border-radius: var(--giu-radius); font-weight: 600; }
.giu-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.giu-sidebar .nav-link.active { color: #fff; background: var(--giu-rouge); box-shadow: inset 3px 0 0 var(--giu-or-clair); }

/* ---------------------------- Perte de connexion (assets/js/reseau.js) ---------------------------- */
.giu-hors-ligne {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: rgba(22,19,15,.55);
    -webkit-backdrop-filter: blur(6px) grayscale(.6);
    backdrop-filter: blur(6px) grayscale(.6);
    animation: giu-hl-fondu .25s ease both;
}
.giu-hors-ligne[hidden], .giu-en-ligne[hidden] { display: none; }
.giu-hors-ligne.giu-hl-sortie { animation: giu-hl-fondu .3s ease reverse both; }

.giu-hl-carte {
    width: 100%;
    max-width: 420px;
    padding: 36px 32px 28px;
    border-radius: 20px;
    text-align: center;
    color: #EDE8DF;
    background:
        radial-gradient(420px 220px at 50% -40px, rgba(181,18,27,.35), transparent 70%),
        var(--giu-noir);
    box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(217,185,94,.25);
    position: relative;
    overflow: hidden;
    animation: giu-hl-entree .4s cubic-bezier(.2,.8,.2,1) both;
}
.giu-hl-carte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--giu-or) 20%, var(--giu-or-clair) 50%, var(--giu-or) 80%, transparent);
}
.giu-hl-icone {
    position: relative;
    width: 76px; height: 76px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--giu-rouge);
    box-shadow: 0 10px 24px rgba(181,18,27,.45);
}
.giu-hl-icone::before, .giu-hl-icone::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--giu-rouge);
    animation: giu-hl-onde 2.4s ease-out infinite;
}
.giu-hl-icone::after { animation-delay: 1.2s; }
.giu-hl-icone svg {
    width: 36px; height: 36px;
    fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.giu-hl-surtitre {
    display: block;
    font-family: var(--giu-font-ui);
    font-size: var(--giu-fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--giu-or-clair);
}
.giu-hl-titre {
    margin: 8px 0 12px;
    font-family: var(--giu-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
}
.giu-hl-texte {
    margin: 0 auto 20px;
    max-width: 34ch;
    font-family: var(--giu-font-ui);
    font-size: var(--giu-fs-sm);
    line-height: 1.6;
    color: #BDB5A8;
}
.giu-hl-attente {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-family: var(--giu-font-ui);
    font-size: var(--giu-fs-xs);
    font-weight: 600;
    color: #D6D0C6;
}
.giu-hl-point {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--giu-or-clair);
    animation: giu-hl-clignote 1.2s ease-in-out infinite;
}
.giu-hl-bouton {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--giu-radius);
    font-family: var(--giu-font-ui);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--giu-noir);
    background: linear-gradient(180deg, var(--giu-or-clair), var(--giu-or));
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.giu-hl-bouton:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.giu-hl-bouton:disabled { cursor: progress; opacity: .75; }
.giu-hl-bouton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.giu-hl-secousse { animation: giu-hl-secousse .45s ease; }

/* Retour de la connexion */
.giu-en-ligne {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 2001;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 20px 12px 12px;
    border-radius: 999px;
    background: var(--giu-noir);
    color: #fff;
    font-family: var(--giu-font-ui);
    box-shadow: 0 14px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(63,168,119,.35);
    animation: giu-el-entree .35s cubic-bezier(.2,.8,.2,1) both;
}
.giu-en-ligne strong { display: block; font-size: .9rem; }
.giu-en-ligne small { display: block; font-size: var(--giu-fs-xs); color: #BDB5A8; }
.giu-el-icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--giu-vert);
}
.giu-el-icone svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@keyframes giu-hl-fondu   { from { opacity: 0; } to { opacity: 1; } }
@keyframes giu-hl-entree  { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes giu-hl-onde    { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@keyframes giu-hl-clignote { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes giu-hl-secousse { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes giu-el-entree  { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
    .giu-hors-ligne, .giu-hl-carte, .giu-en-ligne, .giu-hl-secousse { animation: none; }
    .giu-hl-icone::before, .giu-hl-icone::after, .giu-hl-point { animation: none; }
}

/* ---------- Impression sans adresse (reçus, listes) ----------
   Page imprimée SANS marge : Chrome / Edge n'ont plus de place pour leurs en-têtes et pieds de page
   (adresse, date, titre). Les marges sont recréées par une enveloppe <table class="impr-page"> :
   ses lignes .impr-marge (en-tête et pied) se répètent sur chaque page, la cellule centrale porte
   les marges latérales. À l'écran, l'enveloppe est neutre (display: contents).
   Balisage : <table class="impr-page" role="presentation">
                <thead><tr class="impr-marge"><td></td></tr></thead>
                <tfoot><tr class="impr-marge"><td></td></tr></tfoot>
                <tbody><tr><td> … contenu imprimé … </td></tr></tbody></table> */
.impr-page, .impr-page > thead, .impr-page > tbody, .impr-page > tfoot,
.impr-page > * > tr, .impr-page > * > tr > td { display: contents; }
.impr-page > * > .impr-marge { display: none; }
@media print {
    @page { margin: 0; }
    .impr-page { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
    .impr-page > thead { display: table-header-group; }
    .impr-page > tfoot { display: table-footer-group; }
    .impr-page > tbody { display: table-row-group; }
    .impr-page > * > tr { display: table-row; }
    .impr-page > * > tr > td { display: table-cell; padding: 0 10mm; vertical-align: top; }
    .impr-page > * > .impr-marge { display: table-row; }
    .impr-page > * > .impr-marge > td { height: 10mm; padding: 0; }
}