/* ============================================================================
   Design tokens — J&S Services · Simulateur solaire
   Version 2026.06.12-1 · Palette : brief §3 (extraite de travaux-depannage.ch)
   RÈGLE D'ISOLATION (brief §12bis) : tout est scopé sous .jss-sim — jamais
   :root — pour ne pas entrer en collision avec le thème WordPress.
   Alternative encore plus stricte : monter le widget en Shadow DOM et
   injecter ce fichier dedans tel quel.
   ========================================================================== */

.jss-sim {
  /* ---- Couleurs · marque ------------------------------------------------ */
  --jss-primary:        #113360;   /* bleu marine principal */
  --jss-primary-600:    #143862;
  --jss-primary-650:    #15375f;
  --jss-primary-800:    #0f2a47;
  --jss-primary-900:    #0a1f3d;   /* le plus profond — texte par défaut */
  --jss-accent:         #ff7701;   /* orange CTA — RÉSERVÉ aux appels à l'action */
  --jss-accent-alt:     #ff7600;
  --jss-accent-600:     #f26419;
  --jss-accent-700:     #e06600;
  --jss-accent-800:     #d9531a;
  --jss-accent-100:     #fff0e6;   /* tint clair (fonds de badge, hover doux) */
  --jss-accent-300:     #fcb07a;

  /* ---- Couleurs · fonds & neutres --------------------------------------- */
  --jss-bg:             #ffffff;
  --jss-bg-soft:        #f5f7fa;   /* sections alternées */
  --jss-bg-soft-2:      #f9fafb;
  --jss-bg-soft-3:      #f4f7fb;
  --jss-blue-100:       #e8edf4;
  --jss-blue-200:       #dde3ec;
  --jss-blue-300:       #cfd9e6;
  --jss-border:         #d4d8dd;
  --jss-gray-500:       #9ca3af;   /* décoratif uniquement (contraste 2.5:1) */

  /* ---- Couleurs · sémantique (AA vérifié sur blanc, voir design/README) -- */
  --jss-text:           var(--jss-primary-900);  /* 17.3:1 AAA */
  --jss-text-invert:    #ffffff;
  --jss-text-muted:     #45566c;   /* 7.5:1 AA  — méta, légendes */
  --jss-success:        #1a7f37;   /* 5.1:1 AA  — drapeau OK */
  --jss-warning:        #9a5b00;   /* 5.4:1 AA  — drapeau attention */
  --jss-danger:         #b3261e;   /* 6.4:1 AA  — drapeau bloquant */
  --jss-info-bg:        var(--jss-blue-100);
  --jss-success-bg:     #e8f4ec;
  --jss-warning-bg:     #fdf2e3;

  /* ---- CTA · alignés sur la charte réelle du site (travaux-depannage.ch) --
     Boutons du site relevés en direct : orange #f26419, texte BLANC, carrés.
     On les reproduit à l'identique pour une intégration sans couture.
     Note d'accessibilité : blanc sur #f26419 ≈ 3.2:1 (sous le seuil AA pour
     petit texte) — choix assumé de cohérence avec le site entier. Pour viser
     l'AA strict un jour : assombrir l'orange vers #d9531a (--jss-accent-800). */
  --jss-btn-primary-bg:        var(--jss-accent-600);  /* #f26419 — orange exact des boutons du site */
  --jss-btn-primary-text:      #ffffff;                /* blanc — comme « Demander un devis » */
  --jss-btn-primary-bg-hover:  var(--jss-accent-700);  /* #e06600 — survol assombri */
  --jss-btn-secondary-border:  var(--jss-primary);
  --jss-btn-secondary-text:    var(--jss-primary);

  /* ---- Typographie -------------------------------------------------------
     Poppins partout — police UNIQUE du site (titres ET corps, relevé en
     direct sur travaux-depannage.ch). Déjà chargée par le thème WordPress :
     le widget n'embarque PAS de @import (les pages standalone le font). */
  --jss-font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jss-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jss-fw-heading:   700;   /* le site utilise Poppins 700/800 pour les titres */
  --jss-fw-heading-strong: 700;
  --jss-fw-body:      400;
  --jss-fw-body-medium: 500;
  /* Échelle mobile-first (px) */
  --jss-fs-xs:   13px;
  --jss-fs-sm:   14px;
  --jss-fs-md:   16px;   /* corps par défaut */
  --jss-fs-lg:   18px;
  --jss-fs-xl:   20px;
  --jss-fs-2xl:  24px;
  --jss-fs-3xl:  28px;
  --jss-fs-4xl:  34px;
  --jss-lh-tight: 1.25;
  --jss-lh-body:  1.55;

  /* ---- Espacements / rayons / ombres ------------------------------------ */
  --jss-sp-1: 4px;  --jss-sp-2: 8px;  --jss-sp-3: 12px; --jss-sp-4: 16px;
  --jss-sp-5: 20px; --jss-sp-6: 24px; --jss-sp-8: 32px; --jss-sp-10: 40px;
  --jss-sp-12: 48px;
  --jss-radius-sm:  8px;
  --jss-radius:     12px;   /* cartes arrondies */
  --jss-radius-lg:  16px;
  --jss-radius-pill: 999px; /* badges, chips */
  --jss-shadow-1: 0 1px 3px rgba(17,51,96,.08), 0 4px 14px rgba(17,51,96,.06);
  --jss-shadow-2: 0 8px 30px rgba(17,51,96,.14);
  --jss-focus-ring: 0 0 0 3px rgba(255,119,1,.45);

  /* ---- Divers ------------------------------------------------------------ */
  --jss-maxw-content: 1080px;
  --jss-maxw-form:    480px;
  --jss-transition:   150ms ease;

  /* Application de base */
  font-family: var(--jss-font-body);
  font-size: var(--jss-fs-md);
  line-height: var(--jss-lh-body);
  color: var(--jss-text);
}

