/* ==========================================================================
   Hydroplante Blocks : rendu identique a l'accueil Elementor (page 46).
   Cotes relevees sur la page d'origine aux largeurs 390, 768, 1024, 1440 ;
   points de rupture d'Elementor : mobile <= 767 px, tablette <= 1024 px.
   Selecteurs a deux classes au moins (reset du theme, kit Elementor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Enveloppes "boxed" (contenu limite a 1140 / 1024 / 767 px)
   -------------------------------------------------------------------------- */

.hp-tiles .hp-tiles__inner,
.hp-bento .hp-bento__inner,
.hp-carousel-section .hp-carousel-section__inner {
    width: 100%;
    max-width: min( 100%, 1140px );
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .hp-tiles .hp-tiles__inner,
    .hp-bento .hp-bento__inner,
    .hp-carousel-section .hp-carousel-section__inner {
        max-width: min( 100%, 1024px );
    }
}

@media (max-width: 767px) {
    .hp-tiles .hp-tiles__inner,
    .hp-bento .hp-bento__inner,
    .hp-carousel-section .hp-carousel-section__inner {
        max-width: min( 100%, 767px );
    }
}

/* --------------------------------------------------------------------------
   Tuiles de categories
   -------------------------------------------------------------------------- */

.wp-block-hydroplante-tuiles.hp-tiles,
.hp-tiles {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 10px;
    overflow: auto;
}

.hp-tiles .hp-tiles__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 10px 0;
}

.hp-tiles .hp-tile {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 0;
    color: var( --e-global-color-primary, #2787C9 );
    text-decoration: none;
}

.hp-tiles .hp-tile__media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 108px;
    min-height: 108px;
    padding: 10px;
    border-radius: 200px;
    background-color: #F4F7F4;
}

/* Image contrainte en 76 x 76 px comme le widget Image d'Elementor
   (largeur max + hauteur fixees, sans recadrage : rendu d'origine). */
.hp-tiles .hp-tile__media .hp-tile__image {
    display: inline-block;
    max-width: 76px;
    height: 76px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
}

.hp-tiles .hp-tile__label {
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
}

@media (max-width: 767px) {
    .hp-tiles .hp-tile {
        flex: 0 0 auto;
        width: 108px;
    }
}

/* --------------------------------------------------------------------------
   Bento de cartes
   -------------------------------------------------------------------------- */

.wp-block-hydroplante-bento.hp-bento,
.hp-bento {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 10px;
    overflow: auto;
}

.hp-bento .hp-bento__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
}

.hp-bento .hp-promo {
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    border-radius: 8px;
}

.hp-bento .hp-promo .hp-promo__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    object-fit: cover;
}

.hp-bento .hp-promo__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.hp-bento .hp-promo__part {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
}

/* Carte entiere cliquable (Q-17) : la zone du lien s'etend a la carte. */
.hp-bento .hp-promo--link .hp-promo__arrow::after,
.hp-bento .hp-promo--link .hp-promo__button::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* Grande carte (Compositions). Largeur relevee : celle que donne le
   retrecissement des conteneurs Elementor (32 % / 68 %). */
.hp-bento .hp-promo--grande {
    flex: 0 0 auto;
    gap: 5px;
    width: calc( 24.16% + 13.58px );
    min-height: 472px;
    padding: 33px;
    container-type: inline-size;
}

