/* Heure Bleue Studio — styles communs du site.
   Concept : un ciel fixe derrière les pages, qui passe du crépuscule à la nuit pendant le défilement
   (l'heure bleue), avec le soleil orange qui se couche. Le contenu flotte dessus, en blanc ;
   les blocs denses (services, formulaire) sont posés sur des cartes claires.
   Identité volontairement unique (charte) : pas de variante sombre, toutes les couleurs sont fixées. */
/* polices de la charte, hébergées avec le site */
@font-face{font-family:'Inter Tight'; src:url(assets/fonts/InterTight-var.ttf) format('truetype'); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:'Instrument Serif'; src:url(assets/fonts/InstrumentSerif-Italic.ttf) format('truetype'); font-weight:400; font-style:italic; font-display:swap}
:root{
  --bleu:#002BFF; --orange:#FF4100; --nuit:#0A0F3C; --lavande:#C4CAFF; --brume:#E8EAFF; --papier:#F6F4EE; --blanc:#FFFFFF;
  --verre:rgba(255,255,255,.08); --trait:rgba(255,255,255,.22);
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --r:28px;
  /* couleurs du ciel, mises à jour par site.js selon le défilement */
  --sky-top:#2f52ff; --sky-mid:#5f73ff; --sky-low:#c4caff;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0; background:var(--nuit); color:var(--blanc); font-family:var(--sans); font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--sky-top)}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- le ciel ---------- */
.sky{position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%)}
.sky .glow{position:absolute; left:50%; bottom:-30vh; width:140vw; height:70vh; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(255,140,90,.55), rgba(255,140,90,0)); opacity:var(--glow,1)}
.sky .sun{position:absolute; right:8vw; width:clamp(160px,22vw,340px); aspect-ratio:1; border-radius:50%; background:var(--orange); bottom:var(--sun-y,14vh); box-shadow:0 0 120px 30px rgba(255,65,0,.35)}
.sky .stars{position:absolute; inset:0 0 35% 0; opacity:var(--stars,0); background-image:radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28% 42%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 63% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 77% 9%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 36%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 35% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 54% 48%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 6% 52%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 94% 58%, #fff 50%, transparent 51%)}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- curseur point orange ---------- */
.cursor{position:fixed; left:0; top:0; z-index:100; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--orange); pointer-events:none; transition:width .25s, height .25s, margin .25s, background .25s; mix-blend-mode:normal}
.cursor.big{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,65,0,.25); border:1.5px solid var(--orange)}
@media (pointer:coarse){ .cursor{display:none} }

/* ---------- mise en page ---------- */
.wrap{max-width:1200px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
@media (min-width:700px){ .wrap{padding-left:max(40px, env(safe-area-inset-left,0px)); padding-right:max(40px, env(safe-area-inset-right,0px))} }
section > .wrap{padding-block:clamp(72px,10vw,140px)}
.head-block{display:grid; gap:20px; margin-bottom:clamp(36px,5vw,64px)}

/* typographie de la charte */
.eyebrow{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin:0}
.eyebrow::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--orange); flex:none}
.display{font-size:clamp(54px,10vw,148px); font-weight:500; letter-spacing:-.05em; line-height:.95; margin:0; margin-left:-.055em}
.h2{font-size:clamp(40px,6.2vw,88px); font-weight:500; letter-spacing:-.045em; line-height:1; margin:0; margin-left:-.05em}
.serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.dot{color:var(--orange)}
.lead{font-size:clamp(20px,2.2vw,26px); font-weight:300; line-height:1.4; max-width:38ch; margin:0}
.muted{opacity:.75}
.bigdot{display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--orange); margin-left:.03em}

/* lettres animées au survol (site.js découpe les titres [data-fx]) */
[data-fx] .w{display:inline-block; white-space:nowrap}
[data-fx] .ch{display:inline-block; transform-origin:50% 85%; will-change:transform; transition:transform .25s cubic-bezier(.2,.8,.2,1), font-variation-settings .25s}

