/* ============================================================
   Acier NT — site vitrine
   Feuille de style compilée à partir du Design System
   « Acier NT Design System » (tokens + composants).
   Portage statique de ui_kits/site/index.html.
   ============================================================ */

/* ─── Tokens · Couleurs ───────────────────────────────── */
:root {
  /* Steel — base ramp */
  --steel-950: #0B0E11;
  --steel-900: #12161B;
  --steel-850: #171D23;
  --steel-800: #1F262E;
  --steel-700: #2C353F;
  --steel-600: #3E4A56;
  --steel-500: #58656F;
  --steel-400: #7A8791;
  --steel-300: #A3AEB7;
  --steel-200: #C9D1D7;
  --steel-100: #E4E8EB;
  --steel-50:  #F2F4F5;

  /* Heat — molten metal accent */
  --heat-700: #C13F00;
  --heat-600: #E85400;
  --heat-500: #FF6B00;
  --heat-400: #FF8A33;
  --heat-300: #FFAD66;

  /* Spark — flying sparks / highlights */
  --spark-500: #FFC93D;
  --spark-300: #FFE8A3;

  /* Arc — welding-arc blue (focus, links, info) */
  --arc-500: #45C4FF;
  --arc-300: #9FE1FF;

  /* Marine — bleu du logo officiel (« NT », tagline). Accents de marque. */
  --navy-700: #0B2547;
  --navy-500: #14356B;
  --navy-300: #3E68A8;

  /* Semantic — surfaces */
  --surface-page: var(--steel-950);
  --surface-raised: var(--steel-900);
  --surface-card: #161C22;
  --surface-well: #0E1216;          /* inputs, inset areas */
  --surface-inverse: var(--steel-50);

  /* Semantic — text (on dark) */
  --text-strong: #F4F6F7;
  --text-body: #C4CDD4;
  --text-muted: #8B97A1;
  --text-faint: #5D6973;
  --text-inverse: var(--steel-900);
  --text-accent: var(--heat-500);

  /* Semantic — strokes */
  --stroke-soft: rgba(255, 255, 255, 0.08);
  --stroke-hard: #2C353F;
  --stroke-accent: var(--heat-600);

  /* Semantic — interactive */
  --accent: var(--heat-500);
  --accent-hover: var(--heat-400);
  --accent-press: var(--heat-600);
  --focus-ring: var(--arc-500);
  --link: var(--heat-400);
  --link-hover: var(--spark-500);

  /* Status */
  --ok-500: #3ECF6E;
  --warn-500: var(--spark-500);
  --danger-500: #FF4D3D;
}

/* ─── Tokens · Typographie ────────────────────────────── */
:root {
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --text-hero: clamp(64px, 9vw, 148px);
  --text-h1: 72px;
  --text-h2: 48px;
  --text-h3: 30px;
  --text-h4: 22px;
  --text-lead: 20px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-tag: 12.5px;

  --weight-display: 800;
  --weight-heading: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-body: 400;

  --leading-display: 0.92;
  --leading-heading: 1.05;
  --leading-body: 1.6;
  --leading-tight: 1.3;

  --tracking-display: 0.01em;
  --tracking-caps: 0.14em;
  --tracking-btn: 0.08em;
}

/* ─── Tokens · Espacement, rayons, bordures ───────────── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  --chamfer-1: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --chamfer-tr: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

  --border-hairline: 1px solid var(--stroke-soft);
  --border-plate: 1px solid var(--stroke-hard);

  --container-max: 1200px;
  --container-pad: 32px;
  --section-gap: 128px;
}

/* ─── Tokens · Effets ─────────────────────────────────── */
:root {
  --shadow-plate: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-raise: 0 2px 4px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.55);
  --shadow-well: inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);

  --glow-heat: 0 0 18px rgba(255,107,0,.4), 0 0 44px rgba(255,107,0,.18);
  --glow-heat-strong: 0 0 10px rgba(255,169,64,.65), 0 0 34px rgba(255,107,0,.45), 0 0 90px rgba(255,107,0,.22);
  --glow-arc: 0 0 0 1px var(--arc-500), 0 0 14px rgba(69,196,255,.45);

  --tex-brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(0,0,0,.05) 3px 4px, rgba(0,0,0,0) 4px 7px);
  --tex-brushed-v: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(0,0,0,.05) 3px 4px, rgba(0,0,0,0) 4px 7px);
  --tex-sheen: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.055) 47%, rgba(255,255,255,0) 56%);
  --tex-hazard: repeating-linear-gradient(-45deg, var(--spark-500) 0 12px, var(--steel-950) 12px 24px);
  --grad-molten: linear-gradient(180deg, var(--spark-300) 0%, var(--spark-500) 28%, var(--heat-500) 62%, var(--heat-700) 100%);
  --grad-steel: linear-gradient(180deg, #3E4A56 0%, #2C353F 45%, #1F262E 100%);

  --ease-hard: cubic-bezier(.2, .9, .25, 1);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 600ms;
}

/* ─── Base ────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Défilement fluide Lenis (actif seulement quand le JS l'initialise) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; transition: color var(--dur-1) var(--ease-hard); }
a:hover { color: var(--link-hover); }
img { max-width: 100%; }
::selection { background: var(--heat-600); color: #fff; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ─── Composant · Button ──────────────────────────────── */
.acnt-btn-wrap{position:relative;display:inline-flex;vertical-align:middle}
.acnt-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-btn);
  border:none;cursor:pointer;user-select:none;text-decoration:none;white-space:nowrap;border-radius:0;
  clip-path:var(--chamfer-1);
  transition:background var(--dur-1) var(--ease-hard),color var(--dur-1) var(--ease-hard),
    filter var(--dur-2) var(--ease-hard),transform var(--dur-1) var(--ease-hard),box-shadow var(--dur-1) var(--ease-hard);}
.acnt-btn:active{transform:translateY(1px)}
.acnt-btn[disabled]{opacity:.4;cursor:not-allowed}
.acnt-btn--sm{height:36px;padding:0 18px;font-size:11.5px}
.acnt-btn--md{height:46px;padding:0 26px;font-size:13px}
.acnt-btn--lg{height:56px;padding:0 36px;font-size:14px}
.acnt-btn--primary{background:linear-gradient(180deg,var(--heat-400),var(--heat-500) 52%,var(--heat-600));color:#1D0E00}
.acnt-btn--primary:hover:not([disabled]){background:linear-gradient(180deg,var(--spark-500),var(--heat-500) 55%,var(--heat-600));
  filter:drop-shadow(0 0 9px rgba(255,107,0,.55)) drop-shadow(0 0 28px rgba(255,107,0,.28))}
.acnt-btn--steel{background:var(--grad-steel);color:var(--text-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06)}
.acnt-btn--steel:hover:not([disabled]){background:linear-gradient(180deg,#4A5764,#37424D 45%,#27303A);color:#fff}
.acnt-btn--ghost{background:transparent;color:var(--text-body);box-shadow:inset 0 0 0 1px var(--stroke-hard)}
.acnt-btn--ghost:hover:not([disabled]){color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--steel-500);background:rgba(255,255,255,.03)}
.acnt-btn-sparks{position:absolute;inset:0;pointer-events:none}
.acnt-spark{position:absolute;left:50%;bottom:2px;width:3px;height:3px;background:var(--spark-500);
  box-shadow:0 0 6px 1px rgba(255,201,61,.8);opacity:0;transform:translate(0,0)}
@media (prefers-reduced-motion: no-preference){
  .acnt-btn-wrap:hover .acnt-spark{animation:acnt-spark-fly .75s var(--ease-hard) infinite;animation-delay:var(--d)}
}
@keyframes acnt-spark-fly{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(1)}
  8%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.4)}
}

/* ─── Composant · Card (plaque d'acier poli) ──────────── */
.acnt-card{position:relative;
  background:
    linear-gradient(118deg,transparent 24%,rgba(214,232,255,.05) 40%,rgba(234,244,255,.09) 47%,rgba(214,232,255,.04) 54%,transparent 72%),
    var(--tex-brushed),
    linear-gradient(160deg,#2B343E 0%,#1D2530 30%,#161C24 58%,#11161C 100%);
  border:1px solid #3A444F;border-radius:var(--radius-1);
  box-shadow:var(--shadow-plate),inset 0 1px 0 rgba(255,255,255,.10),inset 1px 0 0 rgba(255,255,255,.04),inset -1px 0 0 rgba(0,0,0,.35),inset 0 -2px 3px rgba(0,0,0,.45);
  padding:var(--space-6);color:var(--text-body);font-family:var(--font-body);box-sizing:border-box}
/* arête supérieure usinée (chant brillant) */
.acnt-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(222,235,248,.38) 30%,rgba(222,235,248,.38) 70%,transparent)}
.acnt-card--interactive{transition:transform var(--dur-2) var(--ease-hard),border-color var(--dur-2) var(--ease-hard),box-shadow var(--dur-2) var(--ease-hard);cursor:pointer;overflow:hidden}
/* reflet qui balaie la plaque au survol */
.acnt-card--interactive::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:50%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,232,255,.05) 30%,rgba(234,244,255,.14) 50%,rgba(214,232,255,.05) 70%,transparent);
  transition:left .55s var(--ease-hard)}
.acnt-card--interactive:hover::after{left:135%}
.acnt-card--interactive:hover{transform:translateY(-3px);border-color:#54626F;
  box-shadow:var(--shadow-raise),0 0 26px rgba(62,104,168,.20),inset 0 1px 0 rgba(255,255,255,.14)}
