.manifest-section { background: #fff; padding: 6rem 0; }
.manifest-grid { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.manifest-visual { display: flex; justify-content: center; }
.manifest-text { text-align: left; }
.manifest-content { 
    max-width: 800px; 
}
.manifest-paragraph { 
    font-size: 1.3rem; 
    line-height: 1.7; 
    color: var(--totem-anthracite); 
    margin-bottom: 1.5rem; 
    font-weight: 400;
}
.manifest-paragraph:last-child { margin-bottom: 0; }

/* Styles simplifiés pour les paragraphes du manifest */
.manifest-paragraph {
    margin-bottom: 1.5rem;
}

/* Mise en valeur des mots clés */
.manifest-paragraph strong {
    color: var(--totem-copper);
    font-weight: 700;
    position: relative;
}

.manifest-paragraph strong::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--totem-copper);
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.manifest-paragraph strong::after {
    transform: scaleX(1);
}


@media (max-width: 960px) { 
    .manifest-grid { grid-template-columns: 1fr; } 
    .manifest-visual { order: 2; display: flex; justify-content: center; margin-top: 1.5rem; } 
    .manifest-text { order: 1; }
}

@media (max-width: 768px) { 
    .manifest-paragraph { font-size: 1.1rem; line-height: 1.6; }
    .manifest-content { padding: 0 1rem; }
}

.strapline-section { background: #fff; padding: 6rem 0; }
.strapline-inner { text-align: center; }
.strapline-title { font-family: 'Amiri', serif; font-weight: 700; font-size: 4.5rem; color: var(--totem-black); margin-bottom: 0.75rem; }
.strapline-title .accent { color: var(--totem-copper); }
.strapline-sub { font-size: 1.25rem; color: var(--totem-anthracite); max-width: 900px; margin: 0 auto 2rem; }
.strapline-visual { display: flex; justify-content: center; }
/* =============== TOTEM STYLES =============== */

/* Variables globales pour Totem */
:root {
    /* Palette Totem */
    --totem-black: #1C1C19;        /* noir Totem */
    --totem-sand: #F4EDE3;         /* sable clair */
    --totem-copper: #D59440;       /* copper boutons */
    --totem-copper-hover: #B87A2E; /* hover boutons */
    --totem-anthracite: #2E2E2E;   /* anthracite */
    --totem-stone: #A59E93;        /* gris pierre */
    --totem-ivory: #FAF9F6;        /* blanc cassé */

    /* Alias UI */
    --background-color: var(--totem-sand);
    --text-color: var(--totem-anthracite);
    --accent-color: var(--totem-copper);
    --border-muted: var(--totem-stone);
    --cta-color: var(--totem-copper);
    --cta-hover: var(--totem-copper-hover);
    --navbar-bg: #E6D7C1;          /* navbar */
    --sparkles: #BE8B59;           /* sparkles */

    --spacing-unit: 2rem;
    --container-width: 1200px;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
/* Garantie: tout [hidden] est invisible */
[hidden] { display: none !important; }

html { overflow-x: hidden; }

body.totem {
    background: var(--background-color);
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-unit); position: relative; z-index: 2; }

/* Reprend la même trame que zazoo-editor.css */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-bottom: 6rem; }
.hero-background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-container { position: relative; z-index: 3; text-align: center; }
.hero-content-wrapper { max-width: 800px; margin: 0 auto; }
.hero-text { margin-bottom: 3rem; }
.h1-hero { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.01em; text-transform: none; }
.p-hero { font-size: 1.25rem; line-height: 1.6; opacity: 0.95; }
.hero-buttons { display: flex; justify-content: center; gap: 1rem; }
.cta-button { background: var(--cta-color); color: var(--totem-sand); padding: 1rem 2rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.18); border: 1px solid rgba(0,0,0,0.05); cursor: pointer; display: inline-block; }
.cta-button:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.22); }
.cta-button.large { padding: 1.25rem 2.5rem; font-size: 1.25rem; }

.intro-section { padding: 4rem 0; background: white; }
.intro-container { text-align: center; }
.intro-content h2 { font-size: 2.25rem; font-weight: 700; color: var(--totem-anthracite); margin-bottom: 1.25rem; letter-spacing: 0.01em; text-transform: uppercase; }
.intro-content p { font-size: 1.2rem; color: var(--totem-anthracite); max-width: 720px; margin: 0 auto; }

