/* ViralDM skins — QUARANTAINE (blueprint 2.3 / R-01 / R-02 / 2.3-bis).
   Aucune variable du namespace design-system ici. Fonte des skins :
   self-hostée en prod (Inter Display .woff2 dans static/fonts/),
   IDENTIQUE aperçu et renderer. Le vert chroma ci-dessous est sa seule
   occurrence du projet (R-01, lint). */
@layer skins {
  :root {
    --skin-chroma:#00B140;
    --skin-face:"Inter Display","Inter",sans-serif; /* jamais la police systeme : A-01 */
  }
  /* Le fichier livré est Inter v4 VARIABLE (axes wght 100-900 et opsz 14-32,
     OFL 1.1 — static/fonts/LICENSE-Inter.txt). Il est VERSIONNÉ dans le dépôt :
     un `make fonts` qui télécharge n'existe pas sur le serveur de déploiement,
     et une fonte absente fait échouer collectstatic (manifest) AVANT même que
     A-12 puisse faire échouer le rendu.
     `font-weight:100 900` : sans la plage, Chromium fige la fonte sur 400 et
     SYNTHÉTISE le gras — métriques différentes, donc rendu différent. */
  @font-face{font-family:"Inter Display";
    src:url("../fonts/InterDisplay.499fcada6ddb.woff2") format("woff2");
    font-weight:100 900;
    font-display:block} /* A-04 : jamais swap */
  /* opsz VERROUILLÉ à 32 (= la coupe "Display"), jamais `auto` : une taille
     optique qui suit la font-size ferait dépendre la frame du contexte de
     mise en page. Même raison qu'A-13. Les deux seules racines qui portent
     var(--skin-face) : le plateau, et le tiroir clavier (hors plateau). */
  .stage,.kbdrawer{font-optical-sizing:none;font-variation-settings:"opsz" 32}

  /* Le plateau NE PEINT RIEN. Le fond appartient à l'hôte : la scène le pose
     en CSS sur html/body, le Studio via data-chroma. Un `background:#fff` ici
     couvrait tout le viewport en blanc opaque et rendait omitBackground
     inopérant — 414 frames blanches, sans une erreur (sprint 3, bug 6). */
  .stage{position:relative;overflow:hidden;display:flex;
    flex-direction:column;justify-content:flex-end}
  .stage[data-chroma="on"]{background:var(--skin-chroma)}
  .stage[data-screen="on"]{background:#fff}   /* aperçu Studio, hors rendu */
  .fxlayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
  /* Zone sûre : sur TikTok/Reels, les ~17 % du bas sont couverts par la
     légende et la colonne de boutons. Une bulle posée à 12 px du bord est
     illisible dans l'app. Le fil s'arrête au-dessus. */
  .thread{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
    gap:4px;padding:12px 12px 17%;z-index:2}
  .daystamp{align-self:center;font-family:var(--skin-face);font-size:9px;color:#AEAEB2}
  .daystamp b{color:#6E6E73}
  .stage[data-chroma="on"] .daystamp,.stage[data-chroma="on"] .daystamp b,
  .stage[data-chroma="on"] .delivered{color:rgba(255,255,255,.85)}

  .bub{position:relative;font-family:var(--skin-face);font-size:13px;line-height:1.3;
    padding:7px 11px;border-radius:17px;max-width:80%;width:fit-content}
  /* PAS de will-change ici. Mesuré (sprint 3, Chromium 131) : il promeut
     chaque bulle en couche GPU dont le cache de rastérisation dépend de
     l'historique. Le MÊME seek(t) atteint par deux chemins différents donnait
     215 pixels d'écart (max 56) sur la queue de la dernière bulle. Invisible
     à l'œil, fatal au gate P3 qui compare au pixel près. Un hint de
     performance qui rend le rendu non reproductible n'a rien à faire dans le
     plateau — même raison que Math.random ou requestAnimationFrame (A-13). */
  .bub .tail{position:absolute;bottom:-.5px;width:12px;height:14px}
  .b-in{align-self:flex-start;border-bottom-left-radius:5px;transform-origin:bottom left}
  .b-in .tail{left:-4px;transform:scaleX(-1)}
  .b-out{align-self:flex-end;border-bottom-right-radius:5px;transform-origin:bottom right}
  .b-out .tail{right:-4px}
  .typing{align-self:flex-start;border-radius:17px;border-bottom-left-radius:5px;
    padding:8px 11px;display:flex;gap:4px;width:fit-content}
  .typing i{width:5px;height:5px;border-radius:50%;background:#A5A5AC}
  .tapback{position:absolute;top:-12px;right:-7px;width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:10px;
    background:#E9E9EB;border:2px solid #fff;z-index:4}
  .b-in .tapback{right:auto;left:-7px}
  .stage[data-chroma="on"] .tapback{border-color:var(--skin-chroma)}
  .delivered{align-self:flex-end;font-family:var(--skin-face);font-size:8.5px;color:#AEAEB2}
  .linkc{align-self:flex-end;background:#fff;border-radius:13px;overflow:hidden;max-width:80%;
    font-family:var(--skin-face);border:.5px solid rgba(0,0,0,.1)}
  .linkc .im{height:42px;background:linear-gradient(115deg,#0B7A33,#053D1B);
    display:flex;align-items:center;padding-left:10px}
  .linkc .im b{color:#fff;font-size:10.5px;font-weight:700}
  .linkc .tx{padding:5px 9px 6px;background:#F6F6F8}
  .linkc .tx .t{font-size:10px;font-weight:600;color:#000}
  .linkc .tx .u{font-size:8.5px;color:#AEAEB2}
  .shock{position:absolute;width:52px;height:52px;margin:-26px;border-radius:50%;
    border:2px solid rgba(0,0,0,.32)}
  .stage[data-chroma="on"] .shock{border-color:rgba(255,255,255,.9)}
  .conf{position:absolute;width:5px;height:8px;border-radius:1px}

  /* skins — matériaux */
  [data-skin="imessage"] .b-out{background:#007AFF;color:#fff}
  [data-skin="imessage"] .b-in{background:#E9E9EB;color:#000}
  [data-skin="imessage"] .b-out .tail path{fill:#007AFF}
  [data-skin="imessage"] .b-in .tail path{fill:#E9E9EB}
  [data-skin="imessage"] .typing{background:#E9E9EB}
  [data-skin="sms"] .b-out{background:#34C759;color:#fff}
  [data-skin="sms"] .b-in{background:#E9E9EB;color:#000}
  [data-skin="sms"] .b-out .tail path{fill:#34C759}
  [data-skin="sms"] .b-in .tail path{fill:#E9E9EB}
  [data-skin="sms"] .typing{background:#E9E9EB}
  [data-skin="whatsapp"].stage[data-screen="on"]{background:#ECE5DD}
  [data-skin="whatsapp"] .bub{border-radius:9px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
  [data-skin="whatsapp"] .b-out{background:#D9FDD3;color:#111B21}
  [data-skin="whatsapp"] .b-in{background:#FFFFFF;color:#111B21}
  [data-skin="whatsapp"] .b-out .tail path{fill:#D9FDD3}
  [data-skin="whatsapp"] .b-in .tail path{fill:#FFFFFF}
  [data-skin="whatsapp"] .typing{background:#fff}
  [data-skin="instagram"] .b-out{background:linear-gradient(135deg,#7638FA,#C22DC0 55%,#FF0069);
    color:#fff;border-radius:20px}
  [data-skin="instagram"] .b-in{background:#EFEFEF;color:#000;border-radius:20px}
  [data-skin="instagram"] .tail{display:none}
  [data-skin="instagram"] .typing{background:#EFEFEF;border-radius:20px}
  [data-skin="tiktok"] .b-out{background:#FE2C55;color:#fff;border-radius:12px;
    border-bottom-right-radius:3px}
  [data-skin="tiktok"] .b-in{background:#F1F1F2;color:#161823;border-radius:12px;
    border-bottom-left-radius:3px}
  [data-skin="tiktok"] .tail{display:none}
  [data-skin="tiktok"] .typing{background:#F1F1F2;border-radius:12px}
}

@layer skins {
  /* ── Rig téléphone 3D (export "téléphone incliné") ── */
  .phonewrap{perspective:1500px;position:absolute;inset:0;display:flex;
    align-items:center;justify-content:center}
  .tiltrig{transform-style:preserve-3d}
  /* Dimensions en unités viewport : le rendu ouvre un viewport CSS connu
     (RENDER_CSS_WIDTH). 62vw laisse le téléphone respirer une fois incliné. */
  .phone3d{position:relative;width:62vw;height:calc(62vw / .462);border-radius:8vw;
    background:linear-gradient(145deg,#E8E8EA,#C9C9CE 45%,#F2F2F4 80%,#D6D6DA);
    box-shadow:0 3vw 7vw -1.5vw rgba(0,0,0,.4);transform-style:preserve-3d}
  .phone3d::before{content:"";position:absolute;inset:.9vw;border-radius:7vw;background:#000}
  .screen3d{position:absolute;inset:1.8vw;border-radius:6.2vw;overflow:hidden;background:#fff;
    transform:translateZ(1px);display:flex;flex-direction:column;justify-content:flex-end}
  .island3d{position:absolute;top:2vw;left:50%;
    transform:translateX(-50%) translateZ(2px);width:19vw;height:2.1vw;
    background:#000;border-radius:999px;z-index:50}
  .screen3d .stage{position:relative;flex:1;inset:auto}

  /* ── Tiroir clavier iOS ── */
  .kbdrawer{position:absolute;left:0;right:0;bottom:0;z-index:30;
    background:#D1D5DB;padding:6px 5px 9px;transform:translateY(110%);
    font-family:var(--skin-face);will-change:auto}
  .kbinput{background:#fff;border-radius:16px;margin:0 4px 7px;padding:6px 12px;
    min-height:26px;display:flex;align-items:center;font-size:13px;color:#111}
  .kbcaret{color:#0071E3;margin-left:1px}
  .kbkeys{display:flex;flex-direction:column;gap:5px}
  .kbrow{display:flex;justify-content:center;gap:3px}
  .kbkey{background:#fff;border-radius:5px;min-width:7.2%;padding:7px 0;text-align:center;
    font-size:11px;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.28);text-transform:none}
  .kbspace{min-width:44%}
  .kbsend{background:#0071E3;color:#fff;min-width:13%;font-weight:700}
}

  /* Watermark du palier gratuit — dessiné DANS le plateau (survit au keying).
     Police générique volontaire : indépendante de la fonte Inter Display, il
     s'affiche même si celle-ci manque. Statique : aucun coût de déterminisme. */
  .watermark{position:absolute;inset:0;z-index:9;pointer-events:none;width:100%;height:100%}
  .wm-t{font-family:var(--skin-face);
    font-size:19px;font-weight:800;letter-spacing:.01em;
    fill:#FFFFFF;fill-opacity:.20;stroke:#000000;stroke-opacity:.14;stroke-width:.5px}