/*
Theme Name: AOC Sélection
Theme URI: https://preprod.aocselection.fr
Author: AOC Sélection
Author URI: https://aocselection.fr
Description: Thème sur mesure pour AOC Sélection, négociant en vins de Bordeaux. Identité épurée et institutionnelle, palette anthracite et blanc, typographies Cormorant Garamond et Source Sans 3.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aocselection
*/

:root {
    --color-bg: #FFFFFF;
    --color-anthracite: #3D3D3D;
    --color-border: #E8E6E1;
    --color-text: #3D3D3D;
    --color-text-on-dark: #FFFFFF;
    --color-muted: #8A8A8A;

    --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --container-width: 1200px;
    --container-padding: 2rem;

    --section-padding-y: 6rem;
    --section-padding-y-mobile: 3.5rem;

    --transition-base: 200ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* Wrapper de la zone visible du site (header + main + footer). Le placer
   ici plutot que sur body evite que les elements injectes par wp_footer()
   (scripts, widgets, admin bar) deviennent enfants du flex layout et
   creent un espace blanc apres le footer. */
.site-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* fallback navigateurs sans dvh */
    min-height: 100dvh;  /* iOS Safari : suit la viewport reelle (URL bar) */
}

.site-main {
    flex: 1 0 auto;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 0.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }

p {
    margin: 0 0 1.25rem;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ---------- Header ---------- */
.site-header {
    background-color: var(--color-anthracite);
    color: var(--color-text-on-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.site-branding__link {
    display: inline-block;
}

.site-branding__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-text-on-dark);
}

.main-navigation {
    display: flex;
}

.main-navigation__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2.25rem;
}

.main-navigation__list a {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-on-dark);
    padding: 0.5rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base), opacity var(--transition-base);
}

.main-navigation__list a:hover,
.main-navigation__list .current-menu-item > a {
    opacity: 1;
    border-bottom-color: var(--color-text-on-dark);
}

@media (max-width: 768px) {
    .site-header__inner {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .main-navigation__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .main-navigation__list a {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 2rem 0;
    font-size: 0.875rem;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.site-footer__brand {
    font-family: var(--font-serif);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-anthracite);
}

/* La tagline ajoutee a la suite du copyright reste en casse normale
   (le uppercase + letterspacing du .site-footer__brand sont neutralises
   pour ce span). */
.site-footer__brand-tagline {
    text-transform: none;
    letter-spacing: normal;
    font-style: italic;
    color: var(--color-muted);
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.75rem;
}

.site-footer__links a {
    color: var(--color-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.site-footer__links a:hover {
    color: var(--color-anthracite);
    opacity: 1;
}

/* Mention obligatoire alcool sous la rangee brand + liens. */
.site-footer__legal {
    margin: 1rem 0 0;
    text-align: center;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* ---------- Hero ---------- */
.hero {
    background: var(--color-anthracite) url('assets/img/hero-bordeaux.jpg') center / cover no-repeat;
    background-attachment: fixed;
    color: var(--color-text-on-dark);
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 40, 0.3);
    z-index: 0;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: heroFadeIn 1.2s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: calc(100vh - 90px);
}

.hero__title,
.hero__title--top {
    margin-top: 4rem;
    margin-bottom: auto;
}

.hero__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 3rem;
}

.hero__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2rem;
    display: block;
}

.hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.18em;
    color: var(--color-text-on-dark);
    margin-bottom: 1.5rem;
    line-height: 1.05;
}

.hero__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 1);
    max-width: 620px;
    margin: 0 auto;
}

/* ---------- Sections alternées ---------- */
.section {
    padding: var(--section-padding-y) 0;
    border-bottom: 1px solid var(--color-border);
}

.section--dark {
    background-color: var(--color-anthracite);
    color: var(--color-text-on-dark);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Section beige : fond clair alterné (page Professionnels). */
.section--beige {
    background-color: #F5F2EC;
}

/* Section profil : padding réduit, contenu centré, accent doré. */
.section--profil {
    padding: 2.5rem 0;
}
.section--profil .section__title {
    text-align: center;
    font-size: 1.4rem;
}
.section--profil .section__body {
    max-width: 680px;
    margin: 0 auto;
}
.section--profil .section__body p {
    margin-bottom: 0.8rem;
}

.section--dark h2,
.section--dark h3 {
    color: var(--color-text-on-dark);
}

.section__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.section__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-muted);
    display: block;
    margin-bottom: 1.5rem;
}

.section--dark .section__eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.section__title {
    margin-bottom: 1.75rem;
}

.section__inner .section__title {
    /* Taille canonique des titres de section, alignee sur
       .section__grid-text .section__title (1.625rem). Toutes les
       sections "centrees" (intro, appellations, CTA, outro...) doivent
       avoir un h2 a la meme taille que les sections en grille pour une
       hierarchie typographique homogene sur tout le site. */
    font-size: 1.625rem;
}

.section__lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.section__body {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.section__inner .section__body {
    font-size: 1.0625rem;
}

.section__body p + p {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .section {
        padding: var(--section-padding-y-mobile) 0;
    }

    .hero {
        min-height: 70vh;
        padding: 4rem 0;
    }
}

/* ---------- Page générique ---------- */
.page-content {
    padding: 5rem 0;
    max-width: 760px;
    margin: 0 auto;
}

.page-content .entry-title {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.page-content .entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* ---------- Hero (additions) ---------- */
.hero__separator {
    display: block;
    width: 60px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 2rem auto;
}

.hero__lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Section accent (titre + trait) ---------- */
.section__accent {
    display: block;
    width: 48px;
    height: 2px;
    background-color: var(--color-anthracite);
    margin: 0 0 1.75rem;
}

.section__accent--center {
    margin: 0.5rem auto 1.75rem;
}

.section--dark .section__accent {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Section : intro pleine largeur ---------- */
.section--intro .section__inner {
    max-width: 900px;
}

.section--intro .section__body {
    font-size: 1.0625rem;
    text-align: center;
}

/* Bloc intro home : texte courant, neutralise les <strong> heritage
   eventuellement saisis dans le wysiwyg (paragraphe d'introduction
   doit etre du texte courant, pas du gras). */
.section--intro .section__body strong,
.section--intro .section__body b {
    font-weight: 400;
}

.section:has(.section__grid) {
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.section:has(.section__grid) > .container {
    max-width: 100%;
    padding: 0;
}

/* ---------- Section : grille 2 colonnes ---------- */
.section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.section__grid--reverse {
    grid-template-columns: 1fr 1fr;
}

.section__grid--reverse > .section__image {
    order: 0;
}

.section__grid-text {
    padding: 2rem 5rem 2rem calc((100vw - 1200px) / 2 + 2rem);
    align-self: center;
}

.section__grid--reverse .section__grid-text {
    padding: 2rem calc((100vw - 1200px) / 2 + 2rem) 2rem 5rem;
}

.section__grid-text .section__title {
    margin-bottom: 1rem;
    text-align: left;
    font-size: 1.625rem;
}

.section__grid-text p {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* Listes saisies dans le wysiwyg (ex. "Criteres de selection" sur la
   home) : en italique pour les distinguer du texte courant, taille
   alignee sur les paragraphes voisins. */
.section__grid-text ul li,
.section__grid-text ol li {
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.section__features {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
}

.section__features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.8;
    font-family: var(--font-serif);
    font-style: italic;
}

.section__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 12px;
    height: 1px;
    background-color: var(--color-anthracite);
}

/* ---------- Section : image ---------- */
.section__image {
    margin: 0;
    overflow: hidden;
    position: relative;
    align-self: stretch;
    min-height: 550px;
}

.section__grid--reverse .section__image {
    margin: 0;
}

.section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Page "Notre approche" — image source 2000x1000 (ratio 2:1),
 * cadre ~600x550 -> cover coupe ~500px horizontalement. La personne
 * étant dans la partie gauche, on tire l'ancrage à fond à gauche.
 * !important pour battre tout cache navigateur tenace ou règle
 * concurrente non identifiée. */
.section .section__image img[src*="chai-saint-emilion"],
.section__image img[src*="chai-saint-emilion"] {
    object-position: 0% 50% !important;
}

@media (max-width: 768px) {
    .section__grid,
    .section__grid--reverse {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .section__grid .section__image,
    .section__grid--reverse .section__image {
        margin: 0;
        order: -1;
        min-height: auto;
    }

    .section__grid-text {
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .section__grid--reverse .section__grid-text {
        text-align: center;
        padding: 1.5rem 1.5rem;
    }

    .section__grid-text .section__title {
        text-align: center;
    }

    .section__grid-text .section__accent {
        margin-left: auto;
        margin-right: auto;
    }

    .section__grid-text p {
        text-align: center;
    }

    /* Listes dans le grid-text : on garde le texte aligne a gauche
       (sinon les puces restent a gauche et le texte centre laisse un
       grand vide entre la puce et le texte). Padding-left reduit pour
       que les puces soient collees au texte. */
    .section__grid-text ul,
    .section__grid-text ol {
        text-align: left;
        padding-left: 1.25rem;
    }

    .section__features {
        padding-left: 0;
    }

    .section__features li {
        text-align: left;
    }

    .section__accent {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Section : appellations ---------- */
/* Titre aligne sur la taille de reference (1.625rem comme .section__grid-text). */
.section--appellations .section__title {
    font-size: 1.625rem;
}

.section--appellations .section__body {
    text-align: center;
    margin-bottom: 2rem;
}

/* ---------- Section : CTA ---------- */
.section--cta {
    padding: 3rem 0;
}

.section--cta .section__title {
    font-size: 1.625rem;
}

/* Sous-titres h3 a l'interieur des blocs de contenu : police sans-serif
   d'origine, taille alignee sur les paragraphes (1.0625rem) pour bien
   marquer le statut de sous-titre, pas de titre. */
.section__body h3,
.section__grid-text h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.75;
    font-weight: 600;
    color: var(--color-anthracite);
    margin: 1.2rem 0 0.4rem;
}

.section--cta .section__lead {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
}

.section--cta .section__body {
    color: rgba(255, 255, 255, 0.8);
    max-width: 640px;
    margin: 0 auto 2rem;
    /* Alignement avec la taille de paragraphe utilisee dans les autres
       blocs (.section__grid-text p, .section__body) : 1.0625rem / 1.75. */
}

/* Bloc CTA secondaire (sobre, centré, fond clair, sous le bloc CTA pro).
   Padding vertical aligné sur les autres sections de la home pour que le
   texte et le bouton respirent. */
.section--cta-secondary {
    padding: var(--section-padding-y) 0;
    text-align: center;
}
.section--cta-secondary .section__lead {
    max-width: 720px;
    margin: 0 auto 1.8rem;
    color: var(--color-anthracite);
    /* Taille paragraphe (alignee sur .section__grid-text p) mais en
       italique sans-serif pour donner un effet d'accroche sans passer
       en visuel titre. */
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.75;
}
.section__inner--narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- Section : outro CTA (page Notre approche) ---------- */
/* Meme respiration que .section--cta-secondary sur la home : padding
   vertical 6rem desktop, contenu centre, accroche en italique, espace
   genereux avant le bouton "Echanger autour...". */
.section--outro {
    padding: var(--section-padding-y) 0;
    text-align: center;
}
.section--outro .section__body {
    font-style: italic;
}
.section--outro .section__cta {
    margin-top: 2.5rem;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 1rem 2.25rem;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
    text-decoration: none;
    line-height: 1;
}

.btn:hover {
    opacity: 1;
}

.btn--outline {
    color: var(--color-anthracite);
    border-color: var(--color-anthracite);
}

.btn--outline:hover {
    background-color: var(--color-anthracite);
    color: var(--color-text-on-dark);
}

.btn--white {
    color: var(--color-anthracite);
    background-color: var(--color-text-on-dark);
    border-color: var(--color-text-on-dark);
}

.btn--white:hover {
    background-color: transparent;
    color: var(--color-text-on-dark);
}

/* ---------- Page hero (en-tête de page intérieure) ---------- */
.page-hero {
    background-color: var(--color-bg);
    padding: 7rem 0 3rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.page-hero--image {
    background-color: var(--color-anthracite);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-text-on-dark);
    border-bottom: none;
    text-align: center;
    padding: 8rem 0 6rem;
    position: relative;
}

.page-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 40, 0.15);
    z-index: 0;
}

.page-hero--approche {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    background-size: 100% 100%;
}

.page-hero--approche::before {
    background: rgba(20, 25, 40, 0.15);
}

.page-hero--contact {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    background-size: 100% 100%;
}

.page-hero--contact::before {
    background: rgba(20, 25, 40, 0.25);
}

.page-hero--image .page-hero__inner {
    position: relative;
    z-index: 1;
}

.page-hero--image .page-hero__title {
    color: var(--color-text-on-dark);
}

.page-hero--image .page-hero__subtitle {
    color: rgba(255, 255, 255, 0.95);
}

.page-hero__inner {
    max-width: 900px;
    margin: 0 auto;
}

.page-hero--image .page-hero__inner {
    animation: heroFadeIn 1.2s ease-out;
}

@media (max-width: 768px) {
    .hero,
    .page-hero--image {
        background-attachment: scroll;
    }

    .page-hero--image {
        background-size: cover;
        min-height: 40vh;
    }
}

.page-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--color-anthracite);
    margin-bottom: 0.375rem;
    line-height: 1.15;
}

.page-hero__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    /* Aligne sur la home (.hero__subtitle) : meme courbe responsive,
       1.125rem mini -> 1.5rem maxi en grand ecran. Les sous-titres
       hero de toutes les pages publiques (Notre approche, Contact,
       Mentions legales, CGV, ...) suivent donc la meme taille. */
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--color-muted);
    margin: 0 0 1.75rem;
}

.page-hero__body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
}

