/* ==========================================================================
   ARTAWEB — Administration · admin-modules.css
   --------------------------------------------------------------------------
   Modules et finitions : restes de l'éditeur de zone, SEO/GEO, dégradé de la charte, comptes, glisser-déposer.

   CE FICHIER EST UNE PART D'UN TOUT. `admin.css` faisait 8 026 lignes et
   274 Ko : impossible à parcourir, impossible à situer. Il a été DÉCOUPÉ le
   2026-09-09 — découpé, pas réécrit : la concaténation des cinq parts, dans
   l'ordre où adminStylesheetLinks() les charge, redonne l'original CARACTÈRE
   POUR CARACTÈRE. L'audit le demandait dans ces termes : « le découper, oui ;
   le réécrire, non — le risque dépasse largement le gain ».

   L'ORDRE COMPTE. Ces feuilles se surchargent l'une l'autre ; les charger
   dans un autre ordre change le rendu. Elles sont donc listées en UN seul
   endroit : adminStylesheetLinks(), dans includes/admin-assets.php.
   ========================================================================== */

/* ==========================================================================
   EN-TÊTE & PIED : CE QUI RESTE DE L'ANCIEN ÉDITEUR DE ZONE
   L'en-tête et le pied se composent dans l'éditeur de section depuis l'étape E2 du moteur commun ; l'ancien
   éditeur (admin/includes/zone-editor.php, js/admin-zone.js) et ses quelque trois cents lignes de règles sont
   retirés à l'étape E3 (2026-10-22). Restent les classes qu'emploient encore les écrans d'aujourd'hui — le
   préfixe `admin-hd-` (« header/footer designer ») est gardé pour ne pas les renommer partout :
     · les vignettes « Repartir d'un modèle » (admin/includes/zone-section.php) ;
     · les cases à cocher d'un champ « plusieurs choix » (`$renderFieldControl`, admin/blocks.php) ;
     · le numéro rond des étapes d'Autour des pages (admin/emplacements.php).
   ========================================================================== */

/* ----- Modèles de départ ----- */
.admin-hd-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ad-space-3);
}

.admin-hd-tpl {
    display: flex;
    flex-direction: column;
    gap: var(--ad-space-2);
    padding: var(--ad-space-3);
    text-align: left;
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.admin-hd-tpl:hover { border-color: var(--ad-accent); }
.admin-hd-tpl.is-active {
    border-color: var(--ad-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ad-accent) 25%, transparent);
}

/* Vignette : une maquette de l'agencement, pas une image. Les cellules qui
   portent un élément sont teintées — c'est ce qui distingue les modèles. */
.admin-hd-tpl__thumb {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: var(--ad-bg);
    border: 1px solid var(--ad-border);
    border-radius: 4px;
}
.admin-hd-tpl__row {
    display: grid;
    grid-template-columns: var(--cols, 1fr);
    gap: 3px;
    min-height: 14px;
}
.admin-hd-tpl__cell {
    background: color-mix(in srgb, var(--ad-border) 55%, transparent);
    border-radius: 2px;
}
.admin-hd-tpl__cell.is-filled { background: color-mix(in srgb, var(--ad-accent) 55%, transparent); }

.admin-hd-tpl__label { font-weight: 600; }
.admin-hd-tpl__desc  { font-size: var(--ad-fs-sm); color: var(--ad-muted); line-height: 1.4; }

/* ----- Plusieurs cases parmi une liste ----- */
.admin-hd-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ad-space-1) var(--ad-space-3);
}
.admin-hd-check {
    display: flex;
    align-items: center;
    gap: var(--ad-space-2);
    text-transform: none;
    letter-spacing: 0;
}

/* ----- Le numéro rond d'une étape (Autour des pages) ----- */
.admin-hd-step__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ad-accent);
    color: #fff;
    font-size: var(--ad-fs-sm);
    font-weight: 700;
    line-height: 1;
}

/* Élément déjà posé et à exemplaire unique : proposé mais inerte (fenêtre « + Composant » d'une zone). */
.block-picker__item[disabled] { opacity: .4; cursor: not-allowed; }

/* « Colonnes » : le second menu (les largeurs) caché quand il n'a qu'un choix. */
[data-col-picker] select[hidden] { display: none !important; }

/* ============================================================
   CONTRÔLES DE LA PAGE (écran SEO / GEO)
   ============================================================
   Le verdict est ÉCRIT — « 1 ✓ », « celle du site », « H1 → H3 » — la couleur
   ne fait que le renforcer : un daltonien lit le texte, pas la teinte. Le
   détail complet est dans l'infobulle de la case. */
[data-h1-cell] { font-variant-numeric: tabular-nums; font-weight: 600; }
[data-h1-cell].is-ok   { color: var(--ad-success); }
[data-h1-cell].is-warn { color: var(--ad-warn); }

/* ============================================================
   ÉCRAN SEO / GEO
   ============================================================ */

/* Carte d'introduction : elle explique, elle ne règle rien. Le fond doux la
   distingue des cartes où l'on agit, sans en faire une alerte. */
.admin-card--intro { background: var(--ad-bg); }
.admin-card--intro p { margin: 0 0 var(--ad-space-2); }
.admin-card--intro p:last-child { margin-bottom: 0; }

/* Aperçu d'un fichier servi tel quel (robots.txt) : c'est du texte destiné à
   une machine, il se lit en chasse fixe et ne doit être ni reformaté ni coupé
   au milieu d'une directive — d'où le défilement horizontal plutôt qu'un
   retour à la ligne automatique. */
.admin-code-preview {
    margin: var(--ad-space-2) 0 0;
    padding: var(--ad-space-3);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
    color: var(--ad-text);
    font: var(--ad-fs-sm)/1.6 var(--ad-font-mono);
    overflow-x: auto;
    white-space: pre;
}

/* ============================================================
   CHARTE — DÉGRADÉ DES TITRES
   ============================================================ */
.design-gradient {
    margin: 0 0 var(--ad-space-4);
    padding: var(--ad-space-3);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
}
/* Les niveaux qui prennent le dégradé : six cases sur une ligne, et l'état
   « aucun » dit en clair — c'est l'oubli qu'il fallait rendre visible. */
.design-gradient__levels { margin: 0 0 var(--ad-space-3); padding: 0; border: 0; }
.design-gradient__levels legend { padding: 0; margin-bottom: var(--ad-space-2); }
.design-gradient__level-list { display: flex; flex-wrap: wrap; gap: var(--ad-space-2) var(--ad-space-4); }
.design-gradient__status { margin: var(--ad-space-2) 0 0; font-size: 0.875rem; color: var(--ad-text); }
.design-gradient__status.is-none { color: var(--ad-muted); }
.design-gradient__modes { display: grid; gap: var(--ad-space-2); margin-bottom: var(--ad-space-3); }
.design-gradient__modes .admin-form__check { align-items: flex-start; }
.design-gradient__colors { margin-bottom: var(--ad-space-3); }
.design-gradient__dir { display: block; margin-bottom: var(--ad-space-3); }

/* L'échantillon montre le procédé RÉEL — un fond découpé à la forme des
   lettres — et pas une approximation : ce qu'on voit ici est ce que le site
   fera. Le repli `color` reste sous le dégradé pour les navigateurs qui ne
   savent pas le découper. */
