/*
Theme Name: Editions Saillard
Theme URI: https://editions-saillard.fr
Author: Développeur freelance
Description: Thème custom pour Editions Saillard, maison d'édition de livres jeunesse.
Version: 1.4.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Propriétaire
Text Domain: editions-saillard
*/

/* =============================================
   VARIABLES
   ============================================= */
:root {
    --color-bg:          #ffffff;
    --color-bg-alt:      #f4f0e8;
    --color-kaki:        #a0d4b2;
    --color-kaki-dark:   #6db889;
    --color-kaki-light:  #c5e8d2;
    --color-pastel-rose: #e8d5c4;
    --color-rose-bandeau: #fbd5e2;
    --color-pastel-bleu: #d8eaf7;
    --color-pastel-vert: #d5e8c4;
    --color-text:        #3a3228;
    --color-text-light:  #6b5d50;
    --color-border:      #d9cfc0;
    --color-white:       #ffffff;

    --font-serif:   'Libre Baskerville', Georgia, serif;
    --font-cursive: 'Alice', serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-ui:      'DM Sans', system-ui, sans-serif;

    --radius:       8px;
    --radius-lg:    16px;
    --shadow:       0 2px 16px rgba(58,50,40,0.10);
    --shadow-hover: 0 8px 32px rgba(58,50,40,0.18);
    --shadow-card:  0 1px 4px rgba(58,50,40,0.06), 0 8px 24px rgba(58,50,40,0.10);

    --container:  1160px;
    --transition: 0.25s ease;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: clip; /* coupe l'overflow sans créer de scroll container — ne casse pas position:fixed sur iOS */
}

body {
    font-family: var(--font-body);
    background-color: #ffffff;
    color: var(--color-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* fallback navigateurs anciens qui ne supportent pas clip */
}


img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--color-kaki-dark);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-kaki); }

ul, ol { list-style: none; }

/* =============================================
   TYPOGRAPHIE
   ============================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-cursive);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.3rem; }

p { margin-bottom: 1.2rem; }

/* =============================================
   LAYOUT
   ============================================= */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

.site-main { flex: 1; padding-block: 3rem; }

/* =============================================
   HEADER
   ============================================= */
.site-header {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    padding-block: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background-color 0.35s ease, border-color 0.35s ease;
}



.site-header .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.25rem 0.6rem;
    max-width: 100%;
    padding-inline: 1.5rem;
}

.site-logo {
    display: inline-block;
    line-height: 0;
    margin-top: 0;
    position: relative;
    transition: margin-top 0.6s ease-in-out;
}

.site-logo__img {
    display: block;
    height: 145px;
    width: auto;
    transition: height 0.6s ease-in-out;
}

.site-logo__name {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 1.25rem;
    color: var(--color-bg-alt);
    text-align: center;
    line-height: 1;
    margin-top: -26px;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.site-header.scrolled {
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    height: 72px;
}
.site-header.scrolled .container {
    height: 100%;
    padding-block: 0;
    margin-top: 0.25rem;
    padding-bottom: 0.25rem;
    align-items: center;
}

.site-header.scrolled .site-logo { margin-top: 0; margin-bottom: 0; }
.site-header.scrolled .site-logo__img { height: 65px; }
.site-header.scrolled .site-logo__name { opacity: 0; }
.site-header.scrolled .main-navigation { padding-top: 0; }
.site-header.scrolled .main-navigation a { color: var(--color-text); }

.main-navigation { padding-top: 0.75rem; transition: padding-top 0.6s ease-in-out; }

/* =============================================
   NAVIGATION
   ============================================= */
.main-navigation { display: flex; align-items: center; gap: 0.25rem; }

.main-navigation ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    padding: 0.5rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background-color: rgba(255,255,255,0.15);
    color: var(--color-kaki-dark);
}



.nav-cart-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition);
    line-height: 1;
}

.nav-cart-icon:hover {
    background-color: rgba(255,255,255,0.15);
    color: var(--color-kaki-dark);
}

.site-header.scrolled .nav-cart-icon { color: var(--color-text); }

.cart-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-cart-icon .cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--color-rose-bandeau);
    color: #b5466a;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-cart-icon .cart-count[hidden] { display: none; }

/* =============================================
   BURGER MENU
   ============================================= */
.nav-burger {
    display: none;
    position: relative;
    z-index: 100;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-white);
    flex-shrink: 0;
}

/* Burger foncé sur les headers opaques */
.site-header.scrolled .nav-burger,
.woocommerce-page .site-header .nav-burger,
.woocommerce-checkout .site-header .nav-burger,
.single-livre .site-header .nav-burger,
.page-cgv .site-header .nav-burger,
.page-mentions-legales .site-header .nav-burger,
.page-politique-de-remboursement .site-header .nav-burger { color: var(--color-text); }

.nav-burger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================
   DRAWER PANIER
   ============================================= */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(58, 50, 40, 0.45);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
body.cart-is-open .cart-overlay {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: var(--color-white);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(58, 50, 40, 0.12);
}
body.cart-is-open .cart-drawer { transform: translateX(0); }

/* Barre admin WordPress : décaler le drawer vers le bas */
.admin-bar .cart-drawer { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .cart-drawer { top: 46px; }
}

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.cart-drawer__title {
    font-family: var(--font-cursive);
    font-size: 1.1rem;
    margin: 0;
}
.cart-drawer__close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 0.25rem;
    line-height: 1;
}
.cart-drawer__close:hover { color: var(--color-text); }

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-light);
    margin: auto 0;
}

.cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-drawer__item {
    display: flex;
    gap: 0.875rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.cart-drawer__item:last-child { border-bottom: none; }
.cart-drawer__item-img img {
    width: 64px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.cart-drawer__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cart-drawer__item-name {
    font-family: var(--font-cursive);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.3;
}
.cart-drawer__item-price {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-kaki-dark);
    margin: 0;
}
.cart-drawer__item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.4rem;
}
.cart-drawer__item-meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-style: italic;
    margin: 0 0 0.15rem;
    line-height: 1.3;
}
.cart-drawer__item-tome { font-style: normal; font-weight: 600; color: var(--color-kaki-dark); }

.cart-drawer__qty-stepper {
    display: flex;
    align-items: center;
}
.cart-drawer__qty-btn {
    background: none;
    border: 1px solid var(--color-border);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    padding: 0;
}
.cart-drawer__qty-btn:hover { background: var(--color-bg-alt); }
.cart-drawer__qty-minus { border-radius: 0.25rem 0 0 0.25rem; }
.cart-drawer__qty-plus  { border-radius: 0 0.25rem 0.25rem 0; }
.cart-drawer__qty-input {
    border: 1px solid var(--color-border);
    border-left: none;
    border-right: none;
    width: 2.5rem;
    height: 1.75rem;
    text-align: center;
    font-size: 0.85rem;
    -moz-appearance: textfield;
    appearance: textfield;
}
.cart-drawer__qty-input::-webkit-outer-spin-button,
.cart-drawer__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.cart-drawer__remove {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.cart-drawer__remove:hover { color: #b32d2e; }

.cart-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1.25rem;
    font-size: 1rem;
}
.cart-drawer__total strong {
    font-size: 1.1rem;
    color: var(--color-kaki-dark);
}
.cart-drawer__total-prices {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.cart-drawer__total-original {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-decoration: line-through;
    font-weight: 400;
}
.cart-drawer__total-discounted {
    font-size: 1.1rem;
    color: var(--color-kaki-dark);
}

.cart-drawer__cta {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 0.75rem;
    background: var(--color-rose-bandeau) !important;
    color: #b5466a !important;
}
.cart-drawer__cta:hover { background: #e8a8bf !important; color: #b5466a !important; }

.js-atc.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* =============================================
   PROMO -5%
   ============================================= */
.promo-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    color: var(--color-kaki-dark);
    border: 1.5px solid var(--color-kaki);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    margin: 0.75rem 0 1.25rem;
}
.promo-banner--inline {
    display: inline-flex;
    width: fit-content;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
}

.cart-drawer__promo-nudge {
    font-size: 0.82rem;
    color: var(--color-text-light);
    background: var(--color-bg-alt);
    border-radius: 0.5rem;
    padding: 0.6rem 0.875rem;
    margin: 0.75rem 0 0;
    text-align: center;
}
.cart-drawer__promo-applied {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-kaki-dark);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background-color: #ffffff;
    padding-block: 1.1rem 0.75rem;
    margin-top: 0;
    color: rgba(0,0,0,0.75);
    border-top: 1px solid rgba(0,0,0,0.1);
}
.site-footer .container {
    max-width: 100%;
    padding-inline: 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.footer-col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: -0.35rem; }
.footer-logo-link { display: block; line-height: 0; }
.footer-logo { display: block; height: 118px; width: auto; filter: brightness(0); opacity: 0.85; }
.footer-bretagne { font-size: 0.58rem; color: rgba(0,0,0,0.55); margin: 0; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 0.35em; }
.footer-bretagne__flag { height: 0.9em; width: auto; flex-shrink: 0; }
.footer-tagline { font-size: 0.85rem; line-height: 1.6; color: rgba(0,0,0,0.5); margin: 0; max-width: 260px; }

.footer-col--tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-3rem);
}
.footer-phrase {
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(0,0,0,0.65);
    white-space: nowrap;
    margin: 0;
}

