/* ══════════════════════════════════════════════════════════════════════
   PARAD — LE CALQUE · feuille de style du widget
   v1.0 · 14/09/2026 · PARAD Ultimate SARL, Alger
   ----------------------------------------------------------------------
   TOUTES les classes sont préfixées `pd-`, et toutes les variables
   `--pd-`. C'est la règle : ce fichier se charge SUR le site d'un
   partenaire, dont on ne connaît pas le CSS. Un nom générique comme
   `.bouton` ou `.champ` entrerait en collision le jour où un partenaire
   en a un — et le bogue serait invisible chez nous.
   ══════════════════════════════════════════════════════════════════════ */

.pd-racine{
  --pd-bleu:#38B6FF;  --pd-rose:#FF66C4;  --pd-jaune:#FFDE59;
  --pd-creme:#F5F5F0; --pd-encre:#0A0A0A; --pd-gris:#6A6A64; --pd-trait:#DCDCD4;
  --pd-vert:#0B7A3E;
  --pd-r:26px;
  font:400 16px/1.55 Rubik,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--pd-encre);
}
.pd-racine *,.pd-racine *::before,.pd-racine *::after{ box-sizing:border-box; }
.pd-racine [hidden]{ display:none !important; }
.pd-racine button:focus-visible,.pd-racine input:focus-visible,
.pd-racine summary:focus-visible{ outline:2px solid var(--pd-bleu); outline-offset:2px; }

/* ── L'APPEL ─────────────────────────────────────────────────────────
   Le bouton n'imite pas la fenêtre : il EST la fenêtre, repliée.
   Même crème, même liseré, même halo, mêmes trois points.            */
.pd-appel{
  display:flex; align-items:center; gap:13px; cursor:pointer; text-align:left;
  background:rgba(245,245,240,.96); border:1px solid rgba(10,10,10,.10);
  border-radius:16px; padding:13px 15px; width:100%;
  box-shadow:0 0 0 7px rgba(245,245,240,.30), 0 10px 26px -12px rgba(0,16,48,.38);
  transition:transform .18s ease, box-shadow .25s ease, opacity .12s ease;
  font:inherit; color:var(--pd-encre);
}
.pd-appel:hover{ transform:translateY(-1px);
  box-shadow:0 0 0 9px rgba(245,245,240,.36), 0 14px 32px -12px rgba(0,16,48,.44); }
.pd-appel .pd-marque{ flex:0 0 auto; }
.pd-appel .pd-glyphe{ height:15px; }
.pd-appel .pd-mot{ font-size:14.5px; }
.pd-appel .pd-pt{ width:7px; height:7px; }
.pd-appel .pd-offre{ display:flex; flex-direction:column; gap:1px; min-width:0;
                     margin-left:auto; text-align:right; }
.pd-appel .pd-offre b{ font:700 17px/1.1 Rubik,sans-serif; letter-spacing:-.015em; }
.pd-appel .pd-offre span{ font-size:11.5px; color:var(--pd-gris); }
.pd-appel .pd-fleche{ flex:0 0 auto; font-size:15px; color:var(--pd-gris); margin-left:2px; }

/* variante compacte — à poser à côté du bouton principal du partenaire,
   dont elle prend la largeur. La hauteur suit le contenu.            */
.pd-appel.pd-compact{ flex-direction:column; align-items:flex-start; gap:6px;
  width:auto; min-width:158px; max-width:196px; padding:11px 14px 12px; }
.pd-appel.pd-compact .pd-marque{ gap:7px; }
.pd-appel.pd-compact .pd-glyphe{ height:13px; }
.pd-appel.pd-compact .pd-mot{ font-size:13px; }
.pd-appel.pd-compact .pd-pt{ width:6px; height:6px; }
.pd-appel.pd-compact .pd-offre{ margin-left:0; text-align:left; gap:2px; }
.pd-appel.pd-compact .pd-offre b{ font-size:21px; line-height:1; letter-spacing:-.02em; }
.pd-appel.pd-compact .pd-offre span{ font-size:10.5px; line-height:1.35; }
.pd-appel.pd-compact .pd-fleche{ display:none; }

.pd-marque{ display:flex; align-items:center; gap:9px; }
.pd-glyphe{ height:17px; width:auto; display:block; }
.pd-mot{ font-weight:500; font-size:16.5px; letter-spacing:.07em; }
.pd-points{ display:flex; gap:5px; align-items:center; }
.pd-pt{ width:9px; height:9px; border-radius:50%; background:#D6D6CE; display:block;
        transition:background .4s ease, transform .4s cubic-bezier(.2,1.6,.4,1); }
.pd-pt.pd-on{ transform:scale(1.18); }
.pd-pt.pd-on[data-i="1"]{ background:var(--pd-bleu); }
.pd-pt.pd-on[data-i="2"]{ background:var(--pd-rose); }
.pd-pt.pd-on[data-i="3"]{ background:var(--pd-jaune); }
.pd-appel .pd-pt[data-i="1"]{ background:var(--pd-bleu); }
.pd-appel .pd-pt[data-i="2"]{ background:var(--pd-rose); }
.pd-appel .pd-pt[data-i="3"]{ background:var(--pd-jaune); }

