/* ============================================================
   EVIDECO 2026 — Intégration Divi + WooCommerce
   (le design vit dans mockup.css ; ici : raccords avec Divi/WC)
   ============================================================ */

/* --- Neutraliser le chrome header/footer par défaut de Divi --- */
#top-header { display: none !important; }
#page-container { padding-top: 0 !important; }
/* le header Divi #main-header est remplacé par notre .site-header via filtre */

/* Divi enveloppe le contenu ; on laisse notre fond de page passer */
#et-main-area, #main-content, .et_pb_row { background: transparent; }
body #page-container { background: var(--bg); }

/* --- WooCommerce : raccords sur le design system --- */
.woocommerce span.price, .woocommerce .price { color: var(--ink); font-weight: 600; }
.woocommerce span.price del, .woocommerce .price del { color: var(--muted); font-weight: 400; }
.woocommerce span.price ins, .woocommerce .price ins { color: var(--sale); text-decoration: none; }

.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: var(--primary); color: #fff; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; letter-spacing: .01em;
  padding: 12px 24px; border: none; transition: background .18s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover { background: var(--primary-dark); }

.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--star); }

/* évite un scroll quand le drawer mobile est ouvert */
body.no-scroll { overflow: hidden; }

/* ============================================================
   CATALOGUE — compléments au mockup (classes absentes de mockup.css)
   ============================================================ */
.muted { color: var(--muted); }

/* Pastilles couleur : le mockup utilisait des <button> décoratifs ; ici ce sont
   de vraies cases à cocher masquées dans un <label>, pour un form sans JS. */
.filters .swatch { display: inline-block; position: relative; }
.filters .swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filters .swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--primary); }

/* Chips de filtres actifs : rendus en <a> (cliquer = retirer le filtre) */
.active-filters .chip { text-decoration: none; cursor: pointer; }

.catalog-sort { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }

.empty-state {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.empty-state h2 { font-family: var(--font-display); margin-bottom: var(--sp-3); }
.empty-state p { color: var(--muted); margin-bottom: var(--sp-5); }

/* paginate_links rend des <a>/<span> : neutralise le soulignement de lien Divi */
.pagination .page-btn { text-decoration: none; }

/* ============================================================
   FICHE PRODUIT — compléments au mockup
   (le mockup utilisait des placeholders .ph qui portaient l'aspect-ratio ;
   avec de vraies images il faut le poser sur les <img>)
   ============================================================ */
.pdp-main img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pdp-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.pdp-lead { color: var(--text); font-size: .96rem; margin-bottom: var(--sp-4); }
.pdp-lead p { margin: 0 0 var(--sp-2); }

.pdp-stock-out { color: var(--sale); }
.pdp-stock-out .dot { background: var(--sale); }

/* le formulaire WC porte .buy-row : neutralise les marges de form Divi */
form.cart.buy-row { margin-bottom: var(--sp-3); }
.qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty input[type="number"]::-webkit-outer-spin-button,
.qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.acc-panel table { margin: 0; }

/* ============================================================
   PANIER — compléments au mockup
   ============================================================ */
.cart-line-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); }
.catalog-hero .hero-count { font-size: .55em; color: var(--muted); font-family: var(--font-body); font-weight: 600; }

.cart-line-warn { color: var(--sale) !important; font-weight: 600; }
.qty-fixed { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 38px; border: 1.5px solid var(--border); border-radius: var(--r-pill); font-weight: 700; }

.link-remove { cursor: pointer; }
a.link-remove { color: var(--muted); }

.summary-rows .is-free { color: var(--success); font-weight: 600; }

.cart-update-row { padding-top: var(--sp-4); }
/* Avec JS, la quantité déclenche la mise à jour : le bouton n'est qu'un fallback. */
.evd-js .cart-update-row { display: none; }

.pay-methods-inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pay-methods-inline .pay-chip { background: var(--surface-warm); }

.summary-card .btn-block { margin-top: var(--sp-2); }

/* ============================================================
   PAGES WC (panier / checkout / compte) rendues par page.php de Divi
   → on neutralise la sidebar, le titre de page et le gabarit étroit,
     et on restyle les notices WooCommerce sur le design system.
   ============================================================ */
.woocommerce-cart #sidebar,
.woocommerce-checkout #sidebar,
.woocommerce-account #sidebar { display: none; }

.woocommerce-cart #left-area,
.woocommerce-checkout #left-area,
.woocommerce-account #left-area { width: 100%; padding-right: 0; padding-bottom: 0; }

/* ⚠️ Collision de noms : Divi possède DÉJÀ une classe .container (max-width 1080px).
   Sur ces pages nos templates sont imbriqués dans celui de Divi → notre .container
   héritait de 80% de 1080px, soit ~700px de contenu utile. On élargit le conteneur
   Divi et on neutralise le nôtre à l'intérieur. */
.woocommerce-cart #main-content > .container,
.woocommerce-checkout #main-content > .container,
.woocommerce-account #main-content > .container,
.evd-wishlist-page #main-content > .container {
  width: 100%; max-width: var(--container-max);
  padding-left: var(--sp-5); padding-right: var(--sp-5);
}
/* ⚠️ Selecteur en descendant, PAS en enfant direct : la structure reelle est
   #left-area > article.entry-content > .container. La version `>` de cette
   regle ne matchait donc rien — verifie au probe (padding-left mesure a 16px
   alors qu'elle demandait 0). */
.woocommerce-cart #left-area .container,
.woocommerce-checkout #left-area .container,
.woocommerce-account #left-area .container,
.evd-wishlist-page #left-area .container {
  width: 100%; max-width: none; padding-left: 0; padding-right: 0;
}

/* Divi imprime déjà un titre de page ; nos templates ont leur propre <h1>. */
.woocommerce-cart #left-area > .entry-title,
.woocommerce-checkout #left-area > .entry-title,
.woocommerce-cart .main_title,
.woocommerce-checkout .main_title,
/* ⚠️ PAS de `.evd-wishlist-page .entry-title` ici : contrairement au panier,
   ce gabarit est celui de YITH et n'apporte AUCUN <h1>. Masquer le titre Divi
   laissait la page sans titre de niveau 1. On masque le doublon du plugin. */

/* Divi style .woocommerce-message avec son bleu #2ea3f2 et une forte spécificité :
   il faut donc surcharger explicitement, sinon la notice reste bleue. */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error,
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin: 0 0 var(--sp-5) !important;
  color: var(--text) !important;
  font-size: .93rem;
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-error::before { content: none !important; }

body.woocommerce-page .woocommerce-message { border-left-color: var(--success) !important; }
body.woocommerce-page .woocommerce-error   { border-left-color: var(--sale) !important; }

body.woocommerce-page .woocommerce-message .button,
body.woocommerce-page .woocommerce-info .button,
body.woocommerce-page .woocommerce-error .button {
  margin-left: auto;
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  padding: 9px 18px !important;
  font-size: .85rem;
}

/* ============================================================
   CHECKOUT — raccord des champs NATIFS WooCommerce sur le look .field
   du mockup. On ne réécrit pas le markup des champs : le JS de locale
   WooCommerce (pays → états, format de code postal) en dépend.
   ============================================================ */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details { display: block; width: 100%; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; margin: 0; }
.woocommerce-checkout #customer_details .col-2 { margin-top: var(--sp-5); }

.woocommerce-checkout .form-card h3 {
  font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--sp-3);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
}
@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }
}

/* WooCommerce marque ville/état/ZIP/téléphone en form-row-wide ; la maquette les
   veut sur deux colonnes. On les repasse en colonne simple. */
@media (min-width: 640px) {
  .woocommerce-checkout #billing_city_field,
  .woocommerce-checkout #billing_state_field,
  .woocommerce-checkout #billing_postcode_field,
  .woocommerce-checkout #billing_phone_field,
  .woocommerce-checkout #shipping_city_field,
  .woocommerce-checkout #shipping_state_field,
  .woocommerce-checkout #shipping_postcode_field { grid-column: auto; }
}

.woocommerce-checkout p.form-row { margin: 0; padding: 0; float: none; width: auto; }
.woocommerce-checkout .form-row label {
  display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.woocommerce-checkout .form-row label .required { color: var(--sale); text-decoration: none; border: none; }
/* Divi impose un fond gris #eee sur les inputs via #left-area : on surcharge. */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout #left-area .form-row input[type="text"],
body.woocommerce-checkout #left-area .form-row input[type="email"],
body.woocommerce-checkout #left-area .form-row input[type="tel"],
body.woocommerce-checkout #left-area .form-row textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important;
  background: var(--bg) !important; font-size: .95rem; font-family: var(--font-body); color: var(--ink);
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface);
}
.woocommerce-checkout .form-row textarea { min-height: 96px; }
.woocommerce-checkout .woocommerce-input-wrapper { width: 100%; display: block; }

/* select2 (pays / état) aligné sur les autres champs */
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto; padding: 6px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; color: var(--ink); }

/* Cases à cocher (« ship to a different address », conditions) */
.woocommerce-checkout .form-row.woocommerce-validated .input-text { border-color: var(--border); }
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem;
}
/* Cases à cocher : la règle ne visait que le checkout, la case « Remember me »
   de la page de connexion restait donc native et minuscule. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account input[type="checkbox"],
.woocommerce-cart input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }

/* Moyens de paiement → look .radio-card du mockup C.
   Le markup reste NATIF (`checkout/payment.php` n'est pas surchargé) : `#payment`
   est la clé de fragment que le JS WooCommerce remplace à chaque rafraîchissement
   AJAX du checkout — la remplacer casserait la mise à jour en silence.
   ⚠️ Spécificité : WooCommerce cible `.woocommerce-checkout #payment …` (1,2,x).
   On préfixe par `body` et on qualifie les classes pour passer devant SANS
   `!important` (même méthode que pour le padding-top de Divi). */
body.woocommerce-checkout #payment,
body.woocommerce-cart #payment { background: none; border-radius: 0; padding: 0; }

body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; margin: 0; padding: 0; border-bottom: none;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: var(--sp-3); line-height: 1.5;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin: 0 0 var(--sp-3);
  transition: border-color .15s, background .15s;
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover { border-color: var(--muted); }

/* 🔴 WooCommerce pose un clearfix `li::before`/`li::after` (`content:" "`).
   Dans un conteneur `display:grid`, un pseudo-élément DEVIENT UN ITEM DE GRILLE :
   il occupait la première cellule et renvoyait le bouton radio sur une ligne à
   part, au-dessus du libellé. Le neutraliser est indispensable, pas cosmétique. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after { content: none; }

/* WooCommerce n'ajoute AUCUNE classe sur la passerelle choisie : on lit la case. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--primary); background: var(--primary-soft);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio {
  width: 18px; height: 18px; accent-color: var(--primary); margin: 0;
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0; cursor: pointer;
  font-weight: 700; color: var(--ink); font-size: .95rem;
  /* `min-width: 0` : sans lui la colonne 1fr est dimensionnée par le contenu
     MINIMAL du libellé (titre + pastilles indivisibles) et les pistes de la
     grille débordent la carte — visible dès 320px. Même piège que les 7 layouts
     du thème (QA du 31/07). `flex-wrap` fait retomber les pastilles à la ligne. */
  min-width: 0; flex-wrap: wrap; row-gap: var(--sp-2);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .rc-logos { flex-wrap: wrap; row-gap: var(--sp-2); }
