/* =============================================================================================
   Deux univers, une marque
   - Sites web : la palette Bordeaux (tokens.css).
   - Vidéos : la palette Indigo, posée par data-theme="indigo" sur <html> (page Vidéos) ou sur une
     section (la fenêtre vers l'univers Vidéos, sur l'accueil).
   - La fenêtre vers l'univers Sites web, sur la page Vidéos, reprend la palette Bordeaux avec
     data-theme="bordeaux".
   Même logo, mêmes polices, mêmes composants : seule la palette change. Le passage d'un univers
   à l'autre est piloté par js/univers.js.
   Ce fichier porte aussi ce qui sert aux deux pages : les téléphones et les vidéos verticales.
   ============================================================================================= */

/* ---- Palette Indigo ---- */
[data-theme="indigo"] {
  --bg: #EEEBDA;
  --paper: #F7F5EC;
  --sunk: #E5E1CC;
  --line: #D2CFC2;
  --line2: #9C9BA0;
  --ink: #262947;
  --muted: #5A5B6D;
  --dark: #282B4A;
  --deep: #1C1E35;
  --on: #EEEBDA;
  --on2: #C3C1BB;
  --dline: #484A66;
  --dsurf: #33365A;
  --acc: #EC5E27;
  --acci: #1A1C33;
  --accd: #EC5E27;
  --accdi: #1A1C33;
  --dk2: #1C1E35;
  --hl: #F5C3A5;
  --hld: #EC5E27;
  --hldi: #1A1C33;
  --err: #B3261E;
}

/* ---- Palette Bordeaux, rétablie sur une section de la page Vidéos (mêmes valeurs que tokens.css) ---- */
[data-theme="bordeaux"] {
  --bg: #F5EBD0;
  --paper: #FBF5E8;
  --sunk: #EDE0C1;
  --line: #DDCDB1;
  --line2: #A38F80;
  --ink: #2B0A11;
  --muted: #64494A;
  --dark: #7F011F;
  --deep: #2B0A11;
  --on: #F5EBD0;
  --on2: #E6C7B9;
  --dline: #A13A4D;
  --dsurf: #8E1832;
  --acc: #7F011F;
  --acci: #F5EBD0;
  --accd: #F5EBD0;
  --accdi: #7F011F;
  --dk2: #5E0017;
  --hl: #EBC3B8;
  --hld: #F0B7A4;
  --hldi: #2B0A11;
  --err: #B3261E;
}

/* Petits textes sur aplat indigo : l'orange n'y est pas assez contrasté (4:1), on prend la pêche. */
[data-theme="indigo"] .formule__flag,
[data-theme="indigo"] .situation--nostia .situation__num { color: var(--hl); }
/* Ombres teintées d'indigo (celles du site sont teintées de bordeaux) */
[data-theme="indigo"] .formule--featured { box-shadow: 0 40px 70px -44px rgb(28 30 53 / 0.6); }
[data-theme="indigo"] .svr-phone { box-shadow: 0 2.4cqw 4.4cqw -2cqw rgb(28 30 53 / 0.6); }
[data-theme="indigo"] .showreel__toggle { box-shadow: 0 0 0 1px rgb(28 30 53 / 0.12), 0 8px 20px -10px rgb(28 30 53 / 0.5); }
/* Intro en indigo : l'aplat indigo se résorbe dans le point orange du « n ». */
[data-theme="indigo"] .intro,
[data-theme="indigo"] .intro__cover { background: var(--dark); }
/* Logo clair sur aplat orange : le point qui apparaît sur le « ı » est indigo. */
[data-theme="indigo"] .intro__spot { background: var(--dark); }

/* =============================================================================================
   Passage d'un univers à l'autre
   Départ : un disque grandit depuis la pastille du bouton jusqu'à couvrir l'écran, le logo
   apparaît. Arrivée : aplat de la couleur de la page, logo, puis l'aplat remonte.
   ============================================================================================= */
