/**
 * CSS spécifique aux patterns de la page d'accueil :
 * - Budget formation & Nos activités (chem/budget-formation-activites)
 * - Formats de formation & Sur-mesure (chem/formats-formation-sur-mesure)
 * - Le CHEM Santé – Présentation (chem/presentation-chem-sante)
 * - Hero – Former ceux qui soignent (chem/hero-former-ceux-qui-soignent)
 *
 * Séparé de global.css pour ne pas mélanger les styles génériques du thème
 * avec les ajustements propres à des patterns précis.
 */

/* ── Pattern "Budget formation & Nos activités" : badge décoratif ──
   Pas besoin d'être personnalisable : pastille + icône posées en CSS pur
   (::before pour la forme, ::after pour l'icône), pas de bloc dédié. */
.chem-budget-promo {
    position: relative;
    overflow: hidden;
}

.chem-budget-promo::before {
    content: "";
    position: absolute;
    top: -40px;
    right: 30px;
    width: 75px;
    height: 99px;
    background-color: var(--wp--preset--color--vert);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.chem-budget-promo::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 55.5px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 3.5C2 2.67157 2.67157 2 3.5 2H9V17H3.5C2.67157 17 2 16.3284 2 15.5V3.5Z' fill='white'/%3E%3Cpath d='M11 2H16.5C17.3284 2 18 2.67157 18 3.5V15.5C18 16.3284 17.3284 17 16.5 17H11V2Z' fill='white' fill-opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Pattern "Budget formation & Nos activités" : respiration mobile ──
   Les paddings (section + cartes) sont pensés pour desktop/tablette ;
   sur petit écran ils ne laissent presque plus de place aux pilules
   "Nos activités", qui se retrouvent alors compressées lettre par lettre. */
@media (max-width: 600px) {
    .chem-budget-columns {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .chem-budget-card {
        padding: 24px !important;
    }
}

/* ── Pattern "Formats de formation & Sur-mesure" : hauteur plafonnée à 450px ──
   Le texte de droite peut être plus ou moins long selon le contenu ; on force
   la carte à ne jamais dépasser 450px (au lieu de min-height qui laisserait
   grandir si le texte est long), l'image occupe toute cette hauteur. */
.chem-format-card {
    max-height: 450px;
    overflow: hidden;
}

/* La classe générée par WP pour ce wp:columns (ex. wp-container-core-columns-is-layout-XXXX)
   change à chaque enregistrement du contenu — jamais stable, donc inutilisable comme
   sélecteur CSS. On cible via le parent stable .chem-format-card à la place. */
.chem-format-card > .wp-block-columns {
    width: 100%;
    max-width: 100%;
}

/* Le bloc de gauche (titre + texte + grille de formats) doit faire la même
   hauteur que la carte verte de droite : hauteur fixe identique, sur les deux.
   flex-wrap:nowrap est indispensable ici : le layout flex vertical de WP passe
   en "wrap" par défaut, et avec une hauteur fixe, dès que le contenu dépasse
   450px il bascule dans une "colonne fantôme" à droite (qui se superposait
   pile sur la carte verte). */
.chem-format-left {
    height: 450px;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
}

.chem-format-image-wrap,
.chem-format-image-wrap .wp-block-image,
.chem-format-image-wrap figure,
.chem-format-image-wrap img {
    height: 450px;
}

/* La colonne de texte ne doit pas s'étirer au-delà de sa largeur déclarée :
   l'image doit occuper environ la moitié de la carte, pas seulement le reliquat. */
.chem-format-text-wrap {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* ── Pattern "Formats de formation & Sur-mesure" : accent décoratif sur l'image ──
   Pas besoin d'être personnalisable : forme posée en CSS pur, pas de bloc dédié. */
.chem-format-image-wrap {
    position: relative;
    overflow: hidden;
}

.chem-format-image-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 120px;
    background-color: var(--wp--preset--color--vert);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
    z-index: 1;
}

/* Accent décoratif côté texte, en fond derrière le contenu (le bouton "Contactez-nous"
   étant en style outline/transparent, la forme est visible en transparence à son niveau,
   comme sur la maquette). */
.chem-format-text-wrap {
    position: relative;
    overflow: hidden;
}

.chem-format-text-wrap::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    background-color: var(--wp--preset--color--vert);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.chem-format-text-wrap > * {
    position: relative;
    z-index: 1;
}

/* ── Pattern "Le CHEM Santé – Présentation" : carte bleue superposée sur l'image ──
   Chevauchement obtenu par marge négative (pas de position:absolute) : l'éditeur
   de blocs force "position:relative" sur tous les wrappers de blocs pour ses
   propres besoins (sélection, barre d'outils), ce qui écrasait notre
   position:absolute et cassait le chevauchement UNIQUEMENT dans le BO (le front
   restait correct). La marge négative n'a pas ce problème : rendu identique
   BO / front. */
.chem-pres-wrap {
    display: flex;
    align-items: flex-start;
}

.chem-pres-image {
    width: 75%;
    min-width: 0;
}

.chem-pres-image img {
    min-height: 434px;
    object-fit: cover;
}

/* position:relative + z-index:1 nécessaires : WordPress met déjà .wp-block-image
   en position:relative par défaut, donc sans ça la carte (non positionnée)
   peint AVANT l'image dans l'ordre d'empilement CSS et se retrouve cachée
   derrière sur la portion qui chevauche. */
.chem-pres-card {
    position: relative;
    z-index: 1;
    width: 426px;
    flex-shrink: 0;
    margin-top: 60px;
    margin-left: -47px;
    box-sizing: border-box;
}

/* Sous 1024px, plus de chevauchement : la carte repasse dans le flux normal,
   pleine largeur, empilée sous l'image. En deçà, la place manque pour tenir
   les 426px de la carte sans réduire l'image en dessous de sa largeur. */
@media (max-width: 1024px) {
    .chem-pres-wrap {
        flex-direction: column;
    }

    .chem-pres-image {
        width: 100%;
    }

    .chem-pres-card {
        width: 100%;
        margin-top: 16px;
        margin-left: 0;
    }
}

/* ── Pattern "Hero – Former ceux qui soignent" ──
   Fond dégradé + forme décorative (posés en CSS pur, pas de bloc dédié) +
   photo + bloc chem/hero-card, tous positionnés en absolu sur la même section. */
.chem-hero-section {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(180deg, #D0ECFF 0%, #0264AC 100%);
    min-height: 570px;
}

/* Forme décorative : tracé SVG réel (pas le rectangle de repli que Figma exporte
   à la place des vecteurs complexes), posé en CSS pur via background-image. */
.chem-hero-section::before {
    content: "";
    position: absolute;
    width: 825px;
    height: 474px;
    left: 501px;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='825' height='474' viewBox='0 0 825 474' fill='none'%3E%3Cpath d='M807.112 325.523C770.734 325.523 750.356 355.608 750.356 372.305C750.356 594.33 630.504 734.826 428.387 734.826C274.119 734.826 142.343 642.466 88.4548 507.987C279.553 507.987 389.442 458.047 479.256 376.667C548.238 307.623 590.805 212.405 590.805 107.409C590.805 2.41311 501.294 -91 392.009 -91C169.815 -85.7352 0 110.718 0 334.248C0 369.146 4.37742 403.142 12.2266 435.633C13.7361 441.951 15.5476 448.269 17.359 454.436C69.4356 631.635 233.665 761 428.236 761C665.524 761 861 556.273 861 370.801C861 354.104 843.188 325.674 806.961 325.674L807.112 325.523ZM372.084 -8.41735C439.859 -8.41735 494.803 41.6738 494.803 103.347C494.803 244.144 392.914 406.903 64.4543 406.903C38.0386 269.415 106.568 -8.56775 372.084 -8.56775V-8.41735Z' fill='url(%23paint0_linear_4794_54791)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4794_54791' x1='-3.9411e-06' y1='335.505' x2='861' y2='335.505' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230069B4'/%3E%3Cstop offset='1' stop-color='%231B1C38'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.chem-hero-photo {
    position: absolute;
    left: 594px;
    top: -5px;
    width: 631px;
    height: 559px;
    margin: 0;
    z-index: 1;
}

.chem-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* position:absolute !important : l'éditeur de blocs force "position:relative"
   sur chaque bloc pour ses propres besoins (sélection, barre d'outils) — sans
   !important cette règle gagnerait et la carte resterait dans le flux normal
   au lieu d'être ancrée au coin haut-gauche de la section. z-index:2 la place
   au-dessus de la forme décorative (::before, z-index:0) et de la photo
   (z-index:1) au cas où elles se chevaucheraient. */
.chem-hero-card-pos.wp-block-chem-hero-card {
    position: absolute !important;
    left: 30px;
    top: 30px;
    width: 510px !important;
    height: calc(100% - 60px);
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 40px 40px 25px 40px !important;
    justify-content: space-between !important;
    z-index: 2;
}

@media (max-width: 900px) {
    /* Forme décorative dédiée au mobile (même dégradé, tracé différent/plus
       compact que la version desktop), centrée en fond de section. */
    .chem-hero-section::before {
        width: 393px;
        height: 597px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='393' height='597' viewBox='0 0 393 597' fill='none'%3E%3Cpath d='M591.504 261.703C563.492 261.703 547.8 284.867 547.8 297.723C547.8 468.672 455.51 576.848 299.873 576.848C181.081 576.848 79.6089 505.734 38.1133 402.192C185.266 402.192 269.884 363.74 339.044 301.082C392.163 247.921 424.941 174.607 424.941 93.7655C424.941 12.9237 356.014 -59 271.86 -59C100.763 -54.9463 -30 96.3136 -30 268.421C-30 295.291 -26.6292 321.466 -20.5851 346.483C-19.4227 351.347 -18.0278 356.212 -16.633 360.96C23.4678 497.395 149.93 597 299.756 597C482.477 597 633 439.37 633 296.565C633 283.709 619.284 261.819 591.388 261.819L591.504 261.703ZM256.517 4.58476C308.707 4.58476 351.016 43.1526 351.016 90.6384C351.016 199.045 272.558 324.362 19.6321 324.362C-0.708931 218.503 52.0615 4.46896 256.517 4.46896V4.58476Z' fill='url(%23paint0_linear_4794_39541)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4794_39541' x1='-30' y1='269.389' x2='633' y2='269.389' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230069B4'/%3E%3Cstop offset='1' stop-color='%231B1C38'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    }

    .chem-hero-section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: linear-gradient(180deg, #D0ECFF 0%, #0264AC 100%);
        padding: 16px;
    }

    /* Photo au-dessus de la carte, collée dessus (pas d'espace entre les deux). */
    .chem-hero-photo {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        order: -1;
        z-index: 1;
    }

    .chem-hero-photo img {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .chem-hero-card-pos.wp-block-chem-hero-card {
        position: static !important;
        left: 0;
        top: 0;
        width: 100% !important;
        height: auto;
        margin: 0 !important;
    }
}