/* =========================================================
   ELESTA Régulation Europe — feuille unique du site (refonte 2026)
   Palette tirée du logo : gris #666 du lettrage, orange #ff6600 des carrés.
   ========================================================= */

/* Polices hebergees sur le site (Barlow, Barlow Semi Condensed : licence SIL OFL 1.1),
   sous-ensemble latin de Google Fonts : aucun serveur tiers a l'affichage.
   Pas de Semi Condensed 800 droit : le site l'a toujours affiche en 700 (non charge). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-800-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Marque */
  --orange: #ff6600;          /* carres du logo : accents, fonds de bouton */
  --orange-vif: #ff7f2a;
  --orange-texte: #b34700;    /* orange lisible sur fond clair (AA 4.9:1) */
  --orange-pale: #fff1e6;

  /* Gris */
  --graphite: #242424;        /* fonds sombres : bandeau haut, pied */
  --graphite-2: #2f2f2f;
  --gris-logo: #666666;
  --texte: #1f1f1f;
  --texte-doux: #505050;
  --texte-pale: #767676;      /* AA sur blanc */
  --sur-sombre: #f2f2f2;
  --sur-sombre-doux: #b9b9b9;

  --fond: #ffffff;
  --fond-alt: #f4f4f2;
  --fond-carte: #fafaf9;
  --ligne: #e3e3e0;
  --ligne-forte: #cfcfcb;

  --conteneur: 1200px;
  --radius: 0;                /* angles droits partout, comme le logo */
  --ombre: 0 18px 40px rgba(20, 20, 20, 0.10);
  --ombre-forte: 0 24px 60px rgba(20, 20, 20, 0.18);

  --titre: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --corps: "Barlow", "Segoe UI", system-ui, Arial, sans-serif;
  --lh-texte: 1.65;

  --entete-h: 72px;          /* bandeau 2 (logo + menu) : toujours visible */
  --barre-haut-h: 44px;      /* bandeau 1 (contacts) : se replie au defilement */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* L'en-tete est FIXE et le corps reserve sa hauteur complete : quand le bandeau
   de contact se replie, rien ne bouge dans la page. En position sticky (dans le
   flux), chaque repli faisait sauter tout le contenu de 44 px et faussait les
   sauts vers les ancres. */
body {
  padding-top: calc(var(--entete-h) + var(--barre-haut-h));
  margin: 0;
  font-family: var(--corps);
  font-size: 1rem;
  line-height: var(--lh-texte);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
/* En descendant vers une ancre, le bandeau de contact se replie : seul le bandeau 2 reste. */
[id] { scroll-margin-top: calc(var(--entete-h) + 24px); }

.conteneur {
  width: min(var(--conteneur), calc(100% - 2.5rem));
  margin: 0 auto;
}

.ico { width: 1.1em; height: 1.1em; flex: none; }

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--orange);
  color: var(--texte);
  font-weight: 700;
}
.lien-evitement:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Signature : les trois carrés du logo ---------- */
.points {
  display: inline-flex;
  gap: 0.28em;
  margin-right: 0.7em;
  vertical-align: middle;
}
.points i {
  display: block;
  width: 0.55em;
  height: 0.42em;
  background: var(--orange);
  transform: skewX(-14deg);
}

/* ---------- Apparition au défilement ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--delai, 0ms);
}
.reveal.est-visible { opacity: 1; transform: none; }
/* Sans JavaScript, tout reste visible. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* =========================================================
   BOUTONS
   ========================================================= */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 2px solid transparent;
  font-family: var(--titre);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton .ico { width: 1.05rem; height: 1.05rem; }

/* Texte graphite sur orange : 6.9:1. Du blanc sur #ff6600 ne passerait pas l'AA. */
.bouton-plein { background: var(--orange); color: var(--texte); }
.bouton-plein:hover { background: var(--graphite); color: #fff; }

.bouton-contour { border-color: currentColor; color: var(--texte); background: transparent; }
.bouton-contour:hover { background: var(--texte); border-color: var(--texte); color: #fff; }

.bouton-clair { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.bouton-clair:hover { background: #fff; border-color: #fff; color: var(--texte); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange-texte);
}
.lien-fleche .ico { transition: transform 0.2s ease; }
.lien-fleche:hover .ico { transform: translateX(4px); }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 0 var(--ligne);
}

/* --- Bandeau 1 --- */
.barre-haut {
  background: var(--graphite);
  color: var(--sur-sombre-doux);
  font-size: 0.85rem;
  overflow: hidden;
  max-height: var(--barre-haut-h);
  transition: max-height 0.3s ease;
}
.site-entete.est-compact .barre-haut { max-height: 0; }

.barre-haut-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--barre-haut-h); /* doit rester egal a la reserve du body */
}
.barre-accroche {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sur-sombre);
  font-size: 0.8rem;
}
.barre-contacts { display: flex; align-items: center; gap: 1.6rem; }
.barre-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sur-sombre-doux);
  transition: color 0.18s ease;
}
.barre-contacts a:hover { color: #fff; }
.barre-contacts .ico { color: var(--orange); }
.barre-compte { font-weight: 600; color: #fff !important; }

/* --- Bandeau 2 --- */
.barre-nav { position: relative; }
.barre-nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--entete-h);
}

.marque { flex: none; display: block; }
.marque img { width: 170px; height: auto; }

.nav-principale {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  justify-content: flex-end;
}
.nav-liste {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  height: var(--entete-h);
}
.nav-item { display: flex; }
.nav-bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.85rem;
  border: 0;
  background: none;
  color: var(--texte);
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
/* Survol / ouvert : fond teinté (onglet posé sur le trait orange du panneau).
   Le soulignement ne marque que la rubrique courante, et s'efface quand un
   panneau est ouvert, sinon il double le trait du panneau. */
