/* ============================================================
   RF Thermographie : design system v3 (refonte claire)
   Blanc éditorial, hairlines, accent bleu ; imagerie thermique conservée.
   ============================================================ */

/* Polices auto-hébergées (variables, sous-ensemble latin) : pas d'appel à un tiers */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin.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;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #FFFFFF;
  --bg-alt: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #F1F5FA;
  --line: #E4E9F0;
  --line-2: #D2DBE6;
  --txt: #0B1220;
  --mut: #5B6878;
  --mut-2: #8A96A5;
  --acc: #203DA4;
  --acc-hi: #16296F;
  --acc-soft: #EEF1FA;
  --on-acc: #FFFFFF;
  --ok: #067A5B;
  --warn: #B45309;
  --hot: #C42B21;
  --font-title: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --r: 10px;
  --r-sm: 6px;
  --sh: 0 1px 2px rgba(11, 18, 32, 0.04), 0 10px 30px -16px rgba(11, 18, 32, 0.16);
  --sh-hi: 0 1px 2px rgba(11, 18, 32, 0.05), 0 18px 44px -18px rgba(11, 18, 32, 0.22);

  /* ---- Signature spectrale (v4) : colormap thermique relevee sur l'anneau du logo ----
     Un seul point de verite. La couleur ne parait que la ou elle MESURE (echelle,
     amplitude) ou CLASSE (categorie de service), jamais en decoration. Le bleu marque
     --acc reste 100% de l'UI. Rampe froid -> chaud, identique a l'anneau du badge RF. */
  --thermal:      linear-gradient(to top, #5B4BD6, #2F6BF0, #45C6E8, #8FC63F, #F0D64E, #E58E37, #D53E2B);
  --thermal-h:    linear-gradient(90deg,  #5B4BD6, #2F6BF0, #45C6E8, #8FC63F, #F0D64E, #E58E37, #D53E2B);
  --thermal-conic: conic-gradient(from -90deg, #5B4BD6, #2F6BF0, #45C6E8, #8FC63F, #F0D64E, #E58E37, #D53E2B, #9A5BE9, #5B4BD6);
  --screen: #0B1220;                 /* chassis sombre facon ecran de camera */
  --t-cold: #2F87D6;                 /* ultrasons HT : froid (peu de chaleur emise) */
  --t-mid:  #5FA82E;                 /* disconnecteurs : median (eau) */
  --t-hot:  #DE5A2C;                 /* thermographie : chaud */
  /* Degrade des boutons : bleu marque -> indigo -> violet (extremite froide du spectre) */
  --btn-grad:    linear-gradient(120deg, #2F6BF0 0%, #4B43D4 52%, #6E4BE0 100%);
  --btn-grad-hi: linear-gradient(120deg, #2456D6 0%, #3B34C0 52%, #5B3CD2 100%);
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
body { color: var(--txt); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--acc); color: var(--on-acc); }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-hi); }
img, svg { max-width: 100%; }
input, textarea, select, button { font-family: var(--font-body); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Lien d'évitement : invisible à la souris, il apparaît à la première tabulation
   pour sauter la navigation (clavier / lecteurs d'écran). */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--acc);
  color: var(--on-acc);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  transition: top .18s ease;
}
.skip:focus { top: 12px; color: var(--on-acc); }

/* ---------- Typo utilitaires ---------- */
/* Label de section : pas de filet décoratif ni de puce, juste du texte calme */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut-2);
  margin: 0;
}
.kicker.on-acc { color: var(--acc); }

.h1 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.038em; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.0; margin: 0; }
.h2 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.04; margin: 0; }
.h3 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.018em; font-size: clamp(19px, 2vw, 25px); line-height: 1.22; margin: 0; }
.lead { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; color: var(--mut); letter-spacing: -0.006em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--mut); }

/* ---------- Icônes ----------
   Filaires, monochromes, sans pastille ni fond : elles héritent de la couleur
   du texte via currentColor. Tracé 1.5px pour rester dans le même poids que
   les hairlines du reste du design. */
.ico {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-sm { width: 17px; height: 17px; }
/* Icônes métier des cartes services. Le tracé se remet à l'échelle avec le SVG :
   on l'affine pour garder le même poids visuel qu'ailleurs malgré la taille. */
.ico-lg { width: 44px; height: 44px; stroke-width: 1.25; }

/* Numéros de section (signature) */
.num {
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1;
  color: var(--acc);
  letter-spacing: -0.02em;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-grad);
  color: var(--on-acc);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--btn-grad-hi); color: var(--on-acc); box-shadow: 0 12px 26px -10px rgba(79, 63, 208, 0.6); }
