/*
Theme Name: Dahabi enfant
Theme URI: https://dahabi.ma
Description: Theme enfant de Hello Elementor. Reconstruit l'en-tete, le pied de page et la fiche produit en PHP pour que le site se passe d'Elementor Pro, et porte la charte du site : Jost 600 pour les titres, Raleway pour le texte, brun 3F2E1D, bronze 7A5C25.
Author: dahabi.ma
Template: hello-elementor
Version: 1.15.1
Text Domain: dahabi
*/

/* Le thème Hello n'apporte presque aucun style : tout ce qui suit est
   nécessaire, rien n'est décoratif par confort.

   Les valeurs ne sont pas inventées, elles sont relevées dans le kit
   Elementor n°35 du site : brun #3F2E1D, texte #333333, blanc cassé
   #FAF7F2, gris clair #EDEDED, Jost 600 pour les titres et Raleway 400
   pour le texte. Seul l'accent a changé, sur décision du client :
   l'ocre #C6A23D mesurait 2,43 de contraste sur blanc là où il en faut
   4,5, le bronze #7A5C25 en mesure 6,20. */

:root {
  /* Encre et titres */
  --dh-brun: #3F2E1D;
  --dh-encre: #333333;
  --dh-doux: #7A6E60;
  --dh-noir: #000000;

  /* Accent */
  --dh-accent: #7A5C25;
  --dh-accent-doux: #F0E9DA;

  /* Fonds et filets */
  --dh-fond: #ffffff;
  --dh-casse: #FAF7F2;
  --dh-fond-pied: #FAF7F2;
  --dh-gris: #EDEDED;
  --dh-trait: #E3DDD3;

  /* Typographies du kit */
  --dh-titre: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dh-texte: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --dh-large: 1180px;
}

/* ── Fondations typographiques ────────────────────────────────────

   Le kit ne renseigne pas « Typographie du corps ». Elementor
   n'applique donc Raleway qu'à l'intérieur de ses propres conteneurs :
   les pages construites avec lui étaient en Raleway, tout le reste
   (fiche produit, panier, commande, blog, recherche) tombait sur la
   police système du navigateur. Deux typographies sur un même site,
   selon la page. C'est corrigé ici, à la racine.
   ------------------------------------------------------------------ */

body,
button,
input,
select,
textarea,
.woocommerce-page,
.elementor-widget-text-editor,
.elementor-widget-shortcode {
  font-family: var(--dh-texte);
  color: var(--dh-encre);
}

body {
  font-size: 16px;
  line-height: 1.75;
  background: var(--dh-fond);
  -webkit-font-smoothing: antialiased;
}

/* PIEGE Elementor : les titres sont colorés et composés par la
   typographie globale du kit, qui vise .elementor-heading-title.
   Surcharger h1/h2/h3 seuls ne suffit pas, il faut viser la classe. */
.dahabi h1, .dahabi h2, .dahabi h3,
.dahabi h4, .dahabi h5, .dahabi h6,
.elementor-heading-title,
.woocommerce-loop-product__title,
.product_title,
.entry-title {
  font-family: var(--dh-titre);
  font-weight: 600;
  color: var(--dh-brun);
  line-height: 1.2;
  text-wrap: balance;
}

.dahabi h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 2.75rem; }
.dahabi h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 2.125rem; }
.dahabi h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 1.5rem; }
.dahabi h4 { font-size: 1.25rem; }

@media (max-width: 768px) {
  .dahabi h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 2rem; }
  .dahabi h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 1.625rem; }
  .dahabi h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 1.3rem; }
}

/* Le texte courant respire : 70 caractères par ligne au maximum, au
   delà l'oeil perd la ligne suivante en revenant à la marge. */
p { margin: 0 0 1.15em; }

a { color: var(--dh-brun); text-decoration: none; }

/* « .elementor-kit-35 a:hover { color: #000 } » pese (0,1,1) : sans le
   prefixe, tous les survols du site viraient au noir au lieu du bronze. */
.dahabi a:hover { color: var(--dh-accent); }

:focus-visible {
  outline: 2px solid var(--dh-accent);
  outline-offset: 3px;
}

/* Une capitale espacée sert d'étiquette : catégorie, mention, surtitre.
   C'est le seul ornement typographique de la charte. */
.dahabi-etiquette {
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

blockquote {
  margin: 2rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--dh-accent);
  font-size: 1.1rem;
  color: var(--dh-brun);
}

hr { border: 0; border-top: 1px solid var(--dh-trait); margin: 2.5rem 0; }

/* ── En-tête ──────────────────────────────────────────────────────── */

.dahabi-entete {
  background: var(--dh-fond);
  border-bottom: 1px solid var(--dh-trait);
  position: relative;
}

/* Hello pose sur .site-header, qui est le meme element, un
   display:flex avec max-width:1140px et justify-content:space-between.
   Notre conteneur interieur devenait donc un ELEMENT flex : son
   margin:0 auto le centrait sur sa largeur de contenu au lieu de
   l'etendre, et l'en-tete entier se resserrait au milieu de la page.
   On rend la balise a un affichage en bloc, la largeur revient a
   .dahabi-entete-inner et le filet du bas retrouve toute la page. */
.dahabi-entete.site-header {
  display: block;
  max-width: none;
  padding: 0;
}

.dahabi-entete-inner {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.dahabi-logo img {
  display: block;
  width: auto;
  height: 64px;
}

.dahabi-nav {
  margin-inline-start: auto;
}

.dahabi-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dahabi-menu a {
  color: var(--dh-brun);
  text-decoration: none;
  font-family: var(--dh-titre);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .45rem 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.dahabi-menu a:hover,
.dahabi-menu .current-menu-item > a {
  color: var(--dh-brun);
  border-bottom-color: var(--dh-accent);
}

/* Sous-menus : sans cette règle ils s'empilent dans le flux et poussent
   le reste de l'en-tête vers le bas. */
.dahabi-menu li {
  position: relative;
}

.dahabi-menu .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  min-width: 200px;
  background: var(--dh-fond);
  border: 1px solid var(--dh-trait);
  padding: .5rem 0;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 30;
}

.dahabi-menu li:hover > .sub-menu,
.dahabi-menu li:focus-within > .sub-menu {
  display: block;
}

.dahabi-menu .sub-menu a {
  display: block;
  padding: .55rem 1.1rem;
  border: 0;
  font-size: .9rem;
  color: var(--dh-doux);
}

.dahabi-menu .sub-menu a:hover { color: var(--dh-brun); background: var(--dh-casse); }

/* ── Outils : langue, recherche, panier ──────────────────────────
   Disposition « menu A ». Le champ de recherche large disparait au
   profit d'une loupe qui le deplie sous la ligne, la pastille grise du
   selecteur redevient du texte, et la pastille rouge du panier redevient
   un chiffre.
   ------------------------------------------------------------------ */

.dahabi-outils {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-inline-start: .5rem;
}

.dahabi-langues {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
}

.dahabi-langues a { color: #BDB4A6; text-decoration: none; }
.dahabi-langues a:hover { color: var(--dh-accent); }
.dahabi-langue-active { color: var(--dh-encre); }
.dahabi-langues [lang="ar"] { font-size: 1.2em; }
.dahabi-sep { color: #D8D1C4; }

.dahabi-loupe {
  display: flex;
  align-items: center;
  color: var(--dh-encre);
  cursor: pointer;
  padding: .25rem;
}
.dahabi-loupe:hover { color: var(--dh-accent); }

/* La case a cocher pilote l'ouverture : aucun script a charger. */
.dahabi-bascule-recherche { position: absolute; opacity: 0; pointer-events: none; }
.dahabi-bascule-recherche:focus-visible + .dahabi-loupe {
  outline: 2px solid var(--dh-accent);
  outline-offset: 3px;
}

.dahabi-panier {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--dh-encre);
}
.dahabi-panier:hover { color: var(--dh-accent); }

.dahabi-panier-nombre {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--dh-encre);
}
.dahabi-panier-nombre.est-vide { display: none; }

/* Le champ deplie occupe toute la largeur, sous la ligne de l'en-tete. */
.dahabi-recherche {
  display: none;
  order: 20;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dh-trait);
}

.dahabi-bascule-recherche:checked ~ .dahabi-recherche {
  display: flex;
  gap: .75rem;
}

.dahabi-recherche input[type="search"] {
  flex-grow: 1;
  border: 0;
  border-bottom: 1px solid var(--dh-trait);
  background: transparent;
  padding: .6rem 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--dh-encre);
}
.dahabi-recherche input[type="search"]:focus {
  outline: 0;
  border-bottom-color: var(--dh-accent);
}

