/* ============================================================================
   Elite-Bois — feuille de style de la page d'accueil

   Sommaire :
     1.  Jetons (couleurs, typo, mesures)        — :root
     2.  Base & utilitaires
     3.  Barre supérieure
     4.  Navigation + menus déroulants
     5.  Boutons
     6.  Hero + motif « bois de bout »
     7.  Verrou de prix (code postal)
     8.  Bande explicative
     9.  Gamme (cartes produits)
     10. Tableau de comparaison (specs)
     11. Livraison (étapes)
     12. Confiance
     13. FAQ
     14. Pied de page
     15. Responsive
     16. Préférence « moins d'animations »
   ========================================================================== */


/* ============================================================================
   1. JETONS
   ========================================================================== */
:root {
    /* --- Palette « bois chaud / chêne » ------------------------------------
       Thème readapté sur des tons de bois : fond lin chaud, texte brun café,
       accent ambre (au lieu de l'orange-braise), cartes chêne clair pour les
       sections alternées. Un seul accent de couleur pour les boutons/CTA —
       sans lui, un site tout en brun perd sa lisibilité d'action. */
    --bark: #2e2015;
    /* brun foncé chaud — petits éléments sombres délibérés (boutons, badges, icônes, bandeaux) */
    --bark-soft: #3f2c1c;
    /* un cran plus clair — survol des éléments --bark */
    --heartwood: #4a3222;
    /* brun chêne moyen — titres, liens, icônes */
    --kraft: #e9ddc9;
    /* neutre clair chêne — bordures/surfaces ponctuelles (peu utilisé) */
    --sand: #faf6ef;
    /* fond de page — LIN chaud */
    --sand-deep: #f0e4d0;
    /* chêne clair — sections alternées */
    --ember: #b5651d;
    /* ambre bois — accent, boutons principaux et CTA : seule couleur des actions */
    --ember-deep: #96531a;
    /* ambre foncé — survol des boutons */
    --resin: var(--ember);
    /* rehauts (sur-titres, icônes) — réutilise l'accent, lisible sur fond clair */
    --price: #1e8449;
    /* vert — couleur dédiée aux prix affichés, distincte des boutons */

    /* --- Texte --------------------------------------------------------- */
    --ink: #3d2b1f;
    /* texte principal — BRUN CAFÉ (au lieu de noir) */
    --ink-soft: #6b5c4d;
    /* texte secondaire — brun-gris chaud */
    --paper: #fffdf9;
    /* cartes/panneaux — blanc cassé chaud (léger contraste avec le fond lin) */
    --on-dark: #ffffff;
    /* texte sur un fond --bark/--heartwood (brun foncé) — reste blanc */
    --on-dark-soft: #d9cdbe;
    /* texte secondaire sur fond sombre — beige clair */

    /* --- Structure --------------------------------------------------- */
    --line: rgba(61, 43, 31, .15);
    /* filet fin chaud (dérivé de --ink) */
    --line-dark: rgba(255, 255, 255, .18);
    /* filet clair — pour les éléments qui restent sur fond sombre (boutons, icônes) */
    --radius: 4px;
    /* rayon commun — volontairement discret (bois brut, pas bonbon) */
    --radius-lg: 8px;
    --shadow: 0 20px 40px -24px rgba(61, 43, 31, .22);
    --wrap: 1180px;
    /* largeur maxi du contenu */
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    /* marge intérieure gauche/droite */
    --section-y: clamp(3.75rem, 9vw, 7rem);
    /* respiration verticale entre sections */

    /* --- Typographie ------------------------------------------------- */
    --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* ============================================================================
   2. BASE & UTILITAIRES
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--heartwood);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.08;
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}

/* Conteneur centré réutilisé partout */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Sur-titre en capitales espacées, en mono — la « voix data » de la marque */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 1rem;
}

/* Titre de section commun */
.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    letter-spacing: -.015em;
    max-width: 20ch;
}

/* Focus clavier visible et cohérent sur toute la page */
:where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ember);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ============================================================================
   3. SÉLECTEUR DE LANGUE (dans la nav — l'ancienne barre du haut a été retirée)
   ========================================================================== */
.lang-switch select {
    background: var(--paper);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: .35rem .5rem;
    font: inherit;
    font-size: .8rem;
    letter-spacing: .04em;
    cursor: pointer;
}

.lang-switch select:hover,
.lang-switch select:focus-visible {
    border-color: var(--ember);
}

.lang-switch option {
    color: var(--ink);
    background: var(--paper);
}

/* L'en-tête peut s'étendre plus large que le contenu des pages : sur grand
   écran, la nav a ainsi la place de tenir sur une ligne. */
/* Barre pleine largeur : le logo se cale au bord gauche et le menu profite de tout l'espace. */
.navbar__inner {
    max-width: none;
    padding-inline: clamp(1rem, 2.2vw, 2.75rem);
}

.brand__logo {
    width: 36px;
    height: 36px;
    flex: none;
}

@media (min-width: 1500px) {
    .navbar__inner {
        gap: 1rem;
    }

    .navbar .menu {
        margin-left: clamp(1.5rem, 4vw, 4.5rem);
        gap: .35rem;
    }

    .navbar .nav-link {
        padding: .5rem .7rem;
        font-size: .95rem;
    }
}


/* ============================================================================
   4. NAVIGATION + MENUS DÉROULANTS
   Même mécanique que la démo : le JS pose la classe .open sur le <li>,
   le CSS ci-dessous fait apparaître le panneau .dropdown-menu.
   ========================================================================== */
.navbar {
    background: var(--sand);
    border-bottom: 1px solid var(--line);
    position: sticky;
    /* la barre reste visible quand on descend */
    top: 0;
    z-index: 100;
}

.navbar__inner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .85rem;
}

/* --- Logo --- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.brand__accent {
    color: var(--heartwood);
}

/* --- Icône « compte » tout à droite de la nav --------------------------- */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .35rem .55rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    color: var(--heartwood);
    text-decoration: none;
    background: var(--paper);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nav-account:hover {
    background: var(--heartwood);
    border-color: var(--heartwood);
    color: var(--sand);
}

