/* ============================================
   Inspiration Minérale — Stylesheet Principal
   Toutes les couleurs passent par les variables
   CSS définies par getThemeCSS() / theme.php
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&family=Jost:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ─── Variables par défaut ─────────────────────
   Ces valeurs sont ÉCRASÉES par getThemeCSS()
   qui injecte un bloc :root{} depuis la BDD.
   Ne pas mettre de couleurs en dur ailleurs.
   ─────────────────────────────────────────── */
:root {
    --bg:           #0d0f1a;
    --bg2:          #13162a;
    --bg3:          #1a1e35;
    --border:       #252a45;
    --accent:       #6c63ff;
    --accent2:      #a78bfa;
    --green:        #22d3a5;
    --orange:       #f59e0b;
    --red:          #f87171;
    --text:         #e2e8f0;
    --muted:        #64748b;
    --radius:       12px;
    --shadow:       0 4px 24px rgba(0,0,0,0.4);
    /* Titres — écrasées par getThemeCSS() */
    --title-color:  #e2e8f0;
    --title-size:   36px;
    --title-weight: 600;
    --title-style:  normal;
    --title-font:   'Cormorant Garamond', serif;
    --h2-color:     #a78bfa;
    --h2-size:      28px;
    --h2-weight:    600;
    --h2-font:      'Cormorant Garamond', serif;
    --font-body:    'Jost', sans-serif;
    --font-title:   'Cormorant Garamond', serif;
}

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Jost', sans-serif;
    background: var(--bg);          /* ← variable thème */
    color: var(--text);             /* ← variable thème */
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.7;
}

a { color: var(--accent2); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

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

/* ─── Conteneurs ─── */
.container        { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-center { text-align: center; }
.container-catalogue { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.container-produit    { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* ─── Sections ─── */
.section { padding: 40px 0; }
.section-title {
    font-family: var(--h2-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H2 */
    font-size:   var(--h2-size, clamp(28px, 4vw, 40px));         /* ← variable thème */
    font-weight: var(--h2-weight, 600);                          /* ← variable thème */
    color:       var(--h2-color);                                /* ← variable thème */
    margin-bottom: 8px;
}
.section-subtitle {
    font-size: 16px;
    color: var(--muted);            /* ← variable thème */
    margin-bottom: 40px;
}
.section-cta { text-align: center; margin-top: 40px; }

/* ─── Typographie étendue ─── */
.titre-hero {
    font-family: var(--title-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H1 */
    font-size:   var(--title-size, clamp(36px, 6vw, 64px));      /* ← variable thème */
    font-weight: var(--title-weight, 600);                       /* ← variable thème */
    font-style:  var(--title-style, normal);                     /* ← variable thème */
    color:       var(--title-color);                             /* ← variable thème */
    line-height: 1.15;
}
.titre-section {
    font-family: var(--h2-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H2 */
    font-size:   var(--h2-size, clamp(24px, 4vw, 36px));         /* ← variable thème */
    font-weight: var(--h2-weight, 600);                          /* ← variable thème */
    color:       var(--h2-color);                                /* ← variable thème */
    margin-bottom: 8px;
}
.titre-card {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.sous-titre {
    font-size: 17px;
    font-style: italic;
    color: var(--muted);
    margin-top: 4px;
}
.label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 600;
}
.caption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}
.prix {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent2);
}
.badge-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(108,99,255,.18);
    color: var(--accent2);
    font-size: 12px;
    font-weight: 600;
}
.highlight {
    background: rgba(108,99,255,.15);
    color: var(--accent2);
    padding: 1px 5px;
    border-radius: 4px;
}
.texte-muted   { color: var(--muted); font-size: 14px; }
.texte-succes  { color: var(--green); }
.texte-erreur  { color: var(--red); }

/* ─── Boutons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius);   /* ← variable thème */
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all .25s;
    text-decoration: none;
    white-space: nowrap;
}
.btn-primary {
    background: var(--accent);      /* ← variable thème */
    color: #fff;
}
.btn-primary:hover {
    background: var(--accent2);     /* ← variable thème */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow);      /* ← variable thème */
}
.btn-outline {
    background: transparent;
    color: var(--text);             /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
}
.btn-outline:hover {
    border-color: var(--accent);    /* ← variable thème */
    color: var(--accent2);          /* ← variable thème */
}
.btn-outline-light {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(255,255,255,.3);
}
.btn-outline-light:hover {
    border-color: var(--text);
    color: var(--text);
}
.btn-sm { padding: 7px 16px; font-size: 13px; }

/* ─── Header / Navigation ─── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bg2);         /* ← variable thème */
    border-bottom: 1px solid var(--border); /* ← variable thème */
    backdrop-filter: blur(12px);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    gap: 32px;
}
.logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.logo-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .02em;
}
.logo-sub {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);            /* ← variable thème */
}

