:root{
  --papier:#ffffff;
  --encre:#2b2b2b;
  --noir:#0d0d0d;
  --gris:#5f6060;
  --gris-titre:#303133;
  --pied:#000000;
  --filet:#e4e4e2;
  --police:'Inter Tight','Arial Black',Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--police);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.w{padding-left:max(16px,2.2vw,env(safe-area-inset-left,0px));padding-right:max(16px,2.2vw,env(safe-area-inset-right,0px))}

.logo{display:inline-flex;flex-direction:column;font-family:var(--police);font-weight:900;line-height:.84;letter-spacing:-.045em;text-transform:none}
.logo .petit{font-size:.42em;letter-spacing:-.01em;line-height:1;margin-top:.45em}
.m{display:inline-block;width:.2em;height:.2em;background:currentColor;margin-left:.04em}

/* en-tête de l'accueil */
header.hero{position:relative;height:clamp(520px,60vw,860px);overflow:hidden;background:#1a1a1a;color:#fff}
header.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
header.hero .voile{position:absolute;inset:0;background:rgba(0,0,0,.18)}
.barre{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding-block:26px}
.langues{display:flex;gap:14px;font-size:11px;font-weight:600;letter-spacing:.04em;padding-top:8px}
.langues a:last-child{opacity:.6}
.barre .logo{font-size:26px}
.burger{justify-self:end;background:none;border:0;padding:10px;cursor:pointer;min-width:44px;min-height:44px}
.hero .barre{color:#fff}
.hero h1{position:absolute;left:0;right:0;bottom:84px;margin:0;display:flex;justify-content:flex-start;color:#fff;font-size:clamp(74px,11.5vw,172px)}
.hero h1 > .logo{white-space:nowrap}
.hero h1 .archi{font-size:.4em;letter-spacing:-.04em;line-height:1;margin-top:.18em}
.descendre{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);color:#fff;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer}

/* en-tête des autres pages : même barre, en noir sur blanc */
header.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--papier);color:var(--noir);border-bottom:1px solid var(--filet)}
header.entete .barre{padding-block:18px}
header.entete .barre .logo{font-size:22px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--papier)}

nav.principale{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;padding-block:26px}
nav.principale a{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gris-titre);padding-block:4px;border-bottom:1px solid transparent}
nav.principale a:hover,nav.principale a[aria-current="page"]{color:#000;border-bottom-color:#000}

.intro{max-width:900px;margin:0 auto;padding-block:90px 140px}
.intro .lead{margin:0 0 64px;font-size:clamp(24px,2.4vw,30px);line-height:1.1;font-weight:900;letter-spacing:-.03em;color:var(--encre)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:36px}
.cols p{margin:0 0 1em;font-size:17px;line-height:1.35;font-weight:400;letter-spacing:-.01em;text-align:justify;hyphens:auto}

section.bloc{padding-bottom:150px}
.tete{text-align:center}
.tete .sur{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--gris-titre)}
.tete h1,.tete h2{margin:0;font-weight:900;font-size:clamp(56px,8.4vw,124px);line-height:.9;letter-spacing:-.045em;color:var(--gris-titre);text-wrap:balance}
.tete .lien{display:inline-block;margin:34px 0 54px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--encre);border-bottom:1px solid transparent;padding-bottom:2px}
.tete .lien:hover{border-bottom-color:var(--encre)}
.tete.seul h1,.tete.seul h2{margin-bottom:70px}
.page-haut{padding-top:clamp(56px,7vw,110px)}

.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}}

