/* =========================================================================
   ATLANTIS STRENGTH, Homepage (newera)
   Built on tokens.css (Atlantis design system). Red punctuates; type is
   condensed/industrial; spacing breathes; borders are crisp.
   ========================================================================= */

/* ----------------------------- Brand display font ----------------------- */
@font-face { font-family:'Integral CF'; src:url('../fonts/IntegralCF-Regular.otf')   format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Integral CF'; src:url('../fonts/IntegralCF-Medium.otf')    format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Integral CF'; src:url('../fonts/IntegralCF-Bold.otf')      format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Integral CF'; src:url('../fonts/IntegralCF-ExtraBold.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Integral CF'; src:url('../fonts/IntegralCF-Heavy.otf')     format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

:root{
  /* Promote Integral CF as the display face (Atlantis wordmark cut) */
  --font-display: 'Integral CF', 'Antonio', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --container: 1320px;
  --nav-h: 76px;
}

/* ----------------------------------- Reset ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--atl-ink-1000);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter-desk); }

/* ----------------------------- Shared eyebrow --------------------------- */
.eyebrow{
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--fg-3); display:inline-flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; }
.eyebrow--light{ color:var(--atl-ink-200); }
.eyebrow--center{ justify-content:center; }

/* --------------------------- Section headings --------------------------- */
.section-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,4vw,56px); line-height:0.98; letter-spacing:var(--track-tight);
}
.section-title--center{ text-align:center; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}

