/* ==========================================================================
   Plateforme Bâtiment — direction artistique — ROUND 24 (bleu confiance +
   orange action)
   ---------------------------------------------------------------------------
   25/08/2026. Raphaël a précisé l'objectif réel du site : pas un site visité
   par curiosité, des LANDING PAGES pour du trafic publicitaire payant
   (Facebook/Instagram/TikTok d'abord, Google Ads ensuite) — un inconnu qui
   clique sur une pub et doit se sentir en confiance en quelques secondes,
   sans avoir déjà entendu parler de l'entreprise. Verdict sur le round 22 :
   violet électrique + corail "ne donnent pas confiance du tout" — juste,
   ce registre lit "app tech/lifestyle", pas "entreprise sérieuse qui va
   s'occuper de travaux chez vous". Remplacé par la combinaison la plus
   éprouvée en génération de leads BTP/services à domicile sous trafic
   publicitaire froid : un bleu confiance en couleur principale, un orange
   vif réservé au bouton d'action — deux couleurs complémentaires, donc le
   CTA ne peut pas se fondre dans le reste de la page. Fond clair, Space
   Grotesk, coins arrondis, ombres, boutons pilule (rounds 20-22) conservés
   — ce n'était pas la géométrie qui posait problème, seule la couleur.
   `.section--ink` passe du dégradé violet→corail à un dégradé bleu marine
   → bleu vif : le moment de contraste fort reste, dans le nouveau registre.
   ========================================================================== */

