/* ============================================================================
   ecran-dictee.css - Complément de l'écran Dictée (template CAPTURE).
   Dépend de tokens.css et app.css. Aucune valeur hors token, aucune couleur
   en dur, aucune ressource externe. Toutes les classes sont préfixées.
   ========================================================================== */

/* --- 1. Panneau de capture (états 1, 2 et transcription) ------------------ */

.ecran-dictee__capture {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--gouttiere);
  margin-bottom: var(--carte-gap);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-1);
  text-align: center;
}

.ecran-dictee__capture--actif { border-color: var(--ligne-forte); }

/* Bouton micro : c'est l'action primaire de l'écran - donc le seul endroit
   où l'accent client apparaît ici (usage n°1, cf. CONTRAT §2). */
.ecran-dictee__micro {
  width: calc(var(--sp-12) * 2);
  height: calc(var(--sp-12) * 2);
  padding: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--ombre-1);
}
.ecran-dictee__micro .icone {
  width: var(--sp-8);
  height: var(--sp-8);
  stroke-width: 1.5;
}

.ecran-dictee__legende {
  font-size: var(--fs-corps);
  font-weight: var(--gras-titre);
  letter-spacing: -.01em;
}

.ecran-dictee__aide {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
  max-width: 36ch;
}

.ecran-dictee__etat-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.ecran-dictee__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
}
.ecran-dictee__pied .btn { flex: 0 1 auto; min-width: 0; }

/* --- 2. Onde d'enregistrement (CSS pur, aucune image) --------------------- */

.ecran-dictee__onde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: var(--sp-12);
  width: 100%;
}

.ecran-dictee__barre {
  --amp: .55;
  width: var(--sp-1);
  height: 100%;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--encre-douce);
  transform-origin: center;
  transform: scaleY(var(--amp));
  animation: ecran-dictee-onde calc(var(--duree-3) * 4) var(--courbe) infinite;
}

/* Amplitudes et décalages fixes : la silhouette reste lisible même quand
   l'animation est neutralisée (prefers-reduced-motion). */
.ecran-dictee__barre:nth-child(6n+1) { --amp: .30; animation-delay: 0s; }
.ecran-dictee__barre:nth-child(6n+2) { --amp: .62; animation-delay: calc(var(--duree-1) * .5); }
.ecran-dictee__barre:nth-child(6n+3) { --amp: 1;   animation-delay: calc(var(--duree-1) * 1); }
.ecran-dictee__barre:nth-child(6n+4) { --amp: .48; animation-delay: calc(var(--duree-1) * 1.5); }
.ecran-dictee__barre:nth-child(6n+5) { --amp: .82; animation-delay: calc(var(--duree-1) * 2); }
.ecran-dictee__barre:nth-child(6n+6) { --amp: .38; animation-delay: calc(var(--duree-1) * 2.5); }

@keyframes ecran-dictee-onde {
  0%, 100% { transform: scaleY(calc(var(--amp) * .34)); }
  50%      { transform: scaleY(var(--amp)); }
}

/* --- 3. Chrono ------------------------------------------------------------ */

.ecran-dictee__chrono {
  font-family: var(--police-chiffres);
  font-size: var(--fs-titre);
  font-weight: var(--gras-titre);
  letter-spacing: .02em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.ecran-dictee__chrono--discret { color: var(--encre-douce); }

/* --- 4. Squelette de transcription ---------------------------------------- */

.ecran-dictee__squelette {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) 0;
}

.ecran-dictee__squelette-barre {
  display: block;
  height: var(--sp-3);
  border-radius: var(--r-1);
  background: var(--surface-appui);
  animation: ecran-dictee-pulse calc(var(--duree-3) * 6) var(--courbe) infinite;
}
.ecran-dictee__squelette-barre:nth-child(2) { width: 92%; animation-delay: calc(var(--duree-1) * 1); }
.ecran-dictee__squelette-barre:nth-child(3) { width: 97%; animation-delay: calc(var(--duree-1) * 2); }
.ecran-dictee__squelette-barre:nth-child(4) { width: 64%; animation-delay: calc(var(--duree-1) * 3); }

@keyframes ecran-dictee-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* --- 5. Historique des dernières dictées ---------------------------------- */

.ecran-dictee__historique {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ecran-dictee__historique > li { display: flex; }

.ecran-dictee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: calc(var(--cible) + var(--sp-3));
  padding: var(--sp-2) var(--carte-pad);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  color: var(--encre);
  box-shadow: var(--ombre-1);
  transition: background var(--duree-1) var(--courbe);
}
.ecran-dictee__item:hover { background: var(--surface-creuse); }

.ecran-dictee__item-corps { flex: 1 1 auto; min-width: 0; }

.ecran-dictee__item-titre {
  display: block;
  font-size: var(--fs-corps);
  font-weight: var(--gras-titre);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecran-dictee__item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1);
}

