/* ============================================================
   SAMATSA · section 2 (v3) — « la boucle »

   Feuille ADDITIVE : hero.css n'est pas touché d'un octet.
   Elle ne décrit que la charnière et la section bleu nuit.
   ============================================================ */

:root{
  --s2-navy:#0B1D33;
  --s2-slate:#1F3656;
  --s2-steel:#38587A;
  --s2-mist:#D9DEE6;
  --s2-ivoire:#F3F1ED;
  --s2-sage:#A7B7AE;
  --s2-or:#C5A96A;

  --s2-wrap:1440px;
  --hinge-h:78px;     /* 3 unités de 26 px */
  --s2-cycle:11s;     /* un tour du point */
}

/* ── Le dégradé clair reste EXACTEMENT celui du hero verrouillé ──
   Allonger la page étirerait le dégradé du body et éclaircirait le
   bas du hero. On le fige sur sa hauteur d'origine (--s2-zh) et on
   l'arrête au bas de la charnière (--s2-zc). Mesures posées par JS. */
body{
  background-color:var(--s2-navy);
  background-image:
    linear-gradient(var(--s2-navy),var(--s2-navy)),
    linear-gradient(178deg,#FAFAF8 0%,#F5F3EE 58%,#F0EEE8 100%);
  background-size:
    100% calc(100% - var(--s2-zc,829px)),
    100% var(--s2-zh,900px);
  background-position:0 var(--s2-zc,829px),0 0;
  background-repeat:no-repeat,no-repeat;
}

.rv2{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)}
.rv2.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv2{opacity:1;transform:none;transition:none}}

/* ══════════ LA CHARNIÈRE ══════════
   Le dégradé porte la frontière droite sur toute la largeur ; le SVG,
   centré et jamais répété, ne dépose que les fragments de damier. */
.hinge{
  position:relative;z-index:1;
  height:var(--hinge-h);
  margin-bottom:-1px;
  /* la bande est entièrement bleu nuit : la séparation est son arête haute,
     que les cases ivoire de la première rangée viennent denteler */
  background-image:url("../img/charniere-lg.svg"),
                   linear-gradient(var(--s2-navy),var(--s2-navy));
  background-repeat:no-repeat,no-repeat;
  background-position:center bottom,center bottom;
  background-size:auto 100%,100% 100%;
}

