/* ==========================================================================
   Genealogie - feuille de style de l'interface.

   Posee par-dessus Bootstrap 5.3 : les gabarits existants continuent de
   fonctionner, ce fichier redefinit les variables --bs-* et ajoute la
   coquille applicative (barre laterale, barre superieure, contenu).

   Aucune dependance reseau pour les polices : celles du systeme suffisent,
   ce qui evite d'appeler un service tiers depuis un site familial.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de conception
   -------------------------------------------------------------------------- */

:root {
    /* Palette Parchemin - theme clair */
    --g-fond:            #F6F2EC;
    --g-fond-motif:      #EFE9E0;
    --g-surface:         #FFFFFF;
    --g-surface-2:       #FBF8F4;
    --g-surface-3:       #F2ECE3;
    --g-bordure:         #E3DACD;
    --g-bordure-forte:   #CFC2AF;
    --g-texte:           #2B2320;
    --g-texte-doux:      #6F6257;
    /* Assez sombre pour rester lisible : c'est la couleur des sur-titres, des
       légendes et des libellés de colonne, tous en petites capitales. */
    --g-texte-tenu:      #75675A;

    /* Accents */
    --g-vin:             #8A1538;
    --g-vin-clair:       #A8244A;
    --g-vin-sombre:      #6B0E2A;
    --g-vin-voile:       rgba(138, 21, 56, 0.08);
    /* Le laiton sert aussi de couleur de texte sur fond clair : il est donc
       plus sombre que le ton décoratif --g-laiton-clair de la barre latérale. */
    --g-laiton:          #7E5B1B;
    --g-laiton-clair:    #D6A961;
    --g-laiton-voile:    rgba(176, 131, 65, 0.14);
    --g-vert:            #2F6B4F;
    --g-vert-voile:      rgba(47, 107, 79, 0.10);
    --g-ambre:           #A56A12;
    --g-ambre-voile:     rgba(165, 106, 18, 0.12);
    --g-rouge:           #9E2B22;
    --g-rouge-voile:     rgba(158, 43, 34, 0.10);

    /* Barre laterale : sombre dans les deux themes, c'est son identite */
    --g-nav-fond:        #1E1715;
    --g-nav-fond-bas:    #15100F;
    --g-nav-texte:       #CFC3B6;
    --g-nav-texte-vif:   #F5EFE7;
    --g-nav-tenu:        #978877;
    --g-nav-survol:      rgba(255, 255, 255, 0.06);
    --g-nav-actif:       rgba(176, 131, 65, 0.18);
    --g-nav-separateur:  rgba(255, 255, 255, 0.08);

    /* Geometrie */
    --g-rayon:           14px;
    --g-rayon-s:         9px;
    --g-rayon-xs:        6px;
    --g-nav-largeur:     264px;
    --g-nav-largeur-min: 76px;
    --g-nav-courante:    var(--g-nav-largeur);
    --g-barre-hauteur:   64px;

    /* Ombres */
    --g-ombre-s:  0 1px 2px rgba(43, 35, 32, 0.05), 0 1px 3px rgba(43, 35, 32, 0.06);
    --g-ombre-m:  0 2px 4px rgba(43, 35, 32, 0.04), 0 6px 16px rgba(43, 35, 32, 0.08);
    --g-ombre-l:  0 4px 8px rgba(43, 35, 32, 0.05), 0 16px 40px rgba(43, 35, 32, 0.12);

    /* Typographie */
    --g-titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               "Hoefler Text", Georgia, "Times New Roman", serif;
    --g-corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
    --g-mono:  "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas,
               "Liberation Mono", monospace;

    --g-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Palette Encre - theme sombre */
[data-bs-theme="dark"] {
    --g-fond:            #15100F;
    --g-fond-motif:      #1B1513;
    --g-surface:         #1F1917;
    --g-surface-2:       #262020;
    --g-surface-3:       #2E2522;
    --g-bordure:         #362D29;
    --g-bordure-forte:   #4A3E38;
    --g-texte:           #EDE4D9;
    --g-texte-doux:      #A99A8C;
    --g-texte-tenu:      #96887A;

    --g-vin:             #D0607C;
    --g-vin-clair:       #E07B93;
    --g-vin-sombre:      #E8A0B2;
    --g-vin-voile:       rgba(208, 96, 124, 0.14);
    --g-laiton:          #D6A961;
    --g-laiton-clair:    #E6C286;
    --g-laiton-voile:    rgba(214, 169, 97, 0.16);
    --g-vert:            #63B18C;
    --g-vert-voile:      rgba(99, 177, 140, 0.14);
    --g-ambre:           #DCA33F;
    --g-ambre-voile:     rgba(220, 163, 63, 0.14);
    --g-rouge:           #E0685C;
    --g-rouge-voile:     rgba(224, 104, 92, 0.14);

    --g-nav-fond:        #1A1412;
    --g-nav-fond-bas:    #120E0D;

    --g-ombre-s:  0 1px 2px rgba(0, 0, 0, 0.4);
    --g-ombre-m:  0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
    --g-ombre-l:  0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   2. Raccordement a Bootstrap
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="dark"] {
    --bs-body-bg:           var(--g-fond);
    --bs-body-color:        var(--g-texte);
    --bs-body-font-family:  var(--g-corps);
    --bs-emphasis-color:    var(--g-texte);
    --bs-secondary-color:   var(--g-texte-doux);
    --bs-tertiary-color:    var(--g-texte-tenu);
    --bs-secondary-bg:      var(--g-surface-3);
    --bs-tertiary-bg:       var(--g-surface-2);
    --bs-border-color:      var(--g-bordure);
    --bs-border-radius:     var(--g-rayon-s);
    --bs-border-radius-sm:  var(--g-rayon-xs);
    --bs-border-radius-lg:  var(--g-rayon);
    --bs-link-color:        var(--g-vin);
    --bs-link-hover-color:  var(--g-vin-sombre);
    --bs-primary:           var(--g-vin);
    --bs-heading-color:     var(--g-texte);
    --bs-code-color:        var(--g-vin);
}

/* Les utilitaires .bg-*, .text-*, .border-* lisent les triplets --bs-*-rgb */
:root {
    --bs-primary-rgb:   138, 21, 56;
    --bs-secondary-rgb: 111, 98, 87;
    --bs-success-rgb:   47, 107, 79;
    --bs-danger-rgb:    158, 43, 34;
    --bs-warning-rgb:   165, 106, 18;
    --bs-info-rgb:      176, 131, 65;
    --bs-dark-rgb:      30, 23, 21;
    --bs-light-rgb:     246, 242, 236;
}
[data-bs-theme="dark"] {
    --bs-primary-rgb:   208, 96, 124;
    --bs-secondary-rgb: 169, 154, 140;
    --bs-success-rgb:   99, 177, 140;
    --bs-danger-rgb:    224, 104, 92;
    --bs-warning-rgb:   220, 163, 63;
    --bs-info-rgb:      214, 169, 97;
    --bs-dark-rgb:      26, 20, 18;
    --bs-light-rgb:     38, 32, 32;
}

/* --------------------------------------------------------------------------
   3. Bases
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--g-corps);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--g-texte);
    background-color: var(--g-fond);
    /* Grain discret facon papier, obtenu sans image */
    background-image:
        radial-gradient(circle at 12% 6%,  var(--g-fond-motif) 0%, transparent 45%),
        radial-gradient(circle at 90% 94%, var(--g-fond-motif) 0%, transparent 40%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .g-titre {
    font-family: var(--g-titre);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--g-texte);
}

h1 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.05rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem); }
h3 { font-size: 1.15rem; }
h5 { font-family: var(--g-titre); font-weight: 600; }