.dahabi-recherche button {
  border: 0;
  background: var(--dh-encre);
  color: #fff;
  padding: .7rem 1.6rem;
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.dahabi-recherche button:hover { background: var(--dh-accent); }

/* ── Menu mobile, sans JavaScript ─────────────────────────────────── */

.dahabi-bascule,
.dahabi-burger {
  display: none;
}

@media (max-width: 900px) {
  .dahabi-outils {
    gap: 1rem;
    margin-inline-start: 0;
  }

  .dahabi-logo img {
    height: 48px;
  }

  .dahabi-burger {
    display: block;
    margin-inline-start: auto;
    cursor: pointer;
    padding: .5rem;
  }

  .dahabi-burger span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px 0;
    background: var(--dh-encre);
  }

  .dahabi-nav {
    display: none;
    order: 10;
    width: 100%;
    margin: 0;
  }

  /* La case à cocher masquée pilote l'ouverture : aucun script à charger,
     et rien qui casse si un script échoue ailleurs sur la page. */
  .dahabi-bascule:checked ~ .dahabi-nav {
    display: block;
  }

  .dahabi-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0 1rem;
  }

  .dahabi-menu > li > a {
    display: block;
    padding: .7rem 0;
    border-bottom: 1px solid var(--dh-trait);
  }

  .dahabi-menu .sub-menu {
    position: static;
    display: block;
    border: 0;
    padding-inline-start: 1rem;
  }
}

/* ── Pied de page ─────────────────────────────────────────────────── */

/* MEME PIEGE QUE L'EN-TETE, et il a fallu le trouver deux fois : Hello
   pose sur « .site-footer » un max-width de 1140 px et un rembourrage
   lateral. Le fond creme du pied s'arretait donc a 1140 px au milieu de
   la page au lieu d'aller d'un bord a l'autre. On rend la balise a un
   affichage en bloc, la largeur revient a .dahabi-pied-colonnes. */
.dahabi-pied.site-footer {
  display: block;
  max-width: none;
  padding-inline: 1.25rem;
  margin: 0;
}

.dahabi-pied {
  background: var(--dh-fond-pied);
  border-top: 1px solid var(--dh-trait);
  margin-top: 5rem;
  padding: 5rem 0 2rem;
  color: var(--dh-encre);
}

.dahabi-pied-colonnes {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
  gap: 4rem 3.5rem;
}

.dahabi-pied-bloc h2 {
  font-family: var(--dh-titre);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dh-brun);
  margin: 0 0 1.4rem;
  padding-bottom: .8rem;
  position: relative;
}

/* Une réglette bronze de 24 px sous chaque intitulé. C'est le seul
   ornement du pied de page, et il suffit à le tenir. */
.dahabi-pied-bloc h2::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--dh-accent);
}

.dahabi-pied-bloc p {
  color: var(--dh-doux);
  margin: 0 0 1rem;
  line-height: 1.75;
  font-size: .9375rem;
  max-width: 34ch;
}

/* La languette d'origine, une image verticale de 429 x 1200, occupait
   336 px de haut pour 120 de large et desequilibrait la premiere
   colonne. Le logo rond du site prend sa place. La regle reste au cas
   ou l'image reviendrait quelque part. */
.dahabi-languette {
  display: block;
  width: 120px;
  height: auto;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.dahabi-pied-logo {
  display: block;
  width: 74px;
  height: auto;
  margin-bottom: 1.3rem;
}

.dahabi-pied-marque-nom {
  font-family: var(--dh-titre);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dh-brun);
  margin: 0 0 .7rem;
}

/* La colonne de marque n'a pas d'intitulé : c'est une signature, pas
   une liste. Elle n'a donc pas la réglette bronze. */
.dahabi-pied-marque h2 { display: none; }

.dahabi-pied-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dahabi-pied-menu li {
  margin-bottom: .7rem;
  line-height: 1.45;
  font-size: .9375rem;
}

.dahabi-pied-menu a {
  color: var(--dh-doux);
  text-decoration: none;
}

.dahabi-pied-menu a:hover {
  color: var(--dh-accent);
}

.dahabi-lien-contact {
  display: inline-block;
  margin-top: .4rem;
  padding: .85rem 1.75rem;
  border: 1px solid var(--dh-brun);
  color: var(--dh-brun);
  text-decoration: none;
  font-family: var(--dh-titre);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .18s ease, color .18s ease;
}

.dahabi-lien-contact:hover {
  border-color: var(--dh-accent);
  color: var(--dh-accent);
}

.dahabi-pied-bas {
  max-width: 1140px;
  margin: 4rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--dh-trait);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--dh-doux);
  font-size: .9rem;
}

.dahabi-pied-bas p {
  margin: 0;
}

.dahabi-reseaux {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dahabi-reseaux a {
  color: var(--dh-doux);
  text-decoration: none;
}

.dahabi-reseaux a:hover {
  color: var(--dh-accent);
}

@media (max-width: 900px) {
  .dahabi-pied-colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 560px) {
  .dahabi-pied-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Cartes produit, reprises du Personnalisateur ──────────────────
   Ce bloc vient du CSS additionnel que le client avait posé sur le thème
   Hello. Changer de thème remet ce champ à zéro : le CSS additionnel est
   stocké dans les réglages DU THÈME, comme les emplacements de menu.
   D'où sa place ici, dans un fichier versionné qui ne se perdra plus.

   Une modification volontaire par rapport à l'original : la règle de prix
   listait aussi « ul.products li.product » parmi ses sélecteurs, ce qui
   appliquait « display: block !important » à la carte entière. Cette
   déclaration écrasait la grille des blocs [products] et cassait
   l'alignement des prix en bas de carte. Le reste du style de carte est
   conservé à l'identique, seul le display est retiré.
   ------------------------------------------------------------------ */

ul.products li.product {
  background: var(--dh-casse);
  padding: 0 0 1.5rem !important;
  text-align: center;
}

/* Mesuré sur la boutique : la plupart des visuels sont carrés (600 x
   600), trois ou quatre sont des photos d'ambiance en 600 x 427. Les
   titres se plaçaient donc à des hauteurs différentes d'une carte à
   l'autre, et la tuile crème gardait un vide en bas. Le cadrage carré
   aligne toute la grille ; seules les photos non carrées sont
   recadrées, et le sujet y est centré. */
ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  margin: 0 0 .25rem;
  mix-blend-mode: multiply;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dh-titre) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: var(--dh-brun) !important;
  padding: 1.15rem 1rem .3rem !important;
  margin: 0;
}

ul.products li.product .woocommerce-Price-amount,
ul.products li.product .price {
  display: block !important;
  font-family: var(--dh-titre) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  color: var(--dh-accent) !important;
  text-align: center;
  margin: 0;
}

/* Le bouton « Choix des options » n'a rien à faire sur une grille : il
   ajoute au panier sans laisser choisir le format, ou renvoie vers la
   fiche produit, ce que fait déjà l'image. */
ul.products li.product a.add_to_cart_button {
  display: none !important;
}

ul.products li.product {
  transition: background-color .22s ease;
}

ul.products li.product:hover {
  background: var(--dh-accent-doux);
}

.dahabi-courriel a {
  color: var(--dh-accent);
  text-decoration: none;
  font-weight: 600;
}

/* ── Fiche produit ────────────────────────────────────────────────
   Le gabarit natif de WooCommerce prend le relais du gabarit Pro. Hello
   n'apportant aucun style, ces quelques règles rétablissent la mise en
   page à deux colonnes du gabarit d'origine.
   ------------------------------------------------------------------ */

.woocommerce div.product {
  max-width: var(--dh-large);
  margin: 2rem auto;
  padding: 0 1.25rem;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 48%;
  float: left;
}

.woocommerce div.product div.summary {
  margin-inline-start: 4%;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.dahabi-expiration {
  clear: both;
}

.dahabi-expiration {
  margin: 1.5rem 0;
  color: var(--dh-doux);
}

.woocommerce div.product .product_title {
  font-size: 2.125rem;
  line-height: 1.15;
  margin-bottom: .6rem;
}

.woocommerce div.product p.price {
  font-family: var(--dh-titre);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dh-accent);
  margin-bottom: 1.5rem;
}

/* Les onglets de WooCommerce arrivent avec des angles arrondis, une
   ombre et un fond gris. Rien de cela n'existe ailleurs sur le site. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 3rem 0 0;
  border-bottom: 1px solid var(--dh-trait);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 2rem 0 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--dh-titre);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dh-doux);
  padding: .85rem 0;
  display: block;
  border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--dh-brun);
  border-bottom-color: var(--dh-accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding-top: 1.75rem;
  max-width: 52rem;
  line-height: 1.8;
}

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-size: 1.25rem;
  margin: 2.25rem 0 .7rem;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
  padding-inline-start: 1.35rem;
}

.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: .4em; }

/* Le chapeau de la colonne de droite : c'est le texte que le client lit
   en premier, il mérite un cran de plus que le corps. */
.woocommerce-product-details__short-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--dh-encre);
}

.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-size: 1.5rem;
  margin: 3.5rem 0 1.75rem;
  padding-top: 3rem;
  border-top: 1px solid var(--dh-trait);
}

.woocommerce .product_meta {
  font-size: .85rem;
  color: var(--dh-doux);
  border-top: 1px solid var(--dh-trait);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.woocommerce .product_meta a { color: var(--dh-doux); }
.woocommerce .product_meta a:hover { color: var(--dh-accent); }

.woocommerce-breadcrumb {
  max-width: var(--dh-large);
  margin: 1.5rem auto .5rem;
  padding: 0 1.25rem;
  font-size: .8125rem;
  color: var(--dh-doux);
}

.woocommerce-breadcrumb a { color: var(--dh-doux); }
.woocommerce-breadcrumb a:hover { color: var(--dh-accent); }

@media (max-width: 768px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100%;
    float: none;
    margin-inline-start: 0;
  }
}

