/* ==========================================================================
   DA « Journal de classe » : aligne la landing et le guide sur l'application
   JDC Numérique (src/theme/tokens.ts, bloc `journal`).
   Chargée APRÈS styles.css. Ne change aucun texte ni aucune structure.

   Polices : Fraunces (titres), Manrope (texte), Caveat (touche manuscrite,
   jamais en gras). Fond crème chaud, cartes aux grands rayons, bordure et
   ombre brunes douces, accent bleu ciel, repère jaune soleil.
   Jamais de blanc pur en fond de page, jamais de noir pur.
   ========================================================================== */

:root {
    /* Jetons de l'app (journal) */
    --j-bg: #F8F3EA;
    --j-paper: #FFFDF8;
    --j-ink: #2B2724;
    --j-ink2: #5F5751;
    --j-ink3: #9A918A;
    --j-line: #EFE6D8;
    --j-line2: #E6DBCB;
    --j-sky: #82BCE3;
    --j-sky-d: #2F6A96;      /* bleu ciel foncé, 5.6:1 sur crème (AA) */
    --j-sky-l: #E2F0FA;
    --j-sun: #F2CF5B;
    --j-sun-d: #8A6608;      /* texte sur jaune clair, AA */
    --j-sun-l: #FCF0C6;
    --j-rose: #EC9DB2;
    --j-rose-d: #A3405F;     /* AA sur crème */
    --j-rose-l: #FBE3EA;
    --j-mint: #7FCDAE;
    --j-mint-d: #23805C;
    --j-mint-l: #DFF4EA;
    --j-peach-l: #FDEBDF;
    --j-lilac-l: #EEE5F8;
    --j-anno: #976876;
    --j-sh: 0 1px 0 #EDE3D3, 0 8px 24px rgba(90, 70, 40, .05);
    --j-sh-lg: 0 1px 0 #EDE3D3, 0 18px 44px rgba(90, 70, 40, .10);

    /* Remappage des variables de styles.css */
    --primary: var(--j-ink);
    --primary-light: var(--j-ink2);
    --accent: var(--j-sun);
    --accent-hover: #E8C23F;
    --accent-light: var(--j-sky-l);
    --accent-dark: var(--j-sky-d);
    --cream: var(--j-bg);
    --white: var(--j-paper);
    --gray-50: #F4EEE3;
    --gray-100: var(--j-line);
    --gray-200: var(--j-line2);
    --gray-300: #D9CDBB;
    --gray-400: #B3A99D;
    --gray-500: #6F665F;     /* AA sur crème */
    --gray-600: var(--j-ink2);
    --gray-700: #463F3A;
    --gray-800: var(--j-ink);
    --gray-900: var(--j-ink);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-hand: 'Caveat', cursive;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-xs: 0 1px 0 #EDE3D3;
    --shadow-sm: var(--j-sh);
    --shadow-md: 0 1px 0 #EDE3D3, 0 10px 28px rgba(90, 70, 40, .07);
    --shadow-lg: var(--j-sh-lg);
    --shadow-xl: 0 1px 0 #EDE3D3, 0 28px 64px rgba(90, 70, 40, .14);
}

body { background: var(--j-bg); color: var(--gray-700); font-weight: 500; }