/* .acnt-card--accent est désormais un simple marqueur (repérage JS de la carte formulaire) — pas de barre en haut */
.acnt-card-rivet{position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5A6874,#232B33 70%);box-shadow:0 1px 1px rgba(0,0,0,.7),inset 0 0 1px rgba(255,255,255,.25)}
.acnt-card-title{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.05;
  letter-spacing:.02em;text-transform:uppercase;color:var(--text-strong);margin:0 0 var(--space-3)}

/* ─── Composant · Badge ───────────────────────────────── */
.acnt-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;border-radius:var(--radius-1);white-space:nowrap;box-sizing:border-box}
.acnt-badge--line{color:var(--text-muted);border:1px solid var(--stroke-hard);background:rgba(255,255,255,.02)}
.acnt-badge--heat{color:var(--heat-400);border:1px solid rgba(255,107,0,.4);background:rgba(255,107,0,.08)}
.acnt-badge--arc{color:var(--arc-500);border:1px solid rgba(69,196,255,.35);background:rgba(69,196,255,.07)}
.acnt-badge--ok{color:var(--ok-500);border:1px solid rgba(62,207,110,.35);background:rgba(62,207,110,.07)}
.acnt-badge--solid{color:#1D0E00;border:1px solid transparent;background:var(--heat-500);font-weight:600}
.acnt-badge-dot{width:5px;height:5px;background:currentColor;box-shadow:0 0 6px currentColor}

/* ─── Composant · SectionHeader ───────────────────────── */
.acnt-sh{font-family:var(--font-body);display:flex;flex-direction:column;gap:14px;max-width:760px}
.acnt-sh--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.acnt-sh-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:var(--text-tag);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--heat-500)}
.acnt-sh-kicker::before{content:"";width:28px;height:2px;background:var(--heat-500);box-shadow:0 0 8px rgba(255,107,0,.6)}
.acnt-sh--center .acnt-sh-kicker::after{content:"";width:28px;height:2px;background:var(--heat-500);box-shadow:0 0 8px rgba(255,107,0,.6)}
.acnt-sh-title{margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:var(--text-h2);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);color:var(--text-strong)}
.acnt-sh-title b{font-weight:800;background:var(--grad-molten);-webkit-background-clip:text;background-clip:text;color:transparent}
.acnt-sh-lead{margin:0;font-size:var(--text-lead);line-height:var(--leading-body);color:var(--text-muted);max-width:60ch}

/* ─── Composant · Champs (Input / Select / Textarea) ──── */
.acnt-field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body)}
.acnt-field-label{font-family:var(--font-mono);font-size:var(--text-tag);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.acnt-field-label b{color:var(--heat-500);font-weight:500}
.acnt-input{appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;
  background:var(--surface-well);color:var(--text-strong);border:1px solid var(--stroke-hard);
  border-radius:var(--radius-1);box-shadow:var(--shadow-well);
  font-family:var(--font-body);font-size:15px;line-height:1.4;padding:12px 14px;
  transition:border-color var(--dur-1) var(--ease-hard),box-shadow var(--dur-2) var(--ease-hard)}
.acnt-input::placeholder{color:var(--text-faint)}
.acnt-input:hover{border-color:var(--steel-600)}
.acnt-input:focus{outline:none;border-color:var(--arc-500);box-shadow:var(--shadow-well),0 0 12px rgba(69,196,255,.25)}
.acnt-input[disabled]{opacity:.45;cursor:not-allowed}
.acnt-field--error .acnt-input{border-color:var(--danger-500)}
.acnt-field-hint{font-size:13px;color:var(--text-faint)}
.acnt-field--error .acnt-field-hint{color:var(--danger-500)}
.acnt-select-wrap{position:relative}
.acnt-select-wrap .acnt-input{padding-right:40px;cursor:pointer}
.acnt-select-caret{position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg)}
textarea.acnt-input{resize:vertical;min-height:96px}

/* ─── Composant · MetalPlate ──────────────────────────── */
.acnt-plate{position:relative;box-sizing:border-box;border-radius:var(--radius-1)}
.acnt-plate--steel{background-image:var(--tex-sheen),var(--tex-brushed),var(--grad-steel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.4);color:var(--steel-100)}
.acnt-plate--dark{
  background:
    linear-gradient(118deg,transparent 24%,rgba(214,232,255,.05) 40%,rgba(234,244,255,.09) 47%,rgba(214,232,255,.04) 54%,transparent 72%),
    var(--tex-brushed),
    linear-gradient(160deg,#2B343E 0%,#1D2530 30%,#161C24 58%,#11161C 100%);
  border:1px solid #3A444F;color:var(--text-body);overflow:hidden;
  box-shadow:var(--shadow-plate),inset 0 1px 0 rgba(255,255,255,.10),inset 1px 0 0 rgba(255,255,255,.04),inset -1px 0 0 rgba(0,0,0,.35),inset 0 -2px 3px rgba(0,0,0,.45);
  transition:transform var(--dur-2) var(--ease-hard),border-color var(--dur-2) var(--ease-hard),box-shadow var(--dur-2) var(--ease-hard)}
/* arête supérieure usinée */
.acnt-plate--dark::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(222,235,248,.38) 30%,rgba(222,235,248,.38) 70%,transparent)}
/* reflet qui balaie la plaque au survol */
.acnt-plate--dark::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:50%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,232,255,.05) 30%,rgba(234,244,255,.14) 50%,rgba(214,232,255,.05) 70%,transparent);
  transition:left .55s var(--ease-hard)}
.acnt-plate--dark:hover::after{left:135%}
.acnt-plate--dark:hover{transform:translateY(-3px);border-color:#54626F;
  box-shadow:var(--shadow-raise),0 0 26px rgba(62,104,168,.20),inset 0 1px 0 rgba(255,255,255,.14)}
.acnt-plate--well{background-color:var(--surface-well);background-image:var(--tex-brushed);
  border:1px solid var(--stroke-hard);box-shadow:var(--shadow-well);color:var(--text-body)}
.acnt-plate--chamfer{clip-path:var(--chamfer-1);border:none}
.acnt-plate-screw{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6B7885, #2A323A 72%);
  box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 1px rgba(255,255,255,.3)}
.acnt-plate-screw::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;
  background:rgba(0,0,0,.65);transform:rotate(var(--slot,45deg))}

/* ─── Composant · WeldSeam ────────────────────────────── */
.acnt-weld{position:relative;height:20px;width:100%;overflow:visible}
.acnt-weld-groove{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);
  background:#07090B;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.acnt-weld-bead{position:absolute;left:0;right:0;top:50%;height:7px;transform:translateY(-50%);border-radius:4px;
  background:repeating-radial-gradient(circle at 4px 50%, #59666F 0 2.2px, #39434C 3.2px, #232A31 4.5px, transparent 5px) 0 0/9px 100%;
  box-shadow:0 1px 1px rgba(0,0,0,.6)}
.acnt-weld-carrier{position:absolute;top:50%;left:2%;width:0;height:0;display:none}
/* Halo de lumière projeté par le bain — bleu marine, même recette que l'arc de la pièce du héro */
.acnt-weld-carrier::before{content:"";position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;
  pointer-events:none;filter:blur(3px);mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(110,147,200,.42) 0%, rgba(62,104,168,.18) 42%, rgba(62,104,168,0) 70%)}
.acnt-weld-pool{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 45% 40%, #FFFFFF 0%, #EAF4FF 24%, rgba(211,226,246,.9) 45%, rgba(110,147,200,.6) 70%, rgba(62,104,168,0) 100%);
  box-shadow:0 0 14px 5px rgba(214,232,255,.9), 0 0 30px 10px rgba(110,147,200,.55),
    0 0 80px 26px rgba(62,104,168,.35)}
.acnt-weld-heat{position:absolute;left:-120px;top:-6px;width:124px;height:12px;border-radius:6px;filter:blur(5px);opacity:.95;
  background:linear-gradient(90deg, rgba(193,63,0,0), rgba(193,63,0,.4) 30%, rgba(232,84,0,.65) 58%, rgba(255,138,51,.85) 80%, rgba(255,232,163,.95))}
.acnt-weld-spark{position:absolute;left:0;top:0;width:var(--s,2.5px);height:var(--s,2.5px);border-radius:50%;
  background:var(--spark-500);box-shadow:0 0 7px 2px rgba(255,201,61,.95);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .acnt-weld--on .acnt-weld-carrier{display:block;animation:acnt-weld-travel var(--weld-dur,7s) linear infinite}
  .acnt-weld--on .acnt-weld-bead{animation:acnt-weld-reveal var(--weld-dur,7s) linear infinite}
  .acnt-weld--on .acnt-weld-spark{animation:acnt-weld-spit .8s var(--ease-hard) infinite;animation-delay:var(--d)}
  .acnt-weld--on .acnt-weld-pool{animation:acnt-weld-flick .16s steps(2) infinite alternate}
}
@keyframes acnt-weld-flick{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.22);filter:brightness(1.3)}}
@keyframes acnt-weld-travel{0%{left:2%}100%{left:98%}}
@keyframes acnt-weld-reveal{0%{clip-path:inset(-8px 98% -8px 0)}100%{clip-path:inset(-8px 2% -8px 0)}}
@keyframes acnt-weld-spit{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  10%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}
}

/* ─── Composant · SparkBurst ──────────────────────────── */
.acnt-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.acnt-burst-p{position:absolute;background:var(--spark-500);box-shadow:0 0 6px 1px rgba(255,201,61,.85);
  animation:acnt-burst-fly .85s cubic-bezier(.15,.6,.4,1) forwards}
@keyframes acnt-burst-fly{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  60%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(160deg)}
  100%{opacity:0;transform:translate(calc(var(--dx)*1.15),calc(var(--dy) + 26px)) rotate(240deg) scale(.4)}
}
@media (prefers-reduced-motion: reduce){.acnt-burst{display:none}}