.footer-col--right {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-self: end;
}

.footer-social-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transform: translateX(-1.5rem);
}
.footer-social-invite {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.6);
    margin: 0;
}
.footer-social {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
}
.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.7);
    transition: background var(--transition), color var(--transition);
}
.footer-social__link:hover { background: var(--color-kaki); color: #fff; }

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer-nav a {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.65);
    transition: color var(--transition);
}
.footer-nav a:hover { color: rgba(0,0,0,0.9); }

.footer-legal__links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}
.footer-legal__links a { color: rgba(0,0,0,0.55); }
.footer-legal__links a:hover { color: rgba(0,0,0,0.8); }

.footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(0,0,0,0.55);
}

/* =============================================
   BOUTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-decoration: none;
}

.btn-primary { background-color: var(--color-kaki); color: var(--color-white); }
.btn-primary:hover {
    background-color: var(--color-kaki-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-hover);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--color-kaki);
    color: var(--color-kaki-dark);
}
.btn-outline:hover { background-color: var(--color-kaki); color: var(--color-white); }

/* =============================================
   TAG LABEL
   ============================================= */
.tag-label {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6eb48e;
    border: 1px solid var(--color-kaki-light);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    white-space: nowrap;
}

/* =============================================
   SECTIONS COMMUNES
   ============================================= */
.section { padding-block: 5rem; }

.section--catalogue {
    /* Blanc pour l'en-tête, beige dès l'accordéon */
    background: linear-gradient(to bottom, #ffffff calc(100% - 260px), var(--color-bg-alt) calc(100% - 260px));
    padding-block-start: 3rem;
    padding-block-end: 0;
}
.section--catalogue .section__header { margin-bottom: 0.5rem; }
.section__header--with-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.section__cta-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.section--actus { background: var(--color-bg); padding-block-start: 4rem; }
.section--actus .section__header {
    text-align: center;
    margin-bottom: 2rem;
}
.books-accordion { position: relative; background: linear-gradient(to right, #f2d5d8 0%, #f5e2cc 20%, #f5f0cc 40%, #d5efd5 60%, #cce5f5 80%, #ddd5f5 100%); }

.section__header { text-align: center; margin-bottom: 3rem; }
.section__header--left { text-align: left; }
.section__header h2 { margin-top: 0.4rem; margin-bottom: 0; }
.section__footer { text-align: center; margin-top: 2.5rem; }
.actus-feed { margin-bottom: 3rem; }
/* Actualités — 3 cartes Facebook */
.actus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.actu-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}
.actu-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.actu-card__media {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    flex-shrink: 0;
}
.actu-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(1.1);
    transition: transform 0.4s ease, filter 0.4s ease;
}
.actu-card:hover .actu-card__media img { transform: scale(1.05); }
.actu-card__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.actu-card__text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text);
    flex: 1;
    margin: 0;
}
.actu-card__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: auto;
}
.actu-card__link:hover { color: var(--color-kaki-dark); }
.actu-card__date { font-style: normal; }
.section__footer--social { display: flex; flex-direction: column; align-items: center; gap: 1rem; clear: both; width: 100%; margin-top: 4rem; }
.social-cta__text { font-size: 0.9rem; color: rgba(0,0,0,0.6); margin: 0; }
.social-cta__links { display: flex; gap: 0.75rem; }
.social-cta__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    color: rgba(0,0,0,0.7);
    transition: background var(--transition), color var(--transition);
}
.social-cta__link:hover { background: var(--color-kaki); color: #fff; border-color: transparent; }

/* =============================================
   HERO + BANDEAU NOUVEAUTÉS
   ============================================= */
.hero { padding-block-start: 0; position: relative; }

.hero__bandeau {
    background-color: var(--color-kaki);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-block: 1rem 1.75rem;
    position: relative;
    overflow: hidden;
}

.hero__bandeau-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    mix-blend-mode: screen;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    filter: sepia(1) saturate(2) hue-rotate(85deg) brightness(8);
}

.hero__bandeau > .container {
    position: relative;
}

.hero__bandeau-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hero__bandeau-title {
    font-family: var(--font-cursive);
    font-size: 1.6rem;
    color: var(--color-white);
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: -4px;
}

.hero__bandeau-title-picto {
    flex-shrink: 0;
    display: block;
    width: 48px;
    height: 48px;
    object-fit: none;
    object-position: center;
    mix-blend-mode: screen;
    transform: scale(0.75) translateY(2px);
    transform-origin: center;
}

