/* ==========================================================================
   Deflection — Design system
   Industriel / B2B — pas de style "startup tech"
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --color-red: #E82C26;
  --color-red-dark: #B5211D;
  --color-navy: #080023;
  --color-pale-blue: #B6C9C3;
  --color-pale-grey: #ECEBEA;
  --color-white: #FFFFFF;
  --color-text: #1A1A1F;
  --color-text-muted: #55555F;
  --color-border: #D8D6D3;

  /* Typographie */
  --font-heading: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Échelle */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 2px;              /* angles quasi droits — look industriel, pas "app" */
  --container-max: 1200px;
  --shadow-sm: 0 1px 3px rgba(8, 0, 35, 0.12);
  --shadow-md: 0 4px 16px rgba(8, 0, 35, 0.16);
}

/* --- Reset minimal --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--color-red); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25em; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-navy);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* --- Boutons --- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  padding: 0.9em 1.75em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-red-dark); }
.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-outline:hover { background: var(--color-navy); color: var(--color-white); }
.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-outline-light:hover { background: var(--color-white); color: var(--color-navy); }

/* --- Bandeau supérieur (coordonnées + réseaux sociaux) --- */
.topbar {
  background: var(--color-navy);
  color: var(--color-pale-blue);
  font-size: 0.78rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.45rem;
}
.topbar__contact { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.topbar__contact a, .topbar__social a {
  color: var(--color-pale-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.topbar__contact a:hover, .topbar__social a:hover { color: var(--color-white); text-decoration: none; }
.topbar__social { display: flex; gap: 0.9rem; align-items: center; flex-shrink: 0; }
@media (max-width: 480px) {
  .topbar__contact a span { display: none; } /* icônes seules sur très petit écran */
}

/* --- En-tête / Navigation --- */
.site-header {
  background: var(--color-white);
  border-bottom: 4px solid var(--color-red);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-1);
  gap: var(--space-3);
}
@media (min-width: 900px) {
  .site-header__inner { justify-content: flex-start; }
  .site-header__inner .main-nav { margin-left: var(--space-4); }
  .site-header__inner .site-search { margin-left: auto; }
}
.site-header__logo img { height: 34px; width: auto; }

.nav-toggle {
  display: inline-flex;
  background: none;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  cursor: pointer;
  /* Cible tactile d'au moins 44 px */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  position: relative;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 0, 35, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 200;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Flyout mobile : panneau plein écran qui glisse depuis la droite */
.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--color-navy);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 201;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}
.main-nav.is-open { transform: translateX(0); }
.nav-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.5em;
  line-height: 1;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.main-nav a {
  display: block;
  padding: 0.95em 0.25em;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.main-nav a:hover { color: var(--color-red); text-decoration: none; }
.main-nav .sub-nav { list-style: none; padding-left: var(--space-2); display: none; }
.main-nav li.has-children.is-open > .sub-nav { display: block; }
.main-nav .sub-nav a { color: var(--color-pale-blue); font-weight: 600; text-transform: none; padding-block: 0.7em; }
.nav-social {
  display: flex;
  gap: 1rem;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.nav-social a { color: var(--color-pale-blue); }
.nav-social a:hover { color: var(--color-white); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  .nav-close { display: none; }
  .nav-social { display: none; }
  .main-nav {
    position: static;
    width: auto;
    transform: none;
    background: none;
    padding: 0;
    overflow: visible;
    display: block;
  }
  .main-nav > ul { display: flex; padding: 0; align-items: center; gap: var(--space-3); }
  .main-nav > ul > li > a { white-space: nowrap; }
  .main-nav > ul > li { border: none; position: relative; }
  .main-nav > ul > li.has-mega { position: static; } /* le méga menu se positionne par rapport au header */
  .main-nav a { padding: 0.5em 0; color: var(--color-navy); }
  .main-nav .sub-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    padding: var(--space-1) 0;
    z-index: 10;
  }
  .main-nav li.has-children:hover > .sub-nav,
  .main-nav li.has-children:focus-within > .sub-nav { display: block; }
  .main-nav .sub-nav a { padding: 0.6em 1.25em; text-transform: none; font-weight: 600; color: var(--color-navy); }
  .main-nav li.has-mega > .sub-nav { display: none !important; }
}

/* --- Méga menu (desktop) --- */
.mega-menu { display: none; }
@media (min-width: 900px) {
  .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, 94vw);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    border-top: 3px solid var(--color-red);
    padding: var(--space-3);
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    z-index: 20;
  }
  .has-mega:hover > .mega-menu,
  .has-mega:focus-within > .mega-menu,
  .has-mega.is-open > .mega-menu { display: grid; }
  /* Pont de survol invisible : couvre l'espace entre le lien du menu et le panneau,
     pour que le menu ne se referme pas quand la souris le traverse. */
  .mega-menu::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
  }
  .mega-menu__col { min-width: 0; }
  /* Les listes du méga menu restent verticales (annule le flex du menu principal) */
  .mega-menu__col ul { display: block; }
  /* Titres de colonnes cliquables */
  .mega-menu__col h4 a { color: var(--color-red); padding: 0; text-transform: uppercase; font-weight: 800; }
  .mega-menu__col h4 a:hover { color: var(--color-red-dark); text-decoration: underline; }
  .mega-menu__col h4 {
    font-family: var(--font-heading);
    color: var(--color-red);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.75em;
  }
  .mega-menu__col ul { list-style: none; margin: 0; padding: 0; }
  .mega-menu__col li { margin-bottom: 0.5em; }
  .mega-menu__col a { color: var(--color-text); font-weight: 500; text-transform: none; padding: 0; }
  .mega-menu__col a:hover { color: var(--color-red); }
  .mega-menu__actions { display: flex; flex-direction: column; gap: 0.6em; margin-top: var(--space-2); }
  .mega-menu__actions .btn { text-align: center; font-size: 0.75rem; padding: 0.7em 1em; }
}

