/* =========================================================================
   Qolis — vitrine publique
   S'ajoute à app.css, dont elle reprend les tokens, les boutons et les
   champs : le site de présentation et le produit doivent se ressembler.
   ========================================================================= */

.page-vitrine {
  --largeur: 1120px;
  --encre-inv: #f4f4ff;
  background: var(--surface);
  color: var(--text);
}

.enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1.4rem; }

/* ------------------------------------------------------------------ marque */

.marque { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; }
.marque__nom { font-weight: 720; font-size: 1.12rem; letter-spacing: -.03em; }
.marque .sigle { color: var(--accent); flex: none; }
.marque--clair .sigle { color: #a5b4fc; }

/* ----------------------------------------------------------- barre de nav */

.nav-vitrine {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-vitrine__int { display: flex; align-items: center; gap: 1.6rem; height: 66px; }
.nav-vitrine__liens { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-vitrine__liens a {
  color: var(--text-2); text-decoration: none; font-size: .9rem; font-weight: 560;
  transition: color .13s;
}
.nav-vitrine__liens a:hover { color: var(--text); }
.nav-vitrine__actions { display: flex; align-items: center; gap: .7rem; }
/* Sous 860 px, la nav bascule en mode mobile : les liens disparaissent, et
   avec eux l'appel à l'action commercial — il ne reste que la marque à
   gauche et l'accès au compte à droite, pour une barre qui tient sans se
   comprimer. La démo reste jouable plus bas dans la page (hero, tarifs). */
@media (max-width: 860px) {
  .nav-vitrine__liens { display: none; }
  .nav-vitrine__actions .btn { display: none; }
  /* .nav-vitrine__liens portait la marge qui pousse le bloc de droite vers
     le bord ; masqué, il l'emporte avec lui et .nav-vitrine__actions se
     retrouve collé au logo. On la reporte donc ici, sans risque de conflit
     avec celle de .nav-vitrine__liens puisqu'elle a disparu de la mise en
     page à ce même seuil. */
  .nav-vitrine__actions { margin-left: auto; }
}

/* Le coin connexion : discret, toujours au même endroit, jamais mis en
   concurrence avec l'appel à l'action commercial. */
.lien-connexion {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--text-2); text-decoration: none;
  font-size: .89rem; font-weight: 600;
  padding: .45rem .2rem;
}
.lien-connexion:hover { color: var(--accent-fort); }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  padding: 5rem 0 4.5rem;
  background:
    radial-gradient(920px 460px at 12% -10%, #e9ebfe 0%, transparent 60%),
    radial-gradient(760px 420px at 96% 4%, #e6f7f3 0%, transparent 55%),
    var(--surface);
}
.hero__grille { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .hero__grille { grid-template-columns: 1.05fr .95fr; } }

.pastille-annonce {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .8rem .32rem .55rem;
  border-radius: 999px;
  background: var(--accent-doux); color: var(--accent-fort);
  border: 1px solid #dcdffb;
  font-size: .8rem; font-weight: 640;
  margin-bottom: 1.3rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 760;
  margin: 0 0 1.1rem;
}
.hero h1 .surligne {
  background: linear-gradient(100deg, var(--accent) 0%, #7c6df2 55%, #0ea5a0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.hero__accroche { font-size: 1.09rem; line-height: 1.65; color: var(--text-2); max-width: 34rem; margin: 0 0 1.9rem; }
.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.hero__preuve { margin-top: 1.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.hero__preuve div { font-size: .85rem; color: var(--text-2); }
.hero__preuve strong { display: block; font-size: 1.35rem; font-weight: 720; color: var(--text); letter-spacing: -.02em; }

/* aperçu produit : une mise en scène, pas une capture — elle reste juste
   parce qu'elle reprend les chiffres et le vocabulaire réels de l'app */
.apercu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-lg);
  overflow: hidden;
}
.apercu__barre {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.apercu__point { width: 9px; height: 9px; border-radius: 50%; background: var(--border-fort); }
.apercu__titre { margin-left: .5rem; font-size: .76rem; color: var(--text-3); font-weight: 600; }
.apercu__corps { padding: 1.1rem; display: grid; gap: .75rem; }
.apercu__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; }
.apercu__kpi { background: var(--bg); border-radius: var(--r-sm); padding: .55rem .65rem; }
.apercu__kpi span { display: block; font-size: .67rem; color: var(--text-3); font-weight: 640; }
.apercu__kpi strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.apercu__ligne {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .78rem;
}
.apercu__ligne--ok { border-left: 3px solid var(--ok); }
.apercu__ligne--attente { border-left: 3px solid var(--accent); }
.apercu__ref { font-weight: 680; }
.apercu__desc { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu__montant { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sections */

.section { padding: 4.6rem 0; }
.section--gris { background: var(--bg); border-block: 1px solid var(--border); }
.section--sombre { background: #14162b; color: var(--encre-inv); }
.section--sombre h2, .section--sombre h3 { color: #fff; }
.section--sombre p { color: #b9bbd6; }

.section__chapeau { max-width: 40rem; margin: 0 auto 2.8rem; text-align: center; }
.section__chapeau--gauche { margin-inline: 0; text-align: left; }
.surtitre {
  display: block; font-size: .78rem; font-weight: 720; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .65rem;
}
.section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.18; letter-spacing: -.028em; font-weight: 720; margin: 0 0 .8rem; }
.section__chapeau p { font-size: 1.02rem; line-height: 1.65; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------- problème */

.constats { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .constats { grid-template-columns: repeat(3, 1fr); } }
.constat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--ombre-sm);
}
.constat__chiffre { font-size: 2.1rem; font-weight: 760; letter-spacing: -.035em; color: var(--accent); line-height: 1; }
.constat h3 { font-size: 1rem; font-weight: 680; margin: .8rem 0 .35rem; }
.constat p { font-size: .89rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ------------------------------------------------------------------ étapes */

.etapes { display: grid; gap: 1.6rem; grid-template-columns: 1fr; counter-reset: etape; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etape { position: relative; padding-top: 2.9rem; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: .85rem; font-weight: 720;
}
.etape h3 { font-size: 1.02rem; font-weight: 680; margin: 0 0 .4rem; }
.etape p { font-size: .89rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ------------------------------------------------------------ fonctions */

.fonctions { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .fonctions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fonctions { grid-template-columns: repeat(3, 1fr); } }
.fonction {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.4rem; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.fonction:hover { border-color: #c9cdf5; box-shadow: var(--ombre); transform: translateY(-2px); }
.fonction__ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-doux); color: var(--accent-fort);
  margin-bottom: .9rem;
}
.fonction h3 { font-size: .98rem; font-weight: 680; margin: 0 0 .35rem; }
.fonction p { font-size: .88rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ------------------------------------------------------------------ offres */

.bascule-periode { display: flex; justify-content: center; gap: .3rem; margin-bottom: 2.2rem; }
.bascule-periode a {
  padding: .45rem 1rem; border-radius: 999px;
  font-size: .86rem; font-weight: 640; text-decoration: none;
  color: var(--text-2); border: 1px solid transparent;
}
.bascule-periode a.actif { background: var(--surface); color: var(--text); border-color: var(--border-fort); box-shadow: var(--ombre-sm); }
.bascule-periode .gain { color: var(--ok); font-weight: 700; }

.offres { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, 1fr); } }

.offre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.5rem;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-sm);
}
.offre--phare {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux), var(--ombre);
}
.offre__ruban {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  padding: .2rem .7rem; border-radius: 999px;
  font-size: .71rem; font-weight: 720; letter-spacing: .02em; white-space: nowrap;
}
.offre__nom { font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em; }
.offre__pour { font-size: .83rem; color: var(--text-2); margin: .3rem 0 1.2rem; line-height: 1.5; min-height: 2.5rem; }
.offre__prix { display: flex; align-items: baseline; gap: .3rem; }
.offre__prix strong { font-size: 2.35rem; font-weight: 760; letter-spacing: -.04em; line-height: 1; }
.offre__prix span { font-size: .85rem; color: var(--text-2); font-weight: 560; }
.offre__base { font-size: .78rem; color: var(--text-3); margin: .45rem 0 1.3rem; min-height: 1.1rem; }
.offre .btn { width: 100%; justify-content: center; }
.offre__liste { list-style: none; margin: 1.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--border); display: grid; gap: .62rem; }
.offre__liste li { display: flex; gap: .55rem; font-size: .87rem; line-height: 1.45; color: var(--text-2); }
.offre__liste .ic { flex: none; color: var(--ok); margin-top: .12rem; }
.offre__liste strong { color: var(--text); font-weight: 620; }
.offre__socle { font-size: .82rem; font-weight: 640; color: var(--text); margin-bottom: -.2rem; }
/* Le petit plus de la formule : détaché de la liste des fonctions, parce que
   ce n'en est pas une. Encadré plutôt que coché, pour qu'on voie du premier
   coup d'œil que c'est là, et là seulement, que les formules diffèrent. */
.offre__plus {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 1rem 0 0; padding: .6rem .7rem;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: .83rem; font-weight: 620; line-height: 1.4; color: var(--text);
}
.offre__plus .ic { flex: none; color: var(--text-2); margin-top: .1rem; }

/* --------------------------------------------------------- comparatif */

.comparatif { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--surface); }
.comparatif th, .comparatif td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
.comparatif thead th { background: var(--surface-2); font-weight: 680; font-size: .82rem; }
.comparatif td:not(:first-child), .comparatif th:not(:first-child) { text-align: center; width: 15%; }
.comparatif tbody th { font-weight: 560; color: var(--text-2); }
.comparatif .groupe td { background: var(--bg); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.comparatif .oui { color: var(--ok); }
.comparatif .non { color: var(--text-3); }

/* ---------------------------------------------------------------- citation */

.citation {
  max-width: 46rem; margin: 0 auto; text-align: center;
}
.citation blockquote {
  font-size: clamp(1.15rem, 2.3vw, 1.45rem); line-height: 1.55; font-weight: 560;
  letter-spacing: -.015em; margin: 0 0 1.3rem;
}
.citation figcaption { font-size: .87rem; color: var(--text-2); }

/* --------------------------------------------------------------------- faq */

.faq { max-width: 44rem; margin: 0 auto; display: grid; gap: .6rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0 1.1rem;
}
.faq summary {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 0; cursor: pointer;
  font-weight: 620; font-size: .95rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { margin-left: auto; color: var(--text-3); transition: transform .15s; flex: none; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq p { font-size: .9rem; line-height: 1.65; color: var(--text-2); margin: 0; padding: .9rem 0 1.1rem; }

/* --------------------------------------------------------------- final CTA */

.appel {
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6d5cf0 48%, #0f9b96 100%);
  color: #fff; border-radius: 22px;
  padding: 3.4rem 1.6rem;
}
.appel h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.03em; margin: 0 0 .8rem; color: #fff; }
.appel p { font-size: 1.02rem; color: rgba(255,255,255,.86); max-width: 32rem; margin: 0 auto 1.8rem; line-height: 1.6; }
.appel .btn--primaire { background: #fff; color: var(--accent-fort); border-color: #fff; }
.appel .btn--primaire:hover { background: #f0f0ff; }
.appel .btn--fantome { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.appel .btn--fantome:hover { background: rgba(255,255,255,.12); }
.appel__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------- pied */

.pied { background: #14162b; color: #a8abc9; padding: 3rem 0 2rem; }
.pied__haut { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.09); }
@media (min-width: 780px) { .pied__haut { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied__pitch { font-size: .88rem; line-height: 1.6; max-width: 22rem; margin: .9rem 0 0; }
.pied h4 { color: #fff; font-size: .82rem; font-weight: 680; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied a { color: #a8abc9; text-decoration: none; font-size: .89rem; }
.pied a:hover { color: #fff; }
.pied__bas { padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* ------------------------------------------------------------- utilitaires */

.btn--fantome { background: transparent; color: var(--text); border: 1px solid var(--border-fort); }
.btn--fantome:hover { background: var(--surface-2); }
.centre { text-align: center; }
.note-tarif { font-size: .84rem; color: var(--text-2); text-align: center; margin-top: 1.6rem; }

/* --------------------------------------------------------------- mobile */
/* Sous 860 px, la barre du haut ne loge plus que la marque et l'accès au
   compte (voir la règle sur .nav-vitrine__actions .btn plus haut) : plus
   que deux éléments à faire tenir, jamais trois. */
@media (max-width: 560px) {
  .enveloppe { padding: 0 1.05rem; }
  .nav-vitrine__int { gap: .5rem; }
  .marque__nom { font-size: 1rem; }
  .lien-connexion { font-size: .82rem; padding: .45rem .1rem; }

  .hero { padding: 3.2rem 0 3rem; }
  .hero__preuve { gap: 1.1rem; }
  .section { padding: 3.4rem 0; }
  .apercu__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apercu__kpi { padding: .5rem .45rem; }
  .appel { padding: 2.4rem 1.2rem; border-radius: 16px; }
  .appel .btn, .hero__actions .btn { width: 100%; justify-content: center; }
}