.nav-account__pic {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.nav-account__name {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* connecté : pastille pleine pour se distinguer */
.nav-account--on {
    background: var(--heartwood);
    border-color: var(--heartwood);
    color: var(--sand);
}

/* --- Icône panier + badge du nombre d'articles ------------------------- */
.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    color: var(--heartwood);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nav-cart:hover {
    background: var(--heartwood);
    border-color: var(--heartwood);
    color: var(--sand);
}

.nav-cart__pic {
    width: 23px;
    height: 23px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Animation du panier (survol + ajout d'un article) -------------------
   Reprend le principe du composant React fourni : le corps glisse, les roues
   tournent d'un demi-tour en avançant, les articles sautillent. Pur CSS. */
.nav-cart__pic .cart-upper,
.nav-cart__pic .cart-item,
.nav-cart__pic .cart-wheel {
    transform-box: view-box;
}

.nav-cart__pic .cart-wheel-left {
    transform-origin: 11px 41px;
}

.nav-cart__pic .cart-wheel-right {
    transform-origin: 37px 41px;
}

.nav-cart:hover .cart-upper,
.nav-cart:focus-visible .cart-upper,
.nav-cart--bump .cart-upper {
    animation: eb-cart-slide .6s ease-in-out;
}

.nav-cart:hover .cart-wheel,
.nav-cart:focus-visible .cart-wheel,
.nav-cart--bump .cart-wheel {
    animation: eb-cart-roll .6s ease-in-out;
}

.nav-cart:hover .cart-item,
.nav-cart:focus-visible .cart-item,
.nav-cart--bump .cart-item {
    animation: eb-cart-bob .4s ease-in-out;
}

@keyframes eb-cart-slide {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(7px);
    }
}

@keyframes eb-cart-roll {

    0%,
    100% {
        transform: translateX(0) rotate(0);
    }

    50% {
        transform: translateX(7px) rotate(180deg);
    }
}

@keyframes eb-cart-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2.5px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav-cart .cart-upper,
    .nav-cart .cart-wheel,
    .nav-cart .cart-item {
        animation: none !important;
    }
}

.nav-cart__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ember);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Liste des items --- */
.menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .1rem;
    row-gap: .2rem;
    /* petit espace après le logo, puis "auto" à droite : le menu occupe tout
       le milieu disponible et repousse le bloc panier/compte au bord */
    margin: 0 auto 0 1.25rem;
    padding: 0;
    flex-wrap: wrap;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .5rem .4rem;
    font-family: var(--font-body);
    font-size: .89rem;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--ember);
}

/* flèche ▼ des items à sous-menu (triangle CSS) */
.dropdown-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s ease;
}

.nav-item.open>.dropdown-toggle {
    color: var(--ember);
}

.nav-item.open>.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* --- Le panneau déroulant --- */
.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: .4rem;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 50;
}

.nav-item.open>.dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: block;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink);
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--sand-deep);
    color: var(--heartwood);
    outline: none;
}

/* --- Bouton hamburger (mobile) --- */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--ink);
}


/* ============================================================================
   5. BOUTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.3rem;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--ember {
    background: var(--ember);
    color: #fff;
}

.btn--ember:hover {
    background: var(--ember-deep);
}

.btn--outline {
    background: transparent;
    color: var(--heartwood);
    border-color: var(--heartwood);
}

.btn--outline:hover {
    background: var(--heartwood);
    color: var(--sand);
}

.btn--dark {
    background: var(--bark);
    color: var(--on-dark);
}

.btn--dark:hover {
    background: var(--bark-soft);
    color: #fff;
}

/* Bouton bordé clair, pour un fond sombre (photo du hero) où .btn--outline
   (bordure heartwood, quasi noire) ne se verrait pas. */
.btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.btn--outline-light:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

/* Bouton pilule (coins totalement arrondis) — variante ponctuelle pour les
   CTA du hero et des bandeaux, le reste du site garde --radius par défaut. */
.btn--pill {
    border-radius: 999px;
    padding: .85rem 1.6rem;
}

.btn--block {
    width: 100%;
}

/* --- Bouton en attente : roue crantée qui tourne devant le libellé --------- */
.btn--busy {
    cursor: progress;
    opacity: .92;
}

.btn--busy::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: btn-spin .6s linear infinite;
}

/* Roue crantée autonome (hors bouton), ex. page de confirmation d'e-mail en attente d'une réponse serveur. */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -0.15em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: btn-spin .6s linear infinite;
}

.spinner[hidden] {
    display: none;
}

/* Respecte "réduire les animations" : la roue reste visible mais fixe. */
@media (prefers-reduced-motion: reduce) {

    .btn--busy::before,
    .spinner {
        animation-duration: 2s;
    }
}

@keyframes btn-spin {
    to {
        transform: rotate(1turn);
    }
}


/* ============================================================================
   PAGES D'AUTHENTIFICATION (connexion, inscription, mot de passe oublié)
   ========================================================================== */
.auth {
    max-width: 420px;
    margin: 0 auto;
}

.auth .form-field:last-of-type {
    margin-bottom: 1.25rem;
}

.auth__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.auth__msg {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    background: var(--sand-deep);
    border-left: 3px solid var(--ember);
    font-size: .9rem;
    color: var(--ink);
}

.auth__msg[hidden] {
    display: none;
}

.auth__msg--ok {
    border-left-color: var(--heartwood);
}

.auth__resend-link {
    display: block;
    margin: .6rem 0 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--ember);
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
}

.auth__resend-link:disabled {
    opacity: .6;
    cursor: default;
}

.auth__hint {
    margin-top: 1.5rem;
    font-size: .82rem;
    color: var(--ink-soft);
    text-align: center;
}


/* ============================================================================
   PAGE « MON COMPTE » — deux colonnes : cartes de service + fiche client
   ========================================================================== */
.account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