.btn:active { transform: translateY(1px); }
.btn.sm { font-size: 14px; padding: 10px 18px; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--acc); color: var(--txt); background: var(--acc-soft); }
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--acc);
  color: var(--acc);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  transition: background .18s ease, color .18s ease;
}
.btn-line:hover { background: var(--acc); color: var(--on-acc); }

/* ---------- Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
/* Décollement au défilement : le header se détache du contenu (classe posée par main.js) */
.hdr.is-stuck { background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(11, 18, 32, 0.5); }
.hdr-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--txt); }
.brand:hover { color: var(--txt); }
.brand-logo { height: 36px; width: auto; flex: none; display: block; }
.ftr .brand-logo { height: 30px; }
.brand-txt { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.01em; font-size: 15px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-size: 14px; color: var(--mut); transition: color .15s ease; }
.nav a:hover { color: var(--txt); }
.hdr-cta { display: flex; align-items: center; gap: 14px; }
.hdr-tel { display: flex; align-items: center; gap: 8px; color: var(--txt); font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.hdr-tel:hover { color: var(--acc); }
.nav-toggle { display: none; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; color: var(--txt); flex: none; transition: border-color .18s ease; }
.nav-toggle:hover { border-color: var(--acc); }

/* ---------- Sections ---------- */
.sec { border-bottom: 1px solid var(--line); }
.sec-pad { padding-top: clamp(76px, 10vw, 150px); padding-bottom: clamp(76px, 10vw, 150px); }
.sec-alt { background: var(--bg-alt); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 780px; }
.sec-head .kicker { margin-bottom: 22px; }
.sec-head p { margin: 22px 0 0; }

/* ---------- Hero ---------- */
.hero-grid { display: flex; flex-wrap: wrap; gap: clamp(40px, 5.5vw, 80px); align-items: center; padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.hero-copy { flex: 1.15 1 520px; min-width: 300px; }
.hero-visual { flex: 1 1 340px; min-width: 300px; max-width: 460px; }
.hero-checks { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; }
.hero-checks li { font-size: 15px; color: var(--txt); padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.45; display: flex; align-items: flex-start; gap: 11px; }
.hero-checks li:last-child { border-bottom: 1px solid var(--line); }
.hero-checks .ico { color: var(--acc); margin-top: 2px; }

/* ---------- Cartes services (bloc XXL sous le hero) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.svc-card {
  background: var(--surface);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--txt);
  position: relative;
  transition: background .2s ease;
}
.svc-card:hover { background: var(--surface-2); color: var(--txt); }
/* Ligne de tête : icône métier à gauche, numéro en repère discret à droite */
.svc-top { display: flex; align-items: center; justify-content: space-between; color: var(--acc); margin-bottom: 10px; }
.svc-card .num { font-size: 13px; color: var(--mut-2); letter-spacing: 0.14em; }
.svc-card h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.026em; font-size: clamp(22px, 2.3vw, 29px); line-height: 1.1; margin: 0; }
.svc-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mut); }
/* Listes séparées par des filets plutôt que par des puces */
.svc-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.svc-card li { font-size: 14px; color: var(--txt); padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.svc-more { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--acc); display: inline-flex; align-items: center; gap: 7px; }
.svc-more .ar { transition: transform .22s ease; display: inline-block; }
.svc-card:hover .svc-more { color: var(--acc-hi); }
.svc-card:hover .svc-more .ar { transform: translateX(4px); }

/* ---------- Grille de périmètre (pages service) ---------- */
.scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.scope-item { background: var(--surface); padding: 18px 20px; display: flex; align-items: center; font-size: 14.5px; color: var(--txt); transition: background .18s ease; }
.scope-item:hover { background: var(--surface-2); }

/* ---------- Blocs service développés (index) ---------- */
.dev { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dev > .dev-txt { flex: 1 1 460px; min-width: 300px; }
.dev > .dev-fig { flex: 1 1 380px; min-width: 300px; }
.dev.flip { flex-direction: row-reverse; }
.dev-txt .kicker { margin-bottom: 16px; }
.dev-txt .h2 { margin-bottom: 18px; }
.dev-txt p { color: var(--mut); margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; }
.dev-txt p strong, .dev-txt p b { color: var(--txt); font-weight: 600; }
.dev-facts { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; }
.dev-facts li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--txt); line-height: 1.5; }
.dev-facts li:last-child { border-bottom: 1px solid var(--line); }