/* -------------------------------- Buttons ------------------------------- */
.btn{
  --_pad:16px 28px;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:var(--_pad);
  font-family:var(--font-sans); font-weight:700; font-size:13px;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  border:1px solid transparent; border-radius:0; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.btn__arrow{ transition:transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--red{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--red:hover{ background:var(--atl-red-deep); border-color:var(--atl-red-deep); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--atl-ink-1000); border-color:#fff; }
.btn--outline{ background:transparent; color:var(--atl-ink-1000); border-color:var(--atl-ink-200); }
.btn--outline:hover{ background:var(--atl-ink-1000); color:#fff; border-color:var(--atl-ink-1000); }
.btn--dark{ background:var(--atl-ink-1000); color:#fff; border-color:var(--atl-ink-1000); }
.btn--dark:hover{ background:#fff; color:var(--atl-ink-1000); }
.btn--block{ width:100%; }

/* --------------------------- Arrow text links --------------------------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--atl-ink-1000);
}
.link-arrow svg{ transition:transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg{ transform:translate(3px,-3px); }
.link-arrow--light{ color:#fff; }

/* ------------------------ Language switch (shared) ---------------------- */
.lang-switch{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-weight:600; font-size:12px; letter-spacing:var(--track-wide); text-transform:uppercase; }
.lang-switch .lang{ color:var(--atl-ink-400); transition:color var(--dur-quick) var(--ease-out); }
.lang-switch .lang:hover{ color:#fff; }
.lang-switch .lang.is-active{ color:#fff; }
.lang-sep{ color:var(--atl-ink-600); }

/* =========================================================================
   ATLANTIS STRENGTH, SITE HEADER (topbar + masthead + primary nav + panels)
   FINAL: faithful dark reproduction (base A) + brand-purist type/flags (B)
   + full keyboard model & right-side focus-trapped drawer (C).
   Fresh namespace (.nav2/.mast/.pnav/.mega/.dropd/.drawer). It replaced the old
   .topbar and .nav rules, which are no longer in this stylesheet.
   Reuses shared .wrap/.lang-switch/.btn/.eyebrow (do NOT redefine those).

   NOTE on the mobile drawer: main.js appends .drawer to <body> (NOT inside the
   .nav2 header). That is deliberate, .nav2 sets backdrop-filter, which
   establishes a containing block for fixed/absolute descendants; a drawer
   nested there would collapse to the header box instead of covering the
   viewport. With the body-level parent, .drawer{position:fixed;inset:0}
   resolves against the viewport exactly as these rules assume.

   ATTENTION, NE PAS REECRIRE ICI L'ENUMERATION DE CES CLASSES MORTES avec une
   etoile en fin de nom. Cette ligne portait « .topbar » suivi de deux traits
   bas, d'une etoile, puis d'une barre oblique. Or une etoile suivie d'une barre
   oblique FERME un commentaire CSS ou qu'elle apparaisse : tout le bas de ce
   bloc etait lu comme du CSS, et la regle .mast-top juste apres, seule chose
   qui peignait la barre utilitaire haute, etait avalee pendant la
   resynchronisation de l'analyseur. Le defaut etait invisible sur le site
   noir, ou une barre transparente au-dessus d'un corps noir a l'air noire.
   Mesure dans Chromium et corrige le 2026-09-04.
   ========================================================================= */

/* ------------------------------- Row 1: top bar ------------------------- */
.mast-top{ background:#000; border-bottom:1px solid var(--rule-3); }
.mast-top__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px; }
.mast-top__note{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ------------------------------- Header shell --------------------------- */
.nav2{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(8,8,9,.97);
  /* NB: no backdrop-filter, on a sticky ANCESTOR it traps descendant .mega/.dropd
     panels in a broken compositing group (they render translucent, hero bleeds
     through). The 97%-opaque bg keeps the dark sticky look without the blur. */
  border-bottom:1px solid var(--rule-2);
}

/* ------------------------------- Row 2: masthead ------------------------ */
.mast{ border-bottom:1px solid var(--rule-3); }
.mast__inner{ display:flex; align-items:center; gap:28px; min-height:72px; padding-block:14px; }
.mast__logo{ flex:0 0 auto; display:inline-flex; align-items:center; }
.mast__logo img{ height:30px; width:auto; }

/* --- Search (central, takes the flex space) --- */
.mastsearch{
  flex:1 1 auto; min-width:0; position:relative;
  display:flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-2);
  overflow:hidden;
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.mastsearch:focus-within{ border-color:var(--accent); background:var(--atl-ink-800); }
/* editorial red section-flag on the search field (brand-purist graft) */
.mastsearch__flag{
  position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
.mastsearch__submit{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:44px; padding-left:3px; background:none; border:0; color:var(--fg-3);
  transition:color var(--dur-quick) var(--ease-out);
}
.mastsearch__submit:hover{ color:var(--fg); }
.mastsearch__field{
  flex:1 1 auto; min-width:0; height:44px; padding:0 16px 0 2px;
  background:none; border:0; outline:none; color:var(--fg);
  font-family:var(--font-sans); font-size:14px; letter-spacing:.01em;
}
/* Le champ n'a ni bordure ni fond a lui, et son outline est retire pour que le cadre reste
   celui de l'enveloppe : l'anneau de focus se pose donc SUR l'enveloppe. Sans cela, un
   lecteur au clavier traverse la recherche sans aucun repere (mesure du 2026-09-06). */
.mastsearch:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.mastsearch__field::placeholder{ color:var(--fg-4); }
.mastsearch__field::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* mobile magnifier toggle (hidden on desktop) */
.mastsearch-toggle{
  display:none; flex:0 0 auto; margin-left:auto; align-items:center; justify-content:center;
  width:42px; height:42px; background:none; border:1px solid var(--rule-2); border-radius:var(--r-2);
  color:var(--fg-2); transition:color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.mastsearch-toggle:hover{ color:var(--fg); border-color:var(--fg-4); }

/* --- Quick-order / Assistants pills: reuse .btn, sized down for the masthead --- */
.quickorder.btn{
  flex:0 0 auto; --_pad:0 18px; height:44px; gap:8px; font-size:12px;
}
.quickorder.btn svg{ flex:0 0 auto; }
/* Two masthead pills in a row: pull them closer than the 28px mast gap. */
.quickorder.btn + .quickorder.btn{ margin-left:-14px; }

/* --- Utility icon-links --- */
.util{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.util__link{
  position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; color:var(--fg-2); border-radius:var(--r-2);
  transition:color var(--dur-quick) var(--ease-out);
}
.util__link:hover{ color:var(--fg); }
.util__label{
  font-family:var(--font-sans); font-weight:600; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-4);
  white-space:nowrap; transition:color var(--dur-quick) var(--ease-out);
}
.util__link:hover .util__label{ color:var(--fg-2); }
.util__badge{
  position:absolute; top:0; right:2px;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-weight:700; font-size:10px; line-height:1;
}

/* ------------------------------- Row 3: primary nav --------------------- */
/* .pnav is the positioned containing block for the full-width mega.
   Items are STATIC by default so the mega resolves left:0/right:0 against
   this row (not the narrow item). Only dropdown items get position:relative. */
.pnav{ position:relative; background:transparent; }
.pnav__inner{ display:flex; align-items:stretch; gap:0; min-height:52px; }
.pnav__group{ display:flex; align-items:stretch; gap:2px; }
.pnav__group--right{ margin-left:auto; }
.pnav__item{ position:static; display:flex; align-items:stretch; }
.pnav__item.has-dropd{ position:relative; }
.pnav__link{
  display:inline-flex; align-items:center; gap:8px; padding:0 16px; position:relative;
  background:none; border:0;
  font-family:var(--font-sans); font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--fg-2); white-space:nowrap;
  transition:color var(--dur-quick) var(--ease-out);
}
.pnav__link:hover{ color:var(--fg); }
.pnav__link.is-current{ color:var(--fg); }        /* current section */
.pnav__trigger{ cursor:pointer; }
.pnav__item.has-panel > .pnav__trigger[aria-expanded="true"]{ color:var(--fg); }

/* .nav2 is always a dark bar. Product sheets (and any other light body)
   keep --fg black, so the open item, the current section and the project
   icon would paint as ink on black. Pin the chrome to light type. The mega
   panel keeps page tokens (white on a light page). */
.nav2 .pnav__link{ color:var(--atl-ink-200); }
.nav2 .pnav__link:hover,
.nav2 .pnav__link.is-current,
.nav2 .pnav__item.has-panel > .pnav__trigger[aria-expanded="true"],
.nav2 .pnav__link--flag{ color:#fff; }
.nav2 .util__link{ color:var(--atl-ink-200); }
.nav2 .util__label{ color:var(--atl-ink-300); }   /* ink-400 sur le fond de nav faisait 4,48:1, un cheveu sous AA */
.nav2 .util__link:hover,
.nav2 .util__link:hover .util__label{ color:#fff; }
.nav2 .nav2__burger span{ background:#fff; }

/* editorial red section-flag underline (animated scaleX), unified across ALL
   top-level nav links (plain links + panel triggers) for a consistent hover, and
   held open for the current section (.is-current, set by main.js) or open panel. */
.pnav__link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.pnav__link:hover::after,
.pnav__link.is-current::after,
.pnav__trigger[aria-expanded="true"]::after{ transform:scaleX(1); }

/* caret (rotates when open) */
.caret{
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); display:inline-block; opacity:.75;
  transition:transform var(--dur-quick) var(--ease-out);
}
.pnav__trigger[aria-expanded="true"] .caret{ transform:rotate(-135deg) translateY(-1px); opacity:1; }

/* Nouveautés flag */
.pnav__link--flag{ color:var(--fg); }
.pnav__flag{ display:inline-flex; color:var(--accent); }

/* Maple leaf, dead-center of the 3+3 primary nav. Absolutely placed so the
   two groups keep their own width; padding on the groups keeps labels from
   colliding with the mark. Injected by main.js on pages whose chrome is
   still byte-identical; the campaign page carries it in the HTML. */
.pnav__inner{ position:relative; }
.pnav__group--left{ padding-right:56px; }
.pnav__group--right{ padding-left:56px; }
.pnav__leaf{
  position:absolute; left:50%; top:50%; z-index:2;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent); border-radius:50%;
  transition:color var(--dur-quick) var(--ease-out),
             background var(--dur-quick) var(--ease-out),
             transform var(--dur-quick) var(--ease-out);
}
.pnav__leaf svg{ display:block; width:22px; height:22px; }
.pnav__leaf:hover,
.pnav__leaf.is-current{
  color:#fff; background:var(--accent); transform:scale(1.06);
}
.pnav__leaf:active{ transform:scale(0.98); }
.pnav__leaf:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.drawer__link--leaf{ justify-content:flex-start; color:var(--accent); }
.drawer__link--leaf svg{ flex:none; width:18px; height:18px; }

/* focus-visible outlines (keyboard a11y graft) */
.pnav__link:focus-visible,
.pnav__trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:var(--r-1); }

/* ------------------------------- Panels (shared) ------------------------ */
.mega,
.dropd{
  position:absolute; z-index:var(--z-overlay);
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:var(--r-2);
}
.mega[hidden],
.dropd[hidden]{ display:none; }

/* ------------------------------- Mega-menu ------------------------------ */
/* FULL-WIDTH: anchored to .pnav (position:relative) via left:0;right:0.
   The item is static, so this spans the primary-nav row edge-to-edge; the
   inner .wrap re-constrains content to the 1320px container width. */
.mega{
  left:0; right:0; width:auto;
  top:100%; margin-top:-1px;
  border-left:0; border-right:0; border-radius:0;
  border-top:1px solid var(--accent);            /* red section-flag rule across the panel top */
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  opacity:0;
  /* opacity-only reveal, NO transform: a translateY here promotes the panel to
     a GPU layer that, under the position:sticky header, composites translucent
     over the hero (Chromium). Fade keeps it solid. */
  transition:opacity var(--dur-base) var(--ease-out);
}
.mega.is-open{ opacity:1; }
.mega__inner{
  display:grid;
  grid-template-columns:1.15fr 1.15fr 1.25fr 1.35fr;
  gap:44px; padding-block:36px;
}
.mega__cols{ display:contents; }
.mega__col{ min-width:0; }
.mega__heading{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--fg);
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--rule-2);
  position:relative;
}
.mega__heading::before{
  content:""; position:absolute; left:0; bottom:-1px; width:28px; height:2px; background:var(--accent);
}
.mega__list{ display:flex; flex-direction:column; gap:2px; }
.mega__list a{
  display:block; padding:8px 0; color:var(--fg-2);
  font-size:14px; line-height:1.35;
  transition:color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.mega__list a:hover{ color:var(--fg); transform:translateX(6px); }
.mega__list a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; color:var(--fg); }

/* collection cards (vertical stack) */
.mega__collections{ display:flex; flex-direction:column; gap:12px; }
.collcard{
  display:flex; align-items:flex-start; gap:14px; padding:16px;
  background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-2);
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.collcard:hover{ border-color:var(--accent); background:var(--atl-ink-800); }
.collcard:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.collcard__icon{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--accent); border-radius:var(--r-2); color:var(--accent);
}
.collcard__body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.collcard__title{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.01em; text-transform:uppercase; color:var(--fg);
}
.collcard__desc{ font-size:12.5px; line-height:1.45; color:var(--fg-3); }

/* featured product card */
.feat{
  display:flex; flex-direction:column;
  background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-2);
  overflow:hidden;
  transition:border-color var(--dur-quick) var(--ease-out);
}
.feat:hover{ border-color:var(--accent); }
.feat:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.feat__media{ position:relative; display:block; background:var(--atl-ink-1000); aspect-ratio:16/11; overflow:hidden; }
.feat__media img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform var(--dur-slow) var(--ease-out); }
.feat:hover .feat__media img{ transform:scale(1.03); }
.feat__tag{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:5px 10px; background:var(--accent); color:#fff; border-radius:var(--r-1);
  font-family:var(--font-mono); font-weight:700; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
}
.feat__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; }
.feat__name{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  letter-spacing:var(--track-tight); text-transform:uppercase; color:var(--fg); line-height:1.05;
}
.feat__desc{ font-size:13px; line-height:1.5; color:var(--fg-3); margin:0; }
.feat__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.feat__price{
  font-family:var(--font-mono); font-weight:700; font-size:19px; color:var(--fg);
  letter-spacing:.01em; font-feature-settings:"tnum" 1;
}
.feat__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--accent); color:#fff; border-radius:var(--r-2);
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  transition:background var(--dur-quick) var(--ease-out);
}
.feat__cta svg{ transition:transform var(--dur-base) var(--ease-out); }
.feat:hover .feat__cta{ background:var(--atl-red-deep); }
.feat:hover .feat__cta svg{ transform:translateX(3px); }

/* ------------------------------- Small dropdowns ------------------------ */
.dropd{
  top:100%; left:16px; min-width:280px;
  margin-top:-1px; padding:14px;
  border-top:1px solid var(--accent);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  opacity:0;
  /* opacity-only reveal, NO transform: a translateY here promotes the panel to
     a GPU layer that, under the position:sticky header, composites translucent
     over the hero (Chromium). Fade keeps it solid. */
  transition:opacity var(--dur-base) var(--ease-out);
}
.dropd--right{ left:auto; right:16px; }
.dropd.is-open{ opacity:1; }
.dropd__heading{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--fg);
  margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--rule-2);
  position:relative;
}
.dropd__heading::before{
  content:""; position:absolute; left:0; bottom:-1px; width:28px; height:2px; background:var(--accent);
}
.dropd__list{ display:flex; flex-direction:column; }
.dropd__list a{
  display:block; padding:11px 12px; margin:0 -8px; color:var(--fg-2); border-radius:var(--r-1);
  font-size:14px; line-height:1.35;
  transition:color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.dropd__list a:hover{ color:var(--fg); background:var(--surface-2); }
.dropd__list a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; color:var(--fg); }