.hero__bandeau-books {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.hero__bandeau-book {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.hero__bandeau-book:hover { transform: translateY(-7px); }

.hero__bandeau-book-cover {
    position: relative;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: box-shadow 0.3s ease;
}
.hero__bandeau-book:hover .hero__bandeau-book-cover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}


.hero__bandeau-book-cover img,
.hero__bandeau-book-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.hero__bandeau-book:hover .hero__bandeau-book-cover img { transform: scale(1.06); }

.hero__bandeau-book-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.4rem;
}
.hero__bandeau-book-title    { grid-column: 1 / -1; grid-row: 1; }
.hero__bandeau-book-subtitle { grid-column: 1 / -1; grid-row: 2; }
.hero__bandeau-book-tome {
    font-size: inherit;
    font-family: inherit;
    color: #2d6645;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
.hero__bandeau-book-tome::before { content: '\00a0—\00a0'; }
.hero__bandeau-book-title {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.98rem;
    color: #2d6645;
    margin: 0;
    font-family: var(--font-cursive);
    line-height: 1.2;
    overflow: hidden;
    transition: color 0.3s ease;
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
.hero__bandeau-book-title-text {
    flex: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hero__bandeau-book:hover .hero__bandeau-book-title { color: #1d4a30; }
.hero__bandeau-book-subtitle {
    font-size: 0.72rem;
    font-family: var(--font-body);
    color: #2d6645;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.85;
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}

.hero__bandeau-book-age--on-cover {
    position: absolute;
    bottom: 6px;
    right: 6px;
}
.hero__bandeau-book-age--in-info { display: none; }
.hero__bandeau-book-age {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    font-weight: 700;
    text-shadow: none;
}

.hero__bandeau-book-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 0.65rem;
    color: var(--color-white);
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 0.3em 0.8em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-align: center;
}

.hero__bandeau-book--upcoming .hero__bandeau-book-cover img {
    filter: grayscale(25%);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.hero__bandeau-book--upcoming:hover .hero__bandeau-book-cover img {
    filter: grayscale(0%);
}

.hero__bandeau-cta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.80);
    font-family: var(--font-body);
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.hero__bandeau-cta:hover { color: var(--color-white); border-color: var(--color-white); }

.hero__main {
    min-height: 80vh;
    padding-block: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}


.hero__main .container {
    margin-left: 7rem;
}

.hero__content {
    position: relative;
    z-index: 1;
    padding-top: 8rem;
    padding-bottom: 3rem;
    max-width: 580px;
    text-align: left;
}

.break-mobile { display: none; }

.hero__content h1 { color: #ffffff; margin-top: 0.5rem; margin-bottom: 1.25rem; }
.hero__content p   { font-family: var(--font-ui); font-style: italic; color: rgba(255,255,255,0.85); font-size: 1.25rem; font-weight: 500; max-width: 520px; margin-bottom: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.hero__content .btn-primary { background-color: transparent; color: #fbd5e2; border: 1.5px solid #fbd5e2; box-shadow: 0 2px 8px rgba(0,0,0,0.4); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero__content .btn-primary:hover { background-color: rgba(251,213,226,0.2); color: #fbd5e2; border-color: #fbd5e2; box-shadow: 0 4px 12px rgba(0,0,0,0.45); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }.hero__content .tag-label {
    color: var(--color-kaki);
    border-color: var(--color-kaki-light);
}

/* =============================================
   CARTES LIVRES
   ============================================= */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
}

.book-card {
    position: relative;
    aspect-ratio: 5/9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
}
.book-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.book-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    text-decoration: none;
    color: inherit;
}

.book-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #efefef;
}
.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.book-card:hover .book-card__cover img { transform: scale(1.04); }

.book-card__cover-placeholder { width: 100%; height: 100%; }

.book-card__badge {
    position: absolute;
    top: calc(50% - 4.75rem);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 0.65rem;
    color: var(--color-white);
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 0.3em 0.8em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}
@media (min-width: 769px) {
    .book-card__badge br { display: none; }
    .hero__bandeau-cta { font-size: 1rem; }
}
.book-card__badge--sold-out {
    background: rgba(160,40,40,0.75);
    border-color: rgba(255,200,200,0.35);
}
.book-card__badge--low-stock {
    background: rgba(160,100,20,0.72);
    border-color: rgba(255,220,150,0.35);
}

.book-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 5rem;
    padding: 0.3rem 0.75rem 1.6rem;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(4px);
}

.book-card__title { font-family: var(--font-cursive); font-size: 0.82rem; margin-bottom: 0; line-height: 1.2; }

.book-card__tome { font-size: 0.68rem; color: var(--color-text-light); margin-bottom: 0; font-style: italic; }

.book-card__author { font-size: 0.68rem; color: var(--color-text-light); margin-bottom: 0; }

.book-card__age {
    display: inline-block;
    background: var(--color-pastel-vert);
    color: var(--color-kaki-dark);
    font-size: 0.62rem;
    padding: 0.08rem 0.35rem;
    border-radius: 20px;
    margin-bottom: 0.15rem;
}

.book-card__price { font-size: 0.85rem; font-weight: 700; color: var(--color-kaki-dark); margin-top: 0.15rem; }

.book-card__order {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: var(--color-rose-bandeau);
    color: #b5466a;
    border: none;
    border-radius: 20px;
    padding: 0.3rem 1rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.book-card__order:hover { background-color: #e8a8bf; }
.book-card__order.is-loading { opacity: 0.6; cursor: wait; }

/* =============================================
   ACCORDION LIBRAIRIE — TRANCHES DE LIVRES
   ============================================= */
.books-accordion {
    display: flex;
    align-items: stretch;
    justify-content: safe center;
    height: 520px;
    clip-path: url(#wave-books);
    margin-top: 2.5rem;
    /* Dépasse du container vers les bords de la page */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.books-accordion::-webkit-scrollbar { height: 3px; }
.books-accordion::-webkit-scrollbar-track { background: transparent; }
.books-accordion::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.book-spine {
    position: relative;
    flex: 1 0 var(--spine-w, 17vw);
    min-width: var(--spine-w, 17vw);
    overflow: hidden;
    cursor: pointer;
    background: var(--spine-img, none) center / auto 153% no-repeat, var(--spine-bg, #d5e8c4);
    transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}



.books-accordion.is-scrolling .book-spine {
    pointer-events: none;
}

.book-spine:hover,
.book-spine:focus-within,
.book-spine.is-active {
    flex-basis: var(--spine-w-hover, 36vw);
    z-index: 10;
}

/* Lien couvrant toute la surface */
.book-spine__inner {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
    z-index: 1;
}

.book-spine__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 38%, transparent 55%);
    color: var(--spine-bg, #d5e8c4);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    padding: 0 12px 70px;
    pointer-events: none;
    transition: opacity 0.15s ease;
    overflow: hidden;
}

.book-spine__label-title {
    font-family: var(--font-cursive);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.book-spine__label-sub {
    font-size: 0.7rem;
    text-align: center;
    margin-top: 0.25rem;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-spine:hover .book-spine__label,
.book-spine:focus-within .book-spine__label,
.book-spine.is-active .book-spine__label {
    opacity: 0;
}

/* Contenu révélé — état étendu */
.book-spine__reveal {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
}

/* 1. Couverture */
.book-spine__cover {
    position: relative;
    width: 45%;
    min-width: 130px;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.35s ease 0.18s, transform 0.4s ease 0.18s;
}

.book-spine__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

article.book-spine[data-tome="Tome 4"] {
    background: var(--spine-img, none) center 70% / auto 153% no-repeat, var(--spine-bg, #d5e8c4);
}

article.book-spine[data-tome="Tome 4"] .book-spine__cover img {
    object-position: center 70%;
}

.book-spine__cover-placeholder {
    width: 100%;
    height: 100%;
}

.book-spine__cover-placeholder {
    background-color: rgba(0, 0, 0, 0.12);
}

.book-spine__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 0.65rem;
    color: var(--color-white);
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 0.3em 0.8em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-align: center;
}

/* Badge toujours visible sur la tranche (état replié) */
.book-spine__badge-spine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    font-size: 0.6rem;
    color: var(--color-white);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 0.3em 0.7em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Disparaît quand la tranche s'ouvre (le badge du reveal prend le relais) */
.book-spine:hover .book-spine__badge-spine,
.book-spine:focus-within .book-spine__badge-spine,
.book-spine.is-active .book-spine__badge-spine {
    opacity: 0;
}

.book-spine:hover .book-spine__cover,
.book-spine:focus-within .book-spine__cover,
.book-spine.is-active .book-spine__cover {
    opacity: 1;
    transform: scale(1);
}

/* 2. Infos texte */
.book-spine__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem 1rem 1.2rem 1rem;
    min-width: 0;
    background: var(--spine-bg, #d5e8c4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
}

.book-spine:hover .book-spine__info,
.book-spine:focus-within .book-spine__info,
.book-spine.is-active .book-spine__info {
    opacity: 1;
    transform: translateY(0);
}

.book-spine__title {
    font-family: var(--font-cursive);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 0.3rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-spine__meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.book-spine__tome {
    font-weight: 600;
    color: var(--color-kaki-dark);
}

.book-spine__author {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-bottom: 0.9rem;
}

.book-spine__age {
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    margin-bottom: 0.75rem;
    width: fit-content;
}

.book-spine__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-kaki-dark);
    margin-bottom: 1.25rem;
}

.book-spine__cta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-kaki-dark);
    letter-spacing: 0.04em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    width: fit-content;
    transition: letter-spacing 0.2s;
}

.book-spine:hover .book-spine__cta {
    letter-spacing: 0.08em;
}

.book-spine__age-always {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateY(50%);
    transform-origin: center center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--spine-bg, #d5e8c4) 95%, transparent);
    color: var(--spine-text, var(--color-text));
    padding: 0.3rem 0.4rem;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.book-spine:hover .book-spine__age-always,
.book-spine:focus-within .book-spine__age-always,
.book-spine.is-active .book-spine__age-always {
    opacity: 0;
}


/* =============================================
   AVIS CLIENTS
   ============================================= */
.section--avis { background: var(--color-bg-alt); padding-block-start: 0.5rem; padding-block-end: 3rem; }
.section--avis .section__header {
    text-align: left;
    margin-bottom: 2rem;
}

.avis-slider {
    position: relative;
}

.avis-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.avis-grid::-webkit-scrollbar { display: none; }
.avis-grid.avis-no-transition { scroll-behavior: auto !important; scroll-snap-type: none !important; }

.avis-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 3.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition);
    touch-action: manipulation;
}
.avis-arrow:hover:not(:disabled) { opacity: 0.6; }
.avis-arrow:disabled { opacity: 0.2; cursor: default; }
.avis-arrow--prev { left:  -6rem; }
.avis-arrow--next { right: -6rem; }

.avis-card {
    position: relative;
    z-index: 0;
    flex: 0 0 calc(33.333% - 1.34rem);
    min-width: 260px;
    scroll-snap-align: start;
    padding: 2rem;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.avis-card::before {
    content: '\201D';
    position: absolute;
    top: -1rem;
    right: 0.5rem;
    font-size: 12rem;
    line-height: 1;
    color: #e8e2d4;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    z-index: -1;
    pointer-events: none;
}

.avis-card__stars {
    color: #e8b84b;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.avis-card__text { flex: 1; }
.avis-card__text p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--color-text);
    font-style: italic;
    margin-bottom: 0;
}

.avis-card__author {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.avis-card__name {
    font-family: var(--font-cursive);
    font-size: 0.95rem;
    color: var(--color-text);
}

.avis-card__livre {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* =============================================
   BANNIÈRE CTA
   ============================================= */
.cta-banner {
    background: linear-gradient(to left, var(--color-rose-bandeau) 0%, var(--color-rose-bandeau) 40%, #efbdd0 100%);
    color: var(--color-white);
    padding-block: 5rem;
}

.cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-banner__content { min-width: 0; }

.cta-banner__content h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.cta-banner__content p { color: rgba(255,255,255,0.75); margin-bottom: 0; }

.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 1rem; flex-shrink: 0; }

.cta-banner .btn-primary { background: #b5466a; color: var(--color-white); }
.cta-banner .btn-primary:hover { background: #943856; box-shadow: none; }

.cta-banner .btn-outline { border-color: var(--color-text); color: var(--color-text); background: transparent; }
.cta-banner .btn-outline:hover { background: rgba(0,0,0,0.06); color: var(--color-text); }

.section--catalogue .btn-outline,
.avis-cta .btn-outline {
    border-color: #b96e90;
    color: #b96e90;
}
.section--catalogue .btn-outline:hover,
.avis-cta .btn-outline:hover {
    background-color: var(--color-rose-bandeau);
    border-color: #c97a9a;
    color: var(--color-text);
}

/* =============================================
   WOOCOMMERCE — BASE
   ============================================= */
.woocommerce button.button,
.woocommerce a.button {
    background-color: var(--color-kaki) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius) !important;
    transition: background-color var(--transition) !important;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background-color: var(--color-kaki-dark) !important;
}

/* =============================================
   WOOCOMMERCE — CHECKOUT
   ============================================= */

/* Header opaque sur les pages WooCommerce */
.woocommerce-page .site-header,
.woocommerce-checkout .site-header {
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    height: 95px;
}
.woocommerce-page .site-header .container {
    height: 100%;
    padding-block: 0;
    margin-top: 1.75rem;
    padding-bottom: 1.5rem;
    align-items: center;
}
.woocommerce-page .site-header .site-logo { margin-top: 0.5rem; margin-bottom: 0; }
.woocommerce-page .site-header .site-logo__img { height: 65px; }
.woocommerce-page .site-header .site-logo__name { opacity: 0; }
.woocommerce-page .site-header .main-navigation { padding-top: 0; }
.woocommerce-page .site-header .main-navigation a { color: var(--color-text); }
.woocommerce-page .site-header .nav-cart-icon { color: var(--color-text); }

/* Padding haut pour compenser le header fixe */
.woocommerce-page .site-main { padding-top: 120px; }

/* Header checkout = même que pages légales (72px, compact) */
.woocommerce-checkout .site-header { height: 72px; }
.woocommerce-checkout .site-header .container {
    margin-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.woocommerce-checkout .site-main { padding-top: 95px; }

/* Titre de page */
.woocommerce-page h1.entry-title,
.woocommerce-page h1.page-title {
    font-family: var(--font-cursive);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin-bottom: 2rem;
    color: var(--color-text);
}

/* Layout deux colonnes du checkout — Blocks WooCommerce */
.wp-block-woocommerce-checkout-fields-block { width: 58% !important; padding-right: 3% !important; }
.wp-block-woocommerce-checkout-totals-block { width: 42% !important; padding-left: 2% !important; }

/* Layout deux colonnes du checkout */
form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 620px;
    grid-template-rows: auto auto;
    gap: 2rem 3rem;
    align-items: start;
}

form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1;
}

form.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    padding-top: 0.25rem;
}

form.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-top: 2.8rem; /* aligne avec la colonne gauche */
}

/* Titres de sections */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    font-family: var(--font-cursive);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Champs du formulaire */
.woocommerce-checkout .form-row {
    margin-bottom: 1.1rem;
}

.woocommerce-checkout label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.4rem;
}

.woocommerce-checkout label .required {
    color: var(--color-kaki-dark);
    text-decoration: none;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none;
    border-color: var(--color-kaki);
    box-shadow: 0 0 0 3px rgba(160, 212, 178, 0.2);
}

/* Select : flèche custom */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text);
    line-height: normal;
    padding: 0;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.75rem;
}
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-kaki);
    box-shadow: 0 0 0 3px rgba(160, 212, 178, 0.2);
    outline: none;
}
.select2-dropdown {
    border: 1.5px solid var(--color-kaki);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
}
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-kaki) !important;
}

