/* =========================================================
   Diec — Design System
   Site sur-mesure diagnostics immobiliers (For Retail Consulting)
   Pas de framework, pas de web font externe = PageSpeed > 90
   ========================================================= */

:root {
  /* Palette de marque Diec — graphite & lime (identité 2026) */
  --navy:        #F2F3EF;   /* encre forte : titres, texte appuyé */
  --teal:        #B6FF2E;   /* accent principal — lime */
  --teal-dark:   #B6FF2E;   /* liens, libellés d'accent */
  --teal-light:  rgba(182,255,46,.12);  /* fond tinté d'accent */
  --accent:      #B6FF2E;   /* CTA */
  --accent-dark: #9BDF1F;
  --ink:         #D7D9D5;   /* texte courant */
  --muted:       #9FA1A2;   /* texte secondaire */
  --line:        rgba(242,243,239,.14);  /* filets */
  --bg:          #23262F;   /* graphite — fond de page */
  --surface:     #2A2E39;   /* cartes, panneaux */
  --surface-2:   #313641;   /* survol, champs actifs */
  --bg-soft:     #262A33;   /* sections alternées */
  --bg-navy:     #1B1E26;   /* surfaces creusées : bandeau, pied de page */
  --on-accent:   #23262F;   /* texte posé sur le lime */

  /* Échelle DPE (officielle — indépendante du thème) */
  --dpe-a: #319834; --dpe-b: #33CC31; --dpe-c: #CBFC34;
  --dpe-d: #FBFE06; --dpe-e: #FBCC05; --dpe-f: #FC9935; --dpe-g: #FC0205;

  --radius:    9px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.24);
  --shadow:    0 10px 34px rgba(0,0,0,.42);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --container:  1160px;
  --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--navy); margin: 0 0 .5em; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.22rem; }
em, .italic { font-style: italic; }
p  { margin: 0 0 1rem; }
.lead { font-size: 1.22rem; line-height: 1.62; color: var(--muted); }
small { color: var(--muted); }
::selection { background: var(--accent); color: var(--on-accent); }

/* Layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: 84px 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--bg-navy); color: var(--ink); }
.section--navy h2, .section--navy h3 { color: var(--navy); }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.center .eyebrow, .mx-auto.center .eyebrow { justify-content: center; }
.section--navy .eyebrow { color: var(--accent); }
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.max-680 { max-width: 680px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 1;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-dark { background: var(--surface-2); color: var(--navy); border-color: var(--line); }
.btn-dark:hover { background: #3A404D; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-dark); }
.section--navy .btn-ghost { color: var(--navy); border-color: rgba(242,243,239,.28); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 18px 34px; font-size: 1.08rem; }

/* Header / Nav */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(35,38,47,.82);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 0; font-family: var(--display); font-weight: 600; color: var(--teal); font-size: 1.4rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand .logo-mark { width: 36px; height: 36px; flex: none; margin-right: 11px; }
.brand b { color: var(--teal); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 500; font-size: .96rem;
  padding: 9px 13px; border-radius: 10px; transition: color .15s, background .15s;
}
.nav-links > li > a::after { display: none; }
.nav-links > li > a:hover { color: var(--navy); text-decoration: none; background: rgba(182,255,46,.08); }
.nav-links > li > a:hover::after,
.nav-links > li > a.is-active::after { transform: scaleX(1); }
.nav-links > li > a.is-active { color: var(--teal-dark); font-weight: 600; }
.nav-links .caret { transition: transform .2s ease; opacity: .7; }
.has-dropdown:hover .caret { transform: rotate(180deg); }

/* Dropdown Zones */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 248px; list-style: none; margin: 0; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s ease; z-index: 60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } /* pont anti-flicker */
.dropdown li a {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 10px;
  color: var(--ink); font-size: .94rem; font-weight: 500; transition: background .12s, color .12s;
}
.dropdown li a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; opacity: .55; }
.dropdown li a:hover { background: var(--teal-light); color: var(--teal-dark); text-decoration: none; }
.dropdown .dd-all { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.dropdown .dd-all a { color: var(--accent-dark); font-weight: 650; }
.dropdown .dd-all a::before { display: none; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 11px 18px; font-size: .92rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .25s; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero { position: relative; padding: 84px 0 92px; overflow: hidden; background:
  radial-gradient(1000px 520px at 82% -10%, var(--teal-light), transparent 62%),
  radial-gradient(700px 360px at -5% 110%, rgba(182,255,46,.06), transparent 60%),
  var(--bg); }
.hero::after { /* grain papier subtil */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 { font-weight: 600; }
.hero h1 span { color: var(--teal-dark); font-weight: 500; }
.hero .lead { max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; }
.trust-row .ti { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--muted); font-weight: 550; }
.trust-row .ti svg { color: var(--teal); flex: none; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin: 0; font-size: .97rem; }
.card-icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--teal-light); color: var(--teal-dark);
  margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(182,255,46,.12);
}
.card-icon svg { width: 26px; height: 26px; }

/* Icônes SVG (Lucide-style) — remplacent les emojis */
.ico { width: 24px; height: 24px; flex: none; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-sm { width: 18px; height: 18px; }
.card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--teal-dark); font-size: .95rem; }
.card-link svg { transition: transform .2s ease; }
.card:hover .card-link svg, .card-link:hover svg { transform: translateX(4px); }
.card--tool { display: flex; flex-direction: column; }
.card--tool .btn { margin-top: auto; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px; background: var(--teal-light); color: var(--teal-dark);
}
.badge--accent { background: rgba(182,255,46,.1); color: var(--accent-dark); }

/* Hero card (mini-cards visual) */
.hero-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; }
.hero-panel .ribbon { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mini { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.mini:last-child { margin-bottom: 0; }
.mini .dot { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--teal-light); color: var(--teal-dark); }
.mini .dot svg { width: 20px; height: 20px; }
.mini b { color: var(--navy); display: block; font-size: .96rem; }
.mini small { font-size: .82rem; }

/* Steps */
.steps { counter-reset: s; }
.step { position: relative; padding-left: 64px; }
.step::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
}