:root {
  --ink: #14151B;
  --ink-soft: #33353F;
  --paper: #FAFAFC;
  /* Round 29 — déclinaison orange : ce token servait de fond neutre
     gris-lavande pour toutes les sections/surfaces secondaires du site
     (bandes alternées, footer, badges...). Retinté en camaïeu orange très
     clair (`--orange-tint`) pour que la couleur de marque se ressente
     partout, pas seulement sur les CTA. */
  --paper-deep: #FBEFE3;
  --muted: #6B6E7C;
  --line: rgba(20, 21, 27, .10);
  --line-strong: rgba(20, 21, 27, .20);
  --on-ink-line: rgba(255, 255, 255, .16);
  --on-ink-muted: #C7C9D6;
  /* Round 30 — "enlève-moi ce bleu on reste dans la déclinaison des
     orange" : le bleu confiance du round 24 est retiré, --accent/
     --accent-deep repointés vers un terracotta sourd — même famille de
     teinte que --accent-bright, mais désaturé/assombri pour rester un ton
     "secondaire discret" (eyebrows, liens, icônes, chips) distinct du
     orange vif réservé aux CTA. Toutes les règles qui utilisaient
     var(--accent)/var(--accent-deep) sont converties automatiquement,
     aucune autre modification nécessaire. Contraste vérifié : #9A5A32 sur
     blanc ≈ 5.4:1, #6B3A1C sur blanc ≈ 9.3:1 — les deux passent AA texte
     courant. */
  --accent: #9A5A32;
  --accent-deep: #6B3A1C;
  /* Orange action — réservé aux CTA (boutons pilule pleins, bandeaux de
     conversion). Complémentaire du bleu : contraste maximal, l'œil ne
     peut pas le rater sur une page par ailleurs bleu/blanc/gris. Adouci
     lui aussi (moins "cône de chantier fluo"), reste assez vif pour un
     bouton d'action. */
  --accent-bright: #E8630F;
  /* Plus sombre que la simple version "hover" d'un CTA : sert de FOND réel
     partout où du texte blanc s'y superpose (--accent-bright lui-même ne
     tient qu'environ 2.9:1 en texte blanc, sous le seuil AA 4.5:1 — même
     constat que pour le violet/corail du round 22, cette fois vérifié
     avant livraison plutôt qu'après). */
  --accent-bright-deep: #B84300;
  /* Round 29 — déclinaison complète de l'orange, du plus clair au plus
     foncé ("utilise les tons clairs au foncé"), même teinte que
     --accent-bright/--accent-bright-deep déjà auditées WCAG — construite
     autour d'elles plutôt qu'à côté, pour rester une seule famille de
     couleur cohérente. Usage : surfaces/badges/icônes décoratives, jamais
     les filets structurels (`--line`) ni le texte courant, pour ne pas
     nuire à la lisibilité. */
  --orange-tint: #FBEFE3;
  --orange-soft: #F5D9B8;
  --orange-mid: #F0A050;
  --orange-shade: #7A2C00;
  --white: #FFFFFF;
  /* Round 30bis — le premier essai (3 points, dont un #2E1408 quasi noir
     inventé pour l'occasion) retombait dans le "noir/boueux" qu'on vient
     d'éliminer partout ailleurs ("certains oranges sont trop foncés et
     mal dégradés"). Réduit à 2 points, tous deux repris tels quels de
     l'échelle déjà posée (--orange-shade / --accent-bright-deep) —
     entièrement saturés, jamais désaturés vers le brun, contraste texte
     blanc sûr sur toute la longueur (9.6:1 → 5.5:1). */
  --gradient-electric: linear-gradient(135deg, #7A2C00 0%, #B84300 100%);

  --radius-photo: 28px;
  --radius-card: 20px;
  --radius-ui: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(20, 21, 27, .08);
  --shadow-md: 0 14px 34px rgba(20, 21, 27, .16);
  --shadow-accent: 0 12px 32px rgba(232, 99, 15, .34);

  --serif: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Space Grotesk", "Inter", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip en filet de sécurité — empêche tout élément qui
   déborderait par erreur (texte long imprévu, futur composant) de créer
   un scroll horizontal sur mobile. `clip` plutôt que `hidden` : ne casse
   pas position:sticky (déjà utilisé par .site-header) ni les futurs
   position:fixed, contrairement à overflow:hidden sur html/body. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
[hidden] { display: none !important; }

button, .btn, .nav-toggle { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.section--ink :focus-visible, .hero-panel :focus-visible, .page-hero.on-ink :focus-visible, .cta-band :focus-visible {
  outline-color: var(--accent-bright);
}

body {
  font-family: var(--sans);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* Détail éditorial discret : la sélection de texte reprend la couleur de
   marque plutôt que le bleu système par défaut du navigateur. */
::selection { background: var(--accent); color: var(--white); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); }
h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; }
p { margin: 0 0 1em; color: var(--muted); text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.section { padding: 116px 0; }
.section--tight { padding: 64px 0; }
.section--deep { background: var(--paper-deep); }
/* .section--ink devient le moment "vif et coloré" assumé de chaque page :
   dégradé électrique plutôt que la variable --ink. */
.section--ink { background: var(--gradient-electric); color: var(--white); position: relative; }
.section--ink p { color: rgba(255,255,255,.82); }
.section--ink h2, .section--ink h3, .section--ink h1 { color: var(--white); }
.section--ink strong { color: var(--white); }

@media (max-width: 640px) {
  .container { padding: 0 22px; }
  .section { padding: 72px 0; }
  .section--tight { padding: 44px 0; }
  /* Même bug (voir plus bas), cas concret observé sur le bandeau CTA final :
     56px de padding de chaque côté ne laisse quasi aucune place au contenu
     sur un écran de 375px de large. */
  .cta-band { padding: 56px 24px; }
}

/* Grain — appliqué aux fonds sombres uniquement (voir --grain dans :root).
   `mix-blend-mode: overlay` + opacité très faible : perceptible seulement
   de près, jamais un "bruit" qui distrait du contenu. */
/* Round 14 (24/08/2026) — grain réduit et resserré. Un signifiant "texture
   premium" copié partout en 2022-2024 (branding, SaaS, agences) devient un
   cliché plutôt qu'un différenciateur dès qu'il est visible de loin ou
   partout. Opacité divisée par deux, et retiré du petit panneau .quick-form
   (une simple boîte de formulaire n'a pas besoin d'ornement) : ne subsiste
   que sur les grands aplats sombres, à peine perceptible de près. */
.section--ink::before, .hero-panel::before, .page-hero.on-ink::before,
.cta-band::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  background-size: 180px 180px; opacity: .025; mix-blend-mode: overlay;
  pointer-events: none;
}
/* Sans photo derrière (fond uni encre) : le pseudo-élément ::before peint
   naturellement sous les autres enfants, pas besoin de z-index explicite. */
.section--ink::before, .cta-band::before { z-index: 0; }
.section--ink > * { position: relative; z-index: 1; }
/* Avec photo derrière (page-hero.on-ink, hero-panel) : la pile existante est
   photo(0) → scrim(1) → contenu(2) ; le grain doit passer au-dessus de la
   photo mais rester sous le scrim et le texte. */
.hero-panel::before, .page-hero.on-ink::before { z-index: 1; }

/* Eyebrow / micro labels ----------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; }
.section--ink .eyebrow { color: var(--white); }
.section--ink .eyebrow::before { background: var(--white); }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }

/* Round 14 (24/08/2026) — .section-head redessiné. C'était le seul endroit
   du site resté au registre "eyebrow centré + h2 centré + paragraphe
   centré" que le round 13 avait identifié comme le vrai problème de
   l'accueil et corrigé UNIQUEMENT là-bas — les 30+ pages qui utilisent
   .section-head (catégories, guides, comment-ça-marche, FAQ...) gardaient
   ce même gabarit générique, jamais retouché depuis. Même principe que
   .chapter-head (filet fin au-dessus, typographie nettement plus grande,
   asymétrique par défaut) mais sans les données de numérotation de chapitre
   — pas de refonte de composant, une évolution du composant existant. */
.section-head {
  max-width: 640px; margin-bottom: 60px; padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.section-head h2 { margin-bottom: .4em; font-size: clamp(2rem, 4.2vw, 3rem); }
.section-head.center {
  margin-left: auto; margin-right: auto; text-align: center; max-width: 700px;
}
.section--ink .section-head { border-top-color: var(--on-ink-line); }

/* Buttons — rectangulaires, filet fin, jamais de pilule ni d'ombre ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; font-family: var(--sans); font-weight: 600;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  background: transparent; color: var(--ink); box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Retour tactile sans jamais utiliser d'ombre portée (principe du design
   system) : un léger tassement au clic suffit à donner du répondant. */
.btn:active { transform: scale(.97) translateY(0); box-shadow: var(--shadow-sm); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
/* Audit contraste WCAG AA : le texte blanc sur --accent-bright (corail vif)
   ne tient qu'environ 3.1:1, sous le seuil 4.5:1 texte courant (même
   constat historique que sur l'ancien orange --accent-bright #FF5A1F).
   --accent-bright-deep sert de fond réel partout où du texte s'y
   superpose ; --accent-bright reste pour les usages non-textuels (icônes,
   filets — seuil UI 3:1 déjà tenu). */
.btn--accent { background: var(--accent-bright-deep); color: #fff; border-color: var(--accent-bright-deep); box-shadow: var(--shadow-accent); }
/* Round 30bis — le hover utilisait --accent-deep, qui pointait vers le
   bleu jusqu'au round 30 puis vers un terracotta volontairement désaturé
   (ton "discret" pour eyebrows/liens) : les deux rendaient le survol du
   bouton orange terne/boueux. --orange-shade est pleinement saturé, donc
   se lit comme un orange profond plutôt qu'un brun sale. */
.btn--accent:hover { background: var(--orange-shade); border-color: var(--orange-shade); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: rgba(255,255,255,.45); color: var(--paper); box-shadow: none; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: var(--shadow-md); }
.btn--small { padding: 12px 20px; font-size: .72rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }
/* Bug réel trouvé en audit mobile (round 33) : .btn est en white-space:nowrap
   sans limite de largeur — un CTA au texte un peu long ("Devenir professionnel
   partenaire", "Demander un devis pour ce projet") force le bouton plus large
   que l'écran et fait déborder toute la page horizontalement. Sur mobile
   uniquement, on autorise le retour à la ligne plutôt que l'étroitesse stricte
   d'un seul mot par ligne n'a jamais de sens ici (boutons pleine largeur ou
   dans une carte, jamais côte à côte de façon serrée). Placé APRÈS la règle
   de base .btn (même spécificité, l'ordre source tranche) — une première
   tentative plus haut dans le fichier perdait silencieusement face à elle. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 500; font-size: .76rem; letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.link-arrow:hover { gap: 11px; color: var(--accent); border-color: var(--accent); }
.link-arrow::after { content: "→"; }
.section--ink .link-arrow { color: var(--white); border-color: rgba(255,255,255,.4); }
.section--ink .link-arrow:hover { color: var(--white); border-color: var(--white); }

/* Header ---------------------------------------------------------------------*/
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.98); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--sans); font-weight: 600; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.logo-mark { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.logo-mark svg { width: 100%; height: 100%; }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a { position: relative; font-weight: 500; font-size: .89rem; color: var(--ink-soft); padding: 7px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  /* z-index/box-shadow ajoutés (round 33) — le panneau était opaque mais
     sans aucune séparation visuelle (pas d'ombre) ni de fond assombri
     derrière lui : sur une page avec une photo hero juste en dessous, le
     menu ouvert avait l'air de s'arrêter en plein milieu de la page plutôt
     que d'être un panneau clairement au-dessus du contenu. */
  .main-nav { position: fixed; top: 82px; left: 0; right: 0; z-index: 60; background: var(--white); flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 32px 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); display: none; max-height: calc(100vh - 82px); overflow-y: auto; }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); background: transparent; font-size: 1.05rem; cursor: pointer; color: var(--ink); }
  .header-cta .btn span.long { display: none; }
  .nav-item-mega { width: 100%; }
  .mega-menu { display: none !important; }
  /* Fond assombri derrière le menu mobile ouvert, injecté par initNav()
     (main.js) — pas de nouveau balisage à répéter sur les 41 pages.
     z-index 59 : juste sous .main-nav (60) et .site-header (50 — donc
     au-dessus du header aussi, pour couvrir toute la zone sous le panneau). */
  .nav-backdrop { position: fixed; inset: 0; top: 82px; z-index: 59; background: rgba(23, 17, 12, .32); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .nav-backdrop { transition: none; } }

/* Méga-menu Catégories — au survol sur desktop uniquement --------------------*/
.nav-item-mega { position: relative; display: flex; align-items: center; }
.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  width: 620px; max-width: 80vw; background: var(--white); border: 1px solid var(--line-strong);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md); border-top: 4px solid var(--accent);
  padding: 40px 26px 18px; margin-top: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  font-size: .87rem; font-weight: 500; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mega-menu a:hover { color: var(--accent); }
.mega-menu a::after { display: none; }
.mega-icon { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }
.mega-menu-footer { grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-strong); }

