/* Pages de la plateforme (connexion, réglages).
   S'ajoute à charte.css et formation.css sans les modifier : mêmes variables, mêmes
   polices locales, aucune ressource distante. Convention : tout est préfixé pf-. */

body.pf-connexion,body.pf-page{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font:1rem/1.55 var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh}

/* ══ Porte d'entrée ══════════════════════════════════════════════════════════
   Le fond reprend le navy de la charte, réchauffé par deux halos : un rouge en haut
   à gauche (l'accent de la marque), un bleu froid en bas à droite. Sans eux un aplat
   #00131E plein écran fait page d'erreur plutôt que page de marque. */
body.pf-connexion{
  display:grid;place-items:center;padding:40px 24px;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(227,6,19,.16), transparent 62%),
    radial-gradient(760px 520px at 92% 108%, rgba(63,162,208,.13), transparent 60%),
    var(--navy-950)}
.pf-porte{width:min(440px,100%);display:flex;flex-direction:column;gap:20px}

.pf-carte{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-xl);
  padding:38px 34px 30px;box-shadow:0 24px 60px -24px rgba(0,0,0,.75)}
.pf-logo{height:34px;width:auto;display:block;margin-bottom:26px}
.pf-kicker{margin:0;font:.68rem/1 var(--font-mono);color:var(--dim);
  text-transform:uppercase;letter-spacing:.16em}
.pf-kicker::after{content:"";display:block;width:30px;height:2px;margin-top:9px;background:var(--red-500)}
.pf-titre{margin:14px 0 0;font:600 1.55rem/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.pf-sous{margin:10px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted)}

.pf-form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.pf-champ{display:flex;flex-direction:column;gap:6px}
.pf-champ>span{font:.7rem/1 var(--font-mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}
.pf-champ input,.pf-champ select{
  font:1rem var(--font-body);color:var(--text);background:var(--navy-950);
  border:1px solid var(--border-2);border-radius:var(--r-md);padding:11px 13px;width:100%}
.pf-champ input:focus,.pf-champ select:focus{
  outline:none;border-color:var(--red-500);box-shadow:0 0 0 3px rgba(227,6,19,.16)}
.pf-champ input::placeholder{color:var(--dim)}

.pf-bouton{font:600 .95rem var(--font-body);color:#fff;background:var(--red-500);
  border:1px solid var(--red-500);border-radius:var(--r-md);padding:12px 18px;cursor:pointer;
  transition:background .15s ease,transform .1s ease}
.pf-bouton:hover{background:var(--red-400);border-color:var(--red-400)}
.pf-bouton:active{transform:translateY(1px)}
.pf-bouton:focus-visible{outline:2px solid var(--ice-50);outline-offset:2px}

.pf-aide{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--dim)}
.pf-pied{text-align:center;font:.72rem var(--font-mono);color:var(--dim)}

/* Messages. Le message d'échec est le même quel que soit le motif : c'est la règle,
   pas une approximation d'affichage. */
