/* Fiches produits — typographie arabe et charte vert / or.
   Chargé APRÈS wasel-islamic-catalog/assets/wasel.css, qu'il ré-habille. */

/* ==================================================================
   1. TYPOGRAPHIE
   Le thème imposait « IBM Plex Mono, monospace » — une police à chasse
   fixe, sans glyphes arabes, et dont aucun fichier n'était chargé : le
   navigateur retombait sur sa monospace par défaut. On installe une pile
   système qui rend l'arabe correctement sur iOS, Android et Windows,
   sans aucune requête réseau supplémentaire.
   ================================================================== */

:root{
  --wsl-font:"SF Arabic","Segoe UI",-apple-system,BlinkMacSystemFont,
             "Noto Naskh Arabic","Droid Arabic Naskh","Geeza Pro",
             Tahoma,Arial,sans-serif;

  /* Charte : vert profond + or */
  --wsl-green:#16281f;      /* vert nuit — titres */
  --wsl-green-mid:#1f4034;  /* vert intermédiaire */
  --wsl-go:#16a34a;         /* vert d'action */
  --wsl-gold:#8a6d3b;       /* or */
  --wsl-gold-lt:#c9a961;    /* or clair — ornements */
  --wsl-gold-dp:#6b5220;    /* or profond — texte sur clair */
  --wsl-cream:#fbf9f6;
  --wsl-sand:#f3ece1;
  --wsl-line:#e8e1d5;
}

body,
body .wsl,
.wsl input,.wsl select,.wsl textarea,
.lp,.lp input,.lp select,.lp textarea,.lp button,
.wsl-shophero,.wasl-card,.wasl-hero,.wasl-footer,
.wp-block-site-title,.woocommerce{
  font-family:var(--wsl-font)!important
}

/* ==================================================================
   2. CORPS DE LA FICHE
   ================================================================== */

.wsl{
  font-size:16.5px;line-height:2.05;color:#33413a;
  max-width:74ch;margin-inline:auto
}
.wsl p{margin:0 0 15px}
.wsl strong{color:var(--wsl-green);font-weight:700}

/* Slogan en exergue */
.wsl-tagline{
  font-size:21px!important;font-weight:800;line-height:1.6;
  color:var(--wsl-gold-dp)!important;
  padding:0 0 14px;margin:0 0 22px!important;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--wsl-gold-lt),transparent) 1
}

/* --- Titres : vert profond, filet doré --- */
.wsl h2{
  font-size:25px!important;line-height:1.45;font-weight:800;
  color:var(--wsl-green)!important;
  margin:42px 0 16px!important;padding:0 34px 10px 0!important;
  position:relative;border-bottom:1px solid var(--wsl-line)
}
.wsl h2::after{
  content:"";position:absolute;bottom:-1px;inset-inline-start:0;
  width:76px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--wsl-gold),var(--wsl-gold-lt))
}
.wsl h3{
  font-size:19.5px!important;font-weight:700;
  color:var(--wsl-gold-dp)!important;margin:30px 0 12px!important
}

/* ==================================================================
   3. BLOCS
   ================================================================== */

