/* ================================================================
   JCB MENUISERIE ARTISANALE — style.css
   Feuille de style principale — version 1.0
   
   STRUCTURE :
   01. Variables & reset
   02. Typographie de base
   03. Utilitaires (conteneur, boutons, eyebrow)
   04. En-tête & navigation
   05. Menu mobile
   06. Hero
   07. Section Valeurs
   08. Section Produits phares
   09. Section À Propos aperçu
   10. Section Processus de commande
   11. Footer
   12. Responsive (tablette & mobile)
================================================================ */


/* ================================================================
   01. VARIABLES & RESET
================================================================ */

:root {
  /* Palette couleurs */
  --c-bois-fonce   : #4A2E1A;
  --c-bois-moyen   : #7B4F2E;
  --c-bois-chaud   : #B07D52;
  --c-or           : #C9A96E;
  --c-acier        : #6B7280;
  --c-acier-clair  : #C4C9D1;
  --c-creme        : #F5F0E8;
  --c-creme-off    : #EDE7DB;
  --c-noir         : #1E1C1B;
  --c-blanc        : #FAFAF8;

  /* Typographie */
  --f-titre  : 'Cormorant Garamond', Georgia, serif;
  --f-corps  : 'DM Sans', system-ui, sans-serif;
  --f-mono   : 'DM Mono', 'Courier New', monospace;

  /* Espacements */
  --esp-xs  : 0.5rem;
  --esp-s   : 1rem;
  --esp-m   : 2rem;
  --esp-l   : 3.5rem;
  --esp-xl  : 6rem;

  /* Largeur max du contenu */
  --largeur-max : 1160px;

  /* Hauteur header */
  --h-header : 140px;

  /* Transitions */
  --transition : 0.22s ease;
}

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

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

body {
  font-family: var(--f-corps);
  background-color: var(--c-creme);
  color: var(--c-noir);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Accessibilité — focus visible */
:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 3px;
}


/* ================================================================
   02. TYPOGRAPHIE DE BASE
================================================================ */

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.15;
  color: var(--c-bois-fonce);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p {
  font-size: 0.93rem;
  color: #3A3330;
  margin-bottom: 1rem;
}

em {
  font-style: italic;
  font-weight: 300;
}

strong {
  font-weight: 500;
  color: var(--c-bois-fonce);
}


/* ================================================================
   03. UTILITAIRES
================================================================ */

/* Conteneur centré */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--esp-m);
  padding-right: var(--esp-m);
}

/* Label de section (eyebrow) */
.section-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Boutons ── */
.btn {
  display: inline-block;
  font-family: var(--f-corps);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.75rem;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition),
              border-color var(--transition),
              color var(--transition);
  white-space: nowrap;
}

/* Principal — fond bois foncé */
.btn--principal {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
  color: var(--c-blanc);
}
.btn--principal:hover,
.btn--principal:focus-visible {
  background-color: var(--c-bois-moyen);
  border-color: var(--c-bois-moyen);
}

/* Discret — contour or */
.btn--discret {
  background-color: transparent;
  border-color: var(--c-or);
  color: var(--c-bois-fonce);
}
.btn--discret:hover,
.btn--discret:focus-visible {
  background-color: var(--c-or);
  color: var(--c-blanc);
}

/* Petit — fiches produit */
.btn--petit {
  padding: 0.5rem 1.1rem;
  font-size: 0.78rem;
  background-color: transparent;
  border-color: var(--c-bois-moyen);
  color: var(--c-bois-moyen);
}
.btn--petit:hover,
.btn--petit:focus-visible {
  background-color: var(--c-bois-moyen);
  color: var(--c-blanc);
}

/* Lien "voir tout" */
.lien-voir-tout {
  font-size: 0.82rem;
  color: var(--c-acier);
  border-bottom: 1px solid var(--c-acier-clair);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.lien-voir-tout:hover {
  color: var(--c-bois-moyen);
  border-color: var(--c-bois-moyen);
}


/* ================================================================
   04. EN-TÊTE & NAVIGATION
================================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--c-noir);
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
}

.header__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--esp-m);
  height: var(--h-header);
  display: flex;
  align-items: flex-end;
  padding-bottom: 20px;
  gap: var(--esp-m);
}

/* Logo dans le header */
.header__logo-link {
  flex-shrink: 0;
}

.header__logo-img {
  height: 120px;
  width: auto;
  transition: opacity var(--transition);
}
.header__logo-img:hover {
  opacity: 0.82;
}

/* Navigation desktop */
.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--esp-s);
}

.nav__link {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--c-acier-clair);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.5rem;
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__link:hover,
.nav__link--active {
  color: var(--c-blanc);
  border-bottom-color: var(--c-or);
}

/* Icône panier */
.header__panier {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--c-acier-clair);
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 2px;
  transition: color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.header__panier:hover {
  color: var(--c-or);
  border-color: var(--c-or);
}
.header__panier-icone {
  font-size: 1rem;
}

/* Bouton burger mobile */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-acier-clair);
  transition: transform var(--transition), opacity var(--transition);
}
/* Animation croix quand ouvert */
.nav__toggle--ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle--ouvert span:nth-child(2) { opacity: 0; }
.nav__toggle--ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   05. MENU MOBILE
================================================================ */

.nav-mobile {
  display: none;
  background-color: var(--c-noir);
  border-top: 1px solid rgba(201, 169, 110, 0.15);
}

.nav-mobile--visible {
  display: block;
}

.nav-mobile__list {
  padding: var(--esp-s) var(--esp-m) var(--esp-m);
}

.nav-mobile__link {
  display: block;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-family: var(--f-titre);
  font-weight: 400;
  color: var(--c-acier-clair);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--transition);
}
.nav-mobile__link:hover {
  color: var(--c-or);
}


/* ================================================================
   06. HERO
================================================================ */

.hero {
  background-color: var(--c-noir);
  padding-top: var(--esp-xl);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Ligne décorative gauche */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--c-or), transparent);
}

.hero__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--esp-m) var(--esp-xl);
  display: flex;
  align-items: center;
  gap: var(--esp-xl);
}

/* Texte hero */
.hero__texte {
  flex: 1;
  min-width: 0;
}

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 1.25rem;
  display: block;
}

.hero__titre {
  color: var(--c-blanc);
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero__titre em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-or);
}

.hero__accroche {
  font-size: 1rem;
  color: var(--c-acier-clair);
  max-width: 480px;
  line-height: 1.8;
  margin-bottom: var(--esp-m);
}

.hero__cta-groupe {
  display: flex;
  gap: var(--esp-s);
  flex-wrap: wrap;
}

/* Badge visuel hero */
.hero__visuel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__badge {
  width: 220px;
  aspect-ratio: 1;
  border: 1.5px solid rgba(201, 169, 110, 0.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255,255,255,0.03);
}

.hero__badge-logo {
  width: 80px;
  opacity: 0.9;
}

.hero__badge-texte {
  font-family: var(--f-titre);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--c-blanc);
  line-height: 1.3;
  margin-bottom: 0;
}

.hero__badge-trait {
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--c-or);
}

.hero__badge-lieu {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-acier-clair);
  margin-bottom: 0;
}

/* Séparateur bas de hero */
.hero__separateur {
  text-align: center;
  background: linear-gradient(to bottom, var(--c-noir) 50%, var(--c-creme) 50%);
  line-height: 0;
  padding: 0;
}

.hero__separateur-losange {
  display: inline-block;
  background-color: var(--c-creme);
  color: var(--c-or);
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  line-height: 1;
}


/* ================================================================
   07. SECTION VALEURS
================================================================ */

.valeurs {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.valeurs__titre {
  text-align: center;
  margin-bottom: var(--esp-l);
}

.valeurs__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-m);
}

.valeur-carte {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-top: 3px solid var(--c-or);
  padding: var(--esp-m) 1.5rem var(--esp-m);
  transition: box-shadow var(--transition), transform var(--transition);
}
.valeur-carte:hover {
  box-shadow: 0 6px 24px rgba(74, 46, 26, 0.08);
  transform: translateY(-3px);
}

.valeur-carte__icone {
  font-size: 1.4rem;
  color: var(--c-or);
  margin-bottom: var(--esp-s);
  display: block;
}

.valeur-carte__titre {
  font-size: 1.1rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.75rem;
}

.valeur-carte__texte {
  font-size: 0.85rem;
  color: var(--c-acier);
  line-height: 1.75;
  margin-bottom: 0;
}


/* ================================================================
   08. SECTION PRODUITS PHARES
================================================================ */

.produits {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.produits__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--esp-l);
  gap: var(--esp-s);
}

.produits__titre {
  margin-bottom: 0;
}

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

/* Carte produit standard */
.produit-carte {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition);
}
.produit-carte:hover {
  box-shadow: 0 8px 32px rgba(74, 46, 26, 0.1);
}

/* Placeholder photo (à remplacer par <img> quand vous avez vos photos) */
.produit-carte__photo-placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--c-creme);
  border-bottom: 1px solid var(--c-creme-off);
  display: flex;
  align-items: center;
  justify-content: center;
}
.produit-carte__photo-placeholder span {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--c-acier-clair);
  letter-spacing: 0.1em;
}
.produit-carte__lien-image:hover .produit-carte__photo-placeholder {
  opacity: 0.85;
}

/* Vraie photo (une fois le placeholder remplacé par <img>) */
.produit-carte__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--c-creme-off);
  display: block;
  transition: opacity var(--transition);
}
.produit-carte__lien-image:hover .produit-carte__photo {
  opacity: 0.88;
}

.produit-carte__corps {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.produit-carte__categorie {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.35rem;
}

.produit-carte__nom {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.produit-carte__nom a {
  color: var(--c-bois-fonce);
  transition: color var(--transition);
}
.produit-carte__nom a:hover {
  color: var(--c-bois-moyen);
}

.produit-carte__detail {
  font-size: 0.78rem;
  color: var(--c-acier);
  margin-bottom: 0;
  flex: 1;
}

.produit-carte__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-s);
  padding-top: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
}

.produit-carte__prix {
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
}

/* Carte sur-mesure — variante sombre */
.produit-carte--sur-mesure {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
}
.produit-carte--sur-mesure .produit-carte__categorie { color: var(--c-or); }
.produit-carte--sur-mesure .produit-carte__nom       { color: var(--c-blanc); }
.produit-carte--sur-mesure .produit-carte__nom a     { color: var(--c-blanc); }
.produit-carte--sur-mesure .produit-carte__detail    { color: var(--c-acier-clair); }
.produit-carte--sur-mesure .produit-carte__bas       { border-top-color: rgba(255,255,255,0.1); }

.produit-carte__sur-mesure-visuel {
  aspect-ratio: 4 / 3;
  background-color: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sur-mesure__symbole {
  font-size: 3rem;
  color: var(--c-or);
  opacity: 0.6;
}


/* ================================================================
   09. SECTION À PROPOS (APERÇU)
================================================================ */

.apropos-apercu {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.apropos-apercu__inner {
  display: flex;
  align-items: center;
  gap: var(--esp-xl);
}

.apropos-apercu__texte {
  flex: 1;
  min-width: 0;
}

.apropos-apercu__titre {
  margin-bottom: 1.25rem;
}

.apropos-apercu__texte p {
  max-width: 500px;
}

/* Encart chiffres */
.apropos-apercu__chiffres {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-s);
  background-color: var(--c-noir);
  padding: var(--esp-m) var(--esp-l);
  border-left: 3px solid var(--c-or);
}

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

.chiffre-item__nombre {
  display: block;
  font-family: var(--f-titre);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--c-blanc);
  line-height: 1;
}

.chiffre-item__unite {
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--c-or);
  vertical-align: super;
}

.chiffre-item__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-acier-clair);
  margin-top: 0.25rem;
}

.chiffre-separateur {
  color: var(--c-or);
  font-size: 0.5rem;
  opacity: 0.5;
}


/* ================================================================
   10. SECTION PROCESSUS DE COMMANDE
================================================================ */

.processus {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.processus__titre {
  text-align: center;
  margin-bottom: var(--esp-l);
}

.processus__etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-m);
  counter-reset: etape;
}

.etape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-s);
  position: relative;
}

/* Ligne de connexion entre étapes */
.etape:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: calc(2.5rem + 1rem);
  right: calc(-1 * var(--esp-m));
  height: 1px;
  background: linear-gradient(to right, var(--c-or), var(--c-creme-off));
}

.etape__num {
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--c-or);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-or);
  flex-shrink: 0;
  background-color: var(--c-creme-off);
  position: relative;
  z-index: 1;
}

.etape__titre {
  font-size: 1rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.4rem;
}

.etape__texte {
  font-size: 0.82rem;
  color: var(--c-acier);
  line-height: 1.7;
  margin-bottom: 0;
}


/* ================================================================
   11. FOOTER
================================================================ */

.footer {
  background-color: var(--c-noir);
  color: var(--c-acier-clair);
  padding-top: var(--esp-xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--esp-l);
  padding-bottom: var(--esp-l);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Logo footer */
.footer__logo {
  height: 120px;
  width: auto;
  opacity: 0.85;
  margin-bottom: var(--esp-s);
}

.footer__slogan {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-acier);
  margin-bottom: 0;
}

/* Colonnes footer */
.footer__col-titre {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--esp-s);
}

.footer__liens li {
  margin-bottom: 0.5rem;
}
.footer__liens a {
  font-size: 0.82rem;
  color: var(--c-acier-clair);
  transition: color var(--transition);
}
.footer__liens a:hover {
  color: var(--c-blanc);
}

.footer__contact-info {
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}
.footer__contact-info a {
  color: var(--c-or);
  transition: opacity var(--transition);
}
.footer__contact-info a:hover {
  opacity: 0.75;
}
.footer__delai {
  color: var(--c-acier);
  font-size: 0.75rem;
}

/* Barre basse */
.footer__bas {
  padding: 1.25rem 0;
}
.footer__bas-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  flex-wrap: wrap;
}

.footer__copyright,
.footer__mention-tva {
  font-size: 0.72rem;
  color: var(--c-acier);
  margin-bottom: 0;
}


/* ================================================================
   12. RESPONSIVE — TABLETTE (max 900px)
================================================================ */

@media (max-width: 900px) {

  /* Navigation desktop masquée */
  .nav { display: none; }
  .header__panier { display: none; }
  .nav__toggle { display: flex; }

  /* Hero */
  .hero__inner {
    flex-direction: column;
    padding-bottom: var(--esp-l);
    gap: var(--esp-l);
  }
  .hero__visuel { display: none; } /* masqué sur tablette pour lisibilité */

  /* Valeurs : 1 colonne */
  .valeurs__grille { grid-template-columns: 1fr; }

  /* Produits : 2 colonnes */
  .produits__grille { grid-template-columns: repeat(2, 1fr); }

  /* À propos */
  .apropos-apercu__inner { flex-direction: column; }
  .apropos-apercu__chiffres {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    padding: var(--esp-m);
    border-left: none;
    border-top: 3px solid var(--c-or);
  }

  /* Processus : 2 colonnes */
  .processus__etapes { grid-template-columns: repeat(2, 1fr); }
  .etape::after { display: none; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--esp-m); }
}


/* ================================================================
   RESPONSIVE — MOBILE (max 600px)
================================================================ */

@media (max-width: 600px) {

  :root {
    --esp-xl : 3.5rem;
    --esp-l  : 2.5rem;
  }

  .conteneur {
    padding-left: var(--esp-s);
    padding-right: var(--esp-s);
  }

  /* Produits : 1 colonne */
  .produits__grille { grid-template-columns: 1fr; }
  .produits__entete { flex-direction: column; align-items: flex-start; }

  /* Processus : 1 colonne */
  .processus__etapes { grid-template-columns: 1fr; }

  /* Footer : 1 colonne */
  .footer__inner { grid-template-columns: 1fr; gap: var(--esp-m); }
  .footer__bas-inner { flex-direction: column; align-items: flex-start; }

  /* Boutons CTA hero */
  .hero__cta-groupe { flex-direction: column; }
  .btn { text-align: center; }

  /* Chiffres aperçu */
  .apropos-apercu__chiffres { flex-direction: column; }
}


/* ================================================================
   13. COMPOSANTS COMMUNS — PAGES INTERNES
       (utilisés sur à-propos, savoir-faire, contact, etc.)
================================================================ */

/* ── En-tête de page interne ── */
.page-hero {
  padding: var(--esp-l) 0 var(--esp-l);
}

.page-hero--sombre {
  background-color: var(--c-noir);
}

.page-hero__inner {
  position: relative;
}

.page-hero__titre {
  color: var(--c-blanc);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  margin-top: 0.75rem;
}

.page-hero__titre em {
  color: var(--c-or);
  font-style: italic;
  font-weight: 300;
}

/* ── Fil d'Ariane (breadcrumb) ── */
.breadcrumb__liste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.breadcrumb__liste li {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  text-transform: uppercase;
}

.breadcrumb__liste a {
  color: var(--c-acier-clair);
  transition: color var(--transition);
}
.breadcrumb__liste a:hover { color: var(--c-or); }

.breadcrumb__liste [aria-current="page"] {
  color: var(--c-or);
}


/* ================================================================
   14. PAGE À PROPOS
================================================================ */

/* ── Citation ouvrante ── */
.apropos-intro {
  background-color: var(--c-creme-off);
  padding: var(--esp-l) 0;
}

.apropos-intro__inner {
  max-width: 680px;
}

.citation-ouvrante {
  border-left: 3px solid var(--c-or);
  padding-left: var(--esp-m);
}

.citation-ouvrante p {
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--c-bois-fonce);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.citation-ouvrante__auteur {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-acier);
}

/* ── Histoire en blocs alternés ── */
.apropos-histoire {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.histoire-bloc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-xl);
  align-items: center;
  margin-bottom: var(--esp-xl);
}

.histoire-bloc:last-child {
  margin-bottom: 0;
}

.histoire-bloc--inverse {
  direction: rtl; /* inverse l'ordre des colonnes */
}
.histoire-bloc--inverse > * {
  direction: ltr; /* remet le texte dans le bon sens */
}

.histoire-bloc__titre {
  margin-bottom: 1.25rem;
  margin-top: 0.5rem;
}

.histoire-bloc__texte p:last-child {
  margin-bottom: 0;
}

/* Placeholder photo (à remplacer par <img> avec vos vraies photos) */
.histoire-bloc__visuel--placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--c-creme-off);
  border: 1px solid var(--c-creme-off);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.histoire-bloc__visuel--or {
  background-color: rgba(201, 169, 110, 0.08);
  border-color: rgba(201, 169, 110, 0.25);
}

.histoire-bloc__visuel--fonce {
  background-color: rgba(74, 46, 26, 0.06);
  border-color: rgba(74, 46, 26, 0.15);
}

.placeholder-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-acier-clair);
}

/* Séparateur entre blocs */
.histoire-separateur {
  text-align: center;
  color: var(--c-or);
  font-size: 0.7rem;
  opacity: 0.5;
  margin-bottom: var(--esp-xl);
}

/* ── Engagements ── */
.apropos-engagements {
  padding: var(--esp-xl) 0;
  background-color: var(--c-noir);
}

.apropos-engagements__titre {
  color: var(--c-blanc);
  text-align: center;
  margin-bottom: var(--esp-l);
}

.engagements__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-m);
}

.engagement-carte {
  border-top: 1px solid rgba(201, 169, 110, 0.3);
  padding-top: var(--esp-m);
}

.engagement-carte__symbole {
  font-family: var(--f-titre);
  font-size: 2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--c-or);
  opacity: 0.6;
  margin-bottom: var(--esp-s);
  display: block;
}

.engagement-carte__titre {
  color: var(--c-blanc);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.engagement-carte__texte {
  color: var(--c-acier-clair);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 0;
}

/* ── CTA final ── */
.apropos-cta {
  padding: var(--esp-l) 0;
  background-color: var(--c-creme-off);
  border-top: 1px solid var(--c-creme-off);
}

.apropos-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-m);
  flex-wrap: wrap;
}

.apropos-cta__titre {
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
}

.apropos-cta__texte p {
  margin-bottom: 0;
  color: var(--c-acier);
}

.apropos-cta__boutons {
  display: flex;
  gap: var(--esp-s);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* ── Responsive À Propos ── */
@media (max-width: 900px) {
  .histoire-bloc {
    grid-template-columns: 1fr;
    gap: var(--esp-m);
  }
  .histoire-bloc--inverse { direction: ltr; }

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

  .apropos-cta__inner { flex-direction: column; align-items: flex-start; }
}


/* ================================================================
   15. PAGE SAVOIR-FAIRE
================================================================ */

/* ── Intro chapeau ── */
.sf-intro {
  background-color: var(--c-creme-off);
  padding: var(--esp-l) 0;
  border-bottom: 1px solid var(--c-creme-off);
}

.sf-intro__inner {
  max-width: 680px;
}

.sf-intro__texte {
  font-family: var(--f-titre);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-bois-fonce);
  margin-bottom: 0;
}

/* ── En-tête de section réutilisable ── */
.sf-section-entete {
  margin-bottom: var(--esp-l);
  max-width: 600px;
}

.sf-section-titre {
  margin-top: 0.4rem;
  margin-bottom: 1rem;
}

.sf-section-chapeau {
  color: var(--c-acier);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 0;
}

/* ── Section Essences ── */
.sf-essences {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.essences__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.essence-carte {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.essence-carte:hover {
  box-shadow: 0 6px 24px rgba(74, 46, 26, 0.09);
  transform: translateY(-2px);
}

/* Bande de couleur en haut de chaque carte — évoque le fil du bois */
.essence-carte__bande {
  height: 6px;
  width: 100%;
}
.essence-carte__bande--noyer  { background: linear-gradient(to right, #3D1F0D, #6B3A1F, #4A2810); }
.essence-carte__bande--erable { background: linear-gradient(to right, #F5E6CE, #E8D5B0, #F0DFC0); }
.essence-carte__bande--chene  { background: linear-gradient(to right, #8B6914, #C4952A, #7A5C10); }
.essence-carte__bande--hetre  { background: linear-gradient(to right, #D4A896, #C49080, #BC8070); }

.essence-carte__corps {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.essence-carte__entete {
  margin-bottom: var(--esp-s);
}

.essence-carte__nom {
  font-size: 1.15rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.2rem;
}

.essence-carte__latin {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--c-acier);
}

/* Specs techniques */
.essence-carte__specs {
  margin-bottom: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
  padding-top: var(--esp-s);
}

.spec-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--c-creme-off);
}
.spec-ligne:last-child { border-bottom: none; }

.spec-ligne dt {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  flex-shrink: 0;
}

.spec-ligne dd {
  font-size: 0.75rem;
  color: var(--c-bois-fonce);
  text-align: right;
}

.essence-carte__usage {
  font-size: 0.8rem;
  color: var(--c-acier);
  line-height: 1.7;
  margin-bottom: 0;
  flex: 1;
}

/* ── Section Rubio Monocoat ── */
.sf-rubio {
  padding: var(--esp-xl) 0;
  background-color: var(--c-noir);
}

.sf-rubio__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-xl);
  align-items: start;
}

.sf-rubio .sf-section-titre {
  color: var(--c-blanc);
}
.sf-rubio .sf-section-titre em {
  color: var(--c-or);
}
.sf-rubio .section-eyebrow {
  /* déjà stylé en or — OK sur fond noir */
}
.sf-rubio p {
  color: var(--c-acier-clair);
}

/* Liste avantages Rubio */
.rubio-avantages {
  margin-top: var(--esp-m);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rubio-avantages li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--c-acier-clair);
  line-height: 1.6;
}

.rubio-avantages__puce {
  color: var(--c-or);
  font-size: 0.5rem;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.rubio-avantages strong {
  color: var(--c-blanc);
}

/* Encart fiche technique */
.rubio-encart {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 2px;
  padding: 1.5rem;
  min-width: 240px;
  flex-shrink: 0;
}

.rubio-encart__label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.5rem;
}

.rubio-encart__produit {
  font-family: var(--f-titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-blanc);
  line-height: 1.3;
  margin-bottom: 0;
}

.rubio-encart__separateur {
  height: 1px;
  background: rgba(201, 169, 110, 0.2);
  margin: 1rem 0;
}

.rubio-encart__dl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rubio-dl-ligne {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
}

.rubio-dl-ligne dt {
  color: var(--c-acier);
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.rubio-dl-ligne dd {
  color: var(--c-acier-clair);
  text-align: right;
}

.rubio-encart__note {
  font-size: 0.72rem;
  color: var(--c-acier);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
}

/* ── Section Processus de fabrication ── */
.sf-processus {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.fab-etapes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-l);
  margin-top: var(--esp-m);
}

.fab-etape {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr;
  gap: var(--esp-m);
  align-items: center;
  padding-bottom: var(--esp-l);
  border-bottom: 1px solid var(--c-creme-off);
}
.fab-etape:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Étapes paires : visuel à gauche */
.fab-etape--inverse {
  grid-template-columns: 3rem 1fr 1fr;
  direction: rtl;
}
.fab-etape--inverse > * {
  direction: ltr;
}

.fab-etape__numero {
  font-family: var(--f-titre);
  font-size: 3rem;
  font-weight: 300;
  font-style: italic;
  color: var(--c-or);
  opacity: 0.4;
  line-height: 1;
  align-self: flex-start;
  padding-top: 0.2rem;
}

.fab-etape__titre {
  font-size: 1.15rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.75rem;
}

.fab-etape__texte {
  font-size: 0.87rem;
  color: var(--c-acier);
  line-height: 1.8;
  margin-bottom: 0;
}

.fab-etape__visuel--placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--c-creme);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Section Entretien ── */
.sf-entretien {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.entretien__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-m);
  margin-bottom: var(--esp-m);
}

.entretien-bloc {
  padding: var(--esp-m) 1.5rem;
  border-radius: 2px;
}

.entretien-bloc--bon {
  background-color: rgba(74, 46, 26, 0.04);
  border-left: 3px solid var(--c-or);
}

.entretien-bloc--mauvais {
  background-color: rgba(107, 114, 128, 0.06);
  border-left: 3px solid var(--c-acier-clair);
}

.entretien-bloc__label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--esp-s);
  font-weight: 500;
}

.entretien-bloc--bon    .entretien-bloc__label { color: var(--c-or); }
.entretien-bloc--mauvais .entretien-bloc__label { color: var(--c-acier); }

.entretien-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entretien-liste li {
  font-size: 0.84rem;
  color: var(--c-bois-fonce);
  padding-left: 1rem;
  position: relative;
  line-height: 1.6;
}

.entretien-bloc--bon .entretien-liste li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--c-or);
}

.entretien-bloc--mauvais .entretien-liste li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--c-acier-clair);
}

/* Note de bas de section entretien */
.entretien-note {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-left: 3px solid var(--c-bois-chaud);
  padding: 1.25rem 1.5rem;
  border-radius: 2px;
}

.entretien-note p {
  font-size: 0.85rem;
  margin-bottom: 0;
  color: var(--c-bois-fonce);
}

/* ── Responsive Savoir-faire ── */
@media (max-width: 1100px) {
  .essences__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sf-rubio__inner {
    grid-template-columns: 1fr;
  }
  .rubio-encart { min-width: unset; width: 100%; }

  .fab-etape {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
  }
  .fab-etape--inverse { direction: ltr; }
  .fab-etape__visuel--placeholder {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 16 / 7;
  }

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

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

  .fab-etape {
    grid-template-columns: 1fr;
  }
  .fab-etape__numero { font-size: 2rem; }
  .fab-etape__visuel--placeholder { display: none; }
}