/* Resources keeps the hanging dropdown (so it sits under the word that
   opened it) but the list is three columns, not one tall stack. */
.dropd.dropd--wide{
  right:0;
  left:auto;
  width:min(680px, calc(100vw - 40px));
  min-width:min(520px, calc(100vw - 40px));
  padding:14px 16px 16px;
}
.dropd--wide .dropd__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0 12px;
}
.dropd--wide .dropd__col{ min-width:0; }
.dropd--wide .dropd__col + .dropd__col{
  border-left:1px solid var(--rule-2);
  padding-left:12px;
}
.dropd--wide .dropd__kicker{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.dropd--wide .dropd__list a{ padding:7px 8px; }

/* ------------------------------- Burger --------------------------------- */
.nav2__burger{ display:none; flex:0 0 auto; background:none; border:0; flex-direction:column; gap:5px; padding:6px; }
.nav2__burger span{ width:24px; height:2px; background:var(--fg); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav2__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav2__burger.is-open span:nth-child(2){ opacity:0; }
.nav2__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav2__burger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-1); }

/* ------------------------------- Mobile drawer (right-side sheet + scrim) */
/* .drawer is appended to <body> by main.js (see header note) so this fixed,
   viewport-covering sheet is never trapped by the header's backdrop-filter
   containing block. */
.drawer{ position:fixed; inset:0; z-index:var(--z-modal); }
.drawer[hidden]{ display:none; }
.drawer__scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 380px);
  background:var(--surface); border-left:1px solid var(--rule-2);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 0 40px;
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out);
  display:flex; flex-direction:column;
}
.drawer.is-open .drawer__panel{ transform:translateX(0); }

.drawer__item{ border-bottom:1px solid var(--rule-3); }
.drawer__link,
.drawer__acc{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:16px var(--gutter-mobile); background:none; border:0; text-align:left;
  font-family:var(--font-sans); font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--fg);
}
.drawer__link:focus-visible,
.drawer__acc:focus-visible,
.drawer__sub a:focus-visible,
.drawer__util:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.drawer__acc .caret{ opacity:.7; }
.drawer__acc[aria-expanded="true"] .caret{ transform:rotate(-135deg) translateY(-1px); color:var(--accent); }
.drawer__flag{ display:inline-flex; align-items:center; gap:8px; }
.drawer__flag .pnav__flag{ color:var(--accent); }
.drawer__panelbody{ display:none; padding:0 0 12px; background:var(--atl-ink-1000); }
.drawer__panelbody.is-open{ display:block; }
.drawer__sub{ display:flex; flex-direction:column; }
.drawer__subhead{
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-4);
  margin:0; padding:14px var(--gutter-mobile) 6px;
}
.drawer__sub a{
  display:block; padding:11px var(--gutter-mobile) 11px calc(var(--gutter-mobile) + 14px);
  color:var(--fg-2); font-size:14px; text-transform:none; letter-spacing:0; font-weight:500;
  border-left:2px solid transparent;
  transition:color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.drawer__sub a:hover{ color:var(--fg); border-left-color:var(--accent); }

/* drawer utilities (fold-in for anything trimmed from the masthead on mobile) */
.drawer__utils{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:20px; padding:0 var(--gutter-mobile);
}
.drawer__util{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:12px; background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-2);
  font-size:13px; font-weight:600; color:var(--fg-2);
  transition:border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.drawer__util:hover{ color:var(--fg); border-color:var(--accent); }
.drawer__util-badge{
  min-width:18px; height:18px; padding:0 5px; margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1;
}

/* ------------------------------- Responsive ----------------------------- */
@media (max-width:1180px){
  .mast__inner{ gap:20px; }
  .util__label{ display:none; }         /* icons only, keep them compact */
  .util__link{ padding:8px; }
  .mega__inner{ gap:28px; }
}

@media (max-width:1080px){
  /* collapse primary nav into burger */
  .pnav{ display:none; }
  .nav2__burger{ display:flex; margin-left:4px; }
  /* search collapses to a magnifier toggle */
  .mastsearch{ display:none; }
  .mastsearch-toggle{ display:inline-flex; }
  .mastsearch.is-expanded{
    display:flex; order:5; flex-basis:100%; width:100%; margin-top:12px;
  }
  .mast__inner{ flex-wrap:wrap; }
  .quickorder.btn{ display:none; }       /* moves into the drawer */
  .util{ margin-left:auto; }
}

@media (max-width:640px){
  :root{ --gutter-desk:24px; }
  .mast-top__note{ display:none; }
  .mast-top__inner{ justify-content:flex-end; }
  .util__link{ padding:6px; }
  /* Do NOT hide utilities with no fallback, icon-only + tighter gaps keeps
     every link reachable; the full labelled set also lives in the drawer. */
  .util{ gap:2px; }
}

/* ------------------------------- Reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce){
  .mega, .dropd,
  .mega.is-open, .dropd.is-open,
  .feat__media img, .feat__cta svg, .caret,
  .pnav__link::after,
  .quickorder.btn, .mastsearch, .util__link, .util__label,
  .nav2__burger span, .drawer__scrim, .drawer__panel, .drawer__acc .caret,
  .mega__list a, .dropd__list a,
  .pnav__leaf, .pnav__leaf:hover, .pnav__leaf.is-current, .pnav__leaf:active{
    transition:none !important;
  }
  .pnav__leaf:hover, .pnav__leaf.is-current, .pnav__leaf:active{ transform:none; }
  /* re-anchored full-width mega has no translateX; kill any residual slide */
  .mega, .mega.is-open,
  .dropd, .dropd.is-open{ transform:none; }
  .drawer__panel{ transition:none; }
}

/* ================================ HERO ================================== */
/* 88vh laissait une bande morte sous le hero. 100vh tout court, sous un
   en-tete + bandeau, debordait: c'est 100svh MOINS ce qui est deja a
   l'ecran. --atl-head est mesure par main.js; 218px est 172+46, en-tete
   plus le bandeau de livraison, le mieux qu'une feuille puisse savoir. */
.hero{ position:relative;
  min-height:calc(100vh - var(--atl-head, 218px));
  min-height:calc(100svh - var(--atl-head, 218px));
  display:flex; align-items:center; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.28) 100%),
             linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.1) 45%); }
