/* ==========================================================================
   SECTIONS DE CONTENU (page d'accueil) — Responsive (FRONT-END uniquement).
   Charge via wp_enqueue_style('cdp-sections'). Regroupe les raffinements
   responsive des sections de contenu (hors hero, qui a son propre hero.css).

   Le DESKTOP (>= 1024px) est strictement inchange : tout est sous
   @media (max-width: 1023.98px).
   ========================================================================== */

@media (max-width: 1023.98px) {

    /* Titres de section : neutraliser les <br> manuels -> le titre se repartit
       naturellement selon la largeur mobile (le desktop garde sa coupure).
       (Le h1 de la hero est gere dans hero.css.) */
    .entry-content :is(h2, h3) br {
        display: none !important;
    }
    /* Equilibrer les lignes des titres -> evite qu'un mot ou le "?" reste seul
       sur la derniere ligne. */
    .entry-content :is(h2, h3) {
        text-wrap: balance;
    }

    /* Annotations manuscrites : masquees en mobile (coherence avec la hero ;
       l'info reste via les legendes/textes a cote). */
    .cdp-annotation {
        display: none !important;
    }

    /* Section « Pourquoi... » (fond secondary) : empiler photo + texte des
       1024px, comme le reste du site (au lieu du defaut WordPress a 782px).
       Ordre DOM conserve (photo puis texte) -> simple flex-direction column.
       + gap : espacement legende <-> paragraphe (etait colle).
       + max-width : lignes de texte lisibles en tablette (au lieu de pleine largeur). */
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns {
        flex-direction: column !important;
        gap: 32px !important;
        max-width: 600px !important;
        margin-inline: auto !important;
    }

    /* Photo (Gilles) plafonnee + centree : evite une image geante une fois empilee
       (mesuree a 800px de haut a 1000px de viewport). */
    .entry-content .wp-block-group.has-secondary-background-color .cdp-photo-wrapper {
        max-width: 340px !important;
        margin-inline: auto !important;
    }
    /* La figure "alignfull" doit avoir un plafond explicite, sinon elle collapse
       (largeur 0) dans la colonne plafonnee. */
    .entry-content .wp-block-group.has-secondary-background-color .cdp-photo-wrapper .wp-block-image {
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Exception : la section « Vos premiers mois » (Methode-CDP.png, quasi carree)
       peut monter jusqu'a 500px. On la distingue de la photo portrait de Gilles
       (colonnes sans titre) par la presence du <h2> dans les colonnes. */
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns:has(h2) .cdp-photo-wrapper,
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns:has(h2) .cdp-photo-wrapper .wp-block-image {
        max-width: 500px !important;
    }
    /* Centrage du contenu (titre + textes + CTA) une fois empile. */
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns:has(h2) h2,
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns:has(h2) p {
        text-align: center !important;
    }
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-columns:has(h2) .wp-block-buttons {
        justify-content: center !important;
    }

    /* Reduire le grand vide entre les bulles et l'image (margin-top:100px pose
       dans l'editeur sur le groupe enveloppant les colonnes). */
    .entry-content .wp-block-group.has-secondary-background-color .wp-block-group:has(> .wp-block-columns) {
        margin-top: 32px !important;
    }

    /* ----------------------------------------------------------------------
       Section Discord (« Ne restez plus jamais seul face au piano »).
       Hook unique : c'est la SEULE columns dont la colonne .cdp-photo-wrapper
       (l'image) est le DERNIER enfant (les 2 sections a fond secondary ont
       l'image en premier). Pas de fond -> aucune des regles ci-dessus ne
       s'applique : l'image restait pleine taille et collee au bouton CTA.
       Ordre mobile voulu : titre -> image -> texte -> CTA.
       ---------------------------------------------------------------------- */
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        max-width: 600px !important;
        margin-inline: auto !important;
    }
    /* Aplatir les 2 colonnes -> titre, image, paragraphes et bouton deviennent
       des items flex directs, donc reordonnables via `order`. */
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) > .wp-block-column {
        display: contents !important;
    }
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .wp-block-heading {
        order: 1;
    }
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .cdp-photo-wrapper .wp-block-image {
        order: 2;
    }
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) > .wp-block-column p {
        order: 3;
    }
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .wp-block-buttons {
        order: 4;
    }
    /* Image plafonnee + centree (elle etait trop grosse en alignfull). */
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .wp-block-image {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Centrage du contenu (titre + textes + CTA) une fois empile. */
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .wp-block-heading,
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) > .wp-block-column p {
        text-align: center !important;
    }
    .entry-content .wp-block-columns:has(> .cdp-photo-wrapper:last-child) .wp-block-buttons {
        justify-content: center !important;
    }
    /* Reduit le margin-top:100px du groupe enveloppant (pose dans l'editeur). */
    .entry-content .wp-block-group:has(> .wp-block-columns > .cdp-photo-wrapper:last-child) {
        margin-top: 32px !important;
    }
}

/* ==========================================================================
   Petits ecrans : bulles de citations en 2 colonnes facon "masonry"
   (flux multi-colonnes : les bulles se rangent verticalement col.1 puis col.2,
   hauteurs libres -> pas d'effet tableau rigide). Beaucoup moins de scroll.
   ========================================================================== */
@media (max-width: 600px) {
    .entry-content .wp-block-group:has(> .cdp-quote-chip) {
        display: block !important;
        column-count: 2 !important;
        column-gap: 10px !important;
    }
    .entry-content .cdp-quote-chip {
        display: flex !important;      /* bloc dans le flux de colonne */
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
        break-inside: avoid !important; /* une bulle ne se coupe pas entre 2 colonnes */
        font-size: 0.85rem !important;
    }
}