/* Barre de navigation publique modernisée (SEPQ-32), templates/fragment_base/_barre_nav.html.twig.
   Mobile : menu ouvert = carte blanche, une ligne par rubrique (icône, libellé, chevron), sous-menus dépliés en gris-bleu.
   Ordinateur : fond bleu SEPQ translucide en haut de page (lisible sur tous les fonds, y compris les pages blanches),
   barre blanche après défilement (classe affix posée par custom.js).
   Sélecteurs en #siteNav pour passer devant styleMain.css et navBarMedia.css. L'admin a sa propre barre. */

/* Pas de cadre noir au clic (outline de Bootstrap 3 sur a:focus) ; anneau discret conservé au clavier */
#siteNav a:focus,
#siteNav button:focus {
  outline: none;
}
#siteNav a:focus-visible,
#siteNav button:focus-visible {
  outline: 2px solid #9cc0e8;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  #siteNav .nav-icone,
  #siteNav .nav-chevron {
    display: none;
  }
  /* Haut de page : bleu translucide flouté, textes blancs */
  #siteNav.navbar-default {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(11, 42, 85, .82);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(11, 42, 85, .15);
  }
  #siteNav.navbar-default .navbar-header .navbar-brand,
  #siteNav.navbar-default .nav > li > a,
  #siteNav.navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, .88);
  }
  #siteNav.navbar-default .navbar-header .navbar-brand:hover,
  #siteNav.navbar-default .nav > li > a:hover,
  #siteNav.navbar-default .nav > li.open > a,
  #siteNav.navbar-default .nav > li.open > a:hover,
  #siteNav.navbar-default .nav > li.open > a:focus {
    background-color: transparent;
    color: #fff;
  }
  /* Après défilement : barre blanche, textes bleu foncé (comme avant) */
  #siteNav.navbar-default.affix {
    background-color: var(--fond-carte, #fff);
    border-color: #fff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .1);
  }
  #siteNav.navbar-default.affix .navbar-header .navbar-brand,
  #siteNav.navbar-default.affix .navbar-header .navbar-brand:hover {
    color: #004683;
  }
  #siteNav.navbar-default.affix .nav > li > a,
  #siteNav.navbar-default.affix .nav > li > a:focus {
    color: #222;
  }
  #siteNav.navbar-default.affix .nav > li > a:hover,
  #siteNav.navbar-default.affix .nav > li.open > a,
  #siteNav.navbar-default.affix .nav > li.open > a:hover,
  #siteNav.navbar-default.affix .nav > li.open > a:focus {
    color: #004683;
  }
}

