/* ==========================================================================
   Œuvra — Architectes d’intérieur · feuille du gabarit templates/page-architectes-interieur.php (chargée après
   main.css).
   1. Base = handoff/design/css/pages/architectes-interieur.css, recopiée (animation M16, composition, responsive),
      sans ses déclarations prioritaires : elles ne battaient que les styles inline des cartes flottantes, devenus
      les fragments FV-AI3 / AI4 / AI5 (voir la fin du bloc Mobile).
   2. Styles inline du prototype (prototype/architectes-interieur.html) convertis en classes ai-* (spécificité 0,1,0,
      suffisante : main.css ne fixe ces propriétés sur ces éléments à aucun niveau ; sous 1024, l'empilement que
      main.css imposait par !important sur .l-split — comme sur les styles inline du prototype — est écrit par le bloc
      ≤ 1023 de la fin de cette partie).
   3. Pause hors écran des cartes flottantes (M16) — classe posée par page-architectes-interieur.js.
   4. Illustrations FV-AI1 … FV-AI6 (fragments convertis et vérifiés, vague 1).
   Composants partagés (main.css) : .c-hero (hero métier), .c-crumb, .l-split, .c-media, .c-fit, .c-shead,
   .c-rail-row, .c-num, .c-plan-tag, .c-arrow, .u-block, .c-cta (template-parts/layout/cta.php).
   ========================================================================== */

/* ---------- 1. architectes-interieur.css du handoff ---------- */

/* ---------- Animations et états propres à la page (hérités des maquettes validées) ---------- */
@keyframes bi-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bi-flotte { animation: bi-flotte 7s ease-in-out infinite; }
.bi-d2 { animation-delay: -2.3s; } .bi-d3 { animation-delay: -4.6s; }
@media (prefers-reduced-motion: reduce) { .bi-flotte { animation: none; } }

/* ---------- Composition et responsive ---------- */
/* Architectes d’intérieur — compositions propres à la page */
.ai-photo { flex: none; width: 46.667%; aspect-ratio: 560 / 620; }
.ai-s1-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ai-s2-text { flex: none; width: 36.667%; display: flex; flex-direction: column; gap: 18px; }
.ai-s2-vis { flex: none; width: 58%; }
.ai-rows { margin-top: var(--head-gap); }
.ai-fig { flex: none; width: 52.817%; }
.ai-fig__box { position: relative; width: 100%; aspect-ratio: 600 / 340; }
.ai-fig__photo { position: absolute; inset: 0; box-sizing: border-box; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
.ai-fig__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-fig__card { position: absolute; right: -16px; bottom: -16px; box-sizing: border-box; width: 300px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-100); display: flex; flex-direction: column; gap: 12px; }
.ai-docs { flex: 1 1 auto; aspect-ratio: 696 / 440; }
.ai-docs__card { position: absolute; left: 32px; bottom: 32px; box-sizing: border-box; padding: 18px 20px; border-radius: var(--radius-lg); background: #ffffffe6; border: 1px solid #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1439px) {
.ai-fig__card { width: 260px; }
}
@media (max-width: 1023px) {
.ai-photo { aspect-ratio: 16 / 10; }
.ai-docs { aspect-ratio: 16 / 10; }
.ai-fig { max-width: 600px; }
}
@media (max-width: 767px) {
.ai-photo, .ai-docs { aspect-ratio: 4 / 3; }
.ai-fig__card { width: 68%; right: -8px; bottom: -12px; padding: 10px 12px; gap: 8px; }
/* D18 — étiquette sur une ligne, calée à gauche. Handoff : « .ai-fig__card > p { align-self: flex-start;
   height: 22px; padding: 0 10px; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; } » et
   « .ai-fig__card > div { padding: 12px 14px; gap: 10px; } », hauteur, padding, taille, interlettrage et gap en
   déclarations prioritaires : elles ne battaient que les styles inline de l'étiquette et de l'encart ; elles sont
   portées sans priorité par les fragments FV-AI3 / AI4 / AI5 (.fv-ai3 .fv-ai3__label, .fv-ai3 .fv-ai3__lots…,
   0,2,0, bloc Mobile de chaque fragment). Restent ici les deux déclarations dont les fragments dépendent. */
.ai-fig__card > p { align-self: flex-start; white-space: nowrap; }
.ai-docs__card { left: 16px; bottom: 16px; padding: 12px 14px; gap: 8px; }
}

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

