/*
Theme Name:   Pixevent JHM
Theme URI:    https://pixevent.fr
Description:  Thème enfant de « Minimal » aux couleurs du design Just Hire Me : dashboard sombre, accent cyan, Instrument Serif + Space Grotesk + JetBrains Mono. Sombre par défaut, mode clair au clic. Tous les gabarits, types de contenu, champs ACF, formulaires et quiz restent ceux du thème parent.
Author:       Pixevent
Author URI:   https://pixevent.fr
Template:     minimal-theme
Version:      1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  pixevent-jhm
*/

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS — remap the parent's design tokens to the JHM palette.
   `html:root` beats the parent's `:root` and the Customizer's inline CSS.
   Dark is the default; light only with <html data-theme="light">.
   ═══════════════════════════════════════════════════════════════════ */
html:root {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   var(--font-sans);           /* parent body font → sans */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;                       /* 12px — mono labels */
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;                     /* 17px */
  --text-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --tracking-caps: 0.1em;

  --container: 1360px;
  --radius:    0;
  --radius-lg: 0;
  --dur:       150ms;
}

html:root:not([data-theme="light"]) {
  color-scheme: dark;
  --color-bg:           #0a0a0b;
  --color-bg-elev:      #111114;
  --color-text:         #ECEAE3;
  --color-muted:        #9a9aa3;
  --color-faint:        #62626a;
  --color-border:       #26262e;
  --color-border-strong:#34343f;
  --color-accent:       #06B6D4;
  --color-accent-hover: #22d3ee;
  --color-on-accent:    #001a20;
  --color-accent-soft:  rgba(6, 182, 212, 0.14);
  --color-accent-line:  rgba(6, 182, 212, 0.35);
  --color-good:         #4ade80;
  --color-error:        #f87171;
  --color-error-soft:   rgba(248, 113, 113, 0.12);
  --color-surface:      #16161b;
  --color-surface-2:    #1c1c23;
  --shadow-pop: 0 16px 40px -16px rgb(0 0 0 / 0.7);
}

html:root[data-theme="light"] {
  color-scheme: light;
  --color-bg:           #EFF8FC;
  --color-bg-elev:      #E2F2F8;
  --color-text:         #0C2B36;
  --color-muted:        #285A6D;
  --color-faint:        #4E8399;
  --color-border:       #C4DCE8;
  --color-border-strong:#9FC8D8;
  --color-accent:       #067a96;
  --color-accent-hover: #05647b;
  --color-on-accent:    #ffffff;
  --color-accent-soft:  rgba(5, 150, 184, 0.10);
  --color-accent-line:  rgba(5, 150, 184, 0.30);
  --color-good:         #166534;
  --color-error:        #b42318;
  --color-error-soft:   rgba(180, 35, 24, 0.08);
  --color-surface:      #FFFFFF;
  --color-surface-2:    #EBF5FA;
  --shadow-pop: 0 16px 40px -16px rgb(12 43 54 / 0.25);
}
/* Parent dims photos in dark mode — keep them crisp instead */
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: none; }

/* ═══════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--color-bg);
}
h1, h2, h3, h4 { font-weight: 500; }
a:hover { color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; border-radius: 0; }

html { scrollbar-color: var(--color-border-strong) var(--color-bg); }

/* Display headings — Instrument Serif, like the JHM hero */
.home-hero__title,
.post-title,
.archive-header h1,
.page-header h1,
.not-found h1,
.tools-index__title,
.fl-hero__title,
.fl-section-title,
.fl-cta__title,
.entry-content h2,
.tool-content h2,
.author-box__name,
.tool-header__content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Mono labels — the « voice » of the interface */
.eyebrow, .section-label, .archive-type, .card__cat, .home-hero__badge,
.fl-eyebrow, .author-box__eyebrow, .share-label, .cats-label, .tags-label,
.nav-label, .widget-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
}

/* ═══════════════════════════════════════════════════════════════════
   3. PRIMITIVES — buttons, links, tags, fields
   ═══════════════════════════════════════════════════════════════════ */
