/* Harmonisé sur la couleur primaire #0891b2 (favicon) — outils/design_harmoniser.py */
/* ============================================================
   laboratoire-de-protheses-dentaires.ch — direction imposée
   Laboratoire propre : bleu clinique, blanc, gris très clair,
   menthe. Logo centré, nav de part et d'autre, tiroir blanc,
   footer gris clair en une rangée fine, inscription en carte
   blanche à bord menthe avec arguments en cartes menthe.
   ============================================================ */

:root {
  --lab-bleu: #0891b2;       /* bleu clinique — grandes surfaces */
  --lab-bleu-texte: #077b97; /* même famille, assombrie pour le texte (contraste) */
  --lab-bleu-fonce: #066c84;
  --lab-menthe: #9fe9fb;
  --lab-menthe-fonce: #13c9f4;
  --lab-gris: #ecfbfe;
  --lab-blanc: #ffffff;
}

/* Police système nette sur tout le site */
body {
  font-family: "Segoe UI", Arial, "Trebuchet MS", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  header.site-header.hdr-classic *,
  .mobile-drawer *,
  footer.site-footer *,
  .ie-wrap * {
    animation: none !important;
    transition: none !important;
  }
}

/* ────────────── HEADER : blanc, ombre nette, bordure menthe,
   logo centré, nav répartie de part et d'autre ────────────── */