.main-nav { flex: 1; }
.nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    list-style: none;
}
.nav-link {
    display: block;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);            /* ← variable thème */
    transition: all .2s;
    white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
    color: var(--accent2);          /* ← variable thème */
    background: rgba(108,99,255,.1);
}

/* Sous-menu déroulant */
.has-dropdown { position: relative; }
.chevron {
    display: inline-block;
    width: 10px;
    height: 6px;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform .2s;
}
.has-dropdown:hover .chevron { transform: rotate(180deg); }
.dropdown {
    display: none;
    position: absolute;
    top: 100%;           /* collé au lien, pas de gap */
    right: 0;
    padding-top: 10px;   /* espace visuel géré en padding interne */
    background: transparent;
    z-index: 300;
    list-style: none;
    min-width: 210px;
}
/* La vraie boite visuelle est sur un pseudo-élément enfant */
.dropdown::before {
    content: '';
    display: block;
    height: 10px; /* pont invisible qui comble l'espace entre nav-link et la boite */
}
.dropdown-inner,
.dropdown li {
    background: var(--bg2);
}
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    padding-top: 8px;    /* zone tampon invisible */
    background: transparent;
    z-index: 300;
    list-style: none;
    min-width: 210px;
}
/* Conteneur visuel */
.dropdown li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.dropdown li:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
.dropdown li:only-child  { border-radius: var(--radius); }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 2px 4px;
}
.dropdown li:last-child { border-bottom: 1px solid var(--border); }
/* Ombre portée uniquement sur le premier élément */
.dropdown li:first-child { box-shadow: var(--shadow); }
.dropdown li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--muted);
    transition: all .2s;
    white-space: nowrap;
}
.dropdown li a:hover {
    background: var(--bg3);
    color: var(--text);
}
.nb { font-size: 12px; color: var(--muted); }

/* Menu burger mobile */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);        /* ← variable thème */
    border-radius: 2px;
    transition: all .3s;
}

/* ─── Contenu principal ─── */
.main-content { flex: 1; }

