/* Karka — styles propres à templates/components/offres.html.twig.
 * Sortis du gabarit le 11/09/2026 (audit SEO) : servis par AssetMapper avec
 * empreinte et cache long, au lieu d'être réinjectés dans chaque réponse. Le
 * <link> reste à la place exacte de l'ancien <style> : même ordre de cascade. */

.ofu { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 860px; margin: 0 auto; }
.ofu-card { position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 26px 24px 24px; }
/* La mise en avant va à l'offre qu'on veut voir choisie : l'unité sur les
   pages publiques (elle ne demande rien à personne), l'offre retenue sur la
   page d'inscription. */
.ofu-card.is-feat { border: 2px solid var(--v); box-shadow: var(--sh-md); padding: 25px 23px 23px; }
.ofu-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px; color: var(--ink-12); }
.ofu-k { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-35); }
.ofu-tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.ofu-tag.is-open { background: var(--green-bg); color: var(--green);
  border: 1px solid rgba(22,163,74,0.18); }
.ofu-tag.is-acct { background: var(--v-pale); color: var(--v);
  border: 1px solid var(--v-border); }
.ofu-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 9px; margin: 14px 0 4px; }
.ofu-price b { font-family: var(--font-head); font-size: 44px; font-weight: 900;
  letter-spacing: -2.2px; line-height: 1; }
.ofu-price span { font-size: 14px; color: var(--ink-60); }
.ofu-save { display: inline-flex; align-items: center; background: var(--green-bg);
  color: var(--green); border: 1px solid rgba(22,163,74,0.18); border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; padding: 3px 9px; }
/* Prix de lancement : le tarif normal barré, puis la mention. Le barré est en
   « ink-35 » et non en rouge — c'est une référence, pas une alarme. */
.ofu-was { font-family: var(--font-mono); font-size: 15px; color: var(--ink-35);
  text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ofu-launch { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 6px; background: var(--green-bg); color: var(--green);
  border: 1px solid rgba(22,163,74,0.18); border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px;
  text-transform: uppercase; padding: 3px 10px; }
.ofu-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-35); }
/* La liste pousse le bouton en bas : les CTA restent alignés même quand un
   texte est plus long que l'autre. */
.ofu-list { flex: 1; list-style: none; margin: 18px 0 0; padding: 0; }
.ofu-list li { position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.ofu-list li::before { content: ''; position: absolute; left: 2px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--v);
  border-bottom: 1.8px solid var(--v); transform: rotate(-45deg); }
.ofu-list li strong { color: var(--v-txt); font-weight: 600; }
/* Ce que l'offre n'inclut PAS : chevron remplacé par une croix, texte estompé.
   Sans ce contraste, une liste de six lignes toutes identiques ne dit plus
   ce qu'on gagne en montant d'un cran. */
.ofu-list li.is-off { color: var(--ink-35); }
.ofu-list li.is-off strong { color: var(--ink-35); font-weight: 600; }
/* « Bientôt » : la puce reste un chevron (la formule le comprend), mais le
   texte est estompé et porte l'étiquette — ni un acquis, ni une absence. */
.ofu-list li.is-soon { color: var(--ink-35); }
.ofu-list li.is-soon strong { color: var(--ink-35); font-weight: 600; }
.ofu-list li.is-off::before { width: 9px; height: 9px; top: 5px; left: 3px;
  border: 0; transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ink-35) 44%, var(--ink-35) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--ink-35) 44%, var(--ink-35) 56%, transparent 56%); }
.ofu-cta { margin-top: 20px; }
.ofu-foot { margin-top: 10px; font-size: 12px; color: var(--ink-35); line-height: 1.5; }
.ofu-note { display: flex; align-items: flex-start; gap: 10px; max-width: 860px;
  margin: 18px auto 0; padding: 13px 18px; background: var(--off);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-60); line-height: 1.55; }
.ofu-note svg { flex-shrink: 0; margin-top: 2px; }
.ofu--compact .ofu-card { padding: 20px 20px 18px; }
.ofu--compact .ofu-price b { font-size: 34px; letter-spacing: -1.6px; }
.ofu--compact .ofu-list li { font-size: 13px; }
/* Colonne latérale : une carte par ligne, largeur libre. Une media query ne
   suffirait pas — le composant ignore la largeur de son conteneur, et une
   colonne de 340 px sur un écran de 1400 px déclencherait « deux colonnes ». */
.ofu--col { grid-template-columns: 1fr; max-width: none; gap: 16px; }

@media (max-width: 820px) {
  .ofu { grid-template-columns: 1fr; max-width: 420px; }
}