/* ============================================================================
   Œuvra — feuille principale (thème issu du BimBeau Starter 0.1.0, commit 47a3cc7)
   1. Base (Starter, nettoyée pour le handoff)   2. Socle bb-   3. Lien d’évitement
   4. Gabarits de repli (index, page, 404)       5. Site (copie de handoff/design/css/site.css)
   6. Compléments de production (navigation interactive, focus, mouvement réduit)

   Modèle de boîte : AUCUN reset global — rendu validé = défaut navigateur (content-box) + règle du
   DS pour .oe-* (design-system.md §13). Les règles génériques du Starter qui modifiaient le rendu
   validé ont été retirées (audit, décisions S1–S6) : box-sizing global, text-wrap: balance et
   interlignage des titres, img/svg/video en bloc, marges remises à zéro, reset des boutons, bloc
   prefers-reduced-motion global (remplacé par les états finaux explicites du handoff).
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* Focus clavier : l’anneau du DS (--shadow-focus) partout où un composant ne déclare pas le sien.
   :where() = spécificité nulle, les règles :focus-visible du DS et des composants gardent la main. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   2. Socle bb- (contrat BimBeau v0.1 §4) — alias des règles Œuvra
   -------------------------------------------------------------------------- */
.bb-container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.bb-measure { max-width: var(--content); }
.bb-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   3. Lien d’évitement : visible au focus clavier
   -------------------------------------------------------------------------- */
.oeu-skip { position: absolute; top: -100px; left: var(--gutter); z-index: 200; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--ink-900); color: var(--ink-inverse); font: 500 14px/20px var(--font-sans); text-decoration: none; }
.oeu-skip:focus { top: var(--space-3); }
a.oeu-skip:not(.oe-btn):hover { color: var(--ink-inverse); }

/* --------------------------------------------------------------------------
   4. Gabarits de repli (pages sans gabarit dédié, 404) — typographie du DS
   -------------------------------------------------------------------------- */
.oeu-main { padding: var(--hero-top) 0 var(--section-y); }
.oeu-kicker { margin: 0 0 var(--space-3); font: 500 15px/22px var(--font-sans); color: var(--ink-500); }
.oeu-title { margin: 0 0 var(--space-8); font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; color: var(--ink-900); }
.oeu-prose { font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--ink-700); }
.oeu-prose > * + * { margin-top: var(--space-4); }
.oeu-prose h2 { font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink-900); margin-top: var(--space-10); }
.oeu-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-100); }
.oeu-list__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-100); }

/* Ancres : lissage natif ; quand Lenis est actif (html.lenis), c’est lui qui lisse. */
html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ============================================================================
   5. Site — copie de handoff/design/css/site.css (le @font-face est dans fonts.css).
   ==========================================================================
   Œuvra — site vitrine · site.css
   Base, mise en page, styles de texte et composants partagés.
   Dépend de tokens.css (valeurs) et du bundle du DS Œuvra (classes .oe-*).
   Conventions : l- mise en page · t- texte · c- composant · u- utilitaire · is-/has- états
   Desktop-first : base = Desktop (≥ 1440) ; @media (max-width: 1439/1023/767px).
   ========================================================================== */

/* ---------- Base ---------- */
body { margin: 0; background: var(--bg-page); font-family: var(--font-sans); color: var(--ink-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brand-ink); }
a:not(.oe-btn):hover { color: var(--ink-900); }
/* Modèle de boîte : défaut navigateur (content-box) + règle du DS « [class^="oe-"] … { box-sizing: border-box }
» pour les composants .oe-* et leurs descendants.
   Les composants du site dont la taille dessinée exclut filet/padding déclarent content-box explicitement (robustes à un reset global) ; voir design-system.md §13. */
/* Racine de page (artboard) : colonne de sections pleine largeur */
.hp-root { position: relative; display: flex; flex-direction: column; overflow-x: clip; background: var(--bg-page); font: 400 15px/24px var(--font-sans); color: var(--ink-900); }
/* ======================================================================
   MISE EN PAGE
   ====================================================================== */