/* --- Recherche --- */
.site-search { display: none; }
@media (min-width: 900px) {
  .site-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-left: var(--space-2);
  }
  .site-search input {
    border: none;
    padding: 0.5em 0.9em;
    font-family: var(--font-body);
    font-size: 0.85rem;
    width: 150px;
    background: transparent;
  }
  .site-search input:focus { outline: none; }
  .site-search button {
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    padding: 0.5em 0.8em;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}

/* --- Hero --- */
.hero {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-5);
  position: relative;
}
.hero h1 { color: var(--color-white); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.hero p { color: var(--color-pale-blue); font-size: 1.1rem; max-width: 42ch; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Variante claire du hero (alignée sur le site actuel) */
.hero--light { background: var(--color-pale-grey); color: var(--color-text); }
.hero--light h1 { color: var(--color-navy); }
.hero--light p { color: var(--color-text-muted); font-size: 1rem; max-width: 52ch; }

/* Hero "pleine hauteur" : la photo touche le haut, le bas et la droite (aucune marge) */
.hero--bleed { padding-block: 0; }
.hero-bleed { display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .hero-bleed { grid-template-columns: 1.05fr 0.95fr; } }
.hero-bleed__text {
  padding-block: max(4vh, 2.5rem);
  padding-left: max(var(--space-2), calc((100vw - var(--container-max)) / 2 + var(--space-2)));
  padding-right: var(--space-4);
  align-self: center;
}
.hero-bleed__media { position: relative; display: none; }
@media (min-width: 960px) { .hero-bleed__media { display: block; } }
.hero-bleed__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Bande FAQ (fond distinct pour différencier la section) --- */
.faq-band {
  background: rgba(182, 201, 195, 0.25);
  border-left: 4px solid var(--color-pale-blue);
  border-radius: var(--radius);
  padding: 1.5rem 2rem 2rem;
}
.faq-band .faq-item { border-bottom-color: rgba(8, 0, 35, 0.15); }
.faq-band .faq-item summary { color: var(--color-navy); }

/* --- Bande de confiance (landing) --- */
.trust-band { background: var(--color-red); color: var(--color-white); padding-block: var(--space-2); }
.trust-band__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); text-align: center; }
@media (min-width: 700px) { .trust-band__grid { grid-template-columns: repeat(3, 1fr); } }
.trust-item { display: flex; flex-direction: column; gap: 0.15em; }
.trust-item__big { font-family: var(--font-heading); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; }
.trust-item__small { font-size: 0.88rem; opacity: 0.9; }

/* --- Étapes numérotées (landing) --- */
.step-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 800px) { .step-grid { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: 0.5rem; border-top: 3px solid var(--color-navy); }
.step__num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  color: var(--color-red);
  display: block;
  margin-bottom: 0.3em;
}
.step h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.4em; }
.step p { font-size: 0.92rem; color: var(--color-text-muted); }