a { color: var(--g-vin); text-decoration: none; }
a:hover { color: var(--g-vin-sombre); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--g-laiton-voile); color: var(--g-texte); }

:focus-visible {
    outline: 2px solid var(--g-laiton);
    outline-offset: 2px;
    border-radius: var(--g-rayon-xs);
}

/* Barres de defilement discretes */
* { scrollbar-width: thin; scrollbar-color: var(--g-bordure-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--g-bordure-forte);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   4. Coquille applicative
   -------------------------------------------------------------------------- */

body[data-sidebar="collapsed"] { --g-nav-courante: var(--g-nav-largeur-min); }

.g-principal {
    margin-left: var(--g-nav-courante);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--g-transition);
}

.g-contenu {
    flex: 1;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 1.6rem clamp(1rem, 2.4vw, 2rem) 3rem;
}

/* Les gabarits historiques ouvrent tous un .container : neutralise sa largeur
   fixe pour que la mise en page soit gouvernee par .g-contenu. */
.g-contenu > .container,
.g-contenu > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.g-pied {
    padding: 1.5rem 2rem 2rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--g-texte-tenu);
    border-top: 1px solid var(--g-bordure);
}
.g-pied a { color: var(--g-texte-doux); }

/* --------------------------------------------------------------------------
   5. Barre laterale
   -------------------------------------------------------------------------- */

.g-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--g-nav-courante);
    display: flex;
    flex-direction: column;
    color: var(--g-nav-texte);
    background: linear-gradient(178deg, var(--g-nav-fond) 0%, var(--g-nav-fond-bas) 100%);
    border-right: 1px solid rgba(176, 131, 65, 0.22);
    transition: width var(--g-transition), transform var(--g-transition);
}

/* Marque */
.g-marque {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--g-barre-hauteur);
    padding: 0 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--g-nav-separateur);
    text-decoration: none;
}
.g-marque:hover { text-decoration: none; }

.g-blason {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    /* Laiton décoratif fixe : la barre latérale est sombre dans les deux thèmes,
       et --g-laiton sert de couleur de texte, donc trop foncé pour porter le
       monogramme. */
    background: linear-gradient(145deg, #E6C286, #B0803A);
    color: #241B12;
    font-family: var(--g-titre);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.g-marque-texte { min-width: 0; overflow: hidden; }
.g-marque-titre {
    display: block;
    font-family: var(--g-titre);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--g-nav-texte-vif);
    white-space: nowrap;
}
.g-marque-sous {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--g-nav-tenu);
    white-space: nowrap;
}

/* Bouton de creation rapide */
.g-lateral-action { padding: 0.9rem 0.7rem 0.2rem; flex-shrink: 0; }

.g-btn-nouveau {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.58rem 0.85rem;
    border: 1px solid rgba(176, 131, 65, 0.4);
    border-radius: var(--g-rayon-s);
    background: rgba(176, 131, 65, 0.12);
    color: var(--g-laiton-clair);
    font-family: var(--g-corps);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition),
                color var(--g-transition);
}
.g-btn-nouveau:hover {
    background: rgba(176, 131, 65, 0.22);
    border-color: var(--g-laiton);
    color: #FFF3DF;
}
.g-btn-nouveau > .bi:first-child { flex: 0 0 20px; font-size: 1rem; text-align: center; }
.g-btn-nouveau .g-chevron { margin-left: auto; font-size: 0.7rem; opacity: 0.7; }

/* Navigation */
.g-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.6rem 1rem;
}

.g-nav-intitule {
    padding: 1.05rem 0.9rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--g-nav-tenu);
    white-space: nowrap;
}
.g-nav-intitule-trait { display: none; }

.g-nav-liste { list-style: none; margin: 0; padding: 0; }

