/* ═══════════════════════════════════════════════════════════════════
   CINS Menu — CSS de base avec CSS Variables
   Les variables --cins-* sont injectées par menu via un <style> scopé.
   Ce fichier utilise des fallbacks pour chaque variable.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset & Container principal ── */
.cins-menu {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.cins-menu *,
.cins-menu *::before,
.cins-menu *::after {
    box-sizing: border-box;
}

/* ── Liste principale ── */
.cins-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cins-menu-gap, 0);
}

/* ── Orientation (classes comportementales) ── */
.cins-menu.cins--horizontal .cins-menu-list {
    flex-direction: row;
    align-items: center;
}

.cins-menu.cins--vertical .cins-menu-list {
    flex-direction: column;
    align-items: stretch;
}

/* ── Item ── */
.cins-menu-item {
    position: relative;
    list-style: none;
}

/* ── Liens & Titres ── */
.cins-menu-link,
.cins-menu-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: var(--cins-title-border-bottom, none) var(--cins-title-border-bottom-color, currentColor);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-bottom 0.2s ease;
}

.cins-menu-title {
    font-family: var(--cins-title-font-family, inherit);
    font-size: var(--cins-title-font-size, 16px);
    font-weight: var(--cins-title-font-weight, 400);
    text-transform: var(--cins-title-transform, none);
    font-style: var(--cins-title-font-style, normal);
    line-height: var(--cins-title-line-height, 1.5);
    letter-spacing: var(--cins-title-letter-spacing, 0);
    text-shadow: var(--cins-title-text-shadow, none);
    color: var(--cins-title-color, var(--cins-link-color, inherit));
    background-color: var(--cins-title-bg, transparent);
}

.cins-menu-link {
    color: var(--cins-link-color, inherit);
}

.cins-menu-link:hover {
    color: var(--cins-link-hover-link-color, var(--cins-link-hover-color, inherit));
    border-bottom: var(--cins-link-hover-border-bottom, none) var(--cins-link-hover-border-bottom-color, currentColor);
}

.cins-menu-title:hover {
    color: var(--cins-title-hover-color, var(--cins-link-hover-color, inherit));
    background-color: var(--cins-title-hover-bg, transparent);
    border-bottom: var(--cins-title-hover-border-bottom, none) var(--cins-title-hover-border-bottom-color, currentColor);
}

/* Style personnalisé par item (prime sur le global) */
.cins-menu-title.cins-item-custom-style:hover {
    color: var(--item-hover-color, var(--cins-title-hover-color, inherit));
    background-color: var(--item-hover-bg, var(--cins-title-hover-bg, transparent));
    border-bottom: var(--item-hover-border-bottom, var(--cins-title-hover-border-bottom, none)) var(--item-hover-border-bottom-color, var(--cins-title-hover-border-bottom-color, currentColor));
}

/*
 * Isolation : un sous-item ne doit pas hériter des variables hover de son ancêtre.
 * On réinitialise les variables --item-hover-* sur chaque <li> de sous-menu
 * qui n'a pas lui-même de style inline custom.
 * (les <li> avec style propre redéfiniront ces vars via leur style="")
 */
.cins-menu-submenu .cins-menu-item {
    --item-hover-color: initial;
    --item-hover-bg: initial;
    --item-hover-border-bottom: initial;
    --item-hover-border-bottom-color: initial;
}
.cins-menu-container-children .cins-menu-item {
    --item-hover-color: initial;
    --item-hover-bg: initial;
    --item-hover-border-bottom: initial;
    --item-hover-border-bottom-color: initial;
}

/* ── Label ── */
.cins-menu-label {
    display: inline;
}

/* ── Description ── */
.cins-menu-description {
    display: block;
    width: 100%;
    font-family: var(--cins-text-font-family, inherit);
    font-size: var(--cins-text-font-size, 0.85em);
    font-weight: var(--cins-text-font-weight, 400);
    color: var(--cins-text-color, inherit);
    text-shadow: var(--cins-text-text-shadow, none);
    margin-top: 0.25rem;
    line-height: var(--cins-text-line-height, 1.3);
}

