/* =========================================================
   Option D — V5.23 STABLE
   Snippets séparés :
   - .s_optiond_filters
   - .s_optiond_gallery
   ========================================================= */

.s_optiond_filters,
.s_optiond_gallery {
    --od-filter-gap: 24px;
    --od-btn-width: 180px;
    --od-btn-height: 72px;
    --od-btn-radius: 6px;
    --od-btn-bg: transparent;
    --od-btn-color: #a965f5;
    --od-btn-border: #5f249f;
    --od-btn-hover-bg: #4a1b7f;
    --od-btn-hover-color: #ffffff;
    --od-btn-hover-border: #4a1b7f;

    --od-card-gap: 24px;
    --od-card-radius: 12px;
    --od-card-border-width: 0px;
    --od-card-border-color: transparent;

    --od-caption-pad-left: 0px;
    --od-caption-pad-right: 0px;
    --od-caption-icon-size: 20px;
    --od-caption-icon-gap: 16px;
    --od-caption-icon-color: currentColor;

    --od-card-cta-color: #a965f5;
    --od-card-cta-icon-color: currentColor;
    --od-card-cta-font-size: 16px;
    --od-card-cta-icon-size: 18px;
    --od-card-cta-gap: 12px;
    --od-card-cta-pad-top: 18px;
    --od-card-cta-pad-right: 0px;
    --od-card-cta-pad-bottom: 14px;
    --od-card-cta-pad-left: 0px;

    --od-arrow-size: 44px;
    --od-arrow-bg: #171727;
    --od-arrow-color: #ffffff;
    --od-arrow-border: #5f249f;
    --od-arrow-radius: 999px;
}

.s_optiond_filters .x_optiond_container,
.s_optiond_gallery .x_optiond_container {
    width: calc(100% - 32px);
    max-width: 1400px;
    margin: 0 auto;
}

.s_optiond_filters .x_optiond_carousel_shell,
.s_optiond_gallery .x_optiond_carousel_shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.s_optiond_filters .x_optiond_arrow,
.s_optiond_gallery .x_optiond_arrow {
    width: var(--od-arrow-size);
    height: var(--od-arrow-size);
    display: none;
    flex: 0 0 var(--od-arrow-size);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--od-arrow-border);
    border-radius: var(--od-arrow-radius);
    background: var(--od-arrow-bg);
    color: var(--od-arrow-color);
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}

.s_optiond_filters.x_od_arrows_enabled .x_optiond_arrow,
.s_optiond_gallery.x_od_arrows_enabled .x_optiond_arrow {
    display: inline-flex;
}

.s_optiond_filters .x_optiond_arrow[disabled],
.s_optiond_gallery .x_optiond_arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.s_optiond_filters .x_optiond_arrow span,
.s_optiond_gallery .x_optiond_arrow span {
    font-size: calc(var(--od-arrow-size) * .55);
    line-height: 1;
}

/* FILTERS */
.s_optiond_filters .x_optiond_filters_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--od-filter-gap);
    width: 100%;
}

.s_optiond_filters .x_optiond_btn,
.s_optiond_filters.x_optiond_btn {
    --btn-bg: var(--od-local-btn-bg, var(--od-btn-bg));
    --btn-color: var(--od-local-btn-color, var(--od-btn-color));
    --btn-border: var(--od-local-btn-border, var(--od-btn-border));
    --btn-hover-bg: var(--od-local-btn-hover-bg, var(--od-btn-hover-bg));
    --btn-hover-color: var(--od-local-btn-hover-color, var(--od-btn-hover-color));
    --btn-hover-border: var(--od-local-btn-hover-border, var(--od-btn-hover-border));

    box-sizing: border-box;
    width: var(--od-btn-width);
    min-height: var(--od-btn-height);
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid var(--btn-border);
    border-radius: var(--od-btn-radius);
    background: var(--btn-bg);
    color: var(--btn-color);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.s_optiond_filters .x_optiond_btn_inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s_optiond_filters .x_optiond_btn_title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
}

.s_optiond_filters .x_optiond_btn_subtitle {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    opacity: .86;
}

.s_optiond_filters.x_od_btn_subtitle_hidden .x_optiond_btn_subtitle {
    display: none;
}

.s_optiond_filters .x_optiond_btn:hover,
.s_optiond_filters.x_optiond_btn:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
}


/* GALLERY */
.s_optiond_gallery .x_optiond_gallery_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--od-card-gap);
    width: 100%;
}

