/* ============================================================
   pricing.css — page « Packages »
   Chargée uniquement par pricing.php. La base, la barre, le pied
   de page et le bouton WhatsApp viennent de msm.css.
   ============================================================ */

/* Tokens lus par le moteur de galaxie (canvas 2D : hex obligatoire,
   oklch() n'est pas accepté partout). */
.pk-hero{
  --galaxy-base:#0B1C2C; --galaxy-deep:#021020;
  --galaxy-gold:#E8AA4E; --galaxy-gold-soft:#EDC889;
  --galaxy-teal:#3FA0A0; --galaxy-star:#F6EDE0;
}

.pk-page{
  --ink:#0B1C2C; --ink-deep:#021020; --ink-card:#0d2233;
  --brass:#E3A857; --brass-soft:#EDC889; --teal:#3FA0A0;
  --paper:#F6EDE0; --paper-70:rgba(246,237,224,.72); --paper-50:rgba(246,237,224,.5);
  --line:rgba(246,237,224,.09);
  background:var(--ink-deep);
}
.pk-page .wrap{ width:min(1180px,92%); margin-inline:auto; }

/* ---------- HERO ---------- */
.pk-hero{ position:relative; overflow:hidden; background:var(--ink); padding:96px 0 74px; isolation:isolate; text-align:center; }
.pk-galaxy,.pk-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pk-galaxy{ display:block; width:100%; height:100%; opacity:.95; }
.pk-scrim{ background:
  linear-gradient(to bottom, rgba(2,16,32,.5), rgba(2,16,32,.82) 60%, var(--ink-deep));
  }