/* ── Archives et page des articles ────────────────────────────────
   Le widget « posts » d'Elementor Pro laisse place à l'archive native.
   Hello ne la met pas en forme : ces règles donnent une grille lisible.
   ------------------------------------------------------------------ */

.archive .site-main,
.blog .site-main,
.search .site-main {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.archive .site-main > article,
.blog .site-main > article,
.search .site-main > article {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--dh-trait);
}

.archive .site-main > article:last-of-type,
.blog .site-main > article:last-of-type {
  border-bottom: 0;
}

.archive .entry-title,
.blog .entry-title,
.search .entry-title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
}

.archive .entry-title a,
.blog .entry-title a,
.search .entry-title a {
  color: var(--dh-brun);
  text-decoration: none;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
  color: var(--dh-accent);
}

.archive .post-thumbnail img,
.blog .post-thumbnail img {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-bottom: 1rem;
}

.archive .entry-meta,
.blog .entry-meta {
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
  margin-bottom: .75rem;
}

.pagination,
.nav-links {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.pagination .page-numbers,
.nav-links .page-numbers {
  min-width: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--dh-trait);
  font-family: var(--dh-titre);
  font-size: .9rem;
  text-align: center;
  color: var(--dh-brun);
  text-decoration: none;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--dh-accent);
  border-color: var(--dh-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   Correctifs après le premier essai sans Elementor Pro
   ══════════════════════════════════════════════════════════════════ */

/* ── Logo ─────────────────────────────────────────────────────────
   La règle visait « .dahabi-logo img ». Elle ne s'appliquait pas parce
   que the_custom_logo() imbriquait une seconde ancre dans la nôtre : le
   navigateur refermait la première et sortait l'image du conteneur.
   Le PHP est corrigé ; on cible en plus la classe posée sur l'image,
   pour que la taille tienne quel que soit le balisage.
   ------------------------------------------------------------------ */

.dahabi-logo,
.dahabi-logo a {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.dahabi-logo img,
.dahabi-logo-img,
.dahabi-entete .custom-logo {
  display: block;
  width: auto;
  height: 72px;
  max-height: 72px;
  max-width: none;
}

@media (max-width: 900px) {
  .dahabi-logo img,
  .dahabi-logo-img,
  .dahabi-entete .custom-logo {
    height: 56px;
    max-height: 56px;
  }
}

/* Le sélecteur de langue a quitté le menu pour la zone d'outils, où il
   est rendu en texte simple. Les règles de pastille qui vivaient ici ne
   servent plus. La sécurité reste : si un menu en contenait encore un,
   il ne serait pas mis en avant. */
.dahabi-menu .pll-parent-menu-item > a,
.dahabi-menu .lang-item a {
  border-bottom: 0;
}

/* Le compteur est un chiffre, pas une pastille : voir le bloc
   « Outils » plus haut. Le rouge était la seule couleur vive du site et
   il servait à signaler un objet dans un panier. */

/* ── Page des articles ────────────────────────────────────────────
   Balisage réel de Hello, relevé sur la page :

     <article class="post">
       <h2 class="entry-title"><a>…</a></h2>
       <a><picture class="wp-post-image">…</picture></a>
       <p>extrait</p>
     </article>

   Deux surprises. L'image est enveloppée dans un lien, donc l'élément
   flex à ordonner est le <a>, pas l'image. Et Imagify remplace <img> par
   <picture> en déplaçant la classe : « img.wp-post-image » ne désigne
   rien sur ce site.
   ------------------------------------------------------------------ */

.blog .page-header,
.archive .page-header,
.search .page-header {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 2.5rem 1.25rem .5rem;
}

.blog .page-header .entry-title,
.archive .page-header .entry-title,
.search .page-header .entry-title {
  font-size: 2.25rem;
  margin: 0;
  color: var(--dh-brun);
}

.blog .page-content,
.archive .page-content,
.search .page-content {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

.blog .page-content > article,
.archive .page-content > article,
.search .page-content > article {
  display: flex;
  flex-direction: column;
  background: var(--dh-casse);
  overflow: hidden;
  transition: background-color .22s ease;
}

.blog .page-content > article:hover,
.archive .page-content > article:hover {
  background: var(--dh-accent-doux);
}

/* Le lien qui porte l'image : seul enfant direct de type <a>. */
.blog .page-content > article > a,
.archive .page-content > article > a,
.search .page-content > article > a {
  order: 1;
  display: block;
  line-height: 0;
}

.blog .page-content > article > a picture,
.archive .page-content > article > a picture,
.search .page-content > article > a picture {
  display: block;
}

.blog .page-content > article > a .wp-post-image,
.blog .page-content > article > a img,
.archive .page-content > article > a .wp-post-image,
.archive .page-content > article > a img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.blog .page-content > article > .entry-title,
.archive .page-content > article > .entry-title,
.search .page-content > article > .entry-title {
  order: 2;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 1.25rem 1.4rem .6rem;
}

.blog .page-content > article > .entry-title a,
.archive .page-content > article > .entry-title a,
.search .page-content > article > .entry-title a {
  color: var(--dh-brun);
  text-decoration: none;
}

.blog .page-content > article > .entry-title a:hover,
.archive .page-content > article > .entry-title a:hover {
  color: var(--dh-accent);
}

.blog .page-content > article > p,
.archive .page-content > article > p,
.search .page-content > article > p {
  order: 3;
  margin: 0 1.4rem 1.6rem;
  color: var(--dh-encre);
  line-height: 1.65;
  font-size: .9375rem;
}

@media (max-width: 900px) {
  .blog .page-content,
  .archive .page-content,
  .search .page-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .blog .page-content,
  .archive .page-content,
  .search .page-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Boutons WooCommerce ──────────────────────────────────────────
   Elementor Pro habillait le panier et la commande depuis les réglages
   du site. Sans lui, WooCommerce reprend son violet d'usine. On rétablit
   le noir de la charte.
   ------------------------------------------------------------------ */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.wc-block-components-button,
.wp-element-button {
  background: var(--dh-noir);
  color: #fff;
  border-radius: 0;
  border: 0;
  padding: 1rem 2.25rem;
  font-family: var(--dh-titre);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
  line-height: 1.2;
  transition: background-color .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:hover,
.wp-element-button:hover {
  background: var(--dh-brun);
  color: #fff;
}

/* Le bouton d'Elementor suit la meme regle. Deux pieges cumules :
   le widget rend <div class="ma-classe"><a class="elementor-button">,
   donc on vise le <a> et non la boite ; et le kit impose son propre
   rembourrage de 10 px avec un selecteur a deux classes, qu'il faut
   depasser d'une classe pour retrouver le bouton de la charte. */
.dahabi .elementor-widget-button .elementor-button,
.dahabi .elementor-button {
  font-family: var(--dh-titre);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
  line-height: 1.3;
  border-radius: 0;
  padding: 1rem 1.9rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.dahabi .elementor-widget-button .elementor-button:hover {
  background-color: var(--dh-brun);
  color: #fff;
}

.woocommerce div.product form.cart .button {
  width: auto;
}

/* ── Panier et commande ───────────────────────────────────────────
   Le tunnel mélange les blocs Gutenberg de WooCommerce sur le panier et
   le formulaire classique sur la commande. Les deux tombaient sur les
   styles d'usine.
   ------------------------------------------------------------------ */

.woocommerce-cart .page-content,
.woocommerce-checkout .page-content,
.woocommerce-account .page-content {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

.woocommerce-cart .page-header,
.woocommerce-checkout .page-header,
.woocommerce-account .page-header {
  max-width: var(--dh-large);
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 500;
  color: var(--dh-encre);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"] {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  background: #fff;
  font: inherit;
  color: var(--dh-encre);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus {
  outline: 0;
  border-color: var(--dh-accent);
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: #fff;
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dh-doux);
  margin: 0 0 1.25rem;
}

.woocommerce table.shop_table {
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--dh-trait);
  text-align: start;
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: 0;
}

.woocommerce .woocommerce-checkout-payment {
  background: var(--dh-fond-pied);
}

.woocommerce ul.wc_payment_methods li {
  list-style: none;
  padding: .5rem 0;
}

.woocommerce #place_order {
  width: 100%;
  margin-top: 1rem;
}

.woocommerce-price-amount,
.woocommerce .amount,
.wc-block-components-totals-item__value {
  color: var(--dh-accent);
  font-weight: 600;
}

/* ── Boutons, variante « alt » ────────────────────────────────────
   WooCommerce distingue le bouton principal par la classe « alt » et le
   cible avec un sélecteur plus spécifique que le nôtre :

     .woocommerce button.button.alt   (0,3,1)
     .woocommerce button.button       (0,2,1)

   Le violet d'usine gagnait donc sur la fiche produit. On reprend la
   même spécificité.
   ------------------------------------------------------------------ */

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-forward {
  background: var(--dh-noir);
  color: #fff;
  border-radius: 0;
  border: 0;
  padding: .95rem 2rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .9rem;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .wc-forward:hover {
  background: var(--dh-accent);
  color: #fff;
}

/* Le bouton de quantite et le champ nombre doivent s'aligner sur le
   bouton, sinon la ligne d'achat part de travers. */
.woocommerce div.product form.cart .quantity input.qty {
  padding: .8rem .5rem;
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  text-align: center;
  width: 4rem;
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ── Recherche et pagination ──────────────────────────────────────
   Hello rend la pagination en « nav.pagination > div.nav-previous » et
   non en liste de numéros : les règles écrites pour .page-numbers ne
   trouvaient rien.
   ------------------------------------------------------------------ */

.dahabi-compte-resultats {
  color: var(--dh-doux);
  margin: .5rem 0 0;
}

.dahabi-aucun-resultat {
  grid-column: 1 / -1;
  color: var(--dh-doux);
  font-size: 1.05rem;
}

.pagination {
  max-width: var(--dh-large);
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.pagination a {
  display: inline-block;
  padding: .6rem 1.4rem;
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  color: var(--dh-encre);
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--dh-accent);
  color: var(--dh-accent);
}

.search .page-header .entry-title span {
  color: var(--dh-accent);
}

/* ── Article seul et pages sans Elementor ─────────────────────────
   Hello rend l'article dans « .page-header > h1.entry-title » puis
   « .page-content », sans aucune mise en forme : le texte occupait
   toute la largeur de l'écran, soit près de 200 caractères par ligne
   sur un grand moniteur. L'oeil perd la ligne suivante bien avant.

   PIEGE : « .page-content » sert AUSSI d'enveloppe aux pages
   construites avec Elementor. Une largeur de lecture posée dessus sans
   condition écraserait la page d'accueil. D'où le
   « body:not(.elementor-page) », qui laisse Elementor tranquille.
   ------------------------------------------------------------------ */

body:not(.elementor-page):not(.blog):not(.archive):not(.search) .page-header {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 0;
}

body:not(.elementor-page):not(.blog):not(.archive):not(.search) .page-header .entry-title {
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0;
}

.single .page-header {
  border-bottom: 1px solid var(--dh-trait);
  padding-bottom: 1.75rem;
}

body:not(.elementor-page):not(.blog):not(.archive):not(.search) .page-content {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font-size: 1.0625rem;
  line-height: 1.8;
}

body:not(.elementor-page) .page-content h2 {
  font-size: 1.625rem;
  margin: 2.75rem 0 .9rem;
}

body:not(.elementor-page) .page-content h3 {
  font-size: 1.25rem;
  margin: 2.25rem 0 .75rem;
}

body:not(.elementor-page) .page-content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2rem 0;
}

body:not(.elementor-page) .page-content ul,
body:not(.elementor-page) .page-content ol {
  padding-inline-start: 1.35rem;
  margin: 0 0 1.35em;
}

body:not(.elementor-page) .page-content li { margin-bottom: .45em; }

body:not(.elementor-page) .page-content a {
  color: var(--dh-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body:not(.elementor-page) .page-content a:hover { color: var(--dh-brun); }

/* Un article se termine souvent sur une grille de produits posée par
   shortcode. Elle a besoin d'air et d'un filet qui la sépare du texte. */
body:not(.elementor-page) .page-content .woocommerce {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--dh-trait);
}

/* ── Tableaux et formulaires ──────────────────────────────────────
   Hello ne style ni les uns ni les autres : sans ces règles, ils
   tombent sur les styles d'usine du navigateur, qui n'ont rien à voir
   avec le reste du site.
   ------------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: .95rem;
}

th, td {
  text-align: start;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--dh-trait);
  vertical-align: top;
}

th {
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  background: var(--dh-fond);
  padding: .8rem .9rem;
  font-family: var(--dh-texte);
  font-size: 1rem;
  color: var(--dh-encre);
  max-width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--dh-accent);
}

label { font-size: .9rem; color: var(--dh-encre); }

/* ── Arabe ────────────────────────────────────────────────────────
   Les deux polices du kit ne couvrent pas l'alphabet arabe. Tajawal
   prend le relais sur les pages RTL, chargée par functions.php
   uniquement là. Le latin qui apparaît dans un texte arabe (un prix en
   DH, un nom latin) reste sur les polices du kit, citées après.
   ------------------------------------------------------------------ */

.rtl {
  --dh-titre: Tajawal, Jost, "Helvetica Neue", Arial, sans-serif;
  --dh-texte: Tajawal, Raleway, "Helvetica Neue", Arial, sans-serif;
}

.rtl body,
.rtl .elementor-heading-title,
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6,
.rtl .elementor-widget-text-editor,
.rtl .elementor-button,
.rtl button,
.rtl input,
.rtl select,
.rtl textarea {
  font-family: var(--dh-texte);
}

.rtl .elementor-heading-title,
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6,
.rtl .woocommerce-loop-product__title,
.rtl .product_title,
.rtl .entry-title,
.rtl .elementor-button {
  font-family: var(--dh-titre);
}

/* L'arabe a des jambages plus hauts que le latin : une interligne de
   1,2 sur un titre colle les lignes entre elles. */
.rtl h1, .rtl h2, .rtl h3,
.rtl .elementor-heading-title { line-height: 1.4; }
.rtl body { line-height: 1.9; }

/* Les widgets Elementor qui n'ont pas de police propre suivent la
   « Principal » du kit, c'est-à-dire Jost, par la règle
   « .elementor-widget-heading .elementor-heading-title » de spécificité
   (0,2,0). Notre règle « .rtl .elementor-heading-title » pesait le même
   poids et perdait sur l'ordre de chargement, la feuille de page étant
   servie après celle du thème. Le préfixe de classe supplémentaire
   suffit à passer devant, sans un seul !important. */

.rtl .elementor-widget-heading .elementor-heading-title,
.rtl .elementor-widget-heading h1,
.rtl .elementor-widget-heading h2,
.rtl .elementor-widget-heading h3 {
  font-family: var(--dh-titre);
}

.rtl .elementor-widget-text-editor,
.rtl .elementor-widget-text-editor p,
.rtl .elementor-widget-text-editor li {
  font-family: var(--dh-texte);
}

.rtl .elementor-widget-button .elementor-button {
  font-family: var(--dh-titre);
}

/* ── Panier en blocs ──────────────────────────────────────────────
   Constaté sur le site : la page Panier utilise le BLOC WooCommerce
   (« wp-block-woocommerce-cart »), alors que la page Commande est une
   page Elementor qui appelle le shortcode classique. Les deux ne
   partagent aucune classe. Les règles « .woocommerce » plus haut ne
   touchaient donc pas le panier, qui restait aux styles d'usine et
   occupait toute la largeur de l'écran, marges comprises.
   ------------------------------------------------------------------ */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: var(--dh-large);
  margin: 2.5rem auto 4rem;
  padding: 0 1.25rem;
}

.wc-block-cart__totals-title,
.wc-block-components-title {
  font-family: var(--dh-titre) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dh-doux) !important;
}

.wc-block-cart-items__header th,
.wc-block-cart-items__header {
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
  border-bottom: 1px solid var(--dh-trait);
}

.wc-block-cart-items__row td { border-bottom: 1px solid var(--dh-trait); }

.wc-block-components-product-name {
  font-family: var(--dh-titre);
  font-weight: 600;
  color: var(--dh-brun);
}

.wc-block-components-product-name:hover { color: var(--dh-accent); }

.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
  font-family: var(--dh-titre);
  font-weight: 500;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--dh-accent);
  font-size: 1.35rem;
}

.wc-block-components-totals-item__label {
  font-family: var(--dh-texte);
  color: var(--dh-encre);
}

.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--dh-trait);
}

/* Le bouton du bloc a sa propre classe et son propre arrondi. */
.wc-block-cart__submit-button,
.wc-block-components-button {
  background: var(--dh-noir) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--dh-titre);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-button:hover { background: var(--dh-brun) !important; }

/* Les produits suggérés sous le panier ont leur propre balisage,
   « .cross-sells-product », sans rapport avec le « li.product » de la
   boutique : ni la tuile crème ni le style de bouton ne les
   atteignaient, et le bouton d'achat restait au vert d'usine des blocs.

   Ici, contrairement à la grille de la boutique, le bouton reste : sur
   la page panier, ajouter un pot en un clic a du sens. C'est sa couleur
   qui n'allait pas, pas sa présence. */
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
  background: var(--dh-casse);
  padding: 0 0 1.4rem;
  text-align: center;
  transition: background-color .22s ease;
}

