/* ==========================================================================
   Neurodesign · Home
   Le contenu de la page ne porte que du markup et des classes : ni style,
   ni script, ni SVG. C'est une contrainte du filtrage WordPress, et elle
   sert l'architecture voulue. Tout ce qui suit vit dans le thème enfant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le film. La vidéo est le hero : elle occupe le cadre, et le scroll est
   sa caméra. Tout le reste doit lui laisser la place.
   -------------------------------------------------------------------------- */
.nd-film{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#F4F5FA}
/* La première image est posée par la feuille de style : elle est là avant
   que le moteur ne démarre, et la vidéo se substitue à elle sans transition
   visible puisqu'elle en est la copie exacte. */
.nd-film__frame{
  position:absolute;inset:0;
  background:#F4F5FA url("../video/poster.webp") center center / cover no-repeat;
}
.nd-film__video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* le cadrage s'ouvre à peine, et vers le bureau : il accompagne la
     caméra de la vidéo au lieu d'en ajouter une seconde */
  transform:scale(calc(1 + var(--nd-p,0) * 0.05));
  transform-origin:56% 54%;
}
/* Deux voiles clairs, posés exactement là où le texte vit : à gauche pour
   les messages, en bas à droite pour le rail des territoires. Ailleurs la
   scène reste intacte, c'est elle qu'on regarde. */
.nd-film__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 84% 88%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 46%,rgba(255,255,255,0) 78%),
    linear-gradient(98deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.52) 22%,rgba(255,255,255,0) 46%);
}

/* La sortie du film. Sur les douze derniers pour cent de la traversée, la
   caméra s'ouvre une dernière fois et la scène se lave en blanc. On ne
   sort pas du hero parce que l'épingle s'arrête : on en sort parce que la
   lumière a tout pris, et le manifeste se lève dans ce blanc.

   Tout est calculé à partir de --nd-p, la même progression que la vidéo :
   aucune seconde mécanique, aucun second déclencheur. */
.nd-film{--nd-out:clamp(0, (var(--nd-p, 0) - 0.88) * 8.4, 1)}
.nd-film::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 58%,#FFF 0%,#FFF 55%,var(--nd-lav) 100%);
  opacity:var(--nd-out);
}
/* Le cadrage s'ouvre sur la sortie : c'est la caméra qui s'éloigne, pas un
   fondu posé par-dessus. */
.nd-film__video{
  transform:scale(calc(1 + var(--nd-p,0) * 0.05 + var(--nd-out) * 0.09));
}
/* Tout ce qui appartient à l'interface s'efface avant la scène elle-même :
   le rail, l'indice, les territoires. Il ne reste que la lumière. */
/* Le moteur pose l'opacité sur chaque territoire ; on éteint le rail qui
   les porte, ce qui les éteint tous d'un coup sans lutter avec lui. */
.nd-film__rail,
.nd-topics{opacity:calc(1 - var(--nd-out))}
.nd-topics{pointer-events:none}

/* --- Typographie de la traversée ---------------------------------------- */
.nd-film__type{
  position:absolute;left:var(--nd-gutter);top:46%;transform:translateY(-50%);
  z-index:3;width:min(44ch,43vw);
}
.nd-film__cue{position:absolute;top:0;left:0;right:0;opacity:0;will-change:transform,opacity}
/* Sur la sortie, le dernier message part avec le reste. */
.nd-film__type{opacity:calc(1 - var(--nd-out))}
.nd-film__cue .nd-eyebrow{margin:0 0 18px}
.nd-film__cue .nd-display{margin:0;font-size:clamp(38px,4.6vw,74px)}
.nd-statement-sm{
  font-weight:700;font-size:clamp(22px,2.9vw,42px);line-height:1.18;
  letter-spacing:-.02em;margin:0;color:var(--nd-ink);
}

/* --- Les territoires ------------------------------------------------------
   Un rail éditorial, pas une grille de boutons : le territoire actif se lit,
   celui d'avant s'efface, celui d'après se devine. */
