/* ============================================================
   SAMATSA · section 5 — « Les témoignages »

   Feuille ADDITIVE : elle n'introduit que des sélecteurs préfixés
   `s5` et n'écrit rien qui puisse remonter dans les sections 1 à 4.
   Le label de section, lui, ne s'invente pas ici : il réutilise le
   composant partagé `.eyebrow` de hero.css dans sa variante
   `--gold`, exactement comme les sections 2, 3 et 4.

   ── LE FOND, ET POURQUOI IL CHANGE DE VALEUR ──
   La section 4 se termine sur son aplat le plus profond, #071426.
   Cette section-ci ne le prolonge pas : elle remonte sur #132B49
   — le navy-2 de la palette officielle, déjà employé section 2,
   3 et 4, et qui tombe précisément dans la plage demandée entre
   #0B1D33 et #1F3656. Le bleu s'éclaircit d'un cran : on sort de
   la démonstration pour entrer dans la parole.

   Le raccord ne se fait ni par une animation, ni par un
   séparateur : simplement, les 200 premiers pixels de la section
   sont un dégradé de #071426 vers #132B49. Deux aplats, une
   montée courte entre les deux, rien d'autre. Aucun texte n'entre
   dans cette zone.

   ── LA COMPOSITION ──
   Quatre blocs, quatre traitements différents, une seule grammaire :
     · la vidéo — le pôle lourd, en haut à gauche ;
     · Laurent — citation libre, aucune boîte, à droite ;
     · Benjamin — carte, avec sa donnée chiffrée attachée dessous ;
     · Roda — filet vertical, sans fond, décalé à droite.
   Aucune grille uniforme de cartes, aucune étoile, aucune note.
   C'est la variété des traitements qui empêche la section de
   ressembler à un mur d'avis.
   ============================================================ */

:root{
  /* le sol de la section */
  --s5-fond:#132B49;
  --s5-fond-haut:#071426;      /* l'aplat sur lequel finit la section 4 */
  --s5-navy:#0B1D33;
  --s5-slate:#1F3656;

  /* encres claires — l'ivoire du site en quatre intensités */
  --s5-ink:#F3F1ED;
  --s5-ink-2:rgba(243,241,237,.76);
  --s5-ink-3:rgba(243,241,237,.56);

  --s5-or:#C5A96A;
  --s5-sauge:#A7B7AE;

  /* surfaces : plus discrètes que sur l'ancien fond, le sol étant
     désormais plus clair il faut moins de blanc pour décoller */
  --s5-surface:rgba(243,241,237,.05);
  --s5-bord:rgba(217,222,230,.16);
  --s5-bord-2:rgba(217,222,230,.30);

  --s5-wrap:1240px;
}

/* ══════════ LA SECTION ══════════ */
.s5{
  position:relative;
  color:var(--s5-ink);
  /* Le raccord tient dans cette seule déclaration : montée de
     l'aplat de la section 4 vers celui-ci sur les 200 premiers
     pixels, puis aplat franc jusqu'en bas. */
  background:
    linear-gradient(180deg,
      var(--s5-fond-haut) 0,
      var(--s5-fond) clamp(120px,17vh,220px),
      var(--s5-fond) 100%);
  padding:clamp(5.4rem,8vw,9rem) 0 0;
  isolation:isolate;
}

.wrap5{
  position:relative;z-index:1;width:100%;
  max-width:var(--s5-wrap);margin-inline:auto;padding-inline:var(--pad);
}

/* — le décor : deux nappes très basses et la trame de 52 px reprise
     des sections 3 et 4. Le tout est masqué à zéro sur la couture
     pour ne pas dessiner de ligne à l'endroit précis où l'on veut
     qu'il n'y en ait aucune. — */
.s5__field{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(140px,20vh,300px));
  mask-image:linear-gradient(180deg,transparent 0,#000 clamp(140px,20vh,300px));
}
.s5__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(180deg,#000,#000 56%,transparent 82%);
  mask-image:linear-gradient(180deg,#000,#000 56%,transparent 82%);
}
/* nappe chaude, haut à droite : elle accompagne le titre sans
   l'éclairer par l'arrière */
.s5__lumiere{
  position:absolute;left:50%;top:-10%;
  width:min(1400px,135vw);aspect-ratio:1.6;
  transform:translateX(-32%);
  background:radial-gradient(closest-side,
    rgba(197,169,106,.085) 0%,
    rgba(197,169,106,.04) 44%,
    rgba(197,169,106,0) 72%);
}
/* nappe froide, bas à gauche : elle empêche l'aplat de paraître plat
   sur toute la hauteur de la section */
.s5__lueur2{
  position:absolute;left:-18%;bottom:18%;
  width:min(1050px,105vw);aspect-ratio:1.35;
  background:radial-gradient(closest-side,
    rgba(31,54,86,.55) 0%,
    rgba(31,54,86,.18) 48%,
    rgba(31,54,86,0) 74%);
}

/* — révélations : même grammaire que .rv4 (1 s, même courbe) — */
.rv5{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)}
.rv5.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv5{opacity:1;transform:none;transition:none}}