.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product:hover {
  background: var(--dh-accent-doux);
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-title {
  font-family: var(--dh-titre);
  font-size: 1rem;
  margin: 1rem 1rem .3rem;
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-price {
  color: var(--dh-accent);
}

/* Le bloc rend un <div class="wp-block-button"> qui enveloppe un
   <a class="wp-block-button__link"> : styler la boîte donnerait une
   pilule pleine largeur avec le bouton d'origine dedans. */
.wp-block-woocommerce-cart-cross-sells-block .wp-block-button__link,
.wp-block-woocommerce-cart-cross-sells-block button.wc-block-components-product-button__button {
  background: transparent !important;
  color: var(--dh-brun) !important;
  border: 1px solid var(--dh-brun) !important;
  border-radius: 0 !important;
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem 1.2rem !important;
}

.wp-block-woocommerce-cart-cross-sells-block .wp-block-button__link:hover,
.wp-block-woocommerce-cart-cross-sells-block button.wc-block-components-product-button__button:hover {
  background: var(--dh-brun) !important;
  color: #fff !important;
}

.wp-block-woocommerce-cart-cross-sells-block .wp-block-heading {
  font-family: var(--dh-titre);
  font-size: 1.5rem !important;
  color: var(--dh-brun);
}

/* ── Filtre de la boutique ────────────────────────────────────────
   Deux raisons au filtre sans style. La première est dans les réglages
   du widget : le client l'avait mis en forme, pilules vertes arrondies,
   mais dans le champ « CSS personnalisé » d'Elementor, qui est une
   fonction PRO. Elementor Pro désactivé, ce CSS reste enregistré et
   n'est jamais restitué. La seconde est que la feuille de
   JetSmartFilters, « public.css », se charge APRÈS celle du thème : à
   poids de sélecteur égal elle gagnait. D'où les sélecteurs préfixés
   ci-dessous, qui pèsent une classe de plus.

   Le rendu visé est une ligne d'onglets, comme les onglets de la fiche
   produit : capitales espacées, filet bronze sous l'actif.
   ------------------------------------------------------------------ */

/* Le filtre s'alignait sur son conteneur, 1365 px, quand la grille de
   produits en dessous fait 1140 : les onglets debordaient de part et
   d'autre des fiches. Meme largeur, meme centrage. */
.jet-smart-filters-radio.jet-filter {
  max-width: 1140px;
  margin: 0 auto 2.5rem;
  border-bottom: 1px solid var(--dh-trait);
}

/* Le widget se dimensionnait sur son contenu : le filet du bas
   s'arrêtait à 790 px alors que la grille en dessous en fait 1180. */
.elementor-widget-jet-smart-filters-radio,
.elementor-widget-jet-smart-filters-radio > .elementor-widget-container {
  width: 100%;
}

.jet-radio-list-wrapper fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.jet-list-tree {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  align-items: baseline;
}

.jet-radio-list__row { margin: 0; }

/* « Produits de la ruche » est une sous-catégorie de « Miel » dans la
   taxonomie : l'extension l'enveloppe dans un « jet-list-tree__children »
   qui, sans mise en forme, se comportait comme un bloc et décalait la
   ligne de trois pixels. La hiérarchie n'a pas d'intérêt visuel ici,
   les sept entrées valent l'une pour l'autre. */
.jet-list-tree__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

/* Le bouton radio disparaît de l'oeil mais reste dans le document :
   il porte le nom accessible et il reçoit encore le focus clavier. */
.jet-radio-list__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jet-filter .jet-radio-list__decorator { display: none; }

.jet-radio-list__item { cursor: pointer; display: block; }

.jet-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__button,
.jet-filter .jet-list-tree .dahabi-filtre-tous,
.dahabi-filtre-tous {
  display: block;
  padding: .9rem 0;
  line-height: 1.4;
  border-bottom: 2px solid transparent;
  font-family: var(--dh-titre);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dh-doux);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}

.jet-filter .jet-radio-list .jet-radio-list__item:hover .jet-radio-list__button,
.dahabi-filtre-tous:hover {
  color: var(--dh-brun);
  background: transparent;
}

.jet-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__input:checked ~ .jet-radio-list__button {
  color: var(--dh-brun);
  border-color: transparent;
  border-bottom-color: var(--dh-accent);
}

.jet-filter .jet-radio-list .jet-radio-list__input:focus-visible ~ .jet-radio-list__button {
  outline: 2px solid var(--dh-accent);
  outline-offset: 2px;
}

/* « Tous » est l'état par défaut de la page : il s'allume tant qu'aucune
   catégorie n'est cochée, et s'éteint dès qu'on en choisit une. */
.jet-list-tree:not(:has(.jet-radio-list__input:checked)) .dahabi-filtre-tous {
  color: var(--dh-brun);
  border-bottom-color: var(--dh-accent);
}

/* Le compte de résultats posé par WooCommerce juste sous le filtre. */
.woocommerce-result-count {
  font-family: var(--dh-titre);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

.woocommerce-ordering select {
  font-family: var(--dh-titre);
  font-size: .8125rem;
  border: 1px solid var(--dh-trait);
  padding: .6rem .8rem;
}

/* Sur telephone les six onglets demandent 690 px : ils defilent
   horizontalement. Le defilement doit porter sur le BLOC du filtre, qui
   est borne par la largeur de la page ; le pose sur la liste elle-meme
   ne servait a rien, puisque c'est elle qui s'elargit, et la page
   entiere partait en debordement de 300 px. */
@media (max-width: 767px) {
  .jet-smart-filters-radio.jet-filter {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .jet-smart-filters-radio.jet-filter::-webkit-scrollbar { display: none; }

  .jet-list-tree,
  .jet-list-tree__children {
    gap: 0 1.4rem;
    flex-wrap: nowrap;
    overflow: visible;
    width: max-content;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Page d'accueil
   ══════════════════════════════════════════════════════════════════

   Ce qui se règle ICI et ce qui se règle DANS ELEMENTOR, mesuré sur ce
   site plutôt que supposé.

   La direction, l'alignement et les largeurs de colonne viennent des
   RÉGLAGES du conteneur, pas de cette feuille. Elementor pose
   « .e-con.e-flex { --flex-direction: column } », de poids (0,2,0), là
   où une classe du thème n'en pèse que (0,1,0) : la variable était
   écrite et jamais retenue. Passer par les réglages a un second
   avantage, la mise en page reste modifiable dans l'éditeur, ce qui
   compte pour un site qui doit se passer de Pro.

   Le rembourrage, lui, se règle bien ici : quand il n'est pas renseigné
   dans le widget, Elementor n'écrit rien et « .e-con » ne pèse qu'une
   classe. Les couleurs, la typographie et les filets aussi.
   ------------------------------------------------------------------ */

/* ── Premier écran ────────────────────────────────────────────── */

/* Version typographique, retenue par le client apres avoir ecarte le pot
   pose sur le panneau creme. Aucune image ici : le titre porte seul et la
   premiere rangee de produits remonte de 480 px dans l'ecran.

   Le rembourrage vient des REGLAGES du conteneur, pas d'ici. Elementor
   ecrit les memes variables --padding-* que celles qu'on utiliserait, a
   specificite egale mais plus loin dans la cascade : les deux se
   marchaient dessus. Une seule source, donc, et c'est l'editeur. */
.dh-hero-typo { text-align: center; }

/* Le conteneur est « boxed » : sa largeur vient du kit, qui plafonne a
   1140 px. La mesure du titre, elle, se regle ici. */
.dh-hero-typo > .e-con-inner { max-width: 46rem; }

.dh-etiquette .elementor-widget-container p {
  margin: 0 0 1.15rem;
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

.dh-titre-hero.elementor-widget-heading .elementor-heading-title {
  font-size: 3.5rem;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin-bottom: 1.35rem;
  text-wrap: balance;
}

/* Centre par la marge auto, pas par text-align : le paragraphe garde sa
   mesure de 46 caracteres, sinon il court sur toute la largeur du bloc
   et le premier ecran perd sa colonne. */
.dh-hero-p .elementor-widget-container p {
  max-width: 46ch;
  margin: 0 auto 2.25rem;
  font-size: 1.0625rem;
  color: var(--dh-doux);
}

.dh-boutons {
  flex-wrap: wrap;
}

/* PIÈGE : le widget bouton rend <div class="ma-classe"><a
   class="elementor-button">. Styler le <div> produit une pilule pleine
   largeur avec le bouton du kit à l'intérieur. */
.dahabi .elementor-widget-button.dh-bouton .elementor-button {
  background-color: var(--dh-noir);
  color: #fff;
  padding: 1.05rem 2rem;
}

.dahabi .elementor-widget-button.dh-bouton .elementor-button:hover {
  background-color: var(--dh-brun);
}

.dahabi .elementor-widget-button.dh-bouton-vide .elementor-button {
  background-color: transparent;
  color: var(--dh-brun);
  border: 1px solid var(--dh-brun);
  padding: 1rem 2rem;
}

.dahabi .elementor-widget-button.dh-bouton-vide .elementor-button:hover {
  background-color: transparent;
  border-color: var(--dh-accent);
  color: var(--dh-accent);
}

/* ── Bandeau livraison et paiement ─────────────────────────────── */

/* Le filet du bandeau touchait le bas du panneau creme du hero : la
   ligne se lisait comme une bordure de la photo, pas comme une zone a
   part. Un rembourrage haut la decolle sans ajouter de trait. */
.dh-bandeau {
  --padding-block-start: 3.75rem;
  --padding-block-end: 0;
}

.dh-r-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--dh-trait);
  border-bottom: 1px solid var(--dh-trait);
}

.dh-r-item {
  padding: 1.6rem 1rem;
  text-align: center;
  font-family: var(--dh-titre);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

.dh-r-item + .dh-r-item { border-inline-start: 1px solid var(--dh-trait); }

/* ── Sections courantes ────────────────────────────────────────── */

.dh-section {
  --padding-block-start: 5.5rem;
  --padding-block-end: 5.5rem;
}

.dh-creme { background: var(--dh-casse); }

.dh-titre-section { text-align: center; }
.dh-titre-section.elementor-widget-heading .elementor-heading-title { font-size: 2.25rem; }

.dh-chapo { text-align: center; }
.dh-chapo .elementor-widget-container p {
  max-width: 58ch;
  margin: .9rem auto 2.5rem;
  color: var(--dh-doux);
}

.dh-lien-suite { text-align: center; margin-top: 2.5rem; }

.dahabi .elementor-widget-button.dh-lien-suite .elementor-button {
  background-color: transparent;
  color: var(--dh-brun);
  padding: 0 0 .45rem;
  border-bottom: 2px solid var(--dh-accent);
}

.dahabi .elementor-widget-button.dh-lien-suite .elementor-button:hover {
  background-color: transparent;
  color: var(--dh-accent);
}

/* ── Terroir du Maroc et Amlou ─────────────────────────────────── */

.dh-recit {
  --padding-block-start: 0;
  --padding-block-end: 0;
}

.dh-recit-photo {
  align-self: stretch;
  min-height: 26rem;
}

.dh-recit-photo > .elementor-widget-image,
.dh-recit-photo .elementor-widget-container,
.dh-recit-photo picture { height: 100%; display: block; }

.dh-recit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dh-recit-texte {
  --padding-block-start: 5rem;
  --padding-block-end: 5rem;
  --padding-inline-start: 4rem;
  --padding-inline-end: max(1.5rem, calc((100vw - 1140px) / 2));
}

.dh-titre-recit.elementor-widget-heading .elementor-heading-title {
  font-size: 2.125rem;
  margin-bottom: .9rem;
}

.dh-amlou {
  --padding-block-start: 5.5rem;
  --padding-block-end: 5.5rem;
}

/* ── Quatre familles, à la place des six pastilles ─────────────── */

.dh-familles-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.dh-famille {
  display: block;
  background: var(--dh-fond);
  border: 1px solid var(--dh-trait);
  padding: 2.1rem 1.5rem;
  text-align: center;
  transition: border-color .2s ease;
}

.dh-famille:hover { border-color: var(--dh-accent); }

.dh-famille-nom {
  display: block;
  font-family: var(--dh-titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--dh-brun);
}

.dh-famille-nb {
  display: block;
  margin-top: .35rem;
  font-family: var(--dh-titre);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

/* ── Avis ──────────────────────────────────────────────────────── */

.dh-avis {
  --padding-block-start: .5rem;
}

.dh-avis-item blockquote {
  margin: 0;
  padding-inline-start: 1.35rem;
  border-inline-start: 2px solid var(--dh-accent);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dh-encre);
}

.dh-avis-item cite {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-family: var(--dh-titre);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

/* ── Le blog sur l'accueil ─────────────────────────────────────── */

.dh-articles-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.dh-article {
  display: block;
  background: var(--dh-fond);
  border: 1px solid var(--dh-trait);
  padding: 1.9rem 1.6rem 1.7rem;
  transition: border-color .2s ease;
}

.dh-article:hover { border-color: var(--dh-accent); }

.dh-article-rubrique {
  display: block;
  font-family: var(--dh-titre);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

.dh-article-titre {
  display: block;
  margin: .6rem 0 .55rem;
  font-family: var(--dh-titre);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--dh-brun);
}

.dh-article-chapo {
  display: block;
  color: var(--dh-doux);
  font-size: .95rem;
  line-height: 1.6;
}

/* ── Téléphone et tablette ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .dh-familles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-articles-grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .dh-recit-photo { min-height: 16rem; }

  .dh-recit-texte {
    --padding-block-start: 3rem;
    --padding-block-end: 3.5rem;
    --padding-inline-start: 1.5rem;
    --padding-inline-end: 1.5rem;
  }

  .dh-titre-hero.elementor-widget-heading .elementor-heading-title { font-size: 2.15rem; }
  .dh-hero-p .elementor-widget-container p { font-size: 1rem; margin-bottom: 1.85rem; }
  .dh-titre-section.elementor-widget-heading .elementor-heading-title,
  .dh-titre-recit.elementor-widget-heading .elementor-heading-title { font-size: 1.75rem; }

  .dh-section, .dh-amlou {
    --padding-block-start: 3.5rem;
    --padding-block-end: 3.5rem;
  }

  .dh-bandeau { --padding-block-start: 2.25rem; }
  .dh-r-inner { grid-template-columns: minmax(0, 1fr); }
  .dh-r-item { padding: 1rem; }
  .dh-r-item + .dh-r-item { border-inline-start: 0; border-top: 1px solid var(--dh-trait); }
}

@media (max-width: 560px) {
  .dh-familles-grille { grid-template-columns: minmax(0, 1fr); }

  /* Les deux boutons du premier ecran se replient l'un sous l'autre sous
     455 px, et leurs libelles n'ont pas la meme longueur : centres, ils
     donnaient deux blocs decales de 5 px. Pleine largeur, ils s'alignent
     et la zone de frappe y gagne. */
  .dh-boutons > .elementor-widget-button { width: 100%; }
  .dahabi .elementor-widget-button.dh-bouton .elementor-button,
  .dahabi .elementor-widget-button.dh-bouton-vide .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

/* ── Bas du pied de page ──────────────────────────────────────────
   Les deux mentions qui rassurent le plus sur une boutique en paiement
   à la livraison n'apparaissaient qu'en haut de l'accueil et dans le
   panier. Elles ferment maintenant chaque page.
   ------------------------------------------------------------------ */

.dahabi-pied-mentions {
  font-family: var(--dh-titre);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-doux);
  margin: 0;
  order: 2;
}

.dahabi-pied-mentions span { color: var(--dh-trait); margin: 0 .3rem; }

.dahabi-pied-bas p { font-size: .82rem; margin: 0; }

.dahabi-reseaux {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  order: 3;
}

.dahabi-reseaux a {
  font-family: var(--dh-titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--dh-doux);
}

.dahabi-reseaux a:hover { color: var(--dh-accent); }

@media (max-width: 900px) {
  .dahabi-pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; }
  .dahabi-pied-bas { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

@media (max-width: 560px) {
  .dahabi-pied-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ── Panier en blocs, largeur du tableau ──────────────────────────
   Mesure, et ce n'etait pas ce qu'on croyait : WooCommerce pose
   « display: block » sur la balise <table>. Une table en bloc cesse de
   se comporter comme une table, le <tbody> devient une boite anonyme
   dimensionnee sur son contenu, et la ligne occupait 385 px dans un
   tableau de 665. D'ou l'impression d'un tableau minuscule au milieu
   d'une colonne vide. Lui rendre « display: table » suffit ; les trois
   colonnes se repartissent alors toutes seules.
   ------------------------------------------------------------------ */

/* Ces regles ne valent qu'au-dessus de 700 px. En dessous, WooCommerce
   remet la table a plat et empile chaque article ; lui imposer une
   largeur de colonne fixe faisait deborder le total de 49 px hors de
   l'ecran sur un telephone. */
@media (min-width: 700px) {
  table.wc-block-cart-items,
  .wc-block-cart .wc-block-cart-items {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
  }

  .wc-block-cart .wc-block-cart-items__header-image,
  .wc-block-cart .wc-block-cart-item__image { width: 118px; }

  .wc-block-cart .wc-block-cart-items__header-total,
  .wc-block-cart .wc-block-cart-item__total {
    width: 128px;
    text-align: end;
    white-space: nowrap;
  }

  .wc-block-cart-item__image img { width: 96px; }
}

.wc-block-cart-item__image img {
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

@media (min-width: 700px) {
  .wc-block-cart-items__row td { padding: 1.5rem 0; vertical-align: top; }
  .wc-block-cart-items__row .wc-block-cart-item__product { padding-inline-end: 1.5rem; }
}

.wc-block-components-product-name {
  font-size: 1.0625rem;
  line-height: 1.3;
  display: inline-block;
  margin-bottom: .35rem;
}

.wc-block-cart-item__wrap .wc-block-components-product-price {
  color: var(--dh-accent);
  font-size: 1rem;
}

.wc-block-components-product-metadata {
  font-size: .85rem;
  color: var(--dh-doux);
}

.wc-block-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  max-width: 7rem;
  margin-top: .9rem;
}

.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
  font-family: var(--dh-titre);
  color: var(--dh-brun);
  background: transparent;
}

/* La colonne de droite reste visible pendant qu'on fait defiler la
   liste : sur un panier de six pots, le total sortait de l'ecran. */
.wc-block-components-sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .wc-block-components-sidebar { position: static; }
}

/* ── Page de commande ─────────────────────────────────────────────
   WooCommerce empile le formulaire puis le recapitulatif sur toute la
   largeur : le client remplissait quatre champs sans jamais voir ce
   qu'il commandait ni ce qu'il allait payer. Les deux passent cote a
   cote, le recapitulatif reste colle en haut pendant la saisie.

   Le balisage est fige par WooCommerce : form.checkout n'a que trois
   enfants directs, #customer_details, le titre du recapitulatif et
   #order_review. Une grille de deux colonnes sur deux rangees suffit,
   sans toucher au HTML.
   ------------------------------------------------------------------ */

.woocommerce form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0 3.5rem;
  align-items: start;
}

.woocommerce form.checkout > #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
.woocommerce form.checkout > #order_review { grid-column: 2; grid-row: 2; }

/* Les deux colonnes internes de WooCommerce s'empilent : l'adresse de
   livraison differente n'a rien a faire a cote du nom. */
.woocommerce form.checkout .col2-set { display: block; }
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce form.checkout .col2-set .col-2 { margin-top: 2rem; }

.woocommerce form.checkout h3 {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dh-brun);
  margin: 0 0 1.5rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--dh-trait);
}

.woocommerce form.checkout .form-row { padding: 0; margin: 0 0 1.25rem; }

.woocommerce form.checkout .form-row label {
  display: block;
  font-family: var(--dh-titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dh-doux);
  margin-bottom: .45rem;
}

.woocommerce form.checkout .form-row input.input-text,
.woocommerce form.checkout .form-row textarea,
.woocommerce form.checkout .form-row select { width: 100%; }

.woocommerce form.checkout .required { color: var(--dh-accent); border: 0; }

#order_review {
  background: var(--dh-casse);
  padding: 2rem 1.75rem;
  position: sticky;
  top: 1.5rem;
}

#order_review table.shop_table { margin: 0; }
#order_review table.shop_table th { padding-inline: 0; }
#order_review table.shop_table td { padding-inline: 0; text-align: end; }
#order_review table.shop_table td.product-name { text-align: start; }

#order_review .order-total td,
#order_review .order-total th {
  font-family: var(--dh-titre);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dh-accent);
  border-bottom: 0;
}