/* --- Page contact --- */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-red);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.contact-card--navy { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-pale-blue); }
.contact-card--navy h3 { color: var(--color-white); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 0.75em; align-items: flex-start; padding: 0.55em 0; }
.contact-list svg { color: var(--color-red); flex-shrink: 0; margin-top: 0.2em; }
.contact-card__social { display: flex; gap: 1rem; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.contact-card__social a { color: var(--color-navy); }
.contact-card__social a:hover { color: var(--color-red); }
.check-list--light li { color: var(--color-pale-blue); }
.check-list--light li::before { color: var(--color-white); }
.contact-map { line-height: 0; }

/* --- Page 404 --- */
.notfound .notfound__code {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(5rem, 14vw, 9rem);
  color: var(--color-navy);
  line-height: 1;
  margin: 0;
}
.notfound .damping-wave { width: min(320px, 80%); height: 36px; }
.notfound__search {
  display: flex;
  gap: 0.6rem;
  max-width: 420px;
  margin: var(--space-3) auto 0;
}
.notfound__search input {
  flex: 1;
  padding: 0.75em 1em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
}
.notfound__search input:focus { outline: 2px solid var(--color-red); }

/* --- Bandeau de consentement (Loi 25) --- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-navy);
  color: var(--color-pale-blue);
  z-index: 500;
  box-shadow: 0 -4px 16px rgba(8, 0, 35, 0.25);
}
.cookie-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cookie-banner p { margin: 0; flex: 1 1 300px; font-size: 0.9rem; }
.cookie-banner a { color: var(--color-white); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-banner .btn { font-size: 0.78rem; padding: 0.7em 1.4em; }

/* --- Comparatif des solutions acoustiques --- */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 900px) { .compare-grid { grid-template-columns: repeat(3, 1fr); } }
.compare-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top-width: 5px;
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.compare-card--navy { border-top-color: var(--color-navy); }
.compare-card--red { border-top-color: var(--color-red); }
.compare-card--steel { border-top-color: var(--color-pale-blue); }
.compare-card__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.6em;
}
.compare-card--navy .compare-card__type { color: var(--color-navy); }
.compare-card--red .compare-card__type { color: var(--color-red); }
.compare-card--steel .compare-card__type { color: var(--steel-line, #7f978d); }
.compare-card h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.compare-card__essence { color: var(--color-text-muted); font-size: 0.95rem; min-height: 3em; }
.compare-card__label {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0.8em 0 0.4em;
}
.compare-card .check-list { flex: 1; font-size: 0.92rem; }
.compare-card__links {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.compare-card__links a { font-weight: 700; font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* --- Blocs duo (clientèle, landing gestion de projets) --- */
.duo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 760px) { .duo-grid { grid-template-columns: 1fr 1fr; } }
.duo-block { padding: var(--space-3); border-radius: var(--radius); }
.duo-block--grey { background: var(--color-pale-grey); }
.duo-block--blue { background: rgba(182, 201, 195, 0.35); }
.duo-block h3 { text-transform: none; letter-spacing: 0; font-size: 1.15rem; margin-bottom: var(--space-2); }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: 0.35em 0 0.35em 1.6em; position: relative; }
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 700;
}

/* --- Espacement des sections dans les fiches produit (~5 %) --- */
.product-h2 { margin-top: 5vh; margin-bottom: 1.2rem; }
.product-below { margin-top: 5vh; }
.hero-title--accent {
  border-left: 6px solid var(--color-red);
  padding-left: 0.5em;
}
.damping-wave {
  display: block;
  width: min(420px, 100%);
  height: 46px;
  margin-block: var(--space-2);
}

.hero-split { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; }
@media (min-width: 960px) { .hero-split { grid-template-columns: 1.1fr 0.9fr; } }
.hero-image-panel {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: none;
}
@media (min-width: 700px) { .hero-image-panel { display: block; } }
.hero-image-panel img { width: 100%; height: auto; }
.hero-image-panel--photo { padding: 0; background: none; overflow: hidden; }
.hero-image-panel--photo img { height: 100%; object-fit: cover; display: block; }

/* --- Sections ---
   Espacement vertical : 5 % en haut et 5 % en bas de chaque section. */
.section { padding-block: max(5vh, 2.5rem); }

.section--grey { background: var(--color-pale-grey); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy h2 { color: var(--color-white); }
.eyebrow {
  font-family: var(--font-heading);
  color: var(--color-red);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--color-red);
  flex-shrink: 0;
}
.text-center .eyebrow::after {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--color-red);
  flex-shrink: 0;
}