/* ══════════ LA SECTION ══════════ */
.s2{
  position:relative;
  background:var(--s2-navy);
  color:var(--s2-ivoire);
  padding:72px 0 96px;
  overflow:hidden;
}
.s2__field{position:absolute;inset:0;pointer-events:none}
.s2__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:50px 50px;             /* deux unités de la charnière */
  -webkit-mask-image:radial-gradient(120% 92% at 42% 46%,#000 8%,transparent 80%);
  mask-image:radial-gradient(120% 92% at 42% 46%,#000 8%,transparent 80%);
}

.wrap2{width:100%;max-width:var(--s2-wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Le titre tient sa propre rangée ; la boucle et la vidéo se partagent la
   suivante. La vidéo commence donc juste sous le titre, et descend avec
   la boucle : c'est la diagonale demandée, sans symétrie. */
.s2__in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  column-gap:80px;
  row-gap:34px;
}
@media (min-width:1280px){.s2__in{row-gap:52px}}
/* `.s2__in` est une grille a positions explicites : le label ajoute
   une rangee, il ne peut donc pas simplement precede le titre dans le
   flux — sans placement, l'auto-flow l'aurait superpose au titre plutot
   que de le pousser. Toutes les rangees decalees de 1, la composition
   (colonnes, alignements) reste identique. */
.s2__in > .eyebrow{grid-column:1 / -1;grid-row:1}
.s2__title{grid-column:1 / -1;grid-row:2}
.orbit{grid-column:1;grid-row:3;justify-self:center}
.film{grid-column:2;grid-row:3;align-self:start;margin-top:64px}

/* ── le titre ──────────────────────────────────────────────────
   Sous 1280 px il reste sur trois lignes (les <br> sont actifs).
   À partir de 1280 px les retours sont neutralisés et la phrase
   devient une seule grande ligne horizontale, qui prend toute la
   largeur de la section. */
.s2__title{
  /* la nappe calme de la boucle est un ::before positionné : sans ce
     z-index elle passerait par-dessus la moitié gauche du titre et
     l'assombrirait. */
  position:relative;z-index:1;
  margin:0;max-width:17ch;
  font-size:clamp(2.6rem,1.35rem + 3.2vw,4.35rem);
  line-height:1.0;letter-spacing:-.024em;
  color:var(--s2-ivoire);
}
@media (min-width:1280px){
  .s2__title{
    max-width:none;white-space:nowrap;text-align:center;
    /* légèrement allégé par rapport à la version précédente : la ligne
       est ainsi centrée avec de l'air des deux côtés, au lieu de buter
       à droite. Le plafond reste calé sur la largeur utile du conteneur. */
    font-size:clamp(3.6rem,.95rem + 3.3vw,4.6rem);
    letter-spacing:-.03em;line-height:1.06;
  }
  .s2__title .s2br{display:none}
}
/* au-delà de 1600 px, le conteneur s'élargit pour que la grande ligne
   garde de l'air de chaque côté */
@media (min-width:1600px){:root{--s2-wrap:1560px}}
/* Soulignement repris tel quel de la section 2 v1, lui-même repris du hero :
   même SVG, posé derrière les lettres, plus discret ici. La réserve autour
   des descendantes est retournée en bleu nuit. */
.accent--s2 em{
  color:var(--s2-sage);
  text-shadow:0 0 3px var(--s2-navy),0 0 3px var(--s2-navy),0 0 5px var(--s2-navy);
}
.accent--s2 .swash{opacity:.5;bottom:-.115em;width:100%;left:0}
.rv2.in .swash{clip-path:inset(0 -4% -40% 0);transition:clip-path 1.15s cubic-bezier(.32,.86,.32,1) .55s}
@media (prefers-reduced-motion:reduce){.rv2.in .swash{clip-path:none;transition:none}}

/* ══════════ LA BOUCLE ══════════ */
.orbit{width:100%}
.orbit__stage{
  position:relative;width:100%;aspect-ratio:1;max-width:500px;
  margin-inline:auto;
}
/* ── zone calme ────────────────────────────────────────────────
   Le quadrillage de la section reste partout, sauf derrière la boucle :
   une nappe elliptique de la MÊME couleur que le fond le recouvre, pleine
   au centre puis diluée jusqu'à zéro. Comme c'est exactement `--s2-navy`,
   rien n'apparaît — le quadrillage s'efface simplement, sans bord, sans
   rectangle, sans masque. Une nappe ardoise très diluée par-dessus rend le
   centre modelé plutôt que plat. Posée avant l'anneau dans l'ordre de
   peinture, elle passe donc sous le tracé, les nœuds et le message.      */
.orbit__stage::before{
  content:"";position:absolute;left:50%;top:50%;
  width:170%;height:170%;transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(31,54,86,.30) 0%,rgba(31,54,86,.12) 40%,transparent 64%),
    radial-gradient(ellipse at 50% 50%,
      var(--s2-navy) 0%,var(--s2-navy) 34%,
      rgba(11,29,51,.92) 46%,rgba(11,29,51,.60) 60%,
      rgba(11,29,51,.26) 75%,rgba(11,29,51,0) 90%);
}

.orbit__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring__ghost{fill:none;stroke:rgba(217,222,230,.05);stroke-width:1}
.ring__track{fill:none;stroke:rgba(217,222,230,.20);stroke-width:1}

/* Un seul point parcourt l'anneau. Aucun segment, aucune traînée. */
.ring__spin{transform-origin:50% 50%;animation:s2spin var(--s2-cycle) linear infinite}
.ring__pt{fill:#F2EEE2;filter:drop-shadow(0 0 5px rgba(226,214,181,.55))}
@keyframes s2spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring__spin{animation:none}}

/* le message, seul au centre */
.orbit__msg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(56%,330px);margin:0;text-align:center;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,1rem + 1.3vw,2.2rem);line-height:1.16;letter-spacing:-.018em;
  color:var(--s2-ivoire);
}
.orbit__msg em{font-style:italic;color:var(--s2-sage)}

/* ── six nœuds ronds, six liaisons, six libellés À L'EXTÉRIEUR ── */
.orbit__nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.onode{position:absolute;left:var(--x);top:var(--y);width:0;height:0}

