/* ============================================================================
   pricing-ultimate.css — Styles PARTAGES de la section tarifs + "Offre ULTIME"
   Utilise par : configurateur.html ET index.html (section #tarifs).
   Source unique de verite du design des packs/animations -> editer ICI (ne plus
   dupliquer dans configurateur.css). Depend des variables de theme (--card-bg,
   --primary-blue, --accent-soft, --accent-glow, --container-bg, --text-color...)
   definies dans le bloc theme inline de chaque page.
   ========================================================================== */

.choice-cards {
  display: grid;
  gap: 1rem;
}
/* Packs : flex wrap centré -> 3 par ligne (19/39/59) puis 2 centrées (89/159) sur
   desktop ; 2 par ligne sur tablette ; 1 sur mobile. Responsive via flex-basis. */
.choice-cards.packs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  grid-template-columns: none;
}
.choice-cards.packs > .pack-card {
  flex: 1 1 210px;
  max-width: 460px;
}
/* Grand ecran : remonte le flex-basis pour garder 3 cards par rangee (=> 3+2
   equilibre, cards larges) au lieu de 4+1 quand le wizard s'elargit. */
@media (min-width: 1440px) {
  .choice-cards.packs > .pack-card { flex-basis: 320px; }
}

/* ============================================================================
   PACKS 2x2 + OFFRE ULTIME (PREMIUM revele au clic, animation futuriste)
   ========================================================================== */
/* Grille 2x2 : VITRINE/ESSENTIEL puis BUSINESS/SERENITE, alignes, centres. */
.choice-cards.packs.packs-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.choice-cards.packs.packs-2x2 > .pack-card { max-width: none; flex: none; }
@media (max-width: 700px) {
  .choice-cards.packs.packs-2x2 { grid-template-columns: 1fr; }
}
/* Badge ("★ Plus populaire") en absolu coin haut-droit : ne pousse plus le contenu
   vers le bas -> titres BUSINESS/SERENITE alignes sur la meme ligne. */
.pack-card > .card-tag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  margin: 0;
}

/* --- Liens d'heritage animes : a la selection d'un pack, des connecteurs
   relient (via les gouttieres) le pack choisi a tous les packs inclus. --- */
.choice-cards.packs.packs-2x2 { position: relative; }
.pack-links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; overflow: visible;
}
.pack-links path {
  fill: none; stroke: var(--primary-blue); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--accent-glow, rgba(0, 255, 255, 0.4)));
  transition: stroke-dashoffset 0.55s ease;
}
.pack-card.pack-included {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 1px var(--primary-blue), 0 0 22px -4px var(--accent-glow, rgba(0, 255, 255, 0.4));
}
.pack-card.pack-included::after {
  content: '✓ Inclus';
  position: absolute; top: 0.7rem; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; background: var(--primary-blue);
  border: 1px solid var(--primary-blue); border-radius: 999px; padding: 0.18rem 0.6rem;
  box-shadow: 0 4px 12px -3px var(--accent-glow, rgba(0, 255, 255, 0.4));
  animation: incBadge 0.4s ease;
}
@keyframes incBadge { from { opacity: 0; transform: translateX(-50%) scale(0.7); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pack-links path { transition: none; } }

/* --- Bouton intrigant qui debloque l'offre ultime --- */
.ultimate-wrap { max-width: 1140px; margin: 2.4rem auto 0; }
.ultimate-trigger {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.05rem 1.6rem;
  border: 1.5px solid var(--primary-blue);
  border-radius: 14px;
  cursor: pointer;
  background: var(--accent-soft, rgba(0, 255, 255, 0.08));
  color: var(--primary-blue);
  font-family: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 8px 26px -12px var(--accent-glow, rgba(0,255,255,.4));
}
.ultimate-trigger:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--accent-glow, rgba(0,255,255,.4)); }
.ultimate-trigger:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 3px; }
/* sweep brillant : uniquement au survol (pas d'animation en continu) */
.ultimate-trigger-aura {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.45) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ultimate-trigger:hover .ultimate-trigger-aura { transform: translateX(130%); }
.ultimate-trigger-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.9rem; }
.ultimate-trigger-icon { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 6px var(--accent-glow, rgba(0,255,255,.4))); transition: transform 0.3s ease; }
.ultimate-trigger:hover .ultimate-trigger-icon { transform: rotate(15deg) scale(1.1); }
.ultimate-trigger-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.ultimate-trigger-text strong { font-size: 1.05rem; letter-spacing: 0.3px; }
.ultimate-trigger-text em { font-style: normal; }
.ultimate-trigger-text small { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.ultimate-trigger-chevron { margin-left: auto; font-size: 1.25rem; transition: transform 0.3s ease; }
.ultimate-trigger[aria-expanded="true"] .ultimate-trigger-chevron { transform: rotate(180deg); }

/* --- Scene de revelation --- */
.ultimate-stage { margin-top: 1.4rem; scroll-margin-top: 90px; }
.ultimate-stage[hidden] { display: none; }
.ultimate-stage .premium-showcase {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  animation: ultReveal 1s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes ultReveal { to { opacity: 1; transform: none; } }

/* --- Carte showcase PREMIUM pleine largeur --- */
.premium-showcase {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  /* Fond suit le theme (blanc en clair, comme les autres cards). Les animations
     (aura/scan/glow, en bleu profond) restent visibles dessus quel que soit le theme. */
  border: 1.5px solid var(--primary-blue);
  border-radius: 18px;
  padding: 2rem 2rem 1.6rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
  box-shadow: 0 22px 60px -22px var(--accent-glow);
}
.premium-showcase .card-body { position: relative; z-index: 2; }
.premium-showcase:has(input:checked) {
  box-shadow: 0 0 0 3px var(--primary-blue), 0 22px 60px -22px var(--accent-glow, rgba(0,255,255,.4));
}
/* SHEEN : une seule passe de lumiere qui glisse en diagonale a l'apparition
   (effet "verre premium" — pas d'animation en continu). */
.ultimate-aura {
  position: absolute; z-index: 1; inset: 0; pointer-events: none;
  /* reflet BLEU (pas blanc) -> visible sur la card blanche */
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(47, 107, 255, 0.12) 44%,
    rgba(47, 107, 255, 0.42) 50%,
    rgba(47, 107, 255, 0.12) 56%,
    transparent 66%);
  transform: translateX(-130%);
  /* reflet qui balaie lentement la card periodiquement (1 passe ~2.5s, puis pause) */
  animation: ultSheen 8s ease-in-out 0.4s infinite;
}
@keyframes ultSheen {
  0% { transform: translateX(-130%); }
  32% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
/* HALO doux et STATIQUE en haut (elegance au repos, aucun mouvement). */
.ultimate-scan {
  position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 60%; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft, rgba(79, 139, 255, 0.16)), transparent 70%);
}