/* Signature graphique — motif de plan technique (remplace la photographie) -- */
.blueprint-motif { color: currentColor; opacity: .9; }
.blueprint-motif line, .blueprint-motif polyline, .blueprint-motif circle, .blueprint-motif path { vector-effect: non-scaling-stroke; }

/* Hero — accueil ---------------------------------------------------------------
   Composition immersive plein cadre : une seule photo plein cadre porte
   la page. Round 27, "les overlays sont encore moche" (3e retour sur le
   voile après deux recolorages) : le problème n'était pas la teinte mais
   la technique elle-même — un aplat sur toute la photo la ternit quoi
   qu'il arrive. Remplacé par une carte SOLIDE contenant le texte, posée
   sur la photo — le reste de l'image reste pleinement vif et coloré. */
.hero { position: relative; overflow: hidden; min-height: 560px; height: min(94vh, 900px); display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; display: block; }
.hero-inner {
  position: relative; z-index: 2; background: var(--white); color: var(--ink);
  border-top: 4px solid var(--accent-bright-deep);
  max-width: 460px; width: calc(100% - 64px);
  margin: 0 0 48px max(32px, calc((100vw - 1240px) / 2 + 32px));
  padding: 32px 34px 0; border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero .kicker { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; color: var(--accent-bright-deep); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.hero .kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent-bright-deep); }
.hero h1 { color: var(--ink); margin-bottom: 16px; font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -0.015em; }
.hero p.lead { font-size: 1rem; color: var(--muted); margin-bottom: 26px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-actions--center { justify-content: center; }

/* Imbriquée dans la carte .hero-inner (round 27) — plus une bande
   translucide séparée sur la photo, un simple filet interne à la carte. */
.hero-stats-float { position: relative; z-index: 2; border-top: 1px solid var(--line-strong); margin: 0 -34px; padding: 20px 34px; }
.hero-stats-float .stat-row { grid-template-columns: repeat(3, minmax(0,150px)); gap: 14px 24px; }
.hero-stats-float .stat-row div { border-top: none; padding-top: 0; }

.hero-panel { background: var(--paper-deep); color: var(--ink); position: relative; padding: 52px 44px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: var(--radius-photo); }
.hero-panel-motif { position: absolute; inset: 0; opacity: .16; }
.hero-panel-motif svg { width: 100%; height: 100%; }
.hero-panel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Carte solide et claire plutôt qu'un voile sombre sur toute la photo
   (round 27, reclaircie round 28 — "je veux pas de noir, on va faire clair"). */
.hero-panel-top { position: relative; z-index: 2; background: var(--white); border-top: 4px solid var(--accent-bright-deep); padding: 26px 30px; border-radius: var(--radius-card); max-width: 420px; box-shadow: var(--shadow-md); }
.hero-panel-top span { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--accent-bright-deep); }
.hero-panel-top p { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.3; margin: 16px 0 0; }
.hero-panel .stat-row { position: relative; z-index: 2; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; position: relative; }
.stat-row div { min-width: 0; border-top: 1px solid var(--line-strong); padding-top: 20px; }
.stat-row div strong { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 500; color: var(--ink); line-height: 1; margin-bottom: 8px; }
.stat-row div span { font-size: .74rem; letter-spacing: .04em; color: var(--muted); }

@media (max-width: 980px) {
  .hero { height: auto; min-height: 560px; padding: 32px 0; }
  .hero-inner { margin: 0 32px; max-width: none; width: calc(100% - 64px); padding: 32px 28px 0; }
  .hero-stats-float { margin: 0 -28px; padding: 16px 28px; }
  .hero-stats-float .stat-row { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
  .hero-panel { margin-top: 48px; padding: 44px 32px; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hero p.lead { font-size: .95rem; margin-bottom: 24px; }
  .hero-stats-float .stat-row div strong { font-size: 1.3rem; }
}

/* Trust bar — filets verticaux, pas de pilules coche --------------------------*/
.trust-bar { background: var(--paper-deep); border-bottom: 1px solid var(--line); padding: 24px 0; }
.trust-bar .container { display: flex; flex-wrap: wrap; gap: 30px 40px; }
.trust-item {
  font-size: .84rem; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 10px;
}
/* Icône (check/bouclier/œil/horloge, injectée par main.js via data-trust-icon)
   remplace l'ancienne puce pleine — même esprit dessin technique que le
   reste du site, plus lisible qu'un point générique. */
.trust-item svg { width: 17px; height: 17px; color: var(--accent-bright); flex-shrink: 0; }
/* Repli si l'attribut data-trust-icon est absent (JS non exécuté, ou usage
   futur du composant ailleurs) : on garde la puce d'origine pour ne jamais
   laisser un item sans repère visuel. */
.trust-item:not([data-trust-icon])::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; }

/* Grille métiers — tuiles filet fin, sans photo -------------------------------*/
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }

.cat-tile {
  display: flex; flex-direction: column; background: var(--paper); padding: 34px 30px 34px 28px;
  min-height: 240px; border-left: 2px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cat-tile:hover { background: var(--paper-deep); border-left-color: var(--accent); }
.cat-tile-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.cat-tile-icon { width: 34px; height: 34px; color: var(--accent); transition: transform .25s var(--ease); }
.cat-tile-icon svg { width: 100%; height: 100%; }
.cat-tile:hover .cat-tile-icon { transform: translateY(-2px); }
.cat-tile-num { font-family: var(--serif); font-size: .82rem; color: var(--muted); }
.cat-tile h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; margin-bottom: 9px; }
.cat-tile p { font-size: .87rem; margin-bottom: 18px; flex-grow: 1; }
.cat-tile .link-arrow { margin-top: auto; }

/* Steps / process — numéros fantômes, filets horizontaux, pas de carte --------*/
.process-list { border-top: 1px solid var(--line); }
.process-item { display: grid; grid-template-columns: 96px 1fr; gap: 32px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.process-item .process-num { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; color: var(--accent); line-height: 1; }
.process-item h3 { font-size: 1.12rem; margin-bottom: 8px; }
.process-item p { margin: 0; max-width: 560px; }
@media (max-width: 640px) { .process-item { grid-template-columns: 56px 1fr; gap: 20px; } .process-item .process-num { font-size: 1.9rem; } }

/* Trust points — variante liste numérotée (utilisée sur pages catégorie) ------*/
.trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 800px) { .trust-points { grid-template-columns: minmax(0, 1fr); } }
.trust-point {
  padding: 30px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; transition: background .2s var(--ease);
}
/* Filet d'accent en haut de la tuile au survol — un ::before positionné
   plutôt qu'une vraie bordure, pour ne pas perturber la grille existante. */
.trust-point::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.trust-point:hover { background: var(--paper-deep); }
.trust-point:hover::before { transform: scaleX(1); }
.trust-point .num { font-family: var(--mono); font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 500; color: var(--accent); margin-bottom: 18px; }
.trust-point h3 { margin-bottom: 8px; font-size: 1.1rem; }
.trust-point p { font-size: .9rem; margin: 0; }

