:root { --brand:#5b7cff; --muted:#6b7280; --bg:#f8fafc; --bd:#e5e7eb; --ink:#0f172a; }      
*{box-sizing:border-box}      
      
html,body{margin:0;padding:0}      
body.bg{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}      
      
/* Layout */      
.page{max-width:72rem;margin:0 auto;padding:1.5rem 1rem;display:grid;gap:1.5rem}      
/* Ajout d'une classe pour prendre toute la largeur pour le switch */
.page .full-width { grid-column: 1 / -1; } 
@media(min-width:1024px){ .page{grid-template-columns:2fr 1fr} }
/* Le layout à deux colonnes de la page s'applique à chaque mode */
#screenRecordMode .col-left, #facecamPrompterMode .col-left {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  grid-column: 1 / span 1; /* S'assure que la colonne de gauche prend la première section de la grille */
}
#screenRecordMode .col-right, #facecamPrompterMode .col-right {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  grid-column: 2 / span 1; /* S'assure que la colonne de droite prend la seconde section de la grille */
}
@media(max-width:1023px){
  #screenRecordMode .col-left, #facecamPrompterMode .col-left,
  #screenRecordMode .col-right, #facecamPrompterMode .col-right {
    grid-column: auto; /* Supprime les colonnes explicites pour les petits écrans */
  }
}
      
