/* Étape 1 : le carnet de notes à gauche, la fiche besoin qui se remplit à droite. */
.rendezvous__grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.rendezvous__suite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 20px; align-items: start; margin-top: 20px; }

/* Le carnet : du papier ligné, l'écriture du courtier, la ligne en cours de lecture */
.carnet {
  background: #fdfdfb; border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 18px 22px 22px; box-shadow: var(--ombre);
}
.carnet__titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.carnet__titre h2 { font-size: 23px; color: var(--petrole); }
.carnet__titre span { font-size: 14px; color: var(--encre-2); }
.carnet__qui { font-family: var(--police-texte); font-style: italic; font-size: 17px; color: var(--petrole); padding-bottom: 6px; border-bottom: 1px solid var(--filet-fort); }
.carnet__lignes { list-style: none; padding: 0; }
.carnet__ligne {
  position: relative; padding: 7px 0 7px 18px; border-bottom: 1px solid #e7eef0;
  font-family: var(--police-texte); font-style: italic; font-size: 16px; line-height: 1.45; color: #2c3d43;
}
.carnet__ligne::before { content: '-'; position: absolute; left: 4px; color: var(--encre-2); }
.carnet__ligne span { position: relative; z-index: 1; }
.carnet__ligne::after {
  content: ''; position: absolute; left: 14px; top: 3px; bottom: 3px; width: calc(var(--lu) * (100% - 14px));
  background: var(--bleu-voile); border-radius: 3px; z-index: 0;
}
.carnet__ligne--lue::after { background: transparent; }
.carnet__ligne--lue span { text-decoration: underline; text-decoration-color: rgba(49, 142, 170, 0.45); text-underline-offset: 4px; }

/* La fiche besoin */
.fiche__corps { padding: 0 20px 20px; display: grid; gap: 18px; }
.fiche__groupe h3 { font-family: var(--police); font-size: 13px; font-weight: 500; color: var(--encre-2); margin-bottom: 6px; }
.fiche__groupe dl { margin: 0; display: grid; }
.fiche__champ { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--filet); }
.fiche__champ dt { font-size: 14px; color: var(--encre-2); }
.fiche__champ dd { margin: 0; font-weight: 500; }
.rendezvous:not(.rendezvous--fini) .fiche__champ:not(.fiche__champ--attente) dd { animation: apparait 0.35s ease-out both; }
@keyframes apparait { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.trame {
  display: block; height: 10px; border-radius: 3px; width: 70%; margin-top: 6px;
  background: linear-gradient(90deg, var(--filet) 0%, var(--filet-fort) 50%, var(--filet) 100%) 0 0 / 200% 100%;
  animation: trame 1.1s linear infinite;
}
.trame--courte { width: 45%; }
@keyframes trame { to { background-position: -200% 0; } }

/* Points de vigilance */
.vigilances__liste { list-style: none; padding: 0 20px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.vigilance { border-left: 3px solid var(--ambre); padding-left: 12px; display: grid; gap: 2px; align-content: start; }
.vigilance strong { font-weight: 500; color: var(--ambre-texte); }
.vigilance p { font-size: 15px; }
.vigilance--info { border-left-color: var(--bleu); }
.vigilance--info strong { color: var(--bleu-texte); }
.vigilance--attente { border-left-color: var(--filet); min-height: 64px; }

/* Pièce attendue */
.piece-attendue__corps { padding: 0 20px 20px; display: grid; gap: 14px; justify-items: start; }
.piece-attendue__corps strong { display: block; font-weight: 500; }
.piece-attendue__corps p { font-size: 15px; color: var(--encre-2); }
.piece-attendue__corps p strong { color: var(--encre); }

@media (max-width: 980px) {
  .rendezvous__grille, .rendezvous__suite { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .vigilances__liste { grid-template-columns: minmax(0, 1fr); }
  .fiche__champ { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .carnet { padding: 16px; }
}