/* =====================================================
   PrivateSource — Landing email-first (index.php)
   Styles spécifiques : hero épuré, formulaire proéminent,
   sections sobres centrées sur la capture d'email.
   Charge en cascade après tokens.css + base.css.
   ===================================================== */

/* .hp (honeypot) et .visually-hidden : déplacés vers base.css
   (utilitaires partagés landing + blog — fix revue 2026-07-07). */

/* ----- HERO email-first ----- */
.hero-landing {
  position: relative;
  padding: 100px 0 80px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--ps-success-rgb), 0.05), transparent 70%),
    var(--ps-bg-card);
  border-bottom: 1px solid var(--ps-border);
  overflow: hidden;
}
/* Le hero exploite 75vw pour laisser respirer le H1 (plafonné à 1600px : au-delà,
   la mesure de ligne devient trop longue à lire). Plancher à 760px pour ne pas
   rétrécir sur les petits desktops ; max-width 100% garde la fluidité sur mobile,
   où le padding de 32px assure la gouttière (box-sizing: border-box global).
   Le sous-titre et le formulaire conservent leur propre largeur de lecture. */
.hero-landing-inner {
  text-align: center;
  width: clamp(760px, 75vw, 1600px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.hero-landing-topline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.hero-landing-topline .eyebrow-mono {
  margin-bottom: 0;
}
.hero-landing-brand {
  display: inline-flex;
  align-items: center;
}
.hero-landing-brand .brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
}
.hero-landing-brand .brand-mark img { width: 100%; height: 100%; }
.hero-landing-brand .brand-text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ps-text);
}
.hero-landing-brand .brand-suffix {
  color: var(--ps-text-secondary);
  font-weight: 400;
}
.hero-landing-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 24px 0 28px;
  color: var(--ps-text);
}
.hero-landing-h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ps-primary);
}
.hero-landing-sub {
  font-size: var(--fs-lede);
  color: var(--ps-text-body);
  line-height: 1.55;
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero-landing-sub strong {
  color: var(--ps-text);
  font-weight: 600;
}

/* ----- Form (hero + final) ----- */
.form-c {
  margin: 0 auto;
  max-width: 560px;
  text-align: left;
}
.form-c .form-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.form-c input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 16px 18px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-bg-card);
  color: var(--ps-text);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-c input[type="email"]::placeholder {
  color: var(--ps-text-secondary);
}
.form-c input[type="email"]:focus {
  outline: none;
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px rgba(var(--ps-primary-rgb), 0.15);
}
.form-c input[type="email"][aria-invalid="true"] {
  border-color: var(--ps-error);
  box-shadow: 0 0 0 3px rgba(var(--ps-error-rgb), 0.12);
}
.form-c .btn-primary {
  white-space: nowrap;
}
.form-error {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--ps-radius-sm);
  background: rgba(var(--ps-error-rgb), 0.08);
  border: 1px solid rgba(var(--ps-error-rgb), 0.25);
  font-size: var(--fs-small);
  color: var(--ps-error);
  font-weight: 500;
}
.form-reassure {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--ps-text-secondary);
  text-align: center;
  margin-bottom: 12px;
}
.form-rgpd-notice {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ps-text-muted);
  text-align: center;
}
.form-rgpd-notice a {
  color: var(--ps-text-muted);
  text-decoration: underline;
}
.form-rgpd-notice a:hover { color: var(--ps-text); }

/* ----- Sections génériques ----- */
.section-c {
  padding: 90px 0;
  background: var(--ps-bg-card);
}
.section-c--soft {
  background: var(--ps-bg-app);
}
.section-c-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--ps-text);
}
.section-c-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ps-primary);
}
.section-lede {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--ps-text-body);
  margin-bottom: 24px;
}
.section-lede strong { color: var(--ps-text); font-weight: 600; }

/* ----- Problème : illustration (breakout 90vw hors du container-narrow) ----- */
.problem-figure {
  width: 90vw;
  max-width: 90vw;
  margin-top: 40px;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--ps-radius-md);
  overflow: hidden;
  box-shadow: var(--ps-shadow-lift);
}
.problem-figure img {
  width: 100%;
  height: auto;
  display: block;
}
/* vw inclut la largeur de la scrollbar verticale : garde-fou anti-scroll-horizontal */
#probleme {
  overflow-x: hidden;
}