/* ================================================================
   16. PAGE CONTACT
================================================================ */

/* ── Corps principal : 2 colonnes ── */
.contact-corps {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.contact-corps__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--esp-xl);
  align-items: start;
}

/* ── Intro texte ── */
.contact-intro {
  font-size: 1rem;
  color: var(--c-bois-fonce);
  margin-bottom: var(--esp-s);
  line-height: 1.8;
}

.contact-rgpd-note {
  font-size: 0.75rem;
  color: var(--c-acier);
  margin-bottom: var(--esp-m);
  padding: 0.75rem 1rem;
  background-color: var(--c-creme-off);
  border-left: 2px solid var(--c-acier-clair);
  border-radius: 2px;
  line-height: 1.6;
}
.contact-rgpd-note a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Formulaire ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-ligne--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-s);
}

.form-groupe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-bois-fonce);
  font-weight: 400;
}

.form-requis {
  color: var(--c-or);
  margin-left: 2px;
}

.form-optionnel {
  font-family: var(--f-corps);
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-acier);
  margin-left: 4px;
}

.form-aide {
  font-size: 0.75rem;
  color: var(--c-acier);
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.form-input {
  font-family: var(--f-corps);
  font-size: 0.88rem;
  color: var(--c-noir);
  background-color: var(--c-blanc);
  border: 1.5px solid var(--c-creme-off);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: var(--c-acier-clair);
  font-size: 0.83rem;
}

.form-input:focus {
  border-color: var(--c-or);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
}

/* Checkbox RGPD */
.form-groupe--checkbox {
  margin-top: 0.25rem;
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--c-acier-clair);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--c-blanc);
  cursor: pointer;
  margin-top: 2px;
  transition: border-color var(--transition), background-color var(--transition);
}

.form-checkbox:checked {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23FAFAF8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 2px;
}

.form-checkbox-texte {
  font-size: 0.8rem;
  color: var(--c-acier);
  line-height: 1.6;
}
.form-checkbox-texte a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bouton envoi */
.form-groupe--envoi {
  flex-direction: row;
  align-items: center;
  gap: var(--esp-s);
  flex-wrap: wrap;
}

.btn--large {
  padding: 0.9rem 2.25rem;
  font-size: 0.88rem;
}

.form-mention-envoi {
  font-size: 0.75rem;
  color: var(--c-acier);
  margin-bottom: 0;
}

/* ── Colonne infos pratiques ── */
.contact-infos-col {
  display: flex;
  flex-direction: column;
  gap: var(--esp-s);
  position: sticky;
  top: calc(var(--h-header) + var(--esp-m));
}

.contact-info-carte {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-left: 3px solid var(--c-or);
  border-radius: 2px;
  padding: 1.1rem 1.25rem;
}

.contact-info-carte--discret {
  border-left-color: var(--c-acier-clair);
}

.contact-info-carte__label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-acier);
  margin-bottom: 0.3rem;
}

.contact-info-carte__valeur {
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.contact-info-carte__lien {
  transition: color var(--transition);
}
.contact-info-carte__lien:hover { color: var(--c-bois-moyen); }

.contact-info-carte__detail {
  font-size: 0.78rem;
  color: var(--c-acier);
  line-height: 1.65;
  margin-bottom: 0;
}

.contact-infos-separateur {
  text-align: center;
  color: var(--c-or);
  font-size: 0.55rem;
  opacity: 0.4;
  padding: 0.25rem 0;
}

.contact-infos-cta-texte {
  font-size: 0.82rem;
  color: var(--c-acier);
  margin-bottom: 0.5rem;
}

.contact-infos-btn {
  width: 100%;
  text-align: center;
}

/* ── FAQ ── */
.contact-faq {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.contact-faq__titre {
  margin-bottom: var(--esp-l);
}

.faq__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-creme-off);
}

.faq-item {
  border-bottom: 1px solid var(--c-creme-off);
  border-right: 1px solid var(--c-creme-off);
}

.faq-item:nth-child(even) {
  border-right: none;
}

.faq-item__question {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
  padding: 1.25rem var(--esp-m);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  transition: background-color var(--transition), color var(--transition);
  user-select: none;
}

/* Supprime le triangle natif sur tous navigateurs */
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { display: none; }

/* Icône + / – via pseudo-élément */
.faq-item__question::after {
  content: '+';
  font-family: var(--f-corps);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--c-or);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] > .faq-item__question::after {
  content: '–';
}

.faq-item__question:hover {
  background-color: rgba(201, 169, 110, 0.05);
  color: var(--c-bois-moyen);
}

.faq-item[open] > .faq-item__question {
  color: var(--c-bois-moyen);
  background-color: rgba(201, 169, 110, 0.05);
}

.faq-item__reponse {
  padding: 0 var(--esp-m) 1.25rem;
  font-size: 0.85rem;
  color: var(--c-acier);
  line-height: 1.8;
  margin-bottom: 0;
}

.faq-item__reponse a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Variante page FAQ dédiée : symbole +/- à GAUCHE de la question ── */
.faq-item__question--gauche {
  justify-content: flex-start;
  gap: 0.85rem;
}

.faq-item__question--gauche::after {
  order: -1;
  width: 1.4rem;
  text-align: center;
  flex-shrink: 0;
}


/* ================================================================
   26. SÉLECTEUR D'ESSENCE (fiche produit)
================================================================ */

.fiche-selecteur-essence {
  background-color: rgba(201, 169, 110, 0.07);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  margin-bottom: var(--esp-m);
}

.fiche-selecteur-essence__label {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-bois-moyen);
  margin-bottom: 0.65rem;
}

.fiche-selecteur-essence__boutons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.essence-btn {
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--c-creme-off);
  border-radius: 2px;
  background-color: var(--c-blanc);
  color: var(--c-acier);
  font-family: var(--f-corps);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              color 0.2s ease, transform 0.15s ease;
}

.essence-btn:hover {
  border-color: var(--c-or);
  color: var(--c-bois-fonce);
  transform: translateY(-1px);
}

.essence-btn--actif {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
  color: var(--c-blanc);
  font-weight: 500;
}

.essence-btn--actif:hover {
  background-color: var(--c-bois-moyen);
  border-color: var(--c-bois-moyen);
  color: var(--c-blanc);
  transform: none;
}


/* ================================================================
   27. SÉLECTEUR COULEUR PIEDS (fiche produit)
================================================================ */

.option-pieds {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.pieds-btn {
  padding: 0.2rem 0.65rem;
  border: 1.5px solid var(--c-creme-off);
  border-radius: 2px;
  background-color: var(--c-blanc);
  color: var(--c-acier);
  font-family: var(--f-corps);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pieds-btn:hover {
  border-color: var(--c-or);
  color: var(--c-bois-fonce);
}

.pieds-btn--actif {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
  color: var(--c-blanc);
  font-weight: 500;
}


/* ================================================================
   28. SÉLECTEUR TYPE GRAVURE (texte / image-motif)
================================================================ */

.gravure-type-choix {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.gravure-type-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--c-creme-off);
  border-radius: 2px;
  font-size: 0.8rem;
  color: var(--c-acier);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.gravure-type-btn:has(input:checked) {
  border-color: var(--c-or);
  color: var(--c-bois-fonce);
  font-weight: 500;
}

.gravure-type-btn input[type="radio"] {
  accent-color: var(--c-bois-fonce);
}

.gravure-zone-texte,
.gravure-zone-image {
  margin-bottom: 0.5rem;
}

.gravure-image-note {
  font-size: 0.8rem;
  color: var(--c-bois-fonce);
  background-color: rgba(201, 169, 110, 0.08);
  border-left: 3px solid var(--c-or);
  padding: 0.65rem 0.9rem;
  border-radius: 2px;
  line-height: 1.6;
}

/* ================================================================
   24. PAGE FAQ — mise en page sommaire gauche + contenu
================================================================ */

.faq-main {
  padding: var(--esp-l) 0 var(--esp-xl);
  background-color: var(--c-creme);
}

.faq-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--esp-xl);
  align-items: start;
}

/* Sommaire latéral — colle au texte pendant le défilement */
.faq-sommaire {
  position: sticky;
  top: calc(var(--h-header) + var(--esp-m));
}

.faq-contenu {
  min-width: 0;
}

.faq-section {
  margin-bottom: var(--esp-l);
  padding-bottom: var(--esp-l);
  border-bottom: 1px solid var(--c-creme-off);
  scroll-margin-top: calc(var(--h-header) + var(--esp-s));
}

.faq-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faq-section__titre {
  font-size: 1.4rem;
  color: var(--c-bois-fonce);
  margin-bottom: var(--esp-s);
}

/* Dans la page FAQ, les items s'empilent en une seule colonne pleine largeur,
   pas en grille 2 colonnes comme sur la page contact */
.faq-contenu .faq-item {
  border-right: none;
  width: 100%;
}

.faq-contenu .faq-item:nth-child(even) {
  border-right: none;
}

/* ── Responsive page FAQ ── */
@media (max-width: 900px) {
  .faq-inner {
    grid-template-columns: 1fr;
  }
  .faq-sommaire {
    position: static;
    display: flex;
    gap: var(--esp-s);
    flex-wrap: wrap;
    margin-bottom: var(--esp-m);
  }
}