/* List checks */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checks li { position: relative; padding-left: 34px; color: var(--ink); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Liste d'options cochables : meme pastille que .checks, mais pilotee par une case */
.opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.opts li { color: var(--ink); }
.opt { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.opt input {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none;
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line);
  background: transparent; cursor: pointer; transition: .15s;
}
.opt:hover input { border-color: var(--teal); }
.opt input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.opt input:checked {
  border-color: var(--teal);
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323262F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.opt-qte { display: flex; align-items: center; gap: 10px; margin: 9px 0 0 34px; }
.opt-qte label { margin: 0; font-size: .82rem; font-weight: 550; color: var(--ink); }
.opt-qte input { width: 84px; padding: 8px 10px; font-size: .9rem; }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 650; color: var(--navy); margin-bottom: 7px; font-size: .95rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.input, select.input, textarea.input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(182,255,46,.18);
}
textarea.input { min-height: 120px; resize: vertical; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }

/* Choice chips (quiz / configurator) */
.choices { display: grid; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; transition: .15s; background: var(--surface); font-weight: 550;
}
.choice:hover { border-color: var(--teal); background: var(--teal-light); }
.choice input { accent-color: var(--teal); width: 19px; height: 19px; flex: none; }
.choice.is-selected { border-color: var(--teal); background: var(--teal-light); box-shadow: 0 0 0 3px rgba(182,255,46,.16); }
/* Ligne secondaire sous l'intitule d'une case a cocher */
.choice--note { align-items: flex-start; }
.choice--note input { margin-top: 2px; }
.choice-note { display: block; margin-top: 3px; font-size: .78rem; font-weight: 450; line-height: 1.35; color: var(--muted); }
.choice .ic { width: 22px; flex: none; color: var(--teal-dark); }

/* Result panels */
.panel { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.result-total { font-size: 2.4rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.result-line { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.result-line > span:last-child { white-space: nowrap; }
.result-line:last-child { border-bottom: 0; }
.is-hidden { display: none !important; }

/* DPE label */
.dpe-scale { display: grid; gap: 6px; max-width: 360px; }
.dpe-bar { display: flex; align-items: center; color: #14161B; font-weight: 800; border-radius: 6px;
  padding: 8px 14px; position: relative; }
.dpe-bar.active { box-shadow: 0 0 0 3px var(--accent); }
.dpe-bar .g { width: 28px; }
.dpe-a{background:var(--dpe-a);color:#fff}.dpe-b{background:var(--dpe-b)}.dpe-c{background:var(--dpe-c)}
.dpe-d{background:var(--dpe-d)}.dpe-e{background:var(--dpe-e)}.dpe-f{background:var(--dpe-f);color:#fff}
.dpe-g{background:var(--dpe-g);color:#fff}
.dpe-badge { width: 74px; height: 74px; border-radius: 14px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; }

/* Autocomplete */
.autocomplete { position: relative; }
.ac-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.ac-item { padding: 11px 15px; cursor: pointer; font-size: .95rem; }
.ac-item:hover, .ac-item.active { background: var(--teal-light); }

/* Progress */
.progress { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.progress > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .3s; }

/* Stats / proof */
.stat { text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 2.9rem; font-weight: 600; color: var(--teal-dark); letter-spacing: -.02em; line-height: 1; }
.stat span { color: var(--muted); font-size: .95rem; }
/* Chiffres en display pour une touche éditoriale */
.result-total, .kpi-val { font-family: var(--display); font-weight: 600; }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; margin-bottom: 12px; background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 650; color: var(--navy); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--teal); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 16px; }

/* CTA band */
.cta-band { background: var(--bg-navy); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 54px; color: var(--ink); text-align: center; }
.cta-band h2 { color: var(--navy); }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 26px; }

/* Article — facture éditoriale */
.article { max-width: 880px; font-size: 1.06rem; }
.article h2 { margin-top: 2.4rem; }
.article p, .article li { color: var(--ink); line-height: 1.74; }
.article ul { padding-left: 1.2rem; }
.article .meta { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; font-style: italic; }
.article > .lead:first-of-type::first-letter {
  float: left; font-family: var(--display); font-weight: 600; font-size: 3.4em;
  line-height: .82; padding: 6px 12px 0 0; color: var(--teal-dark);
}
.article blockquote { margin: 2rem 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent);
  font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.4; color: var(--navy); }
.prose-img { border-radius: var(--radius); margin: 1.5rem 0; }

/* Breadcrumb */
.crumbs { font-size: .88rem; color: var(--muted); padding: 18px 0; }
.crumbs a { color: var(--muted); }

/* Footer */
.site-footer { background: var(--bg-navy); color: var(--muted); padding: 64px 0 30px; }
.site-footer h4 { color: var(--navy); font-size: .95rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; }
.site-footer a { color: var(--muted); font-size: .95rem; }
.site-footer a:hover { color: var(--accent); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }

/* Notice / alert */
.notice { padding: 14px 16px; border-radius: 12px; font-size: .93rem; border: 1px solid; }
.notice--info { background: var(--teal-light); border-color: rgba(182,255,46,.35); color: var(--accent); }
.notice--warn { background: rgba(251,204,5,.1); border-color: rgba(251,204,5,.38); color: #FBCC05; }

.muted { color: var(--muted); }
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip-link:focus { left:0; }

/* ====== Accessibilité : focus visible & motion ====== */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, .choice:focus-within {
  outline: 3px solid rgba(182,255,46,.55); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ====== Hero data-viz (mini bar chart étiquettes DPE) ====== */
.viz-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:24px; }
.viz-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.viz-bars { display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:8px; }
.viz-bars .vb { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.viz-bars .vb i { width:100%; border-radius:7px 7px 4px 4px; min-height:6px;
  animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin:bottom; }
.viz-bars .vb span { font-size:.8rem; font-weight:800; color:var(--navy); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ====== Dashboard / Observatoire ====== */
.dash { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.kpi .kpi-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; font-weight:600; margin-bottom:10px; }
.kpi .kpi-label svg { color:var(--teal); }
.kpi .kpi-val { font-size:2rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; line-height:1.1; }
.kpi .kpi-val.sm { font-size:1.5rem; }
.kpi .kpi-sub { color:var(--muted); font-size:.82rem; margin-top:4px; }

/* Bar chart DPE complet (vertical, étiquettes A-G colorées) */
.dpe-chart { display:flex; align-items:flex-end; gap:12px; height:240px; padding:14px 0 0; }
.dpe-chart .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; }
.dpe-chart .col .bar { width:100%; max-width:54px; border-radius:8px 8px 5px 5px; min-height:4px;
  display:flex; align-items:flex-start; justify-content:center; color:#fff; font-weight:800; font-size:.78rem; padding-top:6px;
  animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin:bottom; }
.dpe-chart .col .lab { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-weight:800; color:#14161B; }
.dpe-chart .col .pct { font-size:.78rem; color:var(--muted); font-weight:600; }

/* Indice de marché : un visage, pas une jauge.
   La bouche est un même tracé quadratique dans les trois états, ce qui permet
   au navigateur d'interpoler « d » et de faire glisser le sourire. */
.humeur { display:grid; place-items:center; gap:10px; }
.humeur svg { width:132px; height:132px; display:block; color:var(--muted); transition:color .5s ease; }
.humeur .bouche { transition:d .5s ease; }
.humeur-libelle { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); transition:color .5s ease; }
.humeur.est-content svg,   .humeur.est-content .humeur-libelle   { color:var(--teal); }
.humeur.est-neutre svg,    .humeur.est-neutre .humeur-libelle    { color:var(--dpe-e); }
.humeur.est-mecontent svg, .humeur.est-mecontent .humeur-libelle { color:var(--dpe-f); }
@media (prefers-reduced-motion: reduce) {
  .humeur svg, .humeur .bouche, .humeur-libelle { transition:none; }
}

/* Pills de risques (Géorisques) */
.risk-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(251,204,5,.1); border:1px solid rgba(251,204,5,.38); color:#FBCC05; font-size:.88rem; font-weight:600; }
.risk-pill svg { width:16px; height:16px; }
.risk-pill.ok { background:var(--teal-light); border-color:rgba(182,255,46,.35); color:var(--accent); }

@media (max-width: 940px) { .dash { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .dash { grid-template-columns: 1fr; } .dpe-chart { height:200px; gap:7px; } }

/* ====== Barre de contact (top bar) ====== */
.topbar { background: var(--bg-navy); color: var(--muted); font-size: .84rem; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.tb-loc { display: inline-flex; align-items: center; gap: 7px; }
.tb-loc svg, .topbar-links svg { color: var(--accent); }
.topbar-links { display: flex; gap: 18px; }
.topbar-links a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.topbar-links a:hover { color: var(--accent); text-decoration: none; }

/* ====== Méga-menu Zones ====== */
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; width: 600px; max-width: 78vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 18px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s ease; z-index: 60;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.mega-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.mega-title { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: .92rem; font-weight: 500; color: var(--ink); }
.mega-list a:hover { background: var(--teal-light); color: var(--teal-dark); text-decoration: none; }
.mega-km { font-size: .72rem; color: var(--muted); font-weight: 600; }
.mega-list a:hover .mega-km { color: var(--teal-dark); }
.mega-all { display: inline-block; margin-top: 12px; font-weight: 650; color: var(--accent-dark); font-size: .9rem; }
.mega-feature { display: block; background: linear-gradient(150deg, #1B1E26, #2A2E39); color: var(--ink); border-radius: 14px; padding: 18px; }
.mega-feature .badge { background: rgba(182,255,46,.14); color: var(--accent); border-color: rgba(182,255,46,.4); }
.mega-feature strong { display: block; color: var(--navy); font-size: 1.08rem; margin: 12px 0 6px; font-family: var(--display); font-weight: 600; }
.mega-feature p { font-size: .85rem; color: var(--muted); margin: 0 0 10px; }
.mega-feature .card-link { color: var(--accent); }
.mega-feature:hover { text-decoration: none; transform: translateY(-2px); transition: transform .2s; }

/* ====== Images stylisées ====== */
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(15,17,22,.78)); }
.hero-media-badge { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; }
.hero-media-badge strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.hero-media-badge span { font-size: .85rem; opacity: .92; }

.media-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-band > img { width: 100%; height: 420px; object-fit: cover; display: block; }
.media-band .media-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(21,24,31,.94) 0%, rgba(21,24,31,.66) 55%, rgba(182,255,46,.12) 100%); display: flex; align-items: center; }
.media-band .media-overlay .container { width: 100%; }

.zone-grid { gap: 20px; }
.zone-card { padding: 0; overflow: hidden; display: block; text-decoration: none; }
.zone-card img { width: 100%; height: 158px; object-fit: cover; display: block; }
.zone-card-body { padding: 16px 20px 20px; }
.zone-card:hover { text-decoration: none; }
.zone-card .badge { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

@media (max-width: 760px) {
  .topbar .tb-loc { display: none; }
  .topbar-in { justify-content: center; }
  .topbar-links { gap: 14px; }
  .nav.open .mega { position: static; opacity: 1; visibility: visible; transform: none; width: auto; max-width: none; box-shadow: none; border: 0; padding: 4px 0 8px 14px; }
  .nav.open .mega-grid { grid-template-columns: 1fr; gap: 8px; }
  .nav.open .mega-list { grid-template-columns: 1fr 1fr; }
  .nav.open .mega-feature { display: none; }
  .media-band > img { height: 460px; }
}

/* Responsive */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 60px 0; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 22px 22px; gap: 2px; box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav.open .nav-links > li > a { padding: 14px 4px; border-bottom: 1px solid var(--line); width: 100%; font-size: 1.05rem; border-radius: 0; }
  .nav.open .nav-links > li > a::after { display: none; }
  /* Dropdown déplié en accordéon sur mobile */
  .nav.open .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    padding: 2px 0 8px 14px; min-width: 0; background: transparent;
  }
  .nav.open .dropdown li a { padding: 10px 4px; font-size: .98rem; }
  .nav.open .has-dropdown .caret { display: none; }
  .nav.open .nav-cta { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .step { padding-left: 56px; }
  body { font-size: 16px; }
}

/* =========================================================
   COUCHE BLUEPRINT / TECHNIQUE  (prime sur le reste)
   ========================================================= */

body { background-color: var(--bg); }

/* Eyebrows = étiquette technique mono */
.eyebrow {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-dark);
}
.eyebrow::before { content: "+ "; width: auto; height: auto; background: none; color: var(--accent); font-weight: 600; margin: 0; }

/* Badges = puce mono encadrée */
.badge {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 5px; padding: 4px 9px;
  background: transparent; border: 1px solid var(--teal); color: var(--teal-dark);
}
.badge--accent { background: transparent; border-color: var(--accent); color: var(--accent-dark); }

/* Cartes techniques : bord net, ombre minimale, repères en croix aux angles */
.card {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
  background: var(--surface); position: relative; transition: border-color .18s, transform .18s;
}
.card:hover { transform: none; box-shadow: none; border-color: var(--teal); }
.card::before, .card::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; opacity: .5;
}
.card::before { top: -1px; left: -1px; border-top: 1.5px solid var(--teal); border-left: 1.5px solid var(--teal); }
.card::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); }

/* Icône service : carré technique (pas de gradient) */
.card-icon {
  background: transparent; border: 1.5px solid var(--teal); border-radius: 8px; color: var(--teal-dark);
  box-shadow: none;
}

/* Boutons : bords francs */
.btn { border-radius: 7px; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { transform: none; }
.btn:hover { transform: none; }

/* Labels mono : KPI, mini, méga-titre, trust, stat */
.kpi-label, .mega-title, .mini small, .viz-head .muted, .hero-media-badge span,
.crumbs, .topbar { font-family: var(--mono); letter-spacing: .04em; }
.kpi-label { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
.kpi-val, .stat b, .result-total { font-family: var(--mono); font-weight: 600; letter-spacing: -.01em; }
.trust-row .ti { font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; }

/* KPI / dash : panneaux techniques */
.kpi { border-radius: var(--radius); box-shadow: none; background: var(--surface); }

.hero {
  background: radial-gradient(900px 460px at 88% 0%, var(--teal-light), transparent 70%), var(--bg);
}
.hero::after { display: none; }
.hero h1 span { color: var(--teal-dark); }

/* Panneau illustration (schéma) — remplace les photos */
.schema-panel {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 18px; overflow: hidden;
}
.schema-panel::before, .schema-panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 2; opacity: .8;
}
.schema-panel::before { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.schema-panel::after  { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.schema-panel img { width: 100%; height: auto; display: block; }
.schema-tag {
  position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; background: var(--bg);
}

/* Top bar mono déjà appliqué ; affiner */
.topbar { font-size: .78rem; letter-spacing: .03em; }

/* Méga-titre lisible */
.mega-title { color: var(--muted); }
.mega-km { font-family: var(--mono); }

/* Section "blueprint" : filet technique en tête */
.rule-tech { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rule-tech::before, .rule-tech::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* CTA band : encadré technique au lieu du dégradé arrondi */
.cta-band { border-radius: var(--radius-lg); }

/* Zone cards (hub) sans photo : bandeau étiquettes DPE */
.zone-card { border: 1px solid var(--line); }
.zone-strip { display: flex; height: 8px; }
.zone-strip i { flex: 1; }

/* Liens : soulignement technique */
.nav-links > li > a { font-family: var(--font); }


/* =========================================================
   Panneau maison : image générée + annotations animées
   ========================================================= */
.schema-stage { position: relative; line-height: 0; }
.schema-stage img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius) - 3px); }
.schema-notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Halo sombre autour des glyphes : lisibilité garantie sur n'importe quelle zone de l'image */
.schema-notes text {
  paint-order: stroke fill; stroke: rgba(18,20,26,.92); stroke-width: 5px; stroke-linejoin: round;
}
/* Tailles en unités de viewBox : l'échelle à l'écran est d'environ 0,45 */
.schema-notes .n-num { font-family: var(--mono); font-size: 26px; font-weight: 600; fill: var(--accent); }
.schema-notes .n-lab { font-family: var(--mono); font-size: 28px; font-weight: 500; fill: var(--navy); }
.schema-notes .n-sub { font-family: var(--mono); font-size: 23px; font-weight: 400; fill: var(--muted); }
.schema-notes .n-lead { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 7 7; }
.schema-notes .n-tick { stroke: var(--accent); stroke-width: 2.6; fill: none; }

/* Apparition : l'amorce se trace, puis le libellé arrive */
.schema-notes .n-line { clip-path: inset(0 100% 0 0); }
.schema-notes .n-line--rtl { clip-path: inset(0 0 0 100%); }
.schema-notes .n-text { opacity: 0; transform: translateY(9px); }
.schema-notes .n-group { --d: 0s; }
.schema-notes .n-line { animation: leadDraw .6s cubic-bezier(.4,0,.2,1) var(--d) forwards; }
.schema-notes .n-text { animation: noteIn .4s ease-out calc(var(--d) + .32s) forwards; }
@keyframes leadDraw { to { clip-path: inset(0 0 0 0); } }
@keyframes noteIn  { to { opacity: 1; transform: none; } }

/* Sous 620 px le panneau descend sous ~330 px : les annotations deviendraient
   illisibles quelle que soit la taille choisie. On garde l'image seule —
   les mêmes diagnostics sont listés juste en dessous. */
@media (max-width: 620px) { .schema-notes { display: none; } }

/* ====== Pied de page : liens légaux ====== */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.foot-legal a { font-size: .85rem; }
.foot-legal a + a::before { content: "·"; color: var(--muted); margin-right: 10px; opacity: .6; }
.foot-bottom { align-items: center; }

/* ====== Pages légales ====== */
.legal { max-width: 780px; }
.legal h2 {
  font-family: var(--font); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
  margin: 2.6rem 0 .7rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 1.4rem; }
.legal h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.legal p, .legal li { color: var(--ink); line-height: 1.72; }
.legal ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .4rem; }
.legal dl { margin: 0 0 1rem; }
.legal dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }
.legal dd { margin: 2px 0 0; }
.legal .maj { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); }
.legal table { width: 100%; border-collapse: collapse; font-size: .94rem; margin: 0 0 1rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.legal td.num { font-family: var(--mono); white-space: nowrap; }
.todo {
  display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: #FBCC05; border: 1px solid rgba(251,204,5,.4);
  background: rgba(251,204,5,.1); border-radius: 5px; padding: 2px 7px; margin-right: 6px;
}
.legal-toc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.legal-toc a { display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; color: var(--ink); }
.legal-toc a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.legal-toc a:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 640px) { .legal-toc { grid-template-columns: 1fr; } }

