/* ==========================================================================
   Maison Tessera — Feuille de style globale
   Direction « Le Plateau » : les couleurs sont celles d'un échiquier en bois,
   buis contre noyer, jamais noir contre blanc. Les sections alternent comme
   les cases d'un damier ; le grain du bois empêche les aplats sombres d'être
   plats. Toutes les couleurs passent par les jetons de :root — n'écrivez
   jamais une valeur en dur, sinon le site redevient gris par endroits.
   Typo : Bricolage Grotesque (titres) · Sora (texte) · Space Grotesk (accents)
   ========================================================================== */

:root {
    /* Palette « échiquier bois ». Les deux couleurs qui comptent sont celles
       d'un plateau : la case claire en buis, la case sombre en noyer. Tout le
       reste en dérive. Aucun gris neutre : chaque valeur est tirée vers
       l'ambre pour que le produit en bois soit chez lui sur la page. */

    /* Cases claires — fonds */
    --cream:      #f9f2e7;   /* surface haute : cartes, tiroir, panneaux */
    --cream-2:    #f6efe3;   /* surface haute, variante */
    --sand:       #f2e8d8;   /* fond de page reposé */
    --parchment:  #efe3d0;   /* case claire de l'échiquier */
    --sand-3:     #e4d5bd;   /* creux, zones enfoncées */

    /* Cases sombres — fonds et encre */
    --walnut:     #3a2819;   /* case sombre : sections sombres */
    --walnut-2:   #43301f;   /* case sombre éclaircie */
    --espresso:   #241710;   /* le plus profond : nav, pied, boutons */
    --ink:        #2b1d13;   /* texte courant sur fond clair */

    /* Textes secondaires */
    --muted:      #6f5947;   /* sur fond clair — AA vérifié (5,18) */
    --muted-2:    #5d4835;
    --muted-l:    #7a6450;
    --muted-d:    #b9a288;   /* sur fond sombre — AA vérifié (5,73) */

    /* Filets */
    --line:        rgba(58, 40, 25, 0.10);
    --line-solid:  #d8c7ae;
    --line-strong: #c9b498;

    /* Accent unique : le laiton d'une pendule d'échecs. */
    --brass:       #7d5525;  /* texte et liens — AA vérifié (5,18) */
    --brass-light: #d4ad78;  /* sur fond sombre — AA vérifié (6,71) */
    --brass-deco:  #a8763e;  /* aplats décoratifs, jamais du texte */

    /* Bois clairs des pastilles, et l'ambre des encarts d'avertissement.
       Tous portent de l'encre sombre : AA vérifié (7,83 · 7,12 · 6,84). */
    --badge-oak:   #d4a574;
    --badge-ash:   #c0a080;
    --notice-bg:   #f7ecd2;
    --notice-line: #e0c68e;
    --notice-ink:  #6b4a12;

    --red: #b3261e;
    --green: #3f6b3a;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cream);
}

::-webkit-scrollbar-thumb {
    background: var(--line-solid);
    border-radius: 4px;
}

html, body {
    width: 100%;
    scroll-behavior: smooth;
}

/* Navigation au clavier : l'anneau par défaut disparaissait sur les boutons
   noirs. `:focus-visible` ne l'affiche qu'au clavier, jamais à la souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: 2px;
}

section.dark a:focus-visible,
section.dark button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible {
    outline-color: var(--cream);
}

/* Lien d'évitement : premier élément tabulable de chaque page. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 5000;
    background: var(--espresso);
    color: var(--cream);
    padding: 0.9rem 1.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.25s var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: 'Sora', sans-serif;
    color: var(--ink);
    background: var(--sand);
    letter-spacing: -0.2px;
    overflow-x: hidden;
}

/* ANNOUNCEMENT BAR */
.announcement-bar {
    background: var(--espresso);
    color: var(--cream);
    padding: 0.85rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(249, 242, 231, 0.08);
}

.announcement-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.announcement-dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
}

/* NAV WITH LOGO CONTAINER */
nav {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    /* Au-dessus du menu mobile (2500) : sinon, menu ouvert, le panneau recouvre
       le bouton burger et il devient impossible de refermer le menu. */
    z-index: 2600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 75px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: rgba(249, 242, 231, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(58, 40, 25, 0.04);
    border-radius: 50px;
    padding: 0.9rem 2rem;
    box-shadow: 0 8px 24px rgba(58, 40, 25, 0.06);
}

.logo {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--espresso);
    font-family: 'Bricolage Grotesque', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
}

/* Marque « La Case » : une forme fermée unique, qui prend la couleur du texte. */
.logo-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: block;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 3rem;
}

nav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    position: relative;
}

nav a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 0;
    background: var(--espresso);
    transition: width 0.35s var(--ease);
}

nav a:hover {
    color: var(--espresso);
}

