/* V11.4.0 — Audit UX du site public : sommaire des fiches, bloc « Et maintenant ? »,
   aiguillage employeur / salarié, légendes des maquettes, formulaire replié.
   S'appuie sur les variables du design system (impact-social-v10.css). */

/* Sommaire des fiches (W-08) */
.ux-toc{margin:0 auto;padding:0 20px;max-width:860px}
.ux-toc__inner{margin:18px 0 6px;padding:14px 18px;border:1px solid var(--ds-border,#DDE8F0);border-radius:14px;background:var(--ds-sky-50,#F2F8FC)}
.ux-toc__title{margin:0 0 6px;font:700 13px/1.4 var(--ds-font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--ds-teal-700,#0B6B78)}
.ux-toc ol{margin:0;padding-left:20px;columns:2 260px;column-gap:28px}
.ux-toc li{margin:2px 0;break-inside:avoid;font-size:15px;line-height:1.45}
.ux-toc a{color:var(--ds-ink,#132B5E);text-decoration:underline;text-underline-offset:2px}
.ux-toc__date{margin:8px 0 0;font-size:13.5px;color:var(--ds-muted,#5A6880)}
main h2[id]{scroll-margin-top:96px}

/* Bloc « Et maintenant ? » en bas des fiches (W-01) */
.ux-next{max-width:860px;margin:12px auto 44px;padding:0 20px}
.ux-next__box{border:1px solid var(--ds-border,#DDE8F0);border-radius:16px;background:#fff;padding:20px 22px;box-shadow:var(--ds-shadow-sm,none)}
.ux-next__title{margin:0 0 12px;font:800 22px/1.2 var(--ds-font-head,system-ui,sans-serif);color:var(--ds-ink,#132B5E)}
.ux-next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ux-next__col{padding:14px 16px;border-radius:12px;background:var(--ds-bg,#F3F8FB)}
.ux-next__col h3{margin:0 0 6px;font:700 16px/1.3 var(--ds-font-head,system-ui,sans-serif);color:var(--ds-ink,#132B5E)}
.ux-next__col p,.ux-next__col li{margin:0;font-size:15px;line-height:1.55;color:var(--ds-text,#3D4B63)}
.ux-next__col ul{margin:0;padding-left:18px;display:grid;gap:6px}
.ux-next__col a{color:var(--ds-teal-700,#0B6B78);font-weight:700}
.ux-next__btn{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:10px 16px;border-radius:10px;background:var(--ds-teal-700,#0B6B78);color:#fff!important;text-decoration:none}
.ux-next__urgent{margin:14px 0 0;font-size:14.5px;color:var(--ds-text,#3D4B63)}
.ux-next__employer{margin:6px 0 0;font-size:14px;color:var(--ds-muted,#5A6880)}
.ux-next__employer a{color:var(--ds-teal-700,#0B6B78);font-weight:600}

/* Légende visible des maquettes (W-05) */
.ux-caption{display:block;margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--ds-muted,#5A6880);text-align:center}
.ds-stage .ux-caption{position:relative;z-index:2}

/* Aiguillage employeur / salarié (W-06) */
.ux-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ux-door{display:grid;gap:8px;align-content:start;padding:20px 22px;border:1px solid var(--ds-border,#DDE8F0);border-radius:16px;background:#fff;box-shadow:var(--ds-shadow-sm,none)}
.ux-door h2{margin:0;font:800 21px/1.25 var(--ds-font-head,system-ui,sans-serif);color:var(--ds-ink,#132B5E)}
.ux-door p{margin:0;color:var(--ds-text,#3D4B63);font-size:15.5px;line-height:1.55}
.ux-door ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ux-door li a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--ds-bg,#F3F8FB);color:var(--ds-ink,#132B5E);font-weight:600;text-decoration:none}
.ux-door li a:hover,.ux-door li a:focus-visible{background:var(--ds-teal-50,#EFF9F9);color:var(--ds-teal-700,#0B6B78)}
.ux-door li small{margin-left:auto;padding-left:10px;font-weight:400;color:var(--ds-muted,#5A6880);font-size:13px}
.ux-door--salarie{background:var(--ds-teal-50,#EFF9F9)}

/* Coût par salarié (W-09) */
.ux-perhead{display:block;margin-top:4px;font-size:13.5px;color:var(--ds-muted,#5A6880)}

/* Formulaire de contact : précisions repliées (W-10) */
.ux-more{margin:6px 0 14px;border:1px solid var(--ds-border,#DDE8F0);border-radius:12px;padding:4px 14px;background:#fff}
.ux-more>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ds-teal-700,#0B6B78)}
.ux-more[open]{padding-bottom:12px}

/* Page « Trouver de l'aide » */
.ux-help{max-width:860px;margin:0 auto;padding:0 20px 48px;display:grid;gap:18px}
.ux-help__card{padding:18px 20px;border:1px solid var(--ds-border,#DDE8F0);border-radius:14px;background:#fff}
.ux-help__card h2{margin:0 0 8px;font:800 21px/1.25 var(--ds-font-head,system-ui,sans-serif);color:var(--ds-ink,#132B5E)}
.ux-help__card p,.ux-help__card li{font-size:16px;line-height:1.6;color:var(--ds-text,#3D4B63)}
.ux-help__card--urgent{border-color:#F3C7C2;background:#FFF7F6}
.ux-help__msg{margin:10px 0;padding:14px 16px;border-radius:12px;background:var(--ds-bg,#F3F8FB);white-space:pre-wrap;font:15px/1.6 var(--ds-font,system-ui,sans-serif);color:var(--ds-ink,#132B5E)}
.ux-help__copy{min-height:44px;padding:10px 16px;border:0;border-radius:10px;background:var(--ds-teal-700,#0B6B78);color:#fff;font:600 15px var(--ds-font,system-ui,sans-serif);cursor:pointer}
.ux-help__copy:focus-visible,.ux-next a:focus-visible,.ux-toc a:focus-visible,.ux-door a:focus-visible{outline:3px solid var(--ds-teal-700,#0B6B78);outline-offset:2px}
@media print{.ux-toc,.ux-next{display:none}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ux-hero-salarie{margin:16px 0 0;font-size:15.5px;color:var(--ds-text,#3D4B63)}
.ux-hero-salarie a{color:var(--ds-teal-700,#0B6B78);font-weight:700}
.ds-stage .ux-caption--stage{position:absolute;left:0;right:0;bottom:-28px;z-index:3;margin:0}
@media (max-width:960px){.ds-stage .ux-caption--stage{position:static;margin-top:8px}}
/* Ressources (W-07) : raccourcis compacts, photo masquée sur mobile pour que la recherche arrive vite. */
.ux-res-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.ux-res-shortcuts a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--ds-border,#DDE8F0);border-radius:999px;background:#fff;color:var(--ds-teal-700,#0B6B78);font-weight:600;font-size:14.5px;text-decoration:none}
.ux-res-shortcuts a:hover,.ux-res-shortcuts a:focus-visible{background:var(--ds-teal-50,#EFF9F9)}
@media (max-width:960px){.ux-res-hero .ds-photo{display:none}}
/* Téléphone : textes d'introduction allégés et raccourcis sur une ligne défilante, pour que la recherche soit visible sans défiler. */
@media (max-width:700px){
.ux-res-hero{padding:20px 0 12px!important}
.ux-res-hero h1{font-size:30px;line-height:1.12}
.ux-res-hero .lead{font-size:16px;margin-bottom:0}
.ux-res-hero .lead + p,#guides>.container>.subtitle{display:none}
.ux-res-shortcuts{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ux-res-shortcuts li{flex:0 0 auto}
#guides{padding-top:12px!important}
}