.design-gradient__sample {
    margin: 0 0 var(--ad-space-2);
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ad-text);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .design-gradient__sample {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
@media (forced-colors: active) {
    .design-gradient__sample { background-image: none; color: CanvasText; }
}

/* ---- Saisie libre d'une police (Charte › Polices) ----
   Apparaît sous la liste quand « Autre police Google Fonts… » est choisi.
   Le champ prend la place, le bouton reste à sa taille : c'est le même
   principe que les autres rangées champ + bouton (cf. --ad-field-h). */
.design-font-custom {
    display: flex;
    gap: var(--ad-space-2);
    align-items: center;
    margin-top: var(--ad-space-2);
}
.design-font-custom input { flex: 1 1 auto; min-width: 0; }
body.admin-body .design-font-custom .btn { min-height: var(--ad-field-h); flex: 0 0 auto; }

/* ----------------------------------------------------------
   APERÇU DE LA LARGEUR D'UNE LIGNE, DANS L'ADMIN

   Sans lui, toutes les lignes s'affichent identiques quel que soit leur
   réglage : on ne découvre l'effet qu'en allant voir le site. L'admin montre
   donc la proportion — une ligne en 2/3 occupe les deux tiers de la zone.

   SEULE LA ZONE DES COLONNES SE RESSERRE, jamais la barre d'outils : y
   comprimer le sélecteur de colonnes, les menus d'espace et de largeur
   rendrait l'écran moins utilisable pour le rendre plus parlant.
   ---------------------------------------------------------- */
.admin-row > .admin-cols {
    max-width: calc(100% * var(--rw, 1));
    margin-inline: auto;
    transition: max-width .18s ease;
}
/* Une ligne en pleine largeur de l'écran déborde jusqu'aux bords du panneau,
   là où les autres restent en retrait : la différence se lit d'un coup d'œil. */
.admin-row--full > .admin-cols {
    max-width: none;
    margin-inline: calc(var(--ad-space-3) * -1);
}

/* Répéteur de conditions d'affichage.
   Une règle par ligne : champ pilote, opérateur, réponse attendue, corbeille.
   La corbeille disparaît quand il ne reste qu'une règle — en retirer la
   dernière laisserait la case « sous condition » cochée devant rien. */
.fb-cond-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ad-space-2);
    margin-bottom: var(--ad-space-2);
    padding: var(--ad-space-2);
    border-left: 3px solid var(--ad-accent);
    border-radius: 0 var(--ad-r-sm) var(--ad-r-sm) 0;
    background: var(--ad-bg);
}
.fb-cond-rule select { width: auto; min-width: 7rem; }
.fb-cond-rule [data-fb-remove-rule],
.fb-cond-rule [data-fb-remove-map] { margin-left: auto; }

/* Correspondances du webhook — même rangée que les règles de condition.
   La flèche dit le SENS : la clé de gauche reçoit la valeur du champ de droite.
   Sans elle, les deux colonnes se lisent dans un ordre ou dans l'autre. */
.fb-cond-rule [data-fb-map-key] { flex: 1 1 12rem; min-width: 9rem; }
.fb-map__arrow { color: var(--ad-text-mute); font-size: 1.1em; text-align: center; }

/* LES NOMS ENVOYÉS : un tableau à deux colonnes NOMMÉES. Rangées et en-tête
   partagent la même grille — colonnes fixes aux deux bouts du milieu — pour que
   « Nom attendu par l'application » et « Champ du formulaire » tombent pile
   au-dessus de ce qu'ils désignent. Replié (<details>) tant qu'il est vide. */
.fb-map > summary {
    cursor: pointer;
    color: var(--ad-text-soft);
    font-size: var(--ad-fs-sm);
    padding: var(--ad-space-1) 0;
}
.fb-map[open] > summary { margin-bottom: var(--ad-space-3); color: var(--ad-text); }
.fb-map__entete,
.fb-cond-rule.fb-map__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: var(--ad-space-2);
}
.fb-map__entete {
    padding: 0 var(--ad-space-2) var(--ad-space-1) calc(var(--ad-space-2) + 3px);
    font-size: var(--ad-fs-hint);
    font-weight: 600;
    color: var(--ad-text-soft);
}
.fb-cond-rule.fb-map__row select,
.fb-cond-rule.fb-map__row [data-fb-map-key] { width: 100%; min-width: 0; }
.fb-cond-rule.fb-map__row [data-fb-remove-map] { margin-left: 0; }
@media (max-width: 599.98px) {
    .fb-map__entete { display: none; }
    .fb-cond-rule.fb-map__row { grid-template-columns: minmax(0, 1fr) 2.5rem; }
    .fb-cond-rule.fb-map__row .fb-map__arrow { display: none; }
}
.fb-field__cond-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--ad-fs-sm);
    color: var(--ad-text-mute);
}
.fb-field__cond-mode select { width: auto; }

/* Saisie d'une formule : chasse fixe, parce qu'on y compte des parenthèses. */
.admin-form__input--mono {
    font-family: var(--ad-font-mono);
    font-size: var(--ad-fs-sm);
}
.fb-formula__saisie { resize: vertical; min-height: 4.5rem; field-sizing: content; }
.fb-formula__aide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ad-space-2);
    margin-top: var(--ad-space-2);
}
.fb-formula__aide select { width: auto; max-width: 22rem; }

/* Sous-titre à l'intérieur d'une carte de réglages (un prestataire de paiement
   parmi d'autres). Plus discret qu'un <h2>, qui titre la carte entière. */
.admin-form__subtitle {
    margin: var(--ad-space-5) 0 var(--ad-space-2);
    font-size: var(--ad-fs-md);
    font-weight: 600;
    color: var(--ad-text);
}
.admin-form__subtitle:first-of-type { margin-top: var(--ad-space-4); }

/* Ce que fait chaque modèle, sous le formulaire de création. Une phrase par
   modèle : le menu déroulant ne peut pas les expliquer, et une infobulle ne se
   lit que si on la cherche. */
.fb-templates {
    margin: var(--ad-space-3) 0 0;
    padding-left: var(--ad-space-4);
    font-size: var(--ad-fs-sm);
    color: var(--ad-text-mute);
}
.fb-templates li { margin-bottom: var(--ad-space-1); }
.fb-templates strong { color: var(--ad-text); }

/* Bloc dépliable d'une fiche d'aide : des exemples à un clic, qui ne repoussent
   pas plus bas ce que tout le monde vient chercher. */
.admin-help__details {
    margin: var(--ad-space-3) 0;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg-alt);
}
.admin-help__details > summary {
    padding: var(--ad-space-2) var(--ad-space-3);
    cursor: pointer;
    font-size: var(--ad-fs-sm);
    font-weight: 500;
    color: var(--ad-accent-dk);
}
.admin-help__details > summary:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: -2px; }
.admin-help__details[open] > summary { border-bottom: 1px solid var(--ad-border); }
.admin-help__details-body { padding: var(--ad-space-3); }
.admin-help__details-body > *:first-child { margin-top: 0; }
.admin-help__details-body > *:last-child  { margin-bottom: 0; }

/* --- Aperçu de l'illustration 404 (Réglages > Page 404) ----------------- */
/* Le SVG livré porte ses couleurs d'origine en attribut : il s'affiche donc
   correctement ici, dans une simple balise <img>, sans que css/404.css — qui
   n'habille que le site public — ait à être chargée dans l'admin. */
.admin-404-apercu {
    margin: var(--ad-space-3) 0 0;
    padding: var(--ad-space-3);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-md);
    background: var(--ad-bg-alt);
    text-align: center;
}
.admin-404-apercu img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}
.admin-404-apercu figcaption {
    margin-top: var(--ad-space-2);
    font-size: var(--ad-fs-hint);
    color: var(--ad-text-mute);
}

/* --- Essayer une recherche (Réglages > Recherche, 2026-10-22) ------------ */
/* Le champ, la langue et le bouton sur une ligne ; les résultats comme le visiteur
   les lit : titre, adresse, extrait aux mots surlignés. */
.recherche-essai { display: flex; flex-wrap: wrap; gap: var(--ad-space-2); align-items: center; }
.recherche-essai .admin-form__input[type="search"] { flex: 1 1 16rem; }
.recherche-essai__liste { margin: var(--ad-space-3) 0 0; padding-left: 1.4rem; display: grid; gap: var(--ad-space-3); }
.recherche-essai__liste a { font-weight: 600; }
.recherche-essai__url { display: block; font-size: var(--ad-fs-hint); color: var(--ad-text-mute); }
.recherche-essai__liste p { margin: 4px 0 0; font-size: var(--ad-fs-sm); }
.recherche-essai__liste mark { background: var(--ad-accent-sf); color: inherit; padding: 0 2px; border-radius: 2px; }

/* --- Aperçu du menu : le bouton à droite du menu ------------------------ */
/* Montré tel que le visiteur le voit — un bouton. Il ouvre sa page dans la
   liste quand il mène à une page du site, sinon l'éditeur d'en-tête
   (renderMenuPreview(), 2026-10-21) : `button` ou `a`, même habit. */