.hero__inner{ padding-block:clamp(32px, 5.5vh, 88px); }
.hero__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(44px, min(7vw, 10vh), 104px); line-height:0.92; letter-spacing:var(--track-display);
  margin:0 0 26px; max-width:16ch;
}
.hero__lede{ font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:var(--atl-ink-200);
  max-width:52ch; margin:0 0 38px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* Accueil et industries: at rest, the black fields under .mast-top
   (masthead, primary nav, delivery banner / crumbs) go clear so the hero
   photo reads through. .mast-top stays black. On .nav2.is-scrolled the
   sticky shell is black again. The photo is pulled up by --atl-over
   (nav2 + banner or crumbs, ~170px) and the section is sized to the
   viewport minus .mast-top, so the first screen still holds. */
.home .nav2,
.page-industries .nav2{
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.home .nav2:not(.is-scrolled),
.page-industries .nav2:not(.is-scrolled){
  background:transparent;
  border-bottom-color:transparent;
}
.home .nav2:not(.is-scrolled) .mast,
.page-industries .nav2:not(.is-scrolled) .mast{ border-bottom-color:transparent; }
/* Et le filet de .mast-top avec eux. Le fond noir de la barre, lui, RESTE : sur
   ces deux pages la photo ne passe pas dessous, elle commence dessous (le hero
   est remonte de --atl-over, qui vaut .nav2 plus le bandeau et n'inclut pas
   .mast-top), donc ce fond noir se pose sur le corps noir et ne masque rien.
   Seul son filet se verrait, en travers du haut de la photo, et ces deux pages
   effacent au repos tous leurs autres filets, juste au-dessus.
   Pas de :not(.is-scrolled) ici, et ce n'est pas un oubli : .mast-top n'est pas
   sticky, seul .nav2 l'est. Des qu'on defile, la barre quitte l'ecran ; elle
   n'est donc JAMAIS vue autrement qu'au repos sur ces deux pages.
   C'est la couleur qu'on annule, pas la largeur : la barre garde ses 39px
   partout, donc --atl-mast vaut 39 sur tout le site et rien ne diverge. */
.home .mast-top,
.page-industries .mast-top{ border-bottom-color:transparent; }
.home .nav2:not(.is-scrolled) ~ .banner,
.page-industries .nav2:not(.is-scrolled) ~ .crumbs{
  background:transparent;
  border-bottom-color:transparent;
}
.home .hero{
  margin-top:calc(-1 * var(--atl-over, 170px));
  min-height:calc(100vh - var(--atl-mast, 38px));
  min-height:calc(100svh - var(--atl-mast, 38px));
  padding-top:var(--atl-over, 170px);
}
/* Le voile du hero ecrasait le haut: fonds transparents + photo sombre =
   encore du noir. Le masque leve le voile sur la zone d'en-tete pour que
   la machine se lise derriere le menu, puis le reprend sous le titre. */
.home .hero__scrim{
  -webkit-mask-image:linear-gradient(180deg, transparent 0,
                      rgba(0,0,0,.35) var(--atl-over, 170px), #000 calc(var(--atl-over, 170px) + 90px));
  mask-image:linear-gradient(180deg, transparent 0,
             rgba(0,0,0,.35) var(--atl-over, 170px), #000 calc(var(--atl-over, 170px) + 90px));
}
/* Headers officiels 1920x980: colles en haut (derriere le menu),
   plus le recadrage a 28% calibre sur l'ancienne photo d'atelier. */
.home .hero__media img{ object-position:center top; }

/* Accueil et industries: plaque blanche derriere le logo, hors flux.
   Aucune geometrie ne change entre les deux etats (gap, tailles, rayons,
   marges). La plaque s'arrete sous la recherche (fond opaque) ou, sous
   1080px, au bord du toggle. Wordmark blanc sur blanc: swap des deux PNG,
   meme boite. Ailleurs la plaque et le PNG clair restent display:none. */
.mast__brand{
  --mast-brand-gap:28px;
  position:relative;
  display:flex; align-items:center; min-width:0; flex:1 1 auto;
  gap:var(--mast-brand-gap);
}
.mast__logo-plate,
.mast__logo-on-light{ display:none; }
.home .mast__brand,
.page-industries .mast__brand{
  --mast-brand-gap:28px;
}
.home .mast__logo,
.page-industries .mast__logo{ position:relative; z-index:1; }
.home .mastsearch,
.home .mastsearch-toggle,
.page-industries .mastsearch,
.page-industries .mastsearch-toggle{ position:relative; z-index:1; }
.home .mast__logo-plate,
.page-industries .mast__logo-plate{
  display:none; pointer-events:none;
  position:absolute; z-index:-1;
  top:50%; left:50%;
  width:calc(100% + 2 * var(--mast-brand-gap));
  height:46px;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:var(--r-2) 0 0 var(--r-2);
}
.home .mast__logo-on-light,
.page-industries .mast__logo-on-light{ display:none; }
.home .nav2:not(.is-scrolled) .mast__logo-plate,
.page-industries .nav2:not(.is-scrolled) .mast__logo-plate{ display:block; }
.home .nav2:not(.is-scrolled) .mast__logo-on-dark,
.page-industries .nav2:not(.is-scrolled) .mast__logo-on-dark{ display:none; }
.home .nav2:not(.is-scrolled) .mast__logo-on-light,
.page-industries .nav2:not(.is-scrolled) .mast__logo-on-light{ display:inline; }

@media (max-width:1180px){
  .mast__brand{ --mast-brand-gap:20px; }
}

/* ================================ STATS ================================= */
.stats{ background:#000; border-block:1px solid var(--atl-ink-800); }
.stats__inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ display:flex; flex-direction:column; gap:4px; padding:30px 12px; text-align:center; align-items:center;
  border-left:1px solid var(--atl-ink-800); }
.stat:first-child{ border-left:0; }
.stat__val{ font-family:var(--font-display); font-weight:800; font-size:22px; text-transform:uppercase;
  letter-spacing:.02em; color:#fff; line-height:1; }
.stat__label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--atl-ink-400); }

/* ============================== FEATURES =============================== */
.features{ background:var(--atl-ink-1000); padding-block:clamp(64px,8vw,120px); }
.features__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,5vw,80px); }
.feature{ position:relative; }
.feature__num{ font-family:var(--font-mono); font-size:13px; color:var(--atl-red-soft); letter-spacing:.1em; display:block; margin-bottom:26px; }   /* --accent sur noir : 3,55:1 ; red-soft : 5,4:1 */
.feature__icon{ display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px;
  border:1px solid var(--atl-red); border-radius:50%; color:var(--atl-red); margin-bottom:26px; }
.feature__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:#fff;
  font-size:23px; letter-spacing:.01em; line-height:1.1; margin-bottom:16px; }
.feature__text{ color:var(--atl-ink-300); font-size:15px; line-height:1.62; max-width:36ch; margin:0; }

/* ========================= FIND THE EQUIPMENT ========================== */
.equip{ background:var(--atl-ink-1000); padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--atl-ink-800); }
.equip__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.equip__list{ margin-top:8px; }
.equip__item{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 0;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,46px); line-height:1.02; letter-spacing:var(--track-tight);
  color:var(--atl-ink-400); transition:color var(--dur-base) var(--ease-out); }   /* ink-500 : 2,8:1 sur noir, sous le 3:1 des grands textes */
.equip__item:hover, .equip__item.is-active{ color:var(--accent); }
.equip__name{ min-width:0; }
.equip__count{ flex:none; font-family:var(--font-mono); font-weight:500; font-size:14px; color:var(--atl-ink-400); letter-spacing:.04em; }
.equip__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.equip__media img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--dur-slow) var(--ease-out); }

/* ============================== INSPIRE ================================ */
.inspire{ position:relative; padding-block:clamp(70px,9vw,130px) 0; isolation:isolate; }
.inspire__media{ position:absolute; inset:0; z-index:-1; }
.inspire__media img{ width:100%; height:100%; object-fit:cover; }
.inspire__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.55) 45%, rgba(0,0,0,.9)); }
.inspire__inner{ text-align:center; }
.inspire__select{ display:inline-flex; align-items:center; gap:18px; background:none; border:0; color:#fff;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px); line-height:1; letter-spacing:var(--track-tight); }
.inspire__select .caret-svg{ color:var(--accent); }
.inspire__cards-wrap{ margin-top:clamp(40px,6vw,72px); }
.inspire__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  transform:translateY(clamp(30px,4vw,60px)); }
.icard{ background:rgba(16,16,18,.82); backdrop-filter:blur(6px); border:1px solid var(--atl-ink-700); }
/* POURQUOI CETTE PAIRE DE LIGNES, ET PAS « max-height:100% » TOUT SEUL.
   Dans une grille en place-items:center, la rangee implicite est AUTO : la zone
   de grille n'a donc pas de hauteur definie, « max-height:100% » n'a rien contre
   quoi se resoudre et vaut auto. L'image prend sa hauteur naturelle et sort de
   la boite par le bas. Les rendus produit de ZENTRALT sont presque tous
   PORTRAIT (411x801, 480x822, 1000x897) : c'est la regle, pas l'exception, et la
   vedette de la page d'accueil debordait de 211 px.
   minmax(0,1fr) rend la rangee et la colonne DEFINIES, sans changer le
   centrage : le pourcentage se resout enfin, sur la boite de CONTENU.
   Ne pas remplacer par un enfant en position:absolute avec des retraits : un
   element absolu se dimensionne sur la boite de REMBOURRAGE de son ancetre
   positionne, pas sur le retrait, et il ressort donc du padding des deux cotes.
   Mesure a l'appui : 18 px de debordement en haut et en bas pour un padding de
   18 px. La variante de .pdp-body--fiche .gallery__img (pdp.css) n'en souffre
   pas parce que cette boite-la est en padding:0. */
