/* ==========================================================================
   COMPOSANTS PARTAGÉS (site-wide) — Carte, Boutons (Primaire/Secondaire),
   Icônes, Citation, Accordéon générique.
   Chargé via wp_enqueue_style('cdp-components') ET add_editor_style(), AVANT
   chapitres.css / parcours.css (qui n'ajoutent que du spécifique).

   Tout est en tokens `var(--wp--preset--color--*)` -> la refonte palette se règle
   dans theme.json / Éditeur ▸ Styles, jamais en hex ici.

   Mécanique WordPress :
   - Les styles de bloc (« Carte », « Primaire », « Secondaire », « Citation »)
     posent une classe `is-style-…` (voir register_block_style dans functions.php).
   - Les icônes sont des CLASSES `cdp-ico-*` (Avancé ▸ classe CSS), combinables.
   - Le look neo-brutalism de base des boutons vient déjà de global.css §2.
   ========================================================================== */

/* ==========================================================================
   1. CARTE — .cdp-card / style de bloc « Carte » (is-style-cdp-card)
   ========================================================================== */
.cdp-card,
.wp-block-group.is-style-cdp-card {
    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);
}

/* ==========================================================================
   2. BOUTONS — styles de bloc « Primaire » / « Secondaire »
   (le look neo de base = global.css §2 ; ici on ne pose QUE couleur + contour +
    rayon pilule ; on ne touche pas à l'ombre/brillance globales.)
   ========================================================================== */
.wp-block-button.is-style-cdp-btn-primary > .wp-block-button__link,
.wp-block-button.is-style-cdp-btn-secondary > .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 999px;
    padding: 0.7em 1.5em;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    line-height: 1.25;
}
/* Primaire : fond Accent, texte clair (Tertiaire). */
.wp-block-button.is-style-cdp-btn-primary > .wp-block-button__link {
    background-color: var(--wp--preset--color--primary, #9B423E);
    color: var(--wp--preset--color--paper, #FAF8F4);
}
/* Secondaire : fond Tertiaire, texte Texte. */
.wp-block-button.is-style-cdp-btn-secondary > .wp-block-button__link {
    background-color: var(--wp--preset--color--paper, #FAF8F4);
    color: var(--wp--preset--color--contrast, #241A16);
}

/* ==========================================================================
   3. ICÔNES DE BOUTON — classes cdp-ico-* (masque CSS en currentColor)
   Réutilise la technique de .cdp-btn-discord (global.css §13) : on RÉ-ACTIVE le
   ::after (que global masque) et on l'amène à gauche du texte (order:-1). Le
   masque teinte l'icône avec la couleur du texte -> marche en Primaire ET
   Secondaire. La brillance ::before de global est conservée (inoffensive).
   ========================================================================== */
[class*="cdp-ico-"] > .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
}
[class*="cdp-ico-"] > .wp-block-button__link::after {
    content: "" !important;
    display: inline-block !important;   /* global force display:none sur ::after */
    order: -1;                          /* icône à gauche du libellé */
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;     /* icône = couleur du texte */
    -webkit-mask: var(--cdp-ico) center / contain no-repeat;
    mask: var(--cdp-ico) center / contain no-repeat;
}
.cdp-ico-download > .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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11m0 0l-4.5-4.5M12 14l4.5-4.5M4.5 20h15'/%3E%3C/svg%3E");
}
/* Lecture : triangle aux coins légèrement arrondis (radius ~2 via stroke rond). */
.cdp-ico-play > .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='%23000' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M8 6v12l10-6z'/%3E%3C/svg%3E");
}
.cdp-ico-chevron > .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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}
/* Discord = PNG de la médiathèque (icône de marque, pas recolorable en masque).
   On neutralise le masque et on pose l'image. Bouton clair -> logo noir. */
.cdp-ico-discord > .wp-block-button__link::after {
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
    background: url("/wp-content/uploads/2026/08/DISCORD-BLACK.png") center / contain no-repeat;
}

