:root{
  --bg:#fff; --ink:#1f2225; --mute:#6c7276; --accent:#2f4bff;
  --pad:clamp(1.25rem,4vw,4rem);
  --bar-h:4rem;
  --espace-blocs:clamp(1.5rem,4vw,3.5rem);   /* espace au-dessus et au-dessous de chaque section de page projet */
  --font:"Bricolage Grotesque",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:300;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Barre du haut : se cache en descendant, revient en remontant */
.bar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:var(--bar-h);padding:0 var(--pad);background:var(--bg);color:var(--ink);border-bottom:1px solid rgba(31,34,37,.1);transition:transform .4s ease}
.bar.hide{transform:translateY(-100%)}
.logo{font-weight:800;font-size:1.4rem;letter-spacing:-.04em}
.bar nav{display:flex;gap:clamp(1rem,3vw,2.5rem);font-size:.9rem}
.bar nav a{position:relative}
.bar nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.bar nav a:hover::after{transform:scaleX(1)}

/* Hero */
.hero{position:relative;margin-top:var(--bar-h);height:calc(100svh - var(--bar-h));min-height:480px;overflow:hidden;display:grid;align-items:end}
.hero-img{position:absolute;inset:-10% 0;will-change:transform}
.hero-img .ph{height:100%}
.hero-text{position:relative;padding:var(--pad);color:#fff;will-change:transform,opacity}
.hero h1{font-weight:800;font-size:clamp(3.5rem,13vw,11rem);line-height:.9;letter-spacing:-.05em}
.hero p{margin-top:1rem;font-size:clamp(1rem,1.6vw,1.3rem)}

/* Placeholders (remplacés par tes vraies images dans script.js) */
.ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.88);padding:1rem;background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(255,255,255,.18) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(255,255,255,.18) 50%,transparent calc(50% + .5px)),linear-gradient(135deg,hsl(var(--h) 14% 42%),hsl(calc(var(--h) + 30) 18% 24%))}
.ph span{font-weight:500;font-size:clamp(1rem,2.2vw,1.8rem);letter-spacing:-.02em;background:rgba(0,0,0,.28);padding:.6rem 1rem}
.ph small{display:block;font-weight:300;font-size:.8rem;opacity:.8;letter-spacing:0;margin-top:.2rem}
img.cover{width:100%;height:100%;object-fit:cover;display:block}

/* Sections */
.section{padding:clamp(5rem,12vw,10rem) 0 2rem}
.big-title{font-weight:800;font-size:clamp(4rem,17vw,16rem);line-height:.85;letter-spacing:-.06em;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--ink);will-change:transform;padding-left:var(--pad)}

