/* =============================================================================================
   Showreel : vidéo de présentation au défilement (section nouvelle, après le hero)
   Sous le hero, un cadre vidéo 16:9 aux
   coins arrondis, à 80 % de sa taille, grandit avec le défilement jusqu'à presque toute la
   largeur (marge de 2 %) quand il arrive en haut de l'écran, puis défile normalement.
   Sous 768 px : cadre fixe, pleine largeur entre les marges, en 4:5 pour rester
   lisible. La composition (19 s, en boucle) est pilotée par js/showreel.js : toutes ses mesures
   sont en unités du cadre (cqw, cqh), elle se lit donc pareil à toutes les largeurs.
   Avant la lecture, le cadre montre le logo (première image de la boucle).
   Mouvement réduit : ni croissance ni lecture automatique ; image fixe (le mur des réalisations),
   le bouton permet de lancer la vidéo.
   ============================================================================================= */

.showreel {
  --sr-edge: clamp(12px, 2cqw, 32px);
  padding: clamp(32px, 3.4cqw, 56px) var(--sr-edge) calc(var(--section-pad) * 0.5);
  background: var(--bg);
}

.showreel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cadre : sa taille réelle est la taille finale ; js/showreel.js le réduit (transform: scale,
   origine en haut) tant qu'il n'est pas monté dans l'écran. */
.showreel__frame {
  position: relative;
  width: 100%;
  max-width: min(1600px, calc(86svh * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: transparent; /* pas de fond bordeaux jusqu'au bord : voir .showreel__stage::before */
  transform-origin: 50% 0;
  will-change: transform;
  isolation: isolate;
}

.showreel__stage {
  position: absolute;
  inset: 0;
  container: showreel / size;
  overflow: hidden;
  font-family: var(--font-text);
  color: var(--ink);
  user-select: none;
  border-radius: inherit;
}
/* Fond bordeaux en retrait de 2 px : réduit (0,8 à 1), le cadre lisse ses bords, et un fond posé
   jusqu'au bord y laissait un liseré bordeaux sous les scènes claires. */
.showreel__stage::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--dark);
}

@container page (max-width: 767px) {
  .showreel { --sr-edge: var(--gutter); padding-top: var(--space-6); }
  .showreel__frame { aspect-ratio: 4 / 5; max-width: none; border-radius: var(--radius-card); }
}

/* ---- Scènes ---- */
.sr-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  will-change: transform;
}

/* 1. Marque */
.sr-brand {
  display: grid;
  place-items: center;
  background: var(--dark);
}
.showreel .sr-logo {
  font-size: 15cqw;
  color: var(--on);
  padding-bottom: 0.08em;
}
.showreel .sr-logo .logo__dot { background: var(--hld); }
.sr-logo .logo__letter,
.sr-logo .logo__i { will-change: transform, opacity; }

