/* PLCORP Academy — charte Crystal Network (couleurs et polices du socle §4B) */
:root{--bleu:#2F80ED;--nuit:#102A43;--cyan:#56CCF2;--violet:#7C4DFF;--orange:#F2994A;--vert:#10B981;
--fond:#F8FAFC;--trait:#E2E8F0;--gris:#94A3B8;--encre:#0F172A;--texte2:#475569;--rayon:14px;
--verre:rgba(255,255,255,.72)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 Inter,system-ui,sans-serif;color:var(--encre);
background:radial-gradient(900px 500px at 90% -10%,rgba(86,204,242,.25),transparent 60%),
radial-gradient(800px 500px at -10% 10%,rgba(124,77,255,.14),transparent 60%),var(--fond);min-height:100vh}
h1,h2,h3{font-family:Sora,sans-serif;color:var(--nuit);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.5px}
h2{font-size:clamp(22px,3.2vw,28px);margin-top:1.6em}
h3{font-size:18px}
a{color:var(--bleu)}
main{max-width:1040px;margin:0 auto;padding:0 16px 48px}
.barre{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 16px;background:rgba(248,250,252,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-bottom:1px solid var(--trait)}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none}
.marque img{width:40px;height:40px}
.marque span{font:800 18px Sora;color:var(--nuit);line-height:1}
.marque small{display:block;font:600 11px Inter;letter-spacing:2px;color:var(--bleu);margin-top:3px}
nav{display:flex;align-items:center;gap:16px}
nav a{text-decoration:none;color:var(--nuit);font-weight:600;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;
background:var(--bleu);color:#fff!important;font-weight:600;text-decoration:none;border:2px solid var(--bleu);
transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(47,128,237,.3)}
.btn-ghost{background:transparent;color:var(--bleu)!important}
nav .btn{min-height:44px;padding:0 16px}
.sur{font:700 13px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--bleu);margin:0 0 10px}
.chapo{font-size:18px;color:var(--texte2);max-width:720px}
.hero{padding:56px 0 24px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.carte{background:var(--verre);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(226,232,240,.9);border-radius:var(--rayon);padding:22px;box-shadow:0 10px 30px rgba(16,42,67,.06)}
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.atouts p{margin:0;color:var(--texte2)}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.liste{list-style:none;padding:0;margin:0}
.liste li{padding:10px 0;border-top:1px solid var(--trait)}
.liste li span{display:block;color:var(--texte2);font-size:14px}
.appel{margin-top:40px;text-align:center;background:linear-gradient(135deg,var(--nuit),#1d4370);color:#E2E8F0}
.appel h2{color:#fff;margin-top:0}
.appel p{max-width:560px;margin:0 auto 18px}
footer{border-top:1px solid var(--trait);padding:24px 16px;text-align:center;color:var(--texte2);font-size:14px}
footer p{margin:4px 0}
/* Espace apprenant */
.entete-cours{padding:36px 0 8px}
.fil{margin:20px 0 0}
.fil a{text-decoration:none;font-weight:600}
.lecons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lecon{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:var(--rayon);border:1px dashed var(--gris);
color:var(--texte2);text-decoration:none;min-height:120px}
.lecon b{color:var(--nuit);font-family:Sora}
.lecon span{font-size:14px}
.lecon em{margin-top:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--gris)}
.lecon.dispo{border:1px solid var(--bleu);background:var(--verre);box-shadow:0 10px 30px rgba(47,128,237,.12)}
.lecon.dispo em{color:var(--bleu)}
.telechargements{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 12px}
.dl{text-decoration:none;display:flex;flex-direction:column;border-left:5px solid var(--orange)}
.dl b{font-family:Sora;color:var(--nuit);font-size:17px}
.dl span{color:var(--texte2);font-size:14px}
.detail summary{cursor:pointer;font-weight:600;color:var(--nuit);min-height:28px}
.detail ul{margin:10px 0 0;padding-left:20px}
.detail li{padding:4px 0}
/* Contenu du cours (repris du support imprimable) */
.contenu{margin-top:12px}
.contenu h2{padding-bottom:8px;border-bottom:2px solid var(--bleu)}
.contenu table{width:100%;border-collapse:collapse;margin:10px 0 20px;font-size:15px;background:#fff;border-radius:10px;overflow:hidden;
box-shadow:0 1px 0 var(--trait)}
.contenu th{background:var(--nuit);color:#fff;text-align:left;padding:10px 12px;font-weight:600}
.contenu td{padding:10px 12px;border-bottom:1px solid var(--trait);vertical-align:top}
.contenu tr:nth-child(even) td{background:var(--fond)}
.contenu kbd{font:600 13px Inter;background:#fff;border:1px solid var(--trait);border-bottom-width:3px;border-radius:5px;padding:1px 6px;white-space:nowrap}
.contenu th kbd{color:var(--nuit)}
.contenu .en{color:var(--gris);font-size:13px}
.contenu .encadre{border-left:4px solid var(--orange);background:#FFF7EF;padding:12px 16px;margin:14px 0;border-radius:0 10px 10px 0}
.contenu .encadre.bleu{border-color:var(--bleu);background:#EEF5FE}
.contenu .encadre.vert{border-color:var(--vert);background:#ECFDF5}
.contenu .duo{display:flex;gap:20px;align-items:flex-start}
.contenu .duo img{width:300px;max-width:100%;border-radius:10px;border:1px solid var(--trait)}
.contenu ol.etapes{padding-left:22px}
.contenu ol.etapes li{margin-bottom:8px}
.contenu .case{display:inline-block;width:16px;height:16px;border:2px solid var(--nuit);border-radius:3px;margin-right:6px;vertical-align:-3px}
.contenu .diff td:first-child{font-weight:600}
.contenu .diff td:nth-child(2){color:#B45309}
.contenu .diff td:nth-child(3){color:#047857}
.contenu > div[style]{height:120px!important}
@media (max-width:820px){
  .atouts,.grille,.lecons{grid-template-columns:1fr}
  .telechargements{grid-template-columns:1fr}
  .contenu .duo{flex-direction:column}
  .contenu .duo img{width:100%}
  nav a:not(.btn){display:none}
  .hero{padding-top:32px}
  .hero h1 br{display:none}
  .contenu table{font-size:14px;display:block;overflow-x:auto}
}