/* ==========================================================================
   Nos sites sur mobile — la grille de téléphones et la main
   --------------------------------------------------------------------------
   Source : le dossier /essai-section/, écrit par Bzaf Studio. Cette feuille
   en est la version intégrable : tout est cadré dans .dev, les variables
   sont posées sur .dev et non sur :root, et les six classes trop génériques
   (card, art, av, p, i, container) sont préfixées « mb- » pour ne pas
   croiser celles du site.

   Chargée par la seule page d'accueil (tools/layout.mjs, paramètre « css »).
   ========================================================================== */

/* ===== style.css ===== */
/* ==========================================================================
   Section "Smart Development" — réplique de awsmd.com (#development)
   Mécanique : grille 3×5 d'écrans + main "sticky" (position: sticky; bottom: 0)
   ========================================================================== */

.dev {
  --bg: #0d0f11;

  /* Grille de cartes (valeurs exactes de l'original, > 1600px) */
  --card-w: 365px;
  --card-h: 770px;
  --card-r: 44px;
  --card-gap: 12.8px;
  --card-scale: 1.0458;          /* = card-w / 349 (taille de design des maquettes) */
  --screens-pb: 115px;

  /* Main + téléphone */
  --hand-w: 1870px;              /* largeur de rendu de l'image de la main */
  --hand-h: 940px;               /* hauteur visible de la main (le bras est coupé) */
  --hand-offset: 30px;           /* la main démarre 30px au-dessus de la grille */

  /* Position de l'écran DANS l'image de la main, en % de la largeur de l'image.
     Valeurs mesurées sur assets/hand-phone.webp (ouvre la page avec ?align pour vérifier). */
  --scr-w: 18.669;
  --scr-h: 39.678;
  --scr-top: 3.016;
  --scr-x: 0;                    /* décalage horizontal depuis le centre */
  --scr-r: 2.184;
  --app-scale: .938;             /* recalculé en JS = largeur écran / 371 */

  /* Téléphones flottants du haut de section */
  --ph-s: 1.0989;
  --ph-top: 235px;
}

