/* wildix.io : ce que style-dark.css (copié d'assutech.com) ne fournit pas.
   Les couleurs de base viennent des variables de style-dark.css (:root).
   Allure inspirée de wildix.com (nuit, bleu clair, jaune) : rien n'en est copié. */

:root {
  --wx-nuit: #070f2b;
  --wx-nuit-2: #0b1840;
  --wx-bleu: #7ea6ff;
  --wx-jaune: #ffb81c;
  --wx-jaune-2: #ffc94d;
}

/* En-tête sombre, logo Assutech discret : pas de sous-titre */
.site-header { background: var(--wx-nuit); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header .brand-name { color: #fff; }
.site-header .brand-div, .site-header .brand-sub { display: none; }
.site-header .header-phone { color: #fff; }
/* style-dark.css ne l'affiche pas entre 1121 et 1239 px (la topbar d'assutech.com le porte) : il n'y a pas de topbar ici */
@media (min-width: 1121px) and (max-width: 1239px) { .header-phone { display: flex; } }

/* Bouton principal jaune, texte nuit */
.btn-primary { background: var(--wx-jaune); color: var(--wx-nuit); }
.btn-primary:hover { background: var(--wx-jaune-2); color: var(--wx-nuit); }

/* Héros centré */
.page-hero {
  padding: 96px 0 88px;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(126,166,255,.28), transparent 65%),
    linear-gradient(180deg, var(--wx-nuit), var(--wx-nuit-2));
}
.page-hero .hero-bg::after { background: none; }
.page-hero .hero-inner { text-align: center; }
.page-hero .eyebrow { color: var(--wx-bleu); }
.page-hero .eyebrow::before { background: var(--wx-bleu); }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; max-width: 900px; margin: 0 auto; color: #fff; }
.page-hero .lede { max-width: 720px; margin: 22px auto 0; color: var(--on-navy-200); }
.page-hero .hero-actions { justify-content: center; }
.wx-accent { color: var(--wx-bleu); }

/* Bandeau de chiffres publiés (les études de cas sourcées sont plus bas) */
.wx-stats { position: relative; z-index: 1; background: var(--wx-nuit-2); border-top: 1px solid rgba(255,255,255,.08); padding: 48px 0 40px; }
.wx-stats-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.wx-stat strong { display: block; font-family: var(--font-head); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; color: var(--wx-jaune); white-space: nowrap; }
.wx-stat span { display: block; margin-top: 12px; color: #fff; font-size: 15px; line-height: 1.4; }
.wx-stat small { display: block; margin-top: 4px; color: var(--on-navy-500); font-size: 12.5px; }
.wx-stats-note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--on-navy-500); }
.wx-stats-note a { color: var(--wx-bleu); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .wx-stats-grille { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .wx-stat strong { font-size: 28px; white-space: normal; }
}

/* Section Wilma sur fond nuit (classe .section-methode d'Assutech, recolorée) */
.section-methode { background: linear-gradient(180deg, var(--wx-nuit-2), var(--wx-nuit)); }
.section-methode .eyebrow { color: var(--wx-bleu); }
.section-methode .eyebrow::before { background: var(--wx-bleu); }
.section-methode .info-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--wx-bleu); box-shadow: none; }
.section-methode .info-card h3 { color: #fff; }
.section-methode .info-card p { color: var(--on-navy-400); }
.section-methode .info-card .num-badge { background: rgba(126,166,255,.16); color: var(--wx-bleu); }
.section-methode .feature-list li { color: var(--on-navy-200); border-bottom-color: rgba(255,255,255,.1); }
.section-methode .feature-list .tick { background: rgba(255,184,28,.16); color: var(--wx-jaune); }
.section-methode .quote-panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid var(--wx-jaune); }
.section-methode .quote-panel .mark { color: var(--wx-jaune); }
.section-methode .quote-panel p { color: #fff; }
.section-methode .quote-panel .attribution { color: var(--on-navy-500); }

/* Sur téléphone, style-dark.css masque le numéro et le bouton devis de l'en-tête (le menu burger
   d'assutech.com prend le relais). Ici il n'y a pas de menu : on les garde visibles. */
@media (max-width: 760px) {
  .header-phone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; gap: 0; font-size: 0;
    border: 1px solid var(--ink-100); border-radius: 50%; background: var(--surface);
  }
  .header-phone svg { width: 20px; height: 20px; }
}
@media (max-width: 420px) {
  .header-cta .btn-primary.btn-sm { display: inline-flex; padding: 8px 12px; font-size: 12.5px; }
}

/* Mentions légales : petits caractères, sur deux colonnes en grand écran (le texte reste lisible : 12,5 px, contraste AA) */
#mentions-legales { padding: 34px 0 38px; }
.mentions-legales { max-width: 1100px; }
.mentions-legales h2 { margin: 0 0 12px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-700); }
.mentions-legales h3 { margin: 14px 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-900); break-after: avoid; }
.mentions-legales ul { list-style: none; margin: 0; padding: 0; }
.mentions-legales ul, .mentions-legales p { break-inside: avoid; }
.mentions-legales li, .mentions-legales p { margin: 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-700); }
.mentions-legales a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mention-marque { max-width: none; }
@media (min-width: 900px) {
  .mentions-legales { columns: 2; column-gap: 56px; }
  .mentions-legales h2 { column-span: all; }
  .mentions-legales h3:first-of-type { margin-top: 0; }
}