/* Checkbox "utiliser la même adresse" — alignement vertical (classique) */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.woocommerce-checkout .woocommerce-form__input-checkbox {
    flex-shrink: 0;
    margin: 0;
}
/* Checkbox block checkout — restaure le layout WC Blocks écrasé par notre .woocommerce-checkout label */
.wc-block-components-checkbox label {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
    top: 50% !important;
    margin-top: -2px !important;
    transform: translateY(-50%) !important;
}

/* Deux champs côte à côte */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: calc(50% - 0.5rem);
    display: inline-block;
    vertical-align: top;
}
.woocommerce-checkout .form-row-first { margin-right: 1rem; }

/* Image dans le tableau récap checkout */
.checkout-review__img {
    display: block;
    width: 52px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.checkout-review__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Métadonnée (tome/sous-titre) — positionnement et style */

/* Checkout classique : la td.product-name est un flex column.
   On pousse la quantité après la métadonnée avec flex order. */
.woocommerce-checkout-review-order-table .product-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.woocommerce-checkout-review-order-table .product-quantity {
    order: 3;
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 400;
}
.woocommerce-checkout-review-order-table .wc-item-meta {
    order: 2;
    margin: 0.1rem 0 0.4rem;
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-style: italic;
    line-height: 1.3;
}
.woocommerce-checkout-review-order-table .wc-item-meta dt { display: none; }
.woocommerce-checkout-review-order-table .wc-item-meta dd { margin: 0; }
.woocommerce-checkout-review-order-table .wc-item-meta dd p { margin: 0; }

/* Checkout bloc Gutenberg — vrais noms de classes */

/* Masquer la clé "es-meta :" et le séparateur ": " */
.wc-block-components-product-details__name {
    display: none !important;
}

/* Styler la valeur (tome — sous-titre) comme le drawer */
.wc-block-components-product-details__value {
    display: block !important;
    font-size: 0.78rem !important;
    color: var(--color-text-light) !important;
    font-style: italic !important;
    line-height: 1.3 !important;
}

/* Position : métadonnée en dernier dans la description (sous tout le reste) */
.wc-block-components-order-summary-item__description {
    display: flex !important;
    flex-direction: column !important;
}
.wc-block-components-product-metadata {
    order: 99 !important;
    gap: 0 !important;
    margin: 0.1rem 0 0.3rem !important;
}


/* Tableau récapitulatif commande */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.woocommerce-checkout-review-order-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    background: var(--color-bg-alt);
}

.woocommerce-checkout-review-order-table tbody tr:last-child td { border-bottom: none; }

.woocommerce-checkout-review-order-table .product-name { color: var(--color-text); font-weight: 500; display: flex; flex-direction: column; align-items: flex-start; }
.woocommerce-checkout-review-order-table .product-total { text-align: right; font-weight: 600; color: var(--color-kaki-dark); }

/* Prix en double dans la colonne nom — masqué car déjà visible à droite et dans sous-total */
.woocommerce-checkout-review-order-table td.product-name .woocommerce-Price-amount { display: none; }
.wc-block-components-order-summary-item__individual-prices { display: none !important; }

.woocommerce-checkout-review-order-table tfoot tr { background: var(--color-white); }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 600; color: var(--color-text); }
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-kaki-dark);
    border-top: 2px solid var(--color-border);
}

/* Section paiement */
#payment {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1.25rem;
}

#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.25rem;
}

#payment ul.payment_methods li {
    padding: 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#payment ul.payment_methods li label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

#payment .payment_box {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-top: 0.4rem;
}

/* Bouton passer commande */
#place_order {
    display: block;
    width: 100%;
    padding: 0.9rem 1.6rem;
    background-color: var(--color-rose-bandeau);
    color: #b5466a;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition), box-shadow var(--transition);
    margin-top: 1rem;
}
#place_order:hover {
    background-color: #e8a8bf;
    box-shadow: var(--shadow-hover);
}

.wc-block-components-checkout-place-order-button {
    background-color: var(--color-kaki-dark) !important;
    color: var(--color-white) !important;
}
.wc-block-components-checkout-place-order-button:hover {
    background-color: #58a073 !important;
    box-shadow: var(--shadow-hover);
}