.onode__dot{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--s2-navy);
  border:1px solid rgba(217,222,230,.6);
  animation:s2node var(--s2-cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--s2-cycle) / 6);
}
/* le nœud s'éclaire quelques centaines de ms au passage du point */
@keyframes s2node{
  0%,3%   {border-color:rgba(232,222,196,.95);background:rgba(197,169,106,.35)}
  11%,100%{border-color:rgba(217,222,230,.6);background:var(--s2-navy)}
}
@media (prefers-reduced-motion:reduce){.onode__dot{animation:none}}

/* la liaison part du nœud vers l'extérieur, dans l'axe du rayon */
.onode__tie{
  position:absolute;left:0;top:0;width:1px;height:14px;
  transform-origin:50% 0;
  background:linear-gradient(rgba(217,222,230,.45),rgba(217,222,230,0));
}
.onode--haut   .onode__tie{transform:translate(-50%,-100%) rotate(180deg) translateY(4px)}
.onode--bas    .onode__tie{transform:translate(-50%,4px)}
.onode--droite .onode__tie{transform:translate(-50%,0) rotate(-90deg) translateY(-4px)}
.onode--gauche .onode__tie{transform:translate(-50%,0) rotate(90deg) translateY(-4px)}

.onode__lb{
  position:absolute;left:0;top:0;
  font-size:clamp(.82rem,.74rem + .16vw,.925rem);line-height:1.28;
  color:rgba(243,241,237,.88);
}
.onode--haut .onode__lb,.onode--bas .onode__lb{white-space:nowrap;left:50%}
.onode--haut .onode__lb{transform:translate(-50%,calc(-100% - 20px))}
.onode--bas  .onode__lb{transform:translate(-50%,20px)}
/* de flanc, les libellés passent sur deux lignes : ils restent près de
   l'anneau au lieu d'étirer le diagramme */
.onode--droite .onode__lb,.onode--gauche .onode__lb{width:86px}
.onode--droite .onode__lb{transform:translate(20px,-50%)}
.onode--gauche .onode__lb{transform:translate(calc(-100% - 20px),-50%);text-align:right}

/* l'unique accent or de la section */
.onode--or .onode__lb{color:rgba(214,192,148,.95)}

/* ══════════ LA VIDÉO ══════════
   Lecteur éditorial : la miniature occupe tout le cadre, un voile part du
   bas-gauche — la zone d'échiquier vide de l'image — et y accueille le
   bouton play, aligné sous le titre gravé dans la miniature. Le triangle
   dit la vidéo ; la durée se lit dans le même bloc, jamais deux fois. */
.film{margin-inline:0;margin-bottom:0;width:100%;max-width:700px}

.film__stage{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:22px;
  background:linear-gradient(148deg,#1E4269 0%,#173352 48%,#0E2138 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 38px 74px -38px rgba(0,0,0,.78);
  transition:border-color .5s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1);
}
.film__stage:has(.film__frame:hover),
.film__stage:has(.film__frame:focus-visible){
  border-color:rgba(255,255,255,.30);transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 46px 84px -38px rgba(0,0,0,.82);
}

.film__frame{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;color:inherit;font:inherit;
  text-align:left;overflow:hidden;
}
.film__frame:focus{outline:none}
.film__frame:focus-visible{outline:2px solid var(--s2-or);outline-offset:-4px;border-radius:22px}

/* Miniature diagnostic : cadrée plein cadre, légèrement déportée vers le
   visage pour que le rognage mobile ne coupe jamais le regard. */
.film__poster{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:58% 42%;
  transform:scale(1.001);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.film__frame:hover .film__poster{transform:scale(1.022)}

/* Le voile : sombre au bas-gauche, nul sur le visage. */
.film__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(6,17,31,.80) 0%,rgba(6,17,31,.34) 26%,rgba(6,17,31,0) 54%),
    linear-gradient(to right,rgba(6,17,31,.44) 0%,rgba(6,17,31,0) 46%);
  opacity:.94;transition:opacity .5s;
}
.film__frame:hover .film__scrim{opacity:1}

/* Le bloc de lecture : bouton + durée, un seul objet. */
.film__cta{
  /* aligné sur le bord gauche du titre gravé dans la miniature (7,3 %) */
  position:absolute;left:7.3%;bottom:clamp(14px,7%,28px);
  display:flex;align-items:center;gap:clamp(10px,1.5vw,16px);
}
.film__btn{
  position:relative;display:block;flex:none;
  width:clamp(46px,9%,64px);height:auto;aspect-ratio:1;
}
.film__btn svg{width:100%;height:100%;display:block;overflow:visible}

