/* =========================================================================
   Admin agence — feuille de style
   Langage visuel de l'espace client (docs/maquette-espace-client/) et
   maquette validée docs/maquettes-admin/metiers.html.

   TOUTES les couleurs, rayons, tailles et largeurs sont des variables dans
   :root ci-dessous : un ajustement se fait à un seul endroit. Le menu est
   déclaré dans menu.js.

   Points de rupture (à reporter tels quels dans les @media) :
     - ordinateur ≥ 1200 px : menu latéral complet ;
     - tablette 768–1199 px : menu réduit aux icônes, déplié par le bouton
       en haut du menu, libellé au survol ;
     - téléphone < 768 px : menu derrière « ☰ », tableaux en cartes,
       modales plein écran, cibles tactiles ≥ 44 px.
   ========================================================================= */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations'),
       url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations'),
       url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs */
  --nuit: #2B2433;          /* barre du haut, bouton principal, entrée active */
  --nuit-survol: #3A3145;
  --accent: #FDC629;        /* trait jaune, pastilles (jaune Too Be Web) */
  --texte: #1F2330;
  --texte-2: #4A5063;
  --texte-3: #5B6070;
  --texte-inactif: #A4A7B3;
  --trait: #ECEDF1;
  --trait-champ: #DEDFE6;
  --fond: #FAFAFC;
  --fond-entete: #FBFBFD;
  --blanc: #FFFFFF;
  --doux: #F2F0F6;          /* boutons doux, survol du menu */
  --doux-survol: #E7E4EE;
  --doux-2: #F0EFF4;
  --choix-fond: #FBFAFD;    /* choix en cartes : option sélectionnée (fiche client) */
  --bascule-off: #CFCFD8;   /* interrupteur désactivé (fiche client) */
  --barre-texte: #D9D4E0;   /* textes clairs sur la barre du haut */
  --vert-fond: #DDF3E6; --vert: #1D6440;
  --jaune-fond: #FFF6D6; --jaune: #7A5A00;
  --orange-fond: #FFE9D2; --orange: #8A4306;
  --rouge-fond: #FDECEC; --rouge: #A3281B;
  --bleu-fond: #E3E8FF; --bleu: #2E47A8;
  --voile: rgba(43, 36, 51, 0.55);
  --test-fond: #F26B1D;     /* pastille « TEST » : environnement de test seulement */
  --test-texte: #FFFFFF;

  /* Formes et tailles */
  --police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rayon: 12px;
  --rayon-petit: 10px;
  --rayon-carte: 16px;
  --rayon-modale: 20px;
  --hauteur-barre: 64px;
  --trait-barre: 3px;
  --menu-large: 248px;
  --menu-etroit: 72px;
  --cible-tactile: 44px;
  --ombre-carte: 0 1px 3px rgba(31, 35, 48, 0.06);
  --ombre-modale: 0 24px 60px rgba(20, 16, 26, 0.35);

  /* Aperçu des widgets : valeurs héritées d'AVANT la refonte (police et
     couleur système), pour que l'aperçu reste identique au rendu actuel. */
  --apercu-police: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --apercu-couleur: #1a1a2e;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--police); background: var(--fond); color: var(--texte); }
button, input, select, textarea { font-family: inherit; }

/* ---------------------------------------------------------------------
   Écran de connexion
   --------------------------------------------------------------------- */
#login-screen, #activation-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--nuit); border-top: var(--trait-barre) solid var(--accent);
}
.login-box {
  background: var(--blanc); padding: 36px 32px; border-radius: var(--rayon-modale);
  width: 100%; max-width: 380px; box-shadow: var(--ombre-modale);
}
.login-marque { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-marque .brand-logo { background: var(--nuit); color: var(--blanc); }
.login-box h1 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.subtitle { color: var(--texte-3); margin: 2px 0 0; font-size: 0.88rem; }
#login-form label { display: block; margin-bottom: 14px; font-size: 0.85rem; font-weight: 600; color: var(--texte); }
#login-form input {
  width: 100%; min-height: var(--cible-tactile); padding: 10px 12px; margin-top: 6px;
  border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); font-size: 0.95rem;
}
#login-form input:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(43, 36, 51, 0.12); }
.error-msg { color: var(--rouge); font-size: 0.85rem; min-height: 18px; margin: 10px 0 0; }

/* ---------------------------------------------------------------------
   Boutons (classes existantes conservées)
   --------------------------------------------------------------------- */
button {
  cursor: pointer; border: none; border-radius: var(--rayon);
  font-size: 0.9rem; padding: 10px 16px; font-weight: 600;
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--nuit); color: var(--blanc); }
.btn-primary:hover { background: var(--nuit-survol); }
.btn-large { width: 100%; min-height: 48px; font-size: 0.95rem; }
.btn-secondary { background: var(--doux); color: var(--nuit); }
.btn-secondary:hover { background: var(--doux-survol); }
.btn-link { background: none; color: var(--nuit); padding: 6px 0; min-height: 0; font-size: 0.88rem; }
.btn-link:hover { text-decoration: underline; }
.btn-danger { background: var(--rouge-fond); color: var(--rouge); }
.btn-close {
  background: var(--doux); color: var(--texte-2); width: 40px; height: 40px; min-height: 40px;
  padding: 0; font-size: 1.3rem; line-height: 1; border-radius: var(--rayon-petit); flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Cadre : barre du haut, menu latéral, contenu
   --------------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--blanc); }
.topbar {
  height: var(--hauteur-barre); flex-shrink: 0; position: sticky; top: 0; z-index: 30;
  background: var(--nuit); border-bottom: var(--trait-barre) solid var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px;
}
.topbar-gauche { display: flex; align-items: center; gap: 12px; min-width: 0; }
.burger {
  display: none; width: var(--cible-tactile); height: var(--cible-tactile); padding: 0;
  border-radius: var(--rayon); background: rgba(255, 255, 255, 0.1); color: var(--blanc); font-size: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--blanc); min-width: 0; }
.brand-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--blanc); color: var(--nuit);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.brand-logo.avec-image { background: transparent; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.brand-nom { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-tag { font-size: 12px; font-weight: 600; color: var(--nuit); background: var(--accent); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-test {
  flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--test-texte);
  background: var(--test-fond); padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.badge-test[hidden] { display: none; }
.nav-user { display: flex; align-items: center; gap: 10px; color: var(--barre-texte); font-size: 14px; min-width: 0; }
.user-badge {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--rayon); color: var(--blanc); font-weight: 600;
}
.user-badge .qui { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--accent); color: var(--nuit);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
/* Badge « Mon compte » (lot 1b-7) : un bouton ; étiquette simple si désactivé (compte client) */
.user-badge { position: relative; background: transparent; font-family: inherit; font-size: 14px; min-height: var(--cible-tactile); padding: 6px 10px 6px 6px; cursor: pointer; }
.user-badge .qui { max-width: 240px; }
.user-badge .icone-compte { flex-shrink: 0; display: flex; color: var(--barre-texte); opacity: 0.85; }
.user-badge:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.32); }
.user-badge:hover:not(:disabled) .icone-compte { color: var(--accent); opacity: 1; }
.user-badge:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.user-badge:disabled { cursor: default; padding: 6px 12px 6px 6px; }
.user-badge:disabled .icone-compte { display: none; }
.user-badge::after {
  content: 'Mon compte'; position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  background: var(--blanc); color: var(--nuit); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(20, 16, 26, 0.25);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.user-badge:not(:disabled):hover::after, .user-badge:not(:disabled):focus-visible::after { opacity: 1; transform: none; }
.menu .compte-menu { display: none; }
.apercu-nom { padding: 12px 14px; border-radius: var(--rayon); background: var(--doux); font-size: 14px; color: var(--texte-2); margin: 4px 0 14px; }
.apercu-nom strong { color: var(--texte); }
.btn-sortir { background: transparent; color: var(--barre-texte); font-weight: 500; min-height: var(--cible-tactile); padding: 10px 12px; border-radius: var(--rayon-petit); }
.btn-sortir:hover { background: rgba(255, 255, 255, 0.1); color: var(--blanc); }

.corps { flex: 1; display: flex; min-height: 0; }
.menu {
  width: var(--menu-large); flex-shrink: 0; background: var(--blanc); border-right: 1px solid var(--trait);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
}
.menu-section { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-3); padding: 14px 12px 6px; }
.menu-deplier + .menu-section { padding-top: 2px; }
.menu-entree {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px;
  padding: 9px 12px; border-radius: var(--rayon-petit); text-decoration: none; color: var(--texte-2); font-size: 14px;
}
.menu-entree:hover { background: var(--doux); color: var(--texte); }
.menu-entree.actif { background: var(--nuit); color: var(--blanc); font-weight: 600; }
.menu-entree.bientot, .menu-entree.bientot:hover { color: var(--texte-inactif); background: transparent; cursor: default; }
.menu-entree svg { flex-shrink: 0; }
.menu .libelle { flex: 1; white-space: nowrap; }
.menu .etiquette { font-size: 10px; font-weight: 700; color: #8E91A0; background: var(--doux-2); padding: 2px 7px; border-radius: 999px; }
.menu-deplier, .menu-voile { display: none; }

.contenu { flex: 1; min-width: 0; background: var(--fond); padding: 24px 28px 48px; }
.tab-content { display: none; max-width: 1180px; margin: 0 auto; }
.tab-content.active { display: block; }
.panel-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.panel-header h2, .panel-header h3 { margin: 0; }
.tab-content h2 { font-size: 22px; letter-spacing: -0.02em; }
.tab-content h3 { font-size: 16px; }

/* Comptes client (libre-service) : pas de menu, la fiche seule. */
.app.compte-client .menu, .app.compte-client .burger, .app.compte-client .menu-voile { display: none !important; }
/* Fiche client : vignette, pastilles et blocs (identité, service de posts,
   facturation, couleur et logo, profil éditorial) réservés à l'agence.
   clients.js ne les remplit jamais pour un compte client ; cette règle les
   masque en plus, quel que soit leur contenu. */
.app.compte-client .fiche-agence-seulement { display: none !important; }

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 13px 18px; font-size: 0.9rem; }
.data-table th { background: var(--fond-entete); color: var(--texte-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--trait); }
.data-table tr:not(:last-child) td { border-bottom: 1px solid var(--trait); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: var(--fond-entete); }

