/* =============================================================
   SWISS TRANSCRIPT — HARMONIE TYPOGRAPHIQUE GLOBALE
   Échelle unifiée pour cohérence et lisibilité sur tout le site
   À charger APRÈS styles.css pour overrider les anciennes règles
   ============================================================= */

:root {
  --t-body: 16px;        /* texte courant */
  --t-body-sm: 14px;     /* secondaire */
  --t-caption: 13px;     /* eyebrows, captions, mentions */
  --t-h2: 30px;          /* titres de section */
  --t-h3: 19px;          /* titres de card */
  --t-h4: 17px;          /* sous-titres */
  --t-cta-h2: 26px;      /* CTA finale */
}

/* ============================================================
   PARAGRAPHES ET TEXTES COURANTS — 16px partout
   ============================================================ */
body p,
body li,
.section-title p,
.cta p,
.cta-section p,
.hero-subtitle,
.usp-card-content p,
.use-case-card p,
.testimonial-card p,
.definition-card p,
.definition-block .lead-detail p,
.comparison-intro,
.comparison-table td,
.feature-card p,
.compliance-card p,
.security-text p,
.faq-intro p,
.pricing-card p {
  font-size: var(--t-body);
  line-height: 1.6;
}

/* Hero subtitle : un peu plus grand pour rester impactant */
.hero-subtitle {
  font-size: 17px;
  line-height: 1.5;
}

/* ============================================================
   EYEBROWS / LABELS / CAPTIONS — 13px
   ============================================================ */
.client-logos .logos-eyebrow,
.pricing-foot-note,
.pricing-options li .opt-name small,
.pricing-options li .opt-price small,
.testimonial-card .not-italic.uppercase,
.footer-byline,
.footer-bottom p {
  font-size: var(--t-caption);
  line-height: 1.5;
}

/* ============================================================
   TITRES DE SECTION (H2) — 30px desktop
   ============================================================ */
.section-title h2,
.definition-block h2,
.comparison-title,
.security-features h2,
.security-intro h2,
.compliance-title h2,
.a-propos-text,
h2.a-propos-text,
.faq-container h2,
.faq-intro h2 {
  font-size: var(--t-h2) !important;
  line-height: 1.2;
}

/* CTA finale h2 : un peu plus petit pour cohérence */
.cta h2,
.cta-section h2 {
  font-size: var(--t-cta-h2) !important;
  line-height: 1.25;
}

/* Sub-text sous section-title */
.section-title p {
  font-size: var(--t-body) !important;
  color: #555;
}

/* ============================================================
   TITRES DE CARD (H3) — 19px
   ============================================================ */
.usp-card-content h3,
.use-case-card h3,
.definition-card h3,
.feature-card h3,
.compliance-card h3,
.pricing-card .card-title,
.testimonial-author h4,
.footer-col h3 {
  font-size: var(--t-h3) !important;
  line-height: 1.3;
}

/* ============================================================
   FAQ — taille compacte, alignée avec la barre de menu
   ============================================================ */
#faq .faq-section-title,
.faq-container .faq-section-title {
  font-size: 20px !important;
  line-height: 1.3;
}
#faq .faq-question,
.faq-container .faq-question {
  font-size: 15px !important;
  line-height: 1.4;
  font-weight: 600;
  padding: 16px 20px !important;
}
#faq .faq-answer,
.faq-container .faq-answer {
  font-size: 14px !important;
  line-height: 1.6;
}
#faq .faq-answer p,
#faq .faq-answer li,
.faq-container .faq-answer p,
.faq-container .faq-answer li {
  font-size: 14px !important;
  line-height: 1.6;
  color: #555;
}
#faq .faq-question::after,
.faq-container .faq-question::after {
  font-size: 18px;
}

/* ============================================================
   PRICING — options en texte lisible
   ============================================================ */
.pricing-card .card-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.pricing-options li,
.pricing-options li .opt-name,
.pricing-options li .opt-price {
  font-size: 15px;
}

