/* ═══════════════════════════════════════════════════════════════════════════
   BoothApp — pages.css : les composants des pages intérieures.

   Se charge APRÈS theme.css, qui fournit les jetons, le reset, la barre de
   navigation, le pied de page et les composants partagés. Ce fichier ne
   définit plus de couleurs : il traduit les anciens noms (--bg, --card,
   --text…) vers les jetons du thème, de sorte que tout le contenu existant
   suit le mode clair comme le mode sombre sans être réécrit.

   Une règle nouvelle utilise directement les jetons de theme.css ; le pont
   ci-dessous n'existe que pour l'existant, et a vocation à maigrir.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:      var(--paper);
  --bg2:     var(--paper-deep);
  --card:    var(--surface);
  --card2:   var(--surface-2);
  --border:  var(--line);
  --border2: var(--line-firm);
  --text:    var(--ink);
  --muted:   var(--ink-soft);
  --muted2:  var(--ink-faint);
  /* --accent, --yes, --no, --radius, --display et --body viennent de theme.css :
     les redéfinir ici casserait le thème sombre. --accent2 était un violet, et
     il n'y a plus qu'un accent. */
  --accent2: var(--accent);
}

/* Alias : les pages intérieures écrivent encore .btn-ghost là où le thème dit
   .btn-quiet. L'alias évite de toucher trente fichiers pour un nom. */
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-firm); box-shadow: var(--shadow-sm); }

/* Buttons */

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }

.btn-block { display: flex; width: 100%; padding: 14px; }

/* Nav */

.brand-mark { width: 28px; height: 28px; vertical-align: middle; }
/* Le gap se resserre plutôt que de laisser la barre déborder : entre 900 px (où les liens
   texte disparaissent) et le grand écran, cinq entrées + deux boutons ne tiennent pas à 28. */

.nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE — FR · EN · ES · NL

   Quatre codes de deux lettres dans une pastille : ça tient dans la largeur
   d'un bouton, donc ça survit à la coupure qui fait disparaître les liens texte
   sous 900 px. C'est précisément le seul élément de la barre qu'un visiteur
   tombé dans la mauvaise langue doit pouvoir atteindre — surtout sur téléphone.

   La langue courante est marquée par aria-current, pas par une classe : c'est
   la même information pour l'œil et pour le lecteur d'écran.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-links .lang-switch a {
  padding: 3px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted2);
}

/* Le même choix en pied de page, en toutes lettres : c'est le seul endroit qui reste
   quand la barre du haut se réduit aux deux boutons, sous 420 px. */
.footer-lang { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(60px, 10vw, 120px) 20px 80px; text-align: center; }
.hero-glow {
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 1080px; margin: 0 auto; }
.badge {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 28px;
}
.hero h1 { font-size: clamp(38px, 7vw, 68px); font-weight: 900; }
.grad { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 620px; margin: 24px auto 0; color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); }
.lead strong { color: var(--text); }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.cta-note { margin-top: 16px; color: var(--muted2); font-size: 14px; }

/* Hero : capture réelle de l'app (recadrée sur la fenêtre, coins et ombre gérés ici) */
.hero-shot {
  display: block; width: min(860px, 100%); height: auto; margin: 48px auto 0;
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* Trust */
.trust {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  padding: 0 20px 24px; color: var(--muted2); font-size: 14px; font-weight: 500; letter-spacing: .02em;
}

/* Sections */

.section-alt > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; text-align: center; }
.section-sub { text-align: center; color: var(--muted); margin-top: 12px; font-size: 17px; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 48px; }
.card {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-firm); }
.ic { font-size: 30px; }
.card h3 { font-size: 19px; margin: 14px 0 8px; }
.card p { color: var(--muted); font-size: 15px; }

/* Steps */