/* ─── Hero ─── */
.hero-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 88vh;
}
.hero-img-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px;
    background: var(--bg2);         /* ← variable thème */
}
.hero-img-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}
.hero-logo-main {
    font-family: var(--title-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H1 */
    font-size: 28px;
    font-weight: var(--title-weight, 600);                       /* ← variable thème */
    color: var(--title-color);                                   /* ← variable thème */
}
.hero-logo-sub {
    font-family: var(--title-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H1 */
    font-size: 28px;
    font-style: var(--title-style, italic);                      /* ← variable thème */
    color: var(--h2-color);                                      /* ← variable thème */
}
.hero-logo-tag {
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);            /* ← variable thème */
    margin-top: 4px;
}
.hero-img-title {
    font-family: var(--title-font, var(--font-title, 'Cormorant Garamond', serif)); /* ← variable thème H1 */
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--title-weight, 300);                       /* ← variable thème */
    font-style: var(--title-style, normal);                      /* ← variable thème */
    line-height: 1.25;
    color: var(--title-color);                                   /* ← variable thème */
    margin-bottom: 24px;
}
.hero-img-sep {
    width: 48px;
    height: 2px;
    background: var(--accent);      /* ← variable thème */
    margin: 24px 0;
}
.hero-img-email {
    font-size: 14px;
    color: var(--muted);            /* ← variable thème */
    margin-bottom: 32px;
    transition: color .2s;
}
.hero-img-email:hover { color: var(--accent2); }
.hero-img-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-img-right { overflow: hidden; }
.hero-img-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Grille catégories ─── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.cat-card {
    display: flex;
    flex-direction: column;
    background: var(--bg2);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    border-radius: var(--radius);   /* ← variable thème */
    overflow: hidden;
    transition: all .3s;
    text-decoration: none;
    color: var(--text);             /* ← variable thème */
}
.cat-card:hover {
    border-color: var(--accent);    /* ← variable thème */
    transform: translateY(-4px);
    box-shadow: var(--shadow);      /* ← variable thème */
}
.cat-card-img { overflow: hidden; background: var(--bg3); }
.cat-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.cat-card:hover .cat-card-img img { transform: scale(1.04); }
.cat-card-img.no-img { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 40px; }
.cat-card-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat-card-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}
.cat-card-body p { font-size: 14px; color: var(--muted); }
.cat-count { font-size: 12px; color: var(--muted); }
.cat-link {
    margin-top: auto;
    font-size: 13px;
    color: var(--accent2);          /* ← variable thème */
    font-weight: 500;
}

/* ─── Grille produits ─── */
.produits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
.section-footer {
    margin-top: 36px;
    text-align: center;
}
.produit-card {
    display: flex;
    flex-direction: column;
    background: var(--bg2);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    border-radius: var(--radius);   /* ← variable thème */
    overflow: hidden;
    transition: all .3s;
    text-decoration: none;
    color: var(--text);             /* ← variable thème */
}
.produit-card:hover {
    border-color: var(--accent);    /* ← variable thème */
    transform: translateY(-4px);
    box-shadow: var(--shadow);      /* ← variable thème */
}
.produit-card-img {
    position: relative;
    overflow: hidden;
    background: var(--bg3);         /* ← variable thème */
}
.produit-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.produit-card:hover .produit-card-img img { transform: scale(1.04); }
.produit-card-img.no-img { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.produit-placeholder { width: 100%; height: 100%; background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 32px; }
.produit-placeholder::after { content: '🖼️'; }
.produit-badge-cat {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(13,15,26,.8);
    color: var(--accent2);          /* ← variable thème */
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.produit-badge-info {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(245,158,11,.85);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}
.produit-card-body { padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.produit-card-body h3 { font-size: 16px; font-weight: 600; color: var(--text); }
.produit-dim  { font-size: 12px; color: var(--muted); }
.produit-poids { font-size: 12px; color: var(--muted); }
.produit-prix {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent2);          /* ← variable thème */
    margin-top: 6px;
}

/* ─── Page banner ─── */
.page-banner {
    background: var(--bg2);         /* ← variable thème */
    border-bottom: 1px solid var(--border); /* ← variable thème */
    padding: 40px 0;
}
.page-banner h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    color: var(--text);
    margin-top: 12px;
}
.page-banner-desc { font-size: 15px; color: var(--muted); margin-top: 8px; }

/* ─── Breadcrumb ─── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);            /* ← variable thème */
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent2); }
.breadcrumb .current { color: var(--text); }

