/* ==========================================================================
   STUDIO RANEEM — PAGE « LE STUDIO »
   Chargée uniquement sur /qui-sommes-nous/. ~7 Ko.

   Tout est dessiné : pas une image, pas une requête réseau supplémentaire.
   Le plateau, les projecteurs, les faisceaux et la poussière sont des
   dégradés et des transformations — c'est ce qui permet d'avoir la page la
   plus animée du site sans rien coûter au chargement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LE PLATEAU — scène 3D
   La scène est en perspective réelle : chaque plan est posé à sa profondeur
   en translateZ, et le scroll fait AVANCER la caméra. Ce n'est donc pas une
   parallaxe simulée par des vitesses différentes, c'est de la vraie
   perspective — les plans lointains se déplacent moins que les proches
   parce que la géométrie le veut, pas parce qu'on l'a codé.
   -------------------------------------------------------------------------- */

/* Le plateau doit aller d'un bord à l'autre. Divi enferme tout module dans
   une ligne plafonnée à --sr-maxw et centrée : sans cette remise à plat, la
   scène s'affiche comme une boîte de 1480 px au milieu de l'écran — ce qui la
   rend illisible comme décor. Même correction que pour le hero de l'accueil,
   appliquée cette fois à la LARGEUR et non à la hauteur. */
.sr-section--plateau,
.sr-section--plateau > .et_pb_row,
.sr-section--plateau .et_pb_column,
.sr-section--plateau .et_pb_module,
.sr-section--plateau .et_pb_code,
.sr-section--plateau .et_pb_code_inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sr-plateau {
  position: relative;
  /* Toute la hauteur d'écran, sans plafond : à 92vh le hero laissait une
     bande vide sous lui. `svh` ensuite pour les navigateurs mobiles, dont la
     barre d'outils fausse la valeur de `vh`. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  perspective: 900px;
  perspective-origin: 50% 42%;
  background: #08090a;
}

.sr-plateau__scene {
  position: absolute; inset: 0; z-index: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.sr-plateau__scene > * {
  position: absolute; inset: -14%;
  display: block;
  transform-style: preserve-3d;
}

/* Le cyclorama vient MODELER la photo, pas la remplacer. Il était opaque :
   posé à -420 px, devant l'image à -520, il la recouvrait entièrement — la
   photo était bien chargée mais invisible. Il ne garde donc que ce qui sert
   le modelé : un assombrissement aux bords et une lueur sarcelle en haut. */
.sr-plateau__cyclo {
  background:
    radial-gradient(120% 86% at 50% 98%, transparent 0%, rgba(10,14,15,.24) 58%, rgba(8,9,10,.72) 92%),
    radial-gradient(60% 40% at 50% 6%, rgba(41,182,186,.16), transparent 72%);
}

/* Le sol : une grille en fuite, inclinée. C'est elle qui donne l'échelle. */
.sr-plateau__floor {
  top: 52%; bottom: -30%; left: -30%; right: -30%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 86px 86px;
  transform: rotateX(74deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}

/* La grille de projecteurs, au plafond. Même principe, inversé. */
.sr-plateau__truss {
  bottom: 62%; top: -30%; left: -20%; right: -20%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 120px 64px;
  transform: rotateX(-72deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 76%);
}

/* Trois faisceaux. Ils balaient très lentement, en décalé : à 19, 23 et
   29 secondes, les périodes ne se resynchronisent jamais à l'œil nu. */
.sr-plateau__beams i {
  position: absolute; top: -30%; height: 150%;
  width: clamp(180px, 22vw, 380px);
  background: linear-gradient(to bottom,
    rgba(41,182,186,.20) 0%, rgba(41,182,186,.07) 42%, transparent 82%);
  filter: blur(22px);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
}
.sr-plateau__beams i:nth-child(1) { left: 12%; animation: sr-beam 19s ease-in-out infinite; }
.sr-plateau__beams i:nth-child(2) { left: 46%; animation: sr-beam 23s ease-in-out infinite reverse; opacity: .8; }
.sr-plateau__beams i:nth-child(3) { left: 74%; animation: sr-beam 29s ease-in-out infinite; opacity: .55; }
@keyframes sr-beam {
  0%, 100% { transform: rotate(-7deg) scaleY(1); }
  50%      { transform: rotate(7deg)  scaleY(1.08); }
}

/* La poussière dans les faisceaux. C'est le détail qui fait « plateau »
   plutôt que « fond dégradé » : on ne la remarque pas, on la ressent. */
.sr-plateau__dust i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 6px rgba(41,182,186,.5);
  transform: scale(var(--s));
  animation: sr-dust var(--d) linear infinite;
  animation-delay: calc(var(--r) * -1);
  opacity: 0;
}
@keyframes sr-dust {
  0%   { opacity: 0;   transform: translate3d(0, 20px, 0) scale(var(--s)); }
  18%  { opacity: .75; }
  82%  { opacity: .5;  }
  100% { opacity: 0;   transform: translate3d(26px, -110px, 0) scale(var(--s)); }
}

/* Vignettage : referme le cadre et fait ressortir le texte. */
.sr-plateau__vignette {
  inset: 0;
  background:
    /* Voile bas : il protège la lisibilité du titre SANS assombrir le décor.
       C'est lui qui permet d'éclaircir franchement la photo au-dessus. */
    linear-gradient(to top, rgba(6,7,8,.94) 0%, rgba(6,7,8,.62) 22%, transparent 52%),
    radial-gradient(92% 82% at 50% 42%, transparent 46%, rgba(6,7,8,.58) 100%);
}

/* Le contenu, au premier plan. Même géométrie qu'une section Divi : 5 % de
   retrait puis une largeur plafonnée centrée — voir .sr-page-hero__in. */
.sr-plateau__in {
  position: relative; z-index: 3; width: 100%;
  padding: 0 5% clamp(70px, 9vw, 130px);
}
.sr-plateau__wrap { max-width: var(--sr-maxw); margin: 0 auto; }
.sr-plateau__wrap h1 { margin: 14px 0 0; }
.sr-plateau__wrap .sr-lead { margin: 22px 0 0; }

.sr-plateau__cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--sr-font-mono); font-size: 9.5px; letter-spacing: .24em;
  color: var(--sr-text-3-aa);
}
.sr-plateau__cue i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--sr-teal-glow), transparent);
  animation: sr-cue 2.4s ease-in-out infinite;
}
@keyframes sr-cue {
  0%, 100% { transform: scaleY(.35); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1;  transform-origin: top; }
}