#order_review .woocommerce-checkout-payment {
  background: transparent;
  border-radius: 0;
  margin-top: 1.5rem;
}

#order_review #place_order { width: 100%; margin-top: .5rem; }

@media (max-width: 900px) {
  .woocommerce form.checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .woocommerce form.checkout > #customer_details,
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > #order_review {
    grid-column: 1;
    grid-row: auto;
  }
  #order_review { position: static; }
}

/* ── Commande, finitions ──────────────────────────────────────────
   Le formulaire etait enferme dans une boite blanche encadree, face au
   recapitulatif creme : deux boites qui se disputent l'attention. Le
   formulaire vit maintenant a meme la page, ses champs portent deja
   leurs filets, et le seul bloc plein est le recapitulatif.
   ------------------------------------------------------------------ */

.woocommerce form.checkout > #customer_details {
  background: transparent;
  border: 0;
  padding: 0;
}

#order_review table.shop_table {
  border: 0;
  background: transparent;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
  border-color: var(--dh-trait);
  border-width: 0 0 1px;
  border-style: solid;
}

#order_review table.shop_table thead th {
  font-family: var(--dh-titre);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dh-doux);
}

#order_review table.shop_table tfoot th {
  font-family: var(--dh-texte);
  font-weight: 400;
  color: var(--dh-encre);
  text-align: start;
}

