/* ======================================================================
   PAGE D'ACCUEIL VISITEUR — le bandeau, les chiffres, les sept plus
   Gabarit : src/vue-presentation.php (vitrine : vue-vitrine-plus.php)

   Refaite le 17 octobre 2026 : le titre à gauche, la vitrine des plus à
   droite, le FilaReader dessous, puis les chiffres et les plus en détail.
   Les règles de base (.hero, .section-titre, .offres…) restent dans
   style.css ; ce fichier ne fait que les pousser, sous `.presentation`.
   Préfixe des classes nouvelles : `acc-`.
   ====================================================================== */

:root {
  --acc-lueur-1: #2563eb;
  --acc-lueur-2: #7c3aed;
  --acc-lueur-3: #0891b2;
  --acc-halo: rgba(37, 99, 235, .10);
  --acc-halo-2: rgba(124, 58, 237, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --acc-lueur-1: #6d9eff;
    --acc-lueur-2: #b49cff;
    --acc-lueur-3: #2dd4bf;
    --acc-halo: rgba(109, 158, 255, .13);
    --acc-halo-2: rgba(180, 156, 255, .12);
  }
}
:root[data-theme="sombre"] {
  --acc-lueur-1: #6d9eff;
  --acc-lueur-2: #b49cff;
  --acc-lueur-3: #2dd4bf;
  --acc-halo: rgba(109, 158, 255, .13);
  --acc-halo-2: rgba(180, 156, 255, .12);
}

/* ------------------------------------------------------------- bandeau */
.presentation .hero {
  position: relative; isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(0, 660px);
  gap: clamp(28px, 4vw, 60px); padding: 34px 0 28px;
}
/* Deux halos derrière le bandeau : la page ne commence pas sur un aplat. */
.presentation .hero::before {
  content: ''; position: absolute; z-index: -1; inset: -40px 0 0 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 30%, var(--acc-halo), transparent 70%),
    radial-gradient(35% 55% at 80% 40%, var(--acc-halo-2), transparent 70%);
}
.presentation .hero-scene { display: none; }

