/* Harmonisé sur la couleur primaire #7f1d1d (favicon) — outils/design_harmoniser.py */
/* Commerce de Vin — direction « Cave ». Bordeaux #7f1d1d, or vieilli #ae2828,
   noir doux #1c1917, serif Georgia italique pour la marque et les titres. */

:root {
  --vin-bordeaux: #7f1d1d;
  --vin-bordeaux-fonce: #5a1414;
  --vin-or: #ae2828;
  --vin-or-texte: #d54646;   /* même teinte, éclaircie pour rester lisible sur fond sombre */
  --vin-noir: #1c1917;
  --vin-noir-clair: #2c2222;
  --vin-creme: #f9e7e7;
  --vin-creme-vif: #fcf3f3;
  --vin-texte-clair: #f6d5d5;
  --vin-serif: Georgia, "Times New Roman", serif;
}

@keyframes filetOrEtire {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes apparitionEnFondu {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HEADER (desktop) */

header.site-header.hdr-classic {
  background: var(--vin-noir);
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

header.site-header.hdr-classic .header-inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 58px;
  gap: 8px;
}
header.site-header.hdr-classic .header-inner > .brand { grid-column: 2; justify-self: center; }
header.site-header.hdr-classic .header-inner > .hamburger { grid-column: 3; justify-self: end; }

header.site-header.hdr-classic .brand {
  font-family: var(--vin-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--vin-or-texte);
  gap: 10px;
  animation: apparitionEnFondu .55s ease both;
}
header.site-header.hdr-classic .brand:hover { opacity: 1; filter: brightness(1.18); }

header.site-header.hdr-classic .brand-logo {
  border-radius: 50%;
  border: 2px solid var(--vin-or-texte);
  padding: 2px;
  background: var(--vin-noir-clair);
}

header.site-header.hdr-classic .hamburger { color: var(--vin-or-texte); }
header.site-header.hdr-classic .hamburger:hover { background: rgba(213, 70, 70,.14); }

/* Disposition desktop : marque seule en haut, nav en barre basse bordeaux */
@media (min-width: 861px) {
  header.site-header.hdr-classic .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 18px 0 0;
    gap: 0;
  }
  header.site-header.hdr-classic .brand { font-size: 1.6rem; }

  header.site-header.hdr-classic .nav-desktop {
    position: relative;
    width: 100%;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 24px;
    background: var(--vin-bordeaux);
  }
  /* le filet or qui s'étire, à la jonction des deux bandes */
  header.site-header.hdr-classic .nav-desktop::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--vin-or-texte);
    transform: scaleX(0);
    transform-origin: center;
    animation: filetOrEtire .8s .15s cubic-bezier(.4,0,.2,1) both;
  }
}