/* --- Colonne gauche : les 4 cartes --- */
.account__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.account-card {
    display: flex;
    gap: 1rem;
    padding: 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.account-card:hover {
    border-color: var(--heartwood);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.account-card__icon {
    width: 40px;
    height: 40px;
    flex: none;
    fill: none;
    stroke: var(--heartwood);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-card__title {
    margin: 0 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.account-card__text {
    margin: 0;
    font-size: .88rem;
    color: var(--ink-soft);
}

/* --- Colonne droite : fiche client --- */
.account__aside {
    padding: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.account-id {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.account-avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--heartwood);
    display: grid;
    place-items: center;
}

.account-avatar svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--sand);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-id__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
}

.account-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.account-lines li {
    display: flex;
    gap: .55rem;
}

.account-lines span {
    white-space: pre-line;
}

.account-lines svg {
    width: 16px;
    height: 16px;
    margin-top: .18rem;
    flex: none;
    fill: none;
    stroke: var(--heartwood);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-fid {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.account-fid__title {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.account-fid__points {
    margin: 0;
    font-size: .9rem;
    color: var(--ink-soft);
}

.account-edit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.4rem;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ember);
    cursor: pointer;
    text-decoration: none;
}

.account-edit:hover {
    color: var(--ember-deep);
    text-decoration: underline;
}

/* --- Formulaire « Modifier les informations » (masqué par défaut) --- */
.account-form {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.account-form[hidden] {
    display: none;
}

.account-form .form-field {
    margin-bottom: .8rem;
}

.account__msg {
    margin: .5rem 0 0;
    padding: .7rem .9rem;
    border-radius: var(--radius);
    background: var(--sand-deep);
    border-left: 3px solid var(--ember);
    font-size: .85rem;
}

.account__msg[hidden] {
    display: none;
}

.account__msg--ok {
    border-left-color: var(--heartwood);
}

.account-logout {
    margin: 1.25rem 0 0;
}

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

    .account__aside {
        order: -1;
    }
}

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


/* ============================================================================
   PANIER — boutons « ajouter », sélecteur de quantité, tunnel de commande
   ========================================================================== */

/* --- Bouton d'action en bas de carte produit --- */
.card__actions {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.card__actions .btn {
    margin-top: 0;
    width: 100%;
}

.shop-row__btns {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* --- Retour visuel « Ajouté ✓ » --- */
.btn--added {
    background: var(--heartwood);
    border-color: var(--heartwood);
}

/* --- Sélecteur de quantité (− [n] +) --- */
.qty {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}

.qty__btn {
    width: 34px;
    border: 0;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--heartwood);
    cursor: pointer;
}

.qty__btn:hover {
    background: var(--sand-deep);
}

.qty__input {
    width: 44px;
    border: 0;
    border-inline: 1.5px solid var(--line);
    text-align: center;
    font-family: var(--font-mono);
    font-size: .95rem;
    background: #fff;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product__buy {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}

.product__buy .product__cta {
    margin-bottom: 0;
}

/* --- Fil d'étapes du tunnel de commande ---
   Toujours affiché dans .page-head (fond sombre) → couleurs claires. */
.checkout-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--ink-soft);
}

.checkout-steps__item {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.checkout-steps__item:not(:last-child)::after {
    content: "›";
    color: var(--line);
}

.checkout-steps__item a {
    color: inherit;
    text-decoration: none;
}

.checkout-steps__item a:hover {
    color: var(--resin);
}

.checkout-steps__item.is-current {
    color: var(--ink);
    font-weight: 600;
}

/* --- Panier vide --- */
.cart-empty {
    margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--sand-deep);
    border-left: 3px solid var(--ember);
    border-radius: var(--radius);
    font-size: 1rem;
}

.cart-empty__cta {
    margin: 1.2rem 0 0;
}

.cart-empty--ok {
    background: var(--sand-deep);
    border-left-color: var(--heartwood);
}

/* ============================================================================
   TUNNEL DE COMMANDE — adresse, livraison, confirmation
   ========================================================================== */
.checkout-form {
    max-width: 560px;
}

.checkout-form__legend {
    margin: 2rem 0 1rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.checkout-form__legend:first-child {
    margin-top: 0;
}

.checkout-form__note {
    margin-top: 1.25rem;
}

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

.city-field {
    position: relative;
}

/* --- Suggestions ville/code postal (auto-complétion) --- */
.city-suggest {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: .3rem 0 0;
    padding: .3rem;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
}

.city-suggest li {
    padding: .5rem .6rem;
    border-radius: var(--radius);
    font-size: .9rem;
    cursor: pointer;
}

.city-suggest li:hover,
.city-suggest li:focus {
    background: var(--sand-deep);
}

.city-suggest li b {
    font-family: var(--font-mono);
    color: var(--heartwood);
    margin-right: .4rem;
}

.city-suggest__empty {
    color: var(--ink-soft);
    cursor: default !important;
}

.city-suggest__empty:hover {
    background: none !important;
}

/* --- Choix du mode de livraison --- */
.delivery-option {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin-bottom: .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    cursor: pointer;
    max-width: 560px;
    transition: border-color .15s ease;
}

.delivery-option:has(input:checked) {
    border-color: var(--heartwood);
    background: var(--sand-deep);
}

.delivery-option input {
    margin-top: .3rem;
    accent-color: var(--heartwood);
    flex: none;
}

.delivery-option b {
    display: block;
    font-family: var(--font-display);
}

.delivery-option small {
    color: var(--ink-soft);
}

/* --- Récapitulatif de la confirmation --- */
.checkout-recap__block {
    margin: 0 0 .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}

.checkout-recap__edit {
    margin-left: .6rem;
    font-size: .82rem;
    color: var(--ember);
    text-decoration: none;
}

.checkout-recap__edit:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .checkout-form__row {
        grid-template-columns: 1fr;
    }
}

/* --- Page panier : tableau + récapitulatif --- */
.cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.cart-table th {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 2px solid var(--line);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
}

.cart-table td {
    padding: .9rem .7rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.cart-cell-prod {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.cart-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    flex: none;
}

.cart-prod {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.cart-prod a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.cart-prod a:hover {
    color: var(--ember);
}

.cart-prod small,
.cart-cell-unit small {
    color: var(--ink-soft);
}

.cart-cell-total {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--price);
    white-space: nowrap;
}

/* quantité en lecture seule (récapitulatif de confirmation, pas de stepper) */
.cart-cell-qty-ro {
    text-align: center;
    font-family: var(--font-mono);
}

.cart-remove {
    border: 0;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}

.cart-remove:hover {
    color: var(--ember);
}

.cart-clear {
    margin-top: 1rem;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: .85rem;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
}

.cart-clear:hover {
    color: var(--ember);
}

.cart-note {
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--ink-soft);
}

.cart__aside {
    padding: 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.cart__recap-title {
    margin: 0 0 .8rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.cart__recap {
    margin: 0 0 1.1rem;
}

.cart__recap div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.cart__recap dt {
    color: var(--ink-soft);
}

.cart__recap dd {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    text-align: right;
}

.cart__recap dd[data-cart-subtotal] {
    color: var(--price);
}

.cart__back {
    display: block;
    margin-top: .8rem;
    text-align: center;
    font-size: .85rem;
    color: var(--ink-soft);
}

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

@media (max-width: 620px) {

    .cart-table thead {
        display: none;
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: 100%;
    }

    .cart-table tr {
        padding: .6rem 0;
        border-bottom: 1px solid var(--line);
    }

    .cart-table td {
        border: 0;
        padding: .25rem .2rem;
    }
}


/* ============================================================================
   6. HERO
   ========================================================================== */
.hero {
    /* la photo redevient le fond plein cadre, voile sombre uniforme pour
       que le texte blanc reste lisible partout, texte centré par-dessus. */
    background:
        linear-gradient(rgba(61, 43, 31, .72), rgba(61, 43, 31, .74)),
        url("img/hero-bois.jpg") center / cover no-repeat;
    background-color: var(--bark);
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
    min-height: min(680px, 88vh);
    display: flex;
    align-items: center;
}

.hero__grid {
    display: block;
    width: 100%;
    text-align: center;
    padding-block: clamp(3rem, 8vw, 5.5rem);
    position: relative;
    z-index: 1;
}

.hero__body {
    max-width: 1100px;
    margin-inline: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin: 1.75rem 0 0;
}

.hero .eyebrow {
    color: var(--resin);
}

.hero__title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    letter-spacing: -.02em;
}

@media (min-width: 900px) {
    .hero__title { white-space: nowrap; }
}

.hero__lede {
    max-width: 78ch;
    margin: 1.4rem auto 0;
    color: var(--on-dark-soft);
    font-size: 1.1rem;
}

/* --- Animation d'entrée : chaque bloc apparaît en fondu + léger décalage
       vers le haut, l'un après l'autre. Désactivée si l'utilisateur préfère
       moins d'animations (cf. section 16). --- */
.hero__body>* {
    opacity: 0;
    animation: hero-reveal .9s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero__body>.eyebrow {
    animation-delay: .05s;
}

.hero__body>.hero__title {
    animation-delay: .2s;
}

.hero__body>.hero__lede {
    animation-delay: .38s;
}

.hero__body>.hero__actions {
    animation-delay: .5s;
}

.hero__body>.spec-chips {
    animation-delay: .74s;
}

@keyframes hero-reveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- rangée de repères sous le formulaire, séparés par des filets verticaux
       (comme les 3 chiffres-clés en bas d'un hero plein cadre) --- */
.spec-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 0;
    margin: 2rem 0 0;
    padding: 0;
    font-size: .85rem;
    color: var(--on-dark-soft);
}

.spec-chips li {
    padding: 0 1.75rem;
    border-left: 1px solid var(--line-dark);
}

.spec-chips li:first-child {
    border-left: none;
}

.spec-chips b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.spec-chips span {
    display: block;
    margin-top: .15rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}



/* ============================================================================
   7. VERROU DE PRIX (formulaire code postal)
   ========================================================================== */



/* dans le hero (fond photo sombre), le formulaire est centré et son texte
   d'accompagnement passe en clair — le champ lui-même reste blanc, comme
   une barre de recherche qui flotte sur la photo. */






/* --- Prix dans les cartes (affiché en permanence) --- */
.price {
    margin: 1.25rem 0 1.5rem;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    justify-content: center;
}

.price__real {
    color: var(--price);
}

/* Sur les cartes produit (grille catalogue), le prix prend plus de poids visuel. */
.card .price {
    margin: auto 0 1.1rem;
    padding-top: .9rem;
    gap: .1rem;
}

.card__ship {
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--price);
    font-size: .74rem;
    font-weight: 600;
}

.ship-free {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--price);
}

.product .ship-free {
    margin: .5rem 0 0;
}

.card .price__real {
    font-size: 1.3rem;
    white-space: nowrap;
}

.price__unit {
    font-size: .8rem;
    font-weight: 600;
}


/* ============================================================================
   8 bis. NOS UNIVERS (vitrine visuelle des 4 familles, plein cadre)
   ========================================================================== */
.univers {
    padding-block: var(--section-y);
}

.univers__intro {
    max-width: 60ch;
    margin: 1rem 0 0;
    color: var(--ink-soft);
}

.univers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.univers-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--sand-deep);
}

.univers-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.univers-card:hover img {
    transform: scale(1.06);
}

.univers-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(61, 43, 31, .88), rgba(61, 43, 31, 0) 58%);
}

