/*!
 * Facturation IR2F — Ligue de Football des Pays de la Loire
 * Charte graphique LFPL, alignée sur l'application « Déclaration LFPL »
 * (public/css/charte-lfpl.css de lfpldeclaration) : mêmes couleurs (§ 03),
 * mêmes typographies (§ 02), mêmes motifs (§ 04), mêmes composants.
 *
 * Différence d'implémentation assumée : cette application n'embarque pas
 * Bootstrap. Les composants sont donc réécrits en CSS natif plutôt que posés
 * par-dessus une feuille tierce. Le rendu visé est identique.
 *
 * Aucune couleur en dur hors du bloc :root.
 */

/* ==========================================================================
   1. POLICES DE LA CHARTE — auto-hébergées
   Anton pour les titres, Heebo pour le texte (§ 02). Aucune requête vers
   Google : les fichiers sont dans public/fonts/.
   ========================================================================== */

@font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/heebo-latin-400-normal.woff2') format('woff2'),
         url('../fonts/heebo-latin-400-normal.woff') format('woff');
}
@font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/heebo-latin-500-normal.woff2') format('woff2'),
         url('../fonts/heebo-latin-500-normal.woff') format('woff');
}
@font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/heebo-latin-700-normal.woff2') format('woff2'),
         url('../fonts/heebo-latin-700-normal.woff') format('woff');
}
@font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 900; font-display: swap;
    src: url('../fonts/heebo-latin-900-normal.woff2') format('woff2'),
         url('../fonts/heebo-latin-900-normal.woff') format('woff');
}
@font-face {
    font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/anton-latin-400-normal.woff2') format('woff2'),
         url('../fonts/anton-latin-400-normal.woff') format('woff');
}

/* ==========================================================================
   2. JETONS — les sept couleurs de la charte, § 03
   ========================================================================== */

:root {
    --lfpl-marine:       #2D427B;  /* Bleu foncé — 9,1:1 sur blanc */
    --lfpl-bleu:         #325491;  /* Bleu       — 7,5:1 sur blanc */
    --lfpl-bleu-clair:   #416EA9;  /* Bleu       — 5,2:1, blanc dessus */
    --lfpl-bleu-vif:     #5271FF;  /* Accents et anneau de focus uniquement */
    --lfpl-bleu-nuit:    #1B2A4E;
    --lfpl-rouge:        #D8171C;
    --lfpl-rouge-survol: #B01115;
    --lfpl-or:           #C19A2A;  /* Filets et bordures uniquement */
    --lfpl-blanc:        #FFFFFF;

    /* Dérivés : le doré de la charte ne passe pas AA en texte (2,9:1). */
    --lfpl-or-encre:     #7A5F13;  /* 5,4:1 sur blanc */
    --lfpl-or-voile:     #FBF4E2;
    --lfpl-marine-voile: #EDF0F7;

    /* Encres et surfaces */
    --encre:        #172033;
    --encre-2:      #3A4457;
    --encre-3:      #4A5567;
    --bordure:      #DDE3EC;
    --bordure-2:    #E7EBF3;
    --fond:         #F4F6FA;
    --craie:        #F7F9FD;
    --blanc:        var(--lfpl-blanc);

    /* États */
    --succes:        #1B7F4B;
    --succes-voile:  #E6F4EC;
    --alerte:        #7A5F13;
    --alerte-voile:  var(--lfpl-or-voile);
    --danger:        var(--lfpl-rouge);
    --danger-encre:  #8A1013;
    --danger-voile:  #FCEBEB;

    /* Typographies */
    --font-titre: 'Anton', 'Heebo', 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-texte: 'Heebo', 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Rythme — repris de charte-lfpl.css */
    --radius:       12px;
    --radius-s:     8px;
    --radius-carte: 14px;

    --ombre:      0 1px 2px rgba(16, 28, 51, .06), 0 6px 16px -8px rgba(16, 28, 51, .14);
    --ombre-carte:0 18px 42px -32px rgba(16, 28, 51, .45);
    --ombre-haute:0 24px 60px rgba(16, 28, 51, .28);

    --champ-min: 46px;
    --touch-min: 44px;

    /* Hachures diagonales et triangle : les deux motifs récurrents du § 04. */
    --lfpl-hachures: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .10) 0 1px,
        transparent 1px 9px);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-texte);
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background-color: var(--fond);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lfpl-bleu); color: var(--lfpl-blanc); }