.nd-topics{
  position:absolute;right:var(--nd-gutter);bottom:19vh;z-index:4;
  list-style:none;margin:0;padding:0;width:min(40ch,37vw);
  display:grid;place-items:start;
}
.nd-topic{grid-area:1 / 1;opacity:0;will-change:transform,opacity}
.nd-topic a{
  display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:2px;
  align-items:baseline;text-decoration:none;color:var(--nd-ink);
  padding:10px 0;transition:color .4s var(--nd-ease);
}
.nd-topic__n{
  font:500 12px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--nd-blue);
  transition:transform .5s var(--nd-ease);
}
.nd-topic__t{
  font-weight:800;font-size:clamp(32px,4.1vw,64px);line-height:.98;letter-spacing:-.03em;
  position:relative;
}
/* le soulignement se déploie depuis la gauche, sans jamais clignoter */
.nd-topic__t::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--nd-blue);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--nd-ease);
}
.nd-topic__m{
  grid-column:2;font-size:14px;color:var(--nd-muted);
  transition:color .4s var(--nd-ease);
}
.nd-topic a:hover .nd-topic__t::after,
.nd-topic a:focus-visible .nd-topic__t::after{transform:scaleX(1)}
.nd-topic a:hover .nd-topic__n{transform:translateX(-4px)}
.nd-topic a:focus-visible{outline:2px solid var(--nd-blue);outline-offset:8px;border-radius:4px}
/* seul le territoire lisible est cliquable : les autres ne piègent pas la souris */
.nd-topic{pointer-events:none}
.nd-topic.is-live{pointer-events:auto}

/* La sortie du film : le dernier message tend la main à la bibliothèque. */
.nd-film__out{margin:26px 0 0}

/* --- Indice de défilement, presque une légende ---------------------------- */
.nd-film__hint{
  position:absolute;left:var(--nd-gutter);bottom:6vh;z-index:4;margin:0;
  font:500 11px/1 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nd-muted);opacity:calc(1 - var(--nd-p,0) * 14);
}
.nd-film__hint span{position:relative;padding-left:26px}
.nd-film__hint span::before{
  content:"";position:absolute;left:0;top:50%;width:18px;height:1px;
  background:var(--nd-muted);transform-origin:left;
  animation:nd-hint 2.6s var(--nd-ease) infinite;
}
@keyframes nd-hint{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

.nd-film__rail{
  position:absolute;right:calc(var(--nd-gutter) / 2.4);top:50%;transform:translateY(-50%);
  width:1.5px;height:22vh;background:rgba(11,12,20,.10);border-radius:2px;z-index:4;
}
.nd-film__rail i{
  display:block;width:100%;border-radius:2px;height:calc(var(--nd-p,0) * 100%);
  background:linear-gradient(180deg,var(--nd-blue),var(--nd-lilas));
}

@media (max-width:980px){
  .nd-film__type{width:auto;right:var(--nd-gutter);top:auto;bottom:44vh;transform:none}
  .nd-film__cue .nd-display{font-size:clamp(30px,7vw,44px)}
  .nd-topics{right:var(--nd-gutter);left:var(--nd-gutter);width:auto;bottom:15vh}
  .nd-topic__t{font-size:clamp(26px,7vw,38px)}
  .nd-topic__m{display:none}
  .nd-film__frame::after{
    background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.62) 58%,rgba(255,255,255,.96) 100%);
  }
  .nd-film__rail,.nd-film__hint{display:none}
}

/* Sans mouvement, ou sans JavaScript : la traversée n'a pas lieu, mais rien
   n'est perdu. La première image devient une affiche, les trois messages se
   lisent à la suite, et les six territoires redeviennent une liste. C'est une
   dégradation technique, pas une dégradation de la composition. */
.nd-static .nd-film{height:auto;min-height:0;padding-bottom:clamp(48px,7vh,90px)}
.nd-static .nd-film__frame{position:relative;height:min(62svh,560px)}
.nd-static .nd-film__frame::after{display:none}
.nd-static .nd-film__video{transform:none}

