/* ==========================================================================
   SOUQWIDE — système visuel, transposé de jwahry.com pour l'arabe et le RTL
   ==========================================================================

   D'OÙ VIENNENT CES VALEURS
   Relevées dans les 47 619 caractères de CSS additionnel de jwahry.com, où vit
   réellement son design — les réglages Astra de jwahry (bouton olive #645636,
   rayon 0) sont entièrement recouverts par ce CSS et ne se voient nulle part.

   CE QUI EST COPIÉ À L'IDENTIQUE
   Les jetons de couleur, les formes (pilule 50 px, cartes rayon 14 px), les
   ombres, le filet doré sous les titres de section, le rythme des sections.

   CE QUI EST VOLONTAIREMENT DIFFÉRENT, ET POURQUOI
   1. POLICES — UNE SEULE, Cairo, celle qui était déjà sur le site.
      Cormorant Garamond, Great Vibes et Helvetica Neue n'ont AUCUN glyphe
      arabe, donc jwahry ne peut pas être copié sur ce point. Un serif arabe
      d'affichage a bien été essayé, mais il change le REGISTRE du site : il
      lit « classique et littéraire » là où Cairo lit « moderne et
      commerçant », et le mélange donnait l'impression de deux sites en un.
      La hiérarchie repose donc sur la TAILLE et la GRAISSE, jamais sur un
      changement de police.
   2. PAS DE letter-spacing. En arabe, les lettres sont LIÉES : écarter les
      caractères rompt les ligatures et le mot se disloque. jwahry en met
      partout (.3 à 3.5 px) ; ici, nulle part sur du texte arabe.
   3. PAS DE text-transform:uppercase. Sans effet sur l'arabe, qui est unicase,
      mais il hurle sur les fragments latins des titres produits (« IPX5, TWS »).
   4. INTERLIGNES PLUS GÉNÉREUSES. jwahry descend à 0.85 sur les titres ; en
      arabe cela tronque les descendantes (ج ح خ ع غ م ي) et les diacritiques.
      Plancher ici : 1.25.
   5. PROPRIÉTÉS LOGIQUES PARTOUT. Le CSS de jwahry est écrit en left/right
      absolus — 14 `left:`, 10 `right:`, 8 `margin-left` — et casserait en
      miroir. On n'écrit que margin-inline, padding-inline, inset-inline,
      border-inline : une seule feuille, juste dans les deux sens.
   ========================================================================== */

:root {
  /* ==========================================================================
     PALETTE — extraite du LOGO de souqwide, pixel par pixel.
     Le fichier cropped-LOGO-SOUQWIDE.COM-4-565x312-1.png ne contient que DEUX
     teintes : #2b3991 sur 74 446 pixels (70 %) et #00adef sur 30 779 (29 %).
     Ce sont donc les couleurs de la marque, pas une interpretation.
     S'y ajoutent le noir et le blanc, comme demande.
     ========================================================================== */

  /* Bleu marine du logo — couleur d'action : boutons, liens, accents de texte.
     C'est la teinte dominante, elle porte l'identite. */
  --sw-blue:        #2b3991;
  --sw-blue-dark:   #222e74;   /* le meme, assombri de 20 %, pour le survol */
  --sw-blue-soft:   rgba(43, 57, 145, .13);   /* halo de focus */
  --sw-blue-shadow: rgba(43, 57, 145, .26);   /* ombre portee des boutons */

  /* Bleu clair du logo — accent GRAPHIQUE uniquement : filets, pastilles,
     pictogrammes, soulignements. Volontairement PAS utilise pour du petit
     texte : #00adef sur fond clair tombe sous 3:1 de contraste, donc illisible
     pour une partie des visiteurs. La regle est donc : le cyan se voit, il ne
     se lit pas. */
  --sw-cyan:        #00adef;

  /* Encre */
  --sw-dark:   #1a1a1a;
  --sw-ink:    #2a2a2a;
  --sw-muted:  #5f6472;
  --sw-faint:  #9aa0ad;

  /* Fonds et filets — gris tres legerement bleutes, pour rester dans la
     famille du logo plutot que d'introduire une troisieme teinte. */
  --sw-soft:   #f4f6fb;
  --sw-soft-2: #eaeef7;
  --sw-line:   #e3e8f2;
  --sw-line-2: #d5dced;
  --sw-line-3: #e3e8f2;

  --sw-stock: #1f7a43;

  /* Formes */
  --sw-radius-pill: 50px;
  --sw-radius-card: 14px;
  --sw-radius-box:  16px;
  --sw-radius-field: 10px;

  --sw-shadow-card:       0 6px 18px rgba(26, 32, 60, .06);
  --sw-shadow-card-hover: 0 14px 32px rgba(26, 32, 60, .13);
  --sw-shadow-blue:       0 6px 18px var(--sw-blue-shadow);

  /* Exactement la meme declaration qu'Astra, pour qu'il n'existe qu'UNE
     famille de police dans toute la feuille de styles du site. */
  --sw-display: 'Cairo', sans-serif;
  --sw-ui:      'Cairo', sans-serif;
}

/* --------------------------------------------------------------- 1. SOCLE */

body,
.woocommerce-js {
  font-family: var(--sw-ui);
  color: var(--sw-ink);
}

/* Titres : Cairo en graisse 700, comme le reste du site.
   La hierarchie visuelle vient de la taille et de la graisse, pas d'un
   changement de police. */
h1, h2,
.sw-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--sw-display);
  color: var(--sw-dark);
  font-weight: 700;
  line-height: 1.3;          /* jwahry : 0.85 — intenable en arabe */
  letter-spacing: normal;     /* jamais d'écart : cela romprait les ligatures */
  text-transform: none;
}

h3, h4, h5, h6 {
  font-family: var(--sw-ui);
  color: var(--sw-dark);
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

/* Neutralisation globale des deux réglages hérités qui abîment l'arabe. */
h1, h2, h3, h4, h5, h6,
.ast-button, button, input[type="submit"],
.elementor-button, .elementor-button-text,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor-heading-title {
  text-transform: none !important;
  letter-spacing: normal !important;
}

a { color: var(--sw-dark); }
a:hover { color: var(--sw-blue); }

/* ------------------------------------------------------------ 2. BOUTONS */

.ast-button,
.button,
/* `button` et `input[type=submit]` NUS ont ete retires le 21/09/2026 : ils
   attrapaient les six commandes de la visionneuse plein ecran PhotoSwipe et
   les repeignaient en pastilles bleues. On enumere desormais les vrais
   appels a l'action. */
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.elementor-button {
  background-color: var(--sw-blue) !important;
  border: 1.5px solid var(--sw-blue) !important;
  color: #fff !important;
  border-radius: var(--sw-radius-pill) !important;
  padding: 14px 34px !important;
  font-family: var(--sw-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  box-shadow: var(--sw-shadow-blue);
  transition: background-color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.elementor-button:hover {
  background-color: var(--sw-blue-dark) !important;
  border-color: var(--sw-blue-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Bouton secondaire : contour doré sur fond transparent, comme .btn-out */
.sw-btn-ghost,
.woocommerce ul.products li.product .button {
  background-color: transparent !important;
  color: var(--sw-dark) !important;
  border: 1.5px solid var(--sw-blue) !important;
  box-shadow: none;
  padding: 9px 22px !important;
  font-size: 14px !important;
}

.sw-btn-ghost:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: var(--sw-blue) !important;
  color: #fff !important;
}

/* --------------------------------------------- 3. TITRES DE SECTION + filet */

.sw-eyebrow {
  display: block;
  font-family: var(--sw-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--sw-blue);
  margin-block-end: 12px;
}

.sw-section-title {
  font-family: var(--sw-display);
  font-weight: 700;
  color: var(--sw-dark);
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.3;
  text-align: center;
  margin-block: 0 16px;
}

/* Le filet doré de 54 px sous les titres — signature de jwahry. */
.sw-section-title::after,
.woocommerce .products > h2::after,
.widget-title::after,
.wp-block-heading.has-text-align-center::after {
  content: "";
  display: block;
  inline-size: 54px;
  block-size: 2px;
  background: var(--sw-cyan);
  margin-block: 14px 0;
  margin-inline: auto;
}

/* --------------------------------------------------------- 4. GRILLE PRODUITS */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  /* 4 colonnes, pas auto-fill : avec 5 produits, un auto-fill en donne 7 de
     186 px et laisse deux trous — c'est exactement l'aspect inachevé que
     relève la politique « editorial and professional standards ». */
  grid-template-columns: repeat(5, 1fr) !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
  max-inline-size: 1720px;
  margin-inline: auto;
  margin-block-end: 30px;
}

@media (max-width: 1500px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 1150px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 767 px et non 600 : entre 601 et 767 la grille restait a 3 colonnes alors
   que les sections 38 a 42 raisonnent toutes sur DEUX. Les rangees faisaient
   3/3/2/1 et la carte orpheline s'etalait sur toute la largeur. */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product {
  inline-size: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-card);
  padding: 12px 12px 18px;
  text-align: center;
  box-shadow: var(--sw-shadow-card);
  transition: transform .28s, box-shadow .28s, border-color .28s;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--sw-shadow-card-hover);
  border-color: var(--sw-line-2);
}

.woocommerce ul.products li.product img {
  border-radius: 10px;
  margin-block-end: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sw-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sw-dark);
  padding: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sw-dark);
  font-family: var(--sw-ui);
  font-size: 17px;
  font-weight: 700;
}

.woocommerce ul.products li.product .price del { opacity: .55; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Pastille promotion — inset-inline-end la place du bon côté dans les deux sens. */
.woocommerce span.onsale {
  background: var(--sw-cyan) !important;
  color: #fff !important;
  border-radius: var(--sw-radius-pill);
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inset-inline-start: auto;
  min-block-size: auto;
  min-inline-size: auto;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* Disponibilité */
.woocommerce div.product .stock { color: var(--sw-stock); font-weight: 600; }

/* --------------------------------------------------------- 5. CHAMPS DE SAISIE */

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--sw-line-2) !important;
  border-radius: var(--sw-radius-field) !important;
  background: #fff;
  font-family: var(--sw-ui);
  font-size: 16px;                 /* 16 px minimum : en dessous, iOS zoome au focus */
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}

input:focus, textarea:focus, select:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--sw-blue) !important;
  box-shadow: 0 0 0 3px var(--sw-blue-soft) !important;
  outline: none;
}

/* ------------------------------------------------------------ 6. ENCADRÉS */

.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.woocommerce-order,
.woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--sw-line-3);
  border-radius: var(--sw-radius-box);
  padding: 24px;
  box-shadow: 0 8px 26px rgba(26, 32, 60, .06);
}

/* ----------------------------------------------------------- 7. PAGINATION */

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  inline-size: 40px;
  block-size: 40px;
  line-height: 40px;
  padding: 0;
  border: 1px solid var(--sw-line-2);
  border-radius: var(--sw-radius-pill);
  color: var(--sw-dark);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sw-blue);
  border-color: var(--sw-blue);
  color: #fff;
}

/* ============================================================================
   8. NEUTRALISATION DES COULEURS HÉRITÉES DE 2024
   Les identifiants ci-dessous ont été relevés dans _elementor_data. On ne
   réécrit PAS les modèles Elementor : une réécriture de _elementor_data est
   l'opération la plus risquée du lot, et le compte Merchant est sous examen.
   Le CSS suffit et se défait en supprimant ce fichier.
   ========================================================================== */

/* En-tête — dégradé turquoise vers bleu roi (cc73355) et barre bleu nuit (d999952) */
.elementor-5285 .elementor-element-cc73355,
.elementor-5285 .elementor-element-d999952 {
  background-color: #fff !important;
  background-image: none !important;
  border-block-end: 1px solid var(--sw-line) !important;
}

.elementor-5285 .elementor-element-cc73355 *,
.elementor-5285 .elementor-element-d999952 * { color: var(--sw-dark); }

.elementor-5285 a:hover { color: var(--sw-blue) !important; }

/* Pied de page — fond CLAIR, comme chez jwahry.
   Le pied de page d'origine était violet #5a006f avec du texte BLANC. En
   neutralisant le violet, le texte blanc s'est retrouvé sur fond blanc : les
   liens existaient toujours mais étaient illisibles. On ne corrige donc pas
   seulement le fond — on reprend la couleur du TEXTE, qui était le vrai
   défaut. Cible : crème #faf8f5, texte #444, titres et survols dorés. */
.elementor-4242 .elementor-element-b7f6695,
.elementor-4242 > .elementor-section:first-child {
  background-color: var(--sw-soft) !important;
  background-image: none !important;
}

.elementor-4242 .elementor-element-511d0ea,
.elementor-4242 .elementor-element-3078e05,
.elementor-4242 .elementor-element-2641e4b {
  border-color: rgba(255, 255, 255, .12) !important;
}

.elementor-4242 .elementor-element-2c947af .elementor-heading-title,
.elementor-4242 .elementor-element-5505fb20 .elementor-heading-title {
  color: var(--sw-blue) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;   /* corrige un 13 px de ligne pour 21 px de police */
}