.btn, .fl-btn, .devis-form__submit, .location-map__load, .contact-form__submit {
  min-height: 46px;
  padding: 14px 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
.btn:hover, .fl-btn--outline:hover {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--primary, .fl-btn:not(.fl-btn--outline), .devis-form__submit, .location-map__load {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}
.btn--primary:hover, .fl-btn:not(.fl-btn--outline):hover,
.devis-form__submit:hover:not(:disabled), .location-map__load:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
  box-shadow: 0 10px 32px var(--color-accent-soft);
}
.btn--ghost { border-style: dashed; color: var(--color-muted); }

.link-arrow, .read-more, .home-hero__cta, .location-map__link, .fl-project__link, .tool-card__cta {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.link-arrow:hover, .read-more:hover, .home-hero__cta:hover,
.location-map__link:hover, .fl-project__link:hover { text-decoration: none; color: var(--color-accent-hover); }

.tag, .cat-list a, .tag-list a, .fl-stack__tag, .sidebar-stack__tag, .fl-project__tags {
  border-radius: 0;
  padding: 3px 10px;
  border-color: var(--color-border-strong);
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.cat-list a:hover, .tag-list a:hover { background: var(--color-accent-soft); }

.status-pill, .fl-status {
  border-radius: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--color-good);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

.field-input, .search-form__input, .tools-search input, .articles-select-wrap select,
.devis-form__field input[type="text"], .devis-form__field input[type="email"],
.devis-form__field input[type="tel"], .devis-form__field textarea {
  border-radius: 0;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  font-size: 13px;
}
.search-form__input:focus, .tools-search input:focus, .articles-select-wrap select:focus,
.devis-form__field input:focus, .devis-form__field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER — topbar + sticky, blurred navigation bar
   ═══════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 12px;
}
.topbar__inner { min-height: 40px; padding-block: 2px; }
.topbar-social a, .footer-social a, .theme-toggle { border-radius: 0; width: 34px; height: 34px; }
.topbar-social a:hover, .footer-social a:hover, .theme-toggle:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.lang-switcher__toggle { border-radius: 0; font-family: var(--font-mono); font-size: 12px; }
.lang-switcher__dropdown { border-radius: 0; background: var(--color-surface); border-color: var(--color-border-strong); }
.lang-switcher__dropdown a { font-family: var(--font-mono); font-size: 12px; }

.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

.site-header .site-container { min-height: 64px; padding-block: 10px; }

/* Brand: cyan pulsing dot + mono uppercase, like « GAUTIER.SH » */
.site-title a {
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-title__icon { display: none; }
.site-title a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
}
.site-tagline { font-size: 11px; color: var(--color-faint); padding-left: 20px; }

.site-nav a {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.site-nav a:hover { color: var(--color-text); }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--color-accent); text-decoration: none; }
.site-nav .current-menu-item > a { box-shadow: inset 0 -1px 0 var(--color-accent); }
.site-nav .menu-cta > a { border-radius: 0; font-weight: 600; }
.sub-menu { border-radius: 0; background: var(--color-surface); border-color: var(--color-border-strong); }
.mobile-menu-toggle { border-radius: 0; }

@media (max-width: 960px) {
  .header-menu { background: var(--color-bg); }
}

/* Reading progress bar (parent) */
#reading-progress-bar { background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════════
   5. LAYOUT & SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.page-layout { padding-top: var(--space-8); }

.profile-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  padding: 24px;
}
.profile-card::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 1px;
  background: var(--color-accent);
}
.profile-card__photo img { border-radius: 0; filter: grayscale(1) contrast(1.1); }
.profile-card__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 1.05; }
.profile-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.profile-card__tagline { color: var(--color-muted); }
.profile-card__actions { justify-items: stretch; }
.profile-card__actions .link-arrow { justify-content: center; }

.sidebar-widgets .widget {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   6. HOME — hero + article index
   ═══════════════════════════════════════════════════════════════════ */
.home-hero { border-bottom-color: var(--color-border); }

.home-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.home-hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}
.home-hero__badge {
  border-radius: 0;
  padding: 3px 8px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}
.home-hero__meta-cat { color: var(--color-accent); }