.univers-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    color: #fff;
}

.univers-card__label b {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
}

.univers-card__label em {
    font-style: normal;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ember);
}

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

    .univers-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        aspect-ratio: 8 / 3;
    }
}

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

    .univers-card:last-child:nth-child(odd) {
        aspect-ratio: 4 / 3;
    }
}


/* ============================================================================
   9. CATALOGUE (cartes familles + liste de prix)
   ========================================================================== */
.range,
.catalogue {
    padding-block: var(--section-y);
}

.catalogue__intro {
    max-width: 60ch;
    margin: 1rem 0 0;
    color: var(--ink-soft);
}

/* décale les ancres pour ne pas passer sous la nav collante */
[id] {
    scroll-margin-top: 90px;
}

.range__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--line);
}

/* visuel produit en haut de carte : fond gris très clair pour que la photo
   se détache proprement d'une carte blanche sur une page blanche */
.card__top {
    position: relative;
    height: 210px;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sand-deep);
    display: flex;
}

/* Étiquette de famille posée sur la photo (repère rapide dans une grille mixte). */
.card__badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 1;
    background: var(--heartwood);
    color: var(--sand);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .32rem .65rem;
    border-radius: 999px;
}

.card__top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease;
}

.card:hover .card__top img {
    transform: scale(1.04);
}

.card__name {
    font-size: 1.35rem;
    font-family: var(--font-display);
}

.card__tag {
    margin: .5rem 0 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ember);
}

.card__desc {
    margin: .5rem 0 1rem;
    color: var(--ink-soft);
    font-size: .95rem;
}

.card__specs {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 .5rem;
    padding: .9rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.card__specs div {
    display: flex;
    flex-direction: column;
}

.card__specs dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft);
}

.card__specs dd {
    margin: .15rem 0 0;
    font-family: var(--font-mono);
    font-weight: 600;
}

.card .btn {
    margin-top: auto;
    /* colle le bouton en bas, cartes alignées */
}

/* --- Carte-famille cliquable (tout le bloc est un lien) --- */
.card--link {
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.card--link:hover {
    border-color: var(--heartwood);
    transform: translateY(-3px);
}

.catalogue__families {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    grid-template-columns: repeat(2, 1fr);
    /* 2 entrées : bois de chauffage, granulés de bois */
}

.card__cta {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ember);
}


/* ============================================================================
   BOUTIQUE FILTRABLE (<div data-shop>, rendue par site.js)
   ========================================================================== */
.shop {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}

.shop__filters-toggle {
    display: none;
}

.shop__filters {
    position: sticky;
    top: 90px;
}

.shop__filters-title {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 .6rem;
}

