/* Navigation mobile : rendre les méga-menus ouvrables sous 992 px.
 *
 * Sur grand écran, les panneaux s'ouvrent au survol (style.css:18588). Sous
 * 992 px il n'y a pas de survol : le chevron dessiné par .dropdown-toggle
 * annonçait un sous-menu que rien n'ouvrait, et le clic partait vers la page
 * index. Les 46 pages de services n'étaient donc atteignables au doigt que par
 * cette page index.
 *
 * Un vrai bouton assure désormais l'ouverture, et cette feuille lui donne sa
 * forme ainsi que le comportement en accordéon du panneau.
 *
 * Chargée après les feuilles de base, sans condition de thème : il s'agit de
 * mise en page, pas de couleur.
 */

/* Toutes les règles ci-dessous s'arrêtent au point de bascule de la barre de
   navigation, qui est en navbar-expand-lg. */
@media (max-width: 991.98px) {

  /* --- Le bouton d'ouverture ------------------------------------------- */

  /* L'entrée devient le repère de position du bouton, posé à sa droite.
     Toutes ces règles visent .dropdown-fullwidth et non .dropdown : la barre
     porte d'autres menus déroulants — langue, compte — que Bootstrap gère
     lui-même et qu'il ne faut pas toucher. */
  .navbar-nav .nav-item.dropdown-fullwidth {
    position: relative;
  }

  /* Le lien s'arrête avant le bouton pour que les deux zones ne se
     chevauchent pas : un doigt posé sur le chevron ne doit pas suivre le
     lien. */
  .navbar-nav .nav-item.dropdown-fullwidth > .nav-link {
    padding-right: 3.25rem;
  }

  /* Bootstrap dessine son propre chevron en ::after sur .dropdown-toggle.
     Il ferait doublon avec celui du bouton. */
  .navbar-nav .nav-item.dropdown-fullwidth > .nav-link.dropdown-toggle::after {
    display: none;
  }

  /* Chevron des autres menus déroulants — langue, compte.
   *
   * Le thème les dessine par « .dropdown-toggle::after » à 0,5 rem, soit 8 px,
   * quand les méga-menus portent une icône Bootstrap Icons de 14 px. Empilés
   * dans la même colonne, l'un faisait presque moitié moins que les autres.
   *
   * Le gabarit pose désormais la même icône dans le lien ; le ::after du thème
   * est masqué pour éviter le doublon. Les deux se ressemblent enfin, et par la
   * même mécanique plutôt que par deux valeurs accordées à la main.
   *
   * Exclut .dropdown-fullwidth, dont le ::after est déjà masqué plus haut. */
  .navbar-nav .nav-item.dropdown:not(.dropdown-fullwidth) > .nav-link.dropdown-toggle::after {
    display: none;
  }

  /* L'entrée sert de repère, comme pour les méga-menus. */
  .navbar-nav .nav-item.dropdown:not(.dropdown-fullwidth) {
    position: relative;
  }

  /* Le chevron est posé en absolu plutôt que poussé par une marge.
   *
   * Le lien ne s'étend pas jusqu'au bord de l'entrée — 30 px les séparent —
   * si bien qu'une marge droite l'arrêtait 52 px avant le bord au lieu de 22.
   * Le positionner par rapport à l'entrée reprend exactement la mécanique du
   * bouton de méga-menu. Les glyphes de 14 px sont maintenant arrêtés à
   * 30 px du bord droit, comme les textes le sont du bord gauche : leur axe
   * commun tombe donc à 37 px du bord. */
  .navbar-nav .megamenu-chevron {
    position: absolute;
    /* La liste de langues entre dans le flux quand elle s'ouvre. Un top: 50%
       suivait alors la hauteur totale de l'entree et envoyait le chevron au
       milieu du sous-menu. 27 px est le centre stable de la ligne de 54 px. */
    top: 27px;
    right: 30px;
    transform: translateY(-50%);
    color: var(--bs-body-color);
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
  }

  /* Preserve the vertical centering while the language dropdown is open. */
  .navbar-nav .menuBarLang > .nav-link[aria-expanded="true"] .megamenu-chevron {
    transform: translateY(-50%) rotate(180deg);
  }

  .megamenu-bascule {
    position: absolute;
    /* L'ouverture ajoute le panneau a la hauteur de .nav-item. Un centrage a
       50% descendrait donc avec le panneau. La cible de 44 px reste centree
       dans la premiere ligne de 54 px avec ce decalage fixe. */
    top: 5px;
    transform: none;
    /* Dans la cible de 44 px, le glyphe de 14 px laisse 15 px de chaque côté.
       Un retrait de 15 px place donc son bord visible à 30 px du menu. */
    right: 15px;
    /* 44 px est le minimum recommandé pour une cible tactile. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
  }

  .megamenu-bascule .bi {
    /* La rotation signale l'état ouvert sans recourir à une seconde icône. */
    transition: transform 0.2s ease-in-out;
  }

  .megamenu-bascule[aria-expanded="true"] .bi {
    transform: rotate(180deg);
  }

  .megamenu-bascule:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  /* --- Le panneau en accordéon ----------------------------------------- */

  /* Fermé par défaut, y compris quand une autre règle le rendrait visible.
     Restreint aux méga-menus : appliquée à toutes les entrées .dropdown, cette
     règle (0,3,0) l'emportait sur le « .dropdown-menu.show » de Bootstrap
     (0,2,0) et empêchait le sélecteur de langue de s'ouvrir — Bootstrap posait
     bien la classe, le menu restait à display: none. */
  .navbar-nav .nav-item.dropdown-fullwidth > .dropdown-menu {
    display: none;
  }

  /* Ouvert : le panneau se replace dans le flux au lieu de flotter, et perd
     la largeur pleine page qu'il prend sur grand écran. */
  .navbar-nav .nav-item.dropdown.megamenu-ouvert > .dropdown-menu {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0 1rem;
    border: 0;
    transform: none;
    /* Le thème sombre habille ces panneaux par un sélecteur contenant un
       identifiant — « :is(#servicesMenuPanel, ...) » — donc de spécificité
       (1,0,0). Aucun sélecteur de classe ne peut l'emporter : sans ces
       !important, le panneau replié dans le menu gardait son fond et son ombre
       portée, et les entrées semblaient posées sur une carte flottante. */
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Certains panneaux — Perspectives, Companies — posent leur contenu dans un
     conteneur flex en ligne dont les colonnes sont dimensionnées pour le grand
     écran. Faute de repli, elles sortaient de la fenêtre des deux côtés : sur
     375 px, une colonne commençait à -87 et l'autre finissait à 511. Elles
     s'empilent désormais. */
  .navbar-nav .nav-item.dropdown.megamenu-ouvert .megamenu-content {
    flex-direction: column;
  }

  .navbar-nav .nav-item.dropdown.megamenu-ouvert .megamenu-content > * {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  /* .submenu-col1 est décalé de -117px par style.css, sans condition, et n'est
     remis à auto qu'au-dessus de 1200px. En dessous, la colonne sort de la
     fenêtre par la gauche — le panneau Perspectives y perdait sept liens.
     Le décalage n'a de sens qu'une fois les colonnes côte à côte. */
  .navbar-nav .nav-item.dropdown.megamenu-ouvert .submenu-col1 {
    left: auto;
  }

  /* Échelle verticale commune aux cinq mégamenus mobiles. Les liens gardent
     leur cible de 44 px ; 4 px séparent deux entrées, 12 px séparent un titre
     de sa première entrée et 24 px distinguent deux groupes. */
  :is(
    #servicesMenuPanel,
    #sectorsMenuPanel,
    #companyMenuPanel,
    #insightsMenuPanel,
    #aboutMenuPanel
  ) {
    --coges-mobile-menu-item-gap: 0.25rem;
    --coges-mobile-menu-heading-gap: 0.75rem;
    --coges-mobile-menu-group-gap: 1.5rem;
  }

  /* Secteurs commence directement par une cible de 44 px, alors que les
     autres panneaux commencent par un titre compact. Avec les mêmes 16 px de
     padding, son texte centré apparaissait environ 13 px plus bas. Réduire
     seulement son padding supérieur compense ce centrage sans réduire la
     taille tactile du premier lien. */
  #sectorsMenuPanel .megamenu-content {
    padding-top: var(--coges-mobile-menu-item-gap);
  }

  /* Les marges natives des listes variaient entre 0 et 1rem. Les espaces de
     groupe sont désormais posés explicitement plus bas. */
  :is(
    #servicesMenuPanel,
    #sectorsMenuPanel,
    #companyMenuPanel,
    #aboutMenuPanel
  ) .megamenu-content ul {
    margin-bottom: 0;
  }

  /* Espacement régulier entre liens. Les listes avec titre commencent leurs
     liens au deuxième <li> : nth-child(n + 3) évite d'ajouter 4 px au premier
     lien, dont l'écart de 12 px est déjà porté par le titre. */
  #servicesMenuPanel .service-megamenu-domain > li:nth-child(n + 3):not(.megamenu-domain-company),
  #aboutMenuPanel .about-megamenu-section > li:nth-child(n + 3),
  #companyMenuPanel .list-unstyled > li:nth-child(n + 3),
  #sectorsMenuPanel .submenu > li + li,
  #insightsMenuPanel .list-unstyled > li + li {
    margin-top: var(--coges-mobile-menu-item-gap);
  }

  /* Services se termine par la marque du domaine. Elle appartient au groupe
     courant et ne doit plus fabriquer à elle seule un espace différent. */
  #servicesMenuPanel .megamenu-domain-company {
    margin-top: var(--coges-mobile-menu-heading-gap);
    margin-bottom: 0;
  }

  #servicesMenuPanel .megamenu-domain-brand {
    display: flex;
    width: fit-content;
    min-height: 44px;
  }

  /* Bootstrap ajoutait 8 px de padding sous .dropdown-header, contrairement
     aux titres directs de Services et À propos. Le retirer rend l'écart
     titre → premier lien identique dans chaque panneau. */
  .navbar-nav .nav-item.dropdown.megamenu-ouvert .dropdown-header {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--coges-mobile-menu-heading-gap);
  }

  /* About pose ses titres par « #aboutMenuPanel .megamenu-direct-heading »,
     de spécificité (1,1,0) : aucun sélecteur de classe ne l'emporte. On reprend
     donc sa forme, identifiant compris, pour gagner par l'ordre plutôt que par
     un !important. */
  :is(
    #servicesMenuPanel,
    #sectorsMenuPanel,
    #companyMenuPanel,
    #insightsMenuPanel,
    #aboutMenuPanel
  ) .megamenu-direct-heading {
    margin-bottom: var(--coges-mobile-menu-heading-gap);
  }

  /* Les colonnes sont empilées sous 992 px : chaque nouvelle section reçoit
     le même espace, quel que soit le gabarit qui l'a produite. */
  #servicesMenuPanel .service-megamenu-domain + .service-megamenu-domain,
  #aboutMenuPanel .about-megamenu-section + .about-megamenu-section {
    margin-top: var(--coges-mobile-menu-group-gap);
  }

  /* Les deux colonnes de Secteurs deviennent sur mobile les deux moitiés
     successives d'une même liste. Leur jonction doit donc avoir le même écart
     que deux liens, et non l'espacement réservé à deux groupes distincts. */
  #sectorsMenuPanel .megamenu-content > .submenu + .submenu {
    margin-top: var(--coges-mobile-menu-item-gap);
  }

  /* Perspectives cumulait mb-4 sur la liste (24 px) et pt-3 sur l'action
     (16 px), soit 40 px avant « Voir plus ». L'action utilise désormais le
     seul espacement de groupe commun. */
  #insightsMenuPanel .insights-megamenu-action {
    margin-top: var(--coges-mobile-menu-group-gap);
    padding-top: 0;
  }

  /* Les gouttières et centrages du conteneur n'ont plus lieu d'être une fois
     le panneau replié dans la colonne du menu. */
  .navbar-nav .nav-item.dropdown.megamenu-ouvert > .dropdown-menu .container {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* --- Le menu lui-même doit pouvoir défiler ---------------------------- */

  /* Un accordéon ouvert peut dépasser la hauteur de l'écran. Sans cette
     règle, le bas du sous-menu devient inatteignable. 100vh moins la hauteur
     de l'en-tête laisse la barre visible pendant le défilement. */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Dans Companies, les deux listes ne s'empilent qu'avant le breakpoint sm.
   Au-delà elles redeviennent deux colonnes et n'ont donc plus de marge haute. */
@media (max-width: 575.98px) {
  #companyMenuPanel .company-megamenu-links .list-unstyled + .list-unstyled {
    margin-top: var(--coges-mobile-menu-group-gap);
  }
}

