/* Hotelium — marque (version E, octobre 2026)
   ------------------------------------------------------------------
   Chargée en DERNIER sur chaque page de vitrine/. Elle ne remplace pas les
   feuilles existantes : elle redéfinit leurs jetons et neutralise ce qui
   faisait « site généré » (dégradés, verre dépoli, apparitions au défilement,
   étiquettes en capitales vertes, titres bicolores).

   Principe : noir, blanc, gris chauds. La chaleur vient de la photo et de la
   typographie, pas de la couleur. La couleur est réservée à ce qui porte un
   sens dans les données (notes A→E, séries de graphiques, alertes).

   Les jetons sont posés sur `html:root` : sa spécificité (0,1,1) l'emporte
   sur les `:root` (0,1,0) des autres feuilles et des blocs <style> des pages,
   quel que soit l'ordre de chargement. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

html:root {
  /* ---------- Marque ---------- */
  --m-ff: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --m-ink: #111111;
  --m-ink-2: #444444;
  --m-ink-3: #666666;     /* 5.7:1 sur blanc, 5.2:1 sur --m-bg-alt */
  --m-line: #EAEAEA;
  --m-line-2: #D6D6D3;
  --m-bg: #FFFFFF;
  --m-bg-alt: #F2F2F0;
  --m-bg-soft: #F7F7F5;
  --m-dark: #111111;
  --m-alert: #9A3412;     /* la seule couleur hors données : une anomalie */

  /* ---------- hotelium.css (pages publiques) ---------- */
  --n900: #111111; --n800: #1C1C1C; --n700: #2A2A2A; --n600: #111111;
  --n500: #444444; --n400: #666666; --n300: #9A9A9A; --n200: #D6D6D3;
  --n100: #EAEAEA; --n50: #F7F7F5;
  --v800: #111111; --v700: #111111; --v600: #333333; --v500: #FFFFFF;
  --v300: #D6D6D3; --v100: #F2F2F0; --v50: #F7F7F5;
  --am700: #111111; --am600: #333333; --am100: #F2F2F0;
  --sk700: #111111; --sk600: #333333; --sk300: #D6D6D3; --sk100: #F2F2F0;
  --ink: #111111; --ink2: #444444; --ink3: #666666;
  --line: #EAEAEA; --line2: #D6D6D3;
  --bg-alt: #F2F2F0; --bg-dark: #111111;
  --brand: #111111; --brand-deep: #111111;
  --accent: #111111; --accent-bright: #FFFFFF; --ring: #444444;
  --ff: var(--m-ff);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --sh-md: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  --sh-lg: 0 1px 2px rgba(0, 0, 0, .06), 0 20px 50px rgba(0, 0, 0, .08);

  /* ---------- site-shell.css (en-tête et pied communs) ---------- */
  --ss-navy: #111111; --ss-navy-soft: #2A2A2A; --ss-blue: #111111;
  --ss-green: #111111; --ss-green-soft: #F2F2F0;
  --ss-ink: #111111; --ss-muted: #444444; --ss-line: #EAEAEA; --ss-bg: #F2F2F0;
  --ss-font: var(--m-ff);

  /* ---------- platform.css / audit_dashboard.css (espace client) ----------
     Les notes A→E, la palette catégorielle et les statuts ne bougent pas :
     là, la couleur porte un jugement ou distingue des séries. */
  --bg-page: #F7F7F5; --bg-card: #FFFFFF; --bg-sidebar: #FFFFFF;
  --bg-soft: #FAFAF9; --bg-tint: #F0F0EE;
  --border: #EAEAEA; --border-soft: #F0F0EE; --border-tint: #F0F0EE; --border-strong: #D6D6D3;
  --ink-2: #444444; --ink-3: #666666; --ink-4: #6B6B6B;
  --navy-900: #111111; --navy-800: #1C1C1C; --navy-700: #222222; --navy-600: #444444;
  --lime: #E5E5E2; --lime-soft: #F0F0EE;   /* accent clair : sur fond sombre surtout */
  --ivoire-0: #F7F7F5; --ivoire-1: #FFFFFF; --ivoire-2: #FAFAF9; --ivoire-3: #F0F0EE;
  --voile-canopee: #F0F0EE;
  --encre: #111111; --encre-2: #444444; --encre-3: #666666; --encre-4: #6B6B6B;
  --canopee-900: #111111; --canopee-800: #1C1C1C; --canopee-700: #222222; --canopee-600: #444444;
  --filet: #EAEAEA; --filet-soft: #F0F0EE; --filet-fort: #D6D6D3;
  --neutral-bg: #F0F0EE; --neutral-fg: #444444;
  --font-display: var(--m-ff); --font-ui: var(--m-ff); --font-body: var(--m-ff);
  --font-data: var(--m-mono); --ff-mono: var(--m-mono); --mono: var(--m-mono);

  /* ---------- Jetons propres à certaines pages (accueil, guides) ---------- */
  --g0: #F7F7F5; --g1: #F2F2F0; --g2: #EAEAEA; --g3: #D6D6D3; --g4: #9A9A9A;
  --g5: #444444; --g6: #111111; --g7: #2A2A2A; --g8: #1C1C1C; --g9: #111111;
  --a1: #F2F2F0; --a6: #111111; --b1: #F2F2F0; --b6: #111111;
  --sage: #F2F2F0; --forest: #1C1C1C; --forest-2: #1C1C1C; --lime-deep: #444444;
  --green-900: #111111; --green-800: #1C1C1C; --green-700: #222222; --green-600: #444444;
  --primary: #111111; --primary-hover: #333333; --primary-soft: #F2F2F0;
  --accent-hover: #333333; --accent-soft: #F2F2F0;
  --amber: #111111; --amber-soft: #F2F2F0; --amber-border: #D6D6D3;
  --blue: #111111; --blue-soft: #F2F2F0; --navy: #111111; --navy-soft: #2A2A2A;
  --r-card: 8px; --r-btn: 4px; --r-badge: 4px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, .07);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, .12);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .12);
}