.l-section { position: relative; flex: none; width: 100%; box-sizing: border-box; padding: var(--section-y) 0; }
.l-section--compact { padding: var(--section-y-compact) 0; }
.l-section--beige { background: var(--bg-beige); }
.l-section--surface { background: var(--bg-surface); }
/* Conteneur : 1200 max, marge latérale minimale --gutter */
.l-container { box-sizing: border-box; width: min(var(--container), 100% - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
/* Grilles de cartes : 3 → 2 → 1 colonnes */
.l-grid { display: grid; gap: var(--grid-gap); }
.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Empilements verticaux (gaps de l’échelle) */
.l-stack { display: flex; flex-direction: column; align-items: flex-start; }
/* ======================================================================
   STYLES DE TEXTE
   ====================================================================== */
.t-display, .t-h1, .t-h1c, .t-h2, .t-h2s, .t-h3 { margin: 0; font-family: var(--font-sans); font-weight: 300; color: var(--ink-900); }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.025em; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; }
.t-h1c { font-size: var(--fs-h1c); line-height: var(--lh-h1c); letter-spacing: -0.03em; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; }
.t-h2s { font-size: var(--fs-h2s); line-height: var(--lh-h2s); letter-spacing: -0.015em; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.015em; }
.t-title-xl, .t-title-lg, .t-title, .t-title-sm { margin: 0; font-family: var(--font-sans); font-weight: 600; color: var(--ink-900); }
.t-title-xl { font-size: var(--fs-title-xl); line-height: var(--lh-title-xl); letter-spacing: -0.01em; }
.t-title-lg { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); letter-spacing: -0.01em; }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); }
.t-title-sm { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); }
.t-lead-hero, .t-lead, .t-body-lg, .t-body, .t-small, .t-note { margin: 0; font-family: var(--font-sans); font-weight: 400; color: var(--ink-700); }
.t-lead-hero { font-size: var(--fs-lead-hero); line-height: var(--lh-lead-hero); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-note { font-size: var(--fs-note); line-height: var(--lh-note); }
.t-caption { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--ink-500); }
/* Capitales espacées */
.t-caps { margin: 0; font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.t-label { margin: 0; font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
/* Surtitre : texte ink-900, pastille vermillon (demande du 19/09) */
.hp-root .oe-kicker { color: var(--ink-900); }
/* Lien-flèche éditorial (« Voir la consultation → ») */
.c-arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-link)/var(--lh-link) var(--font-sans); color: var(--brand-ink); text-decoration: none; }
.c-arrow svg { flex: none; width: 18px; height: 18px; stroke-width: 1.75; transition: transform var(--duration-fast) var(--ease-standard); }
.c-arrow:hover svg { transform: translateX(3px); }
/* Liste de mots-clés en capitales séparés par des points */
.c-tags { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.c-tags > i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-300); }
/* Étiquette d’offre (« Studio+ ») */
.c-plan-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--brand-100); font: 600 11px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
/* Titre maintenu sur une ligne en Desktop/Laptop uniquement */
.u-nowrap-lg { white-space: nowrap; }
/* Groupe de boutons */
.c-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* ======================================================================
   NAVIGATION PRINCIPALE (posée en haut du hero, défile avec la page)
   ====================================================================== */
.c-nav.oe-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; box-sizing: border-box; width: min(var(--container), 100% - 2 * var(--gutter)); max-width: none; height: var(--site-nav-h); margin: 0 auto; padding: 0 0 0 4px; gap: var(--space-6); background: transparent; border: 0; border-bottom: 1px solid var(--border-100); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-nav .oe-nav__logo img { display: block; height: 20px; width: auto; }
.c-nav .oe-nav__links { margin-left: 16px; }
.c-nav .oe-nav__links > li { position: relative; }
.c-nav .oe-nav__actions .c-nav__login { background: var(--bg-surface); border-color: var(--border-100); color: var(--ink-900); }
.c-nav .oe-nav__actions .c-nav__try { position: relative; overflow: hidden; }
.c-nav .c-nav__burger { display: none; box-sizing: border-box; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--border-100); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--ink-900); cursor: pointer; }
.c-nav .c-nav__burger svg { width: 20px; height: 20px; stroke-width: 1.5; }
.oe-link--nav[aria-current="page"] { box-shadow: none; border-radius: var(--radius-xs); }
.oe-link--nav:hover, .oe-link--nav[aria-current="page"]:hover { background: var(--bg-beige); }
/* variante sombre (hero photo de l’Accueil) */
.c-nav--dark.oe-nav { border-bottom-color: #ffffff33; }
.c-nav--dark .oe-nav__logo img { filter: brightness(0) invert(1); }
.c-nav--dark .oe-link--nav { color: #ffffff; }
.c-nav--dark .oe-link--nav:hover, .c-nav--dark .oe-link--nav[aria-current="page"], .c-nav--dark .oe-link--nav[aria-current="page"]:hover { background: #ffffff1f; color: #ffffff; }
.c-nav--dark .oe-nav__actions .c-nav__login { background: transparent; border-color: #ffffff3d; color: #ffffff; }
.c-nav--dark .c-nav__burger { background: transparent; border-color: #ffffff3d; color: #ffffff; }
/* ======================================================================
   FIL D’ARIANE (pilule filet blanc)
   ====================================================================== */
.c-crumb-wrap { margin-bottom: 40px; }
.c-crumb ol { margin: 0; padding: 0 12px 0 5px; list-style: none; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 34px; border: 1px solid #ffffff; border-radius: var(--radius-full); background: transparent; }
.c-crumb li { display: flex; }
.c-crumb__home { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--bg-surface); font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-900); text-decoration: none; }
.c-crumb__link { font: 500 13px/16px var(--font-sans); color: var(--ink-700); text-decoration: none; white-space: nowrap; }
.c-crumb__here { font: 500 13px/16px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
/* ======================================================================
   EN-TÊTE DE SECTION (surtitre + titre + chapô)
   ====================================================================== */
.c-shead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.c-shead--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
/* ======================================================================
   CTA FINAL (« Gagnez du temps sur vos chantiers »)
   ====================================================================== */
.c-cta-section { padding: var(--cta-top) 0 var(--cta-bottom); }
.c-cta { position: relative; box-sizing: border-box; width: 100%; height: 540px; padding: 72px 48px 72px 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; border-radius: var(--radius-xl); overflow: hidden; }
.c-cta__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 520px; }
.c-cta__pill { margin: 0; display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--bg-surface); font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; color: var(--ink-900); }
.c-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.c-cta__shot { position: absolute; left: 640px; top: 96px; width: 900px; z-index: 1; transform: rotate(-4deg) skewX(8deg); transform-origin: 0 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%); }
.c-cta__shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-100); box-shadow: 0 40px 80px -30px #1e1d1b40; }
/* ======================================================================
   PIED DE PAGE
   ====================================================================== */
/* P06 (24/09) : bouton primaire sur vermillon soutenu pour le contraste du libellé blanc (4,8:1 au lieu de 3,7:1) */
.oe-btn--primary { background: var(--action-strong); }
.c-footer { padding: var(--footer-top) 0 var(--footer-bottom); }
.c-footer__top { display: flex; align-items: flex-start; gap: 60px; }
.c-footer__brand { flex: none; width: 420px; display: flex; flex-direction: column; align-items: flex-start; }
.c-footer__logo { display: block; height: 28px; width: auto; }
.c-footer__tagline { margin: 32px 0 0; font: 600 17px/26px var(--font-sans); color: var(--ink-900); }
.c-footer__desc { margin: 14px 0 0; max-width: 340px; }
.c-footer__share-title { margin-top: 56px; }
.c-footer__share { margin-top: 18px; display: flex; gap: 12px; }
.c-footer__cols { flex: 1 1 auto; display: flex; justify-content: space-between; gap: 40px; }
.c-footer__col { flex: none; }
.c-footer__col .t-caps { margin: 0 0 20px; }
.c-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.c-footer__col li { margin: 0; }
.c-footer__bottom { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.c-footer__bottom img { display: block; height: 15px; width: auto; }
.hp-flink { font: 400 14px/20px var(--font-sans); color: var(--ink-700); text-decoration: none; transition: color 160ms ease; }
.hp-flink:hover { color: var(--ink-900); }
.hp-share { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid var(--border-100); border-radius: var(--radius-full); background: var(--bg-surface); font: 500 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--brand-ink); text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.hp-share:hover { border-color: var(--brand-300); background: var(--brand-100); color: var(--brand-ink); }
.hp-bb { display: inline-flex; opacity: 0.85; transition: opacity 160ms ease; }
.hp-bb:hover { opacity: 1; }
/* ======================================================================
   SPLIT : colonnes exprimées en % du conteneur (valeurs Desktop exactes,
   fluides en Laptop) ; empilé sous 1024, texte en premier
   ====================================================================== */
.l-split { display: flex; }
/* ======================================================================
   CARTES
   ====================================================================== */
.c-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); }
.c-card--lg { padding: 40px; gap: 18px; }
.c-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* ======================================================================
   HERO DE PAGE AVEC MÉDIA (pages métiers)
   ====================================================================== */
