/* ============================================================
   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; --gold-text:#826530; --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; }
}

/* ==================== FOCUS CLAVIER ====================
   Double repere encre + or : l'anneau reste lisible sur ivoire, fond sombre
   et photographie. Les !important neutralisent les anciens outline:none
   locaux sans modifier les etats de survol ni le focus a la souris. */
:where(
  a[href],
  button:not([disabled]),
  input:not([type="hidden"]):not([disabled]),
  select:not([disabled]),
  textarea:not([disabled]),
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:2px solid var(--gold) !important;
  outline-offset:4px !important;
  box-shadow:0 0 0 3px var(--ink) !important;
}
@supports not selector(*:focus-visible){
  :where(
    a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]),
    select:not([disabled]), textarea:not([disabled]), summary,
    [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])
  ):focus{
    outline:2px solid var(--gold) !important;
    outline-offset:4px !important;
    box-shadow:0 0 0 3px var(--ink) !important;
  }
}
@media (forced-colors:active){
  :where(
    a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]),
    select:not([disabled]), textarea:not([disabled]), summary,
    [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])
  ):focus-visible{
    outline-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* 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 h3{ 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,.62); 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); }

/* ---- Sous-menu du menu principal (Le journal sous La maison) ---- */
.nav-side .has-sub{ position:relative; }
.nav-side .has-sub > .sub{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:224px; margin:0; padding:10px 0; list-style:none;
  background:var(--ivory); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 20px 44px -30px rgba(30,27,23,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  z-index:60;
}
/* pont invisible : le survol ne se perd pas entre l'entrée et son sous-menu */
.nav-side .has-sub > .sub::before{ content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-side .has-sub:hover > .sub,
.nav-side .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-side .has-sub > .sub li{ display:block; margin:0; }
.nav-side .has-sub > .sub a{
  display:block; padding:9px 20px; color:var(--ink); opacity:.85;
  font-size:10.5px; white-space:nowrap;
}
.nav-side .has-sub > .sub a:hover{ opacity:1; color:var(--bordeaux); }
/* sur téléphone le menu est reconstruit à plat : pas de déroulant */
@media (max-width:900px){ .nav-side .has-sub > .sub{ display:none; } }

/* ================= SECTIONS LOCALES (pages villes tapissier) =================
   Deux blocs réutilisables : le bâti de la ville (split éditorial) et le
   déroulé d'une prise en charge (frise numérotée). Palette et polices du site. */

/* --- 1. Le bâti local : texte à gauche, repères à droite --- */
.loc-bati{ background:var(--ivory); padding:86px 22px; border-top:1px solid var(--line); }
.loc-bati .wrap{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start; }
.loc-bati .eyebrow{ display:block; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.loc-bati h2{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); line-height:1.16; color:var(--ink); margin:0 0 10px; }
.loc-bati h2 em{ font-style:italic; color:var(--violet, #3A2542); }
.loc-bati .rule{ width:56px; height:1px; background:var(--gold); margin:0 0 26px; }
.loc-bati p{ font-family:'Inter',sans-serif; font-size:15.5px; line-height:1.85; color:var(--muted); margin:0 0 16px; max-width:60ch; }
.loc-bati p:last-child{ margin-bottom:0; }
.loc-bati strong{ color:var(--ink); font-weight:600; }
.loc-reperes{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 30px 26px; }
.loc-reperes::before,.loc-reperes::after{ content:''; position:absolute; width:14px; height:14px; border:1px solid var(--gold); }
.loc-reperes::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.loc-reperes::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.loc-reperes .rep-t{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.loc-reperes dl{ margin:0; }
.loc-reperes dt{ font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; color:var(--ink); line-height:1.2; }
.loc-reperes dd{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.7; color:var(--muted); margin:4px 0 20px; }
.loc-reperes dd:last-child{ margin-bottom:0; }

/* --- 2. Le déroulé d'une prise en charge : frise numérotée --- */
.loc-etapes{ background:var(--paper,#F2EBE0); padding:86px 22px; border-top:1px solid var(--line); }
.loc-etapes .wrap{ max-width:900px; margin:0 auto; }
.loc-etapes .eyebrow{ display:block; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.loc-etapes h2{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:clamp(28px,3.4vw,40px); line-height:1.16; color:var(--ink); margin:0 0 10px; }
.loc-etapes h2 em{ font-style:italic; color:var(--violet,#3A2542); }
.loc-etapes .rule{ width:56px; height:1px; background:var(--gold); margin:0 0 42px; }
.loc-pas{ position:relative; padding-left:74px; padding-bottom:38px; }
.loc-pas:last-child{ padding-bottom:0; }
.loc-pas::before{ content:''; position:absolute; left:23px; top:46px; bottom:0; width:1px; background:var(--line); }
.loc-pas:last-child::before{ display:none; }
.loc-pas .n{ position:absolute; left:0; top:0; width:47px; height:47px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; color:var(--gold); background:var(--ivory); }
.loc-pas .pas-t{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:12px 0 8px; }
.loc-pas p{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.85; color:var(--muted); margin:0; max-width:62ch; }
.loc-pas strong{ color:var(--ink); font-weight:600; }

/* --- responsive --- */
@media (max-width:900px){
  .loc-bati{ padding:60px 20px; }
  .loc-bati .wrap{ grid-template-columns:1fr; gap:38px; }
  .loc-etapes{ padding:60px 20px; }
  .loc-pas{ padding-left:60px; padding-bottom:32px; }
  .loc-pas .n{ width:42px; height:42px; font-size:17px; }
  .loc-pas::before{ left:21px; top:42px; }
}
@media (prefers-reduced-motion:reduce){
  .loc-bati *,.loc-etapes *{ transition:none !important; animation:none !important; }
}

/* ==================== RENDU A LA DEMANDE ====================
   Les deux premieres sections restent toujours rendues : elles couvrent le
   premier ecran et son voisinage immediat. Les sections suivantes ne sont
   mises en page qu'a l'approche du viewport. La hauteur memorisee apres le
   premier rendu limite les variations de la barre de defilement. */
@supports (content-visibility:auto){
  body.page-hero-sombre > section:nth-of-type(n+3){
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}
@media print{
  body.page-hero-sombre > section:nth-of-type(n+3){
    content-visibility:visible;
    contain-intrinsic-size:none;
  }
}

/* --- mot de clôture des sections locales : rien ne remplace un échange --- */
.loc-appel{ margin:44px 0 0; padding:26px 30px; background:var(--ivory); border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:var(--radius); }
.loc-appel p{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.85; color:var(--muted); margin:0; max-width:66ch; }
.loc-appel strong{ color:var(--ink); font-weight:600; }
.loc-appel a{ color:var(--violet,#3A2542); font-weight:500; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; transition:color .22s var(--ease); }
.loc-appel a:hover{ color:var(--ink); }
@media (max-width:900px){ .loc-appel{ padding:22px 20px; margin-top:34px; } }

/* ==================== CONTRASTE DES PETITS TEXTES ====================
   L'or historique reste intact pour les filets, pictogrammes, bordures et
   textes sur fond sombre. Sa declinaison assombrie, de meme teinte et de
   meme saturation, est reservee aux libelles sur ivoire, papier ou blanc. */
body .subj .eyebrow,
body .process .head .eyebrow,
body .etapes .head .eyebrow,
body .aa .head .eyebrow,
body .matiere .head .eyebrow,
body .mag .head .eyebrow,
body .faq .head .eyebrow,
body .autres .head .eyebrow,
body .origins .head .eyebrow,
body .services .eyebrow,
body .gallery .gal-head .eyebrow,
body .france .head .eyebrow,
body .longread .head .eyebrow,
body .loc-bati .eyebrow,
body .loc-etapes .eyebrow,
body .process .step .n,
body .etapes .tarif-table th,
body .etapes .tarif-table td:first-child,
body .matiere .fcard .k,
body .faq .faq-q .sign,
body .duo2-card .duo2-k,
body .services .svc .n,
body .gallery .gal-item figcaption span,
body .longread .lr-card:not(.dark) .n,
body .loc-pas .n,
body .tek-eyebrow,
body section[class="section"] .eyebrow,
body .section.mag .eyebrow,
body #assurance .eyebrow,
body #assurance .an,
body #bons-reflexes .eyebrow,
body .bigsteps .eyebrow,
body .answer .eyebrow,
body .types .eyebrow,
body .types .types-grid > a:not(.accent) .n,
body .avant-apres > .wrap > .head .eyebrow,
body #origines-matieres .eyebrow,
body #origines-matieres .pr-more,
body #prestations .eyebrow,
body #prestations .pr-more,
body #prestations .mat-card .lnk,
body .snippet .snippet-k,
body .section.trio .tcard-more,
body .section.method-compact .eyebrow,
body .section.seo .eyebrow,
body #enlevement .eyebrow,
body #enlevement .idf-zone-k,
body #enlevement .idf-list li span,
body #tarifs .eyebrow,
body #tarifs .tf-k,
body #tarifs .tf-more,
body .section.rend .eyebrow,
body .section.resto-tease .eyebrow,
body #savoir-faire .eyebrow,
body #faq .eyebrow,
body .section.journey .eyebrow,
body .section.tapistrait .eyebrow,
body .section.tapistrait .tt-ar,
body .section.pillars .pl-k,
body .section.seo--tint .calc-k:not(.calc-k--sub),
body .section.seo--tint .path--soft .path-k,
body .section.etapes .head .h2 em,
body .editorial figcaption,
body .section.faq .eyebrow,
body .section.partners .eyebrow,
body .section.methode .eyebrow,
body .section.reels .eyebrow{
  color:var(--gold-text);
}

/* Une meme introduction est employee sur le panneau matieres sombre et dans
   les sections process/etapes claires. Sur papier, elle reprend le ton des
   autres chapos secondaires ; la variante sombre historique reste intacte. */
body .section.process .mats-lead,
body .section.etapes .mats-lead,
body .section.journey .mats-lead{
  color:var(--muted);
}
body .section.process .mats-lead strong,
body .section.etapes .mats-lead strong,
body .section.journey .mats-lead strong{
  color:inherit;
}

/* Ces cinq tableaux departementaux portent explicitement ce modificateur :
   eux seuls sont poses sur ivoire. Les autres tarif-table restent sur violet. */
body .section.tarifs-departement .eyebrow,
body .section.tarifs-departement .tarif-table th{
  color:var(--gold-text);
}
body .section.tarifs-departement .tarif-table td{
  color:var(--muted);
}
body .section.tarifs-departement .tarif-table td:nth-child(2){
  color:var(--ink);
}

/* Eyebrows sur papier : les memes composants conservent l'or clair dans les
   bandeaux sombres, mais utilisent l'or texte dans ces sections claires. */
body section.avant-apres .eyebrow,
body section.vl .eyebrow{
  color:var(--gold-text);
}

/* Le petit "ou" est du texte normal sur ivoire, malgre l'or decoratif des
   titres sombres qui emploient le meme element em. */
body .section.etapes .deroule .t em{
  color:var(--gold-text);
}

/* Cette note appartient a une section brune : ses emphases doivent conserver
   la couleur ivoire du paragraphe, pas une couleur secondaire pour fond clair. */
body .specs > .wrap > p strong{
  color:inherit;
}

/* Sur le bordeaux du bloc détachage, l'or historique manque le seuil de
   0,10 point seulement. Un mélange de 5 % d'ivoire conserve l'accent maison
   tout en passant AA, sans assombrir le fond ni employer --gold-text. */
body #detachage .detach-chips span{
  color:color-mix(in srgb,var(--gold) 95%,var(--ivory));
}