/* Fenua Renov · identité « le lagon et la tôle ».
   Sections claires sable et nacre pleines d'air, sections profondes bleu nuit océan ; houles de transition animées ;
   frises géométriques originales tracées au défilement ; ondes de tôle (canvas) ; reflets d'eau en texture raster ;
   numérotation sur fond de vague. Polices : Fraunces (titres, axes SOFT et WONK), Sora (texte), Instrument Serif
   italique (mots-clés), JetBrains Mono (repères). */

@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-full-normal.woff2) format('woff2-variations'), url(../fonts/fraunces-latin-full-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-full-italic.woff2) format('woff2-variations'), url(../fonts/fraunces-latin-full-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sora'; src: url(../fonts/sora-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/sora-latin-wght-normal.woff2) format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --f-display: 'Fraunces', 'Iowan Old Style', 'Times New Roman', serif;
  --f-text: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --f-kw: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sw-h: clamp(46px, 7vw, 118px);
  --r: 22px;
  --sh-l: 0 40px 80px -46px rgba(11, 37, 69, .55);
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q12.5 2 25 12 T50 12 T75 12 T100 12 V40 H0Z' fill='%231FA2C9'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q12.5 26 25 18 T50 18 T75 18 T100 18 V40 H0Z' fill='%232EC4B6'/%3E%3C/svg%3E");
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8'%3E%3Cpath d='M0 7 L3.5 1 L7 7 L10.5 1 L14 7 L17.5 1 L21 7 L24.5 1 L28 7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}
body { font-family: var(--f-text); font-size: 1rem; line-height: 1.62; font-weight: 400; letter-spacing: .005em; }
::selection { background: var(--fr-turq); color: var(--fr-night); }
.wrap { position: relative; z-index: 2; }
.body-t { font-size: 1rem; line-height: 1.7; color: var(--fr-soft); max-width: 58ch; }
.note { font-size: .8rem; color: var(--fr-soft); line-height: 1.5; }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(5.5rem, 10vw, 9.5rem) 0; background-color: var(--bg); color: var(--fg); }
.sec--pearl { --bg: var(--fr-pearl); --fg: var(--fr-ink); background-image: radial-gradient(60% 50% at 88% 42%, rgba(110, 198, 242, .14), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(46, 196, 182, .08), transparent 70%); }
.sec--sand { --bg: var(--fr-sand); --fg: var(--fr-ink); background-image: radial-gradient(50% 40% at 12% 40%, rgba(255, 255, 255, .5), transparent 70%); }
.sec--sand::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../tex/grain.png) 0 0 / 256px 256px; opacity: .5; mix-blend-mode: multiply; -webkit-mask: linear-gradient(transparent, #000 240px); mask: linear-gradient(transparent, #000 240px); }
.sec--night { --bg: var(--fr-night); --fg: var(--fr-pearl); background-image: radial-gradient(60% 50% at 82% 45%, rgba(31, 162, 201, .2), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(46, 196, 182, .12), transparent 70%); overflow: clip; overflow-clip-margin: var(--sw-h); }
.sec--night .body-t, .sec--night .lede { color: rgba(251, 250, 246, .78); }
.sec--night .note { color: rgba(251, 250, 246, .58); }

/* ---------- houles de transition ---------- */
.swell { position: absolute; left: 0; right: 0; top: calc(-1 * var(--sw-h)); height: calc(var(--sw-h) + 6px); overflow: hidden; pointer-events: none; z-index: 3; }
.swell__l { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 100%; animation: swell-x 26s linear infinite; will-change: transform; }
.swell__l--b { fill: var(--fr-lagoon); opacity: .22; animation-duration: 38s; }
.swell__l--m { fill: var(--fr-turq); opacity: .3; animation-duration: 30s; animation-direction: reverse; }
.swell__l--f { fill: var(--bg, var(--fr-pearl)); animation-duration: 22s; }
.swell--night .swell__l--f { fill: var(--fr-night); }
.swell--pearl .swell__l--f { fill: var(--fr-pearl); }
.swell--sand .swell__l--f { fill: var(--fr-sand); }
.swell--night .swell__l--b { fill: var(--fr-sky); opacity: .28; }
.swell:not(.is-vis) .swell__l { animation-play-state: paused; }
@keyframes swell-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- reflets d'eau (texture raster) ---------- */
.reflets { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .05; contain: strict; }
.reflets i { position: absolute; left: -760px; top: -760px; width: calc(100% + 760px); height: calc(100% + 760px); background: url(../tex/caustique.webp) 0 0 / 760px 760px; animation: caust 60s linear infinite; will-change: transform; }
.reflets i + i { left: 0; top: -1100px; width: calc(100% + 1100px); height: calc(100% + 1100px); background-size: 1100px 1100px; opacity: .6; animation: caust2 84s linear infinite; }
.reflets:not(.is-vis) i { animation-play-state: paused; }
@keyframes caust { to { transform: translate3d(760px, 760px, 0); } }
@keyframes caust2 { to { transform: translate3d(-1100px, 1100px, 0); } }

/* ---------- frises ---------- */
.frise { display: block; width: 100%; height: 12px; color: var(--fr-lagoon); overflow: hidden; }
.frise .fz { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.frise .fz--line { stroke-width: 1; opacity: .35; }
.frise .fz--acc { stroke: var(--fr-rose); stroke-width: 2; }
.frise .fz--dot { stroke: var(--fr-turq); stroke-width: 1.6; }
.sec--night .frise { color: var(--fr-sky); }
.no-js .fz, .reduced .fz { stroke-dashoffset: 0; }

/* ---------- numérotation : chiffre gravé, filet fin (remplace les pastilles à vague) ---------- */
.wnum { --s: 3rem; position: relative; flex: none; display: inline-flex; align-items: flex-end; gap: .55rem; min-width: var(--s); height: auto; padding: 0 0 .5rem; color: var(--fr-night); }
.wnum::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--fr-rose), color-mix(in srgb, var(--fr-rose) 0%, transparent)); transform-origin: 0 50%; transform: scaleX(.35); transition: transform 1.1s var(--ease); }
.wnum.is-vis::after { transform: scaleX(1); }
.wnum i { display: none; }
.wnum .wnum__n { font: italic 300 calc(var(--s) * .62)/.9 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -.01em; color: currentColor; margin: 0; display: block; }
.sec--night .wnum, .wnum--light, .related .wnum, .finale .wnum { color: var(--fr-pearl); }

/* ---------- ondes de tôle ---------- */
.toles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: clamp(120px, 13vw, 210px); background: var(--fr-night); pointer-events: none; overflow: hidden; }
.toles__p { position: relative; margin: 0; overflow: hidden; }
.toles__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.toles__p:nth-child(1) img { object-position: 30% 55%; } .toles__p:nth-child(2) img { object-position: 32% 55%; }
.toles__p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 51, .62), rgba(7, 26, 51, 0) 55%); }
.toles__p figcaption { position: absolute; z-index: 1; left: clamp(.8rem, 1.6vw, 1.4rem); bottom: clamp(.7rem, 1.3vw, 1.1rem); font: 500 .62rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fr-pearl); }
.toles__p figcaption::before { content: ''; display: inline-block; width: 1.4rem; height: 1px; margin: 0 .6rem .2rem 0; vertical-align: middle; background: var(--fr-rose); }
@media (max-width: 759px) { .toles { height: 132px; } .toles__p figcaption { font-size: .5rem; letter-spacing: .14em; } .toles__p figcaption::before { width: .7rem; margin-right: .35rem; } }

