/* Le menu du site — autonome : mêmes couleurs, même police et même comportement sur toutes
   les pages, quelle que soit leur feuille de style (l'accueil v2 et les autres pages n'ont pas
   les mêmes jetons). Couleurs reprises de l'accueil (v2/v2.css). Sans JavaScript, « Métiers »
   et le menu mobile s'ouvrent quand même (<details>) ; menu.js ne fait que les refermer. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/bricolage-grotesque-variable.woff2") format("woff2"); }

.menu {
  --m-fond: #f3f4f1; --m-surface: #fcfcfb; --m-trait: rgba(20, 32, 24, .09); --m-trait-fort: rgba(20, 32, 24, .16);
  --m-encre: #151a17; --m-texte: #444d47; --m-discret: #737c75; --m-sauge: #3f6f4e; --m-sauge-fonce: #33603f; --m-sur-sauge: #f7faf7;
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--m-fond) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 var(--m-trait);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .menu {
    --m-fond: #101311; --m-surface: #161a17; --m-trait: rgba(225, 240, 230, .08); --m-trait-fort: rgba(225, 240, 230, .15);
    --m-encre: #eef1ee; --m-texte: #b9c2bb; --m-discret: #858f88; --m-sauge: #8dba9a; --m-sauge-fonce: #a2c9ad; --m-sur-sauge: #0f1712;
  }
}
:root[data-theme="sombre"] .menu {
  --m-fond: #101311; --m-surface: #161a17; --m-trait: rgba(225, 240, 230, .08); --m-trait-fort: rgba(225, 240, 230, .15);
  --m-encre: #eef1ee; --m-texte: #b9c2bb; --m-discret: #858f88; --m-sauge: #8dba9a; --m-sauge-fonce: #a2c9ad; --m-sur-sauge: #0f1712;
}

.menu-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; }
.menu-marque { display: flex; align-items: center; gap: 10px; font: 650 17.5px "Bricolage Grotesque", "Inter", system-ui, sans-serif; letter-spacing: -.015em; color: var(--m-encre); text-decoration: none; }
.menu-marque:hover { text-decoration: none; }
.menu-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--m-sauge); }

.menu-liens { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14.5px; }
.menu-liens > a, .menu .menu-metiers > summary { color: var(--m-texte); text-decoration: none; cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 150ms ease; }
.menu-liens > a:hover, .menu-metiers > summary:hover { color: var(--m-encre); text-decoration: none; }
.menu [aria-current="page"] { color: var(--m-encre); border-bottom-color: var(--m-sauge); }

/* Les pages stylent leurs <details> de FAQ (bordure, marge, « + » flottant) : rien de tout
   ça ne doit atteindre le menu. */
.menu details { border: 0; padding: 0; margin: 0; box-shadow: none; }
.menu details > summary { list-style: none; font: inherit; margin: 0; padding: 0; letter-spacing: normal; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0; }
.menu details > summary::after { float: none; }
.menu .menu-mobile > summary::after, .menu .menu-mobile[open] > summary::after { content: none; }
.menu-marque { white-space: nowrap; }
.menu-bouton .court { display: none; }
.menu details > summary::-webkit-details-marker { display: none; }
.menu-metiers { position: relative; }
.menu-metiers > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.menu .menu-metiers[open] > summary::after { content: ""; transform: rotate(225deg); margin-bottom: -1px; }
.menu-deroulant { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 250px; display: flex; flex-direction: column; padding: 8px; border-radius: 8px; background: var(--m-surface); box-shadow: 0 0 0 1px var(--m-trait-fort), 0 12px 32px -12px rgba(20, 40, 28, .25); }
.menu-deroulant a { padding: 8px 10px; border-radius: 6px; color: var(--m-encre); font-weight: 500; text-decoration: none; }
.menu-deroulant a:hover { background: color-mix(in srgb, var(--m-sauge) 10%, transparent); text-decoration: none; }
.menu-deroulant a[aria-current="page"] { color: var(--m-sauge); }
.menu-bientot { padding: 6px 10px 8px; font-size: 12.5px; line-height: 1.45; color: var(--m-discret); }
.menu-deroulant .menu-tous { border-top: 1px solid var(--m-trait); border-radius: 0 0 6px 6px; margin-top: 2px; padding-top: 10px; font-weight: 400; color: var(--m-texte); }

.menu-bouton { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 6px; background: var(--m-sauge); color: var(--m-sur-sauge); font-size: 14.5px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.menu-bouton:hover { background: var(--m-sauge-fonce); color: var(--m-sur-sauge); text-decoration: none; }

.menu-mobile { display: none; }
.menu .menu-mobile > summary { padding: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: var(--m-encre); }
.menu-burger, .menu-burger::before, .menu-burger::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; position: relative; }
.menu-burger::before, .menu-burger::after { content: ""; position: absolute; left: 0; }
.menu-burger::before { top: -6px; }
.menu-burger::after { top: 6px; }
.menu-mobile[open] .menu-burger { background: transparent; }
.menu-mobile[open] .menu-burger::before { top: 0; transform: rotate(45deg); }
.menu-mobile[open] .menu-burger::after { top: 0; transform: rotate(-45deg); }
.menu-panneau { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; padding: 8px 16px 16px; background: var(--m-surface); box-shadow: 0 1px 0 var(--m-trait), 0 16px 32px -16px rgba(20, 40, 28, .3); }
.menu-panneau a { padding: 13px 4px; border-bottom: 1px solid var(--m-trait); color: var(--m-encre); font-size: 16px; text-decoration: none; }
.menu-panneau a:last-child { border-bottom: 0; }
.menu-panneau a[aria-current="page"] { color: var(--m-sauge); font-weight: 600; border-bottom-color: var(--m-trait); }

.menu a:focus-visible, .menu summary:focus-visible { outline: 2px solid var(--m-sauge); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 960px) {
  .menu-liens { display: none; }
  .menu-bouton { margin-left: auto; }
  .menu-mobile { display: block; }
}
@media (max-width: 720px) {
  .menu-in { padding: 0 16px; gap: 10px; }
  .menu-bouton { height: 36px; padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .menu-bouton .long { display: none; }
  .menu-bouton .court { display: inline; }
}
@media (max-width: 380px) {
  .menu-marque { font-size: 16px; }
  .menu-bouton { padding: 0 10px; font-size: 13px; }
}