/* ==========================================================================
   Œuvra — Fonctionnalités · feuille du gabarit templates/page-fonctionnalites.php (chargée après main.css).
   1. Base = handoff/design/css/pages/fonctionnalites.css, copiée telle quelle (elle ne contient aucune déclaration prioritaire).
   2. Styles inline du prototype (prototype/fonctionnalites.html) convertis en classes + compléments de production.
   3. Illustrations (un bloc commenté par illustration) : DECO-F1, FV-F1 … FV-F4 et FV-F6 … FV-F9 — fragments
      convertis et contre-vérifiés (fvdiff, 0 écart), reportés tels quels ; FV-F11 (fil 04, carrousel) et FV-F15
      (Sur le chantier), dessinés le 01/10/2026 (prototype validé par Victor, handoff/code/09). FV-F5 et FV-F10 retirés.
      Section « Tout au même endroit » (#tout) retirée le 01/10/2026 à la demande de Victor (doublon des autres sections).
      Plusieurs racines .fv-fN.c-fit__inner (0,2,0) doivent l'emporter sur .c-fit > .c-fit__inner de main.css par l'ORDRE de chargement : garder cette
      feuille après main.css (dépendance oeu-main, inc/assets.php).
   Composants partagés utilisés (main.css) : .l-section(--compact, --beige), .l-container, .l-grid--3, .l-split,
   .c-crumb (template-parts/layout/crumb.php), .c-shead, .c-tags, .c-card, .c-plan-tag, .c-fit / .fit-696x460 /
   .fit-616x620, .c-btns, .u-block, .c-cta (template-parts/layout/cta.php).
   Interactions (M10 marquee, M11 barre d'ancres, M12 fil collant, M13 schéma, carrousel de l'étape 04) : états et
   transitions ci-dessous, pilotage par assets/js/page-fonctionnalites.js (classes is-on, has-ind, is-overflow, is-end,
   is-offscreen).
   ========================================================================== */

/* ---------- 1. fonctionnalites.css du handoff ---------- */

