/* Landing page publique - hero sombre + sections claires, dans l'esprit des sites SaaS modernes. */

body.landing {
  background: var(--color-bg);
}

.topnav-brand.landing-brand { color: white; }

/* --- Navigation flottante --- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 16, 32, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.landing-nav-links {
  display: flex;
  gap: 24px;
  margin-left: 24px;
}

.landing-nav-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.landing-nav-links a:hover { color: white; }

.landing-nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Le selecteur de langue est insere dans un <span> en ligne : sans ce conteneur flex, il
   s'alignait sur la ligne de base du texte et remontait de 5px au-dessus des boutons voisins. */
.landing-nav-cta > [data-lang-switcher] {
  display: inline-flex;
  align-items: center;
}

.btn-ghost-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.08); }

.btn-lg { padding: 14px 26px; font-size: 15.5px; }

/* --- Hero --- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-dark-bg) 0%, #0e1330 55%, var(--color-bg) 100%);
  padding: 80px 24px 0;
  overflow: hidden;
  text-align: center;
}

.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.15) 40%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.hero-title {
  color: white;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 20px;
}

.hero-subtitle {
  color: rgba(226, 232, 240, 0.85);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 32px;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* --- Mockup produit dans le hero --- */
.hero-mock {
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(2px);
}

.mock-window {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: left;
  overflow: hidden;
}

.mock-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-dark-border);
}

.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4270;
}

.mock-title {
  margin-left: 10px;
  font-size: 12.5px;
  color: #7c86b8;
}

.mock-body {
  padding: 28px 28px 34px;
  background: radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
}

.mock-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #fca5a5;
  margin-bottom: 18px;
}

.mock-suggestion-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #a5b4fc;
  margin-bottom: 8px;
}

/* La maquette du hero ecrit puis efface son texte en boucle (voir typewriterLoop dans
   landing.js). Sans hauteur reservee, le bloc grandissait et retrecissait a chaque cycle :
   la ligne de detail passait de 0 a trois lignes, le texte d'une ligne a deux, et TOUT le
   reste de la page remontait puis redescendait de plusieurs dizaines de pixels tant qu'on
   lisait plus bas. C'est la cause du "la page remonte de temps en temps".

   On reserve donc la place du pire cas, en em pour suivre la taille de police. La reservation
   est plus grande sur petit ecran, ou les memes phrases prennent deux a trois lignes. */
.mock-suggestion-text {
  font-size: 22px;
  font-weight: 700;
  color: white;
  min-height: 1.4em;
}

.mock-suggestion-detail {
  margin-top: 10px;
  font-size: 14px;
  color: #b8c0e0;
  font-style: italic;
  line-height: 1.5;
  min-height: 1.6em;
}

@media (max-width: 900px) {
  .mock-suggestion-text {
    min-height: 2.5em;
  }

  .mock-suggestion-detail {
    min-height: 4.6em;
  }
}

/* --- Bandeau de confiance (sous le hero) --- */
.hero-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 40px;
}

