/* Charte graphique Orange — octobre 2015
   Couleurs reprises telles quelles du nuancier fourni. */

:root {
  /* Principales */
  --orange: #FF7900;
  --noir: #000000;
  --blanc: #FFFFFF;
  --gris-10: #D6D6D6;
  --gris-50: #8F8F8F;
  --gris-80: #595959;
  --gris-fond: #F4F4F4;

  /* Secondaires */
  --bleu: #4BB4E6;
  --vert: #50BE87;
  --rose: #FFB4E6;
  --violet: #A885D8;
  --jaune: #FFD200;

  /* Teintes foncées */
  --bleu-f: #085EBD;
  --vert-f: #0A6E31;
  --rose-f: #FF8AD4;
  --violet-f: #492191;
  --orange-f: #FFB400;

  /* Teintes claires */
  --bleu-c: #B5E8F7;
  --vert-c: #B8EBD6;
  --rose-c: #FFE8F7;
  --violet-c: #D9C2F0;
  --jaune-c: #FFF6B6;

  --rayon: 4px;
  --ombre: 0 2px 0 rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
  background: var(--gris-fond);
}

h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--noir); }

/* ---------- Bandeau ---------- */

.bandeau {
  background: var(--noir);
  color: var(--blanc);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Emblème OS Academy, intégré à la feuille de style plutôt que chargé comme fichier :
   il s'affiche ainsi à l'identique dans la version monofichier, ouverte en local.
   Il est posé sur une pastille blanche, sans quoi ses parties noires disparaîtraient
   sur le bandeau. */
.bloc-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--blanc) url("data:image/png;base64,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") center / 34px no-repeat;
  border-radius: 6px;
}

.logo-connexion {
  width: 108px;
  height: 108px;
  margin: 0 auto 1rem;
  background: url("data:image/png;base64,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") center / contain no-repeat;
}

.bandeau-titre { font-size: 1rem; font-weight: 700; }
.bandeau-sous { font-size: .8125rem; color: var(--gris-10); font-weight: 400; }
.bandeau-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* ---------- Structure ---------- */

.page { max-width: 860px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }
.page-large { max-width: 1180px; }

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-10);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.carte-vedette { border-left: 6px solid var(--orange); }

.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.rangee { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pousse { margin-left: auto; }

/* ---------- Formulaires ---------- */

label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  width: 100%;
  font: inherit;
  padding: .625rem .75rem;
  border: 1px solid var(--gris-50);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--noir);
}

textarea { resize: vertical; min-height: 2.75rem; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, .etoile:focus-visible, a:focus-visible {
  outline: 3px solid var(--bleu-f);
  outline-offset: 2px;
}

.champ { margin-bottom: 1rem; }
.aide { font-size: .8125rem; color: var(--gris-80); font-weight: 400; }

/* ---------- Boutons ---------- */

button, .bouton {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--noir);
  border-radius: var(--rayon);
  background: var(--noir);
  color: var(--blanc);
  padding: .625rem 1.125rem;
  text-decoration: none;
  display: inline-block;
  line-height: 1.25;
}

button:hover, .bouton:hover { background: var(--gris-80); border-color: var(--gris-80); }

.bouton-primaire { background: var(--orange); border-color: var(--orange); color: var(--noir); }
.bouton-primaire:hover { background: var(--orange-f); border-color: var(--orange-f); }

.bouton-second { background: var(--blanc); color: var(--noir); }
.bouton-second:hover { background: var(--gris-10); border-color: var(--noir); }

.bouton-discret {
  background: transparent; border-color: transparent; color: var(--noir);
  text-decoration: underline; padding: .375rem .5rem;
}
.bouton-discret:hover { background: var(--gris-10); border-color: transparent; }

.bouton-danger { background: var(--blanc); color: var(--noir); border-color: var(--noir); }
.bouton-danger:hover { background: #ffd9d9; border-color: var(--noir); }

button[disabled] { opacity: .45; cursor: not-allowed; }

.bouton-petit { padding: .375rem .75rem; font-size: .8125rem; }

/* ---------- Étoiles ---------- */

.echelle { display: flex; gap: .25rem; }

.etoile {
  border: none;
  background: none;
  padding: .125rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gris-10);
  cursor: pointer;
  border-radius: var(--rayon);
  transition: transform .12s ease;
}
.etoile:hover { transform: scale(1.12); background: none; }
.etoile.pleine { color: var(--orange); }
.etoile.survol { color: var(--orange-f); }