.g-nav-lien {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.58rem 0.85rem;
    margin-bottom: 2px;
    border: 0;
    border-radius: var(--g-rayon-s);
    background: transparent;
    color: var(--g-nav-texte);
    font-family: var(--g-corps);
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
}
.g-nav-lien:hover {
    background: var(--g-nav-survol);
    color: var(--g-nav-texte-vif);
    text-decoration: none;
}

.g-nav-lien > .bi:first-child {
    flex: 0 0 20px;
    font-size: 1.05rem;
    text-align: center;
    opacity: 0.85;
}

.g-nav-lien.est-actif {
    background: var(--g-nav-actif);
    color: var(--g-nav-texte-vif);
    font-weight: 600;
}
.g-nav-lien.est-actif::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--g-laiton-clair);
}
.g-nav-lien.est-actif > .bi:first-child { opacity: 1; color: var(--g-laiton-clair); }

.g-nav-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Groupe repliable */
.g-nav-groupe { position: relative; }
.g-nav-groupe .g-chevron {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.6;
    transition: transform var(--g-transition);
}
.g-nav-groupe.est-ouvert > .g-nav-lien .g-chevron { transform: rotate(90deg); }

.g-nav-sous {
    list-style: none;
    margin: 0.15rem 0 0.4rem;
    padding: 0 0 0 1.6rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--g-transition), opacity var(--g-transition);
}
.g-nav-groupe.est-ouvert > .g-nav-sous { max-height: 34rem; opacity: 1; }

.g-nav-sous > li { position: relative; }
.g-nav-sous > li::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--g-nav-separateur);
}

.g-nav-sous .g-nav-lien {
    padding: 0.38rem 0.75rem;
    font-size: 0.86rem;
    color: var(--g-nav-tenu);
}
.g-nav-sous .g-nav-lien:hover { color: var(--g-nav-texte-vif); }
.g-nav-sous .g-nav-lien.est-actif {
    background: transparent;
    color: var(--g-laiton-clair);
    font-weight: 600;
}
.g-nav-sous .g-nav-lien.est-actif::before {
    left: -0.55rem;
    top: 0;
    width: 1px;
    height: 100%;
    transform: none;
    border-radius: 0;
    background: var(--g-laiton-clair);
}

/* Pied de la barre laterale */
.g-lateral-pied {
    flex-shrink: 0;
    padding: 0.55rem;
    border-top: 1px solid var(--g-nav-separateur);
}

.g-compte {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: var(--g-rayon-s);
    background: transparent;
    color: var(--g-nav-texte);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--g-transition);
}
.g-compte:hover { background: var(--g-nav-survol); text-decoration: none; }

.g-pastille {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #A8244A, #6B0E2A);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.g-pastille.est-anonyme {
    background: rgba(255, 255, 255, 0.07);
    color: var(--g-nav-tenu);
    font-size: 1rem;
}

.g-compte-texte { min-width: 0; overflow: hidden; }
.g-compte-nom {
    display: block;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--g-nav-texte-vif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-compte-role {
    display: block;
    font-size: 0.7rem;
    color: var(--g-nav-tenu);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Barre laterale repliee
   -------------------------------------------------------------------------- */

body[data-sidebar="collapsed"] .g-marque { justify-content: center; padding: 0 0.5rem; }
body[data-sidebar="collapsed"] .g-marque-texte,
body[data-sidebar="collapsed"] .g-nav-libelle,
body[data-sidebar="collapsed"] .g-compte-texte,
body[data-sidebar="collapsed"] .g-nav-intitule,
body[data-sidebar="collapsed"] .g-btn-nouveau > span,
body[data-sidebar="collapsed"] .g-nav-groupe > .g-nav-lien .g-chevron { display: none; }

body[data-sidebar="collapsed"] .g-nav-intitule-trait {
    display: block;
    height: 1px;
    margin: 0.9rem 0.75rem 0.6rem;
    background: var(--g-nav-separateur);
}

body[data-sidebar="collapsed"] .g-nav-lien,
body[data-sidebar="collapsed"] .g-btn-nouveau,
body[data-sidebar="collapsed"] .g-compte {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

/* Le rabat lateral remplace le sous-menu deplie */
body[data-sidebar="collapsed"] .g-nav { overflow: visible; }
body[data-sidebar="collapsed"] .g-nav-sous {
    position: absolute;
    left: calc(100% + 10px);
    top: -0.4rem;
    z-index: 30;
    min-width: 226px;
    max-height: none;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid rgba(176, 131, 65, 0.25);
    border-radius: var(--g-rayon);
    background: var(--g-nav-fond);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
body[data-sidebar="collapsed"] .g-nav-groupe:hover > .g-nav-sous,
body[data-sidebar="collapsed"] .g-nav-groupe:focus-within > .g-nav-sous {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
body[data-sidebar="collapsed"] .g-nav-sous > li::before { display: none; }
body[data-sidebar="collapsed"] .g-nav-sous .g-nav-lien {
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
}
body[data-sidebar="collapsed"] .g-nav-sous .g-nav-libelle { display: block; }

/* Infobulle des entrees simples */
body[data-sidebar="collapsed"] [data-libelle]::after {
    content: attr(data-libelle);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 30;
    transform: translateY(-50%) translateX(-6px);
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(176, 131, 65, 0.25);
    border-radius: var(--g-rayon-xs);
    background: var(--g-nav-fond);
    color: var(--g-nav-texte-vif);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
body[data-sidebar="collapsed"] [data-libelle]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
body[data-sidebar="collapsed"] .g-nav-groupe > [data-libelle]::after { content: none; }

/* --------------------------------------------------------------------------
   7. Barre superieure
   -------------------------------------------------------------------------- */

.g-barre {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--g-barre-hauteur);
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    background: var(--g-fond); /* repli si color-mix() est inconnu */
    background: color-mix(in srgb, var(--g-fond) 82%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--g-bordure);
}

@supports not (backdrop-filter: blur(1px)) {
    .g-barre { background: var(--g-fond); }
}

.g-icone-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--g-rayon-s);
    background: transparent;
    color: var(--g-texte-doux);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition),
                border-color var(--g-transition);
}
.g-icone-btn:hover {
    background: var(--g-surface);
    border-color: var(--g-bordure);
    color: var(--g-texte);
}

.g-fil {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--g-texte-tenu);
}
.g-fil a { color: var(--g-texte-doux); }
.g-fil-courant {
    color: var(--g-texte);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-fil-sep { opacity: 0.5; }

.g-barre-espace { flex: 1 1 auto; }

/* Recherche globale : vise directement le filtre par nom des personnes */
.g-recherche { position: relative; flex: 0 1 300px; }
.g-recherche .bi {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-texte-tenu);
    font-size: 0.9rem;
    pointer-events: none;
}
.g-recherche input {
    width: 100%;
    height: 38px;
    padding: 0 0.75rem 0 2.1rem;
    border: 1px solid var(--g-bordure);
    border-radius: 999px;
    background: var(--g-surface);
    color: var(--g-texte);
    font-family: var(--g-corps);
    font-size: 0.87rem;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
}
.g-recherche input::placeholder { color: var(--g-texte-tenu); }
.g-recherche input:focus {
    outline: none;
    border-color: var(--g-laiton);
    box-shadow: 0 0 0 3px var(--g-laiton-voile);
}

/* --------------------------------------------------------------------------
   8. En-tete de page
   -------------------------------------------------------------------------- */

.g-page-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.g-page-tete-texte { flex: 1 1 320px; min-width: 0; }

.g-page-sur-titre {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--g-laiton);
}