/* ============================================================================
   Composants de base (classes préfixées .jss-)
   ========================================================================== */

.jss-sim *, .jss-sim *::before, .jss-sim *::after { box-sizing: border-box; }

.jss-sim h1, .jss-sim h2, .jss-sim h3, .jss-sim h4 {
  font-family: var(--jss-font-heading);
  font-weight: var(--jss-fw-heading);
  line-height: var(--jss-lh-tight);
  color: var(--jss-primary);
  margin: 0 0 var(--jss-sp-3);
}

/* Boutons */
.jss-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--jss-sp-2);
  font-family: var(--jss-font-heading); font-weight: 700;
  font-size: var(--jss-fs-md);
  padding: 14px 24px; border-radius: 0;   /* boutons carrés, comme le site */
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--jss-transition), transform var(--jss-transition);
  min-height: 48px; /* cible tactile AA */
}
.jss-btn:focus-visible { outline: none; box-shadow: var(--jss-focus-ring); }
.jss-btn--primary {
  background: var(--jss-btn-primary-bg); color: var(--jss-btn-primary-text);
}
.jss-btn--primary:hover { background: var(--jss-btn-primary-bg-hover); color: #fff; }
.jss-btn--secondary {
  background: transparent; color: var(--jss-btn-secondary-text);
  border-color: var(--jss-btn-secondary-border);
}
.jss-btn--secondary:hover { background: var(--jss-blue-100); }

/* Cartes */
.jss-card {
  background: var(--jss-bg); border: 1px solid var(--jss-border);
  border-radius: var(--jss-radius); box-shadow: var(--jss-shadow-1);
  padding: var(--jss-sp-5);
}

/* Badges de réassurance */
.jss-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--jss-fs-xs); font-weight: var(--jss-fw-body-medium);
  color: var(--jss-primary-800); background: var(--jss-blue-100);
  border-radius: var(--jss-radius-pill); padding: 5px 12px;
}
.jss-badge--accent { background: var(--jss-accent-100); color: #8a3d00; }

/* Chips « hypothèse ajustable » */
.jss-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--jss-fs-sm); color: var(--jss-text-muted);
  background: var(--jss-bg-soft); border: 1px dashed var(--jss-border);
  border-radius: var(--jss-radius-pill); padding: 6px 12px;
}
.jss-chip a { color: var(--jss-primary); font-weight: 500; }

/* Drapeaux faisabilité */
.jss-flag { display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--jss-radius-sm); padding: 10px 14px; font-size: var(--jss-fs-sm); }
.jss-flag--ok      { background: var(--jss-success-bg); color: var(--jss-success); }
.jss-flag--warn    { background: var(--jss-warning-bg); color: var(--jss-warning); }
.jss-flag--info    { background: var(--jss-info-bg);    color: var(--jss-primary-800); }

/* Champs */
.jss-field label { display:block; font-weight: var(--jss-fw-body-medium);
  font-size: var(--jss-fs-sm); margin-bottom: 6px; color: var(--jss-primary-800); }
.jss-input, .jss-select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; color: var(--jss-text);
  border: 1.5px solid var(--jss-border); border-radius: var(--jss-radius-sm);
  background: var(--jss-bg);
}
.jss-input:focus-visible, .jss-select:focus-visible {
  outline: none; border-color: var(--jss-primary); box-shadow: var(--jss-focus-ring);
}

/* Sections alternées */
.jss-section--soft { background: var(--jss-bg-soft); }
.jss-section--navy { background: var(--jss-primary); color: #fff; }
.jss-section--navy h2, .jss-section--navy h3 { color: #fff; }