/* =========================================================
   ROOMSTYLE — main.css
   Styles communs à TOUTES les pages (nav, footer, reset, polices).
   Extrait et factorisé depuis roomstyle.html / START-HERE.html.
   Les styles propres à chaque page (hero, grids, etc.) vivent
   dans assets/css/page-*.css et sont chargés au cas par cas.
   ========================================================= */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray:#f5f5f3;
  --mid:#888;
  --border:rgba(0,0,0,0.08);
  --accent:#1a1a1a;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--black);max-width:100%;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* Texte d'accessibilité WooCommerce (ex: "Original price was...") — doit être
   invisible visuellement mais lisible par les lecteurs d'écran. Cette classe
   n'était définie nulle part dans le thème, donc il s'affichait en clair. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── NAV ── */
.site-nav{background:#c8c8c8;border-bottom:0.5px solid #aaa;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-logo .custom-logo-link{display:flex;align-items:center;}
.nav-logo img.custom-logo{height:38px!important;width:auto!important;max-width:180px;object-fit:contain;display:block;}
.nav-logo-text{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--black);letter-spacing:1px;}
.nav-links{display:flex;gap:32px;}
.nav-links a{font-size:13px;color:#555;text-decoration:none;letter-spacing:0.5px;}
.nav-links a:hover,.nav-links a.active{color:var(--black);}
.nav-right{display:flex;align-items:center;gap:20px;}
.nav-search{background:#b0b0b0;border:none;border-radius:20px;padding:8px 16px;font-size:12px;font-family:'DM Sans',sans-serif;outline:none;width:180px;color:#111;}
.nav-btn{background:var(--black);color:var(--white);border:none;padding:9px 20px;border-radius:6px;font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer;letter-spacing:0.5px;}
/* .nav-cart n'était défini que sur les pages détail dans le prototype d'origine
   (bug : bouton non stylé sur products/bundles/spaces/worlds). Factorisé ici pour toutes les pages. */
.nav-cart{background:#0a0a0a;color:#fff;border:none;padding:9px 20px;border-radius:6px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:8px;text-decoration:none;}
.nav-cart:hover{background:#333;}

/* Icône wishlist + compteur dans le header */
.nav-wishlist{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:16px;color:#0a0a0a;text-decoration:none;}
.nav-account{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#0a0a0a;text-decoration:none;}
.nav-currency-switcher{background:transparent;border:0.5px solid rgba(0,0,0,0.12);border-radius:6px;padding:7px 10px;font-size:11px;font-family:'DM Sans',sans-serif;color:#0a0a0a;cursor:pointer;letter-spacing:0.3px;}
.nav-currency-switcher:hover{border-color:#0a0a0a;}

/* Affichage de prix normalisé (voir roomstyle_price_with_old_html) —
   utilisé sur toutes les cartes du site : prix actuel en poids normal,
   ancien prix barré, gris, légèrement plus petit. Jamais de gras, jamais
   de badge "SAVE X%" à ce niveau. */
.price-now{font-weight:400;}
.price-was{font-size:0.85em;color:#999;text-decoration:line-through;margin-left:6px;font-weight:400;}
.nav-wishlist-count{position:absolute;top:-4px;right:-6px;background:#ff4444;color:#fff;font-size:9px;font-weight:600;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'DM Sans',sans-serif;}

/* Bouton burger : caché en desktop, visible seulement en mobile */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:28px;height:28px;background:none;border:none;cursor:pointer;padding:0;}
.nav-burger span{display:block;width:100%;height:2px;background:#0a0a0a;border-radius:2px;transition:transform 0.25s,opacity 0.25s;}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Panneau menu mobile : caché par défaut, glisse depuis la droite */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:150;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.mobile-menu-overlay.show{opacity:1;pointer-events:auto;}
.mobile-menu-panel{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:320px;background:#fff;z-index:151;padding:24px;display:flex;flex-direction:column;gap:24px;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;}
.mobile-menu-panel.show{transform:translateX(0);}
.mobile-menu-close{align-self:flex-end;background:none;border:none;font-size:18px;cursor:pointer;color:#555;padding:6px;}
.mobile-menu-search-form{width:100%;}
.mobile-menu-search{width:100%;background:#f5f5f3;border:none;border-radius:20px;padding:10px 16px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;color:#111;}
.mobile-menu-links{display:flex;flex-direction:column;gap:4px;}
.mobile-menu-links a{font-size:15px;color:#0a0a0a;text-decoration:none;padding:12px 4px;border-bottom:0.5px solid rgba(0,0,0,0.06);}
.mobile-menu-links a.active{font-weight:500;}
.mobile-menu-cart{margin-top:auto;background:#0a0a0a;color:#fff;text-align:center;padding:13px;border-radius:8px;font-size:13px;text-decoration:none;font-family:'DM Sans',sans-serif;font-weight:500;}
.mobile-menu-wishlist{background:#f5f5f3;color:#0a0a0a;text-align:center;padding:13px;border-radius:8px;font-size:13px;text-decoration:none;font-family:'DM Sans',sans-serif;font-weight:500;}
.mobile-currency-switcher{background:#fff;border:0.5px solid rgba(0,0,0,0.12);border-radius:8px;padding:12px;font-size:13px;font-family:'DM Sans',sans-serif;color:#0a0a0a;width:100%;}

@media(max-width:768px){
  .site-nav{padding:0 20px;}
  .nav-links{display:none;}
  .nav-search-form{display:none;}
  .nav-wishlist{display:none;}
  .nav-account{display:none;}
  .nav-burger{display:flex;}
}
@media(min-width:769px){
  .mobile-menu-overlay,.mobile-menu-panel{display:none;}
}

/* ── FOOTER ── */
footer{background:#0a0a0a;padding:60px 40px 30px;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:24px;color:#fff;margin-bottom:12px;}
.footer-brand-desc{font-size:13px;color:#555;line-height:1.7;margin-bottom:20px;max-width:260px;}
.footer-social{display:flex;gap:10px;}
/* Formulaire de commentaire natif WordPress ("Leave a Reply") : les
   navigateurs donnent une largeur intrinsèque au textarea (via l'attribut
   HTML cols) qui peut dépasser l'écran sur mobile si on ne la force pas. */
#respond,#commentform{max-width:100%;box-sizing:border-box;}
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"]{
  width:100%;max-width:100%;box-sizing:border-box;
}

.social-link{width:36px;height:36px;border:0.5px solid #333;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#888;font-size:13px;text-decoration:none;}
.social-link svg{display:block;}

/* ── ÉTOILES DES AVIS ──
   WooCommerce dessine ses étoiles via une police d'icônes (impossible à
   rendre "plus pointu" par CSS seul) — on remplace entièrement le rendu
   par nos propres étoiles SVG (plus pointues, couleurs personnalisées). */
.star-rating{
  overflow:hidden;position:relative;height:1em;line-height:1;width:5.3em;
  font-family:initial!important;font-size:16px;color:transparent!important;
}
.star-rating::before{
  content:''!important;position:absolute;top:0;left:0;width:100%;height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f7f0d0' d='M12,1 L14.35,8.76 L22.46,8.60 L15.80,13.24 L18.47,20.90 L12,16 L5.53,20.90 L8.20,13.24 L1.54,8.60 L9.65,8.76 Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:1.06em 1em;color:transparent!important;
}
.star-rating span{overflow:hidden;position:absolute;top:0;left:0;height:100%;display:block;color:transparent!important;}
.star-rating span::before{
  content:''!important;position:absolute;top:0;left:0;width:100em;height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcc00' d='M12,1 L14.35,8.76 L22.46,8.60 L15.80,13.24 L18.47,20.90 L12,16 L5.53,20.90 L8.20,13.24 L1.54,8.60 L9.65,8.76 Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:1.06em 1em;color:transparent!important;
}
.star-rating strong{position:absolute;left:-9999px;}
.social-link:hover{border-color:#fff;color:#fff;}
.footer-col-title{font-size:12px;font-weight:500;color:#fff;letter-spacing:2px;margin-bottom:16px;}
.footer-col a{display:block;font-size:12px;color:#555;text-decoration:none;margin-bottom:10px;letter-spacing:0.3px;}
.footer-pref-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:nowrap;white-space:nowrap;}
.footer-pref-label{font-size:12px;color:#555;letter-spacing:0.3px;flex-shrink:0;}

/* Devise ET langue partagent maintenant exactement la même structure
   (voir inc/currency-switcher.php et inc/language-switcher.php — toutes
   deux 100% maison), donc un seul bloc de style suffit pour les deux. */
.footer-currency-switcher,.footer-lang-switcher{font-size:12px;letter-spacing:0.3px;white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px;}
.footer-currency-switcher a,.footer-currency-switcher .pref-current,
.footer-lang-switcher a,.footer-lang-switcher .pref-current{color:#888;text-decoration:none;white-space:nowrap;}
.footer-currency-switcher a:hover,.footer-lang-switcher a:hover{color:#fff;}
.footer-currency-switcher .pref-current,.footer-lang-switcher .pref-current{color:#fff;font-weight:500;}
.footer-currency-switcher .pref-sep,.footer-lang-switcher .pref-sep{color:#444;white-space:nowrap;}
.footer-col a:hover{color:#fff;}
.footer-newsletter{background:#111;border-radius:8px;padding:20px;}
.footer-nl-label{font-size:12px;color:#fff;font-weight:500;margin-bottom:6px;}
.footer-nl-sub{font-size:11px;color:#555;margin-bottom:12px;}
.footer-nl-row{display:flex;gap:8px;}
.footer-nl-input{flex:1;background:#1a1a1a;border:0.5px solid #333;border-radius:4px;padding:9px 12px;font-size:12px;font-family:'DM Sans',sans-serif;color:#fff;outline:none;}
.footer-nl-btn{background:#fff;color:#000;border:none;padding:9px 16px;border-radius:4px;font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer;font-weight:500;}
.footer-whatsapp{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#25d366;}
.footer-bottom{border-top:0.5px solid #1a1a1a;padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:12px;color:#333;}
.footer-links-bottom{display:flex;gap:20px;flex-wrap:wrap;}
.footer-links-bottom a{font-size:12px;color:#333;text-decoration:none;}
.footer-links-bottom a:hover{color:#888;}

@media(max-width:768px){
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}