.g-page-titre { margin: 0; }

.g-page-titre::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 0.6rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--g-laiton), transparent);
}

.g-page-intro {
    margin: 0.65rem 0 0;
    max-width: 62ch;
    color: var(--g-texte-doux);
}

.g-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   9. Surfaces
   -------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--g-surface);
    --bs-card-border-color: var(--g-bordure);
    --bs-card-border-radius: var(--g-rayon);
    --bs-card-inner-border-radius: calc(var(--g-rayon) - 1px);
    --bs-card-cap-bg: var(--g-surface-2);
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--g-ombre-s);
}
.card.shadow-sm { box-shadow: var(--g-ombre-s) !important; }
.card.shadow,
.card.shadow-lg { box-shadow: var(--g-ombre-m) !important; }

.card-header {
    font-family: var(--g-corps);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--g-texte-doux);
    border-bottom-color: var(--g-bordure);
}
.card-header h2, .card-header h3, .card-header strong { font-size: inherit; letter-spacing: inherit; }

/* Les gabarits historiques colorent des en-tetes en bloc : on les rend sobres. */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-dark {
    background: var(--g-surface-2) !important;
    color: var(--g-texte-doux) !important;
}
.card-header.bg-primary { border-bottom: 2px solid var(--g-vin); }
.card-header.bg-secondary { border-bottom: 2px solid var(--g-laiton); }

/* Colonne de lecture confortable pour les formulaires et les confirmations */
.g-etroit { max-width: 720px; }

/* Panneau : la surface de base hors composant Bootstrap */
.g-panneau {
    padding: 1.25rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface);
    box-shadow: var(--g-ombre-s);
}

.g-panneau-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: -1.25rem -1.25rem 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--g-bordure);
    background: var(--g-surface-2);
    border-radius: var(--g-rayon) var(--g-rayon) 0 0;
}
.g-panneau-titre {
    margin: 0;
    font-family: var(--g-corps);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--g-texte-doux);
}
.g-panneau-titre .bi { margin-right: 0.4rem; color: var(--g-laiton); }
.g-panneau-tete .g-panneau-appoint { margin-left: auto; font-size: 0.8rem; color: var(--g-texte-tenu); }
/* Le tableau vient affleurer les bords du panneau : il doit en epouser
   les coins arrondis, sinon il deborde de l'arrondi du bas. */
.g-panneau-corps-plein {
    margin: 0 -1.25rem -1.25rem;
    overflow: hidden;
    border-radius: 0 0 calc(var(--g-rayon) - 1px) calc(var(--g-rayon) - 1px);
}

/* Panneau etire : dernier d'une colonne en pile, il prend la hauteur laissee
   libre par la colonne voisine, son corps defilant absorbant le surplus. Le
   plafond garde une fenetre de lecture tenable quand c'est lui le plus haut. */
.g-panneau-etire {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(42rem, 70vh);
}

