/* 6. COMPOSANTS -------------------------------------------------------- */
/* boutons : rayon 4, hauteur 48 ; la flèche « monte d’un pas » au survol */
.btn { --b: var(--act); --bh: var(--act-h); --c: var(--on-act); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: var(--r-s); background: var(--b); color: var(--c); font-weight: 750; font-size: 16px; line-height: 1.1; letter-spacing: .005em; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background var(--t1), color var(--t1), box-shadow var(--t1), transform var(--t1); }
.btn:hover { background: var(--bh); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.ar { width: 20px; height: 20px; stroke-width: 1.8; transition: transform var(--t2) var(--ease); }
:is(a, button, label):is(:hover, :focus-visible) > .ar:not(.bk), :is(a, button):is(:hover, :focus-visible) .go .ar, :is(a, button):is(:hover, :focus-visible) .arr .ar { transform: translateX(var(--a1)); }
:is(a, button):is(:hover, :focus-visible) > .ar.bk { transform: translateX(calc(var(--a1) * -1)); }
.btn.sm .ar { width: 18px; height: 18px; }
.btn.sec { --b: transparent; --bh: transparent; --c: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.btn.sec:hover { box-shadow: inset 0 0 0 2px var(--fg); }
.btn.ghost { --b: transparent; --bh: var(--hl); --c: var(--fg); }
.btn.lg { min-height: 60px; padding: 0 30px; font-size: 17px; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; gap: 8px; }
.btn.full { width: 100%; }
.btn[disabled], .btn.dis { --b: var(--n100); --bh: var(--n100); --c: var(--n500); cursor: not-allowed; box-shadow: none; }
.btn.ico { width: 48px; min-height: 48px; padding: 0; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex: none; }

/* étiquettes */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-s); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--hl); color: var(--fg); white-space: nowrap; }
.tag.o { background: transparent; box-shadow: inset 0 0 0 1px var(--bd); color: var(--tx); }
.tag.v { background: var(--vert); color: #fff; }
.tag.pin { background: var(--pin); color: #fff; }
.tag.or { background: var(--action); color: #fff; }
/* mention de démonstration : toujours visible, toujours le même dessin */
.demo { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-s); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5C3A0E; background: repeating-linear-gradient(-45deg, #FBE3B8 0 6px, #F7D49A 6px 12px); vertical-align: middle; }
.demo.lg { height: auto; min-height: 28px; padding-block: 4px; line-height: 1.3; }
.demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5C3A0E; }
.demo.lg { height: 28px; font-size: 12px; padding: 0 12px; }
.check-ok { color: var(--ok); }

/* puces de filtre */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 40px; box-shadow: inset 0 0 0 1px var(--bd); font-size: 15px; font-weight: 650; color: var(--fg); background: transparent; transition: background var(--t1), color var(--t1), box-shadow var(--t1); white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 2px var(--fg); }
.chip[aria-pressed="true"], .chip.on { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip .ct { font-size: 12px; font-weight: 800; opacity: .7; }
.chip svg { width: 16px; height: 16px; }

/* champs */
.fld { display: grid; gap: 6px; }
.fld label, .fld .lb { font-size: 14px; font-weight: 750; color: var(--fg); }
.fld .hint { font-size: 13px; color: var(--tx2); }
.fld .err { font-size: 13px; color: var(--err); font-weight: 700; display: none; }
.fld.bad .err { display: block; }
.in { width: 100%; min-height: 52px; border-radius: var(--r-s); border: 1px solid var(--bd); background: var(--card); padding: 12px 16px; font-size: 16px; color: var(--tx); transition: border-color var(--t1), box-shadow var(--t1); }
textarea.in { min-height: 120px; resize: vertical; }
.in::placeholder { color: var(--tx2); opacity: .85; }
.in:focus { outline: none; border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.fld.bad .in { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
select.in { appearance: none; padding-right: 44px; }
select.in option { color: var(--pin); background: #fff; }
/* liste déroulante maison : mêmes jetons que les champs, sur toutes les surfaces */
.csel { position: relative; min-width: 0; }
.csel-native { display: none; }
.csel-btn { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.csel-btn .csel-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn .csel-ch { width: 18px; height: 18px; stroke-width: 1.8; color: var(--fg); transition: transform var(--t2) var(--ease); }
.csel.on .csel-btn { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.csel.on .csel-ch { transform: rotate(180deg); }
.csel-btn:hover { border-color: var(--fg); }
.csel-btn:focus-visible { outline: none; border-color: var(--act); box-shadow: 0 0 0 1px var(--act), 0 0 0 4px color-mix(in srgb, var(--act) 25%, transparent); }
.csel-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; color: var(--pin); border: 1px solid var(--n200); border-radius: 4px 12px 4px 4px; box-shadow: var(--shadow-2); transform-origin: top; animation: cselIn var(--t1) var(--ease) both; }
.csel-list { min-width: min(240px, calc(100vw - 32px)); }
.csel.end .csel-list { left: auto; }
.csel.up .csel-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.csel-list:focus { outline: none; }
.csel-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 4px; font-size: 15.5px; line-height: 1.3; cursor: pointer; }
.csel-list li .icon { flex: none; }
.csel-list li .icon { width: 18px; height: 18px; color: var(--action); opacity: 0; }
.csel-list li.act { background: var(--rose); }
.csel-list li[aria-selected="true"] { font-weight: 800; }
.csel-list li[aria-selected="true"] .icon { opacity: 1; }
@keyframes cselIn { from { opacity: 0; transform: translateY(-4px) scaleY(.96); } }
.csel.up .csel-list { animation-name: cselUp; }
@keyframes cselUp { from { opacity: 0; transform: translateY(4px) scaleY(.96); } }
.cb { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.cb input { appearance: none; width: 22px; height: 22px; flex: none; margin: 1px 0 0; border-radius: var(--r-s); border: 1px solid var(--bd); background: var(--card); display: grid; place-items: center; transition: background var(--t1), border-color var(--t1); }
.cb input:checked { background: var(--act); border-color: var(--act); }
.cb input:checked::after { content: ""; width: 12px; height: 7px; border: solid var(--on-act); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.cb input[type="radio"] { border-radius: 50%; }
.cb input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--on-act); transform: none; }
.cb:hover input:not(:checked):not(:disabled) { border-color: var(--fg); }
.cb input:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.cb input:disabled { opacity: .45; cursor: not-allowed; }
.cb:has(input:disabled) { cursor: not-allowed; color: var(--tx2); }
.fld.bad .cb input { border-color: var(--err); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* segmenté (choix exclusif) */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 8px; background: var(--hl); position: relative; flex-wrap: wrap; }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 0 18px; border-radius: 6px; font-weight: 750; font-size: 15px; color: var(--tx); transition: color var(--t2); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--on-fg); }
.seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { color: var(--fg); }
.seg button:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }
.seg .thumb { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 6px; background: var(--fg); transition: transform var(--t2) var(--ease), width var(--t2) var(--ease), height var(--t2) var(--ease), top var(--t2) var(--ease); }

/* onglets à marqueur glissant */
.tabs { display: flex; gap: clamp(18px, 3vw, 36px); border-bottom: 1px solid var(--ln); position: relative; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 0 0 16px; font-size: 16px; font-weight: 650; color: var(--tx2); white-space: nowrap; transition: color var(--t1); }
.tabs button[aria-selected="true"] { color: var(--fg); font-weight: 800; }
.tabs .bar { position: absolute; bottom: -1px; left: 0; height: 4px; background: var(--mk); transition: transform var(--t2) var(--ease), width var(--t2) var(--ease); }

/* conteneurs : coin de sortie */
.card { background: var(--card); border: 1px solid var(--cardb); border-radius: var(--corner); }
.panel { background: var(--card); border: 1px solid var(--cardb); border-radius: var(--corner-xl); padding: clamp(20px, 3vw, 36px); }
.callout { position: relative; background: var(--hl); border-radius: var(--corner); padding: 28px 24px 22px; font-size: 15px; }
.callout::before { content: ""; position: absolute; left: 24px; top: 0; width: var(--m); height: 4px; background: var(--mk); }
.alert { position: relative; display: flex; gap: 12px; border-radius: var(--corner); padding: 20px 20px 16px; font-size: 15px; line-height: 1.5; color: var(--n900); background: var(--c-bg); }
.alert::before { content: ""; position: absolute; left: 20px; top: 0; width: var(--m); height: 4px; background: var(--c); }
.alert .icon { stroke: var(--c); margin-top: 1px; }
.alert b { color: var(--c); }
.alert.info { --c: var(--info); --c-bg: var(--info-bg); }
.alert.ok { --c: var(--ok); --c-bg: var(--ok-bg); }
.alert.warn { --c: var(--warn); --c-bg: var(--warn-bg); }

/* accordéon */
.acc { border-top: 1px solid var(--ln); }
.acc-i { border-bottom: 1px solid var(--ln); }
.acc-h { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 0; font-size: 18px; font-weight: 750; color: var(--fg); }
.acc-h .pm { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bd); position: relative; transition: background var(--t1), transform var(--t2) var(--ease); }
.acc-h .pm::before, .acc-h .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--fg); transform: translate(-50%, -50%); transition: transform var(--t2) var(--ease); }
.acc-h .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-h[aria-expanded="true"] .pm { background: var(--fg); }
.acc-h[aria-expanded="true"] .pm::before, .acc-h[aria-expanded="true"] .pm::after { background: var(--bg); transform: translate(-50%, -50%) rotate(180deg); }
.acc-b { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t2) var(--ease); }
.acc-b > div { overflow: hidden; }
.js .acc-h[aria-expanded="false"] + .acc-b { grid-template-rows: 0fr; } /* sans JavaScript, tout reste ouvert */
.acc-b .in-b { padding: 0 0 24px; }

