/* ==========================================================================
   Lexia V2 · le cadre commun, Othmane le 2026-09-26 après l'audit de
   l'interface : « la partie figée doit être bien alignée », « c'est pas
   cohérent ». Cette feuille vient en dernier et ne fait qu'une chose :
   donner à chaque écran les mêmes bords, les mêmes barres figées, la même
   règle de défilement, la même échelle de texte et de boutons.

   Le bord : 40 px de chaque côté du contenu, et au-delà de 1296 px de
   contenu, le reste en marge. Toute page, tout en-tête, toute barre figée
   commence et finit sur ce bord.
   ========================================================================== */
:root {
  --v2-large: 1296px;
  --v2-marge: clamp(20px, 3vw, 40px);
  /* Une longueur calculée là où on l'emploie : sur un élément aussi large
     que la zone de contenu, elle donne le même bord que partout ailleurs. */
  --bord: max(var(--v2-marge), calc((100% - var(--v2-large)) / 2));
  /* Sur la page elle-même, le pourcentage se lit sur toute la fenêtre :
     on retire le menu de gauche, 64 px, quand il est là. */
  --menu: 0px;
  --bord-page: max(var(--v2-marge), calc((100% - var(--menu) - var(--v2-large)) / 2));
  --t-petit: 12px;
  --t-courant: 14px;
  --t-sous: 16px;
  --t-titre: 26px;
  --h-btn: 36px;
  --h-btn-compact: 30px;
  --rayon: 12px;
  --ombre-douce: 0 1px 2px rgba(28, 26, 22, .04), 0 4px 16px -8px rgba(28, 26, 22, .08);
  --ombre-levee: 0 18px 44px -12px rgba(28, 26, 22, .22);
  --fondu: cubic-bezier(.2, .8, .2, 1);
}

/* ---- Une barre figée couvre toute la largeur, sans déplacer son contenu ----
   Le fond s'étend jusqu'aux bords de la zone de contenu ; ce qui défile
   dessous ne se voit plus sur les côtés. */
body:has(> .barre) { --menu: 64px; --bord-page: max(var(--v2-marge), calc((100% - 64px - var(--v2-large)) / 2)); }
.fige-plein {
  box-shadow: 0 0 0 100vmax var(--mz-fond);
  clip-path: inset(0 -100vmax);
}

/* ---- Les écrans ordinaires : la page défile à l'intérieur, la tête reste ---- */
main.page:not(.nue):not(.tenue):not(.etroite) {
  padding-left: var(--bord-page); padding-right: var(--bord-page);
}
main.page:not(.nue):not(.tenue):not(.etroite) > .chapeau:first-child,
main.page:not(.nue):not(.tenue):not(.etroite) > .admin-tete:first-child,
main.page:not(.nue):not(.tenue):not(.etroite) > .tdb-tete:first-child,
main.page.tenue.fiche-v2:not(:has(> .corps-fiche)) > .chapeau:first-of-type {
  box-shadow: 0 0 0 100vmax var(--mz-fond), 0 1px 0 100vmax var(--mz-trait);
  clip-path: inset(0 -100vmax -1px -100vmax);
  border-bottom: 0;
  padding-bottom: 14px;
}
main.page:not(.nue):not(.tenue):not(.etroite) > .ariane:first-child { padding-top: 26px; }