@media (max-width: 767px) {
  /* Barre fermée : blanche, logo arrondi, « SEPQ » en bleu, bouton menu encadré */
  #siteNav.navbar-default {
    background: var(--fond-carte, #fff);
    border: none;
    box-shadow: 0 2px 12px rgba(11, 42, 85, .08);
  }
  #siteNav .navbar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0; /* Bootstrap 3 met -15px de chaque côté : logo et menu collés aux bords */
    min-height: 54px;
  }
  #siteNav .navbar-header::before,
  #siteNav .navbar-header::after {
    display: none;
  }
  #siteNav .navbar-header .navbar-brand,
  #siteNav .navbar-header .navbar-brand:hover,
  #siteNav .navbar-header .navbar-brand:focus {
    align-items: center;
    color: var(--accent, #1e5fa8);
    display: flex;
    font-size: 20px;
    font-weight: 600;
    gap: 8px;
    height: auto;
    letter-spacing: .3px;
    margin-left: 0; /* Bootstrap 3 la décale de -15px */
    order: 1;
    padding: 10px 0;
    transition: none;
  }
  #siteNav .navbar-brand img {
    border-radius: 6px;
    height: 30px;
    width: 30px;
  }
  #siteNav .navbar-toggle {
    background: var(--fond-accent, #f1f6fc);
    border: 1.5px solid #9cc0e8;
    border-radius: 10px;
    margin: 0;
    order: 2;
    padding: 9px 10px;
  }
  #siteNav .navbar-toggle:hover,
  #siteNav .navbar-toggle:focus {
    background: var(--fond-accent-2, #e3edf9);
  }
  #siteNav .navbar-toggle .icon-bar {
    background: #1e5fa8;
    border-radius: 2px;
    height: 2px;
    width: 22px;
  }
  #siteNav .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  /* Menu ouvert : carte blanche arrondie */
  #siteNav .navbar-collapse {
    border: none;
    box-shadow: none;
    max-height: calc(100vh - 70px);
  }
  #siteNav .navbar-nav {
    background: var(--fond-carte, #fff);
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(11, 42, 85, .1);
    margin: 4px 0 14px;
    overflow: hidden;
  }
  #siteNav .navbar-nav > li > a,
  #siteNav .navbar-nav > li > a:focus,
  #siteNav .navbar-nav > li > a:hover,
  #siteNav .navbar-nav > li > a:focus:hover {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--bordure, #eef2f7);
    color: var(--texte, #0b2a55);
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 14px;
    padding: 14px 16px;
    transition: background-color .15s;
  }
  #siteNav .navbar-nav > li > a:hover,
  #siteNav .navbar-nav > li.open > a,
  #siteNav .navbar-nav > li.open > a:hover,
  #siteNav .navbar-nav > li.open > a:focus {
    background: var(--fond-page, #f4f7fb);
    color: var(--texte, #0b2a55);
  }
  #siteNav .nav-icone {
    color: var(--texte, #0b2a55);
    font-size: 18px;
    text-align: center;
    width: 22px;
  }
  #siteNav .nav-chevron {
    color: var(--accent, #1e5fa8);
    font-size: 13px;
    margin-left: auto;
    transition: transform .2s;
  }
  #siteNav li.open > a .nav-chevron {
    transform: rotate(90deg);
  }
  #siteNav .caret {
    display: none;
  }

  /* Sous-menus dépliés */
  #siteNav .navbar-nav .open .dropdown-menu {
    background: var(--fond-carte-2, #f8fafd);
    border-bottom: 1px solid var(--bordure, #eef2f7);
    padding: 4px 0;
  }
  #siteNav .navbar-nav .open .dropdown-menu > li > a,
  #siteNav .navbar-nav .open .dropdown-menu > li > a:hover,
  #siteNav .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--texte-2, #334866);
    font-size: 14px;
    padding: 9px 16px 9px 52px;
    transition: none;
  }
  #siteNav .navbar-nav .open .dropdown-menu > li > a:hover {
    color: var(--accent, #1e5fa8);
  }

  /* Réseaux sociaux en pied de carte, à droite et discrets, couleurs officielles actuelles
     (Facebook #0866FF depuis 2023, dégradé Instagram) */
  #siteNav #iconsNav {
    align-items: center;
    display: flex;
    font-size: 20px;
    gap: 14px;
    justify-content: flex-end;
    margin: 0;
    padding: 10px 16px;
  }
  #siteNav #iconsNav span {
    margin: 0;
  }
  #siteNav #iconsNav a {
    line-height: 1;
    opacity: .85;
    transition: opacity .15s;
  }
  #siteNav #iconsNav a:hover {
    opacity: 1;
  }
  #siteNav #iconsNav .fa-facebook {
    color: #0866ff;
  }
  #siteNav #iconsNav .fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Ordinateur : liens plus modernes (pastille au survol, sans agrandissement), chevron, menus déroulants en carte --- */