.c-hero { padding: var(--hero-top) 0 var(--hero-bottom); }
.c-hero__grid { display: flex; align-items: center; gap: var(--split-gap); }
.c-hero__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.c-hero__media { position: relative; flex: none; width: 53.333%; aspect-ratio: 8 / 7; }
.c-hero__photo { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden; }
.c-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-hero__chips { position: absolute; left: 24px; top: 24px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.c-hero__chip { box-sizing: content-box; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-sm); background: #ffffffcc; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #ffffff; font: 600 11px/14px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900); }
.c-hero__inset { box-sizing: content-box; position: absolute; left: -48px; bottom: -40px; width: 190px; height: 190px; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid var(--bg-page); }
.c-hero__inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ======================================================================
   ÉTAPES NUMÉROTÉES SUR UN FILET (01 · 02 · 03)
   ====================================================================== */
.c-steps { position: relative; margin-top: var(--head-gap); }
.c-steps__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-100); }
.c-steps__row { display: flex; gap: 48px; }
.c-steps__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.c-steps__dot { position: absolute; left: 12px; top: -6px; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-300); border: 2px solid var(--bg-page); }
.c-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; color: var(--brand-ink); }
/* ======================================================================
   BENTO : grande carte + deux cartes empilées
   ====================================================================== */
.c-bento { margin-top: var(--head-gap); display: flex; gap: var(--grid-gap); align-items: stretch; }
.c-bento__main { flex: none; width: 49%; }
.c-bento__side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap); }
.c-bento__side > .c-card { flex: 1 1 0; }
/* ======================================================================
   PANNEAU PHOTO + CARTE CALQUE
   ====================================================================== */