.shop-cats {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.shop-cats--sub {
    margin: .25rem 0 .4rem .35rem;
    border-left: 2px solid var(--line);
    padding-left: .45rem;
}

.shop-cat {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    font-size: .92rem;
}

.shop-cat:hover {
    background: var(--sand-deep);
}

.shop-cat.is-on {
    background: var(--heartwood);
    color: #fff;
}

.shop-cat--sub {
    font-size: .86rem;
}

.shop-cat__n {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: .78rem;
}

.shop-cat.is-on .shop-cat__n {
    color: rgba(255, 255, 255, .75);
}

.shop-lens {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0;
    margin: 0 0 1.5rem;
}

.shop-len {
    font: inherit;
    font-size: .82rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.shop-len.is-on {
    background: var(--heartwood);
    color: #fff;
    border-color: var(--heartwood);
}

.shop__reset {
    font: inherit;
    font-size: .85rem;
    background: none;
    border: 0;
    color: var(--ember);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* --- pastilles de catégories (au-dessus de la recherche) --- */
.shop__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.shop-pill {
    font: inherit;
    font-size: .85rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.shop-pill:hover {
    border-color: var(--heartwood);
}

.shop-pill.is-on {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}

/* --- barre d'outils --- */
.shop__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.shop__search {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.shop__search input {
    width: 100%;
    padding: .6rem 2.75rem .6rem .9rem;
    /* place pour la loupe à droite */
    font: inherit;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.shop__search input:focus {
    outline: none;
    border-color: var(--ember);
}

.shop__search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
}

.shop__search-btn:hover {
    color: var(--ember);
}

.shop__sort {
    font-family: var(--font-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.shop__sort select {
    font: inherit;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    padding: .5rem .6rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.shop__view {
    display: flex;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.shop__view button {
    display: grid;
    place-items: center;
    padding: .5rem .65rem;
    background: var(--paper);
    border: 0;
    cursor: pointer;
    color: var(--ink-soft);
}

.shop__view button[aria-pressed="true"] {
    background: var(--heartwood);
    color: #fff;
}

.shop__count {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.shop__empty {
    color: var(--ink-soft);
}

.shop__results.product-grid {
    margin-top: 0;
}

/* --- vue liste --- */
.shop-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.shop-row {
    display: grid;
    grid-template-columns: 72px 1fr auto auto;
    gap: 1rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .75rem 1rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.shop-row:hover {
    border-color: var(--line);
    box-shadow: var(--shadow);
}

.shop-row__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: var(--sand-deep);
    border-radius: var(--radius);
}

.shop-row__name {
    font-size: 1.05rem;
    margin: 0;
}

.shop-row__meta {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--ink-soft);
}

.shop-row__price {
    margin: 0;
    min-height: 0;
    flex-direction: row;
    gap: .3rem;
    align-items: baseline;
}

.shop-row__btn {
    white-space: nowrap;
}

.shop-row__name a,
.card__name a {
    color: inherit;
    text-decoration: none;
}

.shop-row__name a:hover,
.card__name a:hover {
    color: var(--ember);
}


/* ============================================================================
   FICHE PRODUIT (produit.html, rendue par site.js)
   ========================================================================== */
.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 5vw, 3.75rem);
    align-items: start;
}

.product__media img {
    width: 100%;
    border-radius: 14px;
    background: var(--sand-deep);
    border: 1px solid var(--line);
    padding: 1rem;
    box-sizing: border-box;
}

.product__price {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--price);
    margin: 0 0 1rem;
}

.product__blurb {
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
    max-width: 46ch;
}

.product__cta {
    margin-bottom: .75rem;
}

.product__note {
    font-size: .85rem;
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
}

/* Repères de confiance (grille de 4, comme sous le bouton d'achat) */
.product__trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin: 0 0 2rem;
}

.product__trust-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem .9rem;
    background: var(--sand-deep);
    border-radius: var(--radius);
    font-size: .82rem;
}

.product__trust-item b {
    color: var(--heartwood);
}

.product__trust-item span {
    color: var(--ink-soft);
}

/* Description longue (sections titrées) sous la fiche produit */
.product-desc {
    max-width: 68ch;
}

.product-desc__title {
    margin: 2rem 0 .4rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--heartwood);
}

.product-desc p {
    margin: 0;
    color: var(--ink-soft);
}

.product__spectitle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.page-head__inner .eyebrow a {
    color: inherit;
    text-decoration: none;
}

.page-head__inner .eyebrow a:hover {
    text-decoration: underline;
}


/* --- Liste de prix : un tableau par famille --- */
.pricelist__fam+.pricelist__fam {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.pricelist__title {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--heartwood);
}

.pricelist__note {
    margin: .75rem 0 1.1rem;
    color: var(--ink-soft);
    font-size: .9rem;
    max-width: 62ch;
}

/* le tableau réutilise .spec-table ; on ajuste juste la colonne prix */
.pricelist__table th[scope="row"] {
    white-space: nowrap;
}

.pricelist__price {
    white-space: nowrap;
}

/* dans une cellule, le prix s'affiche en ligne et compact */
.pricelist__price .price {
    flex-direction: row;
    align-items: baseline;
    gap: .4rem;
    min-height: 0;
    margin: 0;
    font-size: 1rem;
}

.pricelist__todeal {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--ink-soft);
}


/* ============================================================================
   10. TABLEAU DE COMPARAISON
   ========================================================================== */
.compare {
    background: var(--sand-deep);
    padding-block: var(--section-y);
}

.compare__inner {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.compare__note {
    color: var(--ink-soft);
    margin: 1rem 0 0;
    max-width: 38ch;
}

/* conteneur qui autorise le tableau à défiler horizontalement sur petit écran */
.spec-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.spec-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: .95rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

.spec-table thead th {
    font-family: var(--font-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sand);
    background: var(--bark);
}

.spec-table tbody th {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
}

.spec-table td {
    font-family: var(--font-mono);
    color: var(--ink-soft);
}

.spec-table__win {
    color: var(--ember) !important;
    font-weight: 600;
    background: rgba(181, 101, 29, .06);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
    border-bottom: 0;
}


/* ============================================================================
   11. LIVRAISON (étapes) — vraie séquence, donc numérotée
   ========================================================================== */
.steps {
    padding-block: var(--section-y);
}

.steps__list {
    list-style: none;
    counter-reset: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.step {
    padding-top: 1.5rem;
    border-top: 3px solid var(--heartwood);
}

.step__num {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ember);
    letter-spacing: .1em;
}

.step__name {
    font-size: 1.3rem;
    margin: .5rem 0 .6rem;
}

.step__desc {
    margin: 0;
    color: var(--ink-soft);
    font-size: .95rem;
}


/* ============================================================================
   12. CONFIANCE
   ========================================================================== */
.trust {
    background: var(--sand-deep);
    color: var(--ink);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

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

.trust__item {
    background: var(--sand);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
}

.trust__item--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.trust__item--link:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(181, 101, 29, .12);
    color: var(--ember);
    margin-bottom: 1rem;
}

.trust__big {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.trust__big span {
    color: var(--resin);
    font-size: 1.1rem;
}

.trust__label {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--ink-soft);
}


/* ============================================================================
   12 bis. NOTRE APPROCHE (image + argumentaire)
   ========================================================================== */
.approach {
    padding-block: var(--section-y);
}

.approach__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.approach__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.approach__body p {
    margin: 1rem 0 1.5rem;
    max-width: 52ch;
    color: var(--ink-soft);
}

.approach__list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.approach__list li {
    padding-left: 1.6rem;
    position: relative;
    font-size: .95rem;
}

.approach__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ember);
    font-weight: 700;
}

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

    .approach__media {
        order: -1;
    }
}


/* ============================================================================
   12 ter. BANDEAU CONTACT (avant le pied de page)
   ========================================================================== */
.cta-banner {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.cta-banner__inner {
    background: var(--heartwood);
    color: var(--sand);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.75rem, 5vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cta-banner__inner h2 {
    margin: 0 0 .4rem;
    color: var(--sand);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.cta-banner__inner p {
    margin: 0;
    color: var(--on-dark-soft);
    max-width: 46ch;
}


/* ============================================================================
   13. FAQ
   ========================================================================== */
.faq {
    padding-block: var(--section-y);
}

.faq__inner {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.faq__list {
    border-top: 1px solid var(--line);
}

.qa {
    border-bottom: 1px solid var(--line);
}

.qa summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 2rem 1.15rem 0;
    position: relative;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

.qa summary::-webkit-details-marker {
    display: none;
}

/* signe +/− à droite du résumé */
.qa summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: var(--ember);
}

.qa[open] summary::after {
    content: "–";
}

.qa p {
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
    max-width: 60ch;
}


/* ============================================================================
   14. PIED DE PAGE
   ========================================================================== */
.footer {
    background: var(--bark);
    color: var(--on-dark-soft);
    padding-block: clamp(2.75rem, 6vw, 4rem) 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2rem;
}

.footer .brand,
.footer .brand__accent {
    color: var(--on-dark);
}

.footer .brand__accent {
    color: var(--ember);
}

.footer__brand p {
    margin: 1rem 0 0;
    max-width: 34ch;
    font-size: .9rem;
    line-height: 1.7;
}

.footer__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-dark);
    margin: 0 0 1rem;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.footer__col a {
    color: var(--on-dark-soft);
    text-decoration: none;
    font-size: .9rem;
}

.footer__col a:hover {
    color: var(--on-dark);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: 2.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--line-dark);
    font-size: .8rem;
    color: var(--on-dark-soft);
}

.footer__legal p {
    margin: 0;
}

.footer__notes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
}