/* étapes (stepper) dessinées avec la logique du pas */
.steps { display: flex; align-items: flex-end; gap: 0; counter-reset: st; }
.steps li { flex: 1; position: relative; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--tx2); }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bd); }
.steps li span { display: block; padding-right: 8px; }
.steps li.done::before, .steps li.cur::before { height: 4px; top: -1.5px; background: var(--mk); }
.steps li.cur { color: var(--fg); }
.steps li.done { color: var(--fg); }
.steps li.cur span::before { content: "En cours · "; color: var(--action); }
.steps li:not(:first-child) { transform: translateY(calc(var(--i) * -6px)); }

/* carte de formation : billet à coin de sortie, escalier de niveau */
.fcard { --acc: var(--orange); position: relative; display: flex; flex-direction: column; min-height: 100%; background: var(--card); border-radius: var(--corner-xl); border: 1px solid var(--cardb); text-decoration: none; color: var(--tx); transform-style: preserve-3d; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2); will-change: transform; }
.fcard:hover { box-shadow: var(--shadow-2); text-decoration: none; border-color: transparent; }
.fcard .top { position: relative; height: 132px; border-radius: 6px 28px 0 0; overflow: hidden; background: var(--tone, var(--rose)); }
.fcard .top svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fcard .top .lvl { position: absolute; right: 16px; top: 14px; z-index: 2; height: 26px; display: flex; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone-fg, var(--pin)); }
.fcard .top .type { position: absolute; left: 16px; top: 14px; z-index: 2; }
.fcard .body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fcard h3 { font-size: 20px; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; }
.fcard p { font-size: 15px; color: var(--tx2); line-height: 1.5; }
.fcard .meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; font-weight: 650; color: var(--tx); }
.fcard .meta span { display: inline-flex; align-items: center; gap: 6px; }
.fcard .meta svg { width: 16px; height: 16px; }
.fcard .go { position: absolute; z-index: 3; right: 18px; top: 112px; width: 40px; height: 40px; border-radius: 50%; background: var(--act); color: #fff; display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform var(--t2) var(--ease), opacity var(--t2); }
.fcard:hover .go, .fcard:focus-visible .go { transform: scale(1); opacity: 1; }
.fcard .go svg { width: 18px; height: 18px; }
.fcard mark { background: var(--ocre-l); color: inherit; border-radius: 2px; padding: 0 2px; }

/* tiroir et modale */
.scrim { position: fixed; inset: 0; z-index: 180; background: rgba(12, 38, 30, .5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--t2); }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 190; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--creme); box-shadow: var(--shadow-2); transform: translateX(104%); transition: transform var(--t2) var(--ease); display: flex; flex-direction: column; visibility: hidden; }
.drawer.on { transform: none; visibility: visible; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--ln); }
.drawer-b { flex: 1; overflow: auto; padding: 20px 24px; overscroll-behavior: contain; }
.drawer-f { padding: 20px 24px; border-top: 1px solid var(--ln); background: #fff; }
.modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.modal-box { pointer-events: auto; width: min(880px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--corner-xl); background: var(--creme); box-shadow: var(--shadow-2); transform: translateY(24px) scale(.98); opacity: 0; transition: transform var(--t2) var(--ease), opacity var(--t2); }
.modal.on .modal-box { transform: none; opacity: 1; }
.x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: background var(--t1); }
.x:hover { background: var(--hl); }

/* toast */
.toasts { position: fixed; z-index: 250; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: min(480px, calc(100% - 32px)); }
.toast { background: var(--pin); color: #fff; border-radius: var(--corner); padding: 14px 18px; font-size: 15px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-2); animation: toastIn var(--t2) var(--ease); }
.toast b { color: var(--ocre); }
.toast.out { animation: toastOut var(--t2) var(--ease) forwards; }
@keyframes toastIn { from { transform: translateY(16px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }

/* anneau de progression */
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--mk) calc(var(--p) * 1%), var(--ln) 0); display: grid; place-items: center; flex: none; }
.ring::before { content: attr(data-v); width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; background: var(--card); display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--fg); }

/* barre « pas » de progression */
.pbar { position: relative; height: 16px; }
.pbar::before { content: ""; position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: var(--bd); }
.pbar i { position: absolute; left: 0; top: 6px; height: 4px; width: var(--p); background: var(--mk); transition: width var(--t3) var(--ease); }
.pbar b { position: absolute; left: var(--p); top: 1px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--mk); transition: left var(--t3) var(--ease); }