/* Engagements (section ink) — liste à filets clairs sur fond sombre -----------*/
.claim {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.36; color: var(--white);
  max-width: 520px;
}
.claim-mark { width: 30px; height: 1px; background: var(--accent); margin-bottom: 26px; }

.commit-list { display: flex; flex-direction: column; }
.commit-item { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--on-ink-line); }
.commit-item:last-child { border-bottom: 1px solid var(--on-ink-line); }
.commit-item .n { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; color: var(--white); }
.commit-item h3 { color: var(--white); margin-bottom: 6px; font-size: 1.12rem; }
.commit-item p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.82); }

/* CTA band ----------------------------------------------------------------------*/
.cta-band {
  background: var(--gradient-electric); color: var(--paper); padding: 76px 56px; text-align: center;
  position: relative; overflow: hidden; border-top: 2px solid var(--accent-bright);
}
.cta-band-motif { position: absolute; inset: 0; opacity: .1; }
.cta-band-motif svg { width: 100%; height: 100%; }
.cta-band > *:not(.cta-band-motif) { position: relative; }
.cta-band .eyebrow { color: var(--white); }
.cta-band .eyebrow::before { background: var(--white); }
.cta-band h2 { margin-bottom: 16px; color: var(--paper); }
.cta-band p { color: var(--on-ink-muted); max-width: 520px; margin: 0 auto 26px; }

/* Forms ---------------------------------------------------------------------------*/
.form-card { background: var(--paper); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent-bright); border-radius: var(--radius-card); padding: 44px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-card { padding: 30px 24px; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.field input, .field select, .field textarea {
  padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-ui);
  font-size: .95rem; font-family: var(--sans); background: var(--white); color: var(--ink);
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138, 58, 30, .16); }
.field textarea { resize: vertical; min-height: 100px; }
.field small.hint { color: var(--muted); font-size: .78rem; }
.form-note { font-size: .78rem; color: var(--muted); margin-top: 16px; }

.field--error input, .field--error select, .field--error textarea { border-color: #A02E1E; }
.field-error { font-size: .78rem; color: #A02E1E; }

.field-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.field-consent input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.field-consent label { font-size: .82rem; font-weight: 400; color: var(--muted); line-height: 1.5; }

.draft-note { display: flex; align-items: center; gap: 10px; background: var(--paper-deep); border-left: 2px solid var(--accent); padding: 12px 16px; font-size: .82rem; color: var(--ink); margin-bottom: 24px; }

/* Formulaire multi-étapes ------------------------------------------------------ */
.form-progress { height: 2px; background: var(--line); margin-bottom: 8px; }
.form-progress-bar { height: 100%; background: var(--accent); width: 25%; transition: width .35s ease; }
.form-step-label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; }
.form-step { display: none; }
.form-step.is-active { display: block; animation: step-in .3s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.form-step h3.step-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-bottom: 22px; }
.form-step-actions { display: flex; gap: 12px; margin-top: 8px; }
.form-step-actions .btn { flex: 1; }
[data-action="prev"] { background: transparent; }

/* Formulaire rapide embarqué (landing catégorie) — carte claire avec filet
   orange, plus de fond noir (round 28, "je veux pas de noir, on va faire clair"). */
.quick-form { background: var(--white); color: var(--ink); padding: 40px 34px; position: relative; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-md); border-top: 4px solid var(--accent-bright-deep); }
.quick-form .eyebrow { color: var(--accent-bright-deep); }
.quick-form .eyebrow::before { background: var(--accent-bright-deep); }
.quick-form h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
.quick-form > p { color: var(--muted); font-size: .89rem; margin-bottom: 26px; }
.quick-form .field label { color: var(--ink); }
.quick-form .field input { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
.quick-form .field input::placeholder { color: var(--muted); }
.quick-form .field input:focus { border-color: var(--accent-bright-deep); box-shadow: 0 0 0 3px rgba(184, 67, 0, .16); }
.quick-form .field-consent label { color: var(--muted); }
.quick-form .form-note { color: var(--muted); }

/* Bannière visiteur récurrent ----------------------------------------------------- */
.returning-banner { background: var(--paper-deep); border: 1px solid var(--line-strong); padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .89rem; color: var(--ink); }
.returning-banner a { font-weight: 600; border-bottom: 1px solid var(--accent); }
.returning-banner button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; }

/* Callouts -----------------------------------------------------------------------*/
.callout { background: var(--paper-deep); padding: 20px 24px; font-size: .89rem; color: var(--ink); margin: 28px 0; border-left: 2px solid var(--accent); }
.callout strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.callout--muted { background: transparent; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); color: var(--muted); font-size: .85rem; }

/* Scale strip ---------------------------------------------------------------------*/
.scale { display: flex; border: 1px solid var(--line); }
.scale div { flex: 1; padding: 24px 18px; font-weight: 600; font-size: .85rem; text-align: center; border-right: 1px solid var(--line); }
.scale div:last-child { border-right: none; }
.scale div span { display: block; font-weight: 400; font-size: .77rem; margin-top: 7px; color: var(--muted); }
.scale .lvl1 { background: transparent; }
.scale .lvl2 { background: var(--paper-deep); }
.scale .lvl3 { background: var(--accent-bright-deep); color: var(--white); }
.scale .lvl3 span { color: rgba(255,255,255,.82); }
@media (max-width: 640px) { .scale { flex-direction: column; } .scale div { border-right: none; border-bottom: 1px solid var(--line); } .scale div:last-child { border-bottom: none; } }

/* Footer — clair, pas noir (round 26) : un pied de page sombre sur un site
   par ailleurs clair/bleu lisait comme une fin abrupte plutôt qu'une
   fermeture sobre. Fond gris-clair, texte discret, logo en bleu marque. */
.site-footer { background: var(--paper-deep); color: var(--muted); padding: 76px 0 30px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid .logo { color: var(--ink); margin-bottom: 16px; }
.footer-grid .logo-mark { color: var(--accent); }
.footer-grid h4 { color: var(--ink); font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-grid a { font-size: .89rem; color: var(--muted); transition: color .15s ease; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line-strong); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--muted); }

.breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: 26px; }
.breadcrumb a { color: var(--ink); font-weight: 500; }
.breadcrumb a:hover { color: var(--accent); }

/* Page hero (pages secondaires + landing catégorie) — fond sombre + motif ---------*/
.page-hero { padding: 68px 0 56px; border-bottom: 1px solid var(--line); }
/* Round 15 — la version claire (hubs, guides, comment-ca-marche) était restée sur
   l'échelle de titre par défaut pendant que la version on-ink (catégories) recevait
   le traitement typographique agrandi du round 13 : uniformisée ici, cascade
   automatique sans toucher aux pages. */
.page-hero:not(.on-ink) h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); max-width: 860px; }
/* Round 27 — même correctif que le hero d'accueil : carte solide plutôt
   qu'un voile sur toute la photo (ces pages sont les landing pages
   publicitaires, c'est là que l'effet "photo ternie" comptait le plus). */
