/* Styles minimaux de l'espace admin — mise en forme fonctionnelle, pas encore
   la charte graphique définitive du site (à harmoniser avec css/site.css). */

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1c1f26; }

/* Écran de connexion */
.admin-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.admin-connexion-box { background: #fff; padding: 32px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.1); width: 320px; }
.admin-connexion-box h1 { margin: 0 0 4px; font-size: 1.3rem; }
.admin-connexion-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.admin-connexion-box label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.admin-erreur { color: #b3261e; background: #fdecea; padding: 8px 12px; border-radius: 4px; font-size: .9rem; }

/* Structure générale */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 240px; background: #1c1f26; color: #d8dae0; flex-shrink: 0; padding: 16px 0; }
.admin-sidebar-header a { display: block; padding: 0 16px 16px; color: #fff; font-weight: 600; text-decoration: none; }
/* Sections repliables (CLAUDE.md "Étape 11", point 5a) : <details>/<summary> natif, accessible et
   fonctionnel sans JS (tout replié/déplié au premier rendu HTML ; le JS ne fait qu'appliquer l'état
   mémorisé et le persister ensuite, voir ui/admin/layout.htm + www/js/admin-menu.js). */
.admin-nav-groupe { border-bottom: 1px solid #2c3038; }
.admin-nav-groupe summary { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8b8f9c; padding: 12px 16px; margin: 0; cursor: pointer; list-style: none; user-select: none; }
.admin-nav-groupe summary::-webkit-details-marker { display: none; }
.admin-nav-groupe summary:focus-visible { outline: 2px solid #4fd8ff; outline-offset: -2px; }
.admin-nav-chevron { transition: transform .15s ease; }
.admin-nav-groupe[open] .admin-nav-chevron { transform: rotate(90deg); }
.admin-nav-groupe ul { list-style: none; margin: 0; padding: 0 0 8px; }
.admin-nav-groupe a { display: block; padding: 6px 16px; color: #d8dae0; text-decoration: none; font-size: .88rem; }
.admin-nav-groupe a:hover, .admin-nav-actif { background: #2c3038; color: #fff; }
.admin-nav-actif { border-left: 3px solid #4fd8ff; font-weight: 600; }

.admin-main { flex: 1; min-width: 0; }
.admin-topbar { display: flex; align-items: center; gap: 16px; justify-content: flex-end; padding: 10px 24px; background: #fff; border-bottom: 1px solid #e2e4e9; font-size: .88rem; }
.admin-topbar form { margin: 0; }
.admin-content { padding: 24px; }

/* Fil d'Ariane (CLAUDE.md "Étape 11", point 5c) */
.admin-breadcrumb { margin: 0 0 14px; font-size: .82rem; color: #6b7280; }
.admin-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.admin-breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 6px; color: #b8bcc4; }
.admin-breadcrumb a { color: #2b5fd9; text-decoration: none; }
.admin-breadcrumb a:hover { text-decoration: underline; }
.admin-breadcrumb [aria-current="page"] { color: #1c1f26; font-weight: 600; }

/* Composants */
.admin-flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: .9rem; }
.admin-flash-succes { background: #e6f4ea; color: #146c2e; }
.admin-flash-erreur { background: #fdecea; color: #b3261e; }

.admin-stats { display: flex; gap: 16px; margin-bottom: 24px; }
.admin-stat-card { background: #fff; border-radius: 8px; padding: 16px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.admin-stat-valeur { font-size: 1.6rem; font-weight: 700; }
.admin-stat-libelle { font-size: .82rem; color: #666; }

.admin-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.admin-recherche { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-actions-liste { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font-size: .88rem; }
.admin-total { color: #666; margin-left: auto; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.admin-table th, .admin-table td { padding: 8px 12px; border-bottom: 1px solid #eef0f3; text-align: left; font-size: .88rem; }
.admin-table th a { color: #1c1f26; text-decoration: none; }

.admin-pagination { margin-top: 16px; }
.admin-pagination-form { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: .85rem; }
.admin-pagination-parpage { display: flex; align-items: center; gap: 6px; color: #444; }
.admin-pagination-parpage select { padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.admin-pagination-nav { display: flex; align-items: center; gap: 8px; }
.admin-page-lien, .admin-page-desactive { padding: 4px 10px; border-radius: 4px; background: #fff; text-decoration: none; color: #1c1f26; font-size: .85rem; border: 1px solid #e2e4e9; }
.admin-page-desactive { color: #b5b8c0; cursor: default; }
.admin-pagination-saisie { display: flex; align-items: center; gap: 6px; }
.admin-page-champ { width: 56px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font: inherit; text-align: center; }


.admin-formulaire { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.admin-champ { display: flex; flex-direction: column; gap: 4px; }
.admin-champ label { font-size: .85rem; font-weight: 600; }
.admin-champ input[type=text], .admin-champ input[type=number], .admin-champ input[type=date],
.admin-champ input[type=datetime-local], .admin-champ select, .admin-champ textarea {
    padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit;
}
.admin-champ textarea { min-height: 90px; }
.admin-champ input:disabled { background: #eee; color: #777; }
.admin-champ-aide { margin: 0; font-size: .78rem; color: #666; font-style: italic; }
.admin-champ-erreur input, .admin-champ-erreur textarea, .admin-champ-erreur select { border-color: #b3261e; }
.admin-champ-erreur-texte { color: #b3261e; font-size: .8rem; margin: 0; }
.admin-fichier-actuel { font-size: .82rem; margin: 0 0 4px; }
.admin-formulaire-actions { display: flex; gap: 10px; }

/* Écran sur-mesure "Compositions d'équipes" (CompositionsController) */
.admin-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; font-size: .85rem; }
.admin-filtres label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.admin-filtres input { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; width: 130px; }
.compo-section { margin: 24px 0 8px; }
.compo-section h2 { font-size: 1rem; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e2e4e9; }
.compo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.compo-carte { background: #fff; border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 8px; }
.compo-carte-entete { display: flex; align-items: baseline; gap: 8px; }
.compo-carte-entete strong { font-size: 1.05rem; }
.compo-joueurs { list-style: none; margin: 0; padding: 0; font-size: .88rem; display: flex; flex-direction: column; gap: 3px; }
.compo-poste { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; background: #1c1f26; color: #fff; font-size: .72rem; margin-right: 4px; }
.compo-meta { color: #666; font-size: .78rem; }
.compo-carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid #eef0f3; }
.compo-vide { color: #666; margin-top: 24px; }
.compo-form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.compo-joueurs-form { border: 1px solid #ddd; border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.compo-joueurs-form legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }
.compo-joueurs-form p { margin: 0; }
.compo-ligne { display: flex; align-items: center; gap: 12px; }
.compo-ligne label { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.compo-ligne input[type=number] { width: 64px; padding: 8px 6px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.compo-ligne select { flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.compo-joueurs-form.admin-champ-erreur { border-color: #b3261e; }
.admin-filtres select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; min-width: 150px; }

/* Modules mis en standby côté public (table modules_site) : entrée grisée + badge dans le menu latéral */
.admin-nav-desactive > a { color: #8b8f9c; }
.admin-badge-desactive { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #b3261e; color: #fff; font-size: .62rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }

/* Badges de statut menu_navigation (liste admin) — Étape 11, point 3a bis : "Désactivée" (actif=0,
   page inaccessible) distinct de "Masquée du menu" (actif=1, visible_menu=0, page accessible par
   lien direct mais absente du menu). */
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.admin-badge-ok { background: #e3f5e6; color: #1e7a34; }
.admin-badge-off { background: #b3261e; color: #fff; }
.admin-badge-masque { background: #fdead1; color: #92600a; }

/* Compositions d'équipes (écran sur-mesure) — Étape 11, point 7 : origine 'fftt' (synchronisation,
   lecture seule sauf rattachement joueur) vs 'manuel' (pleinement éditable), et joueur non rattaché. */
.admin-badge-info { background: #e0ecfd; color: #1a4d8f; }
.admin-badge-alerte { background: #fdead1; color: #92600a; }

/* Médiathèque (écran sur-mesure) — Étape 11, point 8 : arborescence + trois vues
   (vignettes/liste/détails) + dossiers/upload/déplacement, y compris en mode sélecteur
   (TinyMCE, champ 'media'), voir ui/admin/medias.htm et www/js/mediatheque.js. */
.admin-body-modal { background: #f4f5f7; }
.admin-content-modal { padding: 16px; max-width: none; }

.mediatheque-fil { color: #666; font-size: .85rem; margin: 0 0 12px; }
.mediatheque-fil a { color: #2b5fd9; text-decoration: none; }

.mediatheque-layout { display: flex; gap: 20px; align-items: flex-start; }
.mediatheque-arbre { width: 220px; flex-shrink: 0; background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
.mediatheque-arbre-lien { display: block; padding: 6px 8px; border-radius: 4px; color: #1c1f26; text-decoration: none; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mediatheque-arbre-lien:hover { background: #f0f1f4; }
.mediatheque-arbre-lien.actif { background: #1c1f26; color: #fff; }

.mediatheque-contenu { flex: 1; min-width: 0; }
.mediatheque-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mediatheque-recherche { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mediatheque-recherche input[type=text] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; min-width: 220px; }
.mediatheque-recherche select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.mediatheque-vues { display: flex; gap: 4px; }
.mediatheque-vues button.actif { background: #1c1f26; color: #fff; }

.mediatheque-outils { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.mediatheque-dropzone { display: flex; align-items: center; gap: 10px; padding: 14px; border: 2px dashed #ccc; border-radius: 8px; background: #fff; font-size: .85rem; color: #666; cursor: pointer; }
.mediatheque-dropzone.survol { border-color: #2b5fd9; background: #eef3ff; }
.mediatheque-nouveau-dossier { display: flex; gap: 8px; }
.mediatheque-nouveau-dossier input[type=text] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }

.mediatheque-grille[data-vue="vignettes"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mediatheque-grille[data-vue="liste"] { display: flex; flex-direction: column; gap: 4px; }
.mediatheque-grille[data-vue="details"] { display: flex; flex-direction: column; gap: 2px; }

.mediatheque-dossier-carte, .mediatheque-item { background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); position: relative; }
.mediatheque-dossier-lien { display: block; text-decoration: none; color: #1c1f26; font-size: .85rem; font-weight: 600; }
.mediatheque-dossier-lien small { color: #888; font-weight: 400; }
.mediatheque-dossier-actions { position: absolute; top: 6px; right: 6px; font-size: .8rem; }
.mediatheque-dossier-actions summary { cursor: pointer; list-style: none; padding: 2px 6px; }
.mediatheque-dossier-actions form { display: flex; gap: 4px; margin-top: 6px; }

.mediatheque-item { display: flex; flex-direction: column; gap: 6px; }
.mediatheque-vignette-img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; background: #f0f1f4; }
.mediatheque-vignette-icone { display: flex; align-items: center; justify-content: center; height: 100px; font-size: 2.2rem; background: #f0f1f4; border-radius: 4px; }
.mediatheque-titre { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mediatheque-meta { font-size: .72rem; color: #888; }
.mediatheque-item-actions summary { cursor: pointer; font-size: .82rem; color: #2b5fd9; }
.mediatheque-form-modifier { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mediatheque-form-modifier label { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: #555; }
.mediatheque-form-modifier input, .mediatheque-form-modifier select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.mediatheque-confirmer-suppression { font-weight: 700; } /* couleur : famille suppression (.btn--suppression) */

/* Vue "liste" : rangée compacte plutôt que carte. */
[data-vue="liste"] .mediatheque-dossier-carte, [data-vue="liste"] .mediatheque-item { flex-direction: row; align-items: center; padding: 6px 10px; }
[data-vue="liste"] .mediatheque-vignette-img, [data-vue="liste"] .mediatheque-vignette-icone { width: 32px; height: 32px; flex-shrink: 0; font-size: 1.1rem; }
[data-vue="liste"] .mediatheque-titre { flex: 1; }
[data-vue="liste"] .mediatheque-item-actions, [data-vue="liste"] .mediatheque-dossier-actions { position: static; }

/* Vue "détails" : proche d'un tableau (nom, type, taille, dimensions, date, dossier implicite via navigation). */
[data-vue="details"] .mediatheque-dossier-carte, [data-vue="details"] .mediatheque-item { flex-direction: row; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 0; box-shadow: none; border-bottom: 1px solid #eef0f3; }
[data-vue="details"] .mediatheque-vignette-img, [data-vue="details"] .mediatheque-vignette-icone { width: 28px; height: 28px; flex-shrink: 0; font-size: 1rem; }
[data-vue="details"] .mediatheque-titre { width: 220px; flex-shrink: 0; }
[data-vue="details"] .mediatheque-meta { flex: 1; }

.mediatheque-deplacer { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.mediatheque-deplacer select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.mediatheque-vide { color: #666; margin: 16px 0; }
.mediatheque-case { position: absolute; top: 6px; left: 6px; z-index: 1; }

/* Utilisateurs, Mon compte, mot de passe oublié (Étape 11, point 9) */
.admin-connexion-box { max-width: calc(100vw - 32px); }
.admin-connexion-box p { font-size: .9rem; }
.admin-info { color: #146c2e; background: #e6f4ea; padding: 8px 12px; border-radius: 4px; font-size: .9rem; }
.admin-connexion-lien { margin: 16px 0 0; font-size: .85rem; }
.admin-connexion-lien a { color: #2b5fd9; }
.admin-champ input[type=email], .admin-champ input[type=password] { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.admin-lien-invitation { margin-bottom: 20px; border-left: 4px solid #92600a; }
.admin-lien-copie { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-lien-copie input { flex: 1 1 320px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.admin-form-secondaire { margin-top: 24px; }
.admin-mon-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.admin-mon-compte h2 { margin: 0; font-size: 1.05rem; }
.admin-topbar a { color: #1c1f26; }

/* Droits d'accès (Étape 11, point 10) */
.admin-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.admin-fieldset:disabled input, .admin-fieldset:disabled select, .admin-fieldset:disabled textarea { background: #f4f5f7; color: #1c1f26; }
.admin-form-inline { display: inline; }
.admin-roles-formulaire { max-width: 760px; }
.admin-matrice-section { margin-top: 8px; }
.admin-matrice-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-matrice-entete h2 { margin: 0; font-size: 1rem; }
.admin-matrice-raccourcis { display: flex; gap: 12px; }
.admin-matrice th:not(:first-child), .admin-matrice td:not(:first-child) { width: 56px; text-align: center; }
.admin-matrice input[type=checkbox] { width: 18px; height: 18px; }
.admin-matrice-sans-objet { color: #aaa; }

/* Journal des actions (Étape 11, point 11) */
.admin-journal-filtres select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.admin-journal td { vertical-align: top; }
.admin-journal-securite { background: #fdead1; color: #92600a; }
.admin-journal-donnees { background: #e0ecfd; color: #1a4d8f; }
.admin-journal-systeme { background: #e2e4e9; color: #1c1f26; }
.admin-journal-entete { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 20px; }
.admin-journal-entete dt { font-weight: 600; }
.admin-journal-entete dd { margin: 0; overflow-wrap: anywhere; }
.admin-journal-avant { color: #b3261e; overflow-wrap: anywhere; }
.admin-journal-apres { color: #146c2e; overflow-wrap: anywhere; }
.admin-alerte-journal { margin-bottom: 16px; }

/* Boutons d'action (Étape 11, point 13 a) — quatre familles dérivées du catalogue d'actions
   (app/admin/Boutons.php) : lecture (bleu), édition (vert), suppression (rouge), neutre (gris).
   Contraste du texte ≥ 4,5:1 sur chaque fond, survol compris ; le libellé porte toujours le sens. */
:root {
    --admin-action-lecture: #1a5fb4;      --admin-action-lecture-survol: #144a8c;      --admin-action-lecture-texte: #ffffff;
    --admin-action-edition: #1e7a34;      --admin-action-edition-survol: #165c27;      --admin-action-edition-texte: #ffffff;
    --admin-action-suppression: #b3261e;  --admin-action-suppression-survol: #8c1d17;  --admin-action-suppression-texte: #ffffff;
    --admin-action-neutre: #e2e4e9;       --admin-action-neutre-survol: #c9ccd3;       --admin-action-neutre-texte: #1c1f26;
    --admin-focus: #1a5fb4;
}
.btn { display: inline-block; padding: 7px 14px; border-radius: 4px; border: 1px solid transparent; font: inherit; font-size: .88rem; line-height: 1.3; text-decoration: none; cursor: pointer; vertical-align: middle; }
.btn--petit { padding: 3px 9px; font-size: .8rem; }
.btn--lecture { background: var(--admin-action-lecture); color: var(--admin-action-lecture-texte); }
.btn--lecture:hover { background: var(--admin-action-lecture-survol); }
.btn--edition { background: var(--admin-action-edition); color: var(--admin-action-edition-texte); }
.btn--edition:hover { background: var(--admin-action-edition-survol); }
.btn--suppression { background: var(--admin-action-suppression); color: var(--admin-action-suppression-texte); }
.btn--suppression:hover { background: var(--admin-action-suppression-survol); }
.btn--neutre { background: var(--admin-action-neutre); color: var(--admin-action-neutre-texte); border-color: #c9ccd3; }
.btn--neutre:hover { background: var(--admin-action-neutre-survol); }
.btn:focus-visible, .admin-content a:focus-visible, .admin-sidebar a:focus-visible, summary:focus-visible { outline: 2px solid var(--admin-focus); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.actif { box-shadow: inset 0 0 0 2px var(--admin-action-neutre-texte); }
.admin-actions-ligne { white-space: nowrap; }
.admin-actions-ligne .btn, .admin-actions-ligne form { margin: 2px 4px 2px 0; }

/* Remplacent les anciens style="…" inline des templates (point 13 a) */
.admin-marge-bas { margin-bottom: 20px; }
.compo-meta-rencontre { margin: 0 0 6px; }
.compo-rattachement-champ { flex: 1; }
.mediatheque-niveau-0 { padding-left: 12px; }  .mediatheque-niveau-1 { padding-left: 28px; }
.mediatheque-niveau-2 { padding-left: 44px; }  .mediatheque-niveau-3 { padding-left: 60px; }
.mediatheque-niveau-4 { padding-left: 76px; }  .mediatheque-niveau-5 { padding-left: 92px; }
.mediatheque-niveau-6 { padding-left: 108px; }
.mediatheque-liens { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.admin-filtrage { flex-basis: 100%; }
.admin-formulaire-actions { flex-wrap: wrap; }

/* Éditeur de code HTML (Étape 11, point 12 b) — onglets Visuel / Code et CodeMirror */
.editeur-onglets { display: flex; gap: 2px; margin-bottom: -1px; }
.editeur-onglet { padding: 6px 14px; border: 1px solid #c9ccd3; border-bottom: none; border-radius: 4px 4px 0 0; background: #e2e4e9; color: #1c1f26; font: inherit; font-size: .85rem; cursor: pointer; }
.editeur-onglet.actif { background: #fff; font-weight: 600; }
.editeur-onglet:focus-visible { outline: 2px solid var(--admin-focus); outline-offset: 2px; }
.editeur-code { border: 1px solid #c9ccd3; border-radius: 0 4px 4px 4px; background: #fff; }
.editeur-code-outils { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-bottom: 1px solid #e2e4e9; }
.editeur-code-avertissement { margin: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editeur-code-avertissement[hidden] { display: none; }
.editeur-code-zone { height: 420px; min-height: 240px; }
.editeur-code-zone .cm-editor { height: 100%; font-size: .85rem; }
.editeur-code-zone .cm-editor.cm-focused { outline: 2px solid var(--admin-focus); }
.editeur-code-zone .cm-gutters { background: #f4f5f7; color: #5f6368; border-right: 1px solid #e2e4e9; }
.editeur-code-zone .cm-activeLine, .editeur-code-zone .cm-activeLineGutter { background: #eef3fb; }
.editeur-code--plein-ecran { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; border-radius: 0; }
.editeur-code--plein-ecran .editeur-code-zone { flex: 1; height: auto !important; }
/* Aide sur les classes CSS (point 12 d) */
.editeur-code-corps { display: flex; align-items: stretch; }
.editeur-code-corps .editeur-code-zone { flex: 1; min-width: 0; }
.editeur-classes { width: 290px; max-height: 420px; overflow-y: auto; border-left: 1px solid #e2e4e9; padding: 8px; font-size: .82rem; background: #f9fafb; }
.editeur-classes[hidden] { display: none; }
.editeur-classes-recherche { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font: inherit; margin-bottom: 4px; }
.editeur-classes-groupe summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.editeur-classes-groupe ul { list-style: none; margin: 0 0 6px; padding: 0; }
.editeur-classes-groupe li { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 1px 0; }
.editeur-classe-inserer { background: none; border: none; padding: 2px 4px; font-family: ui-monospace, monospace; font-size: .8rem; color: #1c1f26; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.editeur-classe-inserer:hover, .editeur-classe-inserer:focus-visible { background: #e0ecfd; outline: 2px solid var(--admin-focus); }
.editeur-code--plein-ecran .editeur-code-corps { flex: 1; }
.editeur-code--plein-ecran .editeur-classes { max-height: none; }
@media (max-width: 800px) { .editeur-code-corps { flex-direction: column; } .editeur-classes { width: auto; border-left: none; border-top: 1px solid #e2e4e9; } }
.compo-suppression { margin-bottom: 16px; }