/* ============================================================
   COMPARISON TABLE — entêtes + cellules
   ============================================================ */
.comparison-table thead th,
.comparison-table .header-row th {
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   NAVIGATION / BOUTONS — taille uniforme
   ============================================================ */
nav ul li a,
.drawer-btn,
.btn,
.cta-btn {
  font-size: 14px;
}

/* ============================================================
   ABOUT — bio paragraphs
   ============================================================ */
#equipe .a-propos-text p,
#equipe div p {
  font-size: var(--t-body);
  line-height: 1.65;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-container a,
.footer-container li {
  font-size: 14px;
}

/* ============================================================
   RESPONSIVE — Mobile / iOS / Android
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --t-body: 15px;
    --t-body-sm: 13px;
    --t-caption: 12px;
    --t-h2: 24px;
    --t-h3: 17px;
    --t-cta-h2: 22px;
  }

  .hero-subtitle { font-size: 15px; line-height: 1.5; }

  .pricing-options li,
  .pricing-options li .opt-name,
  .pricing-options li .opt-price { font-size: 14px; }

  .pricing-card .card-subtitle { font-size: 13px; }

  #faq .faq-question,
  .faq-container .faq-question { font-size: 14px !important; padding: 14px 16px !important; }
  #faq .faq-answer p,
  .faq-container .faq-answer p { font-size: 13.5px !important; }
  #faq .faq-section-title,
  .faq-container .faq-section-title { font-size: 18px !important; }

  .comparison-table thead th,
  .comparison-table .header-row th { font-size: 13px; }
}

@media (max-width: 480px) {
  :root {
    --t-h2: 22px;
    --t-cta-h2: 20px;
  }
  .hero-title { font-size: 28px !important; line-height: 1.25; }
  .hero-eyebrow { font-size: 14px !important; }
}


/* =============================================================
   ESPACEMENTS — RÉDUCTION DES BLANCS EXCESSIFS ENTRE SECTIONS
   Objectif : maintenir la lisibilité tout en compactant la home
   ============================================================= */
body#home section,
body#home .definition-block,
body#home .usp,
body#home .comparison,
body#home .pricing,
body#home .use-cases,
body#home .testimonials,
body#home .client-logos,
body#home .cta,
body#secu section,
body#secu .security-container,
body#secu .compliance-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

body#home .definition-block,
body#home .pricing,
body#home .comparison { padding-top: 56px; padding-bottom: 56px; }

body#home .definition-block .definition-cta { margin-top: 0; }
body#home .definition-cards-grid { margin-bottom: 1.5rem; }

/* Spacing autour des CTA links pour éviter les pavés vides */
body#home .definition-block .definition-cta a {
  display: inline-block;
  padding: 8px 0;
}

/* Sections de témoignages / use-cases / logos : un peu plus compactes */
body#home .testimonials,
body#home .use-cases { padding: 50px 0; }
body#home .client-logos { padding: 50px 0 50px; }

/* Section titles : marge réduite */
body#home .section-title { margin-bottom: 28px !important; }

/* Comparison section margin-top du tableau */
body#home .comparison .section-title { margin-bottom: 18px !important; }
body#home .comparison .comparison-intro { margin-bottom: 1.5rem !important; }
body#home .comparison .mt-8 { margin-top: 1.5rem !important; }

/* USP section internal spacing */
body#home .usp .usp-cards { margin-bottom: 2rem; }
body#home .usp .usp-cta-actions { margin-top: 1rem; }

/* Pricing footer : compact */
body#home .pricing-footer { margin-top: 1.5rem !important; }
body#home .pricing-footer p { margin-bottom: 0.75rem; }

/* Security page : sections plus compactes */
body#secu .security-features { margin-bottom: 0 !important; }
body#secu .features-grid { margin-bottom: 0 !important; }
body#secu .compliance-section { padding: 40px 0 56px !important; }
body#secu .security-intro { margin-bottom: 24px; }

