/* ============================================================
   SAMATSA · section 6 — « L'écosystème Samatsa »   [v2]

   Ce qui change par rapport à la v1 :

   1. ORDRE DE VALEUR INVERSÉ. Les Masterclass passent devant les
      professeurs. La matière est ce à quoi le joueur accède ;
      les professeurs sont la preuve d'expertise qui la porte.
      Environ 60 % du poids visuel à la matière, 40 % aux visages.

   2. PLUS DE MUR BLANC. Le fond est le mist officiel #D9DEE6 :
      doux, légèrement bleuté, dans la continuité du navy des
      témoignages, et beaucoup moins éblouissant que l'ivoire de
      la v1 après cinq sections. Les professeurs sont posés sur une
      variation à peine plus dense du même mist, pas sur une
      seconde section : on doit sentir UNE section 6.

   3. RYTHME SERRÉ. La v1 respirait en 180 px ; ici tout est entre
      72 et 96 px. La page était trop longue, et l'espace vide ne
      rend rien premium.
   ============================================================ */

.s6{
  position:relative;
  background:var(--mist);
  color:var(--ink);
  padding:clamp(2.9rem,4.45vw,4.1rem) 0 0;
}
.wrap6{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ══════════ L'INTRO ══════════ */
/* UNE phrase, et c'est tout. Le titre-fleuve et son paragraphe
   explicatif ont été retirés : ils annonçaient la matière pendant
   ~150 px avant de la montrer, alors que la méthode a déjà été
   expliquée en sections 3 et 4. Ici, on affirme et on montre.

   Pas de mesure en `ch` sur ce bloc : elle se calculerait dans
   l'Inter Tight du parent et étranglerait la serif. */
.s6__head{max-width:none;margin-bottom:clamp(2rem,2.8vw,2.6rem)}
.s6__claim{
  margin:0;max-width:22ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,1.15rem + 2vw,2.75rem);
  line-height:1.1;letter-spacing:-.022em;
  color:var(--ink);
}

/* — en-tête d'une sous-partie — */
.s6__sub{margin-bottom:clamp(1.5rem,2vw,1.85rem);max-width:none}
.s6__sub-title{
  margin:0;max-width:26ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.05rem + 1.3vw,2.15rem);
  line-height:1.14;letter-spacing:-.02em;
}
.s6__sub-lede{margin:.75rem 0 0;max-width:58ch;font-size:.955rem;line-height:1.58;color:var(--ink-2)}

/* Le compteur de matière : deux lignes typographiques, pas deux
   tuiles de KPI. Merchant tabulaire, comme tous les nombres du
   site ; aucun aplat, aucune bordure, aucune icône. */
.s6__count{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.7rem;
  margin:.85rem 0 0;
}
/* Chaque nombre et son libellé forment UN bloc : sans ce groupe, le
   retour à la ligne en mobile séparait « ~10 » de « épisodes par
   Masterclass » et accolait le nombre au libellé précédent. */
.s6__count-i{display:inline-flex;align-items:baseline;gap:.5rem;font-size:.9rem;color:rgba(11,29,51,.66)}
.s6__count b{
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:1.42rem;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;
}
/* Chiffres tabulaires ET largeur minimale : sans les deux, la ligne
   tremble a chaque chiffre pendant le comptage (0 → 150 passe par
   une, deux puis trois positions). */
.s6__num{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}

/* ══════════ LE CARROUSEL — composant commun ══════════ */
/* Un seul objet pour les deux rails. Seules la largeur de carte et
   l'écart changent : ce ne sont pas les mêmes objets qu'on fait
   défiler. Le reste (flèches, glisser, barre, clavier) est partagé.
   Aucune dépendance : `overflow-x` + `scroll-snap` font le travail
   natif. Sans JS, les rails restent défilables au doigt. */
.carou{position:relative}
.carou__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(.9rem,1.4vw,1.15rem);
}
/* Aucun des deux rails n'a plus de libelle au-dessus : « Un apercu »
   et « Les intervenants » ne disaient rien que l'eyebrow juste avant
   ne dise deja. Les fleches sortent donc du flux et viennent se poser
   a droite du bloc de titre : la rangee ne coute plus 53 px de
   hauteur, et les cartes remontent d'autant. */
.carou__top{
  position:absolute;right:0;bottom:100%;
  margin:0 0 clamp(1rem,1.5vw,1.3rem);
  justify-content:flex-end;gap:0;
}
/* Micro-label d'interface : Inter Tight, pas le Merchant. Le Merchant
   est une display, taillee pour les nombres et les titres courts ; sur
   un libelle d'interface en petites capitales il se lit mal. La regle
   vaut pour tous les libelles UI de la section : seuls les NOMBRES
   restent en Merchant. */
