/* =====================================================================
   LES FORMULES — V3, Cycle 172.

   Trois cartes, et une seule décision à prendre en les lisant. La formule
   en cours est marquée : sans cela, on relit les trois pour retrouver où
   l'on en est.

   Pas de colonne « la plus populaire », pas de prix barré : le produit n'a
   pas encore de client, et fabriquer une popularité serait mentir sur la
   seule page où l'on demande de l'argent.
   ===================================================================== */

.liste-formules{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:var(--space-4);
}

.formule{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-5);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

/* Celle qu'on a. Le liséré suffit : une couleur de fond ferait ressembler
   un état à une réclame. */
.formule--active{
    border-color:var(--warning);
    border-left-width:4px;
}

.formule-nom{
    margin:0;
    font-size:17px;
}

.formule-prix{
    margin:0;
    font-size:22px;
    font-weight:600;
    color:var(--text);
}

.formule-prix__offert{
    display:block;
    margin-top:var(--space-1);
    font-size:13px;
    font-weight:400;
    color:var(--text-light);
}

.formule-resume{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:var(--text-light);
}

/* Ce que la formule ouvre. La liste vient du verrou, jamais d'une saisie :
   une promesse d'écran que la base refuse serait la pire des factures. */
.formule-outils{
    margin:0;
    padding-left:var(--space-5);
    font-size:14px;
    line-height:1.6;
    color:var(--text);
}

.formule-outils--aucun{
    padding-left:0;
    color:var(--text-light);
}

.formule-a-qui{
    margin:0;
    font-size:13px;
    line-height:1.55;
    color:var(--text-placeholder);
}

/* Poussée en bas : les trois boutons s'alignent quel que soit le nombre de
   lignes au-dessus. */
.formule-action{
    margin-top:auto;
    text-align:center;
    text-decoration:none;
}

.formule-active{
    margin-top:auto;
    font-size:14px;
    font-weight:600;
    /* `--warning` est un aplat, pas une encre : l'employer comme couleur de
       texte casse le contraste, et la garde du dépôt le refuse. */
    color:var(--texte-warning);
}

/* La porte, posée sous une commande fermée et dans le bandeau d'essai.
   Discrète : ce n'est pas une réclame, c'est la sortie d'une impasse. */
.verrou-porte{
    display:inline-block;
    margin-left:var(--space-2);
    padding:0;
    border:0;
    background:none;
    font:inherit;
    font-weight:600;
    color:var(--texte-warning);
    text-decoration:underline;
    cursor:pointer;
}