/* Vigie : intro cinématique (page d'accueil et écran de bienvenue de l'app) */
.film-screen{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;isolation:isolate;container-type:inline-size;
  background:radial-gradient(120% 70% at 50% 35%,#4A4C50 0%,#1A1B1E 60%,#0C0D0F 100%);color:#F4EEE6}
.film-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-t{position:absolute;z-index:2;margin:0;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:10.5cqw;line-height:.98;opacity:0;pointer-events:none;will-change:opacity,filter,transform}
.ft-a{left:8cqw;top:14cqw;color:#2A2521}
.ft-b{left:8cqw;bottom:13cqw;color:#F5EFE7;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.ft-c{left:0;right:0;top:11cqw;text-align:center;font-style:italic;font-weight:500;color:#F5EFE7;text-shadow:0 2px 24px rgba(0,0,0,.5)}

/* Exemple de résultat : visible tout de suite (image fixe), puis animé par le film */
.film-card{position:absolute;left:5cqw;right:5cqw;bottom:6cqw;z-index:2;display:flex;flex-direction:column;gap:2.8cqw;padding:5cqw;border-radius:6cqw;
  background:rgba(16,18,21,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.14);
  color:#F4EEE6;font-family:"Figtree",system-ui,sans-serif;line-height:1.3}
.fc-top{display:flex;justify-content:space-between;gap:3cqw;font-weight:700;font-size:2.9cqw;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#C9C1B6}
.fc-name{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:7cqw;line-height:1.05}
.fc-v{display:flex;gap:3.2cqw;align-items:center;padding:3.2cqw;border-radius:4cqw;background:rgba(229,72,77,.16);border:1px solid rgba(255,120,120,.35)}
.fc-x{flex:none;width:9.5cqw;height:9.5cqw;border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center;font-weight:800;font-size:4.6cqw}
.fc-v b{display:block;font-size:4.6cqw;line-height:1.15;color:#FFA3A3}
.fc-v span{display:block;font-size:3.6cqw;color:#E9E2D8}
.fc-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2cqw}
.fc-rows li{display:flex;justify-content:space-between;align-items:center;gap:3cqw;font-size:3.8cqw}
.fc-pill{font-size:3cqw;font-weight:700;padding:.9cqw 2.6cqw;border-radius:999px;white-space:nowrap}
.fc-pill.bad{background:rgba(229,72,77,.24);color:#FFA3A3}
.fc-pill.ok{background:rgba(80,200,120,.18);color:#8BE3A8}

/* Téléphone de la page d'accueil */
.film-fig{margin:0;justify-self:center;width:min(340px,100%);display:flex;flex-direction:column;gap:12px}
.film-phone{background:#050506;border-radius:46px;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px rgba(60,30,0,.28)}
.film-phone .film-screen{border-radius:36px}
.film-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.film-foot .note{margin:0}
.film-ctl{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line,#E5D6C3);background:var(--surface,#fff);color:var(--ink,#24170A);border-radius:999px;padding:7px 14px;font:600 14px/1.2 "Figtree",system-ui,sans-serif;cursor:pointer}
.film-ctl[hidden]{display:none}
.film-ctl svg{width:14px;height:14px;fill:currentColor}
.film-ctl .i-play{display:none}
.film-ctl[aria-pressed="true"] .i-play{display:block}
.film-ctl[aria-pressed="true"] .i-pause{display:none}
@media (max-width:860px){ .film-fig{width:min(300px,100%)} }

/* Écran de bienvenue de l'app : plein écran, une seule fois */
.ob-intro{position:fixed;inset:0;z-index:45;background:#0C0D0F}
.ob-intro .film-screen{position:absolute;inset:0;width:auto;aspect-ratio:auto}
.ob-intro::after{content:"";position:absolute;inset:0;z-index:5;background:#FF6A13;opacity:0;pointer-events:none;transition:opacity .4s ease}
.ob-intro.to-orange::after{opacity:1}
.ob-skip{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);color:#fff;font:600 15px/1 "Figtree",system-ui,sans-serif;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.ob-skip:focus-visible{outline:3px solid #FFC928;outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .ob-intro{display:none} }
/* Le titre reçoit le focus après l'intro (pour les lecteurs d'écran) : pas de cadre visible */
.ob-step h1[tabindex="-1"]:focus{outline:none}