/* ==========================================================================
   cinow — site vitrine
   Direction reprise de la key art du Play Store (playstore/thumbnail.png) et
   des illustrations de l'app (front/resources/) : aplats francs sur fond noir,
   tracés à la main, aucun dégradé, aucune ombre portée, aucun flou.
   Palette relevée sur ces visuels :
     noir #000 · navy #071229 · jaune #FFF707 · bleu #1C14FF / #2D38FF
     menthe #07FFA8 · magenta #D91DFF · blanc
   Le bleu n'est jamais utilisé comme couleur de texte sur fond sombre
   (contraste ~2,2:1) : uniquement en aplat, avec du blanc dessus.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/inter-800.woff2) format('woff2')}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  --black:#000;
  --navy:#071229;
  --yellow:#fff707;
  --blue:#1c14ff;
  --blue-2:#2d38ff;
  --mint:#07ffa8;
  --magenta:#d91dff;
  /* Fond du thème clair de l'application, repris tel quel. */
  --light-bg:#d6e1f8;

  --ink:#fff;
  --ink-72:rgba(255,255,255,.72);
  --ink-52:rgba(255,255,255,.52);
  --ink-38:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.3);

  --r:10px;
  --pad:clamp(20px,5vw,44px);
  --wrap:1200px;
  --sec:clamp(76px,9.5vw,132px);
  --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--black);color:var(--ink);
  font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.008em;
}
svg{display:block;max-width:100%}
/* height:auto est indispensable : les attributs width/height du HTML (qui
   réservent la place au chargement) sont des hints de présentation, et sans ça
   une règle CSS qui ne fixe que la largeur laisse la hauteur naturelle. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.04em;line-height:1;
  text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.1;letter-spacing:-.045em}
h2{font-size:clamp(2.05rem,4.8vw,3.5rem)}
h3{font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.038em;line-height:1.04}
h4{font-size:1.12rem;letter-spacing:-.03em;line-height:1.2}
p{margin:0;text-wrap:pretty}

.lede{font-size:clamp(1.04rem,1.55vw,1.22rem);color:var(--ink-72);line-height:1.6;max-width:54ch}
.small{font-size:.86rem;color:var(--ink-52);line-height:1.55}

/* Bloc surligné bleu de la key art : blanc sur aplat, découpé ligne à ligne */
.hl{background:var(--blue);color:#fff;padding:.04em .28em .1em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl svg{display:inline-block;vertical-align:-.11em;width:.78em;height:.78em;margin-right:.1em}

/* ── Perforations de pellicule ───────────────────────────────────────────── */
/* Perforations reprises de l'icône : discrètes, comme sur l'icône elle-même. */
.strip{height:14px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 26px,transparent 26px 48px)}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
/* Badge Google Play officiel — asset fourni par Google, non modifié
   (ni recoloration, ni ombre, ni recadrage du padding intégré). */
.gplay{display:inline-block;flex:none;transition:transform .18s var(--ease)}
.gplay img{height:58px;width:auto}
.gplay:hover{transform:translateY(-2px)}
.gplay--sm img{height:50px}

/* Bouton « iPhone » désactivé, dessiné ici et jamais repris d'un badge officiel.
   Gabarit calé sur le badge Google Play : le PNG fait 646x250 dont 29px de marge
   haute et basse, soit un bouton visible de 150x44,5 pour un rendu à height:58px.
   La boîte extérieure conserve ces 58px pour que les deux lignes de base
   s'alignent dans le flex. */
.soonbtn{position:relative;display:inline-flex}
.soonbtn__box{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:150px;height:44.5px;margin-block:6.75px;padding:0;
  border:1px solid rgba(255,255,255,.22);border-radius:7px;background:#111319;
  color:var(--ink-38);font-size:1.02rem;font-weight:600;letter-spacing:-.022em;
  cursor:not-allowed}
.soonbtn__box svg{width:19px;height:19px}
/* Hors flux : sinon la légende gonfle la colonne, et align-items:center du
   parent décale le bouton de 14px par rapport au badge Google Play. */
.soonbtn__cap{position:absolute;top:100%;left:2px;white-space:nowrap;
  font-size:.84rem;color:var(--ink-38)}

/* Le CTA de bas de page garde pour l'instant la mention textuelle : il est hors
   du périmètre de cette passe. À unifier avec .soonbtn si on veut le bouton là
   aussi — c'est le seul reste de .soon dans le site. */