/* ---------- typographie ---------- */
.kicker { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.4rem; font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--k, var(--fr-lagoon)); }
.kicker::before { content: ""; width: 1.75rem; height: .5rem; flex: none; background: currentColor; -webkit-mask: var(--zig) center / contain no-repeat; mask: var(--zig) center / contain no-repeat; }
.kicker b { color: var(--fr-red); font-weight: 500; }
.sec--night .kicker, .s-hero .kicker, .a-hero .kicker, .i-hero .kicker, .craft .kicker, .brush .kicker, .finale .kicker { --k: var(--fr-sky); }
.sec--night .kicker b, .s-hero .kicker b, .a-hero .kicker b, .i-hero .kicker b, .brush .kicker b, .finale .kicker b { color: var(--fr-turq); }
.dsp { margin: 0; font-family: var(--f-display); font-weight: 380; line-height: .98; letter-spacing: -.022em; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1; text-wrap: balance; }
.dsp em { font-style: italic; font-weight: 330; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--em, var(--fr-lagoon)); letter-spacing: -.03em; }
.sec--night .dsp em, .finale .dsp em { --em: var(--fr-turq); }
.dsp--mega { font-size: clamp(4.2rem, 1.6rem + 11vw, 12.5rem); line-height: .86; font-weight: 340; }
.dsp--mega em { color: var(--fr-red); }
.dsp--hero { font-size: clamp(2.9rem, 1.3rem + 6vw, 7.6rem); line-height: .92; }
.dsp--xl { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.8rem); line-height: .94; }
.dsp--l { font-size: clamp(2.15rem, 1.25rem + 2.9vw, 4.1rem); }
.lede { margin-top: 1.6rem; font-size: clamp(1.04rem, .95rem + .38vw, 1.26rem); line-height: 1.6; max-width: 46ch; color: var(--fr-soft); font-weight: 350; }
.lede em, .kw, .manifest__text em, .iao__tr em { font-family: var(--f-kw); font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem var(--gutter); align-items: end; margin-bottom: clamp(2.6rem, 5vw, 4.6rem); }
.sec-head .lede { margin-top: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.tag { display: inline-flex; align-items: center; gap: .4rem; font: 500 .6rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; padding: .52rem .75rem; border-radius: 999px; color: var(--fr-pearl); background: rgba(7, 26, 51, .55); border: 1px solid rgba(251, 250, 246, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tag--after { background: rgba(224, 99, 63, .82); border-color: transparent; }
.crumb { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; font: 400 .7rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 250, 246, .72); }
.crumb a { text-decoration: none; } .crumb a:hover { color: var(--fr-turq); }
.sec--pearl .crumb, .sec--sand .crumb { color: var(--fr-soft); }

/* ---------- boutons ---------- */
.btn { --h: 3.35rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9rem; height: var(--h); padding: 0 .5rem 0 1.5rem; border: 0; border-radius: 999px; font: 600 .74rem/1 var(--f-text); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; transition: box-shadow .4s var(--ease), background-color .4s, color .4s; }
.btn:not(:has(.btn__ico)) { padding: 0 1.45rem; }
.btn::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 160%; z-index: -1; background: var(--wave-b) repeat-x 0 0 / 50% 22%, linear-gradient(var(--fr-turq), var(--fr-turq)) 0 100% / 100% 82% no-repeat; transform: translate3d(0, 100%, 0); transition: transform .7s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: translate3d(0, 8%, 0); }
.btn__ico { width: 2.35rem; height: 2.35rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); transition: transform .5s var(--ease), background .4s; }
.btn__ico svg { width: 1rem; height: 1rem; }
.btn:hover .btn__ico { transform: rotate(45deg); }
.btn__ph { width: 1.05rem; height: 1.05rem; flex: none; }
.btn--red { background: var(--fr-red); color: #fff; box-shadow: 0 16px 34px -16px rgba(224, 99, 63, .9); }
.btn--red:hover { color: var(--fr-night); }
.btn--glass { background: rgba(251, 250, 246, .1); color: var(--fr-pearl); box-shadow: inset 0 0 0 1px rgba(251, 250, 246, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { color: var(--fr-night); }
.btn--ghost-l { color: var(--fr-ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 37, 69, .32); }
.btn--ghost-l .btn__ico { background: rgba(11, 37, 69, .08); }
.btn--s { --h: 2.7rem; padding: 0 1.2rem; font-size: .68rem; }
.tel { font-family: var(--f-mono); letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.tel svg { width: 1rem; height: 1rem; }

/* ---------- chargement ---------- */
.loader { background: var(--fr-night); color: var(--fr-pearl); }
.loader__logo { width: min(17rem, 70vw); height: auto; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
.loader__sea { position: relative; width: 11rem; height: .55rem; border-radius: 999px; overflow: hidden; background: rgba(110, 198, 242, .15); }
.loader__sea i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--fr-lagoon), var(--fr-turq)); transform: translateY(100%); transition: transform .4s var(--ease); }
.loader__n { font: 500 .72rem/1 var(--f-mono); letter-spacing: .3em; color: var(--fr-sky); }

/* ---------- curseur ---------- */
.cursor { opacity: 0; transition: opacity .4s; } .cursor.is-on { opacity: 1; }
.cursor__dot { background: var(--fr-turq); border-radius: 50%; mix-blend-mode: normal; transform: none; }
.cursor.is-link .cursor__dot { transform: scale(4); opacity: .35; }
.cursor__label { font: 500 .62rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; background: var(--fr-red); color: #fff; border-radius: 999px; }

/* ---------- barre ---------- */
.bar { transition: transform .6s var(--ease), background-color .45s, color .45s, box-shadow .45s; }
.bar.is-solid { background: rgba(11, 37, 69, .8); box-shadow: 0 1px 0 rgba(110, 198, 242, .16); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.bar.on-paper-bar, .bar.is-solid.on-paper-bar { background: rgba(251, 250, 246, .88); color: var(--fr-ink); box-shadow: 0 1px 0 var(--line-l); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.menu-open .bar, .menu-open .bar.is-solid { background: transparent; box-shadow: none; color: var(--fr-pearl); backdrop-filter: none; }
.brand__roof { display: block; width: 100%; height: .62rem; margin-bottom: .05rem; overflow: visible; }
.brand__roof path { fill: none; vector-effect: non-scaling-stroke; }
.brand__roof path.brand__roof-t { fill: var(--fr-rose); stroke: none; }
.brand__roof-c { stroke: currentColor; stroke-width: 1; opacity: .9; }
.brand__w { display: grid; gap: .28rem; justify-items: center; }
.brand__w b { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1; letter-spacing: .03em; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; white-space: nowrap; }
.brand__w b em { font-style: italic; font-weight: 400; color: var(--fr-sky); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.on-paper-bar .brand__w b em { color: var(--fr-red); }
.brand__w small { font: 500 .54rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; opacity: .78; white-space: nowrap; }
.bar__links { font: 500 .7rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
.bar__links a { position: relative; padding: .4rem 0; }
.bar__links a:not(.tel)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 6px; background: currentColor; -webkit-mask: var(--zig) 0 50% / 14px 6px repeat-x; mask: var(--zig) 0 50% / 14px 6px repeat-x; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.bar__links a:hover::after { transform: none; }
.bar__links .tel { font-size: .82rem; letter-spacing: .06em; padding-left: 1.4rem; border-left: 1px solid currentColor; border-left-color: rgba(127, 160, 190, .4); }
.menu-btn { color: inherit; font: 500 .68rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- menu ---------- */
.menu { background: var(--fr-abyss); color: var(--fr-pearl); }
.menu__reflets { opacity: .06; }
.menu__in { position: relative; z-index: 2; padding: calc(var(--bar) + 4vh) var(--gutter) 5vh; display: grid; gap: 3rem; align-content: center; }
.menu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.menu__gh { margin: 0 0 1.1rem; font: 500 .66rem/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fr-sky); }
.menu__list li { overflow: hidden; }
.menu__list a { padding: .32rem 0; font-family: var(--f-display); font-weight: 360; font-size: clamp(1.35rem, .9rem + 1.5vw, 2.15rem); line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1; }
.menu__n { font: 500 .66rem/1 var(--f-mono); color: var(--fr-turq); min-width: 1.6rem; transform: translateY(-.5em); }
.menu__list a:hover, .menu__list a.is-on { color: var(--fr-turq); }
.menu__list a:hover .menu__t, .menu__list a.is-on .menu__t { font-style: italic; }
.menu__iles { display: grid; gap: .4rem; }
.menu__arch, .menu__minor { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.menu__arch a, .menu__minor a { text-decoration: none; font-size: .86rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid rgba(110, 198, 242, .3); transition: background .3s, color .3s, border-color .3s; }
.menu__arch a:hover, .menu__minor a:hover { background: var(--fr-turq); color: var(--fr-night); border-color: var(--fr-turq); }
.menu__contact { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .9rem; color: rgba(251, 250, 246, .78); }
.menu__contact a { text-decoration: none; }
.menu__side { background: var(--fr-night); }
.menu__side figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 51, .85), rgba(7, 26, 51, 0) 50%); }
.menu__side figcaption { position: absolute; z-index: 2; left: 2rem; right: 2rem; bottom: 2rem; display: grid; gap: .5rem; font-size: .95rem; color: rgba(251, 250, 246, .9); max-width: 26rem; }
.menu__side figcaption span { font: 500 .7rem/1 var(--f-mono); color: var(--fr-turq); letter-spacing: .2em; }

/* ---------- comparateur et repères ---------- */
.cmp__seam { background: var(--fr-pearl); box-shadow: 0 0 0 1px rgba(11, 37, 69, .2), 0 0 24px rgba(46, 196, 182, .6); }
.cmp__knob { border-radius: 50%; background: var(--fr-pearl); color: var(--fr-night); box-shadow: 0 0 0 5px rgba(46, 196, 182, .35), 0 14px 30px -10px rgba(0, 0, 0, .55); }
.ba-pin { position: absolute; z-index: 5; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: opacity .3s, transform .4s var(--ease); }
.ba-pin.is-off { opacity: 0; pointer-events: none; transform: scale(.6); }
.ba-pin i, .floor-pin button i { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font: 500 .7rem/1 var(--f-mono); font-style: normal; color: var(--fr-night); background: var(--fr-pearl); box-shadow: 0 0 0 3px var(--fr-red), 0 8px 20px rgba(0, 0, 0, .45); animation: fr-pulse 2.6s infinite; }
.ba-pin.is-open i, .floor-pin.is-open button i { background: var(--fr-red); color: #fff; animation: none; }
@keyframes fr-pulse { 0% { box-shadow: 0 0 0 3px var(--fr-red), 0 0 0 3px rgba(224, 99, 63, .5), 0 8px 20px rgba(0, 0, 0, .45); } 70% { box-shadow: 0 0 0 3px var(--fr-red), 0 0 0 16px rgba(224, 99, 63, 0), 0 8px 20px rgba(0, 0, 0, .45); } 100% { box-shadow: 0 0 0 3px var(--fr-red), 0 0 0 16px rgba(224, 99, 63, 0), 0 8px 20px rgba(0, 0, 0, .45); } }
.ba-bub { position: absolute; z-index: 6; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); transform: translate(-1.4rem, calc(-100% - 1.8rem)); width: min(16rem, 70%); display: grid; gap: .3rem; padding: .95rem 1.05rem; border-radius: 16px; background: var(--fr-pearl); color: var(--fr-ink); box-shadow: 0 24px 46px -16px rgba(0, 0, 0, .55); font-size: .86rem; line-height: 1.42; border-top: 3px solid var(--fr-turq); }
.ba-bub[hidden] { display: none; }
.ba-bub--l { transform: translate(calc(-100% + 1.4rem), calc(-100% - 1.8rem)); }
.ba-bub--d { transform: translate(-1.4rem, 1.8rem); }
.ba-bub--l.ba-bub--d { transform: translate(calc(-100% + 1.4rem), 1.8rem); }
.ba-bub b { font-family: var(--f-display); font-weight: 500; font-size: 1rem; }
.ba-bub span { color: var(--fr-soft); }

/* ---------- accueil : le lagon et la tôle ---------- */
.craft { position: relative; height: 640vh; background: var(--fr-night); }
.craft__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--fr-pearl); }
#c-craft { position: absolute; inset: 0; width: 100%; height: 100%; }
.craft__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 26, 51, .82) 0%, rgba(7, 26, 51, .42) 36%, rgba(7, 26, 51, 0) 62%), linear-gradient(0deg, rgba(7, 26, 51, .75) 0%, rgba(7, 26, 51, 0) 42%), linear-gradient(180deg, rgba(7, 26, 51, .55) 0%, rgba(7, 26, 51, 0) 22%); }
.craft__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(../tex/grain.png) 0 0 / 256px; opacity: .07; mix-blend-mode: overlay; }
.hero-copy { position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(2.6rem, 8vh, 6.5rem); width: min(46rem, calc(100% - var(--gutter) * 2)); }
.hero-copy .dsp em { color: var(--fr-sky); }
.hero-copy .lede { color: rgba(251, 250, 246, .86); max-width: 40ch; text-shadow: 0 2px 18px rgba(7, 26, 51, .5); }
.scroll-cue { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; font: 500 .62rem/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: rgba(251, 250, 246, .75); }
.scroll-cue i { position: relative; width: 3.4rem; height: 1px; background: rgba(251, 250, 246, .3); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--fr-turq); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.releve { position: absolute; z-index: 4; right: var(--gutter); top: calc(var(--bar) + 1.6rem); width: 17.5rem; padding: 1rem 1.1rem .9rem; border-radius: 18px; background: rgba(7, 26, 51, .5); border: 1px solid rgba(110, 198, 242, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(-10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.releve.is-on { opacity: 1; transform: none; }
.releve__k, .releve__n { display: block; font: 500 .58rem/1.3 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fr-sky); }
.releve__n { margin-top: .5rem; color: rgba(251, 250, 246, .7); }
.releve__n b { color: var(--fr-turq); font-weight: 500; }
.releve__n em { font-style: normal; color: var(--fr-pearl); }
.profil { width: 100%; height: auto; margin-top: .6rem; overflow: visible; }
.pf { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.1s var(--ease), opacity .5s; vector-effect: non-scaling-stroke; }
.pf.is-on { stroke-dashoffset: 0; opacity: 1; }
.pf--eau { stroke: var(--fr-turq); } .pf--eau2 { stroke: var(--fr-lagoon); }
.pf--rouille { stroke: #C26A3A; stroke-dasharray: 1; }
.pf--bois { stroke: #D8B47A; } .pf--membrane { stroke: var(--fr-sky); stroke-width: 1.4; }
.pf--rouge { stroke: var(--fr-red); stroke-width: 2.6; } .pf--soleil { stroke: #F6A04D; }
.rail { position: absolute; z-index: 4; right: var(--gutter); top: 50%; transform: translateY(-38%); display: flex; gap: 1rem; opacity: 0; transition: opacity .6s; }
.craft.is-moving .rail { opacity: 1; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; justify-items: end; }
.rail li { display: flex; align-items: center; gap: .8rem; font: 500 .62rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 250, 246, .45); transition: color .4s; }
.rail li b { font-weight: 500; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .7s var(--ease), opacity .4s; }
.rail li span { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(251, 250, 246, .25); transition: background .4s, color .4s, border-color .4s; }
.rail li.is-done span { border-color: var(--fr-turq); color: var(--fr-turq); }
.rail li.is-on { color: var(--fr-pearl); }
.rail li.is-on b { max-width: 14rem; opacity: 1; }
.rail li.is-on span { background: var(--fr-red); border-color: var(--fr-red); color: #fff; }
.rail__bar { width: 2px; border-radius: 2px; background: rgba(251, 250, 246, .15); overflow: hidden; }
.rail__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--fr-sky), var(--fr-turq)); transform-origin: 50% 0; transform: scaleY(0); }
.phase { position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(2.2rem, 7vh, 5rem); width: min(35rem, calc(100% - var(--gutter) * 2)); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.5rem 1.7rem 1.6rem; border-radius: 26px; background: rgba(7, 26, 51, .56); border: 1px solid rgba(110, 198, 242, .22); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); opacity: 0; visibility: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.phase .wnum { --s: 3.4rem; }
.phase .kicker { margin-bottom: .7rem; }
.phase h2 { font-size: clamp(1.7rem, 1.15rem + 1.6vw, 2.7rem); }
.phase p { margin-top: .7rem; color: rgba(251, 250, 246, .84); line-height: 1.6; font-size: .98rem; }
.phase a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font: 500 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-turq); text-decoration: none; }
.phase a svg { width: .95rem; height: .95rem; }
.craft__end { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(52rem, calc(100% - var(--gutter) * 2)); transform: translate(-50%, -50%); text-align: center; display: grid; justify-items: center; opacity: 0; visibility: hidden; }
.craft__seal { position: relative; width: clamp(9rem, 18vw, 14rem); aspect-ratio: 1; display: grid; place-items: center; will-change: transform; }
.craft__seal img { width: 78%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)); }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: loader-spin 40s linear infinite; }
.seal-ring text { font: 500 9.6px var(--f-mono); letter-spacing: 3.1px; fill: rgba(251, 250, 246, .85); }
.craft__end h2 { margin-top: 1.3rem; font-size: clamp(3rem, 1.6rem + 6vw, 7.4rem); font-weight: 360; text-shadow: 0 6px 40px rgba(7, 26, 51, .6); }
.craft__end h2 span { display: block; margin-top: .4rem; font-size: .42em; font-weight: 340; letter-spacing: -.01em; color: rgba(251, 250, 246, .92); }
.craft__end h2 span em { color: var(--fr-sky); }
.craft__end .hero-ctas { justify-content: center; }
.craft__tag { position: absolute; z-index: 4; right: var(--gutter); bottom: 1.4rem; }
.craft__progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(251, 250, 246, .1); }
.craft__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--fr-lagoon), var(--fr-turq), var(--fr-red)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- effacez la rouille ---------- */
.brush { position: relative; height: 270vh; background: var(--fr-night); }
.brush__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--fr-pearl); }
#c-paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.brush__fb { position: absolute; inset: 0; aspect-ratio: auto; --seam: 100%; }
.has-gl .brush__fb { display: none; }
.brush__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 26, 51, .8) 0%, rgba(7, 26, 51, .3) 34%, rgba(7, 26, 51, 0) 55%), linear-gradient(0deg, rgba(7, 26, 51, .5), rgba(7, 26, 51, 0) 30%); }
.brush__copy { position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(26rem, calc(100% - var(--gutter) * 2)); pointer-events: none; }
.brush__copy .dsp em { color: var(--fr-sky); }
.brush__copy .body-t { margin-top: 1.2rem; color: rgba(251, 250, 246, .84); }
.brush__t { position: absolute; z-index: 3; top: calc(var(--bar) + 1.2rem); }
.brush__t--b { left: var(--gutter); } .brush__t--a { right: var(--gutter); }
.brush__ill { position: absolute; z-index: 3; right: var(--gutter); bottom: 1.4rem; }
.brush__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(251, 250, 246, .1); }
.brush__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--fr-red), var(--fr-turq)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- module 3D (emplacement) ---------- */
.mod-slot { position: relative; background: var(--fr-night); }
.mod-slot > .swell { z-index: 4; }