.s_optiond_gallery.x_od_cols_2 .x_optiond_gallery_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.s_optiond_gallery.x_od_cols_4 .x_optiond_gallery_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s_optiond_gallery.x_od_cols_5 .x_optiond_gallery_grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.s_optiond_gallery.x_od_cols_6 .x_optiond_gallery_grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.s_optiond_gallery.x_od_cols_7 .x_optiond_gallery_grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.s_optiond_gallery.x_od_cols_8 .x_optiond_gallery_grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.s_optiond_gallery .x_optiond_card,
.s_optiond_gallery.x_optiond_card {
    --card-radius: var(--od-local-card-radius, var(--od-card-radius));
    --card-border-width: var(--od-local-card-border-width, var(--od-card-border-width));
    --card-border-color: var(--od-local-card-border-color, var(--od-card-border-color));
    --caption-pad-left: var(--od-local-caption-pad-left, var(--od-caption-pad-left));
    --caption-pad-right: var(--od-local-caption-pad-right, var(--od-caption-pad-right));

    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--card-radius);
    border: var(--card-border-width) solid var(--card-border-color);
    background: transparent;
}

.s_optiond_gallery .x_optiond_media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #25253a;
    border-radius: inherit;
}

.s_optiond_gallery.x_od_ratio_square .x_optiond_media { aspect-ratio: 1 / 1; }
.s_optiond_gallery.x_od_ratio_wide .x_optiond_media { aspect-ratio: 16 / 9; }
.s_optiond_gallery.x_od_ratio_portrait .x_optiond_media { aspect-ratio: 4 / 5; }

.s_optiond_gallery .x_optiond_project_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.s_optiond_gallery.x_od_image_contain .x_optiond_project_image {
    object-fit: contain;
}

.s_optiond_gallery .x_optiond_card_caption {
    position: relative;
    box-sizing: border-box;

    /*
       V5.18 :
       la zone texte est une vraie grille.
       L'icône n'est plus positionnée en absolute au milieu d'une caption
       qui peut s'étirer verticalement : elle reste attachée au bloc
       titre + description.
    */
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: var(--od-caption-icon-gap);
    align-content: start;

    min-height: 0;
    padding-top: 12px;
    padding-left: var(--caption-pad-left);
    padding-right: var(--caption-pad-right);
}

/* ---------------------------------------------------------
   ICÔNES DÉCORATIVES
   --------------------------------------------------------- */

.s_optiond_gallery .x_optiond_card_caption::before,
.s_optiond_gallery .x_optiond_card_caption::after {
    position: static;
    display: none;

    /*
       V5.19 :
       l'icône du texte n'est plus centrée au milieu du bloc titre+description.
       Elle est maintenant ancrée en bas du bloc texte, ce qui évite l'effet
       "icône qui flotte au milieu" sur les cartes hautes.
    */
    align-self: end;
    justify-self: end;
    align-items: center;
    justify-content: center;

    color: var(--od-caption-icon-color);
    font-size: var(--od-caption-icon-size);
    line-height: 1;

    transform: none;
    pointer-events: none;

    /*
       L'icône ne couvre que les deux lignes réellement occupées
       par le titre et la description. La troisième ligne 1fr reste
       libre pour l'étirement de la carte.
    */
    grid-row: 1 / 3;
}

/* Icône à droite : texte colonne 1, icône colonne 2. */
.s_optiond_gallery.x_od_caption_icon_arrow .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_chevron .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_plus .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_external .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_odoo .x_optiond_card_caption {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: var(--caption-pad-left);
    padding-right: var(--caption-pad-right);
}

.s_optiond_gallery.x_od_caption_icon_arrow .x_optiond_card_caption::after {
    content: "→";
    display: flex;
    grid-column: 2;
}

.s_optiond_gallery.x_od_caption_icon_chevron .x_optiond_card_caption::after {
    content: "›";
    display: flex;
    grid-column: 2;
}

.s_optiond_gallery.x_od_caption_icon_plus .x_optiond_card_caption::after {
    content: "+";
    display: flex;
    grid-column: 2;
}

.s_optiond_gallery.x_od_caption_icon_external .x_optiond_card_caption::after {
    content: "↗";
    display: flex;
    grid-column: 2;
}

/* ---------------------------------------------------------
   ICÔNE À GAUCHE
   --------------------------------------------------------- */

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_arrow .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_chevron .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_plus .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_external .x_optiond_card_caption,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_odoo .x_optiond_card_caption {
    grid-template-columns: auto minmax(0, 1fr);
}