/* ═══ HÉRO ════════════════════════════════════════════ */
.nt-hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;background-color:var(--steel-950);
  background-image:
    radial-gradient(1100px 480px at 50% 108%, rgba(255,107,0,.16), rgba(255,107,0,0) 62%),
    radial-gradient(700px 300px at 82% 118%, rgba(255,201,61,.08), rgba(255,201,61,0) 60%),
    var(--tex-brushed);
}
.nt-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%)}
/* Mega glow d'arrière-plan — même glow que la pièce : flicker d'arc identique (nt-arc-flick), en grand fond diffus */
.nt-hero-glow{position:absolute;z-index:0;pointer-events:none;right:2vw;top:50%;
  width:min(108vw,1360px);aspect-ratio:1;transform:translateY(-50%);
  background:radial-gradient(closest-side,
    rgba(84,124,188,.20) 0%,
    rgba(56,96,160,.12) 30%,
    rgba(40,74,134,.06) 52%,
    rgba(30,58,110,.02) 68%,
    transparent 80%);
  filter:blur(38px);mix-blend-mode:screen;will-change:opacity;
  animation:nt-arc-flick .13s steps(2,end) infinite}
@media (prefers-reduced-motion: reduce){.nt-hero-glow{animation:none}}
@media (max-width:1100px){.nt-hero-glow{width:min(130vw,760px);right:-10vw;opacity:.7}}
/* Gerbe d'étincelles — jaillit de SOUS le point de « Acier. » (ancrée au point via .nt-acier-dot).
   Halo radial + cœur chaud très vif + traînées qui fusent large vers le bas-droite, s'arquent puis s'éteignent. */
.nt-acier-dot{position:relative}
.nt-hero-spark{position:absolute;z-index:-1;pointer-events:none;left:50%;top:auto;bottom:.4em;
  width:0;height:0;mix-blend-mode:screen}
/* halo radial diffus derrière la gerbe */
.nt-hero-spark::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,190,255,.46),rgba(92,138,214,.22) 40%,rgba(54,94,166,.08) 66%,transparent 80%);
  filter:blur(16px);will-change:opacity;animation:nt-arc-flick .16s steps(2,end) infinite}
/* pas de cœur/core visible (user: "faut pas voir le core") — seul le halo diffus fait la source */
/* chaque particule : capsule chaude et vive, orientée dans sa direction de vol (--srot), tête blanche en tête */
.nt-spark{position:absolute;left:50%;top:50%;width:var(--slen,7px);height:1.8px;border-radius:2px;
  background:linear-gradient(90deg,rgba(120,160,225,0) 0%,rgba(146,184,244,.58) 50%,rgba(214,230,255,.88) 100%);
  box-shadow:0 0 9px 2px rgba(138,178,242,.6);
  opacity:0;will-change:transform,opacity;
  animation:nt-spark-fly var(--sdur,1.6s) cubic-bezier(.15,.65,.3,1) var(--sdelay,0s) infinite}
/* jaillit vite (pop + apex via --sarc), reste vive, puis retombe en parabole jusqu'à (--sx,--sy) et s'éteint */
@keyframes nt-spark-fly{
  0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) rotate(var(--srot,0deg)) scaleX(.3)}
  7%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--sx,160px)*.15),calc(var(--sy,60px)*.15 - var(--sarc,10px))) rotate(var(--srot,0deg)) scaleX(1.05)}
  55%{opacity:.4;transform:translate(-50%,-50%) translate(calc(var(--sx,160px)*.6),calc(var(--sy,60px)*.6 - var(--sarc,10px)*.3)) rotate(var(--srot,0deg)) scaleX(.8)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(var(--sx,160px),var(--sy,60px)) rotate(var(--srot,0deg)) scaleX(.35)}
}
/* mouvement figé = gerbe cassée → on ne garde que le halo statique */
@media (prefers-reduced-motion: reduce){.nt-hero-spark::before{animation:none}.nt-spark{display:none}}
@media (max-width:700px){.nt-hero-spark{display:none}}
.nt-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--container-max);margin:0 auto;
  padding:112px var(--container-pad) 100px;box-sizing:border-box}
/* Desktop large (≥1281) : contenu du héro plus gros (échelle proportionnelle) et
   collé plus à gauche. Le seuil suit celui de la pièce d'acier (.nt-mark, ci-dessous)
   pour que l'inflation n'apparaisse que quand il y a la place à droite du texte. */
@media (min-width:1281px){
  .nt-hero-inner{max-width:none;padding-left:max(30px,3.5vw);
    transform:scale(1.12);transform-origin:left center}
}
.nt-hero-kicker{display:flex;align-items:center;gap:14px;margin-bottom:clamp(30px,4.5vh,56px);flex-wrap:wrap}
.nt-hero-title{margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(84px,12vw,172px);line-height:var(--leading-display);letter-spacing:var(--tracking-display);
  color:var(--text-strong);text-shadow:0 1px 0 rgba(238,245,255,.3),0 2px 0 rgba(4,9,18,.55),0 3px 0 rgba(4,9,18,.44),0 4px 0 rgba(4,9,18,.32),0 7px 12px rgba(0,0,0,.55)}
.nt-hero-title .molten{background:var(--grad-molten);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,107,0,.35))}
@media (prefers-reduced-motion: no-preference){
  .nt-hero-title .molten{animation:nt-molten-breathe 4.5s var(--ease-in-out) infinite alternate}
}
@keyframes nt-molten-breathe{
  from{filter:drop-shadow(0 0 14px rgba(255,107,0,.22))}
  to{filter:drop-shadow(0 0 34px rgba(255,107,0,.5))}
}
.nt-hero-lead{margin:clamp(28px,3.8vh,48px) 0 0;max-width:56ch;font-size:clamp(20px,2.1vh,23px);line-height:var(--leading-body);color:var(--text-muted)}
.nt-hero-ctas{display:flex;align-items:center;gap:16px;margin-top:clamp(36px,5vh,66px);flex-wrap:wrap}
.nt-hero-phone{display:inline-flex;align-items:center;gap:10px;margin-left:10px;
  font-family:var(--font-mono);font-size:16px;color:var(--text-body);text-decoration:none}
.nt-hero-phone:hover{color:var(--spark-500)}
/* Écrans courts (portables 1366×768, 1280×720…) : le héro complet — kicker + titre +
   lead + CTAs — doit tenir dans 100vh. On réduit le titre, les marges et on neutralise
   le scale(1.12). Placé APRÈS le bloc min-width:1281 → transform:none l'emporte quand les
   deux s'appliquent. N'affecte PAS les hauteurs ≥900 (le héro « heureux » reste intact). */
@media (max-height:820px){
  .nt-hero-inner{padding-top:84px;padding-bottom:56px;transform:none}
  .nt-hero-kicker{margin-bottom:clamp(16px,2.6vh,26px)}
  .nt-hero-title{font-size:clamp(60px,8.4vh,104px)}
  .nt-hero-lead{margin-top:clamp(16px,2.2vh,24px);font-size:clamp(17px,2vh,20px)}
  .nt-hero-ctas{margin-top:clamp(20px,3vh,32px)}
}
@media (max-height:720px){
  .nt-hero-inner{padding-top:68px;padding-bottom:42px}
  .nt-hero-kicker{margin-bottom:14px}
  .nt-hero-title{font-size:clamp(50px,7.4vh,82px)}
  .nt-hero-lead{margin-top:14px;font-size:16px}
  .nt-hero-ctas{margin-top:18px}
}
/* Joint soudé héro ⟶ atelier : hauteur 0, chevauche la frontière des deux sections */
.nt-weld-joint{position:relative;height:0;z-index:10;overflow:visible}
.nt-weld-joint .acnt-weld{position:absolute;left:0;right:0;top:-10px}
/* Mode scroll : la torche suit le défilement (--wp : 0 → 1, posé en JS) */
.acnt-weld--scroll .acnt-weld-carrier{display:block;left:calc(2% + 96% * var(--wp,0));
  transition:opacity .45s var(--ease-hard)}
.acnt-weld--scroll .acnt-weld-bead{clip-path:inset(-8px calc(98% - 96% * var(--wp,0)) -8px 0)}
.acnt-weld--done .acnt-weld-carrier{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .acnt-weld--scroll .acnt-weld-spark{animation:acnt-weld-spit .8s var(--ease-hard) infinite;animation-delay:var(--d)}
  .acnt-weld--scroll .acnt-weld-pool{animation:acnt-weld-flick .16s steps(2) infinite alternate}
}
@media (prefers-reduced-motion: reduce){
  .acnt-weld--scroll .acnt-weld-carrier{display:none}
  .acnt-weld--scroll .acnt-weld-bead{clip-path:none}
}
/* Poutre d'acier — grosse IPE en diagonale à droite du texte */
.nt-beam{position:absolute;z-index:1;right:-170px;top:43%;width:min(48vw,820px);height:300px;
  transform:translateY(-50%) rotate(-24deg);transform-origin:62% 50%;pointer-events:none}