/* ---------- Ia ora na ---------- */
.iao__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem var(--gutter); align-items: center; }
.iao__tr { margin-top: 1.2rem; font-family: var(--f-kw); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); color: var(--fr-lagoon); }
.iao__tr em { color: var(--fr-red); font-size: 1em; }
.manifest__text { margin-top: 2.2rem; font-family: var(--f-display); font-weight: 340; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.42; letter-spacing: -.01em; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 0; max-width: 34em; }
.manifest__text em { color: var(--fr-lagoon); }
.manifest__text .w { opacity: .18; }
.reduced .manifest__text .w { opacity: 1; }
.iao__seal { position: relative; margin: 0; display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 3vw, 2.6rem); border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -50px rgba(11, 37, 69, .45), inset 0 0 0 1px rgba(11, 37, 69, .06); }
.iao__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: loader-spin 90s linear infinite; }
.iao__ring .fz { fill: none; stroke: var(--fr-night); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.iao__ring .fz--line { stroke: var(--fr-lagoon); opacity: .5; }
.iao__ring .fz--acc { stroke: var(--fr-red); }
.iao__seal img { position: relative; width: 100%; height: auto; }
.iao__seal figcaption { position: absolute; bottom: -2rem; font: 500 .62rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fr-soft); }
.iao__onde { margin: clamp(3rem, 6vw, 5rem) 0; }
.vals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.6rem; }
.vals li { display: grid; gap: .8rem; align-content: start; }
.vals b { font-family: var(--f-display); font-weight: 450; font-size: 1.4rem; line-height: 1.15; font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; }
.vals p { color: var(--fr-soft); font-size: .94rem; }
.seals { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-l); }
.seals div { padding: 1.8rem 1.4rem 0 0; display: grid; gap: .4rem; }
.seals div + div { padding-left: 1.4rem; border-left: 1px solid var(--line-l); }
.seals b { font-family: var(--f-display); font-weight: 340; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.6rem); line-height: 1; color: var(--fr-night); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.seals b em { font-style: italic; font-size: .62em; color: var(--fr-red); }
.seals span { font-size: .88rem; color: var(--fr-soft); }

/* ---------- métiers ---------- */
.metiers__frise { position: absolute; z-index: 2; left: 0; right: 0; top: 2.2rem; }
.mgroup + .mgroup { margin-top: clamp(3.5rem, 6vw, 5rem); }
.mgroup__h { display: grid; grid-template-columns: auto auto 1fr; gap: 1.2rem; align-items: baseline; margin-bottom: 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-l); }
.mgroup__k { font: 500 .7rem/1 var(--f-mono); color: var(--fr-red); letter-spacing: .2em; }
.mgroup__h h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); font-variation-settings: "opsz" 96, "SOFT" 70, "WONK" 1; }
.mgroup__h p { color: var(--fr-soft); font-size: .92rem; justify-self: end; max-width: 40ch; text-align: right; }
.mcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.mcard { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--fr-ink); background: var(--fr-pearl); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 rgba(11, 37, 69, .06), 0 30px 60px -44px rgba(11, 37, 69, .6); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.mcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(11, 37, 69, .06), 0 40px 70px -40px rgba(11, 37, 69, .75); }
.mcard__m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fr-night); }
.mcard__m img, .mcard__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; }
.mcard__m video { opacity: 0; }
.mcard__m video.is-on { opacity: 1; }
.mcard:hover .mcard__m img, .mcard:hover .mcard__m video { transform: scale(1.06); }
.mcard__m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 51, .55), rgba(7, 26, 51, 0) 45%); pointer-events: none; }
.mcard__tag { position: absolute; z-index: 2; left: .8rem; top: .8rem; font: 500 .52rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 250, 246, .9); padding: .4rem .55rem; border-radius: 999px; background: rgba(7, 26, 51, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mcard__b { position: relative; display: grid; gap: .55rem; align-content: start; padding: 1.1rem 1.2rem 1.3rem; }
.mcard__b .wnum { margin: 0 0 .2rem; }
.mcard h3 { margin: .2rem 0 0; font-family: var(--f-display); font-weight: 450; font-size: 1.28rem; line-height: 1.12; font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; }
.mcard p { font-size: .84rem; color: var(--fr-soft); line-height: 1.5; }
.mcard__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .2rem; font: 500 .6rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-red); }
.mcard__go svg { width: .95rem; height: .95rem; transition: transform .5s var(--ease); }
.mcard:hover .mcard__go svg { transform: translateX(4px); }
.sec--night .mcard { background: var(--fr-night-2); color: var(--fr-pearl); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .14), 0 30px 60px -40px rgba(0, 0, 0, .8); }
.sec--night .mcard p { color: rgba(251, 250, 246, .7); }

.sec--night .mcard__go { color: var(--fr-turq); }

/* ---------- configurateur de couleur ---------- */
.floor { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.floor__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 28px; background: var(--fr-night); box-shadow: var(--sh-l); }
.floor__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.floor__raw { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 6; font: 600 .66rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-night); background: rgba(251, 250, 246, .92); border: 0; border-radius: 999px; padding: .85rem 1.15rem; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, color .3s; }
.floor__raw[aria-pressed="true"] { background: var(--fr-red); color: #fff; }
.floor__ill { position: absolute; right: 1.2rem; top: 1.2rem; z-index: 6; }
.floor__side { display: grid; gap: 1.1rem; align-content: start; }
.floor__out { position: relative; display: grid; gap: .45rem; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--fr-night); color: var(--fr-pearl); min-height: 9.5rem; align-content: start; overflow: hidden; }

.floor__out b { font-family: var(--f-display); font-weight: 420; font-size: 1.5rem; font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1; }
.floor__out span { color: rgba(251, 250, 246, .78); font-size: .92rem; line-height: 1.5; position: relative; }
.floor__out em { font-style: normal; font: 500 .62rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-turq); margin-top: .4rem; }
.mats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.mats[hidden] { display: none !important; }
.mats button { display: grid; gap: .5rem; padding: .45rem .45rem .65rem; border: 1px solid var(--line-l); border-radius: 18px; background: rgba(255, 255, 255, .6); cursor: pointer; text-align: left; font: 600 .78rem/1.25 var(--f-text); color: var(--fr-ink); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s, background .3s; }
.mats button img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--fr-sand-2); }
.mats button span { display: flex; align-items: center; gap: .5rem; padding: 0 .2rem; }
.sw { width: .85rem; height: .85rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.sw--rouge { background: var(--fr-red); } .sw--vert { background: var(--fr-green); } .sw--bleu { background: #2B6FA6; } .sw--anthracite { background: #3A3F45; }
.mats button:hover { border-color: rgba(11, 37, 69, .35); }
.mats button[aria-pressed="true"] { border-color: var(--fr-red); background: #fff; transform: translateY(-3px); box-shadow: 0 18px 32px -20px rgba(224, 99, 63, .9); }
.floor__hint { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .86rem; color: var(--fr-soft); }
.floor__hint svg { width: 1.1rem; height: 1.1rem; color: var(--fr-red); flex: none; }
.floor__side .hero-ctas { margin-top: 0; }
.floor__pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.floor-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; }
.floor-pin.is-out { visibility: hidden; pointer-events: none; }
.floor-pin button { position: absolute; left: -1.3rem; top: -1.3rem; width: 2.6rem; height: 2.6rem; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--ease); }
.floor-pin button:hover, .floor-pin.is-open button { transform: scale(1.12); }
.floor-pin__bub { position: absolute; left: -1.2rem; bottom: 1.9rem; width: 15rem; display: grid; gap: .3rem; padding: .95rem 1.05rem; border-radius: 16px; background: var(--fr-pearl); color: var(--fr-ink); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55); font-size: .85rem; line-height: 1.42; border-top: 3px solid var(--fr-turq); }
.floor-pin__bub[hidden] { display: none; }
.floor-pin__bub b { font-family: var(--f-display); font-weight: 500; font-size: 1rem; }
.floor-pin__bub span { color: var(--fr-soft); }
.floor-pin--l .floor-pin__bub { left: auto; right: -1.2rem; }
.floor-pin--c .floor-pin__bub { left: -7.5rem; }
.floor-pin--d .floor-pin__bub { bottom: auto; top: 1.9rem; }

/* ---------- archipels (repli sans module 3D) ---------- */
.archi__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem var(--gutter); align-items: center; }
.archi__list { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; }
.archi__list a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line-d); text-decoration: none; font-family: var(--f-display); font-weight: 380; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); transition: color .3s, padding .5s var(--ease); }
.archi__list a svg { width: 1.2rem; height: 1.2rem; color: var(--fr-turq); }
.archi__list a:hover { color: var(--fr-turq); padding-left: .6rem; }
.archi__list .wnum { --s: 2.6rem; }

/* ---------- carte marine ---------- */
.carte { margin: 0; position: relative; }
.carte svg { width: 100%; height: auto; display: block; overflow: visible; }
.carte figcaption { margin-top: .8rem; font: 400 .62rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fr-soft); }
.sec--night .carte figcaption { color: rgba(251, 250, 246, .55); }
.cm-sea { fill: rgba(31, 162, 201, .08); stroke: rgba(11, 37, 69, .1); }
.sec--night .cm-sea { fill: rgba(110, 198, 242, .05); stroke: rgba(110, 198, 242, .18); }
.cm-grid { stroke: rgba(11, 37, 69, .09); stroke-width: 1; stroke-dasharray: 3 6; }
.sec--night .cm-grid { stroke: rgba(110, 198, 242, .14); }
.cm-deg { font: 500 11px var(--f-mono); letter-spacing: .12em; fill: var(--fr-soft); }
.sec--night .cm-deg { fill: rgba(169, 195, 214, .7); }
.cm-haute { fill: var(--fr-green); stroke: var(--fr-pearl); stroke-width: 1.5; }
.cm-atoll { fill: none; stroke: var(--fr-lagoon); stroke-width: 2.4; }
.sec--night .cm-haute { fill: var(--fr-turq); stroke: var(--fr-night); }
.sec--night .cm-atoll { stroke: var(--fr-sky); }
.cm-haute.is-me { fill: var(--fr-red); }
.cm-arch { transition: opacity .6s; }
.cm-arch:not(.is-on) { opacity: .32; }
.cm-alab { font: 500 13px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; fill: var(--fr-night); }
.cm-alab--far { fill: var(--fr-soft); opacity: .7; }
.cm-lead { fill: none; stroke: rgba(11, 37, 69, .35); stroke-width: 1; }
.sec--night .cm-lead { stroke: rgba(169, 195, 214, .45); }
.sec--night .cm-alab { fill: var(--fr-sky); }
.cm-lbl { font: 500 14px var(--f-text); fill: var(--fr-ink); paint-order: stroke; stroke: var(--fr-pearl); stroke-width: 4px; stroke-linejoin: round; }
.cm-lbl--s { font-size: 12.5px; }
.cm-lbl--me { font-family: var(--f-display); font-size: 19px; font-weight: 500; fill: var(--fr-red); }
.sec--night .cm-lbl { fill: var(--fr-pearl); stroke: var(--fr-night); }
.cm-link { cursor: pointer; }
.cm-link .cm-lbl { text-decoration: underline; text-decoration-color: rgba(31, 162, 201, .5); text-underline-offset: 3px; }
.cm-link:hover .cm-lbl { fill: var(--fr-lagoon); }
.cm-ring { fill: none; stroke: var(--fr-red); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cm-ring 2.6s var(--ease) infinite; }
@keyframes cm-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.carte:not(.is-vis) .cm-ring { animation-play-state: paused; }
.cm-route { fill: none; stroke: var(--fr-red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-io) .3s; }
.carte.is-on .cm-route { stroke-dashoffset: 0; }
.cm-base { fill: var(--fr-red); }
.cm-inset__bg { fill: var(--fr-pearl); stroke: rgba(11, 37, 69, .15); filter: drop-shadow(0 10px 18px rgba(11, 37, 69, .15)); }
.sec--night .cm-inset__bg { fill: var(--fr-night-2); stroke: rgba(110, 198, 242, .2); }

