/* ==========================================================================
   Œuvra — Maîtres d’œuvre · feuille du gabarit templates/page-maitres-doeuvre.php (chargée après main.css).
   1. Base = handoff/design/css/pages/maitres-oeuvre.css, sans ses !important (ils ne battaient que les styles
      inline du prototype ; responsive.md §4.2) :
      - règles .moe-consult* (≤ 1439, ≤ 767) et .moe-track* (≤ 767) retirées : reprises à l'identique, sans
        !important, par les fragments FV-M2 et FV-M3 (§3), source unique du rendu des deux cartes (fvdiff : 0 écart
        avec ou sans elles) ; les classes restent dans le balisage ;
      - ≤ 1023, `.moe-schema { zoom: 1; width: auto }` : sans !important, ces déclarations (0,1,0) perdraient contre
        `.c-zoom > .c-zoom__inner` (0,2,0, main.css) ; elles sont portées par le fragment FV-M1 (§3, 0,2,0, chargé
        après main.css), qui neutralise aussi le repli JS (--zoom-scale: 1). Le reste de la règle est conservé ;
      - largeur et flex du titre collant (.moe-s4-title) et de la liste (.moe-s4-list) limités à ≥ 1024 : sous 1024,
        l'empilement de .l-split (main.css) s'applique sans dépendre de ses !important hérités de site.css.
   2. Styles inline du prototype (prototype/maitres-oeuvre.html) convertis en classes moe-* (spécificité 0,1,0 :
      aucune règle de main.css ne fixe ces propriétés sur ces éléments). Colonnes des splits (largeur, flex, écart,
      alignement) limitées à ≥ 1024, comme ci-dessus.
      « ≥ 1024 » s'écrit `@media not all and (max-width: 1023px)` : complément exact de l'empilement de .l-split
      (main.css, max-width: 1023px). Une largeur fractionnaire entre 1023 et 1024 px (zoom du navigateur, ex. 110 %
      sur une fenêtre de 1126 px → 1023,64 px) ne satisfait ni (max-width: 1023px) ni (min-width: 1024px) : avec
      cette dernière, les colonnes y perdaient largeurs et écarts (page de 4 577 px au lieu de 4 766, cartes collées
      à leur texte). Au prototype, les colonnes sont des styles inline, sans requête : même rendu qu'à 1024.
   3. Illustrations FV-M1 … FV-M6 (fragments convertis et vérifiés, vague 1) : un bloc commenté par illustration.
   Composants partagés utilisés (main.css) : .c-hero (hero métier), .c-crumb, .l-split (empilé < 1024, texte
   d'abord), .c-zoom (repli centralisé main.css + main.js §4), .c-plan-tag, .c-num, .c-arrow(--sm), .oe-kicker,
   .t-*, .u-block, .c-cta (template-parts/layout/cta.php). Mouvement : aucune animation propre à la page
   (motion-spec.md : M07, M08, M09 génériques ; visuels MOE statiques, intentions « À valider » non implémentées) ;
   titre collant D22 en CSS seule (position: sticky ≥ 1024, statique < 1024).
   ========================================================================== */

/* ---------- 1. maitres-oeuvre.css du handoff (sans !important) ---------- */

