/* =====================================================================
   Styles communs : couleurs, textes, boutons, formulaires, tableaux,
   espace membre et administration.
   Le style propre au site public (maquette) est dans site.css.
   ===================================================================== */
:root {
    /* Couleurs de la charte AFM-UKV */
    --bleu: #003c78;
    --bleu-barre: #023f82;
    --bleu-fonce: #002b58;
    --bleu-nuit: #00244a;
    --bleu-titre: #0a3672;
    --bleu-texte: #14284a;
    --bleu-clair: #e9f1fb;
    --lien: #2a518a;
    --vert: #0e8f35;
    --vert-fonce: #0a7a2c;
    --vert-vif: #6ce466;
    --vert-vif-fonce: #55d34f;
    --vert-pale: #a4e99e;
    --vert-clair: #e7f7ea;

    --fond: #f4f7fb;
    --surface: #ffffff;
    --panneau: #f2f7fc;
    --texte: #2f3a4b;
    --texte-doux: #6e7075;
    --bordure: #e2e9f2;
    --bordure-champ: #cdd7e3;
    --succes: #15803d;
    --succes-fond: #e8f6ee;
    --attention: #925400;
    --attention-fond: #fff4df;
    --danger: #be2329;
    --danger-fond: #fdeced;
    --rayon: 12px;
    --rayon-petit: 8px;
    --ombre: 0 1px 2px rgba(10, 40, 80, .05), 0 6px 18px rgba(10, 40, 80, .07);

    --police: "Source Sans 3", "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titre: Poppins, "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;

    /* Noms utilisés par l'administration */
    --primaire: var(--bleu);
    --primaire-fonce: var(--bleu-fonce);
    --primaire-clair: var(--bleu-clair);
    --accent: var(--vert);
}