/* Splits des sections Espace par espace, Vos habitudes de projet et Documents :
   <div class="l-split" style="display: flex; align-items: center; gap: 5.333%"> (display: flex = .l-split). */
.ai-split { align-items: center; gap: 5.333%; }

/* Espace par espace — photo style="object-position: 50% 50%" (assets.md §1) ; titre style="max-width: 576px" ;
   chapô style="max-width: 560px". aspect-ratio: auto neutralise le ratio intrinsèque issu des attributs width/height
   de WordPress (sans effet : l'image remplit la boîte, comme au prototype). */
.ai-photo__img { object-position: 50% 50%; aspect-ratio: auto; }
.ai-s1__title { max-width: 576px; }
.ai-s1__lead { max-width: 560px; }

/* Vos habitudes de projet — titre et chapô style="max-width: 440px" (la colonne .ai-s2-text porte déjà en classe
   son style inline display: flex; flex-direction: column; gap: 18px). */
.ai-s2__title { max-width: 440px; }
.ai-s2__lead { max-width: 440px; }

/* Jusqu’à la réalisation — en-tête style="max-width: 1100px" (c-shead et h2) ; liens des rangées dans
   <div style="margin-top: 4px"> ; photos style="object-position: 50% 45%" (assets.md §1, les trois rangées). */
.ai-s3__head { max-width: 1100px; }
.ai-s3__title { max-width: 1100px; }
.ai-row__more { margin-top: 4px; }
.ai-fig__img { object-position: 50% 45%; aspect-ratio: auto; }

/* Documents — colonne texte style="flex: 0 0 auto; width: 36.667%; display: flex; flex-direction: column; gap: 18px" ;
   titre et chapô style="max-width: 440px" ; lien dans <div style="margin-top: 8px">. */
.ai-s4-text { flex: 0 0 auto; width: 36.667%; display: flex; flex-direction: column; gap: 18px; }
.ai-s4__title { max-width: 440px; }
.ai-s4__lead { max-width: 440px; }
.ai-s4__more { margin-top: 8px; }

/* Sous 1024 : empilement des trois splits écrit ici avec les valeurs de .l-split et .l-split > * (main.css), qui les
   imposaient par !important (hérités de site.css, retirés le 25/09/2026 — passation §10). Indispensable : sans ce bloc,
   les largeurs 46,667 / 36,667 / 58 %, les flex 1 1 auto, le gap 5,333 % et align-items: center ci-dessus
   l'emporteraient sur main.css à égalité de spécificité (feuille de page chargée après). Le cadre .c-fit du visuel FV-AI2 prend alors
   toute la largeur (dessin 700 × 520 calé à gauche, réduit sous 740 px), comme dans le prototype. Rangées sur rail :
   .c-rail-row > .c-rail-row__fig (main.css, 0,2,0) l'emporte sur .ai-fig (0,1,0) même sans priorité, rien à écrire. */
@media (max-width: 1023px) {
.ai-split { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--split-gap); }
.ai-split > * { width: auto; max-width: 100%; flex: none; }
}

/* ---------- 3. Mouvement ---------- */

/* M16 — cartes flottantes mises en pause hors écran (motion-spec §1.5 et §5 [Recommandé]) : classe posée par
   page-architectes-interieur.js. Sans IntersectionObserver ou sans JavaScript, la boucle tourne en continu ;
   en mouvement réduit, elle n'existe pas (bloc prefers-reduced-motion ci-dessus). */
