/*Define CSS variables */
   #shop-root {
     /* --bg: #0b0f14; */
     --bg: #333333;
     --card: #121823;
     --muted: #94a3b8;
     --fg: #e6eefc;
     --brand: #5aa0ff;
     --brand-600: #2d6bf3;
     --ok: #10b981;
     --ring: rgba(90, 160, 255, .35);

     box-sizing: border-box;
     margin: 0;
     padding: 0;
     background: var(--bg);
     color: var(--fg);
     font: 16px/1.5 system-ui, Segoe UI, Roboto, Inter, Arial
   }

   @scope (#shop-root) {
     .wsx-container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 32px 20px 64px
     }

     h1 {
       font-size: clamp(1.6rem, 2.4vw, 2.2rem);
       margin: 0 0 8px
     }

     .lead {
       color: var(--muted);
       margin: 0 0 24px
     }

     .controls {
       display: flex;
       gap: 12px;
       align-items: center;
       flex-wrap: wrap;
       margin: 20px 0 28px
     }

     .period-toggle {
       display: inline-grid;
       grid-auto-flow: column;
       border: 1px solid #203048;
       border-radius: 9px;
       overflow: hidden
     }

     .period-toggle button {
       appearance: none;
       background: transparent;
       color: var(--fg);
       border: 0;
       padding: 10px 14px;
       cursor: pointer
     }

     .period-toggle button[aria-pressed="true"] {
       background: var(--brand);
       color: #041225
     }

     .select {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: var(--muted);
       font-size: .95rem
     }

     select,
     #currency {
       background: #0e1420;
       color: var(--fg);
       border: 1px solid #203048;
       border-radius: 8px;
       padding: 8px 10px
     }

     select:focus {
       border-color: var(--brand);
       box-shadow: 0 0 0 3px var(--ring)
     }

     .grid {
       display: grid;
       gap: 18px;
       grid-template-columns: repeat(1, minmax(0, 1fr))
     }

     @media(min-width:760px) {
       .grid {
         grid-template-columns: repeat(2, minmax(0, 1fr))
           /* number of columns */
       }
     }

     .card {
       background: linear-gradient(180deg, #101725 0%, #0f1521 100%);
       border: 1px solid #223048;
       border-radius: 14px;
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 22px;
       min-height: 100%;
       /* own text colour: the site template may colour .card (Bootstrap) */
       color: var(--fg)
     }

     /* headings keep the shop colour, not the template's heading colour */
     h1,
     h2,
     h3 {
       color: var(--fg)
     }

     /* ...except in the dialogs, light on a white background: their own text colour */
     dialog h1,
     dialog h2,
     dialog h3 {
       color: inherit
     }

     .card.is-featured {
       border-color: #3757ff;
       box-shadow: 0 6px 30px rgba(45, 107, 243, .25)
     }

     .badge {
       position: absolute;
       top: 12px;
       right: 12px;
       background: #1a2aff;
       border: 1px solid #6e8aff;
       color: #fff;
       font-size: .75rem;
       padding: 4px 8px;
       border-radius: 999px
     }

     .card h3 {
       margin: 0 0 8px;
       font-size: 1.2rem
     }

     .desc {
       color: var(--muted);
       font-size: .95rem;
       margin: 0 0 14px
     }

     .price {
       display: flex;
       align-items: baseline;
       gap: 8px;
       margin: 8px 0 10px
     }

     .amount {
       font-weight: 700;
       font-size: 1.8rem;
       letter-spacing: .2px
     }

     .amount.yearly {
       font-weight: 100;
       font-size: 1.8rem;
       letter-spacing: .2px
     }

     .period {
       color: var(--muted)
     }

     .vat-note {
       color: var(--muted);
       font-size: .8rem;
       margin: 2px 0 12px
     }

     .features {
       list-style: none;
       padding: 0;
       margin: 12px 0 16px;
       color: #c6d3ea
     }

     .features li {
       display: flex;
       gap: 8px;
       margin: 6px 0
     }

     .features li::before {
       content: "✓";
       color: green;
       /*var(--ok)*/
     }

     /* Surcharge pour les classes */
     .features li.ok2::before {
       content: "✔";
       color: green;
     }

     .features li.ok3::before {
       content: "✅";
       color: green;
     }

     .features li.inf::before {
       content: "♾";
       color: greenyellow;
       /* background-color: green; */
     }


     .cta {
       margin-top: auto;
       background: var(--brand-600);
       color: white;
       border: 0;
       border-radius: 10px;
       padding: 12px 14px;
       font-weight: 600;
       cursor: pointer
     }

     .cta:hover {
       filter: brightness(1.06)
     }

     .footnote {
       margin-top: 24px;
       color: var(--muted);
       font-size: .9rem
     }

     .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0
     }

     .cta[disabled] {
       opacity: .6;
       cursor: not-allowed
     }


     /* Liens dans le texte descriptif */
     a {
       color: #4da3ff;
       /* bleu clair contrasté */
       text-decoration: underline;
       /* pour indiquer clairement que c'est cliquable */
     }

     a:hover,
     a:focus {
       color: #82c7ff;
       /* nuance plus claire au survol */
       text-decoration: none;
       /* optionnel : enlève le soulignement au hover */
     }

     /* ===========================
   Encart horizontal basé sur .card (layout uniquement)
   =========================== */

     /* Encarts placés sous la grille */
     .card.card--inline {
       margin-top: 24px;
       /* même valeur que gap de la grille */
     }


     /* 1) Disposition horizontale : icône + contenu */
     .card.card--inline>.card__inner {
       display: grid;
       grid-template-columns: 56px 1fr;
       /* icône à gauche, contenu à droite */
       align-items: start;
       gap: 14px;
     }

     /* 2) Icône : seulement les dimensions (pas de couleurs/typo modifiées) */
     .card.card--inline .card__icon {
       display: grid;
       place-items: center;
       width: 56px;
       height: 56px;
     }

     /* 3) Titre : léger ajustement d'espacement (style visuel inchangé) */
     .card.card--inline .card__title {
       margin: 0 0 4px;
     }

     /* 4) Paragraphe "même aspect que les features"
   On reprend exactement ce qui est défini sur .features :
   - color: #c6d3ea
   - marges verticales: 12px 0 16px
*/
     .card.card--inline .feature-text {
       color: #c6d3ea;
       margin: 12px 0 16px;
     }

     /* 5) Actions : flex compact */
     .card.card--inline .card__actions {
       margin-top: 10px;
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
     }

     /* 6) Bouton .cta compact (identique visuellement à .cta, sans pleine largeur)
   - On annule margin-top:auto (prévu pour pousser en bas dans les cards de prix).
   - On force l'affichage inline et une largeur au contenu.
*/
     .card.card--inline .card__actions .cta {
       margin-top: 0;
       /* annule le auto des plans */
       display: inline-flex;
       /* compact, pas full-width */
       width: auto;
       /* largeur calée sur le texte */
       max-width: 100%;
       /* sécurité sur petites largeurs */
       align-items: center;
       justify-content: center;
       text-decoration: none;
       /* utile si .cta est un <a> */
       max-height: min-content;
     }

     .cta--compact {
       padding: 6px 7px;

     }

     /* 7) Responsive : icône au-dessus du contenu sur mobile */
     @media (max-width: 640px) {
       .card.card--inline>.card__inner {
         grid-template-columns: 1fr;
       }

       .card.card--inline .card__icon {
         width: 48px;
         height: 48px;
       }
     }


     /* Améliorer la présentation du dialog (polyfill inclus) */
     dialog#termsDialog {
       width: min(900px, 92vw);
       border: none;
       padding: 0;
     }

     dialog#termsDialog::backdrop {
       background: rgba(0, 0, 0, 0.35);
     }

     #termsForm {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       padding: 1rem 1rem 0.5rem;
     }

     .terms-pane {
       /* Espace disponible avec hauteur raisonnable: */
       max-height: min(70vh, 650px);
       min-height: 300px;
       border: 1px solid #ddd;
       border-radius: 6px;
       overflow: auto;
       /* scroll interne */
       background: #fff;
     }

     .terms-pane iframe {
       display: block;
       width: 100%;
       min-height: 300px;
       border: 0;
     }

     .terms-external-link {
       margin: 0.25rem 0 0.5rem;
       font-size: 0.9rem;
     }

