/* entete.css — la barre du haut, sur TOUTES les pages du site.

   Trois menus déroulants (services, secteurs, expertises), trois liens de
   section, la bascule de langue et l'appel à l'action. Le balisage est dans
   gabarits/blocs/entete.njk, le comportement dans assets/js/entete.js.

   Elle a sa feuille à elle parce qu'elle est partagée par des familles de
   pages qui, sinon, n'ont rien en commun : l'accueil a home.css, les
   témoignages testimonials.css, le journal blogs.css, le catalogue
   catalogue.css. Comme plan.css pour le plan du site.

   Les classes numérotées `nav-*` viennent des styles inline de la version 2,
   converties par outils/v2/convertis.mjs ; le suffixe -hv porte le survol.
   Les classes nommées `ag-*` sont les points d'accroche du JavaScript et les
   états — `is-actif` l'entrée courante, `is-ouvert` le menu déroulé.

   `--head-h` publie la hauteur de la barre. Les ancres de section et le
   panneau de menu s'en servent pour se placer dessous ; elle est déclarée
   ici, sur :root, parce que les ancres ne sont pas dans le sous-arbre de
   l'en-tête. Elle change au palier de 900 px. */

:root {
   --head-h: 81px
}

.nav-1 {
   position: relative;
   z-index: 40;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid #D3E2ED;
   font-family: Archivo, system-ui, sans-serif;
   color: #000A1C
}

.nav-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px;
   height: 80px;
   display: flex;
   align-items: center;
   gap: 28px
}

.nav-3 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: none
}

.nav-4 {
   width: 44px;
   height: 44px;
   display: block;
   transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}

.nav-5-hv:hover {
   transform: rotate(-8deg) scale(1.06) !important
}

.nav-6 {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -.01em
}

.nav-7 {
   display: flex;
   align-items: stretch;
   gap: 2px;
   margin-left: auto;
   height: 80px;
   font-size: 14.5px;
   color: #001751
}

.nav-8 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #946200;
   margin-left: -2px;
   transform: translateY(-6px)
}

.nav-9 {
   display: flex;
   align-items: center;
   gap: 14px;
   flex: none
}

.nav-10 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .06em;
   color: #001751;
   border: 1px solid #D3E2ED;
   padding: 8px 12px;
   white-space: nowrap
}

.nav-11 {
   color: #000A1C
}

.nav-12 {
   background: #000A1C;
   color: #fff;
   padding: 13px 20px;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   transition: background .25s, transform .25s
}

.nav-13-hv:hover {
   background: #946200 !important;
   color: #fff !important;
   transform: translateY(-1px) !important
}

.nav-14 {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   height: 100vh;
   background: rgba(0, 10, 28, .34);
   animation: navFade .22s both
}

.nav-15 {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   margin-top: 1px;
   background: #fff;
   border-bottom: 1px solid #D3E2ED;
   box-shadow: 0 40px 70px -30px rgba(0, 10, 28, .35);
   animation: navDrop .3s cubic-bezier(.2, .7, .2, 1) both
}

.nav-16 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 34px 64px 40px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   gap: 48px
}

.nav-17 {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-bottom: 18px
}

.nav-18 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200
}

.nav-19 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #5C7897
}

.nav-20 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 24px;
   border-top: 1px solid #D3E2ED
}

.nav-21 {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) auto;
   gap: 14px;
   align-items: start;
   padding: 18px 14px;
   border-bottom: 1px solid #D3E2ED;
   transition: background .2s, padding .25s
}

.nav-22-hv:hover {
   background: #F1F6FA !important;
   padding-left: 20px !important
}

.nav-23 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #946200;
   padding-top: 3px
}

.nav-24 {
   display: flex;
   flex-direction: column;
   gap: 5px
}

.nav-25 {
   font-size: 16.5px;
   font-weight: 600;
   letter-spacing: -.01em;
   color: #000A1C
}

.nav-26 {
   font-size: 13.5px;
   line-height: 1.45;
   color: #5C7897
}

.nav-27 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .06em;
   color: #5C7897;
   padding-top: 4px;
   white-space: nowrap
}

