/* Feuille de style des pages de tarifs.
   ────────────────────────────────────────────────────────────────────────
   Partagée par « pricing.html » (Formation) et « tarifs-entreprise.html ».
   Elle était auparavant recopiée dans la page ; deux pages valent mieux
   qu'une, deux copies de la même feuille ne valent rien — la seconde finit
   toujours par diverger de la première sans que personne ne le voie.

   Elle suppose « design-tokens.css » chargée avant elle : toutes les
   couleurs, espacements et graisses viennent de là. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--font-body); background: var(--bg-page); color: var(--text-1); min-height: 100vh; }

.bg-wrap {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%, rgba(16, 185, 129, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 90% 90%, rgba(37, 99, 235, 0.10) 0%, transparent 65%),
    var(--bg-page);
}

.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: var(--space-12) var(--space-6); }
@media (max-width: 640px) { .wrap { padding: var(--space-8) var(--space-4); } }

header { text-align: center; margin-bottom: var(--space-12); }
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--vigil-700);
  margin-bottom: var(--space-4);
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.05;
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.subtitle {
  font-size: var(--text-lg);
  color: var(--text-2);
  max-width: 680px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

.demo-bar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--vigil-50) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--space-10);
  border: 1px solid var(--vigil-200);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 12px -2px rgba(16, 185, 129, 0.12);
}
.demo-bar::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-primary); z-index: 1;
}
.demo-bar > span { font-size: var(--text-sm); color: var(--text-2); }
.demo-bar strong { color: var(--vigil-800); font-weight: var(--weight-bold); }
.demo-bar .btn-demo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--gradient-primary);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 14px -4px rgba(16, 185, 129, 0.45);
  transition: all var(--duration-fast);
}
.demo-bar .btn-demo:hover { background: var(--gradient-primary-hover); transform: translateY(-1px); }

.toggle-bar { display: flex; justify-content: center; margin-bottom: var(--space-8); }
.toggle {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 6px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border-default);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px -1px rgba(15, 23, 42, 0.08);
}
.toggle button {
  background: transparent; border: none;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--duration-fast);
}
.toggle button.active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 4px 12px -2px rgba(16, 185, 129, 0.35);
}
.toggle .save-tag {
  display: inline-block; margin-left: 8px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
}

/* Trois colonnes, deux rangées.
   ────────────────────────────────────────────────────────────────────────
   « auto-fit » remplissait la largeur disponible : à 1440 px cela donnait
   quatre colonnes, donc 4 + 2, avec deux trous béants sur la seconde rangée.
   Six formules se rangent en 3 × 2 sans trou, et chaque carte respire.

   Le nombre est FIXÉ, non deviné : la grille des tarifs compte six cartes des
   deux côtés — formation comme entreprise — et ce n'est pas une donnée qui
   varie au fil de l'eau. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .grid { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  display: flex; flex-direction: column;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 20px -4px rgba(15, 23, 42, 0.10);
  transition: transform var(--duration-standard) var(--ease-out), box-shadow var(--duration-standard);
}
.plan::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-primary); z-index: 1;
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 32px -6px rgba(15, 23, 42, 0.18);
}
.plan.featured {
  border-color: var(--vigil-400);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px -6px rgba(16, 185, 129, 0.25),
    0 0 0 1px var(--vigil-400);
}
.plan.featured::before { height: 5px; }
.plan-tag {
  /* La carte coupe ce qui dépasse (« overflow: hidden », pour le liseré du
     haut) : une étiquette posée au-dessus du bord arrivait tronquée. */
  position: absolute; top: 0; right: 18px;
  background: var(--gradient-primary);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.4);
  z-index: 2;
}
.plan-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 6px;
  color: var(--text-1);
}
.plan-target { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--space-4); min-height: 36px; line-height: var(--lh-normal); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan-price .amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-1);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.plan-price .currency { font-size: 1.2rem; font-weight: var(--weight-bold); color: var(--text-3); }
.plan-period { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--space-4); }
.plan-period .ht { font-weight: var(--weight-bold); color: var(--text-4); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); flex: 1; }
/* La puce est POSÉE, pas alignée en flex.
   ────────────────────────────────────────────────────────────────────────
   En flex, chaque nœud de la ligne devient un élément à part : « <strong>15
   utilisateurs</strong> sur le site » se séparait en deux colonnes écartées,
   et la phrase se lisait en diagonale. Le texte redevient un bloc ordinaire,
   qui se coupe où la ligne se termine. */