.nav-item:hover .nav-bouton,
.nav-bouton[aria-expanded="true"] { background: var(--orange-pale); }
.nav-bouton::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-item.est-courant .nav-bouton::after { transform: scaleX(1); }
.nav-liste:has(.nav-item:hover, [aria-expanded="true"]) .est-courant .nav-bouton::after { transform: scaleX(0); }
.nav-chevron { width: 0.95rem; height: 0.95rem; color: var(--texte-pale); transition: transform 0.2s ease; }
.nav-bouton[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Panneau déroulant (méga-menu) */
.nav-panneau {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 3px solid var(--orange);
  box-shadow: var(--ombre-forte);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-item.est-ouvert .nav-panneau {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Survol souris uniquement sur les écrans qui en ont un. */
@media (hover: hover) and (min-width: 1081px) {
  .nav-item:hover .nav-panneau {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}
.nav-panneau-inner {
  width: min(var(--conteneur), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 1.8rem 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.4rem 2rem;
}
.nav-item-compact { position: relative; }
.nav-panneau-compact { left: auto; right: 0; width: 320px; }
.nav-panneau-compact .nav-panneau-inner { width: auto; padding: 1.2rem 1.4rem; grid-template-columns: 1fr; }

.nav-groupe-titre {
  margin: 0 0 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--titre);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-texte);
}
.nav-groupe ul { margin: 0; padding: 0; list-style: none; }
.nav-groupe a {
  display: flex;
  flex-direction: column;
  padding: 0.38rem 0 0.38rem 0.7rem;
  border-left: 2px solid transparent;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-groupe a:hover { border-left-color: var(--orange); background: var(--fond-alt); }
.nav-lien-libelle { font-weight: 600; font-size: 0.94rem; }
/* Lien mis en avant (4e element 'vedette' dans inc/navigation.php) */
.nav-groupe a.nav-vedette {
  margin: 0.15rem 0;
  padding: 0.55rem 0.7rem 0.55rem 0.8rem;
  border-left: 4px solid var(--orange);
  background: var(--orange-pale);
}
.nav-groupe a.nav-vedette:hover { background: #ffe4cf; }
.nav-vedette .nav-lien-libelle { font-size: 1rem; }
.nav-vedette-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  background: var(--orange);
  color: var(--graphite);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.nav-vedette-tag .ico { width: 0.75rem; height: 0.75rem; }
.nav-lien-detail { font-size: 0.8rem; color: var(--texte-pale); }
.nav-pdf {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--orange-texte);
  border: 1px solid currentColor;
  vertical-align: 1px;
}
.nav-tout {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  color: var(--orange-texte);
}
.nav-cta { min-height: 44px; flex: none; }
/* Deux boutons : Chiffrage (orange) et SAV (contour) */
.nav-actions { display: flex; gap: 0.5rem; flex: none; }

/* Recherche de la barre de menu (vers /documentation.php?q=) */
.nav-recherche { display: flex; align-items: stretch; flex: none; height: 44px; border: 1px solid var(--ligne-forte); background: #fff; }
.nav-recherche:focus-within { border-color: var(--texte); }
.nav-recherche input {
  width: 8.5rem;
  padding: 0 0.2rem 0 0.7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--texte);
  outline: none;
  transition: width 0.2s ease;
}
.nav-recherche input:focus { width: 12rem; }
.nav-recherche button {
  display: grid;
  place-items: center;
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
}
.nav-recherche button:hover { color: var(--orange-texte); }
/* Suggestions (site.js, donnees /suggestions.php) */
.nav-recherche { position: relative; }
.nav-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  right: -1px;
  z-index: 60;
  width: min(30rem, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ligne-forte);
  border-top: 3px solid var(--orange);
  box-shadow: var(--ombre-forte);
}
.nav-suggestions[hidden] { display: none; }
.nav-suggestions li + li { border-top: 1px solid var(--ligne); }
.nav-suggestions a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.9rem; line-height: 1.3; }
.nav-suggestions a:hover,
.nav-suggestions [aria-selected="true"] a { background: var(--orange-pale); }
.nav-sugg-titre { font-weight: 600; font-size: 0.93rem; color: var(--texte); }
.nav-sugg-ref { font-family: var(--titre); font-weight: 700; letter-spacing: 0.02em; }
.nav-sugg-detail { font-size: 0.8rem; color: var(--texte-pale); }
.nav-sugg-tout a { flex-direction: row; font-size: 0.85rem; font-weight: 600; color: var(--orange-texte); }

.menu-mobile {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ligne-forte);
  background: #fff;
  color: var(--texte);
  cursor: pointer;
}
.menu-mobile .ico { width: 1.5rem; height: 1.5rem; }
.menu-mobile-fermer { display: none; }
.menu-mobile[aria-expanded="true"] .menu-mobile-ouvrir { display: none; }
.menu-mobile[aria-expanded="true"] .menu-mobile-fermer { display: inline-flex; }

/* =========================================================
   ACCUEIL — HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* WebP 2000 px (159 Ko) et 1400 px sur mobile (90 Ko), prechargees par index.php
     ($page['precharger']) : memes adresses et memes media ici. Le JPEG d'origine
     reste l'image de partage (og:image). */
  background: var(--graphite) url("/assets/img/photos/hero-immeuble-bureaux.webp") center / cover no-repeat;
}
@media (max-width: 760px) {
  .hero { background-image: url("/assets/img/photos/hero-immeuble-bureaux-1400.webp"); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(24, 24, 24, 0.94) 0%, rgba(24, 24, 24, 0.86) 42%, rgba(24, 24, 24, 0.45) 75%, rgba(24, 24, 24, 0.25) 100%);
}
.hero-corps {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  max-width: 52rem; /* "vos installations de chauffage." doit tenir sur une ligne */
}
.hero-surtitre {
  display: flex;
  align-items: center;
  margin: 0 0 1.3rem;
  font-family: var(--titre);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-vif);
}
.hero h1 {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  /* Coupures posées à la main (<br />) dans index.php : 3 lignes, la partie
     orange seule sur la sienne. Pas de text-wrap: balance, qui les déplacerait. */
}
.hero h1 em { font-style: italic; color: var(--orange); }
.hero-chapeau {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: 1.12rem;
  color: #dadada;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

.hero-chiffres {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
  padding-bottom: 3.2rem; /* place pour les cartes "accès direct" qui chevauchent */
}
.hero-chiffres-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-chiffres-grille > div {
  padding: 1.3rem 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-chiffres-grille > div:first-child { border-left: 0; padding-left: 0; }
.hero-chiffres strong {
  display: block;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--orange);
}
.hero-chiffres span { font-size: 0.88rem; color: #cfcfcf; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--fond-alt); }
.section-sombre { background: var(--graphite); color: var(--sur-sombre); }

.section-tete { max-width: 46rem; margin: 0 0 2.6rem; }
.section-tete-centre { margin-left: auto; margin-right: auto; text-align: center; }

.surtitre {
  display: flex;
  align-items: center;
  margin: 0 0 0.8rem;
  font-family: var(--titre);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-texte);
}
.section-tete-centre .surtitre { justify-content: center; }
.section-sombre .surtitre { color: var(--orange-vif); }

.titre-section {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  text-wrap: balance;
}
.section-tete p:not(.surtitre) {
  margin: 1rem 0 0;
  font-size: 1.06rem;
  color: var(--texte-doux);
}
.section-sombre .section-tete p:not(.surtitre) { color: var(--sur-sombre-doux); }

/* ---------- Accès direct ---------- */
.section-acces { background: var(--fond); }
.gamme-ico-grand { width: 5rem; height: 5rem; color: var(--ligne-forte); stroke-width: 1.2; }
.pratique { margin-top: 1rem; }
.centre { margin-top: 1.4rem; text-align: center; }
.nowrap { white-space: nowrap; }
.acces-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: -3.2rem;
  position: relative;
  z-index: 2;
}
.acces-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.acces-carte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.acces-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.acces-carte:hover::before { transform: scaleX(1); }
.acces-carte .ico { width: 2rem; height: 2rem; color: var(--orange); stroke-width: 1.5; }
.acces-carte h3 {
  margin: 0.3rem 0 0;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
}
.acces-carte p { margin: 0; font-size: 0.92rem; color: var(--texte-doux); line-height: 1.5; }
.acces-carte .lien-fleche { margin-top: auto; padding-top: 0.6rem; font-size: 0.85rem; }

/* ---------- Gammes produits ---------- */
.gammes-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.gamme {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ligne);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.gamme:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: var(--ligne-forte); }
.gamme-visuel {
  display: grid;
  place-items: center;
  height: 190px;
  padding: 1.2rem;
  background: linear-gradient(160deg, #fff 0%, var(--fond-alt) 100%);
  border-bottom: 1px solid var(--ligne);
}
.gamme-visuel img { max-height: 150px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.gamme-corps { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.4rem 1.4rem; flex: 1; }
.gamme-corps h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}
.gamme-corps h3 .ico { color: var(--orange); width: 1.3rem; height: 1.3rem; }
.gamme-corps p { margin: 0; font-size: 0.93rem; color: var(--texte-doux); line-height: 1.5; }
.gamme-liens { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.gamme-liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--ligne);
  font-size: 0.93rem;
  font-weight: 600;
  transition: color 0.15s ease;
}
.gamme-liens a:hover { color: var(--orange-texte); }
.gamme-liens .ico { width: 0.95rem; height: 0.95rem; color: var(--texte-pale); }

/* ---------- Bloc image + texte ---------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo-visuel { position: relative; }
.duo-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo-visuel::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 38%;
  height: 38%;
  border-right: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
  pointer-events: none;
}
.duo-texte p { color: var(--texte-doux); }
.section-sombre .duo-texte p { color: var(--sur-sombre-doux); }

.puces { margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.puces li { position: relative; padding-left: 1.5rem; }
.puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.55rem;
  height: 0.42rem;
  background: var(--orange);
  transform: skewX(-14deg);
}

.familles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.4rem 0 1.8rem;
}
.famille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--ligne);
  font-weight: 600;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.famille:hover { border-color: var(--orange); transform: translateX(3px); }
.famille-nb {
  flex: none;
  min-width: 2rem;
  padding: 0.1rem 0.45rem;
  background: var(--graphite);
  color: #fff;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Nouveautés ---------- */
.nouveautes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
}
.nouveaute {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.nouveaute:hover { border-color: var(--orange); background: rgba(255, 102, 0, 0.08); }
.nouveaute-badge {
  align-self: flex-start;
  padding: 0.05rem 0.4rem;
  background: var(--orange);
  color: var(--texte);
  font-family: var(--titre);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nouveaute strong { font-family: var(--titre); font-size: 1.25rem; font-weight: 700; color: #fff; }
.nouveaute span:last-child { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--sur-sombre-doux); }

/* ---------- Schéma supervision ---------- */
.schema-cadre {
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--ligne);
}
.schema-cadre figcaption { margin-top: 0.8rem; font-size: 0.88rem; color: var(--texte-pale); text-align: center; }

/* ---------- Partenaires / pratique ---------- */
.pratique {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.pratique-carte {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 1.3rem;
  background: #fff;
  border: 1px solid var(--ligne);
}
.pratique-carte img { width: 110px; height: 56px; object-fit: contain; flex: none; }
.pratique-carte p { margin: 0; font-size: 0.93rem; color: var(--texte-doux); line-height: 1.45; }
.pratique-carte strong { display: block; color: var(--texte); font-family: var(--titre); font-size: 1.1rem; }
a.pratique-carte { transition: border-color 0.18s ease; }
a.pratique-carte:hover { border-color: var(--orange); }

.partenaires-logos {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--ligne);
}

/* =========================================================
   PAGES INTÉRIEURES
   ========================================================= */
.bandeau-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.2rem 0 2.8rem;
  background: var(--graphite);
  color: #fff;
}
/* Trame de lignes obliques, reprise de l'inclinaison du logo. */
.bandeau-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(-76deg, transparent 0 22px, rgba(255, 255, 255, 0.035) 22px 23px),
    linear-gradient(100deg, var(--graphite) 30%, var(--graphite-2) 100%);
}
.bandeau-page::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 5px;
  background: var(--orange);
}
.bandeau-page .surtitre { color: var(--orange-vif); margin-top: 1.6rem; }
.bandeau-page h1 {
  margin: 0;
  max-width: 52rem;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  text-wrap: balance;
}
.chapeau { margin: 1rem 0 0; max-width: 46rem; font-size: 1.1rem; color: #d4d4d4; }

.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--sur-sombre-doux);
}
.ariane li:not(:last-child)::after { content: "/"; margin: 0 0.55rem; opacity: 0.5; }
.ariane a:hover { color: #fff; text-decoration: underline; }
.ariane [aria-current] { color: #fff; }

.page-corps { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem); }

/* ---------- Mise en page produit : planches + colonne latérale ---------- */
.produit-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 2.5rem;
  align-items: start;
}
.produit-cote {
  position: sticky;
  top: calc(var(--entete-actuel, var(--entete-h)) + 1.5rem);
  display: grid;
  gap: 1.2rem;
}
.fiche-resume {
  padding: 1.4rem;
  background: var(--fond-alt);
  border-top: 4px solid var(--orange);
}
.fiche-resume img { margin: 0 auto 1rem; max-height: 200px; width: auto; mix-blend-mode: multiply; }
.fiche-resume h2 {
  margin: 0 0 0.6rem;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 700;
}
.fiche-resume ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.93rem; }
.fiche-resume li { display: flex; gap: 0.5rem; }
.fiche-resume li .ico { color: var(--orange-texte); margin-top: 0.2rem; width: 1rem; height: 1rem; }
.fiche-actions { display: grid; gap: 0.6rem; }
.fiche-actions .bouton { width: 100%; }