/* ══════════ L'INTRO ══════════ */
/* Surtout pas de max-width en `ch` sur l'en-tête : la mesure serait
   calculée dans la fonte du conteneur (Inter Tight, 16 px) et
   étranglerait le grand titre serif. */
.s5__head{max-width:none}
.s5__title{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.15rem,1.2rem + 2.6vw,3.5rem);
  line-height:1.07;letter-spacing:-.024em;
  color:var(--s5-ink);
  max-width:19ch;
}

/* ══════════ LA COMPOSITION ══════════
   Deux blocs, et rien entre les deux. C'est tout le propos de cette
   passe : la vidéo est une chose, les témoignages écrits en sont une
   autre, et la mise en page doit le dire avant qu'on ait lu un mot.

   L'ancienne composition posait une citation à droite de la vidéo.
   Elle se lisait comme une légende du film — un extrait de ce qu'on
   allait entendre — alors que c'était un témoignage indépendant. Deux
   autres citations flottaient en dessous, à des tailles et dans des
   cadres différents : la section se lisait comme une page de magazine
   au lieu d'un ensemble de preuves. Tout est revenu à plat.        */

/* ── Bloc 1 · la vidéo, seule ──
   Centrée et bornée à 900 px : à 1136 px de large (la colonne pleine)
   la vignette ferait 639 px de haut et écraserait tout ce qui suit ;
   à 900 elle en fait 506, assez pour être regardée sans devenir le
   seul objet de la section. Rien ne vient se poser à côté d'elle. */
.s5__video-zone{
  margin-top:clamp(2.6rem,4.5vw,4rem);
  max-width:900px;
  margin-inline:auto;
}

/* ── Bloc 2 · les témoignages écrits ──
   Trois colonnes égales, cartes de même largeur et de même hauteur
   (`stretch` par défaut sur une grille), même structure interne.
   Aucune position explicite : ajouter ou retirer une carte ne
   demande aucune ligne de CSS.                                    */
.s5__cartes{
  list-style:none;padding:0;
  margin:clamp(3.4rem,6vw,5.4rem) 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,1.8vw,1.6rem);
}

/* ══════════ LA VIDÉO ══════════ */
.s5-video{margin:0}
.s5-video__frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:var(--s5-navy);
  /* Aucun contour : la miniature est une image composee, un liseré
     clair par-dessus se lirait comme un cadre rapporté. Il ne reste
     qu'une ombre portee tres douce pour la profondeur. */
  box-shadow:0 34px 70px -30px rgba(0,0,0,.68);
  transition:box-shadow 520ms;
  /* toute la vignette lance la video, pas seulement le bouton */
  cursor:pointer;
}
.s5-video:hover .s5-video__frame{box-shadow:0 38px 80px -30px rgba(0,0,0,.76)}
/* une fois la video en place, plus rien a cliquer sur le cadre */
.s5-video.is-playing .s5-video__frame{cursor:default}

/* ── LA MINIATURE ──
   L'image livrée est affichée telle quelle : aucun filtre, aucune
   correction, aucune mise a l'echelle au repos — `scale(1)` et non
   `1.02`, sans quoi on rognerait le cadrage voulu par le montage.
   Le seul mouvement est un rapprochement de 2 % au survol, sur
   desktop, purement facultatif.

   La plaque peinte et le voile de lecture qui servaient d'attente
   n'ont plus d'objet : ils ont ete retires avec le HTML qui les
   portait. Une miniature composee n'a besoin ni de l'une ni de
   l'autre.                                                        */
.s5-video__poster{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);
  transition:transform 900ms cubic-bezier(.2,.7,.2,1);
}
.s5-video:hover .s5-video__poster{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){
  .s5-video__poster,.s5-video:hover .s5-video__poster{transform:none;transition:none}
}

