/* ==========================================================================
   Bloc Hero — Fidele a la maquette Figma
   Variantes : home, n1, n2, n3
   ========================================================================== */

/* ==========================================================================
   Editeur Gutenberg — wrapper interne InnerBlocks
   Reproduit le flex layout du .seche-hero__content pour que h1/p/buttons
   s'empilent avec le meme gap que sur le front.
   ========================================================================== */

.seche-hero__innerblocks {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

/* ==========================================================================
   Base commune
   ========================================================================== */

/* Base commune */
.seche-hero,
.wp-block-seche-hero {
    position: relative;
    overflow-x: visible;
    overflow-y: clip;
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--heading);
    background-color: var(--wp--preset--color--teal);
}

.seche-hero__inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.seche-hero__content {
    display: flex;
    flex-direction: column;
}

.seche-hero__content h1,
.seche-hero__content .wp-block-heading {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;
    color: var(--wp--preset--color--white);
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.15;
}

/* Accent italic dans les titres */
.seche-hero__content h1 em,
.seche-hero__content .wp-block-heading em {
    font-family: var(--wp--preset--font-family--accent);
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--green-accent);
}

.seche-hero__content p {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.45;
}

/* Breadcrumb */
.seche-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--md);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.seche-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.seche-hero__breadcrumb a:hover {
    color: var(--wp--preset--color--white);
}

/* Liens dans le texte du hero : lisibles sur le fond sombre */
.seche-hero__content p a {
    color: var(--wp--preset--color--green-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.3s ease;
}

.seche-hero__content p a:hover {
    color: var(--wp--preset--color--white);
}

.seche-hero__breadcrumb .bc-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--wp--preset--font-size--sm);
}

.seche-hero__breadcrumb .bc-current {
    color: rgba(255, 255, 255, 0.8);
}

/* CTA bouton — style géré globalement dans assets/css/buttons.css */
.seche-hero__content .wp-block-buttons {
    margin-top: 0;
}

/* Texture SVG eclats en arriere-plan */
.seche-hero__bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.seche-hero__bg-shapes svg {
    position: absolute;
    left: 22%;
    top: -35%;
    width: 70%;
    height: auto;
    filter: brightness(0.94);
}


/* ==========================================================================
   Variante HOME — Pleine largeur, mask-image eclats
   ========================================================================== */

.seche-hero--home {
    background-color: var(--wp--preset--color--teal);
    width: 100%;
    overflow: hidden;
}

.seche-hero--home .seche-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(40px, 5cqi, 70px) 0 clamp(40px, 5cqi, 70px) clamp(20px, 5cqi, 75px);
    overflow: visible;
    max-width: 1440px;
    margin: 0 auto;
    gap: clamp(24px, 4cqi, 48px);
}

.seche-hero--home .seche-hero__content {
    width: clamp(300px, 42%, 560px);
    flex-shrink: 1;
    gap: clamp(24px, 3cqi, 40px);
}

.seche-hero--home .seche-hero__content h1,
.seche-hero--home .seche-hero__content .wp-block-heading {
    font-size: clamp(var(--wp--preset--font-size--2-xl), 4cqi, var(--wp--preset--font-size--6-xl));
    letter-spacing: 0.82px;
}

.seche-hero--home .seche-hero__content p {
    font-size: var(--wp--preset--font-size--lg);
}

.seche-hero--home .seche-hero__content .wp-block-button__link {
    align-self: flex-start;
}

/* Pills domaines */
.seche-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -16px;
}

