/* ===========================================================================
   EMBED — surcouche appliquée UNIQUEMENT à la version site (iframe de
   /outil-metre-toiture/). css/app.css et js/app.js restent identiques à
   l'extension Chrome : pour remonter une nouvelle version du widget, on
   recopie css/ js/ vendor/ icons/ et on ne touche qu'à ce fichier.

   Rôle principal : rhabiller l'outil aux couleurs du site. L'extension est en
   terracotta (#c0512c) sur gris-beige ; embarqué tel quel, l'outil se lisait
   comme un service tiers. On redéfinit donc les variables de app.css avec les
   jetons du site (l'iframe est un document séparé : rien n'est hérité de la
   page parente, tout est écrit en dur ici).
   =========================================================================== */

:root {
  /* Jetons repris de src/index.css du site */
  --accent: #B07A00;          /* orange-dark : lisible en texte sur fond clair */
  --accent-dark: #8A5E00;     /* orange-shadow : survol et ombres dures */
  --accent-bright: #CF8E00;   /* orange principal : aplats et bordures */
  --ink: #1E2535;             /* primary-blue */
  --ink-soft: #4b5563;        /* text-medium */
  --line: #e5e2dc;
  --bg: #FAFAF8;              /* cream */
  --card: #ffffff;
  --site-blue-light: #FFF9EC;   /* le « blue-light » du site est en fait un ivoire */
  --site-blue-pale: #E8EDF5;    /* le vrai bleu clair : --color-expertise-bg */

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Titres en Space Grotesk, comme sur le site */
.brand-name,
.empty h2,
.headline-value { font-family: 'Space Grotesk', 'Inter', sans-serif; }

/* ── Barre du haut ───────────────────────────────────────────────────────── */

/* La marque est déjà portée par le header du site, 80 px plus haut :
   l'afficher ici en doublon. On garde la recherche et le CTA. */
.brand { display: none; }

/* Barre du haut en BLEU CLAIR (--site-blue-pale). Elle a d'abord été en crème,
   mais elle se confondait avec le fond de page devenu crème lui aussi — le haut
   du cadre paraissait délavé ; puis en navy, trop lourd. Le bleu pâle la
   détache du fond sans peser, et laisse le bouton orange porter l'accent. */
.topbar {
  gap: 14px;
  padding: 0 14px;
  background: var(--site-blue-pale);
  border-bottom: 2px solid #D3DCEA;
}

.search { max-width: none; }

.search input {
  background: #fff;
  border: 2px solid #D3DCEA;
  border-radius: .6rem;
  font-weight: 500;
}
.search input::placeholder { color: #8A9BBE; }
.search input:focus { border-color: var(--accent-bright); }

.topbar-link {
  color: #fff;
  background: var(--accent-bright);
  border: 2px solid var(--accent-dark);
  border-radius: .55rem;
  padding: .45rem .9rem;
  box-shadow: 2px 2px 0 0 var(--accent-dark);
  transition: .2s ease-in-out;
}
.topbar-link:hover {
  text-decoration: none;
  box-shadow: 1px 1px 0 0 var(--accent-dark);
  transform: translate(1px, 1px);
}

/* ── Carte ───────────────────────────────────────────────────────────────── */

.map-hint { background: rgba(30, 37, 53, .92); }
.map-hint strong { color: #F5C453; }

.tool {
  border: 2px solid var(--line);
  border-radius: .55rem;
  box-shadow: 0 2px 6px rgba(30, 37, 53, .18);
  font-weight: 500;
}
.tool.primary {
  background: var(--accent-bright);
  border-color: var(--accent-dark);
  box-shadow: 2px 2px 0 0 var(--accent-dark);
}
.tool.primary:hover { background: var(--accent); }

.vx { border-color: var(--accent-bright); }
.vx-mid { background: var(--accent-bright); }

/* ── Panneau de résultats ────────────────────────────────────────────────── */

.panel { border-left: 2px solid var(--line); }

.empty-icon { color: var(--accent-bright); }

/* Le chiffre-clé : cartouche crème bordé, comme les encadrés du site. */
.headline {
  background: var(--site-blue-light);
  border: 2px solid var(--accent-bright);
  border-radius: .9rem;
  box-shadow: 3px 3px 0 0 var(--accent-dark);
}
.headline-value { color: var(--ink); }
.headline-value small { color: var(--ink-soft); }

.field select {
  border: 2px solid var(--line);
  border-radius: .6rem;
}
.field select:focus { border-color: var(--accent-bright); }

.section-title { color: var(--ink); }

.quote { background: var(--site-blue-light); border-radius: .6rem; }
.quote-value { color: var(--accent); }

.btn {
  border: 2px solid var(--line);
  border-radius: .6rem;
  transition: .2s ease-in-out;
}
.btn-primary {
  background: var(--accent-bright);
  border-color: var(--accent-dark);
  box-shadow: 3px 3px 0 0 var(--accent-dark);
}
.btn-primary:hover {
  background: var(--accent-bright);
  box-shadow: 2px 2px 0 0 var(--accent-dark);
  transform: translate(1px, 1px);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
/* Sous 900 px l'app passe en hauteur automatique (voir app.css) : embed.js
   remonte la hauteur réelle au parent, qui redimensionne l'iframe. */
@media (max-width: 900px) {
  html, body { height: auto; }

  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .search { flex: 1 1 100%; }
  .topbar-link { display: block; margin-left: auto; }

  .map-wrap { height: 62vh; min-height: 340px; }
  .panel { border-left: none; border-top: 2px solid var(--line); }
}