/* En-tete et menus, identiques sur toutes les pages.
   Ordinateur (> 1024 px) : liens + sous-menu Services sur deux colonnes.
   Tablette et mobile : bouton menu, panneau plein ecran avec Services depliable.
   Les classes .scrolled (en-tete) et .open (menu mobile) sont aussi posees par
   les scripts de chaque page : ce fichier et menu.js s'appuient sur les memes. */

/* ── En-tete ──────────────────────────────────────────────────────────── */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;background:transparent;transition:background-color .4s ease,box-shadow .4s ease,padding .4s ease}
.header.scrolled{background:rgba(247,242,234,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(42,35,32,.07);padding-top:.6rem;padding-bottom:.6rem}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;flex-shrink:0;border-radius:50%}
.logo-mark{width:70px;height:70px;display:flex;align-items:center;justify-content:center;transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.header.scrolled .logo-mark{width:58px;height:58px}
/* Accueil : grand logo au-dessus du hero, il se reduit au defilement. */
.header--hero .logo-mark{width:200px;height:200px}
.header--hero.scrolled .logo-mark{width:62px;height:62px}

/* ── Liens principaux ─────────────────────────────────────────────────── */
.header-nav{display:flex;align-items:center;gap:1.9rem;margin-right:auto;margin-left:2.2rem}
.nav-link,.nav-dropdown-trigger{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 0;font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;color:var(--text-mid);background:none;border:0;cursor:pointer;transition:color .3s}
.nav-link::after,.nav-dropdown-trigger::after{content:'';position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav-link:hover,.nav-dropdown-trigger:hover,.nav-dropdown.is-open .nav-dropdown-trigger{color:var(--charcoal)}
.nav-link:hover::after,.nav-dropdown.is-open .nav-dropdown-trigger::after{transform:scaleX(1)}
.nav-link[aria-current="page"],.nav-dropdown-trigger.is-current{color:var(--charcoal)}
.nav-link[aria-current="page"]::after,.nav-dropdown-trigger.is-current::after{transform:scaleX(1)}
.nav-dropdown-trigger svg{width:10px;height:10px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(180deg)}

/* ── Sous-menu Services ───────────────────────────────────────────────── */
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:200;display:grid;grid-template-columns:repeat(2,minmax(230px,auto));min-width:0;padding:.7rem 0;background:var(--off-white);border:1px solid var(--cream-dark);box-shadow:0 18px 50px rgba(42,35,32,.12);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
/* Pont invisible : la souris traverse l'espace sans refermer le sous-menu. */
.nav-dropdown-menu::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
/* Survol en CSS pur : le sous-menu s'ouvre a la souris meme sans menu.js. */
@media(hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
  .nav-dropdown:hover .nav-dropdown-trigger{color:var(--charcoal)}
  .nav-dropdown:hover .nav-dropdown-trigger::after{transform:scaleX(1)}
  .nav-dropdown:hover .nav-dropdown-trigger svg{transform:rotate(180deg)}
}
.dropdown-col{display:flex;flex-direction:column;padding:0 .4rem}
.dropdown-col+.dropdown-col{border-left:1px solid var(--cream-dark)}
.nav-dropdown-menu a{position:relative;display:block;padding:.6rem 1.1rem;font-size:.82rem;letter-spacing:.01em;color:var(--text-mid);transition:color .2s,background-color .2s,padding-left .3s cubic-bezier(.22,1,.36,1)}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{color:var(--charcoal);background:var(--cream);padding-left:1.4rem}
.nav-dropdown-menu a[aria-current="page"]{color:var(--charcoal);background:var(--cream)}
.nav-dropdown-menu a[aria-current="page"]::before{content:'';position:absolute;left:0;top:.55rem;bottom:.55rem;width:2px;background:var(--bronze)}
.nav-dropdown-menu .dropdown-all{color:var(--bronze-text);font-weight:500}
.dropdown-label{margin:0;padding:.7rem 1.1rem .3rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-text);pointer-events:none}
.dropdown-divider{height:1px;margin:.45rem 1.1rem;background:var(--cream-dark)}

/* ── Droite : telephone, devis, bouton menu ───────────────────────────── */
.header-right{display:flex;align-items:center;gap:1.6rem}
.header-phone{position:relative;display:inline-flex;align-items:center;font-size:.85rem;letter-spacing:.05em;color:var(--text-mid);white-space:nowrap;transition:color .3s}
.header-phone:hover{color:var(--bronze-text)}
/* Zone tactile de 44 px sans changer l'apparence. */
.header-phone::after{content:'';position:absolute;inset:-12px -6px}
/* Taille fixee ici : les styles de bouton varient d'une page a l'autre. */
.header .btn.header-cta{margin:0;padding:.95rem 1.7rem;min-height:0;font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.18em;line-height:1.2;white-space:nowrap}
.mobile-toggle{position:relative;display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-8px;padding:0;background:none;border:0;cursor:pointer}
.mobile-toggle span{display:block;width:26px;height:1.5px;background:var(--charcoal);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s}
.mobile-toggle span:nth-child(2){width:18px;margin-left:8px}

.header a:focus-visible,.header button:focus-visible,.mobile-menu a:focus-visible,.mobile-menu button:focus-visible,.mobile-menu summary:focus-visible{outline:2px solid var(--bronze-text);outline-offset:4px}

/* ── Menu mobile (panneau plein ecran) ────────────────────────────────── */
.mobile-menu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;padding:0 1.5rem calc(1.5rem + env(safe-area-inset-bottom));background:var(--off-white);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s}
.mm-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -1.5rem;padding:max(.8rem,env(safe-area-inset-top)) 1.5rem .8rem;background:var(--off-white)}
.mm-top img{width:58px;height:58px}
.mobile-menu-close{position:relative;width:44px;height:44px;margin-right:-8px;padding:0;background:none;border:0;cursor:pointer;color:var(--charcoal);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mobile-menu-close::before,.mobile-menu-close::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:1.5px;margin:-.75px 0 0 -11px;background:currentColor;transform:rotate(45deg)}
.mobile-menu-close::after{transform:rotate(-45deg)}
.mobile-menu-close:hover{transform:rotate(90deg)}