.hp-bento .hp-promo--grande .hp-promo__overlay {
    background-image: linear-gradient( 114deg, #000000 47%, #00000000 100% );
    opacity: 0.45;
}

/* Q-21 : de 768 a 1150 px environ, "Compositions" en 1.8rem etait plus
   large que la carte et coupe par son bord ("Compositio"). La taille suit
   la largeur utile du titre (carte moins ses 2 x 10 px de marge interieure ;
   6,8 em = largeur du mot), plafonnee a 1.8rem :
   rendu inchange la ou le mot tenait deja. Mot plus long saisi un jour :
   coupure a la ligne plutot que rognage. */
.hp-bento .hp-promo--grande .hp-promo__title {
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: min( 1.8rem, ( 100cqi - 20px ) / 6.8 );
    overflow-wrap: break-word;
    font-weight: 800;
    line-height: 1.2em;
}

.hp-bento .hp-promo--grande .hp-promo__text {
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2em;
}

.hp-bento .hp-promo__button {
    display: inline-block;
    align-self: flex-start;
    padding: 10px 16px;
    border: none;
    border-radius: 100px;
    background-color: var( --e-global-color-accent, #0E9EDE );
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
}

.hp-bento a.hp-promo__button:hover,
.hp-bento a.hp-promo__button:focus {
    background-color: var( --e-global-color-c731326, #E8F3FB );
    color: #1F2626;
}

/* Grille des petites cartes */
.hp-bento .hp-bento__grid {
    display: flex;
    flex: 1 1 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
    min-width: 0;
    padding: 0;
}

.hp-bento .hp-promo--petite {
    flex: 0 1 auto;
    justify-content: space-between;
    gap: 20px;
    width: 47%;
    padding: 10px;
}

.hp-bento .hp-promo--petite .hp-promo__overlay {
    background-image: linear-gradient( 79deg, #020101 28%, #F2295B00 100% );
    opacity: 0.4;
}

.hp-bento .hp-promo--petite .hp-promo__title {
    width: 44%;
    min-width: min-content;
    max-width: 100%;
    margin-bottom: 0;
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5em;
}

.hp-bento .hp-promo__arrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 10px;
    border: none;
    border-radius: 100px;
    background-color: var( --e-global-color-accent, #0E9EDE );
    color: #FFFFFF;
    fill: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: all .3s;
}

.hp-bento .hp-promo__arrow svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.hp-bento a.hp-promo__arrow:hover,
.hp-bento a.hp-promo__arrow:focus {
    background-color: var( --e-global-color-c731326, #E8F3FB );
    color: #1F2626;
}

@media (max-width: 767px) {
    .hp-bento .hp-bento__inner {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .hp-bento .hp-promo--grande {
        width: 100%;
    }

    .hp-bento .hp-bento__grid {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        overflow: auto;
    }

    .hp-bento .hp-promo--petite {
        flex: 0 0 auto;
        width: 150px;
    }

    .hp-bento .hp-promo--petite .hp-promo__title {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Presentation (Groupe au style "hp-intro" : titre, paragraphes, bouton)
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-hp-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 4em 0;
}

.wp-block-group.is-style-hp-intro > * {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px;
}

.wp-block-group.is-style-hp-intro .wp-block-heading {
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2em;
}

/* Marges des paragraphes (0 / 0,9rem comme le reset du theme) : la mise en
   page "flow" de WordPress les remettrait a zero. */
.wp-block-group.is-style-hp-intro p {
    margin: 0 0 0.9rem;
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4em;
}

.wp-block-group.is-style-hp-intro .wp-block-buttons {
    justify-content: center;
}

.wp-block-group.is-style-hp-intro .wp-block-button__link {
    display: inline-block;
    padding: 10px 20px;
    border: 6px solid var( --e-global-color-7fc161d, #F4F7F4 );
    border-radius: 100px;
    background-color: var( --e-global-color-accent, #0E9EDE );
    box-shadow: 0 0 10px 0 #EFF8ED;
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
}

.wp-block-group.is-style-hp-intro .wp-block-button__link:hover,
.wp-block-group.is-style-hp-intro .wp-block-button__link:focus {
    background-color: var( --e-global-color-c731326, #E8F3FB );
    color: #1F2626;
}

/* Mobile : pleine largeur (Elementor ne posait les 660 px qu'a partir de
   768 px ; ecart visible entre 680 et 767 px, releve le 24/10). */
@media (max-width: 767px) {
    .wp-block-group.is-style-hp-intro {
        max-width: none;
        padding: 2em 0;
    }
}

/* --------------------------------------------------------------------------
   Carrousel des realisations : defilement continu (une diapositive toutes
   les 8 s, lineaire, sans pause), 4 / 2 / 1 diapositives visibles, 10 px
   d'ecart, bords estompes. Diapositives dupliquees par carousel.js.
   -------------------------------------------------------------------------- */

.hp-carousel-section {
    display: flex;
    flex-direction: column;
}

.hp-carousel-section .hp-carousel-section__inner {
    padding: 3em 0;
}

.hp-carousel-section .hp-carousel {
    --hp-per: 4;
    container-type: inline-size;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( to right, transparent 0%, white 15%, white 85%, transparent 100% );
    mask-image: linear-gradient( to right, transparent 0%, white 15%, white 85%, transparent 100% );
}

.hp-carousel .hp-carousel__track {
    display: flex;
    width: max-content;
}

.hp-carousel.is-running .hp-carousel__track {
    animation: hp-carousel-defilement var( --hp-duration, 48s ) linear infinite;
}

/* La piste contient deux fois les diapositives, chacune suivie de son
   ecart (marge droite) : -50 % ramene exactement au depart. */
@keyframes hp-carousel-defilement {
    to {
        transform: translateX( -50% );
    }
}

.hp-carousel .hp-carousel__slide {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc( ( 100cqw - ( var( --hp-per ) - 1 ) * 10px ) / var( --hp-per ) );
    margin-right: 10px;
}

.hp-carousel .hp-carousel__slide .hp-carousel__image {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    object-fit: cover;
    object-position: center center;
}

.hp-carousel .hp-carousel__slide .hp-carousel__image--reduite {
    max-width: 80%;
}

.hp-carousel .hp-slide-note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    width: 80%;
    min-height: 210px;
    padding: 15px;
    border-radius: 8px;
    background-color: var( --e-global-color-primary, #2787C9 );
}

.hp-carousel .hp-slide-note svg {
    display: block;
}

.hp-carousel .hp-slide-note .hp-slide-note__text {
    margin: 0 0 0.9rem;
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4em;
}

/* Seuils du carrousel d'origine (points de rupture de Swiper, en largeur
   minimale) : 4 diapositives des 1024 px, 2 des 767 px, 1 en dessous. */
@media (max-width: 1023.98px) {
    .hp-carousel-section .hp-carousel {
        --hp-per: 2;
    }
}

@media (max-width: 766.98px) {
    .hp-carousel-section .hp-carousel {
        --hp-per: 1;
    }
}

@media (max-width: 767px) {
    .hp-carousel .hp-slide-note {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-carousel.is-running .hp-carousel__track {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Page de texte (Groupe au style "hp-texte" : A propos, Mentions legales,
   CGV, FAQ). Reprend le conteneur Elementor (1140 px, marges 4em) avec le
   titre (widget Titre) et le texte (widget Editeur de texte) du kit. Les
   marges des blocs sont posees ici : la mise en page "flux" de WordPress
   en impose d'autres (24 px) avec une specificite superieure au reset.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-hp-texte {
    padding: 4em 0;
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4em;
}

.wp-block-group.is-style-hp-texte > * {
    max-width: 1140px;
    margin-inline: auto;
}

.wp-block-group.is-style-hp-texte p {
    margin-block: 0 .9rem;
}

.wp-block-group.is-style-hp-texte ul,
.wp-block-group.is-style-hp-texte ol {
    margin-block: 0;
}

.wp-block-group.is-style-hp-texte h1,
.wp-block-group.is-style-hp-texte h2,
.wp-block-group.is-style-hp-texte h3,
.wp-block-group.is-style-hp-texte h4,
.wp-block-group.is-style-hp-texte h5,
.wp-block-group.is-style-hp-texte h6 {
    margin-block: .5rem 1rem;
}

.wp-block-group.is-style-hp-texte .wp-block-spacer {
    margin-block: 0;
}

/* Titre de la page (widget Titre d'Elementor : police principale du kit). */
.wp-block-group.is-style-hp-texte .hp-texte__titre {
    margin-block: 0 20px;
    color: var( --e-global-color-primary, #2787C9 );
    font-family: "Raleway", Sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2em;
}

/* Elementor separe le titre et le texte par un ecart de 20 px qui ne
   fusionne pas avec la marge haute d'un intertitre place en tete du
   texte : marges additionnees ici. */
.wp-block-group.is-style-hp-texte .hp-texte__titre + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: calc( 20px + .5rem );
}

/* Mentions legales et CGV : intertitres plus espaces (CSS de la page). */
.wp-block-group.hp-texte--mentions h2,
.wp-block-group.hp-texte--cgv h2 {
    margin-block-start: 20px;
}

.wp-block-group.hp-texte--mentions .hp-texte__titre + h2,
.wp-block-group.hp-texte--cgv .hp-texte__titre + h2 {
    margin-block-start: 40px;
}

/* Mentions legales : marges 3em au bureau et en tablette. */
.wp-block-group.is-style-hp-texte.hp-texte--mentions {
    padding: 3em 0;
}

@media (max-width: 1024px) {
    .wp-block-group.is-style-hp-texte {
        padding: 4em .5em;
    }

    .wp-block-group.is-style-hp-texte.hp-texte--mentions {
        padding: 3em 0;
    }

    /* FAQ : 10 px tout autour en tablette et en mobile. */
    .wp-block-group.is-style-hp-texte.hp-texte--faq {
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .wp-block-group.is-style-hp-texte.hp-texte--mentions {
        padding: 4em .5em;
    }
}

/* Contact : titre et introduction, puis coordonnees (largeur de leur plus
   longue ligne) et formulaire (60 %) en deux colonnes ecartees, l'une sous
   l'autre en mobile. Intertitres en 1.5rem (CSS de la page). */
.wp-block-group.is-style-hp-texte.hp-texte--contact {
    padding: 4em 0 0;
}

.wp-block-group.is-style-hp-texte.hp-texte--contact-bas {
    padding: 1em 0 4em;
}

.wp-block-group.hp-texte--contact-bas h2 {
    font-size: 1.5rem;
}

.wp-block-group.hp-texte--contact-bas .hp-contact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.wp-block-group.hp-texte--contact-bas .hp-contact > * {
    min-width: 0;
    margin: 0;
}

.wp-block-group.hp-texte--contact-bas .hp-contact__infos {
    flex: 0 1 auto;
}

.wp-block-group.hp-texte--contact-bas .hp-contact__formulaire {
    flex: 0 1 60%;
}

/* Formulaire Fluent Forms (n° 3, cree par Fabien le 24/10) a la charte des
   formulaires du site (connexion, inscription) : etiquettes 0.9rem semi-gras,
   champs blancs bordure #E2E8E2 arrondis 8 px, contour bleu au focus ;
   bouton d'envoi comme l'ancien formulaire (pilule pleine largeur, fond
   accent, bordure 6 px #F4F7F4). Selecteurs plus forts que ceux de Fluent
   Forms, y compris son style en ligne du bouton (0,3,1), sans !important. */
.hp-contact__formulaire .fluentform .ff-el-group {
    margin-bottom: 16px;
}

.hp-contact__formulaire .fluentform .ff-el-input--label label {
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.hp-contact__formulaire .fluentform .ff-el-input--label {
    margin-bottom: 6px;
}

.hp-contact__formulaire .fluentform .ff-el-is-required.asterisk-right label::after {
    color: #c0392b;
}

.hp-contact__formulaire .fluentform .ff-el-form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var( --hpb-bordure, #E2E8E2 );
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: none;
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}

.hp-contact__formulaire .fluentform .ff-el-form-control::placeholder {
    color: #767676;
    opacity: 1;
}

.hp-contact__formulaire .fluentform .ff-el-form-control:focus {
    outline: none;
    border-color: var( --e-global-color-primary, #2787C9 );
    box-shadow: 0 0 0 3px #e8f3fb;
}

.hp-contact__formulaire .fluentform textarea.ff-el-form-control {
    min-height: 120px;
    resize: vertical;
}

.hp-contact__formulaire .fluentform .ff-el-form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var( --e-global-color-text, #1F2626 );
    font-family: "Raleway", Sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
}

.hp-contact__formulaire .fluentform .ff-el-form-check-input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var( --e-global-color-primary, #2787C9 );
}

.hp-contact__formulaire .fluentform .ff_t_c a {
    color: var( --e-global-color-primary, #2787C9 );
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hp-contact__formulaire .frm-fluent-form .ff_submit_btn_wrapper {
    margin-bottom: 0;
}

.hp-contact__formulaire .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style) {
    display: block;
    width: 100%;
    min-height: 45.6px;
    margin: 0;
    padding: 6px;
    border: 6px solid var( --e-global-color-7fc161d, #F4F7F4 );
    border-radius: 50px;
    background-color: var( --e-global-color-accent, #0E9EDE );
    box-shadow: none;
    color: #FFFFFF;
    font-family: "Raleway", Sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}

.hp-contact__formulaire .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover,
.hp-contact__formulaire .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):focus {
    background-color: var( --e-global-color-c731326, #E8F3FB );
    color: #1F2626;
    opacity: 1;
}

.hp-contact__formulaire .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):focus-visible {
    outline: 3px solid var( --e-global-color-primary, #2787C9 );
    outline-offset: 2px;
}

/* Messages de Fluent Forms (succes, erreurs sous les champs). */
.hp-contact__formulaire .fluentform .ff-message-success {
    border: 1px solid #E2E8E2;
    border-radius: 8px;
    box-shadow: none;
    color: #1F2626;
    font-family: "Raleway", Sans-serif;
}

.hp-contact__formulaire .fluentform .error,
.hp-contact__formulaire .fluentform .text-danger {
    color: #c0392b;
    font-family: "Raleway", Sans-serif;
    font-size: 0.85rem;
}

@media (max-width: 1024px) {
    .wp-block-group.is-style-hp-texte.hp-texte--contact,
    .wp-block-group.is-style-hp-texte.hp-texte--contact-bas {
        padding: 30px 10px;
    }
}

@media (max-width: 767px) {
    .wp-block-group.hp-texte--contact-bas .hp-contact {
        flex-wrap: wrap;
    }

    .wp-block-group.hp-texte--contact-bas .hp-contact__formulaire {
        flex-basis: 100%;
    }
}

/* --------------------------------------------------------------------------
   Editeur : conteneurs lisibles (les apercus utilisent les regles ci-dessus)
   -------------------------------------------------------------------------- */

.hpb-editor-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border: 1px dashed #c3c4c7;
    border-radius: 8px;
}

.hpb-editor-container > * {
    flex: 1 1 160px;
    margin: 0;
}

/* Le conteneur porte aussi la classe de sa section (hp-tiles, hp-bento,
   hp-carousel) : les apercus prennent les regles du site ci-dessus ; ici,
   seule la disposition propre a l'editeur (grille, carrousel fige). */
.hpb-editor-container.hp-tiles,
.hpb-editor-container.hp-bento,
.hpb-editor-container.hp-carousel {
    flex-direction: row;
    overflow: visible;
}

.hpb-editor-container.hp-tiles > * {
    flex: 0 0 108px;
}

/* Grille : chaque carte garde sa colonne (en flex, la grande carte
   debordait sur sa voisine). */
.hpb-editor-container.hp-bento {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
}

.hpb-editor-container.hp-bento > * {
    min-width: 0;
}

.hpb-editor-container.hp-bento .hp-promo {
    width: 100%;
    height: 100%;
    min-height: 240px;
}

.hpb-editor-container.hp-carousel > * {
    flex: 0 0 220px;
}

.hpb-editor-container.hp-carousel .hp-carousel__image {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.hpb-editor-container.hp-carousel .hp-carousel__image--reduite {
    width: 80%;
}

.hpb-editor-container.hp-carousel .hp-slide-note {
    width: 100%;
}