/* Pastilles de marque (rendues par `get_icon()`) ou logo image des vraies passerelles. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .rc-logos { margin-left: auto; }
/* Les pastilles sont blanches sur fond blanc dans la maquette (surface warm) :
   un filet les rend lisibles sur une carte non sélectionnée. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .pay-chip {
  border: 1px solid var(--border);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
  margin: 0 0 0 auto; max-height: 24px; width: auto; float: none;
}

/* Volet de la passerelle sélectionnée : pleine largeur de la carte. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box {
  grid-column: 1 / -1; width: auto;
  background: none; color: var(--text); font-size: .88rem;
  border-top: 1px solid var(--border); border-radius: 0;
  margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box::before { content: none; }
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box p:last-child { margin-bottom: 0; }

/* Cartes enregistrées — Stripe les affiche à un client déjà venu. */
body.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods { margin: 0 0 var(--sp-3); padding: 0; }
body.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods label { font-weight: 600; font-size: .9rem; }

body.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: var(--sp-4) 0 0; }
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-3); font-size: .86rem; }

.woocommerce-checkout #place_order {
  width: 100%; margin-top: var(--sp-4);
  background: var(--primary); color: #fff; border: none; border-radius: var(--r-pill);
  padding: 15px 24px; font-family: var(--font-body); font-weight: 700; font-size: 1rem;
}
.woocommerce-checkout #place_order:hover { background: var(--primary-dark); }

/* Récapitulatif : le <table> reste requis pour l'AJAX, on neutralise son apparence */
.os-table { width: 100%; border-collapse: collapse; }
.os-table td.os-cell { padding: 0; border: none; }
.os-line img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); }
.os-line .os-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.os-table tfoot td { padding: 0; border: none; }
.os-table .summary-rows { border-top: 1px solid var(--border); }

.row-shipping { flex-direction: column; align-items: flex-start; gap: 6px; }
.row-shipping .shipping-label { font-weight: 600; }
.row-shipping ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.row-shipping li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.row-shipping .shipping-hint { color: var(--muted); font-size: .84rem; }

/* ============================================================
   CONFIRMATION DE COMMANDE (pas de vue dédiée dans le mockup :
   composée avec les briques du design system)
   ============================================================ */
.confirm-hero { text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-7); }
.confirm-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: var(--sp-3); }
.confirm-hero p { color: var(--text); max-width: 54ch; margin: 0 auto; }
.confirm-hero.is-failed h1 { color: var(--sale); }

.confirm-check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4);
}
.confirm-check svg { width: 28px; height: 28px; }

.confirm-overview {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-5);
  background: var(--surface-warm); border-radius: var(--r-md);
}
@media (min-width: 768px) { .confirm-overview { grid-template-columns: repeat(4, 1fr); } }
.confirm-overview li { display: flex; flex-direction: column; gap: 4px; }
.confirm-overview .ov-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.confirm-overview .ov-value { font-weight: 700; color: var(--ink); }

.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: var(--sp-6) 0 var(--sp-4); }

.order-lines { border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.order-lines .os-line:last-child { border-bottom: none; }
.order-details-card .summary-rows .is-total { font-size: 1.05rem; font-weight: 700; color: var(--ink); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.order-note { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--surface-warm); border-radius: var(--r-sm); font-size: .9rem; }
.purchase-note { display: block; margin-top: 4px; }

.address-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px) { .address-grid { grid-template-columns: 1fr 1fr; } }
.address-block h3 {
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2);
}
.address-block address { font-style: normal; line-height: 1.7; color: var(--text); font-size: .93rem; }
.address-block .addr-line { display: block; }

/* ============================================================
   ESPACE CLIENT (pas de vue dédiée dans le mockup)
   ============================================================ */
.account-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .account-layout { grid-template-columns: 260px 1fr; gap: var(--sp-7); } }

.account-nav-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 1024px) { .account-nav-card { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

.account-ident { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--surface-warm); }
.account-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.account-avatar svg { width: 19px; height: 19px; }
.account-ident-text { display: flex; flex-direction: column; min-width: 0; }
.account-hello { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.account-ident-text strong { color: var(--ink); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-menu { list-style: none; margin: 0; padding: 0; }
.account-menu li { border-top: 1px solid var(--border); }
.account-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 13px var(--sp-5); color: var(--text); font-size: .93rem; font-weight: 600; text-decoration: none;
}
.account-menu li a:hover { background: var(--bg); color: var(--ink); }
.account-menu li a .chev { width: 13px; height: 13px; color: var(--muted); flex: none; }
.account-menu li.is-active a { color: var(--primary-dark); background: var(--primary-soft); }
.account-menu li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }

.account-content > p:first-child { margin-top: 0; }

/* Connexion / inscription */
.login-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .login-layout.has-register { grid-template-columns: 1fr 1fr; } }
.login-layout .form-card { margin-bottom: 0; }
.login-layout .form-row { margin: 0 0 var(--sp-4); }
.login-layout .form-row label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.login-layout .form-row .required { color: var(--sale); }
.login-layout .form-row .input-text {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important;
  background: var(--bg) !important; font-size: .95rem; font-family: var(--font-body); color: var(--ink);
}
.login-layout .form-row .input-text:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.login-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.login-remember { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; margin: 0; }
.login-layout .help { font-size: .84rem; color: var(--muted); }

/* Tableaux WooCommerce de l'espace client (commandes, téléchargements) */
.account-content .woocommerce-orders-table,
.account-content .shop_table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: .92rem;
}
.account-content .shop_table th {
  text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--surface-warm);
  font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.account-content .shop_table td { padding: var(--sp-4); border-top: 1px solid var(--border); vertical-align: middle; }
.account-content .shop_table .button {
  display: inline-block; background: var(--primary); color: #fff; border-radius: var(--r-pill);
  padding: 8px 16px; font-size: .82rem; font-weight: 600; text-decoration: none;
}
.account-content .woocommerce-Address { margin-bottom: var(--sp-5); }
.account-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.account-content address { font-style: normal; line-height: 1.7; color: var(--text); }

/* WooCommerce encadre form.login / form.register par défaut : on neutralise,
   la carte .form-card fournit déjà le cadre. */
.woocommerce form.login,
.woocommerce form.register,
.login-layout form.login,
.login-layout form.register {
  border: none !important; padding: 0 !important; border-radius: 0 !important; margin: 0 !important;
}

/* ============================================================
   404 + RECHERCHE
   ============================================================ */
.error-404 { max-width: 640px; margin: 0 auto var(--sp-7); }
.error-404 h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--sp-2) 0 var(--sp-3); }
.error-404-search { display: flex; gap: var(--sp-2); margin: var(--sp-5) 0; }
.error-404-search input {
  flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--bg); font-size: .95rem;
}
.error-404-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: 0; }

.search-page-form { display: flex; gap: var(--sp-2); max-width: 520px; margin-bottom: var(--sp-6); }
.search-page-form input {
  flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--bg); font-size: .95rem;
}

.search-results { display: flex; flex-direction: column; gap: var(--sp-5); }
.search-hit { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .search-hit { grid-template-columns: 110px 1fr; } }
/* 🔴 Sans image a la une, `.search-hit-body` est le SEUL enfant de la grille :
   il tombait donc dans la colonne de 110px et le texte s'affichait en ruban.
   Defaut preexistant de search.php, rendu visible par le bloc « ailleurs sur
   le site » (pages et articles n'ont pas tous de vignette). */
@media (min-width: 640px) {
  .search-hit:not(:has(.search-hit-media)) { grid-template-columns: 1fr; }
}
.search-hit-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); }
.search-hit-body h2 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 4px 0 6px; }
.search-hit-body p { color: var(--text); font-size: .92rem; margin: 0; }

/* ── Pages de contenu (template-content.php : About, Shipping, Returns, FAQ, Terms) ── */
.content-page { padding-bottom: var(--sp-8); }
.content-hero { max-width: 760px; margin: 0 auto var(--sp-6); text-align: center; padding-top: var(--sp-4); }
.content-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--accent); margin: 0 0 var(--sp-2); }
.content-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: 0; color: var(--ink); }
.content-lead { font-size: 1.1rem; color: var(--text); margin: var(--sp-3) 0 0; line-height: 1.6; }
.content-prose { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 1.02rem; line-height: 1.75; }
.content-prose > *:first-child { margin-top: 0; }
.content-prose h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--ink); margin: var(--sp-7) 0 var(--sp-3); }
.content-prose h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin: var(--sp-6) 0 var(--sp-2); }
.content-prose h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: var(--sp-5) 0 var(--sp-2); }
.content-prose p { margin: 0 0 var(--sp-4); }
.content-prose ul, .content-prose ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.content-prose li { margin-bottom: var(--sp-2); }
.content-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.content-prose a:hover { color: var(--accent); }
.content-prose strong { color: var(--ink); }
.content-prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
.content-prose blockquote { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); border-left: 3px solid var(--accent); background: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: italic; }
.content-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); }
.content-prose th, .content-prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.content-prose th { color: var(--ink); font-weight: 700; }
.content-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* FAQ — accordéon natif details/summary */
.content-prose details.evd-q { border-bottom: 1px solid var(--border); padding: var(--sp-4) 0; }
.content-prose details.evd-q > summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.content-prose details.evd-q > summary::-webkit-details-marker { display: none; }
.content-prose details.evd-q > summary::after { content: "+"; font-size: 1.5rem; color: var(--accent); line-height: 1; flex: 0 0 auto; }
.content-prose details.evd-q[open] > summary::after { content: "\2013"; }
.content-prose details.evd-q > *:not(summary) { margin-top: var(--sp-3); margin-bottom: 0; }

/* Bandeau de contact en pied de page de contenu */
.content-cta { max-width: 760px; margin: var(--sp-7) auto 0; padding: var(--sp-5); background: var(--primary-soft); border-radius: var(--r-md); text-align: center; }
.content-cta h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0 0 var(--sp-2); }
.content-cta p { margin: 0 0 var(--sp-4); color: var(--text); }

.footer-col .footer-hours { color: var(--muted); font-size: .9rem; }