/* --- Grilles de cartes --- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-top-color: var(--color-red); }
.card__img { aspect-ratio: 4/3; background: var(--color-pale-grey); object-fit: cover; width: 100%; }
.card__body { padding: var(--space-2); display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.card__body h3 { margin: 0; font-size: 1.05rem; }
.card__body p { color: var(--color-text-muted); font-size: 0.95rem; flex: 1; }

.card--dark {
  background: var(--color-navy);
  border-color: var(--color-navy);
  justify-content: center;
}
.card--dark .card__body { padding: var(--space-3) var(--space-2); }
.card--dark h3 { color: var(--color-white); }
.card--dark p { color: var(--color-pale-blue); }
.card--dark a { color: var(--color-white); font-weight: 700; }

/* --- Piliers pleine largeur (sans bordure/ombre, comme le site actuel) --- */
.pillars__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: var(--space-4) var(--space-3); position: relative; overflow: hidden; }
.pillar::after {
  /* filigrane d'onde en fond de bloc */
  content: '';
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 22px solid currentColor;
  opacity: 0.07;
  pointer-events: none;
}
.pillar h3 { text-transform: uppercase; font-size: 1.1rem; margin-bottom: 0.6em; }
.pillar p { max-width: 40ch; }
.pillar a { display: inline-block; margin-top: 0.75em; padding-top: 0.75em; border-top: 1px solid currentColor; font-weight: 700; font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; transition: letter-spacing .2s ease; }
.pillar a:hover { letter-spacing: 0.08em; text-decoration: none; }
.pillar--navy { background: var(--color-navy); color: var(--color-pale-blue); }
.pillar--navy h3 { color: var(--color-white); }
.pillar--navy a { color: var(--color-white); }
.pillar--light { background: var(--color-pale-grey); color: var(--color-text); }
.pillar--light h3 { color: var(--color-navy); }
.pillar--light a { color: var(--color-navy); }
.pillar--red { background: var(--color-red); color: rgba(255,255,255,0.9); }
.pillar--red h3 { color: var(--color-white); }
.pillar--red a { color: var(--color-white); }

/* --- Produit vedette --- */
.feature-split {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) { .feature-split { grid-template-columns: 1.1fr 0.9fr; } }
.feature-split__media { order: 2; } /* image toujours à droite sur desktop */
.feature-split img { max-height: 420px; object-fit: contain; width: 100%; }

/* --- Sélecteur de langue --- */
.topbar__right { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.lang-switch { font-size: 0.78rem; letter-spacing: 0.05em; display: inline-flex; gap: 0.45em; align-items: center; }
.lang-switch a { color: var(--color-pale-blue); font-weight: 600; }
.lang-switch a:hover { color: var(--color-white); text-decoration: none; }
.lang-switch .lang-current { color: var(--color-white); font-weight: 800; }
.lang-switch .lang-sep { opacity: 0.4; }
.lang-switch--nav { margin-right: auto; }
.lang-switch--nav a { color: var(--color-pale-blue); }
.lang-switch--nav .lang-current { color: var(--color-white); }

/* Sélecteur de langue dans la barre de menu (desktop) */
.lang-switch--header { display: none; }
@media (min-width: 900px) {
  .lang-switch--header {
    display: inline-flex;
    margin-left: var(--space-2);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
  }
  .lang-switch--header a { color: var(--color-navy); }
  .lang-switch--header a:hover { color: var(--color-red); text-decoration: none; }
  .lang-switch--header .lang-current { color: var(--color-red); }
  .lang-switch--header .lang-sep { color: var(--color-border); }
}

/* --- En-tête de catégorie --- */
.category-head { background: var(--color-pale-grey); padding-block: var(--space-4); }
.category-head h1 { color: var(--color-navy); text-transform: none; letter-spacing: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.category-intro { color: var(--color-text-muted); margin-top: var(--space-2); }

/* --- Filtres de sous-catégories --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-3); }
.filter-chip {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6em 1.3em;
  border-radius: 999px;
  border: 2px solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.filter-chip:hover { background: var(--color-pale-grey); }
.filter-chip.is-active { background: var(--color-navy); color: var(--color-white); }

/* --- Fiche produit : média gauche / contenu droite --- */
.product-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .product-layout { grid-template-columns: 0.9fr 1.1fr; } }
.product-layout__media img {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  object-fit: contain;
  max-height: 520px;
}
.product-short { font-size: 1.05rem; color: var(--color-text-muted); }
.product-desc { margin-top: var(--space-2); }
.product-below { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); columns: 1; }
@media (min-width: 800px) { .product-below { columns: 2; column-gap: 3rem; } }
.product-below p { break-inside: avoid; }

/* --- Galerie produit (acoustique) --- */
.product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.product-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); }

