/* --- Les trois formules ------------------------------------------------------------------------
   La grille des abonnements, rendue par src/formules.js. Comme /carte.css, une seule feuille pour
   les deux pages qui la montrent : « Mon compte » la charge apres /boutique.css, la vitrine apres
   /carte.css, dont elle lit les jetons (--navy, --titre, --halo, --or). Les deux dessinent donc
   exactement le meme objet.

   Une grille de tarifs se lit de gauche a droite, colonne par colonne, et chaque colonne dit la
   meme chose dans le meme ordre : le nom, a qui elle s'adresse, le prix en gros, ce que ce prix
   fait a la carte, le bouton quand la page en pose un, puis ce qui est compris. Trois pavés de prose cote a cote ne se
   comparaient pas, ils se lisaient, et personne ne lit trois paragraphes pour choisir.

   La colonne du milieu est celle qu'on veut voir prise : elle porte son ruban, sa bordure doree et
   deux pixels de plus. Rien d'autre ne la distingue, et surtout pas un prix barre. */
/* Les colonnes s'etirent a la meme hauteur : trois plaques qui s'arretent chacune ou son texte
   finit se lisent comme trois blocs sans rapport, et la comparaison se perd. */
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 0;
  align-items:stretch}
.formule{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 16px 16px;
  border:3px solid var(--navy);border-radius:18px;
  background:linear-gradient(#24478f,#132c63);box-shadow:inset 0 2px 0 rgba(255,255,255,.16),0 5px 0 var(--navy)}
.formule .vignette-formule{width:64px;height:64px;margin:0 0 2px;
  filter:drop-shadow(0 3px 0 rgba(10,26,51,.45))}
.formule h4{margin:0;font:400 22px/1.1 var(--titre);letter-spacing:.3px;color:#fff;text-shadow:var(--halo)}
.formule .pour{margin:0;color:#9fc3ff;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.formule .montant{display:flex;align-items:baseline;gap:6px;margin:6px 0 0}
.formule .montant b{font:400 34px/1 var(--titre);letter-spacing:.5px;color:#fff;text-shadow:var(--halo)}
.formule .montant span{color:#b7cdf2;font-size:13px}
.formule .sous-prix{margin:0;color:var(--or,#ffcc33);font-size:13.5px;font-weight:800}
.formule .b{margin-top:6px;min-height:44px;font-size:15px}
/* La colonne mise en avant. L'echelle est legere : au-dela, la grille penche et les trois colonnes
   cessent d'etre comparables. */
.formule.vedette{border-color:var(--or,#ffcc33);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 5px 0 #8a6200,0 0 0 4px rgba(255,204,51,.14)}
/* La marque de la colonne mise en avant. Elle ne s'appelle pas « ruban » : ce nom appartient au
   ruban de rarete d'une carte (/carte.css), dont les deux ailes en pseudo-elements venaient se
   coller derriere celle-ci. Elle est centree au-dessus du titre, et la vedette lui reserve sa
   place plutot que de la laisser mordre dessus. */
.formule .pris{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  margin:0;padding:4px 14px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(#ffe89a 0 16%,#ffcc33 16%,#e0a200 100%);border:2.5px solid var(--navy);
  box-shadow:0 3px 0 rgba(10,26,51,.45);
  color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.formule.vedette{padding-top:26px}
/* En vue admin, les boutons sont eteints : ils doivent se lire comme eteints, pas comme casses. */
.formule .b:disabled{opacity:.6;cursor:not-allowed}
/* Celle qu'on a prise : le vert de ce qui est acquis, comme une carte livree. */
.formule.mienne{background:linear-gradient(#155e33,#0b3a20)}
.formule .votre{margin:6px 0 0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.1);
  color:#b9f5cd;font-size:14px;font-weight:800;text-align:center}
.formule .changer{margin:6px 0 0;color:#9fb4d8;font-size:13px}
.formule .changer a{color:var(--or,#ffcc33)}
.formule .avantages{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:7px;color:#d3e0fa;font-size:13.5px;line-height:1.35}
/* La coche est dessinee en CSS : une image de plus pour cinq lignes de texte ne se charge pas. */
.formule .avantages li{position:relative;padding-left:22px}
.formule .avantages li::before{content:"";position:absolute;left:2px;top:3px;width:6px;height:11px;
  border:solid #3ddc84;border-width:0 3px 3px 0;transform:rotate(45deg)}
.formule.mienne .avantages li::before{border-color:#b9f5cd}

/* Sous 900 pixels, trois colonnes ne tiennent plus sans couper les mots : elles s'empilent, et la
   vedette garde sa place au milieu, la ou l'oeil la trouve deja. */
@media (max-width:900px){
  .formules{grid-template-columns:minmax(0,1fr)}
}