/* Maquette ZELY · SUBRA Climatisation, Narbonne. Thème posé sur kit.css.
   DA reprise de son enseigne : « SUBRA » rouge, bandeau bleu ; ici un bleu nuit de nuit d'été et un mode froid / chaud qui change la couleur de l'air. */
:root {
  --navy-rgb: 15, 45, 82; --navy2-rgb: 10, 33, 64; --ink-rgb: 11, 27, 51; --cyan-rgb: 30, 127, 216;
  --navy: #0F2D52; --navy-2: #0A2140; --navy-l: #17447A; --ink: #0B1B33; --cyan: #1E7FD8; --cyan-d: #1565B8; --cyan-h: #3C93E2; --cyan-l: #7CC4FF;
  --rouge: #E2373F; --froid: #4FB3FF; --chaud: #FF7A45;
  --sky: #EAF3FD; --sand: #F5F8FC; --line: #DCE5F0; --grey: #55657C;
  --display: 'Sora', system-ui, sans-serif; --text: 'Inter', system-ui, sans-serif; --hand: 'Sora', system-ui, sans-serif;
  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --mode-c: #7CC4FF; --glow: rgba(79, 179, 255, .32);
}
html[data-mode="chaud"] { --mode-c: #FFA36E; --glow: rgba(255, 122, 69, .34); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; }
.h1 { font-weight: 800; }
.mc-svg, .dx-svg { display: block; width: 100%; height: auto; fill: #000; stroke: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; }

/* Libellés de section : capitales et trait, au lieu de l'écriture manuscrite */
.kicker { font-family: var(--text); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-d); gap: 10px; }
.kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--froid), var(--chaud)); }
.kicker.light { color: var(--cyan-l); }
.ba-tag { font-family: var(--display); font-size: 22px; }
.btn-cyan { background: var(--cyan-l); color: var(--ink); box-shadow: 0 12px 30px -12px rgba(124, 196, 255, .8); }
.btn-cyan:hover { background: #9BD3FF; }
.btn-navy svg { color: var(--cyan-l); }
.eyebrow i { background: var(--mode-c); transition: background-color .6s; }

/* Logo (proposition ZELY d'après l'enseigne) */
.wm { display: inline-flex; align-items: center; gap: 10px; }
.wm-ico { width: 38px; height: 38px; fill: none; stroke: none; }
.wm-froid { fill: var(--cyan); } .wm-chaud { fill: var(--rouge); } .wm-soleil { fill: #fff; }
.wm-flocon { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.top .wm-ico { animation: spin-in 1.1s var(--ease) .2s both; }
@keyframes spin-in { from { transform: rotate(-180deg) scale(.6); opacity: 0; } }
.wm-t { display: flex; flex-direction: column; }
.wm-t b { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1; letter-spacing: .02em; color: var(--rouge); }
.wm-t small { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-d); white-space: nowrap; }
.top .logo { display: inline-flex; align-items: center; min-height: 44px; }
.foot-logo { display: block; margin-bottom: 18px; }
.foot-grid .wm-ico { width: 38px; height: 38px; }
.foot-logo .wm-t b { color: #fff; } .foot-logo .wm-t small { color: var(--cyan-l); }

/* Héros : nuit bleue, air animé, saison froid / chaud */
.hero-sb { background: radial-gradient(60% 80% at 12% 0%, var(--glow), transparent 70%), linear-gradient(160deg, #0B1B33, #0F2D52 60%, #123A68); transition: background .8s; }
.hero-air { position: absolute; inset: 0; pointer-events: none; }
.hero-air svg { width: 100%; height: 100%; fill: none; stroke: none; }
.air-l { fill: none; stroke: var(--mode-c); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 18; opacity: .2; animation: souffle 9s linear infinite; animation-delay: calc(var(--i) * -1.1s); transition: stroke .8s; }
@keyframes souffle { to { stroke-dashoffset: -440; } }
.hero-sb .hero-inner { grid-template-columns: minmax(0, 1fr) 480px; }
.mot-mode { color: var(--mode-c); transition: color .8s; }
.thermo { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 30px; }
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sky); }
.mode-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: 15px; color: var(--navy); transition: background-color .3s, color .3s; }
.mode-switch button svg { width: 18px; height: 18px; }
.mode-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.mode-switch button[data-mode="froid"][aria-pressed="true"] svg { color: var(--froid); }
.mode-switch button[data-mode="chaud"][aria-pressed="true"] svg { color: var(--chaud); }
.mode-dark { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.mode-dark button { color: #fff; }
.mode-dark button[aria-pressed="true"] { background: #fff; color: var(--navy); }
.thermo-t { display: flex; align-items: center; gap: 12px; color: #fff; }
.thermo-deg { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -0.04em; color: var(--mode-c); transition: color .8s; }
.thermo-t small { max-width: 170px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.hero-sb .proofs { margin-top: 30px; }

/* Bande de confiance */
.bande { max-width: 1280px; margin: -40px auto 0; position: relative; z-index: 3; padding: 0 var(--pad); }
.bande ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; padding: 20px 26px; border-radius: var(--r-l); background: #fff; box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), .45); border: 1px solid var(--line); }
.bande li { display: flex; align-items: center; gap: 12px; }
.bande li > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--sky); color: var(--cyan-d); }
.bande img { width: 62px; height: auto; border-radius: 6px; }
.bande b { display: block; font-size: 15px; line-height: 1.3; color: var(--navy); }
.bande small { display: block; font-size: 13.5px; color: var(--grey); }

/* Métiers */
.services { background: var(--sand); padding-top: 100px; }
.svc-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.g4 .svc-img { aspect-ratio: 4 / 3; }
.g4 .svc-body { padding: 22px 22px 22px; }
.g4 .svc-body h3 { font-size: 21px; }
.g4 .svc-body li { font-size: 15px; }
.g4 .svc-picto { width: 58px; height: 58px; top: -29px; right: 18px; }
.svc-body li::before { background: linear-gradient(90deg, var(--froid), var(--chaud)); }
.svc-strip { display: flex; align-items: center; gap: 18px; max-width: 1280px; margin: 24px auto 0; padding: 20px 26px; border-radius: var(--r-l); background: var(--navy); color: #fff; transition: transform .4s var(--ease); }
.svc-strip:hover { transform: translateY(-3px); }
.svc-strip-ico { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--rouge); }
.svc-strip-ico .pc-svg { width: 40px; height: 40px; }
.svc-strip > span:nth-child(2) { flex: 1; }
.svc-strip b { display: block; font-family: var(--display); font-size: 19px; }
.svc-strip small { display: block; margin-top: 2px; font-size: 15px; color: rgba(255, 255, 255, .78); }
.svc-strip .link { color: #fff; border-color: var(--cyan-l); white-space: nowrap; }
.svc-strip .link svg { color: var(--cyan-l); }

/* Maison en coupe */
.maison { padding: 110px var(--pad); background: #fff; }
.mc-wrap { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 28px; max-width: 1280px; margin: 0 auto; align-items: center; }
.mc-stage { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px -45px rgba(var(--ink-rgb), .6); }
.mc-pt { position: absolute; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; background: none; display: grid; place-items: center; }
.mc-pt span { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--cyan); box-shadow: 0 4px 12px rgba(var(--ink-rgb), .35); transition: background-color .3s, transform .3s; }
.mc-pt span::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; animation: pt 2.4s ease-out infinite; }
.mc-pt[aria-pressed="true"] span { background: var(--cyan); transform: scale(1.15); }
.mc-pt:hover span { transform: scale(1.15); }
@keyframes pt { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.mc-side { display: grid; gap: 16px; padding: 26px; border-radius: var(--r-l); background: var(--sky); }
.mc-side .mode-switch { background: #fff; justify-self: start; }
.mc-mode { font-size: 15px; color: var(--grey); }
.mc-info { padding: 20px; border-radius: var(--r-m); background: #fff; animation: pane .5s var(--ease); }
.mc-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sky); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-d); }
.mc-info h3 { margin-top: 10px; font-size: 22px; color: var(--navy); }
.mc-info p { margin-top: 6px; color: var(--grey); font-size: 15.5px; }
.mc-side > .btn { justify-self: start; }
#mc-flux path { stroke-dasharray: 10 12; animation: flux 1.2s linear infinite; transition: stroke .6s; }
@keyframes flux { to { stroke-dashoffset: -44; } }
#mc-flux-4, #mc-flux-5 { animation-direction: reverse; }
#mc-helice { transform-box: fill-box; transform-origin: center; animation: tourne 1.1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
#mc-souffle path { animation: flux 1.6s linear infinite reverse; }
#mc-soleil, #mc-neige, #mc-ciel-hiver, #mc-ete, #mc-hiver { transition: opacity .6s; }
html[data-mode="chaud"] #mc-flux path { stroke: var(--chaud); }
html[data-mode="chaud"] #mc-soleil, html[data-mode="chaud"] #mc-ete { opacity: 0; }
html[data-mode="chaud"] #mc-neige, html[data-mode="chaud"] #mc-ciel-hiver, html[data-mode="chaud"] #mc-hiver { opacity: 1; }
#mc-neige g { animation: neige 4s linear infinite; }
@keyframes neige { from { transform: translateY(-10px); } to { transform: translateY(14px); } }

/* Calcul de puissance */
.calc-sec { padding: 110px var(--pad); background: var(--sand); }
.pw { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.pw-form { display: grid; gap: 24px; padding: 28px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); }
.vp { margin: 0; padding: 0; border: 0; min-width: 0; }
.vp legend { margin-bottom: 10px; font-size: 16px; }
.pw-range span { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy); }
.pw-range output { font-family: var(--display); color: var(--cyan-d); }
.pw-range input { width: 100%; height: 44px; accent-color: var(--cyan); }
.pw-res { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: var(--r-l); background: radial-gradient(90% 90% at 100% 0%, var(--navy-l), var(--navy) 60%); color: #fff; }
.pw-k { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pw-big { font-family: var(--display); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -0.04em; }
.pw-big small { font-size: 28px; color: rgba(255, 255, 255, .7); }
.pw-gauge { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.pw-gauge i { display: block; height: 100%; width: 30%; border-radius: inherit; background: linear-gradient(90deg, var(--froid), var(--chaud)); transition: width .6s var(--ease); }
.pw-sug { font-weight: 600; font-size: 17px; }
.pw-note { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.pw-res .btn { align-self: flex-start; margin-top: 6px; }

/* Showroom */
.showroom { padding: 110px var(--pad); background: var(--sand); }
.sr-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; max-width: 1280px; margin: 0 auto; align-items: center; }
.sr-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 70px -40px rgba(var(--ink-rgb), .6); }
.sr-photo img { width: 100%; height: auto; }
.sr-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--navy); }
.sr-photo figcaption svg { width: 16px; height: 16px; color: var(--rouge); }
.marques { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.marques li { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-family: var(--display); font-weight: 600; color: var(--navy); }
.sr-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sr-txt .sub { max-width: 560px; }

/* Avis */
.avis-sec { padding: 110px var(--pad) 40px; }
.qt .stars { color: #FFB020; }

/* Types, pompe à chaleur */
.types { padding: 110px var(--pad); }
.pac { padding: 110px var(--pad); }
.pac-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1280px; margin: 0 auto; align-items: center; }
.pac-list { display: grid; gap: 12px; margin: 24px 0 30px; }
.pac-list li { display: flex; gap: 10px; color: var(--ink); }
.pac-list svg { width: 22px; height: 22px; margin-top: 1px; color: var(--cyan-d); }
.pac .sub { max-width: 600px; }
.pac-visu { position: relative; padding: 0 0 0 40px; }
.pac-photo { aspect-ratio: 3 / 4; max-height: 520px; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 70px -40px rgba(var(--ink-rgb), .6); }
.pac-photo img { width: 100%; height: 100%; object-fit: cover; }
.pac-badge { position: absolute; z-index: 2; left: 0; top: 30px; margin: 0; width: 170px; padding: 12px; border-radius: var(--r-m); background: #fff; box-shadow: 0 20px 40px -20px rgba(var(--ink-rgb), .5); }
.pac-badge img { width: 100%; height: auto; }

/* Électricité, plomberie */
.metier { padding: 110px var(--pad); }
.metier-alt { background: var(--sand); }
.metier-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; max-width: 1280px; margin: 0 auto; align-items: center; }
.metier-alt .metier-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.metier .prest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0 30px; }
.metier-photos { position: relative; height: 500px; }
.metier-photos picture { position: absolute; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), .6); }
.metier-photos img { width: 100%; height: 100%; object-fit: cover; }
.metier-photos .mp1 { left: 0; top: 0; width: 72%; height: 66%; }
.metier-photos .mp2 { right: 0; bottom: 0; width: 46%; height: 62%; border: 6px solid #fff; }
.mini-grid.mini-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-4 .w { height: 230px; }
.eq > span { background: var(--sky); color: var(--cyan-d); }

/* Entretien */
.entretien { padding: 110px var(--pad); background: radial-gradient(70% 90% at 0% 0%, var(--navy-l), var(--navy) 60%, var(--navy-2)); color: #fff; }
.en-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; max-width: 1280px; margin: 0 auto; align-items: center; }
.entretien .kicker { color: var(--cyan-l); }
.entretien .h2 { color: #fff; }
.entretien .sub { color: rgba(255, 255, 255, .8); max-width: 520px; margin-bottom: 28px; }
.entretien .btn-navy { background: #fff; color: var(--navy); }
.entretien .btn-navy svg { color: var(--cyan-d); }
.en-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.en-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.en-chk { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .3); transition: background-color .4s, border-color .4s; transition-delay: calc(var(--i) * .25s + .3s); }
.en-chk svg { width: 16px; height: 16px; stroke-width: 3; color: #fff; transform: scale(0); transition: transform .4s var(--ease); transition-delay: calc(var(--i) * .25s + .4s); }
.en-list.in .en-chk { background: #2BBD5D; border-color: #2BBD5D; }
.en-list.in .en-chk svg { transform: scale(1); }
.en-list b { font-size: 16px; }
.en-list small { font-size: 14px; color: rgba(255, 255, 255, .72); }

/* Diagnostic : 5 états */
.dx-svg [id^="dx-"] { transition: opacity .4s; }
#dx-code, #dx-gouttes, #dx-bruit, #dx-odeur, #dx-thermo { opacity: 0; }
.diag-scene[data-state="chaud"] #dx-thermo { opacity: 1; }
.diag-scene[data-state="chaud"] #dx-air path { stroke: var(--chaud); }
.diag-scene[data-state="fuite"] #dx-gouttes { opacity: 1; }
.diag-scene[data-state="fuite"] #dx-gouttes path { animation: goutte-dx 1.4s ease-in infinite; }
.diag-scene[data-state="fuite"] #dx-gouttes path:nth-child(2) { animation-delay: .45s; } .diag-scene[data-state="fuite"] #dx-gouttes path:nth-child(3) { animation-delay: .9s; }
@keyframes goutte-dx { 0% { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.diag-scene[data-state="bruit"] #dx-bruit { opacity: 1; animation: blink 1s steps(2) infinite; }
.diag-scene[data-state="bruit"] #dx-unite { animation: vibre .12s linear infinite alternate; }
@keyframes vibre { to { transform: translateX(2px); } }
.diag-scene[data-state="odeur"] #dx-odeur { opacity: 1; }
.diag-scene[data-state="odeur"] #dx-air { opacity: .25; }
.diag-scene[data-state="voyant"] #dx-code { opacity: 1; }
.diag-scene[data-state="voyant"] #dx-led { fill: #E2373F; animation: blink .8s steps(2) infinite; }
.diag-scene[data-state="voyant"] #dx-air { opacity: 0; }
#dx-air path { stroke-dasharray: 10 12; animation: flux 1.2s linear infinite; transition: stroke .4s; }
.u-ico { background: rgba(var(--cyan-rgb), .12); color: var(--cyan-d); }

/* Héros des pages intérieures : photo encadrée */
.phero { --pw: min(36vw, 460px); background: linear-gradient(160deg, #0B1B33, #0F2D52 60%, #123A68); }
.phero-veil { display: none; }
.phero::before { content: ''; position: absolute; left: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.phero-img { left: auto; right: max(var(--pad), calc((100% - 1280px) / 2 + var(--pad))); top: 48px; bottom: 48px; width: var(--pw); overflow: hidden; border-radius: var(--r-l); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 70px -30px rgba(0, 0, 0, .6); }
.phero-in { padding-right: calc(var(--pad) + var(--pw) + 48px); }
.h1-page { font-size: clamp(38px, 4vw, 58px); }
.gallery-sec { background: var(--sand); }
.filters button[aria-selected="true"] { background: var(--navy); color: #fff; }

@media (max-width: 1240px) {
  .hero-sb .hero-inner { grid-template-columns: minmax(0, 1fr) 440px; }
  .svc-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .hero-sb .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .bande ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .mc-wrap, .pw, .sr-in, .pac-in, .metier-in, .metier-alt .metier-in, .en-in { grid-template-columns: minmax(0, 1fr); }
  .metier-alt .metier-photos { order: 2; }
  .mini-grid.mini-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phero { display: flex; flex-direction: column-reverse; }
  .phero-img { position: relative; inset: auto; width: auto; height: clamp(200px, 38vw, 340px); margin: 0 var(--pad) 48px; }
  .phero-in { padding-right: var(--pad); }
  .pac-visu { max-width: 460px; }
}
@media (max-width: 700px) {
  .hero-sb .h1 { font-size: clamp(36px, 10vw, 44px); }
  .thermo { gap: 14px; }
  .thermo-deg { font-size: 44px; }
  .bande { margin-top: -32px; padding: 0 12px; }
  .bande ul { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
  .maison, .calc-sec, .showroom, .types, .pac, .metier, .entretien { padding: 72px 16px; }
  .avis-sec { padding: 72px 16px 24px; }
  .svc-grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .svc-strip { flex-wrap: wrap; padding: 20px; }
  .mc-side { padding: 20px; }
  .mc-pt { width: 40px; height: 40px; }
  .mc-pt span { width: 18px; height: 18px; border-width: 2.5px; }
  .pw-form, .pw-res { padding: 22px; }
  .pw-big { font-size: 58px; }
  .metier .prest-grid { grid-template-columns: minmax(0, 1fr); }
  .metier-photos { height: 340px; }
  .mini-4 .w { height: 160px; }
  .en-list { grid-template-columns: minmax(0, 1fr); }
  .pac-visu { padding: 0; }
  .pac-badge { width: 130px; left: 10px; top: 10px; }
  .phero-img { margin: 0 16px 36px; }
  .wm-t b { font-size: 20px; }
  .wm-t small { font-size: 12px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .air-l, #mc-flux path, #mc-helice, #mc-souffle path, #mc-neige g, #dx-air path, .mc-pt span::after { animation: none; }
  .top .wm-ico { animation: none; }
  .en-chk, .en-chk svg { transition: none; }
}

/* Audit 1 */
@media (max-width: 700px) {
  .h1-page { font-size: clamp(31px, 8.4vw, 40px); }
}
/* Audit 2 : pas de photo dans ce héros, donc pas de marge réservée en haut sur mobile */
@media (max-width: 700px) {
  .hero-sb .hero-text { padding: 36px 20px 0; }
}

/* ---------- Qui sommes-nous (site en une page) ---------- */
.equipe { padding: 110px var(--pad); background: #fff; }
.eqp-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; max-width: 1280px; margin: 0 auto; align-items: center; }
.eqp-txt .sub { max-width: 580px; }
.eqp-pts { display: grid; gap: 16px; margin: 28px 0 32px; }
.eqp-pts li { display: flex; gap: 14px; align-items: flex-start; }
.eqp-pts li > span { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--cyan-d); }
.eqp-pts li > span svg { width: 20px; height: 20px; }
.eqp-pts b { display: block; color: var(--ink); font-size: 17px; }
.eqp-pts small { color: var(--grey); font-size: 15px; }
.eqp-card { position: relative; padding: 34px; border-radius: var(--r-l); color: #fff; background: radial-gradient(80% 90% at 100% 0%, var(--navy-l), var(--navy) 60%, var(--navy-2)); box-shadow: 0 40px 80px -45px rgba(var(--ink-rgb), .7); overflow: hidden; }
.eqp-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none; }
.eqp-who { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.eqp-mono { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--navy); background: linear-gradient(135deg, #fff, var(--cyan-l)); }
.eqp-who b { display: block; font-family: var(--display); font-size: 22px; }
.eqp-who small { color: rgba(255, 255, 255, .72); font-size: 15px; }
.eqp-time { position: relative; display: grid; gap: 22px; padding-left: 26px; }
.eqp-time::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--froid), var(--chaud)); border-radius: 2px; }
.eqp-time li { position: relative; }
.eqp-time li::before { content: ''; position: absolute; left: -26px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 3px solid var(--cyan-l); }
.eqp-time li:last-child::before { border-color: var(--chaud); }
.eqp-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-l); margin-bottom: 4px; }
.eqp-time b { display: block; font-size: 18px; }
.eqp-time small { color: rgba(255, 255, 255, .72); font-size: 15px; }
.metier-txt .sub { margin-top: 10px; max-width: 560px; }
@media (max-width: 960px) {
  .eqp-in { grid-template-columns: 1fr; gap: 36px; }
  .equipe { padding: 72px 16px; }
  .eqp-card { padding: 26px 22px; }
}

/* Signature ZELY : dégradé aux couleurs froid / chaud du site */
.zely-sig { --zsig: linear-gradient(90deg, #fff 0%, var(--cyan-l) 25%, #146EF5 50%, var(--chaud) 75%, #fff 100%); }

/* ---------- Photos de chantiers : avant / après ---------- */
.caches { padding: 110px var(--pad); background: var(--sand); }
.caches-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto; }
.caches-grid .ba { max-width: none; width: 100%; margin: 0; aspect-ratio: 3 / 4; }
.en-ba { max-width: 460px; width: 100%; margin: 32px 0 0; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
@media (max-width: 960px) {
  .caches { padding: 72px 16px; }
  .caches-grid { grid-template-columns: 1fr; max-width: 460px; }
  .caches-grid .ba { aspect-ratio: 3 / 4; }
  .en-ba { aspect-ratio: 4 / 3; }
}

/* ---------- En-tête façon bannière SUBRA (08/10, demande de Fabien) ---------- */
:root { --subra-rouge: #E3141E; --subra-bleu: #1A56A8; --degrade: linear-gradient(90deg, var(--subra-rouge) 0%, #B4234E 38%, var(--subra-bleu) 100%); }
.topbar { background: var(--degrade); color: #fff; }
.topbar .tb-dot { background: #fff; }
/* Logo redessiné d'après l'enseigne (maison + S) */
.lg { display: inline-flex; align-items: center; gap: 10px; }
.lg-mark { width: 46px; height: 42px; flex: none; fill: none; stroke: var(--subra-rouge); stroke-linecap: round; stroke-linejoin: round; }
.lg-l { stroke-width: 3.2; } .lg-f { stroke-width: 1.6; } .lg-s { stroke-width: 3; }
.lg-t { display: flex; flex-direction: column; line-height: 1; }
.lg-t b { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: .01em; color: var(--subra-rouge); }
.lg-t small { margin-top: 3px; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--navy); }
.foot-logo .lg-mark { stroke: #fff; } .foot-grid .foot-logo svg.lg-mark { width: 46px; height: 42px; } .foot-logo .lg-t b { color: #fff; } .foot-logo .lg-t small { color: var(--cyan-l); }
/* Héros clair : texte à gauche, salon climatisé à droite, souffle d'air bleu */
.hero-banniere { background: linear-gradient(100deg, #fff 0%, #F4F8FE 42%, #E8F1FC 100%); }
.hb-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.hb-photo picture, .hb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hb-vagues { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hb-vagues svg { width: 100%; height: 100%; fill: none; }
.hero-banniere .air-l { stroke: rgba(79, 160, 235, .28); stroke-width: 2.4; }
.hero-banniere .hero-inner { grid-template-columns: minmax(0, 640px); }
.hero-banniere .hero-text { position: relative; z-index: 2; }
.hb-marque { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.hb-marque .lg-mark { width: 84px; height: 76px; }
.hb-marque .lg-t b { font-size: clamp(46px, 5vw, 64px); letter-spacing: 0; }
.hb-marque .lg-t small { font-size: clamp(14px, 1.45vw, 19px); letter-spacing: .36em; margin-top: 6px; }
.hb-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 8px; border-radius: 50%; background: var(--degrade); color: #fff; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; box-shadow: 0 14px 30px -14px rgba(26, 86, 168, .7); transform: rotate(-8deg); }
.hb-badge b { font-family: var(--display); font-size: 21px; font-weight: 800; }
.hero-banniere .h1 { margin-top: 26px; color: var(--navy); font-size: clamp(44px, 5.2vw, 72px); }
.hb-adresse { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: var(--ink); font-size: 21px; line-height: 1.35; }
.hb-adresse svg { width: 22px; height: 22px; margin-top: 3px; color: var(--subra-rouge); flex: none; }
.hero-banniere .lead { color: var(--grey); font-size: 17px; max-width: 520px; margin-top: 16px; }
.hb-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.hb-tel { display: inline-flex; align-items: center; gap: 16px; height: 64px; padding: 0 30px 0 22px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: .01em; box-shadow: 0 20px 40px -20px rgba(var(--navy-rgb), .9); transition: transform .3s var(--ease), background-color .3s; }
.hb-tel:hover { transform: translateY(-2px); background: var(--navy-l); }
.hb-tel-ico svg { width: 26px; height: 26px; }
.hb-tel-sep { width: 1.5px; height: 30px; background: rgba(255, 255, 255, .5); }
.hero-banniere .thermo { margin-top: 24px; }
.hero-banniere .thermo-t { color: var(--ink); }
.hero-banniere .thermo-t small { color: var(--grey); }
.hero-banniere .thermo-deg { color: #1E7FD8; }
html[data-mode="chaud"] .hero-banniere .thermo-deg { color: #E0592A; }
.hero-banniere .mode-switch { background: #fff; border: 1px solid var(--line); }
.hero-banniere .proofs { margin-top: 26px; }
/* Visite virtuelle 360° du showroom */
.visite { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; max-width: 1280px; margin: 64px auto 0; }
.visite h3 { margin-top: 8px; font-family: var(--display); font-size: 30px; line-height: 1.15; color: var(--navy); }
.visite-txt > p:last-child { margin-top: 12px; color: var(--grey); }
.visite-cadre { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; background: var(--navy); box-shadow: 0 30px 70px -40px rgba(var(--ink-rgb), .6); }
.visite-cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.visite-go { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
.visite-go picture, .visite-go img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); transition: filter .4s, transform 1s var(--ease); }
.visite-go:hover img { filter: brightness(.75); transform: scale(1.03); }
.visite-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: 17px; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); }
.visite-play svg { width: 18px; height: 18px; }
.visite-go small { position: absolute; right: 14px; bottom: 12px; color: rgba(255, 255, 255, .8); font-size: 12px; }
@media (max-width: 960px) {
  .hero-banniere { padding: 0 0 40px; }
  .hb-photo { position: relative; top: 0; width: 100%; height: 300px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hb-vagues { display: none; }
  .hero-banniere .hero-text { padding: 0 20px; margin-top: -40px; }
  .hb-marque .lg-mark { width: 60px; height: 54px; }
  .hb-marque .lg-t b { font-size: 40px; }
  .hb-marque .lg-t small { font-size: 13px; letter-spacing: .3em; }
  .hb-badge { width: 70px; height: 70px; font-size: 10px; } .hb-badge b { font-size: 17px; }
  .hero-banniere .h1 { font-size: 40px; margin-top: 18px; }
  .hb-adresse { font-size: 18px; }
  .hb-tel { height: 56px; font-size: 23px; padding: 0 22px 0 18px; gap: 12px; }
  .visite { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .visite h3 { font-size: 24px; }
  .visite-cadre { aspect-ratio: 4 / 3; }
  .visite-play { font-size: 15px; padding: 13px 20px; }
}

/* Fondu bas du héros (08/10) : la photo s'efface vers le bas, le fond rejoint la section métiers */
.hero-banniere { background: linear-gradient(180deg, rgba(245, 248, 252, 0) 62%, var(--sand) 100%), linear-gradient(100deg, #fff 0%, #F4F8FE 42%, #E8F1FC 100%); }
.hb-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 58%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 58%, transparent 100%); mask-composite: intersect; }
.bande::before { content: ''; position: absolute; z-index: -1; top: 40px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--sand); }
@media (max-width: 960px) {
  .hb-photo { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-over; mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: add; }
}

/* Mot-clé du titre principal (référencement), discret au-dessus de « Showroom à Narbonne » */
.hb-kw { display: block; margin-bottom: 6px; font-family: var(--text); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--subra-rouge); }
@media (max-width: 960px) { .hb-kw { font-size: 12.5px; } }
.hb-badge b { white-space: nowrap; }

/* ---------- Pages légales ---------- */
.legal { padding: 150px var(--pad) 100px; background: var(--sand); }
.legal-in { max-width: 820px; margin: 0 auto; padding: 48px 52px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); }
.legal .crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grey); }
.legal .crumbs a { color: var(--cyan-d); }
.legal .crumbs svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.legal h1 { margin-top: 14px; }
.legal-maj { margin-top: 6px; color: var(--grey); font-size: 14px; }
.legal h2 { margin-top: 34px; font-family: var(--display); font-size: 21px; color: var(--navy); }
.legal p { margin-top: 10px; color: var(--ink); line-height: 1.65; }
.legal a { color: var(--cyan-d); text-decoration: underline; text-underline-offset: 2px; }
.foot-legal > span:first-child > a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-legal > span:first-child > a:hover { color: #fff; }
.q-rgpd { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--grey); text-align: center; }
.q-rgpd a { color: var(--cyan-d); text-decoration: underline; }
@media (max-width: 960px) { .legal { padding: 110px 16px 70px; } .legal-in { padding: 28px 22px; } }

/* Retours Fabien (09/10) : maison du logo plus discrète, dégradé rouge → bleu sur « Climatisation » */
.hb-marque .lg-mark { width: 58px; height: 52px; }
.top .lg-mark { width: 38px; height: 35px; }
.hb-marque .lg-t small, .top .lg-t small { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hb-marque .lg-t small { font-weight: 800; }
.foot-logo .lg-t small { background: none; -webkit-text-fill-color: var(--cyan-l); }
@media (max-width: 960px) { .hb-marque .lg-mark { width: 44px; height: 40px; } }

/* ---------- Avis clients en carrousel (09/10) ---------- */
.avis-car { position: relative; max-width: 1240px; margin: 0 auto; }
.avis-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 4px 4px 18px; scrollbar-width: none; }
.avis-track::-webkit-scrollbar { display: none; }
.avis-track .qt { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.avis-track .qt blockquote { font-size: 18px; }
.avis-track .qt figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.avis-nav { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.avis-nav [data-avis-prev] svg { transform: rotate(180deg); }
/* ---------- Mobile : métiers en carrousel horizontal ---------- */
@media (max-width: 700px) {
  .svc-grid.g4 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 30px 16px 18px; scrollbar-width: none; }
  .svc-grid.g4::-webkit-scrollbar { display: none; }
  .svc-grid.g4 > .svc { flex: 0 0 80%; scroll-snap-align: center; }
  .g4 .svc-img { aspect-ratio: 16 / 10; }
  .avis-track .qt { flex-basis: 85%; }
}
@media (min-width: 701px) and (max-width: 960px) { .avis-track .qt { flex-basis: calc((100% - 20px) / 2); } }
.avis-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; transition: background-color .25s, color .25s; }
.avis-btn:hover { background: var(--navy); color: #fff; }
.avis-btn svg { width: 18px; height: 18px; }
.legal ul { margin: 10px 0 0 20px; list-style: disc; color: var(--ink); line-height: 1.65; }
.visite-go small { left: 14px; text-align: right; }

/* ---------- Bandeau cookies (10/10) ---------- */
.ck { overflow: hidden; position: fixed; z-index: 60; left: 24px; bottom: 24px; max-width: 460px; padding: 20px 22px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(var(--ink-rgb), .45); transform: translateY(24px); opacity: 0; transition: transform .45s var(--ease), opacity .45s; }
.ck.on { transform: none; opacity: 1; }
.ck::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--degrade); }
.ck-t { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.ck-t b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 17px; color: var(--navy); }
.ck-t a { color: var(--cyan-d); text-decoration: underline; text-underline-offset: 2px; }
.ck-b { display: flex; gap: 10px; margin-top: 14px; }
.ck-b .btn { flex: 1; height: 46px; }
@media (max-width: 700px) { .ck { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }