/* ===================================================================
   Navbar Constellation v5.7 - charte groupe
   Menu déroulant (hover CSS, pas de JS pour les dropdowns).
   Entièrement scopé sous .c5nav pour ne pas entrer en collision
   avec les règles .nav / .nav-links / .nav-cta / .logo de tokens.css.
   =================================================================== */

.c5nav{ background:#0e123e; box-shadow:var(--shadow-raised); position:sticky; top:0; z-index:900; }
.c5nav *,.c5nav *::before,.c5nav *::after{ box-sizing:border-box; }
.c5inner{ max-width:1260px; margin:0 auto; padding:0 36px; display:flex; align-items:center; height:68px; gap:2px; }

/* LOGO */
.c5logo{ display:flex; align-items:center; margin-right:24px; cursor:pointer; text-decoration:none; flex-shrink:0; }
.c5logoimg{ height:26px; width:auto; display:block; }

/* NAV LINKS */
.c5links{ display:flex; align-items:center; flex:1; gap:1px; }
.c5ni{ position:relative; }
.c5ni::after{ content:''; position:absolute; top:100%; left:-20px; right:-20px; height:14px; background:transparent; }

.c5nl{ display:flex; align-items:center; gap:6px; padding:8px 14px; font-size:15px; font-weight:500; color:rgba(255,255,255,.82); border-radius:7px; cursor:pointer; transition:background .12s,color .12s; white-space:nowrap; user-select:none; text-decoration:none; }
.c5nl:hover,.c5ni:hover .c5nl{ background:rgba(255,255,255,.08); color:#fff; }
.c5nl.is-active{ color:#fff; background:rgba(255,255,255,.10); }

/* Chevron */
.c5chev{ display:inline-block; width:12px; height:12px; position:relative; flex-shrink:0; margin-left:-1px; }
.c5chev::before,.c5chev::after{ content:''; position:absolute; top:50%; width:5px; height:1.5px; background:currentColor; border-radius:1px; opacity:.45; transition:transform .2s,opacity .2s; }
.c5chev::before{ left:1px; transform:translateY(-50%) rotate(45deg); }
.c5chev::after{ right:1px; transform:translateY(-50%) rotate(-45deg); }
.c5ni:hover .c5chev::before{ transform:translateY(-50%) rotate(-45deg); opacity:.75; }
.c5ni:hover .c5chev::after{ transform:translateY(-50%) rotate(45deg); opacity:.75; }

/* DROPDOWN */
.c5drop{ position:absolute; top:calc(100% + 10px); left:0; background:#fff; border-radius:7px; box-shadow:var(--shadow-raised); border:1px solid #eaeaf2; padding:8px; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:top left; transition:opacity .18s,transform .18s; z-index:200; }
.c5ni:hover .c5drop{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.c5drop-c{ left:50%; transform:translateX(-50%) translateY(-8px) scale(.97); transform-origin:top center; }
.c5ni:hover .c5drop-c{ transform:translateX(-50%) translateY(0) scale(1); }
.c5drop-r{ left:auto; right:0; transform-origin:top right; }

.c5grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.c5col{ display:flex; flex-direction:column; gap:2px; }
.c5sep{ height:1px; background:#f0f0f6; margin:6px 4px; }

/* DROPDOWN ITEM */
.c5di{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:7px; cursor:pointer; border-left:2px solid transparent; transition:background .1s,border-color .1s; text-decoration:none; }
.c5di:hover{ background:#f4f1fb; border-left-color:#5551CF; }
.c5t{ font-size:13px; font-weight:600; color:#14142a; white-space:nowrap; line-height:1.3; transition:color .1s; }
.c5di:hover .c5t{ color:#5551CF; }
.c5d{ font-size:13px; color:#333333; white-space:nowrap; line-height:1.3; }

/* Pole headers */
.c5ph{ white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:10px 14px 3px; display:flex; align-items:center; gap:7px; }
.c5ph::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.c5ph+.c5ph,.c5di+.c5ph{ white-space:nowrap; margin-top:6px; }

/* Pole colors */
.c5dc{ color:#5551CF; }
.c5sec{ color:#211674; }
.c5res{ color:#1E829A; }
.c5biz{ color:#7B4DB8; }

/* Per-pole hover */
.c5di.dc:hover{ background:#eeeeff; border-left-color:#5551CF; }
.c5di.dc:hover .c5t{ color:#5551CF; }
.c5di.sec:hover{ background:#ebebf4; border-left-color:#211674; }
.c5di.sec:hover .c5t{ color:#211674; }
.c5di.res:hover{ background:#e4f4f8; border-left-color:#1E829A; }
.c5di.res:hover .c5t{ color:#1E829A; }
.c5di.biz:hover{ background:#f0eafc; border-left-color:#7B4DB8; }
.c5di.biz:hover .c5t{ color:#7B4DB8; }

/* Icône (Nos métiers) */
.c5row{ flex-direction:row; align-items:center; gap:10px; }
.c5ico{ width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .1s; }
.c5ico svg{ width:15px; height:15px; }
.c5di.dc .c5ico{ background:#eeeeff; color:#5551CF; }
.c5di.sec .c5ico{ background:#eae8f3; color:#211674; }
.c5di.res .c5ico{ background:#e2f2f6; color:#1E829A; }
.c5di.biz .c5ico{ background:#ede8f9; color:#7B4DB8; }
.c5di.dc:hover .c5ico{ background:#dddeff; }
.c5di.sec:hover .c5ico{ background:#d9d6ed; }
.c5di.res:hover .c5ico{ background:#cfe9ef; }
.c5di.biz:hover .c5ico{ background:#e0d4f5; }

/* CTA + dark mode */
.c5right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.c5cta{ padding:10px 22px; background:#fff; color:#0e123e; border:none; border-radius:7px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .12s,color .12s; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; }
.c5cta:hover{ background:#f0edf9; color:#5551CF; }
.c5dm{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:7px; cursor:pointer; color:rgba(255,255,255,.62); transition:background .12s,color .12s; flex-shrink:0; background:transparent; border:none; }
.c5dm:hover{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); }
.c5dm svg{ width:16px; height:16px; fill:currentColor; }

/* Burger (mobile) */
.c5burger{ display:none; margin-left:auto; width:40px; height:40px; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.c5burger span{ display:block; height:2px; width:22px; background:#fff; border-radius:2px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .c5inner{ padding:0 20px; }
  .c5burger{ display:flex; }
  .c5links{ position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:#0e123e; padding:8px 12px 16px; box-shadow:var(--shadow-raised); max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .c5nav.open .c5links{ max-height:80vh; overflow:auto; }
  .c5ni{ position:static; }
  .c5nl{ justify-content:space-between; padding:12px 10px; }
  .c5drop,.c5drop-c,.c5drop-r{ position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none; border:none; background:rgba(255,255,255,.04); border-radius:7px; width:auto !important; margin:2px 0 6px; padding:6px; }
  .c5grid2{ grid-template-columns:1fr; }
  .c5t{ color:#fff; }
  .c5d{ color:rgba(255,255,255,.85); }
  .c5di:hover .c5t{ color:#fff; }
  .c5right{ margin-left:auto; }
}

/* CSN-HOVER3 - hover soulignement des marques */
.c5col .c5di:hover,.c5col .c5di.dc:hover,.c5col .c5di.sec:hover,
.c5col .c5di.res:hover,.c5col .c5di.biz:hover{ background:transparent; border-left-color:transparent; }
.c5col .c5t{ align-self:flex-start; background-image:linear-gradient(#5551CF,#5551CF);
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1.5px;
  transition:background-size .16s ease,color .16s ease; }
.c5col .c5di:hover .c5t,.c5col .c5di.dc:hover .c5t,.c5col .c5di.sec:hover .c5t,
.c5col .c5di.res:hover .c5t,.c5col .c5di.biz:hover .c5t{ color:#5551CF; background-size:100% 1.5px; }
@media (max-width:1080px){
  .c5col .c5t{ background-image:none; color:#fff; }
  .c5col .c5di:hover .c5t{ color:#fff; }
}

/* CSN-MENUSOON - entrées de menu dont la page n'est pas encore publiée */
.c5di.is-soon{ cursor:default; opacity:.45; }
.c5di.is-soon:hover{ background:transparent; border-left-color:transparent; }
.c5di.is-soon:hover .c5t{ color:inherit; }

/* CSN-HOVER4 - survol uniforme sur TOUS les sous-menus (plus seulement .c5col) :
   soulignement du libelle, aucun aplat, aucun filet a gauche. */
.c5di:hover,.c5di.dc:hover,.c5di.sec:hover,.c5di.res:hover,
.c5di.biz:hover{ background:transparent; border-left-color:transparent; }
.c5di .c5t{ align-self:flex-start; background-image:linear-gradient(#5551CF,#5551CF);
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1.5px;
  transition:background-size .16s ease,color .16s ease; }
.c5row .c5t{ align-self:center; }
.c5di:hover .c5t,.c5di.dc:hover .c5t,.c5di.sec:hover .c5t,
.c5di.res:hover .c5t,.c5di.biz:hover .c5t{ color:#5551CF; background-size:100% 1.5px; }
.c5di.dc:hover .c5ico{ background:#eeeeff; }
.c5di.sec:hover .c5ico{ background:#eae8f3; }
.c5di.res:hover .c5ico{ background:#e2f2f6; }
.c5di.biz:hover .c5ico{ background:#ede8f9; }
.c5di.is-soon:hover .c5t{ color:inherit; background-size:0 1.5px; }
@media (max-width:1080px){
  .c5di .c5t{ background-image:none; color:#fff; }
  .c5di:hover .c5t{ color:#fff; }
}

/* CSN-GRPRIGHT */
/* .c5links a deja flex:1 : il suffit de pousser l'entree marquee au bout,
   et de rendre son .margin-left:auto au .c5right qui n'en a plus besoin.
   Le panneau, cale a left:0, est bascule a droite pour ne pas deborder. */
@media (min-width:1081px){
  .c5nav.c5grpright .c5ni--grp{margin-left:auto;}
  .c5nav.c5grpright .c5right{margin-left:0;}
  .c5nav.c5grpright .c5ni--grp .c5drop{left:auto;right:0;transform-origin:top right;}
}
/* /CSN-GRPRIGHT */