/* ==========================================================================
   Wasel — design system fiches produits + enrichissement de la landing
   RTL. Additif : n'altère jamais la structure ni le comportement de wasl-landing.
   ========================================================================== */

:root{
  --w-gold:#8a6d3b;
  --w-gold-lt:#b8955c;

  /* Or profond : réservé au TEXTE. Le doré clair (#c9a961) tombe sous 3:1 sur
     fond crème — illisible en corps de texte. Ces deux tons tiennent le
     contraste AA tout en restant dans la famille dorée. */
  --w-gold-deep:#6b5220;   /* titres        — ~7.2:1 sur crème */
  --w-gold-body:#5c4a2e;   /* corps de texte — ~8.4:1 sur crème */

  --w-ink:#1f2937;
  --w-muted:#6b7280;
  --w-line:#e8e1d5;
  --w-cream:#fbf9f6;
  --w-sand:#f3ece1;
  --w-green:#16a34a;
  --w-red:#dc2626;
  --w-radius:16px;
  --w-shadow:0 4px 20px rgba(31,41,55,.07);
  --w-shadow-lg:0 14px 40px rgba(31,41,55,.13);
}

/* ---------- Animations ---------- */
@keyframes wRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wFade{from{opacity:0}to{opacity:1}}
@keyframes wPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes wShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes wFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wSmoke{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  30%{opacity:.5}
  100%{opacity:0;transform:translateY(-26px) scale(1.3)}
}
/* Balayage lumineux sur le texte doré */
@keyframes wSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Dérive lente de la trame géométrique */
@keyframes wDrift{from{background-position:0 0,0 0}to{background-position:52px 52px,-52px 52px}}
/* Halo qui respire */
@keyframes wBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.09)}}
/* Rotation continue — l'anneau du logo */
@keyframes wOrbit{to{transform:rotate(360deg)}}
/* Le croissant se creuse : le disque soustrait glisse à sa place */
@keyframes wWax{from{cx:47px}to{cx:39px}}
/* Scintillement de l'étoile */
@keyframes wTwinkle{
  0%,72%,100%{transform:scale(1);opacity:1}
  84%{transform:scale(1.22);opacity:.85}
}
/* Reflet qui traverse la carte d'offre */
@keyframes wSweep{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(320%) rotate(18deg)}}

/* ==========================================================================
   1. FICHES PRODUITS
   ========================================================================== */

.wsl{direction:rtl;text-align:right;font-size:16px;line-height:1.95;color:var(--w-ink)}
.wsl *{box-sizing:border-box}
.wsl > *{animation:wRise .55s ease both}
.wsl > *:nth-child(2){animation-delay:.05s}
.wsl > *:nth-child(3){animation-delay:.1s}
.wsl > *:nth-child(4){animation-delay:.15s}
.wsl > *:nth-child(n+5){animation-delay:.2s}

.wsl h2{font-size:26px;line-height:1.4;margin:38px 0 14px;color:var(--w-gold-deep);font-weight:800}
.wsl h3{font-size:19px;margin:26px 0 10px;color:var(--w-gold-deep);font-weight:700}
.wsl p{margin:0 0 14px}
.wsl-tagline{color:var(--w-gold-deep)!important}

