/* Bleus Frères — maquette 3 pages (06/10/2026). Identité de la maquette usine (gabarit chantier : Oswald + Work Sans,
   orange #FA7D09 sur anthracite et sable) ; composants du kit figer (formulaire par étapes, bouton flottant, visionneuse). */
:root {
  --or: #FA7D09; --or-txt: #A84E00; --or-clair: #FFE1BA;
  --nuit: #1E1F22; --nuit2: #2A2B30; --nuit3: #141518; --trait-s: #34353A; --trait-s2: #45464B;
  --fond: #F5F1EB; --fond2: #EAE3D9; --trait: #DDD6CB; --carte: #FFFFFF;
  --txt: #1E1F22; --txt2: #45464A; --gris: #5B5C60; --gris-s: #9D9A94; --txt-s: #C9C6C0;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--fond); color: var(--txt); font-family: 'Work Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--txt); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
input, textarea, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.wrap, .wrap0 { max-width: 1320px; margin: 0 auto; }
.wrap { padding: 0 24px; }
.or { color: var(--or); }

/* ── Animations de la maquette ─────────────────────────────────────── */
@keyframes gRise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes gFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gMask { from { transform: translateY(110%); } to { transform: none; } }
@keyframes gClip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gPar { from { transform: translate3d(0,-7%,0) scale(1.16); } to { transform: translate3d(0,7%,0) scale(1.16); } }
@keyframes gOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-90px); } }
@keyframes gBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gPulse { 0% { box-shadow: 0 0 0 0 rgba(250,125,9,.5); } 100% { box-shadow: 0 0 0 18px rgba(250,125,9,0); } }
@keyframes gSlideL { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes gShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes gImgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes gBouge { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2.5%, -1.5%); } }
@keyframes gOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes gZoom { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes gLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Navigateurs sans animation-timeline (Firefox, Safari) : site.js rejoue les entrées au défilement */
@supports not (animation-timeline: view()) {
  [data-reveal] { animation-timeline: auto !important; animation-duration: .9s !important; animation-delay: 0s !important; animation-range: normal !important; }
  [data-reveal]:not(.rv-in) { animation-play-state: paused !important; }
  [data-reveal="scroll"] { animation: none !important; }
  .hero-par, .accroche-bg, .photo-haute > div { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker-in, img[data-bouge] { animation: none !important; }
}
.barre-lecture { position: fixed; left: 0; top: 0; right: 0; height: 4px; z-index: 96; background: var(--or); transform-origin: left center; animation: gBar linear both; animation-timeline: scroll(root); }

/* ── Titres ───────────────────────────────────────────────────────── */
.eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--or-txt); }
.eyebrow--clair { color: var(--or-clair); }
.ttl { margin: 12px 0 0; font-family: Oswald, sans-serif; font-weight: 700; line-height: .95; text-transform: uppercase; }
.ttl > span { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.ttl > span > span { display: block; }
.ttl-2 { color: var(--or-txt); }
.ttl-2--or { color: var(--or); }
.txt-l { margin: 22px 0 0; max-width: 560px; font-size: 17px; line-height: 1.7; color: var(--txt2); text-wrap: pretty; }
.txt-l--clair { color: var(--txt-s); }

/* ── Boutons ──────────────────────────────────────────────────────── */
.btn-p, .btn-o, .btn-ob { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; font-family: Oswald, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s, border-color .25s; }
.btn-p { position: relative; overflow: hidden; background: var(--or); color: #141414; }
.btn-p:hover { background: #FFFFFF; color: var(--nuit); transform: translateY(-2px); }
.btn-p--sombre:hover { background: var(--nuit); color: #FFFFFF; }
.btn-p svg, .btn-o svg { width: 20px; height: 20px; flex: none; }
.btn-brille::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); animation: gShine 3.5s 3s ease-in-out infinite; }
.btn-brille span { position: relative; }
.btn-o { border: 1.5px solid rgba(255,255,255,.65); color: #FFFFFF; }
.btn-o:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.btn-ob { border: 1.5px solid var(--or); color: #FFFFFF; }
.btn-ob:hover { background: var(--or); color: #141414; }
.lk-u { color: var(--or-txt); font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.lk-u:hover { color: var(--nuit); }

/* ── Bandeau du haut + en-tête ────────────────────────────────────── */
.topbar { background: var(--nuit); color: var(--txt-s); font-size: 13.5px; }
.topbar-in { max-width: 1320px; margin: 0 auto; padding: 9px 24px; display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.topbar-in > div { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-s); font-weight: 500; }
.topbar a:hover { color: #FFFFFF; }
.topbar b { color: #FFFFFF; font-weight: 600; }
.topbar svg { width: 15px; height: 15px; flex: none; color: var(--or); }
@media (max-width: 860px) { .tb-mail, .tb-zone { display: none !important; } }
@media (max-width: 520px) { .topbar-in { justify-content: center; } .topbar-in > div:last-child { display: none; } }

.hd { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #E3DDD4; }
.hd-in { max-width: 1320px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd-logo img { height: 64px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-weight: 600; font-size: 15px; }
.nav a { position: relative; padding: 6px 0; }
.nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:not(.nav-cta):hover::after, .nav a[aria-current]::after { transform: none; }
.nav-cta { padding: 13px 22px !important; background: var(--or); color: #141414; font-family: Oswald, sans-serif; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; transition: background .25s, color .25s; }
.nav-cta:hover { background: var(--nuit); color: #FFFFFF; }
.nav-narrow { display: none; align-items: center; gap: 8px; }
.nav-tel { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; background: var(--or); color: #141414; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.nav-tel svg { width: 18px; height: 18px; }
.nav-burger { width: 48px; height: 48px; display: grid; align-content: center; justify-items: center; gap: 5px; background: var(--nuit); border: 0; cursor: pointer; padding: 0; }
.nav-burger span { width: 20px; height: 2px; background: #FFFFFF; display: block; }
.mm { border-top: 1px solid #E3DDD4; background: #FFFFFF; padding: 6px 24px 20px; display: grid; font-size: 18px; font-weight: 600; max-height: calc(100vh - 90px); overflow-y: auto; }
.mm a { padding: 14px 0; border-bottom: 1px solid #E3DDD4; }
.mm .mm-tel { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--txt2); }
.mm .mm-tel svg { width: 18px; height: 18px; color: var(--or-txt); }
.mm .mm-cta { margin-top: 14px; text-align: center; background: var(--or); color: #141414; padding: 16px; border: 0; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 980px) { .nav { display: none; } .nav-narrow { display: flex; } .hd-logo img { height: 52px; } }

/* ── Sections ─────────────────────────────────────────────────────── */
.sec { padding: clamp(72px, 10vw, 130px) 24px; }
.s-sombre { background: var(--nuit); color: #FFFFFF; }
.s-alt { background: var(--fond2); }
.sec-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.sec-tete-p { margin: 0; max-width: 420px; font-size: 16.5px; line-height: 1.65; color: var(--txt-s); text-wrap: pretty; }
.sec-tete-p--clair { color: var(--txt2); }
.g-2col { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(36px, 6vw, 88px); align-items: center; }

/* Accueil — hero */
.hero { position: relative; min-height: clamp(600px, 90vh, 900px); overflow: hidden; display: flex; align-items: flex-end; background: var(--nuit); color: #FFFFFF; }
.hero-bg { position: absolute; inset: 0; }
.hero-par { position: absolute; inset: 0; animation: gPar linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.4s ease, transform 7s linear; }
.hero-img.on { opacity: 1; transform: scale(1.08); }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,31,34,.45) 0%, rgba(30,31,34,.2) 38%, rgba(30,31,34,.92) 100%); }
.hero-in { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px clamp(44px, 6vw, 84px); animation: gOut linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
.hero-sur { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--or-clair); animation: gFade .8s .4s both; }
.hero-sur span { width: 26px; height: 12px; background: var(--or); flex: none; }
.hero-h1 { margin: 16px 0 0; font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(56px, 10vw, 160px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.hero-h1 > span { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.hero-h1 > span > span { display: block; }
.hero-bas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }
.hero-bas p { margin: 0; max-width: 560px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: #EDE9E3; text-wrap: pretty; animation: gRise .9s .5s cubic-bezier(.2,.8,.2,1) both; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; animation: gRise .9s .62s cubic-bezier(.2,.8,.2,1) both; }
.hero-dots { margin-top: 28px; display: flex; gap: 8px; }
.hero-dots i { width: 18px; height: 4px; background: rgba(255,255,255,.45); transition: width .5s, background .5s; }
.hero-dots i.on { width: 44px; background: var(--or); }

.ticker { background: var(--or); color: #141414; overflow: hidden; padding: 15px 0; }
.ticker-in { display: flex; width: max-content; animation: gMarq 42s linear infinite; }
.ticker-in span { display: flex; align-items: center; gap: 26px; padding-right: 26px; font-family: Oswald, sans-serif; font-weight: 600; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.ticker-in i { width: 26px; height: 12px; border: 2px solid #FFFFFF; flex: none; }

/* Accueil — entreprise */
.promesses { list-style: none; margin: 30px 0 0; padding: 0; max-width: 560px; border-top: 1px solid var(--trait); }
.promesses li { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--trait); font-weight: 600; font-size: 16px; }
.promesses span { font-family: Oswald, sans-serif; font-size: 14px; color: var(--or-txt); }
.photo-haute { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--trait); }
.photo-haute img { width: 100%; height: 100%; object-fit: cover; }

/* Accueil — services */
.svc-g { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--trait-s); }
.svc { position: relative; background: var(--nuit); color: #FFFFFF; padding: 34px 30px 38px; display: flex; flex-direction: column; gap: 12px; transition: background .35s, transform .35s, color .35s; }
.svc-n { font-family: Oswald, sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: var(--or); }
.svc h3 { margin: 8px 0 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: 26px; text-transform: uppercase; letter-spacing: .01em; }
.svc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #D8D5CF; text-wrap: pretty; }
.svc-lien { margin-top: auto; padding-top: 8px; font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--or); }
@media (hover: hover) and (min-width: 761px) {
  .svc:hover { background: var(--or); color: #141414; transform: translateY(-6px); }
  .svc:hover .svc-n, .svc:hover p, .svc:hover .svc-lien { color: #141414; }
}
@media (max-width: 1000px) { .svc-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Accueil — aperçu location */
.s-or-band { background: var(--fond2); border-top: 6px solid var(--or); }
.loc-ap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.loc-ap .btn-p { margin-top: 30px; }
.loc-ap-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.loc-mini { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nuit); }
.loc-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); position: absolute; inset: 0; }
.loc-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,21,24,0) 45%, rgba(20,21,24,.85) 100%); }
.loc-mini-t { position: absolute; z-index: 1; left: 18px; bottom: 14px; right: 18px; font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; color: #FFFFFF; }
.loc-mini-t::after { content: " →"; color: var(--or); }
.loc-mini:hover img { transform: scale(1.06); }
@media (max-width: 900px) { .loc-ap { grid-template-columns: 1fr; } }

/* Accueil — rail des réalisations et des avis */
.rail-nav { display: flex; gap: 10px; }
.rail-nav button { width: 56px; height: 56px; border: 1.5px solid var(--nuit); background: transparent; font-size: 20px; cursor: pointer; transition: background .25s, color .25s; }
.rail-nav button:hover { background: var(--nuit); color: #FFFFFF; }
.rail-nav button.on { border-color: var(--or); background: var(--or); color: #141414; }
.rail-nav button.on:hover { background: var(--nuit); border-color: var(--nuit); color: #FFFFFF; }
.rail { margin-top: clamp(32px, 4vw, 52px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(24px, calc((100vw - 1272px) / 2)) 6px; scroll-padding: 0 max(24px, calc((100vw - 1272px) / 2)); }
.rail::-webkit-scrollbar { display: none; }
.rail-it { flex: 0 0 min(78vw, 420px); aspect-ratio: 3 / 4; scroll-snap-align: start; position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: var(--trait); }
.rail-it > img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.rail-it:hover > img { transform: scale(1.05); }
.rail-logo { position: absolute; right: 10px; bottom: 10px; padding: 5px 7px; background: rgba(255,255,255,.88); line-height: 0; pointer-events: none; }
.rail-logo img { width: clamp(60px, 6vw, 84px); height: auto; }
.chantiers { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.chantier { background: var(--carte); padding: clamp(26px, 3vw, 38px); border-top: 5px solid var(--or); }
.chantier-lieu { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-txt); }
.chantier-lieu svg { width: 16px; height: 16px; }
.chantier h3 { margin: 12px 0 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); text-transform: uppercase; line-height: 1.05; }
.chantier p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--txt2); }
.chantier ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 15px; font-weight: 600; }
.chantier li { display: flex; gap: 10px; align-items: flex-start; }
.chantier li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--or-txt); }
@media (max-width: 860px) { .chantiers { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .chantier ul { grid-template-columns: 1fr; } }

/* Accueil — méthode */
.etapes { margin-top: clamp(44px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.etape-c { background: var(--carte); padding: 30px 28px 34px; display: flex; flex-direction: column; gap: 12px; border-bottom: 5px solid var(--or); transition: transform .35s; }
.etape-c:hover { transform: translateY(-6px); }
.etape-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.etape-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--nuit); color: var(--or); }
.etape-ic svg { width: 26px; height: 26px; }
.etape-n { font-family: Oswald, sans-serif; font-weight: 700; font-size: 48px; line-height: 1; color: var(--or-txt); }
.etape-c h3 { margin: 4px 0 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; }
.etape-c p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--txt2); }
@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Accueil — accroche */
.accroche { position: relative; height: clamp(420px, 70vh, 680px); overflow: hidden; background: var(--nuit); color: #FFFFFF; display: flex; align-items: center; }
.accroche-bg { position: absolute; inset: -12% 0; }
.accroche-bg img { width: 100%; height: 100%; object-fit: cover; animation: gBouge 22s ease-in-out infinite alternate; transform-origin: 60% 45%; }
.accroche-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,31,34,.9) 0%, rgba(30,31,34,.55) 55%, rgba(30,31,34,.2) 100%); }
.accroche-in { position: relative; width: 100%; padding: 0 24px; }
.accroche-t { font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(42px, 7vw, 110px); line-height: .92; text-transform: uppercase; }
.accroche-t > span { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.accroche-t > span > span { display: block; }
.accroche-btn { margin-top: clamp(26px, 3vw, 38px); display: flex; flex-wrap: wrap; gap: 12px; }
.accroche-btn .btn-p { animation: gPulse 2s 2s infinite; }

/* Accueil — avis */
.avis-note { margin: 14px 0 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--gris); }
.avis { flex: 0 0 min(84vw, 390px); scroll-snap-align: start; margin: 0; background: var(--carte); padding: 30px 28px 26px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 18px; border-top: 4px solid var(--or); }
.avis-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.avis-q { font-family: Georgia, serif; font-size: 46px; line-height: .6; color: var(--or-txt); }
.avis-e { color: var(--or); font-size: 17px; letter-spacing: 2px; }
.avis-b { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; background: var(--fond2); color: var(--gris); }
.avis blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; flex: 1; }
.avis figcaption { display: flex; align-items: center; gap: 12px; }
.avis figcaption > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris); }
.avis strong { font-size: 15px; color: var(--txt); }
.avis-p { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--or); }
.avis-i { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--or); color: #141414; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
#rail-avis { padding-bottom: 26px; }

/* ── Contact (section sombre, formulaire) ─────────────────────────── */
.ct-grille { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 88px); }
.ct-intro { margin: 22px 0 0; max-width: 500px; font-size: 16.5px; line-height: 1.65; color: var(--txt-s); }
.ct-cartes { margin-top: 36px; display: grid; gap: 1px; background: var(--trait-s); max-width: 520px; }
.ct-card { background: var(--nuit); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #FFFFFF; transition: color .2s; }
.ct-card:hover { color: var(--or); }
.ct-t { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ct-ic { width: 50px; height: 50px; flex: none; background: var(--or); color: #141414; display: grid; place-items: center; }
.ct-ic svg { width: 22px; height: 22px; }
.ct-l { display: block; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-s); }
.ct-v { display: block; margin-top: 4px; font-family: Oswald, sans-serif; font-weight: 600; font-size: clamp(21px, 2.3vw, 28px); }
.ct-v--mail { font-size: clamp(18px, 2vw, 24px); overflow-wrap: anywhere; }
.ct-fl { font-size: 22px; }
.fm { background: var(--nuit2); padding: clamp(28px, 4vw, 44px); display: grid; gap: 18px; border-top: 5px solid var(--or); }
.fm-pan { display: grid; gap: 18px; }
.fm-q { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-s); }
.fm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .fm-row { grid-template-columns: 1fr; } }
.fm label { display: grid; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-s); }
.fm input, .fm select, .fm textarea { padding: 14px 16px; background: var(--nuit); border: 1px solid var(--trait-s2); color: #FFFFFF; font-size: 16px; text-transform: none; letter-spacing: 0; outline: none; border-radius: 0; }
.fm input::placeholder, .fm textarea::placeholder { color: #8E8B85; }
.fm input:focus, .fm select:focus, .fm textarea:focus { border-color: var(--or); }
.fm textarea { resize: vertical; }
.fm-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.fm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; background: var(--or); color: #141414; border: 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.fm-btn:hover { background: #FFFFFF; color: var(--nuit); }
.fm-btn--wa { background: transparent; border: 1.5px solid var(--trait-s2); color: #FFFFFF; }
.fm-btn--wa:hover { background: #FFFFFF; color: var(--nuit); border-color: #FFFFFF; }
.fm-btn svg { width: 18px; height: 18px; }
.fm-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-s); }
.fm-ok { background: var(--or); color: #141414; padding: 36px; margin-bottom: 18px; font-family: Oswald, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.35; }
.et-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.et-steps li { padding-top: 10px; border-top: 3px solid var(--trait-s2); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-s); transition: border-color .3s, color .3s; }
.et-steps li.et-on { border-color: var(--or); color: #FFFFFF; }
.choix-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .choix-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix { position: relative; display: block; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix span { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--trait-s2); background: var(--nuit); color: #FFFFFF; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: border-color .2s, background .2s; }
.choix small { font-size: 12.5px; font-weight: 500; color: var(--gris-s); }
.choix:hover span { border-color: var(--or); }
.choix-on span, .choix input:checked + span { border-color: var(--or); background: #3A2A1A; box-shadow: inset 0 0 0 1px var(--or); }
.ct-recap { padding: 16px 18px; border: 1px dashed var(--trait-s2); font-size: 14.5px; line-height: 1.7; color: var(--txt-s); }

/* ── Pages intérieures : hero court ──────────────────────────────── */
.ph { position: relative; overflow: hidden; background: var(--nuit); color: #FFFFFF; }
.ph-bg { position: absolute; inset: 0; animation: gOpen 1.1s .1s cubic-bezier(.7,0,.2,1) both; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; animation: gZoom 2.4s .1s cubic-bezier(.2,.8,.2,1) both; }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,31,34,.5) 0%, rgba(30,31,34,.35) 35%, rgba(30,31,34,.94) 100%), linear-gradient(90deg, rgba(30,31,34,.8) 0%, rgba(30,31,34,0) 70%); }
.ph-lines { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.ph-lines i { border-left: 1px solid rgba(255,255,255,.12); transform-origin: top; animation: gLine 1.2s .5s cubic-bezier(.7,0,.2,1) both; }
.ph-lines i:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.ph-in { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) 24px clamp(44px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: end; }
@media (max-width: 960px) { .ph-in { grid-template-columns: 1fr; } }
.crumb { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); animation: gFade .8s .3s both; }
.crumb a { color: var(--txt-s); } .crumb a:hover { color: #FFFFFF; }
.ph h1 { margin: 18px 0 0; font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(44px, 7vw, 110px); line-height: .92; text-transform: uppercase; animation: gRise .9s .35s cubic-bezier(.2,.8,.2,1) both; }
.ph h1 .or { display: block; }
.ph-intro { margin: 24px 0 0; max-width: 620px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #EDE9E3; animation: gRise .9s .5s cubic-bezier(.2,.8,.2,1) both; }
.ph-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; animation: gRise .9s .62s cubic-bezier(.2,.8,.2,1) both; }
.bref { background: rgba(30,31,34,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--trait-s2); border-top: 4px solid var(--or); padding: 22px 22px 18px; animation: gRise .9s .75s cubic-bezier(.2,.8,.2,1) both; }
.bref h2 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); font-weight: 600; }
.bref ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: #EDE9E3; }
.bref li { display: flex; gap: 10px; } .bref li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 5px; border: 2px solid var(--or); }

/* Location — machines en zigzag */
.machines { margin-top: clamp(44px, 6vw, 80px); display: grid; gap: clamp(56px, 8vw, 110px); }
.machine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; scroll-margin-top: 110px; }
.machine--inv .machine-img { order: 2; }
.machine-img { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--trait); }
.machine-img button { position: absolute; inset: 0; padding: 0; border: 0; cursor: zoom-in; background: none; }
.machine-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.machine-img:hover img { transform: scale(1.04); }
.badge { position: absolute; left: 16px; top: 16px; padding: 7px 12px; background: var(--or); color: #141414; font-family: Oswald, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.machine-n { font-family: Oswald, sans-serif; font-weight: 700; font-size: 52px; line-height: 1; color: var(--or-txt); }
.machine h2 { margin: 10px 0 0; font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: .98; text-transform: uppercase; }
.machine h2 small { display: block; margin-top: 6px; font-size: .42em; letter-spacing: .18em; color: var(--gris); }
.machine-chapo { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--txt2); max-width: 560px; }
.machine h3 { margin: 26px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.liste-check { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.liste-check li { display: flex; gap: 12px; align-items: flex-start; }
.liste-check svg { width: 20px; height: 20px; flex: none; color: var(--or-txt); margin-top: 1px; }
.liste-check--clair { color: #EDE9E3; }
.liste-check--clair svg { color: var(--or); }
.machine-note { margin: 22px 0 0; padding: 16px 18px; background: var(--fond2); border-left: 4px solid var(--or); display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--txt2); max-width: 560px; }
.machine-note svg { width: 22px; height: 22px; flex: none; color: var(--or-txt); }
.machine-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (max-width: 860px) { .machine { grid-template-columns: 1fr; } .machine--inv .machine-img { order: 0; } }

/* Location — containers */
.cont { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cont-img { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; }
.cont-img button { position: absolute; inset: 0; padding: 0; border: 0; cursor: zoom-in; background: none; }
.cont-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .cont { grid-template-columns: 1fr; } }

/* Location — avec ou sans opérateur */
.op-g { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.op { background: var(--carte); padding: clamp(28px, 3.4vw, 44px); border-top: 5px solid var(--or); }
.op-ic { width: 58px; height: 58px; display: grid; place-items: center; background: var(--nuit); color: var(--or); }
.op-ic svg { width: 28px; height: 28px; }
.op h3 { margin: 20px 0 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); text-transform: uppercase; }
.op p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--txt2); }
.op .op-pour { padding-top: 14px; border-top: 1px solid var(--trait); font-weight: 600; color: var(--txt); }
@media (max-width: 760px) { .op-g { grid-template-columns: 1fr; } }

/* Location — frise des étapes */
.frise { list-style: none; margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: f; position: relative; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 3px; background: linear-gradient(90deg, var(--or), var(--trait)); }
.frise li { position: relative; padding: 0 24px 0 0; }
.frise-n { position: relative; display: grid; place-items: center; width: 62px; height: 62px; background: var(--or); color: #141414; font-family: Oswald, sans-serif; font-weight: 700; font-size: 24px; }
.frise h3 { margin: 22px 0 0; font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.frise p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--txt2); }
@media (max-width: 1000px) { .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; } .frise::before { display: none; } }

/* Location — FAQ */
.faq-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq details { background: var(--carte); border-left: 4px solid transparent; margin-bottom: 10px; transition: border-color .25s; }
.faq details[open] { border-left-color: var(--or); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 56px 22px 24px; position: relative; font-family: Oswald, sans-serif; font-weight: 600; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 28px; color: var(--or-txt); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.65; color: var(--txt2); }
@media (max-width: 860px) { .faq-g { grid-template-columns: 1fr; } }

/* Contact — blocs d'infos et suite */
.infos-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.info { background: var(--carte); border: 1px solid var(--trait); border-top: 4px solid var(--or); padding: 30px 28px; }
.info-ic { width: 52px; height: 52px; display: grid; place-items: center; background: var(--nuit); color: var(--or); }
.info-ic svg { width: 24px; height: 24px; }
.info h2 { margin: 18px 0 10px; font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; }
.info p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--txt2); }
.info .info-pt { margin-top: 12px; font-size: 14.5px; color: var(--gris); }
@media (max-width: 900px) { .infos-g { grid-template-columns: 1fr; } }
.contact-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.contact-bas-img { aspect-ratio: 4 / 3; overflow: hidden; }
.contact-bas-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-etapes { margin: 26px 0 26px; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 14px; }
.mini-etapes li { counter-increment: m; display: flex; gap: 16px; font-size: 16.5px; line-height: 1.55; color: var(--txt2); }
.mini-etapes li::before { content: "0" counter(m); flex: none; font-family: Oswald, sans-serif; font-weight: 700; font-size: 22px; color: var(--or-txt); }
.mini-etapes b { color: var(--txt); }
@media (max-width: 860px) { .contact-bas { grid-template-columns: 1fr; } }

/* ── Pied de page complet (règle 10) ─────────────────────────────── */
.ft { background: var(--nuit3); color: #B5B2AC; }
.ft a { color: #D8D5CF; } .ft a:hover { color: var(--or); }
.ft-call { border-top: 4px solid var(--or); border-bottom: 1px solid #2C2D31; }
.ft-call .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ft-call h2 { margin: 0; font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(30px, 4vw, 54px); line-height: 1; text-transform: uppercase; color: #FFFFFF; }
.ft-call h2 span { color: var(--or); }
.ft-call-btn { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 56px; padding-bottom: 44px; font-size: 15px; line-height: 1.6; }
@media (max-width: 1000px) { .ft-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-cols { grid-template-columns: 1fr; gap: 32px; } }
.ft-cols p { margin: 18px 0 0; max-width: 320px; }
.ft-cols h3 { margin: 0 0 14px; font-family: Oswald, sans-serif; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; font-weight: 600; }
.ft-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-logo { background: #FFFFFF; display: inline-block; padding: 12px 16px; }
.ft-logo img { height: 58px; width: auto; }
.ft-co li { display: flex; gap: 12px; align-items: flex-start; }
.ft-co svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--or); }
.ft-bas { border-top: 1px solid #2C2D31; }
.ft-bas .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; padding-bottom: 24px; font-size: 13.5px; color: #8E8B85; }
.ft-bas .wrap > div { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ── Bouton flottant : un bouton par frère + devis (règle 09) ─────── */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 8px; justify-items: end; transition: opacity .3s, transform .3s; }
.fab.off { opacity: 0; pointer-events: none; transform: translateY(16px); }
.fab a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--or); color: #141414; font-weight: 700; font-size: 14.5px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); transition: background .25s, color .25s; }
.fab a i { font-style: normal; font-weight: 500; }
.fab a:hover { background: var(--nuit); color: #FFFFFF; }
.fab a.fab-ct { background: #FFFFFF; color: var(--nuit); }
.fab a.fab-ct:hover { background: var(--nuit); color: #FFFFFF; }
.fab a.fab-tel:first-child { animation: gPulse 2s 4s infinite; }
.fab svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .fab { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--nuit); }
  .fab a { justify-content: center; box-shadow: none; padding: 15px 6px; animation: none !important; font-size: 14px; }
  .fab a i { display: none; }
  .fab a.fab-tel + .fab-tel { background: #E06E05; }
  body { padding-bottom: 52px; }
}

/* ── Visionneuse ──────────────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 150; background: rgba(20,21,24,.95); display: grid; place-items: center; padding: 60px 70px; animation: gFade .3s both; }
.lb img { max-width: 100%; max-height: 84vh; object-fit: contain; animation: gImgIn .4s both; }
.lb-n { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: var(--txt-s); font-size: 14px; letter-spacing: .1em; }
.lb button { position: absolute; width: 48px; height: 48px; background: none; border: 1px solid var(--trait-s2); color: #FFFFFF; font-size: 22px; cursor: pointer; }
.lb button:hover { border-color: var(--or); }
.lb-x { top: 18px; right: 20px; } .lb-p { left: 14px; top: 50%; margin-top: -24px; } .lb-s { right: 14px; top: 50%; margin-top: -24px; }
@media (max-width: 640px) { .lb { padding: 70px 12px; } .lb-p, .lb-s { top: auto; bottom: 12px; margin: 0; } .lb-n { bottom: 26px; } }

/* ── Rails mobiles (règle 01) ─────────────────────────────────────── */
@media (max-width: 760px) {
  [data-rail-mobile] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; background: transparent !important; margin-left: -24px; margin-right: -24px; padding: 0 24px 6px; scroll-padding: 0 24px; scrollbar-width: none; }
  [data-rail-mobile]::-webkit-scrollbar { display: none; }
  [data-rail-mobile] > * { flex: 0 0 82% !important; scroll-snap-align: start; }
  .svc-g[data-rail-mobile] > * { background: var(--nuit2); border-top: 3px solid var(--or); }
  .frise[data-rail-mobile] > li { padding-right: 0; }
  .loc-ap-g { grid-template-columns: 1fr 1fr; gap: 10px; }
  .loc-mini-t { font-size: 17px; left: 12px; bottom: 10px; }
}