/* Blocs éditoriaux des pages commerciales. Le texte long est découpé en
   cartes, en étapes et en encadrés : on doit pouvoir parcourir la page des
   yeux avant de décider de la lire. */
.prose { background: #080808; padding: 104px 0 110px; }
.prose-inner { width: min(1060px, calc(100% - 48px)); margin: 0 auto; }

.prose-part + .prose-part { margin-top: 96px; }

/* En-tête de section : étiquette, titre, chapeau. */
.prose-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }

.prose h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: #fff;
}

.prose p.prose-lede,
.prose-lede { max-width: 640px; margin: 0 auto; color: #c2c2c2; font-size: 18px; line-height: 1.6; }
.prose p.prose-lede + p.prose-lede,
.prose-lede + .prose-lede { margin-top: 18px; }

.prose p { margin: 0 0 16px; color: #a9a9a9; font-size: 15.5px; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: #ededed; font-weight: 600; }

.prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #0786ff; }

/* Grille de cartes : deux ou trois par rangée selon le contenu. */
.prose-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prose-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.prose-card {
  display: flex;
  flex-direction: column;
  padding: 19px 19px 17px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: #000;
}

.prose-card h3 {
  margin: 0 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #383838;
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
}

.prose-card p { color: #ccc; font-size: 13.5px; line-height: 1.45; }
.prose-card p + p { margin-top: 12px; }
.prose-card a { color: #fff; }

.prose-card-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  display: block;
  fill: none;
  stroke: #0786ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Étapes numérotées, pour un déroulé qui se lit d'un coup d'œil. */
.prose-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: etape; }

.prose-step {
  display: flex;
  flex-direction: column;
  padding: 19px 19px 17px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: #000;
}

.prose-step::before {
  counter-increment: etape;
  content: counter(etape);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #0786ff;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.prose-step h3 {
  margin: 0 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #383838;
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
}

.prose-step p { color: #ccc; font-size: 13.5px; line-height: 1.45; }

/* Affirmation mise en avant, pour rompre la colonne de texte. */
.prose p.prose-highlight,
.prose-highlight {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.prose-highlight span { color: #8e8e8e; font-weight: 500; }

/* Deux colonnes : le texte à gauche, un encadré à droite. */
.prose-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 42px; align-items: start; }

.prose-aside {
  padding: 19px 19px 17px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: #000;
}

.prose-aside h3 {
  margin: 0 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #383838;
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
}
.prose-aside ul { margin: 0; padding: 0; list-style: none; }

.prose-aside li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
  color: #e7e7e7;
  font-size: 13.5px;
  line-height: 1.3;
}

.prose-aside li:last-child { margin-bottom: 0; }

.prose-aside li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0786ff;
}

/* Chiffres clés sur une rangée. */
.prose-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.prose-fact { padding: 19px 19px 17px; border: 1px solid #fff; border-radius: 20px; background: #000; }
.prose-fact strong { display: block; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid #383838; color: #fff; font-size: 23px; letter-spacing: -0.035em; font-weight: 800; }
.prose-fact span { color: #ccc; font-size: 13.5px; line-height: 1.45; }

.prose-apres { max-width: 620px; margin: 0 auto; text-align: center; }

.prose-cta { margin-top: 32px; text-align: center; }

.prose-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: #0786ff;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}

.prose-cta a:hover { background: #006ee0; color: #fff; }

@media (max-width: 920px) {
  .prose-cards, .prose-cards.is-three, .prose-steps, .prose-facts { grid-template-columns: 1fr 1fr; }
  .prose-split { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .prose { padding: 68px 0 76px; }
  .prose-inner { width: calc(100% - 40px); }
  .prose-part + .prose-part { margin-top: 68px; }
  .prose-cards, .prose-cards.is-three, .prose-steps, .prose-facts { grid-template-columns: 1fr; }
  .prose p.prose-lede, .prose-lede { font-size: 16.5px; }
  .prose p.prose-highlight, .prose-highlight { padding: 26px 0 26px 22px; }
}


/* Page dédiée aux questions fréquentes. */
body.yusee-faq-body { min-height: 100vh; background: #080808; }
.faq-header { position: relative; z-index: 2; margin-top: 16px; }
.faq-main { padding-top: 72px; }
.faq-intro { margin-bottom: 64px; }

.faq-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 800;
  color: #fff;
}

.faq-lede { max-width: 560px; margin: 0; color: #b4b4b4; font-size: 17px; line-height: 1.6; }

.faq-reste {
  margin: 56px 0 0;
  padding-top: 30px;
  border-top: 1px solid #1e1e1e;
  color: #a8a8a8;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .faq-main { padding-top: 48px; }
  .faq-intro { margin-bottom: 44px; }
}

/* Apparition au défilement. La classe sur <html> n'est posée que par le script :
   sans JavaScript, et pour les robots d'indexation, tout reste visible. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s cubic-bezier(.22,.72,.3,1), transform .72s cubic-bezier(.22,.72,.3,1);
  transition-delay: var(--retard, 0ms);
  will-change: opacity, transform;
}

.reveal-on .reveal.est-visible { opacity: 1; transform: none; }

/* Le titre de section monte un peu plus franchement que le reste. */
.reveal-on .prose-head.reveal { transform: translateY(30px); }
.reveal-on .prose-head.reveal.est-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
}