/* ===========================================================
   CyNoLux — Système de modales
   Une seule fenêtre à l'écran à la fois, ouverte au centre sur
   grand écran et en feuille basse sur mobile (le pouce atteint
   les actions). Le balisage est injecté par assets/js/modals.js.
   =========================================================== */

/* -----------------------------------------------------------
   1. Voile
   ----------------------------------------------------------- */
.cnx-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 25, 56, 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  /* Pas de `visibility` ici : une fenêtre encore masquée refuse le focus,
     et le premier champ ne pourrait pas être atteint au clavier.
     L'inertie est obtenue par pointer-events, et le nœud est retiré du
     DOM à la fermeture. */
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.cnx-modal.is-open { opacity: 1; pointer-events: auto; }
@media (max-width: 640px) {
  .cnx-modal { padding: 0; align-items: end; }
}

/* -----------------------------------------------------------
   2. Fenêtre
   ----------------------------------------------------------- */
.cnx-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 40px 100px -30px rgba(7, 25, 56, 0.6);
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s var(--ease), opacity 0.34s var(--ease);
}
.cnx-modal.is-open .cnx-dialog { transform: none; opacity: 1; }
.cnx-dialog--sm { width: min(420px, 100%); }
.cnx-dialog--lg { width: min(740px, 100%); }
.cnx-dialog--xl { width: min(1000px, 100%); }
[data-theme="dark"] .cnx-dialog {
  background: #0a1730;
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 640px) {
  .cnx-dialog,
  .cnx-dialog--sm,
  .cnx-dialog--lg,
  .cnx-dialog--xl {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }
  .cnx-dialog::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(11, 42, 107, 0.18);
    z-index: 3;
  }
  [data-theme="dark"] .cnx-dialog::before { background: rgba(255, 255, 255, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .cnx-modal,
  .cnx-dialog { transition: opacity 0.01ms; transform: none !important; }
}

/* -----------------------------------------------------------
   3. Bandeau visuel (modales produit)
   ----------------------------------------------------------- */
.cnx-visual {
  position: relative;
  padding: 26px 28px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff;
  overflow: hidden;
}
.cnx-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 8%, rgba(253, 185, 19, 0.38), transparent 58%);
  pointer-events: none;
}
.cnx-visual-mark {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 1.4rem;
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 16px;
}
.cnx-visual .cnx-eyebrow { color: var(--gold-300); }
.cnx-visual h2 { position: relative; color: #fff; font-size: clamp(1.3rem, 3vw, 1.65rem); }
.cnx-visual p { position: relative; margin-top: 10px; font-size: 0.93rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.cnx-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

/* -----------------------------------------------------------
   4. En-tête, corps, pied
   ----------------------------------------------------------- */
.cnx-head {
  padding: 26px 28px 0;
  flex: 0 0 auto;
}
.cnx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 12px;
}
.cnx-eyebrow::before {
  content: "";
  width: 16px;
  height: 1.5px;
  background: var(--gold-500);
}
.cnx-head h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
.cnx-head > p { margin-top: 10px; font-size: 0.93rem; line-height: 1.6; }

.cnx-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(11, 42, 107, 0.1);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.cnx-close:hover { background: #fff; color: var(--navy-700); }
.cnx-visual + .cnx-close,
.cnx-dialog > .cnx-visual ~ .cnx-close { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); }
.cnx-dialog > .cnx-visual ~ .cnx-close:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
[data-theme="dark"] .cnx-close { background: rgba(255, 255, 255, 0.1); color: #dbe5f8; border-color: rgba(255, 255, 255, 0.16); }

.cnx-body {
  padding: 22px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.cnx-body > p { font-size: 0.93rem; line-height: 1.65; }
.cnx-body .field { margin-bottom: 16px; }
.cnx-body .field textarea { min-height: 104px; }
.cnx-body .field select {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(11, 42, 107, 0.14);
  background: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .cnx-body .field select { background: rgba(255, 255, 255, 0.06); color: #eaf0ff; border-color: rgba(255, 255, 255, 0.16); }

.cnx-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-top: 1px solid rgba(11, 42, 107, 0.08);
  background: rgba(245, 248, 254, 0.6);
}
[data-theme="dark"] .cnx-foot { border-top-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.cnx-foot .btn { flex: 1 1 180px; }
.cnx-foot .btn-sm { padding: 12px 22px; }
.cnx-foot-note {
  flex: 1 1 100%;
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .cnx-head,
  .cnx-body,
  .cnx-foot,
  .cnx-visual { padding-inline: 20px; }
  .cnx-head { padding-top: 30px; }
  .cnx-visual { padding-top: 30px; }
  .cnx-foot .btn { flex: 1 1 100%; }
}

/* -----------------------------------------------------------
   5. Contenus courants
   ----------------------------------------------------------- */
.cnx-bullets { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.cnx-bullets li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}
.cnx-bullets i { color: var(--gold-600); font-size: 0.95rem; margin-top: 3px; flex: 0 0 auto; }

.cnx-quick { display: grid; gap: 10px; margin-top: 18px; }
.cnx-quick a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(11, 42, 107, 0.1);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cnx-quick a:hover { border-color: rgba(253, 185, 19, 0.6); background: #fff; }
[data-theme="dark"] .cnx-quick a { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .cnx-quick a:hover { background: rgba(255, 255, 255, 0.1); }
.cnx-quick i:first-child { color: var(--gold-600); font-size: 1.1rem; }
.cnx-quick small { display: block; font-weight: 500; font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
.cnx-quick i:last-child { margin-inline-start: auto; font-size: 0.8rem; color: var(--ink-faint); }

/* Tarifs */
.cnx-plans { display: grid; gap: 12px; }
.cnx-plan {
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(11, 42, 107, 0.1);
  background: rgba(255, 255, 255, 0.62);
}
[data-theme="dark"] .cnx-plan { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.cnx-plan.is-featured { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500) inset; }
.cnx-plan-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cnx-plan-top b { font-family: var(--f-display); font-size: 1rem; color: var(--ink); }
.cnx-plan-price {
  margin-inline-start: auto;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .cnx-plan-price { color: var(--gold-300); }
.cnx-plan-tag {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--gold-500);
  color: var(--navy-900);
}
.cnx-plan p { margin-top: 8px; font-size: 0.84rem; line-height: 1.55; color: var(--ink-muted); }
.cnx-plan ul { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cnx-plan li {
  font-size: 0.76rem;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(11, 42, 107, 0.06);
  color: var(--ink-muted);
}
[data-theme="dark"] .cnx-plan li { background: rgba(255, 255, 255, 0.07); }

/* Progression du formulaire pas à pas */
.cnx-progress { display: flex; gap: 8px; margin-bottom: 20px; }
.cnx-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(11, 42, 107, 0.12);
  transition: background 0.3s var(--ease);
}
.cnx-progress span.is-done { background: var(--gold-500); }
.cnx-progress-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
  display: block;
}
.cnx-step[hidden] { display: none; }

/* .btn impose display:inline-flex et l'emporte sur l'attribut hidden :
   sans cette règle, « Retour » et « Envoyer » restent visibles dès
   la première étape. */
.cnx-foot [hidden],
.cnx-body [hidden] { display: none !important; }

/* Confirmation */
.cnx-done { text-align: center; padding: 14px 0 6px; }
.cnx-done i {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-size: 1.6rem;
  color: var(--navy-900);
  background: var(--gold-500);
}
.cnx-done h3 { font-size: 1.15rem; margin-bottom: 8px; }
.cnx-done p { font-size: 0.9rem; line-height: 1.6; }

/* Aperçu plein écran d'une affiche */
.cnx-media { padding: 0; background: transparent; border: 0; box-shadow: none; }
.cnx-media img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--r-md);
  background: #fff;
}
.cnx-media-cap {
  margin-top: 12px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Case « ne plus afficher » */
.cnx-dismiss {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  cursor: pointer;
  user-select: none;
}
.cnx-dismiss input { width: 15px; height: 15px; accent-color: var(--gold-600); }

/* -----------------------------------------------------------
   6. Déclencheur discret réutilisable (liens « tarifs », etc.)
   ----------------------------------------------------------- */
.cnx-trigger-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold-700);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.cnx-trigger-link:hover { border-bottom-color: var(--gold-500); }
[data-theme="dark"] .cnx-trigger-link { color: var(--gold-300); }

/* -----------------------------------------------------------
   7. Le fond ne défile plus quand une modale est ouverte
   ----------------------------------------------------------- */
body.cnx-locked { overflow: hidden; }