/* ==========================================================================
   PARCOURS DU CHAPITRE I — STRUCTUREL / COMPOSANT uniquement.
   ZÉRO style de texte ici (alignement/taille/interlettrage/couleur/police =
   attributs de bloc). Icônes = PNG de la médiathèque. Espacements = variables
   WordPress. États des chips pilotés par le JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOUTTIÈRES LATÉRALES des sections. Le thème neutralise `has-global-padding`
   sur l'entry-content (var --wp--style--root--padding-* vide) : sans ça, tout
   le contenu (hero, titres, accordéon, CTA) toucherait les bords de l'écran en
   mobile. On inste le CONTENU des sections ; les bandes colorées (Secondaire)
   restent pleine largeur (le padding est porté par la section, pas par le fond).
   Dynamique : invisible sur desktop (contenu déjà centré par contentSize),
   gouttière nette sur mobile.
   -------------------------------------------------------------------------- */
.cdp-parcours-hero,
.cdp-parcours-how,
.cdp-parcours-modules,
.cdp-parcours-next {
    padding-inline: clamp(16px, 5vw, 24px);
}

/* --------------------------------------------------------------------------
   Hero : vidéo SANS ombre (comme l'accueil). L'embed est arrondi par global.css §12.
   -------------------------------------------------------------------------- */
.cdp-parcours-hero__media {
    max-width: 640px;
    margin-inline: auto;
}
.cdp-parcours-hero__media .wp-block-embed,
.cdp-parcours-hero__media figure { margin: 0; }

/* --------------------------------------------------------------------------
   « Comment ça marche » : cartes disciplines + ordre de priorité
   -------------------------------------------------------------------------- */
.cdp-disciplines.wp-block-columns { gap: var(--wp--preset--spacing--x-small, 16px) !important; }
.cdp-disc { padding: var(--wp--preset--spacing--small, 24px); }
.cdp-disc__name { display: flex; align-items: center; gap: 10px; }

/* Ordre de priorité (chips = composant UI) */
.cdp-priority { gap: 10px 8px !important; }
.cdp-priority__chip {
    margin: 0;
    padding: 9px 16px;
    background: var(--wp--preset--color--paper, #FAF8F4);
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 999px;
    box-shadow: 2px 2px 0 0 var(--wp--preset--color--contrast, #241A16);
}
.cdp-priority__sep { margin: 0; color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.5)); }

/* --------------------------------------------------------------------------
   ALINÉA : sous chaque titre, TOUT le contenu (tout sauf le 1er enfant = le
   titre) est indenté vers la droite. Robuste, sans dépendre d'une classe de
   titre. Espacement via variable WordPress (unifié). Le titre reste flush.
   -------------------------------------------------------------------------- */
.cdp-how-step > :not(:first-child),
.cdp-module__section > :not(:first-child) {
    /* padding (et non margin) : le layout « constrained » de WordPress force
       margin-left/right: auto !important sur les enfants, ce qui écrasait le
       margin-inline-start. Le padding, lui, n'est pas neutralisé. Dynamique = mobile OK. */
    padding-inline-start: clamp(16px, 4vw, 40px);
}
/* Espace vertical entre les points de « Comment ça marche » (sinon collés). */
.cdp-how-step + .cdp-how-step { margin-top: var(--wp--preset--spacing--medium, 40px); }

/* Sections disciplines : espacement AÉRÉ + séparateur entre catégories. */
.cdp-module__section:first-child { padding-top: 0; }
/* Air au-dessus du séparateur (fin de la section précédente). */
.cdp-module__section:not(:first-child) { padding-top: clamp(28px, 5vw, 40px); }
/* Séparateur : ligne SOLIDE, couleur Texte 12 %, CENTRÉE et pas pleine largeur.
   Marge basse ≈ 64px sur PC pour bien détacher le titre suivant. */
.cdp-module__section:not(:first-child)::before {
    content: "";
    display: block;
    width: 88%;
    height: 1px;
    margin: 0 auto clamp(40px, 7vw, 64px);
    background: rgba(36, 26, 22, 0.12);
}
.cdp-module__section-title { display: flex; align-items: center; gap: 9px; }