/* ============================================================================
   14 bis. PAGES INTÉRIEURES (bandeau, contenu, formulaires, dépôts, dialog)
   ========================================================================== */

/* --- Bandeau de titre en haut des pages intérieures --- */
.page-head {
    background: var(--sand-deep);
    color: var(--ink);
    border-bottom: 3px solid var(--ember);
}

.page-head__inner {
    padding-block: clamp(2.75rem, 7vw, 5rem);
}

.page-head .eyebrow {
    color: var(--resin);
}

.page-head h1 {
    color: var(--ink);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    letter-spacing: -.02em;
    max-width: 18ch;
}

.page-head .lede {
    margin: 1.1rem 0 0;
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: 1.1rem;
}

/* --- Section générique de page --- */
.page-section {
    padding-block: var(--section-y);
}

.page-section--alt {
    background: var(--sand-deep);
}

.page-section>.wrap>.eyebrow {
    margin-top: 0;
}

.subhead {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--heartwood);
    margin: 0 0 1.25rem;
    scroll-margin-top: 90px;
}

.subhead+.subhead,
.product-grid+.subhead {
    margin-top: clamp(2.5rem, 6vw, 3.75rem);
}

/* --- Figure illustrée dans une page --- */
.page-figure {
    margin: 0;
}

.page-figure--inset {
    margin: 1.75rem 0 2rem;
}

.page-figure img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.page-figure figcaption {
    margin-top: .6rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--ink-soft);
}


/* --- Texte long --- */
.prose {
    max-width: 68ch;
}

.prose--spaced {
    margin-top: 1.25rem;
}

/* quand .prose est aussi le conteneur .wrap : garder la largeur de page
   (gouttières normales) mais limiter la longueur de ligne de chaque enfant */
.wrap.prose {
    max-width: var(--wrap);
}

.wrap.prose>* {
    max-width: 68ch;
}

.prose h2 {
    font-size: 1.4rem;
    margin: 2rem 0 .6rem;
}

.prose p,
.prose li {
    color: var(--ink-soft);
}

.prose ul {
    padding-left: 1.1rem;
}

.prose li {
    margin: .3rem 0;
}

/* --- Grille de cartes produits (rendue par site.js) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

/* --- Rangée de réassurance (repères de confiance sous le lede d'une page-head) --- */
.page-head__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--ink-soft);
}

.page-head__badges li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.page-head__badges li::before {
    content: "✓";
    color: var(--ember);
    font-weight: 700;
}

/* --- Rangée de puces / raccourcis --- */
.chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-block;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--ink);
    text-decoration: none;
}

.chip:hover {
    border-color: var(--heartwood);
    color: var(--heartwood);
}

/* --- Panneau d'appel à l'action sombre (formulaire code postal hors hero) --- */
.cta-panel {
    background: var(--bark);
    color: var(--on-dark);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: 2rem;
    max-width: 34rem;
}

.cta-panel h2 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0 0 .4rem;
}

.cta-panel p {
    margin: 0 0 1rem;
    color: var(--on-dark-soft);
    font-size: .95rem;
}

/* --- Formulaire de contact --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.form-field {
    display: block;
    margin-bottom: 1rem;
}

.form-field span {
    display: block;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .35rem;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: .75rem .9rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--ember);
}

.form-note {
    font-size: .82rem;
    color: var(--ink-soft);
    margin-top: .5rem;
}

/* --- Champ mot de passe avec bouton « afficher / masquer » --- */
.password-field {
    position: relative;
}

.password-field input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: none;
    border-radius: var(--radius);
    color: var(--ink-soft);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--ink);
    background: var(--sand-deep);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* icône œil barré affichée seulement quand le mot de passe est visible */
.password-toggle__hide {
    display: none;
}

.password-toggle.is-visible .password-toggle__show {
    display: none;
}

.password-toggle.is-visible .password-toggle__hide {
    display: block;
}

.contact-aside {
    border-left: 3px solid var(--heartwood);
    padding-left: 1.25rem;
}

.contact-aside dt {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 1rem;
}

.contact-aside dd {
    margin: .2rem 0 0;
    font-weight: 500;
}






/* ============================================================================
   14 ter. BULLE ASSISTANT (composant <site-chat>, ajouté par site.js)
   ========================================================================== */

/* bouton rond flottant en bas à droite */
.chat-fab {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 200;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--bark);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px -8px rgba(61, 43, 31, .45);
    transition: transform .15s ease, background-color .15s ease;
}

.chat-fab:hover {
    background: var(--ember);
    transform: translateY(-2px);
}

/* on montre l'icône « fermer » seulement quand le panneau est ouvert */
.chat-fab__close {
    display: none;
}

site-chat.is-open .chat-fab__open {
    display: none;
}

site-chat.is-open .chat-fab__close {
    display: block;
}

/* le panneau */
.chat-panel {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: calc(56px + clamp(1rem, 3vw, 1.75rem) + .6rem);
    z-index: 200;
    width: min(92vw, 320px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: chat-in .16s ease-out;
}

@keyframes chat-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.chat-panel__head {
    background: var(--bark);
    color: var(--on-dark);
    padding: 1.1rem 1.2rem;
}

.chat-panel__title {
    margin: 0 0 .3rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

.chat-panel__text {
    margin: 0;
    font-size: .85rem;
    color: var(--on-dark-soft);
}

.chat-actions {
    display: flex;
    flex-direction: column;
}

.chat-action {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.2rem;
    text-decoration: none;
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.chat-action:first-child {
    border-top: 0;
}

.chat-action:hover {
    background: var(--sand-deep);
}

.chat-action__ico {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bark);
    color: var(--resin);
    font-size: 1rem;
}

.chat-action b {
    display: block;
    font-size: .92rem;
}

.chat-action small {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: .78rem;
}

.chat-note {
    margin: 0;
    padding: .7rem 1.2rem;
    background: var(--sand-deep);
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-soft);
}


/* ============================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {

    .compare__inner,
    .faq__inner,
    .product {
        grid-template-columns: 1fr;
    }

    .product__media {
        max-width: 460px;
    }


    .range__grid,
    .steps__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* --- boutique : la sidebar de filtres devient un panneau dépliable --- */
    .shop {
        grid-template-columns: 1fr;
    }

    .shop__filters-toggle {
        display: inline-block;
        font: inherit;
        padding: .55rem 1rem;
        border: 1.5px solid var(--line);
        border-radius: var(--radius);
        background: var(--paper);
        color: var(--ink);
        cursor: pointer;
        margin-bottom: 1rem;
    }

    .shop__filters {
        position: static;
        display: none;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        margin-bottom: 1.5rem;
        background: var(--paper);
    }

    .shop--filters-open .shop__filters {
        display: block;
    }
}

