/* Harmonisé sur la couleur primaire #9d174d (favicon) — outils/design_harmoniser.py */
/* ============================================================
   Ongleries.ch — direction « onglerie glamour »
   Fuchsia #9d174d · rose poudré #fce7f0 · noir #18181b
   Georgia italique pour la marque, polices système ailleurs.
   Gabarit : header=classic (hdr-classic) · footer=rich (ftr-rich)
   ============================================================ */

/* ------------------------------------------------------------
   1. HEADER DESKTOP — fond rose poudré, logo à droite en italique,
      nav en pastilles à gauche, liseré fuchsia glissant en bas
   ------------------------------------------------------------ */
header.site-header.hdr-classic {
  background: #fce7f0;
  border-bottom: none;
}

/* liseré fuchsia qui glisse : ruban de rayures animé en bas du header */
header.site-header.hdr-classic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, #9d174d 0 22px, #ec7aa8 22px 44px);
  background-size: 88px 100%;
  animation: ong-liseré-glisse 6s linear infinite;
}

@keyframes ong-liseré-glisse {
  from { background-position: 0 0; }
  to   { background-position: -88px 0; }
}

/* logo (marque) à droite, nav à gauche : on inverse l'ordre du flex */
header.site-header.hdr-classic .header-inner {
  flex-direction: row-reverse;
  gap: 20px;
}

header.site-header.hdr-classic .brand {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: #9d174d;
}

header.site-header.hdr-classic .brand-logo {
  border-radius: 999px;
  border: 2px solid #9d174d;
  background: #fff;
  padding: 2px;
}

header.site-header.hdr-classic .nav-desktop {
  gap: 10px;
}