/* Cibles tactiles : porter les commandes à 44 px sous 992 px.
 *
 * Relevé avant correction, à 375 px : hamburger 30x38, bascule de thème
 * 18x42, liens de menu 315x40, onglets 88x42, points de carrousel 17x17.
 * Aucune règle de taille minimale n'existait dans les feuilles.
 *
 * 44 px est la recommandation courante pour un doigt. Le critère WCAG 2.5.8,
 * lui, exige 24 px : c'est le plancher à ne pas franchir, 44 la cible.
 */
@media (max-width: 991.98px) {

  /* Commandes de la barre : hamburger, thème, recherche, panneau latéral. */
  .navbar-toggler,
  .coges-theme-toggle,
  .navbar .nav-item > button.nav-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* La ligne de thème reprend la géométrie des autres entrées : le libellé
     porte .nav-link dans le gabarit (même corps, graisse, interligne et
     couleur) et la ligne conserve leur hauteur tactile de 44 px. */
  .coges-theme-control-mobile {
    position: relative;
  }

  .coges-theme-mobile-row {
    min-height: 44px;
    padding-right: 3.25rem;
  }

  /* Reprendre le retrait des boutons de méga-menu pose le soleil ou la lune
     sous leur axe, sans dépendre des largeurs du texte. */
  .coges-theme-control-mobile .coges-theme-toggle {
    position: absolute;
    top: 5px;
    right: 15px;
    flex: 0 0 44px;
    width: 44px;
    padding: 0;
  }

  /* Liens de navigation : la hauteur seule suffit, la largeur occupe déjà
     toute la colonne. Le centrage évite que le texte colle en haut de la
     zone agrandie. */
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Onglets de la page d'accueil (alua, CGES, GCT, Consulting). */
  .simple-presentation .nav-link,
  .nav-tabs .nav-link {
    min-height: 44px;
  }

  /* Points du carrousel.
   *
   * Le bouton est invisible : fond transparent, aucune bordure. Ce qu'on voit
   * est son ::after, un disque blanc de 5 px. L'agrandir revient donc à
   * agrandir la seule zone sensible, sans toucher à l'apparence — inutile de
   * passer par un pseudo-élément, d'autant qu'un ::before vide ne recevait pas
   * le pointeur : c'est le conteneur .tns-nav qui répondait à sa place.
   *
   * Les points sont empilés verticalement. 28 px de haut et 12 px de marge
   * donnent un pas de 40 px, les marges verticales fusionnant entre voisins.
   * Aucun recouvrement, et le plancher WCAG de 24 px est dépassé.
   *
   * Le thème espace les points par « .dots-end .tns-nav [data-nav] », de
   * spécificité (0,3,0) : le sélecteur reprend la même forme pour l'emporter
   * par l'ordre plutôt que par un !important. */
  .tns-nav [data-nav],
  .dots-end .tns-nav [data-nav] {
    width: 28px;
    height: 28px;
    margin: 12px 6px;
    /* L'anneau du point actif est un box-shadow inset, qui épouse la boîte :
       agrandir le bouton l'agrandissait aussi. Il est retiré ici et redessiné
       sur ::before à sa taille d'origine. */
    box-shadow: none;
  }

  /* L'anneau, rendu à ses 17 px, indépendamment de la zone sensible. */
  /* Le thème place le disque à 6 px du bord, valeur calculée pour un bouton
     de 17 px. Dans un bouton de 28, son centre tombait à 8,5 au lieu de 14 :
     le disque n'était plus au milieu de l'anneau. Il est recentré.

     Le sélecteur reprend la forme « .dots-bordered .tns-nav [data-nav] »,
     de spécificité (0,3,1) : un simple « .tns-nav [data-nav] » (0,2,1) ne
     l'emporterait pas. */
  .tns-nav [data-nav]::after,
  .dots-bordered .tns-nav [data-nav]::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .dots-bordered .tns-nav [data-nav]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px transparent;
  }

  .dots-bordered .tns-nav .tns-nav-active::before {
    box-shadow: inset 0 0 0 2px #19191c;
  }

  .dots-white.dots-bordered .tns-nav .tns-nav-active::before {
    box-shadow: inset 0 0 0 2px #fff;
  }

  /* Champs de formulaire : un champ de 40 px se vise mal, et le clavier
     mobile de certains navigateurs zoome sous 16 px de police. */
  .form-control,
  .form-select,
  .btn {
    min-height: 44px;
  }
}