.icard__media{ aspect-ratio:4/3; background:var(--atl-ink-900); display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); padding:16px; overflow:hidden; }
.icard__media img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.icard__body{ padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px; }
.icard__title{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:uppercase;
  color:#fff; line-height:1.12; letter-spacing:.01em; }
.icard__model{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.06em; }
.icard__price{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--atl-ink-300);
  border-top:1px solid var(--atl-ink-700); padding-top:12px; margin-top:2px; }

/* ============================= SELLERS ================================= */
/* Un ilot clair dans une page sombre : ses cartes blanches heritaient des jetons de
   texte du theme sombre (--fg-2 = ink-200, --fg-3 = ink-300), soit 1,5:1 et 2,4:1 sur
   blanc, mesure le 2026-09-06. L'ilot reprend donc les jetons du theme clair. */
.sellers{ background:var(--atl-ink-50); color:var(--atl-ink-1000); padding-block:clamp(72px,9vw,120px);
  --fg-2:var(--atl-ink-700); --fg-3:var(--atl-ink-500); --fg-4:var(--atl-ink-500); }
.sellers .eyebrow{ color:var(--fg-3); }
.sellers .section-title{ color:var(--atl-ink-1000); }
.sellers__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pcard{ background:#fff; border:1px solid var(--atl-ink-150); display:flex; flex-direction:column;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); }
.pcard__media{ position:relative; aspect-ratio:1/1; background:#fff; display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  padding:26px; border-bottom:1px solid var(--atl-ink-150); overflow:hidden; }
/* voir la note sur .icard__media plus haut : minmax(0,1fr) est ce qui rend
   « max-height:100% » resolvable. overflow:hidden est une ceinture, pas la
   correction : sans lui, une future image trop haute ne serait pas rognee mais
   viendrait couvrir le corps de la carte. */
.pcard__media img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.pcard__tag{ position:absolute; top:0; left:0; background:var(--accent); color:#fff;
  font-family:var(--font-sans); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; }
.pcard__body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard__title{ font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase;
  line-height:1.14; letter-spacing:.01em; }
.pcard__model{ font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.04em; text-transform:uppercase; }
.pcard__specs{ display:flex; flex-direction:column; gap:6px; margin:4px 0; }
.pcard__specs li{ position:relative; padding-left:18px; font-size:13px; color:var(--fg-2); line-height:1.4; }
.pcard__specs li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; background:var(--accent); }
.pcard__price{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-3);
  border-top:1px solid var(--atl-ink-150); padding-top:14px; margin-top:auto; }
.pcard__price svg{ color:var(--fg-3); }
.pcard .btn--outline{ margin-top:12px; }

/* ============================== TRUST ================================== */
.trust{ background:var(--atl-ink-1000); padding-block:clamp(64px,8vw,104px); border-top:1px solid var(--atl-ink-800); }
.trust .section-title{ color:#fff; margin-top:8px; }
.trust__logos{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-top:52px; border-block:1px solid var(--atl-ink-800); }
.trust__logos li{ flex:1 1 auto; text-align:center; padding:28px 24px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(15px,1.5vw,20px); text-transform:uppercase;
  letter-spacing:.04em; color:var(--atl-ink-400); border-left:1px solid var(--atl-ink-800);
  transition:color var(--dur-base) var(--ease-out); white-space:nowrap; }
.trust__logos li:first-child{ border-left:0; }
.trust__logos li:hover{ color:#fff; }

/* =========================== TESTIMONIALS ============================== */
.testi{ background:var(--atl-ink-1000); padding-block:0 clamp(72px,9vw,120px); }
.testi .section-title{ color:#fff; margin-bottom:52px; }
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcard{ background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); padding:34px 30px;
  display:flex; flex-direction:column; gap:20px; }
.tcard__quote{ color:var(--accent); opacity:.9; }
.tcard__text{ font-family:var(--font-sans); font-weight:400; font-size:17px; line-height:1.55;
  color:var(--atl-ink-100); text-transform:none; letter-spacing:0; margin:0; }
.tcard__foot{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.tcard__avatar{ width:46px; height:46px; border-radius:50%; background:var(--atl-ink-700); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; flex-shrink:0; }
.tcard__name{ display:block; font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:.02em; }
.tcard__role{ display:block; font-size:12px; color:var(--atl-ink-400); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.tcard .link-arrow{ align-self:flex-start; }
.tcard__credit{ margin:14px 0 0; font-size:12px; color:var(--atl-ink-400); line-height:1.45; }
.tcard__dealer{ color:var(--atl-ink-300); text-decoration:underline; text-underline-offset:2px; }
.tcard__dealer:hover{ color:var(--accent); }
/* One line per testimonial band saying the quotes are reproduced in their
   original language. See tools/bake-testimonials.php. */
.testi__origin{ max-width:64ch; margin:-24px auto 44px; text-align:center; font-size:12.5px;
  font-style:italic; color:var(--atl-ink-400); }


/* =============================== BLOG ================================== */
.blog{ background:#fff; color:var(--atl-ink-1000); padding-block:clamp(72px,9vw,120px); }
.blog .section-title{ color:var(--atl-ink-1000); }
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bcard{ position:relative; aspect-ratio:4/5; overflow:hidden; display:flex; align-items:flex-start;
  background-image:var(--bg); background-size:cover; background-position:center; isolation:isolate; }
.bcard::after{ content:""; position:absolute; inset:0; background-image:var(--bg); background-size:cover;
  background-position:center; z-index:-2; transition:transform var(--dur-slow) var(--ease-out); }
.bcard:hover::after{ transform:scale(1.05); }
.bcard__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.78) 100%); }
.bcard__body{ padding:28px; display:flex; flex-direction:column; height:100%; width:100%; }
.bcard__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.7vw,23px);
  text-transform:uppercase; color:#fff; line-height:1.12; letter-spacing:.01em; max-width:15ch; }
.bcard__link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:#fff;
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:var(--track-wide); text-transform:uppercase; }
.bcard__link svg{ transition:transform var(--dur-base) var(--ease-out); }
.bcard:hover .bcard__link svg{ transform:translateX(4px); }

