/* nav.css — barre de navigation (.ccnav). Chargé par navigation.php,
   donc appliqué sur TOUTES les pages, y compris celles qui ne chargent
   pas style.css (ex. index.php -> css/index.css). */
/* ============================================================
   Nouvelle barre de navigation (.ccnav) — 2026
   Barre horizontale sur ordinateur, tiroir + accordéons sur mobile.
   Accent vert. Préfixe cc- pour éviter tout conflit.
   ============================================================ */
:root{ --cc-accent:#22e06a; --cc-accent2:#00ffd0; --cc-glow:rgba(34,224,106,.30); }

#navigation{ background:transparent; text-align:left; }

.ccnav{
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  background:linear-gradient(180deg,#161618,#141416);
  border:0; border-bottom:1px solid rgba(255,255,255,.09); border-radius:0;
  padding:8px 18px; margin:0; width:100%; position:relative; box-sizing:border-box;
}
.cc-brand{ display:inline-flex; align-items:center; gap:9px; color:#fff;
  font-weight:800; letter-spacing:.3px; font-size:16px; text-decoration:none;
  padding:4px 12px 4px 4px; white-space:nowrap; }
.cc-brand img{ height:28px; width:auto; filter:drop-shadow(0 0 6px var(--cc-glow)); }
.cc-spacer{ flex:1 1 auto; }

.cc-item{ position:relative; display:inline-flex; align-items:center; gap:6px;
  color:#cfd2d6; background:none; border:none; font:inherit; cursor:pointer;
  text-decoration:none; padding:9px 13px; border-radius:10px; transition:.18s;
  white-space:nowrap; }
.cc-item:hover,.cc-item.active{ color:#fff; background:rgba(255,255,255,.06); }
.cc-item.cc-staff{ color:#8ff0b6; }
.cc-caret{ font-size:10px; opacity:.7; transition:transform .2s; }
.cc-menu.open .cc-caret{ transform:rotate(180deg); }
.cc-item::after{ content:""; position:absolute; left:13px; right:13px; bottom:4px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cc-accent),var(--cc-accent2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s; }
.cc-item:hover::after,.cc-item.active::after{ transform:scaleX(1); }
.cc-cta::after{ display:none; }

.cc-grade{ width:8px; height:8px; border-radius:50%; background:#e24b4a;
  box-shadow:0 0 6px rgba(226,75,74,.6); display:inline-block; }
.cc-grade.on{ background:var(--cc-accent); box-shadow:0 0 8px var(--cc-glow); }

.cc-menu{ position:relative; }
.cc-dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:212px;
  background:#1d1d20; border:1px solid rgba(255,255,255,.09); border-radius:12px;
  padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.55); z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s; }
.cc-menu:hover .cc-dropdown,.cc-menu.open .cc-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.cc-dd-link{ display:flex; align-items:center; gap:10px; color:#cfd2d6;
  text-decoration:none; padding:10px 12px; border-radius:8px; font-size:14px; transition:.15s; }
.cc-dd-link:hover{ background:rgba(34,224,106,.12); color:#fff; }
.cc-dd-sep{ height:1px; background:rgba(255,255,255,.09); margin:6px 4px; }
.cc-dd-head{ font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:#8a8d93; padding:8px 12px 4px; }

.cc-flags{ display:flex; align-items:center; gap:6px; padding-left:8px; }
.cc-flag{ display:inline-flex; align-items:center; opacity:.5; transition:.2s;
  text-decoration:none; padding:0 2px; }
.cc-flag img{ height:15px; width:auto; border-radius:2px; display:block; }
.cc-flag:hover,.cc-flag.active{ opacity:1; }
.cc-flag.active{ pointer-events:none; }

.cc-cta{ color:#eafffb; font-weight:700; border-radius:999px;
  background:radial-gradient(120% 180% at 10% 10%,#232323,#141416) padding-box,
             linear-gradient(90deg,var(--cc-accent),var(--cc-accent2)) border-box;
  border:2px solid transparent; }
.cc-cta:hover{ color:#fff; box-shadow:0 0 18px var(--cc-glow); }

/* ---- Ordinateur : barre toujours visible, bouton Menu masqué ---- */
@media (min-width:861px){
  #navigation, #navigation.hidden{ display:block !important; }
  #menu-toggle{ display:none !important; }
  /* « Pont » invisible qui couvre l'espace entre le bouton et le menu déroulant,
     pour que le survol suffise à atteindre les items (pas besoin de cliquer). */
  .cc-dropdown::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
}

/* ---- Mobile : tiroir vertical + sous-menus en accordéon ---- */
@media (max-width:860px){
  .ccnav{ flex-direction:column; align-items:stretch; gap:0; padding:6px; border-radius:12px; }
  .ccnav .cc-brand{ padding:12px 10px; }
  .ccnav .cc-spacer{ display:none; }
  .cc-item{ width:100%; justify-content:space-between; padding:14px 12px; border-radius:8px; }
  .cc-item::after{ display:none; }
  .cc-menu{ width:100%; }
  .cc-dropdown{ position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background:transparent; padding:0 0 6px 8px;
    max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .cc-menu.open .cc-dropdown{ max-height:560px; }
  .cc-dd-link{ padding:12px 12px 12px 20px; }
  .cc-flags{ padding:12px; }
  .cc-cta{ justify-content:center; }
}