/* Le bouton « Go up » est vertical et haut de près de 150 px. Sur un écran
   très étroit il recouvre le texte au lieu de le longer. En dessous de
   576 px, la navigation par le pouce suffit — le geste de remontée est natif
   sur mobile. */
@media (max-width: 575.98px) {
  .back-top {
    display: none !important;
  }
}

/* Sous 485 px, les onglets de présentation occupent plusieurs lignes. La
   bordure portée par toute la liste forme alors un trait isolé sous le bloc.
   Le sélecteur reste volontairement limité aux onglets des entités ; sa
   spécificité surpasse aussi la variante sombre chargée après cette feuille. */
@media (max-width: 484.98px) {
  body .main-wrap ul.simple-presentation.nav-tabs.nav-tabs-line {
    border-bottom: 0;
  }
}


/* Décalage des listes de Secteurs et Perspectives, entre 992 et 1200 px.
 *
 * Ces deux panneaux portaient « pt-3 » dans le gabarit pour aligner leurs
 * colonnes côte à côte. Cette classe utilitaire s'appliquait à toutes les
 * largeurs : empilée sur mobile, elle ajoutait 16 px aux 16 de
 * .megamenu-content et aux 8 du panneau, d'où 40 px de vide avant le premier
 * lien contre 24 dans les trois autres panneaux.
 *
 * La classe est retirée du gabarit et le décalage rendu au CSS, où il se borne
 * à la plage qui en a besoin. Au-delà de 1200 px, style.css remet déjà ces
 * listes à zéro par « .dropdown-fullwidth .megamenu-content > .submenu ».
 *
 * Neutraliser « pt-3 » en CSS aurait imposé un !important, les utilitaires
 * Bootstrap en portant un par construction. Le retirer du gabarit l'évite.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #sectorsMenuPanel .megamenu-content > ul.submenu,
  #insightsMenuPanel .megamenu-content > .submenu-col1 {
    padding-top: 1rem;
  }
}