/* etudes-cas.css — styles isolés pour le module Études de cas interactives */
/* Ne pas importer dans global.css */

/* ======================================================
   LAYOUT PAGES
====================================================== */

.ec-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ec-page-header h1 {
  margin: 0 0 6px 0;
  font-family: var(--font-titres);
  color: var(--c-titre);
  font-size: 24px;
}

.ec-page-header p {
  margin: 0;
  color: var(--c-texte-secondaire);
  font-size: 15px;
}

.ec-creation-layout {
  max-width: 1180px;
}

.ec-creation-layout .ec-page-header,
.ec-creation-layout .ec-bandeau-modeles,
.ec-creation-layout .ec-formulaire-section {
  width: 100%;
  box-sizing: border-box;
}

/* ======================================================
   FORMULAIRE DE CRÉATION
====================================================== */

.ec-formulaire-section {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  max-width: 860px;
}

.ec-creation-layout .ec-formulaire-section {
  max-width: none;
}

.ec-form-groupe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.ec-form-groupe label {
  font-weight: 500;
  font-size: 14px;
  color: var(--c-texte);
}

.ec-form-groupe input,
.ec-form-groupe textarea,
.ec-form-groupe select {
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-corps);
  color: var(--c-texte);
  background: var(--c-fond);
  resize: vertical;
  transition: border-color 0.15s;
}

.ec-form-groupe input:focus,
.ec-form-groupe textarea:focus,
.ec-form-groupe select:focus {
  outline: none;
  border-color: var(--c-primaire);
}

.ec-form-ligne-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ec-creation-layout .ec-form-ligne-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .ec-form-ligne-2col {
    grid-template-columns: 1fr;
  }

  .ec-creation-layout .ec-form-ligne-2col {
    grid-template-columns: 1fr;
  }
}

.ec-requis {
  color: var(--c-danger, #c0392b);
  margin-left: 2px;
}

.ec-optionnel {
  font-weight: 400;
  color: var(--c-texte-secondaire);
  font-size: 13px;
}

.ec-genre-choix {
  display: flex;
  gap: 12px;
}

.ec-genre-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-texte-principal, #1a1a2e);
  background: var(--c-surface-2, #f7f8fa);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.ec-genre-option input[type="radio"] {
  accent-color: var(--c-primaire);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ec-genre-option:has(input:checked) {
  border-color: var(--c-primaire);
  background: color-mix(in srgb, var(--c-primaire) 8%, white);
}

.ec-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border-subtle);
}

.ec-message-erreur {
  background: var(--c-danger-light);
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-surface-1));
  color: var(--c-danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 8px;
}

.ec-message-attente {
  background: var(--c-bleu-100, #eef4fb);
  border: 1px solid var(--c-bleu-200, #c3d9f3);
  color: var(--c-bleu-800, #1a3a5c);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 8px;
}

/* ======================================================
   BANDEAU MODÈLES PRÉ-REMPLIS — creation.html
====================================================== */

.ec-bandeau-modeles {
  background: linear-gradient(135deg, var(--c-bleu-900) 0%, #1a4a8a 55%, var(--c-bleu-500) 100%);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 24px;
  max-width: 860px;
  position: relative;
  overflow: hidden;
}

.ec-creation-layout .ec-bandeau-modeles {
  max-width: none;
}

.ec-bandeau-modeles::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

.ec-bandeau-modeles::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: 60px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.ec-bandeau-modeles-entete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.ec-bandeau-modeles-icone {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.ec-bandeau-modeles-titre {
  font-family: var(--font-titres);
  font-size: 20px;
  color: #fff;
  margin: 0 0 5px 0;
}

.ec-bandeau-modeles-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  margin: 0;
  line-height: 1.5;
}

.ec-bandeau-modeles-champs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.ec-creation-layout .ec-bandeau-modeles-champs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .ec-bandeau-modeles-champs {
    grid-template-columns: 1fr 1fr;
  }

  .ec-creation-layout .ec-bandeau-modeles-champs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .ec-bandeau-modeles {
    padding: 20px 18px;
  }
  .ec-bandeau-modeles-champs {
    grid-template-columns: 1fr;
  }

  .ec-creation-layout .ec-bandeau-modeles-champs {
    grid-template-columns: 1fr;
  }
}

.ec-bandeau-champ-groupe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-bandeau-champ-groupe label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ec-bandeau-champ-groupe input[type="text"] {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-corps);
  color: var(--c-bleu-900);
  background: rgba(255,255,255,0.95);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ec-bandeau-champ-groupe input[type="text"]::placeholder {
  color: #8ba0b8;
}

.ec-bandeau-champ-groupe input[type="text"]:focus {
  outline: none;
  border-color: var(--c-jaune-900, #f1c815);
  box-shadow: 0 0 0 3px rgba(241,200,21,0.35);
}

.ec-bandeau-modeles-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-bandeau-generer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--c-jaune-900, #f1c815);
  color: var(--c-bleu-900, #08234D);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-corps);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn-bandeau-generer:hover {
  background: #d9b40f;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.btn-bandeau-generer:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.ec-bandeau-champ-contexte {
  margin-bottom: 20px;
}

.ec-bandeau-champ-contexte textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-corps);
  color: var(--c-bleu-900);
  background: rgba(255,255,255,0.95);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ec-bandeau-champ-contexte textarea::placeholder {
  color: #8ba0b8;
}

.ec-bandeau-champ-contexte textarea:focus {
  outline: none;
  border-color: var(--c-jaune-900, #f1c815);
  box-shadow: 0 0 0 3px rgba(241,200,21,0.35);
}

.ec-bandeau-optionnel {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0;
}

.ec-bandeau-feedback {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

.ec-bandeau-feedback--erreur {
  color: #fbbf24;
}

@keyframes ec-bm-spin {
  to { transform: rotate(360deg); }
}

.ec-bm-spinner {
  animation: ec-bm-spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* ======================================================
   LISTE DES ÉTUDES DE CAS
====================================================== */

.ec-liste-section {
  margin-top: 8px;
}

.ec-chargement {
  color: var(--c-texte-secondaire);
  font-size: 14px;
  padding: 24px 0;
}

.ec-vide {
  text-align: center;
  padding: 48px 24px;
  color: var(--c-texte-secondaire);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ec-limite-banner {
  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-surface-1));
  border: 1px solid color-mix(in srgb, var(--c-warning) 50%, var(--c-surface-1));
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--c-warning) 80%, black);
}

.ec-limite-banner a {
  color: var(--c-primaire);
  font-weight: 500;
}

/* Grille de cartes */
#ec-liste-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.ec-carte {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-carte-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ec-carte-date {
  font-size: 12px;
  color: var(--c-texte-secondaire);
}

.ec-carte-titre {
  margin: 0;
  font-size: 16px;
  font-family: var(--font-titres);
  color: var(--c-titre);
  line-height: 1.3;
}

.ec-carte-meta {
  margin: 0;
  font-size: 13px;
  color: var(--c-texte-secondaire);
}

.ec-carte-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-subtle);
}

/* Badges de statut */
.ec-statut {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.ec-statut--draft        { background: var(--c-slate-200); color: var(--c-slate-700); }
.ec-statut--scenario     { background: var(--c-bleu-100); color: var(--c-bleu-900); }
.ec-statut--approved     { background: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface-1)); color: color-mix(in srgb, var(--c-warning) 80%, black); }
.ec-statut--generating   { background: color-mix(in srgb, var(--c-success) 15%, var(--c-surface-1)); color: var(--c-success); }
.ec-statut--ready        { background: #d1ecf1; color: #0c5460; }
.ec-statut--failed       { background: var(--c-danger-light); color: var(--c-danger); }

/* Bouton danger discret */
.btn-danger-discret {
  background: none;
  border: 1px solid transparent;
  color: var(--c-texte-secondaire);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-danger-discret:hover {
  color: var(--c-danger);
  border-color: var(--c-danger);
}

.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ======================================================
   ÉDITEUR DE SCÉNARIO
====================================================== */

/* Spinner génération IA */
.ec-generation-encours[hidden] {
  display: none;
}

.ec-generation-encours {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 24px;
  color: var(--c-texte-secondaire);
}

.ec-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--c-border);
  border-top-color: var(--c-primaire);
  border-radius: 50%;
  animation: ec-spin 0.8s linear infinite;
}

@keyframes ec-spin {
  to { transform: rotate(360deg); }
}

.ec-generation-message {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-texte);
  margin: 0;
  text-align: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ec-generation-message--fade {
  opacity: 0;
  transform: translateY(3px);
}

.ec-generation-sous-message {
  font-size: 13px;
  margin: 0;
}

/* Bandeau informatif */
.ec-bandeau-info {
  background: var(--c-bleu-50);
  border: 1px solid var(--c-bleu-200);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-bleu-800);
  margin-bottom: 24px;
}

.ec-icone-verrou-inline {
  font-style: normal;
}

/* Sections du scénario */
.ec-section-scenario {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.ec-section-titre {
  font-family: var(--font-titres);
  font-size: 17px;
  color: var(--c-titre);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border-subtle);
}

.ec-section-titre--toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.ec-section-titre--toggle::before {
  content: "▶";
  font-size: 11px;
  color: var(--c-bleu-500, #6999d8);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.ec-section-titre--toggle.ec-section-titre--ouvert {
  margin-bottom: 20px;
}

.ec-section-titre--toggle.ec-section-titre--ouvert::before {
  transform: rotate(90deg);
}

.ec-section-corps-principal {
  padding-top: 4px;
}

.ec-section-aide {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  margin: -12px 0 16px 0;
}

/* Champ générique */
.ec-champ-scenario {
  margin-bottom: 18px;
}

.ec-champ-scenario:last-child {
  margin-bottom: 0;
}

.ec-champ-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--c-texte);
  margin-bottom: 6px;
}

.ec-champ-input,
.ec-champ-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-corps);
  color: var(--c-texte);
  background: var(--c-fond);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.ec-champ-input:focus,
.ec-champ-textarea:focus {
  outline: none;
  border-color: var(--c-primaire);
}

/* Personnages — layout vertical : ligne haute + détails */
.ec-personnage-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border-subtle);
}

.ec-personnage-item:last-child {
  border-bottom: none;
}

.ec-genre-notice {
  font-size: 13px;
  color: var(--c-bleu-700);
  background: var(--c-bleu-100);
  border-left: 3px solid var(--c-bleu-500);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Ligne haute : nom · poste · genre · photos */
.ec-perso-ligne-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ec-perso-input-nom {
  flex: 1 1 160px;
  min-width: 120px;
}

.ec-perso-role-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-texte-secondaire, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ec-perso-input-role {
  width: 100%;
  max-width: 100%;
}

.ec-perso-ligne-haut .ec-genre-select {
  flex: 0 0 auto;
  width: 130px;
}

/* Photo picker dans la ligne haute */
.ec-perso-photo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
}

/* Colonne info (nom dropdown + rôle) à droite des photos */
.ec-perso-info-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 160px;
}

.ec-perso-nom-select {
  width: 100%;
}

.ec-photo-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-texte-secondaire);
  margin: 0;
  white-space: nowrap;
}

.ec-photo-picker-aide {
  font-size: 11px;
  color: var(--c-texte-secondaire);
  margin: 0;
  line-height: 1.4;
}

.ec-photo-picker-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-photo-picker-grid {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.ec-btn-autres-photos {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-bleu-500);
  background: none;
  border: 1px solid var(--c-bleu-500);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ec-btn-autres-photos:hover {
  background: color-mix(in srgb, var(--c-bleu-500) 10%, transparent);
}

.ec-photo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  border: 2px solid var(--c-border-subtle);
  border-radius: 8px;
  padding: 0;
  background: var(--c-fond);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  overflow: hidden;
}

.ec-photo-option:hover {
  border-color: var(--c-bleu-500);
  background: color-mix(in srgb, var(--c-bleu-500) 5%, var(--c-fond));
  overflow: visible;
  position: relative;
  z-index: 10;
}

.ec-photo-option--selectionne {
  border-color: var(--c-primaire);
  background: color-mix(in srgb, var(--c-primaire) 6%, var(--c-fond));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primaire) 20%, transparent);
}

.ec-photo-option--grisee {
  opacity: 0.35;
  cursor: not-allowed;
}

.ec-photo-option--grisee:hover {
  border-color: var(--c-border-subtle);
  background: var(--c-fond);
  box-shadow: none;
}

/* Radio caché — le label entier est cliquable */
.ec-photo-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ec-photo-option-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  display: block;
  background: var(--c-surface-2);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}

.ec-photo-option:hover .ec-photo-option-img {
  transform: scale(2);
  transform-origin: top center;
  z-index: 11;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Fallback si l'image est absente */
.ec-photo-option--sans-img .ec-photo-option-img {
  visibility: hidden;
}

.ec-photo-option-nom {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-texte-secondaire);
  text-align: center;
  line-height: 1.3;
  padding: 0 2px;
  word-break: break-word;
}

.ec-photo-option--selectionne .ec-photo-option-nom {
  color: var(--c-primaire);
  font-weight: 600;
}

@media (max-width: 720px) {
  .ec-perso-ligne-haut {
    flex-direction: column;
    align-items: stretch;
  }
  .ec-perso-input-role {
    width: 100%;
  }
  .ec-perso-photo-col {
    align-items: center;
  }
  .ec-perso-info-col {
    width: 100%;
  }
}

/* Labels statiques pour personnages verrouillés */
.ec-personnage-nom {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-texte);
}

.ec-personnage-role {
  font-size: 14px;
  color: var(--c-texte-secondaire);
}

/* Tag genre — personnages (éditeur, aperçu, joueur) */
.ec-genre-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.6;
  text-transform: uppercase;
}
.ec-genre-tag--f {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #f9a8d4;
}
.ec-genre-tag--m {
  background: #dbeafe;
  color: #1e3a5f;
  border: 1px solid #93c5fd;
}

/* Select genre dans l'éditeur */
.ec-genre-select {
  width: fit-content;
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 6px;
  background: var(--c-surface-1, #fff);
  color: var(--c-texte);
  cursor: pointer;
}
.ec-genre-select:focus {
  outline: 2px solid var(--c-bleu-500);
  outline-offset: 1px;
}

/* Critères de réussite */
.ec-liste-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ec-critere-item {
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 14px;
  color: var(--c-texte);
  border-bottom: 1px solid var(--c-border-subtle);
}

.ec-critere-item:last-child {
  border-bottom: none;
}

.ec-critere-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-primaire);
  font-weight: 700;
}

/* Cartes de scène */
.ec-liste-scenes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ec-scene-card {
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  background: var(--c-fond);
}

.ec-scene-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ec-scene-numero {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-texte);
  white-space: nowrap;
}

