/* ============================================
   RD Ajustments - Réservoir Digital
   Surcharges CSS pour l'intégration API
   ============================================ */

/* Fix hero.small rendering - override inherited absolute/overflow */
.hero.small .hero-inner {
    height: auto;
    overflow: visible;
}

.hero.small .hero_caption {
    position: relative;
    height: auto;
}

/* Contact success message */
.contact_success {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 25px;
}

/* ─── SKELETON LOADERS ─── */

@keyframes skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0ede8 0%, #faf8f5 50%, #f0ede8 100%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

.product_item.skeleton-item {
    pointer-events: none;
}
.product_item.skeleton-item .product_item-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, #f0ede8 0%, #faf8f5 50%, #f0ede8 100%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.product_item.skeleton-item .product_item-img img {
    visibility: hidden;
}
.product_item.skeleton-item .skeleton-line {
    height: 14px;
    margin: 8px 0;
    width: 80%;
}
.product_item.skeleton-item .skeleton-line.short {
    width: 50%;
}

/* Form validation errors */
.bloc_form.has-error input,
.bloc_form.has-error textarea,
.bloc_form.has-error select {
    border-color: #e74c3c !important;
}
.bloc_form.has-error label {
    color: #e74c3c;
}
.bloc_form .field-error {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
}

/* Fix autofill text invisible (blanc sur blanc) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-dark);
}

.blog_article img,
.blog_article .editor-js-image img {
    margin: 0 !important;
}
.blog_gallery {
    margin: 0 !important;
}

/* Top bar : laisser grandir la zone CTA quand le prénom logged-in est long, tout en gardant le logo centré dans le cas par défaut */
.header_wrap-cta {
    width: auto;
    min-width: 190px;
    flex-shrink: 0;
}
.header_wrap-item .cart-title {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* SVG account icon fallback (au cas où du SVG inline est conservé ailleurs) */
.header_wrap-item svg.account-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

@media only screen and (max-width: 991px) {
    .header_wrap-cta {
        min-width: 70px;
    }
}

/* Swiper bundle force `.swiper-wrapper { height: 100% }` → casse la hauteur des slides (cards et vidéos trop grandes).
   On la laisse en `auto` pour que le wrapper s'adapte au contenu des slides. */
.swiper_carousel .swiper-wrapper,
.swiper-video .swiper-wrapper {
    height: auto;
}

/* Checkout — variante "paiement annulé" de l'icône de validation
   (ton ambré = attention, paiement non finalisé, pas une erreur bloquante). */
.step_valid-icon.is-cancel {
    border-color: #c8941f;
    color: #c8941f;
}

/* ─── PAGE 404 / ERREUR ───
   Page d'erreur du site vitrine. Composition centrée, DA Thibault Cousin
   (or #c5a059, titres serif). Header par défaut en position:relative → pas
   de recouvrement, on garde un padding vertical généreux + min-height. */
.error_page {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 20px 110px;
    overflow: hidden;
}

/* Halo ambré doux derrière le chiffre */
.error_page::before {
    content: "";
    position: absolute;
    top: 42%;
    left: 50%;
    width: min(760px, 92vw);
    height: min(760px, 92vw);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(197, 160, 89, 0.14) 0%, rgba(197, 160, 89, 0) 62%);
    pointer-events: none;
    z-index: 0;
}

.error_page-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
}

.error_page-eyebrow {
    display: inline-block;
    font-family: var(--font-text), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 18px;
}

