/* Happy Delice - feuille de style.
   Reprend (portage manuel, sans build Tailwind) le design de reference de
   happy-delice-php/frontend : les regles globales de src/index.css
   (footer, bandeau whatsapp, features, panier, formulaires) plus les styles
   "yc-" jusque-la geres en <style> scopee dans chaque composant React
   (Header, Hero, ProductsSection, BannerBaker, Testimonials) -- repris ici
   tels quels, seules les couleurs template-litteral (${ACCENT_RED} etc.)
   sont remplacees par leur valeur en dur. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --color-accent: #b84533;
  --color-accent-dark: #9a3a2a;
  --color-text: #1a1a1a;
  --color-text-light: #6a6a6a;
  --color-text-muted: #9a9a9a;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f6f4;
  --color-border: #e8e4e0;
  --color-border-light: #f0ece8;
  --max-width: 1200px;
  --header-height: 104px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.7;
  background: #fff;
}

a { color: var(--color-accent); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--color-accent-dark); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-text); margin: 0; line-height: 1.2; }

img { max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; margin: 0; }
input, textarea, select, button { font-family: inherit; }

/* Pousse le contenu sous le header fixe sur toutes les pages sauf l'accueil
   (dont le Hero gere lui-meme son propre espace sous le header transparent). */
.page-main--offset { padding-top: var(--header-height); }

/* ===== SECTION (structure generique) ===== */
.section { padding: 100px 32px; }
.section + .section { padding-top: 60px; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-subtitle {
  font-size: 11px;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 16px;
}
.section-header h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.3px; }

