/* ═══════════════════════════════════════════════════════════════════
   Briques de CONVERSION partagées par TOUTES les pages du site
   (landing incluse, qui garde par ailleurs ses styles inline).
   Ne redéfinit aucune variable : s'appuie sur celles déjà posées par
   web/index.html ou web/assets/site.css (--rose, --border, --grad-cta…).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Note App Store (ligne de preuve sociale) ── */
.rating {
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:15px; color:var(--soft);
}
.rating .stars { color:#F5A623; font-size:16px; letter-spacing:1px; line-height:1; }
.rating b { font-family:var(--head); font-weight:800; color:var(--plum); font-size:17px; }
.rating a { color:var(--rose-deep); font-weight:600; text-decoration:none; }
.rating a:hover { text-decoration:underline; }

/* Note reprise dans le bandeau CTA rose des pages intérieures. */
/* display:flex (et non inline-flex) pour que la note passe SOUS le bouton
   et non à côté de lui, le bandeau étant en text-align:center. */
.cta-band .rating { display:flex; justify-content:center; margin-top:18px;
  color:rgba(255,255,255,.92); font-size:14.5px; }
.cta-band .rating b { color:#fff; }
.cta-band .rating .stars { color:#FFD98A; }
.cta-band .rating a { color:#fff; text-decoration:underline; }

/* ── Avis clients ── */
/* minmax 238px : les 4 avis tiennent sur une seule rangée en desktop
   (sinon le quatrième se retrouve seul sur une ligne). */
.reviews { display:grid; grid-template-columns:repeat(auto-fit, minmax(238px, 1fr)); gap:18px; }
.review {
  background:var(--card, rgba(255,255,255,.72)); border:1px solid rgba(255,255,255,.7);
  border-radius:22px; padding:24px; box-shadow:var(--shadow-soft);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; flex-direction:column;
}
.review .stars { color:#F5A623; font-size:15px; letter-spacing:1.5px; line-height:1; margin-bottom:10px; }
.review h3 { font-size:17px; margin:0 0 8px; }
.review p { margin:0 0 16px; color:var(--soft); font-size:15.5px; line-height:1.6; flex:1; }
.review .who { font-size:13px; color:var(--mute); font-weight:600; }

/* ── Encart CTA au fil du texte (milieu d'article) ── */
.cta-inline {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin:34px 0; padding:22px 24px; border-radius:22px;
  background:linear-gradient(135deg, rgba(255,224,232,.9), rgba(255,238,242,.9));
  border:1px solid var(--border); box-shadow:var(--shadow-soft);
}
.cta-inline img.mascot { width:56px; height:56px; flex:none; }
.cta-inline .txt { flex:1; min-width:200px; }
.cta-inline .txt strong { display:block; font-family:var(--head); font-size:18px; line-height:1.25; margin-bottom:4px; }
.cta-inline .txt span { font-size:14.5px; color:var(--soft); }
.cta-inline .btn { flex:none; }
@media (max-width:560px) {
  .cta-inline { flex-direction:column; align-items:flex-start; text-align:left; }
  .cta-inline .btn { width:100%; justify-content:center; }
}

/* ── Badge « bientôt sur Android » ── */
.btn.soon {
  background:rgba(255,255,255,.62); color:var(--soft); box-shadow:none;
  border:1px dashed var(--border); cursor:default; animation:none;
}
.btn.soon:hover { transform:none; box-shadow:none; }
.btn.soon svg { width:20px; height:20px; opacity:.7; flex:none; }
.btn.soon .lbl { display:flex; flex-direction:column; line-height:1.15; text-align:left;
  font-family:var(--head); font-weight:700; }
.btn.soon .lbl small { font-size:11px; font-weight:500; opacity:.9; font-family:var(--body); }
.btn.soon .lbl span { font-size:15px; }

/* ── Calculateur d'économies ──
   Utilisé par la landing ET par /fonctionnalites/economies-arret-tabac.html. */
.calc { background:var(--card, rgba(255,255,255,.72)); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow-soft); margin:30px 0;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.calc label { display:block; font-weight:700; font-family:var(--head); font-size:15px; margin:16px 0 6px; }
.calc input[type=range] { width:100%; accent-color:var(--rose); }
.calc .val { font-weight:800; color:var(--rose-deep); }
.calc-out { text-align:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.calc-out .big { font-family:var(--head); font-weight:800; font-size:clamp(34px, 6vw, 52px); line-height:1.1;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.calc-out .sub { color:var(--soft); font-size:15.5px; margin-top:4px; }
.calc-rows { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin-top:20px; }
.calc-rows .cell { background:rgba(255,255,255,.65); border:1px solid var(--border); border-radius:18px; padding:14px; text-align:center; }
.calc-rows .cell b { display:block; font-family:var(--head); font-size:20px; color:var(--rose-deep); }
.calc-rows .cell span { font-size:12.5px; color:var(--mute); }
/* Pied du calculateur sur la landing : le chiffre obtenu débouche sur le CTA. */
.calc-cta { margin-top:24px; padding-top:22px; border-top:1px solid var(--border); text-align:center; }
.calc-cta p { margin:0 0 16px; color:var(--soft); font-size:15.5px; }

/* ── Fond aurora WebGL ──
   Le <canvas> est injecté dans `.bg` par /assets/aurora.js, uniquement si le
   navigateur suit. Tant qu'il n'est pas peint il reste transparent : ce sont
   les blobs CSS qu'on voit. Une fois en place, ils s'effacent. */
.bg canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1s ease;
}
.bg canvas.in { opacity:1; }
.bg.gl .blob { opacity:0; animation:none; transition:opacity 1s ease .25s; }

/* ── Galerie de captures d'écran ──
   Vraies captures de l'app (webp), en défilement horizontal comme sur la
   fiche App Store : le visiteur voit ce qu'il télécharge avant de cliquer. */
/* Le fondu des bords indique qu'on peut faire défiler. Il est exprimé en px
   (et non en %) pour rester plus étroit que le padding de la rangée : sinon
   la première capture est déjà à moitié effacée à l'arrivée. */
.shots { position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); }
.shots-row {
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 22px 24px; margin:0 -22px;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.shots-row::-webkit-scrollbar { display:none; }
/* margin:0 — sans ça les marges par défaut de <figure> (40px de chaque côté)
   viennent s'ajouter au gap et disloquent la rangée. */
.shot { flex:0 0 auto; width:232px; margin:0; scroll-snap-align:center; }
.shot .frame {
  border-radius:34px; padding:7px;
  background:linear-gradient(145deg,#43434a,#1b1b1f 55%,#101013);
  box-shadow:0 0 0 1.5px #050506, 0 24px 50px rgba(216,69,106,.26), 0 10px 22px rgba(0,0,0,.18);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.shot:hover .frame { transform:translateY(-8px); box-shadow:0 0 0 1.5px #050506, 0 34px 66px rgba(216,69,106,.34); }
/* Les captures n'ont pas toutes exactement le même ratio (iPhone 14/17) :
   on impose celui du cadre et on recadre, sinon la rangée gigote. */
/* height:auto est indispensable : sans lui, les attributs width/height du
   <img> (posés pour réserver la place et éviter le décalage de mise en page)
   l'emportent sur aspect-ratio et la capture s'affiche en taille réelle. */
.shot .frame img {
  display:block; width:100%; height:auto; aspect-ratio:1284/2778; object-fit:cover; object-position:top;
  border-radius:28px; background:var(--rose-50,#FFEEF2);
}
.shot .cap { text-align:center; margin-top:15px; }
.shot .cap b { display:block; font-family:var(--head); font-size:16.5px; }
.shot .cap span { font-size:13.5px; color:var(--soft); line-height:1.45; display:block; margin-top:3px; }
.shots-hint { text-align:center; color:var(--mute); font-size:13px; margin:2px 0 0; }
@media (min-width:1100px) { .shot { width:246px; } }
@media (max-width:560px) { .shot { width:66vw; } }
@media (prefers-reduced-motion:reduce) { .shots-row { scroll-snap-type:none; } }

/* ── Barre CTA collante (mobile uniquement) ── */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; gap:12px;
  padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--border); box-shadow:0 -8px 26px rgba(216,69,106,.14);
  transform:translateY(115%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.sticky-cta.in { transform:none; }
.sticky-cta img { width:38px; height:38px; border-radius:11px; flex:none; }
.sticky-cta .sc-txt { flex:1; min-width:0; line-height:1.2; }
.sticky-cta .sc-txt b { display:block; font-family:var(--head); font-size:15px; }
.sticky-cta .sc-txt span { font-size:12.5px; color:var(--soft); }
.sticky-cta .sc-txt .stars { color:#F5A623; }
.sticky-cta .btn { padding:11px 18px; font-size:15px; border-radius:14px; flex:none; animation:none; }

@media (max-width:880px) {
  .sticky-cta { display:flex; }
  body { padding-bottom:76px; }
}
@media (prefers-reduced-motion:reduce) {
  .sticky-cta { transition:none; }
}