/* =============================================================
   IZELEN — brand layer over Bootstrap 5 (self-hosted, no build).
   Loaded AFTER bootstrap.min.css. Honours prefers-reduced-motion.
   Palette & tokens follow docs/Brand Guide.md v1.1.
   ============================================================= */

/* ---- Self-hosted fonts (no Google Fonts) ----------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ---- Brand tokens (Brand Guide v1.1 scales) -------------------------- */
:root {
  --ink:    #212529;  /* Neutral-950 */
  --paper:  #F8F9FA;  /* Neutral-50  */

  --blue-50:  #F5F7F9;
  --blue-100: #ECEFF2;
  --blue-200: #CFD7DF;
  --blue-300: #A9B7C6;
  --blue:     #406080; /* Blue-500 — primary / dominant */
  --blue-600: #36526D;
  --blue-700: #2D435A;
  --blue-800: #203040; /* Blue-800 — deep brand surface (reserve) */
  --blue-900: #131D26; /* Blue-900 — footer (deeper than the CTA bands) */
  --blue-950: #0A0E13; /* Blue-950 — terminal console black-blue */

  --olive-50:  #F8F8F6;
  --olive-200: #DCDBD3;
  --olive:     #72704E; /* Olive-500 — secondary */
  --olive-600: #615F42;

  --orange-100: #FFF5EC; /* Orange-100 — icon-chip hover wash */
  --orange-300: #FFD3AA;
  --orange:     #FF9D42; /* Orange-500 — accent (10% only) */
  --orange-600: #D98538;

  --line: rgba(33, 37, 41, 0.12);

  /* Fixed mesh height. background-size stretches mesh.png horizontally to the
     hero width while this value sets the vertical size in px. Same on every
     page. Raise it to stretch taller / crop more. */
  --hero-mesh-h: 768px;
}

/* ---- Map Bootstrap variables onto the brand -------------------------- */
:root {
  --bs-primary: var(--blue);
  --bs-primary-rgb: 64, 96, 128;
  --bs-secondary: var(--olive);
  --bs-secondary-rgb: 114, 112, 78;

  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #ffffff;

  --bs-body-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-link-color: var(--blue);
  --bs-link-color-rgb: 64, 96, 128;
  --bs-link-hover-color: var(--orange);          /* per Brand Guide link hover */
  --bs-link-hover-color-rgb: 255, 157, 66;

  --bs-border-color: var(--line);
  --bs-border-radius: 0.5rem;
  --bs-emphasis-color: var(--ink);
}

html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

::selection { background: var(--orange); color: #fff; }

/* Visible keyboard focus everywhere; orange on dark panels for contrast */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--orange); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
h1 { letter-spacing: -0.04em; }
.text-mono { font-family: var(--bs-font-monospace); }

/* ---- Layout helpers -------------------------------------------------- */
.container { --bs-gutter-x: 3rem; }                      /* 1.5rem (24px) each side */
@media (min-width: 992px)  { .container { --bs-gutter-x: 5rem; } }   /* 2.5rem (40px) */
@media (min-width: 1200px) { .container { max-width: 1280px; } }     /* Brand Guide max */

.section { padding-block: 5rem; }
@media (min-width: 992px) { .section { padding-block: 7rem; } }
.section--tight { padding-block: 4rem; }

/* Left divider that only appears from lg up (Bootstrap has no responsive border) */
@media (min-width: 992px) { .border-lg-start { border-left: 1px solid var(--line); } }

.border-line { border-color: var(--line) !important; }
.bg-paper { background-color: var(--paper) !important; }
/* Section-rhythm tint — olive, alternating with white */
.bg-olive-50 { background-color: var(--olive-50) !important; }
/* Card side-accent rules (blue "parentheses" — left + right, off the 10% orange budget) */
.accent-sides { border-left: 2px solid var(--blue) !important; border-right: 2px solid var(--blue) !important; }