/* ---------- Animations et états propres à la page (hérités des maquettes validées) ---------- */
@keyframes hp-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
.hp-marq { animation: hp-marquee var(--duree, 30s) linear infinite; }
.hp-marq--inv { animation-direction: reverse; }
.hp-marq-zone:hover .hp-marq { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hp-marq { animation: none; } }
@keyframes oe-flux { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.oe-flux { animation: oe-flux 3.2s linear infinite; offset-rotate: 0deg; }
.oe-flux-1 { offset-path: path("M0 248 C 60 248, 60 56, 120 56"); }
.oe-flux-2 { offset-path: path("M0 248 C 60 248, 60 184, 120 184"); animation-delay: .4s; }
.oe-flux-3 { offset-path: path("M0 248 C 60 248, 60 312, 120 312"); animation-delay: .8s; }
.oe-flux-4 { offset-path: path("M0 248 C 60 248, 60 440, 120 440"); animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .oe-flux { animation: none; opacity: 0; } }
/* Barre d’ancres fixée en bas de l'écran — même style que la navigation segmentée de la FAQ (.c-seg-nav) */
.fn-link { position: relative; z-index: 1; box-sizing: content-box; display: inline-flex; align-items: center; flex: none; gap: 6px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-full); font: 500 14px/20px var(--font-sans); color: var(--ink-900); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.fn-link:hover { background: #1e1d1b0a; }
.fn-list.has-ind .fn-link:hover:not(.is-on) { background: #1e1d1b0a; }
.fn-link svg { flex: none; color: var(--brand-ink); }
.fn-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fn-link.is-on { background: var(--brand-100); }
.fn-ind { position: absolute; z-index: 0; top: 4px; left: 0; box-sizing: border-box; height: 42px; width: 0; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--brand-100); opacity: 0; transition: transform 380ms cubic-bezier(0.34, 1.3, 0.5, 1), width 380ms cubic-bezier(0.34, 1.3, 0.5, 1), opacity 150ms linear; }
.fn-list.has-ind .fn-ind { opacity: 1; }
/* Position et largeur de l'indicateur : variables posées par page-fonctionnalites.js (lien actif : offsetLeft / offsetWidth). */
.fn-list.has-ind .fn-ind { width: var(--fn-ind-w, 0px); transform: translateX(var(--fn-ind-x, 0px)); }
.fn-list.has-ind .fn-link.is-on { background: transparent; border-color: transparent; }
#fil, #logique, #modules, #chantier, #offres-bloc { scroll-margin-top: 72px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .fn-ind, .fn-link { transition: none; } html { scroll-behavior: auto; } }
/* Couleurs forcées (Contraste élevé de Windows) : l'anneau de focus de la barre est une ombre (--shadow-focus), que le
   navigateur retire ; la règle .fn-link:focus-visible ci-dessus (outline: none) annulerait aussi le contour de repli de
   main.css. Contour rétabli, comme sur le reste du site (main.css : 2 px CanvasText, décalage 2 px ; il tient dans le
   remplissage de 4 px de la pilule défilante, sans rognage). Lien actif : bordures transparentes forcées à LinkText sur
   les 6 liens (actif indiscernable) → filets des liens inactifs à la couleur du fond, lien actif en couleurs système de
   sélection (Highlight / HighlightText, sans plaque de fond du navigateur : forced-color-adjust: none) ; l'indicateur,
   décoratif, est masqué. Aucun effet hors couleurs forcées. */
@media (forced-colors: active) {
  .fn-link:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .fn-link { border-color: Canvas; }
  .fn-nav .fn-list .fn-link.is-on { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; color: HighlightText; }
  .fn-nav .fn-list .fn-link.is-on svg { color: HighlightText; }
  .fn-ind { display: none; }
}
/* Le fil du projet : visuel collant (Desktop/Laptop) / séquence à plat (artboards, Tablette, Mobile) */
#fil { --ft-pas: 540px; }
#fil .ft-etape { min-height: var(--ft-pas); opacity: .45; transition: opacity var(--duration-slow) var(--ease-standard); }
#fil .ft-etape.is-on { opacity: 1; }
#fil .ft-num { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; color: var(--brand-ink); transition: background var(--duration-base), color var(--duration-base); }
#fil .ft-etape.is-on .ft-num { background: var(--brand-ink); color: #ffffff; }
#fil .ft-texte { transform: translateY(8px); transition: transform var(--duration-slow) var(--ease-standard); }
#fil .ft-etape.is-on .ft-texte { transform: none; }
#fil .ft-visuel { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
#fil .ft-visuel.is-on { opacity: 1; transform: none; pointer-events: auto; }
#fil .ft-inline { display: none; }
@media (prefers-reduced-motion: reduce) { #fil .ft-etape, #fil .ft-texte, #fil .ft-visuel, #fil .ft-num { transition: none; } #fil .ft-texte, #fil .ft-visuel { transform: none; } }

/* ---------- Composition et responsive ---------- */
/* Fonctionnalités — compositions propres à la page */

/* ---- Hero : texte + mur d’icônes défilant ---- */
.fn-hero { position: relative; box-sizing: border-box; height: 746px; padding: 72px 0 0; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, #e4dcf3 0%, #ece8f5 42%, #f3f2ef 72%, #f3f2ef 100%); }
/* Au moins la hauteur de l'écran (demande de Victor du 28/09/2026 : le haut de « Le fil du projet » ne doit plus
   apparaître sous le hero) ; plancher 746 / 700, au contenu sous 1024. */
.fn-hero { height: max(746px, 100vh); }
@supports (height: 100svh) { .fn-hero { height: max(746px, 100svh); } }
/* Contenu centré entre la barre de navigation (padding-top 72) et la barre d'ancres fixée en bas (--oeu-dock-bottom +
   pilule 52) ; sans JavaScript, la barre d'ancres suit le hero dans le flux : pas de réserve. */
@media (min-width: 1024px) { html.has-js .fn-hero { padding-bottom: calc(var(--oeu-dock-bottom) + 52px); } }
.fn-hero__grid { display: flex; align-items: center; justify-content: space-between; gap: 80px; }
.fn-hero__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 680px; }
.fn-hero__wall { position: relative; flex: none; width: 440px; height: 392px; }
/* ---- Barre d’ancres collante ---- */
/* <main> sans boîte (display: contents, même procédé que .c-header dans main.css) : ses sections deviennent, comme
   dans le prototype, des éléments flex de .hp-root. La barre collante est ainsi contrainte par .hp-root et non plus
   par <main> : elle reste en haut jusqu'au pied inclus, comme dans le prototype (dans <main>, elle était repoussée
   hors de l'écran en fin de page dès que le pied dépasse la hauteur de la fenêtre : -63 px mesurés à 390).
   Mesuré : géométrie de la page inchangée, repère « main » toujours exposé, lien d'évitement « Aller au contenu »
   inchangé (le Tab suivant atteint le premier lien de <main>). */
#contenu { display: contents; }
/* Fixée en bas de l'écran dès l'arrivée sur la page, une seule position (demande de Victor du 28/09/2026 ; auparavant
   collée en haut, sous la barre de navigation fixe) : --oeu-dock-gap au-dessus du bord (main.css §7 bis) ; elle sort
   par le bas quand le bas de #offres-bloc remonte à son niveau (.is-dock-off, main.js §6 bis).
   Sans JavaScript : collante en haut, sous le hero (barre de navigation non fixe dans ce cas). */
.fn-nav { position: sticky; top: 0; z-index: 40; flex: none; width: 100%; box-sizing: border-box; padding: 12px 0; background: transparent; pointer-events: none; }
html.has-js .fn-nav { position: fixed; top: auto; left: 0; right: 0; bottom: var(--oeu-dock-bottom); padding: 0; }
.fn-nav__inner { display: flex; justify-content: center; }
/* Pilule : style de la barre de navigation défilée (main.css §7 ; 28/09/2026 ; auparavant fond parme poudré, onglet
   actif blanc à filet) — fond blanc, filet --border-100, même ombre, onglet actif parme poudré --brand-100. Comme la
   navigation segmentée de la FAQ (.c-seg-nav). */
.fn-list { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-100); border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--oeu-dock-shadow); pointer-events: auto; }
/* Fondu de droite de la pilule défilante (< 1024 et mode .is-overflow) : voile blanc collé à son bord droit (28/09/2026 ;
   auparavant masque, qui effaçait aussi le fond, le filet et l'ombre de la barre posée au-dessus du contenu). Retiré en
   fin de défilement ou si tout tient (.is-end, posée en JS) ; opacité et non display, largeur défilable inchangée. */
.fn-list::after { content: ""; display: none; position: sticky; z-index: 2; right: 0; flex: none; align-self: stretch; width: 48px; margin-left: -52px; border-radius: 0 var(--radius-full) var(--radius-full) 0; background: linear-gradient(90deg, #ffffff00, var(--bg-surface) 80%); pointer-events: none; }
.fn-nav .fn-nav__inner .fn-list.is-end::after { opacity: 0; }

/* ---- Le fil du projet (comportement en ligne : visuel collant à droite, étape active au défilement) ---- */
.ft-grid { margin-top: 72px; display: flex; align-items: flex-start; gap: 64px; }
/* --ft-debut : décalage qui centre l'étape 01 sur le visuel collant, posé par page-fonctionnalites.js §2 (0 sans JS). */
.ft-etapes { position: relative; flex: none; width: 36.667%; padding-top: var(--ft-debut, 0px); }
.ft-etape { position: relative; box-sizing: border-box; scroll-margin-top: 96px; padding-left: 64px; }
.ft-rail { position: absolute; left: 17px; top: 36px; bottom: 0; width: 1px; background: var(--brand-300); }
.ft-etape:last-child .ft-rail { display: none; }
.ft-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Visuel collant centré verticalement dans la zone utile entre les barres (demande de Victor du 26/09/2026 ; auparavant
   top: 112px). Repère haut : bord bas de la barre de navigation fixe (main.css §7 : haut + décollement + 56) ; repère
   bas : bord haut de la barre d'ancres fixée en bas (28/09/2026 : écart --oeu-dock-gap + pilule 51). Plancher : 16 px
   sous le repère haut (fenêtres basses). Étape active alignée : page-fonctionnalites.js §2. */
#fil { --ft-chrome: calc(var(--oeu-nav-top) + var(--oeu-nav-float) + var(--nav-height)); --ft-dock: calc(var(--oeu-dock-gap) + 51px); --ft-visuel-h: 460px; }
.ft-sticky { position: sticky; top: max(calc(var(--ft-chrome) + 16px), calc((100vh + var(--ft-chrome) - var(--ft-dock) - var(--ft-visuel-h)) / 2)); flex: 1 1 auto; height: var(--ft-visuel-h); }
@supports (height: 100svh) {
  .ft-sticky { top: max(calc(var(--ft-chrome) + 16px), calc((100svh + var(--ft-chrome) - var(--ft-dock) - var(--ft-visuel-h)) / 2)); }
}
.ft-visuel { position: absolute; inset: 0; }
/* ---- Une logique commune : photo + schéma Descriptif → 4 usages ---- */
.fn-logique { position: relative; box-sizing: border-box; padding: 72px 64px; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; gap: 48px; background: var(--brand-100); }
.fn-logique__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-logique__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #1e1d1bad 0%, #1e1d1b73 42%, #1e1d1b1f 100%); opacity: 0.8; }
.fn-logique__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 48px; }
.fn-schema { display: flex; align-items: center; width: 100%; }
.fn-schema__src { flex: none; box-sizing: border-box; width: 39.179%; padding: 20px 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-100); background: var(--bg-surface); }
.fn-schema__links { flex: none; width: 120px; height: 500px; }
.fn-schema__outs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fn-schema__out { box-sizing: border-box; flex: 1 1 0; padding: 18px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border-100); background: var(--bg-surface); display: flex; flex-direction: column; gap: 6px; }
.fn-schema__node { display: none; }
/* ---- Avant le projet : trois modules ---- */
.fn-mods { margin-top: var(--head-gap); }
.fn-mod { box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); }
.fn-mod__vis { max-width: none; border-radius: var(--radius-lg); overflow: hidden; }
.fn-mod__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* ---- Sur le chantier (application sur tablette et mobile) ---- */
.fn-pwa { align-items: center; }
.fn-pwa__text { flex: none; width: 43.333%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fn-pwa__vis { flex: none; width: 51.333%; }
.fn-checks { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
/* ---- Offres (section de continuation) ---- */
.fn-offres { padding: 32px 0 var(--section-y-compact); }
.fn-offres__box { box-sizing: border-box; display: flex; align-items: center; gap: 80px; padding: 72px 80px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); overflow: hidden; }
.fn-offres__text { flex: 1 1 auto; min-width: 0; }
.fn-offres__actions { flex: none; align-self: flex-end; }
.fn-offres__btns { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (max-width: 1439px) {
.fn-hero { height: max(700px, 100vh); }
@supports (height: 100svh) { .fn-hero { height: max(700px, 100svh); } }
.fn-hero__grid { gap: 48px; }
.fn-hero__wall { width: 400px; height: 360px; }
.ft-grid { gap: 48px; }
.fn-logique { padding: 56px 48px; }
.fn-schema__links { width: 96px; }
.fn-mod { padding: 24px; }
.fn-offres__box { gap: 56px; padding: 56px 56px; }
/* barre d’ancres : si la liste ne tient pas dans le conteneur (≈ 1024–1135 px), défilement horizontal comme en Tablette
     (classe posée en JS quand la liste déborde ; sans JS, la pilule déborde symétriquement dans les marges) */
  .fn-nav__inner.is-overflow .fn-list { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .fn-nav__inner.is-overflow .fn-list::after { display: block; }
}
@media (max-width: 1023px) {
.fn-hero { height: auto; padding: var(--hero-top) 0 var(--hero-bottom); }
.fn-hero__grid { flex-direction: column; align-items: stretch; gap: 40px; }
.fn-hero__text { max-width: 600px; }
.fn-hero__wall { width: 100%; height: 320px; }
.fn-nav { padding: 10px 0; }
/* la pilule occupe la largeur du conteneur et ses onglets défilent à l’intérieur, avec fondu à droite (comme la FAQ en Mobile) */
  .fn-list { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .fn-list::after { display: block; }
/* le fil : liste verticale, chaque étape suivie de son visuel */
  #fil .ft-grid { display: block; margin-top: 56px; }
#fil .ft-etapes { width: 100%; padding-top: 0; }
#fil .ft-etape { display: flex; flex-direction: column; align-items: stretch; gap: 32px; min-height: 0; opacity: 1; padding-bottom: 56px; }
#fil .ft-etape:last-child { padding-bottom: 0; }
#fil .ft-etape .ft-num, #fil .ft-etape.is-on .ft-num { background: var(--brand-100); color: var(--brand-ink); }
#fil .ft-texte { width: auto; transform: none; }
#fil .ft-inline { display: block; width: 100%; }
#fil .ft-sticky { display: none; }
/* logique : source au-dessus, quatre usages en grille 2 × 2 */
  .fn-logique { padding: 48px 32px; gap: 40px; }
.fn-logique__body { gap: 40px; }
.fn-schema { flex-direction: column; align-items: stretch; gap: 0; }
.fn-schema__src { width: auto; }
.fn-schema__links { display: none; }
/* arborescence : tronc parme sous la source, une branche et une pastille de jonction par usage (demande du 24/09) */
  .fn-schema__outs { display: flex; flex-direction: column; gap: 12px; padding: 28px 0 0 40px; }
.fn-schema__out { position: relative; flex: none; }
.fn-schema__out::before { content: ""; position: absolute; left: -24px; top: -12px; bottom: 0; width: 1.5px; background: var(--brand-100); }
.fn-schema__out:first-child::before { top: -28px; }
.fn-schema__out:last-child::before { bottom: 50%; }
.fn-schema__out::after { content: ""; position: absolute; left: -24px; top: 50%; width: 24px; height: 1.5px; margin-top: -0.75px; background: var(--brand-100); }
.fn-schema__node { display: block; position: absolute; z-index: 1; left: -28.25px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lot-1); animation: fnNode 3.2s ease-in-out infinite; }
.fn-schema__out:nth-child(2) .fn-schema__node { animation-delay: 0.4s; }
.fn-schema__out:nth-child(3) .fn-schema__node { animation-delay: 0.8s; }
.fn-schema__out:nth-child(4) .fn-schema__node { animation-delay: 1.2s; }
.fn-offres__box { flex-direction: column; align-items: flex-start; gap: 32px; padding: 48px 40px; }
.fn-offres__actions { align-self: stretch; }
.fn-offres__btns { flex-direction: row; align-items: center; }
}
@media (max-width: 767px) {
.fn-hero__wall { height: 260px; margin: 0 calc(-1 * var(--gutter)); width: auto; }
/* boutons pleine largeur comme sur les autres pages (demande de Victor du 28/09/2026) : le bloc d’actions s’étire dans
   la colonne alignée à gauche, .c-btns (main.css, Mobile) prend alors toute la largeur */
.fn-hero__actions { align-self: stretch; }
.fn-nav { padding: 8px 0; }
.fn-nav .fn-link { height: 36px; padding: 0 14px; font-size: 13px; }
.fn-nav .fn-ind { height: 38px; }
#fil .ft-grid { margin-top: 40px; }
#fil .ft-etape { padding-left: 52px; gap: 24px; padding-bottom: 48px; }
#fil .ft-inline { margin-left: -52px; width: calc(100% + 52px); }
#fil .ft-etape .t-title-xl { font-size: var(--fs-title-xl); }
.fn-logique { padding: 40px 20px; border-radius: var(--radius-xl); }
.fn-schema__src { padding: 16px 16px; }
.fn-schema__outs { padding-left: 36px; }
.fn-schema__out::before, .fn-schema__out::after { left: -20px; }
.fn-schema__out::after { width: 20px; }
.fn-schema__node { left: -24.25px; }
.fn-schema__out { padding: 16px 18px; }
.fn-mod { padding: 16px 16px 24px; gap: 20px; }
.fn-mod__text { padding: 0 4px; }
.fn-offres { padding-top: 24px; }
.fn-offres__box { padding: 32px 24px; gap: 28px; }
.fn-offres__btns { flex-direction: column; align-items: stretch; }
}


/* Pastilles de jonction de l’arborescence (Tablette/Mobile) : pulsation en séquence, même rythme que les points du desktop (3,2 s, décalages 0 / 0,4 / 0,8 / 1,2 s) */
@keyframes fnNode { 0%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 0 #2fa3e866; } 20% { transform: scale(1.3); box-shadow: 0 0 0 6px #2fa3e800; } }
@media (prefers-reduced-motion: reduce) {
.fn-schema__node { animation: none; }
}

/* ---------- 2. Styles inline du prototype convertis en classes + compléments de production ---------- */

/* Hero : fil d'Ariane DANS la colonne texte (identiques.md §4) — l'écart vient du gap 24 de .fn-hero__text,
   pas de la marge du fil des autres héros (.c-crumb-wrap, 40 / 28). */
.fn-hero__text > .c-crumb-wrap { margin-bottom: 0; }
.fn-hero__head { display: flex; flex-direction: column; gap: 18px; }
.fn-hero__lead { max-width: 600px; }
.fn-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Boutons secondaires blancs à filet (« Voir les tarifs », « Voir le comparatif ») : dans le prototype, style inline
   « background: var(--bg-surface); border-color: var(--border-100); color: var(--ink-900) » = bouton secondaire .c-btn-soft
   (design-system.md §8) = état de repos du .oe-btn--tertiary du DS, déjà donné par la classe : aucune règle. Le style
   inline figeait aussi le survol (effet de bord) ; survol du DS rétabli (filet --border-strong seul,
   fond blanc, 150 ms), comme les boutons secondaires de l'Accueil, de la FAQ, de Pour qui ? et de Tarifs (clôture
   Phase D). Écart voulu vs prototype : survol seulement. */
/* Mur d'icônes (M10) : pause hors écran [Recommandé, motion-spec §1.5] — classe posée par page-fonctionnalites.js. */
.fn-hero__wall.is-offscreen .hp-marq { animation-play-state: paused; }

/* Le fil du projet */
.fn-fil__head { max-width: 800px; }
.fn-fil__title { max-width: 800px; }
.fn-fil__lead { max-width: 640px; }
.ft-titre { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.ft-desc { max-width: 360px; }
/* Étiquette « Studio+ » de l'étape 02 : pilule .c-plan-tag aux mesures du prototype de cette page (28 px, 0 12, 11/16). */
.ft-plan-tag { margin: 0; box-sizing: border-box; height: 28px; padding: 0 12px; line-height: 16px; }
/* Sans JavaScript (html sans .has-js) : aucune étape n'est pilotée au défilement — texte des étapes à pleine opacité. */
html:not(.has-js) #fil .ft-etape { opacity: 1; }
html:not(.has-js) #fil .ft-texte { transform: none; }
/* Sans JavaScript, Desktop/Laptop : rien ne pilote le visuel collant (seul FV-F1 serait visible). Le fil est montré
   « déroulé », comme dans les artboards (D08 ; responsive.md §3.2 : texte + visuel 696 × 460, 80 px entre étapes) :
   chaque étape suivie à droite de son visuel en ligne (.ft-inline, même partial), colonne collante masquée (ses
   visuels sortent aussi de l'arbre d'accessibilité), numéros au même état. Requête : complément exact de
   (max-width: 1023px), comme page-fonctionnalites.js — une largeur fractionnaire entre 1023 et 1024 px (zoom, mise à
   l'échelle de l'écran) reçoit la mise en page Desktop/Laptop de la feuille, donc aussi ce repli. */
@media not all and (max-width: 1023px) {
  html:not(.has-js) #fil .ft-grid { display: block; }
  html:not(.has-js) #fil .ft-sticky { display: none; }
  html:not(.has-js) #fil .ft-etapes { width: auto; }
  html:not(.has-js) #fil .ft-etape { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 696px); align-items: start; column-gap: 64px; min-height: 0; padding-bottom: 80px; }
  html:not(.has-js) #fil .ft-etape:last-child { padding-bottom: 0; }
  html:not(.has-js) #fil .ft-etape.is-on .ft-num { background: var(--brand-100); color: var(--brand-ink); }
  html:not(.has-js) #fil .ft-inline { display: block; }
  @media (max-width: 1439px) {
    html:not(.has-js) #fil .ft-etape { column-gap: 48px; }
  }
}

/* Le fil du projet · carrousel de l'étape 04 « Suivre le chantier » (FV-F11, page-fonctionnalites.js §5).
   Deux exemplaires, comme tous les visuels du fil : collant ≥ 1024 (onglets posés sur l'illustration, en haut à
   gauche) et en ligne < 1024 (onglets SOUS l'illustration, hors de la mise à l'échelle : cibles tactiles de 40 px).
   Avance à la fin de la jauge de l'onglet actif (animationend, 6 s) ; jauge en pause au survol à la souris, au focus
   clavier, hors écran et tant que l'étape 04 n'est pas l'étape active. Mouvement réduit : pas d'avance automatique,
   jauge pleine, changement d'écran au clic ou aux flèches. */
.ft-car__nav { display: flex; gap: 4px; width: max-content; max-width: 100%; box-sizing: border-box; padding: 4px; border-radius: var(--radius-full); }
.ft-car__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: transparent; font: 600 13px/18px var(--font-sans); color: var(--ink-500); white-space: nowrap; cursor: pointer; overflow: hidden; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ft-car__tab:hover { color: var(--ink-900); }
.ft-car__tab[aria-selected="true"] { background: var(--bg-surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.ft-car__tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Barre sans fond ; seul l'onglet actif est marqué (pastille blanche), sans trait ni défilement automatique (Victor, 01/10/2026). */
/* Sans JavaScript : premier écran seul, pas d'onglets (rien ne les pilote). */
html:not(.has-js) #fil .ft-car__nav { display: none; }
.ft-visuel .ft-car__nav { position: absolute; z-index: 2; left: 40px; top: 18px; }
#fil .ft-car__nav--inline { display: none; }
@media (max-width: 1023px) {
  #fil .ft-car__nav--inline { display: flex; align-self: center; margin-top: -12px; }
  #fil .ft-car__nav--inline .ft-car__tab { height: 40px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 767px) {
  #fil .ft-car__nav--inline { align-self: stretch; margin-left: -52px; width: calc(100% + 52px); max-width: none; }
  #fil .ft-car__nav--inline .ft-car__tab { flex: 1 1 auto; padding: 0 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-car__tab { transition: none; }
}

/* Une logique commune : en-tête blanc sur la photo */
.fn-logique__img { object-position: 50% 60%; }
.fn-logique__head .fn-logique__kicker { color: #ffffff; }
.fn-logique__title { max-width: 1000px; color: #ffffff; }
.fn-logique__lead { max-width: 680px; color: rgba(255, 255, 255, 0.88); }

/* Avant le projet */
.fn-modules__head { max-width: 760px; }
.fn-modules__title { max-width: 760px; }
.fn-modules__lead { max-width: 640px; }
.fn-mod__desc { max-width: 400px; }
/* Repli .c-fit (html.oeu-fit-js, main.css 0,2,1) : garder le rognage à l'arrondi lg du cadre du visuel. */
html.oeu-fit-js .fn-mod__vis { overflow: hidden; }
/* Carte à image (Repeater ACF, visuel « Image ») : même format que les illustrations FV-F7…F9, image recadrée. */
.fn-mod__vis--img { aspect-ratio: 696 / 460; background: var(--bg-page); }
.fn-mod__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Carrousel des modules (demande du 25/09 : en 3 colonnes les visuels FV-F7…F9 tombaient à ≈ 0,47).
   Piste .fn-mods hors .l-container, pleine largeur de la section : ses marges internes (= marges du conteneur,
   même formule que .l-container) alignent la 1re carte sur le texte ; les pourcentages des cartes se rapportent à la
   boîte de contenu de la piste = largeur du conteneur. Desktop/Laptop : 1 carte de la largeur du conteneur, en
   deux colonnes (visuel jusqu'à 696 px, échelle 1 à 1440 | texte), les voisines dépassent dans les marges (amorces) ;
   Tablette : 1 carte verticale + amorce ; Mobile : idem, amorce plus courte (demande du 25/09 : un seul visuel).
   Défilement natif avec aimantation (scroll-snap, bord gauche du conteneur) : doigt, pavé tactile, Maj + molette,
   clavier (piste focalisable) ; flèches et boucle en JS (§4 : cartes dupliquées de part et d'autre, d'où une amorce
   aussi à gauche). Barre de défilement masquée : les flèches et l'amorce la
   remplacent. */
.fn-modules__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.fn-mods__nav { flex: none; display: flex; gap: 12px; }
.fn-mods__nav[hidden] { display: none; }
.fn-mods__btn { width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-full); color: var(--ink-900); }
.fn-mods__btn--prev .fn-mods__arrow { transform: scaleX(-1); }
.fn-mods { --mods-side: max(var(--gutter), (100% - var(--container)) / 2); --mods-card: 100%; position: relative; box-sizing: border-box; display: flex; align-items: stretch; gap: var(--grid-gap); padding: 0 var(--mods-side) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--mods-side); scrollbar-width: none; outline: none; }
.fn-mods::-webkit-scrollbar { display: none; }
.fn-mods:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-ink); }
.fn-mods > .fn-mod { flex: 0 0 var(--mods-card); scroll-snap-align: start; }
@media not all and (max-width: 1023px) {
	.fn-mods > .fn-mod { display: grid; grid-template-columns: minmax(0, 696px) minmax(280px, 1fr); align-items: center; column-gap: 56px; }
	.fn-mods > .fn-mod .fn-mod__vis { width: 100%; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
	.fn-mods > .fn-mod { column-gap: 40px; }
}
/* Swipe à la souris (JS §4) : main ouverte / fermée, pas de sélection de texte, aimantation coupée pendant le glisser. */
html.has-js .fn-mods { cursor: grab; }
.fn-mods.is-dragging { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 1023px) {
	.fn-modules__top { flex-wrap: wrap; row-gap: 24px; }
	.fn-mods { --mods-card: calc(100% - 96px); }
}
@media (max-width: 767px) {
	.fn-mods { --mods-card: calc(100% - 24px); }
	.fn-mods__btn { width: var(--control-md); height: var(--control-md); }
}

/* Sur le chantier (le gap 5,333 % cède sous 1024 au gap de .l-split de main.css, comme dans le prototype) */
.fn-pwa { gap: 5.333%; }
.fn-pwa__title { max-width: 520px; }
.fn-pwa__lead { max-width: 500px; }
.fn-check { display: inline-flex; align-items: center; gap: 12px; }
.fn-check__icon { flex: 0 0 auto; display: grid; place-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand-100); }
.fn-check__label { font-weight: 600; font-size: 17px; line-height: 24px; font-family: var(--font-sans); color: var(--ink-900); }
/* Sous 1024 : empilement du split écrit ici avec les valeurs de .l-split dans main.css. Les !important hérités de
   site.css (passation §10) y ont été retirés à la clôture de la Phase D : cette règle porte donc l'empilement (sinon
   les largeurs 43,333 % / 51,333 %, le gap 5,333 % et align-items: center de la page reprendraient la main) ; rendu
   inchangé (pagediff). Le cadre .c-fit du visuel prend toute la largeur (dessin 616 × 460 calé à gauche), comme dans
   le prototype. */
@media (max-width: 1023px) {
	.fn-pwa { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--split-gap); }
	.fn-pwa__text, .fn-pwa__vis { width: auto; max-width: 100%; flex: none; }
	/* Empilé : FV-F15 reprend sa hauteur compacte (dessin 616 × 460), la hauteur de 620 ne servant qu'à l'aligner sur
	   la colonne de texte voisine. */
	.fn-pwa__vis { --fit-h: 460px; --fit-ratio: 616 / 460; }
}

/* Sur le chantier : rangée « Fonctionne sur » (pictogramme et nom de chaque appareil).
   Split existant (.l-split.fn-pwa : texte 43,333 %, illustration FV-F15 616 × 620, 616 × 460 empilée). iPhone et iPad : pictogramme tablette
   et téléphone (Apple n'autorise pas son logo) ; Android : icône du robot (décision de Victor du 01/10/2026). */
.fn-compat { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.fn-compat__label { margin: 0; font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fn-compat__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.fn-compat__item { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; padding: 12px 16px 12px 12px; border: 1px solid var(--border-100); border-radius: var(--radius-md); background: var(--bg-surface); }
.fn-compat__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--brand-100); color: var(--brand-ink); }
.fn-compat__text { display: flex; flex-direction: column; gap: 1px; }
.fn-compat__name { font: 600 15px/20px var(--font-sans); color: var(--ink-900); }
.fn-compat__how { font: 400 13px/18px var(--font-sans); color: var(--ink-500); }


/* Offres */
.fn-offres__title { max-width: 760px; }
.fn-offres__lead { max-width: 620px; }

/* Schéma FV-F6 (M13) : pause hors écran [Recommandé, motion-spec §1.5] — classe posée par page-fonctionnalites.js. */
.fn-schema.is-offscreen .oe-flux, .fn-schema.is-offscreen .fn-schema__node { animation-play-state: paused; }
/* Schéma FV-F6 (M13) : sans offset-path (navigateurs anciens), les points resteraient au coin haut gauche des
   liaisons — on les retire (liaisons seules, comme en mouvement réduit). */
@supports not (offset-path: path("M0 0 L1 1")) {
	.oe-flux { display: none; }
}

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

/* DECO-F1 — Fonctionnalités · mur d’icônes du hero (décor) : styles du dessin, convertis des styles inline du prototype.
   Partial : template-parts/visuals/deco-f1-mur-icones.php. Racine .deco-f1 (0,1,0), descendants 0,2,0.
   Restent dans la CSS de page : dimensions de la racine (.fn-hero__wall, 440 × 392 → 400 × 360 → 100 % × 320 → bord à bord × 260),
   animation M10 (keyframes hp-marquee, .hp-marq, .hp-marq--inv, pause au survol .hp-marq-zone:hover, mouvement réduit).
   Aucune surcharge responsive : les couches internes suivent la boîte de la racine (inset 0, rangées centrées).
   Seul ajout au style inline : -webkit-mask-image (même valeur, Safari < 15.4 ; alias de mask-image dans Chrome). */
.deco-f1 .deco-f1__mask { position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: center; gap: 24px; overflow: hidden; -webkit-mask-image: radial-gradient(52% 64%, rgb(0, 0, 0) 18%, transparent 96%); mask-image: radial-gradient(52% 64%, rgb(0, 0, 0) 18%, transparent 96%); }
/* Rangées (M10) : --duree est lue par la règle .hp-marq de la CSS de page (hp-marquee var(--duree, 30s) linear infinite). */
.deco-f1 .deco-f1__row { display: flex; gap: 16px; width: max-content; }
.deco-f1 .deco-f1__row--1 { --duree: 34s; }
.deco-f1 .deco-f1__row--2 { --duree: 40s; }
.deco-f1 .deco-f1__row--3 { --duree: 37s; }
.deco-f1 .deco-f1__group { display: flex; gap: 16px; }
.deco-f1 .deco-f1__tile { flex: 0 0 auto; box-sizing: border-box; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); 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); color: var(--brand-ink); }
.deco-f1 .deco-f1__icon { display: block; }
/* Tuile Œ fixe au centre, au-dessus des rangées */
.deco-f1 .deco-f1__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-sizing: border-box; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--brand-100); border-width: 4px; border-style: solid; border-top-color: var(--bg-surface); border-right-color: var(--bg-surface); border-bottom-color: var(--bg-surface); border-left-color: var(--bg-surface); }
.deco-f1 .deco-f1__logo { display: block; width: 52px; height: 52px; }