/* ===== FEATURES ===== */
.features { background: #fff; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.feature-card { text-align: center; padding: 40px 32px; }
.feature-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: #f5f3f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}
.feature-card h3 { font-size: 20px; margin-bottom: 16px; }
.feature-card p { font-size: 15px; color: var(--color-text-light); line-height: 1.7; margin: 0; }

/* ===== FOOTER ===== */
.footer { background: #1a1a1a; color: rgba(255,255,255,0.7); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 2fr; gap: 40px; padding: 50px 0; }
.footer-brand { max-width: 340px; }
.footer-logo-img { height: 52px; margin-bottom: 20px; padding: 8px 16px; background: #fff; border-radius: 4px; }
.footer-desc { font-size: 14px; line-height: 1.8; margin: 0 0 24px; color: rgba(255,255,255,0.5); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  transition: all 0.3s;
  border-radius: 50%;
}
.footer-social a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col h4 { font-size: 12px; color: #fff; letter-spacing: 2.5px; margin-bottom: 24px; font-weight: 600; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--color-accent); }
.newsletter p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 20px; }
.newsletter-form { display: flex; }
.newsletter-form[hidden] { display: none; } /* voir la note sur .newsletter-success[hidden] plus bas */
.newsletter-form input {
  flex: 1; padding: 14px 18px; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.12); border-right: none;
  background: transparent; color: #fff; outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.3); }
.newsletter-form button {
  padding: 14px 24px; background: var(--color-accent); color: #fff;
  border: none; cursor: pointer; transition: background 0.3s;
}
.newsletter-form button:hover { background: var(--color-accent-dark); }
.newsletter-success {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #10b981;
}
/* Bug corrige (etape 11) : cette regle avait la meme specificite que la
   regle native [hidden] { display: none } du navigateur mais, venant de la
   feuille de style de l'auteur, l'emportait toujours sur elle -- l'attribut
   hidden etait donc sans effet et le message restait visible en
   permanence, meme sans qu'aucun JS ne l'affiche jamais (public/js/footer.js
   n'existait pas non plus, voir PROGRESSION.md). */
.newsletter-success[hidden] { display: none; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-payments { display: flex; gap: 10px; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); margin: 0; }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* ===== WHATSAPP BANNER ===== */
.whatsapp-banner { background: #fff; padding: 20px 32px; border-bottom: 1px solid var(--color-border-light); }
.whatsapp-banner-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.whatsapp-text { font-size: 14px; color: var(--color-text); flex: 1; }
.whatsapp-text small { font-size: 12px; color: var(--color-text-muted); }
.whatsapp-icon { flex-shrink: 0; color: #25d366; display: flex; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: #25d366; color: #fff; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.3s;
  text-decoration: none; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.btn-whatsapp:hover { background: #1da851; color: #fff; }

@media (max-width: 1024px) {
  .whatsapp-banner-inner { flex-direction: column; text-align: center; }
}

/* ===== FORMS / AUTH (generique) ===== */
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--color-text); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 14px 18px; font-size: 15px;
  border: 1px solid var(--color-border); outline: none; transition: border-color 0.3s; background: #fff;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--color-accent); }
.auth-error { color: #c0392b; font-size: 14px; margin-bottom: 16px; }

/* ===== CART DRAWER ===== */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.cart-overlay--open { opacity: 1; pointer-events: all; }
.cart-drawer {
  position: fixed; top: 0; right: -440px; width: 440px; height: 100%;
  background: #fff; z-index: 2001; display: flex; flex-direction: column;
  transition: right 0.3s; max-width: 100vw;
}
.cart-drawer--open { right: 0; }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--color-border-light); }
.cart-header h2 { font-size: 20px; }
.cart-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-muted); padding: 4px; display: flex; }
.cart-body { flex: 1; overflow-y: auto; padding: 28px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: var(--color-text-muted); gap: 12px; }
.cart-empty p { font-size: 15px; margin: 0; }
.cart-items { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
.cart-item { display: flex; gap: 20px; }
.cart-item-img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h3 { font-size: 15px; margin-bottom: 6px; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cart-item-price { font-size: 15px; font-weight: 600; }
.cart-qty { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cart-qty button { width: 28px; height: 28px; border: 1px solid var(--color-border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cart-item-remove { background: none; border: none; color: #999; cursor: pointer; padding: 4px; transition: color 0.3s; display: flex; }
.cart-item-remove:hover { color: var(--color-accent); }
.cart-footer { padding: 16px 28px; border-top: 1px solid var(--color-border-light); }
.cart-total-line { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.cart-total-price { font-weight: 700; font-size: 16px; }
.cart-shipping { font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.cart-checkout-btn {
  width: 100%; padding: 16px; background: #1a1a1a; color: #fff; border: none;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  cursor: pointer; transition: background 0.3s;
}
.cart-checkout-btn:hover { background: #333; }
.btn-back-home {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 28px;
  background: var(--color-accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; border: none; cursor: pointer;
}

@media (max-width: 1024px) {
  .cart-drawer { width: 100%; right: -100%; }
  /* Bug corrige (test mobile reel) : ".cart-drawer--open { right: 0; }"
     (plus haut, hors media query) et la regle ".cart-drawer" ci-dessus ont
     la meme specificite (une classe chacune) -- sans cette redeclaration,
     celle-ci (plus bas dans la feuille) l'emportait TOUJOURS sur
     "--open" des que le viewport passait sous 1024px, quel que soit l'etat
     reel du tiroir : le panier ne pouvait jamais s'ouvrir visuellement sur
     mobile, meme si le JS (cart.js) togglait la classe correctement. */
  .cart-drawer--open { right: 0; }
}

/* ===== BOUTON RETOUR EN HAUT (ajout UX independant, etape 22) ===== */
.back-to-top {
  position: fixed; right: 28px; bottom: 28px; width: 46px; height: 46px;
  border-radius: 50%; border: none; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, right 0.3s ease, visibility 0.3s;
  z-index: 1500;
}
.back-to-top:hover { background: var(--color-accent-dark); }
.back-to-top--visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Decale a gauche du tiroir panier (440px) plutot que de jouer sur le
   z-index -- evite tout chevauchement avec le bouton "Commander" du tiroir. */
.back-to-top--shifted { right: 468px; }
@media (max-width: 1024px) {
  /* Le tiroir passe en pleine largeur sous ce seuil (voir .cart-drawer
     ci-dessus) : aucune position de repli sensee, le bouton est masque
     tant que le panier est ouvert plutot que de chevaucher son contenu. */
  .back-to-top--shifted { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* =====================================================================
   Styles "yc-" -- portage des <style> scopees des composants React
   Header.jsx, Hero.jsx, ProductsSection.jsx, BannerBaker.jsx, Testimonials.jsx
   ===================================================================== */

/* ----- yc-header (Header.jsx) ----- */
.yc-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  color: #fff; background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.yc-header--scrolled { background: #fff; color: #341610; box-shadow: 0 6px 22px rgba(0,0,0,0.08); }
.yc-announcement {
  height: 28px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(73,35,28,0.72); transition: background 0.3s ease;
}
.yc-header--scrolled .yc-announcement { background: #b84533; }
.yc-announcement strong { font-weight: 900; }
.yc-header-inner {
  position: relative; height: 76px; display: grid;
  grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr);
  align-items: center; padding: 0 28px;
  background: linear-gradient(to bottom, rgba(35,13,9,0.52), rgba(35,13,9,0));
  transition: background 0.3s ease;
}
.yc-header--scrolled .yc-header-inner { background: #fff; }
.yc-menu-btn {
  display: none; position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 16px; padding: 0; border: 0; background: transparent; color: currentColor; cursor: pointer; z-index: 3;
}
.yc-menu-btn span { display: block; width: 18px; height: 2px; margin: 4px 0; background: currentColor; border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; }
.yc-menu-btn--active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yc-menu-btn--active span:nth-child(2) { opacity: 0; }
.yc-menu-btn--active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.yc-nav { display: flex; align-items: center; min-width: 0; }
.yc-nav-left { grid-column: 1; justify-content: flex-end; padding-left: 42px; padding-right: 54px; }
.yc-nav-right { grid-column: 3; justify-content: flex-start; padding-left: 54px; padding-right: 150px; }
.yc-nav ul { display: flex; align-items: center; gap: clamp(18px,2vw,34px); margin: 0; padding: 0; list-style: none; min-width: 0; }
.yc-nav a { color: currentColor; text-decoration: none; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.25s ease; }
.yc-nav a:hover { opacity: 0.65; }
.yc-logo { grid-column: 2; justify-self: center; align-self: center; width: 150px; height: 70px; display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 2; }
.yc-logo img { width: 104px; max-height: 64px; object-fit: contain; filter: brightness(0) invert(1); transition: filter 0.3s ease; }
.yc-header--scrolled .yc-logo img { filter: none; }
.yc-actions { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 18px; z-index: 3; }
.yc-icon-btn { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: currentColor; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.yc-icon-btn svg { display: block; width: 20px; height: 20px; stroke: currentColor; flex-shrink: 0; }
.yc-cart-count {
  position: absolute; top: -9px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #fff; color: #341610; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.yc-header--scrolled .yc-cart-count { background: #9a3a2a; color: #fff; }
.yc-mobile-nav-links { display: none; }
.yc-mobile-dropdown { display: none; }
.yc-mobile-backdrop { display: none; }

@media (max-width: 980px) {
  .yc-menu-btn { display: block; order: 1; }
  .yc-nav-left, .yc-nav-right { display: none; }
  .yc-header-inner { display: flex; justify-content: space-between; padding: 0 22px; }
  .yc-logo { order: 2; margin-left: 15px; width: auto; }
  .yc-mobile-nav-links { display: flex; order: 3; gap: 15px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; }
  .yc-mobile-nav-links a { text-decoration: none; color: currentColor; }
  .yc-actions { position: static; order: 4; gap: 12px; }
  .yc-mobile-dropdown {
    display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; color: #341610;
    overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px);
    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 16px 30px rgba(0,0,0,0.14);
  }
  .yc-mobile-dropdown--open { max-height: 420px; opacity: 1; transform: translateY(0); }
  .yc-mobile-dropdown ul { list-style: none; margin: 0; padding: 6px 24px 16px; }
  .yc-mobile-dropdown li + li { border-top: 1px solid rgba(52,22,16,0.08); }
  .yc-mobile-dropdown a { display: block; padding: 14px 0; color: #341610; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  /* Bug corrige (test mobile reel) : z-index etait a 999, superieur au
     niveau d'empilement implicite ("auto") de tout le contenu de
     .yc-header-inner (liens du menu deroulant, bouton hamburger, bouton
     panier -- .yc-actions perd son propre z-index:3 au profit de
     position:static sur mobile, voir plus haut). Une fois le menu ouvert,
     ce backdrop passait devant TOUT le header (pas seulement la zone sous
     le bandeau qu'il est cense assombrir) et interceptait le moindre
     clic/tap -- menu illisible au clic, bouton panier inutilisable tant que
     le menu restait ouvert. .yc-header a deja sa propre pile d'empilement
     (position: fixed + z-index: 1000) : un z-index negatif ici le place
     derriere le reste du header EN LOCAL, tout en restant globalement
     au-dessus du contenu de page (herite du z-index de .yc-header) --
     exactement le comportement voulu pour un "backdrop". */
  .yc-mobile-backdrop { display: block; position: fixed; inset: 0; background: rgba(20,8,6,0.4); z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .yc-mobile-backdrop--open { opacity: 1; pointer-events: auto; }
}

/* ----- yc-hero (Hero.jsx) ----- */
.yc-hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: #31140e; }
.yc-hero-slide { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: opacity 1000ms ease, transform 6000ms ease; }
.yc-hero-slide-active { opacity: 1; transform: scale(1); z-index: 1; }
.yc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30,11,7,0.22), rgba(30,11,7,0.38)), rgba(74,27,17,0.32); }
.yc-hero-content { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 150px 24px 80px; text-align: center; color: #fff; }
.yc-hero-kicker { margin-bottom: 18px; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; }
.yc-hero-title { max-width: 900px; margin: 0; color: #fff; font-size: clamp(34px,4.2vw,62px); font-weight: 300; line-height: 1.35; letter-spacing: 0.28em; text-transform: uppercase; }
.yc-hero-subtitle { max-width: 820px; margin: 22px 0 0; color: #fff; font-size: clamp(18px,2.1vw,30px); font-weight: 300; line-height: 1.65; letter-spacing: 0.24em; text-transform: uppercase; }
.yc-hero-btn {
  margin-top: 34px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 30px;
  border: 1px solid rgba(255,255,255,0.78); color: #fff; background: transparent; text-decoration: none;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s ease, color 0.25s ease;
}
.yc-hero-btn:hover { background: #fff; color: #35150f; }
.yc-hero-dots { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 13px; }
.yc-hero-dot { width: 7px; height: 7px; padding: 0; border: 1px solid rgba(255,255,255,0.95); border-radius: 50%; background: transparent; cursor: pointer; }
.yc-hero-dot-active { background: #fff; }

@media (max-width: 768px) {
  .yc-hero-content { padding: 126px 22px 76px; }
  .yc-hero-title { font-size: 32px; line-height: 1.45; letter-spacing: 0.18em; }
  .yc-hero-subtitle { font-size: 16px; letter-spacing: 0.13em; }
  .yc-hero-kicker { font-size: 11px; letter-spacing: 0.14em; }
  .yc-hero-btn { padding: 0 22px; font-size: 10px; letter-spacing: 0.16em; }
}

/* ----- yc-products (ProductsSection.jsx) ----- */
.yc-products { width: 100%; padding: 82px 32px 78px; background: #fff; color: #35150f; }
.yc-products-editorial, .yc-products-grid { max-width: 1200px; margin: 0 auto; }
.yc-products-heading { max-width: 760px; margin: 0 auto 62px; text-align: center; }
.yc-products-eyebrow { display: block; margin-bottom: 14px; color: #9a3a2a; font-size: 11px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; }
.yc-products-heading h2 { margin: 0; color: #35150f; font-size: clamp(34px,4vw,58px); font-weight: 300; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; }
.yc-products-heading p { margin: 18px 0 0; color: rgba(53,21,15,0.58); font-size: 14px; line-height: 1.6; }
.yc-products-tabs { display: flex; align-items: center; gap: clamp(34px,5vw,72px); padding-bottom: 34px; border-bottom: 1px solid rgba(53,21,15,0.12); overflow-x: auto; scrollbar-width: none; max-width: 1300px; margin: 0 auto; }
.yc-products-tabs::-webkit-scrollbar { display: none; }
.yc-products-tab { padding: 0; border: 0; background: transparent; color: rgba(154,58,42,0.55); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.yc-products-tab-active { color: #9a3a2a; }
.yc-products-toolbar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1300px; margin: 0 auto; }
.yc-products-count { margin: 0; color: #9a3a2a; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.yc-products-tools { display: flex; align-items: center; gap: 18px; color: #9a3a2a; }
.yc-tool-btn { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: currentColor; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.35; }
.yc-tool-btn-active { opacity: 1; }
.yc-tool-btn svg { width: 18px; height: 18px; display: block; fill: currentColor; stroke: currentColor; }
.yc-tool-divider { width: 1px; height: 17px; background: rgba(154,58,42,0.24); }
.yc-filter-btn { gap: 12px; width: auto; height: 24px; opacity: 1; color: #9a3a2a; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.yc-filter-btn svg { width: 18px; height: 18px; fill: none; stroke-width: 1.7; }
.yc-filter-panel { display: none; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 0 28px; max-width: 1300px; margin: 0 auto; }
.yc-filter-panel-open { display: flex; }
.yc-filter-label { color: rgba(154,58,42,0.7); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.yc-filter-select { min-width: 210px; height: 42px; padding: 0 14px; border: 1px solid rgba(154,58,42,0.25); background: #fff; color: #35150f; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.yc-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.yc-products-editorial { display: flex; flex-direction: column; gap: 2px; }
.yc-editorial-block { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.yc-product { min-width: 0; display: flex; flex-direction: column; }
.yc-product-image { position: relative; width: 100%; aspect-ratio: 1/1.15; overflow: hidden; background: #ead9cf; cursor: pointer; border-radius: 10px; }
.yc-product-info { width: 100%; }
.yc-product-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.45s ease; }
.yc-product:hover .yc-product-image img { transform: scale(1.035); }
.yc-product-like { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.88); color: #35150f; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.yc-product-like-active { background: #9a3a2a; color: #fff; }
.yc-product-add {
  position: absolute; left: 16px; right: 16px; bottom: 16px; min-height: 42px; padding: 0 16px;
  border: 1px solid #35150f; background: #35150f; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  opacity: 0; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease, border-color 0.2s ease; z-index: 3;
}
.yc-product:hover .yc-product-add { opacity: 1; transform: translateY(0); }
.yc-product-add:hover { background: #9a3a2a; border-color: #9a3a2a; }
.yc-product-info { min-height: 58px; padding-top: 12px; display: flex; flex-direction: column; justify-content: flex-start; }
.yc-product-name { min-height: 28px; margin: 0 0 5px; color: #35150f; font-size: 11px; font-weight: 800; line-height: 1.25; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.yc-product-price { margin: 0; color: rgba(53,21,15,0.58); font-size: 12px; line-height: 1.4; }

@media (max-width: 1024px) {
  .yc-products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .yc-editorial-block { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .yc-products { padding: 62px 18px 58px; }
  .yc-products-heading { margin-bottom: 44px; }
  .yc-products-tabs { gap: 30px; padding-bottom: 26px; }
  .yc-products-toolbar { height: auto; padding: 22px 0; align-items: flex-start; }
  .yc-products-tools { gap: 11px; }
  .yc-tool-divider { display: none; }
  .yc-filter-btn { font-size: 10px; letter-spacing: 0.15em; }
  .yc-filter-panel-open { align-items: stretch; flex-direction: column; }
  .yc-products-grid, .yc-editorial-block { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .yc-product-add { opacity: 1; transform: none; }
}

/* ----- yc-baker-banner (BannerBaker.jsx) ----- */
.yc-baker-banner { width: 100%; min-height: 600px; display: flex; background: #35150f; overflow: hidden; }
.yc-baker-card {
  position: relative; flex: 1; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; background-size: cover; background-position: center;
  transition: flex 900ms cubic-bezier(0.19,1,0.22,1), filter 900ms cubic-bezier(0.19,1,0.22,1); will-change: flex;
}
.yc-baker-banner:hover .yc-baker-card { flex: 0.9; }
.yc-baker-banner:hover .yc-baker-card:hover { flex: 1.18; }
.yc-baker-card::before { content: ""; position: absolute; inset: 0; background: rgba(42,18,12,0.24); z-index: 1; transition: background 650ms ease; }
.yc-baker-card:hover::before { background: rgba(42,18,12,0.14); }
.yc-baker-card-light::before { background: rgba(42,18,12,0.18); }
.yc-baker-content { position: relative; z-index: 2; width: min(90%,640px); display: flex; flex-direction: column; align-items: center; transition: transform 700ms cubic-bezier(0.19,1,0.22,1); }
.yc-baker-card:hover .yc-baker-content { transform: translateY(-4px); }
.yc-baker-kicker { position: relative; display: inline-block; margin-bottom: 18px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(53,21,15,0.25); }
.yc-baker-kicker-underline::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 74%; height: 2px; background: #fff; transform: translateX(-50%); }
.yc-baker-title { margin: 0; color: #fff; font-size: clamp(38px,5vw,66px); font-weight: 300; line-height: 1.08; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(53,21,15,0.28); }
.yc-baker-highlight { position: relative; display: inline; padding: 0 0.08em; background: linear-gradient(to top, rgba(154,58,42,0.72) 0 38%, transparent 38% 100%); }
.yc-baker-actions { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.yc-baker-btn {
  min-width: 158px; min-height: 42px; padding: 0 24px; border: 2px solid rgba(255,255,255,0.9); background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.yc-baker-btn:hover { background: #fff; border-color: #fff; color: #35150f; }
.yc-baker-address { margin: 34px 0 0; color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 2px 12px rgba(53,21,15,0.25); }

@media (max-width: 900px) {
  .yc-baker-banner { min-height: auto; flex-direction: column; }
  .yc-baker-card, .yc-baker-banner:hover .yc-baker-card, .yc-baker-banner:hover .yc-baker-card:hover { flex: none; width: 100%; min-height: 430px; }
  .yc-baker-actions { flex-direction: column; gap: 12px; }
  .yc-baker-btn { width: min(260px,100%); }
}
@media (max-width: 560px) {
  .yc-baker-card, .yc-baker-banner:hover .yc-baker-card, .yc-baker-banner:hover .yc-baker-card:hover { min-height: 380px; }
  .yc-baker-title { font-size: 30px; letter-spacing: 0.1em; }
  .yc-baker-kicker { font-size: 10px; }
}

/* ----- yc-testimonials (Testimonials.jsx) ----- */
.yc-testimonials { padding: 120px 32px; background: white; color: #35150f; position: relative; }
.yc-testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #9a3a2a33, transparent); }
.yc-testimonials-inner { max-width: 1180px; margin: 0 auto; }
.yc-testimonials-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.yc-testimonials-left { min-height: 350px; display: flex; flex-direction: column; justify-content: space-between; }
.yc-testimonials-eyebrow { display: inline-block; margin-bottom: 16px; padding-bottom: 14px; color: #111; font-size: 11px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 2px solid rgba(0,0,0,0.12); }
.yc-testimonials-title { margin: 0; color: #111; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(40px,4vw,58px); font-weight: 300; line-height: 0.98; letter-spacing: 0.02em; }
.yc-testimonials-title span { color: #111; }
.yc-testimonials-subtitle { margin: 18px 0 0; color: rgba(53,21,15,0.55); font-size: 14px; line-height: 1.6; }
.yc-cake-mark { width: 130px; height: 130px; margin-left: 120px; color: rgba(154,58,42,0.4); filter: drop-shadow(0 2px 8px rgba(154,58,42,0.12)); }
.yc-testimonial-card { position: relative; min-height: 380px; padding: 60px 40px 30px; border: 2px solid rgba(154,58,42,0.5); background: #fff; overflow: hidden; transition: border-color 0.4s; }
.yc-testimonial-card:hover { border-color: #9a3a2a; }
.yc-testimonial-card-bg { position: absolute; inset: 0; z-index: 0; }
.yc-testimonial-card-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.yc-testimonial-card:hover .yc-testimonial-card-bg img { transform: scale(1.08); }
.yc-testimonial-card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 100%); }
.yc-testimonial-stars { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 30px; padding-left: 32px; }
.yc-testimonial-stars svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.yc-testimonial-text { position: relative; z-index: 1; max-width: 520px; margin: 0; padding: 0 0 0 32px; border-left: 2px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.65; font-style: italic; font-weight: 300; }
.yc-testimonial-person { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 36px; padding-left: 32px; }
.yc-testimonial-person::before { content: ''; display: block; width: 20px; height: 1px; background: #9a3a2a; }
.yc-testimonial-name { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.yc-testimonial-quote { position: absolute; z-index: 1; right: 35px; bottom: 10px; color: rgba(255,255,255,0.12); font-family: Georgia, serif; font-size: 140px; line-height: 1; pointer-events: none; user-select: none; }
.yc-testimonial-dots { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.yc-testimonial-dot { width: 10px; height: 10px; padding: 0; border: 2px solid #9a3a2a; border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.3s ease; }
.yc-testimonial-dot:hover { background: #9a3a2a66; }
.yc-testimonial-dot-active { background: #9a3a2a; transform: scale(1.2); }
.yc-left-btn-wrap { margin-top: 28px; }
.yc-testimonial-btn { min-height: 48px; padding: 0 34px; border: none; background: #9a3a2a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; }
.yc-testimonial-btn:hover { background: #7d2e20; color: #fff; }
.yc-testimonial-success { width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 14px 22px; border: 1px solid #9a3a2a44; color: #9a3a2a; background: rgba(154,58,42,0.06); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.yc-modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(31,12,8,0.52); backdrop-filter: blur(6px); }
.yc-modal { position: fixed; z-index: 2001; top: 50%; left: 50%; width: min(520px, calc(100% - 36px)); transform: translate(-50%,-50%); padding: 44px; background: #fff; color: #35150f; box-shadow: 0 30px 80px rgba(31,12,8,0.25); }
.yc-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; background: transparent; color: #35150f; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.3s; }
.yc-modal-close:hover { color: #9a3a2a; }
.yc-modal h3 { margin: 0 0 28px; color: #35150f; font-size: 22px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.yc-form-group { margin-bottom: 20px; }
.yc-form-group label { display: block; margin-bottom: 9px; color: #9a3a2a; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.yc-form-group input, .yc-form-group textarea {
  width: 100%; border: 1px solid rgba(154,58,42,0.2); background: #fcfaf9; color: #35150f; padding: 13px 14px;
  font-family: inherit; font-size: 14px; outline: none; box-sizing: border-box; transition: border-color 0.3s, background 0.3s;
}
.yc-form-group input:focus, .yc-form-group textarea:focus { border-color: #9a3a2a; background: #fff; }
.yc-rating-select { display: flex; gap: 6px; }
.yc-rating-btn { padding: 4px; border: 0; background: transparent; color: rgba(53,21,15,0.3); cursor: pointer; transition: color 0.2s, transform 0.2s; }
.yc-rating-btn:hover { color: #9a3a2a; transform: scale(1.1); }
.yc-rating-btn-active { color: #9a3a2a; }
.yc-submit-btn { width: 100%; margin-top: 8px; }

@media (max-width: 900px) {
  .yc-testimonials { padding: 80px 24px; }
  .yc-testimonials-layout { grid-template-columns: 1fr; gap: 48px; }
  .yc-testimonials-left { min-height: auto; text-align: center; align-items: center; }
  .yc-testimonials-eyebrow { margin-left: auto; margin-right: auto; }
  .yc-cake-mark { margin: 32px 0 0; }
}
@media (max-width: 640px) {
  .yc-testimonials { padding: 64px 16px; }
  .yc-testimonial-card { padding: 48px 20px 24px; min-height: 320px; }
  .yc-testimonial-stars { padding-left: 0; justify-content: center; }
  .yc-testimonial-text { padding: 16px 0 0 0; border-left: none; border-top: 2px solid rgba(255,255,255,0.15); font-size: 15px; text-align: center; }
  .yc-testimonial-person { padding-left: 0; justify-content: center; }
  .yc-testimonial-person::before { display: none; }
  .yc-testimonial-quote { font-size: 80px; right: 20px; bottom: 5px; }
  .yc-modal { padding: 32px 18px 20px; }
}

/* =====================================================================
   Fiche produit (ClickCollect.jsx) -- portage de la section
   "CLICK & COLLECT DETAIL" de index.css, plus les classes .related-card*
   qui viennent du <style> scope du composant (definition la plus recente,
   qui l'emporte dans le navigateur d'origine sur les .related-scroll
   .product-card generiques et desormais inutilisees de index.css).
   ===================================================================== */
.btn-primary { display: inline-block; background: var(--color-accent); color: #fff; border: none; padding: 16px 36px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s; text-decoration: none; }
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; }

/* Pas de padding-top ici : .page-main--offset (voir layout.ejs) place deja
   toutes les pages non-accueil sous le header fixe -- l'original geait cet
   espace page par page (chaque .page-hero-sm/.gallery-section avait son
   propre padding-top), ce que notre wrapper de layout commun remplace pour
   toutes les pages a la fois (voir PROGRESSION.md, etape 4). */
/* Decision 9 (etape 13) : le fond de ces 5 bannieres de page vient
   desormais de Banner (section "page_hero", /admin/contenu), en style
   inline par page -- voir chaque controleur. Couleur de secours ici (pas
   d'url() codee en dur) si jamais aucune banniere active n'est trouvee en
   base pour une page donnee (texte blanc du hero reste lisible dessus). */
.page-hero-sm { background: var(--color-accent-dark); border-bottom: 1px solid var(--color-border-light); background-size: cover; background-position: center; }
.page-hero-content { max-width: var(--max-width); margin: 0 auto; padding: 120px 32px; text-align: center; }
.page-hero-content h1 { font-size: 42px; margin-bottom: 16px; color: #fff; }
.page-hero-content p { font-size: 17px; color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto; line-height: 1.7; }

.section-title { font-size: 32px; margin-bottom: 20px; text-align: center; width: 100%; }

.product-detail { max-width: var(--max-width); margin: 0 auto; }
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-detail-image { width: 100%; border-radius: 12px; overflow: hidden; }
.product-detail-image img { width: 100%; display: block; }
.product-detail-cat { font-size: 11px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.product-detail-name { font-size: 32px; margin: 16px 0; }
.product-detail-price { font-size: 26px; font-weight: 700; color: var(--color-accent); margin-bottom: 20px; }
.product-detail-desc { font-size: 15px; color: var(--color-text-light); line-height: 1.7; margin-bottom: 20px; }
.product-detail-comp, .product-detail-allerg { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin-bottom: 8px; padding: 8px 12px; background: #faf9f7; border-radius: 6px; }
.product-detail-comp strong, .product-detail-allerg strong { color: var(--color-text); }
.product-detail-options { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.product-detail-meta { font-size: 14px; color: var(--color-text-muted); margin-bottom: 28px; }
.product-detail-qty { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.qty-selector { display: flex; align-items: center; border: 1px solid var(--color-border); }
.qty-selector button { width: 40px; height: 40px; border: none; background: none; cursor: pointer; font-size: 18px; }
.qty-selector span { width: 40px; text-align: center; font-size: 15px; }
.product-detail-add {
  width: 100%; padding: 12px; background: var(--color-accent); color: #fff; border: none;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  cursor: pointer; transition: background 0.3s;
}
.product-detail-add:hover { background: var(--color-accent-dark); }
.product-detail-add--added { background: #27ae60; }

.product-detail-related { padding: 60px 32px; background: white; margin-top: 40px; }
.product-detail-related .section-title { max-width: 1200px; margin: 0 auto 36px; font-size: clamp(22px,3vw,34px); font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: #35150f; }
.related-scroll {
  max-width: 1200px; margin: 0 auto; display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; scroll-behavior: smooth;
}
.related-scroll::-webkit-scrollbar { display: none; }
.related-card {
  flex: 0 0 calc((100% - 4 * 16px) / 5); min-width: 180px; scroll-snap-align: start;
  display: flex; flex-direction: column; cursor: pointer; border-radius: 10px; overflow: hidden;
  background: #fdfdfd; border-bottom: 3px solid var(--color-accent); box-shadow: 0 2px 12px rgba(53,21,15,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(53,21,15,0.13); }
.related-card-img { position: relative; width: 100%; aspect-ratio: 1/1.1; overflow: hidden; background: #ead9cf; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card-overlay { position: absolute; inset: 0; background: rgba(53,21,15,0.38); display: flex; align-items: flex-end; padding: 14px; opacity: 0; transition: opacity 0.25s ease; }
.related-card:hover .related-card-overlay { opacity: 1; }
.related-card-overlay span { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 2px; }
.related-card-info { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.related-card-cat { font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #9a3a2a; }
.related-card-name { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #35150f; line-height: 1.3; }
.related-card-price { margin: 0; font-size: 12px; color: rgba(53,21,15,0.55); }

@media (max-width: 1024px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .related-card { flex: 0 0 calc((100% - 2 * 16px) / 2.4); }
  .product-detail-related { padding: 44px 18px; }
  .page-hero-content { padding: 80px 24px; }
  .page-hero-content h1 { font-size: 30px; }
}

/* =====================================================================
   Galerie (Galerie.jsx) -- portage de la section GALLERY de index.css.
   Pas de padding-top ici (contrairement a l'original) : .page-main--offset
   s'en charge deja au niveau du layout, voir la note sur .page-hero-sm
   plus haut.
   ===================================================================== */
.gallery-section { background: #fff; }
.gallery-grid { column-count: 4; column-gap: 16px; max-width: var(--max-width); margin: 0 auto; padding: 32px 32px; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; border-radius: 12px; break-inside: avoid; margin-bottom: 16px; }
.gallery-item img { width: 100%; display: block; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item--small img { height: 200px; }
.gallery-item--medium img { height: 300px; }
.gallery-item--tall img { height: 420px; }
.gallery-item--wide img { height: 260px; }
.gallery-item--big img { height: 420px; }
.gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.3s; display: flex; align-items: center; justify-content: center; }
.gallery-overlay span { color: #fff; font-size: 16px; font-weight: 600; opacity: 0; transition: opacity 0.3s; text-align: center; padding: 0 12px; }
.gallery-item:hover .gallery-overlay { background: rgba(0,0,0,0.45); }
.gallery-item:hover .gallery-overlay span { opacity: 1; }
.gallery-item--filler { visibility: hidden; height: 0 !important; margin: 0 !important; padding: 0 !important; }

@media (max-width: 1024px) {
  .gallery-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .gallery-grid { column-count: 1; }
}

/* =====================================================================
   Pages statiques restantes (Sur mesure, A propos, Contact, Livraison)
   -- portage des sections SUR MESURE / ABOUT / CONTACT / LIVRAISON /
   LOCATIONS / MODAL / FORMS de index.css. Rappel : pas de padding-top sur
   .page-hero-sm (voir note plus haut), .page-main--offset s'en charge.
   ===================================================================== */

/* ----- Formulaires generiques (contact) ----- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ----- Modales (SurMesure "Autre") ----- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 3000; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 40px; z-index: 3001; }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-text-muted); }
.modal h3 { margin: 0 0 12px; }

/* ----- A propos ----- */
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; }
.about-text { font-size: 16px; color: var(--color-text-light); line-height: 1.8; }
.about-text h2 { font-size: 32px; }
.about-subtitle { font-size: 12px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 16px; }
.about-address { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--color-text); }
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.value-item { text-align: center; padding: 32px 24px; background: #faf9f7; }
.value-item svg { display: block; margin: 0 auto 10px; width: 30px; height: 30px; }
.value-item h3 { font-size: 18px; margin-bottom: 10px; }
.value-item p { font-size: 14px; color: var(--color-text-light); line-height: 1.5; margin: 0; }
.about-team { text-align: center; }
.about-cta { display: flex; justify-content: center; gap: 4px; margin-top: 32px; }
.about-btn { padding: 16px 36px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; }
.about-btn:first-child { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.about-btn:first-child:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.about-btn--outline { background: #fff; color: var(--color-accent); border: 1px solid var(--color-accent); }
.about-btn--outline:hover { background: #fff; color: var(--color-accent); }

/* ----- Nos boutiques (Locations) ----- */
.locations { background: #fff; }
.locations .section-header h2 { font-size: 32px; }
.locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; max-width: var(--max-width); margin: 0 auto; }
.location-card { border: 1px solid var(--color-border-light); border-bottom: 3px solid transparent; overflow: hidden; transition: border-color 0.3s; text-align: center; }
.location-card:hover { border-bottom-color: var(--color-accent); }
.location-img-wrapper { height: 220px; overflow: hidden; }
.location-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.location-card:hover .location-img-wrapper img { transform: scale(1.05); }
.location-card > div:last-child { padding: 24px; }
.location-card h3 { font-size: 16px; margin-bottom: 6px; }
.location-card p { font-size: 13px; color: var(--color-text-light); margin: 0 0 6px; line-height: 1.5; }
.location-icon { display: block; margin: 16px auto 8px; }

/* ----- Contact ----- */
.contact-section { background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: var(--max-width); margin: 0 auto; }
.contact-info { max-width: 420px; }
.contact-info h2 { font-size: 26px; margin-bottom: 24px; }
.contact-info h3 { font-size: 15px; margin-bottom: 4px; }
.contact-detail { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--color-text-light); }
.contact-detail strong { color: var(--color-text); display: block; margin-bottom: 4px; }
.contact-form-wrapper h2 { font-size: 26px; margin-bottom: 24px; }
.contact-form { display: flex; flex-direction: column; gap: 0; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 10px 14px; font-size: 13px; border: 1px solid var(--color-border); outline: none; transition: border-color 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-accent); }
.contact-social h3 { font-size: 15px; margin-bottom: 12px; margin-top: 24px; }
.contact-social-links { display: flex; gap: 10px; }
.social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #c8c4c0; color: #7a7a7a; transition: all 0.3s; border-radius: 50%; }
.social-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ----- Livraison ----- */
.livraison-inner { max-width: 700px; margin: 0 auto; }
.livraison-zones { display: flex; flex-direction: column; gap: 28px; margin-bottom: 48px; text-align: center; }
.livraison-zone { text-align: center; }
.livraison-zone-label { display: block; font-size: 13px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; white-space: nowrap; }
.livraison-zone h3 { font-size: 18px; margin-bottom: 8px; }
.livraison-zone p { font-size: 15px; color: var(--color-text-light); line-height: 1.6; margin: 0; }

/* ----- Sur mesure ----- */
.sm-categories .section-title { margin-bottom: 56px; }
.sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--max-width); margin: 0 auto; }
.sm-card { text-align: center; }
.sm-card-img { width: 100%; height: 180px; overflow: hidden; }
.sm-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.sm-card h3 { font-size: 18px; margin: 14px 0 6px; }
.sm-card p { font-size: 13px; color: var(--color-text-light); line-height: 1.5; margin: 0; }
.sm-process { max-width: var(--max-width); margin: 0 auto; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 48px; }
.process-step { text-align: center; }
.process-num { width: 52px; height: 52px; border-radius: 50%; color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 20px; background: rgba(184,69,51,0.04); }
.process-step h3 { font-size: 18px; margin-bottom: 12px; }
.process-step p { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin: 0; }
.sm-cta { text-align: center; background: #1a1a1a; padding: 80px 32px; }
.sm-cta-content { max-width: 640px; margin: 0 auto; }
.sm-cta h2 { font-size: 28px; margin-bottom: 20px; color: #fff; }
.sm-cta p { font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 28px; line-height: 1.7; }
.sm-cta .btn-primary { background: #1a1a1a; border: 2px solid #fff; color: #fff; }
.sm-cta .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.sm-builder { max-width: 1200px; margin: 0 auto; }
.sm-builder-inner { width: 100%; }
.sm-builder-header { text-align: center; margin-bottom: 64px; }
.sm-builder-header h2 { font-size: 32px; }
.sm-builder-header p { font-size: 16px; color: var(--color-text-light); }
.sm-builder-step { margin-bottom: 48px; }
.sm-builder-step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sm-builder-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.sm-builder-step h3 { font-size: 18px; margin: 0; }
.sm-builder-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sm-builder-card { padding: 12px 12px; border: 2px solid var(--color-border); border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; font-size: 12px; }
.sm-builder-card svg { width: 20px; height: 20px; }
.sm-builder-card:hover { border-color: var(--color-accent); background: rgba(184,69,51,0.03); }
.sm-builder-card--active { border-color: var(--color-accent); background: rgba(184,69,51,0.06); }
.sm-builder-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-builder-tag { padding: 10px 18px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; background: #fff; }
.sm-builder-tag:hover { border-color: var(--color-accent); }
.sm-builder-tag--active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.sm-builder-textarea { width: 100%; padding: 16px; border: 1px solid #c8c4c0; font-size: 15px; outline: none; resize: vertical; min-height: 120px; }
.sm-builder-textarea:focus { border-color: var(--color-accent); }
.sm-builder-contact { display: flex; flex-direction: row; gap: 14px; }
.sm-builder-contact input { width: 100%; padding: 14px 18px; border: 1px solid #c8c4c0; font-size: 15px; outline: none; }
.sm-builder-contact input:focus { border-color: var(--color-accent); }
.sm-builder-btn { padding: 16px 44px; background: var(--color-accent); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s; display: inline-flex; align-items: center; gap: 10px; }
.sm-builder-btn:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; }
.sm-builder-btn:hover:not(:disabled) { background: var(--color-accent-dark); }
.sm-builder-btn--confirm { background: #1a1a1a; padding: 12px 32px; font-size: 13px; margin-top: 20px; }
/* Etape 11 : message de succes rendu nettement plus visible qu'avant
   (simple texte centre sans couleur ni icone) -- meme palette "succes" que
   .newsletter-success/.testimonial-success pour rester coherent avec le
   reste du site. */
.sm-builder-success {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 20px 26px;
  background: rgba(16,185,129,0.08);
  border: 2px solid #10b981;
  border-radius: 12px;
  color: #047857;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.sm-builder-success[hidden] { display: none; }
.sm-builder-success svg { flex-shrink: 0; }
.sm-builder-modal-input { width: 100%; padding: 14px 18px; border: 1px solid #1a1a1a; font-size: 15px; outline: none; margin-top: 12px; box-sizing: border-box; }
.sm-builder-modal-input:focus { border-color: var(--color-accent); }

@media (max-width: 1024px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .locations-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .sm-builder-cards { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sm-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Mon compte (Account.jsx) -- design propre a cette reconstruction (voir
   la note de perimetre dans controllers/accountController.js : l'original
   utilise un habillage Tailwind + icones lucide-react distinct du reste du
   site, non repris ici).
   ===================================================================== */
.account-page { padding-top: 40px; }
.account-shell { display: grid; grid-template-columns: 260px 1fr; gap: 40px; max-width: var(--max-width); margin: 0 auto; align-items: start; }
.account-sidebar { border: 1px solid var(--color-border-light); padding: 28px 20px; }
.account-user { text-align: center; padding-bottom: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border-light); }
.account-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 22px; font-weight: 700; }
.account-user h3 { font-size: 16px; margin-bottom: 4px; }
.account-user p { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.account-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.account-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--color-text);
  border: none; background: none; cursor: pointer; text-align: left; width: 100%; transition: background 0.2s, color 0.2s;
}
.account-nav-item:hover { background: var(--color-bg-alt); }
.account-nav-item--active { background: var(--color-accent); color: #fff; }
.account-nav-badge { background: #fff; color: var(--color-accent); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.account-nav-item--active .account-nav-badge { background: rgba(255,255,255,0.25); color: #fff; }
.account-logout { width: 100%; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--color-text-muted); background: none; border: 1px solid var(--color-border); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.account-logout:hover { color: var(--color-accent); border-color: var(--color-accent); }

.account-welcome { font-size: 24px; margin-bottom: 8px; }
.account-content > .account-tab-panel > p { color: var(--color-text-light); margin-bottom: 24px; }
.account-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.account-card { border: 1px solid var(--color-border-light); padding: 24px; text-align: center; }
.account-card h4 { font-size: 30px; color: var(--color-accent); margin-bottom: 6px; }
.account-card p { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }

.account-empty { border: 1px dashed var(--color-border); padding: 48px; text-align: center; color: var(--color-text-muted); }
.account-list { display: flex; flex-direction: column; gap: 16px; }
.account-list-item { border: 1px solid var(--color-border-light); padding: 20px 24px; }
.account-list-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-list-item-title { font-weight: 700; font-size: 15px; margin: 0; }
.account-list-item-meta { font-size: 13px; color: var(--color-text-muted); margin: 2px 0 0; }
.account-list-item-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--color-border-light); padding-top: 14px; font-size: 14px; }
.account-list-item-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.account-list-item-body p { margin: 4px 0 0; color: var(--color-text); }

.account-status-badge { padding: 5px 12px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; background: #f5f5f4; color: #78716c; }
.account-status-badge--en_attente { background: #fef9ee; color: #b45309; }
.account-status-badge--valide { background: #ecfdf5; color: #047857; }
.account-status-badge--livre { background: #f0f9ff; color: #0369a1; }
.account-status-badge--refuse { background: #fef2f2; color: #b91c1c; }

.account-notification { display: flex; gap: 14px; border: 1px solid var(--color-border-light); padding: 18px 22px; align-items: flex-start; }
.account-notification--unread { border-left: 3px solid var(--color-accent); background: var(--color-bg-alt); }
.account-notification-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex-shrink: 0; }
.account-notification--unread .account-notification-dot { background: var(--color-accent); }
.account-notification-message { font-size: 14px; color: var(--color-text-light); margin: 6px 0; line-height: 1.6; }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 1fr; }
  .account-cards { grid-template-columns: repeat(2, 1fr); }
  .account-list-item-body { grid-template-columns: 1fr; }
}

/* =====================================================================
   Connexion / inscription -- redessine a l'etape 11 (le rendu minimal de
   l'etape 3 etait juge trop sommaire). Meme systeme de design que le reste
   du site (variables --color-accent/--font-heading, pas le Tailwind/pat-*
   de l'original, ecarte aux etapes 8-9 pour les memes raisons).
   ===================================================================== */
.auth-page {
  max-width: 460px;
  margin: 0 auto;
  padding: 72px 24px 110px;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-top: 4px solid var(--color-accent);
  padding: 44px 38px;
  box-shadow: 0 12px 40px rgba(26,26,26,0.06);
}
.auth-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card h1 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 8px;
}
.auth-subtitle {
  text-align: center;
  color: var(--color-text-light);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.auth-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.25);
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 22px;
}
.auth-error-banner svg { flex-shrink: 0; }
.auth-field { margin-bottom: 20px; }
.auth-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 8px;
}
.auth-input-wrap { position: relative; }
.auth-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.auth-input-wrap input {
  width: 100%;
  padding: 14px 44px;
  border: 1px solid var(--color-border);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
  letter-spacing: 0.05em;
}
.auth-input-wrap input:focus { border-color: var(--color-accent); }
/* Bouton oeil afficher/masquer (ajout UX independant, etape 22) : icone
   SVG plutot qu'un composant natif du navigateur (ex. l'oeil natif de
   Chrome sur type="password"), pour rester coherent visuellement avec le
   reste du site -- voir public/js/auth.js pour le detail de la bascule. */
.auth-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-toggle-btn:hover { color: var(--color-accent); }
.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-light);
  margin-bottom: 22px;
}
.auth-checkbox-row input { margin-top: 4px; flex-shrink: 0; }
.auth-submit-btn {
  width: 100%;
  padding: 15px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}
.auth-submit-btn:hover { background: var(--color-accent-dark); }
.auth-card-footer {
  text-align: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-light);
  font-size: 14px;
  color: var(--color-text-light);
}
.auth-card-footer a { font-weight: 700; }

@media (max-width: 480px) {
  .auth-page { padding: 48px 16px 80px; }
  .auth-card { padding: 34px 24px; }
}

.placeholder-page { max-width: var(--max-width); margin: 0 auto; padding: 60px 32px 100px; }