/* =========================================================================
   Batiself — Global design tokens.
   Single source of truth for typography, colors and layout. Loaded site-wide.
   Component CSS files MUST consume these variables — no orphan font-size,
   font-weight, line-height, letter-spacing or text-transform values.
   ========================================================================= */

:root {

	/* =====================================================================
	   COLORS
	   Strict 6-color palette. No other hex literals allowed in component
	   CSS — derive any tone variation from black/white with rgba() instead
	   of introducing a new color.
	     Blue       #005BA7   → primary brand
	     Dark Blue  #103656   → primary-dark (footer bands, hover)
	     Yellow     #FAB800   → accent (CTAs, kicker, strong words)
	     Light bg   #EFF5FA   → page background alt (sidebars, soft bands)
	     White      #FFFFFF
	     Black      #000000   → text + derived muted/border via opacity
	   Title-on-white-or-light-bg rule: titles render in Blue. Text in Black.
	   ===================================================================== */
	--bs-color-primary:      #005BA7;       /* Blue */
	--bs-color-primary-dark: #103656;       /* Dark Blue */
	--bs-color-accent:       #FAB800;       /* Yellow */
	--bs-color-promo:        var(--bs-color-accent);  /* legacy alias — promo now uses Yellow */
	--bs-color-text:         #000000;       /* Black */
	--bs-color-muted:        rgba(0, 0, 0, .55);   /* derived from Black */
	--bs-color-bg:           #FFFFFF;       /* White */
	--bs-color-bg-alt:       #EFF5FA;       /* Light bg */
	--bs-color-border:       rgba(0, 0, 0, .1);    /* derived from Black */
  
	/* =====================================================================
	   LAYOUT
	   ===================================================================== */
	/* Section padding tuned for a DIY/hardware e-commerce: spacious enough
	   to feel professional but tighter than editorial sites so the catalog
	   density stays practical. */
	--bs-section-pad-y: clamp(56px, 5vw, 96px);
	--bs-container-w:   1350px;     /* canonical container width — used by .home-container,
	                                   .bs-header__inner, .bs-footer__inner, .responsive-container.
	                                   Single source of truth for site-wide width harmony. */
	--bs-container-pad: 24px;       /* canonical horizontal padding inside any container */
	--bs-header-h:      80px;

	/* =====================================================================
	   SPACING SCALE
	   Use these tokens for all gaps / paddings / margins inside components
	   and between blocks. Single rhythm for the whole site.
	   ===================================================================== */
	--bs-space-2xs:  4px;
	--bs-space-xs:   8px;
	--bs-space-sm:  16px;
	--bs-space-md:  24px;
	--bs-space-lg:  40px;
	--bs-space-xl:  64px;
	--bs-space-2xl: 96px;

	/* =====================================================================
	   TYPOGRAPHY — PRIMITIVES
	   Atomic scales. Compose into roles below; do not consume directly in
	   component CSS unless you have a documented reason.
	   ===================================================================== */
	--bs-font-family: 'Geist', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Size ramp */
	--bs-text-xs:    11px;
	--bs-text-sm:    13px;
	--bs-text-base:  15px;
	--bs-text-md:    18px;
	--bs-text-lg:    clamp(20px, 1.6vw, 24px);
	--bs-text-xl:    clamp(24px, 2.2vw, 32px);
	--bs-text-2xl:   clamp(30px, 3vw, 44px);
	--bs-text-3xl:   clamp(40px, 5vw, 64px);
	--bs-text-4xl:   clamp(40px, 5.5vw, 72px);   /* display */

	/* Weight ramp (matches Geist weights loaded by header-enqueue) */
	--bs-weight-regular:  400;
	--bs-weight-medium:   500;
	--bs-weight-semibold: 600;
	--bs-weight-bold:     700;
	--bs-weight-black:    800;

	/* Leading ramp */
	--bs-leading-flat:    1;
	--bs-leading-display: 0.98;   /* exact value for the big hero title */
	--bs-leading-tight:   1.1;
	--bs-leading-snug:    1.25;
	--bs-leading-normal:  1.5;
	--bs-leading-loose:   1.7;

	/* Tracking ramp */
	--bs-tracking-tight:   -0.01em;
	--bs-tracking-normal:   0;
	--bs-tracking-wide:     0.04em;
	--bs-tracking-widest:   0.12em;

	/* =====================================================================
	   TYPOGRAPHY — ROLES
	   Each role bundles size + weight + leading + tracking + case for a
	   specific class of element. Two ways to apply:

	     1. Utility class in markup:   <h2 class="bs-type-h2">…</h2>
	     2. Atomic vars in component CSS:
	          .home-section__title {
	            font-size:      var(--bs-type-h2-size);
	            font-weight:    var(--bs-type-h2-weight);
	            line-height:    var(--bs-type-h2-leading);
	            letter-spacing: var(--bs-type-h2-tracking);
	            text-transform: var(--bs-type-h2-case);
	          }

	   Role catalog:
	     display   → hero project title, big page H1 (clamp 40-72, black, uppercase)
	     h1        → main page title (clamp 40-64, black, uppercase)
	     h2        → section title (clamp 30-44, medium, uppercase)
	     h3        → subsection / card title (clamp 20-24, bold)
	     h4        → minor heading / meta block title (13, uppercase, bold)
	     lead      → intro paragraph below H1/H2 (18)
	     body      → paragraph (15, leading normal)
	     body-sm   → secondary copy / card subtitle / dd (13)
	     quote     → blockquote (clamp 20-24, italicizable)
	     eyebrow   → uppercase kicker above a title (11, widest tracking)
	     meta      → label / dt (13, medium)
	     button    → CTA label (13, uppercase, bold)
	     nav       → menu item (13, uppercase, bold)
	     caption   → micro label / badge (10)
	   ===================================================================== */

	/* --- display --- */
	--bs-type-display-size:     var(--bs-text-4xl);
	--bs-type-display-weight:   var(--bs-weight-black);
	--bs-type-display-leading:  var(--bs-leading-display);
	--bs-type-display-tracking: var(--bs-tracking-tight);
	--bs-type-display-case:     uppercase;

	/* --- h1 --- */
	--bs-type-h1-size:     var(--bs-text-3xl);
	--bs-type-h1-weight:   var(--bs-weight-black);
	--bs-type-h1-leading:  var(--bs-leading-tight);
	--bs-type-h1-tracking: var(--bs-tracking-tight);
	--bs-type-h1-case:     uppercase;

	/* --- h2 --- */
	--bs-type-h2-size:     var(--bs-text-2xl);
	--bs-type-h2-weight:   var(--bs-weight-medium);
	--bs-type-h2-leading:  var(--bs-leading-tight);
	--bs-type-h2-tracking: var(--bs-tracking-tight);
	--bs-type-h2-case:     uppercase;

	/* --- h3 --- */
	--bs-type-h3-size:     var(--bs-text-lg);
	--bs-type-h3-weight:   var(--bs-weight-bold);
	--bs-type-h3-leading:  var(--bs-leading-tight);
	--bs-type-h3-tracking: var(--bs-tracking-normal);
	--bs-type-h3-case:     none;

	/* --- h4 --- */
	--bs-type-h4-size:     var(--bs-text-sm);
	--bs-type-h4-weight:   var(--bs-weight-bold);
	--bs-type-h4-leading:  var(--bs-leading-tight);
	--bs-type-h4-tracking: var(--bs-tracking-wide);
	--bs-type-h4-case:     uppercase;

	/* --- lead --- */
	--bs-type-lead-size:     var(--bs-text-md);
	--bs-type-lead-weight:   var(--bs-weight-regular);
	--bs-type-lead-leading:  var(--bs-leading-snug);
	--bs-type-lead-tracking: var(--bs-tracking-normal);
	--bs-type-lead-case:     none;

	/* --- body --- */
	--bs-type-body-size:     var(--bs-text-base);
	--bs-type-body-weight:   var(--bs-weight-regular);
	--bs-type-body-leading:  var(--bs-leading-normal);
	--bs-type-body-tracking: var(--bs-tracking-normal);
	--bs-type-body-case:     none;

	/* --- body-sm --- */
	--bs-type-body-sm-size:     var(--bs-text-sm);
	--bs-type-body-sm-weight:   var(--bs-weight-regular);
	--bs-type-body-sm-leading:  var(--bs-leading-normal);
	--bs-type-body-sm-tracking: var(--bs-tracking-normal);
	--bs-type-body-sm-case:     none;

	/* --- quote --- */
	--bs-type-quote-size:     var(--bs-text-lg);
	--bs-type-quote-weight:   var(--bs-weight-medium);
	--bs-type-quote-leading:  var(--bs-leading-snug);
	--bs-type-quote-tracking: var(--bs-tracking-normal);
	--bs-type-quote-case:     none;

	/* --- eyebrow --- */
	--bs-type-eyebrow-size:     var(--bs-text-xs);
	--bs-type-eyebrow-weight:   var(--bs-weight-bold);
	--bs-type-eyebrow-leading:  var(--bs-leading-flat);
	--bs-type-eyebrow-tracking: var(--bs-tracking-widest);
	--bs-type-eyebrow-case:     uppercase;

	/* --- meta --- */
	--bs-type-meta-size:     var(--bs-text-sm);
	--bs-type-meta-weight:   var(--bs-weight-medium);
	--bs-type-meta-leading:  var(--bs-leading-snug);
	--bs-type-meta-tracking: var(--bs-tracking-normal);
	--bs-type-meta-case:     none;

	/* --- button --- */ 
	--bs-type-button-size:     var(--bs-text-sm); 
	--bs-type-button-weight:   var(--bs-weight-bold);
	--bs-type-button-leading:  var(--bs-leading-flat);
	--bs-type-button-tracking: var(--bs-tracking-wide);
	--bs-type-button-case:     uppercase;

	/* --- nav --- */
	--bs-type-nav-size:     var(--bs-text-sm);
	--bs-type-nav-weight:   var(--bs-weight-bold);
	--bs-type-nav-leading:  var(--bs-leading-flat);
	--bs-type-nav-tracking: var(--bs-tracking-wide);
	--bs-type-nav-case:     uppercase;

	/* --- caption --- */
	--bs-type-caption-size:     10px;
	--bs-type-caption-weight:   var(--bs-weight-bold);
	--bs-type-caption-leading:  var(--bs-leading-flat);
	--bs-type-caption-tracking: var(--bs-tracking-normal);
	--bs-type-caption-case:     none;
}