.step-n {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 960px; margin: 48px auto 0; }
@media (max-width: 860px) {
  .pricing { grid-template-columns: 1fr; max-width: 480px; }
}
.price-card {
  position: relative; background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border); border-radius: 20px; padding: 32px;
}
.price-card.featured { border-color: var(--accent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.price-card h3 { font-size: 20px; color: var(--muted); font-weight: 600; }
.price { margin: 14px 0 22px; }
.amount { font-size: 46px; font-weight: 900; }
.per { color: var(--muted); font-size: 16px; }
.price-card ul { list-style: none; margin-bottom: 26px; }
.price-card li { padding: 7px 0; color: var(--text); font-size: 15px; border-bottom: 1px solid var(--surface-2); }
.price-sub { color: var(--muted2); font-size: 13px; margin: -14px 0 22px; }
.billing-toggle {
  display: flex; background: var(--paper-deep); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px; margin: 14px 0 8px; gap: 3px; max-width: 220px;
}
.billing-toggle button {
  flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 999px; cursor: pointer;
}
.billing-toggle button.active { background: var(--accent2); color: #fff; }

/* Download */
.download { text-align: center; }
.download .btn { margin-top: 32px; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 56px clamp(20px,5vw,64px) 32px; }
/* Brand colors on hover, keyed on each icon's aria-label. */
.socials a[aria-label="TikTok"]:hover { color: #25f4ee; border-color: rgba(37,244,238,.45); }
/* Slim footer for legal / utility pages: the bottom bar alone, no columns. */
.footer-slim { border-top: 0; padding-top: 0; }
.todo { color: var(--accent2); font-style: italic; }

/* Legal pages */
.legal-nav { padding: 16px clamp(20px,5vw,64px); border-bottom: 1px solid var(--border); }
.legal { max-width: 780px; margin: 0 auto; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px) 80px; }
.legal h1 { font-size: clamp(28px,5vw,40px); font-weight: 800; margin-bottom: 6px; }
.legal .updated { color: var(--muted2); font-size: 14px; margin-bottom: 32px; }
.legal h2 { font-size: 20px; margin: 34px 0 12px; scroll-margin-top: clamp(80px, 14vh, 150px); }
.legal p, .legal li { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal a { color: var(--accent2); }
.legal code { overflow-wrap: anywhere; }
.legal td, .legal th { overflow-wrap: anywhere; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; }
.legal th, .legal td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; font-size: 14px; color: var(--muted); }
.legal th { color: var(--text); font-weight: 600; }
.legal .todo { background: var(--accent-tint); border: 1px dashed var(--accent-ring); border-radius: 6px; padding: 1px 7px; font-style: normal; color: var(--accent-deep); }
.legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.legal-back:hover { color: var(--text); }
.legal-note { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent2); border-radius: 10px; padding: 14px 16px; color: var(--muted); font-size: 14px; margin: 20px 0; }

/* Legal table of contents (jump links). Two-column only once JS adds .has-toc → no-JS stays 1 column. */
.legal-toc { display: none; }
.legal-layout.has-toc { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 44px; align-items: start; padding: 0 clamp(20px, 5vw, 40px); }
.legal-layout.has-toc > .legal { grid-column: 1; grid-row: 1; min-width: 0; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.legal-layout.has-toc .legal-toc { grid-column: 2; grid-row: 1; display: block; position: sticky; top: 24px; align-self: start; padding-top: clamp(36px, 6vw, 72px); }
.legal-toc-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 12px; padding-left: 14px; }
.legal-toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--border); max-height: calc(100vh - 96px); overflow-y: auto; }
.legal-toc a { color: var(--muted); font-size: 13px; line-height: 1.35; padding: 7px 14px; border-left: 2px solid transparent; margin-left: -1px; transition: color .15s ease, border-color .15s ease; }
.legal-toc a:hover { color: var(--text); }
.legal-toc a.active { color: var(--text); border-left-color: var(--accent); font-weight: 500; }
@media (max-width: 860px) {
  .legal-layout.has-toc { display: block; max-width: none; padding: 0; }
  .legal-layout.has-toc > .legal { max-width: 780px; margin: 0 auto; padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); }
  .legal-layout.has-toc .legal-toc { display: none; }
}

@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
/* 900 et non 640 : à 640 les liens texte tenaient encore à l'écran, mais la barre
   débordait déjà en dessous de 900 px — l'accueil faisait défiler la page en largeur
   sur une tablette. Le seuil est celui où la barre CESSE de tenir, pas celui où le
   téléphone commence. */
/* Entre 900 et 1100 px, la barre française est la plus chargée du site (cinq liens texte,
   le sélecteur de langue et deux boutons) : elle débordait de 42 px sur un écran 1024.
   On resserre avant de couper — les liens sont encore utiles à cette largeur. */
@media (max-width: 1100px) {
  .nav-links { gap: 12px; }
}
@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  /* Le sélecteur de langue survit à la coupure : c'est le seul lien texte dont un
     visiteur arrivé dans la mauvaise langue a réellement besoin. */
  .nav-links > a:not(.btn) { display: none; }
}
@media (max-width: 420px) {
  /* À la toute fin, il ne reste que la marque et les deux boutons : le sélecteur
     part aussi, sinon la barre déborde. Le pied de page garde les quatre liens. */
  .lang-switch { display: none; }
}
/* Sur les petits écrans il ne reste que la marque + 2 boutons : sans cela ils
   débordent de quelques pixels et la page défile horizontalement. */
@media (max-width: 420px) {
  .nav { padding-left: 14px; padding-right: 14px; }
  .brand { font-size: 18px; gap: 8px; }
}

/* FAQ */