.features-section { padding: 6rem 0; background: var(--totem-sand); }
.features-list { display: block; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
.feature-image { display: flex; justify-content: center; }
.feature-text h3 { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; color: var(--totem-black); }
.feature-text h3 .accent { color: var(--totem-copper); }
.feature-text p { color: var(--totem-stone); font-size: 1.1rem; line-height: 1.8; }
.feature-row--image-right .feature-image { order: 2; }
.feature-row--image-right .feature-text { order: 1; }
@media (max-width: 960px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--image-right .feature-image { order: 1; }
  .feature-row--image-right .feature-text { order: 2; }
}
/* Ensure features content doesn't overflow on mobile */
@media (max-width: 768px) {
  .features-section .feature-image .img-box { width: 100% !important; max-width: 100%; height: 220px !important; background-size: contain !important; background-position: center !important; }
  .features-section .feature-text { max-width: 100%; }
  .features-section .container { padding-left: var(--spacing-unit); padding-right: var(--spacing-unit); overflow: hidden; }
}
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.feature-card { background: var(--totem-ivory); padding: 2.25rem; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); transition: all 0.25s ease; border: 1px solid var(--border-muted); }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.feature-icon { font-size: 3rem; margin-bottom: 1rem; text-align: center; }
.feature-card h3 { font-size: 1.4rem; font-weight: 700; color: var(--totem-anthracite); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.feature-subtitle { font-size: 1.05rem; color: var(--totem-stone); margin-bottom: 1.25rem; font-weight: 500; }
.feature-list { list-style: none; }
.feature-list li { padding: 0.5rem 0; position: relative; padding-left: 1.25rem; color: var(--totem-anthracite); }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--totem-copper); font-weight: 700; }

.business-section { padding: 4rem 0; background: var(--totem-ivory); }
.business-container { text-align: center; }
.business-content h2 { font-size: 2.25rem; font-weight: 700; color: var(--totem-anthracite); margin-bottom: 2.5rem; text-transform: uppercase; }
.business-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; margin-top: 2rem; }
.business-feature { display: flex; align-items: flex-start; gap: 1.5rem; text-align: left; }
.business-icon { font-size: 2.5rem; flex-shrink: 0; }
.business-text h4 { font-size: 1.2rem; font-weight: 700; color: var(--totem-anthracite); margin-bottom: 0.75rem; text-transform: uppercase; }
.business-text ul { list-style: none; }
.business-text li { padding: 0.4rem 0; position: relative; padding-left: 1.2rem; color: var(--totem-stone); }
.business-text li::before { content: "•"; position: absolute; left: 0; color: var(--totem-copper); font-weight: 700; }