/* Sur fond sombre, l'accent devient blanc ; ailleurs --lime est un gris clair. */
.fv-dark, .bg-dark, .section-dark, .quote-section, .cta-band, .footer, .site-shell-footer,
.feature-section.bg-dark, .card-dark, .price-card.premium, .price-card.essential { --lime: #FFFFFF; --v500: #FFFFFF; --v300: #D6D6D3; }

/* ---------- Typographie ---------- */
html body { font-family: var(--m-ff); color: var(--m-ink); }
h1, h2, h3 { letter-spacing: -0.02em; }
code, kbd, samp, pre { font-family: var(--m-mono); }

/* ---------- Ce qui faisait « généré » ---------- */

/* Le contenu est là dès le chargement : pas d'apparition au défilement. */
.reveal, .js .reveal,
[class*="reveal-delay"] {
  opacity: 1 !important; transform: none !important;
  animation: none !important; transition: none !important;
}

/* Pas de texte en dégradé, pas de mots « surlignés » d'une autre couleur. */
.text-gradient, .text-gradient-light {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
h1 em, h2 em, .feat-h2 em { font-style: normal; color: inherit; }

/* Les petites pastilles devant les étiquettes de section. */
.section-label-dot, .feat-label-dot, .announce-dot, .hero-tag-dot, .eyebrow-sep { display: none !important; }
.section-label, .feat-label, .eyebrow, .hero-tag {
  text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 500 !important; color: var(--m-ink-3) !important;
  background: none !important; border: 0 !important; padding: 0 !important;
}

/* Barres de navigation : opaques, sans verre dépoli. */
.nav, .site-shell-nav {
  background: #FFFFFF !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.nav.is-scrolled, .site-shell-nav.is-scrolled { box-shadow: 0 1px 0 var(--m-line) !important; }
.nav-menu a.active, .site-shell-menu a.active, .site-shell-menu a[aria-current="page"] {
  background: transparent !important; color: var(--m-ink) !important;
  font-weight: 600 !important; text-decoration: underline; text-underline-offset: 6px;
}
.nav-menu a:hover, .site-shell-menu a:hover { background: var(--m-bg-alt) !important; color: var(--m-ink) !important; }
.nav-logo svg, .site-shell-logo svg { color: var(--m-ink) !important; }

/* Bandeau d'annonce : discret. */
.announce, .site-shell-announcement {
  background: var(--m-bg-alt) !important; color: var(--m-ink) !important;
  font-weight: 500 !important; border-bottom: 1px solid var(--m-line);
}
.announce button, .announce a, .site-shell-announcement a { color: var(--m-ink) !important; }

/* ---------- Boutons : noir plein, contour, lien. Pilule sur le site public. ---------- */
.btn, .nav-cta, .nav-account, .site-shell-menu .site-shell-account, .site-shell-menu .site-shell-cta {
  border-radius: 999px !important;
}
.btn-primary, .btn-dark, .btn-accent, .btn-green, .btn-amber, .nav-cta, .site-shell-menu .site-shell-cta {
  background: var(--m-ink) !important; color: #FFFFFF !important;
  border-color: var(--m-ink) !important; box-shadow: none !important;
}
.btn-primary:hover, .btn-dark:hover, .btn-accent:hover, .btn-green:hover, .btn-amber:hover,
.nav-cta:hover, .site-shell-menu .site-shell-cta:hover {
  background: #333333 !important; color: #FFFFFF !important; transform: none !important;
}
.btn-outline, .nav-account, .site-shell-menu .site-shell-account {
  background: transparent !important; border: 1px solid var(--m-ink) !important; color: var(--m-ink) !important;
}
.btn-white { background: #FFFFFF !important; color: var(--m-ink) !important; }
.btn-outline-light { border-color: rgba(255, 255, 255, .6) !important; color: #FFFFFF !important; }

/* ---------- Composants ---------- */
.badge, .badge-accent, .badge-amber, .badge-sky {
  background: var(--m-bg-alt) !important; color: var(--m-ink) !important;
}
.card-icon, .card-icon-accent { background: var(--m-bg-alt) !important; color: var(--m-ink) !important; }
.check { background: var(--m-ink) !important; color: #FFFFFF !important; }
.card-hover:hover { transform: none !important; }
.cta-band { background: var(--m-dark) !important; }
.cta-band::before { display: none !important; }
.section-dark { background: var(--m-dark) !important; }
.footer, .site-shell-footer { background: var(--m-dark) !important; }
.site-shell-footer-logo svg, .footer-brand .brand-name svg { color: #FFFFFF !important; }
.site-shell-footer-contact, .footer-cta { color: #FFFFFF !important; }

/* Pastilles et barres qui reposaient sur le vert. */
.savings-badge { background: var(--m-ink) !important; color: #FFFFFF !important; }
.decret-bar-done, .progress > span { background: var(--m-ink) !important; }

/* ---------- En-tête de page : une photo d'hôtel, le texte à côté ----------
   Même gabarit sur l'accueil et sur les pages principales. Le contenu d'origine
   de chaque en-tête est conservé dans .m-hero-text ; les règles ci-dessous
   annulent le centrage, les fonds sombres et les halos de l'ancien design. */
.m-hero { display: flex; flex-wrap: wrap; min-height: min(640px, calc(100vh - 110px));
  background: #FFFFFF; color: var(--m-ink); border-bottom: 1px solid var(--m-line);
  padding: 0; text-align: left; position: relative; overflow: hidden; }
.m-hero::before, .m-hero::after { display: none !important; }
.m-hero-photo { position: relative; flex: 1 1 520px; margin: 0; min-height: 420px; background: #D6D3CE; }
.m-hero-photo .m-photo { position: absolute; inset: 0; }
.m-hero-text { flex: 1 1 520px; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 64px clamp(24px, 5vw, 72px); box-sizing: border-box; text-align: left; }
.m-hero-text > .wrap, .m-hero-text [class$="-inner"] { max-width: none; width: auto; margin: 0; padding: 0; text-align: left !important; }
.m-hero-text .section-label { justify-content: flex-start !important; }
.m-page-hero + .carbon-shell { margin-top: 48px; }
.m-hero-text h1 { margin: 0 0 18px !important; max-width: 620px; font-size: clamp(36px, 4.2vw, 60px) !important;
  font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -.025em !important;
  color: var(--m-ink) !important; text-align: left !important; }
.m-hero-text h1 .hl, .m-hero-text h1 em { color: inherit !important; font-style: normal; }
.m-hero-text p { max-width: 540px; margin: 0 0 22px !important; font-size: 1.1rem; line-height: 1.6;
  color: var(--m-ink-2) !important; text-align: left !important; }
.m-hero-text [style*="justify-content:center"], .m-hero-text .hero-btns, .m-hero-text .hero-actions,
.m-hero-text .m-hero-btns, .m-hero-text .carbon-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: flex-start !important; }
.m-hero-text .hero-tag, .m-hero-text .eyebrow, .m-hero-text .section-label, .m-hero-text .tag,
.m-hero-text .carbon-kicker, .m-hero-text .resources-kicker, .m-hero-text .carbon-breadcrumb {
  display: block; margin: 0 0 14px !important; font-size: .9rem; color: var(--m-ink-3) !important;
  background: none !important; border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.m-hero-text .carbon-breadcrumb a { color: inherit !important; }
.m-hero-text .carbon-trust span { color: var(--m-ink-2) !important; background: var(--m-bg-alt) !important; border-color: var(--m-line) !important; }
.m-hero-text .btn-white { background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
.m-hero-text .btn-ghost { color: var(--m-ink) !important; padding-left: 0; padding-right: 0; }
.m-hero-sub { margin: 0; max-width: 520px; font-size: 1.18rem; line-height: 1.6; color: var(--m-ink-2); }
.m-link { color: var(--m-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.m-hero-note { margin: 0; max-width: 520px; font-size: .88rem; line-height: 1.6; color: var(--m-ink-3) !important; }
.m-hero-note a { color: inherit; }
@media (max-width: 900px) {
  .m-hero { min-height: 0; }
  .m-hero-photo { min-height: 280px; }
  .m-hero-text { padding: 40px 20px 52px; }
  .m-hero-btns, .m-hero-text .hero-btns, .m-hero-text .hero-actions { flex-direction: column; align-items: stretch; }
  .m-hero-btns .btn, .m-hero-text .hero-btns .btn, .m-hero-text .hero-actions .btn { justify-content: center; }
}

/* =====================================================================
   Corps des pages publiques — marque E
   Titres de section à gauche, bandes claires (seul l'appel final reste
   noir), cartes à filet sans couleur de catégorie, numéros sans pastille.
   ===================================================================== */
.section-header, .section-intro, .sec-head, .principle-inner, .aihuman-inner, .duo-strip,
.how-section .section-header, .carbon-guide-panel {
  text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
.section-header > *, .section-intro > *, .sec-head > *, .principle-inner > *, .aihuman-inner > * {
  margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.section-label[style*="justify-content:center"], .section-header .section-label { justify-content: flex-start !important; }
.section .wrap[style*="text-align:center"], section .wrap > [style*="text-align:center"]:not(.billing-toggle):not(:has(.billing-toggle)) { text-align: left !important; }
.section-h2, .feat-h2 { font-weight: 600 !important; letter-spacing: -.025em !important; }

/* Les bandes sombres du milieu de page deviennent claires */
.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story {
  background: var(--m-bg-alt) !important; color: var(--m-ink) !important; --lime: var(--m-ink); --v500: var(--m-ink); --v300: var(--m-ink-3); }
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) :is(h1, h2, h3, h4, strong, em, .feat-h2, .quote-text, .tech-stat-num) {
  color: var(--m-ink) !important; }
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) :is(p, li, span, .feat-sub, .quote-by, .tech-stat-label, div) {
  color: var(--m-ink-2); }
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) * { border-color: var(--m-line) !important; }
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) :is(.tech-stats, .fv-dark, [class*="col"], [class*="card"]) {
  background: #FFFFFF !important; }
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) .btn-white,
:is(.feature-section.bg-dark, .quote-section, .transp-closed, .aihuman, .section.bg-dark, .story) .btn-outline-light {
  background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
.quote-mark { display: none !important; }
:is(.aihuman, .story, .transp-closed, .feature-section, .how-section, .principle, .expertise-cta, .cta-final, .pricing-section, .compare-section)::before,
:is(.aihuman, .story, .transp-closed, .feature-section, .how-section, .principle, .expertise-cta, .cta-final, .pricing-section, .compare-section)::after {
  background: none !important; box-shadow: none !important; }
.quote-text { font-style: normal !important; font-weight: 500 !important; }

/* Cartes : un filet gris, plus de couleur par catégorie */
.source-card, .priority-guide, .resource-card, .featured-resource, .associate-card, .founder, .step, .tl-step, .faq-item {
  border: 1px solid var(--m-line) !important; border-radius: 8px !important; box-shadow: none !important; background: #FFFFFF; }
.source-card::before, .source-card::after, .priority-guide::before { display: none !important; }
.sc-badge, .resource-badge, .role-pill, .rt-tag, .chip, .chip-ai, .cat-tag {
  background: transparent !important; color: var(--m-ink-3) !important; border: 0 !important; padding: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.resource-badge::before, .chip .chip-dot, .chip-ai .chip-dot, .rt-dot { display: none !important; }
.carbon-toc { border-left-color: var(--m-ink) !important; }
.featured-visual { background: #D6D3CE !important; }
.featured-visual::before, .featured-visual::after { display: none !important; }

/* Guides : le titre et ses repères à gauche, comme le reste du site */
.article-header { text-align: left !important; }
.article-header > * { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; justify-content: flex-start !important; }

/* Étapes numérotées : un chiffre, pas une pastille de couleur */
.step-num, .tl-node, .how-num {
  background: #FFFFFF !important; color: var(--m-ink) !important; border: 1px solid var(--m-line-2) !important; box-shadow: none !important; }
.step-line, .how-line { background: var(--m-line) !important; opacity: 1 !important; }

/* =====================================================================
   Espace connecté — piste 4, « l'outil dense »
   Blanc, filets gris, angles presque droits, aucune ombre. Une phrase dit
   ce qui a changé, les chiffres sont en chasse fixe. Pas d'icônes dans la
   navigation, pas de carte sombre, pas de bandeau coloré, pas de petites
   capitales espacées. Les notes A→E et les statuts gardent leur couleur.
   ===================================================================== */
.app, .app-shell, .app .main, .app-shell .main-wrapper { background: #FFFFFF !important; }

/* Navigation latérale : du texte, rien d'autre */
.app .sidebar, .app-shell .sidebar { background: #FFFFFF !important; border-right: 1px solid var(--m-line) !important; box-shadow: none !important; }
.app .sidebar .sb-ic, .app .sidebar .sb-item > .ph, .app-shell .sidebar .nav-item > .ph,
.app-shell .sidebar .nav-link > .ph, .app-shell .sidebar a > i.ph:first-child { display: none !important; }
.app .sb-item, .app-shell .sidebar .nav-item, .app-shell .sidebar .nav-link {
  border-radius: 0 !important; padding: 8px 20px !important; font-size: 14px !important;
  color: var(--m-ink) !important; background: transparent !important; box-shadow: none !important; }
.app .sb-item:hover, .app-shell .sidebar .nav-item:hover, .app-shell .sidebar .nav-link:hover { background: var(--m-bg-soft) !important; }
.app .sb-item.active, .app-shell .sidebar .nav-item.active, .app-shell .sidebar .nav-link.active {
  background: #F0F0EE !important; font-weight: 600 !important; color: var(--m-ink) !important; }
.app .sb-brand svg, .app-shell .sidebar .brand svg, .app-shell .sidebar .logo svg { color: var(--m-ink) !important; }
.app .sb-count { background: transparent !important; color: var(--m-ink-3) !important; font-family: var(--m-mono); }

/* Libellés : plus de capitales espacées */
.app .sb-section-label, .app .page-pretitle, .app .stake-label, .app .stat-tile-label,
.app .vcap, .app .eyebrow, .app-shell .eyebrow, .app-shell .section-label, .app-shell .nav-section-title {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important;
  font-weight: 500 !important; color: var(--m-ink-3) !important; }

/* Barre du haut */
.app .topbar, .app-shell .topbar, .app-shell .header { background: #FFFFFF !important; border-bottom: 1px solid var(--m-line) !important; box-shadow: none !important; backdrop-filter: none !important; }

/* Blocs : un filet, pas d'ombre, angles de 4 px */
.app .viz, .app .kpi, .app .kpi-mini, .app .stat-tile, .app .card, .app .panel,
.app-shell .app-card, .app-shell .card, .app-shell .panel {
  background: #FFFFFF !important; border: 1px solid var(--m-line) !important;
  border-radius: 4px !important; box-shadow: none !important; }
.app .viz::before, .app .viz::after, .app .kpi::before, .app .kpi::after,
.app .kpi-mini::before, .app .kpi-mini::after { display: none !important; }
.app .vtitle { font-size: 15px !important; font-weight: 600 !important; }
.app .vtitle > .ph, .app .kpi-ic, .app .kpi-mini-ic, .app .ai-banner-ic, .app .alert-ic { display: none !important; }

/* Le potentiel d'économies : une phrase et des chiffres, plus de carte sombre */
.app .viz.stake { background: #FFFFFF !important; color: var(--m-ink) !important; border: 1px solid var(--m-line) !important; }
.app .stake-value { color: var(--m-ink) !important; font-family: var(--m-mono) !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
.app .stake-value small, .app .stake-sub { color: var(--m-ink-2) !important; }
.app .stake-sub strong, .app .viz.stake.stake-bad .stake-sub strong { color: var(--m-ink) !important; }
.app .stake-facts .stat-tile { background: #FFFFFF !important; border: 1px solid var(--m-line) !important; }
.app .stake-facts .stat-tile-value { color: var(--m-ink) !important; }
.app .stake-facts .stat-tile-sub { color: var(--m-ink-3) !important; }
.app .stake-scenarios summary { color: var(--m-ink) !important; }
.app .stake-cta .btn-primary { background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
.app .stake-cta .btn-secondary { background: #FFFFFF !important; color: var(--m-ink) !important; border: 1px solid var(--m-line-2) !important; }

/* Encadrés d'analyse : texte sur fond légèrement gris, sans dégradé */
.app .ai-banner { background: var(--m-bg-soft) !important; border: 1px solid var(--m-line) !important; border-radius: 4px !important; }
.app .ai-banner-title { color: var(--m-ink) !important; }

/* Chiffres en chasse fixe */
.app .num, .app .kpi-value, .app .kpi-mini-value, .app .stat-tile-value, .app .plan-stat-value, .app .mono, .app td.num {
  font-family: var(--m-mono) !important; font-weight: 500 !important; letter-spacing: -.01em !important; font-variant-numeric: tabular-nums; }

/* Tableaux denses */
.app table th { font-weight: 500 !important; color: var(--m-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; background: #FFFFFF !important; }
.app table td, .app table th { border-color: var(--m-line) !important; }

/* Boutons de l'outil : rectangles nets */
.app .btn, .app-shell .btn { border-radius: 4px !important; box-shadow: none !important; }
.app .btn-primary, .app-shell .btn-primary { background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
.app .btn-secondary, .app-shell .btn-secondary { background: #FFFFFF !important; color: var(--m-ink) !important; border: 1px solid var(--m-line-2) !important; }
.app .badge-lime { background: #F0F0EE !important; color: var(--m-ink) !important; }

/* Priorités : un trait d'alerte, pas une carte rouge */
.app .viz.urgent { border-left: 2px solid var(--m-alert) !important; }

/* =====================================================================
   Mouvement et finitions (1er octobre 2026)
   Court, discret, jamais bloquant. Tout est désactivé si l'utilisateur
   demande moins d'animations ; sans js/marque.js, tout reste visible.
   ===================================================================== */
:root { --m-ease: cubic-bezier(.2, .7, .2, 1); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--m-ink) !important; outline-offset: 3px !important; border-radius: 2px; }
.cta-band :focus-visible, .footer :focus-visible, .site-shell-footer :focus-visible { outline-color: #FFFFFF !important; }

/* Entrée de l'en-tête : la photo se pose, le texte monte à peine */
@keyframes m-photo-in { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.m-hero-photo { overflow: hidden; }
.m-hero-photo .m-photo { animation: m-photo-in 1.1s var(--m-ease) both; }
.m-hero-text > *, .m-hero-text > .wrap > *, .m-hero-text [class$="-inner"] > * { animation: m-rise .7s var(--m-ease) both; }
.m-hero-text > :nth-child(2), .m-hero-text > .wrap > :nth-child(2), .m-hero-text [class$="-inner"] > :nth-child(2) { animation-delay: .08s; }
.m-hero-text > :nth-child(3), .m-hero-text > .wrap > :nth-child(3), .m-hero-text [class$="-inner"] > :nth-child(3) { animation-delay: .16s; }
.m-hero-text > :nth-child(n+4), .m-hero-text > .wrap > :nth-child(n+4), .m-hero-text [class$="-inner"] > :nth-child(n+4) { animation-delay: .24s; }

/* Blocs plus bas : apparition unique quand on les atteint (js/marque.js) */
.m-anim .m-pre { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--m-ease), transform .55s var(--m-ease); }
.m-anim .m-pre.m-in { opacity: 1; transform: none; }

/* Cartes : le filet se renforce au survol, l'ombre reste à peine visible */
.source-card, .priority-guide, .resource-card, .featured-resource, .associate-card, .price-card,
.carbon-guide-panel li a, .faq-item, .tl-step, .step {
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--m-ease); }
a.source-card:hover, .priority-guide:hover, a.resource-card:hover, .resource-card:hover, .featured-resource:hover,
.carbon-guide-panel li a:hover, .price-card:hover {
  border-color: var(--m-ink) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .06) !important; transform: translateY(-2px); }

/* Photos dans les cartes et les guides : léger zoom au survol */
.featured-visual, .article-hero-img, .article-image, figure:has(> img) { overflow: hidden; }
.featured-visual .m-photo, .featured-resource img { transition: transform .8s var(--m-ease); }
.featured-resource:hover .m-photo, .featured-resource:hover img { transform: scale(1.03); }

/* Boutons : réponse nette au survol et au clic */
.btn, .nav-cta, .site-shell-menu .site-shell-cta, .site-shell-menu .site-shell-account, .nav-account, .demo-open {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease !important; }
.btn:active, .nav-cta:active, .site-shell-cta:active { transform: scale(.98) !important; }
.btn svg, .m-link svg { transition: transform .2s var(--m-ease); }
.btn:hover svg { transform: translateX(2px); }

/* Liens : le soulignement se renforce au survol */
.m-link, .m-hero-note a, .prose a, .article-content a, .carbon-guide a, .carbon-guide-panel p a, .legal a {
  text-decoration-color: rgba(17, 17, 17, .35); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.m-link:hover, .m-hero-note a:hover, .prose a:hover, .article-content a:hover, .carbon-guide a:hover, .carbon-guide-panel p a:hover, .legal a:hover {
  text-decoration-color: currentColor; }

/* Navigation : un trait qui se dessine sous le lien survolé */
.site-shell-menu a:not(.site-shell-cta):not(.site-shell-account), .nav-menu a:not(.nav-account) {
  background-image: linear-gradient(currentColor, currentColor) !important; background-repeat: no-repeat !important;
  background-position: 12px calc(100% - 6px) !important; background-size: 0 1px !important;
  transition: background-size .25s var(--m-ease), color .2s ease !important; }
.site-shell-menu a:not(.site-shell-cta):not(.site-shell-account):hover, .nav-menu a:not(.nav-account):hover {
  background-color: transparent !important; background-size: calc(100% - 24px) 1px !important; }
.site-shell-nav, .nav { transition: box-shadow .25s ease, border-color .25s ease; }

/* Démo : le voile s'efface en douceur */
.demo-veil, .demo-veil-pill { transition: opacity .3s ease, transform .25s var(--m-ease), background .3s ease !important; }
.demo-veil:hover .demo-veil-pill { transform: translateY(-2px); }

/* Questions fréquentes : la flèche tourne, la réponse apparaît */
details.faq-item > summary { cursor: pointer; }
details.faq-item[open] > :not(summary) { animation: m-rise .35s var(--m-ease) both; }

/* Espace client : retour visuel discret */
.app .sb-item, .app-shell .sidebar .nav-item, .app-shell .sidebar .nav-link { transition: background-color .15s ease, color .15s ease !important; }
.app table tbody tr { transition: background-color .15s ease; }
.app table tbody tr:hover { background: #FAFAF9 !important; }
.app .tab-pane.active { animation: m-fade .25s ease both; }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .m-anim .m-pre { opacity: 1 !important; transform: none !important; }
}

/* ---------- Photographie ---------- */
.m-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-credit { margin: 8px 0 0; font-size: 12px; color: var(--m-ink-3); }
.m-credit a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}