.plan li {
  position: relative;
  font-size: var(--text-sm);
  padding: 7px 0 7px calc(var(--space-2) + 14px);
  color: var(--text-2);
}
.plan li::before {
  content: '✓';
  position: absolute; left: 0; top: 7px;
  color: var(--success-600);
  font-weight: var(--weight-extrabold);
}
.plan .btn-choose {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  cursor: pointer;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 14px -4px rgba(16, 185, 129, 0.45);
  transition: all var(--duration-fast);
}
.plan .btn-choose:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 22px -4px rgba(16, 185, 129, 0.50);
}
.plan .btn-choose.btn-contact {
  background: var(--neutral-800);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.25);
}
.plan .btn-choose.btn-contact:hover:not(:disabled) { background: var(--neutral-900); }
.plan .btn-choose:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.plan small.note {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: var(--space-3);
  display: block;
  text-align: center;
}

.trust {
  display: flex; justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.trust span { display: flex; align-items: center; gap: 6px; }

footer { text-align: center; margin-top: var(--space-12); font-size: var(--text-xs); color: var(--text-3); }

/* MODAL */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-5);
}
.modal-bg.show { display: flex; }
.modal {
  position: relative;
  background: var(--bg-modal);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.modal::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-primary); z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@media (max-width: 640px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; overflow-y: auto; }
}
.modal h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 6px;
}
.modal .modal-sub { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--space-5); }
.modal label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 6px;
}
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  background: #fff;
  color: var(--text-1);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.modal input:focus { outline: none; border-color: var(--vigil-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.modal .modal-summary {
  background: var(--neutral-100);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  color: var(--text-2);
}
.modal .modal-summary strong { color: var(--text-1); font-weight: var(--weight-bold); }
.modal .modal-actions { display: flex; gap: var(--space-3); }
.modal .modal-actions button {
  flex: 1; padding: 13px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--duration-fast);
}
.modal .btn-cancel {
  background: #fff;
  color: var(--text-2);
  border-color: var(--border-default);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px -1px rgba(15, 23, 42, 0.08);
}
.modal .btn-cancel:hover { background: var(--neutral-50); color: var(--text-1); }
.modal .btn-pay {
  background: var(--gradient-primary);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 14px -4px rgba(16, 185, 129, 0.45);
}
.modal .btn-pay:hover:not(:disabled) { background: var(--gradient-primary-hover); transform: translateY(-1px); }
.modal .btn-pay:disabled { opacity: 0.6; cursor: wait; }
.modal .err {
  background: var(--danger-50);
  border: 1px solid var(--danger-200);
  border-left: 4px solid var(--danger-500);
  color: var(--danger-800);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  display: none;
}
.modal .err.show { display: block; }
.modal .cgv { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--space-3); text-align: center; }
.modal .cgv a { color: var(--vigil-700); font-weight: var(--weight-semibold); }

/* ── La bascule entre les deux univers ────────────────────────────────────
   Les deux pages de tarifs ne se devinent pas l'une l'autre. Un dirigeant
   arrivé sur la page Formation parce que c'est elle qui est référencée doit
   pouvoir rejoindre la sienne sans repasser par l'accueil. */