/* ─── Catalogue sidebar ─── */
.catalogue-sidebar { position: sticky; top: 88px; }
.catalogue-sidebar h3 {
    font-family: var(--font-sidebar, 'Cormorant Garamond', serif); /* ← variable thème */
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}
.sidebar-nav { list-style: none; margin-bottom: 24px; }
.sidebar-nav > li { margin-bottom: 4px; }
.sidebar-nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-sidebar, inherit); /* ← variable thème */
    color: var(--muted);            /* ← variable thème */
    transition: all .2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: rgba(108,99,255,.1);
    color: var(--accent2);          /* ← variable thème */
}
.sidebar-sub { list-style: none; padding-left: 16px; margin-top: 4px; }
.sidebar-sub li a { font-size: 13px; padding: 6px 12px; }
.count { font-size: 12px; font-family: var(--font-sidebar, inherit); color: var(--muted); }

.sidebar-box {
    background: var(--bg2);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    border-radius: var(--radius);   /* ← variable thème */
    padding: 18px;
    margin-bottom: 16px;
}
.sidebar-box h4 { font-size: 14px; font-weight: 600; font-family: var(--font-sidebar, inherit); color: var(--text); margin-bottom: 8px; }
.sidebar-box p  { font-size: 13px; font-family: var(--font-sidebar, inherit); color: var(--muted); margin-bottom: 12px; }
.sidebar-link   { font-size: 13px; font-family: var(--font-sidebar, inherit); color: var(--accent2); }
.sidebar-link:hover { color: var(--accent); }

.catalogue-header { margin-bottom: 20px; }
.catalogue-count  { font-size: 14px; color: var(--muted); }

/* ─── Fiche produit ─── */
.produit-galerie { display: flex; flex-direction: column; gap: 12px; }
.galerie-main {
    border-radius: var(--radius);
    background: var(--bg2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.galerie-main img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius);
}
.galerie-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb {
    width: 72px; height: 72px;
    object-fit: contain;
    background: var(--bg2);
    border-radius: 8px;
    cursor: pointer;
    opacity: .6;
    border: 2px solid transparent;
    transition: all .2s;
}
.thumb:hover, .thumb.active {
    opacity: 1;
    border-color: var(--accent);    /* ← variable thème */
}

.produit-details { display: flex; flex-direction: column; gap: 20px; }
.produit-categorie-label a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent2);          /* ← variable thème */
    font-weight: 600;
}
.produit-details h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.produit-prix-large {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent2);          /* ← variable thème */
}
.produit-description { font-size: 15px; color: var(--muted); line-height: 1.8; }
.produit-specs { display: flex; flex-direction: column; gap: 10px; }
.spec-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border); /* ← variable thème */
    font-size: 14px;
}
.spec-label { color: var(--muted); min-width: 100px; flex-shrink: 0; }
.spec-val   { color: var(--text); }

.produit-cta { display: flex; flex-direction: column; gap: 10px; }
.produit-cta-note { font-size: 13px; color: var(--muted); }
.produit-cta-note a { color: var(--accent2); }

.produit-unique {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    padding: 12px 16px;
    background: var(--bg2);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    border-radius: 8px;
}

/* ─── Contact rapide ─── */
.section-contact-rapide { background: var(--bg2); } /* ← variable thème */
.contact-rapide-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 32px 0;
}
.contact-rapide-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--muted);            /* ← variable thème */
}
.contact-rapide-item a { color: var(--text); }
.contact-rapide-item a:hover { color: var(--accent2); }

/* ─── CTA contact ─── */
.section-cta-contact {
    background: var(--bg3);         /* ← variable thème */
    text-align: center;
    padding: 48px 0;
}
.section-cta-contact p { font-size: 15px; color: var(--muted); margin-bottom: 20px; }

/* ─── Empty state ─── */
.empty-state { text-align: center; padding: 64px 24px; color: var(--muted); }
.empty-state p { margin-bottom: 20px; }

/* ─── FOOTER ────────────────────────────────────────
   Toutes les couleurs passent par les variables CSS
   ────────────────────────────────────────────────── */