.page-hero__body p + p {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .page-hero {
        padding: 5rem 0 2.5rem;
    }
}

/* ---------- Section : signature en italique (closing) ---------- */
.section__signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-anthracite);
    margin-top: 0.5rem;
}

/* ---------- Page Contact ---------- */
.contact-intro {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
    /* Taille paragraphe canonique du site (alignee sur
       .section__grid-text p et .section__body : 1.0625rem / 1.75). */
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
}

.contact-intro p + p {
    margin-top: 1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.contact-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2.5rem 2rem;
    text-align: center;
}

.contact-card p {
    margin: 0;
}

.contact-card__role {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-muted);
}

/* Boost de specificite (.contact-card .contact-card__role > .contact-card p)
   pour battre la regle .contact-card p { margin: 0 } definie au-dessus,
   qui ecrasait sinon le margin-bottom du titre de carte. */
.contact-card .contact-card__role {
    margin-bottom: 1.5rem;
}

.contact-card__body {
    /* Description du marche : centree, pleine largeur du bloc
       (pas de max-width, le paragraphe occupe toute la zone
       disponible a l'interieur du padding de .contact-card). */
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

.contact-card__body p {
    margin: 0;
}

.contact-card__body p + p {
    margin-top: 0.6rem;
}

.contact-card__name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-anthracite);
    margin-bottom: 0.5rem;
}

/* Separateur visuel entre la description du marche et le contact
   nominatif, uniquement si une description est presente. */
.contact-card__body + .contact-card__name {
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
}

.contact-card__phone {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-anthracite);
    margin-bottom: 0.5rem;
}

.contact-card__phone a,
.contact-card__email a {
    color: inherit;
}

.contact-card__email {
    font-size: 0.95rem;
    color: var(--color-muted);
}

.contact-address {
    margin-top: 2.25rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.contact-address__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-anthracite);
    margin: 0 0 0.5rem;
}

.contact-address__body {
    color: var(--color-muted);
    margin: 0;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 2rem 1.5rem;
    }
}

/* ---------- Page Mentions légales ---------- */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 0 5rem;
}

.legal-content__header {
    margin-bottom: 2.5rem;
}

.legal-content__title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--color-anthracite);
    margin: 0;
}

.legal-block {
    margin-top: 2.5rem;
}

.legal-block__title {
    font-size: 1.5rem;
    color: var(--color-anthracite);
    margin-bottom: 0.5rem;
}

.legal-block .section__accent {
    margin-bottom: 1rem;
}

.legal-block p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
}

.legal-block a {
    color: var(--color-anthracite);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.2em;
}

.legal-block a:hover {
    text-decoration-color: var(--color-anthracite);
    opacity: 1;
}

/* Quand le contenu est édité depuis wp-admin (WYSIWYG), il ne contient que
   des <h2> et <p> sans wrapper .legal-block. On reproduit le style via
   sélecteurs directs sur .legal-content. */
.legal-content > h2,
.legal-content article > h2,
.legal-content div > h2 {
    font-size: 1.5rem;
    color: var(--color-anthracite);
    margin: 2.5rem 0 1rem;
}

.legal-content > h2::after,
.legal-content article > h2::after,
.legal-content div > h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background-color: var(--color-anthracite);
    margin-top: 0.6rem;
}

.legal-content > p,
.legal-content article > p,
.legal-content div > p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
}

.legal-content > p a,
.legal-content article > p a {
    color: var(--color-anthracite);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.2em;
}

.legal-content > p a:hover,
.legal-content article > p a:hover {
    text-decoration-color: var(--color-anthracite);
    opacity: 1;
}

@media (max-width: 768px) {
    .legal-content {
        padding: 2.5rem 0 3rem;
    }
}

/* ---------- Pages d'authentification (connexion / inscription) ---------- */
.auth-page {
    background-color: var(--color-bg);
    padding: 6rem 0 5rem;
    min-height: calc(100vh - 90px);
}

.auth-form {
    max-width: 440px;
    margin: 0 auto;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2.75rem 2.25rem;
}

.auth-form--wide {
    max-width: 560px;
}

.auth-form__title {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    color: var(--color-anthracite);
    text-align: center;
    margin: 0 0 0.375rem;
}

.auth-form__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.95rem;
    margin: 0 0 1.75rem;
}

.auth-form__hint {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 1rem 0 0;
}

.auth-form__hint a {
    color: var(--color-anthracite);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.2em;
    font-weight: 500;
}

.auth-form__hint a:hover {
    text-decoration-color: var(--color-anthracite);
    opacity: 1;
}

.auth-form__divider {
    border-top: 1px solid var(--color-border);
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    text-align: center;
}

.auth-form__divider .btn {
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    .auth-page {
        padding: 4rem 0 3rem;
    }

    .auth-form {
        padding: 2rem 1.5rem;
    }
}

/* ---------- Form fields ---------- */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-anthracite);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.form-required {
    color: var(--color-anthracite);
    font-weight: 600;
    margin-left: 0.15em;
}

.form-hint {
    color: var(--color-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 0.3em;
}

/* Variantes utilisées sous les selects/inputs (paragraphes d'aide). */
.form-hint--muted {
    display: block;
    margin: 0.35em 0 0;
    color: #6B6B6B;
    font-size: 0.82rem;
    font-weight: 400;
}
.form-hint--italic {
    display: block;
    margin: 0.2em 0 0;
    color: #6B6B6B;
    font-size: 0.78rem;
    font-style: italic;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.875rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-anthracite);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    transition: border-color var(--transition-base);
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%233D3D3D' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.25rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-anthracite);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

/* Grille pour code postal + ville */
.form-grid {
    display: grid;
    gap: 0.75rem;
}

.form-grid--postal {
    grid-template-columns: 1fr 2fr;
}

@media (max-width: 480px) {
    .form-grid--postal {
        grid-template-columns: 1fr;
    }
}

/* Checkbox CGV / "se souvenir" */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-anthracite);
    line-height: 1.5;
    margin: 1rem 0 1rem;
}

.form-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2rem;
    accent-color: var(--color-anthracite);
}

.form-checkbox--inline {
    margin: 0.25rem 0 1.25rem;
    font-size: 0.875rem;
}