.info-external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  margin: 0.35rem 0 0.65rem;
  padding: 0.5rem 0.75rem;

  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;

  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 18%, #0b1220) 0%,
    color-mix(in oklab, var(--brand-600) 22%, #0b1220) 100%
  );
  border: 1px solid color-mix(in oklab, var(--brand) 55%, #1b2a44);
  border-radius: 999px;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 22px rgba(45, 107, 243, .22);

  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease;
}

.info-external-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 30%, #0b1220) 0%,
    color-mix(in oklab, var(--brand-600) 35%, #0b1220) 100%
  );
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 28px rgba(45, 107, 243, .30);
  text-decoration: none;
}

.info-external-link:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 4px 16px rgba(45, 107, 243, .20);
}

/* Icône automatique */
.info-external-link::after {
  content: "↗";
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Focus accessible & cohérent avec ton thème */
.info-external-link:focus,
.info-external-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--ring),
    0 10px 28px rgba(45, 107, 243, .30);
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .info-external-link {
    transition: none;
  }
  .info-external-link:hover {
    transform: none;
  }
}
     

     .accept-row {
       display: flex;
       gap: 0.5rem;
       align-items: flex-start;
       margin-top: 0.25rem;
     }

     .dialog-actions {
       display: flex;
       gap: 0.5rem;
       justify-content: flex-end;
       padding: 0.5rem 0 0.75rem;
     }

     /* code promo */
     .card.card--inline.promo-strong {
       border-left: 6px solid var(--brand);
       padding-top: 26px;
       padding-bottom: 26px;
       box-shadow:
         0 6px 30px rgba(45, 107, 243, .35),
         /* renforce le glow existant */
         inset 0 0 0 1px rgba(110, 138, 255, .25);
       /* fin liseré interne */
     }

     /* Code promo*/
     .card.card--inline.promo-strong .card__icon {
       font-size: 32px;
     }

     .card.card--inline.promo-strong .card__title {
       margin: 4px 0 6px;
       font-size: clamp(1.25rem, 2.2vw, 1.6rem);
       line-height: 1.25;
     }

     .card.card--inline.promo-strong .feature-text {
       font-size: clamp(1.05rem, 1.8vw, 1.2rem);
       color: var(--fg);
     }

     /* Style pour mettre fortement en valeur le pourcentage dans le texte */
     .discount-highlight {
       display: inline-block;
       padding: 2px 8px;
       margin: 0 4px;
       border-radius: 6px;
       font-weight: 800;
       color: #1b1300;
       /* Contraste sur or */
       background: linear-gradient(135deg, #f7d774 0%, #d7a528 50%, #ac7f1a 100%);
       border: 1px solid rgba(255, 255, 255, .35);
       box-shadow:
         0 2px 8px rgba(0, 0, 0, .25),
         inset 0 1px 1px rgba(255, 255, 255, .5);
       /* transform: rotate(-1deg); */
       /* léger effet étiquette */
     }

   }


   /* Scope pour les dialogues Wisext */
   .wisext-dialogs .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     justify-content: center;
     align-items: center;
     font-family: 'Open Sans', sans-serif;
   }

   .wisext-dialogs .modal-content {
     background: #fff;
     border-radius: 8px;
     max-width: 500px;
     width: 90%;
     padding: 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     animation: fadeIn 0.3s ease-in-out;
   }

   .wisext-dialogs .modal-header {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 1.2rem;
     font-weight: bold;
     color: #004080;
     margin-bottom: 15px;
   }

   .wisext-dialogs .modal-header i {
     font-size: 1.5rem;
     color: #0078d7;
   }

   .wisext-dialogs .modal-body {
     font-size: 0.95rem;
     color: #333;
     margin-bottom: 20px;
     line-height: 1.5;
   }

   .wisext-dialogs .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
   }

   .wisext-dialogs .btn-primary {
     background: #0078d7;
     color: #fff;
     border: none;
     padding: 10px 16px;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
   }

   .wisext-dialogs .btn-primary:hover {
     background: #005fa3;
   }

   .wisext-dialogs .btn-secondary {
     background: #f0f0f0;
     color: #333;
     border: none;
     padding: 10px 16px;
     border-radius: 4px;
     cursor: pointer;
   }

   .wisext-dialogs .btn-secondary:hover {
     background: #e0e0e0;
   }

   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(-10px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }


   /* =================================================================== */