.error_page-code {
    display: block;
    font-family: var(--font-title-black), serif;
    font-size: clamp(120px, 22vw, 240px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error_page-title {
    font-family: var(--font-title), serif;
    color: var(--color-dark);
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.12;
    margin: 0 0 16px;
}

.error_page-text {
    font-family: var(--font-text), sans-serif;
    color: var(--color-grey);
    font-size: 17px;
    line-height: 1.6;
    margin: 0 auto 38px;
    max-width: 470px;
}

.error_page-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.error_page-links {
    display: flex;
    gap: 10px 26px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 470px;
    margin: 46px auto 0;
    padding-top: 30px;
    border-top: 1px solid var(--line-dark);
}

.error_page-links a {
    font-family: var(--font-text), sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-grey-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.no-touch .error_page-links a:hover {
    color: var(--color-primary-dark);
}

@media (max-width: 767px) {
    .error_page {
        min-height: 60vh;
        padding: 70px 18px 90px;
    }
    .error_page-text {
        font-size: 16px;
    }
    .error_page-links {
        gap: 8px 18px;
    }
}

/* ─── BOUTON RETOUR EN HAUT (SCROLL TO TOP) ─── */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.3s ease, visibility 0.35s, bottom 0s ease;
    text-decoration: none;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.no-touch .scroll-to-top:hover,
.scroll-to-top:active {
    background-color: var(--color-primary);
    color: var(--color-light);
    transform: translateY(-3px);
}

@media (max-width: 767px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* ─── FILTERS RESPONSIVE FIX ─── */
@media only screen and (max-width: 992px) {
    body.header-pinned .section.minis .filters.sticky,
    body.header-pinned .filters.sticky,
    .section.minis .filters.sticky,
    .filters.sticky {
        position: relative !important;
        top: 0 !important;
    }

    /* ─── MINIS RECAP & SIDEBAR SLIDE RESPONSIVE ─── */
    .minis_recap {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        z-index: 998;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    }

    .minis_recap.is-hidden {
        transform: translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Barre masquée quand elle est inutile (sélection vide, hero ou liste à l'écran) ou gênante (footer à l'écran) :
       elle cachait le bas du footer sur la page Minis. */
    .minis_recap.is-away {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
    .minis_recap .recap_choose-btn {
        width: 100%;
        height: 44px;
        justify-content: center;
        align-items: center;
    }
    .minis_recap .minis_recap-actions {
        display: none;
        width: 100%;
        gap: 10px;
    }
    .minis_recap .recap_view-btn {
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    .minis_recap .recap_clear-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
    }
    .minis_recap .recap_clear-btn i {
        font-size: 18px;
        line-height: 1;
    }

    .minis_recap.has-selection .recap_choose-btn {
        display: none !important;
    }
    .minis_recap.has-selection .minis_recap-actions {
        display: flex !important;
    }

    .minis_sidebar.is-open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .minis_sidebar .close_btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .minis_sidebar .close_btn i {
        font-size: 20px;
        line-height: 1;
    }
}

/* ─── OPTION CAGNOTTE ETAPE 3 ─── */
.wallet-option-box {
    margin-top: 15px;
    padding: 16px 20px;
    background-color: rgba(180, 140, 100, 0.08);
    border: 1px solid rgba(180, 140, 100, 0.25);
    border-radius: var(--radius-sm, 8px);
}
.wallet-option-box .checkbox-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.wallet-option-box .checkbox-custom input[type="checkbox"] {
    display: none;
}
.wallet-option-box .checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-dark, #2b2b2b);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wallet-option-box .checkbox-custom input[type="checkbox"]:checked + .checkbox-box {
    background-color: var(--color-dark, #2b2b2b);
    border-color: var(--color-dark, #2b2b2b);
    color: #fff;
}
.wallet-option-box .checkbox-text {
    font-size: 15px;
    color: var(--color-dark, #2b2b2b);
}
.wallet-breakdown-info {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    font-size: 14px;
}
.wallet-breakdown-info .breakdown-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.wallet-breakdown-info .breakdown-row:last-child {
    margin-bottom: 0;
}

/* Filtres catégories (Pâtisseries) : sur les écrans de portable, la dernière catégorie
   passait à la ligne. On resserre police et espacements entre tablette et grand écran. */
@media only screen and (min-width: 993px) and (max-width: 1700px) {
    .filters_wrap {
        gap: 30px;
    }
    .filters_item-wrap {
        gap: 25px;
    }
    .filters_item-wrap a {
        font-size: 13px;
    }
}

/* Heros (hero_dual) sur mobile : la règle mobile du diaporama de la fiche produit
   (shop.css, .slideshow en ratio 1/1.3 avec coins arrondis) s'appliquait aussi au
   diaporama du hero. La photo s'arrêtait à ~500px et laissait une barre noire en bas. */
.dual_right .slideshow,
.dual_right .slideshow img {
    border-radius: 0;
}
@media only screen and (max-width: 992px) {
    .dual_right .slideshow {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Footer : deuxième boutique (Leffrinckoucke) et place réservée au bouton « retour en haut »,
   qui chevauchait le copyright (ordinateur) et les liens du bas (mobile) sur toutes les pages. */
.footer_top-item.contact .footer_shop-name {
    font-weight: 600;
    margin: 0;
}
.footer_top-item.contact .small + .footer_shop-name {
    margin: 20px 0 0 0;
}
.footer_bottom {
    padding-right: 100px;
}
@media only screen and (max-width: 991px) {
    .footer_bottom {
        padding-right: 15px;
        padding-bottom: 80px;
    }
}

/* Hero vidéo de la Home : l'aperçu (posé en style inline) reste visible sous la vidéo pendant son chargement. */
.hero_video {
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
}

/* Home mobile : espacements des blocs sombres.
   - « Vivez la Maison » : le sous-titre passait en couleur sombre sur fond sombre (invisible),
     ce qui laissait un grand vide entre le titre et le texte.
   - « La Maison Thibault Cousin » : 90px entre le titre et le texte, ramenés à 30px. */
@media only screen and (max-width: 992px) {
    .video_title-desc h3 {
        color: var(--color-light);
    }
    .video_title {
        gap: 20px;
        margin: 0 0 40px 0;
    }
    .parallax-box {
        gap: 30px;
    }
}

/* Pâtisseries mobile : les 10 catégories prenaient 4 lignes avant le premier produit.
   Une seule ligne qui défile horizontalement, jusqu'au bord droit de l'écran. */
@media only screen and (max-width: 992px) {
    .product .filters_item {
        min-width: 0;
    }
    .product .filters_item-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -15px;
        padding-right: 15px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .product .filters_item-wrap::-webkit-scrollbar {
        display: none;
    }
    .product .filters_item-wrap a {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* La Maison : bandeau « Thibault Cousin » figé et coupé à droite (son animation GSAP est
   désactivée dans custom.js). Défilement continu en CSS : le texte est répété 3 fois,
   un décalage d'un tiers boucle sans à-coup. */
.title-moving-forward {
    padding: 0;
    overflow: visible;
    animation: title-moving 30s linear infinite;
}
@keyframes title-moving {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
    .title-moving-forward {
        animation: none;
    }
}

/* Panier latéral : quantité + « Supprimer » + prix dépassaient la largeur sur mobile,
   le prix collait au bord droit de l'écran. */
.sidebar_grid .product_item-desc {
    min-width: 0;
    box-sizing: border-box;
}
.sidebar_grid .product_item-cta {
    flex-wrap: wrap;
    gap: 10px;
}

/* Espace client : logo de la Maison, retour au site depuis l'en-tête mobile, et
   tableaux en cartes sur mobile (les colonnes étaient coupées, statut et total hors écran). */
.client_brand-logo {
    height: 52px;
    width: auto;
    display: block;
}
.client_mobile-header .client_brand-logo {
    height: 44px;
}
.client_mobile-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.client_mobile-back {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-primary-1);
    padding-bottom: 1px;
}
@media only screen and (max-width: 768px) {
    .client_table-wrap {
        overflow: visible;
    }
    .client_table {
        min-width: 0;
    }
    .client_table thead {
        display: none;
    }
    .client_table,
    .client_table tbody,
    .client_table tr,
    .client_table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .client_table tbody tr {
        position: relative;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line-dark);
    }
    .client_table tbody tr:last-child {
        border-bottom: 0;
    }
    .client_table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }
    .client_table td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: var(--client-ls-label);
        font-weight: 500;
        color: var(--color-grey);
        text-align: left;
    }
    .client_table td .sub {
        display: inline;
        margin: 0 0 0 6px;
    }
    /* Cellule sans intitulé (flèche vers le détail) : en haut à droite de la carte */
    .client_table td:not([data-label]):last-child:not([colspan]) {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
        padding: 0;
    }
    .client_table tbody tr:has(td:not([data-label]):last-child:not([colspan])) td:first-child {
        padding-right: 40px;
    }
    .client_table td[colspan] {
        display: block;
        text-align: center;
    }
}

/* Espace client mobile : boutons menu et fermeture sans la bordure grise par défaut du navigateur. */
.client_mobile-toggle,
.client_sidebar-close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}
.client_sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.client_sidebar-close i {
    font-size: 40px;
    line-height: 1;
}
@media only screen and (max-width: 992px) {
    .client_sidebar-close {
        display: flex;
    }
}