.form-checkbox a {
    text-decoration: underline;
    font-weight: 500;
}

/* Messages globaux */
.form-message {
    padding: 0.875rem 1rem;
    border: 1px solid;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.form-message--error {
    background-color: #FBEEEE;
    border-color: #B33A3A;
    color: #7A1F1F;
}

.form-message--success {
    background-color: #EAF3EC;
    border-color: #2E7D32;
    color: #1F4F22;
}

.form-message--info {
    background-color: #FAFAF8;
    border-color: #C9B66B;
    color: #3D3D3D;
}

.form-error {
    color: #7A1F1F;
    font-size: 0.8125rem;
    margin: 0.4rem 0 0;
}

.form-help {
    text-align: center;
    color: var(--color-muted);
    font-size: 0.78rem;
    margin-top: 0.875rem;
}

/* Variantes de bouton pour les forms */
.btn--full {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.btn--filled {
    color: var(--color-text-on-dark);
    background-color: var(--color-anthracite);
    border-color: var(--color-anthracite);
}

.btn--filled:hover {
    background-color: transparent;
    color: var(--color-anthracite);
    opacity: 1;
}

.btn--small {
    padding: 0.7rem 1.5rem;
    font-size: 0.75rem;
}

/* ==================== ESPACE PRO ==================== */

.pro-wrapper {
    background-color: #F8F7F4;
    min-height: calc(100vh - 90px);
}

/* ---------- Bandeau pro (anthracite) ---------- */
.pro-header {
    background-color: var(--color-anthracite);
    color: var(--color-text-on-dark);
}

.pro-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pro-header__welcome {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.pro-header__welcome strong {
    color: var(--color-text-on-dark);
    font-weight: 600;
    margin-left: 0.25rem;
}

.pro-header__role {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.5rem;
    font-weight: 400;
}

/* ---------- Navigation pro ---------- */
.pro-nav {
    background-color: #2E2E2E;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pro-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.pro-nav__link {
    display: inline-block;
    padding: 0.85rem 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.pro-nav__link:hover {
    color: var(--color-text-on-dark);
    opacity: 1;
}

.pro-nav__link.is-active {
    color: var(--color-text-on-dark);
    border-bottom-color: var(--color-text-on-dark);
    opacity: 1;
}

.pro-nav__link[href$="/wp-admin/"]::before {
    content: "\2699"; /* ⚙ */
    margin-right: 0.35rem;
    font-size: 0.95em;
    opacity: 0.75;
}

.pro-nav__badge {
    display: inline-block;
    margin-left: 6px;
    min-width: 20px;
    padding: 1px 7px;
    background-color: #C9B66B;
    color: #2C2C2C;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.4;
    vertical-align: middle;
}

/* Toast d'ajout au panier */
.aoc-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    background-color: #2C2C2C;
    color: #FFFFFF;
    padding: 12px 22px;
    border-left: 3px solid #C9B66B;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.25s ease;
    z-index: 9998;
    max-width: 90vw;
    pointer-events: none;
}

.aoc-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.aoc-toast--error {
    border-left-color: #B33A3A;
}

/* Bouton "Ajouter au panier" sur les cartes Book — taille augmentée
 * pour la lisibilité (le .btn de base est à 0.8125rem). */
.btn.aoc-add-cart-btn {
    font-size: 0.95rem;
    padding: 10px 18px;
}

/* Bouton dans le panier : état persistant (fond blanc, bordure anthracite) */
.aoc-add-cart-btn.is-in-cart {
    background-color: #FFFFFF;
    color: #3D3D3D;
    border-color: #3D3D3D;
}

.aoc-add-cart-btn.is-in-cart:hover {
    background-color: #FAFAF8;
    color: #2C2C2C;
    opacity: 1;
}

/* Bump éphémère au clic */
@keyframes aoc-cart-bump {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.06); }
}

.aoc-add-cart-btn.is-added {
    animation: aoc-cart-bump 0.4s ease;
}

/* Ligne du tableau Panier déjà au panier */
.order-row.is-in-cart {
    background-color: #FAF7EC;
}

.order-row.is-in-cart > td {
    border-bottom-color: #E8E0C5;
}

@media (max-width: 768px) {
    .pro-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pro-nav__inner {
        flex-wrap: nowrap;
    }
}

/* ---------- Contenu pro ---------- */
.pro-content {
    padding: 2rem 0 4rem;
}

/* ---------- Stats ---------- */
.pro-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.pro-stat {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.pro-stat__value {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-anthracite);
    margin: 0 0 0.25rem;
    line-height: 1;
}

.pro-stat__label {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

@media (max-width: 768px) {
    .pro-stats {
        grid-template-columns: 1fr;
    }
}

/* ---------- Grille 2 colonnes (cartes) ---------- */
.pro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pro-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
}

.pro-card--full {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
}

.pro-card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-anthracite);
    margin: 0 0 1rem;
}

.pro-card__empty {
    margin: 0;
    padding: 1.25rem 0;
    text-align: center;
    color: #6B6B6B;
    font-size: 0.9rem;
    font-style: italic;
}

.pro-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pro-actions .btn {
    text-align: center;
}

@media (max-width: 768px) {
    .pro-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Listes (dernières commandes) ---------- */
.pro-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pro-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.pro-list__item:last-child {
    border-bottom: none;
}

.pro-list__main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.pro-list__ref {
    font-weight: 600;
    color: var(--color-anthracite);
}

.pro-list__meta {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.pro-list__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pro-list__amount {
    font-size: 0.88rem;
    color: var(--color-anthracite);
}

/* ---------- Badges ---------- */
.pro-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
    white-space: nowrap;
}

.pro-badge--ok {
    background-color: #E5F1E6;
    color: #2E7D32;
}

.pro-badge--wait {
    background-color: #FFF3E0;
    color: #B45309;
}

.pro-badge--info {
    background-color: #E3EBF3;
    color: #1F4E79;
}

.pro-badge--zone {
    background-color: var(--color-anthracite);
    color: var(--color-text-on-dark);
}

/* ---------- Alerte (précommande en attente) ---------- */
.pro-alert {
    padding: 0.875rem 1rem;
    background-color: #FFF3E0;
    border: 1px solid #E65100;
    color: #C24A00;
    margin-bottom: 1.5rem;
}

.pro-alert strong {
    color: #E65100;
    display: block;
}

.pro-alert__detail {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--color-anthracite);
}

.pro-alert__detail a {
    color: var(--color-anthracite);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Toolbar (admin) ---------- */
.pro-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pro-toolbar__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-anthracite);
    margin: 0;
}

.pro-toolbar__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Tables ---------- */
.pro-table-wrap {
    overflow-x: auto;
}

.pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pro-table thead th {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    font-weight: 600;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.pro-table tbody td {
    padding: 0.85rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-anthracite);
    vertical-align: middle;
}

.pro-table tbody tr:last-child td {
    border-bottom: none;
}

.pro-table__muted {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.pro-table__center {
    text-align: center;
}

.pro-invoice-sent {
    color: #1d6f1d;
    font-weight: 700;
    font-size: 1rem;
}

.pro-invoice-pending {
    color: #B0B0B0;
    font-weight: 700;
}

.pro-table__hint {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: var(--color-muted);
}

.pro-table__total td {
    border-top: 2px solid var(--color-anthracite);
    font-weight: 600;
}

.pro-table__total td:first-child {
    text-align: right;
}

/* ==================== BOOK PRODUITS ==================== */

.book-title {
    margin-bottom: 1.5rem;
}

.book-empty {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2rem;
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

.book-section {
    margin-bottom: 3rem;
}

.book-section__header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-anthracite);
}

.book-section__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-anthracite);
    margin: 0 0 0.25rem;
}