/* ---------- promesses ---------- */
.promesses__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.promesse { position: relative; display: grid; gap: 1rem; align-content: start; padding: clamp(1.8rem, 3vw, 3rem); border-radius: 30px; background: var(--fr-pearl); box-shadow: var(--sh-l); overflow: hidden; }
.promesse__ico { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--fr-night); color: var(--fr-turq); }
.promesse__ico svg { width: 1.8rem; height: 1.8rem; }
.promesse h3 { margin: .4rem 0 0; font-family: var(--f-display); font-weight: 360; font-size: clamp(2rem, 1.4rem + 2vw, 3.3rem); line-height: 1; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
.promesse h3 em { font-style: italic; color: var(--fr-red); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.promesse p { color: var(--fr-soft); max-width: 44ch; }
.promesse__frise { margin-top: 1rem; }
.promesse--b { background: var(--fr-night); color: var(--fr-pearl); }
.promesse--b p { color: rgba(251, 250, 246, .78); }
.promesse--b h3 em { color: var(--fr-turq); }
.promesse--b .promesse__ico { background: var(--fr-red); color: #fff; }
.promesse--b .frise { color: var(--fr-sky); }

/* ---------- finale ---------- */
.finale { position: relative; overflow: hidden; color: var(--fr-pearl); background: var(--fr-night); padding: clamp(6rem, 11vw, 10rem) 0; }
.finale__bg { position: absolute; inset: 0; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; }
.finale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 26, 51, .92) 0%, rgba(7, 26, 51, .7) 45%, rgba(7, 26, 51, .35) 100%), linear-gradient(0deg, rgba(7, 26, 51, .6), transparent 40%); }
.finale__reflets { opacity: .05; z-index: 1; }
.finale__in { position: relative; z-index: 2; width: 100%; max-width: 92rem; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem var(--gutter); align-items: center; }
.finale .lede { color: rgba(251, 250, 246, .84); }
.finale__tels { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 2rem; font-size: 1.05rem; }
.finale__tels .tel { color: var(--fr-pearl); }
.finale__tels svg { color: var(--fr-turq); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.5rem, 2.6vw, 2.4rem); border-radius: 28px; background: rgba(251, 250, 246, .94); color: var(--fr-ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.quick h3 { grid-column: 1 / -1; margin: 0 0 .2rem; font-family: var(--f-display); font-weight: 420; font-size: 1.9rem; font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1; }
.quick__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }
.quick__row a { font-size: .86rem; color: var(--fr-lagoon); }
.quick .note { grid-column: 1 / -1; }
.done { grid-column: 1 / -1; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(46, 196, 182, .14); color: var(--fr-ink); font-size: .92rem; }
.done a { color: var(--fr-red); }

/* ---------- formulaires ---------- */
.fld { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fr-soft); }
.fld input, .fld select, .fld textarea { font: 400 1rem/1.4 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--fr-ink); background: #fff; border: 1px solid rgba(11, 37, 69, .16); border-radius: 14px; transition: border-color .3s, box-shadow .3s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--fr-lagoon); box-shadow: 0 0 0 4px rgba(31, 162, 201, .16); }
.consent { font-size: .84rem; color: var(--fr-soft); }
.consent a { color: var(--fr-lagoon); }

/* ---------- pages métier ---------- */
.s-hero, .a-hero, .i-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--fr-pearl); background: var(--fr-night); }
.s-hero > .poster, .s-hero > video, .s-hero .still, .a-hero > picture, .a-hero > img, .i-hero > picture, .i-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-hero img, .s-hero video, .a-hero img, .i-hero img { width: 100%; height: 100%; object-fit: cover; }
.s-hero video { position: absolute; inset: 0; }
.s-hero .still img { animation: kenburns 26s var(--ease-io) infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2%, -1.5%, 0); } }
.s-hero__shade, .a-hero__shade, .i-hero__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 26, 51, .85) 0%, rgba(7, 26, 51, .45) 42%, rgba(7, 26, 51, .05) 75%), linear-gradient(0deg, rgba(7, 26, 51, .8) 0%, rgba(7, 26, 51, 0) 45%), linear-gradient(180deg, rgba(7, 26, 51, .55) 0%, transparent 25%); }
.a-hero__reflets { opacity: .035; z-index: 1; }
.s-hero__in, .a-hero__in, .i-hero__in { position: relative; z-index: 3; width: 100%; max-width: 92rem; margin: 0 auto; padding: calc(var(--bar) + 4rem) var(--gutter) calc(var(--sw-h) + clamp(2rem, 6vh, 4.5rem)); }
.s-hero__in > *:not(.crumb):not(.kicker):not(.hero-ctas), .a-hero__in .lede, .i-hero__in .lede { max-width: 48rem; }
.s-hero .dsp em, .a-hero .dsp em, .i-hero .dsp em { color: var(--fr-sky); }
.s-hero .lede, .a-hero .lede, .i-hero .lede { color: rgba(251, 250, 246, .86); max-width: 44ch; }
.s-hero__n { position: absolute; z-index: 2; right: calc(var(--gutter) - .06em); top: 50%; transform: translateY(-55%); font-family: var(--f-display); font-weight: 300; font-size: clamp(9rem, 26vw, 30rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.4px rgba(110, 198, 242, .55); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-style: italic; pointer-events: none; }
.s-hero__meta, .a-hero__ill { position: absolute; z-index: 4; right: var(--gutter); top: calc(var(--bar) + 1.2rem); }
.i-hero__meta { position: absolute; z-index: 4; right: var(--gutter); top: calc(var(--bar) + 1.2rem); display: flex; gap: .5rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 999px; background: rgba(251, 250, 246, .92); color: var(--fr-ink); font-size: .8rem; font-weight: 600; }
.chip svg { width: 1rem; height: 1rem; color: var(--fr-red); }
.chip--note { background: var(--fr-rose); color: #fff; font: 500 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }

.signs__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem var(--gutter); align-items: start; }
.signs__frise { margin-top: 2.6rem; max-width: 26rem; }
.signs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.signs__list li { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.4rem 1.5rem; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(11, 37, 69, .05), 0 24px 50px -40px rgba(11, 37, 69, .55); }
.signs__list b { display: block; font-family: var(--f-display); font-weight: 450; font-size: 1.28rem; line-height: 1.2; font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; }
.signs__list span { display: block; margin-top: .35rem; color: var(--fr-soft); font-size: .95rem; }

.presta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem var(--gutter); align-items: start; }
.presta__onde { margin-top: 2.6rem; border-radius: 18px; overflow: hidden; }
.presta__list { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.presta__list li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--line-d); font-family: var(--f-display); font-weight: 350; font-size: clamp(1.25rem, 1rem + .9vw, 1.85rem); line-height: 1.2; font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1; }
.presta__list li span { font: 500 .72rem/1 var(--f-mono); color: var(--fr-turq); letter-spacing: .1em; }

.method__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.step { position: relative; display: grid; gap: .7rem; align-content: start; padding: 1.8rem 1.6rem 2rem; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(11, 37, 69, .05), 0 30px 60px -46px rgba(11, 37, 69, .6); }
.step__k { font: 500 .62rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fr-red); margin-top: .5rem; }
.step h3 { margin: 0; font-family: var(--f-display); font-weight: 450; font-size: 1.45rem; line-height: 1.15; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; }
.step p { color: var(--fr-soft); font-size: .95rem; }
.sec--night .step { background: var(--fr-night-2); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .14); }
.sec--night .step p { color: rgba(251, 250, 246, .75); }
.sec--night .step__k { color: var(--fr-turq); }
.method__frise { margin-top: clamp(3rem, 5vw, 4.5rem); }