/* Notices / messages */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    border-radius: var(--radius);
    font-size: 0.9rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-left: 4px solid;
}
.woocommerce-notices-wrapper .woocommerce-message { background: var(--color-pastel-vert); border-color: var(--color-kaki-dark); color: var(--color-text); }
.woocommerce-notices-wrapper .woocommerce-info    { background: var(--color-pastel-bleu); border-color: #7aa8c9; color: var(--color-text); }
.woocommerce-notices-wrapper .woocommerce-error   { background: #fdecea; border-color: #c0392b; color: #8a1f1f; }

/* Validation inline */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
    border-color: #c0392b;
}
.woocommerce-checkout .woocommerce-invalid-required-field label::after {
    content: ' — champ requis';
    font-size: 0.75rem;
    color: #c0392b;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Responsive checkout */
@media (max-width: 900px) {
    form.woocommerce-checkout {
        grid-template-columns: 1fr;
    }
    form.woocommerce-checkout #order_review_heading,
    form.woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: auto;
        padding-top: 0;
    }
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        display: block;
    }
    .woocommerce-checkout .form-row-first { margin-right: 0; }
}

/* =============================================
   PAGE À PROPOS
   ============================================= */
.about-hero { background: url('assets/images/hero-apropos.png') center/cover no-repeat; padding-block: 5rem 2rem; text-align: left; }
.about-hero__inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 700px; margin-inline: 14rem auto; }
.about-hero__inner h1 { margin-top: 0.75rem; margin-bottom: 1rem; color: var(--color-white); }
.about-hero__lead { color: rgba(255,255,255,0.85); max-width: 500px; font-size: 1.2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

.about-pillars { background: var(--color-kaki); padding-block: 1.5rem; position: relative; overflow: hidden; }
.about-pillars__inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; position: relative; overflow: visible; }
.about-pillar { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text); letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.5rem; }
.about-pillar__icon { flex-shrink: 0; }
.about-pillar__sep { flex-shrink: 0; font-size: 0.6rem; color: rgba(255,255,255,0.75); line-height: 1; }
.about-pillar__wave { flex-shrink: 0; display: block; width: 200px; height: 1.8rem; object-fit: none; object-position: center; mix-blend-mode: screen; transform: scale(0.55) translateY(4px); margin-inline: -45px; }

.section--mission { background: var(--color-kaki); padding-block: 3rem; }

.mission__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.mission__stat { color: var(--color-white); }

.mission__number {
    display: block;
    font-family: var(--font-cursive);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.mission__caption {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-body);
}

.section--demarche { background: var(--color-bg); }

.demarche__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.demarche__text h2 { margin-top: 0.5rem; margin-bottom: 1.25rem; }
.demarche__text p { color: var(--color-text-light); }

.demarche__values { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 3.5rem; }

.value-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}
.value-card__icon { display: inline-block; color: var(--color-kaki); font-size: 1rem; margin-bottom: 0.4rem; }
.value-card__video-wrap {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 55px;
    margin-bottom: 0.10rem;
    isolation: isolate;
    overflow: hidden;
}
.value-card__video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-kaki);
    mix-blend-mode: screen;
    pointer-events: none;
}
.value-card__video {
    display: block;
    position: absolute;
    width: 330px;
    height: auto;
    filter: invert(1);
}
.value-card h3 { font-size: 1rem; margin-top: 0; margin-bottom: 0.35rem; }
.value-card p { font-size: 0.88rem; color: var(--color-text-light); margin-bottom: 0; }

.section--equipe { background: var(--color-bg-alt); }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.team-card { text-align: center; }

.team-card__photo {
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    margin-inline: auto;
    margin-bottom: 1rem;
    width: 120px;
    background: var(--color-bg);
}

.team-card__photo img,
.team-card__photo-placeholder { width: 100%; height: 100%; object-fit: cover; }

.team-card__name { font-size: 1rem; margin-bottom: 0.25rem; }
.team-card__role { font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 0; }
.team-card__bio p { font-size: 0.85rem; color: var(--color-text-light); }

/* =============================================
   PAGE GÉNÉRIQUE
   ============================================= */
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-body { max-width: 720px; }

/* =============================================
   PAGE LIBRAIRIE — ARCHIVE
   ============================================= */
.librairie-hero {
    background: url(assets/images/hero_librairie.png) center / cover no-repeat;
    padding-block: 8rem 5rem;
    clip-path: url(#wave-hero-bottom);
}
.librairie-hero__body {
    margin-left: 4rem;
}
.librairie-hero h1 { margin-top: 0.4rem; margin-bottom: 0.75rem; color: #ffffff; }
.librairie-hero p  { color: rgba(255, 255, 255, 0.88); max-width: 520px; font-size: 1.2rem; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.librairie-hero .tag-label { color: var(--color-kaki); border-color: var(--color-kaki-light); }

.librairie-catalogue { padding: 0; }

.librairie-sidebar__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.librairie-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    height: 1.2em;
    padding: 0 0.3em;
    border-radius: 999px;
    background: var(--color-kaki-dark);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.librairie-filters-arrow {
    font-size: 1.1rem;
    line-height: 1;
    color: #888;
    transition: transform 0.2s ease;
    margin-left: auto;
}
.librairie-sidebar.is-open .librairie-filters-arrow { transform: rotate(180deg); }

/* Bouton Filtres dans la toolbar (mobile uniquement) */
.librairie-filters-toolbar-btn { display: none; }
.librairie-sidebar__close { display: none; }

/* Chips filtres actifs */
.librairie-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 3rem 0.75rem;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-kaki);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--color-kaki);
    color: #ffffff;
    transition: background var(--transition), border-color var(--transition);
}
.active-filter-chip:hover {
    background: var(--color-kaki-dark);
    border-color: var(--color-kaki-dark);
}
.active-filter-chip span { font-size: 1.3rem; line-height: 1; }
.active-filter-chip--age { background: var(--pill-border); border-color: var(--pill-border); color: #ffffff; }
.active-filter-chip--age:hover { opacity: 0.85; background: var(--pill-border); border-color: var(--pill-border); }

/* Toolbar pleine largeur : recherche seule sur ligne 1, actions sur ligne 2 */
.librairie-toolbar {
    grid-area: toolbar;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem 3rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.librairie-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.librairie-search-bar { display: flex; }

/* Layout 2 colonnes : toolbar pleine largeur, sidebar + contenu */
#librairie-filters-form {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-areas: "toolbar toolbar" "sidebar content";
    align-items: start;
}

.librairie-sidebar {
    grid-area: sidebar;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    margin: 2rem 0 2rem 2rem;
    padding: 1.75rem 1.5rem;
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
}
.librairie-search-bar input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 1rem 0.45rem 2.2rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.88rem;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.65rem center;
    transition: border-color var(--transition);
}
.librairie-search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--color-kaki);
}
.sort-wrapper {
    position: relative;
    flex: 0 0 auto;
    min-width: 130px;
    display: flex;
    align-items: center;
}
.sort-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    font-family: var(--font-ui);
    font-size: 0.84rem;
    padding: 0.38rem 0.6rem;
    line-height: 1.6;
    border-radius: var(--radius);
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), color var(--transition);
}
.sort-btn:focus { outline: none; }
.sort-wrapper.is-open .sort-btn,
.sort-btn:focus {
    border-color: var(--color-kaki-dark);
    color: var(--color-kaki-dark);
}
.sort-arrow {
    margin-left: auto;
    font-size: 1.1rem;
    line-height: 1;
    color: #666;
    transition: color var(--transition), transform 0.2s ease;
}
.sort-wrapper.is-open .sort-arrow {
    color: var(--color-kaki-dark);
    transform: rotate(180deg);
}
.sort-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    background: var(--color-white);
    border: 1.5px solid var(--color-kaki-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 50;
    padding: 0.25rem 0;
}
.sort-wrapper.is-open .sort-dropdown { display: block; }
.sort-option {
    padding: 0.4rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--color-text);
    transition: background-color var(--transition), color var(--transition);
}
.sort-option:hover {
    background-color: var(--color-kaki);
    color: var(--color-white);
}
.sort-option.is-selected {
    font-weight: 600;
    color: var(--color-kaki-dark);
}

/* Groupes repliables */
.filter-group__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    margin-bottom: 0.5rem;
}
.librairie-sidebar__title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(0,0,0,0.3);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.filter-group__arrow {
    font-size: 1.4rem;
    color: var(--color-text-light);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.filter-group.is-collapsed .filter-group__arrow { transform: rotate(-90deg); }
.filter-group.is-collapsed .filter-group__pills { display: none; }

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.filter-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.filter-group__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-light);
    pointer-events: none;
}

.librairie-count { font-size: 0.85rem; color: var(--color-text-light); margin: 0 0 1.75rem; }
.filter-group__pills { display: flex; flex-direction: column; gap: 0.3rem; }

