/* =====================================================================
   JOYDESIGN — Châssis partagé (header, menu, hero, fil d'Ariane, footer)
   Réutilisé par les pages intérieures. S'appuie sur joy.css.
   ===================================================================== */

/* ===== HEADER ===== */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; }
.hdr__in{ max-width:var(--maxw); margin-inline:auto; padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hdr__logo{ position:relative; display:block; width:160px; height:30px; }
.hdr__logo img{ height:30px; position:absolute; top:0; left:0; transition:opacity .4s var(--ease); }
.hdr__logo .dark{ opacity:0; }
.hdr__nav{ display:flex; align-items:center; gap:34px; }
.hdr__nav a{ font-size:.9rem; font-weight:500; color:var(--paper); letter-spacing:.01em; position:relative; transition:color .3s; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.hdr__nav a:hover::after{ transform:scaleX(1); }
.hdr__cta{ display:flex; align-items:center; gap:14px; }
.hdr.scrolled{ background:rgba(244,239,231,.92); backdrop-filter:blur(14px); border-color:var(--line); }
.hdr.scrolled .hdr__logo .dark{ opacity:1; }
.hdr.scrolled .hdr__logo .light{ opacity:0; }
.hdr.scrolled .hdr__nav a{ color:var(--ink); }
.hdr.scrolled .btn--on-dark{ --fg:var(--ink); --bd:var(--line-strong); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--paper); transition:.3s; }
.hdr.scrolled .burger span{ background:var(--ink); }

/* En-tête sur fond clair (pages sans hero sombre) */
.hdr--solid{ position:sticky; background:rgba(244,239,231,.92); backdrop-filter:blur(14px); border-color:var(--line); }
.hdr--solid .hdr__logo .dark{ opacity:1; }
.hdr--solid .hdr__logo .light{ opacity:0; }
.hdr--solid .hdr__nav a{ color:var(--ink); }

/* Swap logo Joydesign → Newdeco sur la sphère Particuliers (page 43 + sous-pages).
   Activé par body.is-newdeco-header (filter body_class dans inc/setup.php).
   NB : les !important sont nécessaires pour battre app.css qui force display:block + height:46px sur .hdr__logo img. */
.hdr__logo .logo--nd{ display:none !important; height:30px !important; top:8px !important; }
body.is-newdeco-header .hdr__logo .logo--joy{ display:none !important; }
body.is-newdeco-header .hdr__logo .logo--nd{  display:block !important; }
/* Le toggle light/dark reste identique : .light visible par défaut, .dark visible au scroll */
body.is-newdeco-header .hdr__logo .logo--nd.dark{ opacity:0; }
body.is-newdeco-header .hdr.scrolled .hdr__logo .logo--nd.dark{ opacity:1; }
body.is-newdeco-header .hdr.scrolled .hdr__logo .logo--nd.light{ opacity:0; }
body.is-newdeco-header .hdr--solid .hdr__logo .logo--nd.dark{ opacity:1; }
body.is-newdeco-header .hdr--solid .hdr__logo .logo--nd.light{ opacity:0; }

/* ===== HEADER — Sous-menu dropdown (Pros, Particuliers) ===== */
.hdr__nav-item{ position:relative; display:inline-flex; align-items:center; }
.hdr__nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.hdr__nav-item .caret{ font-size:.7em; opacity:.7; transition:transform .3s var(--ease); }
.hdr__nav-item:hover .caret,
.hdr__nav-item:focus-within .caret{ transform:rotate(180deg); opacity:1; }
.hdr__submenu{
	position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
	min-width:280px; padding:18px 8px;
	background:rgba(15,31,49,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
	border:1px solid rgba(244,239,231,.08); border-radius:var(--r-sm);
	box-shadow:0 18px 48px rgba(0,0,0,.32);
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .3s var(--ease) .8s, visibility .3s var(--ease) .8s, transform .35s var(--ease) .8s;
	display:flex; flex-direction:column; gap:2px;
	margin-top:10px;
}
/* Bridge invisible élargi (28px) pour absorber les mouvements diagonaux vers les items */
.hdr__submenu::before{
	content:""; position:absolute; left:-20px; right:-20px; top:-28px; height:28px;
}
.hdr__nav-item:hover .hdr__submenu,
.hdr__nav-item:focus-within .hdr__submenu{
	opacity:1; visibility:visible; pointer-events:auto;
	transform:translateX(-50%) translateY(0);
	transition-delay:0s;
}
.hdr__submenu a{
	display:block; padding:10px 18px; font-size:.86rem; font-weight:500;
	color:rgba(244,239,231,.82); white-space:nowrap;
	border-radius:6px; transition:all .25s var(--ease);
}
.hdr__submenu a:hover{
	background:rgba(176,141,87,.18); color:var(--paper);
}
.hdr__submenu a::after{ display:none !important; }
/* Variant header scrollé / solid : sous-menu reste sombre (lisibilité, contraste) */
.hdr.scrolled .hdr__submenu,
.hdr--solid .hdr__submenu{ background:rgba(15,31,49,.97); }
.hdr.scrolled .hdr__submenu a,
.hdr--solid .hdr__submenu a{ color:rgba(244,239,231,.86); }

/* ===== MOBILE MENU ===== */
.mmenu{ position:fixed; inset:0; z-index:80; background:var(--ink-bg); color:var(--paper); display:none; flex-direction:column; padding:90px var(--gutter) 40px; overflow-y:auto; }
.mmenu.open{ display:flex; }
.mmenu a{ font-family:var(--font-display); font-size:2rem; color:var(--paper); padding:14px 0; border-bottom:1px solid var(--line-light); }
.mmenu a.mmenu__parent{ font-size:1.9rem; }
.mmenu a.mmenu__child{
	font-family:var(--font-sans); font-size:1rem; font-weight:500;
	padding:8px 0 8px 14px; color:rgba(244,239,231,.72);
	border-bottom:0; letter-spacing:.02em;
}
.mmenu a.mmenu__child:hover{ color:var(--paper); }
.mmenu__x{ position:absolute; top:24px; right:var(--gutter); background:none; border:0; color:var(--paper); font-size:2rem; cursor:pointer; }

/* ===== HERO PAGE INTÉRIEURE ===== */
.phero{ position:relative; min-height:clamp(560px,82vh,860px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-bg); }
.phero__bg{ position:absolute; inset:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,49,.55) 0%, rgba(15,31,49,.22) 38%, rgba(15,31,49,.9) 100%); }
.phero__in{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%; padding:0 var(--gutter) clamp(40px,6vw,80px); color:var(--paper); }
.phero h1{ color:var(--paper); font-size:var(--t-h1); line-height:1; max-width:18ch; margin:18px 0 0; }
.phero__sub{ color:rgba(244,239,231,.85); font-size:var(--t-lead); max-width:52ch; margin-top:22px; }

