/* Téléphone et écran d'accueil de l'app, dessinés en HTML (données d'exemple), d'après l'accueil de
   l'app du 27 octobre 2026 : statut du jour, séance du jour, puis le fil des amis avec une photo double
   prise sur le vif (src/app/(tabs)/index.tsx et src/components/fil.tsx de l'app). Couleurs du design
   system « Marine précis ». */
/* Téléphone */
.tel { width: 300px; height: 620px; border-radius: 48px; background: #0A0A0C; padding: 11px; box-shadow: 0 40px 80px rgba(3, 10, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; position: relative; flex: none; }
.tel::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 14px; background: #0A0A0C; z-index: 3; }
.ecran { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #F4F6FA; color: #0B1F3A; padding: 46px 14px 14px; font-size: 11px; line-height: 1.35; display: flex; flex-direction: column; gap: 8px; }
.ecran .icone { width: 11px; height: 11px; }
.ecran .sur { font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6B85; }

/* Date, bonjour et avatar */
.ecran .haut { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.ecran .bonjour { display: block; font-size: 18px; letter-spacing: -0.02em; margin-top: 1px; }
.ecran .avatar { width: 30px; height: 30px; border-radius: 50%; background: #DCE6FF; color: #1A45B5; display: grid; place-items: center; font-weight: 700; font-size: 10px; flex: none; }

/* Statut du jour */
.ecran .heros-app { background: #0B1F3A; color: #fff; border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.ecran .heros-app .ligne { display: flex; justify-content: space-between; align-items: center; }
.ecran .heros-app .sur { color: #9FB3D6; }
.ecran .pastille-ok { display: inline-flex; align-items: center; gap: 3px; background: #E3F5EC; color: #13734A; font-weight: 700; font-size: 9px; padding: 2px 7px 2px 6px; border-radius: 99px; }
.ecran .pastille-ok .icone { width: 9px; height: 9px; stroke-width: 3; }
.ecran .mesures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ecran .mesures b { display: block; font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecran .mesures b small { font-size: 8px; font-weight: 400; letter-spacing: 0; color: #9FB3D6; }
.ecran .mesures span { display: block; color: #9FB3D6; font-size: 8px; }
.ecran .mot { display: flex; gap: 6px; align-items: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 9px; color: #DCE6FF; font-size: 9.5px; text-wrap: pretty; }
.ecran .mot .icone { width: 12px; height: 12px; margin-top: 1px; }

/* Séance du jour */
.ecran .carte-app { background: #fff; border: 1px solid #E1E6EF; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ecran .seance { display: flex; gap: 9px; align-items: center; }
.ecran .puce { width: 28px; height: 28px; border-radius: 8px; background: #EEF3FF; color: #1A45B5; display: grid; place-items: center; flex: none; }
.ecran .puce .icone { width: 15px; height: 15px; }
.ecran .titre { font-weight: 600; font-size: 11.5px; margin: 1px 0; }
.ecran .gris { color: #5B6B85; font-size: 9.5px; }
.ecran .bouton-app { display: flex; justify-content: center; align-items: center; gap: 5px; background: #1F55E0; color: #fff; font-weight: 600; border-radius: 10px; padding: 7px; font-size: 11px; }
.ecran .bouton-app .icone { width: 10px; height: 10px; }

/* Fil des amis : en-tête, puis une publication sans cadre, comme dans l'app */
.ecran .fil-tete { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.ecran .liens { display: flex; gap: 12px; color: #1F55E0; font-weight: 700; font-size: 9.5px; }
.ecran .publication { display: flex; flex-direction: column; gap: 6px; }
.ecran .auteur { display: flex; gap: 7px; align-items: center; }
.ecran .auteur b { display: block; font-size: 11px; }
.ecran .auteur small { color: #5B6B85; font-size: 9px; }
.ecran .avatar.petit { width: 26px; height: 26px; font-size: 9px; background: #E3F5EC; color: #13734A; }

/* Photo double : la grande photo en 3:4, le selfie dans le coin, « Sur le vif » en blanc, le sport et
   deux chiffres en pastilles sur un dégradé. */
.ecran .double { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #E1E6EF; flex: none; }
.ecran .double .grande { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ecran .double::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to bottom, rgba(4, 10, 22, 0), rgba(4, 10, 22, 0.55)); }
.ecran .coin { position: absolute; z-index: 2; top: 8px; left: 8px; width: 30%; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 2px solid #0B1F3A; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); background: #E1E6EF; }
.ecran .coin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecran .vif { position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; background: #fff; color: #0B1F3A; font-weight: 700; font-size: 9px; padding: 3px 7px 3px 6px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); }
.ecran .vif .icone { width: 10px; height: 10px; stroke-width: 2.25; }
.ecran .pastilles { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.ecran .pastilles span { display: inline-flex; align-items: center; gap: 3px; background: rgba(7, 20, 39, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; font-size: 9px; padding: 2px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecran .pastilles .icone { width: 10px; height: 10px; }
.ecran .legende { font-size: 10px; }
.ecran .actions { display: flex; gap: 16px; color: #44536C; font-size: 9.5px; }
.ecran .actions span { display: inline-flex; align-items: center; gap: 4px; }
.ecran .actions .icone { width: 12px; height: 12px; }