/* Encadré informatif */
.note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt);
}

/* ---------- Figures techniques ---------- */
.fig { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh); }
.fig-label { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; background: rgba(11, 18, 32, 0.62); padding: 4px 8px; border-radius: 3px; pointer-events: none; z-index: 3; }
.fig-hint { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--mut-2); line-height: 1.5; }
.fig-grid-bg { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 36px); }

/* Placeholder photo (avant réception des photos client) */
.img-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: var(--surface-2); background-image: repeating-linear-gradient(0deg, rgba(11,18,32,0.04) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(11,18,32,0.04) 0 1px, transparent 1px 32px); }
.img-slot span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mut-2); }

/* ---------- Étapes méthode ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { background: var(--surface); padding: clamp(24px, 2.8vw, 38px); }
.step-top { display: flex; align-items: center; justify-content: space-between; color: var(--acc); margin-bottom: 18px; }
.step .num { font-size: 13px; letter-spacing: 0.14em; color: var(--mut-2); }
.step h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.02em; font-size: 21px; margin: 0 0 10px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mut); }

/* ---------- Tags / badges ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--font-mono); font-size: 12.5px; color: var(--txt); background: var(--surface); border: 1px solid var(--line-2); border-radius: 100px; padding: 8px 14px; }
.pill { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 10px; padding: 2px 7px; border-radius: 3px; color: #FFFFFF; }
.pill.p1 { background: var(--hot); }
.pill.p2 { background: var(--warn); }
.pill.p3 { background: var(--ok); }

/* ---------- Tableaux (grids ARIA) ---------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.tbl-row { display: grid; border-bottom: 1px solid var(--line); }
.tbl-row:last-child { border-bottom: none; }
.tbl-head { background: var(--surface-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.tbl-cell { padding: 13px 14px; font-size: 14px; }
.tbl-cell.mono { font-family: var(--font-mono); font-size: 12px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: transparent; border: none; cursor: pointer; padding: 20px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; text-align: left; color: var(--txt); }
.faq-q:hover .faq-q-txt { color: var(--acc); }
.faq-q-txt { font-family: var(--font-title); font-weight: 600; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.4; transition: color .15s ease; }
.faq-sym { font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--acc); flex: none; width: 24px; text-align: center; }
.faq-a { padding: 0 0 24px; max-width: 780px; }
.faq-a p { font-size: 16px; line-height: 1.65; color: var(--mut); margin: 0; }
.faq-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; margin-bottom: 8px; }

/* ---------- Formulaire ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-hi); }
.fld-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.fld {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  color: var(--txt);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.fld:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none; }
.fld::placeholder { color: var(--mut-2); }
select.fld { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6878' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.form-col { display: flex; flex-direction: column; gap: 6px; }
.form-row .form-col { flex: 1 1 160px; }
.form-row .form-col.s { flex: 1 1 130px; }

/* ---------- Bande réassurance ---------- */
.assur { display: flex; flex-wrap: wrap; }
.assur > div { flex: 1 1 220px; padding: 20px 24px; border-left: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 14px; }
.assur > div:last-child { border-right: 1px solid var(--line); }
.assur .ico { color: var(--acc); }

/* ---------- Section devis (panneau bleu clair) ---------- */
/* Panneau de devis : thermogramme réel en fond, très en retrait.
   Le dégradé de masque le fait disparaître à gauche, là où se trouve le texte :
   la lisibilité ne dépend donc pas seulement de l'opacité. */
.devis-sec { background: var(--acc-soft); position: relative; overflow: hidden; }
.devis-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/thermogramme-1280.webp');
  /* Zoom + recentrage : écarte du cadre l'échelle °C (bord droit) et l'incrustation
     Image/Max/Min (coin haut gauche) de la caméra, qui ressortaient comme des taches.
     On ne garde que la texture thermique. */
  background-size: 165%;
  background-position: 32% 52%;
  background-repeat: no-repeat;
  opacity: 0.14;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.9) 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.9) 100%);
}
.devis-sec > * { position: relative; }
/* Sans masque (navigateurs anciens), on baisse encore l'opacité par sécurité. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .devis-sec::before { opacity: 0.07; }
}
@media (max-width: 759px) {
  /* En colonne, le texte passe sur toute la largeur : le masque ne protège plus rien. */
  .devis-sec::before { opacity: 0.08; }
}

