/* ATHENORA — page Vision. Le socle est dans site.css. */

/* les gestes : liste Butler à bullet-chouette, sans filets */
.gestes{display:flex;flex-direction:column;gap:14px;text-align:left}
.gestes li{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:clamp(23px,2.1vw,30px);white-space:nowrap;line-height:1.25;color:var(--ink);cursor:default}
.gestes .sym{width:52px;height:52px;flex:none;color:var(--acc);margin-left:-10px}
/* diptyque : réserve | filet | plein */
.dip{width:100%}
.dip .row{display:grid;grid-template-columns:1fr 1px 1fr;gap:44px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.dip .row:last-child{border-bottom:1px solid var(--line)}
.dip .l{text-align:right;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink);opacity:.62;text-wrap:balance}
.dip .f{align-self:stretch;background:var(--acc);opacity:.6}
.dip .r{text-align:left;font-family:var(--serif);font-weight:800;font-size:clamp(21px,1.9vw,28px);line-height:1.35;color:var(--ink);text-wrap:balance}
/* mot fantôme (accueil) : traverse lentement sa bande */
.ghost{position:absolute;left:-2vw;top:42%;font-family:var(--serif);font-weight:800;font-size:16vw;line-height:1;color:var(--nuit);opacity:.04;white-space:nowrap;pointer-events:none;z-index:1;transform:translateY(calc((var(--p,.5) - .5) * 36vh))}
.duo{display:grid;grid-template-columns:1fr 1px 1fr;gap:56px;width:100%;padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}
.duo>p:first-child{text-align:right;margin-left:auto}
.duo>p:last-child{text-align:left}
.duo .f{align-self:stretch;background:var(--acc);opacity:.55}
.duo .say{max-width:16em;font-size:clamp(21px,1.9vw,28px)}   /* v8 : un cran sous la 1re phrase (taille de .dip .r) */
.duo>p:last-child{max-width:16.5em}
/* deux paragraphes d'attaque, un cran au-dessus du texte courant */
.txt.accroche{font-size:20px;max-width:30em}
.txt.accroche .neg{opacity:.62}
/* texte « tenu » : un filet d'accent à gauche */
.tenu{border-left:1px solid var(--acc);padding-left:28px}
.gestes.rang{flex-direction:row;justify-content:space-between;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gestes.rang li{font-size:clamp(20px,1.9vw,27px)}
.refus{padding-top:22px;border-top:1px solid rgba(255,255,255,.45)}   /* texte courant (.txt) posé sous un filet */

/* ══ Le réseau ══ */
.net{width:100%;max-width:560px;aspect-ratio:1;display:block;overflow:visible;justify-self:end}
.net line{stroke:var(--ciel);stroke-width:1;vector-effect:non-scaling-stroke}
.net .lit{stroke:var(--or);stroke-width:1.6}
.net .m{fill:rgba(222,236,247,.6);transition:fill .5s,r .5s}
.net .m.on{fill:var(--or)}
.net .k{fill:var(--or)}
.net .kr{fill:none;stroke:rgba(205,182,102,.4);stroke-width:1}
.net .src{fill:rgba(222,236,247,.5)}
.net .m.on,.net .k.on{fill:var(--or)}
.net .kr.on{stroke:var(--or)}
.net text{font-family:Poppins,sans-serif;font-weight:400;font-size:14px;letter-spacing:.24em;text-transform:uppercase;fill:rgba(222,236,247,.85);paint-order:stroke;stroke:var(--nuit);stroke-width:6px;stroke-linejoin:round}

/* ══ La balance — liée au scroll, dans les deux sens ══ */
.fleau{--a:calc(-4deg + 8deg * var(--p,1));--h:160px;--y:108px;position:relative;width:min(960px,84vw);height:var(--h)}
.fleau .beam{position:absolute;left:0;right:0;top:var(--y);height:1px;background:var(--acc);transform:rotate(var(--a));transition:transform .25s linear}
.fleau .pivot{position:absolute;left:50%;top:var(--y);width:26px;height:26px;transform:translate(-50%,-50%);color:var(--acc)}
.fleau .arm{position:absolute;bottom:calc(var(--h) - var(--y) + 22px);width:44%;font-family:var(--serif);font-weight:800;font-size:var(--say);line-height:1.3;color:var(--ink);transition:transform .25s linear,opacity .25s linear}
.fleau .arm.l{left:0;text-align:left;transform:translateY(calc(var(--cx,-300px) * tan(var(--a))));opacity:calc(1 - (1 - var(--res)) * var(--p,1))}
.fleau .arm.r{right:0;text-align:right;transform:translateY(calc(var(--cx,300px) * tan(var(--a))))}
@supports not (top:calc(1px * tan(1deg))){.fleau{--a:0deg}}

/* ══ Une maison d'auteurs : Moins / Mieux en très grand ══ */
.mm{width:100%;display:grid;grid-template-columns:1fr 1px 1fr;column-gap:clamp(28px,3.4vw,52px);row-gap:6px;align-items:baseline}
.mm p{font-family:var(--serif);font-weight:800;font-size:clamp(34px,4.2vw,60px);line-height:1.12;white-space:nowrap}
.mm .moins{text-align:right;color:var(--ink);opacity:var(--res)}
.mm .mieux{text-align:left;color:var(--ink)}
.mm .f{grid-row:1 / span 2;grid-column:2;align-self:stretch;background:var(--acc);opacity:.7}
.or{color:var(--or)!important}

/* ══ L'exigence de la relation : la brume, la lumière qui révèle ══ */
.relation .bg{object-position:72% 50%}

.chute{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:72px}

/* ══ Le temps long : l'axe se trace et l'image avance pendant que la bande traverse l'écran ══ */
.long .bg{opacity:.6;translate:0 12vh;transform:scale(calc(1 + .45 * var(--p,1)));transform-origin:50% 50%;transition:transform .3s linear}
.step{--q:clamp(0, (var(--p,1) - var(--at)) * 7, 1);opacity:var(--q);transition:opacity .3s linear}
.long .construit{display:flex;flex-direction:column;align-items:center;width:100%}
.long .amorce{font-size:20px;line-height:1.5;color:var(--body)}
/* l'axe du temps : un trait horizontal qui traverse la bande et le couloir à hauteur du point de fuite.
   --lt = avancée du tracé (0 → 1) ; chaque jalon s'allume quand le tracé l'atteint (--on), et son point ◉
   se déploie en chouette. Les graduations dorées suivent le tracé. */
.long .trace{--lt:clamp(0, (var(--p,1) - .04) / .36, 1);--lt2:clamp(0, (var(--p,1) - .4) / .08, 1);--y:14px;position:relative;width:100%;margin-top:22px;
  display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:0}
.long .trace::before{content:"";position:absolute;left:-12vw;right:-12vw;bottom:var(--y);height:1px;
  background:linear-gradient(90deg,transparent,rgba(222,236,247,.22) 12vw,rgba(222,236,247,.22) calc(100% - 12vw),transparent)}
.long .trace::after{content:"";position:absolute;left:-12vw;right:-12vw;bottom:var(--y);height:1px;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--or) 12vw,var(--or) calc(100% - 12vw),transparent);
  clip-path:inset(0 calc(12vw * (1 - var(--lt2)) + (100% - 24vw) * (1 - var(--lt))) 0 0);transition:clip-path .3s linear}