.elementor-4242 .elementor-element-1e402144 .elementor-icon-list-icon i,
.elementor-4242 .elementor-element-a869609 .elementor-icon-list-icon i,
.elementor-4242 .elementor-element-479d40c8 .elementor-icon-list-icon i { color: var(--sw-blue) !important; }

.elementor-4242 .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--sw-blue) !important; }

/* Accueil — dégradé rose (717c7d7) remplacé par le crème de jwahry */
.elementor-3891 .elementor-element-717c7d7 {
  background-color: var(--sw-soft) !important;
  background-image: none !important;
}

/* ======================================================= 9. GARDE-FOUS RTL */

/* Les flèches de galerie doivent pointer dans le sens de lecture :
   en RTL, « suivant » va vers la GAUCHE. Sans ce miroir, le client
   croit avancer alors qu'il recule. */
[dir="rtl"] .flex-direction-nav a::before { transform: scaleX(-1); display: inline-block; }

/* Le thème enfant masque les flèches de galerie ; on les rétablit, en doré. */
.woocommerce div.product .flex-direction-nav { display: block; }
.woocommerce div.product .flex-direction-nav a { color: var(--sw-blue); }

/* Prix barré : marge logique, pour qu'elle reste du bon côté en miroir. */
.woocommerce del { margin-inline-end: 6px; }


/* --------------------------------------------- 10. TITRE DE PAGE BOUTIQUE */

.woocommerce-products-header__title,
.woocommerce-products-header h1 {
  font-family: var(--sw-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  color: var(--sw-dark);
  text-align: center;
  line-height: 1.3;
  margin-block: 0 8px;
}

.woocommerce-products-header {
  text-align: center;
  padding-block: clamp(30px, 5vw, 56px) 8px;
}

.woocommerce-products-header__title::after {
  content: "";
  display: block;
  inline-size: 54px;
  block-size: 2px;
  background: var(--sw-cyan);
  margin-block: 16px 0;
  margin-inline: auto;
}

/* Le compteur « 1 Product » restait en anglais sur un site arabe. */
.woocommerce .woocommerce-result-count { color: var(--sw-muted); font-size: 14px; }


/* ============================================================================
   11. PAGE D'ACCUEIL — sections reconstruites
   Reprend le rythme de jwahry : padding vertical clamp(54px,7vw,96px),
   conteneur 1320 px, surtitre doré, grand titre Cairo 700, filet de 54 px.
   ========================================================================== */

.sw-wrap {
  max-inline-size: 1720px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 44px);
}

.sw-hero {
  background: var(--sw-soft);
  border-block-end: 1px solid var(--sw-line);
  padding-block: clamp(56px, 8vw, 110px);
  text-align: center;
}

.sw-hero-title {
  font-family: var(--sw-display);
  font-weight: 700;
  color: var(--sw-dark);
  font-size: clamp(32px, 5.5vw, 68px);
  line-height: 1.35;
  margin-block: 0 18px;
}

.sw-hero-text {
  max-inline-size: 640px;
  margin-inline: auto;
  margin-block: 0 28px;
  font-size: 17px;
  line-height: 2;
  color: var(--sw-muted);
}

.sw-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0; }

