/* ============================================================
   SAMATSA · section 3 — « Tout part d'un diagnostic. »

   Une seule scène, pas une grille de cartes. Les éléments sont posés
   en coordonnées (--x / --y, en % de la scène), reliés par une seule
   trajectoire tracée derrière eux. Presque rien n'est enfermé dans un
   rectangle : ce sont des couvertures réelles en éventail, des visages
   réels dans une mosaïque de visio, des feuilles de travail
   superposées, et deux annotations aux extrémités.

   Feuille ADDITIVE : hero.css et section2.css ne sont pas touchés.
   ============================================================ */

:root{
  /* un bleu distinct de la section 2, dans la même famille */
  --s3-fond:#10243E;
  --s3-fond-2:#0C1C31;
  --s3-navy:#0B1D33;
  --s3-slate:#1F3656;
  --s3-steel:#38587A;
  --s3-ivoire:#F3F1ED;
  --s3-brume:#D9DEE6;
  --s3-sage:#A7B7AE;
  --s3-or:#C5A96A;

  --s3-txt-2:rgba(217,222,230,.74);
  --s3-txt-3:rgba(217,222,230,.48);
  --s3-line:rgba(217,222,230,.16);

  --s3-wrap:1440px;
  --hinge2-h:78px;

  /* v5 — un seul rayon et une seule ombre pour les quatre cartes-modules :
     c'etait la disparite de coins et d'ombres qui donnait l'air « bricole ». */
  --s3-radius:16px;
  --s3-shadow:0 28px 56px -30px rgba(0,0,0,.78);
}

/* hero.css pose `img{max-width:100%}` sans `height:auto` : les attributs
   width/height du HTML gardent alors la hauteur d'origine et l'image se
   déforme dès qu'on change sa largeur. On rétablit le ratio ici. */
.s3 img{height:auto}

.rv3{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv3.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv3{opacity:1;transform:none;transition:none}}

/* ══════════ TRANSITION SECTION 2 → SECTION 3 ══════════
   Plus de damier, plus de marches, plus aucune forme : le bleu de la section
   du dessus (#0B1D33, plat) se prolonge, puis se dissout dans le bleu de la
   scène (#10243E). L'écart entre les deux est minuscule (5, 7, 11 sur 255) —
   une bande basse suffit donc à rendre le passage imperceptible.

   Les arrêts suivent une courbe en S (smoothstep) plutôt qu'une rampe
   linéaire : un dégradé à deux arrêts casse net au départ et à l'arrivée, et
   l'œil lit cette cassure de pente comme un filet horizontal. Ici la pente
   part de zéro, culmine au milieu et revient à zéro — et la teinte d'arrivée
   est atteinte AVANT le bas de la bande, donc la couture avec la section
   suivante n'existe pas. Aucun blanc, aucune ombre, aucun bord. */
.hinge2{
  position:relative;z-index:1;
  height:var(--hinge2-h);margin-bottom:-1px;
  background:linear-gradient(180deg,
      rgb(11,29,51)    0%,
      rgb(11,29,52)  12.5%,
      rgb(12,30,53)   25%,
      rgb(13,31,54)  37.5%,
      rgb(14,33,57)   50%,
      rgb(14,34,59)  62.5%,
      rgb(15,35,60)   75%,
      rgb(16,36,62)  87.5%,
      rgb(16,36,62)  100%);
}

