/* ==========================================================================
   Retouches Odyssée Bijoux
   Feuille chargée APRÈS le CSS compilé du thème (voir functions.php).
   Sert à ajuster le style sans recompiler le thème (en attendant le repo).
   ========================================================================== */

/* --- Écrin : case sur sa propre ligne, AU-DESSUS de "Ajouter au panier" --- */
.woocommerce-variation-add-to-cart,
.custom-product-add-to-cart-form {
    flex-wrap: wrap;
}

.odyssee-ecrin {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0.8rem;
}

.odyssee-ecrin__label {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.15em;   /* légèrement plus gros */
    cursor: pointer;
}

.odyssee-ecrin__offert {
    font-size: 1.15em;
    margin: 0;
}

.odyssee-ecrin__checkbox {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    accent-color: #0a0a0a;
}

/* --- Panier : mention "Écrin à bijoux" un peu plus grosse --- */
.cart-summary__item__meta {
    font-size: 1.1em;
}

/* --- Page "Notre histoire" : sections éditoriales (image + texte alternés) --- */
.story-sections {
    max-width: 120rem;
    margin: 0 auto;
    padding: 6rem var(--gutter) 9rem;
    display: flex;
    flex-direction: column;
    gap: 9rem;
}

.story-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem 6rem;
}

.story-section--reverse .story-section__media {
    order: 2;
}

.story-section__media--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: start;
}

.story-section__img {
    width: 100%;
    height: auto;
    display: block;
}

.story-section__title {
    font: 400 3.4rem/0.95 Erode, serif;
    letter-spacing: -0.03em;
    color: #3A343C;
    margin: 0 0 2.4rem;
}

.story-section__text {
    font: 400 1.6rem/1.65 Manrope, sans-serif;
    color: #3A343C;
}

.story-section__text p {
    margin: 0 0 1.4rem;
}

.story-section__text p:last-child {
    margin-bottom: 0;
}

.story-section__text strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .story-sections {
        gap: 5rem;
        padding: 4rem var(--gutter) 6rem;
    }
    .story-section {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
    .story-section--reverse .story-section__media {
        order: 0;
    }
    .story-section__title {
        font-size: 2.8rem;
        margin-bottom: 1.6rem;
    }
}

/* --- Barre réassurance : centrer les items (quel que soit leur nombre) --- */
.reinssurances__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.2rem 4rem;
}

.reinssurances__item {
    width: auto;
    flex: 0 1 16rem;
}

/* === TEXTE GLOBAL EN ENCRE PROFONDE #3A343C (charte) === */
/* Remplace la couleur de TEXTE noire (#0a0a0a / #000) du thème par l'Encre Profonde.
   N'affecte QUE le texte : les fonds et bordures en #0a0a0a restent inchangés.
   A reporter proprement dans la source SCSS (variable couleur) une fois le repo cloné. */
