/* Proposition D · la greffe. Base C (« Le soir, les deux billets ») : la nuit en tête, deux billets à talon qui
   débordent sur le papier, le prix en tampon, les questions en deux colonnes, la nuit pour finir.
   Pris à B : ce que chaque formule ouvre, montré sur un petit boulier aux billes v3 (une tige, puis quatre),
   et les billes comme puces. Pris à A : « Compris partout » en rangée de tampons ronds.
   Corrigé à vue : les Tama ne flottent plus seuls dans la nuit, ils sont perchés sur le billet Famille.
   Couleurs : variables de tama.css seulement. */

.d-tete { padding: 46px 0 124px; }
.d-tete .wrap { max-width: 1120px; }
.d-tete h1 { color: var(--nuit-texte); font-size: clamp(2.3rem, 4.6vw, 3.7rem); max-width: 12.5em; }
.d-tete h1 em { font-style: normal; color: var(--soleil); white-space: nowrap; }
.d-tete .lead { margin-top: 14px; color: var(--nuit-doux); font-size: 1.25rem; }

/* ===== Les deux billets (C) ===== */
.d-formules { position: relative; z-index: 1; margin-top: -92px; padding: 0 0 72px; overflow-x: clip; }
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.ticket { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: var(--trait); border-radius: 26px; box-shadow: 0 6px 0 var(--encre); }
.talon { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 150px; padding: 18px 24px 18px 30px; border-bottom: 3px dashed var(--encre); }
.talon::before, .talon::after { content: ""; position: absolute; bottom: -19px; width: 34px; height: 34px; border-radius: 50%; background: var(--papier); border: var(--trait); }
.talon::before { left: -20px; clip-path: inset(0 0 0 50%); }
.talon::after { right: -20px; clip-path: inset(0 50% 0 0); }
.famille .talon { background: var(--tomate-doux); border-radius: 23px 23px 0 0; }
.ticket h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
.prix-tampon { width: 124px; height: 124px; margin: 0; }
.prix-tampon > span { display: grid; gap: 2px; justify-items: center; }
.prix-tampon b { font-size: 1.15rem; }
.prix-tampon small { font-size: 1rem; }
.ticket:not(.famille) .prix-tampon b { font-size: 1.3rem; }

/* Tama et le parent perchés sur le billet Famille (correction de C : ils flottaient seuls dans la nuit). */
.perches { position: absolute; right: 166px; top: -70px; display: flex; align-items: flex-end; z-index: 2; pointer-events: none; }
.perches .tama { animation: bob 3.2s ease-in-out infinite; }
.perches > span + span { margin-left: -8px; }
.perches > span + span .tama { animation-delay: -1.4s; }

/* Le corps du billet : la liste à gauche, ce que la formule ouvre sur le boulier à droite (B). */
.corps { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; padding: 26px 26px 26px 30px; }
.billes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.billes li { position: relative; padding-left: 46px; font-weight: 700; line-height: 1.4; }
.billes li::before { content: ""; position: absolute; left: 0; top: 3px; width: 34px; height: 21px; border-radius: 50%; border: 2.5px solid var(--encre); background: linear-gradient(var(--tomate) 52%, var(--tomate-fonce) 52%); }
.billes b { font-family: var(--display); font-weight: 700; }
.montre { display: grid; justify-items: center; gap: 12px; }
.d-boulier.un { width: 66px; }
.d-boulier.quatre { width: 168px; }
.tag { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.15; max-width: 9em; padding: 4px 12px 6px; background: var(--soleil); border: var(--trait); border-radius: 14px; box-shadow: 0 4px 0 var(--encre); transform: rotate(3deg); text-align: center; white-space: nowrap; }

.d-appel { display: grid; justify-items: center; gap: 12px; margin-top: 38px; text-align: center; }
.d-appel p { font-weight: 700; color: var(--encre-2); }

/* ===== Compris partout : la rangée de tampons (A) ===== */
.d-compris { padding: 72px 0 78px; }
.compris { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 18px; max-width: 1080px; }
.compris li { display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center; font-weight: 800; line-height: 1.3; }
.compris .cercle { --ic: 56px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; border: 3px dashed var(--encre); background: var(--blanc); }
.compris li:nth-child(even) .cercle { transform: rotate(6deg); }
.compris li:nth-child(odd) .cercle { transform: rotate(-5deg); }

/* ===== Questions : le titre à gauche, les réponses à droite (C) ===== */
.d-faq { padding: 80px 0 90px; }
.d-faq-grille { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; max-width: 1120px; }
.d-faq-tete { position: sticky; top: 100px; display: grid; gap: 12px; }
.d-faq .annonce .bulle { margin-bottom: 26px; }
.d-faq .faq { max-width: none; margin: 0; }

/* Tablette : les billets l'un sous l'autre, chacun garde sa liste et son boulier côte à côte. */
@media (max-width: 860px) {
  .tickets { grid-template-columns: minmax(0, 1fr); gap: 76px; max-width: 600px; }
  .perches { right: 160px; }
  .compris { grid-template-columns: repeat(3, 1fr); max-width: 600px; }
  .d-faq-grille { grid-template-columns: 1fr; gap: 26px; }
  .d-faq-tete { position: static; }
}
/* Téléphone : le boulier passe sous la liste, à côté de son étiquette. */
@media (max-width: 560px) {
  .d-tete { padding: 14px 0 104px; }
  .d-tete h1 { font-size: 2.3rem; }
  .d-tete .lead { font-size: 1.12rem; margin-top: 6px; }
  .d-formules { margin-top: -86px; }
  .tickets { gap: 60px; }
  .talon { min-height: 118px; padding: 10px 14px 10px 20px; }
  .prix-tampon { width: 110px; height: 110px; }
  .prix-tampon b { font-size: 1.05rem; }
  .perches { right: 136px; top: -48px; }
  .perches > span:first-child .tama { width: 58px; height: auto; }
  .perches > span + span .tama { width: 46px; height: auto; }
  .corps { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 22px; }
  .montre { grid-auto-flow: column; justify-content: center; align-items: center; gap: 18px; padding-top: 16px; border-top: 2.5px dashed var(--point); }
  /* La Découverte n'a qu'une tige : elle reste à côté de la liste, le billet garde sa hauteur et le prix
     de la Famille remonte dans le premier écran. */
  .ticket:not(.famille) .corps { grid-template-columns: 1fr auto; gap: 12px; }
  .ticket:not(.famille) .montre { grid-auto-flow: row; gap: 10px; padding-top: 0; border-top: 0; }
  .d-boulier.un { width: 50px; }
  .d-boulier.quatre { width: 136px; }
  .tag { white-space: normal; max-width: 7em; font-size: 1.05rem; }
  .ticket:not(.famille) .tag { white-space: nowrap; font-size: 1rem; padding: 3px 9px 5px; }
  .d-appel .btn { width: 100%; }
  .d-compris { padding: 56px 0 60px; }
  .compris { grid-template-columns: 1fr; gap: 12px; }
  .compris li { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; text-align: left; gap: 14px; }
  .compris .cercle { --ic: 38px; width: 64px; height: 64px; }
  .d-faq { padding: 60px 0 64px; }
}
@media (max-width: 380px) {
  .d-tarifs .wrap { padding-inline: 14px; }
  .d-tete h1 { font-size: 2.1rem; }
  .perches { right: 128px; }
}