/* ---------------------------------------------------------------------
   Fiche client
   --------------------------------------------------------------------- */
.detail-columns { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-top: 12px; }
.detail-col { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 20px; min-width: 0; }
.detail-col h3 { margin: 0 0 12px; }
.assign-plan-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.assign-plan-row select { flex: 1; min-width: 140px; min-height: 40px; padding: 8px 10px; border-radius: var(--rayon-petit); border: 1px solid var(--trait-champ); background: var(--blanc); }
.sub-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.sub-status.active { background: var(--vert-fond); color: var(--vert); }
.sub-status.trialing { background: var(--orange-fond); color: var(--orange); }
.sub-status.canceled, .sub-status.past_due { background: var(--rouge-fond); color: var(--rouge); }

.widget-card { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; margin-bottom: 10px; background: var(--blanc); }
.widget-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.widget-card-name { font-weight: 600; }
.widget-card-type { color: var(--texte-3); font-size: 0.8rem; margin-top: 2px; }
.widget-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.embed-code {
  background: var(--doux-2); border-radius: var(--rayon-petit); padding: 8px 10px; font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 8px; word-break: break-all; color: var(--texte-2);
}

/* ---------------------------------------------------------------------
   Catalogue
   --------------------------------------------------------------------- */
.catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.catalogue-card { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 18px; }
.catalogue-card h3 { margin: 0 0 6px; font-size: 1rem; }
.catalogue-card p { margin: 0; color: var(--texte-3); font-size: 0.85rem; line-height: 1.45; }
.catalogue-card .slug { display: inline-block; margin-top: 10px; font-size: 0.7rem; color: var(--nuit); background: var(--doux); padding: 2px 8px; border-radius: 6px; }

/* ---------------------------------------------------------------------
   Fenêtre modale (aucun transform ni filter sur la modale et ses parents :
   un widget en position fixed dans l'aperçu doit rester placé par rapport
   à l'écran)
   --------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--voile); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: var(--blanc); border-radius: var(--rayon-modale); box-shadow: var(--ombre-modale);
  width: 520px; max-width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal-box.wide { width: 960px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--trait); }
.modal-header h3 { margin: 0; font-size: 1.05rem; }
#modal-body { padding: 22px; }
#modal-body label { display: block; margin-bottom: 14px; font-size: 0.85rem; font-weight: 600; color: var(--texte); }
#modal-body input, #modal-body select, #modal-body textarea {
  width: 100%; min-height: 40px; padding: 9px 11px; margin-top: 6px; font-weight: 400;
  border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); font-size: 0.92rem; background: var(--blanc);
}
#modal-body input:focus, #modal-body select:focus, #modal-body textarea:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(43, 36, 51, 0.12); }
#modal-body input[type="checkbox"], #modal-body input[type="radio"] { width: auto; min-height: 0; margin-top: 0; accent-color: var(--nuit); }
#modal-body > .btn-primary, #f-submit { width: 100%; min-height: 46px; margin-top: 6px; }
.array-item { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 12px; margin-bottom: 10px; position: relative; }
.array-item .remove-item { position: absolute; top: 6px; right: 6px; background: none; color: var(--rouge); font-size: 0.75rem; padding: 2px 6px; min-height: 0; }
.add-item-btn { margin-top: 4px; }

/* Champ objet imbriqué (ex. bloc "Apparence") */
.nested-object { background: var(--fond-entete); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 16px; }
.nested-object-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-3); margin-bottom: 10px; }
.nested-object-body label { margin-bottom: 10px; }
.nested-object-body label:last-child { margin-bottom: 0; }
.nested-object-body-compact { display: flex; gap: 10px; flex-wrap: wrap; }
.nested-object-body-compact label { flex: 1; min-width: 70px; margin-bottom: 0 !important; }
.nested-object-body-compact input { width: 100%; }
#modal-body input[type="color"] { padding: 2px; height: 40px; cursor: pointer; }
.eyedropper-btn {
  margin-left: 8px; height: 40px; width: 40px; min-height: 40px; padding: 0; border-radius: var(--rayon-petit);
  border: 1px solid var(--trait-champ); background: var(--blanc); font-size: 1.1rem; line-height: 1; vertical-align: middle;
}
.eyedropper-btn:hover { background: var(--doux); }

/* Champ upload d'image */
.image-upload-field { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.image-upload-preview { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; display: none; flex-shrink: 0; }
.image-upload-file-input { display: none; }
.image-upload-status { font-size: 0.75rem; color: var(--texte-3); }

/* Formulaire de widget avec aperçu en direct */
.widget-form-layout { display: flex; gap: 22px; align-items: flex-start; }
.widget-form-fields { flex: 1; min-width: 0; }
.widget-form-preview { flex: 1; min-width: 0; position: sticky; top: 0; }
.preview-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-3); margin-bottom: 8px; }
.preview-frame {
  background: #eef0f4; border-radius: var(--rayon); padding: 22px;
  min-height: 160px; display: flex; align-items: center; justify-content: center;
}
/* Hôte de l'aperçu (Shadow DOM) : on coupe l'héritage de la nouvelle police
   et des nouvelles couleurs de l'admin, puis on redonne les valeurs
   héritées d'avant la refonte — l'aperçu reste identique au rendu actuel. */
#widget-preview-host {
  all: initial;
  display: block; /* all: initial le remettait en inline ; largeur laissée au contenu, comme avant */
  font-family: var(--apercu-police);
  color: var(--apercu-couleur);
  font-size: 16px;
  line-height: normal;
}

/* ---------------------------------------------------------------------
   Éléments d'écran communs (maquette docs/maquettes-admin/metiers.html) :
   fil d'Ariane, en-tête, tuiles, carte, pastilles, état vide, lecture seule,
   pied de modale. Réutilisables par les écrans suivants.
   --------------------------------------------------------------------- */
.fil { font-size: 13px; color: var(--texte-3); margin-bottom: 6px; }
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.entete h2 { margin: 0; }
.entete p { margin: 6px 0 0; font-size: 14px; color: var(--texte-3); max-width: 640px; line-height: 1.5; }
.entete > .btn-primary { flex-shrink: 0; }

.bandeau-lecture { padding: 12px 16px; border-radius: var(--rayon); background: var(--bleu-fond); color: var(--bleu); font-size: 13px; font-weight: 500; margin-bottom: 16px; }

.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.tuile { border-radius: var(--rayon-carte); padding: 16px 18px; }
.tuile .chiffre { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.tuile .libelle-tuile { font-size: 13px; color: var(--texte-2); margin-top: 2px; }
.t-vert { background: var(--vert-fond); }
.t-gris { background: var(--doux-2); }
.t-bleu { background: var(--bleu-fond); }

.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden; }
.carte .data-table { border: none; border-radius: 0; }
.carte-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.carte-barre .titre { font-weight: 700; font-size: 15px; }
.case { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texte-2); cursor: pointer; min-height: 36px; }
.case input { width: 18px; height: 18px; accent-color: var(--nuit); }