/* CTA finale : compact */
body#home .cta { padding: 56px 0 !important; }
body#home .cta h2 { margin-bottom: 12px; }
body#home .cta p { margin-bottom: 20px; }

/* Responsive : sections encore plus compactes sur mobile */
@media (max-width: 768px) {
  body#home section,
  body#home .definition-block,
  body#home .usp,
  body#home .comparison,
  body#home .pricing,
  body#home .use-cases,
  body#home .testimonials,
  body#home .client-logos,
  body#home .cta,
  body#secu section,
  body#secu .security-container,
  body#secu .compliance-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  body#home .section-title { margin-bottom: 20px !important; }
}


/* =============================================================
   ESPACEMENTS GLOBAUX (toutes les pages)
   Compacité sur faq, tarifs, demo, about, contact, sécurité, légal
   ============================================================= */
section,
.page-header,
.faq-container,
.security-container,
.compliance-section,
.security-features,
.pricing,
.testimonials,
.use-cases,
.usp,
.comparison,
.cta,
.cta-section,
.definition-block,
.client-logos {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Sections plus compactes pour les pages secondaires (densité info) */
body#faq .faq-container { padding-top: 40px; padding-bottom: 40px; }
body#faq .faq-section { margin-bottom: 32px !important; }
body#tarif .pricing,
body#tarifs .pricing,
body#preise .pricing,
body#pricing .pricing { padding-top: 50px; padding-bottom: 50px; }

/* Pages about / equipe */
body#a_propos #equipe { padding-top: 50px; padding-bottom: 50px; }
body#about #equipe { padding-top: 50px; padding-bottom: 50px; }
body#a_propos .text-center.flex.flex-col.w-full.bg-\[\#eef0f3\] { padding-top: 48px !important; padding-bottom: 48px !important; }
body#about .text-center.flex.flex-col.w-full.bg-\[\#eef0f3\] { padding-top: 48px !important; padding-bottom: 48px !important; }

/* Page demo : header + vidéos */
body#demo .page-header { padding-top: 40px; padding-bottom: 12px; }

/* Section titles : marge bottom uniformément réduite */
.section-title { margin-bottom: 28px !important; }

/* CTA finale partout */
.cta, .cta-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.cta h2, .cta-section h2 { margin-bottom: 12px !important; }
.cta p, .cta-section p { margin-bottom: 20px !important; }

@media (max-width: 768px) {
  section,
  .page-header,
  .faq-container,
  .security-container,
  .compliance-section,
  .security-features,
  .pricing,
  .testimonials,
  .use-cases,
  .usp,
  .comparison,
  .cta,
  .cta-section,
  .definition-block,
  .client-logos {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .section-title { margin-bottom: 20px !important; }
}


/* =============================================================
   PROTECTION DES TITRES EN HAUT DE PAGE
   Restaurer l'espace nécessaire pour laisser respirer après la nav
   Les valeurs originales étaient 130px (security) et 160px (equipe)
   ============================================================= */
body#secu .security-container,
body#secu section:first-of-type {
  padding-top: 120px !important;
  padding-bottom: 32px !important;
}
body#a_propos #equipe,
body#about #equipe {
  padding-top: 140px !important;
}
body#a_propos #equipe .a-propos-text:first-of-type,
body#about #equipe .a-propos-text:first-of-type,
body#a_propos h2.a-propos-text,
body#about h2.a-propos-text {
  margin-top: 0;
  margin-bottom: 24px;
  padding-top: 0;
}

/* Page demo : titre en haut */
body#demo .page-header h2,
body#faq[class*="demo"] .page-header h2 { padding-top: 12px; }

/* Page FAQ : si page-header présent */
body#faq .faq-container { padding-top: 110px !important; padding-bottom: 40px !important; }
body#faq .page-header { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
/* Page démo : laisser de l'espace pour la nav (body id="faq" sur demo aussi) */
body#faq .page-header.demo { padding-top: 110px !important; padding-bottom: 20px !important; }
body#faq .page-header.demo h2 { padding-top: 0; margin-top: 0; }

