/* LE BANDEAU DE NAVIGATION — la seule feuille qui le décrit.

   Il était déclaré dans quatre feuilles à la fois (agence.css,
   expertises-pages.css, integration.css et celle-ci), avec pour conséquence
   une allure qui dépendait de l'ORDRE de chargement : sur « L'agence » la
   feuille de page passait après, sur les autres pages c'était l'inverse. La
   pastille de contact en gardait un rayon de 40px sur l'accueil et 30px
   partout ailleurs. Tout est ici désormais : l'ordre ne change plus rien. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;}
.site-nav img{display:block;width:116px;height:auto;}
.site-nav nav{display:flex;align-items:center;}
.site-nav .nav-contact{border:1px solid;border-radius:30px;}

.site-nav{mix-blend-mode:normal;isolation:isolate;color:#f8f5ed;transition:color .25s ease;padding:16px 4%;}
.site-nav::before{content:"";position:absolute;z-index:-1;inset:0 0 -40px;background:linear-gradient(to bottom,rgba(16,23,25,.8),rgba(16,23,25,.38) 48%,transparent);pointer-events:none;transition:opacity .25s;}
.site-nav[data-tone="light"]{color:#16343c;}
.site-nav[data-tone="light"]::before{background:linear-gradient(to bottom,rgba(248,245,237,.94),rgba(248,245,237,.65) 48%,transparent);}
.site-nav[data-tone="light"] img{filter:brightness(0) saturate(100%);}
.site-nav nav{gap:25px;font-size:13px;}
.site-nav .nav-contact{border-color:currentColor;padding:11px 17px;}
.site-nav a{color:inherit;text-decoration:none;transition:color .18s;}
.site-nav nav a:hover{color:#ff7526;}
/* LE SOUS-MENU DES EXPERTISES — il s'ouvre au survol du lien, et au clavier
   par le focus (sans quoi il serait inatteignable sans souris).

   Le panneau n'est PAS collé sous le lien : c'est .nav-sous, transparent et
   plus grand, qui porte le survol, et .nav-sous-boite qui porte le décor. Sans
   ce sas, le menu se refermait dès que le pointeur quittait le lien pour
   descendre vers lui. */
/* La zone qui ouvre le menu était le lien seul : 61 px sur 16, on le ratait.
   On l'élargit de 12 px en haut et en bas, de 14 px de chaque côté, et on
   reprend la place en marge négative pour que la navigation ne bouge pas. */
.nav-groupe{position:relative;display:inline-flex;align-items:center;padding:12px 14px;margin:-12px -14px;}
.nav-sous{position:absolute;top:100%;left:50%;transform:translate(-50%,4px);
  /* le sas REMONTE de 8px sur le lien : sans ce chevauchement il restait une
     bande morte de quelques pixels où le survol se perdait et le menu se
     refermait pendant qu'on descendait vers lui */
  margin-top:-4px;padding-top:12px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .25s ease;}
.nav-groupe:hover .nav-sous,.nav-groupe:focus-within .nav-sous{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.nav-sous-boite{display:grid;gap:2px;padding:12px;min-width:250px;
  background:#0f1f26f5;color:#f8f5ed;border-radius:16px;border:1px solid #ffffff1f;
  box-shadow:0 22px 48px rgba(6,14,17,.45);}
.nav-sous a{display:block;padding:10px 14px;border-radius:10px;font-size:13px;white-space:nowrap;color:inherit;}
.nav-sous a:hover{background:#ffffff14;color:#ff7526;}
@media(prefers-reduced-motion:reduce){.nav-sous{transition:none;}}

.site-nav a:focus-visible,.menu-toggle:focus-visible,.mobile-navigation a:focus-visible,.menu-close:focus-visible{outline:2px solid #ff7526;outline-offset:6px;}
.menu-toggle{display:none;pointer-events:auto;color:inherit;background:none;border:0;width:48px;height:48px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:7px;}
.menu-toggle span{display:block;width:25px;height:2px;background:currentColor;border-radius:2px;}
.mobile-navigation{position:fixed;inset:0;margin:0 0 0 auto;width:min(100%,480px);height:100dvh;max-width:100%;max-height:100%;padding:18px 6% 35px;background:#101f25;color:#f8f5ed;border:0;box-sizing:border-box;}
.mobile-navigation::backdrop{background:rgba(8,16,19,.6);}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;}
.mobile-menu-head img{display:block;object-fit:contain;}
.menu-close{width:48px;height:48px;border:0;background:none;color:inherit;font-size:38px;cursor:pointer;}
.mobile-navigation nav{display:flex;flex-direction:column;gap:24px;padding-top:clamp(35px,9vh,90px);}
.mobile-navigation a{color:inherit;text-decoration:none;}
.mobile-navigation nav a{font-size:clamp(25px,6vw,36px);line-height:1.2;}
.mobile-navigation nav .mobile-contact{font-size:19px;color:#ff7526;margin-top:20px;}
/* pas de survol sur un écran tactile : les six expertises sont listées en
   retrait sous leur entrée, toujours visibles */
.mobile-sous{display:grid;gap:14px;padding:16px 0 4px 18px;border-left:1px solid #f8f5ed33;margin-top:16px;}
.mobile-sous a{font-size:17px;color:#cfdcdc;}

.mobile-navigation[open]{animation:menu-arrive .22s ease-out;}
@keyframes menu-arrive{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@media(max-width:900px){.site-nav{padding:12px 5%;}.site-nav nav{display:none;}.menu-toggle{display:flex;}.site-nav img{width:95px;}}
@media(prefers-reduced-motion:reduce){.site-nav,.site-nav::before,.site-nav a{transition:none;}.mobile-navigation[open]{animation:none;}}