.nt-beam-flange{position:relative;height:34px;border-radius:2px;
  background-image:var(--tex-brushed),linear-gradient(180deg,#7C8C9E 0%,#4C5968 32%,#242D36 78%,#161C23 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 3px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5)}
.nt-beam-flange--bot{background-image:var(--tex-brushed),linear-gradient(180deg,#5C6A7A 0%,#39434F 30%,#1A2129 92%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 3px rgba(0,0,0,.65),0 14px 34px rgba(0,0,0,.6)}
.nt-beam-web{position:relative;height:calc(100% - 68px);
  background-image:var(--tex-sheen),var(--tex-brushed),linear-gradient(180deg,#333E49 0%,#28313B 30%,#1D242C 70%,#242C35 100%);
  box-shadow:inset 0 10px 18px rgba(0,0,0,.55),inset 0 -8px 14px rgba(0,0,0,.5)}
.nt-beam-weld{position:absolute;left:0;right:0;height:6px;opacity:.95;
  background:repeating-radial-gradient(circle at 3px 50%, #55616C 0 1.8px, #37414B 2.6px, #20262D 3.8px, transparent 4.4px) 0 0/7px 100%}
.nt-beam-weld--top{top:0}.nt-beam-weld--bot{bottom:0}
.nt-beam-hole{position:absolute;top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 38% 32%, #10151A, #05080B 72%);
  box-shadow:inset 0 4px 8px rgba(0,0,0,.85),inset 0 -1px 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05)}
.nt-beam-cut{position:absolute;left:-6px;top:-6px;bottom:-6px;width:12px;border-radius:3px;z-index:2;filter:blur(1.2px);
  background:linear-gradient(180deg,var(--spark-300),var(--spark-500) 30%,var(--heat-500) 68%,var(--heat-700));
  box-shadow:var(--glow-heat-strong)}
.nt-beam-heat{position:absolute;left:5px;top:0;bottom:0;width:120px;z-index:1;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(255,122,26,.42),rgba(255,107,0,.12) 55%,rgba(255,107,0,0))}
.nt-beam-spark{position:absolute;left:0;width:3px;height:3px;background:var(--spark-500);
  box-shadow:0 0 6px 1px rgba(255,201,61,.9);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .nt-beam-cut{animation:nt-cut-pulse 2.8s var(--ease-in-out) infinite alternate}
  .nt-beam-spark{animation:nt-beam-spit .8s var(--ease-hard) infinite;animation-delay:var(--d)}
}
@keyframes nt-cut-pulse{
  from{box-shadow:0 0 8px rgba(255,169,64,.5),0 0 26px rgba(255,107,0,.32)}
  to{box-shadow:0 0 16px rgba(255,220,120,.9),0 0 52px rgba(255,107,0,.55),0 0 120px rgba(255,107,0,.3)}
}
@keyframes nt-beam-spit{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  10%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}
}
@media (max-width:1100px){.nt-beam{display:none}}
.nt-ember{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;z-index:1;
  background:var(--spark-500);box-shadow:0 0 6px 1px rgba(255,201,61,.7);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .nt-ember{animation:nt-ember-rise var(--edur,9s) linear infinite;animation-delay:var(--edelay,0s)}
}
@keyframes nt-ember-rise{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  8%{opacity:.9}
  60%{opacity:.55}
  100%{opacity:0;transform:translate(var(--edrift,20px),-86vh) scale(.4)}
}

/* ═══ ATELIER · fond photo parallax (section Services) ═ */
.nt-atelier{position:relative;overflow:hidden;background:var(--steel-950)}
.nt-atelier .nt-container{position:relative;z-index:5}
/* Couture bleu marine, bas seulement — en haut, c'est le cordon de soudure vivant du héro */
.nt-atelier::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--navy-300) 16%,#C9DCF5 50%,var(--navy-300) 84%,transparent);
  box-shadow:0 0 12px rgba(62,104,168,.55),0 0 32px rgba(62,104,168,.25)}
/* Média sur-dimensionné pour le débattement parallax (translate posé en JS) */
.nt-atelier-media{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:0;will-change:transform}
.nt-atelier-img{display:block;width:100%;height:100%;object-fit:cover;object-position:36% 42%;
  transform:scale(1.14);filter:saturate(.92) contrast(1.04) brightness(.8) blur(3px);
  transition:transform 1.6s var(--ease-hard)}
.nt-atelier--lit .nt-atelier-img{transform:scale(1)}
/* Voile : sombre à l'approche, se lève à l'allumage (reste lisible sous le contenu) */
.nt-atelier-scrim{position:absolute;inset:0;z-index:1;background-color:rgba(11,14,17,.78);
  background-image:linear-gradient(180deg,rgba(11,14,17,.55) 0%,rgba(11,14,17,.4) 26%,rgba(11,14,17,.2) 55%,rgba(11,14,17,.5) 84%,rgba(11,14,17,.9) 100%),
    radial-gradient(128% 104% at 50% 46%,rgba(11,14,17,0) 50%,rgba(5,6,8,.55) 100%);
  transition:background-color 1.3s var(--ease-in-out)}
.nt-atelier--lit .nt-atelier-scrim{background-color:rgba(11,14,17,.42)}
/* Flash d'amorçage d'arc, au point de la torche */
.nt-atelier-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(42% 34% at 33% 60%,rgba(255,255,255,.95) 0%,rgba(159,225,255,.6) 22%,rgba(69,196,255,.3) 46%,rgba(69,196,255,0) 72%)}
@keyframes nt-arc-strike{0%{opacity:0}10%{opacity:1}20%{opacity:.4}30%{opacity:.95}44%{opacity:.6}100%{opacity:0}}
/* Jets d'étincelles épinglés sur la torche et la meuleuse */
.nt-atelier-jet{position:absolute;z-index:2;width:0;height:0}
.nt-atelier-jet::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 45% 40%,#FFFFFF 0%,var(--arc-300) 35%,rgba(69,196,255,.5) 65%,rgba(69,196,255,0) 100%);
  box-shadow:0 0 18px 4px rgba(69,196,255,.5),0 0 44px 12px rgba(69,196,255,.2)}
.nt-atelier-jet--grind::before{background:radial-gradient(circle at 45% 40%,#FFFFFF 0%,var(--spark-300) 32%,rgba(255,107,0,.55) 65%,rgba(255,107,0,0) 100%);
  box-shadow:var(--glow-heat-strong)}
.nt-atelier--lit .nt-atelier-jet::before{opacity:.9}
.nt-atelier-spit{position:absolute;left:0;top:0;width:2.5px;height:2.5px;border-radius:50%;opacity:0;
  background:var(--spark-500);box-shadow:0 0 6px 1.5px rgba(255,201,61,.9)}
@media (prefers-reduced-motion: no-preference){
  .nt-atelier--lit .nt-atelier-flash{animation:nt-arc-strike 1.15s var(--ease-hard) .05s both}
  .nt-atelier--lit .nt-atelier-spit{animation:acnt-weld-spit .85s var(--ease-hard) infinite;animation-delay:var(--d)}
  .nt-atelier--lit .nt-atelier-jet::before{animation:nt-arc-flick .9s steps(3) infinite alternate}
}
@media (prefers-reduced-motion: reduce){
  .nt-atelier-img{transform:scale(1);transition:none}
  .nt-atelier-scrim{transition:none}
}
@media (max-width:720px){.nt-atelier-img{object-position:30% 42%}}

/* ═══ SECTIONS ════════════════════════════════════════ */
.nt-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);box-sizing:border-box}
/* Barre de nav + pied de page : pleine largeur, contenu réparti d'un bord à l'autre */
.nt-header .nt-container,.nt-footer .nt-container{max-width:none}
.nt-footer-legal{justify-content:space-between}
/* Sections en page (Services/Approche/Projets/Contact) : le conteneur suit
   la largeur de l'écran (~92vw, plafond 1600) pour coller au héro/entête/pied
   pleine largeur — supprime l'effet « crop / rapetisse » sur portable/MacBook.
   Plancher 1200 = jamais plus étroit que l'ancien conteneur. NE touche PAS aux
   pages légales/merci (elles ne sont pas des .nt-section → largeur de lecture conservée). */
.nt-section .nt-container{max-width:clamp(1200px,92vw,1600px)}
/* Ultrawide (≥2200, typiquement 2560) : les sections à fond foncé (approche, projets) — sans
   photo pleine largeur — paraissent étroites sur le grand canevas. On monte le plafond. */
@media (min-width:2200px){.nt-section .nt-container{max-width:1760px}}
.nt-header-inner .nt-logoplate{grid-column:1;justify-self:start}
.nt-header-inner .nt-nav{grid-column:2;justify-self:center;margin-left:0}
.nt-header-inner .nt-header-right{grid-column:3;justify-self:end;margin-left:0}
.nt-footer-legal .nt-footer-credit{margin-left:0}
.nt-section{padding:110px 0}
/* Header */
.nt-header{position:fixed;top:0;left:0;right:0;z-index:50;height:74px;
  display:flex;align-items:center;transition:background var(--dur-2) var(--ease-hard),border-color var(--dur-2) var(--ease-hard);
  background:rgba(11,14,17,.55);border-bottom:1px solid transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nt-header--scrolled{background:rgba(11,14,17,.82);border-bottom-color:var(--stroke-soft)}
.nt-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;width:100%}
.nt-wordmark{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;
  text-transform:uppercase;color:var(--text-strong);text-decoration:none;letter-spacing:.01em}
.nt-wordmark:hover{color:var(--text-strong)}
.nt-wordmark b{color:var(--heat-500);font-weight:800}
.nt-logoplate{display:inline-flex;align-items:center;text-decoration:none}
/* Logo transparent inversé en blanc pour la barre sombre (sans plaque) */
.nt-logoplate img{height:52px;display:block;width:auto;filter:brightness(0) invert(1);opacity:.96}
.nt-logoplate:hover img{opacity:1}
.nt-logoplate--sm img{height:34px}
.nt-nav{display:flex;gap:26px;margin-left:12px}
.nt-nav a{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color var(--dur-1) var(--ease-hard)}
.nt-nav a:hover{color:var(--spark-500)}
.nt-header-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nt-header-phone{font-family:var(--font-mono);font-size:14px;color:var(--text-body);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.nt-header-phone:hover{color:var(--spark-500)}
/* Services */
.nt-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:54px}
.nt-service-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--surface-well);border:1px solid var(--stroke-hard);border-radius:var(--radius-1);
  box-shadow:var(--shadow-well);color:var(--heat-500)}