.final-cta-section { background: #fff; }
.final-cta { position: relative; padding: 8rem 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.final-cta-background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.final-cta-content-wrapper { position: relative; z-index: 3; text-align: center; color: white; max-width: 720px; }
.final-cta-text h2 { font-size: 3rem; font-weight: 800; margin-bottom: 1.75rem; text-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.final-cta-text p { font-size: 1.3rem; margin-bottom: 2.25rem; opacity: 0.95; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.final-cta-buttons { display: flex; justify-content: center; gap: 1rem; }
.final-cta-inner { text-align: center; padding: 5rem 0; }
.final-cta-inner h2 { font-size: 4.5rem; margin-bottom: 1.25rem; }
.final-cta-inner { position: relative; }
.cta-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.final-cta-inner h2, .final-cta-inner .cta-button { position: relative; z-index: 1; }
.cta-sparkle { position: absolute; background-repeat: no-repeat; background-size: contain; display: block; will-change: transform; }
.cta-sparkle--left { left: 12%; top: 62%; width: 140px; height: 140px; background-image: url('../images/sparkle_01.png'); transform: translate(-50%, -50%); }
.cta-sparkle--right { right: 12%; top: 38%; width: 130px; height: 130px; background-image: url('../images/sparkle_02.png'); transform: translate(50%, -50%); }
.cta-sparkle--star { right: 18%; bottom: 14%; width: 80px; height: 80px; background-image: url('../images/star.png'); }
@media (max-width: 960px) {
  .cta-sparkle--left { left: 8%; top: 72%; width: 90px; height: 90px; }
  .cta-sparkle--right { right: 8%; top: 32%; width: 80px; height: 80px; }
  .cta-sparkle--star { right: 12%; bottom: 8%; width: 48px; height: 48px; }
}

.footer { background: var(--totem-black); color: var(--totem-ivory); padding: 2rem 0 1.5rem; }
.footer-content { display: flex; flex-direction: column; gap: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.footer-link { color: var(--totem-ivory); text-decoration: none; font-size: 0.8rem; opacity: 0.8; transition: opacity 0.25s ease; }
.footer-link:hover { opacity: 1; }
.footer-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-lang-switcher { display: flex; align-items: center; }
.footer-copyright { flex: 1; }
.footer-copyright p { opacity: 0.7; margin: 0; font-size: 0.75rem; }
.lang-select-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.lang-globe-icon { width: 16px; height: 16px; color: var(--totem-ivory); opacity: 0.8; flex-shrink: 0; }
.lang-select-container { position: relative; display: inline-block; }
.lang-select { background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: var(--totem-ivory); font-size: 0.8rem; padding: 0.4rem 1.75rem 0.4rem 0.6rem; cursor: pointer; appearance: none; opacity: 0.8; transition: opacity 0.2s ease, border-color 0.2s ease; font-family: inherit; min-width: 100px; }
.lang-select-container::after { content: ''; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--totem-ivory); opacity: 0.6; pointer-events: none; z-index: 1; }
.lang-select:hover { opacity: 1; border-color: rgba(255,255,255,0.3); }
.lang-select:focus { outline: 2px solid var(--totem-copper); outline-offset: 2px; opacity: 1; }
.lang-select option { background: var(--totem-black); color: var(--totem-ivory); }
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; align-items: center; gap: 1rem; }
  .footer-copyright { text-align: center; }
}

/* Responsive */
@media (max-width: 768px) { .h1-hero { font-size: 4rem; line-height: 1.2; max-width: 22ch; } .p-hero, .hero-subtitle { font-size: 1rem; } .hero-buttons { flex-direction: column; align-items: center; } .cta-button { width: 100%; max-width: 300px; } .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .feature-card { padding: 2rem; } .business-features { grid-template-columns: 1fr; gap: 2rem; } .business-feature { flex-direction: column; text-align: center; } .testimonials-grid { grid-template-columns: 1fr; } .final-cta-text h2 { font-size: 2rem; } .final-cta-inner h2 { font-size: 3rem; } .footer-links { gap: 1rem; } }
@media (max-width: 480px) { .container { padding: 0 1rem; } .h1-hero { font-size: 4rem; } .feature-card { padding: 1.5rem; } .business-feature { gap: 1rem; } }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
.feature-card, .business-feature, .why-point, .testimonial { animation: fadeInUp 0.6s ease-out; }

/* Scroll reveal (IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-zoom { opacity: 0; transform: scale(.96); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal-zoom.is-visible { opacity: 1; transform: scale(1); }

/* Sections de transition obliques dédiées */
.transition-section {
    position: relative;
    height: 80px;
    overflow: hidden;
    z-index: 1;
    margin-top: -40px; /* Chevauchement avec la section précédente */
    margin-bottom: -40px; /* Chevauchement avec la section suivante */
}

.transition-section--sand-to-white {
    background: #fff;
}

.transition-section--sand-to-white::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: var(--totem-sand);
    transform: skewY(-2deg);
    transform-origin: top left;
}

.transition-section--white-to-sand {
    background: var(--totem-sand);
}

.transition-section--white-to-sand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
    transform: skewY(-2deg);
    transform-origin: top left;
}

/* Suppression des anciennes classes d'angles */
.section--angled { position: relative; }
.section--angled-bottom { position: relative; }

/* Responsive pour les sections de transition */
@media (max-width: 768px) {
    .transition-section {
        height: 60px;
        margin-top: -30px;
        margin-bottom: -30px;
    }
}