/* =========================================================
   Héros pleine page — l'animation occupe tout l'écran
   ========================================================= */
.hero--full {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: 72vh; padding: 96px 0 104px;
  background: var(--bg);
}
.hero--full .hero-bg { position: absolute; inset: 0; z-index: 0; }

/* L'image et la surcouche partagent la même boîte : elles restent alignées
   quel que soit le recadrage. min-width couvre la hauteur minimale du héros. */
.hero--full .hero-bg-inner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; min-width: calc(72vh * 16 / 9); aspect-ratio: 1200 / 670;
}
.hero--full .hero-bg-inner img { width: 100%; height: 100%; display: block; }
.hero--full .hero-bg-inner .schema-notes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Voile : assombrit la gauche pour que le texte reste lisible, laisse la maison nette */
.hero--full .hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(35,38,47,.95) 24%, rgba(35,38,47,.6) 44%, rgba(35,38,47,0) 62%),
    linear-gradient(180deg, rgba(35,38,47,.5) 0%, rgba(35,38,47,0) 20%, rgba(35,38,47,0) 76%, rgba(35,38,47,.72) 100%);
}
/* Annotations du héros : viewBox 1200x670, échelle de rendu ~1,2 à 1,6 */
.hero--full .schema-notes .n-num { font-size: 11px; }
.hero--full .schema-notes .n-lab { font-size: 12px; }
.hero--full .schema-notes .n-sub { font-size: 10px; }
.hero--full .schema-notes text  { stroke: rgba(16,18,23,.95); stroke-width: 4px; }
.hero--full .schema-notes .n-sub { fill: #C7C9C5; }
.hero--full .schema-notes .n-lead { stroke-width: 1.1; stroke-dasharray: 4 4; }
.hero--full .schema-notes .n-tick { stroke-width: 1.4; }
.hero--full .schema-notes .n-text { transform: translateY(4px); }

/* Sous 1000 px le recadrage rogne les bords : les annotations seraient coupées */
@media (max-width: 1000px) { .hero--full .schema-notes { display: none; } }

.hero--full > .container { position: relative; z-index: 2; }
.hero--full .hero-copy { max-width: 620px; }
.hero--full .lead { max-width: 560px; }
.hero-fig {
  position: absolute; right: 26px; bottom: 22px; z-index: 2;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px;
  background: rgba(27,30,38,.72);
}



@media (max-width: 900px) {
  .hero--full { min-height: 0; padding: 64px 0 76px; }
  /* on décale la boîte vers la gauche pour garder la maison dans le champ */
  .hero--full .hero-bg-inner { min-width: 190%; left: 32%; }
  .hero--full .hero-bg::after {
    background: linear-gradient(180deg, rgba(35,38,47,.94) 0%, rgba(35,38,47,.8) 40%, rgba(35,38,47,.62) 100%);
  }
  .hero--full .hero-copy, .hero--full .lead { max-width: none; }
  .hero-fig { display: none; }
}


/* =========================================================
   Menu « tubelight » — lampe lime qui suit l'onglet
   La lampe est un seul élément injecté par main.js : elle glisse
   d'un onglet à l'autre plutôt que d'apparaître/disparaître.
   ========================================================= */
.nav-links { position: relative; }
.nav-links > li > a { position: relative; z-index: 1; }

.nav-lamp {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-radius: 999px; background: rgba(182,255,46,.10);
  pointer-events: none; opacity: 0; z-index: 0;
  transition:
    transform .44s cubic-bezier(.34,1.42,.64,1),
    width     .44s cubic-bezier(.34,1.42,.64,1),
    opacity   .22s ease;
}
.nav-lamp.is-on { opacity: 1; }

/* le tube : barre lime posée sur le bord haut de l'onglet */
.nav-lamp b {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 4px; border-radius: 999px 999px 0 0;
  background: var(--accent);
}
/* les trois halos, du plus large au plus serré */
.nav-lamp b i { position: absolute; display: block; background: rgba(182,255,46,.22); border-radius: 999px; }
.nav-lamp b i:nth-child(1) { width: 48px; height: 24px; top: -8px; left: -8px; filter: blur(12px); }
.nav-lamp b i:nth-child(2) { width: 32px; height: 24px; top: -4px; left: 0;    filter: blur(12px); }
.nav-lamp b i:nth-child(3) { width: 16px; height: 16px; top:  0;   left: 8px;  filter: blur(4px);  }

/* onglet actif : texte lime, la pastille est portée par la lampe */
.nav-links > li > a.is-active { color: var(--accent); font-weight: 600; }
.nav-links > li > a:hover { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .nav-lamp { transition: opacity .2s ease; }
}
@media (max-width: 760px) { .nav-lamp { display: none; } }

/* Équipements dessinés et coupe de la cloison droite (héros) */
.schema-notes .n-eq { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linejoin: round;
  stroke-linecap: round; opacity: .58; }   /* atténué pour se fondre dans l'ossature */
/* Étiquette énergie : couleurs réglementaires, non soumises au thème */
.schema-notes .n-dpe { stroke: rgba(14,16,22,.65); stroke-width: .7; opacity: .92; }
.schema-notes .n-dpe-a { fill: var(--dpe-a); }
.schema-notes .n-dpe-b { fill: var(--dpe-b); }
.schema-notes .n-dpe-c { fill: var(--dpe-c); }
.schema-notes .n-dpe-d { fill: var(--dpe-d); }
.schema-notes .n-dpe-e { fill: var(--dpe-e); }
.schema-notes .n-dpe-f { fill: var(--dpe-f); }
.schema-notes .n-dpe-g { fill: var(--dpe-g); }
.schema-notes .n-dpe-cur { fill: var(--navy); stroke: none; opacity: .9; }   /* curseur sur la classe */
.schema-notes .n-cut-floor { fill: none; stroke: var(--accent); stroke-width: .9; opacity: .4; stroke-dasharray: 4 4; }
.schema-notes .n-cut-back  { fill: none; stroke: var(--accent); stroke-width: .8; opacity: .26; }
.schema-notes .n-cut { opacity: 0; animation: noteIn .6s ease-out .15s forwards; }

/* =========================================================
   Boîtier caméra thermique — encadre les 6 prestations
   ========================================================= */
.thermo {
  position: relative; border-radius: 30px 30px 20px 20px; padding: 18px 18px 0;
  background: linear-gradient(180deg, #343A4C 0%, #272C39 15%, #1E222C 100%);
  border: 1px solid rgba(242,243,239,.10);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(242,243,239,.10);
}
.thermo::before {   /* reflet de préhension sur l'arête haute */
  content: ""; position: absolute; inset: 5px 40px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242,243,239,.20), transparent);
}