/* ── Icônes — taille & couleur ── */
.cins-menu-icon {
    width: var(--cins-icon-size, 1.2em);
    height: var(--cins-icon-size, 1.2em);
    fill: var(--cins-icon-color, currentColor);
    transform: rotate(var(--cins-icon-rotation, 0deg));
    flex-shrink: 0;
    display: block;
}

/*
 * Stratégie de positionnement des icônes :
 *  - left / right : flux normal (flex row), l'icône s'insère à côté du label.
 *  - top  / bottom : l'icône est retirée du flux (position absolute) et
 *    placée au-dessus / en-dessous du wrapper. Le label ne bouge pas.
 *    On compense l'espace via padding sur le wrapper.
 */

/* ── left (défaut) ── */
.cins-icon-left {
    flex-direction: row;
    align-items: center;
    position: relative;
}

/* ── right ── */
.cins-icon-right {
    flex-direction: row;
    align-items: center;
    position: relative;
}
.cins-icon-right .cins-menu-icon { order: 2; }
.cins-icon-right .cins-menu-label { order: 1; }

/* ── top : icône positionnée au-dessus, padding-top pour ne pas chevaucher ── */
.cins-icon-top {
    position: relative;
    flex-direction: row;   /* le label reste en ligne avec les voisins */
    align-items: center;
    padding-top: calc(var(--cins-icon-size, 1.2em) + 4px);
}
.cins-icon-top .cins-menu-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(var(--cins-icon-rotation, 0deg));
    margin: 0;
}

/* ── bottom : icône positionnée en-dessous, padding-bottom pour ne pas chevaucher ── */
.cins-icon-bottom {
    position: relative;
    flex-direction: row;   /* le label reste en ligne avec les voisins */
    align-items: center;
    padding-bottom: calc(var(--cins-icon-size, 1.2em) + 4px);
}
.cins-icon-bottom .cins-menu-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(var(--cins-icon-rotation, 0deg));
    margin: 0;
}

/*
 * Isolation : les items de la liste racine (.cins-menu-depth-0)
 * doivent rester alignés sur la même ligne de base même si leur
 * contenu interne est en colonne. On fixe leur alignement vertical.
 */
.cins-menu-depth-0 > .cins-menu-item {
    display: flex;
    align-items: stretch;
}
.cins-menu-depth-0 > .cins-menu-item > .cins-menu-title,
.cins-menu-depth-0 > .cins-menu-item > .cins-menu-link {
    width: 100%;
}

/* ── Flèche sous-menu ── */
.cins-menu-arrow {
    margin-left: auto;
    padding-left: 0.5rem;
}

.cins-menu-arrow::after {
    content: '';
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* ── Images ── */
.cins-menu-image {
    opacity: calc(var(--cins-image-opacity, 100) / 100);
    border-radius: var(--cins-image-radius, 0);
    filter: var(--cins-image-filter, none);
    box-shadow: var(--cins-image-shadow, none);
}

/* ═══════════════════════════════════════════════════════════════════
   Sous-menus
   ═══════════════════════════════════════════════════════════════════ */

.cins-menu-submenu {
    display: none;
    position: absolute;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--cins-submenu-bg, #fff);
    box-shadow: var(--cins-submenu-shadow, 0 4px 12px rgba(0,0,0,0.15));
    border-radius: var(--cins-submenu-radius, 4px);
    flex-direction: column;
    z-index: 1000;
}

/* Premier niveau : sous-menu en dessous */
.cins-menu-depth-0 > .cins-menu-item-has-children > .cins-menu-submenu {
    top: 100%;
    left: 0;
}

/* Niveaux imbriqués : sous-menu à droite */
.cins-menu-submenu .cins-menu-submenu {
    top: 0;
    left: 100%;
}

/* Hover : afficher */
.cins-menu-item-has-children:hover > .cins-menu-submenu {
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   data-children-align="bottom" + data-mega-menu="true" : Mega menu pleine largeur
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Le nav est le contexte de positionnement (position:relative déjà déclaré).
 * Le <li> parent passe en position:static pour que left:0/right:0 du
 * sous-menu s'appliquent par rapport au nav et couvrent toute sa largeur.
 */
.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="true"] {
    position: static;
}

/*
 * Mega-menu : absolute ancré sur le nav.
 * top:100% = juste en dessous de la barre (hauteur de la liste racine).
 * left:0 / right:0 = pleine largeur du nav.
 */
[data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 1rem 2rem;
    z-index: 1001;
}

/*
 * Pont invisible : comble le gap éventuel entre la barre et le sous-menu.
 */
.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-title::after,
.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   data-children-align="bottom" + data-mega-menu="false" : Menu classique
   Sous-menu en dessous du parent uniquement, width fit-content
   ═══════════════════════════════════════════════════════════════════ */

.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="false"] {
    position: relative; /* contexte local : le sous-menu se positionne sous le li parent */
}