.nav-28 {
   background: #000A1C;
   color: #fff;
   padding: 28px 28px 26px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   transition: transform .3s cubic-bezier(.2, .7, .2, 1)
}

.nav-29-hv:hover {
   transform: translateY(-3px) !important;
   color: #fff !important
}

.nav-30 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .16em;
   color: #FFBA13
}

.nav-31 {
   font-size: 52px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   color: #FFBA13;
   margin-top: 10px
}

.nav-32 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #8DA9C4
}

.nav-33 {
   font-size: 15px;
   line-height: 1.5;
   color: #D3E2ED;
   margin-top: 8px;
   text-wrap: pretty
}

.nav-34 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #fff;
   margin-top: auto;
   padding-top: 16px
}

.nav-35 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   column-gap: 24px;
   border-top: 1px solid #D3E2ED
}

.nav-36 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   padding: 16px 14px;
   border-bottom: 1px solid #D3E2ED;
   transition: background .2s, padding .25s
}

.nav-37 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   transform: translateY(-2px)
}

.nav-38 {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -.01em;
   color: #000A1C;
   flex: 1;
   min-width: 0
}

.nav-39 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897;
   white-space: nowrap
}

.nav-40 {
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   padding: 28px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.nav-41 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .16em;
   color: #946200
}

.nav-42 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.2;
   text-wrap: balance
}

.nav-43 {
   font-size: 14.5px;
   line-height: 1.55;
   color: #001751;
   text-wrap: pretty
}

.nav-44 {
   margin-top: auto;
   background: #000A1C;
   color: #fff;
   padding: 13px 18px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   transition: background .25s
}

.nav-45-hv:hover {
   background: #946200 !important;
   color: #fff !important
}

.nav-46 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px
}

.nav-47 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 18px
}

.nav-48 {
   border-top: 1px solid #D3E2ED
}

.nav-49 {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 10px;
   border-bottom: 1px solid #D3E2ED;
   transition: background .2s, padding .25s
}

.nav-50-hv:hover {
   background: #F1F6FA !important;
   padding-left: 16px !important
}

.nav-51 {
   width: 16px;
   height: 16px;
   flex: none;
   display: block;
   object-fit: contain
}

.nav-52 {
   width: 16px;
   height: 16px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center
}

.nav-53 {
   width: 6px;
   height: 6px;
   background: #D3E2ED
}

.nav-54 {
   font-size: 15px;
   font-weight: 500;
   color: #000A1C;
   flex: 1;
   min-width: 0
}

.nav-55 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897
}

.nav-56 {
   background: #000A1C;
   color: #fff;
   padding: 28px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.nav-57 {
   font-size: 14.5px;
   line-height: 1.55;
   color: #D3E2ED;
   text-wrap: pretty
}

.nav-58 {
   margin-top: auto;
   background: #FFBA13;
   color: #000A1C;
   padding: 13px 18px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   transition: background .25s
}

.nav-59-hv:hover {
   background: #fff !important;
   color: #000A1C !important
}

.nav-60 {
   border-top: 1px solid #D3E2ED;
   background: #F1F6FA
}

.nav-61 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 14px 64px;
   display: flex;
   align-items: center;
   gap: 24px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #5C7897
}

.nav-62 {
   margin-left: auto;
   color: #946200;
   font-weight: 600;
   transition: letter-spacing .25s
}

.nav-63-hv:hover {
   letter-spacing: .16em !important
}

/* ===========================================================================
   Ce qui suit est écrit à la main : la v2 le calculait en JavaScript, à chaque
   rendu. Ici ce sont des classes, posées une fois par le gabarit (`is-actif`,
   l'entrée courante) ou par le navigateur (`is-ouvert`, le menu déroulé).
   =========================================================================== */

/* -- 1. Les déclencheurs de menu et les liens de section ------------------- */

.nav-t {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 0 14px;
   margin-bottom: -1px;
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   font: inherit;
   font-size: 14.5px;
   font-weight: 400;
   color: #001751;
   cursor: pointer;
   white-space: nowrap;
   transition: border-color .2s, color .2s
}