/* ── Responsive Contact ── */
@media (max-width: 900px) {
  .contact-corps__inner {
    grid-template-columns: 1fr;
  }
  .contact-infos-col {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .contact-info-carte { flex: 1 1 240px; }
  .contact-infos-separateur,
  .contact-infos-cta-texte,
  .contact-infos-btn { display: none; }

  .faq__grille { grid-template-columns: 1fr; }
  .faq-item { border-right: none; }
}

@media (max-width: 600px) {
  .form-ligne--double { grid-template-columns: 1fr; }
  .form-groupe--envoi { flex-direction: column; align-items: flex-start; }
  .contact-infos-col { flex-direction: column; }
}


/* ================================================================
   17. PAGE BOUTIQUE
================================================================ */

/* ── Bandeau réassurance ── */
.boutique-reassurance {
  background-color: var(--c-bois-fonce);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
}

.boutique-reassurance__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem var(--esp-s);
}

.reassurance-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.reassurance-item__icone {
  color: var(--c-or);
  font-size: 0.45rem;
}

.reassurance-item__texte {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-acier-clair);
}

.reassurance-separateur {
  color: rgba(201, 169, 110, 0.3);
  font-size: 0.8rem;
}

/* ── Corps boutique ── */
.boutique-corps {
  padding: var(--esp-l) 0 var(--esp-xl);
  background-color: var(--c-creme);
}

.boutique-corps__inner {
  /* pas de display:flex ici — les enfants s'empilent naturellement */
}

/* ── Filtres ── */
.boutique-filtres {
  margin-bottom: var(--esp-m);
}

.filtres__liste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-creme-off);
  padding-bottom: var(--esp-s);
}

.filtre-btn {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-acier);
  background: none;
  border: 1.5px solid transparent;
  border-radius: 2px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: color var(--transition),
              border-color var(--transition),
              background-color var(--transition);
}

.filtre-btn:hover {
  color: var(--c-bois-fonce);
  border-color: var(--c-creme-off);
}

.filtre-btn--actif {
  color: var(--c-bois-fonce);
  border-color: var(--c-or);
  background-color: rgba(201, 169, 110, 0.08);
}

/* ── Grille produits ── */
.boutique-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ── Fiche produit ── */
.produit-fiche {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.produit-fiche:hover {
  box-shadow: 0 8px 32px rgba(74, 46, 26, 0.1);
  transform: translateY(-3px);
}

/* Photo / placeholder */
.produit-fiche__lien-image {
  display: block;
  position: relative;
}

.produit-fiche__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  width: 100%;
  object-fit: cover;
}

.produit-fiche__photo img,
a.produit-fiche__lien-image > img.produit-fiche__photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.produit-fiche:hover .produit-fiche__photo img,
.produit-fiche:hover a.produit-fiche__lien-image > img.produit-fiche__photo {
  transform: scale(1.03);
}

.produit-fiche__photo--placeholder {
  background-color: var(--c-creme);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--c-creme-off);
}

/* Badge "Nouveau" */
.produit-fiche__badge-nouveaute {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background-color: var(--c-bois-fonce);
  color: var(--c-or);
  padding: 0.25rem 0.6rem;
  border-radius: 1px;
}

/* Corps de la fiche */
.produit-fiche__corps {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.produit-fiche__categorie {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.3rem;
}

.produit-fiche__nom {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  line-height: 1.2;
}

.produit-fiche__nom a {
  color: var(--c-bois-fonce);
  transition: color var(--transition);
}
.produit-fiche__nom a:hover { color: var(--c-bois-moyen); }

.produit-fiche__specs {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--c-acier);
  margin-bottom: 0.6rem;
}

.produit-fiche__desc {
  font-size: 0.82rem;
  color: var(--c-acier);
  line-height: 1.7;
  margin-bottom: 0;
  flex: 1;
}

/* Bas de fiche : prix + bouton */
.produit-fiche__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-s);
  padding-top: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
  gap: var(--esp-s);
}

.produit-fiche__prix-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.produit-fiche__prix {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
  line-height: 1;
}

.produit-fiche__prix-detail {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--c-acier-clair);
  text-transform: uppercase;
}

/* Bouton compact pour fiches produit */
.btn--petit-compact {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Carte sur-mesure ── */
.produit-fiche--sur-mesure {
  background-color: var(--c-bois-fonce);
  border-color: var(--c-bois-fonce);
}

.produit-fiche__sur-mesure-header {
  background-color: rgba(255, 255, 255, 0.04);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

.sur-mesure-grand-symbole {
  font-size: 3.5rem;
  color: var(--c-or);
  opacity: 0.5;
}

.produit-fiche__nom--blanc { color: var(--c-blanc); }
.produit-fiche__nom--blanc a { color: var(--c-blanc); }

.produit-fiche__desc--clair { color: var(--c-acier-clair); }

.sur-mesure-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}

.sur-mesure-liste li {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-or);
  border: 1px solid rgba(201, 169, 110, 0.35);
  padding: 0.25rem 0.6rem;
  border-radius: 1px;
}

/* Bouton or — uniquement pour la carte sur-mesure */
.btn--or {
  background-color: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  padding: 0.6rem 1.25rem;
  font-size: 0.8rem;
}
.btn--or:hover,
.btn--or:focus-visible {
  background-color: var(--c-bois-chaud);
  border-color: var(--c-bois-chaud);
  color: var(--c-blanc);
}

/* Message aucun résultat */
.boutique-vide {
  text-align: center;
  padding: var(--esp-l) 0;
  font-size: 0.9rem;
  color: var(--c-acier);
  grid-column: 1 / -1;
}
.boutique-vide a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
}

/* ── Section infos commande ── */
.boutique-infos-commande {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.boutique-infos-commande__titre {
  margin-bottom: var(--esp-l);
}

.infos-commande__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-m);
  margin-bottom: var(--esp-m);
}

.infos-commande-item {
  border-top: 2px solid var(--c-or);
  padding-top: var(--esp-s);
}

.infos-commande-item__num {
  font-family: var(--f-titre);
  font-size: 2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--c-or);
  opacity: 0.45;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.infos-commande-item__titre {
  font-size: 1rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.5rem;
}

.infos-commande-item__texte {
  font-size: 0.82rem;
  color: var(--c-acier);
  line-height: 1.75;
  margin-bottom: 0;
}

.infos-commande-note {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-left: 3px solid var(--c-acier-clair);
  padding: 1rem 1.5rem;
  border-radius: 2px;
}

.infos-commande-note p {
  font-size: 0.82rem;
  color: var(--c-acier);
  margin-bottom: 0;
}

.infos-commande-note a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive Boutique ── */
@media (max-width: 1024px) {
  .boutique-grille { grid-template-columns: repeat(2, 1fr); }
  .infos-commande__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .boutique-grille { grid-template-columns: 1fr; }
  .boutique-reassurance__inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .reassurance-separateur { display: none; }
  .infos-commande__grille { grid-template-columns: 1fr; }
}


/* ================================================================
   18. PAGES LÉGALES (mentions, CGV, confidentialité, cookies,
       médiation) — styles communs
================================================================ */

.legal-main {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

/* ── Mise en page 2 colonnes : nav latérale + contenu ── */
.legal-conteneur {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--esp-xl);
  align-items: start;
}

/* ── Navigation latérale ── */
.legal-nav {
  position: sticky;
  top: calc(var(--h-header) + var(--esp-m));
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-top: 3px solid var(--c-or);
  padding: 1.25rem;
  border-radius: 2px;
}

.legal-nav__titre {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.75rem;
}

.legal-nav__liste {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0;
}

.legal-nav__liste li {
  border-bottom: none;
}

.legal-nav__liste a {
  display: block;
  font-size: 0.78rem;
  color: var(--c-acier);
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  border-left: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition),
              background-color var(--transition);
  line-height: 1.4;
}

.legal-nav__liste a:hover {
  color: var(--c-bois-fonce);
  border-left-color: var(--c-or);
  background-color: rgba(201, 169, 110, 0.06);
}

.legal-nav__autres {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-creme-off);
}

/* ── Contenu principal ── */
.legal-contenu {
  min-width: 0;
}

.legal-date {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  margin-bottom: var(--esp-l);
  text-transform: uppercase;
}

.legal-section {
  margin-bottom: var(--esp-l);
  padding-bottom: var(--esp-l);
  border-bottom: 1px solid var(--c-creme-off);
  scroll-margin-top: calc(var(--h-header) + var(--esp-s));
}

.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-h2 {
  font-size: 1.4rem;
  color: var(--c-bois-fonce);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-creme-off);
}

.legal-h3 {
  font-size: 1rem;
  color: var(--c-bois-moyen);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.legal-section p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #3A3330;
}

.legal-section a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.legal-section a:hover { color: var(--c-bois-fonce); }