nav a:hover::before {
    width: 100%;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-btn {
    background: var(--espresso) !important;
    color: var(--cream) !important;
    padding: 0.65rem 1.4rem;
    border-radius: 6px;
    opacity: 1 !important;
    transition: all 0.35s var(--ease) !important;
    font-weight: 700;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    font-family: 'Sora', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.nav-btn::before {
    display: none;
}

.nav-btn:hover {
    background: var(--ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(58, 40, 25, 0.15);
}

/* Compteur d'articles dans le bouton panier */
.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: var(--cream);
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.cart-count[hidden] {
    display: none;
}

/* INFO BADGES */
.info-badges {
    position: fixed;
    top: 130px;
    left: 5%;
    z-index: 1900;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.badge-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cream);
    padding: 0.6rem 1.1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--line);
    letter-spacing: 0.6px;
    color: var(--ink);
}

.badge-dot {
    width: 5px;
    height: 5px;
    background: var(--red);
    border-radius: 50%;
}

.badge-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--cream);
    padding: 0.7rem 1.2rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--line);
    letter-spacing: 0.5px;
    color: var(--ink);
}

.check-icon {
    width: 16px;
    height: 16px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    font-size: 0.65rem;
    font-weight: 800;
}

/* HERO */
.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
    padding: 140px 5% 100px;
    background:
        repeating-linear-gradient(94deg,
            rgba(58, 40, 25, 0.018) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(94deg,
            rgba(58, 40, 25, 0.012) 0 1px, transparent 1px 23px),
        linear-gradient(135deg, var(--cream) 0%, var(--parchment) 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(58, 40, 25, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4.8rem;
    line-height: 1.05;
    margin-bottom: 2rem;
    color: var(--espresso);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    letter-spacing: -2px;
}

.hero-content h1 span {
    background: linear-gradient(135deg, var(--espresso) 0%, var(--muted-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 400;
    max-width: 500px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 3.5rem;
    max-width: 500px;
}

.stat {
    border-left: 3px solid var(--espresso);
    padding-left: 1.5rem;
}

.stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--espresso);
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.hero-cta {
    display: inline-flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cta-btn {
    padding: 1rem 2.2rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    font-family: 'Sora', sans-serif;
}

.cta-primary {
    background: var(--espresso);
    color: var(--cream);
    box-shadow: 0 8px 24px rgba(58, 40, 25, 0.12);
}

.cta-primary:hover {
    background: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(58, 40, 25, 0.2);
}

.cta-secondary {
    background: var(--cream);
    color: var(--espresso);
    border: 2px solid var(--espresso);
}

.cta-secondary:hover {
    background: var(--espresso);
    color: var(--cream);
    transform: translateY(-4px);
}

.hero-image {
    width: 100%;
    height: 580px;
    border-radius: 16px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--sand-3) 100%);
    box-shadow: 0 40px 80px rgba(58, 40, 25, 0.08);
}

/* SECTIONS */
section {
    padding: 120px 5%;
    position: relative;
}

/* Section claire = case claire du plateau. Les cartes posées dessus passent
   en crème : la hiérarchie se lit par la matière, pas par une bordure. */
section.light,
section:not(.dark) {
    background: var(--parchment);
}

/* Section sombre = case sombre du plateau. Le noyer, plus chaud et plus
   clair que l'espresso de la nav, pour que l'alternance se lise comme un
   damier et non comme un contraste allumé/éteint. */
section.dark {
    background: var(--walnut);
    color: var(--cream);
}

section.light {
    background: var(--cream);
}

/* --- DIRECTION « PLATEAU » -------------------------------------------------
   Le damier sert de système de mise en page, pas de décoration : texture de
   fond très basse, bandeau de séparation entre sections, coordonnées de
   notation en repère. Aucune police ni couleur ajoutée.
   -------------------------------------------------------------------------- */

/* Trame de plateau : deux dégradés croisés valent un damier, sans image. */
/* Trame de plateau : des cases de 120px en filigrane sous la section.
   Sur le fond ambré elle devient lisible sans jamais gêner la lecture —
   c'est ce qui distingue un fond « chaud » d'un vrai plateau de jeu. */
.board-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-conic-gradient(rgba(58, 40, 25, 0.020) 0% 25%, transparent 0% 50%);
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}

/* Sur fond noir la trame ressort davantage : on la baisse pour qu'elle reste
   une texture et ne devienne pas un motif. */
section.dark.board-texture::before {
    background-image:
        repeating-conic-gradient(rgba(249, 242, 231, 0.016) 0% 25%, transparent 0% 50%);
}

/* Le contenu repasse au-dessus de la trame. */
.board-texture > * {
    position: relative;
    z-index: 1;
}

/* Bandeau damier entre deux sections : la case, à l'échelle 1.
   Les deux couleurs sont celles d'un plateau de tournoi — buis et noyer —
   et non noir et blanc : un échiquier en bois n'a jamais été noir et blanc. */
.checker-rule {
    height: 24px;
    background-image:
        repeating-conic-gradient(var(--walnut) 0% 25%, var(--sand-3) 0% 50%);
    background-size: 24px 24px;
    border-top: 1px solid var(--line-solid);
    border-bottom: 1px solid var(--line-solid);
}

/* Coordonnée de section (a1, b2…) : repère de plateau en tête de section. */
.coord {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.6rem;
}

.coord::before {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    opacity: 0.85;
}

section.dark .coord {
    color: var(--muted-d);
}

/* Case de plateau : porte les numéros 01/02/03 et les chiffres romains. */
.square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    background: var(--espresso);
    color: var(--cream);
}