/* --- Bande galerie (fin de page d'accueil) --- */
.gallery-strip-section .gallery-strip { margin-bottom: 0; }
.gallery-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: 20px;
}
.gallery-strip__item { scroll-snap-align: start; display: block; position: relative; }
.gallery-strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-strip__item:hover img { transform: scale(1.04); }
.gallery-strip__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,0,35,0.35), transparent 40%);
  opacity: 0;
  transition: opacity .25s ease;
}
.gallery-strip__item:hover::after { opacity: 1; }

/* --- Page galerie --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.gallery-item { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-white); }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__caption {
  display: block;
  padding: 0.6em 0.9em;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
}

/* --- Bande "Parcourez nos produits" --- */
.products-band .eyebrow { color: var(--color-pale-blue); }
.products-band__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 900px) { .products-band__layout { grid-template-columns: 260px 1fr; align-items: start; } }
.products-band__aside p { font-size: 0.95rem; }
.quicklinks { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.quicklinks li { border-bottom: 1px solid rgba(255,255,255,0.15); }
.quicklinks a { display: block; padding: 0.75em 0; color: var(--color-white); font-weight: 600; }
.quicklinks a:hover { color: var(--color-red); text-decoration: none; }
.products-band__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 230px);
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
}
.product-mini {
  background: var(--color-white);
  border-radius: var(--radius);
  border-top: 3px solid transparent;
  padding: var(--space-2);
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  transition: transform .2s ease, border-color .2s ease;
}
.product-mini:hover { transform: translateY(-3px); border-top-color: var(--color-red); }
.product-mini img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.product-mini h3 { font-size: 0.85rem; color: var(--color-navy); margin: 0; flex: 1; }
.product-mini .btn { align-self: center; }

/* --- Tableaux de specs / comparatif (aspect fiche technique) --- */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9rem; margin-block: var(--space-2); }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.65em 1em;
  border: 1px solid var(--color-border);
}
.spec-table th { background: var(--color-navy); color: var(--color-white); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; }
.spec-table tr:nth-child(even) td { background: var(--color-pale-grey); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- FAQ --- */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--color-red); font-size: 1.4rem; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding-bottom: var(--space-2); color: var(--color-text-muted); }

/* --- Formulaires --- */
.form-field { margin-bottom: var(--space-2); }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.4em; font-size: 0.9rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--color-red);
  outline-offset: 1px;
}

/* --- Pied de page --- */
.site-footer { background: var(--color-pale-grey); color: var(--color-text); padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-red); }
.site-footer .footer-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .site-footer .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.site-footer h4 { color: var(--color-navy); font-size: 0.85rem; margin-bottom: var(--space-1); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4em; }
.site-footer .bottom-bar { border-top: 1px solid var(--color-border); margin-top: var(--space-3); padding-top: var(--space-2); font-size: 0.85rem; color: var(--color-text-muted); }
.footer-social { display: flex; gap: 1rem; margin-top: var(--space-2); }
.footer-social a { color: var(--color-navy); }
.footer-social a:hover { color: var(--color-red); }

/* --- Breadcrumb --- */
.breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); padding-block: var(--space-2); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb .sep { margin-inline: 0.5em; }

/* --- Utilitaires --- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Carte avec consentement (Loi 25) --- */
.map-placeholder {
  background: var(--color-pale-grey);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-2);
}
.map-placeholder__inner { max-width: 520px; margin-inline: auto; text-align: center; }
.map-placeholder__inner .btn { margin: 0.3rem; }

/* --- Données techniques des fiches produits (mêmes données que les fiches PDF) --- */
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.keyfacts > div { background: var(--color-white); padding: 0.9rem 1.1rem; display: grid; gap: 0.15rem; }
.keyfacts strong { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; line-height: 1.1; color: var(--color-red); }
.keyfacts span { font-size: 0.85rem; color: var(--color-text-muted); }
.tech h3 { margin: var(--space-3) 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--color-red); text-transform: uppercase; font-size: 1rem; letter-spacing: 0.04em; }
.tech > p, .tech > ul { max-width: 75ch; }
.tech ul { padding-left: 1.2em; margin-block: 0.4rem; }
.tech__note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.tech__fig { margin: var(--space-3) 0 0; max-width: 560px; }
.tech__fig img { width: 100%; height: auto; display: block; background: var(--color-white); border: 1px solid var(--color-border); }
.tech__fig figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.4rem; }
/* Mise en page illustrée (tech.layout = 'cards') : description + schéma, listes en cartes, photos en galerie */
.tech-intro { display: grid; gap: var(--space-3); align-items: center; }
.tech-intro h3 { margin-top: 0; }
.tech-intro__fig { margin: 0; }
.tech-intro__fig img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) { .tech-intro { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-4); } }
.tech-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-2); margin-block: var(--space-4) var(--space-3); }
.tech-card { background: var(--color-pale-grey); border-top: 4px solid var(--color-navy); border-radius: var(--radius); padding: var(--space-3); }
.tech-card:nth-child(2) { border-top-color: var(--color-red); }
.tech-card h3 { margin: 0 0 0.6rem; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; }
.tech-card .check-list li { font-size: 0.95rem; }
.tech-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 var(--space-4); align-items: start; }
.tech-full > div { min-width: 0; }
.tech-gallery { margin: var(--space-3) 0 0; }
.tech-gallery__imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); }
.tech-gallery__imgs img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.tech-gallery figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.4rem; }
.tech-table { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tech-table th, .tech-table td { padding: 0.45em 0.8em; white-space: nowrap; }
.tech-table th { vertical-align: bottom; }
.tech-table .n { text-align: right; }
.tech-table .c { text-align: center; }
.tech-table td:first-child { font-weight: 600; }
.tech-table .swatch { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); margin-right: 0.5em; }