/* FV-F1 — Fonctionnalités · fil 01 « Structurer » : styles du dessin, convertis des styles inline du prototype.
   Partial : template-parts/visuals/fv-f1-fil-structurer.php — même balisage dans .ft-inline.c-fit.fit-696x460 (< 1024)
   et dans .ft-visuel[data-ftv="1"] (≥ 1024). Racine 0,1,0, descendants 0,2,0, aucune déclaration prioritaire.
   Pas d'animation interne (M12 = bascule du visuel collant, portée par .ft-visuel dans la CSS de page). */
.fv-f1 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
/* Contexte .ft-inline.c-fit (< 1024) : racine positionnée par .c-fit > .c-fit__inner (main.css, position absolue),
   le cadre prend la hauteur du dessin réduit. Écart voulu vs prototype et masters Tablette/Mobile (demande de Victor
   du 28/09/2026) : leur « position: relative » en ligne gardait le cadre à 460 px de haut sous 696 px de large
   (229 px de vide sous chaque visuel du fil à 390). Même traitement pour FV-F2 … FV-F4 et FV-F11. */
.fv-f1 .fv-f1__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f1 .fv-f1__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f1 .fv-f1__tab { font-size: 12px; white-space: nowrap; }
.fv-f1 .fv-f1__body { box-sizing: border-box; height: 296px; padding: 14px 18px 16px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 0px; }
.fv-f1 .fv-f1__view { margin: 0px 0px 10px; align-self: flex-start; }
.fv-f1 .fv-f1__head { display: flex; align-items: center; gap: 10px; padding: 0px 0px 8px; }
.fv-f1 .fv-f1__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f1 .fv-f1__end { margin-left: auto; }
.fv-f1 .fv-f1__lot { display: flex; align-items: center; gap: 10px; padding: 9px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-f1 .fv-f1__lot-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--lot-1); }
.fv-f1 .fv-f1__lot-code { font-weight: 600; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f1 .fv-f1__lot-name { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); letter-spacing: 0.04em; }
.fv-f1 .fv-f1__lot-amount { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f1 .fv-f1__sublot { display: flex; align-items: center; gap: 10px; padding: 8px 0px 8px 22px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-f1 .fv-f1__code { font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f1 .fv-f1__sublot-name { font-weight: 600; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-900); letter-spacing: 0.04em; }
.fv-f1 .fv-f1__sublot-count { font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f1 .fv-f1__task { margin: 6px 0px 0px 22px; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-page); }
.fv-f1 .fv-f1__task-head { display: flex; align-items: center; gap: 10px; padding: 0px; }
.fv-f1 .fv-f1__task-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 4px; background: var(--action); }
.fv-f1 .fv-f1__task-name { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f1 .fv-f1__qty { display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-full); background: var(--bg-surface); font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-700); white-space: nowrap; }
.fv-f1 .fv-f1__checklist { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.fv-f1 .fv-f1__check { display: flex; align-items: center; gap: 9px; }
.fv-f1 .fv-f1__box { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--action); display: inline-flex; align-items: center; justify-content: center; }
.fv-f1 .fv-f1__box-empty { flex: 0 0 auto; box-sizing: border-box; width: 14px; height: 14px; border-radius: 4px; border-width: 1.5px; border-style: solid; border-top-color: var(--border-strong); border-right-color: var(--border-strong); border-bottom-color: var(--border-strong); border-left-color: var(--border-strong); }
.fv-f1 .fv-f1__check-label { font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f1 .fv-f1__check-label--todo { color: var(--ink-900); }

/* FV-F2 — Fonctionnalités · fil 02 « Consulter » (écran DCE) : styles du dessin, convertis des styles inline du
   prototype (partial template-parts/visuals/fv-f2-fil-consulter.php, fiche
   handoff/design/ui-feature-illustrations/FV-F2-fil-consulter.md). Dessin 696 × 460, un seul partial pour les deux
   emplacements du fil : en ligne < 1024 (enveloppe .ft-inline.c-fit.fit-696x460, mise à l'échelle par main.css) et
   collant ≥ 1024 (enveloppe .ft-visuel[data-ftv="2"], bascule M12 portée par la CSS de page). Aucune surcharge
   responsive propre ; aucune animation interne (fiche : intention « À valider »).
   Racine .fv-f2 (0,1,0), descendants .fv-f2 .fv-f2__x (0,2,0), sans !important.
   Dans .c-fit, racine en position absolue (main.css) : cadre à la hauteur du dessin réduit (voir FV-F1). */
.fv-f2 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f2 .fv-f2__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f2 .fv-f2__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f2 .fv-f2__tab { font-size: 12px; white-space: nowrap; }
.fv-f2 .fv-f2__panel { box-sizing: border-box; height: 296px; padding: 16px 18px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 0px; }
.fv-f2 .fv-f2__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f2 .fv-f2__deadline { display: flex; align-items: center; gap: 10px; padding: 9px 0px; }
.fv-f2 .fv-f2__deadline--ruled { border-top: 1px solid var(--border-100); }
.fv-f2 .fv-f2__deadline-label { font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f2 .fv-f2__deadline-value { margin-left: auto; }
.fv-f2 .fv-f2__date { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f2 .fv-f2__company { margin-top: 14px; box-sizing: border-box; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-100); background: var(--bg-page); }
.fv-f2 .fv-f2__company-head { display: flex; align-items: center; gap: 10px; padding: 0px; }
.fv-f2 .fv-f2__avatar { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-100); }
.fv-f2 .fv-f2__company-name { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f2 .fv-f2__company-status { margin-left: auto; }
.fv-f2 .fv-f2__badge { display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-full); background: var(--status-valid-tint); font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--status-valid-ink); white-space: nowrap; }
.fv-f2 .fv-f2__visit { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.fv-f2 .fv-f2__visit-date { font-weight: 500; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f2 .fv-f2__lots { margin-top: 14px; display: flex; gap: 8px; }
.fv-f2 .fv-f2__lot { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-100); background: var(--bg-surface); }
.fv-f2 .fv-f2__lot-swatch { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px; }
.fv-f2 .fv-f2__lot-swatch--lot-1 { background: var(--lot-1); }
.fv-f2 .fv-f2__lot-swatch--lot-2 { background: var(--lot-2); }
.fv-f2 .fv-f2__lot-swatch--lot-3 { background: var(--lot-3); }
.fv-f2 .fv-f2__lot-name { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-700); }