.square.light {
    background: var(--parchment);
    color: var(--espresso);
}

.section-header {
    max-width: 700px;
    margin-bottom: 5rem;
}

.section-header h1,
.section-header h2 {
    font-size: 3.8rem;
    margin-bottom: 1.5rem;
    color: currentColor;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.section-header p {
    font-size: 1.1rem;
    color: inherit;
    opacity: 0.7;
    line-height: 1.7;
    font-weight: 400;
}

section.dark .section-header p {
    color: var(--line-strong);
}

/* FEATURES */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.feature {
    padding: 3rem;
    background: var(--cream);
    border-radius: 12px;
    border: 1px solid var(--line);
    transition: all 0.4s var(--ease);
    cursor: pointer;
}

section.dark .feature {
    background: var(--ink);
    border-color: rgba(249, 242, 231, 0.1);
}

.feature:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(58, 40, 25, 0.12);
    border-color: var(--espresso);
}

section.dark .feature:hover {
    border-color: var(--cream);
    box-shadow: 0 24px 60px rgba(249, 242, 231, 0.08);
}

/* Le numéro de feature est posé sur une case de plateau : angles vifs, pas
   de dégradé — une case n'est pas un bouton. */
.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--espresso);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'Bricolage Grotesque', sans-serif;
    letter-spacing: -1px;
}

/* Une case sur deux est claire, comme sur un damier. */
.features-grid .feature:nth-child(even) .feature-icon {
    background: var(--parchment);
    color: var(--espresso);
}

section.dark .feature-icon {
    background: var(--cream);
    color: var(--espresso);
}

section.dark .features-grid .feature:nth-child(even) .feature-icon {
    background: var(--walnut-2);
    color: var(--cream);
}

.feature h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

.feature p {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.7;
}

/* GUIDE SECTION */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
}

.guide-step {
    padding: 3.5rem;
    background: var(--cream);
    border-radius: 12px;
    border: 1px solid var(--line);
    transition: all 0.4s var(--ease);
}

section.dark .guide-step {
    background: var(--ink);
    border-color: rgba(249, 242, 231, 0.1);
}

.guide-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(58, 40, 25, 0.12);
    border-color: var(--espresso);
}

section.dark .guide-step:hover {
    border-color: var(--cream);
}