/* Schéma Projet → Lots → Entreprises */
.moe-schema-wrap { margin-top: var(--head-gap); --zoom-w: 1200px; }
.moe-schema { box-sizing: border-box; padding: 40px 44px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); display: flex; align-items: flex-end; }
.moe-schema__proj { flex: none; width: 260px; align-self: center; }
.moe-schema__col { flex: none; width: 300px; display: flex; flex-direction: column; }
.moe-schema__l1, .moe-schema__l2 { flex: none; width: 100px; height: 200px; align-self: flex-end; }
.moe-schema__l3 { display: none; }
.moe-schema__label { margin: 0 0 12px; }
.moe-schema__stack { display: flex; flex-direction: column; gap: 10px; }
.moe-schema__stack--ents { gap: 40px; padding-top: 30px; }
.moe-node { box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--border-100); background: var(--bg-surface); }
.moe-node > i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--action); }
.moe-node__t { font: 600 14px/20px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.moe-node__s { margin-left: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-500); text-align: right; }
/* Consultations en ligne */
.moe-consult-sec { padding-top: 0; }
/* Titre collant de la section Planning (D22 : top 120, Desktop/Laptop ; largeur et flex ≥ 1024, voir en-tête) */
.moe-s4-title { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.moe-s4-list { min-width: 0; }
@media not all and (max-width: 1023px) {
	.moe-s4-title { flex: none; width: 33.333%; }
	.moe-s4-list { flex: 1 1 auto; }
}
.moe-item { display: flex; gap: 28px; padding: 28px 0; border-top: 1px solid var(--border-100); }
.moe-item__num { flex: none; width: 36px; }
.moe-item__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.moe-item__vis { flex: none; width: 280px; }
@media (max-width: 1439px) {
	.moe-item { gap: 24px; }
	.moe-item__vis { width: 240px; }
}
@media (max-width: 1023px) {
	/* schéma : Projet au-dessus, Lots | liaisons | Entreprises en dessous (zoom et largeur : fragment FV-M1) */
	.moe-schema-wrap { container-type: normal; }
	.moe-schema { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-areas: "proj proj proj" "lots l2 ents"; align-items: end; padding: 32px; }
	/* arborescence Projet → Lots : tronc sous la pastille du Projet (--moe-trunk), une branche par lot (retrait --moe-indent) */
	.moe-schema { --moe-trunk: 25px; --moe-indent: 44px; --moe-lot-h: 50px; --moe-stem: 36px; }
	.moe-schema__proj { grid-area: proj; width: auto; max-width: 320px; align-self: start; position: relative; padding-bottom: var(--moe-stem); }
	.moe-schema__proj::after { content: ""; position: absolute; left: calc(var(--moe-trunk) - 0.75px); bottom: 0; height: var(--moe-stem); width: 1.5px; background: var(--brand-300); }
	.moe-schema__l1 { display: none; }
	.moe-schema__lots { grid-area: lots; width: auto; position: relative; padding-left: var(--moe-indent); }
	.moe-schema__lots::before { content: ""; position: absolute; left: calc(var(--moe-trunk) - 0.75px); top: 0; bottom: calc(var(--moe-lot-h) / 2); width: 1.5px; background: var(--brand-300); }
	.moe-schema__lots .moe-node { position: relative; height: var(--moe-lot-h); }
	.moe-schema__lots .moe-node::after { content: ""; position: absolute; top: 50%; left: calc(var(--moe-trunk) - var(--moe-indent) - 1px); width: calc(var(--moe-indent) - var(--moe-trunk)); height: 1.5px; margin-top: -0.75px; background: var(--brand-300); }
	.moe-schema__l2 { grid-area: l2; width: 64px; }
	.moe-schema__ents { grid-area: ents; width: auto; }
	.moe-s4-title { position: static; }
}
@media (max-width: 767px) {
	/* schéma : Projet au-dessus ; Lots en arborescence | liaisons (l3) | Entreprises, côte à côte.
	   Lots et entreprises sur la même grille de lignes (60 px, écart 10) : A centrée sur Démolition + Terrassement, B en face de Fondations */
	.moe-schema { --moe-trunk: 19px; --moe-indent: 32px; --moe-lot-h: 60px; --moe-stem: 20px; grid-template-columns: minmax(0, 1.2fr) 24px minmax(0, 1fr); grid-template-areas: "proj proj proj" "lots l3 ents"; padding: 24px 16px; }
	.moe-schema__proj { max-width: none; }
	.moe-schema__l2 { display: none; }
	.moe-schema__l3 { display: block; grid-area: l3; width: 24px; height: 200px; }
	.moe-node { padding: 10px 12px; }
	.moe-schema__lots .moe-node, .moe-schema__ents .moe-node { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
	.moe-schema__lots .moe-node__s, .moe-schema__ents .moe-node__s { margin-left: 0; text-align: left; }
	.moe-schema__stack--ents { display: grid; grid-template-rows: repeat(3, var(--moe-lot-h)); gap: 10px; padding-top: 0; }
	.moe-schema__stack--ents > :first-child { grid-row: 1 / span 2; align-self: center; }
	.moe-schema__stack--ents > :last-child { grid-row: 3; align-self: center; }
	/* éléments de la liste : numéro + texte, mini-visuel dessous (retrait 52, max 280 ; à 360, 12 px dans la marge
	   latérale comme au prototype et dans la fiche FV-M4 : 280 × 128 — sans défilement horizontal) */
	.moe-item { flex-wrap: wrap; gap: 16px; padding: 24px 0; }
	.moe-item__text { flex: 1 1 calc(100% - 52px); }
	.moe-item__vis { width: 100%; margin-left: 52px; max-width: 280px; }
}

/* ---------- 2. Styles inline du prototype convertis ---------- */

/* Les lots d'abord — .l-split style="display: flex; align-items: flex-start; justify-content: space-between;
   gap: 6.667%" ; colonne titre style="flex: 0 0 auto; width: 46.667%; display: flex; flex-direction: column;
   gap: 18px" ; colonne texte style="flex: 0 0 auto; width: 43.333%; display: flex; flex-direction: column;
   gap: 18px; padding-top: 10px" (sous 1024 : .l-split de main.css). */
@media not all and (max-width: 1023px) {
	.moe-lots { align-items: flex-start; justify-content: space-between; gap: 6.667%; }
	.moe-lots__head { flex: 0 0 auto; width: 46.667%; }
	.moe-lots__body { flex: 0 0 auto; width: 43.333%; }
}
.moe-lots__head { display: flex; flex-direction: column; gap: 18px; }
.moe-lots__body { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
/* Titre style="max-width: 560px" (lignes <span style="display: block"> → .u-block) ; chapô style="max-width: 520px" ;
   lien dans <div style="margin-top: 6px">. */
.moe-lots__title { max-width: 560px; }
.moe-lots__lead { max-width: 520px; }
.moe-lots__more { margin-top: 6px; }

/* Consultations en ligne / Entreprise par entreprise — .l-split style="display: flex; align-items: center; gap: 8%" ;
   colonne visuelle style="flex: 0 0 auto; width: 51.667%" ; colonne texte .l-split__text style="flex: 0 0 auto;
   width: 36.667%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px" (sous 1024 : .l-split
   de main.css, texte d'abord). */
@media not all and (max-width: 1023px) {
	.moe-split { align-items: center; gap: 8%; }
	.moe-split__vis { flex: 0 0 auto; width: 51.667%; }
	.moe-split__text { flex: 0 0 auto; width: 36.667%; }
}
.moe-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* Titre style="max-width: 440px" ; chapô style="max-width: 440px" (Entreprise par entreprise) ou 470px (Consultations
   en ligne) ; lien dans <div style="margin-top: 8px">. */
.moe-split__title { max-width: 440px; }
.moe-split__lead { max-width: 440px; }
.moe-split__lead--wide { max-width: 470px; }
.moe-split__more { margin-top: 8px; }

/* Une fois les travaux lancés — .l-split style="display: flex; align-items: flex-start; gap: 5.333%" (≥ 1024 ;
   flex-start indispensable au titre collant) ; titre style="max-width: 400px" ; liens des éléments dans
   <div style="margin-top: 4px">. */
@media not all and (max-width: 1023px) {
	.moe-s4 { align-items: flex-start; gap: 5.333%; }
}
.moe-s4-title__h { max-width: 400px; }
.moe-item__more { margin-top: 4px; }

/* ---------- 3. Illustrations ---------- */

/* FV-M1 — schéma Projet → Lots → Entreprises (section « Les lots d’abord ») : conversion du style inline du prototype
   + compensation d'une déclaration prioritaire de la CSS de page. Partial : template-parts/visuals/
   fv-m1-moe-schema-lots-entreprises.php. Racine .fv-m1 (= .moe-schema-wrap.c-zoom), descendants 0,2,0, sans
   !important ; chargé après main.css. Le reste du dessin est porté par les règles .moe-schema* / .moe-node* (§1).
   Pas d'animation (fiche : « Aucune » ; l'intention « À valider » n'est pas implémentée). */

/* Pastille vermillon du nœud Projet (style inline du prototype ; identique à .moe-node > i). */
.fv-m1 .fv-m1__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--action); }

/* < 1024 : composition fluide (D10), plus de mise à l'échelle. Remplace `.moe-schema { zoom: 1 !important;
   width: auto !important }` du handoff : même spécificité que `.c-zoom > .c-zoom__inner` (0,2,0, main.css), déclarée
   après → gagne. --zoom-scale: 1 posé sur le dessin neutralise aussi le repli JS de main.js §4
   (`html.oeu-fit-js .c-zoom > .c-zoom__inner { zoom: var(--zoom-scale, 1) }`, 0,3,1) : l'échelle calculée est posée
   sur .c-zoom et ne serait sinon qu'héritée par le dessin (rendu réduit à tort sous 1024). */
@media (max-width: 1023px) {
	.fv-m1 .fv-m1__schema { --zoom-scale: 1; zoom: 1; width: auto; }
}

/* FV-M2 — carte « Consultation en ligne » (section #consultations-en-ligne) : conversions des styles inline du
   prototype + recomposition responsive de la carte. Racine .fv-m2 (= .moe-consult), descendants 0,2,0. La carte
   porte seule son rendu à toutes les largeurs (règles .moe-consult* du handoff reprises ici en déclarations
   normales). Largeur fluide (51,667 % ≥ 1024) : colonne .moe-split__vis de la section, hors composant. */

/* Carte */
.fv-m2 { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; border-radius: var(--radius-xl); border-width: 1px; border-style: solid; border-top-color: var(--border-100); border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); background: var(--bg-surface); }