.project{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem var(--pad);padding:clamp(2.5rem,7vw,6rem) var(--pad)}
.frame{grid-column:1 / span 8;aspect-ratio:16/10;overflow:hidden;position:relative;clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
/* Les images ne sont masquées en attente de leur apparition que si le script est bien en marche (classe reveal-on) */
.reveal-on .frame:not(.in){clip-path:inset(0 100% 0 0)}
.frame .inner{position:absolute;inset:-12% 0;will-change:transform}
.project:nth-child(even) .frame{grid-column:5 / span 8;grid-row:1}
.project:nth-child(even) .info{grid-column:1 / span 4;grid-row:1}
.info{grid-column:9 / span 4;align-self:end;display:flex;flex-direction:column;gap:.4rem;will-change:transform}
.info .n{color:var(--mute);font-size:.85rem}
.info h3{font-weight:500;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.02em}
.info .meta{color:var(--mute);font-size:.95rem}
.info .tools{font-size:.95rem}
.info .voir{margin-top:.8rem;align-self:flex-start;border-bottom:1px solid var(--ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.info .voir:hover{color:var(--accent);border-color:var(--accent)}

/* Contact */
footer{padding:clamp(5rem,12vw,10rem) var(--pad) 2rem;background:var(--ink);color:#e8eaeb}
footer h2{font-weight:300;font-size:clamp(1.5rem,3vw,2.5rem);margin-bottom:1rem}
.mail{font-weight:800;font-size:clamp(1.6rem,6vw,5rem);letter-spacing:-.04em;word-break:break-word;transition:color .2s}
.mail:hover{color:#8da0ff}
.small{margin-top:5rem;color:var(--mute);font-size:.85rem}

/* Mobile : on empile tout, plus de grille */
@media (max-width:760px){
  .project{display:flex;flex-direction:column;gap:1rem}
  .frame{aspect-ratio:4/3}
  .bar nav{gap:.6rem;font-size:.75rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frame{clip-path:none;transition:none}
  .hero-img,.hero-text,.big-title,.frame .inner,.info{transform:none!important}
}

/* Page projet */
.p-head{padding:clamp(7rem,14vw,11rem) var(--pad) 2rem}
.retour{color:var(--mute);font-size:.9rem;border-bottom:1px solid currentColor}
.retour:hover{color:var(--accent)}
.p-head h1{font-weight:800;font-size:clamp(2.6rem,9vw,8rem);line-height:.95;letter-spacing:-.05em;margin:1.2rem 0 2.5rem;max-width:16ch}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;border-top:1px solid var(--ink);padding-top:1rem}
.specs dt{color:var(--mute);font-size:.85rem}
.specs dd{font-weight:500}
.p-desc{max-width:60ch;padding:2rem var(--pad) 3rem;font-size:clamp(1.05rem,1.6vw,1.3rem)}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:0 var(--pad)}
.gal .frame{grid-column:auto;aspect-ratio:4/3}
.gal .frame.wide{grid-column:1 / -1;aspect-ratio:16/9}
.p-nav{display:flex;justify-content:space-between;gap:1rem;padding:clamp(4rem,9vw,8rem) var(--pad)}
.p-nav a{display:flex;flex-direction:column;font-weight:500;font-size:clamp(1.1rem,2.4vw,2rem);letter-spacing:-.02em;max-width:45%}
.p-nav a:last-child{text-align:right;margin-left:auto}
.p-nav small{color:var(--mute);font-weight:300;font-size:.85rem}
.p-nav a:hover{color:var(--accent)}
@media (max-width:760px){.gal{grid-template-columns:1fr}.gal .frame,.gal .frame.wide{aspect-ratio:4/3}}

/* Page projet : sections avec titre, photos à leurs proportions, légende dessous */
.blocs{padding:0 var(--pad)}
.bloc{padding:calc(var(--espace-blocs) * var(--k,1)) 0}
.bloc-in{width:var(--w,100%)}
.bloc.droite .bloc-in{margin-left:auto}
.bloc.centre .bloc-in{margin-inline:auto}
.b-titre{font-weight:500;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.01em;margin-bottom:1rem}
.rang{display:flex;gap:clamp(.75rem,1.5vw,1.5rem)}
.rang .frame{flex:1 1 0;min-width:0;aspect-ratio:4/3}
.rang .frame:only-child{aspect-ratio:16/9}
.bloc .inner{inset:-7% 0}
.bloc .txt{max-width:60ch;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--ink);width:fit-content;color:#454a4e;font-size:.95rem}
@media (max-width:760px){
  .bloc-in{width:100%}
  .rang{flex-direction:column}
}

/* Photo de couverture en haut de la page projet (si "couverture" est renseignée) */
.p-cover{position:relative;margin-top:var(--bar-h);height:72svh;min-height:340px;overflow:hidden}
.p-cover .inner{position:absolute;inset:-8% 0;will-change:transform}
.p-cover + .p-head{padding-top:clamp(2rem,5vw,4rem)}

/* Vidéo en fin de page projet */
.video{aspect-ratio:16/9;background:#000}
.video video,.video iframe{display:block;width:100%;height:100%;border:0}

/* Vidéo de fond de l'accueil */
.hero-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .8s}
.hero-img video.pret{opacity:1}

/* Page À propos */
.ap{padding:clamp(7rem,14vw,11rem) var(--pad) clamp(3rem,8vw,6rem)}
.ap-intro,.ap-processus{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem var(--pad);align-items:center;padding:clamp(1.5rem,4vw,3rem) 0}
.ap-intro .ap-texte{grid-column:1 / span 6}
.ap-intro .ap-img{grid-column:8 / span 5;aspect-ratio:4/3}
.ap-processus .ap-img{grid-column:1 / span 5;aspect-ratio:1/1}
.ap-processus .ap-texte{grid-column:7 / span 6}
.ap h1{font-weight:800;font-size:clamp(2.6rem,8vw,7rem);line-height:.95;letter-spacing:-.05em;margin-bottom:1.5rem}
.ap h2{font-weight:500;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem}
.ap p{max-width:58ch;font-size:clamp(1rem,1.4vw,1.15rem)}
@media (max-width:760px){
  .ap-intro,.ap-processus{display:flex;flex-direction:column}
  .ap-processus{flex-direction:column-reverse}
  .ap-intro .ap-img{aspect-ratio:4/3}
}

.tel{display:block;margin-top:1.2rem;font-weight:500;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-.02em;transition:color .2s}
.tel:hover{color:#8da0ff}

/* Logo en image dans le bandeau */
.logo-img{height:2.4rem;width:auto;display:block}


/* Texte de description à côté des images (blocs avec "texte") */
.corps.avec-texte{display:grid;grid-template-columns:minmax(0,1fr) var(--tw,minmax(14rem,24rem));gap:clamp(1.5rem,3vw,3rem)}
.corps.texte-gauche{grid-template-columns:var(--tw,minmax(14rem,24rem)) minmax(0,1fr)}
.corps.texte-gauche .desc{grid-row:1;grid-column:1}
.corps.texte-gauche .medias{grid-row:1;grid-column:2}
.desc{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6}
.desc p+p{margin-top:1rem}
.v-haut .desc{align-self:start}
.v-centre .desc{align-self:center}
.v-bas .desc{align-self:end}
@media (max-width:760px){
  .corps.avec-texte,.corps.texte-gauche{display:flex;flex-direction:column;gap:1rem}
}

/* Comparateur avant / après */
.compar{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#111}
.compar-bas,.compar-haut{position:absolute;inset:0}
.compar-haut{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compar img,.compar .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.compar-poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff}
.compar-poignee:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.compar-poignee span{position:absolute;top:50%;left:50%;width:2.8rem;height:2.8rem;margin:-1.4rem 0 0 -1.4rem;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.compar-poignee span::before,.compar-poignee span::after{content:"";position:absolute;top:50%;margin-top:-.4rem;border:.4rem solid transparent}
.compar-poignee span::before{left:.35rem;border-right-color:#1f2225;border-left-width:0}
.compar-poignee span::after{right:.35rem;border-left-color:#1f2225;border-right-width:0}
.compar-etiq{position:absolute;bottom:1rem;padding:.3rem .7rem;background:rgba(0,0,0,.5);color:#fff;font-size:.85rem;pointer-events:none}
.compar-etiq.g{left:1rem}
.compar-etiq.d{right:1rem}

/* Listes à puces dans les textes de description */
.desc ul{margin-top:.8rem;padding-left:1.2rem;list-style:disc}
.desc li+li{margin-top:.35rem}
.desc ul + p{margin-top:1rem}

/* Panorama 360° */
.pano{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;color:#fff}
.pano .pnlm-container{position:absolute;inset:0;width:100%;height:100%}
.pano-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;font-size:.95rem;max-width:none}