.admin-menu-preview__cta {
    border: 0;
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px var(--ad-space-3);
    border-radius: var(--ad-r-pill);
    background: var(--ad-accent);
    color: #fff;
    font-size: var(--ad-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
.admin-main a.admin-menu-preview__cta { color: #fff; text-decoration: none; }
.admin-menu-preview__cta:hover { background: color-mix(in srgb, var(--ad-accent) 85%, #000); }
.admin-menu-preview__cta:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.admin-menu-preview__cta + .admin-menu-preview__cta { margin-left: var(--ad-space-2); }

/* --- Dialogue du serveur SMTP (Réglages › E-mails & anti-spam) --------------------- */
/* Sortie brute d'un serveur tiers : chasse fixe, et un défilement à elle —
   un message d'erreur long ne doit pas étirer l'écran des réglages. */
.admin-smtp-log {
    margin: var(--ad-space-3) 0 0;
    padding: var(--ad-space-3);
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--ad-border);
    border-left: 3px solid var(--ad-border-str);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg-sunk);
    font-family: var(--ad-font-mono);
    font-size: var(--ad-fs-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-smtp-log.is-ok { border-left-color: var(--ad-success); }
.admin-smtp-log.is-ko { border-left-color: var(--ad-danger); }
/* Parti, mais le SPF du domaine risque de le faire refuser (essai sans SMTP). */
.admin-smtp-log.is-attention { border-left-color: var(--ad-warn); }

/* Bouton « Au hasard » des champs mot de passe (écran Comptes). Posé dans la
   même boîte que le bouton œil : discret, en texte plutôt qu'en icône — une
   icône de dés n'aurait rien dit de ce qu'elle fait. */
.admin-form__password-suggest {
    position: absolute;
    right: 40px;                 /* à gauche de l'œil */
    top: 50%;
    transform: translateY(-50%);
    padding: 0 8px;
    height: 26px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-surface);
    color: var(--ad-text-soft);
    font-size: var(--ad-fs-xs);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
.admin-form__password-suggest:hover { color: var(--ad-text); border-color: var(--ad-text-soft); }
.admin-form__password-suggest:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 1px; }
/* Le champ laisse la place aux DEUX boutons. */
.admin-form__password:has(.admin-form__password-suggest) .admin-form__input { padding-right: 116px; }

/* ...et il prend TOUTE la rangée. Sans cela, le champ tombe dans une colonne de
   ~180 px, les deux boutons en mangent 116, et le mot de passe tiré s'affiche
   tronqué — « bKVJzbW… » au lieu des vingt signes. Or il n'a qu'un seul usage :
   être lu une fois pour être transmis. Un champ qui le cache ne sert à rien. */
.admin-form__row .admin-form__group:has(.admin-form__password-suggest) { grid-column: 1 / -1; }

/* ============================================================
   TABLE DES COMPTES — repli progressif des colonnes
   ============================================================
   Un tableau qui déborde ne se lit pas : sur un écran étroit, ce sont les
   BOUTONS D'ACTION qui sortent du cadre en premier, c'est-à-dire la seule
   chose qu'on est venu faire. On retire donc les colonnes une par une, de la
   moins nécessaire à la plus, dans cet ordre :

     ≤ 1100 px  la pastille  — décorative, ses initiales sont juste à côté
     ≤ 1000 px  la couleur   — un repère de profil, pas une donnée de gestion
     ≤  700 px  le rôle et la connexion — repliés sous le nom, pas perdus

   Restent alors : qui c'est, et ce qu'on peut lui faire.

   LES SEUILS SONT MESURÉS, PAS DEVINÉS. La barre latérale de l'admin reste
   déployée jusque vers 900 px : à 950 px le tableau ne dispose que de 624 px
   alors qu'il en réclamait 680. C'est pourquoi les deux premiers seuils sont
   si hauts — ils doivent tomber AVANT que la place ne manque, pas après. */

/* Replis sous le nom : cachés tant que leur colonne existe. */
.admin-table--users .u-vue-repliee,
.admin-table--users .u-role-replie { display: none; }
.admin-table--users .u-role-replie { margin-top: 4px; }

@media (max-width: 1100px) {
    .admin-table--users .u-col-pastille { display: none; }
}
@media (max-width: 1000px) {
    .admin-table--users .u-col-couleur { display: none; }
}
@media (max-width: 700px) {
    .admin-table--users .u-col-vue,
    .admin-table--users .u-col-role { display: none; }
    .admin-table--users .u-vue-repliee,
    .admin-table--users .u-role-replie { display: block; }

    /* Il ne reste que « qui » et « quoi en faire ». Les deux boutons passent
       l'un sous l'autre : côte à côte, ils réclamaient 194 px pour un conteneur
       qui n'en offre que 333 sur un téléphone. */
    .admin-table--users .admin-table__actions { white-space: normal; }
    .admin-table--users .admin-table__actions .btn:not(.btn--icon) { display: block; width: 100%; margin: 0 0 4px; }
    .admin-table--users td, .admin-table--users th { padding-left: 8px; padding-right: 8px; }
}

/* Filtre par formulaire (Demandes reçues) : une ligne, sous les onglets
   Réception / Spam. En ligne plutôt qu'en bloc — c'est un affinage de la vue,
   pas un formulaire à remplir. */
.subs-formfilter {
    display: flex;
    align-items: center;
    gap: var(--ad-space-2);
    flex-wrap: wrap;
    margin: var(--ad-space-3) 0 0;
}
.subs-formfilter .admin-form__label { margin: 0; white-space: nowrap; }
.subs-formfilter .admin-form__select { width: auto; min-width: 14rem; max-width: 100%; }

/* ==========================================================================
   Glisser-déposer réordonnable — l'habillage commun
   --------------------------------------------------------------------------
   Posé par AdminCore.wireDragReorder() (js/admin-core.js), qui a remplacé les
   douze implémentations recopiées. Celles-ci écrivaient leur retour visuel en
   STYLE EN LIGNE (`style.borderTop`, `style.opacity`) : impossible à ajuster
   sans rouvrir douze fichiers, et invisible à qui lit la feuille de style.
   Trois classes suffisent, et elles se lisent ici.
   ========================================================================== */

.is-dragging {
    opacity: .5;
}

/* Le trait marque le point de DÉPÔT, pas l'élément survolé — d'où le haut ou
   le bas selon la moitié où se trouve le curseur. Sans cette distinction, on
   ne pouvait pas déposer en dernière position. */
.is-drag-over {
    box-shadow: inset 0 2px 0 0 var(--ad-accent);
}
.is-drag-over-after {
    box-shadow: inset 0 -2px 0 0 var(--ad-accent);
}

/* La poignée dit ce qu'elle permet : saisir, puis déplacer. */
[draggable="true"] {
    cursor: grabbing;
}

/* Monogramme de favicon (Charte graphique). Trois champs serrés sur une ligne :
   deux lettres et deux couleurs n'ont pas besoin de plus, et les mettre en
   colonne éloignerait les réglages de l'aperçu qu'ils pilotent. */
.design-mono__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ad-space-sm, .5rem) var(--ad-space-md, 1rem);
    align-items: flex-end;
    margin-bottom: .6rem;
}
.design-mono__field { display: flex; flex-direction: column; gap: .2rem; }
.design-mono__field > span {
    font-size: var(--ad-fs-hint, 12px);
    color: var(--ad-text-mute, #6b7180);
}
.design-mono__field input[type="text"] {
    width: 4.5rem;
    text-align: center;
    text-transform: uppercase;
}
.design-mono__field input[type="color"] {
    width: 3rem;
    height: 2.1rem;
    padding: 2px;
    border: 1px solid var(--ad-line, #d9dde3);
    border-radius: var(--ad-radius-sm, 4px);
    background: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   « AUTOUR DES PAGES » — le schéma des quatre emplacements
   ---------------------------------------------------------------------------
   Dessiné en CSS, sans image à charger : c'est la réponse la plus courte à
   « ça atterrit où ? », et elle suit la charte de l'admin toute seule.
   Purement décoratif — le gabarit le pose en `aria-hidden`, les quatre noms
   sont déjà lus dans les titres des cartes juste en dessous.
   ------------------------------------------------------------------------ */
/* LE SCHÉMA-SÉLECTEUR (2026-10-08). Quatre zones autour de « la page » : chacune est un onglet de l'admin
   (`.admin-page-tab`), habillé en zone. L'ancien schéma, décoratif, est devenu le moyen de choisir. */
.empl-pages > .btn { margin-top: var(--ad-space-3); }

/* LE PLAN (2026-10-20) — une page en miniature dans sa carte : en-tête et pied
   en bandes grises (décor), le contenu au centre, les quatre zones autour. */
.empl-plan__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.empl-plan__aide { font-size: var(--ad-fs-sm); font-weight: 400; color: var(--ad-text-mute); }
.admin-page-tabs.empl-carte {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2.2fr) minmax(7.5rem, 1fr);
    grid-template-areas: "tete tete tete" "avant avant avant" "gauche page droite" "apres apres apres" "pied pied pied";
    gap: 10px;
    max-width: 44rem;
    margin: var(--ad-space-4) auto 0;
    padding: 14px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-md);
    background: var(--ad-bg-alt);
}
.empl-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border-radius: var(--ad-r-xs);
    background: var(--ad-bg-sunk);
    color: var(--ad-text-mute);
    font-size: var(--ad-fs-xs);
    letter-spacing: .04em;
}
.empl-deco--tete { grid-area: tete; }
.empl-deco--pied { grid-area: pied; }
.empl-carte .empl-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 3.6rem;
    margin: 0;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    color: var(--ad-text);
    background: var(--ad-bg);
    border: 1px dashed var(--ad-border-str);
    border-radius: var(--ad-r-sm);
    transition: border-color var(--ad-trans) ease, background var(--ad-trans) ease, box-shadow var(--ad-trans) ease;
}
.empl-carte .empl-zone:hover { border-color: var(--ad-accent); color: var(--ad-accent); box-shadow: var(--ad-shadow-sm); }
.empl-carte .empl-zone.is-active {
    border: 2px solid var(--ad-accent);
    background: var(--ad-accent-sf);
    color: var(--ad-accent);
    box-shadow: var(--ad-shadow-sm);
}
.empl-carte .empl-zone:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.empl-carte .empl-zone .admin-badge { font-weight: 600; }
.empl-zone--avant  { grid-area: avant; }
.empl-zone--gauche { grid-area: gauche; }
.empl-zone--droite { grid-area: droite; }
.empl-zone--apres  { grid-area: apres; }
/* L'EN-TÊTE ET LE PIED, zones du schéma (2026-10-22) : des bandes, à bord PLEIN — toujours là, elles ne se
   suppriment pas —, quand les quatre emplacements, facultatifs, gardent leur pointillé. */
.empl-zone--tete { grid-area: tete; }
.empl-zone--pied { grid-area: pied; }
.empl-carte .empl-zone--fixe {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 2.75rem;
    border-style: solid;
    background: var(--ad-bg-sunk);
}
.empl-carte .empl-zone--fixe.is-active { background: var(--ad-accent-sf); }
/* Le contenu de la page : des lignes de « texte » grisées, pour qu'on lise
   une page et pas une case vide. */
.empl-page {
    grid-area: page;
    display: flex;
    align-items: flex-start;
    min-height: 7.5rem;
    padding: 12px 14px;
    border-radius: var(--ad-r-sm);
    background:
        repeating-linear-gradient(to bottom, transparent 0 34px, var(--ad-bg-sunk) 34px 42px) 14px 0 / calc(100% - 28px) 100% no-repeat,
        var(--ad-bg);
    border: 1px solid var(--ad-border);
    color: var(--ad-text-mute);
    font-size: var(--ad-fs-xs);
    letter-spacing: .04em;
}
@media (max-width: 520px) {
    .admin-page-tabs.empl-carte { grid-template-columns: 1fr 1fr; grid-template-areas: "tete tete" "avant avant" "gauche droite" "page page" "apres apres" "pied pied"; }
}

/* L'interrupteur de collage d'une colonne latérale : la case, le bouton et la
   note tiennent ensemble, la note passant à la ligne sous les deux premiers. */
.empl-colle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: .8rem 0;
}
.empl-colle > .admin-form__hint { flex: 1 0 100%; margin: 0; }