/* --- Respiration : +5 % de la hauteur d'écran de marge INTERNE (padding) en haut et en bas de chaque section ---
   Placé en fin de fichier pour s'appliquer par-dessus les valeurs de base de chaque type de section. */
.section { padding-block: calc(max(5vh, 2.5rem) + 5vh); }
/* Premières sections sous le fil d'Ariane (padding-top réduit dans le gabarit) : même ajout de 5vh */
.section[style*="padding-top:1rem"] { padding-top: calc(1rem + 5vh) !important; }
.section[style*="padding-top:2rem"] { padding-top: calc(2rem + 5vh) !important; }
.section[style*="padding-top:0"] { padding-top: 5vh !important; }
.hero-bleed__text { padding-block: calc(max(4vh, 2.5rem) + 5vh); }
.trust-band { padding-block: calc(var(--space-2) + 5vh); }
.category-head { padding-block: calc(var(--space-4) + 5vh); }
.pillar { padding-block: calc(var(--space-4) + 5vh); }

/* --- Cartes d'articles (accueil + blogue) : visuel affiché en entier, sans recadrage.
   Les visuels de blogue sont en format portrait 4:5 (1080 × 1350). --- */
.card__img--full { aspect-ratio: 4/5; object-fit: contain; }

/* ==========================================================================
   Page d'accueil — version octobre 2026 (bannière marine, preuves, portes d'entrée, clients)
   ========================================================================== */
