/*
Theme Name: MT Univers
Description: Thème sur mesure du site MT Univers — menuiserie et agencement sur mesure, Beaussais-sur-Mer (Vincent Trayer).
Author: Studio From The Sea
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.2
Text Domain: mt-univers
*/

/* Typographie officielle — Strawford (Atipo Foundry), charte graphique MT
   Univers v1.0, page 17 : "la typographie principale de l'identité
   visuelle MT Univers... utilisée pour l'ensemble des textes de la
   marque." Arial reste le repli explicite de la charte (page 18) "lorsque
   l'usage de Strawford n'est pas possible". Droits d'usage transmis à
   Vincent par Mohio (agence de création de la charte) — confirmé par
   Benoit le 23/09. Fichiers .woff sous
   assets/fonts/strawford/, 7 graisses. */
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Strawford';
  src: url('assets/fonts/strawford/Strawford-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Instrument Serif Italic (Rick Banks, Google Fonts, licence SIL Open Font
   License — libre, aucune restriction webfont, contrairement à Strawford)
   — 23/09, pour la 2e ligne du titre hero homepage ("le savoir-faire d'un
   artisan"). Vérifié en zoomant sur MT-UNIVERS-site.pdf (300-400dpi) :
   cette ligne n'est PAS une simple oblique de Strawford — empattements
   fins visibles, contraste de graisse réel, construction différente de
   la ligne 1 (Strawford Black, elle bien géométrique/sans-serif). Un seul
   fichier italic (pas de romain) : ce fut la seule graisse/style
   nécessaire, jamais utilisée en dehors de .hero--lovable h1 em. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-serif/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Palette officielle — Charte graphique MT Univers v1.0 (2025), voir
   le dossier de marque MT Univers. Rouge/Vert1/Vert2/
   Beige/Blanc/Gris1/Gris2/Noir sont les 8 couleurs exactes de la charte.
   --accent-text est une dérivation plus sombre du Vert 2 officiel, non
   présente dans la charte : le Vert 2 (#B5AF69) n'offre que 2,3:1 de
   contraste en texte sur fond clair (WCAG AA exige 4,5:1) — utilisé tel
   quel uniquement en aplat/bordure ou en texte sur fond sombre (--deep),
   où le contraste est excellent (~8:1). */
:root {
  --bg: #F5F5ED;           /* Beige officiel */
  --surface: #FFFFFF;      /* Blanc officiel */
  --surface-2: #EFE7D8;
  --ink: #2C2A2A;          /* Gris 2 officiel */
  /* #7C7360 (valeur d'origine) ne passait pas le seuil AA 4,5:1 sur --bg
     (4,3:1) ni --surface-2 (3,8:1) — assombri le 2026-09-22 (audit
     accessibilité) à 5,4:1 / 4,8:1, conforme sur les deux fonds où ce
     texte est réellement utilisé (single.php, single-service.php,
     single-realisation.php, page-zone-realisations.php, avis). */
  --muted: #6B6354;
  --line: #E3D9C4;
  --deep: #40171F;         /* Rouge officiel */
  --deep-2: #2C0F15;
  --deep-ink: #F5F5ED;     /* Beige officiel, texte sur fond Rouge */
  --accent: #B5AF69;       /* Vert 2 officiel */
  --accent-gold: #C4BF87;  /* Vert 1 officiel */
  --accent-text: #6B6636;  /* Vert 2 assombri, lisible en texte sur fond clair */
  --accent-ink: #2C2A2A;   /* Gris 2 officiel, texte sur fond Vert */
  /* Gris 1 et Noir ajoutés le 23/09 (demande de Vincent, charte complète
     vérifiée dans le dossier de marque MT Univers :
     MTUnivers-BrandGuidelines_RVB-1920x1080px.pdf, page 15) — les 2 des 8
     couleurs officielles qui manquaient jusqu'ici. --gris-1 remplace
     --eye-blue (#8B6F72), une couleur qui n'a jamais fait partie de la
     charte (jamais annotée "officiel", contrairement à toutes les autres
     ci-dessus). */
  --gris-1: #D4D1D1;       /* Gris 1 officiel */
  --noir: #000000;         /* Noir officiel */
  --ok: #6B7A5E;
  --shadow: 0 24px 60px -30px rgba(64,23,31, 0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Strawford', Arial, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Strawford', Arial, sans-serif; font-weight: 700; text-wrap: balance; margin: 0; color: var(--deep-2); }
/* height:auto (23/09, "la photo est difforme et n'a pas le bon dimensionnement" —
   Benoit) : sans elle, une image qui a des attributs HTML width/height (mis par
   sfts_img_dims_attr() pour éviter le CLS) et dont la largeur est réduite par
   max-width:100% garde une hauteur figée à l'attribut HTML brut au lieu de suivre
   le ratio réel — étirement vertical. Ne change rien pour les images qui ont déjà
   leur propre aspect-ratio/object-fit sur un sélecteur plus spécifique (règle en
   cascade, remplacée normalement) ; corrige seulement les images "nues" comme
   celle de "La courbe, ma signature". */
img { max-width: 100%; height: auto; }
a { color: var(--deep); }
.wrap { width: min(calc(100% - 40px), 1080px); margin: 0 auto; }
/* AJOUTÉ le 2026-09-25 (brief accueil, point 6.3 : "élargir le container").
   Scopé à cette seule section pour l'instant, jamais appliqué ailleurs sans
   demande explicite. */
.wrap--wide { width: min(calc(100% - 40px), 1320px); margin: 0 auto; }

/* Utilitaire "visuellement masqué" (2026-09-22) — pour un titre <h1> réel
   quand un hero n'affiche plus aucun texte (voir page-nos-chantiers.php) :
   jamais une page sans niveau 1, même invisible à l'écran. Pattern standard
   (dimensions 1px + clip, jamais display:none qui le retirerait aussi des
   lecteurs d'écran). */
.sfts-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Accessibilité (2026-09-20, inspiré des critères Webby Awards "Accessible
   Technology") : lien "Aller au contenu", invisible tant qu'il n'a pas le
   focus clavier — pattern standard, jamais visible autrement. */
.sfts-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--deep, #111);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.sfts-skip-link:focus {
  left: 0;
}

/* États de focus clavier (2026-09-21, Apple HIG + Material Design 3 :
   les deux exigent un indicateur de focus visible et cohérent — jamais
   compter sur l'anneau bleu par défaut du navigateur, invisible sur
   fond Rouge et non assorti à la marque). :focus-visible (pas :focus)
   pour ne jamais afficher l'anneau sur un simple clic souris, seulement
   au clavier — comportement natif du sélecteur, aucun JS necessaire. Gris 2
   sur fond clair (la quasi-totalité du site) ; surchargé en Beige sur les
   fonds sombres (bandeau, hero, bandes .band-dark) où le Gris 2
   disparaîtrait sur le Rouge. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
header.site-header :focus-visible,
.hero :focus-visible,
.band-dark :focus-visible,
.main-nav--overlay :focus-visible,
.sfts-skip-link:focus-visible {
  outline-color: var(--deep-ink);
}

/* Nav */
header.site-header {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 16px 0;
  /* position+z-index nécessaires pour que le menu déroulant "Nos
     savoir-faire" (position: absolute, voir .nav-dropdown-menu) reste
     au-dessus du hero — trouvé le 2026-09-20 : .hero--photo (position:
     relative) avalait sinon le menu déroulant dans son propre empilement,
     invisible bien que présent dans le DOM avec un texte parfaitement
     lisible (vérifié via document.elementFromPoint, pas juste supposé).
     sticky (2026-09-21, "dynamisme du site en général" demandé par Benoit) :
     remplace position:relative — reste visible en permanence (toujours 1
     geste pour revenir au menu/devis), même z-index/empilement conservé donc
     n'affecte ni le menu déroulant ni le portail d'intro (position:fixed,
     indépendant) ni le menu plein écran (position:fixed lui aussi). */
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s ease;
}
header.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35); }
/* Bandeau TOUJOURS transparent (2026-09-21, "le bandeau menu doit être tout
   le temps transparent, seul le logo change de couleur en fonction de la
   palette couleur du bandeau [derrière lui], pour montrer l'étendue de la
   charte graphique" — Benoit ; remplace le fond blanc plein qui apparaissait
   au scroll plus tôt le même jour). position:fixed (pas sticky comme la
   base .site-header) pour flotter réellement SUR le contenu au lieu de
   réserver sa propre bande au-dessus. Jamais de fond ni d'ombre — seuls le
   logo et le texte changent de teinte, pilotés par .is-on-light (voir
   footer.php : vraie détection de ce qu'il y a derrière le bandeau à chaque
   instant — .hero/.cinematic-band/.band-dark = sombre, tout le reste =
   clair — pas juste un seuil de scroll). Scopé à .site-header--light (donc à
   MT Univers) — la base .site-header (bandeau bordeaux plein, autres
   clients) garde son position:sticky d'origine. */
header.site-header--light {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; color: var(--deep-ink);
  /* Neutralise l'ombre héritée de header.site-header.is-scrolled (base
     partagée, toujours nécessaire pour le bandeau bordeaux plein des autres
     clients) — ici le bandeau reste transparent en permanence, jamais
     d'ombre flottant sur rien. */
  box-shadow: none !important;
  transition: background 0.25s ease;
}
/* Voile verre dépoli, UNIQUEMENT au-dessus d'une zone claire (bug trouvé le
   2026-09-22, audit UX : le bandeau restait transparent même sur les
   sections claires, donc les libellés/vignettes qui défilent dessous se
   superposaient littéralement au texte du menu, illisible sur "Nos
   réalisations" comme sur l'accueil — capture à l'appui). Le bandeau garde
   sa transparence totale au-dessus du hero/bandes sombres (.is-on-light
   absent) : l'effet "flotte sur la photo" voulu par Benoit ne change pas là
   où il fonctionnait déjà. Seule la zone claire, où le voile manquait,
   reçoit un fond translucide + flou — montre toujours la couleur en dessous
   (esprit de la demande d'origine), juste assez opaque pour rester lisible. */
header.site-header--light.is-on-light {
  background: rgba(245,245,237,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
header.site-header--light nav.main-nav a { color: rgba(240,237,224,0.92); text-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: color 0.25s ease, text-shadow 0.25s ease; }
header.site-header--light nav.main-nav a:hover { color: var(--accent-gold); }
header.site-header--light.is-on-light nav.main-nav a { color: var(--ink); text-shadow: none; }
header.site-header--light.is-on-light nav.main-nav a:hover { color: var(--accent-text); }
/* Lien actif (2026-09-23, demande explicite de Benoit : "les catégories [...]
   doivent être actives lorsque l'on clique sur la page") — même couleur que
   le survol (déjà la couleur "sélectionnée" de la charte), mais PERSISTANTE
   (pas juste au survol) + un trait sous le lien, pour que ce soit lisible
   même sans survoler avec la souris (tactile, clavier). */
header.site-header--light nav.main-nav a.is-active,
header.site-header--light nav.main-nav a:hover.is-active { color: var(--accent-gold); font-weight: 700; border-bottom: 2px solid var(--accent-gold); padding-bottom: 2px; }
header.site-header--light.is-on-light nav.main-nav a.is-active,
header.site-header--light.is-on-light nav.main-nav a:hover.is-active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
header.site-header--light .brand { color: var(--deep-ink); }
header.site-header--light.is-on-light .brand { color: var(--ink); }
header.site-header--light .nav-cta { color: var(--deep-ink) !important; }
header.site-header--light.is-on-light .nav-cta { color: var(--accent-ink) !important; }
/* Logo : deux fichiers, un seul affiché à la fois (voir header.php) — blanc
   tant qu'une bande sombre est derrière le bandeau, noir dès qu'il flotte
   sur une bande claire. */
header.site-header--light .brand-logo-img--dark { display: none; }
header.site-header--light.is-on-light .brand-logo-img--light { display: none; }
header.site-header--light.is-on-light .brand-logo-img--dark { display: block; }
/* Le bandeau ne réserve plus d'espace en flux (position:fixed) : le hero
   commence réellement à y=0 et le contenu remonte d'autant — c'est l'effet
   recherché. Seul le lien d'ancre du hero (#sfts-catalogue-anchor, "Défiler")
   doit compenser, sinon la cible atterrit sous le bandeau une fois scrollé.
   Cible renommée le 2026-09-22 : pointait vers #stats-band-anchor, supprimée
   avec le bandeau chiffres (2e bandeau retiré ce jour-là). */
#sfts-catalogue-anchor { scroll-margin-top: 110px; padding-left: 20px; padding-right: 20px; }
header.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: nowrap; }
.brand { font-family: 'Strawford', Arial, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--deep-ink); text-decoration: none; flex-shrink: 0; }
.brand-logo { display: flex; align-items: center; position: relative; z-index: 201; }
/* Bandeau réorganisé le 2026-09-20 (moins pro avec le logo à 96px : un nom de
   praticien un peu long ou une charte au ratio large faisait passer le menu
   sur une seconde ligne, coupant visuellement le bandeau en deux blocs
   empilés). 64px→72px le 2026-09-21 (logo pas assez visible signalé par
   Benoit) : vérifié réellement dans Chrome (nav.main-nav, mesure du "top"
   de chaque lien) que 72px ne fait jamais passer le menu sur 2 lignes
   jusqu'à 820px de large — au-delà, seul un vrai écran mobile change de mise
   en page (voir la media query juste en dessous). Entre 700 et ~820px, le
   menu passait déjà sur 2 lignes AVANT ce changement (bug préexistant, pas
   aggravé ici) — à traiter séparément si besoin. Jamais remonté à 96px : le
   risque de repasser sur 2 lignes à largeur normale reste réel au-delà. */
.brand-logo-img { height: 72px; width: auto; display: block; }
@media (max-width: 700px) { .brand-logo-img { height: 44px; } }
.brand span { color: var(--accent-gold); font-style: italic; }
.brand .brand-first { color: inherit; font-style: normal; }
nav.main-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
nav.main-nav a { color: rgba(240,237,224,0.82); text-decoration: none; font-size: 0.92rem; font-weight: 500; white-space: nowrap; }
nav.main-nav a:hover { color: var(--accent-gold); }
/* Générique (autres sites que MT Univers, sans .site-header--light) — même
   principe que ci-dessus : couleur de survol rendue persistante + trait
   sous le lien pour le lien de la page en cours. */
nav.main-nav a.is-active { color: var(--accent-gold); font-weight: 700; border-bottom: 2px solid var(--accent-gold); padding-bottom: 2px; }
.nav-cta { background: var(--accent); color: var(--accent-ink) !important; padding: 9px 18px; border-radius: 999px; font-weight: 600; display: inline-block; transition: transform 0.15s cubic-bezier(0.19,1,0.22,1), filter 0.3s ease; }
.nav-cta:hover { filter: brightness(0.94); transform: translateY(-2px); }
.nav-cta:active { transform: scale(0.96); }

/* ---------- Menu mobile "à la iPhone" (2026-09-22, demande explicite de
   Benoit après un vrai test sur téléphone) — bug réel trouvé en testant :
   nav.main-nav passait juste en display:none sous 700px (voir plus bas
   dans ce fichier, règle jamais retirée depuis l'ancien menu hamburger
   plein écran), sans AUCUN remplacement — zéro moyen de naviguer sur
   mobile en dehors du logo et de la barre de contact flottante. Un vrai
   bouton (pas un menu cachÉ "juste parce que"), un panneau plein écran,
   de grandes cibles tactiles — jamais un menu texte minuscule entassé. */
.sfts-nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 10px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  position: relative; z-index: 201; color: inherit;
}
.sfts-nav-toggle span { position: relative; display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.2s ease; }
.sfts-nav-toggle span::before, .sfts-nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.19,1,0.22,1);
}
.sfts-nav-toggle span::before { top: -8px; }
.sfts-nav-toggle span::after { top: 8px; }
.sfts-nav-toggle[aria-expanded="true"] { color: var(--deep-ink) !important; }
.sfts-nav-toggle[aria-expanded="true"] span { background: transparent; }
.sfts-nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.sfts-nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }
header.site-header--light .sfts-nav-toggle { color: rgba(240,237,224,0.92); }
header.site-header--light.is-on-light .sfts-nav-toggle { color: var(--ink); }

@media (max-width: 700px) {
  .sfts-nav-toggle { display: flex; }
  nav.main-nav {
    position: fixed; inset: 0; z-index: 199;
    flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    background: var(--deep, #40171F);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s ease;
  }
  nav.main-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  header.site-header--light nav.main-nav a,
  header.site-header--light.is-on-light nav.main-nav a {
    color: var(--deep-ink); font-size: 1.55rem; font-weight: 700; padding: 14px 0;
  }
  header.site-header--light nav.main-nav a:hover { color: var(--accent-gold); }
  nav.main-nav a.is-active { color: var(--accent-gold) !important; }
  nav.main-nav .nav-cta { margin-top: 18px; font-size: 1.05rem; padding: 15px 34px; }
  html.sfts-nav-open { overflow: hidden; }
}
/* Menu mobile MT Univers allégé (2026-09-23, Benoit : "on ne voit rien du
   tout [...] j'aimerais que le menu soit le même que celui de l'ordinateur
   adapté à la taille de l'écran mais que l'on retrouve la photo des mains
   et du bois avec le menu moins gros") — le panneau générique ci-dessus
   (fond opaque plein écran, texte 1.55rem) masquait entièrement le hero
   photo derrière lui. Scopé à .site-header--light (donc SEUL MT Univers,
   jamais les autres sites générés par ce même thème, qui gardent le panneau
   opaque générique ci-dessus) : fond translucide + flouté (la photo hero
   reste visible en transparence, comme demandé), liens alignés en haut à
   gauche à une taille proche du menu ordinateur (0.92rem, voir "nav.main-nav
   a" plus haut) plutôt que le 1.55rem centré plein écran. Rien de tout ceci
   ne touche l'ordinateur : ce bloc entier est dans le même @media
   (max-width:700px) que le panneau qu'il remplace visuellement. */
@media (max-width: 700px) {
  header.site-header--light nav.main-nav {
    justify-content: flex-start; align-items: flex-start; gap: 0;
    background: rgba(44,15,21,0.55);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 96px 28px 28px; overflow-y: auto;
  }
  header.site-header--light nav.main-nav a,
  header.site-header--light.is-on-light nav.main-nav a {
    font-size: 1.05rem; font-weight: 600; padding: 13px 0; width: 100%;
    text-align: left; border-bottom: 1px solid rgba(240,237,224,0.14);
  }
  header.site-header--light nav.main-nav a.is-active,
  header.site-header--light.is-on-light nav.main-nav a.is-active {
    color: var(--accent-gold); border-bottom-color: var(--accent-gold);
  }
  header.site-header--light nav.main-nav .nav-cta {
    align-self: flex-start; margin-top: 20px; font-size: 0.98rem; padding: 13px 28px;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { nav.main-nav { transition: none; } }
/* Sous-menu « Prestations » dans le menu mobile (2026-09-29, Benoit : « le
   menu n'est pas visible » sur téléphone). Rien ne prévoyait ce sous-menu
   sur mobile : il gardait sa forme ORDINATEUR (boîte blanche flottante,
   texte presque blanc donc illisible) et, à l'ouverture, le focus posé sur
   son premier lien (« Agencement ») l'affichait par-dessus Réalisations,
   Savoir-faire, À propos et Contact. Sur mobile : les 3 prestations sont
   toujours visibles, en liste, dans le style des autres liens. Fond du
   panneau plus opaque (0,55 → 0,88) : texte lisible même ouvert au-dessus
   d'une section claire, la photo reste devinée par transparence. */
@media (max-width: 700px) {
  header.site-header--light nav.main-nav { background: rgba(44,15,21,0.88); }
  header.site-header--light nav.main-nav .nav-dropdown { width: 100%; }
  header.site-header--light nav.main-nav .nav-dropdown-toggle {
    width: 100%; justify-content: flex-start; padding: 13px 0; cursor: default;
    font-size: 1.05rem; font-weight: 600; color: var(--deep-ink) !important;
    text-decoration: none !important; border-bottom: 1px solid rgba(240,237,224,0.14);
  }
  header.site-header--light nav.main-nav .nav-dropdown-toggle::after { content: none; }
  header.site-header--light nav.main-nav .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    background: none; box-shadow: none; border-radius: 0;
    margin: 0; padding: 0 0 0 18px; min-width: 0; width: 100%; gap: 0;
  }
  header.site-header--light nav.main-nav .nav-dropdown-menu::before { content: none; }
  header.site-header--light nav.main-nav .nav-dropdown-menu a {
    color: rgba(245,245,237,0.86) !important; font-size: 0.98rem; font-weight: 500; border-radius: 0;
  }
  header.site-header--light nav.main-nav .nav-dropdown-menu a.is-active { color: var(--accent-gold) !important; }
}
/* Menu ouvert APRÈS défilement (2026-09-29, bug réel sur téléphone) : sur une
   section claire, l'en-tête reçoit un backdrop-filter (voir .is-on-light) —
   or un élément avec backdrop-filter devient le cadre des éléments
   position:fixed qu'il contient. Le panneau du menu (fixed, inset:0) était
   alors enfermé dans les ~120 px de l'en-tête : 2 lignes visibles, le reste
   invisible. Menu ouvert = en-tête sans flou ni fond (le panneau couvre tout
   l'écran) et logo clair sur le panneau sombre. */
@media (max-width: 700px) {
  html.sfts-nav-open header.site-header--light,
  html.sfts-nav-open header.site-header--light.is-on-light {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none;
  }
  html.sfts-nav-open header.site-header--light.is-on-light .brand-logo-img--light { display: block; }
  html.sfts-nav-open header.site-header--light.is-on-light .brand-logo-img--dark { display: none; }
}
/* Regroupement des prestations sous un seul menu déroulant dès qu'il y en a
   plus de 3 — évite un bandeau à rallonge avec chaque nom de prestation en
   entrée de menu séparée (le vrai problème derrière le bandeau "pas pro" du
   2026-09-20 : 4 noms de prestations complets + Galerie + À propos + CTA ne
   tenaient jamais sur une ligne). CSS pur (hover/focus), sans JS, générique
   pour tout futur client à plusieurs prestations. */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; font: inherit; color: rgba(240,237,224,0.82); cursor: pointer; padding: 0; display: flex; align-items: center; gap: 5px; font-size: 0.92rem; font-weight: 500; }
.nav-dropdown-toggle::after { content: "\25BE"; font-size: 0.7em; }
.nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--accent-gold); }
/* État actif (23/09) — même traitement que nav.main-nav a.is-active
   (couleur + trait), pour que "Prestations" reste repérable comme les
   autres entrées de nav quand on est sur une de ses 3 sous-pages. */