/* ══════════ LA SECTION ══════════ */
.s3{
  position:relative;
  background:linear-gradient(172deg,var(--s3-fond) 0%,#122748 46%,var(--s3-fond-2) 100%);
  color:var(--s3-ivoire);
  padding:64px 0 50px;
  overflow:hidden;
}
.s3__field{position:absolute;inset:0;pointer-events:none}
.s3__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 46%,#000 6%,transparent 80%);
  mask-image:radial-gradient(120% 90% at 50% 46%,#000 6%,transparent 80%);
}
.s3__glow{
  position:absolute;left:50%;top:52%;width:min(124vw,1680px);aspect-ratio:4.2;
  transform:translate(-50%,-50%) rotate(-9deg);
  background:radial-gradient(ellipse,rgba(56,88,122,.40) 0%,rgba(56,88,122,.13) 42%,transparent 68%);
}
.wrap3{position:relative;z-index:1;width:100%;max-width:var(--s3-wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── le titre ── */
.s3__head{margin-bottom:calc(clamp(2.1rem,3vw,3rem) - 20px)}
.s3__title{font-size:clamp(2.1rem,1.15rem + 2.6vw,3.35rem)}
.s3__title{
  margin:0 0 .55rem;
  font-size:clamp(2.15rem,1.2rem + 2.6vw,3.5rem);
  line-height:1.03;letter-spacing:-.024em;color:var(--s3-ivoire);
}
/* Le mot « diagnostic » porte le point de depart de toute la logique
   Samatsa : il est cercle d'un geste de plume (tools/build-cercle.py) —
   largeur variable, boucle legerement irreguliere, un peu plus d'un tour.
   Le trace est pose DERRIERE les lettres (z-index:-1), donc aucune n'est
   masquee : la boucle est simplement interrompue la ou elle les croise. */
.mot{position:relative;display:inline-block;white-space:nowrap}
/* L'aplat qui donne sa presence au mot : ni bouton ni badge, une forme souple
   dont les quatre rayons sont desaccordes (48/52, 45/55 ...), donc jamais un
   ovale parfait. Pose SOUS la boucle (z-index:-2 contre -1), lui-meme sous
   les lettres : la hierarchie aplat < filet < texte est garantie. Le voile
   monte a peine le fond local — le titre ivoire reste a ~12:1 de contraste. */
.mot::before{
  content:"";position:absolute;left:50%;top:48%;
  width:119%;height:130%;
  transform:translate(-50%,-50%) rotate(-1.3deg);
  border-radius:49% 51% 44% 56% / 58% 42% 58% 42%;
  background:radial-gradient(64% 78% at 46% 44%,
    rgba(167,183,174,.34), rgba(167,183,174,.19) 58%, rgba(167,183,174,.07) 100%);
  box-shadow:0 0 34px -4px rgba(167,183,174,.26);
  pointer-events:none;z-index:-2;
}
.mot__ring{
  position:absolute;left:50.5%;top:47.5%;
  /* hero.css pose un `svg{max-width:100%}` global : sans cette levee,
     la boucle etait rabotee a la largeur exacte du mot. */
  width:126%;height:145%;max-width:none;
  transform:translate(-50%,-50%) rotate(-1.3deg);
  fill:var(--s3-sage);opacity:.66;
  pointer-events:none;z-index:-1;overflow:visible;
}
/* Le trait ne change pas : seul un masque anime son APPARITION. Le masque
   reprend le bord exterieur du meme trace (pathLength=1), trop epais pour
   laisser deviner sa propre forme — il ne fait que reveler la ribbon reelle
   au fur et a mesure, comme un geste qui se dessine. Repos = invisible ;
   la classe .is-drawn (ajoutee une seule fois, au scroll) tire le trait. */
.ring__reveal{stroke-dasharray:1;stroke-dashoffset:1}
.mot__ring.is-drawn .ring__reveal{
  transition:stroke-dashoffset 1050ms cubic-bezier(.22,.61,.36,1);
  stroke-dashoffset:0;
}
@media (prefers-reduced-motion:reduce){
  .ring__reveal{stroke-dashoffset:0}
  .mot__ring.is-drawn .ring__reveal{transition:none}
}
/* coupure voulue apres « precise, » : sur desktop la phrase se lit en deux
   lignes decidees, pas subies. Sous 768 px la colonne est trop etroite pour
   que ce point de coupe ait un sens : le <br> est neutralise et le texte
   reprend un retour naturel. */
.s3__sub{
  margin:0;max-width:56ch;
  font-size:clamp(.98rem,.92rem + .3vw,1.12rem);line-height:1.5;
  color:var(--s3-txt-3);
}

/* ══════════════════════════════════════════════════════════════════
   LA SCÈNE — panoramique, pas ascensionnelle
   ──────────────────────────────────────────────────────────────────
   La progression se lit de GAUCHE À DROITE. La courbe ne monte que de
   150 px sur 880 px de course : c'est une trajectoire, pas un escalier.
   Les cinq stations se posent en alternance juste au-dessus et juste
   en dessous d'elle — c'est ce qui permet de tenir tout le parcours
   dans 700 px de haut sans jamais empiler.

   Largeur de scène FIXE (1320 px) : des objets de taille fixe dans un
   cadre élastique, c'est la garantie de collisions à chaque largeur.
   Le repère du SVG est donc au pixel près celui de la scène.
   ══════════════════════════════════════════════════════════════════ */
.scene{
  position:relative;width:100%;max-width:1320px;margin-inline:auto;
  /* v5 — scene un peu moins haute : les % de --y se resserrent d'eux-memes,
     la courbe A → B se lit plus horizontale, moins ascensionnelle. */
  aspect-ratio:1320/636;
}
.scene > *{position:absolute;left:var(--x);top:var(--y);width:var(--w)}

.anchor--a{--x:0%;      --y:80.7%;  --w:210px}   /* gauche, tout en bas  */
.diag     {--x:3.03%;   --y:7.99%;  --w:330px}   /* v5.3 : +10px vs v5.1 */
.fan      {--x:22.80%;  --y:68.23%; --w:320px}   /* v5.3 : +25px vs v5.2 */
.visio    {--x:33.79%;  --y:6.5%;   --w:355px}
.spar     {--x:52.73%;  --y:64.3%;  --w:260px}
.sheet    {--x:67.12%;  --y:8.6%;   --w:300px}
/* Le Point B descend de 91 px et se decale vers la droite : la courbe
   finissait a 15 px de son bord haut et le traversait visuellement. Elle
   passe desormais 71 px au-dessus de lui, au plus pres. */
.anchor--b{--x:79.24%;  --y:63.0%;  --w:215px}   /* droite, degage du trace */

/* ── la trajectoire ── */
.scene__path{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;overflow:visible;transform:translateY(10px)}
/* un trait fin plein plutôt qu'un pointillé : sur un bleu nuit, un tiret de
   3 px à 50 % disparaît. pathLength="1", donc le tracé se dessine de A vers
   B par simple décalage du dash. */
.trace{
  fill:none;stroke:rgba(222,233,242,.68);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.scene--go .trace{animation:tirer 2.3s cubic-bezier(.32,.06,.2,1) forwards}
@keyframes tirer{to{stroke-dashoffset:0}}

/* les nœuds : de simples ronds, un par station */
.stop{
  fill:var(--s3-fond);stroke:rgba(196,212,226,.6);stroke-width:1.3;
  opacity:0;transition:opacity .45s ease var(--sd,0s);
}
.scene--go .stop{opacity:1}
.stop--a{stroke:rgba(196,212,226,.44)}
.stop--b{fill:var(--s3-sage);stroke:rgba(167,183,174,.92);stroke-width:1.7}
/* survol d'une station → son nœud s'allume, et rien d'autre ne bouge */
.halo{fill:none;stroke:var(--s3-or);stroke-width:1;opacity:0;transform-box:fill-box;
      transform-origin:center;transform:scale(.5);
      transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.stop.is-on{stroke:var(--s3-or);stroke-width:1.8;fill:rgba(197,169,106,.22)}
.stop--b.is-on{fill:var(--s3-or)}
.halo.is-on{opacity:.5;transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .trace{stroke-dashoffset:0}
  .scene--go .trace{animation:none}
  .stop{opacity:1;transition:none}
  .halo{transition:none}
}

/* ══════════ LE VOCABULAIRE COMMUN ══════════ */
.tag{
  margin:0;display:flex;align-items:center;gap:.44rem;
  font-size:.665rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--s3-sage);
}
.tag::before{
  content:"";width:6px;height:6px;flex:none;background:currentColor;
  clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%);
}
.tag__sep{width:14px;height:1px;background:currentColor;opacity:.45}
.sub{margin:.34rem 0 0;font-size:.775rem;line-height:1.42;color:rgba(217,222,230,.56)}

/* toute station réagit de la même façon : elle se pose 3 px plus haut
   et gagne un peu de contraste. Le reste se passe sur la courbe. */
.station{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.station.is-on{transform:translateY(-3px)}
.station.is-on .tag{color:var(--s3-or)}
@media (prefers-reduced-motion:reduce){.station{transition:none}.station.is-on{transform:none}}

/* ══════════ LES DEUX ANCRAGES ══════════
   A et B disent la même chose en trois lignes, pas de la même manière :
   A est plus sourd, son filet est gris, sa dernière ligne est un aveu ;
   B est plus clair, son filet est sauge, et il respire. */
/* Les deux bornes du parcours doivent se lire avant tout le reste : on
   creuse l'ecart avec le texte descriptif — corps +17 %, graisse 700,
   contraste double — sans en faire le titre de la section. */
.anchor__lb{
  margin:0 0 .6rem;display:flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(217,222,230,.88);
}
.anchor__lb::before{content:"";width:18px;height:1.5px;flex:none;background:currentColor;opacity:.7}
.anchor__txt{
  margin:0;font-size:.93rem;line-height:1.55;color:var(--s3-txt-2);
  padding-left:.95rem;border-left:1px solid var(--s3-line);
}
.anchor__txt b{font-weight:400;color:var(--s3-ivoire)}
.anchor--a .anchor__txt{color:rgba(217,222,230,.56)}
.anchor--a .anchor__txt b{color:rgba(243,241,237,.86)}
.anchor--b .anchor__lb{color:#C2D3C7}
.anchor--b .anchor__txt{color:rgba(233,238,243,.94);border-left-color:rgba(167,183,174,.58)}
.anchor--b .anchor__txt b{color:var(--s3-sage);font-weight:500}
.anchor--b::before{
  content:"";position:absolute;left:-28%;top:-42%;width:158%;height:200%;
  background:radial-gradient(ellipse,rgba(167,183,174,.15),transparent 66%);
  pointer-events:none;z-index:-1;
}
.anchor.is-on .anchor__lb{color:var(--s3-or)}

/* ══════════ 1 · LE DIAGNOSTIC ══════════
   Aucun Elo : il est déjà au hero. Ce qui compte ici, c'est le tri —
   ce qui tient, ce qui lâche, puis la seule ligne pleine de la section :
   la priorité. C'est le contraste le plus fort de la scène. */
.diag{margin:0}
.diag .tag{margin-bottom:.2rem}
.sub--diag{margin:.3rem 0 .72rem}
.diag__in{
  padding:.95rem 1.05rem 1.05rem;border-radius:var(--s3-radius);
  background:linear-gradient(158deg,rgba(243,241,237,.10),rgba(243,241,237,.042));
  border:1px solid rgba(243,241,237,.155);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  box-shadow:var(--s3-shadow);
}
/* Le rapport n'est pas un bloc a part : c'est le pied de la carte de
   diagnostic. Une vignette de 30 px, deux lignes, un filet au-dessus — juste
   assez pour dire que la carte n'est qu'un resume. */
.diag__rap{
  display:flex;align-items:center;gap:.5rem;
  margin:.6rem 0 0;padding-top:.52rem;
  border-top:1px solid rgba(243,241,237,.13);
}
.rap__doc{position:relative;flex:none;display:block;width:26px;height:32px}
.rap__b1,.rap__p{
  position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px;
  background:#EFEDE7;border:1px solid rgba(11,29,51,.16);
}
.rap__b1{left:4px;top:3px;right:-4px;bottom:-3px;opacity:.4;transform:rotate(3.2deg)}
.rap__p{
  background:#F7F6F2;padding:4px 4px 0;overflow:hidden;
  box-shadow:0 6px 12px -6px rgba(0,0,0,.6);
}
.rap__hd{display:block;height:2.5px;width:66%;border-radius:1.5px;background:rgba(11,29,51,.46);margin-bottom:4px}
.rap__l{display:block;height:1.5px;border-radius:1px;background:rgba(11,29,51,.2);margin-bottom:3px}
.rap__l--c{width:58%}
.rap__txt{display:block;min-width:0;font-size:.645rem;line-height:1.35;color:var(--s3-txt-3)}
.rap__txt b{
  display:block;font-weight:500;font-size:.585rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--s3-sage);margin-bottom:.1rem;
}

.diag__lb{
  margin:0 0 .34rem;font-size:.575rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s3-txt-3);
}
.diag__lb + .diag__tags{margin-bottom:.62rem}
.diag__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.diag__tags li{font-size:.705rem;line-height:1;padding:.33rem .56rem;border-radius:5px;white-space:nowrap}
/* ce qui tient : sauge éclairée. ce qui lâche : un terracotta désaturé —
   chaud, jamais rouge, et cantonné à cet usage précis. */
.diag__tags--fort li{color:#BDCDC2;border:1px solid rgba(167,183,174,.46);background:rgba(167,183,174,.11)}
.diag__tags--faible li{color:#D3A48C;border:1px solid rgba(201,119,90,.46);background:rgba(201,119,90,.11)}
.diag__prio{
  display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;
  margin:.9rem 0 0;padding:.58rem .7rem .62rem;border-radius:9px;
  background:var(--s3-ivoire);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.62);
}
/* La meme etoile que « Priorite actuelle » au hero : meme trace, meme
   9,5 px, meme champagne a 88 %. C'est le seul endroit de la section qui
   la porte — elle devient le code visuel de la priorite d'un bout a
   l'autre de la page. */
.diag__prio-lb{
  display:flex;align-items:center;gap:.55rem;
  font-size:.565rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(11,29,51,.5);
}
.diag__mark{
  width:9.5px;height:9.5px;flex:none;
  fill:var(--s3-or);opacity:.88;
  transform:translateY(-.5px);
}
.diag__prio-txt{font-family:var(--serif);font-size:1rem;line-height:1.1;color:var(--s3-navy)}

/* ══════════ 2 · LA MASTERCLASS ══════════
   De vraies couvertures, en éventail, qui s'ouvrent au survol. C'est le
   seul endroit franchement coloré : les contenus sont ce qu'il y a de
   plus vivant dans l'univers. */
.fan{margin:0}
.fan__list{position:relative;height:152px;margin:0 0 .66rem;padding:0;list-style:none}
.cov{
  position:absolute;top:0;width:104px;aspect-ratio:1;border-radius:11px;overflow:hidden;
  border:1px solid rgba(243,241,237,.15);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.8);
  transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
/* la carte maitresse : plus grande, devant, avec sa propre ombre portee */
.cov--front{
  width:118px;z-index:5;
  border-color:rgba(243,241,237,.24);
  box-shadow:0 26px 52px -20px rgba(0,0,0,.86);
}
.cov img{width:100%;height:100%;object-fit:cover;display:block}
.cov:nth-child(1){left:0;    top:26px; transform:rotate(-9deg);   z-index:1}
.cov:nth-child(2){left:56px; top:10px; transform:rotate(-4deg);   z-index:2}
.cov:nth-child(3){left:216px;top:10px; transform:rotate(6deg);    z-index:2}
.cov:nth-child(4){left:112px;top:0;    transform:rotate(0deg);    z-index:5}
.fan.is-on .cov,.fan:hover .cov{transform:rotate(0) translateY(-4px)}
.fan.is-on .cov:nth-child(1),.fan:hover .cov:nth-child(1){transform:rotate(-10.5deg) translateY(-6px)}
.fan.is-on .cov:nth-child(3),.fan:hover .cov:nth-child(3){transform:rotate(7.5deg) translateY(-6px)}
.tag--fan{padding-left:0}
.fan .sub{padding-left:0;max-width:270px}

/* ══════════ 3 · LE COURS VISIO ══════════
   La vraie photo de Samuel, en 16/9 et pleine largeur de la fenêtre :
   c'est l'élément le plus humain de la page, il ne doit pas être rogné.
   Autour, le strict minimum d'une visio — une pastille « en direct »,
   l'élève en incrustation, la position partagée en vignette. */
.visio{margin:0}
.visio__win{
  padding:10px;border-radius:var(--s3-radius);
  background:linear-gradient(152deg,rgba(31,54,86,.95),rgba(11,29,51,.97));
  border:1px solid rgba(243,241,237,.16);
  box-shadow:var(--s3-shadow);
  margin-bottom:.7rem;
}
.visio__hd{
  display:flex;align-items:center;gap:.42rem;margin:.05rem 0 .5rem .14rem;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(217,222,230,.64);
}
/* le point rouge du direct : la seule note rouge du site, et elle ne sert
   qu'à ça — dire qu'une séance est en cours, maintenant. */
.visio__hd{color:rgba(232,237,242,.82)}
.visio__live{
  position:relative;width:7px;height:7px;border-radius:50%;background:#E2574A;flex:none;
  animation:battement 1.7s ease-in-out infinite;
}
.visio__live::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(226,87,74,.55);
  animation:onde 1.7s ease-out infinite;
}
@keyframes battement{0%,100%{opacity:1}52%{opacity:.35}}
@keyframes onde{0%{transform:scale(.7);opacity:.8}70%,100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .visio__live,.visio__live::after{animation:none}
  .visio__live::after{opacity:.5;transform:none}
}
/* le cadre laisse dépasser ce qui est posé par-dessus : c'est l'image
   elle-même qui porte l'arrondi, pas le conteneur. */
.visio__main{position:relative;display:block;aspect-ratio:1100/620}
.visio__main > img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:10px;background:#16283E;
}
/* l'élève en incrustation : le langage d'une visio, et cela évite une
   troisième vignette au même rang que le coach */
/* les autres connectés : une petite pellicule de vignettes dans l'angle,
   comme dans une vraie visio — pas une seule tête posée sur un fond bleu. */
/* Les connectes : une vraie mosaique de visio fournie par Samuel, posee
   dans l'angle haut-droit de l'image du coach. Une seule image, avec ses
   propres goutieres — c'est ce qui donne l'impression d'un appel en cours
   plutot que d'une planche de portraits. */
.visio__crew{
  /* 32 % et non 42 % : sur la photo de cours 2026 Samuel est cadre plus
     a droite que sur l'ancienne capture, et la mosaique a 42 % venait
     mordre son visage. A 32 % elle demarre a 65 % de la largeur, soit
     juste apres sa tempe droite, et reste une vraie mosaique 2x2. */
  position:absolute;right:8px;top:8px;width:32%;
  display:block;border-radius:7px;overflow:hidden;
  border:1px solid rgba(8,15,26,.9);
  box-shadow:0 8px 20px -7px rgba(0,0,0,.88);
}
.visio__crew img{width:100%;height:auto;display:block}
/* Les portraits de la bibliothèque sont tous shootés sur le même fond bleu
   studio : empilés en mosaïque, ils font « planche de profils », pas
   « appel en cours ». On désature donc fortement le fond sans toucher aux
   carnations, et on recadre plus bas pour attraper le buste plutôt que
   l'aplat de fond. Le premier connecté garde son liseré de parole. */

/* la position partagée : un vrai échiquier 8x8, posé par-dessus l'angle
   bas-gauche de l'image et débordant de 18 px sous le cadre. */
.visio__share{
  position:absolute;left:10px;bottom:-14px;width:34%;aspect-ratio:1;
  border-radius:8px;overflow:hidden;background:#EDEFF3;
  border:2px solid rgba(243,241,237,.9);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.75);
}
.visio__share img{width:100%;height:100%;object-fit:cover;display:block}
.visio__cap{
  margin:34px 0 0;font-size:.69rem;line-height:1.35;color:rgba(217,222,230,.66);
}

/* ══════════ 4 · LE SPARRING ══════════
   Un arrêt à part : deux joueurs, un lien, une raison de jouer.
   Pas une interface, pas un cours. */
.spar{margin:0}
.spar .tag{margin-bottom:.2rem}
.spar .sub{margin:.24rem 0 .78rem}
.spar__in{
  padding:.9rem .95rem .95rem;border-radius:var(--s3-radius);
  background:linear-gradient(150deg,rgba(243,241,237,.09),rgba(243,241,237,.036));
  border:1px solid rgba(243,241,237,.145);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  box-shadow:var(--s3-shadow);
}
.spar__duo{display:flex;align-items:center;gap:.5rem}
.spar__p{
  display:block;flex:1 1 0;min-width:0;border-radius:10px;overflow:hidden;
  aspect-ratio:1;background:#16283E;border:1px solid rgba(243,241,237,.13);
}
.spar__p img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
/* le lien : le vocabulaire de la trajectoire, en miniature */
.spar__link{
  position:relative;flex:none;width:52px;height:1px;overflow:visible;
  background:repeating-linear-gradient(90deg,rgba(196,212,226,.45) 0 3px,transparent 3px 8px);
}
/* ── L'appariement, en quatre temps sur un cycle de 4,4 s ──
   1. un signal part de chaque joueur vers le centre
   2. les deux se rencontrent : le nœud encaisse et grossit
   3. une onde part du point de rencontre
   4. les deux vignettes s'allument : la mise en relation est faite
   C'est le seul mouvement du bloc, et il dit exactement ce qu'il fait. */
.spar__seed{
  position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--s3-sage);opacity:0;
}
.spar__seed--g{left:-1px;  animation:filer-d 4.4s cubic-bezier(.4,0,.5,1) infinite}
.spar__seed--d{right:-1px; animation:filer-g 4.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes filer-d{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:.95}
  34%{transform:translateX(23px);opacity:.95}
  42%,100%{transform:translateX(23px);opacity:0}}