.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem var(--gutter); align-items: start; }
.faq__frise { margin-top: 2.4rem; max-width: 22rem; }
.faq__list details { border-bottom: 1px solid var(--line-l); }
.faq__list details:first-child { border-top: 1px solid var(--line-l); }
.faq__list summary { list-style: none; display: flex; justify-content: space-between; gap: 1.4rem; align-items: center; padding: 1.4rem 0; cursor: pointer; font-family: var(--f-display); font-weight: 420; font-size: clamp(1.12rem, 1rem + .4vw, 1.38rem); line-height: 1.3; font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary i { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--fr-night); color: var(--fr-turq); transition: transform .5s var(--ease), background .3s; }
.faq__list summary i svg { width: 1rem; height: 1rem; }
.faq__list details[open] summary i { transform: rotate(45deg); background: var(--fr-red); color: #fff; }
.faq__list details p { padding: 0 3.6rem 1.6rem 0; color: var(--fr-soft); }

/* devis */
.ask { overflow: visible; }
.ask__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem var(--gutter); align-items: start; }
.ask__side .body-t { margin-top: 1.4rem; }
.ask__tels { display: grid; gap: .6rem; margin-top: 2rem; }
.ask__tels .tel { color: var(--fr-ink); font-size: .95rem; }
.ask__tels svg { color: var(--fr-red); }
.steps-nav li { font: 500 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-soft); }
.steps-nav li::before { border-radius: 50%; transform: none; border-color: var(--fr-lagoon); width: .6rem; height: .6rem; }
.steps-nav li.is-on { color: var(--fr-ink); }
.steps-nav li.is-on::before { background: var(--fr-red); border-color: var(--fr-red); transform: scale(1.3); }
.steps-nav li.is-done::before { background: var(--fr-turq); border-color: var(--fr-turq); }
.wizard { display: grid; gap: 1.2rem; padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: 30px; background: var(--fr-pearl); box-shadow: var(--sh-l); }
.wizard legend { margin-bottom: .6rem; font-family: var(--f-display); font-weight: 420; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1; }
.chips span { padding: .65rem 1rem; border-radius: 999px; border: 1px solid rgba(11, 37, 69, .18); background: #fff; font-size: .86rem; transition: background .3s, color .3s, border-color .3s; }
.chips input:checked + span { background: var(--fr-night); color: var(--fr-pearl); border-color: var(--fr-night); box-shadow: inset 0 -3px 0 var(--fr-turq); }
.chips input:focus-visible + span { outline: 2px solid var(--fr-turq); outline-offset: 2px; }
.wizard__err { color: var(--fr-red); font-size: .88rem; min-height: 1.2em; }
.wizard__back { color: var(--fr-soft); font-size: .88rem; }
.recap dt { font: 500 .62rem/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-soft); }
.recap dd { font-size: .95rem; }

/* liens voisins */
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.related__grid .mcard__m { aspect-ratio: 16 / 11; }
.v-all { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.4rem; }
.v-all a { text-decoration: none; font-size: .84rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid rgba(11, 37, 69, .18); transition: background .3s, color .3s; }
.v-all a:hover { background: var(--fr-night); color: var(--fr-pearl); }
.v-all__sim { background: var(--fr-red); color: #fff; border-color: var(--fr-red) !important; }
.v-all--d a { border-color: rgba(110, 198, 242, .3); }
.v-all--d a:hover { background: var(--fr-turq); color: var(--fr-night); }

/* ---------- archipels et îles ---------- */
.a-iles__grid, .v-local__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem var(--gutter); align-items: start; }
.iles { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.iles li { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -36px rgba(11, 37, 69, .6); }
.iles__t { font: 500 .58rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-lagoon); }
.iles b { font-family: var(--f-display); font-weight: 450; font-size: 1.2rem; }
.iles a { font-size: .8rem; color: var(--fr-red); display: inline-flex; gap: .3rem; align-items: center; }
.iles a svg { width: .85rem; height: .85rem; }
.iles__c { display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.expo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.expo__it { display: grid; gap: .8rem; align-content: start; padding: 1.8rem 1.6rem; border-radius: 24px; background: rgba(251, 250, 246, .04); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .16); }
.expo__it h3 { margin: .4rem 0 0; font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1; }
.expo__it p { color: rgba(251, 250, 246, .76); font-size: .96rem; }
.expo__onde { margin-top: clamp(3rem, 5vw, 4rem); border-radius: 18px; overflow: hidden; }
.v-local .body-t { margin-top: 1.4rem; }
.v-expo { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.v-expo li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; font-size: .96rem; }
.v-expo .wnum { --s: 2.5rem; }
.v-near { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.2rem, 4vw, 3rem); }
.v-near a { position: relative; display: grid; gap: .35rem; padding: 1.4rem 1.3rem 1.5rem; border-radius: 22px; text-decoration: none; background: var(--fr-night-2); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .16); transition: background .4s, transform .5s var(--ease); }
.v-near a:hover { background: var(--fr-night-3); transform: translateY(-4px); }
.v-near b { font-family: var(--f-display); font-weight: 420; font-size: 1.4rem; }
.v-near span { font: 500 .6rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fr-sky); }
.v-near svg { position: absolute; right: 1.1rem; top: 1.2rem; width: 1.1rem; height: 1.1rem; color: var(--fr-turq); }

/* ---------- entreprise ---------- */
.ent-hero { padding-top: calc(var(--bar) + 4rem); color: var(--fr-pearl); }
.ent-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem var(--gutter); align-items: center; }
.ent-hero .dsp em { color: var(--fr-sky); }
.seal-read { position: relative; margin: 0; }
.seal-read img { width: 100%; height: auto; }
.seal-read figcaption { margin-top: 1rem; text-align: center; font: 500 .62rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fr-sky); }
.atelier__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem var(--gutter); align-items: center; }
.atelier__img { position: relative; margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sh-l); background: var(--fr-night); }
.atelier__img img { width: 100%; height: 100%; object-fit: cover; }
.atelier__img picture { display: contents; }
.atelier__ill { position: absolute; left: 1.2rem; top: 1.2rem; }
.atelier__steps { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.atelier__steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.atelier__steps b { display: block; font-family: var(--f-display); font-weight: 450; font-size: 1.3rem; }
.atelier__steps span { display: block; margin-top: .25rem; color: var(--fr-soft); font-size: .95rem; }
.coords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin: 0; }
.coords div { padding-top: 1.2rem; border-top: 2px solid var(--fr-night); }
.coords dt { font: 500 .62rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fr-lagoon); }
.coords dd { margin: .6rem 0 0; font-family: var(--f-display); font-size: 1.3rem; word-break: break-word; }
.coords a { text-decoration: none; }

/* ---------- carnet ---------- */
.carnet { padding-top: calc(var(--bar) + 3.5rem); }
.carnet__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem var(--gutter); align-items: start; }
.carnet__side .crumb { color: var(--fr-soft); }
.carnet__tel { margin-top: 2rem; font-size: .92rem; color: var(--fr-soft); }
.carnet__tel .tel { color: var(--fr-red); }
.carnet__frise { margin-top: 2rem; }
.carnet__panel { padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: 30px; background: var(--fr-pearl); box-shadow: var(--sh-l); min-height: 30rem; display: grid; gap: 1.2rem; align-content: start; }
.cq { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1; }
.cq-hint { color: var(--fr-soft); font-size: .92rem; }
.cq-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.cq-card { display: grid; gap: .45rem; padding: .4rem .4rem .6rem; border-radius: 16px; border: 1px solid var(--line-l); background: #fff; cursor: pointer; text-align: left; font: 600 .74rem/1.25 var(--f-text); color: var(--fr-ink); transition: border-color .3s, transform .4s var(--ease); }
.cq-card__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: var(--fr-night); }
.cq-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cq-card__img i { position: absolute; left: .4rem; top: .4rem; font: 500 .58rem/1 var(--f-mono); font-style: normal; color: #fff; background: rgba(7, 26, 51, .65); padding: .3rem .4rem; border-radius: 999px; }
.cq-card[aria-pressed="true"] { border-color: var(--fr-red); transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(224, 99, 63, .9); }
.cq-group { display: grid; gap: .6rem; }
.cq-group > span { font: 500 .64rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-soft); }
.cq-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.cq-opts button { padding: .62rem 1rem; border-radius: 999px; border: 1px solid rgba(11, 37, 69, .18); background: #fff; cursor: pointer; font-size: .86rem; color: var(--fr-ink); transition: background .3s, color .3s; }
.cq-opts button[aria-pressed="true"] { background: var(--fr-night); color: var(--fr-pearl); border-color: var(--fr-night); box-shadow: inset 0 -3px 0 var(--fr-turq); }
.cq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cq-err { color: var(--fr-red); min-height: 1.2em; font-size: .88rem; }
.cq-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cq-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.sheet { padding: 1.6rem 1.7rem; border-radius: 22px; background: #fff; border: 1px solid var(--line-l); }
.sheet__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; border-bottom: 2px solid var(--fr-night); }
.sheet__h b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 450; }
.sheet__h img { width: 3.2rem; height: 3.2rem; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 1rem 0; }
.sheet dt { font: 500 .62rem/1.7 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-lagoon); }
.sheet dd { margin: 0; font-size: .95rem; }
.sheet h4 { margin: 1rem 0 .5rem; font-family: var(--f-display); font-weight: 450; font-size: 1.15rem; }
.sheet ul { margin: 0; padding-left: 1.2rem; color: var(--fr-soft); }
.sheet__note { margin-top: 1rem; font-size: .84rem; color: var(--fr-soft); }

/* ---------- contact, pages légales ---------- */
.page-top.contact-top { padding-top: calc(var(--bar) + 4rem); padding-bottom: 0; }
.contact-top .dsp em { color: var(--fr-sky); }
.contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.ccard { position: relative; display: grid; gap: .5rem; padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; text-decoration: none; background: var(--fr-night-2); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .16); color: var(--fr-pearl); transition: background .3s, transform .5s var(--ease); min-width: 0; }
a.ccard:hover { background: var(--fr-night-3); transform: translateY(-4px); }
.ccard span { font: 500 .6rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-sky); }
.ccard b { font-family: var(--f-display); font-weight: 420; font-size: 1.35rem; line-height: 1.2; }
.ccard__mail { font-size: 1rem !important; word-break: break-all; font-family: var(--f-mono) !important; }
.ccard svg { position: absolute; right: 1.2rem; top: 1.2rem; width: 1.2rem; height: 1.2rem; color: var(--fr-turq); }
.contact__onde { margin-top: 4rem; }
.legal { padding-top: calc(var(--bar) + 4rem); }
.legal .wrap { max-width: 54rem; }
.legal__frise { margin: 2rem 0 1rem; }
.legal h2 { margin: 2.4rem 0 .6rem; font-family: var(--f-display); font-weight: 450; font-size: 1.5rem; }
.legal p { color: var(--fr-soft); margin-top: .6rem; }
.legal a { color: var(--fr-lagoon); }