.step-number {
    display: inline-flex;
    width: 50px;
    height: 50px;
    background: var(--espresso);
    color: var(--cream);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

section.dark .step-number {
    background: var(--cream);
    color: var(--espresso);
}

.guide-step h3 {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.guide-step p {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.guide-sublist {
    list-style: none;
    padding-left: 0;
}

.guide-sublist li {
    font-size: 0.9rem;
    padding: 0.6rem 0;
    opacity: 0.7;
    border-bottom: 1px solid rgba(58, 40, 25, 0.05);
}

section.dark .guide-sublist li {
    border-bottom-color: rgba(249, 242, 231, 0.05);
}

.guide-sublist li:last-child {
    border-bottom: none;
}

.guide-sublist li::before {
    content: '→ ';
    color: var(--muted-d);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* PRODUCTS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.product-card {
    background: var(--cream);
    /* La carte pose un fond clair au milieu d'une section sombre : sans cette
       ligne le titre hérite du crème de section.dark et devient invisible. */
    color: var(--ink);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: all 0.4s var(--ease);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 64px rgba(58, 40, 25, 0.14);
    border-color: var(--espresso);
}

/* La carte montre le produit ; le chiffre romain devient une pastille d'angle. */
.product-img {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    /* Doit valoir exactement le fond des SVG produit : `object-fit: contain`
       laisse voir le conteneur de part et d'autre de l'illustration carrée,
       et un jeton différent y dessinait un liseré. */
    background: var(--parchment);
    overflow: hidden;
    text-decoration: none;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.5s var(--ease);
}

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

.product-roman {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--cream);
    background: var(--espresso);
    border-radius: 6px;
    padding: 0.2rem 0.75rem;
    line-height: 1.3;
}

.product-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-badge {
    display: inline-block;
    background: var(--espresso);
    color: var(--cream);
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    align-self: flex-start;
}

/* Les deux autres pastilles prennent des bois plus clairs que l'espresso :
   l'encre doit basculer au sombre, sinon le crème passe à 2,0 de contraste. */
.product-card:nth-child(2) .product-badge {
    background: var(--badge-oak);
    color: var(--espresso);
}

.product-card:nth-child(3) .product-badge {
    background: var(--badge-ash);
    color: var(--espresso);
}

.product-name {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

.product-name a {
    color: inherit;
    text-decoration: none;
}

.product-name a:hover {
    text-decoration: underline;
}

.product-desc {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1.8rem;
    line-height: 1.7;
}

.product-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--espresso);
    margin-bottom: 1.8rem;
    letter-spacing: -0.5px;
    margin-top: auto;
}

.product-btn {
    width: 100%;
    padding: 1rem;
    background: var(--espresso);
    color: var(--cream);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    font-size: 0.9rem;
    font-family: 'Sora', sans-serif;
}

.product-btn:hover {
    background: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(58, 40, 25, 0.2);
}

.product-link {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.4px;
}

.product-link:hover {
    color: var(--espresso);
}

/* FAQ */
.faq-container {
    max-width: 900px;
}

.faq-item {
    border-bottom: 1px solid rgba(58, 40, 25, 0.08);
    padding: 2.5rem 0;
}

section.dark .faq-item {
    border-color: rgba(249, 242, 231, 0.1);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

.faq-toggle {
    font-size: 1.3rem;
    transition: all 0.35s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.faq-toggle.open {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-top: 1.5rem;
    opacity: 0.7;
}

.faq-answer.show {
    max-height: 500px;
}

/* NEWSLETTER (footer) */
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: rgba(249, 242, 231, 0.06);
    border: 1px solid rgba(249, 242, 231, 0.12);
    border-radius: 6px;
    color: var(--cream);
    font-family: 'Sora', sans-serif;
    font-size: 0.8rem;
}

.newsletter-form input::placeholder {
    color: var(--muted-l);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--cream);
}

.newsletter-form button {
    padding: 0.75rem 1.1rem;
    background: var(--cream);
    color: var(--espresso);
    border: none;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: 'Sora', sans-serif;
    transition: all 0.3s var(--ease);
}

.newsletter-form button:hover {
    transform: translateY(-2px);
}

.newsletter-msg {
    font-size: 0.75rem;
    margin-top: 0.7rem;
    min-height: 1.1rem;
}

.newsletter-msg.ok {
    color: var(--green);
}

.newsletter-msg.err {
    color: var(--red);
}

/* FOOTER */
footer {
    background: var(--espresso);
    color: var(--muted-d);
    padding: 5rem 5% 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: var(--cream);
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.footer-col a {
    display: block;
    color: var(--muted-d);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
    transition: all 0.3s;
    cursor: pointer;
}

.footer-col a:hover {
    color: var(--cream);
}

.footer-divider {
    border-top: 1px solid rgba(249, 242, 231, 0.08);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
}

/* ==========================================================================
   E-COMMERCE — composants ajoutés (panier, pages produit, checkout)
   ========================================================================== */

/* Page interne : la nav est fixe, on décale le contenu */
.page {
    padding: 160px 5% 100px;
    min-height: 70vh;
}

/* Première section d'une page intérieure : même dégagement que .page. */
.section-first {
    padding-top: 160px;
}

.page-narrow {
    max-width: 1100px;
    margin: 0 auto;
}

.breadcrumb {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
    letter-spacing: 0.4px;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--espresso);
}

.page-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 0.8rem;
    color: var(--espresso);
}

.page-sub {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 3.5rem;
}

/* --- PAGE PRODUIT --- */
.pdp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.pdp-gallery {
    position: sticky;
    top: 160px;
}

.pdp-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--sand) 0%, var(--sand-3) 100%);
    box-shadow: 0 40px 80px rgba(58, 40, 25, 0.08);
    display: block;
}

.pdp-roman {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 8rem;
    font-weight: 800;
    color: var(--line-solid);
}

.pdp h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.05;
    margin-bottom: 1.2rem;
    color: var(--espresso);
}

.pdp-price {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--espresso);
    margin-bottom: 0.4rem;
}

.pdp-price-note {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 2.5rem;
}

.pdp-lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 2.5rem;
}

.pdp-buy {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.2rem;
}

.qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--espresso);
    border-radius: 8px;
    overflow: hidden;
}

.qty button {
    width: 44px;
    height: 100%;
    background: var(--cream);
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Sora', sans-serif;
}

.qty button:hover {
    background: var(--parchment);
}

.qty input {
    width: 50px;
    text-align: center;
    border: none;
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    -moz-appearance: textfield;
}

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

.qty input:focus {
    outline: none;
}

.pdp-buy .cta-primary {
    flex: 1;
}

/* Estimation de livraison, remplie par le JS. */
.delivery-estimate {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: var(--cream-2);
    border-left: 3px solid var(--espresso);
    border-radius: 0 8px 8px 0;
    padding: 1.1rem 1.3rem;
    margin-top: 1.8rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink);
}

