/* Maquette ZELY · Habitat Piscine Services, pisciniste à Frontignan. Thème posé sur kit.css.
   DA sable et bleu (dégradé de son logo), titres en Sora. Objets du métier : trousse d'analyse de l'eau
   (preuves dans des fioles qui se remplissent), rénovation d'un même bassin en 7 photos, nuancier de liners. */
:root {
  --navy-rgb: 14, 42, 71; --navy2-rgb: 9, 30, 52; --ink-rgb: 15, 27, 41; --cyan-rgb: 20, 96, 176;
  --navy: #0E2A47; --navy-2: #091E34; --ink: #0F1B29; --cyan: #1460B0; --cyan-d: #104E91; --cyan-l: #8FD0F2; --aqua: #2BA3D8; --sky: #E4F1FA;
  --sand: #F6F3EC; --line: #E4DDCF; --grey: #5B6573;
  --fond: #F6F3EC; --fond-2: #EDE6D8; --carte: #FFFFFF;
  --display: 'Sora', system-ui, sans-serif; --text: 'Inter', system-ui, sans-serif; --hand: 'Sora', system-ui, sans-serif;
  --r-s: 8px; --r-m: 14px; --r-l: 22px;
}
body { background: var(--fond); color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; }
.h1, .h2 { color: var(--navy); }
.sub { color: var(--grey); }
.kicker, .kicker.light, .sec-head.light .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.kicker::before { content: ''; width: 10px; height: 13px; flex: none; background: var(--aqua); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; clip-path: polygon(50% 0, 100% 62%, 92% 85%, 50% 100%, 8% 85%, 0 62%); }
.sec-head.in .kicker::before, .reveal.in .kicker::before { animation: goutte .8s var(--ease) both .15s; }
@keyframes goutte { from { transform: translateY(-12px); opacity: 0; } }
.sec-head.light .kicker, .renov .kicker, .depannage .kicker, .devis-sec .kicker { color: var(--cyan-l); }
.sec-head.light .h2 { color: #fff; } .sec-head.light .sub { color: rgba(255, 255, 255, .76); }
.btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-2); } .btn-navy svg { color: var(--cyan-l); }

/* En-tête : son logo */
.top { background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.top.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(var(--ink-rgb), .08); }
.top .logo { display: inline-flex; align-items: center; min-height: 44px; }
.top .logo img { width: auto; height: 48px; }
.topbar { background: var(--navy); } .topbar a svg { color: var(--cyan-l); }
.foot { background: var(--navy-2); } .foot-grid img { width: auto; height: 48px; }

/* ---------- Héros : un de ses bassins, le devis dès l'arrivée ---------- */
.hero-hp { position: relative; overflow: hidden; padding: 40px var(--pad) 130px; background: var(--fond); }
.hh-fond { position: absolute; inset: 0; }
.hh-fond picture, .hh-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hh-fond img { animation: lent 14s ease-out both; }
@keyframes lent { from { transform: scale(1.1); } }
.hh-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 243, 236, .96), rgba(246, 243, 236, .9) 36%, rgba(246, 243, 236, .25) 62%, rgba(246, 243, 236, 0)), linear-gradient(0deg, rgba(246, 243, 236, 1), rgba(246, 243, 236, 0) 22%); }
.hh-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 56px; max-width: 1240px; margin: 0 auto; align-items: center; }
.hero-hp .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--navy); }
.hero-hp .eyebrow i { width: 8px; height: 10px; background: var(--aqua); border-radius: 50%; }
.hero-hp .h1 { margin-top: 18px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.03; }
.hero-hp .h1 .mot { font-style: normal; color: var(--cyan); background: linear-gradient(90deg, var(--aqua), var(--cyan)) no-repeat 0 92% / 100% 6px; border-radius: 3px; animation: trace 1s var(--ease) both .9s; }
@keyframes trace { from { background-size: 0% 6px; } }
.hero-hp .lead { margin-top: 16px; max-width: 540px; color: #3A4553; }
.hh-points { display: grid; gap: 8px; margin-top: 22px; }
.hh-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; color: var(--navy); }
.hh-points svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--cyan); color: #fff; stroke-width: 3; }
.hh-avis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 20px; font-size: 15px; color: var(--grey); }
.hh-avis .stars { color: #E9A70E; } .hh-avis b { color: var(--navy); }
.hh-legende { position: absolute; left: var(--pad); bottom: 28px; display: none; }
.hh-form { width: 100%; justify-self: end; box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .55); }
.hh-form .q-head h2 { color: var(--navy); }

