/* ============================================================
   Chaleur Vive — Feuille de style principale
   Palette Braise — variables définies dans header.php
   ============================================================ */

/* --- Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-corps);
    color: var(--gris-texte);
    background-color: var(--beige);
    line-height: 1.6;
}

/* ── Overlay de transition entre pages ── */
#cv-page-overlay {
    position: fixed;
    inset: 0;
    background: var(--beige);
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity .5s ease;
}
#cv-page-overlay.cv-overlay--sorti {
    opacity: 0;
}
#cv-page-overlay.cv-overlay--entrant {
    opacity: 1;
    pointer-events: all;
    transition: opacity .45s ease-in;
}

/* ── Keyframes globaux ── */
@keyframes cv-monte {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cv-monte-doux {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cv-apparait {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Hero (accueil) ── */
.hero-surtitre  { animation: cv-monte 1s    cubic-bezier(.22,1,.36,1)  .4s  both; }
.hero-titre     { animation: cv-monte 1.1s  cubic-bezier(.22,1,.36,1)  .7s  both; }
.hero-sous-titre{ animation: cv-monte 1s    cubic-bezier(.22,1,.36,1)  1s   both; }
.hero-actions   { animation: cv-monte .95s  cubic-bezier(.22,1,.36,1)  1.3s both; }
.hero-badges    { animation: cv-apparait .9s ease                       1.65s both; }

/* ── Page banner (toutes les pages internes) ── */
.page-banner .section-surtitre { animation: cv-monte-doux .7s  cubic-bezier(.22,1,.36,1) .15s both; }
.page-banner-titre              { animation: cv-monte-doux .85s cubic-bezier(.22,1,.36,1) .35s both; }
.page-banner-desc               { animation: cv-monte-doux .75s cubic-bezier(.22,1,.36,1) .55s both; }

/* ── Contenu principal (pages légales, boutique, FAQ, contact…) ── */
.page-info-contenu   { animation: cv-monte-doux .8s cubic-bezier(.22,1,.36,1) .45s both; }
.boutique-section    { animation: cv-monte-doux .8s cubic-bezier(.22,1,.36,1) .4s  both; }
.faq-liste           { animation: cv-monte-doux .8s cubic-bezier(.22,1,.36,1) .4s  both; }
.contact-section > .container { animation: cv-monte-doux .8s cubic-bezier(.22,1,.36,1) .35s both; }
.suivi-section       { animation: cv-monte-doux .8s cubic-bezier(.22,1,.36,1) .4s  both; }
.fp-section          { animation: cv-monte-doux .7s cubic-bezier(.22,1,.36,1) .2s  both; }

img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { color: inherit; text-decoration: none; }

/* --- Utilitaires ------------------------------------------ */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* --- Boutons ---------------------------------------------- */
.btn {
    display: inline-block;
    padding: .625rem 1.375rem;
    border-radius: 5px;
    font-family: var(--font-corps);
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    transition: opacity .18s ease, transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
    border: none;
    text-align: center;
    white-space: nowrap;
}
.btn:hover  { opacity: .92; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(31,26,23,.18); }
.btn:active { transform: scale(.96) translateY(0); box-shadow: none; opacity: 1; transition-duration: .08s; }

.btn-lg { padding: .875rem 2rem; font-size: 1rem; }
.btn-sm { padding: .4rem 1rem; font-size: .875rem; }

.btn-principal {
    background-color: var(--braise);
    color: var(--blanc);
}
.btn-secondaire {
    background-color: transparent;
    color: var(--braise);
    border: 2px solid var(--braise);
}
.btn-hero {
    padding: .7rem 1.5rem;
    font-size: .9rem;
}
.btn-whatsapp {
    background-color: transparent;
    color: #25D366;
    border: 2px solid #25D366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-whatsapp:hover {
    background-color: rgba(37,211,102,.08);
    border-color: #1db954;
    color: #1db954;
    opacity: 1;
}
.btn-blanc {
    background-color: var(--blanc);
    color: var(--braise);
    font-weight: 700;
}
.btn-contour-blanc {
    background-color: transparent;
    color: var(--blanc);
    border: 2px solid rgba(255,255,255,.75);
}
.btn-contour-blanc:hover { border-color: var(--blanc); opacity: 1; }

/* --- Navigation ------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--blanc);
    box-shadow: 0 1px 4px rgba(31,26,23,.08);
}

.nav-principale { position: relative; }

.nav-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-block: .75rem;
}

/* ── Logo ── */
.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    text-decoration: none;
}
.logo-img {
    height: 44px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.logo-textes {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1;
}
.logo-nom {
    font-family: var(--font-titre);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--anthracite);
    white-space: nowrap;
    line-height: 1;
    margin-top: 6px;
}
.logo-nom--braise { color: var(--braise); }
.logo-tagline {
    font-family: var(--font-corps);
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--gris-texte);
}

/* ── Liens de navigation ── */
.nav-liens {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-inline: auto;
    list-style: none;
}
.nav-liens a {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--gris-texte);
    transition: color .15s;
    white-space: nowrap;
    padding-bottom: 2px;
}
.nav-liens a:hover        { color: var(--braise); }
.nav-liens a.nav-actif    {
    color: var(--braise);
    font-weight: 700;
    border-bottom: 2px solid var(--braise);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-inline-start: auto;
}
.hamburger-barre {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--anthracite);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
    transform-origin: center;
}
/* Hamburger → croix quand le menu est ouvert */
.nav-toggle--ouvert .hamburger-barre:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle--ouvert .hamburger-barre:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle--ouvert .hamburger-barre:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menu mobile panneau latéral droit ── */
.cv-menu-mobile {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(300px, 85vw);
    background: var(--anthracite);
    border-left: 1px solid rgba(255,255,255,.1);
    z-index: 400; display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.cv-menu-mobile--ouvert { transform: translateX(0); }

.cv-menu-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 350;
}
.cv-menu-overlay--visible { display: block; }

.cv-menu-mobile__entete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}
.cv-menu-mobile__logo-img {
    height: 40px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.cv-menu-mobile__logo {
    font-family: var(--font-titre); font-weight: 700;
    font-size: 1.1rem; color: var(--beige); letter-spacing: .01em;
}
.cv-menu-mobile__fermer {
    background: none; border: none; color: rgba(242,232,220,.55);
    font-size: 1.6rem; cursor: pointer; line-height: 1;
    padding: .2rem .3rem; transition: color .15s;
}
.cv-menu-mobile__fermer:hover { color: var(--beige); }

.cv-menu-mobile__liens {
    display: flex; flex-direction: column; flex: 1; overflow-y: auto;
}
.cv-menu-mobile__liens a {
    display: block; padding: 1rem 1.5rem;
    font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(242,232,220,.7); border-bottom: 1px solid rgba(255,255,255,.07);
    transition: color .15s, background .15s;
}
.cv-menu-mobile__liens a:hover { color: var(--beige); background: rgba(255,255,255,.05); }
.cv-menu-mobile__suivi { color: var(--braise) !important; }

.cv-menu-mobile__pied {
    padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}

/* --- Titres ----------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-titre);
    color: var(--anthracite);
    line-height: 1.25;
}

/* --- Utilitaires de section ------------------------------- */
.section-titre {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 2.5rem;
}
.section-surtitre {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--braise);
    margin-bottom: .875rem;
    display: block;
}
.section-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.section-entete .section-titre { margin-bottom: 0; }
.lien-voir-tout {
    color: var(--braise);
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
}
.lien-voir-tout:hover { text-decoration: underline; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    padding-block: 6rem 5.5rem;
    overflow: hidden;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: url('/ChaleurVive/images/realisation/hero.jpg');
    background-size: cover;
    background-position: center;
    will-change: transform;
    z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: hero-ken-burns 20s ease-in-out infinite alternate; }
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15,10,8,.83) 0%, rgba(15,10,8,.62) 52%, rgba(15,10,8,.28) 100%);
    z-index: 1;
}
@keyframes hero-ken-burns {
    0%   { transform: scale(1)    translate(0,     0);    }
    100% { transform: scale(1.10) translate(-1.5%, 0.8%); }
}
.hero-inner {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    position: relative;
    z-index: 2;
}
.hero-contenu {
    flex: 1;
    min-width: 0;
}
.hero-visuel { display: none; }
.hero-surtitre {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--braise);
    margin-bottom: 1rem;
}
.hero-titre {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 1.25rem;
}
.hero-sous-titre {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(242,232,220,.88);
    margin-bottom: 2rem;
    max-width: 500px;
}
.hero-actions {
    display: flex;
    gap: .875rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.hero-badges {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.badge-confiance {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(242,232,220,.80);
}
.badge-confiance svg {
    color: var(--braise);
    flex-shrink: 0;
}

.hero-visuel {
    flex-shrink: 0;
    width: 420px;
    height: 420px;
}
.hero-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 24px 48px rgba(184,64,16,.35));
    border-radius: 50%;
}

/* ============================================================
   QUI NOUS SOMMES — nouvelle version
   ============================================================ */
.qs-section {
    background: var(--blanc);
    padding-block: 5.5rem;
}
.qs-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* ── Visuel gauche ── */
.qs-visuel {
    position: relative;
    padding: 24px 24px 40px 0;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.qs-visuel.cv-scroll-anim--visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.qs-contenu {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1) .2s, transform .9s cubic-bezier(.22,1,.36,1) .2s;
}
.qs-contenu.cv-scroll-anim--visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.qs-img-wrap {
    position: relative;
}
/* Forme beige décalée en haut-gauche */
.qs-visuel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -24px;
    right: 48px;
    bottom: 24px;
    background: var(--beige);
    border-radius: 20px;
    z-index: 0;
}
.qs-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    box-shadow: 0 16px 48px rgba(31,26,23,.14);
    transform-origin: center center;
    will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
    .qs-img { animation: qs-ken-burns 12s ease-in-out infinite alternate; }
}
@keyframes qs-ken-burns {
    0%   { transform: scale(1)    translate(0,    0);    }
    100% { transform: scale(1.07) translate(-1%, .8%); }
}
.qs-badge {
    position: absolute;
    bottom: -20px;
    left: 1.25rem;
    z-index: 2;
    background: var(--blanc);
    border-radius: 12px;
    padding: .875rem 1.125rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 8px 24px rgba(31,26,23,.13);
    max-width: 300px;
}
.qs-badge-icone {
    width: 40px; height: 40px;
    background: #FFF3EC;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--braise);
    flex-shrink: 0;
}
.qs-badge strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--anthracite);
    line-height: 1.2;
}
.qs-badge span {
    font-size: .775rem;
    color: var(--gris-texte);
    line-height: 1.3;
}