.ai-s2-vis.is-offscreen .bi-flotte { animation-play-state: paused; }

/* ---------- 4. Illustrations ---------- */

/* FV-AI1 — Architectes d’intérieur · carte « Lecture par pièces » (section « Espace par espace », colonne .ai-s1-text) :
   styles convertis des styles inline du prototype (handoff/design/prototype/architectes-interieur.html).
   Racine .fv-ai1 (0,1,0) = l’encart et ses marges ; descendants 0,2,0. Longhands de police (pas de raccourci font,
   qui réinitialiserait les propriétés héritées) ; dimensions en content-box comme les styles inline (design-system.md),
   sauf la carte (border-box, comme le prototype).
   Aucune surcharge responsive : la carte suit la largeur de la colonne texte, hauteur fixe 282 (fiche).
   Aucune animation (fiche) ; aucune règle de la CSS de page du handoff ne porte sur l’intérieur de la carte. */
.fv-ai1 { margin: 8px 0px 6px; }
.fv-ai1 .fv-ai1__card { box-sizing: border-box; padding: 28px 32px 20px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); }
.fv-ai1 .fv-ai1__label { margin: 0px 0px 6px; font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.fv-ai1 .fv-ai1__project { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0px 14px; border-radius: var(--radius-sm); background: var(--brand-100); font-weight: 600; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--brand-ink); }
.fv-ai1 .fv-ai1__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--action); }
.fv-ai1 .fv-ai1__rooms { margin: 0px; padding: 0px; list-style: none; }
.fv-ai1 .fv-ai1__room { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0px 12px 36px; }
.fv-ai1 .fv-ai1__stem { position: absolute; left: 11px; top: 0px; bottom: 0px; width: 1px; background: var(--brand-300); }
.fv-ai1 .fv-ai1__stem--end { bottom: 50%; }
.fv-ai1 .fv-ai1__branch { position: absolute; left: 11px; top: 50%; width: 16px; height: 1px; background: var(--brand-300); }
.fv-ai1 .fv-ai1__pill { display: inline-flex; align-items: center; height: 32px; padding: 0px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-100); background: var(--bg-surface); font-weight: 500; font-size: 14px; line-height: 20px; font-family: var(--font-sans); color: var(--ink-900); }

/* FV-AI2 — Architectes d’intérieur · visuel « Vos habitudes de projet » (template-parts/visuals/fv-ai2-ai-bibliotheque.php,
   fiche handoff/design/ui-feature-illustrations/FV-AI2-ai-bibliotheque.md) : styles du dessin 700 × 520, convertis des
   styles inline du prototype (handoff/design/prototype/architectes-interieur.html). Racine .fv-ai2 (0,1,0), descendants
   .fv-ai2 .fv-ai2__… (0,2,0), aucune déclaration prioritaire. Mise à l'échelle : .c-fit.fit-700x520.ai-s2-vis (section
   de page, main.css) ; aucune surcharge responsive propre (le dessin est réduit d'un bloc par .c-fit).
   Exception documentée (comme FV-F10) : .fv-ai2.c-fit__inner (0,2,0) — le prototype pose position: relative en ligne
   sur la racine, ce qui l'emporte sur .c-fit > .c-fit__inner (position: absolute, 0,2,0, main.css) ; la racine reste
   donc dans le flux et la boîte .c-fit garde la hauteur du dessin non réduit quand elle rétrécit, comme le prototype.
   Égalité de spécificité : gagne parce que la feuille de page est chargée après main.css.
   Mouvement (M16) : classes .bi-flotte / .bi-d2 / .bi-d3 conservées ; les images clés bi-flotte et les règles
   d'animation (y compris le bloc prefers-reduced-motion) restent en tête de cette feuille ; rien d'animé ici.
   Photo : balise produite par oeuvra_img() (wp_get_attachment_image, attributs width/height intrinsèques 1448 × 1086) ;
   aspect-ratio: auto neutralise le ratio issu de ces attributs (sans effet : largeur et hauteur fixées) pour rester
   identique au prototype. */