.ultimate-head { text-align: center; margin-bottom: 1.5rem; }
.ultimate-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;
  color: var(--primary-blue); background: var(--accent-soft, rgba(0,255,255,.1));
  border: 1px solid var(--primary-blue); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 0.6rem;
}
.premium-showcase h3 { font-size: 2rem; margin: 0.2rem 0 0; }
.ultimate-tagline { color: var(--text-muted); margin: 0.3rem 0 0.5rem; }
.ultimate-price {
  display: flex; justify-content: center; align-items: baseline; gap: 0.2rem; margin: 0.4rem 0 0;
  /* pop a l'ouverture, puis "respiration" douce du glow en continu (subtil) */
  animation: ultPriceIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both,
             ultPriceBreathe 5s ease-in-out 1.5s infinite;
}
@keyframes ultPriceIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.88); }
  100% { opacity: 1; transform: none; }
}
@keyframes ultPriceBreathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(47, 107, 255, 0.25)); }
  50% { filter: drop-shadow(0 0 18px rgba(47, 107, 255, 0.6)); }
}
/* revelation choregraphiee (one-shot, ease-out) des elements du showcase */
.ultimate-badge { animation: ultUp 0.6s ease-out 0.15s both; }
.premium-showcase h3 { animation: ultUp 0.6s ease-out 0.28s both; }
.ultimate-tagline { animation: ultUp 0.6s ease-out 0.40s both; }
.ultimate-includes { animation: ultUp 0.6s ease-out 1.25s both; }
@keyframes ultUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Showcase force en sombre -> contre l'override clair "h3 {color:#191b2e !important}". */
:root[data-theme="clair"] .premium-showcase h3 { color: var(--text-color) !important; }
.ultimate-select-hint { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.premium-showcase:has(input:checked) .ultimate-select-hint { color: var(--primary-blue); font-weight: 600; }

.ultimate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 0 0 1.2rem; }
.ultimate-feat {
  display: flex; align-items: flex-start; gap: 0.6rem; text-align: left;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 0.8rem 0.9rem;
  opacity: 0; transform: translateY(12px); animation: ultFeatIn 0.6s ease forwards;
}
@keyframes ultFeatIn { to { opacity: 1; transform: none; } }
.ultimate-feat:nth-child(1) { animation-delay: 0.60s; }
.ultimate-feat:nth-child(2) { animation-delay: 0.70s; }
.ultimate-feat:nth-child(3) { animation-delay: 0.80s; }
.ultimate-feat:nth-child(4) { animation-delay: 0.90s; }
.ultimate-feat:nth-child(5) { animation-delay: 1.00s; }
.ultimate-feat:nth-child(6) { animation-delay: 1.10s; }
.ultimate-feat:nth-child(7) { animation-delay: 1.20s; }
.ultimate-feat:nth-child(8) { animation-delay: 1.30s; }
.uf-ic { font-size: 1.3rem; line-height: 1; }
.uf-txt { display: flex; flex-direction: column; }
.uf-txt strong { font-size: 0.9rem; }
.uf-txt small { color: var(--text-muted); font-size: 0.78rem; }
.ultimate-includes { text-align: center; font-size: 0.9rem; color: var(--text-muted); }
.ultimate-includes strong { color: var(--primary-blue); }