.eyebrow--light { color: #FF8A85; }

.home-hero { background: var(--color-navy); color: var(--color-white); }
.home-hero__grid { display: grid; grid-template-columns: 1fr; }
.home-hero__text {
  padding: calc(var(--space-5) + 5vh) max(1.25rem, calc((100vw - var(--container-max)) / 2 + 1.25rem));
  padding-right: var(--space-4);
  display: flex; flex-direction: column; justify-content: center;
}
.home-hero h1 { color: var(--color-white); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; text-wrap: balance; }
.home-hero__text > p:not(.eyebrow) { color: #D9D7E6; font-size: 1.15rem; max-width: 36em; margin: 0; }
.home-hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.home-hero__media { overflow: hidden; min-height: 300px; background: #1B1740; }
.home-hero__media img { width: 100%; height: 100%; min-height: 300px; max-height: 640px; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 900px) { .home-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }

.home-proof { background: var(--color-red); color: var(--color-white); padding-block: var(--space-3); }
.home-proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3) var(--space-4); }
.home-proof__grid strong { display: block; font-family: var(--font-heading); font-weight: 900; font-size: 1.8rem; line-height: 1.1; }
.home-proof__grid span { font-weight: 500; }

.home-doors, .home-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.home-door, .home-client { display: flex; flex-direction: column; gap: 0.75rem; border-radius: var(--radius); text-decoration: none; transition: translate 0.25s ease, box-shadow 0.25s ease; }
.home-door:hover, .home-client:hover, .home-tile:hover { text-decoration: none; translate: 0 -6px; box-shadow: 0 16px 32px rgba(8, 0, 35, 0.18); }
.home-door { padding: var(--space-4) var(--space-3); min-height: 250px; }
.home-door h3 { margin: 0; font-size: 1.6rem; color: inherit; }
.home-door p { margin: 0; flex: 1; }
.home-door span, .home-client span { font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.home-door--navy { background: var(--color-navy); color: var(--color-white); }
.home-door--navy p { color: #D9D7E6; }
.home-door--navy span { color: #FF8A85; }
.home-door--light { background: var(--color-white); color: var(--color-navy); border: 1px solid var(--color-border); }
.home-door--light p { color: var(--color-text-muted); }
.home-door--light span { color: var(--color-red-dark); }
.home-door--red { background: var(--color-red); color: var(--color-white); }
.home-door--red p { font-weight: 500; }

.home-client { background: var(--color-white); color: var(--color-text); border: 1px solid var(--color-border); border-top: 4px solid var(--color-navy); padding: var(--space-3); }
.home-client h3 { margin: 0; font-size: 1.2rem; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.home-client p { margin: 0; flex: 1; color: var(--color-text-muted); }
.home-client span { color: var(--color-red-dark); }

.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.home-head h2 { margin-bottom: 0; }
.home-head .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.home-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-3); }
.home-chips a { background: var(--color-white); border: 1px solid #B9B6C8; border-radius: 999px; padding: 0.6em 1.1em; font-weight: 600; font-size: 0.95rem; color: var(--color-navy); }
.home-chips a:hover { border-color: var(--color-navy); text-decoration: none; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.home-tile { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: var(--color-navy); transition: translate 0.25s ease, box-shadow 0.25s ease; }
.home-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.home-tile span { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }
.home-tile i { color: var(--color-red-dark); font-style: normal; }

.home-badge { background: var(--color-navy); color: var(--color-white); font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.4em 0.9em; border-radius: 999px; }

.home-about { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-5); align-items: start; }
.home-about h2 { text-wrap: balance; }
.home-about p { color: #D9D7E6; }
.home-about__link { display: inline-block; margin-top: var(--space-1); padding-block: 0.6rem; color: var(--color-white); border-bottom: 3px solid var(--color-red); font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.home-about__link:hover { text-decoration: none; color: #FF8A85; }
@media (min-width: 900px) { .home-about { grid-template-columns: 1fr 1fr; } }

.home-faqcta { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .home-faqcta { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); } }
.home-quote { background: var(--color-pale-grey); border-top: 6px solid var(--color-red); border-radius: var(--radius); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.home-quote h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 0; text-wrap: balance; }
.home-quote p { margin: 0; color: var(--color-text-muted); }
.home-quote__contact { border-top: 1px solid var(--color-border); padding-top: var(--space-2); width: 100%; display: flex; flex-direction: column; gap: 0.35rem; }
.home-quote__contact a { color: var(--color-navy); font-weight: 600; padding-block: 0.25rem; }
.home-quote__phone { font-family: var(--font-heading); font-weight: 800 !important; font-size: 1.4rem; }
.home-quote__contact span { color: var(--color-text-muted); font-size: 0.95rem; }

/* Mouvements discrets : zoom lent de la photo, apparition des cartes au défilement (navigateurs compatibles seulement) */
@keyframes home-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes home-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .home-hero__media img { animation: home-zoom 18s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    .reveal { animation: home-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* --- Cartes de produits et d'articles : toute la carte est cliquable (image, titre et texte),
   pas seulement le petit lien « Voir le produit ». Le lien de la carte est étiré sur toute sa surface. --- */
.card { position: relative; }
.card__body > a:last-child::after { content: ''; position: absolute; inset: 0; }
.card:has(.card__body > a:last-child) { cursor: pointer; }

/* ==========================================================================
   Grilles de cartes — règle unique pour tout le site
   3 cartes par rangée (ordinateur), 2 (tablette), 1 (mobile). Jamais une carte seule sur une rangée :
   la dernière rangée est rééquilibrée, et un groupe de 4 cartes devient une glissière horizontale.
   Les classes has-*, tail-* et is-slider sont posées par le script du pied de page (deflectionGrids).
   ========================================================================== */
.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
[hidden] { display: none !important; }
@media (min-width: 640px) {
  .card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards) > * { grid-column: span 3; }
}
@media (min-width: 640px) and (max-width: 999px) {
  /* Nombre impair : les trois dernières cartes partagent une rangée */
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).has-orphan-2 > .tail-3 { grid-column: span 2; }
}
@media (min-width: 1000px) {
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards) > * { grid-column: span 2; }
  /* Reste de 1 : les quatre dernières cartes forment deux rangées de deux */
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).has-orphan-3 > .tail-4 { grid-column: span 3; }
  /* Reste de 2 : les deux dernières cartes se partagent la rangée */
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).has-pair-3 > .tail-2 { grid-column: span 3; }
}
/* Quatre cartes sans glissière (grille marquée data-no-slider) : quatre de front sur ordinateur, deux par deux sur tablette */
@media (min-width: 1000px) {
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-four > * { grid-column: auto; }
}
/* Quatre cartes : glissière de gauche à droite */
:is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
:is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-slider > * { flex: 0 0 84%; scroll-snap-align: start; }
@media (min-width: 640px) { :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-slider > * { flex-basis: calc((100% - var(--space-3)) / 2.15); } }
@media (min-width: 1000px) { :is(.card-grid, .home-tiles, .home-clients, .home-doors, .tech-cards).is-slider > * { flex-basis: calc((100% - 2 * var(--space-3)) / 3.2); } }
.slider-nav { display: none; justify-content: flex-end; gap: 0.5rem; margin-top: var(--space-1); }
.is-slider + .slider-nav { display: flex; }
.slider-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-navy); background: var(--color-white); color: var(--color-navy); font-size: 1.1rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.slider-nav button:hover { background: var(--color-navy); color: var(--color-white); }
.section--navy .slider-nav button { border-color: var(--color-white); background: transparent; color: var(--color-white); }
/* Étapes : autant de colonnes que d'étapes, sans colonne vide */
@media (min-width: 800px) { .step-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* --- Bannière de page (Nos produits) --- */
.page-hero { background: var(--color-navy); color: var(--color-white); padding-block: var(--space-2) calc(var(--space-5) + 3vh); border-bottom: 6px solid var(--color-red); }
.page-hero h1 { color: var(--color-white); margin-top: var(--space-1); }
.page-hero__lead { color: #D9D7E6; font-size: 1.1rem; max-width: 46em; margin: 0; }
.page-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block: var(--space-3); }
.page-hero__stats strong { display: block; font-family: var(--font-heading); font-weight: 900; font-size: 1.9rem; line-height: 1.1; color: #FF8A85; }
.page-hero__stats span { color: #D9D7E6; font-size: 0.95rem; }
.page-hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb--light, .breadcrumb--light a { color: #B9B6C8; }
.breadcrumb--light { margin-bottom: var(--space-4); }

/* --- Catalogue : filtres, tri, cartes --- */
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.catalog-toolbar .filter-bar { margin-bottom: 0; flex: 1 1 520px; }
.filter-chip span { opacity: 0.6; font-weight: 600; margin-left: 0.25em; }
.catalog-sort { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--color-navy); }
.catalog-sort select { font: inherit; font-weight: 500; padding: 0.55em 2em 0.55em 0.9em; border: 2px solid var(--color-navy); border-radius: 999px; background: var(--color-white); color: var(--color-navy); min-height: 44px; }
.catalog-count { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 0.9rem; }
.card__tag { align-self: flex-start; font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-red-dark); }
.card__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--color-text-muted); }
.card__facts strong { font-family: var(--font-heading); font-weight: 800; color: var(--color-navy); }

/* Catalogue : les cartes glissent en place quand on change de filtre ou de tri */
@keyframes catalog-slide { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #productGrid.is-sliding > .card { animation: catalog-slide 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(min(var(--i, 0), 9) * 50ms); }
}

/* --- Réalisations : cartes photo de la page, et glissière de l'accueil --- */
.real-card { margin: 0; }
.real-card__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--color-pale-grey); }
.real-card__caption { font-weight: 600; color: var(--color-navy); flex: 1; }
.h-slider { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-top: var(--space-3); padding-bottom: var(--space-2); scrollbar-width: thin; }
.h-slider__item { flex: 0 0 84%; scroll-snap-align: start; position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--color-navy); color: var(--color-white); }
@media (min-width: 640px) { .h-slider__item { flex-basis: calc((100% - var(--space-3)) / 2.15); } }
@media (min-width: 1000px) { .h-slider__item { flex-basis: calc((100% - 2 * var(--space-3)) / 3.2); } }
.h-slider__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.35s ease; }
.h-slider__item:hover { text-decoration: none; }
.h-slider__item:hover img { transform: scale(1.04); }
.h-slider__caption { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(to top, rgba(8, 0, 35, 0.92), rgba(8, 0, 35, 0)); font-size: 0.95rem; font-weight: 500; line-height: 1.35; }
.h-slider__caption strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FF8A85; margin-bottom: 0.15rem; }
.h-slider__nav { display: flex; gap: 0.5rem; }
.h-slider__nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-navy); background: var(--color-white); color: var(--color-navy); font-size: 1.1rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.h-slider__nav button:hover { background: var(--color-navy); color: var(--color-white); }
.home-head .btn-row { align-items: center; }