.table-metiers .col-ordre { width: 70px; color: var(--texte-3); }
.table-metiers .nom { font-weight: 600; }
.table-metiers .desc { font-size: 12px; color: var(--texte-3); margin-top: 2px; }
.table-metiers tr.desactive td { color: var(--texte-inactif); }
.table-metiers .col-actions-titre { text-align: right; }
.table-metiers .nombre { font-variant-numeric: tabular-nums; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--doux-2); padding: 2px 6px; border-radius: 6px; color: var(--texte-2); word-break: break-all; }
.pastille.actif { background: var(--vert-fond); color: var(--vert); }
.pastille.inactif { background: var(--doux-2); color: var(--texte-3); }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-petit { padding: 7px 12px; font-size: 13px; border-radius: var(--rayon-petit); min-height: 36px; }

.vide { padding: 48px 24px; text-align: center; }
.vide h3 { margin: 0 0 6px; font-size: 16px; }
.vide p { margin: 0 auto 18px; font-size: 14px; color: var(--texte-3); max-width: 420px; line-height: 1.5; }

/* Pied de modale « Annuler » + action */
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 18px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--trait); background: var(--fond-entete); }
.modal-actions #f-submit { width: auto; margin-top: 0; min-height: 44px; }
.modal-actions button { min-height: 44px; }
/* « Abandonner la saisie ? » (lot 1b-6f) : barre collée en bas de la
   fenêtre, par-dessus son pied ; la saisie reste visible au-dessus. */
.modal-abandon { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 22px; background: var(--jaune-fond); border-top: 1px solid var(--trait-champ); box-shadow: 0 -8px 20px rgba(20, 16, 26, 0.08); }
.modal-abandon[hidden] { display: none; }
.modal-abandon p { margin: 0; flex: 1 1 240px; font-size: 14px; line-height: 1.45; color: var(--texte-2); }
.modal-abandon p strong { color: var(--texte); margin-right: 4px; }
.modal-abandon .boutons { display: flex; gap: 10px; }
.modal-abandon button { min-height: var(--cible-tactile); width: auto; margin: 0; }
.champs-deux { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.aide { display: block; font-size: 12px; font-weight: 400; color: var(--texte-3); margin-top: 6px; line-height: 1.45; }
.facultatif { font-weight: 400; color: var(--texte-3); }
#modal-body input[readonly] { background: var(--doux-2); color: var(--texte-2); }
#modal-body textarea { min-height: 84px; resize: vertical; }
.alerte { padding: 14px 16px; border-radius: var(--rayon); background: var(--jaune-fond); color: var(--jaune); font-size: 14px; line-height: 1.5; }
.alerte strong { color: var(--texte); }

/* ---------------------------------------------------------------------
   Liste et fiche client (maquette docs/maquettes-admin/clients.html)
   --------------------------------------------------------------------- */
.t-jaune { background: var(--jaune-fond); }
.recherche { flex: 1; max-width: 320px; min-width: 180px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); font-size: 14px; background: var(--blanc); }
.recherche:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(43, 36, 51, 0.12); }
.pastille.p-vert { background: var(--vert-fond); color: var(--vert); }
.pastille.p-gris { background: var(--doux-2); color: var(--texte-3); }
.pastille.p-jaune { background: var(--jaune-fond); color: var(--jaune); }
.pastille.p-bleu { background: var(--bleu-fond); color: var(--bleu); }
.muet { color: var(--texte-3); }
.vide-valeur { color: var(--texte-inactif); font-weight: 400; font-style: italic; }

/* Vignette de marque : logo, sinon initiales sur la couleur du client */
.vignette { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--rayon-petit); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; font-size: 12px; color: var(--nuit); background: var(--accent); }
.vignette img { width: 100%; height: 100%; object-fit: contain; background: var(--blanc); }
.vignette.grande { width: 64px; height: 64px; border-radius: var(--rayon-carte); font-size: 20px; }
.vignette:empty { display: none; }

/* Liste */
.table-clients .client-cell { display: flex; align-items: center; gap: 12px; }
.table-clients .nom { font-weight: 600; }
.table-clients .sous { font-size: 12px; color: var(--texte-3); margin-top: 2px; }

