/* =========================================================
   ROOMSTYLE — woocommerce.css
   Habillage des pages Panier / Checkout / Mon compte (WooCommerce
   n'a pas de gabarit dans le prototype fourni — cohérence visuelle
   avec le reste du thème plutôt que recopie d'un design existant).
   ========================================================= */

/* Filet de sécurité : le thème n'a pas de gabarit dédié pour ces pages
   (elles passent par index.php, dont le <main class="section"> n'a pas
   de style propre en dehors de la homepage) — sans ça le contenu colle
   aux bords de l'écran. S'applique que WooCommerce utilise l'ancien
   système "shortcode" ou les nouveaux blocs Panier/Checkout. */
body.woocommerce-checkout main.section,
body.woocommerce-account main.section{
  max-width:1200px;margin:0 auto;padding:48px 40px;
}

.woocommerce{padding:48px 40px;max-width:1200px;margin:0 auto;}

/* La page Panier a maintenant sa propre mise en page (voir page-cart.css +
   woocommerce/cart/*.php) — plus besoin du wrapper grid 2-colonnes ici,
   ni de .woocommerce{padding...} sur cette page (nos templates ne sont
   même plus enveloppés dans .woocommerce). */

/* Bandeau hero (cohérent avec Products/Bundles/etc), utilisé par Mon compte */
.page-hero{background:#0a0a0a;padding:44px 40px;text-align:center;}
.page-hero-label{font-size:11px;letter-spacing:4px;color:#666;margin-bottom:10px;text-transform:uppercase;}
.page-hero-title{font-family:'Playfair Display',serif;font-size:38px;font-weight:700;color:#fff;}

/* Si le Checkout utilise le système de blocs natif de WooCommerce
   (plutôt que l'ancien shortcode) au lieu de rester à 100% de largeur.
   (Le Panier est repassé au shortcode classique — voir page-cart.php —
   donc plus besoin de règle équivalente pour .wp-block-woocommerce-cart.) */
.wp-block-woocommerce-checkout{
  max-width:1200px;margin:0 auto;padding:0 40px;
}
@media(max-width:768px){
  .wp-block-woocommerce-checkout{padding:0 20px;}
}
.woocommerce .page-title{font-family:'Playfair Display',serif;font-size:38px;font-weight:700;color:#0a0a0a;margin-bottom:32px;}

/* ── MESSAGES (erreurs, succès, infos) ── */
.woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-noreviews{
  background:#f7f7f5;border:0.5px solid rgba(0,0,0,0.08);border-left:3px solid #0a0a0a;
  border-radius:8px;padding:16px 20px;font-size:13px;color:#333;list-style:none;margin-bottom:24px;
}
.woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before,.woocommerce-noreviews::before{
  content:none!important;display:none!important;
}
.woocommerce-error{border-left-color:#cc3333;}
.woocommerce-message .button,.woocommerce-error .button{
  background:#0a0a0a;color:#fff;border-radius:6px;padding:8px 16px;font-size:12px;text-decoration:none;float:right;
}

/* Le style du Panier (table, coupon, cart_totals, bouton checkout) vit
   maintenant entièrement dans page-cart.css + woocommerce/cart/*.php. */

/* ── CHECKOUT ── */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
#customer_details{max-width:none;}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3{font-family:'Playfair Display',serif;font-size:20px;margin-bottom:16px;}
.woocommerce-checkout .form-row{margin-bottom:16px;}
.woocommerce-checkout label{font-size:12px;color:#666;display:block;margin-bottom:6px;letter-spacing:0.3px;}
.woocommerce-checkout input.input-text,.woocommerce-checkout select,.woocommerce-checkout textarea{
  width:100%;padding:11px 14px;border:0.5px solid #ddd;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:13px;color:#0a0a0a;
}
.woocommerce-checkout input.input-text:focus,.woocommerce-checkout select:focus{outline:none;border-color:#0a0a0a;}
#order_review{background:#f7f7f5;border-radius:12px;padding:28px;height:fit-content;}
#order_review h3{font-family:'Playfair Display',serif;font-size:20px;margin-bottom:16px;}
table.shop_table.woocommerce-checkout-review-order-table{width:100%;margin-bottom:20px;}
table.shop_table.woocommerce-checkout-review-order-table th,
table.shop_table.woocommerce-checkout-review-order-table td{padding:10px 0;font-size:13px;border-bottom:0.5px solid rgba(0,0,0,0.06);}
.woocommerce-checkout #payment{background:#fff;border-radius:8px;padding:16px;margin-top:16px;}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;}
.woocommerce-checkout #payment ul.payment_methods li{padding:10px 0;font-size:13px;border-bottom:0.5px solid rgba(0,0,0,0.06);}
#place_order{width:100%;background:#0a0a0a;color:#fff;border:none;padding:17px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:0.5px;margin-top:16px;}
#place_order:hover{background:#333;}

/* Espace entre le champ "note de commande" et le bloc coché juste avant */
.woocommerce-additional-fields{margin-top:24px;}
.woocommerce-additional-fields textarea{margin-top:8px;}

/* Espace entre une case à cocher et son texte (ex: "Add a note to your order",
   "create an account", etc.) — collés par défaut sans ce correctif */
.woocommerce-checkout input[type="checkbox"]{margin-right:8px;}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:8px;}
.wc-block-components-checkbox{gap:8px;}

/* Si le Checkout utilise le système de BLOCS WooCommerce (plus récent)
   plutôt que l'ancien shortcode, les sélecteurs ci-dessus (#place_order,
   .woocommerce-additional-fields) ne s'appliquent pas — on couvre aussi
   les classes du système de blocs pour le bouton et le champ note */
.wc-block-components-checkout-place-order-button{
  border-radius:8px!important;width:100%;background:#0a0a0a!important;padding:17px!important;
}
.wc-block-components-checkout-place-order-button:hover{background:#333!important;}
.wc-block-checkout__order-notes,
.wc-block-components-order-summary + *{margin-top:24px;}
.wc-block-components-textarea{margin-top:8px;border-radius:8px;}

/* ── MON COMPTE — navigation et mise en page 100% maison, dans l'esprit
   de la page Wishlist, plutôt que de restyler la structure par défaut
   de WooCommerce (qui a posé plusieurs soucis de mise en page). ── */
.account-shell{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;padding:56px 40px 80px;max-width:1100px;margin:0 auto;}
.account-shell--guest{display:block;}
.account-social-login{max-width:420px;margin:0 auto 24px;display:flex;flex-direction:column;align-items:center;}
.account-social-login *{float:none!important;}
.account-social-login .nextend-social-login-container{width:100%;}
.account-social-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#aaa;font-size:11px;letter-spacing:1px;text-transform:uppercase;width:100%;}
.account-social-divider::before,.account-social-divider::after{content:'';flex:1;height:0.5px;background:rgba(0,0,0,0.1);}
.account-nav{background:#fff;border:0.5px solid rgba(0,0,0,0.08);border-radius:16px;padding:12px;box-shadow:0 4px 28px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:2px;}
.account-nav-link{display:block;padding:12px 16px;border-radius:8px;color:#555;text-decoration:none;font-size:13px;letter-spacing:0.3px;transition:all 0.2s;}
.account-nav-link:hover{background:#f7f7f5;color:#0a0a0a;}
.account-nav-link.active{background:#0a0a0a;color:#fff;}
.account-panel{min-width:0;overflow-x:auto;}
/* Le footer chevauchait la nav du compte : les colonnes en inline-block
   ne calculaient pas correctement la hauteur du conteneur quand l'une
   est plus haute que l'autre. On passe en flexbox, scopé uniquement à
   notre propre conteneur (page-my-account.php), pas à .woocommerce-account
   qui est une classe posée sur le <body> — jamais y toucher directement. */
.woocommerce-form-login,.woocommerce-form-register{max-width:420px;margin:0 auto;}
.woocommerce-form-login .form-row,.woocommerce-form-register .form-row{margin-bottom:16px;}
.woocommerce-form-login input.input-text,.woocommerce-form-register input.input-text{
  width:100%;padding:12px 14px;border:0.5px solid #ddd;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:13px;
}
.woocommerce-form-login button,.woocommerce-form-register button,.woocommerce-Button{
  background:#0a0a0a;color:#fff;border:none;padding:14px 28px;border-radius:8px;font-size:13px;
  cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:0.5px;
}
.woocommerce-form-login button:hover,.woocommerce-form-register button:hover{background:#333;}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:12px;color:#666;}
.woocommerce-LostPassword a,.u-column2 a{font-size:12px;color:#0a0a0a;text-decoration:underline;}

/* Vue déconnectée : deux cartes côte à côte (Connexion / Inscription),
   au lieu des deux colonnes brutes par défaut de WooCommerce. */
.woocommerce-account:not(.logged-in) .u-columns.col2-set{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;
}
.woocommerce-account .u-column1,.woocommerce-account .u-column2{
  background:#fff;border:0.5px solid rgba(0,0,0,0.08);border-radius:16px;padding:36px 32px;box-shadow:0 4px 28px rgba(0,0,0,0.05);
}
.woocommerce-account .u-column1 h2,.woocommerce-account .u-column2 h2{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:700;margin-bottom:20px;color:#0a0a0a;
}
.woocommerce-form-login,.woocommerce-form-register{max-width:none;margin:0;}
.woocommerce-form-login button,.woocommerce-form-register button{width:100%;}

.woocommerce-orders-table{width:100%;border-collapse:collapse;}
.woocommerce-orders-table th{text-align:left;font-size:11px;letter-spacing:1px;color:#888;text-transform:uppercase;padding:12px 8px;border-bottom:0.5px solid rgba(0,0,0,0.1);}
.woocommerce-orders-table td{padding:14px 8px;font-size:13px;border-bottom:0.5px solid rgba(0,0,0,0.06);}
.woocommerce-orders-table .button{background:#0a0a0a;color:#fff;padding:6px 14px;border-radius:6px;font-size:11px;text-decoration:none;}

.account-panel .button{background:#0a0a0a;color:#fff;padding:10px 20px;border-radius:6px;font-size:12px;text-decoration:none;display:inline-block;}

/* Filet de sécurité : certaines icônes SVG des blocs WooCommerce (moyens
   de paiement enregistrés, etc.) s'affichent parfois sans contrainte de
   taille définie par leur propre CSS, et prennent alors toute la place
   disponible (gros carré coloré). On plafonne leur taille par sécurité. */
.woocommerce-account svg,
.account-panel svg{max-width:20px;max-height:20px;}

/* ── Formulaire "Account details" (nom, email, changement de mot de passe) ── */
.woocommerce-EditAccountForm{max-width:640px;}
.woocommerce-EditAccountForm .woocommerce-form-row{margin-bottom:18px;}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last{display:inline-block;width:calc(50% - 10px);}
.woocommerce-EditAccountForm .form-row-first{margin-right:20px;}
.woocommerce-EditAccountForm label{display:block;font-size:12px;font-weight:500;color:#0a0a0a;margin-bottom:8px;letter-spacing:0.3px;}
.woocommerce-EditAccountForm .woocommerce-Input{
  width:100%;padding:12px 14px;background:#f7f7f5;border:0.5px solid rgba(0,0,0,0.1);border-radius:8px;
  font-size:13px;font-family:'DM Sans',sans-serif;color:#0a0a0a;outline:none;transition:all 0.2s;
}
.woocommerce-EditAccountForm .woocommerce-Input:focus{border-color:#0a0a0a;background:#fff;box-shadow:0 0 0 3px rgba(10,10,10,0.05);}
.woocommerce-EditAccountForm span{display:block;font-size:11px;color:#999;margin-top:6px;}
.woocommerce-EditAccountForm fieldset{border:0.5px solid rgba(0,0,0,0.08);border-radius:12px;padding:24px;margin:28px 0;}
.woocommerce-EditAccountForm fieldset legend{
  font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#0a0a0a;padding:0 8px;margin-left:-8px;
}
.woocommerce-EditAccountForm .button{
  background:#0a0a0a;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:13px;font-weight:500;
  letter-spacing:0.5px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s;
}
.woocommerce-EditAccountForm .button:hover{background:#333;}
.wc-block-components-payment-method-icons{display:flex;align-items:center;gap:6px;}
.wc-block-components-payment-method-icons img,
.wc-block-components-payment-method-icons svg{width:auto;height:20px;max-width:32px;}
.woocommerce-address-fields .form-row{margin-bottom:14px;}
.woocommerce-address-fields input.input-text,.woocommerce-address-fields select{
  width:100%;padding:10px 14px;border:0.5px solid #ddd;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:13px;
}

/* ── ÉLÉMENTS À NE PAS AFFICHER (redondants avec notre nav) ── */
.woocommerce-breadcrumb{display:none;}

/* Tout ce qui suivait ici (regroupement Bundle/World/Space, en-tête panier,
   confiance, WhatsApp/continue/paiement, panier vide, "you may also like")
   était spécifique à l'ancien panier restylé par-dessus le bloc natif.
   Ça vit maintenant dans page-cart.css + woocommerce/cart/*.php. */

@media(max-width:1024px){
  .woocommerce-checkout .col2-set{grid-template-columns:1fr;}
  .woocommerce-account:not(.logged-in) .u-columns.col2-set{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .woocommerce{padding:32px 20px;}
  body.woocommerce-checkout main.section,
  body.woocommerce-account main.section{padding:32px 20px;}
  .woocommerce .page-title{font-size:26px;}
  .account-shell{grid-template-columns:1fr;}
  .account-nav{margin-bottom:24px;}
  .woocommerce-orders-table{font-size:12px;}
  .account-shell{padding:32px 20px 60px;}
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-EditAccountForm .form-row-last{display:block;width:100%;margin-right:0;}
  .woocommerce-account .u-column1,.woocommerce-account .u-column2{padding:26px 22px;}
}