.long .trace .ticks{position:absolute;left:0;right:0;bottom:calc(var(--y) + 1px);height:8px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--or) 0 1px,transparent 1px calc(100% / 36));
  -webkit-mask:linear-gradient(90deg,#000,#000) no-repeat 0 0 / calc(100% * var(--lt)) 100%;
  mask:linear-gradient(90deg,#000,#000) no-repeat 0 0 / calc(100% * var(--lt) + 1px) 100%;opacity:.55;border-right:1px solid var(--or)}
/* les jalons sont des points ◉ (la chouette repliée) : essai de chouette dépliée à 34 px écarté, illisible à cette taille */
.long .jal{--on:clamp(0, (var(--lt) - var(--x) + .02) * 14, 1);position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.long .jal .w{font-family:var(--serif);font-weight:800;font-size:clamp(27px,2.5vw,36px);line-height:1.1;color:var(--blanc);white-space:nowrap;
  opacity:calc(.18 + .82 * var(--on));transition:opacity .3s linear}
.long .jal .ptc{--k:0;width:56px;height:56px;margin:-14px 0;background:radial-gradient(circle,#070B33 0 9.5px,transparent 10px);color:var(--or);opacity:calc(.4 + .6 * var(--on));transition:opacity .3s linear}
.adv span{display:inline-block}

/* ══ Choisir ══ */
.fld{width:100%;max-width:440px;height:auto;overflow:visible}

.fld .n{fill:var(--blanc);opacity:calc(.85 - .63 * clamp(0, (var(--p,1) - var(--d)) * 4, 1));transition:opacity .3s linear}
.fld .s{fill:var(--blanc)}
.fld .sr{fill:none;stroke:var(--blanc);stroke-width:1;opacity:clamp(0, (var(--p,1) - .5) * 4, 1);transition:opacity .3s linear}

/* ══ VIII ══ */
.finale{display:flex;flex-direction:column;gap:8px}
.finale div{overflow:hidden;padding:4px 0}
.finale span{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(38px,4.2vw,64px);line-height:1.2;color:var(--blanc)}
.finale .contour{color:transparent;-webkit-text-stroke:1.5px var(--ciel)}

@media (prefers-reduced-motion:reduce){
  .fleau *{transition:none}
}

/* ══ Écrans étroits (rien ne s'applique à partir de 1024 px) ══ */
@media (max-width:960px){
  .gestes li{white-space:normal}
  .gestes.rang{flex-direction:column;justify-content:flex-start}
  .dip .row{grid-template-columns:1fr;gap:10px}.dip .l{text-align:left}.dip .f{display:none}
  .mm p{white-space:normal}
  .net{max-width:520px}
  .fld{max-width:340px;justify-self:center}
  /* le temps long : jalons empilés, sans l'axe, affichés d'emblée ainsi que la phrase de chute */
  .long .jal{--on:1}
  .step{opacity:1}
  .long .trace{grid-template-columns:1fr;gap:22px}.long .trace::before,.long .trace::after,.long .trace .ticks{display:none}
}
@media (max-width:767px){
  /* les deux couplets de l'intro, l'un sous l'autre, séparés d'un court filet */
  .duo{grid-template-columns:1fr;gap:26px;padding:36px 0;justify-items:center}
  .duo>p:first-child,.duo>p:last-child{text-align:center;margin:0;max-width:none}
  .duo .say{max-width:none;font-size:var(--say)}
  .duo .f{width:40px;height:1px;align-self:auto}
  .tenu{padding-left:20px}
  .net text{font-size:22px;letter-spacing:.16em}
  /* la balance : phrases plus petites, au-dessus du fléau */
  .fleau{--h:200px;--y:160px;width:100%}
  .fleau .arm{width:46%;font-size:clamp(16px,4.6vw,20px)}
  .gestes li{font-size:clamp(20px,5.4vw,26px)}
  .gestes.rang li{font-size:clamp(20px,5.4vw,26px)}
  .gestes.rang{padding:22px 0}
  /* Moins / Mieux : toujours en regard, dans un corps qui tient sur deux colonnes */
  .mm{column-gap:18px;row-gap:12px}
  .mm p{font-size:clamp(19px,5.3vw,30px);line-height:1.18}
  .chute{margin-top:56px}
  .long .jal{gap:22px}
  .long .jal .w{font-size:26px;white-space:normal}
  .finale .contour{-webkit-text-stroke-width:1px}
  .finale span{font-size:clamp(27px,7.4vw,38px)}
}