.book-section__description {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* ---------- Grille produits (.pgrid) ---------- */
.pgrid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

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

/* Le @media (max-width: 768px) qui compacte les cartes Book est déplacé
 * à la toute fin du fichier (cf. "Book mobile compactage") : sinon il
 * était écrasé par les règles .pcard-* desktop définies plus bas — le
 * @media n'ajoute pas de spécificité, donc à spécificité égale c'est la
 * position dans le fichier qui prime. */

/* ---------- Carte produit (.pcard) ---------- */
.pcard {
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pcard-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pcard-app {
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B7A78;
    margin-bottom: 4px;
    font-weight: 700;
}

.pcard-app--blanc        { color: #2D6A4F; }
.pcard-app--rouge        { color: #722F37; }
.pcard-app--rose         { color: #C4727F; }
.pcard-app--moelleux     { color: #B8860B; }
.pcard-app--effervescent { color: #1565C0; }

.pcard-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.3;
    color: #2C2C2C;
    margin-bottom: 4px;
    font-weight: 400;
}

.pcard-name span {
    font-weight: 300;
    color: #999;
}

.pcard-bottom {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #E8E6E1;
}

.pcard-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcard-acts .btn {
    text-align: center;
    width: 100%;
}

/* Slot réservé pour le bandeau tag : hauteur fixe sur TOUTES les cartes,
 * tag présent ou non. Garantit l'alignement de la grille même si certaines
 * cartes n'ont pas de tag. */
.pcard-tag-slot {
    min-height: 40px;
}

/* Bandeau tag : élément BLOCK au-dessus de l'image (plus en overlay
 * absolute). Ne masque plus la bouteille. */
.pcard-tag-banner {
    display: block;
    background-color: #C5A572;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem 1rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Bandeau stock limité sur la pcard : meme format que .pcard-tag-banner
 * (bloc plein, blanc sur fond colore, ombre, padding identiques). Orange
 * chaud pour se distinguer du tag editorial sable. Si le stock est a 0, le
 * produit est masque cote client par aocselection_product_visible_for_user. */
.pcard-stock-banner {
    display: block;
    background-color: #D35400;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem 1rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* Variante "stock épuisé" : visible uniquement dans l'aperçu admin
 * (le produit est masqué du Book client quand remaining=0). Rouge plus
 * fonce pour signaler clairement l'etat au gestionnaire. */
.pcard-stock-banner--out {
    background-color: #B22222;
    color: #FFFFFF;
}

/* Bouton filtre "BIO uniquement" — toggle */
.book-filter-bio {
    padding: 0.5rem 1rem;
    background: #FFFFFF;
    border: 1px solid #4A7C3A;
    color: #4A7C3A;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.book-filter-bio:hover { background: #F2F6EE; }
.book-filter-bio.is-active {
    background-color: #4A7C3A;
    color: #FFFFFF;
}

/* Quand un bandeau tag est présent, on décale le logo AB sous le bandeau. */
.pcard-spacer {
    flex: 1;
}

.pcard-grapes {
    font-size: 0.78rem;
    color: #999;
    margin-bottom: 4px;
}

.pcard-tasting {
    font-size: 0.95rem;
    color: #6B6B6B;
    font-style: italic;
    margin-bottom: 6px;
}

.pcard-pairings {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pcard-pairings span {
    font-size: 10px;
    padding: 3px 8px;
    background-color: #F5F3EE;
    color: #6B6357;
    border: 0.5px solid #E0DBD2;
    border-radius: 999px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.pcard-pvc {
    font-size: 0.75rem;
    color: #6B6B6B;
    margin-bottom: 6px;
}

.pcard-pvc strong {
    color: #2C2C2C;
}

.pcard-paht {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pcard-paht-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
}

.pcard-paht-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2C2C2C;
    line-height: 1.2;
}

.pcard-paht-unit {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #6B6B6B;
    margin-left: 2px;
}

.pcard-paht--ttc .pcard-paht-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #6B6B6B;
}

.pcard-badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: #3D3D3D;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1.2;
}

.pcard-ab-logo {
    position: absolute;
    /* Le bandeau tag est désormais hors de la box image -> retour à un offset
     * simple. Position relative à .pcard-img-box (position: relative). */
    top: 8px;
    right: 8px;
    width: 45px;
    height: 45px;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.pcard-medals {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: calc(100% - 16px);
    pointer-events: none;
}

.pcard-medal {
    width: 55px;
    height: 55px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.pcard-argumentaire {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #FAF6EC;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-size: 10px;
    color: #8A8578;
    line-height: 1.4;
    overflow: hidden;
}

.pcard-argumentaire__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #FFFFFF;
    background-color: #C5A572;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.pcard-argumentaire__text {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard-prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background-color: #F9F9F7;
    border: 1px solid #E8E6E1;
}

.pcard-prices__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
}

.pcard-prices__label {
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
}

.pcard-prices__amount {
    color: #2C2C2C;
    font-weight: 700;
}

.pcard-img-box {
    width: 100%;
    height: 220px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Plus de padding-top réservé : le bandeau tag est désormais hors de cette
     * box (sibling au-dessus), donc ne mange plus l'espace de l'image. */
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #E8E6E1;
    overflow: hidden;
}

.pcard-img-box img.pcard-bottle {
    max-height: 180px;
    width: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.pcard-img-box img.pcard-bottle:hover {
    transform: scale(1.15);
}

/* Lightbox photo bouteille */
.aoc-lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    cursor: zoom-out;
    animation: aoc-lightbox-fade 0.2s ease;
}

.aoc-lightbox__img {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.aoc-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 8px 12px;
}

.aoc-lightbox__close:hover {
    color: #C9B66B;
}

@keyframes aoc-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.aoc-lightbox-open {
    overflow: hidden;
}

.pcard-img-placeholder {
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
    font-family: var(--font-serif);
}

/* Alias pour bouton "primary" — équivalent à .btn--filled */
.btn--primary {
    color: #FFFFFF;
    background-color: #3D3D3D;
    border-color: #3D3D3D;
}

.btn--primary:hover {
    background-color: transparent;
    color: #3D3D3D;
    opacity: 1;
}

/* ===========================================================================
 * Module 5 — Commandes (page-commander.php, page-mes-commandes.php).
 * Class names volontairement en anglais.
 * ======================================================================== */

.aoc-alert {
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: 1px solid;
}

.aoc-alert--error {
    color: #c62828;
    border-color: #c62828;
    background-color: #fff3f3;
}

.aoc-alert--success {
    color: #2e7d32;
    border-color: #2e7d32;
    background-color: #e8f5e9;
}

.aoc-alert--info {
    color: #1565c0;
    border-color: #1565c0;
    background-color: #e7f1fb;
}

/* Mes clients (commercial) — formulaire de création */
.form-grid--2col {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .form-grid--2col {
        grid-template-columns: 1fr;
    }
}

.aoc-new-client-form {
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.aoc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.aoc-empty {
    padding: 24px;
    text-align: center;
    color: #6B6B6B;
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
}

/* --- Order form ---------------------------------------------------------- */

.order-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-card {
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
    padding: 20px;
}

.order-card__title {
    color: #2C2C2C;
    font-size: 1.1rem;
    margin: 0 0 12px;
}

.order-help {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #999999;
}

.order-select {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid #E8E6E1;
    background-color: #FFFFFF;
    font-size: 0.95rem;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.order-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B6B6B;
    border-bottom: 1px solid #E8E6E1;
    padding: 8px 6px;
    background-color: #FAFAF8;
}

.order-table tbody td {
    padding: 8px 6px;
    border-bottom: 1px solid #F0EEE9;
    font-size: 0.9rem;
    vertical-align: middle;
}

.order-th-num,
.order-td-num {
    text-align: right;
}

.order-th-product {
    width: 28%;
}

.order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.order-filter {
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
    color: #3D3D3D;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.order-filter:hover {
    background-color: #FAFAF8;
}

.order-filter.is-active {
    background-color: #3D3D3D;
    border-color: #3D3D3D;
    color: #FFFFFF;
}

/* En-têtes triables */
.order-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.order-th-sort:hover {
    color: #2C2C2C;
}

.order-sort-ind {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7em;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.order-th-sort.is-asc,
.order-th-sort.is-desc {
    color: #2C2C2C;
}

.order-th-sort.is-asc .order-sort-ind,
.order-th-sort.is-desc .order-sort-ind {
    opacity: 1;
}

.order-th-sort.is-asc .order-sort-ind::before  { content: '\25B2'; }
.order-th-sort.is-desc .order-sort-ind::before { content: '\25BC'; }

/* Colonne Couleur */
.order-th-color,
.order-td-color {
    width: 70px;
    text-align: center;
}

.order-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

.order-color-dot--blanc        { background-color: #8BC34A; }
.order-color-dot--rose         { background-color: #C4727F; }
.order-color-dot--rouge        { background-color: #722F37; }
.order-color-dot--moelleux     { background-color: #B8860B; }
.order-color-dot--effervescent { background-color: #1565C0; }
.order-color-dot--sans_alcool  { background-color: #E0E0E0; }
.order-color-dot--spiritueux   { background-color: #6B4423; }

.order-td-muted {
    color: #6B6B6B;
}

.order-qty {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #E8E6E1;
    text-align: center;
    font-size: 0.9rem;
}

/* Avertissement stock limité sous le champ quantité du panier.
 * Non bloquant : c'est une simple alerte visuelle quand le client demande
 * plus de cartons que le stock restant. */
.order-stock-warning {
    display: block;
    margin-top: 4px;
    color: #b35900;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: left;
    font-weight: 500;
}
.order-stock-warning[hidden] {
    display: none;
}

.order-bottles {
    color: #6B6B6B;
}

.order-line-total {
    font-weight: 700;
    color: #2C2C2C;
}

/* --- Summary ------------------------------------------------------------- */

.order-summary {
    max-width: 480px;
    margin-left: auto;
}

.order-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #E8E6E1;
    font-size: 0.95rem;
}

.order-summary__row span {
    color: #6B6B6B;
}

.order-summary__row--total {
    font-size: 1.05rem;
    border-bottom: none;
    padding-top: 12px;
}

.order-summary__row--total strong {
    font-size: 1.4rem;
    color: #2C2C2C;
}

.order-field {
    margin-top: 12px;
}

.order-field label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B6B6B;
    margin-bottom: 4px;
}

.order-field textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #E8E6E1;
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 0.9rem;
    color: #2C2C2C;
    resize: vertical;
}

.order-address-readonly {
    padding: 10px 14px;
    background-color: #FAFAF8;
    border-left: 3px solid #3D3D3D;
    color: #2C2C2C;
    font-size: 0.92rem;
    line-height: 1.45;
}

.order-address-readonly > div + div {
    color: #6B6B6B;
    font-size: 0.88rem;
}

.order-address-readonly--missing {
    border-left-color: #B33A3A;
    color: #6B4F1A;
    background-color: #FBF1E1;
    font-style: italic;
}

/* --- Orders history ------------------------------------------------------ */

.orders-filters {
    margin-bottom: 16px;
}

.orders-tablewrap {
    overflow-x: auto;
}

/* Variante : autorise les popovers (filtres dropdowns) à déborder
 * verticalement sans être clippés. Spec CSS : overflow-x:auto force
 * overflow-y à auto/hidden -> on ne peut PAS combiner avec un popover
 * en position:absolute qui dépasse la hauteur du wrap. À utiliser
 * sur les tableaux qui ont des filtres dropdowns ouvrables. */
.orders-tablewrap--no-clip {
    overflow-x: visible;
}

/* Actions du tableau Mes clients : boutons Commander + Modifier inline. */
.orders-table--clients .order-td-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

.orders-table--clients .order-td-actions .btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
    margin: 0 !important;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
}

.orders-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B6B6B;
    background-color: #FAFAF8;
    border-bottom: 1px solid #E8E6E1;
    padding: 10px 12px;
}

.orders-table tbody td,
.orders-table tfoot td {
    padding: 10px 12px;
    border-bottom: 1px solid #F0EEE9;
    font-size: 0.9rem;
    vertical-align: middle;
}

.orders-table tfoot td {
    background-color: #FAFAF8;
    font-weight: 600;
}

/* --- Status badges ------------------------------------------------------- */

.order-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.order-badge--draft {
    color: #6B6B6B;
    background-color: #F0EEE9;
    border-color: #E8E6E1;
}

.order-badge--ok {
    color: #2e7d32;
    background-color: #e8f5e9;
    border-color: #2e7d32;
}

.order-badge--info {
    color: #1565c0;
    background-color: #e3f2fd;
    border-color: #1565c0;
}

.order-badge--error {
    color: #c62828;
    background-color: #fff3f3;
    border-color: #c62828;
}

/* --- Detail panel -------------------------------------------------------- */

.order-detail {
    margin-top: 24px;
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
}

.order-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.order-detail__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-detail__header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #2C2C2C;
}

.order-detail__pdf-btn {
    white-space: nowrap;
}

.order-th-format,
.order-td-format {
    white-space: nowrap;
}

.order-detail__meta {
    color: #999999;
    font-size: 0.82rem;
    margin: 0 0 16px;
}

.order-detail__notes,
.order-detail__shipping {
    margin-top: 14px;
    padding: 10px 12px;
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
    font-size: 0.9rem;
    color: #2C2C2C;
}

/* ===========================================================================
 * Module 6 — Transport (page-commander.php).
 * ======================================================================== */

.transport-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transport-summary {
    margin: 0;
    font-size: 0.9rem;
    color: #6B6B6B;
}

.transport-summary span {
    color: #2C2C2C;
    font-weight: 700;
    font-size: 1.05rem;
}

.transport-info {
    margin: 0;
    padding: 8px 10px;
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
    color: #6B6B6B;
    font-size: 0.85rem;
}

.transport-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #E8E6E1;
}

.transport-tier {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid #E8E6E1;
    background-color: #FFFFFF;
}

.transport-tier:last-child {
    border-right: none;
}

.transport-tier__range {
    font-size: 0.72rem;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transport-tier__price {
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2C2C2C;
}

.transport-tier.is-active {
    background-color: #fff3e0;
    border-color: #e65100;
}

.transport-tier.is-active .transport-tier__price {
    color: #e65100;
}

.transport-rdv {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1px dashed #E8E6E1;
    cursor: pointer;
    font-size: 0.9rem;
    color: #2C2C2C;
}
.transport-rdv small {
    display: block;
    color: #999999;
    font-size: 0.78rem;
    margin-top: 2px;
}
.transport-rdv input { margin-top: 3px; }

/* Acceptation CGV dans le panier : style cohérent avec .transport-rdv.
   Le bouton submit est désactivé en CSS quand [disabled] (mécanisme natif). */
.order-cgv {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 12px;
    padding: 10px 12px;
    border: 1px solid #E8E6E1;
    background: #FAFAF8;
    cursor: pointer;
    font-size: 0.9rem;
    color: #2C2C2C;
}
.order-cgv input { margin-top: 3px; }
.order-cgv a {
    color: #C9B66B;             /* doré AOC, visible comme lien cliquable */
    text-decoration: underline;
    font-weight: 600;
}
.order-cgv a:hover {
    color: #B59E55;
    opacity: 1;                 /* override le a:hover global qui met opacity 0.7 */
}

/* Bouton "Confirmer la commande" désactivé tant que CGV non cochées.
   Spécificité élevée + pointer-events:none pour battre .btn--filled:hover. */
button.btn--filled[disabled],
button.btn--filled[disabled]:hover {
    background-color: #CCCCCC;
    border-color: #CCCCCC;
    color: #777777;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.transport-result {
    padding: 12px 14px;
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transport-result__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999999;
}

.transport-result__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2C2C2C;
}

.transport-result__detail {
    font-size: 0.85rem;
    color: #6B6B6B;
}

.transport-result__hint {
    font-size: 0.82rem;
    color: #e65100;
    font-style: italic;
}

.transport-result__hint:empty {
    display: none;
}

.transport-pickup {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed #E8E6E1;
    cursor: pointer;
    font-size: 0.9rem;
    color: #2C2C2C;
}

.transport-pickup small {
    display: block;
    color: #999999;
    font-size: 0.78rem;
    margin-top: 2px;
}

.transport-pickup input {
    margin-top: 3px;
}

/* Zone GD */
.transport-zone {
    margin: 4px 0 14px;
}

.transport-zone__header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 10px 14px;
    background-color: #FAFAF8;
    border-left: 3px solid #3D3D3D;
    font-size: 0.92rem;
    color: #2C2C2C;
}

.transport-zone__deps {
    color: #6B6B6B;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.transport-summary__hint {
    color: #6B6B6B;
    font-size: 0.8rem;
    margin-left: 8px;
}

/* Alerte Corse / Hors zone */
.transport-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background-color: #FAF1E1;
    border: 1px solid #E0CFA0;
    color: #6B4F1A;
    font-size: 0.95rem;
}

.transport-alert__icon {
    font-size: 1.2rem;
    color: #C9B66B;
}

/* Les sélecteurs flex écrasent l'attribut natif [hidden] :
   on rétablit explicitement le comportement avec une règle dédiée. */
.transport-franco[hidden],
.transport-next[hidden],
.transport-tofranco[hidden] {
    display: none !important;
}

/* Franco atteint : grosse pastille verte */
.transport-franco {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 16px 20px;
    background-color: #E6F4EA;
    border: 1px solid #2D6A4F;
    color: #1B4332;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.transport-franco__icon {
    font-size: 1.5rem;
    color: #2D6A4F;
}

/* Levier commercial : prochain palier moins cher */
.transport-next {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 16px;
    background-color: #FFF8E1;
    border-left: 4px solid #C9B66B;
    color: #5C4A1F;
    font-size: 0.92rem;
    line-height: 1.45;
}

.transport-next__icon {
    color: #C9B66B;
    font-size: 1.05rem;
}

.transport-next strong {
    color: #2C2C2C;
}

/* Distance au franco (info complémentaire) */
.transport-tofranco {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 10px 14px;
    background-color: #F4F9F5;
    border-left: 3px solid #2D6A4F;
    color: #1B4332;
    font-size: 0.88rem;
}

.transport-tofranco__icon {
    color: #2D6A4F;
}

.transport-tofranco strong {
    color: #1B4332;
}

/* Tableau récapitulatif du barème zone */
.transport-grid {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #E8E6E1;
}

.transport-grid__title {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: #2C2C2C;
    letter-spacing: 0.02em;
}

.transport-grid__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.transport-grid__table thead th {
    text-align: left;
    background-color: #FAFAF8;
    color: #6B6B6B;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border-bottom: 1px solid #E8E6E1;
}

.transport-grid__table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #F0EEE9;
    color: #2C2C2C;
}

.transport-grid__table tbody tr:last-child td {
    background-color: #E6F4EA;
    color: #1B4332;
    font-weight: 600;
}

/* ===========================================================================
 * Mon compte (page-compte.php)
 * ======================================================================== */

.account-card {
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
    padding: 22px 26px;
    margin-bottom: 18px;
}

.account-card__title {
    margin: 0 0 16px;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: #2C2C2C;
    letter-spacing: 0.02em;
}

.account-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 28px;
    margin: 0;
}

.account-field {
    margin: 0;
}

.account-field dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B6B6B;
    margin-bottom: 3px;
}

.account-field dd {
    margin: 0;
    color: #2C2C2C;
    font-size: 0.95rem;
}

.account-form__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.account-form__row label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B6B6B;
}

.account-form__row input {
    padding: 9px 12px;
    border: 1px solid #E8E6E1;
    background-color: #FFFFFF;
    font-size: 0.95rem;
    color: #2C2C2C;
    font-family: var(--font-sans);
}

.account-form__row input:focus {
    outline: none;
    border-color: #3D3D3D;
}

.account-form__grid {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 14px;
}

.account-zone {
    padding: 12px 16px;
    margin: 14px 0 18px;
    background-color: #FAFAF8;
    border-left: 3px solid #3D3D3D;
    font-size: 0.92rem;
    color: #2C2C2C;
}

.account-zone strong {
    color: #2C2C2C;
}

.account-zone__deps {
    color: #6B6B6B;
    font-size: 0.84rem;
}

/* ===========================================================================
 * Module 7 — Grands Crus (page-grands-crus.php).
 * ======================================================================== */

.gc-intro {
    color: #6B6B6B;
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.gc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
}

.gc-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.gc-filter span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B6B6B;
}

.gc-filter select,
.gc-filter input[type="search"] {
    padding: 6px 8px;
    border: 1px solid #E8E6E1;
    background-color: #FFFFFF;
    font-size: 0.9rem;
    color: #2C2C2C;
}

.gc-filter--search {
    flex: 1 1 220px;
}

.gc-filter--actions {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: auto;
}

.gc-count {
    font-size: 0.82rem;
    color: #999999;
    margin: 0 0 10px;
}

.gc-tablewrap {
    overflow-x: auto;
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
}

.gc-table {
    width: 100%;
    border-collapse: collapse;
}

.gc-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B6B6B;
    background-color: #FAFAF8;
    border-bottom: 1px solid #E8E6E1;
    padding: 10px 12px;
}

.gc-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #F0EEE9;
    font-size: 0.9rem;
    vertical-align: middle;
}

.gc-table tbody tr:hover {
    background-color: #FAFAF8;
}

.gc-th-center,
.gc-td-center {
    text-align: center;
}

.gc-th-num,
.gc-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #2C2C2C;
}

