/* SmartProprio - Formation : styles publics. */
.spf-wrap{--spf-navy:#0f1b3c;--spf-gold:#c6a03c;--spf-gray:#5a5f6e;--spf-line:#e4e7ef;max-width:820px;margin:0 auto;font-family:inherit;color:#1f2430;}
.spf-wrap *{box-sizing:border-box;}
.spf-wrap [hidden]{display:none!important;}
.spf-h2{color:var(--spf-navy);font-size:1.7rem;margin:0 0 .6rem;}
.spf-h3{color:var(--spf-navy);font-size:1.3rem;margin:0 0 .5rem;}
.spf-lead{color:var(--spf-gray);margin:.2rem 0 1.2rem;}
.spf-intro{background:#f6f7fb;border-left:4px solid var(--spf-gold);padding:.6rem 1rem;border-radius:6px;margin-bottom:1rem;}
.spf-form{display:flex;flex-direction:column;gap:.8rem;max-width:420px;}
.spf-form label{display:flex;flex-direction:column;font-weight:600;color:var(--spf-navy);font-size:.92rem;gap:.25rem;}
.spf-form input{padding:.6rem .7rem;border:1px solid var(--spf-line);border-radius:8px;font-size:1rem;}
.spf-btn{background:var(--spf-navy);color:#fff;border:0;padding:.75rem 1.4rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:.15s;}
.spf-btn:hover{background:#18264f;}
.spf-btn:disabled{opacity:.45;cursor:not-allowed;}
.spf-btn-ghost{background:#fff;color:var(--spf-navy);border:1px solid var(--spf-navy);}
.spf-msg{color:#b3261e;font-size:.9rem;min-height:1.2em;margin:.4rem 0 0;}
.spf-doc-hint{margin:.4rem 0 0;font-size:.9rem;color:#8a6d1f;font-style:italic;}
.spf-ack:has(input:disabled){opacity:.65;}
/* Hub : liste des formations par type */
.spf-hub{max-width:820px;margin:0 auto;}
.spf-hub-group{margin:0 0 1.6rem;}
.spf-hub-group h3{color:var(--spf-navy);border-bottom:2px solid var(--spf-gold);padding-bottom:.3rem;margin:0 0 .6rem;}
.spf-hub-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;}
.spf-hub-list a{display:block;background:#f6f7fb;border:1px solid var(--spf-line);border-left:4px solid var(--spf-navy);border-radius:8px;padding:.7rem 1rem;color:var(--spf-navy);font-weight:600;text-decoration:none;transition:.15s;}
.spf-hub-list a:hover{background:#eef1f8;border-left-color:var(--spf-gold);}
/* Layout parcours : navigateur d'étapes + contenu */
.spf-layout{display:grid;grid-template-columns:250px 1fr;gap:1.2rem;align-items:start;}
.spf-stepper{display:flex;flex-direction:column;gap:.4rem;position:sticky;top:16px;}
.spf-stepitem{display:flex;align-items:center;gap:.6rem;text-align:left;background:#f6f7fb;border:1px solid var(--spf-line);border-radius:10px;padding:.55rem .7rem;cursor:pointer;font:inherit;color:#1f2430;transition:.15s;}
.spf-stepitem:hover:not(:disabled){border-color:var(--spf-navy);}
.spf-stepitem.is-current{border-color:var(--spf-navy);box-shadow:0 0 0 2px rgba(15,27,60,.12);}
.spf-stepitem.is-done{background:#eef7ee;border-color:#bfe0bf;}
.spf-stepitem.is-locked{opacity:.55;cursor:not-allowed;}
.spf-stepnum{flex:0 0 26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:var(--spf-navy);color:#fff;font-size:.85rem;font-weight:700;}
.spf-stepitem.is-done .spf-stepnum{background:#2e7d32;}
.spf-stepitem.is-locked .spf-stepnum{background:#9aa0ad;}
.spf-stepfin .spf-stepnum{background:var(--spf-gold);}
.spf-steptxt{display:flex;flex-direction:column;line-height:1.2;font-size:.92rem;}
.spf-steptype{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--spf-gray);}
.spf-content{min-width:0;}
.spf-doc{margin:.4rem 0 1rem;}
.spf-doc-link{color:var(--spf-navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--spf-gold);font-size:1.05rem;}
.spf-foot{margin-top:1.1rem;}
@media(max-width:720px){
	.spf-layout{grid-template-columns:1fr;gap:.8rem;}
	.spf-stepper{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:.4rem;padding-bottom:.35rem;-webkit-overflow-scrolling:touch;}
	.spf-stepitem{flex:0 0 auto;max-width:70vw;}
	.spf-steptxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
.spf-video-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem;}
.spf-video-item{display:flex;align-items:center;gap:.4rem;background:#f6f7fb;border:1px solid var(--spf-line);padding:.4rem .7rem;border-radius:20px;font-size:.9rem;}
.spf-video-item.spf-done-item{background:#eef7ee;border-color:#bfe0bf;}
.spf-video-state{color:var(--spf-gold);font-weight:700;}
.spf-done-item .spf-video-state{color:#2e7d32;}
.spf-player{position:relative;}
.spf-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;}
.spf-stage:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto;}
/* Plein écran de repli (iOS/mobile) : la scène couvre tout l'écran sans l'API Fullscreen. */
.spf-stage.spf-fs{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;z-index:99999;border-radius:0;background:#000;}
body.spf-fs-lock{overflow:hidden;}
.spf-media,.spf-media iframe,.spf-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.spf-stage video{object-fit:contain;background:#000;}
/* Masque : bloque clics/menu YouTube et le clic droit (copie d'URL) */
.spf-shield{position:absolute;inset:0;z-index:2;background:transparent;cursor:pointer;}
/* Barre de contrôle personnalisée */
.spf-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;background:linear-gradient(transparent,rgba(0,0,0,.65));}
.spf-ctrl-btn{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:6px;padding:.3rem .55rem;cursor:pointer;font-size:1rem;line-height:1;}
.spf-ctrl-btn:hover{background:rgba(255,255,255,.32);}
.spf-progress{flex:1;height:6px;background:rgba(255,255,255,.28);border-radius:3px;overflow:hidden;cursor:default;}
.spf-progress-fill{height:100%;width:0;background:var(--spf-gold);transition:width .25s linear;}
.spf-time{color:#fff;font-size:.78rem;font-variant-numeric:tabular-nums;min-width:74px;text-align:right;}
/* Carte de fin */
.spf-endcard{position:absolute;inset:0;z-index:6;background:rgba(15,27,60,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#fff;text-align:center;padding:1rem;}
.spf-endcard-title{font-size:1.3rem;font-weight:700;}
.spf-video-nav{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}
.spf-quiz{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem;}
.spf-q{border:1px solid var(--spf-line);border-radius:10px;padding:.8rem 1rem;margin:0;}
.spf-q legend{font-weight:700;color:var(--spf-navy);padding:0 .4rem;}
.spf-opt{display:block;padding:.35rem .2rem;cursor:pointer;}
.spf-opt input{margin-right:.5rem;}
.spf-quiz-result{margin-top:.8rem;padding:.7rem 1rem;border-radius:8px;font-size:.95rem;}
.spf-quiz-result.spf-ok{background:#eef7ee;color:#2e7d32;border:1px solid #bfe0bf;}
.spf-quiz-result.spf-ko{background:#fdecea;color:#b3261e;border:1px solid #f5c2c0;}
.spf-textes{list-style:none;padding:0;margin:0 0 1rem;}
.spf-textes li{margin:.35rem 0;}
.spf-textes a{color:var(--spf-navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--spf-gold);}
.spf-ack{display:block;margin:1rem 0;font-weight:600;color:var(--spf-navy);}
.spf-done{text-align:center;padding:2rem 1rem;}
.spf-done-note{margin:.6rem auto 1rem;max-width:34rem;color:#456;}
.spf-btn-secondary{background:#fff;color:#1f3c88;border:1px solid #1f3c88;}
.spf-btn-secondary:hover{background:#f0f4ff;}
.spf-done-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem;}
.spf-check{width:64px;height:64px;line-height:64px;border-radius:50%;background:#2e7d32;color:#fff;font-size:2rem;margin:0 auto 1rem;}
.spf-ref{color:var(--spf-gray);font-size:.9rem;}
@media(max-width:600px){
	.spf-h2{font-size:1.35rem;}
	.spf-h3{font-size:1.15rem;}
	.spf-form{max-width:100%;}
	.spf-form input{font-size:16px;} /* évite le zoom auto iOS */
	.spf-foot .spf-btn,.spf-quiz + .spf-foot .spf-btn,#spf-start{width:100%;}
	.spf-foot{margin-top:.9rem;}
	.spf-controls{gap:.35rem;padding:.4rem .5rem;}
	.spf-ctrl-btn{padding:.25rem .4rem;font-size:.95rem;}
	.spf-time{min-width:0;font-size:.7rem;}
	.spf-q{padding:.7rem .8rem;}
	.spf-opt{padding:.45rem .2rem;} /* cibles tactiles plus grandes */
	.spf-done{padding:1.4rem .6rem;}
	.spf-done-actions{flex-direction:column;}
	.spf-done-actions .spf-btn{width:100%;}
	.spf-video-nav{flex-direction:column;}
	.spf-video-nav .spf-btn{width:100%;}
}