/* Ink text tones (replace Tailwind text-ink/NN opacities) */
.t-85 { color: rgba(33, 37, 41, 0.85); }
.t-80 { color: rgba(33, 37, 41, 0.80); }
.t-70 { color: rgba(33, 37, 41, 0.70); }
.t-60 { color: rgba(33, 37, 41, 0.60); }
.t-55 { color: rgba(33, 37, 41, 0.55); }
.fw-medium { font-weight: 500; }

/* ---- Eyebrow label (mono) — uses the SECONDARY olive ----------------- */
.eyebrow {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--olive); margin: 0;
}
.eyebrow .prompt { color: var(--orange); }               /* the > stays accent orange */

/* Meta / caption lists (mono) — secondary olive text, orange markers */
.meta { font-family: var(--bs-font-monospace); font-size: 0.75rem; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--olive); list-style: none; padding: 0; margin: 0; }
.meta li + li { margin-top: 0.5rem; }
.accent { color: var(--orange); }                        /* › ✓ > markers */

/* Vertical accent rule beside a text block (orange — approved accent) */
.rule-accent { border-left: 2px solid var(--orange); padding-left: 1.25rem; }
blockquote.rule-accent { font-style: italic; color: rgba(33,37,41,0.8); }

/* ---- Hero / page-header backdrop: mesh.png (replaces grid texture) --- */
.hero {
  position: relative;
  background-color: #fff;   /* hero sits on white; the mesh reads against it */
  background-image: url('../mesh.png');
  background-position: left top;   /* left edge pinned to viewport; crops on the right / bottom */
  background-size: 100% var(--hero-mesh-h);  /* horizontal → hero width; vertical → fixed px */
  background-repeat: no-repeat;
}
/* Below 1280px the mesh stops narrowing: width held at its native 1280px so it
   crops off the right (background-position: left) instead of squashing. */
@media (max-width: 1280px) {
  .hero { background-size: 1280px var(--hero-mesh-h); }
}
.hero.bg-paper { background-color: var(--paper); }

/* Drop the terminal card down so its top edge meets the top of the h1 — past
   the eyebrow line. Offset = eyebrow line box (0.75rem × 1.5 = 1.125rem) + the
   h1's top margin (mt-4 = 1.5rem ⇒ 2.625rem). Only lg+, where the text and
   terminal columns sit side by side. */
@media (min-width: 992px) {
  .hero .terminal { margin-top: var(--terminal-mt, 2.625rem); }
}

/* ---- Buttons: brand blue, NO orange on primary (per instruction) ----- */
.btn { --bs-btn-font-weight: 500; --bs-btn-font-size: 0.875rem;
       --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 0.375rem; }
.btn-primary {
  --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--blue-700); --bs-btn-hover-border-color: var(--blue-700); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--blue-700); --bs-btn-active-border-color: var(--blue-700); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 169, 183, 198;              /* Blue-300 ring */
}
.btn-secondary {                                          /* re-styled to outline-ink */
  --bs-btn-bg: transparent; --bs-btn-border-color: rgba(33,37,41,0.25); --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--blue-50); --bs-btn-hover-border-color: var(--blue); --bs-btn-hover-color: var(--blue);
  --bs-btn-active-bg: var(--blue-50); --bs-btn-active-border-color: var(--blue); --bs-btn-active-color: var(--blue);
  --bs-btn-focus-shadow-rgb: 169, 183, 198;
}

/* ---- Header + nav ---------------------------------------------------- */
/* Brand-blue bar (Blue-500). Translucent + blur so content reads through it. */
.site-header { background: rgba(64,96,128,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.12); }
/* On the blue bar, keyboard focus rings switch to orange (as on .on-dark panels) */
.site-header :focus-visible { outline-color: var(--orange); }
/* Logo (SVG mark) — always the SVG, never live text (see Brand Guide §1) */
.site-logo { display: inline-flex; text-decoration: none; }
.site-logo img { display: block; height: 2.5rem; width: auto; }
.offcanvas-header .site-logo img { height: 2rem; }
/* Header: larger mark, pulled flush-left so the `>` aligns with the page content
   below (the SVG bakes ~30u of left clear space into its 103u-tall viewBox). */