/* La charte réserve Anton aux titres : une seule graisse, pas de bas de casse
   dessiné pour du texte courant. Capitales uniquement, Heebo partout ailleurs. */
h1, h2, h3, .lfpl-titre {
    font-family: var(--font-titre);
    font-weight: 400;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--lfpl-marine);
    margin: 0 0 .5em;
    line-height: 1.12;
}

h1 { font-size: 2.1rem; line-height: 1.04; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

h4, h5 {
    font-family: var(--font-texte);
    font-weight: 700;
    font-size: 1rem;
    color: var(--encre);
    margin: 0 0 .4em;
}

p { margin: 0 0 1rem; }

a { color: var(--lfpl-bleu-clair); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--lfpl-marine); }

small, .text-small { font-size: .875rem; }
.text-muted { color: var(--encre-3); }
.text-danger { color: var(--lfpl-rouge); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.fw-700 { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--bordure); margin: 2rem 0; }

/* Surtitre : Heebo 900 très espacé, comme les mentions du § 02. */
.lfpl-surtitre {
    font-family: var(--font-texte);
    font-weight: 900;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--lfpl-bleu);
}

/* Le triangle « play » rouge du § 04, en marqueur devant les titres de bloc. */
.lfpl-jalon {
    display: inline-block;
    width: 11px;
    height: 13px;
    margin-right: 10px;
    background: var(--lfpl-rouge);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    flex: none;
}

/* Anneau de focus visible sur les deux fonds. */
:focus-visible {
    outline: 3px solid var(--lfpl-bleu-vif);
    outline-offset: 2px;
    border-radius: 3px;
}
.lfpl-bandeau :focus-visible,
.sidebar :focus-visible,
.lfpl-connexion-visuel :focus-visible { outline-color: var(--lfpl-blanc); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    background: var(--blanc);
    color: var(--lfpl-marine);
    padding: .75rem 1.25rem;
    font-weight: 700;
    border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   4. STRUCTURE
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}
.container--narrow { max-width: 820px; margin-inline: auto; }

.page { flex: 1 0 auto; padding: 2rem 0 3.5rem; }

/* Le bouton d'ouverture du menu flotte en haut à gauche : dès que les marges
   de la page ne suffisent plus à l'accueillir, on décale le contenu. */
@media (max-width: 1330px) {
    .page { padding-top: 5.25rem; }
}

/* ==========================================================================
   5. BANDEAU DE TITRE — § 04
   Aplat marine, hachures diagonales, amorces triangulaires en angle, et le
   filet bleu / rouge qui ferme les pages de la charte.
   ========================================================================== */

.lfpl-bandeau {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--lfpl-marine) 0%, var(--lfpl-bleu) 62%, var(--lfpl-bleu-clair) 100%);
    color: var(--lfpl-blanc);
    padding: 30px 32px 34px;
    margin-bottom: 30px;
    border-radius: 18px;
    box-shadow: 0 18px 42px -28px rgba(16, 28, 51, .7);
}

.lfpl-bandeau::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lfpl-hachures);
    pointer-events: none;
}

/* Filet de pied : bleu puis rouge, repris de la couverture de la charte. */
.lfpl-bandeau::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg,
                var(--lfpl-bleu-clair) 0 62%,
                var(--lfpl-rouge) 62% 100%);
}