.nt-service-badges{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
/* tags des cartes services — bleu marine avec glow */
.nt-service-badges .acnt-badge{color:var(--navy-100);border:1px solid rgba(110,147,200,.55);
  background:rgba(30,68,130,.16);text-shadow:0 0 8px rgba(169,201,240,.55);
  box-shadow:0 0 10px rgba(62,104,168,.35),inset 0 0 6px rgba(62,104,168,.18)}
/* Process */
.nt-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:54px}
.nt-step-num{font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1;
  background:var(--grad-molten);-webkit-background-clip:text;background-clip:text;color:transparent}
.nt-step-title{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;
  color:var(--text-strong);margin:14px 0 8px}
.nt-step-text{margin:0;font-size:15px;color:var(--text-muted);line-height:1.55}
/* ═══ PLAN CONTINU · un seul fond blueprint derrière #approche +
   #projets (wrapper .nt-plan). Les deux sections sont transparentes
   → aucune couture entre elles : le plan bleu déteint d'un bloc.
   Le carrousel est boulonné par-dessus (.nt-car-frame). */
.nt-plan{position:relative;
  border-top:1px solid rgba(110,147,200,.12);border-bottom:1px solid rgba(110,147,200,.12);
  background:
    /* vignette sur tout le bloc (pas de couture interne) */
    radial-gradient(115% 76% at 50% 42%, transparent 60%, rgba(8,11,15,.55) 100%),
    /* grille de plan — majeure 140px + mineure 28px */
    repeating-linear-gradient(90deg, rgba(110,147,200,.045) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(110,147,200,.045) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(110,147,200,.02) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(110,147,200,.02) 0 1px, transparent 1px 28px),
    var(--tex-brushed),
    linear-gradient(180deg,#0C1015 0%,#111823 42%,#0F1620 72%,#0C1015 100%)}
/* les sections ne peignent plus leur propre fond : le plan traverse tout */
.nt-plan .nt-blueprint,.nt-plan .nt-projets{background:none;border:0}
.nt-plan .nt-blueprint::after,.nt-plan .nt-projets::after{display:none}
.nt-projets{position:relative;overflow:hidden}
.nt-projets .nt-container{position:relative;z-index:1}

/* Projets — carrousel */
/* la plaque suit exactement la largeur de sa fenêtre 16/9 (jamais plus large
   que 620px de haut × 16/9 + 30px de padding) → aucun vide à droite, et elle
   est centrée dans la section */
.nt-carousel{margin-top:54px;max-width:calc(620px / 9 * 16 + 30px);margin-inline:auto}
/* cadre-plaque : le carrousel boulonné sur le mur d'atelier */
.nt-car-frame{position:relative;padding:15px;border-radius:var(--radius-2);
  background:var(--tex-brushed),linear-gradient(158deg,#2b343d 0%,#1a2129 55%,#12171c 100%);
  border:1px solid #3b4650;
  box-shadow:0 24px 52px rgba(0,0,0,.62),0 3px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)}
.nt-car-bolt{position:absolute;z-index:3;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#828e9a,#20272e 74%);
  box-shadow:0 1px 3px rgba(0,0,0,.85),inset 0 0 2px rgba(255,255,255,.4)}
.nt-car-bolt::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.5px;
  transform:translateY(-50%) rotate(var(--slot,45deg));background:rgba(0,0,0,.6)}
.nt-car-bolt.tl{top:7px;left:7px;--slot:30deg}
.nt-car-bolt.tr{top:7px;right:7px;--slot:-25deg}
.nt-car-bolt.bl{bottom:7px;left:7px;--slot:-15deg}
.nt-car-bolt.br{bottom:7px;right:7px;--slot:40deg}
.nt-car-viewport{position:relative;overflow:hidden;aspect-ratio:16/9;max-height:620px;width:100%;
  background:var(--surface-well);border:1px solid #39434E;border-radius:var(--radius-1);
  box-shadow:var(--shadow-well),0 12px 36px rgba(0,0,0,.35);touch-action:pan-y}
.nt-car-track{display:flex;height:100%}
.nt-car-slide{position:relative;flex:0 0 100%;min-width:0;overflow:hidden}
/* photo floue en fond pour absorber portrait/paysage, photo nette en contain devant */
.nt-car-bg{position:absolute;left:-24px;top:-24px;width:calc(100% + 48px);height:calc(100% + 48px);
  object-fit:cover;filter:blur(16px) brightness(.38) saturate(.85)}
.nt-car-img{position:relative;width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.nt-car-slide .nt-slot-ph{position:absolute;inset:0}
/* plaque d'identification vissée (légende) */
.nt-car-tag{position:absolute;left:16px;bottom:16px;z-index:1;margin:0;
  display:flex;flex-direction:column;gap:2px;max-width:min(78%,420px);
  padding:10px 44px 10px 14px;
  background:var(--tex-brushed),linear-gradient(160deg,rgba(40,49,59,.94),rgba(16,21,27,.96));
  border:1px solid #39434E;border-radius:var(--radius-1);
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.nt-car-tag .t{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--text-strong)}
.nt-car-tag .c{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-100)}
.nt-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  display:grid;place-items:center;cursor:pointer;padding:0;color:var(--steel-200);
  background:var(--grad-steel);border:1px solid #3A444F;border-radius:var(--radius-1);
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:color var(--dur-1) var(--ease-hard),border-color var(--dur-1) var(--ease-hard),box-shadow var(--dur-2) var(--ease-hard)}
.nt-car-btn:hover{color:#fff;border-color:#54626F;
  box-shadow:0 0 18px rgba(62,104,168,.35),0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.nt-car-btn:active{transform:translateY(calc(-50% + 1px))}
.nt-car-btn--prev{left:14px}
.nt-car-btn--next{right:14px}
.nt-car-bar{display:flex;align-items:center;gap:10px;margin-top:16px}
/* points de navigation = rivets d'acier ; l'actif = point d'arc bleu (marque) */
.nt-car-dot{width:12px;height:12px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#6B7885,#2A323A 72%);
  box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 1px rgba(255,255,255,.3);
  transition:transform var(--dur-1) var(--ease-hard),box-shadow var(--dur-2) var(--ease-hard)}
.nt-car-dot:hover{transform:scale(1.25)}
.nt-car-dot--on{background:radial-gradient(circle at 40% 35%,#EAF4FF,var(--navy-200) 55%,var(--navy-500));
  box-shadow:0 0 10px rgba(110,147,200,.85),0 0 22px rgba(62,104,168,.45)}
.nt-car-count{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--text-faint)}
@media (prefers-reduced-motion: no-preference){
  .nt-car-track{transition:transform .6s var(--ease-hard)}
}
@media (max-width:900px){
  .nt-car-viewport{aspect-ratio:4/3}
  .nt-car-btn{width:38px;height:38px}
  .nt-car-btn--prev{left:10px}
  .nt-car-btn--next{right:10px}
  .nt-car-tag{left:10px;bottom:10px;max-width:calc(100% - 20px)}
}
/* Emplacement photo (statique) */
.nt-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-1);display:block}
.nt-slot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background-color:var(--surface-well);background-image:var(--tex-brushed);border-radius:var(--radius-1);
  color:var(--text-faint);box-shadow:var(--shadow-well);text-align:center;padding:12px;box-sizing:border-box}
.nt-slot-ph svg{color:var(--steel-500)}
.nt-slot-ph span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
/* Bande CTA */
.nt-ctaband{position:relative;overflow:hidden;background:var(--steel-900);
  border-top:1px solid var(--stroke-soft);border-bottom:1px solid var(--stroke-soft)}
.nt-ctaband::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--tex-hazard);opacity:.85}
.nt-hazard-band{height:6px;background:var(--tex-hazard);opacity:.85}
/* Couture bleu marine autonome — même recette que le bas de .nt-atelier (Services ⟶ Comment ça marche) */
.nt-seam{height:2px;
  background:linear-gradient(90deg,transparent,var(--navy-300) 16%,#C9DCF5 50%,var(--navy-300) 84%,transparent);
  box-shadow:0 0 12px rgba(62,104,168,.55),0 0 32px rgba(62,104,168,.25)}
.nt-ctaband-inner{position:relative;z-index:1;display:flex;align-items:center;gap:40px;padding:84px var(--container-pad);
  max-width:var(--container-max);margin:0 auto;box-sizing:border-box;
  background:radial-gradient(700px 320px at 12% 120%, rgba(255,107,0,.14), rgba(255,107,0,0) 60%)}
.nt-ctaband-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:64px;line-height:.95;
  text-transform:uppercase;color:var(--text-strong)}
.nt-ctaband-title b{background:var(--grad-molten);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Contact */
.nt-contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:54px;align-items:start}
.nt-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nt-col-full{grid-column:1 / -1}
.nt-form-actions{display:flex;align-items:center;gap:16px;position:relative;flex-wrap:wrap}
.nt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nt-contact-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--stroke-soft)}
.nt-contact-row:last-child{border-bottom:none}
.nt-contact-row .ico{width:40px;height:40px;flex:none;display:grid;place-items:center;color:var(--heat-500);
  background:var(--surface-well);border:1px solid var(--stroke-hard);border-radius:var(--radius-1)}