*, *::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(--police);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
}
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--bleu-titre); }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.centre { text-align: center; }
.conteneur { width: 100%; max-width: 1424px; margin: 0 auto; padding: 0 22px; }
.section { margin-top: 40px; }
.ic { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; display: inline-block; vertical-align: -.125em; }
.aller-au-contenu { position: absolute; left: -9999px; top: 0; }
.aller-au-contenu:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 6px; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    background: var(--bleu);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--bleu-fonce); color: #fff; text-decoration: none; }
.bouton:focus-visible, .nav-lien:focus-visible { outline: 3px solid rgba(0, 60, 120, .3); outline-offset: 2px; }
.bouton.secondaire { background: var(--surface); color: var(--bleu-texte); border-color: var(--bordure-champ); }
.bouton.secondaire:hover { background: var(--fond); color: var(--bleu-texte); }
.bouton.vert, .bouton.succes { background: var(--vert); }
.bouton.vert:hover, .bouton.succes:hover { background: var(--vert-fonce); }
.bouton.danger { background: var(--danger); }
.bouton.danger:hover { background: #991b20; }
.bouton.discret { background: none; color: var(--texte-doux); border-color: transparent; }
.bouton.discret:hover { background: var(--fond); color: var(--bleu-texte); }
.bouton.petit { padding: 6px 12px; font-size: .9rem; }
.bouton.bloc { width: 100%; }
form.en-ligne { display: inline; margin: 0; }

/* ---------- Cartes et mise en page ---------- */
.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 26px;
    box-shadow: var(--ombre);
}
.carte + .carte { margin-top: 20px; }
.carte h2:first-child, .carte .titre-carte { font-size: 1.15rem; }
.etroite { max-width: 480px; margin-left: auto; margin-right: auto; }
.moyenne { max-width: 760px; margin-left: auto; margin-right: auto; }
.limite { max-width: 820px; }
.vide { text-align: center; color: var(--texte-doux); padding: 40px 16px; }
.entete-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.entete-page h1 { margin: 0; }
.titre-section {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.titre-section h2 { margin: 0; }
.fil { margin: 0 0 4px; font-size: .92rem; color: var(--texte-doux); }
.grille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.grille-deux > .carte + .carte { margin-top: 0; }
.liens-bas { margin: 18px 0 0; text-align: center; font-size: .97rem; color: var(--texte-doux); }
.code-erreur { font-family: var(--police-titre); font-size: 3rem; font-weight: 700; color: var(--bleu); margin: 0; line-height: 1; }
@media (max-width: 820px) { .grille-deux { grid-template-columns: 1fr; } }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 16px; }
.champ > label { display: block; font-weight: 600; font-size: .97rem; margin-bottom: 6px; color: var(--bleu-texte); }
.facultatif { font-weight: 400; color: var(--texte-doux); font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=search], input[type=url], input[type=date], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--texte);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(0, 60, 120, .14);
}
input[type=file] { font: inherit; font-size: .95rem; max-width: 100%; }
textarea { resize: vertical; min-height: 96px; }
.aide { color: var(--texte-doux); font-size: .9rem; margin: 5px 0 0; }
.carte > p.aide, .admin-principal > p.aide { margin: 0 0 16px; }
.case { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.case input { margin-top: 5px; flex-shrink: 0; width: auto; }
.case .aide { font-weight: 400; margin: 0; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rangee-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.actions-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.actions-form.centre { justify-content: center; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.recherche { display: flex; gap: 8px; }
.recherche input { min-width: 200px; }
@media (max-width: 640px) {
    .rangee, .rangee-trois { grid-template-columns: 1fr; }
    .recherche { width: 100%; }
    .recherche input { min-width: 0; flex: 1; }
}

/* ---------- Messages ---------- */
.alerte {
    padding: 12px 16px;
    border: 1px solid;
    border-radius: var(--rayon-petit);
    margin-bottom: 18px;
}
.alerte ul { margin: 6px 0 0; padding-left: 20px; }
.alerte-succes { background: var(--succes-fond); border-color: #bfe3cc; color: #0f5229; }
.alerte-erreur { background: var(--danger-fond); border-color: #f4c3c5; color: #8c1a1f; }
.alerte-info { background: var(--bleu-clair); border-color: #c5d8f1; color: var(--bleu-fonce); }
.alerte-attention { background: var(--attention-fond); border-color: #f2d8a7; color: #6f4000; }

/* ---------- Badges et avatars ---------- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: #edf0f5;
    color: var(--texte-doux);
}
.badge.vert { background: var(--succes-fond); color: var(--succes); }
.badge.orange { background: var(--attention-fond); color: var(--attention); }
.badge.rouge { background: var(--danger-fond); color: var(--danger); }
.badge.bleu { background: var(--bleu-clair); color: var(--bleu); }
.badge.violet { background: #eef0ff; color: #3b3fa8; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
}
.avatar.mini { width: 28px; height: 28px; font-size: .7rem; }
.avatar.grand { width: 64px; height: 64px; font-size: 1.3rem; }
.personne { display: flex; align-items: center; gap: 14px; min-width: 0; }
.personne h1 { margin-bottom: 4px; }
.meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--texte-doux);
    font-size: .92rem;
}

/* ---------- Texte des articles et des pages ---------- */
.contenu-riche { font-size: 1.08rem; line-height: 1.75; overflow-wrap: break-word; color: var(--texte); }
.contenu-riche h2 { margin-top: 1.6em; }
.contenu-riche h3 { margin-top: 1.4em; }
.contenu-riche ul, .contenu-riche ol { padding-left: 1.4em; margin: 0 0 1em; }
.contenu-riche li { margin-bottom: .3em; }
.contenu-riche blockquote {
    margin: 1.4em 0;
    padding: 8px 20px;
    border-left: 4px solid var(--vert);
    background: var(--panneau);
    color: var(--bleu-texte);
}
.contenu-riche img { display: block; border-radius: 10px; margin: 1.2em auto; }
.contenu-riche pre { background: #111827; color: #e5e7eb; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
.contenu-riche hr { border: 0; border-top: 1px solid var(--bordure); margin: 2em 0; }
.contenu-riche > :first-child { margin-top: 0; }
.contenu-riche > :last-child { margin-bottom: 0; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.contenu-riche .ql-indent-1 { padding-left: 3em; }
.contenu-riche .ql-indent-2 { padding-left: 6em; }

/* ---------- Espace membre ---------- */
.grille-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tuile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    color: var(--texte);
    transition: border-color .15s, transform .15s;
}
.tuile:hover { border-color: var(--bleu); transform: translateY(-2px); text-decoration: none; }
.tuile strong { color: var(--bleu-titre); font-size: 1.05rem; }
.tuile span:last-child { color: var(--texte-doux); font-size: .95rem; }
.tuile-icone { color: var(--bleu); font-size: 1.7rem; margin-bottom: 6px; line-height: 1; }
.tuile-admin { background: linear-gradient(180deg, #fff, var(--vert-clair)); }
.infos-compte { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.infos-compte p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: .97rem; }
.infos-compte span:first-child { color: var(--texte-doux); }
.annuaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 8px; }
.fiche {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.fiche-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.fiche-texte strong { color: var(--bleu-texte); }
.fiche-texte p { margin: 2px 0; font-size: .95rem; color: var(--texte); }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 30px; }
.pagination a, .pagination span {
    min-width: 40px;
    padding: 7px 12px;
    text-align: center;
    border-radius: var(--rayon-petit);
    border: 1px solid var(--bordure);
    background: var(--surface);
    color: var(--bleu-texte);
    font-weight: 600;
}
.pagination a:hover { border-color: var(--bleu); text-decoration: none; }
.pagination .actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pagination .points { border-color: transparent; background: none; }

/* =====================================================================
   Administration
   ===================================================================== */
.espace-admin { background: #f1f4f9; }
.espace-admin .barre {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bleu);
    color: #fff;
}
.espace-admin .barre-int { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 20px; }
.espace-admin .logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.espace-admin .logo img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.espace-admin .logo:hover { text-decoration: none; }
.logo-sous {
    font-family: var(--police);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bleu-texte);
    background: var(--vert-vif);
    padding: 2px 8px;
    border-radius: 999px;
}
.espace-admin .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.espace-admin .nav > a, .espace-admin .nav-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--rayon-petit);
    color: #fff;
    font: inherit;
    font-weight: 600;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.espace-admin .nav > a:hover, .espace-admin .nav-lien:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.espace-admin .menu-bouton {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--rayon-petit);
    background: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
@media (max-width: 860px) {
    .espace-admin .menu-bouton { display: inline-flex; }
    .espace-admin .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 16px 16px;
        background: var(--bleu-fonce);
    }
    .espace-admin.menu-ouvert .nav { display: flex; }
}
.admin-grille { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.admin-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 22px 12px;
    background: var(--surface);
    border-right: 1px solid var(--bordure);
}
.admin-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--rayon-petit);
    color: var(--bleu-texte);
    font-weight: 600;
}
.admin-menu a .ic { color: var(--bleu); opacity: .75; }
.admin-menu a .compteur { margin-left: auto; }
.admin-menu a:hover { background: var(--fond); text-decoration: none; }
.admin-menu a.actif { background: var(--bleu-clair); color: var(--bleu); }
.admin-menu a.actif .ic { opacity: 1; }
.admin-menu .menu-titre { margin: 14px 14px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); }
.compteur {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}
.admin-role { margin-top: auto; padding: 18px 14px 0; font-size: .86rem; color: var(--texte-doux); line-height: 2; }
.admin-principal { padding: 30px 34px 56px; min-width: 0; }
.admin-principal h1 { font-size: 1.65rem; }
@media (max-width: 920px) {
    .admin-grille { grid-template-columns: 1fr; }
    .admin-menu {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--bordure);
    }
    .admin-menu a { white-space: nowrap; }
    .admin-menu .menu-titre, .admin-role { display: none; }
    .admin-principal { padding: 22px 16px 44px; }
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
    display: block;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    color: var(--texte);
}
a.stat:hover { border-color: var(--bleu); text-decoration: none; }
.stat .valeur { display: block; font-family: var(--police-titre); font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--bleu-titre); }
.stat .libelle { color: var(--texte-doux); font-size: .95rem; }
.stat.alerte-stat .valeur { color: var(--attention); }
.raccourcis-admin { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filtres input[type=search] { width: 240px; }
.filtres select { width: auto; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.onglets a {
    padding: 6px 14px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--surface);
    color: var(--bleu-texte);
    font-size: .95rem;
    font-weight: 600;
}
.onglets a:hover { border-color: var(--bleu); text-decoration: none; }
.onglets a.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.tableau-defilant {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}
.tableau { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tableau th {
    padding: 11px 16px;
    text-align: left;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-doux);
    background: #f8fafd;
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}
.tableau td { padding: 13px 16px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: #fafcfe; }
.tableau .sous-texte { color: var(--texte-doux); font-size: .88rem; }
.tableau .nowrap { white-space: nowrap; }
.tableau .actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.tableau .actions form { margin: 0; }
.tableau a.titre-lien { font-weight: 700; color: var(--bleu-texte); }
.tableau a.titre-lien:hover { color: var(--bleu); }
.tableau .personne { gap: 12px; }
.tableau .personne strong { display: block; color: var(--bleu-texte); }
@media (max-width: 700px) {
    /* Sur téléphone, chaque ligne du tableau devient une petite fiche */
    .tableau thead { display: none; }
    .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
    .tableau tr { padding: 14px 16px; border-bottom: 1px solid var(--bordure); }
    .tableau tr:last-child { border-bottom: 0; }
    .tableau td { padding: 3px 0; border: 0; }
    .tableau td:empty { display: none; }
    .tableau .nowrap { white-space: normal; }
    .tableau .actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
    .tableau .personne { margin-bottom: 6px; }
}

/* Formulaires d'édition */
.grille-edition { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.grille-edition .carte + .carte { margin-top: 20px; }
@media (max-width: 1040px) { .grille-edition { grid-template-columns: 1fr; } }
.titre-carte { margin-bottom: 14px; }
input.grand-titre { font-size: 1.3rem; font-weight: 700; padding: 12px 14px; }
.editeur-zone { background: #fff; }
.ql-toolbar.ql-snow { border-color: var(--bordure-champ); border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; font-family: inherit; }
.ql-container.ql-snow { border-color: var(--bordure-champ); border-radius: 0 0 var(--rayon-petit) var(--rayon-petit); font-family: inherit; font-size: 1.05rem; }
.editeur-zone .ql-editor { min-height: 380px; line-height: 1.7; }
textarea.html-brut { min-height: 380px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9rem; }
.apercu-image { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--rayon-petit); margin-bottom: 10px; border: 1px solid var(--bordure); background: var(--fond); }
.zone-danger { margin-top: 20px; }
.details-contenu { font-size: .92rem; color: var(--texte-doux); margin: 14px 0 0; }

/* Page d'installation */
.page-installation { background: var(--fond); }
.page-installation .contenu-page { padding: 40px 0 60px; }
.verifs { list-style: none; padding: 0; margin: 0 0 24px; }
.verifs li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.verifs li:last-child { border-bottom: 0; }
.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}
.verifs .ok .pastille { background: var(--succes); }
.verifs .ko .pastille { background: var(--danger); }
.verifs .avert .pastille { background: #d38b00; }

/* Logo et intertitres de l'administration */
.logo-avec-image::before { display: none; }
.logo img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.admin-menu-titre { display: block; margin: 16px 14px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); }
@media (max-width: 920px) { .admin-menu-titre { display: none; } }

/* Formulaires de l'administration : photos, documents, messages */
.grille-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.champ-image { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.champ-image > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ-image label:not(.case) { font-weight: 600; font-size: .95rem; }
.champ-image .apercu-image { width: 132px; height: 84px; margin: 0; object-fit: cover; flex-shrink: 0; }
.apercu-vide { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--panneau); color: var(--texte-doux); font-size: .85rem; text-align: center; border: 1px dashed var(--bordure-champ); border-radius: var(--rayon-petit); }
.apercu-logo, .champ-image .apercu-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; }
.sous-titre-form { margin: 22px 0 6px; font-size: 1.02rem; }
.barre-enregistrer { position: sticky; bottom: 0; z-index: 5; margin-top: 20px; padding: 14px 0; background: linear-gradient(0deg, #f1f3f8 70%, rgba(241, 243, 248, 0)); }
.miniature { display: block; width: 64px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--panneau); }
.miniature-logo { object-fit: contain; background: #fff; border: 1px solid var(--bordure); }
.miniature-vide { display: flex; align-items: center; justify-content: center; color: #9db4d1; font-size: 18px; }
.envoi-multiple { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.envoi-multiple > div:first-child { flex: 1 1 340px; }
.envoi-multiple .aide { margin: 0; }
.fichier-actuel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; overflow-wrap: anywhere; }
.fichier-actuel .ic { color: var(--bleu); }
.tableau tr.non-lu td { background: #f6faff; }
.tableau tr.non-lu .titre-lien { font-weight: 800; }
.pastille-non-lu { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--vert); vertical-align: 2px; }
.message-lu .personne { padding-bottom: 16px; border-bottom: 1px solid var(--bordure); }
.message-date { margin-left: auto; }
.message-texte { margin: 20px 0 26px; font-size: 1.05rem; line-height: 1.65; white-space: normal; overflow-wrap: break-word; }
.lien-alerte { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lien-alerte:hover { text-decoration: none; filter: brightness(.98); }
@media (max-width: 760px) {
    .grille-images { grid-template-columns: 1fr; }
    .champ-image .apercu-image { width: 104px; height: 70px; }
}