/* Newsletter footer — box (form + message) & feedback */
.newsletter-box { width: 100%; max-width: 460px; }
.newsletter-box .newsletter-form { max-width: none; }
.newsletter-msg { margin: var(--sp-3) 0 0; font-size: .9rem; line-height: 1.5; }
.newsletter-msg--ok { color: #9FCB9B; }
.newsletter-msg--err { color: #E6A08F; }

/* Boutons dans la prose : ne pas hériter du style lien (bleu souligné) */
.content-prose a.btn { color: #fff; text-decoration: none; }
.content-prose a.btn:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Méga-menu / drawer / rayons — câblage sur la vraie taxonomie product_cat
   La maquette C supposait 5 rayons ; evideco en a 7 non vides. En 5 colonnes
   la 2e ligne n'en portait plus que 2, d'où le passage à 4 (4 + 3).
   --------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .mega-inner { grid-template-columns: repeat(4, 1fr); }
}

/* Les titres de colonne deviennent des liens vers l'archive du rayon. */
.mega-col h4 a { color: inherit; text-decoration: none; }
.mega-col h4 a:hover { color: var(--dept, var(--primary)); }
.drawer-group h5 a { color: inherit; text-decoration: none; }
.drawer-group .drawer-more { color: var(--primary); font-weight: 700; }

/* Noms de catégorie réels : bien plus longs que ceux de la maquette
   (« Storage Baskets & Countertop Organizers », « Toilet Paper Holders &
   Dispensers »…). On autorise le retour à la ligne au lieu de déborder. */
.mega-col a { line-height: 1.35; }
.cat-chip { white-space: nowrap; }

/* Drawer : .drawer-nav est en flex-column, mais ses liens sont désormais
   regroupés par rayon dans des .drawer-group (blocs) — les <a> redevenaient
   donc inline et s'enchaînaient sur la même ligne. On refait des colonnes. */
.drawer-group { display: flex; flex-direction: column; }
.drawer-group h5 { line-height: 1.3; }
.drawer-group .drawer-more { border-bottom: 0; }
/* Le titre de groupe est devenu un lien : .drawer-nav a lui collait son
   border-bottom, qui barrait les titres passant sur deux lignes. */
.drawer-group h5 a { border-bottom: 0; display: inline; }

/* ============================================================
   IMAGES D'AMBIANCE (home) — remplacent les placeholders .ph
   Le .ph portait l'aspect-ratio ; avec de vraies <img> il faut
   le reposer, sinon la photo carrée casse la mise en page.
   ============================================================ */
.scene { display: block; width: 100%; object-fit: cover; border-radius: var(--r-lg); }

/* sources carrées 2000x2000 : le recadrage 16/10 doit garder les tapis,
   qui sont dans le bas de l'image — d'où l'object-position basse. */
.scene-hero { aspect-ratio: 16 / 10; object-position: 50% 62%; box-shadow: var(--shadow-lg); }
.scene-edito { aspect-ratio: 4 / 3; object-position: 50% 50%; }

/* ============================================================
   JOURNAL (blog) — index, archives de catégorie, article
   Vues absentes du mockup C : composées avec les briques du
   design system (content-hero, cat-chip, page-btn, content-prose).
   ============================================================ */

/* Barre de catégories de l'index (mêmes pastilles que la chip-bar du header,
   sans la couleur de rayon : les catégories d'articles n'en ont pas). */
.journal-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: 0 auto var(--sp-7); max-width: 900px; }
.journal-cats .cat-chip { background: var(--surface); }
.journal-cats .cat-chip.is-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.journal-cats .cat-chip .muted { font-size: .78rem; }
.journal-cats .cat-chip.is-current .muted { color: rgba(251,249,244,.65); }

/* --- Article vedette (index, page 1 seulement) --- */
.post-feature {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: var(--sp-8); box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .post-feature { grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; } }
.post-feature-media { display: block; }
/* Le .ph de repli porte son propre aspect-ratio ; l'<img> réelle doit recevoir
   le même traitement, sinon une source carrée déforme la carte. */
.post-feature-img, .post-feature-media .ph { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 0; }
@media (min-width: 900px) { .post-feature-img, .post-feature-media .ph { aspect-ratio: auto; min-height: 340px; } }
.post-feature-body { padding: var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); justify-content: center; }
.post-feature-body h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 0; }
.post-feature-body h2 a { color: var(--ink); }
.post-feature-body h2 a:hover { color: var(--primary); }
.post-feature-excerpt { color: var(--text); line-height: 1.65; margin: 0; }

/* --- Grille de cartes --- */
.post-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 560px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card-media { display: block; }
.post-card-img, .post-card-media .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.post-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post-card-cat {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.post-card-cat:hover { color: var(--primary); }
.post-card-title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25; margin: 0; }
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--primary); }
.post-card-excerpt { font-size: .9rem; color: var(--text); line-height: 1.6; margin: 0; }
.post-card-meta { margin: auto 0 0; padding-top: var(--sp-2); font-size: .8rem; color: var(--muted); }
.post-card-meta .sep { margin: 0 6px; color: var(--border); }

/* --- Article --- */
.article { padding-bottom: var(--sp-6); }
.article-hero { max-width: 760px; margin: 0 auto var(--sp-6); text-align: center; padding-top: var(--sp-4); }
.article-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.14; margin: 0; color: var(--ink); }
.article-hero .content-eyebrow a { color: inherit; }
.article-hero .content-eyebrow a:hover { color: var(--primary); }
.article-meta { margin: var(--sp-3) 0 0; font-size: .88rem; color: var(--muted); }
.article-meta .sep { margin: 0 6px; color: var(--border); }

.article-media { margin: 0 0 var(--sp-6); }
.article-img { display: block; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }

/* Les articles historiques embarquent des images en pleine largeur avec des
   attributs de taille inline : on les recadre pour tenir la colonne de lecture. */
.article-prose img { display: block; height: auto; margin: var(--sp-5) auto; }
.article-prose iframe, .article-prose video { max-width: 100%; margin: var(--sp-5) auto; display: block; }
.article-prose figure { margin: var(--sp-5) 0; }
.article-prose figcaption { font-size: .85rem; color: var(--muted); text-align: center; margin-top: var(--sp-2); }

/* --- Précédent / suivant --- */
.article-nav {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  margin: var(--sp-7) auto 0; max-width: 960px;
  padding-top: var(--sp-5); border-top: 1px solid var(--border);
}
@media (min-width: 700px) { .article-nav { grid-template-columns: 1fr 1fr; } }
.article-nav-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.article-nav-link:hover { border-color: var(--ink); }
.article-nav-next { text-align: right; }
.article-nav-dir { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.article-nav-title { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; color: var(--ink); }

/* La carte vedette réutilise .post-card-meta, dont le `margin-top:auto` sert à
   coller la date en bas des cartes de grille — ici il creusait un trou entre
   l'extrait et la date. */
.post-feature-body .post-card-meta { margin: 0; padding-top: 0; }

/* ============================================================
   CONTACT — vue absente du mockup C, composée avec le design system.
   Le formulaire est du Contact Form 7 : on n'en change pas le markup
   (son JS de validation en dépend), tout le look est en CSS.
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-8); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.35fr 1fr; gap: var(--sp-7); } }

.contact-form-card, .contact-info, .contact-links {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.contact-form-card h2, .contact-info h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 0 0 var(--sp-2); }
.contact-form-card > .muted { margin: 0 0 var(--sp-5); font-size: .92rem; }
.contact-side { display: flex; flex-direction: column; gap: var(--sp-5); }

/* --- Coordonnées --- */
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-list li { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.contact-label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-list a { color: var(--primary); }
.contact-list a:hover { color: var(--accent); }
.contact-list address { font-style: normal; line-height: 1.6; }

.contact-links h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-1); }
.contact-links > .muted { margin: 0 0 var(--sp-4); font-size: .9rem; }
.contact-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-links li + li { border-top: 1px solid var(--border); }
.contact-links a { display: block; padding: var(--sp-3) 0; color: var(--ink); font-weight: 500; }
.contact-links a:hover { color: var(--primary); }

/* --- Contact Form 7 : habillage sans toucher au markup ---
   Divi impose un fond gris #eee et ses propres bordures aux champs via #left-area,
   d'où les sélecteurs redondants et quelques !important (même situation que le
   checkout). */
.contact-form-card .wpcf7 form > p { margin: 0 0 var(--sp-4); }
.contact-form-card .wpcf7-form-control-wrap { display: block; }
.contact-form-card label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea,
#left-area .contact-form-card input[type="text"],
#left-area .contact-form-card input[type="email"],
#left-area .contact-form-card textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px var(--sp-4);
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
}
.contact-form-card textarea { min-height: 170px; resize: vertical; }
.contact-form-card input:focus, .contact-form-card textarea:focus {
  outline: none; border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.contact-form-card input[type="submit"],
#left-area .contact-form-card input[type="submit"] {
  display: inline-block; width: auto;
  padding: 14px 32px;
  background: var(--primary) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--r-pill) !important;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: background .18s ease;
}
.contact-form-card input[type="submit"]:hover { background: var(--primary-dark) !important; }

/* Messages de validation CF7 : on reprend les couleurs du design system plutôt
   que le rouge/vert par défaut du plugin. */