/* --------------------------------------------------------------------------
   10. Boutons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius: var(--g-rayon-s);
    --bs-btn-font-family: var(--g-corps);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.88rem;
    --bs-btn-padding-y: 0.48rem;
    --bs-btn-padding-x: 0.95rem;
    transition: background-color var(--g-transition), border-color var(--g-transition),
                color var(--g-transition), box-shadow var(--g-transition),
                transform 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-font-size: 0.8rem; --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.65rem; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: 0.65rem; --bs-btn-padding-x: 1.4rem; }

.btn-primary {
    --bs-btn-bg: var(--g-vin);
    --bs-btn-border-color: var(--g-vin);
    --bs-btn-hover-bg: var(--g-vin-sombre);
    --bs-btn-hover-border-color: var(--g-vin-sombre);
    --bs-btn-active-bg: var(--g-vin-sombre);
    --bs-btn-active-border-color: var(--g-vin-sombre);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--g-vin);
    --bs-btn-disabled-border-color: var(--g-vin);
    --bs-btn-disabled-color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #241014;
    --bs-btn-hover-color: #241014;
    --bs-btn-active-color: #241014;
    --bs-btn-disabled-color: #241014;
    --bs-btn-hover-bg: var(--g-vin-clair);
    --bs-btn-hover-border-color: var(--g-vin-clair);
}

.btn-success {
    --bs-btn-bg: var(--g-vert);
    --bs-btn-border-color: var(--g-vert);
    --bs-btn-hover-bg: #275A42;
    --bs-btn-hover-border-color: #275A42;
    --bs-btn-active-bg: #275A42;
    --bs-btn-active-border-color: #275A42;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-success {
    --bs-btn-color: #0E1F17;
    --bs-btn-hover-color: #0E1F17;
    --bs-btn-active-color: #0E1F17;
    --bs-btn-hover-bg: #79C29E;
    --bs-btn-hover-border-color: #79C29E;
}

.btn-danger {
    --bs-btn-bg: var(--g-rouge);
    --bs-btn-border-color: var(--g-rouge);
    --bs-btn-hover-bg: #85221A;
    --bs-btn-hover-border-color: #85221A;
    --bs-btn-active-bg: #85221A;
    --bs-btn-active-border-color: #85221A;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #24100E;
    --bs-btn-hover-color: #24100E;
    --bs-btn-active-color: #24100E;
    --bs-btn-hover-bg: #EC8377;
    --bs-btn-hover-border-color: #EC8377;
}

.btn-warning {
    --bs-btn-bg: var(--g-ambre);
    --bs-btn-border-color: var(--g-ambre);
    --bs-btn-hover-bg: #8C5A0F;
    --bs-btn-hover-border-color: #8C5A0F;
    --bs-btn-active-bg: #8C5A0F;
    --bs-btn-active-border-color: #8C5A0F;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: #221806;
    --bs-btn-hover-color: #221806;
    --bs-btn-active-color: #221806;
    --bs-btn-hover-bg: #E8B75E;
    --bs-btn-hover-border-color: #E8B75E;
}

.btn-secondary {
    --bs-btn-bg: var(--g-surface);
    --bs-btn-border-color: var(--g-bordure-forte);
    --bs-btn-color: var(--g-texte-doux);
    --bs-btn-hover-bg: var(--g-surface-3);
    --bs-btn-hover-border-color: var(--g-bordure-forte);
    --bs-btn-hover-color: var(--g-texte);
    --bs-btn-active-bg: var(--g-surface-3);
    --bs-btn-active-border-color: var(--g-bordure-forte);
    --bs-btn-active-color: var(--g-texte);
}

.btn-outline-primary {
    --bs-btn-color: var(--g-vin);
    --bs-btn-border-color: var(--g-vin);
    --bs-btn-hover-bg: var(--g-vin);
    --bs-btn-hover-border-color: var(--g-vin);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: var(--g-vin);
    --bs-btn-active-border-color: var(--g-vin);
    --bs-btn-active-color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-hover-color: #241014;
    --bs-btn-active-color: #241014;
}

/* Bouton discret, utile dans les tableaux */
.g-btn-fantome {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--g-rayon-xs);
    background: transparent;
    color: var(--g-texte-tenu);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background var(--g-transition), color var(--g-transition),
                border-color var(--g-transition);
}
.g-btn-fantome:hover {
    background: var(--g-surface-3);
    border-color: var(--g-bordure);
    color: var(--g-texte);
    text-decoration: none;
}
.g-btn-fantome.est-danger:hover {
    background: var(--g-rouge-voile);
    border-color: var(--g-rouge);
    color: var(--g-rouge);
}
.g-btn-fantome.est-modif:hover {
    background: var(--g-ambre-voile);
    border-color: var(--g-ambre);
    color: var(--g-ambre);
}

.g-actions-ligne { display: flex; gap: 0.25rem; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   11. Tableaux
   -------------------------------------------------------------------------- */

.g-tableau-cadre {
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface);
    box-shadow: var(--g-ombre-s);
    overflow: hidden;
}
.g-tableau-defile { overflow-x: auto; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--g-texte);
    --bs-table-border-color: var(--g-bordure);
    --bs-table-striped-bg: var(--g-surface-2);
    --bs-table-striped-color: var(--g-texte);
    --bs-table-hover-bg: var(--g-laiton-voile);
    --bs-table-hover-color: var(--g-texte);
    margin-bottom: 0;
    font-size: 0.88rem;
    vertical-align: middle;
}

.table > thead {
    --bs-table-bg: var(--g-surface-2);
    --bs-table-color: var(--g-texte-doux);
}
.table > thead th {
    padding: 0.7rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--g-texte-doux);
    background: var(--g-surface-2);
    border-bottom: 1px solid var(--g-bordure);
    white-space: nowrap;
}
.table > tbody td { padding: 0.65rem 0.85rem; border-color: var(--g-bordure); }
.table > tbody tr:last-child td { border-bottom: 0; }

/* Les variantes colorees des gabarits historiques rejoignent la teinte unique */
.table-dark, .table-primary, .thead-dark {
    --bs-table-bg: var(--g-surface-2);
    --bs-table-color: var(--g-texte-doux);
    --bs-table-border-color: var(--g-bordure);
}
.table-dark th, .table-primary th, .thead-dark th {
    background: var(--g-surface-2) !important;
    color: var(--g-texte-doux) !important;
}

.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }

.g-cellule-vide { color: var(--g-texte-tenu); }