/* Accroche : dégradé vert nuit, texte clair */
.wsl-hook{
  background:linear-gradient(160deg,var(--wsl-green),#0f1f18)!important;
  border:1px solid rgba(201,169,97,.32)!important;
  border-radius:18px!important;padding:26px 28px!important
}
.wsl-hook::before{
  background:linear-gradient(180deg,var(--wsl-gold-lt),var(--wsl-gold))!important;
  width:4px!important
}
.wsl-hook__t{
  font-size:22.5px!important;line-height:1.55;
  color:#e8d5a3!important;margin:0 0 10px!important
}
.wsl-hook__s{color:#c9cfc9!important;font-size:16.5px!important}
.wsl-hook__s strong{color:#e8d5a3!important}

/* Bloc de marque : fond clair, le hilal ressort */
.wsl-hook--brand{
  background:linear-gradient(150deg,var(--wsl-cream),var(--wsl-sand))!important;
  border-color:var(--wsl-line)!important
}
.wsl-hook--brand .wsl-hook__t{color:var(--wsl-gold-dp)!important}
.wsl-hook--brand .wsl-hook__s{color:#4b5563!important}
.wsl-hook--brand .wsl-hook__s strong{color:var(--wsl-green)!important}

/* Bandeau d'arguments */
.wsl-strip li{
  border-color:var(--wsl-line)!important;border-radius:14px!important;
  font-size:15px!important;font-weight:700;color:var(--wsl-green)!important
}
.wsl-strip li:hover{
  border-color:var(--wsl-gold-lt)!important;
  box-shadow:0 6px 20px rgba(138,109,59,.14)!important
}

/* Cartes bénéfices */
.wsl-b{border-radius:18px!important}
.wsl-b:hover{border-color:var(--wsl-gold-lt)!important}
.wsl-b__i{
  background:linear-gradient(140deg,var(--wsl-green),var(--wsl-green-mid))!important;
  border:0!important;color:#e8d5a3
}
.wsl-b h4{font-size:17px!important;color:var(--wsl-green)!important}
.wsl-b p{font-size:15px!important;line-height:1.9!important;color:#5b6a63!important}

/* Comparatif : rouge sobre / vert de marque */
.wsl-vs__c--good{
  background:#f2faf5!important;border-color:#cfe8da!important
}
.wsl-vs__c--good .wsl-vs__h{color:var(--wsl-green)!important}
.wsl-vs__c--bad{background:#fdf5f4!important;border-color:#f0dcd9!important}
.wsl-vs li{font-size:15px!important}

/* Liste à coches — vert d'action */
.wsl-check li{
  font-size:16px!important;border-color:var(--wsl-line)!important;
  background:var(--wsl-cream)!important
}
.wsl-check li::before{
  background:linear-gradient(135deg,#18a558,var(--wsl-go))!important;
  box-shadow:0 2px 8px rgba(22,163,74,.3)
}
.wsl-check li:hover{border-color:var(--wsl-go)!important;background:#fff!important}

/* Spécifications */
.wsl-specs{border-radius:16px!important;font-size:15.5px}
.wsl-specs tr:nth-child(odd){background:var(--wsl-cream)!important}
.wsl-specs td:first-child{
  color:var(--wsl-green)!important;font-weight:700;
  border-inline-start:3px solid var(--wsl-gold-lt)
}
.wsl-specs td{padding:14px 17px!important}

/* Étapes */
.wsl-steps li{font-size:16px!important;border-color:var(--wsl-line)!important}
.wsl-steps li::before{
  background:linear-gradient(135deg,var(--wsl-green),var(--wsl-green-mid))!important;
  color:#e8d5a3!important;box-shadow:0 4px 12px rgba(22,40,31,.28)
}

/* FAQ */
.wsl-faq summary{font-size:16px!important;color:var(--wsl-green)!important}
.wsl-faq summary::after{color:var(--wsl-gold)!important}
.wsl-faq details[open]{border-color:var(--wsl-gold-lt)!important}
.wsl-faq .a{font-size:15.5px!important;line-height:2!important}

/* Encadré conseil */
.wsl-note{
  background:linear-gradient(135deg,#fffdf5,#fdf8ea)!important;
  border-color:#e8d9a8!important;border-radius:14px!important;
  color:#5c4a2e!important;font-size:15.5px!important
}

/* Réassurance — vert de marque */
.wsl-trust{
  background:linear-gradient(160deg,var(--wsl-green),#0f1f18)!important;
  border:1px solid rgba(201,169,97,.3)!important;border-radius:20px!important
}
.wsl-trust h3{color:#e8d5a3!important;font-size:20px!important}
.wsl-trust li{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(201,169,97,.24)!important;
  color:#d5cdbd!important;font-size:15px!important
}
.wsl-trust li strong{color:#e8d5a3!important}
.wsl-trust li:hover{
  background:rgba(201,169,97,.13)!important;
  border-color:var(--wsl-gold-lt)!important
}

/* ==================================================================
   4. RESPONSIVE
   ================================================================== */

@media(max-width:600px){
  .wsl{font-size:16px;line-height:1.95}
  .wsl h2{font-size:21px!important;padding-inline-end:0!important}
  .wsl h3{font-size:17.5px!important}
  .wsl-tagline{font-size:18.5px!important}
  .wsl-hook{padding:20px!important}
  .wsl-hook__t{font-size:19px!important}
}