.c-photo-panel { position: relative; margin-top: 24px; width: 100%; aspect-ratio: 15 / 8; border-radius: var(--radius-xl); overflow: hidden; }
.c-photo-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-glass-card { position: absolute; left: 48px; bottom: 48px; box-sizing: border-box; width: 560px; padding: 36px 40px; border-radius: var(--radius-xl); background: #ffffffd9; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #ffffff; display: flex; flex-direction: column; gap: 16px; }
/* ======================================================================
   ILLUSTRATION À TAILLE FIXE (Feature Visual, schéma…) : mise à l'échelle
   proportionnelle à sa colonne, jamais agrandie. La taille de design est
   portée par une classe fit-LxH. Échelle = min(1, largeur dispo / L).
   ====================================================================== */
.c-fit { position: relative; width: 100%; max-width: var(--fit-w); aspect-ratio: var(--fit-ratio); container-type: inline-size; }
.c-fit > .c-fit__inner { position: absolute; top: 0; left: 0; width: var(--fit-w); height: var(--fit-h); transform-origin: 0 0; transform: scale(min(1, tan(atan2(100cqw, var(--fit-w))))); }
.fit-696x460 { --fit-w: 696px; --fit-h: 460px; --fit-ratio: 696 / 460; }
.fit-700x520 { --fit-w: 700px; --fit-h: 520px; --fit-ratio: 700 / 520; }
.fit-616x460 { --fit-w: 616px; --fit-h: 460px; --fit-ratio: 616 / 460; }
/* Variante « zoom » pour les schémas de hauteur variable : la largeur de design
   est portée par la classe (--zoom-w) ; zoom = min(1, largeur dispo / largeur de design) */
.c-zoom { width: 100%; container-type: inline-size; }
.c-zoom > .c-zoom__inner { width: var(--zoom-w); zoom: min(1, tan(atan2(100cqw, var(--zoom-w)))); }
/* [Production] Repli des deux règles ci-dessus, qui reposent sur tan()/atan2() (Chrome 111, Safari 15.4,
   Firefox 108), les unités cqw (Chrome 105, Safari 16, Firefox 110) et, pour .c-zoom, la propriété zoom
   (Firefox 126). Sans elles, la déclaration est invalide au calcul (var()) et l'illustration resterait à sa
   taille de dessin. main.js (§4) calcule alors l'échelle (--fit-scale, --zoom-scale ; transform si zoom est
   absent) ; sans JavaScript, le cadre défile horizontalement au lieu de rogner. Inactif dans les navigateurs
   récents : rendu inchangé. html.oeu-fit-js = repli actif (posé par main.js, forçable en QA). */
@supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) {
	html:not(.oeu-fit-js) .c-fit, html:not(.oeu-fit-js) .c-zoom { overflow-x: auto; }
}
/* Même repli sans JavaScript quand seule la propriété zoom manque (Firefox 110–125, ESR 115 : trigonométrie et cqw
   présentes) : le dessin de .c-zoom resterait à sa largeur de dessin et déborderait (schéma MOE : 240 px rognés à 1024). */
@supports not (zoom: 1) {
	html:not(.oeu-fit-js) .c-zoom { overflow-x: auto; }
}
html.oeu-fit-js .c-fit > .c-fit__inner { transform: scale(var(--fit-scale, 1)); }
html.oeu-fit-js .c-zoom > .c-zoom__inner { zoom: var(--zoom-scale, 1); }
/* Photo en bloc (coins xl) */
.c-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.c-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Lien-flèche compact (15 px) */
.c-arrow--sm { font-size: 15px; line-height: 22px; }
.c-arrow--sm svg { width: 16px; height: 16px; }
/* Rangées numérotées sur un filet vertical (01 · 02 · 03) */
.c-rail-row { position: relative; display: flex; align-items: center; gap: var(--split-gap); padding: 0 0 56px 64px; }
.c-rail-row__rail { position: absolute; left: 17px; top: 36px; bottom: 0; width: 1px; background: var(--brand-300); }
.c-rail-row:last-child .c-rail-row__rail { display: none; }
.c-rail-row__num { position: absolute; left: 0; top: 0; }
.c-rail-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.c-rail-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* ======================================================================
   BADGE DE PAGE (« • FAQ ») · NAVIGATION SEGMENTÉE · FAQ
   ====================================================================== */
.c-badge-page { margin: 0; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-100); background: var(--bg-surface); font: 500 13px/18px var(--font-sans); color: var(--ink-900); }
.c-badge-page--outline { background: transparent; font-weight: 400; }
.c-badge-page > i { width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.c-seg-nav { align-self: center; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--border-100); max-width: 100%; box-sizing: border-box; }
.c-seg-nav__item { box-sizing: content-box; display: inline-flex; align-items: center; flex: none; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-full); font: 500 14px/20px var(--font-sans); color: var(--ink-900); text-decoration: none; white-space: nowrap; }
.c-seg-nav__item.is-on { background: var(--bg-surface); border-color: var(--border-100); }
.c-faq { box-sizing: border-box; padding: 40px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); }
.c-faq__group { display: flex; flex-direction: column; }
.c-faq__group + .c-faq__group { margin-top: 24px; }
.c-faq__cat { margin: 0 0 4px; padding-top: 8px; font-weight: 600; letter-spacing: 0.06em; }
.c-faq__group:first-child .c-faq__cat { padding-top: 0; }
.c-faq__item { padding: 28px 0; border-bottom: 1px solid var(--border-100); }
.c-faq__item:last-child { border-bottom: 0; }
.c-faq__q { cursor: pointer; display: flex; align-items: flex-start; gap: 24px; list-style: none; }
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__icon { flex: none; margin-top: 2px; color: var(--ink-900); }
.c-faq__qtext { flex: 1 1 auto; font: 600 20px/28px var(--font-sans); color: var(--ink-900); }
.c-faq__a { margin: 16px 0 0; padding-left: 48px; }
/* ======================================================================
   MENU PRINCIPAL OUVERT (Tablette/Mobile) — plein écran, ouvert par le burger
   ====================================================================== */