/*  Dialog – style global, sobre et cohérent avec le shop              */
/*  - Fond détaché du shop (card-like)                                 */
/*  - Centrage automatique                                             */
/*  - Boutons réutilisant .btn / .btn--primary du shop si présents     */
/* =================================================================== */

:root {
  /* Ajuste ces variables pour matcher ton thème */
  --dlg-surface: #ffffff;            /* fond du dialog */
  --dlg-on-surface: #1f2328;         /* texte */
  --dlg-surface-variant: #f5f6f8;    /* header/footer soft */
  --dlg-divider: #e5e7eb;            /* bordures douces */
  --dlg-radius: 12px;                /* arrondi */
  --dlg-shadow: 0 20px 50px rgba(0,0,0,.18);
  --dlg-pad: 20px;                   /* padding body */
  --dlg-gap: 12px;                   /* espacement boutons */

  /* Backdrop */
  --dlg-scrim: rgba(9, 11, 18, .45); /* overlay sombre */
  --dlg-blur: 2px;

  /* Fallback boutons si le shop n’a pas .btn */
  --btn-bg: #ffffff;
  --btn-fg: #111827;
  --btn-bd: #d1d5db;
  --btn-radius: 10px;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;

  /* Fallback bouton primaire si besoin */
  --btnp-bg: #2563eb;
  --btnp-fg: #ffffff;
}