header.site-header.hdr-classic .nav-link {
  position: relative;
  color: var(--vin-texte-clair);
  overflow: visible;
}
header.site-header.hdr-classic .nav-link::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--vin-or-texte);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
header.site-header.hdr-classic .nav-link:hover { background: transparent; color: #fff; }
header.site-header.hdr-classic .nav-link:hover::after,
header.site-header.hdr-classic .nav-link:focus-visible::after { transform: scaleX(1); }

header.site-header.hdr-classic .dropdown-trigger {
  background: transparent;
  border: 1.5px solid var(--vin-or-texte);
  color: var(--vin-or-texte);
}
header.site-header.hdr-classic .dropdown-trigger:hover {
  background: var(--vin-or-texte);
  color: var(--vin-noir);
  box-shadow: none;
}
header.site-header.hdr-classic .dropdown.open .dropdown-panel { animation: apparitionEnFondu .22s ease both; }
header.site-header.hdr-classic .dropdown-panel {
  background: var(--vin-creme-vif);
  border: 1px solid rgba(127, 29, 29,.2);
}
header.site-header.hdr-classic .dropdown-item:hover { background: rgba(174, 40, 40,.14); }
header.site-header.hdr-classic .dropdown-item-keyword { color: var(--vin-bordeaux); }
header.site-header.hdr-classic .nav-sep { background: rgba(246, 213, 213,.28); }

/* bouton or sur noir */
header.site-header.hdr-classic .btn.btn-primary {
  background: var(--vin-noir-clair);
  border: 1.5px solid var(--vin-or-texte);
  color: var(--vin-or-texte);
  min-height: 44px;
  padding: 10px 20px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
header.site-header.hdr-classic .btn.btn-primary:hover {
  background: var(--vin-or-texte);
  border-color: var(--vin-or-texte);
  color: var(--vin-noir);
  box-shadow: none;
  transform: translateY(-2px);
}
header.site-header.hdr-classic .btn.btn-outline {
  background: transparent;
  border-color: rgba(246, 213, 213,.4);
  color: var(--vin-texte-clair);
}
header.site-header.hdr-classic .btn.btn-outline:hover {
  border-color: var(--vin-or-texte);
  background: rgba(213, 70, 70,.12);
  color: var(--vin-or-texte);
}

/* TIROIR MOBILE (noir, liens or) */

.mobile-drawer { background: var(--vin-noir); }

.mobile-close {
  background: var(--vin-noir-clair);
  border: 1px solid rgba(213, 70, 70,.35);
  color: var(--vin-or-texte);
}
.mobile-close:hover { background: rgba(213, 70, 70,.14); }

.mobile-nav-link {
  color: var(--vin-texte-clair);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(213, 70, 70,.14);
}
.mobile-nav-link:hover { background: rgba(213, 70, 70,.12); color: var(--vin-or-texte); }
.mobile-nav-link:focus-visible { outline: 2px solid var(--vin-or-texte); outline-offset: -2px; }

.mobile-section-title { color: #a95a5a; }

.mobile-auth .btn.btn-primary {
  background: var(--vin-noir-clair);
  border: 1.5px solid var(--vin-or-texte);
  color: var(--vin-or-texte);
  min-height: 44px;
  font-weight: 700;
}
.mobile-auth .btn.btn-primary:hover { background: var(--vin-or-texte); color: var(--vin-noir); }
.mobile-auth .btn.btn-outline {
  background: var(--vin-noir-clair);
  border: 1.5px solid rgba(213, 70, 70,.4);
  color: var(--vin-texte-clair);
  min-height: 44px;
}

/* FOOTER (bordeaux, deux blocs) */

footer.site-footer.ftr-rich {
  background: var(--vin-bordeaux);
  color: var(--vin-texte-clair);
  padding-top: 44px;
}

footer.site-footer.ftr-rich .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 36px 56px;
}

/* bloc gauche : marque + tagline */
footer.site-footer.ftr-rich .ftr-rich-top {
  flex: 1 1 280px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  animation: apparitionEnFondu .6s ease both;
}
footer.site-footer.ftr-rich .ftr-rich-brand { gap: 12px; }
footer.site-footer.ftr-rich .ftr-rich-brand .brand-logo {
  border-radius: 50%;
  border: 2px solid var(--vin-or-texte);
  padding: 3px;
  background: var(--vin-noir);
}
footer.site-footer.ftr-rich .footer-brand {
  font-family: var(--vin-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--vin-or-texte);
}
footer.site-footer.ftr-rich .footer-tagline {
  color: rgba(246, 213, 213,.8);
  max-width: 340px;
}

/* bloc droit : liens en colonne */
footer.site-footer.ftr-rich .ftr-rich-grid {
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 0;
}
footer.site-footer.ftr-rich .footer-heading {
  color: var(--vin-or-texte);
  font-family: var(--vin-serif);
  font-style: italic;
  letter-spacing: .04em;
}
footer.site-footer.ftr-rich .footer-links a { color: var(--vin-texte-clair); }
footer.site-footer.ftr-rich .footer-links a:hover { color: var(--vin-or-texte); }

/* un groupe sans aucun lien (gabarit générique) ne laisse pas de trou */
footer.site-footer.ftr-rich .ftr-rich-grid > div:not(:has(a)) { display: none; }

/* bas de page or, en pleine largeur du footer */
footer.site-footer.ftr-rich .footer-bottom {
  flex: 1 0 100%;
  width: 100%;
  background: var(--vin-or);
  border-top: none;
  border-radius: 12px 12px 0 0;
  margin: 32px -20px 0;
  padding: 14px 20px;
  color: var(--vin-noir);
}
footer.site-footer.ftr-rich .footer-copy { color: var(--vin-noir); font-weight: 600; }
footer.site-footer.ftr-rich .footer-bottom-links a { color: var(--vin-noir); font-weight: 600; }
footer.site-footer.ftr-rich .footer-bottom-links a:hover { color: var(--vin-bordeaux-fonce); text-decoration: underline; }

/* PAGE « AJOUTER MON ENTREPRISE » */

.ie-wrap .page-header h1 {
  font-family: var(--vin-serif);
  color: var(--vin-bordeaux);
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.ie-wrap .page-header h1::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 64px; height: 3px;
  background: var(--vin-or);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  animation: filetOrEtire .8s .2s cubic-bezier(.4,0,.2,1) both;
}

/* le bandeau d'arguments passe au-dessus du formulaire, en pleine largeur */
.ie-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
}

.ie-side {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  background: var(--vin-bordeaux);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 10px 22px -10px rgba(127, 29, 29,.45);
  position: relative;
  overflow: hidden;
  animation: apparitionEnFondu .55s ease both;
}
.ie-side::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vin-or-texte);
  transform: scaleX(0);
  transform-origin: left;
  animation: filetOrEtire .9s .1s ease both;
}
.ie-side .ie-why {
  flex: 1 1 260px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  color: var(--vin-texte-clair);
}
.ie-side .ie-why:hover { box-shadow: none; }
.ie-side .ie-why h2 { font-family: var(--vin-serif); color: var(--vin-or-texte); font-size: 1.1rem; }
.ie-side .ie-why p { color: var(--vin-texte-clair); }
.ie-side .ie-why li::marker { color: var(--vin-or-texte); }