.filter-pill {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    font-size: 0.82rem;
    cursor: pointer;
    background: var(--color-white);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    user-select: none;
}
.filter-pill input { display: none; }
.filter-pill:hover { border-color: var(--color-kaki); color: var(--color-kaki-dark); }
.filter-pill.is-active {
    background: var(--color-kaki);
    border-color: var(--color-kaki);
    color: #ffffff;
}

/* === Filter pills — couleurs par tranche d'âge (via PHP custom properties) === */
.filter-pill--age              { border-color: var(--pill-border); color: var(--pill-color); }
.filter-pill--age:hover        { border-color: var(--pill-border); background: var(--pill-bg); color: var(--pill-color); }
.filter-pill--age.is-active    { background: var(--pill-border); border-color: var(--pill-border); color: #ffffff; }

.filter-select {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--color-white);
    cursor: pointer;
}

.filter-reset {
    display: block;
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 0.82rem;
    color: var(--color-text-light);
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}
.filter-reset:hover { color: var(--color-text); }

.librairie-content { grid-area: content; padding: 1.5rem 3rem 2rem; min-width: 0; min-height: calc(100vh - 70px); }
.librairie-sidebar-backdrop { display: none; }


.books-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* =============================================
   PAGE LIVRE — SINGLE
   ============================================= */

/* Header toujours opaque sur la page livre (pas de hero transparent) */
.single-livre .site-header {
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    height: 72px;
}
.single-livre .site-header .container {
    height: 100%;
    padding-block: 0;
    margin-top: 0.25rem;
    padding-bottom: 0.25rem;
    align-items: center;
}
.single-livre .site-header .site-logo { margin-top: 0.5rem; margin-bottom: 0; }
.single-livre .site-header .site-logo__img { height: 65px; }
.single-livre .site-header .site-logo__name { opacity: 0; }
.single-livre .site-header .main-navigation { padding-top: 0; }
.single-livre .site-header .main-navigation a { color: var(--color-text); }
.single-livre .site-header .nav-cart-icon { color: var(--color-text); }

/* Header opaque fixe sur les pages légales */
.page-cgv .site-header,
.page-mentions-legales .site-header,
.page-politique-de-remboursement .site-header {
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    height: 72px;
}
.page-cgv .site-header .container,
.page-mentions-legales .site-header .container,
.page-politique-de-remboursement .site-header .container {
    height: 100%;
    padding-block: 0;
    margin-top: 0.25rem;
    padding-bottom: 0.25rem;
    align-items: center;
}
.page-cgv .site-header .site-logo,
.page-mentions-legales .site-header .site-logo,
.page-politique-de-remboursement .site-header .site-logo { margin-top: 0.5rem; margin-bottom: 0; }
.page-cgv .site-header .site-logo__img,
.page-mentions-legales .site-header .site-logo__img,
.page-politique-de-remboursement .site-header .site-logo__img { height: 65px; }
.page-cgv .site-header .site-logo__name,
.page-mentions-legales .site-header .site-logo__name,
.page-politique-de-remboursement .site-header .site-logo__name { opacity: 0; }
.page-cgv .site-header .main-navigation,
.page-mentions-legales .site-header .main-navigation,
.page-politique-de-remboursement .site-header .main-navigation { padding-top: 0; }
.page-cgv .site-header .main-navigation a,
.page-mentions-legales .site-header .main-navigation a,
.page-politique-de-remboursement .site-header .main-navigation a { color: var(--color-text); }
.page-cgv .site-header .nav-cart-icon,
.page-mentions-legales .site-header .nav-cart-icon,
.page-politique-de-remboursement .site-header .nav-cart-icon { color: var(--color-text); }
.page-cgv .site-main,
.page-mentions-legales .site-main,
.page-politique-de-remboursement .site-main { padding-top: 95px; }
.page-cgv .page-header h1,
.page-mentions-legales .page-header h1,
.page-politique-de-remboursement .page-header h1 { color: var(--color-kaki-dark); }

.livre-breadcrumb { padding-block: 1.5rem 0; font-size: 0.85rem; }
.livre-breadcrumb a { color: var(--color-text-light); text-decoration: none; }
.livre-breadcrumb a:hover { color: var(--color-text); }

.livre-single { padding-block: 90px 5rem; }

.livre-single__layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 3.5rem;
    align-items: start;
    padding-top: 2rem;
}

.livre-carousel__main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.livre-carousel__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.livre-carousel__placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
}
.livre-carousel__thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.livre-carousel__thumb {
    width: 68px;
    height: 68px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: var(--color-bg-alt);
    transition: border-color var(--transition);
    flex-shrink: 0;
}
.livre-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.livre-carousel__thumb.is-active,
.livre-carousel__thumb:hover { border-color: var(--color-kaki); }

.livre-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}
.livre-details__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0.25rem 0 0;
    line-height: 1.2;
}
.livre-details__subtitle { font-size: 1.05rem; color: var(--color-text-light); font-style: italic; margin: 0.2rem 0 0; }
.livre-details__tome { font-style: normal; font-weight: 700; color: var(--color-kaki-dark); }
.livre-details__age { font-size: 0.72rem; padding: 0.15rem 0.6rem; white-space: nowrap; max-width: fit-content; }
.livre-details__author { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }
.livre-details__price { font-size: 1.6rem; font-weight: 700; margin: 0; }
.livre-details__themes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.livre-details__themes-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.livre-details__themes-cta { flex-shrink: 0; margin-right: 11rem; }
.livre-details__themes-cta.btn-primary,
.livre-details__cta .btn-primary {
    background: var(--color-rose-bandeau);
    color: #b5466a;
}
.livre-details__themes-cta.btn-primary:hover,
.livre-details__cta .btn-primary:hover { background: #e8a8bf; color: #b5466a; }
.livre-details__synopsis {
    line-height: 1.75;
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}
.livre-details__cta { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; }

.livre-details__parution {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--color-text-light);
    font-style: italic;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0.3em 0.9em;
    white-space: nowrap;
    flex-shrink: 0;
}

.livre-details__stock {
    font-size: 0.82rem;
    margin-top: 0.4rem;
}
.livre-details__stock--sold-out {
    color: #a02828;
    font-weight: 600;
}
.livre-details__stock--low {
    color: #8a5c10;
}

.livre-details__upcoming-social {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg-alt, #f7f5f0);
    border-radius: 8px;
}
.livre-details__upcoming-social-text {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0;
    flex: 1;
}

/* =============================================
   PAGE CONTACT
   ============================================= */
.contact-hero {
    background-image: url(assets/images/hero-contact.png);
    background-position: 70% center;
    background-size: 120%;
    background-repeat: no-repeat;
    padding-block: 6rem 2.5rem;
    position: relative;
}
.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 15, 10, 0.10);
    pointer-events: none;
}
.contact-hero__body {
    margin-left: 140px;
    position: relative;
    z-index: 1;
}
.contact-hero h1 { margin-top: 0.4rem; margin-bottom: 0.75rem; color: #ffffff; }
.contact-hero p  { color: rgba(255, 255, 255, 0.88); max-width: 520px; font-size: 1.2rem; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); }
.contact-hero .tag-label { color: var(--color-kaki); border-color: var(--color-kaki-light); }

.contact-section { background: var(--color-bg); }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 5rem;
    align-items: start;
}

/* Formulaire */
.contact-form-wrap h2 { margin-bottom: 2rem; }

.contact-form-wrap .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form-wrap .wpcf7-form p {
    margin: 0;
}

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form-wrap input[type="text"]:focus,
.contact-form-wrap input[type="email"]:focus,
.contact-form-wrap textarea:focus {
    outline: none;
    border-color: var(--color-kaki);
    box-shadow: 0 0 0 3px rgba(160, 212, 178, 0.2);
}

.contact-form-wrap textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form-wrap input[type="submit"] {
    align-self: flex-start;
    background-color: var(--color-kaki);
    color: var(--color-white);
    border: none;
    padding: 0.7rem 1.8rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color var(--transition), box-shadow var(--transition);
}

.contact-form-wrap input[type="submit"]:hover {
    background-color: var(--color-kaki-dark);
    box-shadow: var(--shadow-hover);
}