.sw-btn,
.sw-btn-out {
  display: inline-block;
  border-radius: var(--sw-radius-pill);
  font-family: var(--sw-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.6;
  padding: 14px 34px;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}

.sw-btn { background: var(--sw-blue); color: #fff; border: 1.5px solid var(--sw-blue); box-shadow: var(--sw-shadow-blue); }
.sw-btn:hover { background: var(--sw-blue-dark); border-color: var(--sw-blue-dark); color: #fff; transform: translateY(-2px); }

.sw-btn-out { background: transparent; color: var(--sw-dark); border: 1.5px solid var(--sw-blue); }
.sw-btn-out:hover { background: var(--sw-blue); color: #fff; }

/* Bandeau de réassurance */
.sw-trust { background: #fff; border-block-end: 1px solid var(--sw-line); padding-block: clamp(28px, 4vw, 44px); }

.sw-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.sw-trust-item { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.sw-trust-ico { font-size: 26px; line-height: 1.4; }
.sw-trust-item strong { font-size: 15px; color: var(--sw-dark); font-weight: 700; }
.sw-trust-item span:last-child { font-size: 13.5px; color: var(--sw-muted); line-height: 1.8; }

@media (max-width: 900px) { .sw-trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* Bloc produits et récit */
.sw-products { padding-block: clamp(46px, 6vw, 80px) 8px; text-align: center; }

.sw-section-lead {
  max-inline-size: 620px;
  margin-inline: auto;
  margin-block: 18px 0;
  color: var(--sw-muted);
  font-size: 16px;
  line-height: 2;
}

.sw-story { background: var(--sw-soft); border-block-start: 1px solid var(--sw-line); padding-block: clamp(46px, 6vw, 86px); text-align: center; }
.sw-story-text { max-inline-size: 720px; margin-inline: auto; margin-block: 0 16px; color: var(--sw-ink); font-size: 16px; line-height: 2.1; }

/* La grille de produits injectée par le shortcode reprend le conteneur du site. */
.home .woocommerce.columns-4,
.home .woocommerce.columns-5,
.home ul.products { max-inline-size: 1720px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* ============================================================================
   12. EN-TÊTE — neutralisation par PRINCIPE, pas élément par élément
   Chercher les couleurs une à une a laissé passer un dégradé #097aaa que la
   première passe n'avait pas relevé. On supprime donc TOUT dégradé dans
   l'en-tête, et on repeint les fonds colorés : une règle générale vaut mieux
   qu'une liste d'identifiants qu'il faudra tenir à jour.
   ========================================================================== */

.ehf-header .elementor-element,
.ehf-header .e-con,
header .elementor-element,
#masthead .elementor-element { background-image: none !important; }

.ehf-header > .elementor,
.ehf-header .e-con-full,
.ehf-header .elementor-section { background-color: #fff !important; }

.ehf-header,
.ehf-header .elementor { border-block-end: 1px solid var(--sw-line); }

/* Champ de recherche FiboSearch — pilule crème, comme chez jwahry. */
.dgwt-wcas-search-input,
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  background: #f9f9f9 !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: var(--sw-radius-pill) !important;
  color: var(--sw-dark) !important;
  font-family: var(--sw-ui) !important;
  height: 40px !important;
}

.dgwt-wcas-search-input:focus {
  border-color: var(--sw-blue) !important;
  box-shadow: 0 0 0 3px var(--sw-blue-soft) !important;
}

.dgwt-wcas-search-submit,
.dgwt-wcas-search-icon { color: var(--sw-blue) !important; fill: var(--sw-blue) !important; }

/* Liens et icônes de l'en-tête */
.ehf-header a:hover,
.ehf-header .elementor-icon:hover { color: var(--sw-blue) !important; }


/* ============================================================================
   13. PIED DE PAGE — lisibilité
   Le texte blanc hérité du fond violet devient illisible sur fond clair.
   On le repeint, et on vise le SPAN .elementor-icon-list-text : c'est lui qui
   porte la couleur, pas le lien <a> qui l'entoure.
   ========================================================================== */

.elementor-4242 .elementor-icon-list-text,
.elementor-4242 .elementor-icon-list-item > a,
.elementor-4242 .elementor-icon-list-item,
.elementor-4242 p,
.elementor-4242 li,
.elementor-4242 span:not(.elementor-grid-item),
.elementor-4242 .elementor-widget-text-editor { color: #444 !important; }

.elementor-4242 a:hover .elementor-icon-list-text,
.elementor-4242 .elementor-icon-list-item:hover .elementor-icon-list-text,
.elementor-4242 a:hover { color: var(--sw-blue) !important; }

/* Les pictogrammes restent dorés, ils servaient déjà de repère visuel. */
.elementor-4242 .elementor-icon-list-icon i,
.elementor-4242 .elementor-icon-list-icon svg { color: var(--sw-blue) !important; fill: var(--sw-blue) !important; }

/* Les titres de colonne : dorés, dans la police du site. */
.elementor-4242 .elementor-heading-title { color: var(--sw-blue) !important; }

/* Filet de séparation en haut du pied de page. */
.elementor-4242 { border-block-start: 1px solid var(--sw-line); }

/* ============================================================================
   14. CHAMP DE RECHERCHE — place réservée au bouton loupe
   En RTL le texte commence à DROITE, exactement là où le bouton loupe est
   posé en absolu. Le champ ne réservait que 30 px alors que le bouton en fait
   70 : les premiers caractères saisis passaient DESSOUS.
   padding-inline-start vaut « à droite » en RTL et « à gauche » en LTR : une
   seule règle suffit donc dans les deux sens de lecture.
   ========================================================================== */

.dgwt-wcas-search-input,
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding-block: 8px !important;
  padding-inline-start: 58px !important;   /* la place du bouton */
  padding-inline-end: 18px !important;
}

/* On resserre le bouton : 70 px de large pour une loupe, c'était trop. */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  padding-inline: 14px !important;
  inline-size: auto !important;
  min-inline-size: 0 !important;
  border-radius: var(--sw-radius-pill) !important;
}

/* ============================================================================
   15. MENU PRINCIPAL ET SOUS-MENUS
   Le menu passe de 2 à 5 entrées, dont trois avec un déroulant. Sans fond ni
   ombre, un sous-menu se superpose au contenu et devient illisible — c'était
   le cas ici (fond transparent, aucune ombre).
   Repris de jwahry : panneau blanc, filet doré de 2 px en haut, ombre douce,
   et au survol un liseré doré du côté du DÉBUT de ligne — donc à droite en
   arabe, ce que garantit border-inline-start.
   ========================================================================== */

.ehf-header .sub-menu,
#masthead .sub-menu,
#masthead li.menu-item-has-children > ul.sub-menu:not(.wpr-mobile-sub-menu),
.elementor-nav-menu--dropdown,
.wpr-sub-menu {
  background-color: #fff !important;
  border: 1px solid #eee !important;
  border-block-start: 2px solid var(--sw-blue) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08) !important;
  border-radius: 0 0 10px 10px;
  min-inline-size: 210px;
  padding-block: 6px;
}

.ehf-header .sub-menu a,
#masthead .sub-menu a,
#masthead li.menu-item-has-children > ul.sub-menu:not(.wpr-mobile-sub-menu) a {
  color: #444 !important;
  font-size: 14px;
  padding-block: 9px;
  padding-inline: 20px;
  border-inline-start: 2px solid transparent;
  transition: color .2s, border-color .2s, padding .2s;
}

.ehf-header .sub-menu a:hover,
#masthead .sub-menu a:hover,
#masthead li.menu-item-has-children > ul.sub-menu:not(.wpr-mobile-sub-menu) a:hover {
  color: var(--sw-blue) !important;
  border-inline-start-color: var(--sw-blue);
  padding-inline-start: 22px;
}

/* Entrées de premier niveau : soulignement doré au survol et sur la page active. */
#masthead .menu-item > a,
.ehf-header .menu-item > a {
  color: #333;
  border-block-end: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

#masthead .menu-item > a:hover,
#masthead .current-menu-item > a,
#masthead .current_page_item > a,
.ehf-header .menu-item > a:hover {
  color: var(--sw-blue) !important;
  border-block-end-color: var(--sw-blue);
}


/* ============================================================================
   16. CURSEUR DU CHAMP DE RECHERCHE
   Le champ heritait d'une interligne de 15 px dans une boite de 40 px. Le
   curseur de saisie epouse l'interligne : il mesurait donc 15 px, mal centre,
   et paraissait ABSENT au clic — il ne devenait perceptible qu'une fois du
   texte saisi. On rend l'interligne a la hauteur utile du champ et on fixe
   explicitement la couleur du curseur.
   ========================================================================== */

.dgwt-wcas-search-input,
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  line-height: 24px !important;
  block-size: 42px !important;
  caret-color: var(--sw-blue) !important;
  color: var(--sw-dark) !important;
  font-size: 15px !important;
}

.dgwt-wcas-search-input::placeholder { color: var(--sw-faint); opacity: 1; }

/* ============================================================================
   17. NOUVEAU PIED DE PAGE (.swf)
   Quatre colonnes ordonnées à la place des onze liens empilés de l'ancien.
   Le bleu marine du logo porte les titres et les survols, le bleu clair sert
   de filet — jamais de texte, il serait illisible à cette taille.
   Tout est en propriétés logiques : le pied de page se lit de droite à gauche
   sans feuille RTL séparée.
   ========================================================================== */

.swf {
  background: var(--sw-soft);
  border-block-start: 1px solid var(--sw-line);
  color: var(--sw-muted);
  font-family: var(--sw-ui);
  font-size: 14px;
  line-height: 1.9;
}

.swf-wrap {
  max-inline-size: 1720px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.swf > .swf-wrap {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(22px, 3vw, 44px);
  padding-block: clamp(36px, 5vw, 60px) clamp(24px, 3vw, 36px);
}

.swf-logo {
  font-size: 26px;
  font-weight: 700;
  color: var(--sw-blue);
  margin: 0 0 10px;
  line-height: 1.5;
}

.swf-baseline { margin: 0 0 16px; max-inline-size: 360px; color: var(--sw-muted); }

.swf-mail { margin: 0 0 16px; }
.swf-mail a { color: var(--sw-blue); font-weight: 600; text-decoration: none; }
.swf-mail a:hover { color: var(--sw-cyan); }

/* L'identité légale : présente et lisible, mais discrète.
   Elle reste exigée par la politique Merchant « professional standards ». */
.swf-legal { margin: 0; font-size: 12.5px; color: var(--sw-faint); line-height: 1.9; }
.swf-legal span { color: var(--sw-faint); }

.swf-col h4 {
  font-family: var(--sw-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--sw-blue);
  margin: 0 0 14px;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--sw-cyan);
  display: inline-block;
}

.swf-col ul { list-style: none; margin: 0; padding: 0; }
.swf-col li { margin-block-end: 7px; }

.swf-col a {
  color: var(--sw-muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  padding-inline-start: 0;
  transition: color .2s, padding .2s, border-color .2s;
}

.swf-col a:hover {
  color: var(--sw-blue);
  border-inline-start-color: var(--sw-cyan);
  padding-inline-start: 8px;
}

/* Bande de réassurance */
.swf-trust { background: #fff; border-block: 1px solid var(--sw-line); }

.swf-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-block: 18px;
  font-size: 13.5px;
  text-align: center;
}

.swf-trust-row strong { color: var(--sw-blue); font-weight: 700; }

/* Barre du bas */
.swf-bas { background: var(--sw-soft); }

.swf-bas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  font-size: 12.5px;
  color: var(--sw-faint);
  border-block-start: 1px solid var(--sw-line);
}

.swf-bas-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.swf-bas-liens a { color: var(--sw-faint); text-decoration: none; }
.swf-bas-liens a:hover { color: var(--sw-blue); }

@media (max-width: 900px) {
  .swf > .swf-wrap { grid-template-columns: 1fr 1fr; }
  .swf-brand { grid-column: 1 / -1; }
  .swf-trust-row { grid-template-columns: 1fr 1fr; text-align: start; }
  .swf-bas-row { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .swf > .swf-wrap { grid-template-columns: 1fr; }
  .swf-trust-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   18. PANIER LATÉRAL — dernières couleurs hors charte
   L'extension de panier latéral gardait trois teintes qui n'existent nulle
   part ailleurs sur le site : un bleu #0098e5 et un bleu #002cdd sur les
   pastilles de comptage, et un MAGENTA #d804ce sur le pictogramme du panier
   flottant. Repérées en balayant toutes les couleurs calculées de la page,
   pas à l'œil — c'est le genre de détail qu'un coup d'œil laisse passer et
   qu'un examinateur Google, lui, voit.
   ========================================================================== */

.xoo-wsc-sc-count,
.xoo-wsc-items-count,
.xoo-wsc-sc-cont .xoo-wsc-sc-count {
  background-color: var(--sw-cyan) !important;
  color: #fff !important;
  border-color: var(--sw-cyan) !important;
  font-family: var(--sw-ui) !important;
  font-weight: 700;
}

.xoo-wsc-sc-bki,
.xoo-wsc-sc-bki.xoo-wsc-icon-basket6,
.xoo-wsc-sc-cont .xoo-wsc-sc-bki {
  color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
}

.xoo-wsc-sc-cont { background-color: #fff !important; }

.xoo-wsc-modal .xoo-wsc-ft-btn,
.xoo-wsc-container .xoo-wsc-ft-btn-continue,
.xoo-wsc-ft-amt-value { color: var(--sw-blue) !important; }

.xoo-wsc-modal .xoo-wsc-ft-btn-checkout {
  background-color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
  color: #fff !important;
}

.xoo-wsc-modal .xoo-wsc-ft-btn-checkout:hover {
  background-color: var(--sw-blue-dark) !important;
  border-color: var(--sw-blue-dark) !important;
}

/* Entrées de menu de premier niveau : noir du logo, bleu marine au survol. */
#masthead .menu-item > a { color: var(--sw-dark); }

/* ============================================================================
   19. BOUTON DE RECHERCHE — une pastille, pas une barre
   Au repos, l'extension étire le bouton de soumission sur TOUTE la largeur du
   champ (232 px mesurés pour un champ de 233) : la barre entière devenait un
   bouton bleu avec une loupe au milieu, et on ne voyait plus qu'il s'agissait
   d'un champ de saisie. Dès qu'on tapait, l'extension le réduisait à 30 px —
   c'est cette forme-là qui est juste, on la fige dans les DEUX états.
   La pastille se place en inset-inline-start : à droite en arabe, à gauche en
   latin, sans règle séparée.
   ========================================================================== */

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit,
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit,
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  position: absolute !important;
  inset-inline-start: 5px !important;
  inset-inline-end: auto !important;
  inset-block-start: 50% !important;
  transform: translateY(-50%) !important;
  inline-size: 34px !important;
  block-size: 34px !important;
  min-inline-size: 0 !important;
  max-inline-size: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--sw-blue) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color .2s;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover { background: var(--sw-blue-dark) !important; }

.dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-submit svg {
  position: static !important;
  inline-size: 17px !important;
  block-size: 17px !important;
  margin: 0 !important;
  fill: #fff !important;
}

/* Le champ reserve la place de la pastille, et garde la forme du site. */
.dgwt-wcas-sf-wrapp,
.dgwt-wcas-search-wrapp { border-radius: var(--sw-radius-pill) !important; }

.dgwt-wcas-search-input,
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding-inline-start: 48px !important;
  padding-inline-end: 18px !important;
}

/* La croix d'effacement, cote fin de ligne. */
.dgwt-wcas-close {
  inset-inline-end: 12px !important;
  inset-inline-start: auto !important;
  color: var(--sw-faint) !important;
}

/* La loupe : le fill posé sur le <svg> ne descend pas jusqu'au <path>, qui
   porte sa propre couleur — l'icône restait bleu foncé sur la pastille bleu
   foncé, donc invisible. On force le blanc sur le tracé lui-même. */
.dgwt-wcas-search-submit svg,
.dgwt-wcas-search-submit svg *,
.dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier path,
.dgwt-wcas-ico-magnifier path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


/* ============================================================================
   20. PLEINE LARGEUR
   Le conteneur passe de 1340 a 1720 px et la grille produits a 5 colonnes par
   defaut. Les blocs de TEXTE gardent en revanche une largeur de lecture
   limitee : etirer un paragraphe sur 1720 px rend la ligne impossible a
   suivre, l'oeil perd le debut de la ligne suivante.
   ========================================================================== */

.ast-container,
.site-content > .ast-container,
.entry-content > .alignwide { max-inline-size: 1720px; }

.single-product .site-content > .ast-container,
.single-product .woocommerce-notices-wrapper,
.single-product div.product { max-inline-size: 1720px; margin-inline: auto; }

/* Fiche produit : image et texte cote a cote, sur toute la largeur. */
.single-product div.product .woocommerce-product-gallery { inline-size: 46% !important; }
.single-product div.product .summary.entry-summary { inline-size: 50% !important; }

@media (max-width: 900px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary { inline-size: 100% !important; }
}

/* Les textes restent lisibles meme en pleine largeur. */
.sw-hero-text, .sw-section-lead, .sw-story-text { max-inline-size: 760px; }
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-Tabs-panel { max-inline-size: 900px; }

/* ============================================================================
   21. FLÈCHES DE GALERIE — le texte « Previous » / « Next »
   FlexSlider écrit ces deux mots EN DUR dans son JavaScript : ils ne passent
   par aucun filtre de traduction, d'où leur présence en anglais sur un site
   arabe. On masque le texte et on dessine des chevrons.
   ⚠️ En RTL, « suivant » pointe vers la GAUCHE. Les chevrons sont donc
   inversés par rapport au latin — une flèche non miroitée ferait reculer le
   client qui croit avancer.
   ========================================================================== */

.woocommerce div.product .flex-direction-nav a {
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 2px 10px rgba(26, 32, 60, .13);
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}

.woocommerce div.product .flex-direction-nav a::before {
  font-size: 20px !important;
  line-height: 1 !important;
  text-indent: 0;
  color: var(--sw-blue) !important;
  font-family: inherit;
}

[dir="rtl"] .woocommerce div.product .flex-prev::before { content: "›"; }
[dir="rtl"] .woocommerce div.product .flex-next::before { content: "‹"; }
[dir="ltr"] .woocommerce div.product .flex-prev::before { content: "‹"; }
[dir="ltr"] .woocommerce div.product .flex-next::before { content: "›"; }

.woocommerce div.product .flex-direction-nav a.flex-disabled { opacity: .35 !important; }

/* ============================================================================
   22. SOUS-MENUS — l'espace mort qui fermait le déroulant
   Entre le bas d'une entrée de menu et le haut de son déroulant, il restait
   quelques pixels sans aucun élément survolable. En descendant la souris vers
   un sous-élément, le curseur traversait ce vide, le survol se perdait et le
   menu se refermait : la navigation par sous-menu était tout simplement
   impossible.
   On pose une passerelle invisible au-dessus du déroulant, qui prolonge la
   zone survolable jusqu'à l'entrée parente. On élargit aussi la zone active
   à tout le <li>, pas seulement au lien.
   ========================================================================== */

#masthead li.menu-item-has-children,
.ehf-header li.menu-item-has-children { position: relative; }

#masthead li.menu-item-has-children > .sub-menu::before,
.ehf-header li.menu-item-has-children > .sub-menu::before,
#masthead li.menu-item-has-children > ul.sub-menu:not(.wpr-mobile-sub-menu)::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  block-size: 22px;      /* la passerelle : couvre le vide sous l'entree */
  background: transparent;
}

/* Le déroulant reste ouvert tant que la souris est sur l'entrée OU dessus. */
#masthead li.menu-item-has-children:hover > .sub-menu,
#masthead li.menu-item-has-children:focus-within > .sub-menu,
.ehf-header li.menu-item-has-children:hover > .sub-menu,
li.menu-item-has-children:hover > ul.sub-menu,
li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Pas de transition de fermeture : une disparition differee donne
   l'impression que le menu « fuit » quand on le vise. */
#masthead .sub-menu,
.ehf-header .sub-menu { transition: opacity .12s linear; }

/* Le survol porte sur tout l'element de liste, pas seulement sur le texte. */
#masthead .menu-item > a,
.ehf-header .menu-item > a { display: block; }

/* ============================================================================
   23. BOUTON « AJOUTER AU PANIER » — largeur réduite de 20 %
   Sur la fiche produit, il occupait toute la largeur de la colonne de texte,
   ce qui le faisait paraître démesuré à côté du sélecteur de quantité.
   ========================================================================== */

.single-product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  /* PLAFOND EN PIXELS, pas en pourcentage.
     Un pourcentage ne tient pas ici : la colonne de droite est passee de 495
     a 860 px avec la mise en pleine largeur, donc 80 % d'une colonne plus
     large redonnait un bouton PLUS GROS qu'avant la reduction. 380 px est une
     largeur de bouton d'action lisible, qui reste la meme quel que soit
     l'ecran. */
  inline-size: 100% !important;
  max-inline-size: 380px !important;
  min-inline-size: 0 !important;
}

@media (max-width: 600px) {
  .single-product form.cart .single_add_to_cart_button,
  .woocommerce div.product form.cart .button { max-inline-size: 100% !important; }
}

/* Le formulaire garde le bouton et la quantite sur une meme ligne, alignes
   au debut de ligne — a droite en arabe. */
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ============================================================================
   24. GALERIE — les pastilles noires et l'espacement des flèches
   Les deux points noirs à côté des flèches n'étaient pas un élément décoratif :
   c'étaient les PUCES DE LISTE des <li> qui portent les flèches. Le thème
   n'avait jamais neutralisé `list-style` sur cette liste, et mon habillage ne
   visait que les <a>. D'où deux disques noirs orphelins.
   ========================================================================== */

.woocommerce div.product .flex-direction-nav,
.woocommerce div.product ul.flex-direction-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;                  /* les deux boutons se touchaient */
}

.woocommerce div.product .flex-direction-nav li,
.woocommerce div.product ul.flex-direction-nav > li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

.woocommerce div.product .flex-direction-nav li::marker { content: none; }
.woocommerce div.product .flex-direction-nav li::before { content: none !important; }

/* ============================================================================
   25. BOUTONS — la couleur du texte au SURVOL
   Au survol, le fond du bouton à contour passait bien au bleu marine, mais le
   texte restait noir : la règle `a:hover{color:…}` du thème l'emportait sur la
   couleur du bouton. Résultat, du noir sur bleu foncé — illisible au moment
   précis où l'utilisateur s'apprête à cliquer.
   On verrouille les deux états, et on le fait sur TOUS les boutons du site,
   pas seulement sur celui du héros : le même conflit existe partout où un
   bouton est un lien.
   ========================================================================== */

/* Au repos : texte sombre sur fond transparent, bordure bleue. */
a.sw-btn-out,
.sw-btn-out {
  background-color: transparent !important;
  color: var(--sw-dark) !important;
  border-color: var(--sw-blue) !important;
}

/* Au survol, au focus clavier et pendant le clic : BLANC sur bleu marine. */
a.sw-btn-out:hover, a.sw-btn-out:focus, a.sw-btn-out:active,
.sw-btn-out:hover, .sw-btn-out:focus, .sw-btn-out:active {
  background-color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
  color: #ffffff !important;
}

/* Le bouton plein reste blanc sur bleu dans tous les états. */
a.sw-btn, .sw-btn,
a.sw-btn:hover, a.sw-btn:focus, a.sw-btn:active,
.sw-btn:hover, .sw-btn:focus, .sw-btn:active { color: #ffffff !important; }

.sw-btn:hover, a.sw-btn:hover { background-color: var(--sw-blue-dark) !important; border-color: var(--sw-blue-dark) !important; }

/* Même verrou sur les boutons WooCommerce et Elementor, qui sont souvent des
   liens et subissent donc le même conflit. */
a.button:hover, a.button:focus,
.woocommerce a.button:hover, .woocommerce a.button:focus,
.elementor-button:hover, .elementor-button:focus,
.ast-button:hover, .ast-button:focus { color: #ffffff !important; }

/* Le bouton « ajouter au panier » des cartes produit : contour au repos,
   plein et BLANC au survol. */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.sw-btn-ghost:hover, .sw-btn-ghost:focus {
  background-color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
  color: #ffffff !important;
}

/* ============================================================================
   26. « نظرة سريعة » — LE DÉCLENCHEUR SEULEMENT
   Réécrit le 21/09/2026.

   La version précédente visait [class*="quick-view"], un joker qui attrapait
   aussi le CONTENEUR de la fenêtre d'aperçu, puis peignait tous ses
   descendants en blanc via ce même joker suivi d'une étoile. Mesuré sur la
   fenêtre ouverte : titre, prix, description et liste d'arguments tous en
   rgb(255,255,255) sur fond blanc — l'aperçu paraissait VIDE alors que son
   contenu était bien là. Un joker sur un fragment de nom de classe attrape
   toujours plus que prévu : on nomme désormais les éléments.

   L'apparence en pastille avec l'œil est définie en section 34c.
   ========================================================================== */

a.ast-quick-view-text,
.ast-quick-view-trigger > a,
a.quick-view-button,
a.wpr-quick-view {
  font-family: var(--sw-ui) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: 0 !important;
  opacity: 1 !important;
}

/* La fenêtre d'aperçu doit se lire comme une fiche produit ordinaire. */
#ast-quick-view-modal,
#ast-quick-view-content,
#ast-quick-view-modal *,
#ast-quick-view-content * { color: var(--sw-dark); }

#ast-quick-view-modal .product_title,
#ast-quick-view-content .product_title { color: var(--sw-dark) !important; }

#ast-quick-view-modal .price,
#ast-quick-view-content .price,
#ast-quick-view-modal .woocommerce-Price-amount,
#ast-quick-view-content .woocommerce-Price-amount { color: var(--sw-blue) !important; }

/* ============================================================================
   27. BANNIÈRE D'ACCUEIL — version qui montre les produits
   Deux colonnes : la promesse d'un côté, les cinq produits détourés de
   l'autre, sur un dégradé aux deux couleurs du logo. Le visiteur voit ce
   qu'on vend avant d'avoir descendu la page.
   ========================================================================== */

.sw-h {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(0, 173, 239, .55), transparent 62%),
    linear-gradient(135deg, #1b245e 0%, var(--sw-blue) 52%, #1d2a7a 100%);
  color: #fff;
  padding-block: clamp(42px, 6vw, 86px);
  isolation: isolate;
}

/* Deux halos diffus : ils donnent de la profondeur sans image de fond. */
.sw-h-lueur {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}

.sw-h-lueur-a { inline-size: 420px; block-size: 420px; background: var(--sw-cyan); inset-block-start: -130px; inset-inline-end: -90px; }
.sw-h-lueur-b { inline-size: 340px; block-size: 340px; background: #4a5bd8; inset-block-end: -150px; inset-inline-start: -80px; }

.sw-h-grille {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}

/* ---- colonne de texte */

.sw-h-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: var(--sw-radius-pill);
  padding: 7px 18px;
  font-size: 13.5px;
  font-weight: 600;
  margin-block-end: 20px;
  backdrop-filter: blur(6px);
}

.sw-h-titre {
  font-family: var(--sw-ui);
  font-weight: 700;
  color: #fff !important;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.32;
  margin: 0 0 18px;
}

/* Le second vers passe en bleu clair : l'accent du logo, sur le mot qui porte
   la promesse. */
.sw-h-titre span { color: var(--sw-cyan); }

.sw-h-sous {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 2;
  max-inline-size: 560px;
  margin: 0 0 26px;
}

.sw-h-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 24px; }

.sw-h-btn,
.sw-h-btn2 {
  display: inline-block;
  border-radius: var(--sw-radius-pill);
  padding: 15px 34px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, background-color .2s, color .2s, box-shadow .2s;
}

.sw-h-btn { background: #fff !important; color: var(--sw-blue) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }
.sw-h-btn:hover { background: var(--sw-cyan) !important; color: #fff !important; transform: translateY(-2px); }

.sw-h-btn2 { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .6); }
.sw-h-btn2:hover { background: #fff !important; color: var(--sw-blue) !important; border-color: #fff; }

.sw-h-points {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}

.sw-h-points li::before { content: "✓"; color: var(--sw-cyan); font-weight: 700; margin-inline-end: 7px; }

/* ---- colonne visuelle : les cinq produits */

.sw-h-visuel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(92px, auto);
  gap: 12px;
}

.sw-h-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 18px;
  padding: 12px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: transform .28s, background-color .28s, border-color .28s;
}

.sw-h-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .18); border-color: var(--sw-cyan); }

.sw-h-item img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 190px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .38));
}