/* Les deux boutons d'un emplacement : composer, et s'en défaire. Séparés par
   `auto` plutôt que collés — on ne met pas une suppression à côté de l'action
   qu'on vient chercher. */
/* L'en-tête d'une carte d'emplacement : son nom à gauche, son action à droite.
   `align-items: baseline` et non `center` — le bouton s'aligne sur la ligne de
   base du titre, pas sur son milieu, sinon il flotte au-dessus des lettres. */
.empl-carte__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ad-space-3);
    flex-wrap: wrap;
}
.empl-carte__tete > h2 { margin: 0; }
.empl-carte__gestes { display: inline-flex; align-items: center; gap: var(--ad-space-2); }

/* SUR QUELLES PAGES ? — le ciblage d'un emplacement, et sa grille. */
.empl-pages {
    margin-top: var(--ad-space-4);
    padding-top: var(--ad-space-4);
    border-top: 1px solid var(--ad-border);
}
.empl-pages__titre {
    margin: 0 0 var(--ad-space-2);
    /* le dessin des intertitres de groupe : admin-socle.css (2026-10-22) */
}
.empl-pages__titre + .empl-pages__titre,
.empl-pages__liste + .empl-pages__titre,
.admin-table-scroll + .empl-pages__titre { margin-top: var(--ad-space-4); }

/* UNE SEULE COLONNE. La liste de ciblage d'un composant (.block-scope__pages)
   est une grille multi-colonnes : les pages s'y écoulent de haut en bas puis
   reprennent à côté, et une rubrique se retrouve séparée de ses filles. On
   perdait l'arborescence alors que l'indentation était bien là. Ici, une page
   par ligne — la liste défile plutôt que de s'étaler. */
.empl-pages__liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 18rem;
    overflow-y: auto;
    margin: var(--ad-space-2) 0 var(--ad-space-3);
    padding: var(--ad-space-2) var(--ad-space-3);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
}
/* `--niv` est posé en ligne par le gabarit, comme partout ailleurs dans le CMS. */
.empl-pages__page { padding-left: calc(var(--niv, 0) * 1.1rem); }

/* LA GRILLE : composants en lignes, pages choisies en colonnes. */
.empl-grille th[scope="col"] { white-space: normal; min-width: 6rem; }
.empl-grille th[scope="row"] { font-weight: 500; white-space: nowrap; }
.empl-grille td { text-align: center; }
.empl-grille__case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* La case seule est une cible de 13 px. L'étiquette l'élargit à 40, la
       taille minimale d'une cible tactile retenue partout dans ce back-office. */
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
}

/* LES ORIGINAUX MIS DE CÔTÉ — une ligne sous les dossiers de la médiathèque.
   Volontairement PAS une tuile : ces fichiers ne sont pas des médias, et une
   tuile parmi les dossiers promettrait qu'on peut les ouvrir ou y déposer
   quelque chose. Discrète mais pas muette — elle ne paraît que s'il y a
   quelque chose à trier, autant qu'elle se remarque alors. */
.media-quarantaine {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--ad-space-4);
    padding: .6rem .85rem;
    border: 1px solid var(--ad-warn, #9a6200);
    border-radius: var(--ad-radius, 8px);
    background: var(--ad-warn-bg, #fff4e5);
    color: var(--ad-warn, #9a6200);
    font-size: var(--ad-fs-sm, .875rem);
}
.media-quarantaine svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.media-quarantaine span { flex: 1 1 auto; }
.media-quarantaine a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   GALERIES PHOTO (admin/galerie.php, onglet Photos — js/admin-galerie.js)
   Une grille de vignettes (taille 480 de la médiathèque) : on compose une
   galerie en la voyant, pas dans un tableau de 500 lignes. L'ordre au glisser
   et au clavier vient du registre LISTES (js/admin-core.js) ; ses repères de
   dépôt (.is-drag-over) sont ceux de toutes les listes, plus haut.
   ========================================================================== */
.gal-admin__outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ad-space-2);
    margin-bottom: var(--ad-space-3);
}
.gal-admin__tri { display: inline-flex; align-items: center; gap: var(--ad-space-2); font-size: var(--ad-fs-sm); }
.gal-admin__depot {
    margin-bottom: var(--ad-space-4);
    padding: var(--ad-space-3) var(--ad-space-4);
    border: 2px dashed var(--ad-border);
    border-radius: var(--ad-radius);
    background: var(--ad-bg-alt);
}
.gal-admin__depot p { margin: 0 0 var(--ad-space-2); }
.gal-admin__depot.is-dropping { border-color: var(--ad-accent); background: var(--ad-accent-sf); }
.gal-admin__tout { margin-bottom: var(--ad-space-3); }