/* Panneau */
.fv-ai2 { position: relative; box-sizing: border-box; width: 700px; height: 520px; border-radius: var(--radius-xl); overflow: hidden; background: var(--brand-100); }
.fv-ai2.c-fit__inner { position: relative; }

/* Cartes flottantes : position à la taille de dessin */
.fv-ai2 .fv-ai2__float { position: absolute; }
.fv-ai2 .fv-ai2__float--lots { left: 40px; top: 64px; }
.fv-ai2 .fv-ai2__float--supply { left: 404px; top: 96px; }
.fv-ai2 .fv-ai2__float--checklist { left: 150px; top: 290px; }
.fv-ai2 .fv-ai2__float--docs { left: 424px; top: 336px; }

/* Carte blanche */
.fv-ai2 .fv-ai2__card { box-sizing: border-box; padding: 18px 20px; 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.4) 0px 16px 36px -28px; display: flex; flex-direction: column; gap: 12px; }
.fv-ai2 .fv-ai2__card--lots { width: 320px; }
.fv-ai2 .fv-ai2__card--supply { width: 240px; }
.fv-ai2 .fv-ai2__card--checklist { width: 250px; }
.fv-ai2 .fv-ai2__card--docs { width: 210px; }
.fv-ai2 .fv-ai2__label { margin: 0px; font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }

/* Barres de texte abstraites : gris 8 px par défaut, parme 10 px (--brand) ; largeur en % de la ligne */
.fv-ai2 .fv-ai2__bar { display: block; height: 8px; border-radius: var(--radius-full); background: var(--border-100); }
.fv-ai2 .fv-ai2__bar--brand { height: 10px; background: var(--brand-100); }
.fv-ai2 .fv-ai2__bar--w40 { width: 40%; }
.fv-ai2 .fv-ai2__bar--w48 { width: 48%; }
.fv-ai2 .fv-ai2__bar--w56 { width: 56%; }
.fv-ai2 .fv-ai2__bar--w58 { width: 58%; }
.fv-ai2 .fv-ai2__bar--w60 { width: 60%; }
.fv-ai2 .fv-ai2__bar--w64 { width: 64%; }
.fv-ai2 .fv-ai2__bar--w66 { width: 66%; }
.fv-ai2 .fv-ai2__bar--w72 { width: 72%; }
.fv-ai2 .fv-ai2__bar--w74 { width: 74%; }

/* Lot et tâches */
.fv-ai2 .fv-ai2__lot-head { display: flex; align-items: center; gap: 10px; }
.fv-ai2 .fv-ai2__lot-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--lot-2); }
.fv-ai2 .fv-ai2__lot-tasks { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }

/* Fourniture */
.fv-ai2 .fv-ai2__photo { height: 92px; border-radius: var(--radius-md); overflow: hidden; }
.fv-ai2 .fv-ai2__photo-img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.fv-ai2 .fv-ai2__lines { display: flex; flex-direction: column; gap: 8px; }

/* Checklist */
.fv-ai2 .fv-ai2__check { display: flex; align-items: center; gap: 12px; }
.fv-ai2 .fv-ai2__checkbox { box-sizing: border-box; width: 16px; height: 16px; 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); background: transparent; }
.fv-ai2 .fv-ai2__checkbox--checked { background: var(--brand-300); }