.pf-erreur{margin:22px 0 0;padding:11px 14px;border-radius:var(--r-md);
  border:1px solid rgba(227,6,19,.4);border-left:3px solid var(--red-500);
  background:rgba(227,6,19,.10);color:#FFD7DA;font-size:.88rem}
.pf-info{margin:0 0 22px;padding:11px 14px;border-radius:var(--r-md);
  border:1px solid rgba(16,185,129,.35);border-left:3px solid var(--success);
  background:rgba(16,185,129,.09);color:#BFF3E2;font-size:.88rem}

/* ══ Page de réglages ════════════════════════════════════════════════════════ */
body.pf-page{display:flex;flex-direction:column}
body.pf-page .ft-bar{gap:16px}
body.pf-page .ft-logo{height:28px}
.pf-moi{margin-left:auto;font:.78rem var(--font-mono);color:var(--muted);white-space:nowrap}
.pf-moi b{color:var(--red-500);font-weight:600;margin-left:6px;text-transform:uppercase;font-size:.72rem}
.pf-deco{margin:0;flex:none}

.pf-wrap{flex:1;width:min(1180px,100%);margin:0 auto;padding:34px 24px 56px;
  display:flex;flex-direction:column;gap:30px}

.pf-bloc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px}
.pf-bloc-tete{margin-bottom:18px}
.pf-h2{margin:12px 0 0;font:600 1.4rem/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.pf-note{margin:16px 0 0;font-size:.82rem;line-height:1.5;color:var(--dim);max-width:70ch}
.pf-bloc-tete + .pf-note{margin-top:0;margin-bottom:18px}
.pf-note-inline{font:.72rem var(--font-mono);color:var(--dim)}

.pf-ligne-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.pf-ligne-form .pf-champ{flex:1 1 170px;min-width:0}
.pf-ligne-form .pf-bouton{flex:none;padding:11px 22px}

.pf-table{width:100%;border-collapse:collapse;margin-top:4px}
.pf-table th{text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--border-2);
  font:.68rem/1 var(--font-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.pf-table td{padding:13px 12px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.9rem}
.pf-table tbody tr:hover{background:var(--surface-2)}
.pf-table tbody tr.pf-off{opacity:.5}
.pf-ident{font:600 .9rem var(--font-mono);color:var(--text)}
.pf-date{font:.76rem var(--font-mono);color:var(--dim);white-space:nowrap}
.pf-col-actions{width:1%}

.pf-mini{margin:0;display:inline-flex;gap:7px;align-items:center}
.pf-mini select{font:.82rem var(--font-body);color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:6px 9px;cursor:pointer}
.pf-mini select:focus{outline:none;border-color:var(--red-500)}
.pf-mdp{font:.82rem var(--font-body);color:var(--text);background:var(--navy-950);
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:6px 9px;width:168px}
.pf-mdp:focus{outline:none;border-color:var(--red-500)}
.pf-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.pf-bouton-fin{font:600 .76rem var(--font-body);color:var(--text);background:transparent;
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;white-space:nowrap}
.pf-bouton-fin:hover{border-color:var(--red-500);color:#fff}
.pf-bouton-fin:focus-visible{outline:2px solid var(--red-500);outline-offset:1px}
.pf-bouton-fin.pf-danger:hover{background:rgba(227,6,19,.14);border-color:var(--red-500);color:#FFD7DA}

.pf-etat{font:600 .68rem var(--font-mono);padding:4px 9px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.06em}
.pf-etat-on{background:rgba(16,185,129,.16);color:var(--success)}
.pf-etat-off{background:rgba(227,6,19,.16);color:var(--red-400)}

.pf-pied-page{display:flex;gap:8px;justify-content:center;align-items:center;
  padding:18px 24px;border-top:1px solid var(--border);
  font:.74rem var(--font-mono);color:var(--dim)}
.pf-pied-page .ft-dot{color:var(--border-2)}

@media (max-width:820px){
  .pf-wrap{padding:24px 16px 40px}
  .pf-bloc{padding:20px 16px}
  .pf-table thead{display:none}
  .pf-table tr{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--border)}
  .pf-table td{border:0;padding:2px 0}
  .pf-actions{justify-content:flex-start}
  .pf-moi{font-size:.7rem}
}

/* ── Suivi, signalements et résultats ─────────────────────────────────────────
   Les barres de progression sont dessinées en CSS plutôt qu'avec <progress>, dont
   l'apparence n'est pas stylable de la même façon d'un navigateur à l'autre : en salle,
   la barre doit avoir la même allure sur le poste du formateur et sur celui du stagiaire. */
.pf-barres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pf-barre-ligne{display:grid;grid-template-columns:minmax(180px,1fr) 2fr auto auto;
  gap:12px;align-items:center}
.pf-barre-titre{font:.86rem var(--font-body);color:var(--text)}
.pf-barre{display:block;height:9px;min-width:90px;border-radius:999px;
  background:var(--navy-950);border:1px solid var(--border-2);overflow:hidden}
.pf-barre-remplie{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--red-500),var(--red-400))}
.pf-barre-echec{background:linear-gradient(90deg,var(--red-500),#FFB4BA)}
.pf-barre-chiffre{font:600 .74rem var(--font-mono);color:var(--muted);
  min-width:44px;text-align:right}
.pf-cell-barre{display:flex;gap:10px;align-items:center;min-width:150px}

.pf-reussi{color:var(--success)}
.pf-a-revoir{color:var(--red-400)}

/* Texte libre d'un signalement : borné en largeur pour que le tableau reste lisible
   quand quelqu'un colle un paragraphe entier. */
.pf-texte-long{max-width:46ch;white-space:pre-wrap;line-height:1.45}

.pf-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pf-filtre{font:600 .74rem var(--font-mono);color:var(--muted);text-decoration:none;
  border:1px solid var(--border-2);border-radius:999px;padding:6px 13px}
.pf-filtre:hover{border-color:var(--red-500);color:var(--text)}
.pf-filtre-actif{background:rgba(227,6,19,.14);border-color:var(--red-500);color:#fff}

.pf-off{opacity:.62}

@media (max-width:820px){
  .pf-barre-ligne{grid-template-columns:1fr auto}
  .pf-barre{grid-column:1/-1}
}

/* ── Bandeau de la plateforme, posé sur les pages de cours ──────────────────
   Les pages de cours sont rendues hors ligne et ignorent la session : sans ce
   bandeau, on y entre et on n'en sort plus. Il est injecté par le serveur, et
   son style vit ici plutôt que dans la charte du site, qui doit rester valable
   pour un jeu de pages ouvert sans plateforme. */
.pf-bandeau {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .5rem 1.25rem; background: #001E2C; color: #F4F8FB;
  border-bottom: 2px solid #E30613;
  font: 500 .85rem/1.4 Inter, system-ui, sans-serif;
  /* Les pages de cours ont leur propre barre en `sticky` (z-index 40) et leurs onglets
     (35), qui se collent en haut de la fenêtre et recouvriraient ce bandeau au premier
     défilement. Il se colle donc lui aussi, au-dessus des deux : c'est le seul chemin
     vers le suivi, les signalements et la déconnexion, il doit rester atteignable à
     tout moment. Le décalage des deux autres est repris ci-dessous. */
  position: sticky; top: 0; z-index: 50;
}
/* Le site place sa barre à `top: 0` et ses onglets juste dessous : les deux passeraient
   sous le bandeau. On les décale de sa hauteur. La variable vaut pour les pages servies
   par la plateforme seulement ; un jeu de pages ouvert hors plateforme n'a pas de
   bandeau et garde ses valeurs d'origine. */
body:has(> .pf-bandeau) { --pf-bandeau-h: 41px; }
body:has(> .pf-bandeau) .ft-bar { top: var(--pf-bandeau-h); }
body:has(> .pf-bandeau) .ft-tabs { top: calc(var(--pf-bandeau-h) + var(--ft-bar, 56px)); }
body:has(> .pf-bandeau) .ft-plan {
  top: calc(var(--pf-bandeau-h) + var(--ft-bar, 56px) + var(--ft-tabs, 44px));
}
.pf-bandeau-liens { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.pf-bandeau-liens a { color: #F4F8FB; text-decoration: none; opacity: .85; }
.pf-bandeau-liens a:hover, .pf-bandeau-liens a:focus-visible { opacity: 1; text-decoration: underline; }
.pf-bandeau-moi { margin-left: auto; display: flex; align-items: center; gap: .5rem; opacity: .8; }
.pf-bandeau-role {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: #E30613; border: 1px solid currentColor; border-radius: 3px; padding: 0 .35rem;
}
.pf-bandeau-sortie button {
  background: none; border: 1px solid rgba(244,248,251,.35); border-radius: 4px;
  color: #F4F8FB; padding: .2rem .6rem; font: inherit; cursor: pointer;
}
.pf-bandeau-sortie button:hover { border-color: #E30613; }
@media print { .pf-bandeau { display: none; } }

/* Formulaire « Signaler », posé en fin de page de cours par la plateforme.
   Replié par défaut : c'est un outil de recette, pas un élément du cours. */
.pf-signaler {
  margin: 2rem auto 3rem; max-width: 60rem; padding: 0 1.25rem;
  font: 400 .9rem/1.5 Inter, system-ui, sans-serif;
}
.pf-signaler summary {
  cursor: pointer; color: #E30613; font-weight: 600; padding: .5rem 0;
}
.pf-signaler form { display: grid; gap: .6rem; margin-top: .6rem; }
.pf-signaler label { display: grid; gap: .25rem; font-size: .8rem; opacity: .75; }
.pf-signaler input, .pf-signaler textarea {
  font: inherit; padding: .5rem .7rem; border-radius: 5px;
  border: 1px solid rgba(11,58,82,.35); background: #FFF; color: #00131E;
}
.pf-signaler button {
  justify-self: start; background: #E30613; color: #FFF; border: 0;
  border-radius: 5px; padding: .5rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer;
}
@media print { .pf-signaler { display: none; } }