/* ----- Audience : Pour toi / Pas pour toi ----- */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.audience-col {
  padding: 28px;
  border-radius: var(--ps-radius-lg);
  background: var(--ps-bg-card);
  border: 1px solid var(--ps-border);
  box-shadow: var(--ps-shadow-ring);
}
.audience-col h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.audience-col--yes h3 { color: var(--ps-success); }
.audience-col--no  h3 { color: var(--ps-text-secondary); }
.audience-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.audience-col li {
  padding: 10px 0 10px 30px;
  position: relative;
  line-height: 1.55;
  color: var(--ps-text-body);
  border-top: 1px solid var(--ps-border-light);
}
.audience-col li:first-child { border-top: none; }
.audience-col--yes li::before {
  content: "✓";
  position: absolute;
  left: 4px; top: 10px;
  color: var(--ps-success);
  font-weight: 700;
  font-size: 16px;
}
.audience-col--no li::before {
  content: "—";
  position: absolute;
  left: 4px; top: 10px;
  color: var(--ps-text-secondary);
  font-weight: 600;
}

/* ----- Comment ça marche : 4 étapes ----- */
.steps-c {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 50px;
}
.step-c {
  padding: 28px 24px;
}
.step-c-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  color: var(--ps-primary);
  line-height: 1;
  margin-bottom: 16px;
}
.step-c-h {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin-bottom: 12px;
  color: var(--ps-text);
}
.step-c-desc {
  color: var(--ps-text-body);
  line-height: 1.6;
}

/* ----- Fondateur (1 seul bloc fusionné) ----- */
.founder-c {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}
.founder-c-photo {
  border-radius: var(--ps-radius-md);
  width: 220px;
  height: 220px;
  object-fit: cover;
  box-shadow: var(--ps-shadow-lift);
}
.founder-c-bio h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin-bottom: 8px;
  color: var(--ps-text);
}
.founder-c-bio .role {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ps-text-secondary);
  margin-bottom: 18px;
  display: inline-block;
}
.founder-c-bio p {
  color: var(--ps-text-body);
  line-height: 1.65;
  margin-bottom: 16px;
}
.founder-c-bio p:last-child { margin-bottom: 0; }

/* ----- Sondage secondaire (visuel subordonné) ----- */
.survey-secondary {
  padding: 60px 0;
  background: var(--ps-bg-app);
  text-align: center;
  border-top: 1px solid var(--ps-border);
  border-bottom: 1px solid var(--ps-border);
}
.survey-secondary .eyebrow-mono {
  margin-bottom: 16px;
}
.survey-secondary p {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--ps-text-body);
  line-height: 1.65;
  font-size: var(--fs-body);
}
.survey-secondary p strong { color: var(--ps-text); }

/* ----- FAQ ----- */
.faq-list {
  margin-top: 40px;
}
.faq-item {
  border-top: 1px solid var(--ps-border);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--ps-border); }
.faq-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--ps-text);
}
.faq-item p {
  color: var(--ps-text-body);
  line-height: 1.65;
}
.faq-item p + p {
  margin-top: 16px;
}

/* Liens inline dans le corps de texte : soulignés pour ne pas dépendre de la
   couleur seule comme indice de lien (WCAG 2.1 — 1.4.1 Utilisation de la couleur). */
.founder-c-bio p a,
.faq-item p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Signature finale ----- */
.signature-c {
  padding: 80px 0;
  text-align: center;
  background: var(--ps-bg-card);
}
.signature-c p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ps-text);
}
.signature-c p em {
  color: var(--ps-primary);
  font-weight: 500;
}

/* ----- CTA final ----- */
.final-cta {
  padding: 80px 0 100px;
  background: var(--ps-bg-app);
  border-top: 1px solid var(--ps-border);
  text-align: center;
}
.final-cta .section-c-h2 {
  margin-bottom: 16px;
}
.final-cta .form-c {
  margin-top: 36px;
}

