/* ============================================================================
   DIGITAWEB — DIRECTION ARTISTIQUE C+ ("Warm Architect" + ponts Uptoo Group)
   Version : 2.0.6 · 2026-04-18
   ----------------------------------------------------------------------------
   Changelog v2.0.6 (depuis v2.0.5) :
     - CRITIQUE : hover des .pillar--default et .pillar--data inverse le
       fond (clair → brun profond). Le titre forcé en brun profond par la
       règle globale h1/h2/h3 devenait invisible sur fond brun. Ajout de
       règles hover explicites (ivoire) pour battre la global.
     - Idem sur icône et label (jaune ocre pour accent AAA).

   Changelog v2.0.5 (depuis v2.0.4) :
     - Pillar --accent : title/desc/label en ivoire (sur fond terracotta)
       au lieu du brun profond global (contraste perceptif amélioré).

   Changelog v2.0.4 (depuis v2.0.3) :
     - CRITIQUE : les h1/h2/h3 dans les sections à fond brun profond
       (alliance-venn, dark-feature, cta-banner--dark, etc.) sont forcés
       en ivoire (auparavant invisibles car brun sur brun).
     - .pillar--image .pillar__title : ivoire forcé (battre la global h)
     - Hero stat card (.hero-asymmetric__stat) : fond plus opaque (0.94
       au lieu de 0.85) + ombre douce pour lisibilité sur image couleur.

   Changelog v2.0.3 (depuis v2.0.2) :
     - CRITIQUE : toutes les CSS variables root sont désormais !important
       pour battre le bloc :root !important anti-Bootstrap du thème
       (main.css ligne 2145).
     - Double-classe (.btn--gradient.btn--gradient, etc.) pour battre les
       modules HubSpot auto-compilés (chargés APRÈS l'overlay dans la
       cascade → sans double-spec, nos !important perdaient l'arbitrage).
     - .hero-asymmetric__visual.hero-asymmetric__visual img : retrait du
       grayscale (image hero en couleur, pont visuel Uptoo).
     - Footer : règles .footer__links a / .footer__legal-links a / .footer__address
       explicites pour restaurer la hiérarchie (ivoire atténué + jaune ocre
       au hover au lieu de terracotta sur tous les liens).

   Changelog v2.0.2 (depuis v2.0.1) :
     - Footer : --on-primary-container remappé à ivoire atténué (alpha 0.70)
       pour restaurer la hiérarchie texte primaire/secondaire.
     - Footer hover (liens + social) : passage au jaune ocre (AAA sur brun).
     - Nav link : override de la couleur de texte en ink (évite le
       color-mix 70% qui délave le texte sur glass).
     - Pillars hover icon : jaune ocre (au lieu de terracotta-dark).
     - .btn--gradient : remplacé par terracotta plein (le gradient
       brun→terracotta du thème ne matche pas la DA Warm Architect).

   Changelog v2.0.1 (depuis v2.0) :
     - Contraste sur sections --dark : CTAs et liens passent en jaune ocre
       (10.38:1 sur brun profond = AAA) au lieu de terracotta (3.29:1 = AA
        large only). Cible .dark-feature, .cta-banner--dark, .hero-inner--dark,
       .rtb--dark, .stats-counter--dark, .dark-section, .hs-dark-section.

   Changelog v2.0 (depuis v1.1) :

   STRATÉGIE (pivot central)
     - PIVOT: l'overlay override désormais les CSS variables root du thème
       uptoo-digital-theme (Material 3 tokens) plutôt que de cibler des
       classes Tailwind qui n'existent pas en prod. La cascade CSS fait
       automatiquement basculer :
         * les 29 modules custom (hero-asymmetric, pillars-grid, bento, etc.)
         * les 3 variantes de boutons (.btn--gradient/ghost/outline/white)
         * toutes les surfaces Material 3 (--surface-container-*)
         * les hover/focus, les ombres teintées, la nav glass
       → couverture ≈ 100 %, ~5 % en v1.1.

   AJOUTS v2.0
     - Override de 22 CSS variables du thème (surfaces / primary / secondary /
       text / outline / font-body)
     - Règles ciblées sur les modifiers "dark" des modules (.dark-feature,
       .cta-banner--dark, .hero-inner--dark, .rtb--dark, .stats-counter--dark,
       .tc-bg--dark) → brun profond garanti
     - Règles ciblées sur les modifiers "surface" alternés (variantes --surface
       et --surface-low) → fond lin
     - Glass-nav teinté ivoire (via --glass-bg)

   RETIRÉ DE v1.1
     - Règle blanket .hs-cos-wrapper-type_module:not([style*="background"]) :
       supprimée car elle écrasait les fonds voulus de certains modules.
       Remplacée par la cascade CSS vars.
     - Nettoyage des sélecteurs Tailwind très spécifiques qui n'existent pas
       en prod (bg-zinc-9XX, text-indigo-XXX). Conservation d'un catch-all
       via [class*=] pour le cas où un futur module les utiliserait.

   CONSERVÉ DE v1.1
     - Mitigation CLS : body padding-top 32px dans ce CSS (pas via JS)
     - Variable --dw-band-h centralisée
     - Opt-out .dw-keep-grayscale
     - Hooks HubSpot : .hs-button, .cta_button, .hs-form-field, .hs-blog-post
     - Classe d'échappement .no-dw

   CSP requise : style-src fonts.googleapis.com · font-src fonts.gstatic.com
   Contraste : terracotta #C14B2A sur ivoire #FAF6F0 ≈ 4.7:1 (AA normal, pas AAA).
   À éviter sur corps < 14px → utiliser var(--dw-ink) pour le texte courant.
   ========================================================================= */