/* L'administration : le titre, les onglets et les cartes sur le même bord. */
.admin-v2 .admin-tete { background: var(--mz-fond); }
.admin-v2 .admin-tete-dedans, .admin-v2 .corps-admin { max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
.admin-v2 .admin-tete-dedans { padding-top: 0; gap: 14px; }
.admin-v2 .corps-admin { padding-top: 20px; }

/* Les listes en tableau (modèles d'actes, tableau de bord en tableau). */
main.page.tdb:not(.tenue) .cadre-tdb,
main.page.tdb:not(.tenue) .dit { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
main.page.tdb:not(.tenue) .tdb-tete > * { max-width: none; }
main.page.tdb:not(.tenue) .tdb-tete { background: var(--mz-fond); }

/* ---- Tableau de bord et portefeuille, qui tiennent leur hauteur ---- */
.page.tdb .tdb-tete { padding-left: var(--bord); padding-right: var(--bord); }
.page.tdb .tdb-tete > * { max-width: none; }
main.vue-colonnes .tdb-colonnes, main.vue-pf-frise .pf-v2,
main.vue-tableau .cadre-tdb, main.vue-pf-tableau .cadre-tdb {
  width: auto; max-width: none; margin-left: var(--bord); margin-right: var(--bord);
}

/* ---- La fiche client : l'en-tête, les onglets et le corps sur un bord ---- */
.fiche-v2 .chapeau-fiche { padding: 18px var(--bord) 0; }
.fiche-v2 .chapeau-fiche-dedans { max-width: none; margin: 0; }
.fiche-v2 .onglets-v2 { width: auto; max-width: none; margin: 0 var(--bord); padding: 8px 0 0; border-bottom: 1px solid var(--mz-trait); }
/* Lot G5 · la fiche gelée dit où elle se modifie, aux marges des onglets */
.fiche-v2 .fiche-gelee { max-width: none; margin: 12px var(--bord) 0; padding: 9px 12px; border-radius: 10px; background: var(--mz-vert-clair); color: var(--mz-vert); font-size: 13.5px; }
.fiche-v2 .corps-fiche { padding: 18px var(--bord) 32px; }
.fiche-v2 .corps-fiche > * { max-width: none; }

/* ---- L'exercice et l'opération : la tête, la frise et les colonnes ---- */
.ecran-mission.v2 .chapeau-mission,
.ecran-mission.v2 .rail-rdv, .acte-v2 .ligne-v2,
.ecran-mission.v2 .deux-colonnes, .op-corps-v2 {
  max-width: none; margin-left: 0; margin-right: 0; width: 100%; box-sizing: border-box;
  padding-left: var(--bord); padding-right: var(--bord);
}

/* ---- Le dossier de l'exercice, en page ---- */
.dossier-page .panneau-entete, .dossier-page .panneau-dedans { padding-left: var(--bord); padding-right: var(--bord); max-width: none; box-sizing: border-box; }

/* ---- Les éditeurs : la barre du haut couvre la page, le texte se cale dessous ---- */
.page.editeur-modele { padding: 0 var(--bord-page); }
.page.editeur-modele .ed-barre {
  margin: 0; padding-left: 0; padding-right: 0;
  box-shadow: 0 0 0 100vmax var(--mz-surface), 0 1px 0 100vmax var(--mz-trait);
  clip-path: inset(0 -100vmax -1px -100vmax);
  border-bottom: 0;
}

/* ==========================================================================
   La liste des actes : « Nouvel acte » et « Générer un acte ».
   Une ligne par acte, deux colonnes ; le client se choisit dans un tiroir
   qui glisse par-dessus la page. Rien ne bouge au clic.
   ========================================================================== */
.na-tete { display: flex; flex-direction: column; gap: 4px; padding: 26px 0 20px; }
.na-tete h1 { font-family: var(--sans); font-size: var(--t-titre); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.na-tete .sourdine { margin: 0; font-size: var(--t-courant); color: var(--mz-encre-douce); }
.liste-sur { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--mz-encre-tenue); margin: 18px 2px 10px; }
.na-tete + .liste-sur { margin-top: 0; }
.actes-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 8px; }
@media (max-width: 900px) { .actes-liste { grid-template-columns: 1fr; } }
.acte-ligne { display: block; background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; color: var(--mz-encre); text-decoration: none;
  transition: border-color .18s, box-shadow .18s, background .18s; }
/* L'animation d'arrivée est portée par la ligne visible, jamais par le
   `details` : une transformation sur lui ferait du tiroir, qui est fixé à
   l'écran, un prisonnier de la carte. */
.acte-ligne > summary, a.acte-ligne { animation: cadre-monte .32s var(--fondu) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes cadre-monte { from { opacity: 0; transform: translateY(6px); } }
.acte-ligne > summary, a.acte-ligne { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; box-sizing: border-box; cursor: pointer; list-style: none; }
.acte-ligne > summary::-webkit-details-marker { display: none; }
.acte-ligne:hover { border-color: var(--mz-trait-fort); box-shadow: var(--ombre-douce); text-decoration: none; }
.acte-ligne[open] { border-color: var(--mz-vert); background: #F6FBF9; }
.acte-ligne:focus-visible, .acte-ligne > summary:focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; border-radius: 14px; }
.acte-icone { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mz-vert-clair); color: var(--mz-vert); flex: none; transition: transform .2s var(--fondu); }
.acte-icone svg { width: 20px; height: 20px; }
.acte-ligne:hover .acte-icone { transform: scale(1.06); }
.acte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acte-texte b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.acte-texte small { font-size: 13px; color: var(--mz-encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acte-meta { font-size: var(--t-petit); color: var(--mz-encre-tenue); white-space: nowrap; }
.acte-meta.vert { color: var(--mz-vert); font-weight: 600; }
.acte-chevron { width: 16px; height: 16px; color: var(--mz-encre-tenue); transition: transform .2s var(--fondu), color .2s; }
.acte-ligne:hover .acte-chevron, .acte-ligne[open] .acte-chevron { transform: translateX(3px); color: var(--mz-vert); }

.na-voile { position: fixed; inset: 0; z-index: 55; background: rgba(28, 26, 22, .26); opacity: 0; pointer-events: none; transition: opacity .2s; }
.nouvel-acte-v2:has(.acte-ligne[open]) .na-voile { opacity: 1; pointer-events: auto; }
.na-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(420px, 100vw); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px 16px; background: var(--mz-surface); box-shadow: var(--ombre-levee); cursor: default; animation: cadre-tiroir .26s var(--fondu) both; }
@keyframes cadre-tiroir { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.na-tiroir-tete { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 12px; align-items: center; }
.na-tiroir-tete b { display: block; font-size: 16px; font-weight: 600; }
.na-tiroir-tete small { font-size: var(--t-petit); color: var(--mz-encre-tenue); }
.na-fermer { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--mz-encre-douce); cursor: pointer; display: grid; place-items: center; }
.na-fermer:hover { background: var(--mz-champ); color: var(--mz-encre); }
.na-fermer svg { width: 18px; height: 18px; }
.na-tiroir .na-cherche { height: 40px; border: 1px solid var(--mz-trait-fort); border-radius: 10px; padding: 0 12px; font: inherit; font-size: var(--t-courant); background: var(--mz-surface); width: 100%; box-sizing: border-box; }
.na-tiroir .na-cherche:focus { outline: none; border-color: var(--mz-vert); box-shadow: 0 0 0 3px var(--mz-vert-clair); }
.na-tiroir .na-clients { max-height: none; border-top: 0; animation: none; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.na-client { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--mz-encre); text-decoration: none; transition: background .15s; }
.na-client:hover, .na-client:focus { background: var(--mz-champ); outline: none; text-decoration: none; }
.na-client .ini { width: 32px; height: 32px; border-radius: 8px; background: var(--mz-champ); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--mz-encre-douce); }
.na-client:hover .ini { background: var(--mz-vert-clair); color: var(--mz-vert); }
.na-client b { font-size: var(--t-courant); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-client small { font-size: var(--t-petit); color: var(--mz-encre-tenue); }
.na-client[hidden] { display: none; }
details.acte-ligne { padding: 0; margin: 0; }
details.acte-ligne:not([open]) > .na-tiroir { display: none; }
.na-tiroir .sourdine { font-size: 13px; color: var(--mz-encre-tenue); padding: 8px 10px; margin: 0; }
.na-fermer, .na-fermer:hover { border: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   La fiche client : la colonne de droite (À obtenir, Mises à jour) reste en
   place pendant que la liste des opérations défile ; « Supprimer le client »
   ne paraît que sous la fiche elle-même, en lien discret.
   ========================================================================== */
.fiche-v2 .ops-droite { position: sticky; top: 0; align-self: start; }
.fiche-v2 .corps-fiche { scroll-padding-top: 12px; }
.fiche-v2 .corps-fiche:has(#panneau-actes:not([hidden])) .supprimer-client,
.fiche-v2 .corps-fiche:has(#panneau-exercices:not([hidden])) .supprimer-client,
.fiche-v2 .corps-fiche:has(#panneau-journal:not([hidden])) .supprimer-client { display: none; }
.fiche-v2 .pied-fiche.supprimer-client { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mz-trait); text-align: left; }
.fiche-v2 .pied-fiche.supprimer-client .btn.creux { border: 0; background: none; padding: 0; color: var(--mz-rouge); font-size: 13px; font-weight: 500; box-shadow: none; }
.fiche-v2 .pied-fiche.supprimer-client .btn.creux:hover { text-decoration: underline; background: none; }
.fiche-v2 .pied-fiche.supprimer-client .mention { font-size: 12px; color: var(--mz-encre-tenue); }
/* Les onglets de la fiche : un trait sous l'onglet ouvert, rien d'autre. */
.fiche-v2 .onglets-v2 a, .fiche-v2 .onglets-v2 button { transition: color .15s, border-color .15s, background .15s; }

/* ==========================================================================
   L'éditeur de texte d'un acte : un bureau gris, une feuille A4 au milieu,
   comme dans Word. La barre du haut couvre la page ; la note tient en une
   ligne, sur la largeur de la feuille.
   ========================================================================== */
main.page.editeur-modele:has(.tx-zone) { background: #EAEAE5; }
main.page.editeur-modele:has(.tx-zone) .ed-barre { min-height: 60px; gap: 12px 16px; }
main.page.editeur-modele .tx-zone { max-width: none; margin: 0; padding: 28px 0 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
main.page.editeur-modele .tx-zone .ed-note { width: 794px; max-width: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--mz-encre-douce); }
main.page.editeur-modele .tx-zone .ed-feuille { width: 794px; max-width: 100%; min-height: 1123px; margin: 0; box-sizing: border-box; padding: 88px 84px 96px;
  border: 0; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px rgba(28, 26, 22, .08), 0 22px 48px -24px rgba(28, 26, 22, .32); }
main.page.editeur-modele .tx-zone .ed-feuille:focus { box-shadow: 0 0 0 2px var(--mz-vert-trait), 0 22px 48px -24px rgba(28, 26, 22, .32); }
.tx-nom { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
@media (max-width: 900px) { main.page.editeur-modele .tx-zone .ed-feuille { padding: 40px 28px; min-height: 0; } }
main.page.editeur-modele > form { width: 100%; box-sizing: border-box; display: block !important; }
main.page.editeur-modele .tx-zone .ed-feuille { color: var(--mz-encre); }

/* ==========================================================================
   L'éditeur des modèles : la liste des champs en lignes égales. Le style
   général des boutons donnait à chaque nom un fond blanc à sa largeur, et la
   liste faisait un escalier.
   ========================================================================== */
.ed-panneau .pc-item { min-height: 44px; padding: 4px 10px 4px 14px; transition: background .12s; }
.ed-panneau .pc-item .pc-ins-zone { align-self: stretch; }
main.page .ed-panneau .pc-item button.pc-ins {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; width: 100%; min-height: 36px; padding: 4px 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--mz-encre);
}
main.page .ed-panneau .pc-item button.pc-ins:hover { background: transparent; box-shadow: none; color: var(--mz-vert); }
main.page .ed-panneau .pc-item button.pc-ins:active { transform: none; }
.ed-panneau .pc-item .pc-ex { font-size: 12px; font-weight: 400; }
.ed-panneau .pc-groupe > summary { border-bottom: 1px solid var(--mz-trait); }
.ed-panneau .pc-filtres, .ed-panneau .pc-familles { flex-wrap: wrap; gap: 6px; }
main.page .ed-panneau .pc-item button.pc-ins { align-items: flex-start; text-align: left; }
/* Le panneau des champs tient entre la barre du haut et le bas de l'écran,
   qu'on ait défilé ou non. */
main.page.editeur-modele .ed-panneau { top: 122px; margin-top: 16px; height: calc(100dvh - 138px); }

/* ==========================================================================
   L'exercice et l'opération.
   ========================================================================== */
/* Un message d'étape se pose à plat : l'ombre de la page de connexion ne
   le suit plus dans le panneau. */
.ecran-mission .porte { box-shadow: none; border-radius: 12px; max-width: none; }
.ecran-mission .porte .l { font-size: 11px; letter-spacing: .08em; }
/* Les tiroirs de l'opération : une barre d'outils, et plus six boutons de
   même poids. Les quatre tiroirs dans un groupe, puis le dossier et l'aperçu. */
.acte-v2 .outils-v2 { gap: 2px; padding: 3px; background: var(--mz-champ); border-radius: 10px; align-items: center; }
main.page .acte-v2 .outils-v2 .btn { height: 30px; padding: 0 12px; border: 0; background: transparent; box-shadow: none; border-radius: 8px; color: var(--mz-encre-douce); font-weight: 500; }
main.page .acte-v2 .outils-v2 .btn:hover { background: var(--mz-surface); color: var(--mz-encre); box-shadow: 0 1px 2px rgba(28, 26, 22, .08); }
main.page .acte-v2 .outils-v2 .btn.a-voir { color: var(--mz-ambre-fonce); }
main.page .acte-v2 .outils-v2 a.btn { margin-left: 6px; position: relative; }
main.page .acte-v2 .outils-v2 a.btn::before { content: ""; position: absolute; left: -5px; top: 7px; bottom: 7px; width: 1px; background: var(--mz-trait-fort); }
/* Retirer une opération : un lien discret sous la question, à gauche. */
.pied-fiche.retirer-operation { display: flex; align-items: baseline; gap: 12px; justify-content: flex-start; margin-top: auto; padding: 14px 4px 4px; border-top: 1px solid var(--mz-trait); text-align: left; }
main.page .pied-fiche.retirer-operation .btn.creux { border: 0; background: none; box-shadow: none; padding: 0; height: auto; color: var(--mz-rouge); font-size: 13px; font-weight: 500; }
main.page .pied-fiche.retirer-operation .btn.creux:hover { text-decoration: underline; background: none; }
.pied-fiche.retirer-operation .mention { font-size: 12px; color: var(--mz-encre-tenue); }
.pied-fiche.retirer-operation .mention, .fiche-v2 .pied-fiche.supprimer-client .mention { margin-left: 0; font-family: var(--sans); }
/* L'étape affichée est toujours entourée, même franchie. */
.ecran-mission.v2 .rail .rdv.ici, .ecran-mission.v2 .rail .rdv.ici:hover { box-shadow: 0 0 0 2px var(--mz-vert) !important; border-color: transparent; }
/* La seconde ligne d'une étape tient dans sa case : plus de capitales espacées. */
.ecran-mission.v2 .rdv .bas { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
/* Le panneau de l'étape prend la hauteur de ce qu'il contient, et défile
   au-delà : plus de grand cadre blanc vide sous un seul message. */
.ecran-mission.v2 .deux-colonnes > .etape-en-cours { align-self: start; max-height: 100%; }
.op-corps-v2 .q-centre > .carte-seance:only-of-type { flex: none; }
/* « Équipe » est une pastille de la ligne des pastilles, pas un bouton ovale. */
main.page .ecran-mission.v2 .chapeau-mission .btn.pilule { height: 26px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--mz-vert-clair); color: var(--mz-vert); font-size: 13px; font-weight: 600; box-shadow: none; }
main.page .ecran-mission.v2 .chapeau-mission .btn.pilule:hover { background: #D3EAE2; }

/* ==========================================================================
   Le dossier de l'exercice : « Produire » sur la ligne du document prêt.
   ========================================================================== */
.dossier-ligne.prete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; align-items: center; }
.dossier-ligne.prete > :not(form) { grid-column: 1; }
.dossier-ligne.prete > form { grid-column: 2; grid-row: 1; margin: 0; }
.dossier-ligne.prete > form button { border-radius: 10px !important; height: 36px; padding: 0 16px !important; }
.dossier-page .panneau-entete { border-bottom: 1px solid var(--mz-trait); }

/* ==========================================================================
   Les statuts à vérifier : un seul bandeau ; une zone de texte prend la
   hauteur de l'article, sans défiler dans la page qui défile.
   ========================================================================== */
.bandeau-unique { align-items: flex-start; }
.bandeau-unique .txt { display: flex; flex-direction: column; gap: 6px; }
.bandeau-unique .txt p { margin: 0; }
.bandeau-unique .points-a-voir { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mz-encre-douce); }
.verif-statuts textarea, .fiche-v2 textarea[name="texte"] { field-sizing: content; min-height: 4lh; max-height: none; resize: vertical; overflow: hidden; }

/* ==========================================================================
   Une seule famille de boutons, audit du 2026-09-26 : il y en avait cinq
   (ovales, carrés à 4 px, à 8 px, de 30, 32, 36 et 40 px de haut). Une
   action est un rectangle arrondi à 10 px, de 36 px, ou 32 px quand elle est
   « petite » ; les filtres restent des pastilles rondes.
   ========================================================================== */
main.page .btn:not(.icone):not(.pilule):not(.mini),
main.page .bouton,
main.page .creux:is(button, a),
main.page form > button[type="submit"]:not([class]) {
  border-radius: 10px;
}
main.page .btn:not(.icone):not(.pilule):not(.mini):not(.petit),
main.page .bouton,
main.page form > button[type="submit"]:not([class]) {
  min-height: 36px; height: auto; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; line-height: 1.2;
}
main.page .btn.petit:not(.icone):not(.pilule) { min-height: 32px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; box-sizing: border-box; }
main.page .btn, main.page .bouton { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s, transform .1s; }
main.page .btn:active, main.page .bouton:active { transform: translateY(1px); }
/* Les boutons pleins, un vert, un survol. */
main.page .btn-plein:hover, main.page .bouton:not(.creux):hover { box-shadow: 0 4px 12px -4px rgba(14, 107, 90, .45); }

/* Les champs : même rayon, même anneau vert quand on y écrit. */
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, textarea):not(.pc-ins):not([hidden]) {
  border-radius: 10px;
}
main.page :is(input, select, textarea):focus-visible { outline: none; border-color: var(--mz-vert); box-shadow: 0 0 0 3px var(--mz-vert-clair); }
main.page :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; }

/* ==========================================================================
   Les onglets de l'administration : le trait souligné de la fiche, et plus
   des pastilles pleines. Les filtres, eux, restent des pastilles.
   ========================================================================== */
.admin-v2 .onglets-admin { gap: 4px; border-bottom: 0; margin-bottom: -1px; }
main.page.admin-v2 .onglets-admin a { position: relative; height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--mz-encre-douce); font-size: 14px; font-weight: 500; box-shadow: none; text-decoration: none; }
main.page.admin-v2 .onglets-admin a:hover { color: var(--mz-encre); background: var(--mz-champ); }
main.page.admin-v2 .onglets-admin a.ici { color: var(--mz-encre); font-weight: 600; background: transparent; }
main.page.admin-v2 .onglets-admin a.ici::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--mz-vert); }
main.page.admin-v2 .admin-tete { padding-bottom: 0; }

