/* ==========================================================================
   La refonte de l'interface, 2026-09-27. Maquette validée :
   https://claude.ai/artifact/ViMAX7y6F19vssuNKXcaU8

   Chargée en dernier, après `cadre.css`. Sept règles : on ne quitte pas
   l'écran de travail ; un geste, un seul endroit ; un seul bouton plein par
   écran ; tout ce qui attend s'anime comme la rédaction ; quatre gabarits ;
   lisible à un mètre ; pensé pour 390 pixels.
   ========================================================================== */
:root {
  --rf-rayon-btn: 999px;   /* lot D1 : la pastille de la maquette du 2026-10-25 */
  --rf-rayon-carte: 16px;
  --rf-ia: #5B3F8C;
  --rf-ia-clair: #F1ECF8;
  --rf-ia-trait: #D8CDEA;
  --rf-fondu: cubic-bezier(.2, .8, .2, 1);
}

/* ---- 1. Les boutons : trois familles, deux tailles ----
   Principal (vert plein), secondaire (blanc, bord fin), discret (sans bord).
   32 px, ou 28 px quand il est « petit » (lot D1, la maquette du 2026-10-25) ; 13,5 px de texte, 13 en petit. Les
   pastilles, les icônes seules et les mini-étiquettes gardent leur dessin. */
main.page :is(.btn, .bouton):not(.icone):not(.pilule):not(.mini):not(.q-fleche):not(.pt-btn):not(.choisir),
.tiroir-refonte :is(.btn, .bouton):not(.icone):not(.pilule):not(.mini),
main.page form > button[type="submit"]:not([class]),
main.page td > form > button:not([class]) {
  border-radius: var(--rf-rayon-btn) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  min-height: 32px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
main.page :is(.btn, .bouton).petit:not(.icone):not(.pilule):not(.mini),
.tiroir-refonte :is(.btn, .bouton).petit:not(.icone) {
  min-height: 28px !important; height: auto !important; font-size: 13px !important;
  padding: 0 11px !important; border-radius: var(--rf-rayon-btn) !important;
}
main.page :is(.btn-plein, .bouton:not(.creux):not(.retrait)),
.tiroir-refonte :is(.btn-plein, .bouton:not(.creux)) { font-weight: 500 !important; }
/* Un bouton sans classe, reste de l'habillage d'origine, prend le
   secondaire : c'était un rectangle gris du navigateur. */
main.page form > button[type="submit"]:not([class]),
main.page td > form > button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 15px;
  background: var(--mz-surface); color: var(--mz-encre); border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 0 1px var(--mz-trait-fort), 0 1px 2px rgba(0, 0, 0, .04);
}
main.page form > button[type="submit"]:not([class]):hover,
main.page td > form > button:not([class]):hover { background: var(--mz-champ); }
/* « Annuler » en lien souligné devient un bouton secondaire. */
main.page a.annuler, main.page form a[href]:is(.retour-lien):not(.btn) {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: var(--rf-rayon-btn);
  background: var(--mz-surface); color: var(--mz-encre); text-decoration: none; font-weight: 500; font-size: 14px;
  box-shadow: 0 0 0 1px var(--mz-trait-fort);
}
/* Le discret : « Passer », « Répondre plus tard ». */
main.page .btn.passer, main.page .btn.discret {
  background: transparent !important; box-shadow: none !important; color: var(--mz-encre-douce) !important;
}
main.page .btn.passer:hover, main.page .btn.discret:hover { background: var(--mz-champ) !important; color: var(--mz-encre) !important; }
:is(main.page, .tiroir-refonte) :is(.btn, .bouton):focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; }

/* ---- 2. Les champs ---- */
main.page :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="password"], select):not(.pc-ins):not([hidden]):not(.cocher) {
  min-height: 40px; font-size: 14.5px;
}
.tiroir-refonte :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], select, textarea) {
  font: inherit; font-size: 14.5px; border: 1px solid var(--mz-trait-fort); border-radius: 10px; padding: 8px 12px; background: var(--mz-surface); color: var(--mz-encre); max-width: 100%;
}
.tiroir-refonte :is(input, select, textarea):focus-visible { outline: none; border-color: var(--mz-vert); box-shadow: 0 0 0 3px var(--mz-vert-clair); }

/* ---- 3. La zone de dépôt, une seule partout ----
   La zone entière se clique ; le rond et la phrase disent qu'on y glisse ;
   chaque fichier devient une ligne avec son poids. */