.gal-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--ad-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.gal-photo {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    background: var(--ad-surface);
    overflow: hidden;
}
.gal-photo.is-cover { border-color: var(--ad-accent); box-shadow: 0 0 0 1px var(--ad-accent); }
.gal-photo__image {
    aspect-ratio: 4 / 3;
    background: var(--ad-bg-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gal-photo__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-photo__absent { font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
/* Poignée et case à cocher posées SUR l'image, dans les coins : la vignette
   garde toute sa place. Cibles de 32 px, assez grandes au doigt. */
.gal-photo__drag,
.gal-photo__choix {
    position: absolute;
    top: var(--ad-space-2);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--ad-radius);
    background: var(--ad-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.gal-photo__drag { left: var(--ad-space-2); cursor: grab; }
.gal-photo__drag svg { width: 1rem; height: 1rem; }
.gal-photo__choix { right: var(--ad-space-2); cursor: pointer; }
.gal-photo__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ad-space-2);
    min-width: 0;
}
.gal-photo__nom {
    font-size: var(--ad-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gal-photo__meta { font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-photo__badge {
    align-self: flex-start;
    font-size: var(--ad-fs-badge);
    font-weight: 600;
    color: var(--ad-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gal-photo__couv { align-self: flex-start; margin-top: 2px; }


/* Albums, filtres et gestes groupés de l'onglet Photos (étape 7). Des rangées
   qui passent à la ligne : sur un téléphone, rien ne déborde. */
.gal-albums {
    margin: var(--ad-space-md, 1rem) 0;
    padding: .75rem 1rem;
    border: 1px solid var(--ad-border, rgba(0, 0, 0, .12));
    border-radius: var(--ad-radius);
}
.gal-albums__titre { margin: 0 0 .5rem; font-size: 1rem; }
.gal-albums__liste {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gal-album { display: inline-flex; align-items: center; gap: .35rem; }
.gal-album input { width: 12rem; max-width: 60vw; }
.gal-filtres,
.gal-groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0;
}
/* `--small` fixe une largeur étroite : ici, chaque champ prend celle de son
   contenu (sinon « Ranger dans… » se lit « Ranger dar »), et la recherche le
   reste de la rangée. */
.gal-filtres .admin-form__input--small,
.gal-groupe .admin-form__input--small { width: auto; max-width: 100%; }
.gal-filtres input[type="search"] { flex: 1 1 12rem; min-width: 10rem; }
.gal-photo.is-masquee .gal-photo__image img { opacity: .45; }
.gal-photo__badge--album { background: var(--ad-accent-soft, rgba(79, 122, 23, .12)); }
.gal-photo__badge--masquee { font-style: italic; }
.gal-photo__legende { width: 100%; margin-top: .35rem; }
/* La langue des titres d'albums et des légendes (audit B7) : un champ par
   langue, seuls ceux de la langue choisie se montrent (js/admin-galerie.js).
   La règle est écrite parce que .admin-form__input pose son propre display. */
.gal-admin [data-gal-lang][hidden] { display: none; }
.gal-langues {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ad-space-2);
    margin-bottom: var(--ad-space-3);
}
.gal-langues__titre { font-weight: 600; }

/* L'onglet Sélections (étape 8). */
.gal-selection__mot { margin: 0 0 1rem; padding-left: .75rem; border-left: 3px solid var(--ad-accent, #4F7A17); }
.gal-selection__photos {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .75rem;
}
.gal-selection__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ad-radius); display: block; }
.gal-selection__nom { display: block; font-size: .8rem; font-family: var(--ad-mono, monospace); word-break: break-all; }
.gal-selection__note { display: block; font-size: .8rem; color: var(--ad-muted, #666); font-style: italic; }

/* La liste des modèles (galeries.php, onglet Modèles) : une rangée par
   modèle, son icône, son nom, et les deux gestes à droite. */
.gal-modeles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gal-modeles li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ad-space-3);
    padding: var(--ad-space-3) 0;
    border-top: 1px solid var(--ad-border);
}
.gal-modeles li:first-child { border-top: 0; }
.gal-modeles__icone {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ad-r-sm);
    background: var(--ad-accent-sf);
    color: var(--ad-accent);
}
.gal-modeles__texte { flex: 1 1 14rem; min-width: 0; }
.gal-modeles__texte a { font-weight: 600; }
.gal-modeles__texte small { display: block; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }

/* Les livrables (V1.5) : même cadre que les albums. */
.gal-livrables {
    margin: var(--ad-space-md, 1rem) 0;
    padding: .75rem 1rem;
    border: 1px solid var(--ad-border, rgba(0, 0, 0, .12));
    border-radius: var(--ad-radius);
}
.gal-photo__badge--livrable { background: var(--ad-accent-soft, rgba(79, 122, 23, .12)); }

/* L'aperçu du filigrane (galeries.php, Réglages d'une galerie). */
.gal-filigrane-apercu {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--ad-radius);
    border: 1px solid var(--ad-border, rgba(0, 0, 0, .12));
}

/* Galeries photo — la CRÉATION en trois questions (lot 3, 2026-10-01). Les
   questions d'une galerie privée se masquent quand « Tout le monde » est coché :
   CSS pur (:has()), aucun script — la CSP n'en veut pas en ligne. Sans :has(),
   elles restent simplement visibles, et le serveur les ignore pour une publique. */
.gal-creer { max-width: 60rem; }
.gal-creer > .admin-form__input,
.gal-creer > .admin-form__select { margin-bottom: var(--ad-space-2); }
.gal-creer .admin-fieldset .admin-form__check { display: block; margin: var(--ad-space-1) 0; }
.gal-creer .admin-fieldset .admin-form__select--small { margin: 0 0 var(--ad-space-2) var(--ad-space-5); }
.gal-creer > .btn { margin-top: var(--ad-space-4); }
.gal-creer:has(input[name="r[qui]"][value="public"]:checked) .gal-creer__prive { display: none; }

/* Langues & traductions, onglet Langues : le pourcentage traduit sous le code
   d'une langue, pour décider de l'activer en voyant où elle en est. */
.admin-lang-table__pct {
    display: block;
    margin-top: var(--ad-space-1);
    font-size: var(--ad-fs-sm);
    color: var(--ad-text-soft);
    white-space: nowrap;
}

/* =============================================================================
   Écran « Modules » : une ligne par module, une case à gauche.
   ============================================================================= */
.admin-modules { list-style: none; margin: var(--ad-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ad-space-2); }
.admin-modules__item {
    display: flex; align-items: flex-start; gap: var(--ad-space-3);
    padding: var(--ad-space-3); border: 1px solid var(--ad-border); border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
}
.admin-modules__item.is-off { background: var(--ad-bg-alt); }
.admin-modules__item.is-off .admin-modules__nom { color: var(--ad-text-mute); }
.admin-modules__item input[type="checkbox"] { margin-top: .25em; width: 1.1rem; height: 1.1rem; flex: none; }
.admin-modules__label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; flex: 1 1 auto; }
.admin-modules__nom { font-weight: 600; color: var(--ad-text); }
.admin-modules__texte { font-size: var(--ad-fs-sm); color: var(--ad-text-soft); }
.admin-modules__note { font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }

/* ÉTIQUETTES — la couleur et la position d'une étiquette (migration 0101). L'aperçu reprend les
   teintes du site ; les couleurs de la Charte y sont des valeurs de repli, faute de base.css. */
/* Les noms, une langue à la fois : le code de l'étiquette, puis son champ. */
.admin-tags-names__row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.admin-tags-names__row code { overflow: hidden; text-overflow: ellipsis; }
.admin-tagchip {
    flex: none;
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border: 1px solid #c9c2b6;
    border-radius: 999px;
    color: #6b6358;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: nowrap;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-tagchip--accent    { background: #8b6914; border-color: #8b6914; color: #faf7f2; }
.admin-tagchip--secondary { background: #2c4a6e; border-color: #2c4a6e; color: #faf7f2; }
.admin-tagchip--dark      { background: #1a1a1a; border-color: #1a1a1a; color: #faf7f2; }
.admin-tagchip--red       { background: #c0392b; border-color: #c0392b; color: #fff; }
.admin-tagchip--orange    { background: #b45309; border-color: #b45309; color: #fff; }
.admin-tagchip--green     { background: #1e8449; border-color: #1e8449; color: #fff; }
.admin-tagchip--blue      { background: #1f5fa8; border-color: #1f5fa8; color: #fff; }
.admin-tagchip--purple    { background: #7d3c98; border-color: #7d3c98; color: #fff; }
.admin-tagchip--grey      { background: #5f6368; border-color: #5f6368; color: #fff; }


/* LES LISTES DÉROULANTES À COCHER (2026-10-20) — ciblage d'un emplacement et de
   ses composants. Un `<details>` habillé en liste : le résumé dit ce qui est
   coché, le panneau s'ouvre par-dessus le reste. */
.empl-cible { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ad-space-2) var(--ad-space-3); }
.empl-cible__portee { width: auto; max-width: 100%; box-sizing: border-box; }
.admin-multi { position: relative; min-width: 16rem; max-width: 100%; }
.admin-multi[hidden] { display: none; }
.admin-multi__bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ad-space-2);
    min-height: var(--ad-field-h);
    padding: 0 12px;
    border: 1px solid var(--ad-border-str);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
    font-size: var(--ad-fs-sm);
    cursor: pointer;
    list-style: none;
}
.admin-multi__bouton::-webkit-details-marker { display: none; }
.admin-multi__bouton::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); flex: none; opacity: .6; }
.admin-multi[open] > .admin-multi__bouton { border-color: var(--ad-accent); box-shadow: 0 0 0 3px var(--ad-focus); }
.admin-multi__bouton:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.admin-multi__panneau {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: min(28rem, 90vw);
    max-height: 18rem;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg);
    box-shadow: var(--ad-shadow-md);
}
.admin-multi__choix {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px calc(8px + var(--niv, 0) * 18px);
    border-radius: var(--ad-r-xs);
    font-size: var(--ad-fs-sm);
    cursor: pointer;
    white-space: nowrap;
}
.admin-multi__choix:hover { background: var(--ad-bg-alt); }

/* Un composant par ligne : son nom et le début de son contenu, puis ses pages.
   UNE GRILLE, ET TOUTES LES LIGNES ENSEMBLE (2026-10-22, relevé par Patrick) : en
   flex, une ligne dont l'aperçu était long passait seule à la ligne, sa voisine non —
   la liste se lisait en dents de scie. Le nom prend la place qui reste et se coupe
   (…) ; le choix des pages garde sa colonne. Quand la CARTE devient étroite
   (requête de conteneur : le menu replié ou un zoom comptent), toutes les lignes
   passent ensemble à deux étages, le choix sous le nom. */
.empl-composants { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ad-border); border-radius: var(--ad-r-sm); container-type: inline-size; }
.empl-composants__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ad-space-2) var(--ad-space-4); padding: 10px 14px; }
.empl-composants__ligne + .empl-composants__ligne { border-top: 1px solid var(--ad-border); }
.empl-composants__nom { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.empl-composants__nom > strong { flex: none; }
.empl-composants__nom .lt-icon { width: 16px; height: 16px; color: var(--ad-text-mute); flex: none; }
.empl-composants__vue { min-width: 0; color: var(--ad-text-mute); font-size: var(--ad-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empl-composants__ligne .empl-cible { justify-content: flex-end; }
@container (max-width: 760px) {
    .empl-composants__ligne { grid-template-columns: minmax(0, 1fr); }
    .empl-composants__ligne .empl-cible { justify-content: flex-start; }
}

/* La carte dit où paraît chaque emplacement : la réunion des pages de ses composants (2026-10-20). */
.empl-zone__portee { display: block; margin-top: 2px; font-size: var(--ad-fs-sm); font-weight: 400; color: var(--ad-text-mute); }
.empl-pages--tous { margin-top: var(--ad-space-5); }

/* ==========================================================================
   GALERIES PHOTO — les listes (admin/galeries.php, 2026-10-21)
   --------------------------------------------------------------------------
   La Synthèse (chiffres, « À traiter », listes courtes) est l'habit commun de
   tous les modules depuis le 2026-10-21 : `.admin-synthese*`, admin-ecrans.css.
   Restent ici la liste filtrable des galeries et celle des destinataires
   (js/admin-galeries.js). Les couleurs ne sont que des jetons --ad-* : le mode
   sombre et la charte du site suivent sans une ligne de plus.
   ========================================================================== */
.gal-dash__sous-titre { margin: 2px 0 0; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }

/* La liste : en-tête (titre + recherche), pastilles de filtre, tableau. */
.gal-dash__liste-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ad-space-3);
    margin-bottom: var(--ad-space-4);
}
body.admin-body .gal-dash__liste-tete h2 { margin: 0; padding: 0; border: 0; }
.gal-dash__outils { display: flex; flex: 1 1 26rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ad-space-3); }
.gal-dash__tri { display: inline-flex; align-items: center; gap: var(--ad-space-2); font-size: var(--ad-fs-xs); color: var(--ad-text-mute); font-weight: 600; }
.gal-dash__tri .admin-form__select { margin: 0; width: auto; }
.gal-dash__recherche { position: relative; flex: 0 1 17rem; min-width: 11rem; }
.gal-dash__recherche .lt-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--ad-text-mute); pointer-events: none;
}
.gal-dash__recherche .admin-form__input { width: 100%; padding-left: 34px; margin: 0; }

.gal-dash__filtres { display: flex; flex-wrap: wrap; gap: var(--ad-space-2); margin-bottom: var(--ad-space-4); }
.gal-dash__filtre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--ad-border-str);
    border-radius: var(--ad-r-pill);
    background: var(--ad-bg);
    color: var(--ad-text-soft);
    font: inherit;
    font-size: var(--ad-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ad-trans), border-color var(--ad-trans), color var(--ad-trans);
}
.gal-dash__filtre span {
    min-width: 1.6em; padding: 0 5px; border-radius: var(--ad-r-pill);
    background: var(--ad-bg-sunk); color: var(--ad-text-mute); text-align: center; font-variant-numeric: tabular-nums;
}
.gal-dash__filtre:hover { border-color: var(--ad-accent); color: var(--ad-text); }
.gal-dash__filtre:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ad-focus); }
.gal-dash__filtre.is-active { background: var(--ad-accent); border-color: var(--ad-accent); color: #fff; }
.gal-dash__filtre.is-active span { background: color-mix(in srgb, #fff 22%, transparent); color: #fff; }

.gal-dash__table td { vertical-align: middle; }
.gal-dash__table tr[hidden] { display: none; }
.gal-dash__couverture { width: 72px; }
.gal-dash__couverture a { display: block; }
.gal-dash__couverture img,
.gal-dash__sans {
    display: grid;
    place-items: center;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--ad-r-sm);
    background: var(--ad-bg-sunk);
    color: var(--ad-text-mute);
}
.gal-dash__sans .lt-icon { width: 18px; height: 18px; opacity: .6; }
.gal-dash__titre { min-width: 14rem; }
.gal-dash__titre > a { font-weight: 600; color: var(--ad-text); text-decoration: none; }
.gal-dash__titre > a:hover { color: var(--ad-accent); text-decoration: underline; }
.gal-dash__meta {
    display: flex; flex-wrap: wrap; gap: 2px var(--ad-space-3);
    margin-top: 2px; font-size: var(--ad-fs-xs); color: var(--ad-text-mute);
}
.gal-dash__meta > span:last-child { font-family: var(--ad-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.gal-dash__acces { display: inline-flex; align-items: center; gap: 3px; }
.gal-dash__acces .lt-icon { width: 12px; height: 12px; }
.gal-dash__suivi { min-width: 9rem; }
.gal-dash__suivi .admin-badge { margin: 1px 4px 1px 0; }
.gal-dash__echeance { display: block; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); white-space: nowrap; }
.gal-dash__echeance.is-proche { color: var(--ad-danger); font-weight: 600; }
.gal-dash__neant { color: var(--ad-border-str); }

/* L'ÉTAT : une pastille qui se clique (publier ↔ brouillon). Le point de
   couleur dit l'état sans lire le mot ; le mot le dit sans voir la couleur. */
.gal-dash__etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--ad-r-pill);
    font: inherit;
    font-size: var(--ad-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: var(--ad-bg-sunk);
    color: var(--ad-text-soft);
}
button.gal-dash__etat { cursor: pointer; transition: border-color var(--ad-trans), box-shadow var(--ad-trans); }
button.gal-dash__etat:hover { border-color: var(--ad-border-str); }
button.gal-dash__etat:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ad-focus); }
.gal-dash__etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gal-dash__etat.is-ligne   { background: var(--ad-success-sf); color: var(--ad-success); }
.gal-dash__etat.is-expiree { background: var(--ad-danger-sf); color: color-mix(in srgb, var(--ad-danger) 82%, #000); }
.gal-dash__etat.is-brouillon::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.gal-dash__etat.is-purgee  { color: var(--ad-text-mute); }

.gal-dash__etat.is-modele  { background: var(--ad-accent-sf); color: var(--ad-accent); }

/* LA BARRE D'UNE GALERIE (admin/galerie.php) : son état et ses faits à gauche,
   ses gestes à droite — Aperçu, Publier, et le menu « … » (dupliquer, garder
   comme modèle, supprimer), celui des Pages (.admin-page-menu). */
.gal-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ad-space-3) var(--ad-space-5);
    margin-bottom: var(--ad-space-5);
    padding: var(--ad-space-3) var(--ad-space-4);
    background: var(--ad-bg);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-lg);
    box-shadow: var(--ad-shadow-sm);
}
.gal-barre__etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-space-2) var(--ad-space-3); min-width: 0; }
.gal-barre__retour { font-size: var(--ad-fs-sm); font-weight: 600; color: var(--ad-text-soft); text-decoration: none; padding-right: var(--ad-space-3); border-right: 1px solid var(--ad-border); }
.gal-barre__retour:hover { color: var(--ad-accent); }
.gal-barre__faits { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-barre__faits li { display: inline-flex; align-items: center; gap: 3px; }
.gal-barre__faits li + li::before { content: "·"; margin: 0 var(--ad-space-2); color: var(--ad-border-str); }
.gal-barre__faits .lt-icon { width: 12px; height: 12px; }
.gal-barre__faits .is-alerte { color: var(--ad-danger); font-weight: 600; }
.gal-barre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-space-2); }
.gal-barre__actions .btn svg { width: 15px; height: 15px; }
/* Le menu s'ouvre vers la gauche : la barre est au bord droit de l'écran. */
.gal-barre__menu .admin-page-menu__liste { right: 0; left: auto; min-width: 15rem; }