/* ---------- pied de page ---------- */
.foot { position: relative; overflow: hidden; padding: 0 0 2rem; background: var(--fr-abyss); color: var(--fr-pearl); }
.foot__onde { height: clamp(90px, 9vw, 140px); background: linear-gradient(var(--fr-night), var(--fr-abyss)); }
.foot__reflets { opacity: .05; }
.foot .wrap { padding-top: clamp(3rem, 5vw, 4.5rem); }
.foot__top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2.4rem 1.6rem; }
.foot__brand img { width: 15rem; height: auto; }
.foot__addr { margin-top: 1.2rem; color: rgba(251, 250, 246, .7); font-size: .9rem; }
.foot__tels { display: grid; gap: .4rem; margin-top: 1rem; font-size: .9rem; }
.foot__tels svg { color: var(--fr-turq); }
.foot__mail { color: rgba(251, 250, 246, .8); }
.foot__col { display: grid; gap: .5rem; align-content: start; }
.foot__col h4 { margin: 0 0 .5rem; font: 500 .62rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fr-sky); }
.foot__col a { font-size: .88rem; color: rgba(251, 250, 246, .78); text-decoration: none; transition: color .3s; }
.foot__col a:hover { color: var(--fr-turq); }
.foot__ile { padding-left: .9rem; position: relative; }
.foot__ile::before { content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--fr-red); }
.foot__big { margin-top: clamp(3rem, 6vw, 5rem); display: flex; align-items: baseline; gap: .2em; font-family: var(--f-display); font-weight: 300; font-size: clamp(4rem, 1rem + 15vw, 17rem); line-height: .82; letter-spacing: -.04em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; white-space: nowrap; }
.foot__big span { background: linear-gradient(100deg, var(--fr-pearl) 20%, var(--fr-sky) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__big em { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--fr-red); }
.foot__frise { margin-top: 1.4rem; color: var(--fr-lagoon); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 1.4rem; font: 400 .66rem/1.5 var(--f-mono); letter-spacing: .06em; color: rgba(251, 250, 246, .55); }

/* ---------- boutons flottants ---------- */
.fab-meteo { border: 0; border-radius: 999px; background: rgba(11, 37, 69, .86); color: var(--fr-pearl); box-shadow: inset 0 0 0 1px rgba(110, 198, 242, .25), 0 18px 34px -16px rgba(0, 0, 0, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); --ico-acc: #FFC37A; }
.fab-meteo__ico { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(110, 198, 242, .3), rgba(110, 198, 242, .08)); color: var(--fr-pearl); }
.fab-meteo__t { font-family: var(--f-display); font-weight: 450; font-size: 1.05rem; line-height: 1; }
.fab-meteo__l { font: 500 .54rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-turq); margin-top: .25rem; }
.fab-btn { border-radius: 999px; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55); }
.fab-call { background: var(--fr-red); color: #fff; }
.fab-call__n { font: 500 .86rem/1 var(--f-mono); }
.fab-chat { background: var(--fr-pearl); color: var(--fr-night); }
.fab-badge { border-radius: 50%; background: var(--fr-turq); color: var(--fr-night); }
.fab-panel { border-radius: 24px; background: var(--fr-pearl); color: var(--fr-ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(11, 37, 69, .08); }
.fab-panel--meteo { background: #08203d; color: var(--fr-pearl); width: min(26rem, calc(100vw - 2rem)); max-height: calc(100svh - 8.5rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mt { position: relative; isolation: isolate; padding: 1.35rem 1.35rem 1.15rem; gap: 1rem; transition: opacity .3s; }
.mt.is-loading { opacity: .55; pointer-events: none; }
/* ciel : dégradé selon le temps, lueur et texture de pluie en raster léger */
.mt__sky { position: absolute; z-index: -1; inset: 0 0 auto; height: 15.5rem; overflow: hidden; background: linear-gradient(180deg, #1c6fa6, #0d3b66 55%, #08203d); }
.mt__sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 32, 61, 0) 40%, #08203d); }
.mt__sky i { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .7; }
.mt__sky i:nth-child(1) { width: 12rem; height: 12rem; right: -2rem; top: -3.5rem; background: radial-gradient(circle, #ffd59a, rgba(246, 160, 77, 0) 70%); animation: mt-glow 9s ease-in-out infinite alternate; }
.mt__sky i:nth-child(2) { width: 16rem; height: 6rem; left: -4rem; top: 5rem; background: radial-gradient(closest-side, rgba(110, 198, 242, .55), rgba(110, 198, 242, 0)); animation: mt-drift 16s ease-in-out infinite alternate; }
.mt__sky i:nth-child(3) { display: none; }
.mt__sky--soleil { background: linear-gradient(180deg, #2a8fc7, #155a8f 50%, #08203d); }
.mt__sky--gris { background: linear-gradient(180deg, #4e6a86, #233f5e 55%, #08203d); }
.mt__sky--gris i:nth-child(1) { opacity: .25; }
.mt__sky--pluie, .mt__sky--orage { background: linear-gradient(180deg, #3d5670, #1b3350 55%, #08203d); }
.mt__sky--pluie i:nth-child(1), .mt__sky--orage i:nth-child(1) { opacity: 0; }
.mt__sky--pluie i:nth-child(3), .mt__sky--orage i:nth-child(3) { display: block; inset: -50% -10% 0; border-radius: 0; filter: none; opacity: .35; background: repeating-linear-gradient(104deg, rgba(255, 255, 255, 0) 0 9px, rgba(220, 236, 250, .55) 9px 10px, rgba(255, 255, 255, 0) 10px 23px); animation: mt-rain .7s linear infinite; }
.mt__sky--orage { animation: mt-flash 7s steps(1) infinite; }
.mt__sky--nuit { background: linear-gradient(180deg, #0c2a4f, #0a2342 55%, #08203d); }
.mt__sky--nuit i:nth-child(1) { background: radial-gradient(circle, rgba(220, 230, 255, .55), rgba(220, 230, 255, 0) 70%); }
@keyframes mt-glow { to { transform: translate(-1.2rem, .8rem) scale(1.12); } }
@keyframes mt-drift { to { transform: translateX(3rem); } }
@keyframes mt-rain { to { transform: translate3d(-12px, 46px, 0); } }
@keyframes mt-flash { 0%, 61%, 63%, 100% { filter: none; } 62% { filter: brightness(1.8); } }
.mt__now { grid-template-columns: 1fr auto auto; align-items: start; gap: .6rem; }
.mt__now small { font: 500 .58rem/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 250, 246, .78); }
.mt__t { display: block; font-family: var(--f-display); font-weight: 300; font-size: 4.6rem; line-height: .9; letter-spacing: -.04em; margin: .35rem 0 .2rem; font-variation-settings: "opsz" 144, "SOFT" 50; }
.mt__t sup { font-size: .42em; vertical-align: top; position: relative; top: .25em; margin-left: .04em; color: var(--fr-sky); }
.mt__now span { font-size: .9rem; color: rgba(251, 250, 246, .9); }
.mt__ico { width: 4.2rem; height: 4.2rem; border-radius: 0; background: none; color: rgba(251, 250, 246, .92); --ico-acc: #FFC37A; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.mt__ico svg { width: 3.6rem; height: 3.6rem; }
.mt__lieux { display: flex; gap: .35rem; flex-wrap: wrap; }
.mt__lieux button { border: 0; border-radius: 999px; padding: .5rem .8rem; background: rgba(251, 250, 246, .08); color: rgba(251, 250, 246, .8); font: 500 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.mt__lieux button:hover { background: rgba(251, 250, 246, .16); }
.mt__lieux button[aria-selected="true"] { background: var(--fr-pearl); color: var(--fr-night); }
.mt__data { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: 16px; overflow: hidden; background: rgba(110, 198, 242, .14); }
.mt__data > div { padding: .75rem .85rem; background: rgba(8, 32, 61, .92); display: grid; gap: .15rem; }
.mt__data dt { font: 500 .54rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-sky); }
.mt__data dd { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; line-height: 1.05; }
.mt__data dd small { font-family: var(--f-body, inherit); font-size: .7rem; color: rgba(251, 250, 246, .6); }
.mt__data span { font-size: .7rem; color: rgba(251, 250, 246, .55); }
.mt__days { border: 0; padding: 0; gap: .4rem; --ico-acc: #FFC37A; }
.mt__days li { padding: .7rem .3rem .65rem; border-radius: 14px; background: rgba(251, 250, 246, .05); color: rgba(251, 250, 246, .72); gap: .3rem; }
.mt__days li + li { border-left: 0; }
.mt__days li > span { font: 500 .56rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.mt__days b { color: var(--fr-pearl); font-family: var(--f-display); font-weight: 450; font-size: 1.05rem; }
.mt__days b small { color: rgba(251, 250, 246, .5); font-weight: 400; font-size: .8em; }
.mt__days em { font: 500 .56rem/1 var(--f-mono); font-style: normal; color: var(--fr-sky); display: grid; gap: .3rem; justify-items: center; }
.mt__days em i { display: block; width: 2.6rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--fr-sky) var(--p), rgba(251, 250, 246, .12) var(--p)); }
.mt__tip { border-radius: 18px; background: linear-gradient(135deg, rgba(224, 99, 63, .16), rgba(46, 196, 182, .08)); box-shadow: inset 0 0 0 1px rgba(251, 250, 246, .1); }
.mt__tip .kicker { margin: 0; --k: var(--fr-rose-soft, #F9D3C4); font-size: .58rem; }
.mt__tip b { font-family: var(--f-display); font-weight: 450; font-size: 1.2rem; line-height: 1.15; }
.mt__tip p { font-size: .86rem; color: rgba(251, 250, 246, .8); }
.mt__src { font: 400 .52rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 250, 246, .4); }
.fab-panel--meteo .chat__x { color: var(--fr-pearl); border: 0; background: rgba(251, 250, 246, .1); }
.fab-panel--meteo .body-t { color: rgba(251, 250, 246, .82); }
.fab-panel--meteo .tel { color: var(--fr-turq); }
@media (prefers-reduced-motion: reduce) { .mt__sky i, .mt__sky { animation: none !important; } }
.chat__head { background: var(--fr-night); color: var(--fr-pearl); }
.chat__head img { width: 2.6rem; height: 2.6rem; border-radius: 10px; }
.chat__head b { font-family: var(--f-display); font-weight: 450; font-size: 1.1rem; }
.chat__head span { font: 500 .56rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-sky); }
.chat__head .chat__x { color: var(--fr-pearl); border: 0; }
.msg { border-radius: 18px; }
.msg--bot { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 37, 69, .08); border-bottom-left-radius: 6px; }
.msg--bot a { color: var(--fr-lagoon); }
.msg--me { background: var(--fr-night); color: var(--fr-pearl); border-bottom-right-radius: 6px; }
.msg--typing i { background: var(--fr-lagoon); }
.chat__chips button { border-radius: 999px; border: 1px solid rgba(11, 37, 69, .2); color: var(--fr-ink); }
.chat__chips button:hover { background: var(--fr-turq); border-color: var(--fr-turq); }
.chat__in { border-top: 1px solid var(--line-l); }
.chat__in input { border-radius: 999px; border: 1px solid rgba(11, 37, 69, .16); background: #fff; }
.chat__in button { border-radius: 50%; background: var(--fr-red); color: #fff; }

/* ---------- petits écrans ---------- */
@media (max-width: 1180px) {
  .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: 1fr 1fr 1fr; }
  .foot__id { grid-column: 1 / -1; }
  .cq-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .bar__links .opt { display: none; }
}
@media (max-width: 860px) {
  .bar { gap: .8rem; }
  .bar__links { display: none; }
  .brand__logo { width: 2.6rem; height: 2.6rem; }
  .brand__w b { font-size: 1.05rem; }
  .brand__w small { font-size: .46rem; letter-spacing: .14em; }
  .bar .btn--s { --h: 2.5rem; padding: 0 1rem; font-size: .62rem; letter-spacing: .1em; }
  .floor__raw { left: .8rem; bottom: .8rem; padding: .65rem .85rem; font-size: .58rem; }
  .floor__ill { right: .8rem; top: .8rem; }
  .menu-btn span { display: none; }
  .menu__in { padding-top: calc(var(--bar) + 1.5rem); align-content: start; overflow-y: auto; }
  .menu__cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .sec-head, .iao__grid, .signs__grid, .presta__grid, .faq__grid, .ask__grid, .archi__grid, .a-iles__grid, .v-local__grid, .ent-hero__grid, .atelier__grid, .carnet__grid, .finale__in, .promesses__grid, .floor { grid-template-columns: minmax(0, 1fr); }
  .vals, .seals { grid-template-columns: 1fr 1fr; }
  .seals div:nth-child(3) { border-left: 0; padding-left: 0; }
  .method__grid, .expo__grid, .related__grid { grid-template-columns: minmax(0, 1fr); }
  .v-near, .contact-cards, .coords { grid-template-columns: 1fr 1fr; }
  .mgroup__h { grid-template-columns: auto 1fr; }
  .mgroup__h p { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .mcards { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: .6rem var(--gutter) 1.6rem; scrollbar-width: none; }
  .mcards::-webkit-scrollbar { display: none; }
  .mcards .mcard { flex: 0 0 min(72vw, 19rem); scroll-snap-align: start; }
  .iao__seal { max-width: 22rem; margin: 1rem auto 0; }
  .s-hero__n { top: auto; bottom: calc(var(--sw-h) + 1rem); transform: none; font-size: 9rem; opacity: .5; }
  .s-hero__meta, .a-hero__ill { top: calc(var(--bar) + .8rem); }
  .i-hero__meta { top: calc(var(--bar) + .8rem); flex-wrap: wrap; justify-content: flex-end; }
  .iles { grid-template-columns: 1fr; }
  .cm-lbl { font-size: 19px; } .cm-lbl--s { font-size: 14px; } .cm-lbl--me { font-size: 24px; } .cm-deg { font-size: 15px; } .cm-alab { font-size: 17px; }
  .cq-cards { grid-template-columns: repeat(2, 1fr); }
  .cq-row { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .faq__list details p { padding-right: 0; }
  .finale__in > div:first-child { order: 0; }
}
@media (max-width: 759px) {
  .craft { height: 520vh; }
  .hero-copy { bottom: 1.4rem; }
  .hero-copy .lede { font-size: .98rem; margin-top: 1rem; }
  .hero-copy .hero-ctas { margin-top: 1.4rem; }
  .hero-copy .hero-ctas .btn, .s-hero .hero-ctas .btn, .a-hero .hero-ctas .btn, .i-hero .hero-ctas .btn { flex: 1 1 100%; justify-content: space-between; }
  .hero-copy .hero-ctas .btn:not(:has(.btn__ico)), .s-hero .hero-ctas .btn:not(:has(.btn__ico)), .a-hero .hero-ctas .btn:not(:has(.btn__ico)), .i-hero .hero-ctas .btn:not(:has(.btn__ico)) { justify-content: center; }
  .scroll-cue { margin-top: 1.1rem; }
  .releve, .rail { display: none; }
  .phase { bottom: 1rem; padding: 1.1rem 1.2rem 1.2rem; gap: .9rem; border-radius: 20px; }
  .phase .wnum { --s: 2.6rem; }
  .phase p { font-size: .9rem; margin-top: .5rem; }
  .craft__tag { top: calc(var(--bar) + .6rem); bottom: auto; right: var(--gutter); }
  .craft__end h2 span { font-size: .5em; }
  .brush { height: 220vh; }
  .brush__copy { top: auto; bottom: 6.2rem; transform: none; }
  .brush__ill { bottom: auto; top: calc(var(--bar) + 3.6rem); }
  .brush__shade { background: linear-gradient(0deg, rgba(7, 26, 51, .85) 0%, rgba(7, 26, 51, .2) 50%, rgba(7, 26, 51, 0) 70%); }
  .vals { grid-template-columns: 1fr; }
  .seals { grid-template-columns: 1fr 1fr; }
  .v-near, .contact-cards, .coords { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__big { font-size: 22vw; }
  .floor-pin__bub { width: 12.5rem; }
  .floor-pin--c .floor-pin__bub { left: -6.25rem; }
  .ba-bub { width: min(13rem, 70vw); }
  .signs__list li { padding: 1.1rem 1.1rem; gap: .9rem; }
  .wizard, .carnet__panel { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .swell__l, .reflets i, .wnum i, .seal-ring, .iao__ring, .loader__logo, .cm-ring, .s-hero .still img, .scroll-cue i::after { animation: none !important; }
  .cm-route { transition: none; stroke-dashoffset: 0; }
  .pf { transition: none; }
}

/* fiche technique : fixation de tôle ondulée (schéma éclaté) */
.fiche__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.fiche__head { grid-column: 1; }
.fiche__sub { margin-top: 1.2rem; color: var(--fr-soft); max-width: 28rem; }
.fiche__fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: clamp(1.2rem, 2.6vw, 2.4rem); border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -50px rgba(11, 37, 69, .45), inset 0 0 0 1px rgba(11, 37, 69, .06); }
.fiche__svg { display: block; width: 100%; height: auto; }
.fiche__fig figcaption { margin-top: 1rem; font: 500 .62rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-soft); }
.fiche__lbl text { font: 400 15px/1 var(--f-text); fill: var(--fr-soft); }
.fiche__lbl .b { font-weight: 600; font-size: 18px; fill: var(--fr-night); }
.fiche__dim { font: 500 17px/1 var(--f-mono); fill: var(--fr-night); }
.fiche__mat { font: 600 18px/1 var(--f-text); fill: var(--fr-lagoon); }
.fiche__mat--s { font-weight: 400; }
.fiche__pose { grid-column: 1; }
.fiche__pose h3 { font-family: var(--f-display); font-weight: 450; font-size: 1.5rem; margin: 0 0 1rem; }
.fiche__pose ol { margin: 0; padding: 0; list-style: none; counter-reset: fp; display: grid; gap: .9rem; }
.fiche__pose li { counter-increment: fp; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; color: var(--fr-soft); font-size: .95rem; }
.fiche__pose li::before { content: counter(fp, decimal-leading-zero); font: 500 .78rem/1.6 var(--f-mono); color: var(--fr-red); }
.fiche__pose strong { color: var(--fr-night); font-weight: 600; }
@media (max-width: 899px) {
  .fiche__in { grid-template-columns: 1fr; }
  .fiche__head, .fiche__fig, .fiche__pose { grid-column: 1; grid-row: auto; }
  .fiche__fig { padding: 1rem .8rem; }
  .fiche__lbl text { font-size: 21px; } .fiche__lbl .b { font-size: 24px; } .fiche__dim { font-size: 21px; } .fiche__mat { font-size: 21px; }
}