#order_review .woocommerce-checkout-payment {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--dh-trait);
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
}

#order_review .wc_payment_methods li { list-style: none; margin-bottom: .9rem; }

#order_review .wc_payment_methods label {
  font-family: var(--dh-titre);
  font-size: .95rem;
  font-weight: 500;
  color: var(--dh-brun);
  display: inline;
}

#order_review .payment_box {
  background: var(--dh-fond);
  border: 1px solid var(--dh-trait);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
  font-size: .9rem;
  color: var(--dh-doux);
}

#order_review .payment_box::before { display: none; }

#order_review .woocommerce-privacy-policy-text {
  font-size: .82rem;
  color: var(--dh-doux);
  line-height: 1.6;
}

/* La case « expédier à une adresse différente » est une décision, pas
   un champ : elle mérite d'être lisible. */
.woocommerce form.checkout #ship-to-different-address {
  font-family: var(--dh-titre);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dh-brun);
  border-top: 1px solid var(--dh-trait);
  padding-top: 1.5rem;
  margin-top: .5rem;
}

.woocommerce form.checkout #ship-to-different-address label { cursor: pointer; }

/* ── Fiche produit, finitions ─────────────────────────────────────
   Quatre corrections demandees par le client, toutes mesurees sur la
   fiche « Amlou aux amandes ».
   ------------------------------------------------------------------ */