/* ---------- Footer ---------- */
.ftr { background: var(--bg-alt); border-top: 1px solid var(--line); }
.ftr-grid { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); padding-top: clamp(48px, 6vw, 72px); padding-bottom: 36px; }
.ftr-col { flex: 1 1 220px; min-width: 200px; }
.ftr-col.w { flex: 1.4 1 260px; }
.ftr-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.flink { color: var(--mut); transition: color .15s ease; }
.flink:hover { color: var(--acc); }
.ftr-base { border-top: 1px solid var(--line); }
.ftr-base-in { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--mut); }

/* ---------- Sticky CTA mobile ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  gap: 10px;
}
.sticky-cta .btn { flex: 1; padding: 13px; font-size: 15px; }
.sticky-cta .tel { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--acc); }

/* ---------- Reveal au scroll (si JS présent) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Pages légales ---------- */
.legal-body { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px); }
.legal-body h1 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.022em; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; margin: 0 0 28px; color: var(--txt); }
.legal-body h2 { font-family: var(--font-title); font-weight: 600; font-size: 20px; margin: 36px 0 12px; color: var(--txt); }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.7; color: var(--mut); }
.legal-body .ph { color: var(--txt); font-family: var(--font-mono); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--pad) 14px; box-shadow: var(--sh); }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--txt); }
  .nav a:last-child { border-bottom: none; }
}
@media (max-width: 920px) {
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 759px) {
  .hdr-tel { display: none; }
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 74px; }
  .brand-txt { font-size: 13px; }
  .brand-logo { height: 30px; }
  .hdr .btn.sm { font-size: 13px; padding: 9px 14px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  /* La sticky-cta duplique déjà le CTA : on évite qu'il déborde sur le logo */
  .hdr .btn.sm { display: none; }
}

/* ============================================================
   v4 — Signature spectrale : la couleur est une temperature
   Le spectre ne parait que la ou il mesure ou classe, jamais en
   decoration. Elements purement visuels en aria-hidden ; le sens
   ne repose jamais sur la seule couleur (toujours double d'un
   libelle). Motion : transform/opacity uniquement, zero boucle
   infinie decorative, tout neutralise en prefers-reduced-motion.
   ============================================================ */

/* ---------- Barre de progression de lecture (rampe thermique, tout en haut) ---------- */
.scan-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  background: var(--thermal-h);
  transform: scaleX(0); transform-origin: left;
  z-index: 65; pointer-events: none;
}

/* ---------- Lignes de scan aux charnieres editoriales ----------
   Un balayage unique a l'entree en vue (classe .is-scanned posee par
   l'IntersectionObserver de main.js), puis un filet fin qui persiste. */
.scanline { position: relative; height: 2px; margin: 0; border: 0; }
.scanline::before { content: ''; position: absolute; inset: 0; background: var(--line); }
.scanline::after {
  content: ''; position: absolute; inset: 0; background: var(--thermal-h);
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 6%, #000 12%, #0000 20%);
          mask-image: linear-gradient(90deg, #0000, #000 6%, #000 12%, #0000 20%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 120% 0; mask-position: 120% 0;
}
.scanline.is-scanned::after { animation: scanline-sweep 900ms ease-out forwards; }
@keyframes scanline-sweep {
  0%   { opacity: 1;   -webkit-mask-position: 120% 0; mask-position: 120% 0; }
  100% { opacity: .32; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Hero : ecran de camera + echelle thermique vivante + anneau du logo ---------- */
.hero-visual { position: relative; max-width: 500px; }
.hero-stage { position: relative; display: flex; align-items: stretch; gap: 12px; }

/* Anneau du badge RF recree en CSS : NET (mask radial) et STATIQUE (pas de roue animee). */
.hero-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--ring-rot, 0deg));
  transition: transform .12s linear;   /* le cadran suit le balayage (main.js) */
  width: min(112%, 520px); aspect-ratio: 1; border-radius: 50%;
  background: var(--thermal-conic);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
  opacity: .8; z-index: 0; pointer-events: none;
}
.hero-screen {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
  padding: 10px; border-radius: 14px; background: var(--screen);
  box-shadow: 0 26px 60px -30px rgba(11, 18, 32, 0.62);
}
.hero-screen .fig { background: #05070d; border-color: rgba(255, 255, 255, 0.10); box-shadow: none; border-radius: 8px; }

/* Rail d'echelle : colormap verticale, curseur pilote par le balayage (main.js set()) */
.hero-scale {
  position: relative; z-index: 1; flex: 0 0 auto; width: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0;
}
.hero-scale-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--mut-2); writing-mode: vertical-rl; }
.hero-scale-lbl.top { transform: rotate(180deg); }
.hero-scale-bar { position: relative; flex: 1 1 auto; width: 6px; border-radius: 3px; background: var(--thermal); overflow: visible; }
/* Graduations de l'echelle : fines marques regulieres facon instrument */
.hero-scale-bar::before {
  content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px, transparent 14.2%);
}
.hero-scale-cursor {
  position: absolute; left: 50%; top: 0; width: 16px; height: 2px;
  background: #fff; border-radius: 1px; transform: translate(-50%, 0);
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.30);
  transition: top .05s linear;
}
.hero-scale-arrow { font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--mut-2); }