/* Le texte passe en colonne 2. */
.s_optiond_gallery.x_od_caption_icon_left .x_optiond_card_title,
.s_optiond_gallery.x_od_caption_icon_left .x_optiond_card_desc {
    grid-column: 2;
}

/* Désactive l'icône droite dans les variantes gauche. */
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_arrow .x_optiond_card_caption::after,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_chevron .x_optiond_card_caption::after,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_plus .x_optiond_card_caption::after,
.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_external .x_optiond_card_caption::after {
    display: none;
}

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_arrow .x_optiond_card_caption::before {
    content: "→";
    display: flex;
    grid-column: 1;
}

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_chevron .x_optiond_card_caption::before {
    content: "›";
    display: flex;
    grid-column: 1;
}

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_plus .x_optiond_card_caption::before {
    content: "+";
    display: flex;
    grid-column: 1;
}

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_external .x_optiond_card_caption::before {
    content: "↗";
    display: flex;
    grid-column: 1;
}

/* ---------------------------------------------------------
   ICÔNE ODOO / FONT AWESOME
   --------------------------------------------------------- */

.s_optiond_gallery .x_optiond_caption_odoo_icon {
    position: static;
    display: none;

    grid-column: 2;
    grid-row: 1 / 3;

    align-self: end;
    justify-self: end;
    align-items: center;
    justify-content: center;

    color: var(--od-caption-icon-color);
    font-size: var(--od-caption-icon-size);
    line-height: 1;

    transform: none;
}

.s_optiond_gallery.x_od_caption_icon_odoo .x_optiond_caption_odoo_icon {
    display: inline-flex;
}

.s_optiond_gallery.x_od_caption_icon_left.x_od_caption_icon_odoo .x_optiond_caption_odoo_icon {
    grid-column: 1;
    justify-self: start;
}

.s_optiond_gallery.x_od_caption_icon_left .x_optiond_card_caption::before {
    justify-self: start;
}

/* Évite qu'une largeur/min-width héritée de l'éditeur perturbe la grille. */
.s_optiond_gallery .x_optiond_caption_odoo_icon.o_editable_media {
    max-width: none;
    margin: 0;
}

/* ---------------------------------------------------------
   CAS SANS ICÔNE
   --------------------------------------------------------- */

/*
   Si aucune icône n'est active, le texte reste en colonne unique même si
   une ancienne classe "position gauche" est encore présente dans le DOM.
*/
.s_optiond_gallery:not(.x_od_caption_icon_arrow):not(.x_od_caption_icon_chevron):not(.x_od_caption_icon_plus):not(.x_od_caption_icon_external):not(.x_od_caption_icon_odoo)
.x_optiond_card_title,
.s_optiond_gallery:not(.x_od_caption_icon_arrow):not(.x_od_caption_icon_chevron):not(.x_od_caption_icon_plus):not(.x_od_caption_icon_external):not(.x_od_caption_icon_odoo)
.x_optiond_card_desc {
    grid-column: 1;
}

.s_optiond_gallery .x_optiond_card_title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0 0 4px;
    min-height: 2.4em;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
}

/* Réserve la même hauteur de titre sur toutes les cartes d'une galerie.
   Par défaut : 2 lignes, ce qui aligne le départ des descriptions. */
.s_optiond_gallery.x_od_title_rows_auto .x_optiond_card_title {
    min-height: 0;
}

.s_optiond_gallery.x_od_title_rows_1 .x_optiond_card_title {
    min-height: 1.2em;
}

.s_optiond_gallery.x_od_title_rows_3 .x_optiond_card_title {
    min-height: 3.6em;
}

.s_optiond_gallery.x_od_title_rows_4 .x_optiond_card_title {
    min-height: 4.8em;
}

.s_optiond_gallery .x_optiond_card_desc {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    flex: 0 1 auto;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,.72);
}

/* Bas de carte CTA : texte à gauche, icône à droite.
   margin-top:auto pousse cette ligne en bas de chaque carte afin que les CTA
   restent alignés même lorsque les descriptions ont des hauteurs différentes. */
.s_optiond_gallery .x_optiond_card_cta,
.s_optiond_gallery.x_optiond_card .x_optiond_card_cta {
    display: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding-top: var(--od-card-cta-pad-top);
    padding-right: var(--od-card-cta-pad-right);
    padding-bottom: var(--od-card-cta-pad-bottom);
    padding-left: var(--od-card-cta-pad-left);
    align-items: center;
    justify-content: flex-start;
    gap: var(--od-card-cta-gap);
    color: var(--od-card-cta-color);
    font-size: var(--od-card-cta-font-size);
    line-height: 1.2;
    text-decoration: none !important;
}