/* ----- Responsive (mobile-first override at < 768px) ----- */
@media (max-width: 768px) {
  .hero-landing { padding: 60px 0 50px; }
  /* 7.5vw (et non 9vw) : le H1 mentionne les sources ET la non-mutualisation, donc
     il court sur plusieurs lignes. Cette taille garde le bouton d'inscription
     visible sans scroll sur un écran de 844px de haut (iPhone 14). */
  .hero-landing-h1 { font-size: clamp(30px, 7.5vw, 56px); margin: 18px 0 22px; }
  .hero-landing-sub { margin-bottom: 32px; }
  .section-c { padding: 60px 0; }
  .section-c-h2 { font-size: clamp(28px, 6vw, 40px); }
  .audience-grid { grid-template-columns: 1fr; gap: 16px; }
  .steps-c { grid-template-columns: 1fr; gap: 20px; }
  .founder-c { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .founder-c-photo { margin: 0 auto; }
  .form-c .form-row { flex-direction: column; gap: 12px; }
  .form-c .btn-primary { width: 100%; }
  .final-cta { padding: 60px 0 70px; }
}

/* === Calculateur saturation === */
.calc-c {
  margin-top: 40px;
  padding: 28px;
  background: var(--ps-bg-app);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-ring);
}
.calc-c-field {
  margin-bottom: 0;
}
.calc-c-fieldset {
  margin-top: 28px;
  border: none;
  padding: 0;
}
.calc-c-field > label,
.calc-c-fieldset legend {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ps-text);
  margin-bottom: 14px;
  padding: 0;
}
.calc-c-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}
.calc-c-slider input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-border);
}
.calc-c-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ps-primary);
  border: 3px solid var(--ps-bg-card);
  box-shadow: var(--ps-shadow-lift);
  cursor: pointer;
}
.calc-c-slider input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ps-primary);
  border: 3px solid var(--ps-bg-card);
  box-shadow: var(--ps-shadow-lift);
  cursor: pointer;
}
.calc-c-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 4px;
}
.calc-c-output {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--ps-primary);
  min-width: 3ch;
  text-align: right;
}
.calc-c-radios {
  display: grid;
  gap: 10px;
}
.calc-c-radio {
  display: flex;
  align-items: center;
  justify-content: unset;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-bg-card);
  color: var(--ps-text-body);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.calc-c-radio:hover {
  border-color: var(--ps-primary);
}
.calc-c-radio:has(input:checked) {
  border-color: var(--ps-primary);
  background: var(--ps-primary-light);
}
.calc-c-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--ps-primary);
}
.calc-c-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}
.calc-c-result {
  margin-top: 28px;
  padding: 24px 26px;
  min-height: 200px;
  background: var(--ps-bg-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
}
.calc-c-result-main {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ps-text-body);
  margin-bottom: 16px;
}
.calc-c-result-main strong {
  color: var(--ps-text);
  font-weight: 700;
}
.calc-c-result-contrast {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ps-success-text);
  background: var(--ps-success-light);
  border-left: 3px solid var(--ps-success);
  padding: 12px 16px;
  border-radius: var(--ps-radius-sm);
  margin-bottom: 16px;
}
.calc-c-result-contrast strong {
  color: var(--ps-success-dark);
  font-weight: 700;
}
.calc-c-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ps-text-secondary);
}
.calc-c-form {
  margin-top: 36px;
}

/* === Product preview (breakout 90vw hors du container-narrow, cf. .problem-figure) === */
.product-preview {
  width: 90vw;
  max-width: 90vw;
  margin-top: 56px;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--ps-radius-lg);
  overflow: hidden;
  box-shadow: var(--ps-shadow-lift);
}
.product-preview-img {
  width: 100%;
  height: auto;
  display: block;
}
/* vw inclut la largeur de la scrollbar verticale : garde-fou anti-scroll-horizontal */
#comment-ca-marche {
  overflow-x: hidden;
}

/* Responsive : calculateur + product preview (mobile) */
@media (max-width: 768px) {
  .calc-c { padding: 20px; }
  .calc-c-result { padding: 20px; min-height: 260px; }
  .product-preview { margin-top: 40px; }
}