/* Harmonisé sur la couleur primaire #1e3a8a (favicon) — outils/design_harmoniser.py */
/* ============================================================
   Habillage « Conseil d'entreprise » — cabinet conseil suisse
   Direction imposée : marine #1e3a8a / gris perle #e5e7eb /
   accent corail #3b63d4, typographie système fine (Segoe UI,
   300 pour le texte courant, 600 pour les intitulés et boutons).
   Zones : header (hdr-classic), tiroir mobile, footer (ftr-compact),
   page « Ajouter mon entreprise » (.ie-wrap).
   ============================================================ */

/* ---------- HEADER DESKTOP ---------- */
/* Fond blanc, ombre douce, logo à gauche, nav centrée, bouton
   corail à droite : le bouton sort du flux de la nav pour rester
   ancré au bord droit pendant que les liens se centrent. */
.site-header.hdr-classic {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 6px 24px -10px rgba(30, 58, 138, .22);
}
.hdr-classic .header-inner { height: 76px; gap: 20px; }

.hdr-classic .brand {
  color: #1e3a8a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.hdr-classic .brand-logo {
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, .1);
  transition: transform .25s ease;
}
.hdr-classic .brand:hover .brand-logo { transform: scale(1.07) rotate(-3deg); }

/* la mise en page centrée ne vaut qu'au-delà de 860px : le gabarit
   bascule sur le tiroir en dessous (.nav-desktop{display:none}), et
   une règle non protégée par le même seuil gagnerait par spécificité
   et casserait ce basculement. */
@media (min-width: 861px) {
  .hdr-classic .nav-desktop {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-right: 200px; /* réserve la place du bouton, ancré à droite */
    font-family: "Segoe UI", Arial, sans-serif;
  }
  .hdr-classic .nav-sep { display: none; }
}