.contact-form-card .wpcf7-not-valid-tip { color: var(--sale); font-size: .82rem; margin-top: 4px; }
.contact-form-card .wpcf7-response-output {
  margin: var(--sp-4) 0 0 !important; padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r-sm); border-width: 1px !important; font-size: .92rem;
}
.contact-form-card .wpcf7-mail-sent-ok { border-color: var(--success) !important; color: var(--success); background: #EFF5EE; }
.contact-form-card .wpcf7-validation-errors,
.contact-form-card .wpcf7-acceptance-missing { border-color: var(--sale) !important; color: var(--sale); background: #FBEEEA; }

.contact-extra { margin-top: var(--sp-7); }

/* ============================================================
   ZOOM GALERIE PRODUIT (remplace yith-zoom-magnifier)
   .pdp-main porte déjà position:relative + overflow:hidden (mockup.css),
   et son .badge est en z-index 2 : la loupe reste dessous.
   ============================================================ */
.pdp-main.has-zoom { cursor: zoom-in; }
.pdp-main.is-zooming { cursor: zoom-out; touch-action: none; }

.pdp-zoom {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-color: var(--surface, #fff);
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
}
.pdp-main.is-zooming .pdp-zoom { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.pdp-zoom { transition: none; }
}

/* ============================================================
   RESPONSIVE — raccords Divi et grilles
   ============================================================ */

/* Divi declare `.container { width: 80% }` et notre regle de mockup.css ne
   posait que max-width/padding : le 80% survivait donc PARTOUT. Consequence
   mesuree : a 1280px de viewport le contenu tombait a 1012px au lieu des 1240
   du design (-18%), et sur mobile on perdait 37px de marge de chaque cote au
   lieu des 16px de padding voulus. On reprend la main sur la largeur. */
.container { width: 100%; }

/* Un item de grille ne peut pas devenir plus etroit que son contenu tant que
   `min-width` vaut `auto`. Le formulaire Contact Form 7 a une largeur
   intrinseque (~304px, imposee par les `cols` du textarea) : sans ce
   min-width:0 la carte forcait 370px dans une colonne de 268 et faisait
   deborder la page de 49px sur mobile. */
.account-layout > *,
.cart-layout > *,
.catalog-layout > *,
.checkout-layout > *,
.contact-layout > *,
.login-layout > *,
.pdp-layout > *,
.contact-form-card .wpcf7,
.contact-form-card .wpcf7 form { min-width: 0; }

/* Le widget reCAPTCHA de Contact Form 7 est un iframe de 304px de large qui ne
   retrecit pas : sous ~330px de viewport (iPhone SE) il faisait deborder la
   page de 28px. Garde standard sur tout media integre. */
/* MEDIAS INTEGRES */
iframe, embed, object, video { max-width: 100%; }

/* --- reCAPTCHA sur petit ecran ---
   Le widget Google mesure 304x78 px en dur : ni `width` ni `max-width` ne le
   contraignent, car il est pose sur un wrapper injecte en JS avec une largeur
   fixe. Sous ~380px de viewport il debordait la page. La mise a l'echelle est
   la seule prise possible sans toucher au markup du plugin ; on reduit aussi
   la hauteur du conteneur, que `transform` ne change pas. */
@media (max-width: 379px) {
	.contact-form-card .wpcf7-recaptcha { display: block; height: 60px; overflow: hidden; }
	.contact-form-card .wpcf7-recaptcha > div { transform: scale(.75); transform-origin: 0 0; }
}

/* ============================================================
   CIBLES TACTILES (mobile)
   ============================================================ */

/* Le drawer est un flex-column : quand son contenu depasse la hauteur d'ecran,
   les items se font comprimer sur l'axe principal. Le bouton de fermeture,
   pourtant declare en 42x42 par .icon-btn, tombait ainsi a 21px de haut —
   la cible la plus critique du menu mobile. */
.drawer-close { flex-shrink: 0; }

/* Ces deux liens sont de la navigation, pas du texte courant : ils doivent etre
   confortables au doigt. On etend la zone tactile par un pseudo-element plutot
   qu'avec du padding, pour ne pas deplacer la mise en page ni grossir le
   libelle (le design les veut discrets). */
.section-head .link-all,
.dept-head .link-all,
.post-card-cat { position: relative; }

.section-head .link-all::after,
.dept-head .link-all::after,
.post-card-cat::after {
	content: ""; position: absolute; inset: -12px -8px;
}

/* --- Banniere promotionnelle Amazon Pay ---
   `.amazon_banner_display` (plugin Amazon Pay) est une image a ratio fixe : sa
   hauteur suit sa largeur. Mesure : 48px a 1280px de viewport, 29px a 768,
   et 13px a 390 — le texte « Speed through checkout » y est illisible et le
   bandeau ressemble a un defaut d'affichage. On la retire sous 800px ; le
   bouton Amazon Pay lui-meme, qui porte l'action, reste dans le recapitulatif. */
@media (max-width: 800px) {
	.amazon_banner_display { display: none; }
}

/* --- Vide vertical en tete des pages WooCommerce ---
   Divi pose `padding-top: 58px` sur .container via un selecteur a id, que notre
   regle de mockup.css ne bat pas. Or nos pages panier/checkout/compte ont DEUX
   .container imbriques (celui de Divi dans #main-content, le notre dans
   #left-area) : le vide se cumulait a 116px avant le fil d'Ariane. Mesure faite
   a 390px, ou cela representait un tiers du premier ecran.
   Le padding-top:58px de Divi est neutralise sur le conteneur interne (doublon)
   et ramene a une valeur mobile sur l'externe. */
/* ⚠️ Divi applique ce padding via
     `body:not(.et-tb) #main-content .container { padding-top:58px }`
   (style-static.min.css), de specificite (1,2,1). Une surcharge en
   `.woocommerce-cart #left-area .container` (1,2,0) NE PASSE PAS — verifie au
   probe : max-width et padding-left prenaient, padding-top non. D'ou le
   #main-content supplementaire, qui porte nos selecteurs a (2,2,1). */
body.woocommerce-cart #main-content #left-area .container,
body.woocommerce-checkout #main-content #left-area .container,
body.woocommerce-account #main-content #left-area .container,
body.evd-wishlist-page #main-content #left-area .container { padding-top: 0; }

@media (max-width: 767px) {
	body.woocommerce-cart #page-container #main-content > .container,
	body.woocommerce-checkout #page-container #main-content > .container,
	body.woocommerce-account #page-container #main-content > .container,
	body.evd-wishlist-page #page-container #main-content > .container { padding-top: var(--sp-5); }
}


/* ---------- Champs de formulaire : hauteur portée par le thème ----------
 * Divi fournissait jusqu'ici le rembourrage des champs WooCommerce natifs
 * (.woocommerce form .form-row input.input-text, spécificité supérieure aux
 * nôtres). Son CSS WooCommerce ayant été retiré pour la performance, on pose
 * la hauteur nous-mêmes — le thème ne dépend plus du parent pour ça, et les
 * champs natifs s'alignent enfin sur nos champs custom (promo, newsletter).
 */
.login-layout .form-row .input-text,
.login-layout .form-row input[type="text"],
.login-layout .form-row input[type="email"],
.login-layout .form-row input[type="password"],
.account-content .woocommerce-Input,
.account-content input[type="text"],
.account-content input[type="email"],
.account-content input[type="tel"],
.account-content input[type="password"],
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select {
  min-height: 46px;
  padding: 12px 14px;
  line-height: 1.4;
  box-sizing: border-box;
}
.account-content .woocommerce-Input,
.account-content input[type="text"],
.account-content input[type="email"],
.account-content input[type="tel"],
.account-content input[type="password"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: .95rem;
  font-family: var(--font-body);
  color: var(--ink);
}
.account-content .woocommerce-Input:focus,
.account-content input[type="text"]:focus,
.account-content input[type="email"]:focus,
.account-content input[type="tel"]:focus,
.account-content input[type="password"]:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft);
}

/* --- Livraison WebP (ShortPixel) ---------------------------------------
 * ShortPixel enveloppe chaque <img> dans un <picture>. Cet element est
 * `inline` : il deviendrait l'enfant de flex/grid a la place de l'image, et
 * toutes nos regles de dimensionnement (.scene, .pdp-main img, .post-card-img,
 * cartes produit) s'appliqueraient a un parent qui ne les porte pas.
 * `display: contents` le rend transparent a la mise en page : l'<img> redevient
 * l'enfant direct. Les selecteurs descendants, eux, continuent de matcher.
 */
picture { display: contents; }

/* --- Recherche : bloc « ailleurs sur le site » sous la grille produit --- */
.search-more { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.search-more > h2 { font-size: 1.35rem; margin-bottom: 4px; }
.search-more > p.muted { margin-bottom: var(--sp-5); font-size: .92rem; }
.search-hit-body h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 4px 0 6px; }
.search-hit-body h3 a { color: var(--ink); }
.search-hit-body h3 a:hover { color: var(--primary); }
.search-hit:last-child { border-bottom: 0; padding-bottom: 0; }
.search-more-all { display: inline-block; margin-top: var(--sp-5); }

/* --- Fiche produit : barre d'achat fixee en bas (mobile / tablette) --------
 * Sous 1024px la `.pdp-layout` passe en UNE colonne : le bloc d'achat part
 * alors haut dans la page et disparait des que l'utilisateur lit la description
 * ou l'accordeon. On epingle le formulaire en bas, comme sur roll-lux.
 *
 * Le formulaire est DEPLACE en enfant direct de <body> par assets/js/pdp.js —
 * d'ou le selecteur `body >`. Raison : un ancetre qui cree un contexte
 * d'empilement (transform, filter, will-change…) casse `position: fixed`, qui
 * se positionne alors par rapport a lui et non au viewport.
 *
 * z-index 800 : SOUS le drawer mobile (900), qui doit recouvrir la barre quand
 * le menu est ouvert, et sous le bandeau cookies (9999).
 */
@media (max-width: 1023px) {
  body > form.cart.buy-row.buy-row-fixed {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    /* Marge de securite iOS : sans ca la barre passe sous l'indicateur d'accueil. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-3));
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(29, 29, 27, .10);
    flex-wrap: nowrap;
  }
  /* `.buy-row .btn-primary` porte min-width:200px : avec le selecteur de
     quantite (~132px) ca deborde a 320px. */
  body > form.cart.buy-row.buy-row-fixed .btn-primary { min-width: 0; }

  /* Hauteur reelle mesuree par le JS, repli si le JS n'a pas tourne. */
  body.has-buy-bar { padding-bottom: calc(var(--evd-buy-bar-h, 92px) + var(--sp-4)); }
}

/* Ecrans de telephone : le selecteur de quantite (44+44+44 = 132px) ne laissait
   pas assez de place au bouton, dont le libelle passait sur DEUX lignes — la
   barre montait a 122px au lieu de 80. On resserre les commandes plutot que de
   rogner le libelle, qui porte l'action.
   
   MAJ 2026-08-08 : seuil remonte de 380px a 480px. A 380 la regle ratait les
   largeurs des iPhone modernes (390, 414, 428) — soit le viewport mobile le plus
   repandu — et le libelle y repassait sur deux lignes. Le bouton liste d'envies,
   ajoute APRES la mesure du 03/08, avait consomme la marge restante. 480px
   couvre tous les telephones et s'arrete avant les tablettes, ou la place ne
   manque pas. */
@media (max-width: 480px) {
  body > form.cart.buy-row.buy-row-fixed {
    padding-left: var(--sp-3); padding-right: var(--sp-3); gap: var(--sp-2);
  }
  body > form.cart.buy-row.buy-row-fixed .qty button { width: 34px; }
  body > form.cart.buy-row.buy-row-fixed .qty input  { width: 30px; }
  body > form.cart.buy-row.buy-row-fixed .btn-primary {
    padding-left: var(--sp-3); padding-right: var(--sp-3); white-space: nowrap;
  }
}

/* --- Bandeau de consentement cookies (porte de roll-lux) -------------------
 * Carte flottante arrondie plutot que la barre grise pleine largeur du plugin
 * `cookie-law-info`, qui jurait avec le design.
 *
 * 🔑 z-index 850 : AU-DESSUS de la barre d'achat (800) — le choix doit rester
 * accessible — mais SOUS le drawer mobile (900). Sur roll-lux la barre d'achat
 * est a 9999 et le bandeau a 9000, donc la barre RECOUVRE le bandeau : on fait
 * l'inverse, et on decale le bandeau de la hauteur de la barre pour que les
 * deux restent utilisables en meme temps.
 */
.evd-cookie {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 850;
  max-width: 980px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 60px rgba(29, 29, 27, .18), 0 4px 12px rgba(29, 29, 27, .08);
  padding: var(--sp-4) var(--sp-5);
  transform: translateY(40px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.evd-cookie.is-visible { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .evd-cookie { transition: none; transform: none; }
}

/* Fiche produit : on remonte le bandeau au-dessus de la barre d'achat plutot
   que de les superposer. `--evd-buy-bar-h` est pose par assets/js/pdp.js. */
body.has-buy-bar .evd-cookie {
  bottom: calc(var(--evd-buy-bar-h, 92px) + var(--sp-3));
}

.evd-cookie-inner { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.evd-cookie-text { flex: 1 1 280px; min-width: 240px; }
.evd-cookie-text strong { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.evd-cookie-text p { font-size: .85rem; color: var(--text); line-height: 1.5; margin: 0; }
.evd-cookie-text p a { color: var(--primary); text-decoration: underline; }
.evd-cookie-ccpa { display: inline-block; margin-top: 6px; font-size: .78rem; color: var(--muted); text-decoration: underline; }
.evd-cookie-ccpa:hover { color: var(--ink); }
.evd-cookie-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

@media (max-width: 640px) {
  .evd-cookie { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); padding: var(--sp-4); }
  .evd-cookie-actions { width: 100%; }
  .evd-cookie-actions .btn { flex: 1; }
}

/* --- Logo de marque (vrai fichier, remplace le logo redessine du mockup) --- */
.logo .logo-img { display: block; width: auto; max-width: none; }
/* Le lien .logo est un flex avec `gap` prevu pour le couple symbole + texte :
   avec une image unique, ce gap ajoutait un vide a droite. */
.logo:has( .logo-img ) { gap: 0; }

/* --- Liste d'envies (YITH en couche de donnees, boutons maison) ------------
 * Le symbole #i-heart du sprite est dessine en TRAIT (`fill:none` +
 * `stroke:currentColor`). Pour l'etat actif il faut donc remplir explicitement :
 * changer la couleur seule ne fait que colorer le contour.
 */
.evd-wish svg { transition: transform .15s ease; }
.evd-wish.is-active svg { fill: var(--sale); stroke: var(--sale); }
.evd-wish.is-active:active svg { transform: scale(.88); }

/* Vignette : le coeur n'apparait qu'au survol… sauf s'il est deja dans la liste,
   auquel cas il doit rester visible — c'est un etat, pas une action offerte. */
.card-wish.is-active { opacity: 1; }
.card-wish { cursor: pointer; }

/* Compteur de l'en-tete : meme pastille que le panier. */
.wish-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px;
  background: var(--sale); color: #fff; font-size: .66rem; font-weight: 700;
  border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Fiche produit : bouton a cote de « Add to cart », dans la rangee d'achat —
   il suit donc la barre epinglee en mobile. */
.pdp-wish {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 50px; padding: 0 var(--sp-4); flex: none;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.pdp-wish:hover { border-color: var(--ink); }
.pdp-wish svg { width: 19px; height: 19px; flex: none; }
.pdp-wish.is-active { border-color: var(--sale); color: var(--sale); }

/* Dans la barre epinglee, on ne garde que l'icone : la place manque. */
@media (max-width: 1023px) {
  body > form.cart.buy-row.buy-row-fixed .pdp-wish { padding: 0; width: 50px; }
  body > form.cart.buy-row.buy-row-fixed .pdp-wish-label { display: none; }
}
@media (max-width: 380px) {
  body > form.cart.buy-row.buy-row-fixed .pdp-wish { width: 44px; }
}

/* --- Page « liste d'envies » : habillage du gabarit YITH ------------------
 * On garde le markup natif du plugin (sa croix de suppression et son
 * « Add to Cart » y sont cables) et on ne fait que l'habiller, comme pour
 * Contact Form 7. Le titre « My wishlist on … » de YITH fait doublon avec le
 * titre de page, on masque celui de Divi (regle plus haut).
 */
.evd-wishlist-page .wishlist_table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.evd-wishlist-page .wishlist_table thead th {
  text-align: left; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); background: transparent;
}
.evd-wishlist-page .wishlist_table tbody td {
  padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; background: transparent;
}
.evd-wishlist-page .wishlist_table tbody tr:hover td { background: var(--surface-warm); }
.evd-wishlist-page .wishlist_table img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); display: block; }
.evd-wishlist-page .wishlist_table .product-name a { color: var(--ink); font-weight: 600; }
.evd-wishlist-page .wishlist_table .product-name a:hover { color: var(--primary); }
.evd-wishlist-page .wishlist_table .product-price { font-weight: 700; color: var(--ink); }
.evd-wishlist-page .wishlist_table .product-stock-status .wishlist-in-stock { color: var(--success); font-weight: 600; }
.evd-wishlist-page .wishlist_table .add_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border-radius: var(--r-pill);
  padding: 9px 20px; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.evd-wishlist-page .wishlist_table .add_to_cart:hover { background: var(--primary-dark); color: #fff; }
.evd-wishlist-page .wishlist_table .remove_from_wishlist { color: var(--muted); font-size: 1.1rem; }
.evd-wishlist-page .wishlist_table .remove_from_wishlist:hover { color: var(--sale); }
.evd-wishlist-page .wishlist-title h2 { font-size: 1.05rem; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
.evd-wishlist-page .wishlist-empty { padding: var(--sp-6) 0; color: var(--text); }

/* Ancien bloc mobile retire le 2026-08-08 : placement automatique sur 6 cellules,
   voir le bloc « LISTE D'ENVIES — reprise du gabarit mobile » en fin de fichier. */
.evd-wishlist-page #left-area > .entry-title,
.evd-wishlist-page .main_title {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.4rem);
  color: var(--ink); margin-bottom: var(--sp-5); padding: 0;
}
/* Doublon : YITH imprime « My wishlist on <site> » juste sous le titre de page. */
.evd-wishlist-page .wishlist-title { display: none; }

/* ============================================================================
   RECHERCHE — loupe mobile + autocompletion (2026-08-08)

   Constat : `.header-search` est en `display:none` sous 1024px (mockup.css:181,
   reaffiche a `min-width:1024px`). Sur telephone ET tablette il n'y avait donc
   AUCUN champ de recherche dans l'en-tete — il fallait ouvrir le menu burger.
   Pour un catalogue de 1114 references, c'est un geste de trop.

   Le panneau de suggestions vit DANS `.site-header` (sticky, z-index 500), donc
   dans son contexte d'empilement : un z-index local suffit, il doit seulement
   passer devant le mega-menu (z-index 400).
   ============================================================================ */

/* --- Loupe : uniquement la ou le champ d'en-tete est masque --- */
.search-toggle { display: inline-flex; }
@media (min-width: 1024px) {
  .search-toggle { display: none; }
}

/* --- Panneau deplie sous la barre d'en-tete --- */
.evd-mobile-search {
  border-top: 1px solid var(--border-l);
  background: var(--bg);
  padding: var(--sp-3) 0;
}
.evd-mobile-search[hidden] { display: none; }
@media (min-width: 1024px) {
  /* Securite : si le panneau restait ouvert au passage en desktop, le champ
     d'en-tete reprend la main et celui-ci n'a plus lieu d'etre. */
  .evd-mobile-search { display: none !important; }
}

/* --- Champ : le panneau de resultats se positionne par rapport a lui --- */
.search-wrap { position: relative; }
.evd-mobile-search .search-wrap { width: 100%; }
.evd-mobile-search .search-wrap input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: white;
  font-size: 16px; /* < 16px ⇒ iOS zoome au focus */
  color: var(--ink);
}
.evd-mobile-search .search-wrap input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.evd-mobile-search .search-wrap > svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}

/* --- Liste de suggestions --- */
.evd-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 600;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(29, 29, 27, .16), 0 3px 10px rgba(29, 29, 27, .06);
  overflow: hidden auto;
  max-height: min(70vh, 460px);
  overscroll-behavior: contain;
}
.evd-search-results[hidden] { display: none; }

.evd-search-list { list-style: none; margin: 0; padding: var(--sp-2); }
.evd-search-list li { margin: 0; }

.evd-search-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
}
.evd-search-item:hover,
.evd-search-item:focus-visible,
.evd-search-item.is-active { background: var(--surface); }