.acc-sur {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--texte);
  background: var(--carte); box-shadow: inset 0 0 0 1px var(--bord), var(--ombre);
}
.acc-sur-point {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--acc-lueur-1), var(--acc-lueur-2));
  box-shadow: 0 0 0 0 var(--acc-lueur-2);
  animation: acc-bat 2.4s ease-out infinite;
}
@keyframes acc-bat {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc-lueur-2) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.presentation .hero h1 {
  margin: 18px 0 0; max-width: 12em;
  font-size: clamp(32px, 2.6vw + 14px, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800;
}
/* « enfin sous contrôle. » : le bout de phrase qui promet, en dégradé qui
   glisse lentement. */
.presentation .hero h1 b {
  font-weight: 850;
  background: linear-gradient(100deg, var(--acc-lueur-1) 0%, var(--acc-lueur-2) 40%, var(--acc-lueur-3) 70%, var(--acc-lueur-1) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: acc-lueur 9s linear infinite;
}
@keyframes acc-lueur { to { background-position: 220% center; } }
.presentation .hero-chapo { font-size: clamp(15px, .3vw + 14px, 17px); max-width: 36em; margin-top: 20px; }
.presentation .hero-note {
  display: inline-flex; align-items: flex-start; gap: 8px;
  margin-top: 20px; font-size: 13.5px; line-height: 1.5;
}
.presentation .hero-note::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.presentation .hero-actions { margin-top: 24px; gap: 12px; }
.presentation .hero-actions .bouton.grand { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.presentation .hero-actions .bouton.grand:not(.secondaire) {
  box-shadow: 0 10px 26px -10px var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) inset;
}
.acc-voir { display: inline-flex; align-items: center; gap: 8px; }
.acc-voir svg { color: var(--violet); }

/* SUR UN ÉCRAN ÉTROIT, LA VITRINE MONTE SOUS LE TITRE. Empilée après le
   texte, elle tombait sous le pli du téléphone : on voyait un paragraphe et
   deux boutons, et rien de ce qui doit « jeter ». Le bloc de texte s'efface
   (display: contents) pour que ses morceaux et la vitrine se rangent dans
   un seul ordre : bandeau, titre, vitrine, chapeau, note, boutons.
   « S'inscrire » reste à portée dans la barre du haut, qui colle. */
@media (max-width: 900px) {
  .presentation .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 22px; }
  .presentation .hero-texte { display: contents; }
  .presentation .hero .acc-sur     { order: 1; justify-self: start; }
  .presentation .hero h1           { order: 2; max-width: none; }
  .presentation .hero > .vplus     { order: 3; margin-top: 22px; }
  .presentation .hero .hero-chapo  { order: 4; }
  .presentation .hero .hero-note   { order: 5; }
  .presentation .hero .hero-actions { order: 6; }
}
@media (max-width: 640px) {
  .presentation .hero h1 { font-size: 31px; }
  .presentation .hero-actions .bouton.grand { flex: 1 1 100%; justify-content: center; }
}

/* « Voir le FilaReader en action » mène à #filatag : sans marge, la barre
   collante du haut (65 px) en cachait le badge et le titre. Même chose pour
   #tarifs, où mène « Devenez Premium ». */
.presentation #filatag, .presentation #tarifs { scroll-margin-top: 84px; }

/* ------------------------------------------------------------ chiffres */
.acc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 24px 0 0;
}
.acc-stat {
  position: relative; overflow: hidden;
  display: grid; gap: 6px; padding: 20px 22px; border-radius: 16px;
  background: var(--carte); box-shadow: inset 0 0 0 1px var(--bord), var(--ombre);
}
.acc-stat::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc-lueur-1), var(--acc-lueur-2), var(--acc-lueur-3));
}
.acc-stat b {
  font-size: clamp(30px, 2vw + 18px, 44px); font-weight: 850; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(110deg, var(--texte) 20%, var(--acc-lueur-1) 75%, var(--acc-lueur-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acc-stat > span { font-size: 14px; color: var(--gris); }

/* ---------------------------------------------------- les plus en détail */
.acc-plus {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px;
}
@media (min-width: 700px) {
  .acc-plus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-carte-large, .acc-carte:last-child { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .acc-plus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc-carte:last-child { grid-column: auto; }
  .acc-carte-large { grid-column: span 2; }
}
.acc-carte {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 24px 22px; border-radius: 18px;
  background: var(--carte); box-shadow: inset 0 0 0 1px var(--bord), var(--ombre);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Un voile de la couleur de la carte, dans le coin de l'icône. */
.acc-carte::before {
  content: ''; position: absolute; z-index: -1; left: -30%; top: -60%; width: 90%; height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent);
  pointer-events: none;
}
.acc-carte::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--c), var(--c2));
}
.acc-carte:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, var(--bord)), 0 18px 40px -22px color-mix(in srgb, var(--c) 70%, transparent);
}
.acc-carte-icone {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 10px 22px -10px var(--c);
}
.presentation h3.acc-carte-titre {
  display: block; margin: 16px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; font-weight: 750;
}
.acc-carte-texte { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.acc-carte-texte b, .acc-puces b { color: var(--texte); font-weight: 700; }
.acc-puces { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.acc-puces li {
  position: relative; padding-left: 24px;
  font-size: 14.5px; line-height: 1.55; color: var(--gris);
}
.acc-puces li::before {
  content: ''; position: absolute; left: 0; top: .3em; width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Sur la carte large du FilaReader, deux colonnes de puces. */
@media (min-width: 900px) {
  .acc-filareader .acc-puces { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
.acc-mini-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.acc-mini-stats > span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px;
  font-size: 13.5px; color: var(--gris);
  background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
}
.acc-mini-stats b { font-size: 19px; font-weight: 850; color: var(--texte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.acc-trancheurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.acc-oui, .acc-bientot {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
}
.acc-oui { font-weight: 700; color: var(--texte); background: var(--ok-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.acc-oui svg { color: var(--ok); }
.acc-bientot { color: var(--gris); box-shadow: inset 0 0 0 1px var(--bord); border: 1px dashed transparent; }
.acc-bientot em { font-style: normal; font-weight: 700; color: var(--c); }
.acc-carte-lien {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--violet);
}
.acc-carte-lien:hover { text-decoration: underline; }
.acc-carte-lien svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------- apparition au défilement
   Le script (vitrine-plus.js) pose `revele-pret` sur <html> avant de
   cacher quoi que ce soit : sans lui, tout reste visible. */
.revele-pret [data-revele]:not(.est-vu) { opacity: 0; }
/* « backwards » et non « both » : une fois arrivée, la carte rend la main à
   ses propres règles — sinon l'animation figerait sa position et le survol
   ne la soulèverait plus. */
.revele-pret [data-revele].est-vu {
  animation: acc-revele .7s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(var(--k, 0) * 70ms);
}
@keyframes acc-revele { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  .acc-sur-point, .presentation .hero h1 b { animation: none; }
  .acc-carte { transition: none; }
  .acc-carte:hover { transform: none; }
}