/* Menu plein ecran (dropdown) + barre de navigation mobile.
   Inspire du menu Mel'PACK : overlay flou, carte arrondie, grands liens,
   et un panneau image qui change selon le lien survole.
   Le markup est injecte par menu.js (une seule source pour les 13 pages). */

/* ------------------------------------------------ declencheur dans la nav */
.menu-trig{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;
  padding:9px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.menu-trig:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.menu-trig:focus-visible{outline:2px solid var(--b3,#00d2b2);outline-offset:3px}
.mt-ico{position:relative;width:18px;height:10px;display:block;flex:none}
.mt-ico::before,.mt-ico::after{
  content:"";position:absolute;inset-inline-start:0;height:1.5px;
  background:currentColor;border-radius:2px;transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.mt-ico::before{top:0;width:18px}
.mt-ico::after{bottom:0;width:11px}
.menu-trig:hover .mt-ico::after{width:18px}

/* entre 901 et 1140px, les liens centres passaient sous EN/ع une fois le bouton Menu
   ajoute : le menu reprend toute la navigation, on masque donc les liens en ligne */
@media(max-width:1140px){nav .nav-links{display:none}}

/* ------------------------------------------------ barre de nav en mobile
   Le logo complet + EN/ع + "Let's talk" depassaient 375px et decalaient
   toute la page. On garde le symbole seul, et le CTA passe dans le menu. */
@media(max-width:900px){
  nav .nav-in{gap:12px}
  nav .nav-in .cta{display:none}
  /* le symbole occupe la partie gauche de l'image : on la recadre a 40x40 */
  nav .nav-in .logo img{width:40px;height:40px;object-fit:cover;object-position:0 50%}
  .menu-trig{padding:0;width:44px;height:44px;justify-content:center}
  .menu-trig .mt-lab{display:none}
}

/* ------------------------------------------------ overlay */
/* pas de backdrop-filter : un flou plein ecran recalcule par-dessus la video et
   l'animation de vagues du hero retardait visiblement l'ouverture en desktop */
.mnav{
  position:fixed;inset:0;z-index:300;
  background:rgba(8,24,32,.74);
  padding:14px;opacity:0;visibility:hidden;will-change:opacity;
  transition:opacity .22s cubic-bezier(.22,.61,.36,1),visibility .22s;
}
.mnav.open{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

.mnav-card{
  height:100%;background:#f0f5f7;color:#132a3a;border-radius:26px;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(-10px);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.mnav.open .mnav-card{transform:none}

.mnav-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:clamp(18px,2.4vw,32px) clamp(22px,4vw,64px) 0;
}
.mnav-close{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:#5e7280;padding:12px 0;display:inline-flex;gap:10px;align-items:center;
  transition:color .25s;
}
.mnav-close .x{font-size:18px;letter-spacing:0;line-height:1}
.mnav-close:hover{color:#132a3a}
.mnav-call{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:#5e7280;border-bottom:1px solid #cfdbe1;padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.mnav-call:hover{color:#132a3a;border-color:#132a3a}
body.ar .mnav-close,body.ar .mnav-call{letter-spacing:0}

.mnav-grid{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(24px,4vw,64px);
  padding:clamp(22px,3.4vw,52px) clamp(22px,4vw,64px) clamp(22px,3vw,40px);
}
.mnav-links{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);
  overflow-y:auto;align-content:start;padding-inline-end:8px;
}
.mcol{display:grid;gap:clamp(26px,3.4vw,46px);align-content:start}
.mg{display:grid;align-content:start}

/* surtitres : meme langage que les .slabel du site */
.ml{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:#0d7264;margin-bottom:clamp(10px,1.2vw,16px);
}
.ml::before{content:"";width:8px;height:8px;background:var(--b2,#00abbc)}
body.ar .ml{letter-spacing:0}

/* grands liens : gris au repos, navy au survol / page courante */
.mg a{
  font-weight:500;font-size:clamp(24px,2.3vw,36px);line-height:1.22;letter-spacing:-.4px;
  color:#9aabb5;justify-self:start;padding:2px 0;text-decoration:none;
  transition:color .3s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1);
}
.mg a:hover,.mg a:focus-visible,.mg a.cur{color:#132a3a}
.mg a:hover{transform:translateX(6px)}
.mg a:focus-visible{outline:2px solid var(--b3,#00d2b2);outline-offset:4px;border-radius:4px}
body.ar .mg a{letter-spacing:0;font-family:var(--ar,"Cairo",sans-serif);font-weight:700}
body.ar .mg a:hover{transform:translateX(-6px)}

/* ------------------------------------------------ panneau image */
.mnav-prev{position:relative;border-radius:18px;overflow:hidden;background:#0b1d2b}
.mnav-prev figure{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}
.mnav-prev figure.on{opacity:1}
.mnav-prev img{
  width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.mnav-prev figure.on img{transform:none}
.mnav-prev figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,24,32,.85),rgba(8,24,32,.1) 48%,rgba(8,24,32,.34));
}
.mnav-prev .pl{
  position:absolute;inset-inline-start:clamp(18px,2.4vw,34px);top:clamp(16px,2.2vw,30px);z-index:1;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--b3,#00d2b2);
}
.mnav-prev b{
  position:absolute;inset-inline:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,34px);z-index:1;
  font-family:var(--serif,"Playfair Display",Georgia,serif);font-weight:600;
  font-size:clamp(26px,2.8vw,46px);line-height:1.08;letter-spacing:-.8px;color:#fff;
  transform:translateY(10px);opacity:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1) .05s,opacity .4s cubic-bezier(.22,.61,.36,1) .05s;
}
.mnav-prev figure.on b{transform:none;opacity:1}
body.ar .mnav-prev b{font-family:var(--ar,"Cairo",sans-serif);font-weight:700;letter-spacing:0}
body.ar .mnav-prev .pl{letter-spacing:0}

/* ------------------------------------------------ menu en mobile */
@media(max-width:900px){
  .mnav{padding:8px}
  .mnav-card{border-radius:20px}
  .mnav-grid{grid-template-columns:1fr;overflow-y:auto}
  .mnav-prev{display:none}               /* pas de survol au doigt : pas d'image */
  .mnav-links{grid-template-columns:1fr;overflow:visible;padding-inline-end:0}
  .mg a{font-size:27px;color:#132a3a;padding:5px 0}
  .mg a:hover{transform:none}
  .mg a.cur{color:#0d7264}
  /* en une colonne : Certis, puis Services, et Contact en dernier (conclusion) */
  .mnav-links{display:flex;flex-direction:column;gap:30px}
  .mcol{display:contents}
  .mg[data-g="certis"]{order:1}
  .mg[data-g="services"]{order:2}
  .mg[data-g="contact"]{order:3}
}

@media(prefers-reduced-motion:reduce){
  .mnav,.mnav-card,.mnav-prev figure,.mnav-prev img,.mnav-prev b,.mg a{transition:none}
}