/* ── LE VOILE ET LE FANTÔME ─────────────────────────────────────────
   Le voile assombrit à peine : le site du partenaire reste lisible.
   Le fantôme est une carte VIDE qui fait le trajet du bouton vers la
   fenêtre — on ne déforme jamais du texte.                           */
.pd-voile{ position:fixed; inset:0; z-index:2147483000;
  background:rgba(0,20,60,.30); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:22px;
  transition:opacity .38s ease, visibility .38s; }
.pd-voile[data-etat="ferme"],.pd-voile[data-etat="morph"]{ opacity:0; visibility:hidden; }

.pd-fantome{ position:fixed; z-index:2147483001; background:rgba(245,245,240,.92);
  border:1px solid rgba(255,255,255,.75); pointer-events:none; opacity:0;
  box-shadow:0 0 0 12px rgba(245,245,240,.26), 0 26px 60px -24px rgba(0,16,48,.55); }

/* ── LA FENÊTRE ─────────────────────────────────────────────────────
   Taille FIXE, 392 × 510. Calée sur l'écran le plus chargé en
   affichage téléphone. Aucun défilement, à aucune étape, jamais.     */
.pd-calque{
  position:relative; width:100%; max-width:392px; height:510px;
  background:rgba(245,245,240,.90);
  backdrop-filter:blur(22px) saturate(1.15); -webkit-backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid rgba(255,255,255,.72); border-radius:var(--pd-r);
  box-shadow:0 0 0 14px rgba(245,245,240,.26), 0 0 0 15px rgba(255,255,255,.14),
             0 30px 72px -26px rgba(0,16,48,.60), 0 2px 6px rgba(0,16,48,.16);
  padding:18px 18px 12px; display:flex; flex-direction:column; gap:12px;
  overflow:hidden; transition:opacity .2s ease;
}
.pd-voile[data-etat="ferme"] .pd-calque,
.pd-voile[data-etat="morph"] .pd-calque{ opacity:0; }

.pd-tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto; }
.pd-fermer{ border:0; background:transparent; color:var(--pd-gris); cursor:pointer;
  font-size:20px; line-height:1; padding:4px 6px; border-radius:8px; }
.pd-fermer:hover{ color:var(--pd-encre); background:rgba(10,10,10,.05); }

