/* ============================================================
   TISSU ÉBÈNE — Nouvelle DA : header, footer, menu mobile,
   protection des photos. Partagé par toutes les pages refondues.
   ============================================================ */
:root{
  --ivory:#FAF6F0; --ivory-2:#F2EBE0; --ink:#1E1B17; --muted:#6E665A;
  --gold:#C9A96E; --bordeaux:#6E1F2A;
  --green:#2C3B33; --green-2:#222E28;          /* silo tapis */
  --violet:#3A2542; --violet-2:#2A1B31;        /* silo tapissier */
  --bois:#3C2A1D; --bois-2:#291B11;            /* silo ébéniste */
  --noir:#141210;                              /* pages maison : accueil, services, la maison, contact */
  --line:#E4DBCB; --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1); --maxw:1320px;
}
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
@media (max-width:900px){ .wrap{ padding:0 22px; } }

/* ==================== HEADER ====================
   Marque parfaitement centrée (grille 1fr auto 1fr),
   3 liens à gauche, 3 liens à droite, bouton devis à droite. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:30px; padding:24px 32px; color:var(--ivory);
  transition:transform .45s var(--ease), background .4s var(--ease),
             padding .35s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.nav.hidden{ transform:translateY(-102%); }
.nav.scrolled{ background:var(--ivory); color:var(--ink); padding-top:14px; padding-bottom:14px; box-shadow:0 1px 0 var(--line), 0 18px 40px -32px rgba(30,27,23,.4); }
.nav a{ text-decoration:none; }
.nav-side{ display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0; }
.nav-side.left{ justify-self:end; }
.nav-side.right{ justify-self:start; }
.nav-side a{ font-family:'Inter',sans-serif; font-size:11px; font-weight:500; color:currentColor; opacity:.85; letter-spacing:.14em; text-transform:uppercase; position:relative; padding:4px 0; white-space:nowrap; }
.nav-side a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.nav-side a:hover{ opacity:1; }
.nav-side a:hover::after{ width:100%; }
.nav .brand{ justify-self:center; text-align:center; color:currentColor; }
.nav .brand b{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:29px;
  letter-spacing:.16em; text-transform:uppercase; display:block; line-height:1; color:currentColor;
}
.nav .brand span{
  font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:.32em; text-transform:uppercase;
  opacity:.72; display:block; margin-top:9px; color:currentColor;
}
.nav-burger{ display:none; background:none; border:0; color:currentColor; cursor:pointer; }
@media (max-width:1120px){
  .nav{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; padding:14px 18px; }
  .nav.scrolled{ padding:11px 18px; }
  .nav-side{ display:none; }
  .nav-burger{ display:inline-flex; grid-column:1; grid-row:1; justify-self:start; align-items:center; justify-content:center; width:44px; height:44px; margin-left:-11px; }
  .nav .brand{ grid-column:2; grid-row:1; justify-self:center; }
  .nav .brand b{ font-size:19px; letter-spacing:.13em; }
  .nav .brand span{ font-size:7.5px; letter-spacing:.27em; margin-top:6px; }
}

/* Menu mobile plein écran */
.mmenu{ position:fixed; inset:0; z-index:120; background:rgba(18,16,13,.97); color:var(--ivory); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.mmenu.open{ opacity:1; pointer-events:auto; }
.mmenu a{ font-family:'Cormorant Garamond',Georgia,serif; font-size:25px; color:var(--ivory); text-decoration:none; }
.mmenu a.mmenu-devis{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--gold); padding:13px 26px; margin-top:10px; }
.mmenu-close{ position:absolute; top:20px; right:22px; background:none; border:0; color:var(--ivory); font-size:34px; line-height:1; cursor:pointer; font-family:'Inter',sans-serif; }

/* ==================== FOOTER ====================
   Marque monumentale centrée + 5 colonnes de prestations. */
.footer{ position:relative; z-index:5; background:var(--noir); color:rgba(250,246,240,.8); padding:92px 0 40px; font-family:'Inter',system-ui,sans-serif; line-height:1.65; }
/* Couleur du footer par silo : chaque prestation garde sa palette,
   et toutes ses sous-pages reprennent la couleur de la page mère.
   Sans classe = noir (accueil, services, la maison, contact, mentions). */
.footer.footer--tapis{ background:var(--green-2); }
.footer.footer--tapissier{ background:var(--violet-2); }
.footer.footer--ebeniste{ background:var(--bois-2); }
.f-haut{ text-align:center; padding:0 22px 62px; border-bottom:1px solid rgba(250,246,240,.12); margin-bottom:64px; }
.f-kicker{ display:block; font-size:10.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.footer .f-marque{
  display:inline-block; font-family:'Cormorant Garamond',Georgia,serif; font-weight:500;
  font-size:clamp(40px,7.2vw,102px); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ivory); margin:22px 0 18px; text-decoration:none; line-height:1; white-space:nowrap;
}
.footer .f-marque:hover{ color:var(--ivory); }
.f-tagline{ display:block; font-size:10px; letter-spacing:.44em; text-transform:uppercase; color:rgba(250,246,240,.55); }
.f-ornement{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px; }
.f-ornement .trait{ width:76px; height:1px; }
.f-ornement .trait.g{ background:linear-gradient(to right, transparent, var(--gold)); }
.f-ornement .trait.d{ background:linear-gradient(to left, transparent, var(--gold)); }
.f-ornement .losange{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex:none; }

.footer .f-grille{ display:grid; grid-template-columns:repeat(5, 1fr); gap:44px; }
.footer h4{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.footer .f-liste{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer a{ font-size:13.5px; font-weight:300; color:rgba(250,246,240,.8); text-decoration:none; transition:color .25s ease; }
.footer a:hover{ color:var(--gold); }
.f-liste .f-plus-item{ display:none; }
.f-liste.ouvert .f-plus-item{ display:block; }
.f-plus{
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.f-plus:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer .f-label{ display:block; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:22px 0 6px; }
.footer address{ font-style:normal; font-size:13.5px; font-weight:300; line-height:1.6; color:rgba(250,246,240,.75); }
.footer-bottom{ width:100%; max-width:var(--maxw); margin:60px auto 0; padding:26px 40px 0; border-top:1px solid rgba(250,246,240,.14); font-size:12px; color:rgba(250,246,240,.5); text-align:center; }
@media (max-width:1100px){ .footer .f-grille{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:900px){
  .f-haut{ padding-bottom:48px; margin-bottom:48px; }
  .footer .f-grille{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ padding:26px 22px 0; }
}

/* ==================== PROTECTION DES PHOTOS ==================== */
img, video{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.protection-toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%, 16px);
  max-width:min(92vw, 560px); z-index:220;
  background:rgba(20,18,16,.97); color:var(--ivory);
  border:1px solid var(--gold); padding:16px 24px;
  font-family:'Inter',sans-serif; font-weight:300; font-size:12.5px; line-height:1.65;
  text-align:center; opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.protection-toast b{ font-weight:600; color:var(--gold); }
.protection-toast.visible{ opacity:1; transform:translate(-50%, 0); }