/* ================================ CTA ================================== */
.cta{ position:relative; background:
  radial-gradient(120% 140% at 85% 0%, var(--atl-red) 0%, #7a1420 42%, #150607 100%); overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent 60%); }
.cta__inner{ position:relative; text-align:center; padding-block:clamp(72px,10vw,130px); }
.cta .eyebrow{ color:rgba(255,255,255,.8); }
.cta .eyebrow::before{ background:#fff; }
.cta__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(32px,5vw,68px); line-height:0.98; letter-spacing:var(--track-tight); margin:0 0 40px; }

/* =============================== FOOTER ================================ */
.footer{ background:#000; padding-block:56px 40px; border-top:1px solid var(--atl-ink-800); }
.footer__top{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; margin-bottom:40px;
  float:right; font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--atl-ink-300); transition:color var(--dur-quick) var(--ease-out); }
.footer__top:hover{ color:#fff; }
.footer__top svg{ transition:transform var(--dur-base) var(--ease-out); }
.footer__top:hover svg{ transform:translateY(-3px); }
.footer__grid{ display:grid; grid-template-columns:2fr 1.2fr 1fr 1fr; gap:40px; clear:both;
  padding-bottom:48px; border-bottom:1px solid var(--atl-ink-800); }
.footer__logo{ height:30px; width:auto; margin-bottom:22px; }
.footer__addr{ font-style:normal; color:var(--atl-ink-400); font-size:14px; line-height:1.7; }
.footer__head{ font-family:var(--font-display); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.1em; color:#fff; margin-bottom:18px; }
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col a{ font-size:14px; color:var(--atl-ink-400); transition:color var(--dur-quick) var(--ease-out); }
.footer__col a:hover{ color:#fff; }
/* --- Les categories du catalogue, dans le pied ---------------------------
   Le mega-menu du site officiel liait 70 categories depuis chaque page ; le
   notre en montre douze. Ce bloc rend le lien sitewide aux autres sans
   redessiner le menu. Il est ECRIT par tools/poser-categories-pied.php, jamais
   a la main. Petit corps, gris AA (ink-400 = 4,9:1 sur noir).

   DEUX FLUX, ET POURQUOI DEUX. La premiere version posait les six groupes dans
   une grille de quatre colonnes egales. Une grille aligne des rangees : le
   groupe a deux entrees et celui a trente-sept partageaient la meme, donc le
   premier laissait dix lignes de vide sous lui et le second debordait sur
   toute la largeur. « Par partie du corps », le seul axe a deux etages, coule
   donc maintenant en colonnes CSS, qui remplissent sans aligner de rangees et
   ne laissent aucun trou entre des groupes inegaux ; les axes courts gardent
   une grille, qui les met cote a cote sans les etirer. */
.footer__cats{ border-bottom:1px solid var(--atl-ink-800); }
/* La ligne qui ouvre l'index. Le marqueur du navigateur est retire des deux
   facons qu'il faut : list-style pour Chrome et Firefox, ::-webkit-details-marker
   pour Safari, qui ignore la premiere. */
.footer__cats-ouvrir{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 0; cursor:pointer; list-style:none; }
.footer__cats-ouvrir::-webkit-details-marker{ display:none; }
.footer__cats-ouvrir .footer__head{ margin:0; transition:color var(--dur-quick) var(--ease-out); }
.footer__cats-ouvrir:hover .footer__head{ color:var(--accent); }
.footer__cats-chevron{ flex:0 0 auto; color:var(--atl-ink-300);
  transition:transform var(--dur-base) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.footer__cats-ouvrir:hover .footer__cats-chevron{ color:#fff; }
.footer__cats[open] .footer__cats-chevron{ transform:rotate(180deg); }
.footer__cats-ouvrir:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.footer__cats[open] .footer__cats-ouvrir{ padding-bottom:18px; }
.footer__cats[open]{ padding-bottom:8px; }
.footer__cats-axe + .footer__cats-axe,
.footer__cats-rangee{ margin-top:30px; }
.footer__cats-rangee{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 32px; align-items:start; }
.footer__cats-axe{ min-width:0; }
.footer__cats-axe-titre{ font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--atl-ink-300); margin:0 0 16px; }
/* Le grand axe coule en colonnes : c'est ce qui interdit les trous. Un paquet
   ne se coupe jamais en deux (break-inside), et le inline-block+width est ce
   qui le fait tenir a Safari, qui ignore break-inside sur un bloc nu. */
.footer__cats-axe--large .footer__cats-paquets{ columns:4; column-gap:32px; }
.footer__cats-axe--large .footer__cats-paquet{ display:inline-block; width:100%;
  break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:20px; }
.footer__cats-paquet + .footer__cats-paquet{ margin-top:18px; }
.footer__cats-axe--large .footer__cats-paquet + .footer__cats-paquet{ margin-top:0; }
/* Le titre d'un paquet est la categorie qui le porte, donc un lien : blanc et
   un cran plus lourd que ses enfants, c'est ce qui donne les deux etages. */
.footer__cats-titre{ display:block; font-family:var(--font-sans); font-weight:700; font-size:13px;
  line-height:1.35; color:#fff; margin:0 0 8px; transition:color var(--dur-quick) var(--ease-out); }
a.footer__cats-titre:hover{ color:var(--accent); }
.footer__cats-titre--muet{ color:var(--atl-ink-300); font-weight:700; }
.footer__cats-list{ display:flex; flex-direction:column; gap:8px; }
.footer__cats-list a{ font-size:13px; line-height:1.35; color:var(--atl-ink-400);
  transition:color var(--dur-quick) var(--ease-out); }
.footer__cats-list a:hover{ color:#fff; }
/* Un paquet a titre decale ses enfants : sans ce retrait, un pied a deux
   etages se relit comme une seule liste ou le premier terme est en gras. */
.footer__cats-titre + .footer__cats-list{ padding-left:10px; border-left:1px solid var(--atl-ink-800); }
/* Une entree du pied qui n'existe QU'EN ANGLAIS ne s'offre pas a un lecteur
   francais : c'est la decision du 2026-09-04 sur le menu Industries, ou un
   visiteur francophone quittait le francais sans le vouloir, et c'est aussi ce
   que fait le site officiel, dont le pied francais ne nomme aucune de ces
   pages. i18n.js tient <html lang> a jour, y compris quand la langue change
   sans recharger : une regle suffit, aucun JS de plus. */
html[lang^="fr"] .footer__cats-en-seul{ display:none; }
@media (max-width: 1000px){
  .footer__cats-rangee{ grid-template-columns:1fr 1fr; }
  .footer__cats-axe--large .footer__cats-paquets{ columns:2; }
}
@media (max-width: 620px){
  .footer__cats-rangee{ grid-template-columns:1fr; }
  .footer__cats-axe--large .footer__cats-paquets{ columns:1; }
}

.footer__bar{ display:flex; align-items:center; gap:24px; padding-top:28px; flex-wrap:wrap; }
/* ink-400 et non ink-500 : sur noir, ink-500 fait 2,8:1, ink-400 4,9:1 (AA exige 4,5). */
.footer__copy{ font-size:12px; color:var(--atl-ink-400); margin:0; }
.footer__legal{ display:inline-flex; align-items:center; gap:10px; font-size:12px; color:var(--atl-ink-400); }
.footer__legal a{ transition:color var(--dur-quick) var(--ease-out); }
.footer__legal a:hover{ color:#fff; }
.footer__social{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.footer__social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--atl-ink-700); color:var(--atl-ink-300); transition:.2s var(--ease-out); }
.footer__social a:hover{ color:#fff; border-color:#fff; background:var(--atl-ink-900); }
.footer__social a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; color:#fff; }

/* ============================ RESPONSIVE =============================== */
@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .sellers__grid{ grid-template-columns:repeat(2,1fr); }
  .inspire__cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  :root{ --gutter-desk:32px; }
  .features__grid{ grid-template-columns:1fr; gap:44px; }
  .equip__grid{ grid-template-columns:1fr; }
  .equip__media{ aspect-ratio:16/10; order:-1; }
  .testi__grid, .blog__grid{ grid-template-columns:1fr; }
  .stats__inner{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(odd){ border-left:0; }
  .stat{ border-top:1px solid var(--atl-ink-800); }
  .stat:nth-child(1),.stat:nth-child(2){ border-top:0; }
  .trust__logos{ }
  .trust__logos li{ flex:1 1 40%; }

}
@media (max-width:620px){
  .hero__inner{ padding-block:clamp(28px, 5vh, 56px); }
  .sellers__grid, .inspire__cards{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer__social{ margin-left:0; }
  .inspire__cards{ transform:none; }
}

/* =========================================================================
   HOME, sitemap-aligned additions: Banner, Promo banner, Gallery
   ========================================================================= */

/* ---- Banner (slim announcement strip, after nav) ---- */
.banner{ background:#000; border-bottom:1px solid var(--atl-ink-800); }
.banner__inner{ display:flex; align-items:center; justify-content:center; gap:16px; min-height:46px; padding-block:9px; flex-wrap:wrap; }
.banner__text{ margin:0; font-size:13px; color:var(--atl-ink-300); letter-spacing:.01em; }
.banner__text strong{ color:#fff; font-weight:700; }
.banner__link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:700;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--atl-red-soft); }
.banner__link svg{ transition:transform var(--dur-base) var(--ease-out); }
.banner__link:hover{ color:#fff; }
.banner__link:hover svg{ transform:translateX(3px); }

/* ---- Promo banner (bold band, after hero) ---- */
.promo{ position:relative; overflow:hidden;
  background:radial-gradient(130% 180% at 82% 0%, var(--atl-red) 0%, #7d1421 45%, #14060a 100%); }
.promo::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.5), transparent 58%); }
.promo__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding-block:clamp(28px,3.6vw,46px); flex-wrap:wrap; }
.promo__text{ max-width:60ch; }
.promo .eyebrow{ color:rgba(255,255,255,.82); margin:0 0 10px; }
.promo .eyebrow::before{ background:#fff; }
.promo__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(24px,3vw,42px); line-height:1; letter-spacing:var(--track-tight); margin:0 0 8px; }
.promo__sub{ color:rgba(255,255,255,.85); font-size:15px; line-height:1.5; margin:0; }
.promo__btn{ flex-shrink:0; }

/* ---- Gallery (inspirational mosaic) ---- */
.gallery-home{ background:var(--atl-ink-1000); padding-block:clamp(56px,7vw,104px); border-top:1px solid var(--atl-ink-800); }
.gallery-home .section-head{ margin-bottom:36px; }
.gallery-home__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:16px; }
.gtile{ margin:0; overflow:hidden; position:relative; background:var(--atl-ink-800); }
.gtile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.gtile:hover img{ transform:scale(1.06); }
.gtile--big{ grid-column:span 2; grid-row:span 2; }
.gtile--wide{ grid-column:span 2; }

@media (max-width:900px){
  .gallery-home__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .gtile--big{ grid-column:span 2; grid-row:span 1; }
  .gtile--wide{ grid-column:span 2; }
}
@media (max-width:620px){
  .banner__inner{ flex-direction:column; gap:6px; text-align:center; }
  .promo__btn{ width:100%; }
  .gallery-home__grid{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .gtile--big, .gtile--wide{ grid-column:span 1; }
}

/* =========================================================================
   MOTION FOUNDATION (global, shared everywhere)
   Reveal-on-scroll, body enter-fade, unified press/hover, scroll progress,
   header scroll-state. Animates ONLY transform + opacity (no CLS, 60fps).

   Progressive enhancement contract
   --------------------------------
   The "hidden-before-reveal" state and the body enter-fade exist ONLY under
   html.motion / html.preload, classes that main.js adds at runtime and ONLY
   when motion is allowed. So:
     • JS disabled  -> no .motion   -> everything painted & visible, instant.
     • reduced-motion -> main.js skips .motion, and the @media block below
                         force-neutralises every transition as a belt-and-braces.
   Nothing is ever hidden by default.
   ========================================================================= */

/* Body enters with a quick fade (only when caught early, before first paint). */
html.preload body{ opacity:0; }
html.preload body.is-ready{ opacity:1; transition:opacity var(--dur-base) var(--ease-out); }

/* Reveal-on-scroll primitive: rise + fade, staggered via --reveal-delay. */
html.motion .reveal{ opacity:0; transform:translateY(16px); }
/* The reveal is a ONE-SHOT ANIMATION (not a transition): the stagger delay lives
   on the animation, so it never bleeds into the element's own hover transitions
   (which stay snappy). animation-fill-mode:backwards holds the hidden state during
   the delay (no flash), then reverts to the .is-in style (transform:none) so hover
   transforms are free, no fill pinning. */
@keyframes atlReveal{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
html.motion .reveal.is-in{
  opacity:1; transform:none;
  animation:atlReveal var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

/* The section red flag (eyebrow dash) draws in right after its group reveals,
   the "tick rouge animé" using the existing brand mark, no new layout. */
html.motion .eyebrow.reveal::before{
  transform-origin:left; transform:scaleX(0);
  transition:transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--reveal-delay, 0ms) + var(--dur-base));
}
html.motion .eyebrow.reveal.is-in::before{ transform:scaleX(1); }

/* Unified button press. */
.btn:active{ transform:scale(.98); }

/* Shared product card: lift (already present) + accent border + gentle image
   zoom under overflow:hidden. */
.pcard__media{ overflow:hidden; }
.pcard__media img{ transition:transform var(--dur-slow) var(--ease-out); }
.pcard:hover{ border-color:var(--accent); }
.pcard:hover .pcard__media img{ transform:scale(1.04); }

/* Scroll progress bar, 2px red, pinned to the very top, transform-driven. */
.scrollprog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 90ms linear; pointer-events:none; will-change:transform;
}

/* Header gains a soft shadow once the page has scrolled (NO backdrop-filter). */
.nav2{ transition:box-shadow var(--dur-base) var(--ease-out); }
.nav2.is-scrolled{ box-shadow:0 12px 30px -20px rgba(0,0,0,.9); }

/* Reduced-motion: belt-and-braces, everything instant & visible. */
@media (prefers-reduced-motion: reduce){
  html.motion .reveal,
  html.motion .reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  html.motion .eyebrow.reveal::before,
  html.motion .eyebrow.reveal.is-in::before{ transform:none !important; transition:none !important; }
  html.preload body,
  html.preload body.is-ready{ opacity:1 !important; transition:none !important; }
  .scrollprog{ transition:none !important; }
  .btn:active{ transform:none; }
  .pcard__media img,
  .pcard:hover .pcard__media img{ transition:none !important; transform:none !important; }
  .nav2{ transition:none !important; }
}

/* =========================================================================
   HOME (/) MOTION, hero enters at LOAD, gallery hover frame, smoother
   equipment image-swap. .hero/.gtile/.equip exist only on the homepage;
   .cta__title reveal (via main.js) is shared and consistent site-wide.
   ========================================================================= */

/* Hero is above the fold -> staggered entrance at LOAD (CSS animation, not
   scroll-reveal; main.js excludes .hero from the observer). Under html.motion
   only, so no-JS and reduced-motion keep it static and visible. */
@keyframes heroRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
html.motion .hero__inner > *{ opacity:0; animation:heroRise var(--dur-slow) var(--ease-out) both; }
html.motion .hero__inner > .eyebrow{ animation-delay:60ms; }
html.motion .hero__inner > .hero__title{ animation-delay:150ms; }
html.motion .hero__inner > .hero__lede{ animation-delay:260ms; }
html.motion .hero__inner > .hero__actions{ animation-delay:360ms; }

/* Gallery tiles: the image already scales on hover; add a red frame that fades
   in (opacity only) for a confident, on-brand accent. */
.gtile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border:2px solid var(--accent); opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.gtile:hover::after{ opacity:1; }

/* Equipment list image-swap: snappier fade + gentle scale settle. */
.equip__media img{
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce){
  html.motion .hero__inner > *{ animation:none !important; opacity:1 !important; transform:none !important; }
  .gtile::after{ transition:none !important; }
  .gtile img, .gtile:hover img{ transition:none !important; transform:none !important; }
  .equip__media img{ transition:none !important; transform:none !important; }
}

/* ============================================================================
   NOUVEAUTE ET MARCHES SERVIS
   Deux sections ajoutees pour aligner l'accueil sur celui de atlantisstrength.com.
   Elles suivent les conventions d'a cote : fond en jeton --atl-ink-*, padding en
   clamp, grille avec gap plutot que des marges par element.
   ========================================================================== */

/* La nouveaute. Le site officiel la loge DANS son heros ; ici c'est une bande a
   part, parce que retoucher la mise en page du heros sans pouvoir la regarder
   est le genre de pari qui casse une page. */
.newnew{ background:var(--atl-ink-900); padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--atl-ink-800); }
.newnew__inner{ display:grid; grid-template-columns:minmax(160px,240px) 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.newnew__media{ margin:0; }
.newnew__media img{ width:100%; height:auto; display:block; }
.newnew__body{ display:grid; gap:12px; justify-items:start; }
.newnew__title{ margin:0; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.1; }
.newnew__text{ margin:0; max-width:56ch; color:var(--atl-ink-200); }
.newnew__btn{ margin-top:4px; }

/* Les marches servis. Trois cartes egales, l'image au-dessus du libelle. */
.markets{ background:var(--atl-ink-1000); padding-block:clamp(64px,8vw,110px); border-top:1px solid var(--atl-ink-800); }
.markets__lede{ margin:0; max-width:52ch; color:var(--atl-ink-200); font-size:.98rem; }
.markets__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
.market{ display:grid; gap:14px; color:inherit; text-decoration:none; }
.market__media{ display:block; overflow:hidden; background:var(--atl-ink-800); aspect-ratio:429/255; }
.market__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.market:hover .market__media img, .market:focus-visible .market__media img{ transform:scale(1.05); }
.market__name{ display:block; font-weight:600; line-height:1.35; }
.market:hover .market__name, .market:focus-visible .market__name{ color:var(--accent); }
.market:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* La philosophie coiffe les trois differenciateurs : son en-tete a besoin d'air
   avant la grille, sinon les deux blocs se touchent. */
.features .section-head{ margin-bottom:clamp(32px,4vw,56px); }

@media (max-width:860px){
  .markets__grid{ grid-template-columns:1fr 1fr; }
  .newnew__inner{ grid-template-columns:1fr; justify-items:start; }
  .newnew__media{ max-width:220px; }
}
@media (max-width:560px){
  .markets__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .market__media img{ transition:none; }
  .market:hover .market__media img{ transform:none; }
}

/* =========================================================================
   SEARCH AUTOCOMPLETE (.acx), the panel assets/js/search.js appends inside
   .mastsearch. Same drop-from-the-dark-header language as .mega: a white
   surface, a red section-flag rule across the top, a hairline border.

   NB .mastsearch used to set overflow:hidden, which clipped the red flag to
   the field's rounded corners. A panel that hangs BELOW the field cannot live
   inside a clipped box, so the clipping moved onto the flag itself and the
   field went overflow:visible. Change one, check the other.
   ========================================================================= */
.mastsearch{ overflow:visible; }
.mastsearch__flag{ border-radius:var(--r-2) 0 0 var(--r-2); }

.acx{
  position:absolute; z-index:var(--z-overlay);
  left:0; right:0; top:calc(100% + 6px);
  background:var(--surface);
  border:1px solid var(--rule-2); border-top:1px solid var(--accent);
  border-radius:0 0 var(--r-2) var(--r-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  overflow:hidden;
}
.acx[hidden]{ display:none; }

/* Le pot de miel des formulaires, et pourquoi il vit ICI.
   `.reg-hp` etait defini dans register.css, service.css et contact.css, et
   dans aucune des trois pour /contact, /contact-us, /fr/nous-joindre ni
   /nouveautes. Consequence mesuree le 2026-09-03 : sur ces pages la case
   piege serait apparue A L'ECRAN comme un champ texte de plus. Un visiteur la
   remplit de bonne foi, le serveur la lit comme la marque d'un robot, et sa
   demande est avalee en silence avec un 200. Une page qui oublie une feuille
   ne doit pas pouvoir reintroduire ca : la regle est donc dans styles.css,
   que les 846 pages chargent, et nulle part ailleurs.
   24 pages portent aujourd'hui un `input[name="site"]`. */
.reg-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.acx__list{ max-height:min(70vh, 560px); overflow-y:auto; overscroll-behavior:contain; }

/* Screen-reader-only result count. Announced, never drawn. */
.acx__live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ------------------------------- Groups --------------------------------- */
.acx__group{ padding:6px 0 8px; border-top:1px solid var(--rule-3); }
.acx__group:first-child{ border-top:0; }
.acx__glabel{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0; padding:10px 16px 6px;
  font-family:var(--font-sans); font-weight:700; font-size:10px;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--fg-4);
}
.acx__clear{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--fg-3);
}
.acx__clear:hover{ color:var(--accent); }

/* The direct hit. A part number is an address, so it is not a suggestion among
   others: it gets the red flag and sits above every group. */
.acx__group--direct{ background:var(--surface-2); }
.acx__group--direct .acx__glabel{ color:var(--accent); }
.acx__opt--direct{ position:relative; }
.acx__opt--direct::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent);
}

/* ------------------------------- Rows ----------------------------------- */
.acx__opt{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:9px 16px; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--fg); text-decoration:none;
  font-family:var(--font-sans); font-size:var(--fs-14);
}
.acx__opt.is-active,
.acx__opt:hover{ background:var(--surface-2); }
.acx__opt.is-active{ box-shadow:inset 3px 0 0 0 var(--accent); }
.acx__opt:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* The same "studio stage" the product grid uses, and for the same reason:
   Atlantis renders are DARK PNGs on transparency, and .nav2 carries
   data-theme="dark", so on the panel's own --surface-2 they are a black
   machine on a black square. See .prod__media--photo in equipements.css. */
.acx__thumb{
  flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 130% at 50% 26%, #f4f4f6 0%, #d8d8dd 100%);
  border:1px solid var(--rule-3); border-radius:var(--r-1); overflow:hidden;
}
.acx__thumb img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.acx__thumb.is-empty{ background:var(--surface-2); }

.acx__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acx__title{
  font-weight:600; line-height:var(--lh-tight); color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acx__meta{
  font-size:var(--fs-12); color:var(--fg-3); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acx__code{
  flex:0 0 auto; font-family:var(--font-mono); font-size:var(--fs-12);
  letter-spacing:.02em; color:var(--fg-3);
}
.acx__go{ flex:0 0 auto; color:var(--fg-4); font-size:var(--fs-14); }
.acx__opt.is-active .acx__go,
.acx__opt:hover .acx__go{ color:var(--accent); }
.acx__ico{ flex:0 0 auto; width:20px; color:var(--fg-4); }

/* The matched fragment. Not a highlighter pen: the brand red, on nothing. */
.acx mark{ background:none; color:var(--accent); font-weight:700; }

/* ------------------------------- Chips ---------------------------------- */
.acx__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 16px 8px; }
.acx__chip{
  display:inline-flex; align-items:center; padding:6px 12px;
  background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-pill);
  color:var(--fg-2); text-decoration:none;
  font-family:var(--font-sans); font-size:var(--fs-12); font-weight:600; cursor:pointer;
}
.acx__chip.is-active,
.acx__chip:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.acx__chip.is-active{ box-shadow:none; }

/* ------------------------------- Foot / empty --------------------------- */
.acx__all{
  border-top:1px solid var(--rule-2); background:var(--surface-2);
  justify-content:space-between; font-weight:600; font-size:var(--fs-13);
}
.acx__none{ padding:18px 16px 14px; }
.acx__nonetitle{ margin:0 0 4px; font-weight:600; font-size:var(--fs-14); color:var(--fg); }
.acx__none .acx__meta{ white-space:normal; }
.acx__inline{
  display:inline; padding:0; width:auto; background:none; color:var(--accent);
  font-weight:700; text-decoration:underline; cursor:pointer;
}
.acx__inline.is-active,
.acx__inline:hover{ background:none; text-decoration:none; box-shadow:none; }

@media (max-width:1080px){
  /* The field is a full-width row of the wrapped masthead here, so the panel
     spans it. Nothing else changes: the same rows, the same order. */
  .acx{ top:calc(100% + 8px); }
  .acx__list{ max-height:min(60vh, 440px); }
}

@media (prefers-reduced-motion: reduce){
  .acx, .acx__opt, .acx__chip{ transition:none !important; }
}
/* ========================================================================= *
   MON PROJET, le mot de confirmation apres un ajout
   -------------------------------------------------------------------------
   Une seule instance dans le document, creee par main.js au premier ajout.
   Elle se pose en bas a gauche pour ne rien recouvrir : la barre d'action
   d'une fiche produit est a droite, et le bouton "retour en haut" aussi.
   role="status" : annonce sans voler le focus.
   ========================================================================= */
.projet-toast{
  position:fixed; left:20px; bottom:20px; z-index:var(--z-overlay);
  display:flex; align-items:center; gap:16px;
  max-width:min(420px, calc(100vw - 40px));
  padding:14px 18px; box-sizing:border-box;
  background:var(--atl-ink-1000); color:#fff;
  border-left:3px solid var(--accent);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity var(--dur-base, 220ms) var(--ease-out),
             transform var(--dur-base, 220ms) var(--ease-out);
}
.projet-toast.is-on{ opacity:1; transform:none; pointer-events:auto; }
.projet-toast__text{
  font-size:13.5px; line-height:1.4; color:var(--atl-ink-200);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.projet-toast__link{
  flex:none; font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.projet-toast__link:hover{ color:var(--accent); }
@media (max-width:560px){
  .projet-toast{ left:12px; right:12px; bottom:12px; max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .projet-toast{ transition:none; transform:none; }
}

/* ========================================================================= *
   LE FIL D'ARIANE, .crumb
   -------------------------------------------------------------------------
   Ici et pas dans pdp.css, ou il a vecu jusqu'au 2026-09-04 : les fiches
   produit ET les pages de categorie le portent depuis ce jour-la, et seules
   les premieres chargent pdp.css. Une deuxieme copie dans equipements.css
   aurait ete d'accord avec celle-ci le jour de son ecriture et aurait derive
   a la premiere correction : c'est deja arrive a l'autre fil de ce site,
   .crumbs, ecrit trois fois dans ambassadors.css, industries.css et
   legal.css. Un composant, une definition, la feuille que tout le monde
   charge.
   ========================================================================= */
/* =============================== BREADCRUMB =========================== */
.crumb{ background:#fff; border-bottom:1px solid var(--atl-ink-150); }
.crumb__inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px; padding-block:12px; font-size:13px; }
.crumb a{ color:var(--atl-ink-500); transition:color var(--dur-quick) var(--ease-out); }
.crumb a:hover{ color:var(--atl-ink-1000); }
.crumb__sep{ color:var(--atl-ink-500); }   /* ink-300 sur blanc : 2,4:1, et le generateur ne pose pas aria-hidden */
.crumb__current{ color:var(--atl-ink-1000); font-weight:600; }