.faq-item {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 22px; transition: border-color .15s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--line-firm); }
.faq-item summary {
  cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--muted); font-size: 22px; font-weight: 400;
  flex-shrink: 0; transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); padding: 0 0 18px; margin: 0; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   Page de présentation (index) — composants ajoutés
   ═════════════════════════════════════════════════════════════════════════ */

/* Lisible par les lecteurs d'écran uniquement (légende du tableau comparatif) */

/* Étiquette au-dessus des titres de section */

.eyebrow.alt { color: var(--accent2); }

/* Grain léger sur toute la page : casse les aplats de dégradé */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .022; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero-mesh {
  position: absolute; inset: -10% -20% auto; height: 780px; pointer-events: none;
  background:
    radial-gradient(42% 55% at 22% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(38% 50% at 78% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  filter: blur(6px);
  opacity: 0;   /* en clair, le hero reste blanc — cf. .hero-glow de theme.css */
}
:root[data-theme="dark"] .hero-mesh { opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-mesh { opacity: .5; }
}
/* Quadrillage fin qui s'estompe vers le bas */
.hero-grid {
  position: absolute; inset: 0 0 auto; height: 620px; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.hero h1 { letter-spacing: -0.035em; text-wrap: balance; max-width: 15ch; margin: 0 auto; }
@media (min-width: 720px) { .hero h1 { max-width: 20ch; } }
.hero-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--border);
  color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.hero-pill b { color: var(--text); font-weight: 600; }
.hero-pill .tag {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  letter-spacing: .02em;
}
/* Arguments courts sous les boutons du hero */
.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: 22px; color: var(--muted); font-size: 14.5px;
}
.hero-facts span { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 15px; height: 15px; fill: var(--yes); flex: none; }

/* ── Piliers (pourquoi BoothApp) ────────────────────────────────────────── */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 48px;
}
.pillar {
  position: relative; padding: 26px 24px 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border); overflow: hidden;
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}
.pillar .num {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--accent2); letter-spacing: .1em;
}
.pillar h3 { font-size: 18.5px; margin: 12px 0 9px; }
.pillar p { color: var(--muted); font-size: 14.5px; }

/* ── Blocs alternés fonctionnalité / visuel ─────────────────────────────── */
.showcase { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: 56px; }
.show-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.show-row.flip .show-text { order: 2; }
.show-row.flip .show-visual { order: 1; }
.show-text h3 { font-size: clamp(24px, 3.2vw, 32px); margin: 12px 0 14px; }
.show-text > p { color: var(--muted); font-size: 16px; }
.show-list { list-style: none; margin-top: 22px; display: grid; gap: 11px; }
.show-list li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px;
  align-items: start; color: var(--muted); font-size: 15px;
}
.show-list li strong { color: var(--text); font-weight: 600; }
.show-list .chk {
  width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--yes) 12%, transparent); border: 1px solid color-mix(in srgb, var(--yes) 30%, transparent);
}
.show-list .chk svg { width: 11px; height: 11px; fill: var(--yes); }
.show-note {
  margin-top: 20px; padding: 12px 15px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 3px solid var(--accent2);
  color: var(--muted); font-size: 14px;
}
.show-note strong { color: var(--text); }
@media (max-width: 880px) {
  .show-row { grid-template-columns: 1fr; gap: 30px; }
  .show-row.flip .show-text, .show-row.flip .show-visual { order: initial; }
}

/* Cadre commun des visuels de droite */
.show-visual {
  position: relative; border-radius: 20px; padding: 26px;
  background: linear-gradient(155deg, var(--surface-2), var(--paper-deep));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.show-visual img { display: block; width: 100%; height: auto; border-radius: 12px; }
.show-visual.bare { padding: 0; overflow: hidden; }

/* Illustration : bandelette d'impression 2×6 */
.strip-demo { display: flex; gap: 20px; align-items: center; justify-content: center; }
.strip {
  width: 116px; padding: 9px 9px 26px; border-radius: 7px; background: #fff;
  box-shadow: var(--shadow-md); flex: none;
}
.strip i {
  display: block; height: 62px; border-radius: 3px; margin-bottom: 7px;
  background: var(--accent);
  opacity: .82;
}
.strip i:nth-child(2) { opacity: .62; }
.strip i:nth-child(3) { opacity: .46; margin-bottom: 10px; }
.strip b {
  display: block; text-align: center; font-family: var(--display);
  font-size: 10px; font-weight: 700; color: #17110f; letter-spacing: .06em;
}
.strip-meta { display: grid; gap: 9px; min-width: 0; }
.strip-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.strip-meta span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yes); flex: none;
}
@media (max-width: 420px) { .strip-demo { flex-direction: column; } }