.nd-static .nd-film__type{
  position:relative;left:auto;top:auto;transform:none;
  width:auto;margin:clamp(38px,6vh,64px) var(--nd-gutter) 0;
}
.nd-static .nd-film__cue{
  position:relative;opacity:1;transform:none;margin-bottom:clamp(26px,4vh,44px);
}
.nd-static .nd-topics{
  position:relative;right:auto;bottom:auto;width:auto;
  margin:clamp(30px,5vh,56px) var(--nd-gutter) 0;
  display:block;border-top:1px solid var(--nd-line);
}
.nd-static .nd-topic{
  opacity:1;transform:none;filter:none;pointer-events:auto;
  border-bottom:1px solid var(--nd-line);
}
.nd-static .nd-topic a{padding:20px 0}
.nd-static .nd-film__rail,
.nd-static .nd-film__hint{display:none}

/* --------------------------------------------------------------------------
   Bandes éditoriales. Après le film, la page se lit. Elle ne cesse pas d'être
   visuelle pour autant : chaque section montre quelque chose, et le blanc
   reste une matière, pas un vide par défaut.
   -------------------------------------------------------------------------- */
.nd-band{padding:clamp(90px,12vh,170px) var(--nd-gutter);position:relative}

/* Le manifeste : plein cadre, une seule phrase, rien d'autre à regarder. */
.nd-band--manifest{
  text-align:center;padding-block:clamp(150px,22vh,280px);
  background:radial-gradient(90% 70% at 50% 40%,#FFF 0%,var(--nd-lav) 100%);
}
.nd-statement{
  font-weight:800;font-size:clamp(36px,6.8vw,104px);line-height:1.02;
  letter-spacing:-.035em;margin:0 auto;max-width:15ch;
}
.nd-statement span{display:inline-block}
.nd-statement__sub{margin:34px auto 0;max-width:56ch;color:var(--nd-muted);font-size:clamp(16px,1.5vw,20px);line-height:1.65}

.nd-h2{font-weight:800;font-size:clamp(28px,3.6vw,56px);letter-spacing:-.025em;line-height:1.05;margin:14px 0 26px}
.nd-h2--center{text-align:center;max-width:16ch;margin-inline:auto}
.nd-display--xl{font-size:clamp(56px,11vw,170px);line-height:.9;letter-spacing:-.04em}
.nd-lead--center{margin-inline:auto;text-align:center}
.nd-center{text-align:center}

/* --- La bibliothèque ------------------------------------------------------
   Le sommaire à gauche, un panneau qui suit la lecture à droite. Un seul
   territoire montré à la fois : c'est la même règle que dans le film, et
   c'est ce qui relie le corps de la page à son ouverture. */
.nd-band--library{padding-top:clamp(80px,11vh,150px)}
.nd-library__head{max-width:56ch;margin-bottom:clamp(46px,7vh,86px)}
.nd-library__head .nd-h2{margin-top:12px}
.nd-library__grid{
  display:grid;grid-template-columns:1fr minmax(340px,40%);
  gap:clamp(40px,5vw,100px);align-items:start;
}

.nd-library__stage{
  position:sticky;top:calc(68px + 4vh);
  aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:var(--nd-lav);
  box-shadow:0 50px 100px -60px rgba(11,12,20,.55);
}
.nd-shot{
  position:absolute;inset:0;margin:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s var(--nd-ease), transform 1.1s var(--nd-ease);
  transform:scale(1.04);
}
.nd-shot.is-live{opacity:1;transform:scale(1)}
/* Sans JavaScript, le panneau montre le premier territoire au lieu de rien. */
.nd-library__stage:not(:has(.is-live)) .nd-shot:first-child{opacity:1;transform:none}
.nd-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:56px 26px 22px;
  font-size:14px;line-height:1.5;color:var(--nd-ink);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 62%);
}
.nd-shot[data-nd-for="attention"]  {background-image:url("../img/territoire-attention.webp")}
.nd-shot[data-nd-for="perception"] {background-image:url("../img/territoire-perception.webp")}
.nd-shot[data-nd-for="cognition"]  {background-image:url("../img/territoire-cognition.webp")}
.nd-shot[data-nd-for="emotion"]    {background-image:url("../img/territoire-emotion.webp")}
.nd-shot[data-nd-for="composition"]{background-image:url("../img/territoire-composition.webp")}
.nd-shot[data-nd-for="image"]      {background-image:url("../img/territoire-image.webp")}