@media (max-width: 480px) {
    .transition-section {
        height: 40px;
        margin-top: -20px;
        margin-bottom: -20px;
    }
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }
.cta-button:focus, .footer-link:focus { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
@media (prefers-contrast: more) { .feature-card, .business-feature, .why-point, .testimonial { border: 2px solid var(--editor-dark); } }


/* ================= Styles LP Totem (palette officielle) ================ */
/* Rappel: CTA cuivre, textes anthracite, fonds sable/ivoire/noir */

/* Hero en split, fond clair */
.hero--light { background: var(--totem-ivory); color: var(--totem-anthracite); }
.hero--light .hero-container { color: var(--totem-anthracite); }
.hero--light .h1-hero { color: var(--totem-anthracite); }
.hero--light .p-hero { color: var(--totem-anthracite); }
.hero--center { background: var(--totem-sand); }
.hero--center .h1-hero { color: var(--totem-anthracite); }
.hero--center .hero-buttons { margin-top: 0.5rem; }
.hero--center .hero-container { padding-top: 160px; }
.hero-text { text-align: left; max-width: 820px; margin: 0 auto 0 0; }
.hero-buttons { justify-content: flex-start; }
.hero-visuals { margin-top: 4.5rem; display: flex; align-items: flex-end; justify-content: flex-start; gap: 2rem; position: relative; }
.hero-subtitle { display: block; font-size: 1.5rem; color: var(--totem-stone); margin-bottom: 1.5rem; padding: 0.5rem 0; max-width: 60ch; }
.hero-visuals .hero-mockup { box-shadow: none; border: 0; }
.hero-visuals .hero-person { position: relative; bottom: -8px; }
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.sparkles { position: absolute; width: 120px; height: 120px; z-index: 1; background-size: contain; background-repeat: no-repeat; }
.sparkles--left { left: 8%; top: 46%; background-image: url('../images/sparkle_01.png'); }
.sparkles--right { right: 10%; top: 34%; background-image: url('../images/sparkle_02.png'); }
.sparkles--star { right: 26%; top: 54%; width: 58px; height: 58px; background-image: url('../images/star.png'); }
@media (max-width: 1024px) {
    .hero-visuals { flex-direction: column; align-items: center; gap: 1rem; }
    .sparkles--left { left: 6%; top: 22%; }
    .sparkles--right { right: 6%; top: 18%; }
}
@media (max-width: 768px) {
  /* Align hero mockup to the right, cropping left side on mobile */
  .hero-visuals .hero-mockup { background-position: right center !important; background-size: cover !important; width: 100% !important; max-width: 100%; height: 360px !important; }
  /* Person above mockup and smaller */
  .hero-visuals .hero-person { order: 1; width: 200px !important; height: 200px !important; background-size: contain !important; }
  .hero-visuals .hero-mockup { order: 2; }
  .h1-hero { font-size: 2.4rem; }
  .hero--center .hero-container { padding-top: 120px; }
}
.hero-container.hero-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-col--text { display: flex; flex-direction: column; gap: 1rem; }
.hero-logo img { height: 56px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); }
.h1-hero { text-transform: none; text-shadow: none; letter-spacing: -0.01em; }
.p-hero { text-shadow: none; max-width: 60ch; }

/* Desktop h1-hero size */
@media (min-width: 769px) {
  .h1-hero { font-size: 4rem; }
}
.hero-buttons { justify-content: flex-start; }
.hero-col--visual .mockup-editor img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); }

