/* ===========================================================================
   TEC'OFFICE M08 — navigation par solutions
   « Le mot des patrons : montrer les solutions ». Sous Impression, Mobilier et
   Amenagement, un panneau liste les solutions concretes, une seule ligne
   d'explication chacune. Le reste de l'en-tete de M08 est inchange.
   =========================================================================== */

/* ---- l'element de navigation : le lien + son bouton de deploiement ---- */
.hdr nav .nv{position:static;display:inline-flex;align-items:center;gap:0;}
.hdr nav .nv > a{padding-right:2px;}
.nv-tg{display:inline-grid;place-items:center;width:26px;min-height:44px;border:0;background:transparent;
  color:var(--ink2);cursor:pointer;padding:0;transition:color .3s var(--ease);}
.nv-tg svg{width:9px;height:9px;transition:transform .35s var(--ease);}
.nv-tg:hover,.nv.ouvert .nv-tg{color:var(--ink);}
.nv.ouvert .nv-tg svg{transform:rotate(180deg);}
.nv-tg:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:4px;}

/* ---- le panneau ---- */
.nv-pan{position:absolute;left:0;right:0;top:100%;z-index:79;
  background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(19,19,18,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* sortie : rapide */
  transition:opacity .14s ease-out,transform .14s ease-out,visibility 0s linear .14s;}
/* entree : un peu plus posee, courbe ease-out forte (skill emil-design-eng : UI < 300 ms) */
.nv.ouvert .nv-pan{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .26s cubic-bezier(.23,1,.32,1),visibility 0s;}
.nv-in{max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vh,38px) var(--pad) clamp(30px,4vh,44px);
  display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:clamp(24px,3vw,48px);align-items:start;}

.nv-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  padding-top:4px;border-top:2px solid var(--ink);}
.nv-lab b{display:block;margin-top:14px;font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);line-height:1.02;}
.nv-lab a{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.hdr nav .nv-lab a::after{display:none;}

.nv-sol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(var(--r,4),auto);grid-auto-flow:column;gap:0 clamp(18px,2.4vw,36px);}
.nv-sol li{border-top:1px solid var(--line);}
.hdr nav .nv-sol a{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:13px 0 14px;
  text-transform:none;letter-spacing:0;font-size:inherit;white-space:normal;min-height:0;color:inherit;}
.hdr nav .nv-sol a::after{display:none;}
.nv-sol .no{grid-row:1 / span 2;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute);
  padding-top:3px;transition:color .3s var(--ease);}
.nv-sol .t{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink);line-height:1.2;display:inline-flex;align-items:center;gap:8px;}
.nv-sol .t::after{content:"→";font-weight:400;opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
.nv-sol .d{font-size:12.5px;line-height:1.45;color:var(--mute);}
.nv-sol a:hover .t::after,.nv-sol a:focus-visible .t::after{opacity:1;transform:none;}
.nv-sol a:hover .no{color:var(--ink);}
.nv-sol a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.hdr nav .nv-cta{position:relative;display:flex;flex-direction:column;gap:8px;min-height:100%;
  padding:20px 20px 22px;background:var(--dark);color:#fff;border-radius:8px;text-transform:none;
  letter-spacing:0;white-space:normal;overflow:hidden;}
.hdr nav .nv-cta::after{display:none;}
.nv-cta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);}
.nv-cta .t{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.08;}
.nv-cta .d{font-size:12.5px;line-height:1.5;color:#c9c8c2;}
.nv-cta .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;display:inline-flex;gap:8px;align-items:center;}
.nv-cta .go i{font-style:normal;transition:transform .3s var(--ease);}
.nv-cta:hover .go i{transform:translateX(4px);}
.nv-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* entree echelonnee des solutions */
.nv-sol li{opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease) calc(var(--i,0) * 35ms + 60ms),transform .45s var(--ease) calc(var(--i,0) * 35ms + 60ms);}
.nv.ouvert .nv-sol li{opacity:1;transform:none;}
html.doux .nv-pan,html.doux .nv-sol li{transition:opacity .15s linear;transform:none;}

/* le panneau n'existe qu'en navigation large : en dessous, c'est le menu plein ecran */
@media (max-width:1100px){.nv-tg,.nv-pan{display:none;}}

/* Place dans la barre : les trois chevrons prennent 72 px. Pour que « Contact »
   ne passe jamais sous le bouton « Demander un devis » :
   - « Accueil » quitte la barre (le logo y mene, et il reste dans le menu) ;
   - jusqu'a 1349 px, la barre cede la place au menu plein ecran, qui liste
     lui aussi toutes les solutions. */
.hdr nav > a[href="index.html"]{display:none;}
.nv-tg{width:24px;}
@media (max-width:1349px){.hdr nav{display:none !important;}}

