/* Pilotage des appels · styles du module « Fiche d’appel » (fiche.js).
   Jetons et composants de la refonte : app.css ; contrat du socle : specs/front-v2.md.
   Volet à droite posé sur le fond de l'outil (--fond) avec ses cartes blanches bordées ; feuille plein écran sous 640 px.
   Empilement : voile 44, volet 45 (au-dessus des barres mobiles et du menu du compte, sous les toasts). */

/* ===== Voile et volet ===== */
.m-fiche-voile { position: fixed; inset: 0; z-index: 44; background: rgba(14, 22, 56, .36); animation: fondu var(--d-base) var(--c-standard); }
.m-fiche-voile.sortie { opacity: 0; transition: opacity var(--d-sortie) var(--c-standard); }
.m-fiche-volet {
  position: fixed; z-index: 45; top: 12px; right: 12px; bottom: 12px; width: min(640px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden; color: var(--texte);
  background: var(--fond); border: 1px solid var(--contour-carte); border-radius: var(--r-xl); box-shadow: var(--ombre-flottante);
  animation: m-fiche-entre var(--d-base) var(--c-sortie);
}
.m-fiche-volet:focus { outline: none; }
.m-fiche-volet.sortie { opacity: 0; transform: translateX(24px); transition: opacity var(--d-sortie) var(--c-standard), transform var(--d-sortie) var(--c-standard); }
@keyframes m-fiche-entre { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes m-fiche-monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Barre du volet : le titre de l'appel y passe quand l'en-tête sort de la vue */
.m-fiche-barre { flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 24px; background: var(--surface); border-bottom: 1px solid var(--contour-carte); }
.m-fiche-barre-titre {
  flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 0.9375rem/1.3 var(--police); letter-spacing: -0.008em; color: var(--texte-2); transition: color var(--d-rapide) var(--c-standard);
}
.m-fiche-barre.m-fiche-defile .m-fiche-barre-titre { color: var(--texte); }
.m-fiche-barre-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.m-fiche-lien-page {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: var(--r-m); white-space: nowrap;
  color: var(--accent); font: 600 0.875rem/1 var(--police); letter-spacing: 0; transition: background-color var(--d-rapide) var(--c-standard);
}
.m-fiche-lien-page svg { width: 16px; height: 16px; }
@media (hover: hover) { .m-fiche-lien-page:hover { background: var(--accent-teinte); text-decoration: none; } }
.m-fiche-fermer {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--remplissage); color: var(--texte); transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
.m-fiche-fermer svg { width: 18px; height: 18px; stroke-width: 2; }
@media (hover: hover) { .m-fiche-fermer:hover { background: var(--remplissage-survol); } }
.m-fiche-fermer:active { background: var(--remplissage-presse); transform: scale(.94); }

/* Corps : des cases bien séparées, cartes blanches sur le fond */
.m-fiche-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 16px; align-content: start;
  padding: 16px 16px 28px; scrollbar-width: thin;
}
.m-fiche-corps > .carte { padding: 20px 22px 22px; scroll-margin-top: 16px; }
.m-fiche-corps .carte-tete { margin-bottom: 14px; }
.m-fiche-corps .resume { font-size: 1rem; line-height: 1.6; }
.m-fiche-volet .bulle { max-width: 92%; scroll-margin: 24px; }

/* En-tête de l'appel : « Ligne Cassis · appel reçu » (couleur du sens : manqué rouge, en cours vert), puis le titre */
.m-fiche-tete .pastille svg, .m-fiche-etat svg { width: 14px; height: 14px; stroke-width: 2.2; }
.m-fiche-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.m-fiche-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font: 600 0.9375rem/1.4 var(--police); letter-spacing: -0.006em; color: var(--accent-texte); }
.m-fiche-ligne svg { flex: none; width: 16px; height: 16px; stroke-width: 2.2; color: var(--accent); }
.m-fiche-ligne-rouge { color: var(--rouge-texte); }
.m-fiche-ligne-rouge svg { color: var(--rouge); }
.m-fiche-ligne-vert { color: var(--vert-texte); }
.m-fiche-ligne-vert svg { color: var(--vert); }
/* Avatar de Léa : libre, détouré, rapport 170/192 (règle globale de app.css) */
.m-fiche-ligne-lea { flex: none; display: block; width: 28px; height: 32px; margin: -6px 0 -4px; }
.m-fiche-ligne-lea img, .m-fiche-lea-avatar img { display: block; width: 100%; height: 100%; }
.m-fiche-tete h2 { margin: 10px 0 0; font: 700 1.5rem/1.22 var(--police); letter-spacing: -0.022em; }
.m-fiche-cases { margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
/* Faits de l'en-tête : la ligne d'agence sur deux colonnes, sans case vide (3 colonnes, 2 sous 640 px) */
.m-fiche-tete .m-fiche-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-fiche-case-ligne { grid-column: span 2; }
/* Chiffres tabulaires d'Inter : ils élargissent aussi le trait d'union (« Sanary-sur-Mer ») ; noms et textes en chasse normale */
.m-fiche-case.m-fiche-case-ligne dd, .m-fiche-cases-lea .m-fiche-case dd { font-variant-numeric: normal; }
.m-fiche-case { min-width: 0; padding: 10px 12px 11px; border-radius: var(--r-m); background: var(--surface-inset); }
.m-fiche-case dt { font: 500 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-case dd { margin: 4px 0 0; font: 600 0.9375rem/1.35 var(--police); letter-spacing: -0.006em; color: var(--texte); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.m-fiche-case-detail { display: block; margin-top: 2px; font: 400 0.8125rem/1.4 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-actions { margin-top: 18px; }
.m-fiche-aide { margin: 8px 0 0; font: 400 0.8125rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-tete .alerte-fiche { margin-top: 18px; }

/* Pastilles à point de couleur : la couleur suit le texte de la pastille (même valeur, même couleur partout) */
.m-fiche-point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.m-fiche-ton-vert { background: var(--vert); }
.m-fiche-ton-ambre { background: var(--ambre); }
.m-fiche-ton-rose { background: var(--action); }
.m-fiche-ton-bleu { background: var(--accent); }
.m-fiche-ton-neutre { background: #A3A8BA; }
.m-fiche-ton-contour { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texte-3); }

/* Statut suggéré, puis validé : la valeur en grand, les décisions juste dessous */
.m-fiche-statut .carte-tete { align-items: center; }
.m-fiche-statut-valeur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pastille.m-fiche-grande { height: auto; min-height: 44px; padding: 9px 18px 9px 16px; gap: 10px; font: 650 1.1875rem/1.2 var(--police); letter-spacing: -0.014em; white-space: normal; }
.m-fiche-grande .m-fiche-point { width: 10px; height: 10px; }
.m-fiche-statut-detail { margin: 12px 0 0; max-width: 60ch; font: 400 0.875rem/1.5 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-statut-detail + .m-fiche-statut-detail { margin-top: 2px; }
.m-fiche-statut-actions { margin-top: 16px; }
.m-fiche-chevron { width: 16px; height: 16px; transition: transform var(--d-rapide) var(--c-sortie); }
[aria-expanded="true"] > .m-fiche-chevron { transform: rotate(180deg); }
.m-fiche-choix { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; animation: fondu var(--d-rapide) var(--c-standard); }
.m-fiche-option {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--contour-carte); border-radius: var(--r-m);
  background: var(--surface); color: var(--texte); font: 500 0.9375rem/1.3 var(--police); letter-spacing: -0.006em; text-align: left; cursor: pointer;
  transition: background-color var(--d-rapide) var(--c-standard), border-color var(--d-rapide) var(--c-standard);
}
@media (hover: hover) { .m-fiche-option:hover { background: var(--survol-ligne); border-color: var(--separateur-fort); } }
.m-fiche-option:active { background: var(--remplissage); }
.m-fiche-option:disabled { opacity: .5; cursor: default; }
.m-fiche-option[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-teinte); color: var(--accent-texte); font-weight: 600; }
.m-fiche-option-texte { min-width: 0; }
.m-fiche-option-note { margin-left: auto; font: 500 0.8125rem/1 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-option[aria-current="true"] .m-fiche-option-note { color: var(--accent-texte); }
.m-fiche-option-coche { margin-left: auto; width: 16px; height: 16px; color: var(--accent); stroke-width: 2.4; }
.m-fiche-option-note + .m-fiche-option-coche { margin-left: 0; }

/* Ressenti du client */
.m-fiche-cases-ressenti { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Renseignements notés par Léa : avatar libre devant le titre, valeurs deux par deux, longues sur toute la largeur */
.carte-tete.m-fiche-lea-tete { justify-content: flex-start; align-items: center; gap: 12px; }
.m-fiche-lea-avatar { flex: none; display: block; width: 39px; height: 44px; margin: -6px 0 -6px -2px; }
.m-fiche-cases-lea { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-fiche-case-large { grid-column: 1 / -1; }
.m-fiche-lea-note { margin: 12px 0 0; font: 400 0.8125rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); }

/* Points clés : une ligne par point, séparées d'un filet */
.m-fiche-points { list-style: none; margin: 0; padding: 0; display: grid; }
.m-fiche-points li { display: flex; gap: 12px; padding: 10px 0; font: 400 0.9375rem/1.5 var(--police); }
.m-fiche-points li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--accent); }
.m-fiche-points li:first-child { padding-top: 0; }
.m-fiche-points li:last-child { padding-bottom: 0; }
.m-fiche-points li + li { border-top: 1px solid var(--separateur); }

/* Opportunités compactes */
.m-fiche-opps { display: grid; gap: 10px; }
.m-fiche-opp { display: grid; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: var(--r-l); background: var(--surface-inset); }
.m-fiche-opp-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.m-fiche-opp h3 { margin: 0; font: 650 1rem/1.4 var(--police); letter-spacing: -0.01em; }
.m-fiche-opp .champ-statut select { height: 40px; }
.m-fiche-faits { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.m-fiche-faits:empty { display: none; }

/* Qualité */
.m-fiche-qualite .qualite-score { font-size: 2.75rem; }
.m-fiche-qualite .sous-titre { margin-top: 16px; }

/* Écoute et transcription, repliées */
.m-fiche-corps > .carte.m-fiche-ecoute { padding: 0; }
.m-fiche-depli-h { margin: 0; font: inherit; }
.m-fiche-depli {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 16px 22px; border: 0; border-radius: var(--r-xl);
  background: none; color: var(--texte); text-align: left; cursor: pointer; transition: background-color var(--d-rapide) var(--c-standard);
}
@media (hover: hover) { .m-fiche-depli:hover { background: var(--survol-ligne); } }
.m-fiche-depli:focus-visible { outline-offset: -2px; }
.m-fiche-depli[aria-expanded="true"] { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.m-fiche-depli-texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m-fiche-depli-titre { font: 700 1.125rem/1.3 var(--police); letter-spacing: -0.016em; }
.m-fiche-depli-sous { font: 400 0.8125rem/1.4 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-depli .m-fiche-chevron { width: 20px; height: 20px; color: var(--texte-3); }
.m-fiche-ecoute-corps { display: grid; gap: 16px; padding: 4px 22px 22px; animation: fondu var(--d-base) var(--c-standard); }
.m-fiche-note { margin: 0; font: 400 0.875rem/1.5 var(--police); letter-spacing: 0; color: var(--texte-2); }

/* Lecteur épinglé en bas du volet pendant l'écoute */
.m-fiche-lecteur { flex: none; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px 10px 20px; background: var(--surface); border-top: 1px solid var(--contour-carte); }
.m-fiche-lecteur-titre { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 600 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-fiche-lecteur-titre svg { width: 14px; height: 14px; color: var(--accent); }
.m-fiche-lecteur audio { flex: 1; min-width: 0; height: 40px; }

/* Pied : page complète et journal */
.m-fiche-pied { display: grid; justify-items: start; gap: 4px; padding: 4px 8px 0; }
.m-fiche-pied .note-journal { margin: 0; }

/* Chargement et erreur */
.m-fiche-chargement { display: grid; gap: 16px; }
.m-fiche-carte-sq { display: grid; gap: 14px; }
.m-fiche-sq { max-width: 100%; border-radius: 8px; }
.m-fiche-corps > .carte.carte-erreur { margin: 24px 0 0; max-width: none; padding: 36px 28px 32px; }

/* ===== Page complète : statut et ressenti sous l'en-tête, mêmes colonnes que la fiche (une carte seule prend la colonne de gauche) ===== */
.m-fiche-page { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }

/* ===== Adaptations ===== */
@media (max-width: 1279px) { .m-fiche-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1099px) { .m-fiche-page { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .m-fiche-page { margin-top: 12px; } }
@media (max-width: 640px) {
  /* Feuille plein écran : la barre du volet prend la place de la barre du haut */
  .m-fiche-volet { inset: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; animation-name: m-fiche-monte; }
  .m-fiche-volet.sortie { transform: translateY(16px); }
  .m-fiche-barre { min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px; }
  .m-fiche-corps { gap: 12px; padding: 12px 12px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .m-fiche-corps > .carte { padding: 18px 16px; }
  .m-fiche-tete h2 { font-size: 1.3125rem; letter-spacing: -0.02em; }
  .m-fiche-tete .m-fiche-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-fiche-actions .btn, .m-fiche-statut-actions .btn:not(.btn-petit) { flex: 1 1 auto; height: 44px; }
  .m-fiche-cases-ressenti > .m-fiche-case:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pastille.m-fiche-grande { font-size: 1.125rem; }
  .m-fiche-opp { padding: 14px; }
  .m-fiche-opp .champ-statut { width: 100%; }
  .m-fiche-opp .champ-statut select { flex: 1; min-width: 0; }
  .m-fiche-depli { padding: 14px 16px; }
  .m-fiche-ecoute-corps { padding: 2px 16px 18px; }
  .m-fiche-pied { padding-inline: 4px; }
  .m-fiche-corps > .carte.carte-erreur { padding: 28px 20px 24px; }
  .m-fiche-lecteur { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .m-fiche-lecteur-titre > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .m-fiche-voile, .m-fiche-volet { animation: fondu var(--d-rapide) linear; }
  .m-fiche-volet.sortie { transform: none; }
  .m-fiche-choix, .m-fiche-ecoute-corps { animation: none; }
  .m-fiche-chevron, .m-fiche-fermer, .m-fiche-option, .m-fiche-depli { transition: none; }
  .m-fiche-fermer:active { transform: none; }
}