.evd-search-thumb {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  flex: 0 0 auto;
}
.evd-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* `min-width:0` : sans lui la colonne 1fr est dimensionnee par le contenu
   minimal et un titre long deborde la carte (meme piege que les 7 layouts). */
.evd-search-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evd-search-cat {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soft); font-weight: 600;
}
.evd-search-title {
  font-size: 14px; line-height: 1.3; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evd-search-title mark { background: var(--primary-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
.evd-search-price { font-size: 13px; font-weight: 700; color: var(--ink); }
.evd-search-price del { font-weight: 400; color: var(--soft); margin-right: 4px; }

.evd-search-viewall {
  display: block;
  padding: var(--sp-3);
  border-top: 1px solid var(--border-l);
  font-size: 13px; font-weight: 600; color: var(--primary);
  text-decoration: none; text-align: center;
}
.evd-search-viewall:hover { background: var(--surface); }

.evd-search-note {
  padding: var(--sp-4);
  font-size: 13px; color: var(--muted); text-align: center;
}

/* --- En-tete mobile : place pour la loupe (2026-08-08) ---------------------
   L'ajout d'un 4e bouton d'action (loupe) fait deborder la barre a 390px :
   burger 42 + logo ~130 + 4 x 42 + gaps = ~364 pour 358 disponibles. Le burger,
   premier element flex, encaissait toute la compression et se reduisait a un
   trait. On empeche burger et logo de retrecir, et on resserre les boutons
   sous 480px — la cible tactile reste a 38px, au-dessus du minimum de 32. */
.burger, .logo { flex: 0 0 auto; }
@media (max-width: 480px) {
  .header-actions { gap: 2px; }
  .header-actions .icon-btn { width: 38px; height: 38px; }
  .header-actions .icon-btn svg { width: 19px; height: 19px; }
}

/* Tres petits ecrans (<= 380px) : meme apres le resserrage ci-dessus, la barre
   deborde encore (288px utiles a 320 pour ~320 de contenu) et le panier sortait
   de l'ecran. On reduit burger, logo et boutons ensemble plutot que de sacrifier
   une action : les 4 icones sont toutes transactionnelles ou de navigation.
   Mesure a 320 : 34 (burger) + ~107 (logo 38px de haut) + 4 x 34 + gaps = 285. */
@media (max-width: 380px) {
  .burger { width: 34px; height: 34px; }
  .logo .logo-img { height: 38px !important; }
  .header-actions .icon-btn { width: 34px; height: 34px; }
  .header-actions .icon-btn svg { width: 18px; height: 18px; }
}

/* Correction de l'approche ci-dessus : figer le logo (`flex: 0 0 auto`) reporte
   le debordement sur le dernier element, et le panier sortait de l'ecran a 320px.
   L'arithmetique au pixel ne tient pas d'un appareil a l'autre (largeur du logo
   dependante de la police et du ratio de l'image). On rend donc le LOGO elastique
   — seul element qui peut ceder quelques pixels sans consequence — et on fige
   burger et boutons, dont la cible tactile ne doit pas descendre sous 32px. */
.logo { flex: 0 1 auto; min-width: 0; }
.logo .logo-img { max-width: 100%; height: auto; }
.burger { flex: 0 0 auto; }
.header-actions { flex: 0 0 auto; }
@media (max-width: 380px) {
  /* La hauteur devient un plafond, la largeur disponible fait foi. */
  .logo .logo-img { max-height: 38px; height: auto !important; }
}

/* ============================================================================
   LISTE D'ENVIES — reprise du gabarit mobile (2026-08-08, signale par Cyril)

   Deux defauts, meme cause : la regle <=640px posait `grid-template-columns:
   72px 1fr` en laissant le placement AUTOMATIQUE, alors que la ligne YITH porte
   SIX cellules (remove, thumbnail, name, price, stock, add-to-cart). Le
   `grid-row: 1 / span 3` de la vignette entrait en conflit avec le placement
   auto de `product-remove`, et « Add to Cart » retombait dans la colonne de
   72px : le libelle, en `white-space: nowrap`, debordait du bouton.

   On place donc les six cellules EXPLICITEMENT. Desktop inchange (verifie).
   ============================================================================ */
@media (max-width: 640px) {

  .evd-wishlist-page .wishlist_table thead { display: none; }

  .evd-wishlist-page .wishlist_table tbody tr {
    display: grid;
    /* vignette | contenu | croix de suppression */
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: var(--sp-3);
    row-gap: 6px;
    align-items: start;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
  }

  /* Divi habille les <td> : on neutralise bordures et fonds une fois la ligne
     passee en grille, sinon prix et stock s'affichent comme des champs encadres. */
  .evd-wishlist-page .wishlist_table tbody td,
  .evd-wishlist-page #left-area .wishlist_table tbody td {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
  }

  .evd-wishlist-page .wishlist_table tbody td.product-thumbnail    { grid-column: 1; grid-row: 1 / span 3; }
  .evd-wishlist-page .wishlist_table tbody td.product-name         { grid-column: 2; grid-row: 1; }
  .evd-wishlist-page .wishlist_table tbody td.product-remove       { grid-column: 3; grid-row: 1; justify-self: end; }
  .evd-wishlist-page .wishlist_table tbody td.product-price        { grid-column: 2 / -1; grid-row: 2; }
  .evd-wishlist-page .wishlist_table tbody td.product-stock-status { grid-column: 2 / -1; grid-row: 3; }
  .evd-wishlist-page .wishlist_table tbody td.product-add-to-cart  { grid-column: 1 / -1; grid-row: 4; margin-top: var(--sp-2); }

  /* Le titre produit heritait d'une taille de tableau trop grande : chez evideco
     les libelles vont jusqu'a ~150 caracteres et occupaient 4 lignes en gras. */
  .evd-wishlist-page .wishlist_table .product-name a {
    display: block;
    font-size: .9rem;
    line-height: 1.35;
    font-weight: 600;
  }

  /* Bouton pleine largeur : `nowrap` etait la vraie cause du debordement des
     que la cellule etait etroite. En pleine largeur il n'a plus besoin de
     l'interdiction de retour a la ligne. */
  .evd-wishlist-page .wishlist_table .add_to_cart {
    display: flex;
    width: 100%;
    white-space: normal;
    text-align: center;
    padding: 11px 16px;
  }

  .evd-wishlist-page .wishlist_table img { width: 72px; height: 72px; }
  .evd-wishlist-page .wishlist_table .product-price { font-size: .95rem; }
  .evd-wishlist-page .wishlist_table .product-stock-status { font-size: .85rem; }
}

/* Complement liste d'envies mobile : Divi centre et encadre les cellules de
   tableau dans le contenu de page. La grille place bien les cellules, mais
   l'alignement et les filets restaient. On les neutralise explicitement. */
@media (max-width: 640px) {
  .evd-wishlist-page .wishlist_table tbody td,
  .evd-wishlist-page #left-area .wishlist_table tbody td,
  .evd-wishlist-page #main-content .wishlist_table tbody td {
    text-align: left !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .evd-wishlist-page .wishlist_table tbody td.product-remove { text-align: right !important; }
  .evd-wishlist-page .wishlist_table .add_to_cart { justify-content: center; }
}

/* --- Panier : état pendant la mise à jour AJAX (2026-08-08) ---------------
   Le fragment `.cart-layout` est remplacé sans rechargement : sans retour
   visuel, un clic sur « + » semble ne rien faire pendant l'aller-retour
   serveur. On grise et on neutralise les interactions plutot qu'un spinner,
   qui ferait sauter la mise en page. */
.cart-layout { transition: opacity .15s ease; }
.cart-layout.is-updating { opacity: .55; pointer-events: none; }
.cart-layout.is-updating * { cursor: progress; }

/* ============================================================================
   CONNEXION GOOGLE — habillage du bouton (2026-08-08)

   Porte de rolllux-2026 (style.css:5039). Le bouton lui-meme est rendu par
   Google Identity Services dans un iframe : on ne peut PAS le styler, on ne
   fait que le centrer et poser le separateur « OR » au-dessus du formulaire.

   Chez evideco le bouton est accroche a `woocommerce_login_form_start` (et non
   `woocommerce_before_customer_login_form`, qui se declenche avant le
   conteneur du gabarit) : il vit donc DANS la carte `.form-card`.
   ============================================================================ */
.evd-google-login { margin: 0 0 var(--sp-4); text-align: center; }
.evd-google-login .g_id_signin { display: inline-block; }

.evd-google-login-error {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--sale) 10%, transparent);
  color: var(--sale);
  font-size: .85rem;
  text-align: left;
}
.evd-google-login-error[hidden] { display: none; }