/* apparition au défilement : le contenu reste visible, seul un léger glissement est animé */
.rv{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.pre{transform:translateY(40px)}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 28px 2px; border-radius:999px; font:500 17px/1 var(--sans); text-decoration:none; border:1.5px solid currentColor; background:transparent; cursor:pointer; transition:transform .2s ease, background .2s, color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--blanc); color:var(--bleu); border-color:var(--blanc)}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(5px)}
.actions{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- en-tête ---------- */
.site-head{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; transition:background .3s, backdrop-filter .3s}
.site-head.scrolled{background:rgba(10,15,60,.35); backdrop-filter:blur(14px) saturate(1.3)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:80px}
.site-head .logo{display:block; transition:transform .3s}
.site-head .logo:hover{transform:rotate(-6deg) scale(1.06)}
.site-head .logo img{height:38px; width:auto}
.site-nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; font-size:19px; font-weight:500; letter-spacing:-.02em}
.site-nav a{display:block; text-decoration:none; padding:8px 16px 10px; border-radius:999px; transition:background .2s}
.site-nav a .serif{display:inline-block; font-size:1.18em; letter-spacing:-.01em; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.site-nav a:hover{background:rgba(255,255,255,.12)}
.site-nav a:hover .serif{transform:translateY(-3px) rotate(-4deg)}
.site-nav a[aria-current="page"]::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--orange); margin-left:8px; vertical-align:2px}
.burger{display:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--blanc); background:transparent; cursor:pointer; position:relative}
.burger span, .burger span::before, .burger span::after{position:absolute; left:13px; width:18px; height:1.5px; background:var(--blanc); content:""; transition:transform .2s}
.burger span{top:22px}
.burger span::before{left:0; top:-6px}
.burger span::after{left:0; top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.site-nav .rdv a{background:var(--orange); margin-left:10px; padding-inline:20px; transition:background .2s, transform .2s}
.site-nav .rdv a:hover{background:#ff5a24; transform:translateY(-2px)}
@media (max-width:1080px){
  .burger{display:block}
  .site-nav{position:absolute; top:80px; left:0; right:0; background:rgba(10,15,60,.94); backdrop-filter:blur(14px); padding:12px max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px))}
  .site-nav:not(.open){display:none}
  .site-nav ul{flex-direction:column; font-size:26px}
  .site-nav a{padding:12px 0}
  .site-nav .rdv a{display:inline-block; margin:12px 0 0; padding:12px 24px 14px}
}

