/* Style pensé pour le FALC : grandes lettres, contrastes nets, peu d'éléments par écran. */

:root {
  --fond: #fbfaf5;
  --texte: #1c1c1c;
  --bleu: #8f2d3b;
  --bleu-clair: #f7e6e8;
  --vert: #2e7d32;
  --vert-clair: #e9f5e9;
  --orange: #b5590a;
  --orange-clair: #fdf1e6;
  --gris: #6b6b6b;
  --gris-clair: #eeeeea;
  --jaune: #a17d00;
  --jaune-clair: #fdf6d9;
  --bordure: #cfcfc4;
  --rayon: 14px;
  --ombre: 0 2px 6px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Verdana", "Arial", sans-serif;
  font-size: 19px;
  line-height: 1.6;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 18px 80px;
}

.cachee { display: none !important; }

h1 { font-size: 1.7em; margin: 0.3em 0; }
h2 { font-size: 1.35em; margin: 0.6em 0 0.3em; }
p { margin: 0.5em 0; }

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 3px solid var(--bleu);
  margin-bottom: 20px;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--bleu);
  text-decoration: none;
}

/* Petit menu pour revenir au portail commun ou passer à un autre logiciel. */
.nav-suite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.nav-suite a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gris-clair);
  color: var(--texte);
  text-decoration: none;
  font-size: 0.9em;
  font-weight: bold;
  border: 1px solid var(--bordure);
}
.nav-suite a:hover {
  background: var(--bleu-clair);
  border-color: var(--bleu);
}

.carte {
  background: white;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
  margin-bottom: 18px;
}

/* Une nouvelle notion se distingue nettement des cartes habituelles. */
.carte-lecon {
  background: var(--jaune-clair);
  border: 1px solid #ecd98f;
}
.carte-lecon h1, .carte-lecon .titre-competence-lecon { color: var(--jaune); }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  font-family: inherit;
  padding: 14px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: var(--bleu);
  color: white;
  font-weight: bold;
  min-height: 48px;
}
.bouton:hover { background: #7c3f14; }
.bouton:disabled { background: var(--gris-clair); color: var(--gris); cursor: not-allowed; }

.bouton.large { width: 100%; justify-content: center; font-size: 1.15em; padding: 18px; }
.bouton.secondaire { background: white; color: var(--bleu); border: 2px solid var(--bleu); }
.bouton.secondaire:hover { background: var(--bleu-clair); }
.bouton.discret { background: transparent; color: var(--gris); font-weight: normal; padding: 8px 10px; }
.bouton.discret:hover { background: var(--gris-clair); }
.bouton.succes { background: var(--vert); }
.bouton.succes:hover { background: #1f5c22; }

.bouton-son {
  background: var(--bleu-clair);
  color: var(--bleu);
  border: 1px solid var(--bleu);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.95em;
  cursor: pointer;
  min-height: 40px;
}
.bouton-son:hover { background: var(--bleu); color: white; }

.champ {
  width: 100%;
  font-size: 1.1em;
  font-family: inherit;
  padding: 14px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  margin: 8px 0 16px;
}
.champ:focus { outline: 3px solid var(--bleu); border-color: var(--bleu); }

label { font-weight: bold; display: block; margin-top: 10px; }

.ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ligne-fin { justify-content: flex-end; }
.espace-haut { margin-top: 18px; }
.espace-bas { margin-bottom: 10px; display: block; width: 100%; }
.boutons-choix { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: bold;
  margin: 2px 4px 2px 0;
}
.badge-cycle2 { background: #fde6f0; color: #a11d6b; }
.badge-cycle3 { background: #e6f0fd; color: #1c5d99; }
.badge-cycle4 { background: #eee6fd; color: #5b1da1; }

.fil-competence {
  background: var(--bleu-clair);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.fil-competence .titre-competence { font-weight: bold; color: var(--bleu); }

.question-image {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin: 0 auto 14px;
  padding: 10px;
  background: white;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: zoom-in;
}

.zoom-fond {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 30px 16px;
}
.zoom-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
.zoom-fermer {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  color: var(--texte);
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombre);
}

.qcm-choix {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1.05em;
  font-family: inherit;
  padding: 14px 16px;
  margin: 8px 0;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  background: white;
  cursor: pointer;
}
.qcm-choix:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.qcm-choix.choisi { border-color: var(--bleu); background: var(--bleu-clair); }
.qcm-choix.bonne-reponse { border-color: var(--vert); background: var(--vert-clair); }
.qcm-choix.mauvaise-reponse { border-color: var(--orange); background: var(--orange-clair); }
.qcm-choix:disabled { cursor: default; }

.frise-chronologique {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin: 16px 0;
  padding: 12px 8px 4px;
  border-top: 4px solid var(--bleu);
  position: relative;
}
.frise-case {
  flex: 1 1 140px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 8px;
  border-radius: 10px;
  transition: background 0.1s;
}
.frise-case.frise-cible { background: var(--bleu-clair); }
.frise-case::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bleu);
  margin-top: -18px;
  margin-bottom: 8px;
}
.frise-evenement { font-size: 0.95em; margin-bottom: 8px; }
.frise-date {
  font-weight: bold;
  font-size: 1.1em;
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 70px;
}
.frise-date.frise-vide { border: 2px dashed var(--bordure); color: var(--gris); background: var(--gris-clair); }
.frise-date.frise-remplie { border: 2px solid var(--bleu); background: var(--bleu-clair); color: var(--bleu); cursor: grab; touch-action: none; }
.frise-date.frise-remplie:active { cursor: grabbing; }

.frise-banque {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.1s;
}
.frise-banque.frise-cible { background: var(--orange-clair); }
.frise-date-choix {
  font-size: 1.05em;
  font-family: inherit;
  padding: 10px 18px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  background: white;
  cursor: grab;
  font-weight: bold;
  touch-action: none;
}
.frise-date-choix:active { cursor: grabbing; }
.frise-date-choix:hover:not(:disabled) { border-color: var(--bleu); background: var(--bleu-clair); }
.frise-date-choix.utilisee { opacity: 0.35; cursor: default; }
.frise-date-choix:disabled { cursor: default; }

.frise-fantome {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  font-size: 1.05em;
  font-family: inherit;
  padding: 10px 18px;
  border: 2px solid var(--bleu);
  border-radius: 10px;
  background: var(--bleu-clair);
  color: var(--bleu);
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  opacity: 0.95;
}

.retour {
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
  font-weight: bold;
}
.retour.ok { background: var(--vert-clair); color: var(--vert); }
.retour.encore { background: var(--orange-clair); color: var(--orange); }
.retour.aide { background: var(--bleu-clair); color: var(--bleu); font-weight: normal; }

.barre-progres {
  height: 14px;
  background: var(--gris-clair);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0;
}
.barre-progres > div { height: 100%; background: var(--bleu); }

table.tableau-competences {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}
table.tableau-competences th, table.tableau-competences td {
  border: 1px solid var(--bordure);
  padding: 8px;
  text-align: left;
}
table.tableau-competences th { background: var(--bleu-clair); position: sticky; top: 0; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.tableau-scroll { overflow-x: auto; }

.erreur-msg { color: #a11d1d; font-weight: bold; }

.pied-page { text-align: center; color: var(--gris); font-size: 0.85em; margin-top: 40px; }

@media (max-width: 480px) {
  html, body { font-size: 17px; }
  .page { padding: 14px 12px 70px; }
}