/* Accueil : une carte navigable, avec une composition dédiée à chaque écran. */
body[data-page="home"] {
  --home-line:color-mix(in srgb,var(--diagram-line) 32%,transparent);
  background:var(--sombre); color:var(--sur-sombre);
  min-height:100svh; min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
}
body[data-page="home"] :focus-visible { outline-color:var(--citron) }
body[data-page="home"] #contenu { display:flex; min-height:0 }
.home-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 clamp(20px,4vw,72px); min-height:88px; border-bottom:1px solid var(--home-line) }
.home-logo { color:var(--sur-sombre); text-decoration:none; font:600 32px/1 var(--font-head); letter-spacing:-.06em }
.home-logo span { display:block; margin-top:6px; font:400 10px/1.3 var(--font-body); letter-spacing:.08em }
.home-header__note { font-size:13px; color:var(--sur-sombre-mute); margin-right:auto; margin-left:40px }
.home-header .btn { border-radius:30px; background:var(--citron); color:var(--sombre); padding:12px 22px; font-size:13px; min-height:44px }
.home-header .btn:hover { background:var(--sur-sombre); transform:translateY(-2px) }
.home-universe { position:relative; isolation:isolate; width:100%; display:grid; grid-template-rows:auto minmax(360px,1fr) auto; padding:24px clamp(20px,4vw,72px) 0 }
.home-universe::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 52%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 65%) }
.home-intro { text-align:center; position:relative; z-index:1 }
.home-eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--sur-sombre-mute); font-size:11px; letter-spacing:.08em; margin:0 0 12px }
.home-eyebrow>span { width:5px; height:5px; border-radius:50%; background:var(--citron) }
.home-intro h1 { font-size:clamp(28px,3.2vw,52px); line-height:1.1; letter-spacing:-.045em; margin:0 0 10px }
.home-intro h1 em { color:var(--citron); font-weight:400 }
.home-intro__description { font-size:13px; color:var(--sur-sombre-mute); margin:0 }
.neural-tree { position:relative; width:min(100%,1200px); margin:auto; height:100%; min-height:360px; max-height:720px }
.neural-map { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.neural-map path { fill:none; vector-effect:non-scaling-stroke }
.neural-thread { stroke:var(--diagram-line); stroke-width:.65; opacity:.26 }
.neural-point { fill:var(--sur-sombre-mute); opacity:.45; animation:neural-breathe 5s ease-in-out var(--delay,0s) infinite }
.neural-cluster circle:nth-of-type(6n) { fill:var(--citron); opacity:.8 }
.neural-orbit { fill:none; stroke:var(--diagram-line); stroke-width:.5; opacity:.15; stroke-dasharray:2 7; vector-effect:non-scaling-stroke }
.neural-orbit--outer { opacity:.1; stroke-dasharray:none }
.neural-branch,.neural-trunk { stroke:var(--diagram-line); stroke-width:1; opacity:.6; transition:stroke .25s,opacity .25s }
.neural-signal { stroke:var(--citron); stroke-width:1.7; stroke-dasharray:3 97; stroke-linecap:round; opacity:.85; animation:neural-flow 7s linear var(--delay,0s) infinite }
.neural-signal--root { animation-duration:9s; opacity:.5 }
.neural-root-dot { fill:var(--citron) }
.neural-core { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:166px; height:166px; border:1px solid var(--diagram-line); border-radius:50%; background:var(--sombre); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; text-decoration:none; color:var(--sur-sombre); transition:background .25s,border-color .25s; z-index:2 }
.neural-core::before,.neural-core::after { content:""; position:absolute; inset:-10px; border:1px solid var(--home-line); border-radius:50%; pointer-events:none }
.neural-core::after { inset:-24px; border-style:dashed; opacity:.5 }
.neural-core__eyebrow { color:var(--sur-sombre-mute); text-transform:uppercase; letter-spacing:.13em; font-size:8px }
.neural-core strong { font:600 47px/1.2 var(--font-head); letter-spacing:-.07em; margin:5px 0 }
.neural-core__role { color:var(--citron); font-size:12px; line-height:1.35 }
.neural-core:hover,.neural-core:focus-visible { background:var(--forest-mid); border-color:var(--citron) }
.neural-leaf { position:absolute; width:25%; padding:15px 18px 15px 0; border-top:1px solid var(--diagram-line); text-decoration:none; color:var(--sur-sombre); z-index:3; background:var(--sombre); transition:transform .25s,border-color .25s,background .25s }
.neural-leaf--learn { left:4%; top:14% }
.neural-leaf--memory { right:4%; top:14% }
.neural-leaf--visibility { left:1%; top:53% }
.neural-leaf--build { right:1%; top:53% }
.neural-leaf__meta { display:flex; align-items:center; justify-content:space-between; gap:4px; color:var(--sur-sombre-mute); font-size:11px; margin-bottom:12px }
.neural-leaf__meta>span { font-size:20px; line-height:1; color:var(--citron); transition:transform .25s }
.neural-leaf strong { display:block; font:500 clamp(22px,2.5vw,35px)/1.1 var(--font-head); letter-spacing:-.04em }
.neural-leaf strong em { color:var(--citron); font:italic 400 1.12em/1.1 var(--font-expression) }
.neural-leaf__detail { display:block; font-size:11px; color:var(--sur-sombre-mute); margin-top:13px }
.neural-leaf:hover,.neural-leaf:focus-visible { border-color:var(--citron); transform:translateY(-3px) }
.neural-leaf:hover .neural-leaf__meta>span,.neural-leaf:focus-visible .neural-leaf__meta>span { transform:translate(3px,-3px) }
.neural-tree:has(.neural-leaf--learn:is(:hover,:focus-visible)) .neural-connection--learn .neural-branch,
.neural-tree:has(.neural-leaf--memory:is(:hover,:focus-visible)) .neural-connection--memory .neural-branch,
.neural-tree:has(.neural-leaf--visibility:is(:hover,:focus-visible)) .neural-connection--visibility .neural-branch,
.neural-tree:has(.neural-leaf--build:is(:hover,:focus-visible)) .neural-connection--build .neural-branch { stroke:var(--citron); stroke-width:2; opacity:1 }
.neural-roots { position:absolute; top:90%; left:25.25%; width:49.5%; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; color:var(--sur-sombre); font-size:12px }
.neural-ground { position:absolute; top:97%; width:100%; text-align:center; color:var(--sur-sombre-mute); font-size:11px; margin:0 }
.home-bottom { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px 0 14px; font-size:11px; color:var(--sur-sombre-mute) }
.home-bottom p { margin:0 }
.home-bottom p>span { color:var(--citron); margin-right:6px }
.home-bottom em { color:var(--citron); font:italic 15px var(--font-expression) }
.home-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 clamp(20px,4vw,72px); min-height:49px; border-top:1px solid var(--home-line); color:var(--sur-sombre-mute); font-size:10px }
.home-footer nav { display:flex; gap:20px }
.home-footer a { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none }
.home-footer a:hover { text-decoration:underline }
.home-motion { border:0; background:none; color:inherit; cursor:pointer; display:flex; align-items:center; gap:7px; min-height:44px; padding:0 8px; font-size:10px }
.home-motion>span:first-child { color:var(--citron) }
[data-motion="paused"] .neural-tree * { animation-play-state:paused!important }
@keyframes neural-flow { from { stroke-dashoffset:100 } to { stroke-dashoffset:0 } }
@keyframes neural-breathe { 0%,100% { opacity:.3 } 50% { opacity:.85 } }
@media (min-width:761px) and (min-height:700px) {
  body[data-page="home"] { height:100svh; height:100dvh }
}
@media (min-width:761px) and (max-height:800px) {
  .home-header { min-height:70px }
  .home-universe { padding-top:18px }
  .home-intro h1 { font-size:clamp(28px,3vw,42px) }
  .neural-leaf { padding-top:10px; padding-bottom:10px }
  .neural-leaf__meta { margin-bottom:8px }
  .neural-leaf__detail { margin-top:8px }
  .neural-core { width:138px; height:138px }
  .neural-core strong { font-size:40px }
}
@media (max-width:760px) {
  body[data-page="home"] { height:100svh; height:100dvh; min-height:660px }
  .home-header { min-height:68px; margin-inline:20px }
  .home-logo { font-size:26px }
  .home-logo span { font-size:8px; margin-top:4px }
  .home-header__note { display:none }
  .home-header .btn { font-size:11px; padding:10px 15px; gap:12px }
  .home-universe { padding:20px 18px 0; grid-template-rows:auto minmax(350px,1fr) auto }
  .home-eyebrow { font-size:9px; letter-spacing:.02em; margin-bottom:12px }
  .home-intro h1 { font-size:clamp(28px,6.5vw,40px); line-height:1.04; margin-bottom:10px }
  .home-intro h1 em { display:block; margin-top:3px }
  .home-intro__description { max-width:34ch; margin:auto; font-size:11px; line-height:1.45 }
  .neural-tree { min-height:350px; max-height:640px }
  .neural-leaf { width:43%; padding:11px 4px 10px 0; background:color-mix(in srgb,var(--sombre) 94%,transparent) }
  .neural-leaf--learn { left:0; top:9% }
  .neural-leaf--memory { right:0; top:9% }
  .neural-leaf--visibility { left:0; top:59% }
  .neural-leaf--build { right:0; top:59% }
  .neural-leaf__meta { font-size:9px; margin-bottom:8px; white-space:nowrap }
  .neural-leaf__meta>span { font-size:16px }
  .neural-leaf strong { font-size:clamp(20px,4.8vw,28px) }
  .neural-leaf__detail { display:none }
  .neural-core { top:44%; width:116px; height:116px }
  .neural-core::before { inset:-7px }
  .neural-core::after { inset:-16px }
  .neural-core__eyebrow { font-size:6px }
  .neural-core strong { font-size:35px; margin:3px 0 }
  .neural-core__role { font-size:10px }
  .neural-roots { left:8%; width:84%; font-size:10px }
  .neural-ground { font-size:9px; top:97% }
  .home-bottom { justify-content:center; text-align:center; padding:22px 0 13px; font-size:10px }
  .home-bottom p:first-child { display:none }
  .home-bottom em { font-size:13px }
  .home-footer { font-size:9px; margin-inline:18px; gap:5px; flex-wrap:wrap }
  .home-footer nav { gap:12px }
  .home-motion { font-size:9px; padding:0 3px }
}
@media (max-width:380px) {
  .home-universe { padding-top:14px }
  .home-footer { column-gap:3px }
  .home-footer nav { gap:8px }
  .home-footer>span { font-size:8px }
  .home-motion { font-size:8px }
  .neural-leaf__meta { font-size:8px }
}
@media (prefers-reduced-motion:reduce) {
  .neural-tree * { animation:none!important; transition:none!important }
  .home-header .btn { transition:none }
}
.neural-root-lines--narrow { display:none }
body:not([data-motion]) .neural-tree * { animation:none }
@media (max-width:760px) {
  .neural-root-lines--wide { display:none }
  .neural-root-lines--narrow { display:block }
}
/* Les petits téléphones gardent les cinq destinations dans la fenêtre. */
@media (max-width:760px) and (max-height:730px) {
  body[data-page="home"] { min-height:568px }
  .home-header { min-height:60px }
  .home-universe { padding-top:12px; grid-template-rows:auto minmax(290px,1fr) auto }
  .home-eyebrow { margin-bottom:8px }
  .home-intro h1 { font-size:27px; margin-bottom:7px }
  .home-intro__description { font-size:10px }
  .neural-tree { min-height:290px }
  .neural-leaf--learn,.neural-leaf--memory { top:6% }
  .neural-leaf--visibility,.neural-leaf--build { top:59% }
  .neural-leaf { padding-top:7px; padding-bottom:7px }
  .neural-leaf strong { font-size:19px }
  .neural-leaf__meta { margin-bottom:5px }
  .neural-core { width:90px; height:90px; top:46% }
  .neural-core strong { font-size:29px }
  .neural-core__eyebrow { font-size:5px }
  .neural-core__role { font-size:9px }
  .neural-core::after { inset:-12px }
  .home-bottom { padding:18px 0 7px }
}
/* En paysage, la carte s’étale et les légendes secondaires se font discrètes. */
@media (min-width:600px) and (max-height:500px) {
  body[data-page="home"] { height:100dvh; min-height:360px }
  .home-header { min-height:54px }
  .home-logo { font-size:24px }
  .home-logo span { font-size:8px; margin-top:3px }
  .home-header__note { display:none }
  .home-header .btn { padding:8px 16px; font-size:11px }
  .home-universe { padding-top:8px; grid-template-rows:auto minmax(190px,1fr) }
  .home-eyebrow { font-size:8px; margin-bottom:4px }
  .home-intro h1 { font-size:26px; margin-bottom:0 }
  .home-intro h1 em { display:inline }
  .home-intro__description,.home-bottom { display:none }
  .neural-tree { min-height:190px }
  .neural-leaf { width:26%; padding:6px 8px 6px 0 }
  .neural-leaf--learn { left:1%; top:4% }
  .neural-leaf--memory { right:1%; top:4% }
  .neural-leaf--visibility { left:1%; top:55% }
  .neural-leaf--build { right:1%; top:55% }
  .neural-leaf__meta { font-size:9px; margin-bottom:4px }
  .neural-leaf strong { font-size:20px }
  .neural-leaf__detail { display:none }
  .neural-core { width:94px; height:94px; top:43% }
  .neural-core strong { font-size:28px; margin:2px 0 }
  .neural-core__role { font-size:9px }
  .neural-core__eyebrow { font-size:5px }
  .neural-core::after { inset:-16px }
  .neural-roots { left:25.25%; width:49.5%; font-size:9px; top:89% }
  .neural-ground { display:none }
  .neural-root-lines--wide { display:block }
  .neural-root-lines--narrow { display:none }
  .home-footer { min-height:44px; font-size:9px }
}
@media (max-width:599px) and (max-height:620px) {
  .neural-leaf--learn,.neural-leaf--memory { top:2% }
  .neural-leaf--visibility,.neural-leaf--build { top:63% }
  .neural-core { width:84px; height:84px; top:45% }
  .neural-core strong { font-size:27px }
  .neural-core__role { font-size:8px }
  .neural-roots { top:93% }
  .neural-ground { top:100%; font-size:8px }
}

@media (min-width:500px) and (max-width:760px) and (min-height:501px) {
  .neural-leaf { width:36% }
}