.soon{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-52)}
.soon svg{width:16px;height:16px}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.hdr.is-stuck{background:#000;border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,42px);height:72px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand__mark{width:34px;height:34px;border-radius:8px;flex:none}
.brand__wm{width:76px;color:#fff}
.nav{display:flex;gap:clamp(14px,2.1vw,28px)}
.nav a{font-size:.93rem;font-weight:500;color:var(--ink-72);transition:color .16s}
.nav a:hover{color:var(--yellow)}
@media (max-width:860px){.nav{display:none}}
@media (max-width:520px){.hdr__in .gplay{display:none}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{background:var(--black);padding-top:clamp(38px,6vw,70px)}
.hero__in{display:grid;gap:clamp(36px,5.5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  padding-bottom:clamp(50px,7vw,84px)}
@media (max-width:920px){.hero__in{grid-template-columns:1fr}}
/* Titre d'un seul tenant, l'aplat bleu ne portant plus que « autour de vous ».
   Le nowrap empêche l'aplat de se scinder en deux blocs ; sous 380px il est
   relâché et box-decoration-break:clone assure alors une découpe propre. */
.hero h1 .hl{white-space:nowrap}
@media (max-width:380px){.hero h1 .hl{white-space:normal}}
.hero .lede{margin-top:30px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:34px}

/* ── Téléphone : cadre plat, sans reflet ni ombre ────────────────────────── */
.device{position:relative;width:min(320px,80vw);flex:none;padding:8px;border-radius:42px;
  background:#101010;border:1px solid var(--line)}
.device img{width:100%;height:auto;border-radius:34px;background:var(--navy)}
.device--lg{width:min(348px,84vw)}
.stage{display:flex;justify-content:center}

/* ── Bandeau chiffres ────────────────────────────────────────────────────── */
/* Les cellules portent elles-mêmes leur retrait horizontal (les filets
   verticaux doivent aller de bord à bord) : la phrase de contexte reprend donc
   le même clamp, pas --pad, pour s'aligner sur le premier chiffre. */
.figures{border-block:1px solid var(--line);background:var(--black)}
.figures__in{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wrap);
  margin-inline:auto}
.fig{padding:clamp(32px,4.4vw,54px) clamp(16px,2.6vw,34px);border-left:1px solid var(--line)}
.fig:first-child{border-left:0}
.fig b{display:block;color:var(--yellow);font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800;
  letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.fig:nth-child(2) b{color:var(--mint)}
.fig:nth-child(3) b{color:var(--magenta)}
.fig span{display:block;margin-top:14px;font-size:.94rem;color:var(--ink-52);line-height:1.35;
  max-width:20ch}
@media (max-width:700px){
  .figures__in{grid-template-columns:1fr}
  .fig{border-left:0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:20px;
    padding-block:24px}
  .fig:first-child{border-top:0}
  .fig b{font-size:2.5rem;min-width:5.2ch}
  .fig span{margin-top:0}
}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{position:relative}
.sec{padding-block:var(--sec)}
.sec--navy{background:var(--navy)}
.sec__head{max-width:min(730px,100%)}
.sec__head .lede{margin-top:24px}
/* Titre de section centré : il chapeaute les six promesses qui suivent, et le
   centrage le désigne comme leur en-tête commun plutôt que comme le titre de
   la première d'entre elles. */
.sec__head--center{max-width:min(820px,100%);margin-inline:auto;text-align:center}

/* ── Problème : comparatif à deux cartes ─────────────────────────────────── */
/* Grille tarifaire : structure strictement identique des deux côtés, seuls
   les chiffres changent. Carte cinow accentuée en menthe, carte AlloCiné
   neutre — jamais de rouge, de croix ni de signe négatif.
   Aucun jaune dans l'habillage de ce bloc : c'est la couleur de marque du
   concurrent. La capture posée dans la carte de gauche en contient
   forcément, et c'est normal — elle montre son produit. La règle porte sur
   l'habillage du site, pas sur le contenu de l'image (cf. le commentaire du
   bloc dans index.html). */
.vs__title{font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:600;letter-spacing:-.028em;
  line-height:1.35;color:var(--ink-72);margin-top:clamp(38px,4.6vw,54px)}

.vs{display:grid;gap:clamp(20px,2.6vw,28px);margin-top:clamp(20px,2.4vw,28px);
  grid-template-columns:1fr 1fr;align-items:stretch}
@media (max-width:840px){.vs{grid-template-columns:1fr;gap:22px}}

.card{display:flex;flex-direction:column;align-items:center;
  padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,28px) clamp(10px,1.6vw,16px);
  border:1px solid rgba(255,255,255,.16);border-radius:14px}
.card--own{border:2px solid var(--mint);background:rgba(7,255,168,.035)}
.card__name{font-size:1.24rem;letter-spacing:-.03em;margin-bottom:22px}

.card .device{width:min(226px,72vw)}
/* Placeholder au ratio exact des captures (660 × 1429), même cadre que la
   capture d'en face pour que les deux cartes gardent la même hauteur. */
.shot-ph{aspect-ratio:660/1429;border-radius:34px;background:#12141c;
  display:grid;place-items:center;text-align:center;padding:0 18px;
  font-size:.88rem;color:var(--ink-52);border:1px dashed rgba(255,255,255,.28)}

.metrics{width:100%;margin-top:26px;display:flex;flex-direction:column}
.metrics li{padding:16px 0;border-top:1px solid rgba(255,255,255,.13);text-align:center}
.metrics li:first-child{border-top:0}
.metrics b{display:block;font-size:clamp(2rem,3.4vw,2.6rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.metrics span{display:block;margin-top:8px;font-size:.92rem;color:var(--ink-52)}
.card--own .metrics b{color:var(--mint)}

.vs__method{margin-top:clamp(24px,2.8vw,34px);font-size:.82rem;color:var(--ink-38);
  line-height:1.6;max-width:82ch}

/* ── Rangées ─────────────────────────────────────────────────────────────── */
.rows{display:flex;flex-direction:column;gap:clamp(80px,9vw,136px);
  margin-top:clamp(52px,6.6vw,88px)}
.row{display:grid;gap:clamp(32px,5.5vw,80px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
.row--flip .row__media{order:-1}
@media (max-width:880px){.row{grid-template-columns:1fr;gap:38px}
  .row--flip .row__media{order:0}}
.row__txt h3{margin-bottom:22px}
.row__txt p{color:var(--ink-72);font-size:1.03rem;line-height:1.62;max-width:46ch}
.row__txt p+p{margin-top:16px}
.row__media{display:flex;justify-content:center}
.row__ill{width:min(430px,100%)}
.row__ill--sm{width:min(240px,72%)}
.cta__ill{width:min(196px,54%);border-radius:24px;justify-self:end}

/* ── Trio ────────────────────────────────────────────────────────────────── */
.trio{display:grid;gap:clamp(24px,3.2vw,44px);margin-top:clamp(42px,5.2vw,62px);
  grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.trio{grid-template-columns:1fr;gap:32px}}
.trio > div{padding-top:24px;border-top:4px solid var(--yellow)}
.trio > div:nth-child(2){border-top-color:var(--mint)}
.trio > div:nth-child(3){border-top-color:var(--magenta)}
.trio h4{margin-bottom:12px}
.trio p{font-size:.97rem;color:var(--ink-52);line-height:1.6}

/* ── Galerie ─────────────────────────────────────────────────────────────── */
/* Défilement horizontal continu, en CSS pur. La piste contient deux fois la
   même série d'écrans et se translate d'exactement la moitié de sa largeur :
   arrivée au bout, elle recommence sur la copie, sans saut visible. Le second
   exemplaire est aria-hidden, sinon un lecteur d'écran annoncerait chaque
   capture deux fois. */
.gallery{margin-top:clamp(36px,4.6vw,54px);overflow:hidden;
  padding:4px 0 28px}
.gallery__track{display:flex;gap:22px;width:max-content;
  animation:defile 60s linear infinite}
.gallery:hover .gallery__track,
.gallery:focus-within .gallery__track{animation-play-state:paused}
@keyframes defile{
  from{transform:translateX(0)}
  /* La moitié de la piste, plus la gouttière qui sépare les deux séries. */
  to{transform:translateX(calc(-50% - 11px))}
}
.gallery figure{margin:0;flex:none;width:min(262px,68vw)}
.gallery .device{width:100%}

/* Mouvement permanent : on le coupe pour qui le refuse, et la piste
   redevient simplement défilable à la main. */
@media (prefers-reduced-motion:reduce){
  .gallery{overflow-x:auto;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery__track{animation:none}
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(34px,4.4vw,50px);max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:18px;padding:23px 4px;cursor:pointer;
  font-weight:700;font-size:1.05rem;letter-spacing:-.026em;list-style:none;
  transition:color .16s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--yellow)}
.faq summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--ink-38);border-bottom:2.5px solid var(--ink-38);
  transform:rotate(45deg) translateY(-3px);transition:transform .28s var(--ease),border-color .28s}
.faq details[open] summary{color:var(--yellow)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px);
  border-color:var(--yellow)}
.faq__body{padding:0 44px 26px 4px;color:var(--ink-52);font-size:.99rem;line-height:1.68}
.faq__body a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
/* Bleu pâle du thème clair de l'application (--app-bg de front/index.html),
   et non un aplat jaune : le jaune de marque écrasait la fin de page. Le fond
   reste assez clair pour que l'icône (navy + bleu) et le badge Google Play
   noir ressortent, et assez neutre pour ne pas concurrencer le hero. */
.cta{background:var(--light-bg);color:#000}
.cta__in{padding-block:clamp(66px,8.5vw,110px);display:grid;gap:clamp(30px,5vw,60px);
  grid-template-columns:1fr auto;align-items:center}
@media (max-width:820px){.cta__in{grid-template-columns:1fr}}
.cta h2{max-width:15ch}
.cta p{margin-top:20px;font-size:clamp(1.04rem,1.5vw,1.2rem);color:rgba(0,0,0,.78);
  max-width:42ch}
.cta__row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 22px;margin-top:34px}
.cta .soon{color:rgba(0,0,0,.66)}
.cta :focus-visible{outline-color:#000}
@media (max-width:820px){.cta__ill{display:none}}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,66px) 30px;background:var(--black)}
.ft__grid{display:grid;gap:40px;grid-template-columns:1.5fr 1fr 1fr}
@media (max-width:760px){.ft__grid{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:span 2}}
/* Sous 520px, deux colonnes ne laissent plus la place à cinow.app@gmail.com. */
@media (max-width:520px){.ft__grid{grid-template-columns:1fr;gap:32px}
  .ft__brand{grid-column:auto}}
.ft ul a{overflow-wrap:anywhere}
.ft__brand .brand{margin-bottom:16px}
.ft__brand p{max-width:36ch}
.ft h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-38);margin-bottom:16px}
.ft ul{display:flex;flex-direction:column;gap:11px}
.ft ul a{font-size:.92rem;color:var(--ink-72);transition:color .16s}
.ft ul a:hover{color:var(--yellow)}
.ft__bar{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  margin-top:clamp(36px,4.8vw,54px);padding-top:24px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-38)}
.ft__bar p:last-child{margin-left:auto}
.ft__bar a:hover{color:var(--yellow)}

/* ── Pages légales ───────────────────────────────────────────────────────── */
.doc{max-width:780px;padding-block:clamp(48px,7.5vw,84px) clamp(56px,8.5vw,104px)}
.doc h1{font-size:clamp(2rem,4.4vw,2.8rem);letter-spacing:-.04em;margin-bottom:12px}
.doc .small{margin-bottom:36px}
.doc h2{font-size:clamp(1.14rem,2vw,1.32rem);letter-spacing:-.028em;line-height:1.25;
  margin:42px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--ink-72);font-size:1rem;line-height:1.72}