.nav-dropdown-toggle.is-active { color: var(--accent-gold); font-weight: 700; border-bottom: 2px solid var(--accent-gold); padding-bottom: 2px; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; padding: 10px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow);
  min-width: 240px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
/* AJOUTÉ le 2026-09-25 (brief Vincent, "sous-menus affichés mais pas
   cliquables") : les 14px de margin-top ci-dessus créent une vraie zone
   morte entre le bouton "Prestations" et le menu déroulant — rien n'y est
   peint, donc :hover se perd en traversant cet espace avant que la souris
   n'atteigne un lien, et le menu se referme (transition 0.15s) avant le
   clic. Ce pseudo-élément invisible comble exactement cette zone, comme
   descendant de .nav-dropdown-menu (donc de .nav-dropdown) : le survol
   reste continu du bouton jusqu'au premier lien, sans changer le rendu. */
.nav-dropdown-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; pointer-events: auto; }
.nav-dropdown-menu a { color: var(--ink) !important; padding: 9px 12px; border-radius: 6px; white-space: normal; }
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--ink) !important; }
/* Survol + page active du menu MT Univers — 2026-09-26 (Benoit : "le survol
   [...] est jaune, il faut une couleur de la charte qui aille avec tout le
   reste lorsque l'on scrolle, pour voir toujours le menu et la page
   active"). Remplace Vert 1 (#C4BF87, perçu jaune) et #6B6636 (hors charte)
   par 2 couleurs officielles seulement, selon ce qu'il y a derrière le
   bandeau (.is-on-light, piloté par footer.php) :
   - sur photo / bande sombre : Beige #F5F5ED (liens au repos atténués à
     78 %, pleine intensité + soulignement au survol et sur la page active) ;
   - sur section claire : Rouge #40171F.
   Le soulignement (et non la couleur seule) garantit que la page active
   reste repérable dans les deux cas. Scopé à .site-header--light. */
header.site-header--light nav.main-nav a:not(.nav-cta),
header.site-header--light .nav-dropdown-toggle { color: rgba(245,245,237,0.78); text-decoration: none; }
header.site-header--light nav.main-nav a:not(.nav-cta):hover,
header.site-header--light nav.main-nav a:not(.nav-cta):focus-visible,
header.site-header--light .nav-dropdown:hover .nav-dropdown-toggle,
header.site-header--light .nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--deep-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
header.site-header--light nav.main-nav a.is-active:not(.nav-cta),
header.site-header--light .nav-dropdown-toggle.is-active { color: var(--deep-ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--deep-ink); padding-bottom: 2px; }
header.site-header--light.is-on-light nav.main-nav a:not(.nav-cta),
header.site-header--light.is-on-light .nav-dropdown-toggle { color: var(--ink); }
header.site-header--light.is-on-light nav.main-nav a:not(.nav-cta):hover,
header.site-header--light.is-on-light nav.main-nav a:not(.nav-cta):focus-visible,
header.site-header--light.is-on-light .nav-dropdown:hover .nav-dropdown-toggle,
header.site-header--light.is-on-light .nav-dropdown:focus-within .nav-dropdown-toggle,
header.site-header--light.is-on-light nav.main-nav a.is-active:not(.nav-cta),
header.site-header--light.is-on-light .nav-dropdown-toggle.is-active { color: var(--deep); }
header.site-header--light.is-on-light nav.main-nav a.is-active:not(.nav-cta),
header.site-header--light.is-on-light .nav-dropdown-toggle.is-active { border-bottom-color: var(--deep); }
/* Items du sous-menu (fond blanc) : jamais le style ci-dessus (ni l'ombre du
   texte héritée de nav.main-nav a, retirée le 2026-10-01). */
header.site-header--light .nav-dropdown-menu a { text-decoration: none !important; border-bottom: 0 !important; text-shadow: none !important; }
/* Menu mobile (panneau Rouge translucide, toujours sombre) : Beige partout. */
@media (max-width: 700px) {
  header.site-header--light nav.main-nav a:not(.nav-cta),
  header.site-header--light.is-on-light nav.main-nav a:not(.nav-cta) { color: rgba(245,245,237,0.85) !important; border-bottom: 1px solid rgba(245,245,237,0.14); padding-bottom: 13px; }
  header.site-header--light nav.main-nav a:not(.nav-cta):hover,
  header.site-header--light nav.main-nav a.is-active:not(.nav-cta),
  header.site-header--light.is-on-light nav.main-nav a.is-active:not(.nav-cta) { color: var(--deep-ink) !important; border-bottom-color: var(--deep-ink); text-decoration: none; }
}
@media (max-width: 900px) { .nav-dropdown-menu { left: 0; transform: none; } }

/* Menu plein écran — demandé le 2026-09-21 par Vincent Trayer (MT Univers)
   pour se rapprocher visuellement de yana-k-design.fr (icône hamburger +
   panneau plein écran couleur de marque), en gardant les couleurs déjà
   choisies pour ce site (jamais la palette blanc/noir/framboise du site de
   référence — décision explicite de Benoit). Opt-in (field_nav_style_overlay),
   n'affecte aucun autre client. */
.nav-overlay-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  padding: 0; flex-shrink: 0;
  /* position+z-index nécessaires : .main-nav--overlay est un enfant DOM de ce
     même bandeau (voir header.php), donc son z-index (200) se compare à ses
     propres frères et sœurs (dont ce bouton) dans le contexte d'empilement
     local du bandeau — le z-index du bandeau lui-même (250) ne joue aucun
     rôle ici. Sans ceci, le bouton de fermeture disparaît sous le panneau
     plein écran une fois ouvert (trouvé en testant réellement l'ouverture
     dans Chrome, pas supposé). */
  position: relative; z-index: 201;
}
.nav-overlay-toggle span {
  display: block; width: 26px; height: 2px; background: var(--deep-ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-overlay-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-overlay-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-overlay-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.site-header--overlay-nav .main-nav--overlay {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.site-header--overlay-nav .main-nav--overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-header--overlay-nav .main-nav--overlay a {
  font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 500; color: var(--deep-ink);
}
.site-header--overlay-nav .main-nav--overlay a:hover { color: var(--accent-gold); }
.site-header--overlay-nav .main-nav--overlay .nav-cta { padding: 12px 30px; }
.site-header--overlay-nav .main-nav--overlay .nav-dropdown { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.site-header--overlay-nav .main-nav--overlay .nav-dropdown-toggle { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }
.site-header--overlay-nav .main-nav--overlay .nav-dropdown-menu {
  position: static; opacity: 1; pointer-events: auto; transform: none; box-shadow: none;
  background: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0;
}
.site-header--overlay-nav .main-nav--overlay .nav-dropdown-menu a {
  font-size: 1rem; text-transform: none; letter-spacing: normal; color: rgba(240,237,224,0.75) !important;
}
html.sfts-nav-overlay-active { overflow: hidden; }
/* Le bandeau doit rester au-dessus du panneau plein écran (z-index 200) et
   visible même si la page était défilée au moment de l'ouverture — sinon le
   bouton de fermeture (devenu invisible, recouvert par le panneau) est
   injoignable autrement qu'au clavier (Échap). Trouvé en testant réellement
   l'ouverture/fermeture dans Chrome, pas supposé fonctionnel. */
header.site-header.site-header--overlay-nav { position: sticky; top: 0; z-index: 250; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--deep-ink); padding: 64px 0 72px; }
/* Variante "photo plein cadre" — inspirée d'une revue réelle de 7 sites BTP de
   référence (Legendre, Ciméo, Baldeschi, Suffolk, Turner, Eiffage, Pradeau
   Morin, 2026-09-14) : le pattern n°1 qui revient chez presque tous est une
   vraie photo de chantier/réalisation en plein cadre, jamais un aplat de
   couleur uni, avec un dégradé sombre localisé en bas de l'image (pas toute
   la photo assombrie) pour la lisibilité du texte blanc. Activée seulement
   si une vraie photo est fournie (jamais une photo de banque générique) —
   sinon le hero garde son dégradé de couleur par défaut ci-dessus.
   2026-09-20 : la photo était posée en background-image inline (voir
   index.njk) — remplacée par une vraie balise <img> (voir front-page.php)
   après avoir mesuré au Lighthouse qu'une image de fond CSS reste
   difficile à prioriser pour le LCP même avec un <link rel="preload">
   (Compagnons restait à 4,7s de LCP ; passé sous les 2s avec une vraie
   balise <img fetchpriority="high">). Le rendu visuel reste identique —
   seul le mécanisme change. */
/* overflow:hidden ajouté le 2026-09-21 : contient le léger zoom d'entrée
   GSAP de .hero--photo-img (voir footer.php) sans faire déborder l'image
   au-delà du cadre du hero. */
.hero--photo { position: relative; overflow: hidden; }
.hero--photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* Renforcé le 2026-09-15 (0.05→0.28 en haut) après avoir vu, sur une vraie
     photo claire (mur enduit), le texte perdre en lisibilité en haut du
     hero — l'ancien dégradé supposait une photo plutôt sombre en haut
     (ciel, toiture). Un minimum d'assombrissement partout, jamais nul,
     reste nécessaire quelle que soit la photo choisie par un futur client. */
  background: linear-gradient(to top, rgba(6,10,16,0.82) 0%, rgba(6,10,16,0.5) 45%, rgba(6,10,16,0.28) 100%);
}
.hero--photo .hero-grid, .hero--photo .wrap { position: relative; z-index: 2; }
/* Masque allégé sur la homepage uniquement (23/09, capture d'écran réelle
   de Vincent : "baisser l'opacité du masque gris afin de faire ressortir
   d'avantage les couleurs") — opacités du dégradé sombre à peu près
   divisées par 2 (0.82→0.45, 0.5→0.28, 0.28→0.12), jamais nulles (le
   texte doit rester lisible). Scopé à .hero--lovable, jamais
   .hero--photo::before lui-même : les pages commune/service gardent le
   masque d'origine, pensé pour des photos moins contrôlées qu'ici. */
.hero--lovable.hero--photo::before {
  background: linear-gradient(to top, rgba(6,10,16,0.45) 0%, rgba(6,10,16,0.28) 45%, rgba(6,10,16,0.12) 100%);
}

/* Carrousel hero — le moteur (fondu, flèches, pastilles, pause) a été
   EXTRAIT le 2026-09-23 vers le SFTS EXPERIENCE COMPONENT #005 "Hero
   Carousel Experience" (components/sfts-hero-carousel-experience/,
   sfts_hero_carousel_experience() — voir son README.md). Les couleurs
   réelles MT Univers sont passées via l'argument `theme` de l'appel
   (front-page.php, inline style — spécificité plus forte qu'une règle de
   ce fichier), ce fichier ne porte donc plus que l'ajustement de position
   propre à ce hero précis. */
.hero--lovable .sfts-hcx-dots { bottom: 100px; }
/* 2026-09-27 : fondu plus long (2s) avec l'intervalle de 7s — "une plongée dans son univers". */
.hero--lovable .sfts-hcx-img { transition-duration: 2s; }
@media (max-width: 700px) { .hero--lovable .sfts-hcx-dots { bottom: 22px; } }
/* Pas de portrait en vis-à-vis quand une photo de fond est active (voir
   front-page.php) — la photo plein cadre remplace le portrait, comme chez
   Legendre/Baldeschi/Turner (texte simplement posé sur l'image, jamais une
   grille à deux colonnes qui laisserait un vide). */
.hero--photo .hero-grid { grid-template-columns: 1fr; max-width: 680px; }
.hero .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 16px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin-bottom: 18px; color: var(--deep-ink); }
.hero p.lead { font-size: 1.08rem; color: rgba(240,237,224,0.85); max-width: 640px; margin-bottom: 28px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; } .hero-portrait-wrap, .hero-showcase-wrap { order: -1; display: flex; justify-content: center; } }
.hero-portrait-wrap { display: flex; justify-content: center; }
/* border-radius retiré le 24/09 (demande de Benoit : "dans tout le site les
   photos doivent être parfaitement rectangulaire sans arrondi") — portrait
   carré, plus circulaire. */
.hero-portrait { width: 280px; height: 280px; border-radius: 0; object-fit: cover; border: 4px solid var(--accent-gold); box-shadow: 0 0 0 3px var(--gris-1), 0 24px 60px -20px rgba(0,0,0,0.45); }

/* Hero "immersif" — demandé le 2026-09-21 par Vincent Trayer (MT Univers),
   qui veut se rapprocher visuellement de yana-k-design.fr (architecture
   d'intérieur) : plein écran, texte centré, très aéré — en gardant les
   couleurs de marque déjà choisies (jamais la palette blanc/noir/framboise
   de ce site de référence, décision explicite de Benoit). Réutilise le
   mécanisme .hero--photo existant (vraie balise <img>, dégradé sombre pour
   la lisibilité) — .hero--immersive ne fait qu'agrandir/recentrer. */
/* Passé à 100vh le 2026-09-21 (demande explicite de Benoit : "le client
   adore iPhone [...] la home page [doit être] prioritaire pour mettre la
   photo en valeur") — la photo occupe tout l'écran au chargement, dans
   l'esprit des pages produit Apple (image plein cadre, peu d'éléments
   d'interface superposés) plutôt qu'un hero de hauteur fixe. */
/* min-height: 100svh ajouté le 2026-09-23 (Benoit, sur iPhone : "le hero [...]
   ne tient plus dans l'écran il déborde") — 100vh sur Safari iOS se base sur
   la hauteur maximale théorique (barre d'adresse rétractée), pas sur ce qui
   est réellement visible à l'instant du chargement ; combiné au
   viewport-fit=cover ajouté juste avant (nécessaire pour la barre sticky,
   voir header.php), le hero dépassait l'écran réel. 100svh (small viewport
   height, hauteur GARANTIE visible même barre d'adresse affichée) est la
   valeur pensée pour exactement ce cas — déclarée en second pour que les
   navigateurs qui ne la comprennent pas gardent 100vh en repli, jamais un
   hero sans hauteur du tout. */
/* Hauteur unifiée sur TOUT le site (24/09, demande de Benoit : "le hero de
   chaque bouton du menu doivent faire la même taille que le hero du
   homepage") — auparavant 100vh ici, réduit à 66vh le 23/09 UNIQUEMENT sur
   la homepage via .hero--lovable (pour caser une section supplémentaire
   sans scroll, voir single .hero--lovable.hero--immersive juste en dessous,
   retiré ici car devenu redondant : même valeur des deux côtés maintenant).
   Les 7 autres gabarits qui utilisent .hero--immersive seul (À propos,
   Galerie, Savoir-faire, zones Agencement/Menuiserie intérieure/extérieure,
   Nos réalisations, pages commune, pages service) héritent donc directement
   de la même taille que la homepage, sans les retoucher un par un. */
.hero--immersive { min-height: 66vh; min-height: 66svh; display: flex; align-items: center; padding: 90px 0; }
/* 2026-09-30 (corrections de Vincent, point 4.1) : tous les heros alignés à
   gauche, au bord de page, comme l'accueil — étaient centrés. La largeur de
   lecture (760px) passe sur le bloc de texte, plus sur .wrap. */
.hero--immersive .hero-grid { max-width: none; text-align: left; }
.hero--immersive .hero-grid > div { max-width: 760px; }
.hero--immersive .eyebrow { letter-spacing: 0.22em; }
/* À propos (2026-09-29) : Vincent est à droite de la photo, dans la
   lumière ; le texte passe à gauche, dans la pénombre de l'atelier, au même
   bord que le reste de la page — au lieu d'être centré sur son geste. Masque
   latéral plus léger que le dégradé par défaut : la photo est déjà sombre. */
.hero--apropos .hero-grid { text-align: left; max-width: none; }
.hero--apropos .hero-grid > div { max-width: 680px; }
.hero--apropos.hero--photo::before {
  background: linear-gradient(to right, rgba(6,10,16,0.72) 0%, rgba(6,10,16,0.42) 42%, rgba(6,10,16,0.08) 75%);
}
@media (max-width: 800px) {
  .hero--apropos.hero--photo::before { background: linear-gradient(to top, rgba(6,10,16,0.82) 0%, rgba(6,10,16,0.45) 50%, rgba(6,10,16,0.2) 100%); }
}
/* Contact (2026-09-29) : miroir d'À propos — Vincent à gauche dans la
   lumière, texte à droite (aligné à gauche dans sa colonne), sur le
   véhicule assombri. */
.hero--contact .hero-grid { text-align: left; max-width: none; justify-items: end; }
.hero--contact .hero-grid > div { max-width: 640px; }
.hero--contact.hero--photo::before {
  background: linear-gradient(to left, rgba(6,10,16,0.78) 0%, rgba(6,10,16,0.5) 40%, rgba(6,10,16,0.1) 72%);
}
@media (max-width: 800px) {
  .hero--contact .hero-grid { justify-items: start; }
  .hero--contact.hero--photo::before { background: linear-gradient(to top, rgba(6,10,16,0.85) 0%, rgba(6,10,16,0.5) 50%, rgba(6,10,16,0.2) 100%); }
}
.hero--immersive h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.hero--immersive p.lead { margin-left: 0; margin-right: 0; }
.hero--immersive div[style*="display:flex"] { justify-content: flex-start; }
.hero--immersive .trust-row { justify-content: flex-start; display: flex; }
/* Repère de défilement discret, inspiré du même site de référence — CSS pur,
   aucun JS nécessaire, disparaît proprement sur un écran bas (max-height). */
.hero--immersive::after {
  content: ""; position: absolute; left: 50%; bottom: 36px; z-index: 2;
  width: 1px; height: 46px; background: rgba(240,237,224,0.5);
  transform: translateX(-50%);
}
@media (max-height: 700px) { .hero--immersive::after { display: none; } }
@media (max-width: 700px) { .hero--immersive { min-height: 80vh; min-height: 80svh; padding: 80px 0; } }

/* Hero "Lovable" (2026-09-23, "la mise en page [...] n'est pas la même que
   celle du lovable que m'a donné Vincent et la typographie n'est pas bonne"
   — Benoit) : reproduit la mise en page du PDF que Vincent a validé —
   texte ancré en bas à gauche de la photo (jamais centré), sans eyebrow
   (pas affiché du tout, voir front-page.php), titre sur 2 lignes (droite
   puis italique).
   Correction du 23/09 (même soir) : la police du titre avait été identifiée
   à tort comme "à empattements" (Georgia posée en attendant une licence
   Strawford) — en zoomant réellement sur le rendu du PDF (MT-UNIVERS-site.pdf,
   page 1, agrandi à 300dpi) les lettres n'ont AUCUN empattement : "a"/"s"/"c"
   aux terminaisons rondes, exactement le style géométrique de Strawford (voir
   la planche de spécimen de la charte, "Rabot"/"Hêtre" en Black). Corrigé
   en Strawford Black (900, la graisse la plus proche de l'épaisseur réelle
   du titre) — Georgia n'était qu'une approximation faute d'avoir vérifié le
   rendu de près, jamais l'intention réelle du mockup de Vincent.
   Scopé à .hero--lovable uniquement (page d'accueil) : jamais un changement
   de police pour tous les h1/h2/h3 du site, une charte déjà établie
   ailleurs. */
/* Mesure recalibrée le 23/09 (3e passe — Benoit : "le texte n'est pas
   placé au même endroit"). Les 2 tentatives précédentes utilisaient une
   unité de mise à l'échelle erronée :
   - 28vh présumait que 640pt du PDF = 640px CSS (faux, 1pt=1,333px).
   - 89px fixes semblait juste À 854px de large (mesure 1:1 exacte,
     confirmée), mais une 2e mesure indépendante à 1440px de large a
     révélé le vrai problème : la maquette n'a PAS une hauteur de hero
     liée au viewport (100vh) — c'est une page PDF à ratio FIXE
     (hauteur/largeur = 0,718 à 854px ET à 1440px, quasi identique). Le
     bon repère n'est donc ni vh ni px fixes, mais un ratio DE LARGEUR :
     position du titre (haut) / largeur de hero = 37,7% aux DEUX échelles
     testées (543/1440 et 322/854) — cohérence confirmée indépendamment.
   89px = 10,4% de 854px : converti en vw pour que le rapport reste vrai
   à toute largeur, jamais un nombre fixe qui ne l'était qu'une fois. */
