/* L'Antoine — feuille de style du site
   Les animations sont volontairement jouées pour tout le monde : aucune règle
   ne les coupe quand le système demande de « réduire les animations ». */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --nuit:#0B0B0C; --suie:#111113; --os:#EEEAE2; --clair:#CFCAC0; --gris:#8A867E; --trait:rgba(238,234,226,.16); --feu:#FF4B1F;
  --gro:'Bricolage Grotesque',system-ui,sans-serif; --ser:'Instrument Serif',Georgia,serif;
  --doux:cubic-bezier(.16,1,.3,1); --m:clamp(1.1rem,3.2vw,3rem);
}
html{background:var(--nuit);color:var(--os);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--gro);font-size:1.05rem;line-height:1.5;overflow-x:clip}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--feu);color:var(--nuit)}
em{font-family:var(--ser);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
:focus-visible{outline:2px solid var(--feu);outline-offset:3px}

/* ── Curseur ── */
#cur,#apercu{display:none}
@media (hover:hover) and (pointer:fine){
  html.js,html.js *{cursor:none!important}
  html.js input,html.js textarea,html.js select{cursor:text!important}
  html.js select,html.js input[type=radio]{cursor:pointer!important}
  html.js #cur{display:grid;position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--os);mix-blend-mode:difference;place-items:center;font-size:0;font-weight:700;color:var(--nuit);transition:width .45s var(--doux),height .45s var(--doux),margin .45s var(--doux),font-size .3s,background .3s,opacity .25s}
  html.js #cur.lien{width:56px;height:56px;margin:-28px 0 0 -28px}
  html.js #cur.voir{width:104px;height:104px;margin:-52px 0 0 -52px;font-size:.8rem;letter-spacing:.08em;background:var(--feu);mix-blend-mode:normal}
  html.js #cur.cache{opacity:0}
  html.js #apercu{display:block;position:fixed;left:0;top:0;z-index:40;width:min(34vw,470px);aspect-ratio:16/10;pointer-events:none;border-radius:8px;overflow:hidden;opacity:0;scale:.7;transition:opacity .35s,scale .5s var(--doux);box-shadow:0 30px 80px rgba(0,0,0,.6)}
  html.js #apercu.on{opacity:1;scale:1}
  #apercu>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .3s}
  #apercu>.on{opacity:1}
}
.prive{display:grid;place-items:center;text-align:center;font-weight:800;font-size:2.4rem;letter-spacing:-.04em;text-transform:uppercase;line-height:.9;color:var(--nuit);background:#7A5BB5}

/* ── En-tête ── */
.entete{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.2rem var(--m);transition:background .5s,padding .5s var(--doux),box-shadow .5s}
.entete.pose{background:rgba(11,11,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:.85rem;box-shadow:0 1px 0 var(--trait)}
.entete .logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.entete nav{display:flex;gap:2rem;font-size:.92rem}
.entete nav a{position:relative}
.entete nav a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--doux)}
.entete nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Hero ── */
.hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:6.5rem var(--m) 2rem;position:relative}
.hero h1{align-self:center;font-weight:800;font-size:clamp(3.4rem,min(13.6vw,27svh),15rem);line-height:.84;letter-spacing:-.055em;text-transform:uppercase}
.hero h1 em{text-transform:none;color:var(--feu);font-size:1.06em;letter-spacing:-.03em}
.ligne{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ligne>span{display:block;transform:translateY(105%);animation:lever 1.2s var(--doux) forwards;animation-delay:calc(.15s + var(--i)*.12s)}
.ligne:nth-child(2){padding-left:14vw}
@keyframes lever{to{transform:none}}
.bas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:end;border-top:1px solid var(--trait);padding-top:1.4rem}
.bas p{max-width:30rem;color:var(--clair)}
.bas .droite{justify-self:end;text-align:right}
.pastille{position:absolute;right:var(--m);top:22%;width:clamp(110px,13vw,180px);aspect-ratio:1;display:grid;place-items:center}
.pastille svg{position:absolute;inset:0;animation:tour 16s linear infinite}
.pastille text{font-size:9.6px;letter-spacing:.2em;text-transform:uppercase;fill:var(--os);font-family:var(--gro)}
.pastille b{width:46%;aspect-ratio:1;border-radius:50%;background:var(--feu);display:grid;place-items:center;color:var(--nuit);font-size:1.6rem;transition:transform .6s var(--doux)}
.pastille:hover b{transform:scale(1.18) rotate(45deg)}
@keyframes tour{to{transform:rotate(360deg)}}