/* Icônes de discipline (PNG médiathèque) — titres de section + cartes. */
.cdp-disc__name::before,
.cdp-module__section-title::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: var(--cdp-disc-png) center / contain no-repeat;
}
.cdp-disc--methode,
.cdp-module__section--methode { --cdp-disc-png: url("/wp-content/uploads/2026/08/Vector.png"); }
.cdp-disc--technique,
.cdp-module__section--technique { --cdp-disc-png: url("/wp-content/uploads/2026/08/Open-Hand-Streamline-Flex.png"); }
.cdp-disc--solfege,
.cdp-module__section--solfege { --cdp-disc-png: url("/wp-content/uploads/2026/08/Music-Note-2-Streamline-Flex.png"); }
.cdp-disc--dechiffrage,
.cdp-module__section--dechiffrage { --cdp-disc-png: url("/wp-content/uploads/2026/08/View-Eye-Solo-Streamline-Flex.png"); }
.cdp-module__section--consolidation { --cdp-disc-png: url("/wp-content/uploads/2026/08/piece-consolidation.png"); }
.cdp-module__section--repertoire { --cdp-disc-png: url("/wp-content/uploads/2026/08/Play-List-1-Streamline-Plump.png"); }

/* Icône d'en-tête de module (PNG par module) */
#module-1 .cdp-accordion__head-main::before { background-image: url("/wp-content/uploads/2026/08/Module-1-C1-icon.png"); }
#module-2 .cdp-accordion__head-main::before { background-image: url("/wp-content/uploads/2026/08/Module-2-C1-icon.png"); }
#module-3 .cdp-accordion__head-main::before { background-image: url("/wp-content/uploads/2026/08/Module-3-C1-icon.png"); }
#module-9 .cdp-accordion__head-main::before { background-image: url("/wp-content/uploads/2026/08/Module-9-C1-icon.png"); }

/* --------------------------------------------------------------------------
   Chips exercice/ressource : ÉTATS (posés par le JS).
   Base : is-style-cdp-btn-secondary (exercice) / -primary (ressource) -> components.
   Espacement = blockGap du bloc Boutons (éditable dans l'éditeur), pas en CSS.
   -------------------------------------------------------------------------- */
.cdp-chips.wp-block-buttons { align-items: flex-start; }