.ec-scene-type {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ec-scene-type--narration   { background: #e3f2fd; color: #1565c0; }
.ec-scene-type--decision    { background: #fff3e0; color: #e65100; }
.ec-scene-type--document    { background: #f3e5f5; color: #6a1b9a; }
.ec-scene-type--email       { background: #e8f5e9; color: #2e7d32; }
.ec-scene-type--post_social { background: #fce4ec; color: #880e4f; }
.ec-scene-type--retroaction { background: #e0f7fa; color: #006064; }

.ec-verrou-badge {
  font-size: 13px;
  margin-left: auto;
  opacity: 0.6;
  cursor: default;
}

/* Champ verrouillé */
.ec-champ-locked {
  background: var(--c-surface-2, #f4f6f9);
  color: var(--c-texte-secondaire);
  cursor: not-allowed;
  border-style: dashed;
}

/* Critères éditables — input pleine largeur dans le li */
.ec-critere-item .ec-champ-input {
  width: 100%;
}

/* Feedback sauvegarde */
.ec-sauvegarde-succes {
  background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface-1));
  border: 1px solid color-mix(in srgb, var(--c-success) 40%, var(--c-surface-1));
  color: var(--c-success);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Actions bas de page */
.ec-editeur-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  max-width: 860px;
}

.ec-editeur-actions-droite {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ec-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@keyframes ec-scintille {
  0%, 100% { box-shadow: 0 0 0 0 rgba(105, 153, 216, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(105, 153, 216, 0); }
}

.btn--scintille {
  animation: ec-scintille 1.5s ease-in-out infinite;
}

/* ======================================================
   APERÇU ENSEIGNANT
====================================================== */

.ec-apercu-meta-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.ec-apercu-meta-grille > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-apercu-meta-grille strong {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-texte-secondaire);
}

.ec-apercu-meta-grille span {
  font-size: 14px;
  color: var(--c-texte);
}

.ec-apercu-meta-bloc {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-apercu-meta-bloc strong {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-texte-secondaire);
}

.ec-apercu-meta-texte {
  font-size: 14px;
  color: var(--c-texte);
  line-height: 1.6;
  margin: 0;
}

.ec-url-partage-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: var(--c-fond);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
}

.ec-url-partage-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ec-url-partage-texte {
  flex: 1 1 260px;
  font-size: 13px;
  font-family: monospace;
  color: var(--c-texte);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.ec-qr-partage {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--c-border-subtle);
  padding-top: 12px;
}

.ec-qr-partage[hidden] {
  display: none;
}

.ec-qr-partage-code {
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 8px;
}

.ec-qr-partage-code canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.ec-qr-partage-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ec-qr-partage-info strong {
  font-size: 13px;
  color: var(--c-titre);
}

.ec-qr-partage-info span {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .ec-url-partage-ligne {
    flex-direction: column;
    align-items: stretch;
  }

  .ec-url-partage-ligne .btn {
    width: 100%;
  }

  .ec-qr-partage {
    align-items: flex-start;
  }
}

.ec-copier-feedback {
  color: var(--c-success) !important;
  font-weight: 500;
}

.ec-section-scenario--wide {
  max-width: none;
}

.ec-scene-apercu {
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  background: var(--c-fond);
  margin-bottom: 16px;
}

.ec-scene-apercu:last-child {
  margin-bottom: 0;
}

.ec-apercu-scene-titre {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-titre);
  flex: 1;
  text-align: right;
}

.ec-apercu-bloc {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.ec-apercu-bloc--narratif {
  background: var(--c-surface-1);
  border-left: 3px solid var(--c-primaire);
}

.ec-apercu-bloc--consigne {
  background: #fff8e1;
  border-left: 3px solid #f0b429;
}

.ec-apercu-bloc--theorie {
  background: #f3e5f5;
  border-left: 3px solid #9c27b0;
}

.ec-apercu-bloc--choix {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
}

.ec-apercu-bloc-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-texte-secondaire);
  margin: 0 0 8px 0;
}

.ec-apercu-bloc-texte {
  margin: 0;
  line-height: 1.6;
  color: var(--c-texte);
}

.ec-apercu-choix-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-apercu-choix-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--c-fond);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
}

.ec-apercu-choix-label {
  font-weight: 500;
  color: var(--c-texte);
  font-size: 14px;
}

.ec-apercu-choix-retroaction {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  font-style: italic;
}

/* --------------------------------------------------
   RÔLE NARRATIF — badge dans l'en-tête de scène
-------------------------------------------------- */

.ec-scene-role-narratif {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-texte-secondaire);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* --------------------------------------------------
   SECTION ENSEIGNANT — champs éditables (apercu)
-------------------------------------------------- */

.ec-apercu-bloc--enseignant {
  margin-top: 12px;
  border: 1px dashed #b0bec5;
  border-radius: var(--radius-md);
  background: #f9fbfc;
  overflow: hidden;
}

.ec-apercu-enseignant-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #546e7a;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.ec-apercu-enseignant-titre::before {
  content: "✎";
  font-size: 14px;
  opacity: 0.7;
}

.ec-apercu-enseignant-corps {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ec-apercu-champ-enseignant {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-apercu-champ-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-texte-secondaire);
}

.ec-apercu-champ-aide {
  font-size: 12px;
  color: #90a4ae;
  margin: 0;
  font-style: italic;
}

.ec-apercu-textarea {
  width: 100%;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font-corps);
  color: var(--c-texte);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.ec-apercu-textarea:focus {
  outline: none;
  border-color: var(--c-bleu-500);
}

.ec-apercu-enseignant-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ec-enseignant-feedback {
  font-size: 13px;
  color: #2e7d32;
}

/* ======================================================
   LECTEUR APPRENANT — Parcours d'analyse
   Page publique /etudes-cas/joueur.html
====================================================== */

.ec-joueur-page {
  color-scheme: light;
  --c-bleu-50: #f2f7ff;
  --c-bleu-100: #dceafe;
  --c-bleu-200: #89acda;
  --c-bleu-400: #7fa7dc;
  --c-bleu-500: #6999D8;
  --c-bleu-600: #3f73c8;
  --c-bleu-700: #275aa6;
  --c-bleu-800: #123d78;
  --c-bleu-900: #08234D;
  --c-jaune-500: #d9b40f;
  --c-jaune-900: #f1c815;
  --c-slate-50: #f6f8fc;
  --c-slate-100: #eef2f9;
  --c-slate-200: #e1e7f2;
  --c-slate-300: #cfd8e6;
  --c-slate-400: #9aa9c0;
  --c-slate-500: #6b7c96;
  --c-slate-600: #53647d;
  --c-slate-700: #3e4c63;
  --c-slate-800: #2c394d;
  --c-slate-900: #1f2a3a;
  --c-fond: #f6f8fc;
  --c-surface-1: #ffffff;
  --c-surface-2: #eef2f9;
  --c-surface-hover: #e1e7f2;
  --c-surface-alt: #eef2f9;
  --c-surface-subtle: #f6f8fc;
  --c-surface-3: #e1e7f2;
  --c-titre: #08234D;
  --c-texte: #3e4c63;
  --c-texte-clair: #6b7c96;
  --c-texte-muted: #9aa9c0;
  --c-texte-subtil: #6b7c96;
  --c-texte-secondaire: #6b7c96;
  --c-texte-principal: #1f2a3a;
  --c-texte-fort: #1f2a3a;
  --c-border-subtle: #e1e7f2;
  --c-border-strong: #cfd8e6;
  --c-border: #e1e7f2;
  --c-primaire: #08234D;
  --c-primaire-hover: #6999D8;
  --c-primaire-contrast: #ffffff;
  --c-accent: #f1c815;
  --c-accent-hover: #d9b40f;
  --c-accent-contrast: #08234D;
  --c-danger: #DC2626;
  --c-danger-light: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1));
  --c-success: #16A34A;
  --c-warning: #EAB308;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  background: var(--c-fond);
  color: var(--c-texte);
  display: block;
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-corps);
}

.ec-joueur-page *,
.ec-joueur-page *::before,
.ec-joueur-page *::after {
  box-sizing: border-box;
}

/* Annule html { height: 100% } de global.css pour rétablir le scroll natif */
html:has(body.ec-joueur-page) {
  height: auto;
}

/* --------------------------------------------------
   HEADER DE JEU (fixe)
-------------------------------------------------- */

.ec-game-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bleu-900, #08234d);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 52px;
}

.ec-game-brand {
  font-family: var(--font-titres);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ec-game-brand-logo {
  width: 26px;
  height: 26px;
}

.ec-game-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
}

.ec-game-nav-sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.35);
}

.ec-game-nav-item {
  text-transform: uppercase;
}