/* ---- menu plein ecran : les solutions sous chaque pole ---- */
.msub{list-style:none;margin:2px 0 14px 34px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;}
.msub a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#d6d5cf;text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease);}
.msub a:hover,.msub a:focus-visible{border-color:var(--sand);color:#fff;}
@media (max-width:600px){.msub{margin-left:0;}.msub a{min-height:40px;}}

/* Tres petits ecrans (320-374 px) : logo 202 px + « Devis » + menu = 383 px,
   la page se dezoomait a 369 px et rognait le bouton menu. Le logo cede la place. */
@media (max-width: 374px) {
  .hdr .logo img, .hdr.small .logo img { height: auto; width: min(40vw, 140px); }
  .hdr .hdr-act { gap: 8px; }
}

/* ---- menu plein ecran : TOUTES largeurs ----
   Defaut releve (passe responsive du 07/10) : sur 10 pages sur 11, .menu etait
   « overflow:hidden » sans marge haute, et .menu-in defilait a l'interieur. Le
   premier lien (« Accueil ») passait SOUS le logo, le bouton fermer partait avec
   le defilement et le bas du menu etait inaccessible. Le bureau avait le meme
   defaut : a 1280 x 720, « 01 Accueil » sous le logo ; a 1440 x 900 (accueil),
   « 07 Contact » et l'adresse coupes, sans defilement possible.
   Desormais, a toutes les largeurs : un seul defilement (le menu), le contenu
   commence sous le logo, le logo et le bouton fermer restent en place. Les
   tailles du bureau (logo 50 px, liens, marges laterales) sont inchangees. */
.menu {
  --m-cote: clamp(20px, 7vw, 110px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: calc(var(--m-haut, 104px) + env(safe-area-inset-top, 0px)) max(var(--m-cote), env(safe-area-inset-right, 0px))
    calc(44px + env(safe-area-inset-bottom, 0px)) max(var(--m-cote), env(safe-area-inset-left, 0px));
}
/* centre quand il tient dans l'ecran, en haut quand il deborde */
.menu .menu-in { overflow: visible; flex: 0 0 auto; width: 100%; margin-top: auto; margin-bottom: auto; }
/* bandeau haut : les liens qui remontent s'effacent sous le logo et le bouton
   fermer au lieu de passer derriere eux en pleine lisibilite. Plein sur les deux
   tiers (la hauteur du logo), puis fondu ; toujours au-dessus du premier lien
   (--m-voile < --m-haut) : rien n'est voile tant qu'on n'a pas fait defiler. */
.menu::before { content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none;
  height: calc(var(--m-voile, 100px) + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #101010 0%, #101010 62%, rgba(16,16,16,0) 100%); }
.menu .vbg { position: fixed; }
/* le logo reste en haut quand on fait defiler le menu (il passait avec les liens) */
.menu .menu-logo { position: fixed; top: calc(24px + env(safe-area-inset-top, 0px)); }
.menu .menu-close {
  position: fixed; top: calc(24px + env(safe-area-inset-top, 0px));
  display: grid; place-items: center; background: rgba(16,16,16,.78);
}
/* le fond sombre ci-dessus l'emportait sur le survol blanc : la croix (encre)
   disparaissait sur fond noir au passage de la souris */
.menu .menu-close:hover, .menu .menu-close:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }

/* telephones et tablettes : marges du texte, logo plus petit, fermer au pouce */
@media (max-width: 1279px) {
  .menu { --m-cote: var(--pad); --m-haut: 96px; --m-voile: 88px; }
  .menu .menu-logo { top: calc(22px + env(safe-area-inset-top, 0px)); left: max(var(--pad), env(safe-area-inset-left, 0px)); height: 42px; }
  .menu .menu-close {
    top: calc(20px + env(safe-area-inset-top, 0px)); right: max(var(--pad), env(safe-area-inset-right, 0px));
    width: 46px; height: 46px;
    border-color: rgba(255,255,255,.26);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .menu .menu-close:hover, .menu .menu-close:focus-visible { border-color: #fff; }
  .menu .mlink .mono { font-size: 11px; }
  /* puces des solutions : 44 px de haut, au pouce */
  .msub a { min-height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: .07em; }
  /* adresse, telephone et e-mail sur la meme ligne de base (les liens font 44 px) */
  .menu-foot > * { display: inline-flex; align-items: center; min-height: 44px; }
  /* telephone et e-mail : ce sont des gestes (appeler, ecrire), plus clairs que
     l'adresse pour qu'on les voie comme tels sur le fond video */
  .menu-foot a { color: #d6d5cf; text-decoration: none; transition: color .3s var(--ease); }
  .menu-foot a:hover, .menu-foot a:focus-visible { color: #fff; }
}
@media (max-width: 600px) {
  .menu { --m-haut: 92px; }
  .menu .menu-logo { height: 38px; }
  .menu .mlink { font-size: clamp(24px, 7.2vw, 30px); padding: 12px 0; gap: 14px; }
  .msub { margin: 6px 0 16px 0; gap: 8px; }
  .menu-foot { flex-direction: column; gap: 0; margin-top: 22px; font-size: 13px; }
}
@media (min-width: 601px) and (max-width: 1279px) {
  .menu { --m-haut: 112px; }
  .menu .mlink { font-size: clamp(32px, 4.6vw, 46px); padding: 10px 0; }
  .msub { margin: 8px 0 16px 34px; gap: 8px 10px; }
  .menu-foot { gap: 0 30px; margin-top: 26px; font-size: 13px; }
  /* l'adresse sur sa ligne, telephone et e-mail dessous (l'e-mail tombait seul) */
  .menu-foot > span:first-child { flex-basis: 100%; }
}
/* telephone a l'horizontale : 390 px de haut */
@media (max-width: 1279px) and (max-height: 500px) and (orientation: landscape) {
  .menu { --m-haut: 70px; --m-voile: 64px; }
  .menu .menu-logo { top: calc(14px + env(safe-area-inset-top, 0px)); height: 34px; }
  .menu .menu-close { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .menu .mlink { font-size: 24px; padding: 8px 0; }
  .msub { margin: 6px 0 12px 34px; }
}