/* ── Bande défilante ── */
.bande{border-block:1px solid var(--trait);overflow:hidden;padding:1.1rem 0;white-space:nowrap}
.bande div{display:inline-block;animation:defile 36s linear infinite;font-weight:700;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.03em;text-transform:uppercase}
.bande span{margin:0 1.2rem} .bande i{font-family:var(--ser);font-style:italic;font-weight:400;text-transform:none;color:var(--feu)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ── Sections ── */
section{padding:clamp(5rem,11vw,10rem) var(--m)}
.tete{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,5vw,4rem)}
.tete h2{font-weight:800;font-size:clamp(2.6rem,8.5vw,8rem);line-height:.88;letter-spacing:-.05em;text-transform:uppercase}
.tete h2 em{text-transform:none;color:var(--feu)}
.tete p{max-width:22rem;color:var(--gris)}
.tete .mono{display:block;margin-bottom:1rem;font-weight:400;line-height:1.5;letter-spacing:.06em}

/* ── Réalisations : index ── */
.index a{display:grid;grid-template-columns:3.5rem 1fr 18rem 4rem;gap:1.5rem;align-items:center;padding:1.5rem 0;border-top:1px solid var(--trait);position:relative;transition:opacity .4s,padding .6s var(--doux)}
.index a:last-child{border-bottom:1px solid var(--trait)}
.index .n{color:var(--gris);font-size:.85rem}
.index h3{font-weight:700;font-size:clamp(2.2rem,6.4vw,6rem);line-height:.95;letter-spacing:-.045em;transition:transform .7s var(--doux)}
.index .d{font-size:.95rem;color:var(--clair)} .index .d small{display:block;color:var(--gris);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.index .f{justify-self:end;font-size:1.6rem;transition:transform .6s var(--doux)}
.index .vignette{display:none}
@media (hover:hover){
  .index:hover a{opacity:.28} .index a:hover{opacity:1;padding-left:1.2rem}
  .index a:hover h3{transform:translateX(.6rem)} .index a:hover .f{transform:rotate(-45deg);color:var(--feu)}
}

/* ── Services : des dossiers qui se rangent ──
   Chaque dossier reste collé sous le précédent (position: sticky) : en descendant,
   le suivant glisse par-dessus, et celui d'avant recule dans la pile. Le défilement
   reste celui du navigateur, rien n'est bloqué. --p (rangé) et --q (en approche)
   sont mis à jour par site.js. */
.pile{--onglet:2.9rem;--pas:1.05rem;padding-bottom:14svh}
#services{padding-bottom:1rem}
.dossier{position:sticky;top:calc(4.6rem + var(--onglet) + var(--i)*var(--pas));margin-top:calc(var(--onglet) + 2.2rem);--p:0;--q:0;--sens:1}
.dossier:first-child{margin-top:var(--onglet)}
.dossier:nth-child(even){--sens:-1}
.dossier .int{transform-origin:50% 0;transform:translateY(calc(var(--q)*2.4rem)) rotate(calc(var(--q)*var(--sens)*2.2deg)) scale(calc(1 - var(--p)*.045));filter:brightness(calc(1 - var(--p)*.3));will-change:transform}
.onglet{position:absolute;bottom:calc(100% - 1px);left:calc(var(--i)*100%/6);width:calc(100%/6);height:var(--onglet);background:var(--c);color:var(--nuit);clip-path:polygon(0 100%,0 26%,7% 0,82% 0,100% 100%);display:flex;align-items:center;gap:.5rem;padding:0 2.1rem 0 1.15rem;font-weight:700;font-size:.86rem;letter-spacing:-.01em;white-space:nowrap}
.onglet b{font-weight:500;opacity:.55}
.onglet i{font-style:normal;margin-left:auto;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--doux)}
.dossier.range .onglet i{opacity:1;transform:none}
.chemise{background:var(--c);color:var(--nuit);border-radius:14px;min-height:clamp(21rem,56svh,32rem);padding:clamp(1.4rem,3vw,2.8rem);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,4rem);box-shadow:0 -18px 40px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.chemise .mono{color:rgba(11,11,12,.55)}
.chemise h3{font-weight:800;font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:.9;letter-spacing:-.05em;margin:.7rem 0 .6rem}
.chemise h3+em{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.15;display:block}
.chemise .contenu{align-self:end;display:grid;gap:1.1rem;opacity:calc(1 - var(--p)*.7)}
.chemise .contenu p{font-size:1.08rem;max-width:30rem}
.chemise ul{list-style:none;display:grid;gap:.4rem;font-weight:500}
.chemise li{display:flex;gap:.7rem;align-items:baseline;padding-top:.4rem;border-top:1px solid rgba(11,11,12,.16)}
.chemise li::before{content:'→'}
.chemise .aller{justify-self:start;font-weight:700;border-bottom:2px solid currentColor;padding-bottom:.1rem}
.dossier:nth-child(1){--c:#EEEAE2}.dossier:nth-child(2){--c:#E3DAC8}.dossier:nth-child(3){--c:#D8CBB0}
.dossier:nth-child(4){--c:#CCBB98}.dossier:nth-child(5){--c:#BFAA80}.dossier:nth-child(6){--c:var(--feu)}

/* ── Approche : quatre marches, tout est visible d'emblée ── */
.marches{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.4rem);align-items:start}
.marches li{margin-top:calc((3 - var(--i))*clamp(1.6rem,3.4vw,3.4rem));position:relative;border-radius:14px;border:1px solid var(--trait);background:var(--suie);padding:clamp(1.2rem,2vw,1.9rem);min-height:clamp(19rem,30vw,25rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .5s var(--doux),color .5s var(--doux),translate .6s var(--doux)}
.marches li::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:var(--feu);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--doux) calc(.35s + var(--i)*.16s)}
.marches li.vu::before{transform:scaleX(1)}
.marches li:hover{background:var(--os);color:var(--nuit);translate:0 -8px}
.marches .gros{font-weight:800;font-size:clamp(4rem,8.4vw,8rem);line-height:.8;letter-spacing:-.06em}
.marches h3{font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.04em;line-height:1;margin-bottom:.6rem}
.marches p{opacity:.75;font-size:.98rem}
.apres{margin-top:clamp(2rem,4vw,3.5rem);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;border-radius:14px;background:var(--feu);color:var(--nuit);padding:clamp(1.2rem,2.4vw,2rem) clamp(1.2rem,3vw,2.6rem);font-weight:800;font-size:clamp(1.6rem,4vw,3.4rem);letter-spacing:-.045em;text-transform:uppercase;line-height:1}
.apres em{text-transform:none}
.apres a{font-size:1rem;letter-spacing:0;text-transform:none;font-weight:700;border-bottom:2px solid currentColor}
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,3rem);margin-top:clamp(2rem,4vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--trait)}
.valeurs h4{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:.3rem}
.valeurs p{color:var(--gris);font-size:.98rem}

