/* ─────────────────────────────────────────────────────────────
   La Ruche — overrides et utilities manquantes dans Metronic CSS
   ─────────────────────────────────────────────────────────────
   À charger APRÈS styles.css Metronic.
   Le CSS Metronic ne contient pas certaines utilities Tailwind v4
   (peer-*, top-1/2, arbitrary values) car ses sources scannées ne
   les utilisent pas. On les ajoute ici.
   ───────────────────────────────────────────────────────────── */

/* ── Utilities Tailwind manquantes ────────────────────────────── */
.lp-center-y { top: 50%; transform: translateY(-50%); }

/* ── Couleurs sémantiques success/warning/info (cf. L-14) ──────────
   Le CSS Metronic compilé ne contient PAS d'utility text-*/bg-* ni de
   variable --color-* pour success/warning/info (seuls primary/mono/
   destructive existent). On les ajoute ici pour que text-success,
   bg-warning, kt-btn-success… fonctionnent partout. */
:root {
    --color-success: #17C653;
    --color-warning: #F6B100;
    --color-info: #7239EA;
}
.text-success { color: #17C653 !important; }
.text-warning { color: #F6B100 !important; }
.text-info    { color: #7239EA !important; }
.bg-success { background-color: #17C653; }
.bg-warning { background-color: #F6B100; }
.bg-info    { background-color: #7239EA; }
.bg-success\/10 { background-color: rgba(23, 198, 83, 0.10); }
.bg-warning\/10 { background-color: rgba(246, 177, 0, 0.10); }
.bg-info\/10    { background-color: rgba(114, 57, 234, 0.10); }
.kt-btn-success {
    background-color: #17C653;
    border-color: #17C653;
    color: #fff;
}
.kt-btn-success:hover { background-color: #13a847; border-color: #13a847; }

/* ── Floating labels (R-10) ────────────────────────────────────
   Pattern : <div class="kt-floating">
                 <input class="kt-input kt-floating-input" placeholder=" " id="x">
                 <label for="x" class="kt-floating-label">Mon label</label>
             </div>
   Le label « flotte » au-dessus quand l'input est focus ou rempli.
   Pas de JS requis. */
.kt-floating {
    position: relative;
}
.kt-floating > .kt-floating-input,
.kt-floating > .kt-floating-select,
.kt-floating > .kt-floating-textarea {
    /* Padding-top pour laisser la place au label flottant */
    padding-top: 1.45rem;
    padding-bottom: 0.45rem;
    height: auto;
    min-height: 3.25rem;
}
.kt-floating > .kt-floating-textarea {
    min-height: 6rem;
    padding-top: 1.6rem;
}
.kt-floating > .kt-floating-label {
    position: absolute;
    left: 0.875rem;
    top: 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-muted-foreground, #71717a);
    pointer-events: none;
    background: transparent;
    transition: all 0.15s ease-in-out;
    transform-origin: top left;
    line-height: 1;
    z-index: 1;
}

/* Etat focus OU rempli (placeholder absent / vide) : label glisse en haut */
.kt-floating > .kt-floating-input:focus + .kt-floating-label,
.kt-floating > .kt-floating-input:not(:placeholder-shown) + .kt-floating-label,
.kt-floating > .kt-floating-select:focus + .kt-floating-label,
.kt-floating > .kt-floating-select:not([data-empty="true"]) + .kt-floating-label,
.kt-floating > .kt-floating-textarea:focus + .kt-floating-label,
.kt-floating > .kt-floating-textarea:not(:placeholder-shown) + .kt-floating-label {
    top: 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-primary, #1B84FF);
}
.kt-floating > .kt-floating-input:not(:focus):not(:placeholder-shown) + .kt-floating-label,
.kt-floating > .kt-floating-textarea:not(:focus):not(:placeholder-shown) + .kt-floating-label {
    color: var(--color-mono, #252F4A);
}

/* Pour les selects : on utilise data-empty="true" en JS pour matcher l'état vide */
.kt-floating > .kt-floating-select {
    padding-top: 1.45rem;
    padding-bottom: 0.45rem;
    min-height: 3.25rem;
}

/* ── Form sections ───────────────────────────────────────────── */
.kt-form-section {
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--color-border, #e4e4e7);
}
.kt-form-section:last-child { border-bottom: 0; padding-bottom: 0; }
.kt-form-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground, #71717a);
    margin-bottom: 0.875rem;
}
.kt-form-section-title i {
    color: var(--color-primary, #1B84FF);
    font-size: 1rem;
}

/* ── Chips toggle (catégories cliquables) ────────────────────── */
.kt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-secondary-foreground, #51525c);
    background: var(--color-background, #fff);
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease-in-out;
}
.kt-chip:hover {
    border-color: var(--color-primary, #1B84FF);
    color: var(--color-primary, #1B84FF);
}
.kt-chip-input { position: absolute; opacity: 0; pointer-events: none; }
.kt-chip-input:checked + .kt-chip {
    background: var(--color-primary, #1B84FF);
    border-color: var(--color-primary, #1B84FF);
    color: #fff;
}
.kt-chip-input:checked + .kt-chip:hover {
    background: var(--color-primary, #1B84FF);
    opacity: 0.9;
}
.kt-chip i.ki-check {
    display: none;
}
.kt-chip-input:checked + .kt-chip i.ki-check {
    display: inline-block;
}

/* ── Switch row : label + description + switch à droite ──────── */
.kt-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: 0.5rem;
    background: var(--color-background, #fff);
}
.kt-switch-row .kt-switch-info { flex: 1; }
.kt-switch-row .kt-switch-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-mono, #252F4A);
}
.kt-switch-row .kt-switch-desc {
    font-size: 0.75rem;
    color: var(--color-muted-foreground, #71717a);
    margin-top: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════════
   Identité La Ruche dans la console
   ═══════════════════════════════════════════════════════════════ */

/* ── Palette ──────────────────────────────────────────────────
   Metronic pose `--primary: var(--color-blue-500)`. On redéfinit
   `--primary` plutôt que la variable de bleu : celle-ci sert aussi
   ailleurs, et on ne veut repeindre que la couleur d'accent.

   Le vert retenu est le vert FONCÉ #004C33, celui du mot « la Ruche »
   et des titres du site. Le vert vif #00AC66 lui sert d'accent.
   Ce n'est pas un choix esthétique : sur du texte blanc, le vert vif
   donne un contraste de 2,5:1 — sous le seuil lisible — quand le vert
   foncé monte à 9:1. Une console s'utilise toute la journée. */
:root {
    --primary: #004c33;
    --primary-foreground: #ffffff;

    --lp-vert-fonce: #004c33;
    --lp-vert-vif: #00ac66;
    --lp-sauge: #a2b69b;
    --lp-corail: #ff5561;
    --lp-brique: #d0443a;
    --lp-brun-rose: #966c64;
}

.dark {
    /* Sur fond sombre, le vert foncé disparaît : c'est le vif qui prend
       le rôle d'accent, et il y est parfaitement lisible. */
    --primary: #00ac66;
    --primary-foreground: #04231a;
}

/* ── Logo ─────────────────────────────────────────────────────
   Le SVG est bichrome : `--logo-mot` porte « la Ruche », `--logo-accent`
   les antennes et l'arc « DES ASSOC'S ». Sur fond sombre, le mot passe
   en blanc — sans quoi le vert foncé serait illisible. */
.lp-logo {
    display: inline-block;
    --logo-mot: #004c33;
    --logo-accent: #00ac66;
}

.lp-logo svg {
    display: block;
    /* Le bandeau de la sidebar fait 70 px : le logo, qui est plus haut que
       large, doit être borné en HAUTEUR sinon il déborde par le haut. */
    width: auto;
    height: 46px;
    max-width: 100%;
}

.lp-logo-lg svg {
    height: 74px;
}

.dark .lp-logo {
    --logo-mot: #ffffff;
}

/* La sidebar de Metronic est SOMBRE même en thème clair : le mot « la
   Ruche », en vert foncé, s'y perdait. Il y passe donc en blanc, quel que
   soit le thème, l'accent restant vert vif. */
.kt-sidebar .lp-logo,
.branded-bg .lp-logo {
    --logo-mot: #ffffff;
}

/* Sidebar repliée : seule la marque tient, on réduit sans déformer. */
.kt-sidebar-collapse .lp-logo svg {
    height: 34px;
}

/* ── Liens et états ───────────────────────────────────────────
   `text-primary` et consorts suivent `--primary` par la variable
   `--color-primary` de Metronic. Restent les quelques endroits où le
   bleu est écrit en dur dans le CSS compilé. */
.kt-menu-item.here > .kt-menu-link,
.kt-menu-link:hover .kt-menu-title {
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   Édition d'une fiche association, au layout de la fiche publique

   Le formulaire suit le découpage de la page 4 du PDF — titre, photo,
   « A propos. », « Infos. », bandeau bénévolat — pour qu'un gestionnaire
   voie où sa saisie atterrit sans changer d'écran.

   La grille reprend la proportion de la fiche : colonne de repère 485,8,
   colonne de champs 405,6. Écrit ici et non en classes Tailwind : le CSS
   Metronic est compilé sur ses propres sources, les classes arbitraires
   n'y sont pas (cf. leçon L-12).
   ═══════════════════════════════════════════════════════════════ */

.lp-fiche {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 940px;
}

.lp-fiche-bloc {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--background);
}

/* Colonne de gauche : le repère. Elle porte le nom de la zone tel qu'il
   apparaît sur le site, pour que la correspondance saute aux yeux. */
.lp-fiche-titre {
    display: block;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--lp-vert-fonce);
}

.lp-fiche-titre--clair { color: #ffffff; }

.lp-fiche-sous-titre {
    margin: 0.35rem 0 0;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: #ffffff;
}

.lp-fiche-zone {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-vert-vif);
}

.lp-fiche-note {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--secondary-foreground);
}

.lp-fiche-note--clair { color: rgba(255, 255, 255, 0.82); }
.lp-fiche-note a { color: inherit; text-decoration: underline; }

/* Colonne de droite : les champs. */
.lp-fiche-champs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lp-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lp-brique);
}

.lp-label--lien { color: var(--lp-vert-vif); }
.lp-label--clair { color: #ffffff; }

/* Deuxième et suivantes : un peu d'air, comme les blocs de la fiche. */
.lp-fiche-champs .lp-label + * { margin-bottom: 0.5rem; }
.lp-fiche-champs > .lp-label:not(:first-child) { margin-top: 0.5rem; }

.lp-input-titre {
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    height: auto;
    padding: 0.7rem 0.9rem;
}

.lp-textarea {
    height: auto;
    padding: 0.6rem 0.9rem;
    line-height: 1.55;
    resize: vertical;
}

.lp-aide {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--secondary-foreground);
}

.lp-duo {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 0.6rem;
}

.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Interrupteur avec son explication, comme sur les autres écrans. */
.lp-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 0.35rem;
    cursor: pointer;
}

.lp-switch > span { display: flex; flex-direction: column; gap: 0.15rem; }
.lp-switch strong { font-size: 0.9rem; font-weight: 600; }
.lp-switch em {
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--secondary-foreground);
}

.lp-fiche-bloc--benevolat .lp-switch strong,
.lp-fiche-bloc--benevolat .lp-switch em { color: #ffffff; }

/* Emplacement du logo : le carré de la fiche, sans le pointillé — celui
   du PDF était un repère de maquette, retiré du site le 18/08. */
.lp-fiche-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.lp-fiche-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lp-fiche-logo-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--secondary-foreground);
}

.lp-fiche-logo-vide i { font-size: 1.5rem; }

/* Champ que le modèle ne porte pas encore : on montre l'emplacement et on
   dit pourquoi, plutôt que de laisser un trou inexpliqué. */
.lp-fiche-attente {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    background: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--secondary-foreground);
}

.lp-fiche-attente i { font-size: 1.25rem; }
.lp-fiche-attente strong { display: block; color: var(--mono); }
.lp-fiche-attente p { margin: 0.2rem 0 0; }
.lp-fiche-attente a { color: var(--primary); text-decoration: underline; }

/* Le bandeau bénévolat reprend le corail du site : c'est ce qui le rend
   reconnaissable d'un coup d'œil sur la fiche publique. */
.lp-fiche-bloc--benevolat {
    border-color: var(--lp-corail);
    background: var(--lp-corail);
}

.lp-fiche-bloc--benevolat .kt-input {
    border-color: rgba(255, 255, 255, 0.55);
}

.lp-fiche-bloc--reglages { background: var(--muted); }

/* ── Sous-zone d'un bloc ─────────────────────────────────────
   Les rubriques depliables vivent DANS « A propos. » : sur le site elles
   s'ouvrent sous la presentation, elles n'en sont pas detachees. Un filet
   et un retrait suffisent a les distinguer sans en refaire un bloc. */
.lp-fiche-sous-zone {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
}

.lp-fiche-sous-zone-titre {
    margin: 0 0 0.15rem;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lp-brique);
}

.lp-fiche-sous-zone .lp-rubriques { margin-top: 0.75rem; }

/* ── Services & biens ────────────────────────────────────────
   Zone NON publique, reservee aux echanges entre associations. Le fond
   la distingue au premier coup d'oeil des zones qui, elles, partent sur
   le site : sans ce reperage visuel, un gestionnaire y saisirait des
   informations en croyant les publier. */
.lp-fiche-bloc--biens {
    background: color-mix(in srgb, var(--primary) 5%, var(--background));
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.lp-fiche-bloc--biens .lp-fiche-note strong { color: var(--primary); }

/* ── Autocompletion du catalogue ─────────────────────────────
   Liste maison plutot qu'un `<datalist>` : celui-ci n'affiche ni le type
   ni la mention « deja dans votre liste », et son rendu n'est pilotable
   sur aucun navigateur. */
.lp-auto { position: relative; }

.lp-auto-liste {
    position: absolute;
    z-index: 20;
    /* Sous le champ, pas sous le libelle : 1,75rem de decalage mesure. */
    inset-inline: 0;
    top: 100%;
    margin: 0.2rem 0 0;
    padding: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--background);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
}

.lp-auto-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.lp-auto-item:hover { background: var(--muted); }

.lp-auto-nom { font-weight: 500; color: var(--mono); }

.lp-auto-meta {
    flex: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-foreground);
}

/* Deja pose sur cette fiche : montre, mais pas choisissable. Le masquer
   laisserait croire que l'objet n'existe pas et pousserait a le recreer. */
.lp-auto-item--deja {
    cursor: default;
    opacity: 0.55;
}

.lp-auto-item--deja:hover { background: none; }

.lp-auto-item--vide {
    cursor: default;
    color: var(--secondary-foreground);
    font-style: italic;
}

.lp-auto-item--vide:hover { background: none; }

.lp-fiche-erreurs {
    border-color: var(--destructive);
    color: var(--destructive);
}

.lp-fiche-erreurs ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

.lp-fiche-pied {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-bottom: 2rem;
}

@media (max-width: 1024px) {
    .lp-fiche-bloc { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
    .lp-fiche-logo { margin-top: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Colonne de menu en vert olive

   #4A6640, l'olive du hero retenu de la maquette. Metronic pose
   `bg-background` sur la sidebar, une utility : on repeint la classe
   `.kt-sidebar` elle-même, plus spécifique dans l'ordre de la cascade
   puisque cette feuille est chargée après.
   ═══════════════════════════════════════════════════════════════ */

.kt-sidebar {
    background-color: var(--lp-olive, #4a6640) !important;
    border-inline-end-color: rgba(255, 255, 255, 0.12) !important;
}

:root { --lp-olive: #4a6640; }

/* Le menu : blanc cassé au repos, blanc franc pour l'entrée courante,
   sur un voile plus clair plutôt que sur l'accent gris de Metronic. */
.kt-sidebar .kt-menu-title,
.kt-sidebar .kt-menu-icon,
.kt-sidebar .kt-menu-link {
    color: rgba(255, 255, 255, 0.82);
}

.kt-sidebar .kt-menu-link:hover { background-color: rgba(255, 255, 255, 0.10) !important; }
.kt-sidebar .kt-menu-link:hover .kt-menu-title,
.kt-sidebar .kt-menu-link:hover .kt-menu-icon { color: #ffffff; }

.kt-sidebar .kt-menu-item.here > .kt-menu-link {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

.kt-sidebar .kt-menu-item.here > .kt-menu-link .kt-menu-title,
.kt-sidebar .kt-menu-item.here > .kt-menu-link .kt-menu-icon {
    color: #ffffff;
}

/* Le bouton de repli chevauche le bord : il doit rester lisible des deux
   côtés, donc fond olive et trait clair. */
#sidebar_toggle {
    background-color: var(--lp-olive) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

.kt-sidebar-footer,
.kt-sidebar .text-secondary-foreground,
.kt-sidebar .text-muted-foreground {
    color: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Pastilles du menu, sur fond olive ───────────────────────
   Metronic dessine `.kt-badge-outline` pour un fond CLAIR : fond blanc
   casse, texte sombre. Pose sur l'olive, et son texte repeint en blanc
   par la regle generale du menu ci-dessus, le chiffre devenait blanc sur
   blanc — illisible.

   On les redessine donc pour ce fond : creuses, contour clair, chiffre
   blanc. L'alerte, elle, garde son rouge plein : c'est ce qui doit
   attirer l'oeil, elle ne se fond pas dans le decor. */
.kt-sidebar .kt-badge-outline {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums;
}

.kt-sidebar .kt-badge-destructive {
    background-color: var(--destructive) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums;
}

/* L'entree courante est deja sur un voile clair : sa pastille creuse a
   besoin d'un contour plus franc pour ne pas s'y diluer. */
.kt-sidebar .kt-menu-item.here > .kt-menu-link .kt-badge-outline {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Rubriques dépliables, gérées depuis la fiche ────────────── */

.lp-rubriques {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* La ligne se replie d'elle-meme quand la place manque : `flex-wrap` plus
   une base de 14rem sur le texte valent mieux qu'un point de rupture en
   pixels, parce que la largeur utile ici ne depend pas de la fenetre mais
   du menu lateral et de la colonne de reperes. Sans cela, les boutons ne
   se comprimant pas, le texte tombait a quelques pixels et se lisait une
   lettre par ligne. */
.lp-rubrique {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--background);
}

.lp-rubrique-texte { flex: 1 1 14rem; min-width: 0; }
.lp-rubrique-texte strong { display: block; font-size: 0.9rem; }
.lp-rubrique-texte p {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--secondary-foreground);
}

.lp-rubrique-vide { font-style: italic; }

.lp-rubrique-masquee {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-foreground);
}

.lp-rubrique-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.lp-rubrique-aucune {
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--secondary-foreground);
}

/* Le retour d'action s'efface tout seul : il confirme, il n'encombre pas. */
.lp-rubrique-message {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    color: var(--primary);
    animation: lp-fondu 4s forwards;
}

@keyframes lp-fondu {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.lp-rubrique-erreurs {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--destructive);
    background: color-mix(in srgb, var(--destructive) 8%, transparent);
    font-size: 0.8125rem;
    color: var(--destructive);
}

.lp-rubrique-erreurs ul { margin: 0; padding-left: 1.1rem; }

.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ordre de l'accordeon : l'ecran montre ce que le site affichera, la
   derniere rubrique etant celle qui s'ouvre depliee. Deux fleches, pas de
   glisser-deposer : le geste doit rester utilisable au clavier et sur un
   telephone. */
.lp-rubrique-ordre {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-inline-end: 0.2rem;
}

.lp-rubrique-ordre .kt-btn {
    padding: 0.15rem 0.35rem;
    min-height: 0;
    line-height: 1;
}

.lp-rubrique-ordre .kt-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Le plafond de cinq est annonce, pas seulement applique : sans compteur,
   le bouton grise n'expliquerait rien. */
.lp-rubrique-compteur {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--secondary-foreground);
}

/* ── Photo de couverture et recadreur ────────────────────────── */

.lp-couverture { display: flex; flex-direction: column; gap: 0.75rem; }

/* L'aperçu garde le ratio du bandeau : 880 x 471, mesuré au rendu. */
.lp-couverture-vue {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 880 / 471;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--muted);
}

.lp-couverture-vue img { width: 100%; height: 100%; object-fit: cover; }

.lp-couverture-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--secondary-foreground);
}

.lp-couverture-vide i { font-size: 1.75rem; }

.lp-couverture-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lp-couverture-message {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--primary);
}

.lp-couverture-message--erreur { color: var(--destructive); }

/* Le cadreur : le canvas EST la zone retenue, pas un aperçu entouré
   d'un masque. Ce qu'on voit est ce qu'on obtient. */
.lp-cadreur {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--muted);
}

.lp-cadreur canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    background: #ffffff;
    cursor: grab;
    touch-action: none;
}

.lp-cadreur canvas:active { cursor: grabbing; }

/* Cadre carre du logo. Le damier montre la transparence : un logo detoure
   sortira en PNG, et on veut voir ce qui est reellement conserve plutot
   qu'un fond blanc trompeur. */
.lp-cadreur--carre canvas {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #eceff0 25%, transparent 25%),
        linear-gradient(-45deg, #eceff0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eceff0 75%),
        linear-gradient(-45deg, transparent 75%, #eceff0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* ── Depot du logo ───────────────────────────────────────────
   Meme mecanique que la couverture, dans la colonne de reperes : les
   boutons passent dessous, la place manque a cote d'un carre de 160 px. */
.lp-logo-depot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.lp-logo-depot .lp-fiche-logo { margin-top: 1.25rem; }

.lp-logo-depot .lp-couverture-vide {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.3;
}

.lp-logo-depot .lp-couverture-actions { gap: 0.4rem; }

.lp-cadreur-reglage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.lp-cadreur-reglage input[type="range"] {
    flex: 1;
    accent-color: var(--primary);
}

/* ── Respiration en bas de page ───────────────────────────────
   Le contenu se terminait au ras de la fenêtre : dernier tableau, dernière
   pagination et pied de page collés au bord, sans rien pour signaler la
   fin. On réserve une marge au conteneur de contenu, et un peu d'air sous
   les cartes qui portent un tableau. */

main .kt-container-fixed {
    padding-bottom: 3rem;
}

.kt-card-table + *,
.kt-card .kt-card-footer {
    margin-top: 0;
}

/* La pagination des tableaux touchait le bord bas de sa carte. */
.kt-card-footer {
    padding-block: 1rem;
}

.kt-card-table .kt-scrollable-x-auto + .kt-card-footer {
    border-top: 1px solid var(--border);
}

/* Dernière carte d'une page : une marge sous elle, sinon l'ombre porte
   directement sur le bord de la fenêtre. */
main .kt-container-fixed > :last-child {
    margin-bottom: 1.5rem;
}

/* ────────────────────────────────────────────────────────────────────
   Grille de douze colonnes, pour le tableau de bord

   POURQUOI ELLE EST ECRITE ICI, ET PAS EN CLASSES TAILWIND.

   La console tourne sur le CSS Metronic PRECOMPILE : il ne contient ni
   `grid-cols-12`, ni `col-span-3`, ni `col-span-6`, ni `col-span-9` —
   verifie, il s'arrete a `col-span-2`. Les ecrire dans un gabarit ne
   produirait rien du tout, la feuille n'etant pas regeneree a partir des
   vues (cf. lecons.md L-12). D'ou ces quelques regles, dans la feuille
   du projet, qui est bien servie et versionnee.

   Douze colonnes parce que c'est le langage du graphiste : 9/12, 3/12,
   6/12 se lisent directement dans le balisage.
   ──────────────────────────────────────────────────────────────────── */

.lp-grille-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}

.lp-col-3  { grid-column: span 3; }
.lp-col-4  { grid-column: span 4; }
.lp-col-6  { grid-column: span 6; }
.lp-col-8  { grid-column: span 8; }
.lp-col-9  { grid-column: span 9; }
.lp-col-12 { grid-column: span 12; }

/* Sous le desktop, trois colonnes sur douze ne tiennent plus une date.
   Les proportions du graphiste valent pour un grand ecran, pas pour un
   telephone.

   Le 9 et le 3 passent tous les deux en pleine largeur, et non le 3 en
   demi : a 1024 px, un 3 devenu 6 allait s'apparier avec la premiere
   moitie de la rangee suivante, laissant les demandes seules sur une
   demi-largeur. Les deux listes, elles, restent cote a cote : elles ont
   la meme nature et la meme hauteur. */
@media (max-width: 1279px) {
    .lp-col-3,
    .lp-col-9 { grid-column: span 12; }
}

@media (max-width: 767px) {
    .lp-col-3,
    .lp-col-4,
    .lp-col-6,
    .lp-col-8,
    .lp-col-9 {
        grid-column: span 12;
    }
}

/* Une carte posee dans la grille doit remplir sa case : sans cela, deux
   cartes cote a cote de contenus inegaux ne s'alignent pas en bas. */
.lp-grille-12 > .kt-card {
    height: 100%;
}