/* fil d'Ariane */
.crumb{ display:flex; align-items:center; gap:10px; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:rgba(244,239,231,.7); font-weight:500; }
.crumb a{ color:rgba(244,239,231,.7); transition:color .3s; }
.crumb a:hover{ color:var(--paper); }
.crumb .sep{ color:var(--brass-soft); }
.crumb--dark{ color:var(--ink-3); }
.crumb--dark a{ color:var(--ink-3); }
.crumb--dark a:hover{ color:var(--ink); }

/* en-tête des pages légales (pas de hero image) */
.leg-head h1{ font-size:clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem); line-height:1.02; color:var(--ink); margin:0; max-width:16ch; }
.leg-head .is-style-leb-lead{ max-width:56ch; }
.leg-body .prose{ margin-inline:0; }

/* barre méta projet */
.metabar{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--line); background:var(--line); }
.metabar > div{ background:var(--paper); padding:24px clamp(18px,2vw,30px); }
.metabar dt{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--greige); font-weight:600; margin:0; }
.metabar dd{ margin:8px 0 0; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); line-height:1.1; }

/* ===== FOOTER ===== */
.ft{ background:var(--ink-bg); color:rgba(244,239,231,.7); }
.ft a{ color:rgba(244,239,231,.7); transition:color .3s; }
.ft a:hover{ color:var(--paper); }
.ft__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:clamp(56px,7vw,96px) 0 56px; }
.ft__col h5{ font-family:var(--font-sans); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--brass-soft); font-weight:600; margin:0 0 18px; }
.ft__col nav{ display:flex; flex-direction:column; gap:11px; font-size:.92rem; }
.ft__seo{ font-size:.82rem; color:rgba(244,239,231,.45); line-height:1.9; }
.ft__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; border-top:1px solid var(--line-light); font-size:.8rem; flex-wrap:wrap; }

@media (max-width:1024px){
  .hdr__nav{ display:none; }
  .burger{ display:flex; }
  .metabar{ grid-template-columns:1fr 1fr; }
  .ft__top{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:680px){
  .metabar{ grid-template-columns:1fr; }
  .ft__top{ grid-template-columns:1fr; }
}

/* Header : plage portable 1025–1400 px. La navigation et les boutons
   tiennent tout juste, et le logo Newdeco fait le double de large que
   celui de Joydesign. On resserre les espacements plutôt que de basculer
   tout le monde sur le menu burger. */
@media (min-width:1025px) and (max-width:1400px){
	header.hdr{ gap:26px !important; }
	.hdr__nav{ gap:20px; }
	.hdr__cta{ gap:10px !important; }
}
@media (min-width:1025px) and (max-width:1180px){
	header.hdr{ padding-inline:22px !important; }
	.hdr__nav{ gap:16px; }
	.hdr__nav a{ font-size:.85rem; }
	/* Le lockup Newdeco est horizontal : à hauteur égale il fait le double
	   de large que celui de Joydesign. On le réduit un peu sur cette plage. */
	body.is-newdeco-header .hdr__logo .logo--nd{ height:26px !important; }
}