/* ── Contact ── */
.contact{padding-bottom:3rem}
.contact h2{font-weight:800;font-size:clamp(3.6rem,17.5vw,19rem);line-height:.82;letter-spacing:-.06em;text-transform:uppercase}
.contact h2 em{text-transform:none;color:var(--feu)}
.echange{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(2rem,6vw,6rem);margin-top:clamp(2rem,5vw,4rem);padding-top:1.8rem;border-top:1px solid var(--trait)}
.echange .mots p{color:var(--clair);max-width:24rem;font-size:1.12rem}
.echange .mots .mono{display:block;margin-top:2rem}
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
.champ{display:grid;gap:.35rem} .champ.large{grid-column:1/-1}
.champ label,.champ legend{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.champ input,.champ textarea,.champ select{font:inherit;font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--os);background:transparent;border:0;border-bottom:1px solid var(--trait);border-radius:0;padding:.5rem 0 .7rem;width:100%;outline:0;transition:border-color .3s}
.champ textarea{min-height:7.5rem;resize:vertical}
.champ select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EEEAE2' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .2rem center/1rem}
.champ select option{background:var(--suie);color:var(--os)}
.champ input::placeholder,.champ textarea::placeholder{color:#5C5953}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--feu)}
.champ.erreur input,.champ.erreur textarea{border-color:var(--feu)}
.champ .err{min-height:1.1em;font-size:.82rem;color:var(--feu)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.plus{grid-column:1/-1;justify-self:start;font-size:.92rem;font-weight:700;color:var(--clair);display:flex;gap:.6rem;align-items:center}
.plus::before{content:'+';display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--trait);transition:transform .5s var(--doux),background .3s,color .3s}
.plus[aria-expanded=true]::before{transform:rotate(45deg);background:var(--os);color:var(--nuit)}
.details{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem;overflow:hidden;max-height:0;opacity:0;transition:max-height .7s var(--doux),opacity .5s}
.details.ouvert{max-height:40rem;opacity:1}
fieldset.champ{border:0}
.budgets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.budgets label{letter-spacing:0;text-transform:none;font-size:.95rem;font-weight:500;color:var(--os)}
.budgets input{position:absolute;opacity:0;width:0}
.budgets span{display:block;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--trait);transition:background .3s,color .3s,border-color .3s}
.budgets input:checked+span{background:var(--os);color:var(--nuit);border-color:var(--os)}
.budgets input:focus-visible+span{outline:2px solid var(--feu);outline-offset:3px}
.envoi{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.bouton{display:inline-flex;align-items:center;gap:1rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;padding:1.05rem 1.2rem 1.05rem 1.8rem;border-radius:100px;background:var(--feu);color:var(--nuit);transition:transform .5s var(--doux),background .3s}
.bouton b{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--nuit);color:var(--os);transition:transform .6s var(--doux)}
.bouton:hover{transform:translateY(-3px);background:var(--os)} .bouton:hover b{transform:rotate(-45deg)}
.bouton[disabled]{opacity:.5;pointer-events:none}
.envoi small{color:var(--gris);font-size:.82rem;max-width:22rem}
.retour{grid-column:1/-1;border-radius:14px;padding:1.1rem 1.3rem;font-weight:500}
.retour.ok{background:var(--os);color:var(--nuit)} .retour.ko{border:1px solid var(--feu);color:var(--feu)}
.retour[hidden]{display:none}