/* LES DESTINATAIRES (onglet du même nom) : une personne par ligne, ses accès
   empilés dans la deuxième colonne, chacun avec son état et son étape. */
.gal-dest td { vertical-align: top; }
.gal-dest__qui { display: flex; gap: var(--ad-space-3); min-width: 15rem; }
.gal-dest__qui strong { display: block; font-weight: 600; }
.gal-dest__qui a[href^="mailto:"] { display: block; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); overflow-wrap: anywhere; }
.gal-dest__marques { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gal-dest__marques a.admin-badge { text-decoration: none; }
.gal-dest__acces { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 16rem; }
.gal-dest__acces li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ad-space-2); }
.gal-dest__acces li > a { font-weight: 600; }
.gal-dest__acces small { font-size: var(--ad-fs-xs); color: var(--ad-success); }
.gal-dest__acces li.is-revoque small,
.gal-dest__acces li.is-expire small { color: var(--ad-text-mute); }
.gal-dest__acces li.is-revoque > a,
.gal-dest__acces li.is-expire > a { color: var(--ad-text-mute); text-decoration: line-through; }
.gal-dest__date, .gal-dest th { white-space: nowrap; font-variant-numeric: tabular-nums; }

.gal-dash__aucun { margin: var(--ad-space-4) 0 0; color: var(--ad-text-mute); }
.gal-dash__vide { padding: var(--ad-space-5) 0; text-align: center; color: var(--ad-text-soft); }
.gal-dash__vide p { margin: 0 auto var(--ad-space-2); max-width: 36rem; }
.gal-dash__vide .btn { margin-top: var(--ad-space-3); }