/* --- Le topic à la une : pleine largeur, la typo posée sur l'image ------- */
.nd-band--feature{
  position:relative;padding:0;min-height:82svh;
  display:grid;align-items:end;overflow:hidden;background:var(--nd-lav);
}
.nd-feature__art{
  position:absolute;inset:-8% 0;
  background:url("../img/feature-attention.webp") center / cover no-repeat;
  will-change:transform;
}
.nd-feature__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--nd-paper) 0%,rgba(252,252,254,.55) 14%,rgba(255,255,255,0) 38%,rgba(255,255,255,.88) 100%);
}
.nd-feature__body{
  position:relative;z-index:2;
  padding:clamp(50px,8vh,110px) var(--nd-gutter);
}
/* La largeur de lecture est posée sur les enfants, pas sur le bloc. Avec
   box-sizing:border-box, un max-width sur le bloc engloberait ses 244 px de
   retrait : il resterait cent pixels de texte. Un retrait et une largeur de
   lecture ne se déclarent jamais sur le même élément. */
.nd-feature__body > *{max-width:44ch}
.nd-feature__body .nd-display--xl{margin:6px 0 18px}

/* --- La méthode ------------------------------------------------------------
   Trois convictions, montrées une à une. La section s'épingle et devient une
   scène : la sphère traverse le cadre pendant que les énoncés se relaient.
   C'est la règle du film, transposée à un texte : une chose forte à la fois,
   et beaucoup d'air autour.
   -------------------------------------------------------------------------- */
.nd-band--method{
  --nd-m:0;
  padding:0;background:var(--nd-paper);
}
.nd-method__stage{
  position:relative;overflow:hidden;
  height:100svh;min-height:600px;
  display:grid;align-items:center;
  padding:0 var(--nd-gutter);
}

/* La sphère : elle traverse, elle grandit, elle ne fait rien d'autre. */
.nd-method__orb{
  position:absolute;z-index:1;pointer-events:none;
  right:calc(-8vw + var(--nd-m) * 4vw);
  top:50%;width:min(56vw,760px);aspect-ratio:1;
  background:url("../img/methode-orbe.webp") center / contain no-repeat;
  transform:
    translateY(calc(-50% + (0.5 - var(--nd-m)) * 9vh))
    scale(calc(1 + var(--nd-m) * 0.18));
  will-change:transform;
}
/* La sphère est un fond : elle ne doit jamais disputer la ligne de lecture. */
.nd-method__stage::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(96deg,var(--nd-paper) 0%,rgba(252,252,254,.86) 34%,rgba(252,252,254,0) 62%);
}

.nd-method__label{
  position:absolute;z-index:4;top:clamp(30px,7vh,72px);left:var(--nd-gutter);margin:0;
}

.nd-method__steps{
  position:relative;z-index:4;list-style:none;margin:0;padding:0;
  display:grid;width:min(34ch,44vw);
}
.nd-method__step{grid-area:1 / 1;opacity:0;will-change:transform,opacity}
/* Le numéro est un repère, pas un titre : il est dessiné au trait et il
   laisse passer la scène derrière lui. */
.nd-method__n{
  font-weight:800;font-size:clamp(88px,14.5vw,220px);line-height:.8;
  letter-spacing:-.05em;margin:0 0 6px;color:transparent;
  -webkit-text-stroke:1.5px var(--nd-ink);
}
.nd-method__t{
  font-weight:800;font-size:clamp(32px,5vw,76px);line-height:1;
  letter-spacing:-.03em;margin:0 0 20px;
}
.nd-method__d{color:var(--nd-muted);font-size:clamp(15px,1.35vw,18px);line-height:1.65;margin:0;max-width:38ch}

/* Le filet dit où l'on en est dans la séquence, comme le rail du film. */
.nd-method__rule{
  position:absolute;z-index:4;left:var(--nd-gutter);right:var(--nd-gutter);
  bottom:clamp(30px,7vh,72px);height:1.5px;background:var(--nd-line);
}
.nd-method__rule i{
  display:block;height:100%;width:calc(var(--nd-m) * 100%);
  background:linear-gradient(90deg,var(--nd-blue),var(--nd-lilas));
}