/* Page contact : titre haut */
body#contact section:first-of-type,
body#contact .container:first-of-type { padding-top: 90px !important; }

/* Page tarifs : titre haut */
body#tarif .pricing,
body#tarifs .pricing,
body#preise .pricing,
body#pricing .pricing { padding-top: 60px !important; }

@media (max-width: 768px) {
  body#secu .security-container,
  body#secu section:first-of-type { padding-top: 80px !important; }
  body#a_propos #equipe,
  body#about #equipe { padding-top: 90px !important; }
  body#tarif .pricing,
  body#tarifs .pricing,
  body#preise .pricing,
  body#pricing .pricing { padding-top: 48px !important; }
  body#faq .faq-container { padding-top: 80px !important; }
  body#faq .page-header.demo { padding-top: 80px !important; }
  body#contact section:first-of-type,
  body#contact .container:first-of-type { padding-top: 60px !important; }
}


/* =============================================================
   PAGE TARIFS — NEUTRALISER LA SÉLECTABILITÉ DES PLANS
   Pas de hover/cursor pointer sur les "plan" tiles : ce sont
   des cartes d'info, pas des choix. Un seul CTA mène au signup.
   ============================================================= */
body#tarif .plan,
body#tarif .prepaid-choice,
body#tarif .plan.prepaid-choice {
  cursor: default !important;
  pointer-events: none !important;
  transition: none !important;
  transform: none !important;
}
body#tarif .plan:hover,
body#tarif .prepaid-choice:hover,
body#tarif .plan.is-active,
body#tarif .plan.selected,
body#tarif .prepaid-choice.is-active,
body#tarif .prepaid-choice.selected {
  background-color: inherit !important;
  border-color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Le bouton billing (Mensuel/Annuel) reste interactif */
body#tarif .billing-tab {
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* Ré-activer pointer-events sur les VRAIS CTA (boutons signup) */
body#tarif .cta-btn,
body#tarif .pricing-card .btn,
body#tarif .pricing-card a.btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}


/* =============================================================
   LAST COMPLIANCE COMPACT — supprimer le grand vide avant la CTA
   ============================================================= */
body#secu .compliance-section:last-of-type {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body#secu .cta-section {
  padding-top: 40px !important;
}


/* =============================================================
   SECURITY-CONTENT COMPACT — réduire l'espace entre image/texte
   et les 6 cards de garanties juste en dessous
   ============================================================= */
body#secu .security-content { margin-bottom: 24px !important; }
body#secu .security-features { padding-top: 0 !important; }
body#secu .security-intro { margin-bottom: 28px !important; }


/* =============================================================
   SECU CTA NO GAP — supprimer le rectangle clair avant la CTA
   ============================================================= */
body#secu .cta-section { padding-top: 56px !important; margin-top: 0 !important; }
body#secu .compliance-section:last-of-type { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body#secu .compliance-section:last-of-type .compliance-container { padding-bottom: 0 !important; }


/* =============================================================
   CONTACT FORM ADJUST — padding-top + placeholder + label sizes
   ============================================================= */
body#contact #contacts {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
body#contact #contacts .contact-header { padding-top: 16px !important; padding-bottom: 24px !important; }
body#contact #contactForm input,
body#contact #contactForm textarea {
  font-size: 14px !important;
}
body#contact #contactForm input::placeholder,
body#contact #contactForm textarea::placeholder {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
body#contact #contactForm label {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9);
}
body#contact #contactForm label small { font-size: 11px; }

@media (max-width: 768px) {
  body#contact #contacts { padding-top: 40px !important; }
}

/* ============================================================
   NAV — keep menu items on a single line at every width
   (prevents "À propos" / "Über uns" from breaking into two lines
   when the desktop nav is tight)
   ============================================================ */
nav a { white-space: nowrap; }