@media (max-width: 900px) { .ultimate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ultimate-grid { grid-template-columns: 1fr; } }
.choice-card {
  position: relative;
  display: block;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.choice-card:hover {
  border-color: rgba(0,255,255,0.45);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 255, 255, 0.10);
}
.choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:has(input:checked) {
  border-color: var(--primary-blue);
  background: rgba(0,255,255,0.10);
  box-shadow: 0 0 0 2px var(--primary-blue), 0 0 24px rgba(0,255,255,0.25);
  transform: translateY(-2px);
}
.choice-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.choice-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.card-tag {
  display: inline-block;
  background: var(--primary-blue);
  color: var(--dark-bg);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
/* Badge promo "1er mois offert" — distinct du badge ★ Plus populaire (or chaud vs cyan).
   Stack vertical si les deux badges coexistent (cas SÉRÉNITÉ). */
.card-tag.promo {
  background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%);
  color: #1a1a1a;
  margin-left: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════
   PROMO "1ER MOIS OFFERT" — TEMPORAIREMENT DESACTIVEE
   Pour reactiver les badges sur Business / Serenite / Premium :
   supprime SIMPLEMENT la regle ci-dessous (ou commente-la).
   Le HTML reste intact, aucun autre changement requis.
   ═══════════════════════════════════════════════════════════════════ */
.card-tag.promo { display: none !important; }
.pack-card .card-tag + .card-tag {
  margin-left: 0.4rem;
}
/* Sous-item visuellement rattache a sa ligne parente (ex: "↳ ou votre propre
   domaine pour +5€" attache a "Adresse incluse : votre-nom.alkorastech.fr").
   Block + indent + border-left = arbre visuel : le lecteur lit "X inclus OU upgrade Y". */
.features li .feature-upgrade {
  display: block;
  margin-top: 0.45rem;
  margin-left: 0.4rem;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(0, 255, 255, 0.35);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}
.features li .feature-upgrade strong {
  color: var(--primary-blue);
  font-style: normal;
  font-weight: 600;
}
.card-pricing {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price-main {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 1rem;
}
.price-extra {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* PACK CARDS */
.pack-card .card-body { display: flex; flex-direction: column; }
/* La carte "recommandée" se distingue UNIQUEMENT par son badge "★ Plus populaire".
   Pas de border/bg cyan ici sinon visuellement on confond avec "sélectionné". */
.pack-card.recommended {
  /* discret : juste un halo très léger, sans border/bg cyan */
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.06);
}
.card-price-big {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 1rem 0;
  line-height: 1;
}
.card-price-big span {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.25rem;
}
.features {
  list-style: none;
  margin-top: 0.5rem;
}
.features li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.9rem;
  position: relative;
  padding-left: 1.5rem;
}
.features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-blue);
  font-weight: bold;
}
.features li:last-child { border-bottom: none; }
/* Ligne d'heritage de pack (ex "Tout l'ESSENTIEL", "Toute la VITRINE") :
   en gras + couleur d'accent pour montrer que le pack inclut tout le pack inferieur. */
.features li.feat-inherit {
  font-weight: 700;
  color: var(--primary-blue);
  background: var(--accent-soft, rgba(0, 255, 255, 0.08));
  border-radius: 6px;
  margin: 0 -0.4rem 0.2rem;
  padding-left: 1.9rem;
  padding-right: 0.4rem;
  border-bottom: none;
}
.features li.feat-inherit::before {
  content: '✦';
  left: 0.45rem;
}

/* ── Showcase PREMIUM : .choice-card (defini plus bas que le bloc ultimate, a
   specificite egale) ecrasait background/border/padding -> on re-affirme ici,
   en fin de fichier, avec une specificite superieure (.ultimate-stage prefixe).
   Fond = theme (blanc en clair, comme les autres cards). ── */
.ultimate-stage .premium-showcase {
  background: var(--card-bg);
  border: 1.5px solid var(--primary-blue);
  border-radius: 18px;
  padding: 2rem 2rem 1.6rem;
  box-shadow: 0 22px 60px -22px var(--accent-glow);
}
.ultimate-stage .premium-showcase:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 26px 70px -22px var(--accent-glow);
}
.ultimate-stage .premium-showcase:has(input:checked) {
  background: var(--accent-soft, rgba(0, 97, 204, 0.1));
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--primary-blue), 0 22px 60px -22px var(--accent-glow);
}

/* CTA "Choisir X" par carte (home uniquement) : epingle en bas, pleine largeur */
/* CTA "Choisir X" aligne en bas de TOUTES les cartes : la pack-card remplit la
   hauteur de rangee (grid stretch) et card-body s'etire -> margin-top:auto pousse
   le CTA en bas -> tous les boutons alignes. */
.choice-cards.packs.packs-2x2 > .pack-card { display: flex; flex-direction: column; }
.choice-cards.packs.packs-2x2 > .pack-card > .card-body { flex: 1; display: flex; flex-direction: column; }
.pack-card .csw-price-cta { margin-top: auto; align-self: stretch; text-align: center; }
.premium-showcase .csw-price-cta { margin-top: 1.2rem; align-self: center; min-width: 220px; }