/* =========================================================
   Reno Global Pro — PROPOSITION DE STYLE « TEST 10 »
   La maison interactive — palette calibrée sur le logo
   (bleu / blanc / anthracite), animations et effets de survol.
   ========================================================= */

:root{
  --bg: #FFFFFF;
  --soft-bg: #F3F6FA;
  --white: #FFFFFF;
  --ink: #12161F;
  --ink-2: #1D2534;
  --soft: #545B68;
  --faint: #8791A0;
  --line: #E2E7EE;
  --primary: #3E6FAE;
  --primary-d: #2C4F87;
  --primary-l: #6FA3D8;
  --primary-xl: #E8F0F9;
  --dark: #101522;
  --glass: #D5E5F5;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.8,.24,1);
  --bounce: cubic-bezier(.2,.9,.3,1.25);
  --hd: 104px;
  --rad: 18px;
  --sh-sm: 0 2px 10px rgba(18,22,31,.06);
  --sh-md: 0 16px 34px -20px rgba(18,22,31,.4);
  --sh-lg: 0 30px 60px -30px rgba(18,22,31,.5);
}

*,
*::before,
*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 24px); }
@supports (overflow: clip){ html, body{ overflow-x: clip; } }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll{ overflow: hidden; }
body.scroll-locked{ position: fixed; left: 0; right: 0; width: 100%; }
[hidden]{ display: none !important; }
img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }
button, select, textarea, input{ font: inherit; color: inherit; }
h1, h2, h3, h4{ margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
h1{ font-size: clamp(2rem, 1.3rem + 2.5vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.6rem); }
h3{ font-size: 1.25rem; letter-spacing: -.02em; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
:focus-visible{ outline: 3px solid var(--primary-l); outline-offset: 3px; }

.skip{ position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primary-d); color: var(--white); padding: 10px 16px; border-radius: 8px; }
.skip:focus{ top: 12px; }
.wrap{ width: min(1300px, 100% - 44px); margin-inline: auto; }
.kicker{ margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before{ content: ""; width: 26px; height: 2px; background: var(--primary); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease) .2s; }
.rv.in .kicker::before, .in .kicker::before, .kicker.in::before{ transform: scaleX(1); }
.kicker--light{ color: var(--primary-l); }
.kicker--light::before{ background: var(--primary-l); }
.lead{ font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--soft); max-width: 38em; }
.req{ color: #C0392B; }
.hl{ color: var(--primary); }
.link{ position: relative; font-weight: 600; color: var(--primary-d); text-decoration: none; padding-bottom: 2px; }
.link::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .35s var(--ease); }
.link:hover{ color: var(--primary); }
.link:hover::after{ transform: scaleX(0); }

/* ---------- Boutons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s ease, border-color .25s ease, transform .25s var(--bounce), box-shadow .3s ease;
}
.btn::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg, transparent); transition: background .25s ease; }
.btn::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-hover, var(--primary-d)); transform: translateY(101%); transition: transform .45s var(--ease); }
.btn:hover::after{ transform: translateY(0); }
.btn svg{ width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(5px); }
.btn:hover{ transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn--primary{ --btn-bg: var(--primary); --btn-hover: var(--primary-d); color: var(--white); }
.btn--dark{ --btn-bg: var(--ink); --btn-hover: var(--primary); color: var(--white); }
.btn--light{ --btn-bg: var(--white); --btn-hover: var(--primary-l); color: var(--ink); }
.btn--ghost{ border-color: var(--line); color: var(--ink); --btn-hover: var(--ink); }
.btn--ghost:hover{ color: var(--white); border-color: var(--ink); }
.btn--lg{ padding: 17px 30px; font-size: 1.04rem; }
.btn--sm{ padding: 9px 17px; font-size: .9rem; }
.btn--block{ display: flex; width: 100%; }
.btn--ico{ width: 48px; height: 48px; padding: 0; }
.btn--ico:hover svg{ transform: none; }
.btns{ display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Apparition au défilement ---------- */
.js .rv{ opacity: 0; transition: opacity .7s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s), clip-path .9s var(--ease) var(--d, 0s); }
.js .rv--up{ transform: translateY(34px); }
.js .rv--left{ transform: translateX(-38px); }
.js .rv--right{ transform: translateX(38px); }
.js .rv--zoom{ transform: scale(.94); }
.js .rv:not([class*="rv--"]){ transform: translateY(22px); }
.js .rv.in{ opacity: 1; transform: none; }

/* ---------- En-tête ---------- */
.hd{ position: sticky; top: 0; z-index: 40; background: rgba(111,163,216,.15); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(111,163,216,.4); transition: box-shadow .3s ease, background .3s ease; }
.hd.is-stuck{ background: rgba(111,163,216,.2); box-shadow: 0 10px 28px -22px rgba(18,22,31,.6); }
.hd__in{ display: flex; align-items: center; gap: 26px; height: var(--hd); }
.hd__logo{ flex: none; display: block; transition: transform .35s var(--bounce); }
.hd__logo img{ height: 84px; width: auto; }
.hd__logo:hover{ transform: scale(1.04); }
.hd__nav{ display: flex; gap: 4px; margin-left: auto; }
.hd__nav a{ position: relative; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: .97rem; text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.hd__nav a span{ position: relative; z-index: 1; }
.hd__nav a::before{ content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--primary-xl); transform: scale(.6); opacity: 0; transition: transform .35s var(--bounce), opacity .25s ease; }
.hd__nav a::before{ background: var(--white); }
.hd__nav a:hover::before{ transform: scale(1); opacity: 1; }
.hd__nav a[aria-current="page"]{ color: var(--white); }
.hd__nav a[aria-current="page"]::before{ background: var(--primary); transform: scale(1); opacity: 1; }
.hd__cta{ flex: none; }
.hd__progress{ position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-l)); transform: scaleX(var(--p, 0)); transform-origin: left; }
.hd__burger{ display: none; margin-left: auto; width: 50px; height: 50px; position: relative; background: var(--ink); border: 0; border-radius: 14px; cursor: pointer; transition: background .25s ease, transform .25s var(--bounce); }
.hd__burger:hover{ background: var(--primary); transform: scale(1.05); }
.hd__burger span{ position: absolute; left: 14px; right: 14px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s ease; }
.hd__burger span:nth-child(1){ top: 20px; }
.hd__burger span:nth-child(2){ top: 28px; }
.hd__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }

.drawer{ position: fixed; inset: 0; z-index: 39; background: var(--white); padding: calc(var(--hd) + 20px) 22px 30px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.drawer.is-open{ visibility: visible; opacity: 1; transition: opacity .25s ease; }
.drawer__nav{ display: grid; }
.drawer__nav a{ display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 1.8rem; letter-spacing: -.03em; text-decoration: none; opacity: 0; transform: translateX(-24px); transition: opacity .4s ease, transform .5s var(--ease), color .2s ease; }
.drawer.is-open .drawer__nav a{ opacity: 1; transform: none; }
.drawer.is-open .drawer__nav a:nth-child(2){ transition-delay: .05s; }
.drawer.is-open .drawer__nav a:nth-child(3){ transition-delay: .1s; }
.drawer.is-open .drawer__nav a:nth-child(4){ transition-delay: .15s; }
.drawer.is-open .drawer__nav a:nth-child(5){ transition-delay: .2s; }
.drawer__nav a span{ font-family: var(--body); font-size: .8rem; font-weight: 700; color: var(--primary); }
.drawer__nav a:hover, .drawer__nav a[aria-current="page"]{ color: var(--primary); }
.drawer__foot{ display: grid; gap: 16px; font-size: .95rem; }
.drawer__foot p{ color: var(--soft); }
.drawer__foot p a{ color: inherit; }
.drawer__foot .btn--primary{ color: var(--ink); }

/* ---------- Sections ---------- */
.sec{ padding: clamp(70px, 8vw, 120px) 0; }
.sec--soft{ background: var(--soft-bg); }
.sec--dark{ background: var(--dark); color: var(--white); }
.sec--dark h2, .sec--dark h3{ color: var(--white); }
.sec__head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 22px 60px; margin-bottom: clamp(34px, 4vw, 56px); }
.sec__head > div{ display: grid; justify-items: start; }
.sec__head .lead{ max-width: 28em; }

/* ---------- Bandeau défilant ---------- */
.ticker{ overflow: hidden; background: var(--ink); color: var(--white); padding: 16px 0; }
.ticker__track{ display: flex; width: max-content; animation: slide 42s linear infinite; }
.ticker__group{ display: flex; align-items: center; flex: none; }
.ticker span{ font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem); letter-spacing: -.02em; white-space: nowrap; }
.ticker i{ display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-l); margin: 0 clamp(18px, 2.4vw, 34px); flex: none; }
.ticker:hover .ticker__track{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%); } }

/* ---------- La maison (accueil) ---------- */
.hero{ padding: clamp(24px, 3vw, 50px) 0 clamp(50px, 6vw, 90px); }
.hero__in{ display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.hero__txt{ display: grid; gap: 22px; justify-items: start; }
.hero__hint{ display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--soft); }
.hero__hint svg{ width: 18px; flex: none; color: var(--primary); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 50%{ transform: translateX(6px); } }