.s_optiond_gallery .x_optiond_card_cta_text {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.s_optiond_gallery .x_optiond_card_cta_icon {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--od-card-cta-icon-color);
    font-size: var(--od-card-cta-icon-size);
    line-height: 1;
}

/* Affichage global de la galerie ou de la carte intérieure. */
.s_optiond_gallery.x_od_card_cta_enabled .x_optiond_card_cta {
    display: flex;
}

/* Surcharge individuelle d'une carte de galerie. */
.s_optiond_gallery .x_optiond_card.x_od_card_cta_force_show > .x_optiond_card_cta {
    display: flex;
}

.s_optiond_gallery .x_optiond_card.x_od_card_cta_force_hide > .x_optiond_card_cta {
    display: none !important;
}

/* En grille ou en carrousel, les cartes s'étirent sur la hauteur de leur ligne. */
.s_optiond_gallery .x_optiond_gallery_grid {
    align-items: stretch;
}

/*
   V5.20 — visibilité titre / description

   Dans le Website Builder, les éléments textuels peuvent recevoir des styles
   d'édition qui les remettent visuellement en display:block.
   Le masquage Option D doit donc gagner explicitement avec !important.

   Les variantes ci-dessous couvrent :
   - la Galerie Option D complète ;
   - une carte individuelle portant elle-même la classe ;
   - la Carte Option D intérieure, dont la racine est à la fois
     .s_optiond_gallery et .x_optiond_card.
*/
.s_optiond_gallery.x_od_card_title_hidden .x_optiond_card_title,
.s_optiond_gallery .x_optiond_card.x_od_card_title_hidden .x_optiond_card_title,
.s_optiond_gallery.x_optiond_card.x_od_card_title_hidden .x_optiond_card_title {
    display: none !important;
}

.s_optiond_gallery.x_od_card_desc_hidden .x_optiond_card_desc,
.s_optiond_gallery .x_optiond_card.x_od_card_desc_hidden .x_optiond_card_desc,
.s_optiond_gallery.x_optiond_card.x_od_card_desc_hidden .x_optiond_card_desc {
    display: none !important;
}


/* Compatibilité anciennes pages :
   si le paragraphe a été transformé par l'éditeur, masquer tout le contenu
   direct de la caption sauf le titre et l'icône Odoo. */
.s_optiond_gallery.x_od_card_desc_hidden
.x_optiond_card_caption > :not(.x_optiond_card_title):not(.x_optiond_caption_odoo_icon),
.s_optiond_gallery .x_optiond_card.x_od_card_desc_hidden
.x_optiond_card_caption > :not(.x_optiond_card_title):not(.x_optiond_caption_odoo_icon),
.s_optiond_gallery.x_optiond_card.x_od_card_desc_hidden
.x_optiond_card_caption > :not(.x_optiond_card_title):not(.x_optiond_caption_odoo_icon) {
    display: none !important;
    visibility: hidden !important;
}

/* CAROUSEL MODES DESKTOP */
.s_optiond_filters.x_od_desktop_scroll .x_optiond_filters_row,
.s_optiond_gallery.x_od_desktop_scroll .x_optiond_gallery_grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.s_optiond_filters.x_od_desktop_scroll .x_optiond_filters_row::-webkit-scrollbar,
.s_optiond_gallery.x_od_desktop_scroll .x_optiond_gallery_grid::-webkit-scrollbar {
    display: none;
}