.seche-hero__pills a {
    display: inline-block;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    color: var(--wp--preset--color--white);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    padding: 6px 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.seche-hero__pills a:nth-child(1) { border-radius: 14px 0 14px 0; }
.seche-hero__pills a:nth-child(2) { border-radius: 0 14px 0 14px; }
.seche-hero__pills a:nth-child(3) { border-radius: 14px 0 14px 0; }
.seche-hero__pills a:nth-child(4) { border-radius: 0 14px 0 14px; }
.seche-hero__pills a:nth-child(5) { border-radius: 0 14px 0 14px; }
.seche-hero__pills a:nth-child(6) { border-radius: 14px 0 14px 0; }

.seche-hero__pills a:hover {
    background: rgba(166, 215, 28, 0.15);
    color: var(--wp--preset--color--green-accent);
}

/* Photo masquee par la forme eclats — mask-image CSS */
.seche-hero--home .seche-hero__media {
    width: 50%;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    aspect-ratio: 688 / 653;
}

.seche-hero--home .seche-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 190%;
    height: auto;
    max-width: none;
    object-fit: cover;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='898' height='848' viewBox='0 0 898 848' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.381 269.989C-2.378 253.793 10.202 239.458 26.634 239.458H246.358C252.122 239.458 257.489 241.103 262.135 244.512C315.219 283.46 656.405 535.744 660.372 588.966C666.028 664.833 663.228 772.898 661.454 822.632C660.921 837.567 648.518 849.046 633.612 847.924C551.963 841.777 304.369 814.67 185.313 707.261C65.77 599.412 14.984 355.72 0.381 269.989Z' fill='white'/%3E%3Cpath d='M234.146 30.531C231.387 14.336 243.967 0 260.399 0H480.124C485.887 0 491.254 1.645 495.9 5.055C548.984 44.002 890.17 296.286 894.137 349.508C899.793 425.375 896.993 533.44 895.219 583.174C894.686 598.109 882.283 609.589 867.377 608.466C785.728 602.319 538.134 575.213 419.078 467.803C299.535 359.954 248.749 116.262 234.146 30.531Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='898' height='848' viewBox='0 0 898 848' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.381 269.989C-2.378 253.793 10.202 239.458 26.634 239.458H246.358C252.122 239.458 257.489 241.103 262.135 244.512C315.219 283.46 656.405 535.744 660.372 588.966C666.028 664.833 663.228 772.898 661.454 822.632C660.921 837.567 648.518 849.046 633.612 847.924C551.963 841.777 304.369 814.67 185.313 707.261C65.77 599.412 14.984 355.72 0.381 269.989Z' fill='white'/%3E%3Cpath d='M234.146 30.531C231.387 14.336 243.967 0 260.399 0H480.124C485.887 0 491.254 1.645 495.9 5.055C548.984 44.002 890.17 296.286 894.137 349.508C899.793 425.375 896.993 533.44 895.219 583.174C894.686 598.109 882.283 609.589 867.377 608.466C785.728 602.319 538.134 575.213 419.078 467.803C299.535 359.954 248.749 116.262 234.146 30.531Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}


/* ==========================================================================
   Variante N1 — max-width 1440px, border-radius bas, image debordante
   ========================================================================== */

/* N1 : section = fond blanc pleine largeur, panel = fond teal 1440px */
.seche-hero--n1 {
    background-color: var(--wp--preset--color--white);
    padding: 0 0 184px;
    overflow: visible;
}