.site-footer {
    background: var(--bg2);         /* ← variable thème */
    border-top: 1px solid var(--border); /* ← variable thème */
    padding-top: 56px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

/* Colonne marque */
.footer-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--text);             /* ← variable thème */
    line-height: 1.2;
    margin-bottom: 12px;
}
.footer-logo em {
    font-style: italic;
    color: var(--accent2);          /* ← variable thème */
}
.footer-tagline {
    font-size: 13px;
    color: var(--muted);            /* ← variable thème */
    line-height: 1.7;
}

/* Colonnes navigation */
.footer-col h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text);             /* ← variable thème */
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
    font-size: 14px;
    color: var(--muted);            /* ← variable thème */
    transition: color .2s;
}
.footer-col ul li a:hover { color: var(--accent2); } /* ← variable thème */

/* Colonne contact */
.footer-contact p {
    font-size: 14px;
    color: var(--muted);            /* ← variable thème */
    margin-bottom: 6px;
}
.footer-contact a {
    color: var(--muted);            /* ← variable thème */
    transition: color .2s;
}
.footer-contact a:hover { color: var(--accent2); }
.horaires {
    font-size: 13px;
    color: var(--muted);            /* ← variable thème */
    margin-top: 10px;
    line-height: 1.7;
}

/* Réseaux sociaux */
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bg3);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    color: var(--muted);            /* ← variable thème */
    transition: all .25s;
}
.footer-social a:hover {
    background: var(--accent);      /* ← variable thème */
    border-color: var(--accent);    /* ← variable thème */
    color: #fff;
    transform: translateY(-2px);
}