.nt-contact-row a,.nt-contact-row span.val{font-family:var(--font-mono);font-size:15px;color:var(--text-body);text-decoration:none}
.nt-contact-row a:hover{color:var(--spark-500)}
.nt-contact-row .cap{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:3px}
/* Footer */
.nt-footer{border-top:1px solid var(--stroke-soft);padding:28px 0;background:var(--steel-950)}
.nt-footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.nt-footer-inner .copy{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.nt-footer-legal{display:flex;align-items:center;gap:12px 30px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--stroke-soft)}
.nt-footer-legal-links{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:12px}
.nt-footer-legal-links a{color:var(--text-muted);text-decoration:none;transition:color .18s}
.nt-footer-legal-links a:hover{color:var(--text-strong)}
.nt-footer-sep{color:var(--text-faint)}
.nt-footer-credit{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.nt-footer-credit a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--stroke-soft);
  transition:color .18s,border-color .18s}
.nt-footer-credit a:hover{color:var(--accent);border-color:var(--accent)}
/* Pied de page enrichi : marque + tagline (g.), contact (dr.) */
.nt-footer-brand{display:flex;align-items:center;gap:16px;grid-column:1;justify-self:start}
.nt-footer-inner .nt-nav{grid-column:2;justify-self:center}
.nt-footer-tagline{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.nt-footer-contact{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;grid-column:3;justify-self:end}
.nt-footer-contact-item{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);text-decoration:none;transition:color var(--dur-1) var(--ease-hard)}
a.nt-footer-contact-item:hover,a.nt-footer-contact-item:hover svg{color:var(--link-hover)}
.nt-footer-contact-item svg{color:var(--navy-200);flex:none}
.nt-footer .copy{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
@media (max-width:640px){
  /* Une seule colonne : chaque bloc doit repasser en grid-column:1, sinon nav (col 2)
     et contact (col 3) créent des colonnes fantômes → débord horizontal (~491px). */
  .nt-footer-inner{grid-template-columns:1fr;justify-items:start}
  .nt-footer-brand{grid-column:1;justify-self:start}
  .nt-footer-inner .nt-nav{grid-column:1;justify-self:start;margin-left:0}
  .nt-footer-contact{grid-column:1;justify-self:start;justify-content:flex-start}
  .nt-footer-inner,.nt-footer-legal{gap:14px 18px}
}

/* Pages légales (confidentialité, modalités) */
.nt-legal-top{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--stroke-soft);background:var(--steel-950)}
.nt-legal-top-inner{display:flex;align-items:center;gap:20px;padding:16px 0}
.nt-legal-back{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  text-decoration:none;transition:color .18s}
.nt-legal-back:hover{color:var(--text-strong)}
.nt-legal{background-color:var(--steel-950);background-image:var(--tex-brushed);padding:56px 0 80px}
.nt-legal-inner{max-width:760px}
.nt-legal-kicker{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.nt-legal h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,6vw,56px);line-height:1;letter-spacing:.01em;color:var(--text-strong);margin:0}
.nt-legal-updated{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin:14px 0 0}
.nt-legal h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:22px;
  letter-spacing:.02em;color:var(--text-strong);margin:42px 0 12px}
.nt-legal p,.nt-legal li{font-size:16px;line-height:1.7;color:var(--text-body)}
.nt-legal p{margin:0 0 14px}
.nt-legal ul{margin:0 0 14px;padding-left:22px}
.nt-legal li{margin:0 0 8px}
.nt-legal a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--stroke-soft);transition:border-color .18s}
.nt-legal a:hover{border-color:var(--accent)}
.nt-legal strong{color:var(--text-strong);font-weight:600}
.nt-legal-footer{border-top:1px solid var(--stroke-soft);padding:26px 0;background:var(--steel-950)}
.nt-legal-footer-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.nt-legal-footer-inner .credit{margin-left:auto}
.nt-legal-footer-inner a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--stroke-soft);
  transition:color .18s,border-color .18s}
.nt-legal-footer-inner a:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width: 900px){
  .nt-services-grid,.nt-process,.nt-contact-grid,.nt-form{grid-template-columns:1fr}
  .nt-ctaband-inner{flex-direction:column;align-items:flex-start}
  .nt-nav{display:none}
  .nt-ctaband-title{font-size:44px}
  .nt-section{padding:80px 0}
}

/* ═══════════════════════════════════════════════════════
   SURCHARGE MARQUE — accent bleu marin (couleur « NT » du logo)
   Remplace l'orange des boutons et du texte par le bleu marin.
   Le dégradé (« fade ») des textes colorés est conservé, en bleu.
   Les effets de soudure (braises, cordon, découpe, étincelles,
   halo de forge, bande de sécurité) restent chauds — c'est le
   thème « métal en fusion ».
   ═══════════════════════════════════════════════════════ */