.hero-trust span {
  font-size: 12.5px;
  color: rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* --- Bande logos/mention --- */
.section-logos {
  text-align: center;
  padding: 28px 24px;
  background: var(--color-bg);
}

.section-logos p {
  color: var(--color-text-muted);
  font-size: 13.5px;
  margin: 0;
}

/* --- Sections generiques --- */
.section {
  padding: 88px 24px;
}

.section-alt {
  background: var(--color-primary-light);
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.section-kicker {
  display: inline-block;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.section-subtitle {
  color: var(--color-text-secondary);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto 52px;
  line-height: 1.6;
}

/* --- Features --- */
/* Section Fonctionnalites : cartes sobres, sans degrade ni lueur, et une icone au trait dans une
   petite pastille teintee. Une couleur par carte - assez discrete pour que la section reste
   neutre, assez distincte pour que l'oeil separe les six cartes d'un coup. Les emojis faisaient
   "modele gratuit" et ne se lisaient pas pareil d'un systeme a l'autre ; un trait SVG, si. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 24px;
  text-align: left;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  padding: 24px 24px 26px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.feature-icon {
  --teinte: 52, 211, 153;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--teinte), 0.12);
  border: 1px solid rgba(var(--teinte), 0.18);
  color: rgb(var(--teinte));
  margin-bottom: 22px;
}

.feature-icon svg {
  width: 18px;
  height: 18px;
}

.feature-icon-blue { --teinte: 96, 165, 250; }
.feature-icon-purple { --teinte: 192, 132, 252; }
.feature-icon-orange { --teinte: 251, 146, 60; }
.feature-icon-pink { --teinte: 244, 114, 182; }
.feature-icon-indigo { --teinte: 129, 140, 248; }

.feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

.feature-card p {
  font-size: 13.5px;
  color: rgba(203, 213, 225, 0.62);
  line-height: 1.65;
  margin: 0;
}

/* --- Etapes --- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  text-align: left;
}

.step {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Pas de transform au survol - meme raison que .card-hover (voir design.css) : le curseur reste
   immobile pendant un scroll a la molette, un transform ferait "sauter" la carte sous le curseur. */
.step:hover {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), var(--shadow-sm);
}

/* Icone au trait, discrete, dans le coin de la carte - meme famille que les icones de la section
   Fonctionnalites, sans pastille coloree pour ne pas concurrencer le numero de l'etape. */
.step-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  color: rgba(203, 213, 225, 0.5);
}

.step-icon svg {
  width: 19px;
  height: 19px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
  color: white;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 18px;
}

/* ----------------------------------------------------------------------------
   Fil neon entre les etapes.

   L'ancien trait de 24px entre deux cartes ne se voyait presque pas, et ne suggerait aucun
   mouvement. Les numeros sortent maintenant AU-DESSUS des cartes, alignes sur un fil lumineux
   qui va du centre de la premiere colonne au centre de la troisieme. Une lueur le parcourt en
   continu, et chaque numero s'allume a l'instant ou elle le traverse : on lit le parcours
   1 -> 2 -> 3 sans avoir a lire les cartes.

   Synchronisation : la lueur fait 30% du fil et avance de -30% a +100% en 3,2s. Son centre
   passe donc sur le numero 1 a 11,5% du cycle, sur le 2 a 50%, sur le 3 a 88,5% - d'ou les
   delais 0,37s / 1,6s / 2,83s des numeros ci-dessous.

   En dessous de 760px les cartes passent en colonne : le fil disparait et les numeros
   reprennent leur place dans la carte.
   ---------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    padding-top: 70px;
  }

  .steps-track {
    position: absolute;
    top: 18px;
    left: calc((100% - 48px) / 6);
    right: calc((100% - 48px) / 6);
    height: 2px;
    border-radius: 2px;
    background: rgba(99, 102, 241, 0.28);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
    overflow: hidden;
  }

  .steps-beam {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent 0%, #a78bfa 30%, #34d399 55%, #d1fae5 70%, transparent 100%);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.9), 0 0 22px rgba(52, 211, 153, 0.55);
    transform: translateX(-100%);
    animation: steps-beam 3.2s linear infinite;
  }

  .step-number {
    position: absolute;
    top: -70px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    animation: step-allume 3.2s ease-out infinite;
  }

  /* nth-child et non nth-of-type : le fil est lui aussi une div, premier enfant du conteneur. */
  .step:nth-child(2) .step-number { animation-delay: 0.37s; }
  .step:nth-child(3) .step-number { animation-delay: 1.6s; }
  .step:nth-child(4) .step-number { animation-delay: 2.83s; }
}

/* De -100% a +333% de sa propre largeur = de -30% a +100% du fil. */
@keyframes steps-beam {
  from { transform: translateX(-100%); }
  to { transform: translateX(333.34%); }
}

@keyframes step-allume {
  0% {
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.35), 0 0 18px 4px rgba(52, 211, 153, 0.75);
  }
  30%, 100% {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
  }
}