.planches { display: grid; gap: 1.4rem; }
.planche { margin: 0; }
.planche-lien {
  position: relative;
  display: block;
  padding: clamp(0.6rem, 2vw, 1.2rem);
  background: #fff;
  border: 1px solid var(--ligne);
  cursor: zoom-in;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.planche-lien:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre); }
.planche-lien img { margin: 0 auto; }
.planche-zoom {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  background: var(--graphite);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.planche-lien:hover .planche-zoom,
.planche-lien:focus-visible .planche-zoom { opacity: 1; }

/* ---------- Modèles (caractéristiques en HTML) ---------- */
.modeles { display: grid; gap: 1.2rem; margin-bottom: 2.4rem; }
.modele { background: #fff; border: 1px solid var(--ligne); }
.modele-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--graphite);
  color: #fff;
}
.modele-tete h2 { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.modele-ref {
  padding: 0.1rem 0.5rem;
  background: var(--orange);
  color: var(--texte);
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.modele-badge { margin-left: auto; font-size: 0.82rem; font-weight: 600; color: var(--orange-vif); }
.modele .tableau-infos { margin: 0; border: 0; }
.modele-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.modele-photo { margin: 0; padding: 0.8rem; border-left: 1px solid var(--ligne); display: grid; place-items: center; }
.modele-photo a { cursor: zoom-in; }
.modele-photo img { width: 150px; height: auto; mix-blend-mode: multiply; }
.modele-schema {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem 1.4rem;
  border-left: 1px solid var(--ligne);
}
.modele-schema img { width: 110px; height: auto; }
.modele-schema figcaption { font-size: 0.78rem; color: var(--texte-pale); }
.titre-planches {
  margin: 0 0 1rem;
  font-family: var(--titre);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

/* ---------- Tableaux de références du catalogue ---------- */
.refs { margin-bottom: 2.4rem; background: #fff; border: 1px solid var(--ligne); scroll-margin-top: calc(var(--entete-h) + var(--barre-haut-h) + 1rem); }
.refs-titre {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: var(--graphite);
  color: #fff;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}
.refs-texte { margin: 0; padding: 0.8rem 1.1rem; font-size: 0.93rem; color: var(--texte-doux); border-bottom: 1px solid var(--ligne); }
.refs-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.refs-table thead th {
  padding: 0.55rem 1.1rem;
  text-align: left;
  font-family: var(--titre);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
  border-bottom: 1px solid var(--ligne);
}
.refs-table tbody th,
.refs-table td { padding: 0.5rem 1.1rem; border-bottom: 1px solid var(--ligne); vertical-align: top; text-align: left; }
.refs-table tbody th {
  width: 12.5rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.refs-table td { color: var(--texte-doux); }
.refs-table tbody tr:hover { background: var(--orange-pale); }
/* Ligne visee par un lien de l'index (/produits/references.php#ref-...) */
.refs-table tbody tr:target { background: var(--orange-pale); box-shadow: inset 4px 0 0 var(--orange); }
.refs-table tbody tr { scroll-margin-top: calc(var(--entete-h) + var(--barre-haut-h) + 1rem); }
/* Miniature de la reference : ouvre la photo dans la visionneuse */
.refs-table .refs-col-photo { width: 7rem; }
/* Largeur de la colonne Reference meme si toutes les lignes sont fusionnees */
.refs-table:not(.refs-table-colonnes) thead th:nth-child(2) { width: 12.5rem; }
.refs-table td.refs-photo { width: 7rem; padding: 0.3rem 0.75rem; vertical-align: middle; }
.refs-vignette { display: block; width: 3.5rem; height: 3.5rem; margin-inline: auto; outline-offset: 2px; }
/* Taille choisie par taille_photo() (inc/gabarits.php) selon la hauteur de la designation */
.refs-vignette-88 { width: 5.5rem; height: 5.5rem; }
.refs-vignette-112 { width: 7rem; height: 7rem; }
.refs-vignette-128 { width: 8rem; height: 8rem; }
.refs-vignette img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.15s ease; }
.refs-vignette:hover img { transform: scale(1.08); }
/* Tableau simple : reference en haut de sa cellule, photo centree dessous (au milieu de la ligne) */
.refs-table tbody th.refs-ref-photo { position: relative; vertical-align: middle; padding-top: 2.4rem; }
.refs-table tbody th.refs-ref-photo:has(.refs-alias) { padding-top: 3.4rem; }
/* Sans fusion : reference et designation au milieu de la ligne, comme la photo */
.refs-table:not(.refs-table-colonnes) tbody th,
.refs-table:not(.refs-table-colonnes) td { vertical-align: middle; }
/* Reference alignee sur la colonne Reference (colonne photo : 7rem) */
.refs-nom { position: absolute; top: 0.5rem; left: 8.1rem; }
/* Decalage d'une demi-marge : centre entre le bord du tableau et le TEXTE de la designation */
.refs-ref-photo .refs-vignette { position: relative; left: 0.55rem; }
.refs-alias { display: block; font-family: var(--corps); font-weight: 500; font-size: 0.78rem; letter-spacing: 0; color: var(--texte-pale); }
.refs-alias::before { content: "ou "; }
.refs-source { margin: 0; padding: 0.7rem 1.1rem; font-size: 0.85rem; color: var(--texte-pale); }
.refs-source a { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 0.18em; }
.refs-source a:hover { color: var(--texte); }

/* Rubriques du catalogue dans une gamme, colonnes techniques, details */
.refs-rubrique {
  margin: 0;
  padding: 0.75rem 1.1rem 0.2rem;
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texte);
  border-top: 1px solid var(--ligne);
}
.refs-rubrique:first-of-type { border-top: 0; }
.refs-rubrique + .refs-texte { padding-top: 0.2rem; }
.refs-defil { overflow-x: auto; }
/* Sans min-width: 0, l'element de grille s'elargit a la taille du tableau et la
   page defile en largeur sur mobile, au lieu du seul tableau. */
.produit-principal { min-width: 0; }
.refs-table-colonnes thead th:nth-child(n + 3),
.refs-table-colonnes tbody td { white-space: nowrap; }
.refs-table-colonnes tbody td:last-child { white-space: normal; }
.refs-libelle { display: block; color: var(--texte); }
.refs-details { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; line-height: 1.45; color: var(--texte-pale); }
.refs-details li + li { margin-top: 0.1rem; }
.refs-details-titre { list-style: none; margin-left: -1.1rem; margin-top: 0.35rem !important; }
.refs-details-titre > strong { color: var(--texte-doux); }
.refs-details-titre > ul { margin: 0.1rem 0 0; padding-left: 2.2rem; }
.refs-schemas { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.1rem 0; }
.refs-schemas figure,
.schemas-grille figure { margin: 0; }
.refs-schemas img { width: auto; max-height: 130px; border: 1px solid var(--ligne); background: #fff; }
.refs-schemas figcaption,
.schemas-grille figcaption { margin-top: 0.35rem; font-size: 0.8rem; color: var(--texte-pale); }
.schemas { margin-bottom: 2.4rem; background: #fff; border: 1px solid var(--ligne); }
.schemas-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; padding: 1.1rem; }
.schemas-grille a { display: grid; place-items: center; height: 220px; padding: 0.6rem; border: 1px solid var(--ligne); cursor: zoom-in; }
.schemas-grille img { max-height: 200px; width: auto; }

/* Tableaux de remplacement des anciens produits */
.refs-remplacement tbody th { width: auto; min-width: 11rem; white-space: normal; }
.refs-remplacement td { white-space: normal !important; }
.refs-remplacement td.refs-actuelle { font-weight: 600; color: var(--texte); }
/* Note des colonnes Oui / Non, placee au-dessus d'elles (a droite) */
.refs-texte + .refs-texte { border-top: 0; padding-top: 0; }
.refs-texte-droite { text-align: right; font-size: 0.85rem; }
.refs-remplacement td.refs-court { width: 1%; text-align: center; white-space: nowrap !important; }
.refs-remplacement thead th { white-space: normal; }
.refs-remplacement td.refs-actuelle a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.refs-remplacement td.refs-actuelle a:hover { color: var(--orange-texte); }
.refs-remplacement tbody tr:target { background: var(--orange-pale); box-shadow: inset 4px 0 0 var(--orange); }

/* Index A-Z (/produits/references.php) */
.refs-lettres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.refs-lettres a {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ligne-forte);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.15s ease;
}
.refs-lettres a:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.refs-table td.refs-gamme { width: 30%; font-size: 0.86rem; }
.refs-table tbody th a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.refs-table tbody th a:hover { color: var(--orange-texte); }
.refs-table td.refs-gamme a { color: var(--texte-doux); }
.refs-famille { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-texte); }
.refs-table td.refs-gamme a:hover { color: var(--orange-texte); text-decoration: underline; }

/* ---------- Documents ---------- */
.bloc-docs { background: #fff; border: 1px solid var(--ligne); }
.bloc-docs-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bloc-docs-titre .ico { color: var(--orange-texte); }
.liste-docs { margin: 0; padding: 0; list-style: none; }
.liste-docs li + li { border-top: 1px solid var(--ligne); }
.liste-docs a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.1rem;
  transition: background 0.15s ease;
}
.liste-docs a:hover { background: var(--orange-pale); }
.doc-type {
  flex: none;
  width: 2.6rem;
  padding: 0.15rem 0;
  background: var(--graphite);
  color: #fff;
  font-family: var(--titre);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.doc-texte { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.doc-nom { font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.doc-detail { font-size: 0.82rem; color: var(--texte-pale); }
.doc-ico { color: var(--texte-pale); }
.liste-docs a:hover .doc-ico { color: var(--orange-texte); }

/* ---------- Encart contact ---------- */
.encart-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.8rem 2rem;
  background: var(--graphite);
  color: #fff;
  border-left: 6px solid var(--orange);
}
/* .prose p (texte gris fonce) ne doit pas assombrir l'encart sur fond graphite */
.encart-contact p,
.prose .encart-contact p { margin: 0; color: var(--sur-sombre); }
.encart-titre {
  margin: 0 0 0.3rem !important;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff !important;
}
.encart-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.encart-contact .bouton-contour { color: #fff; }
.encart-contact .bouton-contour:hover { background: #fff; color: var(--texte); border-color: #fff; }
.produit-cote.cote-longue { position: static; }
.produit-cote .encart-contact { margin: 0; padding: 1.3rem; flex-direction: column; align-items: stretch; }
.produit-cote .encart-titre { font-size: 1.25rem; }
.produit-cote .encart-actions { flex-direction: column; }
.produit-cote .encart-actions .bouton { width: 100%; }

/* ---------- Texte éditorial ---------- */
.prose { max-width: 50rem; }
.prose h2 {
  margin: 2.4rem 0 0.8rem;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8rem 0 0.5rem; font-family: var(--titre); font-weight: 700; font-size: 1.25rem; }
.prose p, .prose li { color: var(--texte-doux); }
.prose p { margin: 0 0 1rem; }
.prose ul:not(.puces) { padding-left: 1.2rem; }
.prose a:not(.bouton) { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 0.18em; }
.prose a:not(.bouton):hover { color: var(--texte); }
.prose .lead { font-size: 1.15rem; font-weight: 500; color: var(--texte); }
.prose figure { margin: 2rem 0; }
.prose figure img { border: 1px solid var(--ligne); }
.prose figcaption { margin-top: 0.5rem; font-size: 0.86rem; color: var(--texte-pale); }

.tableau-infos {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 0;
  margin: 1.2rem 0 2rem;
  border: 1px solid var(--ligne);
  font-size: 0.95rem;
}
.tableau-infos dt,
.tableau-infos dd { margin: 0; padding: 0.65rem 1rem; border-bottom: 1px solid var(--ligne); }
.tableau-infos dt {
  background: var(--fond-alt);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.tableau-infos dd { color: var(--texte); }
.tableau-infos > :nth-last-child(-n + 2) { border-bottom: 0; }

.a-verifier {
  display: flex;
  gap: 0.7rem;
  margin: 0 0 2rem;
  padding: 1rem 1.2rem;
  background: var(--orange-pale);
  border-left: 4px solid var(--orange);
  font-size: 0.93rem;
}
.a-verifier .ico { color: var(--orange-texte); margin-top: 0.2rem; }
.a-verifier p { margin: 0 !important; color: var(--texte) !important; }

.cartes-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2rem;
}
.carte-simple {
  padding: 1.4rem;
  background: var(--fond-alt);
  border-top: 3px solid var(--orange);
}
.carte-simple .ico { width: 1.8rem; height: 1.8rem; color: var(--orange-texte); stroke-width: 1.5; }
.carte-simple h3 { margin: 0.7rem 0 0.4rem; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.carte-simple p { margin: 0; font-size: 0.93rem; color: var(--texte-doux); }

/* ---------- Pages carrefour (produits, applications) ---------- */
.carrefour-groupe + .carrefour-groupe { margin-top: 3rem; }
.carrefour-titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--texte);
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: 1.7rem;
}
.carrefour-titre .ico { color: var(--orange); width: 1.6rem; height: 1.6rem; }
.carrefour-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.tuile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ligne);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--ligne-forte); }
.tuile-visuel {
  height: 170px;
  padding: 0.8rem;
  display: grid;
  place-items: center;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}
.tuile-visuel img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.tuile-corps { padding: 0.95rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.tuile-titre { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.tuile-detail { font-size: 0.87rem; color: var(--texte-pale); }
.tuile-code {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--titre);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--orange-texte);
}

/* ---------- Navigation entre schémas ---------- */
.schema-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}
.schema-nav a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: 48%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ligne);
  transition: border-color 0.18s ease;
}
.schema-nav a:hover { border-color: var(--orange); }
.schema-nav small { font-size: 0.78rem; color: var(--texte-pale); text-transform: uppercase; letter-spacing: 0.08em; }
.schema-nav span { font-weight: 600; }
.schema-nav .suivant { margin-left: auto; text-align: right; }