/* Bande : trousse d'analyse de l'eau */
.bande { max-width: 1120px; margin: -72px auto 0; position: relative; z-index: 3; padding: 0 var(--pad); }
.trousse { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 54px -28px rgba(var(--ink-rgb), .5), 0 0 0 1px var(--line); }
.tr-tete { display: flex; justify-content: space-between; gap: 12px; padding: 10px 26px; background: linear-gradient(90deg, #1C4FA0, var(--aqua)); color: #fff; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tr-tete span + span { opacity: .85; }
.tr-fioles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 18px 12px 20px; }
.tr-fioles li { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 4px 16px; }
.tr-fioles li + li { border-left: 1px solid var(--line); }
.fiole { grid-row: 1 / 3; position: relative; width: 26px; height: 74px; border: 2px solid #B9C6D3; border-top-width: 0; border-radius: 3px 3px 14px 14px; background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(230, 236, 242, .6)); overflow: hidden; }
.fiole::before { content: ''; position: absolute; left: -4px; right: -4px; top: 0; height: 5px; border-radius: 2px; background: #B9C6D3; }
.fiole i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--n); border-radius: 0 0 12px 12px; transition: height 1.4s var(--ease); }
.fiole i::after { content: ''; position: absolute; left: 3px; top: 4px; width: 4px; bottom: 6px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.bande.reveal:not(.in) .fiole i { height: 0; }
.bande.reveal { opacity: 1; transform: none; }
.f-1 .fiole i { background: #F2C94C; } .f-2 .fiole i { background: #E0617A; transition-delay: .15s; } .f-3 .fiole i { background: var(--aqua); transition-delay: .3s; } .f-4 .fiole i { background: #3FB98A; transition-delay: .45s; }
.tr-fioles b { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.15; color: var(--navy); }
.tr-fioles small { font-size: 14px; color: var(--grey); }

/* Ruban */
.ruban { position: relative; overflow: hidden; margin-top: 46px; height: 56px; display: flex; align-items: center; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ruban-in { display: flex; align-items: center; width: max-content; animation: ruban 70s linear infinite; }
.ruban span { padding: 0 22px; font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--navy); white-space: nowrap; }
.ruban .goutte { width: 9px; height: 11px; flex: none; background: var(--aqua); clip-path: polygon(50% 0, 100% 62%, 92% 85%, 50% 100%, 8% 85%, 0 62%); }
.ruban:hover .ruban-in { animation-play-state: paused; }
@keyframes ruban { to { transform: translateX(-50%); } }

/* Rénovation en 7 étapes */
.renov { padding: 110px var(--pad); background: radial-gradient(80% 100% at 100% 0%, #16467A, var(--navy) 55%, var(--navy-2)); color: #fff; }
.rv-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 36px; max-width: 1200px; margin: 0 auto; align-items: center; }
.rv-vue { position: relative; margin: 0; display: grid; }
.rv-img { grid-area: 1 / 1; opacity: 0; transition: opacity .6s var(--ease); }
.rv-img.on { opacity: 1; }
.rv-img picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 40px 80px -40px #000; }
.rv-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 2.6s var(--ease); }
.rv-img.on img { transform: none; }
.rv-vue figcaption { grid-area: 2 / 1; display: flex; align-items: center; gap: 14px; margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 15px; color: rgba(255, 255, 255, .86); }
.rv-barre { flex: 1; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.rv-barre i { display: block; height: 100%; width: calc(100% / 7); border-radius: 3px; background: linear-gradient(90deg, var(--aqua), var(--cyan-l)); transition: width .6s var(--ease); }
.rv-etapes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.re { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1.5px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .03); color: #fff; text-align: left; cursor: pointer; transition: border-color .3s, background-color .3s; }
.re b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); font-family: var(--display); font-size: 14px; transition: background-color .3s, color .3s; }
.re span { font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
.re:hover { border-color: rgba(255, 255, 255, .35); }
.re.on { border-color: var(--cyan-l); background: rgba(143, 208, 242, .1); }
.re.on b { background: var(--cyan-l); color: var(--navy); }
.re.on span { color: #fff; }
.re:focus-visible { outline: 3px solid var(--cyan-l); outline-offset: 3px; }
.rv-ba { max-width: 1000px; margin: 64px auto 0; }
.ba-hp { aspect-ratio: 16 / 10; border-radius: var(--r-l); box-shadow: 0 40px 80px -40px #000; }
.ba-tag { font-family: var(--display); font-weight: 700; font-size: 26px; }
.ba-handle span { color: var(--cyan); }
.rv-ba-t { margin-top: 14px; text-align: center; color: rgba(255, 255, 255, .8); }
.rv-ba-t b { color: #fff; }

/* Liners */
.liner { padding: 110px var(--pad); }
.ln-in { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 52px; max-width: 1180px; margin: 0 auto; align-items: center; }
.ln-txt .sub { margin-top: 12px; }
.ln-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 22px; }
.lc { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 16px 7px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15px; color: var(--navy); cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--ease); }
.lc:hover { transform: translateY(-2px); border-color: var(--cyan); }
.lc.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lc:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.lc-ech { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .1); }
.nu-sable { background: radial-gradient(circle at 35% 30%, #CFF1F4, #7FD6DF 60%, #5BC3CF); }
.nu-gris { background: radial-gradient(circle at 35% 30%, #D6EEFA, #8CC8EA 60%, #5FAEDB); }
.nu-anth { background: radial-gradient(circle at 35% 30%, #8FB7CF, #3F6E8C 60%, #284E69); }
.nu-impr { background: radial-gradient(circle at 35% 30%, #CFE7F5, #6EA9D2 55%, #3D7FB5), repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 3px, transparent 3px 7px); background-blend-mode: overlay; }
.ln-vue { position: relative; margin: 0; display: grid; }
.ln-img { grid-area: 1 / 1; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.ln-img.on { opacity: 1; transform: none; }
.ln-img picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 34px 70px -40px rgba(var(--ink-rgb), .65); }
.ln-img img { width: 100%; height: 100%; object-fit: cover; }
.ln-vue figcaption { grid-area: 2 / 1; margin-top: 12px; font-weight: 600; font-size: 14.5px; color: var(--grey); }

/* Équipements */
.equip-sec { padding: 110px var(--pad) 90px; background: #fff; border-top: 1px solid var(--line); }
.eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1220px; margin: 0 auto; }
.eqp { overflow: hidden; border-radius: var(--r-m); background: var(--fond); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.eqp:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(var(--ink-rgb), .5); }
.eqp picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.eqp img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.eqp:hover img { transform: scale(1.05); }
.eq-body { padding: 16px 18px 20px; }
.eqp h3 { font-size: 18.5px; line-height: 1.25; color: var(--navy); }
.eqp p { margin-top: 6px; font-size: 15px; color: var(--grey); }
.eqp.reveal picture { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease) calc(var(--i, 0) * 90ms + .15s); }
.eqp.reveal.in picture { clip-path: inset(0 0 0 0); }
.eq-plus { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 1000px; margin: 28px auto 0; color: var(--grey); font-weight: 600; }
.eq-plus b { padding: 9px 14px; border-radius: 999px; background: var(--fond); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; color: var(--navy); }

/* Dépannage */
.depannage { padding: 90px var(--pad); background: linear-gradient(120deg, #1C4FA0, var(--cyan) 50%, #1E86C4); color: #fff; }
.dp-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; max-width: 1140px; margin: 0 auto; align-items: center; }
.depannage .h2 { color: #fff; } .depannage .sub { margin-top: 10px; color: rgba(255, 255, 255, .86); }
.depannage .kicker::before { background: #fff; }
.dp-pannes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 12px 16px; border-radius: var(--r-m); border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: 15.5px; text-align: left; cursor: pointer; transition: background-color .25s, border-color .25s, transform .25s var(--ease); }
.pn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.pn:hover { background: #fff; border-color: #fff; color: var(--navy); transform: translateY(-2px); }
.pn:hover svg { transform: translateX(3px); color: var(--cyan); }
.pn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Construction */
.construction { padding: 110px var(--pad); }
.cs-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1180px; margin: 0 auto; align-items: center; }
.cs-photos { position: relative; padding-bottom: 80px; }
.cs-a { margin: 0; width: 86%; } .cs-a picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), .6); }
.cs-b { position: absolute; right: 0; bottom: 0; width: 52%; margin: 0; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -24px rgba(var(--ink-rgb), .6); }
.cs-b picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; }
.cs-a img, .cs-b img { width: 100%; height: 100%; object-fit: cover; }
.cs-txt .sub { margin-top: 12px; }
.cs-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: c; }
.cs-etapes li { counter-increment: c; }
.cs-etapes picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; }
.cs-etapes img { width: 100%; height: 100%; object-fit: cover; }
.cs-etapes span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--grey); }
.cs-etapes span::before { content: counter(c) '. '; color: var(--cyan); }
.cs-txt.reveal .cs-etapes li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.cs-txt.reveal.in .cs-etapes li { opacity: 1; transform: none; }
.cs-txt.in .cs-etapes li:nth-child(2) { transition-delay: .1s; } .cs-txt.in .cs-etapes li:nth-child(3) { transition-delay: .2s; } .cs-txt.in .cs-etapes li:nth-child(4) { transition-delay: .3s; } .cs-txt.in .cs-etapes li:nth-child(5) { transition-delay: .4s; }

/* Qui suis-je */
.patrick { padding: 100px var(--pad); background: var(--fond-2); }
.pt-in { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: 56px; max-width: 1060px; margin: 0 auto; align-items: center; }
.pt-photo { margin: 0; } .pt-photo picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), .6); }
.pt-photo img { width: 100%; height: 100%; object-fit: cover; }
.ol-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.ol-list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; color: var(--navy); }
.ol-list svg { width: 16px; height: 16px; color: var(--cyan); stroke-width: 3; }
.ol-h { display: flex; align-items: center; gap: 8px; color: var(--grey); }
.ol-h svg { width: 18px; height: 18px; color: var(--cyan); }