/* ── Encart info ── */
.legal-encart {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-left: 3px solid var(--c-or);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

.legal-encart--attention {
  border-left-color: var(--c-bois-chaud);
  background-color: rgba(176, 125, 82, 0.04);
}

.legal-encart--info {
  border-left-color: var(--c-acier);
  background-color: rgba(107, 114, 128, 0.04);
}

.legal-encart--mediateur {
  border-left-color: var(--c-or);
  background-color: rgba(201, 169, 110, 0.04);
}

.legal-encart__titre-mediateur {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
  margin-bottom: 0.1rem;
}

.legal-encart__sous-titre {
  font-size: 0.78rem;
  color: var(--c-acier);
  margin-bottom: 1rem;
}

.legal-encart p {
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* ── Liste à puces ── */
.legal-liste {
  list-style: none;
  margin: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-liste li {
  font-size: 0.87rem;
  color: #3A3330;
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.7;
}

.legal-liste li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--c-or);
  font-size: 0.4rem;
  top: 0.5em;
}

/* ── Tableau DL (définitions) ── */
.legal-dl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.legal-dl-ligne {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  font-size: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dotted var(--c-creme-off);
}

.legal-dl-ligne:last-child { border-bottom: none; padding-bottom: 0; }

.legal-dl-ligne dt {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  padding-top: 0.1rem;
}

.legal-dl-ligne dd {
  color: var(--c-bois-fonce);
  line-height: 1.5;
}

.legal-dl-ligne dd a {
  color: var(--c-bois-moyen);
}

/* ── Tableau HTML ── */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.legal-table th {
  background-color: var(--c-bois-fonce);
  color: var(--c-or);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-weight: 400;
}

.legal-table td {
  padding: 0.6rem 0.75rem;
  color: #3A3330;
  border-bottom: 1px solid var(--c-creme-off);
  vertical-align: top;
  line-height: 1.5;
}

.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background-color: rgba(201,169,110,0.04); }

.legal-table code {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  background-color: var(--c-creme-off);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  color: var(--c-bois-moyen);
}

/* Note de bas de section */
.legal-note {
  font-size: 0.75rem !important;
  color: var(--c-acier) !important;
  font-style: italic;
  margin-top: 0.5rem;
}

/* ── Responsive pages légales ── */
@media (max-width: 900px) {
  .legal-conteneur {
    grid-template-columns: 1fr;
  }
  .legal-nav {
    position: static;
    display: flex;
    gap: var(--esp-m);
    flex-wrap: wrap;
  }
  .legal-nav__autres { margin-top: 0; padding-top: 0; border-top: none; }
}

@media (max-width: 600px) {
  .legal-dl-ligne { grid-template-columns: 1fr; gap: 0.2rem; }
  .legal-table { font-size: 0.75rem; }
  .legal-table th, .legal-table td { padding: 0.4rem 0.5rem; }
}


/* ================================================================
   19. FICHES PRODUITS (sous-dossier produits/)
================================================================ */

.fiche-main {
  padding: var(--esp-m) 0 var(--esp-xl);
  background-color: var(--c-creme);
}

.fiche-breadcrumb {
  margin-bottom: var(--esp-m);
  padding-top: var(--esp-s);
}

/* ── Grille principale photo + infos ── */
.fiche-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-xl);
  align-items: start;
  margin-bottom: var(--esp-xl);
}

/* ── Galerie ── */
.fiche-galerie {
  display: flex;
  flex-direction: column;
  gap: var(--esp-s);
  position: sticky;
  top: calc(var(--h-header) + var(--esp-s));
}

.fiche-photo-placeholder--grande {
  aspect-ratio: 1;
  background-color: var(--c-creme-off);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-galerie__miniatures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.fiche-miniature {
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color var(--transition);
}

.fiche-miniature--active,
.fiche-miniature:hover {
  border-color: var(--c-or);
}

.fiche-photo-placeholder--mini {
  aspect-ratio: 1;
  background-color: var(--c-creme-off);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-photo-placeholder--mini .placeholder-label {
  font-size: 0.5rem;
}

/* ── Vraies photos produit ── */
.fiche-photo-principale {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 2px;
  border: 1px solid var(--c-creme-off);
  background-color: var(--c-creme-off);
  display: block;
}

.fiche-photo-mini {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

/* ── Mention photos non-contractuelles ── */
.fiche-mention-bois {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--c-acier);
  line-height: 1.6;
  font-style: italic;
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0.6rem 0.85rem;
  background-color: rgba(201, 169, 110, 0.06);
  border-left: 2px solid var(--c-or);
  border-radius: 2px;
}

.fiche-mention-bois__icone {
  color: var(--c-or);
  font-size: 0.5rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

/* ── Infos produit ── */
.fiche-infos__entete {
  display: flex;
  align-items: center;
  gap: var(--esp-s);
  margin-bottom: 0.5rem;
}

.fiche-categorie {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0;
}

.fiche-badge-nouveau {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: var(--c-bois-fonce);
  color: var(--c-or);
  padding: 0.2rem 0.5rem;
  border-radius: 1px;
}

.fiche-titre {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--c-bois-fonce);
  margin-bottom: 0.35rem;
  line-height: 1.1;
}

.fiche-ref {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  margin-bottom: var(--esp-s);
}

.fiche-ref span { color: var(--c-bois-moyen); }

/* Prix */
.fiche-prix-bloc {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.fiche-prix {
  font-family: var(--f-titre);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--c-bois-fonce);
  line-height: 1;
}

.fiche-prix-mention {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--c-acier);
  text-transform: uppercase;
}

.fiche-port-mention {
  font-size: 0.75rem;
  color: var(--c-acier);
  margin-bottom: var(--esp-s);
}

/* Description courte */
.fiche-desc {
  font-size: 0.92rem;
  line-height: 1.8;
  color: #3A3330;
  margin-bottom: var(--esp-m);
  padding-bottom: var(--esp-m);
  border-bottom: 1px solid var(--c-creme-off);
}

/* Specs */
.fiche-specs {
  margin-bottom: var(--esp-m);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fiche-spec-ligne {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--c-creme-off);
  font-size: 0.85rem;
}

.fiche-spec-ligne:last-child { border-bottom: none; }

.fiche-spec-ligne dt {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-acier);
  padding-top: 0.1rem;
}

.fiche-spec-ligne dd {
  color: var(--c-bois-fonce);
  line-height: 1.5;
}

/* Délai */
.fiche-delai {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background-color: rgba(201, 169, 110, 0.08);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  margin-bottom: var(--esp-m);
  font-size: 0.82rem;
  color: var(--c-bois-fonce);
}

.fiche-delai__icone {
  color: var(--c-or);
  font-size: 0.45rem;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

/* Bouton commande */
.fiche-commande {
  margin-bottom: var(--esp-m);
}

.fiche-btn-commande {
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.fiche-commande__mention {
  font-size: 0.75rem;
  color: var(--c-acier);
  text-align: center;
  margin-bottom: 0;
}

/* Réassurance */
.fiche-reassurance {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
}

.fiche-reassurance-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--c-acier);
}

.fiche-reassurance-item__puce {
  color: var(--c-or);
  font-size: 0.4rem;
  flex-shrink: 0;
}

/* ── Onglets ── */
.fiche-onglets {
  margin-bottom: var(--esp-xl);
  border: 1px solid var(--c-creme-off);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--c-blanc);
}

.fiche-onglets__nav {
  display: flex;
  border-bottom: 1px solid var(--c-creme-off);
  background-color: var(--c-creme-off);
}

.fiche-onglet-btn {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-acier);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
              background-color var(--transition);
}

.fiche-onglet-btn:hover {
  color: var(--c-bois-fonce);
  background-color: rgba(255,255,255,0.5);
}

.fiche-onglet-btn--actif {
  color: var(--c-bois-fonce);
  border-bottom-color: var(--c-or);
  background-color: var(--c-blanc);
}

.fiche-onglet-contenu {
  padding: var(--esp-m) var(--esp-m) var(--esp-l);
}

.fiche-onglet-titre {
  font-size: 1.4rem;
  color: var(--c-bois-fonce);
  margin-bottom: 1rem;
}

.fiche-onglet-sous-titre {
  font-size: 1rem;
  color: var(--c-bois-moyen);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.fiche-onglet-contenu p {
  font-size: 0.87rem;
  line-height: 1.85;
}

.fiche-onglet-note {
  background-color: var(--c-creme);
  border-left: 3px solid var(--c-acier-clair);
  padding: 1rem 1.25rem;
  border-radius: 2px;
  margin-top: var(--esp-m);
}

.fiche-onglet-note p {
  margin-bottom: 0;
  font-size: 0.83rem;
  color: var(--c-acier);
}

/* ── Produits associés ── */
.fiche-associes {
  margin-top: var(--esp-xl);
  padding-top: var(--esp-l);
  border-top: 1px solid var(--c-creme-off);
}

.fiche-associes__titre {
  margin-bottom: var(--esp-l);
}

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

/* ── Responsive fiches produits ── */
@media (max-width: 900px) {
  .fiche-grille {
    grid-template-columns: 1fr;
    gap: var(--esp-l);
  }
  .fiche-galerie { position: static; }
  .fiche-associes__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .fiche-onglets__nav { flex-wrap: wrap; }
  .fiche-onglet-btn { padding: 0.75rem 1rem; font-size: 0.6rem; }
  .fiche-associes__grille { grid-template-columns: 1fr; }
  .fiche-spec-ligne { grid-template-columns: 1fr; gap: 0.1rem; }
  .fiche-galerie__miniatures { grid-template-columns: repeat(3, 1fr); }
}


/* ================================================================
   20. PANIER, COMMANDE, CONFIRMATION
================================================================ */

/* ── Notification ajout panier ── */
#jcb-notif {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--c-bois-fonce);
  color: var(--c-blanc);
  font-family: var(--f-corps);
  font-size: 0.85rem;
  padding: 0.85rem 1.5rem;
  border-left: 3px solid var(--c-or);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 999;
  pointer-events: none;
  max-width: 320px;
}