.page-hero.on-ink { background: var(--paper-deep); color: var(--ink); border-bottom: none; position: relative; overflow: hidden; padding: 56px 0; min-height: 78vh; display: flex; align-items: flex-end; }
.page-hero.on-ink .page-hero-inner {
  position: relative; z-index: 2; background: var(--white);
  border-top: 4px solid var(--accent-bright-deep);
  max-width: 480px; width: calc(100% - 64px);
  margin: 0 0 0 max(32px, calc((100vw - 1240px) / 2 + 32px));
  padding: 32px 36px; border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.page-hero.on-ink .breadcrumb { color: var(--muted); }
.page-hero.on-ink .breadcrumb a { color: var(--ink); }
.page-hero.on-ink h1 { color: var(--ink); font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.page-hero.on-ink p { color: var(--muted); }
.page-hero.on-ink strong { color: var(--ink); }
.page-hero-motif { position: absolute; top: 0; right: 0; width: 46%; height: 100%; opacity: .14; pointer-events: none; }
.page-hero-motif svg { width: 100%; height: 100%; }
.page-hero .hero-actions { margin-top: 8px; }

.page-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.check-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .96rem; color: var(--ink); }
.check-list li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; margin-top: 8px; }

.hero-card { background: var(--paper-deep); color: var(--ink); padding: 34px; }
.hero-card h3 { margin-bottom: 10px; }
.hero-card p.small { font-size: .87rem; color: var(--muted); margin-bottom: 22px; }

.project-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.project-tag { border: 1px solid var(--line-strong); padding: 9px 16px; font-size: .82rem; color: var(--ink); }

/* Accordéon — initFAQAccordion() (main.js) ajoute le comportement/ARIA au
   clic sans toucher au balisage h3/p, lu tel quel par initFAQSchema(). */
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item h3 {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.14rem;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq-item h3::after {
  content: "+"; flex-shrink: 0; font-family: var(--mono); font-size: 1.3rem; font-weight: 400;
  color: var(--accent); transition: transform .25s var(--ease);
}
.faq-item.is-open h3::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0; font-size: .95rem; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .32s var(--ease), opacity .25s var(--ease), margin .32s var(--ease);
}
.faq-item.is-open p { max-height: 320px; opacity: 1; margin-top: 12px; }

/* Témoignages — composant prêt à l'emploi, inutilisé tant qu'il n'y a pas de
   vrais retours clients (voir CLAUDE.md : jamais de faux avis, jamais de
   chiffre inventé). Registre identique au reste : pas de carte à ombre
   portée, filet fin, citation en serif italique comme .claim. */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testimonial-grid { grid-template-columns: minmax(0, 1fr); } }
.testimonial {
  background: var(--paper); padding: 40px 30px 30px; display: flex; flex-direction: column; gap: 18px;
  position: relative; transition: background .2s var(--ease);
}
.testimonial:hover { background: var(--paper-deep); }
/* Grand guillemet décoratif en serif — signature éditoriale discrète, dans le
   même esprit que .claim ailleurs sur le site (citation mise en avant sans
   carte à ombre ni icône générique de guillemet). */
.testimonial::before {
  content: "\201C"; position: absolute; top: 6px; left: 26px;
  font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--accent);
  opacity: .28; pointer-events: none;
}
.testimonial-quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin: 0; position: relative; }
.testimonial-meta { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--paper-deep); flex-shrink: 0; overflow: hidden; border: 1px solid var(--line-strong); }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name { font-size: .84rem; font-weight: 600; color: var(--ink); }
.testimonial-project { font-size: .78rem; color: var(--muted); }

/* Apparitions au scroll ------------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Défilement fin des barres de scroll (WebKit/Blink) — cohérent avec le
   registre "filet fin" du reste du design system plutôt que la barre système
   par défaut, souvent plus épaisse et plus contrastée. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--paper-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===========================================================================
   AMÉLIORATION CONVERSION — 20/08/2026 (round 3)
   Barre CTA fixe mobile, bandeau ville, badges de vérification formulaire,
   bannière de consentement cookies. Mêmes principes que le reste du design
   system : rectangulaire, pas d'ombre portée, pas de dégradé, palette
   existante uniquement.
   =========================================================================== */

/* Barre d'action fixe mobile (pages catégories) — injectée par main.js ------*/
.sticky-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--paper); border-top: 1px solid var(--line-strong);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.sticky-cta-bar-inner { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; }
.sticky-cta-bar .btn { flex: 1; justify-content: center; padding: 13px 16px; font-size: .78rem; }
.sticky-cta-bar .btn--call { flex: 0 0 auto; width: 50px; padding: 13px; }
.sticky-cta-bar .btn--call svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .sticky-cta-bar.is-active { display: block; }
  body[data-sticky-cta-padded] { padding-bottom: 72px; }
}

/* Clic-to-call — header et pied de page (visible seulement si contact-config.js
   renseigné ; voir initContactInfo() dans main.js) --------------------------*/
.header-call {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
  font-size: .85rem; color: var(--ink); white-space: nowrap;
}
.header-call svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 480px) { .header-call span { display: none; } }
.footer-call { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; margin-top: 10px; }
.footer-call svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* Bandeau de personnalisation ville (?ville=) — injecté sous le H1 des pages
   catégories, jamais à la place du texte existant. -------------------------*/
.city-banner {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 10px 16px; background: var(--paper-deep); border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink); font-weight: 500;
}
.city-banner svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* Badges de vérification près de l'envoi du formulaire ----------------------*/
.form-trust-recap {
  display: flex; flex-direction: column; gap: 8px; margin: 18px 0;
  padding: 14px 16px; background: var(--paper-deep); border: 1px solid var(--line);
}
.form-trust-recap div { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--ink-soft); }
.form-trust-recap svg { width: 15px; height: 15px; color: var(--accent-bright); flex-shrink: 0; }

/* Bannière de consentement cookies ------------------------------------------*/
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 640px; margin: 0 auto;
  background: var(--white); color: var(--ink);
  padding: 20px 22px; border-top: 4px solid var(--accent-bright-deep); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 14px;
}
.consent-banner p { font-size: .85rem; line-height: 1.55; color: var(--muted); margin: 0; }
.consent-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.consent-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-banner .btn--accent { flex: 1; min-width: 140px; justify-content: center; }
.consent-banner .btn--ghost { flex: 1; min-width: 140px; justify-content: center; border-color: var(--ink); color: var(--ink); }
.consent-banner .btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (max-width: 480px) {
  .consent-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
}


/* Lien d'évitement — accessibilité clavier / lecteur d'écran (WCAG 2.4.1),
   ajouté round 4 (20/08/2026). Invisible tant qu'il n'a pas le focus clavier. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ============================================================
   Guides & conseils — hub éditorial et gabarit d'article.
   Ajouté le 20/08/2026 (round 6) : contenu à visée de retour
   récurrent, indépendant du cycle d'achat des devis. Réutilise
   les tokens et composants existants (.section, .container,
   .btn, .cta-band, .eyebrow, .page-hero) — les classes ci-dessous
   couvrent uniquement ce qui n'a pas d'équivalent déjà en place.
   ============================================================ */