/* En-tête de la fiche */
.fiche-tete { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
.fiche-tete .grandit { flex: 1; min-width: 0; }
.fiche-tete h2 { margin: 0; overflow-wrap: anywhere; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pastilles:empty { display: none; }

/* Blocs de la fiche : deux colonnes, une seule sous 1000 px */
#fiche-agence { margin-bottom: 18px; }
#fiche-agence:empty { display: none; }
.bandeau-info { display: flex; gap: 10px; padding: 12px 16px; border-radius: var(--rayon); background: var(--jaune-fond); color: var(--jaune); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.bandeau-info strong { color: var(--texte); }
.grille-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden; min-width: 0; }
.bloc.pleine { grid-column: 1 / -1; }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.bloc-tete h3 { margin: 0; font-size: 15px; }
.bloc-tete .aide { margin: 0; }
.lignes { margin: 0; padding: 6px 18px 12px; }
.ligne { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.ligne:last-child { border-bottom: none; }
.ligne dt { color: var(--texte-3); }
.ligne dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ligne .sous { font-size: 12px; color: var(--texte-3); font-weight: 400; margin-top: 2px; }
.pastille-couleur { display: inline-flex; align-items: center; gap: 8px; }
.pastille-couleur i { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.08); display: inline-block; }

/* Profil éditorial : trois cases, écrans « bientôt » */
.profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; }
.profil-case { border: 1px solid var(--trait); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.profil-case .quoi { font-size: 12px; font-weight: 600; color: var(--texte-3); text-transform: uppercase; letter-spacing: 0.04em; }
.profil-case .valeur { font-size: 15px; font-weight: 700; }
.profil-case .detail { font-size: 12px; color: var(--texte-3); line-height: 1.45; flex: 1; }
.profil-case .bientot { align-self: flex-start; background: var(--doux-2); color: var(--texte-inactif); cursor: default; }
.profil-vide { padding: 16px 18px; font-size: 14px; color: var(--texte-3); }

/* Fenêtres de la fiche. Les règles générales de #modal-body label
   (bloc, marge, champ à pleine largeur) sont neutralisées ici. */
#modal-body .choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
#modal-body .choix label { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; min-height: 44px; border: 1px solid var(--trait-champ); border-radius: var(--rayon); cursor: pointer; font-size: 14px; }
#modal-body .choix label .aide { margin-top: 3px; }
#modal-body .choix input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
#modal-body .choix label:has(input:checked) { border-color: var(--nuit); box-shadow: 0 0 0 1px var(--nuit); background: var(--choix-fond); }
.groupe-titre { display: block; margin-bottom: 0; font-size: 0.85rem; font-weight: 600; color: var(--texte); }
.groupe { margin-bottom: 14px; }
#modal-body .interrupteur { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--trait-champ); border-radius: var(--rayon); cursor: pointer; }
.bascule { position: relative; width: 48px; height: 28px; flex-shrink: 0; margin-top: 2px; }
#modal-body .bascule input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.bascule span { position: absolute; inset: 0; border-radius: 999px; background: var(--bascule-off); transition: background 0.15s; }
.bascule span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.bascule input:checked + span { background: var(--vert); }
.bascule input:checked + span::after { transform: translateX(20px); }
.couleur-ligne { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#modal-body .couleur-ligne input[type="color"] { width: 52px; height: 44px; margin-top: 0; flex-shrink: 0; }
#modal-body .couleur-ligne input[type="text"] { max-width: 140px; margin-top: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.depot { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 14px; border: 1.5px dashed var(--trait-champ); border-radius: var(--rayon); }
.depot .txt { flex: 1; font-size: 13px; font-weight: 400; color: var(--texte-3); line-height: 1.45; }
.depot .txt strong { display: block; color: var(--texte); font-size: 14px; }
.depot .boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu-espace { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; margin-top: 6px; }
.apercu-espace .barre { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--nuit); color: var(--blanc); font-weight: 700; font-size: 14px; border-bottom: 3px solid var(--accent); }
.apercu-espace .barre .vignette { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.apercu-espace .corps-apercu { display: flex; gap: 8px; padding: 12px 14px; background: var(--fond); }
.apercu-espace .corps-apercu span { flex: 1; height: 34px; border-radius: var(--rayon-petit); }

/* ---------------------------------------------------------------------
   Questionnaires (maquette docs/maquettes-admin/questionnaires.html,
   lot 1b-5e). Éléments réutilisables : onglets, aide lisible au toucher,
   liste groupée par thème, légende, champs sur deux colonnes, erreur dans
   une fenêtre, état de chargement. Versions tablette et téléphone en fin de
   section (mêmes points de rupture que ci-dessous).
   --------------------------------------------------------------------- */
.t-orange { background: var(--orange-fond); }
.pastille.p-metier { background: var(--doux-2); color: var(--texte-2); white-space: normal; }
.pastille.p-orange { background: var(--orange-fond); color: var(--orange); }
.pastille.p-rouge { background: var(--rouge-fond); color: var(--rouge); }
.texte-danger { color: var(--rouge); }
.entete .boutons { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.chargement { padding: 32px 18px; text-align: center; font-size: 14px; color: var(--texte-3); }

/* Onglets d'un écran (ex. Banque de questions / Par métier) */
/* Trait de base en ombre intérieure (et non en bordure avec marge négative
   des onglets, qui débordait et faisait apparaître une barre de défilement
   verticale) ; défilement horizontal gardé pour les petits écrans, sans
   barre visible. */
.onglets {
  display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--trait); margin-bottom: 18px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a, .onglets .onglet-bientot {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: var(--cible-tactile);
  font-size: 14px; font-weight: 600; color: var(--texte-3); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.onglets a.actif { color: var(--nuit); border-bottom-color: var(--nuit); }
.onglets .onglet-bientot { color: var(--texte-inactif); cursor: default; }
.onglets .compteur, .onglets .etiquette { font-size: 11px; background: var(--doux-2); color: var(--texte-2); border-radius: 999px; padding: 1px 7px; }
.onglets .etiquette { color: #8E91A0; font-weight: 700; }

/* Barre de filtres */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtres select, .filtres input[type="search"] {
  border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); padding: 8px 10px;
  font-size: 13px; min-height: 40px; background: var(--blanc); max-width: 100%;
}
.filtres input[type="search"] { min-width: 200px; }
.filtres select:focus, .filtres input[type="search"]:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(43, 36, 51, 0.12); }

/* Aide lisible au toucher (règle des écrans : jamais seulement au survol) :
   une icône qu'on touche pour afficher le texte ; Échap ou un toucher
   ailleurs la ferme (app.js). La bulle s'ouvre vers la gauche : placer
   l'icône à droite de ce qu'elle explique. */
.filtre-aide { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.aide-icone {
  width: 28px; height: 28px; min-height: 0; padding: 0; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--trait-champ); background: var(--blanc); color: var(--texte-2); font-size: 13px; font-weight: 700;
}
.aide-icone[aria-expanded="true"] { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }
.bulle {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: 240px; max-width: 80vw; padding: 8px 10px;
  border-radius: 8px; background: var(--nuit); color: var(--blanc); font-size: 13px; font-weight: 400; line-height: 1.4;
  box-shadow: 0 6px 18px rgba(20, 16, 26, 0.25);
}
.bulle[hidden] { display: none; }

/* Liste de questions groupées par thème */
.theme-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px;
  background: var(--fond-entete); border-bottom: 1px solid var(--trait);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3);
}
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--trait); background: var(--blanc); }
.q:last-child { border-bottom: none; }
.q.desactivee .q-libelle, .q.desactivee .q-meta { color: var(--texte-inactif); }
.q-libelle { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.q-meta { font-size: 12px; color: var(--texte-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.q .col-type { font-size: 13px; color: var(--texte-3); white-space: nowrap; }
.legende { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 10px 18px; font-size: 12px; color: var(--texte-3); border-top: 1px solid var(--trait); background: var(--fond-entete); }

/* Lignes rangées (thèmes, questionnaire d'un métier) : rang, texte, ordre, actions */
.qm { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--trait); background: var(--blanc); }
.qm:last-child { border-bottom: none; }
.qm .rang { font-size: 13px; color: var(--texte-3); font-variant-numeric: tabular-nums; text-align: center; }
.qm.desactive .q-libelle, .qm.desactive .q-meta, .qm.desactive .rang { color: var(--texte-inactif); }
.ordre { display: flex; gap: 4px; }
.btn-icone { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--rayon-petit); }
#tab-questionnaires button[disabled], #modal-body .qm button[disabled], .modal-actions button[disabled] { opacity: 0.45; cursor: default; }
.qm .edition-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#modal-body .qm .edition-ligne input { margin-top: 0; flex: 1; min-width: 160px; }
.nouveau-theme { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px dashed var(--trait-champ); border-radius: var(--rayon); }
#modal-body .liste-rangee { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }

/* Fenêtre d'une question : deux colonnes, réglages, choix à clé */
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#modal-body .case { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 14px; min-height: 36px; }
#modal-body .case input { width: 18px; height: 18px; flex-shrink: 0; }
.bloc-intro { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.bloc-intro .aide { flex: 1; margin: 0; }
.reglages { border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; background: var(--fond-entete); }
.reglages-titre { font-size: 14px; font-weight: 700; }
.reglages > .aide { margin: 2px 0 12px; }
.types-publication { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 2px 0 0 28px; }
.choix-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.choix-ligne, .choix-entete { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.choix-entete { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-3); }
#modal-body .choix-ligne input { margin-top: 0; }
#modal-body .choix-ligne input.cle { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.erreur-fenetre { padding: 12px 14px; border-radius: var(--rayon); background: var(--rouge-fond); color: var(--rouge); font-size: 14px; line-height: 1.45; margin-top: 14px; }
.erreur-fenetre[hidden] { display: none; }
#modal-body .alerte { margin-bottom: 14px; }
#modal-body textarea:disabled { background: var(--doux-2); color: var(--texte-inactif); cursor: not-allowed; }

/* Écrans B et C : questionnaire d'un métier, versions publiées (1b-5e-2) */
.btn-accent { background: var(--accent); color: var(--nuit); }
.btn-accent:hover { filter: brightness(0.96); }
.muet.petit, .petit { font-size: 13px; }
.choix-metier { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.choix-metier select { border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); padding: 10px 12px; font-size: 15px; font-weight: 600; min-height: var(--cible-tactile); background: var(--blanc); min-width: 260px; max-width: 100%; }
.etat-metier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bandeau { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--rayon); font-size: 13px; font-weight: 500; margin-bottom: 16px; line-height: 1.5; }
.bandeau svg { flex-shrink: 0; margin-top: 1px; }
.bandeau .grandit { flex: 1; min-width: 0; }
.bandeau ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.b-bleu { background: var(--bleu-fond); color: var(--bleu); }
.b-orange { background: var(--orange-fond); color: var(--orange); }
.qm.ajoutee { background: #F2FBF5; box-shadow: inset 3px 0 0 var(--vert); }
.qm.modifiee { box-shadow: inset 3px 0 0 var(--bleu); }
.qm.retiree { background: #FEF6F5; box-shadow: inset 3px 0 0 var(--rouge); }
.qm.retiree .q-libelle { text-decoration: line-through; color: var(--texte-3); }
.qm .col-ordre { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.interrupteur-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); cursor: pointer; min-height: 36px; white-space: nowrap; }
.interrupteur-mini .bascule { width: 40px; height: 24px; margin-top: 0; }
.interrupteur-mini .bascule input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.interrupteur-mini .bascule input:disabled { cursor: default; }
.interrupteur-mini .bascule span::after { width: 18px; height: 18px; }
.interrupteur-mini .bascule input:checked + span::after { transform: translateX(16px); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pied-publier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--trait); font-size: 13px; }
.pied-publier .publier { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.boutons-vide { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.version { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.version:last-child { border-bottom: none; }
.version .num { font-size: 18px; font-weight: 700; }
.version .titre-version { font-weight: 600; }
.version .quand { font-size: 13px; color: var(--texte-3); margin-top: 2px; }
.version .actions { flex-wrap: wrap; }
.comparaison .qm { grid-template-columns: 90px minmax(0, 1fr) auto; }
.comparaison .qm .rang { text-align: left; font-weight: 700; font-size: 12px; }
.selecteur { border: 1px solid var(--trait); border-radius: 14px; max-height: 360px; overflow-y: auto; margin-bottom: 12px; }
#modal-body .selecteur label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--trait); cursor: pointer; min-height: 44px; font-size: 14px; font-weight: 400; }
#modal-body .selecteur label:last-child { border-bottom: none; }
#modal-body .selecteur input { width: 18px; height: 18px; }
#modal-body .selecteur .deja { color: var(--texte-inactif); cursor: default; }
.selecteur .theme-tete { position: sticky; top: 0; z-index: 1; }
.ajout-filtres { margin-bottom: 12px; }
.ajout-filtres input[type="search"] { flex: 1; }
#modal-body .ajout-filtres input[type="search"] { margin-top: 0; }
.alerte-info { background: var(--bleu-fond); color: var(--bleu); }
.recharger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.recharger[hidden] { display: none; }
.recharger .aide { margin: 0; }

@media (max-width: 1199px) {
  .q { grid-template-columns: minmax(0, 1fr) auto; }
  .q .col-type { display: none; }
  .qm { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .qm .col-ordre { grid-column: 3; grid-row: 1; }
  .qm .col-actions { grid-column: 2 / 4; justify-content: flex-start; }
  .qm .col-oblig { grid-column: 2 / 4; }
}

@media (max-width: 767px) {
  .entete .boutons { width: 100%; }
  .entete .boutons button { flex: 1; min-height: 48px; }
  .filtres { width: 100%; }
  .filtres select, .filtres input[type="search"] { flex: 1 1 100%; min-height: var(--cible-tactile); font-size: 16px; min-width: 0; }
  .aide-icone { width: var(--cible-tactile); height: var(--cible-tactile); }
  .btn-icone { width: var(--cible-tactile); height: var(--cible-tactile); min-height: var(--cible-tactile); }
  .carte > #qb-liste, .carte > .legende { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
  .carte > .legende { margin-top: 10px; }
  .q { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; }
  .q .actions { justify-content: stretch; }
  .q .actions button { flex: 1; min-height: 48px; }
  .qm { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px; }
  .qm .col-ordre, .qm .col-actions { grid-column: 1 / -1; grid-row: auto; }
  .qm .col-ordre .ordre, .qm .col-ordre { width: 100%; }
  .qm .col-ordre .btn-icone { flex: 1; }
  .qm .col-actions button { flex: 1; min-height: 48px; }
  .qm .col-ordre button { min-height: var(--cible-tactile); }
  .qm .col-ordre button:not(.btn-icone) { flex: 1; }
  .qm .col-oblig { grid-column: 1 / -1; }
  .interrupteur-mini { min-height: var(--cible-tactile); }
  .choix-metier select { width: 100%; min-width: 0; font-size: 16px; }
  .version { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .version .actions { justify-content: stretch; }
  .version .actions button { flex: 1; min-height: var(--cible-tactile); }
  .comparaison .qm { grid-template-columns: 1fr; }
  .pied-publier .publier, .pied-publier button { width: 100%; }
  .pied-publier button { min-height: 48px; }
  .deux { grid-template-columns: 1fr; gap: 0; }
  .reglages { padding: 12px; }
  #modal-body .case { min-height: var(--cible-tactile); }
  .types-publication { flex-direction: column; }
  .choix-entete { display: none; }
  .choix-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .choix-ligne input.cle { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Notification
   --------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--nuit); color: var(--blanc); padding: 12px 20px; border-radius: var(--rayon);
  font-size: 0.9rem; font-weight: 500; box-shadow: 0 8px 24px rgba(20, 16, 26, 0.3); max-width: calc(100vw - 32px);
}
.toast.error { background: var(--rouge); }

/* ---------------------------------------------------------------------
   État du serveur (tableau de bord)
   --------------------------------------------------------------------- */
.etat-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.etat-entete h2 { margin: 0; }
.etat-maj { color: var(--texte-3); font-size: 0.82rem; margin: 0 0 14px; }
.etat-bandeau { padding: 14px 18px; border-radius: var(--rayon); margin-bottom: 18px; font-weight: 600; }
.etat-bandeau.ok { background: var(--vert-fond); color: var(--vert); }
.etat-bandeau.ko { background: var(--jaune-fond); color: var(--jaune); border-left: 5px solid var(--accent); }
.etat-bandeau ul { margin: 8px 0 0; padding-left: 20px; font-weight: 400; }
.etat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.etat-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 18px; box-shadow: var(--ombre-carte); }
.etat-carte h3 { margin: 0 0 12px; font-size: 1rem; }
.etat-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 0.9rem; }
.etat-ligne:last-child { border-bottom: none; }
.etat-ligne small { margin: 0; }
.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.pastille.ok { background: var(--vert-fond); color: var(--vert); }
.pastille.ko { background: var(--rouge-fond); color: var(--rouge); }
.etat-bloc { margin-bottom: 12px; font-size: 0.9rem; }
.jauge { height: 8px; background: var(--doux-2); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.jauge > span { display: block; height: 100%; background: var(--nuit); }
.jauge.alerte > span { background: var(--rouge); }

/* =========================================================================
   Tablette : 768 à 1199 px — menu réduit aux icônes, libellé au survol
   ========================================================================= */
@media (max-width: 1199px) {
  .user-badge .qui { max-width: 180px; }
  .menu { width: var(--menu-etroit); padding: 14px 10px; align-items: center; }
  .menu-section { font-size: 0; padding: 0; height: 1px; width: 36px; background: var(--trait); margin: 10px 0; }
  .menu-deplier + .menu-section { padding: 0; }
  .menu-entree { width: 48px; height: var(--cible-tactile); padding: 0; justify-content: center; }
  .menu .libelle, .menu .etiquette { display: none; }
  .menu-entree.actif::before {
    content: ''; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--blanc);
  }
  .menu-entree[data-libelle]:hover::after {
    content: attr(data-libelle); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--nuit); color: var(--blanc); font-size: 13px; font-weight: 600;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 40; box-shadow: 0 6px 18px rgba(20, 16, 26, 0.25);
  }
  .contenu { padding: 20px 22px 40px; }
  .brand-nom { font-size: 16px; }
  .detail-columns { grid-template-columns: 1fr; }

  /* Liste et fiche client */
  .table-clients .col-cree { display: none; }
  .ligne { grid-template-columns: 150px minmax(0, 1fr); }
  .profil { grid-template-columns: 1fr; }
}

/* Fiche client : blocs sur une seule colonne sous 1000 px (tablette en
   portrait, menu réduit compris) */
@media (max-width: 999px) {
  .grille-fiche { grid-template-columns: 1fr; }
}

/* Tablette seulement : bouton en haut du menu, qui le déplie en entier
   par-dessus le contenu (toucher), puis le replie. */
@media (min-width: 768px) and (max-width: 1199px) {
  .menu-deplier {
    display: flex; flex-shrink: 0; width: 48px; height: var(--cible-tactile); min-height: 0; padding: 0; margin-bottom: 8px;
    border-radius: var(--rayon-petit); background: var(--doux); color: var(--nuit);
  }
  .menu-deplier .replier { display: none; }
  .app.menu-deplie .corps { position: relative; padding-left: var(--menu-etroit); }
  .app.menu-deplie .menu {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 45; width: var(--menu-large);
    align-items: stretch; padding: 14px 12px; overflow-y: auto; box-shadow: 8px 0 30px rgba(20, 16, 26, 0.18);
  }
  .app.menu-deplie .menu-deplier { align-self: flex-end; }
  .app.menu-deplie .menu-deplier .deplier { display: none; }
  .app.menu-deplie .menu-deplier .replier { display: inline; }
  .app.menu-deplie .menu-section { display: block; font-size: 11px; padding: 14px 12px 6px; height: auto; width: auto; background: none; margin: 0; }
  .app.menu-deplie .menu-entree { width: auto; height: auto; min-height: var(--cible-tactile); padding: 9px 12px; justify-content: flex-start; }
  .app.menu-deplie .menu .libelle, .app.menu-deplie .menu .etiquette { display: inline; }
  .app.menu-deplie .menu-entree.actif::before, .app.menu-deplie .menu-entree[data-libelle]:hover::after { display: none; }
  .app.menu-deplie .menu-voile { display: block; position: absolute; inset: 0; z-index: 44; background: rgba(43, 36, 51, 0.25); }
}

/* =========================================================================
   Téléphone : moins de 768 px
   ========================================================================= */
@media (max-width: 767px) {
  .topbar { padding: 0 12px; }
  .burger { display: inline-flex; }
  .brand-nom { display: none; }
  .user-badge { padding: 4px; border: none; }
  .user-badge .qui { display: none; }
  /* « Mon compte » (lot 1b-7) : avatar + icône, pas de bulle au toucher ; entrée en tête du menu */
  .user-badge:not(:disabled) { padding: 6px; gap: 6px; }
  .user-badge:disabled { padding: 4px; } /* compte client : inchangé */
  .user-badge::after { display: none; }
  .menu .compte-menu { display: flex; }
  .btn-sortir .texte-sortir { display: none; }

  /* Menu : panneau qui glisse depuis la gauche */
  .menu {
    position: fixed; top: calc(var(--hauteur-barre) + var(--trait-barre)); bottom: 0; left: 0; z-index: 45;
    width: 280px; max-width: 86vw; align-items: stretch; padding: 16px 12px 24px; overflow-y: auto;
    transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: 8px 0 30px rgba(20, 16, 26, 0.2);
  }
  .app.menu-ouvert .menu { transform: translateX(0); }
  .menu-section { font-size: 11px; padding: 14px 12px 6px; height: auto; width: auto; background: none; margin: 0; }
  .menu-deplier + .menu-section { padding-top: 2px; }
  /* « Mon compte » en tête (lot 1b-7) : écart normal avant la première section */
  .compte-menu + .menu-deplier + .menu-section { padding-top: 14px; }
  .menu-entree { width: auto; height: auto; min-height: 48px; padding: 10px 12px; justify-content: flex-start; font-size: 15px; }
  .menu .libelle, .menu .etiquette { display: inline; }
  .menu-entree.actif::before, .menu-entree[data-libelle]:hover::after { display: none; }
  .menu-voile { position: fixed; inset: calc(var(--hauteur-barre) + var(--trait-barre)) 0 0 0; z-index: 44; background: rgba(43, 36, 51, 0.45); }
  .app.menu-ouvert .menu-voile { display: block; }

  .contenu { padding: 16px 14px 36px; }
  .tab-content h2 { font-size: 20px; }
  .panel-header > .btn-primary { width: 100%; min-height: 48px; }
  button { min-height: var(--cible-tactile); }

  /* Tableaux → une carte par ligne (libellés tirés de data-label) */
  .data-table { border: none; background: transparent; border-radius: 0; overflow: visible; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
  .data-table td { padding: 4px 0; border: none !important; }
  .data-table td:empty { display: none; }
  .data-table td[data-label]::before { content: attr(data-label) ' : '; color: var(--texte-3); font-size: 0.82rem; }
  .data-table td.titre-carte { font-weight: 600; font-size: 1rem; }
  .data-table td.titre-carte::before { content: none; }

  .detail-col { padding: 16px; }
  .widget-card-actions button { flex: 1 1 calc(50% - 6px); }

  /* Modales plein écran */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box, .modal-box.wide { width: 100%; max-width: none; max-height: none; min-height: 100%; border-radius: 0; }
  .modal-header { position: sticky; top: 0; z-index: 1; background: var(--blanc); }
  #modal-body { padding: 16px 14px 24px; }
  #modal-body input, #modal-body select, #modal-body textarea { min-height: var(--cible-tactile); font-size: 16px; }
  #f-submit { min-height: 50px; }
  .widget-form-layout { flex-direction: column; }
  .widget-form-preview { position: static; width: 100%; }

  /* Écrans en tuiles et cartes (ex. Métiers) */
  .entete { flex-direction: column; gap: 14px; }
  .entete > .btn-primary { width: 100%; min-height: 48px; }
  .tuiles { grid-template-columns: 1fr; gap: 10px; }
  .tuile { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; }
  .tuile .chiffre { font-size: 24px; }
  .carte { border: none; background: transparent; overflow: visible; }
  .carte-barre { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; margin-bottom: 12px; }
  .table-metiers td.col-ordre { display: none; }
  .table-metiers td.col-actions { margin-top: 8px; }
  .actions { justify-content: stretch; }
  .actions .btn-petit { flex: 1; min-height: 48px; font-size: 14px; }
  .champs-deux { grid-template-columns: 1fr; gap: 0; }
  .modal-actions { position: sticky; bottom: 0; margin: 18px -14px -24px; padding: 12px 14px; }
  .modal-actions button, .modal-actions #f-submit { flex: 1; min-height: 50px; }
  .modal-abandon { padding: 12px 14px; }
  .modal-abandon .boutons { flex-direction: column; width: 100%; }
  .modal-abandon button { width: 100%; min-height: 50px; }

  /* Liste des clients : une carte par client (libellés tirés de data-label) */
  .recherche { max-width: none; width: 100%; min-height: var(--cible-tactile); font-size: 16px; }

  /* Fiche client */
  .fiche-tete { align-items: flex-start; }
  .vignette.grande { width: 52px; height: 52px; font-size: 16px; border-radius: 14px; }
  .ligne { grid-template-columns: 1fr; gap: 2px; }
  .ligne dt { font-size: 12px; }
  .bloc-tete .btn-petit { min-height: var(--cible-tactile); }
  .bloc-tete .aide { display: none; }
  .profil-case .bientot { align-self: stretch; }
  #modal-body .choix { grid-template-columns: 1fr; }
  .depot { flex-direction: column; align-items: stretch; }
  .depot .boutons button { flex: 1; min-height: var(--cible-tactile); }
}

/* =========================================================================
   Dossier éditorial d'un client (maquette docs/maquettes-admin/
   dossier-editorial.html, lot 1b-6d) : tuiles, « À faire », sommaire,
   rubriques en accordéon, lignes, répartition des publications, fenêtres.
   Versions tablette et téléphone en fin de section (mêmes points de rupture).
   ========================================================================= */
.fil a { color: var(--texte-3); }
.dossier-tete { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.dossier-tete .grandit { flex: 1; min-width: 0; }
.dossier-tete h2 { margin: 0; }
.dossier-tete .sous { font-size: 14px; color: var(--texte-3); margin-top: 4px; overflow-wrap: anywhere; }
.b-gris { background: var(--doux-2); color: var(--texte-2); }
.b-bleu strong, .b-gris strong { color: var(--texte); }
.bandeau[hidden] { display: none; }

.tuiles.tuiles-dossier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuiles-dossier .tuile { padding: 14px 16px; }
.tuiles-dossier .tuile .chiffre { font-size: 26px; }

.ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.ico-jaune { background: var(--jaune-fond); color: var(--jaune); }
.ico-vert { background: var(--vert-fond); color: var(--vert); }
.ico-bleu { background: var(--bleu-fond); color: var(--bleu); }
.ico-orange { background: var(--orange-fond); color: var(--orange); }
.ico-rouge { background: var(--rouge-fond); color: var(--rouge); }
.ico-gris { background: var(--doux-2); color: var(--texte-2); }

.a-faire { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 14px 18px; margin-bottom: 18px; }
.a-faire h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.a-faire ul { list-style: none; margin: 0; padding: 0; }
.a-faire li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--trait); font-size: 14px; }
.a-faire li:first-child { border-top: none; }
.a-faire li .quoi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a-faire .puce { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.puce-bleu { background: var(--bleu); } .puce-jaune { background: var(--jaune); }
.puce-gris { background: var(--texte-3); } .puce-orange { background: var(--orange); }

.dossier { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.sommaire { position: sticky; top: calc(var(--hauteur-barre) + 20px); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sommaire a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon-petit); text-decoration: none; color: var(--texte-2); font-size: 14px; min-height: 40px; }
.sommaire a:hover { background: var(--doux); color: var(--texte); }
.sommaire a .ico { width: 26px; height: 26px; border-radius: 8px; }
.sommaire a .nom-rub { flex: 1; min-width: 0; }
.sommaire a .compte { font-size: 12px; font-weight: 700; color: var(--texte-3); }
.sommaire a .compte.compte-nul { color: var(--texte-inactif); font-weight: 500; } /* jamais .vide : bloc général à 48 px de marge */

.rubrique { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); margin-bottom: 14px; scroll-margin-top: calc(var(--hauteur-barre) + 20px); overflow: hidden; }
.rubrique > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 60px; }
.rubrique > summary::-webkit-details-marker { display: none; }
.rubrique > summary .titre-rub { flex: 1; min-width: 0; }
.rubrique > summary h3 { margin: 0; font-size: 16px; font-weight: 700; }
.rubrique > summary .resume-rub { font-size: 12px; color: var(--texte-3); margin-top: 2px; }
.rubrique > summary .chevron { display: inline-flex; flex-shrink: 0; color: var(--texte-3); transition: transform .15s; }
.rubrique[open] > summary .chevron { transform: rotate(180deg); }
.rubrique[open] > summary { border-bottom: 1px solid var(--trait); }
.explication { padding: 12px 18px; background: var(--fond-entete); border-bottom: 1px solid var(--trait); font-size: 13px; color: var(--texte-2); line-height: 1.5; }
.explication .ex { display: block; color: var(--texte-3); margin-top: 2px; }
.questionnaire-lie { padding: 12px 18px; font-size: 13px; color: var(--texte-3); background: var(--fond-entete); border-bottom: 1px solid var(--trait); line-height: 1.5; overflow-wrap: anywhere; }
.questionnaire-lie strong { color: var(--texte-2); }
.dossier .bulle, #modal-body .groupe-titre .bulle { left: 0; right: auto; }

.el { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--trait); scroll-margin-top: calc(var(--hauteur-barre) + 20px); transition: box-shadow .3s; }
.el.a-confirmer { background: #FFFDF4; }
.el.surligne { box-shadow: inset 4px 0 0 var(--accent); }
.el .nature, .dosage .nature { font-size: 12px; font-weight: 700; color: var(--texte-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.el .texte { font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.el .details { margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 3px 10px; font-size: 13px; }
.el .details dt { color: var(--texte-3); }
.el .details dd { margin: 0; color: var(--texte-2); overflow-wrap: anywhere; white-space: pre-line; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--texte-3); }
.el .actions { flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.btn-vert { background: var(--vert-fond); color: var(--vert); }
.btn-plein.btn-danger { background: var(--rouge); color: var(--blanc); }
.btn-link.btn-petit { padding: 7px 10px; min-height: 36px; color: var(--texte-2); }

.dosage { padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.dosage .titre-dosage { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dosage .bandeau { margin: 0 0 10px; }
.barre-dosage { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--doux-2); margin-bottom: 10px; }
.barre-dosage span { display: block; height: 100%; }
.legende-dosage { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texte-2); align-items: center; }
.legende-dosage i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legende-dosage .pastille { margin-left: 6px; }
.actions-dosage { justify-content: flex-start; margin-top: 10px; }
.vide-rub { padding: 16px 18px; font-size: 14px; color: var(--texte-3); border-bottom: 1px solid var(--trait); }
.pied-rub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; }

.plus-tard { background: var(--blanc); border: 1px dashed var(--trait-champ); border-radius: var(--rayon-carte); padding: 14px 18px; }
.plus-tard h3 { margin: 0 0 8px; font-size: 15px; }
.plus-tard ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.plus-tard li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--texte-3); line-height: 1.45; }
.plus-tard li strong { color: var(--texte-2); }

/* Fenêtres du dossier */
.modal-box.moyenne { width: 620px; }
.modal-sous { margin: -8px 0 16px; font-size: 13px; color: var(--texte-3); line-height: 1.45; }
.separateur { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-3); border-top: 1px solid var(--trait); padding-top: 14px; margin: 4px 0 14px; }
#modal-body .choix.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#modal-body .choix label > span { display: block; min-width: 0; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#modal-body .cases label { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 1px solid var(--trait-champ); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 400; cursor: pointer; min-height: 40px; }
#modal-body .cases input { width: 16px; height: 16px; margin: 0; }
#modal-body .cases label:has(input:checked) { border-color: var(--nuit); background: var(--choix-fond); font-weight: 600; }
#modal-body .interrupteur { margin-bottom: 14px; }
#modal-body .interrupteur.bloque { cursor: default; background: var(--doux-2); }
#modal-body .bascule input:disabled { cursor: default; }
#modal-body .bandeau-info { margin-bottom: 14px; }
.dosage-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 150px 92px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.dosage-ligne.bloquee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 92px; }
.dosage-ligne .type { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dosage-ligne .type i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.dosage-ligne .aide { margin: 0; }
#modal-body .dosage-ligne input[type="range"] { margin: 0; min-height: 0; padding: 0; border: none; accent-color: var(--nuit); }
.dosage-ligne .pct { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
#modal-body .dosage-ligne .pct input { width: 64px; margin: 0; text-align: right; }
.total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--rayon); font-weight: 700; font-size: 15px; margin-top: 12px; }
.total.ok { background: var(--vert-fond); color: var(--vert); }
.total.ko { background: var(--rouge-fond); color: var(--rouge); }
.erreur-texte { font-size: 13px; color: var(--rouge); font-weight: 600; margin: 6px 0; }
.erreur-texte:empty { display: none; }
.recharger-zone { margin-top: 14px; }
.recharger-zone[hidden] { display: none; }
.saisie-perdue { padding: 12px 14px; border-radius: var(--rayon); background: var(--doux-2); font-size: 13px; color: var(--texte-2); margin-bottom: 14px; line-height: 1.45; }
.saisie-perdue pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; color: var(--texte); background: var(--blanc); border-radius: var(--rayon-petit); padding: 10px 12px; }