#jcb-notif.jcb-notif--visible {
  transform: translateY(0);
  opacity: 1;
}

/* ── Bouton ajouter au panier sur les fiches ── */
.fiche-btn-ajouter {
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.fiche-btn-contact {
  width: 100%;
  text-align: center;
}

/* ── Page panier ── */
.panier-main {
  padding: var(--esp-l) 0 var(--esp-xl);
  background-color: var(--c-creme);
  min-height: 60vh;
}

.panier-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--esp-xl);
  align-items: start;
}

.panier-vide {
  font-size: 1rem;
  color: var(--c-acier);
  padding: var(--esp-l) 0;
  grid-column: 1 / -1;
}
.panier-vide a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
}

/* Tableau panier */
.panier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.panier-table th {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-acier);
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--c-creme-off);
}

.panier-table td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--c-creme-off);
  vertical-align: middle;
}

.panier-nom { font-weight: 500; color: var(--c-bois-fonce); }
.panier-ref { font-family: var(--f-mono); font-size: 0.65rem; color: var(--c-acier); }
.panier-prix, .panier-sous-total { font-family: var(--f-titre); font-size: 1rem; color: var(--c-bois-fonce); }
.panier-sous-total { font-weight: 600; }

/* Contrôles quantité */
.panier-qte { white-space: nowrap; }
.panier-qte-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1.5px solid var(--c-creme-off);
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--c-bois-fonce);
  transition: border-color var(--transition), background-color var(--transition);
  vertical-align: middle;
}
.panier-qte-btn:hover { border-color: var(--c-or); background-color: rgba(201,169,110,0.08); }
.panier-qte-val { display: inline-block; width: 28px; text-align: center; font-weight: 500; vertical-align: middle; }

.panier-suppr {
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; color: var(--c-acier-clair);
  transition: color var(--transition);
  padding: 0.25rem;
}
.panier-suppr:hover { color: #C0392B; }

/* Récap panier */
.panier-recap {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-top: 3px solid var(--c-or);
  padding: 1.5rem;
  border-radius: 2px;
  position: sticky;
  top: calc(var(--h-header) + var(--esp-s));
}

.panier-recap__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.5rem;
}

.panier-recap__ligne--note {
  font-size: 0.72rem;
  color: var(--c-acier);
  justify-content: flex-start;
  font-style: italic;
}

.panier-recap__tva {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--c-acier);
  text-transform: uppercase;
  margin-bottom: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
  padding-top: 0.5rem;
}

.panier-recap__btn {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
}

.panier-recap__securite {
  font-size: 0.72rem;
  color: var(--c-acier);
  text-align: center;
  margin-bottom: 0;
}

/* ── Page commande ── */
.commande-main {
  padding: var(--esp-l) 0 var(--esp-xl);
  background-color: var(--c-creme);
}

.commande-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--esp-xl);
  align-items: start;
}

.commande-recap-liste {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-top: 3px solid var(--c-or);
  padding: 1.5rem;
  border-radius: 2px;
  position: sticky;
  top: calc(var(--h-header) + var(--esp-s));
}

.commande-recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-creme-off);
  font-size: 0.85rem;
}

.commande-recap-nom { color: var(--c-bois-fonce); }
.commande-recap-prix { font-weight: 500; color: var(--c-bois-fonce); white-space: nowrap; }

.commande-recap-total {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0 0.25rem;
  font-size: 1rem;
  color: var(--c-bois-fonce);
}

.commande-recap-total strong {
  font-family: var(--f-titre);
  font-size: 1.3rem;
}

.commande-recap-note {
  font-size: 0.72rem;
  color: var(--c-acier);
  font-style: italic;
  margin-bottom: 0;
}

/* Erreur formulaire */
.form-erreur {
  background-color: #FFF5F5;
  border: 1px solid #C0392B;
  border-left: 3px solid #C0392B;
  color: #C0392B;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  border-radius: 2px;
  margin-bottom: var(--esp-s);
}

/* ── Page confirmation ── */
.confirmation-main {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
  min-height: 60vh;
}

.confirmation-bloc {
  max-width: 640px;
}

.confirmation-num {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--c-or);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(201,169,110,0.08);
  border-left: 3px solid var(--c-or);
  display: inline-block;
}

.confirmation-recap {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  padding: 1.5rem;
  border-radius: 2px;
  margin-top: var(--esp-m);
}

.confirmation-recap__titre {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.75rem;
}

.confirmation-recap__lignes {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--c-acier);
  white-space: pre-wrap;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  background: none;
  border: none;
  padding: 0;
}

.confirmation-recap__total {
  font-size: 0.9rem;
  color: var(--c-bois-fonce);
  border-top: 1px solid var(--c-creme-off);
  padding-top: 0.75rem;
  margin-bottom: 0;
}

/* ── Responsive panier / commande ── */
@media (max-width: 900px) {
  .panier-inner,
  .commande-inner { grid-template-columns: 1fr; }
  .panier-recap,
  .commande-recap-liste { position: static; }
  #jcb-notif { right: 1rem; left: 1rem; max-width: none; }
}

/* ── Styles supplémentaires page commande ── */
.commande-intro {
  font-size: 0.92rem;
  color: var(--c-acier);
  margin-bottom: var(--esp-m);
  line-height: 1.8;
}

.commande-section-titre {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--esp-s);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-creme-off);
}

.commande-info-virement {
  background-color: rgba(201, 169, 110, 0.07);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-left: 3px solid var(--c-or);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-bottom: var(--esp-m);
}

.commande-info-virement__titre {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: 0.4rem;
}

.commande-info-virement__texte {
  font-size: 0.82rem;
  color: var(--c-bois-fonce);
  line-height: 1.7;
  margin-bottom: 0;
}

.commande-recap-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--esp-s);
}

.commande-retour-panier {
  margin-top: var(--esp-s);
  padding-top: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
}

/* ── Bloc RIB visible sur la page commande ── */
.commande-rib {
  margin-top: 0.75rem;
  background-color: rgba(201, 169, 110, 0.07);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-left: 3px solid var(--c-or);
  border-radius: 2px;
  padding: 0.85rem 1rem;
}

.commande-rib__ligne {
  display: flex;
  gap: 1rem;
  padding: 0.2rem 0;
  font-size: 0.82rem;
}

.commande-rib__ligne dt {
  font-weight: 600;
  color: var(--c-bois-fonce);
  min-width: 80px;
  flex-shrink: 0;
}

.commande-rib__ligne dd {
  color: var(--c-noir);
  font-family: var(--f-mono);
  font-size: 0.78rem;
}


/* ================================================================
   21. PAGE COLLABORATION (JCB × JujuGrav)
================================================================ */

/* ── Intro ── */
.collab-intro {
  background-color: var(--c-creme-off);
  padding: var(--esp-l) 0;
}

.collab-intro__inner {
  max-width: 680px;
}

.collab-intro__texte {
  font-family: var(--f-titre);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-bois-fonce);
  margin-bottom: 0;
}

/* ── Duo de cartes JCB / JujuGrav ── */
.collab-duo {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.collab-duo__titre {
  text-align: center;
  margin-bottom: var(--esp-l);
}

.collab-duo__grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--esp-m);
  align-items: center;
  margin-bottom: var(--esp-l);
}

.collab-carte {
  padding: var(--esp-m) 1.75rem;
  border-radius: 2px;
  text-align: center;
}

.collab-carte--jcb {
  background-color: var(--c-noir);
  border-top: 3px solid var(--c-or);
}

.collab-carte--jujugrav {
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-top: 3px solid var(--c-bois-chaud);
}

.collab-carte__label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.collab-carte--jcb .collab-carte__label { color: var(--c-or); }
.collab-carte--jujugrav .collab-carte__label { color: var(--c-bois-chaud); }

.collab-carte__nom {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}

.collab-carte--jcb .collab-carte__nom { color: var(--c-blanc); }
.collab-carte--jujugrav .collab-carte__nom { color: var(--c-bois-fonce); }

.collab-carte__sous-titre {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  margin-bottom: var(--esp-s);
}

.collab-carte--jcb .collab-carte__sous-titre { color: var(--c-acier-clair); }
.collab-carte--jujugrav .collab-carte__sous-titre { color: var(--c-acier); }

.collab-carte__texte {
  font-size: 0.85rem;
  line-height: 1.75;
  margin-bottom: var(--esp-m);
}

.collab-carte--jcb .collab-carte__texte { color: var(--c-acier-clair); }
.collab-carte--jujugrav .collab-carte__texte { color: var(--c-acier); }

.collab-carte__btn {
  width: 100%;
  text-align: center;
}

/* Séparateur central × */
.collab-duo__separateur {
  display: flex;
  align-items: center;
  justify-content: center;
}

.collab-duo__symbole {
  font-family: var(--f-titre);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--c-or);
}

/* Encart indépendance juridique */
.callout-independance {
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--c-blanc);
  border: 1px solid var(--c-creme-off);
  border-left: 3px solid var(--c-acier);
  border-radius: 2px;
  padding: 1.1rem 1.5rem;
}