/* Éclats triangulaires du § 04, posés en angle. Purement décoratifs. */
.lfpl-eclats {
    position: absolute;
    top: -18px;
    right: -10px;
    width: 260px;
    height: 150px;
    pointer-events: none;
    opacity: .9;
}
.lfpl-eclats span {
    position: absolute;
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lfpl-eclats span:nth-child(1) { width: 74px; height: 74px; top: 30px;  right: 96px;  background: rgba(255, 255, 255, .13); transform: rotate(-14deg); }
.lfpl-eclats span:nth-child(2) { width: 48px; height: 48px; top: 74px;  right: 44px;  background: var(--lfpl-rouge); opacity: .82; transform: rotate(9deg); }
.lfpl-eclats span:nth-child(3) { width: 96px; height: 96px; top: 6px;   right: 8px;   background: rgba(82, 113, 255, .30); transform: rotate(-4deg); }
.lfpl-eclats span:nth-child(4) { width: 34px; height: 34px; top: 104px; right: 138px; background: rgba(255, 255, 255, .20); transform: rotate(24deg); }

.lfpl-bandeau > .lfpl-contenu {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.lfpl-bandeau h1 { color: var(--lfpl-blanc); margin: 4px 0 0; }
.lfpl-bandeau .lfpl-surtitre { color: rgba(255, 255, 255, .74); margin: 0; }
.lfpl-bandeau .lfpl-blason { height: 62px; width: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .38)); }
.lfpl-bandeau .lfpl-intro { color: rgba(255, 255, 255, .82); margin: .5rem 0 0; max-width: 62ch; }
.lfpl-bandeau .lfpl-pousse { flex: 1 1 auto; }
.lfpl-bandeau .lfpl-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Compteur : Anton, aligné sur le titre. */
.lfpl-compteur {
    font-family: var(--font-titre);
    font-size: 2.4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lfpl-blanc);
    margin: 0;
}
.lfpl-compteur small {
    display: block;
    font-family: var(--font-texte);
    font-weight: 900;
    font-size: .64rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-top: 4px;
}

/* ==========================================================================
   6. MENU LATÉRAL — identique à Déclaration LFPL
   ========================================================================== */

.sidebar {
    height: 100%;
    width: min(340px, calc(100vw - 24px));
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, var(--lfpl-marine) 0%, var(--lfpl-bleu) 100%);
    overflow: auto;
    transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    padding: 76px 18px 22px;
    box-shadow: 18px 0 50px -24px rgba(8, 18, 40, .72);
}