.guide-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: .85rem;
  margin-top: 10px;
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* Round 14 (24/08/2026) — coins arrondis + ombre portée au survol
   contredisaient le manifeste du site lui-même ("aucune carte à ombre
   portée, aucun bouton pilule" — voir en-tête de ce fichier). Corrigé
   pour rejoindre le reste du système : coins nets, filet fin, un ::before
   accent en haut au survol au lieu d'une ombre. */
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.guide-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: var(--accent-bright); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.guide-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.guide-card:hover::before { transform: scaleX(1); }
.guide-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-ui);
  background: var(--paper-deep);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.guide-card-icon svg { width: 22px; height: 22px; }
.guide-card-cat {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: 8px;
}
.guide-card h3 { font-size: 1.08rem; margin: 0 0 8px; }
.guide-card p { font-size: .88rem; color: var(--muted); margin: 0 0 16px; flex-grow: 1; }
.guide-card .guide-card-meta { font-size: .78rem; color: var(--muted); }

.guide-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--accent-bright-deep);
  padding: 40px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 760px) { .guide-featured { grid-template-columns: minmax(0, 1fr); padding: 28px; } }
.guide-featured .guide-card-cat { color: var(--muted); }
.guide-featured h2 { font-family: var(--serif); font-size: 1.7rem; margin: 8px 0 14px; color: var(--ink); }
.guide-featured p { color: var(--muted); margin: 0 0 20px; }
.guide-featured .guide-icon-big {
  width: 88px; height: 88px; border-radius: var(--radius-card);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright-deep);
  justify-self: center;
}
.guide-featured .guide-icon-big svg { width: 40px; height: 40px; }

.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 1000;
  transition: width .1s linear;
}

.article-shell { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .article-shell { grid-template-columns: minmax(0, 1fr); } }

.toc { position: sticky; top: 24px; }
@media (max-width: 860px) { .toc { position: static; margin-bottom: 24px; } }
.toc-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 12px;
}
.toc nav { display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--line); }
.toc nav a {
  padding: 2px 0 2px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.toc nav a:hover { color: var(--ink); }
.toc nav a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.article-content { max-width: 680px; }
.article-content .lead { font-family: var(--serif); font-size: 1.25rem; color: var(--ink-soft); margin-bottom: 28px; }
.article-content h2 { font-size: 1.35rem; margin: 40px 0 14px; scroll-margin-top: 24px; }
.article-content p { margin: 0 0 16px; color: var(--ink-soft); }
.article-content ul, .article-content ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink-soft); }
.article-content li { margin-bottom: 8px; }

.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
}

.guide-cta-inline {
  background: var(--paper-deep);
  border-left: 4px solid var(--accent-bright);
  border-radius: var(--radius-ui);
  padding: 24px;
  margin: 32px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.guide-cta-inline p { margin: 0; font-weight: 600; color: var(--ink); flex: 1 1 220px; }


/* ============================================================
   Encarts "Nos partenaires" — round 7, 20/08/2026.
   Composant réel et intégré, mais visuellement absent tant que
   PARTNERS (partners-config.js) est vide — voir partners.js.
   Toujours labellisé "Partenaire" de façon visible (obligation
   légale française contre la publicité déguisée, voir addendum
   round 5) — jamais confondu avec du contenu éditorial.
   ============================================================ */

.partner-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 16px;
  display: block;
}

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .partner-grid { grid-template-columns: minmax(0, 1fr); } }

.partner-card {
  position: relative;
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 20px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.partner-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.partner-pill {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--paper-deep);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.partner-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-ui);
  background: var(--paper-deep);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.partner-icon svg { width: 20px; height: 20px; }
.partner-card h3 { font-size: 1rem; margin: 0 0 6px; }
.partner-card p { font-size: .85rem; color: var(--muted); margin: 0; }


/* ============================================================
   Round 10ter — retour à la couleur, sur références réelles (21/08/2026).
   Raphaël : "je n'ai jamais demandé de noir et blanc [...] inspire-toi
   des meilleurs sites." Recherche faite ce round (Awwwards, Colorlib,
   Createtoday — analyse quantifiée des meilleurs sites d'architecture
   2026) : la photographie y reste TOUJOURS en couleur réelle, en grand
   format, avec un minimum d'ornements superposés — la sobriété vient
   de l'espace et de la mise en page, jamais de la désaturation de la
   photo elle-même. Système ci-dessous : photos couleur pleine largeur,
   texte overlay minimal (un repère + un nom, pas d'empilement), gaps
   généreux, cadres fins conservés (identité "dessin technique" du
   site) mais sans lourdeur.
   ============================================================ */

/* Répertoire des métiers (round 18, reconstruit round 23 après une perte
   de ce bloc constatée en audit — main.js générait déjà .metier-feature/
   .metier-row sans CSS correspondant, section rendue sans style). Un
   métier en grande vedette (photo, accroche réelle tirée de data.js) à
   gauche, les 14 autres en liste dense et scannable à droite. */
.metier-index { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 4px 48px; align-items: start; }
.metier-feature { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--radius-photo); box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.metier-feature:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20,21,27,.22); }
.metier-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.metier-feature:hover img { transform: scale(1.045); }
/* Bandeau solide plutôt qu'un voile sur toute la photo (round 27) — la
   photo reste pleinement visible au-dessus. */
.metier-feature-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 28px; background: var(--white); border-top: 4px solid var(--accent-bright-deep); }
.metier-feature-caption .eyebrow-tiny { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-bright-deep); margin-bottom: 12px; }
.metier-feature-caption h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--ink); margin: 0 0 10px; }
.metier-feature-caption p { color: var(--muted); max-width: 32ch; margin: 0 0 18px; font-size: .92rem; line-height: 1.5; }
.metier-feature-caption .link-arrow { color: var(--ink); border-color: var(--line-strong); }