/* ==========================================================================
   Les journaux : une date et un nom ne passent pas à la ligne ; le filtre
   tient sur une ligne.
   ========================================================================== */
main.page table td:first-child:has(> br), main.page .table-admin td:first-child { white-space: nowrap; }
main.page form.filtre-en-ligne { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
main.page form.filtre-en-ligne label { display: flex; flex-direction: column; gap: 6px; width: auto; }
main.page form.filtre-en-ligne select { min-width: 240px; height: 40px; }
main.page form.filtre-en-ligne button { height: 40px; }
main.page:has(form.filtre-en-ligne) table td:nth-child(-n+2) { white-space: nowrap; }

/* ==========================================================================
   Du mouvement, avec mesure : la tête d'une page prend son ombre quand on
   commence à défiler, pas avant ; les cartes se soulèvent au survol.
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  main.page:not(.nue):not(.tenue):not(.etroite) > :is(.chapeau, .admin-tete, .tdb-tete):first-child {
    animation: cadre-ombre linear both; animation-timeline: scroll(nearest block); animation-range: 0 48px;
  }
  @keyframes cadre-ombre {
    from { box-shadow: 0 0 0 100vmax var(--mz-fond), 0 1px 0 100vmax var(--mz-trait); }
    to { box-shadow: 0 0 0 100vmax var(--mz-fond), 0 1px 0 100vmax var(--mz-trait), 0 12px 18px -12px rgba(28, 26, 22, .16); }
  }
}
.op-carte-v2, .ops-boite, .carte-v2, .carte-admin, .acte-ligne { will-change: auto; }
.carte-v2:hover { box-shadow: var(--ombre-douce); }
.op-carte-v2:not([open]):hover { box-shadow: var(--ombre-douce); }
@media (prefers-reduced-motion: reduce) {
  .acte-ligne > summary, a.acte-ligne, .na-tiroir { animation: none !important; }
  main.page .btn:active, main.page .bouton:active { transform: none; }
}
/* Les endroits serrés gardent le bouton compact : les cartes du tableau de
   bord, la tête de l'exercice, la barre d'outils de l'opération. */
main.page :is(.carte-v2, .chapeau-mission, .tdb-gestes, .bascule-vue, .pli-ligne, .manque-l) .btn:not(.icone):not(.pilule):not(.mini) { min-height: 32px; }
main.page .acte-v2 .outils-v2 .btn:not(.icone) { min-height: 30px; height: 30px; }
main.page.admin-v2 > .admin-tete:first-child { padding-bottom: 0 !important; }
main.page.admin-v2 .table-admin td { border-bottom: 1px solid var(--mz-trait); border-top: 0; box-shadow: none; }
main.page.admin-v2 .table-admin tr:last-child td { border-bottom: 0; }
/* « Relancer tout » a le style des autres liens d'action : pas de soulignement. */
.col-v2-tete a, .col-v2-tete button.lien { text-decoration: none; font-weight: 600; color: var(--mz-vert); font-size: 13px; }
.col-v2-tete a:hover, .col-v2-tete button.lien:hover { text-decoration: underline; }
.admin-v2 .admin-tete-dedans { padding-bottom: 0 !important; }

/* Trouvé à l'audit : la page défile à l'intérieur, et ses blocs, rangés en
   colonne, se tassaient pour tenir dans l'écran. Un tableau aux bords
   arrondis (qui coupe ce qui dépasse) n'en montrait plus qu'une ligne, sur
   la page de la campagne. Un bloc garde sa hauteur ; c'est la page qui défile. */
main.page:not(.nue):not(.tenue):not(.etroite) > * { flex-shrink: 0; }
main.page.tenue.fiche-v2:not(:has(> .corps-fiche)) > * { flex-shrink: 0; }

/* ==========================================================================
   Un choix entre deux vues (le pôle, par exemple) : un sélecteur segmenté,
   comme sur le tableau de bord, et plus deux mots dont un souligné.
   ========================================================================== */
.bascule-segment { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; background: var(--mz-champ); border-radius: 999px; margin: 4px 0 12px; }
.bascule-segment > a, .bascule-segment > strong { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mz-encre-douce); text-decoration: none; }
.bascule-segment > strong { background: var(--mz-surface); color: var(--mz-vert); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 26, 22, .08); }
.bascule-segment > a:hover { color: var(--mz-encre); text-decoration: none; }
/* Déposer se tient à côté de la zone de dépôt, sur la même ligne. */
main.page form:has(> .deposer-sur-la-ligne) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; }
main.page form:has(> .deposer-sur-la-ligne) > :not(input[type=hidden]):not(.deposer-sur-la-ligne) { flex: 1 1 auto; min-width: 0; }
main.page .deposer-sur-la-ligne { flex: none; min-height: 36px; border-radius: 10px; margin: 0 !important; align-self: center; }
.options-droits { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 6px 0 14px; }
main.page label.option-droit { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; width: auto; }
main.page label.option-droit:hover { border-color: var(--mz-trait-fort); }
main.page label.option-droit:has(input:checked) { border-color: var(--mz-vert); background: #F6FBF9; }
main.page label.option-droit input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--mz-vert); }
main.page label.option-droit span { display: flex; flex-direction: column; gap: 3px; }
main.page label.option-droit b { font-size: 14px; font-weight: 600; color: var(--mz-encre); }
main.page label.option-droit small { font-size: 13px; line-height: 1.45; color: var(--mz-encre-douce); }
main.page label.option-droit small { font-weight: 400; }

