/* CFA360 V222 — Design system commun, sobre et accessible. */
:root{
  --cfa218-blue-950:#052d53;
  --cfa218-blue-900:#073b6f;
  --cfa218-blue-800:#0b4f88;
  --cfa218-blue-700:#1566a2;
  --cfa218-blue-100:#eaf3fb;
  --cfa218-blue-050:#f5f9fd;
  --cfa218-orange-600:#ed7814;
  --cfa218-orange-500:#ff8a1d;
  --cfa218-green-700:#18734a;
  --cfa218-green-100:#e9f7ef;
  --cfa218-amber-700:#8d5b00;
  --cfa218-amber-100:#fff5d9;
  --cfa218-red-700:#ab2b2b;
  --cfa218-red-100:#ffeded;
  --cfa218-ink:#17324d;
  --cfa218-muted:#5b7188;
  --cfa218-line:#d7e2ec;
  --cfa218-surface:#ffffff;
  --cfa218-canvas:#f3f7fb;
  --cfa218-radius-sm:10px;
  --cfa218-radius:16px;
  --cfa218-radius-lg:24px;
  --cfa218-shadow:0 10px 30px rgba(13,59,99,.09);
  --cfa218-shadow-hover:0 16px 36px rgba(13,59,99,.15);
  --cfa218-focus:0 0 0 4px rgba(255,138,29,.3);
  --cfa218-content:1280px;
}