.metier-list { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; border-top: 1px solid var(--line); }
.metier-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.metier-row:nth-child(odd) { padding-right: 22px; border-right: 1px solid var(--line); }
.metier-row:nth-child(even) { padding-left: 22px; }
.metier-row-num { font-family: var(--mono); font-size: .72rem; color: var(--muted); flex-shrink: 0; width: 20px; }
.metier-row-thumb { width: 46px; height: 46px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-deep); border-radius: var(--radius-ui); }
.metier-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.metier-row-name { font-weight: 600; font-size: .92rem; flex: 1; letter-spacing: -.005em; }
.metier-row .link-arrow { font-size: .74rem; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.metier-row:hover { background: var(--paper-deep); }
.metier-row:hover .link-arrow { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .metier-index { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .metier-feature { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .metier-list { grid-template-columns: minmax(0, 1fr); }
  .metier-row:nth-child(odd) { padding-right: 4px; border-right: none; }
  .metier-row:nth-child(even) { padding-left: 4px; }
}

/* Mosaïque "En images" — grille asymétrique, photos couleur pleine
   largeur, légende minimale (pas de pastille, un simple dégradé bas). */
/* Grille régulière (round 26, "plus de photos moins grandes") : remplace
   le bento asymétrique (1 tuile dominante + 4 régulières) par une planche
   de 10 photos de même taille — registre "preuve par la variété", pas
   "moment hero" sur une poignée de clichés. */
.showcase-mosaic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mosaic-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-ui); box-shadow: var(--shadow-sm); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic-item:hover img { transform: scale(1.05); }
/* Étiquette solide en coin plutôt qu'un voile sur toute la photo (round
   27) — chaque cliché reste net et coloré. */
.mosaic-item span { position: absolute; left: 8px; bottom: 8px; z-index: 2; color: var(--white); background: var(--accent-bright-deep); padding: 4px 8px; font-size: .62rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.3; border-radius: var(--radius-ui); max-width: calc(100% - 16px); }
@media (max-width: 900px) { .showcase-mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .showcase-mosaic { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* "Comment ça marche" — panneaux cinématiques (container-wide côté
   index.html), photos agrandies (16/10), numéros fantômes doublés
   d'échelle par rapport au registre "cadre fin" d'origine. */
.process-diagram { position: relative; display: flex; flex-direction: column; gap: 96px; }
.process-diagram::before {
  content: ""; position: absolute; top: 0; right: auto; bottom: 0; left: 50%;
  height: auto; width: 1px; background: var(--line-strong); z-index: 0;
}
.process-step {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; gap: 64px;
}
.process-step:nth-child(even) .plate-frame { order: 2; }
.process-step:nth-child(even) .process-step-text { order: 1; }
.process-step:nth-child(even) .plate-frame .process-ghost-num { left: auto; right: -14px; }
.process-step-text { max-width: 42ch; }
.process-step:nth-child(even) .process-step-text { justify-self: end; text-align: right; }
.process-step:nth-child(even) .process-step-text p { margin-left: auto; }
.process-step .plate-frame { position: relative; aspect-ratio: 16 / 10; margin-bottom: 24px; }
.process-step .plate-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--line-strong); border-radius: var(--radius-photo); box-shadow: var(--shadow-md); }
.process-ghost-num {
  position: absolute; top: -34px; left: -14px; z-index: 2;
  display: block; font-family: var(--serif); font-style: italic; font-size: clamp(4.4rem, 7vw, 7.6rem); font-weight: 400;
  color: var(--ink); line-height: 1; background: var(--paper-deep); padding: 2px 18px 0 2px;
}
.process-step h3 { font-size: clamp(1.28rem, 1.8vw, 1.7rem); margin: 0 0 12px; }
.process-step p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 40ch; }
@media (max-width: 860px) {
  .process-diagram { gap: 56px; }
  .process-diagram::before { display: none; }
  .process-step, .process-step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .process-step .plate-frame, .process-step:nth-child(even) .plate-frame { order: 0; aspect-ratio: 4 / 3; }
  .process-step-text, .process-step:nth-child(even) .process-step-text { order: 0; justify-self: start; text-align: left; max-width: none; }
  .process-step:nth-child(even) .process-step-text p { margin-left: 0; }
  .process-step:nth-child(even) .plate-frame .process-ghost-num { left: -14px; right: auto; }
  .process-ghost-num { font-size: 3.6rem; top: -22px; }
}

/* Round 11 — mouvement au scroll, fonctionnel et discret (22/08/2026).
   Scindé du composant lui-même : si le JS ne charge pas, le fallback JS
   (voir main.js, initScrollReveal) rend tout visible immédiatement — donc
   pas de contenu qui reste cassé/invisible sans JS. */
#home-cat-showcase .metier-feature, #home-cat-showcase .metier-row, .mosaic-item, .process-step, .commit-item {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
#home-cat-showcase .metier-feature.is-visible, #home-cat-showcase .metier-row.is-visible, .mosaic-item.is-visible, .process-step.is-visible, .commit-item.is-visible {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #home-cat-showcase .metier-feature, #home-cat-showcase .metier-row, .mosaic-item, .process-step, .commit-item { opacity: 1; transform: none; transition: none; }
}

/* Round 12 — motif technique en fond de hero, réutilise le langage SVG
   déjà établi par .cta-band-motif (pas une nouvelle invention). */
.hero-motif {
  position: absolute; top: -40px; left: -40px; width: 620px; height: 620px;
  color: var(--accent); opacity: .1; pointer-events: none; z-index: 0;
}
.hero-motif svg { width: 100%; height: 100%; }
.hero > .container { position: relative; z-index: 1; }

/* Round 13 — refonte totale de la composition, pas seulement du style
   (23/08/2026). Raphaël : "TOTALEMENT TOUT CHANGER EN PLUS MODERNE". Les
   rounds 11-12 avaient poussé plus loin la même grammaire (bento, typo
   fluide, coins nets) mais gardaient l'architecture de page classique :
   une colonne centrée, des sections identiques empilées (eyebrow centré
   + h2 centré + paragraphe centré, répété 6 fois). C'est CETTE répétition
   qui lit "classique", pas le style de chaque bloc pris isolément. Ce
   round change l'architecture elle-même : hero asymétrique qui sort du
   conteneur, mosaïque qui déborde en pleine largeur, étapes en zigzag
   éditorial au lieu de 3 colonnes identiques, et un nouveau système
   d'en-têtes de chapitre asymétriques et numérotés qui remplace le bloc
   centré répété. Palette et polices non touchées (jamais remises en
   cause par Raphaël). */

.hero-edge-label {
  position: absolute; left: 14px; top: 50%; z-index: 1;
  transform: translateY(-50%) rotate(-90deg); transform-origin: left center;
  display: none; pointer-events: none;
}
.hero-edge-label span {
  display: inline-block; font-family: var(--sans); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-muted); white-space: nowrap;
}
@media (min-width: 1180px) { .hero-edge-label { display: block; } }

.container-wide { max-width: 1800px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container-wide { padding: 0 22px; } }

.chapter-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end;
  gap: 20px 40px; margin-bottom: 64px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line-strong);
}
/* Round 14 (24/08/2026) — le chiffre géant en tête de section est un trope
   identifiable des portfolios d'agence 2021-23 (Fireart, recherche 2026) :
   démoté d'un élément hero à une simple pastille-repère, et remplacé par
   la typographie du h2 elle-même comme vrai élément visuel dominant
   (voir chapter-head-text h2 ci-dessous — nettement agrandi). */