.home-hero__title {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.home-hero__title-link:hover .home-hero__title { color: var(--color-accent); }
.home-hero__excerpt { color: var(--color-muted); font-size: var(--text-md); line-height: 1.6; }
.home-hero__reading-time { color: var(--color-faint); }

.home-hero__image-wrap {
  border-radius: 0;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Filters bar */
.articles-controls {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 12px;
  gap: 12px;
}
.articles-select-wrap select { font-family: var(--font-mono); font-size: 12px; min-height: 40px; }
.articles-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.articles-reset { border-radius: 0; }

/* Cards — dashboard panels */
.card-grid { gap: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.card {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  box-shadow: none;
  padding: 20px;
  transition: background var(--dur) var(--ease);
}
.card:hover { background: linear-gradient(160deg, var(--color-accent-soft) 0%, transparent 45%); transform: none; box-shadow: none; }
.card__img-wrap { border-radius: 0; }
.card__cat { color: var(--color-accent); }
.card__title { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.card--wide .card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; }
.card__title a:hover { color: var(--color-text); }
.card:hover .card__title { color: var(--color-accent); }
.card__excerpt { color: var(--color-muted); }
.card__footer { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); border-top-color: var(--color-border); }

/* Pagination */
.pagination .page-numbers {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  border-color: var(--color-border-strong);
}
.pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   7. ARTICLE
   ═══════════════════════════════════════════════════════════════════ */
.post-title {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.post-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.post-meta a { color: var(--color-accent); }
.post-header { position: relative; padding-top: 28px; }
.post-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 1px;
  background: var(--color-accent);
}

.featured-image { border-radius: 0; border: 1px solid var(--color-border); overflow: hidden; }

/* Reading typography */
.entry-content { font-size: 1.125rem; line-height: 1.75; }
.entry-content p, .entry-content li { color: color-mix(in srgb, var(--color-text) 88%, var(--color-muted)); }
.entry-content strong { color: var(--color-text); font-weight: 600; }
.entry-content h2, .tool-content h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; }
.entry-content h3, .tool-content h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; }
.entry-content h4, .tool-content h4 { font-family: var(--font-mono); color: var(--color-accent); }
.entry-content a, .tool-content a, .page-intro a, .fl-prose a {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent-line);
}
.entry-content a:hover { color: var(--color-accent-hover); }

.entry-content ul > li::marker { content: "+  "; font-family: var(--font-mono); color: var(--color-accent); }
.entry-content ol > li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--color-accent); }

.entry-content blockquote,
.entry-content .wp-block-quote {
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  background: linear-gradient(90deg, var(--color-accent-soft), transparent 60%);
  padding: 0.75em 0 0.75em 1.25em;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.35;
}
.entry-content blockquote cite { font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--color-faint); }
.entry-content .wp-block-pullquote { border-color: var(--color-accent); font-family: var(--font-display); }

.entry-content code, .entry-content kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  border-radius: 0;
  background: var(--color-surface-2);
  color: var(--color-accent-hover);
  padding: 0.1em 0.35em;
}
.entry-content pre, .entry-content .wp-block-code {
  border-radius: 0;
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.entry-content pre code { color: var(--color-text); background: none; padding: 0; }

.entry-content figure img, .entry-content > img, .entry-content p > img { border-radius: 0; }
.entry-content .wp-element-caption, .entry-content .wp-caption-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-faint);
}
.entry-content table { border: 1px solid var(--color-border); }
.entry-content th { background: var(--color-surface); color: var(--color-accent); }
.entry-content th, .entry-content td { border-color: var(--color-border); }
.entry-content hr, .entry-content .wp-block-separator { background: var(--color-border); border: 0; height: 1px; }
.entry-content .wp-block-button__link { border-radius: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }

/* Drop cap */
.single-article .entry-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-weight: 400;
}

/* Share, footer, author, related, prev/next */
.share-btn { border-radius: 0; border-color: var(--color-border-strong); }
.share-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.share-btn--copied { border-color: var(--color-good); color: var(--color-good); background: transparent; }
.post-footer { border-top-color: var(--color-border); }

.author-box {
  border-radius: 0;
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-accent);
  background: var(--color-surface);
}
.author-box__photo img, .author-box__photo .avatar { border-radius: 0; filter: grayscale(1) contrast(1.1); }
.author-box__name { font-size: 2rem; line-height: 1; }

.related-posts > .related-posts__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.related-posts__list { gap: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.related-posts__link {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.related-posts__link:hover { transform: none; background: linear-gradient(160deg, var(--color-accent-soft), transparent 50%); }
.related-posts__date { font-family: var(--font-mono); color: var(--color-faint); }
.related-posts__link .related-posts__title { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); }
.related-posts__link:hover .related-posts__title { color: var(--color-accent); }

.post-navigation { border-color: var(--color-border); }
.nav-title { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; }
.nav-label { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════════
   8. ARCHIVES, SEARCH, 404, PAGES
   ═══════════════════════════════════════════════════════════════════ */
.archive-header h1, .page-header h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; }
.archive-header h1 em { color: var(--color-accent); }
.archive-type { color: var(--color-accent); }
.archive-grid > li { border-color: var(--color-border); }
.entry-title { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; }
.entry-meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }

.not-found h1 { font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 0.95; }
body.error404 .not-found h1 { font-size: clamp(3.5rem, 2rem + 7vw, 8rem); }