/* Le fil d'Ariane touchait presque l'en-tete : sa marge haute etait
   ecrasee par une regle de WooCommerce plus specifique que la notre. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  max-width: 1140px;
  margin: 2.5rem auto 1.25rem;
  padding: 0;
  font-size: .8125rem;
  color: var(--dh-doux);
}

/* La cellule qui porte les formats avait « padding: 15px 15px 15px 0 » :
   « 1 kg » se retrouvait colle au bord gauche de son cadre. L'extension
   de pastilles remet ce zero avec un selecteur lourd, d'ou la chaine
   complete ci-dessous plutot qu'un !important. Le fond gris de
   WooCommerce passe au creme de la charte. */
.woocommerce div.product form.cart table.variations td.value,
.woocommerce div.product form.cart table.variations td.woo-variation-items-wrapper,
.woocommerce .variations td.value {
  background: var(--dh-casse);
  padding-block: 1.1rem;
  padding-inline: 1.25rem;
}

.woocommerce table.variations {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.25rem;
}

.woocommerce table.variations th.label {
  background: var(--dh-casse);
  padding: 1.1rem 0 1.1rem 1.25rem;
  vertical-align: middle;
  white-space: nowrap;
}

.woocommerce table.variations td,
.woocommerce table.variations th { border: 0; }

.woocommerce .variations .reset_variations {
  font-size: .8rem;
  color: var(--dh-doux);
}

/* La categorie n'apporte rien sous le bouton d'achat : le fil d'Ariane
   la donne deja en haut de page. La marque, elle, reste.
   Les deux spans portent la MEME classe « posted_in » : on les
   distingue par l'adresse du lien, les categories vivant sous
   /collections/ dans les trois langues. */
.woocommerce .product_meta .posted_in:has(a[href*="/collections/"]) {
  display: none;
}

/* ── Suggestions du panier ────────────────────────────────────────
   Le bloc rend un <div> sans classe, en display:block, dont les trois
   produits se posaient en ligne a leur largeur naturelle : 232, 233 et
   200 px. D'ou trois tuiles inegales. Une grille regle la question.
   ------------------------------------------------------------------ */

.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div,
.wp-block-woocommerce-cart-cross-sells-block > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Trouve en lisant cart.css : WooCommerce pose sur la tuile
   « display: inline-block » et « padding-right: 5% » avec un selecteur
   de trois classes, dans une feuille chargee APRES celle du theme. Nos
   deux classes perdaient, la tuile se repliait sur 73 px dans une
   colonne de 208, et le nom du produit tombait a la verticale, une
   lettre par ligne. La classe du corps donne le poids qui manquait. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image {
  margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image img,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

/* Le bouton se cale en bas quel que soit le nombre de lignes du nom. */
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button {
  margin-top: auto;
  padding: .5rem 1rem 0;
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-price {
  display: block;
  margin-bottom: .9rem;
}

/* Trois colonnes dans 310 px font des tuiles de 90 : deux suffisent sur
   un telephone, une seule sur les plus etroits. Le prefixe reprend le
   poids de la regle de base, sinon la requete media ne s'applique pas. */
@media (max-width: 700px) {
  .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div,
  .wp-block-woocommerce-cart-cross-sells-block > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div,
  .wp-block-woocommerce-cart-cross-sells-block > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Bandeau livraison du panier et de la commande ────────────────
   Deux encadres Elementor avec une icone et un titre. Les titres
   etaient composes comme des titres de section ; ce sont des mentions
   de reassurance, elles prennent la meme forme que le bandeau de
   l'accueil, capitales espacees et icone bronze.
   ------------------------------------------------------------------ */

.woocommerce-cart .elementor-widget-icon-box .elementor-icon,
.woocommerce-checkout .elementor-widget-icon-box .elementor-icon {
  color: var(--dh-accent);
  fill: var(--dh-accent);
  font-size: 1.5rem;
}

.woocommerce-cart .elementor-widget-icon-box .elementor-icon svg,
.woocommerce-checkout .elementor-widget-icon-box .elementor-icon svg {
  fill: var(--dh-accent);
  width: 1.6rem;
  height: 1.6rem;
}

.woocommerce-cart .elementor-widget-icon-box .elementor-icon-box-title,
.woocommerce-checkout .elementor-widget-icon-box .elementor-icon-box-title,
.woocommerce-cart .elementor-widget-icon-box .elementor-icon-box-title span,
.woocommerce-checkout .elementor-widget-icon-box .elementor-icon-box-title span {
  font-family: var(--dh-titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dh-brun);
  margin: 0;
}

/* ── Commande, suite ──────────────────────────────────────────────
   Le recapitulatif fait 463 px de large. WooCommerce y donnait 169 px
   au nom du produit et 244 au total : « Miel Royal - 1 kg × 2 » passait
   a deux lignes alors que le montant nageait dans sa colonne. Les
   proportions sont inversees.
   ------------------------------------------------------------------ */

#order_review table.shop_table { table-layout: fixed; width: 100%; }

#order_review table.shop_table .product-name,
#order_review table.shop_table thead th:first-child,
#order_review table.shop_table tfoot th { width: 62%; }

#order_review table.shop_table .product-total,
#order_review table.shop_table thead th:last-child,
#order_review table.shop_table tfoot td { width: 38%; }

#order_review table.shop_table .product-name {
  line-height: 1.45;
  padding-inline-end: .75rem;
}

#order_review .product-quantity {
  font-family: var(--dh-titre);
  font-weight: 500;
  color: var(--dh-doux);
  white-space: nowrap;
}

/* Les modes d'expedition tenaient sur trois lignes serrees a droite. */
#order_review .woocommerce-shipping-totals td { text-align: start; }
#order_review #shipping_method { margin: 0; padding: 0; list-style: none; }
#order_review #shipping_method li { margin-bottom: .45rem; line-height: 1.4; }
#order_review #shipping_method label { display: inline; font-size: .92rem; }

/* PIEGE : WooCommerce peint l'encadre du mode de paiement en mauve avec
   « .woocommerce-checkout #payment div.payment_box », de poids (0,3,1).
   Notre regle a deux classes ne pouvait pas gagner. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment .payment_box {
  background: var(--dh-fond);
  border: 1px solid var(--dh-trait);
  color: var(--dh-doux);
  font-size: .9rem;
  line-height: 1.6;
  padding: .9rem 1rem;
  margin: .7rem 0 0;
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after { display: none; }

.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0;
}

.woocommerce-checkout #payment { background: transparent; border-radius: 0; }

/* Le formulaire doit se remplir sans reflechir : un champ par ligne,
   des intitules qui disent ce qu'on attend, et une aide sous les deux
   champs ou les clients se trompent le plus. */
.woocommerce form.checkout .form-row-first,
.woocommerce form.checkout .form-row-last,
.woocommerce form.checkout .form-row-wide { width: 100%; float: none; }

.woocommerce form.checkout .form-row input.input-text {
  padding: .85rem .95rem;
  font-size: 1rem;
}

.woocommerce form.checkout .form-row input.input-text::placeholder {
  color: #B7AFA3;
}

.woocommerce form.checkout .form-row input.input-text:focus {
  border-color: var(--dh-accent);
  box-shadow: none;
}

.woocommerce form.checkout .woocommerce-invalid input.input-text {
  border-color: #C0563F;
}

.woocommerce form.checkout .woocommerce-validated input.input-text {
  border-color: var(--dh-trait);
}

#order_review #place_order {
  padding: 1.15rem 2rem;
  font-size: .875rem;
}