/* En-tête : titre (pastille lot 1) + dates */
.fv-m2 .fv-m2__head { display: flex; flex-direction: column; gap: 4px; }
.fv-m2 .fv-m2__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.fv-m2 .fv-m2__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--lot-1); }
.fv-m2 .fv-m2__meta { font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }

/* Réponses des entreprises (Desktop : une rangée — nom 132, détail, statut, montant 110) */
.fv-m2 .fv-m2__rows { display: flex; flex-direction: column; }
.fv-m2 .fv-m2__row { display: flex; align-items: center; gap: 16px; padding: 14px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-m2 .fv-m2__name { flex: 0 0 auto; width: 132px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-m2 .fv-m2__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); }
.fv-m2 .fv-m2__desc { flex: 1 1 auto; font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-m2 .fv-m2__badge { flex: 0 0 auto; }
.fv-m2 .fv-m2__amount { flex: 0 0 auto; width: 110px; text-align: right; font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-m2 .fv-m2__amount--empty { font-weight: 400; color: var(--ink-500); font-variant-numeric: normal; }

/* Pied : note + bouton illustratif */
.fv-m2 .fv-m2__foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-m2 .fv-m2__note { font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-m2 .fv-m2__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0px 14px; border-radius: var(--radius-sm); background: var(--brand-ink); font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: rgb(255, 255, 255); white-space: nowrap; }

/* ≤ 1439 : chaque ligne en grille — nom + montant, puis détail, puis statut. */
@media (max-width: 1439px) {
	.fv-m2 .fv-m2__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "desc desc" "badge badge"; gap: 6px 12px; align-items: center; }
	.fv-m2 .fv-m2__name { grid-area: name; width: auto; }
	.fv-m2 .fv-m2__desc { grid-area: desc; }
	.fv-m2 .fv-m2__badge { grid-area: badge; justify-self: start; }
	.fv-m2 .fv-m2__amount { grid-area: amount; width: auto; }
}

/* ≤ 767 : padding 24/20, en-tête et pied empilés, bouton aligné à gauche (seules les valeurs qui changent le rendu :
   l'en-tête est déjà une colonne à 4 px d'écart et la ligne de dates n'a pas de marge). */
@media (max-width: 767px) {
	.fv-m2 { padding: 24px 20px; }
	.fv-m2 .fv-m2__head { align-items: flex-start; }
	/* Titre sur une ligne tant qu'il tient (toujours le cas au repos : 259 px pour 278 disponibles à 360) ; retour à la ligne
	   permis au lieu du « nowrap » inline du prototype, pour l'espacement de texte WCAG 1.4.12 : sans lui, à 360–389 px,
	   le titre élargi sortait de la carte (28 px à 360) et était rogné au bord de la fenêtre. Rendu inchangé. */
	.fv-m2 .fv-m2__title { white-space: normal; }
	.fv-m2 .fv-m2__foot { flex-direction: column; align-items: flex-start; }
	.fv-m2 .fv-m2__cta { margin-left: 0; }
}

/* FV-M3 — carte « Entreprise par entreprise » : conversions des styles inline du prototype + recomposition Mobile
   (D11). Racine .fv-m3 (= .moe-track), descendants 0,2,0. La carte porte seule son rendu à toutes les largeurs
   (règles .moe-track* du handoff reprises ici sans marqueur de priorité). Largeur fluide (51,667 % ≥ 1024) :
   colonne .moe-split__vis de la section, hors composant. Aucune animation (fiche : « À valider »). */

/* Carte */
.fv-m3 { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: var(--radius-xl); border-width: 1px; border-style: solid; border-top-color: var(--border-100); border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); background: var(--bg-surface); }