/* NOUVELLE GALERIE : le titre et le modèle en tête, puis les questions
   numérotées, deux par rangée quand la place le permet. */
.gal-nouvelle__tete {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--ad-space-4);
    margin-bottom: var(--ad-space-4);
}
.gal-nouvelle__questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--ad-space-4);
    align-items: start;
}
.gal-nouvelle__questions .admin-fieldset { margin: 0; }
.gal-nouvelle__questions { counter-reset: gal-question; }
/* Les questions se NUMÉROTENT d'elles-mêmes (compteur CSS) : une question masquée
   (galerie publique) ne compte pas, la suivante garde un numéro juste. */
.gal-nouvelle__questions > .admin-fieldset { counter-increment: gal-question; }
.gal-nouvelle__questions > .admin-fieldset > legend::before {
    content: counter(gal-question);
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ad-accent-sf);
    color: var(--ad-accent);
    font-size: var(--ad-fs-xs);
    font-weight: 700;
}
/* Un MODÈLE choisi donne tous les réglages : les questions, ignorées par le
   serveur, se retirent (CSS pur, comme ci-dessus). */
.gal-creer:has(select[name="modele"] option:checked:not([value="0"])) .gal-nouvelle__questions { display: none; }

@media (max-width: 640px) {
    .gal-dash__outils, .gal-dash__recherche { flex-basis: 100%; }
    .gal-dash__couverture, .gal-dash__table th:first-child { display: none; }
}

/* ==========================================================================
   GALERIES PHOTO — L'INTÉRIEUR D'UNE GALERIE (admin/galerie.php, 2026-10-21)
   --------------------------------------------------------------------------
   Contenu : les photos à gauche, leur rangement à droite (albums, livrables,
   langue des légendes), les textes en bas. Les points d'accroche de
   js/admin-galerie.js (data-gal-*) ne changent pas : seule l'allure change.
   ========================================================================== */
.gal-carte__tete { margin-bottom: var(--ad-space-4); }
body.admin-body .gal-carte__tete h2 { margin: 0; padding: 0; border: 0; }
.gal-carte__sous-titre { margin: 4px 0 0; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-carte__faits { display: flex; flex-wrap: wrap; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-carte__faits li + li::before { content: "·"; margin: 0 var(--ad-space-2); color: var(--ad-border-str); }
.gal-carte__faits .is-alerte { color: var(--ad-danger); font-weight: 600; }

.gal-contenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--ad-space-5);
    align-items: start;
    margin-bottom: var(--ad-space-5);
}
.gal-contenu > .admin-card { margin-bottom: 0; }
.gal-contenu__cote { display: flex; flex-direction: column; gap: var(--ad-space-4); position: sticky; top: var(--ad-space-4); }
.gal-cote-carte { margin: 0; padding: var(--ad-space-4); }
body.admin-body .gal-cote-carte__titre {
    display: flex; align-items: center; gap: .35em;
    margin: 0 0 var(--ad-space-3);
    font-size: var(--ad-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ad-text-mute);
}
.gal-cote-carte .admin-form__hint { margin: 0 0 var(--ad-space-3); }
/* Les albums, en colonne : un titre modifiable, son nombre, sa croix. */
.gal-contenu .gal-albums__liste { display: flex; flex-direction: column; gap: var(--ad-space-2); margin: 0 0 var(--ad-space-3); padding: 0; list-style: none; }
.gal-contenu .gal-album { display: flex; align-items: center; gap: 6px; }
.gal-contenu .gal-album input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
.gal-contenu .gal-albums .admin-inline-form { display: flex; gap: 6px; }
.gal-contenu .gal-albums .admin-inline-form input { flex: 1 1 auto; min-width: 0; width: auto; }
.gal-contenu .gal-albums .admin-inline-form .btn span { display: none; }   /* « + » suffit, le champ dit le reste */
.gal-contenu .gal-livrables .gal-admin__depot { margin-bottom: var(--ad-space-3); }
.gal-contenu .gal-langues { display: block; }
.gal-contenu .gal-langues .admin-lang-tabs { margin: var(--ad-space-2) 0; }

/* Le dépôt : une bande, une icône, un bouton — plus discret qu'un cadre. */
.gal-contenu__photos .gal-admin__depot { margin-bottom: var(--ad-space-4); }
.gal-admin__depot-appel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-space-2) var(--ad-space-3); }
.gal-admin__depot-appel .lt-icon { width: 22px; height: 22px; color: var(--ad-accent); }
.gal-admin__depot > .admin-form__hint { margin: 0; }

/* Barre des filtres, puis barre des gestes : deux rangées sur fond doux. */
.gal-contenu .gal-filtres {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-space-2);
    margin: 0 0 var(--ad-space-2);
}
.gal-contenu .gal-filtres input[type="search"] { flex: 1 1 12rem; }
.gal-contenu .gal-admin__tri { font-size: var(--ad-fs-xs); color: var(--ad-text-mute); font-weight: 600; }
.gal-filtres__compte { margin-left: auto; }
.gal-contenu .gal-groupe {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-space-2);
    margin: 0 0 var(--ad-space-4);
    padding: var(--ad-space-2) var(--ad-space-3);
    border-radius: var(--ad-r-md);
    background: var(--ad-bg-alt);
    border: 1px solid var(--ad-border);
    position: sticky; top: 0; z-index: 3;
}
.gal-contenu .gal-groupe:has(input[data-gal-tout]:checked),
.gal-contenu .gal-groupe:has(button:not([disabled])) { background: var(--ad-accent-sf); border-color: color-mix(in srgb, var(--ad-accent) 30%, var(--ad-border)); }
.gal-contenu .gal-admin__tout { margin: 0 var(--ad-space-2) 0 0; }