@media (min-width: 768px) {
  #siteNav .navbar-header .navbar-brand,
  #siteNav .navbar-header .navbar-brand:hover,
  #siteNav .navbar-header .navbar-brand:focus {
    align-items: center;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: .08em;
    transition: color .15s;
  }
  #siteNav .navbar-brand img {
    border-radius: 6px;
  }
  #siteNav .navbar-nav > li > a,
  #siteNav .navbar-nav > li > a:hover,
  #siteNav .navbar-nav > li > a:focus,
  #siteNav .navbar-nav > li > a:focus:hover {
    align-items: center;
    border-radius: 8px;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 6px;
    margin: 8px 2px;
    padding: 8px 14px;
    transition: background-color .15s, color .15s;
  }
  #siteNav.navbar-default .navbar-nav > li > a:hover,
  #siteNav.navbar-default .navbar-nav > li.open > a,
  #siteNav.navbar-default .navbar-nav > li.open > a:hover,
  #siteNav.navbar-default .navbar-nav > li.open > a:focus {
    background-color: rgba(255, 255, 255, .14);
  }
  #siteNav.navbar-default.affix .navbar-nav > li > a:hover,
  #siteNav.navbar-default.affix .navbar-nav > li.open > a,
  #siteNav.navbar-default.affix .navbar-nav > li.open > a:hover,
  #siteNav.navbar-default.affix .navbar-nav > li.open > a:focus {
    background-color: var(--fond-accent, #eef4fb);
  }
  /* Chevron vers le bas à la place du caret (rubriques à sous-menu seulement) */
  #siteNav .caret {
    display: none;
  }
  #siteNav .dropdown-toggle .nav-chevron {
    display: inline-block;
    font-size: 10px;
    opacity: .8;
    transform: rotate(90deg);
    transition: transform .2s;
  }
  #siteNav li.open > .dropdown-toggle .nav-chevron {
    transform: rotate(-90deg);
  }

  /* Menus déroulants : carte blanche arrondie, lignes en pastille au survol */
  #siteNav .navbar-nav > li > .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(11, 42, 85, .18);
    margin-top: 2px;
    min-width: 220px;
    padding: 6px;
  }
  #siteNav .navbar-nav > li > .dropdown-menu > li > a,
  #siteNav .navbar-nav > li > .dropdown-menu > li > a:hover,
  #siteNav .navbar-nav > li > .dropdown-menu > li > a:focus {
    border-radius: 8px;
    color: var(--texte, #0b2a55);
    font-size: 14.5px;
    font-weight: 500;
    padding: 9px 14px;
    transition: background-color .15s, color .15s;
  }
  #siteNav .navbar-nav > li > .dropdown-menu > li > a:hover,
  #siteNav .navbar-nav > li > .dropdown-menu > li > a:focus {
    background: var(--fond-accent, #eef4fb);
    color: var(--accent, #1e5fa8);
  }

  /* Réseaux sociaux (comme sur mobile) : couleurs officielles actuelles, dans de petites pastilles claires
     pour rester lisibles sur la barre bleue, discrets (légèrement atténués, nets au survol) */
  /* Rubriques et logos centrés sur la même ligne */
  #siteNav .navbar-nav.navbar-right {
    align-items: center;
    display: flex;
  }
  #siteNav #iconsNav {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0 10px 0 24px;
  }
  /* Le logo Facebook est enveloppé d'un span : même boîte que le lien Instagram */
  #siteNav #iconsNav span {
    display: flex;
    margin: 0;
  }
  #siteNav #iconsNav a {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    display: inline-flex;
    font-size: 15px;
    height: 28px;
    justify-content: center;
    opacity: .85;
    text-decoration: none;
    transition: opacity .15s, background-color .15s;
    width: 28px;
  }
  #siteNav #iconsNav a:hover {
    opacity: 1;
  }
  #siteNav.affix #iconsNav a {
    background: var(--fond-accent, #f1f6fc);
  }
  #siteNav #iconsNav i,
  #siteNav #iconsNav i:hover {
    transform: none;
  }
  #siteNav #iconsNav .fa-facebook {
    color: #0866ff;
  }
  #siteNav #iconsNav .fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Écrans moyens : pas la place pour les réseaux sociaux (comme navBarMedia.css) */
@media (min-width: 768px) and (max-width: 1150px) {
  #siteNav #iconsNav {
    display: none;
  }
}