/* ----- Titres : Fraunces, poids 600-700 (jamais 800/900 écrasé) ----- */
h1, h2, h3, h4,
.hero-title, .section-title, .pricing-price, .proof-stat-number,
.aide-hero h1, .aide-section > h2, .aide-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--j-ink);
}
.hero-title { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.title-accent {
    color: var(--j-rose-d) !important;
    -webkit-text-fill-color: var(--j-rose-d) !important;
}
.section-title { font-weight: 600; }
.section-subtitle { color: var(--j-ink2); }

/* ----- Touche manuscrite : Caveat, jamais en gras ----- */
.hero-hello-text, .hero-hello, .hero-brand-sparkle, .aide-hand,
.mathilde-quote, .storytelling-signature, .storytelling-name,
.hero-tagline-chip, .transition-text, .feature-more-title,
[class*="hand"] {
    font-family: var(--font-hand) !important;
    font-weight: 400 !important;
}
.hero-hello-text, .hero-hello { color: var(--j-anno); }
.aide-hand { color: var(--j-sky-d); }
.hero-tagline-chip {
    background: var(--j-sun-l);
    color: var(--j-sun-d);
    border: 1.5px dashed var(--j-sun);
    transform: rotate(-1.5deg);
}

/* ----- Pastilles de section ----- */
.section-badge {
    background: var(--j-sky-l);
    color: var(--j-sky-d);
    border: 1px solid #CFE4F4;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
}

/* ----- Boutons : jaune soleil + texte brun (AA), secondaire papier ----- */
.btn-primary, .btn-hero-test, .btn-pricing-test, .nav-cta,
.aide-header-cta, .aide-help-footer .btn-contact, .cookie-btn-accept {
    background: var(--j-sun) !important;
    color: var(--j-ink) !important;
    font-family: var(--font-body);
    font-weight: 700 !important;
    border: 1px solid #E4BE45;
    box-shadow: 0 1px 0 #D9B23A, 0 8px 20px rgba(185, 140, 16, .18) !important;
}
.btn-primary:hover, .btn-hero-test:hover, .btn-pricing-test:hover, .nav-cta:hover,
.aide-header-cta:hover, .aide-help-footer .btn-contact:hover, .cookie-btn-accept:hover {
    background: #EBC444 !important;
    color: var(--j-ink) !important;
    transform: translateY(-1px);
}
.btn-secondary, .nav-cta-test {
    background: var(--j-paper) !important;
    color: var(--j-ink) !important;
    border: 1.5px solid var(--j-line2) !important;
    box-shadow: var(--j-sh);
    font-weight: 700;
}
.btn-secondary:hover, .nav-cta-test:hover {
    border-color: var(--j-sky) !important;
    background: var(--j-sky-l) !important;
}

/* ----- En-tête ----- */
.navbar.scrolled, .navbar--scrolled, .navbar.sticky {
    background: rgba(255, 253, 248, .92) !important;
    border-bottom: 1px solid var(--j-line);
    backdrop-filter: blur(10px);
}
.nav-links a { font-weight: 600; color: var(--j-ink2); }
.nav-links a:hover { color: var(--j-sky-d); }
.top-banner { background: var(--j-mint-d); }
.aide-header {
    background: rgba(255, 253, 248, .94);
    border-bottom: 1px solid var(--j-line);
    backdrop-filter: blur(10px);
}
.aide-back { font-weight: 600; color: var(--j-ink2); }
.aide-back:hover { color: var(--j-sky-d); }

/* ----- Héros : page de cahier ----- */
.hero { background: var(--j-bg); }
.hero-card { background: transparent; }
.hero-feature-icon, .hero-trust-icon, .pain-icon { border-radius: 14px; }
.hero-trust-row, .hero-bonus-box, .hero-networks, .hero-social-proof {
    border: 1px solid var(--j-line);
    box-shadow: var(--j-sh);
    background: var(--j-paper);
    border-radius: var(--radius-lg);
}

/* ----- Bandes de sections : crème / papier en alternance ----- */
.pain-section, .central-section, .proof-section, .faq-section,
.guide-section, .aide-page { background: var(--j-paper); }
.positioning-section, .export-section, .pricing-section { background: var(--j-bg); }
.storytelling-section { background: #F4ECDD; }
.features-section { background: #F4EEE3; }
.security-section { background: var(--j-ink); }
.final-cta-section { background: linear-gradient(135deg, #2B2724, #3A332E); }
.footer { background: var(--j-ink); }

/* ----- Cartes : grand rayon, bordure brune douce, ombre papier ----- */
.pain-card, .proof-card, .faq-item, .guide-card, .feature-more-card,
.pricing-card, .pricing-comparison, .aide-help-footer, .export-step,
.central-tag, .pos-badge, .domain-highlight {
    background: var(--j-paper);
    border: 1px solid var(--j-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--j-sh);
}
.pricing-card { border: 1.5px solid var(--j-sun); border-radius: var(--radius-xl); box-shadow: var(--j-sh-lg); }
.pain-card:nth-child(4n+1), .feature-more-card:nth-child(4n+1) { background: var(--j-rose-l); }
.pain-card:nth-child(4n+2), .feature-more-card:nth-child(4n+2) { background: var(--j-mint-l); }
.pain-card:nth-child(4n+3), .feature-more-card:nth-child(4n+3) { background: var(--j-peach-l); }
.pain-card:nth-child(4n+4), .feature-more-card:nth-child(4n+4) { background: var(--j-sky-l); }
.feature-more-card:hover, .pain-card:hover { box-shadow: var(--j-sh-lg); }

/* ----- Maquettes d'appareils : bord papier ----- */
.device-bezel, .feature-mockup img, .hero-tablet-mockup, .hero-phone-mockup {
    border-radius: var(--radius-lg);
}

/* ----- FAQ ----- */
.faq-question { font-family: var(--font-display); font-weight: 600; color: var(--j-ink); }
.faq-icon { color: var(--j-sky-d); }
.faq-item.active, .faq-item.open { border-color: var(--j-sky); background: var(--j-sky-l); }

/* ----- Pied de page ----- */
.footer, .footer a { color: rgba(255, 253, 248, .72); }
.footer a:hover { color: var(--j-sun); }

/* ----- Liens ----- */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--j-sky-d);
    outline-offset: 2px;
}

/* ==========================================================================
   Guide (aide.html) : sélecteurs préfixés `body` pour passer APRÈS le
   <style> interne de la page sans toucher à celui-ci.
   ========================================================================== */
body .aide-hero {
    background: var(--j-bg);
    border-bottom: 1px solid var(--j-line);
    position: relative;
    overflow: hidden;
}
/* page de cahier : lignes bleutées + marge rose, comme l'accueil de l'app */
body .aide-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 calc(50% - 392px), #F6D8DF calc(50% - 392px) calc(50% - 390px), transparent calc(50% - 390px)),
        repeating-linear-gradient(180deg, transparent 0 35px, #EEF3F8 35px 36px);
    opacity: .9;
    pointer-events: none;
}
body .aide-hero-inner { position: relative; }
body .aide-hero h1 { font-weight: 700; color: var(--j-ink); }
body .aide-hero p { color: var(--j-ink2); }
body .aide-hand { font-family: var(--font-hand); font-weight: 400; font-size: 1.7rem; color: var(--j-sky-d); }
body .aide-toc-title { font-family: var(--font-body); color: var(--j-ink2); letter-spacing: .1em; }
body .aide-toc a { border-left-width: 3px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 600; }
body .aide-toc a:hover { background: var(--j-sky-l); color: var(--j-ink); }
body .aide-toc a.is-active {
    background: var(--j-sun-l);
    color: var(--j-ink);
    border-left-color: var(--j-sun);
}
body .aide-section > h2 { border-bottom: 2px dashed var(--j-line2); }
body .aide-content { color: var(--gray-700); font-weight: 500; }
body .aide-content a { color: var(--j-sky-d); }
body .aide-help-footer { background: var(--j-sun-l); border: 1px solid #F0DE9C; }

@media (max-width: 768px) {
    body .aide-hero::before { background: repeating-linear-gradient(180deg, transparent 0 35px, #EEF3F8 35px 36px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover, .btn-hero-test:hover, .btn-pricing-test:hover, .nav-cta:hover,
    .aide-header-cta:hover { transform: none; }
}