/* L'entrée de la page courante et le menu ouvert portent la même marque : un
   filet ambre sous la barre. C'est ce que faisait `on || cur` dans la v2. */
.nav-t.is-actif,
.nav-t.is-ouvert,
.nav-t:hover {
   border-bottom-color: #FFBA13;
   font-weight: 600;
   color: #000A1C
}

.nav-chev {
   font-size: 10px;
   color: #5C7897;
   display: inline-block;
   transition: transform .25s
}

.nav-t.is-ouvert .nav-chev {
   transform: rotate(180deg)
}

.nav-l {
   display: flex;
   align-items: center;
   padding: 0 14px;
   margin-bottom: -1px;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   color: #001751;
   font-weight: 400;
   transition: border-color .2s, color .2s
}

.nav-l.is-actif,
.nav-l:hover {
   border-bottom-color: #FFBA13;
   color: #000A1C
}

.nav-l.is-actif {
   font-weight: 600
}

/* -- 2. La barre elle-même ------------------------------------------------- */

/* Le panneau de menu se place sous la barre, à `--head-h` — déclarée en
   partie 1, sur :root. */
.ag-entete {
   position: sticky;
   top: 0;
   z-index: 40
}

/* Le conteneur s'efface au-dessus de 1100 px : ses enfants restent des
   éléments directs de la barre, et la mise en page de bureau est inchangée,
   au pixel près. En deçà, il devient le panneau déroulant. */
.ag-nav {
   display: contents
}

.ag-entete [hidden] {
   display: none !important
}

/* -- 3. Les panneaux ------------------------------------------------------- */

.ag-panneau {
   animation: navDrop .3s cubic-bezier(.2, .7, .2, 1) both
}

.ag-voile {
   animation: navFade .22s both
}