.nav-open .sidebar { transform: translateX(0); }
.nav-open { overflow: hidden; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(10, 20, 43, .58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

.sidebar .menu {
    margin: 5px 0;
    padding: 12px 14px;
    text-decoration: none;
    font-size: 16px;
    font-family: var(--font-texte);
    font-weight: 700;
    color: #DCE6F7;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .08);
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.sidebar .menu:hover,
.sidebar .menu:focus-visible {
    color: var(--lfpl-blanc);
    background-color: rgba(255, 255, 255, .16);
    transform: translateX(2px);
}
.sidebar .menu[aria-current="page"] {
    color: var(--lfpl-blanc);
    background-color: rgba(255, 255, 255, .2);
    box-shadow: inset 3px 0 0 var(--lfpl-rouge);
}
.sidebar .menu svg { flex: none; }

.sidebar .closebtn {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 20px;
    color: #DCE6F7;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
}
.sidebar .closebtn:hover { background-color: rgba(255, 255, 255, .18); color: var(--lfpl-blanc); }

.sidebar-brand {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0 10px 22px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.sidebar-brand img { max-height: 76px; width: auto; }
.sidebar-brand .role {
    color: #A9C2E8;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
}
.sidebar-brand .name { color: var(--lfpl-blanc); font-weight: 600; word-wrap: break-word; }

.sidebar-titre {
    font-family: var(--font-texte);
    font-weight: 900;
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 18px 6px 6px;
}

.sidebar-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sidebar-logout {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; border-radius: 10px;
    color: var(--lfpl-blanc); background: var(--lfpl-rouge);
    text-decoration: none; font-weight: 700;
}
.sidebar-logout:hover { color: var(--lfpl-blanc); background: var(--lfpl-rouge-survol); }

.openbtn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 1030;
    font-size: 22px;
    cursor: pointer;
    background-color: var(--lfpl-bleu);
    color: var(--lfpl-blanc);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(34, 61, 110, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .15s ease;
}
.openbtn:hover { background-color: var(--lfpl-bleu-clair); transform: translateY(-1px); }

@media screen and (max-height: 450px) {
    .sidebar { padding-top: 15px; }
    .sidebar .menu { font-size: 14px; padding: 8px 12px; }
}

/* ==========================================================================
   7. FIL D'ARIANE
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: .875rem;
    color: var(--encre-3);
}
.breadcrumb a { color: var(--encre-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--lfpl-bleu); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--bordure); }
.breadcrumb [aria-current="page"] { color: var(--encre); font-weight: 500; }

/* ==========================================================================
   8. CARTES
   ========================================================================== */

.card,
.guw-card {
    background: var(--blanc);
    border: 0;
    border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 15px 24px;
    border-bottom: 2px solid var(--lfpl-marine-voile);
}
.card__head h2, .card__head h3 { margin: 0; display: flex; align-items: center; font-size: 1.05rem; }

.card__body { padding: 24px; }

.card__foot {
    padding: 18px 24px;
    border-top: 1px solid var(--bordure-2);
    background: var(--craie);
    border-radius: 0 0 var(--radius-carte) var(--radius-carte);
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==========================================================================
   9. TUILES — raccourcis d'accueil, § 11 de la charte applicative
   ========================================================================== */

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 16px;
}

.action-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
    background: var(--blanc);
    border: 0;
    border-radius: var(--radius-carte);
    color: var(--lfpl-marine);
    text-decoration: none;
    box-shadow: 0 14px 36px -30px rgba(16, 28, 51, .55);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .22s ease;
}

.action-card:hover,
.action-card:focus-visible {
    transform: translateY(-2px);
    background: var(--lfpl-marine-voile);
    box-shadow: 0 22px 46px -30px rgba(16, 28, 51, .55);
    color: var(--lfpl-marine);
    text-decoration: none;
}

/* Le triangle de la charte, révélé au survol. */
.action-card::after {
    content: '';
    position: absolute;
    right: 18px;
    width: 9px;
    height: 11px;
    background: var(--lfpl-rouge);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .14s ease, transform .14s ease;
}
.action-card:hover::after,
.action-card:focus-visible::after { opacity: 1; transform: translateX(0); }

.action-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--lfpl-blanc);
    background: var(--lfpl-bleu);
    flex: none;
    margin: 0;
}
.action-card--accent .action-card__icon { background: var(--lfpl-rouge); }

.action-card__texte { display: block; min-width: 0; }

.action-card__title {
    display: block;
    font-family: var(--font-titre);
    font-weight: 400;
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.15;
    color: var(--lfpl-marine);
}

.action-card__desc {
    display: block;
    font-size: .84rem;
    color: var(--encre-3);
    margin: 2px 0 0;
}

/* ==========================================================================
   10. BOUTONS
   ========================================================================== */

.btn {
    --btn-fond: var(--lfpl-bleu);
    --btn-fond-survol: var(--lfpl-bleu-clair);
    --btn-encre: var(--lfpl-blanc);
    --btn-bordure: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .55rem 1.2rem;
    font-family: var(--font-texte);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: var(--btn-encre);
    background-color: var(--btn-fond);
    border: 1px solid var(--btn-bordure);
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
}
.btn:hover, .btn:focus { background-color: var(--btn-fond-survol); color: var(--btn-encre); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn-primary { --btn-fond: var(--lfpl-bleu);   --btn-fond-survol: var(--lfpl-bleu-clair); }
.btn-danger  { --btn-fond: var(--lfpl-rouge);  --btn-fond-survol: var(--lfpl-rouge-survol); }
.btn-success { --btn-fond: var(--succes);      --btn-fond-survol: #14663B; }

.btn-secondary,
.btn-light {
    --btn-fond: var(--blanc);
    --btn-fond-survol: var(--lfpl-marine-voile);
    --btn-encre: var(--lfpl-marine);
    --btn-bordure: var(--bordure);
}

/* Seul usage du doré de la charte dans l'interface : le libellé prend la
   version assombrie, le doré pur reste sur la bordure. */
.btn-or {
    --btn-fond: var(--blanc);
    --btn-fond-survol: var(--lfpl-or-voile);
    --btn-encre: var(--lfpl-or-encre);
    --btn-bordure: var(--lfpl-or);
}

/* Sur l'aplat marine du bandeau. */
.lfpl-bandeau .btn-light {
    --btn-fond: rgba(255, 255, 255, .12);
    --btn-fond-survol: rgba(255, 255, 255, .24);
    --btn-encre: var(--lfpl-blanc);
    --btn-bordure: rgba(255, 255, 255, .42);
}

.btn-sm { min-height: 36px; padding: .3rem .75rem; font-size: .85rem; }
.btn-lg { min-height: 50px; padding: .8rem 1.6rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-row--end { justify-content: flex-end; }

.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::before {
    content: "";
    width: 1em; height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: lfpl-rotation .7s linear infinite;
}
@keyframes lfpl-rotation { to { transform: rotate(360deg); } }

/* ==========================================================================
   11. FORMULAIRES
   Panneau blanc, libellés traités comme des surtitres de la charte.
   ========================================================================== */

.form-group { margin-bottom: 1.15rem; }

.form-label,
.form-group > label {
    display: block;
    font-family: var(--font-texte);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lfpl-bleu);
    margin-bottom: .3rem;
}
.form-label .req, .form-group > label .req { color: var(--lfpl-rouge); }

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], input[type="search"],
select, textarea {
    display: block;
    width: 100%;
    min-height: var(--champ-min);
    padding: .6rem .85rem;
    font-family: inherit;
    font-size: 1rem;              /* 16px : en-dessous, iOS zoome à la saisie */
    color: var(--encre);
    background-color: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--radius-s);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover { border-color: var(--lfpl-bleu-clair); }
.form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--lfpl-bleu);
    box-shadow: 0 0 0 .2rem rgba(82, 113, 255, .22);
}
.form-control::placeholder { color: var(--encre-3); }

