/* ============================================================
   FANI — Artiste peintre — Feuille de style principale
   ============================================================ */

/* Polices AUTO-HEBERGEES (woff2 dans /fonts/) : pas de dependance externe Google
   -> securite (plus de S5725 sans integrite) + RGPD (aucune IP envoyee a Google)
   + perf (meme origine, pas de render-blocking externe). font-display:swap. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('/fonts/cormorant-garamond-300-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-600-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:700;font-display:swap;src:url('/fonts/cormorant-garamond-700-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/cormorant-garamond-300.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-600.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cormorant-garamond-700.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/lato-300.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lato-400.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lato-700.woff2') format('woff2');}

/* ===== Variables ===== */
:root {
  --pink:        #dba8b8;
  --pink-light:  #f2dce6;
  --blue-dark:   #2d5f7a;
  --blue-mid:    #3d7a9a;
  --blue-deep:   #1e4a62;
  --beige:       #f5ede0;
  --tan:         #c4956a;
  --tan-light:   #d4aa88;
  --orange:      #f5a040;
  --orange-h:    #e8902a;
  --text:        #2a2a2a;
  --muted:       #888;
  --white:       #fff;
  --border:      #e0d4c8;
  --card-auth: rgba(55, 100, 128, 0.6);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Taille de base FLUIDE : la racine en rem suit la largeur de l'ecran, donc
   TOUT ce qui est en rem (typo, marges, paddings, la plupart des composants)
   retrecit/grossit en continu avec l'ecran. ~18px sur grand ecran -> ~14px
   sur mobile, transition douce sans paliers brusques. */
/* Taille de base FLUIDE sur TOUTE la plage d'ecrans : ~14px mobile -> ~18px
   laptop -> ~20px desktop -> jusqu'a 22px sur ultra-wide (2560px+). Tout ce
   qui est en rem suit donc l'ecran, sans paliers brusques. */
html { scroll-behavior: smooth; font-size: clamp(14px, 0.35vw + 12.7px, 22px); }
/* Garde-fou anti-debordement horizontal : rien ne doit sortir de la largeur
   de l'ecran. overflow-x:clip n'cree PAS de conteneur de scroll (contrairement
   a hidden) -> la navbar sticky continue de fonctionner. */
html, body { max-width: 100%; overflow-x: clip; }
body { font-family: 'Lato', sans-serif; background: var(--beige); color: var(--text); min-height: 100vh; font-size: 1rem; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
/* Les medias et tableaux ne depassent jamais leur conteneur */
img, svg, video, canvas, iframe { max-width: 100%; }

/* ===== Burger (menu mobile) — cache sur desktop ===== */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border: none; background: none;
  padding: 8px;
  flex-shrink: 0;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
#main-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#main-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
#main-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Liens "Galerie / Imprimés" en clair : visibles uniquement en menu mobile */
.nav-mobile-only { display: none; }

/* Anti-debordement : les enfants des grilles/flex principaux peuvent retrecir
   (sinon un contenu large force la colonne a depasser l'ecran). */
.product-layout > *, .panier-layout > *, .r-admin > *, .r-profile > *,
.footer-top > *, .gallery-categories > *, .histoire-section > * { min-width: 0; }

/* ===== Utilitaires ===== */
.hidden { display: none !important; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
/* La navbar se cale juste sous la banderole promo (hauteur exposee via
   --promo-h, mise a jour en JS ; 0 si pas de banderole). */
/* min-height = hauteur de .main-nav : reserve l'espace de la navbar (injectee en
   JS) pour eviter que le contenu saute quand elle apparait (anti-CLS). */
#navbar { position: sticky; top: var(--promo-h, 0px); z-index: 100; width: 100%; min-height: 58px; }
.main-nav {
  background: var(--pink);
  padding: 0 2.5rem;
  display: flex; align-items: center; gap: 2rem;
  height: 58px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ===== Banderole promo (fine bande au-dessus de la navbar) ===== */
.promo-banner {
  position: sticky;        /* reste collee en haut quand on scrolle jusqu'a elle */
  top: 0;
  z-index: 101;            /* au-dessus de la navbar (#navbar z-index:100) */
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 34px;
  background: #1e4a62;
  color: #fff;             /* fallback (separateurs) ; chaque segment a sa couleur */
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .3px;
  overflow: hidden;
}
/* Bandeau d'absence / indisponibilite : avis d'information (conges...).
   Non defilant, style "info" ambre, place au-dessus de la banderole promo.
   Non sticky : il defile vers le haut au scroll (la promo reste collee). */
.absence-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .55rem 2.4rem .55rem 1rem;
  position: relative;
  background: #fef3c7;        /* ambre clair */
  color: #92400e;            /* ambre fonce, bon contraste */
  border-bottom: 1px solid #fcd34d;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  z-index: 102;              /* au-dessus de la promo (101) et de la nav (100) */
}
.absence-banner-ico { font-size: 1rem; flex: 0 0 auto; }
.absence-banner-text { max-width: 1100px; }
.absence-banner-close {
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #92400e;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: .1rem .35rem;
  border-radius: 6px;
}
.absence-banner-close:hover { background: rgba(146, 64, 14, .12); }

/* Boutique en pause (avis d'absence actif) : tous les boutons "Ajouter au
   panier" sont grises. Cible les selecteurs des differents emplacements (fiche
   produit, barre mobile, grille boutique, favoris, suggestions). S'applique
   aussi aux boutons rendus dynamiquement. On garde le survol actif pour
   afficher la bulle d'explication ; le clic est neutralise cote JS (addToCart
   leve une erreur -> toast) et cote serveur. */
body.shop-paused .btn-add-cart,
body.shop-paused .mobile-buy-btn,
body.shop-paused [data-add],
body.shop-paused [data-add-cart],
body.shop-paused .cart-sugg-add,
body.shop-paused #checkout-trigger {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Boutique en pause : encart d'avertissement (haut du formulaire panier) +
   bouton d'invite a s'abonner a la newsletter. */
.checkout-paused-box {
  margin-bottom: 1.4rem;
  padding: 1rem 1.1rem;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
}
.checkout-paused-msg { color: #991b1b; font-size: .9rem; font-weight: 600; margin: 0 0 .7rem; }
.paused-newsletter-cta {
  display: inline-block;
  margin-top: .6rem;
  padding: .55rem 1rem;
  background: var(--blue-dark);
  color: #fff;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.paused-newsletter-cta:hover { background: var(--blue-mid); }
/* CTA newsletter sous le bouton "Ajouter au panier" (fiche produit) : visible
   uniquement quand la boutique est en pause. */
#product-paused-newsletter { display: none; }
body.shop-paused #product-paused-newsletter { display: inline-block; margin-top: .9rem; }

/* Bulle d'explication au survol d'un bouton d'ajout quand la boutique est en
   pause. Element unique, positionne pres du curseur (cf. components.js). */
.shop-paused-tip {
  position: fixed;
  z-index: 2000;
  max-width: 260px;
  background: #1f2937;
  color: #fff;
  font-size: .8rem;
  line-height: 1.35;
  padding: .55rem .7rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  white-space: pre-line;     /* la ligne de dates (\n) passe a la ligne */
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.shop-paused-tip.visible { opacity: 1; transform: translateY(0); }

/* Carrousel rotatif : chaque slide a sa propre couleur (heritee de la banderole)
   et son texte STATIQUE (pas de defilement interne). Les slides s'enchainent
   en fondu toutes les 5s (cf. JS). La couleur de fond de la barre suit la
   slide active -> transition fluide visuellement. */
.promo-rotator {
  flex: 1;
  position: relative;
  min-height: 1.3em;
  overflow: hidden;
}
.promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 .5rem;
  line-height: 1.3;
  text-decoration: var(--promo-text-deco, none);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.promo-slide.active { opacity: 1; pointer-events: auto; }
.promo-banner { transition: background-color .5s ease, color .5s ease; }

.promo-banner-close {
  flex-shrink: 0;
  margin-right: .7rem;
  width: 26px; height: 26px;
  border: none; background: rgba(255,255,255,.18);
  color: inherit;
  border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.promo-banner-close:hover { background: rgba(255,255,255,.35); }

/* ===== Bouton loupe (en bas a droite d'une image) + Lightbox plein ecran ===== */
.img-zoom-btn {
  position: absolute;
  bottom: .8rem; right: .8rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: background .15s, transform .15s;
  z-index: 6;
}
.img-zoom-btn:hover { background: #fff; transform: scale(1.08); }
.img-zoom-btn svg { width: 20px; height: 20px; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,20,25,.94);
  display: flex; align-items: center; justify-content: center;
  animation: lbFade .18s ease;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage {
  max-width: 92vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .25s ease;
  user-select: none; -webkit-user-drag: none;
}
.lightbox-img.zoomed { transform: scale(2.4); cursor: zoom-out; }
.lightbox-close {
  position: fixed; top: 18px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .82rem; letter-spacing: 1px;
  background: rgba(0,0,0,.35); padding: .3rem .9rem; border-radius: 999px;
}
@media (max-width: 480px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; }
}
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; color: var(--text); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; flex: 1; justify-content: center; }
.nav-links a { font-size: 1rem; color: var(--text); font-weight: 400; padding: 4px 0; border-bottom: none; transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: #2d5f7a; border-bottom: none !important; }

/* Dropdown Galerie */
.nav-item-dropdown { position: static; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  width: 100vw; background-color: #ebccd6;
  display: none; grid-template-columns: repeat(2, 1fr);
  gap: 80px; padding: 25px 6%; box-sizing: border-box; z-index: 1000;
}
/* Bar centrale (separateur entre les 2 cards) - meme espace de chaque cote */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1px; height: 75%;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}
/* L'ouverture est pilotee par JS (classe .open) avec delay a la fermeture
   pour eviter que la dropdown disparaisse si la souris quitte le trigger. */
.nav-item-dropdown.open .nav-dropdown { display: grid !important; }
.nav-dropdown::before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; display: block; }
.nav-link-trigger { cursor: pointer; user-select: none; }

.nav-dropdown-item {
  display: flex; align-items: center; text-decoration: none;
  padding: 45px 55px 45px 120px; margin: 0; border-radius: 12px;
  transition: background 0.3s ease; border-bottom: none !important;
}
.nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.45); border-bottom: none !important; }
/* Images plus grandes : hauteur ≈ texte + bouton */
.nav-dropdown-item img { width: 290px; height: 200px; object-fit: cover; margin-right: 36px; border-radius: 4px; flex-shrink: 0; }
/* Imprimes : image en portrait (visuel marque-page vertical) MAIS meme hauteur
   que la card Galeries (200px) pour aligner visuellement les 2 cards. */
.nav-dropdown-item-imprimes img { width: 150px; height: 200px; object-position: center top; }
.nav-dropdown-item-text { display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.nav-dropdown-item-text h4 { color: var(--blue-dark); font-size: 1.9rem; margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; line-height: 1.1; }
.nav-dropdown-item-text p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0; max-width: 250px; font-family: 'Lato', sans-serif; }
/* Bouton-resume facon "JE PREFERE / C'EST PARTI" : outline epuree, lettrage espace */
.nav-dropdown-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: .4rem;
  padding: .7rem 1.3rem;
  border: 1.5px solid var(--blue-dark);
  background: transparent;
  color: var(--blue-dark);
  font-family: 'Lato', sans-serif;
  font-size: .72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.nav-dropdown-item:hover .nav-dropdown-btn { background: var(--blue-dark); color: #fff; }
/* Pas de separateur : l'espace entre les 2 cards + le padding interieur suffit a aerer */

.nav-right { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.nav-icon-btn { background: none; border: none; padding: 4px; position: relative; color: var(--text); display: flex; align-items: center; }
.nav-icon-btn svg { width: 22px; height: 22px; }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: #e03030; color: #fff;
  font-size: .6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   HERO (Homepage) — parallax scroll
   ============================================================ */
#hero-outer { position: relative; height: 140vh; }
.hero { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
.hero-bg {
  position: absolute; left: 0; right: 0; top: -60%;
  height: 200%;
  background: url('../image/hero.jpg') center top / cover no-repeat;
  background-color: #1a3a50;
  will-change: transform;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45) 40%, transparent 80%); z-index: 1; }
.hero-social { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .8rem; z-index: 2; }
.hero-social a { width: 45px; height: 45px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; transition: opacity .2s; margin-bottom: 1.2rem; }
.hero-social a svg { width: 35px !important; height: 35px !important; }
.hero-social a:hover { opacity: .8; }
.hero-social .s-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.hero-social .s-fb { background: #1877f2; }
.hero-social .s-tk { background: #010101; }
.hero-text { position: absolute; left: 5rem; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; }
.hero-text h1 { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 300; line-height: 1; margin-bottom: .5rem; letter-spacing: 2px; }
.hero-quote { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; line-height: 1.2; }
.hero-quote em { font-style: italic; font-size: 2.6rem; display: block; }
.hero-author { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; line-height: 1.2; margin-top: .3rem; }
.hero-author:empty { display: none; }

/* ============================================================
   SECTION HISTOIRE (Homepage)
   ============================================================ */
.histoire-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 100px; }
.histoire-left { background: var(--blue-dark); color: #fff; position: relative; }
.histoire-left-inner { display: flex; flex-direction: column; justify-content: center; padding: 4rem 3.5rem; }
.histoire-eyebrow { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: #FFD5B2; margin-bottom: 1.2rem; }
.histoire-title { font-family: 'Cormorant Garamond', serif; font-size: 3.3rem; font-weight: 300; font-style: italic; line-height: 1.2; margin-bottom: 1.5rem; }
.histoire-text { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.8); margin-bottom: 2rem; max-width: 565px; }
.histoire-right { display: flex; flex-direction: column; max-height: 100vh; }
/* Desktop (2 colonnes) : la hauteur de la section est calee sur l'image de
   droite. Le bloc texte est sorti du flux (positionnement absolu) afin qu'editer
   le texte ne fasse jamais grandir ni le panneau bleu ni la photo ; le texte
   defile a l'interieur si jamais il depasse. En 1 colonne (<=900px) il reste en
   flux normal. */
@media (min-width: 901px) {
  .histoire-left { overflow: hidden; }
  .histoire-left-inner { position: absolute; inset: 0; overflow-y: auto; }
}
.histoire-image { flex: 1; overflow: hidden; min-height: 320px; }
.histoire-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.histoire-stats { background: var(--tan); display: flex; justify-content: center; gap: 5rem; padding: 1.5rem; }
.stat-item { text-align: center; }
.stat-number { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 700; color: #fff; display: block; }
.stat-label { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* ============================================================
   SECTION SÉLECTION (Homepage)
   ============================================================ */
.selection-section { padding: 4rem 2.5rem; background: var(--beige); }
.section-eyebrow { font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); margin-bottom: .8rem; font-weight: 700; text-align: center; }
/* Accueil : titres de sections "La sélection de peintures" / "Les imprimés des
   tableaux" plus grands et marquants. */
[data-text-key="home.gallery.eyebrow"],
[data-text-key="home.prints.eyebrow"] {
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-family: 'Cormorant Garamond', serif;
  text-transform: none;
}
.section-title { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; margin-bottom: .5rem; color: var(--text); }
.section-subtitle { font-size: 1rem; color: var(--muted); line-height: 1.6; margin: 0 auto 2.5rem; max-width: 600px; text-align: center; }
.selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 2rem; }
.selection-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.selection-grid img:hover { opacity: .9; }
.section-footer { text-align: right; }
.btn-outline-dark { display: inline-block; border: 1.5px solid var(--blue-mid); color: white; background-color: var(--blue-mid); padding: .7rem 1.6rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: all .2s; }
.btn-outline-dark:hover { background: var(--blue-dark); color: #fff; }

/* ============================================================
   SECTION IMPRIMÉS (Homepage)
   ============================================================ */
.imprimes-section { padding: 4rem 2.5rem 2rem; background: #c9a07a; }
.imprimes-section .section-eyebrow { color: rgba(255,255,255,.7); }
.imprimes-section .section-title { color: #fff; }
.imprimes-section .section-subtitle { color: rgba(255,255,255,.85); }
.imprimes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.polaroid-card {
  background: #fff; border-radius: 4px;
  padding: .8rem .8rem 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
  transition: transform .2s; cursor: pointer;
  position: relative;
}
.polaroid-card:hover { transform: translateY(-4px); }
.polaroid-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.polaroid-info { padding: .6rem 0 .8rem; }
.polaroid-name { font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }
.polaroid-price { font-size: .85rem; color: var(--muted); }

/* ============================================================
   SECTION CONTACT (Homepage)
   ============================================================ */
.contact-section { position: relative; padding: 5rem 2.5rem; overflow: hidden; min-height: 500px; }
.contact-bg { position: absolute; inset: 0; background: url('../image/hero.jpg') center 50% / cover no-repeat; background-color: #1a3a50; }
.contact-overlay { position: absolute; inset: 0; background: rgba(30, 60, 85, .72); }
.contact-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.contact-title { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-style: italic; font-weight: 300; color: #fff; margin-bottom: .5rem; }
.contact-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: rgba(255,255,255,.8); margin-bottom: 2.5rem; line-height: 1.5; }
.contact-form { display: flex; flex-direction: column; gap: 0; }
.contact-field { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.35); padding: .8rem 0; }
.contact-field label { color: rgba(255,255,255,.9); font-size: .9rem; min-width: 80px; font-weight: 400; }
.contact-field input, .contact-field textarea { flex: 1; background: rgba(255,255,255,.25); border: none; outline: none; color: #fff; font-size: .9rem; font-family: inherit; padding: .4rem .6rem; }
.contact-field textarea { resize: none; min-height: 80px; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-submit-row { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.btn-white-round { background: #fff; color: var(--text); border: none; padding: .7rem 2rem; border-radius: 999px; font-size: .88rem; font-weight: 600; transition: all .2s; }
.btn-white-round:hover { background: var(--beige); }

/* ============================================================
   TRUST BAND
   ============================================================ */
/* Ligne supérieure du trust-band en bleu mid, coherente avec les separateurs
   verticaux entre les items. */
.trust-band { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--blue-mid); }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1rem; text-align: center; background: var(--beige); flex: 1; }
.trust-item:not(:last-child) { border-right: 3px solid var(--blue-mid); }
.trust-label { font-size: 1rem; color: var(--blue-mid); font-weight: 500; }
.trust-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--blue-mid); }
.trust-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   SOCIAL BAND
   ============================================================ */
.social-band { background: var(--blue-dark); display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1.5rem; }
.social-band-text { font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.social-band-icons { display: flex; gap: .8rem; }
.social-circle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; font-weight: 700; transition: border-color .2s; }
.social-circle:hover { border-color: #fff; }
.social-circle svg { width: 18px; height: 18px; fill: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--blue-deep); padding: 3rem 2.5rem 1.5rem; color: rgba(255,255,255,.85); }

/* Encart newsletter en haut du footer */
.footer-newsletter {
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 2rem; align-items: center;
  max-width: 1100px; margin: 0 auto 2.2rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-newsletter-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-style: italic; color: #fff; margin-bottom: .25rem; }
.footer-newsletter-sub { font-size: .85rem; color: rgba(255,255,255,.7); }
.footer-newsletter-form { display: flex; gap: .6rem; min-width: 340px; }
.footer-newsletter-input {
  flex: 1; padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; border-radius: 6px;
  font-size: .9rem; font-family: inherit; outline: none; transition: border-color .15s, background .15s;
}
.footer-newsletter-input::placeholder { color: rgba(255,255,255,.55); }
.footer-newsletter-input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); }
.footer-newsletter-btn {
  padding: .7rem 1.2rem; border: none; background: #fff; color: var(--blue-deep);
  border-radius: 6px; font-weight: 700; font-size: .85rem; letter-spacing: .5px;
  cursor: pointer; transition: background .15s, transform .15s;
}
.footer-newsletter-btn:hover:not(:disabled) { background: var(--beige); transform: translateY(-1px); }
.footer-newsletter-btn:disabled { opacity: .6; cursor: wait; }
.footer-newsletter-msg { grid-column: 1 / -1; margin: 0; font-size: .85rem; min-height: 1.1em; }
.footer-newsletter-msg.ok { color: #b5e3c2; }
.footer-newsletter-msg.error { color: #f5b6b6; }
@media (max-width: 720px) {
  .footer-newsletter { grid-template-columns: 1fr; gap: 1rem; }
  .footer-newsletter-form { min-width: 0; flex-wrap: wrap; }
  .footer-newsletter-input { min-width: 0; flex: 1 1 200px; }
}

.footer-top { display: grid; grid-template-columns: 220px 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.footer-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.footer-brand-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: rgba(255,255,255,.55); }
.footer-col-title { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1rem; font-weight: 700; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: 1rem; color: rgba(255,255,255,.7); transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: .85rem; color: rgba(255,255,255,.4); }
.footer-payments { display: flex; align-items: center; gap: 1rem; font-size: .85rem; color: rgba(255,255,255,.4); }
.payment-logo { height: 22px; border-radius: 4px; background: #fff; padding: 2px 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #333; border: 1.5px solid transparent; transition: border-color .2s, background .2s, color .2s; }
.payment-logo svg { height: 100%; width: auto; display: block; }
button.payment-logo { cursor: pointer; }
span.payment-logo  { opacity: .8; }
.payment-logo.visa { color: #1a1f71; }
.payment-logo.mc { color: #eb001b; }
.payment-logo.pp { color: #003087; }
.payment-logo.stripe { color: #635bff; }
button.payment-logo:hover:not([disabled]) { border-color: var(--blue-mid); }
button.payment-logo.active { border-color: var(--blue-mid); background: var(--blue-mid); color: #fff; }
button.payment-logo[disabled] { opacity: .4; cursor: not-allowed; }
.payment-method-hint { font-size: .7rem; color: var(--muted); margin-top: .4rem; min-height: 1em; }

/* ============================================================
   Address autocomplete (Nominatim) — dropdown
   ============================================================ */
.addr-dropdown {
  position: absolute;
  display: none;
  list-style: none;
  margin: 0;
  padding: .35rem 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(45, 95, 122, .14);
  z-index: 2000;
  max-height: 280px;
  overflow-y: auto;
  font-size: .88rem;
}
.addr-dropdown.open { display: block; }
.addr-dropdown-item {
  padding: .55rem .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--text);
  border-bottom: 1px solid #f3eee5;
  transition: background .12s;
}
.addr-dropdown-item:last-child { border-bottom: none; }
.addr-dropdown-item:hover,
.addr-dropdown-item.active { background: var(--beige); }
.addr-dropdown-street { font-weight: 600; color: var(--blue-dark); }
.addr-dropdown-rest   { color: var(--muted); font-size: .82rem; }

/* ============================================================
   BOUTONS GLOBAUX
   ============================================================ */
.btn-orange { background: var(--orange); color: #fff; border: none; padding: .85rem 2rem; border-radius: 8px; font-size: .9rem; font-weight: 700; letter-spacing: .05em; transition: background .2s; }
.btn-orange:hover { background: var(--orange-h); }
.btn-orange:disabled { opacity: .6; cursor: not-allowed; }

.btn-blue { background: var(--blue-dark); color: #fff; border: none; padding: .85rem 2rem; border-radius: 8px; font-size: .9rem; font-weight: 600; transition: background .2s; }
.btn-blue:hover { background: var(--blue-deep); }

.btn-blue-outline { background: transparent; color: var(--blue-dark); border: 2px solid var(--blue-dark); padding: .8rem 2rem; border-radius: 8px; font-size: .88rem; font-weight: 600; transition: all .2s; }
.btn-blue-outline:hover { background: var(--blue-dark); color: #fff; }

/* ============================================================
   PAGE GALERIE
   ============================================================ */
.page-header { padding: 3rem 2.5rem 0; background: var(--beige); }
.page-title { font-size: 1.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: .6rem; }
.page-heading { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 700; margin-bottom: 2rem; }

.gallery-categories { padding: 2.5rem 2.5rem; background: var(--beige); }
.gallery-categories h2 { font-size: 1.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: 2rem; }
/* Layout flex : une carte fait AU PLUS 1/4 du conteneur (meme s'il n'y en a
   qu'une). Au-dela de 4 cartes, le flex-shrink reduit pour rester sur une
   ligne. */
.categories-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1.5rem;
  justify-content: center;
}
.categories-grid:empty { display: none; }
.category-card {
  flex: 0 1 calc(25% - 1.125rem);   /* 1/4 max, peut retrecir si plus de 4 */
  max-width: calc(25% - 1.125rem);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .15s;
}
.category-card:hover { transform: translateY(-3px); }
.category-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* L'image vit dans un wrapper a aspect-ratio fixe et overflow hidden, comme
   ca le transform: scale du zoom ne deborde pas sur les cartes voisines. */
.category-card-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.category-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}
.category-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; transition: opacity .2s; display: block; }
.category-card:hover img { opacity: .85; }
/* Au-dela de 4 cartes : compaction progressive pour rester en une ligne */
.categories-grid[data-count="5"] .category-card h3,
.categories-grid[data-count="6"] .category-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.categories-grid[data-count="7"] .category-card h3,
.categories-grid[data-count="8"] .category-card h3 { font-size: .85rem; margin-bottom: .3rem; }
.categories-grid[data-count="5"] .category-card img,
.categories-grid[data-count="6"] .category-card img,
.categories-grid[data-count="7"] .category-card img,
.categories-grid[data-count="8"] .category-card img { aspect-ratio: 1; }
.category-link { display: block; margin-top: .5rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--muted); }

/* Sous-titre explicatif sous "Les galeries" / "Les imprimes" : aligne a gauche
   sous le titre, pas centre (le titre lui-meme est a gauche). */
.gallery-categories-subtitle {
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--blue-dark);
  margin: -1rem 0 1.8rem;
  letter-spacing: .01em;
}

/* ============================================================
   Carrousel des cartes catégories (galerie + imprimés)
   Quand <=4 cartes : flex statique (cf .categories-grid plus haut).
   Quand >4 (.overflowing) : scroll horizontal, fenetre fixe a 4 cartes.
   ============================================================ */
.categories-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.categories-track {
  /* Reprend la meme grille flex que .categories-grid */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1.5rem;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.categories-track:empty { display: none; }
/* Reprend les memes regles que .category-card a l'interieur */
.categories-track .category-card {
  flex: 0 1 calc(25% - 1.125rem);
  max-width: calc(25% - 1.125rem);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .15s;
}
.categories-track .category-card:hover { transform: translateY(-3px); }

/* Mode carrousel : on passe en scroll horizontal, fenetre = 4 cartes */
.categories-track.overflowing {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  justify-content: flex-start;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.categories-track.overflowing::-webkit-scrollbar { display: none; }
.categories-track.overflowing .category-card {
  flex: 0 0 calc(25% - 1.125rem);
  max-width: calc(25% - 1.125rem);
  scroll-snap-align: start;
}

/* Fleches de defilement, espacees des cartes */
.categories-arrow {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--blue-dark);
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.categories-arrow:hover {
  background: var(--blue-dark);
  color: #fff;
  border-color: var(--blue-dark);
  transform: scale(1.06);
}
/* Fleche grisee/transparente quand on ne peut plus defiler de ce cote */
.categories-arrow.at-edge,
.testimonials-arrow.at-edge {
  opacity: .3;
  pointer-events: none;
  transform: none;
}

@media (max-width: 720px) {
  .categories-track .category-card,
  .categories-track.overflowing .category-card {
    flex: 0 0 calc(50% - .75rem);
    max-width: calc(50% - .75rem);
  }
  .gallery-categories-subtitle { font-size: 1rem; margin-bottom: 1.4rem; }
}
/* Sur mobile, on autorise le wrap pour ne pas ecraser les cartes */
@media (max-width: 700px) {
  .categories-grid { flex-wrap: wrap; }
  .category-card { flex: 0 1 calc(50% - .75rem); max-width: calc(50% - .75rem); }
}

/* scroll-margin-top : decale l'ancre du scroll pour qu'elle apparaisse
   sous le navbar sticky (sans etre cachee dessous). */
.gallery-tableaux { padding: 0 2.5rem 4rem; background: var(--beige); scroll-margin-top: 70px; }
.gallery-tableaux h2 { font-size: 1.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: 1.5rem; }

/* Filters */
.filters-bar { background: #fdecc8; border-radius: 8px; padding: .9rem 1.2rem; margin-bottom: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.filters-label { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--text); margin-right: .5rem; }
.filter-radio { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.filter-radio input { accent-color: var(--blue-mid); }
.filter-radio span { font-size: .85rem; }
.btn-reset-filters { margin-left: auto; background: var(--blue-mid); color: #fff; border: none; padding: .5rem 1.2rem; border-radius: 6px; font-size: .78rem; font-weight: 600; }

.filters-bar-prints { background: #fdecc8; border-radius: 8px; padding: .9rem 1.2rem; margin-bottom: 2rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.filter-select { padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: .82rem; color: var(--text); cursor: pointer; outline: none; }
.filter-select:focus { border-color: var(--blue-mid); }
.filter-sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* padding-top : laisse un peu d'air en haut quand la sidebar filtres devient
   sticky, pour que les 1ers produits ne soient pas colles au navbar/sidebar. */
.gallery-grid { columns: 3; column-gap: 1.2rem; padding-top: 1.5rem; min-height: 70vh; }
/* Reserve l'espace des zones remplies en JS (categories + grille) pour eviter
   que le contenu "saute" quand il arrive -> reduit le CLS. */
#gallery-categories-grid { min-height: 300px; }
.painting-card { break-inside: avoid; margin-bottom: 1.2rem; cursor: pointer; transition: opacity .2s; position: relative; }
.painting-card:hover { opacity: .9; }
.painting-card img { width: 100%; border-radius: 4px; display: block; }
.painting-card.selected img { outline: 3px solid var(--blue-mid); border-radius: 4px; }

/* Hover : la deuxieme image fade-in par-dessus la premiere si elle existe */
.card-img-stack { position: relative; overflow: hidden; border-radius: 4px; }
.card-img-stack img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity .4s ease;
}
.card-img-stack img.card-img-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.painting-card:hover .card-img-stack img.card-img-2,
.polaroid-card:hover .card-img-stack img.card-img-2 { opacity: 1; }
.painting-info { padding: .5rem 0 .2rem; }
.painting-name { font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }
.painting-dims { font-size: .85rem; color: var(--muted); margin-bottom: .15rem; }
.painting-tech { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.painting-price { font-size: 1.2rem; font-weight: 700; color: var(--text); }

/* ============================================================
   PAGE IMPRIMÉS
   ============================================================ */
.imprimes-page { padding: 2.5rem 2.5rem 4rem; background: var(--beige); }
.imprimes-page .page-title { color: var(--blue-mid); }
.imprimes-page-heading { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; margin-bottom: .3rem; }
.imprimes-page-subtitle { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 2rem; }
.imprimes-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; margin-bottom: 2.5rem; padding-top: 1.5rem; }
.imprimes-page-grid .polaroid-card { cursor: pointer; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 1.5rem 0; }
.pagination button { background: none; border: none; font-size: .9rem; color: var(--text); padding: .3rem .6rem; }
.pagination span { font-size: .88rem; color: var(--text); }

/* ============================================================
   PAGE PRODUIT
   ============================================================ */
.product-page { padding: 2.5rem 2.5rem 4rem; background: var(--beige); }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.product-gallery { display: flex; gap: 1rem; }
.product-thumbnails { display: flex; flex-direction: column; gap: .6rem; }
.product-thumbnails img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: border-color .15s; }
.product-thumbnails img.active, .product-thumbnails img:hover { border-color: var(--blue-mid); }
/* Cap par viewport : la fiche produit doit tenir sans scroll sur un ecran
   standard. L'image conserve son ratio (object-fit contain). */
/* Colonne droite de la galerie : image principale + mention 'Photo non
   contractuelle' en dessous, centree. flex:1 pour occuper l'espace
   restant a droite des thumbnails. min-width:0 pour permettre la
   compression sans casser sur ecrans intermediaires. */
.product-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Pendant le chargement de la fiche produit, on reserve la hauteur de l'ecran
   pour que le footer demarre sous la ligne de flottaison -> il ne "saute" plus
   quand le contenu (masque au depart) s'affiche apres le fetch (anti-CLS). */
#product-loading { min-height: 100vh; }
.product-main-img {
  position: relative;
  max-height: calc(100vh - 200px);
  min-height: 280px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-main-img img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
}

.product-info { padding-top: .5rem; }
.product-tag { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.product-top-actions { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; margin-bottom: .8rem; }
/* Le bouton partager garde un look "icone plate". Le cœur a son propre style
   (.btn-fav rond blanc identique aux cards) -- on l'exclut de ces overrides. */
.product-top-actions button:not(.btn-fav) {
  background: none;
  border: none;
  padding: 4px;
  color: var(--text);
  opacity: .7;
  transition: opacity .15s;
}
.product-top-actions button:not(.btn-fav):hover { opacity: 1; }
.product-top-actions button:not(.btn-fav) svg { width: 20px; height: 20px; }
.product-name { font-family: 'Lato', sans-serif; font-size: 2.8rem; font-weight: 700; margin-bottom: .4rem; }

/* "Photo non contractuelle" : avertissement legal centre sous l'image
   principale (eviter les contestations sur couleurs/dimensions reelles). */
.product-photo-notice {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  margin: 1rem 0 0;
  letter-spacing: .5px;
}

/* ===== Chiffres alignes sur les noms d'oeuvres / produits =====
   Cormorant Garamond utilise par defaut des "old-style figures" : les chiffres
   ont des descendantes (1,5,7...) qui passent sous la ligne de base, ce qui
   donne l'impression d'un texte "decale" sur des noms comme "F15E" ou "F2A".
   On force ici les "lining figures" (chiffres alignes sur la ligne de base
   comme les majuscules) via la feature OpenType "lnum". */
.product-name,
.favoris-card-name,
.modal-product-name,
.related-card-name,
.cart-item-name,
.cart-sugg-name,
.panier-item-name,
.shipping-step-name,
.order-items-name,
#panel-orders .order-items-name {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  -webkit-font-feature-settings: "lnum" 1;
}
.product-short-desc { font-size: .92rem; color: #555; margin-bottom: .6rem; line-height: 1.5; }
.product-desc-short { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; line-height: 1.5; }
.product-tech { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.product-price { font-size: 2rem; font-weight: 700; margin: 1rem 0; color: var(--text); }
.btn-add-cart { width: 100%; background: var(--blue-dark); color: #fff; border: none; padding: 1rem; border-radius: 8px; font-size: 1rem; font-weight: 600; transition: background .2s; margin-bottom: 1rem; }
.btn-add-cart:hover { background: var(--blue-deep); }
.product-delivery-link { font-size: .85rem; color: var(--blue-mid); text-decoration: underline; }

/* Accordéons */
.accordion { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger { width: 100%; background: none; border: none; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; color: var(--blue-dark); text-align: left; }
.accordion-trigger svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s; }
.accordion-trigger.open svg { transform: rotate(180deg); }
.accordion-body { display: none; padding-bottom: 1.2rem; }
.accordion-body.open { display: block; }
.accordion-body p { font-size: 1rem; line-height: 1.7; color: #555; }
.read-more-link { color: var(--blue-mid); font-size: .82rem; margin-top: .4rem; display: block; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.detail-label { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.detail-value { font-size: .9rem; font-weight: 600; }
.shipping-item { display: flex; justify-content: space-between; margin-bottom: .6rem; font-size: .85rem; }
.shipping-link { font-size: .85rem; color: var(--blue-mid); text-decoration: underline; }

/* Carrousel suggestions */
.product-reviews { padding: 2rem 2.5rem; background: var(--beige); }
.related-section { padding: 3rem 2.5rem; background: #ede0d0; }
.related-title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; }
/* Conteneur centrer + reserve la place a gauche/droite pour les fleches.
   La largeur interne est cappee pour qu'exactement 4 cards entrent au max. */
.related-carousel-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;        /* place pour les fleches a gauche et a droite */
  box-sizing: border-box;
  overflow: hidden;       /* empeche les cards de deborder visuellement sous les fleches */
}
/* Track horizontal scrollable : exactement 4 cards visibles (25% chacune avec
   le gap). Le scroll est borne au viewport du wrap, jamais ne deborde
   des fleches. */
.related-carousel {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .3rem;
  width: 100%;
}
.related-carousel::-webkit-scrollbar { display: none; }
.related-card {
  /* 4 cards visibles : (100% - 3 gaps de 1.2rem) / 4 */
  flex: 0 0 calc((100% - 3.6rem) / 4);
  scroll-snap-align: start;
  cursor: pointer;
  transition: opacity .2s;
  min-width: 0;
  position: relative;
}
.related-card:hover { opacity: .9; }
.related-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; margin-bottom: .5rem; display: block; }
.related-card-type { font-size: .85rem; color: var(--muted); }
.related-card-name { font-size: 1rem; font-weight: 600; }
.related-card-dims { font-size: .85rem; color: var(--muted); }
.related-card-price { font-size: .88rem; font-weight: 700; color: var(--text); }
.carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid var(--border);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  font-size: 1.3rem;
  z-index: 5;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.carousel-btn:hover { background: var(--beige); transform: translateY(-50%) scale(1.08); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-btn.at-edge {
  opacity: .3;
  pointer-events: none;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
@media (max-width: 900px) {
  .related-carousel-wrap { padding: 0 50px; }
  .related-card { flex: 0 0 calc((100% - 2.4rem) / 3); } /* 3 cards visibles */
}
@media (max-width: 600px) {
  .related-carousel-wrap { padding: 0 44px; }
  .related-card { flex: 0 0 calc((100% - 1.2rem) / 2); } /* 2 cards visibles */
}

/* ============================================================
   MODAL "C'est ajouté !"
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal-overlay.hidden { display: none; }
/* Modale native <dialog> (review-modal) : wrapper transparent centre par le
   navigateur, l'assombrissement du fond est gere par ::backdrop. */
/* Centrage fiable du <dialog> : largeur definie + margin auto + inset 0.
   (Sans largeur definie, le 'width:90%' de .modal-box rendait le centrage
   ambigu et la modale apparaissait en haut a gauche.) */
.review-dialog {
  border: none; padding: 0; background: transparent; overflow: visible;
  position: fixed; inset: 0; margin: auto;
  width: min(500px, 92vw); height: fit-content; max-height: 92vh;
}
.review-dialog .modal-box { width: 100%; max-width: none; }
.review-dialog::backdrop { background: rgba(0,0,0,.4); }
/* Texte reserve aux lecteurs d'ecran (visuellement masque, lu a voix haute). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.modal-added { background: var(--beige); border-radius: 12px; width: 100%; max-width: 800px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal-added-header { text-align: center; padding: 1.2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-added-header::before, .modal-added-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.modal-added-title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-style: italic; color: var(--blue-mid); padding: 0 1.5rem; }
.modal-added-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.8rem 2rem; }
.modal-product-info { display: flex; gap: 1rem; align-items: flex-start; }
.modal-product-img { width: 100px; height: 120px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.modal-product-name { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.modal-product-price { font-size: 1.1rem; color: var(--blue-mid); font-weight: 700; margin-bottom: .5rem; }
.modal-product-format { font-size: .85rem; color: var(--muted); }
.modal-product-format span { display: block; font-size: .9rem; color: var(--text); }
.modal-cart-count { font-size: .85rem; margin-bottom: 1rem; }
.modal-recap-line { display: flex; justify-content: space-between; font-size: .88rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.modal-recap-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding: .8rem 0; }
.modal-actions { display: flex; gap: .8rem; margin-top: 1rem; }
.modal-actions .btn-blue, .modal-actions .btn-blue-outline { flex: 1; text-align: center; font-size: .85rem; padding: .75rem 1rem; }

/* ============================================================
   PANIER SIDEBAR
   ============================================================ */
/* z-index au-dessus de tout (scroll-to-top btn = 999) */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-sidebar { position: fixed; top: 0; right: 0; width: 520px; max-width: 95vw; height: 100vh; background: #ede0d0; z-index: 1001; transform: translateX(100%); transition: transform .35s ease; display: flex; }
.cart-sidebar.open { transform: translateX(0); }
/* ===== Suggestions panier (gauche de la sidebar) - version simple ===== */
.cart-sidebar-suggestions {
  width: 170px;
  flex-shrink: 0;
  background: #ddd0be;
  overflow-y: auto;
  padding: .8rem .55rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  scrollbar-width: thin;
}
.cart-sugg-track { display: flex; flex-direction: column; gap: .9rem; }
.cart-sugg-title {
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-dark);
  text-align: center;
  padding: .3rem 0 .5rem;
}
.cart-sugg-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  padding: .45rem .45rem .55rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .2s ease;
}
.cart-sugg-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30,74,98,.13);
}
.cart-sugg-item .polaroid-card { padding: 0; width: 100%; box-shadow: none; background: none; }
.cart-sugg-item .polaroid-img { aspect-ratio: 3/4; border-radius: 6px; }
.cart-sugg-item .polaroid-base { display: none; }
.cart-sugg-item-label {
  margin-top: .5rem;
  text-align: center;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.cart-sugg-name {
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-dark);
  line-height: 1.25;
  /* clamp 2 lignes pour des cartes de hauteur homogene */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-sugg-price {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .3px;
}
.cart-sugg-add {
  margin-top: .45rem;
  padding: .35rem .5rem;
  border: 1.5px solid var(--blue-dark);
  background: #fff;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
  line-height: 1;
  width: 100%;
}
.cart-sugg-add:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.cart-sugg-add:disabled { opacity: .7; cursor: wait; }
.cart-sidebar-main { flex: 1; overflow-y: auto; padding: 1.2rem 1.2rem 1.2rem; display: flex; flex-direction: column; }
.cart-sidebar-header { display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; position: relative; }
.cart-sidebar-title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-style: italic; color: var(--blue-mid); }
.cart-close-btn { position: absolute; right: 0; background: none; border: none; font-size: 1.3rem; color: var(--orange); line-height: 1; }
.cart-items { display: flex; flex-direction: column; gap: .8rem; flex: 1; overflow-y: auto; }
.cart-item { background: #f5ede0; border-radius: 8px; padding: .8rem; display: flex; gap: .8rem; align-items: flex-start; position: relative; }
.cart-item-img { width: 64px; height: 72px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-type { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.cart-item-name { font-size: .95rem; font-weight: 700; color: var(--blue-dark); line-height: 1.25; margin-bottom: .15rem; }
.cart-item-cat { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .2rem; }
.cart-item-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--blue-dark);
  color: #fff;
  padding: .15rem .45rem;
  border-radius: 4px;
  margin-bottom: .35rem;
}
.cart-item-price { font-size: .95rem; color: var(--blue-mid); font-weight: 700; margin: .25rem 0; }
/* Note "livraison offerte" en tete de la liste du panier lateral. */
.cart-freeship { background: #eaf3ee; color: #166534; font-size: .78rem; font-weight: 600; text-align: center; padding: .5rem .6rem; border-radius: 8px; margin-bottom: .8rem; }
/* Croix de suppression sobre : alignee au titre du produit, eloignee des bords
   du conteneur. Pas de fond rouge, juste un X muted qui rougit au hover. */
.cart-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .25rem;          /* aligne avec la baseline du nom produit */
  transition: background .15s, color .15s;
  font-weight: 400;
  padding: 0;
}
.cart-item-remove:hover { color: #b91c1c; background: rgba(0,0,0,.05); }
/* Boutons +/- compacts pour ne pas dominer la card */
.cart-qty { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.cart-qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--blue-dark);
  padding: 0;
  transition: background .15s;
}
.cart-qty-btn:hover:not(:disabled) { background: var(--beige); }
.cart-qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.cart-qty { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.cart-qty button { width: 22px; height: 22px; border: 1px solid var(--border); background: #fff; border-radius: 4px; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.cart-qty span { font-size: .85rem; min-width: 16px; text-align: center; }
.cart-coupon-row { display: flex; gap: .5rem; margin-top: 1rem; }
.cart-coupon-input { flex: 1; background: rgba(255,255,255,.6); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .8rem; font-size: .82rem; outline: none; display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.cart-coupon-input input { background: none; border: none; outline: none; font-size: .82rem; flex: 1; font-family: inherit; }
.cart-coupon-btn { background: var(--blue-dark); color: #fff; border: none; border-radius: 6px; width: 36px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.cart-total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; padding: 1rem 0 .8rem; border-top: 1px solid var(--border); margin-top: .8rem; }
.cart-sidebar-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.cart-sidebar-actions .btn-blue-outline, .cart-sidebar-actions .btn-blue { width: 100%; text-align: center; padding: .85rem; }

/* ============================================================
   PAGE PANIER
   ============================================================ */
.panier-page { padding: 2.5rem 2.5rem 4rem; background: var(--beige); }
.panier-title { font-size: 1.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: 2rem; }
.panier-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.panier-items { display: flex; flex-direction: column; gap: 1.2rem; }
.panier-item {
  position: relative;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1rem 1rem 1rem .8rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}
.panier-item-img { width: 120px; height: 140px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.panier-item-info { flex: 1; min-width: 0; }
.panier-item-type { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.panier-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.2;
  margin-bottom: .4rem;
}
/* Tags d'infos (categorie, dimensions, technique, "œuvre unique"...) */
.panier-item-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .6rem;
}
.panier-tag {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  padding: .2rem .55rem;
  background: var(--beige);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 4px;
  color: var(--blue-dark);
  white-space: nowrap;
}
.panier-tag-unique {
  background: var(--blue-dark);
  color: #fff;
  border-color: transparent;
}
.panier-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.panier-item-qty {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .15rem .35rem;
}
.panier-qty-btn {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.panier-qty-btn:hover:not(:disabled) { background: var(--beige); }
.panier-qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.panier-item-qty span { font-size: .9rem; min-width: 24px; text-align: center; font-weight: 600; }

.panier-item-pricebox { text-align: right; }
/* Oeuvre unique : prix place en bas a droite de la carte (pas de doublon). */
.panier-item-pricebox-unique { position: absolute; right: 1rem; bottom: 1rem; text-align: right; }
.panier-item-unit { font-size: .78rem; color: var(--muted); }
.panier-item-total { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); margin-top: .15rem; }
.panier-item-price { font-size: 1rem; color: var(--blue-mid); font-weight: 600; }

/* Croix discrete dans la page panier (Commander) - texte muted en haut-droite */
.panier-item-remove {
  position: absolute;
  top: .6rem; right: .8rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  border: none;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  padding: 0;
}
.panier-item-remove:hover { color: #b91c1c; background: rgba(220,38,38,.08); }

.panier-recap { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; position: sticky; top: 70px; }
.panier-recap-count { font-size: 1rem; margin-bottom: 1.2rem; color: var(--muted); }
.panier-recap-line { display: flex; justify-content: space-between; font-size: .88rem; padding: .5rem 0; border-bottom: 1px dotted var(--border); }
.panier-recap-line.livraison { color: var(--muted); }
.panier-recap-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding: 1rem 0; }
.panier-coupon { display: flex; gap: .4rem; margin: .8rem 0; }
/* min-width:0 indispensable : sans lui, l'input ne peut pas se compresser sous
   la largeur de son placeholder ("CODE DE RÉDUCTION") et pousse le bouton hors
   du cadre blanc. box-sizing pour que le padding reste dans la largeur. */
.panier-coupon input { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; padding: .5rem .8rem; font-size: .82rem; outline: none; }
.panier-coupon button { flex-shrink: 0; background: var(--blue-mid); color: #fff; border: none; border-radius: 6px; padding: .5rem .9rem; font-size: .9rem; cursor: pointer; }
.panier-secure { text-align: center; font-size: .82rem; color: var(--muted); margin-top: .9rem; line-height: 1.5; }
.panier-secure-logos { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

/* ============================================================
   PANIER : oeuvre unique (pas de qty) + stock + steps + paiements
   ============================================================ */
.panier-item-unique-pill {
  display: inline-flex; align-items: center;
  padding: .3rem .8rem;
  background: var(--blue-dark); color: #fff;
  border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  user-select: none;
}
.panier-stock {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  margin-bottom: .35rem;
  padding: .1rem .5rem;
  border-radius: 4px;
}
.panier-stock-ok  { color: #16a34a; background: rgba(34,197,94,.1); }
.panier-stock-low { color: #c2410c; background: rgba(234,88,12,.1); }
.panier-stock-out { color: #b91c1c; background: rgba(239,68,68,.12); }

/* Timeline 'Le suivi de votre commande' dans le formulaire checkout */
.shipping-steps {
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.4rem;
}
.shipping-steps-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: .8rem;
}
.shipping-steps-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
}
.shipping-step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  padding: .6rem .5rem;
}
/* Petit trait reliant les etapes (desktop only) */
.shipping-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px; right: -8px;
  width: 12px; height: 2px;
  background: var(--blue-mid);
  opacity: .35;
}
.shipping-step-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--blue-mid);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-mid);
}
.shipping-step-icon svg { width: 18px; height: 18px; }
.shipping-step-name {
  font-size: .82rem; font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.25;
}
.shipping-step-hint {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .shipping-steps-list { grid-template-columns: 1fr 1fr; }
  .shipping-step:not(:last-child)::after { display: none; }
}

/* Selecteur de moyen de paiement : 2 grands cartons cliquables */
.payment-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: .6rem;
}
.pm-card {
  display: flex; flex-direction: column;
  gap: .5rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  font-family: inherit;
}
.pm-card:hover { border-color: var(--blue-mid); transform: translateY(-1px); }
.pm-card.active {
  border-color: var(--blue-dark);
  box-shadow: 0 0 0 1px var(--blue-dark);
}
.pm-card-head { display: flex; align-items: center; gap: .55rem; }
.pm-card-title { font-size: .92rem; font-weight: 700; color: var(--blue-dark); }
.pm-card-hint { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.pm-card-body { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pm-radio {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  position: relative;
  transition: border-color .15s;
}
.pm-card.active .pm-radio { border-color: var(--blue-dark); }
.pm-card.active .pm-radio::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-dark);
}
@media (max-width: 720px) {
  .payment-method-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LOGOS DE MOYENS DE PAIEMENT : pseudo-marques stylisees
   Pas d'images externes -> CSS uniquement, respecte les couleurs
   officielles (mais reste 'lookalike' pour eviter pb de droits).
   ============================================================ */
.pm-brand {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 38px;
  padding: 0 .45rem;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: .68rem; font-weight: 900;
  letter-spacing: .3px;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
}
/* VISA : italique en bleu foncé sur fond blanc */
.pm-visa {
  color: #1a1f71;
  font-style: italic;
  font-family: 'Helvetica', 'Arial Black', sans-serif;
  letter-spacing: 1px;
}
/* Mastercard : 2 ronds rouge + jaune superposes */
.pm-mc {
  background: #fff;
  position: relative;
  display: inline-flex; align-items: center;
  gap: 0;
  width: 38px; min-width: 38px; padding: 0;
}
.pm-mc-red, .pm-mc-yellow {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
}
.pm-mc-red    { background: #eb001b; margin-right: -6px; }
.pm-mc-yellow { background: #f79e1b; opacity: .85; }
/* Stripe : violet/indigo, 'Stripe' en italique */
.pm-stripe {
  color: #635bff;
  font-style: italic;
  font-family: 'Helvetica', 'Arial Black', sans-serif;
}
/* PayPal : 'P' bleu fonce + 'ayPal' bleu plus clair */
.pm-paypal {
  background: #fff;
  padding: 0 .35rem;
  font-family: 'Helvetica', 'Arial Black', sans-serif;
  font-style: italic;
  letter-spacing: 0;
}
.pm-paypal-p    { color: #003087; font-weight: 900; }
.pm-paypal-text { color: #009cde; font-weight: 700; }

/* ============================================================
   PAGE CONNEXION / INSCRIPTION
   ============================================================ */
.auth-page { min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-bg { position: absolute; inset: 0; background: url('../image/cartonEntoile/25/login-bg.jpg') center center / cover no-repeat; background-color: #1a3a50; }
.auth-card { position: relative; z-index: 1; background: var(--card-auth); border-radius: 18px; padding: 1.8rem 2.8rem 1.5rem; width: 100%; max-width: 700px; box-shadow: 0 8px 40px rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.auth-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.4rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: .25rem; }
.auth-subtitle { color: rgba(255,255,255,.75); text-align: center; font-size: .82rem; margin-bottom: 1rem; }

.auth-field-row { display: flex; gap: 1.5rem; margin-bottom: 1.1rem; align-items: flex-end; }
/* Spacing compact mais aere : .65rem entre champs (vs 1.1rem avant) */
.auth-field-group { display: flex; align-items: flex-end; gap: .7rem; margin-bottom: .65rem; flex: 1; }
.auth-field-icon { color: rgba(255,255,255,.7); flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 40px; padding-bottom: 2px; }
.auth-field-icon svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.7); fill: none; }
.auth-field { flex: 1; }
.auth-field-no-icon { flex: 1; padding-left: 1.5rem; align-items: center; }
.auth-label { display: block; font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: .3rem; }
.auth-input { width: 100%; background: #e8e0d4; border: none; border-radius: 6px; padding: .5rem .85rem; font-size: .88rem; color: #1a1612; outline: none; transition: box-shadow .2s; font-family: inherit; }
.auth-input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
/* Champ mot de passe : input + bouton oeil pour montrer/masquer.
   Le wrap ne contient QUE l'input et le bouton (pas le label, pas le hint)
   pour que le bouton soit parfaitement centre verticalement sur l'input. */
.auth-password-wrap { position: relative; display: block; }
.auth-password-wrap .auth-input { padding-right: 2.4rem; }
.auth-password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: none; background: transparent;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #6b5e4d;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.auth-password-toggle:hover { background: rgba(0,0,0,.06); color: #1a1612; }
.auth-password-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
/* Message d'erreur sous le champ confirmation mot de passe */
.auth-error-inline {
  font-size: .72rem; color: #ff6b6b; margin-top: .25rem;
  display: none;
}
.auth-error-inline.visible { display: block; }
.auth-submit { width: 100%; background: var(--orange); color: #fff; border: none; border-radius: 8px; padding: .5rem; font-size: .9rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; margin-top: .3rem; transition: background .2s; }
.auth-submit:hover { background: var(--orange-h); }
.auth-links { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; margin-top: .9rem; }
.auth-link { background: none; border: none; color: rgba(255,255,255,.82); font-size: .85rem; cursor: pointer; padding: 0; font-family: inherit; text-decoration: none; transition: color .15s; }
.auth-link:hover { color: #fff; text-decoration: underline; }
.auth-link-center { text-align: center; margin-top: .8rem; }

.auth-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; background: rgba(0,0,0,.18); border-radius: 10px; padding: .3rem; }
.auth-tab { flex: 1; background: transparent; border: none; color: rgba(255,255,255,.65); padding: .55rem 1rem; font-size: .82rem; font-weight: 600; letter-spacing: .05em; border-radius: 7px; cursor: pointer; transition: all .2s; font-family: inherit; }
.auth-tab:hover { color: #fff; }
.auth-tab.active { background: rgba(255,255,255,.92); color: #1a3a50; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

.auth-hint { font-size: .68rem; color: rgba(255,255,255,.55); margin-top: .25rem; line-height: 1.35; }
/* Groupe de 3 checkboxes RGPD (CGV / CGU / Politique) */
.auth-consent-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: .5rem 0 .8rem;
  padding: .7rem .9rem;
  background: rgba(0,0,0,.18);
  border-radius: 10px;
}
.auth-consent { display: flex; align-items: flex-start; gap: .6rem; margin: 0; color: rgba(255,255,255,.88); font-size: .78rem; line-height: 1.45; cursor: pointer; }
.auth-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--orange); width: 16px; height: 16px; cursor: pointer; }
.auth-link-inline { color: #fff; text-decoration: underline; font-weight: 600; }
.auth-link-inline:hover { color: var(--orange); }

#auth-alert { font-size: .85rem; margin-bottom: 1rem; min-height: 1rem; }
#auth-alert .alert { padding: .6rem .9rem; border-radius: 6px; font-size: .82rem; margin-bottom: 1rem; }
#auth-alert .alert-error { background: rgba(220, 38, 38, .9); color: #fff; }
#auth-alert .alert-success { background: rgba(34, 197, 94, .9); color: #fff; }
#auth-alert .err  { color: #e53e3e; }
#auth-alert .info { color: var(--blue-mid); }
#auth-alert .ok   { color: #22c55e; }

.auth-card .form-col { display: flex; flex-direction: column; }

/* ============================================================
   PAGE PROFIL CONNECTÉ (commandes / favoris / mon compte)
   ============================================================ */
.container-profile {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}
.container-profile .heading-page {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 700;
  font-style: italic;
  color: var(--blue-dark);
  margin-bottom: 2rem;
  letter-spacing: .01em;
}

.r-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

/* ---- Card générique (scope profil) ---- */
.container-profile .card {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 14px rgba(45, 95, 122, .06);
  border: 1px solid rgba(45, 95, 122, .06);
}

/* ---- Sidebar ---- */
.profile-card {
  text-align: center;
  padding: 1.8rem 1.2rem !important;
  margin-bottom: 1rem;
}
.admin-badge-text {
  display: inline-block;
  margin-top: .6rem;
  padding: .25rem .75rem;
  background: var(--blue-dark);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  border-radius: 999px;
  text-transform: uppercase;
}

.admin-sidebar {
  padding: .5rem !important;
}
.sidebar-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: .85rem 1.1rem;
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: .15rem;
}
.sidebar-btn:hover {
  background: var(--pink-light);
  color: var(--blue-dark);
}
.sidebar-btn.active {
  background: var(--pink);
  color: #fff;
  font-weight: 600;
}
.sidebar-btn.danger {
  color: #c0392b;
  margin-top: .4rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  border-radius: 0 0 8px 8px;
}
.sidebar-btn.danger:hover {
  background: #fdecea;
  color: #a02818;
}

/* ---- Titres de panel ---- */
.container-profile .heading-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: 1.5rem;
}

/* ---- Commandes ---- */
.orders-empty {
  text-align: center;
  padding: 3rem 1.5rem !important;
  color: var(--muted);
}
.orders-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: .8rem;
}
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-card { padding: 1.3rem 1.5rem !important; }

/* ===== Timeline de suivi de colis (espace client) ===== */
.order-timeline {
  display: flex;
  align-items: center;
  margin: 1rem 0 .4rem;
  padding: .2rem 0;
}
.otl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  text-align: center;
}
.otl-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  transition: background .2s, border-color .2s;
}
.otl-label { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.otl-bar { flex: 1 1 auto; height: 2px; background: var(--border); margin: 0 .25rem; margin-bottom: 1.1rem; }
.otl-step.done .otl-dot { background: var(--blue-mid); border-color: var(--blue-mid); }
.otl-step.done .otl-label { color: var(--blue-dark); font-weight: 600; }
.otl-step.current .otl-dot { box-shadow: 0 0 0 4px rgba(61,122,154,.18); }
/* La barre devient bleue jusqu'à l'étape atteinte : on colore celles qui
   précèdent un step .done via le sélecteur de proximité. */
.otl-step.done + .otl-bar { background: var(--blue-mid); }

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .7rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.order-header strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--blue-dark);
}
.order-date {
  margin-left: .7rem;
  color: var(--muted);
  font-size: .85rem;
}
.order-detail {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: .8rem;
}
.order-total { color: var(--blue-dark); font-weight: 700; }
.container-profile .badge {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.container-profile .order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}
.container-profile .order-actions button,
.container-profile .order-actions a {
  background: var(--beige);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .5rem .9rem;
  border-radius: 8px;
  font-size: .82rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.container-profile .order-actions button:hover,
.container-profile .order-actions a:hover {
  background: var(--pink-light);
  border-color: var(--pink);
  color: var(--blue-dark);
}
.container-profile .btn-tracking {
  background: var(--blue-dark) !important;
  color: #fff !important;
  border-color: var(--blue-dark) !important;
  font-weight: 600;
}
.container-profile .btn-tracking:hover {
  background: var(--blue-deep) !important;
  border-color: var(--blue-deep) !important;
  color: #fff !important;
}
.container-profile .btn-cancel-order {
  background: #fff !important;
  color: #c0392b !important;
  border: 1px solid #e7a8a1 !important;
  font-weight: 600;
}
.container-profile .btn-cancel-order:hover {
  background: #fdecea !important;
  border-color: #c0392b !important;
  color: #c0392b !important;
}
.container-profile .btn-cancel-order:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ===== Bulles d'état de remboursement (commandes annulées) ===== */
/* Affichées côté client (profil) ET côté admin (tableau commandes). */
.order-refund-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  margin: .6rem 0 .2rem;
  max-width: 100%;
}
.order-refund-pill.pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.order-refund-pill.done {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

/* Bouton "Rembourser" affiche sous la bulle "Attente de remboursement"
   (admin, commandes CANCELLED uniquement). Disparait au passage REFUNDED. */
.btn-refund {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  padding: .4rem .75rem;
  font-size: .76rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--blue-mid, #2d5f7a);
  background: var(--blue-mid, #2d5f7a);
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-refund:hover  { background: #1f4a5e; }
.btn-refund:active { transform: translateY(1px); }
.btn-refund:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ===== Chips pour les filtres support/categorie des codes promo =====
   Utilises dans le form coupon (admin) pour materialiser les supports
   (PAINTING) ou categories (DERIVATIVE) selectionnes. */
.chip-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
  min-height: 1.6rem;
}
.chip-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  background: var(--blue-mid, #2d5f7a);
  color: #fff;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
}
.chip-item .chip-remove {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  opacity: .85;
  padding: 0 .15rem;
}
.chip-item .chip-remove:hover { opacity: 1; }

/* ===== Indicateur de stock sur les cards produit (galerie, imprimés, home) ===== */
.card-stock {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  margin-top: .25rem;
  text-transform: uppercase;
}
.card-stock-ok  { color: var(--muted); font-weight: 500; }
.card-stock-low { color: #b46a12; }       /* orange : urgence */
.card-stock-out { color: #c0392b; }       /* rouge : épuisé */

/* Bouton "Voir la facture" affiche dans la cellule action des commandes admin.
   Style outline discret (PDF = info, pas action principale). */
.btn-invoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .3rem;
  padding: .4rem .6rem;
  font-size: .76rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e0d6);
  background: #fff;
  color: var(--blue-mid, #2d5f7a);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-invoice:hover {
  background: var(--beige, #f5efe6);
  border-color: var(--blue-mid, #2d5f7a);
}
.btn-invoice:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Le message du modal de confirmation est injecte via textContent (par
   securite anti-XSS), donc les \n ne sont pas rendus comme <br>. On utilise
   pre-line pour preserver les sauts de ligne du JS sans interpreter de HTML. */
#confirm-modal-message { white-space: pre-line; }
/* La modale de confirmation peut etre declenchee DEPUIS une autre modale
   (ex: croix rouge dans la carte galerie). Elle doit donc apparaitre
   au-dessus, pas derriere. z-index 600 > .modal-overlay (500). */
#confirm-modal { z-index: 600; }

/* ===== Tableau commandes : enrichissement par ligne (client + articles) =====
   Les min-widths sont calees pour qu'un email standard tienne sur 1-2 lignes
   et que les miniatures aient de la place, mais reduites pour que tout le
   tableau rentre dans un viewport laptop (~1366-1500px) sans scroll. */
#panel-orders .admin-table th:first-child,
#panel-orders .admin-table td:first-child { min-width: 170px; }
#panel-orders .admin-table th:nth-child(2),
#panel-orders .admin-table td:nth-child(2) { min-width: 200px; }

#panel-orders .order-id {
  font-weight: 700;
  margin-bottom: .35rem;
}
#panel-orders .order-customer {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .78rem;
  line-height: 1.3;
}
#panel-orders .order-customer-name {
  font-weight: 600;
  color: var(--text);
}
#panel-orders .order-customer-email {
  color: var(--blue-mid, #2d5f7a);
  text-decoration: none;
  /* overflow-wrap:anywhere coupe seulement quand vraiment necessaire
     (au lieu de break-all qui casse a chaque caractere). */
  overflow-wrap: anywhere;
  word-break: normal;
}
#panel-orders .order-customer-email:hover { text-decoration: underline; }

#panel-orders .order-total-value {
  font-weight: 600;
  margin-bottom: .35rem;
}
#panel-orders .order-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .8rem;
}
#panel-orders .order-items-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
}
#panel-orders .order-items-list img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border, #e5e0d6);
}
#panel-orders .order-items-no-img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--beige, #f5efe6);
  border: 1px dashed var(--border, #e0d6c6);
  flex-shrink: 0;
}
#panel-orders .order-items-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
#panel-orders .order-items-qty {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--blue-mid, #2d5f7a);
}

/* ===== Mobile (<=768px) : transformer le tableau commandes en cards
   verticales pour eviter tout scroll horizontal. Chaque cellule devient
   une ligne avec son label (via attr data-label dans le JS). ===== */
@media (max-width: 768px) {
  /* On force tous les containers a se contraindre a la largeur viewport.
     !important parce que les regles desktop (min-width:760px sur la table,
     min-width:200px sur la derniere cellule, etc.) ont la meme specificite
     et viennent avant : sans !important elles gagnent par ordre d'ecriture. */
  #panel-orders .card {
    overflow: hidden !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem;
  }
  #panel-orders .admin-table,
  #panel-orders .admin-table tbody,
  #panel-orders .admin-table tr,
  #panel-orders .admin-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  /* En-tete du tableau cache en mobile : chaque cellule porte son label */
  #panel-orders .admin-table thead { display: none !important; }

  /* Chaque commande devient une card avec son propre fond + bordure. */
  #panel-orders .admin-table tr {
    border: 1px solid var(--border, #e5e0d6);
    border-radius: 12px;
    padding: 1rem !important;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    overflow: hidden;
  }
  #panel-orders .admin-table tbody tr:hover { background: #fff; }
  #panel-orders .admin-table tbody tr:last-child { margin-bottom: 0; }

  /* Chaque cellule : un bloc avec son label en haut, sa valeur en dessous. */
  #panel-orders .admin-table td {
    padding: .5rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border, #e5e0d6) !important;
    vertical-align: top !important;
  }
  #panel-orders .admin-table tr td:last-child { border-bottom: 0 !important; }
  #panel-orders .admin-table td::before {
    content: attr(data-label);
    display: block;
    font-size: .62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: .35rem;
  }
  /* La cellule "Commande" (id + client) n'a pas besoin de label : son
     contenu est deja parlant et c'est l'identifiant principal. */
  #panel-orders .admin-table td:first-child::before { display: none; }
  #panel-orders .admin-table td:first-child .order-id { font-size: 1rem; }

  /* Le wrapper d'expedition + ses enfants prennent toute la largeur sans
     deborder. min-width:0 indispensable pour qu'un select avec contenu long
     ("La Poste (lettre suivie)") puisse se compresser et ne pas pousser le
     parent au-dela du viewport. */
  #panel-orders .order-ship-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    gap: .5rem;
  }
  #panel-orders .select-status,
  #panel-orders .order-ship-row select,
  #panel-orders .order-ship-row input,
  #panel-orders .order-ship-row button,
  #panel-orders .btn-invoice {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Bouton Rembourser : pleine largeur, plus facile a taper sur mobile. */
  #panel-orders .btn-refund {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Liste d'articles : eviter qu'un nom de produit long force une largeur
     superieure au viewport. */
  #panel-orders .order-items-list,
  #panel-orders .order-items-list li {
    max-width: 100%;
    min-width: 0;
  }
  #panel-orders .order-customer-email {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* ===== Toggle plier/deplier chaque commande sur mobile ===== */
  #panel-orders .admin-table tr { position: relative; }
  #panel-orders .order-toggle {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: transparent;
    border: 1px solid var(--border, #e5e0d6);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: transform .2s, background .15s;
    padding: 0;
  }
  #panel-orders .order-toggle:hover { background: var(--beige, #f5efe6); }
  /* Quand la card est repliee : on cache tout sauf la 1re cellule (id+client)
     et la cellule statut (info essentielle pour reperer la commande). */
  #panel-orders .admin-table tr.collapsed td:not(:first-child):not(.order-status-cell) {
    display: none !important;
  }
  /* Et on retire la bordure inferieure de la 1re cellule quand seul statut
     reste visible apres, pour eviter une bordure orpheline. */
  #panel-orders .admin-table tr.collapsed td:first-child { border-bottom: 0 !important; }
  /* Chevron tourne vers le haut (▾ -> ▴) quand replie pour signaler "deplier". */
  #panel-orders .admin-table tr.collapsed .order-toggle { transform: rotate(180deg); }
}
/* En desktop, le bouton de toggle reste invisible : le tableau est complet. */
#panel-orders .order-toggle { display: none; }
@media (max-width: 768px) {
  #panel-orders .order-toggle { display: inline-flex; }
}

/* ---- Avis dans commandes ---- */
.order-reviews-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.order-reviews-title {
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: .7rem;
  font-size: .9rem;
}
.order-review-item {
  background: var(--beige);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
.order-review-item--empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.order-review-product { font-weight: 600; margin-bottom: .35rem; }
.order-review-stars { font-size: 1rem; margin-bottom: .4rem; }
.order-review-comment {
  font-style: italic;
  color: var(--text);
  font-size: .88rem;
  margin: .4rem 0;
}
.review-status-ok    { color: #16a34a; font-size: .78rem; margin-left: .5rem; }
.review-status-pending { color: var(--orange); font-size: .78rem; margin-left: .5rem; }
.order-review-actions { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.btn-review-write,
.btn-review-edit,
.btn-review-delete {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .8rem;
  border-radius: 6px;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.btn-review-write { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-review-write:hover { background: var(--orange-h); }
.btn-review-edit:hover  { border-color: var(--blue-dark); color: var(--blue-dark); }
.btn-review-delete { color: #c0392b; }
.btn-review-delete:hover { background: #fdecea; border-color: #f5b7b1; }
.star-full  { color: var(--orange); }
.star-empty { color: #e0d4c8; }

/* ---- Formulaires (compte / adresse / sécurité) ---- */
.account-card { margin-bottom: 1.5rem; }
.container-profile .form-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.container-profile .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.container-profile .form-label {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  margin-bottom: .35rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.container-profile .input {
  width: 100%;
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .9rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.container-profile .input:focus {
  border-color: var(--blue-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45,95,122,.12);
}
.container-profile .btn-primary {
  background: var(--blue-dark);
  color: #fff;
  border: none;
  padding: .7rem 1.6rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s;
  align-self: flex-start;
  font-family: inherit;
  text-transform: uppercase;
}
.container-profile .btn-primary:hover { background: var(--blue-deep); }
.container-profile .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-mt { margin-top: .5rem; }
.password-hint {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .35rem;
  line-height: 1.4;
}
.text-muted-hint { color: var(--muted); font-size: .85rem; }

/* ---- RGPD ---- */
.rgpd-section {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 2px 14px rgba(45, 95, 122, .06);
  border: 1px solid rgba(45, 95, 122, .06);
}
.rgpd-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: .8rem;
}
.rgpd-text {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.rgpd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.rgpd-actions button {
  background: var(--beige);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .55rem 1rem;
  border-radius: 8px;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.rgpd-actions button:hover {
  background: var(--pink-light);
  border-color: var(--pink);
}
.rgpd-actions .btn-danger {
  color: #c0392b;
  border-color: #f5b7b1;
}
.rgpd-actions .btn-danger:hover {
  background: #fdecea;
  border-color: #e74c3c;
  color: #a02818;
}

/* ---- Favoris (grille produits) ---- */
.container-profile .r-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}
.container-profile .r-products .card {
  padding: 0 !important;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.container-profile .r-products .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(45, 95, 122, .12);
}
.product-img {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink-light);
  font-size: 2.5rem;
  overflow: hidden;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.bg-peach { background: #ffd9c2; }
.bg-rose  { background: var(--pink-light); }
.bg-cream { background: #fef0e3; }
.bg-sand  { background: #f1e2cc; }
.container-profile .card-body { padding: 1rem 1.1rem 1.2rem; }
.product-name {
  font-family: 'Lato', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .6rem;
  color: var(--blue-dark);
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.product-price {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 1rem;
}

/* ===== Affichage prix avec reduction (cards, fiche, panier, mini-panier)
   Le markup commun est :
     <span class="price-original">19,99 €</span>
     <span class="price-discounted">14,99 €</span>
     <span class="price-badge">-25%</span>   (uniquement sur la fiche)
   On garde des regles legeres pour ne pas perturber la mise en page existante. */
.price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 500;
  margin-right: .4rem;
}
.price-discounted {
  color: #c0392b;
  font-weight: 700;
}
.price-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .55rem;
  background: #c0392b;
  color: #fff;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  vertical-align: middle;
}
.btn-small {
  background: var(--blue-dark);
  color: #fff;
  border: none;
  padding: .45rem .8rem;
  border-radius: 6px;
  font-size: .75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-small:hover { background: var(--blue-deep); }

/* ---- Modal avis ---- */
.modal-box {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: .5rem;
}
.modal-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }
.review-stars-input {
  display: flex;
  gap: .3rem;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: .3rem;
}
.review-stars-input span {
  color: #e0d4c8;
  transition: transform .1s, color .1s;
}
.review-stars-input span.active,
.review-stars-input span.hovered {
  color: var(--orange);
  transform: scale(1.1);
}
.review-stars-label {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .8rem;
}
.modal-field { margin-bottom: 1rem; }
.input-sm {
  width: 100%;
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .88rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
}
.input-sm:focus {
  border-color: var(--blue-dark);
  background: #fff;
}
.modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.modal-actions .btn-primary {
  background: var(--blue-dark);
  color: #fff;
  border: none;
  padding: .65rem 1.4rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.modal-actions .btn-primary:hover { background: var(--blue-deep); }
.btn-cancel {
  background: var(--beige);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .65rem 1.4rem;
  border-radius: 8px;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
}
.btn-cancel:hover { background: var(--pink-light); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .r-profile { grid-template-columns: 1fr; }
  .container-profile .form-row-2 { grid-template-columns: 1fr; }
  .container-profile { padding: 2rem 1rem 3rem; }
  .container-profile .heading-page { font-size: 2rem; }
  .admin-sidebar { position: static; }
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */
.events-page { padding: 2.5rem 2.5rem 4rem; background: var(--beige); }
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.event-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .2s; }
.event-card:hover { transform: translateY(-4px); }
.event-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.event-card-body { padding: 1.2rem; }
.event-date { font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: .4rem; }
.event-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: .4rem; }
.event-location { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.event-desc { font-size: 1rem; line-height: 1.5; color: #555; }

/* ============================================================
   GALERIE — sidebar latérale
   ============================================================ */
/* Colonne filtre FLUIDE : suit la largeur de l'ecran (compacte sur petits
   ecrans, jamais > 240px). La sidebar remplit sa colonne (width:100%). */
.galerie-layout { display: grid; grid-template-columns: clamp(170px, 19vw, 240px) 1fr; align-items: start; background: var(--beige); gap: clamp(1.2rem, 3vw, 40px); }
.g-sidebar { position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; width: 100%; padding: clamp(1rem, 2vw, 1.8rem) clamp(.8rem, 1.4vw, 1.4rem); background: #ede4d8; border-right: 1px solid #ddd0c0; scrollbar-width: thin; }
.g-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.g-sidebar-title { font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--text); }
.g-clear-btn { background: none; border: none; font-size: .75rem; color: var(--blue-mid); cursor: pointer; text-decoration: underline; font-family: inherit; }
.g-filter-group { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.g-filter-group:last-of-type { border-bottom: none; }
.g-filter-label {
  font-size: .62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-mid);
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.g-filter-label::after {
  content: '⌃';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s;
  color: var(--blue-mid);
}
.g-filter-group.collapsed .g-filter-label::after { transform: rotate(180deg); }
.g-filter-group.collapsed .g-filter-body { display: none; }
.g-filter-body { display: block; }
.g-nav-list { list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.g-nav-link { display: block; font-size: .88rem; color: #666; padding: .3rem .7rem; border-radius: 6px; border-left: 2px solid transparent; transition: all .15s; text-decoration: none; }
.g-nav-link:hover { color: var(--text); background: rgba(0,0,0,.04); }
.g-nav-link.active { color: var(--blue-dark); font-weight: 700; border-left-color: var(--blue-mid); background: rgba(45,95,122,.07); }
.g-nav-sub { list-style: none; padding-left: .8rem; margin-top: .2rem; display: flex; flex-direction: column; gap: .1rem; }
.g-nav-sub a { display: block; font-size: .78rem; color: #888; padding: .18rem .5rem; border-radius: 4px; transition: color .15s; text-decoration: none; }
.g-nav-sub a:hover { color: var(--blue-mid); }
.g-check { display: flex; align-items: center; gap: .5rem; font-size: .84rem; cursor: pointer; margin-bottom: .4rem; color: #444; }
.g-check input { accent-color: var(--blue-mid); }
.g-crosslink { margin-top: 1.5rem; padding: 1rem; background: rgba(45,95,122,.08); border-radius: 8px; text-align: center; }
.g-crosslink p { font-size: .78rem; color: #666; margin-bottom: .5rem; }
.g-crosslink a { font-size: .78rem; font-weight: 700; color: var(--blue-mid); text-decoration: underline; }

/* ============================================================
   IMPRIMÉS — sidebar latérale
   ============================================================ */
.imprimes-layout { display: grid; grid-template-columns: clamp(170px, 19vw, 240px) 1fr; align-items: start; background: var(--beige); gap: clamp(1.2rem, 3vw, 40px); }
.p-sidebar { position: sticky; top: 58px; height: calc(100vh - 58px); width: 100%; overflow-y: auto; padding: clamp(1rem, 2vw, 1.8rem) clamp(.8rem, 1.4vw, 1.3rem); background: #ede4d8; border-right: 1px solid #ddd0c0; scrollbar-width: thin; }
.p-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.p-sidebar-title { font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--text); }
.p-clear-btn { background: none; border: none; font-size: .75rem; color: var(--blue-mid); cursor: pointer; text-decoration: underline; font-family: inherit; }
.p-filter-group { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.p-filter-group:last-of-type { border-bottom: none; }
.p-filter-label {
  font-size: .62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-mid);
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.p-filter-label::after {
  content: '⌃';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s;
  color: var(--blue-mid);
}
.p-filter-group.collapsed .p-filter-label::after { transform: rotate(180deg); }
.p-filter-group.collapsed .p-filter-body { display: none; }
.p-filter-body { display: block; }
.p-nav-list { list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.p-nav-link { display: block; font-size: .88rem; color: #666; padding: .3rem .7rem; border-radius: 6px; border-left: 2px solid transparent; transition: all .15s; text-decoration: none; }
.p-nav-link:hover { color: var(--text); background: rgba(0,0,0,.04); }
.p-nav-link.active { color: var(--tan); font-weight: 700; border-left-color: var(--tan); background: rgba(196,149,106,.08); }
.p-check { display: flex; align-items: center; gap: .5rem; font-size: .84rem; cursor: pointer; margin-bottom: .38rem; color: #444; }
.p-check input { accent-color: var(--blue-mid); }
.p-crosslink { margin-top: 1.5rem; padding: 1rem; background: rgba(196,149,106,.1); border-radius: 8px; text-align: center; }
.p-crosslink p { font-size: .78rem; color: #666; margin-bottom: .5rem; }
.p-crosslink a { font-size: .78rem; font-weight: 700; color: var(--tan); text-decoration: underline; }

/* ============================================================
   LULU BACKEND — Toast, avis, specs, checkout, profil
   ============================================================ */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { color: #fff; padding: .75rem 1.2rem; border-radius: 8px; font-size: .88rem; font-weight: 600; max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,.2); animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   BANDEAU CONSENTEMENT COOKIES (strict necessaire)
   ============================================================ */
.cookie-consent {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9998;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
  padding: 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.cookie-consent.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie-consent-title { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); display: block; margin-bottom: .5rem; }
.cookie-consent-text p { margin: 0 0 .5rem; font-size: .84rem; line-height: 1.55; color: var(--text); }
.cookie-consent-text p:last-of-type { margin-bottom: 0; }
.cookie-consent-list {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text);
}
.cookie-consent-list li { padding-left: .1rem; }
.cookie-consent-text a { color: var(--blue-mid); text-decoration: underline; white-space: nowrap; }
.cookie-consent-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.cookie-btn {
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.cookie-btn-primary { background: var(--blue-dark); color: #fff; }
.cookie-btn-primary:hover { background: var(--blue-mid); }
.cookie-btn-secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.cookie-btn-secondary:hover { background: var(--beige); }
@media (max-width: 520px) {
  .cookie-consent { left: .8rem; right: .8rem; bottom: .8rem; max-width: none; }
}

.star-full  { color: #f59e0b; }
.star-empty { color: #e5e5e5; }
.rating-input { display: flex; gap: .25rem; margin: 1rem 0; }
.rating-input span { font-size: 1.5rem; cursor: pointer; color: #e5e5e5; transition: color .15s, transform .1s; }
.rating-input span:hover { transform: scale(1.1); }
.rating-input span.active, .rating-input span.hover { color: #f59e0b; }

.specs-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.specs-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--border); }
.specs-table td:first-child { color: var(--muted); width: 40%; }

.review-card { background: #fff; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: .8rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.review-author { font-weight: 700; font-size: .88rem; margin-bottom: .2rem; }
.review-date { font-size: .75rem; color: var(--muted); margin-bottom: .4rem; }
.review-form-msg { font-size: .82rem; margin-top: .5rem; }
.review-form-msg.success { color: #22c55e; }
.review-form-msg.error   { color: #e53e3e; }
.review-form-card { background: #fff; border-radius: 10px; padding: 1.2rem; margin-top: 1.5rem; }

.loading-msg { text-align: center; padding: 4rem; color: var(--muted); font-style: italic; }
.empty-msg   { text-align: center; padding: 4rem; color: var(--muted); }

.stock-ok  { color: #22c55e; font-size: .82rem; }
.stock-low { color: #f59e0b; font-size: .82rem; }
.stock-out { color: #e53e3e; font-size: .82rem; }

/* Panier — adresses sauvegardees (style Amazon) */
.saved-addresses-block { margin-bottom: 1.5rem; }
.saved-addresses-list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .saved-addresses-list { grid-template-columns: 1fr; } }
.saved-addr-card {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.saved-addr-card:hover { border-color: var(--blue-mid); }
.saved-addr-card.selected {
  border-color: var(--blue-dark);
  background: #f8fbfd;
  box-shadow: 0 2px 8px rgba(45, 95, 122, .08);
}
.saved-addr-card input[type="radio"] {
  margin-top: 3px; accent-color: var(--blue-dark); flex-shrink: 0; cursor: pointer;
}
.saved-addr-content { flex: 1; font-size: .85rem; line-height: 1.5; }
.saved-addr-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; flex-wrap: wrap; }
.saved-addr-label { font-weight: 600; color: var(--blue-dark); font-size: .82rem; }
.saved-addr-badge {
  background: var(--blue-dark); color: #fff;
  font-size: .65rem; font-weight: 600; letter-spacing: .04em;
  padding: .15rem .5rem; border-radius: 999px; text-transform: uppercase;
}
.saved-addr-name { font-weight: 600; margin-bottom: .2rem; }
.saved-addr-lines { color: var(--muted); font-size: .82rem; }

/* Adresses sauvegardees cote profil (liste + actions) */
.profile-addr-list { display: flex; flex-direction: column; gap: .7rem; }
.profile-addr-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; background: #fff;
  border: 1.5px solid var(--border); border-radius: 10px;
}
.profile-addr-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.addr-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: .35rem .7rem; font-size: .78rem; cursor: pointer; color: var(--blue-dark);
  white-space: nowrap; transition: border-color .15s, background .15s;
}
.addr-action-btn:hover { border-color: var(--blue-mid); background: #f8fbfd; }
.addr-action-btn:disabled { opacity: .5; cursor: default; }
.addr-action-danger { color: #b91c1c; }
.addr-action-danger:hover { border-color: #fca5a5; background: #fef2f2; }
.profile-addr-add-toggle { cursor: pointer; font-weight: 600; color: var(--blue-dark); font-size: .9rem; }
.profile-addr-default-row { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .88rem; }
.btn-new-address {
  background: transparent; border: 1.5px dashed var(--border);
  color: var(--blue-mid); padding: .7rem 1.2rem; border-radius: 8px;
  font-size: .85rem; font-weight: 600; cursor: pointer; width: 100%;
  transition: all .15s; font-family: inherit;
}
.btn-new-address:hover { border-color: var(--blue-mid); background: #f8fbfd; }

/* Case a cocher "enregistrer cette adresse" */
.save-addr-row {
  display: flex; align-items: center; gap: .5rem;
  margin: .8rem 0 0; padding: .7rem 1rem;
  background: #fff5ef; border: 1px solid #f8d5c5; border-radius: 8px;
  font-size: .85rem; cursor: pointer;
}
.save-addr-row input { accent-color: var(--orange); cursor: pointer; }

/* Panier — checkout form */
.checkout-form-card {
  background: #fff; border-radius: 12px; padding: 1.5rem; margin: 1.5rem auto 0;
  border: 1px solid var(--border);
  /* Largeur limitee + centree : le formulaire ne remplit plus toute la
     colonne de gauche (plus lisible, moins etire). */
  width: 100%;
  max-width: 720px;
}
.checkout-form-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.form-group label { font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.form-group input, .form-group select, .form-group textarea { border: 1px solid var(--border); border-radius: 6px; padding: .6rem .85rem; font-size: .9rem; font-family: inherit; outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box; }
.form-group input:focus, .form-group select:focus { border-color: var(--blue-mid); }
.section-title-sm { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin: 1.2rem 0 .8rem; }
.same-address-label { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; cursor: pointer; line-height: 1.4; }
.same-address-label input[type="checkbox"] { flex-shrink: 0; margin-top: .15rem; }

/* Responsive : form-row passe en 1 colonne sous 600px */
@media (max-width: 600px) {
  .checkout-form-card { padding: 1.2rem; }
  .form-row { grid-template-columns: 1fr; }
}

#verify-section { display: flex; flex-direction: column; gap: .8rem; }
.verify-hint { font-size: .84rem; color: rgba(255,255,255,.75); text-align: center; }
.verify-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; }
.verify-text { font-size: .88rem; color: var(--muted); line-height: 1.5; margin-bottom: .6rem; }
.verify-text strong { color: var(--text); }
.btn-link-light { background: none; border: none; color: rgba(255,255,255,.7); font-size: .82rem; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* Profile section */
.profile-section { padding: 2.5rem 2.5rem 4rem; background: var(--beige); }
.profile-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-dark); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; flex-shrink: 0; margin: 0 auto .8rem; }
.profile-name { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; margin: 0; }
.profile-email { font-size: .85rem; color: var(--muted); }
.profile-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); }
.profile-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: .7rem 1.2rem; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -1px; transition: all .15s; font-family: inherit; }
.profile-tab-btn.active { color: var(--blue-dark); border-bottom-color: var(--blue-mid); }
.profile-tab-content { display: none; }
.profile-tab-content.active { display: block; }
.order-card { background: #fff; border-radius: 10px; padding: 1.2rem; margin-bottom: .8rem; border: 1px solid var(--border); }
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.order-id { font-size: .78rem; color: var(--muted); }
.order-status-badge { font-size: .72rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; color: #fff; letter-spacing: .5px; }
.order-items-list { font-size: .85rem; color: #555; }
.order-total { font-weight: 700; font-size: .95rem; margin-top: .5rem; }

/* Empty cart : centre verticalement aussi (display:flex utilise par panier.js) */
.empty-cart-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1rem;
  color: var(--muted);
  background: var(--beige);
  min-height: 60vh;
}
.empty-cart-msg a {
  display: inline-block;
  margin-top: .5rem;
  color: var(--blue-mid);
  font-weight: 600;
  padding: .6rem 1.2rem;
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.empty-cart-msg a:hover { background: var(--blue-mid); color: #fff; }
.shipping-info { font-size: .82rem; color: var(--blue-mid); }

/* Address autocomplete */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 300; max-height: 200px; overflow-y: auto; }
.autocomplete-dropdown li { padding: .6rem .9rem; font-size: .85rem; cursor: pointer; list-style: none; }
.autocomplete-dropdown li:hover, .autocomplete-dropdown li.active { background: var(--beige); }

/* ============================================================
   BOUTON CŒUR FAVORIS
   ============================================================ */
.btn-fav { position: absolute; top: .6rem; right: .6rem; bottom: auto; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; z-index: 10; }
.btn-fav:hover { transform: scale(1.1); background: #fff; }
.btn-fav svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.8; transition: all .15s; }
.btn-fav.active svg { stroke: var(--orange); fill: var(--orange); }
.btn-fav:disabled { opacity: .5; cursor: wait; }

/* Variante "inline" : utilisee dans le detail produit pour matcher le
   bouton partager (.nav-icon-btn). Override les styles "rond blanc absolu". */
.btn-fav-inline {
  position: static;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 4px;
  z-index: auto;
}
.btn-fav-inline:hover { transform: none; background: none; }
.btn-fav-inline svg { width: 20px; height: 20px; stroke-width: 1.8; }
.product-card-dynamic { position: relative; }

/* ============================================================
   PAGE FAVORIS
   ============================================================ */
.favoris-page { background: var(--beige); min-height: 70vh; padding: 3rem 2.5rem 4rem; }
.favoris-header { max-width: 1200px; margin: 0 auto 2.5rem; text-align: center; }
.favoris-eyebrow { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin-bottom: .5rem; }
.favoris-title { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; margin-bottom: .6rem; }
.favoris-subtitle { font-size: .92rem; color: var(--muted); max-width: 540px; margin: 0 auto; }
.favoris-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.favoris-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06); cursor: pointer; transition: transform .2s, box-shadow .2s; position: relative; }
.favoris-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.favoris-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.favoris-card-info { padding: .7rem .9rem .8rem; }
/* Coeur favoris sur l'image (remplace l'ancien bouton "Retirer") */
.favoris-heart-btn {
  position: absolute; top: .6rem; right: .6rem;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s; z-index: 10;
}
.favoris-heart-btn:hover { transform: scale(1.1); background: #fff; }
.favoris-heart-btn svg { width: 16px; height: 16px; stroke: var(--orange); fill: var(--orange); stroke-width: 1.8; }
.favoris-heart-btn:disabled { opacity: .5; cursor: wait; }
.favoris-card-name { font-family: 'Lato', sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.favoris-card-meta { font-size: .72rem; color: var(--muted); margin-bottom: .6rem; text-transform: uppercase; letter-spacing: 1px; }
.favoris-card-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.favoris-card-price { font-size: 1.05rem; font-weight: 700; }
/* Deux boutons cote a cote sous le prix : Ajouter au panier + Retirer */
.favoris-card-actions { display: flex; gap: .4rem; align-items: stretch; }
.favoris-cart-btn {
  flex: 1; padding: .5rem .6rem;
  background: var(--blue-dark); color: #fff; border: none;
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  letter-spacing: .3px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.favoris-cart-btn:hover { background: var(--blue-mid); transform: translateY(-1px); }
.favoris-cart-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.favoris-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .7rem;
  background: #fff; color: #c0392b;
  border: 1px solid #c0392b;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.favoris-remove-btn:hover { background: #c0392b; color: #fff; }
.favoris-remove-btn:disabled { opacity: .5; cursor: wait; }
.favoris-stock-out {
  flex: 1; text-align: center; padding: .5rem;
  font-size: .74rem; color: var(--muted); font-style: italic;
  border: 1px dashed var(--border); border-radius: 999px;
}
.favoris-empty { max-width: 540px; margin: 3rem auto; text-align: center; padding: 3rem 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.favoris-empty-icon { width: 64px; height: 64px; margin: 0 auto 1.2rem; display: flex; align-items: center; justify-content: center; background: rgba(245,160,64,.15); border-radius: 50%; }
.favoris-empty-icon svg { width: 32px; height: 32px; stroke: var(--orange); fill: none; stroke-width: 1.6; }
.favoris-empty h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; margin-bottom: .6rem; }
.favoris-empty p { font-size: .92rem; color: var(--muted); margin-bottom: 1.5rem; }

/* Bandeau d'info pour les invites : leurs favoris sont en localStorage */
.favoris-guest-hint {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: .65rem 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  text-align: center;
  font-size: .85rem;
  color: #9a3412;
}
.favoris-guest-hint p { margin: 0; }
.favoris-guest-hint svg { fill: currentColor; }
.favoris-guest-hint a { color: #c2410c; font-weight: 700; text-decoration: underline; }

/* ============================================================
   PROFIL — auth dashboard (page profil.html)
   ============================================================ */
.page-center { min-height: calc(100vh - 60px); background: var(--beige); display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.container-profile { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 4rem; background: var(--beige); min-height: 70vh; }

.heading-page-center { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 700; text-align: center; margin-bottom: .4rem; }
.heading-page { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem; }
.heading-sub { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.2rem; }
.text-muted-center { font-size: .9rem; color: var(--muted); text-align: center; margin-bottom: 1.8rem; }
.text-muted-hint { font-size: .82rem; color: var(--muted); }

.auth-box { background: #fff; border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 460px; box-shadow: 0 4px 24px rgba(0,0,0,.07); }

.form-col { display: flex; flex-direction: column; gap: 1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-label { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; display: block; margin-bottom: .35rem; }
.input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: .65rem .85rem; font-size: .9rem; font-family: inherit; outline: none; background: #fff; transition: border-color .2s; }
.input:focus { border-color: var(--blue-mid); }
.input-sm { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: .55rem .75rem; font-size: .85rem; font-family: inherit; outline: none; background: #fff; }
.input-sm:focus { border-color: var(--blue-mid); }

.password-hint { font-size: .72rem; color: var(--muted); margin-top: .35rem; font-style: italic; }
.form-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; color: #444; cursor: pointer; line-height: 1.5; }
.form-check input { accent-color: var(--blue-mid); margin-top: 3px; flex-shrink: 0; }
.form-check a { color: var(--blue-mid); text-decoration: underline; }

.btn-primary { background: var(--blue-dark); color: #fff; border: none; border-radius: 999px; padding: .8rem 1.6rem; font-size: .82rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background .2s, transform .1s; text-align: center; display: inline-block; }
.btn-primary:hover { background: var(--blue-mid); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: wait; }

/* Bouton outline : transparent, contour gris (utilise sur la page success notamment) */
.btn-outline {
  background: transparent;
  color: var(--blue-dark);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: .8rem 1.6rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s, color .2s, background .2s;
  text-align: center;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--blue-dark); background: var(--beige); }

/* Rangee horizontale de boutons d'action (success / cancel / etc.) */
.hero-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.hero-actions .btn-primary,
.hero-actions .btn-outline { white-space: nowrap; }

.btn-mt { margin-top: .5rem; }

.btn-cancel { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: .7rem 1.4rem; font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: all .2s; }
.btn-cancel:hover { border-color: var(--text); color: var(--text); }

.btn-link { background: none; border: none; color: var(--blue-mid); font-size: .82rem; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0; align-self: center; }
.btn-link:hover { color: var(--blue-dark); }

.btn-danger { background: #fff; color: #d33; border: 1px solid #d33; border-radius: 999px; padding: .7rem 1.4rem; font-size: .78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: all .2s; }
.btn-danger:hover { background: #d33; color: #fff; }

.forgot-link { font-size: .82rem; color: var(--blue-mid); text-decoration: underline; text-align: center; margin-top: .2rem; display: block; }
.forgot-link:hover { color: var(--blue-dark); }

.r-profile { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
/* min-width:0 sur les colonnes : evite que le contenu (grille favoris) force
   la colonne a depasser la largeur de l'ecran. */
.r-profile > * { min-width: 0; }
/* La grille favoris dans le profil remplit sa colonne (pas le max-width
   1200px de la page favoris pleine largeur) + colonnes plus petites. */
#wishlist-grid.favoris-grid { max-width: none; margin: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.profile-card { text-align: center; margin-bottom: 1rem; padding: 1.5rem; }

.admin-badge-text { display: inline-block; margin-top: .8rem; font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--tan); padding: .3rem .8rem; border: 1px solid var(--tan); border-radius: 999px; }

.admin-sidebar { padding: .6rem; display: flex; flex-direction: column; gap: .2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.sidebar-btn { background: none; border: none; text-align: left; padding: .75rem 1rem; font-size: .88rem; font-weight: 500; color: #555; border-radius: 8px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; display: flex; align-items: center; gap: .6rem; }
.sb-ico { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-btn:hover { background: var(--beige); color: var(--text); }
.sidebar-btn.active { background: rgba(45,95,122,.1); color: var(--blue-dark); font-weight: 700; }
.sidebar-btn.danger { color: #d33; }
.sidebar-btn.danger:hover { background: rgba(211,51,51,.08); }
/* Bouton Deconnexion deplace en bas de la section "Mon compte" */
.account-logout { margin-top: 1.5rem; }
.account-logout .sidebar-btn { width: 100%; justify-content: center; border: 1px solid rgba(211,51,51,.35); border-radius: 8px; }
.account-logout .sidebar-btn:hover { background: rgba(211,51,51,.08); }

.orders-empty { text-align: center; padding: 3rem 1.5rem; }
.empty-icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--muted); }
.empty-icon svg { display: inline-block; }
.orders-list { display: flex; flex-direction: column; gap: 1rem; }
.account-card { padding: 1.8rem; }

/* ===== Modale ajustement de stock ===== */
.stock-modal-body { margin-top: .6rem; }
.stock-stepper {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-top: .4rem;
}
.stock-stepper .input {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  -moz-appearance: textfield;
}
.stock-stepper .input::-webkit-outer-spin-button,
.stock-stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stock-step-btn {
  width: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.stock-step-btn:hover { background: var(--beige); border-color: var(--blue-mid); }
.stock-quick-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .4rem;
  margin-top: .7rem;
}
.stock-quick-btn {
  padding: .45rem 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.stock-quick-btn.pos { color: #16a34a; }
.stock-quick-btn.pos:hover { background: #dcfce7; border-color: #16a34a; }
.stock-quick-btn.neg { color: #dc2626; }
.stock-quick-btn.neg:hover { background: #fee2e2; border-color: #dc2626; }

/* ===== Cellule action du tableau commandes admin (statut + expedition) ===== */
/* Selects stylises (le rendu natif etait moche) : bordure douce, fleche custom,
   largeur coherente. */
.select-status,
.order-ship-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  /* Pas de min-width : la cellule doit pouvoir se compresser pour que le tableau
     reste dans son card sans débordement horizontal sur écran moyen. */
  padding: .45rem 1.7rem .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e4a62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--blue-dark);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.select-status:hover,
.order-ship-row select:hover { border-color: var(--blue-mid); }
.select-status:focus,
.order-ship-row select:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(61,122,154,.15); }

/* La cellule entiere : empile statut puis bloc expedition, fluide */
.order-ship-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  margin-top: .5rem;
  width: 100%;
  min-width: 0; /* permet la compression dans le tableau */
}
.order-tracking-input {
  width: 100%;
  font-size: .84rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.order-tracking-input:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(61,122,154,.15); }
.order-ship-row .btn-action { width: 100%; }
.order-track-link {
  font-size: .8rem;
  color: var(--blue-mid);
  text-decoration: underline;
  white-space: nowrap;
  align-self: flex-start;
}

.rgpd-section { margin-top: 2rem; padding: 1.5rem; background: rgba(196,149,106,.08); border-left: 3px solid var(--tan); border-radius: 0 8px 8px 0; }
.rgpd-title { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--tan); margin-bottom: .8rem; }
.rgpd-text { font-size: .85rem; line-height: 1.6; color: #555; margin-bottom: 1.2rem; }
.rgpd-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.rgpd-actions button { background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: .6rem 1.2rem; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; }
.rgpd-actions button:hover { border-color: var(--text); }

.r-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

.modal-card { background: #fff; border-radius: 12px; padding: 2rem; max-width: 480px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; }
.modal-card .text-muted-hint { margin-bottom: 1rem; }

/* ============================================================
   ADMIN — dashboard
   ============================================================ */
.container-page { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 4rem; background: var(--beige); min-height: 80vh; }
/* Sur la page admin, on élargit le conteneur pour donner plus de place
   au tableau commandes (sinon les selects status / transporteur / n° de suivi
   sont tronqués). La sidebar reste à 260px, c'est la colonne contenu qui
   gagne de la largeur. Padding lateral reduit pour gagner encore quelques
   pixels utiles sans coller au bord. */
.container-page:has(.r-admin) {
  max-width: 1800px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.heading-page-light { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem; }
.heading-sub-light { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.2rem; }
.heading-sub-small { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-mid); font-weight: 700; margin: 2rem 0 1rem; }

.r-admin { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.stock-badge-float { display: inline-block; background: #d33; color: #fff; font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
.stock-badge-float:empty { display: none; }

.r-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kpi-card { background: #fff; border-radius: 12px; padding: 1.4rem 1.5rem; box-shadow: 0 2px 14px rgba(0,0,0,.05); border-left: 3px solid var(--blue-mid); }
.kpi-card.tan    { border-left-color: var(--tan); }
.kpi-card.orange { border-left-color: var(--orange); }
.kpi-card.green  { border-left-color: #22c55e; }
.kpi-card.red    { border-left-color: #d33; }
.kpi-label { font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .5rem; }
.kpi-value { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.kpi-sub { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

.chart-card { padding: 1.5rem; margin-bottom: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }

.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table thead th { font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--beige); }
.admin-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.admin-table tbody tr:hover { background: rgba(45,95,122,.03); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table td { padding: .85rem 1rem; color: var(--text); vertical-align: middle; }
.admin-table td.num   { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table td.muted { color: var(--muted); font-size: .82rem; }

/* Tableau commandes : cellules alignées en haut (la cellule action est haute :
   status + transporteur + n° de suivi + bouton). Le tableau reste fluide
   (pas d'overflow-x) : c'est .select-status / .order-ship-row qui se
   compressent grâce à width:100% + min-width:0. */
#panel-orders .admin-table { table-layout: auto; }
#panel-orders .admin-table td { vertical-align: top; }
/* Colonne ACTION : on lui reserve un minimum pour que les selects restent
   lisibles, mais on accepte la troncature ellipsis sur les textes longs
   ("En cours de livraison" -> "En cou...") pour que tout tienne sans scroll. */
#panel-orders .admin-table th:last-child,
#panel-orders .admin-table td:last-child { min-width: 160px; }
/* Cellules courtes du milieu : on les rend non-extensibles pour qu'elles
   ne grignotent pas la place à la colonne Action. */
#panel-orders .admin-table td.num,
#panel-orders .admin-table td.muted { white-space: nowrap; }
/* Si l'écran est trop étroit pour afficher toutes les colonnes confortablement,
   le card devient scrollable horizontalement (au lieu de laisser le tableau
   déborder visuellement hors du card blanc). Le scroll est interne au card,
   donc le reste de la page (sidebar, chips de filtre) reste fixe. */
/* Le card garde sa largeur visuelle (taille determinee par la grille admin),
   et si le tableau est plus large, une scrollbar horizontale interne au
   card permet d'acceder a la colonne Action sans elargir le tableau. */
#panel-orders .card { overflow-x: auto; }
/* Min-width = somme des min-widths des colonnes + un peu de marge, pour
   garantir que la scrollbar apparait des qu'une colonne est tronquee. */
#panel-orders .admin-table { min-width: 900px; }

/* ===== Pill de statut commande (côté admin) — coordonnée avec .order-refund-pill ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1.3;
}

.status-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; color: #fff; letter-spacing: .5px; text-transform: uppercase; }
.status-badge.pending    { background: #f97316; }
.status-badge.confirmed  { background: #22c55e; }
.status-badge.processing { background: #38bdf8; }
.status-badge.shipped    { background: #818cf8; }
.status-badge.delivered  { background: #84cc16; }
.status-badge.cancelled  { background: #ef4444; }

.btn-action { background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: .4rem .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .5px; cursor: pointer; font-family: inherit; transition: all .15s; margin-right: .3rem; }
.btn-action:hover { border-color: var(--blue-mid); color: var(--blue-mid); }
.btn-action.danger { color: #d33; border-color: #d33; }
.btn-action.danger:hover { background: #d33; color: #fff; }
.btn-action.primary { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }
.btn-action.primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); }
.btn-action.success { color: #16a34a; border-color: #16a34a; }
.btn-action.success:hover { background: #16a34a; color: #fff; }

/* ===== Card d'avis en attente (admin) ===== */
.review-pending {
  background: #fff;
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin-bottom: .9rem;
  box-shadow: 0 2px 14px rgba(45, 95, 122, .06);
  border: 1px solid rgba(45, 95, 122, .08);
  border-left: 4px solid var(--orange);
  transition: box-shadow .15s;
}
.review-pending:hover {
  box-shadow: 0 4px 18px rgba(45, 95, 122, .12);
}
.review-pending .review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  margin-bottom: .8rem;
  font-size: .88rem;
  color: var(--muted);
}
.review-pending .review-meta strong {
  color: var(--blue-dark);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 700;
}
.review-pending .review-meta a {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.review-pending .review-meta a:hover {
  border-bottom-color: var(--blue-dark);
}
.review-pending .rating-stars {
  font-size: 1rem;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 1px;
}
.review-pending .review-comment {
  font-style: italic;
  color: var(--text);
  background: var(--beige);
  border-left: 3px solid var(--tan-light);
  border-radius: 0 6px 6px 0;
  padding: .7rem 1rem;
  margin: .6rem 0 1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.review-pending .review-comment::before { content: '« '; color: var(--muted); font-style: normal; }
.review-pending .review-comment::after  { content: ' »'; color: var(--muted); font-style: normal; }
.review-pending .actions-row {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
}

/* === "Tous les avis du site" (admin) : filtres + badges + reponse SAV === */
.reviews-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: end;
  margin: 1rem 0 1.5rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.reviews-filters label {
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  gap: .3rem;
}
.reviews-filters select,
.reviews-filters input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .55rem;
  font-family: inherit;
  font-size: .85rem;
  background: #fff;
  color: var(--text);
  min-width: 130px;
}
.reviews-filters button { align-self: end; }

.badge-approved, .badge-pending {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: .5rem;
}
.badge-approved { background: #dcfce7; color: #166534; }
.badge-pending  { background: #fef3c7; color: #92400e; }

/* ===== Contacts reçus (admin) — classe dediee pour ne PAS collisionner avec
   .contact-card de la page contact.html (cartes centrees cliquables) ===== */
.contact-msg-card.unread { border-left: 4px solid var(--blue-mid); background: #f7fbfd; }
.contact-new-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue-mid);
  margin-right: .4rem;
  vertical-align: middle;
}
.contact-msg-card .review-meta a { color: var(--blue-mid); text-decoration: underline; }

/* ===== Badge "nombre de favoris" dans la liste produits admin ===== */
.fav-count-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: #d6336c;
  background: #fde7ef;
  border-radius: 999px;
  padding: .05rem .45rem;
  margin-left: .4rem;
  vertical-align: middle;
}

/* ===== Autocomplete produit (code promo ciblé sur un produit) ===== */
.product-ac-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 260px;
  overflow-y: auto;
  margin-top: .25rem;
}
.product-ac-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .55rem .75rem;
  cursor: pointer;
  font-size: .85rem;
  border-bottom: 1px solid #f3ece1;
}
.product-ac-item:last-child { border-bottom: none; }
.product-ac-item:hover { background: var(--beige); }
.product-ac-meta { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.product-ac-empty { padding: .6rem .75rem; color: var(--muted); font-size: .82rem; font-style: italic; }

/* ===== Badge "Déjà répondu" (contacts) ===== */
.badge-replied {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: #dcfce7;
  color: #166534;
}

/* ===== Avis mis en avant (admin + fiche produit) ===== */
.badge-featured {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: #fff4e0;
  color: #b46a12;
}
/* Carte d'avis "en avant" surlignée dans la liste admin */
.review-featured { border-left: 4px solid var(--orange); background: #fffaf2; }

/* ===== En-tête de groupe dans la liste des codes promo ===== */
.coupon-group-header {
  padding: .9rem 1rem .4rem !important;
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--beige);
}

/* ===== Bouton danger dans la modale de confirmation ===== */
.btn-primary.btn-danger { background: #dc2626; }
.btn-primary.btn-danger:hover { background: #b91c1c; }

/* ===== Lignes "Textes du site" : layout flexible + responsive ===== */
.site-text-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.site-text-row:last-child { border-bottom: none; }
.site-text-info { min-width: 0; flex: 1 1 280px; }
.site-text-actions { display: flex; gap: .4rem; flex-wrap: wrap; flex-shrink: 0; }

/* ===== Surbrillance temporaire d'un texte (bouton "Visionner") ===== */
.text-highlight-flash {
  animation: textFlash 3.4s ease;
  border-radius: 6px;
}
@keyframes textFlash {
  0%, 100% { background-color: transparent; box-shadow: none; }
  10%, 70% { background-color: rgba(245,160,64,.35); box-shadow: 0 0 0 6px rgba(245,160,64,.18); }
}

.admin-reply-block {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--beige);
  border-left: 3px solid var(--blue-mid);
  border-radius: 0 8px 8px 0;
}
.admin-reply-block.existing { background: #eef5fb; border-left-color: var(--blue-dark); }
.admin-reply-block textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .55rem .75rem;
  font-family: inherit;
  font-size: .88rem;
  resize: vertical;
  outline: none;
  margin-bottom: .6rem;
}
.admin-reply-header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .35rem;
  font-size: .82rem;
}
.admin-reply-header strong { color: var(--blue-dark); }
.admin-reply-text {
  margin: 0 0 .5rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
}

/* Affichage public (sous chaque avis sur product.html) */
.review-reply-public {
  margin-top: .6rem;
  padding: .7rem .9rem;
  background: var(--beige);
  border-left: 3px solid var(--blue-dark);
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
}
.review-reply-public-header {
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}
.review-reply-public-text { margin: 0; line-height: 1.5; color: var(--text); }

.stock-alert-subtitle { font-size: .85rem; color: var(--muted); margin-bottom: 1.2rem; margin-top: -.5rem; }
.stock-ok-msg { text-align: center; padding: 2rem; font-size: .95rem; color: #22c55e; font-weight: 600; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.05); }

.stock-cell { display: inline-block; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.stock-cell.low      { background: rgba(245,160,64,.18); color: #c46900; }
.stock-cell.critical { background: rgba(211,51,51,.15);  color: #d33; }
.stock-cell.out      { background: rgba(211,51,51,.25);  color: #d33; }

.modal-card .form-row-2 { margin-top: .8rem; }
.modal-card textarea.input { font-family: inherit; resize: vertical; min-height: 60px; }
.modal-actions { display: flex; gap: .8rem; justify-content: flex-end; margin-top: 1.5rem; }

/* Product status dots */
.status-dot { font-size: .78rem; font-weight: 600; }
.dot-active { color: #22c55e; }
.dot-draft { color: #fb923c; }

/* Image preview grid (admin product form) */
.img-preview-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.img-preview-item { position: relative; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-remove-btn { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.img-remove-btn:hover { background: #e53e3e; }

.coupon-code-cell { font-family: 'Courier New', monospace; font-weight: 700; background: var(--beige); padding: .25rem .6rem; border-radius: 4px; font-size: .85rem; }
.coupon-active { color: #22c55e; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.coupon-inactive { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }

.review-mod-card { background: #fff; border-radius: 12px; padding: 1.4rem 1.6rem; margin-bottom: 1rem; box-shadow: 0 2px 14px rgba(0,0,0,.05); border-left: 3px solid var(--tan); }
.review-mod-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .6rem; gap: 1rem; }
.review-mod-product { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 700; }
.review-mod-meta { font-size: .78rem; color: var(--muted); margin-bottom: .5rem; }
.review-mod-stars { color: #f59e0b; font-size: 1.05rem; margin-bottom: .6rem; }
.review-mod-comment { font-size: .9rem; line-height: 1.6; color: #444; margin-bottom: 1rem; font-style: italic; }
.review-mod-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.empty-row td { text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-style: italic; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .imprimes-grid, .imprimes-page-grid { grid-template-columns: repeat(2, 1fr); }
  .product-layout { grid-template-columns: 1fr; }
  .histoire-section { grid-template-columns: 1fr; }
  .panier-layout { grid-template-columns: 1fr; }
  .gallery-grid { columns: 2; }
  .categories-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr 1fr; }
  .galerie-layout { grid-template-columns: 1fr; }
  .g-sidebar { position: static; height: auto; width: auto; }
  .imprimes-layout { grid-template-columns: 1fr; }
  .p-sidebar { position: static; height: auto; width: auto; }
  .r-profile { grid-template-columns: 1fr; }
  .container-profile { padding: 2rem 1.2rem 3rem; }
  .r-admin { grid-template-columns: 1fr; }
  .admin-sidebar { flex-direction: row; overflow-x: auto; padding: .4rem; gap: .3rem; }
  .admin-sidebar .sidebar-btn { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 720px) {
  .container-page { padding: 1.5rem 1rem 3rem; }
  .heading-page-light { font-size: 1.9rem; }
  .r-kpi { grid-template-columns: 1fr 1fr; }
  .admin-table { font-size: .78rem; }
  .admin-table th, .admin-table td { padding: .6rem .5rem; }
}
@media (max-width: 600px) {
  .hero-text { left: 4rem; }
  .hero-text h1 { font-size: 2.5rem; }
  .hero-quote { font-size: 1.25rem; }
  .hero-quote em { font-size: 1.55rem; }
  .selection-grid { grid-template-columns: repeat(2, 1fr); }
  .imprimes-page-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { columns: 1; }
  .footer-top { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr 1fr; }
  .related-card { flex: 0 0 calc(50% - .6rem); }
  .modal-added-body { grid-template-columns: 1fr; }
  .cart-sidebar { width: 95vw; }
  .main-nav { padding: 0 1rem; gap: 1rem; }
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .auth-box { padding: 1.8rem 1.4rem; }
  .heading-page-center { font-size: 1.9rem; }
  .heading-page { font-size: 2rem; }
  .rgpd-actions { flex-direction: column; }
  .rgpd-actions button { width: 100%; }
}
@media (max-width: 480px) {
  .r-kpi { grid-template-columns: 1fr; }
}



/* ============================================================
   IMPRIMÉS — grilles spécifiques (marques-pages + posters)
   ============================================================ */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mp-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.mp-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.mp-card-img { position: relative; overflow: hidden; }
.mp-card-img img { width: 100%; aspect-ratio: 1/2.6; object-fit: cover; display: block; }
.mp-info { padding: .65rem .75rem .75rem; }
.mp-type { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .15rem; }
.mp-name { font-size: .82rem; font-weight: 600; margin-bottom: .12rem; }
.mp-specs { font-size: .65rem; color: var(--muted); margin-bottom: .5rem; }
.mp-footer { display: flex; justify-content: space-between; align-items: center; }
.mp-price { font-size: .95rem; font-weight: 700; }

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.poster-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.poster-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.poster-card-img { position: relative; overflow: hidden; }
.poster-card-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.poster-info { padding: .85rem 1rem 1rem; }
.poster-type { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .2rem; }
.poster-name { font-size: .95rem; font-weight: 600; margin-bottom: .15rem; }
.poster-specs { font-size: .72rem; color: var(--muted); margin-bottom: .65rem; }
.poster-footer { display: flex; justify-content: space-between; align-items: center; }
.poster-price { font-size: 1.05rem; font-weight: 700; }

/* Badges + boutons d'ajout rapide imprimés */
.badge-print {
  position: absolute; top: .5rem; left: .5rem;
  background: rgba(196,149,106,.9); color: #fff;
  font-size: .55rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: .22rem .55rem;
  border-radius: 999px;
}
.mp-quick-add, .poster-quick-add {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--blue-dark); color: #fff;
  border: none; padding: .55rem;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  cursor: pointer; opacity: 0; transition: opacity .2s;
  font-family: inherit;
}
.mp-card:hover .mp-quick-add,
.poster-card:hover .poster-quick-add { opacity: 1; }

/* Responsive imprimés */
@media (max-width: 900px) {
  .mp-grid     { grid-template-columns: repeat(3, 1fr); }
  .poster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mp-grid     { grid-template-columns: repeat(2, 1fr); }
  .poster-grid { grid-template-columns: 1fr; }
}

.canvas-container canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  background-color: #eee;
}



/* --- NOUVELLE MODALE PRODUIT --- */
.product-modal-card {
  max-width: 950px !important; /* Modale plus large */
  width: 95%;
  max-height: 85vh; /* Ne prend pas tout l'écran */
  overflow-y: auto;
  padding: 2.5rem;
  border-radius: 16px;
}

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.5rem;
}

.btn-close { background: none; border: none; font-size: 2.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.btn-close:hover { color: #d33; }

/* Zone Upload Image */
.image-upload-section {
  background: rgba(45,95,122,.03); border: 1px dashed var(--blue-mid);
  border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;
}

.image-preview-grid {
  display: flex; gap: 15px; overflow-x: auto;
  padding-bottom: 10px; margin-bottom: 1.5rem;
  justify-content: center; min-height: 120px;
}

.img-preview-item { position: relative; }
.img-preview-item img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 8px; border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.img-remove-btn {
  position: absolute; top: -8px; right: -8px; background: #d33; color: white;
  border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 1rem; line-height: 1;
}

/* Grille 2 colonnes */
.product-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.form-column { display: flex; flex-direction: column; gap: 0.5rem; }

/* Actions centrées */
.modal-actions-centered {
  display: flex; justify-content: center; align-items: center; gap: 1.5rem;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);
}
.modal-actions-centered button { padding: 0.9rem 2.5rem; font-size: 1rem; border-radius: 999px; }

@media (max-width: 768px) {
  .product-form-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-modal-card { padding: 1.5rem; }
  .modal-actions-centered { flex-direction: column; width: 100%; }
  .modal-actions-centered button { width: 100%; }
}



/* --- FICHE PRODUIT LARGE 80% --- */
.product-modal-card-large {
  width: 80% !important;
  max-width: 1400px;
  height: 90vh;
  padding: 30px;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.product-layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 40px;
  margin-top: 20px;
  flex-grow: 1;
  overflow-y: auto; /* Permet de scroller si le contenu est long */
  padding-right: 10px;
}

/* Côté Gauche */
.product-details-side {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Côté Droit (Images) */
.product-images-side {
  display: flex;
  flex-direction: column;
  background: #fcfcfc;
  border-radius: 15px;
  padding: 20px;
  border: 1px solid #eee;
}

.large-previews-container {
  display: grid;
  grid-template-columns: 1fr; /* Une seule colonne pour de très grandes images */
  gap: 20px;
  margin-bottom: 20px;
}

.img-preview-item {
  position: relative;
  width: 100%;
}

.img-preview-item img {
  width: 100%;
  height: auto; /* Garde le ratio original */
  max-height: 500px; /* Limite la hauteur pour ne pas être infini */
  object-fit: contain;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.image-actions-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Boutons footer */
.modal-actions-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 25px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

.modal-actions-footer button {
  min-width: 250px;
  padding: 15px;
  font-size: 1.1rem;
}

@media (max-width: 1100px) {
  .product-modal-card-large { width: 95% !important; }
  .product-layout-split { grid-template-columns: 1fr; }
}

/* --- CONFIGURATION MODALE 80% --- */
.product-modal-card-large {
  width: 80% !important;
  max-width: 1500px;
  height: 92vh;
  background: white;
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.product-layout-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* Gauche un peu plus étroite que la droite */
  gap: 50px;
  margin-top: 20px;
  flex-grow: 1;
  overflow-y: auto; /* Scroll si le contenu dépasse */
  padding-right: 15px;
}

/* Colonnes */
.product-side-left, .product-side-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Zone Galerie à Droite */
.image-gallery-area {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.large-previews-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 15px 0;
}

.img-preview-item {
  width: 100%;
  position: relative;
}

.img-preview-item img {
  width: 100%;
  height: auto;
  max-height: 600px; /* Images vraiment grandes */
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #f9f9f9;
}

.image-actions-row {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* Footer avec boutons centrés */
.modal-actions-footer {
  display: flex;
  justify-content: center;
  gap: 25px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

.modal-actions-footer button {
  min-width: 280px;
  padding: 16px;
  font-size: 1.1rem;
  border-radius: 50px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) {
  .product-modal-card-large { width: 95% !important; }
  .product-layout-split { grid-template-columns: 1fr; }
}


/* =========================================================
   FICHE PRODUIT (MODALE) - DESIGN INTUITIF & LARGE
   ========================================================= */

/* 1. Le conteneur principal (80% de l'écran) */
.product-modal-card-large {
  width: 80% !important;
  max-width: 1400px;
  height: 90vh; /* Prend 90% de la hauteur de l'écran */
  background: #ffffff;
  border-radius: 20px;
  padding: 0; /* Le padding est géré dans les sous-sections pour un beau scroll */
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* 2. L'en-tête (Fixe en haut) */
.product-modal-card-large .modal-header {
  padding: 25px 40px;
  background: #f8fafc; /* Fond très légèrement grisé */
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-modal-card-large .modal-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--blue-dark);
  margin: 0;
}

/* 3. Le corps de la fiche (qui défile/scroll) */
.product-layout-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* La partie droite (Images) est un peu plus large */
  gap: 50px;
  padding: 40px;
  flex-grow: 1;
  overflow-y: auto;
}

.product-side-left, .product-side-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Titres des sous-sections */
.product-layout-split .section-title-sm {
  font-size: 1.3rem;
  color: var(--blue-dark);
  border-bottom: 3px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================================
   MISE EN ÉVIDENCE : CASES À COCHER
   ========================================================= */
/* On transforme les simples cases à cocher en gros blocs cliquables */
.product-side-right .form-check {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f0fdf4; /* Fond vert pastel */
  border: 2px solid #bbf7d0;
  padding: 15px 25px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  color: #166534;
  font-size: 1.1rem;
  flex: 1;
  justify-content: center;
  transition: all 0.2s ease;
}

/* On grossit la case elle-même */
.product-side-right .form-check input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--orange);
  cursor: pointer;
}

.product-side-right .form-check:hover {
  background: #dcfce7;
  transform: translateY(-2px);
}

/* =========================================================
   MISE EN ÉVIDENCE : GALERIE D'IMAGES
   ========================================================= */
.image-gallery-area {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 30px;
  margin-top: 15px;
}

.image-gallery-area .form-label {
  text-align: center;
  font-size: 1.4rem;
  color: var(--blue-dark);
  margin-bottom: 25px;
  display: block;
}

/* Conteneur des images : une seule grande image par ligne */
.large-previews-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}

/* L'image affichée comme un vrai tableau */
.img-preview-item {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: white;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
}

.img-preview-item img {
  width: 100%;
  max-height: 500px; /* Très grande hauteur pour bien voir les détails */
  object-fit: contain; /* Permet de voir l'image entière sans la couper */
  display: block;
  border-radius: 8px;
}

/* Bouton pour supprimer l'image (Énorme point rouge) */
.img-remove-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
  transition: transform 0.2s;
}
.img-remove-btn:hover {
  transform: scale(1.15);
  background: #dc2626;
}

/* Gros boutons d'ajout d'image */
.image-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.image-actions-row .btn-blue-outline {
  padding: 20px;
  font-size: 1.1rem;
  border-width: 2px;
  font-weight: bold;
}

/* =========================================================
   FICHE PRODUIT (MODALE) - DESIGN INTUITIF & LARGE
   ========================================================= */

/* 1. Le conteneur principal (80% de l'écran) */
.product-modal-card-large {
  width: 80% !important;
  max-width: 1400px;
  height: 90vh; /* Prend 90% de la hauteur de l'écran */
  background: #ffffff;
  border-radius: 20px;
  padding: 0; /* Le padding est géré dans les sous-sections pour un beau scroll */
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* 2. L'en-tête (Fixe en haut) */
.product-modal-card-large .modal-header {
  padding: 25px 40px;
  background: #f8fafc; /* Fond très légèrement grisé */
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-modal-card-large .modal-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--blue-dark);
  margin: 0;
}

/* 3. Le corps de la fiche (qui défile/scroll) */
.product-layout-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* La partie droite (Images) est un peu plus large */
  gap: 50px;
  padding: 40px;
  flex-grow: 1;
  overflow-y: auto;
}

.product-side-left, .product-side-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Titres des sous-sections */
.product-layout-split .section-title-sm {
  font-size: 1.3rem;
  color: var(--blue-dark);
  border-bottom: 3px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================================
   MISE EN ÉVIDENCE : CASES À COCHER
   ========================================================= */
/* On transforme les simples cases à cocher en gros blocs cliquables */
.product-side-right .form-check {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f0fdf4; /* Fond vert pastel */
  border: 2px solid #bbf7d0;
  padding: 15px 25px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  color: #166534;
  font-size: 1.1rem;
  flex: 1;
  justify-content: center;
  transition: all 0.2s ease;
}

/* On grossit la case elle-même */
.product-side-right .form-check input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--orange);
  cursor: pointer;
}

.product-side-right .form-check:hover {
  background: #dcfce7;
  transform: translateY(-2px);
}

/* =========================================================
   MISE EN ÉVIDENCE : GALERIE D'IMAGES
   ========================================================= */
.image-gallery-area {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 30px;
  margin-top: 15px;
}

.image-gallery-area .form-label {
  text-align: center;
  font-size: 1.4rem;
  color: var(--blue-dark);
  margin-bottom: 25px;
  display: block;
}

/* Conteneur des images : une seule grande image par ligne */
.large-previews-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}

/* L'image affichée comme un vrai tableau */
.img-preview-item {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: white;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
}

.img-preview-item img {
  width: 100%;
  max-height: 500px; /* Très grande hauteur pour bien voir les détails */
  object-fit: contain; /* Permet de voir l'image entière sans la couper */
  display: block;
  border-radius: 8px;
}

/* Bouton pour supprimer l'image (Énorme point rouge) */
.img-remove-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
  transition: transform 0.2s;
}
.img-remove-btn:hover {
  transform: scale(1.15);
  background: #dc2626;
}

/* Gros boutons d'ajout d'image */
.image-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.image-actions-row .btn-blue-outline {
  padding: 20px;
  font-size: 1.1rem;
  border-width: 2px;
  font-weight: bold;
}

/* =========================================================
   BOUTONS DE VALIDATION (Fixes en bas)
   ========================================================= */
.modal-actions-footer {
  padding: 25px 40px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
  gap: 30px;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.02);
  margin: 0;
}

.modal-actions-footer button {
  min-width: 250px;
  padding: 20px 40px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s;
  cursor: pointer;
}

#product-modal-draft {
  background: #f1f5f9;
  color: #475569;
  border: 2px solid #cbd5e1;
}
#product-modal-draft:hover {
  background: #e2e8f0;
  color: #1e293b;
}

#product-modal-save {
  background: var(--orange);
  color: white;
  border: none;
  box-shadow: 0 10px 25px rgba(232, 93, 43, 0.35);
}
#product-modal-save:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(232, 93, 43, 0.45);
}

/* Responsive pour les petits écrans */
@media (max-width: 1100px) {
  .product-modal-card-large { width: 95% !important; }
  .product-layout-split { grid-template-columns: 1fr; gap: 40px; }
  .image-actions-row { grid-template-columns: 1fr; }
}




/* ============================================================
   ADMIN — Modal édition produit (design amélioré)
   ============================================================ */

/* Modal large */
.product-modal-card-large {
  max-width: 1100px;
  width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
}

/* Header sticky */
.modal-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0;
}
.btn-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 .5rem;
  transition: color .15s;
}
.btn-close:hover { color: var(--text); }

#product-form,
#event-form { padding: 1.5rem 1.8rem; }

/* Eyebrow de section */
.pm-section-eyebrow {
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-mid);
  margin-bottom: 1rem;
}

/* ===== Ligne 1 : carrousel + infos ===== */
.pm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Galerie */
.pm-gallery {
  background: var(--beige);
  border-radius: 12px;
  padding: 1.4rem;
  border: 1px solid var(--border);
}

.pm-main-preview {
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 10px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
}
.pm-main-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.pm-main-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: .88rem;
  padding: 1.5rem;
}

/* Conteneur miniatures (id="p-images-preview" géré par admin.js) */
.large-previews-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
  margin-bottom: 1rem;
}
.large-previews-container:empty { display: none; }

.img-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, transform .15s;
}
.img-preview-item:hover { transform: translateY(-2px); }
.img-preview-item.active { border-color: var(--blue-mid); }
.img-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: none;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.img-preview-item:hover .img-remove-btn { opacity: 1; }
.img-remove-btn:hover { background: #d33; }

/* Boutons d'action images */
.image-actions-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.btn-add-photo,
.btn-staging-link {
  flex: 1;
  background: #fff;
  border: 1.5px dashed var(--blue-mid);
  color: var(--blue-mid);
  padding: .7rem 1rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: inherit;
  transition: all .15s;
}
.btn-add-photo:hover,
.btn-staging-link:hover {
  background: var(--blue-mid);
  color: #fff;
  border-style: solid;
}
.btn-icon { font-size: 1.1rem; line-height: 1; }

/* Infos basiques */
.pm-basics { display: flex; flex-direction: column; gap: 1rem; }
.input-lg { font-size: 1rem !important; padding: .75rem .9rem !important; }

/* ===== Détails techniques ===== */
.pm-details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}

/* ===== Options de publication ===== */
.pm-options {
  background: rgba(245,160,64,.08);
  border: 1px solid rgba(245,160,64,.25);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}
.pm-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.toggle-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.toggle-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-card-inner {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all .2s;
}
.toggle-card:hover .toggle-card-inner { border-color: var(--blue-mid); }
.toggle-card input:checked ~ .toggle-card-inner {
  border-color: var(--orange);
  background: rgba(245,160,64,.08);
  box-shadow: 0 0 0 3px rgba(245,160,64,.15);
}
.toggle-card-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--beige);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-card input:checked ~ .toggle-card-inner .toggle-card-icon {
  background: var(--orange);
}
.toggle-card-text { flex: 1; }
.toggle-card-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: .15rem;
}
.toggle-card-desc {
  font-size: .78rem;
  color: var(--muted);
}

/* ===== Footer actions ===== */
.pm-actions {
  display: flex;
  justify-content: flex-end;
  gap: .8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: .8rem 1.5rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

.btn-draft {
  background: #fff;
  border: 1.5px solid var(--blue-mid);
  color: var(--blue-mid);
  border-radius: 8px;
  padding: .8rem 1.5rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .15s;
}
.btn-draft:hover { background: var(--blue-mid); color: #fff; }

.btn-publish {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .8rem 1.8rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 2px 8px rgba(245,160,64,.3);
  transition: all .15s;
}
.btn-publish:hover {
  background: var(--orange-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,160,64,.4);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .pm-row { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
  .pm-toggles { grid-template-columns: 1fr; }
  .pm-actions { flex-direction: column-reverse; }
  .pm-actions button { width: 100%; justify-content: center; }
  .large-previews-container { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .modal-header { padding: 1rem 1.2rem; }
  #product-form,
  #event-form { padding: 1rem 1.2rem; }
  .pm-gallery, .pm-details, .pm-options { padding: 1rem; }
  .large-previews-container { grid-template-columns: repeat(2, 1fr); }
}



.g-count, .p-count {
  color: var(--muted);
  font-size: .72rem;
  margin-left: .2rem;
}
.g-check, .p-check { font-size: .85rem; padding: .15rem 0; }
.g-check span, .p-check span { line-height: 1.3; }


.g-subgroup-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin: .8rem 0 .4rem;
}
.g-subgroup-title:first-of-type { margin-top: 0; }

.g-subgroup { transition: opacity .2s; }


/* === Drag & drop des miniatures admin === */
.img-preview-item {
  cursor: grab;
  user-select: none;
}
.img-preview-item:active { cursor: grabbing; }

.img-preview-item.dragging {
  opacity: .4;
  transform: scale(.95);
}

.img-preview-item.drag-over {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Désactive le drag depuis l'image elle-même (sinon Firefox prend l'image
   plutôt que l'élément) — la poignée reste la miniature entière */
.img-preview-item img {
  pointer-events: none;
}


/* ============================================================
   ADMIN — Groupes de champs (Détails de l'œuvre)
   ============================================================ */
.details-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.form-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  background: rgba(45, 95, 122, 0.02); /* Fond subtil basé sur --blue-dark */
  margin: 0;
}

.form-section legend {
  font-weight: 700;
  color: var(--blue-dark);
  background-color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Évite les doubles marges dans les blocs */
.form-section .form-row-2,
.form-section .form-row-3 {
  margin-bottom: 0;
}


/* ============================================================
   ADMIN — Tags Multi-sélection
   ============================================================ */
.tags-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.tags-area:empty {
  margin-top: 0;
}
.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blue-dark);
  color: #fff;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(45, 95, 122, 0.2);
}
.tag-remove {
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.15s, transform 0.15s;
}
.tag-remove:hover {
  color: #ef4444; /* Rouge pour la suppression */
  transform: scale(1.15);
}

.custom-items-list { line-height: 1.4; }
.custom-items-list button.custom-item-remove:hover { color: #800; }


/* ============================================================
   ADMIN — Menus déroulants sur-mesure (avec croix de suppression)
   ============================================================ */
.fani-dropdown {
  position: relative;
  width: 100%;
}
.fani-dropdown-display {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}
.fani-dropdown-display:after {
  content: '▼';
  font-size: 0.7rem;
}
.fani-dropdown.open .fani-dropdown-display {
  border-color: var(--blue-mid);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fani-dropdown.open .fani-dropdown-display:after {
  content: '▲';
}
.fani-dropdown-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--blue-mid);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.fani-dropdown.open .fani-dropdown-list {
  display: block;
}
.fani-dropdown-item {
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.fani-dropdown-item:hover {
  background: var(--beige);
}
.fani-dropdown-del {
  color: #ef4444; /* Rouge */
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.5rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
}
.fani-dropdown-del:hover {
  opacity: 1;
  transform: scale(1.2);
}
.fani-dropdown-empty {
  padding: 0.8rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ============================================================
   Pages LEGALES (cgu / cgv / mentions / politique / faq / contact / retours)
   ============================================================ */
.container-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  color: var(--text);
  line-height: 1.65;
  background: transparent;
}
.legal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 .5rem;
  letter-spacing: -.5px;
}
.legal-updated {
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.legal-updated a { color: var(--blue-mid); }

.legal-section {
  margin-bottom: 2rem;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.05);
}
.legal-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 .8rem;
}
.legal-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-mid);
  margin: 1.2rem 0 .5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.legal-section p {
  margin: .6rem 0;
  font-size: .94rem;
}
.legal-section ul,
.legal-section ol {
  padding-left: 1.4rem;
  margin: .6rem 0;
}
.legal-section li {
  margin-bottom: .35rem;
  font-size: .92rem;
}
.legal-section a {
  color: var(--blue-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-section a:hover { color: var(--blue-dark); }
.legal-section strong { color: var(--blue-dark); }

/* ===== FAQ (utilise .container-legal en wrapper) ===== */
.faq-section { margin-top: 2rem; }
.faq-category {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 2rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--blue-mid);
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  margin-bottom: .8rem;
  overflow: hidden;
  transition: box-shadow .15s;
}
.faq-item[open] { box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.faq-item summary {
  padding: 1rem 1.4rem;
  font-weight: 700;
  color: var(--blue-dark);
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: .95rem;
  transition: background .15s;
}
.faq-item summary:hover { background: var(--beige); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue-mid);
  transition: transform .2s;
  line-height: 1;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 1.4rem 1.1rem;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.6;
}
.faq-item ul {
  margin: .3rem 0;
  padding: 0 1.4rem 1rem 2.6rem;
  font-size: .9rem;
}

/* ===== Contact page ===== */
.contact-hero {
  background: var(--beige);
  padding: 3.5rem 1.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.contact-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 .6rem;
}
.contact-hero p {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.contact-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.contact-card {
  background: #fff;
  padding: 2rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.contact-card-icon {
  width: 48px; height: 48px;
  margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(45,95,122,.08);
  color: var(--blue-mid);
}
.contact-card-icon svg { width: 24px; height: 24px; }
.contact-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 .4rem;
}
.contact-card p {
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
}
.contact-card .contact-value {
  display: block;
  margin-top: .6rem;
  font-weight: 700;
  color: var(--blue-mid);
  /* Les emails longs (stephanie.coradossi@gmail.com) debordaient de la carte :
     on autorise la coupure pour qu'ils restent dans le cadre. */
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: .92rem;
}

/* Admin : indicateurs places coups de coeur */
.feat-slots-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  padding: .6rem .9rem;
  background: #fff8ec;
  border: 1px dashed #f0d49a;
  border-radius: 10px;
  font-size: .82rem;
}
.feat-slots-title { color: var(--blue-dark); font-weight: 600; letter-spacing: .02em; }
.feat-slots-item { display: inline-flex; align-items: center; gap: .35rem; }
.feat-slots-sep  { color: var(--muted); }

/* ============================================================
   HOME : galerie enrichie (memes cards que /galerie.html)
   ============================================================ */
.home-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem;
}
.home-gallery-grid .painting-card { margin-bottom: 0; }
/* On force le conteneur d'images en carre : toutes les cards ont la meme
   taille, quelle que soit l'aspect-ratio de l'image source. */
.home-gallery-grid .card-img-stack {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}
.home-gallery-grid .card-img-stack img,
.home-gallery-grid .painting-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .home-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
}

/* HOME : imprimes en 2 lignes de 4 (8 places coup de coeur max) */
.home-imprimes-grid-2x4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.2rem !important;
}
@media (max-width: 960px) { .home-imprimes-grid-2x4 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 720px) { .home-imprimes-grid-2x4 { grid-template-columns: repeat(2, 1fr) !important; } }

/* ============================================================
   HOME : section temoignages clients (carrousel auto)
   ============================================================ */
.testimonials-section {
  background: var(--beige);
  padding: 4rem 2rem 4.5rem;
}
.testimonials-section .container { max-width: 1100px; margin: 0 auto; }
.testimonials-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  color: var(--blue-dark);
  margin: .4rem 0 2rem;
  text-align: left;
}
/* "Ils nous font confiance" : aligne a gauche, au-dessus du titre */
.testimonials-section .section-eyebrow { text-align: left; }
.testimonials-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.testimonials-track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1;
  padding: .3rem 0 1.2rem;
  scrollbar-width: none;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 calc((100% - 2.4rem) / 3);
  min-width: 260px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 14px rgba(45, 95, 122, .06);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.testimonial-stars { font-size: 1.05rem; letter-spacing: 2px; }
.testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  /* Coupe au-dela de 5 lignes pour des cards de taille homogene */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial-author {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.testimonial-name { font-weight: 700; color: var(--blue-dark); }
.testimonial-product { color: var(--muted); }
.testimonials-arrow {
  background: #fff;
  border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--blue-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  line-height: 1;
}
.testimonials-arrow:hover { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .8rem;
}
.testimonials-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
  padding: 0;
}
.testimonials-dot.active {
  background: var(--blue-dark);
  transform: scale(1.3);
}
@media (max-width: 720px) {
  .testimonial-card { flex: 0 0 85%; }
}

/* ============================================================
   RESPONSIVE GLOBAL — 1024 / 768 / 480 (consolide, fin de fichier)
   Place en dernier : ces regles l'emportent aux 3 breakpoints
   demandes, tout en conservant les regles intermediaires existantes.
   ============================================================ */

/* ---------- <= 1024px : tablettes paysage ---------- */
@media (max-width: 1024px) {
  .product-page, .panier-page, .gallery-categories, .gallery-tableaux, .imprimes-page,
  .ev-comments, .ev-cta, .favoris-page { padding-left: 1.6rem; padding-right: 1.6rem; }
  .product-layout { gap: 2rem; }
  .panier-layout { grid-template-columns: 1fr 300px; gap: 1.6rem; }
  .footer-top { grid-template-columns: 170px 1fr 1fr 1fr; gap: 1.4rem; }
  .r-admin { grid-template-columns: 220px 1fr; gap: 1.4rem; }
  .r-profile { grid-template-columns: 240px 1fr; gap: 1.4rem; }
  .product-name { font-size: 2.3rem; }
}

/* ---------- <= 768px : tablettes portrait / grands mobiles ---------- */
@media (max-width: 768px) {
  /* Mises en page 2 colonnes -> 1 colonne */
  .product-layout, .panier-layout, .histoire-section,
  .galerie-layout, .imprimes-layout, .r-profile, .r-admin,
  .ev-share-wrap { grid-template-columns: 1fr !important; gap: 1.5rem; }

  /* Galerie photos produit : image au-dessus, miniatures en ligne dessous */
  .product-gallery { flex-direction: column-reverse; }
  .product-thumbnails { flex-direction: row; overflow-x: auto; }
  .product-thumbnails img { width: 56px; height: 56px; flex: 0 0 auto; }
  .product-main-img { max-height: 60vh; }

  /* Sidebars filtres galerie/imprimes : non sticky, pleine largeur */
  .g-sidebar, .p-sidebar { position: static; height: auto; width: auto; border-right: none; }

  /* Recap panier sous les articles (plus de sticky) */
  .panier-recap { position: static; top: auto; }

  /* ===== Navbar mobile : burger gauche, logo centre, tiroir lateral ===== */
  #main-nav { position: relative; }
  .main-nav { padding: 0 .9rem; gap: .4rem; justify-content: space-between; }
  .nav-burger { display: flex; order: -1; }            /* burger a gauche */
  .nav-mobile-only { display: block; }
  .nav-item-dropdown { display: none; }                /* le survol-dropdown n'a pas de sens en tiroir */

  /* Grilles produits / events / contact -> 2 colonnes */
  .selection-grid, .imprimes-grid, .imprimes-page-grid,
  .events-grid, .contact-grid, .details-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .gallery-grid { columns: 2; }

  /* Formulaires : champs empiles */
  .form-row, .form-row-2 { grid-template-columns: 1fr; }
  /* Inscription : prenom/nom empiles, alignes comme les autres champs
     (full width + meme retrait que les champs avec icone). */
  .auth-field-row { flex-direction: column; gap: 0; align-items: stretch; }
  .auth-field-row .auth-field-group { margin-bottom: .65rem !important; }
  .auth-field-row .auth-field-no-icon { padding-left: calc(18px + .7rem); }

  /* Admin : sidebar en barre horizontale scrollable + tableaux qui scrollent
     horizontalement plutot que de deborder de l'ecran */
  .r-admin .card { overflow-x: auto; }
  .admin-sidebar { flex-direction: row; overflow-x: auto; padding: .4rem; gap: .3rem; }
  .admin-sidebar .sidebar-btn { flex-shrink: 0; white-space: nowrap; }
  .admin-table { font-size: .8rem; }

  /* Hero : texte pleine largeur */
  .hero-text { left: 1.5rem; right: 1.5rem; max-width: none; }

  /* Carrousels suggestions : 2 cartes visibles */
  .related-card { flex: 0 0 calc(50% - .6rem); }
}

/* ---------- <= 480px : mobiles ---------- */
@media (max-width: 480px) {
  /* Paddings reduits */
  .product-page, .panier-page, .gallery-categories, .gallery-tableaux, .imprimes-page,
  .favoris-page, .ev-comments, .ev-cta,
  .container-profile, .container-page { padding-left: 1rem; padding-right: 1rem; }

  /* Navbar tres compacte */
  .main-nav { padding: 0 .7rem; gap: .4rem; }
  .nav-logo { font-size: 1.65rem; }
  .nav-links { gap: .6rem; }
  .nav-links a, .nav-link-trigger { font-size: .78rem; }

  /* Tout en 1-2 colonnes */
  .selection-grid, .imprimes-grid, .imprimes-page-grid,
  .events-grid, .contact-grid, .details-grid,
  .footer-top, .trust-band { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .favoris-grid, #wishlist-grid.favoris-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .related-card { flex: 0 0 calc(50% - .5rem); }

  /* Typo plus petite */
  .product-name { font-size: 2rem; }
  .hero-text h1 { font-size: 2.4rem; }
  .hero-quote { font-size: 1.6rem; }
  .hero-quote em { font-size: 2rem; }
  .heading-page, .heading-page-center, .heading-page-light { font-size: 1.7rem; }

  /* Actions empilees + sidebar panier plein ecran */
  .rgpd-actions { flex-direction: column; }
  .rgpd-actions button { width: 100%; }
  .cart-sidebar { width: 100vw; max-width: 100vw; }

  /* Banderole promo : texte plus grand sur mobile + marges pour respirer.
     On laisse le bandeau grandir si le texte wrap (min-height suffit pour 2 lignes
     a .92rem * 1.35 line-height ≈ 50px). */
  .promo-banner { font-size: .92rem; min-height: 44px; padding: .35rem 0; }
  .promo-rotator { min-height: 2.7em; }
  .promo-slide { padding: 0 3rem 0 1rem; line-height: 1.35; white-space: normal; }
}

/* ============================================================
   SYSTEME RESPONSIVE — completion pro (grands ecrans + tres petits)
   Plage couverte : 320 / 480 / 768 / 1024 (deja geres plus haut)
   + 1440 / 1920 / 2560+ (ci-dessous) + 360 (tres petits mobiles).
   Objectif : aucun debordement, mise en page coherente et elegante
   de 320px a 2560px+, cartes jamais geantes, contenu centre sur
   ultra-wide. Tout en rem -> suit la taille de base fluide.
   ============================================================ */

/* ---------- Grand desktop / ultra-wide : on CENTRE et borne le contenu
   pour eviter des cartes geantes et des lignes de texte trop longues ---------- */
@media (min-width: 1920px) {
  .product-layout, .panier-layout, .r-profile, .r-admin,
  .galerie-layout, .imprimes-layout,
  .home-gallery-grid, .home-imprimes-grid-2x4,
  .events-grid, .selection-grid, .details-grid,
  .related-carousel-wrap, .ev-comments-inner {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Plus d'air sur les sections pleine largeur */
  .product-page, .panier-page, .gallery-categories, .gallery-tableaux, .imprimes-page,
  .favoris-page, .ev-comments, .ev-cta {
    padding-left: clamp(2rem, 6vw, 8rem);
    padding-right: clamp(2rem, 6vw, 8rem);
  }
  /* Grilles fixes a 3 colonnes -> 4 sur tres grand ecran (cartes raisonnables) */
  .home-gallery-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .events-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { columns: 4; }

  /* Grand ecran : on exploite plus de largeur pour ces 3 mises en page (sans
     aller jusqu'aux bords). Le panneau de FILTRES (colonne gauche) s'elargit
     vers la gauche, et le RECAP panier (colonne droite) vers la droite. */
  .galerie-layout, .imprimes-layout, .panier-layout { max-width: 1800px; }
  .galerie-layout, .imprimes-layout { grid-template-columns: clamp(300px, 20vw, 400px) 1fr; }
  .panier-layout { grid-template-columns: 1fr clamp(360px, 24vw, 440px); }
}

@media (min-width: 2560px) {
  .container { max-width: 1500px; }
  .product-layout, .panier-layout, .r-profile, .r-admin,
  .galerie-layout, .imprimes-layout,
  .home-gallery-grid, .home-imprimes-grid-2x4,
  .events-grid, .selection-grid, .related-carousel-wrap, .ev-comments-inner {
    max-width: 1900px;
  }
  .home-imprimes-grid-2x4 { grid-template-columns: repeat(5, 1fr) !important; }
  .gallery-grid { columns: 4; }

  /* Tres grand ecran (2560+) : filtres et recap encore un peu plus larges. */
  .galerie-layout, .imprimes-layout, .panier-layout { max-width: 2200px; }
  .galerie-layout, .imprimes-layout { grid-template-columns: 420px 1fr; }
  .panier-layout { grid-template-columns: 1fr 480px; }
}

/* ---------- Tres petits mobiles (<=360px) : compaction supplementaire ---------- */
@media (max-width: 360px) {
  .main-nav { padding: 0 .5rem; }
  .nav-logo { font-size: 1.5rem; }
  .nav-icon-btn { width: 32px; height: 32px; }
  /* Grilles produits/events/contact -> 1 colonne nette */
  .selection-grid, .imprimes-grid, .imprimes-page-grid,
  .events-grid, .contact-grid, .details-grid,
  .home-gallery-grid, .home-imprimes-grid-2x4,
  .mp-grid, .poster-grid { grid-template-columns: 1fr !important; }
  .favoris-grid, #wishlist-grid.favoris-grid { grid-template-columns: 1fr !important; }
  .related-card { flex: 0 0 calc(85% - .5rem); }   /* 1 carte visible, on devine la suivante */
  .hero-text h1 { font-size: 2rem; }
  .hero-quote { font-size: 1.35rem; }
  .hero-quote em { font-size: 1.7rem; }
  .product-name { font-size: 1.7rem; }
}

/* ---------- Confort tactile : cibles cliquables >= 40px sur ecrans tactiles ---------- */
@media (hover: none) and (pointer: coarse) {
  .nav-icon-btn, .btn-fav, .img-zoom-btn, .lightbox-nav, .lightbox-close,
  .promo-banner-close { min-width: 40px; min-height: 40px; }
}

/* ============================================================
   REFONTE UX MOBILE (<=768) — placee en DERNIER pour primer.
   Hero centre + plus court, histoire compacte, trust 1 ligne,
   carrousels sans fleches (cartes qui depassent = "peek"),
   produits en 2 colonnes, filtres repliables, moins d'espaces.
   ============================================================ */
@media (max-width: 768px) {
  /* --- Navbar : masquable au scroll (gere en JS via .nav-hidden) --- */
  #navbar { transition: transform .3s ease; }
  #navbar.nav-hidden { transform: translateY(-130%); }

  /* --- Hero : moins haut (moins de scroll) + texte centre --- */
  #hero-outer { height: 88vh; }
  .hero { height: 72vh; min-height: 340px; }
  .hero-text {
    left: 0; right: 0; padding: 0 1.4rem; width: 100%;
    text-align: center;
  }
  .hero-social { display: none; }   /* icones sociales du hero : on allege */

  /* --- Section histoire : compacte --- */
  .histoire-left-inner { padding: 2.2rem 1.4rem; }
  .histoire-title { font-size: 2.2rem; margin-bottom: 1rem; }
  .histoire-text { font-size: .95rem; line-height: 1.55; margin-bottom: 1.2rem; }
  .histoire-image { min-height: 200px; max-height: 46vh; }
  .histoire-stats { gap: 2rem; padding: 1rem; }

  /* --- Trust band : tient sur UNE ligne, compacte --- */
  .trust-band { grid-template-columns: repeat(3, 1fr) !important; }
  .trust-item { padding: .7rem .35rem; gap: .25rem; }
  .trust-icon { width: 24px; height: 24px; margin-bottom: 0; }
  .trust-label { font-size: .6rem; line-height: 1.15; }
  .trust-item:not(:last-child) { border-right-width: 1px; }

  /* --- Galerie / imprimes : moins d'espace sur les bords --- */
  .galerie-layout, .imprimes-layout { gap: .6rem; }
  .gallery-grid { padding-left: .6rem; padding-right: .6rem; column-gap: .6rem; columns: 2; }

  /* --- Produits en 2 COLONNES partout --- */
  .selection-grid, .imprimes-grid, .imprimes-page-grid, .events-grid,
  .mp-grid, .poster-grid,
  .home-gallery-grid, .home-imprimes-grid-2x4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .7rem !important;
  }

  /* --- Carrousels : plus de fleches ; grandes cartes qui depassent (peek) --- */
  .carousel-btn, .categories-arrow { display: none !important; }
  .related-carousel-wrap { padding: 0 !important; }
  .related-carousel {
    padding: .2rem 1rem 1rem; gap: .9rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .related-card { flex: 0 0 76% !important; scroll-snap-align: center; }
  .categories-track,
  .categories-track.overflowing {
    justify-content: flex-start; overflow-x: auto;
    gap: .9rem; padding: 0 1rem .5rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .categories-track .category-card,
  .categories-track.overflowing .category-card {
    flex: 0 0 80% !important; max-width: 80% !important; scroll-snap-align: center;
  }

  /* --- Filtres galerie/imprimes : repliables (bouton "Filtres") --- */
  .filters-mobile-toggle {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 10px;
    background: #fff; font-weight: 700; color: var(--blue-dark);
    cursor: pointer; font-size: .9rem; margin-bottom: .6rem;
  }
  .filters-mobile-toggle svg { width: 18px; height: 18px; }
  .filters-mobile-toggle .ft-chev { margin-left: auto; transition: transform .2s; }
  .g-sidebar, .p-sidebar { padding: 0; background: none; border: none; }
  .g-sidebar.filters-collapsed > :not(.filters-mobile-toggle),
  .p-sidebar.filters-collapsed > :not(.filters-mobile-toggle) { display: none; }
  .g-sidebar:not(.filters-collapsed) .filters-mobile-toggle .ft-chev,
  .p-sidebar:not(.filters-collapsed) .filters-mobile-toggle .ft-chev { transform: rotate(180deg); }
}

/* Le bouton "Filtres" n'existe qu'en mobile */
.filters-mobile-toggle { display: none; }

/* <=480 : favoris en 2 colonnes (les produits restent en 2 col via le bloc 768) */
@media (max-width: 480px) {
  .favoris-grid, #wishlist-grid.favoris-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   MOBILE e-commerce moderne (facon Lou / Shein / Booking)
   ============================================================ */
/* Barre d'achat collante en bas de la fiche produit (mobile) */
.mobile-buy-bar { display: none; }
@media (max-width: 768px) {
  .mobile-buy-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; gap: .9rem;
    padding: .55rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.12);
  }
  .mobile-buy-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
  .mobile-buy-name { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
  .mobile-buy-price { font-size: 1.15rem; font-weight: 700; color: var(--blue-dark); }
  .mobile-buy-btn {
    flex: 1; padding: .85rem 1rem; border: none; border-radius: 999px;
    background: var(--blue-dark); color: #fff; font-weight: 700; font-size: .92rem;
    transition: background .15s, transform .1s;
  }
  .mobile-buy-btn:active { transform: scale(.98); }
  .mobile-buy-btn:disabled { opacity: .5; }
  /* On masque le bouton inline (remplace par la barre) + place pour la barre */
  .product-info .btn-add-cart { display: none; }
  body.has-buy-bar { padding-bottom: 70px; }

  /* Cartes produit facon Shein : compactes, image en avant, infos serrees */
  .painting-card, .polaroid-card, .related-card { border-radius: 10px; }
  .painting-name { font-size: .85rem; line-height: 1.2; margin-bottom: .1rem; }
  .painting-price { font-size: .92rem; font-weight: 700; }
  .painting-dims, .painting-tech { font-size: .68rem; margin-bottom: .05rem; }
  .painting-info { padding: .4rem 0 .2rem; }
  /* Bouton favoris : cercle un peu plus petit, bien tactile */
  .painting-card .btn-fav, .polaroid-card .btn-fav { width: 30px; height: 30px; }

  /* Le bouton "Filtres & tri" reste accessible meme en scrollant */
  .filters-mobile-toggle { position: sticky; top: 60px; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
}

/* ============================================================
   ACCUEIL — mobile (page par page) <=768
   ============================================================ */
@media (max-width: 768px) {
  /* Navbar : burger gauche, logo "Fani" centre, icones a droite */
  .main-nav { justify-content: space-between; gap: .45rem; }
  .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
  .nav-right { margin-left: auto; gap: .2rem; }
  .nav-acct-btn, .nav-admin-btn { display: none; }   /* 2 icones max : favoris + panier */

  /* Banderole promo : suit la nav (memes actions hide/show au scroll) */
  #promo-banner { transition: transform .3s ease; }
  #promo-banner.nav-hidden { transform: translateY(-100%); }

  /* HERO : image centree (comme contact), texte haut-gauche sans coller
     les bords, reseaux sociaux en ligne horizontale en bas du hero */
  .hero-bg { background-position: center center; }
  .hero-text {
    left: 1.3rem; right: 1.3rem; top: 13%;
    transform: none; text-align: left; max-width: 90%;
  }
  .hero-social {
    display: flex; flex-direction: row;
    left: 1.3rem; right: 1.3rem; top: auto; bottom: 1.3rem;
    transform: none; gap: .7rem; justify-content: flex-start;
  }
  .hero-social a { width: 40px; height: 40px; margin-bottom: 0; }
  .hero-social a svg { width: 22px !important; height: 22px !important; }

  /* SECTION HISTOIRE : pas d'espace vide, image plus petite, stats en
     colonne a gauche a cote de l'image */
  .histoire-left-inner { padding: 1.8rem 1.3rem; }
  .histoire-right { flex-direction: row-reverse; max-height: none; align-items: stretch; }
  .histoire-image { flex: 1; min-height: 0; }            /* plus petite, remplit la colonne */
  .histoire-image img { height: 100%; }
  .histoire-stats {
    flex: 0 0 42%; flex-direction: column; justify-content: center;
    gap: 1.4rem; padding: 1.2rem .8rem; text-align: center;
  }

  /* GALERIE / IMPRIMES : moins d'espace entre le contenu et les bords */
  .gallery-categories { padding: 1.3rem .7rem; }
  .galerie-layout, .imprimes-layout { padding-left: .5rem; padding-right: .5rem; gap: .5rem; }
  .gallery-grid { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   NAVIGATION MOBILE PREMIUM — Tiroir lateral (Drawer)
   Desktop : .nav-drawer est "transparent" (display:contents) -> la nav
   horizontale reste identique. Mobile : vrai tiroir glissant a gauche.
   ============================================================ */
.nav-drawer { display: contents; }
.nav-drawer-close, .nav-drawer-extra, .nav-overlay { display: none; }

@media (max-width: 768px) {
  /* Overlay sombre + floute */
  .nav-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(25, 30, 35, .45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
    z-index: 1250;
  }
  #main-nav.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

  /* Le tiroir : panneau plein hauteur qui glisse depuis la gauche */
  .nav-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 84%; max-width: 330px;
    background: var(--beige);
    transform: translateX(-100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    z-index: 1300; padding: 3.6rem 0 1.4rem;
    overflow-y: auto;
    box-shadow: 6px 0 34px rgba(0, 0, 0, .2);
  }
  #main-nav.nav-open .nav-drawer { transform: translateX(0); }

  /* Croix de fermeture en haut du tiroir */
  .nav-drawer-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: .8rem; right: 1rem;
    width: 40px; height: 40px; border: none; background: none;
    font-size: 2rem; line-height: 1; color: var(--blue-dark); cursor: pointer;
  }

  /* Liens principaux : grands, Cormorant italique (aspect "Magazine d'Art") */
  #nav-drawer .nav-links {
    position: static; flex-direction: column; align-items: stretch;
    background: none; box-shadow: none; max-height: none; overflow: visible;
    opacity: 1; pointer-events: auto; padding: 0; gap: 0; width: 100%; flex: none;
  }
  #nav-drawer .nav-links li { width: 100%; }
  #nav-drawer .nav-link,
  #nav-drawer .nav-link-trigger {
    display: block; width: 100%;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 2rem; font-weight: 400; line-height: 1.25; letter-spacing: .5px;
    color: var(--blue-dark); padding: .5rem 1.6rem;
    border-bottom: none;
  }
  #nav-drawer .nav-link.active { font-weight: 600; color: var(--blue-deep); }

  /* Liens secondaires : petits, Lato, en bas du tiroir */
  .nav-drawer-extra {
    display: flex; flex-direction: column; gap: .15rem;
    margin-top: auto; padding: 1.2rem 1.6rem 0;
    border-top: 1px solid rgba(45, 95, 122, .18);
  }
  .nav-drawer-2nd {
    font-family: 'Lato', sans-serif; font-size: .98rem;
    color: var(--blue-dark); padding: .5rem 0;
  }
  .nav-drawer-2nd:hover { color: var(--pink); }
}

/* Verrou de scroll quand le tiroir est ouvert */
body.nav-drawer-open { overflow: hidden; }

/* ============================================================
   ACCUEIL — epure facon Artsper (DA conservee : pink/blue/beige,
   Cormorant/Lato). Ajustements purement VISUELS, structure inchangee.
   ============================================================ */
/* 1. Hero : lien "Decouvrir" minimaliste sous la citation */
.hero-discover {
  display: inline-block; margin-top: 1.4rem;
  font-family: 'Lato', sans-serif; font-size: .8rem; letter-spacing: 2px;
  text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 3px;
  transition: border-color .2s ease, letter-spacing .2s ease;
}
.hero-discover:hover { border-color: #fff; letter-spacing: 2.6px; }

/* 2. En-tetes de sections : rythme editorial + filet fin sous l'eyebrow */
.selection-section, .imprimes-section, .testimonials-section { padding-block: clamp(2.6rem, 6vw, 5rem); }
.selection-section .container, .imprimes-section .container { max-width: 1200px; }
.section-eyebrow { margin-bottom: .5rem; }
.section-subtitle { max-width: 620px; margin-left: auto; margin-right: auto; }
.selection-section .section-eyebrow::after,
.imprimes-section .section-eyebrow::after {
  content: ''; display: block; width: 46px; height: 2px;
  background: currentColor; opacity: .35; margin: .7rem auto 0;
}

/* 3. Cartes produits : epurees, image-first, hover doux */
.card-img-stack { border-radius: 8px; }
.painting-card img, .painting-card.selected img { border-radius: 8px; }
.painting-card { transition: transform .25s ease, opacity .2s ease; }
.painting-card:hover { opacity: 1; transform: translateY(-4px); }
/* (titre des tableaux : on conserve la police d'origine, identique aux imprimes) */

/* 5. Section histoire : titre plus fin (epure) */
.histoire-title { font-weight: 300; }

/* 6. Trust band : filets FINS au lieu de 3px (tous ecrans). Tailles affinees
   uniquement >=769px -> le mobile garde sa version compacte 1 ligne. */
.trust-band { border-top: 1px solid rgba(45,95,122,.25); }
.trust-item:not(:last-child) { border-right: 1px solid rgba(45,95,122,.18); }
.trust-icon svg { stroke-width: 1.4; }
@media (min-width: 769px) {
  .trust-item { padding: 1.6rem 1rem; }
  .trust-label { font-size: .82rem; letter-spacing: .5px; font-weight: 500; }
  .trust-icon { width: 34px; height: 34px; margin-bottom: 6px; }
}

/* ============================================================
   ACCUEIL — ajustements mobile (demande ciblee) <=768
   ============================================================ */
@media (max-width: 768px) {
  /* ACCUEIL : banderole + nav AU-DESSUS du hero. Le body passe en flex colonne
     et on remonte la banderole (-2) et la nav (-1) avant le hero (ordre 0).
     Le hero devient un bloc relatif (pas de "trou", pas de parallax). */
  body:has(#hero-outer) { display: flex; flex-direction: column; }
  body:has(#hero-outer) #promo-banner { order: -2; }
  body:has(#hero-outer) #navbar { order: -1; }
  body:has(#hero-outer) #hero-outer { height: auto; }
  body:has(#hero-outer) .hero { position: relative; height: 66vh; min-height: 340px; }

  /* Image decalee vers la DROITE pour garder le visage dans l'ecran */
  .hero-bg { background-position: 90% center; }
  /* Textes du hero plus petits + colles a gauche (padding 0 pour annuler le
     1.4rem ajoute plus haut) */
  .hero-text { left: .2rem; right: auto; max-width: 93%; padding: 0; }
  .hero-text h1 { font-size: 1.9rem; }
  .hero-quote { font-size: 1.25rem; }
  .hero-quote em { font-size: 1.5rem; }
  .hero-discover { font-size: .72rem; margin-top: 1rem; }
  /* Reseaux sociaux : on inverse Facebook et TikTok (ordre : IG, TikTok, Facebook) */
  .hero-social .s-tk { order: 1; }
  .hero-social .s-fb { order: 2; }

  /* SECTION HISTOIRE : plus petite, sans espace entre texte et image */
  .histoire-section { gap: 0; }
  .histoire-left-inner { padding: 1.5rem 1.2rem; }
  .histoire-right { max-height: 36vh; }
  .histoire-image { min-height: 0; }

  /* SELECTION / IMPRIMES : contenu tres pres des bords + produits plus grands */
  .selection-section, .imprimes-section { padding-left: .4rem; padding-right: .4rem; }
  .selection-section .container, .imprimes-section .container { padding-left: .4rem; padding-right: .4rem; max-width: none; }
  .home-gallery-grid, .home-imprimes-grid-2x4 { gap: .35rem !important; }

  /* Trust band : libelles un peu plus grands (tient encore sur 1 ligne) */
  .trust-label { font-size: .72rem; }
}

/* ============================================================
   AJUSTEMENTS : fleche CTA, z-index tiroir, filtres bottom-sheet mobile
   ============================================================ */
/* Espace entre le texte et la fleche des CTA + petit glissement au survol */
.cta-arrow { display: inline-block; margin-left: .55rem; transition: transform .2s ease; }
.btn-outline-dark:hover .cta-arrow { transform: translateX(4px); }

/* La banderole promo ne doit JAMAIS passer au-dessus du tiroir lateral :
   quand le tiroir est ouvert, on remonte la nav (et son tiroir) au-dessus. */
body.nav-drawer-open #navbar { z-index: 1400; }
body.nav-drawer-open #promo-banner { z-index: 1; }

@media (max-width: 768px) {
  /* Hero : visage decale vers la gauche */
  .hero-bg { background-position: 72% center; }

  /* GALERIE / IMPRIMES : sections collees aux bords + produits plus grands.
     Les wrappers .gallery-tableaux et .imprimes-page gardaient un padding de
     2.5rem -> c'est lui qui creait la marge avec le bord de l'ecran. */
  .gallery-tableaux { padding: 0 .3rem 5rem; }
  .imprimes-page { padding: 1rem .3rem 5rem; }
  .galerie-layout, .imprimes-layout { padding-left: 0; padding-right: 0; gap: .4rem; padding-bottom: 1rem; }
  .gallery-categories { padding-left: .4rem; padding-right: .4rem; }
  /* Grilles produits : pleine largeur, petit ecart -> vignettes plus grandes */
  .gallery-grid { padding: 1rem 0 0; column-gap: .4rem; columns: 2; }
  .imprimes-page-grid { gap: .5rem; padding-top: 1rem; }

  /* ===== Filtres en bottom-sheet (galerie + imprimes) ===== */
  /* Avant que le JS ne la transforme en sheet, la sidebar est hors flux pour ne
     PAS occuper d'espace au premier rendu (sinon la grille saute = gros CLS). */
  .g-sidebar:not(.filter-sheet), .p-sidebar:not(.filter-sheet) { display: none; }
  /* La sidebar devient un panneau qui glisse depuis le bas (max 2/3 ecran) */
  .g-sidebar.filter-sheet, .p-sidebar.filter-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; height: auto; max-height: 66vh;
    overflow-y: auto; background: #fff;
    border-radius: 18px 18px 0 0; border-right: none;
    box-shadow: 0 -10px 34px rgba(0,0,0,.22);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    z-index: 1300; padding: 0 1rem 1.4rem;
  }
  .g-sidebar.filter-sheet.sheet-open, .p-sidebar.filter-sheet.sheet-open { transform: translateY(0); }
  .filter-sheet-head {
    position: sticky; top: 0; background: #fff; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0 .7rem; border-bottom: 1px solid var(--border); margin-bottom: .8rem;
    font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--blue-dark);
  }
  .filter-sheet-close { border: none; background: none; font-size: 1.9rem; line-height: 1; color: var(--blue-dark); cursor: pointer; padding: 0 .2rem; }

  .filter-sheet-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(25,30,35,.45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1280;
  }
  .filter-sheet-overlay.open { opacity: 1; pointer-events: auto; }

  /* Bouton flottant "Filtrer" : bas, centre, statique (meme ligne que la
     fleche "remonter en haut" qui est en bas a droite) */
  .mobile-filter-fab {
    display: inline-flex; align-items: center; gap: .45rem;
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 1000; padding: .6rem 1.4rem; border: none; border-radius: 999px;
    background: var(--blue-dark); color: #fff; font-weight: 700; font-size: .85rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
  }
  .mobile-filter-fab svg { width: 18px; height: 18px; }
  body.sheet-lock { overflow: hidden; }

  /* "Vous pourriez aussi aimer" : comme la galerie -> grille verticale 2 colonnes
     qu'on fait defiler vers le bas (plus de carrousel horizontal ni de fleches).
     Meme padding que galerie/imprimes mobile. */
  .related-section { padding: 0 .3rem 5rem; }
  .related-title { padding: 0 .7rem; }
  .related-carousel-wrap { padding: 0; max-width: none; overflow: visible; }
  .related-carousel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    overflow: visible;
    padding: 0;
  }
  .related-card { flex: none; width: auto; position: relative; }
  .related-section .carousel-btn { display: none; }

  /* Coeur favoris : sur l'image, en haut a droite, sans ombre */
  .painting-card .btn-fav, .polaroid-card .btn-fav, .related-card .btn-fav {
    top: .5rem; bottom: auto; right: .5rem;
    box-shadow: none;
  }

  /* Avis clients (fiche produit) : pleine largeur ecran */
  .product-reviews { padding-left: .5rem; padding-right: .5rem; }

  /* PANIER lateral : pleine largeur, sans suggestions "vous aimerez",
     croix de fermeture agrandie pour sortir facilement. */
  .cart-sidebar-suggestions { display: none; }
  .cart-close-btn { font-size: 2.3rem; padding: 0 .3rem; line-height: 1; }

  /* "Vous pourriez aussi aimer" : on annule aussi le padding du .container interne */
  .related-section .container { padding-left: 0; padding-right: 0; max-width: none; }

  /* PROFIL : navigation en barre horizontale (icone au-dessus, texte dessous),
     avec scrollbar visible pour montrer qu'il y a une suite a faire defiler. */
  .admin-sidebar {
    flex-direction: row;
    overflow-x: auto;
    gap: .4rem;
    padding: .5rem .4rem .35rem;
    scrollbar-width: thin;
  }
  .admin-sidebar::-webkit-scrollbar { height: 5px; }
  .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 3px; }
  .admin-sidebar .sidebar-btn {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-align: center;
    white-space: nowrap;
    width: auto;             /* annule le width:100% herite -> bouton compact */
    min-width: 0;            /* le bouton epouse son texte (petit espace seulement) */
    padding: .4rem .55rem;
    font-size: .72rem;
  }
  .admin-sidebar .sb-ico { width: 19px; height: 19px; }

  /* Bouton Deconnexion : tout en bas de la section Mon compte (hors de la barre) */
  .account-logout { margin-top: 1.6rem; }
  .account-logout .sidebar-btn { width: 100%; justify-content: center; }

  /* ADMIN : version mobile plus compacte et minimaliste (sans perdre en clarte) */
  .r-admin .card { padding: .85rem .8rem; margin-bottom: 1rem; overflow-x: visible; }
  .r-admin .heading-page, .r-admin .heading-sub { font-size: 1.45rem; }
  .admin-sidebar .stock-badge-float { position: static; margin-left: .2rem; }

  /* Dashboard : KPI sur 2 colonnes (cards de moitie de largeur) */
  #panel-dashboard .r-kpi { grid-template-columns: 1fr 1fr; gap: .6rem; }

  /* Tableaux admin : chaque ligne devient une carte "libelle : valeur" ->
     plus besoin de defiler horizontalement pour voir toutes les infos. */
  .admin-table { font-size: .78rem; }
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: auto; }
  .admin-table tr {
    border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: .7rem; padding: .2rem .7rem; background: #fff;
  }
  .admin-table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; text-align: right;
    padding: .5rem 0; border: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .admin-table tr td:last-child { border-bottom: none; }
  .admin-table td::before {
    content: attr(data-label);
    font-weight: 700; color: var(--blue-dark);
    text-align: left; white-space: nowrap; flex-shrink: 0;
  }
  .admin-table td:not([data-label])::before { content: none; }
  .admin-table td:empty { display: none; }

  /* La barre de navigation admin (qui est aussi une .card) doit pouvoir
     defiler horizontalement -> on annule le overflow-x:visible des .card. */
  .r-admin .admin-sidebar { overflow-x: auto; }

  /* Lignes admin repliees par defaut : seul le resume (Nom/Titre/#/...) + fleche.
     Le reste s'affiche au clic (.expanded). */
  .admin-table tr { cursor: pointer; }
  .admin-table td[data-summary] { font-weight: 600; }
  .admin-table td[data-summary]::before { content: none; }
  .admin-table tr:not(.expanded) td:not([data-summary]) { display: none; }
  .admin-table tr:not(.expanded) td[data-summary] { border-bottom: none; }
  .row-toggle { display: inline-block; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--blue-mid); transition: transform .2s; flex-shrink: 0; }
  .admin-table tr.expanded .row-toggle { transform: rotate(90deg); }

  /* Cellule "Actions" : boutons empiles verticalement (sinon ils debordent) */
  .admin-table td[data-label="Actions"], .admin-table td[data-label="Action"] {
    flex-direction: column; align-items: stretch; text-align: left; gap: .4rem;
  }
  .admin-table td[data-label="Actions"]::before, .admin-table td[data-label="Action"]::before { text-align: left; }
  .admin-table td[data-label="Actions"] button, .admin-table td[data-label="Actions"] a,
  .admin-table td[data-label="Action"] button, .admin-table td[data-label="Action"] a { width: 100%; }

  /* Profil : bouton Deconnexion aligne avec les autres chips de la barre */
  .admin-sidebar .sidebar-btn.danger {
    margin-top: 0; border-top: none; padding-top: .4rem; border-radius: 8px;
  }

  /* Section commentaires accueil : swipe horizontal, sans fleches ni marges */
  .testimonials-section { padding-left: .3rem; padding-right: .3rem; }
  .testimonials-carousel-wrap { gap: 0; }
  .testimonials-arrow { display: none; }
  .testimonials-track { padding-left: .3rem; padding-right: .3rem; }

  /* Panier lateral : hauteur dynamique (dvh) pour que le bas ne passe pas sous
     la barre du navigateur, liste defilante, total + "Commander" toujours visibles */
  .cart-sidebar { height: 100dvh; }
  .cart-sidebar-main { overflow: hidden; }
  .cart-items { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  .cart-total-row, .cart-sidebar-actions { flex-shrink: 0; }
  .cart-sidebar-actions { padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); }

  /* FICHE PRODUIT : zone d'achat plus haute + bouton "Ajouter au panier"
     visible juste sous le prix (en plus de la barre collante du bas). */
  .product-main-img { max-height: 46vh; }
  .product-info .btn-add-cart { display: block; }
}
/* Le FAB, l'overlay et l'en-tete du sheet n'existent qu'en mobile.
   On masque uniquement >=769px : sinon cette regle, placee APRES la media
   query mobile, l'emporterait (meme specificite) et cacherait le FAB partout. */
@media (min-width: 769px) {
  .mobile-filter-fab, .filter-sheet-overlay, .filter-sheet-head { display: none; }
  /* La fleche de repli des lignes admin n'existe qu'en mobile */
  .row-toggle { display: none; }
}

/* ============================================================
   AJUSTEMENTS (mobile no-hover-swap, admin modals/buttons, coupons spacing)
   ============================================================ */

/* Sur mobile, le tap simule le hover -> on desactive le swap d'image
   secondaire qui rendait la carte "clignotante" au moindre tap. */
@media (max-width: 768px) {
  .painting-card:hover .card-img-stack img.card-img-2,
  .polaroid-card:hover .card-img-stack img.card-img-2 { opacity: 0; }
}

/* === ADMIN : formulaires d'ajout (produit, evenement, carte galerie)
       prennent la largeur de l'ecran. === */
.product-modal-card-large { width: 98% !important; max-width: none !important; }
@media (max-width: 768px) {
  .product-modal-card-large { width: 100% !important; height: 100dvh; border-radius: 0; padding: 1rem; }
}

/* === ADMIN : boutons d'action plus compacts (≈ moitie) et mieux espaces
       pour eviter les misclicks sur les fiches denses. === */
.r-admin .btn-action, .admin-table .btn-action {
  padding: .22rem .6rem;
  font-size: .66rem;
  margin-right: .35rem;
  letter-spacing: .3px;
}
.admin-table td .btn-action:last-child { margin-right: 0; }
/* Sur mobile (lignes-cartes), les boutons sont empiles (flex-direction column
   sur .admin-table td[data-label="Actions"]) -> on reset margin-right. */
@media (max-width: 768px) {
  .admin-table td[data-label="Actions"] .btn-action,
  .admin-table td[data-label="Action"]  .btn-action { margin-right: 0; }
}

/* === CODE PROMO : aerer les labels / inputs (mobile + desktop).
       Avant, les labels touchaient les champs et les rangees etaient collees. === */
#panel-coupons .form-row-2 { margin-bottom: 1.1rem; gap: 1.1rem; }
#panel-coupons .form-row-2 > div { display: flex; flex-direction: column; gap: .55rem; }
#panel-coupons .form-row-2 .form-label { margin-bottom: 0; }
#panel-coupons .card { padding: 1.2rem 1.1rem; }
@media (max-width: 768px) {
  #panel-coupons .form-row-2 { gap: 1rem; margin-bottom: 1.2rem; }
}

/* ============================================================
   GRAND ECRAN (>=1920px) : agrandissements de la page d'accueil
   - Hero : boutons reseaux sociaux + auteur + CTA plus grands,
     bloc citation un peu plus large.
   - Section "Histoire" : eyebrow + texte plus grands, bloc plus large
     (on NE touche PAS au titre/citation .histoire-title).
   - Sections "Selection" et "Imprimes" : cartes plus grandes (conteneur
     elargi) + sous-titre plus grand et plus large (2 lignes).
   ============================================================ */
@media (min-width: 1920px) {
  /* --- Hero --- */
  .hero-social a { width: 58px; height: 58px; }
  .hero-social a svg { width: 46px !important; height: 46px !important; }
  .hero-author { font-size: 1.75rem; }       /* +~3pt */
  .hero-discover { font-size: 1rem; }         /* +~3pt */
  .hero .hero-text { max-width: 760px; }      /* citation un peu plus large */

  /* --- Histoire (sans toucher a .histoire-title) --- */
  .histoire-eyebrow { font-size: 1rem; }
  .histoire-text { font-size: 1.2rem; line-height: 1.75; max-width: 820px; }

  /* --- Selection peintures + Imprimes --- */
  .selection-section .container, .imprimes-section .container { max-width: 1320px; }
  .section-subtitle { font-size: 1.2rem; max-width: 1000px; }
  /* Titres de section (Selection / Imprimes / temoignages) plus grands */
  .section-eyebrow { font-size: .95rem; }

  /* Boutons CTA "Acceder a la galerie / boutique" plus grands */
  .btn-outline-dark { font-size: 1.05rem; padding: .9rem 2.2rem; }

  /* Carrousel temoignages : plus large (gauche + droite), 5 avis visibles,
     fleches plus grandes et bien centrees (glyphe centre dans le rond). */
  .testimonials-section .container { max-width: 1600px; }
  .testimonial-card { flex: 0 0 calc((100% - 4.8rem) / 5); }
  .testimonials-arrow {
    width: 52px; height: 52px; font-size: 1.9rem;
    display: flex; align-items: center; justify-content: center;
  }

  /* Contact (accueil) : texte et champs un peu plus grands (sans deborder) */
  .contact-subtitle { font-size: 1.45rem; }
  .contact-field label { font-size: 1.05rem; }
  .contact-field input, .contact-field textarea { font-size: 1.05rem; padding: .6rem .8rem; }

  /* Grilles accueil : selection peintures = 3 par ligne (grille 2x3),
     imprimes = 4 par ligne. Titres bleus de ces 2 sections tres agrandis. */
  .home-gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .home-imprimes-grid-2x4 { grid-template-columns: repeat(4, 1fr) !important; }
  .selection-section .section-eyebrow,
  .imprimes-section .section-eyebrow { font-size: 2rem; letter-spacing: 2px; }

  /* Panier lateral plus large (s'etend vers la gauche, ancre a droite). */
  .cart-sidebar { width: 680px; }

  /* Mega-menu "Galerie" : menu plus haut (padding vertical), images + titres
     + textes plus grands, bloc texte elargi vers la droite. */
  .nav-dropdown-item { padding: 60px 55px 60px 120px; }
  .nav-dropdown-item img { width: 380px; height: 270px; }
  .nav-dropdown-item-imprimes img { width: 200px; height: 270px; }
  .nav-dropdown-item-text h4 { font-size: 2.4rem; }
  .nav-dropdown-item-text p { font-size: 1.1rem; max-width: 420px; }
  .nav-dropdown-btn { font-size: .82rem; padding: .85rem 1.6rem; }

  /* Colonne "Vous aimerez aussi" du panier : elargie proportionnellement
     a l'elargissement du panier (520->680px). */
  .cart-sidebar-suggestions { width: 230px; }

  /* Navbar : liens + logo +~2pt */
  .nav-links a, .nav-link-trigger { font-size: 1.17rem; }
  .nav-logo { font-size: 1.97rem; }

  /* Banderole (promo qui cycle + avis d'absence) : texte +~2pt + plus haute */
  .promo-banner { font-size: 1rem; min-height: 50px; }
  .absence-banner { font-size: 1.02rem; }

  /* Footer : tous les textes +~2pt */
  .social-band-text { font-size: 1.27rem; }
  .footer-newsletter-title { font-size: 1.77rem; }
  .footer-newsletter-sub { font-size: 1.02rem; }
  .footer-newsletter-input, .footer-newsletter-btn { font-size: 1rem; }
  .footer-brand-name { font-size: 4.3rem; }
  .footer-brand-tagline { font-size: 1.47rem; }
  .footer-col-title { font-size: .87rem; }
  .footer-col a { font-size: 1.17rem; }
  .footer-copy, .footer-payments { font-size: 1.02rem; }
}

/* Tres grand ecran (2560+) : cartes accueil et carrousel encore plus larges. */
@media (min-width: 2560px) {
  .selection-section .container, .imprimes-section .container { max-width: 1600px; }
  .histoire-text { max-width: 980px; }
  .testimonials-section .container { max-width: 1900px; }
}