/* Documents : vignettes à bandeau */
.fv-ai2 .fv-ai2__docs { display: flex; gap: 10px; }
.fv-ai2 .fv-ai2__doc { box-sizing: border-box; width: 38px; height: 50px; border-radius: 6px; border-width: 3px 1px 1px; border-style: solid; border-right-color: var(--border-100); border-bottom-color: var(--border-100); border-left-color: var(--border-100); background: var(--bg-page); }
.fv-ai2 .fv-ai2__doc--brand { border-top-color: var(--brand-300); }
.fv-ai2 .fv-ai2__doc--lot-4 { border-top-color: var(--lot-4); }
.fv-ai2 .fv-ai2__doc--strong { border-top-color: var(--border-strong); }

/* FV-AI3 — Architectes d’intérieur · figure « Coordonner » (consultation), rangée 01 de « Jusqu’à la réalisation »
   (template-parts/visuals/fv-ai3-ai-figure-consultation.php, fiche handoff/design/ui-feature-illustrations/
   FV-AI3-ai-figure-consultation.md) : styles internes de la carte flottante, convertis des styles inline du prototype
   (handoff/design/prototype/architectes-interieur.html). Racine .fv-ai3 (0,1,0) = .ai-fig__card, descendants
   .fv-ai3 .fv-ai3__… (0,2,0), aucune déclaration prioritaire, aucune règle sur la racine : position, largeur
   (300 / 260 ≤ 1439 / 68 % ≤ 767), débord, padding, bordure et gap de la carte restent portés par .ai-fig__card
   (bloc 1 de cette feuille). Longhands de police (pas de raccourci font) ; dimensions en content-box comme le prototype.
   Surcharge ≤ 767 px : reprend les déclarations prioritaires du handoff sur .ai-fig__card > p et .ai-fig__card > div
   (qui ne battaient que les styles inline) ; align-self: flex-start et white-space: nowrap de l’étiquette restent
   portés par .ai-fig__card > p (bloc 1, sans priorité, non contredits ici).
   Aucune animation (fiche). */

/* Étiquette « Consultation » */
.fv-ai3 .fv-ai3__label { margin: 0px; display: inline-flex; align-items: center; height: 26px; padding: 0px 12px; border-radius: var(--radius-full); background: var(--brand-100); font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }

/* Encart des lots */
.fv-ai3 .fv-ai3__lots { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-page); }
.fv-ai3 .fv-ai3__lot { display: flex; align-items: center; gap: 12px; }
.fv-ai3 .fv-ai3__swatch { width: 12px; height: 12px; border-radius: 3px; }
.fv-ai3 .fv-ai3__swatch--lot-1 { background: var(--lot-1); }
.fv-ai3 .fv-ai3__swatch--lot-2 { background: var(--lot-2); }
.fv-ai3 .fv-ai3__swatch--lot-4 { background: var(--lot-4); }
.fv-ai3 .fv-ai3__bar { height: 10px; border-radius: var(--radius-full); background: var(--brand-100); }
.fv-ai3 .fv-ai3__bar--w62 { width: 62%; }
.fv-ai3 .fv-ai3__bar--w48 { width: 48%; }
.fv-ai3 .fv-ai3__bar--w30 { width: 30%; }

/* Mobile : étiquette sur une ligne réduite, encart resserré (responsive.md, fiche) */
@media (max-width: 767px) {
.fv-ai3 .fv-ai3__label { height: 22px; padding: 0px 10px; font-size: 10px; letter-spacing: 0.04em; }
.fv-ai3 .fv-ai3__lots { padding: 12px 14px; gap: 10px; }
}