/* Champs en lecture : ce sont des valeurs à lire, pas des saisies grisées. */
.form-control[readonly], .form-control[disabled] {
    background: var(--craie);
    color: var(--lfpl-marine);
    font-weight: 500;
    opacity: 1;
}

textarea.form-control { min-height: 88px; resize: vertical; }

select, select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%234A5567' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Symfony (DateType) rend plusieurs <select> dans un <div class="form-control"> :
   on neutralise le cadre du conteneur et on aligne les listes horizontalement. */
div.form-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
}
div.form-control:hover { border: 0; }
div.form-control select { flex: 1 1 90px; width: auto; min-width: 0; padding-right: 2rem; background-position: right .6rem center; }

input[type="file"], input[type="file"].form-control {
    padding: .5rem;
    background-color: var(--craie);
    border-style: dashed;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-weight: 700;
    color: var(--lfpl-blanc);
    background: var(--lfpl-bleu);
    border: 0;
    border-radius: var(--radius-s);
    padding: .5rem 1rem;
    margin-right: .85rem;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--lfpl-bleu-clair); }

.form-hint {
    display: block;
    font-size: .82rem;
    color: var(--encre-3);
    margin: .15rem 0 .6rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
.form-error { display: block; margin-top: .3rem; font-size: .85rem; color: var(--danger-encre); font-weight: 500; }
.form-control.is-invalid { border-color: var(--lfpl-rouge); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(216, 23, 28, .2); }

/* Sections de formulaire : le triangle de la charte en marqueur. */
.form-section {
    margin: 2rem 0 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bordure-2);
}
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.form-section__title {
    display: flex;
    align-items: center;
    font-family: var(--font-titre);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .012em;
    font-size: 1.05rem;
    color: var(--lfpl-marine);
    margin: 0 0 1rem;
}
.form-section__title::before {
    content: '';
    width: 11px; height: 13px;
    margin-right: 10px;
    background: var(--lfpl-rouge);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    flex: none;
}

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 1rem; }
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

form ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--danger-encre); font-size: .85rem; }

/* ==========================================================================
   12. ALERTES
   ========================================================================== */

.alert {
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
    font-size: .95rem;
}
.alert__icon { flex-shrink: 0; margin-top: .15rem; }
.alert-danger  { background: var(--danger-voile); border-color: rgba(216, 23, 28, .28); color: var(--danger-encre); }
.alert-success { background: var(--succes-voile); border-color: rgba(27, 127, 75, .28);  color: #12603A; }
.alert-warning { background: var(--alerte-voile); border-color: rgba(193, 154, 42, .45); color: var(--alerte); }
.alert-info    { background: var(--lfpl-marine-voile); border-color: rgba(45, 66, 123, .2); color: var(--lfpl-marine); }
.alert strong { font-weight: 700; }
.alert a { color: inherit; font-weight: 700; }

/* ==========================================================================
   13. TABLEAUX
   En-tête marine pleine, capitales espacées.
   ========================================================================== */

.datatable-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 15px 24px;
    border-bottom: 2px solid var(--lfpl-marine-voile);
}
.datatable-search { position: relative; flex: 1 1 260px; max-width: 400px; }
.datatable-search input { padding-left: 2.5rem; }
.datatable-search svg {
    position: absolute;
    left: .85rem; top: 50%;
    transform: translateY(-50%);
    color: var(--encre-3);
    pointer-events: none;
}
.datatable-count { font-size: .82rem; color: var(--encre-3); font-weight: 500; margin-left: auto; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.table th, .table td {
    padding: .7rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--bordure-2);
}
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--lfpl-marine);
    color: var(--lfpl-blanc);
    font-family: var(--font-texte);
    font-weight: 900;
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: none;
}
.table tbody tr { transition: background-color .18s ease; }
.table tbody tr:hover { background-color: var(--lfpl-marine-voile); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

th[data-sortable] { cursor: pointer; user-select: none; }
th[data-sortable]:hover { background: var(--lfpl-bleu); }
th[data-sortable]::after {
    content: "";
    display: inline-block;
    margin-left: .45rem;
    border: 4px solid transparent;
    border-top-color: rgba(255, 255, 255, .45);
    transform: translateY(2px);
}
th[aria-sort="ascending"]::after  { border: 4px solid transparent; border-bottom-color: var(--lfpl-blanc); transform: translateY(-2px); }
th[aria-sort="descending"]::after { border: 4px solid transparent; border-top-color: var(--lfpl-blanc); transform: translateY(2px); }

.datatable-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 15px 24px;
    border-top: 1px solid var(--bordure-2);
    background: var(--craie);
    border-radius: 0 0 var(--radius-carte) var(--radius-carte);
    font-size: .85rem;
    color: var(--encre-3);
}
/* En-tête triable rendu côté serveur : le libellé est un lien, sur l'aplat marine. */
.table thead th a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--lfpl-blanc);
    text-decoration: none;
}
.table thead th a:hover { text-decoration: underline; }
.table thead th a::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: rgba(255, 255, 255, .4);
    transform: translateY(2px);
}
.table thead th[aria-sort="ascending"] a::after {
    border: 4px solid transparent;
    border-bottom-color: var(--lfpl-blanc);
    transform: translateY(-2px);
}
.table thead th[aria-sort="descending"] a::after {
    border: 4px solid transparent;
    border-top-color: var(--lfpl-blanc);
    transform: translateY(2px);
}

.pagination { display: flex; gap: .3rem; align-items: center; }