.c-menu { position: fixed; inset: 0; z-index: 100; box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg-page); overflow-y: auto; }
.c-menu__bar { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); width: min(var(--container), 100% - 2 * var(--gutter)); height: var(--site-nav-h); margin: 0 auto; border-bottom: 1px solid var(--border-100); }
.c-menu__bar img { display: block; height: 18px; width: auto; }
.c-menu__close { box-sizing: border-box; flex: none; margin-left: auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-100); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--ink-900); cursor: pointer; }
.c-menu__nav { flex: 1 1 auto; width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: var(--space-4); }
.c-menu__list { margin: 0; padding: 0; list-style: none; }
.c-menu__link { box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--border-100); font: 500 20px/28px var(--font-sans); color: var(--ink-900); text-decoration: none; }
.c-menu__link[aria-current="page"] { color: var(--ink-900); }
.c-menu__link svg { flex: none; width: 20px; height: 20px; color: var(--ink-500); }
.c-menu__sub { margin: 0; padding: 4px 0 12px 16px; list-style: none; border-bottom: 1px solid var(--border-100); }
.c-menu__sub a { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 400 17px/24px var(--font-sans); color: var(--ink-700); text-decoration: none; }
.c-menu__sub a svg { flex: none; width: 20px; height: 20px; color: var(--brand-ink); }
.c-menu__actions { flex: none; display: flex; flex-direction: column; gap: var(--space-3); width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: var(--space-8) 0 var(--space-10); }
.c-menu__actions .oe-btn { width: 100%; }
/* Sous-menu « Pour qui ? » (Desktop/Laptop) — panneau DS .oe-menu, une colonne + visuel */
.c-dropdown.oe-menu { top: calc(100% + 12px); left: -12px; grid-template-columns: 300px 260px; box-shadow: none; }
/* sans ombre : filet 1 px du DS seul */
.c-dropdown .oe-menu__item { align-items: flex-start; }
/* tuile d’accès à /pour-qui/ : photo en haut, texte sur fond parme (variante V2 retenue le 24/09) */
.c-dropdown__card { grid-row: 1 / span 3; grid-column: 2; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-sm); background: var(--brand-100); color: var(--brand-ink); text-decoration: none; }
.c-dropdown__img { display: block; height: 84px; overflow: hidden; }
.c-dropdown__img > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform var(--duration-slow) var(--ease-standard); }
.c-dropdown__card:hover .c-dropdown__img > img { transform: scale(1.04); }
.c-dropdown__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.c-dropdown__title { font: 600 14px/20px var(--font-sans); color: var(--ink-900); }
.c-dropdown__link { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) {
.c-dropdown__img > img { transition: none; }
.c-dropdown__card:hover .c-dropdown__img > img { transform: none; }
}
/* ======================================================================
   RESPONSIVE — composants partagés
   ====================================================================== */
@media (max-width: 1439px) {
.c-steps__row { gap: 32px; }
.c-rail-row { gap: 48px; }
.c-glass-card { left: 40px; bottom: 40px; width: 520px; }
.c-cta { height: 500px; padding: 64px 48px 64px 56px; }
.c-cta__shot { left: 56%; top: 96px; width: 760px; }
.c-footer__brand { width: 360px; }
}
@media (max-width: 1023px) {
.u-nowrap-lg { white-space: normal; }
/* [Production] !important de site.css retirés ici et sur .c-rail-row__fig (ils ne battaient que les styles inline des
   masters, convertis en classes) : les colonnes des pages sont limitées à ≥ 1024 ou redéclarées sous 1024 (voir les feuilles
   de page) ; .c-rail-row > .c-rail-row__fig (0,2,0) l'emporte sur les classes de page (0,1,0). */
.l-split { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--split-gap); }
.l-split > * { width: auto; max-width: 100%; flex: none; }
.l-split > .l-split__text { order: -1; }
.c-hero__grid { flex-direction: column; align-items: stretch; gap: 48px; }
.c-hero__text { padding-top: 0; }
.c-hero__media { width: auto; aspect-ratio: 16 / 10; margin-left: 24px; }
.c-hero__inset { left: -24px; bottom: -32px; width: 150px; height: 150px; }
.c-steps__row { gap: 24px; }
.c-rail-row { flex-direction: column; align-items: stretch; gap: 32px; }
.c-faq { padding: 32px; }
.c-faq__item { padding: 24px 0; }
.c-rail-row > .c-rail-row__fig { width: auto; }
.c-bento { flex-direction: column; }
.c-bento__main { width: auto; }
.c-bento__side { flex-direction: row; }
.c-photo-panel { aspect-ratio: 4 / 3; }
.c-glass-card { left: 24px; right: 24px; bottom: 24px; width: auto; padding: 32px; }
/* nav : liens → menu burger ; « Connexion » passe dans le menu */
  .c-nav.oe-nav { gap: var(--space-3); padding: 0; }