/* Bandeau supérieur : objectif, capteurs, référence */
.thermo-top { display: flex; align-items: center; gap: 14px; padding: 5px 14px 15px; }
.thermo-lens {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #505873, #13161E 64%);
  box-shadow: inset 0 0 0 2px rgba(242,243,239,.14), 0 0 0 3px rgba(0,0,0,.4);
}
.thermo-dots { display: flex; gap: 7px; }
.thermo-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(242,243,239,.22); }
.thermo-tag {
  margin-left: auto; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(242,243,239,.36);
}

/* Écran : c'est lui qui porte les cartes */
.thermo-screen {
  border-radius: 14px; padding: 32px; background: #191C24;
  box-shadow: inset 0 0 0 1px rgba(182,255,46,.20), inset 0 2px 26px rgba(0,0,0,.7);
}

/* Pavé de commandes, posé sur un plateau en creux */
.thermo-panel {
  display: flex; align-items: center; justify-content: center; gap: 42px;
  width: max-content; margin: 28px auto 26px; padding: 20px 48px; border-radius: 20px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(242,243,239,.07), inset 0 0 0 1px rgba(242,243,239,.04);
}
.thermo-key {
  width: 62px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(180deg, #3B4154, #272C38);
  box-shadow: inset 0 1px 0 rgba(242,243,239,.12), 0 2px 4px rgba(0,0,0,.5);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: rgba(242,243,239,.55);
}
.thermo-dpad { position: relative; width: 100px; height: 100px; flex: none; }
.thermo-dpad span {
  position: absolute; background: linear-gradient(180deg, #3B4154, #272C38);
  box-shadow: inset 0 1px 0 rgba(242,243,239,.10), 0 2px 4px rgba(0,0,0,.45);
}
.thermo-dpad .u { top: 0; left: 35px; width: 30px; height: 33px; border-radius: 10px 10px 4px 4px; }
.thermo-dpad .d { bottom: 0; left: 35px; width: 30px; height: 33px; border-radius: 4px 4px 10px 10px; }
.thermo-dpad .l { left: 0; top: 35px; width: 33px; height: 30px; border-radius: 10px 4px 4px 10px; }
.thermo-dpad .r { right: 0; top: 35px; width: 33px; height: 30px; border-radius: 4px 10px 10px 4px; }
.thermo-dpad .c {
  left: 31px; top: 31px; width: 38px; height: 38px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(182,255,46,.28), 0 2px 4px rgba(0,0,0,.45);
}
.thermo-trigger {
  width: 44px; height: 18px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, rgba(252,153,53,.92), rgba(196,108,22,.92));
  box-shadow: 0 0 14px rgba(252,153,53,.22), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Sur petit écran le boîtier disparaît : les cartes reprennent la pleine largeur */
@media (max-width: 860px) {
  .thermo { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .thermo::before, .thermo-top, .thermo-panel { display: none; }
  .thermo-screen { padding: 0; background: none; box-shadow: none; border-radius: 0; }
}

/* =========================================================
   Section « Nos prestations » sur fond papier.
   Le contenu est écrit pour un fond sombre : chaque couleur
   de texte doit être inversée explicitement.
   ========================================================= */
.section--paper { background: #F2F3EF; }
.section--paper h2 { color: #23262F; }                    /* 13,6:1 */
.section--paper .lead { color: #5A5E66; }                 /*  5,8:1 */
.section--paper .eyebrow,
.section--paper .eyebrow::before { color: #4E7A0E; }
/* sur fond papier, --navy (blanc cassé) rendrait le bouton contour invisible */
.section--paper .btn-ghost { color: #23262F; border-color: rgba(35,38,47,.30); }
.section--paper .btn-ghost:hover { border-color: #4E7A0E; color: #4E7A0E; }      /*  4,6:1 — lime assombri pour rester lisible */
/* le boîtier se détache du papier comme sur une photo produit */
.section--paper .thermo {
  box-shadow: 0 26px 60px rgba(18,21,28,.30), inset 0 1px 0 rgba(242,243,239,.10);
}

/* =========================================================
   Section Observatoire : carte du réseau en arrière-plan
   ========================================================= */
.section--carte { position: relative; overflow: hidden; }
/* sélecteur volontairement spécifique : certaines extensions de navigateur
   injectent un fond sur les pseudo-éléments de section et écrasaient la carte */
.section.section--carte::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/carte-reseau.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .85;
}
/* fondu vers le graphite : la carte ne doit pas heurter les bords de section */
.section.section--carte::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(130% 100% at 50% 50%, rgba(35,38,47,0) 48%, rgba(35,38,47,.88) 100%);
}
.section--carte > .container { position: relative; z-index: 1; }

/* panneaux translucides : la carte transparaît derrière le contenu */
.panneau-verre {
  background: rgba(27,30,38,.80);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.panneau-verre--clair { background: rgba(42,46,57,.72); }
/* la carte transparaît derrière : on remonte les petits libellés d'un cran */
.section--carte .muted { color: var(--ink); }

@media (max-width: 760px) { .section.section--carte::before { opacity: .6; } }

/* Parallaxe : la carte glisse un peu moins vite que la page.
   On ne deplace que le cadrage du fond, exprime en pourcentage :
   l'image couvre toujours la section, aucun bord ne peut donc etre
   decouvert, et sur les ecrans etroits — ou le cadrage "cover" ne
   laisse aucun jeu vertical — l'effet s'annule de lui-meme. */
.section.section--carte::before {
  background-position: 50% var(--carte-y, 50%);
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .section.section--carte::before { background-position: 50% 50%; }
}

/* Pictogrammes de la charte dans les cartes de diagnostic */
.card-icon .picto { width: 34px; height: 34px; display: block; }

/* =========================================================
   Cartes prestations : illustration technique en filigrane
   ========================================================= */
.card--visuel > .card-fond {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none; opacity: .13;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  /* le dessin s'efface sous le texte : le contraste du corps de texte est préservé */
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.35) 42%, #000 82%);
          mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.35) 42%, #000 82%);
  transition: opacity .18s;
}
.card--visuel > .card-icon,
.card--visuel > h3,
.card--visuel > p,
.card--visuel > .card-link { position: relative; z-index: 1; }
.card--visuel:hover > .card-fond { opacity: .2; }

.card--dpe         > .card-fond { background-image: url("../img/fond-dpe.svg"); }
.card--amiante     > .card-fond { background-image: url("../img/fond-amiante.svg"); }
.card--electricite > .card-fond { background-image: url("../img/fond-electricite.svg"); }
.card--gaz         > .card-fond { background-image: url("../img/fond-gaz.svg"); }
.card--plomb       > .card-fond { background-image: url("../img/fond-plomb.svg"); }
.card--carrez      > .card-fond { background-image: url("../img/fond-carrez.svg"); }
.card--termites    > .card-fond { background-image: url("../img/fond-termites.svg"); }

@media (prefers-reduced-motion: reduce) { .card--visuel > .card-fond { transition: none; } }

/* Le panneau translucide de l'Observatoire repose sur la carte : le filet
   standard (14 % d'alpha) y devient invisible, on le renforce localement. */
.section--carte .btn-ghost { color: var(--navy); border-color: rgba(242,243,239,.34); }
.section--carte .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Fond papier : liste a coches et bouton principal.
   Le lime #B6FF2E ne contraste qu'a 1,09 avec le papier #F2F3EF — la pastille
   et le bouton y disparaitraient. On bascule sur le lime assombri #4E7A0E. */
.section--paper .checks li { color: #3F434B; }                      /*  8,9:1 */
.section--paper .checks li::before {
  background: #4E7A0E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F2F3EF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.section--paper .btn-primary { background: #4E7A0E; color: #F2F3EF; }   /*  4,6:1 */
.section--paper .btn-primary:hover { background: #3E620B; }            /*  6,4:1 */

/* =========================================================
   Mon besoin : photo DPE en fondu sur le graphite
   ========================================================= */
#mon-besoin { position: relative; overflow: hidden; }
#mon-besoin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/fond-dpe-photo.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: .55;
  /* la photo se dissout vers les bords : le titre et le chapo gardent leur contraste,
     et le sujet reste net dans la marge droite ou rien ne vient se poser dessus */
  -webkit-mask-image: radial-gradient(120% 100% at 78% 60%, #000 18%, rgba(0,0,0,.30) 52%, transparent 88%);
          mask-image: radial-gradient(120% 100% at 78% 60%, #000 18%, rgba(0,0,0,.30) 52%, transparent 88%);
}
#mon-besoin > .container { position: relative; z-index: 1; }
/* en colonne unique la photo passe derriere tout le texte : on l'attenue
   et on recadre sur la tablette, seule partie lisible dans un cadre etroit */
@media (max-width: 760px) {
  #mon-besoin::before { opacity: .3; background-position: 72% center; }
}

/* Parallaxe : la photo se recadre doucement au defilement, comme la carte.
   Difference notable : cette photo est presque au format de la section, si
   bien que le cadrage "cover" ne laisse presque aucun jeu vertical — sans
   correction l'effet serait invisible. Le script mesure ce qu'il manque et
   depose la taille voulue dans --besoin-taille. Sans script, ou en dessous
   de 761 px ou la photo est deja recadree, on retombe sur le cadrage actuel. */
@media (min-width: 761px) {
  #mon-besoin::before {
    background-size: var(--besoin-taille, cover);
    background-position: right var(--besoin-y, 50%);
    will-change: background-position;
  }
}

/* =========================================================
   Hero Observatoire : carte du reseau + itineraire qui se trace
   ========================================================= */
/* la liste d'autocompletion de la recherche descend sous le bandeau : celui-ci
   ne doit plus rogner ses enfants. Le decoupage passe donc sur le SVG. */
.hero--carte { background: var(--bg); overflow: visible; }
.hero--carte::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/carte-reseau.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .68;
}
/* meme boite et meme recadrage que le fond : "slice" est l'equivalent SVG de
   background-size:cover, c'est ce qui pose le trace sur les vraies artères */
.hero-itineraire {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
  --trace-l: 2000; --trace-p: 0;
}
.hero-itineraire path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-itineraire .iti-guide { stroke: rgba(182,255,46,.16); stroke-width: 7; }
.hero-itineraire .iti-trace {
  stroke: #D8FF7A; stroke-width: 7;
  filter: drop-shadow(0 0 9px rgba(182,255,46,.85)) drop-shadow(0 0 26px rgba(182,255,46,.45));
  stroke-dasharray: var(--trace-l);
  stroke-dashoffset: calc(var(--trace-l) * (1 - var(--trace-p)));
}
.hero-itineraire circle { fill: none; stroke: #B6FF2E; stroke-width: 4; }
.hero-itineraire .iti-depart { stroke-width: 5; opacity: .8; }
.hero-itineraire .iti-arrivee {
  stroke-dasharray: 5 7; opacity: .5;
  transition: opacity .4s ease, stroke-dasharray .4s ease;
}
.hero-itineraire.est-arrive .iti-arrivee {
  opacity: 1; stroke-dasharray: none;
  filter: drop-shadow(0 0 12px rgba(182,255,46,.9));
}
.hero-itineraire .iti-curseur {
  fill: #D8FF7A; stroke: rgba(35,38,47,.85); stroke-width: 3;
  opacity: 0; transition: opacity .25s ease;
  filter: drop-shadow(0 0 10px rgba(182,255,46,.95));
}
.hero-itineraire.est-en-route .iti-curseur { opacity: 1; }
/* .hero::after est neutralise plus haut : on le reactive pour fondre la carte
   vers le graphite, sinon le texte se poserait sur les tracés les plus clairs */
.hero--carte::after {
  content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 84% at 50% 34%, rgba(35,38,47,.14) 12%, rgba(35,38,47,.70) 78%),
    linear-gradient(180deg, rgba(35,38,47,.58) 0%, rgba(35,38,47,0) 32%, rgba(35,38,47,.30) 100%);
}
.hero--carte > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero--carte::before { opacity: .45; }
  .hero-itineraire .iti-trace { stroke-width: 9; }
  .br-md { display: none; }
  /* centre + libelle long = le tiret du chapeau se detache a gauche du bloc,
     car c'est un element flex aligne sur la hauteur des deux lignes */
  .hero--carte .eyebrow { display: inline; }
  /* en inline-block l'espace final de content:"+ " est avale : on l'ecarte a la main */
  .hero--carte .eyebrow::before { margin-right: 7px; }
}

/* =========================================================
   Blog — en-tête filigrané et grille bento
   ========================================================= */
.blog-head { position: relative; text-align: center; margin-bottom: 78px; }
.blog-head-in { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.blog-head .eyebrow { justify-content: center; }
.blog-word {
  position: absolute; z-index: 0; top: -58px; left: 50%; transform: translateX(-50%);
  pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.045em;
  font-size: clamp(130px, 26vw, 400px); color: rgba(242,243,239,.035);
}

.bento { display: grid; gap: 18px; grid-template-columns: 1fr; }
.bento-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 24px; border-radius: 18px; overflow: hidden;
  background-color: var(--surface-2); background-size: cover; background-position: center;
  text-decoration: none; transition: transform .3s ease;
}
.bento-card::before {   /* voile qui monte au survol */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,13,18,.94) 6%, rgba(11,13,18,.55) 44%, rgba(11,13,18,.10) 100%);
  transition: background .45s ease;
}
.bento-card:hover { transform: scale(.985) rotate(.3deg); text-decoration: none; }
.bento-card:hover::before {
  background: linear-gradient(to top, rgba(11,13,18,.96) 22%, rgba(11,13,18,.78) 72%, rgba(11,13,18,.42) 100%);
}
.bento-body { position: relative; display: flex; align-items: flex-end; gap: 18px; }
.bento-body > div { flex: 1; min-width: 0; }
.bento-card h3 { color: #F2F3EF; margin: 0 0 12px; font-size: 1.45rem; line-height: 1.18; }
.bento-card--lead h3 { font-size: 2.1rem; }
.bento-pill {
  display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 5px;
  background: rgba(242,243,239,.16); color: #F2F3EF;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bento-meta { display: block; margin-top: 11px; font-family: var(--mono); font-size: .74rem; color: rgba(242,243,239,.6); }
.bento-arrow { flex: none; color: var(--accent); transition: transform .3s ease; }
.bento-card:hover .bento-arrow { transform: translateX(7px); }

@media (min-width: 680px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 264px; }
  .bento-card { min-height: 0; }
  .bento-card--lead { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   BLOG 2.0 — articles fond clair, auteur, connexes, filtres,
   section outils, newsletter. Ajout Growthappiness.
   ========================================================= */
/* --- Article sur fond papier : texte sombre lisible --- */
.section--paper .article p,
.section--paper .article li { color: #2B2E36; }
.section--paper .article h1 { color: #1B1E26; }
.section--paper .article h3 { color: #23262F; }
.section--paper .article strong { color: #1B1E26; }
.section--paper .article a { color: #4E7A0E; text-decoration: underline; text-underline-offset: 2px; }
.section--paper .article a:hover { color: #3C5F0B; }
.section--paper .article .meta { color: #6A6E76; }
.section--paper .article .lead { color: #40444C; }
.section--paper .article blockquote { border-left-color: #4E7A0E; color: #23262F; }
.section--paper .panel { background: #FFFFFF; border-color: rgba(35,38,47,.12); box-shadow: 0 8px 26px rgba(18,21,28,.06); }
.section--paper .panel h3 { color: #1B1E26; }
.section--paper .cta-band { background: #1B1E26; border-color: var(--accent); }
.section--paper .cta-band h2 { color: #F2F3EF; }
.section--paper .cta-band p { color: #B9BCC2; }

/* --- Fil d'Ariane bien visible sur papier --- */
.section--paper + * .crumbs { }
.crumbs.crumbs--paper { color:#6A6E76; }
.crumbs.crumbs--paper a { color:#4E7A0E; }

/* --- Hero image d'article (photo Higgsfield ou fallback couleur) --- */
.article-hero {
  position: relative; height: 340px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center; margin: 4px 0 26px;
  box-shadow: 0 20px 50px rgba(18,21,28,.18);
}
.article-hero::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,30,38,0) 40%, rgba(27,30,38,.42) 100%); }
.article-hero .cat-tag { position:absolute; top:16px; left:16px; z-index:2;
  background: var(--accent); color:#1B1E26; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.05em; padding:6px 12px; border-radius:999px; text-transform:uppercase; }
@media (max-width:640px){ .article-hero{ height: 220px; } }

/* --- Bloc auteur --- */
.author-card { display:flex; align-items:center; gap:14px; margin:6px 0 22px;
  padding:14px 16px; background:#FFFFFF; border:1px solid rgba(35,38,47,.10);
  border-radius:12px; }
.author-card img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; }
.author-card .an { font-weight:700; color:#1B1E26; font-size:.98rem; }
.author-card .ar { color:#6A6E76; font-size:.86rem; }
.author-card .ar b { color:#4E7A0E; }

/* --- Section « nos outils » --- */
.tools-cta { margin-top: 40px; }
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.tool-card { display:block; background:#FFFFFF; border:1px solid rgba(35,38,47,.10);
  border-radius:14px; padding:20px; transition:transform .2s, box-shadow .2s; }
.tool-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(18,21,28,.12); text-decoration:none; }
.tool-card .ti { width:40px;height:40px;border-radius:10px;background:rgba(78,122,14,.12);
  display:flex;align-items:center;justify-content:center;color:#4E7A0E;margin-bottom:12px; }
.tool-card h3 { margin:0 0 6px; color:#1B1E26; font-size:1.02rem; }
.tool-card p { margin:0; color:#5A5E66; font-size:.9rem; }
@media (max-width:820px){ .tools-grid{ grid-template-columns:1fr; } }

/* --- Articles connexes --- */
.related { margin-top:44px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.related-card { display:block; background:#FFFFFF; border:1px solid rgba(35,38,47,.10);
  border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.related-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(18,21,28,.12); text-decoration:none; }
.related-card .rc-cover{ height:120px; background-size:cover; background-position:center; }
.related-card .rc-body{ padding:14px 16px; }
.related-card .rc-pill{ font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:#4E7A0E; }
.related-card h3{ margin:6px 0 0; color:#1B1E26; font-size:.98rem; line-height:1.35; }
@media (max-width:820px){ .related-grid{ grid-template-columns:1fr; } }

/* --- Newsletter --- */
.newsletter { margin-top:46px; background:#1B1E26; border-radius:18px; padding:40px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; }
.newsletter h2 { color:#F2F3EF; margin:0 0 8px; }
.newsletter p { color:#B9BCC2; margin:0; }
.newsletter form { display:flex; gap:10px; }
.newsletter input { flex:1; padding:14px 16px; border-radius:10px; border:1px solid rgba(242,243,239,.18);
  background:#23262F; color:#F2F3EF; font-size:.95rem; }
.newsletter input::placeholder{ color:#8A8E96; }
.newsletter .nl-ok{ color:var(--accent); font-size:.9rem; margin-top:10px; }
@media (max-width:820px){ .newsletter{ grid-template-columns:1fr; padding:28px; } .newsletter form{flex-direction:column;} }

/* --- Filtres catégories (blog) --- */
.blog-filters { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 8px; }
.chip { font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; cursor:pointer;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink); transition:all .15s; }
.chip:hover { border-color:var(--accent); }
.chip.is-active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.bento-card.is-hidden { display:none; }
.bento-preview { color: rgba(242,243,239,.82); font-size: .9rem; line-height: 1.45;
  margin: 6px 0 10px; max-width: 46ch; }
.bento-card--lead .bento-preview { font-size: .98rem; max-width: 54ch; }
@media (max-width:640px){ .bento-preview { font-size: .86rem; } }

/* =========================================================
   FIX boutons + newsletter refaite (v2). Ces règles arrivent
   après les précédentes -> elles gagnent.
   ========================================================= */
/* Boutons dans les box SOMBRES posées sur fond papier : garder le lime lisible */
.section--paper .cta-band .btn-primary,
.section--paper .newsletter .btn-primary { background: var(--accent); color: var(--on-accent); }
.section--paper .cta-band .btn-primary:hover,
.section--paper .newsletter .btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); }

/* --- Newsletter v2 --- */
.newsletter { background: #1B1E26; border: 1px solid rgba(182,255,46,.14);
  border-radius: 20px; padding: 40px 44px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.newsletter .nl-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); }
.newsletter h2 { color: #F2F3EF; margin: 8px 0 8px; }
.newsletter .nl-copy p { color: #C7CAD1; margin: 0; font-size: 1rem; line-height: 1.55; }
.newsletter .nl-panel { }
.newsletter .nl-form { display: flex; gap: 10px; }
.newsletter input[type=email] { flex: 1; padding: 14px 16px; border-radius: 11px;
  border: 1px solid rgba(242,243,239,.20); background: #262A33; color: #F2F3EF; font-size: .95rem; }
.newsletter input[type=email]::placeholder { color: #9AA0A8; }
.newsletter input[type=email]:focus { outline: none; border-color: var(--accent); }
.newsletter .nl-form .btn-primary { background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.newsletter .nl-form .btn-primary:hover { background: var(--accent-dark); }
.newsletter .nl-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  color: #AEB2BA; font-size: .8rem; line-height: 1.45; cursor: pointer; }
.newsletter .nl-consent input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.newsletter .nl-consent a { color: var(--accent); text-decoration: underline; }
.newsletter .nl-legal { color: #7E838C; font-size: .72rem; line-height: 1.4; margin: 10px 0 0; }
.newsletter .nl-ok { color: var(--accent); font-size: .9rem; margin: 12px 0 0; font-weight: 600; }
@media (max-width: 820px){
  .newsletter { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; }
  .newsletter .nl-form { flex-direction: column; }
  .newsletter .nl-form .btn-primary { width: 100%; }
}

/* =========================================================
   Observatoire : la carte de recherche sur papier
   ========================================================= */
.hero--carte .form-card { background: #F2F3EF; border-color: rgba(35,38,47,.14); }
.hero--carte .form-card .field label { color: #23262F; }
.hero--carte .form-card .input {
  background: #FFFFFF; border-color: rgba(35,38,47,.22); color: #23262F;
}
.hero--carte .form-card .input::placeholder { color: #8A8E96; }
.hero--carte .form-card .input:focus { border-color: #4E7A0E; }
/* le lime #B6FF2E ne contraste qu'a 1,09 avec le papier : version assombrie */
.hero--carte .form-card .btn-primary { background: #4E7A0E; color: #F2F3EF; }   /* 4,6:1 */
.hero--carte .form-card .btn-primary:hover { background: #3E620B; }
.hero--carte .form-card .muted { color: #5A5E66; }                              /* 5,8:1 */
/* la liste d'autocompletion descend hors de la carte : elle doit suivre */
.hero--carte .ac-list { background: #F2F3EF; border-color: rgba(35,38,47,.18); }
.hero--carte .ac-item { color: #23262F; }
.hero--carte .ac-item:hover, .hero--carte .ac-item.active { background: rgba(78,122,14,.12); }

/* =========================================================
   Observatoire : aide contextuelle au contact des indicateurs
   ========================================================= */
.aide {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 17px; height: 17px; margin-left: 7px; padding: 0;
  border: 1px solid rgba(182,255,46,.45); border-radius: 50%;
  background: transparent; color: var(--accent);
  font-family: var(--font); font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.aide:hover,
.aide[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.aide:focus-visible { outline: 3px solid rgba(182,255,46,.55); outline-offset: 2px; }
/* le filet separe l'explication du chiffre : sans lui les deux se confondent */
.aide-texte {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem; line-height: 1.55;
}

/* =========================================================
   Observatoire : les resultats sur papier
   ========================================================= */
/* La section resultats est vide tant qu'aucune recherche n'a tourne : elle ne
   prend sa couleur et sa hauteur qu'une fois le tableau de bord affiche. */
#resultats { padding: 0; }
#resultats:has(#dashboard:not(.is-hidden)) { background: #F2F3EF; padding: 44px 0 10px; }

/* seuls ces trois elements reposent directement sur le papier : les tuiles,
   les graphiques et le bandeau d'appel gardent leur fond sombre */
#resultats .zone-tete .eyebrow,
#resultats .zone-tete .eyebrow::before { color: #4E7A0E; }        /*  4,6:1 */
#resultats .zone-tete h2 { color: #23262F; }                      /* 13,6:1 */
#resultats .zone-tete .badge {
  color: #4E7A0E; border-color: rgba(78,122,14,.45); background: rgba(78,122,14,.08);
}
#resultats .mention { color: #5A5E66; }                           /*  5,8:1 */


/* =========================================================
   Mon besoin : photo de fond sur papier, leger parallaxe
   ========================================================= */
/* Le papier est pose sur <main>, pas sur <body> : le pied de page est une
   carte translucide, sur du papier son texte retomberait a 2,9:1. */
.page-quiz main { position: relative; overflow: hidden; background-color: #F2F3EF; }
/* le hero a son propre degrade sombre : il masquerait la photo */
.page-quiz .hero { background: none; }

.fond-quiz {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  z-index: 0; pointer-events: none;
  background-image: url("../img/fond-quiz.jpg");
  background-size: cover; background-position: center;
  will-change: transform;
}
/* voile papier : la photo est claire et chargee, aucun texte ne tiendrait dessus */
.fond-quiz::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242,243,239,.78) 0%, rgba(242,243,239,.88) 55%, #F2F3EF 100%);
}
.page-quiz main > section { position: relative; z-index: 1; }

/* seuls le chapeau, le titre et le chapo reposent sur le papier : les deux
   cartes du questionnaire gardent leur fond sombre et leurs couleurs */
.page-quiz .hero .eyebrow,
.page-quiz .hero .eyebrow::before { color: #4E7A0E; }   /*  4,6:1 */
.page-quiz .hero h1 { color: #23262F; }                 /* 13,6:1 */
.page-quiz .hero .lead { color: #5A5E66; }              /*  5,8:1 */

/* =========================================================
   Bloc de marque — sigle en capitales, définition dessous
   ========================================================= */
.brand-nom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.02;
  letter-spacing: .055em;
}
.brand-nom small {
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-size: .43em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .012em;
  color: var(--muted);
  white-space: nowrap;
}
.foot-brand .brand-nom { letter-spacing: .05em; }
.foot-brand .brand-nom small { font-size: .4em; font-weight: 500; }

/* Sous 920 px la barre de navigation n'a plus la largeur : les liens,
   puis le bouton de devis et le menu, occupent la place. La définition
   reste portée par le pied de page, sur toutes les pages et toutes
   les tailles d'écran. */
@media (max-width: 919px) {
  .site-header .brand-nom small { display: none; }
}

/* =========================================================
   Recherche de DPE — photo en fond de page
   ========================================================= */
.page-dpe main { position: relative; }
.page-dpe .hero { background: none; }
.fond-dpe {
  position: absolute; left: 0; right: 0; top: 0; height: 800px;
  z-index: 0; pointer-events: none;
  background-image: url("../img/fond-dpe-hero.jpg");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}
/* la photo se termine déjà sur l'anthracite du site : un voile court suffit
   à masquer la couture (le stylo, en bas à droite) */
.fond-dpe::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(35,38,47,0) 74%, rgba(35,38,47,.6) 90%, #23262F 100%);
}
.page-dpe main > section { position: relative; z-index: 1; }

/* Sous 900 px la photo entière ne serait plus qu'un bandeau : on cadre sur le
   document et un voile latéral préserve la lisibilité du texte. */
@media (max-width: 900px) {
  .fond-dpe { height: 620px; background-position: 74% top; }
  .fond-dpe::after {
    background:
      linear-gradient(90deg, rgba(35,38,47,.9) 0%, rgba(35,38,47,.82) 100%),
      linear-gradient(180deg, rgba(35,38,47,0) 52%, rgba(35,38,47,.8) 84%, #23262F 100%);
  }
}

/* =========================================================
   Observatoire — second bouton vers la recherche de DPE
   (la carte est sur papier : le lime et l'encre claire n'y
   contrastent pas, on reprend les teintes du fond clair)
   ========================================================= */
.form-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.hero--carte .form-card .btn-ghost {
  background: transparent; color: #23262F; border-color: rgba(35,38,47,.30);
}
.hero--carte .form-card .btn-ghost:hover { border-color: #4E7A0E; color: #4E7A0E; }

/* =========================================================
   Recherche de DPE — carte de recherche sur papier
   (même traitement que la carte de l'observatoire : sur le
   papier, le lime et l'encre claire ne contrastent plus)
   ========================================================= */
.page-dpe .form-card { background: #F2F3EF; border-color: rgba(35,38,47,.14); }
.page-dpe .form-card .field label { color: #23262F; }
.page-dpe .form-card .input {
  background: #FFFFFF; border-color: rgba(35,38,47,.22); color: #23262F;
}
.page-dpe .form-card .input::placeholder { color: #8A8E96; }
.page-dpe .form-card .input:focus { border-color: #4E7A0E; }
.page-dpe .form-card .btn-primary { background: #4E7A0E; color: #F2F3EF; }   /* 4,6:1 */
.page-dpe .form-card .btn-primary:hover { background: #3E620B; }
.page-dpe .form-card .muted { color: #5A5E66; }                              /* 5,8:1 */
/* la liste d'autocomplétion descend hors de la carte : elle doit suivre */
.page-dpe .ac-list { background: #F2F3EF; border-color: rgba(35,38,47,.18); }
.page-dpe .ac-item { color: #23262F; }
.page-dpe .ac-item:hover, .page-dpe .ac-item.active { background: rgba(78,122,14,.12); }

/* =========================================================
   Devis en ligne — facture en fond de page
   La photo est claire et uniforme : sans voile appuyé, rien
   n'y serait lisible. Elle joue en texture, pas en image.
   ========================================================= */
.page-devis main { position: relative; }
.page-devis .hero { background: none; }
.fond-devis {
  position: absolute; left: 0; right: 0; top: 0; height: 1000px;
  z-index: 0; pointer-events: none;
  background-image: url("../img/fond-devis.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.fond-devis::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(35,38,47,.96) 0%, rgba(35,38,47,.80) 15%, rgba(35,38,47,.80) 58%,
    rgba(35,38,47,.90) 82%, #23262F 100%);
}
.page-devis main > section { position: relative; z-index: 1; }

/* En colonne étroite le texte passe sur toute la largeur de la photo :
   le voile doit se resserrer. */
@media (max-width: 900px) {
  .fond-devis { height: 720px; }
  .fond-devis::after {
    background: linear-gradient(180deg,
      rgba(35,38,47,.96) 0%, rgba(35,38,47,.87) 14%, rgba(35,38,47,.87) 60%,
      rgba(35,38,47,.93) 84%, #23262F 100%);
  }
}

/* =========================================================
   Téléphone — grilles posées en style en ligne
   Une media query ne peut pas annuler un style en ligne sans
   !important. Cinq grilles à deux colonnes restaient figées sur
   téléphone (accueil, contact, devis, observatoire, termites) :
   la colonne de droite partait hors écran, avec défilement
   horizontal sur trois d'entre elles. Même seuil que les
   grilles .grid-2 / .grid-3 / .grid-4 du site.
   ========================================================= */
@media (max-width: 760px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Carte « J'analyse ma zone » sur telephone
   Les deux volets se posent l'un sous l'autre (repli assure par
   la regle generique ci-dessus) et la respiration interieure se
   resserre : les padding sont poses en style en ligne, d'ou le
   !important. Le graphique DPE reste ainsi entierement visible.
   ========================================================= */
@media (max-width: 760px) {
  .section--carte .panneau-verre { padding: 30px 22px !important; }
}