.delivery-estimate strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 0.4rem;
}

.pdp-reassurance {
    list-style: none;
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
}

.pdp-reassurance li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.88rem;
    color: var(--muted);
    padding: 0.7rem 0;
}

.specs {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
}

.specs h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--espresso);
}

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

.specs td {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}

.specs td:first-child {
    color: var(--muted);
    width: 45%;
    font-weight: 600;
}

.specs tr:last-child td {
    border-bottom: none;
}

/* --- PANIER --- */
.cart-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 4rem;
    align-items: start;
}

.cart-line {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 1.8rem;
    align-items: center;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--line);
}

.cart-line-img {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sand) 0%, var(--sand-3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--muted-d);
    object-fit: cover;
}

.cart-line-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.cart-line-name a {
    color: var(--espresso);
    text-decoration: none;
}

.cart-line-meta {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.cart-line-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.cart-line-right {
    text-align: right;
}

.cart-line-total {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.link-remove {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Sora', sans-serif;
    padding: 0;
}

.link-remove:hover {
    color: var(--red);
}

.summary {
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2.5rem;
    position: sticky;
    top: 160px;
}

.summary h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.8rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.summary-row strong {
    color: var(--espresso);
    font-weight: 700;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(58, 40, 25, 0.1);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.7px;
    color: var(--espresso);
}

.summary .cta-btn {
    width: 100%;
    margin-top: 1.8rem;
}

.summary-note {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    margin-top: 1rem;
    line-height: 1.6;
}

.shipping-hint {
    background: var(--parchment);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 1.2rem;
    line-height: 1.6;
}

.empty-state {
    text-align: center;
    padding: 5rem 1rem;
}

.empty-state p {
    color: var(--muted);
    margin-bottom: 2rem;
}

/* --- choix du mode de livraison ----------------------------------------- */
ul.modes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

ul.modes label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.2rem 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--cream);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
ul.modes label:hover { border-color: var(--brass); }

/* Le choix se marque par l'épaisseur de la bordure ET la graisse du texte,
   pas seulement par une couleur : il reste lisible en vision daltonienne. */
ul.modes label.choisi {
    border-color: var(--brass);
    border-width: 2px;
    padding: calc(0.9rem - 1px) calc(1rem - 1px);
}
ul.modes label.choisi .mode-nom { font-weight: 700; }

ul.modes input { width: 20px; height: 20px; margin: 0; accent-color: var(--brass); grid-row: span 2; }
ul.modes input:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.mode-nom { font-weight: 600; font-size: 0.98rem; }
.mode-detail { grid-column: 2; color: var(--muted); font-size: 0.85rem; }
.mode-prix {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    grid-row: span 2;
    white-space: nowrap;
}
.mode-prix.offert { color: var(--green); }

.note-livraison {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}
.note-livraison strong { color: var(--ink); }

/* --- choix du point relais ------------------------------------------------
   Le client doit pouvoir choisir vite : le code postal est prérempli depuis
   son adresse, la recherche part seule, et la liste tient à l'écran sans
   pousser le bouton de paiement hors de vue. */
/* Le bloc suit la note des modes de livraison : sans cet écart, son titre
   se colle au paragraphe précédent et les deux se lisent comme un seul. */
#bloc-relais { margin-top: 1.2rem; }
#relais-manuel input { width: 100%; }

.relais-recherche { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.relais-recherche input { flex: 1; min-width: 0; }

button.geste-relais {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0 1.1rem;
    min-height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--cream);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
button.geste-relais:hover { border-color: var(--brass); color: var(--brass); }
button.geste-relais:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.relais-etat {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
}

.relais-carte {
    height: 260px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    margin-bottom: 0.7rem;
    overflow: hidden;
    /* La carte reste sous la liste dans l'ordre d'empilement : un point
       coché ne doit jamais passer derrière des tuiles. */
    z-index: 0;
}
.relais-carte[hidden] { display: none; }

ul.relais-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 20rem;
    overflow-y: auto;
}
ul.relais-liste:empty { display: none; }

ul.relais-liste label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--cream);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
ul.relais-liste label:hover { border-color: var(--brass); }
ul.relais-liste li.choisi label {
    border-color: var(--brass);
    border-width: 2px;
    padding: calc(0.7rem - 1px) calc(0.8rem - 1px);
}
ul.relais-liste li.choisi .relais-nom { font-weight: 700; }

ul.relais-liste input {
    width: 20px; height: 20px; margin: 0;
    accent-color: var(--brass);
    grid-row: span 2;
    align-self: center;
}
ul.relais-liste input:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* La couleur est posée explicitement : dans un .field, le texte hérite du
   gris des étiquettes de formulaire, et le nom du point passait au second
   plan alors que c'est l'information que le client lit en premier. */
