/* ===== Faux reel Instagram par-dessus la vidéo scrollable =====
 *
 * Idée de Lino (31/07/2026) : pendant chacun des trois textes SEO, tout
 * l'écran se transforme en reel Instagram — barre d'état, en-tête, colonne
 * d'actions, pseudo, son, légende, barre de commentaire. La vidéo scrollable
 * joue le rôle du reel. Puis tout s'efface en fondu et on revient à la vidéo.
 * But : que le visiteur SE PROJETTE, qu'il voie sa propre session postée.
 *
 * ⚠️ La vidéo CONTINUE DE DÉFILER normalement pendant le reel (correction de
 * Lino) : il n'y a plus ni palier, ni ralenti, ni gel. L'immersion vient de
 * l'interface, pas d'un arrêt sur image.
 *
 * Tout est décoratif : `pointer-events: none` partout et `aria-hidden` sur le
 * décor, pour que le scroll passe à travers et que les lecteurs d'écran ne
 * voient que le vrai texte SEO.
 *
 * Les proportions sont calées sur une capture d'iPhone 375 × 812 fournie par
 * Lino, exprimées en % de la hauteur visible pour tenir sur tous les écrans.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

.reel-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--r, 0);
  color: #fff;
  /* police de l'INTERFACE (pseudos, compteurs, boutons). Le TEXTE du reel,
     lui, a sa propre variable — voir le comparateur en bas de fichier. */
  font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Instagram assombrit légèrement le haut et le bas pour que son interface
     reste lisible quelle que soit la vidéo. On reproduit exactement ça. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 12%, transparent 22%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 16%, transparent 30%);
}
.reel-ui * { pointer-events: none; }

/* ---------- en-tête « Reels · Ami(e)s » ---------- */
.reel-nav {
  /* remonté en haut le 31/07 : la barre d'état a été retirée */
  position: absolute; top: 1.4%; left: 0; right: 0;
  height: 6.6%;
  display: flex; align-items: center; gap: 3.4%;
  padding: 0 5.5%;
}
.reel-back { flex: none; opacity: .95; }
.reel-tabs { display: flex; align-items: baseline; gap: 4.2vw; }
.reel-tab {
  font-size: clamp(19px, 5.4vw, 22px); font-weight: 700; letter-spacing: -0.02em;
}
.reel-tab.is-off { color: rgba(255, 255, 255, .55); }
/* les trois vignettes « Ami(e)s » — ESPACÉES, elles ne se touchent pas
   (relevé par Lino le 31/07 sur sa capture de reel) */