.pk-hero .wrap{ position:relative; z-index:2; }
.pk-eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px;
  border:1px solid rgba(227,168,87,.32); background:rgba(227,168,87,.1);
  color:var(--brass); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.pk-eyebrow i{ width:7px; height:7px; background:var(--brass);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.pk-hero h1{
  margin:26px auto 18px; max-width:17ch;
  font-size:clamp(31px,5vw,56px); font-weight:800; line-height:1.18;
}
html[dir="ltr"] .pk-hero h1{ font-family:'Space Grotesk',sans-serif; }
.pk-hero h1 em{ font-style:italic; background:linear-gradient(100deg,var(--brass),var(--brass-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pk-hero p{ max-width:56ch; margin-inline:auto; color:var(--paper-70); font-size:17px; line-height:1.85; }

/* Sélecteur de devise — même dessin que la section tarifs de
   l'accueil, et même clé de stockage : le choix suit le visiteur
   d'une page à l'autre. */
.pk-cur{ display:flex; justify-content:center; margin-top:28px; }
.pk-cur-in{
  display:inline-flex; gap:3px; padding:4px; border-radius:999px;
  border:1px solid var(--line); background:rgba(246,237,224,.04);
}
.pk-cur-btn{
  border:0; cursor:pointer; padding:8px 19px; border-radius:999px; font-family:inherit;
  background:transparent; color:var(--paper-50);
  font-size:12.5px; font-weight:700; letter-spacing:.04em; transition:.22s;
}
.pk-cur-btn.on{ background:linear-gradient(140deg,var(--brass),var(--brass-soft)); color:var(--ink-deep); }

.pk-rail{ position:relative; height:24px; overflow:hidden; }
.pk-rail::before{ content:""; position:absolute; inset:0; background-image:var(--zellige);
  background-size:auto 100%; background-repeat:repeat-x; opacity:.3; }

/* ---------- ÉTAPES ---------- */
/* Le dernier bloc touchait le pied de page. On met la respiration
   EN BAS de chaque étape et on annule le haut de la suivante :
   l'écart entre étapes ne bouge pas, mais la dernière garde son
   air avant le footer. */
.pk-step{ padding:64px 0 88px; }
.pk-step + .pk-step{ padding-top:0; }
.pk-step-head{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.pk-step-num{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:var(--ink-deep);
  background:linear-gradient(140deg,var(--brass),var(--brass-soft));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transform:scale(1.25);
}
.pk-step-head h2{ font-size:clamp(20px,2.4vw,26px); font-weight:700; }
.pk-step-head span{ color:var(--paper-50); font-size:14.5px; margin-inline-start:auto; }

/* ---------- PLANS ---------- */
.pk-plans{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr); align-items:start; }
.pk-plan{
  position:relative; display:flex; flex-direction:column; cursor:pointer;
  padding:32px 28px; border-radius:20px;
  background:linear-gradient(165deg, rgba(246,237,224,.05), rgba(2,16,32,.4));
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s;
}
.pk-plan:hover{ transform:translateY(-4px); border-color:rgba(227,168,87,.35); }
.pk-plan.on{
  border-color:var(--brass);
  background:linear-gradient(165deg, rgba(227,168,87,.13), rgba(2,16,32,.5));
  box-shadow:0 26px 60px -28px rgba(227,168,87,.5);
}
.pk-plan input{ position:absolute; opacity:0; pointer-events:none; }

.pk-tag{
  position:absolute; inset-block-start:-13px; inset-inline-start:28px;
  padding:5px 14px; border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(90deg,var(--teal),#2c7676); color:#fff;
}
.pk-plan h3{ font-size:21px; font-weight:700; margin-bottom:8px; }
.pk-plan .pk-for{ font-size:14px; color:var(--paper-70); line-height:1.7; margin-bottom:18px; }

.pk-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.pk-badges span{
  padding:5px 11px; border-radius:8px; font-size:11.5px; font-weight:600;
  background:rgba(246,237,224,.06); border:1px solid var(--line); color:var(--paper-70);
}

.pk-price{ display:flex; align-items:baseline; gap:10px; }
.pk-price b{ font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em; }
html[dir="ltr"] .pk-price b{ font-family:'Space Grotesk',sans-serif; }
.pk-price small{ font-size:13px; font-weight:700; color:var(--brass); }
.pk-was{ display:flex; align-items:center; gap:10px; margin-top:9px; min-height:24px; }
.pk-was s{ font-size:14px; color:var(--paper-50); }
.pk-off{
  padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800;
  background:rgba(63,160,160,.16); border:1px solid rgba(63,160,160,.35); color:#7fd4d4;
}

.pk-feats{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.pk-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--paper-70); line-height:1.6; }
.pk-feats i{ flex:0 0 auto; margin-top:3px; font-size:10px; color:var(--brass); }
.pk-feats li.plus{ color:var(--paper); font-weight:600; }

.pk-pick{
  margin-top:24px; padding:13px; border-radius:999px; text-align:center;
  font-size:14.5px; font-weight:700; border:1px solid var(--line);
  background:rgba(246,237,224,.05); transition:.25s;
}
.pk-plan.on .pk-pick{ background:linear-gradient(140deg,var(--brass),var(--brass-soft)); color:var(--ink-deep); border-color:transparent; }

/* ---------- OPTIONS ---------- */
.pk-addons{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.pk-addon{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:18px 20px; border-radius:14px;
  background:rgba(246,237,224,.035); border:1px solid var(--line);
  transition:border-color .25s, background .25s;
}
.pk-addon:hover{ border-color:rgba(227,168,87,.3); }
.pk-addon.on{ border-color:rgba(227,168,87,.6); background:rgba(227,168,87,.09); }
.pk-addon input{ position:absolute; opacity:0; pointer-events:none; }
.pk-box{
  width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:7px; border:1.5px solid rgba(246,237,224,.25);
  font-size:11px; color:var(--ink-deep); transition:.25s;
}
.pk-addon.on .pk-box{ background:var(--brass); border-color:var(--brass); }
.pk-box i{ opacity:0; transition:opacity .2s; }
.pk-addon.on .pk-box i{ opacity:1; }
.pk-addon-txt{ flex:1; min-width:0; }
.pk-addon-txt b{ display:block; font-size:14.5px; font-weight:600; margin-bottom:3px; }
.pk-addon-txt span{ font-size:12.5px; color:var(--paper-50); }
.pk-addon-price{ font-size:14px; font-weight:700; color:var(--brass); white-space:nowrap; }

/* Ce qui est offert doit se voir : c'est un argument, pas une ligne
   de liste. Accent teal pour le distinguer du laiton des prix. */
.pk-addon.free{
  border-color:rgba(63,160,160,.34);
  background:linear-gradient(140deg, rgba(63,160,160,.1), rgba(246,237,224,.03));
}
.pk-addon.free.on{ border-color:rgba(63,160,160,.7); background:rgba(63,160,160,.13); }
.pk-addon.free .pk-box{ border-color:rgba(63,160,160,.5); }
.pk-addon.free.on .pk-box{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pk-free-price{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; }
.pk-free-price s{ font-size:12px; color:var(--paper-50); }
.pk-free-price b{ font-size:13.5px; font-weight:800; color:#7fd4d4; letter-spacing:.02em; }
.pk-addon.free .pk-addon-price{ color:#7fd4d4; }
.pk-addon.free .pk-addon-txt span{ color:rgba(127,212,212,.85); }

/* 7 options : une grille fixe à 3 laisse un trou. Auto-fill s'adapte. */
.pk-addons{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); }

/* pas / quantité */
.pk-qty{ display:flex; align-items:center; gap:9px; }
.pk-qty button{
  width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:13px;
  border:1px solid var(--line); background:rgba(246,237,224,.06); color:var(--paper);
}
.pk-qty button:hover{ border-color:var(--brass); color:var(--brass); }
.pk-qty b{ min-width:22px; text-align:center; font-size:14px; }

/* ---------- BARRE DE TOTAL ---------- */
/* Le récapitulatif vit DANS la page, juste sous les options.
   En barre fixe il recouvrait le pied de page et imposait un vide
   de 120px en bas de chaque écran. */
.pk-bar{
  width:min(1180px,92%); margin:0 auto;
  padding:22px 26px; border-radius:18px;
  background:linear-gradient(140deg, rgba(63,160,160,.12), rgba(2,16,32,.5));
  border:1px solid rgba(227,168,87,.3);
}
.pk-bar .wrap{ width:100%; margin:0; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.pk-bar-info{ flex:1; min-width:0; }
.pk-bar-info b{ display:block; font-size:13px; color:var(--paper-50); font-weight:600; margin-bottom:4px; }
.pk-bar-info span{ font-size:14px; color:var(--paper-70); }
.pk-total{ text-align:end; }
.pk-total small{ display:block; font-size:12px; color:var(--paper-50); margin-bottom:3px; }
.pk-total b{ font-size:29px; font-weight:800; letter-spacing:-.02em; }
html[dir="ltr"] .pk-total b{ font-family:'Space Grotesk',sans-serif; }
.pk-total b em{ font-style:normal; font-size:15px; color:var(--brass); margin-inline-start:5px; }
.pk-go{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:15px 30px; border-radius:999px; cursor:pointer; border:0;
  background:linear-gradient(135deg,var(--teal),#2c7676); color:#fff;
  font-size:15px; font-weight:700; box-shadow:0 14px 34px -14px rgba(63,160,160,.9);
  transition:transform .25s;
}
.pk-go:hover{ transform:translateY(-2px); }
html[dir="rtl"] .pk-go i{ transform:scaleX(-1); }

/* ---------- RÉCAP + FORMULAIRE ---------- */
.pk-recap{ display:none; padding:0 0 40px; }
.pk-recap.open{ display:block; }
.pk-recap-grid{ display:grid; gap:26px; grid-template-columns:1fr 1fr; align-items:start; }
.pk-panel{ padding:30px 28px; border-radius:18px; background:rgba(246,237,224,.04); border:1px solid var(--line); }
.pk-panel h3{ font-size:18px; font-weight:700; margin-bottom:20px; }
.pk-lines{ list-style:none; padding:0; margin:0 0 18px; }
.pk-lines li{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:14.5px; }
.pk-lines li:last-child{ border-bottom:0; }
.pk-lines li .pk-amt{ color:var(--brass); font-weight:700; white-space:nowrap; }
.pk-lines li .pk-label{ flex:1; min-width:0; }

/* Retirer une ligne depuis le récapitulatif : le client corrige là où
   il regarde, sans remonter dans la page. */
.pk-del{
  flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid var(--line); background:transparent; border-radius:7px;
  color:var(--paper-50); font-size:11px; cursor:pointer; transition:.2s;
}
.pk-del:hover{ border-color:rgba(227,109,109,.6); color:#e88; background:rgba(227,109,109,.1); }
.pk-lines li.fixed .pk-del{ visibility:hidden; }
.pk-sum{ display:flex; justify-content:space-between; padding-top:16px; border-top:1px solid rgba(227,168,87,.3); font-size:19px; font-weight:800; }

.pk-field{ margin-bottom:15px; }
.pk-field label{ display:block; font-size:13px; color:var(--paper-70); margin-bottom:7px; }
.pk-field input, .pk-field textarea{
  width:100%; padding:13px 15px; border-radius:11px; font-family:inherit; font-size:15px;
  background:rgba(2,16,32,.5); border:1px solid var(--line); color:var(--paper);
}
.pk-field input:focus, .pk-field textarea:focus{ outline:none; border-color:rgba(227,168,87,.6); }
.pk-field textarea{ min-height:92px; resize:vertical; }
.pk-send{
  width:100%; margin-top:6px; padding:15px; border-radius:999px; border:0; cursor:pointer;
  background:#25D366; color:#062e18; font-size:15.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
/* Paiement en ligne — PayPal ne traite pas le dirham, le bloc
   n'apparaît donc qu'en euros ou en dollars. */
.pk-pay{ display:none; margin-top:22px; }
.pk-pay-hint{ display:none; }

.pk-pay-or{
  position:relative; text-align:center; margin-bottom:18px;
  font-size:12.5px; font-weight:700; color:var(--paper-50);
  text-transform:uppercase; letter-spacing:.1em;
}
.pk-pay-or::before{
  content:""; position:absolute; inset-block-start:50%; inset-inline:0; height:1px;
  background:var(--line);
}
.pk-pay-or span{ position:relative; padding-inline:14px; background:var(--ink-card); }

.pk-paypal{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:15px; border-radius:999px;
  background:#ffc439; color:#0b1c2c;
  font-size:15.5px; font-weight:800;
  transition:transform .25s, filter .25s;
}
.pk-paypal:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.pk-paypal i{ font-size:19px; }
.pk-paypal b{ font-weight:800; }
.pk-paypal:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .pk-paypal{ transition:none; }
  .pk-paypal:hover{ transform:none; }
}

/* Le piège à robots : invisible, hors du flux de tabulation.
   display:none serait détecté par certains scripts. */
.pk-hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }

/* Fenêtre de remerciement — le visiteur part vers WhatsApp ou PayPal
   dans un onglet neuf, celle-ci reste ici pour lui dire la suite. */
.pk-modal{
  display:none; position:fixed; inset:0; z-index:2000;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(2,16,32,.9); backdrop-filter:blur(10px);
}
.pk-modal.open{ display:flex; }

.pk-modal-card{
  position:relative; width:min(520px,100%);
  padding:44px 38px 36px; border-radius:22px; text-align:center;
  background:linear-gradient(165deg, #14283a, #071726);
  border:1px solid rgba(227,168,87,.35);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.pk-modal-x{
  position:absolute; inset-block-start:16px; inset-inline-end:18px;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent;
  color:var(--paper-50); font-size:22px; line-height:1;
}
.pk-modal-x:hover{ color:var(--paper); border-color:rgba(227,168,87,.5); }

.pk-modal-star{
  width:66px; height:66px; margin:0 auto 22px;
  display:grid; place-items:center; font-size:24px; color:var(--ink-deep);
  background:linear-gradient(140deg,var(--brass),var(--brass-soft));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transform:scale(1.3);
}
.pk-modal-card h3{ font-size:23px; font-weight:800; margin-bottom:12px; color:var(--paper); }
.pk-modal-card > p{ font-size:15px; line-height:1.8; color:var(--paper-70); }

.pk-modal-next{
  margin-top:26px; padding:20px 22px; border-radius:14px; text-align:start;
  background:rgba(246,237,224,.04); border:1px solid var(--line);
}
.pk-modal-next b{ display:block; font-size:14px; margin-bottom:12px; color:var(--paper); }
.pk-modal-next ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pk-modal-next li{
  position:relative; padding-inline-start:20px;
  font-size:14px; line-height:1.6; color:var(--paper-70);
}
.pk-modal-next li::before{
  content:""; position:absolute; inset-block-start:8px; inset-inline-start:0;
  width:7px; height:7px; background:var(--brass);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.pk-modal-mail{ margin-top:20px; font-size:13px; color:#7fd4d4; }

@media(max-width:560px){
  .pk-modal-card{ padding:36px 24px 28px; }
}

.pk-note{ margin-top:13px; font-size:12.5px; color:var(--paper-50); line-height:1.7; text-align:center; }

@media(max-width:980px){
  .pk-plans{ grid-template-columns:1fr; }
  .pk-addons{ grid-template-columns:1fr 1fr; }
  .pk-recap-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .pk-addons{ grid-template-columns:1fr; }
  .pk-bar{ padding:18px 20px; }
  .pk-bar .wrap{ gap:12px; }
  .pk-bar-info{ flex:1 1 100%; }
  .pk-go{ flex:1; justify-content:center; }
  .pk-step-head span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pk-plan, .pk-go{ transition:none; }
  .pk-plan:hover, .pk-go:hover{ transform:none; }
}