/* --------------------------------------------------------------------------
   L'ATH DU VISEUR
   Posé sur toute la page, fixe. Il cadre la lecture comme un viseur cadre
   une prise — et il rappelle en permanence sur quel type de site on est.
   -------------------------------------------------------------------------- */

.sr-hud {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  font-family: var(--sr-font-mono); font-size: 9.5px; letter-spacing: .2em;
  color: rgba(255,255,255,.34);
}
.sr-hud__c {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid rgba(41,182,186,.5);
}
.sr-hud__c--tl { top: calc(var(--sr-header-h) + 16px); left: 16px;  border-right: 0; border-bottom: 0; }
.sr-hud__c--tr { top: calc(var(--sr-header-h) + 16px); right: 16px; border-left: 0;  border-bottom: 0; }
.sr-hud__c--bl { bottom: 16px; left: 16px;  border-right: 0; border-top: 0; }
.sr-hud__c--br { bottom: 16px; right: 16px; border-left: 0;  border-top: 0; }

.sr-hud__rec {
  position: absolute; top: calc(var(--sr-header-h) + 20px); left: 54px;
  display: flex; align-items: center; gap: 7px; color: var(--sr-teal-glow);
}
.sr-hud__rec i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: sr-pulseDot 1.6s ease-in-out infinite;
}
/* Le timecode et les réglages restent EN HAUT, à côté du témoin REC : posés
   en bas à gauche, ils tombaient exactement sur l'eyebrow de chaque section
   (« 02 · CE QU'ON DÉFEND ») et rendaient les deux illisibles. */
.sr-hud__tc {
  position: absolute; top: calc(var(--sr-header-h) + 20px); left: 116px;
  font-variant-numeric: tabular-nums;
}
.sr-hud__specs { position: absolute; top: calc(var(--sr-header-h) + 20px); right: 54px; }

@media (max-width: 900px) { .sr-hud { display: none; } }

/* --------------------------------------------------------------------------
   LA CHAÎNE DE FABRICATION
   Un rail vertical qu'un point lumineux parcourt. Chaque poste s'allume au
   passage — c'est le scroll qui joue le rôle du plan de travail.
   -------------------------------------------------------------------------- */

.sr-chaine { position: relative; padding-left: clamp(38px, 5vw, 68px); }

.sr-chaine__rail {
  position: absolute; left: clamp(11px, 1.6vw, 22px); top: 6px; bottom: 6px;
  width: 1px; background: var(--sr-line); overflow: hidden;
}
.sr-chaine__rail i {
  position: absolute; inset: 0;
  background: linear-gradient(var(--sr-teal), var(--sr-teal-glow));
  box-shadow: 0 0 14px rgba(41,182,186,.8);
  transform: scaleY(0); transform-origin: top center;
}

