/* Maquettes illustratives : toujours fictives, sans chiffre ni étoile.
   Le contenu des scènes est décoratif (aria-hidden) ; la légende courte, sous la scène, porte le sens. */

/* Scène = panneau + légende d'une ligne en dessous (petite, discrète, jamais sur le téléphone) */
.scene{display:grid;gap:10px;margin:0;min-width:0}
.stage{position:relative;isolation:isolate;display:flex;justify-content:center;overflow:hidden;border-radius:var(--r-lg);background:var(--bleu)}
.stage--light{background:var(--ciel)}
.cap{display:flex;align-items:center;gap:8px;padding-left:2px;color:var(--muted);font:600 var(--fs-xs)/1.4 var(--font)}
.cap::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.hero .cap,.sec--nuit .cap{color:var(--dk-muted)}

/* Téléphone : cadre fin, îlot, boutons latéraux, barre d'état sans heure, barre d'accueil */
.phone{--pw:280px;--ph:600px;position:relative;flex:none;width:var(--pw);padding:8px;border-radius:50px;background:#06080F;box-shadow:0 0 0 1.5px #2C3554,0 0 0 3px #4A577C,0 44px 80px -36px rgba(3,8,26,.8),0 16px 34px -16px rgba(3,8,26,.5)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#3A4566}
.phone::before{left:-5px;top:118px;height:54px}
.phone::after{right:-5px;top:156px;height:84px}
.ph-screen{position:relative;display:flex;flex-direction:column;height:var(--ph);overflow:hidden;border-radius:42px;background:#fff;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none}
.ph-screen::before{content:"";position:absolute;top:10px;left:50%;z-index:3;width:84px;height:25px;margin-left:-42px;border-radius:14px;background:#05070D}
.ph-screen::after{content:"";position:absolute;bottom:7px;left:50%;z-index:3;width:104px;height:4px;margin-left:-52px;border-radius:2px;background:var(--ink)}
.ph-bar{display:flex;flex:none;justify-content:flex-end;align-items:center;height:46px;padding:2px 24px 0}
.ph-status{width:52px;height:10px;fill:currentColor;color:var(--ink)}
.phone .i{width:18px;height:18px}

/* Messagerie : en-tête, fil, bulles, barre de saisie */
.chat-top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;flex:none;padding:2px 14px 10px;border-bottom:1px solid var(--trait)}
.chat-top>.i{color:var(--bleu)}
.mono--chat{width:34px;height:34px;border-radius:50%;font-size:.75rem}
.chat-name{display:grid;color:var(--ink);font:800 .875rem/1.2 var(--font);letter-spacing:-.01em}
.chat-name small{color:var(--muted);font:600 .75rem/1.3 var(--font)}
.chat{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:7px;min-height:0;padding:12px 11px;background:#EDF1F7}
.b{position:relative;max-width:84%;margin:0;padding:8px 12px 9px;border-radius:18px;font:600 .8125rem/1.42 var(--font);letter-spacing:-.005em}
.b--out{align-self:flex-end;border-bottom-right-radius:6px;background:var(--bleu);color:#fff}
.b--in{align-self:flex-start;border-bottom-left-radius:6px;background:#fff;color:var(--ink);box-shadow:0 1px 1px rgba(10,22,51,.07)}
.tick{display:inline-block;width:15px;height:15px;margin:0 -3px -3px 6px;fill:none;stroke:#C9D5FF;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.b--contact{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;font-weight:800}
.b--contact>span:not(.av){display:grid;line-height:1.25}
.b--contact small{font:600 .6875rem/1.3 var(--font);opacity:.8}
.b--contact .tick{align-self:flex-end;margin:0 -3px 0 2px}
.av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#AEB8CC;color:#fff;font:800 .8125rem/1 var(--font)}
.av--sm{width:30px;height:30px;background:rgba(255,255,255,.2)}
.phone .av--sm .i{width:16px;height:16px}
.chat-day{align-self:center;margin:3px 0 1px;padding:3px 11px;border-radius:999px;background:rgba(10,22,51,.07);color:var(--muted);font:700 .6875rem/1.4 var(--font)}
.composer{display:flex;align-items:center;gap:9px;flex:none;padding:8px 10px 24px;border-top:1px solid var(--trait);background:#fff}
.composer>.i{color:var(--bleu)}
.cp-field{flex:1;padding:8px 13px;border:1px solid var(--trait);border-radius:999px;color:#9AA4BA;font:600 .8125rem/1.2 var(--font)}
.cp-btn{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--bleu);color:#fff}
.phone .cp-btn .i{width:17px;height:17px}

/* Bilan du mois : rubriques rédigées, sans valeur */
.b--report{width:88%;max-width:none;padding:0;overflow:hidden}
.rp-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--trait)}
.rp-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--bleu);color:#fff}
.phone .rp-ic .i{width:17px;height:17px}
.rp-h strong{display:block;font-size:.8125rem;line-height:1.25}
.rp-h small{display:block;color:var(--muted);font:600 .6875rem/1.3 var(--font)}
.rp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--ink);font-weight:700}
.rp-row+.rp-row{border-top:1px solid var(--trait)}
.phone .rp-row .i{width:16px;height:16px;color:var(--bleu)}
.phone .rp-row .rp-go{margin-left:auto;color:#9AA4BA}

/* Un seul moment animé : le fil du haut de page s'écrit au chargement (état final = état statique) */
@media (prefers-reduced-motion:no-preference){
  .chat--live>*{animation:pop .32s var(--ease) both}
  .chat--live>:nth-child(2){animation-delay:.12s}
  .chat--live>:nth-child(3){animation-delay:.24s}
  .chat--live>:nth-child(4){animation-delay:.36s}
  .chat--live>:nth-child(5){animation-delay:.48s}
  .chat--live>:nth-child(6){animation-delay:.6s}
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* Haut de page : le téléphone sort par le haut de son panneau bleu, marqué du « C » du logo.
   Mobile : cadré serré, coupé juste sous le bilan. Bureau : entier, avec sa barre de saisie. */
.stage--hero{height:500px;background:none;border-radius:0 0 var(--r-lg) var(--r-lg)}
.stage--hero::before{content:"";position:absolute;inset:72px 0 0;z-index:-1;border-radius:var(--r-lg);background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 14 36 36'%3E%3Cpath d='M43.11 19.34A16 16 0 1 0 43.11 44.16L38.29 39.34A9.25 9.25 0 1 1 38.29 24.16Z' fill='%23fff' fill-opacity='.08'/%3E%3Ccircle cx='45.2' cy='31.75' r='3.5' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") no-repeat 50% 34%/170% auto}
.phone--hero{--pw:min(284px,100% - 24px);--ph:620px}
.phone--hero .b{max-width:88%}
.phone--hero .chat{justify-content:flex-start}
@media (min-width:600px){.stage--hero{height:540px}.phone--hero{--pw:300px;--ph:640px}}
@media (min-width:960px){
  .stage--hero{height:auto;padding-bottom:36px}
  .stage--hero::before{top:96px}
  .phone--hero{--pw:300px;--ph:610px}
  .phone--hero .chat{justify-content:flex-end}
}