/* ── Contenu droit ── */
.qs-contenu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.qs-surtitre {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--braise);
}
.qs-surtitre::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2px;
    background: var(--braise);
    flex-shrink: 0;
}
.qs-titre {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--anthracite);
    margin: 0;
}
.qs-titre-braise { color: var(--braise); }
.qs-texte {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--gris-texte);
    margin: 0;
}
.qs-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(31,26,23,.09);
    margin-top: .5rem;
}
.qs-liste li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--anthracite);
    border-bottom: 1px solid rgba(31,26,23,.09);
}
.qs-liste li::before {
    content: '';
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9642C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .qs-inner         { grid-template-columns: 1fr; gap: 0; }
    .qs-visuel        { order: 2; padding: 24px 0 40px 24px; margin-top: 2rem; }
    .qs-visuel::before { left: 0; right: 24px; }
    .qs-contenu       { order: 1; }
    .qs-img           { height: 340px; }
    .qs-badge         { bottom: -20px; left: 1rem; }
}
@media (max-width: 480px) {
    .qs-section       { padding-block: 3rem; }
    .qs-visuel        { padding: 16px 0 40px 16px; }
    .qs-visuel::before { left: 0; right: 16px; border-radius: 14px; }
    .qs-img           { height: 280px; border-radius: 12px; }
    .qs-titre         { font-size: 1.625rem; }
    .qs-badge         { max-width: 240px; padding: .7rem .875rem; bottom: -18px; }
}

/* ============================================================
   CATÉGORIES
   ============================================================ */
.categories {
    padding-block: 5rem;
    overflow: hidden;
}

/* ── Carousel catégories (GPU transform) ── */
.cat-carousel {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    margin-top: 2.5rem;
    width: 100%;
}
.cat-carousel.is-dragging { cursor: grabbing; }
.cat-carousel__track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    will-change: transform;
    padding-bottom: .5rem;
}
.cat-carousel .categorie-carte {
    flex: 0 0 clamp(260px, 32vw, 400px);
    min-height: 300px;
}

/* Grille classique conservée pour les autres pages */
.categories-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.categorie-carte {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: none !important;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    transition: box-shadow .2s, transform .2s;
    border: 1px solid transparent;
    will-change: transform;
}
.categorie-carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(15,10,8,.28);
}

/* Image animée via pseudo-element */
.categorie-carte::before {
    content: '';
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .8s cubic-bezier(.25,.46,.45,.94);
    z-index: 0;
    will-change: transform;
}
.categorie-carte:hover::before { transform: scale(1.07); }

/* Dégradé pour lisibilité */
.categorie-carte::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12,8,5,.92) 0%,
        rgba(12,8,5,.48) 50%,
        rgba(12,8,5,.08) 100%
    );
    z-index: 1;
}

/* Image dynamique via propriété CSS (définie en inline style sur chaque carte) */
.categorie-carte::before {
    background-image: var(--cat-bg, linear-gradient(135deg, var(--marron-bois) 0%, var(--anthracite) 100%));
}

/* Contenu texte */
.categorie-carte-contenu {
    position: relative;
    z-index: 2;
    padding: 1.75rem 2rem;
}
.categorie-icone { display: none; }
.categorie-carte h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: .5rem;
}
.categorie-carte p {
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(242,232,220,.82);
    flex: unset;
}
.categorie-lien {
    display: inline-block;
    margin-top: .875rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--braise);
    transition: color .2s;
}
.categorie-carte:hover .categorie-lien { color: #fff; }

/* ============================================================
   PRODUITS POPULAIRES
   ============================================================ */
.produits-pop {
    background-color: var(--blanc);
    padding-block: 5rem;
}
.produits-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.produits-pop-footer {
    text-align: center;
    margin-top: 2.5rem;
}
.produits-pop-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.produit-carte {
    background-color: var(--blanc);
    border: 1px solid rgba(31,26,23,.09);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .22s, transform .22s;
    cursor: pointer;
}
.produit-carte:hover {
    box-shadow: 0 10px 30px rgba(31,26,23,.13);
    transform: translateY(-3px);
}
.produit-visuel {
    background-color: #F4EDE5;
    position: relative;
    padding-top: 72%;
    overflow: hidden;
}
.produit-cat-label {
    position: absolute;
    top: .75rem;
    left: .75rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--marron-bois);
    background-color: rgba(255,255,255,.85);
    padding: .2rem .55rem;
    border-radius: 3px;
    z-index: 1;
}
.produit-img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.produit-img-placeholder svg { width: 72px; height: 72px; }
.produit-carte-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.produit-carte:hover .produit-carte-img { transform: scale(1.05); }
.produit-infos {
    padding: .875rem 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    flex: 1;
}
.produit-nom {
    font-size: .9875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--anthracite);
}
.produit-prix {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--braise);
    font-family: var(--font-titre);
    margin-top: .375rem;
}
.produit-nom a {
    color: inherit;
    text-decoration: none;
}
.produit-nom a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ============================================================
   AVANTAGES
   ============================================================ */
.avantages {
    background-color: var(--anthracite);
    padding-block: 5.5rem;
}
.avantages-titre {
    color: var(--blanc);
    text-align: center;
    margin-bottom: 3.5rem;
}
.avantages-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}
.avantage-item {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
.avantage-icone {
    width: 48px;
    height: 48px;
    background-color: rgba(217,100,44,.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--braise);
    flex-shrink: 0;
}
.avantage-icone svg { width: 24px; height: 24px; }
.avantage-item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
}
.avantage-item p {
    font-size: .9375rem;
    line-height: 1.65;
    color: rgba(242,232,220,.68);
}

/* ============================================================
   LIVRAISON
   ============================================================ */
.bloc-livraison {
    background-color: var(--marron-bois);
    padding-block: 3.75rem;
}
.bloc-livraison-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.bloc-livraison-icone {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    background-color: rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
}
.bloc-livraison-icone svg { width: 38px; height: 38px; }
.bloc-livraison-texte h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    color: var(--blanc);
    margin-bottom: .625rem;
}
.bloc-livraison-texte p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,.8);
    max-width: 640px;
}

/* ============================================================
   PAIEMENT
   ============================================================ */
.bloc-paiement {
    background-color: var(--blanc);
    padding-block: 3.75rem;
    border-bottom: 1px solid rgba(31,26,23,.06);
}
.bloc-paiement-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: space-between;
}
.bloc-paiement-texte { max-width: 600px; }
.bloc-paiement-texte h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    margin-bottom: .625rem;
}
.bloc-paiement-texte p {
    font-size: 1rem;
    line-height: 1.7;
}
.bloc-paiement-icone {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    background-color: var(--beige);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--marron-bois);
}
.bloc-paiement-icone svg { width: 38px; height: 38px; }

/* ============================================================
   AVIS CLIENTS
   ============================================================ */
.avis {
    padding-block: 5rem;
    background-color: var(--beige);
}
.avis-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.avis-carte {
    background-color: var(--blanc);
    border-radius: 8px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.avis-etoiles {
    display: flex;
    gap: 2px;
}
.etoile { font-size: 1.125rem; line-height: 1; }
.etoile.pleine { color: var(--braise); }
.etoile.vide   { color: #D4C0A8; }
.avis-texte {
    font-size: .9375rem;
    line-height: 1.7;
    flex: 1;
}
.avis-auteur {
    font-size: .875rem;
    font-weight: 600;
    color: var(--anthracite);
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
}
.avis-verifie {
    font-size: .75rem;
    font-weight: 500;
    color: var(--marron-bois);
    background-color: rgba(107,66,38,.09);
    padding: .15rem .5rem;
    border-radius: 3px;
}
.avis-placeholder .avis-texte {
    color: #B8A898;
    font-style: italic;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
    background-color: var(--blanc);
    padding-block: 5rem;
}
.faq-inner {
    max-width: 780px;
    margin-inline: auto;
}
.faq-inner .section-titre { text-align: center; }
.faq-liste {
    display: flex;
    flex-direction: column;
}
.faq-item {
    border-bottom: 1px solid rgba(31,26,23,.1);
}
.faq-item:first-of-type {
    border-top: 1px solid rgba(31,26,23,.1);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.125rem;
    font-family: var(--font-corps);
    font-size: 1rem;
    font-weight: 600;
    color: var(--anthracite);
    cursor: pointer;
    list-style: none;
    gap: 1rem;
    user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: '+';
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--braise);
    flex-shrink: 0;
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}
.faq-reponse {
    padding-bottom: 1.25rem;
}
.faq-reponse p {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--gris-texte);
}
.faq-reponse a {
    color: var(--braise);
    text-decoration: underline;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
    background-color: var(--braise);
    padding-block: 5.5rem;
}
.cta-final-inner {
    text-align: center;
}
.cta-final h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--blanc);
    margin-bottom: 2rem;
    line-height: 1.3;
}
.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background-color: var(--anthracite);
    color: rgba(242,232,220,.72);
    margin-top: 0;
}
.footer-grille {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-block: 3.5rem;
}
/* Logo dans le footer (fond sombre) */
.footer-logo {
    margin-bottom: .875rem;
    display: inline-flex;
}
.footer-logo-nom {
    color: var(--blanc) !important;
}

.footer-logo-texte {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--blanc);
    display: block;
    margin-bottom: .875rem;
}
.footer-desc {
    font-size: .875rem;
    line-height: 1.7;
}
.footer-societe {
    margin-top: .75rem;
    font-style: normal;
    display: flex; flex-direction: column; gap: .2rem;
    font-size: .78rem; color: rgba(242,232,220,.55); line-height: 1.5;
}
.footer-titre {
    font-family: var(--font-corps);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--blanc);
    margin-bottom: 1.125rem;
    display: block;
}
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.footer-col a {
    font-size: .875rem;
    transition: color .15s;
}
.footer-col a:hover { color: var(--blanc); }