/* Bande basse du footer */
.footer-bottom {
    border-top: 1px solid var(--border); /* ← variable thème */
    padding: 20px 24px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom p {
    font-size: 13px;
    color: var(--muted);            /* ← variable thème */
}
.footer-bottom a {
    color: var(--muted);            /* ← variable thème */
    transition: color .2s;
}
.footer-bottom a:hover { color: var(--accent2); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
    .container-catalogue { grid-template-columns: 220px 1fr; gap: 28px; }
    .container-produit   { grid-template-columns: 1fr; }
    .footer-inner        { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .hero-img              { grid-template-columns: 1fr; }
    .hero-img-right        { display: none; }
    .hero-img-left         { padding: 56px 24px; min-height: 70vh; }
    .container-catalogue   { grid-template-columns: 1fr; }
    .catalogue-sidebar     { position: static; }
    .nav-toggle            { display: flex; }
    .main-nav {
        display: none;
        position: absolute;
        top: 68px; left: 0; right: 0;
        background: var(--bg2);     /* ← variable thème */
        border-bottom: 1px solid var(--border);
        padding: 16px;
    }
    .main-nav.open         { display: block; }
    .nav-list              { flex-direction: column; align-items: stretch; }
    .dropdown              { position: static; box-shadow: none; background: var(--bg3); margin-top: 4px; }
    .has-dropdown:hover .dropdown { display: none; }
    .has-dropdown.open .dropdown  { display: block; }
    .section               { padding: 48px 0; }
    .footer-inner          { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
    .footer-bottom         { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .contact-rapide-grid   { flex-direction: column; align-items: center; gap: 20px; }
    .produits-grid         { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .cat-grid              { grid-template-columns: 1fr; }
    .hero-img-actions      { flex-direction: column; }
}

/* ─── IM-001 : Hero responsive < 375px ─── */
@media (max-width: 374px) {
    .hero-img-left         { padding: 40px 16px; min-height: auto; }
    .hero-img-title        { font-size: clamp(24px, 7vw, 32px); }
    .hero-logo-main,
    .hero-logo-sub         { font-size: 22px; }
    .hero-img-actions      { flex-direction: column; gap: 10px; }
    .hero-img-actions .btn { width: 100%; justify-content: center; }
}

/* ─── IM-002 : Carrousel avec dots ─── */
.carrousel {
    position: relative;
    overflow: hidden;
}
.carrousel-track {
    display: flex;
    transition: transform .4s ease;
}
.carrousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    /* Sur desktop : afficher plusieurs slides */
}
/* Desktop : 3 slides visibles */
@media (min-width: 769px) {
    .carrousel-slide { min-width: 33.333%; }
}
/* Tablette : 2 slides visibles */
@media (min-width: 480px) and (max-width: 768px) {
    .carrousel-slide { min-width: 50%; }
}

/* Flèches */
.carrousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}
.carrousel-btn:hover { background: var(--accent); color: #fff; }
.carrousel-prev { left: 4px; }
.carrousel-next { right: 4px; }

/* Dots */
.carrousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.carrousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.carrousel-dot.active,
.carrousel-dot:hover {
    background: var(--accent);
    transform: scale(1.2);
}

/* ─── IM-003 : Focus ring WCAG AA sur tous les boutons et liens ─── */
.btn:focus-visible,
.nav-link:focus-visible,
.cat-card:focus-visible,
.produit-card:focus-visible,
.carrousel-btn:focus-visible,
.carrousel-dot:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius, 4px);
}
/* Supprimer l'outline par défaut seulement pour la souris (pas clavier) */
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ─── IM-004 : Filtres multi-critères ─── */
.sidebar-filtres { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.filtre-groupe   { margin-bottom: 16px; }
.filtre-label    { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.filtre-tags     { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.filtre-tag input[type="radio"] { display: none; }
.filtre-tag:hover,
.filtre-tag.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.filtre-reset {
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    align-self: center;
    margin-left: 4px;
}
.filtre-reset:hover { color: var(--accent); }

/* Badges filtres actifs dans le compteur */
.filtres-actifs-label { font-size: 13px; color: var(--muted); }
.badge-filtre {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    margin-left: 4px;
}

/* ─── IM-005 : Sélecteur de tri ─── */
.catalogue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.tri-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.tri-wrap select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
}
.tri-wrap select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── IM-006 : Nom de collection visible sous la photo ─── */
.produit-collection {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent);
    margin: 4px 0 2px;
    font-weight: 500;
}

/* ─── IM-007 : Scroll infini — loader animé ─── */
.scroll-loader {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 32px 0;
}
.scroll-loader-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: dotPulse 1.2s ease-in-out infinite;
}
.scroll-loader-dot:nth-child(2) { animation-delay: .2s; }
.scroll-loader-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
    40%            { transform: scale(1);   opacity: 1;  }
}

/* ─── IM-008 : Zoom survol + Lightbox ─── */
.galerie-zoom-wrap {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: var(--radius);
}
.galerie-zoom-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    transition: transform .4s ease;
    transform-origin: center center;
}
.galerie-zoom-wrap:hover .galerie-zoom-img { transform: scale(1.08); }
.zoom-hint {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.45);
    color: #fff;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.galerie-zoom-wrap:hover .zoom-hint { opacity: 1; }