/* 2. Pages */
.sr-pages { background: var(--bg); }
.sr-win {
  position: absolute;
  left: 12cqw;
  top: 9cqh;
  width: 60cqw;
  height: 84cqh;
  margin: 0;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 2.6cqw 5cqw -2.6cqw rgba(43, 10, 17, 0.5), 0 0 0 1px rgba(43, 10, 17, 0.1);
  transform-origin: 50% 0;
  will-change: transform;
}
.sr-win__bar {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  height: 3cqw;
  padding: 0 1.2cqw;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.sr-win__dot { width: 0.75cqw; height: 0.75cqw; border-radius: 50%; background: var(--line); }
.sr-win__url {
  display: flex;
  align-items: center;
  flex: 0 1 34%;
  height: 1.8cqw;
  margin-left: 1.4cqw;
  padding: 0 1cqw;
  border-radius: 999px;
  background: var(--sunk);
  font-size: 1.05cqw;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.sr-win__view,
.sr-phone__view {
  position: absolute;
  overflow: hidden;
  container-type: size;
}
.sr-win__view { top: 3cqw; left: 0; right: 0; bottom: 0; }
.sr-shot {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
.sr-phone {
  position: absolute;
  right: 10cqw;
  bottom: 6cqh;
  width: 15.5cqw;
  aspect-ratio: 9 / 19;
  padding: 0.5cqw;
  border-radius: 2.4cqw;
  background: var(--deep);
  box-shadow: 0 2.4cqw 4.4cqw -2cqw rgba(43, 10, 17, 0.6);
  will-change: transform, opacity;
}
.sr-phone__view {
  inset: 0.5cqw;
  border-radius: 1.9cqw;
  background: var(--paper);
}

/* 3. Mur des réalisations */
.sr-wall { background: var(--deep); }
.sr-wall__grid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 1.8cqw;
  transform: translate(-50%, -50%) rotate(-7deg);
}
.sr-col {
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
  will-change: transform;
}
.sr-col:nth-child(2n) { margin-top: -14cqw; }
.sr-tile {
  overflow: hidden;
  border-radius: 1.1cqw;
  background: var(--paper);
}
.sr-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 0;
}
.sr-tile--phone img { aspect-ratio: 9 / 16; }
.sr-tile--low img { object-position: 50% 55%; } /* même site, plus bas dans la page */
.sr-tile .preview { border-radius: 0; cursor: default; }

/* 4 et 5. Promesses */
.sr-promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4cqh;
  padding: 0 8cqw;
}
.sr-google { background: var(--paper); }
.sr-ai { background: var(--dark); color: var(--on); }
.sr-ai__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4cqh;
  width: 100%;
}
.sr-title {
  margin: 0 0 1.6cqh;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 6.4cqw;
  line-height: 1.02;
  letter-spacing: var(--ls-title);
  text-align: center;
  text-wrap: balance;
}
/* Mot en pilule pleine (comme .pill-word) ; js/showreel.js le dévoile de gauche à droite. */
.sr-pill {
  display: inline-block;
  padding: 0 0.14em 0.06em;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acci);
}
.sr-ai .sr-pill { background: var(--hld); color: var(--hldi); }

.sr-search {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  width: 54cqw;
  height: 5cqw;
  padding: 0 2cqw;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line), 0 1.4cqw 3cqw -2cqw rgba(43, 10, 17, 0.35);
  font-size: 1.75cqw;
  color: var(--ink);
}
.sr-search__icon {
  flex: none;
  width: 1.9cqw;
  height: 1.9cqw;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.sr-search__q { white-space: pre; }
.sr-caret { width: 2px; height: 1.2em; background: var(--acc); }

.sr-result {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  width: 54cqw;
  padding: 1.5cqw 2cqw 1.7cqw;
  border-radius: 1.6cqw;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.sr-result__url {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  font-size: 1.3cqw;
  color: var(--muted);
}
.sr-result__fav { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--acc); }
.sr-result__title {
  font-size: 1.95cqw;
  font-weight: 700;
  line-height: 1.25;
  color: var(--acc);
}
.sr-line {
  display: block;
  width: 86%;
  height: 0.8cqw;
  margin-top: 0.4cqw;
  border-radius: 999px;
  background: var(--sunk);
  transform-origin: 0 50%;
}
.sr-line--short { width: 58%; }

.sr-chat {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  width: 54cqw;
}
.sr-chat__q {
  align-self: flex-end;
  max-width: 82%;
  margin: 0;
  padding: 1.2cqw 2cqw;
  border-radius: 2.4cqw 2.4cqw 0.6cqw 2.4cqw;
  background: var(--dsurf);
  font-size: 1.7cqw;
  line-height: 1.35;
}
.sr-chat__a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6cqw;
}
.sr-chat__text {
  margin: 0;
  font-size: 1.7cqw;
  line-height: 1.6;
}
.sr-source {
  display: inline-flex;
  align-items: center;
  height: 2.8cqw;
  margin-left: 0.4em;
  padding: 0 1.2cqw;
  border-radius: 999px;
  background: var(--on);
  color: var(--dark);
  font-size: 1.4cqw;
  font-weight: 700;
  vertical-align: 0.1em;
}
.sr-ai .sr-line { background: rgba(245, 235, 208, 0.24); }