/* 2026-09-27 (Benoit : texte "un peu plus bas et un peu à gauche pour voir
   l'image de la main") : 10.4vw -> 6vw, et .hero-grid reprend la largeur
   standard de .wrap (max-width:none annule le 760px centré de
   .hero--immersive) -> bord gauche du texte = bord gauche du logo. */
.hero--lovable { align-items: flex-end; padding-bottom: 6vw; }
@media (max-width: 700px) { .hero--lovable { padding-bottom: 64px; } }
/* AJOUTÉ le 2026-09-25 (brief accueil, point 2.1) : Vincent redemande le
   hero plein écran, MAIS uniquement sur l'accueil — "la hauteur réduite
   reste appliquée sur les autres pages". Réoublie volontairement
   l'unification du 24/09 (qui avait ramené TOUT le site, home comprise, à
   66vh) sans y revenir pour les 7 autres gabarits sur .hero--immersive
   seul (À propos, Galerie, Savoir-faire, zones, Nos réalisations, pages
   commune/service) — scopé à .hero--lovable (home uniquement), jamais à
   .hero--immersive lui-même. */
.hero--lovable.hero--immersive { min-height: 100vh; min-height: 100svh; }
/* Bug réel corrigé le 2026-09-23 (Benoit : "aucune marge pour le texte, il
   est collé à gauche de l'écran") : .hero-grid EST le même élément que
   .wrap (voir front-page.php, un seul <div class="wrap hero-grid">) — .wrap
   fournit déjà la marge de page standard (margin:0 auto, voir plus haut
   dans ce fichier). Un précédent correctif avait posé margin:0 directement
   ici, ce qui annulait cette marge sur TOUT le bloc hero (pas seulement le
   texte à l'intérieur) : le bloc entier se retrouvait collé au bord gauche
   du <section>, plein cadre, au lieu de rester dans la marge de page comme
   chaque autre section du site. text-align:left seul suffit à aligner le
   TEXTE à gauche sans toucher à la position du bloc .wrap lui-même ; la
   largeur de lecture confortable est posée sur .hero-lovable-content (le
   <div> intérieur, jamais sur .wrap/.hero-grid) — c'est aussi ce qui avait
   cassé le retour à la ligne du titre : contraint à 640px sans la vraie
   marge de page, "La précision d'un scientifique," n'avait plus assez de
   place et retombait sur 2 lignes automatiques en plus du <br> manuel. */
.hero--lovable .hero-grid { text-align: left; max-width: none; }
/* 760px (pas 640px) : mesuré pour que "La précision d'un scientifique," (la
   1ère ligne du titre, voir front-page.php) tienne sur une seule ligne à la
   taille de police maximale (3.1rem) avant le retour à la ligne manuel —
   en dessous de 760px elle retombait sur 2 lignes automatiques en plus du
   retour prévu, jamais l'intention du PDF de Vincent. */
.hero--lovable .hero-lovable-content { max-width: 760px; }
/* Taille recalibrée (23/09, même passe de mesure 1:1 à 854px que
   ci-dessus) : à l'ancienne taille (4,6vw → 39,3px à 854px de large), la
   ligne 1 mesurait 512px de large contre 585px sur le PDF (mesure de
   pixels, texte clair sur fond sombre) — 12,4% trop petite. Coefficient
   585/512=1,1416 appliqué à TOUT le clamp (min/préféré/max) pour garder
   la même courbe de mise à l'échelle, pas seulement corriger un point. */
.hero--lovable h1 {
  font-family: 'Strawford', Arial, sans-serif; font-weight: 900;
  font-size: clamp(2.28rem, 5.25vw, 3.55rem); line-height: 1.22; letter-spacing: 0.005em;
  margin-bottom: 26px;
}
/* Correction de police (23/09) : en zoomant vraiment sur cette 2e ligne
   (300-400dpi), elle n'est PAS Strawford incliné — empattements fins
   visibles sur "l"/"f"/"r", contraste de graisse, construction bien plus
   légère que la ligne 1. Confirmé indépendamment par recherche web :
   "Instrument Serif italic" est un motif documenté et reconnaissable des
   pages générées par Lovable (repo "slop-detect", GitHub) — pas qu'une
   estimation visuelle. Taille : à même mesure 1:1 (854px), la ligne 2
   mesurait encore 393px contre 518px sur le PDF même après la correction
   d'échelle ci-dessus (518/449 attendu ≈ 1,153×) — la ligne 2 est donc
   RÉELLEMENT plus grande que la ligne 1 dans la maquette, pas seulement
   une autre police à la même taille. */
.hero--lovable h1 em { font-family: 'Strawford', Arial, sans-serif; font-style: italic; font-synthesis: style; font-weight: 300; font-size: 1em; letter-spacing: -0.01em; } /* 2026-09-27 (Benoit) : Strawford, en italique — Strawford n'ayant pas de fichier italique, l'inclinaison est générée par le navigateur */
.hero--lovable p.lead { margin-left: 0; margin-right: 0; max-width: 480px; }
/* Bouton du hero — scopé à .hero--lovable uniquement (jamais .btn/
   .btn-secondary eux-mêmes, en pilule partout ailleurs sur le site) :
   rectangle (pas de border-radius), majuscules, lettres espacées — la
   maquette Lovable de Vincent montre ce style précis pour "PARLONS DE
   VOTRE PROJET", pas la pilule générique du reste du site. */
/* Rempli, pas transparent (corrigé le 23/09, capture d'écran réelle de
   Vincent — pas le PDF export cette fois) : fond Noir plein (charte,
   #000000), bordure et texte Blanc/Beige — pas le contour transparent de
   .btn-secondary. Mesuré par échantillonnage de pixels sur sa capture :
   fond (8,8,8)≈noir, bordure blanche 1-2px. */
/* border-width réduit de 2px (base .btn) à 1px le 2026-09-25, demande
   explicite de Vincent (brief accueil, point 2.4 : "réduire l'épaisseur du
   trait blanc"). */
/* padding réduit (15px 22px → 12px 20px) le 2026-09-25, même demande de
   Vincent : "moins massif". */
/* Fond noir plein retiré le 2026-09-26 (Benoit : le bouton "ne doit pas
   être la première chose que l'on voit" dans le hero) : contour Beige
   (#F5F5ED) à 45 % d'opacité sur fond transparent, texte un peu plus petit
   et plus léger — le titre redevient le premier point d'attention. */
.hero--lovable .btn { background: transparent; border-color: rgba(245, 245, 237, 0.45); border-width: 1px; color: var(--deep-ink); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 500; padding: 11px 18px; }
.hero--lovable .btn:hover { background: rgba(245, 245, 237, 0.08); border-color: var(--deep-ink); color: var(--deep-ink); transform: none; }
.hero--lovable div[style*="display:flex"] { justify-content: flex-start; }
.hero--lovable .trust-row { justify-content: flex-start; display: flex; }
/* Flèches du carrousel remontées (2026-09-23) : elles restent centrées
   verticalement (top:50%) par défaut, ce qui chevauchait le titre une fois
   le texte ancré en bas plutôt que centré — vérifié en direct sur mobile
   (390px), où le titre sur 4 lignes passait derrière la flèche. Toujours
   dans la moitié haute de la photo, jamais sur le texte. */
.hero--lovable .sfts-hcx-arrow { top: 30%; }
/* padding-bottom reste en vw (règle de base ci-dessus) sur mobile aussi —
   10,4vw à 390px ≈ 40,6px, plus petit que les 56px fixes d'avant : le
   ratio de largeur qui positionne bien le titre à 1440px reste vrai à
   390px, jamais une valeur fixe qui ne l'était qu'à une seule largeur. */
@media (max-width: 700px) { .hero--lovable .sfts-hcx-arrow { top: 20%; } }

/* Hero "vitrine" — demandé le 2026-09-20 pour MT Univers : "elle reflète le
   niveau de travail de Vincent, cela doit sauter aux yeux". Le hero
   --photo en plein cadre (dégradé sombre pour la lisibilité du texte,
   pensé pour des photos de chantier BTP atmosphériques) assombrissait
   jusqu'à 82% une pièce colorée dont l'intérêt EST la couleur — le
   contraire de "sauter aux yeux". Variante réservée aux clients dont la
   photo est une pièce/réalisation à admirer pour elle-même (mobilier,
   pièce d'art, produit) plutôt qu'une scène large : texte et photo
   redeviennent deux colonnes séparées (comme le portrait par défaut),
   la photo affichée en pleine clarté, jamais assombrie, dans un cadre net
   avec ombre portée — jamais un remplacement du hero--photo existant
   (toujours le bon choix pour une scène de chantier), une option en plus,
   activée uniquement si demandée explicitement (hero_photo_showcase). */
.hero-showcase-wrap { display: flex; justify-content: center; }
.hero-showcase-img {
  /* height: auto ajouté le 2026-09-21 : bug réel trouvé en creusant le
     signalement de Benoit sur le bandeau "dirigeants" — sans elle, un <img>
     qui porte des attributs HTML width/height (ajoutés cet été pour le CLS,
     voir sfts_img_dims_attr()) garde sa hauteur BRUTE (celle de l'attribut),
     `aspect-ratio` n'ayant alors plus de dimension "auto" à calculer. Ici,
     mesuré en vrai dans Chrome : la photo de hero (mode vitrine) rendait à
     un ratio de 1,04 au lieu du 4/3 voulu — un bug déjà présent avant ce
     signalement, juste moins visible avec cette photo précise. */
  width: 100%; max-width: 620px; aspect-ratio: 4/3; height: auto; object-fit: cover;
  /* border-radius retiré le 24/09, demande de Benoit — voir .hero-portrait
     plus haut, même règle générale sur tout le site. */
  border-radius: 0; box-shadow: 0 30px 70px -25px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.14);
}

/* Photo principale d'une page prestation (single-service.php). Convertie le
   2026-09-21 d'un style inline `max-height:520px` (qui recadrait un peu
   différemment selon le ratio naturel de la photo, sans jamais garantir un
   rendu prévisible) vers un `aspect-ratio` fixe — même famille de correctif
   que `.hero-showcase-img` juste au-dessus, `height: auto` obligatoire pour
   la même raison. Les 4 photos de prestation réelles aujourd'hui sont toutes
   paysage (ratio 1,3 à 1,55) et le rendu ne change pas visuellement — mais
   sans ce correctif, une future photo de prestation portrait aurait été
   recadrée de façon imprévisible et potentiellement très agressive par
   l'ancien `max-height` fixe. Ratio 2/1 choisi pour rester visuellement
   proche du rendu actuel (1080×520 ≈ 2,08/1). */
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.svc-hero-photo { width: 100%; aspect-ratio: 2/1; height: auto; object-fit: cover; border-radius: 0; box-shadow: var(--shadow); display: block; }

/* La photo doit dominer, pas seulement occuper sa moitié de grille (demande
   du 2026-09-20 : "doit mettre la photo plus en valeur moins de texte").
   Colonne texte réduite à 0.85fr, photo à 1.15fr — inverse du ratio par
   défaut (1.2fr/0.8fr, pensé pour un portrait plus petit). */
.hero--showcase .hero-grid { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 800px) { .hero--showcase .hero-grid { grid-template-columns: 1fr; } }
.trust-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.trust-chip { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: rgba(240,237,224,0.9); }
.trust-chip b { color: var(--accent-gold); font-family: 'Strawford', Arial, sans-serif; font-size: 1.1rem; }

/* Bande cinématique (2026-09-21) — une photo réelle plein cadre, une seule
   phrase courte, entre deux sections de texte. Principe générique de
   pacing "une idée par écran" (pas une liste de features) plutôt qu'un
   élément visuel copié d'une page précise — voir footer.php pour le léger
   zoom au scroll (même mécanisme que .hero--photo-img, généralisé). */
.cinematic-band { position: relative; height: 72vh; min-height: 420px; overflow: hidden; }
.cinematic-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinematic-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,10,16,0.55) 0%, rgba(6,10,16,0.05) 40%, rgba(6,10,16,0.15) 100%);
}
.cinematic-band-text { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 48px; }
.cinematic-band-text p { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; color: #fff; text-align: center; margin: 0; max-width: 700px; padding: 0 20px; text-wrap: balance; }
@media (max-width: 700px) { .cinematic-band { height: 56vh; } }

/* Séquence de défilement ("scroll-scrub") — 2026-09-22, demande explicite de
   Benoit : décomposer une réalisation en la faisant "tourner" au défilement,
   à partir des vraies photos de sa galerie (jamais des images générées ou
   interpolées — voir sfts_realisation_scrub_frames() dans functions.php, qui
   exige au moins 6 vraies photos avant d'activer cet effet, sinon repli sur
   la grille classique). Fallback obligatoire : l'image <img> reste affichée
   en dessous tant que le JS n'a pas confirmé avoir préchargé toutes les
   images — si le script ne s'exécute pas ou qu'une image échoue, la
   première vraie photo reste visible en statique, jamais un canvas vide.
   Hauteur du conteneur = nombre d'images x 55vh : donne assez de recul de
   défilement pour "sentir" chaque image sans rendre le parcours interminable
   avec les 6-14 photos réellement disponibles par projet (jamais les
   centaines de frames d'un vrai plateau de prise de vue en rotation, qui
   n'existent pas dans la photothèque réelle du client). */
.sfts-scrub { position: relative; }
.sfts-scrub-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--deep-2); }
.sfts-scrub-fallback, .sfts-scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sfts-scrub-canvas { opacity: 0; transition: opacity 0.4s ease; }
.sfts-scrub-sticky.is-ready .sfts-scrub-fallback { opacity: 0; }
.sfts-scrub-sticky.is-ready .sfts-scrub-canvas { opacity: 1; }
.sfts-scrub-counter {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  color: rgba(245,245,237,0.85); font-family: 'Strawford', Arial, sans-serif; font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.06em; background: rgba(6,10,16,0.4);
  padding: 6px 12px; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  /* Jamais un défilement qui pilote une animation pour qui préfère moins de
     mouvement — la photo de couverture (déjà visible via .sfts-scrub-fallback)
     suffit, le JS n'initialise même pas le scrub dans ce cas (voir footer.php). */
  .sfts-scrub { height: auto !important; }
  .sfts-scrub-sticky { position: relative; height: auto; aspect-ratio: 4/3; }
}

/* Variante "décor" du scrub (2026-09-22, accueil MT Univers, assemblage) —
   jamais nécessaire sur la page réalisation (juste un compteur discret,
   voir .sfts-scrub-counter) : un dégradé pour la lisibilité d'une légende
   centrée, même famille visuelle que .cinematic-band-text juste au-dessus
   dans le parcours de la page d'accueil. */
.sfts-scrub--decor .sfts-scrub-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(6,10,16,0.75) 0%, rgba(6,10,16,0.2) 42%, rgba(6,10,16,0) 68%);
}
.sfts-scrub--decor .cinematic-band-text { position: absolute; inset: 0; z-index: 3; }
@media (max-width: 700px) { .sfts-scrub--decor { height: 182vh !important; } }

/* Bande chiffres clés — reprend les données déjà réelles (trust_chips + avis),
   présentées en grand format juste sous le hero plutôt qu'en petites puces. */
.stats-band { padding: 44px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; text-align: center; }
.stat-item b { display: block; font-family: 'Strawford', Arial, sans-serif; font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1; color: var(--deep); }
.stat-item span { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--muted); }

/* Vitrine "Nos chantiers" en page d'accueil — mêmes données réelles que la
   page "Nos chantiers" et la galerie, présentées en grand format photo. */
/* Sous-groupe intérieur/extérieur (2026-09-21) : simple étiquette au-dessus
   de chaque sous-grille, même famille visuelle que .section-label mais plus
   discrète (elle n'introduit pas une nouvelle section, juste une
   sous-division à l'intérieur de "Nos réalisations"). */
.showcase-zone + .showcase-zone { margin-top: 48px; }
.showcase-zone-label { font-family: 'Strawford', Arial, sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); margin-top: 32px; }

/* Badge catégorie (cuisine, salle de bain, dressing…) — 2026-09-21, SEO par
   mot-clé réel : un texte visible à côté de chaque photo, jamais seulement
   dans un attribut alt invisible à l'oeil. */
.realisation-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Filtres "Nos réalisations" — chips cliquables, JS pur (voir footer.php),
   jamais un rechargement de page : navigation simple demandée par Benoit
   ("le prospect doit naviguer simplement"). Hauteur ≥44px (padding 11px +
   ligne ~22px) — cible tactile HIG/M3, voir feedback_veille_qualite_mondiale.
   role="tablist"/"tab" : ce sont des vues alternatives du même contenu, pas
   des liens de navigation vers d'autres pages (voir aria-selected dans le
   markup, page-nos-chantiers.php). */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.filter-chip {
  padding: 11px 20px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: 'Strawford', Arial, sans-serif;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.filter-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.filter-chip:active { transform: scale(0.96); }
.filter-chip[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: var(--deep-ink); }
/* Puce de lien (2026-09-22, "pas un amalgame d'information" — Benoit) — même
   habillage visuel que .filter-chip mais un <a>, pour les listes de liens
   internes (communes voisines, maillage SEO) qui se présentaient jusqu'ici
   comme un paragraphe dense séparé par des virgules. Générique : profite à
   toute liste de liens similaire sur n'importe quel gabarit du thème. */
.link-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.link-chip {
  padding: 9px 18px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: 'Strawford', Arial, sans-serif;
  font-size: 0.85rem; font-weight: 600; text-decoration: none; display: inline-block;
  transition: border-color 0.25s ease, transform 0.15s ease;
}
.link-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.link-chip:active { transform: scale(0.96); }
.sfts-hidden { display: none !important; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 14px; }
/* Défilement horizontal sur mobile (2026-09-22, "c'est long trop long et du
   coup cela perd en intérêt" — Benoit, après un vrai test sur téléphone) —
   mesuré en direct : cette grille à elle seule faisait 18,5 écrans de
   hauteur sur un viewport mobile (les 20 réalisations empilées en une seule
   colonne, aucune ne coupée). Convertie en bande horizontale défilante avec
   accrochage ("scroll-snap", comme l'App Store ou Photos sur iPhone) — le
   même contenu réel, aucune réalisation retirée, juste plus jamais 18
   écrans de défilement vertical pour une seule section. */
@media (max-width: 700px) {
  .showcase-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 14px -20px 0; padding: 0 20px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .showcase-grid::-webkit-scrollbar { display: none; }
  .showcase-grid .showcase-card { flex: 0 0 78vw; scroll-snap-align: start; aspect-ratio: 4/5; }
}
.showcase-card { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; color: inherit; text-decoration: none; transition: box-shadow 0.35s cubic-bezier(0.19,1,0.22,1); }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.19,1,0.22,1); }
.showcase-card:hover img { transform: scale(1.06); }
.showcase-card:hover { box-shadow: 0 24px 48px -20px rgba(64,23,31,0.35); }
@media (prefers-reduced-motion: reduce) { .showcase-card img { transition: none; } .showcase-card:hover img { transform: none; } }
.showcase-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; background: linear-gradient(0deg, rgba(6,10,16,0.86) 0%, rgba(6,10,16,0.35) 65%, transparent 100%); }
.showcase-caption .showcase-city { display: block; font-family: 'Strawford', Arial, sans-serif; font-style: italic; color: var(--accent-gold); font-size: 0.82rem; margin-bottom: 4px; }
.showcase-caption h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.showcase-caption p { color: rgba(255,255,255,0.85); font-size: 0.84rem; margin: 0; line-height: 1.4; }

/* Portrait + citation dirigeant renforcés (bande "Notre histoire") */
.portrait-row--large .portrait { width: 150px; height: 150px; }
.pull-quote { font-family: 'Strawford', Arial, sans-serif; font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.5; margin: 22px 0 10px; }
.pull-quote-author { font-size: 0.85rem; color: var(--accent-gold); font-weight: 600; }

/* Buttons */
/* Transition à easing personnalisé (pas un simple ease-in-out) — trouvé chez
   Eiffage Construction ET Pradeau Morin (cubic-bezier(0.19,1,0.22,1) sur
   tous leurs boutons) : un des rares détails de micro-interaction qui
   revient chez plusieurs sites BTP premium du panel étudié le 2026-09-14.
   Peu coûteux à reproduire, signal de finition perceptible. */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px;
  font-weight: 600; text-decoration: none; font-size: 0.95rem; border: 2px solid transparent;
  transition: filter 0.35s cubic-bezier(0.19,1,0.22,1), transform 0.15s cubic-bezier(0.19,1,0.22,1),
    border-color 0.35s cubic-bezier(0.19,1,0.22,1), color 0.35s cubic-bezier(0.19,1,0.22,1),
    box-shadow 0.35s cubic-bezier(0.19,1,0.22,1), background 0.35s cubic-bezier(0.19,1,0.22,1);
  will-change: transform;
}
/* Retour tactile au clic (2026-09-21) : un léger tassement, relâché tout de
   suite — signal qu'un vrai clic a été reçu, avant même que la page change.
   Pattern générique (n'importe quel bouton "physique" à l'écran), jamais
   propre à un site précis. */
