/* ============================================================
   admin.css — Feuille de style de la page d'administration (admin.php)
   Projet  : Émile 3D — site d'impression 3D (version serveur)
   Version : 2.40.0 — 2026-11-25 — « Bobines, matières et feuille de route »
   © 2026 Émile Snyers — Tous droits réservés. Reproduction, distribution
   ou modification interdites sans autorisation écrite de l'auteur.
   ------------------------------------------------------------
   Trois dispositions du menu : .disposition-laterale (défaut),
   .disposition-superieure, .disposition-rail. Les styles des écrans
   eux-mêmes restent dans style.css (partagés avec le site).
   2.30 — Petits écrans (bloc en fin de fichier) : jusqu'à 900 px le menu
   devient un tiroir (voile #admin-voile) ; jusqu'à 760 px l'en-tête se
   réduit à des icônes, les grilles passent sur une colonne, les tableaux
   .admin-table s'affichent en cartes (intitulé de colonne dans la cellule
   via data-label), les fenêtres et le composeur prennent tout l'écran,
   les tables larges (.table-defilante, planning) défilent horizontalement.
   ============================================================ */
:root { --admin-nav-largeur: 250px; --admin-rail-largeur: 64px; --admin-entete-hauteur: 56px; --admin-nav-fond: #1f2a30; --admin-nav-encre: #e8ecee; --admin-nav-encre-2: #9fb0b8; --admin-nav-actif: var(--principal); }
body.page-admin { margin: 0; background: #eef0ee; }
body.page-admin main#vue-admin { max-width: none; padding: 0; margin: 0; }
body.page-admin .lien-evitement:focus { z-index: 100; }
/* La coque remplace l'ancien bloc « .admin » du site : plus de largeur maximale ni de marges de page */
.admin-coque { display: flex; flex-direction: column; min-height: 100vh; }
.admin-entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--admin-entete-hauteur); padding: 0 16px; background: var(--admin-nav-fond); color: var(--admin-nav-encre); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.admin-entete h1 { margin: 0; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 10px; color: var(--admin-nav-encre); }
.admin-entete .admin-logo { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 0.02em; } .admin-entete .admin-titre { color: var(--admin-nav-encre-2); font-weight: 400; }
.admin-entete-gauche, .admin-entete-droite { display: flex; align-items: center; gap: 8px; min-width: 0; }
.admin-entete .aide { color: var(--admin-nav-encre-2); } .admin-entete .bouton-discret { color: var(--admin-nav-encre); border-color: rgba(255, 255, 255, 0.25); background: transparent; } .admin-entete .bouton-discret:hover { background: rgba(255, 255, 255, 0.12); }
.admin-rubriques-bascule { display: none; }
.admin-entete-droite .bouton .ico { display: none; }   /* 2.30 : icône de « Quitter », seulement sur petit écran */
.admin-corps { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.admin-principal { flex: 1; min-width: 0; padding: 18px 22px 40px; }
.admin-principal > .prototype { margin-top: 0; }
/* ---------- Navigation : socle commun (neutralise les anciens styles de style.css) ---------- */
.admin-nav.admin-groupes { display: block; gap: 0; margin: 0; background: var(--admin-nav-fond); color: var(--admin-nav-encre); }
.admin-nav .admin-groupe { padding: 0; border: 0; border-radius: 0; background: none; max-width: none; }
.admin-nav .admin-onglets { margin: 0; }
.admin-nav.admin-groupes.ouvert { display: block; }
.admin-nav .admin-nav-courant { display: none; }
.admin-nav .admin-groupe-titre { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: none; border: 0; color: var(--admin-nav-encre-2); font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer; }
.admin-nav .admin-groupe-titre:hover { color: #fff; }
.admin-nav .admin-groupe-icone { width: 22px; text-align: center; font-size: 1rem; }
.admin-nav .admin-onglets { display: flex; flex-direction: column; gap: 1px; padding: 0 8px 8px; }
.admin-nav .admin-onglets .choix { display: block; padding: 8px 12px 8px 44px; border: 0; border-radius: 8px; background: transparent; color: var(--admin-nav-encre); font-size: 0.92rem; text-decoration: none; text-align: left; }
.admin-nav .admin-onglets .choix:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.admin-nav .admin-onglets .choix[aria-pressed="true"] { background: var(--admin-nav-actif); color: #fff; font-weight: 700; }
.admin-coque.compact .admin-nav .admin-onglets .choix { padding-top: 5px; padding-bottom: 5px; font-size: 0.86rem; } .admin-coque.compact .admin-nav .admin-groupe-titre { padding-top: 6px; padding-bottom: 6px; }
/* ---------- 1. Barre latérale ---------- */
.disposition-laterale .admin-nav { width: var(--admin-nav-largeur); flex: 0 0 var(--admin-nav-largeur); position: sticky; top: var(--admin-entete-hauteur); height: calc(100vh - var(--admin-entete-hauteur)); overflow-y: auto; padding: 10px 0 24px; }
.disposition-laterale .admin-groupe { margin-bottom: 4px; }
.disposition-laterale .admin-groupe.actif .admin-groupe-titre { color: #fff; }
.disposition-laterale .admin-groupe.replie .admin-onglets { display: none; }
.disposition-laterale .admin-groupe-titre::after { content: '▾'; margin-left: auto; font-size: 0.8rem; opacity: 0.6; } .disposition-laterale .admin-groupe.replie .admin-groupe-titre::after { content: '▸'; }
/* ---------- 2. Barre supérieure compacte ---------- */
.disposition-superieure .admin-corps { flex-direction: column; }
.disposition-superieure .admin-nav.admin-groupes { display: flex; } .disposition-superieure .admin-nav { position: sticky; top: var(--admin-entete-hauteur); z-index: 25; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.disposition-superieure .admin-groupe { position: relative; }
.disposition-superieure .admin-groupe-titre { width: auto; padding: 8px 12px; border-radius: 8px; text-transform: none; font-size: 0.88rem; letter-spacing: 0; color: var(--admin-nav-encre); }
.disposition-superieure .admin-groupe.actif > .admin-groupe-titre { background: rgba(255, 255, 255, 0.12); color: #fff; }
.disposition-superieure .admin-onglets { display: none; position: absolute; top: 100%; left: 0; z-index: 26; min-width: 260px; padding: 8px; background: var(--admin-nav-fond); border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.disposition-superieure .admin-groupe:hover .admin-onglets, .disposition-superieure .admin-groupe.ouvert .admin-onglets, .disposition-superieure .admin-groupe:focus-within .admin-onglets { display: flex; }
.disposition-superieure .admin-nav .admin-onglets .choix { padding-left: 14px; }
/* ---------- 3. Rail d'icônes ---------- */
.disposition-rail .admin-nav { width: var(--admin-rail-largeur); flex: 0 0 var(--admin-rail-largeur); position: sticky; top: var(--admin-entete-hauteur); height: calc(100vh - var(--admin-entete-hauteur)); padding: 8px 0; overflow: visible; }
.disposition-rail .admin-groupe { position: relative; }
.disposition-rail .admin-groupe-titre { flex-direction: column; gap: 2px; padding: 10px 4px; text-transform: none; letter-spacing: 0; font-size: 0.6rem; font-weight: 600; text-align: center; align-items: center; }
.disposition-rail .admin-groupe-icone { width: auto; font-size: 1.35rem; }
.disposition-rail .admin-groupe-libelle { max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disposition-rail .admin-groupe.actif > .admin-groupe-titre { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 3px 0 0 var(--admin-nav-actif); }
.disposition-rail .admin-onglets { display: none; position: absolute; top: 0; left: 100%; z-index: 26; min-width: 280px; padding: 10px 8px; background: var(--admin-nav-fond); border-radius: 0 10px 10px 0; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3); }
.disposition-rail .admin-onglets::before { content: attr(data-titre); }
.disposition-rail .admin-groupe:hover .admin-onglets, .disposition-rail .admin-groupe.ouvert .admin-onglets, .disposition-rail .admin-groupe:focus-within .admin-onglets { display: flex; }
.disposition-rail .admin-nav .admin-onglets .choix { padding-left: 14px; }
/* ---------- Paramètres ---------- */
.param-disposition { display: block; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--trait); border-radius: 8px; cursor: pointer; } .param-disposition:hover { background: var(--surface-2); }
/* ---------- Écrans étroits : la navigation se replie derrière ☰ ---------- */
@media (max-width: 900px) {
  .admin-rubriques-bascule { display: inline-block; }
  .admin-corps { flex-direction: column; }
  .admin-nav, .disposition-laterale .admin-nav, .disposition-rail .admin-nav, .disposition-superieure .admin-nav { display: none; position: static; width: auto; height: auto; flex: none; padding: 8px 0; }
  .admin-nav.ouvert { display: block; }
  .admin-nav .admin-nav-courant { display: none; }
  .admin-nav .admin-onglets, .disposition-superieure .admin-onglets, .disposition-rail .admin-onglets { display: flex !important; position: static; min-width: 0; box-shadow: none; border-radius: 0; }
  .disposition-rail .admin-groupe-titre, .disposition-superieure .admin-groupe-titre { flex-direction: row; width: 100%; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; text-align: left; }
  .admin-principal { padding: 12px 12px 32px; }
}

/* ---------- 2.21.0 : comptes (toutes les informations, désactivation), colonnes lisibles ---------- */
.comptes-table th[scope="row"] { min-width: 170px; }
.comptes-table td:nth-child(2) { min-width: 240px; }
.comptes-table td:nth-child(8), .comptes-table td:nth-child(9) { white-space: nowrap; }
.comptes-actions { white-space: nowrap; } .comptes-actions .bouton { display: block; width: 100%; margin: 0 0 4px; }
#form-compte h5, #form-desactiver h5 { margin: 12px 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); }
#form-compte .cpt-question { margin: 0; padding: 8px 10px; border: 1px solid var(--trait); border-radius: var(--rayon); } #form-compte .cpt-question legend { padding: 0 4px; font-weight: 600; font-size: 0.9rem; } #form-compte .cpt-question .case { display: inline-flex; margin: 4px 14px 0 0; }

/* ---------- 2.25.0 : Assistant IA (kit, import guidé, images) ---------- */
.ia-etape { margin: 0 0 var(--esp-3); } .ia-etape h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.ia-kit-pre { max-height: 420px; overflow: auto; padding: 12px; background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }
.ia-table td { vertical-align: top; } .ia-table .ia-ligne.ia-erreur { background: #fff4f2; }
.ia-liste { margin: 6px 0 0; padding-left: 18px; font-size: 0.8rem; } .ia-liste li { margin: 2px 0; }
.ia-images { min-width: 260px; max-width: 360px; font-size: 0.85rem; } .ia-images > div { margin-bottom: 6px; }
.ia-prompt { padding: 6px 8px; border-left: 3px solid var(--ticket); background: var(--surface-2); }
.case-mini { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 0.8rem; }
.ia-depot { padding: 8px 10px; font-size: 0.8rem; text-align: center; cursor: pointer; } .ia-depot small { font-weight: 400; }
.ia-depot-liste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.ia-mini { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--trait); vertical-align: middle; }
.ia-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ia-resultats li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.ia-resultats .ia-liste { flex-basis: 100%; }
#ia-progression { margin-top: 8px; min-height: 1.2em; }

/* ============================================================
   2.30.0 — Administration sur téléphone et tablette (tout écran)
   - en-tête compact (icônes), menu en tiroir avec voile, contenu jamais plus large que l'écran ;
   - tableaux en cartes : chaque ligne devient une carte, chaque cellule porte le titre de sa colonne (data-label posé par Admin.adapterTables) ;
   - grilles de formulaires en une colonne, fenêtres (composeur, aperçus, dialogues) en feuille plein écran, boutons à la taille du doigt,
     champs à 16 px (aucun zoom automatique sur iPhone), appareil photo à portée de main.
   ============================================================ */
@media (max-width: 900px) {
  /* Menu en tiroir : glisse depuis la gauche, se referme au choix d'un onglet ou au toucher du voile */
  .admin-nav, .disposition-laterale .admin-nav, .disposition-rail .admin-nav, .disposition-superieure .admin-nav { display: block !important; position: fixed; top: var(--admin-entete-hauteur); left: 0; bottom: 0; width: min(330px, 86vw); height: auto; padding: 8px 0 40px; overflow-y: auto; z-index: 45; transform: translateX(-104%); transition: transform 0.25s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35); }
  .admin-nav.ouvert { transform: none; }
  .admin-voile { position: fixed; inset: var(--admin-entete-hauteur) 0 0 0; z-index: 44; background: rgba(0, 0, 0, 0.35); }
  .admin-voile[hidden] { display: none; }
  .admin-nav .admin-onglets .choix { padding-top: 11px; padding-bottom: 11px; font-size: 1rem; }
  @media (prefers-reduced-motion: reduce) { .admin-nav { transition: none; } }
}
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body.page-admin { overflow-x: hidden; }
  .admin-coque, .admin-corps, .admin-principal, #admin-onglet { max-width: 100vw; min-width: 0; }
  .admin-principal { padding: 10px 10px 90px; }
  #admin-onglet { overflow-wrap: anywhere; }
  #admin-onglet h2 { font-size: 1.3rem; margin: 0 0 8px; }
  #admin-onglet h3 { font-size: 1.05rem; }
  /* En-tête : logo, ☰ et trois icônes ; l'adresse et le mot « Administration » disparaissent */
  .admin-entete { padding: 0 8px; gap: 6px; }
  .admin-entete h1 { font-size: 0.95rem; gap: 6px; }
  .admin-entete .admin-titre, .admin-entete .admin-utilisateur { display: none; }
  .admin-entete .badge-test { font-size: 0.6rem; }
  .admin-entete-droite { gap: 4px; flex: 0 0 auto; }
  .admin-entete-droite .bouton { padding: 0.45rem 0.55rem; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .admin-entete-droite .bouton .lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .admin-entete-droite .bouton .ico { display: inline; }
  .admin-rubriques-bascule { min-width: 42px; min-height: 40px; font-size: 1.2rem; }
  .admin-entete-gauche { flex: 1 1 auto; }
  /* Fil d'Ariane et pastilles */
  .ariane { font-size: 0.85rem; }
  .tb-entete { flex-direction: column; align-items: stretch; } .tb-pastilles { flex-direction: column; align-items: stretch; } .tb-pastille { white-space: normal; }
  /* Grilles de formulaire et colonnes : une seule colonne */
  body.page-admin .grille-2, body.page-admin .grille-3, body.page-admin .grille-4, body.page-admin .maj-colonnes, body.page-admin .ref-colonnes, body.page-admin .programme-deux-colonnes, body.page-admin .compose-grille, body.page-admin .correction-colonnes, body.page-admin .admin-commande .grille-2, body.page-admin .filtres-periode, body.page-admin .stock-bord-graphes, body.page-admin .bilan-zones, body.page-admin .fab-grille { grid-template-columns: 1fr !important; }
  body.page-admin .admin-cartes { grid-template-columns: 1fr; }
  body.page-admin .kanban { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  body.page-admin .kanban-colonne { flex: 0 0 84vw; scroll-snap-align: start; }
  body.page-admin .tb-grille { grid-template-columns: 1fr; } body.page-admin .tb-commandes { grid-row: auto; } body.page-admin .tb-boite { grid-column: auto; }
  body.page-admin .tb-item { flex-wrap: wrap; } body.page-admin .tb-item .bouton { flex: 1 1 100%; text-align: center; }
  /* Tableaux → cartes (data-label posé par Admin.adapterTables) ; .table-defilante garde un vrai tableau qui défile de côté */
  body.page-admin table.admin-table:not(.table-defilante) { display: block; width: 100%; border: 0; background: none; box-shadow: none; }
  body.page-admin table.admin-table:not(.table-defilante) thead { display: none; }
  body.page-admin table.admin-table:not(.table-defilante) tbody, body.page-admin table.admin-table:not(.table-defilante) tfoot { display: block; }
  body.page-admin table.admin-table:not(.table-defilante) tr { display: block; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
  body.page-admin table.admin-table:not(.table-defilante) tr[hidden] { display: none; }
  body.page-admin table.admin-table:not(.table-defilante) tr.cmd-detail { padding: 0; border: 0; background: none; box-shadow: none; }
  body.page-admin table.admin-table:not(.table-defilante) tr.cmd-detail > td { padding: 0; }
  body.page-admin table.admin-table:not(.table-defilante) tr.cmd-resume { border-left: 5px solid var(--principal); }
  body.page-admin table.admin-table:not(.table-defilante) td, body.page-admin table.admin-table:not(.table-defilante) th { display: block; padding: 5px 0; border: 0; text-align: left; min-width: 0; width: auto; white-space: normal; }
  body.page-admin table.admin-table:not(.table-defilante) td[data-label]::before, body.page-admin table.admin-table:not(.table-defilante) th[data-label]::before { content: attr(data-label); display: inline-block; width: 36%; min-width: 78px; margin-right: 8px; vertical-align: top; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-2); padding-top: 4px; }
  body.page-admin table.admin-table:not(.table-defilante) td:not([data-label]), body.page-admin table.admin-table:not(.table-defilante) th:not([data-label]), body.page-admin table.admin-table:not(.table-defilante) td[data-plein], body.page-admin table.admin-table:not(.table-defilante) th[data-plein] { display: block; }
  body.page-admin table.admin-table:not(.table-defilante) td:empty { display: none; }
  body.page-admin table.admin-table:not(.table-defilante) th[scope="row"] { font-size: 1.02rem; }
  body.page-admin table.admin-table:not(.table-defilante) tr.total { background: var(--surface-2); }
  body.page-admin table.admin-table:not(.table-defilante) input:not([type="checkbox"]), body.page-admin table.admin-table:not(.table-defilante) select, body.page-admin table.admin-table:not(.table-defilante) textarea { width: 100%; }
  body.page-admin table.admin-table:not(.table-defilante) .bouton { margin: 2px 4px 2px 0; }
  body.page-admin .table-defilante, body.page-admin .defilante, body.page-admin .tableau-defilable, body.page-admin #pl-frise { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* planning : la grille garde sa largeur et défile de côté */
  /* Fenêtres : feuille plein écran, actions collantes en bas */
  body.page-admin .admin-demande { padding: 0; align-items: flex-end; }
  body.page-admin .admin-demande-corps, body.page-admin .admin-demande-corps:has(.grille-3), body.page-admin .admin-demande-corps:has(.consequences), body.page-admin #admin-courriels .admin-demande-corps, body.page-admin .admin-demande-corps.apercu-courriel, body.page-admin #admin-compose .compose-corps { width: 100% !important; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; overflow: auto; box-sizing: border-box; padding: 12px 12px 90px; }
  body.page-admin #admin-compose .compose-corps { width: 100vw; }
  body.page-admin .compose-apercu { position: static; } body.page-admin #compose-iframe { height: 55vh; }
  body.page-admin .compose-actions, body.page-admin .actions-collantes { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; border-top: 1px solid var(--trait); z-index: 3; }
  body.page-admin .apercu-courriel-cadre { height: 60vh; }
  /* Boutons et champs à la taille du doigt */
  body.page-admin .bouton { min-height: 40px; }
  body.page-admin .actions { flex-wrap: wrap; gap: 8px; } body.page-admin .actions .bouton { flex: 1 1 auto; text-align: center; }
  body.page-admin .admin-filtres { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
  body.page-admin .admin-filtres .choix { flex: 0 0 auto; white-space: nowrap; }
  body.page-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.page-admin select, body.page-admin textarea { font-size: 16px; }
  body.page-admin .champ input:not([type="checkbox"]):not([type="radio"]), body.page-admin .champ select { min-height: 44px; }
  body.page-admin .saisie-outil { min-height: 36px; }
  /* Photos : le bouton « Prendre une photo » n'a de sens que sur un appareil avec caméra ; l'aperçu des vignettes se serre */
  body.page-admin .photos-depot-entete { flex-direction: column; align-items: stretch; } body.page-admin .photos-depot-entete .bouton { text-align: center; }
  body.page-admin .admin-photos .commande-photos-grille { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
  /* Messages à l'écran : sur toute la largeur en bas */
  .toasts-courriels { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .toast-courriel-actions .bouton { flex: 1 1 auto; text-align: center; }
  .diagnostic-pastille { bottom: 4px; }
  /* Frise (fiche de commande) : les noms d'étapes sur deux lignes, plus petits */
  body.page-admin .suivi-nom { font-size: 0.58rem; }
  /* Comptes, livre, référentiel : largeurs fixes retirées */
  body.page-admin .comptes-table th[scope="row"], body.page-admin .comptes-table td:nth-child(2) { min-width: 0; }
  body.page-admin .comptes-actions .bouton { display: inline-block; width: auto; }
  body.page-admin .ia-images { min-width: 0; max-width: none; }
  body.page-admin .admin-entete-onglet { flex-direction: column; align-items: stretch; gap: 8px; } body.page-admin .admin-entete-onglet .actions { justify-content: stretch; }
  body.page-admin .cadre-contexte, body.page-admin .atelier-carte { padding: 10px; }
  body.page-admin .rl-resultats .rl-fiche { min-height: 40px; }
}
/* Appareil à écran tactile (téléphone, tablette) : bouton appareil photo dans les zones de photos et de messages */
.bouton-camera { display: none; }
@media (hover: none) and (pointer: coarse) { .bouton-camera { display: inline-flex; align-items: center; gap: 6px; } }

/* ---------- 2.35 — Site web → Ma Petite Impression : réglages de la page des pièces gratuites ---------- */
.mpi-adm h2 { margin-top: 1.4rem; }
.mpi-adm h2:first-child { margin-top: 0.4rem; }
.mpi-adm-couleur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mpi-adm-couleur input[type="color"] { width: 52px; height: 38px; padding: 2px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); cursor: pointer; }
.mpi-adm-couleur .case { margin: 0; }
.mpi-adm-visuel { width: 60px; }
.mpi-adm-visuel img, .mpi-adm-visuel svg { width: 60px; height: 45px; object-fit: cover; border-radius: 6px; display: block; background: var(--surface-2); }
.mpi-adm-table input[type="text"] { width: 100%; min-width: 150px; box-sizing: border-box; }
.mpi-adm-table .mpi-adm-centre { text-align: center; }
.mpi-adm-masque td:not(.mpi-adm-centre) { opacity: 0.55; }
.mpi-adm-non-propose td:not(.mpi-adm-centre) { opacity: 0.5; }   /* 2.38 : produit actif non proposé sur la page */
.mpi-adm-table td.mpi-adm-centre input[type="checkbox"] { width: 20px; height: 20px; }
.mpi-adm-filtres .actions { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.bloc-mpi { margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px; background: #fbf4ea; border: 1px dashed #b5532b; }
.bloc-mpi .case { margin: 0; }
.etiquette-mpi { background: #fbf4ea; color: #8f3f1f; border: 1px solid #e6d6c2; }
.mpi-adm-courriels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 12px 0; }
.mpi-adm-courriel { border: 1px solid #dde0da; border-radius: 10px; padding: 10px 14px 6px; margin: 0; background: #fff; }
.mpi-adm-courriel legend { font-weight: 700; padding: 0 6px; }
.mpi-adm-courriel-off { opacity: 0.6; }
.mpi-adm-courriel .champ { margin-bottom: 8px; }
.mpi-adm-categories { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.mpi-adm-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mpi-adm-choix-carte { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; cursor: pointer; background: var(--surface); }
.mpi-adm-choix-carte.choisi { border-color: var(--encre); background: var(--surface-2); }
.mpi-adm-choix-carte .mpi-adm-visuel { flex: none; }
.mpi-adm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mpi-adm-photo { margin: 0; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; background: var(--surface); }
.mpi-adm-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mpi-adm-photo figcaption { padding: 8px 10px; font-size: 0.88rem; }
.mpi-adm-photo .actions { padding: 0 10px 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mpi-adm-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.mpi-adm-chiffre { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; }
.mpi-adm-chiffre strong { font-size: 1.6rem; line-height: 1.1; }
.mpi-adm-chiffre span { font-size: 0.85rem; color: var(--encre-2); }
.mpi-adm-top { columns: 2; column-gap: 24px; margin: 0 0 12px; }
.mpi-adm-jauge { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; min-width: 90px; }
.mpi-adm-jauge span { display: block; height: 100%; background: var(--ok); }
.mpi-adm-jauge span.plein { background: var(--alerte); }
.mpi-adm-apercu { margin-top: 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); padding: 10px; overflow: auto; }
.mpi-adm-apercu iframe { display: block; width: 100%; height: 72vh; min-height: 520px; border: 0; background: #fff; margin: 0 auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transition: width 0.2s ease; }
.mpi-adm-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.mpi-adm-filtres .champ { margin: 0; min-width: 180px; }
.mpi-adm .qr-corps { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; margin: 10px 0; }
.mpi-adm .qr-image svg { width: 220px; height: 220px; }
@media (max-width: 760px) { .mpi-adm-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.mpi-adm-filtres .champ { margin: 0; min-width: 180px; }
.mpi-adm .qr-corps { grid-template-columns: 1fr; } .mpi-adm-top { columns: 1; } .mpi-adm-apercu iframe { height: 70vh; } }

/* ---------- 2.36 — Codes et coupons, avantage entreprise, missions ---------- */
.adm-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.adm-chiffre { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; }
.adm-chiffre strong { font-size: 1.6rem; line-height: 1.1; }
.adm-chiffre span { font-size: 0.85rem; color: var(--encre-2); }
.cp-code { font-size: 0.95rem; letter-spacing: 0.06em; padding: 2px 8px; border: 1px dashed var(--encre-2); border-radius: 6px; background: var(--surface); white-space: nowrap; }
.cp-actions { white-space: nowrap; }
.cp-table .statut-commande { white-space: nowrap; }
.cp-destinataires { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; max-height: 240px; overflow: auto; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; margin-bottom: 8px; }
.cp-destinataires .case { margin: 0; font-size: 0.9rem; }
.en-membres-liste { margin: 0 0 8px; padding-left: 18px; }
.s-avantage { border-left: 4px solid #0b4a7a; }
/* 2.37 — Promotions et codes (trois volets), codes entreprise, événements, profil client */
.promo-volets { margin: 6px 0 14px; } .promo-volets .choix .compteur { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 0.8em; text-align: center; }
.promo-volets .choix[aria-pressed="true"] .compteur { background: rgba(255, 255, 255, 0.25); }
.ce-table .avatar-fiche { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.ce-evenements { margin: 0; padding-left: 0; list-style: none; } .ce-evenements li { margin: 0 0 6px; } .ce-evenements li:last-child { margin-bottom: 0; }
.s-evenements { border-left: 4px solid #b8860b; grid-column: 1 / -1; } .s-evenements h5 { margin: 6px 0 8px; }   /* pleine largeur dans l'éditeur (tableau des événements) */
.en-ev-table th, .en-ev-table td { vertical-align: top; } .en-ev-table td:nth-child(2) { white-space: nowrap; } .en-ev-table td:nth-child(4) { min-width: 180px; }
.en-ev-table .statut-commande { white-space: nowrap; } .sous-formulaire { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--trait); border-radius: var(--rayon); background: var(--surface); }
.client-avantages { margin: 14px 0; } .client-avantages-resume { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 12px; padding: 0; list-style: none; }
.client-avantages-resume li { padding: 4px 10px; border-radius: 999px; font-size: 0.88rem; border: 1px solid var(--trait); background: var(--surface); }
.client-avantages-resume li.ca-oui { border-color: #0b4a7a; background: #e9f2f8; color: #0b4a7a; } .client-avantages-resume li.ca-non { color: var(--encre-2); }
.client-avantages-detail h4, .client-avantages-detail h5 { margin: 10px 0 4px; } .ca-liste { margin: 0 0 6px; padding-left: 18px; } .ca-liste li { margin-bottom: 3px; }
@media (max-width: 720px) { .client-avantages-detail { grid-template-columns: 1fr; } }

/* ---------- 2.40 : Bobines et filaments ---------- */
.fb-volets { margin: 6px 0 14px; }
.fb-outils { margin-bottom: 12px; }
.fb-table .fb-visuel { width: 44px; } .fb-table .fb-visuel .bobine-svg { width: 40px; height: 40px; }
.fb-table th[scope="row"] .pastille-r { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; border: 1px solid rgba(0, 0, 0, 0.15); }
.fb-table .fb-actions { white-space: nowrap; } .fb-table .fb-actions .bouton, .fb-table .fb-actions .lien-bouton { margin: 2px 4px 2px 0; }
.fb-table tr.support-traite td, .fb-table tr.support-traite th { opacity: 0.72; }
.fb-vente { margin-bottom: 16px; } .fb-vente .pastille { margin: 2px 4px 2px 0; }
.fab-bobine { margin-top: 10px; padding: 10px 12px; border-radius: var(--rayon); background: var(--surface-2); border: 1px dashed var(--trait); }
.fab-bobine-etat { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .fab-bobine-visuel .bobine-svg { width: 44px; height: 44px; }
.fab-bobine-form { align-items: end; } .fab-bobine-form .champ { margin: 0; }
@media (max-width: 760px) { .fb-table .fb-actions { white-space: normal; } }

/* ---------- 2.40 : Feuille de route ---------- */
.fr-outils { margin: 6px 0 10px; }
.fr-section { margin: 14px 0 18px; }
.fr-section h3 { margin: 0; }
.fr-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.fr-entree { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.fr-entree.fr-fermee { opacity: 0.7; background: var(--surface-2); }
.fr-prio { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: 0.8rem; background: #e9ecef; color: #555; margin-top: 2px; }
.fr-prio-1 { background: #ffe1dc; color: #a3261b; } .fr-prio-3 { background: #eef3ee; color: #2d6a4f; }
.fr-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fr-detail { margin: 4px 0 2px; white-space: normal; }
.fr-meta { font-size: 0.78rem; }
.fr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 260px; }
.fr-dysfonctionnement h3::before { content: '⚠ '; } .fr-amelioration h3::before { content: '✦ '; } .fr-modification h3::before { content: '✎ '; } .fr-fonctionnalite h3::before { content: '＋ '; }
.fr-doc { margin: 10px 0 16px; } .fr-doc summary { cursor: pointer; }
.fr-doc-texte { width: 100%; font: 0.86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fbfbf8; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; resize: vertical; }
@media (max-width: 760px) { .fr-entree { grid-template-columns: 26px minmax(0, 1fr); } .fr-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } }
.bobine-ligne { grid-template-columns: 220px 180px 1fr 100px; }   /* 2.40 : colonne des neuves plus large (à vendre / production) */
.bobine-neuves-detail { color: var(--encre-2); font-size: 0.74rem; line-height: 1.25; }
.bobine-neuves-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .bobine-neuves-actions .bouton { padding: 3px 9px; }
@media (max-width: 900px) { .bobine-ligne { grid-template-columns: 1fr 1fr; } }