/* Badge 360° */
.badge-360 {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 20px;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s;
    cursor: zoom-out;
}
.lightbox-overlay.open { background: rgba(0,0,0,.88); }
.lightbox-img {
    max-width: 92vw; max-height: 92vh;
    border-radius: 6px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    transform: scale(.9);
    transition: transform .25s;
}
.lightbox-overlay.open .lightbox-img { transform: scale(1); }
.lightbox-close {
    position: absolute;
    top: 20px; right: 24px;
    z-index: 2;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ─── IM-009 : Sélecteur de format + prix dynamique ─── */
.format-selecteur { display: flex; flex-direction: column; gap: 8px; }
.format-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.format-options { display: flex; flex-wrap: wrap; gap: 8px; }
.format-option {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.format-option input[type="radio"] { display: none; }
.format-option:hover,
.format-option.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* Animation flash prix mis à jour */
@keyframes prixFlash { 0%,100% { color: var(--accent2); } 50% { color: var(--accent); transform: scale(1.06); } }
.prix-update { animation: prixFlash .4s ease; }

/* ─── IM-010 : Spinner bouton commander ─── */
.btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading { opacity: .75; pointer-events: none; }

/* ─── IM-011 : Tableau comparatif ─── */
.comparatif-wrap { margin-top: 4px; }
.comparatif-toggle {
    cursor: pointer;
    font-size: 14px;
    color: var(--accent2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.comparatif-toggle::before { content: '▶'; font-size: 10px; transition: transform .2s; }
details[open] .comparatif-toggle::before { transform: rotate(90deg); }
.comparatif-scroll { overflow-x: auto; margin-top: 12px; }
.comparatif-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.comparatif-table th,
.comparatif-table td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.comparatif-table thead th {
    background: var(--bg2);
    font-weight: 600;
    font-size: 13px;
}
.comparatif-table .comparatif-current {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 600;
}
.comparatif-table td:first-child { color: var(--muted); }
.comparatif-table a { color: var(--accent2); text-decoration: none; }
.comparatif-table a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   CONFIGURATEUR
   IM-013 aperçu live · IM-014 export PDF · IM-015 surface
   ═══════════════════════════════════════════════ */

.section-configurateur { padding-top: 40px; }

.config-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .config-layout { grid-template-columns: 1fr; }
    .config-preview { order: -1; }    /* aperçu en premier sur mobile */
}

/* ─── Étapes ─── */
.config-step {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}
.config-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.config-step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.config-step-title { font-size: 16px; font-weight: 600; margin: 0; }
.config-step-desc  { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

/* ─── Grille de teintes (IM-013) ─── */
.teinte-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.teinte-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px 6px 8px;
    cursor: pointer;
    transition: border-color .2s, transform .15s;
}
.teinte-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.teinte-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.teinte-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: block;
    border: 2px solid rgba(0,0,0,.08);
}
.teinte-name { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
.config-selection-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.config-selection-label strong { color: var(--text); }

/* ─── Calculatrice surface (IM-015) ─── */
.surface-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.surface-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 100px;
}
.surface-field label { font-size: 12px; color: var(--muted); }
.surface-field input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    width: 100%;
    transition: border-color .2s;
}
.surface-field input:focus { outline: none; border-color: var(--accent); }
.surface-field input.error { border-color: #d9534f; }
.surface-mult { font-size: 22px; color: var(--muted); padding-bottom: 9px; }
.surface-error {
    color: #d9534f;
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}
.surface-result {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text);
}
.surface-result strong { font-size: 20px; color: var(--accent2); }
.surface-result-cm { font-size: 12px; color: var(--muted); }

/* ─── Export PDF (IM-014) ─── */
#btnExportPDF { width: 100%; justify-content: center; margin-bottom: 8px; }
#btnExportPDF:disabled { opacity: .45; cursor: not-allowed; }
.config-pdf-note { font-size: 13px; color: var(--muted); text-align: center; }

/* ─── Aperçu live (IM-013) ─── */
.config-preview { position: sticky; top: 100px; }
.preview-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg2);
    box-shadow: var(--shadow);
}
.preview-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 480px;
}
.preview-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: background .5s ease, opacity .5s ease;
    mix-blend-mode: multiply;
}
.preview-badge {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(255,255,255,.92);
    border-radius: 20px;
    padding: 5px 12px 5px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.preview-swatch {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.1);
    display: inline-block;
    flex-shrink: 0;
}
.preview-hint {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════
   RECHERCHE — IM-023 autocomplétion · IM-024 zéro résultat
   ═══════════════════════════════════════════════ */

.section-recherche { padding-top: 32px; }

/* ─── Barre de recherche ─── */
.recherche-bar-wrap { max-width: 720px; margin: 0 auto 40px; }
.recherche-form {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.recherche-input-wrap {
    position: relative;
    flex: 1;
}
.recherche-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.recherche-input {
    width: 100%;
    padding: 13px 40px 13px 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    background: var(--bg2);
    color: var(--text);
    transition: border-color .2s;
    box-sizing: border-box;
}
.recherche-input:focus {
    outline: none;
    border-color: var(--accent);
}
.recherche-clear {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--muted);
    text-decoration: none;
    line-height: 1;
}
.recherche-clear:hover { color: var(--text); }
.recherche-hint { text-align: center; color: var(--muted); font-size: 15px; padding: 32px 0; }

/* ─── IM-023 : Dropdown autocomplétion ─── */
.recherche-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 500;
    display: none;
    overflow: hidden;
}
.recherche-dropdown.open { display: block; }