/* Illustration : éditeur de modèles (canevas + calques) */
.editor-demo { display: grid; grid-template-columns: 1fr 132px; gap: 16px; }
.editor-canvas {
  border-radius: 10px; background: var(--paper-deep); border: 1px solid var(--border);
  padding: 14px; display: grid; gap: 9px; grid-template-rows: repeat(3, 1fr); min-height: 232px;
}
.editor-canvas i {
  border-radius: 5px; border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--muted2); letter-spacing: .08em; font-weight: 600;
}
.editor-canvas i.txt {
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-family: var(--display); font-size: 14px; color: var(--accent-deep); letter-spacing: 0;
}
.editor-layers { display: grid; gap: 7px; align-content: start; }
.editor-layers b {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted2); font-weight: 700; margin-bottom: 2px;
}
.editor-layers span {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
}
.editor-layers span::before { content: "◆"; color: var(--accent2); font-size: 8px; }
@media (max-width: 520px) { .editor-demo { grid-template-columns: 1fr; } }

/* Illustration : canaux de partage autour d'un QR */
.share-demo { display: grid; gap: 16px; justify-items: center; }
.qr-box {
  width: 118px; height: 118px; border-radius: 14px; background: #fff; padding: 11px;
  box-shadow: var(--shadow-md);
}
.qr-box svg { width: 100%; height: 100%; display: block; }
.share-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.share-chips span {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.share-chips span.on { border-color: color-mix(in srgb, var(--yes) 35%, transparent); color: var(--yes); background: color-mix(in srgb, var(--yes) 7%, transparent); }

/* Illustration : flotte de bornes pilotée à distance */
.fleet-demo { display: grid; gap: 10px; }
.fleet-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border);
}
.fleet-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yes); }
.fleet-dot.off { background: var(--muted2); }
.fleet-row b { font-size: 14px; font-weight: 600; }
.fleet-row em { display: block; font-style: normal; color: var(--muted2); font-size: 12px; }
.fleet-state {
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--yes) 10%, transparent); color: var(--yes); border: 1px solid color-mix(in srgb, var(--yes) 25%, transparent);
  white-space: nowrap;
}
.fleet-state.idle { background: var(--surface-2); color: var(--muted2); border-color: var(--border); }

/* ── Cartes tarifaires (4 colonnes) ─────────────────────────────────────── */

@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 620px)  { .plans { grid-template-columns: 1fr; max-width: 420px; } }

.plan.hero-plan {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent) 55%, transparent);
}

.plan-price .unit { color: var(--muted); font-size: 14px; }

.plan-bornes {
  margin: 16px 0 14px; padding: 9px 12px; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-deep); font-size: 13px; font-weight: 600;
}

.plan li b { color: var(--text); font-weight: 600; }
.plan li .m { margin-top: 1px; font-weight: 800; font-size: 13px; }
.plan li .m.y { color: var(--yes); }
.plan li .m.n { color: var(--no); }

/* La bascule n'existe que sur la carte Pro. Les autres cartes réservent la même
   hauteur (.plan-toggle-slot) pour que les 4 prix restent alignés horizontalement. */