/* le bouton de lecture — anneau clair, triangle ivoire ; au survol il
   bascule en champagne plein. Aucune pulsation, aucune fausse
   interface : un cercle et un triangle. */
.s5-video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,5.6vw,86px);aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(243,241,237,.58);
  background:rgba(243,241,237,.14);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  color:var(--s5-ink);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.6);
  transition:background 380ms,border-color 380ms,transform 380ms cubic-bezier(.22,1,.36,1),color 380ms;
}
.s5-video__play svg{width:26%;height:auto;display:block;margin-left:8%}
.s5-video__play:hover,
.s5-video__play:focus-visible{
  background:var(--s5-or);border-color:var(--s5-or);color:var(--s5-navy);
  transform:translate(-50%,-50%) scale(1.06);
}
/* tant qu'aucune source n'est branchée, le bouton garde son aspect —
   c'est un emplacement, pas un bouton cassé — mais il n'annonce plus
   une action qu'il ne peut pas rendre */
/* Cible tactile : 64 px au minimum, au-dessus des 44 px recommandes,
   a toutes les largeurs — la valeur basse du clamp est deja suffisante. */
@media (prefers-reduced-motion:reduce){
  .s5-video__play{transition:none}
}

/* le badge de durée : en bas à droite, la seule information posée sur
   la miniature. L'ancienne étiquette « Témoignage vidéo » a disparu —
   le mot TÉMOIGNAGES est déjà dans l'image, l'écrire deux fois serait
   du texte de trop. Chiffres tabulaires, encre ivoire, aucun accent :
   le badge doit se lire sans jamais disputer la vedette a l'image. */
.s5-video__duree{
  position:absolute;right:.85rem;bottom:.85rem;
  font-family:var(--merch);font-weight:500;
  font-feature-settings:"tnum";
  font-size:.68rem;letter-spacing:.06em;
  padding:.34rem .62rem;border-radius:8px;
  background:rgba(7,20,38,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:rgba(243,241,237,.82);
  pointer-events:none;
}
/* elle s'efface des que la video prend la place */
.s5-video.is-playing .s5-video__duree{display:none}

/* la légende : une seule ligne sous le cadre, sur le bleu */
.s5-video__cap{
  margin:1.05rem 0 0;
  font-size:.9rem;line-height:1.5;color:var(--s5-ink-3);
  font-feature-settings:"tnum";
}
.s5-video__cap b{font-weight:500;color:rgba(243,241,237,.88)}

/* ── LA CARTE ──
   Une seule règle pour les trois. Même fond, même bord, même rayon,
   même hiérarchie : verbatim, filet, médaillon d'initiales, nom,
   ligne secondaire. Rien de mis en scène, rien de surdimensionné.
   `flex-direction:column` + `margin-top:auto` sur le pied : les pieds
   s'alignent d'une carte à l'autre même quand les citations n'ont pas
   la même longueur.                                               */
.s5-carte{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.2vw,2rem);
  border-radius:18px;
  border:1px solid var(--s5-bord);
  background:var(--s5-surface);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:border-color 460ms,background 460ms,transform 460ms cubic-bezier(.22,1,.36,1);
}
.s5-carte:hover{
  transform:translateY(-3px);
  border-color:var(--s5-bord-2);
  background:rgba(243,241,237,.075);
}
@media (prefers-reduced-motion:reduce){
  .s5-carte,.s5-carte:hover{transform:none;transition:none}
}

/* le verbatim : serif, guillemets français, mesure courte. Un seul
   corps pour les trois — c'est ce qui fait la rangée homogène. */
.s5-carte__q{
  /* La marge basse est le MINIMUM entre la citation et le filet ; le
     pied, lui, se cale en bas de carte (`margin-top:auto`). Les trois
     citations n'ont pas la meme longueur : sans cela les medaillons se
     retrouvaient a trois hauteurs differentes dans une rangee de
     cartes pourtant identiques. */
  margin:0 0 clamp(1.4rem,2.2vw,1.9rem);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.06rem,.97rem + .3vw,1.24rem);
  line-height:1.42;letter-spacing:-.008em;
  color:rgba(243,241,237,.94);
  text-wrap:pretty;
}

/* le pied : filet fin, médaillon, nom, ligne secondaire */
.s5-carte__pied{
  display:flex;align-items:center;gap:.8rem;
  margin-top:auto;
  padding-top:1.05rem;
  border-top:1px solid rgba(217,222,230,.13);
}
/* Médaillon d'initiales, jamais de portrait : on ne fabrique pas de
   visage. Le jour où une vraie photo existe, elle prend la même
   boîte de 38 px. */
