/* ============================================================
   Navigation unique du site — utilisee par TOUTES les pages.
   Un seul bouton a trois barres, sur telephone comme sur ordinateur.
   Il ouvre un panneau ou TOUT est visible d'un coup : pas d'accordeon,
   pas de repli — chaque ligne est un lien vers une vraie page,
   y compris le nom du groupe.

   Les couleurs s'adaptent toutes seules :
   sur l'accueil elle prend les variables --ma-*,
   sur les pages interieures les variables --paper / --ink / --accent.
   ============================================================ */

.nv{
  --nv-bg:     var(--ma-bg,    var(--paper,   #fbfbfa));
  --nv-ink:    var(--ma-ink,   var(--ink,     #14191c));
  --nv-muted:  var(--ma-muted, var(--muted,   #56646a));
  --nv-line:   var(--ma-line,  var(--border,  #e0e5e3));
  --nv-accent: var(--ma-green, var(--accent,  #0d6b62));
  --nv-panel:  var(--ma-soft,  var(--surface, #f2f4f3));

  position:sticky; top:0; z-index:60;
  background:var(--nv-bg);
  border-bottom:1px solid var(--nv-line);
  font-family:var(--ma-sans, var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif));
  color:var(--nv-ink);
}
@supports (backdrop-filter: blur(12px)){
  .nv{ background:color-mix(in srgb, var(--nv-bg) 88%, transparent); backdrop-filter:blur(12px) saturate(1.3); }
}
/* Menu ouvert : fond plein, sinon le panneau laisse voir la page au travers. */
.nv.is-open{ background:var(--nv-bg); backdrop-filter:none }

.nv *{box-sizing:border-box}
/* style.css souligne les liens par une bordure : a neutraliser ici. */
.nv a{color:inherit; text-decoration:none; border-bottom:0; box-shadow:none}
.nv button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.nv :focus-visible{outline:2px solid var(--nv-accent); outline-offset:3px; border-radius:4px}

.nv-in{
  width:min(1160px, calc(100% - 48px)); margin:auto;
  display:flex; align-items:center; gap:14px;
  min-height:68px;
}

/* ---- marque ---- */
.nv-brand{
  display:inline-flex; align-items:center; gap:9px;
  font-size:17px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  margin-right:auto;
}
.nv-brand svg{width:26px; height:26px; flex:none; color:var(--nv-accent)}

/* ---- bouton trois barres, a toutes les largeurs ----
   Pas de cadre : trois traits fins dans une zone tactile de 44 px,
   le minimum recommande pour le doigt. */
.nv-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; margin-right:-10px;
  border-radius:50%; transition:background .18s;
}
.nv-toggle:hover{ background:color-mix(in srgb, var(--nv-ink) 8%, transparent) }
.nv-bars{ display:block; position:relative; width:19px; height:13px }
.nv-bars i{
  position:absolute; left:0; width:100%; height:1.6px; border-radius:2px;
  background:currentColor;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .12s linear;
}
.nv-bars i:nth-child(1){ top:0 }
.nv-bars i:nth-child(2){ top:5.7px }
.nv-bars i:nth-child(3){ top:11.4px }
.nv-toggle[aria-expanded="true"] .nv-bars i:nth-child(1){ transform:translateY(5.7px) rotate(45deg) }
.nv-toggle[aria-expanded="true"] .nv-bars i:nth-child(2){ opacity:0 }
.nv-toggle[aria-expanded="true"] .nv-bars i:nth-child(3){ transform:translateY(-5.7px) rotate(-45deg) }

/* ---- bouton contact et langue, gardes visibles en haut sur ordinateur ---- */
.nv-cta{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border:1px solid var(--nv-line); border-radius:22px;
  font-size:13.5px; white-space:nowrap;
  transition:border-color .18s, color .18s;
}
.nv-cta:hover{ border-color:var(--nv-accent); color:var(--nv-accent) }
.nv-lang{
  padding:9px 10px; border-radius:7px;
  font-family:var(--ma-mono, var(--mono, ui-monospace, Menlo, monospace));
  font-size:11.5px; letter-spacing:.09em; color:var(--nv-muted);
  transition:color .16s;
}
.nv-lang:hover{ color:var(--nv-accent) }

/* ============================================================
   Le panneau
   ============================================================ */
.nv-panneau{
  display:none;
  position:absolute; left:0; right:0; top:100%; z-index:5;
  background:var(--nv-bg);
  border-bottom:1px solid var(--nv-line);
  box-shadow:0 22px 40px -22px rgba(0,0,0,.4);
  max-height:calc(100dvh - 68px); overflow-y:auto;
}
.nv.is-open .nv-panneau{ display:block }

.nv-panneau-in{
  width:min(1160px, calc(100% - 48px)); margin:auto;
  display:grid; grid-template-columns:1fr 1fr minmax(0,.85fr);
  gap:34px 40px; padding-block:30px 36px;
}

.nv-col{ display:flex; flex-direction:column; gap:2px; align-items:stretch }

/* Le nom du groupe est lui-meme un lien vers une vraie page. */
.nv-titre{
  display:flex; align-items:center; gap:7px;
  padding:7px 11px; margin-bottom:6px; border-radius:7px;
  font:500 11px/1.4 var(--ma-mono, var(--mono, ui-monospace, Menlo, monospace));
  letter-spacing:.13em; text-transform:uppercase; color:var(--nv-muted);
  transition:color .16s, background .16s;
}
.nv-titre svg{ width:9px; height:9px; opacity:.6; flex:none }
.nv-titre:hover{ color:var(--nv-accent); background:var(--nv-panel) }
.nv-titre[aria-current="page"]{ color:var(--nv-accent) }

.nv-col > a:not(.nv-titre){
  display:block; padding:9px 11px; border-radius:7px;
  transition:background .14s;
}
.nv-col > a:not(.nv-titre):hover{ background:var(--nv-panel) }
.nv-col strong{ display:block; font-size:14.5px; font-weight:600 }
.nv-col span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color:var(--nv-muted) }
.nv-col a[aria-current="page"] strong{ color:var(--nv-accent) }

/* La carte de contact, au bout du panneau. */
.nv-carte{
  border:1px solid var(--nv-line); border-radius:11px;
  padding:20px; background:var(--nv-panel);
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  align-self:start;
}
.nv-carte p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--nv-muted) }
.nv-carte .nv-cta{ background:var(--nv-bg); border-color:var(--nv-accent); color:var(--nv-accent) }

/* Le voile qui ferme le menu quand on clique a cote. */
.nv-voile{
  display:none; position:fixed; inset:68px 0 0; z-index:4;
  background:rgba(8,18,15,.34);
}
.nv.is-open .nv-voile{ display:block }

/* ---- lien d'evitement clavier ---- */
.nv-skip{
  position:absolute; left:12px; top:-90px; z-index:70;
  padding:11px 15px; border-radius:8px;
  background:var(--nv-bg); border:1px solid var(--nv-accent); font-size:13.5px;
}
.nv-skip:focus{ top:11px }

/* ============================================================
   Telephone et petite tablette
   ============================================================ */
@media (max-width:879px){
  .nv-in{ width:calc(100% - 36px); min-height:60px; gap:10px }
  /* Le bouton contact et la langue descendent dans le panneau. */
  .nv-in .nv-cta, .nv-in .nv-lang{ display:none }

  .nv-panneau{ max-height:calc(100dvh - 60px) }
  .nv-panneau-in{
    width:calc(100% - 36px);
    grid-template-columns:1fr; gap:24px; padding-block:20px 28px;
  }
  .nv-voile{ inset:60px 0 0 }

  .nv-col > a:not(.nv-titre){ padding:12px 11px }
  .nv-col > a:not(.nv-titre) + a{ border-top:1px solid color-mix(in srgb, var(--nv-line) 70%, transparent) }
  .nv-col strong{ font-size:16px }
  .nv-carte{ align-items:stretch }
  .nv-carte .nv-cta{ justify-content:center; padding:14px 18px; font-size:15px }
  .nv-carte .nv-lang{ text-align:center }
}

@media (prefers-reduced-motion:reduce){
  .nv *{ transition:none !important }
}

/* L'en-tete reste affiche en haut : les ancres doivent s'arreter en dessous,
   sinon le titre vise passe derriere la barre. */
:target, [id]{ scroll-margin-top:84px }
@media (max-width:879px){ :target, [id]{ scroll-margin-top:74px } }

/* ============================================================
   Pied de page — partage lui aussi par toutes les pages.
   Il reprend exactement les groupes du menu, pour qu'un visiteur
   arrive en bas de page retrouve la meme organisation qu'en haut.
   ============================================================ */
.ft{
  --nv-bg:     var(--ma-bg,    var(--paper,   #fbfbfa));
  --nv-ink:    var(--ma-ink,   var(--ink,     #14191c));
  --nv-muted:  var(--ma-muted, var(--muted,   #56646a));
  --nv-line:   var(--ma-line,  var(--border,  #e0e5e3));
  --nv-accent: var(--ma-green, var(--accent,  #0d6b62));

  margin-top:70px; padding-block:46px 34px;
  border-top:1px solid var(--nv-line);
  background:var(--nv-bg); color:var(--nv-ink);
  font-family:var(--ma-sans, var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif));
  font-size:14px;
}
.ft a{color:inherit; text-decoration:none; border-bottom:0; box-shadow:none}
.ft a:hover{color:var(--nv-accent)}
.ft :focus-visible{outline:2px solid var(--nv-accent); outline-offset:3px; border-radius:4px}

.ft-in{
  width:min(1160px, calc(100% - 48px)); margin:auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:38px 30px;
}
.ft-brand a{display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; letter-spacing:-.02em}
.ft-brand svg{width:24px; height:24px; flex:none; color:var(--nv-accent)}
.ft-brand p{margin:11px 0 0; max-width:34ch; color:var(--nv-muted); line-height:1.55}

.ft-col{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.ft-col > p{
  margin:0 0 3px;
  font:500 10.5px/1.4 var(--ma-mono, var(--mono, ui-monospace, Menlo, monospace));
  letter-spacing:.13em; text-transform:uppercase; color:var(--nv-muted);
}
.ft-col > p a{color:inherit}

.ft-bas{
  grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:space-between;
  margin-top:8px; padding-top:22px; border-top:1px solid var(--nv-line);
  color:var(--nv-muted); font-size:13px;
}
.ft-bas p{margin:0}

@media (max-width:879px){
  .ft{margin-top:52px; padding-block:38px 30px}
  .ft-in{width:calc(100% - 36px); grid-template-columns:1fr 1fr; gap:32px 22px}
  .ft-brand{grid-column:1/-1}
}
@media (max-width:420px){
  .ft-in{grid-template-columns:1fr}
}