/* Menu burger dès la tablette (portrait comprise) : la barre complète ne tient pas en dessous de ~1080 px */
@media (max-width: 1140px) {

    /* --- La nav passe en menu déroulant vertical --- */
    .navbar__inner {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: block;
        margin-left: 0;
        order: 3;
    }

    .menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        margin: .5rem 0 0;
        display: none;
        order: 10;
    }

    .navbar.nav-open .menu {
        display: flex;
    }

    /* Panier + compte : toujours visibles dans la barre, entre le logo et le
       hamburger (ordre imposé par order:, le HTML reste identique au bureau). */
    .nav-cart {
        order: 1;
        margin-left: auto;
    }

    .nav-account {
        order: 2;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    .nav-account__name {
        display: none;
    }

    /* Langue : retirée de la barre, elle réapparaît DANS le menu quand il est ouvert. */
    .lang-switch {
        display: none;
        order: 11;
    }

    .navbar.nav-open .lang-switch {
        display: inline-flex;
        margin-top: .9rem;
    }

    .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: .85rem .25rem;
        border-bottom: 1px solid var(--line);
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 .5rem .5rem;
        display: none;
        background: transparent;
    }

    .nav-item.open>.dropdown-menu {
        display: block;
    }
}

@media (max-width: 720px) {

    .shop-row {
        grid-template-columns: 56px 1fr;
        grid-template-areas: "img body" "price price" "btn btn";
        gap: .5rem 1rem;
    }

    .shop-row__img {
        grid-area: img;
        width: 56px;
        height: 56px;
    }

    .shop-row__body {
        grid-area: body;
    }

    .shop-row__price {
        grid-area: price;
    }

    .shop-row__btn {
        grid-area: btn;
        justify-self: start;
    }



    /* --- Empilements --- */
    .range__grid,
    .steps__list,
    .trust__grid,
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .btn--ember {
        width: 100%;
    }

    .explain__inner {
        display: block;
    }

    .explain__q {
        margin-bottom: .4rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-aside {
        border-left: 0;
        border-top: 3px solid var(--heartwood);
        padding-left: 0;
        padding-top: 1rem;
    }
}

/* --- Liste de prix : les tableaux deviennent des blocs empilés --- */
@media (max-width: 560px) {

    .pricelist__table thead {
        /* on masque l'en-tête (chaque bloc porte ses propres libellés) */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .spec-table-wrap:has(.pricelist__table) {
        overflow: visible;
    }

    .pricelist__table,
    .pricelist__table tbody,
    .pricelist__table tr,
    .pricelist__table th,
    .pricelist__table td {
        display: block;
        width: 100%;
    }

    .pricelist__table {
        min-width: 0;
    }

    .pricelist__table tr {
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--line);
    }

    .pricelist__table th[scope="row"] {
        padding: 0 0 .2rem;
        border: 0;
        font-size: 1rem;
        white-space: normal;
    }

    .pricelist__table td {
        padding: .1rem 0;
        border: 0;
        white-space: normal;
    }

    .pricelist__price {
        margin-top: .35rem;
    }

    .pricelist__price .price {
        justify-content: flex-start;
    }
}


/* ============================================================================
   15 bis. AVIS CLIENTS (<div data-reviews>, rendue par site.js)
   ========================================================================== */
.reviews-summary {
    text-align: center;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: var(--sand-deep);
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
}

.reviews-summary__score {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--heartwood);
    margin: 0;
}

.reviews-summary__score span {
    font-size: 1.25rem;
    color: var(--ink-soft);
}

.reviews-summary__count,
.reviews-summary__empty {
    margin: .5rem 0 0;
    color: var(--ink-soft);
}

.stars {
    display: inline-flex;
    gap: .15rem;
    margin: .5rem 0;
    font-size: 1.15rem;
    color: var(--line);
}

.stars__star.is-filled {
    color: var(--ember);
}

.reviews-form-wrap {
    max-width: 32rem;
    margin: 0 auto 3rem;
}

.reviews-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.reviews-form--locked {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.reviews-form__title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
}

.star-rating {
    display: flex;
    gap: .3rem;
    margin-bottom: 1rem;
}

.star-rating__btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
}

.star-rating__btn.is-filled {
    color: var(--ember);
}

.reviews-form__textarea {
    width: 100%;
    padding: .75rem 1rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
    margin-bottom: 1rem;
}

.reviews-form__textarea:focus {
    border-color: var(--ember);
    outline: none;
}

.reviews-form__hint {
    margin: .7rem 0 0;
    font-size: .8rem;
    color: var(--ink-soft);
}

.reviews-form__msg {
    margin: .8rem 0 0;
    padding: .7rem 1rem;
    border-radius: var(--radius);
    background: var(--sand-deep);
    border-left: 3px solid var(--ember);
    font-size: .88rem;
}

.reviews-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.review-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.review-card__comment {
    margin: .5rem 0 1rem;
    color: var(--ink);
}

.review-card__meta {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-soft);
}


/* ============================================================================
   16. PRÉFÉRENCE « MOINS D'ANIMATIONS »
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* --- Pagination des listes de produits --- */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
}

.pager__btn {
    min-width: 42px;
    padding: .55rem .9rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.pager__btn:hover {
    border-color: var(--heartwood);
}

.pager__btn.is-current {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}

.pager__info {
    flex-basis: 100%;
    margin: .5rem 0 0;
    text-align: center;
    color: var(--ink-soft);
    font-size: .85rem;
}


/* --- Mobile : 2 produits par ligne (cartes compactes) --- */
@media (max-width: 600px) {

    .product-grid,
    .shop__results.product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .product-grid .card {
        padding: .7rem;
        border-radius: 12px;
    }

    .product-grid .card__top {
        height: 120px;
        margin-bottom: .7rem;
    }

    .product-grid .card__badge {
        top: .4rem;
        left: .4rem;
        padding: .2rem .45rem;
        font-size: .55rem;
    }

    .product-grid .card__ship {
        left: .4rem;
        bottom: .4rem;
        padding: .2rem .45rem;
        font-size: .62rem;
        gap: .2rem;
    }

    .product-grid .card__name {
        font-size: .88rem;
        line-height: 1.25;
    }

    .product-grid .card__tag {
        margin-top: .3rem;
        font-size: .68rem;
    }

    .product-grid .card__desc {
        display: none;
    }

    .product-grid .card .price {
        margin: auto 0 .6rem;
        padding-top: .6rem;
    }

    .card .price__real {
        font-size: 1.05rem;
    }

    .price__unit {
        font-size: .68rem;
    }

    .product-grid .card__actions .btn {
        padding: .55rem .4rem;
        font-size: .78rem;
        gap: .3rem;
    }
}


/* ============================================================================
   SUIVI DE COMMANDE (public) + ESPACE ÉQUIPE
   ========================================================================== */
.track-form {
    display: grid;
    gap: 1rem;
    max-width: 460px;
}

.track-form input[name="ref"] {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.track-hint {
    margin: 0;
    color: var(--ink-soft);
    font-size: .85rem;
}

.track-card {
    max-width: 760px;
    margin-top: 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.track-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.track-card__ref {
    margin: 0;
    font-size: 1.1rem;
}

.track-badge {
    margin: 0;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: var(--ember);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}

.track-badge--cancel {
    background: #a33a2a;
}

.track-cancel {
    margin: 1.25rem 0 0;
    padding: .8rem 1rem;
    background: #fbeeea;
    border-left: 3px solid #a33a2a;
    border-radius: 6px;
}

.track-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .25rem;
    margin: 1.75rem 0 .5rem;
    padding: 0;
    list-style: none;
}

.track-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    color: var(--ink-soft);
    font-size: .78rem;
}

.track-step::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--line);
}