/* Étapes numérotées sur un filet */
.fv-m3 .fv-m3__steps { position: relative; display: flex; gap: 16px; }
.fv-m3 .fv-m3__line { position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: var(--border-100); }
.fv-m3 .fv-m3__step { flex: 1 1 0px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.fv-m3 .fv-m3__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.04em; color: var(--brand-ink); }
.fv-m3 .fv-m3__label { font-weight: 500; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }

/* Lignes entreprise : pastille + nom (120 px), 4 segments (fait = vert, à venir = gris) */
.fv-m3 .fv-m3__rows { margin-top: 20px; }
.fv-m3 .fv-m3__row { display: flex; align-items: center; gap: 16px; padding: 12px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-m3 .fv-m3__name { flex: 0 0 auto; width: 120px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-m3 .fv-m3__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); }
.fv-m3 .fv-m3__bar { flex: 1 1 auto; display: flex; gap: 6px; }
.fv-m3 .fv-m3__seg { flex: 1 1 0px; height: 8px; border-radius: var(--radius-full); background: var(--bg-page); }
.fv-m3 .fv-m3__seg--done { background: var(--status-valid); }

/* ≤ 767 (D11) : padding 24/20 ; étapes en légende 2 × 2 (numéro 28 px + libellé 13/18), filet masqué ;
   noms d’entreprise sur une ligne (112 px, 13 px). */