.plan-toggle, .plan-toggle-slot {
  height: 39px; margin: 14px 0 2px;
}
.plan-toggle {
  display: flex; background: var(--paper-deep); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px; gap: 3px;
}
@media (max-width: 1080px) { .plan-toggle-slot { display: none; } }
.plan-toggle button {
  flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 7px 8px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.plan-toggle button.active { background: var(--accent2); color: #fff; }

/* ── Tableau comparatif ─────────────────────────────────────────────────── */
/* Pas de conteneur de défilement au-dessus de 900px : sinon `overflow-x` force
   `overflow-y: auto`, ce qui casse la ligne d'en-tête collante du tableau. */
.compare-wrap {
  margin-top: 44px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--card2);
}
@media (max-width: 900px) {
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { text-align: center; padding: 13px 12px; }
/* Colonne des intitulés : figée à gauche pendant le défilement horizontal */
.compare th[scope="row"], .compare .rowhead {
  position: sticky; left: 0; z-index: 2;
  text-align: left; font-weight: 400; color: var(--muted);
  background: var(--card2); min-width: 268px;
  border-right: 1px solid var(--border);
}
/* 73px = hauteur de la barre de navigation collante, pour passer dessous et non dessus */
.compare thead th {
  position: sticky; top: 73px; z-index: 3;
  background: var(--surface-2); border-bottom: 1px solid var(--border2);
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text);
  padding: 16px 12px;
}
.compare thead th:first-child { z-index: 4; background: var(--surface-2); min-width: 268px; }
.compare thead th small {
  display: block; font-family: var(--body); font-size: 11.5px;
  font-weight: 500; color: var(--muted2); margin-top: 3px; letter-spacing: 0;
}
.compare thead th.is-hero { color: #fff; box-shadow: inset 0 3px 0 var(--accent); }
.compare tbody tr:not(.grp):hover td,
.compare tbody tr:not(.grp):hover th[scope="row"] { background: var(--surface-2); }
.compare tbody td, .compare tbody th[scope="row"] { border-top: 1px solid var(--line); }
/* Ligne de groupe */
.compare tr.grp th {
  position: sticky; left: 0;
  text-align: left; background: var(--surface-2); color: var(--accent2);
  font-family: var(--body); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; padding: 11px 12px;
  border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2);
}
/* Pastilles ✓ / ✗ */
.mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%; vertical-align: middle;
}
.mk svg { width: 12px; height: 12px; }
.mk.y { background: color-mix(in srgb, var(--yes) 13%, transparent); border: 1px solid color-mix(in srgb, var(--yes) 34%, transparent); }
.mk.y svg { fill: var(--yes); }
.mk.n { background: color-mix(in srgb, var(--no) 11%, transparent); border: 1px solid color-mix(in srgb, var(--no) 30%, transparent); }
.mk.n svg { fill: var(--no); }
.compare td .val { font-weight: 600; color: var(--text); font-size: 14px; }
.compare td .val.dim { color: var(--muted); font-weight: 500; }
.compare .ftn {
  display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 700;
  color: var(--accent2); vertical-align: super; cursor: help;
}
.compare-foot {
  display: grid; gap: 7px; margin-top: 18px; color: var(--muted2); font-size: 13px;
}
.compare-foot b { color: var(--muted); font-weight: 600; }
.compare-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  margin-top: 26px; color: var(--muted); font-size: 13.5px;
}
.compare-legend span { display: inline-flex; align-items: center; gap: 8px; }
.compare-hint {
  display: none; text-align: center; color: var(--muted2);
  font-size: 12.5px; margin-top: 12px;
}
@media (max-width: 800px) { .compare-hint { display: block; } }
/* Sur téléphone, la colonne des intitulés mangeait les deux tiers de l'écran :
   on la resserre pour laisser voir au moins deux colonnes de formules. */
@media (max-width: 560px) {
  .compare { min-width: 620px; font-size: 13.5px; }
  .compare th[scope="row"], .compare thead th:first-child { min-width: 180px; }
  .compare th, .compare td { padding: 11px 9px; }
  .compare thead th { font-size: 13.5px; }
}

/* ── Configuration requise ──────────────────────────────────────────────── */
.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 44px;
}
.spec {
  padding: 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2)); border: 1px solid var(--border);
}
.spec h4 {
  font-family: var(--body); font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted2); margin-bottom: 11px;
}
.spec p { color: var(--muted); font-size: 14.5px; }
.spec p strong { color: var(--text); font-weight: 600; }

/* ── Bandeau d'appel à l'action final ───────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 76px) clamp(24px, 5vw, 56px);
  border-radius: 26px; border: 1px solid var(--border);
  background:
    radial-gradient(58% 130% at 18% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    radial-gradient(58% 130% at 82% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    linear-gradient(180deg, var(--surface-2), var(--paper-deep));
}
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
.cta-band p { color: var(--muted); margin-top: 14px; font-size: 16.5px; }
.cta-band .cta-row { margin-top: 30px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Pages d'atterrissage (/tarifs, /logiciel-photobooth-sans-internet, /photobooth-rgpd)
   Une colonne de texte lisible, réutilisée telle quelle par les trois pages.
   ═════════════════════════════════════════════════════════════════════════ */
.lp-prose { max-width: 760px; margin: 0 auto; }
.lp-prose p { color: var(--muted); font-size: 16.5px; margin-bottom: 16px; }
.lp-prose p strong, .lp-prose li strong { color: var(--text); font-weight: 600; }
.lp-prose h3 { font-size: 21px; margin: 34px 0 12px; }
.lp-prose ul { padding-left: 22px; margin-bottom: 18px; }
.lp-prose li { color: var(--muted); font-size: 16.5px; margin-bottom: 9px; }
.lp-prose a { color: var(--accent2); }

/* Tableau autonome (comparatif court d'une page d'atterrissage) */
.lp-table { width: 100%; border-collapse: collapse; margin: 30px auto 10px; max-width: 880px; }
.lp-table th, .lp-table td { border: 1px solid var(--border); padding: 12px 14px; text-align: left; font-size: 15px; color: var(--muted); }
.lp-table thead th { color: var(--text); font-weight: 600; background: var(--card2); }
.lp-table td:first-child, .lp-table tbody th { color: var(--text); font-weight: 500; text-align: left; }
.lp-scroll { overflow-x: auto; }

/* Fil d'Ariane */
.lp-crumb { max-width: 1180px; margin: 0 auto; padding: 22px clamp(20px, 5vw, 40px) 0; font-size: 14px; color: var(--muted2); }
.lp-crumb a { color: var(--muted); }
.lp-crumb a:hover { color: var(--text); }