.pd-accroche{ font-size:13px; color:var(--pd-gris); margin:0; flex:0 0 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-accroche b{ color:var(--pd-encre); font-weight:500; }

/* le rail : trois pastilles, une seule étape ouverte */
.pd-rail{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.pd-rail button{ width:28px; height:28px; border-radius:50%; border:0; flex:0 0 auto;
  font:600 12.5px/1 Rubik,sans-serif; color:var(--pd-encre); background:#E3E3DB;
  display:flex; align-items:center; justify-content:center; cursor:default;
  transition:background .35s ease, box-shadow .2s ease; }
.pd-rail button[data-i="1"][data-etat="fait"],.pd-rail button[data-i="1"][data-etat="actif"]{ background:var(--pd-bleu); }
.pd-rail button[data-i="2"][data-etat="fait"],.pd-rail button[data-i="2"][data-etat="actif"]{ background:var(--pd-rose); }
.pd-rail button[data-i="3"][data-etat="fait"],.pd-rail button[data-i="3"][data-etat="actif"]{ background:var(--pd-jaune); }
.pd-rail button[data-retour="1"]{ cursor:pointer; }
.pd-rail button[data-retour="1"]:hover{ box-shadow:0 0 0 3px rgba(10,10,10,.09); }
.pd-fil{ height:2px; flex:1; background:#E3E3DB; border-radius:2px; }
.pd-compteur{ margin-left:auto; font-size:11.5px; color:var(--pd-gris); white-space:nowrap; }

.pd-titre{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.012em; flex:0 0 auto; }

.pd-zone{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.pd-pan{ display:none; flex-direction:column; gap:10px; animation:pd-entrer .32s ease both; }
.pd-pan.pd-on{ display:flex; }
@keyframes pd-entrer{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .pd-racine *,.pd-voile *,.pd-fantome{ animation:none !important; transition-duration:.01ms !important; }
}

.pd-champ{ display:flex; flex-direction:column; gap:5px; }
.pd-champ label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pd-gris); font-weight:500; white-space:nowrap; }
.pd-champ input{ height:50px; border:1px solid var(--pd-trait); border-radius:12px;
  background:#fff; padding:0 14px; width:100%; color:var(--pd-encre);
  font:500 18px/1 'Roboto Mono',ui-monospace,SFMono-Regular,monospace; letter-spacing:.06em; }
.pd-champ input::placeholder{ color:#B6B6AC; font-weight:400; letter-spacing:.04em; }
.pd-champ input:focus{ border-color:var(--pd-bleu); box-shadow:0 0 0 3px rgba(56,182,255,.22); }
.pd-champ.pd-texte input{ font:400 16px/1 Rubik,sans-serif; letter-spacing:0; height:46px; }
.pd-aide{ font-size:11.5px; color:var(--pd-gris); margin:0; line-height:1.5; }
.pd-aide b{ color:var(--pd-encre); font-weight:600; }

.pd-plie{ font-size:11.5px; color:var(--pd-gris); }
.pd-plie summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  gap:5px; color:var(--pd-gris); font-weight:500; }
.pd-plie summary::-webkit-details-marker{ display:none; }
.pd-plie summary::after{ content:"⌄"; font-size:12px; transition:transform .2s ease; }
.pd-plie[open] summary::after{ transform:rotate(180deg); }
.pd-plie p{ margin:6px 0 0; line-height:1.45; }

.pd-bouton{ border:0; border-radius:14px; width:100%; min-height:52px; cursor:pointer;
  font:600 15.5px/1.2 Rubik,sans-serif; color:var(--pd-encre);
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:filter .2s ease, transform .12s ease; }
.pd-bouton:hover{ filter:brightness(.95); }
.pd-bouton:active{ transform:translateY(1px); }
.pd-bouton:disabled{ opacity:.45; cursor:default; filter:none; transform:none; }
.pd-b2{ background:var(--pd-rose); } .pd-b3{ background:var(--pd-jaune); }
.pd-sobre{ background:transparent; border:1px solid var(--pd-trait); min-height:46px; font-weight:500; }

.pd-capsule{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9;
  max-height:200px; background:linear-gradient(145deg,#12233A,#07111C);
  display:flex; align-items:center; justify-content:center; max-width:100%; margin:0; }
.pd-capsule iframe,.pd-capsule video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* v1.4 — LA PLACE DE LA CAPSULE. Le contenu du partenaire vit ICI, sous le
   bouclier : il se voit, il ne se clique pas, il ne se met pas en pause, et on
   ne part pas sur une plateforme tierce depuis lui. Tant qu'aucun vrai lecteur
   n'est branché, l'action part avec creative='sim' et le relevé l'exclut —
   un cadre qui montre quelque chose n'est pas pour autant une capsule diffusée. */
.pd-contenu{ position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  text-align:center; padding:16px 18px; color:#fff; }
/* le bouclier : la surface interposée qui intercepte tout pointage.
   Sans lui, l'attention peut fuir vers la plateforme tierce.        */
.pd-bouclier{ position:absolute; inset:0; z-index:2; background:transparent; }
.pd-capsule figcaption{ position:absolute; left:12px; bottom:9px; z-index:3;
  color:rgba(255,255,255,.72); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.pd-anneau{ width:66px; height:66px; position:relative; z-index:3; }
/* v1.4 — quand une capsule est affichée, l'anneau se pose SUR un message. Sans
   ce léger fond, les deux se disputent le même endroit et aucun des deux ne se
   lit. Le message reste visible : c'est lui qu'on est venu regarder. */
.pd-capsule.pd-avec-contenu .pd-anneau{ background:rgba(4,12,22,.58); border-radius:50%; }
.pd-anneau circle{ fill:none; stroke-width:5; }
.pd-piste{ stroke:rgba(255,255,255,.16); }
.pd-arc{ stroke:var(--pd-rose); stroke-linecap:round; transform:rotate(-90deg);
  transform-origin:50% 50%; transition:stroke-dashoffset .95s linear; }
.pd-compte{ position:absolute; z-index:3; color:#fff; font-variant-numeric:tabular-nums;
  font:600 17px/1 'Roboto Mono',ui-monospace,monospace; }

.pd-code-boite{ background:#fff; border:1px dashed var(--pd-trait); border-radius:14px;
  padding:11px 14px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; }
.pd-code-boite > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pd-code{ font:700 21px/1 'Roboto Mono',ui-monospace,monospace; letter-spacing:.04em;
  white-space:nowrap; }
.pd-code-boite small{ font-size:11px; color:var(--pd-gris); }
.pd-remise{ font-weight:600; color:var(--pd-encre); background:#EFEFE8; border-radius:999px;
  padding:5px 11px; font-size:13px; white-space:nowrap; flex:0 0 auto; }
.pd-remise.pd-double{ background:var(--pd-jaune); }
.pd-remise s{ color:var(--pd-gris); font-weight:400; margin-right:5px; }

.pd-attente{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px;
  color:var(--pd-gris); line-height:1.45; margin:0; }
.pd-puce{ width:7px; height:7px; border-radius:50%; background:var(--pd-jaune);
  flex:0 0 auto; margin-top:5px; animation:pd-pulse 1.8s ease-in-out infinite; }
@keyframes pd-pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.pd-attente b{ color:var(--pd-encre); font-weight:500; }

.pd-signature{ margin:0; padding-top:9px; border-top:1px solid var(--pd-trait); flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--pd-gris); }
.pd-pbp{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pd-pbp img{ height:11px; width:auto; opacity:.62; }
.pd-signature a{ color:var(--pd-gris); }