.callout-independance p {
  font-size: 0.84rem;
  color: var(--c-acier);
  line-height: 1.75;
  margin-bottom: 0;
}

.callout-independance strong {
  color: var(--c-bois-fonce);
}

/* ── Process en 4 étapes ── */
.collab-process {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme-off);
}

.collab-process__titre {
  text-align: center;
  margin-bottom: 0.75rem;
}

.collab-process__chapeau {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--esp-l);
  color: var(--c-acier);
  font-size: 0.9rem;
  line-height: 1.75;
}

.collab-etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-m);
  counter-reset: collab-etape;
}

.collab-etape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-s);
  position: relative;
}

.collab-etape:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: calc(2.5rem + 1rem);
  right: calc(-1 * var(--esp-m));
  height: 1px;
  background: linear-gradient(to right, var(--c-or), var(--c-creme-off));
}

.collab-etape__num {
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--c-or);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-or);
  flex-shrink: 0;
  background-color: var(--c-blanc);
  position: relative;
  z-index: 1;
}

.collab-etape__titre {
  font-size: 1rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.4rem;
}

.collab-etape__texte {
  font-size: 0.82rem;
  color: var(--c-acier);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ── Produits éligibles ── */
.collab-produits {
  padding: var(--esp-xl) 0;
  background-color: var(--c-creme);
}

.collab-produits__titre {
  text-align: center;
  margin-bottom: var(--esp-l);
}

.collab-produits__note {
  text-align: center;
  max-width: 600px;
  margin: var(--esp-l) auto 0;
  font-size: 0.85rem;
  color: var(--c-acier);
  line-height: 1.75;
}

.collab-produits__note a {
  color: var(--c-bois-moyen);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive collaboration ── */
@media (max-width: 900px) {
  .collab-duo__grille {
    grid-template-columns: 1fr;
  }
  .collab-duo__separateur {
    transform: rotate(90deg);
    padding: 0.5rem 0;
  }
  .collab-etapes {
    grid-template-columns: repeat(2, 1fr);
  }
  .collab-etape::after { display: none; }
}

@media (max-width: 600px) {
  .collab-etapes {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   22. OPTION GRAVURE (JCB × JujuGrav) — fiche produit, panier,
       commande, confirmation
================================================================ */

/* ── Bloc option sur la fiche produit ── */
.fiche-gravure-option {
  background-color: rgba(176, 125, 82, 0.06);
  border: 1px solid rgba(176, 125, 82, 0.25);
  border-left: 3px solid var(--c-bois-chaud);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-bottom: var(--esp-m);
}

.fiche-gravure-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.fiche-gravure-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.15rem;
  accent-color: var(--c-bois-chaud);
  cursor: pointer;
}

.fiche-gravure-texte {
  font-size: 0.85rem;
  color: var(--c-bois-fonce);
  line-height: 1.5;
}

.fiche-gravure-texte strong {
  color: var(--c-bois-chaud);
}

.fiche-gravure-champ {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(176, 125, 82, 0.3);
}

.fiche-gravure-champ .form-input {
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

.fiche-gravure-note {
  font-size: 0.74rem;
  color: var(--c-acier);
  line-height: 1.6;
  margin-bottom: 0;
}

.fiche-gravure-note a {
  color: var(--c-bois-chaud);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Tags gravure dans le tableau panier ── */
.panier-gravure-tag {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--c-bois-chaud);
  font-style: italic;
}

.panier-gravure-prix {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--c-bois-chaud);
}

/* ── Avertissement double-RIB dans le récap panier ── */
.panier-recap__ligne--total {
  border-top: 1px solid var(--c-creme-off);
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  font-size: 0.95rem;
}

.panier-recap__ligne--total strong {
  font-family: var(--f-titre);
  font-size: 1.2rem;
}

.panier-recap__avertissement {
  background-color: rgba(176, 125, 82, 0.08);
  border: 1px solid rgba(176, 125, 82, 0.3);
  border-radius: 2px;
  padding: 0.65rem 0.85rem;
  font-size: 0.76rem;
  color: var(--c-bois-fonce);
  line-height: 1.6;
  margin-bottom: var(--esp-s);
}

.panier-recap__avertissement a {
  color: var(--c-bois-chaud);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Page commande : ligne gravure + avertissement ── */
.commande-recap-ligne--gravure {
  padding-left: 1rem;
  font-style: italic;
}

.commande-recap-ligne--gravure .commande-recap-nom,
.commande-recap-ligne--gravure .commande-recap-prix {
  color: var(--c-bois-chaud);
  font-size: 0.8rem;
}

.commande-recap-avertissement {
  background-color: rgba(176, 125, 82, 0.08);
  border-left: 3px solid var(--c-bois-chaud);
  border-radius: 2px;
  padding: 0.65rem 0.85rem;
  font-size: 0.78rem;
  color: var(--c-bois-fonce);
  margin-top: var(--esp-s);
}

/* ── Page confirmation : double récap ── */
.confirmation-recap--gravure {
  border-left: 3px solid var(--c-bois-chaud);
  margin-top: var(--esp-s);
}

.confirmation-recap--gravure .confirmation-recap__titre {
  color: var(--c-bois-chaud);
}

.confirmation-total-general {
  font-size: 1rem;
  color: var(--c-bois-fonce);
  margin-top: var(--esp-m);
  padding-top: var(--esp-s);
  border-top: 1px solid var(--c-creme-off);
}

.confirmation-total-general strong {
  font-family: var(--f-titre);
  font-size: 1.3rem;
}

/* ── Bouton de secours mail JujuGrav ── */
.confirmation-bouton-secours {
  background-color: rgba(176, 125, 82, 0.07);
  border: 1px solid rgba(176, 125, 82, 0.3);
  border-left: 3px solid var(--c-bois-chaud);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-top: var(--esp-s);
  margin-bottom: var(--esp-m);
}

.confirmation-bouton-secours__texte {
  font-size: 0.82rem;
  color: var(--c-bois-fonce);
  margin-bottom: 0.75rem;
}


/* ================================================================
   23. GALERIE — mosaïque compacte + lightbox
================================================================ */

/* ── Grille mosaïque (vignettes petites et serrées) ── */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.galerie-item {
  position: relative;
}

.galerie-item__lien {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}

.galerie-item__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.galerie-item__lien:hover .galerie-item__photo {
  transform: scale(1.05);
  opacity: 0.92;
}

.galerie-item__photo--placeholder {
  background-color: var(--c-creme-off);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.galerie-item__legende {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--c-acier);
  text-align: center;
  margin-top: 0.4rem;
  padding: 0 0.2rem;
}

/* ── Lightbox plein écran ── */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(30, 28, 27, 0.96);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__contenu {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox__image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.lightbox__legende {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-acier-clair);
  text-align: center;
}

.lightbox__fermer {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,169,110,0.3);
  color: var(--c-blanc);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), border-color var(--transition);
}

.lightbox__fermer:hover {
  background-color: rgba(201,169,110,0.15);
  border-color: var(--c-or);
}

.lightbox__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,169,110,0.3);
  color: var(--c-or);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), border-color var(--transition);
}

.lightbox__fleche:hover {
  background-color: rgba(201,169,110,0.15);
  border-color: var(--c-or);
}

.lightbox__fleche--gauche { left: 1.5rem; }
.lightbox__fleche--droite { right: 1.5rem; }

/* ── Option essence sur fiche produit (chêne/noyer sur demande) ── */
.fiche-option-essence {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background-color: rgba(201, 169, 110, 0.07);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  margin-bottom: var(--esp-m);
  font-size: 0.82rem;
  color: var(--c-bois-fonce);
}

.fiche-option-essence__icone {
  color: var(--c-or);
  font-size: 0.45rem;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

/* ── Responsive galerie & lightbox ── */
@media (max-width: 900px) {
  .galerie-grille { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .galerie-grille { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .lightbox__fleche { width: 40px; height: 40px; font-size: 1.4rem; }
  .lightbox__fleche--gauche { left: 0.5rem; }
  .lightbox__fleche--droite { right: 0.5rem; }
  .lightbox__fermer { top: 0.75rem; right: 0.75rem; width: 38px; height: 38px; }
}


/* ================================================================
   25. SECTION AGENCEMENT SUR-MESURE (accueil)
================================================================ */

.agencement-cta {
  background-color: var(--c-noir);
  border-top: 3px solid var(--c-or);
  padding: var(--esp-xl) 0;
}

.agencement-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-xl);
  align-items: center;
}

.agencement-cta__texte {
  max-width: 640px;
}

.agencement-cta__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 300;
  color: var(--c-blanc);
  line-height: 1.2;
  margin-bottom: var(--esp-s);
}

.agencement-cta__titre em {
  color: var(--c-or);
  font-style: italic;
}

.agencement-cta__desc {
  font-size: 0.9rem;
  color: var(--c-acier-clair);
  line-height: 1.8;
  margin-bottom: var(--esp-m);
}

.agencement-cta__icone {
  font-size: 5rem;
  color: rgba(201, 169, 110, 0.12);
  line-height: 1;
  user-select: none;
}

@media (max-width: 700px) {
  .agencement-cta__inner { grid-template-columns: 1fr; }
  .agencement-cta__visuel { display: none; }
}