/* ============================================================
   ResoNAnces — Menu off-canvas 2 colonnes
   Principe : on repositionne uniquement ce qui est nécessaire
   pour le layout. On ne surcharge pas ce que Blocksy gère déjà
   (typographie, list-style, text-decoration, curseur, etc.).
   ============================================================ */

/* Variables de couleur — à adapter si la charte évolue */
#offcanvas {
  --rsn-text:          #f5f5f0;
  --rsn-text-dim:      #c9c9bf;
  --rsn-highlight-bg:  #E5E9A8;  /* vert hover — unifié partout */
  --rsn-highlight-text:#2b2a28;
  --rsn-accent:        #E5E9A8;  /* même vert pour chevrons et focus */
  --rsn-divider:       rgba(199, 210, 74, .55);
  --rsn-col1-width:    40%;
}

@media (min-width: 881px) {

  #offcanvas [data-device="mobile"] {
    display: none !important;
  }

  /* Panneau desktop : taille et centrage */
  #offcanvas .ct-panel-content[data-device="desktop"] {
    height: 100vh;
    overflow: hidden;
    width: 80vw;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Contexte de positionnement pour la colonne 2 (absolute) */
  #offcanvas .ct-panel-content[data-device="desktop"] .ct-panel-content-inner {
    position: relative;
    height: 100%;
    overflow-x: hidden;
  }

  /* ---- Colonne 1 : liste des rubriques ---- */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul {
    padding: 12px 0;
    max-width: var(--rsn-col1-width);
    height: 100%;
    overflow-y: auto;
  }

  /* Filets entre items */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li {
    border-top: 1px solid var(--rsn-divider) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li:last-child {
    border-bottom: 1px solid var(--rsn-divider) !important;
  }
  /* Efface le filet au-dessus de l'item actif et de son suivant */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li:has(> .ct-sub-menu-parent > button[aria-expanded="true"]),
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li:has(> .ct-sub-menu-parent > button[aria-expanded="true"]) + li {
    border-top-color: transparent;
  }

  /* Layout flex du label + bouton toggle */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent,
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > a.ct-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    transition: background .15s ease, color .15s ease;
  }

  /* Texte du label niveau 1 — padding géré par le parent (.ct-sub-menu-parent),
     on reset le padding natif du lien pour éviter les doubles décalages */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li .ct-menu-link {
    color: var(--rsn-text) !important;
    font-size: 1.5rem;
    flex: 1;
    padding: 0 !important; /* reset — le padding est sur le parent, pas sur le lien */
  }

  /* Bouton toggle (chevron) */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li .ct-toggle-dropdown-mobile {
    background: transparent !important;
    border: 0;
    padding: 4px;
    cursor: pointer;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li .ct-toggle-dropdown-mobile svg {
    fill: var(--rsn-accent) !important;
    transition: transform .2s ease;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] .ct-toggle-dropdown-mobile[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Survol niveau 1 : fond vert + texte foncé */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent:hover,
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > a.ct-menu-link:hover {
    background: var(--rsn-highlight-bg) !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent:hover .ct-menu-link,
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > a.ct-menu-link:hover {
    color: var(--rsn-highlight-text) !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent:hover svg {
    fill: var(--rsn-highlight-text) !important;
  }

  /* ---- Colonne 2 : sous-menus repositionnés en absolu ---- */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu {
    position: absolute;
    top: 0;
    left: var(--rsn-col1-width);
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 40px 56px;
    margin: 0;
    display: none;
    height: auto !important;
    max-height: none !important;
    list-style: none !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li:has(> .ct-sub-menu-parent > button[aria-expanded="true"]) > .sub-menu {
    display: block;
    animation: rsnFade .22s ease-out;
  }
  @keyframes rsnFade {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Neutralise tous les puces/points dans la colonne 2 */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu li::before,
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu li::after,
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu li::marker {
    display: none !important;
    content: none !important;
  }

  /* Items niveau 2 */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu > li {
    border: none !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu > li > a.ct-menu-link {
    display: block;
    color: var(--rsn-text) !important;
    padding: 6px 0 !important; /* reset padding natif, espace uniforme */
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu > li > a.ct-menu-link:hover {
    color: var(--rsn-highlight-bg) !important;
  }

  /* ---- Accordéon niveau 3 (ex. Diplômes et cursus, Départements d'études) ---- */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .ct-sub-menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0 !important; /* aligné avec les liens niveau 2 */
    cursor: pointer;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .ct-sub-menu-parent .ct-menu-link {
    color: var(--rsn-text) !important;
    padding: 0 !important; /* reset — padding géré par le parent */
  }
  /* Hover sur le label accordéon niveau 2 : texte vert, pas de fond */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .ct-sub-menu-parent:hover {
    background: none !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .ct-sub-menu-parent:hover .ct-menu-link {
    color: var(--rsn-highlight-bg) !important;
  }

  /* Transition d'ouverture niveau 3 via max-height */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    height: auto !important;
    list-style: none !important;
    /* Double colonne pour les longues listes */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children:has(> .ct-sub-menu-parent > button[aria-expanded="true"]) > .sub-menu {
    max-height: 600px;
  }

  /* Items niveau 3 */
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .sub-menu > li {
    color: var(--rsn-text-dim);
    padding: 2px 0 2px 12px;
    position: relative;
    border: none !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .sub-menu > li::before {
    content: "–";
    position: absolute;
    left: 0;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .sub-menu > li > a.ct-menu-link {
    color: inherit !important;
    padding: 0 !important;
  }
  #offcanvas .ct-panel-content[data-device="desktop"] nav[data-id="mobile-menu"] > ul > li > .sub-menu .menu-item-has-children > .sub-menu > li > a.ct-menu-link:hover {
    color: var(--rsn-highlight-bg) !important;
  }

  /* Focus clavier accessible */
  #offcanvas .ct-panel-content[data-device="desktop"] .ct-menu-link:focus-visible,
  #offcanvas .ct-panel-content[data-device="desktop"] .ct-toggle-dropdown-mobile:focus-visible {
    outline: 2px solid var(--rsn-accent);
    outline-offset: -2px;
  }
}

/* Mobile : neutralise les filets natifs Blocksy qui doublonnent */
.mobile-menu li,
.mobile-menu .menu-item-has-children > a,
.mobile-menu .dropdown-active > .ct-sub-menu-parent {
  border-bottom: none;
}