:root{
  --navy-100:#A9C9F0;
  --navy-200:#6E93C8;
  --navy-600:#1E4482;
  --grad-navy:linear-gradient(180deg,#A9C9F0 0%,#6E93C8 30%,#3E68A8 65%,#285089 100%);
  --grad-navy-btn:linear-gradient(180deg,#3E68A8 0%,#1E4482 52%,#14356B 100%);
  --link:#6E93C8;
  --link-hover:#A9C9F0;
  --text-accent:var(--navy-300);
  --accent:var(--navy-500);
}
::selection{background:var(--navy-500);color:#fff}
/* Boutons primaires → bleu marin (texte clair, halo bleu) */
.acnt-btn--primary{background:var(--grad-navy-btn);color:#F4F6F7}
.acnt-btn--primary:hover:not([disabled]){background:linear-gradient(180deg,#5A82BE,#295396 55%,#183C77);
  filter:drop-shadow(0 0 9px rgba(62,104,168,.55)) drop-shadow(0 0 28px rgba(30,68,130,.32))}
/* Glow d'arc (weld flicker bleu, comme le hero) sur les boutons de soumission au survol :
   anime le drop-shadow → clignote sans toucher le texte/fond. Sous reduced-motion, le glow statique ci-dessus reste. */
@keyframes nt-btn-arc{
  0%{filter:drop-shadow(0 0 7px rgba(62,104,168,.5)) drop-shadow(0 0 20px rgba(30,68,130,.28))}
  45%{filter:drop-shadow(0 0 13px rgba(96,136,200,.9)) drop-shadow(0 0 36px rgba(62,104,168,.55))}
  70%{filter:drop-shadow(0 0 9px rgba(62,104,168,.68)) drop-shadow(0 0 26px rgba(30,68,130,.4))}
  100%{filter:drop-shadow(0 0 6px rgba(62,104,168,.44)) drop-shadow(0 0 18px rgba(30,68,130,.24))}}
@media (prefers-reduced-motion:no-preference){
  .acnt-btn--primary:hover:not([disabled]){animation:nt-btn-arc .13s steps(2,end) infinite}}
/* Textes en dégradé → dégradé bleu (on garde le « fade ») */
.nt-hero-title .molten{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 rgba(4,9,18,.5)) drop-shadow(0 4px 0 rgba(4,9,18,.3)) drop-shadow(0 7px 10px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(62,104,168,.35))}
.acnt-sh-title b{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;color:transparent}
.nt-step-num{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;color:transparent}
.nt-ctaband-title b{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes nt-molten-breathe{
  from{filter:drop-shadow(0 0 14px rgba(62,104,168,.22))}
  to{filter:drop-shadow(0 0 34px rgba(62,104,168,.5))}
}
/* Accents « solides » (kickers, icônes, liens, astérisques, badge) → bleu */
.acnt-sh-kicker{color:var(--navy-200)}
.acnt-sh-kicker::before,.acnt-sh--center .acnt-sh-kicker::after{background:var(--navy-200);box-shadow:0 0 8px rgba(62,104,168,.6)}
.nt-service-icon{color:var(--navy-200)}
.nt-contact-row .ico{color:var(--navy-200)}
.acnt-field-label b{color:var(--navy-200)}
.acnt-badge--heat{color:var(--navy-100);border:1px solid rgba(62,104,168,.45);background:rgba(30,68,130,.14)}
.nt-nav a:hover,.nt-header-phone:hover,.nt-hero-phone:hover,.nt-contact-row a:hover{color:var(--navy-100)}

/* ═══ Pièce d'acier du héro (icône du logo, détourée) ═══ */
.nt-mark{position:absolute;z-index:1;right:13vw;top:50%;transform:translateY(-50%);
  width:min(50vw,660px);pointer-events:none;will-change:transform}
/* halo d'arc bleu derrière la pièce */
.nt-mark::before{content:"";position:absolute;inset:-16% -12%;
  background:radial-gradient(46% 42% at 62% 60%,rgba(62,104,168,.30),rgba(62,104,168,.10) 55%,transparent 76%);
  filter:blur(8px)}
.nt-mark-img{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 48px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(62,104,168,.40)) drop-shadow(0 0 80px rgba(62,104,168,.22))}
/* Reflet au sol sous la pièce */
.nt-mark-reflect{position:absolute;left:0;top:100%;width:100%;aspect-ratio:504/404;margin-top:-2%;
  background:url("assets/logo-mark.webp") center/100% 100% no-repeat;
  transform:scaleY(-1);opacity:.14;filter:blur(2px) saturate(.8);
  -webkit-mask-image:linear-gradient(to bottom,transparent 52%,rgba(0,0,0,.75));
  mask-image:linear-gradient(to bottom,transparent 52%,rgba(0,0,0,.75))}
/* Arc de soudure bleu au joint colonne/poutre */
.nt-mark-arc{position:absolute;left:85%;top:70%;width:30%;aspect-ratio:5/4;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,#fff 0%,#eaf4ff 9%,rgba(211,226,246,.85) 18%,rgba(110,147,200,.42) 40%,rgba(62,104,168,.16) 64%,transparent 78%);
  mix-blend-mode:screen}
.nt-mark-arc::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 14px 5px rgba(214,232,255,.9)}
/* Étincelles d'arc (blanc-bleu, teinte marine) au point de soudure */
.nt-arc-spark{position:absolute;width:2.6px;height:2.6px;border-radius:50%;background:#eef4ff;
  box-shadow:0 0 7px 1px rgba(150,183,230,.95);opacity:0;z-index:2}
@media (prefers-reduced-motion: no-preference){
  .nt-arc{animation:nt-arc-flick .13s steps(2,end) infinite}
  .nt-arc-spark{animation:nt-beam-spit .7s var(--ease-hard) infinite;animation-delay:var(--d)}
}
@keyframes nt-arc-flick{0%{opacity:.72}45%{opacity:1}70%{opacity:.85}100%{opacity:.6}}
/* Sous ~1280, pas de place à droite du texte : la pièce d'acier chevaucherait le
   H1/sous-titre (iPad Pro paysage 1180) → on la masque jusqu'à 1281. */
@media (max-width:1280px){.nt-mark{display:none}}
/* …sauf sur portables COURTS (1280×720 / 800) : là le titre est déjà réduit (max-height:820)
   et il reste toute la place à droite du texte. On ré-affiche la pièce, plus petite et calée
   dans la gouttière droite, pour que la moitié droite du héro ne soit pas vide. La contrainte
   max-height évite le retour du chevauchement (qui n'arrive qu'avec le titre pleine taille). */
@media (min-width:1201px) and (max-width:1280px) and (max-height:820px){
  .nt-mark{display:block;right:6vw;width:min(40vw,440px)}
}

/* ═══════════════════════════════════════════════════════
   FOND « PLAN D'ATELIER » — section Approche (#approche)
   Acier brossé sombre + papier quadrillé bleu marin +
   dessin technique SVG qui se trace à l'entrée en vue
   (.nt-blueprint--lit, posée par IntersectionObserver).
   ═══════════════════════════════════════════════════════ */
.nt-blueprint{position:relative;overflow:hidden;
  border-top:1px solid rgba(110,147,200,.12);border-bottom:1px solid rgba(110,147,200,.12);
  background:
    repeating-linear-gradient(90deg, rgba(110,147,200,.045) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(110,147,200,.045) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(110,147,200,.02) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(110,147,200,.02) 0 1px, transparent 1px 28px),
    var(--tex-brushed),
    linear-gradient(180deg,#0C1015 0%,#111823 46%,#0C1015 100%)}
/* vignette : assombrit les bords, garde les cartes et le titre lisibles */
.nt-blueprint::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 105% at 50% 38%, transparent 44%, rgba(8,11,15,.6) 100%)}
.nt-blueprint .nt-container{position:relative;z-index:1}
.nt-bp-media{position:absolute;inset:0;color:var(--navy-100);opacity:.3;pointer-events:none}
.nt-bp-media svg{width:100%;height:100%;display:block}
.nt-bp-stroke{stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}
.nt-bp-thin{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;--o:.8;opacity:var(--o)}
.nt-bp-axis{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:14 6 2 6;opacity:var(--o,.55)}
.nt-bp-txt{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;fill:currentColor;stroke:none}
.nt-bp-txt--lg{font-size:16px;letter-spacing:.14em}
.nt-bp-txt--sm{font-size:10px}
@media (prefers-reduced-motion: no-preference){
  .nt-plan .nt-bp-stroke:not(.nt-bp-fade),
  .nt-plan .nt-bp-thin:not(.nt-bp-fade){stroke-dasharray:1;stroke-dashoffset:1}
  .nt-plan--lit .nt-bp-stroke:not(.nt-bp-fade),
  .nt-plan--lit .nt-bp-thin:not(.nt-bp-fade){
    animation:nt-bp-draw 1s var(--ease-hard) forwards;animation-delay:calc(.1s + var(--i,0)*.1s)}
  .nt-plan .nt-bp-fade{opacity:0}
  .nt-plan--lit .nt-bp-fade{animation:nt-bp-fadein .7s ease forwards;animation-delay:calc(.7s + var(--i,0)*.1s)}
}
@keyframes nt-bp-draw{to{stroke-dashoffset:0}}
@keyframes nt-bp-fadein{to{opacity:var(--o,1)}}
/* mobile : le dessin recadré en « slice » devient illisible — on garde
   la grille et la texture, on retire le dessin */
@media (max-width:900px){.nt-bp-media{display:none}}

/* ═══════════════════════════════════════════════════════
   FINALE « FORGE » — la soumission clôt le site (#contact)
   Titre « On SOUDE ça » en métal en fusion, braises montantes,
   et le formulaire qui se fait souder (torche + cordon) à
   l'entrée en vue. Déclencheur : .nt-contact--lit (IO).
   ═══════════════════════════════════════════════════════ */
.nt-contact{position:relative;overflow:hidden;isolation:isolate;background-color:#07090C}
.nt-contact>.nt-container{position:relative;z-index:2}
/* braises montantes : au-dessus de l'image + étalonnage, sous le formulaire */
.nt-contact>.nt-ember{z-index:2}
/* Fond « chantier » : image STATIQUE (photo soudeurs), assombrie + léger flou (comme la version HTML). */
.nt-contact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('assets/soumission-fond.avif') center/cover no-repeat;
  transform:scale(1.06);
  filter:brightness(.44) saturate(.85) contrast(1.05) blur(3px)}
/* Étalonnage sombre + vignette (bords + coins) + lueur de forge chaude — statique */
.nt-contact::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,14,17,.92) 0%, rgba(11,14,17,.5) 30%, rgba(7,9,12,.42) 60%, rgba(5,6,8,.78) 100%),
    linear-gradient(90deg, rgba(5,6,8,.55) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 84%, rgba(5,6,8,.5) 100%),
    radial-gradient(130% 108% at 50% 42%, rgba(0,0,0,0) 52%, rgba(5,6,8,.55) 100%),
    radial-gradient(1100px 460px at 50% 120%, rgba(255,107,0,.18), rgba(255,107,0,0) 60%),
    radial-gradient(680px 300px at 80% 124%, rgba(255,201,61,.08), rgba(255,201,61,0) 60%)}

/* Titre en fusion — en bleu marine, comme le reste du site */
.nt-soud-head{max-width:none}
.nt-soud-title{margin:14px 0 0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(60px,10.5vw,164px);line-height:.9;letter-spacing:var(--tracking-display);color:var(--text-strong)}
.nt-soud-title .molten-hot{background:var(--grad-navy);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(62,104,168,.4))}
@media (prefers-reduced-motion: no-preference){
  .nt-soud-title .molten-hot{animation:nt-molten-breathe 4.5s var(--ease-in-out) infinite alternate}
}

/* Formulaire « boulonné » : boulons hexagonaux d'acier aux coins des plaques */
.nt-bolt{position:absolute;width:15px;height:15px;z-index:3;pointer-events:none;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:radial-gradient(circle at 38% 30%,#8A97A3,#49535D 55%,#2A313A 100%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.nt-bolt::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#727F8B,#333B44 72%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.5)}

/* Glow d'arc autour des box de soumission — flash d'arc (nt-form-strike) puis anneau stable, PUIS ça s'arrête.
   Carte formulaire : quand nom + téléphone/courriel valides (.nt-form--ready) ET service choisi (.nt-form--charged).
   Carte infos : EN MÊME TEMPS que la carte formulaire, mêmes conditions (.nt-form--complete). Palette bleue du hero. */
.nt-form-glow{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease-hard);
  border:1px solid rgba(126,164,228,.6);
  box-shadow:0 0 20px 2px rgba(84,124,188,.5),0 0 46px 9px rgba(62,104,168,.3)}
.nt-form--ready.nt-form--charged .nt-form-glow,
.nt-form--complete .nt-form-glow{animation:nt-form-strike .5s linear both}
@keyframes nt-form-strike{
  0%{opacity:0}12%{opacity:1}22%{opacity:.32}34%{opacity:1}46%{opacity:.5}58%{opacity:.95}70%{opacity:.68}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .nt-form--ready.nt-form--charged .nt-form-glow,.nt-form--complete .nt-form-glow{animation:none;opacity:1}}

/* ═══════════════════════════════════════════════════════
   ADAPTATIONS RESPONSIVE (ajout. — passe d'optimisation)
   Placées en fin de feuille pour l'emporter dans la cascade.
   ═══════════════════════════════════════════════════════ */

/* Filet anti-débord : coupe les décorations qui dépassent de quelques px à droite
   (halo du héro, image atelier, badge). « clip » (et non « hidden ») → ne crée pas de
   conteneur de défilement : l'en-tête fixe et le défilement fluide Lenis restent intacts. */
body{overflow-x:clip}

/* Tablette portrait (641–900) : les cartes services + étapes passaient en 1 colonne
   pleine largeur (texte calé à gauche → moitié vide). En 2 colonnes, elles se remplissent. */
@media (min-width:641px) and (max-width:900px){
  .nt-services-grid,.nt-process{grid-template-columns:1fr 1fr}
}

/* ─── Téléphones (≤640) : « réduis tout » — cartes, titres, textes, boutons ─── */
@media (max-width:640px){
  /* En-tête : le numéro « 418 933-2886 » passait à 3 lignes → on le retire
     (il reste sous le héro et dans le pied de page). Logo + SOUMISSION conservés. */
  .nt-header-phone{display:none}

  /* Échelle typographique mobile */
  .nt-hero-title{font-size:clamp(42px,12vw,64px)}
  .nt-hero-lead{font-size:16px}
  .acnt-sh-title{font-size:clamp(28px,7.5vw,38px)}
  .acnt-sh-lead{font-size:16px}
  .nt-soud-title{font-size:clamp(40px,12vw,62px)}
  .nt-step-num{font-size:44px}
  .nt-step-title{font-size:18px}
  .acnt-card-title{font-size:18px}

  /* CTA du héro plus compacts */
  .acnt-btn--lg{height:48px;padding:0 22px;font-size:13px}

  /* Cartes : padding réduit (surcharge le style inline des cartes) */
  .nt-services-grid .acnt-card{padding:20px!important}
  .nt-process .acnt-plate{padding:20px!important}
  .nt-contact-grid .acnt-card{padding:20px!important}
}

/* ─── Petits téléphones (≤430) : on resserre encore ─── */
@media (max-width:430px){
  :root{--container-pad:20px}
  .nt-section{padding:60px 0}
  .nt-hero-title{font-size:clamp(40px,11.5vw,50px)}
}

/* ─── Très étroit (≤375) : le badge « Métaux ouvrés · Soudure · Réparation »
   (nowrap) débordait — on l'autorise à passer sur plusieurs lignes. ─── */
@media (max-width:375px){
  .acnt-badge--heat{white-space:normal;height:auto;line-height:1.35;
    padding-top:4px;padding-bottom:4px}
  /* La tagline du pied de page (nowrap) frôlait le bord droit : on réduit + on autorise le retour. */
  .nt-footer-tagline{font-size:10px;letter-spacing:.03em;white-space:normal}
}

/* ═══════════════════════════════════════════════════════
   MOBILE ≤900px — Navigation plein écran + héro « pièce centrale »
   Ajouté 2026-07-12 (« on attaque la version mobile »).
   ═══════════════════════════════════════════════════════ */

/* ── Bouton hamburger (plaque d'acier) — masqué au desktop ── */
.nt-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 12px;box-sizing:border-box;order:-1;margin-right:4px;
  background:linear-gradient(180deg,#2C353F,#1F262E);border:1px solid var(--stroke-hard);
  border-radius:var(--radius-2);box-shadow:var(--shadow-plate);cursor:pointer}
.nt-burger i{display:block;height:2px;border-radius:2px;background:var(--steel-200)}
.nt-burger i:nth-child(2){width:70%}
.nt-burger:hover i{background:var(--steel-100)}

/* ── Overlay menu plein écran (forge) ── */
.nt-mobile-menu{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease-hard),visibility 0s .32s;
  background:
    radial-gradient(120% 82% at 50% 118%, rgba(255,107,0,.20), rgba(255,107,0,0) 58%),
    radial-gradient(92% 60% at 82% -8%, rgba(62,104,168,.22), rgba(62,104,168,0) 60%),
    var(--steel-950);
  background-image:var(--tex-brushed-v);overflow:hidden}