.reel-friends { display: flex; align-items: center;
  --fs: clamp(28px, 7.8vw, 32px);   /* diamètre */
  --ov: 9px;                        /* chevauchement */
  --gap: 2px;                       /* largeur du trou de séparation */
}
.reel-friends span {
  width: var(--fs); aspect-ratio: 1;
  margin-left: calc(-1 * var(--ov));
  border-radius: 50%;
  background: #3a3a3a center/cover no-repeat;
  /* on évide un disque à l'emplacement de la vignette suivante : la voisine,
     dessinée par-dessus, se détache donc sans qu'aucun liseré soit ajouté */
  -webkit-mask: radial-gradient(circle calc(var(--fs) / 2 + var(--gap))
                at calc(var(--fs) * 1.5 - var(--ov)) 50%, transparent 100%, #000 100%);
          mask: radial-gradient(circle calc(var(--fs) / 2 + var(--gap))
                at calc(var(--fs) * 1.5 - var(--ov)) 50%, transparent 100%, #000 100%);
}
.reel-friends span:first-child { margin-left: 0; }
.reel-friends span:last-child { -webkit-mask: none; mask: none; }

/* ---------- le texte du reel ---------- */
/* Posé au tiers supérieur, comme sur la capture : c'est la position la plus
   courante sur Instagram, le texte reste au-dessus du pouce et des visages. */
.reel-text {
  position: absolute; left: 8%; right: 8%; top: 27%;
  text-align: center;
}
.reel-text .copy-block {
  position: absolute; left: 0; right: 0; top: var(--t, 0); margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.02rem, 4.4vw, 1.22rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #fff;
  opacity: 0;
}
.reel-text .copy-block.is-live { opacity: 1; }

/* --- habillages demandés par Lino le 31/07, d'après ses captures ---
   is-gold  : lettrage sérif doré (le « the porch » de sa référence)
   is-boxed : fond noir LIGNE À LIGNE, comme le texte d'une story.
              box-decoration-break: clone est ce qui donne un pavé par ligne
              au lieu d'un seul bloc — sans lui, l'effet ne marche pas. */
.reel-text .copy-block span {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* bloc 1 : BLEU sur pavé bleu très clair, d'après la capture d'écran de Lino
   (03/08/2026). Le blanc extra-gras posé à même l'image a été abandonné : il
   se perdait sur les plans clairs. Le bleu est un cran plus soutenu que celui
   de la capture — à l'identique il tombait à 2,8:1 sur le pavé, on passe à
   3,5:1, ce qu'exige un texte de cette taille. */
.reel-text .copy-block.is-heavy { font-weight: 800; color: #0a7fd4; }
.reel-text .copy-block.is-heavy span { background: #cfeefb; }

/* --- Pavé de couleur derrière le texte (blocs 2 et 3) ---
 *
 * UN SEUL rectangle arrondi derrière tout le bloc, et le texte posé dessus.
 * Le découpage ligne à ligne (box-decoration-break) a été abandonné le
 * 31/07/2026 : il laissait soit des trous, soit un recouvrement du texte
 * voisin, selon les métriques de la police. Un `inline-block` épouse la
 * largeur du texte, se centre, et le fond est continu par construction —
 * plus rien à calculer, plus rien à casser en changeant de police.
 */
.reel-text .copy-block.is-heavy span,
.reel-text .copy-block.is-cream span,
.reel-text .copy-block.is-boxed span {
  display: inline-block;
  padding: .52em .72em;
  border-radius: 16px;
  -webkit-box-decoration-break: slice;
          box-decoration-break: slice;
}

/* bloc 2 : doré sur pavé crème, d'après la capture de story de Lino */
.reel-text .copy-block.is-cream {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #efae28;
  letter-spacing: 0;
  line-height: 1.3;
  font-size: clamp(1.14rem, 4.9vw, 1.38rem);
}
.reel-text .copy-block.is-cream span { background: #fdf4de; }

/* bloc 3 : blanc sur pavé noir */
.reel-text .copy-block.is-boxed { line-height: 1.3; }
.reel-text .copy-block.is-boxed span { background: #000; }

/* ---------- colonne d'actions, à droite ---------- */
.reel-rail {
  position: absolute; right: 3.4%; bottom: 12%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(15px, 2.4vh, 22px);
}
.reel-act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reel-act b {
  font-size: clamp(12px, 3.4vw, 13.5px); font-weight: 700; letter-spacing: -0.01em;
}

/* pochette du son : carré arrondi, liseré blanc, comme sur Instagram */
.reel-cover {
  width: clamp(28px, 7.6vw, 32px); aspect-ratio: 1;
  border-radius: 8px; border: 1.5px solid #fff;
  background: #262626 center/cover no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* ---------- bas : profil, pseudo, son, légende ---------- */
.reel-bottom {
  position: absolute; left: 5%; right: 22%; bottom: 9.4%;
  display: flex; flex-direction: column; gap: 7px;
}
.reel-who { display: flex; align-items: center; gap: 9px; }
/* L'anneau multicolore d'Instagram : l'élément porte le dégradé, la photo
   est peinte par ::after à l'intérieur. C'est pour ça que ask.js/le module
   écrivent la photo dans --ava et non dans background-image. */
.reel-avatar {
  position: relative; flex: none;
  width: clamp(32px, 8.8vw, 36px); aspect-ratio: 1;
  padding: 2.5px; border: none; border-radius: 50%;
  background: conic-gradient(from 200deg,
    #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.reel-avatar::after {
  content: ""; position: absolute; inset: 2.5px;
  border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .55);
  background: var(--ava, none) center/cover no-repeat, #3a3a3a;
}
.reel-avatar i {
  position: absolute; right: -5px; bottom: -4px; z-index: 2;
  font-style: normal; font-size: 11px; line-height: 1;
}
.reel-name {
  font-size: clamp(13px, 3.7vw, 14.5px); font-weight: 600; letter-spacing: -0.01em;
}
.reel-follow {
  flex: none; padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 8px;
  font-size: clamp(11.5px, 3.3vw, 13px); font-weight: 600;
}
/* le son qui défile en boucle sous le pseudo */
.reel-song {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(11.5px, 3.3vw, 12.5px); font-weight: 400;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  overflow: hidden; white-space: nowrap;
}
.reel-song-track { display: inline-block; padding-left: 100%;
  animation: reel-marquee 11s linear infinite; }
@keyframes reel-marquee { to { transform: translateX(-100%); } }
.reel-caption {
  font-size: clamp(12.5px, 3.6vw, 13.5px); font-weight: 400; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- barre de lecture ---------- */
/* Elle avance avec le scroll : le reel « se lit » pendant qu'on descend. */
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 7.2%;
  height: 2.5px; background: rgba(255, 255, 255, .28);
}
.reel-progress i {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: #fff;
}

/* ---------- barre « Ajouter un commentaire… » ---------- */
.reel-comment {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 7.2%;
  display: flex; align-items: center;
  padding: 0 5.5%;
  background: #000;
  font-size: clamp(13px, 3.8vw, 15px); color: rgba(255, 255, 255, .55);
}

/* Police du texte du reel : Inter 700, retenue par Lino le 31/07/2026 parmi
   trois approximations de la fonte maison d'Instagram (Inter, Figtree,
   Poppins). Playfair Display reste chargée : c'est le lettrage du bloc 2. */

/* pendant le reel, les commandes du site s'effacent : elles trahiraient le
   trompe-l'œil (le sélecteur de langue et « Passer » ne sont pas Instagram) */
.hero-sticky.is-reel .hero-lang,
.hero-sticky.is-reel .hero-skip {
  opacity: 0 !important; visibility: hidden; transition: opacity .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reel-song-track { animation: none; padding-left: 0; }
}