/* Lien contextuel en fin de pilier (accueil → pages d'atterrissage) */
.pillar-link { display: inline-block; margin-top: 8px; color: var(--accent2); font-weight: 600; font-size: 15px; }
.pillar-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAUTÉS (/nouveautes) — le journal des versions

   Deux lecteurs sur la même page, et ils ne cherchent pas la même chose : celui
   qui vient de voir sa borne redémarrer veut savoir CE QU'IL A GAGNÉ, celui qui
   prépare une soirée veut savoir S'IL EST À JOUR. D'où deux colonnes : le numéro
   et la date à gauche, ce qui change à droite. Sous 720 px la colonne de gauche
   passe au-dessus, en ligne — elle reste une étiquette, pas un titre.

   Les étiquettes disent la NATURE du changement avant qu'on lise la phrase :
   corail pour ce qui n'existait pas, indigo pour ce qui existait et va mieux,
   vert pour ce qui ne marchait pas. Trois, pas huit : au-delà, personne ne les
   distingue et elles redeviennent de la décoration.
   ══════════════════════════════════════════════════════════════════════════ */
.rn-list { max-width: 900px; margin: 28px auto 0; display: grid; gap: 14px; list-style: none; }
.rn-entry {
  display: grid; grid-template-columns: 132px 1fr; gap: 26px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
  /* La barre de navigation est collante : sans ça, arriver par #v1-1-143 pose le titre
     de la version dessous et on croit avoir atterri sur la mauvaise. */
  scroll-margin-top: 90px;
}
.rn-meta { display: flex; flex-direction: column; gap: 2px; }
/* Le numéro est un lien vers lui-même : c'est ce qui rend une version citable dans un
   mail de support (« corrigé en 1.1.143 » devient cliquable). Il ne se déguise pas en
   lien pour autant — souligné au survol, c'est assez. */
.rn-version { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.rn-version:hover { text-decoration: underline; text-decoration-color: var(--muted2); }
.rn-date { color: var(--muted2); font-size: 13.5px; }
/* L'étiquette d'application se lit AVANT le numéro : 1.1.146 et 1.0.6 ne veulent rien
   dire l'un à côté de l'autre tant qu'on ne sait pas de quelle app on parle. */
.rn-plat {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 4px;
}
.rn-plat-windows { color: var(--muted2); }
.rn-plat-mobile { color: var(--accent-deep); }
/* Ambre pour le portail : les trois autres couleurs de la page sont prises (corail =
   « Nouveau », indigo = mobile et « Amélioré », vert = « Corrigé »). */
.rn-plat-portal { color: var(--accent-deep); }
.rn-current {
  margin-top: 8px; white-space: nowrap; align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--yes); background: color-mix(in srgb, var(--yes) 10%, transparent); border: 1px solid color-mix(in srgb, var(--yes) 28%, transparent);
}