/* --------------------------------------------------------------------------
   12. Formulaires
   -------------------------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="url"],
select,
textarea {
    border-radius: var(--g-rayon-s);
    border: 1px solid var(--g-bordure);
    background-color: var(--g-surface);
    color: var(--g-texte);
    font-family: var(--g-corps);
    font-size: 0.88rem;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--g-laiton);
    box-shadow: 0 0 0 3px var(--g-laiton-voile);
    background-color: var(--g-surface);
    color: var(--g-texte);
    outline: none;
}
.form-control::placeholder { color: var(--g-texte-tenu); }
.form-label,
label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--g-texte-doux);
}

/* Les formulaires Django rendus par form.as_p tiennent dans une grille */
.g-formulaire p {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}
.g-formulaire p > label { margin: 0; }
.g-formulaire p > input,
.g-formulaire p > select,
.g-formulaire p > textarea { width: 100%; padding: 0.48rem 0.7rem; }
.g-formulaire p > input[type="checkbox"] { width: auto; }
.g-formulaire .helptext {
    font-size: 0.76rem;
    color: var(--g-texte-tenu);
}
.g-formulaire ul.errorlist {
    margin: 0 0 0.35rem;
    padding: 0;
    list-style: none;
    color: var(--g-rouge);
    font-size: 0.78rem;
}

@media (min-width: 768px) {
    .g-formulaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
    .g-formulaire-grille p.g-champ-large { grid-column: 1 / -1; }
}

.g-formulaire-pied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--g-bordure);
}

/* Tableau de formset : les widgets bruts de Django doivent rester lisibles */
.g-formset td { padding: 0.4rem 0.5rem; }
.g-formset select,
.g-formset textarea,
.g-formset input[type="text"],
.g-formset input[type="number"] {
    min-width: 110px;
    padding: 0.3rem 0.5rem;
    font-size: 0.83rem;
}
.g-formset .g-col-age input { min-width: 64px; width: 72px; }
.g-formset .g-col-etroit { text-align: center; }
input[type="checkbox"] { accent-color: var(--g-vin); }
.g-formset input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.g-formset tr.est-supprimee { background: var(--g-rouge-voile); }

/* Barre d'actions collée au bas de la fenêtre sur les pages d'édition longues */
.g-barre-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface); /* repli si color-mix() est inconnu */
    background: color-mix(in srgb, var(--g-surface) 94%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    box-shadow: var(--g-ombre-m);
}
@supports not (backdrop-filter: blur(1px)) {
    .g-barre-actions { background: var(--g-surface); }
}

/* Barre de filtres */
.g-filtres {
    padding: 1rem 1.15rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface);
    box-shadow: var(--g-ombre-s);
    margin-bottom: 1.25rem;
}
.g-filtres-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}
.g-filtre-champ { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.g-filtre-champ > label { margin: 0; }
.g-filtre-champ input,
.g-filtre-champ select { width: 100%; padding: 0.42rem 0.65rem; }
.g-filtre-intervalle { display: flex; align-items: center; gap: 0.4rem; }
.g-filtre-intervalle input { min-width: 0; }
.g-filtre-intervalle span { color: var(--g-texte-tenu); font-size: 0.8rem; }
.g-filtres-pied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--g-bordure);
}

/* --------------------------------------------------------------------------
   13. Composants
   -------------------------------------------------------------------------- */

/* Etiquette de comptage */
.g-decompte {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--g-bordure);
    border-radius: 999px;
    background: var(--g-surface-2);
    font-size: 0.78rem;
    color: var(--g-texte-doux);
}
.g-decompte strong { color: var(--g-texte); font-variant-numeric: tabular-nums; }

/* Jeton */
.g-jeton {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.g-jeton .bi { font-size: 0.8em; }
.g-jeton-neutre { background: var(--g-surface-3); color: var(--g-texte-doux); }
.g-jeton-vin    { background: var(--g-vin-voile);    color: var(--g-vin); }
.g-jeton-laiton { background: var(--g-laiton-voile); color: var(--g-laiton); }
.g-jeton-vert   { background: var(--g-vert-voile);   color: var(--g-vert); }
.g-jeton-ambre  { background: var(--g-ambre-voile);  color: var(--g-ambre); }
.g-jeton-rouge  { background: var(--g-rouge-voile);  color: var(--g-rouge); }

/* Etat vide */
.g-vide {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--g-texte-tenu);
}
.g-vide .bi {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.9rem;
    opacity: 0.45;
}
.g-vide-titre {
    font-family: var(--g-titre);
    font-size: 1.05rem;
    color: var(--g-texte-doux);
    margin-bottom: 0.2rem;
}
.g-vide p { margin: 0; font-size: 0.87rem; }

/* Paire etiquette / valeur */
.g-champs { display: grid; gap: 0.7rem; }
.g-champ { display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem; align-items: baseline; }
.g-champ-cle {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--g-texte-tenu);
}
.g-champ-val { min-width: 0; color: var(--g-texte); }
.g-champ-val.est-vide { color: var(--g-texte-tenu); font-style: italic; }
@media (max-width: 575.98px) {
    .g-champ { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Tuile statistique */
.g-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem;
}
.g-tuile {
    padding: 1rem 1.1rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface);
    box-shadow: var(--g-ombre-s);
}
.g-tuile-cle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--g-texte-tenu);
}
.g-tuile-cle .bi { color: var(--g-laiton); }
.g-tuile-val {
    margin-top: 0.35rem;
    font-family: var(--g-titre);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--g-texte);
    font-variant-numeric: tabular-nums;
}

/* Variante en rangee : le libelle a gauche, le nombre a droite. Empilee, elle
   tient dans la hauteur d'une image sans imposer sa propre bande. */
.g-tuile.est-rangee {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.42rem 0.85rem;
}
.g-tuile.est-rangee .g-tuile-cle { flex: 1; min-width: 0; }
.g-tuile.est-rangee .g-tuile-val { margin-top: 0; font-size: 1.3rem; }