@keyframes filer-g{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:.95}
  34%{transform:translateX(-23px);opacity:.95}
  42%,100%{transform:translateX(-23px);opacity:0}}
.spar__link::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--s3-fond);border:1px solid var(--s3-sage);
  animation:rencontre 4.4s ease-in-out infinite;
}
@keyframes rencontre{
  0%,32%{transform:scale(1);border-color:rgba(167,183,174,.6);background:var(--s3-fond)}
  40%{transform:scale(1.55);border-color:var(--s3-or);background:rgba(197,169,106,.4)}
  58%,100%{transform:scale(1);border-color:rgba(167,183,174,.6);background:var(--s3-fond)}}
.spar__ping{
  position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;
  border:1px solid rgba(197,169,106,.7);opacity:0;
  animation:onde-appariement 4.4s ease-out infinite;
}
.spar__ping:nth-of-type(2){animation-delay:.22s}
@keyframes onde-appariement{
  0%,36%{transform:scale(1);opacity:0}
  40%{opacity:.7}
  74%,100%{transform:scale(3.8);opacity:0}}
/* les deux joueurs s'allument une fois appariés */
.spar__p{animation:apparie 4.4s ease-in-out infinite}
@keyframes apparie{
  0%,40%{box-shadow:0 0 0 0 rgba(167,183,174,0)}
  52%,72%{box-shadow:0 0 0 1.5px rgba(167,183,174,.72)}
  86%,100%{box-shadow:0 0 0 0 rgba(167,183,174,0)}}