@media (max-height: 780px) {
  .dev { --screens-pb: 40px; --hand-h: 740px; }
}
@media (max-width: 1600px) {
  .dev {
    --card-w: 310.25px; --card-h: 654.5px; --card-r: 46.75px; --card-scale: .88897;
    --screens-pb: 40px;
    --hand-w: 1589.5px; --hand-h: 740px; --app-scale: .8005;
    --ph-s: 1; --ph-top: 190px;
  }
}
@media (max-width: 1124px) {
  .dev {
    --card-w: 200.75px; --card-h: 423.5px; --card-r: 30.25px; --card-scale: .57521;
    --hand-w: 1028.5px; --hand-h: 500px; --hand-offset: 15px; --app-scale: .5202;
  }
}
@media (max-width: 991px) {
  .dev { --ph-s: .7692; --ph-top: 160px; }
}
@media (max-width: 768px) {
  .dev {
    --card-w: 150px; --card-h: 310px; --card-r: 20px; --card-gap: 8px; --card-scale: .4298;
    --hand-w: 770px; --hand-h: 380px; --app-scale: .3908;
    --ph-s: .6406; --ph-top: 254px;
  }
}
@media (max-width: 465px) {
  .dev { --hand-h: 450px; --screens-pb: 110px; }
}
@media (max-width: 390px) {
  .dev { --ph-s: .5495; --ph-top: 200px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* ---------- la base de la section, cadrée ----------
   Tout ce qui suit était écrit pour une page entière : body, img, svg, a
   et * étaient repeints globalement. Ici, rien ne sort de .dev.
   « overflow-x: hidden » n'est pas repris : il est inutile (la grille est
   déjà coupée par .dev__screens-wrapper) et, posé sur body, il casserait
   le position:sticky de la main. */
.dev, .dev *, .dev *::before, .dev *::after { box-sizing: border-box; }
.dev {
  background: var(--bg);
  color: #fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* background:none annule le gris de chargement que base.css:117 pose sur
   toutes les images du site — il se verrait sous chaque maquette. */
.dev img { display: block; max-width: none; background: none; }
.dev svg { display: block; }
.dev a { color: inherit; text-decoration: none; }

.mb-wrap { padding-inline: 40px; }
@media (max-width: 768px) { .mb-wrap { padding-inline: 16px; } }

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.dev {
  position: relative;
  /* le rythme du site : .section pose padding-block: var(--sec) */
  padding-top: var(--sec);
  /* AUCUN padding en bas, volontairement : la main est dessinée pour être
     coupée par le bord bas de la section — c'est ce qui lui donne l'air de
     surgir d'en dessous. Le moindre vide sous elle la fait paraître amputée
     et posée dans le vide. Essayé le 27/10/2026, revenu aussitôt. */
  background: var(--bg);
}

.dev__line {
  position: absolute;
  left: 0;
  /* au ras du contenu, comme avant : il suit le padding du haut */
  top: var(--sec);
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.dev__line svg { min-width: 1157px; width: 100%; height: auto; }
.dev__line path { stroke: #353535; fill: none; stroke-width: 1; }
@media (max-width: 768px) { .dev__line svg { transform: translateX(236px); } }

.dev__contentbox { position: relative; }

/* Marquee géant en fond */
.dev__marquee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.dev__marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.dev__marquee-text {
  margin: 0;
  white-space: nowrap;
  font: 500 211px/1.2 Inter, sans-serif;
  color: rgba(255, 255, 255, .05);
  padding-inline: .14em;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 1600px) { .dev__marquee-text { font-size: 180px; } }
@media (max-width: 991px)  { .dev__marquee-text { font-size: 160px; } }
@media (max-width: 768px) {
  .dev__marquee { top: auto; bottom: 0; transform: translate(-50%, 60%); }
  .dev__marquee-text { font-size: 135px; }
}
@media (max-width: 390px)  { .dev__marquee-text { font-size: 120px; } }

.dev__content {
  position: relative;
  min-height: 730px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dev__title {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: 400;
}
.dev__title-main {
  font: 400 90px/108px Inter, sans-serif;
  color: #fff;
  text-transform: uppercase;
}
.dev__title-stars {
  font: 400 140px/168px Inter, sans-serif;
  color: rgba(255, 255, 255, .4);
  margin-top: -32px;
}
.dev__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.dev__text {
  margin: 0;
  max-width: 460px;
  font: 400 19px/1.16 Inter, sans-serif;
  color: rgba(255, 255, 255, .87);
}
.dev__controls { display: flex; gap: 6px; flex-shrink: 0; }
.dev__btn {
  display: inline-block;
  font: 400 17px/20px Inter, sans-serif;
  padding: 4.5px 15.5px;
  border-radius: 50px;
  transition: background .2s, color .2s;
}
.dev__btn--white { background: #e8e8e8; color: #000; }
.dev__btn--white:hover { background: #fff; }
.dev__btn--gray { background: #4a4b4d; color: #fff; }
.dev__btn--gray:hover { background: #5d5e61; }

@media (max-width: 991px) {
  .dev__title-main { font-size: 64px; line-height: 76px; }
  .dev__title-stars { font-size: 100px; line-height: 120px; margin-top: -20px; }
}
@media (max-width: 768px) {
  .dev__content { min-height: 640px; }
  .dev__title-main { font-size: 44px; line-height: 52px; }
  .dev__title-stars { font-size: 64px; line-height: 76px; margin-top: -10px; }
  .dev__bottom { flex-direction: column; align-items: flex-start; }
  .dev__text { font-size: 16px; }
  .dev__btn { font-size: 15px; }
}

/* Téléphones flottants (haut de section) */
.dev__phones {
  position: absolute;
  left: 50%;
  top: var(--ph-top);
  transform: translateX(-50%);
  width: calc(546px * var(--ph-s));
  height: calc(625px * var(--ph-s));
  z-index: 3;
  pointer-events: none;
}
.dev__phones-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 546px;
  height: 625px;
  transform: scale(var(--ph-s));
  transform-origin: 0 0;
}
.fphone { position: absolute; animation: float 6s ease-in-out infinite; }
.fphone--left { left: 34px; top: 22px; animation-delay: -3s; }
.fphone--right { right: 26px; bottom: 6px; }
@keyframes float { 50% { transform: translateY(-20px); } }

.fphone__body {
  --fw: 200px;
  position: relative;
  width: var(--fw);
  height: calc(var(--fw) * 2.06);
  padding: calc(var(--fw) * .034);
  border-radius: calc(var(--fw) * .17);
  background: #0b0b0c;
  box-shadow:
    0 0 0 2px #3c3c3f,
    0 0 0 3.5px #8d8d92,
    0 0 0 5px #2b2b2e,
    -18px 40px 70px rgba(0, 0, 0, .6);
}
.fphone--left .fphone__body { --fw: 196px; transform: rotate(-17deg); }
.fphone--right .fphone__body { --fw: 222px; transform: rotate(14deg); }
.fphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--fw) * .14);
  overflow: hidden;
  background: #fff;
}
/* écran = fw × 0.932 ; échelle = largeur écran / 371 */
.fphone--left .fphone__screen > * { transform: scale(.4924); }
.fphone--right .fphone__screen > * { transform: scale(.5577); }

/* Écran "Review Rave" du téléphone flottant gauche */
.login {
  position: absolute;
  left: 0;
  top: 0;
  width: 371px;
  height: 788px;
  transform-origin: 0 0;
  background:
    radial-gradient(120% 60% at 50% 100%, #6e5bff 0%, #3c2bd8 38%, rgba(20, 18, 70, 0) 75%),
    linear-gradient(#0b0d24, #10133a);
  color: #fff;
  font-family: Poppins, sans-serif;
}
.login__logo { position: absolute; left: 28px; top: 74px; font: 500 13px/1.25 Poppins; letter-spacing: .02em; }
.login__menu {
  position: absolute; right: 26px; top: 70px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #111; display: grid; place-items: center;
}
.login__menu svg { width: 16px; height: 16px; }
.login__title { position: absolute; left: 28px; top: 150px; margin: 0; font: 600 28px/1.15 Poppins; width: 320px; }
.login__sub { position: absolute; left: 28px; top: 232px; margin: 0; font: 400 12px/1.5 Poppins; color: rgba(255,255,255,.55); width: 290px; }
.login__field {
  position: absolute; left: 28px; width: 315px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.35); font: 400 14px/1 Poppins; color: rgba(255,255,255,.75);
}
.login__btn {
  position: absolute; left: 28px; top: 520px; width: 315px; height: 54px; border-radius: 27px;
  border: 1.5px solid rgba(255,255,255,.85); display: grid; place-items: center; font: 500 13px/1 Poppins; letter-spacing: .08em;
}
.login__foot { position: absolute; left: 0; right: 0; top: 700px; text-align: center; font: 400 13px/1 Poppins; color: rgba(255,255,255,.8); }
.login__foot b { color: #fff; }

/* --------------------------------------------------------------------------
   Grille d'écrans
   -------------------------------------------------------------------------- */
.dev__screens {
  position: relative;
  margin-top: 400px;
  width: 100%;
}
@media (max-width: 991px) { .dev__screens { margin-top: 200px; } }

.dev__screens-wrapper {
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.screens { padding-bottom: var(--screens-pb); }
.screens__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.screens__item {
  position: relative;
  flex-shrink: 0;
  margin: var(--card-gap);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
}
.screens__logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(72, 88, 228, .4);
  color: #fff;
  font: 700 calc(var(--card-w) * .095) / 1 Syne, Inter, sans-serif;
  letter-spacing: -.01em;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  cursor: pointer;
}
.screens__item:hover .screens__logo { opacity: 1; }

/* --------------------------------------------------------------------------
   Main sticky + téléphone
   -------------------------------------------------------------------------- */
.dev__hand-wrapper {
  /* Au-dessus du voile de survol des cartes (.screens__logo, z-index 2)
     et des téléphones flottants (z-index 3). Sans ce z-index, « auto »
     perd contre le 2 du voile et le bleu passait devant la main. */
  z-index: 4;
  position: absolute;
  left: 0;
  top: calc(var(--hand-offset) * -1);
  width: 100%;
  height: calc(100% + var(--hand-offset));
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.dev__hand {
  position: sticky;
  bottom: 0;
  margin: auto auto 0;          /* posée en bas du wrapper, "remontée" par sticky */
  width: 100%;
  height: var(--hand-h);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.dev__hand-image {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--hand-w);
  min-width: var(--hand-w);
  height: auto;
  user-select: none;
}

/* L'écran animé qui remplace la vidéo de l'original */
.phone-screen {
  position: absolute;
  z-index: 2;
  top: calc(var(--hand-w) * var(--scr-top) / 100);
  left: calc(50% + var(--hand-w) * var(--scr-x) / 100);
  width: calc(var(--hand-w) * var(--scr-w) / 100);
  height: calc(var(--hand-w) * var(--scr-h) / 100);
  border-radius: calc(var(--hand-w) * var(--scr-r) / 100);
  transform: translateX(-50%);
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* Cadre de téléphone CSS, affiché tant que l'image de la main n'existe pas */
.phone-frame {
  display: none;
  position: absolute;
  z-index: 1;
  top: calc(var(--hand-w) * (var(--scr-top) - 1.13) / 100);
  left: calc(50% + var(--hand-w) * var(--scr-x) / 100);
  width: calc(var(--hand-w) * (var(--scr-w) + 2.08) / 100);
  height: calc(var(--hand-w) * (var(--scr-h) + 2.13) / 100);
  border-radius: calc(var(--hand-w) * (var(--scr-r) + 1.04) / 100);
  transform: translateX(-50%);
  padding: calc(var(--hand-w) * .3 / 100);
  background: linear-gradient(150deg, #e17d8d 0%, #a83045 28%, #c9566a 55%, #8a2236 80%, #c55a6c 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.phone-frame::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #050505;
}
.phone-frame::after {          /* bouton latéral */
  content: "";
  position: absolute;
  right: calc(var(--hand-w) * -.18 / 100);
  top: 26%;
  width: calc(var(--hand-w) * .22 / 100);
  height: 13%;
  border-radius: 0 3px 3px 0;
  background: #9c2b40;
}
.dev__hand.is-fallback .dev__hand-image { visibility: hidden; }
.dev__hand.is-fallback .phone-frame { display: block; }

/* Mode alignement : index.html?align */
.is-align .phone-screen { outline: 2px dashed #00e5ff; outline-offset: 0; opacity: .55; }
.is-align .dev__hand { overflow: visible; }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .dev__marquee-track, .fphone { animation: none; }
}


/* ===== cards.css ===== */
/* ==========================================================================
   Les 12 écrans de la grille — recréés en HTML/CSS
   Canvas de design : 349 × 737 px, mis à l'échelle via --card-scale
   ========================================================================== */

.mb-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  background: #fff;
}
.card--empty { background: transparent; }
.card__ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 349px;
  height: 737px;
  transform: scale(var(--card-scale));
  transform-origin: 0 0;
  line-height: 1;
}
.card__ui .mb-p { position: absolute; }
.card__ui p, .card__ui h5 { margin: 0; font-weight: inherit; }
:where(.card__ui) svg.mb-i { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__ui .mb-av { border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #d9c7b4, #8d6e5a); }
/* Une vraie image (assets/cards/…) recouvre l'illustration de secours si elle existe */
.card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ---------- 1. Tissu (photo) ---------- */
.c-fabric { background: #2f62b5; }

/* ---------- 2. Health Overview ---------- */
.c-health { background: #fff; color: #161616; font-family: Lexend, sans-serif; }
.c-health__name { left: 82px; top: 75px; font-size: 13px; font-weight: 500; }
.c-health__menu { left: 279px; top: 57px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #e9e9e9; display: grid; place-content: center; gap: 4px; }
.c-health__menu i { width: 17px; height: 1.8px; border-radius: 1px; background: #161616; }
.c-health__title { left: 19px; top: 129px; font-size: 33px; font-weight: 400; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.c-health__badge { width: 20px; height: 20px; border-radius: 50%; border: 1.4px solid #aaa; color: #999; font-size: 12px; display: grid; place-items: center; }
.c-health__sub { left: 20px; top: 179px; font-size: 14px; font-weight: 300; color: #8f8f8f; }
.c-health__box { border: 1.2px solid #dcebdf; border-radius: 18px; }
.c-health__pie { left: 43px; top: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(#4b3e70 0 86deg, #fff 86deg 92deg, #d9cff5 92deg 356deg, #fff 356deg); }
.c-health__pie::after { content: ""; position: absolute; left: 31px; top: -3px; width: 30px; height: 30px; border-radius: 0 30px 0 0; background: #4b3e70; transform-origin: 0 100%; transform: rotate(-1deg); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); opacity: 0; }
.c-health__val { left: 30px; top: 96px; display: flex; align-items: baseline; gap: 6px; }
.c-health__val b { font-size: 31px; font-weight: 600; letter-spacing: -.02em; }
.c-health__val small { font-size: 13px; color: #6aa57f; }
.c-health__of { left: 0; right: 0; top: 129px; text-align: center; font-size: 13px; color: #6aa57f; }
.c-health__select { left: 183px; top: 218px; width: 145px; height: 33px; border: 1.2px solid #e2ece4; border-radius: 17px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; font-size: 13px; font-weight: 500; }
.c-health__select svg { width: 14px; height: 14px; }
.c-health__ic { width: 38px; height: 38px; padding: 11px; border-radius: 50%; background: #ddd4f7; color: #8a7bd4; }
.c-health__ic svg.mb-i { stroke-width: 2; }
.c-health__label { left: 21px; top: 22px; font-size: 16px; font-weight: 500; }
.c-health__label-ico { right: 20px; top: 22px; width: 16px; height: 16px; color: #8a7dc9; }
.c-health__num { left: 21px; top: 53px; display: flex; align-items: baseline; gap: 7px; }
.c-health__num b { font-size: 29px; font-weight: 600; letter-spacing: -.02em; }
.c-health__num small { font-size: 13px; color: #8a7dc9; }
.c-health__vitals { left: 19px; top: 519px; width: 309px; height: 98px; border-radius: 18px; background: #dcd4f6;
  -webkit-mask: radial-gradient(circle at 285px 25px, transparent 32px, #000 32.5px);
          mask: radial-gradient(circle at 285px 25px, transparent 32px, #000 32.5px); }
.c-health__vital { top: 18px; }
.c-health__vital-h { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.c-health__vital-h svg { width: 17px; height: 17px; color: #555; }
.c-health__vital-v { margin-top: 13px; display: flex; align-items: baseline; gap: 8px; }
.c-health__vital-v b { font-size: 31px; font-weight: 600; letter-spacing: -.02em; }
.c-health__vital-v small { font-size: 13px; color: #8b8b8b; }
.c-health__more { left: 280px; top: 520px; width: 48px; height: 48px; border-radius: 50%; background: #121212; display: flex; align-items: center; justify-content: center; gap: 3.5px; }
.c-health__more i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #fff; }
.c-health__nav { left: 19px; top: 652px; width: 309px; height: 60px; border-radius: 18px; background: #121212; color: #fff; }
.c-health__bump { left: 142px; top: 633px; width: 64px; height: 64px; border-radius: 50%; background: #121212; }
.c-health__plus { left: 153px; top: 645px; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: #d9d0f8; color: #121212; }
.c-health__nav-ic { top: 20px; width: 19px; height: 19px; }
.c-health__nav-ic svg.mb-i { stroke-width: 1.6; }
.c-health__nav-line { left: 34px; top: 46px; width: 10px; height: 2px; border-radius: 1px; background: #fff; }

/* ---------- 3. Goals (sombre) ---------- */
.c-goals { background: #171717; color: #fff; font-family: Poppins, sans-serif; }
.c-goals__burger { left: 25px; top: 43px; display: grid; gap: 8px; }
.c-goals__burger i { height: 2px; width: 26px; border-radius: 1px; background: #fff; }
.c-goals__burger i + i { width: 18px; }
.c-goals__head { left: 0; right: 0; top: 41px; text-align: center; font-size: 17px; font-weight: 500; }
.c-goals__av { left: 288px; top: 32px; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #9ef09e; }
.c-goals__hl { left: 20px; top: 124px; font-size: 34px; line-height: 41px; font-weight: 500; letter-spacing: -.01em; }
.c-goals__squiggle { left: 138px; top: 224px; width: 176px; height: 30px; }
.c-goals__squiggle path { fill: none; stroke: #79e06b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-goals__my { left: 19px; top: 305px; font-size: 12px; color: #8a8a8a; }
.c-goals__my b { color: #4f6bff; font-weight: 400; margin-left: 4px; }
.c-goals__add { left: 306px; top: 302px; width: 20px; height: 20px; color: #4f6bff; }
.c-goals__stack { left: 31px; top: 396px; width: 287px; height: 22px; border-radius: 0 0 14px 14px; background: #222; }
.c-goals__run { left: 19px; top: 336px; width: 310px; height: 69px; border-radius: 16px; background: #282828; }
.c-goals__run-ic { left: 18px; top: 13px; width: 44px; height: 44px; border-radius: 11px; border: 1px solid #3c3c3c; background: #1e1e1e; display: grid; place-items: center; font-size: 21px; }
.c-goals__run-t { left: 73px; top: 27px; font-size: 15px; font-weight: 500; }
.c-goals__bar { left: 197px; top: 33px; width: 30px; height: 4px; border-radius: 2px; background: #3a3a3a; }
.c-goals__bar::before { content: ""; position: absolute; inset: 0 25% 0 0; border-radius: inherit; background: #6ee26e; }
.c-goals__pct { left: 234px; top: 30px; font-size: 10px; color: #6a6a6a; }
.c-goals__chev { left: 270px; width: 15px; height: 15px; }
.c-goals__park { left: 19px; top: 444px; width: 310px; height: 146px; border-radius: 18px; background: #202020; }
.c-goals__park-t { left: 24px; top: 28px; font-size: 18px; font-weight: 500; }
.c-goals__park-meta { left: 24px; top: 58px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8a8a8a; }
.c-goals__park-meta svg { width: 14px; height: 14px; }
.c-goals__park-meta i { width: 3px; height: 3px; border-radius: 50%; background: #fff; font-style: normal; }
.c-goals__park-avs { left: 26px; top: 94px; display: flex; align-items: center; }
.c-goals__park-avs img { width: 32px; height: 32px; border: 2px solid #202020; margin-left: -8px; }
.c-goals__park-avs img:first-child { margin-left: 0; }
.c-goals__park-avs b { margin-left: 10px; font-size: 13px; font-weight: 500; color: #6ee26e; }
.c-goals__map { left: 203px; top: 11px; width: 98px; height: 125px; border-radius: 14px; overflow: hidden; }
.c-goals__track { left: 52px; top: 640px; width: 248px; height: 70px; border-radius: 20px; background: #2a2a2a; }
.c-goals__play { left: 13px; top: 12px; width: 45px; height: 45px; border-radius: 13px; background: #7ee787; color: #111; padding: 15px 14px 15px 16px; }
.c-goals__track-t { left: 73px; top: 27px; font-size: 15px; font-weight: 500; }
.c-goals__chevs { left: 185px; top: 26px; display: flex; gap: 0; }
.c-goals__chevs svg { width: 17px; height: 17px; margin-left: -4px; stroke-width: 2.2; }
.c-goals__chevs svg:nth-child(2) { color: #777; }
.c-goals__chevs svg:nth-child(3) { color: #444; }

/* ---------- 4. Share your location ---------- */
.c-share {
  color: #141414; font-family: Inter, sans-serif;
  background:
    radial-gradient(60% 34% at 104% -3%, rgba(110, 228, 255, .85) 0%, rgba(150, 190, 255, .45) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 34% at -12% 104%, rgba(255, 110, 235, .8) 0%, rgba(255, 170, 240, .45) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(40% 22% at 108% 98%, rgba(180, 150, 255, .35) 0%, rgba(255, 255, 255, 0) 100%),
    #fff;
}
.c-share__t1 { left: 0; right: 0; top: 92px; text-align: center; font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.c-share__t2 { left: 0; right: 0; top: 123px; text-align: center; font-size: 20px; font-weight: 400; }
.c-share__glow { left: 112px; top: 322px; width: 126px; height: 40px; border-radius: 50%; background: rgba(160, 140, 255, .45); filter: blur(16px); }
.c-share__pin { left: 137px; top: 251px; width: 76px; height: 96px; }
.c-share__txt { left: 0; right: 0; top: 452px; text-align: center; font-size: 15px; line-height: 26.5px; color: #555; font-weight: 400; }
.c-share__dots { left: 0; right: 0; top: 570px; display: flex; justify-content: center; gap: 9px; }
.c-share__dots i { width: 5px; height: 5px; border-radius: 50%; background: #e3e3e3; }
.c-share__dots i:first-child { background: #111; }
.c-share__btn { left: 132px; top: 626px; width: 88px; height: 88px; border-radius: 26px; background: #000; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 500; }

/* ---------- 5. NFT "Rehuman" ---------- */
.c-nft { background: #6b3ff6; color: #111; font-family: Poppins, sans-serif; }
.c-nft__top { left: 17px; top: 37px; font-size: 14px; font-weight: 600; color: #fff; }
.c-nft__filter { left: 163px; top: 36px; width: 20px; height: 18px; color: #fff; }
.c-nft__tab { left: 153px; top: 70px; width: 40px; height: 3px; border-radius: 2px; background: #fff; }
.c-nft__av { left: 303px; top: 29px; width: 32px; height: 32px; }
.c-nft__panel { left: 0; top: 81px; width: 349px; height: 680px; border-radius: 32px 32px 0 0; overflow: hidden; background: #c3c3c3; }
.c-nft__panel > * { position: absolute; }
.c-nft__portrait { left: 0; top: 0; width: 349px; height: 439px; }
.c-nft__tag { left: 17px; top: 22px; display: grid; gap: 1px; justify-items: start; }
.c-nft__tag span { background: #fff; padding: 4px 6px 3px; font-size: 11px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; border-radius: 4px; }
.c-nft__dots { left: 293px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; gap: 3px; }
.c-nft__dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.c-nft__price { left: 17px; top: 366px; width: 141px; height: 56px; border-radius: 28px; background: #fff; }
.c-nft__eth { position: absolute; left: 16px; top: 17px; width: 15px; height: 22px; }
.c-nft__price b { position: absolute; left: 41px; top: 10px; font-size: 18px; font-weight: 700; }
.c-nft__price small { position: absolute; left: 41px; top: 33px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #2fbf4a; }
.c-nft__price small i { width: 10px; height: 10px; border-radius: 50%; background: #2fbf4a; display: grid; place-items: center; }
.c-nft__price small i::before { content: ""; border: 2.5px solid transparent; border-bottom: 3px solid #fff; margin-top: -3px; }
.c-nft__buy { left: 177px; top: 366px; width: 154px; height: 56px; border-radius: 28px; background: #fff; }
.c-nft__buy > span:first-child { position: absolute; left: 24px; top: 21px; font-size: 13.5px; font-weight: 600; }
.c-nft__heart { position: absolute; right: 5px; top: 5px; width: 46px; height: 46px; padding: 13px; border-radius: 50%; background: #ffe0ef; color: #ff6fbf; }
.c-nft__heart svg.mb-i { fill: currentColor; stroke: none; }
.c-nft__strip { left: 0; top: 439px; width: 349px; height: 104px; }
.c-nft__bottom { left: 0; top: 543px; width: 349px; height: 140px; background: linear-gradient(#cfcfcf, #b2b2b2); }
.c-nft__orange { left: 0; top: 634px; width: 349px; height: 60px; background: linear-gradient(90deg, #a9431a, #d0602b 60%, #8b3412); }
.c-nft__actions { left: 0; right: 0; top: 576px; display: flex; justify-content: center; }
.c-nft__act { height: 51px; min-width: 51px; border-radius: 26px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.c-nft__act svg { width: 20px; height: 20px; }
.c-nft__act--wide { padding: 0 18px; margin: 0 -2px; }

/* ---------- 6. Balance ---------- */
.c-balance { background: linear-gradient(#f4f4f4, #efefef); color: #141414; font-family: "Inter Tight", Inter, sans-serif; }
.c-balance__logo { left: 22px; top: 56px; width: 27px; height: 27px; background: #141414; transform: rotate(45deg); border-radius: 3px; }
.c-balance__logo-dot { left: 42px; top: 64px; width: 12px; height: 12px; border-radius: 50%; background: #9a9a9a; border: 2px solid #f3f3f3; }
.c-balance__date { left: 64px; top: 63px; font-size: 12px; }
.c-balance__cards { left: 170px; top: 49px; width: 95px; height: 38px; border-radius: 19px; border: 1.2px solid #dcdcdc; background: #fafafa; display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 15px; }
.c-balance__cards span { width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: #141414; color: #fff; }
.c-balance__avs { left: 273px; top: 51px; display: flex; }
.c-balance__avs img { width: 35px; height: 35px; border: 2px solid #f3f3f3; margin-left: -8px; }
.c-balance__avs img:first-child { margin-left: 0; }
.c-balance__hello { left: 20px; top: 112px; font-size: 14px; color: #a6a6a6; font-weight: 300; }
.c-balance__title { left: 19px; top: 146px; font-size: 50px; font-weight: 400; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 10px; }
.c-balance__title small { font-size: 22px; color: #bbb; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.c-balance__title small::after { content: ""; border: 4px solid transparent; border-top: 5px solid #999; margin-top: 6px; }
.c-balance__amount { left: 20px; top: 214px; font-size: 47px; font-weight: 300; letter-spacing: -.03em; }
.c-balance__amount span { color: #c6c6c6; }
.c-balance__delta { left: 289px; top: 241px; font-size: 12px; }
.c-balance__mini { top: 283px; width: 139px; height: 172px; border-radius: 22px; overflow: hidden; }
.c-balance__mini-h { position: absolute; left: 12px; top: 13px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.c-balance__mini-h span { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(0,0,0,.08); }
.c-balance__mini-in { position: absolute; left: 6px; right: 6px; top: 58px; bottom: 6px; border-radius: 18px; background: #f6f6f4; }
.c-balance__mini-in > * { position: absolute; left: 14px; }
.c-balance__mini-card { top: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.c-balance__mini-card img { width: 26px; height: 26px; }
.c-balance__mini-time { top: 54px; font-size: 14px; color: #b5b5b5; font-weight: 300; }
.c-balance__mini-sum { top: 80px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.c-balance__mini-sum small { font-size: 13px; }
.c-balance__curve { left: 14px; top: 472px; width: 321px; height: 290px; border-radius: 26px; background: #e9e9e9; }
.c-balance__curve > * { position: absolute; }
.c-balance__curve-t { left: 17px; top: 21px; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.c-balance__curve-t::after { content: ""; border: 4px solid transparent; border-top: 5px solid #141414; margin-top: 5px; }
.c-balance__curve-v { left: 191px; top: 22px; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.c-balance__curve-v span { color: #b9b9b9; }
.c-balance__curve-btn { left: 278px; top: 20px; width: 32px; height: 32px; padding: 8px; border-radius: 50%; border: 1.2px solid #c9c9c9; color: #a3a3a3; }
.c-balance__chart { left: 0; top: 0; width: 321px; height: 265px; }
.c-balance__x { left: 50px; right: 12px; top: 222px; display: flex; justify-content: space-between; font-size: 11px; }
.c-balance__x span small { color: #b5b5b5; font-size: 11px; }

/* ---------- 7. Sphères (art 3D) ---------- */
.c-spheres { background: #e9edf4; }
.c-spheres canvas { position: absolute; left: 0; top: 0; width: 349px; height: 737px; }
.c-spheres__ic { width: 15px; height: 15px; border-radius: 50%; border: 1.4px solid #a5adbd; }

/* ---------- 8. Good morning Charlie ---------- */
.c-dog { background: #fff; color: #121212; font-family: Syne, sans-serif; }
.c-dog__menu { left: 38px; top: 38px; width: 44px; height: 44px; border-radius: 50%; background: #f3f3f3; display: grid; place-content: center; gap: 5px; }
.c-dog__menu i { height: 2px; border-radius: 1px; background: #222; width: 14px; }
.c-dog__menu i:first-child { width: 9px; }
.c-dog__hello { left: 38px; top: 117px; font-size: 29px; line-height: 37px; font-weight: 700; letter-spacing: -.005em; }
.c-dog__hello span { color: #f2533b; }
.c-dog__card { left: 38px; top: 328px; width: 274px; height: 234px; border-radius: 24px; background: #fcd34f; }
.c-dog__art { left: 52px; top: 226px; width: 262px; height: 252px; }
.c-dog__fun { left: 64px; top: 488px; font-size: 15.5px; line-height: 23px; font-weight: 700; }
.c-dog__go { left: 236px; top: 488px; width: 54px; height: 54px; padding: 17px; border-radius: 50%; background: #fff; color: #f2533b; }
.c-dog__go svg.mb-i { stroke-width: 2.4; }
.c-dog__today { left: 38px; top: 601px; font-size: 21px; font-weight: 700; }
.c-dog__nav { left: 30px; top: 645px; width: 290px; height: 80px; border-radius: 28px; background: #f4f4f4; }
.c-dog__nav-in { position: absolute; left: 8px; right: 8px; top: 12px; height: 61px; border-radius: 31px; background: #fff; display: flex; align-items: center; justify-content: space-around; }
.c-dog__nav-in > * { width: 24px; height: 24px; }

/* ---------- 9. Smart Hub ---------- */
.c-hub { background: linear-gradient(#f8fafd, #f3f6fb); color: #1b1d2b; font-family: Lexend, sans-serif; }
.c-hub__shape { left: 0; top: 0; width: 349px; height: 737px; }
.c-hub__dots { left: 298px; top: 38px; display: grid; grid-template-columns: repeat(2, 4px); gap: 9px; }
.c-hub__dots i { width: 4px; height: 4px; border-radius: 50%; background: #c9cfd9; }
.c-hub__title { left: 34px; top: 80px; font-size: 29px; font-weight: 500; letter-spacing: -.005em; }
.c-hub__sub { left: 35px; top: 120px; font-size: 12px; color: #b4bdcc; font-family: Lexend, sans-serif; font-weight: 300; }
.c-hub__add { left: 262px; top: 86px; width: 55px; height: 74px; border-radius: 15px; color: #fff; padding: 25px 16px;
  background: linear-gradient(160deg, #ff2fd3 0%, #a23cf6 45%, #3b5bff 100%);
  box-shadow: 0 16px 26px -8px rgba(60, 90, 255, .55); }
.c-hub__add svg.mb-i { stroke-width: 2.4; }
.c-hub__dial { left: 25px; top: 175px; width: 300px; height: 300px; }
.c-hub__lbl { font-size: 11px; color: #b8c4d8; font-family: Lexend, sans-serif; font-weight: 300; }
.c-hub__lbl sup { font-size: 7px; }
.c-hub__temp { left: 0; right: 0; top: 296px; text-align: center; font-size: 46px; font-weight: 500; letter-spacing: -.01em; }
.c-hub__temp sup { font-size: 16px; vertical-align: 26px; margin-left: 2px; }
.c-hub__room { left: 0; right: 0; top: 357px; text-align: center; font-size: 8px; line-height: 11px; letter-spacing: .06em; color: #8a93a6; font-family: Lexend, sans-serif; }
.c-hub__stat { top: 509px; }
.c-hub__stat b { display: block; font-size: 29px; font-weight: 500; letter-spacing: -.01em; }
.c-hub__stat b sup { font-size: 12px; vertical-align: 14px; }
.c-hub__stat span { display: block; margin-top: 8px; font-size: 12px; color: #b4bdcc; font-family: Lexend, sans-serif; font-weight: 300; }
.c-hub__finger { left: 130px; top: 610px; width: 90px; height: 90px; border-radius: 50%; background: #fff; color: #9fb0cf; padding: 26px;
  box-shadow: 0 0 0 16px rgba(214, 228, 250, .7), 0 12px 30px rgba(110, 150, 230, .35); }
.c-hub__finger svg.mb-i { stroke-width: 1.4; }
.c-hub__start { left: 0; right: 0; top: 716px; text-align: center; font-size: 9px; letter-spacing: .08em; color: #b9c2d2; font-family: Lexend, sans-serif; }
.c-hub__ic { top: 680px; width: 20px; height: 20px; color: #6d90d9; }

/* ---------- 10. Plante 3D (art) ---------- */
.c-plant { background: radial-gradient(90% 60% at 60% 40%, #f0f1f3, #e2e4e7); }
.c-plant svg.mb-art { position: absolute; left: 0; top: 0; width: 349px; height: 737px; }

/* ---------- 11. US Dollar wallet ---------- */
.c-wallet { background: #f5f5f1; color: #141414; font-family: Poppins, sans-serif; }
.c-wallet__top { left: 0; top: 0; width: 349px; height: 460px; border-radius: 0 0 30px 30px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.03); }
.c-wallet__cur { left: 30px; top: 51px; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.c-wallet__cur svg { width: 18px; height: 18px; border-radius: 50%; }
.c-wallet__bell { left: 246px; top: 48px; width: 23px; height: 23px; }
.c-wallet__bell::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ef3b3b; }
.c-wallet__more { left: 302px; top: 58px; display: flex; gap: 6px; }
.c-wallet__more i { width: 4px; height: 4px; border-radius: 50%; background: #222; }
.c-wallet__amount { left: 0; right: 0; top: 150px; display: flex; justify-content: center; align-items: flex-start; gap: 4px; }
.c-wallet__amount span { font-size: 22px; font-weight: 500; margin-top: 6px; }
.c-wallet__amount b { font-size: 47px; font-weight: 700; letter-spacing: -.01em; line-height: 48px; }
.c-wallet__amount small { font-size: 20px; font-weight: 500; margin-top: 4px; }
.c-wallet__add { left: 112px; top: 230px; width: 125px; height: 37px; border-radius: 19px; border: 1px solid #ececec; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(0,0,0,.03); }
.c-wallet__add i { width: 14px; height: 14px; border-radius: 50%; background: #c8e85a; display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; font-weight: 600; }
.c-wallet__send { left: 30px; top: 325px; width: 52px; height: 52px; padding: 15px; border-radius: 50%; background: #d3ee5c; box-shadow: 0 14px 26px -6px rgba(200, 232, 80, .75); }
.c-wallet__person { top: 325px; width: 52px; text-align: center; font-size: 11px; font-weight: 500; }
.c-wallet__person img { width: 52px; height: 52px; margin-bottom: 11px; }
.c-wallet__handle { left: 160px; top: 443px; width: 30px; height: 3px; border-radius: 2px; background: #333; }
.c-wallet__today { left: 30px; right: 30px; top: 491px; display: flex; justify-content: space-between; font-size: 13px; color: #8a8a8a; }
.c-wallet__row { left: 30px; right: 30px; height: 46px; }
.c-wallet__row > * { position: absolute; }
.c-wallet__row-ic { left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 20px; }
.c-wallet__row-n { left: 60px; top: 7px; font-size: 13px; font-weight: 500; }
.c-wallet__row-t { left: 60px; top: 28px; font-size: 11px; color: #ababab; }
.c-wallet__row-v { right: 0; top: 14px; font-size: 15px; font-weight: 500; }
.c-wallet__nav { top: 677px; width: 23px; height: 23px; color: #333; }
.c-wallet__nav svg.mb-i { stroke-width: 1.6; }

/* ---------- 12. Pacific Coast ---------- */
.c-travel { background: #fff; color: #3b3554; font-family: Lexend, sans-serif; }
.c-travel__topo { left: 150px; top: -10px; width: 210px; height: 230px; }
.c-travel__topo path { fill: none; stroke: #efefef; stroke-width: 1.2; }
.c-travel__back { left: 28px; top: 27px; width: 16px; height: 16px; color: #222; }
.c-travel__back svg.mb-i { stroke-width: 2.4; }
.c-travel__search { left: 292px; top: 23px; width: 24px; height: 24px; padding: 5.5px; border-radius: 7px; background: #fff0e6; color: #f26b2a; }
.c-travel__search svg.mb-i { stroke-width: 2.6; }
.c-travel__title { left: 40px; top: 97px; font-size: 26px; line-height: 36px; font-weight: 600; letter-spacing: .005em; }
.c-travel__pill { left: 40px; top: 182px; height: 29px; padding: 0 7px; border-radius: 6px; background: #fff1e6; color: #f05a1a; display: flex; align-items: center; font-size: 11px; font-weight: 600; }
.c-travel__cost { left: 32px; top: 266px; width: 330px; height: 62px; border-radius: 18px 0 0 18px; background: #f8f5ef; }
.c-travel__cost > * { position: absolute; top: 24px; }
.c-travel__cost b { font-weight: 600; }
.c-travel__item { left: 32px; right: 30px; height: 60px; }
.c-travel__item > * { position: absolute; }
.c-travel__thumb { left: 0; top: 0; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; }
.c-travel__days { left: 78px; top: 3px; font-size: 12px; font-weight: 600; color: #5b3fa8; }
.c-travel__loc { left: 78px; top: 21px; font-size: 11px; line-height: 14px; color: #555; font-weight: 400; }
.c-travel__plus { right: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fde3d6; color: #f05a1a; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.c-travel__price { right: 0; top: 50px; font-size: 11px; font-weight: 600; color: #5b3fa8; }
.c-travel__price small { font-size: 7px; }


/* ===== app.css ===== */
/* ==========================================================================
   Écran animé du téléphone (remplace phone.mp4 de l'original)
   Canvas de design : 371 × 788 px, mis à l'échelle via --app-scale
   ========================================================================== */

.app {
  --cream: #f7e7c5;
  position: absolute;
  left: 0;
  top: 0;
  width: 371px;
  height: 788px;
  overflow: hidden;
  transform: scale(var(--app-scale));
  transform-origin: 0 0;
  background: #fff;
  color: #151515;
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 400;
  line-height: 1;
}
.app p, .app h4, .app h5 { margin: 0; font-weight: 400; }
.app svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .mb-av { border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #d9c7b4, #8d6e5a); }

.app-a, .app-b { position: absolute; inset: 0; }
.app-a { background: #fff; }
.app-a > *, .app-b > * { position: absolute; }

/* Barre de statut + indicateur home (communs aux 2 écrans) */
.app-status { position: absolute; inset: 0 0 auto; height: 50px; z-index: 5; color: #111; }
.app-status__time { position: absolute; left: 47px; top: 18px; font: 600 16px/18px Inter, sans-serif; letter-spacing: -.01em; }
.app-status__island { position: absolute; left: 127px; top: 12px; width: 116px; height: 27px; border-radius: 14px; background: #000; }
.app-status__icons { position: absolute; right: 31px; top: 20px; display: flex; align-items: center; gap: 5px; font: 600 13px/1 Inter, sans-serif; }
.app-status__signal { display: flex; align-items: flex-end; gap: 1.6px; height: 11px; }
.app-status__signal i { width: 3px; border-radius: 1px; background: #111; }
.app-status__signal i:nth-child(1) { height: 4px; }
.app-status__signal i:nth-child(2) { height: 6px; }
.app-status__signal i:nth-child(3) { height: 8.5px; }
.app-status__signal i:nth-child(4) { height: 11px; }
.app-status__battery { position: relative; width: 24px; height: 12px; border-radius: 3.5px; border: 1px solid rgba(0,0,0,.35); padding: 1.5px; margin-left: 2px; }
.app-status__battery::before { content: ""; display: block; width: 85%; height: 100%; border-radius: 2px; background: #111; }
.app-status__battery::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 1.8px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0,0,0,.4); }
.app-home { position: absolute; z-index: 5; left: calc(50% - 53px); bottom: 11px; width: 106px; height: 5px; border-radius: 3px; background: #111; }

/* ---------- Écran A : "Your Projects" ---------- */
.a-menu { left: 22px; top: 58px; display: grid; grid-template-columns: repeat(2, 4.5px); gap: 10.5px; }
.a-menu i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #151515; }
.a-menu i:first-child { background: #cfcfcf; }
.a-avatar { left: 314px; top: 54px; width: 32px; height: 32px; }
.a-hello { left: 22px; top: 115px; font-size: 14px; color: #9d9d9d; }
.a-title { left: 21px; top: 137px; font-size: 55px; line-height: 54px; letter-spacing: -.025em; }
.a-title span { display: block; }

.a-cards { left: 22px; top: 271px; display: flex; gap: 17px; z-index: 3; }
.a-card { position: relative; flex-shrink: 0; width: 219px; height: 228px; border-radius: 24px; }
.a-card--admin { background: var(--cream); z-index: 2; }
.a-card--wallet { background: #dee9e8; }
.a-card__ico { position: absolute; left: 10px; top: 12px; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: #151515; color: #fff; }
.a-card__arrow { position: absolute; right: 11px; top: 12px; width: 34px; height: 34px; padding: 8px; border-radius: 50%; border: 1.3px solid #6e6150; color: #6e6150; }
.a-card__arrow svg { stroke-width: 1.5; }
.a-card__name { position: absolute; left: 11px; top: 93px; font-size: 36px; line-height: 37px; letter-spacing: -.02em; color: #161616; }
.a-card--wallet .a-card__name { left: 10px; top: 89px; font-family: "Times New Roman", Times, serif; font-size: 40px; line-height: 38px; letter-spacing: -.01em; }
.a-pill { position: absolute; left: 11px; bottom: 10px; height: 38px; padding: 0 12px 0 7px; border-radius: 19px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8d806a; background: rgba(160, 118, 40, .1); }
.a-card--wallet .a-pill { color: #8a9898; background: rgba(40, 90, 90, .08); }
.a-avs { display: flex; }
.a-avs img { width: 24px; height: 24px; border: 1.5px solid var(--cream); margin-left: -9px; }
.a-avs img:first-child { margin-left: 0; }
.a-card--wallet .a-avs img { border-color: #dee9e8; }
.a-progress { position: absolute; right: 11px; bottom: 28px; width: 70px; height: 3px; border-radius: 2px; background: #dccaa4; }
.a-progress::before { content: ""; position: absolute; inset: 0 62% 0 0; border-radius: inherit; background: #151515; }

.a-week { left: -6px; top: 532px; width: 383px; display: flex; justify-content: space-between; font-size: 12px; color: #2b2b2b; }
.a-tools { inset: 0; pointer-events: none; }
.a-tools > * { position: absolute; }
.a-ind { left: 241px; top: 553px; width: 5px; height: 5px; border-radius: 50%; background: #151515; }
.a-ind::after { content: ""; position: absolute; left: 2px; top: 4px; width: 1px; height: 13px; background: #151515; }
.a-show { left: 22px; top: 573px; display: flex; align-items: center; gap: 9px; font-size: 12px; }
.a-show span { width: 23px; height: 23px; padding: 6px; border-radius: 50%; background: #151515; color: #fff; }
.a-show span svg { stroke-width: 2.6; }
.a-today { left: 209px; top: 569px; width: 72px; height: 31px; padding: 0 6px; border: 1.3px solid #1c1c1c; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.a-today svg { width: 10px; height: 10px; stroke-width: 2; }

.a-times { inset: 0; pointer-events: none; }
.a-times span { position: absolute; left: 22px; font-size: 11.5px; color: #ababab; }

.a-meeting { left: 84px; top: 618px; width: 260px; height: 104px; border-radius: 18px; background: #dcebd5; overflow: hidden; }
.a-meeting__deco { position: absolute; right: 0; top: 0; width: 150px; height: 104px; }
.a-meeting__deco circle { fill: none; stroke: rgba(70, 105, 70, .35); stroke-width: 1; }
.a-meeting__ico { position: absolute; left: 11px; top: 10px; width: 23px; height: 23px; padding: 5.5px; border-radius: 50%; background: #c4dfbc; color: #4f7d47; }
.a-meeting__avs { position: absolute; right: 9px; top: 10px; display: flex; }
.a-meeting__avs img { width: 24px; height: 24px; border: 1.5px solid #dcebd5; margin-left: -8px; }
.a-meeting__title { position: absolute; left: 9px; top: 58px; font-size: 17px; line-height: 19.5px; color: #161616; }

.a-edits { left: 84px; top: 731px; width: 260px; height: 40px; border-radius: 20px; background: #f3f3f3; }
.a-edits__pill { position: absolute; left: 2px; top: 1px; height: 38px; width: 102px; padding-left: 5px; border-radius: 19px; background: #dbd2f8; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.a-edits__pill span { width: 28px; height: 28px; padding: 7.5px; border-radius: 50%; background: #bdaff3; color: #2a2152; }
.a-edits img { position: absolute; right: 12px; top: 9px; width: 22px; height: 22px; }
.a-next { left: 84px; top: 781px; width: 260px; height: 30px; border-radius: 15px; background: #e9f1fb; }

.a-ripple { left: 112px; top: 365px; width: 40px; height: 40px; border-radius: 50%; background: rgba(150, 130, 240, .55); opacity: 0; z-index: 4; }
.a-expand { inset: 0; z-index: 4; background: var(--cream); opacity: 0; clip-path: inset(197px 0px 215px 0px round 30px); }

/* ---------- Écran B : "Planning" ---------- */
.app-b { background: var(--cream); z-index: 4; }
.b-head { inset: 0 0 auto; height: 100px; }
.b-back { position: absolute; left: 21px; top: 66px; width: 38px; height: 12px; }
.b-back svg { stroke-width: 2.4; }
.b-done { position: absolute; right: 24px; top: 65px; font-size: 14px; }
.b-title { left: 20px; top: 113px; font-size: 61px; line-height: 1; letter-spacing: -.03em; }
.b-date { left: 22px; top: 181px; font-size: 13px; color: #b3a383; }

.b-cal { left: 22px; top: 223px; width: 117px; height: 92px; border-radius: 18px; background: #151515; color: #fff; }
.b-cal__day { position: absolute; left: 16px; top: 23px; font-size: 35px; letter-spacing: -.02em; }
.b-cal__sub { position: absolute; left: 16px; top: 61px; font-size: 11px; }
.b-badge { left: 110px; top: 215px; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); padding: 4px; }
.b-badge span { display: block; width: 26px; height: 26px; padding: 6px; border-radius: 50%; border: 1.3px solid #1c1c1c; }
.b-badge svg { stroke-width: 1.8; }
.b-loc { left: 157px; top: 223px; width: 120px; height: 92px; border-radius: 18px; border: 1.3px solid #cbb994; }
.b-loc__text { position: absolute; inset: 0; }
.b-loc__label { position: absolute; left: 14px; top: 24px; font-size: 10px; color: #a99b7e; }
.b-loc__url { position: absolute; left: 14px; top: 46px; font-size: 12px; line-height: 14px; color: #222; }
.b-share { left: 248px; top: 222px; width: 99px; height: 93px; border-radius: 18px; border: 1.5px solid #1c1c1c; background: var(--cream); }
.b-share__ico { position: absolute; left: 32px; top: 20px; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: #151515; color: #fff; }
.b-share__txt { position: absolute; left: 0; right: 0; top: 64px; text-align: center; font-size: 12px; }

.b-members { left: 22px; top: 347px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.b-members svg { width: 20px; height: 20px; stroke-width: 1.6; }
.b-avs { left: 22px; top: 389px; display: flex; }
.b-avs img { width: 41px; height: 41px; border: 2px solid var(--cream); margin-left: -13px; }
.b-avs img:first-child { margin-left: 0; }
.b-remind { left: 103px; top: 389px; width: 244px; height: 42px; padding: 0 12px 0 14px; border-radius: 21px; border: 1.5px solid #1c1c1c; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.b-remind svg { width: 13px; height: 13px; stroke-width: 2; }

.b-sheet { left: 0; top: 463px; width: 371px; height: 420px; border-radius: 34px 34px 0 0; background: #fff; }
.b-sheet > * { position: absolute; }
.b-goals { left: 22px; right: 22px; top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.b-goals svg { width: 20px; height: 20px; stroke-width: 1.6; }
.b-goal { left: 0; width: 100%; height: 130px; }
.b-goal > * { position: absolute; }
.b-goal__num { left: 41px; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.b-goal__label { left: 118px; top: 2px; font-size: 13px; color: #b9b9b9; }
.b-goal__name { left: 118px; top: 24px; font-size: 31px; line-height: 37px; letter-spacing: -.01em; color: #121212; }
.b-goal__dots { left: 27px; top: 81px; display: flex; gap: 4px; }
.b-goal__dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #222; }
.b-goal__edit { left: 58px; top: 74px; width: 17px; height: 17px; color: #555; }
.b-goal__edit svg { stroke-width: 1.4; }
.b-goal__strike { left: 117px; top: 84px; width: 121px; height: 1.6px; background: #151515; }

/* Version statique (téléphone flottant) */
.app--static .app-b,
.app--static .a-ripple,
.app--static .a-expand { display: none; }


/* ===== bzaf.css ===== */
/* ==========================================================================
   Adaptation Bzaf Studio
   --------------------------------------------------------------------------
   Ce fichier ne modifie AUCUN des trois fichiers d'origine (style, cards,
   app). Il se charge après eux et ne reprend que l'habillage : couleurs,
   typographie du bandeau, voile de survol. La structure, les échelles et
   la mécanique du sticky restent intactes — on peut le retirer d'un seul
   lien <link> et retrouver la section d'origine.

   Ce qui N'EST PAS repeint, volontairement : les douze maquettes de cartes.
   Ce sont de fausses interfaces d'application, et leur variété de couleurs
   est précisément ce qui fait vivre la grille. Les habiller toutes en
   violet les ferait disparaître les unes dans les autres.
   ========================================================================== */

.dev {
  /* l'encre du site, à la place du #0d0f11 d'origine */
  --bg: #111112;

  --bzaf-violet: #6435ce;
  --bzaf-deep: #3c1f80;
  --bzaf-lavande: #a78bee;
  --bzaf-lilas: #d9ccf7;
  --bzaf-display: "Boldonse", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --bzaf-body: "Satoshi", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------- le bandeau défilant prend le violet ---------- */
.dev__marquee-text {
  color: rgba(167, 139, 238, .13);
  font-family: var(--bzaf-display);
  font-size: clamp(3rem, 11vw, 150px);
  line-height: 1.25;
  letter-spacing: -.02em;
}

/* ---------- le titre, dans la typo d'affichage du site ----------
   Boldonse est bien plus large qu'Inter : on redescend la taille pour
   que deux lignes tiennent dans la même hauteur qu'avant. */
.dev__title-main {
  font-family: var(--bzaf-display);
  /* les trois valeurs de .shead .hero-type sur l'accueil */
  font-size: clamp(1.55rem, 4.3vw, 3.3rem);
  line-height: 1.5;
  letter-spacing: -.03em;
  text-transform: none;
}
.dev__title-stars {
  font-family: var(--bzaf-display);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--bzaf-lavande);
  opacity: .55;
  margin-top: 0;
}

/* la surbrillance violette : le même dispositif que sur tout le site */
.dev__hl {
  background: var(--bzaf-violet);
  color: #fff;
  /* valeurs de .hero-type .hl, base.css:173 */
  padding: .29em .44em;
  border-radius: 100px;
  line-height: 1.5;
  /* sans inline-block, la hauteur de fond suit les metriques de la police
     et non l interligne : la pastille gonflait de 22 px. */
  display: inline-block;
}

/* ---------- texte et boutons en Satoshi ---------- */
.dev__text {
  font-family: var(--bzaf-body);
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  max-width: 34rem;
}
.dev__btn {
  font-family: var(--bzaf-body);
  font-weight: 800;
  font-size: .92rem;
  padding: .72rem 1.3rem;
}
.dev__btn--white { background: #fff; color: var(--bg); }
.dev__btn--white:hover { background: var(--bzaf-lavande); color: var(--bg); }
.dev__btn--gray { background: rgba(255, 255, 255, .12); color: #fff; }
.dev__btn--gray:hover { background: var(--bzaf-violet); color: #fff; }

/* ---------- le voile de survol : notre violet, pas leur bleu ----------
   Sélecteur à deux classes pour passer devant .screens__logo sans
   recourir à !important. */
.dev .screens__logo {
  background: rgba(100, 53, 206, .45);
  font-family: var(--bzaf-body);
  font-weight: 800;
  letter-spacing: .01em;
}

/* ---------- un halo violet derrière la main ----------
   Les sections sombres du site portent toutes un halo de ce genre ;
   sans lui, le bloc paraît posé là et ne dialogue pas avec le reste.
   Posé en z-index 0, donc derrière la grille comme derrière la main. */
.dev__screens::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: min(1100px, 92vw);
  height: min(760px, 70vh);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(100, 53, 206, .34), transparent 72%),
    radial-gradient(42% 40% at 50% 92%, rgba(167, 139, 238, .20), transparent 70%);
  filter: blur(6px);
}



/* ---------- sans la paire de téléphones, le bloc se resserre ----------
   .dev__content porte un min-height de 730px, taillé pour laisser la place
   aux deux téléphones flottants. Sans eux, et avec justify-content:space-
   between, il restait 516 px de vide entre le titre et la description. */
.dev__content { min-height: clamp(300px, 30vw, 430px); }

/* ---------- 1. le vide avant la grille ----------
   .dev__screens porte un margin-top de 400px (200 sous 991px), calibré
   chez awsmd pour un bloc de titre bien plus haut que le nôtre. */
/* Le rythme du site : .shead pose clamp(2.2rem, 4.5vw, 3.8rem) sous chaque
   en-tete de section — 61 px mesures, identiques sur les 8 en-tetes de
   l'accueil a 2 000 px. On reprend la valeur telle quelle : elle descend
   seule a 35,2 px sur telephone, la derogation sous 991 px est inutile. */
.dev__screens { margin-top: clamp(2.2rem, 4.5vw, 3.8rem); }

/* ---------- 3. les boutons, au dessin exact du site ----------
   Relevé dans base.css : pastille ronde de 36px, flèche de 14px, et la
   rotation de 45° au survol — c'est elle qui fait reconnaître le bouton. */
.dev__controls { gap: .5rem; }
.dev__btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .62rem .62rem .62rem 1.4rem;
  border-radius: 100px;
  font-family: var(--bzaf-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, background-color .3s;
}
.dev__btn-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center; flex: none;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .3s;
}
.dev__btn-ic svg { width: 14px; height: 14px; }
.dev__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
.dev__btn:hover .dev__btn-ic { transform: rotate(45deg); }
.dev__btn:active { transform: translateY(-1px) scale(.98); }

/* le premier bouton prend le violet de marque, comme sur le site */
.dev__btn--white { background: var(--bzaf-violet); color: #fff; }
.dev__btn--white:hover { background: var(--bzaf-violet); }
/* le second reprend la variante « contour sur fond sombre » du site */
.dev__btn--gray { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.dev__btn--gray:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.dev__btn--gray .dev__btn-ic { background: rgba(255, 255, 255, .14); }

/* ---------- les boutons sur petit écran ----------
   Au dessin du site, ils sont bien plus larges qu'à l'origine (pastille de
   36 px + padding de la variante --lg) : à deux, ils ne tenaient plus sur
   une ligne de 375 px et débordaient à droite. On revient ici à la taille
   normale du bouton du site, et on autorise le retour à la ligne. */
@media (max-width: 760px) {
  .dev__bottom { flex-wrap: wrap; gap: 1.1rem; }
  .dev__controls { flex-wrap: wrap; }
  .dev__btn { font-size: .9rem; padding: .5rem .5rem .5rem 1.1rem; }
  .dev__btn-ic { width: 30px; height: 30px; }
  .dev__btn-ic svg { width: 13px; height: 13px; }
}

/* ---------- l'espace titre -> description ----------
   Sur l'accueil, .shead empile le titre et la description avec un simple
   gap de 1.1rem. Ici, .dev__content était en justify-content:space-between
   sur un min-height, ce qui les repoussait aux deux extrémités du bloc. */
.dev__content {
  min-height: 0;
  justify-content: flex-start;
  /* visé : 40 px entre le titre et la description à 1440, 18 px à 375 —
     les deux valeurs relevées sur l'accueil. */
  gap: clamp(1.1rem, 2.75vw, 2.5rem);
}

/* l'interligne du responsive, base.css:340 */
@media (max-width: 700px) {
  .dev__title-main { line-height: 1.45; }
  .dev__hl { line-height: 1.45; }
}

/* les ** n'ont plus de balise ; on neutralise le style au cas où */
.dev__title-stars { display: none; }

/* ---------- grands écrans : le bandeau tient dans la colonne du site ----------
   Relevé sur l'accueil à 2 560 px : .wrap fait au plus 1 240 px (--maxw) moins
   2 × --gut, soit une colonne de texte de 1 156,8 px centrée. C'est la largeur
   de TOUTES les sections du site : ses 36 en-têtes sont dans .wrap.

   Ici le bandeau prenait la largeur de l'écran. À 2 000 px il se disloquait en
   trois îlots : titre en haut à gauche, description dessous, boutons à 1 500 px
   de là. On lui donne la géométrie exacte de .wrap — en dessous de 1 240 px la
   limite dépasse l'écran et plus rien ne change.

   La grille de cartes reste pleine largeur : le site a déjà ce motif, un
   .wrap shots__head au-dessus d'un .shots__rail qui déborde la colonne. */
.dev__contentbox .mb-wrap {
  max-width: 1240px;                           /* --maxw du site */
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.6rem);  /* --gut du site */
}

/* ---------- performance : rien n'est dessiné sous une vraie capture ----------
   Les cartes Zwin-Zwin et DVP Agency affichent une capture (.card__photo) qui
   recouvre entièrement la maquette dessinée en dessous. Le navigateur n'a plus
   à la mettre en page ni à la peindre. Si la capture manque, elle est retirée
   (onerror) et la maquette réapparaît d'elle-même. */
.mb-card:has(> .card__photo) > .card__ui { content-visibility: hidden; }

/* ---------- performance : les cartes hors écran ne sont pas calculées ----------
   Chaque carte a une taille fixe (--card-w × --card-h) : le navigateur peut
   sauter leur mise en page et leur peinture tant qu'elles sont loin de
   l'écran, sans rien décaler. Rendu identique. */
.screens__item { content-visibility: auto; contain-intrinsic-size: auto var(--card-w) auto var(--card-h); }

/* ---------- la version arabe ----------
   Sur /ar/, la page entière passe en direction:rtl. Le bandeau de titre est
   bien traduit et doit suivre cette direction. Les quinze maquettes, elles,
   portent du texte français laissé tel quel (translate="no") : sans ce
   rappel, leurs libellés se retourneraient et leur ponctuation sauterait
   d'un bout à l'autre de la ligne. */
[dir="rtl"] .dev__screens { direction: ltr; }

/* ---------- le bandeau en arabe ----------
   Boldonse n'a aucun glyphe arabe : sans ces règles, le titre retombe sur
   une police système et jure avec le reste de la page. Le site traite déjà
   la question (assets/css/rtl.css) et on reprend ses valeurs à l'identique :
   Changa, casse normale, graisse 800, interlettrage nul, interligne 1,42,
   et la pastille qui colle moins haut qu'en français. */
[dir="rtl"] .dev__title-main {
  font-family: 'Changa', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* pas de taille ici : .shead .hero-type (base.css:326, specificite 0,2,0)
     l emporte sur le .hero-type de rtl.css, donc les titres arabes du site
     font 52,8 px et non 51,2. On garde la meme valeur qu en francais. */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.42;
}
[dir="rtl"] .dev__hl { padding: .08em .34em .16em; line-height: 1.42; }
[dir="rtl"] .dev__text {
  font-family: 'IBM Plex Sans Arabic', 'Satoshi', system-ui, sans-serif;
  line-height: 1.9;
}
[dir="rtl"] .dev__btn { font-family: 'IBM Plex Sans Arabic', 'Satoshi', system-ui, sans-serif;
  letter-spacing: 0; font-weight: 600; }