.search-form__submit { border-radius: 0; background: var(--color-accent); color: var(--color-on-accent); }
.search-form__submit:hover { background: var(--color-accent-hover); }

.location-map-block, .location-map__consent, .location-map__iframe-wrap { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════
   9. TOOLS (« Les outils que j'utilise »)
   ═══════════════════════════════════════════════════════════════════ */
.tools-index__title { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem); line-height: 0.98; }
.tools-index__count { color: var(--color-accent); }
.tools-filter__pill {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-color: var(--color-border-strong);
}
.tools-filter__pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tools-filter__pill.is-active,
.tools-filter__pill[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.tools-list { border-top-color: var(--color-border); }
.tools-list__link { border-bottom-color: var(--color-border); transition: background var(--dur) var(--ease); }
.tools-list__link:hover { background: linear-gradient(90deg, var(--color-accent-soft) 0%, transparent 40%); }
.tools-list__icon img, .tools-list__icon-placeholder { border-radius: 0; }
.tools-list__name { font-weight: 500; }
.tools-list__cat { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); }

.tool-card__link {
  border-radius: 0;
  border-color: var(--color-border);
  background: var(--color-surface);
}
.tool-card__link:hover { transform: none; border-color: var(--color-accent); background: linear-gradient(160deg, var(--color-accent-soft), var(--color-surface) 50%); }
.tool-card__icon img, .tool-header__icon img { border-radius: 0; }
.tool-thumbnail { border-radius: 0; border: 1px solid var(--color-border); }
.breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* ═══════════════════════════════════════════════════════════════════
   10. FREELANCE PAGE (« Qui suis-je ? »)
   ═══════════════════════════════════════════════════════════════════ */
.fl-page > section + section { border-top-color: var(--color-border); }

.fl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--color-accent);
}
.fl-eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}
.fl-hero__title { font-size: clamp(3rem, 1.6rem + 6vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; }
.fl-hero__subtitle { color: var(--color-muted); }
.fl-hero__image { border-radius: 0; border: 1px solid var(--color-border); }
.fl-hero__image img { filter: grayscale(1) contrast(1.05); transition: filter 600ms var(--ease); }
.fl-hero__image:hover img { filter: none; }
.fl-pitch__photo { border-radius: 0; }

.fl-section-title { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1; }

.fl-services__grid { gap: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.fl-service-card {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  box-shadow: none;
  transition: background var(--dur) var(--ease);
}
.fl-service-card:hover { background: linear-gradient(160deg, var(--color-accent-soft), transparent 50%); transform: none; }
.fl-service-card__icon { border-radius: 0; color: var(--color-accent); background: var(--color-accent-soft); }
.fl-service-card__title { font-weight: 500; }

.fl-project__visual { border-radius: 0; border: 1px solid var(--color-border); }
.fl-project__title { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.fl-project__tags { color: var(--color-accent); border-color: var(--color-accent-line); }

.fl-testimonial { border-radius: 0; border-color: var(--color-border); background: var(--color-surface); }
.fl-testimonial__quote { font-family: var(--font-display); }
.fl-testimonial__quote::before { color: var(--color-accent); }
.fl-testimonial__photo { border-radius: 0; }

/* Final call to action — JHM « Just hire me » block */
.fl-cta {
  background: var(--color-bg);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.fl-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 120%, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
}
.fl-cta .fl-container { position: relative; }
.fl-cta__title { font-size: clamp(3rem, 1.8rem + 5.5vw, 7rem); line-height: 0.95; max-width: 16ch; }
.fl-cta__text { color: var(--color-muted); }
.fl-cta__links a { color: var(--color-accent); }
/* The CTA button is the page's one strong action — accent fill, like « Start a conversation » */
.fl-cta .fl-btn,
.fl-cta .fl-btn--outline {
  padding: 18px 32px;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 13px;
  font-weight: 600;
}
.fl-cta .fl-btn:hover,
.fl-cta .fl-btn--outline:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
  box-shadow: 0 12px 40px var(--color-accent-soft);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   11. FORMS (quote / contact / quiz) — keep them square and on-palette
   ═══════════════════════════════════════════════════════════════════ */
.devis-form, .contact-form, .quiz, .quiz-card, .quiz-question {
  border-radius: 0 !important;
}
.devis-form__field label, .contact-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top-color: var(--color-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-faint);
}
.footer-brand__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}
.footer-brand__name:hover { color: var(--color-accent); }
.footer-brand__name > span[aria-hidden="true"] { display: none; }
.footer-brand__tagline { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
.footer-bottom { border-top-color: var(--color-border); letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════════
   13. MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}