/* ============================================================
   CONODOR — en-tete commun a toutes les pages
   ------------------------------------------------------------
   Extrait de index.html le 2026-08-31 pour que les 24 pages
   partagent le meme en-tete. Ce fichier est charge APRES le
   <style> de chaque page : a specificite egale, c'est lui qui
   l'emporte sur l'ancien en-tete propre a la page.
   Les variables ont une valeur de repli au cas ou une page ne
   les definirait pas.
   ============================================================ */

/* ---- base ---- */
#nav { position:fixed; top:0; left:0; right:0; width:100%; max-width:100vw; overflow-x:hidden; z-index:900; display:flex; flex-direction:column; }
.nav-top { height:5px; background:url('../madras.webp') repeat-x left top; }
.nav-bar {
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw;
  background:rgba(4,14,16,.93);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,180,200,.15);
}
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo-illo { height:52px; width:auto; flex-shrink:0; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1; }
.nav-logo-name { font-family:var(--fh, 'Syne', sans-serif); font-weight:800; font-size:1.2rem; letter-spacing:4px; text-transform:uppercase; color:#fff; white-space:nowrap; }
.nav-logo-sub { font-size:.55rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--teal3, #A8EEF5); margin-top:3px; }
.nav-links { list-style:none; display:flex; align-items:center; gap:2.5rem; }
.nav-links a {
  font-family:var(--fh, 'Syne', sans-serif); font-weight:700;
  font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.55); position:relative; transition:color .25s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--teal, #00B4C8);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta {
  background:var(--teal, #00B4C8); color:var(--dark, #040E10) !important;
  padding:9px 22px; font-weight:700 !important; transition:background .2s !important;
}
.nav-cta:hover { background:var(--teal2, #00D4EC) !important; }
.nav-cta::after { display:none !important; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.burger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .34s cubic-bezier(.65,.05,.36,1), opacity .2s ease; }
.burger[aria-expanded='true'] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity:0; transform:scaleX(.4); }
.burger[aria-expanded='true'] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mob-scrim { position:fixed; inset:0; z-index:898; background:rgba(4,14,16,.72);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .34s ease, visibility .34s; }
.mob-scrim.open { opacity:1; visibility:visible; }
.mob-nav { position:fixed; top:64px; right:0; left:auto; z-index:899;
  height:calc(100dvh - 64px); overflow-y:auto; padding:1.6rem 0 2rem;
  display:flex; flex-direction:column; background:var(--dark, #040E10);
  width:min(85vw, 340px); max-width:100vw; box-sizing:border-box;
  border-left:1px solid rgba(0,180,200,.22);
  transform:translateX(101%); visibility:hidden;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), visibility .38s;
  overscroll-behavior:contain; }
.mob-nav.open { transform:none; visibility:visible; }
.mob-nav a {
  font-family:var(--fh, 'Syne', sans-serif); font-weight:700; font-size:1rem; letter-spacing:2px;
  color:rgba(255,255,255,.8); padding:1rem 4vw;
  border-bottom:1px solid rgba(255,255,255,.06); transition:color .2s, background .2s;
}
.mob-nav a:hover { color:#fff; background:rgba(0,180,200,.08); }
.mob-nav a { opacity:0; transform:translateX(18px);
  transition:opacity .3s ease, transform .38s cubic-bezier(.22,.61,.36,1), color .2s, background .2s; }
.mob-nav.open a { opacity:1; transform:none; }
.mob-nav.open a:nth-child(1) { transition-delay:.10s }
.mob-nav.open a:nth-child(2) { transition-delay:.15s }
.mob-nav.open a:nth-child(3) { transition-delay:.20s }
.mob-nav.open a:nth-child(4) { transition-delay:.25s }
.mob-nav.open a:nth-child(5) { transition-delay:.30s }
.mob-nav.open a:nth-child(6) { transition-delay:.35s }
.mob-nav.open a:nth-child(7) { transition-delay:.40s }
.mob-foot { margin-top:auto; padding:1.5rem 1.6rem 0; display:grid; gap:.9rem;
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease .42s, transform .35s ease .42s; }
.mob-nav.open .mob-foot { opacity:1; transform:none; }
.mob-cta { display:flex; align-items:center; justify-content:center; min-height:52px;
  background:var(--teal, #00B4C8); color:var(--dark, #040E10) !important; border-radius:8px;
  font-family:var(--fh, 'Syne', sans-serif); font-weight:800; font-size:.8rem; letter-spacing:2.5px;
  text-transform:uppercase; padding:0 1rem !important; opacity:1 !important; transform:none !important; }
.mob-tel { display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px;
  border:1px solid rgba(0,180,200,.4); border-radius:8px; color:var(--teal3, #A8EEF5) !important;
  font-family:var(--fh, 'Syne', sans-serif); font-weight:700; font-size:.95rem; letter-spacing:1.5px;
  padding:0 1rem !important; opacity:1 !important; transform:none !important; }
.mob-ms { height:8px; margin-top:1.4rem; background:url('../madras.webp') repeat-x left top; flex-shrink:0; }

@media (prefers-reduced-motion: reduce) {
  .mob-nav, .mob-nav a, .mob-scrim, .mob-foot, .burger span { transition:none !important; }
}

@media (max-width:1050px) {
  .nav-links { display:none; }
  .burger { display:flex; }
  .mob-nav { position:fixed; top:64px; right:0; left:auto; z-index:899;
    height:calc(100dvh - 64px); overflow-y:auto; padding:1.6rem 0 2rem; }
}

@media (max-width:620px) {
  .nav-logo-illo { height:38px; }
  .nav-logo-name { font-size:1rem; letter-spacing:2px; }
}

@media (max-width:620px) {
  .nav-cta { min-height:44px; padding:.7rem 1.2rem; display:inline-flex; align-items:center; }
  .burger { min-height:44px; min-width:44px; }
  .mob-nav a { min-height:52px; display:flex; align-items:center; padding:0 1.6rem; }
  .nav-bar { padding:0 3vw; }
  .nav-cta { padding:7px 12px !important; font-size:.58rem !important; white-space:nowrap; letter-spacing:1.5px !important; }
  .nav-logo-name { font-size:1rem; letter-spacing:2px; }
  .nav-logo-illo { height:30px; }
}

/* ── grand ecran : le menu telephone est retire de la page ──
   Sans cette regle il reste un bloc en position fixe, invisible mais
   focusable au clavier. */
@media (min-width:1051px) {
  .mob-nav, .mob-scrim { display:none; }
}