.voisins { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.voisins a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-left: 2px solid var(--ligne);
  font-size: 0.93rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.voisins a:hover { border-left-color: var(--orange); background: var(--fond-alt); }
.voisins a[aria-current] { border-left-color: var(--orange); font-weight: 700; background: var(--orange-pale); }

/* =========================================================
   DOCUMENTATION (catalogue filtrable)
   ========================================================= */
/* Barre d'outils collante, juste sous l'en-tete. --entete-actuel est la hauteur
   REELLE de l'en-tete (site.js), qui change quand le bandeau de contact se replie. */
.doc-outils {
  position: sticky;
  top: calc(var(--entete-actuel, 116px) + 0.5rem);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-bottom: 2rem;
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--ligne);
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
  transition: top 0.3s ease;
}

/* Bouton "Gammes" et sa liste deroulante (<details> natif). */
.doc-gammes { position: relative; }
.doc-gammes summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0 1rem;
  border: 2px solid var(--ligne-forte);
  background: #fff;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s ease;
}
.doc-gammes summary::-webkit-details-marker { display: none; }
.doc-gammes summary:hover,
.doc-gammes[open] summary { border-color: var(--texte); }
.doc-gammes-nb { color: var(--texte-pale); font-weight: 600; }
.doc-gammes-chevron { transition: transform 0.2s ease; }
.doc-gammes[open] .doc-gammes-chevron { transform: rotate(180deg); }
.doc-gammes-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(640px, calc(100vw - 2.5rem));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: 0.5rem;
  background: #fff;
  border-top: 3px solid var(--orange);
  box-shadow: var(--ombre-forte);
}
.doc-gammes-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid transparent;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.doc-gammes-liste a:hover { background: var(--fond-alt); border-left-color: var(--orange); }
.doc-gammes-compte {
  flex: none;
  min-width: 2rem;
  padding: 0.05rem 0.4rem;
  background: var(--fond-alt);
  color: var(--texte-pale);
  font-size: 0.78rem;
  text-align: center;
}
.doc-recherche { position: relative; }
.doc-recherche .ico {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  color: var(--texte-pale);
}
.doc-recherche input {
  width: 100%;
  min-height: 50px;
  padding: 0 1rem 0 2.8rem;
  border: 2px solid var(--ligne-forte);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 1.02rem;
  color: var(--texte);
}
.doc-recherche input:focus { outline: none; border-color: var(--orange); }
.doc-compteur { margin: 0; padding-right: 0.3rem; font-size: 0.88rem; color: var(--texte-pale); white-space: nowrap; }
.doc-compteur strong { color: var(--texte); }

/* Repli sans JS pour les ancres : en-tete complet + barre d'outils. Avec JS,
   site.js calcule le decalage exact (l'en-tete se replie en descendant). */