.c-nav .oe-nav__links, .c-nav .oe-nav__actions .c-nav__login { display: none; }
.c-nav .oe-nav__actions { margin-left: auto; }
.c-nav .c-nav__burger { display: inline-flex; }
.l-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-cta { height: auto; min-height: 0; padding: 56px 48px 0; justify-content: flex-start; }
.c-cta__body { max-width: 560px; }
.c-cta__shot { position: relative; left: auto; top: auto; width: 118%; margin: 16px 0 -32px 8%; }
.c-footer__top { flex-direction: column; gap: 48px; }
.c-footer__brand { width: auto; }
.c-footer__share-title { margin-top: 40px; }
.c-footer__cols { width: 100%; justify-content: flex-start; gap: 24px; }
.c-footer__col { flex: 1 1 0; }
.c-footer__bottom { margin-top: 56px; }
}
@media (max-width: 767px) {
.c-card, .c-card--lg { padding: 24px; }
.c-seg-nav { align-self: stretch; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.c-seg-nav.is-end { -webkit-mask-image: none; mask-image: none; }
/* fondu retiré en fin de défilement ou si tout tient (classe posée en JS) */
  .c-seg-nav__item { height: 36px; padding: 0 14px; font-size: 13px; }
.c-faq { padding: 8px 20px; }
.c-faq__cat { padding-top: 20px; }
.c-faq__group:first-child .c-faq__cat { padding-top: 16px; }
.c-faq__item { padding: 20px 0; }
.c-faq__q { gap: 14px; }
.c-faq__qtext { font-size: 17px; line-height: 24px; }
.c-faq__a { margin-top: 12px; padding-left: 0; }
.c-hero__grid { gap: 40px; }
.c-hero__media { aspect-ratio: 5 / 4; margin-left: 12px; }
.c-hero__chips { left: 12px; top: 12px; gap: 6px; }
.c-hero__chip { height: 24px; padding: 0 8px; font-size: 10px; }
.c-hero__inset { left: -12px; bottom: -20px; width: 96px; height: 96px; border-width: 4px; }
.c-steps__rail, .c-steps__dot { display: none; }
.c-steps__row { flex-direction: column; gap: 28px; }
.c-steps__item { flex: none; padding: 0 0 0 52px; gap: 8px; min-height: 36px; }
.c-steps__item > .c-num { position: absolute; left: 0; top: -4px; }
.c-steps__item:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 40px; bottom: -24px; width: 1px; background: var(--border-100); }
.c-bento__side { flex-direction: column; }
.c-rail-row { padding: 0 0 48px 52px; gap: 24px; }
.c-photo-panel { aspect-ratio: auto; overflow: visible; border-radius: 0; }
.c-photo-panel > img { position: relative; display: block; height: 260px; border-radius: var(--radius-xl); }
.c-glass-card { position: relative; left: auto; right: auto; bottom: auto; margin: -56px 12px 0; padding: 24px; }
.c-nav .oe-nav__logo img { height: 18px; }
.c-nav .oe-nav__actions .c-nav__try { height: 36px; }
.c-crumb-wrap { margin-bottom: 28px; }
/* fil d’Ariane à 3 niveaux : le niveau intermédiaire est masqué (Accueil › page) */
  .c-crumb li:nth-child(3):not(:last-child), .c-crumb li:nth-child(4):not(:last-child) { display: none; }
.l-grid--2, .l-grid--3 { grid-template-columns: minmax(0, 1fr); }
.c-btns { flex-direction: column; align-items: stretch; width: 100%; }
.c-btns > .oe-btn { width: 100%; }
.c-cta { padding: 40px 24px 0; border-radius: var(--radius-xl); }
.c-cta__body { gap: 20px; }
.c-cta__actions { align-self: stretch; }
.c-cta__actions > .oe-btn { width: 100%; }
.c-cta__shot { width: 150%; margin: 8px 0 -24px 6%; }
.c-footer__cols { flex-wrap: wrap; row-gap: 40px; }
.c-footer__col { flex: 1 1 40%; }
.c-footer__bottom { margin-top: 48px; flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
}

/* ======================================================================
   RETOUR DE CLIC DES BOUTONS PRIMAIRES (tous les .oe-btn--primary, attribut data-ripple)
   Pastille qui s’étend depuis le point de clic, 600 ms. Élément injecté en JS
   dans le bouton, retiré après 620 ms.
   ====================================================================== */
[data-ripple] { position: relative; overflow: hidden; }
@keyframes hpRipple { from { transform: scale(0); opacity: 0.45; } to { transform: scale(14); opacity: 0; } }
.hp-ripple { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: currentColor; pointer-events: none; animation: hpRipple 600ms cubic-bezier(0, 0, 0.2, 1) forwards; }
@media (prefers-reduced-motion: reduce) { .hp-ripple { animation: none; opacity: 0; } }

/* ============================================================================
   6. Compléments de production — sémantique corrigée des menus (responsive.md §2.4, D20),
      mouvement de navigation validé (M18 200 ms, M19 150 ms, --ease-enter), focus.
   ============================================================================ */

/* L’en-tête ne prend pas de place : la barre est posée en haut de la première section (absolute). */
.c-header { display: contents; }

/* Déclencheur « Pour qui ? » : un bouton (motif disclosure), rendu identique au lien de nav. */
.c-nav__trigger { gap: 4px; margin: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.c-nav__trigger svg { flex: none; }

/* Sous-menu « Pour qui ? » (≥ 1024) : fermé par défaut, fondu + montée 4 px en 150 ms. */
.c-dropdown.oe-menu { visibility: hidden; opacity: 0; transform: translateY(4px); pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter), visibility 0s linear var(--duration-fast); }
.c-nav__has-menu.is-open > .c-dropdown.oe-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.c-dropdown .oe-menu__item:focus-visible, .c-dropdown__card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (max-width: 1023px) {
	.c-dropdown.oe-menu { display: none; }
}

/* Menu plein écran (< 1024) : fermé par défaut, fondu 200 ms ; au-delà de 1023 px il n’existe pas. */
.c-menu { visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease-enter), visibility 0s linear 200ms; }
.c-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
@media (min-width: 1024px) {
	.c-menu { display: none; }
}
html.is-menu-open, html.is-menu-open body { overflow: hidden; }