.ligne-competence {
  padding: 1rem 0;
  border-top: 1px solid var(--gris-10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.5rem;
  align-items: start;
}
.ligne-competence:first-of-type { border-top: none; }
.ligne-competence .intitule { font-size: .9375rem; }
.ligne-competence .zone-commentaire { grid-column: 1 / -1; }

.niveau-choisi { font-size: .8125rem; color: var(--gris-80); text-align: right; min-height: 1.2em; }

.atelier-corps { padding: .25rem 1.25rem 1rem; }

.atelier-titre {
  background: var(--noir);
  color: var(--blanc);
  padding: .5rem .75rem;
  font-size: .9375rem;
  font-weight: 700;
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.section-titre {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 2rem 0 .75rem;
  padding-bottom: .375rem;
  border-bottom: 3px solid var(--orange);
}

/* ---------- Puces / états ---------- */

.puce {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: var(--gris-10);
}
.puce-ouverte { background: var(--vert-c); color: var(--vert-f); }
.puce-fermee { background: var(--gris-10); color: var(--gris-80); }

.note-1 { background: var(--rose-c); }
.note-2 { background: var(--jaune-c); }
.note-3 { background: var(--bleu-c); }
.note-4 { background: var(--vert-c); }
.note-5 { background: var(--vert); color: var(--blanc); }

.barre { height: 8px; background: var(--gris-10); border-radius: 999px; overflow: hidden; }
.barre > span { display: block; height: 100%; background: var(--orange); }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--gris-10); vertical-align: top; }
th { font-size: .75rem; color: var(--gris-80); }
tbody tr:hover { background: var(--gris-fond); }