.doc p+p{margin-top:14px}
.doc ul{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.doc ul li{position:relative;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;
  background:var(--yellow)}
.doc a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--ink);font-weight:700}
.doc code{font-size:.9em;color:var(--mint)}
.doc__back{display:inline-flex;align-items:center;gap:9px;margin-bottom:32px;
  font-size:.9rem;color:var(--ink-52)}
.doc__back:hover{color:var(--yellow)}
.doc__back svg{width:15px;height:15px}

/* ── Apparition au défilement ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── Accueil provisoire (maquette Figma « v1 ») ──────────────────────────── */
/* Un seul écran sur fond navy : illustration, titre sur trois lignes, badge.
   Cotes relevées sur la maquette (cadre 1920 × 1309, titre en 76 px). Chaque
   taille est bornée à la fois par la largeur (vw) et par la hauteur (svh) de
   la fenêtre, pour que l'écran tienne sans défiler sur un portable comme sur
   un grand écran. Le reste est en em du titre : l'aplat, le picto et leurs
   écarts suivent la taille du texte. */
.splash-page{background:var(--navy);display:flex;flex-direction:column;min-height:100svh}
.splash{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(28px,min(7vw,10svh),133px) 16px clamp(72px,min(9vw,13svh),170px);overflow:hidden}
.splash__ill{width:min(675px,100%,52svh)}
.splash__title{display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(20px,min(5vw,7.3svh),96px);font-size:clamp(2.1rem,min(6.4vw,5.8svh),4.75rem);
  font-weight:500;letter-spacing:-.0105em;line-height:1.22}
.splash__y{color:var(--yellow)}
/* Aplat bleu légèrement de guingois, tracé exporté de la maquette et étiré
   sous le texte. Le nowrap empêche l'aplat de se couper en deux. */
.splash__tag{display:inline-flex;align-items:center;gap:.48em;white-space:nowrap;
  margin-top:.08em;padding:.02em .38em .1em .4em;
  background:url(../img/hero-tag.svg) center/100% 100% no-repeat}
.splash__tag img{width:.6em;height:.75em}
.splash__cta{position:relative;margin-top:clamp(16px,min(1.6vw,1.8svh),24px)}
.splash__gplay img{height:clamp(60px,min(7vw,7.2svh),94px)}
/* Flèche dessinée qui remonte vers le badge depuis le bas à droite. */
.splash__arrow{position:absolute;left:calc(50% + 66px);top:calc(100% + 22px);
  width:clamp(80px,min(8vw,11.7svh),153px);transform:rotate(179.23deg);pointer-events:none}
@media (max-width:520px){.splash__arrow{left:calc(50% + 30px);top:calc(100% + 12px)}}
.splash__ft{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  padding:0 16px 22px;font-size:.8rem;color:var(--ink-38)}
.splash__ft a:hover{color:var(--yellow)}