.doc-gamme {
  margin-bottom: 1.4rem;
  background: #fff;
  border: 1px solid var(--ligne);
  /* Saut natif (lien direct /documentation.php#gamme) : en-tete replie + barre
     d'outils (--outils-h, publiee par site.js) + 16 px d'air. */
  scroll-margin-top: calc(var(--entete-h) + 0.5rem + var(--outils-h, 74px) + 16px);
}
.doc-gamme[hidden] { display: none; }
/* References du catalogue qui correspondent a la recherche */
.doc-produits { margin-bottom: 1.4rem; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--orange); }
.doc-produits[hidden],
.doc-produits li[hidden] { display: none; }
.doc-produits-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-produits-titre .ico { color: var(--orange-texte); }
.doc-produits-nb { font-family: var(--corps); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--texte-pale); }
.doc-produits ul { margin: 0; padding: 0; list-style: none; }
.doc-produits li + li { border-top: 1px solid var(--ligne); }
.doc-produits a { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; padding: 0.55rem 1.2rem; font-size: 0.93rem; transition: background 0.15s ease; }
.doc-produits a:hover { background: var(--orange-pale); }
.doc-produits a span { color: var(--texte-doux); }
@media (max-width: 760px) { .doc-produits a { grid-template-columns: 1fr; gap: 0.1rem; } }
/* Schemas d'application numerotes, replies sous la liste principale d'une gamme */
.doc-sous { border-top: 1px solid var(--ligne); }
.doc-sous[hidden] { display: none; }
.doc-sous > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.93rem;
  background: var(--fond-alt);
  transition: background 0.15s ease;
}
.doc-sous > summary::-webkit-details-marker { display: none; }
.doc-sous > summary:hover { background: #ecece9; }
.doc-sous-nb { font-weight: 400; color: var(--texte-pale); }
.doc-sous-chevron { width: 1.1rem; height: 1.1rem; color: var(--texte-pale); transform: rotate(-90deg); transition: transform 0.2s ease; }
.doc-sous[open] .doc-sous-chevron { transform: none; color: var(--orange-texte); }
.doc-sous[open] > summary { border-left: 4px solid var(--orange); padding-left: calc(1.2rem - 4px); }

/* ---- Gammes repliables (<details>), version retenue le 2026-09-25 ---- */
.doc-outils:has(.doc-tout) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.doc-tout {
  min-height: 50px;
  padding: 0 1rem;
  border: 2px solid var(--ligne-forte);
  background: #fff;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.doc-tout:hover { border-color: var(--texte); }
.doc-depliant { margin-bottom: 0.6rem; }
.doc-depliant > summary { cursor: pointer; list-style: none; border-bottom: 0; transition: background 0.15s ease; }
.doc-depliant > summary::-webkit-details-marker { display: none; }
.doc-depliant > summary:hover { background: #ecece9; }
.doc-depliant[open] > summary { border-bottom: 1px solid var(--ligne); border-left: 4px solid var(--orange); }
.doc-depliant-chevron {
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--texte-pale);
  transition: transform 0.2s ease;
}
.doc-depliant[open] .doc-depliant-chevron { transform: rotate(180deg); color: var(--orange-texte); }
.doc-depliant .doc-gamme-tete img { width: 56px; height: 46px; }
/* Tableaux de references dans un menu replie (page_produit 'replis') */
.refs-depliant { margin-bottom: 1rem; }
.refs-depliant .refs { margin: 0; border: 0; }
.refs-depliant .refs + .refs { border-top: 1px solid var(--ligne); }
.refs-depliant .refs:only-of-type .refs-titre { display: none; }
.doc-gamme-tete {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--fond-alt);
  border-bottom: 1px solid var(--ligne);
}
.doc-gamme-tete img { width: 72px; height: 60px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.doc-gamme-tete h2 { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.doc-gamme-tete span { font-size: 0.85rem; color: var(--texte-pale); }
/* Colonnes fixes : toutes les gammes s'alignent, quelle que soit la longueur des références. */
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; table-layout: fixed; }
.doc-table th:nth-child(1) { width: 42%; }
.doc-table th:nth-child(3) { width: 7.5rem; }
.doc-table td { overflow-wrap: anywhere; }
.doc-table th {
  padding: 0.55rem 1.2rem;
  text-align: left;
  font-family: var(--titre);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
  border-bottom: 1px solid var(--ligne);
}
.doc-table td { padding: 0.55rem 1.2rem; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table tr[hidden] { display: none; }
.doc-table tbody tr:hover { background: var(--orange-pale); }
.doc-table td:first-child { font-weight: 600; }
.doc-table td:last-child { white-space: nowrap; text-align: right; }
.doc-table a.doc-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ligne-forte);
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.15s ease;
}
.doc-table a.doc-lien:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.doc-table a.doc-lien .ico { width: 0.95rem; height: 0.95rem; }
/* References citees dans le PDF (inc/data/documentation-refs.php), en texte pour Google. */
.doc-refs { display: block; margin-top: 0.15rem; font-size: 0.76rem; line-height: 1.4; color: var(--texte-pale); }
/* "Contient : A20405…" : reference trouvee dans le PDF, pas dans le libelle. */
.doc-contient {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange-texte);
}
.doc-contient[hidden] { display: none; }
.doc-vide { padding: 2rem; text-align: center; color: var(--texte-pale); border: 1px dashed var(--ligne-forte); }
.doc-vide[hidden] { display: none; }
mark { background: #ffd9bf; color: inherit; padding: 0 0.05em; }

/* =========================================================
   FORMULAIRES
   ========================================================= */
.formulaire { display: grid; gap: 2rem; max-width: 56rem; }
.form-bloc {
  margin: 0;
  padding: 1.6rem 1.6rem 1.8rem;
  border: 1px solid var(--ligne);
  background: #fff;
}
.form-bloc legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
}
.form-bloc legend .etape {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--orange);
  color: var(--texte);
  font-style: normal;
  font-size: 0.95rem;
}
.form-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.2rem;
  margin-top: 0.8rem;
}
.form-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-large { grid-column: 1 / -1; }
.champ { display: grid; gap: 0.35rem; align-content: start; }
.champ label {
  font-family: var(--titre);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.champ label .requis { color: var(--orange-texte); }
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  background: var(--fond-carte);
  font: inherit;
  color: var(--texte);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18);
}
/* :user-invalid ne s'allume qu'après saisie ou tentative d'envoi (contrairement à
   :invalid, qui rougirait tous les champs obligatoires vides dès l'ouverture).
   .est-invalide : même rendu pour les navigateurs qui l'ignorent (posée par site.js). */