/* ─── Palette Digitaweb C+ (tokens internes) ────────────────────────────── */
:root {
  --dw-ivory:          #FAF6F0;
  --dw-linen:          #F5EFE6;
  --dw-warm-white:     #FFFCF7;
  --dw-linen-mid:      #EDE4D4;
  --dw-linen-dark:     #E5DDD2;

  --dw-terracotta:     #C14B2A;
  --dw-terracotta-dark:#9E3B1E;
  --dw-ocre:           #D19A4E;

  --dw-yellow:         #FFC83A;
  --dw-yellow-dark:    #E5A922;

  --dw-deep:           #2A1F18;
  --dw-ink:            #1A1410;
  --dw-muted:          #6B5D52;
  --dw-line:           #E5DDD2;

  --dw-band-h:         32px;
}

/* ─── Override CSS variables du thème (cascade Material 3) ──────────────── */
/* !important OBLIGATOIRE : main.css du thème contient un :root !important
   anti-Bootstrap (ligne 2145) qui gagne sinon sur nos overrides.         */
:root {
  /* Surfaces — warm neutrals */
  --surface:                     var(--dw-ivory) !important;
  --surface-bright:              var(--dw-warm-white) !important;
  --surface-container-lowest:    var(--dw-warm-white) !important;
  --surface-container-low:       var(--dw-linen) !important;
  --surface-container:           var(--dw-linen) !important;
  --surface-container-high:      var(--dw-linen-mid) !important;
  --surface-container-highest:   var(--dw-linen-dark) !important;
  --surface-dim:                 var(--dw-linen-dark) !important;
  --surface-variant:             var(--dw-linen-mid) !important;

  /* Primary — brun profond remplace les noirs Material */
  --primary:                     var(--dw-deep) !important;
  --primary-container:           var(--dw-deep) !important;
  --on-primary:                  var(--dw-ivory) !important;
  /* on-primary-container = texte secondaire sur fond primary (footer desc / links / legal)
     → ivoire atténué pour préserver la hiérarchie visuelle.              */
  --on-primary-container:        rgba(250, 246, 240, 0.70) !important;

  /* Secondary — terracotta remplace l'indigo */
  --secondary:                   var(--dw-terracotta) !important;
  --secondary-container:         var(--dw-terracotta-dark) !important;
  --on-secondary:                var(--dw-ivory) !important;
  --on-secondary-container:      var(--dw-ivory) !important;

  /* Text on surface */
  --on-surface:                  var(--dw-ink) !important;
  --on-surface-variant:          var(--dw-muted) !important;
  --on-background:               var(--dw-ink) !important;
  --inverse-surface:             var(--dw-deep) !important;
  --inverse-on-surface:          var(--dw-ivory) !important;

  /* Outlines */
  --outline:                     var(--dw-muted) !important;
  --outline-variant:             var(--dw-line) !important;

  /* Glass — ivoire transparent pour la nav */
  --glass-bg:                    rgba(250, 246, 240, 0.85) !important;
  --glass-bg-dark:               rgba(42, 31, 24, 0.85) !important;

  /* Typography — on conserve Newsreader (--font-headline) et radius 0 */
  --font-body:                   'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ─── Mitigation CLS : réserve la place du bandeau dès le 1er paint ─────── */
html, body { background-color: var(--dw-ivory); }
body { padding-top: var(--dw-band-h) !important; }

/* ─── Typographie ───────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: var(--dw-ink);
}

h1, h2, h3,
.headline-xl, .headline-lg, .headline-md, .headline-sm,
.font-headline, [class*="font-headline"],
.hs-blog-post h1, .hs-blog-post h2, .hs-blog-post h3 {
  font-family: 'Newsreader', Georgia, serif !important;
  color: var(--dw-deep) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

h1 em, h2 em, h3 em,
.headline-lg em, .headline-md em {
  font-style: italic;
  color: var(--dw-terracotta) !important;
  font-weight: 400;
}

/* ─── Modifiers "dark" des modules du thème ──────────────────────────────
   Les modules avec variante sombre : forcer brun profond + texte ivoire
   au cas où le module définit une couleur en dur hors var().           */
.dark-feature,
.cta-banner--dark,
.hero-inner--dark,
.rtb--dark,
.stats-counter--dark,
.tc-bg--dark,
.alliance-venn,
.dark-section, .hs-dark-section {
  background-color: var(--dw-deep) !important;
  color: var(--dw-ivory) !important;
}

/* Headings dans TOUTES les sections dark : override du global h-deep.
   Sans cette règle, h1/h2/h3 restent brun profond → invisibles sur fond brun. */
.dark-feature h1, .dark-feature h2, .dark-feature h3,
.dark-feature .headline-lg, .dark-feature .headline-md, .dark-feature .headline-sm,
.cta-banner--dark h1, .cta-banner--dark h2, .cta-banner--dark h3,
.cta-banner--dark .headline-lg, .cta-banner--dark .headline-md, .cta-banner--dark .headline-sm,
.hero-inner--dark h1, .hero-inner--dark h2, .hero-inner--dark h3,
.hero-inner--dark .headline-lg, .hero-inner--dark .headline-md, .hero-inner--dark .headline-sm,
.rtb--dark h1, .rtb--dark h2, .rtb--dark h3,
.stats-counter--dark h1, .stats-counter--dark h2, .stats-counter--dark h3,
.tc-bg--dark h1, .tc-bg--dark h2, .tc-bg--dark h3,
.alliance-venn h1, .alliance-venn h2, .alliance-venn h3,
.alliance-venn .headline-lg, .alliance-venn .headline-md, .alliance-venn .headline-sm,
.dark-section h1, .dark-section h2, .dark-section h3,
.hs-dark-section h1, .hs-dark-section h2, .hs-dark-section h3,
.pillar--image .pillar__title,
.pillar--image .pillar__desc,
.pillar--image .pillar__label,
.pillar--accent .pillar__title,
.pillar--accent .pillar__desc,
.pillar--accent .pillar__label {
  color: var(--dw-ivory) !important;
}

/* em italic dans headings sur fond dark : garder le terracotta (lisible sur brun, 3.3:1)
   ou passer au jaune ocre. On choisit ocre pour contraste AAA. */
.dark-feature em, .alliance-venn em,
.cta-banner--dark em, .hero-inner--dark em,
.rtb--dark em, .stats-counter--dark em {
  color: var(--dw-yellow) !important;
}

/* ─── Modifiers "surface" (fonds alternés clairs) ────────────────────────
   Variantes --surface-low du thème = lin. --surface = ivoire (cascade). */
.cta-banner--surface-low,
.hero-inner--surface-low,
.pullquote--surface-low,
.rtb--surface-low,
.stats-counter--surface-low,
.feature-cards--bg-low {
  background-color: var(--dw-linen) !important;
}

/* ─── Accents / highlights des modules ──────────────────────────────────── */
.pillar--accent,
.pricing-card--featured,
.comp-table__cell--highlighted {
  /* La couleur d'accent est déjà var(--secondary) via cascade (terracotta). */
  border-color: var(--dw-terracotta) !important;
}

/* ─── Image strips — grayscale neutralisé (pont Uptoo) ──────────────────── */
.image-strip:not(.dw-keep-grayscale) .image-strip__img,
.image-strip--grayscale:not(.dw-keep-grayscale) .image-strip__img,
img.grayscale:not(.dw-keep-grayscale),
.grayscale:not(.dw-keep-grayscale) img,
.grayscale:not(.dw-keep-grayscale) { filter: none !important; }

/* ─── Liens ─────────────────────────────────────────────────────────────── */
a:not(.no-dw):not(.dw-uptoo-link):not(.hs-button):not(.btn) { color: var(--dw-terracotta); }
a:not(.no-dw):not(.dw-uptoo-link):not(.hs-button):not(.btn):hover { color: var(--dw-terracotta-dark); }

/* ─── Boutons HubSpot natifs et formulaires ──────────────────────────────
   Les boutons du thème (.btn--gradient/ghost/outline/white) héritent déjà
   via les CSS vars. Ici on cible UNIQUEMENT les boutons HubSpot injectés  */
.hs-button, input[type="submit"].hs-button, .cta_button {
  background: var(--dw-terracotta) !important;
  color: var(--dw-ivory) !important;
  border: 1px solid var(--dw-terracotta) !important;
  border-radius: 2px !important;
}
.hs-button:hover, .cta_button:hover {
  background: var(--dw-terracotta-dark) !important;
  border-color: var(--dw-terracotta-dark) !important;
}

/* ─── Contraste AA sur sections dark : CTAs en jaune ocre ────────────────
   Terracotta sur brun profond = 3.29:1 (AA large only). Sur les sections
   --dark des modules, on remplace par le jaune ocre (10.38:1 = AAA).     */
.dark-feature .hs-button, .dark-feature .cta_button,
.cta-banner--dark .hs-button, .cta-banner--dark .cta_button,
.hero-inner--dark .hs-button, .hero-inner--dark .cta_button,
.rtb--dark .hs-button, .rtb--dark .cta_button,
.stats-counter--dark .hs-button, .stats-counter--dark .cta_button,
.dark-section .hs-button, .dark-section .cta_button,
.hs-dark-section .hs-button, .hs-dark-section .cta_button {
  background: var(--dw-yellow) !important;
  color: var(--dw-deep) !important;
  border-color: var(--dw-yellow) !important;
}
.dark-feature .hs-button:hover, .dark-feature .cta_button:hover,
.cta-banner--dark .hs-button:hover, .cta-banner--dark .cta_button:hover,
.hero-inner--dark .hs-button:hover, .hero-inner--dark .cta_button:hover,
.rtb--dark .hs-button:hover, .rtb--dark .cta_button:hover,
.stats-counter--dark .hs-button:hover, .stats-counter--dark .cta_button:hover,
.dark-section .hs-button:hover, .dark-section .cta_button:hover,
.hs-dark-section .hs-button:hover, .hs-dark-section .cta_button:hover {
  background: var(--dw-yellow-dark) !important;
  border-color: var(--dw-yellow-dark) !important;
}

/* ─── Correctifs ciblés thème uptoo-digital — v2.0.2 ─────────────────────
   Les règles ci-dessous rattrapent les cas où la cascade CSS vars seule
   ne suffit pas (color-mix, hiérarchie texte, gradients du thème).       */

/* Nav link — le color-mix(primary-container 70%, transparent) délave trop */
.nav__link:not(.nav__link--active) {
  color: var(--dw-ink) !important;
}
.nav__link:hover {
  color: var(--dw-terracotta) !important;
}
.nav__link--active {
  color: var(--dw-terracotta) !important;
}

/* Footer hovers — passer en jaune ocre pour contraste AAA sur brun profond */
.footer__links a:hover,
.footer__legal-links a:hover {
  color: var(--dw-yellow) !important;
}
.footer__social a:hover {
  background: var(--dw-yellow) !important;
  color: var(--dw-deep) !important;
}

/* Pillars hover — quand le fond passe en brun profond, tout doit être en ivoire.
   Le global h1/h2/h3 {color: var(--dw-deep) !important} rendrait le titre
   invisible au hover sinon. */
.pillar--default:hover,
.pillar--data:hover {
  background: var(--dw-deep) !important;
  color: var(--dw-ivory) !important;
}
.pillar--default:hover .pillar__title,
.pillar--default:hover .pillar__desc,
.pillar--default:hover .pillar__label,
.pillar--data:hover .pillar__title,
.pillar--data:hover .pillar__desc,
.pillar--data:hover .pillar__label {
  color: var(--dw-ivory) !important;
}
.pillar--default:hover .pillar__icon,
.pillar--image:hover .pillar__icon,
.pillar--data:hover .pillar__icon,
.pillar--accent:hover .pillar__icon {
  color: var(--dw-yellow) !important;
}
/* Border séparateur du bottom au hover : ivoire atténué (cohérent sur brun) */
.pillar--default:hover .pillar__bottom,
.pillar--data:hover .pillar__bottom {
  border-top-color: rgba(250, 246, 240, 0.25) !important;
}

/* .btn--gradient — double-classe pour battre template_main.min.css du thème
   (qui a aussi .btn--gradient.btn--gradient !important anti-Bootstrap) */
.btn--gradient.btn--gradient {
  background: var(--dw-terracotta) !important;
  background-image: none !important;
  color: var(--dw-ivory) !important;
}
.btn--gradient.btn--gradient:hover {
  background: var(--dw-terracotta-dark) !important;
  background-image: none !important;
  color: var(--dw-ivory) !important;
}

.btn--ghost.btn--ghost {
  color: var(--dw-deep) !important;
}
.btn--ghost.btn--ghost:hover {
  color: var(--dw-terracotta) !important;
}

.btn--outline.btn--outline {
  border-color: var(--dw-deep) !important;
  color: var(--dw-deep) !important;
}
.btn--outline.btn--outline:hover {
  background: var(--dw-deep) !important;
  color: var(--dw-ivory) !important;
  border-color: var(--dw-deep) !important;
}

/* Hero asymmetric — image en couleur (pont Uptoo) — double-classe pour battre
   le module HubSpot compilé qui a .hero-asymmetric__visual img { filter: grayscale(100%) }. */
.hero-asymmetric__visual.hero-asymmetric__visual img {
  filter: none !important;
  opacity: 1 !important;
}
.hero-asymmetric__visual.hero-asymmetric__visual:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Hero stat card : renforcer la lisibilité sur une image en couleur
   (v1 la transparence était OK sur image grayscale; DA C+ = image couleur
   donc on opacifie et on ajoute une ombre). */
.hero-asymmetric__stat.hero-asymmetric__stat,
.hero-asymmetric .glass-panel {
  background: rgba(250, 246, 240, 0.94) !important;
  box-shadow: 0 24px 48px rgba(42, 31, 24, 0.18) !important;
}

/* Footer — hiérarchie texte (le `a` terracotta global écrase sinon) */
.footer .footer__links a,
.footer .footer__legal-links a,
.footer .footer__address,
.footer .footer__address a {
  color: rgba(250, 246, 240, 0.70) !important;
}
.footer .footer__links a:hover,
.footer .footer__legal-links a:hover,
.footer .footer__address a:hover {
  color: var(--dw-yellow) !important;
}

/* Liens terracotta dans sections dark → ocre aussi (AAA) */
.dark-feature a:not(.no-dw):not(.hs-button):not(.btn),
.cta-banner--dark a:not(.no-dw):not(.hs-button):not(.btn),
.hero-inner--dark a:not(.no-dw):not(.hs-button):not(.btn),
.rtb--dark a:not(.no-dw):not(.hs-button):not(.btn),
.stats-counter--dark a:not(.no-dw):not(.hs-button):not(.btn),
.dark-section a:not(.no-dw):not(.hs-button):not(.btn),
.hs-dark-section a:not(.no-dw):not(.hs-button):not(.btn) {
  color: var(--dw-yellow) !important;
}

.hs-form-field input,
.hs-form-field select,
.hs-form-field textarea { border-radius: 2px !important; }

/* ─── Catch-all Tailwind (safety net, au cas où des classes Material/Tailwind
   seraient introduites dans un nouveau module) ────────────────────────── */
.bg-black,
[class*="bg-zinc-9"], [class*="bg-neutral-9"],
[class*="bg-gray-9"], [class*="bg-slate-9"]         { background-color: var(--dw-deep) !important; }

[class*="text-indigo-"], [class*="text-blue-"],
[class*="text-violet-"], [class*="text-purple-"]    { color: var(--dw-terracotta) !important; }

[class*="bg-indigo-"], [class*="bg-blue-"],
[class*="bg-violet-"], [class*="bg-purple-"]        { background-color: var(--dw-terracotta) !important; }

.rounded-full:not([class*="avatar"]):not(.dw-round),
.rounded-xl, .rounded-2xl, .rounded-3xl,
.rounded-lg, .rounded-md                            { border-radius: 2px !important; }

img.rounded-full,
[class*="avatar"] .rounded-full,
[class*="avatar"] img,
.dw-round                                           { border-radius: 9999px !important; }

/* ─── Utilitaires DA ────────────────────────────────────────────────────── */
.dw-stat-accent { color: var(--dw-yellow-dark) !important; }
.dw-badge-uptoo {
  display: inline-block; padding: 4px 10px;
  background: var(--dw-yellow); color: var(--dw-deep);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; border-radius: 2px;
}

/* ─── Bandeau Groupe Uptoo ──────────────────────────────────────────────── */
.dw-uptoo-band {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--dw-band-h);
  padding: 8px 24px;
  background: var(--dw-deep);
  color: var(--dw-ivory);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dw-uptoo-band .dw-uptoo-link {
  color: var(--dw-yellow);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.12em;
  transition: color .15s ease;
}
.dw-uptoo-band .dw-uptoo-link:hover,
.dw-uptoo-band .dw-uptoo-link:focus-visible {
  color: var(--dw-yellow-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.dw-uptoo-band .dw-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--dw-yellow);
  margin: 0 10px; vertical-align: middle;
}

/* ─── Nav fixe décalée sous le bandeau ──────────────────────────────────── */
nav.fixed, header.fixed,
.fixed.top-0, .sticky.top-0,
[class*="glass-nav"],
header.header, .site-header,
.hs-menu-wrapper.fixed { top: var(--dw-band-h) !important; }

/* Nav glass retintée ivoire via CSS var --glass-bg (override root fait) */
nav.glass-nav, [class*="glass-nav"] { background: var(--glass-bg) !important; }

.material-symbols-outlined { color: inherit; }

/* ─── Échappement par classe ──────────────────────────────────────────────
   - .no-dw            → désactive coloration des liens
   - .dw-keep-grayscale → conserve un filtre grayscale voulu par design
   - .dw-round          → coin 50% (avatars, badges ronds)
   ------------------------------------------------------------------------ */