/* =========================================================
   Laumonier — en-tête, menu et appel téléphonique.
   Reprend les mesures de l'audit du 30/09 : le menu était en
   11,5 px, blanc atténué, très espacé, posé sur photo — de 4,4:1
   sur certaines pages. Ici : 14 px, blanc plein, interlettrage
   réduit, et un voile sous l'en-tête qui garantit la lisibilité
   sur toutes les photos.
   Chargé après clair.css.
   ========================================================= */

/* Voile dégradé sous l'en-tête, pour le texte posé sur photo. */
.voile-entete{
  position:absolute;inset:0 0 auto 0;height:170px;pointer-events:none;
  background:linear-gradient(rgba(10,10,11,.72),rgba(10,10,11,0));
  transition:opacity .3s ease;
}
.entete.scrolled .voile-entete{opacity:0}
body.entete-claire .voile-entete{display:none}

/* La barre d'en-tête occupe toute la largeur de l'écran, comme
   les photos depuis la suppression des cadres. Le contenu des
   pages, lui, reste dans la grille de 1 360 px. */
.wrap.hdr{max-width:none;padding-left:40px;padding-right:40px}
@media(max-width:700px){.wrap.hdr{padding-left:20px;padding-right:20px}}

/* Le logo ne doit jamais être comprimé par le menu. */
.hdr .marque{flex:0 0 auto}
.hdr .marque img{display:block}

/* Les entrées du menu. Une entrée ne se coupe jamais en deux
   lignes : elle reste sur une ligne, et c'est le seuil du menu
   mobile qui absorbe le manque de place. */
nav.principal{gap:20px;flex-wrap:nowrap}
nav.principal a{
  font-variation-settings:'wdth' 94,'wght' 600;
  font-size:14px;
  letter-spacing:.05em;
  color:#FFFFFF;
  padding:8px 0;
  white-space:nowrap;
}
nav.principal a:hover,
nav.principal a:focus-visible,
nav.principal a[aria-current="page"]{color:#fff;border-bottom-color:var(--jaune)}

/* « Nos équipements » porte le menu déroulant : son conteneur
   ne doit pas décaler l'entrée par rapport aux autres. */
nav.principal .avecmega{display:flex;align-items:center;flex:0 0 auto}

/* Le téléphone, avant le bouton de devis. */
.tel-entete{
  font-variation-settings:'wdth' 80,'wght' 700 !important;
  letter-spacing:.02em !important;
}

/* =========================================================
   Menu déroulant des familles
   ========================================================= */
.mega{
  background:#0A0A0B;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8);
}
.mega .in{max-width:1360px;margin:0 auto}
.mega a{
  font-size:14px;
  color:rgba(255,255,255,.88);
  font-variation-settings:'wdth' 100,'wght' 500;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mega a small{font-size:11.5px;color:#83868C}
.mega a:focus-visible{color:var(--jaune);padding-left:7px}

/* =========================================================
   Seuil du menu : six entrées, un numéro et un bouton ne
   tiennent pas en dessous. Sous ce seuil, tout passe dans le
   menu mobile, qui est de toute façon plus juste au toucher,
   et le numéro devient un bouton d'appel fixe.
   ========================================================= */
@media(max-width:1339px){
  nav.principal{display:none}
  .burger{display:block}
  .mega{display:none}
}
@media(min-width:1340px){
  nav.principal{display:flex}
  .burger{display:none}
}

/* =========================================================
   Bouton d'appel fixe sur téléphone et tablette.
   Ce métier vend au téléphone : le numéro doit être à un geste,
   depuis n'importe quelle page.
   ========================================================= */
.appel-fixe{display:none}
@media(max-width:1339px){
  .appel-fixe{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    height:54px;
    background:var(--jaune);color:#0A0A0B;
    font-variation-settings:'wdth' 88,'wght' 700;
    text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;
    box-shadow:0 -10px 30px -12px rgba(0,0,0,.7);
  }
  .appel-fixe:hover{background:#fff}
  body{padding-bottom:54px}
  body:has(.entete.ouvert) .appel-fixe{display:none}
}

/* Le chapeau des pages claires garde la marge de la grille :
   sans cela le titre se colle 40 px à gauche du logo. */
.wrap.chapeau{padding-left:40px;padding-right:40px}
@media(max-width:700px){.wrap.chapeau{padding-left:20px;padding-right:20px}}