/* 6. Fin : la promesse ; le logo se reforme ensuite dans la scène 1 */
.sr-end {
  display: grid;
  place-items: center;
  padding: 0 8cqw;
  color: var(--on);
  text-align: center;
}
.sr-end__in { will-change: transform, opacity; }
.sr-end__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 6.4cqw;
  line-height: 1.02;
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.sr-end__accent { color: var(--hld); white-space: nowrap; }

/* ---- Cadre vertical (sous 768 px) : mêmes scènes, autre placement ---- */
@container showreel (orientation: portrait) {
  .showreel .sr-logo { font-size: 25cqw; }
  .sr-win { left: 7cqw; top: 6cqh; width: 86cqw; height: 60cqh; border-radius: 2.6cqw; }
  .sr-win__bar { height: 6.4cqw; gap: 1.2cqw; padding: 0 2.6cqw; }
  .sr-win__dot { width: 1.6cqw; height: 1.6cqw; }
  .sr-win__url { flex-basis: 48%; height: 3.8cqw; margin-left: 2.4cqw; padding: 0 2cqw; font-size: 2.3cqw; }
  .sr-win__view { top: 6.4cqw; }
  .sr-phone { right: 6cqw; bottom: 5cqh; width: 31cqw; padding: 1cqw; border-radius: 5cqw; }
  .sr-phone__view { inset: 1cqw; border-radius: 4cqw; }

  .sr-wall__grid { width: 150cqw; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
  .sr-col { gap: 3cqw; }
  .sr-col:nth-child(4) { display: none; }
  .sr-tile { border-radius: 2.2cqw; }

  .sr-promise, .sr-ai__in { gap: 3cqh; padding: 0 7cqw; }
  .sr-ai__in { padding: 0; }
  .sr-title { font-size: 11.5cqw; margin-bottom: 1cqh; }
  .sr-search { width: 100%; height: 11cqw; gap: 2.4cqw; padding: 0 4.4cqw; font-size: 3.9cqw; }
  .sr-search__icon { width: 4.2cqw; height: 4.2cqw; }
  .sr-result { width: 100%; gap: 1.2cqw; padding: 3.6cqw 4.4cqw 4cqw; border-radius: 3.6cqw; }
  .sr-result__url { gap: 1.6cqw; font-size: 3.1cqw; }
  .sr-result__fav { width: 3.4cqw; height: 3.4cqw; }
  .sr-result__title { font-size: 4.4cqw; }
  .sr-line { height: 1.9cqw; margin-top: 1cqw; }
  .sr-chat { width: 100%; gap: 4cqw; }
  .sr-chat__q { padding: 2.8cqw 4.4cqw; border-radius: 5cqw 5cqw 1.4cqw 5cqw; font-size: 3.9cqw; }
  .sr-chat__a { gap: 1.4cqw; }
  .sr-chat__text { font-size: 3.9cqw; }
  .sr-source { height: 6.4cqw; padding: 0 2.8cqw; font-size: 3.3cqw; }
  .sr-end__title { font-size: 11.5cqw; }
}

/* ---- Bouton lecture et pause ----
   56 px : reste au-dessus de 44 px même quand le cadre est réduit à 80 %. Double anneau de
   focus (crème puis bordeaux), visible sur les scènes claires comme sur les scènes sombres. */
.showreel__toggle {
  position: absolute;
  right: clamp(12px, 1.6cqw, 24px);
  bottom: clamp(12px, 1.6cqw, 24px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(43, 10, 17, 0.12), 0 8px 20px -10px rgba(43, 10, 17, 0.5);
  cursor: pointer;
  transition: transform 300ms var(--ease-out), background-color 200ms;
}
.showreel__toggle:hover { transform: scale(1.05); background: var(--hl); }
.showreel__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--acc);
}
.showreel__icon { width: 22px; height: 22px; fill: currentColor; }
.showreel__toggle[data-state="play"] .showreel__icon--play,
.showreel__toggle[data-state="pause"] .showreel__icon--pause { display: none; }

@container page (max-width: 767px) {
  .showreel__toggle { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel__toggle { transition: none; }
  .showreel__toggle:hover { transform: none; }
}