.relais-nom { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.relais-adresse { grid-column: 2; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

ul.relais-liste details { grid-column: 2; margin-top: 0.35rem; }
ul.relais-liste summary {
    font-size: 0.8rem;
    color: var(--brass);
    cursor: pointer;
}
ul.relais-horaires {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- CHECKOUT --- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
}

.form-block {
    margin-bottom: 3rem;
}

.form-block h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.form-step {
    display: inline-flex;
    width: 28px;
    height: 28px;
    background: var(--espresso);
    color: var(--cream);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.field {
    display: flex;
    flex-direction: column;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.field input,
.field select {
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--line-solid);
    border-radius: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--cream);
    transition: border-color 0.25s;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--espresso);
}

.field input.invalid,
.field select.invalid {
    border-color: var(--red);
}

.field .error {
    font-size: 0.72rem;
    color: var(--red);
    margin-top: 0.4rem;
    min-height: 0.9rem;
}

/* Encart d'information sur une fiche produit : disponibilité, sécurité.
   Même ambre que le bandeau de démonstration, mais dans le flux du texte. */
.notice {
    background: var(--notice-bg);
    border: 1px solid var(--notice-line);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--notice-ink);
    margin: 1.4rem 0;
}
.notice strong { color: var(--notice-ink); }
.notice h3 { color: var(--notice-ink); }

.mock-banner {
    background: var(--notice-bg);
    border: 1px solid var(--notice-line);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    font-size: 0.8rem;
    color: var(--notice-ink);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.checkout-items {
    border-bottom: 1px solid rgba(58, 40, 25, 0.1);
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.86rem;
    padding: 0.5rem 0;
    color: var(--muted);
}

.checkout-item span:last-child {
    font-weight: 700;
    color: var(--espresso);
    white-space: nowrap;
}

/* --- CONFIRMATION --- */
.confirm {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.confirm-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--green);
    color: var(--cream);
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2.5rem;
}

.confirm-ref {
    display: inline-block;
    background: var(--sand);
    border-radius: 8px;
    padding: 1rem 1.8rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 2rem 0;
}

.confirm-recap {
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2.5rem;
}

/* --- TIROIR DE PANIER ------------------------------------------------------
   S'ouvre à l'ajout : sans lui, le visiteur doit deviner comment finir sa
   commande. C'est le raccourci qui ramène le parcours d'achat à 3 clics.
   -------------------------------------------------------------------------- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(58, 40, 25, 0.45);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--cream);
    z-index: 3100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.42s var(--ease);
    box-shadow: -20px 0 60px rgba(58, 40, 25, 0.16);
}

.drawer.open {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 2rem;
    border-bottom: 1px solid var(--line);
}

.drawer-head h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: 0 0.3rem;
    font-family: 'Sora', sans-serif;
}

.drawer-close:hover {
    color: var(--espresso);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 2rem;
}

.drawer-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
}

.drawer-line img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: var(--sand);
    object-fit: cover;
}

.drawer-line-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}

.drawer-line-meta {
    font-size: 0.78rem;
    color: var(--muted);
}

.drawer-line-price {
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
}

.drawer-empty {
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 4rem 1rem;
}

.drawer-foot {
    padding: 1.8rem 2rem 2rem;
    border-top: 1px solid var(--line);
    background: var(--cream-2);
}

.drawer-foot .cta-btn {
    width: 100%;
    margin-top: 1rem;
}

.drawer-foot .summary-note {
    margin-top: 0.9rem;
}

.drawer-secondary {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: underline;
}

.drawer-secondary:hover {
    color: var(--espresso);
}

/* --- MENU MOBILE -----------------------------------------------------------
   Sous 768px les liens de nav étaient simplement masqués : depuis une fiche
   produit, plus aucun moyen de revenir au catalogue. Ce bouton les rétablit.
   -------------------------------------------------------------------------- */

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--espresso);
    transition: all 0.3s var(--ease);
}

.burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
    opacity: 0;
}

.burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    background: var(--cream);
    /* Le décalage haut est posé par le JS, à partir de la position réelle de la
       nav : la barre d'annonce ne fait pas la même hauteur selon la largeur. */
    padding: 120px 8% 2rem;
    transform: translateY(-100%);
    transition: transform 0.42s var(--ease);
    box-shadow: 0 20px 50px rgba(58, 40, 25, 0.12);
}

/* Voile sous le menu : referme au toucher hors du panneau. */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2450;
    background: rgba(58, 40, 25, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.menu-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu.open {
    transform: translateY(0);
}

.mobile-menu a {
    display: block;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--espresso);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}

.mobile-menu a:last-child {
    border-bottom: none;
}

/* --- BANDEAU DE RÉASSURANCE ------------------------------------------------
   Placé juste avant le bouton d'achat : c'est le moment où le doute survient.
   -------------------------------------------------------------------------- */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.6rem 0;
    margin: 2rem 0;
}

.trust-item {
    text-align: center;
}

.trust-item strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.trust-item span {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.5;
}