/* La pagination existe en deux rendus : des <button> pour les tableaux
   améliorés en JavaScript, des <a> pour la recherche paginée par le serveur. */
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: .3rem .6rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--encre-2);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--radius-s);
    text-decoration: none;
}
.pagination a:hover { border-color: var(--lfpl-bleu); color: var(--lfpl-bleu); }
.pagination a[aria-current="true"] {
    background: var(--lfpl-bleu);
    border-color: var(--lfpl-bleu);
    color: var(--lfpl-blanc);
}
.pagination .est-inactif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    color: var(--encre-3);
    opacity: .45;
}
.pagination button {
    min-width: 38px; min-height: 38px;
    padding: .3rem .6rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--encre-2);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--radius-s);
    cursor: pointer;
}
.pagination button:hover:not([disabled]) { border-color: var(--lfpl-bleu); color: var(--lfpl-bleu); }
.pagination button[aria-current="true"] {
    background: var(--lfpl-bleu);
    border-color: var(--lfpl-bleu);
    color: var(--lfpl-blanc);
}
.pagination button[disabled] { opacity: .45; cursor: not-allowed; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--lfpl-marine-voile);
    color: var(--lfpl-marine);
}
.badge--or     { background: var(--lfpl-or-voile); color: var(--lfpl-or-encre); }
.badge--danger { background: var(--danger-voile);  color: var(--danger-encre); }

.link-download {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--lfpl-bleu);
}
.link-download:hover { text-decoration: underline; color: var(--lfpl-marine); }

/* ==========================================================================
   14. ÉTATS VIDES ET TRAITEMENTS
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--encre-3);
}
.empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--lfpl-marine-voile);
    color: var(--lfpl-bleu);
}
.empty-state h3 { margin-bottom: .35rem; }

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    place-items: center;
    background: rgba(10, 20, 43, .58);
    padding: 1rem;
}
.overlay.is-open { display: grid; }
.overlay__panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--lfpl-marine), var(--lfpl-bleu));
    color: var(--lfpl-blanc);
    border-top: 1px solid var(--lfpl-or);
    border-radius: var(--radius-carte);
    box-shadow: var(--ombre-haute);
    padding: 2.25rem 2rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.overlay__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lfpl-hachures);
    pointer-events: none;
}
.overlay__panel > * { position: relative; z-index: 1; }
.overlay__panel h3 { color: var(--lfpl-blanc); }
.overlay__panel p { color: rgba(255, 255, 255, .8); }

.spinner {
    width: 46px; height: 46px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .22);
    border-top-color: var(--lfpl-blanc);
    animation: lfpl-rotation .8s linear infinite;
}
.progress-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
    margin-top: 1.25rem;
}
.progress-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lfpl-bleu-vif), var(--lfpl-rouge));
    animation: lfpl-progression 1.4s ease-in-out infinite;
}
@keyframes lfpl-progression {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* ==========================================================================
   15. ÉCRAN DE CONNEXION — § 04
   Hachures, éclats triangulaires, forme organique, triangle « play ».
   ========================================================================== */

.lfpl-connexion {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-height: 100vh;
}

.lfpl-connexion-carte {
    display: flex;
    width: 100%;
    max-width: 980px;
    min-height: 540px;
    background: var(--blanc);
    border-radius: 6px;
    box-shadow: var(--ombre-haute);
    overflow: hidden;
}

.lfpl-connexion-visuel {
    position: relative;
    flex: 1 1 54%;
    background: linear-gradient(150deg, var(--lfpl-marine) 0%, var(--lfpl-bleu) 60%, var(--lfpl-bleu-clair) 100%);
    color: var(--lfpl-blanc);
    padding: 2.75rem 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.lfpl-connexion-visuel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lfpl-hachures);
}
.lfpl-connexion-visuel::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--lfpl-bleu-clair) 0 62%, var(--lfpl-rouge) 62% 100%);
}
.lfpl-connexion-visuel > * { position: relative; z-index: 2; }

/* Forme organique du § 04, en fond. */
.lfpl-forme {
    position: absolute;
    right: -70px;
    bottom: 40px;
    width: 320px;
    height: 190px;
    background: linear-gradient(120deg, var(--lfpl-bleu-vif), var(--lfpl-marine));
    border-radius: 62% 38% 46% 54% / 55% 46% 54% 45%;
    opacity: .34;
    z-index: 1;
}