header.site-header.hdr-classic {
  background: var(--lab-blanc);
  border-bottom: 3px solid var(--lab-menthe);
  box-shadow: 0 3px 0 0 rgba(8, 145, 178, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

header.site-header.hdr-classic .header-inner {
  position: relative;
  height: 68px;
}

/* Logo centré au-dessus de la nav, à partir du desktop */
header.site-header.hdr-classic .brand {
  color: var(--lab-bleu-texte);
  font-family: Georgia, "Segoe UI", serif;
  font-weight: 700;
  letter-spacing: -.01em;
  animation: labFadeIn .5s ease both;
}
header.site-header.hdr-classic .brand-logo {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--lab-menthe);
  background: var(--lab-gris);
  padding: 2px;
}

@media (min-width: 861px) {
  header.site-header.hdr-classic .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* La nav occupe toute la largeur : un groupe de chaque côté du logo */
  header.site-header.hdr-classic .nav-desktop {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  header.site-header.hdr-classic .nav-desktop .nav-sep { display: none; }
  header.site-header.hdr-classic .nav-desktop .btn.btn-primary { margin-left: auto; }
}

header.site-header.hdr-classic .nav-link {
  color: var(--lab-bleu-fonce);
  position: relative;
}
header.site-header.hdr-classic .nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  background: var(--lab-bleu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
header.site-header.hdr-classic .nav-link:hover {
  background: var(--lab-gris);
  color: var(--lab-bleu-texte);
}
header.site-header.hdr-classic .nav-link:hover::after { transform: scaleX(1); }

/* « Nos cantons » : pilule en creux, dans la même famille que le CTA */
header.site-header.hdr-classic .dropdown-trigger {
  background: var(--lab-blanc);
  color: var(--lab-bleu-texte);
  border: 1.5px solid var(--lab-menthe);
  border-radius: 999px;
}
header.site-header.hdr-classic .dropdown-trigger:hover {
  background: var(--lab-gris);
  box-shadow: none;
}
header.site-header.hdr-classic .dropdown-panel {
  background: var(--lab-blanc);
  border: 1.5px solid var(--lab-menthe);
  border-radius: 14px;
}
header.site-header.hdr-classic .dropdown-item:hover { background: var(--lab-gris); }

/* Bouton « Connexion » (espace membre, si présent) : même famille de pilule creuse */
header.site-header.hdr-classic .btn.btn-outline {
  color: var(--lab-bleu-texte);
  border-color: var(--lab-menthe);
  border-radius: 999px;
}
header.site-header.hdr-classic .btn.btn-outline:hover {
  background: var(--lab-gris);
  border-color: var(--lab-bleu);
}
header.site-header.hdr-classic .dropdown-item-keyword { color: var(--lab-bleu-fonce); }
header.site-header.hdr-classic .dropdown-dot { background: var(--lab-bleu); }

/* Bouton d'action : pilule bleu clinique */
header.site-header.hdr-classic .btn.btn-primary {
  background: var(--lab-bleu-texte);
  border-color: var(--lab-bleu-texte);
  border-radius: 999px;
  padding: 9px 20px;
  min-height: 44px;
}
header.site-header.hdr-classic .btn.btn-primary:hover {
  background: var(--lab-bleu-fonce);
  border-color: var(--lab-bleu-fonce);
  box-shadow: 0 2px 8px rgba(8, 145, 178, .28);
}

header.site-header.hdr-classic .hamburger { color: var(--lab-bleu-texte); }
header.site-header.hdr-classic .hamburger:hover { background: var(--lab-gris); }

@keyframes labFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ────────────── Tiroir mobile : fond blanc, liens bleus ─────
   (display/position/transform/visibility/overflow/width du
   tiroir et de l'overlay : intouchés) ────────────── */

.mobile-overlay { background: rgba(8, 145, 178, .28); }

.mobile-drawer {
  background: var(--lab-blanc);
  border-left: 3px solid var(--lab-menthe);
}

.mobile-close {
  background: var(--lab-gris);
  color: var(--lab-bleu-texte);
  border: 1px solid var(--lab-menthe);
}

.mobile-section-title {
  color: var(--lab-bleu-texte);
  border-top: 1px dashed var(--lab-menthe);
  padding-top: 14px;
  margin-top: 6px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--lab-bleu-fonce);
  border-bottom: 1px solid var(--lab-gris);
}
.mobile-nav-link:hover { background: var(--lab-gris); color: var(--lab-bleu-texte); }

.mobile-auth { border-top: 1px solid var(--lab-menthe); margin-top: 10px; padding-top: 16px; }
.mobile-auth .btn.btn-primary {
  background: var(--lab-bleu-texte);
  border-color: var(--lab-bleu-texte);
  border-radius: 999px;
  min-height: 44px;
}
.mobile-auth .btn.btn-primary:hover { background: var(--lab-bleu-fonce); }

/* ────────────── FOOTER : gris clair, une rangée fine,
   marque à gauche, bas centré ────────────── */

footer.site-footer.ftr-rich {
  background: var(--lab-gris);
  color: #476269;
  border-top: 1px solid var(--lab-menthe);
  padding: 22px 0 0;
}

footer.site-footer.ftr-rich .ftr-rich-top {
  border-bottom: 1px solid #dbe9ec;
  padding-bottom: 14px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}
footer.site-footer.ftr-rich .ftr-rich-brand .brand-logo {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--lab-menthe);
}
footer.site-footer.ftr-rich .footer-brand { color: #022c37; }
footer.site-footer.ftr-rich .footer-tagline { color: #64838b; font-size: .82rem; }

/* La grille de liens redevient une rangée fine, pas des colonnes hautes */
footer.site-footer.ftr-rich .ftr-rich-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dbe9ec;
}
footer.site-footer.ftr-rich .ftr-rich-grid > div { flex: 0 1 auto; }
footer.site-footer.ftr-rich .footer-heading {
  color: var(--lab-bleu-texte);
  font-size: .68rem;
  margin-bottom: 6px;
}
footer.site-footer.ftr-rich .footer-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 14px;
}
footer.site-footer.ftr-rich .footer-links a { color: #476269; }
footer.site-footer.ftr-rich .footer-links a:hover { color: var(--lab-bleu-texte); }

/* Bas de page centré */
footer.site-footer.ftr-rich .footer-bottom {
  border-top: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 0 20px;
}
footer.site-footer.ftr-rich .footer-copy { color: #64838b; }
footer.site-footer.ftr-rich .footer-bottom-links { justify-content: center; }
footer.site-footer.ftr-rich .footer-bottom-links a { color: var(--lab-bleu-texte); }
footer.site-footer.ftr-rich .footer-bottom-links a:hover { color: var(--lab-bleu-fonce); }

@media (max-width: 640px) {
  footer.site-footer.ftr-rich .ftr-rich-top { flex-wrap: wrap; }
}

/* ────────────── Page « Ajouter mon entreprise » : carte
   blanche à bord menthe, deux colonnes, arguments en cartes
   menthe placés en premier (order: -1) ────────────── */

.ie-wrap .page-header h1 { color: var(--lab-bleu-texte); }
.ie-wrap .page-header p { color: #476269; }

.ie-grid {
  align-items: start;
}
@media (min-width: 901px) {
  .ie-grid {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .ie-wrap .ie-side { order: -1; }
}

.ie-card.card {
  background: var(--lab-blanc);
  border: 1.5px solid var(--lab-menthe);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(8, 145, 178, .07);
  padding: 26px;
  animation: labFadeIn .45s ease both;
}

.ie-wrap .qf-section {
  color: var(--lab-bleu-texte);
  border-bottom: 1px solid var(--lab-menthe);
  padding-bottom: 6px;
}

.ie-wrap .quote-lead-grid {
  gap: 12px 16px;
}
@media (min-width: 561px) {
  .ie-wrap .quote-lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ie-wrap .quote-field label {
  color: #334e55;
  font-weight: 600;
  font-size: .82rem;
}
.ie-wrap .quote-field input,
.ie-wrap .quote-field select,
.ie-wrap .quote-field textarea {
  border: 1.5px solid #cbdde1;
  border-radius: 10px;
  min-height: 44px;
  background: var(--lab-blanc);
  color: #022c37;
}
.ie-wrap .quote-field input:focus,
.ie-wrap .quote-field select:focus,
.ie-wrap .quote-field textarea:focus {
  outline: none;
  border-color: var(--lab-bleu);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .18);
}
.ie-wrap .quote-field textarea { min-height: 92px; }

.ie-wrap .quote-lead-actions {
  border-top: 1px dashed var(--lab-menthe);
  padding-top: 14px;
  margin-top: 12px;
}
.ie-wrap .quote-lead-actions .btn.btn-primary {
  background: var(--lab-bleu-texte);
  border-color: var(--lab-bleu-texte);
  border-radius: 999px;
  padding: 11px 26px;
  min-height: 44px;
  font-weight: 700;
}
.ie-wrap .quote-lead-actions .btn.btn-primary:hover {
  background: var(--lab-bleu-fonce);
  box-shadow: 0 3px 10px rgba(8, 145, 178, .3);
}

/* Cartes d'arguments : menthe, en tête sur desktop */
.ie-wrap .ie-why.card {
  background: var(--lab-menthe);
  border: none;
  border-radius: 16px;
  color: #044150;
}
.ie-wrap .ie-why.card + .ie-why.card { margin-top: 14px; }
.ie-wrap .ie-why h2 { color: #044f61; }
.ie-wrap .ie-why p { color: #044f61; }
.ie-wrap .ie-why ul { color: #044150; }
.ie-wrap .ie-side { display: flex; flex-direction: column; }