/* Liseré spectral d'acquisition sous la ligne de balayage (net, sans glow) */
.hero-scanbar {
  height: 1px; margin-top: 1px; background: var(--thermal-h); opacity: .9;
  -webkit-mask: linear-gradient(90deg, #0000, #000 20%, #000 80%, #0000);
          mask: linear-gradient(90deg, #0000, #000 20%, #000 80%, #0000);
}

/* ---------- Cartes services : index de temperature par categorie ----------
   Chaque carte = une bande de la colormap selon la physique du service.
   Les 3 bandes lues ensemble forment la legende thermique du metier.
   La couleur double toujours la position et le libelle, jamais seule. */
.svc-card { --band-lit: var(--acc); }
.svc-card[data-temp="hot"]  { --band-lit: var(--t-hot); }
.svc-card[data-temp="cold"] { --band-lit: var(--t-cold); }
.svc-card[data-temp="mid"]  { --band-lit: var(--t-mid); }
.svc-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--band-lit); opacity: .6; transition: opacity .3s ease;
}
.svc-card:hover::after, .svc-card:focus-within::after { opacity: 1; }

/* ---------- Tags FAQ : rappel de la couleur de categorie (classe posee par main.js) ---------- */
.faq-tag.cat-hot  { box-shadow: inset 2px 0 0 var(--t-hot);  padding-left: 9px; }
.faq-tag.cat-cold { box-shadow: inset 2px 0 0 var(--t-cold); padding-left: 9px; }
.faq-tag.cat-mid  { box-shadow: inset 2px 0 0 var(--t-mid);  padding-left: 9px; }

/* ---------- Methode : progression thermique sur les 4 etapes ----------
   La sequence (Devis -> Rapport) est encodee par une rampe froid -> chaud :
   la couleur dit l'ordre, elle ne decore pas. */