.depot-zone {
  position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 16px !important; border: 1.5px dashed var(--mz-trait-fort) !important; border-radius: 14px !important;
  background: #FAFAF8 !important; text-align: center; transition: border-color .2s, background .2s; min-height: 0;
  width: 100%; box-sizing: border-box;
}
.depot-zone:hover, .depot-zone.survol { border-color: var(--mz-vert) !important; background: var(--mz-vert-clair) !important; }
.depot-zone .depot-invite { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.depot-zone .depot-invite b { font-size: 14px; font-weight: 600; color: var(--mz-encre); }
.depot-zone .depot-rond {
  width: 40px; height: 40px; border-radius: 999px; background: var(--mz-surface); border: 1px solid var(--mz-trait);
  display: grid; place-items: center; color: var(--mz-vert); transition: transform .2s var(--rf-fondu);
}
.depot-zone.survol .depot-rond { transform: translateY(-3px) scale(1.06); }
.depot-zone .depot-barre { display: flex !important; flex-direction: column; align-items: center; gap: 6px !important; width: 100%; }
/* Le vrai champ couvre toute la zone : un clic n'importe où l'ouvre. */
.depot-zone.js .choisir { min-height: 0 !important; position: static !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; height: 0; overflow: hidden; font-size: 0 !important; }
/* V2-56 · « la flèche n'ouvre pas le Finder » : `.btn:active` déplaçait ce
   bouton caché, le champ qui couvre la zone se repliait sur lui, et le relâché
   tombait à côté. Il ne bouge plus. */
.depot-zone.js .choisir, .depot-zone.js .choisir:active { transform: none !important; transition: none !important; }
.depot-zone.js .choisir input[type=file] {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  opacity: 0 !important; cursor: pointer; z-index: 1; pointer-events: auto !important; clip: auto !important; margin: 0 !important;
}
.depot-zone .choisi { font-size: 13px !important; color: var(--mz-encre-douce); position: relative; z-index: 2; }
.depot-zone .choisi:not(.plein) { display: none; }
.depot-zone .consigne { margin: 0 !important; font-size: 12.5px !important; color: var(--mz-encre-tenue); }
.depot-zone .ajouter, .depot-zone .retirer, .depot-zone .fichiers, .depot-zone .fichiers * { position: relative; z-index: 2; }
.depot-zone .fichiers { width: 100%; text-align: left; }
.depot-zone .fichiers li { background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.depot-zone:has(.choisi.plein) .depot-invite b { color: var(--mz-vert-fonce); }
.depot-zone { align-self: stretch; }
.gestes-fin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gestes-fin form { margin: 0; }
form.depot:has(.depot-zone) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* ---- 4. Le tiroir à droite ---- */
.tiroir-voile { position: fixed; inset: 0; background: rgba(21, 32, 28, .28); z-index: 2400; animation: rf-voile .2s ease; }
/* Parcours du 2026-09-28 · le tiroir d'une fiche (« Ouvrir l'acte », « Choisir les documents ») passe au-dessus de son voile : le voile à 2400 le couvrait, et chaque clic le refermait. */
details > .tiroir-droit, .op-pied .tiroir-droit, .op-carte-v2 > .op-tiroir.tiroir-droit { z-index: 2410; }
.tiroir-refonte {
  position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 100vw; z-index: 2401;
  background: var(--mz-fond); border-left: 1px solid var(--mz-trait-fort);
  box-shadow: -24px 0 48px -28px rgba(21, 32, 28, .5); display: flex; flex-direction: column;
  transform: translateX(40px); opacity: 0; transition: transform .28s var(--rf-fondu), opacity .2s;
}
.tiroir-refonte.visible { transform: none; opacity: 1; }
.tiroir-refonte > header {
  display: flex; align-items: flex-start; gap: 10px; padding: 18px 22px 14px; background: var(--mz-surface); border-bottom: 1px solid var(--mz-trait);
}
.tiroir-refonte > header > div { flex: 1; min-width: 0; }
.tiroir-refonte > header h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.tiroir-refonte > header p { margin: 3px 0 0; font-size: 13px; color: var(--mz-encre-douce); }
.tiroir-refonte > header p:empty { display: none; }
.tiroir-refonte > header .fermer {
  width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--mz-champ); color: var(--mz-encre-douce);
  font-size: 18px; line-height: 1; cursor: pointer; flex: none; display: grid; place-items: center;
}
.tiroir-refonte > header .fermer:hover { background: var(--mz-trait); color: var(--mz-encre); }
.tiroir-refonte > .corps { flex: 1; overflow: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.tiroir-refonte > .corps > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
.tiroir-refonte .corps table { font-size: 13px; }
.tiroir-refonte .corps :is(.chapeau, .tdb-chapeau) { padding: 0 !important; background: none !important; box-shadow: none !important; }
body.tiroir-ouvert { overflow: hidden; }
@keyframes rf-voile { from { opacity: 0; } to { opacity: 1; } }

/* ---- 5. Les pages d'état : introuvable, accès réservé, demande refusée ---- */
.page-etat {
  max-width: 520px; margin: 9vh auto 40px; background: var(--mz-surface); border: 1px solid var(--mz-trait);
  border-radius: var(--rf-rayon-carte); padding: 34px 30px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px; box-shadow: 0 1px 2px rgba(28, 26, 22, .04), 0 12px 32px -18px rgba(28, 26, 22, .18);
  animation: rf-monte .35s var(--rf-fondu) both;
}
.page-etat .etat-dessin { width: 58px; height: 58px; border-radius: 16px; background: var(--mz-champ); color: var(--mz-encre-douce); display: grid; place-items: center; }
.page-etat h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-etat p { margin: 0; font-size: 14.5px; color: var(--mz-encre-douce); max-width: 44ch; }
.page-etat .encadre { width: 100%; text-align: left; }
.page-etat .gestes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@keyframes rf-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- 6. Les scènes d'attente, sur le modèle de la rédaction ----
   La production (la pile verte qui s'écrit) et la lecture (la page qu'un
   trait balaie). Mêmes temps cochés, même carte. */
.rf-scene.rf-verte { background: linear-gradient(180deg, #F2F8F5, #E5F1EC); }
.rf-scene.rf-verte .rf-page .l { background: #A9D3C5; }
.rf-scene .rf-pile { position: absolute; width: 110px; height: 132px; background: #fff; border-radius: 4px; box-shadow: 0 8px 20px rgba(20, 60, 50, .10); }
.rf-scene .rf-page { position: relative; overflow: hidden; }
.rf-scene .rf-page.rf-lue .l { width: var(--l); animation: none; background: #D9DCE0; }
.rf-scene .rf-page.rf-lue .l.trouve { background: #8FCBB8; }
.rf-scene .rf-rayon {
  position: absolute; left: 0; right: 0; height: 14px;
  background: linear-gradient(180deg, rgba(14, 107, 90, 0), rgba(14, 107, 90, .22), rgba(14, 107, 90, 0));
  animation: rf-balaye 2.4s ease-in-out infinite;
}
@keyframes rf-balaye { 0% { top: 10%; } 50% { top: 82%; } 100% { top: 10%; } }
.attente-refonte {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--mz-fond) 86%, transparent); backdrop-filter: blur(3px); animation: rf-voile .18s ease-out;
}
.attente-carte-refonte, .attente-lecture .attente-carte {
  width: 380px; max-width: 100%; background: var(--mz-surface); color: var(--mz-encre); border: 1px solid var(--mz-trait);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(28, 26, 22, .18); padding: 16px !important;
  display: flex; flex-direction: column; gap: 14px; text-align: left !important; animation: rf-monte .25s ease both;
  font-size: 14px; line-height: 1.45;
}
.attente-carte-refonte .rf-tete b, .attente-lecture .rf-tete b { font-size: 15px; font-weight: 600; }
.attente-carte-refonte .rf-tete small, .attente-lecture .rf-tete small { display: block; font-size: 12.5px; color: var(--mz-encre-douce); }
.attente-lecture .attente-note { margin: 0 !important; font-size: 12.5px !important; color: var(--mz-encre-tenue) !important; }
.attente-lecture .rf-et, .attente-refonte .rf-et { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .attente-refonte *, .attente-lecture *, .page-etat, .tiroir-refonte { animation: none !important; transition: none !important; }
  .rf-scene .rf-page .l { width: var(--l); }
}

/* ---- 7. Le menu « ⋯ » ----
   Lot D1 · au dessin de la maquette du 2026-10-25 : une liste serrée, des lignes basses, ce qui retire en rouge,
   en dernier. Le seul menu « … » de l'application. */
details.menu-plus { position: relative; }
details.menu-plus > summary { list-style: none; cursor: pointer; }
details.menu-plus > summary::-webkit-details-marker { display: none; }
details.menu-plus > .menu-plus-liste {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; min-width: 220px; display: flex; flex-direction: column;
  background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 8px; padding: 4px;
  box-shadow: 0 1px 2px rgba(27, 26, 23, .06), 0 8px 24px -8px rgba(27, 26, 23, .16); animation: rf-monte .18s ease both;
}
details.menu-plus > .menu-plus-liste > :is(a, button), details.menu-plus > .menu-plus-liste form button {
  display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
  border: 0; background: none; padding: 7px 10px; border-radius: 5px; font: inherit; font-size: 13.5px; color: var(--mz-encre);
  text-decoration: none; cursor: pointer; box-shadow: none; min-height: 0; height: auto;
}
details.menu-plus > .menu-plus-liste > :is(a, button):hover, details.menu-plus > .menu-plus-liste form button:hover { background: var(--mz-survol); }
details.menu-plus > .menu-plus-liste small { font-size: 12px; color: var(--mz-encre-tenue); font-weight: 400; }
details.menu-plus > .menu-plus-liste hr { border: 0; border-top: 1px solid var(--mz-trait); margin: 4px 0; }
details.menu-plus > .menu-plus-liste form { margin: 0; }
details.menu-plus > .menu-plus-liste form button { color: var(--mz-rouge); }


/* ==========================================================================
   Lot 2 · l'écran de l'acte (opérations et approbation à la carte)
   ========================================================================== */
/* La liste des questions, dépliée : le nom, la jauge, le compte. */
.acte-v2 .q-liste-v2 .q-tete .q-lib { display: flex; align-items: baseline; gap: 8px; }
.acte-v2 .q-liste-v2 .q-compte { font-size: 12px; font-weight: 500; color: var(--mz-encre-tenue); letter-spacing: 0; text-transform: none; }
.acte-v2 .q-jauge { height: 4px; border-radius: 4px; background: var(--mz-champ); margin: 2px 10px 10px; overflow: hidden; }
.acte-v2 .q-jauge i { display: block; height: 100%; background: var(--mz-vert); border-radius: 4px; transition: width .5s var(--rf-fondu); }
.acte-v2 .op-corps-v2:not(.epingle) .q-jauge, .acte-v2 .op-corps-v2:not(.epingle) .q-compte { display: none; }
.acte-v2 .q-liste-v2 .q-item .q-txt > span { white-space: normal; line-height: 1.3; }
.acte-v2 .q-liste-v2 .q-item.cour { background: var(--mz-vert-clair); border-radius: 9px; }
/* Les onglets de l'aperçu passent à la ligne au lieu d'être coupés. */
.acte-v2 .onglets-doc-v2 { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px; }
.acte-v2 .onglets-doc-v2 .og { max-width: 100%; white-space: normal !important; text-align: left; }
/* Le menu « ⋯ » dans la barre d'outils. */
main.page .acte-v2 .outils-v2 details.menu-plus > summary.btn { min-width: 36px; justify-content: center; font-size: 18px !important; letter-spacing: .05em; }
main.page .acte-v2 .outils-v2 details.menu-plus > summary.btn::before { display: none; }
main.page .acte-v2 .outils-v2 .menu-plus-liste :is(a, button) { margin: 0; }
main.page .acte-v2 .outils-v2 .menu-plus-liste a::before { display: none !important; }
/* Les statuts mis à jour, repliés sous la question. */
details.statuts-repli > summary.statuts-resume {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 14px 18px; font-size: 14.5px;
}
details.statuts-repli > summary::-webkit-details-marker { display: none; }
details.statuts-repli > summary .sourdine { font-size: 13px; }
details.statuts-repli > summary .fleche { margin-left: auto; transition: transform .2s; color: var(--mz-encre-tenue); font-size: 18px; }
details.statuts-repli[open] > summary .fleche { transform: rotate(90deg); }
details.statuts-repli[open] > summary { border-bottom: 1px solid var(--mz-trait); }
details.statuts-repli .tete-carte { display: none; }
details.statuts-repli .seance-corps { font-size: 14px; }
/* La carte de fin de l'approbation à la carte. */
.attente .gestes-fin { margin-top: 10px; }
/* La colonne d'historique vide, à côté de « tout est répondu » : rien à y lire. */
/* À la carte, la colonne d'historique vide à côté de « tout est répondu »
   ne dit rien : elle se tait tant qu'aucune réponse n'y est. */
.ecran-mission.v2:has([data-a-la-carte]) .fil-vide { display: none; }


/* ==========================================================================
   Lot 3 · l'approbation
   ========================================================================== */
/* Le refus de l'aperçu de contrôle : une note, plus un paragraphe en tête. */
.note-discrete .epreuve-refus { margin: 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--mz-encre-douce) !important; }
.note-discrete {
  display: flex; gap: 8px; align-items: flex-start; font-size: 13px !important; line-height: 1.45;
  color: var(--mz-encre-douce) !important; background: var(--mz-champ); border-radius: 10px; padding: 10px 12px; margin: 0; max-width: 72ch;
}
.note-discrete::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--mz-trait-fort); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--mz-encre-tenue); background: var(--mz-surface); }
/* La frise des neuf étapes : le nom entier, sur deux lignes, jamais coupé. */
.ecran-mission.v2 .rail .rdv .rdv-tete .t { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; }
.ecran-mission.v2 .rail .rdv .rdv-tete .bas { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; }
/* « Répondre plus tard » est un geste discret, à côté du bouton plein. */
.ecran-mission.v2 details.passer-q > summary.btn.passer { font-weight: 500 !important; }
/* Les boutons sous une question de dépôt, sur une ligne, sans se tasser. */
.ecran-mission.v2 .boutons-depot { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Lot 4 · les écrans jamais repris
   Deux familles : l'administration (`admin-v2`, en cartes mais en petit
   gris) et les pages d'origine (un `chapeau`, puis des paragraphes, des
   listes, des tableaux et des formulaires nus). Un gabarit pour chacune :
   texte à 14 px minimum, formulaires et tableaux en carte, gestes en boutons.
   ========================================================================== */
/* -- Les pages d'origine, et leur contenu quand il s'ouvre en tiroir -- */
main.page:not(.nue):not(.tenue):not(.admin-v2):not(.etroite) > .chapeau h1 { font-size: 28px; letter-spacing: -.02em; line-height: 1.15; }
main.page:not(.nue):not(.tenue):not(.admin-v2) > .chapeau .sous-titre { font-size: 14.5px; color: var(--mz-encre-douce); max-width: 76ch; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > p { font-size: 14.5px; line-height: 1.55; color: var(--mz-encre-douce); max-width: 76ch; margin: 0; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > p small,
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form small { font-size: 13px; line-height: 1.5; color: var(--mz-encre-douce); }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > h2 { font-size: 19px; margin: 18px 0 0; letter-spacing: -.01em; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > h3 { font-size: 15px; margin: 10px 0 0; }
/* Un formulaire posé dans la page devient une carte, ses champs s'empilent. */
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"]:not(.pied-fiche):not(.filtres-refonte) {
  background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: var(--rf-rayon-carte);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 680px; box-sizing: border-box;
}
.tiroir-refonte > .corps > form[method="post"] { max-width: none; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"] > p { margin: 0; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"] > p > label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mz-encre);
}
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"] > p > label br { display: none; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"] > p > label :is(input, select) { font-weight: 400; max-width: 460px; width: 100%; box-sizing: border-box; }
:is(main.page, .tiroir-refonte) form p.deux-champs { display: flex; gap: 12px; flex-wrap: wrap; }
:is(main.page, .tiroir-refonte) form p.deux-champs > label { flex: 1 1 160px; }
.gestes-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
/* Les tableaux d'origine, en carte. */
/* V2-700 · un tableau de mandats a huit colonnes : le panneau de la fiche se
   resserre dans sa carte et le tableau défile, au lieu de déborder la page. */