.gc-color {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #E8E6E1;
    background-color: #FAFAF8;
    color: #6B6B6B;
}

.gc-color--rouge {
    color: #7c1f1f;
    background-color: #fbeaea;
    border-color: #e6c0c0;
}

.gc-color--blanc {
    color: #8a7a2b;
    background-color: #fdf9e8;
    border-color: #ebe2b6;
}

.gc-color--rose,
.gc-color--rosé {
    color: #a04568;
    background-color: #fceef2;
    border-color: #e8c7d4;
}

.gc-color--effervescent {
    color: #1565c0;
    background-color: #e3f2fd;
    border-color: #b8d8f0;
}

/* ===========================================================================
 * Responsive mobile — Panier (page-commander) + Espace pro nav scrollable.
 * Wrapper de table scrollable horizontalement pour empecher tout overflow
 * de polluer le viewport (avec body overflow-x: clip en filet de securite).
 * Ajoute le 2026-05-21 (v1.0.63).
 * ======================================================================== */

.order-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Utility : labels boutons desktop vs mobile (utilise actuellement sur le
 * bouton "Commander pour ce client" dans la table Mes clients pour
 * raccourcir en "Commander" sur mobile). */
.btn__label--full {
    display: inline;
}
.btn__label--short {
    display: none;
}