.ecran-dictee__item-quand {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

.ecran-dictee__item-chevron { color: var(--ligne-forte); flex: none; }

/* --- 6. États d'exception (micro refusé, enregistrement trop court) ------- */

.ecran-dictee__exception {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
}

.ecran-dictee__exception-marque {
  width: calc(var(--sp-5) * 2);
  height: calc(var(--sp-5) * 2);
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--alerte-fond);
  color: var(--alerte-encre);
}

.ecran-dictee__exception-titre {
  font-size: var(--fs-titre);
  font-weight: var(--gras-titre);
  letter-spacing: -.012em;
}

.ecran-dictee__exception-texte {
  margin: var(--sp-2) auto var(--sp-4);
  max-width: 38ch;
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre-douce);
}

/* --- 7. Validation : champs structurés éditables -------------------------- */

.ecran-dictee__corps { display: block; }

.ecran-dictee__champ + .ecran-dictee__champ { margin-top: var(--sp-3); }

.ecran-dictee__champ .champ-saisie { resize: vertical; }
/* La flèche native du select est conservée : elle signale que le champ
   ouvre une liste, sans introduire d'image ni de couleur hors token. */
.ecran-dictee__champ select.champ-saisie { min-height: var(--cible); }

/* --- 8. Encart « Ce qui va changer sur la fiche » (le diff) ---------------- */

.ecran-dictee__diff { display: block; }

.ecran-dictee__cible {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}
.ecran-dictee__cible strong { color: var(--encre); font-weight: var(--gras-titre); }

.ecran-dictee__diff-liste {
  display: grid;
  gap: var(--sp-2);
}

.ecran-dictee__diff-ligne {
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-creuse);
  border: 1px solid var(--ligne);
  border-radius: var(--r-1);
}

.ecran-dictee__diff-tete {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.ecran-dictee__diff-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-meta);
  font-weight: var(--gras-titre);
  color: var(--encre-douce);
}

.ecran-dictee__valeur {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ecran-dictee__valeur--avant {
  background: var(--surface);
  color: var(--encre-douce);
}
.ecran-dictee__valeur--apres {
  margin-top: var(--sp-1);
  background: var(--succes-fond);
  color: var(--succes-encre);
  font-weight: var(--gras-appui);
}

.ecran-dictee__marque {
  flex: none;
  font-family: var(--police-chiffres);
  font-weight: var(--gras-titre);
}

.ecran-dictee__valeur-texte { flex: 1 1 auto; min-width: 0; }

.ecran-dictee__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

/* --- 9. Transcription (feuille basse) ------------------------------------- */

.ecran-dictee__transcription {
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre);
  padding: var(--sp-3);
  background: var(--surface-creuse);
  border-left: 2px solid var(--ligne-forte);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}

/* --- 10. Garde-fou 320 px -------------------------------------------------- */

@media (max-width: 359px) {
  .ecran-dictee__capture { padding: var(--sp-5) var(--sp-3); }
  .ecran-dictee__micro {
    width: calc(var(--sp-8) * 2.5);
    height: calc(var(--sp-8) * 2.5);
  }
  .ecran-dictee__pied .btn { width: 100%; }
}

/* ===========================================================================
   OBJETS DE LA BASE (spec §5 S4) - confirmation avant écriture.

   Une dictée touche plusieurs objets ; chacun est un bloc distinct, avec sa
   case à cocher. Décocher doit se VOIR : le bloc s'éteint et dit ce qu'il
   advient de lui, sinon l'utilisateur ne sait pas ce qu'il vient d'exclure.
   ======================================================================== */

.ecran-dictee__objets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.ecran-dictee__objet {
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  background: var(--surface);
  overflow: hidden;
  transition: opacity var(--duree-1) var(--courbe);
}

/* Exclu : atténué mais TOUJOURS lisible (jamais sous 4.5:1) - on doit pouvoir
   relire ce qu'on écarte avant de confirmer. */
.ecran-dictee__objet.est-exclu { background: var(--surface-creuse); }
.ecran-dictee__objet.est-exclu .ecran-dictee__diff-liste { opacity: .55; }

.ecran-dictee__objet-tete {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--ligne);
  background: var(--surface-creuse);
  min-height: var(--cible);
}

/* Toute la tête est cliquable : la cible dépasse largement 44 px. */
.ecran-dictee__objet-tete--case { cursor: pointer; }
.ecran-dictee__objet-tete--case:focus-within {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}

.ecran-dictee__objet-tete input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 0 var(--sp-1) 0 0;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

.ecran-dictee__objet-type {
  flex: none;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--info-fond);
  color: var(--info-encre);
  font-size: var(--fs-meta);
  font-weight: var(--gras-appui);
}

.ecran-dictee__objet-nom {
  min-width: 0;
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  color: var(--encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecran-dictee__objet .ecran-dictee__diff-liste { margin: 0; padding: var(--sp-2) var(--sp-3); }

.ecran-dictee__objet-exclu {
  margin: 0;
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--alerte-encre);
}

@media (max-width: 479px) {
  .ecran-dictee__objet-tete { flex-wrap: wrap; }
  .ecran-dictee__objet-nom { white-space: normal; flex-basis: 100%; }
}