/* 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);
}

/* Le nombre de colonnes est déclaré, pas deviné.
   ────────────────────────────────────────────────────────────────────────
   « auto-fit » remplissait la largeur disponible, et le nombre de colonnes
   changeait avec la taille de l'écran : à 1440 px on obtenait des rangées
   incomplètes avec des trous béants au milieu de la grille tarifaire.

   Le nombre de formules n'est pas une donnée qui varie au fil de l'eau : la
   page le sait en l'écrivant. Formation en compte cinq (Indépendant, Starter,
   Pro, Expert, Entreprise) et se range en 3 + 2 ; entreprise en compte quatre
   (Starter, Pro, Expert, Entreprise) et prend « .grid.quatre » pour les mettre
   sur une seule ligne — sans quoi la quatrième reste seule sur sa rangée, ce
   qui la fait lire comme une note de bas de page plutôt que comme une offre.

   Si une formule est ajoutée ou retirée, c'est ici qu'il faut revenir. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}
.grid.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* En dessous de 1180 px, quatre cartes deviennent quatre colonnes trop
   étroites : le palier repasse en 2 × 2, qui reste équilibré. */
@media (max-width: 1180px) { .grid.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .grid, .grid.quatre { 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); }

/* « Sur devis » n'est pas un montant.
   ────────────────────────────────────────────────────────────────────────
   Écrit dans « .amount », le mot « Sur » prenait la taille d'un chiffre : la
   carte annonçait « Sur » en 3 rem et « devis personnalisé » en petit dessous,
   comme si le prix de l'offre était le mot « Sur ». Il lui faut sa propre
   graisse : lisible, aligné sur les autres prix, mais qui ne mime pas un
   nombre qu'on pourrait comparer aux trois d'à côté. */
.plan-price .sur-devis {
  font-family: var(--font-display, inherit);
  font-size: 1.55rem;
  font-weight: var(--weight-extrabold, 800);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text-2, #334155);
}
.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);
}
/* Le stylage des boutons a été RETIRÉ d'ici le 19 août 2026.
   ────────────────────────────────────────────────────────────────────────
   « mib-relief.css » possède désormais l'aspect des boutons sur toute la
   plateforme. Les règles qui vivaient là — fond en dégradé, ombre verte,
   soulèvement au survol — étaient écrites « .plan .btn-choose », de même
   force que le relief mais chargées après : elles l'emportaient, et les
   deux pages de tarifs restaient les SEULES sans relief de tout le site.

   Monter la spécificité du relief aurait lancé une course : ici deux
   classes, là trois, et le premier fichier oublié aurait de nouveau gagné.
   Retirer le doublon vaut mieux que le surenchérir — un seul fichier décide
   de ce à quoi ressemble un bouton.

   Ce qui reste ci-dessous est propre à la MISE EN PAGE de la carte (largeur
   pleine, hauteur de frappe), pas à l'aspect du bouton. */
.plan .btn-choose {
  width: 100%;
  padding: 13px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.plan .btn-choose:disabled { opacity: 0.6; cursor: not-allowed; }

.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; } }