/* FV-AI4 — Architectes d’intérieur · figure « Planifier » (planning), rangée 02 de « Jusqu’à la réalisation »
   (template-parts/visuals/fv-ai4-ai-figure-planning.php, fiche handoff/design/ui-feature-illustrations/
   FV-AI4-ai-figure-planning.md) : styles internes de la carte flottante, convertis des styles inline du prototype
   (handoff/design/prototype/architectes-interieur.html). Racine .fv-ai4 (0,1,0) = .ai-fig__card, descendants
   .fv-ai4 .fv-ai4__… (0,2,0), aucune déclaration prioritaire, aucune règle sur la racine : position, largeur
   (300 / 260 ≤ 1439 / 68 % ≤ 767), débord, padding, bordure et gap de la carte restent portés par .ai-fig__card
   (bloc 1). Longhands de police (pas de raccourci font) ; dimensions en content-box comme le prototype.
   Surcharge ≤ 767 px : reprend les déclarations prioritaires du handoff sur .ai-fig__card > p et .ai-fig__card > div
   (qui ne battaient que les styles inline) ; align-self: flex-start et white-space: nowrap de l’étiquette restent
   portés par .ai-fig__card > p (bloc 1, sans priorité, non contredits ici).
   Même API et même découpage que FV-AI3 / FV-AI5. Aucune animation (fiche). */

/* Étiquette « Planning » */
.fv-ai4 .fv-ai4__label { margin: 0px; display: inline-flex; align-items: center; height: 26px; padding: 0px 12px; border-radius: var(--radius-full); background: var(--brand-100); font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }

/* Gantt miniature */
.fv-ai4 .fv-ai4__gantt { position: relative; padding: 18px 20px; border-radius: var(--radius-md); background: var(--bg-page); display: flex; flex-direction: column; gap: 12px; }

/* Repères verticaux (grille) */
.fv-ai4 .fv-ai4__grid { position: absolute; top: 0px; bottom: 0px; width: 1px; background: var(--border-100); }
.fv-ai4 .fv-ai4__grid--20 { left: 20%; }
.fv-ai4 .fv-ai4__grid--40 { left: 40%; }
.fv-ai4 .fv-ai4__grid--60 { left: 60%; }
.fv-ai4 .fv-ai4__grid--80 { left: 80%; }

/* Tâches : une rangée par barre */
.fv-ai4 .fv-ai4__row { position: relative; height: 14px; }
.fv-ai4 .fv-ai4__bar { position: absolute; height: 14px; border-radius: 4px; opacity: 0.85; }
.fv-ai4 .fv-ai4__bar--lot-1 { background: var(--lot-1); }
.fv-ai4 .fv-ai4__bar--lot-2 { background: var(--lot-2); }
.fv-ai4 .fv-ai4__bar--lot-4 { background: var(--lot-4); }
.fv-ai4 .fv-ai4__bar--t1 { left: 0%; width: 26%; }
.fv-ai4 .fv-ai4__bar--t2 { left: 20%; width: 22%; }
.fv-ai4 .fv-ai4__bar--t3 { left: 36%; width: 30%; }
.fv-ai4 .fv-ai4__bar--t4 { left: 58%; width: 24%; }

/* Repère « aujourd’hui » */
.fv-ai4 .fv-ai4__today { position: absolute; top: 0px; bottom: 0px; left: 46%; width: 1px; background: var(--action); }

/* Mobile : étiquette sur une ligne réduite, Gantt resserré (responsive.md, fiche) */
@media (max-width: 767px) {
.fv-ai4 .fv-ai4__label { height: 22px; padding: 0px 10px; font-size: 10px; letter-spacing: 0.04em; }
.fv-ai4 .fv-ai4__gantt { padding: 12px 14px; gap: 10px; }
}