/* --- TABLEAU COMPARATIF (page boutique) ------------------------------------
   Répond à « quelle édition choisir » : c'est ce qui distingue la page boutique
   de la section produits de l'accueil.
   -------------------------------------------------------------------------- */

.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 2rem;
}

.compare {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.compare th,
.compare td {
    padding: 1.1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid rgba(249, 242, 231, 0.1);
    vertical-align: middle;
}

section.light .compare th,
section.light .compare td {
    border-bottom-color: var(--line);
}

.compare thead th {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom-width: 2px;
}

.compare thead th:first-child {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.6;
}

.compare tbody th {
    font-weight: 600;
    opacity: 0.65;
    width: 24%;
}

.compare .compare-price {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.compare .compare-cta .product-btn {
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
}

/* Colonne mise en avant : l'édition recommandée. */
.compare .col-featured {
    background: rgba(212, 165, 116, 0.09);
}

.compare-hint {
    font-size: 0.78rem;
    opacity: 0.6;
    margin-top: 1rem;
}

/* --- BLOCS D'APPEL VERS LES PAGES DÉTACHÉES -------------------------------- */

.teasers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.teaser {
    display: block;
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--cream);
    text-decoration: none;
    color: inherit;
    transition: all 0.4s var(--ease);
}

section.dark .teaser {
    background: var(--ink);
    border-color: rgba(249, 242, 231, 0.1);
}

.teaser:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(58, 40, 25, 0.12);
    border-color: var(--espresso);
}

section.dark .teaser:hover {
    border-color: var(--cream);
}

.teaser h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0.8rem 0 1rem;
}

.teaser p {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.teaser-more {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
}

.teaser-more::after {
    content: ' →';
}

/* --- RAPPEL ACHAT EN BAS DES PAGES DE CONTENU ------------------------------ */

.buy-back {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.buy-back h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.buy-back p {
    opacity: 0.7;
    line-height: 1.8;
    margin-bottom: 2.2rem;
}

/* --- indisponibilité -----------------------------------------------------
   Une édition en rupture reste visible et cliquable jusqu'à sa fiche : on
   ne la cache pas, on dit simplement qu'elle ne part pas aujourd'hui. */
button.product-btn.indisponible,
button.product-btn.indisponible:hover {
    background: var(--sand-3);
    color: var(--muted-2);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* La carte s'efface un peu, sans devenir illisible : le texte reste au
   contraste requis, seule l'image recule. */
.product-card.indisponible .product-img img { opacity: 0.55; }

.product-card.indisponible .product-img::after {
    content: var(--mention, 'Rupture de stock');
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.9rem;
    background: var(--espresso);
    color: var(--cream);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* Compteur de série. Même pastille que les badges de réassurance : c'est
   une information sur le produit, pas une alarme — et le visiteur reconnaît
   déjà cette forme ailleurs sur le site. */
.stock-reste {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0.6rem 1.1rem;
    margin: 0 0 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--ink);
}

/* Le point rouge est le seul signal d'urgence : le texte, lui, reste
   factuel. Il bat doucement pour attirer l'œil sans clignoter. */
.stock-reste::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    flex: none;
    animation: stock-pouls 2.4s ease-in-out infinite;
}

@keyframes stock-pouls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .stock-reste::before { animation: none; }
}

/* --- TOAST --- */
.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 4000;
    background: var(--espresso);
    color: var(--cream);
    padding: 1.1rem 1.6rem;
    border-radius: 10px;
    font-size: 0.87rem;
    font-weight: 600;
    box-shadow: 0 20px 50px rgba(58, 40, 25, 0.3);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transform: translateY(140%);
    opacity: 0;
    transition: all 0.45s var(--ease);
    pointer-events: none;
    max-width: 90vw;
}

/* Le refus se voit avant d'être lu : le pastillage passe au rouge. */
.toast.refus .check-icon { background: var(--red); }

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

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