/* Écrans moyens : libellés raccourcis par paliers, pour que la barre tienne sur une seule ligne sans laisser de vide.
   Mesuré : libellés complets + logo = 1 115 px (6 rubriques), + réseaux sociaux = 1 200 px.
   - 1020 à 1119 px : « Le Club » seulement
   - 768 à 1019 px  : « Le Club », « Classement », « Résultats », texte un peu plus petit
   - 768 à 899 px   : en plus, logo sans le texte « SEPQ » et espacements resserrés
   Réseaux sociaux masqués jusqu'à 1199 px. */
@media (min-width: 768px) {
  #siteNav .navbar-nav > li > a {
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #siteNav #iconsNav {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1119px) {
  #siteNav .nav-detail--club {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1019px) {
  #siteNav .nav-detail {
    display: none;
  }
  #siteNav .navbar-nav > li > a,
  #siteNav .navbar-nav > li > a:hover,
  #siteNav .navbar-nav > li > a:focus,
  #siteNav .navbar-nav > li > a:focus:hover {
    font-size: 14px;
    margin: 8px 0;
    padding: 8px 10px;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  #siteNav .navbar-nav > li > a,
  #siteNav .navbar-nav > li > a:hover,
  #siteNav .navbar-nav > li > a:focus,
  #siteNav .navbar-nav > li > a:focus:hover {
    font-size: 13px;
    padding: 8px 7px;
  }
  #siteNav .navbar-header .navbar-brand,
  #siteNav .navbar-header .navbar-brand:hover,
  #siteNav .navbar-header .navbar-brand:focus {
    font-size: 0; /* logo seul */
    gap: 0;
  }
}

/* Niveau des équipes dans « Classement Seniors » (R3, D2, D4, Foot à 7) : petite pastille discrète, comme l'agenda de l'accueil */
#siteNav .nav-niveau {
  background: var(--fond-accent, #e8eef7);
  border-radius: 6px;
  color: var(--accent, #1e5fa8);
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
  padding: 3px 7px;
  vertical-align: 1px;
  white-space: nowrap;
}
#siteNav .dropdown-menu > li > a:hover .nav-niveau,
#siteNav .dropdown-menu > li > a:focus .nav-niveau {
  background: var(--fond-carte, #fff);
}

/* ===== Interrupteur clair / sombre (SEPQ-36) ; styles de l'interrupteur : public/style/theme.css ===== */
#siteNav .nav-theme > a {
  align-items: center;
  display: flex;
}
/* Ordinateur : interrupteur seul, centré dans la barre */
@media (min-width: 768px) {
  #siteNav .nav-theme .nav-libelle {
    display: none;
  }
  #siteNav .navbar-nav > li.nav-theme > a {
    height: 50px;
    padding-bottom: 0;
    padding-top: 0;
  }
}
/* Mobile : ligne du menu, interrupteur à droite à la place du chevron */
@media (max-width: 767px) {
  #siteNav .nav-theme .theme-interrupteur {
    margin-left: auto;
  }
}