.champ input:user-invalid,
.champ textarea:user-invalid,
.champ select:user-invalid,
.champ .est-invalide { border-color: #c62828; background: #fff5f5; }
.champ-aide { font-size: 0.82rem; color: var(--texte-pale); }
.form-copie {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
}
.form-copie input { width: 1.1rem; height: 1.1rem; accent-color: var(--orange); }
/* Livraison identique à la facturation : champs recopiés, non modifiables (site.js). */
.champ input[readonly] {
  background: var(--fond-alt);
  border-color: var(--ligne);
  color: var(--texte-pale);
  cursor: not-allowed;
}
.champ input[readonly]:focus { background: var(--fond-alt); border-color: var(--ligne-forte); box-shadow: none; }
.form-consentement { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--texte-doux); }
.form-consentement input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--orange); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { margin: 0; font-size: 0.86rem; color: var(--texte-pale); }
/* Piège à robots : hors écran, jamais rempli par un humain. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Retours d'envoi : affichés via :target, sans JavaScript. */
.retour-envoi { display: none; margin-bottom: 2rem; padding: 1.2rem 1.4rem; border-left: 5px solid; }
.retour-envoi:target { display: flex; gap: 0.8rem; align-items: flex-start; }
.retour-envoi .ico { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.retour-envoi p { margin: 0; }
.retour-envoi strong { display: block; font-family: var(--titre); font-size: 1.2rem; }
.retour-ok { background: #edf7ee; border-color: #2e7d32; color: #1b4d1f; }
.retour-erreur { background: #fdecea; border-color: #c62828; color: #7f1d1d; }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-pied { background: var(--graphite); color: var(--sur-sombre-doux); }
.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.4rem;
  padding: 3.6rem 0 3rem;
}
.pied-logo {
  display: inline-block;
  padding: 0.8rem 1rem;
  background: #fff;
}
.pied-logo img { width: 170px; }
.pied-marque p { margin: 1.1rem 0 0; max-width: 20rem; font-size: 0.93rem; }
.pied-col h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-family: var(--titre);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.pied-col h2 .ico { color: var(--orange); }
.pied-col p { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.55; }
.pied-col a { transition: color 0.15s ease; }
.pied-col a:hover { color: #fff; }
.pied-tel a { font-family: var(--titre); font-weight: 700; font-size: 1.45rem; color: #fff; }
.pied-horaires { font-size: 0.86rem !important; }
.pied-liens { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.pied-liens a { display: inline-block; }
.pied-liens a::before { content: ""; display: inline-block; width: 0.4rem; height: 0.32rem; margin-right: 0.55rem; background: var(--orange); transform: skewX(-14deg); vertical-align: 2px; }

.pied-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.pied-legal-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.pied-legal p { margin: 0; }
.pied-legal nav { display: flex; gap: 1.4rem; }
.pied-legal a:hover { color: #fff; }

/* =========================================================
   VISIONNEUSE
   ========================================================= */
.visionneuse {
  width: min(96vw, 1400px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: var(--ombre-forte);
}
.visionneuse::backdrop { background: rgba(15, 15, 15, 0.82); }
.visionneuse img { width: 100%; height: auto; max-height: 94vh; object-fit: contain; }
.visionneuse-fermer {
  position: sticky;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  background: var(--graphite);
  color: #fff;
  cursor: pointer;
}
.visionneuse-fermer .ico { width: 1.4rem; height: 1.4rem; }

/* =========================================================
   PRESENTATION DE LA GAMME RCO (/produits/rco_presentation.php)
   ========================================================= */
.rco-sommaire {
  position: sticky;
  top: var(--entete-actuel, var(--entete-h));
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--ligne);
}
.rco-sommaire ul {
  display: flex;
  gap: 0 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.rco-sommaire a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--texte-doux);
  border-bottom: 3px solid transparent;
}
.rco-sommaire a:hover { color: var(--texte); border-bottom-color: var(--orange); }
#gammes, #connecte, #communication, #energie, #compacts, #modulaires, #ecrans, #architecture, #ambiance, #applications,
#extensions, #cartes { scroll-margin-top: calc(var(--entete-h) + 3.2rem); }

.rco-gammes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.rco-gamme {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  background: var(--fond-carte);
  border: 1px solid var(--ligne);
  border-top: 4px solid var(--orange);
}
.rco-gamme-visuel { display: grid; place-items: center; padding: 1.2rem; background: #fff; }
.rco-gamme-visuel img { width: 100%; max-width: 240px; }
.rco-gamme-corps { padding: 1.5rem 1.5rem 1.4rem; }
.rco-gamme-code {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--orange-texte);
}
.rco-gamme h3 { margin: 0.2rem 0 0.5rem; font-family: var(--titre); font-weight: 800; font-style: italic; font-size: 1.6rem; line-height: 1.1; }
.rco-gamme p { color: var(--texte-doux); font-size: 0.97rem; }
.rco-chiffres { display: flex; gap: 1.8rem; margin: 1rem 0 1.1rem; }
.rco-chiffres div { display: flex; flex-direction: column-reverse; }
.rco-chiffres dt { font-size: 0.85rem; color: var(--texte-doux); }
.rco-chiffres dd { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.rco-renvoi { margin: 1.6rem 0 0; color: var(--texte-doux); }
.rco-renvoi a,
.section-tete p a { color: var(--orange-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Serveur web : quatre captures en mosaique decalee */
.rco-duo { align-items: start; }
.rco-duo .duo-texte p { color: var(--texte); }
.rco-puces-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rco-ecrans-web { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; align-items: start; }
.rco-ecrans-web img { aspect-ratio: 4 / 3; object-fit: cover; }
.rco-figure { margin: 0; }
.rco-figure a { display: block; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre); cursor: zoom-in; }
.rco-figure a:hover { border-color: var(--orange); }
.rco-figure img { width: 100%; }
.rco-figure figcaption { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--texte); }
.rco-figure-petite { max-width: 260px; }

/* Communication : l'automate au centre, les protocoles de part et d'autre */
.rco-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.rco-hub-cote { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rco-hub-cote li { position: relative; padding: 1rem 1.2rem; background: var(--fond-alt); border-left: 3px solid var(--orange); }
.rco-hub-cote:last-child li { border-left: 0; border-right: 3px solid var(--orange); text-align: right; }
.rco-hub-cote strong { display: block; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.rco-hub-cote span { font-size: 0.9rem; color: var(--texte-doux); }
.rco-hub-centre { position: relative; padding: 1.5rem; }
.rco-hub-centre::before { content: ""; position: absolute; inset: 0; border: 2px dashed var(--ligne-forte); border-radius: 50%; }
.rco-hub-centre img { position: relative; width: 100%; }

/* Energie et alarmes (fond sombre) */
.rco-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); }
.rco-deux .titre-section { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.rco-sombre-texte { color: var(--sur-sombre-doux); }
.rco-fluides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 1.4rem 0 0.4rem; padding: 0; list-style: none; }
.rco-fluides li {
  padding: 0.8rem 0.4rem;
  text-align: center;
  font-family: var(--titre);
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 3px solid var(--orange);
}
.rco-exemples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.rco-exemples span { padding: 0.25rem 0.65rem; font-size: 0.85rem; background: rgba(255, 255, 255, 0.08); color: var(--sur-sombre); }

/* Tableaux de choix */
.rco-tete-produit { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: 1.6rem; }
/* photo centree entre la fin du texte et le bord droit du tableau */
.rco-tete-produit .section-tete { margin-bottom: 0; }
.rco-tete-produit > img { justify-self: center; max-height: 180px; max-width: min(100%, 340px); width: auto; object-fit: contain; }
.rco-duo-photos { display: flex; gap: 0.8rem; justify-content: center; }
.rco-duo-photos img { width: 48%; max-width: 130px; }
.rco-sous-titre { margin: 2.6rem 0 1rem; font-family: var(--titre); font-weight: 800; font-style: italic; font-size: 1.5rem; }
.rco-sous-titre small { margin-left: 0.6rem; font-style: normal; font-weight: 500; font-size: 0.95rem; color: var(--texte-doux); }
.rco-defil { position: relative; overflow-x: auto; background: #fff; border: 1px solid var(--ligne); } /* relative : les textes visuellement-cache restent dans la zone de defilement */
.rco-defil:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.rco-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rco-table thead th {
  padding: 0.7rem 0.6rem;
  background: var(--graphite);
  color: #fff;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  text-align: center;
}
.rco-table thead td { background: var(--graphite); }
.rco-table tbody + tbody { border-top: 2px solid var(--ligne-forte); }
.rco-table th[scope="row"],
.rco-table td { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--ligne); }
.rco-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--texte); white-space: nowrap; }
.rco-table td { text-align: center; color: var(--texte-doux); white-space: nowrap; }
.rco-table .rco-groupe {
  width: 9.5rem;
  padding: 0.45rem 0.8rem;
  text-align: left;
  vertical-align: middle;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-texte);
  background: var(--orange-pale);
  border-bottom: 1px solid var(--ligne);
}
.rco-table tbody tr:hover th[scope="row"],
.rco-table tbody tr:hover td { background: var(--fond-alt); }
.rco-oui .ico { width: 1.2rem; height: 1.2rem; color: var(--orange-texte); stroke-width: 2.6; vertical-align: middle; }
.rco-non { color: var(--ligne-forte) !important; }
.rco-table-valeurs td { font-family: var(--titre); font-weight: 600; font-size: 0.98rem; color: var(--texte); }

/* Ecrans */
.rco-ecrans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rco-ecran { padding: 1.2rem; background: var(--fond-carte); border: 1px solid var(--ligne); }
.rco-ecran-visuel { display: grid; place-items: center; height: 200px; margin-bottom: 0.8rem; background: #fff; }
.rco-ecran-visuel img { max-height: 140px; width: auto; }
.rco-ecran-10 img { max-height: 145px; }
.rco-ecran-15 img { max-height: 195px; }
.rco-ecran h3 { margin: 0 0 0.6rem; font-family: var(--titre); font-weight: 800; font-size: 1.3rem; }
.rco-ecran dl { margin: 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.rco-ecran dl div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; }
.rco-ecran dt { color: var(--texte-doux); }
.rco-ecran dd { margin: 0; color: var(--texte); }

/* Architecture : un bus, quatre colonnes */
.rco-archi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: 3rem; }
.rco-archi::before { content: ""; position: absolute; top: 1.2rem; left: 0; right: 0; height: 4px; background: var(--graphite); }
.rco-archi-bus {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 0.6rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--fond-alt);
  color: var(--texte-doux);
}
.rco-archi-col { position: relative; padding: 1.3rem; background: #fff; border-top: 3px solid var(--orange); }
.rco-archi-col::before { content: ""; position: absolute; top: calc(-1.8rem - 3px); left: 1.3rem; width: 3px; height: 1.8rem; background: var(--graphite); }
.rco-archi-col h3 { margin: 0 0 0.6rem; font-family: var(--titre); font-weight: 800; font-size: 1.25rem; }
.rco-archi-col ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; color: var(--texte-doux); }
.rco-archi-col li + li { margin-top: 0.35rem; }
.rco-archi-label { margin: 0.4rem 0 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-pale); }
.rco-etiquettes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.6rem; }
.rco-etiquettes span { padding: 0.15rem 0.5rem; font-size: 0.8rem; background: var(--fond-alt); border: 1px solid var(--ligne); }