.panneau-champs { min-width: 0; max-width: 100%; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) .cadre-table {
  background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: var(--rf-rayon-carte); overflow-x: auto;
}
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) .cadre-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) .cadre-table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--mz-encre-tenue);
  padding: 11px 14px; background: #FAFAF8; border-bottom: 1px solid var(--mz-trait-fort);
}
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) .cadre-table td { padding: 10px 14px; border-bottom: 1px solid var(--mz-trait); vertical-align: top; line-height: 1.45; }
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) .cadre-table tr:last-child td { border-bottom: 0; }
/* Les listes d'origine, en lignes de carte. */
ul.liste-refonte { list-style: none; margin: 0; padding: 4px 16px; background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; max-width: 760px; }
ul.liste-refonte > li { padding: 10px 0; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--mz-trait) !important; font-size: 14px; max-width: none !important; }
ul.liste-refonte > li::before, ul.liste-refonte > li::after { display: none !important; }
ul.liste-refonte > li:first-child { border-top: 0 !important; }
p.vide-refonte { font-size: 13.5px !important; color: var(--mz-encre-tenue) !important; font-style: italic; }
/* Les filtres de l'historique : des puces en ligne, les dates sur une ligne. */
form.filtres-refonte { display: flex; flex-direction: column; gap: 10px; }
form.filtres-refonte .puces-filtre { display: flex; flex-wrap: wrap; gap: 6px; }
form.filtres-refonte .puce-filtre {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: var(--mz-surface); border: 1px solid var(--mz-trait-fort); font-size: 13px; color: var(--mz-encre-douce); font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
form.filtres-refonte .puce-filtre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
form.filtres-refonte .puce-filtre:has(input:checked) { background: var(--mz-vert-clair); border-color: var(--mz-vert); color: var(--mz-vert-fonce); }
form.filtres-refonte .puce-filtre:has(input:focus-visible) { outline: 2px solid var(--mz-vert); outline-offset: 2px; }
form.filtres-refonte .ligne-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.filtres-refonte .ligne-filtre label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--mz-encre-douce); }
form.filtres-refonte .ligne-filtre input { width: 150px !important; min-height: 36px !important; }
/* Les absences : la bande « Déclarer » devient une ligne simple. */
main.page .cadre-declarer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; padding: 14px 16px; }
main.page .cadre-declarer .mention { font-size: 13px; color: var(--mz-encre-douce); }
main.page .glose-panneau { font-size: 14px !important; color: var(--mz-encre-douce); }

