/* Page d'accueil du guide TDAH : scène interactive « l'attention de l'intérieur ».
   Tout est dessiné ici (SVG + CSS) : aucune image, police ou bibliothèque extérieure. */
.tdh-stage{position:relative;margin:8px 0 34px;border-radius:26px;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#22406A 0%,#14243F 55%,#0E1A2F 100%);color:#F4F1EA;box-shadow:0 24px 60px -30px rgba(14,26,47,.75);isolation:isolate}
.tdh-stage svg.tdh-svg{display:block;width:100%;height:auto;touch-action:manipulation}
.tdh-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(10,18,33,.55);border-top:1px solid rgba(255,255,255,.08)}
.tdh-scenes{display:flex;flex-wrap:wrap;gap:6px}
.tdh-b{font:inherit;font-size:.92rem;font-weight:600;line-height:1.2;border-radius:999px;padding:9px 15px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#F4F1EA;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.tdh-b:hover{background:rgba(255,255,255,.14)}
.tdh-b:focus-visible{outline:3px solid #F2B45A;outline-offset:2px}
.tdh-b[aria-pressed="true"]{background:#E07A2F;border-color:#E07A2F;color:#fff}
.tdh-b.tdh-son{background:#F2B45A;border-color:#F2B45A;color:#14243F}
.tdh-b.tdh-son[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#F4F1EA}
.tdh-tools{display:flex;gap:6px;flex-wrap:wrap}
.tdh-cap{margin:0;padding:12px 18px 14px;font-size:1rem;line-height:1.5;background:rgba(10,18,33,.55);min-height:3.2em}
.tdh-cap b{color:#F2B45A}
.tdh-count{font-variant-numeric:tabular-nums}
.tdh-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(10,18,33,.7);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 14px;font-size:.85rem;white-space:nowrap;pointer-events:none;transition:opacity .6s}
.tdh-stage.tdh-touched .tdh-hint{opacity:0}

/* éléments de la scène */
.tdh-it{outline:none;cursor:pointer;transition:transform .9s cubic-bezier(.45,.05,.2,1),opacity .6s}
.tdh-it .tdh-float{animation:tdh-float 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tdh-it:nth-child(2n) .tdh-float{animation-duration:6.6s;animation-delay:-2s}
.tdh-it:nth-child(3n) .tdh-float{animation-duration:7.4s;animation-delay:-4s}
.tdh-it .tdh-halo{opacity:0;transition:opacity .45s}
.tdh-it.is-on .tdh-halo{opacity:1}
.tdh-it .tdh-ico{transition:transform .45s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.tdh-it.is-on .tdh-ico{transform:scale(1.22)}
.tdh-it:focus-visible{outline:none}
.tdh-it:focus-visible .tdh-halo{opacity:1}
.tdh-spot{transition:transform .55s cubic-bezier(.45,.05,.2,1),opacity .5s}
.tdh-gaze{transition:opacity .4s}
.tdh-pupil{transition:transform .35s ease-out}
.tdh-brain{transform-box:fill-box;transform-origin:center;transition:transform .8s}
.tdh-breath{opacity:0;transform-box:fill-box;transform-origin:center}
.tdh-thought{opacity:0;transition:opacity .7s ease;pointer-events:none}
.tdh-thought.is-in{opacity:1}
.tdh-dim{opacity:0;transition:opacity 1s;pointer-events:none}
.tdh-clock{opacity:0;transition:opacity .8s}
.tdh-hand{transform-box:view-box}
.tdh-cols{opacity:0;transition:opacity 1s}
.tdh-mouth{transition:d .6s}

/* scène 2 : hyperfocus */
.tdh-stage[data-scene="focus"] .tdh-dim{opacity:.72}
.tdh-stage[data-scene="focus"] .tdh-clock{opacity:1}
.tdh-stage[data-scene="focus"] .tdh-thought{opacity:0}
.tdh-stage[data-scene="focus"] .tdh-it:not(.is-focus){opacity:.18}
.tdh-stage[data-scene="focus"] .tdh-it.is-focus .tdh-float{animation:none}
.tdh-stage[data-scene="focus"] .tdh-spot{opacity:.95}
.tdh-stage[data-scene="focus"] .tdh-hand-m{animation:tdh-spin 1.6s linear infinite}
.tdh-stage[data-scene="focus"] .tdh-hand-h{animation:tdh-spin 19s linear infinite}

/* scène 3 : tout est rangé */
.tdh-stage[data-scene="calm"] .tdh-cols{opacity:1}
.tdh-stage[data-scene="calm"] .tdh-spot,.tdh-stage[data-scene="calm"] .tdh-gaze{opacity:0}
.tdh-stage[data-scene="calm"] .tdh-it .tdh-float{animation:none}
.tdh-stage[data-scene="calm"] .tdh-breath{opacity:1;animation:tdh-breath 8s ease-in-out infinite}
.tdh-stage[data-scene="calm"]{background:radial-gradient(120% 90% at 50% 40%,#21506A 0%,#163449 55%,#0F2233 100%)}

@keyframes tdh-float{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-9px)}}
@keyframes tdh-spin{to{transform:rotate(360deg)}}
@keyframes tdh-breath{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.12);opacity:.85}}

/* appareils lents ou animations réduites */
.tdh-lite .tdh-it .tdh-float{animation:none}
@media (prefers-reduced-motion:reduce){
  .tdh-it,.tdh-spot,.tdh-pupil,.tdh-brain,.tdh-thought,.tdh-dim,.tdh-cols,.tdh-clock{transition:opacity .3s!important}
  .tdh-it .tdh-float,.tdh-stage[data-scene="focus"] .tdh-hand-m,.tdh-stage[data-scene="focus"] .tdh-hand-h,.tdh-stage[data-scene="calm"] .tdh-breath{animation:none!important}
  .tdh-stage[data-scene="calm"] .tdh-breath{opacity:.6}
}
@media (max-width:640px){
  .tdh-stage{border-radius:18px;margin-left:-6px;margin-right:-6px}
  .tdh-b{font-size:.86rem;padding:8px 12px}
  .tdh-cap{font-size:.95rem;padding:10px 14px 12px}
  .tdh-hint{font-size:.78rem;top:8px}
}

/* plan du guide */
.tdh-plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:18px 0 8px}
.tdh-fam{border:1px solid var(--td-line);border-radius:18px;padding:18px 18px 14px;background:var(--td-soft);position:relative;overflow:hidden}
.tdh-fam::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--tdh-c,#E07A2F)}
.tdh-fam h3{font-size:1.35rem;margin:.1em 0 .45em}
.tdh-fam ul{list-style:none;margin:0;padding:0}
.tdh-fam li{margin:0 0 6px;line-height:1.35}
.tdh-fam a{color:inherit;text-decoration:none;border-bottom:1px solid var(--td-goldline)}
.tdh-fam a:hover,.tdh-fam a:focus-visible{border-bottom-color:currentColor}
.tdh-portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.tdh-porte{display:block;text-decoration:none;color:inherit;border-radius:18px;padding:16px 16px 14px;border:1px solid var(--td-line);background:var(--td-soft);transition:transform .2s,border-color .2s}
.tdh-porte:hover,.tdh-porte:focus-visible{transform:translateY(-3px);border-color:var(--td-goldline)}
.tdh-porte b{display:block;font-size:1.08rem;margin-bottom:4px}
.tdh-porte span{font-size:.92rem;opacity:.85}
.tdh-porte i{display:block;font-style:normal;font-size:1.6rem;line-height:1;margin-bottom:8px;color:var(--td-gold)}
@media (prefers-reduced-motion:reduce){.tdh-porte{transition:none}.tdh-porte:hover{transform:none}}
.tdh-paused .tdh-it .tdh-float,.tdh-paused .tdh-hand,.tdh-paused .tdh-breath{animation-play-state:paused!important}
.tdh-fallback{padding:28px 22px;margin:0}
.tdh-bw{transition:transform .9s cubic-bezier(.45,.05,.2,1)}
@media (max-width:640px){.tdh-hint{display:none}}
@media (prefers-reduced-motion:reduce){.tdh-bw{transition:none}}