.site-header .site-logo { margin-left: calc(-3.25rem * 30 / 103); }
.site-header .site-logo img { height: 3.25rem; }

.nav-link { position: relative; color: rgba(33,37,41,0.7); font-weight: 500; padding-inline: 0; }
.nav-link:hover, .nav-link:focus { color: var(--ink); }
/* Header nav sits on the blue bar → white links (scoped, so the white offcanvas keeps its dark links) */
.site-header .nav-link { color: rgba(255,255,255,0.75); }
.site-header .nav-link:hover, .site-header .nav-link:focus, .site-header .nav-link.active { color: #fff; }
/* Mobile hamburger (btn-secondary, d-md-none) → light on the blue bar */
.site-header .btn-secondary {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,0.35);
  --bs-btn-hover-bg: rgba(255,255,255,0.12); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,0.12); --bs-btn-active-border-color: #fff; --bs-btn-active-color: #fff;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }      /* active page underlined in orange */
.nav-link.active { color: var(--ink); }

/* Offcanvas (mobile menu) — Bootstrap component, brand-styled links */
.offcanvas .nav-link { font-size: 1.125rem; padding: 0.6rem 0.25rem; }
.offcanvas .nav-link::after { display: none; }
.offcanvas .nav-link:hover { background: var(--paper); border-radius: 0.375rem; }