/* Container widens slightly on very wide displays. Cap matches the prior
   .responsive-container behaviour to keep visual rhythm controlled. */
@media (min-width: 1850px) { 
	:root { --bs-container-w: 1600px; }
}

/* =========================================================================
   TYPOGRAPHY — UTILITY CLASSES
   Drop-in classes that apply a full role at once. Use in markup when a
   component doesn't already have its own selector, or to override.
   ========================================================================= */
.bs-type-display, .bs-type-h1, .bs-type-h2, .bs-type-h3, .bs-type-h4,
.bs-type-lead, .bs-type-body, .bs-type-body-sm, .bs-type-quote,
.bs-type-eyebrow, .bs-type-meta, .bs-type-button, .bs-type-nav, .bs-type-caption {
	font-family: var(--bs-font-family);
}

.bs-type-display {
	font-size:      var(--bs-type-display-size);
	font-weight:    var(--bs-type-display-weight);
	line-height:    var(--bs-type-display-leading);
	letter-spacing: var(--bs-type-display-tracking);
	text-transform: var(--bs-type-display-case);
}
.bs-type-h1 {
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-type-h1-weight);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
	text-transform: var(--bs-type-h1-case);
}
.bs-type-h2 {
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-type-h3 {
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: var(--bs-type-h3-case);
}
.bs-type-h4 {
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-type-lead {
	font-size:      var(--bs-type-lead-size);
	font-weight:    var(--bs-type-lead-weight);
	line-height:    var(--bs-type-lead-leading);
	letter-spacing: var(--bs-type-lead-tracking);
	text-transform: var(--bs-type-lead-case);
}
.bs-type-body {
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
	text-transform: var(--bs-type-body-case);
}
.bs-type-body-sm {
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
	text-transform: var(--bs-type-body-sm-case);
}
.bs-type-quote {
	font-size:      var(--bs-type-quote-size);
	font-weight:    var(--bs-type-quote-weight);
	line-height:    var(--bs-type-quote-leading);
	letter-spacing: var(--bs-type-quote-tracking);
	text-transform: var(--bs-type-quote-case);
}
.bs-type-eyebrow {
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	line-height:    var(--bs-type-eyebrow-leading);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-type-meta {
	font-size:      var(--bs-type-meta-size);
	font-weight:    var(--bs-type-meta-weight);
	line-height:    var(--bs-type-meta-leading);
	letter-spacing: var(--bs-type-meta-tracking);
	text-transform: var(--bs-type-meta-case);
}
.bs-type-button {
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.bs-type-nav {
	font-size:      var(--bs-type-nav-size);
	font-weight:    var(--bs-type-nav-weight);
	line-height:    var(--bs-type-nav-leading);
	letter-spacing: var(--bs-type-nav-tracking);
	text-transform: var(--bs-type-nav-case);
}
.bs-type-caption {
	font-size:      var(--bs-type-caption-size);
	font-weight:    var(--bs-type-caption-weight);
	line-height:    var(--bs-type-caption-leading);
	letter-spacing: var(--bs-type-caption-tracking);
	text-transform: var(--bs-type-caption-case);
}

/* =========================================================================
   GLOBAL FONT ENFORCEMENT (Geist on every page)
   ---------------------------------------------------------------------------
   tokens.css loads on EVERY front-end page, so this is the single global
   place to guarantee Geist applies site-wide — fixing the Chrome issue
   where Services / Contact / Project pages fell back to the theme/UA font
   on elements not covered by a component rule.

   - `body` sets the inherited default (most text inherits from here).
   - Headings + FORM CONTROLS are listed explicitly because form controls
     (input/select/textarea/button) do NOT inherit font-family from body
     by default — a classic cross-browser gap Chrome exposes.
   - The `body .site-main :is(...)` rule lifts specificity to (0,1,2),
     beating Elementor's kit selectors (e.g. `.elementor-kit-N h2` = 0,1,1)
     WITHOUT !important.
   - Intentionally NO bare `span` / `i` selectors → icon fonts (dashicons,
     WooCommerce rating stars, Elementor icons) keep their own font-family.
   - The Geist webfont itself is loaded via Google Fonts with
     `&display=swap` (see inc/header-enqueue.php) → no FOIT, instant text.
   ========================================================================= */
body {
	font-family: var(--bs-font-family);
}
h1, h2, h3, h4, h5, h6,
button, input, select, textarea, optgroup {
	font-family: var(--bs-font-family);
}
body .site-main :is(
	h1, h2, h3, h4, h5, h6,
	p, a, li, blockquote, figcaption,
	button, input, select, textarea, label,
	dt, dd, th, td
) {
	font-family: var(--bs-font-family);
}

/* =========================================================================
   GLOBAL RESPONSIVE BASE (loaded on every page via tokens.css)
   ---------------------------------------------------------------------------
   A safety net so nothing overflows horizontally and media never breaks the
   layout, regardless of the page template. Kept minimal + icon-safe.
   ========================================================================= */

/* No stray horizontal scroll. `overflow-x: clip` (not hidden) does NOT
   create a scroll container, so it preserves position: sticky (e.g. the
   Services timeline) — unlike overflow-x: hidden which would break it.
   Pairs with the full-bleed mega panels that use width: 100vw. */
html {
	overflow-x: clip;
	max-width: 100%;
}

/* Responsive media — never exceed their container; keep aspect ratio.
   Element-level (0,0,1) so any component rule (e.g. fixed logo height)
   wins. iframes (maps) + embeds included. */
img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}
img,
video {
	height: auto;
}

/* Long words / URLs wrap instead of forcing horizontal scroll. */
.site-main p,
.site-main li,
.site-main a,
.site-main h1,
.site-main h2,
.site-main h3 {
	overflow-wrap: break-word;
}

/* iOS Safari zooms the whole viewport when a form control with font-size < 16px
   gets focus (our body text is 15px). Force 16px on touch widths so focusing a
   field (search, contact, account, checkout…) never triggers that jarring zoom.
   Desktop typography is untouched. */
@media (max-width: 768px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	select,
	textarea {
		font-size: 16px;
	}
}

/* Snappier taps: no double-tap-zoom / 300ms delay on interactive controls. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.button,
summary {
	touch-action: manipulation;
}

/* Small-mobile title floors — keep the big fluid headings from feeling
   oversized on phones (≤480px). Only lowers the clamp floors; desktop
   sizes are untouched. */
@media (max-width: 480px) {
	:root {
		--bs-text-4xl: clamp(30px, 9vw, 44px);   /* display */
		--bs-text-3xl: clamp(28px, 8vw, 40px);   /* h1 */
		--bs-text-2xl: clamp(24px, 7vw, 34px);   /* h2 */
	}
}

/* =========================================================================
   SIGNATURE GRAPHIQUE — TWO DIAGONALS ON BG-IMAGE SECTIONS
   ---------------------------------------------------------------------------
   Subtle architectural signature applied as a single CSS background made of
   TWO thin diagonals (white, low opacity) angled toward the upper-right
   corner. Each section that runs a dark gradient overlay COMBINES its
   (now-lighter) overlay with `var(--bs-overlay-diagonals)` in a single
   `background:` shorthand:

     .my-cover::before {
       background:
         linear-gradient(180deg, transparent 50%, rgba(0,0,0,.30) 100%),
         var(--bs-overlay-diagonals);
     }

   Pixel-precise lines (calc + tiny px ranges) so the diagonals stay crisp
   at any section size. Mobile dims them slightly via the media query below.
   ========================================================================= */
:root {
	/* TWO white diagonal BANDS on the right of a section, leaning toward the
	   upper-right (forward-slash). New 2026-06 geometry: a THICK left band +
	   a THIN right band, with a stronger rightward lean (108° gradient axis)
	   so it matches the Batiself logo slashes. Same geometry across the site.

	   Two strength variants:
	     --bs-overlay-diagonals       → STRONG (flat-color backgrounds)
	     --bs-overlay-diagonals-soft  → SUBTLE (photo backgrounds — easier on the eye)

	   Layout of the gradient (axis at 108° → leans right, high % = lower-right):
	     0–56%    transparent (image unchanged on the left)
	     56–70%   main band (THICK, ~14% wide)
	     70–77%   transparent gap
	     77–81.5% secondary band (THIN, ~4.5% wide, fainter)
	     81.5–100% transparent again
	*/
	--bs-overlay-diagonals: linear-gradient(
		108deg,
		transparent 56%,
		rgba(255, 255, 255, .48) 56%,
		rgba(255, 255, 255, .48) 70%,
		transparent 70%,
		transparent 77%,
		rgba(255, 255, 255, .34) 77%,
		rgba(255, 255, 255, .34) 81.5%,
		transparent 81.5%
	);
	/* Bandes diagonales RETIRÉES des photos (demande client 2026-06) : le voile
	   « soft » qui se posait sur les images est désactivé partout d'un coup.
	   La variante FORTE (--bs-overlay-diagonals) reste, uniquement pour la forme
	   blanche des placeholders « catégorie sans image » sur fond bleu plat. */
	--bs-overlay-diagonals-soft: none;
}

/* Mobile — single (main) band on both variants so the signature reads
   clearly without fighting content on small screens. */
@media (max-width: 600px) {
	:root {
		--bs-overlay-diagonals: linear-gradient(
			108deg,
			transparent 60%,
			rgba(255, 255, 255, .42) 60%,
			rgba(255, 255, 255, .42) 76%,
			transparent 76%
		);
		--bs-overlay-diagonals-soft: none; /* bandes retirées des photos */
	}
}