@media (prefers-reduced-motion:reduce){
  .spar__seed,.spar__ping{animation:none;opacity:0}
  .spar__link::after,.spar__p{animation:none}}
.spar__meta{display:flex;justify-content:center;margin:.8rem 0 0;padding:0;list-style:none}
.spar__meta li{
  font-size:.685rem;line-height:1;padding:.34rem .6rem;border-radius:5px;
  color:var(--s3-sage);border:1px solid rgba(167,183,174,.42);
}

/* ══════════ 5 · LES EXERCICES ══════════
   De vraies planches, fournies par Samuel : le feuillet du dessous en
   montre une, la page du dessus en montre deux. Aucun titre d'ouvrage
   source n'est repris — seule la matérialité du document est gardée. */
.sheet{margin:0}
.sheet__back{
  position:absolute;left:18px;top:30px;right:-18px;height:150px;border-radius:11px;
  background:#E7E4DC;border:1px solid rgba(11,29,51,.12);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.7);
  transform:rotate(3.6deg);opacity:.4;
}
.sheet__mid{
  position:absolute;left:8px;top:24px;right:-9px;height:170px;border-radius:11px;overflow:hidden;
  background:#F1EFE9;border:1px solid rgba(11,29,51,.13);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.72);
  transform:rotate(1.8deg);opacity:.75;
}
.sheet__mid img{width:50%;display:block;margin:12px 0 0 13px;opacity:.85;filter:contrast(1.06) saturate(.85)}
.sheet__page{
  position:relative;margin-top:22px;padding:.78rem .84rem .86rem;border-radius:var(--s3-radius);
  background:#F7F6F2;border:1px solid rgba(11,29,51,.14);
  box-shadow:0 30px 54px -26px rgba(0,0,0,.82);
  transform:rotate(-.9deg);
}
.sheet__hd{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .55rem;
  font-size:.605rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(11,29,51,.52);
}
/* la pastille était en bleu nuit plein : trop noire sur du papier ivoire.
   Un aplat très dilué et un filet suffisent à la détacher. */