/* Profil éditorial de la fiche client : bouton « Ouvrir le dossier » */
.profil-case .valeur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profil-case > .btn-primary { align-self: flex-start; }

@media (max-width: 1199px) {
  /* Sommaire : pastilles au-dessus des rubriques */
  .dossier { grid-template-columns: 1fr; }
  .sommaire { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px; }
  .sommaire a { border: 1px solid var(--trait); min-height: var(--cible-tactile); padding: 6px 10px 6px 6px; }
  .sommaire a .nom-rub { flex: none; }
  .tuiles.tuiles-dossier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .fil a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding-right: 6px; }
  .dossier-tete { align-items: flex-start; }
  .tuiles.tuiles-dossier { gap: 8px; }
  .tuiles-dossier .tuile { display: block; padding: 12px 14px; }
  .tuiles-dossier .tuile .chiffre { font-size: 22px; }
  .a-faire li { flex-direction: column; align-items: stretch; }
  .a-faire li button { min-height: var(--cible-tactile); }
  /* Sommaire : une rangée qui défile dans son cadre (jamais la page) */
  .sommaire { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sommaire a { flex-shrink: 0; }
  .rubrique > summary { padding: 12px 14px; }
  .explication, .questionnaire-lie, .pied-rub, .vide-rub, .dosage { padding-left: 14px; padding-right: 14px; }
  .el { grid-template-columns: 1fr; padding: 14px; }
  .el .details { grid-template-columns: 1fr; gap: 0; }
  .el .details dd { margin-bottom: 4px; }
  .el .actions button { flex: 1; min-height: var(--cible-tactile); }
  .pied-rub button { width: 100%; min-height: 48px; }
  .plus-tard ul { grid-template-columns: 1fr; }
  .profil-case > .btn-primary { align-self: stretch; min-height: var(--cible-tactile); }
  .modal-box.moyenne { width: 100%; }
  #modal-body .choix.trois { grid-template-columns: 1fr; }
  .dosage-ligne, .dosage-ligne.bloquee { grid-template-columns: minmax(0, 1fr) 92px; }
  .dosage-ligne input[type="range"], .dosage-ligne.bloquee .aide { grid-column: 1 / -1; grid-row: 2; }
  #modal-body .dosage-ligne input[type="range"] { min-height: var(--cible-tactile); }
}