.mm-links{display:flex;flex-direction:column;margin-top:.6rem;border-top:1px solid var(--cream-dark)}
.mm-link,.mm-group>summary{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:.65rem 0;border-bottom:1px solid var(--cream-dark);font-family:var(--serif);font-size:1.75rem;font-weight:400;line-height:1.15;color:var(--charcoal);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.mm-link[aria-current="page"]{color:var(--bronze-text)}
.mm-group>summary::-webkit-details-marker{display:none}
.mm-group>summary::marker{content:''}
.mm-plus{position:relative;width:32px;height:32px;flex-shrink:0;border:1px solid var(--cream-dark);border-radius:50%;transition:background-color .4s,border-color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.mm-plus::before,.mm-plus::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--bronze);transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s}
.mm-plus::after{transform:rotate(90deg)}
.mm-group[open] .mm-plus{background:var(--charcoal);border-color:var(--charcoal);transform:rotate(180deg)}
.mm-group[open] .mm-plus::before,.mm-group[open] .mm-plus::after{background:var(--off-white)}
.mm-group[open] .mm-plus::after{transform:rotate(0)}
.mm-sub{padding:.4rem 0 1.2rem;border-bottom:1px solid var(--cream-dark)}
.mm-group[open] .mm-sub{animation:mmSub .45s cubic-bezier(.22,1,.36,1)}
@keyframes mmSub{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mm-sub a{display:flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:.98rem;color:var(--text-mid)}
.mm-sub a[aria-current="page"]{color:var(--bronze-text);font-weight:500}
.mm-sub .mm-all{font-weight:500;color:var(--bronze-text)}
.mm-label{margin:1rem 0 .1rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-text)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
.mm-grid a{font-size:.92rem;line-height:1.3}

.mm-foot{display:flex;flex-direction:column;gap:.9rem;margin-top:auto;padding-top:2rem}
.mm-phone{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;border:1px solid var(--cream-dark);font-size:1.05rem;letter-spacing:.05em;color:var(--charcoal)}
.mm-phone svg{width:18px;height:18px}
.mm-foot .btn{justify-content:center;width:100%;min-height:52px;margin:0}
.mm-foot .btn,.mm-foot .btn span{color:var(--off-white)}

/* Entree en cascade des elements du panneau. */
.mobile-menu .mm-stagger{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mobile-menu.open .mm-stagger{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * .045s)}

/* ── Points de rupture ────────────────────────────────────────────────── */
@media(max-width:1180px){.header-nav{gap:1.4rem;margin-left:1.4rem}.header-right{gap:1.2rem}}
@media(max-width:1024px){
  .header-nav{display:none}
  .mobile-toggle{display:flex}
}
@media(min-width:1025px){.mobile-menu{display:none}}
@media(max-width:768px){
  .header{padding:.7rem 1.2rem}
  .header.scrolled{padding-top:.45rem;padding-bottom:.45rem}
  .header .header-cta{display:none}
  .logo-mark{width:62px;height:62px}
  .header.scrolled .logo-mark{width:50px;height:50px}
  .header--hero .logo-mark{width:100px;height:100px}
  .header--hero.scrolled .logo-mark{width:52px;height:52px}
  .header-phone{font-size:.8rem}
}
@media(max-width:380px){.header-phone{font-size:.74rem;letter-spacing:.02em}.mm-link,.mm-group>summary{font-size:1.55rem}}
@media(prefers-reduced-motion:reduce){
  .header,.logo-mark,.nav-link::after,.nav-dropdown-trigger::after,.nav-dropdown-menu,.mobile-menu,.mobile-menu .mm-stagger,.mm-plus,.mm-plus::before,.mm-plus::after{transition:none!important}
  .mm-group[open] .mm-sub{animation:none}
}