@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo.woff2") format("woff2");
  font-weight:600 800;
  font-stretch:100% 118%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/fonts/manrope.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* BUILD — design system tokens.
   Repris de la source Build (tokens/colors · fonts · typography · spacing ·
   radius · elevation · motion · layout). Ne pas inventer de valeur ici :
   toute nouvelle couleur doit venir de la rampe ci-dessous. */

:root{
  /* --- Rampe de base : béton de nuit ---------------------------------- */
  --ink-950:#080C10;
  --ink-900:#0B1116;
  --ink-800:#101820;
  --ink-700:#17222C;
  --ink-600:#1F2C38;
  --ink-500:#2A3A47;
  --ink-400:#3B4652;
  --ink-300:#6B7885;
  --ink-200:#9AA6B2;
  --ink-100:#CDD5DD;
  --ink-050:#F2F4F7;
  --white:#FFFFFF;

  /* --- Hi-viz : le seul accent saturé, une fois par vue --------------- */
  --hiviz-700:#B88C00;
  --hiviz-600:#E5AF00;
  --hiviz-500:#FFC300;
  --hiviz-400:#FFD23F;
  --hiviz-200:#FFE894;
  --hiviz-100:#FFF6D6;

  --blue-600:#1B6FE0;
  --blue-500:#2E86FF;
  --blue-400:#5CA1FF;
  --ok-500:#37D67A;
  --danger-500:#FF4D3D;

  /* --- Alphas sur fond sombre ---------------------------------------- */
  --alpha-050:rgba(242,244,247,0.05);
  --alpha-080:rgba(242,244,247,0.08);
  --alpha-120:rgba(242,244,247,0.12);
  --alpha-220:rgba(242,244,247,0.22);
  --alpha-400:rgba(242,244,247,0.40);
  --scrim:rgba(8,12,16,0.72);

  /* --- Surfaces ------------------------------------------------------- */
  --surface-page:var(--ink-900);
  --surface-raised:var(--ink-800);
  --surface-card:var(--ink-700);
  --surface-inset:var(--ink-950);
  --surface-hover:var(--ink-600);
  --surface-accent:var(--hiviz-500);

  /* --- Texte ---------------------------------------------------------- */
  --text-primary:var(--ink-050);
  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-invert:var(--ink-900);
  --text-accent:var(--hiviz-500);
  --text-link:var(--blue-400);
  --text-link-hover:var(--hiviz-500);

  /* --- Filets --------------------------------------------------------- */
  --border-subtle:var(--alpha-080);
  --border-default:var(--alpha-120);
  --border-strong:var(--alpha-220);
  --border-accent:var(--hiviz-500);
  --focus-ring:var(--hiviz-500);

  /* --- Actions -------------------------------------------------------- */
  --action-primary-bg:var(--hiviz-500);
  --action-primary-bg-hover:var(--hiviz-400);
  --action-primary-bg-active:var(--hiviz-600);
  --action-primary-fg:var(--ink-900);
  --action-secondary-bg:var(--alpha-080);
  --action-secondary-bg-hover:var(--alpha-120);
  --action-secondary-fg:var(--ink-050);
  --action-ghost-fg:var(--ink-100);

  /* --- Typographie ---------------------------------------------------- */
  --font-display:"Archivo","Archivo Expanded","Helvetica Neue",Helvetica,sans-serif;
  --font-sans:"Manrope","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-display-wdth:112;
  --ls-display:-0.035em;
  --ls-title:-0.02em;
  --ls-body:-0.005em;
  --ls-label:0.08em;
  --ls-micro:0.14em;

  /* --- Rayons (par rôle, jamais mélangés) ----------------------------- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-control:var(--radius-pill);
  --radius-card:var(--radius-lg);
  --radius-media:var(--radius-xl);
  --radius-field:var(--radius-md);

  /* --- Élévation ------------------------------------------------------ */
  --shadow-1:0 1px 2px rgba(8,12,16,0.40);
  --shadow-2:0 6px 20px -6px rgba(8,12,16,0.55);
  --shadow-3:0 20px 48px -12px rgba(8,12,16,0.70);
  --shadow-4:0 40px 96px -24px rgba(8,12,16,0.80);
  --shadow-accent:0 8px 28px -8px rgba(255,195,0,0.45);
  --blur-panel:saturate(140%) blur(18px);
  --scrim-bottom:linear-gradient(to top,rgba(8,12,16,0.92) 0%,rgba(8,12,16,0.55) 42%,rgba(8,12,16,0) 100%);
  --grain:repeating-linear-gradient(135deg,rgba(242,244,247,0.035) 0 1px,transparent 1px 4px);

  /* --- Mouvement ------------------------------------------------------ */
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;
  --dur-4:420ms;
  --dur-5:700ms;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.4,0.5,1);
  --transition-control:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
  --press-scale:0.97;

  /* --- Gabarit -------------------------------------------------------- */
  --maxw:1320px;

  /* --- Alias héritées du site (avant Build) --------------------------- */
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --sand:var(--surface-page);
  --sand-deep:var(--surface-raised);
  --paper:var(--surface-card);
  --line:var(--border-default);
  --accent:var(--hiviz-500);
  --accent-ink:var(--text-secondary);
  --font-text:var(--font-sans);
}
/* --- Thème clair (bascule via data-theme sur <html>) ------------------ */
:root[data-theme="clair"]{
  --surface-page:#F2F4F7;
  --surface-raised:#FFFFFF;
  --surface-card:#FFFFFF;
  --surface-inset:#E4E8ED;
  --surface-hover:#E9EDF1;
  --text-primary:#0B1116;
  --text-secondary:#3B4652;
  --text-muted:#6B7885;
  --text-invert:#F2F4F7;
  --ink-100:#1F2C38;
  --ink-300:#3B4652;
  --alpha-050:rgba(11,17,22,0.04);
  --alpha-080:rgba(11,17,22,0.07);
  --alpha-120:rgba(11,17,22,0.13);
  --alpha-220:rgba(11,17,22,0.22);
  --alpha-400:rgba(11,17,22,0.40);
  --accent-ink:#3B4652;
  --nav-bg:rgba(255,255,255,0.78);
  --shadow-1:0 1px 2px rgba(11,17,22,0.08);
  --shadow-2:0 6px 20px -6px rgba(11,17,22,0.14);
  --shadow-3:0 20px 48px -12px rgba(11,17,22,0.18);
  --shadow-4:0 40px 96px -24px rgba(11,17,22,0.22);
  color-scheme:light;
}