/* FV-F3 — Fonctionnalités · fil 03 « Planifier » (template-parts/visuals/fv-f3-fil-planifier.php, fiche
   handoff/design/ui-feature-illustrations/FV-F3-fil-planifier.md) : styles du dessin (696 × 460), convertis des styles
   inline du prototype. Racine .fv-f3 (0,1,0), descendants .fv-f3 .fv-f3__x (0,2,0), sans !important.
   Un seul partial pour les deux emplacements du fil : .ft-inline.c-fit.fit-696x460 (< 1024, mis à l'échelle par
   .c-fit > .c-fit__inner, main.css) et .ft-visuel[data-ftv="3"] (≥ 1024, collant ; .c-fit__inner n'y a aucun effet,
   la règle de main.css utilisant le combinateur enfant). Aucune surcharge responsive propre ; aucune animation interne
   (fiche : intention « à valider » ; la bascule du visuel collant M12 est portée par la page).
   Dans .c-fit, racine en position absolue (main.css) : cadre à la hauteur du dessin réduit (voir FV-F1). */
.fv-f3 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f3 .fv-f3__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f3 .fv-f3__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f3 .fv-f3__tab { font-size: 12px; white-space: nowrap; }
.fv-f3 .fv-f3__body { box-sizing: border-box; height: 296px; padding: 16px 18px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 0px; }
/* période du projet : dates, durée, libellé de l'écran */
.fv-f3 .fv-f3__period { display: flex; align-items: center; gap: 10px; padding: 0px 0px 10px; }
.fv-f3 .fv-f3__dates { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f3 .fv-f3__weeks { display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-full); background: var(--bg-page); font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-700); white-space: nowrap; }
.fv-f3 .fv-f3__screen { margin-left: auto; }
.fv-f3 .fv-f3__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
/* échelle de mois */
.fv-f3 .fv-f3__months { display: flex; padding-left: 188px; }
.fv-f3 .fv-f3__month { flex: 1 1 0px; text-align: center; }
/* Gantt des sous-lots : libellé (pastille, code, nom, durée) + piste (filets de mois, barre) */
.fv-f3 .fv-f3__rows { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fv-f3 .fv-f3__row { display: flex; align-items: center; gap: 10px; height: 26px; }
.fv-f3 .fv-f3__label { flex: 0 0 auto; width: 178px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fv-f3 .fv-f3__swatch { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }
.fv-f3 .fv-f3__swatch--lot-4 { background: var(--lot-4); }
.fv-f3 .fv-f3__swatch--lot-5 { background: var(--lot-5); }
.fv-f3 .fv-f3__swatch--lot-6 { background: var(--lot-6); }
.fv-f3 .fv-f3__code { font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f3 .fv-f3__name { font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f3 .fv-f3__duration { margin-left: auto; }
.fv-f3 .fv-f3__duration-value { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f3 .fv-f3__track { position: relative; flex: 1 1 auto; height: 16px; }
.fv-f3 .fv-f3__gridline { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--border-100); }
.fv-f3 .fv-f3__gridline--1 { left: 25%; }
.fv-f3 .fv-f3__gridline--2 { left: 50%; }
.fv-f3 .fv-f3__gridline--3 { left: 75%; }
.fv-f3 .fv-f3__bar { position: absolute; top: 3px; height: 10px; border-radius: var(--radius-full); opacity: 0.9; }
.fv-f3 .fv-f3__bar--4a { left: 4%; width: 22%; background: var(--lot-4); }
.fv-f3 .fv-f3__bar--4b { left: 24%; width: 15%; background: var(--lot-4); }
.fv-f3 .fv-f3__bar--5a { left: 34%; width: 18%; background: var(--lot-5); }
.fv-f3 .fv-f3__bar--6a { left: 52%; width: 15%; background: var(--lot-6); }
.fv-f3 .fv-f3__bar--6c { left: 70%; width: 15%; background: var(--lot-6); }

/* ==========================================================================
   FV-F4 — Fonctionnalités · fil 04 « Suivre » (écran Situation) : styles du dessin, convertis des styles inline
   du prototype (fonctionnalites.html, deux occurrences identiques au c-fit__inner près).
   Partial : template-parts/visuals/fv-f4-fil-suivre.php — fiche handoff/design/ui-feature-illustrations/FV-F4-fil-suivre.md.
   Dessin fixe 696 × 460, un seul partial pour les deux emplacements du fil : en ligne < 1024 (enveloppe
   .ft-inline.c-fit.fit-696x460, mise à l'échelle par .c-fit > .c-fit__inner de main.css) et collant ≥ 1024
   (enveloppe .ft-visuel[data-ftv="4"], bascule M12 portée par la CSS de page). Aucune surcharge responsive propre ;
   aucune animation interne (fiche : intention « à valider avec prudence », non retenue).
   Racine .fv-f4 (0,1,0), descendants .fv-f4 .fv-f4__x (0,2,0), sans !important.
   Dans .c-fit, racine en position absolue (main.css) : cadre à la hauteur du dessin réduit (voir FV-F1).
   ========================================================================== */
.fv-f4 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f4 .fv-f4__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f4 .fv-f4__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f4 .fv-f4__tab { font-size: 12px; white-space: nowrap; }
.fv-f4 .fv-f4__body { box-sizing: border-box; height: 296px; padding: 16px 18px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 0px; }
.fv-f4 .fv-f4__kpis { display: flex; gap: 10px; }
.fv-f4 .fv-f4__kpi { flex: 1 1 0px; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-page); display: flex; flex-direction: column; gap: 4px; }
.fv-f4 .fv-f4__label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f4 .fv-f4__kpi-value { font-weight: 600; font-size: 16px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f4 .fv-f4__kpi-value--due { color: var(--action-ink); }
.fv-f4 .fv-f4__companies { margin-top: 14px; }
.fv-f4 .fv-f4__companies-head { display: flex; align-items: center; gap: 10px; padding: 0px 0px 4px; }
.fv-f4 .fv-f4__head-end { margin-left: auto; }
.fv-f4 .fv-f4__company { display: flex; align-items: center; gap: 10px; padding: 11px 0px; border-top: 1px solid var(--border-100); }
.fv-f4 .fv-f4__swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.fv-f4 .fv-f4__swatch--lot-1 { background: var(--lot-1); }
.fv-f4 .fv-f4__swatch--lot-2 { background: var(--lot-2); }
.fv-f4 .fv-f4__company-id { display: flex; flex-direction: column; gap: 2px; }
.fv-f4 .fv-f4__company-name { font-weight: 600; font-size: 12px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f4 .fv-f4__trade { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; }
.fv-f4 .fv-f4__due { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fv-f4 .fv-f4__badge { display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-full); background: var(--brand-100); font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--brand-ink); white-space: nowrap; }
.fv-f4 .fv-f4__amount { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f4 .fv-f4__progress { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.fv-f4 .fv-f4__gauge { flex: 1 1 auto; height: 6px; border-radius: var(--radius-full); background: var(--bg-page); }
.fv-f4 .fv-f4__percent { font-weight: 600; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-700); }

/* ==========================================================================
   FV-F11 — Fonctionnalités · fil 04 « Suivre le chantier » : trois écrans superposés que le carrousel de l'étape
   fait défiler (sur place : réserve dictée sur téléphone, hors connexion ; compte rendu : aperçu PDF et réglages
   d'export ; réception : réserves levées, comptes rendus, PV par entreprise).
   Partial : template-parts/visuals/fv-f11-fil-suivre-chantier.php — dessiné le 01/10/2026 d'après les écrans de
   l'application (rapport handoff/code/09). Dessin fixe 696 × 460, un seul partial pour les deux emplacements du fil
   (.ft-inline.c-fit.fit-696x460 < 1024, .ft-visuel[data-ftv="4"] ≥ 1024) ; écrans dans la zone y 70 → 444 (le haut
   reste libre pour les onglets posés sur le visuel collant). Écran actif : .fv-f11__slide.is-on (fondu 450 ms).
   Mouvements internes (point « dictée », onde, curseur) coupés en mouvement réduit.
   Racine .fv-f11 (0,1,0), descendants .fv-f11 .fv-f11__x (0,2,0) — préfixes p- (sur place), c- (compte rendu),
   r- (réception) — aucun style en ligne, aucune déclaration prioritaire.
   ========================================================================== */
.fv-f11 .fv-f11__label { font: 500 10px/14px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-f11 .fv-f11__swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.fv-f11 .fv-f11__swatch--1 { background: var(--lot-1); } .fv-f11 .fv-f11__swatch--2 { background: var(--lot-2); } .fv-f11 .fv-f11__swatch--3 { background: var(--lot-3); }
.fv-f11 .fv-f11__pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--radius-full); font: 600 10px/14px var(--font-sans); white-space: nowrap; }
.fv-f11 .fv-f11__pill--progress { background: var(--status-progress-tint); color: var(--status-progress-ink); }
.fv-f11 .fv-f11__pill--valid { background: var(--status-valid-tint); color: var(--status-valid-ink); }
.fv-f11 .fv-f11__pill--pending { background: var(--bg-page); color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--border-100); }
.fv-f11 .fv-f11__pdf { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/14px var(--font-sans); color: var(--ink-700); }
.fv-f11 .fv-f11__pdf svg { color: var(--action); }

.fv-f11 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f11 .fv-f11__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
.fv-f11 .fv-f11__slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fv-f11 .fv-f11__slide { transition: none; } }

/* Écran 1 — sur place : téléphone hors connexion, réserve dictée, photo jointe */
/* Téléphone en verre dépoli, comme FV-F15 (demande de Victor du 01/10/2026) : aucune ombre portée, boutons latéraux. */
.fv-f11 .fv-f11__p-phone { position: absolute; left: 48px; top: 70px; box-sizing: border-box; width: 256px; height: 376px; padding: 8px; border-radius: 38px; background: linear-gradient(150deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .18) 52%, rgba(255, 255, 255, .34) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.fv-f11 .fv-f11__p-phone::before { content: ""; position: absolute; right: -2px; top: 104px; width: 3px; height: 50px; border-radius: 2px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(74, 53, 128, .14); }
.fv-f11 .fv-f11__p-phone::after { content: ""; position: absolute; left: -2px; top: 88px; width: 3px; height: 28px; border-radius: 2px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(74, 53, 128, .14); }
.fv-f11 .fv-f11__p-screen { box-sizing: border-box; height: 100%; padding: 10px 12px 12px; border-radius: 31px; background: var(--bg-surface); box-shadow: 0 0 0 1px rgba(74, 53, 128, .12); display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.fv-f11 .fv-f11__p-status { display: flex; align-items: center; justify-content: space-between; height: 16px; padding: 0 6px; font: 600 11px/16px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f11 .fv-f11__p-status svg { color: var(--ink-700); }
.fv-f11 .fv-f11__p-nav { display: flex; flex-direction: column; gap: 4px; }
.fv-f11 .fv-f11__p-nav-title { display: flex; align-items: center; gap: 5px; font: 600 13px/18px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__p-nav-title svg { color: var(--ink-500); }
.fv-f11 .fv-f11__p-nav-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 400 10px/14px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fv-f11 .fv-f11__p-task { padding: 8px 9px; border: 1px solid var(--border-100); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 3px; }
.fv-f11 .fv-f11__p-task-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fv-f11 .fv-f11__p-task-code { font: 600 10px/14px var(--font-sans); color: var(--brand-ink); }
.fv-f11 .fv-f11__p-task-name { font: 600 11px/15px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-f11 .fv-f11__p-section { display: flex; align-items: center; gap: 6px; }
.fv-f11 .fv-f11__p-section svg { color: var(--status-progress); }
.fv-f11 .fv-f11__p-new { padding: 8px 9px; border: 1px solid var(--brand-300); border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-100) 40%, var(--bg-surface)); display: flex; flex-direction: column; gap: 7px; }
.fv-f11 .fv-f11__p-live { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/14px var(--font-sans); color: var(--action-ink); }
.fv-f11 .fv-f11__p-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--action); animation: fvF11Pulse 1.4s var(--ease-standard) infinite; }
.fv-f11 .fv-f11__p-rec { display: flex; align-items: center; gap: 7px; }
.fv-f11 .fv-f11__p-mic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--action); color: var(--ink-inverse); }
.fv-f11 .fv-f11__p-wave { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.fv-f11 .fv-f11__p-bar { flex: 0 0 3px; height: 8px; border-radius: 2px; background: var(--brand-300); animation: fvF11Wave 1.1s var(--ease-standard) infinite; }
.fv-f11 .fv-f11__p-bar--ink { background: var(--brand-ink); }
.fv-f11 .fv-f11__p-bar--action { background: var(--action); }
.fv-f11 .fv-f11__p-bar--h4 { height: 4px; }
.fv-f11 .fv-f11__p-bar--h6 { height: 6px; }
.fv-f11 .fv-f11__p-bar--h8 { height: 8px; }
.fv-f11 .fv-f11__p-bar--h9 { height: 9px; }
.fv-f11 .fv-f11__p-bar--h10 { height: 10px; }
.fv-f11 .fv-f11__p-bar--h12 { height: 12px; }
.fv-f11 .fv-f11__p-bar--h14 { height: 14px; }
.fv-f11 .fv-f11__p-bar--h16 { height: 16px; }
.fv-f11 .fv-f11__p-bar--h17 { height: 17px; }
.fv-f11 .fv-f11__p-bar--h18 { height: 18px; }
.fv-f11 .fv-f11__p-bar--h20 { height: 20px; }
.fv-f11 .fv-f11__p-bar--h22 { height: 22px; }
.fv-f11 .fv-f11__p-bar:nth-child(2) { animation-delay: 0.15s; }
.fv-f11 .fv-f11__p-bar:nth-child(3) { animation-delay: 0.30s; }
.fv-f11 .fv-f11__p-bar:nth-child(4) { animation-delay: 0.45s; }
.fv-f11 .fv-f11__p-bar:nth-child(5) { animation-delay: 0.60s; }
.fv-f11 .fv-f11__p-bar:nth-child(6) { animation-delay: 0.75s; }
.fv-f11 .fv-f11__p-bar:nth-child(7) { animation-delay: 0.90s; }
.fv-f11 .fv-f11__p-bar:nth-child(8) { animation-delay: 0.00s; }
.fv-f11 .fv-f11__p-bar:nth-child(9) { animation-delay: 0.15s; }
.fv-f11 .fv-f11__p-bar:nth-child(10) { animation-delay: 0.30s; }
.fv-f11 .fv-f11__p-bar:nth-child(11) { animation-delay: 0.45s; }
.fv-f11 .fv-f11__p-bar:nth-child(12) { animation-delay: 0.60s; }
.fv-f11 .fv-f11__p-bar:nth-child(13) { animation-delay: 0.75s; }
.fv-f11 .fv-f11__p-bar:nth-child(14) { animation-delay: 0.90s; }
.fv-f11 .fv-f11__p-timer { font: 600 10px/14px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-700); }
.fv-f11 .fv-f11__p-transcript { margin: 0; font: 400 11px/15px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__p-caret { display: inline-block; width: 1.5px; height: 12px; margin-left: 2px; vertical-align: -2px; background: var(--brand-ink); animation: fvF11Blink 1s steps(1) infinite; }
.fv-f11 .fv-f11__p-actions { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; }
.fv-f11 .fv-f11__p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); font: 600 11px/14px var(--font-sans); white-space: nowrap; }
.fv-f11 .fv-f11__p-btn--ghost { border: 1px solid var(--border-100); background: var(--bg-surface); color: var(--ink-900); }
.fv-f11 .fv-f11__p-btn--primary { background: var(--action-strong); color: var(--ink-inverse); }
.fv-f11 .fv-f11__p-photo { position: absolute; left: 328px; top: 82px; box-sizing: border-box; width: 320px; padding: 8px 8px 12px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; }
/* Photo de la réserve (assets/img/fv-f11-reserve-cloison.webp, fournie par Victor le 01/10/2026, cerclage rouge inclus). */
.fv-f11 .fv-f11__p-shot { position: relative; height: 156px; border-radius: var(--radius-md); overflow: hidden; background: #ddd6cb; }
.fv-f11 .fv-f11__p-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv-f11 .fv-f11__p-photo-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.fv-f11 .fv-f11__p-photo-title { display: flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__p-photo-title svg { color: var(--brand-ink); }
.fv-f11 .fv-f11__p-photo-sub { font: 400 11px/15px var(--font-sans); color: var(--ink-500); }
.fv-f11 .fv-f11__p-sync { position: absolute; left: 328px; top: 318px; box-sizing: border-box; width: 320px; padding: 12px 14px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; }
.fv-f11 .fv-f11__p-sync-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-ink); }
.fv-f11 .fv-f11__p-sync-title { margin: 0; font: 600 12px/17px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__p-sync-sub { margin: 2px 0 0; font: 400 11px/15px var(--font-sans); color: var(--ink-500); }
.fv-f11 .fv-f11__p-chip { position: absolute; left: 328px; top: 398px; }
@keyframes fvF11Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fvF11Wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes fvF11Blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fv-f11 .fv-f11__p-live i, .fv-f11 .fv-f11__p-bar, .fv-f11 .fv-f11__p-caret { animation: none; } }