@media (max-width: 767px) {
	.fv-m3 { padding: 24px 20px; }
	.fv-m3 .fv-m3__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
	.fv-m3 .fv-m3__line { display: none; }
	.fv-m3 .fv-m3__step { flex-direction: row; align-items: center; gap: 8px; }
	.fv-m3 .fv-m3__num { flex: none; width: 28px; height: 28px; font-size: 11px; }
	.fv-m3 .fv-m3__label { font-size: 13px; line-height: 18px; }
	.fv-m3 .fv-m3__name { width: 112px; font-size: 13px; white-space: nowrap; }
}

/* FV-M4 — mini-visuel « Planifier les interventions » (élément 01). Racine .fv-m4 (= .moe-item__vis, largeur
   portée par §1), descendants 0,2,0. Dessin fluide (positions et largeurs en %), hauteur 128. Aucune animation. */

/* Fond du Gantt : 18/20 de marge, 4 lignes de 14 px espacées de 12 */
.fv-m4 .fv-m4__chart { position: relative; padding: 18px 20px; border-radius: var(--radius-md); background: var(--bg-page); display: flex; flex-direction: column; gap: 12px; }

/* Filets verticaux de la grille (20 / 40 / 60 / 80 %) */
.fv-m4 .fv-m4__grid { position: absolute; top: 0px; bottom: 0px; width: 1px; background: var(--border-100); }
.fv-m4 .fv-m4__grid--20 { left: 20%; }
.fv-m4 .fv-m4__grid--40 { left: 40%; }
.fv-m4 .fv-m4__grid--60 { left: 60%; }
.fv-m4 .fv-m4__grid--80 { left: 80%; }