/* --- L'expérience : la démonstration se fait sur la page ---------------- */
.nd-band--xp{text-align:center;background:var(--nd-lav)}
.nd-band--xp .nd-lead{margin-bottom:clamp(34px,5vh,60px)}
.nd-stroop{padding:clamp(30px,5vh,60px) 0}
.nd-stroop__word{
  font-weight:800;font-size:clamp(56px,11vw,150px);letter-spacing:-.04em;
  line-height:1;margin:0;color:var(--nd-blue);
  transition:opacity .26s var(--nd-ease);
}
/* Sans mouvement, le mot ne change plus : un seul exemple suffit à montrer
   le conflit, et il n'a pas besoin de clignoter pour cela. */
.nd-static .nd-stroop__word{transition:none}
.nd-stroop__hint{margin:22px 0 0;color:var(--nd-muted);font-size:16px}

/* --- La sortie de la Home : on cherche, ou on parcourt ------------------
   La page ne doit pas s'amenuiser jusqu'à s'arrêter. Elle se pose : une
   dernière grande question, le champ de recherche comme dernier geste, et
   une phrase basse qui dit où en est la bibliothèque. */
.nd-band--explore{
  text-align:center;
  padding-block:clamp(130px,19vh,240px) clamp(120px,17vh,220px);
  background:radial-gradient(80% 60% at 50% 62%,#FFF 0%,var(--nd-lav) 100%);
}
.nd-h2--xl{font-size:clamp(36px,5.8vw,88px);max-width:none;margin-bottom:16px}
.nd-outro{
  margin:clamp(48px,7vh,86px) auto 0;max-width:44ch;
  color:var(--nd-muted);font-size:15px;line-height:1.7;
}

/* --------------------------------------------------------------------------
   Paliers
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  :root{--nd-gutter:22px}
  /* Le panneau passe au-dessus du sommaire : il reste montré, il change
     seulement de place. Dégradation technique, pas de composition. */
  .nd-library__grid{grid-template-columns:1fr;gap:30px}
  .nd-library__stage{position:relative;top:auto;aspect-ratio:4/3;order:-1}
  .nd-js .nd-library__grid .nd-index__row{opacity:1}
  .nd-index__row{grid-template-columns:44px 1fr}
  .nd-index__d,.nd-index__k{display:none}
  /* La méthode garde sa séquence en colonne unique : la sphère passe
     derrière le texte au lieu d'être à côté, et le voile devient vertical. */
  .nd-method__stage{align-items:end;padding-bottom:clamp(90px,16vh,150px)}
  .nd-method__orb{
    right:auto;left:50%;top:38%;width:92vw;
    transform:
      translate(-50%, calc(-50% + (0.5 - var(--nd-m)) * 6vh))
      scale(calc(1 + var(--nd-m) * 0.14));
  }
  .nd-method__stage::before{
    background:linear-gradient(180deg,rgba(252,252,254,.6) 0%,rgba(252,252,254,0) 26%,var(--nd-paper) 62%);
  }
  .nd-method__steps{width:auto}
  .nd-method__n{font-size:clamp(72px,22vw,120px)}
  .nd-method__t{font-size:clamp(30px,8.5vw,44px)}
  .nd-method__d{max-width:none}
  .nd-band--feature{min-height:0}
  .nd-feature__art{position:relative;inset:auto;height:60svh}
  .nd-feature__body{max-width:none;margin-top:-14vh}
  .nd-list__row{grid-template-columns:44px 1fr;gap:14px}
  .nd-list__m{grid-column:2;font-size:12.5px}
}


/* Sans mouvement : la Home reste entière, lisible, ordonnée. Le panneau de
   la bibliothèque montre le premier territoire et ne bouge plus, le topic à
   la une garde son image mais perd sa dérive. */
.nd-static .nd-library__stage{position:relative;top:auto}
.nd-static .nd-shot{transition:none}
.nd-static .nd-feature__art{transform:none !important}
.nd-static .nd-index__row{opacity:1 !important}