.wpcf7-not-valid-tip { font-size: 0.78rem; color: #c0392b; margin-top: 0.25rem; display: block; }
.wpcf7-response-output { margin-top: 1rem !important; padding: 0.75rem 1rem !important; border-radius: var(--radius) !important; font-size: 0.88rem !important; border: none !important; }
.wpcf7-mail-sent-ok { background: var(--color-pastel-vert) !important; color: var(--color-kaki-dark) !important; }
.wpcf7-validation-errors { background: #fdecea !important; color: #c0392b !important; }

/* Infos de contact */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 5rem;
}

.contact-info__block {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-info__icon {
    font-size: 1.3rem;
    color: var(--color-kaki-dark);
    margin-bottom: 0.25rem;
}

.contact-info__block h4 {
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
    color: var(--color-text);
}

.contact-info__block p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.6;
}

.contact-info__block a { color: var(--color-kaki-dark); }
.contact-info__block a:hover { color: var(--color-kaki); }

/* Vidéo contact */
.contact-video {
    align-self: stretch;
    border-radius: var(--radius);
    overflow: hidden;
}

.contact-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .librairie-sidebar__title { display: none; }
    .site-header .container { align-items: center; padding-block: 0.75rem; }
    .site-branding { min-width: 0; flex-shrink: 1; display: flex; align-items: center; }
    .site-logo__img { height: 65px; max-width: 160px; width: auto; }
    .site-logo__name { font-size: 0.75rem; margin-top: -0.5rem; text-align: center; }
    .site-header.scrolled { height: 58px; }
    .site-header.scrolled .container { margin-top: 0; padding-block: 0; align-items: stretch; height: 58px; }
    .site-header.scrolled .main-navigation { align-items: center; }
    .site-header.scrolled .site-logo__name { display: none; }
    .site-header.scrolled .site-logo__img { height: 54px; margin-top: 4px; }
    .main-navigation { padding-top: 0; gap: 0.75rem; margin-right: 0.5rem; flex-shrink: 0; }
    .nav-burger { display: flex; }

    .main-navigation.is-open .nav-burger { color: var(--color-text); }

    #primary-nav-list {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background: #fff;
        margin: 0;
        padding: 5rem 0 2rem;
        list-style: none;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-right: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    #primary-nav-list.is-open { display: flex; }
    #primary-nav-list li { list-style: none; width: auto; }
    #primary-nav-list a {
        display: block;
        font-size: 1.4rem;
        font-family: var(--font-cursive);
        color: var(--color-text);
        padding: 0.9rem 2.5rem;
        text-transform: none;
        letter-spacing: 0;
        background: none;
        white-space: nowrap;
    }
    #primary-nav-list a:hover,
    #primary-nav-list .current-menu-item > a {
        background-color: rgba(0, 0, 0, 0.06);
        color: var(--color-text);
        border-radius: var(--radius);
    }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-col--brand { grid-column: 1 / -1; }
    .footer-col--tagline { grid-column: 1 / -1; }
    .footer-phrase { white-space: normal; text-align: center; }

    .hero__main .container { margin-left: 0; }

    .hero__bandeau-bg-video { transform: translate(-50%, -51%) scale(0.65); min-width: 100%; min-height: 100%; width: auto; height: auto; }
    .hero__bandeau-books { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.25rem; padding-inline: 1.5rem; margin-inline: -1.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .hero__bandeau-book:hover { transform: none; }
    .hero__bandeau-book:hover .hero__bandeau-book-cover { box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
    .hero__bandeau-book:hover .hero__bandeau-book-cover img { transform: none; }
    .hero__bandeau-book:hover .hero__bandeau-book-title { color: rgba(255,255,255,0.75); }
    .hero__bandeau-books::-webkit-scrollbar { display: none; }
    .hero__bandeau-book { flex: 0 0 200px; width: 200px; min-width: 0; overflow: hidden; }
    .hero__bandeau-book-title { font-size: 0.72rem; }
    .hero__bandeau-book-title { flex-direction: column; align-items: flex-start; }
    .hero__bandeau-book-tome { font-size: inherit; }
    .hero__bandeau-book-tome::before { content: ''; }
    .hero__bandeau-book-age { font-size: 0.58rem; padding: 0.15rem 0.4rem; }
    .hero__bandeau-book-badge { font-size: 0.52rem; padding: 0.2em 0.6em; }

    .books-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .books-grid--4 { grid-template-columns: 1fr; }
    .librairie-toolbar { padding: 1rem 1.5rem 0; border-bottom: none; }
    #librairie-filters-form { display: block; position: relative; }
    .librairie-sidebar {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .librairie-sidebar.is-open {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--color-white);
        box-shadow: var(--shadow-card);
        border-radius: var(--radius-lg);
        padding: 1rem 1.5rem 1.25rem;
        margin: 0;
        /* top est calculé par JS */
    }
    .librairie-sidebar.is-open .librairie-sidebar__body { display: flex; flex-direction: column; padding-top: 1.75rem; }
    .librairie-filters-toolbar-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--color-white);
        border: 1.5px solid rgba(0,0,0,0.2);
        border-radius: 2rem;
        padding: 0.4rem 0.9rem;
        font-family: var(--font-ui);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text);
        cursor: pointer;
    }
    .librairie-filters-toolbar-btn[aria-expanded="true"] {
        background: var(--color-kaki);
        border-color: var(--color-kaki);
        color: var(--color-white);
    }
    .librairie-filters-toolbar-btn[aria-expanded="true"] .librairie-filters-arrow {
        transform: rotate(180deg);
        color: var(--color-white);
    }
    .librairie-sidebar__close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.6rem;
        right: 0.75rem;
        width: 2rem;
        height: 2rem;
        background: none;
        border: none;
        font-size: 1.6rem;
        color: var(--color-text-light);
        cursor: pointer;
        line-height: 1;
    }
    .librairie-sidebar__close:hover { color: var(--color-text); }
    .librairie-content { padding: 1rem 1.5rem 2rem; }
    .librairie-active-filters { padding: 0 1.5rem 0.5rem; }
    .librairie-hero { clip-path: url(#wave-hero-bottom-mobile); background-position: center -30px; background-size: auto 120%; position: relative; overflow: hidden; padding-block: 6rem 3.5rem; }
    .librairie-hero::before { content: ''; position: absolute; inset: 0; background: inherit; transform: scale(1.4); z-index: 0; }
    .librairie-hero__body { margin-left: 1.5rem; position: relative; z-index: 1; }
    .librairie-hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .librairie-hero p  { font-size: 1rem; white-space: normal; }
    .section--catalogue { background: linear-gradient(to bottom, #ffffff calc(100% - 120px), var(--color-bg-alt) calc(100% - 120px)); }
    .section__header--with-cta { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .section__cta-group { align-self: flex-end; margin-top: 1.5rem; }
    .section__cta-group .btn { white-space: nowrap; font-size: 0.65rem; padding: 0.4rem 0.85rem; }
    .section--catalogue .section__header { margin-bottom: 0; }
    .books-accordion { margin-top: 1rem; }
    .section--catalogue .section__header h2 { max-width: 12rem; }
    .filter-group__pills { flex-direction: row; flex-wrap: wrap; }
    .livre-single__layout { grid-template-columns: 1fr; gap: 2rem; }
    .single-livre .livre-single { padding-block-start: 90px; }
    .livre-suggestions .books-grid { grid-template-columns: repeat(2, 1fr); }
    .livre-carousel { max-width: 300px; margin-inline: auto; width: 100%; }
    .livre-details__themes { flex-wrap: wrap; }
    .livre-details__themes-cta { margin-right: 0; }
    .livre-details__parution { white-space: normal; }

    .books-accordion {
        flex-direction: row;
        height: 280px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        clip-path: url(#wave-books-mobile);
        padding-inline: 0;
    }
    .book-spine {
        flex: 0 0 38vw;
        min-width: 38vw;
        height: 100%;
        margin-top: 0;
        clip-path: none;
        transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .book-spine:first-child { margin-top: 0; }
    .book-spine:focus-within,
    .book-spine.is-active {
        flex-basis: 100vw;
        height: 100%;
    }
    .book-spine:hover:not(.is-active) {
        flex-basis: var(--spine-w, 38vw);
        z-index: 1;
    }
    .book-spine:hover:not(.is-active) .book-spine__cover       { opacity: 0; transform: scale(1.06); }
    .book-spine:hover:not(.is-active) .book-spine__info        { opacity: 0; transform: translateY(10px); }
    .book-spine:hover:not(.is-active) .book-spine__label       { opacity: 1; }
    .book-spine:hover:not(.is-active) .book-spine__badge-spine { opacity: 1; }
    .book-spine:hover:not(.is-active) .book-spine__age-always  { opacity: 1; }
    .book-spine.is-active .book-spine__inner  { pointer-events: none; }
    .book-spine.is-active .book-spine__cover  { pointer-events: auto; cursor: pointer; }
    .book-spine.is-active .book-spine__info   { pointer-events: auto; cursor: pointer; }
    .book-spine__cover { width: 36%; min-width: 100px; }
    .book-spine__info  { padding: 1.25rem 1rem; }
    .book-spine__label { padding-bottom: 30px; }
    .book-spine__label-title { font-size: 0.72rem; }
    .book-spine__label-sub   { font-size: 0.55rem; }

    .avis-card::before { right: 2.5rem; }
    .avis-arrow {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 2rem;
    }
    .avis-arrow--prev { left: 1rem; }
    .avis-arrow--next { right: 1rem; }
    .avis-slider { margin-inline: -1.5rem; }
    .avis-grid { padding-inline: 9vw; scroll-padding-inline: 9vw; }
    .avis-card { flex: 0 0 min(320px, 82vw); scroll-snap-align: center; }

    .hero__content .btn { padding: 0.5rem 1rem; font-size: 0.72rem; }
    .section--actus { padding-block-start: 2rem; }
    .actus-grid { grid-template-columns: 1fr; }
    .section--avis { padding-block-end: 2rem; }
    .cta-banner { padding-block: 1.5rem; }
    .cta-banner__inner { flex-direction: column; text-align: center; }
    .cta-banner__content h2 { font-size: 1.4rem; }
    .cta-banner__actions { justify-content: center; flex-wrap: nowrap; }
    .cta-banner__actions .btn { padding: 0.5rem 1rem; font-size: 0.72rem; }

    .wp-block-woocommerce-checkout-fields-block { width: 100% !important; padding-right: 0 !important; }
    .wp-block-woocommerce-checkout-totals-block { width: 100% !important; padding-left: 0 !important; }

    .woocommerce-checkout .page-header { margin-bottom: 0.25rem; }

    .about-hero { padding-block: 6.5rem 0.5rem; position: relative; overflow: hidden; }
    .about-hero::before { content: ''; position: absolute; inset: 0; background: inherit; transform: scale(1.25); z-index: 0; }
    .about-hero__inner { position: relative; z-index: 1; }
    .about-hero__inner { margin-inline: 1.5rem auto; }
    .about-hero__inner h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .about-hero__lead { font-size: 1rem; }
    .about-pillars { padding-block: 0.9rem; }
    .about-pillars__inner { flex-wrap: nowrap; gap: 0.5rem; padding-inline: 0.75rem; }
    .about-pillar { font-size: 0.62rem; letter-spacing: 0; }
    .about-pillar__sep { font-size: 0.4rem; }
    .section--demarche { padding-block-start: 1.5rem; padding-block-end: 3rem; }
    .demarche__inner { grid-template-columns: 1fr; gap: 1rem; }
    .demarche__values { padding-top: 0; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }

    .contact-hero { overflow: hidden; }
    .contact-hero::after { content: ''; position: absolute; inset: 0; background: inherit; transform: scale(2.1); z-index: 0; }
    .contact-hero::before { z-index: 1; }
    .contact-hero__body { margin-left: 0; position: relative; z-index: 2; }
    .contact-hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .contact-hero p  { font-size: 1rem; }
    .contact-hero { padding-block-end: 1rem; }
    .contact-section { padding-block-start: 2rem; }
    .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-info { padding-top: 0; }
    .contact-video { height: 260px; }

    /* Carte livre horizontale sur mobile */
    .book-card {
        aspect-ratio: unset;
        height: 145px;
        overflow: hidden;
    }
    .book-card__link {
        display: flex;
        flex-direction: row;
    }
    .book-card__cover {
        position: relative;
        inset: unset;
        width: 85px;
        height: 100%;
        flex-shrink: 0;
        overflow: visible;
    }
    .book-card__body {
        position: static;
        flex: 1;
        min-height: unset;
        padding: 0.5rem 0.75rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(255,255,255,0.97);
    }
    .book-card__age { align-self: flex-start; }
    .book-card__order {
        right: 0.75rem;
        left: unset;
        transform: none;
        bottom: 0.3rem;
        font-size: 0.7rem;
        padding: 0.2rem 0.75rem;
    }
    .book-card__badge {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.5rem;
        padding: 0.25em 1.8em;
        white-space: normal;
        text-align: center;
        line-height: 1.6;
        max-width: unset;
        min-width: unset;
    }
    .book-card__badge span { white-space: nowrap; }
}

@media (max-width: 600px) {
    .mission__inner { grid-template-columns: repeat(2, 1fr); }

    .break-mobile { display: inline; }

    .hero__main { min-height: 55vh; }
    .hero__content { padding-top: 5rem; padding-inline: 1.5rem; max-width: 100%; }
    .hero__content h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .hero__content h1 br { display: none; }
    .hero__content p { font-size: 1rem; max-width: 100%; }
}

@media (max-width: 480px) {
    .site-footer .container { padding-inline: 1.25rem; }

    /* Colonne unique centrée : phrase > logo > reste */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        align-items: center;
        justify-items: center;
    }
    .footer-col--tagline { grid-row: 1; transform: none; justify-content: center; align-items: center; margin-top: 0.4rem; margin-bottom: -0.35rem; }
    .footer-phrase { white-space: normal; text-align: center; font-size: 0.85rem; }

    .footer-col--brand { grid-row: 2; grid-column: auto; align-items: center; gap: 0; }
    .footer-logo { height: 90px; width: auto; }
    .footer-tagline { display: none; }

    /* Ligne 3 : réseaux + nav pleine largeur */
    .footer-col--right {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        justify-self: stretch;
    }
    .footer-social-wrap { align-items: center; transform: none; }

    /* Librairie / À propos / Contact sur une ligne centrée */
    .footer-nav { flex-direction: row; gap: 1rem; flex-wrap: wrap; justify-content: center; }

    /* Copyright + mentions légales empilés et centrés */
    .footer-bottom { flex-direction: column; gap: 0.4rem; align-items: center; }
    .footer-legal__links { gap: 0.75rem; justify-content: center; }
}

/* =============================================
   SUGGESTIONS LIVRE SINGLE
   ============================================= */
.livre-suggestions {
    background: var(--color-bg-alt);
    padding-block: 4rem 5rem;
}
.livre-suggestions .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.livre-suggestions__title {
    font-family: var(--font-cursive);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin-bottom: 2rem;
}
.livre-suggestions .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* =============================================
   AVIS CTA + MODAL
   ============================================= */
.avis-cta {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.avis-cta p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.6;
    text-align: left;
    max-width: 28rem;
    margin: 0;
}

@media (max-width: 768px) {
    .avis-cta { flex-direction: column; align-items: center; margin-top: 0.75rem; }
    .avis-cta p { order: 2; text-align: center; max-width: none; }
    .avis-cta .btn-outline { order: 1; white-space: nowrap; font-size: 0.72rem; padding: 0.5rem 1.1rem; }
}

/* Modal */
.avis-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.avis-modal[hidden] { display: none; }

.avis-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(58, 50, 40, 0.55);
    backdrop-filter: blur(2px);
}

.avis-modal__box {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    padding: 2.5rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.avis-modal__box h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin-bottom: 1.75rem;
    color: var(--color-text);
}

.avis-modal__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0.25rem;
    transition: color var(--transition);
}
.avis-modal__close:hover { color: var(--color-text); }

/* Formulaire */
.avis-form { display: flex; flex-direction: column; gap: 1.25rem; }

.avis-form__field { display: flex; flex-direction: column; gap: 0.4rem; }

.avis-form__field label {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.avis-form__req { color: var(--color-kaki-dark); }
.avis-form__optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

.avis-form__field input[type="text"],
.avis-form__field textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition);
    outline: none;
    resize: vertical;
}
.avis-form__field input[type="text"]:focus,
.avis-form__field textarea:focus {
    border-color: var(--color-kaki-dark);
}
.avis-form__field input::placeholder,
.avis-form__field textarea::placeholder {
    color: var(--color-border);
}

/* Étoiles interactives */
.avis-stars-input {
    display: flex;
    gap: 0.25rem;
}
.avis-star-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition), transform var(--transition);
}
.avis-star-btn.is-active { color: #e8b84b; }
.avis-star-btn:hover { transform: scale(1.15); }

/* Footer formulaire */
.avis-form__footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}
.avis-form__legal {
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Message succès / erreur */
.avis-form__message {
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    line-height: 1.5;
}
.avis-form__message.is-success {
    background: #d5e8c4;
    color: #2d5a1e;
}
.avis-form__message.is-error {
    background: #f8e0e0;
    color: #8a1f1f;
}