/* Avis */
.avis-sec { padding: 110px var(--pad) 40px; }
.qt { background: #fff; border-color: var(--line); }
.qt .stars, .avis-band .stars { color: #E9A70E; }
.avis-band { background: var(--navy); }

/* Zone */
.carte .k-coeur, .carte .k-halo, .carte .pin { fill: var(--cyan); }
.carte .k-etiquette rect { fill: var(--navy); }

/* Devis : fiche d'intervention */
.devis-hp .devis-in { align-items: start; }
.fiche { position: relative; margin-top: 26px; padding: 18px 20px 16px; border-radius: 14px; background: #FBFAF7; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); transform: rotate(-1.2deg); }
.fiche::before { content: ''; position: absolute; left: 50%; top: -9px; width: 86px; height: 18px; margin-left: -43px; border-radius: 4px; background: rgba(43, 163, 216, .85); transform: rotate(2deg); }
.fi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.fi-logo { width: auto; height: 30px; }
.fi-titre { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.fi-lignes { display: grid; gap: 2px; margin-top: 10px; }
.fi-lignes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: 8px; transition: background-color .4s; }
.fi-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--sky); color: var(--grey); transition: background-color .4s, color .4s; }
.fi-ico svg { width: 16px; height: 16px; }
.fi-t { font-size: 13.5px; color: var(--grey); }
.fi-v { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-size: 15px; color: #67635B; font-weight: 600; }
.fi-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--ease); }
.fi-ok svg { width: 13px; height: 13px; stroke-width: 3; }
.fi-lignes li.rempli .fi-v { color: var(--ink); }
.fi-lignes li.rempli .fi-ok { opacity: 1; transform: none; }
.fi-lignes li.rempli .fi-ico { background: var(--navy); color: var(--cyan-l); }
.fi-lignes li.flash { animation: flash-ligne .9s var(--ease); }
@keyframes flash-ligne { 0% { background: rgba(43, 163, 216, .28); } 100% { background: transparent; } }
.fi-pied { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.fi-barre { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.fi-barre i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--aqua); transition: width .6s var(--ease); }
.fi-pied small { font-size: 13px; font-weight: 600; color: var(--grey); }
.fi-tampon { position: absolute; right: 18px; bottom: 44px; padding: 8px 14px; border: 3px solid var(--cyan); border-radius: 8px; color: var(--cyan); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; display: none; opacity: 0; transform: rotate(-14deg) scale(2.2); pointer-events: none; }
.fiche.fini .fi-tampon { display: block; animation: tampon .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes tampon { to { opacity: .92; transform: rotate(-14deg) scale(1); } }
.devis-hp .devis-tel { margin-top: 26px; }
.tile { transition: transform .25s var(--ease), border-color .25s, background-color .25s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(var(--ink-rgb), .5); }
.tile:has(input:checked) { border-color: var(--cyan); background: var(--sky); animation: tuile .4s var(--ease); }
@keyframes tuile { 40% { transform: scale(.96); } }
.quote .q-pane.on { animation: volet .45s var(--ease); }
@keyframes volet { from { opacity: 0; transform: translateX(24px); } }
.quote .q-bar i { transition: width .6s var(--ease); }
.quote.flash { animation: eclat 1.2s var(--ease); }
@keyframes eclat { 0% { box-shadow: 0 0 0 0 rgba(43, 163, 216, .75); } 100% { box-shadow: 0 0 0 26px rgba(43, 163, 216, 0); } }

@media (max-width: 1100px) {
  .hh-in { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .hh-form { justify-self: stretch; }
  .hh-fond::after { background: linear-gradient(180deg, rgba(246, 243, 236, .92), rgba(246, 243, 236, .82) 50%, rgba(246, 243, 236, .96)); }
  .tr-fioles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .tr-fioles li:nth-child(3) { border-left: 0; }
  .rv-in, .ln-in, .dp-in, .cs-in { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-in { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 700px) {
  /* téléphone : la photo en bandeau, le devis dès le premier écran */
  .hero-hp { padding: 0 16px 76px; background: var(--fond); }
  .hh-fond { position: relative; inset: auto; height: 132px; margin: 0 -16px 14px; }
  .hh-fond::after { background: linear-gradient(0deg, var(--fond), rgba(246, 243, 236, 0) 45%); }
  .hh-fond picture, .hh-fond img { object-position: 50% 62%; }
  .hh-in { gap: 14px; }
  .hero-hp .eyebrow, .hero-hp .lead, .hh-points, .hh-avis { display: none; }
  .hero-hp .h1 { margin-top: 0; font-size: clamp(30px, 8.4vw, 36px); }
  .hh-form { margin: 0; padding: 18px 16px 16px; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
  .hh-form .q-head h2 { font-size: 21px; }
  .hh-form .tile { min-height: 0; padding: 10px; gap: 8px; }
  .hh-form .t-ico { width: 34px; height: 34px; }
  .hh-form .q-call { display: none; }
  .bande { padding: 0 12px; margin-top: -48px; }
  .tr-tete { padding: 8px 16px; font-size: 12px; letter-spacing: .06em; } .tr-tete span + span { display: none; }
  .tr-fioles { padding: 12px 4px 14px; }
  .tr-fioles li { padding: 4px 10px; column-gap: 10px; grid-template-columns: 22px minmax(0, 1fr); }
  .fiole { width: 20px; height: 56px; }
  .tr-fioles b { font-size: 18px; } .tr-fioles small { font-size: 13px; }
  .ruban { margin-top: 34px; height: 50px; } .ruban span { font-size: 14px; padding: 0 16px; }
  .renov, .liner, .equip-sec, .construction, .patrick { padding: 72px 16px; }
  .depannage { padding: 64px 16px; }
  .avis-sec { padding: 72px 16px 24px; }
  .rv-in { gap: 18px; }
  .rv-etapes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .re { justify-content: center; min-height: 44px; padding: 6px; }
  .re span { display: none; }
  .re b { width: 30px; height: 30px; }
  .rv-vue figcaption { font-size: 14px; }
  .rv-ba { margin-top: 40px; }
  .ba-hp { aspect-ratio: 4 / 3.2; }
  .ln-in { gap: 24px; }
  .lc { min-height: 44px; padding: 6px 12px 6px 6px; font-size: 14px; }
  .lc-ech { width: 30px; height: 30px; }
  .ln-txt .btn { width: 100%; }
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .eq-body { padding: 12px 12px 14px; } .eqp h3 { font-size: 15.5px; } .eqp p { font-size: 13.5px; line-height: 1.45; }
  .eq-plus { justify-content: flex-start; }
  .dp-pannes { grid-template-columns: minmax(0, 1fr); }
  .cs-photos { padding-bottom: 54px; }
  .cs-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .cs-etapes span { font-size: 12px; }
  .pt-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pt-photo { max-width: 240px; }
  .devis-hp .devis-txt .sub, .devis-hp .devis-tel { display: none; }
  .fiche { transform: none; margin-top: 18px; padding: 14px 14px 12px; }
  .fi-lignes { display: none; }
  .fi-head { padding-bottom: 8px; }
  .fi-pied { margin-top: 10px; }
  .fi-tampon { bottom: 8px; right: 12px; font-size: 14px; padding: 4px 10px; }
  .foot-grid > div:nth-child(2) { display: none; }
  .top .logo img { height: 40px; }
  body { padding-bottom: 0; }
  .foot { padding-bottom: 108px; }
  .zely-sig { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruban-in, .hero-hp .h1 .mot, .hh-fond img { animation: none !important; }
  .bande.reveal:not(.in) .fiole i { height: var(--n); }
  .fiole i, .rv-img, .rv-img img, .ln-img { transition: none; }
  .eqp.reveal picture { clip-path: none; transition: none; }
  .cs-txt.reveal .cs-etapes li { opacity: 1; transform: none; transition: none; }
}

/* ---------- Version 5 pages (20/10) : nos métiers, nos chantiers, blocs des pages intérieures ---------- */
.services { background: var(--fond); }
.svc-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1240px; }
.g4 .svc { display: flex; flex-direction: column; background: #fff; }
.g4 .svc-body { flex: 1; display: flex; flex-direction: column; }
.g4 .svc-body .link { margin-top: auto; align-self: flex-start; }
.g4 .svc-img { aspect-ratio: 4 / 3; }
.g4 .svc-body { padding: 26px 20px 22px; }
.g4 .svc-body h3 { font-size: 21px; }
.g4 .svc-body > p { font-size: 15px; }
.g4 .svc-body li { font-size: 14.5px; }
.g4 .svc-picto { width: 58px; height: 58px; top: -29px; right: 18px; }
.g4 .pc-svg { width: 36px; height: 36px; }
.chantiers { background: #fff; border-top: 1px solid var(--line); }
.chantiers .w figcaption span, .formes .w figcaption span { display: block; }
.formes { padding-top: 20px; }
.split-sec { padding: 100px var(--pad); background: var(--fond-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1140px; margin: 0 auto; align-items: center; }
.split-photo { margin: 0; }
.split-photo picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), .6); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-txt .ol-list { margin-bottom: 26px; }
.dp-liste-sec { padding: 100px var(--pad) 90px; }
.dp-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1140px; margin: 0 auto; }
.dpc { padding: 24px 24px 26px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--aqua); }
.dpc h3 { font-size: 19px; color: var(--navy); }
.dpc p { margin-top: 8px; font-size: 15.5px; color: var(--grey); }
.etapes-sec { padding: 90px var(--pad) 100px; }
.etapes-clair { background: var(--fond-2); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none; }
.etapes li { padding: 26px 22px 24px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.etapes b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sky); color: var(--navy); font-family: var(--display); font-weight: 700; font-size: 17px; }
.etapes h3 { margin-top: 14px; font-size: 19px; color: var(--navy); }
.etapes p { margin-top: 6px; font-size: 15px; color: var(--grey); }
.chantiers { padding-bottom: 90px; } .chantiers + .relance { padding-top: 0; background: #fff; margin-bottom: 0; padding-bottom: 90px; }
@media (max-width: 1100px) {
  .svc-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 32px; }
  .dp-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .svc-grid.g4 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .g4 .svc-img { aspect-ratio: 16 / 9; }
  .split-sec, .dp-liste-sec { padding: 72px 16px; }
  .etapes-sec { padding: 64px 16px 72px; }
  .dp-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dpc { padding: 18px 18px 20px; }
  .split-txt .btn { width: 100%; }
  .chantiers { padding-bottom: 64px; } .chantiers + .relance { padding-bottom: 64px; }
}
/* Héros des pages intérieures : titre blanc sur le voile bleu nuit, bouton blanc */
.phero .h1 { color: #fff; }
.phero .btn-cyan { background: #fff; color: var(--navy); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .55); }
.phero .btn-cyan:hover { background: var(--sky); }
.phero .btn-cyan svg { color: var(--cyan); }
.phero .eyebrow { color: #fff; }
.chantiers .w img { object-position: 50% 68%; } .chantiers .w-big img { object-position: 45% 72%; }
.depannage .kicker { color: #fff; }

/* ---------- Construction en blocs polystyrène : coupe au défilement (21/10) ---------- */
.bp-t { font: 600 13px var(--text); fill: #3A4666; }
.bp-t-titre { font: 700 14px var(--display); fill: var(--navy); }
.bp-r circle { fill: var(--navy); stroke: #fff; stroke-width: 3; }
.bp-r text { font: 700 14px var(--text); fill: #fff; }
.bp-svg #bp-e2, .bp-svg #bp-e3, .bp-svg #bp-e4, .bp-svg #bp-e5, .bp-svg #bp-detail, .bp-svg .bp-r { opacity: 0; transition: opacity .6s var(--ease); }
.coupe[data-s="2"] #bp-e2, .coupe[data-s="3"] #bp-e2, .coupe[data-s="4"] #bp-e2, .coupe[data-s="5"] #bp-e2, .coupe[data-s="2"] #bp-detail, .coupe[data-s="3"] #bp-detail, .coupe[data-s="4"] #bp-detail, .coupe[data-s="5"] #bp-detail, .coupe[data-s="3"] #bp-e3, .coupe[data-s="4"] #bp-e3, .coupe[data-s="5"] #bp-e3, .coupe[data-s="4"] #bp-e4, .coupe[data-s="5"] #bp-e4, .coupe[data-s="5"] #bp-e5 { opacity: 1; }
.bp-svg .bp-bloc { opacity: 0; transform: translateY(-26px); transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--k) * .16s); }
.coupe[data-s="2"] .bp-bloc, .coupe[data-s="3"] .bp-bloc, .coupe[data-s="4"] .bp-bloc, .coupe[data-s="5"] .bp-bloc { opacity: 1; transform: none; }
.bp-svg .bp-coulage { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) .2s; }
.coupe[data-s="3"] .bp-coulage, .coupe[data-s="4"] .bp-coulage, .coupe[data-s="5"] .bp-coulage { clip-path: inset(0 0 0 0); }
.bp-svg #bp-liner { stroke-dasharray: 1100; stroke-dashoffset: 1100; transition: stroke-dashoffset 1.5s var(--ease); }
.coupe[data-s="4"] #bp-liner, .coupe[data-s="5"] #bp-liner { stroke-dashoffset: 0; }
.bp-svg #bp-eau { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease); }
.coupe[data-s="5"] #bp-eau { clip-path: inset(0 0 0 0); }
.coupe[data-s="5"] #bp-vague { animation: vague 3s ease-in-out infinite; }
.coupe[data-s="5"] #bp-soleil { transform: translate(70px, 52px); }
#bp-soleil { transition: transform .8s var(--ease); }
.coupe[data-s="1"] #bp-r1, .coupe[data-s="2"] #bp-r2, .coupe[data-s="3"] #bp-r3, .coupe[data-s="4"] #bp-r4, .coupe[data-s="5"] #bp-r5 { opacity: 1; }
.coupe:not([data-s]) #bp-e2, .coupe:not([data-s]) .bp-bloc, .coupe:not([data-s]) #bp-e3, .coupe:not([data-s]) .bp-coulage, .coupe:not([data-s]) #bp-e4, .coupe:not([data-s]) #bp-e5, .coupe:not([data-s]) #bp-eau, .coupe:not([data-s]) #bp-detail { opacity: 1; transform: none; clip-path: none; stroke-dashoffset: 0; }
.atouts-sec { padding: 100px var(--pad) 90px; background: var(--fond-2); }
.atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
.magiline-sec .cs-txt .kicker { margin-top: 0; }
@media (max-width: 1100px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .atouts-sec { padding: 72px 16px; } .atouts { grid-template-columns: minmax(0, 1fr); gap: 12px; } .bp-r text { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .bp-svg .bp-bloc, .bp-svg .bp-coulage, .bp-svg #bp-liner, .bp-svg #bp-eau { transition: none; } .coupe #bp-vague { animation: none; } }

/* ---------- Devis en ligne (21/10) : le client relit et signe son devis sur téléphone ---------- */
.dl-sec { padding: 100px var(--pad); background: #fff; border-top: 1px solid var(--line); }
.dl-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 64px; max-width: 1100px; margin: 0 auto; align-items: center; }
.dl-etapes { display: grid; gap: 14px; margin: 26px 0 30px; padding: 0; list-style: none; }
.dl-etapes li { display: flex; gap: 14px; align-items: flex-start; }
.dl-etapes b { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sky); color: var(--navy); font-family: var(--display); }
.dl-etapes strong { display: block; font-family: var(--display); font-size: 18px; color: var(--navy); }
.dl-etapes span { color: var(--grey); }
.dl-tel { justify-self: center; width: 290px; padding: 12px; border-radius: 44px; background: #0F1B29; box-shadow: 0 40px 80px -40px rgba(var(--ink-rgb), .7); }
.dl-ecran { position: relative; min-height: 520px; padding: 34px 20px 22px; border-radius: 34px; background: var(--fond); overflow: hidden; }
.dl-ecran::before { content: ''; position: absolute; top: 10px; left: 50%; width: 80px; height: 20px; margin-left: -40px; border-radius: 12px; background: #0F1B29; }
.dl-k { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.dl-t { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--navy); }
.dl-m { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); }
.dl-m small { font-size: 12px; color: var(--grey); }
.dl-l { display: grid; gap: 10px; margin: 16px 0 0; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); list-style: none; }
.dl-l li { display: flex; justify-content: space-between; gap: 10px; }
.dl-l i { display: block; height: 8px; border-radius: 4px; background: #E6E1D6; }
.dl-l i + i { width: 18%; background: #D5DEE9; }
.dl-sig { position: relative; margin-top: 16px; height: 96px; border: 1.5px dashed #B9C4D3; border-radius: 12px; background: #fff; }
.dl-sig svg { position: absolute; inset: 10px 14px; width: calc(100% - 28px); height: calc(100% - 20px); fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dl-sig path { stroke-dasharray: 420; stroke-dashoffset: 420; }
.dl-tampon { position: absolute; right: 10px; top: 22px; padding: 3px 10px; border: 2.5px solid #1F9D55; border-radius: 6px; color: #1F9D55; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: rotate(-12deg) scale(1.6); }
.dl-ok { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; opacity: .25; }
.dl-ok svg { width: 18px; height: 18px; color: var(--cyan-l); }
.dl-tel.in .dl-sig path { animation: dl-trace 1.6s var(--ease) .5s forwards; }
.dl-tel.in .dl-tampon { animation: dl-tampon .5s cubic-bezier(.2, 1.4, .4, 1) 2.2s forwards; }
.dl-tel.in .dl-ok { animation: dl-ok .5s var(--ease) 2.6s forwards; }
@keyframes dl-trace { to { stroke-dashoffset: 0; } }
@keyframes dl-tampon { to { opacity: .9; transform: rotate(-12deg) scale(1); } }
@keyframes dl-ok { to { opacity: 1; background: #1F9D55; } }
@media (max-width: 1100px) { .dl-in { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; } }
@media (max-width: 700px) { .dl-sec { padding: 72px 16px; } .dl-txt .btn { width: 100%; } .dl-tel { width: 260px; } .dl-ecran { min-height: 470px; } }
@media (prefers-reduced-motion: reduce) { .dl-sig path { stroke-dashoffset: 0; } .dl-tampon { opacity: .9; transform: rotate(-12deg); } .dl-ok { opacity: 1; background: #1F9D55; } .dl-tel.in .dl-sig path, .dl-tel.in .dl-tampon, .dl-tel.in .dl-ok { animation: none; } }
.coupe .cs p { max-width: 60ch; }

/* ---------- Mentions légales (22/10) ---------- */
.legal { padding: 60px var(--pad) 100px; }
.legal-in { max-width: 760px; margin: 0 auto; }
.legal .crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grey); }
.legal .crumbs svg { width: 14px; height: 14px; }
.legal .h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 50px); }
.legal h2 { margin-top: 38px; font-size: 22px; color: var(--navy); }
.legal p { margin-top: 10px; line-height: 1.65; color: #2B3446; }
.legal a { color: var(--cyan-d); text-decoration: underline; }
@media (max-width: 700px) { .legal { padding: 36px 16px 72px; } }
@media (max-width: 700px) { .foot-legal a { display: inline-block; padding: 14px 4px; margin: -14px -4px; } }

/* ---------- Héros photo (23/10, demande de Patrick via Jordan) : la photo et le nom d'abord, le devis arrive ensuite ---------- */
.hero-photo .hh-fond picture, .hero-photo .hh-fond img { object-position: 50% 55%; }
.hero-photo .hh-fond::after { background: linear-gradient(90deg, rgba(246, 243, 236, .94), rgba(246, 243, 236, .78) 30%, rgba(246, 243, 236, .12) 52%, rgba(246, 243, 236, 0)), linear-gradient(0deg, rgba(246, 243, 236, 1), rgba(246, 243, 236, 0) 18%); }
.hero-photo { min-height: min(820px, calc(100vh - 110px)); display: flex; align-items: center; }
.hero-photo .hh-in { width: 100%; }
.hero-photo .hh-nom { font-size: clamp(42px, 5.4vw, 76px); line-height: .98; letter-spacing: -.035em; }
.hh-accroche { margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.02em; color: var(--navy); }
.hh-accroche .mot { font-style: normal; color: var(--cyan); background: linear-gradient(90deg, var(--aqua), var(--cyan)) no-repeat 0 92% / 100% 5px; border-radius: 3px; animation: trace 1s var(--ease) both 1.1s; }
/* le devis glisse en place après la photo */
.hh-differe { animation: hh-arrive .7s var(--ease) both 2.5s; }
@keyframes hh-arrive {
  from { opacity: 0; visibility: hidden; transform: translateY(24px); }
  to { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 1100px) {
  .hero-photo { min-height: 0; display: block; }
  .hero-photo .hh-fond::after { background: linear-gradient(180deg, rgba(246, 243, 236, .25), rgba(246, 243, 236, .7) 45%, rgba(246, 243, 236, .97) 75%); }
}
@media (max-width: 700px) {
  /* téléphone : la photo en grand d'abord, le nom dessus, puis le devis arrive */
  .hero-photo .hh-fond { height: 300px; margin-bottom: 0; }
  .hero-photo .hh-fond::after { background: linear-gradient(0deg, var(--fond) 2%, rgba(246, 243, 236, 0) 40%); }
  .hero-photo .hh-fond picture, .hero-photo .hh-fond img { object-position: 46% 50%; }
  .hero-photo .hh-txt { margin-top: -54px; position: relative; }
  .hero-photo .eyebrow { display: inline-flex; font-size: 12.5px; padding: 6px 12px 6px 10px; }
  .hero-photo .hh-nom { margin-top: 10px; font-size: clamp(34px, 10vw, 42px); }
  .hh-accroche { font-size: 20px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-accroche .mot { animation: none !important; }
  .hh-differe { animation: hh-arrive .001s linear both 2.5s; animation-delay: 2.5s !important; animation-duration: .001s !important; }
  @keyframes hh-arrive {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }
}
/* réglages de lisibilité du héros photo */
.hero-photo .hh-fond::after { background: linear-gradient(90deg, rgba(246, 243, 236, .95), rgba(246, 243, 236, .88) 34%, rgba(246, 243, 236, .45) 50%, rgba(246, 243, 236, 0) 64%), linear-gradient(0deg, rgba(246, 243, 236, 1), rgba(246, 243, 236, 0) 18%); }
@media (max-width: 1100px) { .hero-photo .hh-fond::after { background: linear-gradient(180deg, rgba(246, 243, 236, .25), rgba(246, 243, 236, .7) 45%, rgba(246, 243, 236, .97) 75%); } }
@media (max-width: 700px) {
  .hero-photo .hh-fond::after { background: linear-gradient(0deg, var(--fond) 0%, rgba(246, 243, 236, .85) 12%, rgba(246, 243, 236, 0) 36%); }
  .hero-photo .hh-txt { margin-top: -38px; }
  .hero-photo .hh-nom { margin-top: 14px; }
}

/* Chiffres et détails vivants : effets ponctuels au défilement. */
.stat-value { display: inline-block; }
.stat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-stat] { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; transform-origin: 50% 85%; }
[data-stat="4.9"] { min-width: 2.5ch; }
.stat-fini { animation: stat-rebond .65s var(--ease) both; }
@keyframes stat-rebond {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-6px) scale(1.09); }
  68% { transform: translateY(1px) scale(.98); }
}
.svc.reveal, .eqp.reveal, .w.reveal { transition-delay: var(--arrive-delai, 0ms); }
.svc.in .svc-picto { animation: picto-arrive .7s var(--ease) backwards; animation-delay: var(--arrive-delai, 0ms); }
@keyframes picto-arrive { from { transform: translateY(10px) rotate(-8deg) scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }
.carte-active .v-zone circle { transform-box: fill-box; transform-origin: center; animation: repere-pulse 1s ease-out 2; }
@keyframes repere-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.5); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .q-option, .quote label:has(input[type="radio"]) { transition: background-color .2s, border-color .2s, box-shadow .2s; }
  .svc:hover .svc-picto, .svc:focus-visible .svc-picto { transform: translateY(-3px); transition: transform .25s var(--ease); }
  .quote .btn:hover svg { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .stat-fini, .svc.in .svc-picto, .carte-active .v-zone circle { animation: none !important; }
  .svc.reveal, .eqp.reveal, .w.reveal { transition-delay: 0s; }
}

@media (max-width: 700px) {
  .quote .q-actions { align-items: stretch; }
  .quote .q-next { min-width: 0; padding-inline: 12px; font-size: 14px; white-space: normal; line-height: 1.25; }
  .quote .q-next svg { flex-shrink: 0; }
  .quote .q-back { flex-shrink: 0; padding-inline: 14px; }
}
@media (max-width: 380px) {
  .mbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
  .mbar .btn { min-width: 0; padding-inline: 8px; font-size: 13px; gap: 6px; white-space: normal; line-height: 1.2; }
  .mbar svg { flex-shrink: 0; }
}
/* Le zoom d'entrée des pages intérieures reste à l'intérieur de la photo. */
.phero-img { overflow: hidden; }
/* Contenir les débords visuels des décors et animations sans élargir la page. */
html, body { overflow-x: clip; }

/* Réalisations du client : albums légers, agrandissement et parcours au clavier. */
.hh-fond { overflow: hidden; }
.hh-devis-slot { min-width: 0; }
.hh-experience { font-weight: 700; color: var(--cyan); margin: 16px 0 0; }
.client-gallery, .client-services, .client-maintenance { max-width: 1240px; margin: 0 auto; padding: 72px 24px; }
.client-albums { display: grid; gap: 48px; }
.client-album { min-width: 0; scroll-margin-top: 120px; }
.client-album-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.client-album-head h3 { font-size: clamp(22px, 3vw, 30px); color: var(--navy); line-height: 1.2; margin-bottom: 8px; }
.client-album-head p { max-width: 760px; line-height: 1.6; }
.client-photo-count { flex-shrink: 0; border-radius: 30px; background: #e2f2f7; color: var(--navy); padding: 8px 12px; font-size: 13px; font-weight: 700; }
.client-photo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.client-photo { min-width: 0; margin: 0; }
.client-photo button { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #dce9ed; border-radius: 18px; overflow: hidden; cursor: zoom-in; }
.client-photo picture, .client-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.client-photo img { transition: transform .35s ease; }
.client-photo button:hover img { transform: scale(1.035); }
.client-photo button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.client-photo figcaption { font-size: 13px; line-height: 1.45; padding: 10px 2px 0; color: var(--navy); }
.client-photo-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; display: grid; place-items: center; background: white; color: var(--navy); border-radius: 50%; }
.client-more { margin-top: 22px; }
.client-more summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; padding: 15px 20px; border: 1px solid #cbdbe1; border-radius: 12px; color: var(--navy); font-weight: 700; list-style: none; }
.client-more summary::-webkit-details-marker { display: none; }
.client-more[open] summary { margin-bottom: 20px; }
.client-more[open] summary span { transform: rotate(45deg); }
.client-gallery-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.client-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.client-service { padding: 26px; background: white; border-radius: 20px; }
.client-service > span { color: var(--cyan); font-weight: 700; }
.client-service h3 { font-size: 21px; margin: 12px 0; color: var(--navy); }
.client-service p { line-height: 1.65; }
.client-maintenance { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.client-maintenance picture, .client-maintenance img { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 24px; }
.client-maintenance h2 { font-size: clamp(28px,3vw,42px); color: var(--navy); line-height: 1.15; margin-bottom: 20px; }
.client-maintenance p { line-height: 1.7; margin-bottom: 18px; }
.nu-blanc { background: #f5f3e9; }
.lb-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0; color: white; }
.lb-nav button { width: 44px; height: 44px; border: 1px solid #ffffff88; border-radius: 50%; background: transparent; color: white; font-size: 23px; cursor: pointer; }
.lightbox figure { max-height: 95dvh; overflow-y: auto; }
.lightbox figure > img { max-height: 65dvh; object-fit: contain; }
@media(max-width:1100px) { .client-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
  .client-gallery, .client-services, .client-maintenance { padding: 48px 16px; }
  .client-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .client-album-head { flex-direction:column; gap:12px; }
  .client-service-grid, .client-maintenance { grid-template-columns:1fr; }
  .client-photo figcaption { font-size:12px; }
  .hero-photo { background:var(--navy); padding:24px 16px 32px; }
  .hero-photo .hh-fond { position:absolute; inset:0 0 auto; height:560px; margin:0; overflow:hidden; }
  .hero-photo .hh-fond img { animation:none !important; transform:none !important; }
  .hero-photo .hh-fond::after { background:linear-gradient(180deg,rgba(9,35,57,.03) 10%,rgba(9,35,57,.55) 38%,var(--navy) 96%); }
  .hero-photo .hh-in { display:flex; flex-direction:column; gap:24px; }
  .hero-photo .hh-txt { width:100%; margin:0 !important; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
  .hero-photo .eyebrow { font-size:11px; white-space:normal; max-width:100%; padding:10px 12px; line-height:1.4; }
  .hero-photo .hh-nom { color:white; font-size:clamp(34px,10vw,48px); margin-top:18px; }
  .hero-photo .hh-accroche { color:white; font-size:22px; }
  .hero-photo .hh-accroche .mot { color:#8ed9ef; }
  .hero-photo .hh-experience { color:#8ed9ef; font-size:14px; margin-top:14px; }
  .hero-photo .hh-txt .lead { display:block; color:#f0f6fa; font-size:14px; line-height:1.55; margin-top:12px; }
  .hero-photo .a-in, .hero-photo .ln > span { animation:none !important; opacity:1; transform:none; }
  .hero-photo .hh-devis-slot { width:100%; }
  .hero-photo .hh-form { min-height:0; }
  .hero-photo .hh-devis-slot.hh-differe { overflow:hidden; animation:hh-mobile-arrive .7s var(--ease) both 2.5s; }
  .hero-photo + .bande { margin-top:0; padding-top:24px; }
}
@keyframes hh-mobile-arrive { from { max-height:0; opacity:0; visibility:hidden; } to { max-height:1400px; opacity:1; visibility:visible; } }
@media(max-width:700px) and (prefers-reduced-motion:reduce) { .hero-photo .hh-devis-slot.hh-differe { animation-duration:.001s !important; animation-delay:2.5s !important; } }
.client-photo picture, .client-photo img { height: auto; }
.client-maintenance img { height:auto; }
.client-maintenance ul { margin:0 0 24px; padding-left:20px; line-height:1.8; }
@media(max-width:700px) { .lightbox .lb-devis { width:100%; max-width:100%; box-sizing:border-box; white-space:normal; font-size:14px; line-height:1.4; padding:14px 16px; } .lightbox .lb-devis svg { flex-shrink:0; } }

/* Informations de service et réalisation documentée. */
.seo-faq { max-width:1000px; margin:0 auto; padding:56px 24px; }
.seo-faq h2 { font-family:var(--display); color:var(--navy); font-size:clamp(26px,3.2vw,38px); line-height:1.2; margin:10px 0 24px; }
.seo-faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.seo-faq summary { cursor:pointer; font-weight:700; color:var(--navy); line-height:1.5; }
.seo-faq details p { margin:12px 0 0; line-height:1.75; max-width:780px; }
.seo-related { margin:24px 0; line-height:1.8; }
.seo-related a, .seo-case a:not(.btn) { color:#176485; text-decoration:underline; text-underline-offset:3px; }
.seo-case { max-width:1120px; margin:0 auto; padding:40px 24px 72px; color:var(--navy); }
.seo-case h1 { font-family:var(--display); font-size:clamp(32px,4.4vw,58px); line-height:1.12; margin:24px 0; max-width:950px; }
.seo-case h2 { font-family:var(--display); font-size:clamp(24px,3vw,34px); margin:40px 0 16px; line-height:1.2; }
.seo-case p, .seo-case li { line-height:1.8; }
.seo-case ul { padding-left:24px; margin:18px 0; }
.seo-case figure { margin:28px 0; min-width:0; }
.seo-case picture, .seo-case img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:20px; }
.seo-case figcaption { font-size:14px; margin:10px 0; line-height:1.5; }
.seo-case-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.seo-crumb { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; line-height:1.6; }
@media(max-width:700px) { .seo-case-pair { grid-template-columns:1fr; gap:0; } .seo-case,.seo-faq { padding-inline:16px; } }
.seo-case .lead { color:#3a4553; margin:16px 0 24px; line-height:1.65; }
.seo-case > header { margin-top:24px; }
/* Une offre explicite et des informations lisibles près de l’action. */
.hh-accroche { line-height:1.3; max-width:600px; text-wrap:pretty; }
.q-demo-note { color:#36556b; background:#eaf4f8; border:1px solid #c6e0eb; border-radius:10px; padding:9px 11px; font-size:12px !important; line-height:1.5; margin:12px 0 !important; }
.q-privacy { color:#4a5c68; font-size:12px; line-height:1.6; margin:14px 0 8px; }
.q-privacy a { color:#176485; text-decoration:underline; text-underline-offset:2px; }
.privacy-page { max-width:1000px; }
.privacy-page h2 { scroll-margin-top:110px; }
.privacy-page li { margin-bottom:12px; }
.privacy-notice { padding:20px 24px; border-left:4px solid var(--cyan); background:#e9f4f8; border-radius:12px; margin:24px 0 32px; line-height:1.7; }
@media(max-width:700px) { .hero-photo .hh-accroche { font-size:20px; line-height:1.3; margin-top:10px; } .hero-photo .hh-txt { min-height:450px; } .privacy-notice { padding:16px; } }
@media(hover:hover) { .seo-related a:hover,.q-privacy a:hover { color:var(--navy); } }

/* Rénovation : synthèse en trois cartes uniquement sur téléphone. */
.client-service-grid-mobile{display:none!important}
@media(max-width:640px){.client-service-grid-desktop{display:none!important}.client-service-grid-mobile{display:grid!important;gap:12px}.client-service-grid-mobile .client-service{padding:20px}.client-service-grid-mobile p{margin-bottom:0}}

.map-tip{max-width:calc(100% - 24px);white-space:normal;width:max-content}

/* Parcours téléphone : détails accessibles, moins de répétitions. */
.mobile-reading-hint{display:none}
@media(max-width:700px){
  .services,.patrick,.liner,.equip-sec,.construction,.depannage,.client-services,.client-gallery,.client-maintenance,.etapes-sec,.atouts-sec,.dl-sec{padding-top:40px;padding-bottom:40px}
  .sec-head{margin-bottom:24px}
  .svc-grid{gap:12px}
  .svc{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:stretch}
  .svc-img{aspect-ratio:auto;min-height:156px;height:100%}
  .svc-img img{height:100%;object-fit:cover}
  .svc-body{padding:16px}
  .svc-body h3{font-size:20px}
  .svc-body p{font-size:14px;line-height:1.45}
  .svc-body ul,.svc-picto,.svc-tag{display:none}
  .svc-body .link{margin-top:10px;font-size:14px}
  .relance,.ruban{display:none}
  .dl-tel,.dl-etapes{display:none}
  .dl-in{gap:0}
  .dl-txt .btn{margin-top:18px}
  .pt-photo picture{aspect-ratio:16/9;max-height:220px}
  .pt-photo img{object-position:center 35%}
  .quotes-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 14px;max-width:100%;align-items:stretch}
  .quotes-grid>.qt{flex:0 0 92%;scroll-snap-align:start;margin:0;box-sizing:border-box;padding:22px}
  .quotes-grid>.qt blockquote{font-size:17px;line-height:1.6}
  .mobile-reading-hint{display:block;color:var(--grey);font-size:13px;margin:12px 0}
  .avis-sec{padding:40px 16px 12px}
  .avis-band{padding:26px 16px}
  .avis-band p{display:none}
  .client-albums{gap:30px}
  .client-album-head{gap:8px;margin-bottom:14px}
  .client-album-head h3{font-size:22px}
  .client-album-head p{font-size:14px;line-height:1.5}
  .client-more{margin-top:14px}
  .devis-hp .fiche{display:none}
  .devis-hp .devis-in{gap:20px}
  .devis-hp{padding-top:40px;padding-bottom:40px}
}
@media(max-width:350px){.svc{grid-template-columns:80px minmax(0,1fr)}.svc-body{padding:14px 12px}}
@media(max-width:700px){.g4 .svc{display:grid;grid-template-columns:100px minmax(0,1fr)}.g4 .svc-img{aspect-ratio:auto;min-height:156px;height:100%}.g4 .svc-body{padding:16px;min-width:0}.g4 .svc-body .link{margin-top:12px}}
@media(max-width:350px){.g4 .svc{grid-template-columns:80px minmax(0,1fr)}.g4 .svc-body{padding:14px 12px}}
@media(max-width:700px){main .reveal{opacity:1;transform:none;transition:none}}

#patrick .sub{text-wrap:balance}

/* Comparaison factuelle, accessible à la demande pour garder la lecture courte. */
.liner-compare{margin:18px 0;color:var(--navy);border:1px solid var(--line);border-radius:12px;background:#fff}
.liner-compare summary{cursor:pointer;padding:14px 16px;font-weight:600;line-height:1.5}
.liner-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4px 16px 12px}
.liner-compare h3{font-size:17px;margin:0 0 8px}
.liner-compare-grid p,.liner-compare-note{font-size:14px;line-height:1.65}
.liner-compare-note{padding:0 16px 16px;margin:0}
@media(max-width:380px){.liner-compare-grid{grid-template-columns:1fr;gap:14px}}

.liner-compare summary{display:flex;justify-content:space-between;gap:12px}.liner-compare summary::after{content:"+";flex-shrink:0}.liner-compare[open] summary::after{content:"−"}