.btn:active { transform: scale(0.96) !important; transition-duration: 0.1s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -8px rgba(64,23,31,0.35); }
.btn-primary:hover { filter: brightness(0.94); transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(64,23,31,0.45); }
.btn-secondary { border-color: rgba(240,237,224,0.4); color: var(--deep-ink); }
.btn-secondary:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(245,245,237,0.08); transform: translateY(-3px); }
/* .btn-secondary est prévu pour un fond sombre (texte/bordure quasi blancs —
   voir --deep-ink) : illisible sur un fond clair. .btn-outline (2026-09-21)
   est son équivalent pour les sections claires (la majorité du site) —
   même forme, couleurs inversées. */
.btn-outline { border-color: var(--deep); color: var(--deep); background: transparent; }
.btn-outline:hover { background: var(--deep); color: var(--deep-ink); transform: translateY(-3px); }
/* AJOUTÉ le 2026-09-25 (brief accueil, point 6.4, réutilisé au point 10.3
   "uniformiser avec le style du point 6.4") : texte noir, fond transparent,
   encadré fin, rectangle parfait (angles droits — jamais la pilule de
   .btn/.btn-outline), inversion des couleurs au survol. */
.btn-outline-sharp { background: transparent; border: 1px solid var(--noir); border-radius: 0; color: var(--noir); }
.btn-outline-sharp:hover { background: var(--noir); color: var(--bg); transform: none; }

/* Sections */
section { padding: 56px 0; }
.section-label { font-family: 'Strawford', Arial, sans-serif; font-style: italic; color: var(--accent-text); font-size: 0.95rem; margin-bottom: 8px; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); max-width: 620px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 32px; }
/* Corrige le 2026-09-23 (Benoit : "les 3 boutons agencement/menuiserie...
   ne sont pas adaptés au mobile, c'est une catastrophe") — la grille "Ce que
   je réalise" de l'accueil force "repeat(3, 1fr)" en style inline (voir
   front-page.php, nécessaire pour garder exactement 3 colonnes sur
   ordinateur), qui écrasait aussi ce comportement sur mobile : 3 colonnes de
   ~110px, titre coupé, texte sur une lettre de large. !important obligatoire
   ici, seul moyen de battre un style inline — mais scopé au SEUL id
   #sfts-catalogue-anchor (jamais .card-grid en général, qui a déjà son
   propre comportement responsive correct partout ailleurs sur ce thème) et
   au SEUL mobile (max-width:700px, même seuil que le reste du site) :
   l'ordinateur n'est pas concerné. Retombe sur exactement la même carte
   photo empilée en 1 colonne, déjà utilisée avec succès ailleurs (Nos
   réalisations, Galerie...), jamais un nouveau composant à maintenir. */
@media (max-width: 700px) {
  #sfts-catalogue-anchor .card-grid { grid-template-columns: 1fr !important; }
}
/* Carte "vedette" (2026-09-22, "il doit absolument y avoir un fil conducteur
   luxe et raffinement" — Benoit, page Nos réalisations trouvée trop plate
   après le hero immersif) — la 1ère carte de chaque zone prend deux
   colonnes : une vraie hiérarchie visuelle ("grille Bento") au lieu d'un mur
   de vignettes identiques, sans changer l'aspect-ratio ni retoucher le
   fichier .card--photo générique dont dépendent d'autres pages. */
.card--featured { grid-column: span 2; }
@media (max-width: 640px) { .card--featured { grid-column: span 1; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); transition: box-shadow 0.35s cubic-bezier(0.19,1,0.22,1), transform 0.35s cubic-bezier(0.19,1,0.22,1); }
/* border-radius:0 ajouté le 24/09 (demande de Benoit, "tout le site [...]
   sans arrondi") — spécifique à .card--photo (jamais la base .card, encore
   utilisée par des cartes sans photo ailleurs) : équivalente ou plus
   spécifique que .card, déclarée après dans le fichier → gagne sur les
   propriétés en commun. Sans elle, la photo elle-même (border-radius:0 plus
   bas) resterait quand même coupée en rond par ce conteneur (overflow:hidden
   masque au rayon du PARENT, pas de l'enfant). */
.card--photo { overflow: hidden; border-radius: 0; }
/* "Mes trois univers" (23/09, demande de Vincent : "les encarts ne doivent
   pas être arrondis et les photos ne sont pas en pleine largeur du
   container") — scopé au SEUL #sfts-catalogue-anchor à l'origine ; devenu
   redondant depuis le 24/09 (.card--photo est maintenant à 0 partout) mais
   gardé tel quel, la ligne suivante (marge/pleine largeur) reste, elle,
   spécifique à cette section. */
#sfts-catalogue-anchor .card { border-radius: 0; padding: 0 0 26px; }
#sfts-catalogue-anchor .card--photo picture, #sfts-catalogue-anchor .card--photo > img { margin: 0 0 18px; }
#sfts-catalogue-anchor .card--photo picture img, #sfts-catalogue-anchor .card--photo > img { width: 100%; border-radius: 0; }
#sfts-catalogue-anchor .card h3, #sfts-catalogue-anchor .card p, #sfts-catalogue-anchor .card .card-link { margin-left: 4px; margin-right: 4px; }
/* Titres des 3 encarts (Agencement / Menuiserie intérieure / extérieure)
   centrés — 2026-09-26, demande de Benoit. Titre seul : texte et
   "Découvrir →" restent alignés à gauche. */
#sfts-catalogue-anchor .sfts-card-grid-item--card h3 { text-align: center; }
/* 2026-10-02 (SFTS) : marge intérieure de 20 px à gauche et à droite pour le
   texte des 3 encarts (Agencement / Menuiserie intérieure / extérieure). */
#sfts-catalogue-anchor .sfts-card-grid-item--card p { padding-left: 20px; padding-right: 20px; }
/* 2026-09-27 (Benoit) : « Découvrir » centré et encadré noir sur le fond blanc
   de la carte — même langage que .btn-outline-sharp (trait noir 1px, angles vifs). */
#sfts-catalogue-anchor .sfts-card-grid-item--card .sfts-card-grid-cta { align-self: center; border: 1px solid var(--noir); border-radius: 0; color: var(--noir); padding: 10px 22px; margin: auto auto 6px; text-align: center; transition: background 0.2s ease, color 0.2s ease; }
#sfts-catalogue-anchor .sfts-card-grid-item--card:hover .sfts-card-grid-cta,
#sfts-catalogue-anchor .sfts-card-grid-item--card:focus-visible .sfts-card-grid-cta { background: var(--noir); color: var(--bg); }
.card--photo picture, .card--photo > img { display: block; margin: -26px -26px 0; overflow: hidden; }
.card--photo picture img, .card--photo > img { display: block; width: calc(100% + 52px); height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; transition: transform 0.5s cubic-bezier(0.19,1,0.22,1); }
/* 2026-10-05 (SFTS) : bande blanche à droite des cartes Actualités (accueil,
   .card--news.card--photo, image enfant direct de la carte) — la règle
   générale img { max-width: 100% } plafonnait la largeur calc(100% + 52px),
   l'image décalée de -26px ne rejoignait donc pas le bord droit. */
.card--photo > img { max-width: none; }
/* Zoom léger au survol (2026-09-21) — technique générique (des milliers de
   sites l'utilisent), jamais propre à un site précis. .card--photo est un
   <a> dans la plupart des gabarits (voir "Nos réalisations", l'accueil) :
   :hover sur le lien entier, pas seulement sur l'image, pour que le survol
   fonctionne dès qu'on entre n'importe où dans la carte. */
a.card--photo:hover img, .card--photo:hover img { transform: scale(1.06); }
a.card--photo:hover, .card--photo:hover { box-shadow: 0 24px 48px -20px rgba(64,23,31,0.35); }
/* Retour tactile au clic (2026-09-22, demande explicite de Benoit : "les
   boutons travaillent lorsque l'on clic dessus, comme un iPhone") — la
   carte se tasse légèrement au clic, même famille de retour que .btn:active
   (style.css) mais jamais ajoutée ici jusqu'à présent alors que .card--photo
   est cliquable partout sur le site (accueil, catalogue). */
a.card--photo:active, .card--photo:active { transform: scale(0.98); transition-duration: 0.1s; }
@media (prefers-reduced-motion: reduce) {
  .card--photo picture img, .card--photo > img, .card { transition: none; }
  a.card--photo:hover img, .card--photo:hover img { transform: none; }
  a.card--photo:active, .card--photo:active { transform: none; }
}
/* h2 ajouté le 2026-09-23 (audit Lighthouse "heading-order", page-contact.php :
   les 2 cartes juste sous le h1 étaient en h3, sautant le h2 — passées en h2,
   voir page-contact.php) — même taille que les .card en h3 ailleurs sur le
   site, jamais deux styles de carte différents pour la même chose. */
.card h2, .card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.card a.card-link { font-size: 0.88rem; font-weight: 600; color: var(--deep); text-decoration: none; }
/* Cartes Actualités de l'accueil (2026-09-29, Benoit) : « Lire la suite → »
   calé en bas de chaque carte, alignés d'une carte à l'autre quelle que soit
   la longueur du titre ou de l'extrait (la grille étire déjà les cartes à
   la même hauteur). */
.card--news { display: flex; flex-direction: column; }
.card--news .card-link { margin-top: auto; }

/* Mosaïque "Quelques réalisations" REFAITE le 2026-09-25 (brief accueil,
   point 6.2, disposition reprise d'une capture d'écran fournie par
   Vincent) : remplace le patron du 23/09 (grande photo à gauche + pleine
   largeur en bas) par 1 grande photo horizontale en haut (≈42% de la
   hauteur totale) puis, en dessous, 1 grande photo verticale à gauche
   (60% de la largeur) et 2 photos de même taille empilées à droite (40%).
   Mêmes 4 photos, même ordre (voir $sfts_home_bento_ids) — seuls les
   rôles grid-column/grid-row des 4 classes --1 à --4 changent plus bas.
   1.45fr/1fr/1fr sur les rangées = 42%/29%/29%, mesuré pour que la rangée
   du haut fasse bien 40-45% du total demandé (1.45/(1.45+1+1)=0.420). */
.home-bento {
  display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1.45fr 1fr 1fr;
  gap: 20px; margin-top: 36px; aspect-ratio: 16 / 13;
}
/* border-radius retiré le 23/09 (demande de Vincent : "les photos doivent
   être parfaitement rectangulaires sans arrondi") — cette classe n'existe
   que sur "Quelques réalisations" (front-page.php), pas besoin de scoper
   davantage. */
.home-bento-item { display: block; overflow: hidden; }
.home-bento-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.19,1,0.22,1); }
.home-bento-item:hover img { transform: scale(1.05); }
.home-bento-item--1 { grid-column: 1 / 3; grid-row: 1; }
.home-bento-item--2 { grid-column: 1; grid-row: 2 / 4; }
.home-bento-item--3 { grid-column: 2; grid-row: 2; }
.home-bento-item--4 { grid-column: 2; grid-row: 3; }
@media (max-width: 700px) {
  .home-bento { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; } /* aspect-ratio: auto (2026-09-29) : le 16/13 de l'ordinateur restait actif — grille bloquée à 260 px, photos superposées et bouton « Toutes les réalisations » posé sur la dernière */
  .home-bento-item--1, .home-bento-item--2, .home-bento-item--3, .home-bento-item--4 { grid-column: 1; grid-row: auto; aspect-ratio: 4/3; }
}
@media (prefers-reduced-motion: reduce) { .home-bento-item img { transition: none; } .home-bento-item:hover img { transform: none; } }
/* Lien secondaire "sans boîte" (2026-09-21, "priorité à la photo") — pour
   les fonds sombres/photo du hero, remplace le bouton .btn-secondary
   encadré : moins d'éléments d'interface superposés à la photo, un CTA
   principal plein + un simple lien souligné, plutôt que deux boutons côte à
   côte qui concurrencent l'image. */
.btn-plain-light { display: inline-flex; align-items: center; gap: 6px; color: var(--deep-ink); font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245,245,237,0.5); transition: text-decoration-color 0.3s ease, transform 0.15s ease; padding: 13px 4px; }
.btn-plain-light:hover { text-decoration-color: var(--accent-gold); color: var(--accent-gold); }
.btn-plain-light:active { transform: scale(0.97); }

.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* AJOUTÉ le 2026-09-25, brief Vincent du 24/09 (page Agencement,
   modification 1) : bloc éditorial 2 colonnes ÉGALES, jamais un tableau ni
   des cartes. Colonnes volontairement inégales en poids visuel (gauche =
   message, droite = détail secondaire) via la taille de police, pas via la
   largeur de grille, qui reste 1fr/1fr comme demandé explicitement. */
/* 2026-09-26 (Benoit) : texte de droite à la même taille que celui de
   gauche + trait fin au milieu pour séparer les 2 colonnes (horizontal
   quand elles s'empilent sur mobile). Trait en Gris 2 atténué (charte). */
.prestations-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; padding: clamp(32px, 7vh, 120px) 0; }
/* 2026-09-27 (Benoit) : le bloc doit tenir en entier dans l'écran sous
   l'en-tête, sans défiler. Marges et taille du texte liées à la hauteur
   d'écran (vh), et plus de double marge (section 56px + bloc 120px). */
#intro:has(> .prestations-split) { padding: 0; }
.prestations-split .prestations-lead,
.prestations-split .prestations-detail { font-family: 'Strawford', Arial, sans-serif; font-weight: 400; font-size: clamp(16px, 2.7vh, 20px); line-height: 1.55; font-style: italic; margin: 0; }
/* 2026-09-27 (Benoit) : texte réduit (32 → 24px, 24 → 19px mobile) et en
   italique. Strawford n'existe pas en italique (ni dans le thème ni dans
   le dossier de marque) : inclinaison synthétisée par le navigateur. */
.prestations-split .prestations-lead { color: #000; padding-right: 56px; }
.prestations-split .prestations-detail { color: var(--muted); padding-left: 56px; border-left: 1px solid rgba(44, 42, 42, 0.22); }
@media (max-width: 800px) {
  .prestations-split { grid-template-columns: 1fr; padding: clamp(32px, 6vh, 80px) 0; }
  .prestations-split .prestations-lead,
  .prestations-split .prestations-detail { font-size: clamp(15px, 2.3vh, 17px); }
  .prestations-split .prestations-lead { padding: 0 0 28px; }
  .prestations-split .prestations-detail { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(44, 42, 42, 0.22); }
}

/* border-radius retiré le 24/09, demande de Benoit — portrait carré, plus circulaire. */
.portrait { width: 128px; height: 128px; border-radius: 0; object-fit: cover; border: 3px solid var(--accent); display: block; }
.portrait-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.portrait-row .portrait-name { font-family: 'Strawford', Arial, sans-serif; font-size: 1.05rem; color: var(--deep-2); }
.portrait-row .portrait-role { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.band-dark .portrait { border-color: var(--accent-gold); }
.band-dark .portrait-row .portrait-name { color: var(--deep-ink); }
.band-dark .portrait-row .portrait-role { color: rgba(240,237,224,0.75); }

.info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.info-list li { display: flex; gap: 14px; align-items: baseline; font-size: 0.95rem; }
.info-list .k { font-family: 'Strawford', Arial, sans-serif; font-style: italic; color: var(--muted); min-width: 110px; flex-shrink: 0; }
/* Mobile (2026-09-29) : libellé au-dessus de la valeur — la colonne de
   droite (≈ 130 px) écrasait les horaires sur 4 lignes par jour. */
@media (max-width: 480px) {
  .info-list li { flex-direction: column; gap: 2px; }
  .info-list .k { min-width: 0; }
}

.band-dark {
  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  /* Texture de points colorés retirée le 23/09 (demande de Vincent : pas
     de petits points dans la couleur du fond, respect à 100% de la
     charte — le seul motif décoratif autorisé est le filigrane de marque
     .sfts-brand-watermark ci-dessous). Contenait en plus une occurrence
     directe de #8B6F72, jamais une couleur officielle de la charte
     (même couleur déjà retirée de --eye-blue). Fond uni --deep, seul
     .sfts-brand-watermark reste comme décor. */
  color: var(--deep-ink);
}
.band-dark h2 { color: var(--deep-ink); }
.band-dark > .wrap { position: relative; z-index: 1; }

/* Motif de marque (2026-09-21) — le tracé exact du logotype MT Univers,
   posé en grand filigrane derrière le contenu d'une bande sombre. currentColor
   hérite d'--accent-gold, très peu opaque : visible sans jamais concurrencer
   le texte (voir .band-dark > .wrap { z-index:1 } au-dessus). */
.sfts-brand-watermark {
  position: absolute;
  top: 50%; right: -8%;
  width: min(60%, 620px); height: auto;
  transform: translateY(-50%);
  color: var(--accent-gold);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) { .sfts-brand-watermark { width: 90%; right: -20%; opacity: 0.08; } }
/* Copie miroir à gauche (2026-09-22, "il faut que le pattern [...] se
   prolonge de l'autre côté" — Benoit) : même motif, retourné (scaleX(-1))
   et posé symétriquement à gauche plutôt que de laisser tout le motif d'un
   seul côté de la bande. Générée automatiquement par sfts_brand_wave_svg()
   pour tout appel existant — aucun fichier appelant à modifier. */
.sfts-brand-watermark--left { right: auto; left: -8%; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 700px) { .sfts-brand-watermark--left { right: auto; left: -20%; } }

/* Styles du parcours "Comment ça se passe" (.process-*) — EXTRAITS le
   2026-09-23 vers le SFTS EXPERIENCE COMPONENT #003 "Process Experience"
   (components/sfts-process-experience/style.css, enqueue géré par
   sfts_process_experience_enqueue_assets() dans functions.php). Plus
   aucune règle .process-* dans ce fichier : le composant utilise son
   propre espace de classes (.sfts-process-*) et ses propres tokens de
   thème. Voir components/sfts-process-experience/README.md. */

/* Nos engagements — inspiré de la structure "engagements" des grands sites
   BTP de référence (Groupe Legendre entre autres), avec le vrai contenu déjà
   écrit pour ce client (bio_sections), jamais un texte composé pour l'occasion. */
.engagements-band { background: var(--surface); }
.engagements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin-top: 36px; }
.engagements-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; }
.engagement-number { font-family: 'Strawford', Arial, sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--line); line-height: 1; margin-bottom: 12px; }
.engagement-item h3 { font-size: 1.15rem; margin-bottom: 12px; }
.engagement-item div:last-child { color: var(--muted); font-size: 0.93rem; line-height: 1.6; }
/* Engagements prouvés par les avis (accueil, 2026-09-29) : chaque
   engagement de Vincent, puis la citation mot pour mot d'un client qui le
   confirme. Grille 2×2, filet fin entre les blocs plutôt que des cartes. */
.engagements-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: 40px; }
.engagement-proof { display: flex; flex-direction: column; padding: 36px 0 40px; border-top: 1px solid var(--line); }
.engagement-proof .engagement-number { color: var(--accent-text); font-size: 2rem; margin-bottom: 14px; }
.engagement-proof h3 { font-size: 1.35rem; margin-bottom: 10px; }
.engagement-proof-text { color: var(--muted); font-size: 0.95rem; line-height: 1.65; margin: 0 0 22px; }
.engagement-proof-quote { margin: auto 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent-gold); }
.engagement-proof-quote blockquote { margin: 0 0 10px; font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.engagement-proof-quote figcaption { font-size: 0.82rem; color: var(--muted); }
.engagement-proof-stars { color: var(--accent-text); letter-spacing: 0.08em; margin-right: 4px; }
.engagements-proof-more { margin: 28px 0 0; }
@media (max-width: 800px) {
  .engagements-proof { grid-template-columns: 1fr; }
  .engagement-proof { padding: 28px 0 32px; }
}

/* "Notre histoire" éditorial — grande photo + texte, respiration importante,
   pour raconter le "pourquoi" plutôt que l'énumérer dans une bande de chiffres. */
.histoire-editorial { padding: 88px 0; }
/* Vidéo seule, sans texte d'accompagnement (2026-09-22, "c'est hors
   contexte, laisser juste la vidéo" — Benoit) — l'ancienne grille à 2
   colonnes (photo/vidéo + texte) laisserait sinon une colonne vide. Centrée,
   plus large qu'avant (elle est maintenant le seul élément de la section),
   mais toujours raisonnable (jamais plein cadre — ce n'est pas un hero). */
.histoire-editorial--video-only .wrap { max-width: 760px; margin: 0 auto; }
/* Fond confondu avec la bande (2026-09-22, "mets un fond de la même couleur
   que le fond du bandeau pour que cela soit plus esthétique" — Benoit) —
   .histoire-photo est normalement une vraie carte (coins arrondis, ombre
   portée, voir plus bas) pensée pour une PHOTO qui contraste avec la page.
   Ici, la vidéo a déjà un fond quasi identique à --bg (mesuré : #F5F7F4 vs
   #F5F5ED) — l'ombre et le cadre arrondi soulignaient inutilement un
   écart de teinte minime, donnant un effet de "carte flottante" au lieu de
   se fondre dans la bande. Supprimés ici uniquement (pas sur
   .histoire-photo générique, toujours utile pour une vraie photo ailleurs). */
.histoire-editorial--video-only .histoire-photo { border-radius: 0; box-shadow: none; background: var(--bg); }
.histoire-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 800px) { .histoire-grid { grid-template-columns: 1fr; } }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.histoire-photo { margin: 0; border-radius: 0; overflow: hidden; box-shadow: var(--shadow); }
.histoire-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
/* Vidéo d'assemblage (voir sfts_gate_video_urls()) réutilisée ici, MAIS avec
   son propre ratio : la forcer dans le cadre portrait 4/5 des photos
   ("cover") ne montrait qu'une bande étroite et centrée de l'image
   1360×906 — côté qui tombait le plus souvent sur du fond quasi vide plutôt
   que sur les panneaux du meuble, illisible ("posée là sans raison" — retour
   de Benoit du 2026-09-21). Ratio 3/2 ≈ ratio natif (1360/906 = 1,501) :
   quasiment plus aucun recadrage, tout l'assemblage reste visible. Le fond
   propre de la vidéo (mesuré : #F5F7F4 sur 29% des pixels) est déjà, à l'œil,
   la même couleur que --bg (#F5F5ED) — pas de "carré blanc", juste un mauvais
   cadrage à corriger. */
.histoire-photo video { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; background: var(--bg); }
.histoire-text { margin: 18px 0 20px; color: var(--ink); font-size: 1.02rem; line-height: 1.7; }

/* "Projet signature" éditorial (2026-09-23, maquette de Vincent envoyée par
   mail — "attention la charte graphique n'est pas la bonne mais globalement
   le texte et l'organisation oui") : un feuilleton en 4 temps numérotés
   plutôt qu'un seul bloc photo + paragraphe. Palette et typographie du
   thème (jamais celles, roses, de sa maquette — explicitement écartées par
   Vincent lui-même). */
.signature-feature-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.signature-feature-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.signature-feature-intro { border-left: 1px solid var(--line); padding-left: 40px; display: flex; flex-direction: column; gap: 16px; color: var(--muted); }
.signature-feature-intro p { margin: 0; }
@media (max-width: 800px) {
  .signature-feature-head { grid-template-columns: 1fr; gap: 24px; }
  .signature-feature-intro { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
}
.signature-story { display: flex; flex-direction: column; gap: 72px; }
.signature-story-item { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.signature-story-item--reverse { grid-template-columns: 1fr 1.3fr; }
.signature-story-item--reverse .signature-story-photo { order: 2; }
.signature-story-item--reverse .signature-story-text { order: 1; }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.signature-story-photo { margin: 0; border-radius: 0; overflow: hidden; box-shadow: var(--shadow); }
.signature-story-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* color: var(--deep-2), pas var(--accent) — corrigé le 2026-09-23 (audit
   Lighthouse "color-contrast" : 2.06:1 mesuré, sous le seuil 3:1 pour ce
   grand texte). --accent (le vert/or officiel) est trop clair sur le fond
   beige à cette taille ; --deep-2 est déjà la couleur des titres de ce même
   bloc juste à côté (.signature-story-heading), donc cohérent visuellement,
   pas une nouvelle couleur inventée. */
.signature-story-num { font-family: 'Strawford', Arial, sans-serif; font-weight: 300; font-size: 2.6rem; color: var(--deep-2); line-height: 1; margin-bottom: 12px; }
.signature-story-text h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 16px; }
.signature-story-rule { border: none; border-top: 1px solid var(--line); width: 40px; margin: 0 0 16px; }
.signature-story-text p { color: var(--muted); line-height: 1.7; margin: 0; }
@media (max-width: 800px) {
  .signature-story { gap: 32px; }
  .signature-story-item, .signature-story-item--reverse { grid-template-columns: 1fr; }
  .signature-story-item--reverse .signature-story-photo, .signature-story-item--reverse .signature-story-text { order: 0; }
}

/* Styles du lecteur "projet signature" (.sfts-signature-* / .sfts-signature-player-*) — EXTRAITS le 2026-09-23 vers le SFTS
   EXPERIENCE COMPONENT #001 "Video Experience"
   (components/sfts-video-experience/style.css, enqueue géré par
   sfts_video_experience_enqueue_assets() dans functions.php). Plus aucune
   règle .sfts-signature-* dans ce fichier : le composant utilise son
   propre espace de classes (.sfts-vx-*) et ses propres tokens de thème,
   posés en inline style par sfts_video_experience() depuis
   page-zone-realisations.php. Voir components/sfts-video-experience/
   README.md pour le détail. */

/* "Les femmes et les hommes" — portrait éditorial (rectangle, pas la vignette
   ronde du hero) pour distinguer visuellement cette bande, dans le même
   band-dark que le reste des sections à fort contraste.
   2026-09-21 : signalé par Benoit comme "mal organisé, la photo trop
   grande" — la colonne photo partageait le ratio générique de `.two-col`
   (1.1fr/0.9fr, pensé pour du texte face à du texte), donnant à la photo
   presque autant de place qu'au texte alors que ce dernier est court (nom,
   métier, une citation). Ratio resserré ICI SEULEMENT (jamais sur la règle
   partagée `.two-col`, utilisée aussi par À propos/Contact/Communes/
   Prestations) + portrait réduit à 260px pour rendre le texte dominant.
   Erreur faite puis corrigée dans la foulée en vérifiant réellement dans
   Chrome : `.leadership-portrait-col` est le 1er enfant du grid (voir
   front-page.php), donc un 1er `grid-template-columns: 1.5fr 0.5fr` donnait
   la voie LARGE à la photo (pas au texte) — un vide énorme apparaissait
   autour d'une image plafonnée à 260px dans une colonne bien plus large.
   Ordre corrigé : 0.5fr en 1er (colonne photo), 1.5fr en 2nd (texte). */
.leadership-band .two-col { align-items: center; grid-template-columns: 0.5fr 1.5fr; }
.leadership-portrait-col { display: flex; justify-content: center; }
/* height: auto obligatoire ici (bug réel, voir .hero-showcase-img plus haut
   pour l'explication complète) : sans elle, la photo gardait la hauteur
   BRUTE de son attribut HTML height (1020px pour armoire-bois-noyer.webp)
   alors que sa largeur était bien plafonnée à 260px — un rectangle
   258×1020 au lieu de 258×322, la vraie cause du "mal proportionné"
   remonté par Benoit après le 1er correctif (qui n'avait touché que le
   ratio de grille, pas ce bug de fond). */
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.leadership-portrait { width: 100%; max-width: 260px; aspect-ratio: 4/5; height: auto; object-fit: cover; border-radius: 0; border: 3px solid var(--accent-gold); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); display: block; }

.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item h3 { font-size: 1rem; margin-bottom: 8px; }
.faq-item p { color: var(--muted); margin: 0; font-size: 0.92rem; }

.map-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); margin-top: 28px; }
#carte-cabinet { height: 420px; width: 100%; border-radius: 14px; font-family: 'Strawford', Arial, sans-serif; }
.map-card .leaflet-container img { max-width: none !important; }
.map-card .leaflet-popup-content a { color: var(--deep); font-weight: 600; }
.map-caption { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 16px; }

/* Rubrique "Territoire d'expertise" — bande courte, carte interactive
   Leaflet retirée le 23/09 (demande de Vincent : "supprime la carte
   interactive"). Titrage unifié au système commun (.section-head/
   .section-label/h2, voir front-page.php) : .territoire-eyebrow (majuscules
   + filet) et .territoire-heading (Georgia) retirés le même jour, avec le
   reste du mécanisme carte (Leaflet, .sfts-map-dot, filtre de tuiles) —
   plus aucune de ces règles n'a de markup correspondant. Seule la liste de
   communes reste, harmonisée en Strawford (plus de Georgia isolé ici). */
.territoire-list { font-size: 0.95rem; line-height: 2; color: var(--muted); }
.territoire-list a { color: var(--muted); text-decoration: none; white-space: nowrap; } /* nom de commune jamais coupé au trait d'union (2026-09-29) */
.territoire-list a:hover { color: var(--deep); text-decoration: underline; }
.territoire-list span { color: var(--accent-gold); }

/* Intro "portail coulissant" — voir header.php / base.njk pour le
   marquage/JS. Netteté impitoyable exigée le 2026-09-20 : la version
   précédente affichait le logo à 100vw de large (~2280px de rendu réel sur
   écran retina), très flou depuis un fichier logo natif bien plus petit.
   --sfts-gate-logo-natural-w est injectée depuis la vraie largeur du fichier
   logo ; min() garantit qu'on ne l'agrandit JAMAIS au-delà de sa résolution
   réelle (seulement réduite sur petit écran, ce qui reste toujours net). Les
   deux panneaux affichent la MÊME image à la MÊME position (centrée sur tout
   le viewport, pas seulement sur leur propre moitié) : calc(50vw - moitié)
   pour le panneau gauche, calc(-moitié) pour le droit — ensemble ils
   reconstruisent un seul logo centré et net, jamais une image doublée en
   largeur. */
.sfts-gate-intro {
  position: fixed; inset: 0; z-index: 999;
  --sfts-gate-logo-w: min(var(--sfts-gate-logo-natural-w, 640px), 92vw);
}
.sfts-gate-panel {
  position: fixed; top: 0; bottom: 0; width: 50%;
  background-color: var(--deep);
  background-repeat: no-repeat;
  background-size: var(--sfts-gate-logo-w) auto;
  transition: transform 1.1s cubic-bezier(.76,0,.24,1);
}
.sfts-gate-panel--left { left: 0; background-position: calc(50vw - (var(--sfts-gate-logo-w) / 2)) center; }
.sfts-gate-panel--right { right: 0; background-position: calc(var(--sfts-gate-logo-w) / -2) center; }
.sfts-gate-intro.sfts-gate-open .sfts-gate-panel--left { transform: translateX(-100%); }
.sfts-gate-intro.sfts-gate-open .sfts-gate-panel--right { transform: translateX(100%); }
.sfts-gate-intro.sfts-gate-hidden { display: none; }
html.sfts-gate-active { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sfts-gate-intro { display: none !important; } }

/* Lightbox galerie — zoom vanille, sans librairie, sur toute grille .photo-grid
   (page Galerie en priorité, mais générique pour tout futur client). */
.photo-grid figure { cursor: zoom-in; }
.sfts-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,14,20,0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.sfts-lightbox.is-open { opacity: 1; pointer-events: auto; }
.sfts-lightbox-inner { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.sfts-lightbox img { max-width: min(92vw, 1100px); max-height: 78vh; object-fit: contain; border-radius: 0; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6); display: block; }
.sfts-lightbox figcaption { color: #fff; text-align: center; margin-top: 16px; font-size: 0.92rem; max-width: 700px; opacity: 0.9; }
.sfts-lightbox-close, .sfts-lightbox-prev, .sfts-lightbox-next {
  position: fixed; background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
  border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.sfts-lightbox-close:hover, .sfts-lightbox-prev:hover, .sfts-lightbox-next:hover { background: rgba(255,255,255,0.24); }
.sfts-lightbox-close { top: 20px; right: 20px; }
.sfts-lightbox-prev { top: 50%; left: 20px; transform: translateY(-50%); }
.sfts-lightbox-next { top: 50%; right: 20px; transform: translateY(-50%); }
@media (max-width: 700px) { .sfts-lightbox-prev, .sfts-lightbox-next { display: none; } }

/* Motif "fil ondulé" (.wave-divider) retiré le 23/09 (demande de Vincent :
   pas de petites vagues décoratives entre les bandeaux, respect à 100% de
   la charte — seul le filigrane de marque .sfts-brand-watermark reste
   autorisé). Ancien usage : front-page.php, entre la bande actualités et
   le footer. */

/* Photo gallery — légende incrustée sur la photo (fond dégradé), inspirée des
   grilles de portfolio des agences d'agencement haut de gamme étudiées le
   2026-09-19 (arkal.fr/realisations) plutôt qu'une légende à part sous la photo. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 28px; }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.photo-grid figure { position: relative; margin: 0; border-radius: 0; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s ease; }
.photo-grid figure:hover img { transform: scale(1.045); }
.photo-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 14px; font-size: 0.82rem; line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(10,14,20,0.82) 0%, rgba(10,14,20,0.38) 60%, rgba(10,14,20,0) 100%);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.photo-grid figcaption strong { color: #fff; }

/* Styles de la galerie "bento" (.realisation-gallery / .sfts-bento-*) —
   EXTRAITS le 2026-09-23 vers le SFTS EXPERIENCE COMPONENT #002 "Gallery
   Experience" (components/sfts-gallery-experience/style.css, enqueue géré
   par sfts_gallery_experience_enqueue_assets() dans functions.php). Plus
   aucune règle .realisation-gallery/.sfts-bento-* dans ce fichier : le
   composant utilise son propre espace de classes (.sfts-gallery-*). Voir
   components/sfts-gallery-experience/README.md pour le détail complet,
   y compris l'historique des deux stratégies concurrentes essayées puis
   abandonnées avant ce motif (column-count masonry, motif répété tous les
   5 éléments). */

.figure-inline { float: right; margin: 4px 0 16px 24px; width: 180px; }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.figure-inline img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 0; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; }
.figure-inline figcaption { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 8px; }
@media (max-width: 700px) { .figure-inline { float: none; width: 100%; max-width: 240px; margin: 16px auto; } }

/* "Nos chantiers les plus proches" (page commune) — 2026-09-21 : remplace
   l'ancien figure-inline unique (une seule photo, souvent répétée sur
   plusieurs communes voisines faute de chantier réel plus proche) par une
   petite grille de 3 cartes. aspect-ratio + height: auto explicite car les
   <img> portent des attributs HTML width/height (sfts_img_dims_attr) — voir
   le bug documenté sur .leadership-portrait plus haut dans ce fichier. */
.nearest-realisations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; clear: both; }
@media (max-width: 700px) { .nearest-realisations-grid { grid-template-columns: 1fr; } }
.nearest-realisation-card { display: block; text-decoration: none; color: inherit; }
/* border-radius retiré le 24/09, demande de Benoit — même règle sur tout le site. */
.nearest-realisation-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; transition: transform 0.2s ease; }
.nearest-realisation-card:hover img { transform: scale(1.02); }
.nearest-realisation-caption { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 8px; }

/* Reviews marquee — le moteur (défilement, pause, cartes) a été EXTRAIT le
   2026-09-23 vers le SFTS EXPERIENCE COMPONENT #004 "Proof Experience"
   (components/sfts-proof-experience/, window.sftsProofExperienceInit — voir
   son README.md). Ce fichier ne porte plus que l'habillage propre à MT
   Univers (fond/padding de section, ligne "Avis vérifiés sur ... →") — voir
   sfts_render_reviews() dans functions.php pour la composition.
   Ancien bouton .sfts-reviews-pause masqué sur l'accueil
   (body.home .sfts-reviews-pause{display:none}) : PAS reproduit — dette
   d'accessibilité connue, résolue par construction dans #004 (le bouton
   pause du nouveau composant reste toujours visible/accessible). */