/* Carte cliquable */
.g-carte-lien {
    display: block;
    padding: 1.25rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon);
    background: var(--g-surface);
    box-shadow: var(--g-ombre-s);
    color: inherit;
    text-decoration: none;
    transition: transform var(--g-transition), box-shadow var(--g-transition),
                border-color var(--g-transition);
}
.g-carte-lien:hover {
    transform: translateY(-3px);
    box-shadow: var(--g-ombre-m);
    border-color: var(--g-bordure-forte);
    color: inherit;
    text-decoration: none;
}
.g-carte-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background: var(--g-vin-voile);
    color: var(--g-vin);
    font-size: 1.15rem;
}
.g-carte-icone.est-laiton { background: var(--g-laiton-voile); color: var(--g-laiton); }
.g-carte-titre { margin: 0 0 0.3rem; font-size: 1.1rem; }
.g-carte-texte { margin: 0; font-size: 0.87rem; color: var(--g-texte-doux); }
.g-carte-fleche {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--g-vin);
}
.g-carte-lien:hover .g-carte-fleche .bi { transform: translateX(3px); }
.g-carte-fleche .bi { transition: transform var(--g-transition); }

/* Variante horizontale : deux fois moins haute, pour les pages ou la carte
   n'est qu'un point d'entree parmi d'autres. */
.g-carte-lien.est-compacte {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
}
.g-carte-lien.est-compacte .g-carte-icone { flex: 0 0 42px; margin-bottom: 0; }
.g-carte-lien.est-compacte .g-carte-titre { font-size: 1.02rem; }
.g-carte-lien.est-compacte .g-carte-texte { font-size: 0.84rem; }
.g-carte-lien.est-compacte .g-carte-fleche { margin-top: 0; margin-left: auto; font-size: 1rem; }

/* Portrait rond */
.g-portrait {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-surface);
    box-shadow: 0 0 0 1px var(--g-bordure), var(--g-ombre-s);
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.g-aieul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 0.5rem;
    border-radius: var(--g-rayon);
    text-decoration: none;
    color: inherit;
    transition: background var(--g-transition);
}
.g-aieul:hover { background: var(--g-surface); text-decoration: none; color: inherit; }
.g-aieul:hover .g-portrait { transform: scale(1.05); box-shadow: 0 0 0 2px var(--g-laiton), var(--g-ombre-m); }
.g-aieul-nom { font-family: var(--g-titre); font-size: 0.95rem; font-weight: 600; text-align: center; }
.g-aieul-lien { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g-texte-tenu); }

/* Fil chronologique */
.g-fil-temps { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }
.g-fil-temps::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--g-bordure);
}
.g-fil-temps > li { position: relative; padding: 0 0 1rem; }
.g-fil-temps > li::before {
    content: "";
    position: absolute;
    left: -1.4rem;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--g-surface);
    border: 2px solid var(--g-laiton);
}
.g-fil-temps > li:last-child { padding-bottom: 0; }
.g-fil-temps-date {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--g-texte-tenu);
}
.g-fil-temps-titre { font-weight: 600; }
.g-fil-temps-note { font-size: 0.85rem; color: var(--g-texte-doux); }