/* -- L'administration : le même gabarit, lisible -- */
.admin-v2 .carte-admin { border-radius: var(--rf-rayon-carte) !important; padding: 22px 24px !important; }
.admin-v2 .carte-admin .titre { font-size: 18px !important; letter-spacing: -.01em; }
.admin-v2 .carte-admin :is(.sous, .glose) { font-size: 14px !important; line-height: 1.55; color: var(--mz-encre-douce); max-width: 80ch; }
.admin-v2 .carte-admin p { font-size: 14px; line-height: 1.55; }
.admin-v2 .carte-admin p small, .admin-v2 .carte-admin small { font-size: 13px !important; line-height: 1.5; color: var(--mz-encre-douce); }
.admin-v2 .carte-admin label { font-size: 13.5px; }
.admin-v2 .lignes-admin { font-size: 14px; }
.admin-v2 table.tableau { font-size: 13.5px; }
.admin-v2 table.tableau td { padding-top: 10px !important; padding-bottom: 10px !important; line-height: 1.45; }
.admin-v2 .horloge-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.admin-v2 .carte-admin .etiquette { font-size: 12px; }
/* Les droits d'un collaborateur, en petites capitales grises : en clair. */
.admin-v2 .droit, .admin-v2 .droits span { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; }
/* Une liste vide se dit en une phrase au milieu de la carte. */
.admin-v2 .carte-admin .message-carte, .admin-v2 .carte-admin .vide { font-size: 14px !important; color: var(--mz-encre-tenue); padding: 18px 0 6px; text-align: center; }
/* V2-325b · l'état de la copie vers le OneDrive : la liaison, la dernière copie, ses fichiers */
.admin-v2 .copie-etat { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 4px; font-size: 14px; color: var(--mz-encre-douce); text-align: left; }
.admin-v2 .copie-etat p { margin: 0; }
.admin-v2 .copie-etat b { color: var(--mz-encre); font-weight: 600; }
.admin-v2 .copie-etat .copie-encours b { color: var(--mz-vert); }
.admin-v2 .copie-etat .copie-echec { color: var(--mz-rouge); }
.admin-v2 .copie-etat details { margin-top: 4px; }
.admin-v2 .copie-etat summary { cursor: pointer; color: var(--mz-vert); font-weight: 500; }
.admin-v2 .copie-etat ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }

/* ==========================================================================
   Lot 5 · le téléphone. Pensé pour 390 pixels : aucune page ne défile de
   côté, les en-têtes passent à la ligne.
   ========================================================================== */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  /* Lot D5 · le menu reste la colonne de gauche à toute largeur (lot D1, pas de vue téléphone : règle 6 des écrans) ;
     sa barre en bas, du lot 5, étalait ses lignes sur la page sous 760 px. */
  /* -- La page : 16 px de bord, rien qui dépasse. -- */
  main.page { padding-left: 16px !important; padding-right: 16px !important; overflow-x: clip; max-width: 100vw; box-sizing: border-box; }
  main.page.nue.v2, main.page.tenue { padding-left: 0 !important; padding-right: 0 !important; }
  main.page table { max-width: 100%; }
  main.page :is(.cadre-table, .table-cadre, .cadre-matrice) { overflow-x: auto; max-width: 100%; }
  main.page img, main.page iframe { max-width: 100%; }
  /* -- Les en-têtes : le nom d'abord, sur toute la largeur ; les gestes dessous. -- */
  main.page :is(.chapeau, .chapeau-mission, .tdb-chapeau, .fiche-tete, .entete-fiche) { flex-wrap: wrap !important; row-gap: 10px; }
  main.page :is(.chapeau, .chapeau-mission) h1, main.page .tdb-chapeau h1 { font-size: 24px !important; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  main.page :is(.chapeau, .chapeau-mission, .tdb-chapeau) :is(.gestes, .gestes-fiche, .outils) { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start !important; margin-left: 0 !important; position: static !important; }
  .page-etat { margin-top: 24px; padding: 26px 18px; }
  .tiroir-refonte { width: 100vw; }
  .tiroir-refonte > header { padding: 14px 16px 12px; }
  .tiroir-refonte > .corps { padding: 14px 16px 24px; }
  .tiroir-refonte > header [data-pleine-page] { display: none; }
  /* -- L'écran de l'acte : une colonne ; la frise en deux lignes. -- */
  .ecran-mission.v2 .rail, .acte-v2 .rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; display: grid !important; gap: 6px !important; overflow: visible !important; }
  .acte-v2 .op-corps-v2 { display: flex !important; flex-direction: column !important; gap: 12px; height: auto !important; min-height: 0 !important; }
  .acte-v2 .op-corps-v2 > * { flex: none !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; position: static !important; height: auto !important; max-height: none !important; }
  .acte-v2 .poignee-v2 { display: none !important; }
  .acte-v2 .q-gauche { order: 2; }
  .acte-v2 .q-centre { order: 1; }
  .acte-v2 .apercu-v2 { order: 3; }
  .acte-v2 .q-liste-v2 { max-height: 240px; overflow: auto; position: static !important; }
  .acte-v2 .ligne-v2 { flex-wrap: wrap; gap: 10px; }
  .acte-v2 .outils-v2 { flex-wrap: wrap; }
  .acte-v2 .tete, .ecran-mission.v2 .tete { padding-left: 16px !important; padding-right: 16px !important; }
  .acte-v2 .op-corps-v2 { padding-left: 16px !important; padding-right: 16px !important; }
  .acte-v2 .papier-v2 { max-height: 60vh; }
  /* -- Le tableau de bord : une colonne à la fois. -- */
  .page.tdb :is(.colonnes, .colonnes-v2, .tdb-colonnes) { grid-template-columns: 1fr !important; display: grid !important; }
  main.vue-colonnes .tdb-colonnes, main.vue-pf-frise .pf-v2 { flex: none !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .page.tdb .tdb-tete { padding-left: 0 !important; padding-right: 0 !important; }
  .col-v2 { max-height: none !important; overflow: visible !important; height: auto !important; }
  .col-v2-tete { position: static !important; }
  main.page.tenue.tdb, main.page.tenue.fiche-v2 { padding-left: 16px !important; padding-right: 16px !important; }
  /* -- La fiche société : l'en-tête et les panneaux sur une colonne. -- */
  .fiche-v2 .chapeau-fiche { padding-left: 0 !important; padding-right: 0 !important; }
  .fiche-v2 .chapeau-fiche-dedans { grid-template-columns: 1fr !important; row-gap: 12px; }
  .fiche-v2 .chapeau-fiche-dedans > * { grid-column: 1 !important; grid-row: auto !important; min-width: 0; }
  .fiche-v2 .corps-fiche { padding-left: 0 !important; padding-right: 0 !important; }
  .fiche-v2 .ops-fiche-v2, .fiche-v2 .panneaux-fiche { grid-template-columns: 1fr !important; display: grid !important; }
  .fiche-v2 .onglets-v2 { padding-left: 0 !important; padding-right: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .pf-v2-outils, .tdb-v2-outils { flex-wrap: wrap !important; row-gap: 8px; }
  .pf-v2-t, .pf-v2-legende { position: static !important; }
  .pf-v2-legende { flex-wrap: wrap !important; row-gap: 4px; margin-bottom: 8px; }
  .pf-v2-cadre { overflow: visible !important; flex: none !important; height: auto !important; }
  .fiche-v2 .op-h { flex-wrap: wrap !important; row-gap: 8px; }
  .fiche-v2 .op-h .op-t { flex: 1 1 100% !important; min-width: 0; }
  /* -- L'écran de l'acte : les puces, puis les outils, l'un sous l'autre. -- */
  .acte-v2 .ligne-v2 { flex-direction: column !important; align-items: flex-start !important; }
  .acte-v2 .outils-v2 { position: static !important; margin-left: 0 !important; }
  /* -- Les tableaux de phrases : une carte par ligne. -- */
  main.page table.tableau:not(.garde-colonnes) thead { display: none; }
  main.page table.tableau:not(.garde-colonnes), main.page table.tableau:not(.garde-colonnes) :is(tbody, tr, td) { display: block; width: 100%; box-sizing: border-box; }
  main.page table.tableau:not(.garde-colonnes) tr { border-bottom: 1px solid var(--mz-trait); padding: 10px 0; }
  main.page table.tableau:not(.garde-colonnes) td { padding: 2px 0 !important; border: 0 !important; }
  main.page table.tableau:not(.garde-colonnes) td:first-child { font-weight: 600; }
  /* -- Les éditeurs de modèles : le texte, puis le panneau des champs. -- */
  main.page .jeton, main.page [class*="pc-f-"] { white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; }
  main.page.editeur-modele :is(.tx-zone, .ed-cadre, .ed-grille, .edition) { display: flex !important; flex-direction: column !important; }
  main.page.editeur-modele :is(.tx-zone, .ed-cadre, .ed-grille, .edition) > * { width: 100% !important; max-width: 100% !important; position: static !important; }
  .acte-v2 .miettes { margin-bottom: 6px; }
  /* -- Les formulaires : pleine largeur. -- */
  main.page form :is(input[type="text"], input[type="email"], input[type="date"], input[type="search"], select, textarea) { max-width: 100% !important; }
  :is(main.page, .tiroir-refonte > .corps) > form[method="post"] { padding: 16px; }
}

/* ---- Les gestes de ligne n'apparaissent qu'au survol ----
   « Reprendre pour le cabinet » quarante-neuf fois, « 123 · en lettres » sur
   chaque champ : sur un écran à souris, ils se montrent sur la ligne qu'on
   survole ou qu'on atteint au clavier. Au doigt, ils restent visibles. */
@media (hover: hover) and (pointer: fine) {
  tr .gestes-ligne > *, .pc-item .pc-ecriture { opacity: 0; transition: opacity .15s ease; }
  tr:hover .gestes-ligne > *, tr:focus-within .gestes-ligne > *,
  .pc-item:hover .pc-ecriture, .pc-item:focus-within .pc-ecriture { opacity: 1; }
}

/* Le bouton d'envoi d'un formulaire d'origine est le geste principal de
   l'écran : il prend le vert plein. */
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"]:not(.pied-fiche) button[type="submit"]:not([class]):last-of-type {
  background: var(--mz-vert) !important; color: var(--mz-surface) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important; font-weight: 600 !important;
}
:is(main.page:not(.nue):not(.tenue):not(.admin-v2), .tiroir-refonte > .corps) > form[method="post"]:not(.pied-fiche) button[type="submit"]:not([class]):last-of-type:hover { background: var(--mz-vert-fonce) !important; }