/* ---- Language switcher (FR · EN · DE) -------------------------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 0.55rem;
               font-family: var(--bs-font-monospace); font-size: 0.8125rem;
               letter-spacing: 0.04em; }
.lang-switch a, .lang-switch .lang-current { text-decoration: none; }
.lang-switch a { color: var(--blue); font-weight: 500; }
.lang-switch a:hover, .lang-switch a:focus { color: var(--orange); }
.lang-switch .lang-current { color: var(--ink); font-weight: 600; }
/* thin dot separators between the three codes */
.lang-switch > * + *::before { content: "·"; margin-right: 0.55rem; opacity: 0.5; }
/* Header context (blue bar → light text), divider off the nav links */
.site-header .lang-switch { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.2); }
.site-header .lang-switch a { color: rgba(255,255,255,0.6); }
.site-header .lang-switch a:hover, .site-header .lang-switch a:focus { color: #fff; }
.site-header .lang-switch .lang-current { color: #fff; }
.site-header .lang-switch > * + *::before { color: rgba(255,255,255,0.45); opacity: 1; }
/* Offcanvas context (white panel → dark text), divider above the codes */
.offcanvas .lang-switch { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.offcanvas .lang-switch a { color: rgba(33,37,41,0.6); }
.offcanvas .lang-switch a:hover, .offcanvas .lang-switch a:focus { color: var(--ink); }

/* ---- Service cards & icons ------------------------------------------- */
.svc-card { display: flex; flex-direction: column; height: 100%; background: #fff;
            border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem;
            transition: border-color .2s ease, box-shadow .2s ease; }
.svc-card:hover { border-color: rgba(64,96,128,0.4); box-shadow: 0 14px 34px -16px rgba(33,37,41,0.25); }
.svc-icon { display: inline-flex; align-items: center; justify-content: center;
            width: 3.25rem; height: 3.25rem; border-radius: 0.75rem;
            background: var(--blue-200); color: var(--blue);   /* darker chip — visible on olive sections */
            transition: background .2s ease, color .2s ease; }   /* blue chip */
.svc-card:hover .svc-icon { background: var(--orange-100); color: var(--orange); }   /* → orange on hover */
.svc-link { font-weight: 500; color: var(--blue); text-decoration: none; }
.svc-link:hover { color: var(--orange); }

/* ---- Contact method cards (compact e-mail / phone) ------------------ */
.contact-card { display: flex; align-items: center; gap: 0.9rem; height: 100%;
                background: #fff; border: 1px solid var(--line); border-radius: 0.75rem;
                padding: 0.75rem 1.1rem;            /* keeps the card ≲ 2× a standard button */
                transition: border-color .2s ease, box-shadow .2s ease; }
.contact-card:hover { border-color: rgba(64,96,128,0.4); box-shadow: 0 14px 34px -16px rgba(33,37,41,0.25); }
.contact-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
              width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
              background: var(--blue-50); color: var(--blue);
              transition: background .2s ease, color .2s ease; }
.contact-card:hover .contact-ic { background: var(--orange-100); color: var(--orange); }
.contact-text { display: flex; flex-direction: column; min-width: 0; }
.contact-label { font-family: var(--bs-font-monospace); font-size: 0.7rem; text-transform: uppercase;
                 letter-spacing: 0.12em; color: var(--olive); }
.contact-value { font-family: var(--bs-font-monospace); font-size: 1.0625rem; font-weight: 600;
                 color: var(--blue); line-height: 1.25; word-break: break-word; transition: color .2s ease; }
.contact-card:hover .contact-value, .contact-card:focus-visible .contact-value { color: var(--orange); }

/* ---- Terminal summary (shared across all pages) ---------------------- */
.terminal {
  background: var(--blue-950); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(64,96,128,0.25); border-radius: 0.75rem; padding: 1.5rem;
  font-family: var(--bs-font-monospace); font-size: 0.875rem; line-height: 1.7;
  box-shadow: 0 24px 48px -18px rgba(33,37,41,0.45);
}
.terminal pre { margin: 0; white-space: pre-wrap; font: inherit; color: inherit; }
.terminal .accent { color: var(--orange); }
.terminal .muted { color: rgba(255,255,255,0.55); }

/* ---- Dark CTA bands -------------------------------------------------- */
.on-dark { background: var(--blue-700); color: #fff; }   /* CTA bands — mid navy, lighter than the footer */
.on-dark h2, .on-dark p { color: #fff; }
.terminal.on-dark { background: var(--blue-950); }       /* terminals stay the darkest blue-black */
/* Primary CTA on a navy band: invert to white so the action pops (orange on hover) */
.on-dark .btn-primary {
  --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--blue-700);
  --bs-btn-hover-bg: var(--orange); --bs-btn-hover-border-color: var(--orange); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--orange); --bs-btn-active-border-color: var(--orange); --bs-btn-active-color: #fff;
}

/* ---- Footer (deep brand-blue surface) -------------------------------- */
.site-footer { background: var(--blue-900); color: rgba(255,255,255,0.72); border-top: 1px solid rgba(255,255,255,0.07); }
.site-footer p, .site-footer address { color: rgba(255,255,255,0.72); }
.site-footer .t-70 { color: rgba(255,255,255,0.70); }
.site-footer .t-60 { color: rgba(255,255,255,0.58); }
.site-footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
/* Footer: full dark lockup (with tagline), pulled flush-left so the `>` aligns
   with the text below (40u of left clear space within the 130u-tall viewBox). */
.site-footer .site-logo { margin-left: calc(-4.5rem * 40 / 130); }
.site-footer .site-logo img { height: 4.5rem; }
.site-footer .footer-label { color: rgba(255,255,255,0.5); }
.site-footer .border-top { border-top-color: rgba(255,255,255,0.14) !important; }
.site-footer .border-top p { color: rgba(255,255,255,0.5); }
/* Base footer-label (kept dark for the Contact page's "Coordonnées" on light bg) */
.footer-label { font-family: var(--bs-font-monospace); font-size: 0.75rem; text-transform: uppercase;
                letter-spacing: 0.18em; color: rgba(33,37,41,0.4); }

/* ---- Scroll reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Blinking terminal cursor --------------------------------------- */
.cursor { animation: blink 1.15s steps(1, end) infinite; color: var(--orange); }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Honour reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cursor { animation: none; }
  .nav-link::after, .svc-card, .svc-icon { transition: none; }
  * { scroll-behavior: auto !important; }
}