body { color: #3A343C; }

.woocommerce-checkout button.is-active[type=submit],.is-active.header__nav-menu-button,.is-active.button { color: #3A343C !important; }
.woocommerce-checkout button.is-just-arrow[type=submit],.is-just-arrow.header__nav-menu-button,.is-just-arrow.button { color: #3A343C !important; }
.woocommerce-checkout button.is-black[type=submit],.is-black.header__nav-menu-button,.is-black.button { color: #3A343C !important; }
.woocommerce-checkout button.is-beige[type=submit],.is-beige.header__nav-menu-button,.is-beige.button { color: #3A343C !important; }
.single-product__add-to-cart .variations_form table tbody td select:not(.variation-color-picker__select),.select2-container .select2-selection--single,select[name=billing_country],input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=number],input[type=search],.custom-made-form__input,.woocommerce-additional-fields__field-wrapper textarea,.custom-made-form__textarea { color: #3A343C !important; }
.woocommerce-additional-fields__field-wrapper textarea,.custom-made-form__textarea { color: #3A343C !important; }
body { color: #3A343C !important; }
.category-menu__name { color: #3A343C !important; }
.woocommerce-checkout-review-order-table tfoot tr.cart-discount .woocommerce-Price-amount,.woocommerce-checkout-review-order-table tfoot tr .woocommerce-Price-amount,.woocommerce-order-received__item-total,.cart-summary__item__price,.cart-summary__totals__row--total .woocommerce-Price-amount,.wooco_total .woocommerce-Price-amount,.single-product__price,.product-card__price { color: #3A343C !important; }
.socials__list { color: #3A343C !important; }
.socials__icon { color: #3A343C !important; }
.reinssurances__item-icon { color: #3A343C !important; }
#tarteaucitronRoot #tarteaucitronAlertBig>button { color: #3A343C !important; }
.single-product__add-to-cart .reset_variations { color: #3A343C !important; }
.single-product__add-to-cart .reset_variations:hover { color: #3A343C !important; }
.single-product__add-to-cart .reset_variations:active { color: #3A343C !important; }
.custom-made-form-section__intro { color: #3A343C !important; }
.custom-made-form__required { color: #3A343C !important; }
.custom-made-form__file-hint { color: #3A343C !important; }
.custom-made-form__file-name { color: #3A343C !important; }
.faq-list__icon { color: #3A343C !important; }
.faq-list__question-title { color: #3A343C !important; }
.prehome__counter { color: #3A343C !important; }
.header__container:hover { color: #3A343C !important; }
.is-visible .header__container { color: #3A343C !important; }
.header__container.is-secondary-open,.header__container.is-secondary-open-mobile { color: #3A343C !important; }
.single-product .header__container,.woocommerce-cart .header__container,.woocommerce-checkout .header__container,.page-template-page-custom-made .header__container,.page-template-page-faq .header__container,.page-template-page-custom-product .header__container,.page-template-page-legal .header__container { color: #3A343C !important; }
.is-visible .header__nav-menu-button,.is-secondary-open .header__nav-menu-button,.is-secondary-open-mobile .header__nav-menu-button,.single-product .header__nav-menu-button,.woocommerce-cart .header__nav-menu-button,.woocommerce-checkout .header__nav-menu-button,.page-template-page-custom-made .header__nav-menu-button,.page-template-page-faq .header__nav-menu-button,.page-template-page-custom-product .header__nav-menu-button,.page-template-page-legal .header__nav-menu-button { color: #3A343C !important; }
#header:hover .header__nav-menu-button { color: #3A343C !important; }
.header__secondary-container { color: #3A343C !important; }
.header__secondary-drops-title { color: #3A343C !important; }
.header__secondary-mobile-container { color: #3A343C !important; }
.header__secondary-mobile-drops-title { color: #3A343C !important; }
.header__secondary-mobile-categories-title-text { color: #3A343C !important; }
.header__secondary-mobile-menu-item { color: #3A343C !important; }
.banner { color: #3A343C !important; }
.banner__sep { color: #3A343C !important; }
.banner__text { color: #3A343C !important; }
.footer { color: #3A343C !important; }
.footer__copyright-madeby a { color: #3A343C !important; }
.footer__copyright-madeby:hover { color: #3A343C !important; }
.charm-button__action { color: #3A343C !important; }
.page-legal__title { color: #3A343C !important; }
.page-legal__prose { color: #3A343C !important; }
.error-404__code { color: #3A343C !important; }
.error-404__title { color: #3A343C !important; }
.error-404__text { color: #3A343C !important; }
ul.wc_payment_methods .checkout__payment-method-icon--card { color: #3A343C !important; }
ul.wc_payment_methods .checkout__payment-method-block-title { color: #3A343C !important; }
#single-product-notices { color: #3A343C !important; }
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronAllow,#tarteaucitronRoot #tarteaucitronServices .tarteaucitronDeny { color: #3A343C !important; }

/* === Police manuscrite Reenie Beanie (touches, ex : noms de bijoux) === */
@font-face {
    font-family: 'Reenie Beanie';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('static/fonts/ReenieBeanie-Regular.woff2') format('woff2');
}

/* === Section "Messages de nos clientes" (accueil, tout en bas) === */
.customer-messages {
    padding: 2rem var(--gutter) 8rem;
    overflow: hidden;
}
.customer-messages__head {
    text-align: center;
    max-width: 60rem;
    margin: 0 auto 4rem;
}
.customer-messages__title {
    font: 400 3.4rem/0.95 Erode, serif;
    letter-spacing: -0.03em;
    color: #3A343C;
    margin: 0 0 1.2rem;
    text-wrap: balance;
}
.customer-messages__subtitle {
    font: 400 1.5rem/1.5 Manrope, sans-serif;
    color: #6f6a63;
    margin: 0;
}
.customer-messages__track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.4rem 0.4rem 1rem;
    align-items: stretch;
    scrollbar-width: none;
}
.customer-messages__track::-webkit-scrollbar {
    display: none;
}
.review-card {
    flex: 0 0 32rem;
    max-width: 85vw;
    scroll-snap-align: start;
    background-color: #f5f2ee;
    background-image: url("static/imgs/reviews-paper.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #e7ddcd;
    border-radius: 1.2rem;
    padding: 3rem 2.8rem 2.6rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.5s ease;
}
.review-card:hover {
    transform: translateY(-0.6rem);
    border-color: #d8ccb8;
}
.review-card__mark {
    font: 400 5.4rem/0.4 Erode, serif;
    color: #b0851f;
    opacity: 0.5;
    height: 0.42em;
    margin-bottom: 0.8rem;
    user-select: none;
}
.review-card__text {
    font: 400 1.6rem/1.6 Manrope, sans-serif;
    color: #3A343C;
    margin: 0 0 2rem;
    flex: 1;
}
.review-card__meta {
    margin-top: auto;
    padding-top: 1.8rem;
    border-top: 1px solid #e7ddcd;
}
.review-card__name {
    font: 700 1.7rem/1.2 Manrope, sans-serif;
    color: #3A343C;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.review-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font: 500 1rem/1 Manrope, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f6a63;
}
.review-card__tag svg {
    width: 1.4rem;
    height: 1.4rem;
}
.review-card__product {
    font: 400 2.6rem/1 'Reenie Beanie', cursive;
    color: #6E4A5A;
    margin: 0.6rem 0 0;
}
.customer-messages__nav {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 3.2rem;
}
.customer-messages__arrow {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #3A343C;
    background: transparent;
    color: #3A343C;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.customer-messages__arrow:hover {
    background: #3A343C;
    color: #fff;
}

@media (max-width: 768px) {
    .customer-messages {
        padding: 1rem var(--gutter) 6rem;
    }
    .customer-messages__head {
        margin-bottom: 3rem;
    }
}

/* === Fiches produits : le menu fixe ne recouvre plus le haut de l'image === */
/* On décale le contenu de la fiche sous l'en-tête (hauteur header : 11.4rem mobile / 8.4rem desktop). */
/* Accueil et héros de pages NON touchés (volontairement en superposition). */
/* Exclusion : "Compose ton bijou" (produit 373) garde le menu par-dessus l'image, comme l'accueil/les héros. */
body.single-product:not(.postid-373) {
    padding-top: 11.4rem;
}
@media (min-width: 768px) {
    body.single-product:not(.postid-373) {
        padding-top: 8.4rem;
    }
}

/* === Composeur : barre fixe du bas — compacte (horizontale), sans texte tronqué === */
@media (max-width: 767px) {
    .custom-product-fixed-bar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem 1.4rem;
    }
    /* Prix total : compact, sur une ligne */
    .custom-product-fixed-bar .wooco_summary {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* Résumé "1 Support + X charms" : prend la place dispo, sur 2 lignes si besoin (plus tronqué) */
    .custom-product-fixed-bar__variations {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
        font-size: 1.2rem;
        /* léger décalage à droite (moins collé au prix), sans toucher les boutons */
        padding-left: 1.4rem;
        padding-right: 0.8rem;
    }
    /* Zone d'alerte vide masquée */
    .custom-product-fixed-bar .wooco_alert:empty {
        display: none;
    }
    /* Écrin + bouton : poussés tout à droite, bloc étroit -> plus d'espace au milieu */
    .custom-product-fixed-bar .custom-product-add-to-cart-form {
        flex: 0 0 auto;
        margin-left: auto;
        width: auto;
        max-width: 45%;
        align-items: flex-end;
    }
    .custom-product-add-to-cart-form .odyssee-ecrin__label {
        font-size: 1.1rem;
        line-height: 1.2;
    }
    /* Bouton "Ajouter au panier" moins large (padding réduit) */
    .custom-product-fixed-bar .custom-product-add-to-cart-form .single_add_to_cart_button,
    .custom-product-fixed-bar .custom-product-add-to-cart-form button[type="submit"] {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

/* === PERF : afficher le contenu tout de suite (ne plus attendre le JS) === */
/* #site-content démarrait en opacity:0, révélé seulement par une animation JS,
   ce qui retardait l'affichage de l'image d'accueil (LCP ~14s sur mobile lent).
   On l'affiche immédiatement -> le navigateur peint le hero dès que l'image arrive.
   Les transitions de page (Taxi, sur [data-taxi-view]) ne sont pas affectées. */
#site-content {
    opacity: 1 !important;
}