.projet{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:#eee}
.projet img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.projet:hover img{transform:scale(1.04)}
.projet .legende{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(20,20,20,.45);color:#fff;opacity:0;transition:opacity .35s ease;text-align:center;padding:16px}
.projet:hover .legende,.projet:focus-visible .legende{opacity:1}
.legende .t{font-size:19px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.legende .l{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
@media (hover:none){.projet .legende{opacity:1;background:linear-gradient(transparent 45%,rgba(20,20,20,.6));justify-content:flex-end;align-items:flex-start;text-align:left}}

.carte{display:flex;flex-direction:column;gap:12px}
.carte .img{overflow:hidden;background:#eee}
.carte .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.carte:hover .img img{transform:scale(1.03)}
.carte h3{margin:6px 0 0;font-size:17px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--encre)}
.carte p{margin:0;font-size:13px;line-height:1.4;font-weight:400;color:var(--gris)}
.carte .date{font-size:12px;font-weight:600;color:var(--gris-titre);font-variant-numeric:tabular-nums}
.agence .carte .img{aspect-ratio:1}
.actus .carte .img{aspect-ratio:3/2}

figure.chantier{margin:0;display:flex;flex-direction:column;gap:10px}
figure.chantier .vid{display:block;aspect-ratio:9/16;overflow:hidden;background:#e8e8e8;cursor:pointer}
figure.chantier .vid video{transition:transform .6s ease}
figure.chantier .vid:hover video{transform:scale(1.03)}
figure.chantier video{width:100%;height:100%;object-fit:cover}
figure.chantier .t{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--encre)}
figure.chantier .l{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}

/* page projet */
.visuel{height:clamp(320px,52vw,780px);background:#1a1a1a;overflow:hidden}
.visuel img{width:100%;height:100%;object-fit:cover}
.fiche{max-width:1100px;margin:0 auto;padding-block:clamp(56px,7vw,100px) clamp(48px,6vw,90px)}
.fiche .tete{margin-bottom:clamp(40px,5vw,70px)}
.fiche .tete .sur{margin-top:22px;margin-bottom:0}
.infos{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 40px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding-block:16px;margin-bottom:clamp(40px,5vw,64px)}
.infos div{display:flex;flex-direction:column;gap:4px;text-align:center}
.infos span{font-size:10px;font-weight:600;letter-spacing:.1em;color:#8f8f8f}
.infos b{font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.fiche .cols{max-width:900px;margin:0 auto}
/* galerie : une grande photo, puis des rangées complètes de 3 ou de 2, sans trou */
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.galerie button{display:block;padding:0;border:0;background:#eee;cursor:zoom-in;aspect-ratio:3/2;overflow:hidden;grid-column:span 2}
.galerie button.l2{grid-column:span 3}
.galerie button.l1{grid-column:1/-1;aspect-ratio:16/9}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.galerie button:hover img{transform:scale(1.03)}
@media (max-width:760px){.galerie button,.galerie button.l2{grid-column:1/-1}}
.video-projet{position:relative;max-width:420px;margin:clamp(40px,5vw,70px) auto 0}
.video-projet video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#e8e8e8}
.son{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(13,13,13,.72);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.son:hover{background:#0d0d0d}
.son .on{display:none}
.son[aria-pressed="true"] .on{display:block}
.son[aria-pressed="true"] .off{display:none}
.suite{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-top:1px solid var(--filet);margin-top:clamp(56px,7vw,100px);padding-top:28px}
.suite a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.suite a:hover{text-decoration:underline;text-underline-offset:4px}
.suite .suiv{text-align:right}
.suite .tout{text-align:center}
.suite b{display:block;font-size:clamp(18px,2vw,26px);font-weight:900;letter-spacing:-.02em;margin-top:6px}

/* agence */
.agence-ligne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center;padding-bottom:clamp(64px,8vw,120px)}
.agence-ligne .img{aspect-ratio:4/5;overflow:hidden;background:#eee}
.agence-ligne .img img{width:100%;height:100%;object-fit:cover}
.agence-ligne:nth-child(even) .img{order:2}
.agence-ligne h2{margin:0 0 24px;font-size:clamp(32px,4vw,58px);line-height:.92;font-weight:900;letter-spacing:-.04em;color:var(--gris-titre);text-transform:uppercase}
.agence-ligne .sur{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.1em;color:#8f8f8f}
.agence-ligne p{margin:0 0 1em;font-size:17px;line-height:1.4;max-width:56ch;text-align:justify;hyphens:auto}
@media (max-width:760px){.agence-ligne{grid-template-columns:minmax(0,1fr)}.agence-ligne:nth-child(even) .img{order:0}}

/* article */
.article{max-width:900px;margin:0 auto;padding-block:clamp(56px,7vw,100px) 0}
.article .date{display:block;text-align:center;font-size:13px;font-weight:600;letter-spacing:.08em;color:#8f8f8f;margin-top:22px}
.article .texte{font-size:19px;line-height:1.45;margin:clamp(36px,4vw,56px) 0;text-align:center}
.article .texte a{border-bottom:1px solid currentColor}

/* contact */
.contact{max-width:1100px;margin:0 auto;padding-block:clamp(56px,7vw,110px) 150px}
.contact .lignes{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,70px)}
.contact .ligne{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;border-top:1px solid var(--filet);padding-top:20px}
.contact .ligne span{font-size:11px;font-weight:600;letter-spacing:.1em;color:#8f8f8f}
.contact .ligne b{font-size:clamp(24px,3.4vw,46px);line-height:1.05;font-weight:900;letter-spacing:-.03em;color:var(--gris-titre);overflow-wrap:anywhere}
.contact .ligne a{border-bottom:1px solid var(--filet)}
.contact .ligne a:hover{border-bottom-color:currentColor}
@media (max-width:640px){.contact .ligne{grid-template-columns:minmax(0,1fr);gap:8px}}

/* pied noir commun */
footer{background:var(--pied);color:#fff;padding-block:110px 40px}
.pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px;max-width:900px;margin:0 auto}
.pied .col{display:flex;flex-direction:column;gap:14px}
.pied .col:nth-child(2){align-items:center;text-align:center}
.pied .col:nth-child(3){align-items:flex-end;text-align:right}
.pied .et{margin:0;font-size:10px;font-weight:600;letter-spacing:.1em;color:#8f8f8f}
.pied p{margin:0;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.01em;text-transform:uppercase}
.pied a:hover{color:#bdbdbd}
.pied-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-top:80px}
.pied-nav a{font-size:12px;font-weight:600;letter-spacing:.06em;color:#bdbdbd}
.pied-nav a:hover{color:#fff}
.pied-bas{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:60px}
.pied-bas .logo{font-size:34px;color:#fff}
.pied-bas small{font-size:10px;font-weight:600;letter-spacing:.04em;color:#8f8f8f}
@media (max-width:560px){.pied .col:nth-child(2),.pied .col:nth-child(3){align-items:flex-start;text-align:left}}

/* menu plein écran */
.menu{position:fixed;inset:0;z-index:50;background:var(--noir);color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.menu .barre .logo{font-size:26px}
.menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.2vw,14px)}
.menu nav a{font-size:clamp(40px,7vw,96px);font-weight:900;line-height:.95;letter-spacing:-.045em;text-transform:lowercase}
.menu nav a:hover{color:#9a9a96}
.menu .bas{padding-block:26px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#9a9a96;display:flex;flex-wrap:wrap;gap:8px 26px}

/* visionneuse */
.visionneuse{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.96);display:flex;align-items:center;justify-content:center;padding:64px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}
.visionneuse img{max-width:100%;max-height:100%;object-fit:contain}
.visionneuse button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}
.visionneuse .fermer{top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.visionneuse .prec{left:max(8px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.visionneuse .suiv{right:max(8px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
.visionneuse .compte{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:#9a9a96;font-size:12px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
.galerie button{position:relative}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#000;color:#fff;padding:10px 14px}