@media (max-width: 760px) {
  .steps-track {
    display: none;
  }
}

/* Moins d'animations : le fil reste allume, sans lueur qui court ni numeros qui clignotent. */
@media (prefers-reduced-motion: reduce) {
  .steps-beam {
    display: none;
  }

  .step-number {
    animation: none;
  }
}

.step h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 8px;
}

.step p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* --- Apercu dashboard (le VRAI dashboard.html, en donnees d'exemple) ---
   La section ne definit ici que le "chrome" de fenetre (barre de titre + etiquette "Exemple") : le
   contenu a l'interieur (.stats-row, .dashboard-grid, .card, .call-item, .badge-*...) reutilise
   telles quelles les classes de dashboard.css/design.css - pas une reinterpretation "façon
   dashboard", le meme CSS que la vraie page connectee, pour que ce soit reellement identique et
   ne divergent jamais silencieusement l'un de l'autre. Voir landing.js pour les donnees d'exemple
   et le rendu (reutilise aussi callDetail.js, comme la vraie page). */
.preview-frame {
  max-width: 980px;
  margin: 0 auto;
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
}

.preview-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-dark-border);
}

.preview-demo-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.preview-body {
  padding: 24px 26px 30px;
}

/* Les .card a l'interieur de l'apercu sont deja transparentes (voir design.css) - sur le fond
   "encore plus sombre" du preview-frame, ca les rendrait trop peu lisibles/plates comparees a la
   vraie page (qui est posee sur le fond degrade du body, pas sur un panneau uni) : on leur redonne
   juste un fond legerement plus clair ICI, sans toucher a .card ailleurs sur le site. */
.preview-body .card {
  background: rgba(255, 255, 255, 0.05);
}

.preview-call-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

/* --- FAQ --- */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 20px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* --- Pricing --- */
/* Meme raison que .plans-grid dans billing.css : quatre offres qui tombaient en 3 + 1, avec
   la derniere etiree sur toute la largeur. Paliers francs plutot qu'auto-fit. */
/* La section Tarifs n'a plus de sous-titre : sans cette marge, le titre collerait aux cartes. */
#pricing .section-title {
  margin-bottom: 44px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  transform: scale(1.03);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--gradient-brand);
  color: white;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.pricing-card h3 {
  font-size: 15px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin: 0 0 10px;
}