/* Filtre par application. Le CSS fait tout le travail : le script ne pose qu'un attribut. */
.rn-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.rn-filter button {
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font-family: var(--body); font-size: 14px; font-weight: 600;
}
.rn-filter button:hover { color: var(--text); border-color: var(--border2); }
.rn-filter button[aria-pressed="true"] {
  color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.rn-list[data-filter="windows"] .rn-entry:not([data-platform="windows"]),
.rn-list[data-filter="portal"] .rn-entry:not([data-platform="portal"]),
.rn-list[data-filter="mobile"] .rn-entry:not([data-platform="mobile"]) { display: none; }
.rn-entry h3 { font-size: 20px; margin-bottom: 4px; }
.rn-changes { list-style: none; display: grid; gap: 11px; margin-top: 14px; }
/* La puce est l'étiquette : un marqueur de liste en plus ferait deux signes
   pour la même chose, décalés l'un de l'autre. */
.rn-changes li { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.rn-changes strong { color: var(--text); font-weight: 600; }
.rn-tag {
  display: inline-block; margin-right: 9px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  vertical-align: 1.5px; white-space: nowrap; border: 1px solid transparent;
}
.rn-new { color: var(--accent);  background: color-mix(in srgb, var(--accent) 12%, transparent);  border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.rn-up  { color: var(--accent-deep);        background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.rn-fix { color: var(--yes);     background: color-mix(in srgb, var(--yes) 10%, transparent); border-color: color-mix(in srgb, var(--yes) 28%, transparent); }
.rn-foot { max-width: 900px; margin: 34px auto 0; color: var(--muted2); font-size: 15px; text-align: center; }
.rn-foot a { color: var(--accent2); font-weight: 600; }

@media (max-width: 720px) {
  .rn-entry { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  /* Sur une colonne, l'en-tête redevient une ligne : application · version · date ·
     « version actuelle ». Les marges verticales de la version en colonne n'ont plus de sens. */
  .rn-meta { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .rn-plat { margin-bottom: 0; }
  .rn-current { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON GRISÉ — un lien qu'on garde visible mais qu'on ne peut pas suivre.

   Posé le 14/08/2026 pour fermer le téléchargement Windows, LEVÉ le 16/08 :
   /download/latest sert de nouveau l'installeur (voir vercel.json) et plus
   aucun bouton de la borne ne porte aria-disabled. La règle reste parce que le
   verrou Play Store, plus bas, marche sur le même principe — et parce que le
   jour où il faut refermer quelque chose, il n'y a qu'un attribut à poser.

   On grise sans retirer : un bouton qui disparaît laisse croire à une panne,
   un bouton grisé dit qu'il existe et qu'il reviendra.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn[aria-disabled="true"] { pointer-events: none; opacity: .45; filter: grayscale(1); cursor: not-allowed; }

/* ── Captures de l'application mobile ────────────────────────────────────────
   Un écran de téléphone, pas une illustration : les captures sont prises dans
   l'application elle-même (script apps/mobile/store/capture-screenshots.mjs sur
   le compte de démonstration), redimensionnées à 480 px. Le cadre est
   volontairement sobre — une bordure et une ombre — parce qu'un faux châssis de
   téléphone dessiné en CSS vieillit mal et ne ressemble jamais à l'appareil de
   celui qui regarde. */
.device-screen {
  border-radius: 26px;
  border: 1px solid var(--border2);
  background: var(--card2);
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.device-screen img { display: block; width: 100%; height: auto; border-radius: 19px; }

/* Un téléphone posé dans le cadre d'une section « showcase » : sans cette largeur
   maximale, l'image portrait (480×853) remplirait la colonne et ferait presque
   900 px de haut à elle seule, écrasant le texte en face. */
.show-visual .device-screen { max-width: 250px; margin: 0 auto; }

/* ── Le jeu de cartes des écrans de l'app ────────────────────────────────────
   Toutes les pages de l'application, empilées derrière celle de devant, qu'on
   parcourt de trois façons : en faisant défiler la page (l'écran suit le
   paragraphe en cours de lecture), en cliquant une carte ou une pastille, ou
   en glissant le doigt sur le téléphone.

   Deux états, et c'est volontaire :
     • sans JavaScript, .deck reste une bande d'images qui défile
       horizontalement — les sept captures restent visibles et accessibles ;
     • avec JavaScript, la classe .is-ready bascule sur l'empilement animé.
   Toutes les règles de l'empilement sont donc préfixées .deck.is-ready : une
   erreur de script ne peut pas laisser la section vide. */
.deck {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 0 clamp(20px, 5vw, 40px);
}
.deck-phone {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.deck-shot {
  flex: 0 0 auto; width: 220px; height: auto;
  scroll-snap-align: center;
  border-radius: 22px;
  border: 1px solid var(--border2);
  background: var(--card2);
  box-shadow: var(--shadow-lg);
  -webkit-user-drag: none; user-select: none;
}
.deck-nav { display: none; }
.deck-steps { list-style: none; margin: 28px auto 0; max-width: 760px; }
.deck-step { margin-bottom: 22px; }
.deck-n {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; color: var(--muted2);
}
.deck-step h3 { font-size: 20px; margin: 4px 0 6px; }
.deck-step p { color: var(--muted); font-size: 16px; }
.deck-step p strong { color: var(--text); font-weight: 600; }

/* ── État enrichi (JavaScript actif) ─────────────────────────────────────── */
.deck.is-ready .deck-phone {
  position: relative;
  display: block;
  overflow: visible;
  width: 100%; max-width: 280px;
  aspect-ratio: 480 / 853;
  margin: 0 auto;
  padding: 0;
  /* Le geste vertical reste au navigateur : sans ça, un balayage vers le bas
     démarré sur le téléphone bloquerait le défilement de la page. */
  touch-action: pan-y;
  outline: none;
}
.deck.is-ready .deck-phone:focus-visible { outline: 2px solid var(--accent2); outline-offset: 14px; border-radius: 26px; }
.deck.is-ready .deck-shot {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22, .7, .3, 1), opacity .35s ease;
}
.deck.is-ready .deck-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 26px;
}
.deck-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.deck-arrow:hover { color: var(--text); border-color: var(--border2); }
.deck-arrow[disabled] { opacity: .3; cursor: default; }
.deck-dots { display: flex; align-items: center; gap: 9px; }
.deck-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--muted2); cursor: pointer;
  transition: background .15s ease, width .2s ease;
}
.deck-dot:hover { background: var(--muted); }
.deck-dot.is-active { background: var(--accent); width: 22px; }

@media (min-width: 900px) {
  /* Le téléphone reste à l'écran pendant qu'on lit les étapes à côté : c'est ce
     collage qui fait « bouger » les captures au défilement, sans jamais
     confisquer la molette au visiteur. */
  .deck.is-ready {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
  }
  .deck.is-ready .deck-stage { position: sticky; top: 96px; }
  .deck.is-ready .deck-steps { margin: 0; max-width: none; }
  /* Une étape par « écran de défilement » : c'est cette hauteur qui donne au
     visiteur le temps de lire avant que la carte suivante passe devant. */
  .deck.is-ready .deck-step {
    min-height: 52vh; margin: 0;
    display: flex; flex-direction: column; justify-content: center;
    opacity: .34; transition: opacity .3s ease;
    cursor: pointer;
    border-left: 2px solid transparent; padding-left: 22px;
  }
  .deck.is-ready .deck-step.is-active { opacity: 1; border-left-color: var(--accent); }
  .deck.is-ready .deck-step h3 { font-size: 25px; }
}

/* Sous 900 px, la légende accompagne la carte de devant : afficher les sept
   d'affilée ferait une page de texte sans rapport avec l'écran visible. */
@media (max-width: 899px) {
  /* Les cartes de l'éventail dépassent du téléphone : sur un écran étroit,
     c'est la largeur du téléphone qu'on réduit pour leur faire de la place —
     sinon la page entière gagne une barre de défilement horizontale. */
  .deck.is-ready .deck-phone { max-width: min(280px, 66vw); }
  .deck.is-ready .deck-steps { text-align: center; margin-top: 24px; }
  .deck.is-ready .deck-step { display: none; margin: 0; }
  .deck.is-ready .deck-step.is-active { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .deck.is-ready .deck-shot { transition: none; }
}

/* ── Bouton Android ──────────────────────────────────────────────────────────
   Une pastille sombre, le robot repris en vert Android : le logo fait le travail
   de reconnaissance que le mot « Android » ferait moins vite.

   VERROU PLAY STORE (posé le 16/08/2026) : l'application est en test fermé, la
   fiche publique répond 404. Le bouton est donc grisé et inerte tant que
   l'attribut data-play-locked est présent. POUR L'OUVRIR : retirer
   `data-play-locked` et `aria-disabled` du lien (dans
   piloter-photobooth-a-distance.html et index.html), et remettre le libellé
   « Télécharger sur Google Play ». Rien d'autre à changer. */
.android-cta { max-width: 760px; margin: 46px auto 0; text-align: center; }
.btn-android {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px; border: 1px solid var(--border2);
  background: linear-gradient(180deg, var(--surface-2), var(--paper-deep));
  color: var(--text);
  transition: transform .12s ease, border-color .15s ease;
}
.btn-android:hover { transform: translateY(-1px); border-color: var(--line-firm); }
.btn-android .ico-android { width: 26px; height: 26px; color: var(--yes); flex: 0 0 auto; }
.btn-android b { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.15; }
.btn-android small { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.btn-android[data-play-locked] { opacity: .5; filter: grayscale(1); pointer-events: none; }
.android-note { margin-top: 14px; color: var(--muted); font-size: 14.5px; }
.android-note a { color: var(--accent2); }
.android-note a:hover { text-decoration: underline; }

/* La même pastille, en petit, sous le téléphone de la page d'accueil. */
.btn-android.btn-android-sm { padding: 8px 16px 8px 13px; gap: 9px; border-radius: 12px; }
.btn-android-sm .ico-android { width: 20px; height: 20px; }
.btn-android-sm b { font-size: 14px; }
.btn-android-sm small { font-size: 10.5px; }

/* Le quatrième argument du hero est un lien : mêmes attributs visuels que ses
   voisins (c'est une liste, pas un bouton), signalé au survol seulement. */
.hero-facts .hero-fact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.hero-facts .hero-fact-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Hero sur petit écran ────────────────────────────────────────────────────
   Mesuré avant correction sur Pixel 5 (viewport 727 px) : la rangée de boutons
   s'étendait de 605 à 738 px — le bouton principal était donc coupé par le bas
   de l'écran, sur la seule page où il compte. En cause, deux boutons `btn-lg`
   qui ne tiennent pas côte à côte dans 353 px et passent l'un sous l'autre.
   On récupère la hauteur là où elle ne coûte rien : marges du hero, et des
   boutons assez compacts pour tenir sur une ligne. */
@media (max-width: 640px) {
  .hero { padding-top: 40px; }
  .lead { margin-top: 18px; }
  .cta-row { margin-top: 24px; gap: 10px; }
  .hero .cta-row .btn-lg { padding: 13px 18px; font-size: 15.5px; }
  .hero-facts { margin-top: 18px; gap: 8px 18px; font-size: 13.5px; }
}
@media (max-width: 640px) { .sm-hide { display: none; } }