/* ==========================================================================
   Œuvra — Architectes · feuille du gabarit templates/page-architectes.php (chargée après main.css).
   1. Base = handoff/design/css/pages/architectes.css : vide (la page n'utilise que les composants partagés).
   2. Styles inline du prototype (prototype/architectes.html) convertis en classes ar-* (spécificité 0,1,0,
      suffisante : aucune règle de main.css ne fixe ces propriétés sur ces éléments, à aucun niveau).
   3. Illustration FV-AR1 (fragment converti et vérifié, vague 1).
   Préfixe de page : ar- (Architectes). La nomenclature de composants.md (en-tête) n'en donne aucun pour cette page
   et son §5 ne lui prête aucune composition propre (architectes.css du handoff est vide) ; ar- ne sert qu'aux styles
   inline convertis (bloc 2), fv-ar1 au dessin (bloc 3). Convention à conserver en Phase E/F (même famille que hh-,
   fn-/ft-, tf-, pq-, moe-, ai-, faq-, ct-).
   Composants partagés utilisés (main.css) : .c-hero (hero métier), .c-crumb, .c-shead, .c-steps, .c-num,
   .c-bento, .c-card(--lg), .c-card__head, .c-plan-tag, .c-arrow, .c-photo-panel, .c-glass-card, .u-block,
   .c-cta (template-parts/layout/cta.php). Aucune animation propre à la page (motion-spec.md).
   ========================================================================== */

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

/* Aucune règle propre. */

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

/* D'une phase à l'autre — en-tête : style="max-width: 860px" (c-shead et h2), chapô style="max-width: 640px". */
.ar-phases__head { max-width: 860px; }
.ar-phases__title { max-width: 860px; }
.ar-phases__lead { max-width: 640px; }
/* Étapes : <div style="position: relative"> qui porte le filet (.c-steps__rail) et la rangée ; textes
   style="max-width: 300px". */
.ar-steps__track { position: relative; }
.ar-steps__text { max-width: 300px; }

/* Dans votre pratique — en-tête : style="max-width: 760px" (c-shead et h2) ; liens des 2 cartes de la colonne
   dans <div style="margin-top: 6px">. */
.ar-pratique__head { max-width: 760px; }
.ar-pratique__title { max-width: 760px; }
.ar-card__more { margin-top: 6px; }

/* Au même endroit — photo style="object-position: 50% 35%" (assets.md §1) ; titre de la carte en verre
   style="max-width: 480px" ; lien dans <div style="margin-top: 4px">. */
.ar-panel__img { object-position: 50% 35%; }
.ar-glass__title { max-width: 480px; }
.ar-glass__more { margin-top: 4px; }

/* ---------- 3. Illustration ---------- */

/* FV-AR1 — Architectes · mini-liste de lots (bento « Dans votre pratique ») : styles du dessin, convertis des styles
   inline du prototype (handoff/design/prototype/architectes.html). Racine .fv-ar1 (0,1,0), descendants 0,2,0.
   Aucune surcharge responsive : l'encart s'étire sur la largeur de la carte, hauteur fixe 104 (fiche).
   Aucune animation (fiche) ; aucune règle de la CSS de page du handoff (architectes.css vide) n'est reprise ici. */
.fv-ar1 { margin: 8px 0px 4px; }
.fv-ar1 .fv-ar1__list { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-page); }
.fv-ar1 .fv-ar1__row { display: flex; align-items: center; gap: 12px; }
.fv-ar1 .fv-ar1__swatch { width: 12px; height: 12px; border-radius: 3px; }
.fv-ar1 .fv-ar1__swatch--lot-1 { background: var(--lot-1); }
.fv-ar1 .fv-ar1__swatch--lot-2 { background: var(--lot-2); }
.fv-ar1 .fv-ar1__swatch--lot-4 { background: var(--lot-4); }
.fv-ar1 .fv-ar1__bar { height: 10px; border-radius: var(--radius-full); background: var(--brand-100); }
.fv-ar1 .fv-ar1__bar--62 { width: 62%; }
.fv-ar1 .fv-ar1__bar--48 { width: 48%; }
.fv-ar1 .fv-ar1__bar--30 { width: 30%; }