html.has-passage::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--dark);
}
.passage {
  position: fixed;
  inset: 0;
  z-index: 401;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: var(--font-text); /* le calque est hors de .page, qui porte la police */
  color: var(--passage-texte);
}
.passage__disque {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--passage-fond);
}
.passage--entre .passage__disque {
  transform: scale(var(--echelle, 300));
  transition: transform 640ms var(--ease-in-out);
}
.passage__marque {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(12px);
}
.passage--entre .passage__marque {
  opacity: 1;
  transform: none;
  transition: opacity 240ms 400ms, transform 420ms 400ms var(--ease-out);
}
.passage--plein { background: var(--passage-fond); }
.passage--plein .passage__disque { display: none; }
.passage--plein .passage__marque { opacity: 1; transform: none; }
.passage--sort { transform: translateY(-100%); transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1); }
.passage--sort .passage__marque { opacity: 0; transition: opacity 240ms; }

.passage__logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(64px, 11vw, 150px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--passage-texte);
}
.passage__i { position: relative; display: inline-block; }
.passage__point {
  position: absolute;
  left: 50%;
  top: 0.04em;
  width: 0.2em;
  height: 0.2em;
  margin-left: -0.1em;
  border-radius: 50%;
  background: var(--passage-point);
}
.passage__nom {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--passage-doux);
}

/* =============================================================================================
   Les portes vers l'autre univers : indigo sur l'accueil (vers les vidéos), bordeaux sur la page
   Vidéos (vers les sites web), chacune aux couleurs de sa destination
   ============================================================================================= */