/* Écran 2 — compte rendu : aperçu PDF et réglages d'export */
.fv-f11 .fv-f11__c-sheet { position: absolute; left: 40px; top: 70px; box-sizing: border-box; width: 352px; height: 374px; padding: 16px 20px 12px; border: 1px solid var(--border-100); border-radius: 6px; background: var(--bg-surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; }
.fv-f11 .fv-f11__c-letterhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-100); }
.fv-f11 .fv-f11__c-logo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 24px; border: 1px dashed var(--brand-300); border-radius: 4px; font: 600 8px/10px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); }
.fv-f11 .fv-f11__c-letterhead span:last-child { font: 500 8px/11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-f11 .fv-f11__c-title { margin: 0; font: 600 15px/20px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__c-sub { margin: 2px 0 0; font: 400 10px/14px var(--font-sans); color: var(--ink-500); }
.fv-f11 .fv-f11__c-next { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 5px; font: 600 10px/14px var(--font-sans); color: var(--brand-ink); }
.fv-f11 .fv-f11__c-part { display: flex; flex-direction: column; gap: 6px; }
.fv-f11 .fv-f11__c-part-title { font: 600 8px/11px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.fv-f11 .fv-f11__c-lot { display: grid; grid-template-columns: 10px minmax(0, 1fr) 96px 30px; align-items: center; column-gap: 8px; height: 16px; }
.fv-f11 .fv-f11__c-lot-name { font: 500 10px/14px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-f11 .fv-f11__c-bar { height: 5px; border-radius: var(--radius-full); background: var(--bg-page); overflow: hidden; }
.fv-f11 .fv-f11__c-fill { display: block; height: 100%; width: 0; border-radius: inherit; }
.fv-f11 .fv-f11__c-fill--lot-1 { background: var(--lot-1); }
.fv-f11 .fv-f11__c-fill--lot-2 { background: var(--lot-2); }
.fv-f11 .fv-f11__c-fill--lot-3 { background: var(--lot-3); }
.fv-f11 .fv-f11__c-fill--p0 { width: 0%; }
.fv-f11 .fv-f11__c-fill--p10 { width: 10%; }
.fv-f11 .fv-f11__c-fill--p45 { width: 45%; }
.fv-f11 .fv-f11__c-pct { justify-self: end; font: 600 10px/14px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-700); }
.fv-f11 .fv-f11__c-people { border: 1px solid var(--border-100); border-radius: 4px; overflow: hidden; }
.fv-f11 .fv-f11__c-person { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 44px; align-items: center; height: 22px; padding: 0 8px; border-top: 1px solid var(--border-100); font: 500 9.5px/13px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__c-person:first-child { border-top: 0; height: 18px; background: var(--bg-beige); font: 600 7.5px/10px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-f11 .fv-f11__c-person > span:not(:first-child) { justify-self: center; }
.fv-f11 .fv-f11__c-tick { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-valid); }
.fv-f11 .fv-f11__c-tick--muted { background: var(--ink-500); }
.fv-f11 .fv-f11__c-tick--warn { background: var(--status-progress); }
.fv-f11 .fv-f11__c-foot { margin-top: auto; display: flex; justify-content: space-between; font: 500 8px/11px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f11 .fv-f11__c-panel { position: absolute; left: 412px; top: 70px; box-sizing: border-box; width: 244px; padding: 14px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-surface); display: flex; flex-direction: column; gap: 10px; }
.fv-f11 .fv-f11__c-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font: 500 11px/15px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__c-switch { position: relative; flex: 0 0 auto; width: 26px; height: 15px; border-radius: var(--radius-full); background: var(--brand-ink); }
.fv-f11 .fv-f11__c-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-surface); }
.fv-f11 .fv-f11__c-radio { display: flex; align-items: center; gap: 7px; font: 500 11px/15px var(--font-sans); color: var(--ink-700); }
.fv-f11 .fv-f11__c-radio i { flex: 0 0 auto; box-sizing: border-box; width: 12px; height: 12px; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.fv-f11 .fv-f11__c-radio.is-on { color: var(--ink-900); }
.fv-f11 .fv-f11__c-radio.is-on i { border: 4px solid var(--brand-ink); }
.fv-f11 .fv-f11__c-sep { height: 1px; background: var(--border-100); }
.fv-f11 .fv-f11__c-live { display: flex; align-items: center; gap: 6px; font: 500 10px/14px var(--font-sans); color: var(--ink-500); }
.fv-f11 .fv-f11__c-actions { position: absolute; left: 412px; top: 360px; width: 244px; display: flex; flex-direction: column; gap: 8px; }
.fv-f11 .fv-f11__c-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.fv-f11 .fv-f11__c-btn--primary { background: var(--action-strong); color: var(--ink-inverse); }
.fv-f11 .fv-f11__c-btn--ghost { justify-content: space-between; border: 1px solid var(--border-100); background: var(--bg-surface); color: var(--ink-900); }
.fv-f11 .fv-f11__c-btn--ghost > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.fv-f11 .fv-f11__c-plan { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--brand-100); font: 600 9px/12px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }

/* Écran 3 — réception : réserves levées, comptes rendus, PV par entreprise */
.fv-f11 .fv-f11__r-window { position: absolute; left: 40px; top: 70px; box-sizing: border-box; width: 616px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.fv-f11 .fv-f11__r-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--border-100); }
.fv-f11 .fv-f11__r-lot { font: 600 13px/18px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__r-head-end { margin-left: auto; }
.fv-f11 .fv-f11__r-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.fv-f11 .fv-f11__r-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); }
.fv-f11 .fv-f11__r-item--done { background: var(--status-valid-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-valid) 22%, transparent); }
.fv-f11 .fv-f11__r-item--todo { background: var(--status-progress-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-progress) 28%, transparent); }
.fv-f11 .fv-f11__r-text { margin: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__r-item--done .fv-f11__r-text { color: var(--ink-500); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-500) 70%, transparent); }
.fv-f11 .fv-f11__r-meta { margin: 2px 0 0; font: 500 10px/14px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f11 .fv-f11__r-act { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--radius-sm); font: 600 10px/14px var(--font-sans); white-space: nowrap; }
.fv-f11 .fv-f11__r-act--reopen { background: var(--bg-surface); color: var(--status-valid-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-valid) 35%, transparent); }
.fv-f11 .fv-f11__r-act--resolve { background: var(--bg-surface); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--border-100); }
.fv-f11 .fv-f11__r-crs { position: absolute; left: 40px; top: 262px; box-sizing: border-box; width: 260px; padding: 12px 14px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-beige); display: flex; flex-direction: column; gap: 8px; }
.fv-f11 .fv-f11__r-cr { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; font: 600 11px/15px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__r-cr small { font: 500 10px/14px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f11 .fv-f11__r-pv { position: absolute; left: 316px; top: 262px; box-sizing: border-box; width: 340px; border: 1px solid var(--border-100); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.fv-f11 .fv-f11__r-pv-head { padding: 12px 16px 9px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border-100); }
.fv-f11 .fv-f11__r-pv-title { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--ink-900); }
.fv-f11 .fv-f11__r-co { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-top: 1px solid var(--border-100); }
.fv-f11 .fv-f11__r-pv-head + .fv-f11__r-co { border-top: 0; }
.fv-f11 .fv-f11__r-co.is-on { background: color-mix(in srgb, var(--brand-100) 55%, var(--bg-surface)); }
.fv-f11 .fv-f11__r-co-id { display: flex; flex-direction: column; min-width: 0; }
.fv-f11 .fv-f11__r-co-name { font: 600 12px/16px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.fv-f11 .fv-f11__r-co-trade { font: 500 9.5px/13px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.fv-f11 .fv-f11__r-co svg { margin-left: auto; color: var(--brand-ink); }

/* FV-F6 — Fonctionnalités · schéma « Une logique commune » : styles du dessin, convertis des styles inline du prototype
   (et des couleurs SVG en var() posées en attributs de présentation). La mise en page du schéma (colonnes Desktop/Laptop,
   liaisons 96 px en Laptop, arborescence < 1024 — D09) et le mouvement M13 (oe-flux, fnNode, mouvement réduit) restent
   portés par les règles fn-schema* / oe-flux* de la CSS de page. */
.fv-f6 .fv-f6__src-title { margin: 0px 0px 10px; font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-f6 .fv-f6__level { display: flex; align-items: center; gap: 12px; height: 44px; padding-left: 0px; }
.fv-f6 .fv-f6__level--sublot { padding-left: 22px; }
.fv-f6 .fv-f6__level--task { padding-left: 44px; }
.fv-f6 .fv-f6__level--checklist { padding-left: 66px; }
.fv-f6 .fv-f6__swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--lot-1); }
.fv-f6 .fv-f6__swatch--sublot { background: var(--lot-1-tint); }
.fv-f6 .fv-f6__swatch--task { background: var(--brand-300); }
.fv-f6 .fv-f6__swatch--checklist { background: var(--brand-100); }
.fv-f6 .fv-f6__level-name { font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f6 .fv-f6__level-value { font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f6 .fv-f6__links { stroke: var(--brand-300); }
.fv-f6 .fv-f6__link { stroke: var(--brand-100); }
.fv-f6 .fv-f6__dot { fill: var(--lot-1); }
.fv-f6 .fv-f6__out-title { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f6 .fv-f6__out-desc { font-weight: 400; font-size: 13px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f6 .fv-f6__tag { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; }
.fv-f6 .fv-f6__tag-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--lot-1); }
.fv-f6 .fv-f6__tag-label { font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }

/* FV-F7 — Fonctionnalités · module « Bibliothèque » (template-parts/visuals/fv-f7-module-bibliotheque.php) :
   styles du dessin (696 × 460), convertis des styles inline du prototype. Racine .fv-f7 (0,1,0), descendants
   .fv-f7 .fv-f7__* (0,2,0), sans !important. Mise à l'échelle : .c-fit.fit-696x460.fn-mod__vis > .c-fit__inner
   (section de page, main.css) ; aucune surcharge responsive (le dessin est réduit d'un bloc par .c-fit). */
.fv-f7 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; flex: 0 0 auto; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f7 .fv-f7__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f7 .fv-f7__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f7 .fv-f7__tab { font-size: 12px; white-space: nowrap; }
.fv-f7 .fv-f7__body { box-sizing: border-box; height: 296px; padding: 16px 18px; background: var(--bg-surface); display: flex; gap: 16px; }
.fv-f7 .fv-f7__lots { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; }
.fv-f7 .fv-f7__lots-head { display: flex; align-items: center; gap: 10px; padding: 0px 0px 8px; }
.fv-f7 .fv-f7__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f7 .fv-f7__add { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-sm); background: var(--action); font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: #ffffff; white-space: nowrap; }
.fv-f7 .fv-f7__lot { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0px 0px 0px 4px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-f7 .fv-f7__lot--1 { box-shadow: inset 3px 0 0 var(--lot-1); }
.fv-f7 .fv-f7__lot--2 { box-shadow: inset 3px 0 0 var(--lot-2); }
.fv-f7 .fv-f7__lot--3 { box-shadow: inset 3px 0 0 var(--lot-3); }
.fv-f7 .fv-f7__lot--4 { box-shadow: inset 3px 0 0 var(--lot-4); }
.fv-f7 .fv-f7__lot--5 { box-shadow: inset 3px 0 0 var(--lot-5); }
.fv-f7 .fv-f7__lot-number { font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); margin-left: 6px; }
.fv-f7 .fv-f7__lot-name { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); letter-spacing: 0.04em; white-space: nowrap; }
.fv-f7 .fv-f7__lot-count { margin-left: auto; padding-right: 4px; font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fv-f7 .fv-f7__template { flex: 0 0 auto; width: 216px; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-page); display: flex; flex-direction: column; gap: 8px; }
.fv-f7 .fv-f7__template-title { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f7 .fv-f7__checks { margin: 2px 0px 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fv-f7 .fv-f7__check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f7 .fv-f7__checkbox { flex: 0 0 auto; box-sizing: border-box; width: 12px; height: 12px; margin-top: 1px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--bg-surface); }
.fv-f7 .fv-f7__template-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.fv-f7 .fv-f7__template-count { margin-left: auto; font-weight: 500; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: var(--brand-ink); }

/* FV-F8 — Fonctionnalités · module « Leads et clients » (#leads-clients ; template-parts/visuals/fv-f8-module-leads-clients.php) :
   styles du dessin (696 × 460), convertis des styles inline du prototype (fonctionnalites.html). Racine .fv-f8 (0,1,0),
   descendants .fv-f8 .fv-f8__* (0,2,0), aucune déclaration forcée. Mise à l’échelle : .c-fit.fit-696x460.fn-mod__vis > .c-fit__inner
   (section de page ; .c-fit dans main.css, .fn-mod__vis dans la CSS de page, commune aux trois modules).
   Aucune surcharge responsive : le dessin est réduit d’un bloc par .c-fit (aucune règle de page ne touche l’intérieur).
   Aucune animation (fiche : « Dans la maquette : Aucune » ; intention de mouvement « À valider », non intégrée). */
.fv-f8 { --motif-size: 440px; --motif-x: 84%; --motif-y: 84%; position: relative; box-sizing: border-box; flex: 0 0 auto; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f8 .fv-f8__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f8 .fv-f8__body { box-sizing: border-box; height: 344px; padding: 14px 18px 16px; background: var(--bg-surface); display: flex; flex-direction: column; }
.fv-f8 .fv-f8__toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fv-f8 .fv-f8__filter { margin-left: 0px; }
.fv-f8 .fv-f8__new { margin-left: auto; display: inline-flex; align-items: center; height: 26px; padding: 0px 10px; border-radius: var(--radius-sm); background: var(--action); font-weight: 600; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: #ffffff; white-space: nowrap; }
.fv-f8 .fv-f8__row { display: flex; align-items: center; gap: 10px; height: 40px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-f8 .fv-f8__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 4px; }
.fv-f8 .fv-f8__dot--lead { background: var(--status-progress); }
.fv-f8 .fv-f8__dot--client { background: var(--status-valid); }
.fv-f8 .fv-f8__name { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f8 .fv-f8__project { font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f8 .fv-f8__status { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0px 8px; border-radius: var(--radius-xs); font-weight: 500; font-size: 11px; line-height: 14px; font-family: var(--font-sans); }
.fv-f8 .fv-f8__status--lead { background: var(--status-progress-tint); color: var(--status-progress-ink); }
.fv-f8 .fv-f8__status--client { background: var(--status-valid-tint); color: var(--status-valid-ink); }
.fv-f8 .fv-f8__date { font-weight: 400; font-size: 11px; line-height: 15px; font-family: var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f8 .fv-f8__history { box-sizing: border-box; margin: 0px 0px 6px 18px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-page); display: flex; align-items: flex-start; gap: 16px; }
.fv-f8 .fv-f8__timeline { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 6px; }
.fv-f8 .fv-f8__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f8 .fv-f8__event { display: flex; gap: 8px; font-weight: 400; font-size: 11px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f8 .fv-f8__event-date { flex: 0 0 auto; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f8 .fv-f8__convert { flex: 0 0 auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0px 12px; border-radius: var(--radius-sm); background: var(--brand-ink); font-weight: 600; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: #ffffff; white-space: nowrap; }

/* FV-F9 — Fonctionnalités · module « Documents avec variables » (#documents-variables ;
   template-parts/visuals/fv-f9-module-documents-variables.php) : styles du dessin (696 × 460), convertis des styles inline
   du prototype (fonctionnalites.html). Racine .fv-f9 (0,1,0), descendants .fv-f9 .fv-f9__* (0,2,0), aucune déclaration forcée.
   Mise à l’échelle : .c-fit.fit-696x460.fn-mod__vis > .c-fit__inner (section de page ; .c-fit dans main.css, .fn-mod__vis
   dans la CSS de page, commune aux trois modules). Aucune surcharge responsive : le dessin est réduit d’un bloc par .c-fit
   (aucune règle de page ne touche l’intérieur). Aucune animation (fiche : « Dans la maquette : Aucune » ; intention de
   mouvement « À valider », non intégrée). À charger après ds-oeuvra-bundle.css (fusion dans page-fonctionnalites.css). */
.fv-f9 { --motif-size: 440px; --motif-x: -16%; --motif-y: 84%; position: relative; box-sizing: border-box; flex: 0 0 auto; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f9 .fv-f9__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f9 .fv-f9__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f9 .fv-f9__tab { font-size: 12px; white-space: nowrap; }
.fv-f9 .fv-f9__body { box-sizing: border-box; height: 296px; padding: 14px 18px 16px; background: var(--bg-surface); display: flex; gap: 14px; }
.fv-f9 .fv-f9__col { flex: 1 1 0px; min-width: 0px; display: flex; flex-direction: column; gap: 8px; }
.fv-f9 .fv-f9__col-head { display: flex; align-items: center; gap: 8px; }
.fv-f9 .fv-f9__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f9 .fv-f9__var-count { margin-left: auto; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--brand-ink); }
.fv-f9 .fv-f9__doc { flex: 1 1 auto; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md); 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-page); display: flex; flex-direction: column; gap: 7px; font-weight: 400; font-size: 11px; line-height: 17px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f9 .fv-f9__doc--generated { background: var(--bg-surface); box-shadow: var(--shadow-md); }
.fv-f9 .fv-f9__doc-title { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-f9 .fv-f9__var { display: inline-block; padding: 0px 5px; border-radius: var(--radius-xs); background: var(--brand-100); color: var(--brand-ink); font-weight: 500; }
.fv-f9 .fv-f9__mission { margin-top: 2px; padding-top: 7px; border-top-width: 1px; border-top-style: dashed; border-top-color: var(--border-100); }
.fv-f9 .fv-f9__total { display: flex; justify-content: space-between; font-weight: 600; color: var(--ink-900); }
.fv-f9 .fv-f9__total--figures { font-variant-numeric: tabular-nums; }
.fv-f9 .fv-f9__generate { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0px 10px; border-radius: var(--radius-sm); background: var(--action); font-weight: 600; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: rgb(255, 255, 255); white-space: nowrap; }
.fv-f9 .fv-f9__arrow { flex: 0 0 auto; align-self: center; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: rgb(255, 255, 255); }
.fv-f9 .fv-f9__lead { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--status-valid-ink); }
.fv-f9 .fv-f9__lead-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-valid); }

/* FV-F10 — Fonctionnalités · module « Documents à votre image » (#identite-visuelle ;
   template-parts/visuals/fv-f10-module-identite-visuelle.php), 02/10/2026 : même gabarit que FV-F9 (dessin 696 × 460,
   fenêtre 616 px, corps de 296 px en deux colonnes). Racine .fv-f10 (0,1,0), descendants .fv-f10 .fv-f10__* (0,2,0),
   aucune déclaration forcée. Mise à l'échelle par .c-fit (commune aux modules). Aucune animation. */
.fv-f10 { --motif-size: 440px; --motif-x: 84%; --motif-y: -16%; position: relative; box-sizing: border-box; flex: 0 0 auto; width: 696px; height: 460px; border-radius: var(--radius-xl); overflow: hidden; }
.fv-f10 .fv-f10__window { position: absolute; left: 40px; top: 40px; width: 616px; }
.fv-f10 .fv-f10__tabs { gap: 14px; padding: 4px 16px 0px; overflow: hidden; }
.fv-f10 .fv-f10__tab { font-size: 12px; white-space: nowrap; }
.fv-f10 .fv-f10__body { box-sizing: border-box; height: 296px; padding: 14px 18px 16px; background: var(--bg-surface); display: flex; gap: 14px; }
.fv-f10 .fv-f10__col { flex: 1 1 0px; min-width: 0px; display: flex; flex-direction: column; gap: 8px; }
.fv-f10 .fv-f10__col--settings { gap: 7px; }
.fv-f10 .fv-f10__col-head { display: flex; align-items: center; gap: 8px; }
.fv-f10 .fv-f10__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.fv-f10 .fv-f10__badge { margin-left: auto; padding: 0px 6px; border-radius: var(--radius-xs); background: var(--brand-100); font-weight: 500; font-size: 10px; line-height: 16px; font-family: var(--font-sans); color: var(--brand-ink); }
.fv-f10 .fv-f10__visuals { display: flex; gap: 8px; margin-bottom: 2px; }
.fv-f10 .fv-f10__visual { flex: 1 1 0px; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: var(--radius-md); border: 1px solid var(--border-100); background: var(--bg-page); }
.fv-f10 .fv-f10__visual-label { font-weight: 400; font-size: 10px; line-height: 12px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-f10 .fv-f10__mark { display: grid; place-content: center; width: 34px; height: 30px; border-radius: var(--radius-sm); background: var(--brand-ink); font-weight: 700; font-size: 9px; line-height: 10px; font-family: var(--font-sans); color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase; }
.fv-f10 .fv-f10__mark--sm { width: 30px; height: 20px; font-size: 7px; }
.fv-f10 .fv-f10__ink { display: grid; place-content: center; height: 30px; color: var(--brand-ink); }
.fv-f10 .fv-f10__ink svg { display: block; width: 56px; height: 21px; }
.fv-f10 .fv-f10__ink--initials { font: italic 600 14px/30px Georgia, "Times New Roman", serif; letter-spacing: 0.02em; }
.fv-f10 .fv-f10__field { box-sizing: border-box; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-100); font-weight: 400; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-f10 .fv-f10__row { display: flex; align-items: center; gap: 8px; min-height: 20px; font-weight: 400; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-700); white-space: nowrap; }
.fv-f10 .fv-f10__row > span:first-child { flex: 1 1 auto; min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
.fv-f10 .fv-f10__slider { position: relative; flex: 0 0 56px; height: 4px; border-radius: var(--radius-full); background: var(--border-100); }
.fv-f10 .fv-f10__slider > i { position: absolute; left: 0px; top: 0px; width: 40%; height: 4px; border-radius: var(--radius-full); background: var(--action); }
.fv-f10 .fv-f10__slider > i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--action); }
.fv-f10 .fv-f10__value { flex: 0 0 auto; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f10 .fv-f10__switch { position: relative; flex: 0 0 26px; height: 14px; border-radius: var(--radius-full); background: var(--action); }
.fv-f10 .fv-f10__switch > i { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; }
.fv-f10 .fv-f10__ok { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--status-valid-ink); }
/* Séparateur vertical des deux colonnes (demande de Victor, 02/10) : filet sur toute la hauteur du corps, derrière la flèche. */
.fv-f10 .fv-f10__arrow { position: relative; flex: 0 0 28px; align-self: stretch; display: grid; place-content: center; width: 28px; margin: -14px 0px -16px; color: rgb(255, 255, 255); }
.fv-f10 .fv-f10__arrow::before { content: ""; position: absolute; left: 13.5px; top: 0px; bottom: 0px; width: 1px; background: var(--border-100); }
.fv-f10 .fv-f10__arrow::after { content: ""; position: absolute; left: 0px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--action); }
.fv-f10 .fv-f10__arrow > svg { position: relative; z-index: 1; display: block; }
.fv-f10 .fv-f10__page { flex: 1 1 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-md); font-weight: 400; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-f10 .fv-f10__page-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-100); }
.fv-f10 .fv-f10__page-org { font-weight: 500; font-size: 10px; color: var(--ink-900); white-space: nowrap; }
.fv-f10 .fv-f10__page-title { margin-top: 2px; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--ink-900); white-space: nowrap; }
.fv-f10 .fv-f10__page-line { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fv-f10 .fv-f10__page-line > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.fv-f10 .fv-f10__lot { width: 7px; height: 7px; border-radius: 2px; background: var(--lot-1); }
.fv-f10 .fv-f10__lot--2 { background: var(--lot-2); }
.fv-f10 .fv-f10__page-sign { margin-top: auto; align-self: flex-end; display: flex; align-items: center; gap: 10px; }
.fv-f10 .fv-f10__page-sign .fv-f10__ink { height: 24px; }
.fv-f10 .fv-f10__page-sign .fv-f10__ink--initials { font-size: 12px; line-height: 24px; }
.fv-f10 .fv-f10__page-sign svg { width: 50px; height: 19px; }
.fv-f10 .fv-f10__page-foot { display: flex; justify-content: space-between; padding-top: 5px; border-top: 1px dashed var(--border-100); font-size: 9px; line-height: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f10 .fv-f10__actions { align-self: flex-end; display: inline-flex; gap: 6px; }
.fv-f10 .fv-f10__btn { display: inline-flex; align-items: center; height: 26px; padding: 0px 10px; border-radius: var(--radius-sm); background: var(--action); font-weight: 600; font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: rgb(255, 255, 255); white-space: nowrap; }
.fv-f10 .fv-f10__btn--ghost { border: 1px solid var(--border-100); background: var(--bg-surface); color: var(--ink-900); }

/* FV-F15 — Fonctionnalités · « Sur le chantier » : tablette hors connexion sur l'onglet Visites & PV (comptes rendus,
   réserves, bandeau « Enregistré sur l'appareil ») et téléphone qui la chevauche (icône Œuvra ajoutée à l'écran
   d'accueil). Variante 1 « verre » retenue par Victor le 01/10/2026 (handoff/code/09) : cadres en verre dépoli
   (backdrop-filter), aucune ombre portée, bandeau du bas au premier plan sous lequel glisse la dernière réserve, halos et icônes dans les teintes de la charte (parme, violet, blanc, beige).
   Partial template-parts/visuals/fv-f15-chantier-tablette-mobile.php. Dessin 616 × 620 ≥ 1024 (hauteur de la colonne de
   texte à 1440, demande de Victor du 01/10/2026), 616 × 460 empilé (< 1024), mis à l'échelle par .c-fit.fit-616x620
   (main.css, racine en position absolue) ; la composition (appareils, pastille, halos) reste dessinée pour 460 et se
   centre verticalement dans la hauteur portée par --fit-h (décalage --f15-dy) ; aucune animation. Préfixes : d- (appareils), a- (écrans
   de l'application). Racine .fv-f15 (0,1,0), descendants .fv-f15 .fv-f15__x (0,2,0 ou plus), aucune déclaration
   prioritaire, aucun style en ligne. Espacements de l'écran Visites & PV (base 4 px) : marge latérale 14 px, 8 px entre
   un intitulé et sa liste et entre deux éléments, 14 px entre les sections, marges internes 7 px / 8 px. */
.fv-f15 { --motif-size: 540px; --motif-x: -26%; --motif-y: 88%; --f15-dy: calc((var(--fit-h, 460px) - 454px) / 2); position: relative; box-sizing: border-box; width: 616px; height: var(--fit-h, 460px); border-radius: var(--radius-xl); overflow: hidden; background: var(--gradient-parme); }
.fv-f15 .fv-f15__chip { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(74, 53, 128, .12); font: 600 11px/14px var(--font-sans); color: var(--ink-900); white-space: nowrap; left: 37px; top: calc(var(--f15-dy) + 404px); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.fv-f15 .fv-f15__chip svg { flex: 0 0 auto; color: var(--brand-ink); }
.fv-f15 .fv-f15__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--status-progress); }
.fv-f15 .fv-f15__d-tablet { position: absolute; box-sizing: border-box; padding: 12px; border-radius: 28px; background: linear-gradient(150deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .18) 52%, rgba(255, 255, 255, .34) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); left: 29px; top: calc(var(--f15-dy) + 10px); width: 454px; height: 378px; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.fv-f15 .fv-f15__d-phone { position: absolute; box-sizing: border-box; z-index: 4; padding: 8px; border-radius: 38px; background: linear-gradient(150deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .18) 52%, rgba(255, 255, 255, .34) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); left: 387px; top: calc(var(--f15-dy) + 118px); width: 200px; height: 326px; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.fv-f15 .fv-f15__d-tablet::before { content: ""; position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(30, 29, 27, .25); }
.fv-f15 .fv-f15__d-phone::before { content: ""; position: absolute; right: -2px; top: 92px; width: 3px; height: 46px; border-radius: 2px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(74, 53, 128, .14); }
.fv-f15 .fv-f15__d-phone::after { content: ""; position: absolute; left: -2px; top: 78px; width: 3px; height: 26px; border-radius: 2px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(74, 53, 128, .14); }
.fv-f15 .fv-f15__d-screen { position: relative; box-sizing: border-box; height: 100%; border-radius: 17px; background: var(--bg-surface); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(74, 53, 128, .12); }
.fv-f15 .fv-f15__d-phone .fv-f15__d-screen { border-radius: 31px; }
.fv-f15 .fv-f15__d-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
.fv-f15 .fv-f15__d-cam { position: absolute; z-index: 6; top: 9px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: rgba(30, 29, 27, .6); box-shadow: none; }
.fv-f15 .fv-f15__d-homebar { position: absolute; z-index: 6; bottom: 6px; left: 50%; width: 64px; height: 4px; margin-left: -32px; border-radius: 2px; background: rgba(30, 29, 27, .3); }
.fv-f15 .fv-f15__a-status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 6px 20px 0; box-sizing: border-box; font: 600 10px/14px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-f15 .fv-f15__a-status svg { color: var(--ink-700); }
.fv-f15 .fv-f15__a-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--border-100); }
.fv-f15 .fv-f15__a-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.fv-f15 .fv-f15__a-project { font: 600 12px/16px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.fv-f15 .fv-f15__a-bar > .fv-f15__a-pill { margin-left: auto; }
.fv-f15 .fv-f15__a-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--radius-full); font: 600 9.5px/13px var(--font-sans); white-space: nowrap; }
.fv-f15 .fv-f15__a-pill--off { background: var(--bg-page); color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--border-100); }
.fv-f15 .fv-f15__a-pill--wait { background: var(--status-progress-tint); color: var(--status-progress-ink); }
.fv-f15 .fv-f15__a-tabs { flex: 0 0 auto; display: flex; gap: 13px; padding: 0 14px; border-bottom: 1px solid var(--border-100); overflow: hidden; }
.fv-f15 .fv-f15__a-tab { position: relative; padding: 7px 0 8px; font: 500 10px/14px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fv-f15 .fv-f15__a-tab.is-on { color: var(--ink-900); }
.fv-f15 .fv-f15__a-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--action); }
.fv-f15 .fv-f15__a-label { font: 500 9px/13px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.fv-f15 .fv-f15__a-banner { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font: 500 10px/14px var(--font-sans); position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; background: color-mix(in srgb, var(--brand-100) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fv-f15 .fv-f15__a-banner--off { background: var(--brand-100); color: var(--brand-ink); }
.fv-f15 .fv-f15__a-banner b { font-weight: 600; }
.fv-f15 .fv-f15__a-home { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 0 16px 22px; background: linear-gradient(168deg, #dcd1f0 0%, #ece6f6 42%, #f6f3ee 100%); }
.fv-f15 .fv-f15__a-home .fv-f15__a-status { margin: 0 -16px; }
.fv-f15 .fv-f15__a-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 13px; justify-items: center; padding-top: 6px; }
.fv-f15 .fv-f15__a-app { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 7.5px/10px var(--font-sans); color: var(--ink-700); }
.fv-f15 .fv-f15__a-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ddd6cb; box-shadow: none; }
.fv-f15 .fv-f15__a-icon--a { background: linear-gradient(160deg, #e7e1d7, #d4ccbf); }
.fv-f15 .fv-f15__a-icon--b { background: linear-gradient(160deg, #cbbbe8, #a995d6); }
.fv-f15 .fv-f15__a-icon--c { background: linear-gradient(160deg, #ece6f7, #d8cdee); }
.fv-f15 .fv-f15__a-icon--d { background: linear-gradient(160deg, #efe9de, #ddd3c2); }
.fv-f15 .fv-f15__a-icon--e { background: linear-gradient(160deg, #e6e1d9, #cfc8bd); }
.fv-f15 .fv-f15__a-icon--f { background: linear-gradient(160deg, #e4dcf3, #c9bae6); }
.fv-f15 .fv-f15__a-icon--g { background: linear-gradient(160deg, #e3e1dc, #c9c5be); }
/* Icône réelle de l'application (Charte/oeuvra-favicon-vermillon.svg : Œ blanc sur vermillon #e8503a = --action). */
.fv-f15 .fv-f15__a-icon--oe { background: var(--action); color: var(--ink-inverse); }
.fv-f15 .fv-f15__a-icon--oe svg, .fv-f15 .fv-f15__a-toast__icon svg { display: block; width: 100%; height: 100%; }
.fv-f15 .fv-f15__a-app--oe { color: var(--ink-900); font-weight: 600; }
.fv-f15 .fv-f15__a-app--oe .fv-f15__a-icon { box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5.5px rgba(232, 80, 58, .4); }
.fv-f15 .fv-f15__a-dock { margin-top: auto; display: flex; justify-content: space-around; padding: 8px 10px; border-radius: 20px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.fv-f15 .fv-f15__a-dock .fv-f15__a-icon { width: 30px; height: 30px; border-radius: 9px; }
.fv-f15 .fv-f15__a-toast { position: absolute; z-index: 4; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 14px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-100); font: 600 9.5px/13px var(--font-sans); color: var(--ink-900); bottom: 76px; }
.fv-f15 .fv-f15__a-toast__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--action); color: var(--ink-inverse); }
.fv-f15 .fv-f15__a-toast small { display: block; font-weight: 400; font-size: 9px; line-height: 12px; color: var(--ink-500); }
.fv-f15 .fv-f15__a-reserve { padding: 8px 10px; border-radius: 10px; background: var(--status-progress-tint); box-shadow: inset 0 0 0 1px rgba(229, 161, 27, .28); display: flex; flex-direction: column; gap: 4px; }
.fv-f15 .fv-f15__a-reserve p { margin: 0; font: 400 10px/14px var(--font-sans); color: var(--ink-900); }
.fv-f15 .fv-f15__a-reserve__meta { display: flex; align-items: center; justify-content: space-between; font: 500 9px/12px var(--font-sans); color: var(--ink-700); }
.fv-f15 .fv-f15__a-reserve__meta b { font-weight: 600; color: var(--status-progress-ink); }
.fv-f15 .fv-f15__a-crs { flex: 0 0 auto; padding: 12px 14px 0; display: flex; flex-direction: column; gap: 8px; width: 336px; box-sizing: border-box; }
.fv-f15 .fv-f15__a-cr { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border-100); font: 600 10.5px/14px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.fv-f15 .fv-f15__a-cr svg { flex: 0 0 auto; color: var(--action); }
.fv-f15 .fv-f15__a-cr small { margin-left: auto; font: 500 9.5px/13px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fv-f15 .fv-f15__a-cr--draft { background: color-mix(in srgb, var(--status-progress-tint) 60%, var(--bg-surface)); }
.fv-f15 .fv-f15__a-banner span { max-width: 300px; }
.fv-f15 .fv-f15__a-crs + .fv-f15__a-crs { padding-top: 14px; }
.fv-f15 .fv-f15__orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.fv-f15 .fv-f15__orb--a { left: -23px; top: calc(var(--f15-dy) - 40px); width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(185, 166, 222, .75), rgba(185, 166, 222, 0)); }
.fv-f15 .fv-f15__orb--b { left: 327px; top: calc(var(--f15-dy) + 140px); width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(74, 53, 128, .38), rgba(74, 53, 128, 0)); }
.fv-f15 .fv-f15__orb--c { left: 127px; top: calc(var(--f15-dy) + 250px); width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }

/* Fil d'Ariane aligné à gauche en Mobile (demande de Victor du 28/09/2026 ; auparavant centré, main.css), comme aux
   autres largeurs. Même règle dans les trois pages métier. */
@media (max-width: 767px) {
.fn-hero__text > .c-crumb-wrap { text-align: left; }
}