/* Applications */
.rco-applis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.rco-appli { padding: 1.4rem; background: #fff; border: 1px solid var(--ligne); }
.rco-appli .rco-figure a { box-shadow: none; }
.rco-appli h3 { margin: 1.1rem 0 0; font-family: var(--titre); font-weight: 800; font-size: 1.35rem; }
.rco-appli .puces { margin-bottom: 1rem; font-size: 0.93rem; color: var(--texte-doux); }

.rco-fin { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.rco-fin .encart-contact { margin-top: 0; }

@media (max-width: 1080px) {
  .rco-gammes,
  .rco-deux,
  .rco-fin { grid-template-columns: 1fr; }
  .rco-ecrans,
  .rco-archi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rco-archi::before,
  .rco-archi-col::before { display: none; }
  .rco-archi { padding-top: 2.2rem; }
  .rco-applis { grid-template-columns: 1fr; }
  .rco-appli { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; }
  .rco-appli > .rco-figure:first-child { grid-row: span 3; }
  .rco-appli h3 { margin-top: 0; }
  .rco-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rco-hub-centre { grid-column: 1 / -1; grid-row: 1; max-width: 240px; justify-self: center; }
}
@media (max-width: 760px) {
  .rco-gamme { grid-template-columns: 1fr; }
  .rco-gamme-visuel img { max-width: 180px; }
  .rco-ecrans-web { gap: 0.6rem; }
  .rco-tete-produit { grid-template-columns: 1fr; }
  .rco-tete-produit > img,
  .rco-duo-photos { display: none; }
  .rco-hub { grid-template-columns: 1fr; gap: 1rem; }
  .rco-hub-cote:last-child li { border-right: 0; border-left: 3px solid var(--orange); text-align: left; }
  .rco-appli { display: block; }
  .rco-appli h3 { margin-top: 1.1rem; }
  .rco-fluides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rco-sous-titre small { display: block; margin: 0.2rem 0 0; }
}
@media (max-width: 560px) {
  .rco-ecrans,
  .rco-archi,
  .rco-puces-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Barre principale (logo, 5 menus, recherche, 2 boutons) : resserree par paliers
   pour tout tenir jusqu'au passage en menu mobile (1080 px). */
@media (min-width: 1081px) {
  .nav-principale { gap: 1rem; }
  .nav-cta { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 1081px) {
  .barre-nav-inner { gap: 1.2rem; }
  .nav-bouton { padding: 0 0.6rem; }
  .nav-bouton::after { left: 0.6rem; right: 0.6rem; }
  .nav-recherche input { width: 6.5rem; }
  .nav-recherche input:focus { width: 9rem; }
}
@media (max-width: 1300px) and (min-width: 1081px) {
  .nav-cta .ico { display: none; }
  .nav-principale { gap: 0.7rem; }
  .nav-bouton { padding: 0 0.45rem; font-size: 0.97rem; }
  .nav-bouton::after { left: 0.45rem; right: 0.45rem; }
  .marque img { width: 150px; }
}
@media (max-width: 1140px) and (min-width: 1081px) {
  .barre-nav-inner { gap: 0.8rem; }
  .nav-principale { gap: 0.5rem; }
  .nav-bouton { padding: 0 0.35rem; font-size: 0.93rem; }
  .nav-bouton::after { left: 0.35rem; right: 0.35rem; }
  .nav-cta { padding-left: 0.75rem; padding-right: 0.75rem; letter-spacing: 0.03em; }
  .nav-recherche input { width: 5rem; }
  .marque img { width: 135px; }
}
@media (max-width: 1180px) {
  .nouveautes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --entete-h: 64px; }
  .menu-mobile { display: inline-flex; }
  .nav-principale {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    /* flex-end (version bureau) ferait deborder la colonne vers le HAUT, hors
       de portee du defilement : on arrivait en bas du sous-menu ouvert. */
    justify-content: flex-start;
    gap: 0;
    max-height: calc(100vh - var(--entete-h));
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1.5rem;
    background: #fff;
    border-top: 3px solid var(--orange);
    box-shadow: var(--ombre-forte);
  }
  .nav-principale.est-ouvert { display: flex; }
  .nav-liste { flex-direction: column; height: auto; gap: 0; }
  .nav-item { flex-direction: column; border-bottom: 1px solid var(--ligne); }
  .nav-bouton { justify-content: space-between; min-height: 54px; padding: 0 0.2rem; font-size: 1.1rem; }
  .nav-bouton::after { display: none; }
  .nav-panneau,
  .nav-panneau-compact {
    position: static;
    width: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: 0;
    box-shadow: none;
  }
  .nav-item.est-ouvert .nav-panneau { display: block; }
  .nav-panneau-inner,
  .nav-panneau-compact .nav-panneau-inner {
    width: auto;
    padding: 0 0 1rem 0.4rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .nav-actions { margin-top: 1.2rem; flex-direction: column; }
  .nav-recherche { order: -1; margin: 0.6rem 0 0.4rem; height: 48px; }
  .nav-recherche input,
  .nav-recherche input:focus { width: auto; flex: 1; font-size: 1rem; }

  .acces-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gammes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .produit-grille { grid-template-columns: 1fr; }
  .produit-cote { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pratique { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .barre-accroche { display: none; }
  .barre-haut-inner { justify-content: center; }
  .barre-contacts { gap: 1.1rem; }
  .barre-contacts a:not(.barre-compte) span { display: none; }
  .marque img { width: 140px; }
  .hero-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-chiffres-grille div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .hero-chiffres-grille > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .duo { grid-template-columns: 1fr; }
  .duo-visuel::after { right: -8px; bottom: -8px; }
  .familles { grid-template-columns: 1fr; }
  .cartes-3 { grid-template-columns: 1fr; }
  .form-grille,
  .form-grille-3 { grid-template-columns: 1fr; }
  .tableau-infos { grid-template-columns: 1fr; }
  .tableau-infos dt { border-bottom: 0; padding-bottom: 0.2rem; }
  .modele-corps { grid-template-columns: 1fr; }
  .modele-schema,
  .modele-photo { border-left: 0; border-top: 1px solid var(--ligne); }
  .encart-contact { padding: 1.4rem; }
  .doc-outils,
  .doc-outils:has(.doc-tout) { grid-template-columns: auto auto minmax(0, 1fr); }
  .doc-recherche { grid-column: 1 / -1; }
  .doc-compteur { justify-self: end; }
  /* Mobile : la barre d'outils suit le bandeau de contact, cachee sous l'en-tete
     en descendant, revenue en remontant. Reste visible pendant la saisie ou
     quand la liste des gammes est ouverte. */
  .doc-outils { transition: top 0.3s ease, transform 0.3s ease, visibility 0s; }
  body:has(.site-entete.est-compact) .doc-outils:not(:focus-within):not(:has(.doc-gammes[open])) {
    transform: translateY(calc(-100% - 0.5rem));
    visibility: hidden;
    transition: top 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  }
  .doc-gammes-liste { left: 0; right: auto; grid-template-columns: 1fr; }
}

/* Tableaux en cartes sur mobile : ecran seulement, sinon la page A4 (~700 px)
   les passe aussi en cartes a l'impression (cadres empiles) */
@media screen and (max-width: 760px) {
  .doc-table thead { display: none; }
  .doc-table td { display: block; padding: 0.2rem 1rem; border: 0; }
  .doc-table tr { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--ligne); }
  .doc-table td:last-child { width: auto; text-align: left; padding-top: 0.4rem; }
  .refs-table thead { display: none; }
  .refs-table tr { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--ligne); }
  .refs-table tbody th,
  .refs-table td { display: block; width: auto !important; padding: 0.1rem 1rem; border: 0; white-space: normal; }
  .refs-alias { display: inline; margin-left: 0.4rem; }
  .refs-table tr { display: flow-root; }
  .refs-table td.refs-photo { float: left; width: auto !important; padding: 0.15rem 0.2rem 0.3rem 1rem; }
  .refs-table .refs-vignette-88 { width: 4.5rem; height: 4.5rem; }
  .refs-table tbody th.refs-ref-photo { padding-top: 0.1rem; }
  .refs-nom { position: static; }
  .refs-ref-photo .refs-vignette { left: 0; margin: 0.4rem 0 0.2rem; }
  .refs-table .refs-vignette-112,
  .refs-table .refs-vignette-128 { width: 6.5rem; height: 6.5rem; }
  /* Tableaux a colonnes (DN, Kvs...) : on garde le tableau, qui defile dans son cadre */
  .refs-table-colonnes thead { display: table-header-group; }
  .refs-table-colonnes tr { display: table-row; padding: 0; }
  .refs-table-colonnes tbody th,
  .refs-table-colonnes td,
  .refs-table-colonnes td.refs-photo { display: table-cell; float: none; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
  .refs-table-colonnes .refs-alias { display: block; margin-left: 0; }
  .refs-table td.refs-photo:empty { display: none; }
}

@media (max-width: 560px) {
  .conteneur { width: calc(100% - 2rem); }
  .acces-grille,
  .gammes-grille { grid-template-columns: 1fr; }
  .acces-grille { margin-top: -2rem; }
  .nouveautes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions .bouton { width: 100%; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-legal-inner { flex-direction: column; align-items: flex-start; }
  .schema-nav { flex-direction: column; }
  .schema-nav a { max-width: none; }
  .barre-compte span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-entete, .site-pied, .encart-contact, .doc-outils, .fiche-actions { display: none !important; }
  .bandeau-page { background: none; color: #000; padding: 0 0 1rem; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   GENERATEUR DE FICHES D'APPLICATION (applications/generateur-rdo.php)
   Saisie a gauche (collante), fiche a droite ; a l'impression, la fiche seule.
   ========================================================= */
:root {
  --sch-depart: #c0392b;      /* tuyau de depart (conventions hydrauliques) */
  --sch-retour: #2e6bb0;      /* tuyau de retour */
}
.generateur { display: grid; grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
/* Collante, mais jamais plus haute que la fenetre : elle defile seule (molette) */
.generateur-saisie {
  display: grid;
  gap: 1.2rem;
  position: sticky;
  top: calc(var(--entete-h) + 1rem);
  max-height: calc(100vh - var(--entete-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.4rem;
  scrollbar-width: thin;
}
.generateur-saisie .form-bloc { padding: 1.1rem 1.1rem 1.3rem; }
.generateur-saisie .form-bloc legend { font-size: 1.1rem; }
.generateur-saisie .form-grille,
.generateur-saisie .form-grille-3 { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.generateur-saisie .form-note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--texte-pale); }
.generateur-saisie option:disabled { color: var(--texte-pale); }
.generateur-saisie select:disabled { opacity: 0.45; cursor: not-allowed; }
.js .generateur-envoi { display: none; }   /* mise a jour automatique avec JavaScript */
.generateur[aria-busy="true"] .fiche-app { opacity: 0.55; transition: opacity 0.2s; }

.fiche-app { min-width: 0; background: #fff; border: 1px solid var(--ligne); padding: clamp(1.2rem, 3vw, 2.2rem); }
.fiche-app ul, .fiche-app ol { padding-left: 1.2rem; margin: 0.4rem 0 1rem; }
.fiche-app li { margin-bottom: 0.2rem; }
.fiche-entete { border-bottom: 3px solid var(--orange); padding-bottom: 1.2rem; margin-bottom: 0.5rem; }
.fiche-code { margin: 0; font-family: var(--titre); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--texte-doux); }
.fiche-code strong { color: var(--orange-texte); font-size: 1.35rem; }
.fiche-titre { margin: 0.2rem 0 0.3rem; font-family: var(--titre); font-style: italic; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
.fiche-sous-titre { margin: 0; color: var(--texte-doux); }
.fiche-remarques { background: var(--orange-pale); border-left: 4px solid var(--orange); padding: 0.6rem 0.8rem 0.6rem 1.8rem !important; font-size: 0.93rem; }
.fiche-app-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0 0.6rem; }
.fiche-lien { margin: 0; font-size: 0.85rem; color: var(--texte-pale); overflow-wrap: anywhere; }
.fiche-lien a { text-decoration: underline; text-decoration-color: var(--orange); }
.fiche-section {
  margin: 2rem 0 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ligne-forte);
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
}
.fiche-app h3 { font-family: var(--titre); font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.fiche-defile { overflow-x: auto; margin-bottom: 1rem; }
.fiche-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fiche-table caption { text-align: left; font-family: var(--titre); font-weight: 700; font-size: 1.02rem; padding: 0.3rem 0; }
.fiche-table th, .fiche-table td { padding: 0.4rem 0.7rem; border: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.fiche-table thead th { background: var(--fond-alt); font-family: var(--titre); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.fiche-table tbody th { white-space: nowrap; font-weight: 700; }
.fiche-table tbody th a { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.fiche-val { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.fiche-table.refs-table td.refs-photo { width: 5rem; }
.fiche-bornes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.2rem; }
.fiche-bornier .borne-libre td { color: var(--texte-pale); }
.fiche-notes { font-size: 0.9rem; color: var(--texte-doux); }
.fiche-procedure { font-size: 0.93rem; }
.fiche-pied { margin: 2rem 0 0; font-size: 0.8rem; color: var(--texte-pale); text-align: right; }

/* Schema de principe (inc/generateur/commun.php) */
.schema-principe { margin: 0.5rem 0 1rem; overflow-x: auto; }
.schema-principe svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.schema-principe figcaption { font-size: 0.82rem; color: var(--texte-pale); margin-top: 0.3rem; }
.sch-dep, .sch-ret { stroke-width: 3; fill: none; stroke-linecap: square; }
.sch-dep { stroke: var(--sch-depart); }
.sch-ret { stroke: var(--sch-retour); }
.sch-app, .sch-boite, .sch-moteur, .sch-amb { fill: #fff; stroke: var(--texte); stroke-width: 1.5; }
.sch-moteur { fill: var(--fond-alt); }
.sch-amb { fill: var(--orange-pale); }
.sch-pointille { stroke-dasharray: 5 4; stroke: var(--texte-pale); }
.sch-plein, .sch-sonde { fill: var(--texte); }
.sch-fin, .sch-serpentin { stroke: var(--texte-doux); stroke-width: 1.2; fill: none; }
.sch-serpentin { stroke: var(--sch-depart); stroke-width: 2; }
.sch-flamme { stroke: var(--orange); stroke-width: 2; fill: none; }
.sch-flamme-pleine { fill: var(--orange-pale); stroke-width: 1.5; }
.sch-pale { fill: var(--fond-alt); stroke: var(--texte); stroke-width: 1.2; stroke-linejoin: round; }
.sch-grille { stroke: var(--texte); stroke-width: 1.8; stroke-linecap: round; }
.sch-fleche-dep { fill: var(--sch-depart); }
.sch-fleche-ret { fill: var(--sch-retour); }
.sch-txt, .sch-txt-fort, .sch-mini { font-family: var(--corps); fill: var(--texte); }

/* Bornier (inc/generateur/commun.php, bornier_svg) : socle 1-15 / 21-35, bloc 41-45 */
.fiche-bornier-dessin { margin: 0 0 1.6rem; }
.fiche-bornier-dessin figcaption { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; margin-bottom: 0.2rem; }
.bornier-svg { display: block; width: 100%; min-width: 44rem; height: auto; }
.brn-corps { fill: var(--fond-alt); stroke: var(--texte); stroke-width: 1.5; }
.brn-nom { font-family: var(--titre); font-weight: 700; font-size: 15px; fill: var(--texte-pale); opacity: 0.35; }
.brn-num { font-family: var(--corps); font-size: 11px; font-weight: 700; fill: var(--texte); }
.brn-rep { font-family: var(--corps); font-size: 8.5px; fill: var(--texte-doux); }
.brn-libre { fill: var(--ligne-forte); font-weight: 400; }
.brn-fil { stroke: var(--texte); stroke-width: 1.5; }
.brn-tbt { stroke: var(--orange-texte); }
.brn-lib { font-family: var(--corps); font-size: 10.5px; fill: var(--texte); }
.fiche-bornier-detail summary { cursor: pointer; font-size: 0.9rem; color: var(--orange-texte); margin: 0.2rem 0 0.6rem; }

/* Bornier (inc/generateur/commun.php, bornier_svg) : socle 1-15 / 21-35, bloc 41-45 */
.fiche-bornier-dessin { margin: 0 0 1.6rem; }
.fiche-bornier-dessin figcaption { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; margin-bottom: 0.2rem; }
.bornier-svg { display: block; width: auto; max-width: 100%; min-width: 40rem; height: auto; }   /* echelle 1:1, reduite si trop large */
.brn-corps { fill: var(--fond-alt); stroke: var(--texte); stroke-width: 1.5; }
.brn-nom { font-family: var(--titre); font-weight: 700; font-size: 17px; fill: var(--texte-pale); opacity: 0.35; }
.brn-num { font-family: var(--corps); font-size: 12.5px; font-weight: 700; fill: var(--texte); }
.brn-rep { font-family: var(--corps); font-size: 9.5px; fill: var(--texte-doux); }
.brn-libre { fill: var(--ligne-forte); font-weight: 400; }
.brn-fil { stroke: var(--texte); stroke-width: 1.5; }
.brn-tbt { stroke: var(--orange-texte); }
.brn-lib { font-family: var(--corps); font-size: 12.5px; fill: var(--texte); }
.fiche-modbus { margin: 0 0 0.8rem; }
.fiche-modbus summary { cursor: pointer; font-family: var(--titre); font-weight: 700; font-size: 1.05rem; padding: 0.3rem 0; }
.fiche-modbus .fiche-table th small { font-weight: 400; color: var(--texte-pale); }
.fiche-bornier-detail summary { cursor: pointer; font-size: 0.9rem; color: var(--orange-texte); margin: 0.2rem 0 0.6rem; }
.sch-txt { font-size: 11px; fill: var(--texte-doux); }
.sch-txt-fort { font-size: 12.5px; font-weight: 700; }
.sch-mini { font-size: 9.5px; }
.sch-repere { font-family: var(--corps); font-size: 8px; font-weight: 600; fill: var(--texte); text-anchor: middle; }

@media (max-width: 1080px) {
  .generateur { grid-template-columns: minmax(0, 1fr); }
  .generateur-saisie { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .generateur-saisie .form-grille,
  .generateur-saisie .form-grille-3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

@media print {
  .generateur-saisie, .bandeau-page, .fiche-lien, .fiche-app-actions { display: none !important; }
  .page-corps { padding: 0; }
  .generateur { display: block; width: 100%; }
  .fiche-app { border: 0; padding: 0; }
  .fiche-section { break-after: avoid; }
  .fiche-table, .schema-principe, .fiche-bornier, .fiche-bornier-dessin { break-inside: avoid; }
  .bornier-svg { min-width: 0; }
  .fiche-bornier-detail { display: none; }
  .schema-principe svg { min-width: 0; }
  .fiche-table thead th { background: #eee; }
  body { padding-top: 0; }
}