.evd-google-login-sep {
  position: relative;
  margin: var(--sp-4) 0 0;
  color: var(--soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.evd-google-login-sep::before,
.evd-google-login-sep::after {
  content: ""; position: absolute; top: 50%;
  width: calc(50% - 26px); height: 1px; background: var(--border-l);
}
.evd-google-login-sep::before { left: 0; }
.evd-google-login-sep::after  { right: 0; }
.evd-google-login-sep span { background: var(--bg); padding: 0 12px; position: relative; }

/* Conteneur du bouton Google : sa largeur MESUREE sert a calculer le `width`
   passe a `renderButton()` (Google exige des pixels). Il doit donc occuper
   toute la largeur disponible de la carte, sinon le bouton est calcule sur une
   boite retrecie. Le bouton lui-meme, rendu en iframe, est centre. */
.evd-google-login .evd-google-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

/* 🔑 Le bouton Google ne s'aligne pas sur les champs : Google pose ses propres
   largeurs internes et laissait ~8px de vide a droite (bord gauche aligne, bord
   droit court). Les conteneurs qu'il genere sont dans le DOM clair, donc on peut
   les forcer a remplir la boite — c'est le seul moyen de garantir que les bords
   coincident avec les champs, quelle que soit la largeur calculee.
   Mesure a 320px : champ 52..268, bouton 49..261 avant / aligne apres. */
.evd-google-login .evd-google-btn > div,
.evd-google-login .evd-google-btn > div > div {
  width: 100% !important;
  max-width: 100% !important;
}
.evd-google-login .evd-google-btn iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ============================================================================
   CATALOGUE MOBILE — remonter les produits (2026-08-08, demande de Cyril)

   Mesure a 390px : du bas de l'en-tete a la premiere fiche, 270px etaient
   consommes par le titre, la description et les marges autour de « Filters ».

   🔑 Le `<h1>` est MASQUE VISUELLEMENT, pas supprime. Sur une archive de
   categorie il porte « Bath Rugs », « Kitchen Mats » — c'est un signal SEO, et
   une page sans `<h1>` est exactement le defaut corrige le meme jour sur la
   liste d'envies. Il reste dans le DOM, lisible par les moteurs et les lecteurs
   d'ecran ; le fil d'ariane juste au-dessus affiche deja le nom de la page,
   donc rien n'est perdu a l'oeil.

   La description de categorie est repliee sous 1024px : c'est du contenu
   indexable, mais il pousse les produits sous la ligne de flottaison. Si on
   veut la conserver a l'affichage, la bonne place est SOUS la grille (motif
   classique du e-commerce) — a faire en modifiant le gabarit, pas en CSS.
   ============================================================================ */
@media (max-width: 1023px) {

  .catalog-hero { padding-bottom: 0; margin-bottom: var(--sp-3); }

  /* Masquage visuel accessible : conserve dans l'arbre d'accessibilite. */
  .catalog-hero h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .catalog-hero .hero-count { display: none; }

  /* Le texte de rayon reste visible sous 1024px (2026-08-09) — son repli
     mobile est declare APRES le bloc `.catalog-intro` plus bas, sinon la
     regle de base, plus loin dans la feuille, l'emporte a specificite egale. */

  /* Espace entre le bloc filtres et la grille : sp-6 (32px) etait dimensionne
     pour la colonne laterale du desktop, ou les deux blocs sont cote a cote. */
  .catalog-layout { gap: var(--sp-3); }

  /* Marges autour du bouton « Filters ». */
  .filters-toggle { margin: 0; }
  .catalog-layout > aside { margin-bottom: 0; }

  /* Compteur + tri : la barre gardait la respiration du desktop. */
  .catalog-toolbar { margin-bottom: var(--sp-3); gap: var(--sp-2); }
  .active-filters { margin-bottom: var(--sp-3); }
}

/* ============================================================================
   CARTE PRODUIT — bouton d'ajout SOUS le prix (2026-08-08, decision Cyril)

   Avant : `position: absolute` par-dessus la photo, revele au survol sur
   desktop, rendu PERMANENT sur tactile par `@media (hover: none)` (faute de
   survol). Sur un catalogue ou la photo est l'argument de vente, une pastille
   bleue en travers de chaque visuel coutait plus qu'elle ne rapportait.

   Desormais en flux, en bas de `.card-body`, pleine largeur, TOUJOURS visible :
   pas de revelation au survol, donc pas de saut de hauteur au passage de la
   souris, et le meme rendu au clavier, au doigt et a la souris.
   ============================================================================ */
.product-card .card-quickadd {
  position: static;
  max-width: none;
  opacity: 1;
  transform: none;
  transition: background-color .15s ease;
  text-align: center;
  justify-content: center;
  /* 2026-08-11 : compact et sur la ligne du prix (voir .card-actions), au lieu
     de pleine largeur sous le prix — il coutait 61px de hauteur par carte. */
  flex: none;
  margin: 0 0 0 auto;
  padding: 9px 14px;
  font-size: .8rem;
  white-space: nowrap;
}

/* Ligne d'action : le prix garde sa place a gauche, le bouton occupe le vide a
   sa droite. `margin-top: auto` est porte ICI (et non plus par .card-price) pour
   que la ligne reste collee en bas et que toutes les cartes d'une rangee
   alignent leur bouton, quelle que soit la longueur des titres. */
.product-card .card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.product-card .card-quickadd .quickadd-icon { display: none; }

/* 🔴 Sous 1024px la carte est trop etroite pour un libelle : mesure a 390px il
   reste 79px pour le bouton, et **44px a 320px**. Le texte cede la place a
   l'icone panier — il reste dans le DOM pour les lecteurs d'ecran. Sans ca le
   bouton DEBORDAIT de la carte (constate a 390 et 320). */
@media (max-width: 1023px) {
  .product-card .card-quickadd {
    /* 44px : cible tactile minimale des Human Interface Guidelines. On etait a
       40 — sous le seuil, les taps a cote deviennent frequents. */
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--r-pill);
  }
  .product-card .card-quickadd .quickadd-icon { display: block; width: 18px; height: 18px; }
  .product-card .card-quickadd .quickadd-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* `margin-top: auto` sur le prix poussait deja le bloc bas de carte ; on rend
   la ligne d'action solidaire pour que tous les boutons d'une rangee
   s'alignent, quelle que soit la longueur des titres. */
.product-card .card-body { justify-content: flex-start; }
/* Le prix ne pousse plus lui-meme : c'est .card-actions qui le fait. */
.product-card .card-price { margin: 0; }

/* La regle tactile n'a plus d'objet : le bouton est visible partout. */
@media (hover: none) {
  .card-quickadd { opacity: 1; transform: none; }
}

/* ============================================================================
   FILTRES — bloc d'action EN TETE de colonne (2026-08-08, 2e passe)

   1re tentative (rejetee par Cyril) : bouton en bas + barre collante + liste des
   categories dans une zone de defilement interne. Deux defauts reels — le bouton
   restait a decouvrir en bas, et l'encart etroit rendait le parcours penible sur
   desktop.

   Retenu : le bloc d'action passe EN PREMIER dans le formulaire (gabarit
   template-parts/catalog-filters.php) et reste colle en haut pendant le
   parcours. Plus AUCUN defilement interne : la colonne prend sa hauteur
   naturelle et c'est la page qui defile.
   ============================================================================ */

.filters .filter-group-actions {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Deborde la gouttiere du panneau pour former une vraie barre. */
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-top: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 20px -12px rgba(29, 29, 27, .35);
}

/* Le groupe categories reprend sa hauteur naturelle : pas de fenetre etroite. */
.filters .filter-group-cats {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

@media (min-width: 1024px) {
  /* La colonne est deja `position: sticky` sous l'en-tete (mockup.css). La barre
     d'action se cale juste sous celui-ci pour ne pas passer dessous. */
  .filters .filter-group-actions { top: calc(var(--header-h) + var(--sp-2)); }
}

/* Etat pendant le filtrage AJAX : sans retour visuel, un clic sur « Apply
   filters » semble ne rien faire le temps de l'aller-retour serveur. */
.catalog-results { transition: opacity .15s ease; }
.catalog-results.is-loading { opacity: .5; pointer-events: none; }
.catalog-results.is-loading * { cursor: progress; }

/* --- Description de categorie, sous la grille (2026-08-08) -----------------
   Elle etait dans le hero : ~370px dans une colonne etroite a gauche, cote
   droit vide, produits repousses sous la ligne de flottaison. Rendue ici, elle
   ne coute plus rien au premier ecran et reste indexee.
   Colonne de lecture centree : au-dela de ~75 caracteres par ligne le texte
   devient penible, mais l'aligner a gauche d'une page de 1240px laissait un
   grand vide a droite — d'ou le centrage. */
/* ============================================================
   TEXTE DE RAYON — sous le H1 de l'archive, repliable.

   🔑 L'etat replie est pose par `catalog.js`, JAMAIS par defaut dans le
   HTML : sans JS le texte est integralement visible. Un `max-height` en
   dur dans la feuille aurait tronque le contenu pour tout client sans JS.
   Le bouton fait le chemin inverse — il est `hidden` dans le gabarit et
   revele par le JS, donc pas de bouton mort.

   La mesure (`ch`) reste lisible : plein conteneur, un paragraphe ferait
   ~150 caracteres par ligne.
   ============================================================ */
.catalog-intro { max-width: 88ch; margin-top: var(--sp-3); }

.catalog-intro-body { color: var(--text); }
.catalog-intro-body > *:first-child { margin-top: 0; }
/* 🔑 `mockup.css` pose `.catalog-hero p { max-width: 62ch; color: var(--muted) }`
   pour le chapo court d'origine. Notre texte de rayon est dans le meme
   `<header>` : sans ces deux remises a zero, les paragraphes sortaient gris
   pales et bloques a 62ch pendant que les titres allaient jusqu'a 88ch —
   une colonne en escalier. Meme specificite, base.css passe apres. */
.catalog-intro-body p {
  margin: 0 0 var(--sp-3);
  max-width: none;
  color: var(--text);
  line-height: 1.7;
}
.catalog-intro-body p:last-child { margin-bottom: 0; }
.catalog-intro-body h2,
.catalog-intro-body h3,
.catalog-intro-body h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: 1.05rem;
  line-height: 1.4;
}
.catalog-intro-body a { color: var(--primary); text-decoration: underline; }

/* Le degrade dit « ca continue » sans avoir a couper au milieu d'un mot. */
.catalog-intro-body.is-clamped {
  max-height: 6.6em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.catalog-intro-toggle {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.catalog-intro-toggle[hidden] { display: none; }
.catalog-intro-toggle .intro-less { display: none; }
.catalog-intro-toggle[aria-expanded="true"] .intro-more { display: none; }
.catalog-intro-toggle[aria-expanded="true"] .intro-less { display: inline; }

/* Mobile : replié plus court (~3 lignes ≈ 70px) pour préserver le premier
   écran densifié le 2026-08-08 — le texte reste là, il ne repart pas en bas
   de page. Déclaré ICI, après le bloc ci-dessus : même spécificité, donc
   c'est l'ordre dans la feuille qui tranche. */
@media (max-width: 1023px) {
  .catalog-intro { margin-top: var(--sp-2); }
  .catalog-intro-body.is-clamped { max-height: 4.4em; }
}

/* ============================================================================
   FILTRES — NAVIGATION PAR RAYON (2026-08-11)

   L'arbre entier etait imprime en cases a cocher : 58 cases + 41 pastilles,
   soit **3590 px de colonne mesures sur desktop 1440** pour 24 produits
   affiches a cote. La colonne ne montre desormais que le NIVEAU COURANT
   (cf. evd_catalog_nav(), inc/catalog.php).
   ============================================================================ */

/* --- Racine : les rayons sont des liens, pas des cases --- */
.dept-nav { list-style: none; margin: 0; padding: 0; }
.dept-nav a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 0; font-size: .95rem; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.dept-nav li:last-child a { border-bottom: 0; }
.dept-nav a:hover .dept-nav-name { text-decoration: underline; }
.dept-nav .dept-nav-name { flex: 1 1 auto; }
.dept-nav .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dept-nav .n { color: var(--muted); font-size: .8rem; }

/* --- Dans un rayon : retour, titre, sous-categories --- */
.filter-back {
  display: inline-block; margin-bottom: var(--sp-2);
  font-size: .85rem; color: var(--muted); text-decoration: none;
}
.filter-back:hover { color: var(--text); text-decoration: underline; }
.filters h3.filter-node { display: flex; align-items: baseline; gap: var(--sp-2); }
.filters h3.filter-node .n {
  margin-left: auto; color: var(--muted);
  font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.filter-empty { color: var(--muted); font-size: .88rem; margin: 0; }

/* La ligne porte la case ET, si la sous-categorie a elle-meme des enfants, un
   lien de descente. Les termes de profondeur 2 et 3 (37 au total) etaient
   jusqu'ici inatteignables : le gabarit s'arretait aux enfants directs. */
.filter-row { display: flex; align-items: center; gap: var(--sp-1); }
/* 🔴 `display: flex` ci-dessus ECRASE l'attribut `hidden` : la feuille par
   defaut du navigateur ne pose `display: none` sur [hidden] qu'avec une
   specificite nulle. Sans cette regle, le repli JS ne repliait rien — mesure :
   20 lignes toujours visibles alors que le bouton « Show 12 more » etait la. */
.filter-row[hidden] { display: none; }
.filter-row .filter-option { flex: 1 1 auto; min-width: 0; }
.filter-drill {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none; font-size: 1.1rem; line-height: 1;
}
.filter-drill:hover { background: var(--bg); color: var(--text); }

/* Meme piege que .filter-row : `.swatch` est en `display: inline-block`
   (base.css), ce qui l'emporte sur le [hidden] de la feuille par defaut. */
.filters .swatch[hidden] { display: none; }

/* --- Repli des listes longues (bouton injecte par catalog.js) --- */
.filter-more {
  margin-top: var(--sp-2); padding: 0;
  background: none; border: 0; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--primary); text-decoration: underline; cursor: pointer;
}

/* --- Groupes repliables : <details>, donc fonctionnels sans JavaScript --- */
.filters details.filter-group > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; list-style: none;
}
.filters details.filter-group > summary::-webkit-details-marker { display: none; }
.filters details.filter-group > summary h3 { margin-bottom: 0; }
/* Chevron maison : celui du navigateur ne se positionne pas de facon fiable. */
.filters details.filter-group > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.filters details.filter-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filters details.filter-group[open] > summary { margin-bottom: var(--sp-3); }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700;
}

/* --- Mobile : le panneau de filtres devient un vrai tiroir plein ecran ---
   Le bouton « Filters » depliait la colonne EN LIGNE dans la page : a 3590px
   c'etait injouable, et meme raccourcie une liste inline repousse la grille
   hors de l'ecran. Tiroir ancre en bas, comme toutes les boutiques mobiles. */
@media (max-width: 1023px) {
  .filters.is-open {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    max-height: 85vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0; border-radius: var(--r-md) var(--r-md) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px -12px rgba(29, 29, 27, .45);
    animation: evd-filtres-monte .18s ease-out;
  }
  @keyframes evd-filtres-monte { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }

  /* La barre d'action reste collee en haut du tiroir (elle y est deja sticky). */
  .filters.is-open .filter-group-actions { top: 0; }
}

/* Croix de fermeture du tiroir : n'existe qu'en mobile — en desktop la colonne
   est toujours la, il n'y a rien a fermer. */
.filters-close { display: none; }
@media (max-width: 1023px) {
  /* EN FLUX, sur sa propre ligne : en `position: absolute` elle se retrouvait
     par-dessus le bouton pleine largeur — reserver un `padding-right` ne suffit
     pas, `btn-block` occupe toute la largeur et la croix devenait illisible. */
  .filters.is-open .filters-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    margin: 0 0 var(--sp-2) auto;   /* `auto` a gauche : pousse la croix a droite */
    background: none; border: 0; border-radius: var(--r-pill);
    font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer;
  }
  .filters.is-open .filters-close:hover { background: var(--bg); color: var(--text); }
}

