/* ============================================================
   Pages internes PACO architecture — base commune (DA du site)
   Fond papier, encre sombre, Hanken Grotesk, accent bronze.
   Topbar + pied partagés ; chaque page ajoute son layout de contenu.
   ============================================================ */
:root{
  --paper:#f4f1ea; --paper2:#ece7dc; --ink:#1f1f1d;
  --ink70:rgba(31,31,29,.70); --ink45:rgba(31,31,29,.45); --ink28:rgba(31,31,29,.28);
  --bronze:#9c8a63; --sage:#9aa493; --line:rgba(31,31,29,.13);
  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);font-weight:300;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.62;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

/* ---- top bar (identique à la grille) ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:20px 38px;
  background:linear-gradient(to bottom,rgba(244,241,234,.96),rgba(244,241,234,0));
  backdrop-filter:saturate(1.1);}
.brand{display:flex;align-items:center;gap:14px;}
.brand__logo{width:44px;height:44px;border-radius:4px;overflow:hidden;flex:none;}
.brand__logo img{width:100%;height:100%;object-fit:cover;display:block;}
.brand__txt{display:flex;flex-direction:column;}
.wordmark{font-size:14px;font-weight:700;letter-spacing:.16em;line-height:1;}
.brand__tl{font-size:11.5px;color:var(--ink45);letter-spacing:.02em;margin:4px 0 0;}
.menubtn{display:flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;}
.menubtn .bars{display:inline-flex;flex-direction:column;gap:3.5px;width:20px;}
.topbar a,.menubtn,.brand__tl{transition:color .3s ease;}
.menubtn .bars i{height:1.5px;background:var(--ink);display:block;transition:background .3s ease,transform .25s ease;}

/* ---- conteneur de page ---- */
.pwrap{max-width:1500px;margin:0 auto;padding:0 38px;}

/* ---- en-tête de page (titre + kicker) ---- */
.phead{padding:140px 38px 0;max-width:1500px;margin:0 auto;}
.pkick{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 20px;}
.ptitle{font-size:clamp(40px,6vw,80px);font-weight:500;letter-spacing:-.03em;line-height:1.0;
  margin:0;text-wrap:balance;}

/* ---- héro bandeau photo (pages agence / recherche / carte) ---- */
.phero{position:relative;height:62vh;height:62svh;min-height:380px;overflow:hidden;background:#6f675b;}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.phero__grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,17,14,.86),rgba(18,17,14,.06) 56%,rgba(18,17,14,.36));}
.phero__cap{position:absolute;left:0;right:0;bottom:54px;color:#fff;}
.phero__kick{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#d9caa4;margin:0 0 16px;}
.phero__title{font-size:clamp(40px,6vw,80px);font-weight:500;letter-spacing:-.03em;line-height:1.0;
  color:#f4f1ea;margin:0;text-wrap:balance;max-width:17ch;}
.phero__title em{color:#d9caa4;}
.phero__lede{font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:rgba(255,255,255,.84);
  max-width:48ch;margin:22px 0 0;}

/* topbar lisible par-dessus le héro (même traitement que la fiche projet) */
body.hero-page .topbar{background:none;}
body.hero-page .topbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,15,12,.5),rgba(15,15,12,0));}
body.hero-page .topbar a,body.hero-page .menubtn{color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.35);}
body.hero-page .brand__tl{color:rgba(255,255,255,.72);}
body.hero-page .menubtn .bars i{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.45);}

/* barre redevenue papier+encre une fois descendu sous le bénéau/photo */
body.hero-page.nav-solid .topbar{background:linear-gradient(to bottom,rgba(244,241,234,.96),rgba(244,241,234,0));}
body.hero-page.nav-solid .topbar::before{opacity:0;}
body.hero-page.nav-solid .topbar a,body.hero-page.nav-solid .menubtn{color:var(--ink);text-shadow:none;}
body.hero-page.nav-solid .brand__tl{color:var(--ink45);}
body.hero-page.nav-solid .menubtn .bars i{background:var(--ink);box-shadow:none;}

/* ---- en-tête sombre (Projets / Contact : même accord que les pages héro) ---- */
.phead--dark{max-width:none;margin:0;padding:0;background:#1f1d18;}
.phead--dark .phead__in{max-width:1500px;margin:0 auto;padding:140px 38px 54px;}
.phead--dark .pkick{color:var(--bronze);}
.phead--dark .ptitle{color:#f4f1ea;}

@media(max-width:660px){
  .phero{height:54vh;height:54svh;min-height:340px;}
  .phero__cap{bottom:38px;}
}

/* ---- pied de page ---- */
.pfoot{border-top:1px solid var(--line);margin-top:120px;padding:46px 38px 64px;}
.pfoot__in{max-width:1500px;margin:0 auto;display:flex;align-items:flex-end;
  justify-content:space-between;gap:30px;flex-wrap:wrap;}
.pfoot__brand{font-size:13px;font-weight:600;letter-spacing:.14em;}
.pfoot__addr{font-size:13px;color:var(--ink70);line-height:1.7;margin:8px 0 0;}
.pfoot__addr a:hover{color:var(--ink);}
.pfoot__nav{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.04em;color:var(--ink45);}
.pfoot__nav a{display:inline-block;color:var(--ink45);transition:color .25s ease,transform .25s ease;}
.pfoot__nav a:hover{color:var(--ink);transform:translateX(5px);}

@media(max-width:660px){
  .topbar{padding:14px 22px;}
  .brand{gap:11px;} .brand__logo{width:38px;height:38px;}
  .wordmark{font-size:12.5px;letter-spacing:.12em;} .brand__tl{font-size:10.5px;}
  .phead{padding:104px 22px 0;}
  .phead--dark .phead__in{padding:104px 22px 40px;}
  .pwrap{padding:0 22px;}
  .pfoot{padding:40px 22px 56px;}
}