@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms;--dur-5:0ms;--press-scale:1}}

*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.55;letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-primary);text-decoration:none;transition:color var(--dur-2) var(--ease-out)}
a:hover{color:var(--hiviz-500)}
img,video{display:block;max-width:100%}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--hiviz-500);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Styles du gabarit : navigation, menu mobile, accordéon, états au survol.
   Généré depuis le projet de design — un seul fichier pour tout le site. */
.nav-wide{display:flex;align-items:center}
.nav-narrow{display:none;align-items:center;gap:10px}
.nav-menu{display:none;border-top:1px solid var(--border-subtle);background:var(--surface-raised);padding:10px 20px 22px;flex-direction:column}
.nav-menu.open{display:flex}
.nav-drop-panel{display:none;position:absolute;top:100%;left:-20px;width:340px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-3);padding:8px;margin-top:-6px;flex-direction:column}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{display:flex}
[style*="aspect-ratio"]{min-width:0;min-height:0}
.theme-toggle{line-height:0}
.theme-toggle svg{display:block}
.theme-toggle .i-sun,.theme-toggle .i-moon{display:flex;align-items:center;justify-content:center}
.theme-toggle .i-moon{display:none}
:root[data-theme="clair"] .theme-toggle .i-sun{display:none}
:root[data-theme="clair"] .theme-toggle .i-moon{display:flex}
.acc-panel{display:none}
.acc-panel.open{display:block}
.site-logo{height:34px;width:auto;display:block;overflow:visible}
.hero-bg-video{display:none}
@media(max-width:920px){.nav-wide{display:none}.nav-narrow{display:flex}.theme-toggle{bottom:74px!important}}
@media(min-width:769px){.hero-video-ready .hero-bg-video{display:block}.hero-video-ready .hero-bg-fallback{display:none}}
@media(max-width:480px){.site-logo{height:22px}}
.nv1:hover{color:var(--text-primary) !important}
.nv2:hover{background:var(--surface-hover) !important}
.nv3:hover{background:var(--surface-hover) !important}
.nv4:hover{background:var(--surface-hover) !important}
.nv5:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.nv6:hover{color:var(--text-primary) !important}
.nv7:hover{color:var(--text-primary) !important;border-color:var(--border-strong) !important}
.nv8:hover{color:var(--text-primary) !important}
.ft1:hover{color:var(--hiviz-500) !important}
.ft2:hover{color:var(--hiviz-500) !important}
.ft3:hover{color:var(--hiviz-500) !important}
.ft4:hover{color:var(--hiviz-500) !important}
.ft5:hover{color:var(--hiviz-500) !important}
.ft6:hover{color:var(--hiviz-500) !important}
.ft7:hover{color:var(--hiviz-500) !important}
.ft8:hover{color:var(--hiviz-500) !important}
.ft9:hover{color:var(--hiviz-500) !important}
.ft10:hover{color:var(--hiviz-500) !important}
.ct1:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.p1s1:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
.hf1:hover{background:rgba(255,255,255,0.12) !important;border-color:rgba(255,255,255,0.6) !important}
.p1s2:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.p1s3:hover{color:var(--hiviz-500) !important;border-bottom-color:var(--hiviz-500) !important}
.p1s4:hover{color:var(--hiviz-500) !important;border-bottom-color:var(--hiviz-500) !important}
.p1s5:hover{color:var(--hiviz-500) !important;border-bottom-color:var(--hiviz-500) !important}
.p1s6:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
.p1s7:hover{color:var(--hiviz-500) !important;border-bottom-color:var(--hiviz-500) !important}
.p2s1:hover{color:var(--hiviz-500) !important}
.p2s2:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.p2s3:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
.p2s4:hover{border-color:var(--ink) !important}
.p2s5:hover{border-color:var(--ink) !important}
.p3s1:hover{color:var(--hiviz-500) !important}
.p3s2:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.p3s3:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
.p3s4:hover{border-color:var(--ink) !important}
.p3s5:hover{border-color:var(--ink) !important}
.p4s1:hover{color:var(--hiviz-500) !important}
.p4s2:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.p4s3:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
.p4s4:hover{border-color:var(--ink) !important}
.p4s5:hover{border-color:var(--ink) !important}
.p5s1:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}
/* contact.php */
@keyframes dcRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
.p7s1:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s2:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s3:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s4:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s5:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s6:focus{border-color:var(--hiviz-500) !important;box-shadow:0 0 0 3px rgba(255,195,0,0.16) !important;outline:none !important}
.p7s7:hover{background:var(--action-primary-bg-hover) !important}
.p7s8:hover{background:var(--surface-hover) !important;border-color:var(--border-accent) !important}
.p7s9:hover{color:var(--ink) !important;border-color:var(--border-strong) !important}
#devis-submit:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none}
.lbj-swal-popup{background:var(--surface-card) !important;color:var(--text-primary) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-card) !important;font-family:var(--font-sans) !important;box-shadow:var(--shadow-3) !important}
.lbj-swal-title{font-family:var(--font-display) !important;font-variation-settings:'wdth' 112;font-weight:800 !important;text-transform:uppercase;letter-spacing:-0.03em;color:var(--text-primary) !important}
.lbj-swal-text{color:var(--text-secondary) !important;font-size:15.5px;line-height:1.6}
.lbj-swal-confirm{height:52px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;background:var(--action-primary-bg);color:var(--action-primary-fg);border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:15.5px;letter-spacing:-0.01em;box-shadow:var(--shadow-accent);transition:var(--transition-control)}
.lbj-swal-confirm:hover{background:var(--action-primary-bg-hover)}
.swal2-icon.swal2-success{border-color:var(--ok-500) !important;color:var(--ok-500) !important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:var(--ok-500) !important}
.swal2-icon.swal2-success [class^="swal2-success-line"]{background-color:var(--ok-500) !important}
.swal2-icon.swal2-error{border-color:var(--danger-500) !important;color:var(--danger-500) !important}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"]{background-color:var(--danger-500) !important}
.swal2-backdrop-show{background:var(--scrim) !important}
/* 404.html */
.e404-link:hover{background:var(--surface-hover) !important}
.e404-btn-primary:hover{background:var(--action-primary-bg-hover) !important;box-shadow:var(--shadow-accent) !important}
.e404-btn-secondary:hover{background:var(--alpha-050) !important;border-color:var(--border-strong) !important}