@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

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

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

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

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

    .info-badges {
        display: none;
    }

    .pdp,
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .pdp-gallery,
    .summary {
        position: static;
    }

    .pdp h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 768px) {
    .announcement-bar {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
        font-size: 0.65rem;
        padding: 0.7rem 4%;
    }

    /* La barre passe sur deux lignes en mobile : la nav doit descendre d'autant. */
    nav {
        top: 68px;
    }

    /* À 375px les trois éléments remplissaient la barre à 2px près : le burger
       venait coller au logo. On récupère de la place sur les marges internes
       et sur le logo pour dégager un vrai écart. */
    .nav-container {
        border-radius: 20px;
        padding: 0.6rem 1rem;
        gap: 0.75rem;
    }

    .logo {
        font-size: 0.95rem;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .logo-mark {
        width: 22px;
        height: 22px;
    }

    nav ul {
        display: none;
    }

    /* Les liens masqués sont repris par le menu déroulant. */
    .burger {
        display: flex;
    }

    .nav-icons {
        gap: 0.65rem;
        flex-shrink: 0;
    }

    .nav-btn {
        padding: 0.65rem 0.9rem;
        gap: 0.4rem;
    }

    section {
        padding: 60px 5%;
    }

    /* La nav flottante descend jusqu'à ~138px : le titre passait à 7px dessous. */
    .hero {
        padding: 115px 5% 40px;
    }

    /* iOS Safari zoome sur un champ dont la police est sous 16px, et ne
       dézoome jamais : la page reste décalée pour le reste du parcours. */
    .field input,
    .field select,
    .newsletter-form input,
    .qty input {
        font-size: 16px;
    }

    /* Zones tactiles : 44px minimum. */
    .nav-btn {
        min-height: 44px;
        padding: 0.65rem 1.1rem;
    }

    .burger {
        min-width: 44px;
        min-height: 44px;
    }

    .footer-col a {
        padding: 0.85rem 0;
        margin-bottom: 0;
    }

    .logo {
        min-height: 44px;
        align-items: center;
    }

    .product-link,
    .link-remove,
    .drawer-secondary {
        display: inline-block;
        padding: 0.85rem 0;
    }

    /* Le champ lui-même doit être touchable, pas seulement son encadré. */
    .qty input {
        min-height: 44px;
    }

    .compare-cta .product-btn {
        padding: 1rem;
    }

    .drawer-close {
        min-width: 44px;
        min-height: 44px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 2.2rem;
    }

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

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

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

    .page {
        padding: 130px 5% 60px;
    }

    .section-first {
        padding-top: 130px;
    }

    .page-title,
    .pdp h1 {
        font-size: 2.1rem;
    }

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

    .cart-line {
        grid-template-columns: 80px 1fr;
        gap: 1.2rem;
    }

    .cart-line-img {
        width: 80px;
        height: 80px;
    }

    .cart-line-right {
        grid-column: 2;
        text-align: left;
    }

    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .drawer-head,
    .drawer-body,
    .drawer-foot {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

    .trust-strip {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .teasers {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .teaser {
        padding: 2rem;
    }

    .buy-back h2 {
        font-size: 1.8rem;
    }

    .checker-rule {
        height: 10px;
        background-size: 20px 20px;
    }
}

/* --- PAGES DE TEXTE (CGV, mentions légales, confidentialité) --------------- */

.prose {
    max-width: 760px;
}

.prose h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 3rem 0 1rem;
    color: var(--espresso);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    font-size: 0.93rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 1rem;
}

.prose ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

.prose strong {
    color: var(--espresso);
}

/* Champs que Nadhmi doit renseigner avant toute vente réelle. */
.todo {
    background: var(--notice-bg);
    border: 1px dashed var(--notice-line);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    color: var(--notice-ink);
    font-weight: 600;
    font-size: 0.85em;
}

/* Écrans les plus étroits : un mot long comme « Essentielles » dépassait la
   largeur et provoquait un défilement horizontal de toute la page. */
@media (max-width: 400px) {
    .section-header h1,
    .section-header h2,
    .page-title,
    .pdp h1,
    .buy-back h2 {
        font-size: 1.9rem;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ==========================================================================
   BOIS — la couche qui distingue « fond marron » de « plateau en noyer ».
   Un aplat de brun reste un aplat. Ce qui fait lire le bois, c'est le grain :
   des veines fines, irrégulières, à peine visibles une par une, mais qui
   empêchent la surface d'être parfaitement plate.
   ========================================================================== */

section.dark,
footer {
    position: relative;
}

/* Deux fréquences de veines superposées, légèrement désaxées : une seule
   donnerait une rayure mécanique, deux donnent du bois débité. */
section.dark::after,
footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(93deg,
            rgba(249, 242, 231, 0.030) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(93deg,
            rgba(36, 23, 16, 0.35) 0 2px, transparent 2px 17px),
        repeating-linear-gradient(87deg,
            rgba(249, 242, 231, 0.016) 0 1px, transparent 1px 41px);
    pointer-events: none;
    z-index: 0;
}

section.dark > *,
footer > * {
    position: relative;
    z-index: 1;
}

/* Le pied de page est la tranche la plus sombre du plateau. */
footer {
    background: var(--espresso);
    color: var(--muted-d);
}

/* Liens dans le corps du texte : le laiton d'une pendule de tournoi.
   C'est le seul accent coloré du site — il ne sert qu'à ça. */
.prose a,
.faq-answer a,
.pdp-lead a {
    color: var(--brass);
    text-decoration-color: rgba(125, 85, 37, 0.4);
    text-underline-offset: 3px;
}

.prose a:hover,
.faq-answer a:hover,
.pdp-lead a:hover {
    text-decoration-color: var(--brass);
}

section.dark .prose a,
footer .prose a {
    color: var(--brass-light);
}

/* Le liseré de marque : trois cases, comme une amorce de plateau. */
.checker-rule.thin {
    height: 8px;
    background-size: 16px 16px;
}