/* --- Tableaux d'article : defilement horizontal sur mobile ------------------
   Les guides du blog (tailles, prix, comparatifs) utilisent des <table> a 3-4
   colonnes. En dessous de 600px elles se compriment jusqu'a un mot par ligne.
   On passe la table en conteneur scrollable et on garde une mise en page de
   table a l'interieur via un min-width sur thead/tbody : le tableau defile
   horizontalement au lieu de tasser ses colonnes, et la PAGE ne deborde pas.
   Cible volontairement `.article-prose` (single.php) et non `.content-prose`,
   pour ne pas toucher les pages CMS ni le compte client.
   Ajoute le 11/08/2026 avec la conversion du blog en guides. */
@media (max-width: 600px) {
  .article-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* evite que le conteneur scrollable rogne l'ombre de focus des liens */
    padding-bottom: 2px;
  }
  .article-prose table thead,
  .article-prose table tbody {
    display: table;
    width: 100%;
    min-width: 460px;   /* seuil de declenchement du defilement */
  }
  .article-prose table th,
  .article-prose table td { white-space: normal; }
}

/* --- Cul-de-sac de filtrage : bloc de meilleures ventes (2026-08-11) --------
   L'etat vide n'offrait qu'un bouton qui annulait tout le travail de
   l'utilisateur. Le bloc se demarque de l'encart d'erreur par un filet haut,
   pour qu'on lise « voici autre chose » et non « voici vos resultats ». */
.empty-suggestions {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.empty-suggestions h3 {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}


/* Dernier maillon du tunnel : « Place order » est rendu par WooCommerce, on ne
   peut pas lui poser .btn-cta dans un gabarit. Meme couleur reservee, pour que
   la couleur de l'achat soit la meme du catalogue jusqu'au paiement. */
#place_order,
.woocommerce #place_order {
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-color: var(--cta) !important;
}
#place_order:hover,
.woocommerce #place_order:hover { background: var(--cta-hover) !important; border-color: var(--cta-hover) !important; }

/* ============================================================================
   RÉASSURANCE DU TUNNEL (2026-08-11)
   Baymard : la même mention vaut ~18% de complétion en plus quand elle est
   COLLÉE au formulaire de paiement, et presque rien reléguée en pied de page.
   Le tunnel n'en portait qu'une ligne grise, sous le bouton — donc lue après
   la décision.
   ============================================================================ */
/* 🔴 DIVI ECRASE LE PADDING DE TOUT <ul> : `#left-area ul, .entry-content ul…`
   pose `padding: 0 0 23px 1em`, avec un ID — specificite (1,0,1), donc
   imbattable par une simple classe. Symptome exact remonte par Cyril :
   « collé au top et avec de la marge en bas » — le contenu touchait le haut du
   cadre (padding-top ecrase a 0) pendant que 23px trainaient dessous. Mesure
   avant correctif : padding calcule `0px 0px 23px 14px` au lieu de 24px.
   `!important` sur le seul padding est ici le remede le plus court ; monter la
   specificite obligerait a s'accrocher a `#left-area`, donc a ne fonctionner
   que dans le gabarit Divi.
   ⚠️ La lecon de mesure : je verifiais les marges EXTERNES et les trouvais
   justes, alors que le defaut etait a l'INTERIEUR du bloc. Mesurer l'ecart
   entre le cadre et son premier enfant, pas seulement entre le cadre et son
   voisin.
   La marge haute vit sur les VARIANTES : un bloc encadre a besoin de plus d'air
   qu'une liste posee dans une colonne. */
.trust-block { list-style: none; margin: 0; padding: 0 !important; }
.trust-block li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.trust-block svg { flex: none; }
.trust-block span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust-block strong { font-weight: 600; color: var(--text); }
.trust-block em { font-style: normal; color: var(--muted); line-height: 1.4; }

/* --- Variante étroite : colonne du récapitulatif --- */
.trust-sidebar { margin-top: var(--sp-5); padding: 0 !important; }
.trust-sidebar li { padding: 10px 0; }
.trust-sidebar li + li { border-top: 1px solid var(--border); }
.trust-sidebar svg { width: 17px; height: 17px; margin-top: 2px; color: var(--success); }
.trust-sidebar strong { font-size: .9rem; }
.trust-sidebar em { font-size: .82rem; }

/* --- Variante large : au contact du paiement ------------------------------
   Refaite le 11/08 : le bloc était trop discret et ses marges internes (12/16px)
   ne tombaient pas sur celles de la carte qui le contient (--sp-5, 24px), ce qui
   décalait son texte de tout le reste du formulaire. Même padding que la carte,
   donc alignement franc bord à bord. */
.trust-inline {
  /* 32px : le bloc porte 24px de padding INTERNE, donc une marge externe de 24
     se lit comme nulle — le cadre parait colle a la case CGV qui le precede.
     La marge exterieure doit depasser le rembourrage interieur pour se voir. */
  margin-top: var(--sp-6);
  padding: var(--sp-5) !important;   /* cf. Divi ci-dessus */
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.trust-inline li { padding: 0; align-items: center; gap: var(--sp-4); }
.trust-inline li + li { border-top: 0; }
/* L'icône dans une pastille : à cette taille de bloc, une icône nue flotte. */
.trust-inline svg {
  width: 20px; height: 20px;
  box-sizing: content-box;
  padding: 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--success);
}
.trust-inline strong { font-size: 1rem; }
.trust-inline em { font-size: .88rem; }

@media (min-width: 700px) {
  /* Deux colonnes : quatre lignes empilées repousseraient le bouton hors de
     l'écran, ce qui irait contre le but recherché. `--sp-6` en gouttière pour
     que les deux colonnes ne se touchent pas visuellement. */
  .trust-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5) var(--sp-6);
  }
}
@media (max-width: 699px) {
  .trust-inline { display: flex; flex-direction: column; gap: var(--sp-4); }
  .trust-inline svg { padding: 9px; width: 18px; height: 18px; }
  .trust-inline strong { font-size: .95rem; }
}

