/* =========================================================================
 * LE TÉLÉPHONE — composant autonome (10/08/2026)
 *
 * Sorti de creation-site.css le jour où le téléphone a quitté /creation-site
 * pour le bas du hub (Lino, 10/08/2026). Il vit maintenant dans sa propre
 * feuille parce que DEUX pages peuvent le vouloir, et qu'aucune des deux n'a
 * à charger la feuille de l'autre.
 *
 * Il ne dépend d'AUCUNE variable de palette : le corps est un titane presque
 * noir, l'écran est noir, et tout le reste est une fraction de `--ph-w`. On
 * peut le poser sur une page claire comme sur une page sombre.
 *
 * ⚠️ À CHARGER APRÈS reel.css : c'est cette feuille-ci qui doit pouvoir
 * remettre le reel à l'échelle du cadre, pas l'inverse.
 *
 * Mécanique de lecture, chargement des images et garde-fous : cs-phone.js.
 *
 * Le cadre est LE MÊME que celui de /sport et /realestate, aux proportions
 * relevées sur la maquette de Lino (corps 720 × 1502, écran 680 × 1466, cadre
 * 20, rayon 85, îlot 178 × 46), tout en fraction de `--ph-w` : un rayon en px
 * se déforme dès qu'on change la hauteur, et c'est exactement ce qui trahit un
 * faux téléphone.
 * ⚠️ Ces proportions vivent à TROIS endroits — ici, realestate.css, et le
 * <style> de sport.html. Les changer à un seul endroit donne trois téléphones
 * qui ne se ressemblent pas, et ça se voit tout de suite.
 * ========================================================================= */

.cs-phone {
  position: relative;
  box-sizing: border-box;
  margin: clamp(28px, 5vh, 48px) auto 0;
  --ph-h: min(58svh, 460px);
  --ph-w: calc(var(--ph-h) * 0.4793);   /* 720 / 1502 */
  height: var(--ph-h);
  width: var(--ph-w);
  padding: calc(var(--ph-w) * 0.0278);  /* épaisseur du cadre : 20 / 720 */
  border-radius: calc(var(--ph-w) * 0.118);
  /* corps titane : un noir dégradé, un liseré clair d'un pixel. Aucune lueur,
     aucun halo — règle transverse du site. */
  background:
    linear-gradient(145deg, #3a3a3d 0%, #17171a 16%, #17171a 84%, #3a3a3d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 34px 80px -30px rgba(20, 22, 26, 0.42);
}

.cs-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070f;                  /* noir : la séquence est une vidéo */
  border-radius: calc(var(--ph-w) * 0.0902);   /* rayon extérieur − cadre */
}

/* ⚠️ L'IMAGE DE FOND N'EST PAS UNE AFFICHE DE SECOURS. C'est la PREMIÈRE
   IMAGE de la séquence, et c'est elle que la dissolution finale découvre par
   transparence — c'est ce qui rend la boucle invisible. Elle reste donc
   visible en permanence, SOUS le canvas, et ne s'efface jamais. Ne pas lui
   ajouter de transition d'opacité. */
.cs-phone-first,
.cs-phone-screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;            /* écran 1:2,156, source 9:16 : ~17 % rognés */
  border-radius: inherit;
}
.cs-phone-first { z-index: 1; }
.cs-phone-screen canvas { z-index: 2; }

/* ⚠️ LE REEL EST DESSINÉ À SA TAILLE DE RÉFÉRENCE, PUIS MIS À L'ÉCHELLE.
   reel.css cale ses tailles sur des `clamp(min, Xvw, max)`, donc sur la
   largeur de la FENÊTRE et non sur celle du cadre : dans un téléphone de
   220 px posé au milieu d'un écran de 1440, tout sortirait plusieurs fois trop
   grand. On lui rend donc la largeur de la capture d'origine (375 px), on
   déduit sa hauteur du rapport de l'écran (1:2,156), et cs-phone.js pose
   `--k` = largeur réelle / 375. Fait en JS faute de pouvoir diviser deux
   longueurs en CSS.
   ⚠️ `transform-origin` en HAUT À GAUCHE : centré, le reel déborderait du
   cadre par le haut. */
.cs-phone .reel-ui {
  inset: auto;
  top: 0;
  left: 0;
  width: 375px;
  height: calc(375px * 2.156);
  transform: scale(var(--k, 1));
  transform-origin: top left;
  z-index: 3;
  border-radius: 0;
}

/* ⚠️ L'EN-TÊTE DU REEL DESCEND SOUS L'ÎLOT. Quand le reel occupe tout l'écran
   du visiteur, rien ne le surplombe : `.reel-nav` est calée à 1,4 % du haut.
   Ici elle passerait DERRIÈRE l'îlot dynamique — « Ami(e)s » et les vignettes
   disparaissaient sous la pilule noire (constaté le 10/08/2026). L'îlot occupe
   le haut jusqu'à 35,5 px dans l'espace de référence du reel (375 px de
   large) : on pose l'en-tête à 5,4 %, soit 44 px. C'est d'ailleurs ce que fait
   un vrai iPhone — l'interface commence sous l'îlot. */
.cs-phone .reel-nav { top: 5.4%; }

/* L'îlot dynamique et son objectif. */
.cs-phone-island {
  position: absolute;
  z-index: 4;
  top: calc(var(--ph-w) * 0.0306);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--ph-w) * 0.247);
  height: calc(var(--ph-w) * 0.0639);
  border-radius: 999px;
  background: #000;
}
.cs-phone-island i {
  position: absolute;
  top: 50%;
  right: calc(var(--ph-w) * 0.026);
  width: calc(var(--ph-w) * 0.0361);
  height: calc(var(--ph-w) * 0.0361);
  transform: translateY(-50%);
  border-radius: 50%;
  /* l'objectif : un bleu très sombre avec un reflet décentré. Sans lui, l'îlot
     n'est qu'une pilule noire. */
  background:
    radial-gradient(circle at 62% 38%, #2f4f7a 0%, #16233a 46%, #05070c 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Les touches. Position et longueur en % de la HAUTEUR du corps, relevées sur
   la maquette. Elles débordent du cadre, d'où les décalages négatifs. */
.cs-phone-key {
  position: absolute;
  width: calc(var(--ph-w) * 0.0139);
  background: linear-gradient(90deg, #45454a, #202024);
}
.cs-phone-key.k-action,
.cs-phone-key.k-vol-up,
.cs-phone-key.k-vol-dn {
  left: calc(var(--ph-w) * -0.0125);
  border-radius: calc(var(--ph-w) * 0.006) 0 0 calc(var(--ph-w) * 0.006);
  background: linear-gradient(270deg, #45454a, #202024);
}
.cs-phone-key.k-side {
  right: calc(var(--ph-w) * -0.0125);
  border-radius: 0 calc(var(--ph-w) * 0.006) calc(var(--ph-w) * 0.006) 0;
}
.cs-phone-key.k-action { top: 12.6%; height: 3.7%; }
.cs-phone-key.k-vol-up { top: 20.6%; height: 6.3%; }
.cs-phone-key.k-vol-dn { top: 29.3%; height: 6.3%; }