/* Lignes et barres en escalier (lot 1 · lot 1 · lot 2 · lot 4) */
.fv-m4 .fv-m4__row { position: relative; height: 14px; }
.fv-m4 .fv-m4__bar { position: absolute; height: 14px; border-radius: 4px; opacity: 0.85; }
.fv-m4 .fv-m4__bar--1 { left: 0%; width: 26%; background: var(--lot-1); }
.fv-m4 .fv-m4__bar--2 { left: 20%; width: 22%; background: var(--lot-1); }
.fv-m4 .fv-m4__bar--3 { left: 36%; width: 30%; background: var(--lot-2); }
.fv-m4 .fv-m4__bar--4 { left: 58%; width: 24%; background: var(--lot-4); }

/* Repère du jour (vermillon, 46 %) */
.fv-m4 .fv-m4__today { position: absolute; top: 0px; bottom: 0px; left: 46%; width: 1px; background: var(--action); }

/* FV-M5 — mini-visuel « Garder les actions à suivre » (élément 02). Racine .fv-m5 (= .moe-item__vis, sans style
   propre), descendants 0,2,0. Dessin fluide (barres en %), hauteur 116. Aucune animation. */

/* Encart : 3 lignes empilées */
.fv-m5 .fv-m5__card { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-page); }

/* Ligne : pastille + barre + case à cocher (poussée à droite) */
.fv-m5 .fv-m5__row { display: flex; align-items: center; gap: 12px; }
.fv-m5 .fv-m5__dot { width: 10px; height: 10px; border-radius: 50%; }
.fv-m5 .fv-m5__dot--brand { background: var(--brand-300); }
.fv-m5 .fv-m5__dot--action { background: var(--action); }
.fv-m5 .fv-m5__bar { height: 10px; border-radius: var(--radius-full); background: var(--border-100); }
.fv-m5 .fv-m5__bar--60 { width: 60%; }
.fv-m5 .fv-m5__bar--44 { width: 44%; }
.fv-m5 .fv-m5__bar--52 { width: 52%; }
.fv-m5 .fv-m5__check { margin-left: auto; box-sizing: border-box; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); }

/* FV-M6 — mini-visuel « Suivre jusqu’au règlement » (élément 03). Racine .fv-m6 (= .moe-item__vis, sans style
   propre), descendants 0,2,0. Cartouche étiré sur la largeur de l'emplacement, hauteur 120. Aucune animation. */

/* Cartouche */
.fv-m6 .fv-m6__card { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-page); }

/* Lot : en-tête (pastille de couleur + étiquette parme) puis jauge de règlement */
.fv-m6 .fv-m6__lot { display: flex; flex-direction: column; gap: 8px; }
.fv-m6 .fv-m6__head { display: flex; align-items: center; gap: 10px; }
.fv-m6 .fv-m6__swatch { width: 12px; height: 12px; border-radius: 3px; }
.fv-m6 .fv-m6__swatch--lot-1 { background: var(--lot-1); }
.fv-m6 .fv-m6__swatch--lot-2 { background: var(--lot-2); }
.fv-m6 .fv-m6__tag { height: 8px; width: 90px; border-radius: var(--radius-full); background: var(--brand-100); }

/* Jauge : piste blanche filetée, remplissage vert (≈ 62 % / ≈ 40 %) */
.fv-m6 .fv-m6__gauge { position: relative; height: 10px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-100); overflow: hidden; }
.fv-m6 .fv-m6__fill { position: absolute; left: 0px; top: 0px; bottom: 0px; background: var(--status-valid); }
.fv-m6 .fv-m6__fill--62 { width: 62%; }
.fv-m6 .fv-m6__fill--40 { width: 40%; }