/* Bertrand Vallé — site vitrine. Même charte que l'espace client (Overlock, anthracite, mauve). */
@font-face{font-family:"Overlock";font-display:swap;
  src:url("../fonts/Overlock-Regular-OTF-webfont.woff") format("woff"),url("../fonts/Overlock-Regular-OTF-webfont.ttf") format("truetype")}
:root{
  --ink:#4d4d4d;--ink-deep:#363636;--mauve:#957095;--mauve-dark:#664d66;--mist:#eeeeee;--stone:#adadad;--muted:#666;--rule:#e2e2e2;
  --radius:3px;--gap:clamp(1rem,3vw,2rem);--header-h:clamp(4.25rem,8vw,7rem);--ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
body{margin:0;background:#fff;color:var(--ink);font:1.125rem/1.6 "Overlock",Arial,Verdana,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--mauve-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--mauve);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:50}
.wrap{padding:0 var(--gap);max-width:1500px;margin:0 auto;width:100%}
.eyebrow{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rule::before{content:"";display:block;width:3.5rem;height:4px;background:var(--mauve);margin-bottom:1.4rem}
h1,h2,h3{font-weight:400;margin:0}

/* Bandeau : identique à l'espace client */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:var(--header-h);padding:0 var(--gap) 0 0;background:var(--ink);color:#fff}
.site-header :focus-visible,.site-footer :focus-visible,.contact :focus-visible,.hero :focus-visible{outline-color:#fff}
.brand{display:block;line-height:0;align-self:flex-start}
.brand img{height:var(--header-h);width:auto;max-width:none}
.site-header nav{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
/* Pictos blancs dans des pastilles rondes de même taille (alignement garanti) */
.site-header nav .nav-icon{display:inline-grid;place-items:center;width:2.9rem;height:2.9rem;border:1px solid transparent;border-radius:50%;
  color:#fff;transition:border-color .2s,background .2s}
.site-header nav .nav-icon svg{width:1.45rem;height:1.45rem}
.site-header nav .nav-icon:hover{border-color:var(--mauve);background:#ffffff14}
.site-header nav .nav-client{border-color:#ffffffb3}
.site-header nav .nav-client:hover{border-color:#fff;background:#ffffff1a}
/* Nom du lien affiché au survol (et au focus clavier) sous le picto */
.site-header nav .nav-icon{position:relative}
.site-header nav .nav-icon::after{content:attr(data-tip);position:absolute;top:calc(100% + .55rem);right:50%;transform:translate(50%,-.3rem);z-index:20;
  white-space:nowrap;padding:.3rem .8rem;border-radius:999px;background:#fff;color:var(--ink);font-size:.95rem;line-height:1.3;
  box-shadow:0 6px 20px rgb(0 0 0/.25);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.site-header nav .nav-icon:last-child::after{right:0;transform:translateY(-.3rem)}
.site-header nav .nav-icon:hover::after,.site-header nav .nav-icon:focus-visible::after{opacity:1;visibility:visible;transform:translate(50%,0)}
.site-header nav .nav-icon:last-child:hover::after,.site-header nav .nav-icon:last-child:focus-visible::after{transform:none}
@media (hover:none){.site-header nav .nav-icon::after{display:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.site-header nav .nav-icon{width:2.6rem;height:2.6rem}.site-header nav .nav-icon svg{width:1.3rem;height:1.3rem}}

/* Diptyque d'ouverture : Retail | Immobilier */
.hero{display:grid;gap:3px;background:var(--ink);grid-template-columns:1fr 1fr;height:clamp(24rem,72vh,48rem)}
.hero a{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:var(--ink-deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.hero a:hover img{transform:scale(1.04)}
.hero a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/.7),rgb(0 0 0/.06) 55%,rgb(0 0 0/0))}
.hero-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(1.25rem,3.5vw,2.75rem)}
.hero .eyebrow{color:#e6e6e6}
.hero h2{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1}
.hero p{margin:.5rem 0 0;color:#ececec;max-width:28ch}
.hero .arrow{display:inline-block;margin-left:.4rem;transition:transform .3s var(--ease)}
.hero a:hover .arrow{transform:translateX(.35rem)}
@media (max-width:760px){.hero{grid-template-columns:1fr;height:auto}.hero a{height:56vw;min-height:15rem}}

/* Présentation */
.intro{display:grid;gap:1.75rem 4rem;padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.intro h1{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.04;max-width:16ch;text-wrap:balance}
.intro .lead{margin:0;color:var(--muted);font-size:1.25rem;max-width:40rem}
/* Grand écran : titre sur toute la largeur (1 à 2 lignes), texte à gauche et boutons à droite sur la même ligne */
@media (min-width:980px){
  .intro{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .intro .rule{grid-column:1/-1}
  .intro h1{max-width:none}
  .intro .actions{justify-content:flex-end}
}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;font:inherit;line-height:1.2;border:1px solid transparent;border-radius:var(--radius);
  padding:.95rem 1.6rem;background:var(--mauve-dark);color:#fff;text-decoration:none;font-size:1.12rem;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-quiet{background:#fff;color:var(--ink);border-color:var(--stone)}
.btn-quiet:hover{background:var(--mist);color:var(--ink)}

/* Sections thématiques */
.theme{padding-bottom:clamp(3.5rem,7vw,6rem)}
.section-label{margin:0 0 1.5rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:1rem}
.section-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.theme-head{display:grid;gap:1rem 4rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
@media (min-width:980px){.theme-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
.theme-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05}
.theme-head p{margin:0;color:var(--muted);max-width:40rem}
.tags{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{font-size:.95rem;padding:.3rem .85rem;border:1px solid var(--rule);border-radius:999px;color:var(--ink)}

/* Galerie en lignes justifiées (même principe que l'espace client) */
.gallery{--g:.45rem;--row-h:11rem;display:flex;flex-wrap:wrap;gap:var(--g)}
@media (min-width:560px){.gallery{--row-h:15rem}}
@media (min-width:1100px){.gallery{--row-h:19rem}}
.gallery::after{content:"";flex-grow:100000}
.shot{position:relative;margin:0;min-width:0;overflow:hidden;flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h))}
.shot a{display:block;background:var(--mist);cursor:zoom-in;line-height:0}
.shot img{width:100%;aspect-ratio:var(--ar);object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.03)}

/* Références */
.refs{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.6rem 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2.5rem}
.refs .eyebrow{margin:0}
.refs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 2.25rem;font-size:1.6rem;color:var(--ink)}

/* Méthode */
.steps{list-style:none;margin:0;padding:clamp(3rem,6vw,5rem) 0;display:grid;gap:2rem;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:3rem}}
.steps li{counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font-size:.82rem;letter-spacing:.16em;color:var(--mauve-dark);margin-bottom:.6rem}
.steps h3{font-size:1.5rem;line-height:1.15;margin-bottom:.4rem}
.steps p{margin:0;color:var(--muted)}

/* Contact */
.contact{background:var(--ink);color:#fff;padding:clamp(3.5rem,8vw,7rem) 0}
.contact .eyebrow{color:#d2d2d2}
.contact h2{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;max-width:14ch}
.contact .lead{margin:1.2rem 0 0;color:#d9d9d9;max-width:34rem}
.channels{display:grid;gap:3px;margin-top:clamp(2rem,4vw,3rem);background:#ffffff26}
@media (min-width:820px){.channels{grid-template-columns:1fr 1fr}}
.channel{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.4rem,3vw,2.2rem);background:var(--ink);color:#fff;text-decoration:none;transition:background .2s}
.channel:hover{background:var(--ink-deep);color:#fff}
.channel small{display:block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#cfcfcf;margin-bottom:.35rem}
.channel strong{font-weight:400;font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.1;overflow-wrap:anywhere}
.channel svg{width:2rem;height:2rem;flex:none;color:var(--mauve);transition:transform .3s var(--ease)}
.channel:hover svg{transform:translateX(.3rem)}
.contact .note{margin:1.5rem 0 0;color:#cfcfcf;font-size:1rem}

/* Pied de page : identique à l'espace client */
.site-footer{padding:2.25rem var(--gap) 1.25rem;background:var(--ink);color:#fff;border-top:1px solid #ffffff2e}
.site-footer a{color:#fff}
.foot{display:grid;gap:1rem clamp(1.25rem,3vw,2.5rem);align-items:start;max-width:1500px;margin:0 auto;grid-template-columns:auto 1fr;padding-bottom:1.25rem;border-bottom:1px solid #ffffff4d}
.foot ul{list-style:none;margin:0;padding:0}
.legal{max-width:1500px;margin:.9rem auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;color:#d9d9d9;font-size:1rem}

/* Barre de contact flottante (mobile) */
.quick{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:30;display:none;gap:.5rem;padding:.5rem;border-radius:999px;background:#fff;box-shadow:0 12px 36px rgb(0 0 0/.3);
  transition:transform .35s var(--ease),opacity .25s,visibility .25s}
.quick a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;text-decoration:none;color:var(--ink);border:1px solid var(--stone)}
.quick a:first-child{background:var(--mauve-dark);border-color:var(--mauve-dark);color:#fff}
.quick svg{width:1.1rem;height:1.1rem}
.quick[data-hidden=true]{opacity:0;visibility:hidden;transform:translateY(1.8rem)}
@media (max-width:760px){.quick{display:flex}}

/* Visionneuse */
dialog#lightbox{border:0;padding:0;background:var(--ink-deep);color:#fff;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;overflow:hidden}
dialog#lightbox::backdrop{background:#000}
.lb-stage{position:absolute;inset:0;margin:0;padding:3.5rem 5rem;cursor:zoom-out}
.lb-stage img{width:100%;height:100%;max-width:none;object-fit:contain}
.lb-btn{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid #ffffff59;background:rgb(0 0 0/.22);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.lb-btn:hover{background:#ffffff26;border-color:#fff}
.lb-btn svg{width:1.4rem;height:1.4rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
.lb-close{top:.9rem;right:1rem}
@media (max-width:700px){.lb-stage{padding:3.5rem .4rem 4.5rem}.lb-prev,.lb-next{top:auto;bottom:.6rem;transform:none}}

/* Mentions légales */
.page{padding:clamp(2.5rem,6vw,5rem) 0 4rem;max-width:44rem}
.page h1{font-size:clamp(2.2rem,4.8vw,3.4rem);line-height:1.05;margin-bottom:1.5rem}
.page h2{font-size:1.5rem;margin:2rem 0 .4rem}
.page p{margin:.3rem 0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.hero a:hover img,.shot:hover img{transform:none}}