/* =====================================================================
   PAGE JOURNAL : troisième référence de Ruben. Une carte par journée,
   empilées ; la journée actuelle mise en avant ; aucun cadenas.
   Même langage que l'accueil et les quêtes, accent = couleur du rang.
   ===================================================================== */
.halo-carnet { background: radial-gradient(circle, rgba(var(--accent-rgb), .16) 0%, transparent 62%); top: -24px; width: 280px; height: 260px; }
.illustration-carnet { position: relative; width: 236px; height: 224px; margin-top: 6px; animation: flotte 7s ease-in-out infinite; }
.illustration-carnet svg { width: 100%; height: 100%; display: block; }
.page-journal .hero-titre { margin-top: 26px; }
.page-journal .hero { padding-bottom: 18px; }

/* Le bouton unique : la date de la note se met toute seule */
.btn-note { display: block; margin: 4px 0 6px; border-radius: 99px; }

/* Les journées écrites, rangées par mois. Une carte = le chiffre du jour + 4 lignes. */
.titre-mois { font-size: 15px; font-weight: 650; color: #fff; margin: 30px 4px 12px; }
.carte-jour { cursor: pointer; padding: 18px 20px; border-radius: 22px; }
.carte-jour:active { background: #1b1b1e; }
.jour-ligne { display: grid; grid-template-columns: 40px 1px 1fr auto; align-items: center; gap: 16px; }
.jour-num { font-size: 28px; font-weight: 650; color: #fff; text-align: center; line-height: 1; }
.jour-sep { width: 1px; align-self: stretch; min-height: 36px; background: #2e2e32; }
.jour-apercu { font-size: 14.5px; color: #c7c7cc; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: pre-line; }
.j-ico { display: inline-flex; align-items: center; color: var(--accent); }
.j-ico svg { width: 13px; height: 13px; fill: var(--accent); }
.jour-video { align-self: start; margin-top: 3px; }

/* La fiche d'une journée */
.j-ico-grand svg { fill: var(--accent); }
.champ-journal, .champ-transcription { width: 100%; font: inherit; font-size: 15.5px; line-height: 1.55; color: #fff; background: #111113;
  border: 1px solid #26262a; border-radius: 14px; padding: 14px; margin: 4px 0 12px; resize: vertical; }
.champ-journal:focus, .champ-transcription:focus { outline: none; border-color: var(--accent); }
.champ-transcription { font-size: 14px; color: #c7c7cc; }
.video-tuile { margin-bottom: 18px; }
.video-cadre { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111113; border: 1px solid #26262a; }
.video-cadre video, .video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-mini { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #111113; cursor: pointer; }
.video-mini img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.video-sans-mini { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #151517 0 10px, #19191c 10px 20px); }
.video-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; padding-left: 4px; color: #070708; background: var(--accent);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .5); }
.video-infos { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 2px 6px; font-size: 12.5px; color: #8e8e93; }
.video-actions { display: flex; align-items: center; gap: 10px; }
.video-actions a { color: #c7c7cc; font-size: 12.5px; }
.video-actions .lien-retirer { padding: 0; font-size: 12.5px; }
.envoi { margin: 6px 0 12px; }
.barre-envoi { height: 4px; border-radius: 2px; background: #26262a; overflow: hidden; margin-top: 6px; }
.barre-envoi i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.pilule-off { opacity: .45; pointer-events: none; }
.page-journal .repli-a .pilule { margin: 6px 0; }

/* Dictée : le texte reconnu en direct, et le bouton actif à la couleur du rang */
.dictee-direct { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #c7c7cc; margin: -4px 2px 12px; font-style: italic; }
.dictee-point { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; animation: ecoute 1.2s ease-in-out infinite; }
.pilule-dictee { border-color: var(--accent); color: var(--accent); }
@keyframes ecoute { 50% { opacity: .3; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .dictee-point { animation: none; } }