.seche-hero--n1 .seche-hero__panel {
    background-color: var(--wp--preset--color--teal);
    border-radius: 0 0 40px 40px;
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.seche-hero--n1 .seche-hero__bg-shapes {
    border-radius: 0 0 40px 40px;
}

.seche-hero--n1 .seche-hero__bg-shapes svg {
    left: 15%;
    top: -40%;
    width: 75%;
    opacity: 0.35;
}

.seche-hero--n1 .seche-hero__inner {
    display: flex;
    gap: 120px;
    align-items: center;
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    padding: 70px 70px 0;
}

.seche-hero--n1 .seche-hero__content {
    flex: 1;
    gap: 20px;
    padding-bottom: 70px;
}

.seche-hero--n1 .seche-hero__content h1,
.seche-hero--n1 .seche-hero__content .wp-block-heading {
    font-size: var(--wp--preset--font-size--6-xl);
    letter-spacing: 0.82px;
}

.seche-hero--n1 .seche-hero__content h1 em,
.seche-hero--n1 .seche-hero__content .wp-block-heading em {
    font-size: var(--wp--preset--font-size--6-xl);
}

.seche-hero--n1 .seche-hero__content p {
    font-size: var(--wp--preset--font-size--lg);
}


.seche-hero--n1 .seche-hero__media {
    flex-shrink: 0;
    width: 500px;
    height: 560px;
    overflow: visible;
    position: relative;
}

.seche-hero--n1 .seche-hero__image {
    width: 500px;
    height: 668px;
    max-width: none;
    object-fit: cover;
    border-radius: 30px 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
}


/* N1 sans image : on supprime l'espace reserve a l'image et on resserre le contenu */
.seche-hero--n1.seche-hero--no-image {
    padding-bottom: 0;
}

.seche-hero--n1.seche-hero--no-image .seche-hero__inner {
    display: block;
    gap: 0;
    padding: 70px 70px 0;
}

.seche-hero--n1.seche-hero--no-image .seche-hero__content {
    padding-bottom: 70px;
    max-width: 900px;
}

.seche-hero--n1.seche-hero--no-image .seche-hero__media {
    display: none;
}

/* N2 sans image */
.seche-hero--n2.seche-hero--no-image {
    padding-bottom: 0;
}

.seche-hero--n2.seche-hero--no-image .seche-hero__media {
    display: none;
}


/* ==========================================================================
   Variante N2 — max-width 1300px, border-radius 40px, image debordante
   ========================================================================== */

/* N2 : section = fond blanc pleine largeur, panel = fond green-mid/teal 1300px */
.seche-hero--n2 {
    background-color: var(--wp--preset--color--white);
    padding: 45px var(--seche-container-padding) 98px;
    overflow: visible;
}

.seche-hero--n2 .seche-hero__panel {
    border-radius: 40px;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.seche-hero--n2.seche-hero--teal .seche-hero__panel {
    background-color: var(--wp--preset--color--teal);
}

.seche-hero--n2.seche-hero--green-mid .seche-hero__panel {
    background-color: var(--wp--preset--color--green-mid);
}

.seche-hero--n2 .seche-hero__inner {
    display: flex;
    gap: 72px;
    align-items: center;
    padding: 50px 48px;
}

.seche-hero--n2 .seche-hero__content {
    flex: 1;
    gap: 16px;
}

.seche-hero--n2 .seche-hero__content h1,
.seche-hero--n2 .seche-hero__content .wp-block-heading {
    font-size: var(--wp--preset--font-size--4-xl);
    letter-spacing: 0.7px;
}

.seche-hero--n2 .seche-hero__content h1 em,
.seche-hero--n2 .seche-hero__content .wp-block-heading em {
    font-size: var(--wp--preset--font-size--4-xl);
}

.seche-hero--n2 .seche-hero__content p {
    font-size: var(--wp--preset--font-size--lg);
}

.seche-hero--n2 .seche-hero__media {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    --fixed: calc(48px + 10%);
    --space: max(var(--seche-container-padding), calc((100cqi - var(--wp--style--global--content-size)) / 2));
    --overflow: min(var(--fixed), var(--space));
    border-radius: 0 0 0 33px;
    width: calc(100% + var(--overflow));
    margin-right: calc(-1 * var(--overflow));
}

.seche-hero--n2 .seche-hero__image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

/* Glow décoratif */
.seche-hero--n2 .seche-hero__glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.seche-hero--n2 .seche-hero__glow::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(166, 215, 28, .08) 0%, transparent 70%);
}

.seche-hero--n2 .seche-hero__inner {
    position: relative;
    z-index: 1;
}

.seche-hero--n2 .seche-hero__content .wp-block-button__link {
    align-self: flex-start;
}


/* N2 sans image : on supprime la colonne media et on laisse le contenu respirer */
.seche-hero--n2.seche-hero--no-image .seche-hero__inner {
    display: block;
    gap: 0;
    padding: 50px 48px;
}