@keyframes navDrop {
   from {
      opacity: 0;
      transform: translateY(-8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes navFade {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

/* -- 4. Bascule de langue et bouton de menu -------------------------------- */

.ag-lang {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 35px;
   flex: none;
   border: 1px solid #D3E2ED;
   background: #fff;
   color: #001751;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .08em;
   font-weight: 600;
   transition: background .25s, color .25s, border-color .25s
}

.ag-lang:hover {
   background: #000A1C;
   border-color: #000A1C;
   color: #fff
}

.ag-burger {
   display: none;
   flex: none;
   width: 42px;
   height: 42px;
   padding: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   background: transparent;
   border: 1px solid #D3E2ED;
   cursor: pointer;
   transition: border-color .25s
}

.ag-burger-b {
   display: block;
   width: 17px;
   height: 1.5px;
   background: #000A1C;
   transition: transform .25s, opacity .25s
}

.ag-burger[aria-expanded="true"] .ag-burger-b:first-child {
   transform: translateY(3.25px) rotate(45deg)
}

.ag-burger[aria-expanded="true"] .ag-burger-b:last-child {
   transform: translateY(-3.25px) rotate(-45deg)
}


/* ===========================================================================
   Petits écrans. Mêmes paliers que l'accueil et les témoignages : rien n'est
   masqué, seules la grille et les gouttières changent.
   =========================================================================== */

/* -- jusqu'à 1180 px : les gouttières, et les grilles les plus larges ----- */
@media (max-width:1180px) {

   .nav-2,
   .nav-16,
   .nav-61 {
      padding-left: 40px;
      padding-right: 40px
   }

   /* Trois colonnes de services ou d'expertises ne tiennent plus : deux. */
   .nav-16 {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px
   }

   .nav-46 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .nav-35 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}


/* -- jusqu'à 1100 px : la navigation passe derrière un bouton -------------
   Trois menus, trois liens, la bascule de langue et l'appel à l'action
   demandent plus que la barre ne mesure. En deçà, on les replie.
   ------------------------------------------------------------------------- */
@media (max-width:1100px) {

   /* `backdrop-filter` ferait de l'en-tête le bloc conteneur de ses
     descendants `position:fixed` : le panneau serait enfermé dans les 81 px
     de la barre. Fond opaque à la place. */
   .nav-1 {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none
   }

   .ag-entete.is-menu-ouvert {
      z-index: 110
   }

   .ag-burger {
      display: flex;
      margin-left: auto
   }

   .ag-nav {
      position: fixed;
      top: var(--head-h);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      padding: 6px 40px 30px;
      background: #fff;
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s
   }

   .ag-entete.is-menu-ouvert .ag-nav {
      opacity: 1;
      visibility: visible;
      transform: none
   }

   .nav-7 {
      flex: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      height: auto;
      font-size: 16.5px
   }

   .nav-t,
   .nav-l {
      min-height: 53px;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #EAF1F7;
      border-top: none;
      font-size: 16.5px;
      font-weight: 500;
      white-space: normal
   }

   .nav-t.is-actif,
   .nav-t.is-ouvert,
   .nav-l.is-actif {
      border-bottom-color: #EAF1F7;
      color: #000A1C;
      font-weight: 600
   }

   /* Le chevron reprend son rôle : il indique un replié, pas un déroulé. */
   .nav-chev {
      margin-left: auto
   }

   .nav-8 {
      transform: none;
      margin-left: 6px
   }

   .nav-9 {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 10px;
      margin-top: auto;
      padding-top: 24px
   }

   .ag-lang {
      width: 100%;
      height: 46px
   }

   .nav-12 {
      padding: 16px;
      font-size: 15px;
      text-align: center
   }

   /* Le panneau n'est plus un calque : il se déplie sous son déclencheur,
     dans le flux du menu. Le voile n'a plus de sens. */
   .ag-panneau {
      position: static;
      margin: 0;
      border: none;
      border-bottom: 1px solid #EAF1F7;
      box-shadow: none;
      animation: none
   }

   .ag-voile {
      display: none !important
   }

   .nav-16 {
      padding: 18px 0 24px;
      gap: 24px
   }

   .nav-20,
   .nav-35,
   .nav-46,
   .nav-48 {
      grid-template-columns: minmax(0, 1fr)
   }

   .nav-28,
   .nav-40,
   .nav-56 {
      padding: 22px
   }

   .nav-61 {
      padding-left: 0;
      padding-right: 0;
      flex-wrap: wrap;
      gap: 10px
   }

   .nav-60 {
      background: transparent;
      border-top: 1px solid #EAF1F7
   }
}


/* -- jusqu'à 900 px : colonne unique, barre plus basse -------------------- */
@media (max-width:900px) {

   /* La barre perd 23 px : le panneau de menu et les ancres de section
     suivent, puisque les deux lisent cette variable. */
   :root {
      --head-h: 58px
   }

   .nav-2 {
      height: 57px;
      padding-left: 20px;
      padding-right: 20px;
      gap: 14px
   }

   .nav-4 {
      width: 34px;
      height: 34px
   }

   .nav-6 {
      font-size: 13.5px
   }

   .ag-nav {
      padding: 6px 20px 30px
   }

   .nav-31 {
      font-size: 40px
   }
}


/* -- jusqu'à 560 px : typographie du téléphone --------------------------- */
@media (max-width:560px) {

   .nav-6 {
      display: none
   }

   .nav-10 {
      display: none
   }

   .nav-25 {
      font-size: 15.5px
   }

   .nav-42 {
      font-size: 19px
   }
}

/* -- 5. Le fil d'avancement de lecture ------------------------------------
   Deux pixels d'ambre sous la barre, qui suivent le défilement. Du CSS seul :
   `animation-timeline: scroll(root)` n'a besoin d'aucun JavaScript. Là où le
   navigateur ne le connaît pas, le fil reste à zéro — invisible, et c'est
   très bien. Seules les pages longues le portent (`nav.progression`).
   ------------------------------------------------------------------------- */

.ag-progression {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 2px;
   background: #FFBA13;
   transform-origin: 0 50%;
   transform: scaleX(0);
   animation: agProgress 1s linear both;
   animation-timeline: scroll(root)
}

@keyframes agProgress {
   to {
      transform: scaleX(1)
   }
}