/* FV-AI5 — Architectes d’intérieur · figure « Suivre le budget » (situation financière), rangée 03 de
   « Jusqu’à la réalisation » (template-parts/visuals/fv-ai5-ai-figure-situation.php, fiche
   handoff/design/ui-feature-illustrations/FV-AI5-ai-figure-situation.md) : styles internes de la carte flottante,
   convertis des styles inline du prototype (handoff/design/prototype/architectes-interieur.html).
   Racine .fv-ai5 (0,1,0) = .ai-fig__card, descendants .fv-ai5 .fv-ai5__… (0,2,0), aucune déclaration prioritaire,
   aucune règle sur la racine : position, largeur (300 / 260 ≤ 1439 / 68 % ≤ 767), débord, padding, bordure, rayon,
   fond et gap de la carte restent portés par .ai-fig__card (bloc 1). Longhands de police (pas de raccourci font) ;
   dimensions en content-box comme le prototype (jauge : 10 px + filet 1 px).
   Surcharge ≤ 767 px : reprend les déclarations prioritaires du handoff sur .ai-fig__card > p et .ai-fig__card > div
   (qui ne battaient que les styles inline) ; align-self: flex-start et white-space: nowrap de l’étiquette restent
   portés par .ai-fig__card > p (bloc 1, sans priorité, non contredits ici).
   Même API et même découpage que FV-AI3 / FV-AI4. Aucune animation (fiche). */

/* Étiquette « Situation financière » */
.fv-ai5 .fv-ai5__label { margin: 0px; display: inline-flex; align-items: center; height: 26px; padding: 0px 12px; border-radius: var(--radius-full); background: var(--brand-100); font-weight: 500; font-size: 11px; line-height: 16px; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }

/* Encart des lots */
.fv-ai5 .fv-ai5__lots { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-page); }
.fv-ai5 .fv-ai5__lot { display: flex; flex-direction: column; gap: 8px; }

/* En-tête de lot : pastille + libellé schématique */
.fv-ai5 .fv-ai5__head { display: flex; align-items: center; gap: 10px; }
.fv-ai5 .fv-ai5__swatch { width: 12px; height: 12px; border-radius: 3px; }
.fv-ai5 .fv-ai5__swatch--lot-1 { background: var(--lot-1); }
.fv-ai5 .fv-ai5__swatch--lot-2 { background: var(--lot-2); }
.fv-ai5 .fv-ai5__line { height: 8px; width: 90px; border-radius: var(--radius-full); background: var(--brand-100); }

/* Jauge de règlement */
.fv-ai5 .fv-ai5__gauge { position: relative; height: 10px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-100); overflow: hidden; }
.fv-ai5 .fv-ai5__fill { position: absolute; left: 0px; top: 0px; bottom: 0px; background: var(--status-valid); }
.fv-ai5 .fv-ai5__fill--w62 { width: 62%; }
.fv-ai5 .fv-ai5__fill--w40 { width: 40%; }

/* Mobile : étiquette sur une ligne réduite, encart resserré (responsive.md, fiche) */
@media (max-width: 767px) {
.fv-ai5 .fv-ai5__label { height: 22px; padding: 0px 10px; font-size: 10px; letter-spacing: 0.04em; }
.fv-ai5 .fv-ai5__lots { padding: 12px 14px; gap: 10px; }
}

/* FV-AI6 — Architectes d’intérieur · visuel « Documents » (template-parts/visuals/fv-ai6-ai-documents.php)
   Conversion des styles en ligne du prototype (architectes-interieur.html, .c-media.ai-docs) en classes.
   Racine .fv-ai6 (0,1,0), descendants .fv-ai6 .fv-ai6__x (0,2,0), aucune déclaration forcée.
   Restent dans le bloc 1 : .ai-docs (ratios 696/440, 16/10, 4/3) et .ai-docs__card (verre, position, réduction
   Mobile D15) ; dans main.css : .c-media et .c-media > img. Aucune animation (fiche). */

/* Photo : cadrage du prototype ; neutralise le ratio intrinsèque déduit des attributs width/height de WordPress. */
.fv-ai6 .fv-ai6__photo { object-position: 50% 50%; aspect-ratio: auto; }

/* Lignes de la carte : pictogramme + libellé. */
.fv-ai6 .fv-ai6__item { display: flex; align-items: center; gap: 10px; }
.fv-ai6 .fv-ai6__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--brand-100); }
.fv-ai6 .fv-ai6__label { font-weight: 500; font-size: 13px; line-height: 18px; font-family: var(--font-sans); color: var(--ink-900); }