.chapter-head-num {
  font-family: var(--mono); font-weight: 500; line-height: 1;
  font-size: .72rem; letter-spacing: 0; color: #fff;
  background: var(--accent-bright-deep); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 4px;
}
.chapter-head-text .eyebrow { margin-bottom: 10px; }
.chapter-head-text h2 { margin-bottom: 0; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.chapter-head-desc {
  max-width: 300px; margin: 0; text-align: left; justify-self: end;
  color: var(--muted); font-size: .96rem; line-height: 1.5;
}
.section--ink .chapter-head { border-bottom-color: var(--on-ink-line); }
.section--ink .chapter-head-desc { color: rgba(255,255,255,.82); }
@media (max-width: 760px) {
  .chapter-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .chapter-head-desc { justify-self: start; max-width: none; }
}

.chapter-rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; flex-direction: column; gap: 20px;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
body.past-hero .chapter-rail { opacity: 1; pointer-events: auto; }
@media (min-width: 1280px) { .chapter-rail { display: flex; } }
.chapter-rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; opacity: .5; transition: opacity .25s var(--ease); }
.chapter-rail a:hover, .chapter-rail a:focus-visible, .chapter-rail a.is-active { opacity: 1; }
.chapter-rail-num {
  font-family: var(--serif); font-size: .82rem; color: var(--accent);
  border: 1px solid var(--line-strong); width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--paper);
}
.chapter-rail a.is-active .chapter-rail-num { background: var(--accent-bright-deep); color: #fff; border-color: var(--accent-bright-deep); }
.chapter-rail-label {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .3s var(--ease), opacity .3s var(--ease);
}
.chapter-rail a:hover .chapter-rail-label, .chapter-rail a:focus-visible .chapter-rail-label,
.chapter-rail a.is-active .chapter-rail-label { max-width: 130px; opacity: 1; }

#chapter-01, #chapter-02, #chapter-03, #chapter-04 { scroll-margin-top: 100px; }

/* Upload de photos/documents dans les formulaires (23/08/2026) — actif dès
   aujourd'hui, ne dépend d'aucun backend (FormSubmit accepte nativement les
   pièces jointes en multipart/form-data, 10 Mo max cumulés). */
.field-file input[type="file"] {
  padding: 11px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-ui);
  font-size: .86rem; font-family: var(--sans); background: var(--paper-deep); color: var(--ink-soft);
  cursor: pointer;
}
.field-file input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--paper); font-family: var(--sans); font-weight: 600; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.field-file-hint { font-size: .76rem; color: var(--muted); }
.field-file-hint.is-over { color: #A02E1E; font-weight: 600; }

/* Vérification du numéro par SMS (23/08/2026) — le bloc existe dans le HTML
   mais reste `hidden` tant que backend-config.js n'a pas d'apiBaseUrl :
   otp-forms.js le révèle lui-même une fois le backend déployé. */
.otp-field { border: 1px solid var(--line-strong); background: var(--paper-deep); padding: 16px; margin-top: -8px; margin-bottom: 22px; }
.otp-code-row { display: flex; gap: 10px; margin-top: 12px; }
.otp-code-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-strong); font-size: .95rem; font-family: var(--sans); letter-spacing: .12em; }
.otp-status { font-size: .82rem; margin: 10px 0 0; color: var(--muted); }
.otp-status:empty { display: none; margin: 0; }
.otp-status.is-error { color: #A02E1E; }
.otp-status.is-ok { color: var(--accent-bright-deep); font-weight: 600; }

/* ==========================================================================
   Round 18 — landing pages métier + retour sur le site
   ---------------------------------------------------------------------------
   Raphaël : "je veux le site le mieux optimisé pour faire revenir les gens
   [...] et un site optimisé pour les pubs sponsorisées, chaque métier servira
   de landing hyper bien pensée." Deux ajouts distincts : un mode d'affichage
   allégé pour le trafic publicitaire (chaque page catégorie devient une vraie
   landing focalisée sans dupliquer aucune page), et un point d'inscription
   pour faire revenir les visiteurs venus lire un guide.
   ========================================================================== */

/* Mode "landing pub sponsorisée" (voir initAdLandingMode, main.js). Retire la
   navigation complète — pas le contenu, pas les prix, pas la mise en page —
   pour qu'un clic publicitaire atterrisse sur une page à un seul objectif. */
body.ad-landing .main-nav,
body.ad-landing .nav-toggle,
body.ad-landing .chapter-rail,
body.ad-landing .returning-banner { display: none !important; }
body.ad-landing .footer-grid { grid-template-columns: minmax(0, 1fr); }
body.ad-landing .footer-grid > div:not(:first-child) { display: none; }
body.ad-landing .quick-form { border-color: var(--accent-bright-deep); border-width: 1px 1px 1px 1px; box-shadow: 0 0 0 1px var(--accent-bright-deep); }

/* Bandeau de confiance juste sous le paragraphe du hero — visible dès le
   premier écran, sans attendre la barre de confiance générale plus bas. */
.hero-trust-row {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 6px;
}
.hero-trust-row span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .01em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 7px;
}
.hero-trust-row span::before {
  content: "✓"; color: var(--accent-bright-deep); font-weight: 600;
}

/* Inscription "nos guides par email" — un seul objectif : faire revenir un
   lecteur de guide qui n'a pas (encore) de projet actif à démarrer maintenant.
   FormSubmit, comme les autres formulaires du site : zéro backend requis. */
.newsletter-inline {
  background: var(--gradient-electric); color: var(--paper); padding: 56px 32px; text-align: center;
  position: relative; overflow: hidden;
}
.newsletter-inline::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  background-size: 180px 180px; opacity: .025; mix-blend-mode: overlay; pointer-events: none;
}
.newsletter-inline > * { position: relative; z-index: 1; }
.newsletter-inline .inner { max-width: 560px; margin: 0 auto; }
.newsletter-inline .eyebrow { justify-content: center; color: var(--accent-bright); }
.newsletter-inline .eyebrow::before { background: var(--accent-bright); }
.newsletter-inline h3 { color: var(--paper); font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.newsletter-inline p { color: var(--on-ink-muted); margin-bottom: 26px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 220px; padding: 13px 16px; border: 1px solid var(--on-ink-line);
  background: rgba(255,255,255,.06); color: var(--paper); font-family: var(--sans); font-size: .92rem;
}
.newsletter-form input[type="email"]::placeholder { color: var(--on-ink-muted); }
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--accent-bright); }
.newsletter-form .btn--accent { background: var(--accent-bright-deep); border-color: var(--accent-bright-deep); flex-shrink: 0; }
.newsletter-note { font-size: .74rem; color: var(--on-ink-muted); margin: 12px 0 0; }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

/* Espace client (round 31) — connexion par téléphone/SMS, tableau de bord des
   demandes, timeline de statut. Même vocabulaire visuel que le reste du site :
   carte claire, filet orange, jamais de noir. -----------------------------*/
.espace-login { max-width: 440px; margin: 0 auto; }
.espace-login .field { margin-bottom: 18px; }
.espace-status { font-size: .85rem; margin-top: 10px; min-height: 1.2em; }
.espace-status.is-error { color: #A02E1E; }
.espace-status.is-ok { color: var(--accent-bright-deep); }
.espace-soon { text-align: center; max-width: 480px; margin: 0 auto; color: var(--muted); }

.demande-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent-bright-deep); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.demande-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.demande-card-head h3 { margin: 0; font-size: 1.15rem; }
.demande-card-meta { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }

.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; background: var(--orange-tint); color: var(--accent-bright-deep); white-space: nowrap; }
.status-badge.is-done { background: var(--accent-bright-deep); color: var(--white); }

.pro-contact-card { background: var(--paper-deep); border-radius: var(--radius-ui); padding: 16px 18px; margin: 16px 0; font-size: .9rem; }
.pro-contact-card strong { display: block; margin-bottom: 4px; }

.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline-item { position: relative; padding: 0 0 22px 28px; border-left: 2px solid var(--line); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-bright-deep); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--accent-bright-deep); }
.timeline-item .label { font-weight: 600; font-size: .92rem; }
.timeline-item .detail { font-size: .84rem; color: var(--muted); margin-top: 2px; }
.timeline-item .date { font-size: .74rem; color: var(--muted); margin-top: 4px; font-family: var(--mono); }

.demande-toggle { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent-bright-deep); font-size: .85rem; font-weight: 600; font-family: var(--sans); }
.demande-toggle:hover { text-decoration: underline; }
.demande-card .timeline { display: none; }
.demande-card.is-open .timeline { display: block; }