/* le formulaire : champs à fond crème */
.ie-card {
  background: var(--vin-creme-vif);
  border: 1px solid rgba(127, 29, 29,.18);
  border-radius: 16px;
  margin-top: 0;
}
.ie-card .qf-section {
  color: var(--vin-bordeaux);
  font-family: var(--vin-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .05em;
}
.ie-card .qf-section + .quote-lead-grid + .qf-section { border-top-color: rgba(127, 29, 29,.25); }

.ie-card .quote-field label { color: #3a2222; }
.ie-card .quote-field input,
.ie-card .quote-field select,
.ie-card .quote-field textarea {
  background: var(--vin-creme);
  border-color: rgba(127, 29, 29,.25);
  color: #2b1717;
}
.ie-card .quote-field input:focus,
.ie-card .quote-field select:focus,
.ie-card .quote-field textarea:focus {
  border-color: var(--vin-bordeaux);
  box-shadow: 0 0 0 3px rgba(127, 29, 29,.18);
  background: #fff;
}

/* bouton bordeaux */
.ie-card .quote-lead-actions .btn.btn-primary {
  background: var(--vin-bordeaux);
  border-color: var(--vin-bordeaux);
  color: #fff;
  min-height: 46px;
  padding: 12px 26px;
  font-family: var(--vin-serif);
  letter-spacing: .02em;
  transition: transform .2s ease, background .2s ease, filter .2s ease;
}
.ie-card .quote-lead-actions .btn.btn-primary:hover {
  background: var(--vin-bordeaux-fonce);
  border-color: var(--vin-bordeaux-fonce);
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.ie-card .quote-lead-actions small { color: #6b4a4a; }

/* mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  header.site-header.hdr-classic .brand,
  header.site-header.hdr-classic .nav-desktop::before,
  header.site-header.hdr-classic .dropdown.open .dropdown-panel,
  footer.site-footer.ftr-rich .ftr-rich-top,
  .ie-wrap .page-header h1::after,
  .ie-side,
  .ie-side::before {
    animation: none;
  }
  header.site-header.hdr-classic .nav-link::after,
  header.site-header.hdr-classic .btn.btn-primary,
  .ie-card .quote-lead-actions .btn.btn-primary {
    transition: none;
  }
}