/* Card */      
.card{background:#fff;border:1px solid var(--bd);border-radius:1rem;box-shadow:0 1px 2px rgba(0,0,0,.03);padding:1.25rem}      
      
/* Typography */      
.title{font-weight:800;font-size:1.125rem;margin:0}      
.title.sm{font-size:1rem}      
.title.lg{font-size:1.125rem}      
.muted{color:var(--muted)}      
.strong{font-weight:700}      
.text-sm{font-size:.875rem}      
.text-xs{font-size:.75rem}      
      
/* UI */      
.badge{background:#e9efff;color:#3355ff;font-weight:700;padding:.25rem .6rem;border-radius:999px;font-size:.75rem}      
.btn{border-radius:.75rem;font-weight:700;padding:.6rem .9rem;border:0;cursor:pointer}      
.btn.primary{background:var(--brand);color:#fff}      
.btn.soft{background:#f3f4f6}      
.btn.ghost{background:#eef2ff}      
.btn.full{width:100%}      
.btn.active-mode { background:var(--brand); color:#fff; border-color:var(--brand); } /* Nouveau style pour le mode actif */    
.btn:disabled{opacity:.5;cursor:not-allowed}      
.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}      
.space-between{justify-content:space-between}      
.grid{display:grid;gap:1rem}      
.two{grid-template-columns:1fr}      
@media(min-width:640px){ .two{grid-template-columns:1fr 1fr} }      
.gap-8{gap:.5rem}      
.mt-6{margin-top:.375rem}      
.mt-8{margin-top:.5rem}      
.mt-12{margin-top:.75rem}      
.mt-16{margin-top:1rem}      
.mt-20{margin-top:1.25rem}      
.hidden{display:none!important}      
      
/* Video & log */      
.video{width:100%;background:#000;border:1px solid var(--bd);border-radius:.75rem}      
.log{white-space:pre-wrap;background:#0b1220;color:#f8fafc;border:1px solid #0e1a32;padding:.75rem;border-radius:.75rem;height:14rem;overflow:auto}      
.h-56{height:14rem}      
      
/* Misc */      
.rounded{border-radius:.75rem}      
.border{border:1px solid var(--bd)}      
.box{padding:.75rem;border-radius:.75rem;border:1px solid var(--bd)}      
.spinner{ width:1rem;height:1rem;border:2px solid #c7d2fe;border-top-color:#1d4ed8;border-radius:9999px;animation:spin 1s linear infinite }      
@keyframes spin{to{transform:rotate(360deg)}}      
.accent{accent-color:#4f46e5}      
    
/* Camera Overlay */    
#cameraOverlay {    
  position: absolute;    
  z-index: 1000;    
  bottom: 20px;    
  right: 20px;    
  width: 280px;    
  height: 210px;    
  border-radius: 0.75rem;    
  border: 3px solid var(--brand);    
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);    
  background: #000;    
  cursor: move;    
  resize: both;    
  overflow: hidden;    
  display: none; /* Initiallement caché, JS/body class le montrera */
}    
#cameraPreview {    
  width: 100%;    
  height: 100%;    
  display: block;    
  object-fit: cover;    
  transform: scaleX(-1); /* Effet miroir */    
}    
    
/* NOUVEAU: Styles pour la compatibilité */    
.ok { color: #22c55e; } /* Vert */    
.warn { color: #f59e0b; } /* Orange */    
.err { color: #ef4444; } /* Rouge */  

/* NOUVEAU: Styles pour le mode téléprompteur */
/* Gestion de la visibilité des modes via les classes sur le body */
body.screen-record-active #facecamPrompterMode {
  display: none;
}
body.facecam-prompter-active #screenRecordMode {
  display: none;
}

.prompter-layout {
  grid-template-columns: 2fr 1fr; /* Texte prompteur plus large que les notes */
  gap: 1.5rem;
  align-items: stretch; /* S'assure que les colonnes prennent la même hauteur */
}

.prompter-col {
  display: flex;
  flex-direction: column;
}

.prompter-text-container {
  flex-grow: 1; /* Prend l'espace disponible */
  height: 400px; /* Hauteur fixe pour le défilement */
  border: 1px solid var(--bd);
  border-radius: 0.75rem;
  overflow: hidden; /* Défilement contrôlé par JS */
  background: #000; /* Fond noir pour le prompteur */
  padding: 1rem;
}

.prompter-textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: white; /* Texte blanc sur fond noir */
  font-family: monospace; /* Police plus neutre pour la lecture */
  font-size: 28px; /* Taille par défaut, sera contrôlée par JS */
  line-height: 1.5;
  outline: none;
  resize: none;
  text-align: left; /* Par défaut, peut être changé */
  white-space: pre-wrap; /* Conserve les retours à la ligne et les espaces */
  word-wrap: break-word; /* Casse les mots longs */
  overflow-y: scroll; /* Pour permettre le défilement manuel */
  padding-right: 15px; /* Pour éviter que le texte ne soit sous la scrollbar native */
}

.prompter-textarea.notes-textarea {
  color: #ccc; /* Légèrement plus estompé pour les notes */
  background: var(--bg);
  border: 1px solid var(--bd);
  height: 100%;
  overflow-y: auto;
  font-size: 1rem;
  padding: 0.75rem;
}

.prompter-textarea::-webkit-scrollbar {
  width: 8px;
}
.prompter-textarea::-webkit-scrollbar-thumb {
  background-color: var(--muted);
  border-radius: 4px;
}
.prompter-textarea::-webkit-scrollbar-track {
  background-color: transparent;
}


/* Ajustements pour les sliders */
.slider {
  width: 150px; /* Taille fixe pour les sliders */
}
.prompter-controls {
  flex-wrap: nowrap; /* Empêche les boutons de se wrap */
  justify-content: flex-start;
}

/* Positionnement et visibilité de la caméra en mode prompteur vs screen-record */
body.screen-record-active #cameraOverlay {
  display: block; /* Visible en mode screen-record si activé */
  bottom: 20px;
  right: 20px;
  top: auto;
  left: auto;
  width: 280px;
  height: 210px;
  z-index: 1000;
}
body.facecam-prompter-active #cameraOverlay {
  display: block; /* Visible en mode facecam-prompter si activé */
  top: 20px;
  right: 20px;
  bottom: auto; /* Supprime le bottom si top est défini */
  left: auto; /* Supprime le left si right est défini */
  width: 240px; /* Taille un peu plus petite */
  height: 180px;
  border-color: var(--brand); /* Garde la couleur de la marque */
  z-index: 1002; /* Au-dessus de tout le prompteur */
}

/* Masquer le panneau d'options caméra en mode prompteur */
body.facecam-prompter-active #cameraOptionsPanel {
  display: none !important;
}
/* Assurer que le panneau d'options caméra est visible par défaut en mode screen-record */
body.screen-record-active #cameraOptionsPanel {
    /* `display: grid;` est déjà défini par .grid, donc pas besoin de le redéfinir ici,
       juste s'assurer qu'il n'est pas caché par .hidden par défaut si JS ne l'active pas. */
}