.play__halo{
  fill:none;stroke:var(--s2-ivoire);stroke-width:1;
  opacity:0;transform-origin:32px 32px;transform:scale(.88);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.play__ring{
  fill:rgba(9,24,42,.46);stroke:rgba(243,241,237,.72);stroke-width:1.2;
  transition:fill .45s ease,stroke .45s ease;
}
.play__tri{fill:var(--s2-ivoire);transition:fill .45s ease}

.film__frame:hover .play__ring,
.film__frame:focus-visible .play__ring{fill:var(--s2-ivoire);stroke:var(--s2-ivoire)}
.film__frame:hover .play__tri,
.film__frame:focus-visible .play__tri{fill:#0B1D33}
.film__frame:hover .play__halo,
.film__frame:focus-visible .play__halo{opacity:.34;transform:scale(1.14)}
.film__frame:active .film__btn{transform:scale(.97)}
.film__btn{transition:transform .3s cubic-bezier(.2,.8,.2,1)}

.film__label{display:flex;flex-direction:column;gap:.22em;min-width:0}
.film__lead{
  font-size:clamp(.86rem,.78rem + .18vw,.98rem);line-height:1.15;
  color:var(--s2-ivoire);letter-spacing:-.005em;
  text-shadow:0 1px 10px rgba(6,17,31,.55);
}
.film__time{
  font-size:clamp(.7rem,.66rem + .1vw,.775rem);letter-spacing:.09em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:rgba(243,241,237,.62);
  text-shadow:0 1px 10px rgba(6,17,31,.55);
}
.film__frame:hover .film__time{color:rgba(243,241,237,.82)}

/* Lecture : la vidéo prend exactement la place du cadre, sans saut. */
.film__video{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;background:#0B1D33;border:0;
}
.film--playing .film__stage{transform:none}
.film--playing .film__frame{opacity:0;pointer-events:none;transition:opacity .32s ease}

@media (prefers-reduced-motion:reduce){
  .film__stage,.film__poster,.film__btn,.play__halo,.play__ring,.play__tri,.film__scrim{transition:none}
  .film__frame:hover .film__poster{transform:none}
  .film__stage:has(.film__frame:hover){transform:none}
}

/* Tactile : pas d'affordance cachée derrière le survol. */
@media (hover:none){
  .play__ring{fill:rgba(9,24,42,.58);stroke:var(--s2-ivoire)}
  .film__time{color:rgba(243,241,237,.74)}
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1279px){
  .s2__in{column-gap:52px;row-gap:30px}
  .orbit__stage{max-width:460px}
  .onode--droite .onode__lb,.onode--gauche .onode__lb{width:80px}
}

@media (max-width:1023px){
  .s2__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(2.2rem,5vw,3rem)}
  .s2__in > .eyebrow{grid-row:1}
  .s2__title{grid-column:1;grid-row:2;max-width:15ch}
  .orbit{grid-column:1;grid-row:3}
  .film{grid-column:1;grid-row:4;margin-inline:auto;align-self:auto;margin-top:0}
  .orbit__stage{max-width:min(88vw,500px)}
}

@media (max-width:767px){
  :root{--hinge-h:48px}
  .hinge{background-image:url("../img/charniere-sm.svg"),
                          linear-gradient(var(--s2-navy),var(--s2-navy))}
  .s2{padding:52px 0 68px}
  .s2__title{max-width:none;font-size:clamp(2.72rem,1.1rem + 4.4vw,3.05rem)}
  .orbit__stage{max-width:90vw}
  .onode__lb{font-size:.76rem}
  .onode--droite .onode__lb,.onode--gauche .onode__lb{width:74px}
  .onode--droite .onode__lb{transform:translate(14px,-50%)}
  .onode--gauche .onode__lb{transform:translate(calc(-100% - 14px),-50%)}
  .onode--haut .onode__lb{transform:translate(-50%,calc(-100% - 14px))}
  .onode--bas  .onode__lb{transform:translate(-50%,14px)}
  .onode__tie{height:10px}
  .orbit__msg{width:min(60%,220px);font-size:1.2rem}
}

@media (max-width:430px){
  .onode__lb{font-size:.695rem}
  .onode--droite .onode__lb,.onode--gauche .onode__lb{width:64px}
  .orbit__msg{width:min(58%,180px);font-size:1.06rem}
}