/* ==========================================================================
   Déposer un document Word, retour d'Othmane sous Safari : des blocs titrés,
   des choix en cartes, les formes en puces, la zone de dépôt pleine largeur.
   ========================================================================== */
main.page .chapeau-texte { font-size: 14.5px; line-height: 1.55; color: var(--mz-encre-douce); max-width: 76ch; margin: 0 0 18px; }
form.depot-word {
  background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: var(--rf-rayon-carte);
  padding: 24px 26px; max-width: 760px; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch !important; gap: 22px;
}
form.depot-word .bloc-q { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; min-width: 0; width: 100%; box-sizing: border-box; }
form.depot-word .bloc-q[hidden], form.depot-word .sous-q[hidden] { display: none !important; }
form.depot-word .titre-q { display: block; margin: 0; font-size: 15px; font-weight: 600; color: var(--mz-encre); line-height: 1.35; white-space: normal; }
form.depot-word .titre-q.petit { font-size: 13.5px; }
form.depot-word .aide-q { font-weight: 400; font-size: 13px; color: var(--mz-encre-tenue); }
form.depot-word .aide-q::before { content: "· "; }
form.depot-word .depot-zone { width: 100% !important; }
form.depot-word select { width: 100%; max-width: 480px; }
form.depot-word .sous-q { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--mz-fond); border-radius: 12px; }
/* Les choix : une carte qu'on coche. */
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.choix-carte {
  position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--mz-trait-fort); border-radius: 14px; background: var(--mz-surface);
  transition: border-color .15s, background .15s, box-shadow .15s; font-weight: 400;
}
.choix-carte:hover { border-color: var(--mz-encre-tenue); }
.choix-carte input { flex: none; margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--mz-vert); }
.choix-carte > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choix-carte b { font-size: 14.5px; font-weight: 600; color: var(--mz-encre); }
.choix-carte small { font-size: 13px; line-height: 1.45; color: var(--mz-encre-douce); }
.choix-carte:has(input:checked) { border-color: var(--mz-vert); background: var(--mz-vert-clair); box-shadow: 0 0 0 1px var(--mz-vert) inset; }
.choix-carte.ia:has(input:checked) { border-color: var(--rf-ia); background: var(--rf-ia-clair); box-shadow: 0 0 0 1px var(--rf-ia) inset; }
.choix-carte.ia input { accent-color: var(--rf-ia); }
.choix-carte:has(input:focus-visible) { outline: 2px solid var(--mz-vert); outline-offset: 2px; }
/* Les formes : des puces qu'on coche. */
.puces-formes { display: flex; flex-wrap: wrap; gap: 8px; }
.puce-forme { position: relative; cursor: pointer; font-weight: 500; }
.puce-forme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-forme span {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--mz-trait-fort); background: var(--mz-surface); font-size: 14px; color: var(--mz-encre-douce);
  transition: background .15s, border-color .15s, color .15s;
}
.puce-forme:hover span { border-color: var(--mz-encre-tenue); }
.puce-forme input:checked + span { background: var(--mz-vert); border-color: var(--mz-vert); color: #fff; }
.puce-forme input:checked + span::before { content: "✓"; margin-right: 6px; font-size: 12px; }
.puce-forme input:focus-visible + span { outline: 2px solid var(--mz-vert); outline-offset: 2px; }
.puce-forme.eteinte { opacity: .4; cursor: not-allowed; }
.manque-q { margin: 0; font-size: 13.5px; color: var(--mz-rouge); font-weight: 500; }
@media (max-width: 760px) { form.depot-word { padding: 18px 16px; } }
/* Sous Safari, une légende de `fieldset` en grille se réduit à sa largeur
   minimale et se casse mot par mot : elle garde sa ligne partout. */
main.page fieldset, .tiroir-refonte fieldset { min-width: 0; }
main.page fieldset > legend, .tiroir-refonte fieldset > legend { display: block; float: none; width: auto; max-width: 100%; white-space: normal; padding: 0; }

/* V2-104 · le bouton qui attend : libellé en cours, bloqué, un trait court dessous */
.mz-attend { position: relative; overflow: hidden; cursor: progress; }
.mz-attend .mz-jauge { position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: currentColor; opacity: .55; animation: mz-jauge 1.1s ease-in-out infinite; }
@keyframes mz-jauge { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .mz-attend .mz-jauge { animation: none; left: 0; width: 100%; opacity: .3; } }