/* JAM DECO EVENTS · accueil v2 · DA « Nuancier Signature » (nuancier-plus), 19/10/2026
   Règle des coins : tout est doux. Cartes 16 px, panneaux 20 px, photos internes 10 px (concentriques aux cartes),
   boutons 12 px, champs 10 px, puces 8 px, filtres en pilule. Un seul thème clair, un seul accent : le jaune. */

@font-face { font-family: 'Figtree'; src: url(fonts/figtree-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(fonts/figtree-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(fonts/figtree-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(fonts/figtree-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage-grotesque-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage-grotesque-800-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --bg: #F5F6F3; --surface: #FFFFFF; --bg-2: #ECEEEA;
  --ink: #13223B; --ink-2: #2A3954; --muted: #4F5B6E;
  --line: rgba(19, 34, 59, .12); --line-2: rgba(19, 34, 59, .28);
  --jaune: #F2C230; --jaune-doux: #FBEFC4; --marine-doux: #E4E9F2;
  --m1: #13223B; --m2: #24395F; --m3: #3A5480; --m4: #5C76A3;
  --j1: #F2C230; --j2: #F4CC51; --j3: #F6D671; --j4: #F9DF92; --j5: #FBE9B3;
  --wa: #187A45; --wa-icon: #1F8F4E;
  --r-card: 16px; --r-panel: 20px; --r-photo: 10px; --r-btn: 12px; --r-field: 10px; --r-chip: 8px;
  --sh: 0 1px 2px rgba(19, 34, 59, .06), 0 16px 36px -16px rgba(19, 34, 59, .24);
  --sh-hover: 0 2px 4px rgba(19, 34, 59, .07), 0 22px 44px -18px rgba(19, 34, 59, .32);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --f-title: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1320px; --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --section: clamp(64px, 8vw, 112px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-title); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
mark { color: inherit; background: linear-gradient(transparent 62%, var(--jaune) 62% 92%, transparent 92%); padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.i { width: 20px; height: 20px; flex: none; fill: currentColor; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--r-btn); font-weight: 600; text-decoration: none; transition: transform 160ms var(--ease-out); }
.skip-link:focus { transform: translateY(76px); }

.h2 { font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.028em; }
.h3 { font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 62ch; }
.block { margin-top: clamp(64px, 7vw, 96px); }

/* Carré de famille : marine plein (Aménagement), jaune cerclé de marine (Sols) */
.fam-sq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.fam-sq--a { background: var(--m1); }
.fam-sq--s { background: var(--jaune); box-shadow: inset 0 0 0 1px var(--ink); }

/* Étiquette de famille (seules « étiquettes » de la page) */
.tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px 6px 10px; border-radius: 999px; font: 700 13.5px/1 var(--f-body); letter-spacing: .02em; color: var(--ink); }
.tag--a { background: var(--marine-doux); }
.tag--s { background: var(--jaune-doux); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.link-arrow .i { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
  .link-arrow:hover .i { transform: translateX(3px); }
}

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-btn); font: 600 16px/1.1 var(--f-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 200ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn .i { width: 19px; height: 19px; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16.5px; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 15px; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(19, 34, 59, .2), 0 10px 22px -12px rgba(19, 34, 59, .55); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--wa .i { fill: var(--wa-icon); }
.btn--wa-solid { background: var(--wa); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--m2); }
  .btn--ghost:hover { border-color: var(--ink); }
  .btn--wa-solid:hover { background: #136A3B; }
}

/* ---------- En-tête ---------- */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header { background: #fff; } }
@media (prefers-reduced-transparency: reduce) { .header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.header__in { height: 100%; display: flex; align-items: center; gap: 18px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 27px; height: 40px; flex: none; }
.brand__mark .bm-j { fill: var(--jaune); }
.brand__mark .bm-i { fill: var(--ink); }
.brand__mark .bm-s { fill: #F5F6F3; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__word b { font-family: var(--f-title); font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.brand__word span { font-weight: 600; font-size: 10.5px; letter-spacing: .42em; margin-top: 4px; color: var(--ink-2); }
.brand__base { margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.2; white-space: nowrap; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__toggle, .nav__link { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 600 15.5px/1 var(--f-body); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease; }
.nav__caret { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.nav__toggle[aria-expanded="true"] { background: var(--bg-2); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav__toggle:hover, .nav__link:hover { background: var(--bg-2); } }
.header__tel { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px; font-weight: 700; font-size: 15.5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header__tel .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .header__tel:hover span { text-decoration: underline; text-underline-offset: 4px; } }

/* Grands menus */
.mega { position: absolute; top: calc(100% + 12px); left: -8px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 2px 6px rgba(19, 34, 59, .06), 0 28px 60px -24px rgba(19, 34, 59, .38); padding: 10px; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mega.is-open { opacity: 1; transform: none; transition-duration: 180ms; }
.mega--a { width: min(880px, calc(100vw - 48px)); }
.mega--s { width: min(440px, calc(100vw - 48px)); }
.mega__grid { display: grid; grid-template-columns: 1.4fr 1fr .85fr; gap: 8px; }
.mega__col { padding: 12px 8px; border-radius: 12px; }
.mega__col--key { background: var(--marine-doux); }
.mega--s .mega__col--key { background: var(--jaune-doux); }
.mega__title { margin: 0 0 6px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.mega ul { display: grid; gap: 2px; }
.mega a:not(.link-arrow) { display: block; padding: 9px 10px; border-radius: var(--r-chip); text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ink); transition: background-color 150ms ease; }
.mega a small, .drawer a small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .mega__col a:hover { background: var(--bg); }
  .mega__col--key a:hover { background: rgba(255, 255, 255, .7); }
}
.mega__foot { margin: 6px 0 0; padding: 12px 18px 8px; border-top: 1px solid var(--line); }
.mega__foot .link-arrow { font-size: 15px; }

/* Burger et tiroir mobile */
.burger { display: none; width: 46px; height: 46px; margin-left: 4px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface); cursor: pointer; padding: 0; position: relative; flex: none; transition: transform 140ms var(--ease-out); }
.burger:active { transform: scale(.97); }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 200ms var(--ease-out), opacity 150ms ease; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer { position: fixed; z-index: 45; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-10px); transition: opacity 200ms var(--ease-drawer), transform 240ms var(--ease-drawer); }
.drawer.is-open { opacity: 1; transform: none; transition-duration: 280ms, 320ms; }
.drawer__in { padding: 16px var(--gutter) calc(110px + env(safe-area-inset-bottom)); display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.drawer__fam { border-radius: var(--r-card); overflow: hidden; }
.drawer__fam--a { background: var(--marine-doux); }
.drawer__fam--s { background: var(--jaune-doux); }
.drawer__toggle { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; border: 0; background: none; cursor: pointer; font: 800 21px/1 var(--f-title); color: var(--ink); text-align: left; }
.drawer__toggle .fam-sq { width: 12px; height: 12px; }
.drawer__caret { margin-left: auto; width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.drawer__toggle[aria-expanded="true"] .drawer__caret { transform: rotate(180deg); }
.drawer__panel { padding: 0 10px 14px; }
.drawer__title { padding: 10px 10px 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.drawer__panel a:not(.link-arrow) { display: block; padding: 10px; border-radius: var(--r-chip); text-decoration: none; font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.3; }
.drawer__all { padding: 10px 10px 0; }
.drawer__links { display: grid; gap: 2px; padding: 6px 0; }
.drawer__links a { display: flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: var(--r-card); background: var(--surface); text-decoration: none; font: 700 18px/1 var(--f-title); color: var(--ink); }
.drawer__links li + li { margin-top: 6px; }
.drawer__ctas { display: grid; gap: 10px; margin-top: 6px; }
.drawer__ctas .btn { width: 100%; min-height: 54px; }

/* ---------- Carte échantillon (composant signature) ---------- */
.swatch { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--surface); border-radius: var(--r-card); padding: 6px 6px 0; box-shadow: var(--sh); text-decoration: none; color: var(--ink); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.swatch picture { flex: 1 1 auto; min-height: 0; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch__label { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 6px; font: 600 13.5px/1.3 var(--f-body); color: var(--ink); }
.swatch:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .swatch:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
}
.photo-card { background: var(--surface); border-radius: var(--r-card); padding: 6px 6px 0; box-shadow: var(--sh); }
.photo-card picture { border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero ---------- */
.hero { padding: clamp(28px, 4vw, 52px) 0 clamp(36px, 3.5vw, 48px); }
.hero__grid { display: grid; grid-template-columns: 47fr 53fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.hero__title { font-weight: 800; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.hero__sub { margin-top: 22px; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; max-width: 34em; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr .72fr; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px; height: clamp(520px, calc(100dvh - 160px), 660px);
  grid-template-areas: "barber snack tv" "barber snack tv" "atelier parking piscine" "atelier parking sdb"; }
.mosaic__item { min-height: 0; min-width: 0; }
.mosaic__item--barber { grid-area: barber; }
.mosaic__item--snack { grid-area: snack; }
.mosaic__item--tv { grid-area: tv; }
.mosaic__item--atelier { grid-area: atelier; }
.mosaic__item--parking { grid-area: parking; }
.mosaic__item--piscine { grid-area: piscine; }
.mosaic__item--sdb { grid-area: sdb; }
/* Basse définition : jamais en grand (piscine 450 px, salle de bains 480 px de large) */
.mosaic__item--piscine .swatch, .mosaic__item--sdb .swatch { max-width: 300px; }

/* Entrée : l'éventail se referme (une seule fois, 870 ms au total) */
@media (prefers-reduced-motion: no-preference) {
  .mosaic__item { animation: fan-close 600ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 45ms); transform-origin: 50% 100%; }
  @keyframes fan-close { from { opacity: 0; transform: translateY(16px) rotate(var(--r)) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic__item { animation: fade-in 150ms ease backwards; }
  @keyframes fade-in { from { opacity: 0; } }
}

/* ---------- Les deux familles ---------- */
.familles { padding: clamp(16px, 2vw, 24px) 0 0; }
.familles__title { max-width: 30ch; }
@media (min-width: 480px) { .keep { white-space: nowrap; } }
.familles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); }
.fam { display: flex; flex-direction: column; border-radius: var(--r-panel); padding: clamp(24px, 3vw, 40px); }
.fam--a { background: var(--marine-doux); }
.fam--s { background: var(--jaune-doux); }
.fam .tag { align-self: flex-start; background: var(--surface); }
.fam__title { font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -.025em; max-width: 20ch; }
.fam__text { margin-top: 12px; max-width: 46ch; }
.fam__lots { margin-top: 18px; font-weight: 600; color: var(--ink); }
.fam__btn { align-self: flex-start; margin-top: auto; }
.fam .fanbox { margin: 24px 0 26px; }
.fam--a .fam__lots { margin-bottom: 26px; }
.fam--a .fanbox { margin-bottom: 0; }

/* Puces de nuancier : une bande par métier, de la teinte la plus foncée à la plus claire */
.fanbox { padding: 6px; background: var(--surface); border-radius: 14px; box-shadow: var(--sh); }
.fan { display: grid; gap: 4px; }
.fan__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.fan__pics picture { aspect-ratio: 16 / 10; border-radius: var(--r-chip); overflow: hidden; background: var(--bg-2); }
.fan__pics img { width: 100%; height: 100%; object-fit: cover; }
.fan a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 18px; border-radius: var(--r-chip); text-decoration: none; font: 600 16.5px/1.25 var(--f-body); transition: transform 180ms var(--ease-out); }
.fan a .i { width: 18px; height: 18px; }
.fan--a a { color: #fff; }
.fan--a li:nth-child(1) a { background: var(--m1); }
.fan--a li:nth-child(2) a { background: var(--m2); }
.fan--a li:nth-child(3) a { background: var(--m3); }
.fan--s a { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .06); }
.fan--s li:nth-child(1) a { background: var(--j1); }
.fan--s li:nth-child(2) a { background: var(--j2); }
.fan--s li:nth-child(3) a { background: var(--j3); }
.fan--s li:nth-child(4) a { background: var(--j4); }
.fan--s li:nth-child(5) a { background: var(--j5); }
.fan a:active { transform: scale(.985); }
.fan a:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .fan a:hover { transform: translateX(6px); } }

/* En bref */
.bref { padding: clamp(20px, 2.5vw, 32px) 0 0; }
.bref__list { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); }
.bref__list li { display: flex; align-items: flex-start; gap: 10px; padding: 20px 22px; font-weight: 600; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.bref__list li + li { border-left: 1px solid var(--line); }
.bref__list .i { width: 18px; height: 18px; margin-top: 1px; padding: 3px; box-sizing: content-box; border-radius: 6px; background: var(--marine-doux); color: var(--ink); }

/* ---------- Aménagement ---------- */
.amen { padding: var(--section) 0; }
.amen__open { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.amen__intro .lead { margin-top: 18px; }
.exergue { margin: 26px 0 22px; padding: 16px 20px; border-left: 4px solid var(--ink); border-radius: 0 12px 12px 0; background: var(--marine-doux); font: 800 clamp(21px, 1.9vw, 26px)/1.2 var(--f-title); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.amen__photo { max-width: 1100px; }
.amen__photo picture { aspect-ratio: 1103 / 827; }

.shops { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto; gap: clamp(16px, 2vw, 24px); margin-top: clamp(56px, 6vw, 88px); }
.shop { display: grid; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 6px; }
.shop__media { min-width: 0; min-height: 0; }
.shop__media picture { width: 100%; height: 100%; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.shop__media img { width: 100%; height: 100%; object-fit: cover; }
.shop__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; }
.shop__title { font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.shop__title a, .floor h3 a, .trade h4 a, .entry h4 a { display: inline; text-decoration: none; color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 240ms var(--ease-out); }
.shop__title .i, .floor h3 .i, .trade h4 .i, .entry h4 .i { display: inline-block; vertical-align: -2px; width: 18px; height: 18px; margin-left: 6px; }
@media (hover: hover) and (pointer: fine) {
  .shop__title a:hover, .floor h3 a:hover, .trade h4 a:hover, .entry h4 a:hover { background-size: 100% 1.5px; }
}
.shop--lg { grid-row: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shop--lg .shop__media picture { min-height: 460px; }
.shop--lg .shop__body { padding: 24px 22px 20px; justify-content: flex-start; }
.shop--lg .shop__title { font-size: clamp(22px, 2vw, 28px); }
.shop--row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.shop--row .shop__media picture { min-height: 220px; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.thumbs li { width: 76px; height: 76px; border-radius: var(--r-chip); overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.thumbs picture, .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.shop--lg .thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop--lg .thumbs li { width: auto; height: auto; aspect-ratio: 1 / 1; }
.shop--lg .thumbs li:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Cartes à lien étiré : toute la carte mène à la page métier */
.shop, .trade, .floor, .entry, .lot { position: relative; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.shop__title a::after, .trade h4 a::after, .floor h3 a::after, .entry h4 a::after, .lot h4 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.shop:has(a:focus-visible), .trade:has(a:focus-visible), .floor:has(a:focus-visible), .entry:has(a:focus-visible), .lot:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.shop:has(a:active), .trade:has(h4 a:active), .floor:has(a:active), .entry:has(a:active), .lot:has(a:active) { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .shop:has(.shop__title a):hover, .trade:has(h4 a):not(.trade--plain):hover, .floor:not(.floor--pool):hover, .entry:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
  .floor--pool:hover, .trade--plain:hover { transform: translateY(-4px); }
  .lot:has(a):hover { transform: translateY(-2px); }
}

/* Lots */
.lots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.lot { background: var(--surface); border-radius: var(--r-chip); padding: 20px 22px 20px 24px; box-shadow: inset 4px 0 0 var(--ink), 0 1px 2px rgba(19, 34, 59, .05); }
.lot--s { box-shadow: inset 4px 0 0 var(--jaune), 0 1px 2px rgba(19, 34, 59, .05); }
.lot h4 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.lot h4 a { display: inline; text-decoration: none; color: var(--ink); }
.lot h4 .i { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin-left: 8px; transition: transform 200ms var(--ease-out); }
.lot p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .lot h4 a:hover { text-decoration: underline; text-underline-offset: 4px; } .lot h4 a:hover .i { transform: translateX(3px); } }

/* Étapes : frise reliée par un filet */
.steps__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; position: relative; counter-reset: none; }
/* Le filet relie exactement le centre du cercle 1 au centre du cercle 5 (cercle : marge 18 px + rayon 23 px) */
.steps__list::before { content: ''; position: absolute; left: 41px; right: calc((100% - 4 * 14px) / 5 - 41px); top: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin-left: 18px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 19px/1 var(--f-title); box-shadow: 0 0 0 6px var(--bg); }
.step h4 { margin-top: 14px; padding: 18px 18px 0; width: 100%; font-weight: 700; font-size: 18.5px; line-height: 1.2; background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0; }
.step p { width: 100%; flex: 1; padding: 8px 18px 20px; font-size: 15.5px; line-height: 1.5; background: var(--surface); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 16px 36px -22px rgba(19, 34, 59, .3); }

/* Pourquoi une seule équipe */
.why { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.why__photo { max-width: 360px; }
.why__photo picture { aspect-ratio: 600 / 696; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin: 28px 0 32px; }
.why__grid h4 { font-weight: 700; font-size: 19.5px; line-height: 1.2; padding-top: 14px; border-top: 2px solid var(--ink); }
.why__grid p { margin-top: 8px; font-size: 16px; line-height: 1.55; }

/* Métiers du chantier : grille à rythme variable */
.trades__head { max-width: 62ch; }
.trades__head p { margin-top: 12px; }
.trades__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: auto; gap: clamp(14px, 1.6vw, 20px); margin-top: 28px; }
.trade { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 6px; }
.trade__media picture { aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.trade--wide .trade__media picture { aspect-ratio: 1103 / 694; }
.trade--wide .trade__media picture, .trade:not(.trade--wide):not(.trade--plain):not(.trade--line) .trade__media picture { height: 260px; aspect-ratio: auto; }
.trade__media img { width: 100%; height: 100%; object-fit: cover; }
.trade__body { padding: 16px 14px 14px; }
.trade h4 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.trade__body p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
.trade--plain { grid-column: span 2; flex-direction: row; align-items: center; gap: 4px; background: var(--marine-doux); box-shadow: none; padding: 18px 18px 18px 22px; }
.trade__icon { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 14px; background: var(--ink); color: var(--jaune); }
.trade__icon .i { width: 30px; height: 30px; }
.trade--plain .trade__body { padding: 4px 8px 4px 18px; }
.trade--line { flex-direction: column; justify-content: center; gap: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); padding: 20px 22px; }
.trade--line p { font-size: 16px; line-height: 1.5; }

/* ---------- Bande de liaison : l'éventail de teintes ---------- */
.liaison { padding: 0 0 var(--section); }
.liaison__card { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh); padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); overflow: hidden; }
.liaison__text p { margin-top: 14px; max-width: 52ch; }
.liaison__text .link-arrow { margin-top: 18px; }
.deck { position: relative; height: 230px; }
.deck span { position: absolute; left: calc(50% - 22px); bottom: 14px; width: 44px; height: 200px; border-radius: var(--r-chip); background: var(--b); box-shadow: 0 1px 2px rgba(19, 34, 59, .12), 0 10px 20px -12px rgba(19, 34, 59, .4), inset 0 0 0 1px rgba(19, 34, 59, .06); transform-origin: 50% calc(100% - 18px); transform: rotate(calc((var(--n) - 3.5) * 11deg)); }
.deck span::after { content: ''; position: absolute; left: 50%; bottom: 12px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .18); }
@media (prefers-reduced-motion: no-preference) {
  html.js .liaison__card[data-reveal] .deck span { transform: rotate(0deg); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--n) * 30ms + 120ms); }
  html.js .liaison__card.is-in .deck span { transform: rotate(calc((var(--n) - 3.5) * 11deg)); }
}

/* ---------- Sols ---------- */
.sols { padding: var(--section) 0; background: var(--bg-2); }
.sols__head { max-width: 760px; }
.sols__head .lead { margin-top: 18px; }
.sols__head .tag { background: var(--jaune-doux); }
.resine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 4vw, 56px); align-items: stretch; }
.resine__photo { display: flex; flex-direction: column; }
.resine__photo picture { flex: 1; min-height: 420px; max-height: 720px; }
.resine__body { display: flex; flex-direction: column; gap: 16px; }
.resine__body > div:first-child p { margin-top: 10px; }
.entry { flex: 1; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 6px; }
.entry__media picture { height: 100%; min-height: 220px; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.entry__media img { width: 100%; height: 100%; object-fit: cover; }
.entry__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; }
.entry h4 { font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.015em; }
.pill { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--jaune-doux); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.entry .thumbs li { width: 64px; height: 64px; }

.floors { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.floor { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 6px 6px 20px; }
.floor--pool { background: var(--jaune-doux); box-shadow: none; }
.floor h3 { margin: 16px 14px 0; font-weight: 700; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.015em; }
.floor > p { margin: 8px 14px 0; font-size: 16px; line-height: 1.5; }
.floor__pics { display: grid; gap: 6px; height: 280px; grid-template-rows: minmax(0, 1fr); }
.floor__pic { min-width: 0; min-height: 0; }
.floor__pic picture { width: 100%; height: 100%; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-2); }
.floor__pic img { width: 100%; height: 100%; object-fit: cover; }
.floor--pool .floor__pics { grid-template-columns: minmax(0, 300px) minmax(0, 180px); justify-content: start; }
.floor__pic--terrace { align-self: end; height: 62%; }
.floor__pics--tile { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.floor__pic--main { grid-row: span 2; }

.usages__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.usage { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 12px; background: var(--jaune-doux); }
.usage__place { font: 700 19px/1.25 var(--f-title); letter-spacing: -.01em; color: var(--ink); }
.usage__floor { font-size: 16px; line-height: 1.5; }
.usage .link-arrow { margin-top: 8px; font-size: 15px; }
.usages__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; }
.usages__foot p { font-weight: 600; color: var(--ink); }

/* ---------- Réalisations ---------- */
.real { padding: var(--section) 0; }
.real__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out); }
.filters button:active { transform: scale(.97); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters button[aria-pressed="true"] .fam-sq--a { background: #fff; }
@media (hover: hover) and (pointer: fine) { .filters button[aria-pressed="false"]:hover { border-color: var(--ink); } }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.tile.is-hidden { display: none; }
.swatch--tile { width: 100%; border: 0; cursor: zoom-in; text-align: left; font: inherit; }
.swatch--tile picture { flex: none; aspect-ratio: 1 / 1; }
.swatch--tile .swatch__label { align-items: flex-start; padding: 10px 6px 12px; line-height: 1.35; }
.swatch--tile .fam-sq { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .tile.is-new { animation: tile-in 400ms var(--ease-out) backwards; }
  @keyframes tile-in { from { opacity: 0; transform: translateY(12px); } }
}
.gallery__more { margin-top: 28px; text-align: center; }

/* Visionneuse */
.lightbox { padding: 0; border: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; background: rgba(13, 22, 38, .97); color: #F5F6F3; }
.lightbox::backdrop { background: rgba(13, 22, 38, .6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 72px 24px; max-width: 100%; }
.lightbox__fig img { width: auto; height: min(78dvh, var(--mh, 78dvh)); max-width: min(88vw, var(--mw, 88vw)); border-radius: 12px; object-fit: contain; }
.lightbox figcaption { display: flex; gap: 16px; align-items: baseline; max-width: 70ch; font-size: 15px; text-align: center; }
.lightbox__count { font-size: 13.5px; opacity: .8; white-space: nowrap; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(245, 246, 243, .14); color: #F5F6F3; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.lightbox__btn:active { transform: scale(.95); }
.lightbox__btn:focus-visible { outline-color: var(--jaune); }
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { background: rgba(245, 246, 243, .26); } }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 16px; top: 50%; margin-top: -24px; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__fig { animation: lb-in 220ms var(--ease-out); }
  @keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
}

/* ---------- Entreprise ---------- */
.ent { padding: var(--section) 0 0; background: var(--bg-2); }
.ent__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ent__text p { margin-top: 16px; max-width: 60ch; }
.ent__text .h2 { max-width: 18ch; }
.marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mark { display: flex; flex-direction: column; min-height: 280px; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--sh); padding: 6px; }
.mark strong { flex: 1; display: flex; align-items: flex-end; padding: 18px 16px; border-radius: var(--r-photo); font: 800 clamp(28px, 2.6vw, 38px)/1 var(--f-title); letter-spacing: -.03em; }
.mark--1 strong { background: var(--m1); color: #fff; }
.mark--2 strong { background: var(--m3); color: #fff; }
.mark--3 strong { background: var(--jaune); color: var(--ink); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.05; }
.mark span { min-height: 5.9em; padding: 12px 10px 12px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }

/* ---------- Zone ---------- */
.zone { padding: var(--section) 0; background: var(--bg-2); }
.zone__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zone__text p { margin-top: 16px; max-width: 54ch; }
.depts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.depts li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--r-chip); background: var(--ink); color: #fff; font: 700 17px/1 var(--f-title); }
.depts small { font: 600 13px/1 var(--f-body); color: #C9D2E3; }
.towns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.towns li { padding: 7px 12px; border-radius: var(--r-chip); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.towns li.is-home { background: var(--jaune); box-shadow: none; }
.zone__map svg { width: 100%; height: auto; padding: 8px; border-radius: var(--r-photo); background: var(--bg); }
.map-ring { fill: none; stroke: rgba(19, 34, 59, .26); stroke-dasharray: 4 6; }
.map-ring--1 { fill: rgba(242, 194, 48, .16); }
.map-ring-label { font: 600 12px var(--f-body); fill: var(--muted); }
.map-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.map-label { font: 600 14px var(--f-body); fill: var(--ink); paint-order: stroke fill; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.map-home .bm-j { fill: var(--jaune); }
.map-home .bm-i { fill: var(--ink); }
.map-home .bm-s { fill: #F5F6F3; }
.map-home-label { font: 800 16px var(--f-title); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.map-far { font: 700 13px var(--f-body); fill: var(--ink); }

/* ---------- Bande WhatsApp ---------- */
.waband { padding: var(--section) 0 0; }
.waband__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 32px; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh); padding: clamp(24px, 3.5vw, 40px) clamp(24px, 4vw, 48px); }
.waband__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #E3F2E9; }
.waband__icon .i { width: 34px; height: 34px; fill: var(--wa); }
.waband .h2 { font-size: clamp(24px, 2.3vw, 32px); }
.waband__text p { margin-top: 8px; max-width: 60ch; }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__intro p { margin-top: 14px; }
.faq__intro a, .faq__more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq__list { display: grid; gap: 10px; }
.qa { background: var(--surface); border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 34, 59, .06); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px 16px 22px; cursor: pointer; list-style: none; font: 700 17.5px/1.3 var(--f-title); color: var(--ink); border-radius: 14px; }
.qa summary::-webkit-details-marker { display: none; }
.qa__plus { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--marine-doux); transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.qa__plus .i { width: 16px; height: 16px; }
.qa[open] .qa__plus { transform: rotate(45deg); background: var(--jaune); }
.qa p { padding: 0 22px 20px; max-width: 70ch; font-size: 16.5px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) { .qa summary:hover .qa__plus { background: var(--jaune-doux); } .qa[open] summary:hover .qa__plus { background: var(--jaune); } }
.faq__more { grid-column: 2; font-size: 15.5px; color: var(--muted); }

/* ---------- Devis ---------- */
.devis { padding: var(--section) 0; background: var(--bg-2); }
.devis__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.devis__text .lead { margin-top: 16px; }
.devis__text { position: sticky; top: calc(var(--header-h) + 32px); }
.contact { display: grid; gap: 10px; margin-top: 28px; }
.contact a, .contact__static { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; box-shadow: 0 1px 2px rgba(19, 34, 59, .06); transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.contact a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .contact a:hover { box-shadow: var(--sh); } }
.contact small { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.contact__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--marine-doux); }
.contact__ic--wa { background: #E3F2E9; }
.contact__ic--wa .i { fill: var(--wa); }
.devis__note { margin-top: 20px; font-size: 15.5px; color: var(--muted); max-width: 46ch; }

.form { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.form__title { font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; }
.form__hint { margin-top: -10px; font-size: 14.5px; color: var(--muted); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; align-content: start; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-weight: 600; font-size: 15px; color: var(--ink); }
.field legend { padding: 0; margin-bottom: 8px; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(19, 34, 59, .32); border-radius: var(--r-field); background: var(--surface); font: 400 16px/1.4 var(--f-body); color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select { height: 50px; }
.field textarea { resize: vertical; min-height: 116px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2313223B' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19, 34, 59, .25); }
.field__help { font-size: 14px; color: var(--muted); }
.field__err { font-size: 14px; font-weight: 600; color: #B0261B; }
.is-invalid, .field input.is-invalid { border-color: #B0261B !important; }
.choices { display: grid; gap: 8px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 12px; border: 1px solid rgba(19, 34, 59, .32); border-radius: var(--r-field); text-align: center; font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink); background: var(--surface); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.choice:active span { transform: scale(.98); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.field--choices.is-invalid .choice span { border-color: #B0261B; }
@media (hover: hover) and (pointer: fine) { .choice:hover input:not(:checked) + span { border-color: var(--ink); } }
.commerce { display: grid; gap: 18px; padding: 18px; border-radius: 14px; background: var(--marine-doux); }
.check-wrap { display: grid; gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.check.is-invalid span { color: #B0261B; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form__actions .btn { flex: 1 1 220px; }
.form__status { font-weight: 600; font-size: 15px; padding: 12px 14px; border-radius: var(--r-field); }
.form__status:empty { display: none; }
.form__status[data-type="error"] { background: #FBE9E7; color: #8E1F16; }
.form__status[data-type="ok"] { background: #E3F2E9; color: #135C34; }
.form__status[data-type="info"] { background: var(--marine-doux); color: var(--ink); }
.form__legal { font-size: 14px; color: var(--muted); }
.form__legal a { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */
.footer { background: var(--ink); color: #F5F6F3; padding: clamp(56px, 6vw, 80px) 0 28px; }
.footer :focus-visible { outline-color: var(--jaune); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.25fr 1fr 1fr .9fr; gap: 36px 28px; }
.brand--light .brand__mark .bm-i, .brand--light .brand__mark .bm-s { fill: #F5F6F3; }
.brand--light { color: #F5F6F3; }
.brand--light .brand__word span { color: #C9D2E3; }
.footer__brand p { margin-top: 16px; max-width: 32ch; font-size: 15px; color: #C9D2E3; }
.footer__brand .footer__addr { margin-top: 10px; color: #F5F6F3; font-weight: 600; }
.footer__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 700 16px/1.2 var(--f-title); color: #fff; }
.footer .fam-sq--a { background: var(--m4); }
.footer__col ul { display: grid; gap: 4px; }
.footer__col a, .footer__col span { display: inline-block; padding: 4px 0; font-size: 15px; line-height: 1.4; color: #D5DCE8; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__col a:hover, .footer__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 22px; background: linear-gradient(rgba(245, 246, 243, .16), rgba(245, 246, 243, .16)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px; font-size: 14px; color: #C9D2E3; }
.footer__legal a { color: #F5F6F3; }

/* ---------- Barre mobile ---------- */
.mobile-bar { display: none; }

/* ---------- Apparitions au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 0; transition: opacity 150ms ease; }
  html.js [data-reveal].is-in { opacity: 1; }
  *, *::before, *::after { transition-duration: 150ms !important; transition-property: opacity, background-color, border-color, color !important; }
  .swatch, .fan a, .shop, .trade, .floor, .entry, .lot, .btn, .link-arrow .i, .lot h4 .i, .contact a, .filters button, .choice span, .mobile-bar a, .burger, .lightbox__btn { transform: none !important; }
}

/* =================================================================== responsive */
@media (max-width: 1365px) {
  .hero__ctas .btn--lg { padding: 0 18px; font-size: 16px; gap: 8px; }
  .brand__base { display: none; }
}
@media (max-width: 1139px) {
  .nav__faq { display: none; }
}
@media (max-width: 1279px) {
  .mosaic { grid-template-columns: 1fr 1fr .85fr; }
  .mosaic .swatch__label { font-size: 12.5px; gap: 7px; padding-inline: 5px; }
}
@media (max-width: 1180px) {
  .nav__toggle, .nav__link { padding: 0 10px; font-size: 15px; }
  .header__in { gap: 10px; }
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr 1fr; }
  .trades__grid { grid-template-columns: 1fr 1fr; }
  .trade--wide { grid-column: span 2; }
  .trade--plain { grid-column: span 2; }
  .trade--line { grid-column: span 2; }
  .shops { grid-template-columns: 1fr; }
  .shop--lg { grid-row: auto; }
  .bref__list { grid-template-columns: 1fr 1fr; }
  .bref__list li:nth-child(3) { border-left: 0; }
  .bref__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .nav, .header__tel { display: none; }
  .burger { display: block; }
  .header__cta { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: 16em; }
  .mosaic { height: clamp(460px, 70vw, 600px); }
  .familles__grid { grid-template-columns: 1fr; }
  .amen__open { grid-template-columns: 1fr; }
  .lots__grid { grid-template-columns: 1fr 1fr; }
  .steps__list { grid-template-columns: 1fr; gap: 12px; }
  .steps__list::before { left: 40px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-left: 17px; }
  .step__n { grid-row: span 2; margin: 0; }
  .step h4 { margin-top: 0; padding: 16px 18px 0; }
  .step p { grid-column: 2; }
  .why { grid-template-columns: 1fr; }
  .why__photo { max-width: 360px; }
  .liaison__card { grid-template-columns: 1fr; text-align: left; }
  .deck { height: 200px; max-width: 420px; }
  .resine { grid-template-columns: 1fr; }
  .resine__photo { max-width: 560px; }
  .resine__photo picture { min-height: 0; aspect-ratio: 4 / 5; max-height: 560px; }
  .floors { grid-template-columns: 1fr 1fr; }
  .floor--pool { grid-column: span 2; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ent__grid, .zone__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
  .faq__more { grid-column: 1; }
  .devis__grid { grid-template-columns: 1fr; }
  .devis__text { position: static; }
  .waband__card { grid-template-columns: auto minmax(0, 1fr); }
  .waband__card .btn { grid-column: 1 / -1; justify-self: start; }
}
/* Tablette : les 4 grandes photos en une rangée, puis le mur TV en large et les 2 petites tuiles
   (évite les bandeaux écrasés de 85 px de haut pour la piscine et la salle de bains) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mosaic { height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none;
    grid-template-areas: "barber snack atelier parking" "tv tv piscine sdb"; }
  .mosaic .swatch picture { flex: none; }
  .mosaic__item--barber picture, .mosaic__item--snack picture, .mosaic__item--atelier picture, .mosaic__item--parking picture { aspect-ratio: 3 / 4; }
  .mosaic__item--tv picture, .mosaic__item--piscine picture, .mosaic__item--sdb picture { height: 200px; }
  .mosaic__item--piscine .swatch, .mosaic__item--sdb .swatch { max-width: none; }
}
@media (max-width: 767px) {
  body { font-size: 16.5px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .header__cta { display: none; }
  .burger { margin-left: auto; }
  .hero { padding-top: 24px; }
  .hero__title { font-size: clamp(32px, 9vw, 40px); line-height: 1.06; }
  .hero__sub { margin-top: 16px; }
  .hero__ctas { margin-top: 24px; }
  .hero__ctas .btn { width: 100%; }
  .mosaic { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px;
    grid-template-areas: "barber snack" "atelier parking" "tv tv" "piscine sdb"; }
  .mosaic__item--barber picture, .mosaic__item--snack picture, .mosaic__item--atelier picture, .mosaic__item--parking picture { aspect-ratio: 3 / 4; }
  .mosaic__item--tv picture { aspect-ratio: 16 / 9; }
  .mosaic__item--piscine picture, .mosaic__item--sdb picture { aspect-ratio: 1 / 1; }
  .mosaic .swatch picture { flex: none; }
  .swatch__label { font-size: 13px; }
  .fam .fanbox { margin: 20px 0 22px; }
  .fan a { padding: 0 16px; font-size: 16px; }
  .bref__list { grid-template-columns: 1fr; }
  .bref__list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .bref__list li { padding: 16px 18px; }
  .lots__grid { grid-template-columns: 1fr; }
  .shop--lg, .shop--row { grid-template-columns: 1fr; }
  .shop--lg .shop__media picture { aspect-ratio: 4 / 3; }
  .shop--row .shop__media picture { aspect-ratio: 16 / 10; min-height: 0; }
  .shop__body, .shop--lg .shop__body { padding: 16px 12px 12px; }
  .why__grid { grid-template-columns: 1fr; gap: 22px; }
  .why__photo { max-width: 240px; }
  .trades__grid { grid-template-columns: 1fr; }
  .trade--wide, .trade--plain, .trade--line { grid-column: auto; }
  .trade:not(.trade--plain):not(.trade--line) { flex-direction: row; align-items: stretch; }
  .trade:not(.trade--plain):not(.trade--line) .trade__media { flex: 0 0 116px; }
  .trade--wide .trade__media picture, .trade:not(.trade--wide):not(.trade--plain):not(.trade--line) .trade__media picture { height: 100%; min-height: 116px; aspect-ratio: auto; }
  .trade__body { padding: 10px 10px 10px 14px; }
  .trade h4 { font-size: 17.5px; }
  .trade--plain { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .trade--plain .trade__body { padding: 0; }
  .deck { height: 170px; }
  .deck span { height: 150px; width: 34px; left: calc(50% - 17px); }
  .entry { grid-template-columns: 1fr; }
  .entry__media picture { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .resine__photo picture { aspect-ratio: 1 / 1; }
  .floors { grid-template-columns: 1fr; }
  .floor--pool { grid-column: auto; }
  .floor__pics { height: 240px; }
  .shop--lg .shop__media picture, .shop--row .shop__media picture { height: auto; min-height: 0; }
  .fam--a .fanbox { margin-bottom: 0; }
  .floor--pool .floor__pics { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .usages__grid { grid-template-columns: 1fr; }
  .usages__foot .btn { width: 100%; }
  .real__head { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .swatch--tile .swatch__label { font-size: 12.5px; padding: 8px 4px 10px; gap: 6px; }
  .marks { grid-template-columns: 1fr; }
  .mark { min-height: 0; flex-direction: row; align-items: stretch; }
  .mark strong { flex: none; width: 46%; min-height: 110px; padding: 14px; }
  .mark span { display: flex; align-items: center; min-height: 0; padding: 10px 12px; }
  .waband__card { grid-template-columns: 1fr; }
  .waband__card .btn { width: 100%; white-space: normal; }
  .form__row { grid-template-columns: 1fr; }
  .choices--3 { grid-template-columns: 1fr; }
  .form__actions .btn { flex-basis: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__legal { margin-top: 32px; }
  .lightbox__fig { padding: 64px 12px 24px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin-top: 0; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }

  .mobile-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(19, 34, 59, .25); transition: transform 240ms var(--ease-out); }
  .mobile-bar.is-away { transform: translateY(110%); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 6px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; transition: transform 140ms var(--ease-out); }
  .mobile-bar a:active { transform: scale(.97); }
  .mobile-bar .i { width: 18px; height: 18px; }
  .mobile-bar .i--wa { fill: var(--wa-icon); }
  .mobile-bar a.is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
}
@media (max-width: 400px) {
  .mobile-bar { gap: 6px; padding-inline: 10px; }
  .mobile-bar a { font-size: 14.5px; padding: 0 4px; }
  .brand__word b { font-size: 19px; }
  .brand__mark { width: 24px; height: 35px; }
  .fan a { min-height: 54px; font-size: 15.5px; }
  .footer__grid { grid-template-columns: 1fr; }
  .mark strong { width: 44%; }
}

/* ===================================================================
   PAGES INTÉRIEURES · socle v2 (19/10/2026)
   Même langage que l'accueil : cartes 16 px, panneaux 20 px, photos 10 px, puces 8 px,
   encre marine pour Aménagement, jaune (texte marine) pour Sols. Aucune règle ci-dessous
   ne s'applique à une classe de l'accueil sans modificateur propre aux pages.
   =================================================================== */

/* ---------- État actif du menu ---------- */
.nav__toggle.is-current { position: relative; }
.nav__toggle.is-current::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--ink); }
.nav__toggle.is-current:has(.fam-sq--s)::after { background: var(--jaune); box-shadow: 0 0 0 1px rgba(19, 34, 59, .18); }
.mega a[aria-current="page"], .drawer__panel a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--ink), 0 1px 2px rgba(19, 34, 59, .06); }
.footer__col a[aria-current="page"] { color: #fff; font-weight: 700; }
.footer__col a[aria-current="page"]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 2px; background: var(--jaune); }

/* Grand menu Aménagement entre 1024 et 1365 px : calé sur le bord droit de l'en-tête pour ne jamais sortir de l'écran */
@media (min-width: 1024px) and (max-width: 1365px) {
  .nav__item:has(.mega--a) { position: static; }
  .mega--a { left: auto; right: var(--gutter); top: calc(100% - 6px); transform-origin: top right; width: min(880px, calc(100vw - 2 * var(--gutter))); }
}

/* ---------- Sections génériques ---------- */
.sec { padding: var(--section) 0; }
.sec--alt { background: var(--bg-2); }
.sec__head { max-width: 780px; }
.sec__head .lead { margin-top: 16px; }
.sec__head .tag { margin-bottom: 14px; }
.sec--alt .tag--a { background: var(--surface); }
.sec--alt .tag--s { background: var(--jaune-doux); }
.sec__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.sec__foot p { font-weight: 600; color: var(--ink); }
.prose { max-width: 70ch; }
.prose p + p { margin-top: 14px; }
.prose h3 { margin: 28px 0 8px; font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a, .duo__card a, .note a, .phero__alt a, .split__text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Fil d'Ariane (Accueil › Famille › Page) ---------- */
.crumbs { margin-bottom: clamp(18px, 2.4vw, 30px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 12px 0 8px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: var(--ink); text-decoration: none; }
.crumbs a .fam-sq { width: 9px; height: 9px; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.crumbs [aria-current="page"] { color: var(--muted); }

/* ---------- Hero de page métier ---------- */
.phero { padding: clamp(18px, 2.6vw, 32px) 0 clamp(56px, 7vw, 96px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phero__text .tag { margin-bottom: 18px; }
.phero__title { font-weight: 800; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.034em; max-width: 19ch; }
.phero__intro { margin-top: 20px; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; max-width: 36em; color: var(--ink-2); }
.phero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.phero__facts li { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.phero__facts .i { width: 14px; height: 14px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: var(--marine-doux); }
.phero--s .phero__facts .i { background: var(--jaune-doux); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .1); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.phero__alt { margin-top: 20px; font-size: 15.5px; color: var(--muted); }
.phero__media { position: relative; isolation: isolate; justify-self: center; width: 100%; max-width: 460px; }
.phero__photo { position: relative; z-index: 1; }
.phero__photo picture { aspect-ratio: 4 / 5; max-height: 575px; }
.phero__photo img { object-position: 50% 55%; }
/* Éventail de puces derrière la photo : les teintes de la famille */
.phero__deck { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.phero__deck span { position: absolute; inset: 0; border-radius: var(--r-card); background: var(--c, var(--m1)); box-shadow: 0 1px 2px rgba(19, 34, 59, .1), 0 14px 30px -18px rgba(19, 34, 59, .45), inset 0 0 0 1px rgba(19, 34, 59, .06); transform-origin: 100% 100%; transform: rotate(var(--rot)); }
.phero__deck span:nth-child(1) { --rot: -6deg; }
.phero__deck span:nth-child(2) { --rot: -3.8deg; }
.phero__deck span:nth-child(3) { --rot: -1.6deg; }
.phero--a .phero__deck span:nth-child(1) { --c: var(--m1); }
.phero--a .phero__deck span:nth-child(2) { --c: var(--m3); }
.phero--a .phero__deck span:nth-child(3) { --c: var(--marine-doux); }
.phero--s .phero__deck span:nth-child(1) { --c: var(--j1); }
.phero--s .phero__deck span:nth-child(2) { --c: var(--j3); }
.phero--s .phero__deck span:nth-child(3) { --c: var(--j5); }
@media (prefers-reduced-motion: no-preference) {
  .phero__deck span { animation: deck-open 700ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--k, 0) * 60ms); }
  .phero__deck span:nth-child(2) { --k: 1; }
  .phero__deck span:nth-child(3) { --k: 2; }
  @keyframes deck-open { from { transform: rotate(0deg); } }
}
/* Page sans photo (stands, électricité, contact) : une grande puce de nuancier à la place de la photo */
.phero__swatch { display: flex; flex-direction: column; }
.phero__swatch-face { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; aspect-ratio: 4 / 5; max-height: 575px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-photo); background: var(--m1); color: #fff; }
.phero__swatch-face .i { width: 56px; height: 56px; fill: var(--jaune); }
.phero__swatch-face p { font: 800 clamp(26px, 2.6vw, 36px)/1.08 var(--f-title); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.phero--s .phero__swatch-face { background: var(--jaune); color: var(--ink); }
.phero--s .phero__swatch-face .i { fill: var(--ink); }
.phero--s .phero__swatch-face p { color: var(--ink); }
/* Une colonne, sans visuel */
.phero--text .phero__grid { grid-template-columns: minmax(0, 1fr); }
.phero--text .phero__title { max-width: 22ch; }

/* ---------- Réalisations d'une page (galerie + visionneuse de l'accueil) ---------- */
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--page { margin-top: clamp(24px, 3vw, 36px); }
.works-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px 48px; align-items: center; }

/* ---------- Listes de prestations ---------- */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 28px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(19, 34, 59, .06); font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ticks .i { width: 16px; height: 16px; margin-top: 1px; padding: 3px; box-sizing: content-box; border-radius: 6px; background: var(--marine-doux); }
.ticks--s .i { background: var(--jaune); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.duo__card { padding: 22px 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.duo__card--a { background: var(--marine-doux); box-shadow: none; }
.duo__card--s { background: var(--jaune-doux); box-shadow: none; }
.duo__card h3 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.duo__card p { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li { padding: 8px 14px; border-radius: var(--r-chip); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.chips--s li { background: var(--jaune-doux); box-shadow: none; }
.chips--a li { background: var(--marine-doux); box-shadow: none; }
.note { margin-top: 24px; max-width: 72ch; padding: 18px 22px; border-left: 4px solid var(--ink); border-radius: 0 12px 12px 0; background: var(--marine-doux); }
.note--s { border-left-color: var(--jaune); background: var(--jaune-doux); }
.note--muted { border-left-color: var(--line-2); background: var(--surface); }
.note h3 { font-weight: 700; font-size: 18.5px; line-height: 1.25; }
.note p { margin-top: 6px; font-size: 16px; line-height: 1.55; }

/* ---------- Tableau comparatif (lisible en cartes sur mobile) ---------- */
.spec-wrap { margin-top: 24px; padding: 6px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.spec { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.5; }
.spec th, .spec td { padding: 14px 18px; text-align: left; vertical-align: top; }
.spec thead th { font: 700 15px/1.2 var(--f-body); color: var(--ink); background: var(--bg-2); white-space: nowrap; }
.spec thead th:first-child { border-radius: 10px 0 0 10px; }
.spec thead th:last-child { border-radius: 0 10px 10px 0; }
.spec tbody th { width: 24%; font-weight: 700; color: var(--ink); }
.spec tbody tr:nth-child(even) > * { background: var(--bg); }
.spec tbody tr:nth-child(even) > :first-child { border-radius: 10px 0 0 10px; }
.spec tbody tr:nth-child(even) > :last-child { border-radius: 0 10px 10px 0; }
.spec__sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; background: var(--m1); }
.spec__sw--s { background: var(--jaune); box-shadow: inset 0 0 0 1px var(--ink); }
.spec__sw--m { background: var(--m4); }
.spec-note { margin-top: 14px; font-weight: 600; font-size: 15.5px; color: var(--ink); }

/* ---------- Texte + photo ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split + .split, * + .split { margin-top: clamp(48px, 6vw, 80px); }
.split--rev { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.split--rev .split__photo { order: -1; justify-self: start; }
.split__text .tag { margin-bottom: 14px; }
.split__text p { margin-top: 14px; max-width: 60ch; }
.split__text .h3 + p { margin-top: 14px; }
.split__photo { width: 100%; max-width: 380px; justify-self: end; }
.split__photo picture { aspect-ratio: 4 / 5; }
.split--land { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.split--land .split__photo { max-width: 560px; }
.split--land .split__photo picture { aspect-ratio: 4 / 3; }

/* ---------- Étapes (frise de l'accueil, en 3 ou 4 étapes, titres h3) ---------- */
.step h3 { margin-top: 14px; padding: 18px 18px 0; width: 100%; font-weight: 700; font-size: 18.5px; line-height: 1.2; background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0; }
.sec--alt .step__n { box-shadow: 0 0 0 6px var(--bg-2); }
@media (min-width: 1024px) {
  .steps__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps__list--4::before { right: calc((100% - 3 * 14px) / 4 - 41px); }
  .steps__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps__list--3::before { right: calc((100% - 2 * 14px) / 3 - 41px); }
}

/* ---------- Cas d'usage (variante Aménagement des cartes « quel sol pour quel usage ») ---------- */
.usage--a { background: var(--marine-doux); }
.sec--alt .usage { background: var(--surface); }
.sec--alt .usage.usage--s { background: var(--jaune-doux); }

/* ---------- Bandeaux d'appel ---------- */
.sec:not(.sec--alt) + .waband { padding-top: 0; }
.btn--light { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--jaune-doux); } }
.ctaband { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px; margin-top: clamp(48px, 6vw, 80px); padding: clamp(26px, 3.6vw, 44px) clamp(24px, 4vw, 52px); border-radius: var(--r-panel); background: var(--ink); color: #D5DCE8; position: relative; overflow: hidden; }
.ctaband::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(var(--j1) 0 25%, var(--j3) 25% 50%, var(--m3) 50% 75%, var(--m4) 75%); }
.ctaband .h2 { color: #fff; font-size: clamp(24px, 2.3vw, 32px); }
.ctaband p { margin-top: 10px; max-width: 58ch; }
.ctaband__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ctaband :focus-visible { outline-color: var(--jaune); }

/* ---------- FAQ d'une page (même composant que l'accueil) ---------- */
.faq--page .faq__intro .h2 { font-size: clamp(28px, 2.7vw, 40px); }

/* ---------- Zone courte ---------- */
.zmini { padding: var(--section) 0 0; background: var(--bg-2); }
.zmini__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; padding: clamp(24px, 3.5vw, 40px) clamp(24px, 4vw, 48px); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--sh); }
.zmini .h2 { font-size: clamp(24px, 2.3vw, 32px); }
.zmini__card p { margin-top: 10px; max-width: 64ch; }
.zmini .towns { margin-top: 16px; }
.zmini .towns li { background: var(--bg); box-shadow: none; }
.zmini .towns li.is-home { background: var(--jaune); }

/* ---------- Les autres métiers de la famille + lien vers l'autre famille ---------- */
.family { padding: var(--section) 0; }
.family__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.family__main { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-panel); background: var(--marine-doux); }
.family__main--s { background: var(--jaune-doux); }
.family__main .tag { background: var(--surface); }
.family__main .h2 { font-size: clamp(26px, 2.6vw, 36px); }
.family__main > p { margin-top: 10px; max-width: 56ch; }
.family__all { margin-top: 20px; }
.sibs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.sibs a { display: flex; align-items: center; gap: 14px; min-height: 66px; height: 100%; padding: 10px 16px 10px 10px; border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(19, 34, 59, .06); transition: transform 180ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.sibs a::before { content: ''; flex: none; align-self: stretch; width: 12px; border-radius: 6px; background: var(--c, var(--m1)); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .1); }
.sibs span { min-width: 0; }
.sibs b { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.sibs small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.sibs .i { margin-left: auto; width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.sibs a:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .sibs a:hover { box-shadow: var(--sh); } .sibs a:hover .i { transform: translateX(3px); } }
.sibs--a li:nth-child(1) a { --c: var(--m1); }
.sibs--a li:nth-child(2) a { --c: var(--m2); }
.sibs--a li:nth-child(3) a { --c: var(--m3); }
.sibs--a li:nth-child(4) a { --c: var(--m4); }
.sibs--a li:nth-child(5) a { --c: #8FA3C6; }
.sibs--a li:nth-child(6) a { --c: #BAC7DD; }
.sibs--s li:nth-child(1) a { --c: var(--j1); }
.sibs--s li:nth-child(2) a { --c: var(--j2); }
.sibs--s li:nth-child(3) a { --c: var(--j3); }
.sibs--s li:nth-child(4) a { --c: var(--j4); }
.sibs--s li:nth-child(5) a { --c: var(--j5); }
.family__other { display: flex; flex-direction: column; padding: 6px 6px clamp(22px, 2.6vw, 32px); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--sh); position: relative; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.family__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 76px; }
.family__chips span { border-radius: var(--r-chip); background: var(--c); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .06); }
.family__other--a .family__chips span:nth-child(1) { --c: var(--m1); }
.family__other--a .family__chips span:nth-child(2) { --c: var(--m2); }
.family__other--a .family__chips span:nth-child(3) { --c: var(--m3); }
.family__other--a .family__chips span:nth-child(4) { --c: var(--m4); }
.family__other--s .family__chips span:nth-child(1) { --c: var(--j1); }
.family__other--s .family__chips span:nth-child(2) { --c: var(--j2); }
.family__other--s .family__chips span:nth-child(3) { --c: var(--j3); }
.family__other--s .family__chips span:nth-child(4) { --c: var(--j5); }
.family__other-body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px) 0; }
.family__other .tag { align-self: flex-start; margin-bottom: 14px; }
.family__other h3 { font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.025em; }
.family__other p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.family__other .link-arrow { margin-top: auto; padding-top: 20px; }
.family__other .link-arrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.family__other:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.family__other .link-arrow:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .family__other:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); } }

/* Puces de l'accueil prolongées (listes de plus de 3 métiers Aménagement, page 404) */
.fan--a li:nth-child(4) a { background: var(--m4); }
.fan--a li:nth-child(5) a { background: #8FA3C6; color: var(--ink); }
.fan--a li:nth-child(6) a { background: #BAC7DD; color: var(--ink); }

/* ---------- Page contact : trois moyens de nous joindre ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.way__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--marine-doux); }
.way__ic .i { width: 26px; height: 26px; }
.way--wa .way__ic { background: #E3F2E9; }
.way--wa .way__ic .i { fill: var(--wa); }
.way--s .way__ic { background: var(--jaune); }
.way h2, .way h3 { font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.way p { font-size: 16px; line-height: 1.5; }
.way .btn { margin-top: auto; }

/* ---------- Page texte (mentions légales, confidentialité) ---------- */
.legal { padding: clamp(18px, 2.6vw, 32px) 0 var(--section); }
.legal__in { max-width: 860px; }
.legal__title { font-weight: 800; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.03em; }
.legal__intro { margin-top: 14px; max-width: 64ch; color: var(--muted); }
.legal__sec { margin-top: 20px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 1px 2px rgba(19, 34, 59, .06); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal__in > .legal__sec:first-of-type { margin-top: 32px; }
.legal__sec h2 { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.02em; }
.legal__sec h2::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--m1); }
.legal__sec h3 { margin-top: 20px; font-weight: 700; font-size: 18px; line-height: 1.25; }
.legal__sec p, .legal__sec ul { margin-top: 10px; max-width: 72ch; font-size: 16.5px; }
.legal__sec ul { padding-left: 22px; list-style: disc; }
.legal__sec li + li { margin-top: 4px; }
.legal__sec a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__ids { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 12px 0 0; font-size: 16.5px; }
.legal__ids dt { font-weight: 700; color: var(--ink); }
.legal__ids dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Page 404 ---------- */
.notfound { padding: clamp(32px, 5vw, 80px) 0 var(--section); }
.notfound__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.notfound__code { font: 800 clamp(88px, 13vw, 184px)/.9 var(--f-title); letter-spacing: -.05em; color: var(--ink); }
.notfound__code mark { background: linear-gradient(transparent 70%, var(--jaune) 70% 92%, transparent 92%); }
.notfound__title { margin-top: 18px; font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.028em; }
.notfound__text p { margin-top: 14px; max-width: 52ch; }
.notfound__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.notfound__fams { display: grid; gap: 16px; }
.notfound__fams .tag { margin-bottom: 10px; }

/* ---------- Responsive des pages intérieures ---------- */
@media (max-width: 1100px) {
  .family__grid { grid-template-columns: 1fr; }
  .family__chips { height: 56px; }
}
@media (max-width: 1023px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .phero__deck span:nth-child(1) { --rot: -5deg; }
  .phero__deck span:nth-child(2) { --rot: -3deg; }
  .phero__deck span:nth-child(3) { --rot: -1.5deg; }
  .split, .split--rev, .split--land { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .split--rev { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .zmini__card { grid-template-columns: 1fr; }
  .ctaband { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .notfound__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .phero { padding-bottom: 56px; }
  /* Mobile : étiquette et titre, puis la photo, puis le reste */
  .phero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .phero__text { display: contents; }
  .phero__text > * { order: 3; }
  .phero__text > .tag, .phero__text > .phero__title { order: 1; }
  .phero__text > .tag { align-self: flex-start; }
  .phero__media { order: 2; max-width: 400px; width: calc(100% - 14px); margin: 28px 0 4px 14px; justify-self: auto; align-self: flex-start; }
  .phero__photo picture { max-height: 420px; }
  .phero__swatch-face { aspect-ratio: 16 / 10; }
  .phero__deck span:nth-child(1) { --rot: -3.5deg; }
  .phero__deck span:nth-child(2) { --rot: -2.2deg; }
  .phero__deck span:nth-child(3) { --rot: -1deg; }
  .phero__ctas .btn { width: 100%; }
  .phero__title { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.07; }
  .crumbs ol { font-size: 14px; }
  .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-solo { grid-template-columns: 1fr; }
  .ticks, .duo, .sibs { grid-template-columns: 1fr; }
  .split, .split--rev, .split--land { grid-template-columns: 1fr; }
  .split--rev .split__photo { order: 0; }
  .split__photo, .split--land .split__photo { justify-self: start; max-width: 360px; }
  .spec-wrap { padding: 0; background: none; box-shadow: none; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spec tbody { display: grid; gap: 10px; }
  .spec tbody tr { padding: 6px; border-radius: var(--r-card); background: var(--surface); box-shadow: 0 1px 2px rgba(19, 34, 59, .06); }
  .spec tbody tr:nth-child(even) > * { background: none; border-radius: 0; }
  .spec tbody th { width: auto; padding: 12px 12px 4px; font: 700 18px/1.2 var(--f-title); }
  .spec td { padding: 8px 12px; }
  .spec td + td { border-top: 1px solid var(--line); }
  .spec td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
  .ctaband { padding-right: 32px; }
  .ctaband__ctas .btn { width: 100%; }
  .legal__ids { grid-template-columns: 1fr; gap: 0; }
  .legal__ids dd + dt { margin-top: 10px; }
  .notfound__ctas .btn { width: 100%; }
}

/* ===== PAGE : 404 ===== */
/* ===================================================================
   404.html · styles en plus (classes préfixées nf-)
   =================================================================== */

/* Les deux boîtes de nuancier de la 404 portent leur étiquette de famille en tête */
.nf-box .tag { margin: 10px 0 12px 10px; }

/* ===== PAGE : agencement-commerce-lyon ===== */
/* ===================================================================
   agencement-commerce-lyon.html · styles propres à la page (préfixe ac-)
   Réutilise tels quels .shops / .shop (accueil), .lots__grid / .lot, .why, .exergue, .ctaband.
   =================================================================== */

/* Les trois types de commerce : moins d'air au-dessus que sur l'accueil (ici juste sous le .sec__head) */
.ac-shops.shops { margin-top: clamp(28px, 3.4vw, 44px); }

/* Puces de types de commerce dans une carte : sous le texte (grande carte), calées en bas (cartes en ligne) */
.ac-shops .ac-shop__chips { margin-top: 4px; }
.ac-shops .shop--row .ac-shop__chips { margin-top: auto; padding-top: 6px; }
.ac-shops .ac-shop__chips li { font-size: 14.5px; padding: 7px 12px; }

/* Petite précision en pied de la grande carte (restaurants) */
.ac-shops .ac-shop__note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Bloc « Ce que nous prenons en charge » : sous-titre h3 puis la grille des 6 lots */
.ac-lots { margin-top: clamp(32px, 4vw, 52px); }

/* ===== PAGE : contact ===== */
/* ===================================================================
   contact.html · styles en plus (préfixe ct-).
   =================================================================== */

/* Étiquette de page hors famille : fond blanc, les deux carrés de famille côte à côte */
.ct-tag { gap: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ct-tag .fam-sq + .fam-sq { margin-right: 2px; }

/* « Que mettre dans votre message » colle au hero (le hero porte déjà son espace du bas) */
.ct-msg { padding-top: 0; }

/* Tous nos métiers : deux blocs de même poids, Aménagement puis Sols */
.ct-family .sec__head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.ct-family__h { font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.025em; }
.ct-family .family__main .sibs { margin-top: 18px; }
@media (min-width: 1101px) {
  .ct-family .ct-family__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-family .family__main .sibs { grid-template-columns: 1fr; }
}

/* Bouton « Appeler » : un peu plus compact entre 1024 et 1160 px, où la carte ne fait que 300 px */
@media (min-width: 1024px) and (max-width: 1160px) {
  .ct-call { padding-inline: 16px; gap: 8px; }
}

/* ===== PAGE : electricite-plomberie-lyon ===== */
/* Électricité et plomberie : groupes de travaux (cartes à pastille de teinte du nuancier). */
.ep-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.ep-group { display: flex; flex-direction: column; padding: 22px 22px 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.ep-group::before { content: ''; width: 44px; height: 8px; margin-bottom: 18px; border-radius: 4px; background: var(--ep-c, var(--m1)); }
.ep-group:nth-child(2) { --ep-c: var(--m3); }
.ep-group h3 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.ep-group > p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.ep-group .ticks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 14px; }
.ep-group .ticks li { padding: 11px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 15.5px; }
.ep-group .ticks a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ep-groups + .duo { margin-top: 14px; }
@media (max-width: 767px) {
  .ep-groups { grid-template-columns: minmax(0, 1fr); }
}

/* ===== PAGE : montage-stands-lyon ===== */
/* ===================================================================
   montage-stands-lyon.html · styles en plus (classes préfixées ms-)
   =================================================================== */

/* Liens dans les prestations (plâtrerie, peinture) */
.ms-ticks a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Ce qu'il faut pour un devis : quatre cartes .lot de l'accueil, titres en h3 */
.ms-needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.ms-need h3 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 1099px) { .ms-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ms-needs { grid-template-columns: 1fr; } }

/* Les sections 4 et 5 sont toutes deux sur fond clair : on retire le double espace entre elles */
.ms-needs-sec { padding-bottom: 0; }

/* ===== PAGE : moquette-de-pierre-lyon ===== */
/* moquette-de-pierre-lyon.html (préfixe mq-) : les photos de la page sont en basse définition (piscine 450 px, terrasse 231 px), jamais affichées en grand */

/* Hero : la plage de piscine en petite carte, à son ratio d'origine (300 px de large, 464 px de haut), sur l'éventail de puces */
.phero__media.mq-media { max-width: 300px; }
.mq-media .phero__photo picture { aspect-ratio: 450 / 696; max-height: none; }
@media (max-width: 767px) { .phero__media.mq-media { max-width: 260px; } }

/* Réalisations : une seule vignette de 200 px (photo de 231 px), avec la visionneuse (jamais plus de 1,5 fois sa taille réelle) */
.mq-solo { grid-template-columns: minmax(0, 200px); margin-top: 0; justify-self: end; }
@media (max-width: 767px) { .mq-solo { justify-self: start; } }

/* Chapô avec liens vers les pages résine */
.mq-lead a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Quatre atouts en 2 x 2 (cartes .lot de l'accueil, titres en h3) */
.lots__grid.mq-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mq-atouts .lot h3 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 767px) { .lots__grid.mq-atouts { grid-template-columns: 1fr; } }

/* ===== PAGE : parquet-lyon ===== */
/* parquet-lyon.html (préfixe pq-) */

/* Listes à puces de nuancier dans les encarts « Chevron » et « Chêne en grandes lames » */
.pq-list { display: grid; gap: 8px; margin-top: 12px; }
.pq-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.pq-list li::before { content: ''; position: absolute; left: 0; top: .48em; width: 11px; height: 11px; border-radius: 3px; background: var(--jaune); box-shadow: inset 0 0 0 1px var(--ink); }

/* Le sol est préparé avant la pose : la préparation dans l'ordre (à gauche), ce qui fait varier le devis (à droite) */
.pq-prep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; margin-top: 28px; }
.pq-order { display: grid; gap: 8px; }
.pq-order li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(19, 34, 59, .06); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); }
.pq-order li::before { content: ''; flex: none; align-self: stretch; width: 12px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .1); }
.pq-order li:nth-child(1) { --c: var(--j1); }
.pq-order li:nth-child(2) { --c: var(--j2); }
.pq-order li:nth-child(3) { --c: var(--j3); }
.pq-order li:nth-child(4) { --c: var(--j4); }
.pq-devis { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--sh); }
.pq-devis h3 { font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.pq-devis p { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.pq-devis .chips { margin-top: 16px; }
@media (max-width: 767px) { .pq-prep { grid-template-columns: 1fr; } }

/* ===== PAGE : peinture-enduits-decoratifs-lyon ===== */
/* Peinture et enduits décoratifs : groupes de travaux (cartes à pastille de teinte du nuancier). */
.pe-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.pe-group { display: flex; flex-direction: column; padding: 22px 22px 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.pe-group::before { content: ''; width: 44px; height: 8px; margin-bottom: 18px; border-radius: 4px; background: var(--pe-c, var(--m1)); }
.pe-group:nth-child(2) { --pe-c: var(--m3); }
.pe-group h3 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.pe-group > p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.pe-group .ticks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 14px; }
.pe-group .ticks li { padding: 11px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 15.5px; }
.pe-group .ticks a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pe-groups + .duo { margin-top: 14px; }
@media (max-width: 767px) {
  .pe-groups { grid-template-columns: minmax(0, 1fr); }
}

/* ===== PAGE : platrerie-placo-lyon ===== */
/* Plâtrerie, placo et plafonds décoratifs : groupes de travaux (cartes à pastille de teinte du nuancier). */
.pl-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.pl-group { display: flex; flex-direction: column; padding: 22px 22px 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh); }
.pl-group::before { content: ''; width: 44px; height: 8px; margin-bottom: 18px; border-radius: 4px; background: var(--pl-c, var(--m1)); }
.pl-group:nth-child(2) { --pl-c: var(--m3); }
.pl-group:nth-child(3) { --pl-c: var(--m4); }
.pl-group h3 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.pl-group > p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.pl-group .ticks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 14px; }
.pl-group .ticks li { padding: 11px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 15.5px; }
.pl-group .ticks a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pl-groups + .duo { margin-top: 14px; }
@media (max-width: 959px) {
  .pl-groups { grid-template-columns: minmax(0, 1fr); }
}

/* ===== PAGE : renovation-interieure-lyon ===== */
/* ===================================================================
   renovation-interieure-lyon.html · styles en plus (classes préfixées ri-)
   =================================================================== */

/* Lots coordonnés : les cartes .lot de l'accueil, avec un titre en h3 (la page n'a pas de niveau 4) */
.ri-lot h3 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.ri-lot h3 a { display: inline; text-decoration: none; color: var(--ink); }
.ri-lot h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ri-lot h3 .i { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin-left: 8px; transition: transform 200ms var(--ease-out); }
.ri-lot p a { position: relative; z-index: 1; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ri-lot:has(h3 a:active) { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .ri-lot:has(h3 a):hover { transform: translateY(-2px); }
  .ri-lot h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ri-lot h3 a:hover .i { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .ri-lot, .ri-lot h3 .i { transform: none !important; } }

/* Ordre des travaux : sept puces de nuancier numérotées, de la teinte la plus foncée à la plus claire */
.ri-order { counter-reset: ri; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
.ri-order li { counter-increment: ri; display: flex; flex-direction: column; min-height: 160px; padding: 16px 16px 18px; border-radius: 12px; background: var(--c, var(--m1)); color: #fff; box-shadow: inset 0 0 0 1px rgba(19, 34, 59, .08); }
.ri-order li::before { content: counter(ri); margin-bottom: auto; padding-bottom: 20px; font: 800 30px/1 var(--f-title); letter-spacing: -.03em; }
.ri-order b { display: block; font: 700 17px/1.2 var(--f-body); }
.ri-order small { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.ri-order li:nth-child(1) { --c: var(--m1); }
.ri-order li:nth-child(2) { --c: var(--m2); }
.ri-order li:nth-child(3) { --c: var(--m3); }
.ri-order li:nth-child(4) { --c: var(--m4); }
.ri-order li:nth-child(5) { --c: #8FA3C6; color: var(--ink); }
.ri-order li:nth-child(6) { --c: #BAC7DD; color: var(--ink); }
.ri-order li:nth-child(7) { --c: var(--marine-doux); color: var(--ink); }
.ri-order li:nth-child(n+5) b { color: var(--ink); }
@media (max-width: 1199px) {
  .ri-order { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ri-order li:nth-child(7) { grid-column: span 2; }
}
@media (max-width: 767px) {
  .ri-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ri-order li { min-height: 132px; }
}

/* ===== PAGE : sol-resine-garage-lyon ===== */
/* sol-resine-garage-lyon.html (préfixe gr-) : listes à puces de nuancier dans les encarts « Vous préparez » et « Nous vérifions » */
.gr-list { display: grid; gap: 8px; margin-top: 12px; }
.gr-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.gr-list li::before { content: ''; position: absolute; left: 0; top: .48em; width: 11px; height: 11px; border-radius: 3px; background: var(--jaune); box-shadow: inset 0 0 0 1px var(--ink); }