/* ---------- hero de page ---------- */
.hero{min-height:min(92vh,980px); display:flex; align-items:flex-end}
.hero > .wrap{width:100%; padding-top:140px; padding-bottom:clamp(64px,9vw,120px); display:grid; gap:28px}
.scroll-hint{display:flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.scroll-hint i{width:1.5px; height:44px; background:linear-gradient(var(--blanc), transparent); animation:drip 1.8s infinite}
@media (max-width:600px){
  .sky .sun{width:120px; right:-36px}
  .scroll-hint{display:none}
}
.nw{white-space:nowrap}
@keyframes drip{0%{transform:scaleY(.2); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(.2); transform-origin:bottom}}

/* ---------- accueil : manifeste et liens géants ---------- */
.manifeste-text{font-size:clamp(34px,5.6vw,80px); font-weight:500; letter-spacing:-.045em; line-height:1.06; margin:0; max-width:18ch; margin-left:-.05em}
.biglinks{list-style:none; margin:0; padding:0; border-top:1px solid var(--trait)}
.biglinks li{border-bottom:1px solid var(--trait)}
.biglinks a{display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:20px; padding:clamp(18px,2.6vw,30px) 0; text-decoration:none; position:relative}
.biglinks .n{font-size:14px; font-weight:600; letter-spacing:.12em; opacity:.6}
.biglinks .t{font-size:clamp(44px,7.4vw,112px); font-weight:500; letter-spacing:-.05em; line-height:1; transition:transform .5s cubic-bezier(.2,.8,.2,1), letter-spacing .5s}
.biglinks .t .serif{display:inline-block; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.biglinks .d{font-size:16px; opacity:0; transform:translateX(-12px); transition:opacity .35s, transform .35s; max-width:26ch; text-align:right}
.biglinks a:hover .t{transform:translateX(24px); letter-spacing:-.035em}
.biglinks a:hover .t .serif{transform:translateY(-6px) rotate(-3deg)}
.biglinks a:hover .d{opacity:.85; transform:none}
@media (max-width:1000px){ .biglinks a{grid-template-columns:56px 1fr} .biglinks .d{display:none} }
@media (max-width:760px){ .biglinks a{grid-template-columns:44px 1fr} .biglinks .t{font-size:clamp(34px,10vw,56px)} }

/* ---------- chiffres ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.kpis div{border-top:1.5px solid var(--trait); padding-top:24px}
.kpis b{display:block; font-size:clamp(52px,7vw,112px); font-weight:500; letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpis sup{font-size:.42em; vertical-align:1em; color:var(--orange); margin-right:4px}
.kpis div > span{display:block; margin-top:12px; font-size:17px; opacity:.8}
@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px} }

/* ---------- le studio : valeurs (onglets) ---------- */
.values{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.value-tab{all:unset; cursor:pointer; border-top:1.5px solid var(--trait); padding:22px 4px 8px; display:grid; gap:6px; transition:border-color .2s}
.value-tab .n{font-size:13px; font-weight:600; letter-spacing:.12em; opacity:.6}
.value-tab b{font-size:clamp(28px,3vw,42px); font-weight:500; letter-spacing:-.03em; line-height:50px; opacity:.45; transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); transform-origin:left bottom}
.value-tab b .serif{font-size:1.1em}
.value-tab[aria-selected="true"]{border-top-color:var(--orange); box-shadow:0 -1.5px 0 var(--orange)}
.value-tab[aria-selected="true"] b{opacity:1}
.value-tab:hover b{opacity:1; transform:scale(1.08)}
.value-tab:focus-visible{outline:3px solid var(--orange)}
.value-panel{margin-top:28px; background:var(--blanc); color:var(--nuit); border-radius:var(--r); padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); align-items:center}
.value-panel .big{font-size:clamp(64px,9vw,140px); line-height:.9; font-weight:500; letter-spacing:-.05em; color:var(--bleu)}
.value-panel p{margin:0; font-size:clamp(20px,2.2vw,28px); font-weight:300; line-height:1.4; max-width:30ch}
@media (max-width:700px){ .values{grid-template-columns:repeat(2,minmax(0,1fr))} .value-panel{grid-template-columns:1fr} }

/* le studio : équipe */
.team{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.member{margin:0; display:flex; flex-direction:column}
.member .ph{aspect-ratio:4/4.6; border-radius:var(--r); overflow:hidden; position:relative; background:var(--nuit)}
.member .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.member:hover .ph img{transform:scale(1.06)}
.member .bio{position:absolute; inset:auto 0 0 0; padding:24px; background:linear-gradient(transparent, rgba(10,15,60,.92)); font-size:16px; transform:translateY(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.member:hover .bio, .member:focus-within .bio{transform:none}
.member h3{font-size:34px; font-weight:500; letter-spacing:-.025em; margin:22px 0 6px}
.member h3 .serif{font-size:1.08em}
.member .role{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.member .more{display:none}
@media (max-width:820px){ .team{grid-template-columns:1fr; max-width:520px} }
@media (pointer:coarse){ .member .bio{display:none} .member .more{display:block; margin:10px 0 0; font-size:16px; opacity:.85} }

/* ---------- services : méthode (étapes cliquables) ---------- */
.steps{--g:clamp(12px,3vw,40px); --pt:60px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--g); position:relative; list-style:none; margin:0; padding:0}
.steps::before{content:""; position:absolute; left:calc(var(--pt) / 2); right:calc((100% - 3 * var(--g)) / 4 - var(--pt) / 2); top:calc(var(--pt) / 2 - 1px); height:2px; background:var(--trait)}
.step{all:unset; cursor:pointer; display:block; position:relative}
.step .pt{width:60px; height:60px; border-radius:50%; border:2px solid var(--blanc); background:var(--nuit); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:17px; letter-spacing:.04em; transition:background .25s, box-shadow .25s, border-color .25s, transform .25s}
.step b{display:block; font-size:clamp(24px,2.8vw,38px); font-weight:500; letter-spacing:-.03em; margin:28px 0 4px; line-height:44px; transition:transform .35s cubic-bezier(.2,.8,.2,1); transform-origin:left bottom}
.step .when{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.step:hover .pt{transform:scale(1.1)}
.step:hover b{transform:scale(1.06)}
.step[aria-selected="true"] .pt{background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 12px rgba(255,65,0,.2)}
.step-panel{margin-top:36px; background:var(--blanc); color:var(--nuit); border-radius:var(--r); padding:clamp(24px,3.5vw,40px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start}
.step-panel p{margin:0; font-size:clamp(19px,2vw,24px); font-weight:300; line-height:1.4}
.step-panel ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.step-panel li{height:40px; display:inline-flex; align-items:center; padding:0 16px 2px; border-radius:999px; background:var(--brume); color:var(--bleu); font-size:15px; font-weight:500}
@media (max-width:760px){
  .steps{--g:8px; --pt:48px}
  .step b{font-size:clamp(13px,3.9vw,17px); line-height:22px; margin-top:16px; letter-spacing:-.02em}
  .step .when{font-size:11px}
  .step .pt{width:48px; height:48px; font-size:15px}
  .step-panel{grid-template-columns:1fr}
}

/* services : accompagnement (filtre + accordéon) */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.chip{height:44px; padding:0 20px 2px; border-radius:999px; border:1.5px solid var(--blanc); background:transparent; font-size:15px; font-weight:500; cursor:pointer; transition:background .15s, color .15s}
.chip[aria-pressed="true"]{background:var(--blanc); color:var(--bleu)}
.svc-list{display:grid; gap:12px}
.svc{background:var(--blanc); color:var(--nuit); border-radius:22px; overflow:hidden; transition:opacity .3s, transform .3s}
.svc.dim{opacity:.3; transform:scale(.985)}
.svc summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:24px clamp(20px,3vw,32px)}
.svc summary::-webkit-details-marker{display:none}
.svc .ic{width:46px; height:46px; border-radius:50%; background:var(--brume); color:var(--bleu); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; transition:transform .3s}
.svc h3{margin:0; font-size:clamp(22px,2.6vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.15; transition:transform .35s cubic-bezier(.2,.8,.2,1); transform-origin:left center}
.svc summary:hover h3{transform:translateX(8px)}
.svc summary:hover .ic{transform:rotate(-90deg)}
.svc .phases{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.svc .phases span{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--bleu); background:var(--brume); border-radius:999px; padding:5px 10px}
.svc .body{padding:0 clamp(20px,3vw,32px) 28px calc(clamp(20px,3vw,32px) + 66px); font-size:18px; max-width:64ch}
.svc .body p{margin:0; opacity:.85}
.svc[open]{background:var(--bleu); color:var(--blanc)}
.svc[open] .ic{background:var(--orange); color:var(--blanc)}
.svc[open] .phases span{background:rgba(255,255,255,.15); color:var(--blanc)}
@media (max-width:640px){ .svc summary{grid-template-columns:auto minmax(0,1fr)} .svc .phases{grid-column:2; justify-content:flex-start} .svc .body{padding-left:clamp(20px,3vw,32px)} }

/* services : activations et réseau */
.activations{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.act{all:unset; cursor:pointer; border-radius:22px; padding:26px 24px; background:var(--verre); border:1px solid var(--trait); display:grid; gap:10px; align-content:start; min-height:150px; transition:background .25s, color .25s, transform .25s}
.act .k{font-size:13px; font-weight:600; letter-spacing:.14em; opacity:.7}
.act b{font-size:clamp(22px,2.2vw,30px); font-weight:500; letter-spacing:-.02em; line-height:1.1}
.act:hover{transform:translateY(-4px); background:rgba(255,255,255,.16)}
.act[aria-selected="true"]{background:var(--blanc); color:var(--bleu); border-color:var(--blanc)}
.act:focus-visible{outline:3px solid var(--orange)}
.act-panel{margin-top:16px; border-radius:22px; background:var(--blanc); color:var(--nuit); padding:clamp(24px,3.5vw,40px); font-size:clamp(19px,2vw,24px); font-weight:300; line-height:1.4}
@media (max-width:820px){ .activations{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pills span{height:48px; display:inline-flex; align-items:center; gap:10px; padding:0 22px 2px; border-radius:999px; border:1.5px solid var(--trait); font-size:17px; font-weight:500; transition:background .2s, color .2s, border-color .2s, transform .2s}
.pills span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange)}
.pills span:hover{background:var(--blanc); color:var(--bleu); border-color:var(--blanc); transform:translateY(-3px)}

/* ---------- références ---------- */
.etherea{display:grid; grid-template-columns:7fr 5fr; gap:clamp(28px,5vw,72px); align-items:end}
.etherea .card{background:var(--verre); border:1px solid var(--trait); border-radius:var(--r); padding:32px}
.etherea .card h4{margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
@media (max-width:900px){ .etherea{grid-template-columns:1fr} }
.events{list-style:none; margin:0; padding:0; border-top:1px solid var(--trait)}
.ev{border-bottom:1px solid var(--trait); position:relative}
.ev button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:60px minmax(0,1.3fr) minmax(0,1fr) 120px; align-items:center; gap:20px; padding:24px 12px; border-radius:18px; transition:background .3s, color .3s}
.ev .n{font-size:13px; font-weight:600; letter-spacing:.12em; opacity:.6}
.ev .t{font-size:clamp(24px,3vw,40px); font-weight:500; letter-spacing:-.03em; line-height:1.1; transition:transform .4s cubic-bezier(.2,.8,.2,1); transform-origin:left center}
.ev .l{font-size:17px; opacity:.8}
.ev .p{text-align:right; font-variant-numeric:tabular-nums; font-size:17px}
.ev .bar{grid-column:2 / -1; height:4px; border-radius:4px; background:var(--trait); overflow:hidden; display:none}
.ev .bar i{display:block; height:100%; width:var(--w); background:var(--orange); border-radius:4px; transform-origin:left; transform:scaleX(0); transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ev button:hover, .ev button[aria-expanded="true"]{background:var(--blanc); color:var(--nuit)}
.ev button:hover .t, .ev button[aria-expanded="true"] .t{transform:scale(1.06)}
.ev button:hover .bar, .ev button[aria-expanded="true"] .bar{display:block}
.ev button:hover .bar i, .ev button[aria-expanded="true"] .bar i{transform:scaleX(1)}
.ev .bar{background:var(--brume)}
@media (max-width:720px){
  .ev button{grid-template-columns:40px minmax(0,1fr) auto; gap:4px 12px}
  .ev .t{font-size:22px}
  .ev .l{grid-column:2 / -1; font-size:15px}
  .ev .p{grid-row:1; grid-column:3; font-size:15px}
}

/* ---------- contact : composeur de projet ---------- */
.brief{display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:900px){ .brief{grid-template-columns:1fr} }
.form{background:var(--blanc); color:var(--nuit); border-radius:var(--r); padding:clamp(24px,3.5vw,40px); display:grid; gap:30px}
.field{display:grid; gap:12px; border:0; padding:0; margin:0; min-width:0}
.field > legend, .field > label{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bleu); padding:0}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts label{height:44px; display:inline-flex; align-items:center; padding:0 18px 2px; border-radius:999px; border:1.5px solid rgba(10,15,60,.18); font-size:15px; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s}
.opts label:hover{border-color:var(--bleu); transform:translateY(-2px)}
.opts input:checked + label{background:var(--bleu); border-color:var(--bleu); color:var(--blanc)}
.opts input:focus-visible + label{outline:3px solid var(--orange); outline-offset:2px}
.range-row{display:flex; align-items:center; gap:18px}
.range-row output{min-width:110px; font-size:30px; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
input[type=range]{flex:1; min-width:0; accent-color:var(--bleu); height:28px}
.txt{width:100%; font:inherit; font-size:17px; padding:14px 16px; border-radius:14px; border:1.5px solid rgba(10,15,60,.15); background:var(--papier); color:var(--nuit)}
.txt:focus{outline:none; border-color:var(--bleu)}
textarea.txt{min-height:120px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .two{grid-template-columns:1fr} }
.form .send{background:var(--bleu); color:var(--blanc); border-color:var(--bleu); justify-self:start}
.summary{position:sticky; top:104px; background:var(--verre); border:1px solid var(--trait); backdrop-filter:blur(10px); border-radius:var(--r); padding:clamp(24px,3.5vw,40px); display:grid; gap:18px}
.summary .says{font-size:clamp(26px,2.8vw,38px); font-weight:500; letter-spacing:-.03em; line-height:1.15; margin:0}
.summary .says em{font-family:var(--serif); font-weight:400}
.summary .mail{font-size:18px; font-weight:500; background:var(--blanc); color:var(--bleu); border-radius:999px; padding:12px 22px 14px; justify-self:start; user-select:all; overflow-wrap:anywhere}
.form-msg{border-radius:16px; background:var(--brume); color:var(--nuit); padding:16px 18px; font-size:16px; margin:0}

/* contact : deux chemins, une question ou un devis */
.choice{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px}
.pick{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; gap:8px; padding:clamp(24px,3vw,36px); border-radius:var(--r); background:var(--verre); border:1.5px solid var(--trait); transition:background .3s, color .3s, transform .3s, border-color .3s}
.pick .k{font-size:13px; font-weight:600; letter-spacing:.14em; opacity:.6}
.pick b{font-size:clamp(40px,5.4vw,76px); font-weight:500; letter-spacing:-.045em; line-height:1; transition:transform .45s cubic-bezier(.2,.8,.2,1); transform-origin:left bottom}
.pick b .serif{display:inline-block; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pick .d{font-size:17px; opacity:.8}
.pick .arrow{position:absolute; right:clamp(24px,3vw,36px); top:clamp(24px,3vw,36px); font-size:28px; color:var(--orange); transition:transform .3s}
.pick:hover{transform:translateY(-4px); background:rgba(255,255,255,.14)}
.pick:hover b{transform:scale(1.04)}
.pick:hover b .serif{transform:translateY(-5px) rotate(-4deg)}
.pick:hover .arrow{transform:translateX(6px)}
.pick[aria-pressed="true"]{background:var(--blanc); color:var(--bleu); border-color:var(--blanc)}
.pick:focus-visible{outline:3px solid var(--orange)}
@media (max-width:640px){ .choice{grid-template-columns:1fr} }
.contact .forms{display:grid}
.pick-hint{margin:0; padding:clamp(24px,3.5vw,40px); border:1.5px dashed var(--trait); border-radius:var(--r); font-size:19px; opacity:.85}
.contact:not([data-mode=""]) .pick-hint{display:none}
.contact:not([data-mode="devis"]) .says-block{display:none}
.form[hidden]{display:none}
.form-t{margin:0; font-size:clamp(32px,3.6vw,48px); font-weight:500; letter-spacing:-.04em; line-height:1}
.field > legend small{font-size:12px; letter-spacing:.06em; text-transform:none; font-weight:500; opacity:.7}
.check{display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; font-size:15px; line-height:1.45; cursor:pointer}
.check input{appearance:none; width:24px; height:24px; margin:0; border-radius:7px; border:1.5px solid rgba(10,15,60,.3); background:var(--papier); display:grid; place-content:center; cursor:pointer; transition:background .15s, border-color .15s}
.check input::after{content:""; width:12px; height:7px; border:2.5px solid var(--blanc); border-top:0; border-right:0; transform:translateY(-2px) rotate(-45deg) scale(0); transition:transform .15s}
.check input:checked{background:var(--bleu); border-color:var(--bleu)}
.check input:checked::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.check em{font-style:normal; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bleu); margin-left:6px}
.fine{margin:0; font-size:13.5px; line-height:1.5; opacity:.7}
.fine a, .form-msg a{color:var(--bleu)}
.form-msg.ok{background:var(--bleu); color:var(--blanc)}
.form .send:disabled{opacity:.5; cursor:wait}
.summary .side-block{display:grid; gap:12px; border-top:1px solid var(--trait); padding-top:20px}
.summary .side-block:first-child, .contact:not([data-mode="devis"]) .says-block + .side-block{border-top:0; padding-top:0}
.summary .side-t{margin:0; font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-.03em; line-height:1.15}
.summary .btn.solid{height:52px; font-size:16px}
.side-link{font-size:22px; font-weight:500; letter-spacing:-.02em; text-decoration:none}
.side-link .arrow{display:inline-block; color:var(--orange); transition:transform .3s}
.side-link:hover .arrow{transform:translateX(8px)}

/* prestataires */
.how{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.how li{border-top:1.5px solid var(--trait); padding-top:24px; display:grid; gap:10px; align-content:start}
.how .k{font-size:13px; font-weight:600; letter-spacing:.14em; opacity:.6}
.how b{font-size:clamp(26px,2.8vw,38px); font-weight:500; letter-spacing:-.03em; line-height:1.1}
.how p{margin:0; font-size:17px; opacity:.8; max-width:30ch}
@media (max-width:760px){ .how{grid-template-columns:1fr; gap:28px} }
#presta{max-width:860px}

/* mentions légales */
.legal-doc{background:var(--blanc); color:var(--nuit); border-radius:var(--r); padding:clamp(24px,4.5vw,64px); max-width:920px; font-size:17px; line-height:1.6}
.legal-doc h2{font-size:clamp(28px,3vw,40px); font-weight:500; letter-spacing:-.035em; line-height:1.1; margin:48px 0 16px; scroll-margin-top:110px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h2::after{content:"."; color:var(--orange)}
.legal-doc p{margin:0 0 14px; max-width:68ch}
.legal-doc a{color:var(--bleu)}
.legal-doc mark{background:var(--brume); color:var(--bleu); border-radius:6px; padding:1px 6px}
.legal-table{display:grid; margin:8px 0 22px; border-top:1px solid rgba(10,15,60,.12); font-size:15px}
.legal-table > div{display:grid; grid-template-columns:1.1fr 1.6fr 1.1fr 1.4fr; gap:16px; padding:14px 0; border-bottom:1px solid rgba(10,15,60,.12)}
.legal-table .th{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--bleu)}
@media (max-width:700px){ .legal-table > div{grid-template-columns:1fr 1fr; gap:6px 16px} .legal-table .th{display:none} }

/* bandeau cookies : accepter et refuser ont le même poids */
.cookies{position:fixed; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:80; width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:var(--blanc); color:var(--nuit); border-radius:24px; padding:24px; display:grid; gap:14px; box-shadow:0 24px 60px -16px rgba(10,15,60,.6)}
.cookies[hidden]{display:none}
.cookies p{margin:0; font-size:15px; line-height:1.5}
.cookies a{color:var(--bleu)}
.cookies .ck-t{font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1}
.ck-opts{display:grid; border-top:1px solid rgba(10,15,60,.12)}
.ck-opts[hidden]{display:none}
.ck-row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(10,15,60,.12); font-size:14px; line-height:1.4; cursor:pointer}
.ck-row b{display:block; font-size:15px}
.ck-row input{appearance:none; width:44px; height:26px; margin:0; border-radius:999px; background:rgba(10,15,60,.18); position:relative; cursor:pointer; transition:background .2s}
.ck-row input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--blanc); transition:transform .2s}
.ck-row input:checked{background:var(--bleu)}
.ck-row input:checked::after{transform:translateX(18px)}
.ck-row input:disabled{opacity:.5; cursor:default}
.ck-actions{display:grid; grid-template-columns:repeat(3,auto); gap:8px}
.ck-btn{height:44px; padding:0 14px 2px; border-radius:999px; border:1.5px solid var(--bleu); background:var(--bleu); color:var(--blanc); font-size:14px; font-weight:500; cursor:pointer; transition:transform .2s}
.ck-btn[data-ck="custom"]{background:transparent; color:var(--bleu)}
.ck-btn:hover{transform:translateY(-2px)}
@media (max-width:440px){ .ck-actions{grid-template-columns:1fr 1fr} .ck-btn[data-ck="custom"]{grid-column:1 / -1; grid-row:2} }
.linkish{all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkish:focus-visible{outline:3px solid var(--orange)}
.site-foot .legal a{color:inherit}

/* ---------- pied de page ---------- */
.site-foot{border-top:1px solid var(--trait)}
.site-foot .wrap{display:grid; grid-template-columns:1fr auto; gap:28px 40px; align-items:end; padding-block:56px 40px}
.site-foot .ask{font-size:clamp(34px,5vw,64px); font-weight:500; letter-spacing:-.045em; line-height:1; text-decoration:none; margin-left:-.05em}
.site-foot .ask .arrow{display:inline-block; color:var(--orange); transition:transform .3s}
.site-foot .ask:hover .arrow{transform:translateX(12px)}
.site-foot nav ul{display:flex; flex-wrap:wrap; gap:6px 22px; list-style:none; margin:0; padding:0; font-size:15px}
.site-foot nav a{text-decoration:none; opacity:.75}
.site-foot nav a:hover{opacity:1}
.site-foot .legal{grid-column:1 / -1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:14px; opacity:.6; border-top:1px solid var(--trait); padding-top:24px}
@media (max-width:1000px){ .site-foot .wrap{grid-template-columns:1fr} }

/* rappel « maquette » */
.note{position:fixed; left:max(16px, env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:70; background:var(--blanc); color:var(--nuit); font-size:13px; padding:10px 16px; border-radius:999px; display:flex; gap:10px; align-items:center; box-shadow:0 10px 30px -10px rgba(10,15,60,.5)}
.note::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange)}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition:none!important; animation:none!important}
  .rv.pre{transform:none}
}