.carou__hint{
  margin:0;
  font-family:var(--sans);font-weight:600;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--carou-hint,rgba(11,29,51,.58));
}
.carou__nav{display:flex;gap:.5rem;flex:none}
.carou__btn{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--carou-line,rgba(11,29,51,.18));
  color:var(--carou-arrow,var(--ink-2));
  background:var(--carou-btn-bg,rgba(255,255,255,.55));
  transition:background .3s,border-color .3s,color .3s,opacity .3s,transform .3s;
}
.carou__btn:hover:not(:disabled){
  background:var(--carou-btn-hov,rgba(255,255,255,.95));
  border-color:var(--carou-line-hov,rgba(11,29,51,.32));
  transform:translateY(-1px);
}
.carou__btn:disabled{opacity:.26;cursor:default}
.carou__btn svg{width:14px;height:14px}
.carou__btn:focus-visible{outline:2px solid var(--carou-focus,var(--steel));outline-offset:3px}

/* `overscroll-behavior-x:contain` évite que le geste horizontal
   remonte à la page et déclenche un retour arrière au trackpad. */
.carou__rail{
  display:flex;gap:var(--carou-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.carou__rail::-webkit-scrollbar{display:none}
.carou__rail:focus-visible{outline:2px solid var(--carou-focus,var(--steel));outline-offset:6px;border-radius:4px}
.carou__rail>li{flex:0 0 var(--carou-w);scroll-snap-align:start}

.carou.is-dragging .carou__rail{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none;user-select:none}
.carou.is-dragging .carou__rail img{pointer-events:none}

/* la barre de position : un filet, pas des pastilles.
   Largeur et décalage sont écrits par le JS, mesurés sur le rail. */
.carou__bar{
  position:relative;height:2px;margin-top:clamp(1rem,1.6vw,1.35rem);
  background:var(--carou-line,rgba(11,29,51,.14));border-radius:2px;overflow:hidden;
}
.carou__bar span{
  position:absolute;inset:0 auto 0 0;width:30%;
  background:var(--carou-fill,var(--steel));border-radius:2px;
  transition:transform .25s ease-out,width .25s ease-out;
}
@media (prefers-reduced-motion:reduce){
  .carou__rail{scroll-behavior:auto}
  .carou__bar span{transition:none}
}

/* ══════════ LES CARTES MASTERCLASS ══════════ */
/* La couverture domine, mais elle ne suffit pas : une image ne se
   lit pas, elle se regarde. Le titre est donc ÉCRIT sous elle, avec
   son auteur et son niveau. Trois lignes, environ 92 px de
   métadonnées, jamais une carte de 500 px. */
.mcs{--carou-w:24%;--carou-gap:1.5%}   /* ≈ 3,98 cartes visibles */
.mc__cov{
  aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:rgba(11,29,51,.06);
  box-shadow:0 12px 24px -20px rgba(11,29,51,.75);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
}
.mc:hover .mc__cov{transform:translateY(-4px);box-shadow:0 20px 32px -22px rgba(11,29,51,.8)}
.mc__cov img{width:100%;height:100%;object-fit:cover}
.mc__theme{
  margin:.75rem 0 0;
  font-family:var(--sans);font-weight:600;
  font-size:.645rem;letter-spacing:.13em;text-transform:uppercase;
  color:#2F4F73;
}
.mc__t{
  margin:.32rem 0 0;
  font-family:var(--sans);font-weight:500;
  font-size:.955rem;line-height:1.32;letter-spacing:-.008em;
  color:var(--ink);
  /* deux lignes maximum : au-delà, les cartes du rail cessent
     d'avoir la même hauteur et la ligne de niveau se désaligne */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.64em;
}
.mc__by{margin:.28rem 0 0;font-size:.85rem;line-height:1.35;font-weight:450;color:rgba(11,29,51,.8)}
/* Le niveau reste la quatrieme chose lue, mais il doit se lire SANS
   effort : il etait a 26 % d'encre sur un fond mist, autant dire
   absent. Inter Tight, chiffres tabulaires, 62 % d'encre. */
.mc__lvl{
  margin:.16rem 0 0;
  font-family:var(--sans);font-weight:500;font-feature-settings:"tnum";
  font-size:.78rem;letter-spacing:.005em;color:rgba(11,29,51,.62);
}

/* ══════════ SÉLECTION, ET LE LIEN VERS LA BIBLIOTHÈQUE ══════════ */
/* Une ligne sous le rail. Le texte et le lien partagent la même
   taille : ce qui distingue le lien, c'est son encre et son filet,
   pas son corps. Aucun bouton plein — il ouvre un catalogue, il ne
   doit pas peser autant qu'un CTA d'offre. */
.s6__more{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem 2rem;flex-wrap:wrap;
  margin:clamp(1.25rem,1.7vw,1.5rem) 0 0;
}
.s6__more-txt{font-size:.85rem;line-height:1.5;color:rgba(11,29,51,.6)}
.s6__more-link{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.85rem;font-weight:500;color:var(--steel);
  border-bottom:1px solid rgba(56,88,122,.3);
  transition:color .3s,border-color .3s;
}
.s6__more-link i{font-style:normal;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.s6__more-link:hover{color:var(--ink);border-color:rgba(11,29,51,.45)}
.s6__more-link:hover i{transform:translateX(4px)}
.s6__more-link:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

/* ══════════ LE MINI-LOOP · MASTERCLASS EN ACTION ══════════ */
/* Un aperçu, pas un lecteur. Il est volontairement PLUS PETIT que la
   vidéo des témoignages (900 px là-bas, 800 ici) : celle-là est un
   contenu qu'on regarde, celui-ci une preuve qu'on aperçoit. Aucune
   carte autour, aucune bordure, aucun bouton, et plus aucun label —
   la seule matière est l'image elle-même.

   Il ouvre désormais la section, juste sous le titre : on affirme
   une chose, on la prouve aussitôt, et seulement ensuite on parle
   du catalogue. */
.s6__loop{
  margin:0 0 clamp(3.6rem,5.2vw,4.8rem);
  max-width:800px;
}
/* Le cadre porte le ratio : la hauteur est donc connue avant que la
   vidéo ne charge, et rien ne se déplace au moment où elle arrive. */
.s6__loop-frame{
  position:relative;aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;
  background:rgba(11,29,51,.08);
  box-shadow:0 14px 30px -24px rgba(11,29,51,.7);
}
.s6__loop-v{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--navy);
}

/* ══════════ LA BANDE DES PROFESSEURS ══════════ */
/* Même section, même famille de couleur : une variation à peine
   plus dense et plus froide du mist. Aucune rupture dark/light —
   le but est de séparer deux sous-parties, pas d'ouvrir un chapitre.
   Le filet du haut fait le reste du travail. */
.s6__profs{
  margin-top:clamp(3.4rem,5vw,4.6rem);
  padding:clamp(2.6rem,3.8vw,3.4rem) 0 clamp(3rem,4vw,3.6rem);
  background:#CFD7E2;
  border-top:1px solid rgba(11,29,51,.07);
}
.profs{--carou-w:16%;--carou-gap:1.2%}   /* ≈ 5,9 profils visibles */
.prof__ph{
  aspect-ratio:4/5;border-radius:13px;overflow:hidden;
  background:rgba(11,29,51,.07);
}
/* Les portraits de la bibliothèque sont carrés et le visage est
   haut : 20 % remonte la fenêtre, sinon le 4:5 coupe le front.
   Aucun fichier n'est recadré, c'est le CSS qui cadre. */
.prof__ph img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.prof:hover .prof__ph img{transform:scale(1.04)}
.prof__n{margin:.6rem 0 0;font-weight:500;font-size:.875rem;line-height:1.28;color:var(--ink)}
.prof__q{
  margin:.16rem 0 0;
  font-family:var(--sans);font-weight:600;
  font-size:.655rem;letter-spacing:.11em;text-transform:uppercase;
  color:#2F4F73;
}
.prof__r{margin:.14rem 0 0;font-size:.79rem;line-height:1.3;color:rgba(11,29,51,.62)}

/* L'accès Masterclass seul a été retiré de cette section : placé
   sous les intervenants, il devenait le premier CTA commercial
   rencontré après les témoignages, et il poussait vers l'achat isolé
   de contenu plutôt que vers l'engagement. Ses règles partent avec
   lui — il vit en section 7, en second plan. */

/* ══════════ RÉVÉLATIONS ══════════ */
.rv6{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv6.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv6{opacity:1;transform:none;transition:none}}

/* ══════════ RESPONSIVE ══════════ */
/* Les largeurs sont en pourcentage du rail : le nombre de cartes
   visibles vaut (100 + écart) / (largeur + écart), et il ne tombe
   jamais sur un entier — c'est ce qui laisse toujours dépasser la
   carte suivante. */
@media (min-width:1600px){
  .mcs{--carou-w:21.3%;--carou-gap:1.4%}  /* ≈ 4,47 cartes */
  .profs{--carou-w:14%;--carou-gap:1.1%}  /* ≈ 6,7 profils */
}
@media (max-width:1023px){
  .mcs{--carou-w:38%;--carou-gap:2%}      /* ≈ 2,55 cartes */
  .profs{--carou-w:26%;--carou-gap:1.8%}  /* ≈ 3,65 profils */
}
@media (max-width:719px){
  .mcs{--carou-w:80%;--carou-gap:3%}      /* ≈ 1,24 carte */
  .profs{--carou-w:74%;--carou-gap:3%}    /* ≈ 1,34 profil */
  /* les flèches s'effacent là où le pouce fait mieux qu'elles ;
     la barre reste, comme repère de position */
  .carou__nav{display:none}
  .carou__top{margin-bottom:.8rem}
  .s6__profs{margin-top:clamp(2.4rem,7vw,3rem)}
  .s6__count{gap:.35rem 1.4rem}
  .s6__more{gap:.55rem;justify-content:flex-start}
  .s6__more-txt{flex:1 1 100%}
  .s6__loop{max-width:none}
  .s6__loop-frame{border-radius:14px}
  .prof__n{font-size:.92rem}
  .mc__t{font-size:1rem}
}