/* Expérience publique : interactions locales et mouvement contrôlable. */
.hero { grid-template-columns: 1fr 1fr; gap: 50px; }
.hero h1 em { font-size: .8em; }
.hero__chapo { max-width: 485px; }
.constellation { min-width: 0; align-self: center; }
.constellation__tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: #bfd4dd; font-size: .625rem; letter-spacing: .12em; }
#motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 11px; border: 1px solid #537386; border-radius: 30px; background: transparent; color: #d6e8ee; font-size: .6875rem; letter-spacing: 0; }
#motion-toggle:hover { background: #244759; }
#motion-toggle:disabled { cursor: default; opacity: 1; }
.constellation__scene { position: relative; height: 440px; margin: 10px 0; isolation: isolate; background-image: radial-gradient(#64829355 .8px,transparent .8px); background-size: 25px 25px; }
.constellation__liens { position: absolute; inset: 0; width: 100%; height: 100%; fill: #aacdbc; pointer-events: none; z-index: -1; }
.constellation__liens path { fill: none; stroke: #9acabb; stroke-width: 1.4; }
.constellation__liens .lien-secondaire { stroke: #577b8c; stroke-width: 1; }
.lien-vivant { stroke-dasharray: 5 8; }
.orbite { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; border: 1px solid #5d879b55; border-radius: 50%; transform: translate(-50%,-50%); z-index: -1; pointer-events: none; }
.orbite--deux { width: 360px; height: 360px; border-style: dashed; }
.orbite::after { content: ''; width: 8px; height: 8px; background: #b2d6b9; border-radius: 50%; position: absolute; top: 50%; left: -4px; box-shadow: 0 0 0 5px #b2d6b918; }
.orbite--deux::after { background: #e4cda4; width: 5px; height: 5px; left: -2px; }
.acteur { position: absolute; text-align: left; border: 1px solid #567c8c; background: #234556; color: #edf5f6; padding: 17px 19px; border-radius: 12px; box-shadow: 0 12px 24px #071c242a; line-height: 1.5; overflow-wrap: anywhere; transition: border-color .2s,background .2s,box-shadow .2s; }
.acteur:hover,.acteur[aria-pressed=true] { border-color: #c4e4cc; box-shadow: 0 0 0 3px #c4e4cc18; background: #2b5263; }
.acteur strong { display: block; font-size: .9375rem; font-weight: 600; }
.acteur > span { display: block; font-size: .625rem; color: #c6dce4; margin-top: 5px; }
.acteur .acteur__index { color: #b8d9c3; font-size: .5625rem; letter-spacing: .1em; margin: 0 0 7px; }
.acteur--pro { top: 28px; left: 0; width: 218px; max-width: 44%; }
.acteur--mdph { bottom: 18px; right: 0; width: 205px; max-width: 43%; }
.acteur--personne { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 185px; min-height: 185px; max-width: 44%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 50%; background: #ecf3e7; color: #183c37; border: 1px solid #dcf0d8; box-shadow: 0 0 0 12px #b5d4be0c,0 0 0 24px #b5d4be07; padding: 23px 14px; }
.acteur--personne:hover,.acteur--personne[aria-pressed=true] { background: #fff; color: #183c37; border-color: #d4ebbc; box-shadow: 0 0 0 12px #b5d4be15; }
.acteur--personne svg { width: 42px; height: 42px; fill: none; stroke: #397b61; stroke-width: 2; margin-bottom: 6px; }
.acteur--personne strong { font-size: 1.0625rem; }
.acteur--personne > span { color: #496f5d; font-size: .625rem; }
.acteur--personne .acteur__fleche { font-size: 1rem; margin-top: 2px; }
.constellation__mot { position: absolute; font-size: .625rem; color: #b7cdd4; letter-spacing: .035em; pointer-events: none; }
.constellation__mot--un { top: 85px; right: 16px; }
.constellation__mot--deux { bottom: 63px; left: 18px; }
.constellation__note { font-size: .6875rem; line-height: 1.8; color: #b7cdd4; text-align: center; }
.motion-active .lien-vivant { animation: circulation 16s linear infinite; }
.motion-active .orbite--une { animation: orbite-vivante 36s linear infinite; }
.motion-active .orbite--deux { animation: orbite-vivante 54s linear infinite reverse; }
.motion-active .acteur--pro { animation: respiration 8s ease-in-out infinite; }
.motion-active .acteur--mdph { animation: respiration 8s ease-in-out -4s infinite; }
.motion-paused .lien-vivant,.motion-paused .orbite,.motion-paused .acteur { animation-play-state: paused; }
.perspectives { background: #f5f7f2; }
.perspectives__tete { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
.perspectives__tete > * { min-width: 0; }
.perspectives__tete .section__intro { margin-top: 0; }
.perspectives__choix { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 6px; background: #e4ebe4; border-radius: 12px; margin: 34px 0; }
.perspectives__choix button { min-width: 0; min-height: 60px; border: 1px solid transparent; border-radius: 8px; padding: 12px 15px; background: transparent; color: #365346; font-size: .875rem; text-align: left; transition: color .2s,background .2s,box-shadow .2s; overflow-wrap: anywhere; }
.perspectives__choix button > span { font-size: .625rem; margin-right: 14px; opacity: .8; }
.perspectives__choix button[aria-selected=true] { background: #142e40; color: #f3f8f4; box-shadow: 0 4px 12px #18382a19; }
.perspectives__choix button:hover { border-color: #739680; }
.perspective { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; }
.perspective > * { min-width: 0; }
.perspective__texte h3 { font-size: 2.5rem; font-weight: 550; line-height: 1.18; letter-spacing: -.04em; margin-bottom: 23px; }
.perspective__texte h3 em { color: #3d7257; }
.perspective__texte > p:not(.surtitre) { font-size: .9375rem; color: #536374; line-height: 1.85; }
.perspective__texte ul { padding: 0; margin: 24px 0 0; list-style: none; }
.perspective__texte li { padding: 11px 0 11px 23px; border-bottom: 1px solid #d2ded5; position: relative; font-size: .8125rem; }
.perspective__texte li::before { content: '↗'; position: absolute; left: 0; color: #477d61; }
.perspective__texte .perspective__publics { font-size: .6875rem!important; margin-top: 23px; }
.perspective .produit { transform: none; border: 1px solid #d4dfd6; box-shadow: 0 18px 35px #142e4010; }
.parole-visuel { padding: 38px; background: #dce9d7; border-radius: 6px 70px 6px 6px; }
.parole-visuel__signe { display: block; font: 7rem/.7 Georgia,serif; color: #5b8268; height: 65px; }
.parole-visuel > p { font-size: 2.125rem; line-height: 1.45; letter-spacing: -.035em; }
.parole-visuel em { color: #3d7257; }
.parole-visuel__modes { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 18px; }
.parole-visuel__modes span { border: 1px solid #89ab92; border-radius: 30px; padding: 6px 13px; font-size: .75rem; }
.parole-visuel small,.lecture-visuel small { font-size: .6875rem; line-height: 1.7; display: block; color: #486954; }
.lecture-visuel { padding: 34px; background: #fff; border: 1px solid #d7e1d9; border-radius: 8px; }
.lecture-visuel h4 { font-size: 1.9375rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 550; margin: 0 0 25px; }
.lecture-visuel ol { list-style: none; padding: 0; margin: 0 0 20px; }
.lecture-visuel li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid #dde5df; }
.lecture-visuel li > span { font-size: .6875rem; color: #477d61; }
.lecture-visuel li div { min-width: 0; }
.lecture-visuel strong { font-size: .875rem; font-weight: 600; }
.lecture-visuel li p { font-size: .75rem; color: #536374; margin-top: 5px; line-height: 1.8; }
.motion-active .perspective.is-selected { animation: entree-douce .4s ease-out both; }
.motion-active .is-revealed { animation: levee .65s ease-out both; }
@keyframes circulation { to { stroke-dashoffset: -260; } }
@keyframes orbite-vivante { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes respiration { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes entree-douce { from { opacity: .55; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes levee { from { transform: translateY(14px); } to { transform: translateY(0); } }
@media(max-width:1050px) {
  .hero { gap: 32px; }
  .constellation__scene { height: 405px; }
  .orbite--deux { width: 310px; height: 310px; }
  .acteur--personne { width: 155px; min-height: 155px; padding: 18px 8px; }
  .acteur--pro,.acteur--mdph { padding: 13px; max-width: 47%; }
  .perspective { gap: 35px; }
  .perspective__texte h3 { font-size: 2rem; }
}
@media(max-width:900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__texte { max-width: 640px; }
  .hero h1 { font-size: 3.5rem; }
  .constellation { width: 100%; max-width: 580px; justify-self: center; }
  .constellation__scene { height: 400px; }
  .orbite--deux { width: 340px; height: 340px; }
  .acteur--personne { width: 175px; min-height: 175px; }
  .perspectives__tete { gap: 30px; }
  .parole-visuel,.lecture-visuel { padding: 25px; }
  .parole-visuel > p { font-size: 1.75rem; }
}
@media(max-width:620px) {
  .hero h1 { font-size: 2.875rem; }
  .hero h1 em { font-size: .85em; line-height: 1.1; }
  .hero__chapo { font-size: .9375rem; }
  .constellation__tete { gap: 8px; font-size: .5625rem; }
  #motion-toggle { font-size: .625rem; padding: 6px 9px; }
  .constellation__scene { height: auto; min-height: 365px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 10px; padding: 34px 0 5px; }
  .acteur { position: relative; inset: auto; max-width: none; width: auto; }
  .acteur--personne { transform: none; grid-column: 1/-1; justify-self: center; width: 168px; min-height: 168px; max-width: 90%; padding: 18px 10px; }
  .acteur--personne strong { font-size: 1rem; }
  .acteur--pro,.acteur--mdph { align-self: start; padding: 12px; border-radius: 9px; }
  .acteur strong { font-size: .8125rem; }
  .acteur > span { font-size: .625rem; }
  .acteur .acteur__index { font-size: .5rem; }
  .orbite { top: 135px; width: 225px; height: 225px; }
  .orbite--deux { width: 295px; height: 295px; }
  .constellation__mot { display: none; }
  .constellation__liens { opacity: .6; }
  .constellation__note { text-align: left; font-size: .625rem; margin-top: 8px; }
  .perspectives__tete { grid-template-columns: 1fr; gap: 20px; }
  .perspectives__choix { gap: 4px; padding: 4px; margin: 26px 0; }
  .perspectives__choix button { font-size: .75rem; padding: 10px 7px; text-align: center; }
  .perspectives__choix button > span { display: block; margin: 0 0 5px; font-size: .625rem; }
  .perspective { grid-template-columns: 1fr; gap: 28px; }
  .perspective__texte h3 { font-size: 2rem; margin-bottom: 18px; }
  .perspective__texte > p:not(.surtitre) { font-size: .875rem; }
  .perspective__texte li { font-size: .8125rem; }
  .parole-visuel { padding: 28px; }
  .parole-visuel > p { font-size: 1.875rem; }
}
@media(max-width:359px) {
  .hero h1 { font-size: 2.5rem; }
  .orbite--deux { width: 265px; height: 265px; }
  .acteur--pro,.acteur--mdph { padding: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Exemples métier et parcours de suivi : lisibles aussi sans JavaScript. */
.hero__reperes { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:22px 0 0; list-style:none; }
.hero__reperes li { border:1px solid #637c80; border-radius:30px; padding:7px 12px; color:#e0eee4; font-size:.75rem; }
.hero > .produit { align-self:center; transform:none; }
.hero > .produit .produit__titre { padding:24px; }
.hero > .produit .produit__titre h2 { font-size:1.875rem; }
.hero > .produit .produit__capture img { aspect-ratio:auto; object-fit:contain; }
.perspective .constellation { background:#1e3040; border-radius:18px; padding:24px; width:100%; }
.suivi-exemple { grid-column:1/-1; padding:32px; border:1px solid #cddbd1; border-radius:18px; background:#eef4ed; }
.suivi-exemple__tete { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.suivi-exemple h3 { font-size:1.75rem; line-height:1.25; margin:12px 0 24px; }
.exemple-etiquette { font-size:.75rem; padding:7px 12px; background:#fff; border:1px solid #cddbd1; border-radius:30px; }
.suivi-frise { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:0; }
.suivi-frise li { border-top:2px solid #a3baa8; padding-top:16px; }
.suivi-frise__numero { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; background:#234638; color:white; border-radius:50%; font-size:.75rem; }
.suivi-frise h4 { font-size:1.125rem; margin:14px 0 10px; }
.suivi-frise p { font-size:.875rem; line-height:1.7; margin:0 0 12px; }
.suivi-frise li > span:last-child { display:block; color:#496151; font-size:.75rem; line-height:1.6; }
.exemple-note { font-size:.8125rem; line-height:1.7; color:#4c6156; margin:24px 0 0; }
.exemples-metier { margin:34px 0 42px; scroll-margin-top:28px; }
.exemples-metier__tete h3 { font-size:1.5rem; margin:0 0 8px; }
.exemples-metier__tete > p { font-size:.8125rem; color:#53645b; line-height:1.6; margin:0 0 22px; }
.exemple-metier { border:1px solid #cbd7ce; background:#fff; border-radius:12px; margin:12px 0; overflow:hidden; }
.exemple-metier summary { padding:20px 24px; cursor:pointer; font-size:1.0625rem; line-height:1.6; font-weight:600; }
.exemple-metier summary span { display:block; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:#496151; margin-bottom:4px; }
.exemple-metier summary:hover { background:#edf3ed; }
.exemple-metier summary:focus-visible,.formulaire__facultatif summary:focus-visible { outline:3px solid #176b52; outline-offset:-4px; }
.exemple-metier__grille { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #dce4dc; }
.exemple-metier__grille > div { padding:24px; min-width:0; }
.exemple-metier__grille > div:first-child { background:#eef4ed; }
.exemple-metier__grille > div + div { border-left:1px solid #dce4dc; }
.exemple-etape { display:block; color:#496151; font-size:.6875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:20px; }
.exemple-metier blockquote { margin:0; font:1.1875rem/1.75 Georgia,serif; color:#253e31; }
.exemple-metier dl { margin:0; font-size:.875rem; line-height:1.6; }
.exemple-metier dt { font-weight:600; }
.exemple-metier dd { margin:3px 0 14px; color:#53645b; }
.exemple-metier h4 { font-size:1rem; margin:0 0 14px; }
.exemple-metier ul { padding-left:18px; font-size:.875rem; line-height:1.7; }
.exemple-metier li + li { margin-top:8px; }
.exemple-metier__grille p { font-size:.8125rem; line-height:1.7; color:#53645b; margin-top:20px; }
.demo-programme { list-style:none; padding:0; margin:24px 0; }
.demo-programme li { border-top:1px solid #d3ddd5; padding:14px 0; }
.demo-programme strong { display:block; font-size:.9375rem; margin-bottom:6px; }
.demo-programme span { display:block; font-size:.8125rem; line-height:1.6; color:#53645b; }
.formulaire__facultatif { grid-column:1/-1; border-top:1px solid #cdd8d0; border-bottom:1px solid #cdd8d0; }
.formulaire__facultatif summary { cursor:pointer; padding:18px 4px; font-size:.875rem; font-weight:600; }
.formulaire__facultatif summary span { font-weight:400; color:#53645b; }
.formulaire__options { display:grid; gap:20px; padding:6px 0 22px; }
@media(max-width:1100px) { .suivi-frise { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .hero > .produit { max-width:640px; width:100%; justify-self:center; } .exemple-metier__grille { grid-template-columns:1fr; } .exemple-metier__grille > div + div { border-left:0; border-top:1px solid #dce4dc; } }
@media(max-width:620px) { .suivi-exemple { padding:22px; } .suivi-frise { grid-template-columns:1fr; gap:20px; } .hero__reperes li { font-size:.6875rem; padding:6px 9px; } .perspective .constellation { padding:14px; } .exemple-metier summary,.exemple-metier__grille > div { padding:20px; } .hero > .produit .produit__titre { display:block; padding:20px; } .hero > .produit .produit__titre h2 { font-size:1.5rem; margin:12px 0; } }