@media (max-width: 768px) {

    /* === Densification commune des tables espace pro === */
    .order-table,
    .order-table th,
    .order-table td,
    .orders-table,
    .orders-table th,
    .orders-table td,
    .orders-table tfoot td,
    .pro-table,
    .pro-table th,
    .pro-table td {
        font-size: 0.8rem;
    }

    .order-table th,
    .order-table td,
    .orders-table th,
    .orders-table td,
    .orders-table tfoot td,
    .pro-table th,
    .pro-table td {
        padding: 0.4rem 0.3rem;
    }

    /* === Approche scroll horizontal pour tous les tableaux espace pro ===
     * SAUF Mes clients (.orders-table--clients) qui garde son responsive
     * a 3 colonnes (geree plus bas).
     *
     * Toutes les colonnes restent visibles, les tableaux gardent leur largeur
     * naturelle (min-width 700px), l'utilisateur scrolle horizontalement dans
     * le wrapper. Plus de masquage de colonnes, plus de width %, plus de
     * table-layout: fixed, plus de overflow: hidden sur les cellules.
     *
     * Ajoute en v1.0.69 — remplace l'approche aggressive 5-colonnes-cachees
     * qui causait des troncatures illisibles. */
    .order-table,
    .orders-table:not(.orders-table--clients) {
        min-width: 750px;
    }

    /* Nowrap sur les valeurs monetaires : sans cette regle, un montant
     * > 99 EUR (ex. "223,80 EUR") peut etre coupe en 2 lignes si une autre
     * colonne (PRODUIT long) pousse la cellule a se compresser sous sa
     * largeur naturelle (table-layout auto distribue dynamiquement). */
    .order-th-price,
    .order-td-price,
    .order-th-total,
    .order-td-total,
    .order-th-totalht,
    .order-td-totalht,
    .order-th-totalttc,
    .order-td-totalttc {
        white-space: nowrap;
    }

    /* ----- Espace pro : onglets scrollables horizontalement ----- */
    .pro-nav__inner {
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pro-nav__inner::-webkit-scrollbar {
        display: none;
    }

    .pro-nav__link {
        flex-shrink: 0;
        font-size: 0.7rem;
        padding: 0.5rem 0.6rem;
    }

    /* === Mes clients commercial (.orders-table--clients) — 3 colonnes visibles ===
     * ENSEIGNE 40 / CA TOTAL 25 / ACTIONS 35
     * Masquees : VILLE, CODE POSTAL, DERNIER ACHAT, COMMANDES (moins prioritaires
     * sur mobile que le coeur du tableau enseigne+CA+actions). */

    .orders-table--clients {
        table-layout: fixed;
        width: 100%;
    }

    .orders-table--clients .order-th-ville,
    .orders-table--clients .order-td-ville,
    .orders-table--clients .order-th-cp,
    .orders-table--clients .order-td-cp,
    .orders-table--clients .order-th-lastorder,
    .orders-table--clients .order-td-lastorder,
    .orders-table--clients .order-th-commandes,
    .orders-table--clients .order-td-commandes {
        display: none;
    }

    .orders-table--clients .order-th-enseigne,
    .orders-table--clients .order-td-enseigne {
        width: 40%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .orders-table--clients .order-th-catotal,
    .orders-table--clients .order-td-catotal {
        width: 25%;
        white-space: nowrap;
    }

    .orders-table--clients .order-th-actions,
    .orders-table--clients .order-td-actions {
        width: 35%;
        overflow: visible;
    }

    /* Sur mobile très étroit, autoriser le wrap si les 2 boutons ne tiennent
     * pas côte à côte (flex-wrap herité du desktop). */
    .orders-table--clients .order-td-actions .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* === Édition de commande admin (modification + BL) === */

.aoc-order-items-table input[type="text"],
.aoc-order-items-table input[type="number"] {
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    background: #fff;
}

.aoc-order-items-table select {
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    background: #fff;
    max-width: 100%;
}

.aoc-order-item-row--rupture td {
    text-decoration: line-through;
    opacity: 0.55;
}

/* La checkbox elle-même ne doit pas être barrée pour rester lisible/cliquable. */
.aoc-order-item-row--rupture td .aoc-item-rupture {
    text-decoration: none;
    opacity: 1;
}

#aoc-order-save-fb.is-error  { color: #b32d2e; }
#aoc-order-save-fb.is-ok     { color: #1d6f1d; }

/* === Toggle œil pour champs mot de passe (connexion + compte) === */

.aoc-pw-wrap {
    position: relative;
    display: block;
}

.aoc-pw-wrap > input[type="password"],
.aoc-pw-wrap > input[type="text"] {
    /* Réserve la place du bouton pour ne pas que le texte saisi passe dessous. */
    padding-right: 40px;
}

.aoc-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: #6B6B6B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color .15s ease, background .15s ease;
}

.aoc-pw-toggle:hover,
.aoc-pw-toggle:focus-visible {
    color: #3D3D3D;
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

.aoc-pw-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* === Panier : colonne Millésime + filtres dropdowns par colonne === */

.order-th-vintage,
.order-td-vintage {
    width: 70px;
    text-align: center;
    white-space: nowrap;
}

.order-th-format,
.order-td-format {
    width: 90px;
    text-align: center;
    white-space: nowrap;
    color: #6B6B6B;
    font-size: 0.9em;
}

/* Barre catégories (gauche) + toggle "commandés" + reset (droite). */
.order-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.order-filters__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-filters__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-filters__only-ordered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #2C2C2C;
    cursor: pointer;
}

.order-filters__reset {
    background: transparent;
    border: 1px solid #D6D2C8;
    color: #6B6B6B;
    padding: 6px 12px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.order-filters__reset:hover {
    color: #2C2C2C;
    border-color: #2C2C2C;
}

/* En-têtes filtrables : layout + bouton entonnoir + popover. */
.order-th-filterable {
    position: relative;
}

.order-th-label {
    margin-right: 4px;
}

.order-th-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    color: #9A9A9A;
    cursor: pointer;
    border-radius: 2px;
    line-height: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.order-th-filter-btn:hover {
    color: #2C2C2C;
    background: rgba(0, 0, 0, 0.05);
}

.order-th-filter-icon {
    width: 11px;
    height: 11px;
    display: block;
}

/* État "filtre actif" : icône + texte de l'en-tête en accent. */
.order-th-filterable.is-filter-active {
    color: #3D3D3D;
}

.order-th-filterable.is-filter-active .order-th-filter-btn {
    color: #C9B66B;  /* doré sobre, cohérent avec brand-sub */
}

/* Popover du filtre. Absolu sous le th. */
.order-th-filter-pop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    max-width: 280px;
    margin-top: 4px;
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    color: #2C2C2C;
}

.order-th-filter-pop[hidden] {
    display: none;
}

.order-filter-pop__list {
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 8px;
    padding: 2px 0;
}

.order-filter-pop__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.82rem;
    cursor: pointer;
}

.order-filter-pop__row input[type="checkbox"] {
    margin: 0;
}

.order-filter-pop__row .order-filter-input {
    flex: 1;
    min-width: 0;
}

.order-filter-pop__lbl {
    min-width: 28px;
    color: #6B6B6B;
    font-size: 0.75rem;
}

.order-filter-pop__range {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.order-filter-input {
    padding: 4px 6px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #2C2C2C;
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    border-radius: 2px;
    box-sizing: border-box;
}

.order-filter-input:focus {
    outline: none;
    border-color: #3D3D3D;
}

.order-filter-pop__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid #F0EEE9;
}

.order-filter-pop__clear,
.order-filter-pop__apply {
    background: transparent;
    border: 1px solid #D6D2C8;
    color: #6B6B6B;
    padding: 4px 10px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 2px;
}

.order-filter-pop__apply {
    background-color: #3D3D3D;
    border-color: #3D3D3D;
    color: #FFFFFF;
}

.order-filter-pop__clear:hover {
    color: #2C2C2C;
    border-color: #2C2C2C;
}

.order-filter-pop__apply:hover {
    background-color: #2C2C2C;
    border-color: #2C2C2C;
}

/* Boutons "Trier de A à Z / Z à A" et tri prix dans les dropdowns. */
.order-filter-pop__sort {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #F0EEE9;
}

.order-filter-pop__sort-btn {
    background: transparent;
    border: 1px solid #E8E6E1;
    color: #2C2C2C;
    padding: 5px 8px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 2px;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.order-filter-pop__sort-btn:hover {
    background-color: #FAFAF8;
    border-color: #2C2C2C;
}

/* Dropdown du Prix : 3 sections (≥, ≤, entre). */
.order-th-filter-pop--price {
    min-width: 240px;
}

.order-filter-pop__price {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.order-filter-pop__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.order-filter-pop__op {
    font-size: 0.75rem;
    color: #6B6B6B;
    flex: 1 1 100%;
}

.order-filter-pop__price-row--range .order-filter-pop__op {
    flex: 0 0 auto;
}

.order-filter-pop__price-row .order-filter-input {
    flex: 1;
    min-width: 60px;
    max-width: 80px;
}

.order-filter-pop__mini-apply {
    background-color: #3D3D3D;
    border: 1px solid #3D3D3D;
    color: #FFFFFF;
    padding: 3px 9px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    cursor: pointer;
    border-radius: 2px;
}

.order-filter-pop__mini-apply:hover {
    background-color: #2C2C2C;
}

/* Lien cliquable sur le nom du produit (ouvre modale fiche produit). */
.order-product-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.order-product-link:hover,
.order-product-link:focus {
    text-decoration: underline;
    color: #3D3D3D;
}

/* === Modale fiche produit (ouverte depuis le panier / Mes commandes) === */

.aoc-product-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.aoc-product-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 14px 14px 18px;
}

.aoc-product-modal__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #6B6B6B;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: color 0.15s ease;
}

.aoc-product-modal__close:hover {
    color: #2C2C2C;
}

.aoc-product-modal__content {
    /* La fiche produit (.pcard) injectée ici a déjà son propre style. */
}

.aoc-product-modal__content .pcard {
    margin: 0;
    box-shadow: none;
    border: none;
}

.aoc-product-modal__loading,
.aoc-product-modal__error {
    padding: 32px 0;
    text-align: center;
    color: #6B6B6B;
    font-size: 0.9rem;
}

.aoc-product-modal__error {
    color: #b32d2e;
}

body.aoc-product-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .aoc-product-modal {
        padding: 0;
        align-items: stretch;
    }
    .aoc-product-modal__box {
        max-width: none;
        border-radius: 0;
        min-height: 100vh;
    }
}