/* ===== Thème sombre (SEPQ-36) : barre de navigation ===== */
@media (min-width: 768px) {
  /* Après défilement : la barre reste bleu nuit translucide au lieu de passer en blanc */
  [data-theme="dark"] #siteNav.navbar-default.affix {
    background-color: rgba(7, 26, 51, .92);
    border-color: transparent;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .35);
  }
  [data-theme="dark"] #siteNav.navbar-default.affix .navbar-header .navbar-brand,
  [data-theme="dark"] #siteNav.navbar-default.affix .navbar-header .navbar-brand:hover,
  [data-theme="dark"] #siteNav.navbar-default.affix .nav > li > a,
  [data-theme="dark"] #siteNav.navbar-default.affix .nav > li > a:focus {
    color: rgba(255, 255, 255, .88);
  }
  [data-theme="dark"] #siteNav.navbar-default.affix .nav > li > a:hover,
  [data-theme="dark"] #siteNav.navbar-default.affix .nav > li.open > a {
    color: #fff;
  }
  [data-theme="dark"] #siteNav.affix #iconsNav a {
    background: rgba(255, 255, 255, .92);
  }
  /* Sous-menus déroulants */
  [data-theme="dark"] #siteNav .dropdown-menu {
    background: var(--fond-carte);
    border-color: var(--bordure);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  }
  [data-theme="dark"] #siteNav .dropdown-menu > li > a {
    color: var(--texte-2);
  }
  [data-theme="dark"] #siteNav .dropdown-menu > li > a:hover,
  [data-theme="dark"] #siteNav .dropdown-menu > li > a:focus {
    background: var(--fond-accent);
    color: #fff;
  }
}
@media (max-width: 767px) {
  [data-theme="dark"] #siteNav.navbar-default {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  }
  [data-theme="dark"] #siteNav .navbar-toggle {
    background: var(--fond-accent);
    border-color: var(--bordure-2);
  }
  [data-theme="dark"] #siteNav .navbar-toggle .icon-bar {
    background-color: var(--texte);
  }
  [data-theme="dark"] #siteNav .navbar-nav > li > a {
    border-bottom-color: var(--bordure);
  }
  [data-theme="dark"] #siteNav .nav-icone {
    color: var(--accent);
  }
  [data-theme="dark"] #siteNav .navbar-nav .open .dropdown-menu {
    background: var(--fond-carte-2);
  }
  [data-theme="dark"] #siteNav .navbar-collapse {
    border-color: var(--bordure);
  }
}
[data-theme="dark"] #siteNav .nav-niveau {
  background: var(--fond-accent);
}
/* « SEPQ » à côté du logo (mobile) : blanc en sombre */
[data-theme="dark"] #siteNav .navbar-header .navbar-brand,
[data-theme="dark"] #siteNav .navbar-header .navbar-brand:hover,
[data-theme="dark"] #siteNav .navbar-header .navbar-brand:focus {
  color: #fff;
}

/* Menu mobile : « Installer SEPQ » et « Thème sombre » traités en actions secondaires (maquette) : icône, texte et chevron
   atténués (65 %), texte à 95 %, pas de fond distinctif ; un trait les sépare des onglets principaux, qui restent prioritaires */
@media (max-width: 767px) {
  #siteNav .nav-installer .nav-icone,
  #siteNav .nav-installer .nav-libelle,
  #siteNav .nav-installer .nav-chevron,
  #siteNav .nav-theme .nav-icone,
  #siteNav .nav-theme .nav-libelle {
    opacity: .65;
  }
  #siteNav .nav-installer .nav-libelle,
  #siteNav .nav-theme .nav-libelle {
    font-size: .95em;
    font-weight: 500;
  }
  /* Interrupteur conservé mais plus discret */
  #siteNav .nav-theme .theme-interrupteur {
    opacity: .8;
    transform: scale(.9);
    transform-origin: right center;
  }
  /* Séparation avec les onglets principaux (au-dessus de la première action secondaire affichée) */
  #siteNav .navbar-nav > li.nav-installer > a,
  #siteNav .navbar-nav > li.nav-installer[hidden] + li.nav-theme > a {
    border-top: 1px solid var(--bordure, #edf1f6);
  }
}

/* Ordinateur : logo + « SEPQ » centrés verticalement avec les onglets (barre en flex au lieu des flottants Bootstrap 3) */
@media (min-width: 768px) {
  #siteNav > .container-fluid {
    align-items: center;
    display: flex;
  }
  #siteNav > .container-fluid::before,
  #siteNav > .container-fluid::after {
    display: none;
  }
  #siteNav .navbar-header {
    float: none;
  }
  #siteNav .navbar-collapse {
    flex: 1 1 auto;
  }
  #siteNav .navbar-header .navbar-brand {
    height: auto;
    padding-bottom: 0;
    padding-top: 0;
  }
}