/* ---------------------------------------------------------------------
   Activation de la double authentification (lot 1b-8c, c6 ; maquette
   n° 1, états 5 et 10, et maquette n° 2, états A1 à A7) : écran à part
   dans le style de la connexion. Règles reprises des maquettes, limitées à
   .login-box (et au bandeau d'arrivée) pour ne rien changer au reste de
   l'admin.
   --------------------------------------------------------------------- */
.login-box [hidden] { display: none !important; }
.login-box.large { max-width: 440px; }
.login-box .qui { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--texte-2); background: var(--doux); border-radius: var(--rayon-petit); padding: 8px 12px; margin-bottom: 16px; }
.login-box .qui strong { color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-box .intro { font-size: 0.9rem; color: var(--texte-2); line-height: 1.5; margin: 0 0 16px; }
.login-box .intro strong { color: var(--texte); }
.login-box .alerte { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--rayon); font-size: 0.86rem; line-height: 1.45; margin: 0 0 14px; }
.login-box .alerte svg { flex-shrink: 0; margin-top: 1px; }
.login-box .alerte strong { color: var(--texte); }
.login-box .a-jaune { background: var(--jaune-fond); color: var(--jaune); }
.login-box .a-bleu { background: var(--bleu-fond); color: var(--bleu); }
.login-box .a-vert { background: var(--vert-fond); color: var(--vert); }
.login-box .aide { font-size: 0.78rem; }
.login-box .aide.centre { text-align: center; }
.login-box .btn-primary:disabled { opacity: 0.45; cursor: default; }
.login-box .lien { background: none; border: none; color: var(--nuit); font-size: 0.86rem; font-weight: 600; padding: 8px 4px; min-height: var(--cible-tactile); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.login-box .lien.discret { color: var(--texte-3); font-weight: 500; }
.login-box .liens { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.login-box .etapes { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.login-box .etapes .points { display: flex; gap: 6px; }
.login-box .etapes .point { width: 26px; height: 6px; border-radius: 999px; background: var(--doux-survol); }
.login-box .etapes .point.fait { background: var(--nuit); }
.login-box .etapes .libelle-etape { font-size: 0.8rem; font-weight: 600; color: var(--texte-3); }
.login-box .etape-titre { margin: 0 0 8px; font-size: 1.05rem; }
.login-box .qr-bloc { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 16px; }
.login-box .qr { width: 184px; height: 184px; padding: 10px; background: #fff; border: 1px solid var(--trait-champ); border-radius: var(--rayon); }
.login-box .qr svg { display: block; width: 100%; height: 100%; }
.login-box .cle-bloc { background: var(--doux); border-radius: var(--rayon); padding: 14px; margin-bottom: 14px; }
.login-box .cle-bloc .cle { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; word-spacing: 0.2em; line-height: 1.7; color: var(--texte); text-align: center; overflow-wrap: anywhere; }
.login-box .cle-bloc .actions { display: flex; justify-content: center; margin-top: 10px; }
.login-box .reglages { font-size: 0.8rem; color: var(--texte-3); line-height: 1.6; margin: 0 0 14px; padding-left: 18px; }
.login-box .reglages strong { color: var(--texte-2); }
.login-box .champ { display: block; margin-bottom: 14px; font-size: 0.85rem; font-weight: 600; color: var(--texte); }
.login-box .champ input { width: 100%; min-height: var(--cible-tactile); padding: 10px 12px; margin-top: 6px; border: 1px solid var(--trait-champ); border-radius: var(--rayon-petit); font-size: 0.95rem; color: var(--texte); background: var(--blanc); }
.login-box .champ input:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(43, 36, 51, 0.12); }
.login-box .champ input.code { font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 0.35em; }
.login-box .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; background: var(--doux); border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 12px; list-style: none; }
.login-box .codes li { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; color: var(--texte); text-align: center; padding: 4px 0; }
.login-box .copier-ligne { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.login-box .copie-ok { font-size: 0.82rem; font-weight: 600; color: var(--vert); }
.login-box .case { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--trait-champ); border-radius: var(--rayon); font-size: 0.9rem; font-weight: 600; color: var(--texte); cursor: pointer; margin-bottom: 14px; min-height: var(--cible-tactile); }
.login-box .case input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--nuit); }
.login-box .verrou { text-align: center; }
.login-box .verrou .icone { width: 56px; height: 56px; border-radius: 16px; background: var(--rouge-fond); color: var(--rouge); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.login-box .verrou h2 { margin: 0 0 8px; font-size: 1.05rem; }
.login-box .verrou p { margin: 0 0 6px; font-size: 0.9rem; color: var(--texte-2); line-height: 1.5; }
.login-box .verrou .heure { font-size: 1.3rem; font-weight: 700; color: var(--texte); margin: 8px 0 4px; }
.bandeau-ok { background: var(--vert-fond); color: var(--vert); }
.bandeau-ok p { margin: 0; }
.bandeau-ok strong { color: var(--texte); }
@media (max-width: 767px) {
  .login-box { padding: 28px 20px; }
}

/* ---------------------------------------------------------------------
   Étape du code de la connexion (lot 1b-8c, c8 ; maquette n° 1, états 2
   à 9) et bandeaux d'arrivée (états 7a, 7b, 7c et 11). Règles reprises de
   la maquette.
   --------------------------------------------------------------------- */
.login-box .champ input.secours { font-size: 1.2rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.login-box .champ input.erreur { border-color: var(--rouge); }
.bandeau-bleu { background: var(--bleu-fond); color: var(--bleu); }
.bandeau-orange { background: var(--orange-fond); color: var(--orange); }
.bandeau-rouge { background: var(--rouge-fond); color: var(--rouge); }
.bandeau-bleu p, .bandeau-orange p, .bandeau-rouge p { margin: 0; }
.bandeau-bleu strong, .bandeau-orange strong, .bandeau-rouge strong { color: var(--texte); }

/* ---------------------------------------------------------------------
   « Mon compte », partie sécurité (lot 1b-8c, c7 ; maquette n° 2, états B1
   à B11) et boutons des bandeaux 7 et 11. Règles reprises de la maquette,
   limitées aux fenêtres de « Mon compte » (classe mc-fenetre posée sur la
   boîte par mon-compte.js, retirée à la fermeture) : aucune autre fenêtre
   n'est touchée. Classes déjà prises ailleurs (alerte, case) : préfixées.
   --------------------------------------------------------------------- */
.mc-fenetre [hidden] { display: none !important; }
.mc-fenetre .intro { font-size: 14px; color: var(--texte-2); line-height: 1.5; margin: 0 0 16px; }
.mc-fenetre .intro strong { color: var(--texte); }
.mc-fenetre .section-titre { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--trait); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-3); }
.mc-fenetre .secu { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.mc-fenetre .secu-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--trait); }
.mc-fenetre .secu-ligne:first-child { border-top: none; }
.mc-fenetre .secu-ligne .icone { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--doux); color: var(--nuit); display: flex; align-items: center; justify-content: center; }
.mc-fenetre .secu-ligne .texte { flex: 1 1 180px; min-width: 0; font-size: 14px; }
.mc-fenetre .secu-ligne .texte strong { display: block; color: var(--texte); }
.mc-fenetre .secu-ligne .texte span { display: block; font-size: 13px; color: var(--texte-3); margin-top: 2px; }
.mc-fenetre .secu-ligne.orange { background: var(--orange-fond); }
.mc-fenetre .secu-ligne.orange .texte span { color: var(--orange); font-weight: 600; }
.mc-fenetre .secu-ligne.rouge { background: var(--rouge-fond); }
.mc-fenetre .secu-ligne.rouge .texte span { color: var(--rouge); font-weight: 600; }
.mc-fenetre .refus { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--rouge-fond); color: var(--rouge); font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.mc-fenetre .refus strong { color: var(--texte); margin-right: 4px; }
.mc-fenetre .mc-alerte { padding: 12px 14px; border-radius: var(--rayon); background: var(--jaune-fond); color: var(--jaune); font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.mc-fenetre .mc-alerte strong { color: var(--texte); }
.mc-fenetre .mc-alerte-ok { background: var(--vert-fond); color: var(--vert); }
.mc-fenetre input.code { font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 0.35em; }
.mc-fenetre input.secours { font-size: 1.2rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.mc-fenetre input.erreur { border-color: var(--rouge); }
.mc-fenetre .msg-champ { display: block; font-size: 0.8rem; font-weight: 500; color: var(--rouge); margin-top: 6px; }
.mc-fenetre .lien { background: none; border: none; color: var(--nuit); font-size: 0.86rem; font-weight: 600; padding: 8px 4px; min-height: var(--cible-tactile); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mc-fenetre .liens { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -6px 0 6px; }
.mc-fenetre .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; background: var(--doux); border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 12px; list-style: none; }
.mc-fenetre .codes li { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; color: var(--texte); text-align: center; padding: 4px 0; }
.mc-fenetre .copier-ligne { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.mc-fenetre .copie-ok { font-size: 0.82rem; font-weight: 600; color: var(--vert); }
.mc-fenetre .mc-case { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--trait-champ); border-radius: var(--rayon); font-size: 0.9rem; font-weight: 600; color: var(--texte); cursor: pointer; min-height: var(--cible-tactile); margin-bottom: 0; }
.mc-fenetre .mc-case input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--nuit); }
.mc-fenetre .verrou { text-align: center; padding: 8px 0; }
.mc-fenetre .verrou .icone { width: 56px; height: 56px; border-radius: 16px; background: var(--rouge-fond); color: var(--rouge); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.mc-fenetre .verrou h3 { margin: 0 0 8px; font-size: 1.05rem; }
.mc-fenetre .verrou p { margin: 0 0 6px; font-size: 0.9rem; color: var(--texte-2); line-height: 1.5; }
.mc-fenetre .verrou .heure { font-size: 1.3rem; font-weight: 700; color: var(--texte); margin: 8px 0 4px; }
.bandeau .bandeau-bouton { flex-shrink: 0; min-height: 40px; }
.bandeau .bandeau-bouton[hidden] { display: none; }
@media (max-width: 767px) {
  .mc-fenetre .secu-ligne .btn-petit { width: 100%; }
  .bandeau .bandeau-bouton { width: 100%; min-height: 48px; }
}