/* === Book : barre de filtres avancés === */

.book-filters {
    display: flex;
    flex-direction: column;     /* 2 lignes : catégories au-dessus, filtres avancés en dessous */
    gap: 10px;
    background-color: #FAFAF8;
    border: 1px solid #E8E6E1;
    padding: 10px 14px;
    margin: 0 0 22px;
    border-radius: 3px;
}

/* Ligne 1 par défaut (Book GD, 5 catégories) : tout sur une seule ligne,
   sans scroll, taille normale. */
.book-filters__cats {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

/* Variante Book caviste (14 catégories) : scroll horizontal car le bandeau
   est trop large pour tenir sur une ligne complète. */
.book-filters__cats--scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
    gap: 4px;
}
.book-filters__cats--scroll::-webkit-scrollbar { height: 4px; }
.book-filters__cats--scroll::-webkit-scrollbar-thumb { background: #D6D2C8; border-radius: 2px; }
.book-filters__cats--scroll .book-filter-cat {
    padding: 4px 8px;
    font-size: 0.65rem;
}

.book-filter-cat {
    background-color: #FFFFFF;
    border: 1px solid #E8E6E1;
    color: #3D3D3D;
    padding: 6px 10px;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.book-filter-cat:hover {
    background-color: #F5F2EC;
}

.book-filter-cat.is-active {
    background-color: #3D3D3D;
    border-color: #3D3D3D;
    color: #FFFFFF;
}

/* Ligne 2 : filtres avancés (appellations, couleurs, tri, BIO, reset),
   alignés à gauche, repartis sur plusieurs lignes si trop nombreux. */
.book-filters__advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
}

.book-filter-select {
    padding: 5px 8px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #2C2C2C;
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    border-radius: 2px;
    min-width: 0;
    width: 130px;
}

.book-filter-select:focus {
    outline: none;
    border-color: #3D3D3D;
}

/* Custom dropdown searchable (appellation). */
.book-filter-searchable {
    position: relative;
    width: 150px;
}

.book-filter-searchable__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #2C2C2C;
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
}

.book-filter-searchable__btn:hover,
.book-filter-searchable__btn:focus {
    border-color: #3D3D3D;
    outline: none;
}

.book-filter-searchable__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-filter-searchable__caret {
    font-size: 0.7em;
    color: #6B6B6B;
}

.book-filter-searchable__pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    min-width: 220px;
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    padding: 6px;
}

.book-filter-searchable__pop[hidden] {
    display: none;
}

.book-filter-searchable__search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    margin-bottom: 4px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #2C2C2C;
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    border-radius: 2px;
}

.book-filter-searchable__search:focus {
    outline: none;
    border-color: #3D3D3D;
}

.book-filter-searchable__list {
    max-height: 220px;
    overflow-y: auto;
}

.book-filter-searchable__opt {
    display: block;
    width: 100%;
    padding: 5px 8px;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #2C2C2C;
    text-align: left;
    cursor: pointer;
    border-radius: 2px;
}

.book-filter-searchable__opt:hover {
    background-color: #FAFAF8;
}

.book-filter-searchable__opt.is-active {
    background-color: #F0EEE9;
    color: #3D3D3D;
    font-weight: 600;
}

/* Variante full-width pour le select client du panier commercial. */
.book-filter-searchable--full {
    width: 100%;
    max-width: 480px;
}

.book-filter-searchable--full .book-filter-searchable__btn {
    padding: 8px 12px;
    font-size: 0.9rem;
}

.book-filter-searchable--full .book-filter-searchable__pop {
    max-width: 480px;
}

.book-filter-searchable--full .book-filter-searchable__list {
    max-height: 320px;
}

.aoc-client-opt__sub {
    color: #6B6B6B;
    font-size: 0.78rem;
    font-weight: normal;
}

/* Bouton Réinitialiser : aligné avec les autres contrôles de la barre. */
.book-filter-reset {
    background-color: #FFFFFF;
    border: 1px solid #D6D2C8;
    color: #3D3D3D;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.book-filter-reset:hover {
    background-color: #F0EEE9;
    border-color: #3D3D3D;
}

.book-section.is-hidden {
    display: none;
}

.pcard.is-hidden {
    display: none;
}

.book-filter-empty {
    text-align: center;
    color: #6B6B6B;
    font-style: italic;
    padding: 24px 0;
}

