/* ============================================================================
   CARTES DES FORFAITS — composant PARTAGÉ (2026-08-21, demande explicite)
   ============================================================================

   Maquette retenue : « l'escalier » (les cartes montent avec la taille de
   l'établissement) + le curseur de la maquette « B » (on pose son nombre de
   classes, la carte concernée se lève et le montant défile).

   POSÉ ICI, dans design/homepage/css/, parce que c'est le seul dossier que
   les DEUX destinations savent atteindre : l'accueil public l'utilise
   directement, et /gestion/facturation/ y accède par ../../homepage/css/ —
   la même convention que auto-year.js et etab-context.js, déjà partagés de
   cette façon.

   Une seule source pour les prix (js/forfaits.js) et une seule pour le
   dessin (ce fichier) : un troisième écran qui voudrait la grille demain
   l'obtient sans copier une ligne.

   THÈMES : le composant n'invente aucune couleur. Il consomme les jetons
   déjà définis par la page hôte — style.css pour l'accueil, dashboard.css
   pour la gestion — qui portent les mêmes noms (--teal, --ink, --card…).
   Les valeurs de repli servent uniquement si le composant est ouvert seul.
   ============================================================================ */

.forfaits{ display:flex; flex-direction:column; gap:22px; }

/* ---- La bascule abonné / non-abonné ---- */
.forfaits-bascule{
  display:inline-flex; align-self:flex-start; gap:4px; padding:4px;
  border-radius:999px; background:var(--bg-soft,#FAFBFC); border:1px solid var(--line,#ECEDF0);
}
.forfaits-bascule button{
  border:none; cursor:pointer; padding:9px 17px; border-radius:999px; background:transparent;
  font:500 14px/1 "IBM Plex Sans", system-ui, sans-serif; color:var(--muted,#6B7280);
  transition:background .22s ease, color .22s ease;
}
.forfaits-bascule button[aria-pressed="true"]{
  background:var(--teal,#1FB6A6); color:#06231F; font-weight:600;
}
.forfaits-bascule button:focus-visible{ outline:2px solid var(--blue,#2E7BD9); outline-offset:2px; }

/* ---- Le curseur ---- */
.forfaits-reglage{ display:flex; flex-direction:column; gap:11px; }
.forfaits-reglage .haut{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.forfaits-reglage label{
  font:500 12px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted,#6B7280);
}
.forfaits-lecture{ display:flex; align-items:baseline; gap:8px; }
.forfaits-lecture .n{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:600; font-size:36px;
  line-height:1; color:var(--ink,#1F2937); font-variant-numeric:tabular-nums;
}
.forfaits-lecture .m{ font-size:14px; color:var(--muted,#6B7280); }

.forfaits input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; margin:0;
  background:linear-gradient(90deg, var(--teal,#1FB6A6) var(--pct,30%), var(--line,#ECEDF0) var(--pct,30%));
  cursor:pointer;
}
.forfaits input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--card,#FFFFFF); border:3px solid var(--teal,#1FB6A6); cursor:grab;
  box-shadow:0 2px 8px rgba(38,52,74,.28);
}
.forfaits input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--card,#FFFFFF);
  border:3px solid var(--teal,#1FB6A6); cursor:grab;
}
.forfaits input[type="range"]:focus-visible{ outline:2px solid var(--blue,#2E7BD9); outline-offset:4px; }

/* ---- L'escalier ----
   Les quatre cartes montent avec la taille : la hauteur dit le prix avant
   qu'on lise le chiffre. Elles s'alignent par le bas, comme des marches. */
.forfaits-escalier{
  display:grid; grid-template-columns:repeat(4,1fr); gap:13px; align-items:end;
}
.forfait{
  position:relative; overflow:hidden; text-align:left;
  background:linear-gradient(170deg, var(--navy,#26344A), #16202E);
  border:1px solid transparent; border-radius:14px; padding:18px 16px; color:#fff;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 1px 2px rgba(38,52,74,.08), 0 10px 26px rgba(38,52,74,.12);
  transition:transform .32s cubic-bezier(.34,1.25,.5,1), box-shadow .3s ease,
             border-color .3s ease, filter .3s ease;
}
.forfaits-escalier .forfait:nth-child(1){ min-height:184px; }
.forfaits-escalier .forfait:nth-child(2){ min-height:208px; }
.forfaits-escalier .forfait:nth-child(3){ min-height:232px; }
.forfaits-escalier .forfait:nth-child(4){ min-height:256px; }

.forfait:hover{ transform:translateY(-5px); box-shadow:0 6px 14px rgba(38,52,74,.16), 0 24px 52px rgba(38,52,74,.22); }

/* La jauge qui trace le bas de chaque carte. */
.forfait::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--teal,#1FB6A6), var(--blue,#2E7BD9));
  transform:scaleX(0); transform-origin:left;
}
.forfait.est-vu::after{ animation:forfaitJauge .8s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes forfaitJauge{ to{ transform:scaleX(1); } }

/* L'arrivée en cascade, une marche après l'autre. */
.forfait.est-vu{ animation:forfaitMonte .55s cubic-bezier(.2,.9,.3,1) both; }
.forfaits-escalier .forfait:nth-child(2).est-vu{ animation-delay:.07s; }
.forfaits-escalier .forfait:nth-child(3).est-vu{ animation-delay:.14s; }
.forfaits-escalier .forfait:nth-child(4).est-vu{ animation-delay:.21s; }
@keyframes forfaitMonte{
  from{ transform:translateY(24px) scaleY(.94); opacity:0; }
  to{ transform:none; opacity:1; }
}

.forfait .rang{
  font:500 10.5px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.forfait .titre{ font-family:Poppins, system-ui, sans-serif; font-weight:600; font-size:16px; }
.forfait .incl{ font-size:12.5px; color:var(--gold,#D9A441); font-weight:500; }
.forfait .montant{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:600; font-size:29px;
  line-height:1; margin-top:auto; font-variant-numeric:tabular-nums;
}
.forfait .unite{ font-size:12.5px; color:rgba(255,255,255,.6); }

/* La carte qui correspond au curseur : elle se lève et s'entoure de teal. */
.forfait.est-choisi{
  border-color:var(--teal,#1FB6A6);
  box-shadow:0 6px 14px rgba(38,52,74,.18), 0 24px 52px rgba(31,182,166,.28);
}
.forfait.est-choisi .montant{ color:var(--teal,#1FB6A6); }
.forfaits-escalier.a-un-choix .forfait:not(.est-choisi){ filter:saturate(.55) brightness(.92); }

/* ---- La conclusion ---- */
.forfaits-verdict{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-top:1px dashed var(--line,#ECEDF0); padding-top:17px;
}
.forfaits-verdict .etiq{ font-size:14.5px; color:var(--muted,#6B7280); }
.forfaits-verdict .somme{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:600; font-size:31px;
  color:var(--teal,#1FB6A6); font-variant-numeric:tabular-nums; line-height:1;
}
.forfaits-verdict .parclasse{ font-size:13.5px; color:var(--muted,#6B7280); }

/* ---- Petits écrans ----
   Un escalier n'a plus de sens en une seule colonne : les cartes reprennent
   toutes la même hauteur et se rangent en deux colonnes, puis une. */
@media (max-width:760px){
  .forfaits-escalier{ grid-template-columns:repeat(2,1fr); }
  .forfaits-escalier .forfait:nth-child(n){ min-height:172px; }
  .forfaits-lecture .n{ font-size:30px; }
}
@media (max-width:440px){
  .forfaits-escalier{ grid-template-columns:1fr; }
  .forfaits-escalier .forfait:nth-child(n){ min-height:0; }
  .forfaits-verdict .somme{ font-size:26px; }
}

@media (prefers-reduced-motion: reduce){
  .forfait, .forfait.est-vu{ animation:none; transition:none; }
  .forfait::after, .forfait.est-vu::after{ animation:none; transform:scaleX(1); }
  .forfaits-escalier.a-un-choix .forfait:not(.est-choisi){ filter:none; }
}

/* ============================================================================
   L'APPEL DU REGARD SUR « TARIFS EMPLOI DU TEMPS » (2026-08-21)
   ----------------------------------------------------------------------------
   Le bouton est noyé parmi cinq autres dans la bannière d'accueil. Il respire
   donc par intermittence — un halo doré qui s'ouvre, et un léger balancement.
   PAR INTERMITTENCE et non en continu : un bouton qui bat sans arrêt devient
   du décor qu'on ne voit plus. Ici il se rappelle toutes les 6 secondes, le
   temps d'une seconde.
   Il s'éteint DÉFINITIVEMENT au premier clic (voir js/script.js, clé
   schoolEditor.tarifsVus) : quelqu'un qui a déjà vu les tarifs n'a plus besoin
   qu'on le lui signale.
   ============================================================================ */
.tarifs-appel{ position:relative; animation:tarifsAppel 6s ease-in-out infinite; }
@keyframes tarifsAppel{
  0%, 72%, 100%{ transform:none; }
  76%{ transform:translateY(-3px) rotate(-1.6deg); }
  81%{ transform:translateY(0) rotate(1.4deg); }
  86%{ transform:translateY(-2px) rotate(-.8deg); }
  91%{ transform:none; }
}
/* Le halo, sur un calque séparé pour ne pas gêner le fond du bouton. */
.tarifs-appel::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(217,164,65,.85);
  animation:tarifsHalo 6s ease-out infinite;
}
@keyframes tarifsHalo{
  0%, 70%, 100%{ box-shadow:0 0 0 0 rgba(217,164,65,0); }
  74%{ box-shadow:0 0 0 0 rgba(217,164,65,.75); }
  92%{ box-shadow:0 0 0 14px rgba(217,164,65,0); }
}

/* ---- Le renvoi vers « Contactez-nous », au bas de la fenêtre des tarifs ---- */
.tarifs-appui{
  margin:18px 0 0; text-align:center; font-size:14.5px; color:var(--muted,#6B7280);
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
}
.tarifs-contact{
  border:1px solid var(--teal,#1FB6A6); background:transparent; cursor:pointer;
  color:var(--teal,#1FB6A6); font:600 14px/1 "IBM Plex Sans", system-ui, sans-serif;
  padding:9px 18px; border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.tarifs-contact:hover{ background:var(--teal,#1FB6A6); color:#06231F; }
.tarifs-contact:focus-visible{ outline:2px solid var(--blue,#2E7BD9); outline-offset:2px; }

/* ---- Le destinataire des deux numéros ---- */
.contact-destinataire{
  margin:0 0 14px; font-size:14px; color:var(--muted,#6B7280); text-align:center;
}
.contact-destinataire b{ color:var(--ink,#1F2937); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .tarifs-appel, .tarifs-appel::after{ animation:none; }
  .tarifs-contact{ transition:none; }
}