.reviews-band { background: var(--surface-2); overflow: hidden; padding: 52px 0; }
.reviews-band .sfts-proof-band { padding: 0; }
.reviews-band .sfts-proof-track-wrap { margin-top: 28px; }
.reviews-source { margin-top: 24px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.reviews-source a { color: var(--deep); font-weight: 600; text-decoration: none; }
.reviews-band--compact { padding: 40px 0; }

/* var(--deep-2) (bordeaux très sombre) → var(--noir) (#000000, Noir
   officiel de la charte) le 2026-09-25, demande explicite de Vincent
   (brief accueil, point 11.1 : "Fond noir"). */
footer.site-footer { background: var(--noir); color: rgba(240,237,224,0.7); padding: 40px 0; font-size: 0.86rem; }
footer.site-footer a { color: rgba(240,237,224,0.85); }
/* Logotype du footer (23/09) — Blanc, hauteur modeste, juste au-dessus de
   la grille de colonnes, jamais aussi grand que le monogramme du header
   (rôle différent : signature de bas de page, pas navigation). */
.footer-logo { display: inline-block; margin-bottom: 28px; }
.footer-logo img { height: 40px; width: auto; display: block; }
footer.site-footer .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { footer.site-footer .foot-grid { grid-template-columns: 1fr; } }
/* "nav.main-nav { display: none; }" retiré d'ici le 2026-09-22 — reliquat de
   l'ancien menu hamburger plein écran, jamais nettoyé après son retrait du
   2026-09-21. Il gagnait la cascade sur le nouveau menu mobile (voir plus
   haut dans ce fichier) car il apparaissait plus tard dans le fichier avec
   la même spécificité : nav.main-nav restait display:none en permanence,
   même une fois .is-open ajouté par le JS — bug réel trouvé en testant en
   direct sur un viewport mobile, pas juste supposé. */
/* h4 -> h3 le 2026-09-23 (audit Lighthouse, "heading-order") : ces titres de
   colonnes de pied de page suivaient un h2 (dernière section de contenu) et
   sautaient un niveau. */
footer.site-footer h3 { font-family: 'Strawford', Arial, sans-serif; color: var(--deep-ink); font-size: 0.95rem; margin-bottom: 12px; font-weight: 700; }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* opacity:0.7 retiré le 2026-09-23 (audit Lighthouse : contraste 4.44:1,
   sous le seuil AA 4.5:1) — il s'ajoutait à la couleur de texte déjà
   translucide héritée de footer.site-footer (rgba(...,0.7)), pour un alpha
   effectif de 0.49 au lieu de 0.7. La couleur héritée seule suffit déjà au
   grisé recherché (contraste ~7.8:1 sur le fond #2C0F15). */
.legal-note { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(240,237,224,0.15); font-size: 0.78rem; }

/* Recherche (Pagefind) */
.search-trigger { background: none; border: none; color: var(--deep-ink); font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; flex-shrink: 0; }
.search-trigger:hover { background: rgba(240,237,224,0.12); }
.search-modal { position: fixed; inset: 0; background: rgba(12,24,38,0.55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px; }
.search-modal-inner { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); width: min(100%, 640px); max-height: 78vh; overflow-y: auto; padding: 24px; position: relative; }
.search-modal-close { position: absolute; top: 14px; right: 14px; background: var(--surface-2); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: var(--ink); font-size: 0.95rem; }
.search-modal-close:hover { background: var(--line); }
#search .pagefind-ui { --pagefind-ui-primary: var(--deep); --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--surface); --pagefind-ui-border: var(--line); --pagefind-ui-font: Arial, system-ui, sans-serif; }

/* ==========================================================================
   THÈMES — 3 directions de design réutilisables (site.theme), pas de simple
   changement de couleur : typographie, forme, texture des photos et esprit
   des sections diffèrent réellement d'un thème à l'autre. "foyer" (défaut)
   reprend l'habillage d'origine, pensé pour Philippine de Forville — rond,
   doux, portrait circulaire. Les deux autres blocs ci-dessous le réécrivent.
   ========================================================================== */

/* ---- Atelier : artisanal, bâtiment, métiers manuels ---- */
body[data-theme="atelier"] .card,
body[data-theme="atelier"] .btn,
body[data-theme="atelier"] .photo-grid figure,
body[data-theme="atelier"] .hero-portrait,
body[data-theme="atelier"] .portrait,
body[data-theme="atelier"] .figure-inline img,
body[data-theme="atelier"] .review-card,
body[data-theme="atelier"] .map-card { border-radius: 6px; }
body[data-theme="atelier"] .hero-portrait { width: 300px; height: 340px; object-fit: cover; border-width: 6px; }
body[data-theme="atelier"] .portrait { border-radius: 4px; border-width: 4px; }
body[data-theme="atelier"] .card { border-width: 2px; }
body[data-theme="atelier"] .section-label {
  font-style: normal; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; font-family: 'Strawford', Arial, sans-serif; font-size: 0.8rem;
}
body[data-theme="atelier"] .hero h1 { letter-spacing: -0.01em; }
body[data-theme="atelier"] .hero { border-bottom: 6px solid var(--accent); }
body[data-theme="atelier"] .photo-grid img,
body[data-theme="atelier"] .hero-portrait,
body[data-theme="atelier"] .portrait,
body[data-theme="atelier"] .figure-inline img { filter: sepia(0.14) saturate(1.2) contrast(1.05); }
body[data-theme="atelier"] .btn-primary { border-radius: 6px; }
body[data-theme="atelier"] .btn-secondary { border-radius: 6px; border-width: 2px; }
body[data-theme="atelier"] .nav-cta { border-radius: 6px; }
body[data-theme="atelier"] .trust-chip b { font-family: 'Strawford', Arial, sans-serif; font-weight: 700; }

/* ---- Lumière : moderne épuré, services, professions libérales ---- */
body[data-theme="lumiere"] .card,
body[data-theme="lumiere"] .review-card,
body[data-theme="lumiere"] .map-card { border: none; box-shadow: 0 24px 60px -32px rgba(20,30,40,0.22); border-radius: 22px; }
body[data-theme="lumiere"] .photo-grid figure { border: none; border-radius: 22px; }
body[data-theme="lumiere"] .hero-portrait { border-radius: 32px; width: 300px; height: 300px; object-fit: cover; border-width: 0; box-shadow: 0 30px 70px -30px rgba(20,30,40,0.35); }
body[data-theme="lumiere"] .portrait { border-radius: 18px; width: 128px; height: 128px; }
body[data-theme="lumiere"] .figure-inline img { border: none; border-radius: 18px; }
body[data-theme="lumiere"] .section-label { font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
body[data-theme="lumiere"] .hero { padding: 84px 0 96px; }
body[data-theme="lumiere"] section { padding: 68px 0; }
body[data-theme="lumiere"] .info-list li { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
body[data-theme="lumiere"] .info-list li:last-child { border-bottom: none; }
body[data-theme="lumiere"] .photo-grid img,
body[data-theme="lumiere"] .hero-portrait,
body[data-theme="lumiere"] .portrait,
body[data-theme="lumiere"] .figure-inline img { filter: saturate(1.04); }
body[data-theme="lumiere"] .band-dark { background-image: none; }

/* Barre de contact flottante mobile (2026-09-20, inspiree d'un laureat Webby
   2026, louispaquet.com) : le devis/telephone reste accessible en 1 geste
   meme apres avoir scrolle passe le hero, sur mobile uniquement. */
.sfts-sticky-cta { display: none; }
@media (max-width: 700px) {
  .sfts-sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    background: var(--deep);
    box-shadow: 0 -2px 14px rgba(0,0,0,0.18);
  }
  .sfts-sticky-cta a {
    flex: 1;
    text-align: center;
    /* padding-bottom : env(safe-area-inset-bottom) ajouté le 2026-09-23 (audit
       manuel post-Lighthouse) — sans ça, sur un iPhone à encoche/Dynamic
       Island, la barre home indicator recouvre le bas des boutons ; env() vaut
       0 sur tout autre appareil, donc rien ne change ailleurs. */
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff !important;
    text-decoration: none;
  }
  .sfts-sticky-cta-call { background: rgba(255,255,255,0.08); }
  /* Sélecteur renforcé (.sfts-sticky-cta a.sfts-sticky-cta-devis, pas juste
     .sfts-sticky-cta-devis) — audit Lighthouse du 2026-09-23 : contraste
     1.88:1 mesuré en réalité (texte blanc sur fond doré), alors que cette
     règle demandait déjà var(--accent-ink) en !important. Cause trouvée :
     ".sfts-sticky-cta a" (classe + élément) a une spécificité plus élevée que
     ".sfts-sticky-cta-devis" seule (classe), donc "color: #fff !important"
     juste au-dessus gagnait malgré tout — jamais un !important qui suffit à
     lui seul sans regarder la spécificité du sélecteur en face. */
  .sfts-sticky-cta a.sfts-sticky-cta-devis { background: var(--accent-gold, var(--accent)); color: var(--accent-ink, #fff) !important; }
  /* calc(...) au lieu de 58px fixe (2026-09-23) : la barre est maintenant
     plus haute sur iPhone à encoche (voir .sfts-sticky-cta a ci-dessus) —
     sans cet ajustement, le tout dernier morceau de contenu de chaque page
     resterait cache derriere la barre sur ces appareils. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Masquée tant que le bouton du hero est visible (2026-09-26, Benoit :
     "Parlons de votre projet" au-dessus de "Vous avez un projet, parlons-en ?",
     redondant sur mobile). Classe posée/retirée par footer.php ; sans JS, la
     barre reste affichée comme avant. visibility:hidden la retire aussi de
     l'ordre de tabulation et des lecteurs d'écran pendant qu'elle est cachée. */
  .sfts-sticky-cta { transition: transform 0.3s ease, visibility 0.3s; }
  .sfts-sticky-cta.is-hidden { transform: translateY(100%); visibility: hidden; }
}

/* Indicateur de défilement du hero (2026-09-21) — un simple repère visuel en
   bas du hero d'accueil invitant à continuer, jamais un gadget qui gêne la
   lecture. Trait vertical + point, anime en va-et-vient doux (voir
   footer.php pour le respect de prefers-reduced-motion — figé, pas retire,
   si l'utilisateur préfère moins de mouvement). */
.sfts-scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2; color: rgba(245,245,237,0.75); text-decoration: none;
}
.sfts-scroll-cue span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.sfts-scroll-cue-line { width: 1px; height: 34px; background: rgba(245,245,237,0.4); position: relative; overflow: hidden; }
/* Point animé retiré le 23/09 (demande de Vincent : respect à 100% de la
   charte, aucun ajout de fioriture hors patterns, aucun petit point
   coloré) — c'était une pure décoration sans fonction, jamais indiquée
   dans la charte. Le trait seul (.sfts-scroll-cue-line ci-dessus) reste
   le repère "Défiler". Markup .sfts-scroll-cue-dot laissé dans les
   gabarits (6 pages) pour ne rien casser, neutralisé ici. */
.sfts-scroll-cue-dot { display: none; }
@media (max-width: 700px) { .sfts-scroll-cue { display: none; } }

/* Bouton "retour en haut" (2026-09-21) — apparaît après le hero (voir
   footer.php), jamais visible en permanence. Cercle plein, cohérent avec le
   reste des boutons (même famille de transition). */
/* .sfts-back-to-top supprimé le 2026-09-27 (demande de Benoit). */

/* .sfts-back-to-list (flèche ←) supprimé le 2026-10-01 (demande de Benoit). */

/* Transition de page (2026-09-22, demande explicite de Benoit — "cela ouvre
   la suite comme lorsque l'on utilise un iphone" — puis "je ne reconnais pas
   du tout iPhone" sur la 1ère tentative). Diagnostic réel : un simple fondu
   de couleur pleine page n'est pas ce qui fait "reconnaître" un iPhone —
   c'est la photo TAPÉE qui grandit en continu jusqu'à devenir la photo de la
   page suivante (l'app Photos, l'App Store...), jamais un aplat neutre sans
   rapport avec ce qui a été cliqué. Remplacé l'ancien voile JS fait main par
   la View Transitions API native du navigateur (standard W3C, pas une
   fonctionnalité propre à un site) : `navigation:auto` capture
   automatiquement l'ancienne et la nouvelle page ; un `view-transition-name`
   partagé entre la photo de la carte et la photo de la page de détail (voir
   les gabarits qui affichent des réalisations) fait morpher CETTE photo
   précise d'une page à l'autre — le reste de la page fait un fondu croisé
   discret autour. Dégradation gracieuse totale : Safari/Firefox ignorent
   cette règle silencieusement et gardent une navigation instantanée normale
   (comportement exactement identique à avant l'ajout de cette règle),
   jamais d'erreur ni de contenu bloqué. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* En-tete de section avec lien "Voir tout" a cote du titre, jamais apres
   avoir fait defiler toutes les cartes (2026-09-20, inspire d'un laureat
   Webby 2026, foundationtheatres.com.au). */
.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head-row h2 { margin: 0; }
.section-head-link { white-space: nowrap; font-size: 0.92rem; }

/* Style optionnel "photos epinglees" (field_gallery_pinned_style, Reglages
   du site -> Cabinet -> Photos), inspire d'un laureat Webby 2026,
   pennrosefarms.com : renforce "vrai travail, pas des photos de banque".
   Jamais actif par defaut -- reglable par client. */
.photo-grid--pinned figure {
  --sfts-pin-rot: -2deg;
  position: relative;
  transform: rotate(var(--sfts-pin-rot));
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}
.photo-grid--pinned figure:nth-child(2n) { --sfts-pin-rot: 2deg; }
.photo-grid--pinned figure:nth-child(3n) { --sfts-pin-rot: -3deg; }
.photo-grid--pinned figure:nth-child(5n) { --sfts-pin-rot: 3deg; }
.photo-grid--pinned figure::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 48px;
  height: 20px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(255, 241, 179, 0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  z-index: 2;
}

/* ---------- Écran d'accueil "à la iPhone" (2026-09-22, demande explicite
   de Benoit) — page Nos réalisations : 3 icônes d'application (une par
   zone) + un widget "À la une", au lieu du filtre + mur de cartes. "L'art
   de la soustraction" demandé : fond uni, beaucoup de vide, AUCUN filigrane
   ici (contrairement au reste du site) — zéro distraction autour des
   icônes, exactement la règle graphique demandée. Icônes = vraies photos
   (la miniature réelle de chaque page de zone), jamais une illustration 3D
   fabriquée — cohérent avec la discipline "jamais inventer" du site.
   view-transition-name partagé avec le hero de la page de zone
   correspondante (voir page-zone-realisations.php) : l'icône grandit en
   continu jusqu'à devenir le hero plein cadre, l'effet "ouverture d'appli"
   demandé, obtenu nativement (@view-transition, style.css) sans aucun JS
   custom. */
.sfts-launcher { padding: 72px 0 56px; background: var(--bg); }
/* Lanceur reconstruit le 2026-09-22 (demande explicite de Benoit : "adapter
   le menu réalisations" sur le principe structurel de yana-k-design.fr/
   catalogue.html — plusieurs grands panneaux cliquables plutôt qu'une rangée
   de petites icônes ; puis "premium [...] identique dans sa conception [...]
   allie le luxe, le logo de Vincent, de raffinement et d'élégance", plus
   tard le même jour). Reprend le PRINCIPE générique (peu de larges panneaux
   pleine hauteur, un par zone, libellé + micro-CTA "Découvrir") — jamais
   l'habillage visuel propre à ce site précis (bandes photo, tracé diagonal
   blanc, rose de marque) : ici chaque panneau est rempli d'un aplat uni tiré
   de la charte MT Univers elle-même (--deep/--ink/--accent-gold), sans
   aucune photo — demande explicite de Benoit ("boutons sans photo dedans
   mais rempli uni"). Même refus déjà tranché pour ce site précis que celui
   noté plus haut dans ce thème (voir page-nos-chantiers.php) : principe
   généreux, jamais un calque visuel.
   Passage "premium" (même jour) : triangulé sur 4 portfolios réels
   de menuiserie/architecture d'intérieur haut de gamme (jamais un seul,
   jamais yana-k-design.fr) — rareté visuelle (3 panneaux, rien de plus),
   transitions lentes (0.6-0.7s, jamais un hover nerveux <0.3s), typographie
   sobre à forte hiérarchie de taille, marque présente par la retenue plutôt
   que la démonstration. Le filigrane est le tracé RÉEL du logotype MT
   Univers (sfts_brand_wave_svg(), déjà utilisé partout ailleurs sur ce
   thème pour la même raison) — jamais un motif générique emprunté. */
.sfts-app-grid {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 0 auto 0;
  border-radius: 4px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(20,8,10,0.5);
}
.sfts-app-icon, .sfts-dossier { -webkit-tap-highlight-color: transparent; }
.sfts-app-icon {
  position: relative; overflow: hidden;
  flex: 1 1 320px; min-height: min(64vh, 620px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  text-decoration: none; text-align: center; padding: 56px 32px;
  transition: filter 0.65s cubic-bezier(0.19,1,0.22,1);
}
.sfts-app-icon-mark {
  position: absolute; top: 50%; left: 50%; width: 128%; height: auto;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0.14; pointer-events: none; z-index: 0;
  transition: transform 0.7s cubic-bezier(0.19,1,0.22,1), opacity 0.5s ease;
}
.sfts-app-icon--agencement .sfts-app-icon-mark,
.sfts-app-icon--menuiserie-interieure .sfts-app-icon-mark { color: rgba(245,245,237,0.9); }
.sfts-app-icon--menuiserie-exterieure .sfts-app-icon-mark { color: rgba(44,15,21,0.85); }
.sfts-app-icon:hover { filter: brightness(1.05); }
.sfts-app-icon:hover .sfts-app-icon-mark { transform: translate(-50%, -50%) scale(1); opacity: 0.22; }
.sfts-app-icon:active { filter: brightness(0.97); transition-duration: 0.1s; }
.sfts-app-icon--agencement { background: var(--deep); }
.sfts-app-icon--menuiserie-interieure { background: var(--ink); }
.sfts-app-icon--menuiserie-exterieure { background: var(--accent-gold); }
.sfts-app-icon-eyebrow {
  position: relative; z-index: 1;
  font-family: 'Strawford', Arial, sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; color: rgba(245,245,237,0.55);
}
.sfts-app-icon--menuiserie-exterieure .sfts-app-icon-eyebrow { color: rgba(44,23,15,0.55); }
.sfts-app-icon-label {
  position: relative; z-index: 1;
  font-family: 'Strawford', Arial, sans-serif; font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.15;
  color: var(--deep-ink); text-align: center; text-wrap: balance;
}
.sfts-app-icon--menuiserie-exterieure .sfts-app-icon-label { color: var(--deep); }
.sfts-app-icon-cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(245,245,237,0.8);
  padding-bottom: 3px; border-bottom: 1px solid rgba(245,245,237,0.35);
  transition: border-color 0.5s ease, color 0.5s ease;
}
.sfts-app-icon:hover .sfts-app-icon-cta { border-color: rgba(245,245,237,0.85); }
.sfts-app-icon--menuiserie-exterieure .sfts-app-icon-cta { color: rgba(44,23,15,0.75); border-bottom-color: rgba(44,23,15,0.35); }
.sfts-app-icon--menuiserie-exterieure:hover .sfts-app-icon-cta { border-color: rgba(44,23,15,0.75); }
@media (prefers-reduced-motion: reduce) { .sfts-app-icon, .sfts-app-icon-mark, .sfts-app-icon-cta { transition: none; } }
@media (max-width: 700px) {
  .sfts-app-icon { flex: 1 1 100%; min-height: 320px; padding: 44px 28px; gap: 14px; }
  .sfts-app-icon-mark { width: 168%; }
}

/* Widget "À la une" — même esprit qu'un widget météo/photos iOS : un grand
   rectangle qui fait défiler en boucle de vraies réalisations (jamais un
   texte inventé, la légende reprend ville + catégorie réelles). */
.sfts-widget-featured {
  position: relative; max-width: 720px; margin: 0 auto; border-radius: 32px; overflow: hidden;
  aspect-ratio: 16/8; box-shadow: 0 24px 60px -30px rgba(64,23,31,0.4);
}
/* Triptyque "catalogue" — dimensions et emplacement RELEVÉS RÉELLEMENT sur
   yana-k-design.fr/catalogue.html le 2026-09-22 (getBoundingClientRect(),
   viewport 1440px, demande explicite de Benoit : "je veux les mêmes
   dimensions [...] et le même emplacement") : ligne centrée max-width
   ~1160px (1153px mesurés), 3 colonnes égales séparées par ~30px de vrai
   espace (jamais un triptyque soudé), hauteur fixe ~700px (pas un vh —
   la référence n'est pas non plus proportionnelle à la fenêtre), carte
   blanche posée à 40% de la hauteur du panneau (PAS collée en bas, vérifié
   par mesure : à 1440px, le panneau photo mesure 700px et la carte
   commence à 281px de son sommet, soit 40%). Colonne centrale = texte
   (2026-09-22, correction de Benoit : "au milieu je me suis trompé il faut
   un texte [...] adapté à l'univers de MT" — remplace le widget photo posé
   ici par erreur juste avant). Contenu adapté : eyebrow = tagline réelle
   déjà utilisée sur l'accueil, logo = vrai logotype MT Univers (jamais
   copié depuis Yana K), citation = mots de Vincent réécrits à partir de
   faits déjà publiés ailleurs sur ce site (À propos, Savoir-faire) — jamais
   le texte de Yana Kouznetsova traduit ou paraphrasé. Le tracé diagonal
   blanc de la référence (habillage visuel propre à ce site précis) reste
   remplacé par le vrai filigrane du logo MT Univers sur les 2 panneaux
   photo. */
.sfts-catalogue-split {
  display: flex; flex-wrap: wrap; gap: 30px;
  max-width: 1160px; margin: 0 auto;
  height: 700px;
}
.sfts-catalogue-panel {
  position: relative; flex: 1 1 320px; height: 100%; overflow: hidden;
  display: block; text-decoration: none;
}
.sfts-catalogue-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.sfts-catalogue-panel:hover img { transform: scale(1.045); }
.sfts-catalogue-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,8,10,0.5) 0%, rgba(20,8,10,0.08) 42%, transparent 62%);
}
.sfts-catalogue-mark {
  position: absolute; top: 50%; left: 50%; width: 70%; height: auto;
  transform: translate(-50%, -50%);
  color: #F5F5ED; opacity: 0.32; z-index: 1; pointer-events: none;
  transition: opacity 0.6s ease;
}
.sfts-catalogue-panel:hover .sfts-catalogue-mark { opacity: 0.5; }
.sfts-catalogue-card {
  position: absolute; left: 24px; right: 24px; top: 40%; z-index: 2;
  background: var(--surface); padding: 22px 26px;
  box-shadow: 0 24px 50px -24px rgba(20,8,10,0.55);
  width: fit-content; max-width: calc(100% - 48px);
}
/* h2 ajouté le 2026-09-23 (audit Lighthouse "heading-order", page-nos-
   chantiers.php : h1 (hero) -> h3 (ce titre) sautait le h2 — passé en h2,
   voir page-nos-chantiers.php). */
.sfts-catalogue-card h2, .sfts-catalogue-card h3 {
  margin: 0 0 10px; font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--ink); font-weight: 700; letter-spacing: -0.01em;
}
.sfts-catalogue-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid var(--line);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.sfts-catalogue-panel:hover .sfts-catalogue-cta { color: var(--ink); border-color: var(--ink); }
/* Colonne centrale texte — même position (col-md-4 centré) et même
   composition (eyebrow / titre / logo / citation / signature) que la
   référence mesurée, fond neutre clair tiré de la charte MT Univers
   (--surface-2) plutôt que le gris générique de Yana K. */
.sfts-catalogue-middle {
  flex: 1 1 320px; height: 100%; position: relative;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.sfts-catalogue-middle-inner { max-width: 320px; padding: 0 30px; text-align: center; }
.sfts-catalogue-eyebrow {
  font-family: 'Strawford', Arial, sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 28px;
}
.sfts-catalogue-title {
  font-family: 'Strawford', Arial, sans-serif; font-weight: 300; font-size: 1.9rem;
  color: var(--ink); margin: 0 0 30px;
}
.sfts-catalogue-logo { display: block; height: 46px; width: auto; margin: 0 auto 30px; }
.sfts-catalogue-quote {
  font-size: 0.95rem; line-height: 1.9; color: var(--ink); margin: 0 0 20px;
}
.sfts-catalogue-author { font-size: 0.85rem; font-style: italic; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sfts-catalogue-panel img, .sfts-catalogue-mark, .sfts-catalogue-cta { transition: none; } }
@media (max-width: 900px) { .sfts-catalogue-split { height: auto; } .sfts-catalogue-panel, .sfts-catalogue-middle { height: 560px; flex: 1 1 100%; } }
@media (max-width: 700px) { .sfts-catalogue-middle { height: auto; padding: 64px 0; } }
.sfts-widget-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease;
}
.sfts-widget-slide.is-active { opacity: 1; }
.sfts-widget-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfts-widget-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,10,16,0.75) 0%, rgba(6,10,16,0.1) 45%, transparent 70%);
}
.sfts-widget-caption { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 1; color: #fff; }
/* Bouton pause du widget "À la une" (2026-09-22, audit accessibilité,
   SC 2.2.2) — aucun bouton pause n'existait jusqu'ici sur ce défilement
   automatique (4,2s en boucle). */
.sfts-widget-pause {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(245,245,237,0.55); background: rgba(44,15,21,0.4);
  color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sfts-widget-pause:hover, .sfts-widget-pause:focus-visible { background: rgba(44,15,21,0.65); border-color: #fff; }
.sfts-widget-caption .eyebrow { color: var(--accent-gold); margin-bottom: 4px; display: block; }
.sfts-widget-caption h3 { margin: 0; font-size: 1.2rem; }
@media (max-width: 560px) { .sfts-widget-featured { aspect-ratio: 4/5; border-radius: 24px; } }

/* ---------- Portfolio par zone — titre "Réalisations" + sous-titre = nom de
   la zone, reproduisant la structure de yana-k-design.fr/projets-
   particuliers.html. Essayé d'abord en 3 sections empilées sur
   /nos-realisations/ elle-même (2026-09-22, "tout en restant sur la page
   réalisation"), puis remplacé le même jour par de vraies pages dédiées
   (Benoit : "sinon ce n'est pas très beau") — voir
   page-realisations-zone.php, /nos-realisations/agencement/ et
   /nos-realisations/menuiserie/. Classes gardées génériques (jamais
   .sfts-nos-chantiers-xyz) : elles ne servent plus qu'à ces pages dédiées. */
.sfts-portfolio-zone-head { text-align: center; margin-bottom: 40px; }
.sfts-portfolio-zone-title {
  font-family: 'Strawford', Arial, sans-serif; font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink); margin: 0 0 10px;
}
.sfts-portfolio-zone-title .sfts-portfolio-zone-subtitle { display: block; margin-top: 10px; line-height: 1.4; }
.sfts-portfolio-zone-subtitle {
  font-family: 'Strawford', Arial, sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Dossiers (pages de zone) — mêmes codes graphiques que les
   icônes d'appli : une pastille arrondie contenant un aperçu 2×2 de vraies
   photos (jamais un pictogramme), qui filtre la grille en dessous au clic.
   Regroupements éditoriaux réels (voir page-zone-realisations.php) dérivés
   des catégories réelles déjà présentes — jamais un dossier vide créé pour
   respecter un chiffre rond. */
/* Filtres "dossier" restylés le 2026-09-22 ("suis la même logique dans le
   menu réalisation [...] que yana-k-design.fr/projets-particuliers.html" —
   demande explicite de Benoit) : onglets plats texte, dimensions et
   typographie RELEVÉES RÉELLEMENT sur la référence (getBoundingClientRect —
   10,5px, letter-spacing 5px, majuscules, padding 5px 15px, actif = fond
   sombre + texte clair, inactif = transparent). Remplace les pastilles
   squircle à vignettes-photo d'origine — jamais l'habillage rose/diagonal
   propre à ce site précis, seulement le PATRON "onglet plat sobre". */
.sfts-dossier-row { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin: 8px 0 48px; border-bottom: 1px solid var(--line); }
.sfts-dossier {
  background: none; border: none; cursor: pointer; font-family: 'Strawford', Arial, sans-serif;
  padding: 8px 18px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
  transition: background 0.4s ease, color 0.4s ease;
}
.sfts-dossier[aria-pressed="true"] { background: var(--ink); color: var(--deep-ink); }
.sfts-dossier:hover { color: var(--ink); }
.sfts-dossier[aria-pressed="true"]:hover { color: var(--deep-ink); }
@media (max-width: 700px) { .sfts-dossier { padding: 7px 13px; font-size: 0.62rem; letter-spacing: 0.2em; } }
/* Réutilisé comme simple lien retour sur fond sombre (2026-09-22, hero texte
   seul de single-realisation.php) — .sfts-dossier suppose un fond clair par
   défaut (:hover vers var(--ink), presque noir), jamais visible sur le
   dégradé bordeaux du hero sans photo. */
.hero .sfts-dossier:hover { color: var(--deep-ink); }

/* Grille "Mes réalisations" restylée le 2026-09-22, même demande, PRÉCISÉE le
   même jour ("mêmes tailles de photos que [...] projets-particuliers.html")
   après re-mesure exacte sur la référence : les colonnes ne sont PAS des
   fractions élastiques (1fr) mais 2 colonnes à largeur FIXE de 431px
   (getBoundingClientRect sur une vraie image de leur grille, stable après
   chargement), gap 30px/45px, centrées via justify-content plutôt qu'un
   max-width+margin:auto — sinon la colonne s'étire pour remplir le
   conteneur et la photo n'a plus la même taille qu'en référence, seulement
   la même proportion. Classes dédiées (jamais .card/.card-grid, partagées
   avec d'autres pages du site — voir home.php, page-contact.php,
   single-commune.php) : une image plate, pas de carte/ombre/padding, le
   titre + la légende juste en dessous, jamais un lien "Découvrir" en plus —
   toute l'image est déjà le lien. */
.sfts-zone-grid {
  display: grid; grid-template-columns: repeat(2, 431px);
  column-gap: 45px; row-gap: 56px; justify-content: center;
}
.sfts-zone-card { display: block; text-decoration: none; color: inherit; }
.sfts-zone-card-img { display: block; width: 431px; aspect-ratio: 431 / 416; overflow: hidden; }
.sfts-zone-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.19,1,0.22,1);
}
.sfts-zone-card:hover .sfts-zone-card-img img { transform: scale(1.04); }
.sfts-zone-card h3, .sfts-zone-card .sfts-zone-card-title {
  margin: 24px 0 6px; font-family: 'Strawford', Arial, sans-serif; font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink); text-align: center;
}
.sfts-zone-card-meta {
  margin: 0; font-size: 0.85rem; color: var(--muted); text-align: center;
}
@media (prefers-reduced-motion: reduce) { .sfts-zone-card-img img { transition: none; } }
/* En dessous de ~960px, 2 colonnes fixes de 431px (907px de contenu + gap)
   ne tiennent plus sans déborder — repli en 1 colonne fluide, jamais un
   débordement horizontal. */