/* ==========================================================================
   Le portefeuille : les filtres tiennent sur une ligne et glissent de côté
   quand ils sont nombreux ; la recherche reste à droite, à la même hauteur.
   ========================================================================== */
.pf-v2-outils { align-items: center; gap: 16px; }
.pf-v2-filtres { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 2px 24px 2px 2px; margin: -2px 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.pf-v2-filtres::-webkit-scrollbar { display: none; }
.pf-v2-filtres > * { flex: none; }
.pf-v2-droite { display: flex; align-items: center; gap: 8px; }
.pf-v2-cherche { width: 200px; height: 36px; box-sizing: border-box; }
.pf-v2-droite input:not([type=hidden]) { width: 200px !important; height: 36px; box-sizing: border-box; }
.pf-v2-droite .btn, .pf-v2-droite button { min-height: 36px; height: 36px; }
.pf-v2-droite input.pf-v2-cherche { min-width: 0 !important; max-width: 200px; }
.pf-v2-droite { flex: none; }

/* Un écran vide se dit en phrase, pas en petites capitales dans une barre grise. */
.bandeau-vide { background: transparent; border: 1px dashed var(--mz-trait-fort); border-radius: 12px; padding: 18px 20px; }
.bandeau-vide .etiq.grise { background: none; padding: 0; font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--mz-encre-tenue); }
.bandeau-vide .etiq.grise::first-letter { text-transform: uppercase; }
/* Les onglets de la fiche commencent au texte de l'en-tête. */
.fiche-v2 .onglets-v2 { padding-left: 9px; }
.bandeau-vide .etiq.grise { display: block; }