/* liens en pastilles : forme pilule, s'élèvent au survol */
header.site-header.hdr-classic .nav-link {
  background: #ffffff;
  border: 1.5px solid #f6c3d8;
  border-radius: 999px;
  color: #9d174d;
  font-weight: 600;
  padding: 8px 16px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
header.site-header.hdr-classic .nav-link:hover {
  background: #fce7f0;
  border-color: #9d174d;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(157, 23, 77, .22);
}

header.site-header.hdr-classic .nav-sep { display: none; }

header.site-header.hdr-classic .dropdown-trigger {
  background: #9d174d;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
header.site-header.hdr-classic .dropdown-trigger:hover {
  background: #79123b;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(157, 23, 77, .3);
}

header.site-header.hdr-classic .dropdown-panel {
  background: #ffffff;
  border: 1.5px solid #f6c3d8;
  box-shadow: 0 14px 30px rgba(157, 23, 77, .18);
}
header.site-header.hdr-classic .dropdown-item:hover { background: #fce7f0; }
header.site-header.hdr-classic .dropdown-item-keyword { color: #9d174d; }
header.site-header.hdr-classic .dropdown-item-sub { color: #e1347a; }
header.site-header.hdr-classic .dropdown-dot { background: #9d174d; }

/* bouton « + Ajouter mon entreprise » : pilule fuchsia, s'élève au survol */
header.site-header.hdr-classic .nav-desktop .btn.btn-primary {
  background: #9d174d;
  border-color: #9d174d;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
header.site-header.hdr-classic .nav-desktop .btn.btn-primary:hover {
  background: #79123b;
  border-color: #79123b;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(157, 23, 77, .35);
}

header.site-header.hdr-classic .hamburger { color: #9d174d; }
header.site-header.hdr-classic .hamburger:hover { background: rgba(157, 23, 77, .12); }

/* ------------------------------------------------------------
   2. TIROIR MOBILE — noir, liens rose poudré
      (le tiroir n'hérite pas des variables du header : couleurs
      littérales partout ; mécanisme d'ouverture non touché)
   ------------------------------------------------------------ */
.mobile-overlay { background: rgba(24, 24, 27, .55); }

.mobile-drawer {
  background: #18181b;
  color: #fce7f0;
  border-left: 3px solid #9d174d;
}

.mobile-close {
  background: #9d174d;
  color: #ffffff;
}
.mobile-close:hover { background: #79123b; }

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #fce7f0;
  border-radius: 10px;
}
.mobile-nav-link:hover { background: rgba(157, 23, 77, .35); color: #ffffff; }

.mobile-section-title {
  color: #ec7aa8;
  border-top: 1px solid rgba(252, 231, 240, .14);
  margin-top: 6px;
}

.mobile-auth .btn.btn-primary {
  background: #9d174d;
  border-color: #9d174d;
  border-radius: 999px;
  min-height: 44px;
  font-weight: 700;
}
.mobile-auth .btn.btn-primary:hover { background: #79123b; }

/* apparition douce des liens quand le tiroir s'ouvre */
.mobile-drawer.open .mobile-nav-link,
.mobile-drawer.open .mobile-section-title,
.mobile-drawer.open .mobile-auth {
  animation: ong-apparition .32s ease both;
}

@keyframes ong-apparition {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------
   3. FOOTER — noir, deux blocs (liens à gauche, marque à droite),
      bas de page fuchsia
   ------------------------------------------------------------ */
footer.site-footer.ftr-rich {
  background: #18181b;
  color: #f8cdde;
}

footer.site-footer.ftr-rich .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

/* bloc marque, à droite */
footer.site-footer.ftr-rich .ftr-rich-top {
  order: 2;
  flex: 0 1 280px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border-bottom: none;
  border-left: 2px solid rgba(157, 23, 77, .55);
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 22px;
}

footer.site-footer.ftr-rich .footer-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #fce7f0;
}
footer.site-footer.ftr-rich .ftr-rich-brand .brand-logo { border: 2px solid #9d174d; }
footer.site-footer.ftr-rich .footer-tagline { color: #e9699d; }

/* bloc liens, à gauche */
footer.site-footer.ftr-rich .ftr-rich-grid {
  order: 1;
  flex: 1 1 380px;
}
footer.site-footer.ftr-rich .footer-heading { color: #ec7aa8; }
footer.site-footer.ftr-rich .footer-links a { color: #f2aac7; }
footer.site-footer.ftr-rich .footer-links a:hover { color: #fce7f0; }

/* bas de page fuchsia, pleine largeur du bloc footer */
footer.site-footer.ftr-rich .footer-bottom {
  order: 3;
  flex-basis: 100%;
  background: #9d174d;
  border-top: none;
  margin: 4px -20px -0px;
  padding: 14px 20px;
}
footer.site-footer.ftr-rich .footer-copy { color: #fce7f0; }
footer.site-footer.ftr-rich .footer-bottom-links a { color: #fbe5ee; }
footer.site-footer.ftr-rich .footer-bottom-links a:hover { color: #ffffff; text-decoration: underline; }

/* ------------------------------------------------------------
   4. PAGE « AJOUTER MON ENTREPRISE » — arguments en cartes rose
      poudré au-dessus du formulaire, champs pilule à bord fuchsia,
      bouton final noir
   ------------------------------------------------------------ */
.ie-wrap .page-header h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #9d174d;
}
.ie-wrap .page-header p { color: #5d0e2e; }

/* mise en page : les cartes d'arguments en bandeau au-dessus du formulaire */
.ie-wrap .ie-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ie-wrap .ie-side {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ie-wrap .ie-side .card.ie-why { flex: 1 1 260px; margin-top: 0; }
.ie-wrap .ie-card { width: 100%; margin-top: 0; }

/* cartes d'arguments, rose poudré */
.ie-wrap .ie-side .card.ie-why {
  background: #fce7f0;
  border: 1.5px solid #f6c3d8;
  border-left: 4px solid #9d174d;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ie-wrap .ie-side .card.ie-why:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(157, 23, 77, .16);
}
.ie-wrap .ie-why h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #9d174d;
}
.ie-wrap .ie-why p,
.ie-wrap .ie-why li { color: #5d0e2e; }

/* carte du formulaire */
.ie-wrap .ie-card {
  background: #ffffff;
  border: 1.5px solid #f6c3d8;
  border-radius: 22px;
}

.ie-wrap .qf-section {
  color: #9d174d;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  border-bottom: 1px dashed #f6c3d8;
  padding-bottom: 6px;
}

.ie-wrap label { color: #5d0e2e; }

/* champs pilule à bord fuchsia */
.ie-wrap input,
.ie-wrap select,
.ie-wrap textarea {
  border-radius: 999px;
  border: 1.5px solid #9d174d;
  padding: 11px 18px;
}
.ie-wrap textarea { border-radius: 22px; }
.ie-wrap input:focus,
.ie-wrap select:focus,
.ie-wrap textarea:focus {
  border-color: #79123b;
  box-shadow: 0 0 0 3px rgba(157, 23, 77, .18);
}

/* bouton final, noir */
.ie-wrap .quote-lead-actions .btn.btn-primary {
  background: #18181b;
  border-color: #18181b;
  color: #fce7f0;
  border-radius: 999px;
  min-height: 44px;
  padding: 12px 28px;
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.ie-wrap .quote-lead-actions .btn.btn-primary:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}
.ie-wrap .quote-lead-actions small { color: #8b6474; }

/* ------------------------------------------------------------
   5. Mouvement réduit : on coupe tout
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  header.site-header.hdr-classic::after { animation: none; }
  .mobile-drawer.open .mobile-nav-link,
  .mobile-drawer.open .mobile-section-title,
  .mobile-drawer.open .mobile-auth {
    animation: none;
    opacity: 1;
    transform: none;
  }
  header.site-header.hdr-classic .nav-link,
  header.site-header.hdr-classic .dropdown-trigger,
  header.site-header.hdr-classic .nav-desktop .btn.btn-primary,
  .ie-wrap .ie-side .card.ie-why,
  .ie-wrap .quote-lead-actions .btn.btn-primary {
    transition: none;
  }
}