/* Galerie de vignettes */
.g-galerie { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.g-galerie a {
    display: block;
    border-radius: var(--g-rayon-s);
    overflow: hidden;
    border: 1px solid var(--g-bordure);
    box-shadow: var(--g-ombre-s);
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.g-galerie a:hover { transform: translateY(-2px); box-shadow: var(--g-ombre-m); }
.g-galerie img { display: block; height: 130px; width: auto; object-fit: cover; }

/* Message applicatif */
.alert {
    --bs-alert-border-radius: var(--g-rayon);
    border-width: 1px;
    font-size: 0.88rem;
}
.alert-success { background: var(--g-vert-voile);  border-color: var(--g-vert);  color: var(--g-vert); }
.alert-danger  { background: var(--g-rouge-voile); border-color: var(--g-rouge); color: var(--g-rouge); }
.alert-warning { background: var(--g-ambre-voile); border-color: var(--g-ambre); color: var(--g-ambre); }
.alert-info    { background: var(--g-laiton-voile); border-color: var(--g-laiton); color: var(--g-laiton); }

/* Menu deroulant Bootstrap */
.dropdown-menu {
    --bs-dropdown-bg: var(--g-surface);
    --bs-dropdown-border-color: var(--g-bordure);
    --bs-dropdown-border-radius: var(--g-rayon);
    --bs-dropdown-link-color: var(--g-texte);
    --bs-dropdown-link-hover-bg: var(--g-surface-3);
    --bs-dropdown-link-hover-color: var(--g-texte);
    --bs-dropdown-link-active-bg: var(--g-vin-voile);
    --bs-dropdown-link-active-color: var(--g-vin);
    --bs-dropdown-header-color: var(--g-texte-tenu);
    --bs-dropdown-padding-y: 0.35rem;
    --bs-dropdown-item-padding-y: 0.45rem;
    box-shadow: var(--g-ombre-l);
    font-size: 0.88rem;
}
.dropdown-item { border-radius: var(--g-rayon-xs); }
.dropdown-menu .dropdown-item .bi { width: 1.1rem; margin-right: 0.4rem; color: var(--g-texte-tenu); }
.dropdown-header {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

/* Saisie de la transcription : chasse fixe, l'acte se recopie ligne à ligne */
.g-transcription-saisie {
    font-family: var(--g-mono);
    font-size: 0.85rem;
    line-height: 1.7;
}

/* Transcription : la hauteur lui vient du panneau qui la porte, cf. .g-panneau-etire */
.g-transcription {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon-s);
    background: var(--g-surface-2);
    font-family: var(--g-titre);
    font-size: 0.95rem;
    line-height: 1.75;
    white-space: pre-wrap;
}

/* Atelier de transcription
   -------------------------------------------------------------------------- */

/* La page tient dans l'ecran : ce sont le document et la saisie qui defilent,
   chacun de son cote, jamais la page. Sans quoi on perdrait de vue l'acte des
   qu'on descend dans le texte, ce qui est precisement l'inverse du but. */
body.g-atelier { overflow: hidden; }
body.g-atelier .g-principal { height: 100vh; height: 100dvh; }
body.g-atelier .g-contenu {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 1rem;
}
body.g-atelier .g-page-tete { margin-bottom: 1rem; }
body.g-atelier .g-pied { display: none; }

.g-atelier-forme {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.g-atelier-grille {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}
.g-atelier-grille > .g-panneau {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Outils de l'en-tete : zoom a gauche, navigation de page a droite */
.g-atelier-outils {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.g-atelier-outils .g-icone-btn { width: 32px; height: 32px; font-size: 0.95rem; }
.g-atelier-sep {
    width: 1px;
    height: 20px;
    margin: 0 0.4rem;
    background: var(--g-bordure);
}
.g-atelier-compteur {
    min-width: 6.5rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--g-texte-tenu);
    font-variant-numeric: tabular-nums;
}

/* Toutes les pages dans un seul defilement : on lit d'une traite, les boutons
   ne faisant que sauter d'une page a l'autre. `position: relative` est requis
   par le script, qui compare offsetTop et scrollTop pour savoir ou l'on est. */
.g-atelier-pages {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0 -1.25rem -1.25rem;
    padding: 1.25rem;
    background: var(--g-surface-2);
    scroll-behavior: smooth;
}
.g-atelier-page { margin: 0 0 1.75rem; scroll-margin-top: 1.25rem; }
.g-atelier-page:last-child { margin-bottom: 0; }
.g-atelier-page img {
    display: block;
    width: var(--g-atelier-zoom, 100%);
    max-width: none;
    border: 1px solid var(--g-bordure);
    border-radius: var(--g-rayon-s);
    background: #FFFFFF;
    box-shadow: var(--g-ombre-s);
}
.g-atelier-page figcaption {
    margin-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--g-texte-tenu);
}

/* La saisie occupe tout le panneau : elle ne se redimensionne pas a la main,
   c'est la fenetre qui donne sa hauteur. */
.g-atelier-saisie {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0.7rem 0.85rem;
    resize: none;
}

/* Sous 992px les deux colonnes ne tiennent plus cote a cote : on repasse en
   page qui defile normalement, chaque volet gardant une hauteur utile. */
@media (max-width: 991.98px) {
    body.g-atelier { overflow: visible; }
    body.g-atelier .g-principal { height: auto; min-height: 100vh; }
    .g-atelier-grille { grid-template-columns: minmax(0, 1fr); }
    .g-atelier-pages { max-height: 65vh; }
    .g-atelier-saisie { min-height: 55vh; }
}

/* --------------------------------------------------------------------------
   14. Adaptation aux petits ecrans
   -------------------------------------------------------------------------- */

.g-voile {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(20, 15, 14, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--g-transition), visibility var(--g-transition);
}

@media (max-width: 991.98px) {
    .g-lateral {
        width: var(--g-nav-largeur);
        transform: translateX(-100%);
        box-shadow: none;
    }
    body[data-sidebar="collapsed"] .g-lateral { width: var(--g-nav-largeur); }
    body[data-drawer="open"] .g-lateral { transform: translateX(0); box-shadow: var(--g-ombre-l); }
    body[data-drawer="open"] .g-voile { opacity: 1; visibility: visible; }
    body[data-drawer="open"] { overflow: hidden; }

    .g-principal { margin-left: 0; }

    /* Sur mobile le tiroir est toujours deplie : on annule l'etat replie */
    body[data-sidebar="collapsed"] .g-marque-texte,
    body[data-sidebar="collapsed"] .g-nav-libelle,
    body[data-sidebar="collapsed"] .g-compte-texte,
    body[data-sidebar="collapsed"] .g-nav-intitule,
    body[data-sidebar="collapsed"] .g-btn-nouveau > span,
    body[data-sidebar="collapsed"] .g-nav-groupe > .g-nav-lien .g-chevron { display: revert; }
    body[data-sidebar="collapsed"] .g-nav-intitule-trait { display: none; }
    body[data-sidebar="collapsed"] .g-marque { justify-content: flex-start; padding: 0 1rem; }
    body[data-sidebar="collapsed"] .g-nav-lien,
    body[data-sidebar="collapsed"] .g-btn-nouveau,
    body[data-sidebar="collapsed"] .g-compte {
        justify-content: flex-start;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        gap: 0.85rem;
    }
    body[data-sidebar="collapsed"] .g-nav { overflow-y: auto; overflow-x: hidden; }
    body[data-sidebar="collapsed"] .g-nav-sous {
        position: static;
        min-width: 0;
        padding: 0 0 0 1.6rem;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        visibility: visible;
        max-height: 0;
        transform: none;
    }
    body[data-sidebar="collapsed"] .g-nav-groupe.est-ouvert > .g-nav-sous { max-height: 34rem; opacity: 1; }
    body[data-sidebar="collapsed"] .g-nav-sous > li::before { display: block; }
    body[data-sidebar="collapsed"] [data-libelle]::after { content: none; }

    .g-recherche { flex-basis: 190px; }
}

@media (max-width: 575.98px) {
    .g-recherche { display: none; }
    .g-contenu { padding-top: 1.15rem; }
    .g-page-tete { gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   15. Preferences et impression
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

@media print {
    .g-lateral, .g-barre, .g-voile, .g-page-actions, .g-filtres, .g-actions-ligne { display: none !important; }
    .g-principal { margin-left: 0; }
    body { background: #FFFFFF; }
    .card, .g-panneau, .g-tableau-cadre { box-shadow: none; border-color: #CCCCCC; }
}