.sr-chaine ol { list-style: none; margin: 0; padding: 0; }
.sr-chaine li {
  position: relative;
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--sr-line);
  opacity: .34;
  transition: opacity .6s var(--sr-ease-expo);
}
.sr-chaine li:first-child { border-top: 0; }
.sr-chaine li.est-actif   { opacity: 1; }

/* Le point sur le rail, en face de chaque poste. */
.sr-chaine__pt {
  position: absolute; left: calc(-1 * clamp(38px, 5vw, 68px) + clamp(8px, 1.6vw, 19px));
  top: calc(clamp(22px, 2.8vw, 34px) + 10px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sr-line-strong);
  transition: background .5s, box-shadow .5s, transform .5s var(--sr-ease-expo);
}
.sr-chaine li.est-actif .sr-chaine__pt {
  background: var(--sr-teal-glow);
  box-shadow: 0 0 0 4px rgba(41,182,186,.16), 0 0 12px rgba(41,182,186,.8);
  transform: scale(1.25);
}

.sr-chaine__n {
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--sr-text-3-aa);
  transition: color .5s;
}
.sr-chaine li.est-actif .sr-chaine__n { color: var(--sr-teal-glow); }

.sr-chaine h3 { margin: 10px 0 8px; }
.sr-chaine p  { margin: 0; max-width: 62ch; font-size: 15px; color: var(--sr-text-2); }

/* --------------------------------------------------------------------------
   MISE AU POINT SUR LES CARTES DE VALEURS
   Elles arrivent floues et se font nettes — le geste d'un point qu'on fait.
   Le flou est coûteux : il ne porte que sur quatre éléments, une seule fois,
   et il est retiré dès la transition finie (voir studio.js).
   -------------------------------------------------------------------------- */

.sr-js .sr-studio-focus .sr-why__card .et_pb_blurb_content {
  filter: blur(9px);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: filter .9s var(--sr-ease-expo), opacity .7s ease,
              transform .9s var(--sr-ease-expo);
  transition-delay: var(--sr-fd, 0ms);
}
.sr-js .sr-studio-focus .sr-why__card.est-net .et_pb_blurb_content {
  filter: blur(0); opacity: 1; transform: none;
}

/* --------------------------------------------------------------------------
   MOUVEMENT RÉDUIT
   Tout ce qui bouge s'arrête. La page reste entièrement lisible : aucune
   information n'est portée par une animation.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sr-plateau__beams i,
  .sr-plateau__dust i,
  .sr-plateau__cue i,
  .sr-hud__rec i { animation: none; }
  .sr-plateau__dust { display: none; }
  .sr-plateau__scene { transform: none !important; }
  .sr-chaine li { opacity: 1; }
  .sr-chaine__rail i { transform: scaleY(1); }
  .sr-js .sr-studio-focus .sr-why__card .et_pb_blurb_content {
    filter: none; opacity: 1; transform: none;
  }
}

/* --------------------------------------------------------------------------
   LA PHOTO AU FOND DU PLATEAU
   Plan le plus profond de la scène. Désaturée et assombrie, elle apporte la
   texture que les dégradés ne savent pas produire — grain du sol, reflets,
   silhouettes. Les faisceaux et la poussière passent par-dessus : c'est la
   combinaison des deux qui rend le décor crédible plutôt que décoratif.
   -------------------------------------------------------------------------- */

.sr-plateau__photo { overflow: hidden; }
.sr-plateau__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.28) contrast(1.08) brightness(.94) saturate(1.04);
}
/* Teinte sarcelle par-dessus la photo : elle raccorde l'image à la palette
   du site, sinon on verrait une photo posée sur un fond qui n'est pas le sien. */
.sr-plateau__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,28,.14), rgba(6,7,8,.42));
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   LE PARC MATÉRIEL
   Une section qu'on REGARDE avant de la lire. Chaque poste a sa photo, qui
   arrive en noir et blanc et se colore au survol — le geste d'un plan qu'on
   valide au dérushage.
   -------------------------------------------------------------------------- */

.sr-parc {
  display: grid; gap: clamp(18px, 2.2vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.sr-parc__item { margin: 0; }
.sr-js .sr-parc__item { transition-delay: var(--sr-pd, 0ms); }

.sr-parc__media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border: 1px solid var(--sr-line); background: var(--sr-surface);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.sr-parc__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06) brightness(.82);
  transform: scale(1.02);
  transition: filter .7s var(--sr-ease-expo), transform .9s var(--sr-ease-expo);
}
.sr-parc__item:hover .sr-parc__media img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.07);
}