.s_optiond_filters.x_od_desktop_scroll .x_optiond_btn,
.s_optiond_gallery.x_od_desktop_scroll .x_optiond_card {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.s_optiond_gallery.x_od_desktop_scroll .x_optiond_card {
    width: min(32vw, 380px);
}

/* MOBILE */
@media (max-width: 767px) {
    .s_optiond_filters:not(.x_od_mobile_scroll) .x_optiond_filters_row {
        flex-wrap: wrap;
    }
    .s_optiond_filters.x_od_desktop_scroll:not(.x_od_mobile_scroll) .x_optiond_filters_row {
        display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .s_optiond_filters.x_od_mobile_scroll .x_optiond_filters_row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .s_optiond_filters.x_od_mobile_scroll .x_optiond_filters_row::-webkit-scrollbar {
        display: none;
    }
    .s_optiond_filters.x_od_mobile_scroll .x_optiond_btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .s_optiond_gallery .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_2 .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_4 .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_5 .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_6 .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_7 .x_optiond_gallery_grid,
    .s_optiond_gallery.x_od_cols_8 .x_optiond_gallery_grid {
        grid-template-columns: 1fr;
    }
    .s_optiond_gallery.x_od_mobile_cols_2 .x_optiond_gallery_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .s_optiond_gallery.x_od_desktop_scroll:not(.x_od_mobile_scroll) .x_optiond_gallery_grid {
        display: grid;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .s_optiond_gallery.x_od_mobile_scroll .x_optiond_gallery_grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .s_optiond_gallery.x_od_mobile_scroll .x_optiond_gallery_grid::-webkit-scrollbar {
        display: none;
    }
    .s_optiond_gallery.x_od_mobile_scroll .x_optiond_card {
        flex: 0 0 min(82vw, 360px);
        width: min(82vw, 360px);
        scroll-snap-align: start;
    }
}


/* =========================================================
   CONTENUS INTÉRIEURS OPTION D
   ========================================================= */

.x_optiond_inner_button {
    vertical-align: middle;
}

.x_optiond_inner_card {
    width: 100%;
    max-width: 100%;
}

/* Les snippets intérieurs ne doivent pas hériter d'une marge de section. */
.s_optiond_filters.x_optiond_inner_button,
.s_optiond_gallery.x_optiond_inner_card {
    margin: 0;
}

/* En mode éditeur, ils restent clairement sélectionnables. */
.o_editable .x_optiond_inner_button,
.o_editable .x_optiond_inner_card {
    position: relative;
}


/* =========================================================
   CONTENU INTÉRIEUR — CARROUSEL IMAGES OPTION D
   ========================================================= */
.s_optiond_inner_image_carousel {
    --od-inner-carousel-gap: 18px;
    --od-inner-carousel-radius: 12px;
    --od-inner-carousel-border-width: 0px;
    --od-inner-carousel-border-color: transparent;
    --od-inner-carousel-columns: 3;
    --od-inner-carousel-arrow-size: 42px;
    --od-inner-carousel-arrow-bg: #171727;
    --od-inner-carousel-arrow-color: #ffffff;
    --od-inner-carousel-arrow-border: #5f249f;
    --od-inner-carousel-arrow-radius: 999px;
    --od-inner-carousel-autoplay-delay: 4s;
    --od-inner-carousel-transition-duration: 0.6s;
    width: 100%;
    min-width: 0;
}
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_1 { --od-inner-carousel-columns: 1; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_2 { --od-inner-carousel-columns: 2; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_4 { --od-inner-carousel-columns: 4; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_5 { --od-inner-carousel-columns: 5; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_6 { --od-inner-carousel-columns: 6; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_7 { --od-inner-carousel-columns: 7; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_cols_8 { --od-inner-carousel-columns: 8; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_shell { display:flex; align-items:center; width:100%; min-width:0; gap:12px; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_track { display:flex; flex:1 1 auto; min-width:0; gap:var(--od-inner-carousel-gap); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_track::-webkit-scrollbar { display:none; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_item { flex:0 0 calc((100% - ((var(--od-inner-carousel-columns) - 1) * var(--od-inner-carousel-gap))) / var(--od-inner-carousel-columns)); min-width:0; overflow:hidden; border:var(--od-inner-carousel-border-width) solid var(--od-inner-carousel-border-color); border-radius:var(--od-inner-carousel-radius); scroll-snap-align:start; background:transparent; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_image { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.s_optiond_inner_image_carousel.x_od_inner_ratio_square .x_optiond_inner_carousel_image { aspect-ratio:1 / 1; }
.s_optiond_inner_image_carousel.x_od_inner_ratio_wide .x_optiond_inner_carousel_image { aspect-ratio:16 / 9; }
.s_optiond_inner_image_carousel.x_od_inner_ratio_portrait .x_optiond_inner_carousel_image { aspect-ratio:4 / 5; }
.s_optiond_inner_image_carousel.x_od_inner_image_contain .x_optiond_inner_carousel_image { object-fit:contain; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_arrow { display:none; flex:0 0 var(--od-inner-carousel-arrow-size); width:var(--od-inner-carousel-arrow-size); height:var(--od-inner-carousel-arrow-size); align-items:center; justify-content:center; border:1px solid var(--od-inner-carousel-arrow-border); border-radius:var(--od-inner-carousel-arrow-radius); background:var(--od-inner-carousel-arrow-bg); color:var(--od-inner-carousel-arrow-color); cursor:pointer; }
.s_optiond_inner_image_carousel.x_od_inner_carousel_arrows .x_optiond_inner_carousel_arrow { display:inline-flex; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_arrow[disabled] { opacity:.35; cursor:default; }
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_arrow span { font-size:calc(var(--od-inner-carousel-arrow-size) * .55); line-height:1; }
@media (max-width: 767px) {
    .s_optiond_inner_image_carousel { --od-inner-carousel-columns:1; }
    .s_optiond_inner_image_carousel.x_od_inner_carousel_mobile_2 { --od-inner-carousel-columns:2; }
    .s_optiond_inner_image_carousel .x_optiond_inner_carousel_shell { gap:8px; }
}


/* =========================================================
   CONTENU INTÉRIEUR — TEXTE + ICÔNE OPTION D
   ========================================================= */

/*
   Principe V5.10 :
   le snippet occupe toute la largeur disponible de la colonne.
   On ne tente plus de centrer le snippet lui-même avec margin:auto.
   On centre son CONTENU à l'intérieur de la zone disponible.
   C'est beaucoup plus fiable dans les colonnes/grilles du Website Builder Odoo.
*/
.s_optiond_inner_icon_text {
    --od-icon-text-gap: 16px;

    /* Compatibilité V5.9/V5.10 : ancienne valeur globale conservée en fallback. */
    --od-icon-text-padding: 0px;
    --od-icon-text-padding-top: var(--od-icon-text-padding);
    --od-icon-text-padding-right: var(--od-icon-text-padding);
    --od-icon-text-padding-bottom: var(--od-icon-text-padding);
    --od-icon-text-padding-left: var(--od-icon-text-padding);

    --od-icon-text-icon-size: 32px;
    --od-icon-text-icon-color: currentColor;

    display: flex;
    flex-direction: row;
    gap: var(--od-icon-text-gap);

    width: 100%;
    max-width: 100%;
    min-width: 0;

    /*
       Si la colonne possède une hauteur définie ou étirée par Odoo,
       le composant l'utilise. Sinon, 100% retombe naturellement sur auto.
    */
    height: 100%;
    min-height: 100%;

    box-sizing: border-box;
    padding-top: var(--od-icon-text-padding-top);
    padding-right: var(--od-icon-text-padding-right);
    padding-bottom: var(--od-icon-text-padding-bottom);
    padding-left: var(--od-icon-text-padding-left);

    /* Position par défaut = centre dans la colonne. */
    justify-content: center;
    align-items: center;
    text-align: center;
}

.s_optiond_inner_icon_text .x_optiond_icon_text_icon {
    flex: 0 0 auto;
    color: var(--od-icon-text-icon-color);
    font-size: var(--od-icon-text-icon-size);
    line-height: 1;
}

.s_optiond_inner_icon_text .x_optiond_icon_text_body {
    min-width: 0;
    max-width: 100%;
}

.s_optiond_inner_icon_text .x_optiond_icon_text_content {
    margin: 0;
}

/* ---------------------------------------------------------
   Disposition de l'icône
   --------------------------------------------------------- */

.s_optiond_inner_icon_text.x_od_icon_text_right {
    flex-direction: row-reverse;
}

.s_optiond_inner_icon_text.x_od_icon_text_top {
    flex-direction: column;
}

.s_optiond_inner_icon_text.x_od_icon_text_bottom {
    flex-direction: column-reverse;
}

/* ---------------------------------------------------------
   Alignement DU TEXTE uniquement.
   Il ne déplace plus le composant dans la colonne.
   --------------------------------------------------------- */

.s_optiond_inner_icon_text.x_od_icon_text_align_start {
    text-align: left;
}

.s_optiond_inner_icon_text:not(.x_od_icon_text_align_start):not(.x_od_icon_text_align_end) {
    text-align: center;
}

.s_optiond_inner_icon_text.x_od_icon_text_align_end {
    text-align: right;
}

/* ---------------------------------------------------------
   POSITION HORIZONTALE DANS LA COLONNE

   Gauche/Droite de l'icône = axe principal horizontal :
   on agit avec justify-content.

   Haut/Bas de l'icône = axe transversal horizontal :
   on agit avec align-items.
   --------------------------------------------------------- */

/* Icône à gauche ou à droite */
.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom).x_od_icon_text_place_left {
    justify-content: flex-start;
}

.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom):not(.x_od_icon_text_place_left):not(.x_od_icon_text_place_right) {
    justify-content: center;
}

.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom).x_od_icon_text_place_right {
    justify-content: flex-end;
}

/* Icône en haut ou en bas */
.s_optiond_inner_icon_text.x_od_icon_text_top.x_od_icon_text_place_left,
.s_optiond_inner_icon_text.x_od_icon_text_bottom.x_od_icon_text_place_left {
    align-items: flex-start;
}

.s_optiond_inner_icon_text.x_od_icon_text_top:not(.x_od_icon_text_place_left):not(.x_od_icon_text_place_right),
.s_optiond_inner_icon_text.x_od_icon_text_bottom:not(.x_od_icon_text_place_left):not(.x_od_icon_text_place_right) {
    align-items: center;
}

.s_optiond_inner_icon_text.x_od_icon_text_top.x_od_icon_text_place_right,
.s_optiond_inner_icon_text.x_od_icon_text_bottom.x_od_icon_text_place_right {
    align-items: flex-end;
}

/* ---------------------------------------------------------
   POSITION VERTICALE DANS LA ZONE DISPONIBLE

   Gauche/Droite de l'icône = axe transversal vertical :
   on agit avec align-items.

   Haut/Bas de l'icône = axe principal vertical :
   on agit avec justify-content.
   --------------------------------------------------------- */

/* Icône à gauche ou à droite */
.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom).x_od_icon_text_v_top {
    align-items: flex-start;
}

.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom):not(.x_od_icon_text_v_top):not(.x_od_icon_text_v_bottom) {
    align-items: center;
}

.s_optiond_inner_icon_text:not(.x_od_icon_text_top):not(.x_od_icon_text_bottom).x_od_icon_text_v_bottom {
    align-items: flex-end;
}

/* Icône en haut ou en bas */
.s_optiond_inner_icon_text.x_od_icon_text_top.x_od_icon_text_v_top,
.s_optiond_inner_icon_text.x_od_icon_text_bottom.x_od_icon_text_v_top {
    justify-content: flex-start;
}

.s_optiond_inner_icon_text.x_od_icon_text_top:not(.x_od_icon_text_v_top):not(.x_od_icon_text_v_bottom),
.s_optiond_inner_icon_text.x_od_icon_text_bottom:not(.x_od_icon_text_v_top):not(.x_od_icon_text_v_bottom) {
    justify-content: center;
}

.s_optiond_inner_icon_text.x_od_icon_text_top.x_od_icon_text_v_bottom,
.s_optiond_inner_icon_text.x_od_icon_text_bottom.x_od_icon_text_v_bottom {
    justify-content: flex-end;
}

/* ---------------------------------------------------------
   Largeur du texte
   --------------------------------------------------------- */

/*
   Le composant lui-même reste toujours à 100% de la colonne pour assurer
   un centrage fiable. L'option "100%" fait donc grandir la zone de texte,
   sans casser le positionnement du composant.
*/
.s_optiond_inner_icon_text.x_od_icon_text_full_width .x_optiond_icon_text_body {
    flex: 1 1 auto;
    width: 100%;
}

/*
   En mode Haut/Bas + largeur 100%, le texte remplit la largeur,
   tout en gardant l'icône centrée/gauche/droite selon les options.
*/
.s_optiond_inner_icon_text.x_od_icon_text_full_width.x_od_icon_text_top .x_optiond_icon_text_body,
.s_optiond_inner_icon_text.x_od_icon_text_full_width.x_od_icon_text_bottom .x_optiond_icon_text_body {
    align-self: stretch;
}



/* =========================================================
   CARROUSEL INTÉRIEUR — MODES DE TRANSITION
   ========================================================= */

/* Défilement standard / infini : le scroll reste piloté par JS. */
.s_optiond_inner_image_carousel .x_optiond_inner_carousel_track {
    scroll-behavior: auto;
}

/*
   Défilement infini :
   les clones sont créés uniquement sur le site public.
   Ils conservent exactement les mêmes dimensions que les originaux,
   ce qui rend le raccord visuellement continu.
*/
.s_optiond_inner_image_carousel.x_od_inner_carousel_infinite
.x_optiond_inner_carousel_item[data-od-clone] {
    pointer-events: none;
}

/*
   Mode fondu :
   - une seule image visible ;
   - toutes les images occupent exactement la même cellule ;
   - transition d'opacité réglable.
*/
.s_optiond_inner_image_carousel.x_od_inner_carousel_fade
.x_optiond_inner_carousel_track {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    scroll-snap-type: none;
    padding-bottom: 0;
}

.s_optiond_inner_image_carousel.x_od_inner_carousel_fade
.x_optiond_inner_carousel_item {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 100%;
    flex: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--od-inner-carousel-transition-duration) ease,
        visibility 0s linear var(--od-inner-carousel-transition-duration);
}

.s_optiond_inner_image_carousel.x_od_inner_carousel_fade
.x_optiond_inner_carousel_item.x_od_inner_carousel_item_active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--od-inner-carousel-transition-duration) ease,
        visibility 0s linear 0s;
}

/* En fondu, les flèches peuvent toujours être utilisées. */
.s_optiond_inner_image_carousel.x_od_inner_carousel_fade
.x_optiond_inner_carousel_arrow[disabled] {
    opacity: 1;
    cursor: pointer;
}

/* Respect du réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
    .s_optiond_inner_image_carousel.x_od_inner_carousel_fade
    .x_optiond_inner_carousel_item {
        transition: none;
    }
}

@media (max-width: 420px) {
    .s_optiond_gallery .x_optiond_card_cta_text {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* =========================================================
   V5.22 — IMAGE PLEIN CADRE SANS TITRE / DESCRIPTION
   ========================================================= */

/*
   Galerie complète :
   quand titre ET description sont masqués, l'image reprend toute
   la hauteur disponible de la carte au lieu de conserver une caption vide.
*/
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden
.x_optiond_card > .x_optiond_media {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
}

/*
   Sans icône du texte active, la caption n'a plus aucun contenu utile.
   On la retire entièrement du layout.
*/
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden
:not(.x_od_caption_icon_arrow):not(.x_od_caption_icon_chevron):not(.x_od_caption_icon_plus):not(.x_od_caption_icon_external):not(.x_od_caption_icon_odoo)
.x_optiond_card > .x_optiond_card_caption {
    display: none !important;
    flex: 0 0 0;
    min-height: 0;
    padding: 0 !important;
}

/*
   Carte Option D intérieure :
   sa racine est elle-même .s_optiond_gallery + .x_optiond_card.
*/
.s_optiond_gallery.x_optiond_card.x_od_card_title_hidden.x_od_card_desc_hidden
> .x_optiond_media {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
}

.s_optiond_gallery.x_optiond_card.x_od_card_title_hidden.x_od_card_desc_hidden
:not(.x_od_caption_icon_arrow):not(.x_od_caption_icon_chevron):not(.x_od_caption_icon_plus):not(.x_od_caption_icon_external):not(.x_od_caption_icon_odoo)
> .x_optiond_card_caption {
    display: none !important;
    flex: 0 0 0;
    min-height: 0;
    padding: 0 !important;
}

/*
   L'image remplit la nouvelle zone média.
   object-fit reste piloté par Remplir / Contenir.
*/
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden
.x_optiond_media > .x_optiond_project_image,
.s_optiond_gallery.x_optiond_card.x_od_card_title_hidden.x_od_card_desc_hidden
> .x_optiond_media > .x_optiond_project_image {
    width: 100%;
    height: 100%;
}

/*
   Si une icône du texte reste active, on garde une caption compacte
   uniquement pour l'icône au lieu de laisser une grande zone vide.
*/
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden.x_od_caption_icon_arrow
.x_optiond_card > .x_optiond_card_caption,
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden.x_od_caption_icon_chevron
.x_optiond_card > .x_optiond_card_caption,
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden.x_od_caption_icon_plus
.x_optiond_card > .x_optiond_card_caption,
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden.x_od_caption_icon_external
.x_optiond_card > .x_optiond_card_caption,
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden.x_od_caption_icon_odoo
.x_optiond_card > .x_optiond_card_caption {
    flex: 0 0 auto;
    min-height: 0;
    grid-template-rows: auto;
}

/* Conserver l'arrondi de la carte sur l'image agrandie. */
.s_optiond_gallery.x_od_card_title_hidden.x_od_card_desc_hidden
.x_optiond_card > .x_optiond_media,
.s_optiond_gallery.x_optiond_card.x_od_card_title_hidden.x_od_card_desc_hidden
> .x_optiond_media {
    border-radius: inherit;
}



/* =========================================================
   V5.23 — STABILITÉ / COMPATIBILITÉ
   ========================================================= */

.x_optiond_card[hidden],
.x_optiond_card.x_od_filtered_out {
    display: none !important;
}

/* Classe structurelle commune : galerie et carte intérieure. */
.x_optiond_card_component {
    min-width: 0;
}

/* Évite les interactions sur les clones du carrousel infini. */
.x_optiond_inner_carousel_item[data-od-clone] {
    pointer-events: none;
    user-select: none;
}