:root{--bleu:#2E74B5;--fonce:#1F3864;--turquoise:#17A2B8;--vert:#2E9E5B;--orange:#E06A00;--rouge:#C0392B;--gris:#6B7686;--trait:#DDE3EA;--fond:#F4F7FA;--texte:#1B2430}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--texte);background:var(--fond)}
a{color:var(--bleu)}
h1{font-size:24px;margin:0 0 4px;color:var(--fonce)}
h2{font-size:17px;margin:0 0 12px;color:var(--bleu)}
h3{font-size:14px;margin:18px 0 8px;color:var(--fonce)}
main{max-width:1180px;margin:0 auto;padding:20px 16px 48px}
.barre{background:var(--fonce);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 16px;border-bottom:3px solid var(--turquoise)}
.barre a{color:#fff;text-decoration:none}
.marque{font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px}
.marque .mt span{font-weight:400;font-size:12px;opacity:.8;margin-left:6px}
.logo{height:40px;width:auto;background:#fff;border-radius:8px;padding:3px;display:block}
.logo-c{margin:0 0 10px}
.logo-c img{height:96px;width:auto}
.etroit h1,.etroit>.note{text-align:center}
.barre nav{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.barre nav a{padding:6px 10px;border-radius:6px;font-size:14px}
.barre nav a.actif,.barre nav a:hover{background:rgba(255,255,255,.16)}
.qui{display:flex;align-items:center;gap:10px;font-size:13px}
.qui small{opacity:.75}
.qui form{margin:0}
.carte{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:18px;margin:0 0 16px;min-width:0}
.etroit{max-width:420px;margin:48px auto}
.note{color:var(--gris);font-size:13px;margin:4px 0 12px}
.tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0 16px}
.kpis .carte{margin:0;border-top:4px solid var(--bleu)}
.kl{margin:0 0 6px;font-size:13px;color:var(--gris)}
.kv{margin:0;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bleu)}
.kn{margin:6px 0 0;font-size:12px;color:var(--gris)}
.k-turquoise{border-top-color:var(--turquoise)!important}.k-turquoise .kv{color:var(--turquoise)}
.k-vert{border-top-color:var(--vert)!important}.k-vert .kv{color:var(--vert)}
.k-orange{border-top-color:var(--orange)!important}.k-orange .kv{color:var(--orange)}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.colonnes .carte{margin:0 0 16px}
.defile{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;color:var(--bleu);font-weight:600;white-space:nowrap;padding:8px 12px 8px 0;border-bottom:2px solid var(--trait)}
td{padding:8px 12px 8px 0;border-bottom:1px solid var(--trait);vertical-align:top}
.d{text-align:right;font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.fiche td:first-child{color:var(--gris);width:42%}
.fiche .fort td{font-weight:700;color:var(--fonce);font-size:16px}
.pastille{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;background:var(--gris)}
.p-vert{background:var(--vert)}.p-bleu{background:var(--bleu)}.p-orange{background:var(--orange)}.p-turquoise{background:#138496}.p-rouge{background:var(--rouge)}
.btn{display:inline-block;background:var(--bleu);color:#fff;border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--fonce)}
.btn.clair{background:#fff;color:var(--bleu);border:1px solid var(--bleu)}
.btn.clair:hover{background:#EAF2FA}
.lien{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.barre .lien{color:#fff}
.danger{color:var(--rouge)}
.droite{text-align:right}
.centre{text-align:center;margin:22px 0}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--gris)}
input,select,textarea{font:inherit;color:var(--texte);padding:8px 10px;border:1px solid #C5CED8;border-radius:7px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--turquoise);outline-offset:1px}
.pile{display:flex;flex-direction:column;gap:12px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.large{grid-column:1/-1}
.ligne{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:8px 0}
.coche{flex-direction:row;align-items:center;gap:6px;color:var(--texte)}
.actions{display:flex;align-items:center;gap:14px}
.apercu{background:#EAF6F8;border:1px solid var(--turquoise);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.flash{padding:10px 14px;border-radius:8px;margin:0 0 14px;font-size:14px}
.flash.ok{background:#E6F4EC;color:#1E6B3D}.flash.err{background:#FBEAE8;color:#96281B}.flash.info{background:#FFF4E5;color:#8A4B00}
.alertes{margin:0;padding-left:18px}.alertes li{margin:4px 0}
.barre-etape{margin:0 0 12px}
.be-tete{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:14px;font-variant-numeric:tabular-nums}
.be-piste{height:10px;border-radius:5px;background:#E6EBF0;overflow:hidden}
.be-plein{height:100%;border-radius:5px;background:var(--turquoise);min-width:2px}

/* ---------- Tuiles colorées du tableau de bord ---------- */
.tuiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tuile{position:relative;overflow:hidden;border-radius:12px;color:#fff;display:flex;flex-direction:column;min-width:0;box-shadow:0 2px 6px rgba(20,40,80,.12);background:linear-gradient(135deg,#3B9BFF,#0D7BEA)}
.tuile::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14) 0 55%,transparent 55%);pointer-events:none}
.tv{position:relative;margin:14px 14px 0;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tl{position:relative;margin:8px 14px 16px;font-size:15px;font-weight:600;flex:1}
.tp{position:relative;display:block;text-align:center;padding:7px 10px;font-weight:600;font-size:15px;color:inherit;text-decoration:none;background:rgba(0,0,0,.13)}
.tp:hover{background:rgba(0,0,0,.22)}
.fl{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#444;font-size:12px;font-weight:800;vertical-align:1px;margin-left:2px}
.t-ico{position:absolute;right:14px;top:14px;width:64px;height:64px;opacity:.16}
.t-bleu{background:linear-gradient(135deg,#3B9BFF,#0D7BEA)}
.t-rouge{background:linear-gradient(135deg,#E9697A,#D63A4E)}
.t-vert{background:linear-gradient(135deg,#5CBF73,#2FA84F)}
.t-jaune{background:linear-gradient(135deg,#FFD23F,#FFC107);color:#1F2937}
.t-jaune .tp{color:#fff;background:rgba(160,110,0,.35)}
.t-turquoise{background:linear-gradient(135deg,#4DBBD1,#1FA2B8)}
.t-gris{background:linear-gradient(135deg,#949BA3,#6C757D)}
@media (max-width:1000px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Planning ---------- */
@media (min-width:761px){.barre{gap:8px 12px}.barre nav{gap:2px;flex-wrap:nowrap}.barre nav a{padding:6px 8px;font-size:13.5px;white-space:nowrap}.qui{font-size:12.5px;gap:8px}}
@media (min-width:761px) and (max-width:1250px){.marque .mt span{display:none}.barre nav{flex-wrap:wrap}}
.souligne{text-decoration:underline!important}
.raccourcis{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.raccourcis a{padding:8px 12px;border:1px solid var(--trait);border-radius:999px;font-size:13px;text-decoration:none;background:#fff}
.raccourcis a.actif,.raccourcis a:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--gris);margin:0 0 10px}
.legende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px}
.plan-mois{position:relative;height:22px;font-size:12px;color:var(--gris);overflow:hidden}
.plan-mois span{position:absolute;top:2px;padding-left:5px;white-space:nowrap}
.plan-corps{position:relative;padding-top:6px;border-top:1px solid var(--trait)}
.plan-trait{position:absolute;top:0;bottom:0;width:1px;background:var(--trait)}
.plan-jour{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--rouge);z-index:1}
.plan-ligne{position:relative;padding:4px 0 8px}
.plan-titre{margin:0 0 4px;font-size:14px;font-weight:600;position:relative;z-index:2}
.plan-titre .note{font-weight:400}
.plan-titre a,.plan-titre .note{background:rgba(255,255,255,.85)}
.plan-piste{height:12px;border-radius:6px;background:#EEF2F6}
.plan-barre{height:12px;border-radius:6px;min-width:6px}
/* Programme des formations (même présentation que le document transmis à l'équipe) */
.prog-tete{display:flex;align-items:center;gap:22px;padding-bottom:16px;margin-bottom:6px;border-bottom:2px solid var(--bleu)}
.prog-tete img{height:74px;width:auto}
.prog-tete h1{font-size:21px;color:var(--fonce);margin:0;letter-spacing:.2px}
.prog-periode{margin:2px 0;font-size:17px;font-weight:700;color:var(--bleu)}
.prog-tete .note{margin:0}
.prog-mois,.prog-points{font-size:17px;font-weight:700;color:var(--bleu);margin:20px 0 8px}
table.prog{border:1px solid #C9D1DA;table-layout:fixed}
table.prog th:nth-child(1){width:13%}table.prog th:nth-child(2){width:27%}table.prog th:nth-child(3){width:14%}table.prog th:nth-child(4){width:10%}table.prog th:nth-child(5){width:18%}
table.prog td.nw{white-space:normal}
table.prog th{background:var(--fonce);color:#fff;padding:8px 10px;border:0;border-right:1px solid #45597E}
table.prog td{padding:8px 10px;border:1px solid #D5DBE2;vertical-align:middle}
table.prog tbody tr:nth-child(even){background:#F2F2F2}
table.prog a{color:inherit;text-decoration:none}
table.prog a:hover{text-decoration:underline}
.alerte{color:#C00000}
@page{size:A4 landscape;margin:12mm}
@media print{
  .barre,.sans-impression,.flash{display:none!important}
  body{background:#fff;font-size:12px}
  main{max-width:none;padding:0}
  .carte{border:0;padding:0 0 8px;break-inside:avoid}
  .plan-barre,.pastille,.legende i,table.prog th,table.prog tr{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .programme{margin:0}
  body{font-size:10.5px}
  table.prog{font-size:10.5px}
  table.prog th,table.prog td{padding:4px 7px}
  .prog-tete{padding-bottom:8px}
  .prog-tete img{height:52px}
  .prog-tete h1{font-size:16px}
  .prog-periode{font-size:13px}
  .prog-mois,.prog-points{font-size:13px;margin:10px 0 5px;break-after:avoid}
  .alertes li{margin:2px 0}
  a{color:inherit;text-decoration:none}
}

/* ---------- Adaptation aux écrans ---------- */
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;flex:1}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.4);border-radius:7px;padding:9px 10px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;border-radius:2px}
img,svg{max-width:100%}
@media (max-width:900px){
  .kv{font-size:21px}
  th,td{padding-right:8px}
}
@media (max-width:760px){
  body{font-size:15px}
  main{padding:14px 12px 40px}
  h1{font-size:21px}
  .barre{padding:10px 12px}
  .menu-btn{display:block}
  .menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;padding-top:6px}
  .menu.ouvert{display:flex}
  .barre nav{flex-direction:column;gap:2px}
  .barre nav a{padding:11px 10px;font-size:15px}
  .qui{justify-content:space-between;flex-wrap:wrap;padding:10px;border-top:1px solid rgba(255,255,255,.2)}
  .carte{padding:14px;border-radius:9px}
  .etroit{margin:24px auto}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tv{font-size:17px;margin:12px 12px 0}
  .tl{font-size:13px;margin:6px 12px 12px}
  .tp{font-size:13px}
  .t-ico{width:44px;height:44px}
  .kpis .carte{padding:12px}
  .kv{font-size:18px;overflow-wrap:anywhere}
  .colonnes{grid-template-columns:1fr}
  .grille{grid-template-columns:1fr}
  .tete{flex-direction:column;align-items:stretch}
  .tete .btn{text-align:center}
  .btn{padding:11px 16px}
  .ligne{flex-direction:column;align-items:stretch}
  .ligne label{width:100%}
  .ligne .coche{flex-direction:row}
  input,select,textarea{width:100%;font-size:16px;padding:10px}
  .coche input{width:auto}
  .be-tete{flex-wrap:wrap}
  .raccourcis{margin-left:0}
  .prog-tete{flex-direction:column;align-items:flex-start;gap:8px}
  .prog-tete h1{font-size:17px}
  table.prog{border:0}
  table.prog.cartes tr{background:#fff}
  .plan-titre .note{display:block}
  /* Tableaux de liste : une carte par ligne */
  table.cartes thead{display:none}
  table.cartes,table.cartes tbody,table.cartes tr,table.cartes td{display:block;width:100%}
  table.cartes tr{border:1px solid var(--trait);border-radius:9px;padding:8px 12px;margin:0 0 10px;background:#fff}
  table.cartes td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:6px 0;border-bottom:1px dashed var(--trait);text-align:right;white-space:normal;overflow-wrap:anywhere;min-width:0}
  table.cartes td:last-child{border-bottom:0}
  table.cartes td:empty{display:none}
  table.cartes td::before{content:attr(data-label);color:var(--gris);font-size:12px;font-weight:600;text-align:left;flex:0 0 38%}
  table.cartes td:first-child{display:block;text-align:left;font-weight:600;font-size:15px}
  table.cartes td:first-child::before{display:none}
  table.cartes td form.ligne{flex-direction:row;margin:0}
  .fiche td:first-child{width:46%}
  .defile{overflow-x:visible}
}
@media (max-width:380px){
  .kpis{grid-template-columns:1fr}
}