/* ── Pied de page ── */
.pied{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:1.4rem var(--m);color:var(--gris);font-size:.82rem;border-top:1px solid var(--trait)}
.pied nav{display:flex;gap:1.4rem;flex-wrap:wrap} .pied a:hover{color:var(--os)}

/* ── Apparitions au défilement (uniquement si le script tourne) ── */
.js .app{opacity:0;transform:translateY(40px);transition:opacity 1s var(--doux),transform 1s var(--doux);transition-delay:calc(var(--d,0)*1s)}
.js .app.vu{opacity:1;transform:none}

/* ── Pages légales ── */
.legal{max-width:48rem;margin:0 auto;padding:clamp(8rem,14vw,11rem) var(--m) clamp(4rem,8vw,7rem)}
.legal h1{font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:.8rem 0 .6rem}
.legal h1 em{text-transform:none;color:var(--feu)}
.legal h2{font-weight:700;font-size:1.5rem;letter-spacing:-.03em;margin:2.6rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--trait)}
.legal p,.legal li{color:var(--clair);margin-bottom:.7rem}
.legal ul{padding-left:1.2rem}
.legal a{color:var(--os);border-bottom:1px solid var(--feu)}

@media (max-width:900px){
  .entete nav{display:none}
  .bas{grid-template-columns:1fr} .bas .droite{justify-self:start;text-align:left}
  .pastille{top:auto;bottom:38%}
  .tete{flex-direction:column;align-items:flex-start}
  .index a{grid-template-columns:2rem 1fr 2rem;gap:.8rem} .index .d{grid-column:2;grid-row:2}
  .index .vignette{display:block;grid-column:1/-1;border-radius:8px;overflow:hidden;aspect-ratio:16/10;margin-top:.6rem} .index .vignette img{width:100%;height:100%;object-fit:cover;object-position:top}
  .pile{--onglet:2.5rem;--pas:.85rem}
  .chemise{grid-template-columns:1fr;gap:1.2rem;min-height:clamp(20rem,52svh,30rem)}
  .onglet{padding:0 1rem 0 .7rem;font-size:.8rem} .onglet span{display:none} .onglet b{opacity:1;font-weight:700}
  .marches{grid-template-columns:1fr 1fr} .marches li{margin-top:0;min-height:15rem}
  .valeurs{grid-template-columns:1fr}
  .echange{grid-template-columns:1fr}
}
@media (max-width:560px){
  .marches{grid-template-columns:1fr}
  .formulaire,.details{grid-template-columns:1fr}
}