/* =====================================================================
   SAINT-CYPRIEN · tarifs.css — les offres, en clair.
   Réutilise .essai / .tarif / .faq / .reviews (base + home). Ajoute le bloc
   PROMOS (Duo prioritaire = la carte allumée) et la liste des conditions.
   ===================================================================== */

.tarifs-sec { padding-block: clamp(3rem,7vw,5.5rem); }

/* --------------------------- LES OFFRES --------------------------- */
.promos { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 760px){ .promos { grid-template-columns: 1.08fr 1fr; } }
.promo { position: relative; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: clamp(1.7rem,3vw,2.3rem); background: var(--paper-2); display: flex; flex-direction: column; gap: .9rem; transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.promo:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
/* le Duo = prioritaire = la carte allumée */
.promo--duo { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--spark-rgb),.10), transparent 55%), var(--paper-2); border-color: rgba(var(--spark-rgb),.28); box-shadow: var(--glow), var(--shadow); }
/* ---- LA CARTE PRIORITAIRE ----
   Elle ne crie pas plus fort : elle change de registre. Sur une page
   claire, elle bascule en BLEU PLEIN — une seule carte colorée au milieu
   des blanches. La hiérarchie se lit avant d'avoir lu un mot, et sans
   rien ajouter à l'écran. Les jetons sont rebasculés A L'INTERIEUR de la
   carte : .btn, .promo__flag et le prix se re-skinnent seuls. */
.promo--duo {
  --paper-2:  var(--blue-700);
  --white:    var(--blue-700);
  --ink:      #f2f0f5;   /* 8,3:1 sur le bleu */
  --ink-soft: #d5d2d8;   /* 6,3:1 */
  --muted:    #c3d5e8;   /* 6,3:1 */
  --spark:    #f7f5f9;   /* sur le bleu, l'accent redevient la lumière */
  --spark-2:  #c3d5e8;
  --on-spark: #1b4877;
  --ink-rgb:     242, 240, 245;
  --spark-rgb:   247, 245, 249;
  --spark-2-rgb: 195, 213, 232;
  --line:     rgba(var(--spark-rgb),.24);
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--ink);
  box-shadow: 0 26px 64px -28px rgba(var(--blue-rgb),.45);
}
.promo--duo:hover { border-color: var(--blue-700); box-shadow: 0 34px 74px -30px rgba(var(--blue-rgb),.55); }

.promo__flag { position: absolute; top: -.72em; left: 1.4rem; background: var(--spark); color: var(--on-spark); font: 600 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: .55em .9em; border-radius: 100px; }
.promo__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); }
.promo__price { display: flex; align-items: baseline; gap: .7ch; flex-wrap: wrap; }
.promo__price b { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem,5vw,3.4rem); letter-spacing: -.02em; color: var(--ink); }
.promo__price small { font: 600 var(--step--1)/1 var(--f-mono); letter-spacing: .04em; color: var(--spark-2); text-transform: uppercase; }
.promo__price s { font-family: var(--f-mono); font-size: var(--step--1); color: var(--muted); }
.promo__detail { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.promo .btn { margin-top: auto; align-self: flex-start; }

/* ----------------------- CONDITIONS EN CLAIR ---------------------- */
.cond { display: grid; gap: .7rem; max-width: 72ch; }
.cond li { display: flex; gap: .9ch; align-items: flex-start; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.cond li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; margin-top: .55em; background: var(--spark); }
.cond strong { color: var(--spark); font-weight: 650; }