.seche-hero--n2.seche-hero--no-image .seche-hero__content {
    max-width: 900px;
}

.seche-hero--n2.seche-hero--no-image .seche-hero__media {
    display: none;
}


/* ==========================================================================
   Variante N3 — compact, sans image, border-radius 30px
   ========================================================================== */

/* N3 : section = fond blanc, panel = fond teal compact */
.seche-hero--n3 {
    background-color: var(--wp--preset--color--white);
    padding: 0 0 60px;
}

.seche-hero--n3 .seche-hero__panel {
    background-color: var(--wp--preset--color--teal);
    border-radius: 0 0 40px 40px;
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.seche-hero--n3 .seche-hero__bg-shapes {
    border-radius: 0 0 40px 40px;
}

.seche-hero--n3 .seche-hero__bg-shapes svg {
    left: 15%;
    top: -40%;
    width: 75%;
    opacity: 0.35;
}

.seche-hero--n3 .seche-hero__inner {
    display: block;
    padding: 70px 70px 50px;
}

.seche-hero--n3 .seche-hero__content {
    gap: 16px;
}

.seche-hero--n3 .seche-hero__content h1,
.seche-hero--n3 .seche-hero__content .wp-block-heading {
    font-size: var(--wp--preset--font-size--5-xl);
    letter-spacing: 0.82px;
}

.seche-hero--n3 .seche-hero__content h1 em,
.seche-hero--n3 .seche-hero__content .wp-block-heading em {
    font-size: var(--wp--preset--font-size--5-xl);
}

.seche-hero--n3 .seche-hero__content p {
    font-size: var(--wp--preset--font-size--lg);
    max-width: 700px;
}


/* ==========================================================================
   Couleur de fond — override via attribut heroColor
   ========================================================================== */

.seche-hero--home.seche-hero--teal {
    background-color: var(--wp--preset--color--teal);
}

.seche-hero--home.seche-hero--green-mid {
    background-color: var(--wp--preset--color--green-mid);
}


/* ==========================================================================
   Responsive — N1 tablette (passe en colonne tôt)
   ========================================================================== */
@container seche-contenu (max-width: 1280px) {
    .seche-hero--n1 {
        padding: 0 var(--seche-container-padding) 0;
    }

    .seche-hero--n1 {
        padding: 0 var(--seche-container-padding) 100px;
    }

    .seche-hero--n1 .seche-hero__inner {
        flex-direction: column;
        gap: 48px;
        padding: 48px 48px 0;
    }

    .seche-hero--n1 .seche-hero__content {
        padding-bottom: 0;
    }

    .seche-hero--n1 .seche-hero__content h1 {
        font-size: var(--wp--preset--font-size--4-xl);
    }

    .seche-hero--n1 .seche-hero__media {
        width: 100%;
        height: auto;
        overflow: visible;
        margin-bottom: -100px;
    }

    .seche-hero--n1 .seche-hero__image {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 30px 0 30px 0;
    }
}

/* ==========================================================================
   Responsive — Tablette
   ========================================================================== */

@container seche-contenu (max-width: 1024px) {
    /* HOME */
    .seche-hero--home .seche-hero__inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: clamp(32px, 5cqi, 48px);
    }

    .seche-hero--home .seche-hero__content {
        width: 100%;
        padding: clamp(40px, 5cqi, 60px) var(--seche-container-padding) 0;
    }

    .seche-hero--home .seche-hero__media {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .seche-hero--home .seche-hero__image {
        position: absolute;
        top: 0;
        left: var(--seche-container-padding);
        width: 130%;
        height: auto;
        max-width: none;
    }

    .seche-hero--home .seche-hero__bg-shapes {
        top: auto;
        bottom: -15%;
        height: 100%;
    }

    .seche-hero--home .seche-hero__bg-shapes svg {
        left: -10%;
        top: auto;
        bottom: 0;
        width: 100%;
    }

    /* N2 — colonne comme N1 */
    .seche-hero--n2 .seche-hero__inner {
        flex-direction: column;
        gap: 32px;
        padding: 36px 36px 0;
    }

    .seche-hero--n2 .seche-hero__media {
        --overflow: 0px;
        width: 100%;
        margin: 0;
        margin-bottom: -60px;
        overflow: visible;
        border-radius: 0;
    }

    .seche-hero--n2 .seche-hero__image {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 30px 0 30px 0;
    }

    .seche-hero--n2 .seche-hero__content h1 {
        font-size: var(--wp--preset--font-size--4-xl);
    }

    .seche-hero--n2 {
        padding-bottom: 60px;
    }

}


/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

@container seche-contenu (max-width: 600px) {
    /* HOME — hérité du clamp, rien de spécifique */

    /* N1 — image débordante comme en tablette */
    .seche-hero--n1 {
        padding: 0 var(--seche-container-padding) 80px;
    }

    .seche-hero--n1 .seche-hero__inner {
        flex-direction: column;
        gap: 24px;
        padding: 32px 24px 0;
    }

    .seche-hero--n1 .seche-hero__content {
        padding-bottom: 0;
    }

    .seche-hero--n1 .seche-hero__content h1 {
        font-size: var(--wp--preset--font-size--2-xl);
    }

    .seche-hero--n1 .seche-hero__content h1 em {
        font-size: var(--wp--preset--font-size--4-xl);
    }

    .seche-hero--n1 .seche-hero__content p {
        font-size: var(--wp--preset--font-size--base);
    }

    .seche-hero--n1 .seche-hero__media {
        width: 100%;
        height: auto;
        overflow: visible;
        margin-bottom: -80px;
    }

    .seche-hero--n1 .seche-hero__image {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0 30px 0 30px;
    }

    /* N2 — image dans le panel */
    .seche-hero--n2 {
        padding: 0 var(--seche-container-padding) 48px;
    }

    .seche-hero--n2 .seche-hero__panel {
        border-radius: 40px;
    }

    .seche-hero--n2 .seche-hero__inner {
        padding: 32px 16px 16px;
        gap: 24px;
    }

    .seche-hero--n2 .seche-hero__content {
        padding: 0 8px;
    }

    .seche-hero--n2 .seche-hero__content h1 {
        font-size: var(--wp--preset--font-size--2-xl);
    }

    .seche-hero--n2 .seche-hero__content h1 em {
        font-size: var(--wp--preset--font-size--2-xl);
    }

    .seche-hero--n2 .seche-hero__content p {
        font-size: var(--wp--preset--font-size--base);
    }

    .seche-hero--n2 .seche-hero__media {
        --overflow: 0px;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0 0 24px 24px;
        overflow: hidden;
    }

    .seche-hero--n2 .seche-hero__image {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }

    /* N3 */
    .seche-hero--n3 .seche-hero__inner {
        padding: 40px 24px 40px;
    }

    .seche-hero--n3 {
        border-radius: 0 0 24px 24px;
    }

    .seche-hero--n3 .seche-hero__content h1 {
        font-size: var(--wp--preset--font-size--2-xl);
    }

    .seche-hero--n3 .seche-hero__content h1 em {
        font-size: var(--wp--preset--font-size--4-xl);
    }

    .seche-hero--n3 .seche-hero__content p {
        font-size: var(--wp--preset--font-size--base);
    }
}

/* Éditeur uniquement : le placeholder image du hero HOME a le mask éclat (zone
   pleine en bas-droite). L'overlay (icône + boutons), centré par défaut, tombe
   sinon sur la partie transparente → on le décale vers la zone pleine du mask.
   Uniquement pour --home (n1/n2/n3 ont une image rectangulaire, overlay OK). */
.editor-styles-wrapper .seche-hero--home .seche-hero__media .leb-image-ph__overlay {
    transform: translate(6%, 20%);
}