/* ==========================================================================
   La porte (connexion, mot de passe oublié, invitation) : la carte au milieu
   de l'écran, la marque au-dessus, une ombre légère.
   ========================================================================== */
main.page.etroite { min-height: 100dvh; box-sizing: border-box; justify-content: center; padding-top: 32px; padding-bottom: 64px; }
main.page.etroite::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 6px; background: url("lexia.svg") center / contain no-repeat; }
main.page.etroite .porte { border-radius: 16px; border: 1px solid var(--mz-trait); box-shadow: 0 1px 2px rgba(28, 26, 22, .04), 0 24px 48px -28px rgba(28, 26, 22, .28); }
main.page.etroite .porte button[type=submit] { min-height: 40px; border-radius: 10px; }

/* ==========================================================================
   Un tiroir à droite, pour un réglage qui s'ouvre sur place : il glisse
   par-dessus la page au lieu de la pousser. Porté par un `details`.
   ========================================================================== */
.ops-fiche-v2 { animation-fill-mode: backwards; }
details:not([open]) > .tiroir-droit, details:not([open]) > .tiroir-voile { display: none; }
.op-pied .tiroir-droit, .tiroir-droit { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); box-sizing: border-box; margin: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; background: var(--mz-surface); box-shadow: var(--ombre-levee); animation: cadre-tiroir .26s var(--fondu) both; }
.tiroir-voile { position: fixed; inset: 0; z-index: 55; background: rgba(28, 26, 22, .26); animation: v2-voile .2s ease both; cursor: pointer; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tiroir-tete b { font-size: 16px; font-weight: 600; }
main.page .tiroir-fermer { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--mz-encre-douce); cursor: pointer; display: grid; place-items: center; box-shadow: none; padding: 0; }
main.page .tiroir-fermer:hover { background: var(--mz-champ); }
.tiroir-fermer svg { width: 18px; height: 18px; }
.tiroir-droit > .sourdine { font-size: 13px; line-height: 1.5; color: var(--mz-encre-douce); margin: 0; }
.tiroir-liste { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px; }
.tiroir-liste .coche-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.tiroir-liste .coche-ligne:hover { background: var(--mz-champ); }
.tiroir-liste .coche-ligne input { accent-color: var(--mz-vert); width: 16px; height: 16px; margin: 0; }
.tiroir-droit > .btn { align-self: stretch; margin: 0; }