.nt-mobile-menu::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--tex-hazard);opacity:.85;z-index:2}
.nt-mobile-menu--open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .32s var(--ease-hard)}

.nt-mm-top{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--container-pad) 0;position:relative;z-index:1}
.nt-mm-logo img{height:34px;display:block;width:auto;filter:brightness(0) invert(1);opacity:.96}
.nt-mm-close{width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#2C353F,#1F262E);border:1px solid var(--stroke-hard);
  border-radius:var(--radius-2);box-shadow:var(--shadow-plate);color:var(--steel-200)}
.nt-mm-close:hover{color:var(--steel-100)}

.nt-mm-links{display:flex;flex-direction:column;justify-content:center;flex:1;
  padding:2vh var(--container-pad);position:relative;z-index:1}
.nt-mm-links a{display:flex;align-items:baseline;gap:14px;padding:3vh 0;text-decoration:none;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,12vw,52px);line-height:.9;letter-spacing:.01em;color:var(--text-strong);
  border-bottom:1px solid var(--stroke-soft);position:relative}
.nt-mm-links a .nt-mm-num{font-family:var(--font-mono);font-size:13px;font-weight:500;
  color:var(--navy-200);letter-spacing:.1em}
.nt-mm-links a::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;
  background:linear-gradient(90deg,#C9DCF5,var(--navy-300));box-shadow:0 0 12px rgba(62,104,168,.7)}

.nt-mm-foot{margin-top:auto;position:relative;z-index:1;
  padding:22px var(--container-pad) calc(26px + env(safe-area-inset-bottom))}
.nt-mm-cta{display:block;text-align:center;text-decoration:none;
  font-family:var(--font-mono);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;padding:17px;border-radius:var(--radius-2);
  background:var(--grad-navy-btn);border:1px solid var(--navy-300);box-shadow:0 0 22px rgba(62,104,168,.4)}
/* (.nt-mm-tel retiré — le numéro est maintenant le bouton d'appel .nt-mm-call) */

/* braises qui montent dans le menu */
.nt-mm-ember{position:absolute;bottom:12%;width:3px;height:3px;border-radius:50%;
  background:var(--heat-400);box-shadow:0 0 6px var(--heat-500);opacity:0;z-index:0}

/* verrou du scroll quand le menu est ouvert */
html.nt-menu-open,html.nt-menu-open body{overflow:hidden}

/* ── Héro : pièce d'acier centrale (mobile) ── */
.nt-mark-m{display:none;position:relative;width:min(66vw,260px);margin:22px auto 22px}
.nt-mark-m-img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 26px rgba(84,124,188,.5)) drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.nt-mark-m-glow{position:absolute;left:50%;top:52%;width:150%;height:150%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(84,124,188,.30), rgba(84,124,188,0) 70%);
  filter:blur(14px);z-index:-1}
.nt-mark-m-spark{position:absolute;left:60%;top:63%;width:3px;height:9px;border-radius:2px;
  background:linear-gradient(#EAF2FF,#7FA8E0);box-shadow:0 0 8px rgba(120,160,220,.9);opacity:0}

/* ── Activation ≤900px ── */
@media (max-width:900px){
  .nt-burger{display:inline-flex}
  .nt-header-phone{display:none}   /* le numéro vit dans le menu + le héro + le pied */
  .nt-mark-m{display:block}
  .nt-car-btn{width:44px;height:44px}   /* cibles tactiles ≥44px */
}

/* ── Animations (désactivées si mouvement réduit) ── */
@media (prefers-reduced-motion: no-preference){
  .nt-mobile-menu--open .nt-mm-links a{animation:nt-mm-in .42s var(--ease-hard) both}
  .nt-mobile-menu--open .nt-mm-links a:nth-child(1){animation-delay:.06s}
  .nt-mobile-menu--open .nt-mm-links a:nth-child(2){animation-delay:.13s}
  .nt-mobile-menu--open .nt-mm-links a:nth-child(3){animation-delay:.20s}
  .nt-mobile-menu--open .nt-mm-foot{animation:nt-mm-in .42s var(--ease-hard) .26s both}
  .nt-mobile-menu--open .nt-mm-ember{animation:nt-mm-ember-rise var(--ed-dur,9s) linear var(--ed,0s) infinite}
  .nt-mark-m-spark{animation:nt-mark-m-fly 1.5s ease-out var(--d,0s) infinite}
}
@keyframes nt-mm-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nt-mm-ember-rise{0%{opacity:0;transform:translateY(0)}12%{opacity:.7}85%{opacity:.5}100%{opacity:0;transform:translateY(-42vh)}}
@keyframes nt-mark-m-fly{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}

/* ─── Corrections revue design/UX mobile (2026-07-12, itér. 1) ─── */
@media (max-width:900px){
  .acnt-input{font-size:16px}            /* iOS : ≥16px = pas de zoom auto au focus */
  .acnt-btn--sm{height:44px}             /* CTA « Soumission » du header : cible tactile ≥44px */
  .nt-hero-phone{min-height:44px}        /* lien tél du héro : cible tactile ≥44px */
  .nt-hero-spark{display:none}           /* un seul foyer d'étincelles au-dessus de la ligne : la pièce centrale */
  .nt-car-dot{position:relative}         /* points du carousel : zone tactile élargie (visuel 12px inchangé) */
  .nt-car-dot::before{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;
    transform:translate(-50%,-50%)}
}
/* Menu : bouton d'appel (acier) sous le CTA soumission + région */
.nt-mm-call{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
  margin-top:12px;text-decoration:none;border-radius:var(--radius-2);
  font-family:var(--font-mono);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--steel-100);
  background:linear-gradient(180deg,#2C353F,#1F262E);border:1px solid var(--stroke-hard);box-shadow:var(--shadow-plate)}
.nt-mm-call svg{color:var(--navy-100)}
.nt-mm-call:hover{color:#fff}
.nt-mm-region{display:block;text-align:center;margin-top:12px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
/* Message succès/erreur du formulaire (accessible, aria-live) */
.nt-form-ok{flex-basis:100%;margin:6px 0 0;font-family:var(--font-mono);font-size:13px;color:var(--navy-100)}

/* ─── Corrections revue design/UX mobile (2026-07-12, itér. 2) ─── */
/* Débordement horizontal : les étincelles du joint de soudure (#nt-weld) partent
   jusqu'à ~434px et élargissaient le viewport mobile APRÈS scroll (390→453) → le CTA
   « Soumission » de l'en-tête fixe se retrouvait coupé sur toutes les sections.
   `overflow-x:clip` posé sur <body> NE se propage PAS au viewport (spec CSS) : il doit
   être sur <html>. Corrige aussi un léger scroll horizontal au desktop. */
html{overflow-x:clip}
/* Contraste AA des petits libellés mono sur mobile (--text-faint 3.2:1 → 4.8:1) */
@media (max-width:900px){:root{--text-faint:#79858F}}