.lfpl-eclat {
    position: absolute;
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 1;
}
.lfpl-eclat.e1 { width: 96px; height: 96px; top: -14px; right: 34px; background: rgba(255, 255, 255, .12); transform: rotate(-12deg); }
.lfpl-eclat.e2 { width: 54px; height: 54px; top: 62px;  right: -8px; background: var(--lfpl-rouge); opacity: .8; transform: rotate(7deg); }
.lfpl-eclat.e3 { width: 40px; height: 40px; top: 128px; right: 78px; background: rgba(255, 255, 255, .18); transform: rotate(26deg); }

.lfpl-connexion-visuel .surtitre {
    font-family: var(--font-texte);
    font-weight: 900;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .8);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.lfpl-connexion-visuel .surtitre::before {
    content: '';
    width: 10px; height: 12px;
    background: var(--lfpl-rouge);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    flex: none;
}

.lfpl-connexion-visuel h1 {
    color: var(--lfpl-blanc);
    font-size: 2.35rem;
    line-height: 1.06;
    margin: 1rem 0 .75rem;
}
.lfpl-connexion-visuel p.intro {
    color: rgba(255, 255, 255, .82);
    font-size: .98rem;
    max-width: 340px;
    margin: 0;
}
.lfpl-connexion-visuel .blason { height: 74px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }

.lfpl-connexion-form {
    flex: 1 1 46%;
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lfpl-connexion-form h2 { font-size: 1.65rem; margin: 0 0 .25rem; }
.lfpl-connexion-form .sous-titre { color: var(--encre-3); font-size: .95rem; margin-bottom: 1.75rem; }
.lfpl-connexion-form .form-control { min-height: 46px; }

.lfpl-connexion-form .btn-connexion {
    width: 100%;
    min-height: 48px;
    --btn-fond: var(--lfpl-rouge);
    --btn-fond-survol: var(--lfpl-rouge-survol);
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 3px;
}
.lfpl-connexion-form .oubli {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: var(--lfpl-bleu);
}

/* ==========================================================================
   16. PIED DE PAGE
   ========================================================================== */

.app-footer {
    flex-shrink: 0;
    padding: 1.4rem 0;
    background: var(--lfpl-marine);
    color: rgba(255, 255, 255, .74);
    font-size: .82rem;
}
.app-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.app-footer a { color: rgba(255, 255, 255, .9); }

/* ==========================================================================
   17. UTILITAIRES
   ========================================================================== */

.mt-0 { margin-top: 0; }      .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }  .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }   .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2rem; }   .mb-4 { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
    .lfpl-connexion-carte { flex-direction: column; min-height: 0; }
    .lfpl-connexion-visuel { padding: 2rem 1.75rem 2.25rem; }
    .lfpl-connexion-visuel h1 { font-size: 1.75rem; }
    .lfpl-forme, .lfpl-eclat { display: none; }
    .lfpl-connexion-form { padding: 2rem 1.75rem 2.5rem; }
}

@media (max-width: 640px) {
    .page { padding-top: 5rem; }
    .lfpl-bandeau { padding: 24px 20px 28px; border-radius: 14px; }
    .lfpl-eclats { display: none; }
    h1 { font-size: 1.6rem; }
    .action-grid { grid-template-columns: 1fr; }
    .form-grid > [class^="col-"] { grid-column: span 12; }
    .card__body, .card__head, .card__foot, .datatable-toolbar, .datatable-foot { padding-inline: 18px; }
    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }
    .datatable-count { margin-left: 0; }
}

/* ==========================================================================
   19. PRÉFÉRENCES UTILISATEUR ET IMPRESSION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .openbtn, .sidebar, .nav-backdrop, .app-footer, .breadcrumb,
    .btn-row, .datatable-toolbar, .datatable-foot, .lfpl-eclats, .no-print { display: none !important; }
    body { background: #fff; }
    .page { padding-top: 0; }
    .card, .guw-card { box-shadow: none; border: 1px solid #ccc; }
    .lfpl-bandeau { background: #fff !important; color: #000; box-shadow: none; border-bottom: 3px solid #000; border-radius: 0; }
    .lfpl-bandeau h1, .lfpl-bandeau .lfpl-surtitre { color: #000; }
    .table thead th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
}