/* La frise des neuf étapes, sur un écran étroit : les cases gardent une
   largeur lisible et la frise glisse de côté, au lieu de couper chaque nom. */
@media (max-width: 1360px) {
  .ecran-mission.v2 .rail { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 3px; margin: -3px; }
  .ecran-mission.v2 .rail::-webkit-scrollbar { display: none; }
  .ecran-mission.v2 .rail > .rdv { min-width: 132px; scroll-snap-align: start; }
}
.bandeau-unique .txt { white-space: normal; min-width: 0; flex: 1 1 auto; overflow: visible; text-overflow: clip; }
.bandeau-unique .points-a-voir li { white-space: normal; overflow-wrap: anywhere; }
.bandeau-unique .txt p > :not(br) { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.bandeau-unique .txt, .bandeau-unique .txt p { max-width: none; }
.bandeau-unique .txt p { display: block; }
.bandeau-unique .phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bandeau-unique .points-a-voir, .bandeau-unique .points-a-voir li { max-width: none; }
/* Le portefeuille sur un écran étroit : la tête de la frise dit le numéro de
   l'étape, le nom au survol, au lieu de « Compt… ». */
@media (max-width: 1180px) {
  .pf-frise.tete span { font-size: 0; }
  .pf-frise.tete span::before { content: "0" attr(data-n); font-size: 11px; font-variant-numeric: tabular-nums; }
}
.op-corps-v2 .q-centre > .carte-seance { flex: none !important; min-height: 0; }
main.page .pied-fiche.retirer-operation { flex-direction: row; flex-wrap: wrap; }

/* Le détail d'une opération, dans un tiroir : trois rubriques l'une sous
   l'autre, « Ouvrir l'acte » en bas, sur toute la largeur. */
.op-carte-v2 { animation-fill-mode: backwards !important; }
.op-carte-v2[open] { box-shadow: none; }
.op-carte-v2 > .op-tiroir.tiroir-droit { display: flex; flex-direction: column; grid-template-columns: none; gap: 18px; border-top: 0; background: var(--mz-surface); padding: 22px; overflow-y: auto; }
.op-carte-v2 > .op-tiroir.tiroir-droit .op-tiroir-g { margin-top: auto; }
.op-carte-v2 > .op-tiroir.tiroir-droit .op-tiroir-g .btn { width: 100%; }
.op-carte-v2 > .op-tiroir.tiroir-droit .it { font-size: 14px; padding: 5px 0; }
/* Un détail qui s'ouvre en tiroir se désigne d'un chevron vers la droite. */
.op-carte-v2.acte .chev, .op-carte-v2.acte[open] .chev { transform: rotate(-90deg); }

/* La colonne des questions de l'opération, repliée : elle dit ce qu'elle
   est, « Questions » écrit à la verticale sous la flèche, au lieu de trois
   points muets. Au survol ou épinglée, rien ne change. */
.op-corps-v2:not(.epingle) .q-gauche:not(:hover):not(:focus-within) .q-tete { flex-direction: column; gap: 10px; }
.op-corps-v2:not(.epingle) .q-gauche:not(:hover):not(:focus-within) .q-lib { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .1em; color: var(--mz-encre-tenue); order: 2; }