.bascule {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-top: var(--space-5);
  padding: 4px; border-radius: 999px;
  background: rgba(15, 23, 42, .05);
}
.bascule > * {
  padding: 7px 16px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-decoration: none; color: var(--text-2); white-space: nowrap;
}
.bascule > a:hover { color: var(--vigil-700); background: rgba(255, 255, 255, .6); }
.bascule .bascule-actif { background: #fff; color: var(--text-1); box-shadow: 0 1px 3px rgba(2, 6, 23, .12); }

/* ── La mention annuelle sous le prix ──────────────────────────────────── */
.plan-period .annuel {
  display: block; margin-top: 3px; font-size: .72rem; color: var(--text-3);
}
.plan-period .offert { color: var(--green, #059669); font-weight: var(--weight-bold); }

/* ── Ce qu'il faut savoir avant de choisir ──────────────────────────────
   Un tarif sans ses règles se discute au téléphone, une fois par prospect.
   Écrites ici, elles se lisent une fois et se tiennent. */
.precisions {
  max-width: 820px; margin: var(--space-12) auto 0;
  padding: var(--space-8);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-xl, 18px);
}
.precisions h2 {
  font-family: var(--font-display, inherit);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  color: var(--text-1); margin-bottom: var(--space-6); text-align: center;
}
.precisions dt {
  font-weight: var(--weight-bold); color: var(--text-1);
  font-size: var(--text-base); margin-top: var(--space-5);
}
.precisions dt:first-of-type { margin-top: 0; }
.precisions dd {
  margin: 6px 0 0; color: var(--text-2);
  font-size: var(--text-sm); line-height: 1.62;
}
@media (max-width: 640px) { .precisions { padding: var(--space-5); } }

/* ── L'écran bas : vidéoprojecteur et portables 16/9 ──────────────────────
   Mesuré à 1280×720, la résolution des démonstrations client : l'en-tête
   occupait toute la hauteur et pas un seul prix n'apparaissait sans faire
   défiler. Un prospect à qui l'on projette une page de tarifs doit voir des
   tarifs — c'est le seul écran de la page où il ne faut pas se tromper.

   La règle vise la HAUTEUR, pas la largeur : un 1280×1024 n'a pas ce
   problème, un portable 1920×800 l'a. */
@media (min-width: 901px) and (max-height: 820px) {
  .wrap { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  header { margin-bottom: var(--space-6); }
  header h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
  header .subtitle { font-size: var(--text-sm); max-width: 760px; }
  .eyebrow { margin-bottom: 6px; }
  .bascule { margin-top: var(--space-3); }
  .demo-bar { padding: 10px 16px; margin-bottom: var(--space-6); }
}

/* ── La demande de démonstration ─────────────────────────────────────────── */
.demo-fond {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(2, 6, 23, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.demo-boite {
  position: relative; width: 100%; max-width: 460px;
  background: #fff; border-radius: var(--radius-lg, 16px);
  padding: var(--space-7, 26px);
  box-shadow: 0 24px 60px -12px rgba(2, 6, 23, .4);
  max-height: 92vh; overflow-y: auto;
}
.demo-boite h2 {
  font-family: var(--font-display, inherit);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  color: var(--text-1); margin-bottom: 4px;
}
.demo-sous { color: var(--text-2); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.demo-fermer {
  position: absolute; top: 12px; right: 12px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; color: var(--text-3); line-height: 1; padding: 6px;
}
.demo-boite label {
  display: block; margin-top: var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-2);
}
.demo-boite input {
  width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .16); border-radius: 10px;
  font: inherit; font-size: var(--text-sm); color: var(--text-1);
}
.demo-boite input:focus { outline: 2px solid var(--vigil-600, #059669); outline-offset: 1px; }
.demo-aide { margin-top: 6px; font-size: .78rem; line-height: 1.5; color: var(--text-3); }
.demo-aide a { color: var(--vigil-700); font-weight: var(--weight-semibold); }
.demo-cgu { margin-top: var(--space-4); }
.demo-erreur {
  margin-bottom: var(--space-3); padding: 10px 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px;
  color: #991B1B; font-size: var(--text-sm);
}
.demo-actions { display: flex; gap: 10px; margin-top: var(--space-5); }
.demo-actions button { flex: 1; padding: 11px 14px; border-radius: 10px; font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.demo-annuler { background: #F1F5F9; border: 1px solid rgba(15, 23, 42, .12); color: var(--text-2); }
.demo-envoyer { background: var(--gradient-primary); border: 0; color: #fff; }
.demo-envoyer:disabled { opacity: .6; cursor: wait; }
.demo-ok { text-align: center; }
.demo-ok-ico { font-size: 2.4rem; margin-bottom: 8px; }
.demo-ok h2 { margin-bottom: 10px; }
.demo-ok p { color: var(--text-2); font-size: var(--text-sm); margin-bottom: 8px; }
.demo-ok .demo-envoyer { margin-top: var(--space-4); padding: 10px 22px; }
@media (max-width: 480px) { .demo-boite { padding: var(--space-5); } .demo-actions { flex-direction: column-reverse; } }