/* Ligne « Pour qui ? » du menu : lien vers /pour-qui/ + bouton chevron distinct (D20).
   La ligne reprend la géométrie de .c-menu__link (60 px + filet = 61 rendus, content-box). */
.c-menu__row { box-sizing: content-box; display: flex; align-items: center; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--border-100); }
.c-menu__row > .c-menu__link { flex: 1 1 auto; border-bottom: 0; }
.c-menu__toggle { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-500); cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: var(--radius-sm); }
.c-menu__toggle svg { width: 20px; height: 20px; transition: transform var(--duration-fast) var(--ease-standard); }
.c-menu__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.c-menu__sub[hidden] { display: none; }
.c-menu__close:focus-visible, .c-nav__burger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.c-menu__actions .t-note { text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.c-dropdown.oe-menu, .c-menu, .c-menu__toggle svg { transition: none; }
	.c-dropdown.oe-menu { transform: none; }
	/* Liens-flèches (M08) : « aucun » mouvement en réduit — la flèche ne glisse plus au survol. */
	.c-arrow svg { transition: none; }
	.c-arrow:hover svg { transform: none; }
}

/* Signature BimBeau du pied (styles inline du master convertis). */
.c-footer__signature { margin: 0; display: inline-flex; align-items: center; }

/* Pied au bas du niveau Laptop — défaut du handoff, identique dans le prototype (shared_request Architectes) :
   de 1024 à ≈ 1092 px, les 3 colonnes (544 px avec les écarts de 40) dépassent leur zone (476 px à 1024) et débordent
   dans la marge de droite ; sous 1032 px de largeur de mise en page, la fin de « Politique de confidentialité » passe
   sous le bord et est rognée par .hp-root { overflow-x: clip } (texte jusqu'à 1027,7 px, anneau de focus 4 px de plus).
   Dans cette seule zone, l'écart entre les colonnes passe de 40 à 24 px (valeur Tablette) : à 1024, le lien finit à
   995,7 px, anneau compris 999,7. Requête de conteneur sur le pied (largeur de mise en page, sans la barre de
   défilement) : une barre classique (15 à 17 px, Windows) étend la zone rognée jusqu'à ≈ 1048 px de fenêtre, couverte
   aussi (mesuré : prototype rogné de 18,7 px à 1024, thème 0). Rien ne change ailleurs (≥ 1032 px de mise en page,
   1280, 1440, Tablette, Mobile). Écart voulu vs prototype de 1024 à 1031 px : colonnes 2 et 3 décalées de 16 et 32 px
   vers la gauche. 25/09 : le lien « Paramètres de confidentialité » (décision de Victor, plus large que « Politique de
   confidentialité ») finit à 1 044,3 px avec les écarts de 40 : zone étendue à 1 063,98 px de mise en page (fenêtre ≤ 1 080 px
   sans requêtes de conteneur) — mesuré : aucun rognage de 1024 à 1100 px. Sans requêtes de conteneur (Safari < 16, Firefox < 110) : repli sur la largeur de fenêtre (plus bas).
   « not all and (max-width: 1023px) » = complément exact du niveau Tablette : couvre aussi les largeurs fractionnaires
   entre 1023 et 1024 px (zoom du navigateur), où « (min-width: 1024px) » ne s'appliquerait pas (disposition Laptop). */
@media not all and (max-width: 1023px) {
	@media (max-width: 1439px) {
		.c-footer { container: oeu-footer / inline-size; }
		@container oeu-footer (max-width: 1063.98px) {
			.c-footer__cols { gap: 24px; }
		}
		@container oeu-footer (max-width: 1043.98px) {
			.c-footer__cols { gap: 16px; } /* barre de défilement classique (15 px) : plus rien de rogné de 1024 à 1043 */
		}
	}
}

/* ----------------------------------------------------------------------------
   Replis des fonctions CSS récentes (audit « fonctions CSS récentes », clôture Phase D). Chaque bloc ne s'applique
   que dans un navigateur qui n'a pas la fonction : rendu inchangé dans les navigateurs récents.
   ---------------------------------------------------------------------------- */
/* Pied au bas du Laptop sans requêtes de conteneur (Safari < 16, Firefox < 110) : même écart de 24 px, sur la largeur
   de fenêtre (barre de défilement classique de 15 à 17 px comprise, d'où 1048). */
@supports not (container-type: inline-size) {
	@media not all and (max-width: 1023px) {
		@media (max-width: 1080px) {
			.c-footer__cols { gap: 24px; }
		}
		@media (max-width: 1060px) {
			.c-footer__cols { gap: 16px; }
		}
	}
}
/* .hp-root { overflow-x: clip } (site.css) rogne les débords voulus (visuels collants de Fonctionnalités, pied…) ; sans
   overflow: clip (Safari 15.4–15.6), ils deviendraient défilables horizontalement. overflow-x: hidden sur la racine du
   document, propagé au viewport sans créer de conteneur de défilement : position: sticky reste intacte (posé sur
   .hp-root, il bloquerait les éléments collants). Débords propres à l'Accueil rognés à leur source (page-home.css). */