.sw-h-item span { font-size: 12.5px; color: rgba(255, 255, 255, .9); font-weight: 600; }

/* Une composition, pas une grille plate : le premier produit domine. */
.sw-h-1 { grid-column: span 3; grid-row: span 2; }
.sw-h-2 { grid-column: span 3; grid-row: span 2; }
.sw-h-3 { grid-column: span 2; }
.sw-h-4 { grid-column: span 2; }
.sw-h-5 { grid-column: span 2; }

.sw-h-1 img, .sw-h-2 img { max-block-size: 230px; }

@media (max-width: 980px) {
  .sw-h-grille { grid-template-columns: 1fr; }
  .sw-h-texte { text-align: center; }
  .sw-h-sous { margin-inline: auto; }
  .sw-h-cta, .sw-h-points { justify-content: center; }
  .sw-h-visuel { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 620px) {
  .sw-h-1, .sw-h-2 { grid-column: span 3; grid-row: span 1; }
  .sw-h-3, .sw-h-4, .sw-h-5 { grid-column: span 2; }
  .sw-h-item img { max-block-size: 120px; }
  .sw-h-1 img, .sw-h-2 img { max-block-size: 150px; }
  .sw-h-item span { font-size: 11.5px; }
}

/* ============================================================================
   28. BANNIÈRE ET BANDEAU DE RÉASSURANCE EN PLEINE LARGEUR
   Les deux sections vivaient à l'intérieur du conteneur de page et laissaient
   donc une bande blanche de chaque côté : le dégradé s'arrêtait en plein
   milieu de l'écran, ce qui cassait l'effet.
   On les fait DÉBORDER du conteneur avec `margin-inline: calc(50% - 50vw)`.
   Cette formule vaut dans les deux sens de lecture — contrairement au vieux
   procédé `left:50%; margin-left:-50vw`, qui casse en RTL.
   Le contenu, lui, reste centré et limité par .sw-wrap : c'est le FOND qui
   va d'un bord à l'autre, pas le texte.
   ========================================================================== */

.sw-h,
.sw-trust,
.sw-products,
.sw-story {
  /* Le !important est ici NÉCESSAIRE : WordPress impose
     `--wp--style--global--content-size: 910px` à tout enfant direct du
     contenu, via une règle de mise en page « constrained ». Sans lui, la
     section reste bridée à 910 px quoi qu'on écrive. */
  margin-inline: calc(50% - 50vw) !important;
  inline-size: 100vw !important;
  max-inline-size: 100vw !important;
}

/* 100vw compte la barre de défilement : sans ce garde-fou, un filet
   horizontal apparaît et la page devient scrollable de quelques pixels. */
html, body { overflow-x: clip; }

/* Le bandeau de réassurance passe sur un fond CLAIR, pas blanc : il se
   détache ainsi de la bannière au-dessus et de la grille produits en
   dessous, sans introduire de couleur étrangère à la charte. */
.sw-trust {
  background: var(--sw-soft) !important;
  border-block: 1px solid var(--sw-line);
}

.sw-trust-grid {
  padding-block: clamp(22px, 3vw, 38px);
  gap: clamp(16px, 2.5vw, 40px);
}

.sw-trust-item strong { color: var(--sw-blue); font-size: 16px; }
.sw-trust-item span:last-child { color: var(--sw-muted); }
.sw-trust-ico { font-size: 30px; }

/* La grille produits de l'accueil garde son fond blanc et son conteneur. */
.sw-products { background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   29. LE HERO EN IMAGE — 21/09/2026
   Mouhcine : « le hero et ce qui est en dessous doit être en full largeur
   avec un fond clair », puis « j'aime bien l'image avec transition dégradé,
   c'est mieux qu'un fond bleu ».

   Le principe repris de jwahry.com : une vraie photo pleine largeur, et le
   texte posé sur la partie où l'image s'assombrit. Ici l'image a été composée
   pour cela — la scène produit occupe la gauche, et se fond vers la droite
   dans le dégradé #2b3991 → #00adef. En RTL le bloc de texte se place
   justement à DROITE : il tombe donc sur le dégradé, où l'arabe blanc est
   parfaitement lisible. Le voile ci-dessous ne fait que garantir le contraste,
   il ne peint pas le fond.
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-h {
  background-image:
    linear-gradient(to left,
      rgba(34, 46, 116, .93) 0%,
      rgba(34, 46, 116, .78) 22%,
      rgba(27, 36, 94, .32) 47%,
      rgba(27, 36, 94, 0) 68%),
    url('hero-souqwide.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  min-block-size: clamp(360px, 40vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Les lueurs décoratives et la grille de vignettes produit faisaient double
   emploi avec la photo : superposées, elles brouillaient l'image. On les
   retire ici plutôt que de toucher au gabarit, pour pouvoir revenir en
   arrière en supprimant cette seule section. */
.sw-h-lueur,
.sw-h-visuel { display: none !important; }

.sw-h-grille {
  grid-template-columns: 1fr !important;
  justify-items: start;   /* en RTL, start = la DROITE, côté dégradé */
}

.sw-h-texte { max-inline-size: 560px; }

/* Sous 900 px l'image ne peut plus se couper en deux : le voile passe alors
   du haut vers le bas et devient franc, sinon le titre arabe se poserait sur
   la scène claire et deviendrait illisible. */
@media (max-width: 900px) {
  .sw-h {
    min-block-size: auto;
    background-position: center center;
    background-image:
      linear-gradient(to bottom,
        rgba(27, 36, 94, .50) 0%,
        rgba(34, 46, 116, .90) 45%,
        rgba(34, 46, 116, .96) 100%),
      url('hero-souqwide.jpg');
  }
  .sw-h-grille { justify-items: center; }
  .sw-h-texte { max-inline-size: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. LE HAMBURGER MOBILE — 21/09/2026
   Le menu mobile vient de Royal Elementor Addons, et ses trois barres
   (.wpr-mobile-toggle-line) sont peintes en BLANC par le réglage du widget.
   Le bandeau d'en-tête étant blanc lui aussi, le bouton était rigoureusement
   invisible : sur mobile, le menu du site n'était plus atteignable.

   Mesuré avant correction : barres rgb(255,255,255) sur un conteneur
   rgb(255,255,255), dans l'état FERMÉ comme dans l'état OUVERT — l'icône
   reste sur l'en-tête blanc même quand le panneau bleu est déployé. On peint
   donc en bleu dans les deux états, sans exception à gérer.
   ═══════════════════════════════════════════════════════════════════════════ */

.wpr-mobile-toggle-line,
.wpr-mobile-toggle-open .wpr-mobile-toggle-line {
  background-color: var(--sw-blue) !important;
}

/* Une cible tactile d'au moins 44 px : les trois barres ne mesurent que
   27 × 32 px, sous le minimum recommandé pour le doigt. */
.wpr-mobile-toggle {
  padding: 6px !important;
  min-inline-size: 44px;
  min-block-size: 44px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
}

.wpr-mobile-toggle:active { background-color: rgba(43, 57, 145, .08) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   31. L'EN-TÊTE ET LE MENU MOBILES — 21/09/2026
   Deux demandes de Mouhcine, et une anomalie trouvée au passage.

   a) « unifie les couleurs des icônes de l'en-tête (panier, maison, hamburger) »
      Mesuré : le panier est déjà en rgb(43,57,145) et le hamburger aussi
      depuis la section 30. C'est la MAISON qui dépareille, à rgb(26,26,26).
      On aligne donc la maison sur les deux autres, plutôt que de tout
      repeindre — c'est la seule qui sorte de la charte.

   b) LE PANNEAU DU MENU ÉTAIT EN BLEU ÉLECTRIQUE
      Chaque <li class="menu-item"> du menu mobile porte
      background-color: rgb(21, 0, 255) — un bleu pur posé par le widget
      Royal Elementor, qui n'a rien à voir avec le #2b3991 du logo. À l'écran
      cela donnait un aplat criard sur lequel les libellés, restés sombres,
      se lisaient mal. On remet le bleu de marque et on passe les libellés
      en blanc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- a) les trois icônes de l'en-tête, une seule couleur ------------------ */
@media (max-width: 921px) {

  .elementor-widget-icon .elementor-icon,
  .elementor-widget-icon .elementor-icon i,
  .elementor-widget-icon .elementor-icon svg {
    color: var(--sw-blue) !important;
    fill: var(--sw-blue) !important;
  }

  .xoo-wsc-sc-bki { color: var(--sw-blue) !important; }

  /* Le compteur du panier garde le cyan : c'est un accent volontaire,
     lisible en blanc dessus, et il signale une information (le nombre
     d'articles) que les deux autres icônes ne portent pas. */
  .xoo-wsc-sc-count {
    background-color: var(--sw-cyan) !important;
    color: #fff !important;
  }
}

/* --- b) le panneau du menu mobile ---------------------------------------- */
.wpr-mobile-nav-menu > li.menu-item,
.wpr-mobile-nav-menu li.menu-item {
  background-color: var(--sw-blue) !important;
  border-block-end: 1px solid rgba(255, 255, 255, .14) !important;
}

.wpr-mobile-nav-menu .wpr-mobile-menu-item.menu-link,
.wpr-mobile-nav-menu > li > a {
  color: #fff !important;
  font-weight: 600;
}

.wpr-mobile-nav-menu .wpr-mobile-menu-item.menu-link:hover,
.wpr-mobile-nav-menu li.menu-item:hover {
  background-color: var(--sw-blue-dark) !important;
}

/* La flèche de déploiement vivait en noir sur le bleu : illisible. */
.wpr-mobile-nav-menu .wpr-mobile-sub-icon { color: #fff !important; }

/* Le sous-menu reste sur fond clair : deux niveaux de bleu superposés
   effacent la hiérarchie, alors qu'un fond blanc la rend évidente. */
.wpr-mobile-nav-menu .wpr-sub-menu,
.wpr-mobile-nav-menu .wpr-sub-menu li.menu-item {
  background-color: #fff !important;
  border-block-end-color: var(--sw-line) !important;
}

.wpr-mobile-nav-menu .wpr-sub-menu-item.menu-link { color: var(--sw-dark) !important; }
.wpr-mobile-nav-menu .wpr-sub-menu-item.menu-link:hover { color: var(--sw-blue) !important; }
.wpr-mobile-nav-menu .wpr-sub-menu .wpr-mobile-sub-icon { color: var(--sw-dark) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   32. TAILLE ET ESPACEMENT DES ICÔNES D'EN-TÊTE — 21/09/2026
   Mouhcine : « le hamburger est trop grand » et « il faut aussi les espacer
   uniformément ».

   MESURÉ AVANT CORRECTION, en 375 px de large :
     colonne      largeur   icône    centre de l'icône   centre de la colonne
     hamburger    75 px     32 px         53 px                37,5 px
     maison       75 px     30 px        113 px               112,5 px
     panier       75 px     29 px        186,5 px             187,5 px

   Les COLONNES sont donc déjà régulières — le défaut ne vient pas d'elles.
   Il vient du hamburger, décalé de 15 px vers la droite DANS sa colonne :
   les écarts entre centres valaient 60 px puis 73,5 px. C'est ce décalage
   qu'on voit, pas un mauvais espacement des colonnes.

   On agit donc sur deux choses, et deux seulement : la même taille de glyphe
   pour les trois (24 px), et le recentrage de chaque glyphe dans sa colonne.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 921px) {

  /* --- une taille unique : 24 px de glyphe ------------------------------- */

  .wpr-mobile-toggle-line {
    inline-size: 24px !important;
    block-size: 3px !important;
    border-radius: 2px;
    margin: 0 !important;
  }

  .elementor-widget-icon .elementor-icon i,
  .elementor-widget-icon .elementor-icon svg {
    font-size: 24px !important;
    inline-size: 24px !important;
    block-size: 24px !important;
    line-height: 1 !important;
  }

  .xoo-wsc-sc-bki { font-size: 24px !important; line-height: 1 !important; }

  /* --- chaque glyphe centré dans sa colonne ------------------------------ */
  /* Le bouton garde une cible tactile de 44 px — en dessous, le doigt rate
     la cible — mais cette cible est désormais CENTRÉE, et c'est le glyphe de
     24 px qu'on voit, pas la cible. */

  .wpr-mobile-toggle {
    inline-size: 44px !important;
    block-size: 44px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    gap: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .wpr-mobile-toggle-wrap,
  .wpr-mobile-nav-menu-container,
  .elementor-widget-icon .elementor-icon-wrapper,
  .elementor-widget-icon .elementor-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* --- la même hauteur de ligne pour les trois --------------------------- */
  /* Les trois colonnes mesuraient 47, 38 et 33 px de haut : les icônes ne
     reposaient donc pas sur la même ligne optique. */

  .wpr-mobile-nav-menu-container,
  .elementor-widget-icon .elementor-icon-wrapper,
  .elementor-shortcode {
    min-block-size: 44px !important;
  }
}

/* --- 32 bis. LE PANIER, CENTRÉ VERTICALEMENT ------------------------------
   Après la correction ci-dessus, les centres verticaux valaient encore
   22 px (hamburger), 24 px (maison) et 12 px (panier) : le panier restait
   12 px trop haut. Cause : sa colonne .elementor-shortcode fait bien 44 px
   de haut, mais elle est en display:block — son contenu de 32 px se cale
   donc en HAUT, au lieu de se centrer. Toute la chaîne du widget passe en
   flex centré. Le compteur, lui, est en position:absolute : il ne participe
   pas au flux et ne décale rien.
   Tout est préfixé .elementor-shortcode pour ne pas toucher à la bulle
   flottante du panier, qui utilise les mêmes classes ailleurs dans la page.
   ------------------------------------------------------------------------ */

@media (max-width: 921px) {

  .elementor-shortcode,
  .elementor-shortcode .xoo-wsc-sc-cont,
  .elementor-shortcode .xoo-wsc-cart-trigger,
  .elementor-shortcode .xoo-wsc-sc-bkcont {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .elementor-shortcode .xoo-wsc-sc-bki {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    block-size: 24px !important;
    line-height: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════════
   33. LE CONTRASTE DES BOUTONS, UNE FOIS POUR TOUTES — 21/09/2026
   Mouhcine : « le bouton متابعة التسوق n'apparaît pas, texte bleu sur fond
   bleu — vérifie cela sur la globalité du site, sur tous les boutons une
   fois pour toutes. »

   MÉTHODE : plutôt que de corriger à l'œil, un audit calcule le rapport de
   contraste WCAG de chaque bouton, en remontant l'arbre jusqu'au premier
   fond opaque. Résultat sur l'accueil :

     « متابعة التسوق »   texte rgb(43,57,145) / fond rgb(43,57,145) → 1,00
     « العودة إلى المتجر » texte blanc / fond rgb(43,57,145)         → 8,59  ✔

   Un rapport de 1,00 signifie deux couleurs IDENTIQUES : le libellé était
   littéralement effacé. Le panier latéral (side-cart-woocommerce) peint ses
   boutons de pied en bleu et laisse la couleur de texte héritée, elle-même
   bleue.

   ⚠️ FAUX POSITIF À NE PAS « CORRIGER » : l'audit signale aussi .sw-h-btn2,
   le bouton en contour du hero, à 1,01. C'est un artefact de la méthode —
   ce bouton est posé sur l'IMAGE du hero, qui n'est pas une couleur de fond,
   si bien que la remontée trouve le blanc de la page. À l'écran il est blanc
   sur bleu foncé et parfaitement lisible. On n'y touche pas.

   PRINCIPE RETENU, valable partout : un bouton plein porte du BLANC sur le
   bleu de marque ; un bouton secondaire porte du BLEU sur fond clair avec un
   filet bleu, et s'inverse au survol. Jamais deux teintes de la même famille
   l'une sur l'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- le panier latéral ---------------------------------------------------- */

.xoo-wsc-container .xoo-wsc-btn,
.xoo-wsc-container .xoo-wsc-ft-btn,
.xoo-wsc-modal .xoo-wsc-btn {
  background-color: var(--sw-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--sw-blue) !important;
}

.xoo-wsc-container .xoo-wsc-btn:hover,
.xoo-wsc-container .xoo-wsc-ft-btn:hover,
.xoo-wsc-container .xoo-wsc-btn:focus,
.xoo-wsc-container .xoo-wsc-ft-btn:focus {
  background-color: var(--sw-blue-dark) !important;
  color: #fff !important;
  border-color: var(--sw-blue-dark) !important;
}

/* « Continuer mes achats » est une action SECONDAIRE : elle ne doit pas
   peser autant que « Passer commande ». On la met en contour — ce qui règle
   le contraste et rétablit du même coup la hiérarchie entre les deux. */
.xoo-wsc-ft-btn.xoo-wsc-cart-close {
  background-color: #fff !important;
  color: var(--sw-blue) !important;
  border: 1.5px solid var(--sw-blue) !important;
}

.xoo-wsc-ft-btn.xoo-wsc-cart-close:hover,
.xoo-wsc-ft-btn.xoo-wsc-cart-close:focus {
  background-color: var(--sw-blue) !important;
  color: #fff !important;
}

/* --- les boutons pleins de WooCommerce, Astra et Elementor ---------------- */
/* Tous ces boutons reçoivent le bleu de marque par le thème ; on verrouille
   la couleur du texte en blanc dans TOUS les états, y compris :hover et
   :visited, qui sont justement ceux que les feuilles de style tierces
   oublient. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .wc-block-components-button,
.wp-element-button,
.wc-block-cart__submit-button {
  color: #fff !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .wc-block-components-button:hover,
.wp-element-button:hover,
.wc-block-cart__submit-button:hover {
  color: #fff !important;
}

/* --- les boutons désactivés ---------------------------------------------- */
/* Un bouton grisé garde souvent la couleur du texte du bouton actif et
   devient illisible sur son fond clair. */
button[disabled],
.button[disabled],
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  background-color: var(--sw-line) !important;
  color: #6b7280 !important;
  border-color: var(--sw-line) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   34. SOUS-MENUS MOBILES, LARGEUR DES CARTES, ET L'ŒIL — 21/09/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   34a. LES SOUS-MENUS DU HAMBURGER, EN BLEU SUR BLEU
   Mouhcine : « les sous-menus du menu hamburger buguent, bleu sur fond bleu ».

   Mesuré : la classe réelle des entrées de sous-niveau est
   wpr-mobile-SUB-menu-item — avec « mobile » au milieu. La section 31 visait
   wpr-sub-menu-item, SANS « mobile » : elle ne s'appliquait donc à rien, et
   les libellés restaient en rgb(68,68,68) sur le fond bleu rgb(43,57,145).
   Pire, l'entrée de la page courante (الرئيسية) héritait de la couleur
   d'accent rgb(43,57,145) — soit exactement la couleur du fond : contraste
   de 1,00, texte littéralement effacé.

   On force donc le blanc sur TOUTES les entrées, y compris l'entrée active,
   et on marque le sous-niveau par un voile clair et un retrait plutôt que
   par une couleur de texte — un contraste bâti sur le fond ne peut pas se
   retrouver à égalité avec lui.
   ─────────────────────────────────────────────────────────────────────────── */

.wpr-mobile-nav-menu li.menu-item > a,
.wpr-mobile-nav-menu .wpr-mobile-menu-item,
.wpr-mobile-nav-menu .wpr-mobile-sub-menu-item,
.wpr-mobile-nav-menu li.menu-item > a:hover,
.wpr-mobile-nav-menu li.menu-item > a:focus,
.wpr-mobile-nav-menu li.current-menu-item > a,
.wpr-mobile-nav-menu li.current-menu-ancestor > a,
.wpr-mobile-nav-menu li.current_page_item > a,
.wpr-mobile-nav-menu .wpr-active-menu-item {
  color: #fff !important;
}

/* Le sous-niveau : un voile clair sur le bleu, pas une autre couleur de
   texte. La hiérarchie se lit au retrait et à la nuance de fond. */
.wpr-mobile-nav-menu .wpr-mobile-sub-menu-item {
  background-color: rgba(255, 255, 255, .10) !important;
  padding-inline-start: 28px !important;
  font-size: .94em;
}

.wpr-mobile-nav-menu .wpr-mobile-sub-menu-item:hover {
  background-color: rgba(255, 255, 255, .20) !important;
}

.wpr-mobile-nav-menu .wpr-mobile-sub-menu li.menu-item {
  background-color: transparent !important;
}

.wpr-mobile-nav-menu .wpr-mobile-sub-icon,
.wpr-mobile-nav-menu .wpr-mobile-sub-menu .wpr-mobile-sub-icon {
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   34b. LES CARTES PRODUIT EN MOBILE
   Mouhcine : « les cartes ne sont pas assez larges en mobile, élargis-les en
   soignant les paddings pour ne pas tronquer le texte, exploite la largeur
   au maximum avec un petit padding à gauche et à droite, uniformise cela sur
   le site ; tu peux diminuer légèrement la taille du texte. »

   Mesuré à 375 px AVANT : .sw-wrap portait 16 px de chaque côté, la carte
   12 px, soit 56 px perdus sur 375 — 15 % de l'écran en marges. La zone
   utile d'une carte tombait à 156 px, d'où les titres qui se coupaient.
   APRÈS : 10 px de gouttière et 8 px dans la carte, soit 36 px — on rend
   20 px de largeur à chaque rangée sans coller le texte au bord.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  .sw-wrap,
  .ast-container,
  .ast-woocommerce-container {
    padding-inline: 10px !important;
  }

  ul.products li.product,
  .sw-products li.product {
    padding: 8px 8px 14px !important;
  }

  ul.products { gap: 10px !important; }

  /* Un cran de moins sur le texte : les titres arabes tiennent alors sur
     deux lignes au lieu de trois, et cessent d'être tronqués. */
  ul.products li.product .woocommerce-loop-product__title,
  .sw-products li.product .woocommerce-loop-product__title {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  ul.products li.product .price,
  .sw-products li.product .price { font-size: 14px !important; }

  ul.products li.product .button,
  ul.products li.product .add_to_cart_button {
    font-size: 13px !important;
    padding-inline: 10px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   34c. « نظرة سريعة » DEVIENT UN ŒIL
   Mouhcine : « le bouton نظرة سريعة cache en partie l'image, le remplacer
   par juste un œil ? » — oui. Le libellé s'étalait sur toute la largeur de
   la vignette (156 px mesurés) et masquait le produit. Il devient une
   pastille de 34 px dans un coin.

   Le libellé reste dans le HTML pour les lecteurs d'écran : on le réduit à
   zéro et on dessine l'œil en masque CSS, plutôt que de vider le lien — un
   bouton sans texte accessible n'est plus annonçable.
   ─────────────────────────────────────────────────────────────────────────── */

.ast-quick-view-text {
  position: absolute !important;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  inline-size: 34px !important;
  block-size: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
  z-index: 3;
}

.ast-quick-view-text::before {
  content: '';
  inline-size: 19px;
  block-size: 19px;
  background-color: var(--sw-blue);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%205C7%205%202.7%208.1%201%2012c1.7%203.9%206%207%2011%207s9.3-3.1%2011-7c-1.7-3.9-6-7-11-7zm0%2012a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-2.5a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%205C7%205%202.7%208.1%201%2012c1.7%203.9%206%207%2011%207s9.3-3.1%2011-7c-1.7-3.9-6-7-11-7zm0%2012a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-2.5a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ast-quick-view-text:hover { background-color: var(--sw-blue) !important; }
.ast-quick-view-text:hover::before { background-color: #fff; }

/* Le conteneur de la vignette doit pouvoir ancrer la pastille. */
.astra-shop-thumbnail-wrap { position: relative !important; }

/* ═══════════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════════
   35. CORRECTIF DE LA SECTION 34 — 21/09/2026
   Deux erreurs de la passe précédente, relevées à la mesure.

   a) J'AI RÉTRÉCI LES CARTES AU LIEU DE LES ÉLARGIR
      J'avais posé padding-inline: 10px sur .ast-container et
      .ast-woocommerce-container en croyant y trouver une gouttière à
      réduire. Or ces conteneurs étaient DÉJÀ à 0 : la boutique exploitait
      la pleine largeur. Mon ajout a donc retiré 20 px, et la carte est
      passée de 182 à 162 px. On retire cette règle. La seule marge
      réellement récupérable était celle DANS la carte (12 → 8 px), et celle
      de .sw-wrap sur l'accueil (16 → 10 px), qui restent acquises.

   b) LA COULEUR DES SOUS-MENUS N'A PAS PRIS
      Mesuré après coup : fond bien passé en rgba(255,255,255,.10), mais
      texte toujours rgb(68,68,68). Le fond venait d'une règle sans
      ancêtre exigé, la couleur d'une règle préfixée .wpr-mobile-nav-menu —
      les entrées de sous-niveau ne sont donc PAS sous cet ancêtre. On cible
      la classe seule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a) on rend aux conteneurs leur pleine largeur */
@media (max-width: 767px) {
  .ast-container,
  .ast-woocommerce-container { padding-inline: 0 !important; }

  .sw-wrap { padding-inline: 10px !important; }
}

/* b) la couleur des sous-menus, sans exiger d'ancêtre */
a.wpr-mobile-sub-menu-item,
.wpr-mobile-sub-menu-item,
.wpr-mobile-sub-menu-item:hover,
.wpr-mobile-sub-menu-item:focus,
.wpr-mobile-menu-item,
a.wpr-mobile-menu-item {
  color: #fff !important;
}

.wpr-mobile-sub-menu-item {
  background-color: rgba(255, 255, 255, .10) !important;
  padding-inline-start: 28px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   36. LE PANNEAU DU MENU MOBILE : POSITION ET COULEUR — 21/09/2026
   Mouhcine : « les éléments du menu hamburger développé sont placés trop
   haut dans l'écran » et « bleu sur fond bleu ».

   a) POSITION — mesuré panneau ouvert : position absolute, top: -166,484 px,
      hauteur 377 px, z-index 9999. Le panneau démarrait donc 166 px AU-DESSUS
      du haut de la fenêtre : ses premières entrées étaient hors écran, et on
      ne voyait que la fin de la liste. Son parent .wpr-mobile-nav-menu-container
      est en position: static, si bien que le décalage se calculait par rapport
      à un ancêtre lointain. On rend ce parent positionné et on ancre le
      panneau juste SOUS le bouton.

   b) COULEUR — la cause n'était pas le widget, mais MA PROPRE règle de menu
      de bureau :
          #masthead .current-menu-item > a { color: var(--sw-blue) !important }
      Spécificité 1,1,1 (un identifiant), contre 0,2,2 pour la règle mobile :
      l'identifiant l'emporte, les deux étant en !important. Le menu mobile
      vivant lui aussi dans #masthead, l'entrée de la page courante héritait
      du bleu — sur le fond bleu. On préfixe donc les règles mobiles par
      #masthead pour repasser devant, plutôt que d'empiler des !important
      qui n'y auraient rien changé.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a) ancrage du panneau sous le bouton */
.wpr-mobile-nav-menu-container { position: relative !important; }

.wpr-mobile-mega-menu-wrap {
  top: 100% !important;
  bottom: auto !important;
  max-block-size: calc(100vh - 120px);
  overflow-y: auto;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

/* b) la couleur, avec la spécificité nécessaire */
#masthead .wpr-mobile-nav-menu li.menu-item > a,
#masthead .wpr-mobile-nav-menu .wpr-mobile-menu-item,
#masthead .wpr-mobile-nav-menu .wpr-mobile-sub-menu-item,
#masthead .wpr-mobile-nav-menu li.current-menu-item > a,
#masthead .wpr-mobile-nav-menu li.current-menu-ancestor > a,
#masthead .wpr-mobile-nav-menu li.current_page_item > a,
#masthead .wpr-mobile-nav-menu li.menu-item > a:hover,
.ehf-header .wpr-mobile-nav-menu li.menu-item > a,
.ehf-header .wpr-mobile-nav-menu li.current-menu-item > a,
.ehf-header .wpr-mobile-nav-menu .wpr-mobile-sub-menu-item {
  color: #fff !important;
}

/* L'entrée courante se signale par un liseré, pas par une couleur de texte
   qui pourrait de nouveau rejoindre celle du fond. */
#masthead .wpr-mobile-nav-menu li.current-menu-item > a,
#masthead .wpr-mobile-nav-menu li.current_page_item > a {
  border-inline-start: 4px solid var(--sw-cyan) !important;
  background-color: var(--sw-blue-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   37. LES BOUTONS DE CARTE SUR UNE SEULE LIGNE — 21/09/2026
   Mouhcine : « إضافة إلى السلة et أضف إلى المفضلة doivent être sur une seule
   ligne, diminue la taille des polices, ils doivent occuper toute la largeur
   en mobile, ou repense le texte pour que ça tienne ; élargis encore les
   cartes. »

   Trois leviers, appliqués dans cet ordre de préférence :

   1. RACCOURCIR LE TEXTE plutôt que rapetisser la police.
      « أضف إلى المفضلة » (15 caractères) devient « أضف للمفضلة » (11) :
      même sens, une préposition contractée, tournure courante en arabe.
      C'est ce qui règle le retour à la ligne à la source — traité dans
      souqwide-traductions.php, pas ici.

   2. GAGNER DE LA LARGEUR sur les marges, pas sur le texte.
      L'écart entre cartes passe de 12 à 8 px et le rembourrage interne de
      8 à 6 px : +8 px de zone utile par carte, sans rien coller au bord.

   3. Et seulement ensuite, la police : 12,5 px, avec interdiction de
      revenir à la ligne. Un bouton d'action qui se coupe en deux sur une
      carte de 90 px de large se lit mal et se touche mal.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* --- plus de largeur utile pour la carte ------------------------------- */
  ul.products { gap: 8px !important; }

  /* Le rembourrage de la carte est pose par la section 42, plus bas. */

  /* --- les deux boutons : pleine largeur, une seule ligne ---------------- */
  ul.products li.product .button,
  ul.products li.product .add_to_cart_button,
  ul.products li.product .ast-shop-product-out-of-stock,
  ul.products li.product .tinv-wishlist a,
  ul.products li.product .tinvwl_add_to_wishlist_button,
  .sw-products li.product .button,
  .sw-products li.product .tinv-wishlist a {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    padding: 9px 6px !important;
    text-align: center !important;
    margin-inline: 0 !important;
  }

  /* Le cœur de la liste d'envies ne doit pas manger la largeur du libellé. */
  ul.products li.product .tinvwl_add_to_wishlist_button::before,
  ul.products li.product .tinv-wishlist i { font-size: 13px !important; margin-inline-end: 4px !important; }

  /* Le titre peut prendre la largeur regagnée. */
  ul.products li.product .woocommerce-loop-product__title,
  .sw-products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
}

/* Le palier <= 380 px qui se trouvait ici a ete SUPPRIME le 21/09/2026 :
   ses trois selecteurs etaient integralement couverts par la section 42, et
   aucune de ses declarations n'a jamais pris effet. Le palier equivalent,
   lui bien actif, vit desormais en fin de section 42. */

/* ═══════════════════════════════════════════════════════════════════════════
   38. LA GRILLE PRODUIT EN MOBILE : CENTRÉE ET SYMÉTRIQUE — 21/09/2026
   Mouhcine : « les deux cartes ne sont pas centrées, il y a plus d'espace à
   droite et c'est tronqué à gauche ».

   MESURÉ à 375 px, avant :
     carte 1 : x = 194  →  bord droit 375   (colle le bord droit)
     carte 2 : x =   0  →  bord droit 182   (colle le bord gauche)
     colonnes : 181,5 px fixes · écart 12 px
     total    : 182 + 12 + 182 = 376 px pour 375 px d'écran

   Deux défauts en un. D'abord **aucune gouttière** : les cartes touchaient
   les deux bords, ce qui se lit comme un rognage. Ensuite **1 px de trop**,
   parce que les colonnes sont figées à 181,5 px par le thème alors que
   l'écart, lui, dépend du conteneur : la somme ne peut pas tomber juste.

   On corrige la cause, pas le symptôme : colonnes FLUIDES en 1fr, qui se
   calculent à partir de la place réellement disponible, et une gouttière de
   10 px de chaque côté. La largeur utile passe à 172,5 px par carte — trois
   pixels de moins qu'avant, mais symétriques et sans débordement, ce qui est
   exactement ce que Mouhcine demandait : « un petit padding à gauche et à
   droite, uniforme ».
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  ul.products,
  .sw-products ul.products {
    box-sizing: border-box !important;
    padding-inline: 10px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    justify-content: stretch !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  ul.products li.product,
  .sw-products li.product {
    inline-size: auto !important;
    max-inline-size: none !important;
    margin-inline: 0 !important;
  }

  /* Garde-fou : plus rien ne doit dépasser en largeur. */
  ul.products li.product * { max-inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   39. LES FICHES PRODUIT RESPIRENT EN MOBILE — 21/09/2026
   Mouhcine : « dans les fiches produit ajoute un léger padding à gauche et à
   droite, c'est trop collé aux bords de l'écran. »

   Même cause que pour la grille (section 38) : la mise en pleine largeur
   demandée plus tôt avait mis les conteneurs à 0 de rembourrage, ce qui
   convient à une image ou à un bandeau, mais pas à du texte. Un paragraphe
   arabe qui touche le bord de l'écran se lit mal, et sur un téléphone la
   paume masque le premier caractère.

   On reprend donc les 10 px de la grille — même valeur, pour que les deux
   pages s'alignent — en épargnant ce qui DOIT rester pleine largeur :
   la galerie d'images et les sections déjà traitées en pleine largeur.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .single-product .site-content .ast-container,
  .single-product .entry-content,
  .single-product .summary,
  .single-product .woocommerce-tabs,
  .single-product .product_meta,
  /* .related.products et .up-sells ont ete RETIRES de cette liste le
     21/09/2026 : leur parent .ast-container porte deja les 10 px, et le
     cumul donnait 42 px de marge avec des cartes liees a 147 px. */
  .single-product .woocommerce-product-details__short-description {
    padding-inline: 10px !important;
    box-sizing: border-box !important;
  }

  /* La galerie reste bord à bord : c'est une image, elle gagne à occuper
     toute la largeur, et elle ne souffre pas du contact avec le bord. */
  .single-product .woocommerce-product-gallery {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }

  /* Le fil d'Ariane et le titre suivent le texte, pas l'image. */
  .single-product .ast-breadcrumbs-wrapper,
  .single-product .product_title { padding-inline: 10px !important; }

  /* Les onglets de description : même retrait, sinon le texte long
     recolle au bord une fois l'onglet ouvert. */
  .single-product .woocommerce-Tabs-panel { padding-inline: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   40. LA CARTE ORPHELINE, ET LES FLÈCHES DE GALERIE — 21/09/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   40a. « LES CARTES NE SONT TOUJOURS PAS CENTRÉES SUR MON S26 »
   Mouhcine voyait un décalage que mon navigateur ne montrait pas. La mesure
   a tranché : ce n'est PAS un défaut de centrage.

   Relevé à 390 px, section « منتجاتنا », grille de 2 colonnes de 163 px :
       rangée 1 :  26 → 189   et   201 → 364      symétrique
       rangée 2 :  26 → 189   et   201 → 364      symétrique
       rangée 3 :                  201 → 364      SEULE

   Il y a CINQ produits pour DEUX colonnes : la dernière rangée n'en porte
   qu'un, qui se place en début de ligne — à DROITE en RTL — et laisse la
   moitié gauche vide. À l'œil, la section paraît décalée vers la droite.
   Les rangées pleines, elles, étaient déjà parfaitement centrées, ce qui
   explique que le défaut m'ait échappé : je mesurais la première rangée.

   On centre donc l'orphelin sur toute la largeur plutôt que de le laisser
   en début de ligne. La règle ne se déclenche que lorsque le nombre de
   produits est IMPAIR (:last-child:nth-child(odd)) : avec 4 ou 6 produits,
   elle ne s'applique pas et la grille reste telle quelle.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  ul.products > li.product:last-child:nth-child(odd),
  ul.products > .ast-article-single:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    inline-size: calc(50% - 6px) !important;
    max-inline-size: calc(50% - 6px) !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   40b. LES FLÈCHES « SUIVANT » ET « PRÉCÉDENT » DE LA GALERIE
   Mouhcine : « ajoute une ombre légère autour des cercles des boutons next
   et preview car ils ne sont pas très visibles, ou améliore leur contraste
   convenablement. »

   Les deux à la fois, parce qu'une ombre seule ne suffirait pas : le
   problème est d'abord que la flèche grise se pose sur une photo claire à
   fond blanc. On donne donc au cercle un fond blanc franc, un filet et une
   flèche au bleu de marque — contraste 8,6:1 contre le fond — puis l'ombre
   portée, qui décolle le cercle de l'image quelle que soit la photo.

   ⚠️ On ne touche NI à la position NI à la taille : une tentative
   précédente de reprendre la mise en page de la galerie l'a cassée. On se
   limite ici à l'apparence du cercle.
   ─────────────────────────────────────────────────────────────────────────── */

.woocommerce-product-gallery .flex-direction-nav a,
.woocommerce-product-gallery .flex-prev,
.woocommerce-product-gallery .flex-next {
  background-color: #ffffff !important;
  border: 1.5px solid var(--sw-blue) !important;
  border-radius: 50% !important;
  color: var(--sw-blue) !important;
  box-shadow: 0 2px 10px rgba(26, 26, 26, .22), 0 0 0 4px rgba(255, 255, 255, .85) !important;
  opacity: 1 !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.woocommerce-product-gallery .flex-direction-nav a::before,
.woocommerce-product-gallery .flex-prev::before,
.woocommerce-product-gallery .flex-next::before {
  color: var(--sw-blue) !important;
  opacity: 1 !important;
  font-weight: 700;
}

.woocommerce-product-gallery .flex-direction-nav a svg,
.woocommerce-product-gallery .flex-prev svg,
.woocommerce-product-gallery .flex-next svg {
  fill: var(--sw-blue) !important;
  stroke: var(--sw-blue) !important;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
  background-color: var(--sw-blue) !important;
  box-shadow: 0 4px 14px rgba(26, 26, 26, .30), 0 0 0 4px rgba(255, 255, 255, .9) !important;
}

.woocommerce-product-gallery .flex-direction-nav a:hover::before,
.woocommerce-product-gallery .flex-direction-nav a:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Une flèche désactivée doit se voir comme désactivée, pas disparaître :
   sinon on croit le bouton cassé. */
.woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
  opacity: .45 !important;
  border-color: var(--sw-line) !important;
  box-shadow: 0 1px 4px rgba(26, 26, 26, .12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   41. ROBUSTESSE DE LA GRILLE MOBILE — 21/09/2026
   Mouhcine, sur un Galaxy S26 : « sur les lignes où il y a deux cartes,
   celle de gauche est tronquée et il y a trop de largeur à droite » — alors
   que dans mon navigateur les deux rangées mesurent 26 px de marge de chaque
   côté, à 360, 375, 390 et 412 px.

   Un défaut qui apparaît sur un appareil et pas sur un autre à largeur égale
   vient des MÉTRIQUES DE POLICE, pas de la largeur. Deux causes possibles,
   toutes deux corrigées ici parce qu'on ne peut pas les départager à
   distance :

   1) min-inline-size: auto SUR LES ENFANTS DE GRILLE — c'est la valeur par
      défaut, et elle est piégeuse : une colonne en 1fr refuse de descendre
      sous la largeur de son contenu le plus large. Si un titre arabe rend
      quelques pixels plus large sur Android que dans mon rendu, SA colonne
      s'élargit, l'autre se comprime, et la rangée cesse d'être symétrique.
      C'est exactement le symptôme décrit : une carte rognée, l'autre trop
      large. On impose min-inline-size: 0.

   2) LA PLEINE LARGEUR EN 100vw — inutile sous 1024 px, puisque
      .entry-content y mesure déjà toute la largeur (mesuré : 390 px pour un
      écran de 390 px, marges à 0). Les calculs en calc(50% - 50vw) n'y
      apportent rien et peuvent décaler en RTL selon la façon dont
      l'appareil compte 100vw. On les neutralise sous 1024 px et on les
      garde au-dessus, là où ils servent vraiment.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* 2) plus aucun calcul en vw sur mobile et tablette */
  .sw-h,
  .sw-trust,
  .sw-products,
  .sw-story {
    margin-inline: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }
}

@media (max-width: 767px) {

  /* 1) une colonne de grille doit pouvoir se comprimer */
  ul.products > li.product,
  ul.products > .ast-article-single,
  .sw-products ul.products > * {
    min-inline-size: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Un titre très long ne doit jamais élargir sa colonne. */
  ul.products .woocommerce-loop-product__title,
  ul.products .ast-woo-product-category,
  ul.products .price {
    min-inline-size: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  /* Ni une image, ni un bouton. */
  ul.products img,
  ul.products .button { max-inline-size: 100% !important; }

  /* Garde-fou final : la grille ne dépasse pas son conteneur. */
  ul.products {
    max-inline-size: 100% !important;
    overflow: hidden;
  }
}

/* Sur les navigateurs qui ne connaissent pas overflow: clip, hidden fait le
   même travail ; clip reste préféré quand il existe car il n'introduit pas
   de conteneur de défilement. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

/* ═══════════════════════════════════════════════════════════════════════════
   42. CARTES PLUS LARGES, BOUTON NON TRONQUÉ — 21/09/2026
   Mouhcine : « c'est centré, mais élargis encore les cartes, ne tronque pas
   le texte du panier ".. إضافة إلى السل" ».

   ─── POURQUOI LE TEXTE ÉTAIT COUPÉ ─────────────────────────────────────────
   Mesuré à 390 px : bouton de 149 px, dont 22 px de rembourrage DE CHAQUE
   CÔTÉ — 44 px sur 149 — pour un texte qui mesure 95 px. Il restait 105 px
   utiles : ça passe de justesse chez moi, et ça casse dès que la police rend
   quelques pixels plus large, ce qui est le cas sur l'appareil de Mouhcine.

   ⚠️ ET SURTOUT : la section 37 prévoyait déjà 12,5 px de police et 6 px de
   rembourrage, mais ELLE NE S'APPLIQUAIT PAS. Conflit de spécificité avec
   une de MES règles antérieures :

       .woocommerce ul.products li.product .button   (0,4,2)  gagne
       ul.products li.product .button                (0,3,2)  perd

   Les deux portent !important : c'est donc la spécificité qui tranche, pas
   le point d'exclamation. Une media query n'ajoute AUCUNE spécificité —
   écrire la règle « pour mobile » ne la fait pas passer devant. On reprend
   donc ici le sélecteur au même niveau (0,4,2), placé plus bas dans le
   fichier pour l'emporter à égalité.

   ─── CE QU'ON GAGNE EN LARGEUR ─────────────────────────────────────────────
   Chrome retiré autour des cartes, à 390 px :
       conteneur .woocommerce  16 px x2  ->  8 px x2
       grille ul.products      10 px x2  ->  6 px x2
       écart entre colonnes    12 px     ->  8 px
       total                   36 px de moins... soit 36 px au lieu de 64

   Carte : (390 - 36) / 2 = 177 px, contre 163 px avant — +14 px chacune.
   Bouton : 177 - 12 (carte) = 165 px, moins 16 de rembourrage = 149 px
   utiles pour un texte de 95 px, soit 57 % de marge. Même une police rendue
   30 % plus large tiendrait.

   ─── ET PLUS D'ELLIPSE ─────────────────────────────────────────────────────
   text-overflow: ellipsis MASQUAIT le problème au lieu de le signaler : le
   libellé se coupait proprement et on ne voyait pas qu'il manquait de place.
   On le retire. S'il déborde un jour, cela se verra, et c'est préférable.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* --- 1. récupérer la largeur sur les conteneurs ------------------------ */

  /* Le bloc `.woocommerce { padding-inline: 8px }` a ete SUPPRIME le
     21/09/2026 : `.woocommerce` est aussi une classe du <body> et du
     conteneur pose par TI WishList a l'interieur de chaque carte. Mesure
     avant suppression : le <body> portait 8 px de rembourrage lateral, et
     chaque carte 8 px de plus a l'interieur. La gouttiere de 6 px sur
     ul.products suffit. */

  /* (0,2,1) et non (0,1,1) : la section 4 pose gap: clamp(12px,1.2vw,20px)
     sur `.woocommerce ul.products`, qui battait les quatre tentatives
     precedentes de reduire l'ecart. Mesure avant correction : 12 px au lieu
     des 8 demandes. Une media query n'ajoute aucune specificite. */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    /* 10 px et non 6 : apres le retrait du padding parasite de `.woocommerce`
       (qui atterrissait sur le <body>), la gouttiere reelle etait tombee a
       6 px, trop juste au bord de l'ecran. A 10 px la carte fait 181 px a
       390 px de large, contre 175 avant le nettoyage. */
    padding-inline: 10px !important;
    column-gap: 8px !important;
    row-gap: 14px !important;
  }

  ul.products li.product,
  ul.products > .ast-article-single { padding: 6px 6px 12px !important; }

  /* --- 2. le bouton, au niveau de spécificité qui gagne ------------------ */

  /* `a.button` a ete retire : il portait cette liste a (0,4,3) et tuait le
     palier <= 380 px ecrit plus bas, qui est en (0,4,2). Le bouton
     WooCommerce est deja couvert par `.button`. */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce ul.products .ast-article-single .button {
    font-size: 12.5px !important;
    padding-block: 9px !important;
    padding-inline: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  /* Le lien « أضف للمفضلة » suit la même règle, sinon il redevient le plus
     large des deux et c'est lui qui déborde. */
  .woocommerce ul.products li.product .tinv-wishlist a,
  .woocommerce ul.products li.product .tinvwl_add_to_wishlist_button,
  ul.products li.product .tinv-wishlist a {
    font-size: 12px !important;
    padding-inline: 6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* --- 3. sous 380 px, un dernier cran ----------------------------------- */
  /* À 360 px la carte tombe à 162 px : le texte de 95 px garde encore
     50 px de marge, mais on resserre le rembourrage plutôt que la police,
     qui est déjà au minimum lisible en arabe. */
}

@media (max-width: 380px) {
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    padding-inline: 5px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════════
   43. LA BARRE COLLANTE D'AJOUT AU PANIER — 21/09/2026
   Mouhcine : « إضافة إلى السلة n'est pas bien centré en bas de la fiche
   produit » — il s'agit bien de la barre qui apparaît en bas quand on fait
   défiler, pas du bouton dans la fiche.

   MESURÉ à 390 px, barre visible, AVANT :
       .ast-sticky-add-to-cart              0 → 390   pleine largeur, OK
       .ast-sticky-add-to-cart-action-wrap  0 → 317   ← le coupable
       bouton                               0 → 317   (100 % de son parent)
   Le bouton occupait déjà toute la largeur de son conteneur : c'est le
   CONTENEUR qui ne faisait que 317 px sur 390, laissant 73 px de vide.

   DEUX ESSAIS EN FLEX ONT ÉCHOUÉ, et c'est instructif :
     · flex: 1 1 100%  -> le bouton cohabitait avec la quantité au lieu de
       passer à la ligne, et se comprimait à 277 px (103 px de vide) ;
     · flex: 1 1 auto  -> il prenait la largeur de son seul texte, 131 px,
       et l'ordre RTL le renvoyait à gauche (249 px de vide).
   Dans un conteneur dont on ne maîtrise ni l'ordre source ni le sens
   d'écriture, le flex donne un résultat qu'il faut deviner. On revient donc
   à un empilement en blocs, dont la largeur se calcule sans ambiguïté :
   la quantité sur une ligne, le bouton en dessous à 100 % du conteneur.

   ⚠️ SPÉCIFICITÉ : la règle d'Astra est
   `.woocommerce div.ast-sticky-add-to-cart-action-wrap .button` = (0,4,1).
   On écrit au même niveau, avec `div.` sur le conteneur.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .woocommerce div.ast-sticky-add-to-cart-action-wrap,
  .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
    padding: 8px 10px !important;
  }

  /* La quantité, centrée, sur sa propre ligne. */
  .woocommerce div.ast-sticky-add-to-cart-action-wrap .quantity {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    inline-size: auto !important;
    margin: 0 auto 8px auto !important;
  }

  /* Le bouton, pleine largeur du conteneur. */
  .woocommerce div.ast-sticky-add-to-cart-action-wrap .button,
  .woocommerce div.ast-sticky-add-to-cart-action-wrap .single_add_to_cart_button,
  .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap .button {
    display: block !important;
    float: none !important;
    /* 80 % et non 100 % : Mouhcine a demande de reduire le bouton de 20 %
       une fois qu'il etait enfin centre. La marge auto le garde centre quelle
       que soit la largeur d'ecran, plutot qu'un decalage fixe qui se
       deregle des que la barre change de taille. */
    inline-size: 80% !important;
    max-inline-size: 80% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding-inline: 14px !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   44. LE TITRE DES PAGES DU TUNNEL PASSAIT SOUS L'EN-TÊTE — 21/09/2026
   Mouhcine : « le titre de la page panier سلة التسوق est trop haut et
   tronqué, aligne-le comme les autres pages ».

   MESURÉ sur /cart/ à 390 px : le h1 démarre à y = 31 px, et .site-content à
   y = 1 px. Le contenu commence donc À RAS du haut de la fenêtre, sous la
   barre d'en-tête, qui le recouvre. Les autres pages ont un dégagement ; le
   panier et la caisse n'en ont pas, parce que leur gabarit WooCommerce ne
   passe pas par le même conteneur.

   On leur rend le même dégagement qu'ailleurs, plutôt que de déplacer le
   titre : c'est le contenu entier qui remonte, pas seulement le titre.
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content {
  padding-block-start: clamp(18px, 4vw, 34px) !important;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title {
  margin-block-start: 0 !important;
  padding-block-start: 6px !important;
  line-height: 1.5 !important;   /* l'arabe a besoin de place pour ses hampes */
}

/* Le bouton de commande doit se distinguer des boutons secondaires de la
   page : il est le seul à porter le fond plein. */
.woocommerce-cart .checkout-button {
  display: block !important;
  inline-size: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   45. ALIGNER LA GOUTTIÈRE DE L'ACCUEIL SUR CELLE DE LA BOUTIQUE — 21/09/2026
   Après le nettoyage, la boutique donne des cartes de 181 px avec 10 px de
   marge, mais l'accueil restait à 165 px avec 26 px. La différence vient du
   conteneur : sur la boutique la grille vit dans .ast-woocommerce-container,
   sans rembourrage ; sur l'accueil elle vit dans le <div class="woocommerce">
   que produit le shortcode, qui porte 16 px de chaque côté.

   On annule ce rembourrage-là, et lui seul. Le sélecteur est volontairement
   `.entry-content > div.woocommerce` : `div.` évite le <body class="woocommerce">
   (l'erreur relevée par l'audit du jour), et `.entry-content >` évite les
   conteneurs de boucle d'autres gabarits.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .entry-content > div.woocommerce,
  .entry-content > div.woocommerce.columns-4,
  .entry-content > div.woocommerce.columns-5 {
    padding-inline: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   46. HERO : LE TEXTE SUR LA PARTIE BLEUE — 24/09/2026
   Mouhcine : « décaler le texte vers la droite pour qu'il soit plus
   contrasté, la partie bleue à droite est vide ; pour le moment le texte
   chevauche l'image ».

   CAUSE MESURÉE : .sw-h est un flex EN COLONNE, et son enfant .sw-wrap porte
   margin-inline: auto. Dans ce cas les marges automatiques l'emportent sur
   l'étirement : le conteneur se réduit à la largeur du texte (616 px) et se
   CENTRE dans le bandeau. Le « justify-items: start » de la section 29
   s'appliquait donc à l'intérieur d'une boîte déjà centrée, et ne déplaçait
   rien. À 1680 px, le bloc allait de 550 à 1110 px, en plein sur la photo.

   On rend au conteneur toute la largeur ; le bloc de texte se cale alors au
   bord droit (start en RTL), et sa largeur est plafonnée à ~36 % de l'écran
   pour rester sur la zone bleue de l'image.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 981px) {
  .sw-h > .sw-h-grille {
    inline-size: 100%;
    max-inline-size: 1720px;
    box-sizing: border-box;
    padding-inline-start: clamp(28px, 5vw, 96px);
  }

  .sw-h .sw-h-texte { max-inline-size: min(560px, 36vw); }

  /* Voile un peu plus franc sous le texte ; la scène produit (moitié gauche)
     reste intacte à partir de 62 %. */
  .sw-h {
    background-image:
      linear-gradient(to left,
        rgba(34, 46, 116, .94) 0%,
        rgba(34, 46, 116, .86) 30%,
        rgba(27, 36, 94, .50) 45%,
        rgba(27, 36, 94, 0) 62%),
      url('hero-souqwide.jpg');
  }
}

/* Entre 901 et 980 px le texte est déjà centré (section 28) mais le voile
   latéral de la section 29 restait actif : le titre se posait sur la scène
   claire. On y applique le voile plein du téléphone. */
@media (min-width: 901px) and (max-width: 980px) {
  .sw-h {
    background-position: center center;
    background-image:
      linear-gradient(to bottom,
        rgba(27, 36, 94, .50) 0%,
        rgba(34, 46, 116, .90) 45%,
        rgba(34, 46, 116, .96) 100%),
      url('hero-souqwide.jpg');
  }
  .sw-h > .sw-h-grille { inline-size: 100%; box-sizing: border-box; }
  .sw-h-grille { justify-items: center; }
  .sw-h .sw-h-texte { max-inline-size: 640px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   47. UN SEUL MENU SUR TABLETTE — 24/09/2026
   Entre 768 et 1024 px, l'en-tête de bureau affichait DEUX icônes de menu
   l'une sous l'autre : celle du menu principal (widget 61bf970, ligne du
   haut) et celle du petit menu secondaire « من نحن · اتصل بنا » (widget
   eb501d0), qui se replie lui aussi en hamburger à cette largeur.

   Ce second menu n'apporte rien sur tablette : ses deux liens sont déjà dans
   le menu principal, sous « اتصل بنا ». On masque son conteneur (6719fc5, qui
   ne contient que lui) : l'en-tête perd sa seconde ligne vide.
   Sur ordinateur (> 1024 px) la barre secondaire reste affichée ; sur
   téléphone (< 768 px) le site utilise déjà un autre en-tête.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-element-6719fc5 { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   48. LE MENU PRINCIPAL EN CAIRO — 24/09/2026
   Mouhcine : « les trois éléments du menu principal donnent l'impression
   d'être pixelisés et pas très nets ; garder la même police que le reste ».

   CAUSE MESURÉE : le widget Royal Elementor du menu (61bf970) impose
   « Open Sans » 700. Open Sans ne contient AUCUNE lettre arabe : le
   navigateur dessinait الرئيسية / المتجر / اتصل بنا avec une police système
   de secours, et fabriquait le gras lui-même (font-synthesis: weight) —
   d'où les contours baveux, et une police différente de tout le reste.
   C'était le SEUL élément du site hors Cairo (relevé sur toute la page).

   On rend Cairo au menu de bureau, au menu replié (tablette) et aux
   sous-menus. Graisse 700 conservée : Cairo 700 est déjà chargée, il n'y a
   donc plus de gras synthétique. Les icônes (<i>, classes fa-*) sont exclues
   pour ne pas perdre les flèches des sous-menus.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-id="61bf970"] :is(a, span, li):not([class*="fa-"]):not([class*="icon"]) {
  font-family: var(--sw-ui) !important;
  font-synthesis: none;
}

[data-id="61bf970"] .wpr-nav-menu > li > a,
[data-id="61bf970"] .wpr-nav-menu > li > a span {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   49. LA BARRE COLLANTE SUR UNE SEULE LIGNE — 24/09/2026
   Mouhcine : « le footer qui apparaît en bas de la fiche quand on défile, je
   veux le voir en une seule ligne (bouton + sélecteur de quantité) ; il prend
   trop d'espace ; que tout soit clair, sans chevauchement ».

   MESURÉ à 375 px AVANT : barre de 132 px de haut (quantité sur une ligne,
   bouton de 59 px dessous — l'empilement de la section 43), et la bulle
   flottante du panier (fixed, 40 px, en bas à droite) posée SUR le bouton.

   APRÈS : une ligne d'environ 60 px. La quantité, compacte, garde sa largeur
   naturelle ; le bouton prend tout le reste (flex 1, min-inline-size 0 pour
   qu'il puisse rétrécir au lieu de pousser la ligne). La section 43 reste en
   place pour la largeur du conteneur ; on n'y remplace que la mise en pile.
   Et tant que la barre est visible, la bulle du panier remonte au-dessus
   d'elle (:has, pris en charge par Safari 15.4+ et Chrome 105+).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap,
  .woocommerce .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap form.cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    inline-size: 100% !important;
  }

  /* la quantité : compacte, largeur naturelle, jamais écrasée */
  .woocommerce .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap .quantity {
    flex: 0 0 auto !important;
    margin: 0 !important;
    block-size: 44px !important;
    display: flex !important;
    align-items: stretch !important;
  }
  .ast-sticky-add-to-cart .quantity .minus,
  .ast-sticky-add-to-cart .quantity .plus {
    inline-size: 34px !important;
    min-inline-size: 34px !important;
    block-size: 44px !important;
    padding: 0 !important;
    line-height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .ast-sticky-add-to-cart .quantity input.qty {
    inline-size: 40px !important;
    min-inline-size: 40px !important;
    block-size: 44px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* le bouton : tout le reste de la ligne */
  .woocommerce .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap .button,
  .woocommerce .ast-sticky-add-to-cart div.ast-sticky-add-to-cart-action-wrap .single_add_to_cart_button {
    flex: 1 1 auto !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    min-inline-size: 0 !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    line-height: 44px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* la bulle du panier remonte au-dessus de la barre tant qu'elle est là */
  body:has(.ast-sticky-add-to-cart.is-active) .xoo-wsc-basket {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    transition: bottom .2s ease;
  }
}