/* La carte d'une photo : marques SUR l'image, la couverture au survol. */
.gal-contenu .gal-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gal-photo { transition: box-shadow var(--ad-trans), border-color var(--ad-trans); }
.gal-photo:hover { border-color: var(--ad-border-str); box-shadow: var(--ad-shadow-md); }
.gal-photo:has([data-gal-choix]:checked) { border-color: var(--ad-accent); box-shadow: 0 0 0 2px var(--ad-accent); }
.gal-photo__image { position: relative; }
.gal-photo__marques {
    position: absolute; left: var(--ad-space-2); bottom: var(--ad-space-2); right: var(--ad-space-2);
    display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none;
}
.gal-photo__marque {
    padding: 2px 7px; border-radius: var(--ad-r-pill);
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    background: rgba(18, 22, 31, .72); color: #fff;
}
.gal-photo__marque.is-couv    { background: var(--ad-accent); }
.gal-photo__marque.is-vedette { background: #b7791f; }
.gal-photo.is-masquee .gal-photo__marque.is-masquee { background: rgba(18, 22, 31, .85); }
.gal-photo__couv {
    align-self: flex-start;
    margin-top: 2px; padding: 0; border: 0; background: none;
    font: inherit; font-size: var(--ad-fs-xs); color: var(--ad-text-mute);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    opacity: 0; transition: opacity var(--ad-trans);
}
.gal-photo:hover .gal-photo__couv,
.gal-photo__couv:focus-visible { opacity: 1; color: var(--ad-accent); }
@media (hover: none) { .gal-photo__couv { opacity: 1; } }
.gal-photo__legende { margin-top: 4px; }
.gal-contenu .gal-photo__legende { width: 100%; max-width: none; }
/* Toutes les vignettes au même cadre 4:3, quelle que soit l'orientation : la
   grille reste une grille. L'image remplit le cadre sans le pousser. */
.gal-contenu .gal-photo__image { overflow: hidden; }
.gal-contenu .gal-photo__image img { position: absolute; inset: 0; object-position: center 30%; }

@media (max-width: 1100px) {
    .gal-contenu { grid-template-columns: minmax(0, 1fr); }
    .gal-contenu__cote { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* DESTINATAIRES d'une galerie : l'ajout en une rangée, puis une ligne par
   personne — initiales, qui, état de l'accès, activité, gestes. */
.gal-dest-ajout__champs {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 6rem auto;
    gap: var(--ad-space-3);
    align-items: end;
    margin-bottom: var(--ad-space-2);
}
.gal-dests { list-style: none; margin: 0; padding: 0; }
.gal-dest {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: var(--ad-space-3);
    align-items: center;
    padding: var(--ad-space-3) 0;
    border-top: 1px solid var(--ad-border);
}
.gal-dest:first-child { border-top: 0; }
.gal-dest.is-revoque, .gal-dest.is-expire { opacity: .7; }
.gal-dest__qui strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-dest__sous { display: block; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); overflow-wrap: anywhere; }
.gal-dest__etat, .gal-dest__activite { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gal-dest__etat small, .gal-dest__activite small { font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-dest__activite a.admin-badge { text-decoration: none; }
.gal-dest__gestes { display: flex; align-items: center; gap: var(--ad-space-2); justify-content: flex-end; }
/* La limite de sélection, petit formulaire dans le menu « … ». */
.gal-dest__limite { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; padding: var(--ad-space-2) var(--ad-space-3); border-top: 1px solid var(--ad-border); border-bottom: 1px solid var(--ad-border); }
.gal-dest__limite label { font-size: var(--ad-fs-xs); font-weight: 600; color: var(--ad-text-mute); }
.gal-dest__limite span { display: flex; gap: 6px; }
.gal-dest__limite input { width: 7rem; }

/* SÉLECTIONS : l'en-tête d'une carte — initiales, nom, état, jauge. */
.gal-selections__resume { margin: 0 0 var(--ad-space-4); font-size: var(--ad-fs-sm); color: var(--ad-text-soft); }
.gal-selection.is-validee { border-left: 3px solid var(--ad-success); }
.gal-selection__tete { display: flex; align-items: center; gap: var(--ad-space-3); margin-bottom: var(--ad-space-4); }
.gal-selection__qui { flex: 1 1 auto; min-width: 0; }
body.admin-body .gal-selection__qui h2 { margin: 0 0 4px; padding: 0; border: 0; }
.gal-selection__compte { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--ad-fs-sm); color: var(--ad-text-mute); white-space: nowrap; }
.gal-selection__compte strong { font-size: var(--ad-fs-xl); color: var(--ad-text); line-height: 1; }
.gal-selection__jauge { display: block; width: 8rem; height: 6px; border-radius: var(--ad-r-pill); background: var(--ad-bg-sunk); overflow: hidden; }
.gal-selection__jauge > span { display: block; height: 100%; background: var(--ad-accent); border-radius: inherit; }
.gal-selection__jauge.is-pleine > span { background: var(--ad-success); }
.gal-selection__noms { display: flex; align-items: flex-start; gap: var(--ad-space-2); }
.gal-selection__noms textarea { flex: 1 1 auto; width: auto; max-width: none; min-height: 0; }
/* Une carte repliable (les accords) : l'intertitre sert de bouton. */
.gal-repli > summary { list-style: none; cursor: pointer; }
.gal-repli > summary::-webkit-details-marker { display: none; }
body.admin-body .gal-repli > summary h2 { display: flex; align-items: center; gap: .4em; margin: 0; padding: 0; border: 0; }
body.admin-body .gal-repli > summary h2::after { content: "▾"; margin-left: auto; color: var(--ad-text-mute); transition: transform var(--ad-trans); }
body.admin-body .gal-repli:not([open]) > summary h2::after { transform: rotate(-90deg); }
.gal-repli__resume { display: block; margin-top: 4px; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-repli[open] > summary { margin-bottom: var(--ad-space-4); }
.gal-repli #gal-accord-noms { min-height: 0; }
.gal-selection__pied { display: flex; align-items: center; gap: var(--ad-space-3); margin-top: var(--ad-space-4); padding-top: var(--ad-space-3); border-top: 1px solid var(--ad-border); }

/* RÉGLAGES : le sommaire à gauche (collé en haut), les groupes à droite, et
   « Enregistrer » collé au bas de l'écran. */
.gal-reglages { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--ad-space-5); align-items: start; }
.gal-reglages__sommaire { position: sticky; top: var(--ad-space-4); }
.gal-reglages__sommaire ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ad-border); }
.gal-reglages__sommaire a {
    display: block; margin-left: -2px; padding: 6px 0 6px var(--ad-space-3);
    border-left: 2px solid transparent;
    font-size: var(--ad-fs-sm); color: var(--ad-text-soft); text-decoration: none;
}
.gal-reglages__sommaire a:hover { color: var(--ad-accent); border-left-color: var(--ad-accent); }
.gal-reglages__groupes > .admin-card { scroll-margin-top: var(--ad-space-5); }
body.admin-body .gal-reglage > h2 { display: flex; align-items: center; gap: .5em; }
.gal-reglage .admin-secset__grid { margin-bottom: var(--ad-space-2); }
.gal-reglage__note { margin-top: var(--ad-space-3); }
.gal-reglage__alerte { margin: var(--ad-space-3) 0 0; padding: var(--ad-space-2) var(--ad-space-3); border-radius: var(--ad-r-sm); background: var(--ad-danger-sf); color: color-mix(in srgb, var(--ad-danger) 82%, #000); font-size: var(--ad-fs-sm); }
.gal-reglage__cases { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--ad-space-3); }
.gal-reglage__cases .admin-secset__check { min-height: 0; padding: 4px 0; }
.gal-reglage__filigrane { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--ad-space-5); align-items: start; }
.gal-reglage__filigrane .gal-filigrane-propre { margin-top: var(--ad-space-3); }
.gal-reglage__apercu { margin: 0; }
.gal-reglage__apercu figcaption { margin-top: 4px; font-size: var(--ad-fs-xs); color: var(--ad-text-mute); }
.gal-reglages__enregistrer {
    position: sticky; bottom: 0; z-index: 4;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ad-space-4);
    margin-top: var(--ad-space-2);
    padding: var(--ad-space-3) var(--ad-space-4);
    background: color-mix(in srgb, var(--ad-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-r-lg);
    box-shadow: var(--ad-shadow-md);
}

@media (max-width: 1100px) {
    .gal-dest { grid-template-columns: auto minmax(0, 1fr) auto; }
    .gal-dest__etat, .gal-dest__activite { grid-column: 2; }
    .gal-dest__gestes { grid-column: 3; grid-row: 1; }
    .gal-reglages { grid-template-columns: minmax(0, 1fr); }
    .gal-reglages__sommaire { position: static; }
    .gal-reglages__sommaire ul { display: flex; flex-wrap: wrap; gap: 4px var(--ad-space-3); border-left: 0; }
    .gal-reglages__sommaire a { margin: 0; padding: 2px 0; border: 0; }
    .gal-reglage__filigrane { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .gal-dest-ajout__champs { grid-template-columns: minmax(0, 1fr); }
}