/* --- Mode checkout épuré (2026-08-11) ------------------------------------ */
.checkout-header .header-inner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.checkout-header .checkout-secure {
  margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: .85rem; font-weight: 600; color: var(--success);
}
.checkout-header .checkout-back { font-size: .85rem; color: var(--muted); text-decoration: none; }
.checkout-header .checkout-back:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 600px) {
  /* À 390px les trois éléments ne tiennent pas : le retour au panier passe
     dessous plutôt que d'écraser la mention de sécurité. */
  .checkout-header .header-inner { flex-wrap: wrap; row-gap: var(--sp-2); }
  .checkout-header .checkout-back { flex: 1 0 100%; order: 3; }
}
.checkout-footer { background: var(--surface); border-top: 1px solid var(--border); padding: var(--sp-5) 0; text-align: center; }
.checkout-footer .pay-methods-inline { justify-content: center; margin-bottom: var(--sp-3); }
.checkout-footer-links { margin: 0 0 var(--sp-2); font-size: .85rem; }
.checkout-footer-links a { color: var(--text); text-decoration: none; }
.checkout-footer-links a:hover { text-decoration: underline; }
.checkout-footer-copy { margin: 0; font-size: .8rem; color: var(--muted); }

/* --- Checkout en accordéon (2026-08-11) -----------------------------------
   Le repli est posé par assets/js/checkout.js, jamais par ce CSS : sans
   JavaScript les deux cartes doivent rester ouvertes et le formulaire
   utilisable. On ne style donc ici que les états que le JS déclare. */
.form-card[data-step] > h2 { display: flex; align-items: center; gap: var(--sp-2); }
.step-edit {
  margin-left: auto; padding: 4px 10px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-pill);
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.step-edit:hover { border-color: var(--text); }
.step-summary p { margin: 0 0 2px; font-size: .9rem; color: var(--muted); }
.step-summary p:first-child { color: var(--text); font-weight: 600; }
.form-card[data-step].is-collapsed { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.step-next { margin-top: var(--sp-4); }
/* La carte franchie prend la coche du fil d'étapes : on lit sa progression sans
   avoir à relire son contenu. */
.form-card[data-step="details"].is-collapsed > h2 svg:first-child { color: var(--success); }

/* 🔴 `.form-card` porte un `display` : sans cette règle, `element.hidden = true`
   posé par checkout.js ne masque RIEN (la feuille par défaut n'applique
   `display:none` sur [hidden] qu'à spécificité nulle). Même piège que
   `.filter-row[hidden]` sur les filtres du catalogue. */
.form-card[hidden] { display: none; }

/* ============================================================================
   [hidden] — RÈGLE GÉNÉRIQUE (2026-08-11)

   Posée après trois occurrences du même piège dans la même journée :
   `.filter-row` (flex), `.swatch` (inline-block) et `.btn` (inline-flex)
   écrasaient tous l'attribut `hidden`, parce que la feuille par défaut du
   navigateur ne pose `display:none` sur [hidden] qu'à spécificité NULLE.
   Symptôme commun : du JavaScript qui masque sans rien masquer, sans la
   moindre erreur — le repli des filtres, le bouton « Continue » du checkout.

   `!important` est ici légitime : `hidden` veut dire caché, aucun cas d'usage
   ne demande le contraire. C'est la règle qu'embarquent les resets modernes.
   ============================================================================ */
[hidden] { display: none !important; }

/* --- Champs bloquants du checkout (2026-08-11) ----------------------------
   Aucun style n'existait pour `.woocommerce-invalid` : même les erreurs
   renvoyées par WooCommerce lui-même ne se voyaient pas. Ces règles servent
   donc aussi la validation serveur, pas seulement l'accordéon. */
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea {
  border-color: var(--sale);
  box-shadow: 0 0 0 3px rgba(176, 74, 53, .12);
}
.woocommerce-checkout .form-row.woocommerce-invalid label { color: var(--sale); }
.field-error {
  display: block;
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--sale);
}
/* Bandeau de tête : il doit se lire avant qu'on ait parcouru le formulaire. */
.step-alert {
  margin: 0 0 var(--sp-4);
  padding: 10px var(--sp-4);
  border-left: 3px solid var(--sale);
  border-radius: var(--r-sm);
  background: rgba(176, 74, 53, .07);
  font-size: .88rem;
  font-weight: 600;
  color: var(--sale);
}

/* --- Badges de paiement en SVG (2026-08-11) -------------------------------
   Remplacent les puces de texte : le visuel de marque rassure là où le mot
   ne fait qu'informer. Hauteur fixe, largeur libre — les logos gardent leur
   proportion quelle que soit la place disponible. */
.pay-badge {
  height: 26px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.pay-methods-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* Sur les lignes de moyen de paiement du checkout, les badges accompagnent un
   libellé : légèrement plus petits pour ne pas voler la vedette au libellé. */
body.woocommerce-checkout #payment ul.payment_methods li .pay-badge { height: 22px; }

/* ============================================================================
   FICHE PRODUIT — description sous la galerie (2026-08-11, proposition Cyril)

   Mesuré avant de bouger quoi que ce soit : le contenu de la galerie fait
   868px quand la colonne en occupe 1259 — soit ~390px de vide — pendant qu'une
   description de 1236 caractères en médiane restait fermée derrière un clic.
   Les recommandations 2026 réservent l'accordéon aux produits « à forte
   considération » et aux infos de vérification ; une description complète et
   bien écrite se lit, elle ne se déplie pas.

   ⚠️ Le bloc est APRÈS `.pdp-info` dans le DOM pour que le mobile (une seule
   colonne) garde l'ordre galerie -> achat -> description : remonter la
   description dans le DOM enterrerait le bouton d'achat sous 1236 caractères.
   Sur desktop seulement, la grille le replace sous la galerie.
   ============================================================================ */
.pdp-desc { margin-top: var(--sp-6); }
.pdp-desc h2 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.pdp-desc-body { font-size: .95rem; line-height: 1.65; color: var(--text); }
.pdp-desc-body p { margin: 0 0 var(--sp-3); }
.pdp-desc-body p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .pdp-layout { align-items: start; }
  .pdp-gallery { grid-column: 1; grid-row: 1; }
  /* La colonne d'achat occupe les deux rangées : elle reste en haut à droite,
     et la description vient combler le vide sous la galerie. */
  .pdp-info    { grid-column: 2; grid-row: 1 / span 2; }
  .pdp-desc    { grid-column: 1; grid-row: 2; }
}

/* --- Sélecteur de quantité resserré ---------------------------------------
   Il pesait 134px sur une colonne de 530 : trois éléments de 44px pour un
   chiffre qui vaut 1 dans l'immense majorité des commandes. Le bouton d'achat
   récupère la place. */
.qty button { width: 34px; height: 46px; font-size: 1.05rem; }
.qty input  { width: 36px; font-size: .95rem; }
/* 🔴 `.buy-row .btn-primary { flex: 1 }` (mockup.css) ne matchait plus depuis
   que le bouton d'achat porte `.btn-cta` : il avait cessé de s'étirer et se
   contentait de sa largeur naturelle. */
.buy-row .btn-cta { flex: 1; min-width: 180px; }

/* --- Description produit : amorce + dépliage (2026-08-11) ------------------
   ~750px de haut pour 7-8 paragraphes : entière elle repousse les produits
   associés très bas, fermée elle n'est pas lue. On montre ~8 lignes.
   Le repli est posé par pdp.js, jamais par ce CSS : sans JavaScript la
   description doit rester entière — c'est du contenu indexable. */
.pdp-desc-body.is-clamped {
  max-height: 13em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.pdp-desc-toggle {
  margin-top: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.pdp-desc-toggle .desc-less { display: none; }
.pdp-desc-toggle[aria-expanded="true"] .desc-more { display: none; }
.pdp-desc-toggle[aria-expanded="true"] .desc-less { display: inline; }

/* 🔴 Les descriptions WooCommerce commencent par un titre `<h2>` : sans mise à
   l'échelle, il sortait plus gros que le « Description » du thème lui-même et
   dévorait 3 des ~8 lignes de l'amorce — on ne lisait que deux lignes de texte
   réel avant le fondu. Même remise à l'échelle que `.catalog-intro-body`. */
.pdp-desc-body h1,
.pdp-desc-body h2,
.pdp-desc-body h3,
.pdp-desc-body h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
.pdp-desc-body > *:first-child { margin-top: 0; }
.pdp-desc-body a { color: var(--primary); text-decoration: underline; }
.pdp-desc-body ul,
.pdp-desc-body ol { margin: 0 0 var(--sp-3); padding-left: 1.2em !important; }
.pdp-desc-body li { margin-bottom: 4px; }


/* ==========================================================================
   Amazon Pay (plugin officiel, Checkout v2)
   Le bouton lui-meme est rendu par le script d'Amazon dans #pay_with_amazon :
   son interieur ne nous appartient pas. On ne maitrise que le conteneur, la
   largeur et le rythme vertical.
   ========================================================================== */

/* Separateur maison (celui du plugin est retire dans inc/amazon-pay.php :
   il sortait des tirets longs). Filets traces au pseudo-element pour rester
   centres quelle que soit la largeur du mot. */
.evd-express-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: lowercase;
}
.evd-express-sep::before,
.evd-express-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Reserve la hauteur du bouton Amazon AVANT que son script ne l'ait rendu :
   sans ca, la carte recapitulative saute au chargement (le bouton arrive apres
   un aller-retour reseau). 45px = hauteur du gabarit « medium » d'Amazon. */
#pay_with_amazon,
#classic_pay_with_amazon {
  display: block;
  width: 100%;
  min-height: 45px;
}

/* Au checkout, le bouton express est pose par woocommerce_before_checkout_form :
   on lui donne la meme respiration que les cartes du formulaire. */
.woocommerce-checkout #pay_with_amazon { margin-bottom: var(--sp-4); }

/* Fiche produit : le bouton express suit la ligne d'achat, il ne s'y insere pas.
   (Reglage « Amazon Pay on product pages » desactive par defaut.) */
.pdp-info #pay_with_amazon { margin-top: var(--sp-2); }


/* Largeur des actions de la carte recapitulative du panier (13/08, demande Cyril).
   Le CTA et le bouton express faisaient toute la largeur de la carte (390px en
   desktop), ce qui les rendait lourds. On les resserre et on les centre, en
   gardant le separateur a la MEME largeur pour que les trois restent alignes.
   Sous 1024px on garde la pleine largeur : la cible tactile prime. */
/* Le CTA du panier faisait 59px de haut (.btn-lg = 16px de padding vertical).
   Ramene a ~49px : plus sobre, et toujours au-dessus des 44px de cible tactile. */
.summary-card a.btn-cta.btn-lg { padding-top: 11px; padding-bottom: 11px; }

@media (min-width: 1024px) {
  .summary-card a.btn-cta,
  .summary-card .evd-express-sep,
  .summary-card #pay_with_amazon {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
  /* ⚠️ `.btn` est en `display: inline-flex` (mockup.css l.96) : un element de
     niveau INLINE ignore `margin: auto`, le bouton restait cale a gauche malgre
     le max-width. Il faut le passer en `flex` pour que le centrage prenne. */
  .summary-card a.btn-cta { display: flex; }
}


/* Adresse postale du pied de page et de la page Contact.
   `font-style: normal` est indispensable : les navigateurs mettent <address>
   en italique par defaut, ce qui jure avec le reste de la colonne. */
.evd-address{
  font-style:normal;
  margin:8px 0 0;
  line-height:1.6;
  color:var(--footer-muted,rgba(255,255,255,.62));
  font-size:.875rem;
}
.evd-address-company{font-weight:600}
.content-page .evd-address{color:var(--text);font-size:1rem}