.track-step:first-child::before {
    display: none;
}

.track-step.is-done::before,
.track-step.is-current::before {
    background: var(--ember);
}

.track-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sand-deep);
    border: 2px solid var(--line);
    font-weight: 600;
}

.track-step.is-done .track-step__dot {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}

.track-step.is-current .track-step__dot {
    background: #fff;
    border-color: var(--ember);
    color: var(--ember);
    box-shadow: 0 0 0 4px rgba(181, 101, 29, .18);
}

.track-step.is-current {
    color: var(--ink);
    font-weight: 600;
}

.track-card__title {
    margin: 1.75rem 0 .5rem;
    font-size: 1rem;
}

.track-history,
.track-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.track-history li,
.track-items li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}

.track-history li span {
    color: var(--ink-soft);
    font-size: .88rem;
}

.track-meta {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: .9rem;
}

@media (max-width: 560px) {
    .track-step__label {
        font-size: .66rem;
    }
}

.admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.admin-search {
    flex: 1 1 260px;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}

.admin-count {
    color: var(--ink-soft);
    font-size: .9rem;
}

.admin-list {
    display: grid;
    gap: 1rem;
}

.admin-order {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.admin-order header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
}

.admin-order header b {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--ember);
}

.admin-order header span {
    color: var(--ink-soft);
    font-size: .85rem;
}

.admin-order header strong {
    margin-left: auto;
}

.admin-order p {
    margin: .4rem 0;
}

.admin-order ul {
    margin: .4rem 0;
    padding-left: 1.1rem;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.admin-actions select {
    padding: .5rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}

.admin-actions label {
    font-size: .85rem;
}

.admin-flash {
    font-size: .85rem;
    color: var(--price);
}

.review-card__title {
    margin: .6rem 0 0;
    font-weight: 600;
}

.review-card__product {
    margin: .5rem 0 0;
    font-size: .8rem;
    color: var(--ember);
    font-weight: 600;
}

.reviews-more {
    grid-column: 1 / -1;
    margin: 1.5rem 0 0;
    text-align: center;
}

/* ============================================================================
   BANDEAU DE CONSENTEMENT AUX COOKIES
   ========================================================================== */
.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 300;
    /* au-dessus de la bulle assistant (200) : elle est masquée tant que le bandeau est ouvert */
    display: flex;
    justify-content: center;
    padding: 1rem clamp(1rem, 3vw, 1.75rem) calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform .3s ease;
}

.cookie-banner.is-open {
    transform: translateY(0);
}

.cookie-banner__inner {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 -10px 40px -10px rgba(61, 43, 31, .35), var(--shadow);
}

.cookie-banner__close {
    position: absolute;
    top: .7rem;
    right: .8rem;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: .9rem;
}

.cookie-banner__close:hover {
    background: var(--sand-deep);
    color: var(--ink);
}

.cookie-banner__text {
    margin: 0 1.5rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.cookie-banner__text a {
    color: var(--ember);
    font-weight: 600;
}

.cookie-banner__manage {
    margin: .6rem 0 0;
}

.cookie-banner__link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
}

.cookie-banner__prefs {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.cookie-banner__prefs[hidden] {
    display: none;
}

.cookie-pref {
    padding: .7rem .9rem;
    background: var(--sand);
    border-radius: 10px;
}

.cookie-pref__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    font-size: .9rem;
}

.cookie-pref p {
    margin: .3rem 0 0;
    color: var(--ink-soft);
    font-size: .8rem;
}

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: none;
}

.cookie-switch input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.cookie-switch span {
    position: absolute;
    inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: background-color .15s ease;
}

.cookie-switch span::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.cookie-switch input:checked+span {
    background: var(--ember);
}

.cookie-switch input:checked+span::before {
    transform: translateX(16px);
}

.cookie-switch input:disabled+span {
    opacity: .6;
    cursor: not-allowed;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.1rem;
}

.cookie-banner__actions .btn {
    flex: 1 1 140px;
}

.cookie-banner__actions [hidden] {
    display: none;
}

/* la bulle assistant s'efface tant que le bandeau cookies est ouvert (évite le chevauchement) */
body.has-cookie-banner .chat-fab,
body.has-cookie-banner .chat-panel {
    display: none;
}

@media (max-width: 480px) {
    .cookie-banner__actions .btn {
        flex-basis: 100%;
    }
}

/* ============================================================================
   PAIEMENT PAR VIREMENT (confirmation de commande) + FACTURE IMPRIMABLE
   ========================================================================== */
.btn--whatsapp {
    background: #25D366;
    color: #fff;
}

.btn--whatsapp:hover {
    background: #1ebe5b;
}

.payment-info {
    max-width: 640px;
    margin: 1.75rem 0;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.payment-info__title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.payment-info__rows {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: .9rem 1rem;
    background: var(--sand);
    border-radius: 10px;
}

.payment-info__rows div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.payment-info__rows dt {
    color: var(--ink-soft);
    font-size: .85rem;
}

.payment-info__rows dd {
    margin: 0;
    font-weight: 600;
}

.payment-info__mono {
    font-family: var(--font-mono);
}

.payment-info__ref {
    color: var(--ember);
}

.payment-info__hint,
.payment-info__step {
    margin: .75rem 0 0;
    font-size: .88rem;
    color: var(--ink-soft);
}

.payment-info__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
}

.track-invoice {
    margin: 1.25rem 0 0;
}

/* --- Facture imprimable (facture.html) --- */
.invoice-sheet {
    max-width: 760px;
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.invoice-sheet__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--ink);
}

.invoice-sheet__head p {
    margin: .1rem 0;
    font-size: .88rem;
    color: var(--ink-soft);
}

.invoice-sheet__brand {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink) !important;
}

.invoice-sheet__meta {
    text-align: right;
}

.invoice-sheet__meta p:first-child {
    font-size: 1.05rem;
    color: var(--ink) !important;
}

.invoice-sheet__label {
    margin: 1.5rem 0 .3rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ember);
}

.invoice-sheet__table {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
    font-size: .92rem;
}

.invoice-sheet__table th {
    text-align: left;
    padding: .6rem;
    background: var(--sand);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.invoice-sheet__table th:last-child,
.invoice-sheet__table td:last-child {
    text-align: right;
}

.invoice-sheet__table td {
    padding: .6rem;
    border-bottom: 1px solid var(--line);
}

.invoice-sheet__table tfoot td {
    border: 0;
    border-top: 2px solid var(--ink);
    font-size: 1.05rem;
    padding-top: .8rem;
}

.invoice-sheet__paid {
    margin: 1.5rem 0 0;
    font-weight: 600;
    color: var(--price);
}

.invoice-sheet__note {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--ink-soft);
}

.invoice-sheet__print {
    margin-top: 1.5rem;
}

@media print {

    site-header,
    site-footer,
    .page-head,
    .track-form,
    .invoice-sheet__print,
    .chat-fab,
    .chat-panel,
    .cookie-banner {
        display: none !important;
    }

    .invoice-sheet {
        border: 0;
        padding: 0;
        max-width: none;
    }
}