.btn-fill--indigo { background: #282B4A; color: #EEEBDA; }
.btn-fill--indigo::before { background: #EC5E27; }
.btn-fill--indigo .btn-fill__fill { background: #EC5E27; }
.btn-fill--indigo.is-filled,
.btn-fill--indigo:hover { color: #1A1C33; }
.btn-fill--indigo.is-filled .btn-fill__fill,
.btn-fill--indigo:hover .btn-fill__fill { background: #282B4A; }

.btn-fill--bordeaux { background: #7F011F; color: #F5EBD0; }
.btn-fill--bordeaux::before { background: #F0B7A4; }
.btn-fill--bordeaux .btn-fill__fill { background: #F0B7A4; }
.btn-fill--bordeaux.is-filled,
.btn-fill--bordeaux:hover { color: #2B0A11; }
.btn-fill--bordeaux.is-filled .btn-fill__fill,
.btn-fill--bordeaux:hover .btn-fill__fill { background: #7F011F; }

/* ---- Lien vers l'autre univers : barre, menu et pied de page, avec son point de couleur ---- */
.univers--videos { --univers-point: #EC5E27; }
.univers--sites { --univers-point: #7F011F; }
.nav__link--univers { gap: var(--space-2); }
.nav__link--univers::before,
.nav__menu-link--univers::before,
.footer__link--univers::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--univers-point);
}
.nav__menu-link--univers { gap: var(--space-3); }
.footer__link--univers { gap: var(--space-2); }
.footer .univers--sites { --univers-point: #F0B7A4; }

/* Dans la barre et le menu, le lien est une pastille aux couleurs de sa destination : on change
   de site. Au survol, les couleurs s'inversent, comme les boutons des portes ci-dessus. */
.nav__link--univers,
.nav__menu-link--univers {
  background-color: var(--univers-fond);
  color: var(--univers-texte);
  transition: background-color 250ms, color 250ms;
}
.nav__link--univers::before,
.nav__menu-link--univers::before { transition: background-color 250ms; }
.nav__link--univers:hover,
.nav__menu-link--univers:hover {
  background-color: var(--univers-point);
  color: var(--univers-sombre);
}
.nav__link--univers:hover::before,
.nav__menu-link--univers:hover::before { background: var(--univers-fond); }
.nav .univers--videos {
  --univers-fond: #282B4A;
  --univers-texte: #EEEBDA;
  --univers-sombre: #1A1C33;
}
.nav .univers--sites {
  --univers-point: #F0B7A4;
  --univers-fond: #7F011F;
  --univers-texte: #F5EBD0;
  --univers-sombre: #2B0A11;
}
/* Sur la page Vidéos, l'accent orange manque de contraste sur le fond crème : contour bordeaux. */
.nav .univers--sites:focus,
.nav .univers--sites:focus-visible { outline-color: #7F011F; }
/* Barre : pastille de 40 px, comme celle qui suit le survol, dans une cible de 44 px. */
.nav__link--univers {
  margin-left: var(--space-2);
  border: 2px solid transparent;
  background-clip: padding-box;
  padding: 0 18px 0 14px;
}
/* Menu : une ligne pleine, arrondie, sous les liens de la page. */
.nav__menu-link--univers {
  min-height: 56px;
  margin-top: var(--space-3);
  padding: 0 24px;
  border-bottom: 0;
  border-radius: 999px;
}
/* Entre 992 et 1099 px, la barre complète manque de place : le lien reste dans le hero,
   la fenêtre vers l'autre univers et le pied de page. */
@container page (max-width: 1099px) {
  .nav__links .nav__link--univers { display: none; }
}

/* =============================================================================================
   Fenêtre vers l'univers Vidéos (accueil, après les tarifs) : une bande en indigo
   ============================================================================================= */
.pont { padding-bottom: 0; overflow: hidden; }
.pont__duo { align-items: end; }
.pont__texte { padding-bottom: var(--section-pad); }
.pont__stage { position: relative; }
@container page (max-width: 767px) {
  .pont__texte { padding-bottom: var(--space-7); }
}

/* Fenêtre vers l'univers Sites web (page Vidéos, après l'offre) : la même bande, en bordeaux, avec
   les trois aperçus de sites du hero de l'accueil, rognés par le bas de la section. */
.pont__note {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--on2);
}
.pont__stage--sites { height: clamp(260px, 25cqw, 360px); }
.pont__stage--sites .hero__window--center { top: 0; width: clamp(230px, 23cqw, 330px); }
.pont__stage--sites .hero__window--left,
.pont__stage--sites .hero__window--right { top: 56px; width: clamp(190px, 19cqw, 270px); }
.pont__stage--sites .hero__window--left { left: 25%; }
.pont__stage--sites .hero__window--right { left: 75%; }
@container page (max-width: 767px) {
  .pont__stage--sites { height: 300px; }
  .pont__stage--sites .hero__window--center { width: min(80%, 300px); }
}

/* =============================================================================================
   Téléphones en éventail (hero de la page Vidéos, fenêtre de l'accueil) : même éventail et même
   parallaxe que les fenêtres du hero de l'accueil.
   ============================================================================================= */
.hero__stage--phones { height: clamp(400px, 38cqw, 540px); }
.hero__stage--phones .hero__window--center { top: 0; width: clamp(220px, 19.5cqw, 284px); }
.hero__stage--phones .hero__window--left,
.hero__stage--phones .hero__window--right { top: 64px; width: clamp(190px, 16.5cqw, 240px); }
.hero__stage--phones .hero__window--left { left: 31%; }
.hero__stage--phones .hero__window--right { left: 69%; }

@container page (max-width: 767px) {
  .hero__stage--phones { height: 400px; }
  .hero__stage--phones .hero__window--center { width: min(66%, 252px); }
}

.phone { container-type: inline-size; }
.phone__body {
  position: relative;
  aspect-ratio: 9 / 19;
  padding: 2.8cqw;
  border-radius: 14cqw;
  background: var(--deep);
  box-shadow: 0 48px 80px -50px rgba(20, 18, 30, 0.55), 0 0 0 1px rgba(20, 18, 30, 0.08);
}
.phone__island {
  position: absolute;
  z-index: 4;
  top: 5.6cqw;
  left: 50%;
  width: 27cqw;
  height: 7.6cqw;
  margin-left: -13.5cqw;
  border-radius: 999px;
  background: var(--deep);
}
.phone__body > .vid { height: 100%; border-radius: 11.4cqw; }

/* =============================================================================================
   Vidéo verticale dessinée : décor, accroche, sous-titres, actions, légende, barre de lecture.
   Tailles en cqw de la vidéo elle-même (conteneur). Couleurs : palettes des aperçus de sites
   (tokens.css), et trois de plus ci-dessous.
   ============================================================================================= */
.preview--cola   { --p-bg: #EFE6DD; --p-ink: #2A0B0A; --p-acc: #9A0002; --p-acci: #EFE6DD; --p-dark: #9A0002; --p-on: #EFE6DD; --p-tile: #E5D9CC; --p-b: #EFE6DD; --p-bc: #9A0002; --p-mute: #69514e; --p-dl: #af3a39; }
.preview--bistre { --p-bg: #FDFDF1; --p-ink: #261606; --p-acc: #EC5E27; --p-acci: #261606; --p-dark: #261606; --p-on: #FDFDF1; --p-tile: #F2EEDB; --p-b: #EC5E27; --p-bc: #261606; --p-mute: #6b6051; --p-dl: #5c5041; }
.preview--plum   { --p-bg: #FFF3E6; --p-ink: #381932; --p-acc: #F15153; --p-acci: #381932; --p-dark: #381932; --p-on: #FFF3E6; --p-tile: #F6E4D3; --p-b: #F15153; --p-bc: #381932; --p-mute: #785f6c; --p-dl: #6a505f; }

.vid {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  background: var(--p-dark);
  color: var(--p-on);
}
/* Décor : la photo de la vidéo (voir « Vidéo sur photo » plus bas). */
.vid__scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.vid__label {
  position: absolute;
  z-index: 2;
  left: 6cqw;
  top: 17cqw;
  display: inline-flex;
  align-items: center;
  height: 7.4cqw;
  padding: 0 3.2cqw;
  border-radius: 999px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-size: 3.4cqw;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Accroche : chaque ligne dans son cartouche, comme les titres incrustés des vidéos courtes. */
.vid__hook {
  position: absolute;
  z-index: 2;
  left: 7cqw;
  right: 7cqw;
  top: 32cqw;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.4cqw;
  line-height: 1.36;
  letter-spacing: -0.02em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
.vid__hook > span {
  padding: 0.04em 0.26em 0.1em;
  border-radius: 0.24em;
  background: var(--p-on);
  color: var(--p-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Sous-titres : le mot prononcé passe dans un cartouche (karaoké, js/videos.js). */
.vid__subs {
  position: absolute;
  z-index: 2;
  left: 8cqw;
  right: 20cqw;
  bottom: 64cqw;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 6cqw;
  line-height: 1.36;
}
.vid__subs > span { padding: 0 0.14em 0.04em; border-radius: 0.22em; transition: background-color 120ms, color 120ms; }
.vid__subs > .is-on { background: var(--p-on); color: var(--p-ink); }
.vid__subs > .is-out { display: none; }

.vid__rail {
  position: absolute;
  z-index: 2;
  right: 4cqw;
  bottom: 30cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.4cqw;
}
.vid__avatar {
  display: grid;
  place-items: center;
  width: 11.5cqw;
  height: 11.5cqw;
  margin-bottom: 1.6cqw;
  border-radius: 50%;
  background: var(--p-on);
  color: var(--p-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.2cqw;
  line-height: 1;
}
.vid__icon { display: block; width: 9cqw; height: 9cqw; fill: var(--p-on); }

.vid__meta {
  position: absolute;
  z-index: 2;
  left: 6cqw;
  right: 22cqw;
  bottom: 12cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  font-size: 3.6cqw;
  line-height: 1.3;
}
.vid__handle { font-weight: 700; font-size: 4.4cqw; }
.vid__sound { font-size: 3.4cqw; }

.vid__progress {
  position: absolute;
  z-index: 2;
  left: 6cqw;
  right: 6cqw;
  bottom: 6cqw;
  height: 1.2cqw;
  border-radius: 999px;
  background: var(--p-dl);
  overflow: hidden;
}
.vid__progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--p-on);
  transform-origin: 0 50%;
  transform: scaleX(var(--t, 0.3));
}
/* Lecture (téléphone central) : la barre avance d'un cran par mot prononcé. */
.vid.is-playing .vid__progress > span { transition: transform var(--step, 360ms) linear; }

/* Vidéo à plat (étapes du principe) et vignette du mur : 9:16, accroche plus haute. */
.vid--flat .vid__hook { top: 16cqw; font-size: 10cqw; }
.vid--tile { aspect-ratio: 9 / 16; }
.vid--tile .vid__label { top: 6cqw; }
.vid--tile .vid__hook { top: 21cqw; font-size: 9.6cqw; }

/* =============================================================================================
   Vidéo sur photo, dans l'interface de son application (TikTok, Reels, Shorts, Spotlight)
   La photo remplit la vidéo ; deux voiles la foncent en haut et en bas pour que l'interface se
   lise. Textes clairs avec une ombre légère, comme dans les applications ; logos dans la planche
   de pictos (symboles l-tiktok, l-instagram, l-shorts, l-snapchat).
   ============================================================================================= */
.vid .vid__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.vid--photo { --p-on: #FBF9F6; --p-ink: #17130F; --p-dl: rgb(251 249 246 / 0.32); background: #1E1A16; }
.vid--photo .vid__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 10 8 / 0.5) 0%, rgb(12 10 8 / 0) 26%, rgb(12 10 8 / 0) 48%, rgb(12 10 8 / 0.72) 100%);
}
.vid--photo .vid__top,
.vid--photo .vid__rail,
.vid--photo .vid__meta { text-shadow: 0 1px 2px rgb(12 10 8 / 0.5); }
.vid--photo .vid__icon { filter: drop-shadow(0 1px 1.5px rgb(12 10 8 / 0.45)); }
/* Sous-titres : le mot prononcé surligné en jaune, comme les sous-titres des vidéos courtes */
.vid--photo .vid__subs > .is-on { background: #FFE04B; color: var(--p-ink); }
.vid--photo .vid__label { top: 25cqw; background: rgb(251 249 246 / 0.9); }
.vid--photo .vid__hook { top: 37cqw; }

/* Barre du haut : logo ou nom de l'application, onglets, loupe */
.vid__top {
  position: absolute;
  z-index: 3;
  left: 5cqw;
  right: 5cqw;
  top: 13cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  line-height: 1;
}
.vid__app { display: inline-flex; align-items: center; gap: 1.8cqw; font-size: 5cqw; font-weight: 700; letter-spacing: -0.01em; }
.vid__logo { flex: none; width: 6.4cqw; height: 6.4cqw; color: var(--p-on); }
.vid__glyph { flex: none; width: 5.8cqw; height: 5.8cqw; fill: var(--p-on); }
.vid__tabs { display: inline-flex; gap: 3.6cqw; font-size: 4.2cqw; font-weight: 700; }
.vid__tabs > span { opacity: 0.68; }
.vid__tabs > .is-on { position: relative; opacity: 1; }
.vid__tabs > .is-on::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: -2cqw;
  height: 0.8cqw;
  border-radius: 1cqw;
  background: currentColor;
}

/* Colonne d'actions : picto et compteur */
.vid--photo .vid__rail { right: 3cqw; bottom: 27cqw; gap: 3.6cqw; }
.vid__act { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; font-size: 3cqw; font-weight: 700; line-height: 1; }
.vid--photo .vid__avatar { position: relative; margin-bottom: 3cqw; border: 0.5cqw solid var(--p-on); }
.vid__plus {
  position: absolute;
  left: 50%;
  bottom: -2.6cqw;
  display: grid;
  place-items: center;
  width: 5cqw;
  height: 5cqw;
  margin-left: -2.5cqw;
  border-radius: 50%;
  background: #FE2C55;
}
.vid__plus-icon { width: 3.6cqw; height: 3.6cqw; fill: var(--p-on); }

/* Légende : compte, bouton, texte et hashtags, son */
.vid--photo .vid__meta { bottom: 9cqw; right: 20cqw; gap: 1.4cqw; }
.vid__who { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
.vid--photo .vid__avatar--sm { flex: none; width: 7.6cqw; height: 7.6cqw; margin: 0; border-width: 0.4cqw; font-size: 3.4cqw; }
.vid__follow {
  flex: none;
  padding: 1cqw 2.4cqw;
  border: 0.35cqw solid currentColor;
  border-radius: 1.8cqw;
  font-size: 3.2cqw;
  font-weight: 700;
  line-height: 1.1;
}
.vid__follow--sub { border-color: transparent; border-radius: 999px; background: var(--p-on); color: var(--p-ink); text-shadow: none; }
.vid__caption { font-size: 3.5cqw; line-height: 1.35; }
.vid__caption b { font-weight: 700; }
.vid--photo .vid__progress { bottom: 4cqw; height: 0.9cqw; }

/* Vignettes du mur : logo de l'application dans le coin */
.vid__corner { position: absolute; z-index: 2; top: 5.6cqw; right: 5.6cqw; width: 9cqw; height: 9cqw; color: var(--p-on); filter: drop-shadow(0 1px 2px rgb(12 10 8 / 0.5)); }
.vid--tile.vid--photo .vid__label { top: 6cqw; }
.vid--tile.vid--photo .vid__hook { top: 21cqw; }
.vid--flat.vid--photo .vid__hook { top: 16cqw; }

/* Pictos des vidéos : planche de symboles, invisible */
.vid-pictos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =============================================================================================
   Mouvement réduit : pas de passage (js/univers.js laisse la navigation se faire), rien ne bouge
   ============================================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.has-passage::after { content: none; }
  .passage { display: none; }
  .vid__subs > span,
  .vid.is-playing .vid__progress > span { transition: none; }
}