:root {
  --purple: #7b3fe4;
  --red: #cc0000;
  --bg-soft: #f6ece9;
  --text: #202124;
  --border: #ddd;
}

* { box-sizing: border-box; }

/* Empêche tout débordement horizontal sur mobile (image trop large collée
   dans le contenu éditable, mot/lien trop long, etc.) : quoi qu'il arrive,
   la page ne peut pas être plus large que l'écran. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.55;
}

/* Toute image, vidéo ou tableau inséré (notamment via l'éditeur de la page
   d'accueil) doit rester dans les limites de son conteneur, jamais dépasser
   la largeur de l'écran. */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ---------- HEADER / HERO ---------- */
.hero {
  background-size: cover;
  background-position: center;
  min-height: 260px;
  display: flex;
  align-items: center;
}
.hero-overlay {
  background: rgba(0,0,0,0.35);
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
}
.hero-overlay h1 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}
.logo {
  height: 48px;
}

/* ---------- NEWS BANNER (défilant, dynamique Firestore) ---------- */
.news-banner {
  position: relative; /* nécessaire pour que certains navigateurs mobiles
                          (Safari iOS notamment) composent correctement
                          l'animation à l'intérieur d'un conteneur "overflow:hidden" */
  background: var(--bg-soft);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.news-banner-track {
  display: flex;
  width: max-content;
  padding-left: 32px;
  -webkit-animation: news-scroll 24s linear infinite;
  animation: news-scroll 24s linear infinite;
  will-change: transform; /* force le rendu accéléré (GPU) sur mobile, évite
                              qu'une animation "transform" reste figée sur
                              certains navigateurs Android/iOS */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.news-banner-track,
.news-text {
  flex-shrink: 0; /* empêche le texte de se faire compresser/rogner au lieu
                      de déborder, ce qui casserait le calcul du défilement */
}
/* Pause au survol UNIQUEMENT sur les appareils avec une vraie souris.
   Sur smartphone/tablette (écran tactile), un simple appui peut sinon
   déclencher un ":hover" qui reste "collé" et bloque le défilement en continu. */
@media (hover: hover) and (pointer: fine) {
  .news-banner:hover .news-banner-track {
    animation-play-state: paused;
  }
}
.news-text {
  color: var(--red);
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
  padding-right: 80px;
}
#news-text-dup {
  /* Copie masquée aux lecteurs d'écran : sert uniquement à boucler le défilement sans coupure visible. */
}
.news-meta {
  font-size: 0.8rem;
  color: #777;
  margin: 4px 32px 0;
}

@-webkit-keyframes news-scroll {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes news-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Remarque : on ne désactive plus l'animation via "prefers-reduced-motion".
   Ce réglage est activé par défaut (ou par erreur) sur de nombreux
   navigateurs mobiles/Android sans action volontaire de l'utilisateur,
   ce qui rendait le bandeau totalement statique sur smartphone alors que
   le défilement est une fonctionnalité demandée. Le bandeau défile donc
   désormais pour tout le monde ; la pause au survol (souris) reste
   disponible sur ordinateur pour ceux qui veulent lire tranquillement. */

/* ---------- CONTENT ---------- */
main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
.content-block {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
h2 {
  color: var(--purple);
  font-size: 1.25rem;
}
.axe h3 {
  margin-bottom: 4px;
}
.axe h3 span {
  font-weight: 400;
  font-size: 0.85rem;
  color: #555;
  display: block;
}
.new-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.axe {
  margin-bottom: 24px;
}

/* ---------- FORMS ---------- */
form, #login-box, #editor-box {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  gap: 4px;
}
label {
  font-weight: 600;
  margin-top: 10px;
  font-size: 0.9rem;
}
input, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
button {
  margin-top: 14px;
  align-self: flex-start;
  background: var(--purple);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
button:hover { opacity: 0.9; }
.form-status {
  font-size: 0.85rem;
  min-height: 1.2em;
}

.admin summary {
  cursor: pointer;
  color: var(--purple);
  font-weight: 600;
}
#editor-box {
  margin-top: 16px;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #777;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .hero-overlay { flex-direction: column; align-items: flex-start; }
}

/* ---------- TOPBAR / NAV COMPTE ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
#nav-user:not([hidden]) {
  display: flex; /* important : ":not([hidden])" évite d'écraser l'attribut
                     "hidden" que le script utilise pour cacher ce bloc
                     tant que la personne n'est pas connectée */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  justify-content: flex-end;
}
.nav-link {
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
}
.nav-link-btn {
  margin: 0;
  padding: 6px 14px;
  font-size: 0.85rem;
}
#nav-whoami {
  color: #777;
}