@media (max-width: 960px) {
  .sfts-zone-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .sfts-zone-card-img { width: 100%; }
  .sfts-zone-card h3, .sfts-zone-card .sfts-zone-card-title { margin-top: 18px; }
}

/* Fiche d'identité technique (fiche projet) — reléguée tout en bas, un
   petit bloc discret plutôt qu'un tableau imposant, comme demandé. */
.sfts-spec-sheet {
  max-width: 420px; margin: 32px auto 0; padding: 18px 22px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.sfts-spec-sheet dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 10px; }
.sfts-spec-sheet dt:first-child { margin-top: 0; }
.sfts-spec-sheet dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }

/* ---------- Photos rectangulaires sur les SFTS EXPERIENCE COMPONENTS
   (24/09, demande de Benoit : "dans tout le site les photos doivent être
   parfaitement rectangulaire sans arrondi") — ces composants sont FIGÉS
   (VALIDATED), jamais modifiés directement : adaptation MT Univers ici,
   côté appelant, comme toute règle propre à ce client (même principe que
   .hero--lovable .btn ou #sfts-catalogue-anchor .card plus haut). Sélecteur
   préfixé par `body` uniquement pour battre la spécificité de la règle de
   base du composant sans dépendre de l'ordre de chargement des feuilles de
   style (égalité de spécificité sinon, résultat fragile). ---------- */
body .sfts-gallery { --sfts-gallery-radius: 0; } /* #002 Gallery Experience — galerie de "Nos réalisations" */
body .sfts-gallery-lightbox img { border-radius: 0; } /* #002 — sa propre visionneuse plein écran */
body .sfts-process-photo-panel { border-radius: 0; } /* #003 Process Experience — mode interactif (photo par étape), pas actif sur MT Univers aujourd'hui mais corrigé pour ne jamais réapparaître arrondi si réactivé */

/* #001 Video Experience — sceau d'entrée : pastille "lecture" (petit
   triangle) retirée le 24/09 (demande de Benoit : d'abord repositionnée
   au-dessus du T dans la courbe du ruban, puis "en fait supprime le
   triangle Play" — le monogramme seul suffit comme bouton, déjà reconnu
   comme cliquable via .sfts-vx-gate-btn qui couvre toute la zone). Repli
   générique du composant (components/sfts-video-experience/style.css)
   jamais modifié — juste masqué ici, propre à MT Univers. */
body .sfts-vx-seal-play { display: none; }
/* Cadre vidéo à angles droits (2026-09-29) : règle MT Univers « dans tout
   le site les photos doivent être parfaitement rectangulaires, sans
   arrondi » (Benoit, 24/09) — étendue à la vidéo Agencement, seul média
   encore arrondi (20px par défaut dans le composant #001, inchangé). */
.sfts-vx-frame { border-radius: 0; }

/* Parcours "Notre méthode" en mode interactif (photos, 2026-09-26) : le
   composant #003 met Georgia (serif) sur les titres/numéros d'étape —
   règle de Vincent "Police Strawford partout, sans serif". Surcharge
   scopée à cette section, composant générique inchangé. */
section.process-steps .sfts-process-step-heading,
section.process-steps .sfts-process-step-num { font-family: 'Strawford', Arial, sans-serif; }
/* Arc "Notre méthode" (2026-09-26) : .band-dark est en overflow:hidden, ce
   qui empêcherait la scène sticky de rester à l'écran. overflow:clip coupe
   pareil le filigrane sans créer de conteneur de défilement. Classe posée
   par le script du composant #003 uniquement quand l'arc est actif. */
section.process-steps.has-process-arc { overflow: clip; }
/* Logo Google devant la note du bandeau d'avis (2026-09-26). */
.reviews-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reviews-heading svg { flex: none; }

/* Message d'information cookies (2026-09-27) — discret, non bloquant, en
   bas à gauche ; au-dessus de la barre de contact fixe sur mobile. */
.sfts-cookie-note {
  position: fixed; left: 20px; bottom: 20px; z-index: 1000; max-width: 380px;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 16px 40px -24px rgba(44, 42, 42, 0.45);
  font-size: 0.84rem; line-height: 1.45;
}
.sfts-cookie-note[hidden] { display: none; }
.sfts-cookie-note p { margin: 0; }
.sfts-cookie-note a { color: var(--deep); }
.sfts-cookie-ok {
  flex: none; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 0;
  background: var(--deep); color: var(--deep-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.sfts-cookie-ok:hover { filter: brightness(1.15); }
.sfts-cookie-ok:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
@media (max-width: 700px) {
  .sfts-cookie-note { left: 12px; right: 12px; max-width: none; bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* Réalisations DANS la commune (SEO étape 0, 2026-09-27) : photo + titre +
   description réelle + matériaux — le contenu propre à chaque page ville. */
.commune-realisations { display: grid; gap: 14px; }
.commune-realisation { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; text-decoration: none; color: var(--ink); padding: 10px; border: 1px solid var(--line); background: var(--surface); }
.commune-realisation img { width: 120px; height: 90px; object-fit: cover; display: block; }
.commune-realisation-body { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; line-height: 1.45; }
.commune-realisation-body strong { font-size: 0.95rem; color: var(--deep); }
.commune-realisation-body span { color: var(--muted); }
.commune-realisation-body em { font-size: 0.8rem; color: var(--muted); }
.commune-realisation:hover { border-color: var(--deep); }
@media (max-width: 520px) { .commune-realisation { grid-template-columns: 90px 1fr; } .commune-realisation img { width: 90px; height: 70px; } }

/* =====================================================================
   PAGES VILLE UNIQUES (2026-09-27, Benoit : "entièrement différentes, pas
   des templates"). Chaque ville a son propre fichier single-commune-<slug>.php
   et sa propre mise en page ci-dessous (préfixe .v-<ville>). Charte :
   Noir, Gris 2, Beige, Vert 2, Rouge ; Strawford ; angles droits.
   ===================================================================== */
.v-kicker { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.v-link { color: var(--deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.v-mat { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.v-around { font-size: 0.88rem; color: var(--muted); margin-top: 14px; }
.v-around a { color: var(--deep); }
[class^="v-"] blockquote cite, [class*=" v-"] blockquote cite { display: block; margin-top: 12px; font-size: 0.82rem; font-style: normal; color: var(--muted); }
[class^="v-"] img { display: block; width: 100%; height: auto; }
.v-lunaire section, .v-malo section, .v-dinard section, .v-briac section, .v-pleurtuit section, .v-beaussais section, .v-lancieux section { padding: 0; }

/* ---------- Saint-Lunaire : titre + mosaïque, chiffres, pièces ---------- */
.v-lunaire-hero { padding: 150px 0 60px !important; background: var(--bg); }
.v-lunaire-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v-lunaire-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; margin: 0 0 20px; color: var(--ink); }
.v-lunaire-lead { font-size: 1.12rem; color: var(--ink); max-width: 560px; }
.v-lunaire-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 180px 180px; gap: 10px; }
.v-lunaire-mosaic a { overflow: hidden; }
.v-lunaire-mosaic img { height: 100%; object-fit: cover; }
.v-lunaire-m0 { grid-row: span 2; }
.v-lunaire-facts { background: var(--deep); color: var(--deep-ink); padding: 34px 0 !important; }
.v-lunaire-facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v-lunaire-facts b { display: block; font-size: 2rem; font-weight: 700; }
.v-lunaire-facts span { font-size: 0.86rem; opacity: 0.85; }
.v-lunaire-rooms { padding: 80px 0 !important; }
.v-lunaire-room { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); }
.v-lunaire-room header h2 { margin: 0 0 10px; font-size: 1.5rem; }
.v-lunaire-room header p { color: var(--muted); font-size: 0.95rem; }
.v-lunaire-room-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.v-lunaire-room-list .v-lunaire-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 14px; }
.v-lunaire-room-list .v-lunaire-photo img { height: 100%; object-fit: cover; }
.v-lunaire-room-list h3 { font-size: 1.02rem; margin: 0 0 8px; }
.v-lunaire-room-list h3 a { color: var(--deep); text-decoration: none; }
.v-lunaire-room-list p { font-size: 0.9rem; color: var(--ink); line-height: 1.6; }
.v-lunaire-quote { background: var(--surface); padding: 70px 0 !important; }
.v-lunaire-quote blockquote { margin: 0 auto; max-width: 780px; font-size: 1.35rem; line-height: 1.5; font-style: italic; text-align: center; }
.v-lunaire-next { padding: 70px 0 !important; }
.v-lunaire-next-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.v-lunaire-next nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--deep); text-decoration: none; }

/* ---------- Saint-Malo : plein cadre, index, alternance ---------- */
.v-malo-hero { position: relative; height: min(88vh, 760px); overflow: hidden; }
.v-malo-hero-img { position: absolute; inset: 0; height: 100% !important; object-fit: cover; }
.v-malo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.62), rgba(0,0,0,0.05) 60%); }
.v-malo-hero-text { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; color: var(--deep-ink); }
.v-malo-hero-text .v-kicker { color: rgba(245,245,237,0.8); }
/* Mobile (2026-09-29) : texte ancré en bas d'une photo de hauteur fixe — sur
   petit écran, le texte (576 px) remontait sous le logo. La photo s'agrandit
   avec son texte, qui démarre sous l'en-tête. */
@media (max-width: 700px) {
  .v-malo-hero { height: auto; min-height: min(88vh, 760px); display: flex; align-items: flex-end; }
  .v-malo-hero-text { position: relative; bottom: auto; padding: 104px 0 40px; }
}
.v-malo-hero-text h1 { color: var(--deep-ink); font-size: clamp(2.2rem, 5vw, 4rem); margin: 0 0 12px; }
.v-malo-hero-text p { max-width: 560px; font-size: 1.08rem; }
.v-malo-index { border-bottom: 1px solid var(--line); padding: 26px 0 !important; }
.v-malo-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.v-malo-index a { color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.v-malo-index span { color: var(--accent-text, #6B6636); font-variant-numeric: tabular-nums; margin-right: 4px; }
.v-malo-row { padding: 72px 0 !important; }
.v-malo-row:nth-of-type(even) { background: var(--surface); }
.v-malo-row-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.v-malo-row.is-flip .v-malo-row-grid { grid-template-columns: 5fr 7fr; }
.v-malo-row.is-flip figure { order: 2; }
.v-malo-row figure { margin: 0; position: relative; }
.v-malo-row figure > img:first-child { aspect-ratio: 4 / 3; object-fit: cover; }
.v-malo-inset { position: absolute; width: 38% !important; height: auto; right: -18px; bottom: -28px; border: 6px solid var(--bg); aspect-ratio: 1; object-fit: cover; }
.v-malo-row h2 { font-size: 1.7rem; margin: 0 0 14px; }
.v-malo-row p { line-height: 1.7; }
.v-note { background: var(--bg); border-left: 2px solid var(--accent); padding: 10px 14px; font-size: 0.9rem; }
.v-malo-close { background: var(--deep); color: var(--deep-ink); padding: 80px 0 !important; }
.v-malo-close .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.v-malo-close blockquote { margin: 0; font-size: 1.25rem; font-style: italic; line-height: 1.55; }
.v-malo-close cite, .v-malo-close .v-around, .v-malo-close .v-around a { color: rgba(245,245,237,0.8) !important; }

/* ---------- Dinard : lecture longue, colonne étroite ---------- */
.v-dinard-head { max-width: 760px !important; padding-top: 150px !important; text-align: center; }
.v-dinard-head h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.15; margin: 0 0 22px; }
.v-dinard-lead { font-size: 1.14rem; color: var(--muted); }
.v-dinard-figure { margin: 48px auto !important; max-width: 1080px !important; }
.v-dinard-figure figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.v-dinard-body { max-width: 720px !important; padding-bottom: 90px !important; }
.v-dinard-body h2 { font-size: 1.45rem; margin: 46px 0 14px; }
.v-dinard-body p { font-size: 1.04rem; line-height: 1.8; }
.v-dinard-points { list-style: none; padding: 0; margin: 0; }
.v-dinard-points li { padding: 16px 0 16px 22px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.6; }
.v-dinard-points li::before { content: ""; position: absolute; left: 0; top: 26px; width: 10px; height: 1px; background: var(--deep); }
.v-dinard-related { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v-dinard-related a { text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.v-dinard-related img { aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }
.v-dinard-quote { margin: 54px 0; padding: 0 0 0 26px; border-left: 2px solid var(--accent); font-size: 1.18rem; font-style: italic; line-height: 1.6; }
.v-dinard-cta { background: var(--surface); padding: 36px; }
.v-dinard-cta h2 { margin-top: 0; }

/* ---------- Saint-Briac : galerie d'abord, comparaison ---------- */
/* flow-root (2026-09-29, audit Lighthouse) : la marge haute de la galerie
   « traversait » .v-briac, <main> et <body> (en-tête en position fixe, donc
   rien pour l'arrêter) — tout le corps de page se décalait de 88 px au
   chargement mobile (CLS 0,103, seul cas du site). Contenue ici : position
   visuelle de la galerie identique. */
.v-briac { display: flow-root; }
.v-briac-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 6px; margin-top: 104px; }
.v-briac-gallery > div { overflow: hidden; }
.v-briac-gallery img { height: 100%; object-fit: cover; }
.v-briac-g0 { grid-row: span 2; }
.v-briac-g3 { grid-column: span 2; }
.v-briac-intro { display: grid !important; grid-template-columns: 5fr 7fr; gap: 56px; padding: 64px 20px !important; }
.v-briac-intro h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; margin: 0; }
.v-briac-intro p { line-height: 1.75; }
.v-briac-compare { padding: 20px 20px 70px !important; }
.v-briac-compare h2 { font-size: 1.5rem; margin: 0 0 8px; }
.v-briac-compare > p { color: var(--muted); margin-bottom: 24px; }
.v-briac-compare table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.94rem; }
.v-briac-compare th, .v-briac-compare td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.v-briac-compare thead th { background: var(--deep); color: var(--deep-ink); font-weight: 600; }
.v-briac-compare thead a { color: var(--deep-ink); }
.v-briac-compare tbody th { width: 140px; color: var(--muted); font-weight: 500; }
.v-briac-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; padding: 0 20px 90px !important; }
.v-briac-foot blockquote { margin: 0; font-size: 1.15rem; font-style: italic; line-height: 1.6; }

/* ---------- Pleurtuit : bande sombre, fiche technique ---------- */
.v-pleurtuit-hero { padding: 150px 0 70px !important; }
.v-pleurtuit-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v-pleurtuit-hero h1 { color: var(--deep-ink); font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; }
.v-pleurtuit-hero .v-kicker { color: rgba(245,245,237,0.75); }
.v-pleurtuit-hero p { color: rgba(245,245,237,0.9); }
.v-pleurtuit-specs { padding: 70px 20px !important; }
.v-pleurtuit-specs dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 24px 0 36px; border-top: 1px solid var(--ink); }
.v-pleurtuit-specs dl > div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.v-pleurtuit-specs dt { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.v-pleurtuit-specs dd { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.v-pleurtuit-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.v-pleurtuit-strip img { aspect-ratio: 1; object-fit: cover; }
.v-pleurtuit-more { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 0 20px 70px !important; }
.v-pleurtuit-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; padding: 50px 20px 90px !important; border-top: 1px solid var(--line); }
.v-pleurtuit-foot blockquote { margin: 0; font-size: 1.15rem; font-style: italic; line-height: 1.6; }

/* ---------- Beaussais-sur-Mer : portrait, atelier, étapes ---------- */
.v-beaussais-hero { display: grid !important; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 150px 20px 70px !important; }
.v-beaussais-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.v-beaussais-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; margin: 0 0 18px; }
.v-beaussais-lead { font-size: 1.1rem; }
.v-beaussais-atelier { background: var(--ink); color: var(--deep-ink); padding: 70px 0 !important; }
.v-beaussais-atelier h2 { color: var(--deep-ink); margin: 0 0 26px; }
.v-beaussais-atelier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.v-beaussais-atelier figure { margin: 0; }
.v-beaussais-atelier img { aspect-ratio: 3 / 4; object-fit: cover; }
.v-beaussais-atelier figcaption { font-size: 0.8rem; margin-top: 8px; opacity: 0.8; }
.v-beaussais-steps { padding: 70px 20px !important; }
.v-beaussais-steps ol { counter-reset: st; list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.v-beaussais-steps li { counter-increment: st; padding: 22px 18px 22px 0; border-top: 1px solid var(--ink); }
.v-beaussais-steps li::before { content: counter(st, decimal-leading-zero); display: block; color: var(--accent-text, #6B6636); font-size: 0.8rem; margin-bottom: 10px; }
.v-beaussais-steps b { display: block; margin-bottom: 8px; line-height: 1.3; }
.v-beaussais-steps span { font-size: 0.88rem; color: var(--muted); }
.v-beaussais-work { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 0 20px 70px !important; }
.v-beaussais-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; padding: 50px 20px 90px !important; border-top: 1px solid var(--line); }
.v-beaussais-foot blockquote { margin: 0; font-size: 1.15rem; font-style: italic; line-height: 1.6; }

/* ---------- Lancieux : court, distances ---------- */
.v-lancieux-hero { padding: 150px 20px 40px !important; max-width: 820px !important; }
.v-lancieux-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0 0 18px; }
.v-lancieux-lead { font-size: 1.1rem; color: var(--muted); }
.v-lancieux-near { padding: 30px 20px 60px !important; }
.v-lancieux-near ol { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v-lancieux-near a { display: block; text-decoration: none; color: var(--ink); position: relative; }
.v-lancieux-near img { aspect-ratio: 1; object-fit: cover; }
.v-lancieux-km { position: absolute; top: 10px; left: 10px; background: var(--deep); color: var(--deep-ink); font-size: 0.78rem; padding: 4px 8px; }
.v-lancieux-t { display: block; margin-top: 10px; font-size: 0.9rem; }
.v-lancieux-univers { padding: 0 20px 60px !important; }
.v-lancieux-univers ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-lancieux-univers a { display: block; padding: 22px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); height: 100%; }
.v-lancieux-univers b { display: block; color: var(--deep); margin-bottom: 6px; }
.v-lancieux-univers span { font-size: 0.88rem; color: var(--muted); }
.v-lancieux-foot { padding: 40px 20px 90px !important; border-top: 1px solid var(--line); }
.v-lancieux-foot blockquote { margin: 0 0 24px; font-size: 1.12rem; font-style: italic; line-height: 1.6; max-width: 760px; }

/* ---------- Mobile : chaque page s'empile à sa manière ---------- */
@media (max-width: 860px) {
  .v-lunaire-hero-grid, .v-lunaire-room, .v-lunaire-next-grid, .v-malo-row-grid, .v-malo-row.is-flip .v-malo-row-grid, .v-malo-close .wrap,
  .v-briac-intro, .v-briac-foot, .v-pleurtuit-hero-grid, .v-pleurtuit-more, .v-pleurtuit-foot, .v-beaussais-hero, .v-beaussais-work, .v-beaussais-foot { grid-template-columns: 1fr !important; gap: 28px; }
  .v-lunaire-hero, .v-pleurtuit-hero, .v-beaussais-hero, .v-lancieux-hero, .v-dinard-head { padding-top: 110px !important; }
  .v-lunaire-facts ul { grid-template-columns: repeat(2, 1fr); }
  .v-malo-row.is-flip figure { order: 0; }
  .v-malo-inset { display: none !important; }
  .v-briac-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 140px 140px; margin-top: 88px; }
  .v-briac-g0 { grid-column: span 2; grid-row: auto; }
  .v-briac-g3 { grid-column: span 2; }
  .v-beaussais-atelier-grid, .v-pleurtuit-strip { grid-template-columns: repeat(2, 1fr); }
  .v-beaussais-steps ol { grid-template-columns: 1fr; }
  .v-lancieux-near ol { grid-template-columns: repeat(2, 1fr); }
  .v-lancieux-univers ul, .v-dinard-related { grid-template-columns: 1fr; }
  .v-briac-compare table { font-size: 0.84rem; }
  .v-briac-compare th, .v-briac-compare td { padding: 12px 10px; }
  .v-briac-compare tbody th { width: 90px; }
}