@media (max-width: 1024px) {
    /* En dessous de ~1024px (tablette / mobile), .book-filters__advanced
     * passe en wrap pour ne pas déborder. La barre catégories reste en
     * scroll horizontal (nowrap) — comportement identique desktop/mobile. */
    .book-filters__advanced {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .book-filters__advanced {
        width: 100%;
    }
    .book-filter-select,
    .book-filter-searchable {
        flex: 1;
        width: auto;
    }
}

/* ===========================================================================
 * Book mobile compactage — placé EN FIN DE FICHIER pour battre les
 * définitions desktop .pcard-* (cascade : position dans le fichier
 * l'emporte à spécificité égale, le @media n'ajoute pas de spécificité).
 * ======================================================================== */
@media (max-width: 768px) {
    .pgrid,
    .product-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .pcard-img-box {
        height: 180px;
    }
    .pcard-img-box img.pcard-bottle {
        max-height: 150px;
    }
    .pcard-body {
        padding: 0.8rem;
    }
    .pcard-name {
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
    }
    .pcard-app {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }
    .pcard-grapes {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }
    .pcard-tasting {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }
    .pcard-pairings {
        gap: 4px;
        margin-bottom: 0.3rem;
    }
    .pcard-pairings span {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    .pcard-paht {
        margin-bottom: 0.3rem;
    }
    .pcard-paht-value {
        font-size: 1rem;
    }
    .pcard-pvc {
        font-size: 0.72rem;
        margin-bottom: 0.3rem;
    }
    .pcard-argumentaire {
        font-size: 0.8rem;
        padding: 6px 8px;
        gap: 8px;
        margin-bottom: 0.3rem;
    }
    .pcard-argumentaire__icon {
        width: 26px;
        height: 26px;
        padding: 5px;
    }
    .pcard-argumentaire__text {
        font-size: 0.8rem;
    }
    .btn.aoc-add-cart-btn {
        font-size: 0.8rem;
        padding: 8px 14px;
    }
}

/* ===========================================================================
 * Corrections hero iPad/tablette (paysage + portrait) — placées en FIN de
 * fichier pour battre les définitions précédentes à spécificité égale
 * (la position dans le fichier l'emporte ; le @media n'ajoute pas de
 * spécificité). Cible aussi le desktop ≤ 1024px car iPad paysage = 1024px.
 * ======================================================================== */
@media (max-width: 1024px) {
    /* iOS Safari (incluant iPad) ne supporte pas correctement
     * background-attachment: fixed → l'image hero disparaît ou s'affiche mal.
     * On force scroll pour tous les héros à fond image. */
    .hero,
    .page-hero--image,
    .page-hero--approche,
    .page-hero--contact {
        background-attachment: scroll;
    }

    /* Page d'accueil : garantir que le fond hero-bordeaux.jpg s'affiche
     * en mode paysage iPad (viewport ~1024x768). On retombe sur cover
     * + center pour préserver le ratio et bien centrer la Place de la Bourse. */
    .hero {
        background-size: cover;
        background-position: center center;
        min-height: 60vh;
    }

    /* Notre approche : le hero était en background-size: 100% 100% qui,
     * combiné à background-attachment: fixed sur iPad, ne rendait que le
     * haut de l'image (clocher seul visible). On repasse en cover + on
     * descend le point de focus pour que le château + paysage soient
     * visibles. */
    .page-hero--approche,
    .page-hero--contact {
        background-size: cover;
        background-position: center 65%;
        min-height: 60vh;
    }
}

/* ===========================================================================
 * Espace blanc parasite sous le footer — la sticky-footer technique sur
 * .site-frame (min-height 100dvh + .site-main flex:1) est suffisante pour
 * coller le footer en bas. Les min-height calc(100vh - 90px) sur les
 * wrappers internes (.auth-page) créent un trou blanc supplémentaire
 * entre le contenu et le footer parce qu'ils additionnent leur hauteur à
 * celle déjà gérée par .site-frame. On les neutralise.
 * ======================================================================== */
.auth-page {
    min-height: 0;
}

/* .pro-wrapper a un bg différent (#F8F7F4) du body (#FFF), on garde son
 * min-height pour éviter une bande blanche visible entre la fin du
 * wrapper coloré et le footer. */

/* ===========================================================================
 * Bandeau navigation espace pro collant — reste visible quand on scrolle
 * dans une longue liste (Book, Mes commandes, Mes clients…). Se place
 * juste sous le .site-header (lui-même sticky à top:0, ~70px de haut sur
 * desktop, ~110px sur mobile à cause du stack vertical du flex column).
 * ======================================================================== */
/* Espace pro : le header public reste visible en haut de page (logo
 * AOC Sélection + menu Accueil / Notre approche / Contact / Espace pro)
 * mais n'est PAS sticky — il défile avec la page et sort de l'écran au
 * scroll. La .pro-nav prend alors le relais en sticky top:0. Pour revoir
 * le header, l'utilisateur remonte en haut de page. */
body:has(.pro-wrapper) .site-header {
    position: static;
}

/* Pro-nav sticky en haut : visible en permanence dès qu'on a scrollé
 * au-delà du header public. */
.pro-nav {
    position: sticky;
    top: 0;
    z-index: 900;
}

@media (max-width: 768px) {
    .pro-nav {
        top: 110px;
    }
}

/* ===========================================================================
 * Mes clients commercial — mobile : empile les boutons Commander/Modifier
 * verticalement pour éviter le débordement à droite de la colonne Actions
 * sur iPhone (la rangée flex nowrap les forçait hors champ).
 * ======================================================================== */
@media (max-width: 768px) {
    .orders-table--clients .order-td-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
    }

    .orders-table--clients .order-td-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ===========================================================================
 * Modale "Rattacher un client" sur Mes clients (commercial). Style sobre
 * cohérent avec les autres sections espace pro.
 * ======================================================================== */
.aoc-rattach-modal {
    background: #FFFFFF;
    border: 1px solid #E8E6E1;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 2px;
}

.aoc-rattach-modal[hidden] {
    display: none;
}

.aoc-rattach-results {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.aoc-rattach-list li:last-child {
    border-bottom: none !important;
}

/* ===========================================================================
 * Book filtres : largeur des selects — les valeurs précédentes (130/150px)
 * tronquaient les labels longs ("Toutes les couleurs", "Trier par…",
 * "Toutes les appellations"). On élargit pour que tout le texte tienne.
 * ======================================================================== */
.book-filter-select {
    width: auto;
    min-width: 180px;
}

.book-filter-searchable {
    width: auto;
    min-width: 200px;
}

/* ===========================================================================
 * Mes clients commercial — mobile : finitions iPhone.
 *   1. Sur mobile, seules 3 colonnes restent visibles (Enseigne / CA total /
 *      Actions). On masque les boutons filtre sauf sur Enseigne — c'est
 *      l'identifiant principal du commercial, et l'entonnoir de CA total
 *      tombait au bord droit de la colonne (text-align right) et donnait
 *      l'impression qu'il était sur Actions.
 *   2. Bouton "Commander" reste plein ; "Modifier"/"Détacher" passent en
 *      version courte (Modif./Détach.) via le système .btn__label--full
 *      /--short.
 *   3. Boutons en cellule Actions : taille réduite pour que les 3 boutons
 *      empilés ne débordent pas du conteneur 35% sur écran iPhone.
 * ======================================================================== */
@media (max-width: 768px) {
    .orders-table--clients .order-th-catotal .order-th-filter-btn,
    .orders-table--clients .order-th-catotal .order-sort-ind,
    .orders-table--clients .order-th-commandes .order-th-filter-btn {
        display: none;
    }

    /* Bascule des labels boutons : on cache la version longue, on affiche
     * la version courte. Couvre Modifier→Modif. et Détacher→Détach. */
    .btn__label--full  { display: none; }
    .btn__label--short { display: inline; }

    /* Taille plus serrée pour les 3 boutons d'action empilés. */
    .orders-table--clients .order-td-actions .btn {
        font-size: 0.65rem;
        padding: 0.25rem 0.4rem;
        line-height: 1.2;
        letter-spacing: 0.03em;
    }
}

/* ===========================================================================
 * Vérification de majorité (modale plein écran) + bandeau cookies RGPD.
 * Pilotés par assets/js/age-cookies.js. Markup dans footer.php.
 * ======================================================================== */

/* Empêche le scroll du body quand la modale âge est ouverte. */
body.aoc-modal-locked {
    overflow: hidden;
}

/* --- Modale âge ----------------------------------------------------------- */

.aoc-age-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* Polices héritées du body (Source Sans 3 / Cormorant Garamond). */
}

.aoc-age-gate[hidden] {
    display: none;
}

.aoc-age-gate__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    /* Léger flou en complément, retiré si perf insuffisante. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.aoc-age-gate__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background-color: #FFFFFF;
    color: var(--color-anthracite);
    border: 1px solid var(--color-border);
    padding: 2.5rem 2rem 2.25rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    animation: aoc-age-gate-in 0.35s ease-out;
}

@keyframes aoc-age-gate-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aoc-age-gate__brand {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-anthracite);
    margin: 0 0 0.5rem;
}

.aoc-age-gate__rule {
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto 1.5rem;
    background-color: #C9B66B;  /* doré sobre AOC */
}

.aoc-age-gate__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--color-anthracite);
    margin: 0 0 1rem;
}

/* Texte d'introduction (avant la question) : explique le perimetre
   d'usage du site. */
.aoc-age-gate__intro {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-anthracite);
    margin: 0 0 1.25rem;
}

/* Mention obligatoire alcool : desormais sous les boutons, donc le
   margin passe de "0 0 1.5rem" a "1.5rem 0 0" pour creer l'espace
   au-dessus plutot qu'en dessous. */
.aoc-age-gate__legal {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-muted);
    margin: 1.5rem 0 0;
    line-height: 1.5;
}

.aoc-age-gate__question {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-anthracite);
    margin: 0 0 1.75rem;
    font-weight: 500;
}

.aoc-age-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
}

.aoc-age-gate__btn-yes,
.aoc-age-gate__btn-no {
    width: 100%;
    /* Texte sur deux lignes (<br> entre la mention courte et l'action) :
       line-height resserree + padding vertical legerement reduit pour
       que le bouton ne devienne pas disproportionne. Padding horizontal
       reduit aussi (vs 2.25rem du .btn) pour laisser de la place a la
       ligne "acceder au site" / "quitter le site". */
    line-height: 1.3;
    padding: 0.85rem 1.25rem;
}

/* Force la seconde ligne ("acceder au site" / "quitter le site") a
   ne pas se couper en milieu d'expression. Si le bouton est trop
   etroit on aura un debordement visible (a corriger via min-width)
   plutot qu'un retour a la ligne sauvage. */
.aoc-age-gate__btn-line {
    display: inline-block;
    white-space: nowrap;
}

@media (min-width: 481px) {
    .aoc-age-gate__actions {
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem;
    }
    .aoc-age-gate__btn-yes,
    .aoc-age-gate__btn-no {
        width: auto;
        /* Largeur calibree pour "acceder au site" en uppercase +
           letter-spacing 0.18em (font-size 0.8125rem) qui mesure
           ~190px ; 230px laisse une marge confortable. */
        min-width: 230px;
    }
}

/* --- Bandeau cookies ----------------------------------------------------- */

.aoc-cookies-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99000;  /* au-dessus du sticky header (1000) mais sous l'age-gate (100000) */
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
    padding: 1rem 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.aoc-cookies-banner[hidden] {
    display: none;
}

.aoc-cookies-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.aoc-cookies-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.aoc-cookies-banner__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-anthracite);
    flex: 1 1 320px;
}

.aoc-cookies-banner__link {
    color: var(--color-anthracite);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.2em;
    margin-left: 0.25rem;
    font-weight: 500;
}

.aoc-cookies-banner__link:hover {
    text-decoration-color: var(--color-anthracite);
    opacity: 1;
}

.aoc-cookies-banner__actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Boutons : largeur min cohérente pour que "Tout accepter" et "Tout refuser"
   aient le même footprint visuel (CNIL : pas de dark pattern). */
.aoc-cookies-banner__btn { min-width: 120px; }

/* Vue principale / vue personnalisation : on toggle via [hidden]. */
.aoc-cookies-banner__view[hidden] { display: none; }
.aoc-cookies-banner__view { width: 100%; }

/* En-tête du panneau custom : titre à gauche, "Retour" à droite. */
.aoc-cookies-custom__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.aoc-cookies-banner__title {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-anthracite);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.aoc-cookies-back {
    background: none;
    border: none;
    color: #6B6B6B;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
}
.aoc-cookies-back:hover { color: var(--color-anthracite); text-decoration: underline; }

/* Sections de catégories : fond clair sur fond blanc, texte sombre. */
.aoc-cookies-cat {
    background: #FAFAF8;
    border: 1px solid #E8E6E1;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
}
.aoc-cookies-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.3rem;
}
.aoc-cookies-cat__name {
    color: var(--color-anthracite);
    font-size: 0.9rem;
}
.aoc-cookies-cat__locked {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B6B6B;
    font-weight: 600;
    background: #FFFFFF;
    border: 1px solid #E8E6E1;
    padding: 3px 8px;
}
.aoc-cookies-cat__desc {
    color: #4A4A4A;
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

/* Toggle switch (cookies analytiques). */
.aoc-cookies-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}
.aoc-cookies-toggle input { opacity: 0; width: 0; height: 0; }
.aoc-cookies-toggle__slider {
    position: absolute; inset: 0;
    background: #CCC;
    border-radius: 22px;
    transition: background-color .2s ease;
}
.aoc-cookies-toggle__slider::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.aoc-cookies-toggle input:checked + .aoc-cookies-toggle__slider { background: #C9B66B; }
.aoc-cookies-toggle input:checked + .aoc-cookies-toggle__slider::before { transform: translateX(20px); }
.aoc-cookies-toggle input:focus-visible + .aoc-cookies-toggle__slider {
    outline: 2px solid #C9B66B;
    outline-offset: 2px;
}

/* Actions en bas du panneau custom. */
.aoc-cookies-banner__actions--custom {
    justify-content: center;
    margin-top: 0.8rem;
}

@media (max-width: 640px) {
    .aoc-cookies-banner {
        padding: 0.85rem 0;
    }
    .aoc-cookies-banner__inner {
        gap: 0.75rem;
    }
    .aoc-cookies-banner__text {
        font-size: 0.82rem;
        flex: 1 1 100%;
    }
    .aoc-cookies-banner__actions {
        width: 100%;
        justify-content: flex-end;
    }
}