/* En-tête simplifié (pages internes : dashboard, admin, sujets) */
.site-header.simple {
  background: var(--purple);
}
.hero-overlay-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  color: #fff;
}
.brand-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}
.hero-overlay-simple #nav-whoami { color: rgba(255,255,255,0.8); }

/* ---------- ONGLETS CONNEXION / INSCRIPTION ---------- */
.access-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tab-btn {
  margin: 0;
  background: #eee;
  color: var(--text);
}
.tab-btn.active {
  background: var(--purple);
  color: #fff;
}
.radio-row {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}
.radio-label {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
}
.radio-label input { width: auto; }

/* ---------- PAVÉS (tuiles de navigation) ---------- */
.tiles {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.tile {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 28px 24px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease;
}
.tile:hover { transform: translateY(-3px); }
.tile-title { font-size: 1.3rem; font-weight: 700; }
.tile-sub { font-size: 0.9rem; opacity: 0.9; }
.tile-debutant { background: #2e7d32; }
.tile-avance { background: #1565c0; }
.tile-admin { background: #6a1b9a; }
.tile-subject { background: var(--purple); }

/* ---------- TABLEAU ADMIN ---------- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table select {
  padding: 4px 6px;
}
.admin-table button {
  margin: 0 4px 0 0;
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* ---------- FIL D'ARIANE PAGES SUJET ---------- */
.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--purple); }

/* ---------- ÉDITEUR DE QUIZ (admin) ---------- */
.quiz-question-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  max-width: 600px;
}
.quiz-question-block .remove-question-btn {
  background: #b3261e;
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* ---------- QUIZ (côté participant) ---------- */
.quiz-question {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  max-width: 640px;
}
.quiz-question p.question-text {
  font-weight: 600;
  margin: 0 0 8px;
}
.quiz-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 4px 0;
}
.quiz-choice input { width: auto; }
.quiz-feedback {
  margin-top: 6px;
  font-size: 0.85rem;
}
.quiz-feedback.correct { color: #2e7d32; }
.quiz-feedback.incorrect { color: #b3261e; }
.quiz-score {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--purple);
}

/* ---------- FORUM ---------- */
.thread-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--text);
}
.thread-card:hover { border-color: var(--purple); }
.thread-title {
  font-weight: 700;
  color: var(--purple);
}
.thread-meta {
  font-size: 0.8rem;
  color: #777;
}
.forum-message {
  padding: 12px 16px;
  border-left: 3px solid var(--purple);
  background: var(--bg-soft);
  border-radius: 4px;
  margin-bottom: 10px;
}
.forum-message-meta {
  font-size: 0.8rem;
  color: #777;
  margin: 0 0 4px;
}
.forum-message-text {
  margin: 0;
  white-space: pre-line;
}
.tile-forum { background: #e65100; }

/* ---------- SUPPORTS DU COURS / QUIZ D'ATELIER (pavés colorés par thème) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.tile-grid .tile {
  min-width: 0; /* laisse la grille gérer la largeur, évite tout débordement */
}
.tile-grid .tile-title,
.tile-grid .tile-sub {
  overflow-wrap: anywhere; /* casse les noms de fichiers/mots trop longs plutôt que de déborder */
}
.tile-grid .tile-sub {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* En dessous de 480px (petits smartphones) : une seule colonne, plutôt que de
   compter sur le calcul automatique de la grille (plus prévisible, garantit
   qu'aucun pavé ne peut se retrouver trop étroit ou déborder). */
@media (max-width: 480px) {
  .tile-grid {
    grid-template-columns: 1fr;
  }
}
/* Couleurs par thème, déterminées automatiquement d'après le début du nom
   de fichier (voir detectThemeFromFilename dans js/atelier-content.js) */
.tile-theme-windows { background: #0078d4; }      /* windows... -> bleu */
.tile-theme-bureautique { background: #00796b; }  /* bureautique... -> vert */
.tile-theme-internet { background: #6d4c41; }     /* internet... -> brun */
.tile-theme-ia { background: #ef6c00; }            /* ia... -> orange */
.tile-theme-non-classe { background: #607d8b; }   /* nom de fichier qui ne correspond à aucun thème -> gris */

/* ---------- ÉDITION DES PAVÉS DE RESSOURCES (page admin) ---------- */
.resource-meta-table input[type="text"],
.resource-meta-table select {
  width: 100%;
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
}
.resource-meta-table td {
  vertical-align: top;
}
.resource-meta-table .rm-file {
  font-size: 0.8rem;
  color: #666;
  word-break: break-all;
}
.resource-meta-table .rm-save-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
  margin: 0;
}
.resource-meta-table .rm-saved-tag {
  font-size: 0.75rem;
  color: #2e7d32;
  margin-left: 6px;
}

/* ---------- CONTENU ÉDITABLE DE LA PAGE D'ACCUEIL ---------- */
.wysiwyg-content h2 { margin-top: 1.6em; }
.wysiwyg-content h2:first-child { margin-top: 0; }
.wysiwyg-content h3 { margin-top: 1.2em; }
.wysiwyg-content {
  overflow-wrap: anywhere; /* casse les mots/liens trop longs plutôt que de laisser déborder */
}
.wysiwyg-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto; /* un tableau collé dans l'éditeur devient scrollable au lieu de déborder */
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f4f4f4;
}
.wysiwyg-toolbar select,
.wysiwyg-toolbar button {
  padding: 6px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.wysiwyg-toolbar button { min-width: 34px; font-weight: 700; }
.wysiwyg-toolbar button:hover { border-color: var(--purple); }
.toolbar-color-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.toolbar-color-label input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.wysiwyg-editable {
  min-height: 320px;
  max-height: 640px;
  overflow-y: auto;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: #fff;
}
.wysiwyg-editable:focus { outline: 2px solid var(--purple); outline-offset: -2px; }
.wysiwyg-editable ul { padding-left: 1.4em; }

.btn-secondary {
  background: #777;
}
.btn-secondary:hover {
  background: #5a5a5a;
}

/* ---------- FEUILLE DE PRÉSENCE (grille membres x dates) ---------- */
.attendance-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin: 10px 0;
}
.legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 4px;
  font-weight: 700;
  color: #fff;
}
.legend-swatch.att-present { background: #2e7d32; }
.legend-swatch.att-absent { background: #e57373; }

.attendance-table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 12px;
}
.attendance-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}
.attendance-table th, .attendance-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: center;
}
.attendance-table thead th {
  background: var(--bg-soft);
  position: sticky;
  top: 0;
  z-index: 2;
}
.attendance-table .att-date-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  text-align: left;
  min-width: 130px;
}
.attendance-table thead th.att-date-col {
  z-index: 3;
  background: var(--bg-soft);
}
.attendance-table td.att-date-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.attendance-table .att-delete-row-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  opacity: 0.45;
}
.attendance-table .att-delete-row-btn:hover { opacity: 1; }

.attendance-table td.att-present {
  background: #2e7d32;
  color: #fff;
  font-weight: 700;
}
.attendance-table td.att-absent {
  background: #e57373;
}
.attendance-table td.att-clickable {
  cursor: pointer;
}
.attendance-table td.att-clickable:hover {
  outline: 2px solid var(--purple);
  outline-offset: -2px;
}