/* ==========================================================================
   HEADER + NAVIGATION — Styles visuels PARTAGES (front-end + editeur Gutenberg)
   Charge via wp_enqueue_style('cdp-header-nav') ET add_editor_style().
   Ne contient AUCUN comportement responsive de collapse (voir nav-responsive.css).
   Source de verite unique : ne PAS dupliquer ces regles dans functions.php
   ni dans editor-style.css.
   ========================================================================== */

/* ==========================================================================
   1. BASE (toutes largeurs)
   ========================================================================== */

/* Header force en une seule "carte" centree de 1280px */
header.wp-block-template-part,
.editor-styles-wrapper header.wp-block-template-part,
.is-focus-mode .is-root-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--wp--preset--spacing--large);
    padding-right: var(--wp--preset--spacing--large);
    box-sizing: border-box;
    background: var(--wp--preset--color--base, #EFE9DC);
    background-image: none;
    border-radius: 0;
    border: none;
    border-bottom: none;
    box-shadow: none;
}

/* Groupes internes du header totalement transparents (evite les doubles boites) */
header.wp-block-template-part .wp-block-group,
.is-focus-mode .is-root-container .wp-block-group,
header.wp-block-template-part > div,
.editor-styles-wrapper > header > div:first-child,
.wp-site-blocks > header > div:first-child {
    background: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

/* Curseur pointer sur les items de menu (evite le curseur "selection de texte") */
.wp-block-navigation-item__content {
    cursor: pointer;
}

/* Espacement des libelles du menu (rapatrie depuis les Styles globaux) */
.wp-block-navigation .wp-block-navigation-item__label {
    letter-spacing: 0.01em;
}

/* Liseré degrade sous le header (rapatrie depuis les Styles globaux) */
.cdp-site-header {
    position: relative;
}
.cdp-site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 10;
    background: linear-gradient(90deg, transparent 0%, #EBE4D4 50%, transparent 100%);
}

/* Le groupe logo ne doit jamais etre compresse par le flex de la rangee
   (sinon, en nowrap serre, le logo est ecrase a quelques px). */
.cdp-site-header .alignwide > .wp-block-group {
    flex-shrink: 0 !important;
}

/* Le wrapper du bouton CTA est en display:block avec un lien inline-block :
   le line-height ajoute ~6px sous le lien, donc le wrapper (54px) est plus haut
   que le bouton visible (48px). On le passe en flex pour qu'il epouse exactement
   la hauteur du bouton -> la rangee du header vaut la hauteur reelle du CTA, ce
   qui permet au hamburger de s'y aligner dynamiquement (voir nav-responsive.css). */
.cdp-site-header .wp-block-button {
    display: flex !important;
}

/* Bouton hamburger stylise dans la DA (neo-brutalism).
   Visible uniquement < 1024px, mais on le stylise en base (inoffensif sinon). */
.wp-block-navigation__responsive-container-open {
    padding: 9px !important;
    border-radius: 8px !important;
    background-color: var(--wp--preset--color--secondary, #F5F0E6) !important;
    border: 1px solid var(--wp--preset--color--contrast, #241A16) !important;
    box-shadow: 2px 3px 0px 0px var(--wp--preset--color--contrast, #241A16) !important;
    color: var(--wp--preset--color--contrast, #241A16) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.wp-block-navigation__responsive-container-open svg {
    fill: currentColor !important;
    display: block !important;
}
/* Etat "enfonce" UNIQUEMENT au survol/appui.
   Pas sur :focus : WordPress redonne le focus au bouton a la fermeture du menu,
   ce qui laissait le bouton visuellement enfonce jusqu'au prochain clic. */
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:active {
    transform: translate(2px, 3px) !important;
    box-shadow: 0px 0px 0px 0px var(--wp--preset--color--contrast, #241A16) !important;
}
/* Focus clavier accessible (contour), sans etat enfonce. */
.wp-block-navigation__responsive-container-open:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast, #241A16) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   2. CLASSES MAGIQUES DU MEGA MENU (decorations, valables partout)
   ========================================================================== */

/* Sous-titres (ex: Decouvrir la methode) */
.cdp-mega-title .wp-block-navigation-item__content {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wp--preset--color--contrast);
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Badge "Gratuit" */
.cdp-badge-gratuit .wp-block-navigation-item__content::after {
    content: "Gratuit";
    display: inline-block;
    background-color: #D35446;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 4px;
    margin-left: 10px;
    line-height: 1;
}

/* Puces colorees (Chapitres) et flexbox des items a icone */
.cdp-icon-solfege .wp-block-navigation-item__content,
.cdp-icon-technique .wp-block-navigation-item__content,
.cdp-icon-dechiffrage .wp-block-navigation-item__content,
.cdp-icon-harmonie .wp-block-navigation-item__content,
.cdp-icon-discord .wp-block-navigation-item__content,
.cdp-icon-youtube .wp-block-navigation-item__content,
.cdp-icon-boutique .wp-block-navigation-item__content,
.cdp-icon-tutos .wp-block-navigation-item__content,
.cdp-icon-articles .wp-block-navigation-item__content,
.cdp-mega-title .wp-block-navigation-item__content,
.cdp-puce-chapitre-1 .wp-block-navigation-item__content,
.cdp-puce-chapitre-2 .wp-block-navigation-item__content,
.cdp-puce-chapitre-3 .wp-block-navigation-item__content,
.cdp-puce-chapitre-4 .wp-block-navigation-item__content,
.cdp-puce-chapitre-5 .wp-block-navigation-item__content,
.cdp-puce-chapitre-6 .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
}

.cdp-puce-chapitre-1 .wp-block-navigation-item__content::before,
.cdp-puce-chapitre-2 .wp-block-navigation-item__content::before,
.cdp-puce-chapitre-3 .wp-block-navigation-item__content::before,
.cdp-puce-chapitre-4 .wp-block-navigation-item__content::before,
.cdp-puce-chapitre-5 .wp-block-navigation-item__content::before,
.cdp-puce-chapitre-6 .wp-block-navigation-item__content::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
}
.cdp-puce-chapitre-1 .wp-block-navigation-item__content::before { background-color: #241A16; }
.cdp-puce-chapitre-2 .wp-block-navigation-item__content::before { background-color: #794411; }
.cdp-puce-chapitre-3 .wp-block-navigation-item__content::before { background-color: #5B108D; }
.cdp-puce-chapitre-4 .wp-block-navigation-item__content::before { background-color: #DD49DE; }
.cdp-puce-chapitre-5 .wp-block-navigation-item__content::before { background-color: #FF0102; }
.cdp-puce-chapitre-6 .wp-block-navigation-item__content::before { background-color: #FF7C01; }

/* Icones du Programme & Ressources (images Figma) */
.cdp-icon-solfege .wp-block-navigation-item__content::before,
.cdp-icon-technique .wp-block-navigation-item__content::before,
.cdp-icon-dechiffrage .wp-block-navigation-item__content::before,
.cdp-icon-harmonie .wp-block-navigation-item__content::before,
.cdp-icon-discord .wp-block-navigation-item__content::before,
.cdp-icon-youtube .wp-block-navigation-item__content::before,
.cdp-icon-boutique .wp-block-navigation-item__content::before,
.cdp-icon-tutos .wp-block-navigation-item__content::before,
.cdp-icon-articles .wp-block-navigation-item__content::before,
.cdp-icon-methode .wp-block-navigation-item__content::before,
.cdp-icon-programme .wp-block-navigation-item__content::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 12px;
}

.cdp-icon-methode .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Vector.png"); }
.cdp-icon-programme .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/text-file-text-common-file.png"); }
.cdp-icon-solfege .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Music-Note-2-Streamline-Flex.png"); }
.cdp-icon-technique .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Open-Hand-Streamline-Flex.png"); }
.cdp-icon-dechiffrage .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/View-Eye-Solo-Streamline-Flex.png"); }
.cdp-icon-harmonie .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Piano-Keys-Streamline-Flex-Remix.png"); }
.cdp-icon-discord .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Discord-Symbol-White.png"); }
.cdp-icon-youtube .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Youtube_icon.png"); }
.cdp-icon-boutique .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Store-2-Streamline-Plump.png"); }
.cdp-icon-tutos .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/Play-List-1-Streamline-Plump.png"); }
.cdp-icon-articles .wp-block-navigation-item__content::before { background-image: url("/wp-content/uploads/2026/08/News-Paper-Streamline-Plump-Remix.png"); }

/* ==========================================================================
   3. DESKTOP (>= 1024px) — Mega menu en dropdown (survol)
   Sous 1024px, le sous-menu est affiche dans l'overlay (voir nav-responsive.css)
   et NE recoit PAS ce style de carte flottante.
   ========================================================================== */
@media (min-width: 1024px) {
    .wp-block-navigation__submenu-container {
        left: 0;
        right: auto;
        padding: 20px;
        /* !important cible : le coeur du bloc Navigation reprend sinon le dessus
           sur bg/border/box-shadow (bordure + ombre du mega menu perdues). */
        background-color: var(--wp--preset--color--secondary, #F5F0E6) !important;
        border: 1px solid var(--wp--preset--color--contrast, #241A16) !important;
        border-radius: 8px;
        box-shadow: 2px 3px 0px 0px var(--wp--preset--color--contrast, #241A16) !important;
        /* Ecart lien parent -> carte du sous-menu (!important : le coeur force
           margin:0 avec une specificite superieure). Si tu changes cette valeur,
           ajuste le "pont invisible" (bottom/height) dans nav-responsive.css
           pour qu'il couvre l'ecart, sinon le survol se coupe. */
        margin-top: 18px !important;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 6px 10px;
        color: var(--wp--preset--color--contrast);
        font-weight: 500;
        transition: transform 0.1s ease;
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        transform: translateX(5px);
    }
}

/* ==========================================================================
   4. LOGO RESPONSIVE — version compacte sous 1280px
   Sous 1280px, on remplace le logo "wordmark" horizontal par le logo compact
   (evite qu'il passe au-dessus du CTA + hamburger sur mobile).

   NB : seule concession au "tout-editeur". Gutenberg ne sait pas faire de swap
   de logo responsive nativement. Le logo DESKTOP reste editable dans l'editeur
   (bloc Image). Pour changer le logo mobile : remplacer le fichier ci-dessous
   dans la Mediatheque (meme URL) ou modifier cette seule ligne.
   ========================================================================== */
@media (max-width: 1279.98px) {
    header.wp-block-template-part .wp-block-image img {
        content: url("/wp-content/uploads/2026/08/Logo-Mobile-CDP.png");
        width: auto !important;
        height: 40px !important; /* logo source 60x39 */
    }
}