/* --- Accroche --- */
.wsl-hook{
  position:relative;margin:0 0 26px;padding:24px 26px;border-radius:var(--w-radius);
  background:linear-gradient(135deg,var(--w-cream) 0%,var(--w-sand) 100%);
  border:1px solid var(--w-line);overflow:hidden
}
.wsl-hook::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--w-gold),var(--w-gold-lt))
}
.wsl-hook__t{font-size:22px;font-weight:800;color:var(--w-gold);margin:0 0 8px;line-height:1.5}
.wsl-hook__s{margin:0;color:#4b5563;font-size:16.5px}

/* Bloc de marque : le hilal accompagne la signature.
   Le croissant est une background-image — KSES supprimerait un <svg> inline. */
.wsl-hook--brand{display:flex;align-items:flex-start;gap:16px;margin-top:30px}
.wsl-hook__body{display:block;flex:1 1 auto}
.wsl-hook__body .wsl-hook__t,
.wsl-hook__body .wsl-hook__s{display:block}
.wsl-hook__mark{
  flex:0 0 auto;display:block;
  width:64px;height:64px;border-radius:18px;
  background-color:#fffdf9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23000'/%3E%3Ccircle cx='30' cy='32' r='21' fill='%23fff'/%3E%3Ccircle cx='39' cy='32' r='17.5' fill='%23000'/%3E%3C/mask%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%238a6d3b' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='130 52' opacity='.5'/%3E%3Ccircle cx='30' cy='32' r='21' fill='%238a6d3b' mask='url(%23m)'/%3E%3Cpath fill='%23c9a961' d='M44 26.4 L44.9 29.83 L47.96 28.04 L46.17 31.1 L49.6 32 L46.17 32.9 L47.96 35.96 L44.9 34.17 L44 37.6 L43.1 34.17 L40.04 35.96 L41.83 32.9 L38.4 32 L41.83 31.1 L40.04 28.04 L43.1 29.83 Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:46px 46px;
  border:1px solid var(--w-line);box-shadow:0 3px 12px rgba(138,109,59,.13)
}
@media (max-width:520px){
  .wsl-hook--brand{flex-direction:column;gap:12px}
}

/* Le croissant remplace la puce des titres de section. */
.wsl h2{
  position:relative;padding-inline-start:34px
}
.wsl h2::before{
  content:"";position:absolute;inset-inline-start:0;top:.34em;
  width:22px;height:22px;opacity:.9;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23000'/%3E%3Ccircle cx='30' cy='32' r='21' fill='%23fff'/%3E%3Ccircle cx='39' cy='32' r='17.5' fill='%23000'/%3E%3C/mask%3E%3Ccircle cx='30' cy='32' r='21' fill='%236b5220' mask='url(%23m)'/%3E%3Cpath fill='%236b5220' d='M44 26.4 L44.9 29.83 L47.96 28.04 L46.17 31.1 L49.6 32 L46.17 32.9 L47.96 35.96 L44.9 34.17 L44 37.6 L43.1 34.17 L40.04 35.96 L41.83 32.9 L38.4 32 L41.83 31.1 L40.04 28.04 L43.1 29.83 Z'/%3E%3C/svg%3E")
}

/* Marque dans la modale de commande. */
.wsl-modal-mark{
  display:block;text-align:center;margin:0 0 10px
}
.wsl-modal-mark .wsl-mark{display:inline-block}

/* --- Bandeau d'arguments --- */
.wsl-strip{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.wsl-strip li{
  flex:1 1 150px;display:flex;align-items:center;gap:9px;padding:13px 15px;
  background:#fff;border:1px solid var(--w-line);border-radius:13px;
  font-size:14.5px;font-weight:600;transition:transform .25s,box-shadow .25s,border-color .25s
}
.wsl-strip li:hover{transform:translateY(-4px);box-shadow:var(--w-shadow);border-color:var(--w-gold-lt)}
.wsl-strip .i{font-size:21px;line-height:1}

/* --- Cartes bénéfices --- */
.wsl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:15px;margin:22px 0}
.wsl-b{
  position:relative;padding:22px 20px;background:#fff;border:1px solid var(--w-line);
  border-radius:var(--w-radius);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;overflow:hidden
}
.wsl-b::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at 100% 0,rgba(138,109,59,.09),transparent 60%)
}
.wsl-b:hover{transform:translateY(-6px);box-shadow:var(--w-shadow-lg)}
.wsl-b:hover::after{opacity:1}
.wsl-b__i{
  width:48px;height:48px;display:grid;place-items:center;font-size:24px;border-radius:14px;
  background:linear-gradient(135deg,var(--w-sand),#fff);border:1px solid var(--w-line);margin:0 0 12px
}
.wsl-b h4{margin:0 0 7px;font-size:16.5px;font-weight:700}
.wsl-b p{margin:0;color:var(--w-muted);font-size:14.5px;line-height:1.85}

/* --- Comparatif avant / après --- */
.wsl-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.wsl-vs__c{padding:20px;border-radius:var(--w-radius);border:1px solid var(--w-line)}
.wsl-vs__c--bad{background:#fdf3f3;border-color:#f3d6d6}
.wsl-vs__c--good{background:#f1fbf4;border-color:#cfead9}
.wsl-vs__h{font-weight:800;margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.wsl-vs__c--bad .wsl-vs__h{color:#b91c1c}
.wsl-vs__c--good .wsl-vs__h{color:#15803d}
.wsl-vs ul{margin:0;padding:0;list-style:none}
.wsl-vs li{padding:7px 0;font-size:14.5px;line-height:1.8;border-bottom:1px dashed rgba(0,0,0,.07)}
.wsl-vs li:last-child{border:0}

/* --- Liste à coches --- */
.wsl-check{list-style:none;padding:0;margin:16px 0}
.wsl-check li{
  position:relative;padding:11px 40px 11px 12px;margin:0 0 9px;background:var(--w-cream);
  border:1px solid var(--w-line);border-radius:12px;font-size:15.5px;
  transition:transform .22s,background .22s
}
.wsl-check li:hover{transform:translateX(-6px);background:#fff}
.wsl-check li::before{
  content:"✓";position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--w-green);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800
}

/* --- Specs --- */
.wsl-specs{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;
  border:1px solid var(--w-line);border-radius:var(--w-radius);overflow:hidden}
.wsl-specs tr:nth-child(odd){background:var(--w-cream)}
.wsl-specs td{padding:13px 16px;font-size:15px;border-bottom:1px solid var(--w-line)}
.wsl-specs tr:last-child td{border-bottom:0}
.wsl-specs td:first-child{font-weight:700;width:42%;color:var(--w-ink)}
.wsl-specs td:last-child{color:#4b5563}

/* --- Étapes --- */
.wsl-steps{list-style:none;counter-reset:s;padding:0;margin:18px 0}
.wsl-steps li{
  counter-increment:s;position:relative;padding:14px 58px 14px 14px;margin:0 0 11px;
  background:#fff;border:1px solid var(--w-line);border-radius:14px;font-size:15.5px
}
.wsl-steps li::before{
  content:counter(s);position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--w-gold),var(--w-gold-lt));color:#fff
}

/* --- FAQ --- */
.wsl-faq{margin:20px 0}
.wsl-faq details{
  background:#fff;border:1px solid var(--w-line);border-radius:14px;margin:0 0 10px;
  overflow:hidden;transition:box-shadow .25s
}
.wsl-faq details[open]{box-shadow:var(--w-shadow)}
.wsl-faq summary{
  cursor:pointer;padding:16px 18px;font-weight:700;font-size:15.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.wsl-faq summary::-webkit-details-marker{display:none}
.wsl-faq summary::after{content:"+";font-size:22px;color:var(--w-gold);transition:transform .3s;line-height:1}
.wsl-faq details[open] summary::after{transform:rotate(45deg)}
.wsl-faq .a{padding:0 18px 17px;color:#4b5563;font-size:15px;line-height:1.9;animation:wFade .35s ease both}

/* --- Citation / preuve sociale --- */
.wsl-quote{
  margin:24px 0;padding:22px 24px;border-radius:var(--w-radius);
  background:linear-gradient(135deg,#fff,var(--w-cream));border:1px solid var(--w-line);position:relative
}
.wsl-quote::before{
  content:"❞";position:absolute;top:8px;inset-inline-end:18px;font-size:44px;color:var(--w-gold);opacity:.22
}
.wsl-quote p{margin:0 0 8px;font-size:16px;font-style:italic;color:#374151}
.wsl-quote cite{font-size:13.5px;color:var(--w-muted);font-style:normal;font-weight:700}

/* --- Encadré d'usage / note --- */
.wsl-note{
  margin:20px 0;padding:16px 18px;border-radius:13px;background:#fffbeb;
  border:1px solid #fde68a;font-size:14.5px;color:#78350f;line-height:1.85
}

/* --- Réassurance --- */
.wsl-trust{
  margin:34px 0 0;padding:24px;border-radius:18px;
  background:linear-gradient(135deg,var(--w-cream),var(--w-sand));border:1px solid var(--w-line)
}
.wsl-trust h3{margin:0 0 14px;font-size:19px}
.wsl-trust ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.wsl-trust li{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;background:#fff;
  border:1px solid var(--w-line);border-radius:12px;font-size:14.5px;line-height:1.75;
  transition:transform .25s,box-shadow .25s
}
.wsl-trust li:hover{transform:translateY(-3px);box-shadow:var(--w-shadow)}
.wsl-trust .i{font-size:19px;line-height:1.4}

/* ==========================================================================
   2. LANDING — enrichissement additif (structure inchangée)
   ========================================================================== */

.wasl-card{transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s!important}
.wasl-card:hover{transform:translateY(-7px)!important;box-shadow:var(--w-shadow-lg)!important}
.wasl-card__media{overflow:hidden}
.wasl-card__media img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.wasl-card:hover .wasl-card__media img{transform:scale(1.07)}

.wasl-badge{
  background:linear-gradient(100deg,var(--w-gold) 0%,var(--w-gold-lt) 45%,var(--w-gold) 90%)!important;
  background-size:420px 100%!important;animation:wShimmer 3.4s linear infinite;color:#fff!important
}

.wasl-btn--primary,.wasl-btn--gold{
  position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s,filter .22s!important
}
.wasl-btn--primary:hover,.wasl-btn--gold:hover{
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,163,74,.28);filter:brightness(1.05)
}
.wasl-btn--lg{animation:wPulse 2.9s ease-in-out infinite}
.wasl-btn--lg:hover{animation-play-state:paused}

.wasl-save{
  display:inline-block;
  background:linear-gradient(135deg,var(--w-red),#ef4444)!important;color:#fff!important;
  box-shadow:0 3px 12px rgba(220,38,38,.3)
}
.wasl-price__now{color:var(--w-ink)!important;font-weight:800!important}

.wasl-strip__item{transition:transform .28s}
.wasl-strip__item:hover{transform:translateY(-5px)}
.wasl-strip__icon{animation:wFloat 3.6s ease-in-out infinite}
.wasl-strip__item:nth-child(2) .wasl-strip__icon{animation-delay:.45s}
.wasl-strip__item:nth-child(3) .wasl-strip__icon{animation-delay:.9s}
.wasl-strip__item:nth-child(4) .wasl-strip__icon{animation-delay:1.35s}

.wasl-steps__num{
  background:linear-gradient(135deg,var(--w-gold),var(--w-gold-lt))!important;color:#fff!important;
  box-shadow:0 5px 15px rgba(138,109,59,.3)
}
.wasl-tier{transition:transform .25s,border-color .25s,box-shadow .25s}
.wasl-tier:hover{transform:translateY(-4px);border-color:var(--w-gold-lt);box-shadow:var(--w-shadow)}
.wasl-field input,.wasl-field select{transition:border-color .2s,box-shadow .2s}
.wasl-field input:focus,.wasl-field select:focus{
  border-color:var(--w-gold)!important;box-shadow:0 0 0 3px rgba(138,109,59,.14)!important;outline:none
}

/* ==========================================================================
   3. IDENTITÉ DE MARQUE — en-tête
   ========================================================================== */

.wasl-brand{
  display:flex;align-items:center;gap:12px;text-decoration:none!important;
  transition:opacity .22s
}
.wasl-brand:hover{opacity:.94}

.wasl-brand__mark{
  display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;
  border-radius:15px;
  background:linear-gradient(140deg,#fffdf9 0%,var(--w-sand) 100%);
  border:1px solid var(--w-line);
  box-shadow:0 3px 12px rgba(138,109,59,.14);
  transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .35s
}
.wasl-brand:hover .wasl-brand__mark{
  transform:rotate(45deg);
  box-shadow:0 7px 22px rgba(138,109,59,.26)
}
.wasl-brand__mark .wsl-mark{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.wasl-brand:hover .wsl-mark{transform:rotate(-45deg)}

/* L'orbite ouverte tourne sans fin : le cycle qui continue. */
.wsl-mark--static *{animation:none!important}
.wsl-mark__ring{
  transform-origin:32px 32px;
  animation:wOrbit 26s linear infinite
}
.wasl-brand:hover .wsl-mark__ring{animation-duration:7s}

/* Le croissant se creuse au chargement — le hilal qui apparaît.
   `cx` est une propriété géométrique SVG animable en CSS ; si le navigateur
   ne la gère pas, l'attribut cx="39" reste, soit l'état final. */
.wsl-mark__cut{animation:wWax 1.5s cubic-bezier(.33,0,.2,1) both}

/* L'étoile scintille doucement. */
.wsl-mark__najm{
  transform-origin:44px 32px;
  animation:wTwinkle 4.2s ease-in-out infinite;
  animation-delay:1.2s
}

.wasl-brand__text{display:flex;flex-direction:column;line-height:1.18;gap:3px}

.wasl-brand__name{
  font-size:27px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--w-gold) 0%,#c9a961 50%,var(--w-gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--w-gold)
}

/* Slogan de l'en-tête : passé du gris discret à l'or, et agrandi. */
.wasl-brand__slogan{
  font-size:13.5px;font-weight:700;color:var(--w-gold);letter-spacing:.15px;
  position:relative;padding-inline-start:17px;white-space:nowrap
}
.wasl-brand__slogan::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--w-gold-lt),var(--w-gold))
}

@media (max-width:640px){
  .wasl-brand__slogan{white-space:normal;font-size:11.5px;padding-inline-start:0}
  .wasl-brand__slogan::before{display:none}
}

@media (max-width:520px){
  .wasl-brand__mark{width:44px;height:44px;flex-basis:44px}
  .wasl-brand__mark .wsl-mark{width:30px;height:30px}
  .wasl-brand__name{font-size:22px}
  .wasl-brand__slogan{font-size:11px}
}

/* ==========================================================================
   4. SECTION HÉRO
   ========================================================================== */

/* Fond sombre : c'est lui qui rend l'or clair (#c9a961) lisible.
   Sur crème il tombait à 2,14:1 ; ici il dépasse 8:1. */
.wasl-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(820px circle at 85% 6%,rgba(201,169,97,.16),transparent 60%),
    linear-gradient(165deg,#16281f 0%,#101d18 55%,#0b1512 100%)
}

/* Trame géométrique islamique — losanges imbriqués, en dérive lente. */
.wasl-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(45deg,rgba(201,169,97,.1) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-45deg,rgba(201,169,97,.1) 0 1px,transparent 1px 26px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%);
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
  animation:wDrift 34s linear infinite
}

/* Halo doré qui respire, derrière la carte d'offre. */
.wasl-hero__inner::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline-start:-90px;top:-70px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.2),transparent 68%);
  filter:blur(18px);animation:wBreathe 9s ease-in-out infinite
}
.wasl-hero__copy,.wasl-offer{position:relative;z-index:1}
/* Filet doré de séparation en pied de héro. */
.wasl-hero::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--w-gold-lt),#c9a961,var(--w-gold-lt),transparent);
  opacity:.75
}
.wasl-hero__inner{position:relative;z-index:1}

/* --- Colonne texte --- */
.wsl-hero-ready .wasl-hero__copy > *{animation:wRise .6s ease both}
.wsl-hero-ready .wasl-hero__copy > *:nth-child(2){animation-delay:.08s}
.wsl-hero-ready .wasl-hero__copy > *:nth-child(3){animation-delay:.16s}
.wsl-hero-ready .wasl-hero__copy > *:nth-child(4){animation-delay:.24s}
.wsl-hero-ready .wasl-hero__copy > *:nth-child(5){animation-delay:.32s}
.wsl-hero-ready .wasl-hero__copy > *:nth-child(n+6){animation-delay:.4s}

/* La pastille s'étirait sur toute la largeur : `.wasl-hero__copy` est une
   colonne flex, et un enfant en `inline-flex` y est étiré par défaut.
   `width:fit-content` + `align-self` la recadrent à droite, à sa taille. */
.wasl-hero__copy .wasl-eyebrow{
  display:inline-flex!important;align-items:center;gap:8px;
  width:fit-content;max-width:100%;align-self:flex-start;
  margin:0 0 18px!important;
  padding:8px 17px;border-radius:999px;
  background:rgba(201,169,97,.13);border:1px solid rgba(201,169,97,.45);
  color:#e8d5a3;font-size:13.5px;font-weight:800;letter-spacing:.3px;
  line-height:1.6;white-space:nowrap;
  backdrop-filter:blur(5px);
  box-shadow:0 3px 16px rgba(201,169,97,.14)
}
.wasl-hero__copy .wasl-eyebrow::before{
  content:"✦";font-size:12px;color:#c9a961;animation:wBreathe 2.8s ease-in-out infinite
}
@media (max-width:520px){
  .wasl-hero__copy .wasl-eyebrow{white-space:normal;font-size:12.5px;padding:7px 14px}
}

/* Or clair en dégradé — lisible parce que le fond est sombre.
   Le dégradé est surdimensionné et animé : un reflet traverse le titre. */
.wasl-hero__copy h1{
  font-size:clamp(30px,5vw,50px);line-height:1.28;font-weight:800;
  margin:0 0 16px;letter-spacing:-.3px;text-wrap:balance;
  background:linear-gradient(100deg,#c9a961 0%,#f5e6c0 28%,#c9a961 52%,#a8843c 78%,#c9a961 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#c9a961; /* repli si background-clip non supporté */
  animation:wSheen 7s ease-in-out infinite
}

/* --- Signature de marque, mise en avant sous le titre --- */
.wsl-slogan{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px!important;padding:14px 20px;
  width:fit-content;max-width:100%;
  border-radius:14px;
  background:linear-gradient(100deg,rgba(201,169,97,.16),rgba(201,169,97,.05));
  border:1px solid rgba(201,169,97,.38);
  border-inline-start:3px solid #c9a961;
  backdrop-filter:blur(5px);
  box-shadow:0 4px 22px rgba(201,169,97,.13)
}
.wsl-slogan__name{
  font-size:clamp(19px,2.3vw,24px);font-weight:800;letter-spacing:.4px;
  background:linear-gradient(120deg,#f5e6c0,#c9a961 55%,#e8d5a3);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#e8d5a3;
  animation:wSheen 5.5s ease-in-out infinite
}
.wsl-slogan__sep{color:rgba(201,169,97,.6);font-size:17px;line-height:1}
.wsl-slogan__txt{
  font-size:clamp(14.5px,1.6vw,16.5px);font-weight:600;
  color:#e8d5a3;line-height:1.7
}

@media (max-width:520px){
  .wsl-slogan{gap:8px;padding:12px 15px}
  .wsl-slogan__sep{display:none}
  .wsl-slogan__name{width:100%}
}

.wasl-hero__copy .wasl-lede{
  font-size:clamp(15.5px,1.7vw,17.5px);line-height:2.05;
  color:#d5cdbd;font-weight:500;
  max-width:56ch;margin:0 0 22px
}

/* --- Points de réassurance --- */
.wasl-hero__points{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 24px
}
.wasl-hero__points li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 13px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(201,169,97,.34);
  font-size:14px;font-weight:700;color:#e2c98d;
  backdrop-filter:blur(4px);
  transition:transform .25s,background .25s,border-color .25s
}
.wasl-hero__points li::before{
  content:"✓";width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  background:linear-gradient(135deg,#c9a961,#e8d5a3);
  color:#12211c;display:grid;place-items:center;
  font-size:11px;font-weight:800
}
.wasl-hero__points li:hover{
  transform:translateY(-3px);background:rgba(201,169,97,.14);border-color:#c9a961
}

.wasl-hero__scroll{
  display:inline-block;font-weight:700;font-size:15px;color:#c9a961;
  text-decoration:none;transition:transform .25s,opacity .25s
}
.wasl-hero__scroll:hover{transform:translateY(3px);opacity:.85}

/* --- Carte d'offre (structure jamais modifiée, style uniquement) --- */
.wasl-offer{
  position:relative;border-radius:22px!important;
  background:#fff;border:1px solid var(--w-line);
  box-shadow:0 18px 48px rgba(31,41,55,.12);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s
}
.wasl-offer:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(0,0,0,.42)}

/* Reflet qui traverse la carte, comme sur du verre. */
.wasl-offer::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:wSweep 6.5s ease-in-out infinite;animation-delay:1.4s;
  border-radius:22px
}
.wasl-offer::before{
  content:"";position:absolute;inset:-1px;border-radius:23px;pointer-events:none;
  background:linear-gradient(140deg,rgba(201,169,97,.55),transparent 45%,rgba(201,169,97,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px
}

.wasl-offer__flag{
  display:inline-block;padding:6px 15px;border-radius:999px;
  background:linear-gradient(100deg,var(--w-gold) 0%,#c9a961 45%,var(--w-gold) 90%);
  background-size:420px 100%;animation:wShimmer 3.4s linear infinite;
  color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.4px
}

.wasl-offer__media{overflow:hidden;border-radius:16px}
.wasl-offer__media img{transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.wasl-offer:hover .wasl-offer__media img{transform:scale(1.06)}

.wasl-offer h2{font-size:19px!important;line-height:1.55;font-weight:800;color:var(--w-gold-deep)}
.wasl-offer__price{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.wasl-offer__price .wasl-price__now{font-size:30px!important}
.wasl-offer__note{font-size:12.5px;color:var(--w-muted)}

@media (max-width:760px){
  .wasl-hero__copy h1{font-size:clamp(26px,7vw,34px)}
  .wasl-hero__points li{font-size:13px;padding:8px 12px}
}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .wsl{font-size:15.5px}
  .wsl h2{font-size:22px}
  .wsl-vs{grid-template-columns:1fr}
  .wsl-hook{padding:20px}
  .wsl-hook__t{font-size:19px}
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .wsl > *,.wsl-faq .a{animation:none!important}
  .wasl-btn--lg,.wasl-badge,.wasl-strip__icon{animation:none!important}
  /* Héro, logo et carte d'offre : tout mouvement coupé. */
  .wasl-hero::before,.wasl-hero__inner::before,.wasl-hero__copy h1,
  .wasl-hero__copy .wasl-eyebrow::before,.wasl-offer::after,.wsl-slogan__name,
  .wsl-mark__ring,.wsl-mark__cut,.wsl-mark__najm,
  .wsl-hero-ready .wasl-hero__copy > *{animation:none!important}
  .wsl-mark__cut{cx:39px!important}
  *{transition-duration:.01ms!important}
}