/* Variante de bouton « Discord » (officielle) : fond Tertiaire + logo Discord PNG. */
.wp-block-button.is-style-cdp-btn-discord > .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 999px;
    padding: 0.7em 1.5em;
    background-color: var(--wp--preset--color--paper, #FAF8F4);
    color: var(--wp--preset--color--contrast, #241A16);
    font-family: "Figtree", sans-serif;
    font-weight: 600;
}
.wp-block-button.is-style-cdp-btn-discord > .wp-block-button__link::after {
    content: "" !important;
    display: inline-block !important;
    order: -1;
    flex: 0 0 auto;
    width: 1.3em;
    height: 1.3em;
    background: url("/wp-content/uploads/2026/08/DISCORD-BLACK.png") center / contain no-repeat;
}

/* ==========================================================================
   4. CITATION — .cdp-chip--quote (reprend .cdp-quote-chip de global.css §4)
   Conservée ici pour être posée via le style de bloc « Citation ».
   ========================================================================== */
.cdp-chip--quote,
.is-style-cdp-quote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 5px;
    padding: 12px 24px;
    background-color: var(--wp--preset--color--paper, #FAF8F4);
    border: 2px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 16px;
    box-shadow: 2px 3px 0 0 var(--wp--preset--color--contrast, #241A16);
    font-weight: 500;
    font-style: italic;
    color: var(--wp--preset--color--contrast, #241A16);
}
.cdp-chip--quote::before,
.is-style-cdp-quote::before {
    content: "\201C";
    color: var(--wp--preset--color--primary, #9B423E);
    font: 900 1.8rem/1 Arial, sans-serif;
    font-style: normal;
    position: relative;
    top: 4px;
}

/* ==========================================================================
   5. ACCORDÉON GÉNÉRIQUE — .cdp-accordion (design Erwann)
   Utilisé par l'accueil (chapitres) ET le parcours (modules).
   Amélioration progressive : sans .cdp-js, tous les panneaux restent ouverts.
   Animé par assets/js/cdp-accordion.js.

   Structure :
     .cdp-accordion[.cdp-js]
       .cdp-accordion__item[.is-open]
         .cdp-accordion__head            <- cliquable (role bouton posé par le JS)
         .cdp-accordion__panel
           .cdp-accordion__panel-inner
   ========================================================================== */
.cdp-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Carte (compose le look .cdp-card) */
.cdp-accordion__item {
    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);
    overflow: hidden;
}

/* En-tête (bandeau Tertiaire) */
.cdp-accordion__head {
    display: flex !important;
    align-items: center;
    gap: 18px;
    padding: clamp(20px, 4vw, 32px);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background: var(--wp--preset--color--paper, #FAF8F4);
}
/* Filet de séparation quand ouvert */
.cdp-accordion.cdp-js .cdp-accordion__item.is-open .cdp-accordion__head {
    border-bottom: 2px solid var(--wp--preset--color--contrast, #241A16);
}

/* Icône +/× (état) — ::after sur l'en-tête. Fermé = « + », ouvert = « × ». */
.cdp-accordion__head::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    background:
        linear-gradient(var(--wp--preset--color--contrast, #241A16), var(--wp--preset--color--contrast, #241A16)) center/100% 2.5px no-repeat,
        linear-gradient(var(--wp--preset--color--contrast, #241A16), var(--wp--preset--color--contrast, #241A16)) center/2.5px 100% no-repeat;
    transition: transform 0.3s ease;
}
/* Ouvert : le « + » pivote de 45° -> « × » */
.cdp-accordion.cdp-js .cdp-accordion__item.is-open .cdp-accordion__head::after {
    transform: rotate(45deg);
}

/* Panneau dépliable (grid 0fr -> 1fr), actif seulement avec le JS */
.cdp-accordion__panel { margin-top: 0; }
.cdp-accordion.cdp-js .cdp-accordion__panel {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 0.35s ease;
}
.cdp-accordion.cdp-js .cdp-accordion__item.is-open .cdp-accordion__panel {
    grid-template-rows: minmax(0, 1fr);
}
.cdp-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
    padding: clamp(20px, 4vw, 32px);
}
.cdp-accordion:not(.cdp-js) .cdp-accordion__panel-inner {
    padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Variante MODULES (.cdp-accordion--modules) : icône + titre Playfair +
   sous-titre + barre de progression (injectée par le JS). Corps légèrement
   plus chaud (Primaire) que le bandeau (Tertiaire).
   -------------------------------------------------------------------------- */
.cdp-accordion--modules .cdp-accordion__panel-inner {
    background: var(--wp--preset--color--secondary, #F5F0E6);
}
/* Titre + sous-titre du module : interligne resserré (pas de block-gap). */
.cdp-accordion__titles > * { margin-block: 0 !important; }
.cdp-accordion__titles > * + * { margin-top: 2px !important; }
.cdp-accordion__head-main {
    display: flex !important;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
/* Icône d'en-tête de module — ::before sur head-main (pas d'élément à poser dans
   le pattern). Boîte seule ; l'IMAGE (PNG par module) est posée par parcours.css. */
.cdp-accordion--modules .cdp-accordion__head-main::before {
    content: "";
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    background: center / contain no-repeat;
}
.cdp-accordion__titles { min-width: 0; margin: 0; }

/* Barre de progression (injectée par le JS dans l'en-tête).
   Colonne : le % au-dessus de la barre, aligné à droite. Le margin-top:0
   annule le block-gap (30px) que le layout « flow » pose sur le 2e enfant de
   l'en-tête ; align-self:center recentre l'ensemble verticalement. */
.cdp-accordion__progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 0 !important;
    align-self: center;
}
.cdp-accordion__pct {
    min-width: 3.4ch;
    text-align: right;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--wp--preset--color--contrast, #241A16);
}
.cdp-accordion__bar {
    display: block;
    width: clamp(70px, 12vw, 130px);
    height: 10px;
    border-radius: 999px;
    background: var(--wp--preset--color--paper, #FAF8F4);
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast, #241A16);
    overflow: hidden;
}
.cdp-accordion__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #9B423E);
    transition: width 0.35s ease, background 0.35s ease;
}
/* Module terminé (100 %) : barre verte + libellé « Terminé » vert (posé par le JS). */
.cdp-accordion__item.is-complete .cdp-accordion__bar-fill {
    background: var(--wp--preset--color--success, #627D3A);
}
.cdp-accordion__item.is-complete .cdp-accordion__pct {
    color: var(--wp--preset--color--success, #627D3A);
}

/* ==========================================================================
   Très petit écran : en-tête de module compact. Icône + barre réduites pour
   dégager de la place au titre « Module N » (sinon tronqué < ~350px). On ne
   touche pas à la taille du TEXTE (convention : zéro CSS sur le texte).
   ========================================================================== */
@media (max-width: 400px) {
    .cdp-accordion--modules .cdp-accordion__head-main::before { width: 40px; height: 40px; }
    .cdp-accordion__bar { width: clamp(56px, 12vw, 130px); }
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cdp-accordion.cdp-js .cdp-accordion__panel,
    .cdp-accordion__head::after,
    .cdp-accordion__bar-fill {
        transition: none !important;
    }
}