html[data-cfa360-ui="v222"]{
  color-scheme:light;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

html[data-cfa360-ui="v222"] body{
  color:var(--cfa218-ink);
  background-color:var(--cfa218-canvas);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html[data-cfa360-ui="v222"] *,
html[data-cfa360-ui="v222"] *::before,
html[data-cfa360-ui="v222"] *::after{box-sizing:border-box;}

html[data-cfa360-ui="v222"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cfa218-orange-500) !important;
  outline-offset:3px !important;
  box-shadow:var(--cfa218-focus);
}

html[data-cfa360-ui="v222"] :where(button,input,select,textarea){font:inherit;}
html[data-cfa360-ui="v222"] :where(button,a,summary){-webkit-tap-highlight-color:transparent;}
html[data-cfa360-ui="v222"] :where(button,[role="button"],summary){touch-action:manipulation;}
html[data-cfa360-ui="v222"] :where(img){max-width:100%;}
html[data-cfa360-ui="v222"] :where(p){line-height:1.55;}
html[data-cfa360-ui="v222"] :where(h1,h2,h3,h4){letter-spacing:-.02em;text-wrap:balance;}

.cfa360-skip-v222{
  position:fixed;z-index:100000;left:16px;top:12px;transform:translateY(-160%);
  padding:11px 16px;border-radius:10px;background:#fff;color:var(--cfa218-blue-900);
  font-weight:800;text-decoration:none;box-shadow:var(--cfa218-shadow);
}
.cfa360-skip-v222:focus{transform:translateY(0);}

html[data-cfa360-ui="v222"] :where(.cfa360-topbar,.parent-topbar){
  border-bottom:1px solid rgba(7,59,111,.1);
  box-shadow:0 5px 18px rgba(7,59,111,.07);
}
html[data-cfa360-ui="v222"] :where(.cfa360-topbar,.parent-topbar) a,
html[data-cfa360-ui="v222"] :where(.cfa360-topbar,.parent-topbar) button{min-height:44px;}

html[data-cfa360-ui="v222"] :where(.shell,.parent-shell,.cfa360-role-home,.cfa360-apprenti-home){
  width:min(100%,var(--cfa218-content));
  margin-inline:auto;
}

html[data-cfa360-ui="v222"] :where(.panel,.content-section,.state-panel,.learner-card,.privacy-note,.admin-card,.auth-card){
  border-color:var(--cfa218-line);
  box-shadow:var(--cfa218-shadow);
}

html[data-cfa360-ui="v222"] :where(.panel,.content-section){
  border-radius:var(--cfa218-radius);
  background:var(--cfa218-surface);
}

html[data-cfa360-ui="v222"] :where(.panel-head,.section-heading,.dashboard-header){gap:16px;}
html[data-cfa360-ui="v222"] :where(.panel-subtext,.header-text,.section-heading>p,.small-muted){color:var(--cfa218-muted);}

html[data-cfa360-ui="v222"] :where(
  .primary-btn,.secondary-btn,.admin-top-btn,.role-top-btn,.parent-topbar button,
  button[type="submit"],button[id*="save" i],button[id*="add" i],button[id*="import" i]
){
  min-height:44px;border-radius:var(--cfa218-radius-sm);font-weight:750;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
html[data-cfa360-ui="v222"] :where(button,a)[aria-busy="true"]{cursor:wait;opacity:.75;}
html[data-cfa360-ui="v222"] :where(button,a)[aria-disabled="true"],
html[data-cfa360-ui="v222"] :where(button:disabled,input:disabled,select:disabled,textarea:disabled){cursor:not-allowed;opacity:.62;}
@media(hover:hover){
  html[data-cfa360-ui="v222"] :where(.primary-btn,.secondary-btn,.admin-top-btn,.role-top-btn,.role-action-card,.apprenti-action-card,.metric-card):hover{
    transform:translateY(-2px);box-shadow:var(--cfa218-shadow-hover);
  }
}

html[data-cfa360-ui="v222"] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:44px;border:1px solid #bccddd;border-radius:var(--cfa218-radius-sm);
  background:#fff;color:var(--cfa218-ink);padding:10px 12px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
html[data-cfa360-ui="v222"] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover{border-color:#8da9c1;}
html[data-cfa360-ui="v222"] :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--cfa218-red-700);background:var(--cfa218-red-100);}
html[data-cfa360-ui="v222"] :where(label){color:var(--cfa218-ink);}

html[data-cfa360-ui="v222"] :where(.message,.inline-message,[role="alert"],[role="status"]){line-height:1.45;}
html[data-cfa360-ui="v222"] :where(.message.error,.error-panel){border-color:#efb0b0;background:var(--cfa218-red-100);color:var(--cfa218-red-700);}
html[data-cfa360-ui="v222"] :where(.message.success){border-color:#a9d9bd;background:var(--cfa218-green-100);color:var(--cfa218-green-700);}

.cfa360-table-scroll-v222{width:100%;overflow:auto;border:1px solid var(--cfa218-line);border-radius:12px;background:#fff;overscroll-behavior-inline:contain;}
html[data-cfa360-ui="v222"] .cfa360-table-scroll-v222 table{width:100%;margin:0;border:0;box-shadow:none;}
html[data-cfa360-ui="v222"] :where(table){border-collapse:separate;border-spacing:0;}
html[data-cfa360-ui="v222"] :where(th){background:#edf4fa;color:var(--cfa218-blue-950);font-size:.82rem;letter-spacing:.01em;text-align:left;}
html[data-cfa360-ui="v222"] :where(th,td){padding:12px 14px;border-bottom:1px solid #e4ebf2;}
html[data-cfa360-ui="v222"] :where(tbody tr:last-child td){border-bottom:0;}
html[data-cfa360-ui="v222"] :where(tbody tr):hover{background:#f8fbfe;}

.cfa360-footer-v222{
  width:min(calc(100% - 32px),var(--cfa218-content));margin:26px auto 14px;padding:16px 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  color:#fff;font-size:.82rem;text-align:center;background:rgba(4,65,112,.9);
}
.cfa360-footer-v222 a{color:#fff!important;font-weight:700;text-underline-offset:3px;}

.cfa360-help-dialog-v222{
  width:min(92vw,560px);border:0;border-radius:20px;padding:0;color:var(--cfa218-ink);
  box-shadow:0 30px 90px rgba(3,32,59,.3);
}
.cfa360-help-dialog-v222::backdrop{background:rgba(2,28,52,.62);backdrop-filter:blur(3px);}
.cfa360-help-dialog-v222[open]{display:block;}
.cfa360-help-card-v222{padding:26px;}
.cfa360-help-card-v222 header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;}
.cfa360-help-card-v222 h2{margin:0;color:var(--cfa218-blue-950);font-size:1.45rem;}
.cfa360-help-card-v222 p{color:var(--cfa218-muted);}
.cfa360-help-list-v222{display:grid;gap:12px;margin:18px 0 22px;padding:0;list-style:none;}
.cfa360-help-list-v222 li{padding:13px 15px;border-radius:12px;background:var(--cfa218-blue-050);border:1px solid var(--cfa218-line);}
.cfa360-dialog-close-v222{border:0;background:#edf3f8;color:var(--cfa218-blue-900);border-radius:9px;padding:8px 12px;font-weight:800;cursor:pointer;}
.cfa360-confirm-actions-v222{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}
.cfa360-confirm-danger-v222{min-height:44px;border:0;border-radius:10px;padding:10px 16px;background:var(--cfa218-red-700);color:#fff;font-weight:800;cursor:pointer;}

.cfa360-toast-region-v222{position:fixed;z-index:99999;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));display:grid;gap:10px;pointer-events:none;}
.cfa360-toast-v222{padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--cfa218-line);box-shadow:var(--cfa218-shadow-hover);font-weight:700;pointer-events:auto;animation:cfa218ToastIn .2s ease both;}
.cfa360-toast-v222.is-success{border-left:5px solid var(--cfa218-green-700);}
.cfa360-toast-v222.is-error{border-left:5px solid var(--cfa218-red-700);}
@keyframes cfa218ToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cfa360-quick-actions-v222{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 20px;}
.cfa360-quick-actions-v222.is-single{grid-template-columns:minmax(280px,480px);}
.cfa360-quick-action-v222{display:flex;flex-direction:column;gap:5px;min-height:112px;padding:17px;border:1px solid var(--cfa218-line);border-radius:14px;background:#fff;color:var(--cfa218-ink);text-decoration:none;box-shadow:0 6px 18px rgba(7,59,111,.07);}
.cfa360-quick-action-v222 strong{color:var(--cfa218-blue-900);}
.cfa360-quick-action-v222 small{color:var(--cfa218-muted);line-height:1.35;}
.cfa360-quick-action-v222 span{margin-top:auto;color:var(--cfa218-orange-600);font-weight:900;}

.cfa360-collapsible-v222{margin:0 0 16px;border:1px solid var(--cfa218-line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(7,59,111,.06);overflow:hidden;}
.cfa360-collapsible-v222>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;color:var(--cfa218-blue-950);font-weight:800;cursor:pointer;list-style:none;}
.cfa360-collapsible-v222>summary::-webkit-details-marker{display:none;}
.cfa360-collapsible-v222>summary::after{content:"+";font-size:1.35rem;color:var(--cfa218-orange-600);}
.cfa360-collapsible-v222[open]>summary::after{content:"−";}
.cfa360-collapsible-v222>.panel{margin:0;border:0;border-top:1px solid var(--cfa218-line);border-radius:0;box-shadow:none;}

.cfa360-section-tabs-v222{display:flex;gap:8px;margin:18px 0;padding:6px;border:1px solid var(--cfa218-line);border-radius:14px;background:#eaf1f7;overflow:auto;}
.cfa360-tab-v222{flex:1;min-width:max-content;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--cfa218-blue-900);padding:10px 16px;font-weight:800;cursor:pointer;}
.cfa360-tab-v222[aria-selected="true"]{background:#fff;color:var(--cfa218-blue-950);box-shadow:0 5px 14px rgba(7,59,111,.12);}
.cfa360-tab-pane-v222[hidden]{display:none !important;}

html[data-cfa360-ui="v222"] :where(.role-action-card,.apprenti-action-card,.metric-card){border-radius:var(--cfa218-radius);}
html[data-cfa360-ui="v222"] :where(.role-action-card,.apprenti-action-card) small{line-height:1.4;}
html[data-cfa360-ui="v222"] :where(.cfa360-profile-icon,.role-action-icon,.apprenti-action-icon,.cfa360-admin-link>span,.admin-wow-action>span,.contact-grid article>span) svg{width:1.4em;height:1.4em;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html[data-cfa360-ui="v222"] :where(.cfa360-profile-icon,.role-action-icon,.apprenti-action-icon){display:grid;place-items:center;}
html[data-cfa360-ui="v222"] label:has(#optRadar),html[data-cfa360-ui="v222"] label:has([data-sync-option="optRadar"]){display:none!important;}

body[data-cfa360-page="index"] #roleGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
body[data-cfa360-page="formateur-dashboard"] .role-action-grid,
body[data-cfa360-page="tuteur-dashboard"] .role-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
body[data-cfa360-page^="admin-ufa-"] .dashboard-header{min-height:210px!important;padding-block:28px!important;}
body[data-cfa360-page^="admin-ufa-"] .dashboard-header h2{font-size:clamp(2rem,4vw,3.5rem)!important;}
body[data-cfa360-page="admin-ufa-apprentis"] .dashboard>.panel:has(.info-box){padding:14px 18px!important;}
body[data-cfa360-page="admin-ufa-apprentis"] .info-box{display:flex;gap:22px;flex-wrap:wrap;padding:12px 14px!important;}
body[data-cfa360-page="admin-ufa-apprentis"] .info-box p{margin:0!important;}

html[data-cfa360-ui="v222"] .cfa360-progress-v213{
  --v213-blue:var(--cfa218-blue-900);--v213-sky:#1574b8;--v213-orange:var(--cfa218-orange-600);
  --v213-red:#d84b4b;--v213-amber:#f59a23;--v213-green:#22956b;--v213-grey:#aebdca;
  --v213-ink:var(--cfa218-ink);--v213-muted:var(--cfa218-muted);--v213-line:var(--cfa218-line);
  padding:clamp(19px,2.5vw,30px);border:1px solid var(--cfa218-line);border-radius:20px;
  background:#fff;box-shadow:var(--cfa218-shadow);
}
.cfa360-v222-training-position{margin:16px 0 22px;padding:14px 16px;border:1px solid var(--cfa218-line);border-radius:13px;background:var(--cfa218-blue-050);}
.cfa360-v222-training-position>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--cfa218-blue-950);font-size:.82rem;}
.cfa360-v222-training-position>div:first-child span{font-weight:800;}.cfa360-v222-training-position>div:first-child strong{font-size:.74rem;}
.cfa360-v222-training-track{height:9px;margin-top:10px;border-radius:999px;background:#dce7f0;overflow:hidden;}
.cfa360-v222-training-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cfa218-blue-800),#2a8dca);}
.cfa360-v222-training-position small{display:block;margin-top:7px;color:var(--cfa218-muted);font-size:.67rem;}

/* Compatibilité du composant longitudinal, dont le balisage stable conserve le préfixe V216. */
.cfa360-v216-training-position{margin:16px 0 22px;padding:14px 16px;border:1px solid var(--cfa218-line);border-radius:13px;background:var(--cfa218-blue-050);}
.cfa360-v216-training-position>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--cfa218-blue-950);font-size:.82rem;}
.cfa360-v216-training-position>div:first-child span{font-weight:800;}.cfa360-v216-training-position>div:first-child strong{font-size:.74rem;}
.cfa360-v216-training-track{height:9px;margin-top:10px;border-radius:999px;background:#dce7f0;overflow:hidden;}
.cfa360-v216-training-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cfa218-blue-800),#2a8dca);}
.cfa360-v216-training-position small{display:block;margin-top:7px;color:var(--cfa218-muted);font-size:.67rem;}

@media(max-width:980px){
  .cfa360-quick-actions-v222{grid-template-columns:repeat(2,minmax(0,1fr));}
  body[data-cfa360-page="index"] #roleGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body[data-cfa360-page="formateur-dashboard"] .role-action-grid,
  body[data-cfa360-page="tuteur-dashboard"] .role-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media(max-width:720px){
  :root{--cfa218-radius:14px;--cfa218-radius-lg:18px;}
  html[data-cfa360-ui="v222"] :where(.shell,.parent-shell,.cfa360-role-home,.cfa360-apprenti-home){width:100%;}
  html[data-cfa360-ui="v222"] :where(.dashboard,.parent-shell,.cfa360-role-home,.cfa360-apprenti-home){padding-inline:14px;}
  html[data-cfa360-ui="v222"] :where(.panel,.content-section){padding:17px;}
  html[data-cfa360-ui="v222"] :where(th,td){padding:10px 12px;}
  .cfa360-quick-actions-v222{grid-template-columns:1fr;gap:10px;}
  body[data-cfa360-page="index"] #roleGrid{grid-template-columns:1fr!important;}
  body[data-cfa360-page="formateur-dashboard"] .role-action-grid,
  body[data-cfa360-page="tuteur-dashboard"] .role-action-grid{grid-template-columns:1fr!important;}
  .cfa360-quick-action-v222{min-height:88px;}
  .cfa360-footer-v222{width:calc(100% - 22px);margin-top:18px;}
  .cfa360-help-card-v222{padding:20px;}
  .cfa360-confirm-actions-v222{flex-direction:column-reverse;}
  .cfa360-confirm-actions-v222 button{width:100%;}
  .cfa360-v222-training-position>div:first-child{display:block;}.cfa360-v222-training-position>div:first-child strong{display:block;margin-top:4px;}
  .cfa360-v216-training-position>div:first-child{display:block;}.cfa360-v216-training-position>div:first-child strong{display:block;margin-top:4px;}
}

@media(prefers-reduced-motion:reduce){
  html[data-cfa360-ui="v222"]{scroll-behavior:auto;}
  html[data-cfa360-ui="v222"] *,html[data-cfa360-ui="v222"] *::before,html[data-cfa360-ui="v222"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

@media print{
  .cfa360-skip-v222,.cfa360-footer-v222,.cfa360-help-dialog-v222,.cfa360-toast-region-v222,.cfa360-section-tabs-v222{display:none !important;}
  html[data-cfa360-ui="v222"] body{background:#fff;}
  html[data-cfa360-ui="v222"] :where(.panel,.content-section,.admin-card){box-shadow:none;}
}