/* L'âme des pages d'usage : une journée racontée à l'heure près, un manifeste, une question par jour. */

/* ---------- Une journée avec BetterCall : l'heure en grand, ce qui se passe, l'écran de l'appli ---------- */
.journee { padding-top: 160px; }
.journee-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gouttiere); align-items: end; margin-bottom: 64px; }
.journee-photo { justify-self: end; width: min(100%, 520px); }
.journee-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.moment { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: center; padding: 40px 36px; border-radius: 24px; background: var(--teinte-pale); }
.moment time { color: var(--teinte-encre); font-family: var(--police-titre); font-weight: 400; font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.moment-texte strong { display: block; font-size: var(--step-lead); font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.moment-texte p { margin: 0; max-width: 58ch; }
/* L'écran de l'appli à ce moment-là (data-ui) : une fenêtre blanche. */
.moment-ui { display: flex; gap: 14px; align-items: center; background: var(--bc-blanc); border: 1px solid var(--bc-filet); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
.moment-ui b { display: block; font-size: 13px; font-weight: 500; color: var(--bc-ambre-encre); }
.moment-ui b.bleu { color: var(--bc-fiche); }
.ui-note, .ui-latence-moment { flex: none; min-width: 64px; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; padding: 8px 10px; border-radius: 8px; background: var(--bc-papier-2); }
.ui-latence-moment { color: var(--bc-ok); }

/* ---------- Le manifeste ---------- */
.manifeste { display: grid; gap: 24px; align-content: start; }
.manifeste p { margin: 0; max-width: 46ch; font-size: var(--step-lead); line-height: 1.4; }

/* ---------- La question du jour : une carte, la réponse à déplier ---------- */
.qj-carte { background: var(--bc-papier-2); border-radius: 20px; padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; justify-items: start; }
.qj-carte h2 { font-family: var(--police-texte); font-size: var(--step-body); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--bc-encre-douce); }
.qj-question { font-family: var(--police-titre); font-weight: 400; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.02em; margin: 0; max-width: 20em; }
.qj-source { margin: 0; font-size: var(--step-small); color: var(--bc-encre-douce); }
.qj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.qj-carte .bouton.second { background: var(--bc-blanc); }
@media (hover: hover) and (pointer: fine) { .qj-carte .bouton.second:hover { background: var(--bc-papier-3); } }
.qj-reponse { margin: 6px 0 0; background: var(--bc-blanc); padding: 18px 20px; border-radius: 12px; max-width: 70ch; animation: arrivee 380ms var(--ease-out); }

@media (max-width: 900px) {
  .journee { padding-top: 112px; }
  .journee-tete { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .journee-photo { justify-self: start; width: 100%; }
  .moment { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 20px; }
}