.s5-carte__mono{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(197,169,106,.42);
  background:rgba(197,169,106,.09);
  font-family:var(--merch);font-weight:500;font-size:.78rem;letter-spacing:.06em;
  color:var(--s5-or);
}
.s5-carte__who{margin:0;font-size:.82rem;line-height:1.45;color:var(--s5-ink-3)}
.s5-carte__who b{
  display:block;font-weight:500;font-size:.92rem;letter-spacing:.005em;
  color:rgba(243,241,237,.92);
}
/* le contexte, en sauge : le micro-accent de la section */
.s5-carte__who span{color:var(--s5-sauge)}

/* ══════════ LA SORTIE ══════════
   SEULE modification apportée à la section 5 dans cette variante,
   et c'est celle qui supprime le grand vide.

   Ce qu'elle était : 100 px de navy vide (`margin-top` à 7vw) PUIS
   288 px de dégradé à sept arrêts (`height` à 20vw) qui passait par
   un gris et une brume sable avant d'atteindre l'ivoire. Presque
   400 px sans un mot, dont un long fondu clair qui éblouissait à la
   sortie d'une section sombre. Personne n'avait posé de spacer : la
   cause était dans ces deux valeurs, et nulle part ailleurs.

   Ce qu'elle est : une courte réserve de navy plein, fermée par un
   filet d'un pixel. Plus aucune transition chromatique — le navy
   s'arrête, le mist commence, une ligne marque la couture. Pas de
   gris intermédiaire, pas de halo, pas de flou, et aucune marge
   négative pour masquer quoi que ce soit.                       */
.s5__sortie{
  position:relative;z-index:1;
  /* +20 px de respiration sous le dernier temoignage, et rien de
     plus : la marge et la hauteur sont toutes deux du navy plein. */
  margin-top:clamp(2.6rem,4.4vw,4rem);
  height:20px;
  background:#132B49;
  /* LE separateur, et c'est tout : un filet clair d'un pixel qui
     ferme la zone sombre. Plus aucun degrade — l'ancien fondu de
     32 px vers le mist a ete retire, le passage se fait d'un bord
     a l'autre. Aucun flou, aucun halo. */
  border-bottom:1px solid rgba(217,222,230,.16);
}
@media (max-width:719px){
  .s5__sortie{margin-top:2.75rem;height:16px}
}

/* ══════════ TABLETTE ══════════ */
@media (max-width:1080px){
  .s5__title{max-width:22ch}
  /* la vidéo reprend toute la colonne : sous 1080 px, la borner à
     900 px laisserait des marges inutiles de part et d'autre */
  .s5__video-zone{max-width:none}
}

/* Trois cartes deviennent illisibles avant même 820 px : à 780 px de
   fenêtre chacune ferait 216 px de large pour une serif de 17 px. */
@media (max-width:900px){
  .s5__cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══════════ MOBILE ══════════
   Ordre : eyebrow, titre, vidéo, puis les cartes empilées — c'est
   déjà l'ordre du DOM, il n'y a rien à réordonner. */
@media (max-width:640px){
  .s5{padding-top:clamp(3.6rem,11vw,5rem)}
  .s5__video-zone{margin-top:clamp(2rem,7vw,2.8rem)}
  .s5__cartes{
    grid-template-columns:1fr;
    gap:clamp(.9rem,3.5vw,1.2rem);
    margin-top:clamp(2.4rem,8vw,3.2rem);
  }
  /* Le 16/9 est CONSERVÉ en mobile : la miniature est une image
     composée, la passer en 3/2 rognerait ses bords gauche et droit et
     donc son cadrage. À 350 px de large le cadre fait 197 px de haut,
     le bouton 64 : il en occupe un tiers, c'est confortable. */
  .s5-carte{padding:1.4rem 1.35rem}
  /* La sortie ne se ré-allonge PAS en mobile : c'est cette règle qui,
     plus bas dans le fichier que la règle de base, ramenait 150 px de
     dégradé et recréait le grand vide sur téléphone. La transition
     mobile reste celle de la règle de base, 24 px. */
}
@media (max-width:380px){
  /* le badge se resserre plutot que de disparaitre : c'est la seule
     information portee par la vignette, elle tient meme ici */
  .s5-video__duree{right:.6rem;bottom:.6rem;font-size:.63rem;padding:.3rem .52rem}
}