/* Essai Content OS, l'offre en trois cartes (retours de Jack, 25/09). Reprend les jetons, .price, .tag et
   .ledger-bullets de styles.css. */

.paliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.palier {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
}
.palier-vedette { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-card); }
.palier-num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.palier h3 { margin-top: 10px; font-size: 1.5rem; }
.palier .price { margin-top: 18px; }
.palier .tag { align-self: flex-start; }
.palier-encart {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lilac);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.palier-encart.alerte { background: var(--rose-soft); color: var(--rose-ink); font-weight: 500; }
.palier .ledger-bullets { flex: 1 0 auto; }
.palier .btn { margin-top: 24px; justify-content: center; }
.palier-pied { margin-top: 18px; font-size: 0.9375rem; color: var(--muted); }

.paliers-prerequis { margin-top: clamp(24px, 3vw, 32px); max-width: 44.16em /* 72ch */; color: var(--ink-2); }
.paliers-prerequis strong { color: var(--ink); }

@media (max-width: 960px) {
  .paliers { grid-template-columns: 1fr; }
}

/* « À partir de » en petit au-dessus du chiffre, pour que les trois prix s'alignent. */
.price-from {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

/* Retours de Jack du 25/09 (suite) : l'exemple du studio en texte simple, un repère d'étape à la place du
   bouton sur les cartes 2 et 3, et la mention de TVA un peu plus grande. */
.palier-exemple { margin-top: 18px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.palier-exemple strong { color: var(--ink); }
.palier-etape {
  margin-top: 24px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
}
#offre .tva { font-size: 0.9375rem; }

/* 25/09 (suite) : une porte d'entrée, puis deux chemins au choix. Deux cartes par rangée. */
.paliers-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chemins { margin-top: clamp(40px, 5vw, 64px); margin-bottom: 20px; }
.chemins-titre { margin-top: 8px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.palier-voix {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--accent-text);
}
@media (max-width: 960px) {
  .paliers-deux { grid-template-columns: 1fr; }
}
.price.price-texte { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }

/* 25/09 : la liste d'attente de l'accompagnement individuel, sous les deux chemins. */
.attente {
  margin-top: 16px;
  border-radius: 24px;
  background: var(--bg-2);
}
.attente > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px clamp(20px, 3vw, 28px);
}
.attente > summary::-webkit-details-marker { display: none; }
.attente > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 24px; }
.attente-texte { color: var(--ink-2); max-width: 38.02em /* 62ch */; }
.attente-texte strong { color: var(--ink); }
.attente[open] .attente-bouton { visibility: hidden; }
.attente-form { padding: 0 clamp(20px, 3vw, 28px) 24px; max-width: 720px; }

/* 26/09 (« Reflexion ContentOS.md ») : l'audit en carte large, trois paliers d'installation avec leur note,
   la période d'ajustement, trois chemins, la FAQ en deux groupes. */
.palier-large {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px clamp(24px, 4vw, 56px);
  align-items: start;
}
.palier-tete, .palier-corps { display: flex; flex-direction: column; }
.palier-corps .ledger-bullets { margin-top: 0; flex: 0 0 auto; }
.palier-corps .btn { align-self: flex-start; }
@media (max-width: 960px) {
  .palier-large { grid-template-columns: 1fr; }
  .palier-corps .ledger-bullets { margin-top: 18px; }
  .palier-corps .btn { align-self: stretch; }
}
.palier-note {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2);
}
.palier-agents { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--accent-text); font-weight: 600; }
.delais { margin-top: 16px; font-size: 0.9375rem; color: var(--muted); max-width: 44.16em /* 72ch */; }
.ajustement {
  margin-top: clamp(24px, 3vw, 32px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: 24px;
  background: var(--lilac);
  color: var(--accent-ink);
}
.ajustement-titre { font-weight: 700; font-size: 1.125rem; }
.ajustement p + p { margin-top: 8px; max-width: 40em; /* 28/09 : 80ch ramené à environ 65 caractères */ }
.faq-groupe {
  padding: 28px 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.faq-groupe:first-child { padding-top: 18px; }