/* =====================================================================
   FAQ (2026-09-27) — registre éditorial haut de gamme : grande typo,
   filets fins, beaucoup d'air, ouverture animée. Charte, angles droits.
   ===================================================================== */
.v-faq section { padding: 0; }
.v-faq-hero { padding: 160px 20px 40px !important; max-width: 980px !important; }
.v-faq-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 22px; max-width: 16ch; }
.v-faq-lead { font-size: 1.12rem; color: var(--muted); max-width: 620px; margin: 0 0 36px; }
.v-faq-search input { width: 100%; font: inherit; font-size: 1.05rem; padding: 18px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; }
.v-faq-search input:focus { outline: none; border-bottom-color: var(--deep); }
.v-faq-search input::placeholder { color: var(--muted); }
.v-faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.v-faq-tabs button { font: inherit; font-size: 0.84rem; padding: 9px 16px; min-height: 40px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0; transition: background .25s, color .25s, border-color .25s; }
.v-faq-tabs button:hover { border-color: var(--ink); }
.v-faq-tabs button.is-active { background: var(--deep); border-color: var(--deep); color: var(--deep-ink); }
.v-faq-list { max-width: 980px !important; padding: 30px 20px 90px !important; }
.v-faq-group { margin-top: 56px; }
.v-faq-group h2 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 8px; }
.v-faq-item { border-bottom: 1px solid var(--line); }
.v-faq-item:first-of-type { border-top: 1px solid var(--ink); }
.v-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.35; color: var(--ink); }
.v-faq-item summary::-webkit-details-marker { display: none; }
.v-faq-item summary:hover span { color: var(--deep); }
.v-faq-item summary:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }
.v-faq-item summary i { position: relative; flex: none; width: 18px; height: 18px; }
.v-faq-item summary i::before, .v-faq-item summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: var(--ink); transition: transform .35s cubic-bezier(.19,1,.22,1); }
.v-faq-item summary i::after { transform: rotate(90deg); }
.v-faq-item[open] summary i::after { transform: rotate(0deg); }
.v-faq-answer { overflow: hidden; padding: 0 0 28px; max-width: 720px; color: var(--ink); line-height: 1.75; }
.v-faq-answer p { margin: 0 0 12px; }
.v-faq-answer ol { margin: 6px 0 14px; padding-left: 20px; }
.v-faq-answer li { margin-bottom: 6px; }
.v-faq-answer a { color: var(--deep); }
.v-faq-empty { margin-top: 40px; color: var(--muted); }
.v-faq-cta { background: var(--deep); color: var(--deep-ink); padding: 90px 0 !important; text-align: center; }
.v-faq-cta h2 { color: var(--deep-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 12px; }
.v-faq-cta p { opacity: .85; }
.v-faq-cta .v-around a { color: var(--deep-ink); }
@media (max-width: 700px) { .v-faq-hero { padding-top: 116px !important; } }

/* =====================================================================
   JOURNAL DE L'ATELIER + ARTICLES (2026-09-27) — magazine haut de gamme.
   ===================================================================== */
.v-journal section, .v-article section { padding: 0; }
[data-reveal] { transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
[data-reveal].is-waiting { opacity: 0; transform: translateY(24px); }
.v-journal-hero { padding: 160px 20px 50px !important; max-width: 1000px !important; }
.v-journal-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 22px; max-width: 17ch; }
.v-journal-lead { font-size: 1.14rem; color: var(--muted); max-width: 640px; }
.v-journal-feature { padding: 10px 20px 70px !important; }
.v-journal-feature-link { display: grid; grid-template-columns: 7fr 5fr; gap: 0; text-decoration: none; color: var(--ink); background: var(--surface); }
.v-journal-feature-img { overflow: hidden; aspect-ratio: 4 / 3; }
.v-journal-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.v-journal-feature-link:hover img { transform: scale(1.04); }
.v-journal-feature-text { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.v-journal-feature-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 16px; }
.v-journal-feature-text p { color: var(--muted); line-height: 1.7; }
.v-journal-grid-wrap { padding: 0 20px 80px !important; }
.v-journal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; border-top: 1px solid var(--ink); padding-top: 24px; }
.v-journal-filters button { font: inherit; font-size: 0.84rem; padding: 9px 16px; min-height: 40px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0; }
.v-journal-filters button.is-active { background: var(--deep); border-color: var(--deep); color: var(--deep-ink); }
.v-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; }
.v-journal-card a { text-decoration: none; color: var(--ink); display: block; }
.v-journal-card-img { overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 18px; }
.v-journal-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.v-journal-card a:hover img { transform: scale(1.05); }
.v-journal-card h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 10px; }
.v-journal-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.v-journal-foot { padding: 0 20px 100px !important; color: var(--muted); }

.v-article-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.v-article-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.v-article-head { max-width: 860px !important; padding: 160px 20px 40px !important; text-align: center; }
.v-article-head .v-kicker a { color: var(--muted); }
.v-article-head h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 22px; }
.v-article-lead { font-size: 1.16rem; color: var(--muted); line-height: 1.6; }
.v-article-cover { margin: 0 auto 64px !important; max-width: 1180px !important; }
.v-article-cover img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; display: block; }
.v-article-layout { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 64px; justify-content: center; padding-bottom: 70px !important; }
.v-article-toc { position: sticky; top: 120px; align-self: start; font-size: 0.86rem; }
.v-article-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.v-article-toc a { display: block; padding: 7px 0 7px 14px; color: var(--muted); text-decoration: none; line-height: 1.4; }
.v-article-toc a:hover { color: var(--deep); }
.v-article-body { font-size: 1.08rem; line-height: 1.85; color: var(--ink); }
.v-article-body > p:first-of-type::first-letter { float: left; font-size: 4.2em; line-height: 0.85; padding: 6px 12px 0 0; color: var(--deep); font-weight: 700; }
.v-article-body h2 { font-size: 1.6rem; line-height: 1.2; margin: 56px 0 16px; scroll-margin-top: 110px; }
.v-article-body h3 { font-size: 1.15rem; margin: 34px 0 10px; }
.v-article-body blockquote { margin: 40px 0; padding: 0 0 0 28px; border-left: 2px solid var(--accent); font-size: 1.28rem; font-style: italic; line-height: 1.55; }
.v-article-body figure { margin: 40px 0; }
.v-article-body figure img { width: 100%; height: auto; display: block; }
.v-article-body figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.v-article-body a { color: var(--deep); }
.v-article-body ul { padding-left: 20px; }
.v-article-related { padding: 0 20px 80px !important; }
.v-article-related h2 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-top: 1px solid var(--ink); padding-top: 22px; }
.v-article-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 20px; }
.v-article-related-grid a { text-decoration: none; color: var(--ink); font-size: 0.92rem; }
.v-article-related-grid img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; margin-bottom: 10px; }
.v-article-cta { background: var(--deep); color: var(--deep-ink); padding: 90px 0 !important; text-align: center; }
.v-article-cta h2 { color: var(--deep-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 22px; }
.v-article-cta .v-around a { color: var(--deep-ink); }
@media (max-width: 960px) {
  .v-journal-feature-link { grid-template-columns: 1fr; }
  .v-journal-grid { grid-template-columns: repeat(2, 1fr); }
  .v-article-layout { grid-template-columns: 1fr; gap: 0; }
  .v-article-toc { position: static; margin-bottom: 30px; }
}
@media (max-width: 600px) {
  .v-journal-grid { grid-template-columns: 1fr; }
  .v-journal-hero, .v-article-head { padding-top: 116px !important; }
  .v-article-body { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; } [data-reveal].is-waiting { opacity: 1; transform: none; } }

/* Horaires jour par jour (page Contact, 2026-09-27). */
.sfts-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.sfts-hours span:nth-child(odd) { color: var(--muted); }

/* ---------- Galerie « en niches » (2026-09-27, inc-niches.php) ----------
   Les photos de chaque réalisation rangées comme une bibliothèque
   asymétrique : grille de cases carrées (--cols × --rows, calculée par
   fiche), chaque niche placée par --c/--r/--w/--h, montants = fond de page,
   ombre de tablette en haut de chaque niche, une niche « objet » avec le
   nom du projet. Mobile : 2 colonnes, placement automatique « dense ». */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sfts-niches-section { padding: 24px 0 72px; }
.sfts-niches { --gap: 10px; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--gap); aspect-ratio: var(--cols) / var(--rows); padding: var(--gap); background: var(--bg); } /* montants = fond de page (Benoit, 27/09 : « en blanc comme le fond ») */
.sfts-niche { position: relative; overflow: hidden; margin: 0; background: var(--bg); border-radius: 0; grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); }
.sfts-niche::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 14px 18px -12px rgba(0,0,0,0.38), inset 0 -2px 0 rgba(0,0,0,0.06); }
.sfts-niche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(.2,.7,.2,1); } /* la photo remplit sa niche sans jamais dicter sa hauteur */
.sfts-niche[role="button"] { cursor: zoom-in; }
.sfts-niche[role="button"]:hover img, .sfts-niche[role="button"]:focus-visible img { transform: scale(1.04); }
.sfts-niche[role="button"]:focus-visible { outline: 2px solid var(--noir); outline-offset: -2px; }
.sfts-niche--info { background: var(--surface); display: flex; flex-direction: column; justify-content: safe center; padding: 28px; overflow: auto; }
.sfts-niche--info::after { box-shadow: inset 0 10px 14px -12px rgba(0,0,0,0.25); }
.sfts-niche--info .section-label { margin-bottom: 6px; }
.sfts-niche-title { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--ink); }
.sfts-niche-title { font-size: clamp(0.98rem, 1.3vw, 1.12rem); }
.sfts-niche-mat { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); font-style: italic; }
/* Fiche projet (2026-09-27) : deux rubriques courtes, titres discrets */
.sfts-niche-h { margin: 16px 0 4px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.sfts-niche-txt { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink); }
.sfts-niches.is-ready .sfts-niche { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 90ms); }
.sfts-niches.is-in .sfts-niche { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .sfts-niches { --gap: 7px; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(calc((100vw - 40px - 3 * var(--gap)) / 2), auto); grid-auto-flow: row dense; aspect-ratio: auto; }
  .sfts-niche { grid-column: span 2; grid-row: span 1; }
  .sfts-niche--P { grid-column: span 1; grid-row: span 2; }
  .sfts-niche--S { grid-column: span 1; grid-row: span 1; }
  .sfts-niche--info { order: 99; }
  .sfts-niche--info { grid-column: span 2; grid-row: auto; overflow: visible; }   /* fiche projet : pleine largeur, hauteur = son texte */
}
@media (prefers-reduced-motion: reduce) { .sfts-niche img { transition: none; } }

/* ---------- Pages ville : présentation « projet » plutôt que « page SEO » (2026-09-27) ----------
   Ligne de métiers discrète sous le titre, question d'ouverture (le problème),
   bloc « raisonnement » question → réponse → résultat → savoir-faire. */
.v-context { margin: 10px 0 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
[data-dark-zone] .v-context, .band-dark .v-context { color: var(--accent-gold); }
.v-question { font-family: 'Strawford', Arial, sans-serif; font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; margin: 18px 0 12px; }
.v-chain { padding: 8px 0 40px; }
.v-chain dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.v-chain dl > div { padding: 22px 22px 22px 0; border-right: 1px solid var(--line); }
.v-chain dl > div + div { padding-left: 22px; }
.v-chain dl > div:last-child { border-right: 0; }
.v-chain dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: 8px; }
.v-chain dd { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
.v-sf { margin-top: 18px; font-size: 0.9rem; color: var(--ink); }
.v-sf b { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
@media (max-width: 800px) {
  .v-chain dl { grid-template-columns: 1fr; }
  .v-chain dl > div, .v-chain dl > div + div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Agencement « en pratique » (2026-09-27) : ce que recouvre le mot, avec les vrais chiffres */
.agencement-pratique { padding: 8px 0 64px; }
.agencement-pratique h2 { margin-bottom: 6px; }
.agencement-pratique-sub { color: var(--muted); margin: 0 0 22px; }
.agencement-pratique ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.agencement-pratique li { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.agencement-pratique li b { font-weight: 600; color: var(--ink); }
.agencement-pratique li span { color: var(--muted); font-size: 0.9rem; text-align: right; }
@media (max-width: 700px) { .agencement-pratique li { flex-direction: column; gap: 2px; } .agencement-pratique li span { text-align: left; } }

/* Grilles 2 colonnes (2026-09-27) : une colonne ne doit jamais prendre la largeur de
   son plus long élément (adresse, e-mail, champ de formulaire) — sinon la page
   déborde sur mobile (/contact/ : 413 px pour un écran de 390). */
.two-col > * { min-width: 0; }
.info-list, .info-list a { overflow-wrap: anywhere; }

/* Boutons d'action (CTA) — angles carrés partout (2026-09-27, Benoit : « vérifie que les
   boutons CTA soient bien carrés, non ronds » ; charte MT Univers). La base .btn était
   en pilule (999px) et seules certaines pages la corrigeaient au cas par cas. */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-sharp, .nav-cta,
.sfts-sticky-cta a, .sfts-cookie-ok, button[type="submit"], input[type="submit"],
body[data-theme="atelier"] .btn-primary, body[data-theme="atelier"] .btn-secondary,
body[data-theme="atelier"] .nav-cta, .hero--lovable .btn { border-radius: 0 !important; }

/* Police de la charte partout (2026-09-27, Benoit : « tout mettre avec la bonne police »).
   Les navigateurs ne transmettent pas la police de la page aux champs et boutons de
   formulaire, et plusieurs composants partagés imposent Arial/Georgia par défaut
   (pour les autres sites clients) : ramenés ici en Strawford pour MT Univers, sans
   toucher aux composants. Arial = repli prévu par la charte (p. 18). Seule exception
   volontaire : la 2e ligne du titre de l'accueil (Instrument Serif), reprise de la
   maquette validée par Vincent. */
button, input, textarea, select, optgroup,
body .sfts-proof-card-who b,
.sfts-process-experience, .sfts-process-experience *,
.sfts-video-experience, .sfts-video-experience *,
.sfts-hcx-dot, .sfts-proof-arrow,
.sfts-photo-grid-lightbox button, .sfts-gallery-lightbox button, .sfts-lightbox button { font-family: 'Strawford', Arial, sans-serif; }

/* Titre visible des fiches réalisation (2026-09-27) : catégorie, nom du projet, lieu */
.sfts-rt-kicker { margin: 8px 0 14px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-gold); font-weight: 600; }
.sfts-rt-title { margin: 0; color: var(--deep-ink); font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; font-weight: 900; }
.sfts-rt-place { margin: 12px 0 0; color: rgba(245,245,237,0.8); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 300; font-style: italic; font-synthesis: style; }

/* Page Savoir-faire (refonte 2026-09-28) */
.sf-principe { position: relative; overflow: hidden; }
.sf-title-xl { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; max-width: 24ch; margin: 10px 0 40px; }
.sf-principe-main p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; margin: 0 0 18px; }
.sf-principe-aside p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; margin: 0 0 16px; }
.sf-principe-aside strong { color: var(--ink); }
.sf-matieres-cols { align-items: center; }
.sf-matieres-cols img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sf-kicker { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin: 28px 0 8px; }
.sf-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.sf-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sf-details-grid figure { margin: 0; }
.sf-details-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sf-details-grid figcaption { margin-top: 14px; color: var(--muted); }
.sf-details-grid figcaption strong { color: var(--ink); display: block; }
@media (max-width: 700px) { .sf-details-grid { grid-template-columns: 1fr; } }
.sf-preuve { padding: 120px 0; }
.sf-quote { margin: 0 auto; max-width: 760px; text-align: center; }
.sf-quote + .sf-quote { margin-top: 96px; }
.sf-quote blockquote { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.4; font-weight: 300; color: var(--deep-2); }
.sf-quote figcaption { margin-top: 18px; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 700px) { .sf-preuve { padding: 72px 0; } .sf-quote + .sf-quote { margin-top: 64px; } }

/* Territoire (2026-09-28) : paragraphe et villes démarrent au même niveau */
.territoire-cols { margin-top: 16px; }
.territoire-cols p { margin: 0; }
.territoire-cols .territoire-list { margin-top: -0.2em; } /* compense l’interligne 2 de la liste */
h3.signature-feature-name { font-size: 24px; line-height: 1.65; } /* 2026-09-28 : même rendu que l’ancien <h2> du nom de projet */
.signature-feature .section-head { margin-bottom: 32px; }
.signature-feature-title { text-align: left; } /* 2026-09-30 (Vincent, point 4.2) : était centré */
/* 2026-09-30 — corrections de Vincent */
.signature-feature--title-only { padding-bottom: 0; }
.signature-feature--title-only .section-head { margin-bottom: 0; }
.signature-feature-video { padding: 32px 0 0; }
.zone-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.zone-trio .home-bento-item { aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .zone-trio { grid-template-columns: 1fr; } }
.bio-text p { margin: 0 0 14px; }
.bio-text .bio-signature { margin-top: 24px; color: var(--ink); font-weight: 700; }
/* Point 4.4 : les deux carrés blancs « Agencement » et « Menuiserie » ont exactement les mêmes dimensions. */
.sfts-catalogue-card { width: 250px; box-sizing: border-box; }

/* Accroche d'une fiche réalisation (2026-09-30, Vincent) */
.sfts-real-accroche { font-size: 1.2rem; line-height: 1.55; font-weight: 300; font-style: italic; font-synthesis: style; color: var(--deep-2); margin: 0 0 22px; }

/* Fil d'Ariane des pages réalisations (2026-10-01) — texte sombre par défaut
   (fond clair) ; clair sur les héros sombres (fiche réalisation, hero photo
   de /nos-realisations/, posé sous la barre de menu). */
.sfts-breadcrumb { font-size: 0.85rem; margin: 0 0 18px; }
.sfts-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sfts-breadcrumb li { color: var(--ink); opacity: 0.75; }
.sfts-breadcrumb li + li::before { content: "\203A"; margin-right: 6px; opacity: 0.6; }
.sfts-breadcrumb a { color: inherit; text-decoration: none; }
.sfts-breadcrumb a:hover, .sfts-breadcrumb a:focus-visible { color: var(--accent-text); text-decoration: underline; }
.sfts-breadcrumb [aria-current="page"] { opacity: 1; font-weight: 600; }
.hero .sfts-breadcrumb li { color: rgba(240,237,224,0.85); opacity: 1; }
.hero .sfts-breadcrumb a:hover, .hero .sfts-breadcrumb a:focus-visible { color: var(--accent-gold); }
.hero .sfts-breadcrumb [aria-current="page"] { color: var(--accent-gold); }
.hero--immersive > .sfts-breadcrumb { position: absolute; top: 96px; left: 0; right: 0; z-index: 3; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.sfts-breadcrumb { margin-top: 44px; }
.hero--immersive > .sfts-breadcrumb { margin-top: 0; }

/* Sections « texte + photo » sous la galerie des réalisations (2026-10-05, SFTS)
   — section 1 : texte à gauche / photo à droite ; section 2 : inversée.
   Même largeur que la galerie (.wrap). Une colonne sur mobile, photo en premier
   pour les deux (ordre du HTML de la section 2, et order:-1 pour la section 1). */
.sfts-real-split { padding-top: 0; }
.sfts-real-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sfts-real-split-grid--seul { grid-template-columns: 1fr; max-width: 760px; }
.sfts-real-split-text h2 { margin: 0 0 18px; }
.sfts-real-split-body { color: var(--ink); font-size: 1.02rem; line-height: 1.75; }
.sfts-real-split-body p { margin: 0 0 14px; }
.sfts-real-split-body p:last-child { margin-bottom: 0; }
.sfts-real-split-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 800px) {
  .sfts-real-split-grid { grid-template-columns: 1fr; gap: 24px; }
  .sfts-real-split--texte-photo .sfts-real-split-photo { order: -1; }
}