[data-children-align="bottom"][data-mega-menu="false"] > .cins-menu-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: fit-content;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 0.5rem 0;
    z-index: 1001;
}

/* Pont invisible pour menu classique */
.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="false"] > .cins-menu-title::after,
.cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="false"] > .cins-menu-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.cins--submenu-fullscreen [data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-submenu {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    top: var(--cins-nav-bottom, auto);
}

/*
 * Pont étendu pour le mode fullscreen : 16px pour absorber
 * les éventuels gaps liés au fixed.
 */
.cins--submenu-fullscreen .cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-title::after,
.cins--submenu-fullscreen .cins-menu-depth-0 > [data-children-align="bottom"][data-mega-menu="true"] > .cins-menu-link::after {
    height: 16px;
    bottom: -16px;
}


/* ═══════════════════════════════════════════════════════════════════
   data-children-align="right" : Sous-menu à droite
   ═══════════════════════════════════════════════════════════════════ */

[data-children-align="right"] > .cins-menu-submenu {
    top: 0;
    left: 100%;
}

/* Premier niveau avec align="right" : toujours en dessous */
.cins-menu-depth-0 > [data-children-align="right"] > .cins-menu-submenu {
    top: 100%;
    left: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Container (wrapper transparent pour grouper des items)
   ═══════════════════════════════════════════════════════════════════ */

.cins-menu-container {
    list-style: none;
    padding: 0;
    margin: 0;
    display: contents;
}

.cins-menu-container-children {
    display: flex;
    list-style: none;
    margin: 0;
    gap: 1rem;
    max-width: var(--cins-container-width, 100%);
    background: var(--cins-container-bg, transparent);
    padding: var(--cins-container-padding, 0);
    border-radius: var(--cins-container-radius, 0);
    box-shadow: var(--cins-container-shadow, none);
}

.cins-menu-container-children > .cins-menu-item {
    flex: 1 1 0;
    min-width: 0;
}

.cins-menu-container[data-children-align="right"] > .cins-menu-container-children {
    flex-direction: row;
    flex-wrap: wrap;
}

.cins-menu-container[data-children-align="bottom"] > .cins-menu-container-children {
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   Alignements (via variables ou classes)
   ═══════════════════════════════════════════════════════════════════ */

/* Alignement horizontal du contenu */
.cins-menu[style*="--cins-align-horizontal: center"] .cins-menu-list,
.cins-menu.cins--align-center .cins-menu-list {
    justify-content: center;
}

.cins-menu[style*="--cins-align-horizontal: right"] .cins-menu-list,
.cins-menu.cins--align-right .cins-menu-list {
    justify-content: flex-end;
}

.cins-menu[style*="--cins-align-horizontal: space-between"] .cins-menu-list,
.cins-menu.cins--align-between .cins-menu-list {
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════
   Visibilité responsive
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
    .cins-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cins-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
    .cins-hide-mobile { display: none !important; }

    /* Menu mobile : empilé verticalement */
    .cins-menu .cins-menu-list {
        flex-direction: column;
        align-items: stretch;
    }

    .cins-menu-submenu {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        box-shadow: none;
        padding-left: 1rem;
    }

    .cins-menu-container-children {
        flex-direction: column;
    }
}