/* L'encadre sous « Paiement a la livraison » ressemblait a un champ a
   remplir : fond, filet et rembourrage d'un input. C'est une simple
   indication, elle en prend la forme, alignee sous le libelle. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment .payment_box {
  background: transparent;
  border: 0;
  padding: .1rem 0 0 1.85rem;
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--dh-doux);
}

/* ── Quantite et bouton d'achat ───────────────────────────────────
   Mesure sur la fiche « Miel d'argan » : le champ de quantite faisait
   52 px de haut, le bouton 48. Les deux flottaient l'un a cote de
   l'autre, alignes en haut, et se decalaient de quatre pixels en bas.

   La rangee devient une bande souple. Attention a ne pas viser
   « form.cart » tout court : sur un produit a formats, ce formulaire
   contient AUSSI le tableau des variations, qui se retrouverait a cote
   du bouton. D'ou le :not(.variations_form).
   ------------------------------------------------------------------ */

.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .75rem;
}

.woocommerce div.product form.cart .quantity {
  margin: 0;
  display: flex;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 4.75rem;
  min-height: 3.3rem;
  padding: .5rem;
  text-align: center;
  font-family: var(--dh-titre);
  font-size: 1rem;
  border: 1px solid var(--dh-trait);
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
  min-height: 3.3rem;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Produits similaires et suggestions ───────────────────────────
   La grille de correctifs.css ne vise que le widget shortcode : les
   blocs poses par WooCommerce en bas de fiche restaient sur ses
   flottants d'origine. Meme grille, meme respiration.
   ------------------------------------------------------------------ */

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les suggestions sont toujours au nombre de trois : sur quatre
   colonnes, la quatrieme restait vide. */
.woocommerce .upsells ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after,
.woocommerce .upsells ul.products::before,
.woocommerce .upsells ul.products::after { content: none; display: none; }

.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.woocommerce .related ul.products li.product .price,
.woocommerce .upsells ul.products li.product .price { margin-top: auto; }

@media (max-width: 900px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
}

/* ── Bande Instagram ──────────────────────────────────────────────
   Six visuels de la série de marque, en carré, qui pointent vers le
   compte. Aucune extension : celles qui affichent un flux Instagram
   demandent un jeton qui expire, se mettent à jour toutes seules et
   cassent un jour sans prévenir. Six liens écrits en dur ne cassent
   jamais et se changent quand le client veut.
   ------------------------------------------------------------------ */

.dh-insta-grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}

.dh-insta-vignette {
  display: block;
  overflow: hidden;
  background: var(--dh-casse);
}

.dh-insta-vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  transition: transform .4s ease, opacity .25s ease;
}

.dh-insta-vignette:hover img {
  transform: scale(1.04);
  opacity: .92;
}

@media (max-width: 900px) {
  .dh-insta-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .dh-insta-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}

/* WPForms ne peint pas son bouton avec une couleur mais avec une
   VARIABLE, « --wpforms-button-background-color », lue par des regles
   qui vivent dans sa propre feuille, chargee apres celle du theme et
   assortie de :not(:hover):not(:active). Se battre avec ces selecteurs
   serait perdu d'avance ; on renseigne les variables, et tout suit,
   survol compris. */
.wpforms-container,
div.wpforms-container-full {
  --wpforms-field-border-radius: 0px;
  --wpforms-field-border-color: #E3DDD3;
  --wpforms-field-border-color-spare: #E3DDD3;
  --wpforms-field-background-color: #FFFFFF;
  --wpforms-field-text-color: #333333;
  --wpforms-field-size-input-height: 3.1rem;
  --wpforms-field-size-padding-h: 15px;

  --wpforms-label-color: #7A6E60;
  --wpforms-label-sublabel-color: #7A6E60;
  --wpforms-label-error-color: #C0563F;

  /* PIEGE : « -alt » n'est PAS la couleur de survol. WPForms lit
     « var(--wpforms-button-background-color-alt, var(--wpforms-button-background-color)) »
     dans une regle « :not(:hover):not(:active) », donc « -alt » est la
     couleur AU REPOS. Le bouton sortait brun au lieu de noir. */
  --wpforms-button-background-color: #000000;
  --wpforms-button-background-color-alt: #000000;
  --wpforms-button-border-color: #000000;
  --wpforms-button-text-color: #FFFFFF;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-border-style: none;
  --wpforms-button-size-font-size: 13px;
  --wpforms-button-size-height: 3.3rem;
  --wpforms-button-size-padding-h: 30px;

  --wpforms-page-break-color: #7A5C25;
  --wpforms-container-border-radius: 0px;
}

/* ── Formulaire de contact, WPForms ───────────────────────────────
   Le bouton sortait au bleu d'usine de WPForms, #066AAB, avec des
   angles arrondis : la seule tache bleue du site. Les champs portaient
   un filet noir transparent et un rayon de 3 px, eux aussi d'usine.

   Les libellés étaient masqués par l'option « cacher le label » : seuls
   les textes indicatifs restaient. Un texte indicatif disparaît dès
   qu'on tape, et le visiteur qui revient vérifier ne sait plus quel
   champ il remplit. Les libellés reviennent, en petites capitales,
   comme sur la page de commande.
   ------------------------------------------------------------------ */

.wpforms-container .wpforms-form .wpforms-field {
  padding: 0;
  margin-bottom: 1.35rem;
}

.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container .wpforms-form .wpforms-field-label.wpforms-label-hide {
  display: block;
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  font-family: var(--dh-titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dh-doux);
  margin-bottom: .45rem;
}

.wpforms-container .wpforms-form .wpforms-required-label {
  color: var(--dh-accent);
  border: 0;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--dh-trait);
  border-radius: 0;
  background: var(--dh-fond);
  padding: .85rem .95rem;
  font-family: var(--dh-texte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dh-encre);
  box-shadow: none;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
  outline: 0;
  border-color: var(--dh-accent);
  box-shadow: none;
}

.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder {
  color: #B7AFA3;
}

.wpforms-container .wpforms-form textarea {
  min-height: 11rem;
  resize: vertical;
}

/* Le bouton reprend celui du reste du site : noir, Jost en capitales
   espacées, angles vifs, survol brun. */
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit,
.wpforms-container .wpforms-form input[type="submit"] {
  background: var(--dh-noir);
  background-color: var(--dh-noir);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--dh-titre);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.05rem 2.25rem;
  height: auto;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .18s ease;
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover,
.wpforms-container .wpforms-form input[type="submit"]:hover {
  background: var(--dh-brun);
  background-color: var(--dh-brun);
  color: #fff;
}

.wpforms-container .wpforms-form .wpforms-submit-container { padding: .5rem 0 0; }

/* Erreurs et confirmation : un rouge sobre, un bloc crème. */
.wpforms-container .wpforms-form label.wpforms-error,
.wpforms-container .wpforms-form em.wpforms-error {
  color: #C0563F;
  font-size: .82rem;
  font-style: normal;
  margin-top: .35rem;
}

.wpforms-container .wpforms-form .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-error {
  border-color: #C0563F;
}

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
  background: var(--dh-casse);
  border: 0;
  border-left: 2px solid var(--dh-accent);
  border-radius: 0;
  color: var(--dh-encre);
  padding: 1.25rem 1.5rem;
}

/* Le widget Turnstile de Cloudflare garde sa taille, mais pas ses
   marges d'usine. */
.wpforms-container .cf-turnstile,
.wpforms-container .wpforms-field-turnstile { margin-bottom: 1.25rem; }