/* ==========================================================================
   G2FIX — thème sur mesure
   Conception : Pacifique Marketing
   ========================================================================== */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face { font-family: "Archivo"; src: url(../fonts/archivo-latin-standard-normal.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url(../fonts/archivo-latin-ext-standard-normal.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetons ---------- */
:root {
	--red: #E0251C;
	--red-d: #A71818;
	--red-dd: #8f1414;
	--black: #000;
	--ink: #141414;
	--gray: #464646;
	--dark: #292929;
	--foot: #1E1E1E;
	--cream: #F4F4F1;
	--paper: #F4F4F4;
	--white: #fff;
	--muted: #6a6a66;
	--line: rgba(0, 0, 0, .14);
	--line-w: rgba(255, 255, 255, .18);

	--f-display: "Archivo", "Arial Black", Arial, sans-serif;
	--f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--f-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

	--pad: clamp(20px, 4.6vw, 88px);
	--maxw: 1920px;
	--sec: clamp(64px, 7.3vw, 140px);
	--gap: clamp(16px, 2.7vw, 52px);
	--hdr: clamp(76px, 9.1vw, 176px);

	--ease: cubic-bezier(.2, .7, .1, 1);
	--ease-io: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--f-body); font-size: clamp(15px, .95vw, 18px); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.screen-reader-text, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 10000; background: var(--red); color: #fff; padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 1100px; }
.site-main { background: var(--white); }

/* Typographie d'affichage */
.hero__title, .h1, .h2, .h3, .phero__title, .cta-split__title, .red-box__title, .site-footer__h, .fcard__num, .fcard__title, .badge, .nav__list a, .mnav__list a {
	font-family: var(--f-display); font-stretch: 102%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em;
}
.hero__title { font-size: clamp(2.4rem, 4.6vw, 5.6rem); line-height: 1.02; color: #fff; }
.h1 { font-size: clamp(2.3rem, 4.7vw, 5.6rem); line-height: 1; }
.h1--tight { font-size: clamp(2.1rem, 3.6vw, 4.2rem); font-stretch: 100%; font-weight: 900; line-height: 1; }
.h1--xl { font-size: clamp(2.6rem, 5.4vw, 6.4rem); font-stretch: 100%; font-weight: 900; line-height: .98; }
.h1--white, .h2--white { color: #fff; }
.h2 { font-size: clamp(1.9rem, 2.95vw, 3.5rem); line-height: 1.04; }
.h3 { font-size: clamp(1.5rem, 2.1vw, 2.5rem); line-height: 1.08; }
.is-red, .dot { color: var(--red); }
.cta-red .dot, .cta-split .dot, .red-box .dot, .cta-about .dot { color: inherit; }
.cta-about .h1 .dot:last-child { color: inherit; }

.kicker { font-family: var(--f-body); font-size: clamp(11px, .68vw, 13px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--red); margin: 0 0 clamp(14px, 1.4vw, 26px); }
.kicker--white { color: #fff; }
.kicker--dark { color: var(--ink); }
.kicker--line { display: flex; align-items: center; gap: 14px; }
.kicker--line::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.muted { color: var(--muted); }
.lead { font-size: clamp(16px, 1.05vw, 20px); line-height: 1.6; }
.caps-text { text-transform: uppercase; font-size: clamp(12px, .78vw, 15px); line-height: 1.75; letter-spacing: .02em; font-weight: 500; }
.small-note { font-size: 12px; color: var(--muted); margin-top: 18px; }
.empty { padding: 40px 0; color: var(--muted); }

/* ---------- Boutons ---------- */
.btn { --bg: var(--red); --fg: #fff; --bd: var(--red); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: clamp(52px, 4.4vw, 84px); padding: 0 clamp(24px, 2.6vw, 52px); background: var(--bg); color: var(--fg); border: 2px solid var(--bd); border-radius: 0; font-family: var(--f-body); font-weight: 500; font-size: clamp(14px, .92vw, 18px); line-height: 1; letter-spacing: .005em; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease); white-space: nowrap; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hov, #000); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn__label { position: relative; display: inline-block; overflow: hidden; }
.btn__label > span { display: inline-block; transition: transform .5s var(--ease); }
.btn__label::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; transform: translateY(110%); transition: transform .5s var(--ease); }
.btn:hover .btn__label > span, .btn:focus-visible .btn__label > span { transform: translateY(-110%); }
.btn:hover .btn__label::after, .btn:focus-visible .btn__label::after { transform: translateY(0); }
.btn .ico { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translateX(5px); }
.btn--red { --hov: var(--red-dd); }
.btn--black { --bg: #000; --bd: #000; --hov: var(--red-dd); }
.btn--outline-white { --bg: transparent; --bd: #fff; --hov: #fff; }
.btn--outline-white:hover { color: #000; }
.btn--outline { --bg: transparent; --fg: #000; --bd: #000; --hov: #000; min-height: 48px; font-weight: 800; font-size: 13px; text-transform: uppercase; }
.btn--outline:hover { color: #fff; }
.btn--sm { min-height: clamp(42px, 3.7vw, 72px); padding: 0 clamp(18px, 1.8vw, 34px); font-weight: 800; text-transform: uppercase; font-size: clamp(12px, .75vw, 15px); font-family: var(--f-display); font-stretch: 105%; }
.btn--arrow { justify-content: space-between; font-family: var(--f-body); font-weight: 800; text-transform: uppercase; font-size: 13px; min-height: 64px; min-width: 300px; }
.btn--wide { min-width: min(100%, 370px); }
.btn--block { width: 100%; }

.ulink { display: inline-block; font-weight: 800; text-transform: uppercase; font-size: clamp(12px, .72vw, 14px); letter-spacing: .02em; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.ulink:hover { background-size: 0 2px; background-position: 100% 100%; color: var(--red); }
.ulink .btn__label > span { transform: none !important; }
.ulink .btn__label::after { display: none; }
.ulink .ico { display: inline-block; width: 18px; vertical-align: middle; margin-left: 8px; }
.ulink--white { color: #fff; }
.line-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); font-weight: 800; font-size: 13px; text-transform: uppercase; }
.line-link .btn__label::after { display: none; }
.line-link .btn__label > span { transform: none !important; }
.line-link .ico { width: 24px; transition: transform .4s var(--ease); }
.line-link:hover .ico { transform: translateX(6px); }
.line-link:hover { color: var(--red); }
.line-link--short { max-width: 420px; border-top: 0; border-bottom: 1px solid #000; padding: 14px 0; }
.line-link--white { color: #fff; border-color: rgba(255, 255, 255, .7); border-top: 0; border-bottom: 1px solid; max-width: 460px; }
.line-link--white:hover { color: #fff; }
.mini-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: #fff; }
.mini-link--dark { color: #000; text-transform: none; }
.mini-link--dark:hover { color: var(--red); }
.mini-link--arrow { display: inline-flex; align-items: center; gap: 30px; text-transform: uppercase; font-size: 12px; }
.mini-link--arrow .ico { width: 24px; }

.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.pill--dark { background: #000; color: #fff; }
.pill--red { background: var(--red); color: #fff; text-transform: uppercase; font-weight: 800; }
.pill--white { background: #fff; color: #000; text-transform: uppercase; font-weight: 800; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills--tags { margin-top: 26px; gap: 8px; }
.pills--tags .pill { font-size: 11px; font-weight: 800; text-transform: uppercase; min-height: 24px; padding: 4px 20px; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 900; background: #000; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .22); transition: transform .5s var(--ease); }
.site-header.is-hidden { transform: translateY(-101%); }
.site-header__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 60px); height: var(--hdr); }
.brand { flex: 0 0 auto; display: block; width: clamp(110px, 10.9vw, 210px); color: #fff; }
.brand svg, .brand__img { width: 100%; height: auto; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav__list { display: flex; gap: clamp(20px, 4.6vw, 104px); }
.nav__list a { position: relative; display: block; font-size: clamp(12px, .78vw, 15px); font-stretch: 108%; padding: 8px 0; color: #fff; transition: color .3s; }
.nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__list .current-menu-item > a, .nav__list .current_page_item > a { color: var(--red); }
.site-header__cta { min-width: clamp(140px, 13.2vw, 254px); }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; background: none; border: 0; position: relative; }
.burger span:not(.screen-reader-text) { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 28px; }
.menu-open .burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 890; background: #000; color: #fff; padding-top: var(--hdr); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; }
.menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-io); }
.mnav__inner { display: flex; flex-direction: column; gap: 30px; padding-top: 30px; padding-bottom: 40px; height: 100%; overflow: auto; }
.mnav__list { display: flex; flex-direction: column; border-top: 1px solid var(--line-w); }
.mnav__list a { display: block; font-size: clamp(28px, 8vw, 48px); padding: 14px 0; border-bottom: 1px solid var(--line-w); }
.mnav__list .current-menu-item a { color: var(--red); }
.mnav__foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.menu-open { overflow: hidden; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--foot); color: #fff; padding: clamp(50px, 4.2vw, 80px) 0 clamp(26px, 2.6vw, 50px); }
.site-footer__top { display: grid; grid-template-columns: minmax(150px, 1.35fr) 0.85fr 1.25fr 2.4fr auto; gap: clamp(24px, 2.6vw, 50px); align-items: start; }
.site-footer__brand { display: block; width: clamp(130px, 10.9vw, 210px); color: #fff; }
.site-footer__h { font-size: clamp(14px, 1vw, 20px); color: var(--red); margin-bottom: 18px; font-stretch: 105%; }
.site-footer__menu { display: flex; flex-direction: column; gap: 16px; }
.site-footer__menu a, .site-footer__about p { font-size: clamp(11px, .72vw, 14px); text-transform: uppercase; font-weight: 500; letter-spacing: .02em; }
.site-footer__menu a:hover { color: var(--red); }
.site-footer__about p { max-width: 470px; line-height: 1.5; }
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.site-footer__contact a:hover { color: var(--red); }
.socials { display: flex; gap: 10px; justify-content: flex-end; }
.socials a { display: grid; place-items: center; width: clamp(34px, 2.3vw, 44px); height: clamp(34px, 2.3vw, 44px); border-radius: 50%; background: var(--red); color: #000; transition: background .3s, color .3s, transform .4s var(--ease); }
.socials a:hover { background: #fff; transform: translateY(-3px); }
.socials .ico { width: 58%; height: 58%; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(50px, 6vw, 110px); }
.site-footer__bottom p { margin: 0; font-size: clamp(11px, .7vw, 13px); text-transform: uppercase; letter-spacing: .02em; }
.credit { display: block; width: clamp(110px, 7.6vw, 146px); color: #fff; opacity: .9; transition: opacity .3s; }
.credit:hover { opacity: 1; }
.credit svg { width: 100%; height: auto; }

/* ---------- Sections ---------- */
.sec { position: relative; padding-block: var(--sec); }
.sec--black { background: #000; color: #fff; }
.sec--cream { background: var(--cream); }
.sec--white { background: #fff; }
.sec--dark { background: var(--dark); color: #fff; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(30px, 2.8vw, 54px); }
.sec__head--tight { align-items: flex-start; margin-bottom: clamp(24px, 2vw, 40px); }
.sec__sub { margin: 8px 0 0; font-size: clamp(13px, .8vw, 16px); color: #333; }
.sec__side { font-size: 12px; text-transform: uppercase; color: #444; letter-spacing: .02em; margin-top: 18px; }

/* Crochets rouges (signature du logo) */
.bracket { position: absolute; z-index: 2; width: clamp(60px, 6.3vw, 120px); height: clamp(48px, 5vw, 96px); pointer-events: none; }
.bracket::before, .bracket::after { content: ""; position: absolute; background: var(--red); }
.bracket--tr { top: 0; right: 0; }
.bracket--tr::before { top: 0; right: 0; width: 100%; height: clamp(12px, 1.2vw, 23px); }
.bracket--tr::after { top: 0; right: 0; width: clamp(12px, 1.2vw, 23px); height: 100%; }
.bracket--bl { bottom: 0; left: 0; }
.bracket--bl::before { bottom: 0; left: 0; width: 100%; height: clamp(12px, 1.2vw, 23px); }
.bracket--bl::after { bottom: 0; left: 0; width: clamp(12px, 1.2vw, 23px); height: 100%; }
.bracket--lg { width: clamp(70px, 6vw, 118px); height: clamp(56px, 4.9vw, 94px); }
.bracket--lg::before { height: clamp(14px, 1.2vw, 24px) !important; }
.bracket--lg::after { width: clamp(14px, 1.2vw, 24px) !important; }
.bracket--sm { width: 60px; height: 48px; }

/* Cadre photo avec effets HUD */
.frame { position: relative; overflow: hidden; background: #111; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(224, 37, 28, .9), transparent); box-shadow: 0 0 18px rgba(224, 37, 28, .8); opacity: 0; pointer-events: none; }
.frame__target { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.frame__target i { position: absolute; background: rgba(255, 255, 255, .55); }
.frame__target i:first-child { left: 50%; top: 0; bottom: 0; width: 1px; }
.frame__target i:last-child { top: 50%; left: 0; right: 0; height: 1px; }
.frame:hover .frame__target { opacity: 1; }

/* ---------- HUD ---------- */
[data-hud] { position: relative; }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 1; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.hud__line { position: absolute; white-space: nowrap; }
.hud__line--l { left: var(--pad); top: 14px; }
.hud__line--r { right: var(--pad); top: 14px; }
.hud__line--b { left: 50%; bottom: 14px; transform: translateX(-50%); }
.hud__line--b b { color: var(--red); font-weight: 400; }
.hud-corner { position: absolute; width: 22px; height: 22px; border-color: var(--red); border-style: solid; border-width: 0; }
.hud-corner--tl { top: 24px; left: 24px; border-top-width: 2px; border-left-width: 2px; }
.hud-corner--tr { top: 24px; right: 24px; border-top-width: 2px; border-right-width: 2px; }
.hud-corner--bl { bottom: 24px; left: 24px; border-bottom-width: 2px; border-left-width: 2px; }
.hud-corner--br { bottom: 24px; right: 24px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Héros accueil ---------- */
.hero { background: #000; color: #fff; padding: clamp(40px, 5vw, 96px) 0 clamp(30px, 1.8vw, 34px); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--gap); align-items: center; }
.hero__copy { max-width: 900px; padding-block: 20px; }
.hero__text { margin: clamp(18px, 1.8vw, 34px) 0 clamp(28px, 3.1vw, 60px); font-size: clamp(16px, 1.32vw, 25px); line-height: 1.45; max-width: 640px; letter-spacing: .01em; }
.hero__btns { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 26px); }
.hero__btns .btn { min-width: clamp(240px, 19.4vw, 372px); }
.hero__visual { position: relative; justify-self: end; width: min(100%, 880px); aspect-ratio: 880 / 870; }
.hero__visual .bracket--tr { width: 26.5%; height: 21.5%; }
.hero__visual .bracket--tr::before { height: 23%; }
.hero__visual .bracket--tr::after { width: 23%; }
.hero__visual .bracket--bl { width: 26.5%; height: 21.5%; }
.hero__visual .bracket--bl::before { height: 23%; }
.hero__visual .bracket--bl::after { width: 23%; }
.hero__media { position: absolute; left: 10%; top: 10.8%; width: 76.3%; height: 75.5%; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 32px); margin-top: clamp(40px, 4.6vw, 88px); position: relative; z-index: 2; }
.badge { display: flex; align-items: center; justify-content: center; text-align: center; min-height: clamp(48px, 4.7vw, 92px); padding: 8px 18px; border: 2px solid #fff; border-radius: 999px; font-size: clamp(11px, .9vw, 17px); font-stretch: 105%; transition: background .4s var(--ease), color .4s var(--ease); }
.badge:hover { background: #fff; color: #000; }

/* ---------- Produit ---------- */
.product .h1 { margin-bottom: clamp(30px, 4vw, 76px); }
.product .ulink { margin-bottom: clamp(40px, 4.4vw, 84px); }
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.7vw, 52px); }
.fcard { position: relative; min-height: clamp(300px, 22vw, 425px); padding: clamp(28px, 3.6vw, 70px) clamp(24px, 3.6vw, 70px); color: #fff; overflow: hidden; transition: transform .6s var(--ease); }
.fcard--1 { background: var(--ink); }
.fcard--2 { background: var(--gray); }
.fcard--3 { background: var(--red-d); }
.fcard:hover { transform: translateY(-8px); }
.fcard__num { display: block; font-size: clamp(48px, 4.3vw, 82px); line-height: .9; color: var(--red); font-stretch: 112%; }
.fcard__title { font-size: clamp(20px, 1.85vw, 36px); margin: 6px 0 clamp(20px, 2.6vw, 50px); }
.fcard__text { text-transform: uppercase; font-size: clamp(12px, .85vw, 16px); line-height: 1.85; letter-spacing: .03em; font-weight: 500; max-width: 420px; }
.fcard__corner { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent var(--red) transparent; transition: border-width .5s var(--ease); }
.fcard:hover .fcard__corner { border-width: 0 0 46px 46px; }
.fcard--3 .fcard__corner { border-bottom-color: #fff; }

/* ---------- Installation ---------- */
.install { padding-top: clamp(40px, 2.6vw, 50px); }
.install__inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap); align-items: center; }
.install__visual { position: relative; padding: 0 0 clamp(40px, 4.6vw, 88px) 0; max-width: 790px; }
.install__visual .bracket--bl { left: 0; bottom: 0; width: 15%; height: 24%; }
.install__visual .bracket--bl::before { height: 25% !important; }
.install__visual .bracket--bl::after { width: 21% !important; }
.install__media { margin-left: 5.7%; aspect-ratio: 1; background: #fff; }
.install__media img, .install__media video { object-fit: cover; }
.install__readout { position: absolute; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.install__readout b { font-family: var(--f-display); font-size: 34px; color: var(--red); letter-spacing: 0; }
.steps { display: flex; flex-direction: column; gap: clamp(22px, 2.2vw, 42px); max-width: 720px; }
.step { position: relative; display: grid; grid-template-columns: clamp(36px, 3.4vw, 66px) 1fr; padding-bottom: 14px; opacity: .38; transition: opacity .5s var(--ease); }
.step.is-active { opacity: 1; }
.step__num { font-family: var(--f-display); font-stretch: 110%; font-weight: 800; color: var(--red); font-size: clamp(13px, 1vw, 20px); line-height: 1.5; }
.step__title { font-family: var(--f-display); font-stretch: 108%; text-transform: uppercase; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.2; }
.step__text { text-transform: uppercase; font-size: clamp(11px, .72vw, 14px); letter-spacing: .03em; margin-top: 6px; font-weight: 500; }
.step__bar { position: absolute; left: clamp(36px, 3.4vw, 66px); right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .12); }
.step__bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* ---------- Projets réalisés (accueil) ---------- */
.projects-home { padding-top: clamp(30px, 2vw, 40px); overflow: hidden; }
.slider-ctrl { display: flex; align-items: center; gap: 16px; }
.slider-ctrl__count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .55); margin-right: 10px; }
.slider-ctrl__count b { color: #fff; font-weight: 400; }
.slider-ctrl__btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: transparent; color: #fff; transition: background .3s, color .3s; }
.slider-ctrl__btn:hover { background: var(--red); }
.slider-ctrl__btn .ico { width: 30px; height: 30px; }
.slider-ctrl__btn[data-prev] { opacity: .5; }
.hslider { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); cursor: grab; }
.hslider::-webkit-scrollbar { display: none; }
.hslider.is-drag { cursor: grabbing; scroll-snap-type: none; }
.hslider__track { display: flex; gap: clamp(14px, 1.4vw, 52px); padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); width: max-content; }
.hcard { flex: 0 0 auto; width: clamp(270px, 31.5vw, 604px); scroll-snap-align: start; color: #fff; }
.hcard__media { position: relative; display: block; aspect-ratio: 604 / 512; background: #2A2A2A; overflow: hidden; }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: grayscale(.25); }
.hcard:hover .hcard__media img { transform: scale(1.06); filter: none; }
.hcard__cap { display: block; margin-top: 16px; font-size: clamp(11px, .72vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.projects-home__foot { margin-top: clamp(30px, 3vw, 56px); }
.ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; background: #2A2A2A; color: #000; }
.ph .ico { width: clamp(50px, 3.8vw, 72px); height: auto; }
.sec--white .ph, .pcard .ph { background: #D9D9D9; color: #fff; }

/* ---------- Dépositaires (accueil) ---------- */
.dealers-home__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.dealers-home .h1 { font-size: clamp(2.1rem, 4.2vw, 5rem); }
.dealers-home .caps-text { margin: clamp(10px, 1vw, 18px) 0 clamp(28px, 2.8vw, 54px); max-width: 920px; }
.plus-list { display: flex; flex-direction: column; gap: clamp(10px, .9vw, 16px); margin-bottom: clamp(40px, 4.4vw, 84px); }
.plus-list li { font-size: clamp(12px, .78vw, 15px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.plus-list li::before { content: "+ "; }
.dealers-home__visual { position: relative; background: #D9D9D9; aspect-ratio: 822 / 578; overflow: hidden; }
.dealers-home__img { width: 100%; height: 100%; object-fit: cover; }
.dealers-home__visual .qmap { position: absolute; inset: 0; border: 0; padding: 0; }
.dealers-home__visual .qmap__stage { height: 100%; aspect-ratio: auto; }
.tags { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.1vw, 22px); padding: clamp(10px, .9vw, 18px); z-index: 3; }
.tag { display: flex; align-items: center; justify-content: center; min-height: clamp(38px, 3.1vw, 60px); padding: 6px 10px; background: var(--red); color: #fff; font-size: clamp(10px, .62vw, 12px); font-weight: 800; text-align: center; transition: background .3s; }
a.tag:hover { background: #000; }

/* ---------- Histoire ---------- */
.story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.story .h1 { font-size: clamp(2.1rem, 4.2vw, 5rem); }
.story__text { padding-top: clamp(10px, 2.4vw, 44px); text-transform: uppercase; font-size: clamp(12px, .78vw, 15px); line-height: 1.75; letter-spacing: .02em; font-weight: 500; max-width: 900px; }
.story__text .ulink { margin-top: 24px; }

/* ---------- Nouvelles ---------- */
.news .sec__head { align-items: flex-end; }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.nitem { display: block; }
.nitem__line { display: block; width: min(100%, 432px); height: 2px; background: var(--red); margin-bottom: 22px; transform-origin: left; transition: transform .6s var(--ease); }
.nitem:hover .nitem__line { transform: scaleX(1.12); }
.nitem__cat { display: block; font-size: clamp(11px, .7vw, 13px); text-transform: uppercase; color: #555; margin-bottom: 10px; }
.nitem__title { display: block; font-weight: 800; text-transform: uppercase; font-size: clamp(13px, .82vw, 16px); line-height: 1.55; max-width: 440px; transition: color .3s; }
.nitem:hover .nitem__title { color: var(--red); }

/* ---------- Formulaires ---------- */
.quick__inner { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--gap); }
.quick__text { margin-top: clamp(26px, 2.8vw, 54px); text-transform: uppercase; font-size: clamp(11px, .72vw, 14px); line-height: 2; letter-spacing: .02em; font-weight: 500; }
.quick__text a:hover { color: var(--red); }
.qform { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.2vw, 24px) clamp(16px, 1.8vw, 36px); align-content: start; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld--center { align-items: center; margin-top: 10px; }
.fld label, .fld__label { font-size: clamp(11px, .7vw, 14px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #1E1E1E; border: 1px solid #555; color: #fff; font: inherit; font-size: 15px; border-radius: 0; transition: border-color .3s, box-shadow .3s; appearance: none; }
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.sel { position: relative; }
.sel .ico { position: absolute; right: 14px; top: 50%; width: 18px; transform: translateY(-50%); pointer-events: none; }
.sel select { padding-right: 44px; }
.fld--light label, .fld--light .fld__label { text-transform: none; font-weight: 700; font-size: 13px; }
.fld--light em, .fld__label em { font-style: normal; font-weight: 700; }
.fld--light input, .fld--light select, .fld--light textarea { background: #fff; color: #111; border: 1px solid #cfcfcb; }
.fld--light input::placeholder, .fld--light textarea::placeholder { color: #8a8a86; }
.fld__hint { font-size: 12px; color: #6a6a66; margin: 4px 0 0; }
.fnotice { grid-column: 1 / -1; display: none; padding: 14px 18px; font-weight: 600; font-size: 14px; }
.fnotice.is-ok { display: block; background: #e7f4ea; color: #145a26; border-left: 4px solid #1f8a3a; }
.fnotice.is-err { display: block; background: #fdecea; color: #8f1414; border-left: 4px solid var(--red); }
.is-sending { pointer-events: none; opacity: .65; }
.inp-ico { position: relative; }
.inp-ico .ico { position: absolute; left: 16px; top: 50%; width: 18px; transform: translateY(-50%); color: #111; }
.inp-ico input { padding-left: 46px; }

/* ---------- En-tête des pages intérieures ---------- */
.phero { background: #000; color: #fff; padding: clamp(24px, 2.4vw, 46px) 0 clamp(50px, 4.6vw, 88px); overflow: hidden; }
.phero__inner { position: relative; z-index: 2; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: clamp(14px, 1.2vw, 22px); }
.crumbs li { font-size: clamp(10px, .6vw, 12px); text-transform: uppercase; color: rgba(255, 255, 255, .85); letter-spacing: .02em; }
.crumbs li + li::before { content: "/ "; }
.crumbs a:hover { color: var(--red); }
.phero__title { font-size: clamp(2.3rem, 4.5vw, 5.5rem); font-stretch: 100%; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.phero__title--xl { font-size: clamp(2.6rem, 4.9vw, 5.9rem); font-stretch: 112%; font-weight: 800; }
.phero__title--plain { text-transform: none; font-weight: 800; font-size: clamp(2rem, 3.4vw, 4.2rem); line-height: 1.12; letter-spacing: -.01em; }
.phero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(20px, 2.2vw, 42px); }
.phero__row--bottom { align-items: flex-end; }
.phero__text { max-width: 1110px; font-size: clamp(16px, 1.2vw, 23px); line-height: 1.45; }
.phero__side { flex: 0 0 auto; min-width: 180px; font-size: clamp(10px, .62vw, 12px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.6; margin-right: clamp(0px, 4vw, 80px); }
.phero__tick { display: block; width: 36px; height: 3px; background: var(--red); margin-bottom: 18px; }
.phero__tagline { font-family: var(--f-display); font-stretch: 105%; font-weight: 800; text-transform: uppercase; font-size: clamp(14px, 1.3vw, 25px); margin: 0; }
.phero--projects { padding-top: clamp(50px, 4.4vw, 84px); padding-bottom: clamp(60px, 4.4vw, 84px); min-height: clamp(380px, 22vw, 420px); }
.phero--projects .phero__text { max-width: 680px; margin-bottom: clamp(30px, 2.8vw, 54px); }
.phero--projects.has-bg { min-height: clamp(460px, 34vw, 640px); }
.phero__bg { position: absolute; inset: -10% 0 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.phero--article .phero__text { max-width: 1170px; }
.back { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 clamp(18px, 1.6vw, 30px); font-size: clamp(11px, .7vw, 13px); font-weight: 800; text-transform: uppercase; }
.back .ico { width: 26px; transition: transform .4s var(--ease); }
.back:hover .ico { transform: translateX(-6px); }
.back:hover { color: var(--red); }

/* ---------- Liste des projets ---------- */
.plist .h2 { font-size: clamp(1.9rem, 2.9vw, 3.4rem); }
.dsel { position: relative; display: inline-flex; align-items: center; background: #000; color: #fff; min-width: 290px; }
.dsel select { appearance: none; width: 100%; background: transparent; color: #fff; border: 0; padding: 14px 44px 14px 18px; font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.dsel select option { color: #000; }
.dsel .ico { position: absolute; right: 14px; width: 16px; pointer-events: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: clamp(26px, 2.2vw, 40px); }
.filter { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1.5px solid #000; font-size: clamp(11px, .65vw, 13px); font-weight: 800; text-transform: uppercase; transition: background .3s, color .3s; min-width: 120px; }
.filter:hover { background: #000; color: #fff; }
.filter.is-active { background: #000; color: #fff; }
.plist__intro { font-size: 14px; margin-bottom: clamp(26px, 2.4vw, 46px); }
.plist__count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; margin-left: 6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; vertical-align: 1px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 3.4vw, 64px) clamp(16px, 1.6vw, 60px); transition: opacity .4s; }
.pgrid.is-loading { opacity: .3; }
.plist__more { display: flex; justify-content: center; margin-top: clamp(40px, 3.6vw, 70px); }
.plist__more .btn { min-width: 330px; }
.pcard__media { position: relative; display: block; aspect-ratio: 524 / 434; overflow: hidden; background: #D9D9D9; }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__img { transform: scale(1.05); }
.pcard__pill { position: absolute; left: 16px; top: 26px; z-index: 2; min-height: 46px; padding: 0 clamp(18px, 2.4vw, 50px); font-weight: 500; font-size: clamp(11px, .7vw, 13px); }
.pcard__title { font-family: var(--f-display); font-stretch: 105%; font-weight: 800; font-size: clamp(16px, 1.15vw, 22px); line-height: 1.25; margin-top: 16px; }
.pcard__title a:hover { color: var(--red); }
.pcard__meta { font-size: clamp(13px, .85vw, 16px); margin: 4px 0 18px; }
.pcard__link { display: inline-flex; align-items: center; gap: 0; font-size: 12px; font-weight: 800; }
.pcard__link .ico { width: 0; opacity: 0; transition: width .4s var(--ease), opacity .4s, margin .4s; }
.pcard__link:hover { color: var(--red); }
.pcard__link:hover .ico { width: 18px; margin-left: 8px; opacity: 1; }

/* ---------- Bandeaux rouges ---------- */
.cta-split { background: var(--red); color: #fff; padding: clamp(50px, 3.4vw, 66px) 0 clamp(60px, 4.6vw, 90px); }
.cta-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cta-split__col { padding-right: var(--gap); }
.cta-split__col--right { padding-left: clamp(20px, 4.4vw, 86px); padding-right: 0; border-left: 1px solid rgba(255, 255, 255, .35); }
.cta-split__title { font-size: clamp(1.9rem, 2.6vw, 3.1rem); line-height: 1.06; margin-bottom: clamp(16px, 1.6vw, 30px); }
.cta-split__text { font-size: clamp(14px, .9vw, 17px); max-width: 780px; margin-bottom: clamp(24px, 1.8vw, 34px); }
.cta-split .btn { min-width: clamp(220px, 19.4vw, 372px); }
.cta-red { background: var(--red); color: #fff; padding: clamp(50px, 3.8vw, 72px) 0; }
.cta-red__inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-red__text { margin-top: 18px; font-size: clamp(14px, .95vw, 18px); max-width: 860px; }
.cta-red__btns { display: flex; gap: 24px; flex-wrap: wrap; }
.cta-red__btns .btn { min-width: clamp(220px, 19.4vw, 372px); }
.cta-red .h2 { font-size: clamp(1.9rem, 2.4vw, 2.9rem); }

/* ---------- Fiche projet ---------- */
.phero--project { padding-bottom: clamp(50px, 3vw, 58px); }
.project-hero { display: grid; grid-template-columns: 1fr minmax(260px, 560px); gap: var(--gap); }
.project-hero .phero__title { font-size: clamp(2.3rem, 4.4vw, 5.3rem); font-stretch: 110%; font-weight: 800; }
.project-hero__meta { display: flex; justify-content: space-between; gap: 30px; margin-top: clamp(30px, 3.2vw, 62px); max-width: 880px; }
.project-hero__meta .kicker { margin-bottom: 10px; }
.project-hero__where { display: flex; flex-direction: column; align-items: flex-end; text-transform: uppercase; font-weight: 800; font-size: clamp(11px, .68vw, 13px); }
.project-hero__side { padding-top: clamp(30px, 4vw, 80px); }
.project-hero__intro { font-size: clamp(14px, 1vw, 19px); margin-bottom: clamp(30px, 3.4vw, 66px); }
.gallery-sec { padding-top: clamp(26px, 1.8vw, 34px); padding-bottom: 0; }
.gallery-sec .sec__head .pill { min-height: 32px; font-weight: 800; text-transform: uppercase; font-size: 12px; }
.pgallery { display: grid; grid-template-columns: 2.3fr 1fr; grid-auto-rows: clamp(140px, 15.9vw, 306px); gap: clamp(10px, 1.2vw, 24px); }
.pgallery--1 { grid-template-columns: 1fr; grid-auto-rows: clamp(260px, 34vw, 640px); }
.pgallery__item { position: relative; display: block; overflow: hidden; background: #ddd; }
.pgallery__item--main { grid-row: span 2; }
.pgallery--2 .pgallery__item--main { grid-row: span 1; }
.pgallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pgallery__item:hover img { transform: scale(1.04); }
.pgallery__label { position: absolute; left: 14px; top: 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; min-height: 26px; }
.pdesc { padding-top: clamp(40px, 3vw, 56px); }
.pdesc__inner { display: grid; grid-template-columns: 0.9fr 1fr; gap: var(--gap); align-items: start; }
.pdesc .h2 { margin-bottom: 10px; }
.prose { font-size: clamp(15px, 1.02vw, 19px); line-height: 1.55; }
.infobox { background: var(--paper); padding: clamp(24px, 1.6vw, 30px) clamp(24px, 1.6vw, 30px) clamp(40px, 6vw, 120px); min-height: 100%; }
.infobox__title { font-family: var(--f-display); font-stretch: 105%; text-transform: uppercase; font-size: clamp(18px, 1.4vw, 27px); margin-bottom: 18px; }
.infobox dl { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 14px 10px; margin: 0; }
.infobox dt { font-size: 12px; font-weight: 800; text-transform: uppercase; }
.infobox dd { margin: 0; font-size: 14px; }
.cta-box { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: clamp(50px, 3.6vw, 70px); background: #000; color: #fff; padding: clamp(30px, 2.4vw, 46px) clamp(24px, 2.4vw, 46px); }
.cta-box .h3 { margin-bottom: 18px; }
.cta-box p { max-width: 700px; font-size: clamp(13px, .85vw, 16px); }
.cta-box__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-box__btns .mini-link { margin: 0; font-size: 12px; }
.cta-box__btns .mini-link:hover { color: var(--red); }

/* ---------- Dépositaires ---------- */
.finder .h2 { font-size: clamp(1.7rem, 2.3vw, 2.75rem); font-stretch: 100%; font-weight: 900; }
.finder .sec__sub { margin-bottom: clamp(26px, 2.2vw, 42px); }
.finder__form { display: grid; grid-template-columns: 1fr 0.66fr 0.6fr; gap: 14px; align-items: end; margin-bottom: 14px; }
.finder__form .fld label { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.finder__form .fld input, .finder__form .fld select { min-height: 72px; border-color: #222; font-size: 16px; }
.finder__btn { min-height: 72px; min-width: 0; }
.notice-bar { display: flex; justify-content: space-between; gap: 20px; padding: 18px 24px; background: #FDF0EE; border-left: 3px solid var(--red); font-size: 13px; margin-bottom: 14px; }
.notice-bar span { color: #555; font-size: 12px; }
.finder__body { display: grid; grid-template-columns: 1.82fr 1fr; gap: clamp(16px, 1.8vw, 34px); align-items: start; }
.finder__caption { font-size: 11px; color: #555; margin-top: 18px; }
.finder__list .mini-link--dark { font-size: 12px; font-weight: 800; margin-top: 30px; }

.qmap { position: relative; border: 1px solid #ddd; background: #fff; padding: 0; }
.qmap__label { position: absolute; left: 22px; top: 22px; z-index: 3; margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.qmap__north { position: absolute; right: 30px; top: 22px; z-index: 3; display: flex; flex-direction: column; align-items: center; font-size: 10px; font-weight: 800; }
.qmap__north .ico { width: 16px; }
.qmap__stage { position: relative; aspect-ratio: 1000 / 680; overflow: hidden; }
.qmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-land { fill: #F2F2EF; }
.map-grid line { stroke: rgba(0, 0, 0, .035); stroke-width: 1; }
.map-out { fill: #E4E4E0; stroke: #fff; stroke-width: 3; }
.map-border { fill: none; stroke: #fff; stroke-width: 2; }
.map-roads polyline { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.map-water { fill: #C9D6DB; }
.map-water-line { fill: none; stroke: #C9D6DB; stroke-width: 5; stroke-linecap: round; }
.map-links line { stroke: rgba(224, 37, 28, .22); stroke-width: 1.4; stroke-dasharray: 4 5; }
.map-lbl { font-family: var(--f-body); font-size: 12px; fill: #7a7a76; text-anchor: middle; }
.map-lbl--sm { font-size: 11px; letter-spacing: .04em; }
.map-lbl--md { font-size: 16px; letter-spacing: .06em; fill: #8b8b87; }
.map-lbl--xl { font-family: var(--f-display); font-size: 30px; font-weight: 800; fill: #b4b4b0; letter-spacing: .04em; }
.map-river { font-family: var(--f-body); font-size: 13px; fill: #6d8791; font-style: italic; }
.qpin { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; transform: translate(-50%, -50%); }
.qpin__dot { display: grid; place-items: center; width: clamp(24px, 1.9vw, 36px); height: clamp(24px, 1.9vw, 36px); border-radius: 50%; background: var(--red); color: #fff; font-size: clamp(9px, .6vw, 12px); font-weight: 800; box-shadow: 0 0 0 3px #fff; transition: transform .35s var(--ease), box-shadow .35s; position: relative; }
.qpin__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; transform: scale(.6); }
.qpin.is-active .qpin__dot::after { animation: pinpulse 1.8s var(--ease) infinite; }
.qpin.is-active .qpin__dot, .qpin:hover .qpin__dot { transform: scale(1.15); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }
.qpin__name { position: absolute; left: calc(100% + 6px); white-space: nowrap; font-size: clamp(10px, .7vw, 14px); font-weight: 800; color: #111; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.qpin.is-dim { opacity: .25; }
@keyframes pinpulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
.qmap__legend { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 22px; border-top: 1px solid #ddd; font-size: 11px; }
.qmap__legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.qmap--compact .qmap__label, .qmap--compact .qmap__north, .qmap--compact .qmap__legend { display: none; }
.qmap--compact .qpin__name { display: none; }
.qmap--compact .map-land { fill: #D9D9D9; }
.qmap--compact .map-out { fill: #cfcfcb; stroke: #e6e6e3; }

.dlist { border: 1px solid #ddd; }
.dlist__head { margin: 0; background: #000; color: #fff; padding: 16px 22px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ditem { border-top: 1px solid #ddd; }
.ditem:first-of-type { border-top: 0; }
.ditem__head { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 14px; width: 100%; padding: clamp(14px, 1vw, 20px) 22px; background: #fff; border: 0; text-align: left; transition: background .3s; }
.ditem__head:hover { background: #fafaf8; }
.ditem__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.ditem__city { display: block; font-weight: 800; font-size: clamp(15px, 1vw, 19px); }
.ditem__sub { display: block; font-size: 11px; color: #666; }
.ditem__toggle .ico { width: 18px; transition: transform .4s var(--ease); }
.ditem.is-open .ditem__toggle .ico { transform: rotate(45deg); }
.ditem__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.ditem__inner { overflow: hidden; }
.ditem.is-open { background: var(--cream); box-shadow: inset 3px 0 0 var(--red); }
.ditem.is-open .ditem__head { background: transparent; }
.ditem.is-open .ditem__body { grid-template-rows: 1fr; }
.ditem__inner { padding: 0 22px 0 66px; }
.ditem.is-open .ditem__inner { padding-bottom: 20px; }
.ditem__name { font-weight: 800; font-size: 14px; margin: 6px 0 12px; }
.ditem__info { font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 3px; }
.ditem__info a { color: #111; text-decoration: underline; }
.ditem__note { font-size: 11px; color: #555; padding-top: 14px; margin-top: 16px; border-top: 1px solid #d7d7d3; }
.dlist__empty { padding: 20px 22px; font-size: 14px; color: #555; }
.ditem.is-hidden { display: none; }

/* ---------- Conseils ---------- */
.steps-nav { padding-block: clamp(30px, 1.8vw, 36px) clamp(36px, 2.4vw, 46px); }
.steps-nav .kicker { margin-bottom: 18px; }
.stepcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.3vw, 26px); }
.stepcard { display: flex; flex-direction: column; padding: clamp(14px, 1vw, 20px) 22px clamp(18px, 1.2vw, 22px); background: var(--cream); transition: background .35s, color .35s, transform .5s var(--ease); }
.stepcard__num { font-size: 11px; font-weight: 800; color: var(--red); margin-bottom: 14px; }
.stepcard__title { font-weight: 800; font-size: clamp(14px, .95vw, 18px); }
.stepcard__sub { font-size: 12px; color: #666; }
.stepcard:hover, .stepcard.is-active { background: #000; color: #fff; transform: translateY(-4px); }
.stepcard:hover .stepcard__sub, .stepcard.is-active .stepcard__sub { color: #bbb; }
.featured { padding-block: clamp(36px, 2.6vw, 50px); }
.featured__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.featured__inner--wide { grid-template-columns: 0.55fr 1fr; }
.featured .h2 { font-size: clamp(1.8rem, 2.3vw, 2.75rem); font-stretch: 100%; font-weight: 900; }
.featured__text { color: #555; margin: 22px 0 clamp(26px, 2.4vw, 44px); max-width: 820px; }
.featured .btn--arrow { min-width: 0; min-height: 70px; gap: 60px; padding-inline: 24px; }
.checkbox-card { background: #000; color: #fff; padding: clamp(20px, 1.3vw, 26px) clamp(20px, 1.6vw, 32px) clamp(20px, 1.4vw, 28px); border-left: 4px solid var(--red); }
.checkbox-card__title { font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.checkbox-card ul { margin-bottom: 18px; }
.checkbox-card li { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.chk { display: flex; align-items: center; gap: 16px; width: 100%; padding: clamp(14px, 1.1vw, 22px) 0; background: none; border: 0; color: #fff; text-align: left; font-size: clamp(13px, .82vw, 16px); font-weight: 500; }
.chk__box { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--red); transition: background .3s; }
.chk__box::after { content: ""; position: absolute; left: 3px; top: 0; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); }
.chk[aria-pressed="true"] .chk__box { background: var(--red); }
.chk[aria-pressed="true"] .chk__box::after { transform: rotate(45deg) scale(1); }
.chk[aria-pressed="true"] span:last-child { text-decoration: line-through; text-decoration-color: var(--red); color: #bbb; }
.checkbox-card__note { font-size: 11px; color: #aaa; margin: 0; }

.tips .h2 { font-size: clamp(1.9rem, 2.4vw, 2.9rem); font-stretch: 100%; font-weight: 900; }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 2vw, 40px) clamp(16px, 2vw, 40px); }
.ccard { position: relative; display: flex; flex-direction: column; border-top: 1px solid #000; padding-top: clamp(16px, 1.2vw, 22px); }
.ccard::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.ccard:hover::before { transform: scaleX(1); }
.ccard__cat { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.ccard__title { font-family: var(--f-body); font-weight: 800; font-size: clamp(17px, 1.3vw, 25px); line-height: 1.2; max-width: 520px; text-transform: none; }
.ccard__title a::after { content: ""; position: absolute; inset: 0; }
.ccard__text { color: #555; font-size: clamp(13px, .82vw, 16px); margin: clamp(12px, 1.1vw, 20px) 0 clamp(20px, 1.6vw, 30px); max-width: 520px; }
.ccard__link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 11px; font-weight: 800; text-transform: uppercase; padding-right: 16px; }
.ccard__link .ico { width: 26px; transition: transform .4s var(--ease); }
.ccard:hover .ccard__link .ico { transform: translateX(8px); }
.ccard:hover .ccard__title { color: var(--red); }
.nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
.page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1.5px solid #000; font-weight: 800; font-size: 13px; }
.page-numbers.current, .page-numbers:hover { background: #000; color: #fff; }
.page-numbers .ico { width: 20px; }
.faq { padding-block: clamp(30px, 1.6vw, 30px) clamp(30px, 1.6vw, 30px); }
.faq__inner { display: grid; grid-template-columns: 0.5fr 1fr; gap: var(--gap); }
.faq__intro { padding-top: 10px; }
.faq .h2 { font-size: clamp(1.8rem, 2.3vw, 2.75rem); font-stretch: 100%; font-weight: 900; margin-bottom: 30px; }
.faq__intro .muted { max-width: 440px; }
.faq__list { border-top: 1px solid #ccc; }
.qa { border-bottom: 1px solid #ccc; }
.qa__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; padding: 16px 0 6px; font-weight: 800; font-size: clamp(14px, .9vw, 17px); cursor: pointer; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q .ico { width: 18px; transition: transform .4s var(--ease); color: var(--red); }
.qa[open] .qa__q .ico { transform: rotate(45deg); }
.qa__a { color: #555; font-size: clamp(13px, .82vw, 15px); padding-bottom: 14px; max-width: 1080px; }

/* ---------- Article ---------- */
.article { padding-top: clamp(40px, 2.4vw, 46px); }
.article__inner { display: grid; grid-template-columns: minmax(220px, 400px) minmax(0, 1060px); gap: clamp(30px, 4.4vw, 84px); align-items: start; }
.article__aside { position: sticky; top: calc(var(--hdr) + 20px); display: flex; flex-direction: column; gap: clamp(30px, 3.2vw, 60px); }
.toc { background: var(--cream); border-top: 3px solid var(--red); padding: 24px 24px 22px; }
.toc__title { font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.toc li { border-bottom: 1px solid #ddd; }
.toc li a { display: flex; gap: 18px; padding: 14px 0; font-size: 14px; font-weight: 600; transition: color .3s, padding .4s var(--ease); }
.toc li a span { color: var(--red); font-size: 10px; font-weight: 800; padding-top: 3px; }
.toc li a:hover, .toc li a.is-current { color: var(--red); padding-left: 6px; }
.toc__extra { display: block; margin-top: 18px; font-size: 13px; }
.toc__extra span { display: block; font-size: 11px; color: #666; margin-top: 4px; }
.aside-note__tick { display: block; width: 28px; height: 3px; background: var(--red); margin-bottom: 20px; }
.aside-note__title { font-weight: 800; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.45; }
.aside-note__text { color: #555; font-size: 13px; }
.prose--article { max-width: 1060px; }
.prose--article > p:first-child { padding-bottom: clamp(22px, 1.6vw, 30px); margin-bottom: clamp(26px, 2vw, 40px); border-bottom: 1px solid #ccc; color: #222; }
.prose h2 { position: relative; font-family: var(--f-body); text-transform: none; font-weight: 800; font-size: clamp(20px, 1.6vw, 31px); line-height: 1.2; margin: clamp(40px, 3.2vw, 62px) 0 clamp(14px, 1vw, 20px); }
.prose--article h2 { padding-left: clamp(0px, 3.4vw, 64px); }
.prose--article h2 .h-num { position: absolute; left: 0; top: .3em; font-size: 11px; color: var(--red); font-weight: 800; }
.prose--article > *:not(h2):not(:first-child) { margin-left: clamp(0px, 3.4vw, 64px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(18px, 1.2vw, 23px); margin: 30px 0 12px; }
.prose p { color: #555; }
.prose--article ul, .prose--page ul { margin: 0 0 1.2em; }
.prose--article li, .prose--page li { position: relative; padding-left: 18px; margin-bottom: .8em; color: #111; }
.prose--article li::before, .prose--page li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--red); }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose a { color: var(--red); text-decoration: underline; }
.prose blockquote { margin: 26px 0; padding: 14px 18px; background: var(--cream); border-left: 3px solid var(--red); font-size: 14px; }
.prose blockquote p { color: #222; }
.prose img { margin: 26px 0; }
.compare { border-top: 2px solid #000; padding-top: 18px; margin: clamp(40px, 3vw, 60px) 0 0 clamp(0px, 3.4vw, 64px); }
.compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.compare__cols > div + div { border-left: 1px solid #ccc; padding-left: 36px; }
.compare h3 { font-family: var(--f-body); font-size: 16px; font-weight: 800; margin-bottom: 12px; text-transform: none; }
.compare p { color: #555; font-size: 14px; }

/* ---------- Contact ---------- */
.contact__inner { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.55fr); gap: clamp(30px, 5vw, 96px); align-items: start; }
.cform .h3 { font-family: var(--f-body); font-weight: 900; font-size: clamp(22px, 1.8vw, 34px); text-transform: uppercase; margin-bottom: clamp(18px, 1.4vw, 26px); }
.cform .h3 .dot { color: inherit; }
.rcards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 22px); border: 0; padding: 0; margin: 0 0 14px; }
.rcard { position: relative; cursor: pointer; }
.rcard input { position: absolute; opacity: 0; }
.rcard__in { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 26px 50px 26px 24px; background: var(--cream); border: 1px solid #ddd; border-top: 3px solid transparent; transition: background .35s, color .35s; }
.rcard__in b { font-size: clamp(14px, 1vw, 19px); }
.rcard__in small { font-size: 12px; color: #666; }
.rcard__dot { position: absolute; right: 20px; top: 28px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #999; }
.rcard input:checked + .rcard__in { background: #000; color: #fff; border-color: #000; border-top-color: var(--red); }
.rcard input:checked + .rcard__in small { color: #ccc; }
.rcard input:checked + .rcard__in .rcard__dot { border-color: var(--red); box-shadow: inset 0 0 0 4px #000, inset 0 0 0 10px var(--red); }
.rcard input:focus-visible + .rcard__in { outline: 2px solid var(--red); outline-offset: 2px; }
.cform__hint { font-size: 12px; color: #555; margin-bottom: 18px; }
.cform__group { padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-bottom: 22px; }
.cform__h { font-family: var(--f-body); font-weight: 900; font-size: clamp(18px, 1.4vw, 26px); text-transform: uppercase; margin: 6px 0 18px; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.drop { position: relative; display: flex; gap: 22px; padding: 22px 26px; background: var(--cream); border: 1px dashed #c8c8c4; cursor: pointer; transition: border-color .3s, background .3s; }
.drop:hover, .drop.is-over { border-color: var(--red); background: #fbf2f1; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__ico { color: var(--red); }
.drop__ico .ico { width: 30px; height: 30px; }
.drop__txt b { display: block; font-size: 15px; margin-bottom: 6px; }
.drop__txt small { font-size: 12px; color: #666; }
.drop__files { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--red); }
.fld__label--mt { margin: 22px 0 10px; font-weight: 700; font-size: 13px; text-transform: none; }
.radios { display: flex; gap: clamp(30px, 5vw, 96px); margin-bottom: 8px; }
.radio, .check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.radio input, .check input { appearance: none; margin: 0; flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #555; border-radius: 50%; background: #fff; transition: box-shadow .3s, border-color .3s; }
.radio input:checked { border-color: var(--red); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--red); }
.radio input:checked + span { font-weight: 700; }
.check { margin-top: 16px; font-size: 14px; align-items: flex-start; }
.check input { border-radius: 0; width: 18px; height: 18px; margin-top: 2px; }
.check input:checked { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px #fff; }
.btn--submit { min-width: 300px; margin-top: 12px; }
.contact__aside .kicker { margin-bottom: clamp(60px, 6.4vw, 124px); }
.next-box { background: var(--cream); border-top: 2px solid var(--red); padding: clamp(24px, 1.6vw, 30px) clamp(22px, 2.6vw, 50px) clamp(30px, 2.4vw, 46px) clamp(22px, 1.4vw, 26px); margin-bottom: 22px; }
.next-box__title, .tech-box__title { font-family: var(--f-body); font-weight: 900; font-size: clamp(18px, 1.3vw, 25px); text-transform: uppercase; margin-bottom: 26px; }
.next-box li { display: grid; grid-template-columns: 30px 1fr; gap: 26px; margin-bottom: 26px; }
.next-box li:last-child { margin-bottom: 0; }
.next-box li > span { font-size: 11px; font-weight: 800; color: var(--red); padding-top: 3px; }
.next-box b { font-size: 15px; }
.next-box p { font-size: 13px; color: #555; margin-top: 8px; }
.tech-box { border: 1px solid #ddd; padding: clamp(22px, 1.4vw, 28px) clamp(20px, 1.4vw, 26px); margin-bottom: 26px; }
.tech-box__title { font-size: clamp(15px, .95vw, 18px); margin-bottom: 18px; }
.tech-box p { font-size: 13px; color: #555; }
.red-box { background: var(--red); color: #fff; padding: clamp(24px, 1.4vw, 28px) clamp(20px, 1.4vw, 26px); margin-bottom: 30px; }
.red-box .kicker { font-size: 10px; }
.red-box__title { font-family: var(--f-body); font-stretch: 100%; font-weight: 900; font-size: clamp(22px, 1.6vw, 30px); line-height: 1.05; margin-bottom: 26px; }
.red-box p { font-size: 13px; margin-bottom: 18px; }
.red-box .btn--arrow { min-height: 70px; min-width: 0; font-size: 12px; }
.contact__aside > .muted { font-size: 13px; margin-bottom: 30px; }

/* ---------- À propos ---------- */
.phero--about { padding-bottom: 0; }
.about-hero { display: grid; grid-template-columns: 1fr 0.73fr; gap: clamp(30px, 5.5vw, 106px); align-items: start; }
.about-hero .phero__title { margin: 10px 0 clamp(28px, 2.4vw, 46px); font-stretch: 100%; font-weight: 900; font-size: clamp(2.6rem, 5.1vw, 6.1rem); line-height: .98; }
.about-hero .phero__text { max-width: 900px; }
.about-hero__scroll { display: flex; align-items: center; gap: 8px; margin-top: clamp(40px, 3.6vw, 70px); padding: 14px 0 20px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 11px; font-weight: 800; text-transform: uppercase; max-width: 910px; }
.about-hero__scroll .ico { width: 13px; animation: bob 2s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.about-hero__fig { position: relative; margin: clamp(30px, 3.4vw, 64px) 0 0; }
.about-hero__tick { position: absolute; left: 0; top: -6px; width: 96px; height: 6px; background: var(--red); z-index: 2; }
.about-hero__fig .frame { aspect-ratio: 706 / 582; }
.about-hero__fig figcaption, .about-answer__fig figcaption { font-size: 11px; color: rgba(255, 255, 255, .75); padding: 16px 0 24px; }
.about-answer__fig figcaption { color: #555; padding-bottom: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5.5vw, 106px); align-items: start; }
.about-people .lead { margin: clamp(26px, 2.2vw, 42px) 0; max-width: 830px; }
.about-start .lead { margin: clamp(26px, 2.2vw, 42px) 0; max-width: 830px; }
.strong-line { font-weight: 700; font-size: clamp(15px, 1.02vw, 19px); max-width: 820px; }
.sq-list { margin-top: clamp(30px, 3.8vw, 74px); }
.sq-list li { border-top: 1px solid #ccc; padding: 18px 0 clamp(30px, 2.4vw, 46px); }
.sq-list b { position: relative; display: block; padding-left: 28px; font-size: clamp(15px, 1vw, 19px); }
.sq-list b::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; background: var(--red); }
.sq-list span { display: block; padding-left: 28px; margin-top: 6px; font-size: 13px; color: #444; }
.about-answer { padding-top: clamp(40px, 2.4vw, 46px); padding-bottom: clamp(30px, 1.4vw, 28px); }
.about-answer .kicker { margin-bottom: clamp(30px, 2.6vw, 50px); }
.split--media { grid-template-columns: 0.82fr 1fr; padding-left: clamp(0px, 1.3vw, 26px); }
.about-answer__img { aspect-ratio: 660 / 460; overflow: hidden; background: #fff; }
.about-answer__img img { width: 100%; height: 100%; object-fit: cover; }
.about-answer .h1--tight { margin-bottom: clamp(26px, 2.2vw, 40px); }
.about-answer .lead { margin-bottom: 26px; }
.about-answer .muted { margin-bottom: clamp(26px, 2vw, 40px); }
.about-anchor { padding-bottom: clamp(26px, 1.6vw, 30px); overflow: hidden; }
.split--anchor { align-items: center; }
.about-anchor__red { margin-top: clamp(30px, 3vw, 58px); font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 1.5vw, 29px); text-transform: uppercase; color: var(--red); }
.about-anchor__copy { position: relative; padding-top: clamp(50px, 4.6vw, 88px); }
.about-anchor__copy .bracket { top: -40px; right: 0; }
.about-anchor__copy .lead { margin-bottom: 26px; }
.about-anchor__copy .muted { color: #b8b8b4; }
.rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .35); margin: clamp(30px, 2.4vw, 46px) 0 0; }
.plus-rows { margin-top: clamp(30px, 3.4vw, 64px); }
.plus-rows li { display: grid; grid-template-columns: 30px 1fr; gap: 26px; padding: 18px 0 clamp(16px, 1.3vw, 24px); border-top: 1px solid #ccc; }
.plus-rows li:last-child { border-bottom: 1px solid #ccc; }
.plus-rows__ico { color: var(--red); font-size: 20px; line-height: 1; }
.plus-rows b { font-weight: 500; font-size: clamp(15px, 1.02vw, 19px); }
.plus-rows p { font-size: 13px; color: #555; margin-top: 8px; }
.cta-about { background: var(--red); color: #fff; padding: clamp(40px, 3.2vw, 62px) 0 clamp(30px, 1.6vw, 30px); }
.split--cta { grid-template-columns: 1fr 0.5fr; align-items: center; }
.cta-about .h1 { font-size: clamp(2.2rem, 3.9vw, 4.6rem); font-stretch: 100%; font-weight: 900; }
.cta-about__text { margin-top: clamp(26px, 2.2vw, 40px); max-width: 920px; font-size: clamp(15px, 1.02vw, 19px); }
.cta-about__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-about__side p { font-size: 13px; }
.cta-about__side .btn { min-width: clamp(220px, 19.4vw, 372px); }
.cta-about__side .line-link { width: 100%; max-width: 460px; }
.cta-about__foot { border-top: 1px solid rgba(255, 255, 255, .4); margin-top: clamp(30px, 2.4vw, 46px); padding-top: 16px; font-size: 10px; font-weight: 800; text-transform: uppercase; }

/* 404 */
.phero--404 { min-height: 70vh; display: flex; align-items: center; }
.phero--404 .hero__btns { flex-direction: row; flex-wrap: wrap; margin-top: 40px; }

/* ==========================================================================
   Effets (préchargeur, réticule, transitions, révélations)
   ========================================================================== */

/* Préchargeur */
.loader { position: fixed; inset: 0; z-index: 9990; background: #000; color: #fff; display: grid; place-items: center; }
.is-returning .loader, .fx-off .loader { display: none; }
.loader__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); }
.loader__center { position: relative; width: min(78vw, 360px); }
.loader__logo { width: 62%; margin: 0 auto 34px; color: #fff; }
.loader__bar { position: relative; height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.loader__meta { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.loader__count b { color: #fff; font-weight: 400; }
.loader__foot { position: absolute; left: 50px; right: 50px; bottom: 30px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: rgba(255, 255, 255, .4); }
.loader .hud-corner { width: 30px; height: 30px; }

/* Transition entre pages */
.wipe { position: fixed; inset: 0; z-index: 9980; background: var(--red); display: grid; place-items: center; pointer-events: none; transform: translateY(100%); visibility: hidden; }
.is-wiping .wipe, .is-wipe-in .wipe, .wipe.is-on { visibility: visible; }
.wipe__logo { width: 140px; color: #fff; opacity: 0; }
.is-wiping .wipe { pointer-events: all; }
.is-wipe-in .wipe { transform: none; }
.is-wipe-in .wipe__logo { opacity: 1; }
.is-wipe-in .loader { display: none; }


/* Visionneuse */
.lbox { position: fixed; inset: 0; z-index: 9960; display: grid; place-items: center; background: rgba(0, 0, 0, .94); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.lbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
.lbox img { max-width: 88vw; max-height: 84vh; object-fit: contain; }
.lbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 28px; width: 64px; height: 64px; transition: color .3s; }
.lbox button:hover { color: var(--red); }
.lbox__close { top: 20px; right: 20px; }
.lbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.fx-off .wipe { display: none; }

/* Réticule */
.reticle { position: fixed; left: 0; top: 0; z-index: 9970; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: normal; }
.has-reticle .reticle { opacity: 1; }
.reticle__box { position: absolute; left: 0; top: 0; width: 34px; height: 34px; transform: translate(-50%, -50%); }
.reticle__box i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--red); }
.reticle__box i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.reticle__box i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.reticle__box i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.reticle__box i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.reticle__dot { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: var(--red); border-radius: 50%; }
.reticle__coords { position: absolute; left: 24px; top: 16px; display: flex; gap: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; color: var(--red); white-space: nowrap; background: rgba(0, 0, 0, .55); padding: 2px 5px; transition: opacity .3s; }
.reticle__coords b { font-weight: 400; color: #fff; }
.reticle__label { position: absolute; left: 24px; top: -26px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--red); padding: 3px 7px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.reticle.is-label .reticle__label { opacity: 1; transform: none; }
.reticle.is-target .reticle__coords { opacity: 0; }
.reticle.is-target .reticle__dot { opacity: 0; }
.reticle.is-down .reticle__box { transform: translate(-50%, -50%) scale(.8); }
@media (hover: hover) and (pointer: fine) {
	.fx-cursor.has-reticle, .fx-cursor.has-reticle a, .fx-cursor.has-reticle button, .fx-cursor.has-reticle label, .fx-cursor.has-reticle summary { cursor: none; }
	.fx-cursor.has-reticle input, .fx-cursor.has-reticle textarea, .fx-cursor.has-reticle select { cursor: auto; }
}

/* Révélations — masquées seulement si JS + animations permises */
@media (prefers-reduced-motion: no-preference) {
	html.js:not(.fx-off) [data-reveal], html.js:not(.fx-off) [data-stagger] > *, html.js:not(.fx-off) [data-split]:not(.is-split) { opacity: 0; }
	html.js:not(.fx-off) [data-reveal-img] { clip-path: inset(0 0 100% 0); }
}
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > * { display: inline-block; }

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1280px) {
	.nav__list { gap: 26px; }
	.site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
	.site-footer__about { grid-column: span 2; }
	.socials { justify-content: flex-start; align-self: end; }
	.finder__body { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
	.nav, .site-header__cta { display: none; }
	.burger { display: block; }
	.hero__inner, .install__inner, .dealers-home__inner, .story__inner, .quick__inner, .project-hero, .pdesc__inner, .featured__inner, .featured__inner--wide, .faq__inner, .contact__inner, .about-hero, .split, .split--media, .split--cta, .split--anchor { grid-template-columns: 1fr; }
	.hero__visual { justify-self: center; width: min(100%, 640px); }
	.badges { grid-template-columns: 1fr 1fr; }
	.fcards, .news__grid, .cgrid, .pgrid { grid-template-columns: 1fr 1fr; }
	.stepcards { grid-template-columns: 1fr 1fr; }
	.article__inner { grid-template-columns: 1fr; }
	.article__aside { position: static; }
	.prose--article h2, .prose--article > *:not(h2):not(:first-child), .compare { padding-left: 0; margin-left: 0; }
	.prose--article h2 .h-num { position: static; display: block; margin-bottom: 6px; }
	.cta-red__inner { flex-direction: column; align-items: flex-start; }
	.finder__form { grid-template-columns: 1fr 1fr; }
	.finder__btn { grid-column: 1 / -1; }
	.project-hero__side { padding-top: 0; }
	.about-anchor__copy { padding-top: 20px; }
	.contact__aside .kicker { margin-bottom: 20px; }
	.hud__line--b { display: none; }
}
@media (max-width: 720px) {
	:root { --hdr: 72px; }
	.fcards, .news__grid, .cgrid, .pgrid, .stepcards { grid-template-columns: 1fr; }
	.cta-split__inner { grid-template-columns: 1fr; gap: 50px; }
	.cta-split__col--right { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 40px; }
	.qform, .cform__grid, .rcards, .compare__cols { grid-template-columns: 1fr; }
	.compare__cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid #ccc; padding-top: 20px; }
	.tags { grid-template-columns: 1fr; position: static; padding: 10px; background: #D9D9D9; }
	.dealers-home__visual { aspect-ratio: auto; }
	.dealers-home__visual .qmap { position: relative; }
	.dealers-home__visual .qmap__stage { aspect-ratio: 1000 / 680; height: auto; }
	.sec__head { flex-direction: column; align-items: flex-start; }
	.phero__row { flex-direction: column; align-items: flex-start; }
	.project-hero__meta { flex-direction: column; }
	.project-hero__where { align-items: flex-start; }
	.pgallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.pgallery__item--main { grid-row: span 1; }
	.infobox dl { grid-template-columns: 1fr 1fr; }
	.cta-box { flex-direction: column; align-items: flex-start; }
	.finder__form { grid-template-columns: 1fr; }
	.notice-bar { flex-direction: column; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand, .site-footer__about { grid-column: 1 / -1; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
	.hud { display: none; }
	.btn--arrow, .btn--submit, .plist__more .btn, .dsel { min-width: 0; width: 100%; }
	.radios { flex-direction: column; gap: 12px; }
	.hero__btns .btn, .cta-red__btns .btn, .cta-split .btn { width: 100%; }
	.qpin__name { display: none; }
	.hero__title br, .h1 br, .phero__title br, .cta-split__title br { display: none; }
	.qmap__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.loader, .reticle { display: none !important; }
}

/* Impression */
@media print {
	.site-header, .site-footer, .loader, .wipe, .reticle, .hud, .cta-red, .cta-split { display: none !important; }
	body, .phero, .sec--black { background: #fff !important; color: #000 !important; }
}