.ec-game-metrics {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ec-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.ec-metric-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.ec-metric-val {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.ec-metric-barre-wrap {
  width: 72px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}

.ec-metric-barre-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.ec-metric--energie .ec-metric-barre-fill  { background: #6999D8; }
.ec-metric--qualite .ec-metric-barre-fill  { background: var(--c-jaune-500, #d9b40f); }

/* --------------------------------------------------
   BARRE DE PROGRESSION GLOBALE (dessous header)
-------------------------------------------------- */

.ec-game-progress-wrap {
  height: 4px;
  background: rgba(137,172,218,0.25);
  position: sticky;
  top: 52px;
  z-index: 99;
}

.ec-game-progress-fill {
  height: 100%;
  background: var(--c-bleu-500, #6999D8);
  transition: width 0.5s ease;
}

/* --------------------------------------------------
   NAVIGATION ONGLETS
-------------------------------------------------- */

.ec-tabs {
  display: flex;
  align-items: stretch;
  background: var(--c-surface-1);
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  position: sticky;
  top: 56px;
  z-index: 98;
  gap: 0;
}

.ec-tab {
  position: relative;
  flex: 1;
  padding: 14px 12px;
  border: none;
  background: none;
  font-family: var(--font-corps);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-texte-secondaire, #6b7280);
  cursor: pointer;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.ec-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.15s;
}

.ec-tab--active {
  color: var(--c-bleu-900, #08234d);
  font-weight: 700;
  background: var(--c-bleu-900, #08234d);
  color: #fff;
}

.ec-tab--active::after {
  background: var(--c-bleu-900, #08234d);
}

.ec-tab:not(.ec-tab--active):hover {
  color: var(--c-texte, #1a2332);
  background: var(--c-surface-hover);
}

.ec-tab:not(.ec-tab--active):has(.ec-tab-badge:not(:empty)) {
  background: #fff3f3;
  color: #c62828;
  font-weight: 600;
}

.ec-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
}

.ec-tab-badge:empty {
  display: none;
}

.ec-tab-badge:not(:empty) {
  animation: ec-badge-scintille 1.6s ease-in-out infinite;
}

@keyframes ec-badge-scintille {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
  }
  40% {
    transform: scale(1.18);
    box-shadow: 0 0 0 7px rgba(229, 57, 53, 0);
  }
  60% {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
  }
}

/* --------------------------------------------------
   SURBRILLANCE « PROCHAINE ÉTAPE »
   Guide le joueur vers l'onglet Scène (retour) puis
   vers l'étape attendue dans la scène (trace, décision).
-------------------------------------------------- */

/* Onglet Scène : invite au retour une fois l'action secondaire faite */
.ec-tab--retour:not(.ec-tab--active) {
  color: #fff;
  font-weight: 700;
  background: var(--c-bleu-500, #6999d8);
  animation: ec-tab-retour-pulse 1.3s ease-in-out infinite;
}

.ec-tab--retour:not(.ec-tab--active):hover {
  background: var(--c-bleu-900, #08234d);
  color: #fff;
}

/* Flèche animée « ← » placée avant le libellé pour signaler le retour */
.ec-tab--retour:not(.ec-tab--active)::before {
  content: "←";
  font-size: 16px;
  font-weight: 800;
  animation: ec-tab-retour-fleche 1.1s ease-in-out infinite;
}

.ec-tab--retour:not(.ec-tab--active)::after {
  height: 4px;
  background: var(--c-jaune-900, #f1c815);
}

@keyframes ec-tab-retour-pulse {
  0%, 100% {
    background: var(--c-bleu-500, #6999d8);
    box-shadow: 0 0 0 0 rgba(105, 153, 216, 0.55);
  }
  50% {
    background: var(--c-bleu-900, #08234d);
    box-shadow: 0 0 0 6px rgba(105, 153, 216, 0);
  }
}

@keyframes ec-tab-retour-fleche {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}

/* Étape in-scène : zone de trace ou cartes de décision attendues */
.ec-etape-attention {
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(105, 153, 216, 0.55);
  animation: ec-etape-attention-pulse 1.7s ease-in-out infinite;
}

@keyframes ec-etape-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(105, 153, 216, 0.55), 0 0 0 0 rgba(105, 153, 216, 0.40); }
  60%      { box-shadow: 0 0 0 2px rgba(105, 153, 216, 0.55), 0 0 0 7px rgba(105, 153, 216, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-tab--retour:not(.ec-tab--active),
  .ec-etape-attention {
    animation: none;
  }
  .ec-tab--retour:not(.ec-tab--active) {
    background: var(--c-bleu-500, #6999d8);
    color: #fff;
  }
  .ec-tab--retour:not(.ec-tab--active)::before {
    transform: none;
  }
}

/* --------------------------------------------------
   ÉTATS SYSTÈME (chargement, erreur, identification, fin)
-------------------------------------------------- */

.ec-joueur-etat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 116px);
  padding: 24px;
}

.ec-joueur-etat[hidden] { display: none; }

/* Identification */
.ec-identification-card {
  background: var(--c-surface-1, #fff);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm);
  padding: 40px 40px 32px;
  width: 100%;
  max-width: 520px;
}

.ec-identification-card h1 {
  font-family: var(--font-titres);
  font-size: 22px;
  color: var(--c-titre);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.ec-identification-intro {
  font-size: 14px;
  color: var(--c-texte-secondaire);
  margin: 0 0 16px 0;
}

.ec-label-aide {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-texte-secondaire);
}

.ec-id-meta-ligne {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  margin-bottom: 24px;
  padding: 10px 14px;
  background: var(--c-fond);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-subtle);
}

/* Erreur joueur */
.ec-joueur-erreur-msg {
  max-width: 420px;
  text-align: center;
  font-size: 15px;
  color: var(--c-danger);
  background: var(--c-danger-light);
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-surface-1));
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  line-height: 1.5;
}

/* Écran de fin */
.ec-fin-card {
  background: var(--c-surface-1, #fff);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 48px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.ec-fin-icone {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--c-success) 20%, var(--c-surface-1));
  color: var(--c-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  margin: 0 auto 20px;
}

.ec-fin-titre {
  font-family: var(--font-titres);
  font-size: 22px;
  color: var(--c-titre);
  margin: 0 0 12px 0;
}

.ec-fin-message {
  font-size: 15px;
  color: var(--c-texte);
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.ec-fin-sous-message {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  margin: 0;
}

/* --------------------------------------------------
   ÉCRAN INTRO (présentation de l'étude avant l'activité)
-------------------------------------------------- */

.ec-joueur-etat--scroll {
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 48px;
}

.ec-intro-card {
  background: var(--c-surface-1, #fff);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm);
  padding: 48px 48px 40px;
  width: 100%;
  max-width: 700px;
  overflow: hidden;
}

/* ── Bandeau lieu hero ────────────────────────────────────────────────── */

.ec-intro-lieu-banner {
  margin: -48px -48px 0 -48px;
  height: 200px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
}

.ec-intro-logo-wrap--avec-lieu {
  margin-top: -44px;
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
}

.ec-intro-logo-wrap--avec-lieu .ec-intro-logo-img {
  background: #fff;
  padding: 8px 14px;
  border: 3px solid #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.22);
  border-radius: 10px;
}

.ec-intro-logo-wrap--avec-lieu .ec-intro-logo-placeholder {
  border: 3px solid #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.22);
}

/* ── Logo wrap par défaut ─────────────────────────────────────────────── */

.ec-intro-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.ec-intro-logo-img {
  max-height: 100px;
  max-width: 220px;
  object-fit: contain;
  border-radius: 8px;
}

.ec-intro-logo-placeholder {
  width: 80px;
  height: 80px;
  background: var(--c-bleu-900, #08234D);
  color: #fff;
  font-family: var(--font-titres);
  font-size: 30px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.ec-intro-titre {
  font-family: var(--font-titres);
  font-size: 24px;
  color: var(--c-titre);
  margin: 0 0 16px 0;
  text-align: center;
}

.ec-intro-contexte-texte {
  font-size: 15px;
  color: var(--c-texte, #333);
  line-height: 1.75;
  margin: 0 0 24px 0;
}

.ec-intro-role-bloc {
  background: color-mix(in srgb, var(--c-bleu-500, #6999D8) 10%, transparent);
  border-left: 3px solid var(--c-bleu-500, #6999D8);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 28px;
}

.ec-intro-role-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-bleu-500, #6999D8);
  margin: 0 0 6px 0;
}

.ec-intro-role-texte {
  font-size: 15px;
  color: var(--c-texte, #333);
  line-height: 1.6;
  margin: 0;
}

.ec-intro-objectif-bloc {
  background: color-mix(in srgb, var(--c-jaune-900, #f1c815) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-jaune-500, #d9b40f) 55%, transparent);
  border-left: 4px solid var(--c-jaune-500, #d9b40f);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 28px;
}

.ec-intro-objectif-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-bleu-900, #08234d);
  margin: 0 0 6px 0;
}

.ec-intro-objectif-texte {
  font-size: 15px;
  color: var(--c-texte, #333);
  line-height: 1.65;
  margin: 0;
}

.ec-intro-section {
  margin-bottom: 28px;
}

.ec-intro-section-titre {
  font-family: var(--font-titres);
  font-size: 15px;
  color: var(--c-titre);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ec-intro-persos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}

.ec-intro-perso-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.ec-intro-perso-avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--c-border-subtle, #e0e4eb);
  background: var(--c-surface-2, #f5f7fa);
  flex-shrink: 0;
}

.ec-intro-perso-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.ec-intro-perso-initiales {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-titres);
  color: var(--c-bleu-900, #08234D);
  background: var(--c-bleu-200, #89acda);
}

.ec-intro-perso-nom {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-titre);
  margin: 0;
  line-height: 1.3;
}

.ec-intro-perso-role {
  font-size: 12px;
  color: var(--c-texte-secondaire, #666);
  margin: 0;
  line-height: 1.4;
}

.ec-intro-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.ec-retour-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(8, 35, 77, 0.72);
}

.ec-retour-modal-overlay[hidden] { display: none; }

.ec-retour-modal {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  width: min(100%, 440px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(8, 35, 77, 0.28);
}

.ec-retour-modal-icone {
  font-size: 2.4rem;
  margin: 0 0 12px;
}

.ec-retour-modal-titre {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-bleu-900);
  margin: 0 0 12px;
}

.ec-retour-modal-texte {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin: 0 0 28px;
}

.ec-intro-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 20px;
  background: rgba(8, 35, 77, 0.62);
}

.ec-intro-modal-overlay[hidden] {
  display: none;
}

.ec-intro-modal {
  position: relative;
  width: min(100%, 740px);
}

.ec-intro-modal .ec-intro-card {
  max-width: none;
  box-shadow: 0 20px 60px rgba(8, 35, 77, 0.24);
}

.ec-intro-modal-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-bleu-900, #08234d);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(8, 35, 77, 0.16);
}

.ec-intro-modal-fermer:hover,
.ec-intro-modal-fermer:focus-visible {
  background: #fff;
  outline: 2px solid var(--c-bleu-500, #6999d8);
  outline-offset: 2px;
}

/* --------------------------------------------------
   CONTENU DES ONGLETS
-------------------------------------------------- */

.ec-tab-panel[hidden] { display: none; }

/* Empêche tout débordement horizontal de remonter à la page */
.ec-tab-panel {
  overflow-x: hidden;
}

/* --------------------------------------------------
   ONGLET SCÈNE — layout 2 colonnes
-------------------------------------------------- */

.ec-scene-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 116px);
  align-items: start;
}

/* Panneau gauche : portrait + contexte */
.ec-scene-gauche {
  background: var(--c-surface-1);
  border-right: 1px solid var(--c-border-subtle, #e0e4eb);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Panneau droit : scène + choix + traces */
.ec-scene-droite {
  padding: 28px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* 2 colonnes dans ec-scene-droite : image gauche — contenu droite */
.ec-scene-2col {
  display: grid;
  grid-template-columns: 342px 1fr;
  gap: 28px;
  align-items: start;
}

.ec-scene-col-image {
  position: sticky;
  top: 116px;
}

.ec-scene-col-image .ec-scene-image-wrap {
  margin-bottom: 0;
  aspect-ratio: 19 / 15;
}

.ec-scene-col-contenu {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --------------------------------------------------
   PORTRAIT PERSONNAGE
-------------------------------------------------- */

.ec-portrait-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ec-portrait-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.ec-portrait-initiales-avatar {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--c-bleu-900, #08234d);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 2px;
  overflow: hidden;
}

.ec-portrait-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-portrait-initiales-avatar:has(.ec-portrait-logo) {
  aspect-ratio: 1 / 1;
}

.ec-portrait-nom {
  font-family: var(--font-titres);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  margin: 0;
}

.ec-portrait-cours {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  margin: 0;
  line-height: 1.4;
}

.ec-portrait-revoir-intro {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-bleu-500, #6999d8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ec-portrait-intro-trigger {
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.ec-portrait-intro-trigger:hover,
.ec-portrait-intro-trigger:focus-visible {
  color: var(--c-bleu-500, #6999d8);
  background: rgba(105, 153, 216, 0.1);
  outline: 2px solid rgba(105, 153, 216, 0.45);
  outline-offset: 3px;
}

.ec-portrait-niveau {
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin: 0;
}

/* ── Vignette de lieu (sidebar gauche) ───────────────────────────────── */

.ec-lieu-vignette {
  border-top: 1px solid var(--c-border-subtle, #e0e4eb);
  padding-top: 16px;
}

.ec-lieu-vignette-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.ec-lieu-vignette-label {
  font-size: 11px;
  color: var(--c-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 7px 0 0 0;
}

/* ── Image de lieu dans les scènes (fallback) ────────────────────────── */

.ec-scene-image--lieu {
  opacity: 0.82;
}

/* --------------------------------------------------
   PANNEAU DROITE — contenu scène
-------------------------------------------------- */

/* Breadcrumb acte/mois */
.ec-scene-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-breadcrumb-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--c-bleu-50, #eef4fb);
  color: var(--c-bleu-900, #08234d);
  text-transform: uppercase;
}

.ec-breadcrumb-sep {
  font-size: 11px;
  color: var(--c-texte-secondaire);
}

.ec-scene-main {
  display: flow-root;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 12px;
  padding: 28px 28px 24px;
}

/* Image de scène flottante à gauche du texte dans la card */
.ec-scene-main > .ec-scene-image-wrap {
  float: left;
  width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 24px 16px 0;
}

.ec-scene-main > .ec-scene-image-wrap .ec-scene-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Pas de placeholder vide flottant */
.ec-scene-main > .ec-scene-image-wrap.ec-scene-image-placeholder {
  display: none;
}

/* Espacement vertical entre ec-scene-main, ec-zone-action, ec-zone-bouton */
#ec-scene-contenu {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Respiration avant le label "À faire" et la consigne dans les cards de scène */
.ec-scene-main .ec-scene-bloc-label {
  margin-top: 20px;
}

/* BFC : empêche le fond jaune de la consigne de passer sous la photo flottante */
.ec-scene-main .ec-scene-consigne {
  display: flow-root;
}

.ec-scene-titre-joueur {
  font-family: var(--font-titres);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.ec-scene-texte-joueur {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-texte);
  margin: 0 0 20px 0;
}

.ec-scene-consigne {
  background: #fff8e1;
  border-left: 3px solid #f0b429;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: var(--c-texte);
  line-height: 1.6;
  margin-bottom: 16px;
}

.ec-scene-theorie {
  background: #f3e5f5;
  border-left: 3px solid #9c27b0;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: var(--c-texte);
  line-height: 1.6;
  margin-bottom: 16px;
}

.ec-scene-bloc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-texte-secondaire);
  margin: 0 0 6px 0;
}

/* --------------------------------------------------
   CHOIX EN CARTES 2×2
-------------------------------------------------- */

.ec-choix-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.ec-choix-carte {
  background: var(--c-fond, #f5f7fa);
  border: 2px solid var(--c-border, #d0d7e3);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-choix-carte:hover:not(:disabled) {
  border-color: var(--c-bleu-900, #08234d);
  background: var(--c-surface-1);
  transform: translateY(-1px);
}

.ec-choix-carte--selectionne {
  border-color: var(--c-bleu-900, #08234d);
  background: var(--c-surface-1);
}

.ec-choix-carte--non-selectionne {
  opacity: 0.4;
}

/* Le choix n'est pas définitif : une carte non retenue reste cliquable, on le
   signale en rétablissant son opacité au survol. */
.ec-choix-carte--non-selectionne:hover:not(:disabled) {
  opacity: 1;
}

.ec-choix-carte:disabled {
  cursor: default;
}

.ec-choix-carte-titre {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  line-height: 1.3;
  margin: 0;
}

.ec-choix-carte-desc {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  line-height: 1.45;
  margin: 0;
}

/* Rétroaction post-choix */
.ec-retroaction-bloc {
  background: #e8f5e9;
  border-left: 3px solid #2e7d32;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-texte);
  margin-top: 12px;
}

/* Bouton avancer */
.ec-scene-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Collapser la zone action quand elle est vide (pas de cartes de décision) */
#ec-zone-action:empty {
  display: none;
}

/* Scintillement standard — signal visuel pour avancer */
.ec-btn-avancer--scintille {
  animation: ec-scintille 2s ease-in-out infinite;
}

/* Scene 5 corridor: rendre l'action impossible a manquer */
.ec-corridor-action {
  display: flex;
  justify-content: center;
  margin: 18px 0 10px;
}

.ec-btn-corridor {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding-inline: 22px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(105, 153, 216, 0.22), 0 8px 20px rgba(8, 35, 77, 0.2);
  animation: ec-scintille 1.8s ease-in-out infinite;
}

.ec-btn-corridor::after {
  content: "";
  position: absolute;
  inset: -45% -30%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.72) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: ec-corridor-reflet 2.4s ease-in-out infinite;
}

.ec-btn-corridor:hover:not(:disabled) {
  animation-duration: 1.2s;
}

.ec-btn-corridor:disabled,
.ec-btn-corridor:disabled::after {
  animation: none;
}

@keyframes ec-corridor-reflet {
  0%, 45% {
    transform: translateX(-120%);
    opacity: 0;
  }
  60% {
    opacity: 0.85;
  }
  82%, 100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-btn-corridor,
  .ec-btn-corridor::after {
    animation: none;
  }
}

/* --------------------------------------------------
   ONGLET COURRIELS — simulateur 3 colonnes
-------------------------------------------------- */

.ec-mail-layout {
  display: grid;
  grid-template-columns: 200px 320px 1fr;
  min-height: calc(100vh - 116px);
  background: var(--c-fond);
}

/* Sidebar gauche */
.ec-mail-sidebar {
  background: var(--c-surface-2);
  border-right: 1px solid var(--c-border-subtle, #e0e4eb);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-mail-sidebar-titre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-texte-secondaire);
  margin: 0 0 6px 0;
}

.ec-mail-sidebar-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-titre);
  margin: 0 0 2px 0;
}

.ec-mail-sidebar-sublabel {
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin: 0 0 14px 0;
}

.ec-mail-dossier-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-texte);
  background: var(--c-bleu-900, #08234d);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.ec-mail-apercu-titre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-texte-secondaire);
  margin: 16px 0 4px 0;
}

.ec-mail-apercu-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-titre);
  line-height: 1;
}

.ec-mail-apercu-desc {
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin-top: 2px;
}

/* Colonne liste */
.ec-mail-liste-col {
  border-right: 1px solid var(--c-border-subtle, #e0e4eb);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ec-mail-liste-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ec-mail-recherche {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border, #d0d7e3);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-corps);
  background: var(--c-fond);
  color: var(--c-texte);
  flex: 1;
}

.ec-mail-recherche:focus {
  outline: none;
  border-color: var(--c-primaire);
}

.ec-mail-liste-meta {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ec-mail-count-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ec-badge-interactif {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--c-bleu-50, #eef4fb);
  color: var(--c-bleu-900, #08234d);
  border: 1px solid var(--c-bleu-200, #c3d9f3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ec-mail-liste-items {
  flex: 1;
  overflow-y: auto;
}

/* Item de la liste */
.ec-mail-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  cursor: pointer;
  transition: background 0.1s;
  display: grid;
  grid-template-areas:
    "expediteur date"
    "objet badge"
    "preview preview";
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
}

.ec-mail-item:hover { background: var(--c-surface-hover); }
.ec-mail-item--selectionne { background: var(--c-bleu-50); }

.ec-mail-item--non-lu {
  background: rgba(105, 153, 216, 0.07);
  box-shadow: inset 3px 0 0 var(--c-bleu-500, #6999D8);
}

.ec-mail-item--suivi {
  background: #f0f8f1;
}

.ec-mail-item--suivi:hover,
.ec-mail-item--suivi.ec-mail-item--selectionne {
  background: #e4f2e6;
}

.ec-mail-item--reponse-requise {
  position: relative;
  padding-left: 12px;
  border-left: 4px solid var(--c-jaune-500, #d9b40f);
  background: #fff8d8;
  box-shadow: inset 0 0 0 1px rgba(217, 180, 15, 0.28);
  animation: ec-mail-reponse-cible-scintille 1.45s ease-in-out infinite;
}

.ec-mail-item--reponse-requise:hover,
.ec-mail-item--reponse-requise.ec-mail-item--selectionne {
  background: #fff1b8;
}

.ec-mail-item-expediteur {
  grid-area: expediteur;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-texte-secondaire);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-mail-item--non-lu .ec-mail-item-expediteur {
  font-weight: 700;
  color: var(--c-titre);
}

.ec-mail-item-date {
  grid-area: date;
  font-size: 11px;
  color: var(--c-texte-secondaire);
  white-space: nowrap;
}

.ec-mail-item-objet {
  grid-area: objet;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-mail-item--non-lu .ec-mail-item-objet {
  font-weight: 700;
  color: var(--c-titre);
}

.ec-mail-item-badges {
  grid-area: badge;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.ec-mail-item-preview {
  grid-area: preview;
  font-size: 12px;
  color: var(--c-texte-secondaire);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges courriels */
.ec-badge-urgent {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--c-danger, #c0392b);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ec-badge-pj {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-surface-2, #f4f6f9);
  color: var(--c-texte-secondaire);
  border: 1px solid var(--c-border-subtle);
}

.ec-badge-suivi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #c62828;
}

.ec-badge-suivi-flag {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 14px;
  border-left: 2px solid currentColor;
  flex: 0 0 auto;
}

.ec-badge-suivi-flag::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 10px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
}

.ec-badge-reponse-requise {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  background: #fff;
  color: #8a5f00;
  border: 1px solid rgba(217, 180, 15, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ec-badge-reponse-requise-flag {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 12px;
  border-left: 2px solid currentColor;
  flex: 0 0 auto;
}

.ec-badge-reponse-requise-flag::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 8px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
}

@keyframes ec-mail-reponse-cible-scintille {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(217, 180, 15, 0.28), 0 0 0 rgba(217, 180, 15, 0);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(217, 180, 15, 0.62), 0 0 18px rgba(217, 180, 15, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-mail-item--reponse-requise {
    animation: none;
  }
}

/* Indicateur non-lu (point) */
.ec-mail-item-dot {
  width: 8px;
  height: 8px;
  background: var(--c-bleu-500, #6999D8);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}

.ec-mail-item--non-lu .ec-mail-item-dot { display: block; }

/* Avatar expéditeur courriel */
.ec-mail-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-bleu-900, #08234D);
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
}

.ec-mail-avatar--liste {
  width: 22px;
  height: 22px;
  font-size: 9px;
  margin-right: 6px;
}

.ec-mail-avatar--detail {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.ec-mail-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-mail-avatar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.ec-mail-detail-de-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Panneau détail */
.ec-mail-detail {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--c-surface-1);
  min-width: 0;
}

.ec-mail-detail-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--c-texte-secondaire);
  font-size: 14px;
}

.ec-mail-detail-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ec-mail-detail-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.ec-mail-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ec-mail-tag--apprenants  { background: var(--c-bleu-50);    color: var(--c-bleu-900); border: 1px solid var(--c-bleu-200); }
.ec-mail-tag--collegues   { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; }
.ec-mail-tag--institution { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.ec-mail-tag--pedagogie   { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.ec-mail-tag--contexte    { background: #f5f5f5; color: #616161; border: 1px solid #e0e0e0; }
.ec-mail-tag--urgent      { background: var(--c-danger, #c0392b); color: #fff; }
.ec-mail-tag--non-lu      { background: var(--c-jaune-500, #d9b40f); color: #fff; }
.ec-mail-tag--suivi {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.ec-mail-tag--reponse-requise {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff7d0;
  color: #8a5f00;
  border: 1px solid rgba(217, 180, 15, 0.75);
}

.ec-mail-marquer-lu-btn,
.ec-mail-suivi-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface-1);
  color: var(--c-texte);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
}

.ec-mail-marquer-lu-btn:hover,
.ec-mail-suivi-btn:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-texte-secondaire);
}

.ec-mail-suivi-btn--actif {
  background: #e4f2e6;
  border-color: #81c784;
  color: #1b5e20;
}

.ec-mail-suivi-btn--actif:hover {
  background: #d5ead8;
  border-color: #66bb6a;
}

.ec-mail-detail-titre {
  font-family: var(--font-titres);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-titre);
  padding: 16px 24px 8px;
  margin: 0;
}

.ec-mail-detail-meta {
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  font-size: 13px;
  color: var(--c-texte-secondaire);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ec-mail-detail-corps {
  padding: 20px 24px 4px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-texte);
}

.ec-mail-signature {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 24px 28px;
  padding: 10px 12px;
  border-left: 3px solid var(--c-bleu-500, #6999D8);
  background: var(--c-surface-2, #f4f6fa);
  border-radius: 0 4px 4px 0;
}

.ec-mail-signature-nom {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234D);
  letter-spacing: 0.1px;
}

.ec-mail-signature-org {
  font-size: 12px;
  color: var(--c-texte-secondaire);
}

.ec-mail-detail-infos {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--c-border-subtle, #e0e4eb);
}

.ec-mail-info-carte {
  background: var(--c-fond, #f5f7fa);
  border: 1px solid var(--c-border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}

.ec-mail-info-carte-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-texte-secondaire);
  margin: 0 0 4px 0;
}

.ec-mail-info-carte-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-titre);
  margin: 0;
}

/* --------------------------------------------------
   ONGLET EDUTWEET — fil réseau social fictif
-------------------------------------------------- */

.ec-edutweet-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 116px);
  align-items: start;
  gap: 24px;
  padding: 24px;
  background: var(--c-fond);
}

.ec-edutweet-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 140px;
}

/* Carte profil */
.ec-profil-card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ec-profil-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ec-profil-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-bleu-900, #08234d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.ec-profil-nom-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ec-profil-nom {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-titre);
  margin: 0;
}

.ec-profil-handle {
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin: 0;
}

.ec-profil-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
  text-align: center;
  border: 1px solid var(--c-border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.ec-profil-stat {
  padding: 8px 4px;
  border-right: 1px solid var(--c-border-subtle);
}

.ec-profil-stat:last-child { border-right: none; }

.ec-profil-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-titre);
  display: block;
}

.ec-profil-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-texte-secondaire);
  display: block;
}

/* Card scène Edutweet disponible */
.ec-edutweet-scene-card {
  background: var(--c-surface-1);
  border: 2px solid var(--c-jaune-500, #d9b40f);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-edutweet-scene-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-jaune-500, #d9b40f);
}

.ec-edutweet-scene-titre {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-titre);
  margin: 0;
}

.ec-edutweet-scene-desc {
  font-size: 13px;
  color: var(--c-texte-secondaire);
  margin: 0;
  line-height: 1.4;
}

/* Fil de publications */
.ec-edutweet-fil {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ec-edutweet-fil-header {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-edutweet-fil-titre {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-titre);
  margin: 0;
}

.ec-edutweet-recherche {
  padding: 7px 12px;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  font-size: 13px;
  font-family: var(--font-corps);
  color: var(--c-texte);
  background: var(--c-fond);
  width: 200px;
}

.ec-edutweet-recherche:focus {
  outline: none;
  border-color: var(--c-primaire);
}

.ec-post {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-post-auteur-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ec-post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-bleu-200, #89acda);
  color: var(--c-bleu-900, #08234d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.ec-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-post-auteur-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ec-post-auteur-nom {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-titre);
}

.ec-post-auteur-meta {
  font-size: 12px;
  color: var(--c-texte-secondaire);
}

.ec-post-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ec-post-badge--mitige  { background: var(--c-jaune-500, #d9b40f); color: #fff; }
.ec-post-badge--positif { background: #22c55e; color: #fff; }
.ec-post-badge--negatif { background: var(--c-danger, #c0392b); color: #fff; }

.ec-post-texte {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-texte);
  margin: 0;
}

.ec-post-fil {
  background: var(--c-fond, #f5f7fa);
  border-left: 3px solid var(--c-jaune-500, #d9b40f);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--c-texte);
}

.ec-post-fil-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-texte-secondaire);
  margin: 0 0 3px 0;
}

.ec-post-fil-titre {
  font-weight: 600;
  color: var(--c-titre);
}

.ec-post-lien-source {
  font-size: 12px;
  color: var(--c-texte-secondaire);
}

.ec-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ec-post-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--c-fond, #f5f7fa);
  border: 1px solid var(--c-border-subtle);
  color: var(--c-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ec-post-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--c-border-subtle, #e0e4eb);
  padding-top: 10px;
}

.ec-post-action-btn {
  flex: 1;
  padding: 8px 4px;
  background: none;
  border: none;
  font-size: 13px;
  font-family: var(--font-corps);
  color: var(--c-texte-secondaire);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.ec-post-action-btn:hover {
  background: var(--c-surface-hover);
  color: var(--c-texte);
}

/* --------------------------------------------------
   TWEETBOOK — enrichissements V2
-------------------------------------------------- */

/* Handle et heure */
.ec-post-handle {
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin-left: 2px;
}

.ec-post-heure {
  font-size: 11px;
  color: var(--c-texte-secondaire);
}

/* Compteurs likes / reposts */
.ec-post-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--c-texte-secondaire);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border-subtle, #e0e4eb);
}

.ec-post-stat-val {
  font-weight: 600;
  color: var(--c-texte);
  margin-right: 2px;
}

/* Avatar petit (replies) */
.ec-post-avatar--sm {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 11px;
}

/* Replies imbriquées */
.ec-post-replies {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--c-border-subtle, #e0e4eb);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-post-reply {
  background: var(--c-surface-alt);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Reply de l'apprenant */
.ec-post-reply--apprenant {
  background: rgba(105, 153, 216, 0.07);
  border-left: 3px solid var(--c-bleu-500);
}

/* Post qui requiert une réponse */
.ec-post--requiert-reponse {
  border: 2px solid var(--c-jaune-500);
}

/* Badges statut réponse */
.ec-post-badge--requiert {
  display: inline-block;
  background: var(--c-jaune-500);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}

.ec-post-badge--publie {
  display: inline-block;
  background: #27ae60;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}

/* Zone de réponse (onglet et scène) */
.ec-reponse-area {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-reponse-textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #d4d8e2);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-corps);
  color: var(--c-texte);
  background: var(--c-surface-1);
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ec-reponse-textarea:focus {
  outline: none;
  border-color: var(--c-bleu-500);
}

.ec-reponse-char {
  font-size: 11px;
  color: var(--c-texte-secondaire);
  text-align: right;
}

/* Trace d'apprentissage */
.ec-trace-zone {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 8px;
  background: var(--c-fond, #f5f7fa);
}

.ec-trace-titre {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-titre);
  margin: 0 0 8px;
}

.ec-trace-consigne,
.ec-trace-indices {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texte);
  margin: 0 0 10px;
}

.ec-trace-criteres {
  margin: 0 0 12px 18px;
  padding: 0;
  font-size: 13px;
  color: var(--c-texte-secondaire);
  line-height: 1.45;
}

.ec-trace-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border: 1px solid var(--c-border, #d4d8e2);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-corps);
  resize: vertical;
  box-sizing: border-box;
}

.ec-trace-textarea:focus {
  outline: none;
  border-color: var(--c-bleu-500);
}

.ec-trace-zone--verrouillee {
  background: #eef2f7;
  border-color: #d5dce8;
  opacity: 0.72;
  cursor: not-allowed;
}

.ec-trace-zone--verrouillee .ec-trace-titre,
.ec-trace-zone--verrouillee .ec-trace-consigne,
.ec-trace-zone--verrouillee .ec-trace-mention,
.ec-trace-zone--verrouillee .ec-scene-bloc-label {
  color: #6f7d91;
}

.ec-trace-zone--verrouillee .ec-trace-textarea {
  background: #e4e9f1;
  border-color: #c9d2df;
  color: #6f7d91;
  cursor: not-allowed;
  resize: none;
}

.ec-trace-zone--verrouillee .ec-trace-textarea::placeholder {
  color: #6f7d91;
  opacity: 1;
}

.ec-trace-textarea:disabled {
  opacity: 1;
}

/* Post embed dans la scène post_social */
.ec-post-social-wrap {
  margin-top: 18px;
}

.ec-scene-post-embed {
  border: 1px solid var(--c-border, #d4d8e2);
  border-radius: 12px;
  background: var(--c-surface-1);
}

.ec-scene-post-embed.ec-post--requiert-reponse {
  border: 2px solid var(--c-jaune-500);
}

.ec-apercu-trace-grille {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.ec-apercu-input,
.ec-apercu-select {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--c-border, #d0d7e3);
  border-radius: 6px;
  font-family: var(--font-corps);
  font-size: 14px;
  background: #fff;
  color: var(--c-texte);
  box-sizing: border-box;
}

.ec-apercu-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-texte);
  padding-bottom: 8px;
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 900px) {
  .ec-scene-layout {
    grid-template-columns: 1fr;
  }

  .ec-scene-gauche {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
  }

  .ec-mail-layout {
    grid-template-columns: 1fr;
  }

  .ec-mail-sidebar    { display: none; }
  .ec-mail-liste-col  { border-right: none; }

  /* Vue "détail" cachée par défaut — visible uniquement quand un message est sélectionné */
  .ec-mail-detail { display: none; }
  .ec-mail-layout.ec-mail--detail-ouvert .ec-mail-liste-col { display: none; }
  .ec-mail-layout.ec-mail--detail-ouvert .ec-mail-detail    { display: flex; }

  /* Bouton retour injecté dans le détail sur mobile */
  .ec-mail-retour-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primaire, #6999D8);
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-border-subtle, #e0e4eb);
    cursor: pointer;
    width: 100%;
    text-align: left;
  }

  .ec-edutweet-layout {
    grid-template-columns: 1fr;
  }

  .ec-edutweet-sidebar {
    position: static;
  }

  .ec-scene-2col {
    grid-template-columns: 1fr;
  }

  .ec-scene-col-image {
    position: static;
  }

  .ec-scene-col-image .ec-scene-image-wrap {
    aspect-ratio: 16 / 9;
  }

  /* Image de scène : annuler le float sur tablette/mobile */
  .ec-scene-main > .ec-scene-image-wrap {
    float: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 0 20px 0;
  }

  /* Portrait compact — ligne horizontale quand le panneau est empilé */
  .ec-portrait-bloc {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .ec-portrait-initiales-avatar,
  .ec-portrait-img {
    width: 100px;
    flex-shrink: 0;
  }

  /* Overlay café — 1 colonne sur tablette */
  .ec-cafe-fenetre {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .ec-cafe-visuel {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: auto;
    padding: 16px 20px;
  }
  .ec-cafe-perso-img {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    border-radius: 50%;
  }
  .ec-cafe-perso-initiales {
    width: 80px;
    height: 80px;
    font-size: 26px;
    margin-bottom: 0;
  }
  .ec-cafe-perso-nom {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .ec-game-header {
    grid-template-columns: auto 1fr;
  }

  .ec-game-nav { display: none; }

  .ec-game-metrics {
    gap: 12px;
  }

  .ec-metric-barre-wrap { display: none; }

  .ec-tabs {
    overflow-x: auto;
    gap: 0;
  }

  .ec-tab {
    flex: none;
    padding: 12px 14px;
    font-size: 13px;
  }

  .ec-choix-grille {
    grid-template-columns: 1fr;
  }

  .ec-mail-layout {
    grid-template-columns: 1fr;
  }

  .ec-identification-card {
    padding: 28px 20px 24px;
  }

  .ec-fin-card {
    padding: 32px 20px;
  }

  .ec-intro-card {
    padding: 28px 20px 32px;
  }

  .ec-intro-lieu-banner {
    margin: -28px -20px 0 -20px;
    height: 150px;
  }

  .ec-intro-logo-wrap--avec-lieu {
    margin-top: -38px;
  }

  .ec-intro-persos-grille {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 14px;
  }

  .ec-intro-perso-avatar-wrap {
    width: 70px;
    height: 70px;
  }

  .ec-scene-droite {
    padding: 16px 14px 40px;
  }

  /* Tweetbook — évite le débordement droit sur téléphone */
  .ec-edutweet-layout {
    padding: 12px;
  }

  .ec-edutweet-fil-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ec-edutweet-recherche {
    width: 100%;
  }

  /* Portrait encore plus compact sur téléphone */
  .ec-portrait-initiales-avatar,
  .ec-portrait-img {
    width: 76px;
  }

  /* Panneau gauche — padding réduit */
  .ec-scene-gauche {
    padding: 16px 14px;
    gap: 14px;
  }

  /* Scène droite — card principale */
  .ec-scene-main {
    padding: 18px 16px 16px;
    border-radius: 8px;
  }
  .ec-scene-titre-joueur {
    font-size: 20px;
  }
  .ec-scene-texte-joueur {
    font-size: 14px;
  }

  /* Banner scène 1 — compact sur téléphone */
  .ec-scene1-banner {
    padding: 1.1rem 1rem;
    gap: 0.75rem;
    border-radius: 0.6rem;
    flex-wrap: wrap;
  }
  .ec-scene1-banner p {
    font-size: 1rem;
  }
  .ec-scene1-banner-icon {
    font-size: 1.8rem;
  }

  /* Scène 5 gate email */
  .ec-scene5-email-gate {
    padding: 0.85rem 1rem;
  }

  /* Modal document officiel — scène 2 */
  .ec-doc-modal-overlay {
    padding: 10px;
  }
  .ec-doc-modal-contenu {
    max-height: 94vh;
  }
  #ec-doc-modal-corps {
    padding: 16px 14px;
    overflow-x: auto;
  }
  .ec-doc-titre {
    font-size: 16px;
  }
  .ec-doc-infographic-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ec-doc-infographic-zoom-btn {
    width: 100%;
    justify-content: center;
  }

  /* Overlay appel téléphonique */
  .ec-appel-telephone {
    border-radius: 1.5rem;
    min-height: 400px;
  }

  /* Dialogue café — hauteur réduite sur téléphone */
  .ec-cafe-dialogue {
    max-height: 200px;
  }

  /* Mail — padding réduit dans le détail */
  .ec-mail-detail-titre {
    font-size: 18px;
    padding: 14px 16px 6px;
  }
  .ec-mail-detail-corps {
    padding: 16px 16px 4px;
  }
  .ec-mail-detail-meta {
    padding: 0 16px 14px;
  }
  .ec-mail-signature {
    margin: 0 16px 20px;
  }
  .ec-mail-detail-infos {
    padding: 14px 16px;
    grid-template-columns: 1fr;
  }

  /* Journal — topbar et header compacts */
  .ec-journal-topbar {
    padding: 6px 14px;
  }
  .ec-journal-subnav {
    padding: 5px 14px;
  }
  .ec-journal-body {
    padding: 20px 14px 40px;
  }

  /* Tutoriel modal */
  .ec-tuto-modal {
    max-height: 90vh;
    overflow-y: auto;
  }

}

/* ======================================================
   V2 — IMAGES DE SCÈNES
====================================================== */

/* Zone image dans le joueur apprenant */
.ec-scene-image-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 16 / 9;
  background: #08234D;
}

.ec-scene-image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-scene-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: linear-gradient(135deg, #08234D 0%, #1a3a6b 100%);
}

/* Scène 1 — overlay logo sur image de lieu */
.ec-scene-image-wrap--scene1 {
  position: relative;
}

.ec-scene1-logo-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ec-scene1-logo-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

/* Bandeau pivot — signale un imprévu ou une nouvelle donnée */
.ec-pivot-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff4e0;
  border-left: 4px solid var(--c-jaune-500, #d9b40f);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-weight: 600;
  color: #7a5700;
  font-size: 14px;
}

.ec-pivot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--c-jaune-500, #d9b40f);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Image dans l'aperçu enseignant — layout 2 colonnes */
.ec-apercu-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
  align-items: start;
}

.ec-apercu-bloc--image {
  padding: 0;
  border: none;
  background: transparent;
}

.ec-apercu-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
}

.ec-apercu-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8edf5 0%, #c5d3e8 100%);
  margin-bottom: 8px;
}

.ec-btn-regenerer-image {
  font-size: 13px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--c-bleu-500, #6999D8);
  color: var(--c-bleu-500, #6999D8);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ec-btn-regenerer-image:hover:not(:disabled) {
  background: var(--c-bleu-500, #6999D8);
  color: #fff;
}

.ec-btn-regenerer-image:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ec-regen-feedback {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: var(--c-texte-secondaire, #555);
}

/* ======================================================
   FORMULAIRE CRÉATION — mise en contexte et aide-champ
   ====================================================== */

.ec-intro-contexte {
  color: var(--c-texte-secondaire, #555);
  font-size: 0.95rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

.ec-aide-champ {
  display: block;
  font-size: 0.82rem;
  color: var(--c-texte-secondaire, #777);
  margin-top: 4px;
}

/* ======================================================
   TWEETBOOK — AMBIANCE SOMBRE (onglet joueur uniquement)
   Scopé sous .ec-edutweet-layout pour ne rien affecter d'autre
====================================================== */

.ec-edutweet-layout {
  color-scheme: dark;
  --c-fond: #0f141f;
  --c-surface-1: #151b28;
  --c-surface-2: #202938;
  --c-surface-hover: #273347;
  --c-surface-alt: #1b2434;
  --c-titre: #f5f8ff;
  --c-texte: #d8e0ec;
  --c-texte-secondaire: #a8b4c7;
  --c-border-subtle: #2a3548;
  --c-border: #2a3548;
  --c-primaire: #78aef5;
  background: #0f141f;
  color: #d8e0ec;
}

.ec-edutweet-layout .ec-profil-card {
  background: #151b28;
  border-color: #2a3548;
}
.ec-edutweet-layout .ec-profil-nom   { color: #f5f8ff; }
.ec-edutweet-layout .ec-profil-handle { color: #a8b4c7; }
.ec-edutweet-layout .ec-profil-stats  { border-color: #2a3548; }
.ec-edutweet-layout .ec-profil-stat   { border-right-color: #2a3548; }
.ec-edutweet-layout .ec-profil-stat-val   { color: #f5f8ff; }
.ec-edutweet-layout .ec-profil-stat-label { color: #a8b4c7; }

.ec-edutweet-layout .ec-edutweet-scene-card  { background: #151b28; }
.ec-edutweet-layout .ec-edutweet-scene-titre { color: #f5f8ff; }
.ec-edutweet-layout .ec-edutweet-scene-desc  { color: #a8b4c7; }

.ec-edutweet-layout .ec-edutweet-fil-header {
  background: #151b28;
  border-color: #2a3548;
}
.ec-edutweet-layout .ec-edutweet-fil-titre { color: #f5f8ff; }
.ec-edutweet-layout .ec-edutweet-recherche {
  background: #0f141f;
  border-color: #2a3548;
  color: #d8e0ec;
}
.ec-edutweet-layout .ec-edutweet-recherche::placeholder { color: #475569; }

.ec-edutweet-layout .ec-post {
  background: #151b28;
  border-color: #2a3548;
}
.ec-edutweet-layout .ec-post-auteur-nom  { color: #f5f8ff; }
.ec-edutweet-layout .ec-post-auteur-meta { color: #a8b4c7; }
.ec-edutweet-layout .ec-post-handle      { color: #a8b4c7; }
.ec-edutweet-layout .ec-post-heure       { color: #64748b; }
.ec-edutweet-layout .ec-post-texte       { color: #d8e0ec; }

.ec-edutweet-layout .ec-post-fil {
  background: rgba(217, 180, 15, 0.08);
  color: #d8e0ec;
}
.ec-edutweet-layout .ec-post-fil-label { color: #a8b4c7; }
.ec-edutweet-layout .ec-post-fil-titre { color: #f5f8ff; }
.ec-edutweet-layout .ec-post-lien-source { color: #64748b; }

.ec-edutweet-layout .ec-post-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: #2a3548;
  color: #a8b4c7;
}

.ec-edutweet-layout .ec-post-actions     { border-top-color: #2a3548; }
.ec-edutweet-layout .ec-post-action-btn  { color: #a8b4c7; }
.ec-edutweet-layout .ec-post-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #d8e0ec;
}

.ec-edutweet-layout .ec-post-stats {
  border-top-color: #2a3548;
  color: #a8b4c7;
}
.ec-edutweet-layout .ec-post-stat-val { color: #d8e0ec; }

.ec-edutweet-layout .ec-post-replies       { border-left-color: #2a3548; }
.ec-edutweet-layout .ec-post-reply {
  background: rgba(255, 255, 255, 0.04);
  color: #d8e0ec;
}
.ec-edutweet-layout .ec-post-reply--apprenant { background: rgba(105, 153, 216, 0.1); }

.ec-edutweet-layout .ec-reponse-textarea {
  background: #0f141f;
  border-color: #2a3548;
  color: #d8e0ec;
}
.ec-edutweet-layout .ec-reponse-textarea::placeholder { color: #475569; }
.ec-edutweet-layout .ec-reponse-char { color: #64748b; }

/* ======================================================
   EFFETS DE FINITION — micro-animations
====================================================== */

/* Entrée animée de la scène */
@keyframes ec-scene-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ec-scene-main--animate {
  animation: ec-scene-entree 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Cartes de choix — lift + ombre renforcés */
.ec-choix-carte:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(8, 35, 77, 0.15);
}

.ec-choix-carte:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: none;
  transition: transform 0.06s, box-shadow 0.06s;
}

/* Boutons principaux — press */
.ec-joueur-page .btn-primary:active {
  transform: scale(0.97);
  transition: transform 0.07s;
}

/* Badge onglets — pop quand nouveau contenu */
@keyframes ec-badge-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  65%  { transform: scale(1.3); }
  100% { transform: scale(1);   opacity: 1; }
}

.ec-tab-badge--pop {
  animation: ec-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Items courriels — indicateur de focus inset */
.ec-mail-item:hover {
  box-shadow: inset 3px 0 0 var(--c-bleu-500, #6999D8);
}

.ec-mail-item--selectionne {
  box-shadow: inset 3px 0 0 var(--c-bleu-900, #08234D);
}

/* Onglets — transition plus fluide */
.ec-tab {
  transition: background 0.15s, color 0.15s;
}

/* ==========================================================
   POST ARTICLE — carte article dans le tweetbook (joueur + aperçu)
   ========================================================== */

.ec-post--org {
  border-left: 3px solid var(--c-jaune-900, #f1c815);
}

.ec-post-avatar--org {
  background: linear-gradient(135deg, var(--c-bleu-500, #6999D8), var(--c-bleu-900, #08234D));
  color: #fff;
  font-weight: 700;
}

.ec-post-badge--officiel {
  display: inline-block;
  background: var(--c-bleu-500, #6999D8);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  vertical-align: middle;
}

.ec-post-article-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--c-jaune-900, #f1c815);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ec-post-article-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-left-color: rgba(255, 255, 255, 0.6);
}

.ec-post-article-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-jaune-900, #f1c815);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ec-post-article-titre {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
}

.ec-post-article-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.ec-post-article-btn {
  display: inline-block;
  margin-top: 10px;
  background: var(--c-jaune-900, #f1c815);
  color: #000;
  font-weight: 700;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  white-space: nowrap;
  pointer-events: none;
}

/* Preview journal dans la carte article */
.ec-post-article-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ec-post-article-preview-journal {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #c0392b;
  padding: 2px 7px;
  letter-spacing: 0.5px;
  font-family: 'Montserrat', 'Georgia', serif;
  white-space: nowrap;
  border-radius: 2px;
}

.ec-post-article-preview-cat {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-family: 'Inter', sans-serif;
}

/* ==========================================================
   MODAL JOURNAL SIMULÉ — backdrop + boîte centrée
   ========================================================== */

.ec-journal-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ec-journal-modal-wrap[hidden] {
  display: none;
}

.ec-journal-modal-box {
  background: #fff;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #111;
}

/* ==========================================================
   PAGE JOURNAL SIMULÉE — contenu interne (utilisé dans le modal)
   ========================================================== */

.ec-journal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  background: #fff;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #111;
}

.ec-journal-topbar {
  background: #111;
  color: #aaa;
  font-size: 11px;
  font-family: 'Inter', 'Arial', sans-serif;
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ec-journal-topbar-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: 'Inter', 'Arial', sans-serif;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.ec-journal-topbar-close:hover {
  background: var(--c-bleu-500, #6999D8);
  color: #fff;
  border-color: var(--c-bleu-500, #6999D8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.ec-journal-topbar-close:active {
  transform: translateY(1px);
}

.ec-journal-header {
  background: #111;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ec-journal-name {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  background: #c0392b;
  padding: 5px 14px;
  letter-spacing: 1px;
  font-family: 'Montserrat', 'Georgia', serif;
  white-space: nowrap;
}

.ec-journal-header-slogan {
  font-size: 12px;
  color: #999;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  flex: 1;
  text-align: right;
}

.ec-journal-nav {
  background: #222;
  padding: 8px 40px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
}

.ec-journal-nav span {
  color: #bbb;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Inter', 'Arial', sans-serif;
  white-space: nowrap;
  cursor: default;
}

.ec-journal-nav--actif {
  color: #fff !important;
  border-bottom: 2px solid #c0392b;
  padding-bottom: 4px;
}

.ec-journal-subnav {
  background: #c0392b;
  padding: 5px 40px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
}

.ec-journal-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
}

.ec-journal-article {
  min-width: 0;
}

.ec-journal-article-categorie {
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
}

.ec-journal-article-titre {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.15;
  color: #111;
  margin-bottom: 16px;
  font-family: 'Montserrat', 'Georgia', serif;
}

.ec-journal-article-chapeau {
  font-size: 16px;
  color: #444;
  border-left: 3px solid #c0392b;
  padding-left: 14px;
  margin-bottom: 22px;
  line-height: 1.6;
}

.ec-journal-article-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ddd;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.ec-journal-article-photo--square {
  aspect-ratio: 1 / 1;
}

.ec-journal-article-photo img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-journal-article-caption {
  font-size: 11px;
  color: #999;
  font-style: italic;
  font-family: 'Inter', sans-serif;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ec-journal-article-meta {
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
}

.ec-journal-article-meta strong {
  color: #333;
}

.ec-journal-article-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ec-journal-article-actions button {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 14px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border-radius: 2px;
}

.ec-journal-article-texte p {
  font-size: 15px;
  line-height: 1.85;
  color: #222;
  margin-bottom: 16px;
}

/* Sidebar */
.ec-journal-sidebar {
  min-width: 0;
}

.ec-journal-sidebar-section {
  margin-bottom: 28px;
}

.ec-journal-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 4px;
}

.ec-journal-sidebar-category {
  font-size: 14px;
  font-weight: 900;
  color: #111;
  border-bottom: 2px solid #111;
  padding-bottom: 6px;
  margin-bottom: 14px;
  font-family: 'Montserrat', sans-serif;
}

.ec-journal-sidebar-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}

.ec-journal-sidebar-num {
  font-size: 28px;
  font-weight: 900;
  color: #ddd;
  min-width: 30px;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
}

.ec-journal-sidebar-item-rubrique {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 3px;
}

.ec-journal-sidebar-item-titre {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  margin: 0 0 3px;
}

.ec-journal-sidebar-item-meta {
  font-size: 11px;
  color: #999;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.ec-journal-sidebar-infolettre {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 16px;
}

.ec-journal-sidebar-infolettre-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
  text-align: center;
  font-family: 'Inter', sans-serif;
  margin-bottom: 6px;
}

.ec-journal-sidebar-infolettre-name {
  font-size: 18px;
  font-weight: 900;
  color: #c0392b;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 6px;
}

.ec-journal-sidebar-infolettre-desc {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  margin-bottom: 12px;
}

.ec-journal-sidebar-infolettre input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
  box-sizing: border-box;
  border-radius: 2px;
}

.ec-journal-sidebar-infolettre button {
  width: 100%;
  background: #333;
  color: #fff;
  border: none;
  padding: 8px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .ec-journal-body {
    grid-template-columns: 1fr;
  }
  .ec-journal-sidebar {
    display: none;
  }
  .ec-journal-nav {
    gap: 14px;
    padding: 8px 16px;
  }
  .ec-journal-header {
    padding: 10px 16px;
  }
  .ec-journal-article-titre {
    font-size: 24px;
  }
}

/* ==========================================================
   APERÇU ENSEIGNANT — sections Courriel / Tweetbook
   ========================================================== */

.ec-apercu-section-sep {
  border: none;
  border-top: 2px solid #e5e9f0;
  margin: 28px 0 20px;
}

.ec-apercu-section-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8899bb;
  margin: 0 0 14px;
}

/* Cartes email */
.ec-apercu-email-card {
  background: #f8fafc;
  border: 1px solid #dde3ef;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ec-apercu-email-objet {
  font-weight: 700;
  font-size: 14px;
  color: #1a2a44;
  margin: 0 0 4px;
}

.ec-apercu-email-meta {
  font-size: 12px;
  color: #888;
  margin: 0 0 8px;
}

.ec-apercu-email-corps {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.ec-apercu-email-urgent {
  display: inline-block;
  background: #fee2e2;
  color: #c0392b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.ec-apercu-email-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ec-apercu-email-tag {
  background: #e8ecf4;
  color: #4a6080;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

.ec-apercu-email-contexte {
  font-size: 12px;
  color: #777;
  margin: 8px 0 0;
  font-style: italic;
}

/* Cartes post tweetbook dans l'aperçu */
.ec-apercu-post-card {
  background: #0f1c35;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  color: #e0e8f5;
}

.ec-apercu-post-card--org {
  border-left: 3px solid var(--c-jaune-900, #f1c815);
}

.ec-apercu-post-auteur-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ec-apercu-post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2a3f66;
  color: #a0b8e0;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ec-apercu-post-avatar--org {
  background: linear-gradient(135deg, var(--c-bleu-500, #6999D8), var(--c-bleu-900, #08234D));
  color: #fff;
}

.ec-apercu-post-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ec-apercu-post-nom {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #e8f0ff;
}

.ec-apercu-post-handle {
  font-size: 11px;
  color: #7090b8;
}

.ec-apercu-post-heure {
  font-size: 11px;
  color: #7090b8;
}

.ec-apercu-post-badge--officiel {
  display: inline-block;
  background: var(--c-bleu-500, #6999D8);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.ec-apercu-post-texte {
  font-size: 13px;
  color: #c8d8f0;
  line-height: 1.5;
  margin: 0 0 8px;
}

.ec-apercu-post-stats {
  font-size: 11px;
  color: #7090b8;
  display: flex;
  gap: 16px;
}

.ec-apercu-post-replies {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ec-apercu-post-reply {
  font-size: 12px;
  color: #a0b8e0;
  margin-bottom: 4px;
}

.ec-apercu-post-reply-auteur {
  font-weight: 700;
  margin-right: 6px;
}

.ec-apercu-post-badge--positif,
.ec-apercu-post-badge--negatif,
.ec-apercu-post-badge--mitige {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.ec-apercu-post-badge--positif { background: #1a4a2e; color: #4ade80; }
.ec-apercu-post-badge--negatif { background: #4a1a1a; color: #f87171; }
.ec-apercu-post-badge--mitige  { background: #4a3a1a; color: #fbbf24; }

/* Article détaillé dans l'aperçu */
.ec-apercu-article-details {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}

.ec-apercu-article-details summary {
  font-size: 12px;
  color: var(--c-jaune-900, #f1c815);
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}

.ec-apercu-article-contenu {
  padding-top: 10px;
}

.ec-apercu-article-chapeau {
  font-size: 13px;
  color: #a0b8e0;
  margin: 0 0 10px;
  line-height: 1.5;
}

.ec-apercu-article-para {
  font-size: 13px;
  color: #c0d0e8;
  line-height: 1.6;
  margin: 0 0 8px;
}

.ec-apercu-article-meta {
  font-size: 11px;
  color: #7090b8;
  margin: 8px 0 0;
  font-style: italic;
}

.ec-apercu-vide {
  font-size: 13px;
  color: #aaa;
  font-style: italic;
  padding: 6px 0;
  margin: 0;
}

/* ======================================================
   SCÈNE 1 — Séquence progressive (aperçu enseignant)
====================================================== */

.ec-scene1-etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ec-scene1-etape {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.ec-scene1-etape-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--c-bleu-500);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-scene1-etape--conditionnel .ec-scene1-etape-num {
  background: var(--c-jaune-500);
  color: var(--c-bleu-900);
}

.ec-scene1-etape-titre {
  display: block;
  font-size: 0.9rem;
}

.ec-scene1-etape-desc {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #555;
}

/* ======================================================
   SCÈNE 1 — Appel téléphonique (joueur.html)
====================================================== */

/* Keyframes */
@keyframes ec-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ec-line-appear {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ec-pulse-ring {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(105, 153, 216, 0.4); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(105, 153, 216, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(105, 153, 216, 0); }
}
@keyframes ec-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Overlay plein-écran */
.ec-appel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 35, 77, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.ec-appel-overlay[hidden] {
  display: none;
}

/* Cadre téléphone */
.ec-appel-telephone {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 2rem;
  border: 1px solid #e1e7f2;
  box-shadow: 0 20px 60px rgba(8, 35, 77, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: 90vh;
}

/* En-tête appelant */
.ec-appel-entete {
  background: #eef2f9;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid #e1e7f2;
}

.ec-appel-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-bleu-900);
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  animation: ec-pulse-ring 2s ease-in-out infinite;
}

.ec-appel-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-appel-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ec-appel-appelant-nom {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f1f3a;
  margin: 0;
}

.ec-appel-appelant-role {
  font-size: 0.85rem;
  color: #9aa9c0;
  margin: 0.25rem 0 0;
}

.ec-appel-statut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ec-appel-statut-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #16a34a;
}

.ec-appel-timer {
  font-size: 0.85rem;
  font-family: monospace;
  color: #16a34a;
}

/* Zone dialogue */
.ec-appel-dialogue {
  flex: 1;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.ec-appel-ligne {
  animation: ec-line-appear 0.4s ease both;
}

.ec-appel-ligne--intro {
  text-align: center;
  font-size: 0.85rem;
  color: #9aa9c0;
  font-style: italic;
}

.ec-appel-bulle {
  background: #eef2f9;
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.75rem 1rem;
  max-width: 90%;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid #e1e7f2;
}

/* Indicateur de frappe */
.ec-appel-typing {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.25rem;
}

.ec-appel-typing span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #9aa9c0;
  animation: ec-bounce 1.2s ease-in-out infinite;
}

.ec-appel-typing span:nth-child(2) { animation-delay: 0.15s; }
.ec-appel-typing span:nth-child(3) { animation-delay: 0.30s; }

/* CTA raccrocher */
.ec-appel-cta {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid #e1e7f2;
  animation: ec-fade-in 0.35s ease both;
}

.ec-appel-btn-raccrocher {
  width: 100%;
}

/* Section appel dans l'onglet Scène — accroche narrative */
.ec-scene1-banner {
  background: linear-gradient(135deg, var(--c-bleu-900) 0%, #1a3d6e 100%);
  border: none;
  border-left: 5px solid var(--c-jaune-900);
  border-radius: 0.75rem;
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 4px 20px rgba(8, 35, 77, 0.25);
  color: #fff;
  line-height: 1.6;
}

.ec-scene1-banner p {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.01em;
}

.ec-scene5-email-gate {
  align-items: center;
  flex-wrap: wrap;
  background: rgba(105, 153, 216, 0.08);
  border: 1px solid rgba(105, 153, 216, 0.35);
  border-left: 4px solid var(--c-bleu-500);
  color: var(--c-texte-principal);
  box-shadow: none;
  padding: 1rem 1.25rem;
}

.ec-scene5-email-gate p {
  flex: 1 1 200px;
  font-size: 1rem;
  color: var(--c-texte-principal);
}

.ec-scene5-email-gate .ec-scene1-banner-icon {
  font-size: 1.6rem;
}

.ec-scene5-email-gate .btn {
  flex: 0 0 auto;
}

.ec-scene1-banner-icon {
  font-size: 2.4rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.ec-scene1-appel-section {
  background: #fff;
  border: 1px solid #e1e7f2;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.ec-scene1-appel-section--active {
  background: linear-gradient(135deg, #fffbee 0%, #fff8e1 100%);
  border: 2px solid var(--c-jaune-900);
  box-shadow: 0 0 0 4px rgba(241, 200, 21, 0.18), 0 6px 24px rgba(8, 35, 77, 0.13);
  animation: ec-appel-apparition 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ec-appel-apparition {
  0%   { transform: scale(0.96); opacity: 0; box-shadow: 0 0 0 0 rgba(241, 200, 21, 0.5); }
  65%  { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ec-scene1-appel-titre {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-bleu-900);
  margin: 0 0 0.75rem;
}

.ec-scene1-appel-complete {
  font-size: 0.9rem;
  color: #16a34a;
  margin: 0;
}

.ec-scene1-indicateurs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ec-scene1-indicateur {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #9aa9c0;
  background: #f7f9fd;
  border: 1px solid #e1e7f2;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.ec-scene1-indicateur--ok {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #86efac;
}

.ec-scene1-btn-appel {
  width: 100%;
}

@keyframes ec-phone-ring {
  0%   { transform: rotate(0deg) scale(1); box-shadow: 0 0 0 0 rgba(99, 153, 216, 0.55); }
  10%  { transform: rotate(-12deg) scale(1.04); }
  20%  { transform: rotate(12deg) scale(1.04); }
  30%  { transform: rotate(-10deg); }
  40%  { transform: rotate(10deg); }
  50%  { transform: rotate(-6deg); box-shadow: 0 0 0 10px rgba(99, 153, 216, 0); }
  60%  { transform: rotate(6deg); }
  70%  { transform: rotate(-3deg); }
  80%  { transform: rotate(3deg); }
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg) scale(1); box-shadow: 0 0 0 0 rgba(99, 153, 216, 0); }
}

.ec-scene1-btn-appel--sonne {
  animation: ec-phone-ring 1.2s ease-in-out infinite;
}

.ec-scene1-trace-section {
  animation: ec-fade-in 0.4s ease both;
}

/* ======================================================
   ÉDITEUR POST-GÉNÉRATION (Phase 17)
====================================================== */

/* Bandeau info post-génération */
.ec-bandeau-post-gen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Card de scène post-génération */
.ec-scene-card-post {
  background: #fff;
  border: 1px solid #dde5f2;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

/* Titre en lecture seule (titre de scène + pivot) */
.ec-editeur-readonly {
  color: var(--c-texte-secondaire, #6b7280);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  margin: 8px 0 16px;
}

.ec-scene-pivot-readonly {
  font-style: italic;
}

/* Accordéon */
.ec-editeur-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.ec-editeur-section-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #f8fafc;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-titre, #08234d);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.ec-editeur-section-titre::before {
  content: "▶";
  font-size: 11px;
  color: var(--c-bleu-500, #6999d8);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.ec-editeur-section-titre--ouvert::before {
  transform: rotate(90deg);
}

.ec-editeur-section-titre:hover {
  background: #eef2f9;
}

.ec-editeur-section-corps {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
}

.ec-editeur-section-corps[hidden] {
  display: none;
}

/* Groupes de champs */
.ec-editeur-champ-groupe {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-editeur-champ-groupe--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ec-editeur-champ-groupe--inline .ec-champ-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.ec-editeur-champ-groupe--disabled {
  opacity: 0.55;
}

.ec-editeur-champ-groupe--disabled .ec-champ-textarea {
  background: #f4f6fa;
  cursor: not-allowed;
}

.ec-editeur-choix-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ec-editeur-choix-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.ec-editeur-choix-titre {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234d);
}

/* Séparateur interne et sous-titre de section */
.ec-editeur-separateur {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 4px 0 8px;
}

.ec-editeur-sous-titre-section {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234d);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Actions par scène */
.ec-scene-post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.ec-scene-sauvegarde-msg {
  font-size: 14px;
  color: #16a34a;
  font-weight: 500;
}

.ec-message-erreur-inline {
  font-size: 14px;
  color: #dc2626;
}

/* Aperçu : trace en lecture seule */
.ec-apercu-bloc--trace-readonly {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.ec-apercu-trace-badge {
  display: inline-block;
  background: #eef2f9;
  color: var(--c-bleu-900, #08234d);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  margin: 6px 0 4px;
}

.ec-apercu-trace-aide {
  font-size: 13px;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0;
}

.ec-apercu-trace-aide a {
  color: var(--c-bleu-500, #6999d8);
  text-decoration: none;
}
.ec-apercu-trace-aide a:hover {
  text-decoration: underline;
}

/* ===========================================================
   CARD PERSONNAGES — panneau gauche joueur
=========================================================== */

.ec-personnages-cas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-document-officiel-consulte[hidden] {
  display: none;
}

.ec-personnages-cas-titre {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 4px;
}

.ec-perso-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--c-surface-2, #f8fafc);
  border: 1px solid var(--c-border-subtle, #e0e4eb);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.ec-perso-mini-card:hover {
  background: #eef3fb;
  border-color: var(--c-bleu-200, #89acda);
  box-shadow: 0 2px 8px rgba(105, 153, 216, 0.12);
}

.ec-perso-mini-voir-profil {
  display: block;
  font-size: 11px;
  color: var(--c-bleu-500, #6999D8);
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.ec-perso-mini-card:hover .ec-perso-mini-voir-profil {
  opacity: 1;
}

.ec-perso-mini-photo-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bleu-200, #89acda);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-perso-mini-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-perso-mini-initiales {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.ec-perso-mini-info {
  flex: 1;
  min-width: 0;
}

.ec-perso-mini-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234d);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-perso-mini-role {
  font-size: 11px;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Jauge de relation -- */

.ec-jauge-relation {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ec-document-officiel-consulte {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-doc-consulte-titre {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 4px;
}

.ec-doc-consulte-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #dce5f3;
  background: #fbfcff;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-corps);
  box-shadow: 0 2px 8px rgba(105, 153, 216, 0.08);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.ec-doc-consulte-card:hover {
  background: #eef3fb;
  border-color: var(--c-bleu-200, #89acda);
  box-shadow: 0 3px 12px rgba(105, 153, 216, 0.16);
  transform: translateY(-1px);
}

.ec-doc-consulte-icone {
  flex-shrink: 0;
  width: 36px;
  min-height: 42px;
  border-radius: 6px;
  background: #fff8dc;
  border: 1px solid rgba(241, 200, 21, 0.55);
  color: var(--c-bleu-900, #08234d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ec-doc-consulte-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ec-doc-consulte-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-bleu-500, #6999D8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-doc-consulte-nom {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-doc-consulte-meta {
  font-size: 11px;
  color: var(--c-texte-secondaire, #6b7280);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-doc-consulte-action {
  font-size: 11px;
  color: var(--c-bleu-500, #6999D8);
  font-weight: 600;
  margin-top: 2px;
}

.ec-jauge-barre {
  flex: 1;
  height: 5px;
  background: #e5e9f0;
  border-radius: 3px;
  overflow: hidden;
}

.ec-jauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ec-jauge--hostile   .ec-jauge-fill { background: #e53e3e; }
.ec-jauge--neutre    .ec-jauge-fill { background: #a0aec0; }
.ec-jauge--favorable .ec-jauge-fill { background: #68d391; }
.ec-jauge--tres-favorable .ec-jauge-fill { background: #38a169; }

.ec-jauge-label {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.ec-jauge--hostile   .ec-jauge-label { color: #e53e3e; }
.ec-jauge--neutre    .ec-jauge-label { color: #718096; }
.ec-jauge--favorable .ec-jauge-label { color: #276749; }
.ec-jauge--tres-favorable .ec-jauge-label { color: #276749; }

/* ===========================================================
   MODAL DÉTAIL PERSONNAGE
=========================================================== */

.ec-perso-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 35, 77, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ec-perso-modal-overlay[hidden] {
  display: none;
}

.ec-perso-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(8, 35, 77, 0.22);
  padding: 28px 24px 24px;
}

.ec-perso-modal-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: var(--c-texte-secondaire, #6b7280);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.ec-perso-modal-fermer:hover {
  background: #e9eef7;
  color: var(--c-bleu-900, #08234d);
}

.ec-perso-modal-entete {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef0f5;
}

.ec-perso-modal-photo-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bleu-200, #89acda);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-perso-modal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-perso-modal-initiales {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.ec-perso-modal-meta {
  flex: 1;
  min-width: 0;
}

.ec-perso-modal-nom {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  margin: 0 0 3px;
}

.ec-perso-modal-role {
  font-size: 13px;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 8px;
}

.ec-perso-modal-section {
  margin-bottom: 16px;
}

.ec-perso-modal-section:last-child {
  margin-bottom: 0;
}

.ec-perso-modal-section-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-bleu-500, #6999d8);
  margin: 0 0 6px;
}

.ec-perso-modal-section-texte {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-texte-principal, #1a202c);
  margin: 0;
}

.ec-perso-modal-section-vide {
  font-size: 13px;
  color: var(--c-texte-secondaire, #6b7280);
  font-style: italic;
  margin: 0;
}

/* Jauge dans le modal (plus large) */
.ec-perso-modal-section .ec-jauge-barre {
  height: 7px;
}

/* ===========================================================
   ÉDITEUR — Champs détails personnage
=========================================================== */

.ec-perso-details-bloc {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-perso-details-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-bleu-500, #6999d8);
  margin: 0 0 2px;
}

.ec-perso-details-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-perso-details-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-texte-secondaire, #6b7280);
}

.ec-perso-champ-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid #d1d8e5;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  color: var(--c-texte-principal, #1a202c);
  transition: border-color 0.15s;
}

.ec-perso-champ-textarea:focus {
  outline: none;
  border-color: var(--c-bleu-500, #6999d8);
}

.ec-perso-jauge-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ec-perso-jauge-row input[type="range"] {
  flex: 1;
  accent-color: var(--c-bleu-500, #6999d8);
}

.ec-perso-jauge-valeur {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234d);
  min-width: 32px;
  text-align: right;
}

.ec-perso-jauge-legende {
  font-size: 11px;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0;
}

/* =====================================================================
   SCÈNE 2 — Indicateurs + bouton document + notif café
===================================================================== */

.ec-scene2-indicateurs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ec-scene2-actions-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8ecf2;
}

.ec-scene2-btn-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--c-surface-1, #fff);
  border: 2px solid var(--c-bleu-500, #6999D8);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-corps);
  box-shadow: 0 2px 10px rgba(105, 153, 216, 0.18);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  box-sizing: border-box;
  animation: ec-scene2-btn-doc-pulse 1.8s ease-in-out infinite;
}

@keyframes ec-scene2-btn-doc-pulse {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(105, 153, 216, 0.18), 0 0 0 0 rgba(105, 153, 216, 0.45);
    border-color: var(--c-bleu-500, #6999D8);
  }
  50% {
    box-shadow: 0 2px 10px rgba(105, 153, 216, 0.18), 0 0 0 8px rgba(105, 153, 216, 0);
    border-color: var(--c-bleu-700, #275aa6);
  }
}

.ec-scene2-btn-doc:hover {
  background: var(--c-bleu-50, #f2f7ff);
  border-color: var(--c-bleu-700, #275aa6);
  box-shadow: 0 4px 16px rgba(105, 153, 216, 0.28);
  transform: translateY(-1px);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ec-scene2-btn-doc {
    animation: none;
  }
}

.ec-scene2-btn-doc-icone {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.ec-scene2-btn-doc-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ec-scene2-btn-doc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-bleu-500, #6999D8);
}

.ec-scene2-btn-doc-titre {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234D);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-scene2-btn-doc-fleche {
  font-size: 20px;
  color: var(--c-bleu-500, #6999D8);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.ec-scene2-btn-doc:hover .ec-scene2-btn-doc-fleche {
  transform: translateX(4px);
}

.ec-scene2-cafe-notif {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f0f4ff;
  border: 1px solid #c7d5f5;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--c-bleu-900, #08234d);
  margin-top: 8px;
}

.ec-scene2-cafe-notif-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ec-scene2-cafe-complete {
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
  margin: 8px 0 0;
}

/* =====================================================================
   SCÈNE 2 — Modal document officiel
===================================================================== */

.ec-doc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 35, 77, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.ec-doc-modal-overlay[hidden] {
  display: none;
}

.ec-doc-modal-contenu {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(8, 35, 77, 0.22);
  overflow: hidden;
}

.ec-doc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--c-bleu-900, #08234d);
  flex-shrink: 0;
}

.ec-doc-type-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-jaune-900, #f1c815);
  background: rgba(241, 200, 21, 0.15);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(241, 200, 21, 0.4);
}

.ec-doc-modal-fermer {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.ec-doc-modal-fermer:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

#ec-doc-modal-corps {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.ec-doc-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  margin: 0 0 10px;
  line-height: 1.35;
}

.ec-doc-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--c-texte-secondaire, #6b7280);
  padding-bottom: 16px;
  border-bottom: 1px solid #e8ecf2;
  margin-bottom: 18px;
}

.ec-doc-meta-source {
  font-weight: 500;
}

.ec-doc-meta-date::before {
  content: "·";
  margin-right: 6px;
}

.ec-doc-corps-para {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-texte-principal, #1a202c);
  margin: 0 0 14px;
}

.ec-doc-corps-para:last-child {
  margin-bottom: 0;
}

.ec-doc-infographic-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.ec-doc-infographic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ec-doc-infographic-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-bleu-900, #08234D);
  margin: 0;
  opacity: 0.55;
}

.ec-doc-infographic-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
  background: #eef2f8;
  border: 1px solid #c7d4e8;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.ec-doc-infographic-zoom-btn:hover {
  background: #dce5f3;
}

.ec-doc-infographic-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e8eef6;
}

.ec-doc-infographic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Lightbox infographique plein écran */
.ec-infographic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px 72px;
}

.ec-infographic-lightbox[hidden] {
  display: none;
}

.ec-lightbox-img-wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  flex: 1;
  cursor: zoom-in;
}

.ec-lightbox-img-wrap.ec-lb-zoomable {
  cursor: grab;
}

.ec-lightbox-img-wrap.ec-lb-dragging {
  cursor: grabbing;
}

.ec-infographic-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.ec-infographic-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 22px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
  z-index: 1;
}

.ec-infographic-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ec-lightbox-zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 6px 10px;
  z-index: 1;
}

.ec-lb-ctrl-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
}

.ec-lb-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* =====================================================================
   SCÈNE 2 — Overlay conversation café
===================================================================== */

.ec-cafe-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 35, 77, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ec-fade-in 0.25s ease;
}

.ec-cafe-overlay[hidden] {
  display: none;
}

.ec-cafe-fenetre {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(8, 35, 77, 0.3);
}

.ec-cafe-visuel {
  background: linear-gradient(180deg, #1a3a6b 0%, #08234d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 16px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.ec-cafe-perso-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  display: block;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ec-cafe-perso-initiales {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-bleu-200, #89acda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.ec-cafe-perso-nom {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  margin: 0;
}

.ec-cafe-dialogue-zone {
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.ec-cafe-dialogue-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 12px;
}

.ec-cafe-dialogue {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  padding-right: 4px;
}

.ec-corridor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 16px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.ec-corridor-loading .ec-spinner {
  width: 32px;
  height: 32px;
}

.ec-cafe-bulle {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 85%;
  animation: ec-line-appear 0.25s ease;
  word-break: break-word;
}

.ec-cafe-bulle--perso {
  background: #eef2f9;
  color: var(--c-bleu-900, #08234d);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.ec-cafe-bulle--joueur {
  background: #ddeaf9;
  color: #1a3a6b;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-style: italic;
}

#ec-cafe-cta {
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid #e8ecf2;
  display: flex;
  justify-content: flex-end;
}

/* =====================================================================
   SCÈNE 2 — Section Messages privés dans Tweetbook
===================================================================== */

.ec-dm-section-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-texte-secondaire, #6b7280);
  margin: 0 0 8px;
  padding: 0 4px;
}

#ec-tweetbook-dm-section {
  padding: 14px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.ec-dm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ec-dm-card:hover,
.ec-dm-card:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.ec-dm-card--non-lu {
  border-color: rgba(105, 153, 216, 0.5);
  background: rgba(105, 153, 216, 0.1);
}

.ec-dm-card-avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.ec-dm-card-avatar-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.ec-dm-card-avatar-initiales {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-bleu-200, #89acda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234d);
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.ec-dm-card-contenu {
  flex: 1;
  min-width: 0;
}

.ec-dm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.ec-dm-card-nom {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-titre, #f5f8ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-dm-card-statut {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--c-texte-secondaire, #6b7280);
  background: rgba(255, 255, 255, 0.08);
}

.ec-dm-card-statut--nouveau {
  background: rgba(105, 153, 216, 0.25);
  color: #89acda;
  font-weight: 600;
}

.ec-dm-card-statut--fait {
  background: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}

.ec-dm-card-preview {
  font-size: 12px;
  color: var(--c-texte, #d8e0ec);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  opacity: 0.75;
  line-height: 1.4;
}

/* =====================================================================
   ÉDITEUR — Aperçu conversation café (Scène 2)
===================================================================== */

.ec-editeur-conv-preview {
  background: #f8f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  max-height: 260px;
  overflow-y: auto;
}

/* =====================================================================
   APERÇU — Section CTA éditeur (standalone, entre personnages et scènes)
===================================================================== */

@keyframes ec-scintille {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(105, 153, 216, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(105, 153, 216, 0.18), 0 4px 22px rgba(105, 153, 216, 0.65);
    transform: scale(1.04);
  }
}

.ec-section-editeur-cta {
  margin-bottom: 24px;
}

.ec-bandeau-editeur-standalone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 2px solid #93c5fd;
  border-left: 6px solid var(--c-bleu-500);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 4px 18px rgba(105, 153, 216, 0.22);
}

.ec-bandeau-editeur-standalone-texte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--c-bleu-900);
}

.ec-bandeau-editeur-standalone-texte strong {
  font-size: 17px;
  font-weight: 700;
}

.ec-bandeau-editeur-standalone-texte span {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}

/* Groupe de boutons dans le bandeau (téléchargement + résumé) */
.ec-bandeau-editeur-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bouton partagé bandeau (standalone + ancien bandeau inline) */
.ec-bandeau-editeur-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--c-bleu-500);
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 22px;
  border-radius: 8px;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(105, 153, 216, 0.35);
  flex-shrink: 0;
}

.ec-bandeau-editeur-lien--pulse {
  animation: ec-scintille 2s ease-in-out infinite;
}

.ec-bandeau-editeur-lien:hover {
  background: var(--c-bleu-900);
  text-decoration: none;
  transform: translateY(-1px) scale(1) !important;
  animation-play-state: paused;
}

button.ec-bandeau-editeur-lien {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

button.ec-bandeau-editeur-lien:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* État « travail IA en cours » : spinner intégré (réutilise le keyframe ec-spin) */
button.ec-bandeau-editeur-lien[data-loading="true"] {
  cursor: wait;
}

button.ec-bandeau-editeur-lien[data-loading="true"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ec-spin 0.8s linear infinite;
}

/* Phrases d'attente IA affichées DANS le bouton : hérite couleur/taille du bouton */
.ec-resume-loading-message {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.ec-resume-loading-message[hidden] {
  display: none;
}

/* Ancien bandeau inline (conservé si utilisé ailleurs) */
.ec-bandeau-editeur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 1.5px solid #93c5fd;
  border-left: 5px solid var(--c-bleu-500);
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-bleu-900);
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(105, 153, 216, 0.18);
}

/* ======================================================
   SCÈNE 3 — COMPOSITEUR RÉPONSE COURRIEL
====================================================== */

.ec-scene3-email-original {
  background: #f7f9fd;
  border: 1.5px solid #d0ddf0;
  border-left: 4px solid var(--c-bleu-500, #6999D8);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
}

.ec-scene3-email-original-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-bleu-500, #6999D8);
  margin: 0 0 8px;
}

.ec-scene3-email-original-meta {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #4a5568;
  margin-bottom: 4px;
  line-height: 1.4;
}

.ec-scene3-email-original-preview {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  line-height: 1.45;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.ec-scene3-composer {
  background: #fff;
  border: 1.5px solid #d0ddf0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ec-scene3-composer--confirme {
  background: #f0fdf4;
  border-color: #86efac;
}

.ec-scene3-champ-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f7;
  font-size: 14px;
}

.ec-scene3-champ-meta:last-of-type {
  border-bottom: none;
}

.ec-scene3-champ-meta-label {
  font-size: 12px;
  font-weight: 700;
  color: #9aa9c0;
  width: 48px;
  flex-shrink: 0;
  text-align: right;
}

.ec-scene3-champ-meta-valeur {
  color: var(--c-bleu-900, #08234D);
  font-size: 14px;
  font-weight: 500;
}

.ec-scene3-input-objet {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--c-bleu-900, #08234D);
  font-family: var(--font-corps, Inter, sans-serif);
  background: transparent;
  padding: 0;
}

.ec-scene3-textarea {
  width: 100%;
  min-height: 140px;
  margin-top: 12px;
  border: 1.5px solid var(--c-border, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-corps, Inter, sans-serif);
  color: var(--c-texte);
  background: var(--c-surface-1);
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ec-scene3-textarea:focus {
  border-color: var(--c-bleu-500, #6999D8);
  outline: none;
}

.ec-scene3-confirmation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
}

.ec-scene3-corps-lu {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d1fae5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ======================================================
   SCÈNE 4 — PIVOT TWEETBOOK + CONTACT PERSONNAGE
====================================================== */

.ec-scene4-indicateurs-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ec-scene4-tweetbook-indicateur {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #9aa9c0;
  background: #f7f9fd;
  border: 1px solid #e1e7f2;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.ec-scene4-tweetbook-indicateur.ec-scene1-indicateur--ok {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #86efac;
}

.ec-scene4-contact-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e8ecf2;
  animation: ec-fade-in 0.3s ease both;
}

.ec-scene4-fiche-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-bleu-500, #6999D8);
  background: transparent;
  border: 1.5px solid var(--c-bleu-500, #6999D8);
  border-radius: 8px;
  padding: 7px 14px;
  margin-bottom: 18px;
  cursor: pointer;
  font-family: var(--font-corps, Inter, sans-serif);
  transition: background 0.15s, color 0.15s;
}

.ec-scene4-fiche-lien:hover {
  background: var(--c-bleu-500, #6999D8);
  color: #fff;
}

.ec-scene4-choix-contact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.ec-scene4-choix-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: #fff;
  border: 2px solid #d0ddf0;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-corps, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
  line-height: 1.3;
}

.ec-scene4-choix-btn:hover {
  border-color: var(--c-bleu-500, #6999D8);
  background: #f2f7ff;
  box-shadow: 0 2px 10px rgba(105, 153, 216, 0.18);
}

.ec-scene4-choix-btn--actif {
  border-color: var(--c-bleu-500, #6999D8);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(105, 153, 216, 0.18);
}

.ec-scene4-confirmation-choix {
  margin-top: 18px;
  padding: 16px;
  background: #f2f7ff;
  border: 1.5px solid #d0ddf0;
  border-radius: 12px;
  animation: ec-fade-in 0.25s ease both;
}

.ec-scene4-confirmation-texte {
  font-size: 14px;
  color: var(--c-bleu-900, #08234D);
  margin: 0 0 14px;
  line-height: 1.5;
}

.ec-scene4-non-contact-zone {
  margin-top: 16px;
  animation: ec-fade-in 0.25s ease both;
}

.ec-scene4-non-contact-recap {
  margin-top: 14px;
  padding: 14px 16px;
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.ec-scene4-non-contact-recap-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-texte-secondaire, #64748b);
  margin: 0 0 6px;
}

.ec-scene4-non-contact-recap-texte {
  font-size: 14px;
  color: var(--c-bleu-900, #08234D);
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
}

/* ======================================================
   TWEETBOOK — IMAGE SITUATIONNELLE DANS LES POSTS
====================================================== */

.ec-post-char-image-wrap {
  margin: 10px 0 6px;
  border-radius: 12px;
  overflow: hidden;
  max-width: 320px;
}

.ec-post-char-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.ec-message-info-inline {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(105, 153, 216, 0.35);
  border-radius: 8px;
  background: rgba(105, 153, 216, 0.08);
  color: var(--c-texte-principal);
  font-size: 13px;
  line-height: 1.4;
}

/* =====================================================================
   ONGLET COURRIELS — Zone de réponse (Scène 3)
===================================================================== */

.ec-mail-reply-zone {
  margin: 0 24px 28px;
  border: 1.5px solid #d0ddf0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ec-mail-reply-sep {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #f7f9fd;
  border-bottom: 1px solid #e5eaf3;
}

.ec-mail-reply-sep-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234D);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ec-mail-reply-composer {
  padding: 0;
}

.ec-mail-reply-meta {
  border-bottom: 1px solid #e8ecf3;
}

.ec-mail-reply-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid #f0f2f7;
  min-height: 38px;
}

.ec-mail-reply-champ:last-child {
  border-bottom: none;
}

.ec-mail-reply-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  min-width: 48px;
  flex-shrink: 0;
}

.ec-mail-reply-valeur {
  font-size: 14px;
  color: var(--c-bleu-900, #08234D);
}

.ec-mail-reply-input-objet {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--c-bleu-900, #08234D);
  padding: 0;
  outline: none;
  font-family: inherit;
}

.ec-mail-reply-textarea {
  width: 100%;
  min-height: 160px;
  border: none;
  border-top: 1px solid #e8ecf3;
  resize: vertical;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-texte);
  padding: 14px 16px;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
}

.ec-mail-reply-textarea:focus {
  outline: none;
  background: #fafcff;
}

.ec-mail-reply-original-wrap {
  padding: 10px 16px;
  border-top: 1px solid #e8ecf3;
}

.ec-mail-reply-toggle {
  background: none;
  border: none;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}

.ec-mail-reply-toggle:hover {
  color: var(--c-bleu-500, #6999D8);
}

.ec-mail-reply-original {
  margin-top: 10px;
  padding: 12px;
  background: #f7f9fd;
  border-radius: 6px;
  border-left: 3px solid #d0ddf0;
}

.ec-mail-reply-original-entete {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 8px;
  font-style: italic;
}

.ec-mail-reply-original-corps {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

.ec-mail-reply-actions {
  padding: 12px 16px;
  border-top: 1px solid #e8ecf3;
  display: flex;
  justify-content: flex-end;
}

/* Scène 4 — verrouillage du layout pendant la rédaction du courriel */
.ec-mail-layout--composer-actif .ec-mail-sidebar,
.ec-mail-layout--composer-actif .ec-mail-liste-col {
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.25s;
}

/* Scintillement bouton Envoyer quand le message est prêt */
@keyframes ec-btn-scintiller {
  0%   { box-shadow: 0 0 0 0 rgba(105, 153, 216, 0.7); }
  60%  { box-shadow: 0 0 0 8px rgba(105, 153, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(105, 153, 216, 0); }
}

.ec-btn-scintiller {
  animation: ec-btn-scintiller 1.4s ease-in-out infinite;
}

.ec-mail-reply-confirmation {
  padding: 28px 24px;
  text-align: center;
}

.ec-mail-reply-confirmation-icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto 12px;
}

.ec-mail-reply-confirmation-texte {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-titre);
  margin: 0 0 4px;
}

.ec-mail-reply-confirmation-sous {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.ec-mail-reply-confirme {
  padding: 16px 24px;
}

.ec-mail-reply-confirme .ec-mail-reply-confirmation-texte {
  font-size: 13px;
  font-weight: 500;
  color: #16a34a;
}

/* =====================================================================
   ONGLET COURRIELS — Nouveau courriel Scène 4
===================================================================== */

.ec-mail-nouveau-zone {
  padding: 24px;
}

.ec-mail-nouveau-titre {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
  margin: 0 0 16px;
}

/* =====================================================================
   TWEETBOOK — Fil DM Scène 4
===================================================================== */

.ec-scene4-dm-thread {
  margin-top: 12px;
  border: 1.5px solid var(--c-border, #d0ddf0);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-surface-1);
  animation: ec-fade-in 0.25s ease both;
}

.ec-dm-thread-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border-subtle, #e1e7f2);
}

.ec-dm-thread-avatar-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-bleu-900, #08234D);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-dm-thread-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-dm-thread-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-titre);
  margin: 0;
}

.ec-dm-thread-composer {
  padding: 16px;
}

.ec-dm-card--scene4-actif {
  border-left: 3px solid var(--c-bleu-500, #6999D8);
  background: rgba(105, 153, 216, 0.12);
  cursor: default;
}

/* =========================================================
   SCÈNE 6 — CONCLUSION ET DÉBRIEFING
   ========================================================= */

.ec-scene6-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--c-texte);
}

/* Bloc enseignant */
.ec-scene6-enseignant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px 16px;
}

.ec-scene6-avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-jaune-500, #d9b40f);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bleu-900, #08234D);
  flex-shrink: 0;
}

.ec-scene6-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-scene6-initiales {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-jaune-500, #d9b40f);
  font-family: Montserrat, Inter, sans-serif;
}

.ec-scene6-enseignant-nom {
  font-size: 14px;
  color: var(--c-texte-secondaire);
  text-align: center;
}

/* Mot de conclusion */
.ec-scene6-mot {
  background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-1));
  border-left: 3px solid var(--c-jaune-500, #d9b40f);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
}

.ec-scene6-mot-texte {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-texte);
  white-space: pre-line;
}

.ec-scene6-notifications {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-scene6-notifications .ec-scene2-cafe-notif,
.ec-scene6-notifications .ec-scene2-cafe-complete {
  margin-top: 0;
}

/* Indicateurs progressifs */
.ec-scene6-indicateurs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--c-surface-subtle);
  border-radius: 10px;
  border: 1px solid var(--c-border-subtle);
}

.ec-scene6-indicateur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.ec-scene6-indicateur--ok {
  background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface-1));
}

.ec-scene6-check {
  font-size: 18px;
  width: 24px;
  text-align: center;
  color: var(--c-texte-muted);
  flex-shrink: 0;
  transition: color 0.2s;
}

.ec-scene6-indicateur--ok .ec-scene6-check {
  color: var(--c-success);
}

.ec-scene6-ind-label {
  font-size: 14px;
  color: var(--c-texte);
  flex: 1;
}

.ec-scene6-indicateur--ok .ec-scene6-ind-label {
  color: var(--c-texte-secondaire);
  text-decoration: line-through;
}

.ec-scene6-action-btn {
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Section fermeture */
.ec-scene6-fermer {
  margin-top: 8px;
  padding: 28px 24px;
  background: rgba(217, 180, 15, 0.06);
  border: 1px solid rgba(217, 180, 15, 0.25);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ec-scene6-fermer--hidden {
  display: none;
}

.ec-scene6-fermer-texte {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-texte);
  max-width: 480px;
}

.ec-btn--fermer-cas {
  background: var(--c-jaune-900, #f1c815);
  color: var(--c-bleu-900, #08234D);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.ec-btn--fermer-cas:hover {
  background: #e0b410;
  transform: translateY(-1px);
}

.ec-btn--fermer-cas:disabled,
.ec-btn--fermer-cas:disabled:hover {
  background: #d8dee9;
  color: #6f7d91;
  cursor: not-allowed;
  transform: none;
}

/* Email synthèse dans la liste des courriels */
.ec-mail-item--synthese {
  border-left: 3px solid var(--c-jaune-500, #d9b40f);
  background: rgba(217,180,15,0.04);
}

.ec-mail-item--synthese:hover {
  background: rgba(217,180,15,0.08);
}

.ec-mail-tag--synthese {
  background: rgba(217,180,15,0.15);
  color: var(--c-jaune-500, #d9b40f);
  border: 1px solid rgba(217,180,15,0.3);
}

.ec-btn-telecharger-synthese {
  font-size: 12px;
}

/* Synthèse detail */
.ec-synthese-corps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ec-synthese-scene {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ec-synthese-scene:last-child {
  border-bottom: none;
}

.ec-synthese-scene-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ec-synthese-choix, .ec-synthese-trace {
  font-size: 14px;
  line-height: 1.6;
  margin: 4px 0;
  color: #333;
}

.ec-synthese-vide {
  font-size: 13px;
  color: #888;
}

/* Post Planif dans Tweetbook */
.ec-post-planif-card {
  border-left: 3px solid var(--c-jaune-500, #d9b40f);
}

.ec-post-avatar--planif {
  background-color: var(--c-bleu-900, #08234D);
  background-image: url("../images/logo/texte_only_blanc.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 82%;
  color: transparent;
  font-weight: 700;
  font-size: 12px;
}

/* Éditeur — section photo enseignant */
.ec-section-photo-enseignant .ec-photo-enseignant-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.ec-photo-enseignant-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--c-bleu-900, #08234D);
  border: 2px solid var(--c-jaune-500, #d9b40f);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ec-photo-initiales {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-jaune-500, #d9b40f);
}

#ec-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-photo-enseignant-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-btn-choisir-photo {
  cursor: pointer;
}

.ec-photo-feedback {
  font-size: 13px;
  color: #555;
}

.ec-photo-feedback--ok  { color: #2e7d32; }
.ec-photo-feedback--err { color: #c62828; }

.ec-section-badge-optionnel {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-texte-secondaire, #888);
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.ec-carte-liens-planif {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ec-carte-liaison-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ec-liaison-retirer {
  display: inline-grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.ec-liaison-retirer:hover {
  background: rgba(8, 35, 77, 0.12);
}

.ec-liaison-retirer:focus-visible {
  background: rgba(8, 35, 77, 0.12);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.ec-carte-lier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px dashed rgba(105, 153, 216, 0.6);
  border-radius: 999px;
  background: rgba(105, 153, 216, 0.08);
  color: var(--c-bleu-500, #6999D8);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ec-carte-lier:hover {
  background: rgba(105, 153, 216, 0.16);
  border-color: var(--c-bleu-500, #6999D8);
  color: var(--c-bleu-900, #08234D);
}

.ec-carte-lier-icone {
  flex-shrink: 0;
}

.ec-association-form {
  display: grid;
  gap: 14px;
}

.ec-association-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
}

.ec-association-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(8, 35, 77, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--c-texte, #1f2937);
  background: #fff;
}

.ec-association-form select:disabled {
  color: #777;
  background: #f5f5f5;
}

.ec-association-message {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-texte-secondaire, #555);
}

.ec-association-seances-info {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(105, 153, 216, 0.08);
  font-size: 12.5px;
  color: var(--c-bleu-900, #08234D);
}

.ec-association-seances-titre {
  margin: 0 0 4px;
  font-weight: 600;
}

.ec-association-seances-liste {
  margin: 0;
  padding-left: 18px;
}

.ec-association-seances-liste li {
  margin: 2px 0;
}

/* ===================================================================
   MODAL « Lier l'étude de cas » — blocs OA répétables par projet
=================================================================== */

/* Élargit le modal générique pour le formulaire à blocs */
.ec-assoc-modal .modal-generic-content {
  max-width: 640px;
  width: min(640px, 94vw);
}

.ec-assoc-modal .modal-generic-body {
  max-height: 65vh;
  overflow-y: auto;
}

.ec-assoc {
  display: grid;
  gap: 14px;
}

.ec-assoc-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-texte-secondaire, #555);
}

#ec-assoc-blocs {
  display: grid;
  gap: 14px;
}

.ec-assoc-bloc {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(8, 35, 77, 0.14);
  border-radius: 10px;
  background: rgba(105, 153, 216, 0.04);
}

.ec-assoc-bloc-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ec-assoc-bloc-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-bleu-500, #6999D8);
}

.ec-assoc-retirer {
  border: none;
  background: transparent;
  color: #b0392f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
}

.ec-assoc-retirer:hover {
  background: rgba(176, 57, 47, 0.1);
}

.ec-assoc-champ {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
}

.ec-assoc-champ select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(8, 35, 77, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--c-texte, #1f2937);
  background: #fff;
}

.ec-assoc-champ select:disabled {
  color: #777;
  background: #f5f5f5;
}

.ec-assoc-oa-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900, #08234D);
  margin-bottom: 6px;
}

.ec-assoc-oa-liste {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid rgba(8, 35, 77, 0.18);
  border-radius: 8px;
  background: #fff;
}

.ec-assoc-oa-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-texte, #1f2937);
  cursor: pointer;
  padding: 3px 2px;
}

.ec-assoc-oa-item input {
  margin-top: 2px;
  flex-shrink: 0;
}

.ec-assoc-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-texte-secondaire, #555);
}

.ec-assoc-cibles {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(217, 180, 15, 0.1);
  font-size: 12.5px;
  color: var(--c-bleu-900, #08234D);
}

.ec-assoc-cibles[hidden] {
  display: none;
}

.ec-assoc-cibles-titre {
  margin: 0 0 4px;
  font-weight: 600;
}

.ec-assoc-cibles-liste {
  margin: 0;
  padding-left: 18px;
}

.ec-assoc-cibles-liste li {
  margin: 2px 0;
}

.ec-assoc-cibles-vide {
  margin: 0;
  font-style: italic;
}

.ec-assoc-seance-champ[hidden] {
  display: none;
}

.ec-assoc-ajouter {
  justify-self: start;
  border: 1px dashed rgba(105, 153, 216, 0.6);
  border-radius: 8px;
  background: rgba(105, 153, 216, 0.06);
  color: var(--c-bleu-500, #6999D8);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ec-assoc-ajouter:hover {
  background: rgba(105, 153, 216, 0.14);
  border-color: var(--c-bleu-500, #6999D8);
}

/* ==========================================================
   Dark mode du modal de liaison (partage etudes de cas + direct)
   En sombre, --c-bleu-900 reste navy et certains fonds sont forces
   en blanc : on retablit le contraste avec les variables thematisees.
   ========================================================== */
:root[data-theme="dark"] .ec-assoc-champ,
:root[data-theme="dark"] .ec-assoc-oa-label {
  color: var(--c-texte);
}

:root[data-theme="dark"] .ec-assoc-bloc {
  border-color: var(--c-border-strong);
  background: var(--c-surface-2);
}

:root[data-theme="dark"] .ec-assoc-retirer {
  color: var(--c-danger);
}

:root[data-theme="dark"] .ec-assoc-champ select,
:root[data-theme="dark"] .ec-assoc-oa-liste {
  background: var(--c-surface-1);
  border-color: var(--c-border-strong);
  color: var(--c-texte);
}

:root[data-theme="dark"] .ec-assoc-champ select:disabled {
  color: var(--c-texte-muted);
  background: var(--c-surface-2);
}

:root[data-theme="dark"] .ec-assoc-oa-item {
  color: var(--c-texte);
}

:root[data-theme="dark"] .ec-assoc-cibles {
  color: var(--c-texte);
  background: rgba(217, 180, 15, 0.14);
}

/* ===================================================================
   MODAL TUTORIEL
=================================================================== */

/* Backdrop — z-index 1097 — la surbrillance (1098) passe au-dessus */
.ec-tuto-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1097;
  background: rgba(8, 35, 77, 0.6);
}

.ec-tuto-backdrop[hidden] {
  display: none;
}

/* Élément mis en surbrillance — remonte au-dessus du backdrop */
.ec-tuto-surbrillance {
  position: relative;
  z-index: 1098;
  border-radius: 8px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c-bleu-500, #6999D8), 0 0 18px 4px rgba(105, 153, 216, 0.4);
  animation: ec-tuto-pulse 1.8s ease-in-out infinite;
}

@keyframes ec-tuto-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c-bleu-500, #6999D8), 0 0 18px 4px rgba(105, 153, 216, 0.35);
  }
  50% {
    box-shadow: 0 0 0 3px #fff, 0 0 0 8px var(--c-bleu-500, #6999D8), 0 0 28px 8px rgba(105, 153, 216, 0.6);
  }
}

/* Wrapper du modal — z-index 1099, ne bloque pas les clics hors de la carte */
.ec-tuto-overlay {
  position: fixed;
  inset: 0;
  z-index: 1099;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.ec-tuto-overlay[hidden] {
  display: none;
}

.ec-tuto-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(8, 35, 77, 0.22);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  animation: ec-tuto-fadein 0.2s ease;
  pointer-events: all;
}

@keyframes ec-tuto-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ec-tuto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}

.ec-tuto-step-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-bleu-500, #6999D8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ec-tuto-btn-x {
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
}

.ec-tuto-btn-x:hover {
  color: #444;
}

.ec-tuto-corps {
  padding: 20px 28px 24px;
  text-align: center;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ec-tuto-icone {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
}

.ec-tuto-titre {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-bleu-900, #08234D);
  margin: 0 0 10px;
}

.ec-tuto-texte {
  font-size: 14px;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
  max-width: 360px;
}

.ec-tuto-cest-parti {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-bleu-500, #6999D8);
  animation: ec-tuto-fadein 0.3s ease;
}

.ec-tuto-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 20px;
  border-top: 1px solid #f0f0f0;
  gap: 10px;
}

.ec-tuto-btn-passer {
  background: none;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.ec-tuto-btn-passer:hover {
  color: #444;
  background: #f5f5f5;
}

.ec-tuto-btn-suivant {
  min-width: 120px;
}

/* ============================================================
   EC DASHBOARD — Menu 3 points (carte étude de cas)
   ============================================================ */
.ec-dropdown-actions {
  min-width: auto;
}

.ec-dropdown-actions .dropdown__trigger {
  width: auto;
  padding: 6px 10px;
  justify-content: center;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--c-surface-1);
  color: var(--c-texte-secondaire);
}

.ec-dropdown-actions .dropdown__trigger:hover {
  background: var(--c-surface-hover);
  color: var(--c-texte);
}

.ec-dropdown-actions .dropdown__menu {
  right: 0;
  left: auto;
  min-width: 220px;
}

.ec-dropdown-actions .context-menu__item.danger {
  color: var(--c-danger);
}

/* ============================================================
   Joueur responsive hardening
   ============================================================ */

.ec-joueur-page {
  overflow-x: hidden;
}

.ec-game-brand,
.ec-scene-layout,
.ec-scene-droite,
.ec-scene-col-contenu,
.ec-mail-layout,
.ec-mail-liste-col,
.ec-mail-detail,
.ec-edutweet-layout,
.ec-edutweet-layout > *,
.ec-post-auteur-info,
.ec-profil-nom-group,
.ec-mail-reply-input-objet {
  min-width: 0;
}

#ec-game-brand-titre,
.ec-portrait-nom,
.ec-portrait-cours,
.ec-profil-nom,
.ec-profil-handle,
.ec-post-auteur-nom,
.ec-post-handle {
  overflow: hidden;
  text-overflow: ellipsis;
}

#ec-game-brand-titre {
  white-space: nowrap;
}

.ec-scene-titre-joueur,
.ec-scene-texte-joueur,
.ec-scene-consigne,
.ec-trace-titre,
.ec-trace-consigne,
.ec-mail-detail-titre,
.ec-mail-detail-corps,
.ec-mail-reply-valeur,
.ec-post-texte,
.ec-post-fil,
.ec-journal-article-titre,
.ec-journal-article-chapeau,
.ec-journal-article-texte {
  overflow-wrap: anywhere;
}

.ec-mail-item-expediteur,
.ec-mail-item-objet,
.ec-mail-item-preview {
  min-width: 0;
}

/* ======================================================
   SOLDE DE JETONS PLANIF (éditeur — zone boutons)
====================================================== */

.ec-solde-jetons-et-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

#ec-solde-jetons-wrap {
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

#ec-solde-jetons-wrap.ec-solde-jetons--animation {
  background: #fff3cd;
  border-color: #f59e0b;
  transform: scale(1.05);
}

#ec-solde-jetons-wrap.ec-solde-jetons--mis-a-jour {
  background: #d1fae5;
  border-color: #34d399;
  transform: scale(1.05);
}

/* ======================================================
   MODAL CONFIRMATION JETON PLANIF
====================================================== */

.ec-jeton-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 35, 77, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
}
.ec-jeton-modal-overlay[hidden] {
  display: none;
}

.ec-jeton-modal-boite {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(8, 35, 77, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ec-jeton-modal-titre {
  font-family: var(--font-titres);
  font-size: 20px;
  color: var(--c-titre);
  margin: 0;
}

.ec-jeton-modal-texte {
  font-size: 15px;
  color: var(--c-texte);
  margin: 0;
  line-height: 1.6;
}

.ec-jeton-modal-solde {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef2fb;
  border: 1px solid #c5d5f5;
  border-radius: 10px;
  padding: 14px 18px;
  flex-wrap: wrap;
  transition: background 0.3s, border-color 0.3s;
}

.ec-jeton-modal-solde-icone {
  font-size: 20px;
  line-height: 1;
}

.ec-jeton-modal-solde-icone.planif-jeton {
  font-size: 0.72rem;
  line-height: 1;
}

.ec-jeton-modal-solde-avant {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-bleu-900);
  opacity: 0.4;
  text-decoration: line-through;
}

.ec-jeton-modal-solde-fleche {
  font-size: 16px;
  color: #8da3c0;
}

.ec-jeton-modal-solde-apres {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-bleu-900);
}

.ec-jeton-modal-solde-label {
  font-size: 13px;
  color: #5a6f8e;
  margin-left: 2px;
}

.ec-jeton-modal-solde--confirme {
  background: #fff3cd;
  border-color: #f59e0b;
}

.ec-jeton-modal-solde--succes {
  background: #d1fae5;
  border-color: #34d399;
}

.ec-jeton-modal-solde--succes .ec-jeton-modal-solde-apres {
  animation: ec-jeton-apres-pulse 0.45s ease forwards;
}

@keyframes ec-jeton-apres-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); color: #16a34a; }
  100% { transform: scale(1); color: var(--c-bleu-900); }
}

.ec-jeton-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@keyframes ec-shimmer-achat {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

#ec-jeton-modal-acheter {
  background: linear-gradient(
    110deg,
    #c9a50d 0%,
    #f1c815 30%,
    #fff5b4 50%,
    #f1c815 70%,
    #c9a50d 100%
  );
  background-size: 250% auto;
  animation: ec-shimmer-achat 2.2s linear infinite;
  color: var(--c-bleu-900, #08234D);
  font-weight: 700;
  border-color: #b89200;
  text-decoration: none;
}

#ec-jeton-modal-acheter:hover {
  filter: brightness(1.08);
}

.ec-mail-item-badges,
.ec-post-stats {
  flex-wrap: wrap;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .ec-mail-layout {
    grid-template-columns: 180px minmax(260px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .ec-scene-gauche {
    padding: 16px;
  }

  .ec-portrait-bloc {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: center;
  }

  .ec-portrait-img,
  .ec-portrait-initiales-avatar {
    grid-row: 1 / span 2;
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    font-size: 30px;
    letter-spacing: 0;
  }

  .ec-portrait-nom,
  .ec-portrait-cours {
    grid-column: 2;
  }

  .ec-mail-layout.ec-mail--detail-ouvert .ec-mail-detail {
    min-height: calc(100vh - 116px);
  }

  .ec-mail-retour-btn {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface-1);
  }

  .ec-edutweet-layout {
    gap: 16px;
  }
}

@media (max-width: 700px) {
  .ec-cafe-overlay {
    padding: 10px;
    align-items: stretch;
  }

  .ec-cafe-fenetre {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 20px);
    min-height: 0;
  }

  .ec-cafe-visuel {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px;
  }

  .ec-cafe-perso-img {
    width: 86px;
    height: 86px;
    margin: 0;
  }

  .ec-cafe-perso-initiales {
    width: 76px;
    height: 76px;
    margin: 0;
    font-size: 24px;
  }

  .ec-cafe-dialogue-zone {
    min-height: 0;
    padding: 14px;
  }

  .ec-cafe-dialogue {
    max-height: min(42vh, 300px);
  }
}

@media (max-width: 600px) {
  .ec-game-header {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 14px;
  }

  .ec-game-brand {
    min-width: 0;
  }

  .ec-joueur-etat {
    min-height: calc(100dvh - 116px);
    padding: 16px;
  }

  .ec-tabs {
    -webkit-overflow-scrolling: touch;
  }

  .ec-tab {
    min-width: 108px;
  }

  .ec-scene-gauche {
    gap: 14px;
  }

  .ec-portrait-bloc {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .ec-portrait-img,
  .ec-portrait-initiales-avatar {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }

  .ec-scene-main {
    padding: 20px 16px;
    border-radius: 8px;
  }

  .ec-scene-titre-joueur {
    font-size: 22px;
  }

  .ec-scene-actions {
    justify-content: stretch;
  }

  .ec-scene-actions .btn,
  .ec-corridor-action .btn,
  .ec-intro-actions .btn,
  .ec-form-actions .btn {
    width: 100%;
  }

  .ec-form-actions,
  .ec-mail-reply-actions,
  #ec-cafe-cta {
    justify-content: stretch;
  }

  .ec-genre-choix,
  .ec-scene4-choix-contact {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .ec-mail-detail-header,
  .ec-mail-detail-meta,
  .ec-mail-detail-corps,
  .ec-mail-signature,
  .ec-mail-nouveau-zone,
  .ec-mail-reply-zone {
    margin-left: 0;
    margin-right: 0;
  }

  .ec-mail-detail-header {
    align-items: stretch;
    padding: 14px 16px;
  }

  .ec-mail-detail-titre {
    font-size: 19px;
    padding: 14px 16px 8px;
  }

  .ec-mail-detail-meta {
    padding: 0 16px 14px;
  }

  .ec-mail-detail-corps,
  #ec-doc-modal-corps {
    padding: 16px;
  }

  .ec-mail-signature {
    margin: 0 16px 20px;
  }

  .ec-mail-marquer-lu-btn,
  .ec-mail-suivi-btn,
  .ec-btn-telecharger-synthese,
  .ec-mail-reply-actions .btn {
    width: 100%;
  }

  .ec-mail-reply-zone {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .ec-mail-reply-champ {
    align-items: flex-start;
  }

  .ec-mail-reply-valeur {
    min-width: 0;
  }

  .ec-edutweet-layout .ec-post,
  .ec-edutweet-layout .ec-profil-card,
  .ec-edutweet-layout .ec-edutweet-fil-header {
    border-radius: 8px;
    padding: 14px;
  }

  .ec-post-auteur-row {
    align-items: flex-start;
  }

  .ec-post-actions {
    flex-wrap: wrap;
  }

  .ec-post-action-btn {
    min-width: 33%;
    white-space: normal;
  }

  .ec-doc-modal-overlay,
  .ec-journal-modal-wrap,
  .ec-appel-overlay,
  .ec-intro-modal-overlay,
  .ec-tuto-overlay {
    padding: 10px;
  }

  .ec-doc-modal-contenu,
  .ec-journal-modal-box {
    max-height: calc(100dvh - 20px);
    border-radius: 8px;
  }

  .ec-doc-modal-header {
    padding: 12px 14px;
  }

  .ec-doc-infographic-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .ec-infographic-lightbox {
    padding: 52px 10px 64px;
  }

  .ec-infographic-lightbox-close {
    top: 10px;
    right: 10px;
  }

  .ec-lightbox-zoom-controls {
    bottom: 12px;
    padding: 4px 8px;
  }

  .ec-lb-ctrl-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .ec-appel-telephone {
    min-height: 0;
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
  }

  .ec-appel-entete {
    padding: 20px 16px 14px;
  }

  .ec-appel-avatar {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
  }

  .ec-appel-dialogue {
    padding: 14px;
  }

  .ec-appel-cta {
    padding: 12px 14px 14px;
  }

  .ec-journal-topbar,
  .ec-journal-header,
  .ec-journal-subnav {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ec-journal-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ec-journal-name {
    white-space: normal;
    font-size: 20px;
  }

  .ec-journal-header-slogan {
    text-align: left;
  }

  .ec-journal-body {
    padding: 22px 16px 42px;
  }

  .ec-tuto-modal {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 12px;
  }

  .ec-tuto-corps {
    min-height: 0;
    padding: 18px 20px 20px;
  }
}

@media (max-width: 380px) {
  .ec-tab {
    min-width: 96px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .ec-identification-card,
  .ec-intro-card,
  .ec-fin-card {
    border-radius: 8px;
  }

  .ec-scene-main {
    padding: 18px 14px;
  }

  .ec-post-action-btn {
    min-width: 50%;
  }
}

/* ======================================================
   RÉSUMÉ DES RÉPONSES (aperçu enseignant)
====================================================== */

#ec-resume-conteneur {
  margin-top: 24px;
}

/* Cartes de statistiques globales */
.ec-resume-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.ec-resume-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f7f9fd 100%);
  border: 1.5px solid #d0ddf0;
  border-radius: 12px;
  text-align: center;
}

.ec-resume-stat-valeur {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-bleu-900);
}

.ec-resume-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #5a6b85;
}

/* Blocs (choix, abandons, analyse) */
.ec-resume-bloc {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.ec-resume-bloc-titre {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-bleu-900);
  margin: 0 0 6px;
}

.ec-resume-bloc-aide {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
}

.ec-resume-sous-titre {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-bleu-900);
  margin: 14px 0 6px;
}

/* Barres de répartition des choix */
.ec-resume-barres {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.ec-resume-barre-ligne {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 2fr auto;
  align-items: center;
  gap: 12px;
}

.ec-resume-barre-label {
  font-size: 14px;
  color: #1f2a3d;
}

.ec-resume-barre-piste {
  position: relative;
  height: 14px;
  background: #eef2f7;
  border-radius: 7px;
  overflow: hidden;
}

.ec-resume-barre-remplissage {
  display: block;
  height: 100%;
  min-width: 2px;
  background: linear-gradient(90deg, var(--c-bleu-500) 0%, var(--c-bleu-200) 100%);
  border-radius: 7px;
}

.ec-resume-barre-valeur {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-bleu-900);
  white-space: nowrap;
}

/* Listes (tendances, pistes, abandons) */
.ec-resume-liste {
  margin: 6px 0 0;
  padding-left: 20px;
}

.ec-resume-liste li {
  font-size: 14px;
  line-height: 1.5;
  color: #1f2a3d;
  margin-bottom: 6px;
}

.ec-resume-synthese {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2a3d;
  margin: 0 0 6px;
}

.ec-resume-bloc--analyse {
  border-left: 5px solid var(--c-bleu-500);
  background: #f7f9fd;
}

.ec-resume-vide {
  font-size: 15px;
  color: #6b7280;
}

@media (max-width: 640px) {
  .ec-resume-barre-ligne {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ec-resume-barre-valeur {
    justify-self: start;
  }
}