.sheet__pill{
  padding:.2rem .48rem;border-radius:5px;letter-spacing:.1em;
  background:rgba(31,54,86,.085);border:1px solid rgba(31,54,86,.24);color:#28425F;
}
.sheet__pl{display:block;width:100%;border-radius:3px;filter:contrast(1.08) saturate(.9)}
.sheet__note{
  display:flex;align-items:flex-start;gap:.46rem;
  margin:.6rem 0 0;padding-top:.5rem;border-top:1px solid rgba(11,29,51,.12);
  font-size:.725rem;line-height:1.35;color:rgba(11,29,51,.6);
}
.sheet__pen{width:12px;height:1px;flex:none;margin-top:.5rem;background:var(--s3-sage)}
.tag--sheet{margin-top:.85rem}

/* ══════════ LA LÉGENDE DE SOURCE ══════════ */
/* Une seule ligne, centree, nettement en retrait : elle dit que la scene ne
   montre pas tout, sans se disputer la lecture avec le parcours. */
.s3__partiel{
  position:relative;z-index:1;
  max-width:660px;margin:clamp(1.4rem,2.1vw,2rem) auto 0;
  font-size:.735rem;line-height:1.5;text-align:center;
  color:rgba(217,222,230,.4);
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   La scène absolue demande 1320 px de large. En dessous, la trajectoire
   se replie sans jamais perdre l'ordre du parcours.
   ══════════════════════════════════════════════════════════════════ */

/* tablette : deux colonnes en zigzag doux, A toujours plus bas que B */
@media (max-width:1439px){
  .s3{padding:62px 0 54px}
  .scene{max-width:none;aspect-ratio:auto;
         display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         gap:clamp(2rem,3.6vw,3rem);align-items:start}
  .scene > *{position:relative;left:auto;top:auto;width:auto}
  .scene__path{display:none}
  .anchor--b::before{display:none}
  /* la montée reste lisible en grille : A démarre plus bas que B */
  .anchor--a{grid-column:1;grid-row:1;align-self:start;margin-top:46px}
  .anchor--b{grid-column:2;grid-row:1;justify-self:end;max-width:300px}
  .diag{grid-column:1 / -1;grid-row:2;max-width:400px}
  .diag__in{transform:none}
  .fan{grid-column:1 / -1;grid-row:3}
  .fan__list{height:196px;width:300px;max-width:100%;margin-inline:auto}
  .cov{width:118px}
  .cov--front{width:134px}
  .cov:nth-child(1){left:0;    top:28px}
  .cov:nth-child(2){left:62px; top:10px}
  .cov:nth-child(3){left:182px;top:10px}
  .cov:nth-child(4){left:90px; top:0}
  .tag--fan{padding-left:0;justify-content:center}
  .fan .sub{padding-left:0;margin-inline:auto;text-align:center;max-width:300px}
  .visio{grid-column:1;grid-row:4;max-width:420px}
  .spar{grid-column:2;grid-row:4;max-width:300px;align-self:center}
  .spar__in{transform:none}
  .sheet{grid-column:1 / -1;grid-row:5;max-width:380px}
  .sheet__page{transform:none;margin-top:18px}
}

/* mobile : un parcours vertical propre, dans l'ordre exact */
@media (max-width:767px){
  :root{--hinge2-h:56px}
  .s3br{display:none}
  .s3{padding:50px 0 52px}
  .scene{grid-template-columns:minmax(0,1fr);gap:2.1rem;padding-left:26px}

  /* ── Le rail vertical ──
     La courbe du desktop n'a aucun sens dans une colonne : on la remplace
     par une verticale stricte, un segment par arret. Chaque segment part du
     point de son bloc et descend jusqu'au suivant — la ligne est donc
     continue quelle que soit la hauteur des blocs, sans hauteur totale
     codee en dur. Point B ne porte pas de segment : il ferme le parcours. */
  .station{position:relative}
  .station::before{
    content:"";position:absolute;left:-19px;top:10px;
    width:1px;height:calc(100% + 2.4rem);
    background:rgba(196,212,226,.28);
  }
  .anchor--b::before{display:none}
  .station::after{
    content:"";position:absolute;left:-23px;top:5px;
    width:9px;height:9px;border-radius:50%;
    background:var(--s3-fond);border:1px solid rgba(196,212,226,.55);
  }
  .anchor--a::after{border-color:rgba(196,212,226,.4)}
  .anchor--b::after{
    background:var(--s3-sage);border-color:rgba(167,183,174,.9);border-width:1.5px;
  }
  /* au tap, le point de l'etape active s'allume comme sur desktop */
  .station.is-on::after{border-color:var(--s3-or);background:rgba(197,169,106,.28)}
  .anchor--b.is-on::after{background:var(--s3-or)}
  .anchor--a{grid-column:1;grid-row:1;align-self:start;margin-top:0}
  .diag{grid-column:1;grid-row:2;max-width:none}
  .fan{grid-column:1;grid-row:3}
  .visio{grid-column:1;grid-row:4;max-width:none}
  .spar{grid-column:1;grid-row:5;max-width:300px}
  .sheet{grid-column:1;grid-row:6;max-width:none}
  .anchor--b{grid-column:1;grid-row:7;justify-self:start;max-width:none}
  /* L'eventail etait cale a gauche et sous-dimensionne : sur mobile c'est
     le seul bloc franchement colore, il doit occuper la largeur et se lire
     comme un choix de composition, pas comme un reste. */
  .fan__list{height:188px;width:300px;max-width:100%;margin-inline:auto}
  .cov{width:118px}
  .cov--front{width:134px}
  .cov:nth-child(1){left:0;    top:28px}
  .cov:nth-child(2){left:62px; top:10px}
  .cov:nth-child(3){left:182px;top:10px}
  .cov:nth-child(4){left:90px; top:0}
  .tag--fan{justify-content:center}
  .fan .sub{margin-inline:auto;text-align:center;max-width:300px}
  .sheet__back,.sheet__mid{display:none}
  .sheet__page{margin-top:0}
}

@media (max-width:400px){
  .fan__list{height:172px;width:272px}
  .cov{width:106px}
  .cov--front{width:122px}
  .cov:nth-child(1){left:0}
  .cov:nth-child(2){left:56px}
  .cov:nth-child(3){left:166px}
  .cov:nth-child(4){left:82px}
}

@media (max-width:340px){
  .fan__list{height:158px;width:246px}
  .cov{width:96px}
  .cov--front{width:110px}
  .cov:nth-child(1){left:0}
  .cov:nth-child(2){left:50px}
  .cov:nth-child(3){left:150px}
  .cov:nth-child(4){left:74px}
}