/* CTAs variantes (sage/bleu) */
.cta-primary { background: var(--totem-copper); }
.cta-primary:hover { background: var(--totem-copper-hover); }
.waitlist-confirmation { 
  display: inline-block; 
  font-weight: 600; 
  color: #4F772D; 
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.waitlist-input { display: block; width: 100%; max-width: 340px; margin: 0 0 .75rem; padding: .75rem 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font-size: 1rem; }
.hero .waitlist-input { margin-left: 0; }
.final-cta-inner .waitlist-input { margin-left: auto; margin-right: auto; }
.waitlist-input--error { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.cta-secondary { background: transparent; color: var(--totem-copper); border: 1px solid var(--totem-copper); }
.cta-secondary:hover { background: var(--totem-copper); color: var(--totem-sand); }


/* Final CTA : blur léger sur la vidéo */
.final-cta.final-cta--blur::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(2px); z-index: 2; }

/* Responsive ajouts */
@media (max-width: 1024px) { .hero-container.hero-split { grid-template-columns: 1fr; } .hero-col--visual { order: 2; } .hero-col--text { order: 1; } }
@media (max-width: 768px) { .hero-buttons { justify-content: center; } .hero .cta-button { text-align: center; } .problem-grid { grid-template-columns: 1fr; } .diff-items { grid-template-columns: 1fr; } }

/* Navbar sticky */
.navbar { width: 100%; background: rgba(244, 237, 227, 0.02); border-bottom: 1px solid rgba(0,0,0,0.06); position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; transition: width .25s ease, top .25s ease, background .25s ease, box-shadow .25s ease, border-radius .25s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.navbar--sticky { backdrop-filter: saturate(1.1) blur(6px); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; transition: height .25s ease; padding: 0 1.5rem; }
.navbar-brand, .navbar-links { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.navbar-brand { display: flex; align-items: center; text-decoration: none; }

/* Mode compact flottant après scroll */
.navbar.navbar--floating {
  top: 16px;
  width: min(1240px, calc(100% - 32px));
  background: rgba(244, 237, 227, 0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.navbar.navbar--floating .navbar-inner { height: 64px; padding: 0 1.5rem; }
.navbar.navbar--floating .navbar-brand { transform: translateX(8px); }
.navbar.navbar--floating .navbar-links { transform: translateX(-8px); }
.navbar-links { display: flex; gap: 1.25rem; align-items: center; }
.navbar-link { color: var(--totem-anthracite); text-decoration: none; font-weight: 600; font-size: 1.1rem; opacity: 0.8; }
.navbar-link:hover { opacity: 1; }
.cta-button.small { padding: 0.6rem 1rem; font-size: 0.95rem; }
.cta-button.wide { display: block; text-align: center; }

/* Lang switcher */
.lang-switch-btn { color: var(--totem-anthracite); text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: 0.6; transition: opacity 0.2s ease; }
.lang-switch-btn:hover { opacity: 1; }
.lang-switch-btn.is-active { opacity: 1; color: var(--totem-copper); font-weight: 700; }
.lang-switch-separator { color: var(--totem-stone); opacity: 0.5; }

/* Mobile navbar */
.navbar-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--totem-anthracite); position: relative; }
.navbar-toggle svg { width: 24px; height: 24px; display: block; }
.navbar-toggle *:not(svg) { display: none !important; }
@media (max-width: 768px) {
  .navbar-inner { height: 64px; padding: 0 1rem; }
  /* Mobile navbar full-bleed at the very top */
  .navbar { left: 0; transform: none; width: 100% !important; top: 0; border-radius: 0; box-shadow: none; }
  .navbar.navbar--floating { top: 0; width: 100% !important; border-radius: 0; }
  .navbar-links { position: fixed; top: 64px; left: 0; right: 0; background: #F4EDE3; display: none; flex-direction: column; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .navbar-links.is-open { display: flex; background: #F4EDE3 !important; opacity: 1 !important; }
  .navbar-links .cta-button { width: 100%; text-align: center; }
  .navbar-toggle { display: inline-flex; }
  
  /* Titres longs en mobile */
  .h1-hero { 
    font-size: 3rem !important; 
    line-height: 1.2 !important; 
    word-wrap: break-word; 
    hyphens: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Override petits écrans */
  .h1-hero { font-size: 3rem !important; }
}

/* Utilitaire image box placeholder */
.img-box { background-color: transparent; border: 0; border-radius: 0; }

/* Ombre pour les mockups des features */
.features-section .img-box {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 12px;
    overflow: hidden;
}

/* Titre marque au hero avec Amiri */
.brand-title { font-family: 'Amiri', serif; font-weight: 700; font-size: 3rem; letter-spacing: 0.08em; color: var(--totem-black); margin-bottom: 0.25rem; }
/* Pricing */
.pricing-section { background: var(--totem-ivory); padding: 6rem 0 6rem; }
.billing-toggle { display: inline-flex; background: #EFE8DE; border-radius: 24px; padding: 6px; gap: 6px; margin: 1rem auto 2rem; position: relative; left: 50%; transform: translateX(-50%); }
.toggle-btn { border: 0; background: transparent; padding: 0.6rem 1.25rem; border-radius: 18px; font-weight: 700; color: var(--totem-anthracite); cursor: pointer; }
.toggle-btn.active { background: #E0D3C2; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: stretch; }
.pricing-card { background: #EFE8DE; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; align-items: stretch; }
.pricing-card.pro { background: #EFE8DE; }
.plan-title { font-family: 'Amiri', serif; font-size: 1.75rem; margin: 0 0 .25rem; }
.plan-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.plan-badge { color: var(--sparkles); font-size: 1.25rem; }
.plan-sub { color: var(--totem-stone); margin: 0 0 1rem; height: 5rem; display: flex; align-items: flex-start; }
.price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.price .amount { font-weight: 800; font-size: 2rem; }
.price .per { color: var(--totem-anthracite); }
.plan-features { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; flex: 1; align-content: start; }
.plan-features ul { list-style: none; padding: 0; margin: 0; }
.pricing-card .cta-button.wide { margin: 1.5rem 0; }
.plan-features li { line-height: 1.6; padding-left: 1.5rem; position: relative; }
.plan-features li::before { content: "✓"; color: var(--totem-stone); font-weight: 400; position: absolute; left: 0; opacity: 0.6; }
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; } }

/* Audience (manifeste) avec visuel et 4 boîtes hover) */
.audience-section { background: var(--totem-sand); padding: 4rem 0; }
.audience-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.audience-title h2 { text-align: center; font-family: 'Amiri', serif; font-size: 2.5rem; font-weight: 700; color: var(--totem-black); margin: 0; }
.audience-title .accent { color: #4F772D; }
.audience-title .star { display: inline-block; width: 60px; height: 60px; background: url('../images/star.png') center/contain no-repeat; justify-self: center; }
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: start; }
.audience-visual { display: flex; justify-content: center; align-items: end; }
.audience-card { perspective: 1000px; }
.audience-card .card-inner { position: relative; width: 100%; height: 100%; min-height: 150px; border-radius: 16px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.audience-card:hover .card-inner { transform: rotateY(180deg); box-shadow: 0 14px 28px rgba(0,0,0,0.14); }
.audience-card.is-flipped .card-inner { transform: rotateY(180deg); box-shadow: 0 14px 28px rgba(0,0,0,0.14); }
.audience-card .card-face { position: absolute; inset: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 1.5rem; backface-visibility: hidden; }
.audience-card .card-front { background: var(--totem-black); color: #fff; }
.audience-card .card-back { background: #fff; color: var(--totem-anthracite); transform: rotateY(180deg); text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); }
.audience-card h3 { font-family: 'Amiri', serif; font-size: 1.5rem; margin: 0; }
.audience-card p { margin: 0; }
@media (max-width: 960px) { .audience-grid { grid-template-columns: 1fr; } .audience-visual { order: -1; } }

/* ================== My Totem ================== */
.mytotem-hero { background: var(--totem-ivory); padding: 8rem 0 2rem; }
.mytotem-hero .h1-hero { margin-bottom: .75rem; }
.note-soft { color: var(--totem-stone); font-size: .95rem; margin-top: .5rem; }
.privacy-note { color: var(--totem-stone); font-size: 0.9rem; text-align: center; margin: 1rem 0 0; line-height: 1.4; opacity: 0.8; }

.mytotem-chat-section { background: var(--totem-ivory); padding: 2rem 0 4rem; }
.chat-card { background: var(--totem-ivory); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 1.25rem; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.chat-intro { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.chat-avatar { font-size: 1.6rem; line-height: 1; }
.chat-intro-text h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.chat-input { display: grid; gap: .75rem; }
.chat-textarea { width: 100%; min-height: 220px; padding: 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font: inherit; background: #fff; }
.chat-loading { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1rem; border: 1px dashed rgba(0,0,0,0.12); border-radius: 10px; background: #fff; min-height: 200px; }
.spinner { width: 20px; height: 20px; border: 3px solid rgba(0,0,0,0.12); border-top-color: var(--totem-copper); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-text { color: var(--totem-anthracite); font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }
.chat-output { margin-top: 1.25rem; display: grid; gap: 1rem; }
.output-block { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 1rem; }
.style-summary { white-space: pre-line; color: var(--totem-anthracite); font-size: .95rem; }
.prompt-textarea { width: 100%; padding: 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font: inherit; background: #fff; }
.prompt-wrapper { position: relative; }
.copy-icon { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--totem-anthracite); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: background .2s ease, transform .1s ease; }
.copy-icon:hover { background: #fff; transform: translateY(-1px); }
.copy-icon.is-copied { color: var(--totem-copper); }
.prompt-view { width: 100%; padding: 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; background: #fff; color: var(--totem-anthracite); font-size: .95rem; }
.prompt-view h1, .prompt-view h2, .prompt-view h3 { margin: .5rem 0 .25rem; font-weight: 700; }
.prompt-view h1 { font-size: 1.4rem; }
.prompt-view h2 { font-size: 1.2rem; }
.prompt-view h3 { font-size: 1.05rem; }
.prompt-view p { margin: .5rem 0; }
.prompt-view ul { margin: .5rem 0 .5rem 1.2rem; }
.prompt-view li { margin: .25rem 0; }
.prompt-view hr { border: 0; height: 1px; background: rgba(0,0,0,0.12); margin: .75rem 0; }

/* Visibilité par défaut avant résultat */
.chat-output { display: none; }
.prompt-cta { display: none; }

/* Après réception du résultat */
body.has-result .chat-output { display: block; }
body.has-result .prompt-cta { display: block; }
body.has-result .mytotem-hero { display: none; }

/* Styles pour l'écran de restitution */
.result-title { text-align: center; font-size: 2.5rem; font-weight: 800; color: var(--totem-anthracite); margin-bottom: 1.5rem; }
.result-intro { text-align: center; font-size: 1.1rem; color: var(--totem-anthracite); margin-bottom: 1rem; }
.result-note { text-align: center; font-size: 0.95rem; color: var(--totem-stone); margin-bottom: 2rem; }

.indicators { margin: 2rem 0; }
.confidence-indicator { margin-bottom: 2rem; }
.confidence-indicator label { display: block; font-weight: 600; color: var(--totem-anthracite); margin-bottom: 0.5rem; }
.confidence-bar { position: relative; background: rgba(0,0,0,0.1); border-radius: 20px; height: 8px; margin-bottom: 0.5rem; }
.confidence-fill { background: var(--totem-copper); height: 100%; border-radius: 20px; transition: width 0.3s ease; }
.confidence-value { position: absolute; right: 0; top: -25px; font-weight: 700; color: var(--totem-copper); }
.confidence-note { font-size: 0.9rem; color: var(--totem-stone); margin: 0; }

.style-indicators { display: grid; gap: 1.5rem; }
.indicator label { display: block; font-weight: 600; color: var(--totem-anthracite); margin-bottom: 0.75rem; text-align: center; }
.slider-container { display: flex; align-items: center; gap: 1rem; }
.slider-label { font-size: 0.9rem; color: var(--totem-stone); width: 130px; text-align: center; }
.slider { flex: 1; position: relative; background: rgba(0,0,0,0.1); border-radius: 20px; height: 6px; }
.slider-fill { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 12px; height: 12px; background: var(--totem-copper); border-radius: 50%; transition: left 0.3s ease; }

.email-cta { margin-top: 3rem; padding: 2rem; background: var(--totem-ivory); border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); text-align: center; }
.email-cta h3 { font-size: 1.5rem; font-weight: 700; color: var(--totem-anthracite); margin-bottom: 1rem; }
.email-cta p { color: var(--totem-anthracite); margin-bottom: 1.5rem; }
.email-form { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-bottom: 1rem; }
.email-input { padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font-size: 1rem; min-width: 250px; }
.email-note { font-size: 0.9rem; color: var(--totem-stone); margin: 0; opacity: 0.7; }

@media (max-width: 768px) {
  .result-title { font-size: 2rem; }
  .email-form { flex-direction: column; }
  .email-input { min-width: 100%; }
  .slider-container { flex-direction: column; gap: 0.5rem; align-items: stretch; }
  .slider-label { min-width: auto; text-align: center; }
}
.output-actions { margin-top: .5rem; }
.prompt-cta { text-align: center; margin-top: 1.5rem; }

.ethics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ethic-card { background: var(--totem-ivory); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 1.25rem; }
.ethic-card h3 { margin-top: 0; }
.ethic-card ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.ethic-card li { margin: .35rem 0; }

/* a11y utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }

@media (max-width: 768px) {
  .ethics-grid { grid-template-columns: 1fr; }
}

/* Comparison Table Styles */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.comparison-table thead {
    background: var(--totem-copper);
    color: var(--totem-sand);
}

.comparison-table th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.95rem;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--totem-stone);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table td {
    padding: 1rem 0.75rem;
    font-size: 0.95rem;
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--totem-black);
    min-width: 250px;
    max-width: 350px;
    line-height: 1.4;
}

.comparison-table td:not(:first-child) {
    text-align: center;
}

.check-mark {
    color: var(--totem-stone);
    font-weight: 600;
    font-size: 1rem;
}

.dash-mark {
    color: var(--totem-stone);
    font-weight: 400;
    font-size: 1rem;
}

.comparison-notes {
    padding: 1.5rem;
    background: var(--totem-ivory);
    border: 1px solid var(--totem-stone);
    border-radius: 12px;
    margin-top: 1.5rem;
}

.comparison-notes p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--totem-anthracite);
}

.comparison-notes p:last-child {
    margin-bottom: 0;
}

.comparison-notes strong {
    color: var(--totem-black);
    font-weight: 600;
}

@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.85rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .comparison-table td:first-child {
        min-width: 150px;
        max-width: 200px;
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    .comparison-notes {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .comparison-notes p {
        font-size: 0.9rem;
    }
}

/* CTA Features */
.cta-features {
    margin-top: 1.5rem;
    color: var(--totem-anthracite);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .cta-features {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
}

/* ================= Document landing (new /totem/new) ================= */

.doc-page {
    background: #FAF9F6;
    color: #0E0E0E;
}

.doc-hero,
.doc-section {
    padding: 120px 0 0;
}

.doc-section--highlight {
    padding-top: 120px;
}

.doc-section--final {
    padding-bottom: 160px;
}

.doc-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1.5rem 0;
}

.doc-hero-header {
    margin-bottom: 1.5rem;
}

.doc-logo {
    font-family: 'Amiri', serif;
    font-size: 1.4rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.doc-kicker {
    margin-top: .25rem;
    font-size: .95rem;
    color: var(--totem-stone);
}

.doc-title {
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 1.5rem 0 1.25rem;
}

.doc-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #302d27;
    margin-bottom: 1.75rem;
}

.doc-hero-cta {
    margin-top: 0.5rem;
}

.doc-section-title {
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6b6359;
    margin-bottom: 1.25rem;
}

.doc-section p {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1b1814;
    margin-bottom: 1rem;
}

.doc-summary {
    margin-top: 1.25rem;
    font-weight: 500;
}

.doc-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.doc-steps li {
    margin-bottom: 1.5rem;
}

.doc-steps h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.doc-steps p {
    margin: 0;
}

.doc-section-intro {
    margin-bottom: 1.75rem;
}

.doc-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.doc-comparison-column h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.doc-comparison-column ul {
    list-style: disc;
    padding-left: 1.3rem;
    margin: 0;
}

.doc-comparison-column li {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 0.4rem;
}

.doc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.doc-pricing-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--totem-stone);
    padding: 1.75rem 1.5rem;
}

.doc-pricing-card--highlight {
    border-color: var(--totem-copper);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.doc-pricing-card h3 {
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.doc-price {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.doc-pricing-card ul {
    list-style: disc;
    padding-left: 1.3rem;
    margin: 0 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.7;
}

.doc-final-phrase {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 1.75rem;
}

.doc-final-cta {
    margin-bottom: 0;
}

.doc-divider {
    max-width: 680px;
    margin: 80px auto 0;
    padding: 0 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #A59E93;
    text-align: center;
}

/* Live demo editor */
.live-demo {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--totem-stone);
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}

.live-demo-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.live-demo-tab {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b6359;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

.live-demo-tab--active {
    background: #FAF9F6;
    color: #1b1814;
}

.live-demo-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.live-demo-input {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.9rem 0.9rem;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.98rem;
    line-height: 1.7;
    background: #FFFEFB;
}

.live-demo-input:focus {
    outline: 2px solid var(--totem-copper);
    outline-offset: 2px;
}

.live-demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}

.live-demo-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: #6b6359;
}

.live-word-count {
    font-weight: 500;
}

.live-hint {
    opacity: 0.85;
}

.live-transform-button {
    white-space: nowrap;
}

.live-transform-button[disabled] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.live-demo-result {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.live-result-kicker {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #7c7469;
    margin-bottom: 0.75rem;
}

.live-result-article h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.live-result-article p {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.live-result-cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.live-demo-loading {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #6b6359;
}

@media (max-width: 768px) {
    .doc-hero,
    .doc-section {
        padding-top: 80px;
    }

    .doc-title {
        font-size: 2.2rem;
    }

    .doc-container {
        padding: 0 1.25rem 0;
    }

    .doc-comparison {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .doc-pricing-grid {
        grid-template-columns: 1fr;
    }

    .live-demo-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-transform-button {
        width: 100%;
        text-align: center;
    }
}