/* ============================================================
   CSS statique — remplace le CDN Tailwind (https://cdn.tailwindcss.com).
   Compile "à la main" uniquement les classes réellement utilisées sur
   le site (97 au total, voir la liste extraite lors de la génération).
   Objectif : Core Web Vitals. Le CDN Tailwind télécharge un moteur JS
   qui recompile les styles À CHAQUE chargement de page — ça pénalise
   le LCP et l'INP, deux métriques utilisées par Google pour classer
   les pages. Un fichier CSS statique de quelques Ko s'affiche
   instantanément, sans JavaScript à exécuter.

   ⚠️ Si tu ajoutes de nouvelles classes Tailwind dans index.html ou
   generate-pages.mjs plus tard, il faudra les ajouter ici à la main
   (ou réintroduire temporairement le CDN pour vérifier le rendu, puis
   ajouter la classe manquante ici avant de redéployer).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Layout */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.min-h-screen { min-height: 100vh; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
.w-20 { width: 5rem; } .h-20 { height: 5rem; }
.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.min-w-\[220px\] { min-width: 220px; }

/* Espacements */
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.gap-x-4 { column-gap: 1rem; } .gap-y-2 { row-gap: .5rem; }
.p-4 { padding: 1rem; } .p-8 { padding: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.mt-6 { margin-top: 1.5rem; } .mt-12 { margin-top: 3rem; } .-mt-0\.5 { margin-top: -0.125rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Typo */
.text-xs { font-size: .75rem; } .text-\[10px\] { font-size: 10px; }
.text-sm { font-size: .875rem; } .text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; }
.font-normal { font-weight: 400; } .font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; }
.text-center { text-align: center; } .text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.antialiased { -webkit-font-smoothing: antialiased; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:opacity-90:hover { opacity: .9; }
.opacity-80 { opacity: .8; }
.transition-opacity { transition-property: opacity; transition-duration: 150ms; }

/* Couleurs (palette du projet) */
.bg-\[\#FAFAF9\] { background-color: #FAFAF9; }
.bg-\[\#FDF8F0\] { background-color: #FDF8F0; }
.bg-\[\#141311\] { background-color: #141311; }
.bg-\[\#0F6E5C\] { background-color: #0F6E5C; }
.bg-white { background-color: #fff; }
.bg-yellow-50 { background-color: #fefce8; }
.text-\[\#141311\] { color: #141311; }
.text-\[\#6B6862\] { color: #6B6862; }
.text-\[\#3a3833\] { color: #3a3833; }
.text-\[\#0F6E5C\] { color: #0F6E5C; }
.text-white { color: #fff; }
.text-yellow-900 { color: #713f12; }
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-yellow-200 { border-color: #fef08a; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Responsive (mobile-first, breakpoint sm = 640px) */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:text-5xl { font-size: 3rem; }
}

/* ============================================================
   Styles spécifiques au webapp (au-delà de la base partagée avec
   la landing) — formulaires, cartes de résultat, navigation.
   ============================================================ */

body { background-color: #FAFAF9; color: #141311; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-container { max-width: 640px; margin: 0 auto; padding: 32px 20px 100px; width: 100%; box-sizing: border-box; }

.home-header { text-align: center; margin-bottom: 24px; }
.brand-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.brand-subtitle { color: #6B6862; font-size: 0.95rem; }

.search-input, .template-form input, .template-form select, .template-form textarea {
  width: 100%; border: 1px solid #EAE8E4; border-radius: 14px; padding: 12px 16px;
  font-size: 15px; font-family: inherit; box-sizing: border-box; background: #fff; color: #141311;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-input { margin-bottom: 16px; }
.search-input:focus, .template-form input:focus, .template-form select:focus, .template-form textarea:focus {
  outline: none;
  border-color: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15), 0 0 12px rgba(16, 185, 129, 0.12);
}

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid #EAE8E4; background: #fff;
  color: #6B6862; font-size: 13px; cursor: pointer; font-family: inherit;
}
.chip-active { background: #0F6E5C; border-color: #0F6E5C; color: #fff; }

.template-list { display: flex; flex-direction: column; gap: 10px; }
.template-card {
  display: block; padding: 16px; border-radius: 16px; border: 1px solid #EAE8E4;
  background: #fff; text-decoration: none; color: inherit;
}
.template-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.template-card p { font-size: 13px; color: #6B6862; }
.empty-state { text-align: center; color: #6B6862; padding: 40px 0; }

.back-link { display: inline-block; color: #0F6E5C; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 20px; }
.form-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.form-subtitle { color: #6B6862; margin-bottom: 24px; }

.template-form { display: flex; flex-direction: column; gap: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #3a3833; }
.form-error { color: #b91c1c; font-size: 14px; }

.btn-primary {
  background: #0F6E5C; color: #fff; border: none; border-radius: 999px;
  padding: 14px 24px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-align: center;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background: #fff; color: #141311; border: 1px solid #EAE8E4; border-radius: 999px;
  padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}

.result-paper {
  background: #fff; border: 1px solid #EAE8E4; border-radius: 16px; padding: 24px;
  margin-bottom: 20px; white-space: pre-wrap; line-height: 1.7; font-size: 14.5px;
}
.result-text { white-space: pre-wrap; }

.unlock-card {
  background: #f0faf7; border: 1.5px solid #0F6E5C; border-radius: 16px;
  padding: 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px;
}
.actions-row { display: flex; gap: 12px; }
.actions-row button { flex: 1; }

.ad-banner-slot { padding: 12px 20px; text-align: center; background: #fff; border-top: 1px solid #EAE8E4; }

.success-container { text-align: center; padding-top: 80px; }

.consent-checkbox {
  display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px;
  color: #3a3833; line-height: 1.5; cursor: pointer;
}
.consent-checkbox input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.consent-checkbox a { color: #0F6E5C; text-decoration: underline; }
.conflict-notice { font-size: 12px; color: #92620a; background: #fef9e8; border-radius: 10px; padding: 10px 12px; margin: 0; }

.site-footer { padding: 24px 20px; text-align: center; border-top: 1px solid #EAE8E4; margin-top: auto; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.footer-links a { color: #6B6862; font-size: 12.5px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-note { font-size: 11px; color: #a8a49c; max-width: 480px; margin: 0 auto; line-height: 1.5; }
.footer-note a { color: #a8a49c; text-decoration: underline; }

.fixed { position: fixed; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-gray-200 { border-color: #e5e7eb; }
.p-3 { padding: .75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.pb-28 { padding-bottom: 7rem; }
.pb-7 { padding-bottom: 1.75rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-7 { margin-bottom: 1.75rem; }
.gap-1\.5 { gap: .375rem; }
.leading-tight { line-height: 1.25; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.hover\:opacity-90:hover { opacity: .9; }
@media (min-width: 640px) {
  .sm\:hidden { display: none; }
}

/* ============================================================
   REFONTE VISUELLE — style SaaS premium 2026.
   Police Inter (Google Fonts, chargée dans index.html), cartes
   flottantes avec ombre douce, bouton CTA en gradient, contraste
   noir profond / gris-bleu au lieu du gris plat précédent.
   ============================================================ */

body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }

:root {
  --text-deep: #0B0B0A;      /* noir profond pour les titres */
  --text-slate: #5B6472;     /* gris-bleu pour le texte secondaire (remplace le gris plat) */
  --border-soft: #ECECEA;    /* bordure très claire des cartes */
  --brand-from: #12A889;
  --brand-to: #0B6E56;
}

/* Cartes flottantes : fond blanc pur, bordure fine, ombre douce */
.card-modern {
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  padding: 18px 20px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.card-modern:hover {
  border-color: #DEDEDA;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.07);
  transform: translateY(-1px);
}
.card-modern h3 { color: var(--text-deep); }
.card-modern p { color: var(--text-slate); }

/* Bouton CTA — "le bouton est le roi" : massif, gradient, ombre colorée */
.btn-cta {
  display: block;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  color: #fff;
  text-align: center;
  padding: 18px 28px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(11, 110, 86, 0.28);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11, 110, 86, 0.36);
}
.btn-cta:active { transform: translateY(0); }

/* Header de confiance — 3 icônes fines + libellés courts, honnêtes */
.trust-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 0 24px;
  margin-bottom: 8px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-slate);
  font-weight: 500;
}
.trust-item svg { flex-shrink: 0; color: var(--brand-to); }

/* Contraste renforcé pour les titres et textes secondaires partout */
h1, h2, h3 { color: var(--text-deep); }
.text-slate { color: var(--text-slate); }

/* ============================================================
   Layout "boxed" + thème blanc cassé + header/footer pro.
   ============================================================ */

body { background-color: #F9FAFB; }
.page-container { max-width: 720px; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid #E5E7EB; }
.site-header-inner {
  max-width: 720px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header-logo { font-size: 20px; font-weight: 800; color: var(--text-deep); text-decoration: none; }
.site-header-nav { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
.site-header-nav a { color: var(--text-slate); text-decoration: none; font-weight: 500; }
.site-header-nav a:hover { color: var(--text-deep); }
.site-header-cta {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  color: #fff !important; padding: 9px 16px; border-radius: 10px;
  font-weight: 700 !important;
}

/* Footer */
.site-footer { background: #fff; border-top: 1px solid #E5E7EB; margin-top: 40px; }
.site-footer-inner {
  max-width: 720px; margin: 0 auto; padding: 32px 20px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.site-footer-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer-heading { font-size: 12px; font-weight: 700; color: var(--text-deep); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.site-footer-col a { font-size: 13px; color: var(--text-slate); text-decoration: none; }
.site-footer-col a:hover { text-decoration: underline; }
.site-footer-bottom {
  max-width: 720px; margin: 0 auto; padding: 16px 20px 28px;
  border-top: 1px solid #F1F1EF;
}
.site-footer-bottom p { font-size: 11px; color: #9CA3AF; line-height: 1.6; }
.site-footer-bottom a { color: #9CA3AF; text-decoration: underline; }

/* Section "Pourquoi DocUp" — 3 blocs iconographiques */
.why-us-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 28px;
}
.why-us-block {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
  padding: 16px 14px; text-align: center;
}
.why-us-block svg { color: var(--brand-to); margin: 0 auto 8px; display: block; }
.why-us-block h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.why-us-block p { font-size: 11.5px; color: var(--text-slate); line-height: 1.4; }

@media (max-width: 640px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 20px; }
  .why-us-grid { gap: 8px; }
  .why-us-block { padding: 12px 8px; }

  /* CTA header massif et garanti visible sur mobile — les liens
     secondaires (déjà dans le footer) s'effacent pour ne jamais
     écraser le bouton, comme demandé explicitement. */
  .site-header-nav { gap: 0; }
  .site-header-nav a:not(.site-header-cta) { display: none; }
  .site-header-cta {
    padding: 12px 20px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
}

/* ============================================================
   Finition "Design Premium" — fond teinté, dynamisme au survol,
   logo, header renforcé, CTA en relief.
   ============================================================ */

/* Fond très légèrement teinté (au lieu du blanc plat) + conteneur
   principal délimité visuellement */
body { background-color: #FDF8F0; }
.page-container {
  background: #FDFDFD;
  border-left: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  min-height: calc(100vh - 200px);
}
.site-header-inner, .site-footer-inner, .site-footer-bottom {
  background: transparent;
}
.site-header, .site-footer {
  border-left: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  max-width: 720px;
  margin: 0 auto;
}

/* Logo : icône + texte, alignés, gras */
.site-header-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; font-weight: 800;
}

/* Header plus haut, CTA en relief avec dégradé plus prononcé */
.site-header-inner { padding: 20px 20px; }
.site-header-cta {
  background: linear-gradient(135deg, #14BC98, var(--brand-to));
  box-shadow: 0 3px 10px rgba(11, 110, 86, 0.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.site-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(11, 110, 86, 0.38);
}

/* Dynamisme au survol — cartes qui "répondent" à la souris */
.template-card:hover, .card-modern:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.09);
  border-color: #D1D5DB;
}
.why-us-block { transition: transform .15s ease, box-shadow .15s ease; }
.why-us-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

/* Bandeau preuve sociale — n'affiche jamais de chiffre inventé, voir
   SocialProofBanner.tsx (masqué tant que le compteur réel est à 0) */
.social-proof-banner {
  background: linear-gradient(90deg, #ECFDF5, #F0FDF4);
  border: 1px solid #BBF7D0;
  color: #166534;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .page-container, .site-header, .site-footer { border-left: none; border-right: none; }
}

/* ============================================================
   Envergure — conteneur large, grille 2 colonnes, header sticky,
   ombres marquées au repos et au survol.
   ============================================================ */

/* Conteneur large pour le catalogue (Home) ; les pages de lecture
   longue (document/pilier/à-propos, générées séparément) restent à
   une largeur confortable pour la lisibilité — voir prose-width. */
.page-container { max-width: 1040px; }
.site-header, .site-footer { max-width: 1040px; }
.quick-nav-inner, .site-header-inner, .site-footer-inner, .site-footer-bottom { max-width: 1040px; }

/* Header sticky */
.site-header-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: #fff; }
@media (max-width: 640px) {
  /* Mobile : header simple, statique, dans le flux normal — zéro risque
     de superposition, zéro subtilité CSS. Le "sticky" n'est qu'un
     confort desktop, pas une fonctionnalité critique. */
  .site-header-sticky { position: static; }
}

/* Bandeau de navigation rapide par catégorie, sous le header */
.quick-nav { background: #F3F4F6; border-bottom: 1px solid #E5E7EB; }
.quick-nav-inner {
  margin: 0 auto; padding: 10px 20px;
  display: flex; gap: 18px; overflow-x: auto; white-space: nowrap;
}
@media (max-width: 640px) {
  /* Mobile : grille verticale simple au lieu du défilement horizontal —
     plus basique, plus robuste, zéro risque de blocs vides. */
  .quick-nav-inner {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; white-space: normal; overflow-x: visible;
  }
  .quick-nav-link { white-space: normal; }
}
.quick-nav-link { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-slate); text-decoration: none; }
.quick-nav-link:hover { color: var(--brand-to); }

/* Grille 2 colonnes desktop pour le catalogue de documents */
.template-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Ombres marquées — repos (shadow-md) / survol (shadow-xl) */
.template-card, .card-modern {
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}
.template-card:hover, .card-modern:hover {
  box-shadow: 0 16px 32px rgba(16, 24, 40, 0.14);
}

/* Largeur de lecture confortable pour le contenu long (pages À propos,
   et réutilisable sur les pages document/pilier statiques si besoin) */
.prose-width { max-width: 680px; }

/* ============================================================
   Identité "Premium" — dégradé de fond, couleur trust, typographie
   hiérarchisée, callouts latéraux, transitions.
   ============================================================ */

/* Couleur "trust" — vert émeraude, cohérente avec l'identité déjà
   établie (--brand-to) mais renforcée pour les éléments de confiance */
:root {
  --trust: #059669;
  --trust-dark: #047857;
}

/* Fond dégradé léger au lieu du plat — la page est "habillée" */
body {
  background: linear-gradient(180deg, #EEF2F7 0%, #FAFBFC 420px, #FAFBFC 100%);
}

/* Typographie hiérarchisée : titres très marqués, corps plus lisible */
.brand-title { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.03em; color: var(--text-deep); }
.brand-subtitle { font-size: 1.05rem; color: var(--text-slate); line-height: 1.6; max-width: 560px; margin: 0 auto; }
h1 { font-weight: 800 !important; letter-spacing: -0.02em; }
h2 { font-weight: 700 !important; }
.form-title { font-weight: 800; letter-spacing: -0.02em; }

/* Titres et icônes actives en couleur trust */
.chip-active { background: var(--trust); border-color: var(--trust); }
.why-us-block svg, .trust-item svg, .quick-nav-link:hover { color: var(--trust); }
.site-header-cta {
  background: linear-gradient(135deg, #10B981, var(--trust-dark));
}

/* Layout à deux colonnes sur grand écran : contenu + callouts latéraux
   ("Pourquoi nous choisir") — plus d'espace mort sur les côtés */
.home-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
  .home-layout { grid-template-columns: 1fr 280px; }
}
.side-callouts {
  display: none;
}
@media (min-width: 1024px) {
  .side-callouts {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 140px;
  }
}
.side-callout {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 18px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
}
.side-callout-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #ECFDF5; display: flex; align-items: center; justify-content: center;
  color: var(--trust); margin-bottom: 10px;
}
.side-callout h4 { font-size: 13.5px; font-weight: 700; color: var(--text-deep); margin-bottom: 4px; }
.side-callout p { font-size: 12px; color: var(--text-slate); line-height: 1.5; }

/* Transitions fluides au changement de catégorie */
.template-grid { transition: opacity .18s ease; }
.template-grid.is-filtering { opacity: 0.35; }
.template-card { transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
.chip { transition: background .15s ease, border-color .15s ease, color .15s ease; }

/* ============================================================
   Refonte "Premium & Engagement" — fond radial, typographie massive,
   hero surélevé, CTA glow, animations fade-up, icônes pleines.
   ============================================================ */

/* Fond texturé chaleureux — dégradés pastel discrets superposés, plus
   "formulaire austère" mais toujours ultra-léger (pur CSS, zéro image). */
body {
  background:
    radial-gradient(ellipse 900px 500px at 8% 0%, rgba(253, 230, 138, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 15%, rgba(167, 243, 208, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 1400px 900px at 50% 0%, #FFFFFF 0%, #FDF6EC 55%, #FBEFDC 100%);
  background-attachment: fixed;
}

/* Typographie "de chef" — ExtraBold, letter-spacing négatif marqué */
.brand-title { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.045em; }
h1 { font-weight: 900 !important; letter-spacing: -0.035em !important; }
.form-title { font-weight: 900; letter-spacing: -0.03em; }

/* Espacement de sécurité entre le header et le premier bloc — évite
   l'effet "collé" au chargement, particulièrement visible sur mobile. */
.page-container { padding-top: 20px; }
@media (max-width: 640px) {
  .page-container { padding-top: 16px; }
}

/* Le hero (bloc titre + recherche) devient un vrai bloc surélevé */
.hero-elevated {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 25px 50px -12px rgba(16, 24, 40, 0.15), 0 10px 20px -8px rgba(16, 24, 40, 0.08);
  margin-bottom: 28px;
}
@media (max-width: 640px) {
  .hero-elevated { padding: 28px 20px; border-radius: 18px; }
}

/* CTA en dégradé vert émeraude → vert forêt, effet glow au survol */
.btn-cta, .site-header-cta {
  background: linear-gradient(135deg, #10B981 0%, #065F46 100%);
}
.btn-cta:hover {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18), 0 10px 28px rgba(6, 95, 70, 0.4);
}
.site-header-cta:hover {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16), 0 8px 20px rgba(6, 95, 70, 0.35);
}

/* Icônes pleines, colorées, légère opacité — remplace le line-art */
.why-us-block svg, .side-callout-icon svg, .trust-item svg {
  fill: var(--trust);
  fill-opacity: 0.14;
  stroke: var(--trust);
}
.quick-nav-link svg { fill: currentColor; fill-opacity: 0.12; }

/* Micro-animations "fade-up" au scroll — IntersectionObserver, voir
   useFadeUp.ts. CORRIGÉ : visible par défaut (opacity: 1). L'ancienne
   version cachait le contenu tant que l'IntersectionObserver ne s'était
   pas déclenché — sur Safari navigation privée, ce déclenchement peut ne
   jamais arriver de façon fiable, rendant la grille de documents
   invisible en PERMANENCE tout en gardant sa place (page blanche au
   scroll). Progressive enhancement : au pire, pas d'animation ; jamais
   de contenu invisible. */
.fade-up { opacity: 1; transform: none; }
.fade-up.will-animate { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fade-up.will-animate.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Deep-dive pages piliers — Problème/Solution, FAQ accordéon,
   ombres marquées, densité "high-conversion".
   ============================================================ */

.problem-solution-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .problem-solution-grid { grid-template-columns: 1fr 1fr; } }
.ps-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 25px -8px rgba(16, 24, 40, 0.12); }
.ps-problem { border: 1px solid #FEE2E2; }
.ps-solution { border: 1px solid #D1FAE5; }
.ps-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ps-problem .ps-icon { background: #FEF2F2; color: #DC2626; }
.ps-solution .ps-icon { background: #ECFDF5; color: var(--trust); }
.ps-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ps-card p { font-size: 12.5px; color: var(--text-slate); line-height: 1.5; }

/* FAQ accordéon natif (details/summary) */
.faq-accordion { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
}
.faq-item summary {
  font-weight: 700; font-size: 14px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 18px; color: var(--trust); font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: 13px; color: var(--text-slate); line-height: 1.5; margin-top: 10px; }

/* Cartes plus "ancrées" — ombre plus marquée au repos, comme demandé */
.card-modern, .template-card {
  box-shadow: 0 8px 20px -6px rgba(16, 24, 40, 0.1);
}

/* Barre de progression du parcours (formulaire → résultat) */
.progress-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 16px 0 24px; }
.progress-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9CA3AF; font-weight: 600; }
.progress-step.is-active { color: var(--text-deep); }
.progress-step.is-done { color: var(--trust); }
.progress-dot {
  width: 22px; height: 22px; border-radius: 50%; background: #E5E7EB; color: #6B7280;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.progress-step.is-active .progress-dot { background: var(--trust); color: #fff; }
.progress-step.is-done .progress-dot { background: var(--trust); color: #fff; }
.progress-line { flex: 1; height: 2px; background: #E5E7EB; max-width: 40px; }
.progress-line.is-done { background: var(--trust); }

/* Contraste texte renforcé, comme demandé */
body { color: #1E293B; }
.text-slate, .brand-subtitle { color: #475569; }

/* ============================================================
   Section full-width "Pourquoi nous faire confiance" — remplace la
   demande de faux logos/faux avis par du contenu 100% vérifiable.
   ============================================================ */

.trust-section {
  background: #F8FAFC;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  padding: 48px 20px;
  width: 100%;
}
.trust-section-inner { max-width: 1040px; margin: 0 auto; }
.trust-section h2 { text-align: center; margin-bottom: 28px; }
.trust-cards-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .trust-cards-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-fact-card {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 24px; box-shadow: 0 20px 40px -12px rgba(16, 24, 40, 0.15);
}
.trust-fact-card .fact-icon {
  width: 40px; height: 40px; border-radius: 12px; background: #ECFDF5;
  color: var(--trust); display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.trust-fact-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.trust-fact-card p { font-size: 13px; color: #475569; line-height: 1.5; }

/* ============================================================
   Placeholders de layout — neutres, géométriques, n'affirment rien
   de faux (pas de faux nom, pas de fausse note, pas de faux chiffre).
   Pour visualiser une structure avant d'avoir du vrai contenu à y mettre.
   ============================================================ */

.logo-placeholder-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.logo-placeholder {
  width: 110px; height: 44px; background: #E5E7EB; border-radius: 8px;
  opacity: 0.6;
}

.review-skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .review-skeleton-grid { grid-template-columns: repeat(3, 1fr); } }
.review-skeleton {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 20px; box-shadow: 0 20px 40px -12px rgba(16, 24, 40, 0.15);
}
.skeleton-line { background: #E5E7EB; border-radius: 6px; height: 10px; margin-bottom: 8px; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.full { width: 100%; }
.skeleton-stars { display: flex; gap: 3px; margin-bottom: 12px; }
.skeleton-star { width: 14px; height: 14px; background: #E5E7EB; border-radius: 3px; }

.stats-banner-placeholder {
  background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 14px;
  padding: 20px; text-align: center;
}
.stats-banner-placeholder .stats-number-slot {
  width: 120px; height: 28px; background: #E5E7EB; border-radius: 6px;
  margin: 0 auto 8px;
}

/* ============================================================
   Layout 3 colonnes sitewide — largeur fluide 95% / max 1536px.
   Sidebar gauche (navigation) / contenu central / sidebar droite
   (réassurance : vrai compteur + "Pourquoi DocUp").
   ============================================================ */

.site-header, .site-footer, .quick-nav-inner, .site-header-inner,
.site-footer-inner, .site-footer-bottom, .page-container {
  max-width: 1536px;
  width: 95%;
}
.page-container { margin: 0 auto; }

.layout-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1200px) {
  .layout-3col { grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: start; }
}

.left-nav { display: none; }
@media (min-width: 1200px) {
  .left-nav {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 140px;
    background: #fff; border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px;
  }
}
.left-nav-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-slate); letter-spacing: .03em; margin: 8px 6px 4px; }
.left-nav a {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px;
  font-size: 13px; font-weight: 500; color: var(--text-slate); text-decoration: none; border-radius: 8px;
}
.left-nav a:hover { background: #F3F4F6; color: var(--text-deep); }

.right-sidebar { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1200px) {
  .right-sidebar { position: sticky; top: 140px; }
}
.reassurance-box {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 18px; box-shadow: 0 8px 20px -6px rgba(16, 24, 40, 0.1);
}
.reassurance-box h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.reassurance-counter { font-size: 26px; font-weight: 900; color: var(--trust); letter-spacing: -0.02em; }
.reassurance-counter-label { font-size: 11px; color: var(--text-slate); margin-top: 2px; }
.reassurance-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--text-slate); }
.reassurance-list li { display: flex; align-items: flex-start; gap: 8px; }
.reassurance-list svg { flex-shrink: 0; color: var(--trust); margin-top: 1px; }

/* ============================================================
   Réchauffement du design — illustration hero, touches de couleur
   sur les blocs "Pourquoi DocUp" (plus de blanc/gris plat).
   ============================================================ */

.hero-illustration { display: flex; justify-content: center; margin-bottom: 4px; }

.why-us-block:nth-child(1) { background: #FFF7ED; border-color: #FED7AA; }
.why-us-block:nth-child(1) svg { color: #EA580C; fill: #EA580C; fill-opacity: 0.12; stroke: #EA580C; }
.why-us-block:nth-child(2) { background: #ECFDF5; border-color: #A7F3D0; }
.why-us-block:nth-child(3) { background: #FEF9E7; border-color: #FDE68A; }
.why-us-block:nth-child(3) svg { color: #CA8A04; fill: #CA8A04; fill-opacity: 0.12; stroke: #CA8A04; }

/* Bloc "Mot du fondateur" — chaleureux, personnel */
.founder-note {
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 16px;
  padding: 20px; display: flex; gap: 14px; align-items: flex-start;
}
.founder-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #059669;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; flex-shrink: 0;
}

/* ============================================================
   Chips "Top documents" + touches de dynamisme supplémentaires.
   ============================================================ */

.top-doc-chip {
  display: inline-block; background: #fff; border: 1.5px solid #FDE68A;
  color: var(--text-deep); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.top-doc-chip:hover { background: #FEF9E7; border-color: #F59E0B; transform: translateY(-1px); }

/* Accent coloré au survol des cartes de documents — barre latérale qui
   apparaît, donne un vrai retour visuel au mouvement de souris */
.template-card {
  position: relative; border-left: 3px solid transparent;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.template-card:hover { border-left-color: var(--trust); }

/* Icônes qui réagissent légèrement au survol des blocs "Pourquoi DocUp" */
.why-us-block svg { transition: transform .2s ease; }
.why-us-block:hover svg { transform: scale(1.15) rotate(-4deg); }

/* Chips de catégorie : petit rebond au clic/survol */
.chip { transform: scale(1); }
.chip:hover { transform: scale(1.04); }
.chip:active { transform: scale(0.97); }

/* Bandeau catégories (quick-nav) : soulignement animé au survol */
.quick-nav-link { position: relative; }
.quick-nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
  background: var(--trust); transition: width .2s ease;
}
.quick-nav-link:hover::after { width: 100%; }

/* ============================================================
   Barre de progression de lecture (guides) + bouton flottant "Perdu ?"
   ============================================================ */

#reading-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #10B981, #065F46); z-index: 50;
  transition: width .1s ease;
}

.lost-button {
  position: fixed; bottom: 18px; right: 18px; z-index: 30;
  background: #fff; border: 1.5px solid var(--trust); color: var(--trust);
  border-radius: 999px; padding: 10px 16px; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(16,24,40,0.15); text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
@media (min-width: 1024px) { .lost-button { display: none; } }

/* ============================================================
   Finitions finales : miniature preview, urgence, glassmorphism,
   relief des boutons, confort typographique.
   ============================================================ */

.doc-preview-thumb {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 20px; margin: 14px 0 18px; filter: blur(0.3px);
}
.doc-preview-lines { opacity: 0.35; }
.doc-preview-line { height: 8px; background: #94A3B8; border-radius: 4px; margin-bottom: 8px; }
.doc-preview-caption { font-size: 11px; color: var(--text-slate); text-align: center; margin-top: 10px; }

.urgency-link {
  display: inline-block; font-size: 12px; font-weight: 600; color: #B45309;
  text-decoration: none; margin-bottom: 16px;
}
.urgency-link:hover { text-decoration: underline; }

/* Glassmorphism — header fixe et cartes principales des guides */
.site-header-sticky { background: rgba(255,255,255,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header { background: transparent; }
.hero-elevated {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Relief des boutons — ombre plus marquée, effet actif */
.btn-cta:active, .site-header-cta:active { transform: translateY(1px) scale(0.98); }
.btn-secondary {
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.btn-secondary:hover { box-shadow: 0 6px 14px rgba(16,24,40,0.1); transform: translateY(-1px); }

/* Confort typographique — gris très foncé plutôt que noir pur */
body, h1, h2, h3, .form-title, .brand-title { color: #1E293B; }
.text-\[\#141311\] { color: #1E293B; }

/* ============================================================
   Skeleton loaders — animation de chargement fluide, pur CSS.
   ============================================================ */

@keyframes skeleton-pulse {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #EEF0F2 25%, #F7F8F9 37%, #EEF0F2 63%);
  background-size: 800px 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.skeleton-text { height: 12px; margin-bottom: 8px; }
.skeleton-block { height: 60px; border-radius: 14px; }
.skeleton-chip { height: 32px; width: 90px; border-radius: 999px; display: inline-block; margin-right: 8px; }