/* ── Liens contact footer ── */
.footer-contact-liste { gap: .875rem !important; }
.footer-contact-lien {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    color: rgba(242,232,220,.72);
    transition: color .15s;
    line-height: 1.4;
    word-break: break-all;
}
.footer-contact-lien:hover { color: var(--blanc); }
.footer-contact-lien--wa:hover { color: #4ade80; }
.footer-contact-icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--braise);
    transition: background .15s;
}
.footer-contact-lien:hover .footer-contact-icone { background: rgba(255,255,255,.14); }
.footer-contact-lien--wa .footer-contact-icone { color: #4ade80; }
.footer-contact-icone--wa { color: #4ade80 !important; }
.footer-bas {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-block: 1.25rem;
    font-size: .8125rem;
    color: rgba(242,232,220,.45);
}

/* ============================================================
   PAGE BANNER (boutique, catégorie)
   ============================================================ */
.page-banner {
    background-color: var(--blanc);
    padding-block: 3rem 2.5rem;
    border-bottom: 1px solid rgba(31,26,23,.07);
}
.page-banner-titre {
    font-size: clamp(1.625rem, 3.5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: .625rem;
    margin-top: .25rem;
}
.page-banner-desc {
    font-size: 1rem;
    color: var(--gris-texte);
    line-height: 1.6;
    max-width: 680px;
}
.breadcrumb-lien {
    color: var(--braise);
}
.breadcrumb-lien:hover { text-decoration: underline; }

/* ============================================================
   BOUTIQUE — filtres + grille 4 colonnes
   ============================================================ */
.boutique-section {
    padding-block: 3rem 5rem;
}
.filtres-cats {
    overflow: hidden;
    margin-bottom: 2.5rem;
}
.filtres-cats__track {
    display: flex;
    gap: .625rem;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    padding-bottom: .25rem;
}
.filtre-btn {
    display: inline-block;
    padding: .5rem 1.125rem;
    border-radius: 99px;
    font-size: .9rem;
    font-weight: 600;
    border: 2px solid rgba(31,26,23,.14);
    color: var(--gris-texte);
    background: var(--blanc);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.filtre-btn:hover {
    border-color: var(--braise);
    color: var(--braise);
}
.filtre-btn.actif {
    background-color: var(--braise);
    border-color: var(--braise);
    color: var(--blanc);
}
.produits-grille-4 {
    grid-template-columns: repeat(4, 1fr);
}
.produit-meta {
    font-size: .8375rem;
    color: var(--marron-bois);
    line-height: 1.4;
}
.badge-rupture {
    position: absolute;
    bottom: .875rem;
    left: .875rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--blanc);
    background-color: var(--anthracite);
    padding: .2rem .625rem;
    border-radius: 3px;
}
.vide-message {
    padding-block: 3rem;
    text-align: center;
    color: var(--gris-texte);
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-section { padding-block: 3.5rem 5rem; }

.contact-grille {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: start;
}
.contact-coords { display: flex; flex-direction: column; gap: .625rem; }
.contact-coords-titre {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--marron-bois); margin-bottom: .5rem;
}

.contact-canal {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid rgba(31,26,23,.12);
    background: var(--blanc);
    text-decoration: none; color: var(--anthracite);
    transition: border-color .15s, box-shadow .15s;
}
.contact-canal:hover { border-color: var(--braise); box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.contact-canal__icone {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(31,26,23,.12); color: var(--gris-texte);
    background: var(--beige);
}
.contact-canal__icone--wa { background: #25D366; border-color: #25D366; color: #fff; }
.contact-canal__texte strong { display: block; font-size: .875rem; font-weight: 700; }
.contact-canal__texte span   { font-size: .78rem; color: var(--gris-texte); }

.contact-adresse {
    margin-top: .5rem; padding: .875rem 1rem;
    background: var(--beige); border-left: 3px solid rgba(31,26,23,.12);
    font-size: .85rem; line-height: 1.65; color: var(--gris-texte);
}

.contact-formulaire {
    background: var(--blanc);
    border: 1px solid rgba(31,26,23,.1);
    padding: 2rem;
}
.contact-success {
    display: flex; align-items: flex-start; gap: .75rem;
    background: #e8f5e9; border: 1px solid #a5d6a7;
    padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
    border-radius: 4px;
}
.contact-success svg { color: #2e7d32; flex-shrink: 0; margin-top: .1rem; }
.contact-success strong { display: block; color: #1b5e20; font-size: .95rem; margin-bottom: .25rem; }
.contact-success p { font-size: .875rem; color: #2e7d32; margin: 0; }

.contact-form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: .875rem; }
.contact-champ { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .875rem; }
.contact-champ--full { grid-column: 1 / -1; }
.contact-label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--anthracite);
}
.contact-label abbr { text-decoration: none; color: var(--braise); }
.contact-input, .contact-textarea {
    font-family: var(--font-corps); font-size: .9rem;
    color: var(--anthracite); background: var(--beige);
    border: 1px solid rgba(31,26,23,.2);
    padding: .625rem .875rem; width: 100%; outline: none;
    transition: border-color .15s;
    border-radius: 0;
    -webkit-appearance: none; appearance: none;
}
.contact-input:focus, .contact-textarea:focus { border-color: var(--braise); }
.contact-input::placeholder, .contact-textarea::placeholder { color: rgba(74,63,56,.4); }
.contact-textarea { resize: vertical; min-height: 140px; }
.contact-aide { font-size: .75rem; color: var(--gris-texte); margin-top: .1rem; }
.contact-erreur-msg {
    display: flex; align-items: flex-start; gap: .5rem;
    background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.25);
    padding: .75rem 1rem; font-size: .8375rem; color: #a93226;
    margin-bottom: 1rem;
}

/* ============================================================
   PAGES LÉGALES / FAQ COMPLÈTE (mentions, cgv, confidentialité)
   ============================================================ */
.page-info-section { padding-block: 3.5rem 5rem; }
.page-info-contenu { max-width: 820px; }

.page-info-note {
    display: flex; align-items: flex-start; gap: .75rem;
    background: #fff8e1; border-left: 4px solid #f9a825;
    padding: .875rem 1.125rem; margin-bottom: 2.5rem;
    font-size: .875rem; line-height: 1.65; color: #5d4037;
}
.page-info-note svg { flex-shrink: 0; color: #f9a825; margin-top: .1rem; }

.page-info-contenu h2 {
    font-size: 1.125rem; font-weight: 700;
    margin: 2.5rem 0 .75rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(31,26,23,.1);
    color: var(--anthracite);
    line-height: 1.3;
}
.page-info-contenu h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.page-info-contenu h3 {
    font-size: .9375rem; font-weight: 700;
    margin: 1.5rem 0 .5rem; color: var(--anthracite);
}
.page-info-contenu p {
    font-size: .9375rem; line-height: 1.8;
    color: var(--gris-texte); margin: 0 0 .875rem;
}
.page-info-contenu ul, .page-info-contenu ol {
    padding-left: 1.5rem; margin: 0 0 .875rem;
}
.page-info-contenu li {
    font-size: .9375rem; line-height: 1.75;
    color: var(--gris-texte); margin-bottom: .3rem;
}
.page-info-contenu strong { color: var(--anthracite); }
.page-info-contenu a { color: var(--braise); text-decoration: underline; }
.page-info-date {
    font-size: .8rem; color: var(--gris-texte); font-style: italic; margin-bottom: 2rem;
}

/* ============================================================
   ANIMATIONS — PAGE PRODUIT
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .cv-anim-gauche {
        animation: cv-entree-gauche .75s cubic-bezier(0.16,1,0.3,1) .05s both;
    }
    .cv-stagger {
        opacity: 0;
        animation: cv-monte .6s cubic-bezier(0.16,1,0.3,1) var(--cv-delay,0s) both;
    }
    .cv-scroll-anim {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .65s cubic-bezier(0.16,1,0.3,1),
                    transform .65s cubic-bezier(0.16,1,0.3,1);
    }
    .cv-scroll-anim--visible { opacity: 1; transform: translateY(0); }
}
@keyframes cv-entree-gauche {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cv-monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.fp-ariane {
    background: var(--blanc);
    border-bottom: 1px solid rgba(31,26,23,.08);
    padding-block: .75rem;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gris-texte);
}
.fp-ariane__inner {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.fp-ariane a { color: var(--gris-texte); transition: color .15s; }
.fp-ariane a:hover { color: var(--braise); }
.fp-ariane__sep { color: rgba(31,26,23,.3); }
.fp-ariane__courant { color: var(--anthracite); font-weight: 700; }

/* ============================================================
   FICHE PRODUIT — SECTION PRINCIPALE
   ============================================================ */
.fp-section { padding-block: 3.5rem 5rem; }

.fp-grille {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 5rem;
    align-items: start;
}

/* ── Galerie ── */
.fp-galerie { display: flex; flex-direction: column; gap: .75rem; }

.fp-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(150deg, #EAE0D4, #D4C4AD);
    border: 1px solid rgba(31,26,23,.1);
    cursor: zoom-in;
}
.fp-img-principale {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.fp-img-wrap:hover .fp-img-principale { transform: scale(1.04); }

.fp-img-hint {
    position: absolute; bottom: .875rem; right: .875rem;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(31,26,23,.6); color: var(--beige);
    font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .3rem .65rem;
    opacity: 0; transition: opacity .2s;
}
.fp-img-wrap:hover .fp-img-hint { opacity: 1; }

/* Placeholder SVG quand pas d'image */
.fp-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #EAE0D4, #D4C4AD);
}
.fp-placeholder svg { width: 55%; height: 55%; opacity: .9; }

/* Miniatures */
.fp-miniatures {
    display: flex; gap: .5rem; flex-wrap: wrap;
    padding-top: .625rem;
    border-top: 1px solid rgba(31,26,23,.09);
}
.fp-mini {
    width: 72px; height: 72px; flex-shrink: 0; padding: 0;
    border: 2px solid rgba(31,26,23,.15);
    overflow: hidden; cursor: pointer;
    background: #EAE0D4;
    transition: border-color .15s;
}
.fp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-mini:hover, .fp-mini--actif { border-color: var(--braise); }

/* Badge indisponible sur l'image */
.fp-badge-rupture {
    position: absolute; top: .875rem; left: .875rem;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    background: var(--anthracite); color: var(--beige);
    padding: .25rem .75rem;
}

/* ── Colonne info ── */
.fp-info { display: flex; flex-direction: column; padding-top: .25rem; }

.fp-meta {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.fp-meta__cat {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gris-texte);
    border: 1px solid rgba(31,26,23,.18);
    padding: .18rem .6rem;
}
.fp-meta__cat a { color: inherit; transition: color .15s; }
.fp-meta__cat a:hover { color: var(--braise); }

.fp-titre {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 .625rem;
}

.fp-sep {
    border: none;
    border-top: 1px solid rgba(31,26,23,.1);
    margin-block: 1.25rem;
}

.fp-prix-zone {
    display: flex; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.625rem;
}
.fp-prix {
    font-family: var(--font-titre);
    font-size: 2.125rem; font-weight: 700;
    color: var(--anthracite); line-height: 1;
}
.fp-dispo {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #2e7d32;
}
.fp-rupture-badge {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    background: rgba(192,57,43,.1); color: #a93226;
    padding: .2rem .6rem;
}

/* ── Bouton Commander ── */
.fp-cta { margin-bottom: 1.25rem; }
.fp-cta__btn {
    display: flex; align-items: center; justify-content: center; gap: .625rem;
    width: 100%; padding: 1.125rem 1.5rem;
    background: var(--braise); color: var(--blanc);
    border: none; cursor: pointer;
    font-family: var(--font-corps);
    font-size: .875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fp-cta__btn:hover:not(:disabled) {
    background: #b84f1e;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(217,100,44,.38);
}
.fp-cta__btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.fp-cta__btn:disabled { opacity: .4; cursor: not-allowed; }
.fp-cta__note {
    font-size: .72rem; color: var(--gris-texte);
    text-align: center; margin: .6rem 0 0;
    letter-spacing: .02em; line-height: 1.5;
}

/* ── Caractéristiques ── */
.fp-specs { margin: 0 0 1.5rem; padding: 0; border-top: 1px solid rgba(31,26,23,.1); }
.fp-specs__titre {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gris-texte); padding: .9rem 0 .5rem; margin: 0;
}
.fp-spec {
    display: flex; gap: 1rem; align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(31,26,23,.08);
}
.fp-spec dt {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--gris-texte); min-width: 130px; flex-shrink: 0;
}
.fp-spec dd {
    font-size: .9rem; color: var(--anthracite);
    font-weight: 600; margin: 0;
}

/* ── Réassurance inline ── */
.fp-garanties {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(31,26,23,.08);
}
.fp-garantie {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--gris-texte);
}
.fp-garantie svg { color: var(--braise); flex-shrink: 0; }

/* ============================================================
   DESCRIPTION — pleine largeur sous la grille
   ============================================================ */
.fp-desc-section {
    background: var(--blanc);
    border-top: 1px solid rgba(31,26,23,.08);
    border-bottom: 1px solid rgba(31,26,23,.08);
    padding-block: 3.5rem;
}
.fp-desc-section .section-surtitre { margin-bottom: .75rem; }
.fp-desc-h2 {
    font-size: 1.375rem; font-weight: 700;
    margin: 0 0 1.25rem;
}
.fp-desc-texte {
    font-size: .9375rem; line-height: 1.8;
    color: var(--gris-texte); max-width: 70ch;
}

/* ============================================================
   BARRE CTA BAS DE PAGE
   ============================================================ */
.fp-cta-bas {
    background: #EAE0D4;
    border-top: 1px solid rgba(31,26,23,.1);
    padding-block: 1.75rem;
}
.fp-cta-bas__ligne {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
}
.fp-cta-bas__texte { display: flex; flex-direction: column; gap: .2rem; }
.fp-cta-bas__nom {
    font-family: var(--font-titre);
    font-size: 1.125rem; font-weight: 700; color: var(--anthracite);
}
.fp-cta-bas__note {
    font-size: .72rem; color: var(--gris-texte); letter-spacing: .03em;
}
.fp-cta-bas__btn {
    width: auto; flex-shrink: 0; padding: 1rem 2rem;
    white-space: nowrap;
}

/* ============================================================
   MODAL COMMANDER
   ============================================================ */
.fp-modal {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    pointer-events: none; opacity: 0;
    transition: opacity .22s ease;
}
.fp-modal--visible { pointer-events: all; opacity: 1; }

.fp-modal__fond {
    position: absolute; inset: 0;
    background: rgba(31,26,23,.72);
}
.fp-modal__boite {
    position: relative; z-index: 1;
    background: var(--beige);
    border: 1px solid rgba(31,26,23,.12);
    padding: 2.5rem;
    width: 100%; max-width: 460px;
    box-shadow: 0 32px 80px rgba(0,0,0,.3);
    transform: translateY(14px);
    transition: transform .28s cubic-bezier(.22,.68,0,1.2);
}
.fp-modal--visible .fp-modal__boite { transform: translateY(0); }

.fp-modal__fermer {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; cursor: pointer;
    color: var(--gris-texte); padding: .35rem;
    transition: color .15s;
}
.fp-modal__fermer:hover { color: var(--anthracite); }

.fp-modal__entete { margin-bottom: 1.75rem; }
.fp-modal__surtitre {
    display: block;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--braise); margin-bottom: .625rem;
}
.fp-modal__titre { font-size: 1.3rem; margin: 0 0 .625rem; line-height: 1.2; }
.fp-modal__sous-titre {
    font-size: .875rem; color: var(--gris-texte);
    margin: 0; line-height: 1.65;
}

.fp-modal__actions { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }

.fp-modal__wa {
    display: flex; align-items: center; gap: 1rem;
    background: #25D366; color: #fff; text-decoration: none;
    padding: 1.1rem 1.4rem;
    transition: background .18s ease, transform .18s ease;
}
.fp-modal__wa:hover { background: #1da851; transform: translateY(-1px); }
.fp-modal__wa strong { display: block; font-size: .88rem; font-weight: 700; }
.fp-modal__wa small  { font-size: .72rem; opacity: .88; margin-top: .1rem; display: block; }

.fp-modal__contact {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid rgba(31,26,23,.18);
    color: var(--anthracite); text-decoration: none;
    padding: 1rem 1.4rem;
    background: var(--blanc);
    transition: border-color .18s ease;
}
.fp-modal__contact:hover { border-color: var(--anthracite); }
.fp-modal__contact strong { display: block; font-size: .88rem; font-weight: 600; }
.fp-modal__contact small  { font-size: .72rem; color: var(--gris-texte); margin-top: .1rem; display: block; }

.fp-modal__pied {
    display: flex; align-items: center; gap: .45rem;
    font-size: .68rem; color: var(--gris-texte);
    letter-spacing: .03em;
}
.fp-modal__pied svg { color: var(--braise); flex-shrink: 0; }

/* ============================================================
   FORMULAIRE DE COMMANDE (dans modal fp-modal)
   ============================================================ */
.fp-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }

.fp-form-erreur {
    display: flex; align-items: flex-start; gap: .625rem;
    background: rgba(192,57,43,.08);
    border: 1px solid rgba(192,57,43,.3);
    padding: .75rem 1rem;
    margin-bottom: .25rem;
}
.fp-form-erreur svg { color: #a93226; flex-shrink: 0; margin-top: .1rem; }
.fp-form-erreur p { font-size: .8375rem; color: #a93226; margin: 0; line-height: 1.5; }
.fp-form-erreur p + p { margin-top: .25rem; }

.fp-form-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.fp-form-champ { display: flex; flex-direction: column; gap: .3rem; }

.fp-form-label {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--anthracite);
}
.fp-form-label abbr { text-decoration: none; color: var(--braise); }

.fp-form-champ input[type="text"],
.fp-form-champ input[type="email"],
.fp-form-champ input[type="tel"],
.fp-form-champ input[type="number"] {
    font-family: var(--font-corps);
    font-size: .9rem;
    color: var(--anthracite);
    background: var(--blanc);
    border: 1px solid rgba(31,26,23,.22);
    padding: .6rem .875rem;
    width: 100%;
    transition: border-color .15s;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.fp-form-champ input:focus { border-color: var(--braise); }
.fp-form-champ input::placeholder { color: rgba(74,63,56,.4); }

.fp-form-aide {
    font-size: .73rem; color: var(--gris-texte); line-height: 1.4;
}
.fp-form-aide em { font-style: normal; font-weight: 600; }

/* Quantité +/− */
.fp-form-qte {
    display: flex; align-items: stretch;
    border: 1px solid rgba(31,26,23,.22);
    width: fit-content;
}
.fp-form-qte__btn {
    background: #EAE0D4; border: none;
    width: 2.25rem; font-size: 1.1rem; line-height: 1;
    color: var(--anthracite); cursor: pointer;
    font-family: var(--font-corps);
    transition: background .15s;
    flex-shrink: 0;
}
.fp-form-qte__btn:hover { background: #D9C8B4; }
.fp-form-qte input[type="number"] {
    border: none; border-left: 1px solid rgba(31,26,23,.15);
    border-right: 1px solid rgba(31,26,23,.15);
    width: 4rem; text-align: center;
    padding: .6rem .25rem;
    -moz-appearance: textfield;
}
.fp-form-qte input[type="number"]::-webkit-inner-spin-button,
.fp-form-qte input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.fp-form-qte input:focus { border-color: rgba(31,26,23,.15); box-shadow: none; }

/* Radios mode de contact */
.fp-form-radios { display: flex; gap: .625rem; }
.fp-form-radio {
    display: flex; align-items: center; gap: .4rem;
    font-size: .875rem; cursor: pointer;
    border: 1px solid rgba(31,26,23,.2);
    padding: .45rem .875rem;
    background: var(--blanc);
    transition: border-color .15s, background .15s;
    user-select: none;
}
.fp-form-radio:has(input:checked) {
    border-color: var(--braise);
    background: rgba(217,100,44,.06);
}
.fp-form-radio input[type="radio"] {
    width: 15px; height: 15px; accent-color: var(--braise);
    cursor: pointer; flex-shrink: 0;
}
.fp-form-radio span { font-weight: 500; color: var(--anthracite); }

/* Section adresse (details/summary) */
.fp-form-details {
    border: 1px solid rgba(31,26,23,.13);
}
.fp-form-details-titre {
    display: flex; align-items: center; justify-content: space-between;
    padding: .625rem .875rem;
    font-size: .8rem; font-weight: 600; color: var(--anthracite);
    cursor: pointer; user-select: none; list-style: none;
}
.fp-form-details-titre::-webkit-details-marker { display: none; }
.fp-form-details-titre::after {
    content: '+'; font-size: 1.1rem; font-weight: 300;
    color: var(--braise); line-height: 1; transition: transform .2s;
}
.fp-form-details[open] .fp-form-details-titre::after { transform: rotate(45deg); }
.fp-form-opt {
    font-size: .65rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--gris-texte);
    border: 1px solid rgba(31,26,23,.15);
    padding: .1rem .45rem; margin-left: auto; margin-right: .5rem;
}
.fp-form-details-corps {
    padding: 0 .875rem .875rem;
    display: flex; flex-direction: column; gap: .75rem;
}

/* Bouton soumettre */
.fp-form-submit {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: 1rem 1.5rem;
    background: var(--braise); color: var(--blanc); border: none;
    font-family: var(--font-corps); font-size: .875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
    transition: background .18s, transform .18s, box-shadow .18s;
    margin-top: .25rem;
}
.fp-form-submit:hover {
    background: #b84f1e; transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(217,100,44,.35);
}
.fp-form-submit:active { transform: translateY(0); box-shadow: none; }

/* ============================================================
   PAGE SUIVI DE COMMANDE
   ============================================================ */

/* Bannière "nouvelle commande" */
.suivi-nouveau {
    background: #e8f5e9;
    border-bottom: 1px solid #a5d6a7;
    padding-block: 1rem;
}
.suivi-nouveau__inner {
    display: flex; align-items: flex-start; gap: 1rem;
}
.suivi-nouveau__icone {
    flex-shrink: 0; width: 48px; height: 48px;
    background: #c8e6c9; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #2e7d32;
}
.suivi-nouveau__titre {
    display: block; font-size: 1rem; font-weight: 700;
    color: #1b5e20; margin-bottom: .25rem;
}
.suivi-nouveau__texte { font-size: .875rem; color: #2e7d32; margin: 0; line-height: 1.5; }

/* Formulaire de recherche */
.suivi-recherche-section {
    background: var(--blanc);
    border-bottom: 1px solid rgba(31,26,23,.08);
    padding-block: 2rem;
}
.suivi-form { max-width: 560px; }
.suivi-form__label {
    display: block;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--anthracite); margin-bottom: .5rem;
}
.suivi-form__groupe { display: flex; gap: .5rem; }
.suivi-form__input {
    flex: 1; font-family: var(--font-corps);
    font-size: 1rem; font-weight: 600;
    color: var(--anthracite); background: var(--beige);
    border: 2px solid rgba(31,26,23,.18);
    padding: .75rem 1rem;
    letter-spacing: .06em; text-transform: uppercase;
    outline: none; transition: border-color .15s;
}
.suivi-form__input:focus { border-color: var(--braise); }
.suivi-form__input--erreur { border-color: #c0392b; }
.suivi-form__btn {
    display: flex; align-items: center; gap: .5rem;
    background: var(--braise); color: var(--blanc); border: none;
    font-family: var(--font-corps); font-size: .875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .75rem 1.5rem; cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.suivi-form__btn:hover { background: #b84f1e; }
.suivi-form__erreur {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8375rem; color: #a93226; margin-top: .5rem;
}
.suivi-form__erreur svg { flex-shrink: 0; }

/* Bloc résultat */
.suivi-resultat { padding-block: 3rem 5rem; }

/* En-tête commande */
.suivi-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; flex-wrap: wrap;
    gap: 1rem; margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(31,26,23,.1);
}
.suivi-code {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8125rem; color: var(--gris-texte);
    margin: 0 0 .3rem;
}
.suivi-code strong { color: var(--anthracite); font-family: monospace; font-size: 1rem; }
.suivi-date { font-size: .8rem; color: var(--gris-texte); margin: 0; }

/* Badges statuts */
.suivi-badge {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: .35rem .875rem;
}
.badge-nouveau     { background: #e3f2fd; color: #0d47a1; }
.badge-attente     { background: #fff8e1; color: #e65100; }
.badge-paiement    { background: #fce4ec; color: #880e4f; }
.badge-confirme    { background: #e8f5e9; color: #1b5e20; }
.badge-preparation { background: #f3e5f5; color: #4a148c; }
.badge-livraison   { background: #e0f7fa; color: #006064; }
.badge-livre       { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.badge-annule      { background: #fafafa; color: #616161; border: 1px solid #bdbdbd; }
.badge-defaut      { background: #f5f5f5; color: #616161; }

/* Timeline */
.suivi-timeline {
    display: flex; align-items: flex-start;
    gap: 0; margin-bottom: 2.5rem;
    overflow-x: auto; padding-bottom: .5rem;
}
.suivi-etape {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; min-width: 80px; position: relative;
}
.suivi-etape__bulle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #EAE0D4; border: 2px solid rgba(31,26,23,.15);
    font-size: .72rem; font-weight: 700; color: var(--gris-texte);
    z-index: 1; flex-shrink: 0;
}
.suivi-etape--ok  .suivi-etape__bulle { background: #c8e6c9; border-color: #4caf50; color: #1b5e20; }
.suivi-etape--active .suivi-etape__bulle { background: var(--braise); border-color: var(--braise); color: var(--blanc); }
.suivi-etape__trait {
    position: absolute;
    top: 15px; left: calc(50% + 16px);
    width: calc(100% - 32px); height: 2px;
    background: rgba(31,26,23,.12);
    z-index: 0;
}
.suivi-etape__trait--ok { background: #4caf50; }
.suivi-etape__label {
    font-size: .65rem; font-weight: 500;
    text-align: center; margin-top: .5rem; line-height: 1.3;
    color: var(--gris-texte); max-width: 80px;
}
.suivi-etape--ok .suivi-etape__label     { color: #2e7d32; font-weight: 600; }
.suivi-etape--active .suivi-etape__label { color: var(--braise); font-weight: 700; }

.suivi-annulee {
    display: flex; align-items: center; gap: .625rem;
    background: #fafafa; border: 1px solid #bdbdbd;
    padding: .875rem 1rem; margin-bottom: 2rem;
    font-size: .9rem; color: #616161;
}

/* Grille résultat */
.suivi-grille {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    align-items: start;
}
.suivi-bloc {
    background: var(--blanc);
    border: 1px solid rgba(31,26,23,.1);
    padding: 1.5rem;
}
.suivi-bloc__titre {
    font-size: 1rem; font-weight: 700;
    margin: 0 0 1.25rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid rgba(31,26,23,.08);
}

/* Tableau produits */
.suivi-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.suivi-table thead tr { border-bottom: 2px solid rgba(31,26,23,.1); }
.suivi-table th {
    padding: .5rem .625rem;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--gris-texte); text-align: left;
}
.suivi-table td { padding: .75rem .625rem; border-bottom: 1px solid rgba(31,26,23,.06); }
.suivi-table tbody tr:last-child td { border-bottom: none; }
.suivi-table__num { text-align: right; }
.suivi-table__lien { color: var(--braise); font-weight: 600; }
.suivi-table__lien:hover { text-decoration: underline; }
.suivi-table__sous-total { font-weight: 600; color: var(--anthracite); }
.suivi-table tfoot tr { border-top: 2px solid rgba(31,26,23,.1); }
.suivi-table__total-label {
    text-align: right; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--gris-texte);
    padding: .75rem .625rem;
}
.suivi-table__total {
    font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700;
    color: var(--braise);
    padding: .75rem .625rem;
}
/* ── Produits commandés dans le suivi (identique à SylvaHunting) ── */
.suivi-produits {
    background: var(--blanc);
    border: 1px solid rgba(31,26,23,.1);
    overflow: hidden;
    margin-bottom: 1rem;
}
.suivi-produits__titre {
    font-size: .76rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--gris-texte);
    padding: .9rem 1.2rem; border-bottom: 1px solid rgba(31,26,23,.09);
}
.suivi-produits__liste { list-style: none; margin: 0; padding: 0; }
.suivi-produit {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.2rem; border-bottom: 1px solid rgba(31,26,23,.07);
}
.suivi-produit:last-child { border-bottom: none; }
.suivi-produit__img {
    width: 68px; height: 68px; flex-shrink: 0;
    background: #EAE0D4; border: 1px solid rgba(31,26,23,.1);
    display: flex; align-items: center; justify-content: center;
    color: #B89070; overflow: hidden;
}
.suivi-produit__img img { width: 68px; height: 68px; object-fit: cover; display: block; }
.suivi-produit__info { flex: 1; min-width: 0; }
.suivi-produit__nom { font-size: .92rem; font-weight: 700; display: block; margin-bottom: .25rem; color: var(--anthracite); }
.suivi-produit__meta { font-size: .78rem; color: var(--gris-texte); }
.suivi-produit__lien {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: var(--braise); font-weight: 600;
    margin-top: .4rem; transition: opacity .15s;
}
.suivi-produit__lien:hover { text-decoration: underline; }
.suivi-produit__prix {
    text-align: right; flex-shrink: 0; min-width: 70px;
    font-weight: 700; font-size: .88rem; color: var(--anthracite);
}
.suivi-produits__total {
    display: flex; justify-content: space-between; align-items: center;
    padding: .9rem 1.2rem; border-top: 2px solid rgba(31,26,23,.1);
    font-weight: 700; background: #F4F1EC;
}
.suivi-produits__total strong { font-size: 1rem; color: var(--braise); }

.suivi-note {
    display: flex; align-items: flex-start; gap: .4rem;
    font-size: .78rem; color: var(--gris-texte);
    margin-top: 1rem; line-height: 1.5;
}
.suivi-note svg { flex-shrink: 0; color: var(--marron-bois); margin-top: .1rem; }

/* Bloc latéral infos */
.suivi-bloc--lateral { display: flex; flex-direction: column; gap: 0; padding: 0; }
.suivi-info-bloc {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(31,26,23,.09);
}
.suivi-info-bloc:last-child { border-bottom: none; }
.suivi-info-titre {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--marron-bois); margin: 0 0 .625rem;
}
.suivi-info-bloc p { font-size: .875rem; margin: 0 0 .2rem; line-height: 1.5; }
.suivi-info-contact { margin-top: .375rem !important; font-size: .8rem !important; color: var(--gris-texte) !important; }
.suivi-livraison-attente { color: var(--gris-texte); font-style: italic; }
.suivi-etapes-suivantes p { font-size: .84rem !important; line-height: 1.65 !important; }
.suivi-lien { color: var(--braise); text-decoration: underline; }

/* Section aide */
.suivi-aide { background: var(--blanc); padding-block: 3.5rem; border-top: 1px solid rgba(31,26,23,.08); }
.suivi-aide__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.suivi-aide__bloc {
    display: flex; align-items: flex-start; gap: 1rem;
}
.suivi-aide__bloc h3 { font-size: 1rem; margin: 0 0 .5rem; }
.suivi-aide__bloc p { font-size: .875rem; line-height: 1.7; margin: 0; color: var(--gris-texte); }
.suivi-aide__bloc code { font-family: monospace; font-size: .85em; color: var(--braise); }

/* ── Icône panier (nav) ──────────────────────────────────────── */
.nav-panier {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--anthracite);
    transition: color .15s;
    flex-shrink: 0;
}
.nav-panier:hover { color: var(--braise); }
.nav-panier__badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--braise);
    color: var(--blanc);
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding-inline: 3px;
    line-height: 1;
}

/* ── Sélecteur de quantité (produit + panier) ────────────────── */
.fp-panier-form {
    display: flex; flex-direction: column; gap: .75rem;
}
.fp-qte-ctrl {
    display: inline-flex; align-items: center;
    border: 1.5px solid rgba(31,26,23,.2);
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}
.fp-qte-ctrl--sm .fp-qte-btn  { padding: .3rem .65rem; font-size: .9rem; }
.fp-qte-ctrl--sm .fp-qte-input { width: 2.5rem; font-size: .9rem; }
.fp-qte-btn {
    background: none;
    border: none;
    padding: .4rem .85rem;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--anthracite);
    transition: background .12s;
    line-height: 1;
}
.fp-qte-btn:hover { background: rgba(31,26,23,.06); }
.fp-qte-input {
    width: 3rem; border: none;
    text-align: center; font-size: .95rem;
    font-family: var(--font-corps);
    color: var(--anthracite);
    background: transparent;
    -moz-appearance: textfield;
}
.fp-qte-input::-webkit-outer-spin-button,
.fp-qte-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fp-flash {
    padding: .6rem 1rem;
    border-radius: 5px;
    font-size: .875rem;
    margin-bottom: .5rem;
}
.fp-flash--erreur { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

/* ── Page panier (nouveau layout) ────────────────────────────── */
.pn-section  { padding-block: 2.5rem 5rem; }
.pn-wrap     { max-width: 780px; }
.pn-titre    {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    text-align: center; margin-bottom: 2rem;
}

.panier-vide {
    display: flex; flex-direction: column; align-items: center;
    gap: 1.25rem; padding-block: 4rem; color: var(--gris-texte); text-align: center;
}
.panier-vide p { font-size: 1.05rem; }

/* Articles */
.pn-articles { margin-bottom: 1.5rem; }
.pn-articles__titre {
    font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
    color: var(--anthracite);
}
.pn-article {
    border: 1px solid rgba(31,26,23,.12);
    border-radius: 4px; margin-bottom: 1rem;
    overflow: hidden;
}
.pn-article--indispo { opacity: .6; }

.pn-article__haut {
    display: flex; gap: 1rem;
    padding: 1rem 1rem .75rem;
}
.pn-article__img {
    width: 70px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.pn-article__info { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.pn-article__nom {
    font-weight: 600; font-size: .95rem;
    color: var(--braise); transition: opacity .15s;
    line-height: 1.35;
}
.pn-article__nom:hover { opacity: .8; }
.pn-article__pu { font-size: .875rem; color: var(--gris-texte); margin: 0; }
.pn-article__pu span { color: var(--braise); font-weight: 600; }
.pn-article__st { font-size: .875rem; color: var(--gris-texte); margin: 0; }
.pn-article__st span { color: var(--braise); font-weight: 700; }
.pn-article__alerte { font-size: .78rem; color: #b91c1c; margin: 0; }

/* Barre quantité */
.pn-article__barre {
    display: flex; align-items: center;
    border-top: 1px solid rgba(31,26,23,.1);
}
.pn-qte-form {
    flex: 1; display: flex; align-items: center;
}
.pn-qte-btn {
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; color: var(--anthracite);
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.pn-qte-btn:hover { background: rgba(31,26,23,.06); }
.pn-qte-input {
    flex: 1; height: 44px; border: none;
    text-align: center; font-size: .95rem;
    font-family: var(--font-corps); color: var(--anthracite);
    background: transparent;
    border-left: 1px solid rgba(31,26,23,.1);
    border-right: 1px solid rgba(31,26,23,.1);
    -moz-appearance: textfield;
}
.pn-qte-input::-webkit-outer-spin-button,
.pn-qte-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pn-suppr-form { flex-shrink: 0; }
.pn-suppr-btn {
    width: 44px; height: 44px;
    background: none; border: none;
    border-left: 1px solid rgba(31,26,23,.1);
    cursor: pointer; font-size: 1.1rem;
    color: var(--gris-texte);
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .12s;
}
.pn-suppr-btn:hover { color: #b91c1c; background: #fef2f2; }

/* Boutons actions */
.pn-actions {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .75rem;
    margin-bottom: 2rem;
}
.pn-btn-retour {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--braise); color: var(--blanc);
    border: none; border-radius: 4px; cursor: pointer;
    font-family: var(--font-corps); font-weight: 600; font-size: .9rem;
    padding: .65rem 1.25rem; transition: opacity .15s;
    text-decoration: none;
}
.pn-btn-retour:hover { opacity: .88; }
.pn-form-refresh { display: inline; }
.pn-btn-maj {
    display: inline-flex; align-items: center; gap: .45rem;
    background: none; color: var(--gris-texte);
    border: 1px solid rgba(31,26,23,.25); border-radius: 4px; cursor: pointer;
    font-family: var(--font-corps); font-size: .875rem;
    padding: .6rem 1.1rem; transition: border-color .15s, color .15s;
}
.pn-btn-maj:hover { border-color: var(--braise); color: var(--braise); }

/* Récapitulatif box */
.pn-recap {
    background: #f5f5f5;
    border: 1px solid rgba(31,26,23,.1);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.pn-recap__ligne {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-block: .75rem;
    border-bottom: 1px solid rgba(31,26,23,.08);
    font-size: .9375rem; color: var(--gris-texte);
}
.pn-recap__ligne:first-child { padding-top: 0; }
.pn-recap__livraison span:first-child { flex-shrink: 0; margin-right: 1rem; }
.pn-recap__livraison small { display: block; font-size: .78rem; color: var(--gris-texte); margin-top: .2rem; }
.pn-recap__total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: .875rem; font-size: 1.05rem; font-weight: 700; color: var(--anthracite);
}
.pn-recap__total strong { font-size: 1.3rem; color: var(--braise); }

/* Section expédition */
.pn-shipping {
    border: 1px solid rgba(31,26,23,.12);
    border-radius: 4px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--blanc);
}
.pn-shipping__titre {
    font-size: 1rem; font-weight: 700;
    color: var(--anthracite); margin-bottom: 1rem;
}
.pn-shipping__form   { display: flex; flex-direction: column; gap: .75rem; }
.pn-shipping__champ  { display: flex; flex-direction: column; gap: .3rem; }
.pn-shipping__label  { font-size: .8375rem; font-weight: 600; color: var(--anthracite); }
.pn-shipping__requis { color: var(--braise); }
.pn-shipping__select {
    padding: .55rem .85rem;
    border: 1.5px solid rgba(31,26,23,.2);
    border-radius: 4px;
    font-family: var(--font-corps); font-size: .9375rem;
    color: var(--anthracite); background: var(--blanc);
    cursor: pointer;
}
.pn-shipping__input {
    padding: .55rem .85rem;
    border: 1.5px solid rgba(31,26,23,.2);
    border-radius: 4px;
    font-family: var(--font-corps); font-size: .9375rem;
    color: var(--anthracite); background: var(--blanc);
    width: 100%;
}
.pn-shipping__input:focus { outline: none; border-color: var(--braise); }
.pn-shipping__btn {
    align-self: flex-start;
    padding: .55rem 1.25rem;
    border: 1.5px solid rgba(31,26,23,.25);
    border-radius: 4px; background: none;
    font-family: var(--font-corps); font-size: .875rem;
    color: var(--anthracite); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pn-shipping__btn:hover { border-color: var(--braise); color: var(--braise); }
.pn-shipping__resultat {
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid rgba(31,26,23,.08);
    font-size: .875rem; color: var(--gris-texte);
    font-style: italic;
}

/* Minimum */
.pn-minimum {
    font-size: .85rem; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 4px; padding: .65rem 1rem;
    margin-bottom: 1rem;
}

/* Bouton valider */
.pn-valider {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 1rem;
    background: var(--braise); color: var(--blanc);
    border: none; border-radius: 4px; cursor: pointer;
    font-family: var(--font-titre); font-weight: 700; font-size: 1rem;
    letter-spacing: .02em; text-decoration: none;
    transition: opacity .15s;
}
.pn-valider:hover { opacity: .9; }
.pn-valider--bloque { opacity: .45; cursor: not-allowed; pointer-events: none; }

@media (max-width: 480px) {
    .pn-actions { flex-direction: column; align-items: stretch; }
    .pn-btn-retour, .pn-btn-maj { justify-content: center; }
}

/* ── Page commande (nouveau layout) ─────────────────────────── */
.cmd-section  { padding-block: 2.5rem 5rem; }
.cmd-wrap     { max-width: 640px; }
.cmd-titre    { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.75rem; }

.cmd-erreurs {
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 5px; padding: .875rem 1.125rem; margin-bottom: 1.25rem;
    color: #b91c1c; font-size: .875rem;
}
.cmd-erreurs p { margin: 0 0 .2rem; }

.cmd-form     { display: flex; flex-direction: column; gap: 0; }
.cmd-champ    { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .875rem; }
.cmd-label    { font-size: .875rem; color: var(--anthracite); }
.cmd-requis   { color: var(--braise); }
.cmd-input {
    width: 100%; padding: .625rem .875rem;
    border: 1px solid #d0cbc7; border-radius: 3px;
    font-family: var(--font-corps); font-size: .9375rem;
    color: var(--anthracite); background: var(--blanc);
    transition: border-color .15s;
}
.cmd-input:focus { outline: none; border-color: var(--anthracite); }
.cmd-select   { appearance: auto; cursor: pointer; }
.cmd-textarea {
    width: 100%; padding: .625rem .875rem;
    border: 1px solid #d0cbc7; border-radius: 3px;
    font-family: var(--font-corps); font-size: .875rem;
    color: var(--anthracite); resize: vertical;
}
.cmd-textarea:focus { outline: none; border-color: var(--anthracite); }

/* Tableau commande */
.cmd-order { margin-top: 1.5rem; }
.cmd-order__titre {
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 1rem; color: var(--anthracite);
}
.cmd-order__table {
    width: 100%; border-collapse: collapse;
    font-size: .9rem;
}
.cmd-order__table thead th {
    text-transform: uppercase; font-size: .75rem; letter-spacing: .07em;
    padding: .625rem .75rem; border-top: 1px solid rgba(31,26,23,.15);
    border-bottom: 1px solid rgba(31,26,23,.15);
    color: var(--anthracite); text-align: left;
}
.cmd-order__th-r  { text-align: right; }
.cmd-order__table td { padding: .75rem .75rem; border-bottom: 1px solid rgba(31,26,23,.08); }
.cmd-order__td-r  { text-align: right; }
.cmd-order__st td { color: var(--braise); font-weight: 600; }
.cmd-order__ship  { color: var(--gris-texte); font-size: .875rem; }
.cmd-order__total td { font-size: 1rem; border-top: 1px solid rgba(31,26,23,.2); border-bottom: none; }
.cmd-order__total strong { color: var(--braise); font-size: 1.1rem; }

/* Virement */
.cmd-payment {
    margin-top: 1.25rem;
    border: 1px solid rgba(31,26,23,.15); border-radius: 3px;
    padding: 1rem 1.25rem;
    background: #f9f9f9;
}
.cmd-payment__label {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 600; font-size: .95rem; color: var(--anthracite);
    cursor: default; margin-bottom: .75rem;
}
.cmd-payment__desc {
    font-size: .82rem; color: var(--gris-texte);
    line-height: 1.65; margin: 0; padding-left: 1.6rem;
}

/* Privacy */
.cmd-privacy {
    margin-top: 1.25rem; font-size: .8rem;
    color: var(--gris-texte); line-height: 1.65;
}
.cmd-privacy a { color: var(--braise); text-decoration: underline; }

/* CGV */
.cmd-cgv-wrap {
    margin-top: 1rem; padding: .75rem;
    border: 1px solid transparent; border-radius: 3px;
}
.cmd-cgv-wrap--erreur {
    border-color: #f97316;
    background: #fff7ed;
}
.cmd-cgv-label {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .875rem; color: var(--anthracite); cursor: pointer; line-height: 1.5;
}
.cmd-cgv-label input[type="checkbox"] {
    flex-shrink: 0; margin-top: .2rem; accent-color: var(--braise);
}
.cmd-cgv-label a { color: var(--braise); text-decoration: underline; }
.cmd-cgv-erreur {
    margin-top: .5rem; padding-left: 1.6rem;
    font-size: .8rem; color: #c2410c; font-weight: 600;
}

/* Bouton Commander */
.cmd-submit {
    margin-top: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 1rem;
    background: var(--braise); color: var(--blanc);
    border: none; border-radius: 3px; cursor: pointer;
    font-family: var(--font-corps); font-weight: 700;
    font-size: 1rem; letter-spacing: .03em;
    transition: opacity .15s;
}
.cmd-submit:hover { opacity: .9; }

/* ── Page commande (anciens styles — conservés pour les classes utilisées ailleurs) ── */
.commande-section { padding-block: 3rem 5rem; }
.commande-titre   { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.5rem; }

.commande-erreurs {
    background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px;
    padding: .875rem 1.125rem; margin-bottom: 1.5rem;
    color: #b91c1c; font-size: .875rem; display: flex; flex-direction: column; gap: .3rem;
}
.commande-erreurs p { margin: 0; }

.commande-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 800px) {
    .commande-layout { grid-template-columns: 1fr; }
}

.commande-form { display: flex; flex-direction: column; gap: 1.5rem; }

.commande-fieldset {
    border: 1px solid rgba(31,26,23,.12);
    border-radius: 8px; padding: 1.25rem 1.5rem;
}
.commande-fieldset--cgv { border: none; padding: 0; }

.commande-legend {
    font-family: var(--font-titre); font-weight: 700;
    font-size: .95rem; color: var(--anthracite);
    padding-inline: .35rem;
}
.commande-champ { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }
.commande-champ:first-of-type { margin-top: .75rem; }
.commande-champ-grille {
    display: grid; grid-template-columns: 140px 1fr; gap: 1rem; margin-top: 1rem;
}
@media (max-width: 480px) {
    .commande-champ-grille { grid-template-columns: 1fr; }
}
.commande-label {
    font-size: .8375rem; font-weight: 600; color: var(--anthracite);
}
.commande-label abbr { text-decoration: none; color: var(--braise); }
.commande-input {
    padding: .55rem .85rem;
    border: 1.5px solid rgba(31,26,23,.2);
    border-radius: 5px;
    font-family: var(--font-corps); font-size: .9375rem;
    color: var(--anthracite); background: var(--blanc);
    transition: border-color .15s;
}
.commande-input:focus { outline: none; border-color: var(--braise); }
.commande-aide { font-size: .78rem; color: var(--gris-texte); margin-top: .35rem; }

.commande-cgv-label {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .875rem; color: var(--gris-texte); cursor: pointer; line-height: 1.5;
}
.commande-cgv-label input[type="checkbox"] { flex-shrink: 0; margin-top: .2rem; accent-color: var(--braise); }
.commande-cgv-label a { color: var(--braise); text-decoration: underline; }

.commande-submit {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: var(--braise); color: var(--blanc);
    border: none; border-radius: 6px; cursor: pointer;
    font-family: var(--font-corps); font-weight: 700; font-size: 1rem;
    padding: .9rem 1.5rem; width: 100%;
    transition: opacity .15s, transform .1s;
}
.commande-submit:hover  { opacity: .88; }
.commande-submit:active { transform: scale(.98); }

.commande-securite {
    text-align: center; font-size: .78rem; color: var(--gris-texte); margin: 0;
}

.commande-recap {
    background: var(--blanc); border: 1px solid rgba(31,26,23,.1);
    border-radius: 8px; padding: 1.5rem;
    display: flex; flex-direction: column; gap: .75rem;
    position: sticky; top: 5rem;
}
.commande-recap__titre { font-size: 1rem; margin-bottom: .25rem; }
.commande-recap__ligne {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .875rem; color: var(--gris-texte);
}
.commande-recap__nom { display: flex; flex-direction: column; gap: .1rem; }
.commande-recap__qte { font-size: .75rem; color: var(--gris-texte); }
.commande-recap__prix { font-weight: 600; color: var(--anthracite); white-space: nowrap; }
.commande-recap__info { font-style: italic; color: #2e7d32; font-size: .82rem; }
.commande-recap__sep  { border: none; border-top: 1px solid rgba(31,26,23,.1); }
.commande-recap__total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1rem;
}
.commande-recap__total strong { font-size: 1.2rem; color: var(--anthracite); }
.commande-recap__retour {
    font-size: .8rem; color: var(--gris-texte);
    text-decoration: underline; text-align: center; transition: color .15s;
}
.commande-recap__retour:hover { color: var(--braise); }

/* ── Page confirmation (nouveau layout) ─────────────────────── */
.cfc-section { padding-block: 3rem 5rem; }
.cfc-wrap    { max-width: 780px; }

.cfc-titre {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center; margin-bottom: .5rem;
}
.cfc-merci {
    text-align: center; color: var(--gris-texte);
    font-size: 1rem; margin-bottom: 2rem;
}

/* Méta commande */
.cfc-meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(31,26,23,.15);
    border-radius: 3px; margin-bottom: 2rem;
    overflow: hidden;
}
@media (max-width: 580px) { .cfc-meta { grid-template-columns: 1fr 1fr; } }
.cfc-meta__col {
    padding: .875rem 1.1rem;
    border-right: 1px solid rgba(31,26,23,.12);
    font-size: .875rem;
}
.cfc-meta__col:last-child { border-right: none; }
.cfc-meta__label { color: var(--gris-texte); text-transform: uppercase; font-size: .7rem; letter-spacing: .07em; margin: 0 0 .25rem; }
.cfc-meta__val   { font-weight: 600; color: var(--anthracite); margin: 0; }

/* Instructions */
.cfc-instructions {
    font-size: .875rem; color: var(--gris-texte);
    line-height: 1.7; margin-bottom: 1.75rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.cfc-instructions p { margin: 0; }

/* Coordonnées bancaires */
.cfc-banque {
    border: 1px solid rgba(31,26,23,.12); border-radius: 3px;
    padding: 1.25rem 1.5rem; margin-bottom: 2rem;
    background: #fafafa;
}
.cfc-banque__benef-sm { font-size: .8rem; color: var(--gris-texte); margin: 0 0 .5rem; }
.cfc-banque__titre    { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--anthracite); }
.cfc-banque__benef    { font-size: .875rem; margin: 0 0 .875rem; }
.cfc-banque__grille   { display: flex; flex-direction: column; }
.cfc-banque__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid rgba(31,26,23,.08);
}
.cfc-banque__item:last-of-type { border-bottom: none; }
.cfc-banque__item-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--gris-texte); min-width: 80px; flex-shrink: 0;
}
.cfc-banque__item-val {
    font-family: monospace; font-size: .9rem; font-weight: 600;
    color: var(--anthracite); word-break: break-all; flex: 1;
}

/* Bouton Copier */
.cfc-btn-copier {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 1px solid rgba(31,26,23,.2); border-radius: 4px;
    padding: .22rem .55rem; font-size: .72rem; font-family: var(--font-corps);
    color: var(--gris-texte); cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.cfc-btn-copier:hover { background: rgba(31,26,23,.06); border-color: rgba(31,26,23,.35); color: var(--anthracite); }
.cfc-btn-copier--ok { background: rgba(46,125,50,.1); border-color: rgba(46,125,50,.45); color: #2e7d32; }
.cfc-btn-copier--ok:hover { background: rgba(46,125,50,.12); }

/* Bouton Tout copier */
.cfc-tout-copier-wrap { margin-top: 1rem; display: flex; justify-content: flex-end; }
.cfc-btn-tout-copier {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 1.5px solid rgba(31,26,23,.22); border-radius: 5px;
    padding: .45rem .9rem; font-size: .8rem; font-family: var(--font-corps);
    font-weight: 600; color: var(--anthracite); cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cfc-btn-tout-copier:hover { background: rgba(31,26,23,.05); border-color: rgba(31,26,23,.38); }
.cfc-btn-tout-copier--ok { background: rgba(46,125,50,.1); border-color: rgba(46,125,50,.45); color: #2e7d32; }

/* Copier numéro de commande */
.cfc-meta__val-wrap { display: flex; align-items: center; gap: .5rem; }

/* Détails commande */
.cfc-details { margin-bottom: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cfc-details__titre { font-size: 1rem; font-weight: 700; margin-bottom: .875rem; color: var(--anthracite); }
.cfc-details__table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .9rem; }
.cfc-details__table thead th {
    background: #f5f5f5; padding: .65rem .875rem;
    text-align: left; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid rgba(31,26,23,.15);
    white-space: nowrap;
}
.cfc-details__th-r { text-align: right; }
.cfc-details__table td { padding: .75rem .875rem; border-bottom: 1px solid rgba(31,26,23,.08); }
.cfc-details__td-r { text-align: right; white-space: nowrap; }
.cfc-details__lien { color: var(--braise); text-decoration: none; }
.cfc-details__lien:hover { text-decoration: underline; }
.cfc-details__st td    { color: var(--braise); font-weight: 700; }
.cfc-details__total td { font-weight: 700; color: var(--braise); font-size: .95rem; border-top: 2px solid rgba(31,26,23,.12); }

/* Adresses */
.cfc-adresses {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-bottom: 1.5rem;
    font-size: .875rem; color: var(--gris-texte); line-height: 1.8;
}
@media (max-width: 540px) { .cfc-adresses { grid-template-columns: 1fr; } }
.cfc-adresses__titre { font-size: .95rem; font-weight: 700; color: var(--anthracite); margin-bottom: .5rem; }
.cfc-adresses__col p { margin: 0; }
.cfc-adresses__icon  { margin-top: .25rem; }

/* ── Page confirmation — état "code de suivi" ────────────────── */
.confirm-section { padding-block: 4rem 6rem; }
.confirm-inner   { max-width: 520px; text-align: center; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }

.confirm-icone--ok {
    width: 80px; height: 80px; border-radius: 50%;
    background: #f0fdf4; color: #2e7d32;
    display: flex; align-items: center; justify-content: center;
}
.confirm-titre { font-size: clamp(1.5rem, 3vw, 2rem); }
.confirm-intro { font-size: 1rem; color: var(--gris-texte); margin: 0; }

.confirm-bloc {
    background: var(--blanc); border: 1px solid rgba(31,26,23,.1);
    border-radius: 8px; padding: 1.25rem 1.75rem; width: 100%;
    display: flex; flex-direction: column; gap: .5rem;
}
.confirm-bloc--code { border-color: var(--braise); }
.confirm-label   { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--gris-texte); margin: 0; }
.confirm-code-ligne { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.confirm-code    { font-family: monospace; font-size: 1.4rem; font-weight: 700; color: var(--anthracite); letter-spacing: .07em; }
.confirm-copier  {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--beige); border: 1px solid rgba(31,26,23,.15);
    border-radius: 5px; padding: .35rem .65rem;
    font-size: .78rem; font-weight: 600; color: var(--anthracite);
    cursor: pointer; transition: background .15s, color .15s;
}
.confirm-copier:hover         { background: var(--anthracite); color: var(--beige); }
.confirm-copier--ok           { background: #f0fdf4; border-color: #2e7d32; color: #2e7d32; }
.confirm-montant { font-size: 1.75rem; font-weight: 700; color: var(--braise); margin: 0; font-family: var(--font-titre); }
.confirm-aide    { font-size: .8rem; color: var(--gris-texte); margin: 0; }
.confirm-note    { font-size: .875rem; color: var(--gris-texte); line-height: 1.7; margin: 0; }
.confirm-note a  { color: var(--braise); text-decoration: underline; }
.confirm-cta     { padding-block: .875rem; padding-inline: 2.5rem; }
.confirm-retour  { font-size: .82rem; color: var(--gris-texte); text-decoration: underline; transition: color .15s; }
.confirm-retour:hover { color: var(--braise); }

/* ── Page confirmation — état "instructions" ─────────────────── */
.confirm-instr-section { padding-block: 3rem 5rem; }

.confirm-virement {
    background: var(--blanc); border: 1px solid rgba(31,26,23,.1);
    border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.confirm-virement__titre {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1rem; font-weight: 700; color: var(--anthracite);
    margin-bottom: 1.25rem;
}
.confirm-virement__details { display: flex; flex-direction: column; gap: .6rem; }
.confirm-virement__ligne   { display: flex; gap: 1rem; align-items: baseline; }
.confirm-virement__ligne dt {
    font-size: .78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--gris-texte);
    min-width: 80px; flex-shrink: 0;
}
.confirm-virement__ligne dd { font-size: .9rem; color: var(--anthracite); margin: 0; }
.confirm-virement__iban    { font-family: monospace; letter-spacing: .04em; word-break: break-all; }
.confirm-virement__ligne--ref    { background: rgba(217,100,44,.06); border-radius: 5px; padding: .5rem .75rem; margin-top: .4rem; }
.confirm-virement__ligne--montant{ margin-top: .2rem; }
.confirm-virement__ref-note { font-size: .75rem; color: var(--gris-texte); margin-left: .4rem; }
.confirm-virement__delai {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--gris-texte);
    margin-top: 1rem; padding-top: .875rem;
    border-top: 1px solid rgba(31,26,23,.08);
}
.confirm-virement__attente { font-size: .875rem; color: var(--gris-texte); font-style: italic; }


.confirm-cgv-form   { display: flex; flex-direction: column; gap: 1rem; }
.confirm-submit-btn { margin-top: .25rem; }

.panier-recap__zone-info {
    font-size: .75rem; color: var(--gris-texte);
    text-align: center; line-height: 1.5; margin: 0;
}
.panier-recap__continuer {
    text-align: center; font-size: .82rem;
    color: var(--gris-texte); text-decoration: underline;
    transition: color .15s;
}
.panier-recap__continuer:hover { color: var(--braise); }

@media (max-width: 580px) {
    .panier-ligne {
        grid-template-columns: 48px 1fr auto;
        grid-template-rows: auto auto;
    }
    .panier-ligne__ctrl   { grid-column: 2; }
    .panier-ligne__sous-total { grid-column: 3; grid-row: 1; }
    .panier-ligne__suppr  { grid-column: 3; grid-row: 2; justify-content: flex-end; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablette large */
@media (max-width: 1024px) {
    .hero-visuel        { width: 340px; height: 340px; }
    .avantages-grille   { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .presentation-inner { gap: 3rem; }
    .produits-grille-4  { grid-template-columns: repeat(3, 1fr); }
    .fp-grille          { gap: 3rem; }
}

/* Tablette */
@media (max-width: 860px) {
    .contact-grille     { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-form-grille{ grid-template-columns: 1fr; }
    .contact-formulaire { padding: 1.5rem; }
    .categories-grille  { grid-template-columns: 1fr 1fr; }
    .produits-grille    { grid-template-columns: 1fr 1fr; }
    .produits-grille-4  { grid-template-columns: repeat(2, 1fr); }
    .avis-grille        { grid-template-columns: 1fr 1fr; }
    .footer-grille      { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-marque      { grid-column: 1 / -1; }
    .hero-visuel        { width: 280px; height: 280px; }
    .hero-inner         { gap: 2.5rem; }
    .fp-grille          { grid-template-columns: 1fr; gap: 2.5rem; }
    .fp-mini            { width: 60px; height: 60px; }
    .fp-cta-bas__ligne  { flex-direction: column; align-items: flex-start; }
    .fp-cta-bas__btn    { width: 100%; justify-content: center; }
    .suivi-grille       { grid-template-columns: 1fr; }
    .suivi-bloc--lateral { border: 1px solid rgba(31,26,23,.1); }
    .suivi-aide__inner  { grid-template-columns: 1fr; }
    .suivi-timeline     { gap: .25rem; }
    .suivi-etape__label { font-size: .6rem; max-width: 65px; }
}

/* Mobile (suivi) — timeline horizontale compacte */
@media (max-width: 640px) {
    .suivi-form__groupe { flex-direction: column; }
    .suivi-form__btn    { width: 100%; justify-content: center; }

    .suivi-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        padding-bottom: .75rem;
    }
    .suivi-etape {
        flex: 1 0 70px;
        min-width: 70px;
    }
    .suivi-etape__bulle {
        width: 28px; height: 28px;
        font-size: .68rem;
    }
    .suivi-etape__trait {
        top: 13px;
        left: calc(50% + 14px);
        width: calc(100% - 28px);
    }
    .suivi-etape__label {
        font-size: .62rem;
        max-width: 70px;
        margin-top: .4rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Nav mobile */
    .nav-liens    { display: none; }
    .nav-toggle   { display: flex !important; flex-shrink: 0; min-width: 32px; min-height: 32px; }
    .nav-inner > .btn-principal { display: none; }
    .nav-inner    { gap: 0; padding-block: .625rem; }
    .logo         { flex: 1; gap: .45rem; }
    .logo-img     { height: 36px; }
    .logo-nom     { font-size: 1.4rem; }
    .logo-tagline { display: none; }
    .nav-panier   { margin-right: .75rem; }

    /* Hero */
    .hero { padding-block: 3.5rem 3rem; }
    .hero-inner { flex-direction: column; text-align: center; gap: 2.5rem; }
    .hero-sous-titre { max-width: 100%; margin-inline: auto; }
    .hero-actions  { justify-content: center; }
    .hero-badges   { justify-content: center; }
    .hero-visuel   { width: 220px; height: 220px; }

    /* Présentation */
    .presentation-inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .presentation-droite { padding-top: 0; }

    /* Sections */
    .categories-grille { grid-template-columns: 1fr; }
    .avantages-grille  { grid-template-columns: 1fr; gap: 1.5rem; }
    .avis-grille       { grid-template-columns: 1fr; }

    /* Blocs livraison / paiement */
    .bloc-livraison-inner,
    .bloc-paiement-inner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .bloc-livraison-texte p,
    .bloc-paiement-texte { max-width: 100%; }
}

/* Mobile étroit */
@media (max-width: 480px) {
    .hero-visuel       { display: none; }
    .hero              { padding-block: 3rem 2.5rem; }
    .footer-grille     { grid-template-columns: 1fr; }
    .categories-grille { gap: 1rem; }
    .produits-grille   { grid-template-columns: 1fr 1fr; gap: .625rem; }
    .produits-grille-4 { grid-template-columns: 1fr 1fr; gap: .625rem; }
    .produit-visuel    { padding-top: 65%; }
    .produit-infos     { padding: .625rem .75rem .875rem; gap: .25rem; }
    .produit-nom       { font-size: .8125rem; }
    .produit-prix      { font-size: .9375rem; margin-top: .25rem; }
    .produit-meta      { font-size: .75rem; }
    .produit-cat-label { font-size: .6rem; padding: .15rem .45rem; }
    .btn.btn-sm        { font-size: .75rem; padding: .45rem .75rem; }
    .avis-grille       { gap: 1rem; }
    .fp-garanties      { gap: .75rem; }
    .fp-spec dt        { min-width: 95px; }
    .fp-modal__boite   { padding: 1.75rem 1.25rem; }
    .fp-cta__btn       { font-size: .8rem; }
    .fp-form-ligne     { grid-template-columns: 1fr; }
    .fp-form-radios    { flex-wrap: wrap; }
    .suivi-table th,
    .suivi-table td    { padding: .5rem .375rem; font-size: .8rem; }
}