/* ==========================================================================
   Œuvra — Accueil · feuille du gabarit (front-page.php)
   Base : handoff/design/css/pages/accueil.css (animations, composition, responsive) ; les !important
   qui ne servaient qu'à battre les styles inline des masters sont retirés, ces styles étant devenus
   des classes (bloc « Production »). Fin de fichier : illustrations (template-parts/visuals/).
   ========================================================================== */

/* ---------- Animations et états propres à la page (hérités des maquettes validées) ---------- */
@keyframes hpSlide { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hpTabOn { 0% { color: #ffffff; background-color: #ffffff00; } 3%, 25% { color: #1e1d1b; background-color: #ffffff; } 28%, 100% { color: #ffffff; background-color: #ffffff00; } }
@keyframes hpBar { 0% { transform: scaleX(0); opacity: 1; } 25% { transform: scaleX(1); opacity: 1; } 28% { transform: scaleX(1); opacity: 0; } 28.01%, 100% { transform: scaleX(0); opacity: 0; } }
.hp-slide { opacity: 0; animation: hpSlide 20s linear infinite; }
.hp-tab { animation: hpTabOn 20s linear infinite; }
.hp-bar { transform: scaleX(0); transform-origin: 0 50%; animation: hpBar 20s linear infinite; }
.hp-d2 { animation-delay: 5s; } .hp-d3 { animation-delay: 10s; } .hp-d4 { animation-delay: 15s; }
@keyframes hpArc { 0% { stroke-dasharray: 0 1; } 9% { stroke-dasharray: 0.49 0.51; } 100% { stroke-dasharray: 0.49 0.51; } }
.hp-arc { animation: hpArc 20s cubic-bezier(0.2, 0, 0, 1) infinite; }
@keyframes hpProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hp-prog { transform-origin: 0 50%; animation: hpProg 7s linear infinite; }
.hp-card, .hp-peek, .hp-ptab { transition: opacity 320ms cubic-bezier(0, 0, 0.2, 1); }
@keyframes hpUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hp-up { opacity: 0; animation: hpUp 600ms cubic-bezier(0, 0, 0.2, 1) both; }
/* Empilement des Feature Visuals (section Dans Œuvra) : sticky + animations pilotées par le défilement */
.st-card { will-change: transform; }
@supports (animation-timeline: view()) {
.st-col { timeline-scope: --st2, --st3; }
.st-sent-2 { view-timeline: --st2 block; }
.st-sent-3 { view-timeline: --st3 block; }
.st-card-1 { animation: stRecede linear both; animation-timeline: --st2; animation-range: cover 0% cover 72%; }
.st-inner-1 { animation: stRecede linear both; animation-timeline: --st3; animation-range: cover 0% cover 72%; }
.st-card-2 { animation: stRecede linear both; animation-timeline: --st3; animation-range: cover 0% cover 72%; }
}
@keyframes stRecede { to { transform: translateY(-14px) scale(0.955); } }
@media (prefers-reduced-motion: reduce) { .st-card-1, .st-inner-1, .st-card-2 { animation: none; } }
@keyframes hpIn { 0% { opacity: 0; transform: translateY(12px); } 3.5% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hpFade { 0% { opacity: 0; } 3.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hpGrowX { 0% { transform: scaleX(0); } 7% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes hpDrawLine { 0% { stroke-dashoffset: 1; } 7% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.hp-in { opacity: 0; animation: hpIn 20s cubic-bezier(0, 0, 0.2, 1) infinite; }
.hp-fade { opacity: 0; animation: hpFade 20s linear infinite; }
.hp-grow { transform: scaleX(0); transform-origin: 0 50%; animation: hpGrowX 20s cubic-bezier(0.2, 0, 0, 1) infinite; }
.hp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hpDrawLine 20s cubic-bezier(0.2, 0, 0, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .hp-slide, .hp-tab, .hp-bar, .hp-in, .hp-fade, .hp-grow, .hp-draw, .hp-arc, .hp-prog, .hp-up { animation: none; } .hp-up { opacity: 1; transform: none; } .hp-prog { transform: scaleX(1); } .hp-in, .hp-fade { opacity: 1; transform: none; } .hp-grow { transform: scaleX(1); } .hp-draw { stroke-dashoffset: 0; } .hp-arc { stroke-dasharray: 0.49 0.51; } .hp-ripple { animation: none; opacity: 0; } }

/* ---------- Composition et responsive ---------- */
/* Accueil — compositions propres à la page
   Règle du hero : la fenêtre de l’application chevauche la photo ; sa barre et ses onglets
   (--hh-chrome) sont posés sur la photo, son contenu commence exactement au bas de la photo. */
.hh { --hh-top: 184px; --hh-band: 746px; --hh-chrome: 102px; position: relative; padding: var(--hh-top) 0 var(--section-y-compact); }
.hh-band { position: absolute; left: 0; top: 0; width: 100%; height: var(--hh-band); overflow: hidden; background: #1e1d1b; }
.hh-band__bg { position: absolute; inset: 0; background: #1e1d1b; }
.hh-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-band__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #1e1d1bb8 0%, #1e1d1bad 46%, #1e1d1b7a 100%); opacity: 0.35; }
.hh-glow { position: absolute; left: 50%; transform: translateX(-50%); background: #1e1d1b; pointer-events: none; }
.hh-glow--1 { top: calc(var(--hh-top) - 12px); width: 68.056%; height: 330px; border-radius: 50%; opacity: 0.34; filter: blur(60px); }
.hh-glow--2 { top: calc(var(--hh-top) + 182px); width: 44.444%; height: 96px; border-radius: 48px; opacity: 0.38; filter: blur(34px); }
.hh-head { position: relative; z-index: 2; min-height: calc(var(--hh-band) - var(--hh-chrome) - var(--hh-top)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hh-badge { display: inline-flex; align-items: center; gap: 10px; height: 34px; box-sizing: border-box; padding: 0 12px 0 5px; border: 1px solid #ffffff52; border-radius: var(--radius-full); background: #ffffff1f; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 500 13px/16px var(--font-sans); color: var(--ink-inverse); text-decoration: none; }
.hh-badge__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--brand-100); font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
.hh-badge:hover { color: var(--ink-inverse); }
.hh-panel-wrap { position: relative; z-index: 3; }
.hh-panel { box-sizing: border-box; width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: #1e1d1b26; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: #ffffff5c; }
.hh-bar { box-sizing: border-box; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid #ffffff29; }
.hh-bar__dots { display: flex; gap: 8px; width: 120px; }
.hh-bar__dots > span { width: 11px; height: 11px; border-radius: 50%; }
.hh-bar__mid { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.hh-bar__url { box-sizing: border-box; width: 480px; max-width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ffffff5c; border-radius: var(--radius-sm); background: #ffffff14; font: 400 12px/16px var(--font-sans); color: #ffffffe0; }
.hh-bar__end { width: 120px; }
.hh-tabs { display: flex; align-items: flex-end; gap: 2px; box-sizing: border-box; height: 46px; padding: 6px 6px 0; }
.hh-tab { position: relative; flex: 1 1 0; box-sizing: border-box; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; font: 500 13px/16px var(--font-sans); color: #ffffff; white-space: nowrap; }
.hh-tab__num { font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; color: inherit; opacity: 0.65; }
.hh-stage { position: relative; width: 100%; aspect-ratio: 1200 / 500; overflow: hidden; background: var(--bg-surface); container-type: inline-size; }
.hh-stage > .hp-scene { transform-origin: 0 0; scale: var(--hh-fit, 1); scale: min(1, tan(atan2(100cqw, 1200px))); }
/* Hero Mobile (< 768) : l’application en 4 écrans natifs + barre d’onglets en bas (balisage : .hh-app).
   Masquée au-dessus de 767 px ; même cycle de 20 s que la scène Desktop (écrans 2 à 4 : hp-slide hp-d2/3/4). */
.hh-app { display: none; }
.hh-app__screens { display: grid; background: var(--bg-surface); }
.hh-app__screen { grid-area: 1 / 1; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; background: var(--bg-surface); }
.hh-app__top { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; margin-bottom: 2px; border-bottom: 1px solid var(--border-100); }
.hh-app__top > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.hh-app__top > strong { font: 600 14px/20px var(--font-sans); color: var(--ink-900); }
.hh-app__caps { margin: 0 0 0 auto; font: 500 10px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.hh-app__label { margin: 2px 2px 0; font: 500 10px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.hh-app__code { font: 500 11px/16px var(--font-sans); color: var(--ink-500); }
.hh-app__name { font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.hh-app__amt { margin-left: auto; font: 600 12px/16px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-app__badge { height: 20px; font-size: 11px; }
/* 1 · Descriptif : lot, sous-lot, tâche chiffrée (prix, totaux, checklist) */
.hh-app__row { display: flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 12px; font: 400 11px/16px var(--font-sans); color: var(--ink-500); }
.hh-app__row--lot { border-radius: 8px; background: var(--bg-beige); }
.hh-app__row--lot > i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--lot-1); }
.hh-app__row--sub { margin-left: 10px; border-left: 2px solid var(--lot-1); }
.hh-app__row--sub > i { flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--lot-1); }
.hh-app__task { margin-left: 10px; border: 1px solid var(--ink-900); border-radius: 10px; overflow: hidden; }
.hh-app__task-head { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--action-tint); }
.hh-app__task-t { display: flex; align-items: flex-start; gap: 7px; font: 600 13px/18px var(--font-sans); color: var(--ink-900); }
.hh-app__task-t > i { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--status-progress); }
.hh-app__task-t .hh-app__code { flex: none; }
.hh-app__task-meta { display: flex; align-items: center; gap: 8px; padding-left: 14px; font: 400 11px/16px var(--font-sans); color: var(--ink-500); }
.hh-app__fields { display: grid; grid-template-columns: 1.25fr 0.8fr 1fr; gap: 8px; padding: 12px 12px 0; }
.hh-app__field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hh-app__field > span { font: 500 10px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.hh-app__field > b { box-sizing: border-box; height: 32px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; border: 1px solid var(--border-100); border-radius: var(--radius-sm); font: 600 13px/16px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-app__field > b.is-on { border-color: var(--action); box-shadow: 0 0 0 3px #e8503a1f; }
.hh-app__totals { display: flex; justify-content: space-between; gap: 8px; margin: 12px 12px 0; padding: 10px 0; border-top: 1px solid var(--border-100); border-bottom: 1px solid var(--border-100); }
.hh-app__totals > span { display: flex; flex-direction: column; gap: 2px; font: 400 11px/14px var(--font-sans); color: var(--ink-500); }
.hh-app__totals > span:last-child { text-align: right; }
.hh-app__totals b { font: 600 14px/18px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.hh-app__check { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.hh-app__check-head { margin: 0; display: flex; align-items: center; gap: 6px; font: 500 10px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.hh-app__check-head > em { font-style: normal; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-page); color: var(--ink-700); letter-spacing: 0; }
.hh-app__ci { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 12px/16px var(--font-sans); color: var(--ink-900); }
.hh-app__ci > i { flex: none; box-sizing: border-box; width: 16px; height: 16px; display: grid; place-content: center; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--bg-surface); }
.hh-app__ci.is-on > i { border-color: var(--action); background: var(--action); }
.hh-app__more { margin: 0; padding-left: 24px; font: 400 11px/16px var(--font-sans); color: var(--ink-500); }
/* 2 · Consultation : une carte par lot, les entreprises consultées dedans */
.hh-app__card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--bg-beige); }
.hh-app__card-head { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 4px; }
.hh-app__card-head > i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.hh-app__card-head > .hh-app__name { flex: 0 1 auto; min-width: 0; }
.hh-app__co { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--bg-surface); }
.hh-app__av { flex: none; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-100); }
.hh-app__co-name { font: 600 12px/16px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.hh-app__chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-full); background: var(--status-valid-tint); color: var(--status-valid-ink); font: 600 11px/14px var(--font-sans); }
.hh-app__note { margin: 2px 2px 0; display: flex; align-items: flex-start; gap: 8px; font: 400 12px/17px var(--font-sans); color: var(--ink-700); }
.hh-app__note > svg { flex: none; margin-top: 1.5px; }
/* 3 · Planning : 8 semaines sur toute la largeur, libellé au-dessus de sa barre (géométrie du Desktop en %) */
.hh-app__gantt { display: flex; flex-direction: column; padding: 4px 2px 0; }
.hh-app__weeks { position: relative; height: 14px; margin-bottom: 8px; }
.hh-app__weeks > span { position: absolute; top: 0; padding-left: 3px; font: 500 10px/14px var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.hh-app__chart { position: relative; }
.hh-app__gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-100); }
.hh-app__trow { position: relative; height: 62px; }
.hh-app__tl { position: absolute; z-index: 1; top: 10px; display: flex; align-items: center; gap: 6px; padding-right: 4px; background: var(--bg-surface); font: 600 11px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; }
.hh-app__tl--end { padding: 0 0 0 4px; }
.hh-app__tl > b { font-weight: 600; letter-spacing: 0.06em; color: var(--ink-500); }
.hh-app__gbar { position: absolute; top: 32px; height: 16px; border-radius: var(--radius-xs); }
.hh-app__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--action); }
.hh-app__gfoot { position: relative; height: 22px; margin-top: 6px; }
.hh-app__pill { position: absolute; top: 0; translate: -50% 0; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-full); background: var(--action-tint); font: 600 10px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--action-ink); white-space: nowrap; }
.hh-app__legend { display: flex; justify-content: flex-end; gap: 16px; margin-top: 12px; font: 400 11px/16px var(--font-sans); color: var(--ink-700); }
.hh-app__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.hh-app__legend i { width: 18px; height: 7px; border-radius: 2px; background: var(--lot-1); }
.hh-app__legend i.is-plan { opacity: 0.32; }
/* 4 · Situation : total et anneau de la part versée, puis une carte par lot */
.hh-app__sum { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-100); border-radius: 10px; }
.hh-app__ring { flex: none; display: block; }
.hh-app__sum-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-app__sum-text > .hh-app__label { margin: 0; }
.hh-app__sum-text > b { font: 600 18px/24px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-app__sum-text > span { font: 400 11px/15px var(--font-sans); color: var(--ink-500); }
.hh-app__card--sit { gap: 8px; padding: 12px; }
.hh-app__track { position: relative; display: block; height: 10px; border-radius: var(--radius-full); background: var(--bg-page); overflow: hidden; }
.hh-app__track > span { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); background: var(--status-valid); }
.hh-app__paid { display: flex; gap: 16px; font: 400 11px/16px var(--font-sans); color: var(--ink-700); }
.hh-app__paid > span { display: inline-flex; align-items: center; gap: 6px; }
.hh-app__paid i { width: 8px; height: 8px; border-radius: 50%; background: var(--status-valid); }
.hh-app__paid i.is-rest { background: var(--bg-page); }
/* barre d’onglets : l’onglet de l’écran affiché passe en actif (texte ink-900, icône brand-ink, jauge vermillon qui se remplit en 5 s) */
.hh-app__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg-surface); border-top: 1px solid var(--border-100); }
.hh-app__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 11px; font: 500 10px/14px var(--font-sans); color: var(--ink-500); animation-name: hhAppTab; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; }
.hh-app__tab > svg { color: var(--ink-500); animation-name: hhAppIcon; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: inherit; }
.hh-app__tab > .hp-bar { position: absolute; top: -1px; left: 24%; right: 24%; height: 2px; border-radius: 0 0 2px 2px; background: var(--action); }

@keyframes hhAppTab { 0%, 28%, 100% { color: #6e6a63; } 3%, 25% { color: #1e1d1b; } }

@keyframes hhAppIcon { 0%, 28%, 100% { color: #6e6a63; } 3%, 25% { color: #4a3580; } }
/* Pour qui ? — carrousel des trois métiers */
.hh-who { display: flex; flex-direction: column; gap: 56px; }
.hh-who__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hh-who__title { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 16px; }
.hh-who__lead { grid-column: 9 / span 4; margin: 0 0 6px; }
.hh-carousel { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hh-peek { position: relative; flex: none; width: 104px; height: 300px; padding: 8px; box-sizing: border-box; border: none; border-radius: var(--radius-xl); background: var(--bg-surface); cursor: pointer; overflow: visible; }
.hh-peek > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.hh-card { position: relative; flex: 0 1 940px; min-width: 0; height: 404px; box-sizing: border-box; padding: 32px; display: flex; gap: 32px; border-radius: var(--radius-xl); background: var(--bg-surface); }
.hh-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hh-card__badge { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 40px; padding: 0 16px 0 5px; border: 1px solid var(--bg-page); border-radius: var(--radius-sm); }
.hh-card__badge-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-xs); background: var(--brand-100); }
.hh-card__badge-icon img { display: block; width: 24px; height: 24px; }
.hh-card__badge-text { font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; color: var(--ink-900); }
.hh-card__title { margin-top: 20px; }
.hh-card__lead { margin-top: 20px; }
.hh-card__link { margin-top: auto; align-self: flex-start; }
.hh-card__img { flex: none; width: 404px; height: 340px; object-fit: cover; border-radius: 10px; display: block; }
.hh-dots { display: flex; align-items: center; justify-content: center; gap: 16px; }
/* P15 (24/09) : écart 10 → 16 ; zone de clic 24 px de haut (24 × 24 pour un point) par un filet transparent
   de 8 px compensé par une marge négative — règles des points : voir « Production » ci-dessous. */
/* Garder le fil — bandeau photo */
.hh-fil__card { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #6b5a48; }
.hh-fil__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-fil__shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #1e1d1b70 0%, #1e1d1b70 30%, #1e1d1b52 62%, #1e1d1b3d 100%); }
.hh-fil__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 52px; padding: 64px 64px 40px; }
.hh-fil__head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hh-fil__kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-inverse); }
.hh-fil__kicker > i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--action); }
.hh-fil__title { max-width: 940px; }
.hh-fil__accent { font-weight: 600; white-space: nowrap; }
.hh-fil__logo { display: inline-block; height: 0.65em; width: auto; vertical-align: -1px; margin-right: 1px; }
.hh-fil__checks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 36px; margin-top: 6px; }
.hh-fil__check { display: inline-flex; align-items: center; gap: 12px; }
.hh-fil__check-icon { flex: none; display: grid; place-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: #ffffff29; }
.hh-fil__check-label { font: 600 19px/26px var(--font-sans); color: var(--ink-inverse); white-space: nowrap; }
.hh-fil__bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 36px; border-radius: var(--radius-lg); background: var(--bg-surface); }
.hh-fil__bar-text { margin: 0; max-width: 460px; font: 400 26px/34px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-900); }
.hh-fil__btns { flex: none; }
/* Aperçu — cartes empilées au défilement (Desktop/Laptop), entrelacées (Tablette/Mobile) */
.hh-apercu { display: flex; flex-direction: column; gap: var(--head-gap); }
.hh-apercu__grid { display: grid; grid-template-columns: 55% 41%; column-gap: 4%; align-items: start; }
.st-col { position: relative; height: 1920px; }
.hh-cardfit { display: contents; }
.hh-feat-col { position: relative; height: 1920px; }
.hh-feat-sticky { position: sticky; top: 156px; }
.hh-feat-list { display: flex; flex-direction: column; gap: 40px; }
.hh-feat { display: flex; align-items: flex-start; gap: 18px; }
.hh-feat__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hh-feat__tags { margin: 6px 0 0; font: 500 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.hh-feat-more { align-self: flex-start; }
/* Mouvement réduit : écran Descriptif seul, onglet 01 actif et sa jauge pleine (état statique des masters) */
@media (prefers-reduced-motion: reduce) {
.hh-tab.hp-d1 { color: var(--ink-900); background-color: #ffffff; }
.hh-tab .hp-bar.hp-d1 { transform: scaleX(1); opacity: 1; }
.hh-app__tab, .hh-app__tab > svg { animation: none; }
.hh-app__tab.hp-d1 { color: var(--ink-900); }
.hh-app__tab.hp-d1 > svg { color: var(--brand-ink); }
.hh-app__tab .hp-bar.hp-d1 { transform: scaleX(1); opacity: 1; }
}
/* ==========================================================================
   Production — styles inline des masters convertis en classes (decisions.md §4,
   responsive.md §4.2) et états pilotés par page-home.js. Valeurs identiques aux masters.
   ========================================================================== */

/* Hero : titre, chapô, boutons (styles inline du master) */
.hh-head .t-display { margin: 22px 0 0; color: var(--ink-inverse); }
.hh-head .t-display .oe-accent { display: inline; color: var(--ink-inverse); letter-spacing: -1.6px; }
.hh-head .t-lead-hero { margin: 20px 0 0; color: rgba(255, 255, 255, 0.88); }
.hh-head .c-btns { margin-top: 30px; justify-content: center; }
.oe-on-dark .hh-head__light, .oe-on-dark .hh-head__light:hover { border-color: var(--ink-inverse); background: var(--ink-inverse); color: var(--ink-900); }
/* Bandeau : affiche (image) toujours présente ; vidéo ajoutée ≥ 768 px hors mouvement réduit (P12), visible dès sa lecture. */
.hh-band__poster { object-position: 50% 50%; }
.hh-band__video { object-position: 50% 50%; opacity: 0; transition: opacity 400ms var(--ease-enter); }
.hh-band__video.is-playing { opacity: 1; }
/* Fenêtre : points de la barre, jauges des onglets */
/* 11 px à tous les niveaux, comme les masters : dans le prototype, le style inline l'emporte sur la règle Mobile
   « .hh-bar__dots > span { 9px } » de accueil.css ; spécificité 0,2,0 pour reproduire ce rendu validé. */
.hh-bar__dots > .hh-bar__dot { width: 11px; height: 11px; border-radius: 50%; }
.hh-bar__dot--1 { background: var(--brand-300); }
.hh-bar__dot--2 { background: var(--action); }
.hh-bar__dot--3 { background: var(--ink-inverse); }
.hh-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--action); }

/* Carrousel : encoches des vignettes, points (P15 : écart 16, zone de clic 24 px de haut) */
.hh-peek__notch { position: absolute; top: 50%; margin-top: -15px; display: block; fill: var(--bg-surface); }
.hh-peek__notch--prev { left: calc(100% - 1px); }
.hh-peek__notch--next { right: calc(100% - 1px); }
.hh-dots .hp-ptab { position: relative; flex: 0 0 auto; box-sizing: content-box; width: 8px; height: 8px; margin: -8px; padding: 0; border: 8px solid transparent; border-radius: 999px; background: var(--brand-300); background-clip: padding-box; cursor: pointer; overflow: hidden; transition: width 300ms cubic-bezier(0, 0, 0.2, 1); }
.hh-dots .hp-ptab.is-active { width: 72px; background-color: var(--border-100); }
.hh-dots .hp-prog { position: absolute; inset: 0; display: block; border-radius: 999px; background: var(--action); opacity: 0; }
.hh-dots .is-active > .hp-prog { opacity: 1; }
.hh-dots .hp-ptab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hh-card { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .hh-dots .hp-ptab { transition: none; } }

/* Garder le fil : cadrage, délais d'apparition (M05), titre blanc ; déclenché à l'entrée dans l'écran */
.hh-fil__img { object-position: 50% 62%; }
.hh-fil .hh-fil__kicker { animation-delay: 0.05s; }
.hh-fil .hh-fil__title { animation-delay: 0.15s; color: var(--ink-inverse); }
.hh-fil .hh-fil__checks { animation-delay: 0.25s; }
.hh-fil .hh-fil__bar { animation-delay: 0.4s; }
.has-js .hh-fil:not(.is-inview) .hp-up { animation-play-state: paused; }
/* Scènes du hero : boucles mises en pause quand la fenêtre est hors écran (page-home.js) — synchronisation conservée. */
.hh-panel.is-offscreen, .hh-panel.is-offscreen * { animation-play-state: paused; }

/* Une logique commune : titre, sentinelles des timelines de vue, pictogrammes */
.hh-apercu__title { max-width: 820px; }
.st-sent { height: 80px; }
.hh-feat__icon { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 1439px) {
.hh { --hh-top: 168px; --hh-band: 720px; }
.hh-peek { width: 88px; height: 280px; }
.hh-card { height: 388px; padding: 28px; gap: 28px; }
.hh-card__img { width: 43%; height: auto; aspect-ratio: 404 / 340; align-self: center; }
.st-col { container-type: inline-size; }
/* carte 660 × 620 réduite à la largeur de la colonne ; l’origine 50 % 0 (recul au défilement) est conservée : on recentre la carte */
  .st-card { scale: var(--st-fit, 1); scale: min(1, tan(atan2(100cqw, 660px))); margin-left: var(--st-ml, 0px); margin-left: min(0px, (100cqw - 660px) / 2); }
.hh-fil__body { padding: 56px 48px 40px; gap: 44px; }
}
@media (max-width: 1023px) {
.hh { --hh-top: 152px; --hh-band: 680px; --hh-chrome: 94px; }
.hh-glow--1 { width: 90%; height: 300px; }
.hh-glow--2 { width: 70%; }
.hh-bar { height: 48px; }
.hh-bar__dots, .hh-bar__end { width: 72px; }
.hh-bar__url { width: 320px; }
.hh-tab { padding: 0 14px; gap: 8px; }
.hh-who { gap: 40px; }
.hh-who__head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.hh-who__title, .hh-who__lead { grid-column: auto; }
.hh-who__lead { margin: 0; max-width: 560px; }
.hh-peek { display: none; }
.hh-card { flex: 1 1 auto; height: auto; min-height: 360px; padding: 28px; }
.hh-fil__body { padding: 48px 32px 32px; gap: 40px; }
.hh-fil__bar { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
.hh-fil__bar-text { max-width: none; font-size: 24px; line-height: 32px; }
/* aperçu : colonne unique, fonctionnalité puis sa carte */
  .hh-apercu__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.st-col, .hh-feat-col, .hh-feat-sticky, .hh-feat-list { display: contents; }
.st-sent-2, .st-sent-3 { display: none; }
.hh-cardfit { display: block; position: relative; width: 100%; max-width: 660px; aspect-ratio: 660 / 620; container-type: inline-size; margin-bottom: 24px; overflow: hidden; overflow: clip; }
.hh-cardfit > .st-card { position: absolute; top: 0; left: 0; margin-left: 0; animation: none; transform: none; scale: var(--st-fit, 1); scale: min(1, tan(atan2(100cqw, 660px))); transform-origin: 0 0; }
.hh-o1 { order: 1; }
.hh-o2 { order: 2; }
.hh-o3 { order: 3; }
.hh-o4 { order: 4; }
.hh-o5 { order: 5; }
.hh-o6 { order: 6; }
.hh-o7 { order: 7; }
.hh-feat-more { justify-self: start; }
}
@media (max-width: 767px) {
.hh { --hh-top: 120px; --hh-band: 640px; --hh-chrome: 44px; }
.hh-glow--1 { top: calc(var(--hh-top) - 20px); width: 120%; height: 360px; filter: blur(48px); }
.hh-glow--2 { top: calc(var(--hh-top) + 220px); width: 100%; }
.hh-badge { font-size: 12px; gap: 8px; }
.hh-head .t-display { margin-top: 20px; }
.hh-head .c-btns { margin-top: 28px; }
.hh-bar { height: 44px; padding: 0 12px; gap: 10px; }
/* adresse centrée dans la barre : colonnes latérales égales (points à gauche, vide à droite) */
  .hh-bar__dots { flex: 1 1 0; width: auto; gap: 6px; }
.hh-bar__dots > span { width: 9px; height: 9px; }
.hh-bar__mid { flex: none; }
.hh-bar__end { flex: 1 1 0; width: auto; }
.hh-bar__url { width: auto; padding: 0 10px; font-size: 11px; }
/* fenêtre : onglets du haut et scène Desktop remplacés par les écrans natifs + barre d’onglets en bas ;
     la photo s’arrête au bas de la barre d’adresse (--hh-chrome = 44) */
  .hh-tabs, .hh-stage { display: none; }
.hh-app { display: block; }
.hh-who { gap: 32px; }
.hh-card { flex-direction: column-reverse; padding: 16px 16px 24px; gap: 20px; min-height: 0; }
.hh-card__img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.hh-card__text { padding: 0 4px; }
.hh-card__title { margin-top: 16px; }
.hh-card__lead { margin-top: 12px; }
.hh-card__link { margin-top: 20px; }
.hh-fil__body { padding: 40px 20px 20px; gap: 32px; }
.hh-fil__head { gap: 18px; }
.hh-fil__accent { white-space: normal; }
.hh-fil__checks { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; text-align: left; }
.hh-fil__check-label { font-size: 16px; line-height: 22px; white-space: normal; }
.hh-fil__bar { padding: 24px 20px; }
.hh-fil__bar-text { font-size: 20px; line-height: 28px; }
}

/* [Production] Replis des fonctions CSS récentes — inactifs dans les navigateurs récents (rendu inchangé).
   1. Mise à l'échelle par min(1, tan(atan2(100cqw, L))) : scène du hero (L = 1200) et cartes empilées (L = 660), plus le
      recentrage margin-left des cartes. Sans trigonométrie CSS (Chrome < 111) ou sans unités cqw (Safari < 16), cette
      déclaration est rejetée à l'analyse et celle qui la précède dans la même règle s'applique : scale: var(--hh-fit | --st-fit,
      1), margin-left: var(--st-ml, 0px), variables calculées par page-home.js (§5) et suivies au redimensionnement (sans
      JavaScript : dessin à 100 %, rogné par son cadre comme avant).
   2. Débords voulus rognés par overflow: clip (Safari < 16) : .hh-cardfit prend overflow: hidden (déclaration précédente),
      et le halo du hero (.hh-glow--1, 120 % de large sous 768) est rogné par la section — sur mobile, rogner la racine du
      document (main.css) ne suffit pas, le viewport de mise en page s'élargirait. */
@supports not (overflow-x: clip) {
.hh { overflow-x: hidden; }
}

/* ==========================================================================
   Illustrations de l’Accueil (template-parts/visuals/) — styles du dessin convertis des styles
   inline du prototype, vérifiés élément par élément (scripts/qa/fvdiff.py : 0 écart).
   Racine : une classe (0,1,0) ; descendants : 0,2,0. À charger après ds-oeuvra-bundle.css.
   ========================================================================== */

/* FV-A1 — Hero Accueil · scène 01 « Descriptif » : styles du dessin, convertis des styles inline du prototype. */
.fv-a1 { position: absolute; top: 0px; left: 0px; width: 1200px; height: 500px; background: var(--bg-surface); }
.fv-a1 .fv-a1__head { box-sizing: border-box; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0px 48px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a1 .fv-a1__project { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a1 .fv-a1__screen-name { margin-left: auto; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a1 .fv-a1__body { position: relative; box-sizing: border-box; width: 1200px; height: 444px; padding: 32px 48px; display: flex; flex-direction: column; justify-content: center; }
.fv-a1 .fv-a1__table { display: flex; flex-direction: column; gap: 6px; }
.fv-a1 .fv-a1__table-head { animation-delay: 0.1s; display: flex; align-items: center; gap: 0px; box-sizing: border-box; height: 18px; padding: 0px 18px; }
.fv-a1 .fv-a1__table-head-label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-a1 .fv-a1__table-head-cols { margin-left: auto; display: grid; grid-template-columns: 84px 52px 84px 100px 100px 68px; gap: 6px; font-weight: 500; font-size: 9px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); text-align: right; }
.fv-a1 .fv-a1__lot { animation-delay: 0.25s; display: flex; align-items: center; gap: 14px; box-sizing: border-box; height: 44px; padding: 0px 18px; border-radius: var(--radius-md); background: var(--bg-beige); }
.fv-a1 .fv-a1__lot-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--lot-1); }
.fv-a1 .fv-a1__code { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a1 .fv-a1__lot-name { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a1 .fv-a1__meta { font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a1 .fv-a1__lot-amounts { animation-delay: 1.6s; margin-left: auto; display: grid; grid-template-columns: 84px 52px 84px 100px 100px 68px; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); text-align: right; }
.fv-a1 .fv-a1__amount-muted { color: var(--ink-500); font-weight: 400; }
.fv-a1 .fv-a1__lot-share { color: var(--ink-500); font-weight: 500; }
.fv-a1 .fv-a1__sublot { animation-delay: 0.4s; margin-left: 36px; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 38px; padding: 0px 16px; border-radius: var(--radius-md); box-shadow: inset 3px 0 0 var(--lot-1); }
.fv-a1 .fv-a1__sublot-swatch { flex: 0 0 auto; box-sizing: border-box; width: 12px; height: 12px; border-radius: 4px; background: var(--lot-1-tint); box-shadow: inset 0 0 0 1.5px var(--lot-1); }
.fv-a1 .fv-a1__sublot-name { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a1 .fv-a1__sublot-amounts { animation-delay: 1.6s; margin-left: auto; display: grid; grid-template-columns: 84px 52px 84px 100px 100px 68px; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); text-align: right; }
.fv-a1 .fv-a1__sublot-share { color: var(--ink-500); }
.fv-a1 .fv-a1__task { animation-delay: 0.65s; margin-left: 36px; box-sizing: border-box; border-radius: var(--radius-md); border-width: 1.5px; border-style: solid; border-top-color: var(--ink-900); border-right-color: var(--ink-900); border-bottom-color: var(--ink-900); border-left-color: var(--ink-900); background: var(--bg-surface); overflow: hidden; }
.fv-a1 .fv-a1__task-head { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 46px; padding: 0px 16px 0px 36px; background: var(--action-tint); }
.fv-a1 .fv-a1__task-code { font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a1 .fv-a1__task-name { font-weight: 500; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.fv-a1 .fv-a1__task-badge { height: 20px; font-size: 11px; }
.fv-a1 .fv-a1__task-amounts { animation-delay: 1.2s; margin-left: auto; display: grid; grid-template-columns: 84px 52px 84px 100px 100px 68px; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); text-align: right; }
.fv-a1 .fv-a1__price-input-active { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; padding: 0px 8px; border-width: 1px; border-style: solid; border-top-color: var(--action); border-right-color: var(--action); border-bottom-color: var(--action); border-left-color: var(--action); border-radius: var(--radius-xs); background: var(--bg-surface); font-weight: 500; }
.fv-a1 .fv-a1__vat-input { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; padding: 0px 8px; 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); border-radius: var(--radius-xs); background: var(--bg-surface); font-weight: 400; color: var(--ink-500); }
.fv-a1 .fv-a1__price-ttc-input { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; padding: 0px 8px; 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); border-radius: var(--radius-xs); background: var(--bg-surface); font-weight: 500; }
.fv-a1 .fv-a1__task-total { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; }
.fv-a1 .fv-a1__task-share { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; color: var(--ink-500); font-weight: 500; }
.fv-a1 .fv-a1__task-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 12px 36px; }
.fv-a1 .fv-a1__details { animation-delay: 0.9s; display: flex; align-items: center; gap: 16px; }
.fv-a1 .fv-a1__description { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 5px; }
.fv-a1 .fv-a1__description-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-a1 .fv-a1__description-input { box-sizing: border-box; display: flex; align-items: center; height: 30px; padding: 0px 10px; 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); border-radius: var(--radius-sm); font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-a1 .fv-a1__specs { flex: 0 0 auto; display: grid; grid-template-columns: 112px 64px 72px; gap: 8px; }
.fv-a1 .fv-a1__spec { display: flex; flex-direction: column; gap: 5px; }
.fv-a1 .fv-a1__spec-label { font-weight: 500; font-size: 9px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-a1 .fv-a1__room-select { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0px 8px; border-width: 1px; border-style: solid; border-top-color: var(--action); border-right-color: var(--action); border-bottom-color: var(--action); border-left-color: var(--action); border-radius: var(--radius-sm); font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a1 .fv-a1__qty-input { box-sizing: border-box; display: flex; align-items: center; height: 30px; padding: 0px 8px; 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); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a1 .fv-a1__unit-select { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0px 8px; 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); border-radius: var(--radius-sm); font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a1 .fv-a1__checklist { animation-delay: 1.05s; display: flex; flex-direction: column; gap: 4px; }
.fv-a1 .fv-a1__checklist-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-a1 .fv-a1__check { display: flex; align-items: center; gap: 10px; min-height: 22px; font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a1 .fv-a1__checkbox-done { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 16px; height: 16px; border-radius: 4px; border-width: 1px; 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); background: var(--bg-surface); }
.fv-a1 .fv-a1__tick-reveal-1 { animation-delay: 1.9s; position: absolute; inset: -1px; }
.fv-a1 .fv-a1__tick { position: absolute; inset: 0px; display: grid; place-content: center; border-radius: 4px; background: var(--action); }
.fv-a1 .fv-a1__tick-reveal-2 { animation-delay: 2.2s; position: absolute; inset: -1px; }
.fv-a1 .fv-a1__checkbox { flex: 0 0 auto; box-sizing: border-box; width: 16px; height: 16px; border-radius: 4px; border-width: 1px; 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); background: var(--bg-surface); }

/* FV-A2 — Hero Accueil · scène 02 « Consultation » : styles du dessin, convertis des styles inline du prototype. */
.fv-a2 { position: absolute; top: 0px; left: 0px; width: 1200px; height: 500px; background: var(--bg-surface); }
.fv-a2 .fv-a2__head { box-sizing: border-box; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0px 48px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a2 .fv-a2__project { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a2 .fv-a2__screen-name { margin-left: auto; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a2 .fv-a2__body { position: relative; box-sizing: border-box; width: 1200px; height: 444px; padding: 32px 48px; display: flex; flex-direction: column; justify-content: center; }
.fv-a2 .fv-a2__table { display: flex; flex-direction: column; }
.fv-a2 .fv-a2__table-head { animation-delay: 5.1s; display: grid; grid-template-columns: 340px repeat(3, minmax(0px, 1fr)); align-items: end; column-gap: 16px; padding-bottom: 14px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a2 .fv-a2__lots-label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a2 .fv-a2__company { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fv-a2 .fv-a2__company--a { animation-delay: 5.2s; }
.fv-a2 .fv-a2__company-avatar { display: grid; place-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--brand-100); }
.fv-a2 .fv-a2__company-name { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a2 .fv-a2__company--b { animation-delay: 5.32s; }
.fv-a2 .fv-a2__company--c { animation-delay: 5.44s; }
.fv-a2 .fv-a2__row { display: grid; grid-template-columns: 340px repeat(3, minmax(0px, 1fr)); align-items: center; column-gap: 16px; height: 76px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a2 .fv-a2__row--lot-1 { animation-delay: 5.6s; }
.fv-a2 .fv-a2__lot { display: flex; align-items: center; gap: 12px; }
.fv-a2 .fv-a2__lot-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; }
.fv-a2 .fv-a2__lot-swatch--lot-1 { background: var(--lot-1); }
.fv-a2 .fv-a2__lot-number { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a2 .fv-a2__lot-name { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a2 .fv-a2__cell { display: flex; justify-content: center; }
.fv-a2 .fv-a2__badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0px 12px 0px 8px; border-radius: var(--radius-full); background: var(--status-valid-tint); color: var(--status-valid-ink); font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); }
.fv-a2 .fv-a2__badge--lot-1-a { animation-delay: 6.3s; }
.fv-a2 .fv-a2__badge--lot-1-b { animation-delay: 6.45s; }
.fv-a2 .fv-a2__dash { width: 28px; height: 2px; border-radius: 1px; background: var(--border-100); }
.fv-a2 .fv-a2__row--lot-2 { animation-delay: 5.8s; }
.fv-a2 .fv-a2__lot-swatch--lot-2 { background: var(--lot-2); }
.fv-a2 .fv-a2__badge--lot-2-b { animation-delay: 6.75s; }
.fv-a2 .fv-a2__badge--lot-2-c { animation-delay: 6.9s; }
.fv-a2 .fv-a2__row--lot-4 { animation-delay: 6s; }
.fv-a2 .fv-a2__lot-swatch--lot-4 { background: var(--lot-4); }
.fv-a2 .fv-a2__badge--lot-4-a { animation-delay: 6.9s; }
.fv-a2 .fv-a2__badge--lot-4-c { animation-delay: 7.2s; }
.fv-a2 .fv-a2__note { animation-delay: 7.6s; display: flex; align-items: center; gap: 10px; padding-top: 14px; font-weight: 400; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-700); }

/* FV-A3 — Hero Accueil · scène 03 « Planning » : styles du dessin, convertis des styles inline du prototype. */
.fv-a3 { position: absolute; top: 0px; left: 0px; width: 1200px; height: 500px; background: var(--bg-surface); }
.fv-a3 .fv-a3__head { box-sizing: border-box; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0px 48px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a3 .fv-a3__project { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a3 .fv-a3__screen { margin-left: auto; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a3 .fv-a3__body { position: relative; box-sizing: border-box; width: 1200px; height: 444px; padding: 32px 48px; display: flex; flex-direction: column; justify-content: center; }
.fv-a3 .fv-a3__chart { position: relative; width: 1104px; height: 364px; }
.fv-a3 .fv-a3__week { position: absolute; top: 0px; font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a3 .fv-a3__week-line { position: absolute; top: 24px; width: 1px; height: 290px; background: var(--border-100); }
.fv-a3 .fv-a3__week-1 { animation-delay: 10.1s; left: 280px; }
.fv-a3 .fv-a3__week-2 { animation-delay: 10.14s; left: 383px; }
.fv-a3 .fv-a3__week-3 { animation-delay: 10.18s; left: 486px; }
.fv-a3 .fv-a3__week-4 { animation-delay: 10.22s; left: 589px; }
.fv-a3 .fv-a3__week-5 { animation-delay: 10.26s; left: 692px; }
.fv-a3 .fv-a3__week-6 { animation-delay: 10.3s; left: 795px; }
.fv-a3 .fv-a3__week-7 { animation-delay: 10.34s; left: 898px; }
.fv-a3 .fv-a3__week-8 { animation-delay: 10.38s; left: 1001px; }
.fv-a3 .fv-a3__links { position: absolute; left: 280px; top: 24px; }
.fv-a3 .fv-a3__link-1a-1b { animation-delay: 11.5s; }
.fv-a3 .fv-a3__link-1b-1c { animation-delay: 11.7s; }
.fv-a3 .fv-a3__link-1c-1d { animation-delay: 11.9s; }
.fv-a3 .fv-a3__link-1d-2 { animation-delay: 12.1s; }
.fv-a3 .fv-a3__lot { position: absolute; left: 0px; display: flex; align-items: center; gap: 12px; width: 260px; }
.fv-a3 .fv-a3__lot--1a { animation-delay: 10.2s; top: 64px; }
.fv-a3 .fv-a3__lot-code { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a3 .fv-a3__lot-name { font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a3 .fv-a3__bar { position: absolute; height: 32px; border-radius: var(--radius-sm); }
.fv-a3 .fv-a3__bar--lot-1 { background: var(--lot-1); }
.fv-a3 .fv-a3__bar--planned { opacity: 0.32; }
.fv-a3 .fv-a3__bar--1a-planned { animation-delay: 10.5s; left: 280px; top: 58px; width: 120px; }
.fv-a3 .fv-a3__bar--1a-done { animation-delay: 11s; left: 280px; top: 58px; width: 120px; }
.fv-a3 .fv-a3__lot--1b { animation-delay: 10.35s; top: 120px; }
.fv-a3 .fv-a3__bar--1b-planned { animation-delay: 10.65s; left: 424px; top: 114px; width: 152px; }
.fv-a3 .fv-a3__bar--1b-done { animation-delay: 11.15s; left: 424px; top: 114px; width: 152px; }
.fv-a3 .fv-a3__lot--1c { animation-delay: 10.5s; top: 176px; }
.fv-a3 .fv-a3__bar--1c-planned { animation-delay: 10.8s; left: 600px; top: 170px; width: 180px; }
.fv-a3 .fv-a3__bar--1c-done { animation-delay: 11.3s; left: 600px; top: 170px; width: 108px; }
.fv-a3 .fv-a3__lot--1d { animation-delay: 10.65s; top: 232px; }
.fv-a3 .fv-a3__bar--1d-planned { animation-delay: 10.95s; left: 804px; top: 226px; width: 156px; }
.fv-a3 .fv-a3__lot--2 { animation-delay: 10.8s; top: 288px; }
.fv-a3 .fv-a3__bar--lot-2 { background: var(--lot-2); }
.fv-a3 .fv-a3__bar--2-planned { animation-delay: 11.1s; left: 984px; top: 282px; width: 120px; }
.fv-a3 .fv-a3__today-line { animation-delay: 12.4s; position: absolute; left: 708px; top: 24px; width: 2px; height: 290px; background: var(--action); }
.fv-a3 .fv-a3__today { animation-delay: 12.4s; position: absolute; left: 660px; top: 318px; display: inline-flex; align-items: center; height: 24px; padding: 0px 12px; border-radius: var(--radius-full); background: var(--action-tint); font-weight: 600; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--action-ink); }
.fv-a3 .fv-a3__legend { animation-delay: 12.6s; position: absolute; right: 0px; top: 330px; display: flex; gap: 20px; font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a3 .fv-a3__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.fv-a3 .fv-a3__swatch { width: 22px; height: 8px; border-radius: 2px; background: var(--lot-1); }
.fv-a3 .fv-a3__swatch--planned { opacity: 0.32; }

/* FV-A4 — Hero Accueil · scène 04 « Situation » : styles du dessin, convertis des styles inline du prototype. */
.fv-a4 { position: absolute; top: 0px; left: 0px; width: 1200px; height: 500px; background: var(--bg-surface); }
.fv-a4 .fv-a4__head { box-sizing: border-box; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0px 48px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--bg-page); }
.fv-a4 .fv-a4__project { font-weight: 600; font-size: 15px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a4 .fv-a4__screen-name { margin-left: auto; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a4 .fv-a4__body { position: relative; box-sizing: border-box; width: 1200px; height: 444px; padding: 32px 48px; display: flex; flex-direction: column; justify-content: center; }
.fv-a4 .fv-a4__layout { display: flex; align-items: center; gap: 48px; }
.fv-a4 .fv-a4__lots { width: 664px; display: flex; flex-direction: column; gap: 14px; }
.fv-a4 .fv-a4__lot { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; border-radius: var(--radius-lg); background: var(--bg-beige); }
.fv-a4 .fv-a4__lot--1 { animation-delay: 15.2s; }
.fv-a4 .fv-a4__lot-head { display: flex; align-items: center; gap: 14px; }
.fv-a4 .fv-a4__lot-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; }
.fv-a4 .fv-a4__lot-swatch--1 { background: var(--lot-1); }
.fv-a4 .fv-a4__lot-number { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a4 .fv-a4__lot-name { font-weight: 600; font-size: 16px; line-height: 22px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a4 .fv-a4__lot-amount { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; line-height: 24px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a4 .fv-a4__lot-amount--1 { animation-delay: 16.1s; }
.fv-a4 .fv-a4__gauge { position: relative; height: 14px; border-radius: var(--radius-full); background: var(--bg-page); overflow: hidden; }
.fv-a4 .fv-a4__gauge-fill { position: absolute; left: 0px; top: 0px; height: 14px; border-radius: var(--radius-full); background: var(--status-valid); }
.fv-a4 .fv-a4__gauge-fill--1 { animation-delay: 15.55s; width: 62%; }
.fv-a4 .fv-a4__legend { display: flex; gap: 24px; font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a4 .fv-a4__legend--1 { animation-delay: 16.4s; }
.fv-a4 .fv-a4__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.fv-a4 .fv-a4__legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.fv-a4 .fv-a4__legend-dot--paid { background: var(--status-valid); }
.fv-a4 .fv-a4__legend-dot--remaining { background: var(--bg-page); }
.fv-a4 .fv-a4__lot--2 { animation-delay: 15.45s; }
.fv-a4 .fv-a4__lot-swatch--2 { background: var(--lot-2); }
.fv-a4 .fv-a4__lot-amount--2 { animation-delay: 16.35s; }
.fv-a4 .fv-a4__gauge-fill--2 { animation-delay: 15.8s; width: 28%; }
.fv-a4 .fv-a4__legend--2 { animation-delay: 16.65s; }
.fv-a4 .fv-a4__lot--4 { animation-delay: 15.7s; }
.fv-a4 .fv-a4__lot-swatch--4 { background: var(--lot-4); }
.fv-a4 .fv-a4__lot-badge { animation-delay: 16.6s; margin-left: auto; }
.fv-a4 .fv-a4__legend--4 { animation-delay: 16.9s; }
.fv-a4 .fv-a4__total { animation-delay: 15.8s; width: 392px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fv-a4 .fv-a4__ring { position: relative; width: 220px; height: 220px; }
.fv-a4 .fv-a4__ring-arc { animation-delay: 16.1s; }
.fv-a4 .fv-a4__ring-content { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.fv-a4 .fv-a4__total-label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a4 .fv-a4__total-amount { animation-delay: 17s; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 22px; line-height: 28px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a4 .fv-a4__total-caption { font-weight: 400; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-700); text-align: center; }

/* Hero Mobile (D05) — écrans natifs .hh-app : styles du dessin, convertis des styles inline du prototype. */
.hh-app .hh-app__d-0-1 { animation-delay: 0.1s; }
.hh-app .hh-app__d-0-25 { animation-delay: 0.25s; }
.hh-app .hh-app__d-0-4 { animation-delay: 0.4s; }
.hh-app .hh-app__d-0-65 { animation-delay: 0.65s; }
.hh-app .hh-app__d-0-9 { animation-delay: 0.9s; }
.hh-app .hh-app__d-1-05 { animation-delay: 1.05s; }
.hh-app .hh-app__d-1-2 { animation-delay: 1.2s; }
.hh-app .hh-app__d-5-1 { animation-delay: 5.1s; }
.hh-app .hh-app__d-5-2 { animation-delay: 5.2s; }
.hh-app .hh-app__swatch--lot-1 { background: var(--lot-1); }
.hh-app .hh-app__d-5-8 { animation-delay: 5.8s; }
.hh-app .hh-app__d-5-95 { animation-delay: 5.95s; }
.hh-app .hh-app__d-5-35 { animation-delay: 5.35s; }
.hh-app .hh-app__swatch--lot-2 { background: var(--lot-2); }
.hh-app .hh-app__d-6-3 { animation-delay: 6.3s; }
.hh-app .hh-app__d-6-45 { animation-delay: 6.45s; }
.hh-app .hh-app__d-5-5 { animation-delay: 5.5s; }
.hh-app .hh-app__swatch--lot-4 { background: var(--lot-4); }
.hh-app .hh-app__d-6-75 { animation-delay: 6.75s; }
.hh-app .hh-app__d-6-9 { animation-delay: 6.9s; }
.hh-app .hh-app__d-7-6 { animation-delay: 7.6s; }
.hh-app .hh-app__d-10-1 { animation-delay: 10.1s; }
.hh-app .hh-app__at-s1 { left: 0%; }
.hh-app .hh-app__at-s2 { left: 12.5%; }
.hh-app .hh-app__at-s3 { left: 25%; }
.hh-app .hh-app__at-s4 { left: 37.5%; }
.hh-app .hh-app__at-s5 { left: 50%; }
.hh-app .hh-app__at-s6 { left: 62.5%; }
.hh-app .hh-app__at-s7 { left: 75%; }
.hh-app .hh-app__at-s8 { left: 87.5%; }
.hh-app .hh-app__d-10-14 { animation-delay: 10.14s; }
.hh-app .hh-app__d-10-18 { animation-delay: 10.18s; }
.hh-app .hh-app__d-10-22 { animation-delay: 10.22s; }
.hh-app .hh-app__d-10-26 { animation-delay: 10.26s; }
.hh-app .hh-app__d-10-3 { animation-delay: 10.3s; }
.hh-app .hh-app__d-10-34 { animation-delay: 10.34s; }
.hh-app .hh-app__d-10-38 { animation-delay: 10.38s; }
.hh-app .hh-app__d-10-2 { animation-delay: 10.2s; }
.hh-app .hh-app__tl--1a { left: 0%; }
.hh-app .hh-app__d-10-5 { animation-delay: 10.5s; }
.hh-app .hh-app__gbar--1a { left: 0%; width: 14.563%; background: var(--lot-1); }
.hh-app .hh-app__gbar--plan { opacity: 0.32; }
.hh-app .hh-app__d-11 { animation-delay: 11s; }
.hh-app .hh-app__d-10-35 { animation-delay: 10.35s; }
.hh-app .hh-app__tl--1b { left: 17.476%; }
.hh-app .hh-app__d-10-65 { animation-delay: 10.65s; }
.hh-app .hh-app__gbar--1b { left: 17.476%; width: 18.447%; background: var(--lot-1); }
.hh-app .hh-app__d-11-15 { animation-delay: 11.15s; }
.hh-app .hh-app__tl--1c { left: 38.835%; }
.hh-app .hh-app__d-10-8 { animation-delay: 10.8s; }
.hh-app .hh-app__gbar--1c { left: 38.835%; width: 21.845%; background: var(--lot-1); }
.hh-app .hh-app__d-11-3 { animation-delay: 11.3s; }
.hh-app .hh-app__gbar--1c-done { left: 38.835%; width: 13.107%; background: var(--lot-1); }
.hh-app .hh-app__tl--1d { left: 63.592%; }
.hh-app .hh-app__d-10-95 { animation-delay: 10.95s; }
.hh-app .hh-app__gbar--1d { left: 63.592%; width: 18.932%; background: var(--lot-1); }
.hh-app .hh-app__tl--2 { right: 0px; }
.hh-app .hh-app__d-11-1 { animation-delay: 11.1s; }
.hh-app .hh-app__gbar--2 { left: 85.437%; width: 14.563%; background: var(--lot-2); }
.hh-app .hh-app__d-12-4 { animation-delay: 12.4s; }
.hh-app .hh-app__now--today { left: 51.942%; }
.hh-app .hh-app__pill--today { left: 52.063%; }
.hh-app .hh-app__d-12-6 { animation-delay: 12.6s; }
.hh-app .hh-app__d-15-1 { animation-delay: 15.1s; }
.hh-app .hh-app__d-15-2 { animation-delay: 15.2s; }
.hh-app .hh-app__d-16-1 { animation-delay: 16.1s; }
.hh-app .hh-app__d-15-45 { animation-delay: 15.45s; }
.hh-app .hh-app__d-15-55 { animation-delay: 15.55s; }
.hh-app .hh-app__track-fill--62 { width: 62%; }
.hh-app .hh-app__d-15-7 { animation-delay: 15.7s; }
.hh-app .hh-app__d-15-8 { animation-delay: 15.8s; }
.hh-app .hh-app__track-fill--28 { width: 28%; }
.hh-app .hh-app__d-15-95 { animation-delay: 15.95s; }
.hh-app .hh-app__d-16-6 { animation-delay: 16.6s; }

/* FV-A5 — Accueil · carte « Structurer » : styles du dessin, convertis des styles inline du prototype. */
.fv-a5 { position: sticky; top: 120px; box-sizing: border-box; width: 660px; height: 620px; border-radius: var(--radius-xl); border-width: 1px; border-style: solid; border-top-color: var(--border-100); border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); overflow: hidden; background: var(--gradient-parme); transform-origin: 50% 0px; }
.fv-a5 .fv-a5__inner { position: relative; width: 100%; height: 556px; margin-top: 32px; transform-origin: 50% 0px; }
.fv-a5 .fv-a5__window { position: absolute; left: 36px; top: 128px; width: 588px; box-sizing: border-box; border-radius: var(--radius-lg); 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); }
.fv-a5 .fv-a5__window-head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0px 18px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a5 .fv-a5__project { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a5 .fv-a5__eyebrow { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a5 .fv-a5__lot-open { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0px 18px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a5 .fv-a5__lot-swatch-1 { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--lot-1); }
.fv-a5 .fv-a5__code { font-weight: 600; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a5 .fv-a5__lot-name { font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a5 .fv-a5__lot-amount { margin-left: auto; padding-right: 0px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a5 .fv-a5__lot-tax { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a5 .fv-a5__sublot { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0px 18px 0px 42px; box-shadow: inset 3px 0 0 var(--lot-1); }
.fv-a5 .fv-a5__sublot-swatch { flex: 0 0 auto; box-sizing: border-box; width: 10px; height: 10px; border-radius: 3px; background: var(--lot-1-tint); box-shadow: inset 0 0 0 1.5px var(--lot-1); }
.fv-a5 .fv-a5__sublot-name { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a5 .fv-a5__sublot-count { font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a5 .fv-a5__task { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0px 18px 0px 66px; background: var(--action-tint); box-shadow: inset 3px 0 0 var(--lot-1); }
.fv-a5 .fv-a5__task-code { font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a5 .fv-a5__task-name { font-weight: 500; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a5 .fv-a5__task-figures { margin-left: auto; padding-right: 0px; display: inline-flex; gap: 14px; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a5 .fv-a5__task-amount { font-weight: 600; color: var(--ink-900); }
.fv-a5 .fv-a5__check { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0px 18px 0px 66px; box-shadow: inset 3px 0 0 var(--lot-1); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-100); }
.fv-a5 .fv-a5__checkbox { flex: 0 0 auto; display: grid; place-content: center; width: 14px; height: 14px; border-radius: 4px; background: var(--action); }
.fv-a5 .fv-a5__check-label { font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a5 .fv-a5__check-count { margin-left: auto; padding-right: 0px; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a5 .fv-a5__lot-closed { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0px 18px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-a5 .fv-a5__lot-swatch-2 { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--lot-2); }
.fv-a5 .fv-a5__library { position: absolute; top: -86px; width: 244px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-lg); 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); box-shadow: rgba(30, 29, 27, 0.08) 0px 8px 24px; left: 283px; }
.fv-a5 .fv-a5__library-item-selected { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0px 8px; border-radius: var(--radius-sm); background: var(--action-tint); }
.fv-a5 .fv-a5__library-name { font-weight: 600; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; }
.fv-a5 .fv-a5__library-count { margin-left: auto; font-weight: 400; font-size: 11px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fv-a5 .fv-a5__library-item { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0px 8px; }
.fv-a5 .fv-a5__checkbox-empty { flex: 0 0 auto; box-sizing: border-box; width: 14px; height: 14px; border-radius: 4px; border-width: 1px; 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); background: var(--bg-surface); }

/* FV-A6 — Accueil · carte « Coordonner » : styles du dessin, convertis des styles inline du prototype. */
.fv-a6 { position: sticky; top: 136px; box-sizing: border-box; width: 660px; height: 620px; border-radius: var(--radius-xl); border-width: 1px; border-style: solid; border-top-color: var(--border-100); border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); overflow: hidden; background: var(--bg-beige); transform-origin: 50% 0px; }
.fv-a6 .fv-a6__inner { position: relative; width: 100%; height: 556px; margin-top: 32px; transform-origin: 50% 0px; }
.fv-a6 .fv-a6__caption { position: absolute; left: 36px; top: 30px; margin: 0px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a6 .fv-a6__consult { position: absolute; left: 36px; top: 72px; width: 262px; box-sizing: border-box; border-radius: var(--radius-lg); 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); }
.fv-a6 .fv-a6__deadlines { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.fv-a6 .fv-a6__consult-title { font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); margin-bottom: 6px; }
.fv-a6 .fv-a6__deadline { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; }
.fv-a6 .fv-a6__deadline-label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a6 .fv-a6__deadline-date { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a6 .fv-a6__company { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0px 14px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-a6 .fv-a6__company-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.fv-a6 .fv-a6__company-swatch--lot-1 { background: var(--lot-1); }
.fv-a6 .fv-a6__company-name { font-weight: 500; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-a6 .fv-a6__company-swatch--lot-2 { background: var(--lot-2); }
.fv-a6 .fv-a6__company-swatch--lot-3 { background: var(--lot-3); }
.fv-a6 .fv-a6__company-badge { margin-left: auto; flex: 0 0 auto; font-size: 11px; }
.fv-a6 .fv-a6__company-swatch--lot-4 { background: var(--lot-4); }
.fv-a6 .fv-a6__link { position: absolute; left: 296px; top: 170px; }
.fv-a6 .fv-a6__planning { position: absolute; left: 318px; top: 120px; width: 362px; box-sizing: border-box; border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-width: 1px 0px 1px 1px; border-top-style: solid; border-top-color: var(--border-100); border-bottom-style: solid; border-bottom-color: var(--border-100); border-left-style: solid; border-left-color: var(--border-100); border-right-style: initial; border-right-color: initial; background: var(--bg-surface); }
.fv-a6 .fv-a6__planning-head { display: flex; align-items: center; height: 34px; }
.fv-a6 .fv-a6__planning-title { flex: 0 0 auto; width: 136px; padding-left: 12px; font-weight: 600; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a6 .fv-a6__months { flex: 1 1 auto; display: flex; border-left-width: 1px; border-left-style: solid; border-left-color: var(--border-100); }
.fv-a6 .fv-a6__month { padding-left: 8px; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a6 .fv-a6__month--fixed { flex: 0 0 auto; width: 96px; }
.fv-a6 .fv-a6__month--fill { flex: 1 1 0%; border-left-width: 1px; border-left-style: solid; border-left-color: var(--border-100); }
.fv-a6 .fv-a6__task { display: flex; align-items: center; height: 40px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-a6 .fv-a6__task-label { flex: 0 0 auto; width: 112px; display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.fv-a6 .fv-a6__task-code { font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a6 .fv-a6__task-name { font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-a6 .fv-a6__task-duration { flex: 0 0 auto; width: 24px; font-weight: 400; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a6 .fv-a6__task-track { position: relative; flex: 1 1 auto; height: 40px; border-left-width: 1px; border-left-style: solid; border-left-color: var(--border-100); }
.fv-a6 .fv-a6__task-bar { position: absolute; top: 10px; height: 20px; border-radius: 4px; display: flex; align-items: center; padding: 0px 8px; font-weight: 600; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: rgb(255, 255, 255); white-space: nowrap; overflow: hidden; }
.fv-a6 .fv-a6__task-bar--3a { left: 6px; width: 50px; background: var(--lot-3); }
.fv-a6 .fv-a6__task-bar--3b { left: 50px; width: 42px; background: var(--lot-3); }
.fv-a6 .fv-a6__task-bar--3c { left: 26px; width: 30px; background: var(--lot-3); }
.fv-a6 .fv-a6__task-bar--4a { left: 100px; width: 78px; background: var(--lot-4); }
.fv-a6 .fv-a6__task-bar--4b { left: 144px; width: 54px; background: var(--lot-4); }
.fv-a6 .fv-a6__task-bar--4c { left: 180px; width: 30px; background: var(--lot-4); }

/* FV-A7 — Accueil · carte « Suivre » : styles du dessin, convertis des styles inline du prototype. */
.fv-a7 { position: sticky; top: 152px; box-sizing: border-box; width: 660px; height: 620px; border-radius: var(--radius-xl); border-width: 1px; border-style: solid; border-top-color: var(--border-100); border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); overflow: hidden; background: var(--bg-surface); transform-origin: 50% 0px; }
.fv-a7 .fv-a7__inner { position: relative; width: 100%; height: 556px; margin-top: 32px; transform-origin: 50% 0px; }
.fv-a7 .fv-a7__caption { position: absolute; left: 36px; top: 30px; margin: 0px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a7 .fv-a7__summary { position: absolute; left: 36px; right: 36px; top: 70px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fv-a7 .fv-a7__total { display: flex; flex-direction: column; gap: 6px; }
.fv-a7 .fv-a7__label { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.fv-a7 .fv-a7__total-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 30px; line-height: 36px; font-family: var(--font-sans); letter-spacing: -0.01em; color: var(--ink-900); }
.fv-a7 .fv-a7__total-unit { font-weight: 500; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a7 .fv-a7__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fv-a7 .fv-a7__balance { font-variant-numeric: tabular-nums; font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a7 .fv-a7__balance-amount { font-weight: 600; color: var(--action-ink); }
.fv-a7 .fv-a7__lots { position: absolute; left: 36px; right: 36px; top: 150px; }
.fv-a7 .fv-a7__lot { display: flex; flex-direction: column; gap: 10px; padding: 18px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-100); }
.fv-a7 .fv-a7__lot-head { display: flex; align-items: center; gap: 12px; }
.fv-a7 .fv-a7__lot-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.fv-a7 .fv-a7__lot-swatch--lot-1 { background: var(--lot-1); }
.fv-a7 .fv-a7__lot-number { font-weight: 600; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; color: var(--ink-500); }
.fv-a7 .fv-a7__lot-name { font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.fv-a7 .fv-a7__lot-company { font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a7 .fv-a7__lot-amount { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; line-height: 22px; font-family: var(--font-sans); color: var(--ink-900); }
.fv-a7 .fv-a7__lot-unit { font-weight: 500; font-size: 10px; line-height: 14px; font-family: var(--font-sans); color: var(--ink-500); }
.fv-a7 .fv-a7__gauge { display: flex; gap: 3px; height: 10px; }
.fv-a7 .fv-a7__gauge-deposit { flex: 0 0 30%; border-radius: 5px 0px 0px 5px; }
.fv-a7 .fv-a7__gauge-deposit--lot-1 { background: var(--lot-1); }
.fv-a7 .fv-a7__gauge-balance { flex: 1 1 0%; border-radius: 0px 5px 5px 0px; }
.fv-a7 .fv-a7__gauge-balance--lot-1 { background: var(--lot-1-tint); }
.fv-a7 .fv-a7__terms { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 12px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-700); }
.fv-a7 .fv-a7__lot-swatch--lot-2 { background: var(--lot-2); }
.fv-a7 .fv-a7__gauge-deposit--lot-2 { background: var(--lot-2); }
.fv-a7 .fv-a7__gauge-balance--lot-2 { background: var(--lot-2-tint); }
.fv-a7 .fv-a7__attachments { position: absolute; left: 36px; right: 36px; bottom: 30px; display: flex; gap: 8px; }
.fv-a7 .fv-a7__attachment { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0px 10px; border-radius: var(--radius-full); 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); font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); color: var(--ink-500); }