.stat { background: var(--blanc); border: 1px solid var(--gris-10); border-radius: var(--rayon); padding: .875rem 1rem; }
.stat .valeur { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat .libelle { font-size: .8125rem; color: var(--gris-80); }

.vide { text-align: center; padding: 3rem 1rem; color: var(--gris-80); }

.message { padding: .75rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; font-size: .875rem; }
.message-info { background: var(--bleu-c); }
.message-ok { background: var(--vert-c); }
.message-alerte { background: var(--jaune-c); }
.message-erreur { background: #FFE1E1; border-left: 4px solid #C81919; }

.lien-genere {
  display: flex; gap: .5rem; align-items: center;
  background: var(--gris-fond); border: 1px dashed var(--gris-50);
  padding: .625rem .75rem; border-radius: var(--rayon);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8125rem; word-break: break-all;
}

.progression {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: var(--blanc); border-top: 2px solid var(--noir);
  padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}

dialog {
  border: none; border-radius: var(--rayon); padding: 0;
  max-width: 720px; width: calc(100% - 2rem);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.modale-corps { padding: 1.5rem; max-height: 75vh; overflow: auto; }
.modale-pied { padding: 1rem 1.5rem; border-top: 1px solid var(--gris-10); display: flex; gap: .5rem; }

.masque { display: none !important; }

/* ---------- Cartes de formation ---------- */

.carte-formation { display: flex; flex-direction: column; }
.carte-formation h2 { font-size: 1.125rem; }
.carte-formation .rangee { margin-top: auto; padding-top: .5rem; }

/* ---------- Éditeur de référentiel ---------- */

.masque-visuel {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.champ-niveau { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.champ-niveau input { flex: 1; }
.etoiles-fixes {
  color: var(--orange); font-size: 1rem; letter-spacing: .05em;
  width: 5.5rem; flex: 0 0 5.5rem; text-align: right;
}

.bloc-section { border-left: 6px solid var(--noir); }
.bloc-atelier {
  border-left: 3px solid var(--gris-10);
  padding: .5rem 0 .5rem .875rem;
  margin: .75rem 0 .75rem .25rem;
}

.saisie-section { font-weight: 700; font-size: 1.0625rem; flex: 1; min-width: 0; }
.saisie-atelier { font-weight: 700; flex: 1; min-width: 0; }
.ligne-edition { gap: .5rem; margin-bottom: .375rem; flex-wrap: nowrap; }
.ligne-edition input { flex: 1; min-width: 0; }

.puce-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .6875rem; color: var(--gris-80);
  background: var(--gris-fond); border-radius: var(--rayon);
  padding: .25rem .375rem; flex: 0 0 auto;
}

.outils-ligne { display: flex; gap: .125rem; flex: 0 0 auto; }
.outils-ligne button { padding: .375rem .5rem; text-decoration: none; font-size: .9375rem; }

kbd {
  font-family: inherit; font-size: .8125rem; font-weight: 700;
  background: var(--gris-fond); border: 1px solid var(--gris-10);
  border-bottom-width: 2px; border-radius: var(--rayon); padding: .0625rem .3125rem;
}

/* ---------- Diffusion du lien : texte + QR ---------- */

.bloc-diffusion {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1.25rem;
}
.bloc-diffusion-texte { flex: 1; min-width: 0; }

.bloc-qr {
  margin: 0;
  flex: 0 0 auto;
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--gris-10);
  border-radius: var(--rayon);
  padding: .75rem;
}
.bloc-qr svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.bloc-qr figcaption { font-size: .8125rem; color: var(--gris-80); margin: .375rem 0 .5rem; }

/* ---------- Empreinte par atelier ---------- */

.bloc-empreinte { margin-bottom: 1.25rem; }
.bloc-empreinte h2, .bloc-empreinte h3 { margin-bottom: .5rem; }

.cadre-radar {
  background: var(--blanc);
  border: 1px solid var(--gris-10);
  border-radius: var(--rayon);
  padding: .5rem;
}

/* Le SVG porte son viewBox : il occupe la largeur disponible et garde ses proportions.
   La largeur maximale évite qu'il n'écrase le reste de la page sur grand écran. */
.radar { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

.analyse {
  margin-top: .875rem;
  border-left: 4px solid var(--orange);
  padding-left: .875rem;
}
.analyse p { margin: 0 0 .5rem; font-size: .9375rem; }
.analyse p:last-child { margin-bottom: 0; }

/* Repli quand il y a trop peu d'ateliers pour qu'un radar ait du sens. */
.barres-ateliers { padding: .5rem 0; }
.barre-atelier {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  gap: .75rem;
  align-items: center;
  margin-bottom: .5rem;
  font-size: .875rem;
}
.barre-libelle { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Bandeau de mise à jour ---------- */

.bandeau-maj {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: calc(100% - 2rem);
  background: var(--noir);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: .625rem .875rem;
  font-size: .875rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

/* ---------- Projection en salle ---------- */

.plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.25rem;
  text-align: center;
}
.plein-ecran .ferme-plein { position: absolute; top: 1rem; right: 1rem; }
.plein-ecran-titre h2 { font-size: clamp(1.25rem, 3.5vw, 2.25rem); }
.plein-ecran-qr {
  width: min(62vh, 82vw);
  border: 8px solid var(--orange);
  border-radius: var(--rayon);
  background: var(--blanc);
  padding: .5rem;
}
.plein-ecran-qr svg { display: block; width: 100%; height: auto; }
.plein-ecran-code { font-size: clamp(1.25rem, 4vw, 2.5rem); margin: 0; letter-spacing: .08em; }
.plein-ecran-url { font-size: .875rem; color: var(--gris-80); margin: 0; word-break: break-all; }

/* ---------- Adaptation aux petits écrans ---------- */

@media (max-width: 900px) {
  .bloc-diffusion { flex-direction: column; }
  .bloc-qr { align-self: center; }
}

@media (max-width: 760px) {
  /* Les tableaux deviennent des cartes empilées : plus de défilement horizontal,
     chaque valeur reste lisible avec l'intitulé de sa colonne. */
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr {
    background: var(--blanc);
    border: 1px solid var(--gris-10);
    border-left: 4px solid var(--orange);
    border-radius: var(--rayon);
    padding: .875rem 1rem;
    margin-bottom: .75rem;
  }
  .tableau tr:hover { background: var(--blanc); }
  .tableau td { border: none; padding: .25rem 0; }
  .tableau td[data-libelle]::before {
    content: attr(data-libelle);
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--gris-80);
  }
  .tableau .cellule-titre { font-size: 1rem; padding-bottom: .5rem; }
  .tableau .cellule-actions { display: flex; gap: .5rem; padding-top: .75rem; }
  .tableau .cellule-actions button { flex: 1; }

  /* Sur les tableaux de notes, la note passe en tête de carte. */
  .tableau-notes tr { display: flex; flex-direction: column; }
  .tableau-notes .cellule-note { order: -1; padding-bottom: .375rem; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.1875rem; }

  .page { padding: 1rem .875rem 4rem; }
  .carte { padding: 1rem; }

  .bandeau { position: static; flex-wrap: wrap; padding: .625rem .875rem; gap: .75rem; min-height: 0; }
  .bandeau-actions { width: 100%; margin-left: 0; }
  .bandeau-actions .bouton-petit { flex: 1; }

  /* Une compétence par bloc vertical : intitulé, étoiles, commentaire. */
  .ligne-competence { grid-template-columns: 1fr; }
  .niveau-choisi { text-align: left; }
  .echelle { justify-content: space-between; max-width: 300px; }
  .etoile { font-size: 2.125rem; padding: .375rem; }   /* cible tactile confortable */

  .grille-4 { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
  .stat { padding: .625rem .75rem; }
  .stat .valeur { font-size: 1.375rem; }

  .lien-genere { font-size: .75rem; }

  /* Sur petit écran, le radar respire mieux sans le cadre, et l'analyse passe en pleine largeur. */
  .cadre-radar { padding: .25rem; border: none; }
  .barre-atelier { grid-template-columns: 1fr auto; }
  .barre-atelier .barre { grid-column: 1 / -1; }

  /* Éditeur : les outils passent sous le champ, qui garde toute la largeur. */
  .ligne-edition, .bloc-section > .rangee, .bloc-atelier > .rangee { flex-wrap: wrap; }
  .ligne-edition input, .saisie-section, .saisie-atelier { flex: 1 1 100%; }
  .outils-ligne { margin-left: auto; }
  .champ-niveau { flex-wrap: wrap; gap: .25rem .75rem; }
  .etoiles-fixes { flex: 0 0 auto; width: auto; text-align: left; }
  .champ-niveau input { flex: 1 1 100%; }
  .bloc-atelier { padding-left: .625rem; }
  .section-titre { flex-wrap: wrap; gap: .5rem; }
  .section-titre .pousse { margin-left: 0; }

  .atelier-titre { font-size: .875rem; }
  .atelier-corps { padding: .25rem 1rem 1rem; }

  dialog {
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .modale-corps { max-height: none; flex: 1; min-height: 0; padding: 1rem; }
  .modale-pied { flex-wrap: wrap; padding: .75rem 1rem; }
  .modale-pied button { flex: 1 1 45%; }
  .modale-pied .pousse { margin-left: 0; }

  .progression { padding: .625rem .875rem; }
  .bandeau-maj { flex-wrap: wrap; bottom: 4.5rem; left: 1rem; right: 1rem; transform: none; max-width: none; }
  .bloc-logo { width: 38px; height: 38px; flex: 0 0 38px; background-size: 29px; }
}

@media (max-width: 380px) {
  .etoile { font-size: 1.875rem; padding: .25rem; }
  .grille-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Impression du rapport ---------- */

@media print {
  body { background: var(--blanc); }
  .bandeau, .progression, .sans-impression, button, dialog::backdrop,
  .plein-ecran, .bandeau-maj { display: none !important; }
  .bloc-qr { border: none; }
  dialog { position: static; display: block; max-width: none; width: auto; }
  .modale-pied { display: none; }
  .modale-corps { max-height: none; overflow: visible; padding: 0; }
  .carte { border: none; padding: 0; }
  .cadre-radar { border: none; padding: 0; break-inside: avoid; }
  .radar { max-width: 420px; }
  .bloc-empreinte, .analyse { break-inside: avoid; }
  @page { margin: 15mm; }
}