.step { position: relative; }
.step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; opacity: .9; }
.steps .step:nth-child(1)::before { background: #5B4BD6; }
.steps .step:nth-child(2)::before { background: #2F87D6; }
.steps .step:nth-child(3)::before { background: #E58E37; }
.steps .step:nth-child(4)::before { background: #D53E2B; }

/* ---------- Footer : filet de fermeture, echo de la barre de lecture ---------- */
.ftr { position: relative; }
.ftr::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--thermal-h); opacity: .65;
}

/* ---------- Hero de page service : identite de temperature du metier ---------- */
.svc-hero { position: relative; }
.svc-hero::before {
  content: ''; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin-bottom: 20px; background: var(--acc);
}
.svc-hero.t-hot::before  { background: var(--t-hot); }
.svc-hero.t-cold::before { background: var(--t-cold); }
.svc-hero.t-mid::before  { background: var(--t-mid); }

/* Legende du hero au-dessus de l'anneau (lisibilite) */
.hero-visual .fig-hint { position: relative; z-index: 2; margin-top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .hero-ring { display: none; }   /* evite des arcs coupes au bord de l'ecran */
}
@media (prefers-reduced-motion: reduce) {
  .scanline::after { opacity: .3; -webkit-mask-image: none; mask-image: none; animation: none; }
  .hero-scale-cursor { transition: none; }
  .hero-ring { transition: none; }
}

/* ============================================================
   v5 — Plus de couleur, plus simple, plus beau
   On concentre la couleur dans quelques gestes GRANDS et lumineux,
   et on retire les petits filets disperses. Le degrade des boutons
   (deja pose plus haut) apporte de la couleur sur chaque CTA.
   ============================================================ */

/* Anneau du hero : halo spectral doux qui le rend lumineux (grand geste de beaute) */
.hero-ring::before {
  content: ''; position: absolute; inset: -26px; border-radius: 50%;
  background: var(--thermal-conic);
  filter: blur(48px); opacity: .30; z-index: -1;
}

/* Cartes services : arete de categorie plus franche + icone teintee a sa temperature */
.svc-card::after { height: 4px; opacity: .92; }
.svc-card[data-temp="hot"]  .svc-top { color: #D64A22; }
.svc-card[data-temp="cold"] .svc-top { color: #2F6BF0; }
.svc-card[data-temp="mid"]  .svc-top { color: #4E8C2A; }

/* Simplification : on retire les petits filets disperses (scanlines, filet footer, ticks FAQ) */
.scanline { display: none; }
.ftr::before { display: none; }
.faq-tag.cat-hot, .faq-tag.cat-cold, .faq-tag.cat-mid { box-shadow: none; padding-left: 7px; }

/* ==== v6 — Reassurance normative, benefices, affordance du balayage ====
   1. Bande de referentiels sous le hero (cartouches typographiques, pas de logos :
      APSAD, Q19 et NF sont des marques deposees, reservees aux titulaires).
   2. Cartes de benefices, qui remplacent le tableau comparatif (illisible en 640px mini).
   3. Poignee du balayage visible/thermogramme : pastille 44px + pulsation d'amorce.
   ============================================================ */

/* ---------- 1. Bande de referentiels ---------- */
/* Sceaux dessines pour ce site. Aucun logo officiel : APSAD / Q19 / NF sont des
   marques deposees, reservees aux titulaires certifies. L'embleme est maison,
   le libelle dit « selon le referentiel », jamais « certifie ». */
.refs-sec { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.refs-sec .wrap { padding-top: clamp(30px, 3.6vw, 44px); padding-bottom: clamp(30px, 3.6vw, 44px); }
.refs-lead {
  margin: 0 0 20px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut);
}
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line);
        grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ref { background: var(--surface); padding: clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
       display: flex; flex-direction: column; align-items: flex-start; }

/* --- Le sceau --- */
.ref-seal { width: clamp(48px, 4vw, 56px); height: clamp(48px, 4vw, 56px); flex: none; margin-bottom: 14px; color: var(--acc); overflow: visible; }
.ref-seal .sl-disc { fill: currentColor; fill-opacity: 0.07; stroke: none; }
.ref-seal .sl-ring { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: 0.5; }
.ref-seal .sl-tick { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: 0.32; stroke-linecap: butt; }
.ref-seal .sl-ico  { fill: none; stroke: currentColor; stroke-width: 1.6;
                     stroke-linecap: round; stroke-linejoin: round; }

/* --- Le logo APSAD dans le hero ---
   Il est posé au-dessus des trois preuves, séparé par un filet vertical : le logo
   annonce, la ligne de texte cadre (« selon le référentiel »). Les deux ne se
   séparent pas — un logo seul se lirait comme un badge de certification. */
.hero-ref { display: flex; align-items: center; gap: 16px; margin: 30px 0 0;
            padding: 0 0 0 0; max-width: 480px; }
.hero-ref img { display: block; width: auto; height: 36px; flex: none; }
.hero-ref span { font-size: 12.5px; line-height: 1.5; color: var(--mut);
                 padding-left: 16px; border-left: 1px solid var(--line-2); }
.hero-ref b { color: var(--txt); font-weight: 600; }
@media (max-width: 560px) {
  .hero-ref { gap: 12px; }
  .hero-ref img { height: 30px; }
  .hero-ref span { font-size: 11.5px; padding-left: 12px; }
}

/* --- Le logo APSAD au fil du texte (page Q19) --- */
.ref-inline { display: flex; align-items: center; gap: 14px; margin: 18px 0 0;
              padding: 12px 14px; border: 1px solid var(--line);
              border-radius: var(--r-sm); background: var(--surface); }
.ref-inline img { display: block; width: auto; height: 28px; flex: none; }
.ref-inline span { font-size: 11px; line-height: 1.55; color: var(--mut); }
.ref-inline b { color: var(--txt); font-weight: 600; }
.ref-inline-txt { padding: 10px 14px; }
@media (max-width: 480px) {
  .ref-inline { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Le logo APSAD ---------------------------------------------------------
   Vrai logo du CNPP, posé en usage nominatif (il désigne le référentiel D19),
   jamais comme un badge de certification. Il occupe la même hauteur de bloc que
   les sceaux voisins pour que la rangée reste alignée ; sa largeur est libre. */
.ref-logo { display: flex; align-items: center; height: clamp(48px, 4vw, 56px);
            margin-bottom: 14px; }
.ref-logo img { display: block; width: auto; height: clamp(26px, 2.2vw, 30px); }

/* Mention de marque : elle est ce qui rend le logo posable, elle ne se retire pas. */
.refs-note { margin: 14px 0 0; font-size: 11px; line-height: 1.55; color: var(--mut); }
.refs-note b { color: var(--txt); font-weight: 600; }

.ref-code {
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.02em; color: var(--txt); line-height: 1.15;
}
.ref-src { display: block; margin-top: 5px; font-size: 9.5px; font-weight: 400;
           letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.ref-txt { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* Rappel de la colormap : la bande relie les referentiels aux 3 metiers.
   Le sceau prend la meme couleur que le filet, l'ensemble se lit d'un bloc. */
.ref[data-temp="hot"]  { box-shadow: inset 0 3px 0 var(--t-hot); }
.ref[data-temp="cold"] { box-shadow: inset 0 3px 0 var(--t-cold); }
.ref[data-temp="mid"]  { box-shadow: inset 0 3px 0 var(--t-mid); }
.ref[data-temp="all"]  { box-shadow: inset 0 3px 0 var(--acc); }
/* Seul le sceau prend la couleur du metier. Le libelle reste en --acc : les
   teintes de la colormap (#DE5A2C 3,6:1 / #5FA82E 2,9:1) echouent au AA sur
   du 9,5px, --acc donne 9,9:1. */
.ref[data-temp="hot"]  .ref-seal { color: var(--t-hot); }
.ref[data-temp="cold"] .ref-seal { color: var(--t-cold); }
.ref[data-temp="mid"]  .ref-seal { color: var(--t-mid); }

@media (max-width: 900px) { .refs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .refs { grid-template-columns: 1fr; }
  .ref.has-logo { display: flex; flex-direction: column; align-items: flex-start; }
  .ref.has-logo .ref-logo { height: auto; margin-bottom: 12px; }
  /* En colonne unique le sceau passe a gauche du code : moins de hauteur a faire defiler. */
  .ref { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; }
  .ref-seal { margin-bottom: 0; grid-row: span 2; }
  .ref-txt  { grid-column: 1 / -1; margin-top: 12px; }
}

/* ---------- 2. Cartes de benefices ---------- */
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
            border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ben { background: var(--surface); padding: clamp(24px, 2.8vw, 36px); display: flex; flex-direction: column; }
/* Icones en accent uni : ici la couleur ne code aucune physique (ce sont des
   engagements, pas des temperatures). La colormap reste reservee aux 3 metiers. */
.ben .ico { width: 34px; height: 34px; stroke-width: 1.35; color: var(--acc); margin-bottom: 20px; }
.ben h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(18px, 2vw, 21px); line-height: 1.25; margin: 0 0 10px; color: var(--txt); }
.ben p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mut); }
/* Le pied se cale en bas de carte pour que les 3 filets s'alignent malgre des
   paragraphes de longueurs differentes. `.ben p { margin: 0 }` l'emportant en
   specificite sur `.ben-vs`, on selectionne avec `.ben .ben-vs`. Le margin-bottom
   du paragraphe garantit un ecart minimum quand la carte est pleine. */
.ben > p:not(.ben-vs) { margin-bottom: 24px; }
.ben .ben-vs { margin: 0 0 0; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
          display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.5; color: var(--mut); }
/* --mut-2 (#8A96A5) plafonne a 3,0:1 sur blanc : insuffisant pour du texte lu (AA = 4,5:1).
   --mut (#5B6878) donne 5,6:1. */
.ben-vs b { flex: none; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
@media (max-width: 860px) { .ben-grid { grid-template-columns: 1fr; } .ben-vs { margin-top: 18px; } }

/* ---------- 3. Balayage du hero : affordance ---------- */
.sweep-handle { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.sweep-line { height: 2px; background: linear-gradient(90deg, transparent, #FFFFFF 22%, #FFFFFF 78%, transparent); }
/* Zone de saisie de 44px (cible tactile minimale), centree sur la ligne */
.sweep-grip { position: absolute; left: 0; right: 0; top: -22px; height: 44px; pointer-events: auto;
              touch-action: none; cursor: ns-resize; display: flex; align-items: center; justify-content: center; }
.sweep-knob {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #FFFFFF; color: var(--acc);
  box-shadow: 0 2px 10px rgba(5, 7, 13, 0.45), 0 0 0 1px rgba(11, 18, 32, 0.12);
}
.sweep-knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Amorce : halo qui respire tant que le visiteur n'a pas touche le curseur.
   Demarre apres le balayage automatique (4,4 s) pour ne pas s'y superposer. */
.sweep-knob::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
}
.sweep-idle .sweep-knob::before { animation: sweep-ping 2.1s ease-out 4.4s infinite; }
@keyframes sweep-ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.sweep-hint {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 6px; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: #FFFFFF;
  background: rgba(11, 18, 32, 0.68); padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  transition: opacity .45s ease, transform .45s ease;
}
.sweep-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Une fois le curseur manipule, l'invite a fait son travail : elle s'efface. */
#hero-sweep:not(.sweep-idle) .sweep-hint { opacity: 0; transform: translateY(6px); }
/* Etiquettes de calque : celle du haut vit DANS le calque thermique, donc elle est
   revelee par le balayage lui-meme — le visiteur comprend ce qu'il compare. */
/* Les etiquettes vont a DROITE et sous l'incrustation de la camera (Image/Max/Min a
   gauche, temperature du point chaud a droite) : elles ne doivent rien recouvrir de
   la mesure d'origine. L'invite occupe le coin bas gauche, libre. */
.sweep-tag {
  position: absolute; right: 12px; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFFFFF; background: rgba(11, 18, 32, 0.62); padding: 4px 8px; border-radius: 3px;
}
.sweep-tag-top { top: 46px; }
.sweep-tag-bot { bottom: 12px; }

/* Sous 700 px, l'invite et l'etiquette « Image visible » se chevauchaient :
   l'invite passe au-dessus. Elle disparait de toute facon au premier geste. */
@media (max-width: 700px) { .sweep-hint { bottom: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .sweep-idle .sweep-knob::before { animation: none; }
  .sweep-hint { transition: none; }
}

/* ---------- 4. Correctif : l'anneau du hero elargissait le document ----------
   Constate le 27/08/2026, deja present en production : .hero-ring depasse le wrap
   de ~36 px a droite, le document sort a 1377 px pour un viewport de 1280 px.
   Un debordement horizontal fait rapetisser toute la page sur mobile. On coupe au
   bord de la fenetre (clip, pas hidden : pas de conteneur de defilement cree, le
   depassement vertical de l'anneau reste visible). */
#top { overflow-x: clip; }
@supports not (overflow-x: clip) { .hero-ring { max-width: calc(100vw - 120px); } }

/* >>> signature Odratta — ne pas éditer ici, source : ~/.odratta/signature/signature.css */
a.odratta-signature{display:inline-flex;align-items:baseline;gap:.4em;font:400 .8125rem/1.2 inherit;font-family:inherit;color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;padding:.45em 0;white-space:nowrap}
a.odratta-signature svg{height:.8em;width:auto;flex:none}
a.odratta-signature:hover,a.odratta-signature:focus-visible{text-decoration:underline;text-underline-offset:.3em}
a.odratta-signature:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px;text-decoration:none}
/* <<< fin signature Odratta */

/* ---------- References clients (21/10/2026) ----------
   Mur de logos sous la bande des referentiels, en couleurs d'origine : elles
   sont presque toutes bleues et s'accordent au site (en gris, la rangee
   paraissait eteinte). Hauteurs reglees logo par logo : un carre (AXA) ou une
   ellipse (Rougnon) a la meme hauteur qu'un logotype en ligne paraitrait enorme. */
.clients-sec { background: var(--bg); border-bottom: 1px solid var(--line); }
.clients-sec .wrap { padding-top: clamp(30px, 3.6vw, 44px); padding-bottom: clamp(30px, 3.6vw, 44px); }
.clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line);
           grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.client { background: var(--surface); display: flex; align-items: center; justify-content: center;
          min-height: clamp(84px, 8vw, 104px); padding: 14px 16px; }
.client img { display: block; width: auto; max-width: 100%; height: 30px; }
.client img.cl-engie   { height: 30px; }
.client img.cl-axa     { height: 44px; }
.client img.cl-rougnon { height: 62px; }
.client img.cl-novotel { height: 34px; }
.client img.cl-kp1     { height: 32px; }
.client-txt span { font-family: var(--font-title); font-weight: 700; font-size: 13px; line-height: 1.25;
                   letter-spacing: 0.01em; text-align: center; color: var(--txt); }
@media (max-width: 900px) { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) {
  .clients { grid-template-columns: repeat(2, 1fr); }
  .client { min-height: 78px; padding: 12px; }
  .client img.cl-rougnon { height: 54px; }
}