.pricing-amount {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.pricing-amount span {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
  flex-grow: 1;
}

.pricing-features li::before {
  content: '✓ ';
  color: var(--color-accent);
  font-weight: 700;
}

/* --- CTA finale --- */
.section-cta {
  background: linear-gradient(135deg, var(--color-dark-bg) 0%, #1b1440 100%);
  padding: 90px 24px;
  text-align: center;
}

.section-cta h2 {
  color: white;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 14px;
}

.section-cta p {
  color: rgba(226, 232, 240, 0.8);
  font-size: 15.5px;
  margin: 0 0 30px;
}

/* Selecteur plus fort que `.section-cta p` ci-dessus, qui remettait sa marge haute a zero et
   collait cette ligne sous le bouton. */
.section-cta .cta-reassure {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: rgba(226, 232, 240, 0.62);
}

/* --- Footer --- */
.landing-footer {
  background: var(--color-dark-bg);
  padding: 40px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.landing-footer .topnav-brand {
  color: white;
  justify-content: center;
  margin-bottom: 10px;
}

.landing-footer p {
  color: rgba(148, 163, 184, 0.7);
  font-size: 13px;
  margin: 0;
}

/* --- Reveal au scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .hero-title { font-size: 32px; }
  .landing-nav-links { display: none; }
  .pricing-card-featured { transform: none; }
}

/* ===========================================================================
   Leviers CRO appliques depuis le tableau de reference (2026-09-11).
   =========================================================================== */

/* Levier 02/06 : un seul BOUTON dans la barre. "Se connecter" redevient un lien
   texte - deux boutons cote a cote se disputent l'attention, et un visiteur qui
   hesite entre deux actions n'en fait aucune. */
.landing-nav-login {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  transition: color 0.15s ease;
}
.landing-nav-login:hover {
  color: #fff;
}

/* Levier 17 : les trois memes micro-benefices sous CHAQUE CTA. Volontairement
   discret - il repond a une hesitation, il ne doit pas concurrencer le bouton. */
/* Levier 17 : les trois micro-benefices sous le bouton, la ou le visiteur hesite.
   La marge BASSE est indispensable : `.hero-trust` juste en dessous n'a aucune marge
   haute, donc sans elle cette ligne collait aux badges au pixel pres et donnait
   l'impression de les chevaucher. */
.cta-reassure {
  margin: 16px 0 22px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

/* Levier 09 : bandeau de preuves juste sous le hero, la ou le visiteur decide -
   pas relegue en pied de page, ou plus personne ne le lit. */
.trust-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.trust-band span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Levier 11 : duree explicite sur chaque etape. "Qu'est-ce qui se passe quand je
   clique" est la peur qui bloque - un delai chiffre la desamorce. */
.step-time {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 600;
}

/* Levier 19 : barre fixe mobile. Le CTA doit rester a UN tap pendant tout le
   defilement. Masquee sur ordinateur : la barre de navigation collante y joue
   deja ce role, et une seconde barre mangerait l'ecran pour rien. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  min-height: 60px;
  background: rgba(5, 7, 13, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  /* Respecte la zone tactile des iPhone recents, sinon le bouton passe sous la
     barre de navigation du systeme. */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.sticky-cta-visible {
  transform: translateY(0);
}
.sticky-cta-secondary {
  display: inline-flex;
  align-items: center;
  /* 44px est le minimum des Human Interface Guidelines d'Apple, et le levier 19 en
     fait un test essentiel : en dessous, le doigt rate la cible une fois sur trois.
     Mesure avant correction : 41px. */
  min-height: 44px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 0 10px;
  white-space: nowrap;
}
.sticky-cta-main {
  flex: 1;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 721px) {
  .sticky-cta { display: none; }
}

/* Levier 19, test essentiel : "pas de scroll horizontal" a 375px.
   La barre de navigation debordait de 89px sur telephone - le groupe brand +
   selecteur de langue + "Se connecter" + bouton ne tient pas dans 375px, et le
   CTA principal se retrouvait coupe hors ecran. Defaut anterieur a ces leviers,
   revele en appliquant leur checklist.
   Correction : sur telephone, la barre ne garde que la marque, la langue et UN
   bouton compact. "Se connecter" n'est pas perdu - il est dans la barre fixe du
   bas, ou il est plus accessible qu'en haut de page. */
@media (max-width: 720px) {
  .landing-nav-login { display: none; }
  .landing-nav-cta { gap: 8px; }
  .landing-nav-cta .btn { padding: 8px 12px; font-size: 13px; }
  .landing-nav-inner { gap: 8px; }
}

/* Mention TVA sous la grille tarifaire. Discrete mais obligatoire : un prix hors taxes
   affiche sans le dire est une pratique commerciale trompeuse. */
.pricing-vat-note {
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* --- Barre d'accueil (visiteur connecte uniquement, voir landing.js) ---
   Volontairement en haut et non dans le hero : le hero reste la page de conviction pour les
   visiteurs. Ici on repond a la seule question d'un client deja inscrit - "par ou je commence ?". */
.welcome-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1120px;
  margin: 22px auto 0;
  padding: 16px 22px;
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: var(--radius-lg);
}

.welcome-bar-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.welcome-bar-text strong {
  font-size: 1.05rem;
  color: var(--color-text);
}

.welcome-bar-usage {
  font-size: 0.86rem;
  color: var(--color-text-secondary);
}

.welcome-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .welcome-bar {
    margin: 14px 16px 0;
    padding: 14px 16px;
  }
  .welcome-bar-actions { width: 100%; }
  .welcome-bar-actions .btn { flex: 1; text-align: center; }
}

/* ============================================================================
   Scene en titre de la section Comment ca marche.

   Trois phrases qui rejouent le moment vecu - le bon numero, il decroche, le silence - a la
   place d'un titre generique ("Trois etapes avant votre premier appel") : les etapes juste en
   dessous deviennent la reponse a ce silence.

   Le texte est VISIBLE par defaut ; c'est la classe .scene-jouee, posee par landing.js quand
   la section entre a l'ecran, qui ajoute l'animation. Jamais l'inverse : une accroche ne doit
   pas dependre d'une animation pour exister.
   ============================================================================ */
.scene {
  max-width: 34ch;
  margin: 4px auto 46px;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
}

/* Une ligne par temps. En inline, les phrases se coupaient n'importe ou : le "Et" du dernier
   temps finissait la ligne grise du dessus, et le vert se retrouvait a cheval sur deux lignes.
   La largeur du bloc est calee sur la plus longue des trois phrases, toutes langues confondues,
   pour qu'aucune n'ait a se couper. */
.scene-temps {
  display: block;
}

/* Le silence : la seule phrase en couleur, suivie des points de suspension sur la meme
   ligne. La phrase traduite n'a PAS de point final - ce sont ces trois points qui la
   terminent, sinon on lisait "dire...." avec quatre points. */
.scene-temps-final {
  color: var(--color-accent);
}

.scene-jouee .scene-temps {
  animation: scene-apparition 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.scene-jouee .scene-temps-1 { animation-delay: 0.05s; }
.scene-jouee .scene-temps-2 { animation-delay: 0.75s; }
.scene-jouee .scene-temps-3 { animation-delay: 1.45s; }

/* Les points qui s'ecrivent puis repartent de un : le silence qui dure, celui que la personne
   essaie de combler. Trois points toujours presents mais transparents, reveles l'un apres
   l'autre - jamais ajoutes au texte, sinon la ligne changerait de largeur a chaque cycle. */
.scene-points {
  display: inline-block;
  margin-left: 2px;
  color: var(--color-accent);
}

.scene-points i {
  font-style: normal;
}

.scene-jouee .scene-points i {
  animation-duration: 1.5s;
  animation-timing-function: steps(1, end);
  animation-delay: 1.95s;
  animation-iteration-count: infinite;
  /* Pendant le fondu de la phrase, un seul point : le cycle part de la, sans flash de trois. */
  animation-fill-mode: backwards;
}

.scene-jouee .scene-points i:nth-child(1) { animation-name: scene-point-1; }
.scene-jouee .scene-points i:nth-child(2) { animation-name: scene-point-2; }
.scene-jouee .scene-points i:nth-child(3) { animation-name: scene-point-3; }

@keyframes scene-apparition {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes scene-point-1 {
  0%, 100% { opacity: 1; }
}

@keyframes scene-point-2 {
  0%, 32.9% { opacity: 0; }
  33%, 100% { opacity: 1; }
}

@keyframes scene-point-3 {
  0%, 65.9% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

/* Moins d'animations demandees : les phrases sont la, sans sequence ni curseur. */
@media (prefers-reduced-motion: reduce) {
  .scene-jouee .scene-temps {
    animation: none;
  }

  .scene-jouee .scene-points i {
    animation: none;
  }
}

@media (max-width: 560px) {
  .scene {
    max-width: none;
    margin-bottom: 34px;
  }
}

/* --- Pack de minutes annonce sous les forfaits (voir index.html) ------------
   Volontairement traite comme une note, pas comme un cinquieme forfait : c'est un depannage,
   pas une offre concurrente des abonnements. */
.pricing-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding: 20px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
}

.pricing-addon strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.pricing-addon p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.pricing-addon-action {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.pricing-addon-price {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-accent);
}

@media (max-width: 700px) {
  .pricing-addon {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}