.dropdown-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    padding: 10px 16px 4px;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    transition: background .15s;
}
.dropdown-item:hover,
.dropdown-item.focused {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dropdown-item-img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg3);
    flex-shrink: 0;
}
.dropdown-item-img-ph {
    width: 40px; height: 40px;
    border-radius: 6px;
    background: var(--bg3);
    flex-shrink: 0;
}
.dropdown-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dropdown-item-label { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-item-sub   { font-size: 12px; color: var(--muted); }
.dropdown-item-prix  { font-size: 13px; font-weight: 600; color: var(--accent2); flex-shrink: 0; }
.dropdown-separator  { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-voir-tout  {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: var(--accent2);
    text-decoration: none;
    border-top: 1px solid var(--border);
}
.dropdown-voir-tout:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dropdown-empty { padding: 14px 16px; font-size: 14px; color: var(--muted); }

/* ─── En-tête résultats ─── */
.recherche-header { margin-bottom: 24px; }

/* ─── IM-024 : Page zéro résultat ─── */
.zero-resultat { text-align: center; padding: 48px 0 32px; }
.zero-icon { font-size: 48px; margin-bottom: 16px; }
.zero-resultat h2 { font-size: 22px; margin-bottom: 8px; }
.zero-resultat > p { color: var(--muted); margin-bottom: 28px; }
.zero-label { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.zero-suggestions { margin-bottom: 36px; }
.zero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zero-tag {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.zero-tag:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.zero-vedette { margin-top: 8px; text-align: left; }
.zero-vedette .produits-grid { margin-top: 16px; }

/* ─── IM-025 : Optimisation LCP / Performance ─── */

/* Sections hors-écran : ne pas peindre tant qu'elles ne sont pas proches */
.section-categories,
.section-vedette,
.section-apropos,
.section-contact-cta,
.section-suggestions,
.section-catalogue {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* Réserver la hauteur des images pour éviter les layout shifts (CLS) */
.produit-card-img,
.cat-card-img {
    aspect-ratio: 4 / 3;
}
.galerie-main {
    aspect-ratio: 1 / 1;
}

/* ─── IM-026 : Contrastes WCAG AA — corrections ciblées ─── */
/* Les éléments qui utilisaient --muted pour du texte informatif
   bénéficient automatiquement de la correction de la variable.
   Ces règles renforcent les cas hard-codés restants. */
.produit-cta-note,
.config-step-desc,
.preview-hint,
.catalogue-count,
.config-pdf-note,
.surface-result-cm,
.zero-resultat > p {
    color: var(--muted); /* hérite maintenant de #8899b0 */
}

/* Labels de formulaire : s'assurer qu'ils passent AA */
label,
.filtre-label,
.format-label,
.surface-field label,
.tri-wrap label {
    color: var(--muted);
}

/* ─── Navigation flèches haut / bas ─── */
.scroll-nav {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scroll-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg2);         /* ← variable thème */
    border: 1px solid var(--border);/* ← variable thème */
    color: var(--text);             /* ← variable thème */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, background .2s, border-color .2s, visibility .25s;
}
.scroll-nav-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-nav-btn:hover {
    background: var(--accent);      /* ← variable thème */
    color: #fff;
    border-color: var(--accent);    /* ← variable thème */
}
@media (max-width: 600px) {
    .scroll-nav { right: 12px; bottom: 16px; }
    .scroll-nav-btn { width: 38px; height: 38px; }
}