.hdr-classic .nav-link {
  position: relative;
  color: #1e3a8a;
  font-weight: 400;
  overflow: visible;
}
.hdr-classic .nav-link:hover { background: transparent; color: #1e3a8a; }
.hdr-classic .nav-link::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 5px;
  height: 2px;
  background: #3b63d4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.hdr-classic .nav-link:hover::after,
.hdr-classic .nav-link:focus-visible::after { transform: scaleX(1); }

/* Dropdown « Nos cantons » : bouton fantôme assorti aux liens */
.hdr-classic .dropdown-trigger {
  background: transparent;
  color: #1e3a8a;
  border: 1.5px solid rgba(30, 58, 138, .28);
  font-weight: 600;
}
.hdr-classic .dropdown-trigger:hover {
  background: rgba(30, 58, 138, .06);
  border-color: #1e3a8a;
  box-shadow: none;
}
.hdr-classic .dropdown-panel { border-color: rgba(30, 58, 138, .16); }
.hdr-classic .dropdown-item:hover { background: rgba(59, 99, 212, .1); }
.hdr-classic .dropdown-item-keyword { color: #1e3a8a; }
.hdr-classic .dropdown-item-sub { color: #646e8b; }

/* Bouton « + Ajouter mon entreprise » : pilule corail, ancrée à
   droite de la nav (verticalement centrée dans le header). Le
   corail pur (#3b63d4) n'offre que 2,8:1 de contraste avec du
   texte blanc : la pilule utilise une teinte corail profonde,
   toujours dans la même famille, qui passe 5,1:1. */
.hdr-classic .btn-primary,
.mobile-auth .btn-primary,
.ie-wrap .btn-primary {
  background: #2547a9;
  border-color: #2547a9;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  padding-left: 20px; padding-right: 20px;
  box-shadow: 0 4px 14px -4px rgba(37, 71, 169, .45);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hdr-classic .btn-primary:hover,
.mobile-auth .btn-primary:hover,
.ie-wrap .btn-primary:hover {
  background: #203d92;
  border-color: #203d92;
  box-shadow: 0 10px 22px -6px rgba(37, 71, 169, .5);
}
.hdr-classic .nav-desktop .btn-primary {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hdr-classic .nav-desktop .btn-primary:hover { transform: translateY(calc(-50% - 3px)); }
.mobile-auth .btn-primary:hover, .ie-wrap .btn-primary:hover { transform: translateY(-2px); }

.hdr-classic .hamburger { color: #1e3a8a; }
.hdr-classic .hamburger:hover { background: rgba(30, 58, 138, .08); }

/* ---------- TIROIR MOBILE ---------- */
/* Fond marine, liens blancs ; mécanisme d'ouverture intact
   (display/position/transform/visibility/overflow/width non touchés). */
.mobile-drawer {
  background: #1e3a8a;
  box-shadow: -8px 0 30px rgba(10, 20, 47, .35);
  font-family: "Segoe UI", Arial, sans-serif;
}
.mobile-overlay.open { background: rgba(30, 58, 138, .55); }

.mobile-close { width: 44px; height: 44px; background: rgba(255, 255, 255, .15); color: #fff; }
.mobile-close:hover { background: rgba(255, 255, 255, .28); }

.mobile-drawer .mobile-nav-link { color: #fff; font-weight: 400; }
.mobile-drawer .mobile-nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.mobile-drawer .mobile-section-title {
  color: rgba(255, 255, 255, .8); /* corail sur marine ne passe pas 4,5:1, blanc atténué si */
  border-left: 3px solid #3b63d4;
  padding-left: 11px;
}

.mobile-drawer .mobile-auth {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: 10px;
  padding-top: 18px;
}
.mobile-drawer .mobile-auth .btn-primary { border-color: rgba(255, 255, 255, .3); }

/* ---------- FOOTER ---------- */
/* Gris perle, trois colonnes : marque en grand à gauche, liens
   au centre-droite, accent corail en 3e colonne ; ligne de bas
   marine. */
.site-footer.ftr-compact {
  background: #e5e7eb;
  color: #333c55;
  padding: 44px 0 0;
  border-bottom: 4px solid #1e3a8a;
  font-family: "Segoe UI", Arial, sans-serif;
}
.site-footer.ftr-compact .ftr-compact-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr .7fr;
  align-items: start;
  gap: 32px;
  padding-bottom: 30px;
  text-align: left;
}
.site-footer.ftr-compact .footer-copy {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e3a8a;
  letter-spacing: -.01em;
}
.site-footer.ftr-compact .ftr-compact-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.site-footer.ftr-compact .ftr-compact-links a { color: #333c55; font-size: .85rem; font-weight: 400; }
.site-footer.ftr-compact .ftr-compact-links a:hover { color: #1e3a8a; }
.site-footer.ftr-compact .ftr-compact-links a:not(:last-child)::after { content: none; }

.site-footer.ftr-compact .ftr-compact-auth {
  min-height: 48px;
  border-left: 2px solid rgba(30, 58, 138, .18);
  padding-left: 18px;
}
.site-footer.ftr-compact .ftr-compact-auth::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3b63d4;
}

/* Lien « Connexion » lisible (le gabarit le force en blanc) ; colonne masquée quand elle n'a plus de lien (site statique) */
.site-footer.ftr-compact .ftr-compact-auth a { color: #1e3a8a; font-weight: 600; }
.site-footer.ftr-compact .ftr-compact-auth:not(:has(a)) { display: none; }
.site-footer.ftr-compact .ftr-compact-inner:not(:has(.ftr-compact-auth a)) { grid-template-columns: 1.3fr 1fr; }

@media (max-width: 768px) {
  .site-footer.ftr-compact .ftr-compact-inner { grid-template-columns: 1fr; text-align: left; gap: 22px; }
  .site-footer.ftr-compact .ftr-compact-auth { display: none; }
}

/* ---------- PAGE « AJOUTER MON ENTREPRISE » ---------- */
/* Carte à bord marine, formulaire en deux colonnes (hérité de
   .quote-lead-grid), arguments en cartes horizontales sous le
   formulaire (aside repassé en flux normal, cartes côte à côte). */
.ie-wrap { font-family: "Segoe UI", Arial, sans-serif; }
.ie-wrap h1 { color: #1e3a8a; }
.ie-wrap .page-header p { color: #475069; font-weight: 300; }

.ie-wrap .ie-grid { display: block; }
.ie-wrap .ie-card {
  border: 2px solid #1e3a8a;
  border-radius: 18px;
  box-shadow: 0 16px 32px -16px rgba(30, 58, 138, .3);
  margin-bottom: 28px;
}

.ie-wrap .qf-section {
  display: inline-block;
  color: #1e3a8a;
  font-weight: 600;
  border-bottom: 2px solid #3b63d4;
  padding-bottom: 6px;
}
.ie-wrap .qf-section + .quote-lead-grid + .qf-section { border-top-color: rgba(30, 58, 138, .25); }
.ie-wrap .quote-lead-grid { column-gap: 18px; }
.ie-wrap label { color: #1e3a8a; font-weight: 600; }
.ie-wrap input, .ie-wrap select { min-height: 44px; }
.ie-wrap input:focus, .ie-wrap select:focus, .ie-wrap textarea:focus {
  border-color: #3b63d4;
  box-shadow: 0 0 0 3px rgba(59, 99, 212, .18);
}

/* arguments : deux cartes horizontales sous le formulaire */
.ie-wrap .ie-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ie-wrap .ie-why {
  background: #e5e7eb;
  border: 1px solid rgba(30, 58, 138, .15);
  border-radius: 14px;
}
.ie-wrap .ie-why h2 { color: #1e3a8a; font-weight: 600; }
.ie-wrap .ie-why h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: #3b63d4;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .ie-wrap .ie-side { grid-template-columns: 1fr; }
}

/* ---------- accessibilité clavier ---------- */
.hdr-classic a:focus-visible, .hdr-classic button:focus-visible,
.mobile-drawer a:focus-visible, .mobile-drawer button:focus-visible,
.ie-wrap a:focus-visible, .ie-wrap button:focus-visible {
  outline: 2px solid #3b63d4;
  outline-offset: 2px;
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hdr-classic .nav-link::after,
  .hdr-classic .brand-logo,
  .hdr-classic .btn-primary,
  .mobile-auth .btn-primary,
  .ie-wrap .btn-primary { transition: none; }
  .hdr-classic .brand:hover .brand-logo { transform: none; }
  .hdr-classic .nav-desktop .btn-primary,
  .hdr-classic .nav-desktop .btn-primary:hover { transform: translateY(-50%); }
  .mobile-auth .btn-primary:hover, .ie-wrap .btn-primary:hover { transform: none; }
}