.house{ position: relative; }
.house__svg{ width: 100%; height: auto; overflow: visible; }
/* Maison 3D (isométrique) */
.iso polygon{ stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.iso .gnd{ fill: #EAEFF6; stroke: #C6D3E3; }
.iso .drv{ fill: #DCE5F0; stroke: #C6D3E3; }
.iso .top{ fill: #F7FAFD; }
.iso .wall-l{ fill: #FFFFFF; }
.iso .wall-r{ fill: #E7EEF7; }
.iso .gable{ fill: #FFFFFF; }
.iso .roof-a{ fill: #1D2534; }
.iso .roof-b{ fill: #12161F; }
.iso .glass{ fill: var(--glass); }
.iso .light{ fill: #E3EAF3; }
.iso .metal{ fill: var(--primary-d); }
.iso .metal-2{ fill: var(--primary); }
.iso .frame{ fill: none; stroke: var(--ink); stroke-width: 3.2; }
.iso .thin{ stroke: rgba(18,22,31,.55); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.iso .rail{ stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.iso .edge{ stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.house__svg .hp{ transition: opacity .35s ease, filter .35s ease; }
.house__svg .hp *{ transition: fill .3s ease, stroke .3s ease; }
.house__scene{ animation: floaty 7s ease-in-out infinite; transform-origin: 700px 600px; }
@keyframes floaty{ 50%{ transform: translateY(-8px); } }
.house__svg .pin{ cursor: pointer; }
.house__svg .pin__halo{ fill: rgba(62,111,174,.28); transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; }
.house__svg .pin__dot{ fill: var(--primary); stroke: var(--white); stroke-width: 2.5; transition: fill .2s ease, transform .3s var(--bounce); transform-box: fill-box; transform-origin: center; }
.house__svg .pin text{ font-family: var(--body); font-size: 15px; font-weight: 700; fill: var(--white); pointer-events: none; }
.house__svg .pin:hover .pin__dot, .house__svg .pin:focus-visible .pin__dot{ transform: scale(1.22); }
.house__svg .pin.is-on .pin__dot{ fill: var(--ink); }
.house__svg .pin.is-on .pin__halo{ fill: rgba(18,22,31,.18); }
@keyframes halo{ 0%{ transform: scale(.7); opacity: .9; } 70%, 100%{ transform: scale(1.4); opacity: 0; } }
[data-active] .hp:not(.hp--maison):not(.hp--garage){ opacity: .35; }
[data-active] .hp--maison, [data-active] .hp--garage{ opacity: .55; }
[data-active] .hp.is-on{ opacity: 1; }
.iso .hp.is-on .wall-l, .iso .hp.is-on .light, .iso .hp.is-on .top{ fill: #CFE1F5; }
.iso .hp.is-on .wall-r{ fill: #B9D3EF; }
.iso .hp.is-on .glass{ fill: var(--primary-l); }
.iso .hp.is-on .metal, .iso .hp.is-on .metal-2{ fill: var(--primary); }
.iso .hp.is-on .frame{ stroke: var(--primary-d); }
.iso .hp.is-on{ filter: drop-shadow(0 6px 14px rgba(62,111,174,.55)); }
.house__scene{ transform-origin: 50% 70%; }

.spot{ margin-top: clamp(20px, 3vw, 40px); }
.spot__hint{ max-width: 54em; padding: 22px 26px; background: var(--soft-bg); border-radius: var(--rad); }
.spot__hint p:not(.kicker){ margin: 0; color: var(--soft); }
.spot-card{ display: grid; grid-template-columns: 250px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh-md); position: relative; animation: cardIn .5s var(--bounce); }
@keyframes cardIn{ from{ opacity: 0; transform: translateY(18px) scale(.985); } }
.spot-card__n{ position: absolute; left: -14px; top: -14px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--primary); color: var(--white); border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.1rem; box-shadow: 0 8px 18px -8px rgba(62,111,174,.9); }
.spot-card__img{ border-radius: 12px; overflow: hidden; }
.spot-card__img img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.spot-card:hover .spot-card__img img{ transform: scale(1.06); }
.spot-card__body{ display: grid; gap: 8px; justify-items: start; }
.spot-card__cat{ margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.spot-card__body p{ margin: 0; color: var(--soft); }
.spot-card__links{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }

/* ---------- Zones ---------- */
.zone{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px) clamp(30px, 5vw, 80px); align-items: center; }
.zone__head{ grid-column: 1 / -1; display: grid; justify-items: start; gap: 14px; max-width: 40em; }
.zone__body{ display: grid; gap: 22px; justify-items: start; }
.zone__tabs{ display: flex; flex-wrap: wrap; gap: 8px; }
.zone__tabs button{ padding: 10px 18px; background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--bounce); }
.zone__tabs button:hover{ border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.zone__tabs button[aria-pressed="true"]{ background: var(--primary); border-color: var(--primary); color: var(--white); }
.zone__tag{ margin: 0 0 6px; font-family: var(--display); font-size: 1.15rem; }
.zone__list{ animation: cardIn .4s var(--ease); }
.zone__list ul{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.zone__list li{ border-bottom: 1px solid var(--line); overflow: hidden; }
.zone__list a{ position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 10px; text-decoration: none; font-weight: 600; transition: color .25s ease, transform .35s var(--ease); }
.zone__list a::before{ content: ""; position: absolute; inset: 0; background: var(--white); transform: translateX(-101%); transition: transform .4s var(--ease); z-index: -1; }
.zone__list a:hover::before{ transform: none; }
.zone__list a span{ font-family: var(--display); color: var(--primary); font-size: .95rem; }
.zone__list a svg{ width: 18px; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .3s var(--ease); }
.zone__list a:hover{ color: var(--primary-d); transform: translateX(8px); }
.zone__list a:hover svg{ opacity: 1; transform: none; }
.zone__art .house__svg{ max-height: 420px; }

/* ---------- Zoom fenêtre ---------- */
.zoom{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3vw, 50px); align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(16px, 2vw, 24px); box-shadow: var(--sh-sm); }
.zoom__photo{ position: relative; border-radius: 16px; overflow: hidden; }
.zoom__photo img{ width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; transition: transform 1.2s var(--ease); }
.zoom:hover .zoom__photo img{ transform: scale(1.03); }
.zoom__pin{ position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; background: rgba(255,255,255,.94); border: 2px solid var(--primary-d); border-radius: 50%; font-weight: 700; color: var(--primary-d); cursor: pointer; transition: transform .3s var(--bounce), background .25s ease, color .25s ease; }
.zoom__pin::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .35s var(--bounce); }
.zoom__pin::before{ content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); animation: halo2 2.8s ease-out infinite; }
@keyframes halo2{ 0%{ transform: scale(1); opacity: .55; } 70%, 100%{ transform: scale(1.7); opacity: 0; } }
.zoom__pin:hover{ transform: scale(1.12); }
.zoom__pin[aria-pressed="true"]{ background: var(--primary); border-color: var(--primary); color: var(--white); }
.zoom__pin[aria-pressed="true"]::after{ opacity: 1; transform: none; }
.zoom__panel{ padding: clamp(10px, 2vw, 26px); display: grid; gap: 16px; justify-items: start; }
.zoom__txt{ display: grid; gap: 8px; justify-items: start; animation: cardIn .45s var(--ease); }
.zoom__txt p:not(.kicker){ margin: 0; color: var(--soft); font-size: 1.08rem; }

/* ---------- Chiffres ---------- */
.facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.fact{ display: grid; gap: 8px; align-content: start; padding-top: 22px; border-top: 2px solid rgba(255,255,255,.2); transition: border-color .3s ease; }
.fact:hover{ border-top-color: var(--primary-l); }
.fact b{ font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1; color: var(--primary-l); letter-spacing: -.04em; }
.fact > span{ color: rgba(255,255,255,.8); }

/* ---------- Réalisations (accueil) ---------- */
.works{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.wk{ display: grid; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; text-align: left; padding: 0; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.wk[hidden]{ display: none; }
.wk:hover{ transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: var(--primary-l); }
.wk__img{ position: relative; overflow: hidden; }
.wk__img img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.wk:hover .wk__img img{ transform: scale(1.08); }
.wk__zoom{ position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--primary-d); border-radius: 50%; opacity: 0; transform: scale(.7) rotate(-20deg); transition: opacity .3s ease, transform .4s var(--bounce); }
.wk__zoom svg{ width: 20px; }
.wk:hover .wk__zoom{ opacity: 1; transform: none; }
.wk__cap{ display: grid; gap: 2px; padding: 13px 15px 16px; position: relative; }
.wk__cap span{ position: absolute; right: 13px; top: 12px; font-family: var(--display); font-weight: 700; color: var(--line); font-size: .9rem; transition: color .3s ease; }
.wk:hover .wk__cap span{ color: var(--primary-l); }
.wk__cap b{ font-family: var(--display); font-weight: 700; font-size: .96rem; letter-spacing: -.02em; line-height: 1.25; padding-right: 28px; }
.wk__cap small{ font-size: .78rem; color: var(--soft); }

/* ---------- Étapes ---------- */
.steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.step{ position: relative; display: grid; gap: 14px; align-content: start; padding: 28px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.step::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.step:hover{ transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--primary-l); }
.step:hover::before{ transform: scaleX(1); }
.step__n{ width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-xl); color: var(--primary-d); font-family: var(--display); font-weight: 700; transition: background .3s ease, color .3s ease, transform .4s var(--bounce); }
.step:hover .step__n{ background: var(--primary); color: var(--white); transform: rotate(-8deg) scale(1.06); }
.step h3{ margin-bottom: 6px; }
.step p{ margin: 0; color: var(--soft); }

/* ---------- Appel final ---------- */
.cta-sec{ padding-bottom: clamp(70px, 8vw, 120px); }
.cta{ position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 40px; padding: clamp(36px, 5vw, 66px); background: var(--dark); color: var(--white); border-radius: 28px; overflow: hidden; }
.cta::before{ content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(circle, rgba(62,111,174,.5), transparent 62%); animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift{ to{ transform: translate(-12%, 10%) scale(1.15); } }
.cta > *{ position: relative; }
.cta h2{ color: var(--white); max-width: 18ch; margin-bottom: 10px; }
.cta p:not(.kicker){ margin: 0; color: rgba(255,255,255,.78); max-width: 42ch; }

/* ---------- Pied de page ---------- */
.ft{ background: var(--soft-bg); padding: 64px 0 26px; border-top: 1px solid var(--line); }
.ft__grid{ display: grid; grid-template-columns: 1.4fr .8fr 1.1fr 1fr; gap: 40px; }
.ft__logo{ height: 76px; width: auto; margin-bottom: 18px; }
.ft__brand p{ color: var(--soft); font-size: .95rem; max-width: 32em; }
.ft__note{ font-size: .9rem; }
.ft h4{ font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; }
.ft ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.ft ul a{ text-decoration: none; display: inline-block; transition: transform .25s var(--ease), color .2s ease; }
.ft ul a:hover{ color: var(--primary); transform: translateX(4px); }
.ft__presta{ font-size: .92rem; }
.ft__bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--soft); }
.ft__bottom a{ text-decoration: none; font-weight: 600; transition: color .2s ease; }
.ft__bottom a:hover{ color: var(--primary); }

/* ---------- Page légale ---------- */
.legal{ display: grid; grid-template-columns: 270px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.legal__nav{ position: sticky; top: calc(var(--hd) + 20px); display: grid; gap: 4px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); }
.legal__nav p{ margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.legal__nav a{ padding: 7px 10px; border-radius: 9px; font-size: .93rem; color: var(--soft); text-decoration: none; transition: background .2s ease, color .2s ease, transform .25s var(--ease); }
.legal__nav a:hover{ background: var(--soft-bg); color: var(--ink); transform: translateX(4px); }
.legal__body{ display: grid; gap: 22px; }
.legal__card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); padding: clamp(22px, 3vw, 38px); scroll-margin-top: calc(var(--hd) + 20px); transition: border-color .3s ease, box-shadow .3s ease; }
.legal__card:hover{ border-color: var(--primary-l); box-shadow: var(--sh-sm); }
.legal__card h2{ font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); margin-bottom: 14px; }
.legal__card h3{ font-size: 1.05rem; margin: 22px 0 8px; }
.legal__card p, .legal__card li{ color: var(--soft); }
.legal__card ul{ margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 8px; }
.legal__card li{ position: relative; padding-left: 26px; }
.legal__card li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--primary-l); }
.legal__card dl{ margin: 0 0 1.1em; display: grid; grid-template-columns: 210px 1fr; gap: 10px 20px; }
.legal__card dt{ font-weight: 700; color: var(--ink); }
.legal__card dd{ margin: 0; color: var(--soft); }
.legal__card a{ color: var(--primary-d); font-weight: 600; }
.todo{ display: inline-block; padding: 2px 10px; background: #FFF3D6; border: 1px solid #E8C97A; border-radius: 6px; color: #8A6400; font-weight: 700; font-size: .86rem; }
.legal__warn{ background: #FFF8E8; border: 1px solid #E8C97A; }
.legal__warn h2{ color: #8A6400; }
.legal__warn p, .legal__warn li{ color: #6F5210; }
.legal__warn li::before{ background: #E8C97A; }

.to-top{ position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .3s var(--bounce), visibility 0s linear .25s, background .2s ease; }
.to-top:hover{ background: var(--primary); transform: translateY(-4px); }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--bounce), background .2s ease; }
.to-top svg{ width: 20px; }

/* ---------- En-tête de page ---------- */
.phead{ padding: clamp(40px, 5vw, 80px) 0 clamp(26px, 3vw, 50px); }
.phead h1{ max-width: 20ch; margin-bottom: 16px; }

/* ---------- Prestations : sommaire + cartes ---------- */
.cat__in{ display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.pnav{ position: sticky; top: calc(var(--hd) + 20px); display: grid; gap: 18px; }
.pnav__toggle{ display: none; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; font-weight: 700; cursor: pointer; transition: border-color .25s ease, background .25s ease; }
.pnav__toggle:hover{ border-color: var(--primary); }
.pnav__toggle i{ font-style: normal; width: 12px; height: 12px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--ease); }
.pnav__toggle[aria-expanded="true"] i{ transform: rotate(-135deg) translate(-3px, -3px); }
.pnav__house{ background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); padding: 14px; }
.pnav__group p{ margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pnav__group ul{ list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.pnav__group button{ width: 100%; display: flex; gap: 10px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; font-size: .92rem; font-weight: 500; color: var(--soft); text-align: left; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s var(--ease); }
.pnav__group button span{ font-family: var(--display); font-weight: 700; }
.pnav__group button:hover{ color: var(--primary-d); background: var(--white); transform: translateX(4px); }
.pnav__group button.is-active{ background: var(--primary); color: var(--white); }
.pnav__group button.is-active span{ color: var(--primary-l); }

.pgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 26px); }
.pc{ display: grid; }
.pc--hero{ grid-column: 1 / -1; }
.pc__btn{ width: 100%; height: 100%; display: grid; grid-template-columns: 200px 1fr; gap: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; text-align: left; cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.pc--hero .pc__btn{ grid-template-columns: 42% 1fr; }
.pc__btn:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--primary-l); }
.pc__img{ position: relative; overflow: hidden; }
.pc__img img{ width: 100%; height: 100%; min-height: 160px; object-fit: cover; transition: transform .8s var(--ease); }
.pc--hero .pc__img img{ min-height: 260px; }
.pc__btn:hover .pc__img img{ transform: scale(1.07); }
.pc__zoom{ position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--primary-d); border-radius: 50%; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .4s var(--bounce); }
.pc__zoom svg{ width: 18px; }
.pc__btn:hover .pc__zoom{ opacity: 1; transform: none; }
.pc__body{ display: grid; align-content: start; gap: 8px; padding: 22px 24px 24px; }
.pc--hero .pc__body{ align-content: center; padding: clamp(24px, 3vw, 38px); }
.pc__cat{ display: flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pc__cat i{ font-style: normal; font-family: var(--display); color: var(--white); background: var(--primary); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; letter-spacing: 0; transition: transform .4s var(--bounce), background .3s ease; }
.pc__btn:hover .pc__cat i{ transform: rotate(-10deg) scale(1.08); background: var(--primary-d); }
.pc__cat b{ color: var(--primary); }
.pc__title{ font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; }
.pc--hero .pc__title{ font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.pc__lead{ color: var(--soft); font-size: .97rem; }
.pc--hero .pc__lead{ font-size: 1.06rem; }
.pc__more{ display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: var(--primary-d); font-size: .93rem; }
.pc__more svg{ width: 16px; transition: transform .35s var(--ease); }
.pc__btn:hover .pc__more svg{ transform: translateX(5px); }
.pc.is-target .pc__btn{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(62,111,174,.28); }

/* ---------- Fenêtre de détail ---------- */
.modal{ padding: 0; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.modal::backdrop{ background: rgba(16,21,34,.62); backdrop-filter: blur(5px); }
.modal__scroll{ height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 26px 18px; }
.modal__card{ position: relative; width: min(1040px, 100%); background: var(--white); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: 1.02fr .98fr; }
.modal__img{ background: var(--soft-bg); overflow: hidden; }
.modal__img img{ width: 100%; height: 100%; max-height: 82vh; object-fit: cover; }
.modal__body{ padding: clamp(26px, 3.4vw, 46px); display: grid; gap: 12px; align-content: center; justify-items: start; }
.modal__body h2{ font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); }
.modal__text{ color: var(--soft); }
.modal__text ul{ list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.modal__text li{ position: relative; padding-left: 30px; }
.modal__text li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 13px; height: 13px; border-radius: 4px; background: var(--primary); }
.modal__text li strong{ color: var(--ink); }
.modal__text h3, .modal__text h4{ font-size: 1.05rem; margin: 1.1em 0 .4em; }
.modal__close{ position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; z-index: 2; transition: background .25s ease, color .25s ease, transform .3s var(--bounce); }
.modal__close:hover{ background: var(--ink); color: var(--white); transform: rotate(90deg); }
.modal__close svg{ width: 20px; }
/* Ouverture progressive de la fiche : la photo se dévoile, le texte arrive ensuite */
.modal.is-changing .modal__img{ animation: imgReveal .9s var(--ease) both; }
.modal.is-changing .modal__img img{ animation: imgZoom 1.4s var(--ease) both; }
.modal.is-changing .modal__body > *{ animation: textUp .75s var(--ease) both; }
.modal.is-changing .modal__body > *:nth-child(1){ animation-delay: .16s; }
.modal.is-changing .modal__body > *:nth-child(2){ animation-delay: .24s; }
.modal.is-changing .modal__body > *:nth-child(3){ animation-delay: .32s; }
.modal.is-changing .modal__body > *:nth-child(4){ animation-delay: .42s; }
@keyframes imgReveal{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
@keyframes imgZoom{ from{ transform: scale(1.14); } to{ transform: scale(1); } }
@keyframes textUp{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }

/* ---------- Diaporama des réalisations ---------- */
.rl{ display: grid; gap: clamp(18px, 2vw, 26px); }
.rl__viewer{ display: grid; grid-template-columns: 1.35fr .65fr; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--sh-md); }
.rl__stage{ position: relative; background: #DFE7F1; overflow: hidden; min-height: 420px; display: grid; place-items: center; }
.rl__backdrop{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.15) brightness(1.12); transform: scale(1.2); opacity: .9; }
.rl__photo{ position: relative; display: block; width: 100%; height: 100%; padding: clamp(18px, 2.4vw, 34px); background: none; border: 0; cursor: zoom-in; }
.rl__img{ width: 100%; height: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; transition: transform .6s var(--ease); }
.rl__photo:hover .rl__img{ transform: scale(1.02); }
.rl__hint{ position: absolute; left: 50%; bottom: clamp(18px, 2.4vw, 30px); translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,.94); color: var(--ink); border-radius: 999px; font-weight: 700; font-size: .88rem; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .35s var(--ease); }
.rl__hint svg{ width: 16px; }
.rl__photo:hover .rl__hint, .rl__photo:focus-visible .rl__hint{ opacity: 1; transform: none; }
.rl__count{ position: absolute; left: 18px; top: 18px; padding: 7px 14px; background: rgba(16,21,34,.62); color: var(--white); border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; }
.rl__nav{ position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); border: 0; border-radius: 50%; cursor: pointer; z-index: 2; transition: background .25s ease, color .25s ease, transform .3s var(--bounce); }
.rl__nav svg{ width: 22px; }
.rl__nav:hover{ background: var(--primary); color: var(--white); transform: translateY(0) scale(1.08); }
.rl__nav--prev{ left: 16px; }
.rl__nav--next{ right: 16px; }
.rl__panel{ padding: clamp(24px, 3vw, 40px); display: grid; align-content: center; justify-items: start; gap: 12px; }
.rl__panel h2{ font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.rl__desc{ color: var(--soft); }
.rl__cta{ margin-top: 10px; }
.rl.is-changing .rl__panel > *{ animation: cardIn .45s var(--ease); }
.rl.is-changing .rl__img{ animation: fadeImg .5s var(--ease); }
@keyframes fadeImg{ from{ opacity: 0; transform: scale(1.04); } }
.rl__thumbs{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.rl__thumb{ position: relative; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; transition: transform .35s var(--ease), border-color .25s ease, opacity .25s ease; opacity: .7; }
.rl__thumb img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rl__thumb:hover{ opacity: 1; transform: translateY(-4px); }
.rl__thumb.is-on{ opacity: 1; border-color: var(--primary); }

.light{ padding: 0; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(16,21,34,.94); color: var(--white); overflow: hidden; }
.light::backdrop{ background: rgba(16,21,34,.94); }
.light__in{ height: 100%; display: grid; grid-template-rows: 1fr auto; padding: clamp(14px, 2vw, 30px); gap: 14px; }
.light__stage{ position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
.rl__stage{ touch-action: pan-y; }
.light__stage img{ width: auto; height: auto; max-width: min(100%, 1100px); max-height: calc(100vh - 170px); max-height: calc(100svh - 170px); object-fit: contain; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); animation: lightIn .5s var(--ease); }
@keyframes lightIn{ from{ opacity: 0; transform: scale(.96); } }
.light__nav{ position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255,255,255,.16); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; transition: background .25s ease, transform .3s var(--bounce); }
.light__nav:hover{ background: var(--primary); transform: scale(1.08); }
.light__nav svg{ width: 22px; }
.light__nav--prev{ left: 0; }
.light__nav--next{ right: 0; }
.light__cap{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; margin: 0; text-align: center; }
.light__cap b{ font-family: var(--display); font-size: 1.1rem; }
.light__cap span{ color: rgba(255,255,255,.6); font-size: .9rem; }
.light__close{ position: absolute; right: clamp(14px, 2vw, 30px); top: clamp(14px, 2vw, 30px); z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.16); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; transition: background .25s ease, transform .3s var(--bounce); }
.light__close:hover{ background: var(--primary); transform: rotate(90deg); }
.light__close svg{ width: 22px; }

.works-source{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.works-source li{ background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.works-source img{ width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }
.works-source h3, .works-source .rl-texte{ padding: 0 18px; }
.works-source h3{ margin: 16px 0 6px; }
.works-source .rl-texte{ padding-bottom: 18px; color: var(--soft); }

/* ---------- Qui sommes-nous ---------- */
.bio{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 70px); align-items: start; }
.bio__txt h2{ margin-bottom: 20px; }
.bio__txt p{ font-size: 1.08rem; color: var(--soft); }
.quote{ margin: 30px 0 0; padding: 26px 30px; background: var(--white); border-left: 4px solid var(--primary); border-radius: 0 var(--rad) var(--rad) 0; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.quote:hover{ transform: translateX(6px); box-shadow: var(--sh-md); }
.quote p{ font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -.03em; margin-bottom: 10px; }
.quote cite{ font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.bio__side{ position: sticky; top: calc(var(--hd) + 20px); display: grid; }
.bio__img{ border-radius: var(--rad); overflow: hidden; }
.bio__img img{ width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; transition: transform 1s var(--ease); }
.bio__side:hover .bio__img img{ transform: scale(1.05); }
.bio__badge{ margin: -50px 20px 0 auto; width: min(240px, 80%); padding: 22px 26px; background: var(--primary); color: var(--white); border-radius: var(--rad); display: grid; gap: 4px; box-shadow: var(--sh-md); }
.bio__badge b{ font-family: var(--display); font-size: 3.2rem; line-height: 1; }
.bio__badge span{ font-size: .92rem; color: rgba(255,255,255,.85); }
.values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 36px); }
.value{ display: grid; gap: 12px; align-content: start; padding: 32px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.value:hover{ transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--primary-l); }
.value__ico{ width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-xl); color: var(--primary-d); margin-bottom: 4px; transition: background .3s ease, color .3s ease, transform .45s var(--bounce); }
.value:hover .value__ico{ background: var(--primary); color: var(--white); transform: rotate(-8deg) scale(1.06); }
.value__ico svg{ width: 26px; }
.value p{ margin: 0; color: var(--soft); }

/* ---------- Carte de la région ---------- */
.zonemap{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.zonemap > div:first-child{ display: grid; justify-items: start; gap: 16px; }
.depts{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.depts li{ display: flex; align-items: baseline; gap: 7px; padding: 8px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; cursor: default; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--bounce); }
.depts span{ font-family: var(--display); font-weight: 700; color: var(--primary); transition: color .25s ease; }
.depts li.is-home{ border-color: var(--primary-l); }
.depts li.is-lit{ background: var(--primary); border-color: var(--primary); color: var(--white); transform: translateY(-3px); }
.depts li.is-lit span{ color: var(--white); }

.map{ display: grid; gap: 14px; justify-items: center; }
.map__frame{ position: relative; width: 100%; aspect-ratio: 1 / .92; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--sh-sm); }
.map__grid{ position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; opacity: .55; }
.map__shape{ position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; background: var(--primary-xl); opacity: .85; clip-path: polygon(20% 0, 52% 6%, 70% 2%, 86% 12%, 96% 34%, 86% 52%, 92% 70%, 74% 90%, 52% 100%, 32% 92%, 16% 76%, 4% 52%, 8% 26%); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform: scale(1.02); } }
.dep{
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 12px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transform: scale(.7);
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease, translate .3s var(--bounce), scale .3s var(--bounce);
}
.in .dep, .dep.in{ animation: depIn .5s var(--bounce) forwards; animation-delay: calc(var(--i) * .05s); }
@keyframes depIn{ to{ opacity: 1; transform: scale(1); } }
.dep__n{ font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--primary); line-height: 1; transition: color .25s ease; }
.dep__name{ font-size: .72rem; font-weight: 600; color: var(--soft); white-space: nowrap; transition: color .25s ease; }
.dep[data-home]{ border-color: var(--primary-l); }
.dep[data-home]::after{ content: ""; position: absolute; inset: -6px; border-radius: 18px; border: 2px solid var(--primary-l); opacity: .7; animation: halo3 3s ease-out infinite; }
@keyframes halo3{ 0%{ transform: scale(.92); opacity: .7; } 70%, 100%{ transform: scale(1.25); opacity: 0; } }
.dep:hover, .dep.is-lit{ background: var(--primary); border-color: var(--primary); box-shadow: 0 14px 26px -14px rgba(62,111,174,.9); scale: 1.12; z-index: 3; }
.dep:hover .dep__n, .dep.is-lit .dep__n, .dep:hover .dep__name, .dep.is-lit .dep__name{ color: var(--white); }
.map__legend{ margin: 0; font-size: .88rem; color: var(--soft); }

/* ---------- Contact ---------- */
.ct{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 3vw, 50px); align-items: start; }
.ct__form{ background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3vw, 44px); box-shadow: var(--sh-sm); }
.fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 26px; }
.field{ display: grid; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field label small{ text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--soft); }
.field input, .field textarea, .field select{
  width: 100%;
  padding: 14px 16px;
  background: var(--soft-bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 1.02rem;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--faint); }
.field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--primary-l); }
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px rgba(62,111,174,.14); transform: translateY(-1px); }
.select{ position: relative; }
.select::after{ content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--primary-d); border-bottom: 2px solid var(--primary-d); transform: rotate(45deg); pointer-events: none; transition: transform .25s ease; }
.select select{ appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.f-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status{ display: none; margin-top: 16px; padding: 12px 16px; background: var(--primary-xl); border-left: 3px solid var(--primary); border-radius: 8px; font-weight: 600; animation: cardIn .4s var(--ease); }
.form-status.is-visible{ display: block; }
.form-note{ margin: 16px 0 0; font-size: .86rem; color: var(--soft); }
.ct__side{ display: grid; gap: 20px; position: sticky; top: calc(var(--hd) + 20px); }
.recap{ background: var(--dark); color: var(--white); border-radius: 22px; padding: 26px 28px; }
.recap__list{ list-style: none; margin: 6px 0 18px; padding: 0; display: grid; }
.recap__list li{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); transition: padding .25s ease; }
.recap__list span{ font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.recap__list b{ font-weight: 700; text-align: right; transition: color .25s ease; }
.recap__list li.is-set b{ color: var(--primary-l); animation: cardIn .35s var(--ease); }
.recap__note{ display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .92rem; color: rgba(255,255,255,.8); }
.recap__note svg{ width: 18px; flex: none; margin-top: 3px; color: var(--primary-l); }
.ct__cards{ display: grid; gap: 14px; }
.ct__card{ display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); text-decoration: none; transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
.ct__card:hover{ border-color: var(--primary-l); transform: translateY(-3px); box-shadow: var(--sh-md); }
.ct__card > svg{ width: 24px; flex: none; color: var(--primary); margin-top: 4px; transition: transform .4s var(--bounce); }
.ct__card:hover > svg{ transform: scale(1.15) rotate(-6deg); }
.ct__card h3{ font-size: 1.05rem; margin-bottom: 4px; }
.ct__card p{ margin: 0; color: var(--soft); }
.ct__card a{ text-decoration: none; }
.ct__card small{ display: block; margin-top: 8px; font-size: .84rem; color: var(--soft); }

/* =============================== RESPONSIVE =============================== */
@media (max-width: 1240px){
  .hd__nav a{ padding: 10px 12px; font-size: .93rem; }
  .hd__logo img{ height: 72px; }
  .cat__in{ grid-template-columns: 260px 1fr; }
}
@media (max-width: 1080px){
  :root{ --hd: 88px; }
  .hd__nav, .hd__cta{ display: none; }
  .hd__burger{ display: block; }
  .hd__logo img{ height: 66px; }
  .hero__in{ grid-template-columns: 1fr; }
  .zone{ grid-template-columns: 1fr; }
  .zone__art{ order: -1; }
  .zone__art .house__svg{ max-height: 300px; }
  .zoom{ grid-template-columns: 1fr; }
  .facts{ grid-template-columns: 1fr 1fr; gap: 26px; }
  .works{ grid-template-columns: 1fr 1fr; }
  .steps{ grid-template-columns: 1fr 1fr; }
  .cat__in{ grid-template-columns: 1fr; }
  .pnav{ position: sticky; top: calc(var(--hd) + 10px); z-index: 20; gap: 0; }
  .pnav__house{ display: none; }
  .pnav__toggle{ display: flex; }
  .pnav__panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); background: var(--white); border-radius: 0 0 14px 14px; }
  .pnav__panel > div{ overflow: hidden; min-height: 0; }
  .pnav.is-open .pnav__panel{ grid-template-rows: 1fr; box-shadow: var(--sh-md); }
  .pnav.is-open .pnav__toggle{ border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
  .pnav__inner{ padding: 6px 14px 16px; display: grid; gap: 6px; }
  .pnav__group ul{ margin-bottom: 6px; }
  .pgrid{ grid-template-columns: 1fr; }
  .pc--hero .pc__btn{ grid-template-columns: 200px 1fr; }
  .rl__viewer{ grid-template-columns: 1fr; }
  .rl__stage{ min-height: 0; }
  .rl__img{ max-height: 52vh; }
  .bio{ grid-template-columns: 1fr; }
  .bio__side{ position: static; max-width: 460px; }
  .values{ grid-template-columns: 1fr; }
  .zonemap{ grid-template-columns: 1fr; }
  .map{ max-width: 520px; width: 100%; margin-inline: auto; }
  .ct{ grid-template-columns: 1fr; }
  .ct__side{ position: static; }
  .ft__grid{ grid-template-columns: 1fr 1fr; }
  .legal{ grid-template-columns: 1fr; }
  .legal__nav{ position: static; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .legal__nav p{ grid-column: 1 / -1; }
  .modal__card{ grid-template-columns: 1fr; }
  .modal__img img{ max-height: 44vh; }
}
@media (max-width: 720px){
  body{ font-size: 1rem; }
  .wrap{ width: calc(100% - 32px); }
  .hd__logo img{ height: 58px; }
  .spot-card{ grid-template-columns: 1fr; padding: 16px; }
  .spot-card__n{ left: -8px; top: -12px; width: 42px; height: 42px; }
  .facts{ grid-template-columns: 1fr; gap: 20px; }
  /* Réalisations : deux petites vignettes par ligne */
  .works{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .wk__cap{ padding: 10px 12px 13px; }
  .wk__cap b{ font-size: .84rem; padding-right: 22px; }
  .wk__cap span{ font-size: .78rem; right: 10px; top: 9px; }
  .wk__cap small{ font-size: .72rem; }
  .wk__zoom{ width: 30px; height: 30px; right: 8px; top: 8px; }
  .wk__zoom svg{ width: 15px; }
  .steps{ grid-template-columns: 1fr; }
  .pnav{ grid-template-columns: 1fr; }
  /* Prestations : fiches compactes (vignette + texte court) */
  .pgrid{ gap: 12px; }
  .pc__btn, .pc--hero .pc__btn{ grid-template-columns: 116px 1fr; border-radius: 14px; }
  .pc__img img, .pc--hero .pc__img img{ width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
  .pc__zoom{ display: none; }
  .pc__body, .pc--hero .pc__body{ padding: 12px 14px; gap: 5px; align-content: center; }
  .pc__cat{ font-size: .62rem; letter-spacing: .08em; gap: 8px; }
  .pc__cat i{ width: 24px; height: 24px; font-size: .68rem; }
  .pc__title, .pc--hero .pc__title{ font-size: 1.02rem; }
  .pc__lead, .pc--hero .pc__lead{ font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pc__more{ font-size: .82rem; margin-top: 2px; }
  .legal__nav{ grid-template-columns: 1fr; padding: 16px; }
  .legal__card dl{ grid-template-columns: 1fr; gap: 2px 0; }
  .legal__card dd{ margin-bottom: 10px; }
  .todo{ font-size: .8rem; }
  .fields{ grid-template-columns: 1fr; }
  .ft__grid{ grid-template-columns: 1fr; gap: 28px; }
  .cta{ padding: 30px 24px; border-radius: 22px; }
  .rl__nav{ width: 44px; height: 44px; }
  .rl__thumbs{ grid-auto-columns: minmax(92px, 1fr); }
  .dep{ padding: 6px 8px; border-radius: 11px; }
  .dep__n{ font-size: .82rem; }
  .dep__name{ font-size: .6rem; }
  .map__frame{ aspect-ratio: 1 / 1.05; }
  .modal__scroll{ padding: 12px 10px; place-items: start center; }
  .modal__card{ border-radius: 20px; }
  .zoom__pin{ width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .house{ margin-inline: -16px; }
  .house__svg .pin text{ font-size: 34px; }
  .house__svg .pin__dot{ r: 38; stroke-width: 5; }
  .house__svg .pin__halo{ r: 52; }
  .house__svg .frame{ stroke-width: 6; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; }
  .js .rv{ opacity: 1; transform: none; }
  .dep{ opacity: 1; transform: none; }
}