/* Balayage de scan au survol — le même vocabulaire que les vignettes de
   réalisation, pour que la page reste dans la langue du site. */
.sr-parc__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(41,182,186,.22) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .9s var(--sr-ease-expo);
}
.sr-parc__item:hover .sr-parc__scan { transform: translateX(110%); }

.sr-parc__n {
  position: absolute; left: 12px; top: 10px; z-index: 2;
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--sr-teal-glow);
  background: rgba(8,9,10,.6); padding: 4px 8px;
}
.sr-parc h3 { margin: 0 0 8px; }
.sr-parc p  { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sr-text-2); }

/* --------------------------------------------------------------------------
   PHOTO SEULE
   Le cadre déborde en hauteur : c'est cette réserve qui permet à l'image de
   glisser en parallaxe sans jamais découvrir le fond.
   -------------------------------------------------------------------------- */

.sr-photo { margin: 0; }
.sr-photo__frame {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 21/9; border: 1px solid var(--sr-line);
  background: var(--sr-surface);
}
.sr-photo__frame img {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%;
  object-fit: cover; display: block;
  filter: grayscale(.35) contrast(1.05);
  will-change: transform;
}
.sr-photo figcaption {
  margin-top: 14px;
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sr-text-3-aa);
}

@media (prefers-reduced-motion: reduce) {
  .sr-parc__media img,
  .sr-parc__scan { transition: none; transform: none; }
  .sr-photo__frame img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   LA CLAQUETTE
   Les bandes obliques sont un dégradé répété, pas une image : elles restent
   nettes à toutes les tailles et ne coûtent aucune requête.
   Le bras pivote depuis son coin gauche, comme le vrai objet. La courbe
   d'accélération est volontairement sèche — une claquette ne se pose pas,
   elle claque.
   -------------------------------------------------------------------------- */

.sr-clac {
  position: relative;
  /* Plafonnée et CENTRÉE dans sa colonne : poussée à droite, elle sortait
     visuellement de l'alignement du texte de gauche. */
  max-width: min(100%, 520px);
  margin-inline: auto;
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.55));
}

.sr-clac__arm {
  position: relative; z-index: 2;
  height: clamp(30px, 3.4vw, 44px);
  transform-origin: 6% 100%;
  transform: rotate(-26deg);
  transition: transform .42s cubic-bezier(.6,-0.28,.74,.05);
}
.sr-clac.est-clac .sr-clac__arm { transform: rotate(0deg); }

.sr-clac__arm span,
.sr-clac__top {
  display: block; height: 100%;
  background: repeating-linear-gradient(114deg,
    #ececec 0 clamp(18px, 2.1vw, 30px),
    #14181a clamp(18px, 2.1vw, 30px) clamp(36px, 4.2vw, 60px));
  border: 1px solid #0b0d0e;
}
.sr-clac__top { height: clamp(18px, 2vw, 26px); }

.sr-clac__body {
  position: relative; z-index: 1;
  background: linear-gradient(168deg, #191e20, #0e1113);
  border: 1px solid var(--sr-line-strong);
  margin-top: -1px;
}

.sr-clac dl {
  margin: 0; padding: clamp(20px, 2.6vw, 32px);
  display: grid; gap: clamp(12px, 1.4vw, 18px);
}
.sr-clac dl > div {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: clamp(10px, 1.2vw, 15px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sr-clac dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-clac dt {
  flex: 0 0 auto; min-width: 42%;
  font-family: var(--sr-font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sr-text-3-aa);
}
.sr-clac dd {
  margin: 0; flex: 1;
  font-family: var(--sr-font-display); font-weight: 500;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.15; color: var(--sr-text);
}
.sr-clac__note {
  margin: 0; padding: 0 clamp(20px, 2.6vw, 32px) clamp(18px, 2.2vw, 26px);
  font-family: var(--sr-font-mono); font-size: 9.5px; letter-spacing: .22em;
  color: var(--sr-teal-glow);
}

/* L'éclair du claquement : bref, une seule fois. */
.sr-clac__flash {
  position: absolute; inset: -6%; z-index: 3; pointer-events: none;
  background: radial-gradient(60% 50% at 20% 0%, rgba(255,255,255,.9), transparent 62%);
  opacity: 0;
}
.sr-clac.est-clac .sr-clac__flash { animation: sr-clac-flash .5s ease-out .34s 1; }
@keyframes sr-clac-flash {
  0%   { opacity: 0; }
  12%  { opacity: .85; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-clac__arm { transform: rotate(0deg); transition: none; }
  .sr-clac__flash { animation: none !important; }
}