@supports not (overflow-x: clip) {
	html { overflow-x: hidden; }
}
/* Navigation segmentée défilante (FAQ, < 768) : scrollbar-width (Chrome 121, Safari 18.2) doublé de ::-webkit-scrollbar,
   comme .oe-tabs--scroll du DS — sinon, barre classique de 15 px sous les onglets. Ignoré quand scrollbar-width s'applique. */
@media (max-width: 767px) {
	.c-seg-nav::-webkit-scrollbar { display: none; }
}
/* Messages d'état .oe-notice du DS (formulaire de Contact) : filet en color-mix() (Chrome 111, Safari 16.2) ; sans lui, la
   déclaration du DS (avec var()) est invalide au calcul et le filet prend la couleur du texte. Mêmes valeurs, figées :
   --action #e8503a à 24 %, --status-valid #1f9d55 à 32 %, --status-progress #e5a11b à 40 % (tokens.css). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.oe-notice--info { border-color: rgb(232 80 58 / 0.24); }
	.oe-notice--success { border-color: rgb(31 157 85 / 0.32); }
	.oe-notice--warning { border-color: rgb(229 161 27 / 0.4); }
}

/* Lignes des titres à deux lignes forcées (design-system.md §4) : chaque ligne est un bloc. */
.u-block { display: block; }
/* CTA final : accent sur la 1re ligne (exception validée). */
.c-cta__accent { display: block; font-weight: 600; }
.c-cta__line { display: block; }

/* Focus clavier du lien de la page courante : la règle du handoff « .oe-link--nav[aria-current="page"] { box-shadow: none } »
   (suppression du souligné vermillon du DS) retirait aussi l'anneau de focus — rétabli, rendu statique inchangé. */
.oe-link--nav[aria-current="page"]:focus-visible { box-shadow: var(--shadow-focus); }

/* Contraste élevé (couleurs forcées, Windows) : le système neutralise box-shadow, donc l'anneau du DS (--shadow-focus)
   disparaît, et les « outline: none » du DS et du site ne laissaient aucun indicateur de focus (WCAG 2.4.7) — mesuré sur
   l'Accueil, Architectes, Tarifs, FAQ et Contact. Contour système dans ce seul mode, même motif que Contact et Tarifs
   (page-contact.css, page-tarifs.css) ; aucun effet hors couleurs forcées. Spécificité 0,2,0 (placée après le DS et les
   règles du site) + le panneau « Pour qui ? » (0,3,0) : les règles de page propres à ce mode gardent la main (Tarifs :
   Highlight sur la bascule). Points du carrousel de l'Accueil : « .hh-dots .hp-ptab:focus-visible { outline: none } »
   (page-home.css, 0,3,0, chargée après) → sélecteur 0,4,0 dédié. */
@media (forced-colors: active) {
	:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
	.c-dropdown .oe-menu__item:focus-visible, .c-dropdown__card:focus-visible,
	.hp-root .hh-dots .hp-ptab:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* ============================================================================
   Hero métier — styles inline des masters convertis
   template-parts/sections/metier/hero.php · Architectes, Maîtres d’œuvre, Architectes d’intérieur
   (identiques.md §5). Structure et responsive : règles .c-hero* de la section 5 (site.css), inchangées.
   Les masters gardent trois réglages propres à chaque page — marge au-dessus des boutons (14 / 8 / 10),
   largeur max. du chapô (560 / 480 / 480), cadrage de la photo (assets.md §1) — reproduits par le
   modificateur de page .c-hero--<page> (écart avec « mêmes dimensions » signalé, non tranché).
   ============================================================================ */
/* Chapô : style="margin: 8px 0 0; max-width: 480px" */
.c-hero__lead { margin: 8px 0 0; max-width: 480px; }
/* Boutons : style="margin-top: …" */
.c-hero__btns { margin-top: 10px; }
/* « Voir les fonctionnalités » (.c-hero__soft, classe conservée comme crochet de QA) : le style inline des masters
   (background --bg-surface, border-color --border-100, color --ink-900) = état de repos du bouton tertiaire du DS, déjà
   donné par .oe-btn--tertiary : aucune règle. Ce style inline figeait aussi le survol (effet de bord) ; le survol du DS
   est rétabli (motion-spec M09 : fond --bg-beige, filet --border-strong, 150 ms), comme les boutons secondaires de
   l'Accueil et le bouton « Connexion » du menu plein écran. Écart voulu vs prototype : survol seulement. */
.c-hero--architectes .c-hero__lead { max-width: 560px; }
.c-hero--architectes .c-hero__btns { margin-top: 14px; }
.c-hero--architectes .c-hero__photo img { object-position: 60% 30%; }
.c-hero--maitres-doeuvre .c-hero__btns { margin-top: 8px; }
.c-hero--maitres-doeuvre .c-hero__photo img { object-position: 45% 35%; }
.c-hero--architectes-interieur .c-hero__btns { margin-top: 10px; }
.c-hero--architectes-interieur .c-hero__photo img { object-position: 55% 40%; }