/* « À faire maintenant » (seul rouge de la catégorie, posé par le JS). */
.cdp-step.is-current > .wp-block-button__link {
    background-color: var(--wp--preset--color--primary, #9B423E) !important;
    color: var(--wp--preset--color--paper, #FAF8F4) !important;
}
/* DÉSACTIVÉ / TERMINÉ (couleurs maquette) : fond Primaire (#EFE9DC), contour
   dashed 35 %, texte + icône 35 %. */
.cdp-step.is-done > .wp-block-button__link,
.cdp-resource.is-downloaded > .wp-block-button__link {
    background-color: var(--wp--preset--color--base, #EFE9DC) !important;
    color: rgba(36, 26, 22, 0.35) !important;
    border: 2px dashed rgba(36, 26, 22, 0.35) !important;
    box-shadow: none !important;
}
/* Exercice validé : icône = coche VERTE. */
.cdp-step.is-done > .wp-block-button__link {
    --cdp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6.5'/%3E%3C/svg%3E");
}
.cdp-step.is-done > .wp-block-button__link::after {
    background-color: var(--wp--preset--color--success, #627D3A) !important;
}

/* --------------------------------------------------------------------------
   BAS DE PAGE : la section CTA (fond Secondaire) doit être COLLÉE au footer,
   mais conserver un padding intérieur pour que le bouton respire. Trois vides
   à neutraliser SOUS la section, du plus proche au plus lointain :
     1. padding bas du WRAPPER de page (fond Primaire) ;
     2. padding bas du conteneur global `.site-content` (= preset `large`, 80px)
        — commun à tout le thème, donc SCOPÉ à cette page via `:has(.cdp-parcours-next)`
        (marqueur unique, sans toucher les autres pages ni ajouter de classe).
   On conserve un padding bas dynamique sur la section elle-même (respiration
   du bouton).
   -------------------------------------------------------------------------- */
.cdp-parcours-next { padding-bottom: clamp(28px, 5vw, 56px) !important; }
.wp-block-group.has-base-background-color:has(> .cdp-parcours-next) { padding-bottom: 0 !important; }
.site-content:has(.cdp-parcours-next) { padding-bottom: 0 !important; }

/* ==========================================================================
   MODALE VIDÉO (composant JS — style typographique légitime, pas du contenu).
   ========================================================================== */
.cdp-exo-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.cdp-exo-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
.cdp-exo-modal__overlay { position: absolute; inset: 0; background: rgba(36, 26, 22, 0.55); }
.cdp-exo-modal__box {
    position: relative; width: min(960px, 100%); max-height: calc(100vh - 40px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--wp--preset--color--paper, #FAF8F4);
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 24px;
    box-shadow: 4px 5px 0 0 var(--wp--preset--color--contrast, #241A16);
}
.cdp-exo-modal__head {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-bottom: 2px solid var(--wp--preset--color--contrast, #241A16);
}
.cdp-exo-modal__icon {
    flex: 0 0 auto; width: 44px; height: 44px;
    background: center / contain no-repeat;
}
.cdp-exo-modal__icon--methode { background-image: url("/wp-content/uploads/2026/08/Vector.png"); }
.cdp-exo-modal__icon--technique { background-image: url("/wp-content/uploads/2026/08/Open-Hand-Streamline-Flex.png"); }
.cdp-exo-modal__icon--solfege { background-image: url("/wp-content/uploads/2026/08/Music-Note-2-Streamline-Flex.png"); }
.cdp-exo-modal__icon--dechiffrage { background-image: url("/wp-content/uploads/2026/08/View-Eye-Solo-Streamline-Flex.png"); }
.cdp-exo-modal__icon--consolidation { background-image: url("/wp-content/uploads/2026/08/piece-consolidation.png"); }
.cdp-exo-modal__icon--repertoire { background-image: url("/wp-content/uploads/2026/08/Play-List-1-Streamline-Plump.png"); }
.cdp-exo-modal__titles { flex: 1 1 auto; min-width: 0; }
.cdp-exo-modal__title { margin: 0; font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -1px; color: var(--wp--preset--color--contrast, #241A16); }
.cdp-exo-modal__subtitle { margin: 2px 0 0; font-size: 0.92rem; color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.5)); }
.cdp-exo-modal__close { flex: 0 0 auto; width: 38px; height: 38px; border: none; background: transparent; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--contrast, #241A16); }
.cdp-exo-modal__video { position: relative; aspect-ratio: 16 / 9; background: #1e1a17; display: flex; align-items: center; justify-content: center; }
.cdp-exo-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cdp-exo-modal__video-link, .cdp-exo-modal__video-empty { color: var(--wp--preset--color--paper, #FAF8F4); }
.cdp-exo-modal__foot { display: flex; justify-content: flex-end; padding: 16px 20px; background: var(--wp--preset--color--base, #EFE9DC); }
.cdp-exo-modal__done {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 999px;
    box-shadow: 2px 3px 0 0 var(--wp--preset--color--contrast, #241A16);
    background: var(--wp--preset--color--primary, #9B423E);
    color: var(--wp--preset--color--paper, #FAF8F4);
    font-family: "Figtree", sans-serif; font-weight: 600; cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cdp-exo-modal__done:hover { transform: translate(1px, 2px); box-shadow: 1px 1px 0 0 var(--wp--preset--color--contrast, #241A16); }
.cdp-exo-modal__done.is-done { background: var(--wp--preset--color--contrast, #241A16); }
body.cdp-modal-open { overflow: hidden; }

@media (max-width: 782px) {
    .cdp-exo-modal__box { max-height: calc(100vh - 20px); }
}
@media (prefers-reduced-motion: reduce) {
    .cdp-exo-modal,
    .cdp-step > .wp-block-button__link,
    .cdp-resource > .wp-block-button__link { transition: none !important; }
}