/* =========================================================
   ECHO ÉVÉNEMENTS — Design System
   Violet / Doré / Noir — sections claires pour trancher
   Chargé APRÈS style-tailwind.css : peut surcharger.
   ========================================================= */

:root {
  --e-ink: #0b0614; /* fond principal (noir violacé) */
  --e-night: #150a26; /* panneau sombre */
  --e-panel: #1d0f33; /* carte sombre */
  --e-violet: #2c035a; /* violet marque */
  --e-violet-hi: #4a1a86; /* violet clair (accents/hover) */
  --e-gold: #e4bc3b; /* doré marque */
  --e-gold-hi: #f2dd94; /* doré clair */
  --e-cream: #f7f5f2; /* fond clair */
  --e-line: rgba(228, 188, 59, 0.22); /* filets dorés discrets */
  --e-radius: 14px;
}

/* ---------- Base ---------- */
body {
  background-color: var(--e-ink);
  color: #ece7f5;
  font-family: "baseTypo", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: "titleFont", "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

a {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease;
}

::selection {
  background: var(--e-gold);
  color: #1a0533;
}

/* ---------- Rythme de sections ---------- */
/* Fond sombre par défaut ; les sections claires viennent trancher */
.section-dark {
  background-color: var(--e-ink);
  color: #ece7f5;
}
.section-night {
  background-color: var(--e-night);
  color: #ece7f5;
}
.section-light {
  background-color: var(--e-cream);
  color: #1a1024;
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6 {
  color: #1a1024;
}

/* Eyebrow / sur-titre doré */
.eyebrow {
  font-family: "titleFont", "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--e-gold);
}

/* Accent doré sur mots de titres (span) */
.text-gold,
.accent-gold {
  color: var(--e-gold) !important;
}

/* Séparateur doré */
.separatorTitle,
.e-sep {
  display: inline-block;
  height: 3px;
  width: 80px;
  background: linear-gradient(90deg, var(--e-gold), transparent);
  border-radius: 2px;
}

/* ============================================================
   BOUTON UNIQUE — doré plein, texte sombre
   .btn = base ; utilisée partout, décliné sombre/clair
   ============================================================ */
.btn,
.echo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  background: var(--e-gold);
  color: #1a0533;
  border: 1px solid var(--e-gold);
  box-shadow: 0 6px 22px -8px rgba(228, 188, 59, 0.55);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}
.btn:hover,
.echo-btn:hover {
  background: var(--e-gold-hi);
  color: #1a0533;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(228, 188, 59, 0.7);
}
.btn:focus-visible,
.echo-btn:focus-visible {
  outline: 2px solid var(--e-gold-hi);
  outline-offset: 3px;
}

/* Variante discrète (même famille, pour actions secondaires rares) :
   contour doré, transparent — À N'UTILISER QUE si un 2e niveau est requis */
.btn-ghost {
  background: transparent;
  color: var(--e-gold);
  border: 1px solid rgba(228, 188, 59, 0.5);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(228, 188, 59, 0.1);
  color: var(--e-gold-hi);
  transform: translateY(-2px);
}

/* ---------- Contenu riche (WYSIWYG ACF) ---------- */
.e-prose {
  color: #d6cfe6;
}
.section-light .e-prose {
  color: #4a4058;
}
.e-prose p {
  margin-bottom: 1rem;
}
.e-prose p:last-child {
  margin-bottom: 0;
}
.e-prose strong {
  color: #fff;
  font-weight: 600;
}
.section-light .e-prose strong {
  color: #1a1024;
}
.e-prose h2,
.e-prose h3,
.e-prose h4 {
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 600;
  color: #fff;
  margin: 1.5rem 0 0.75rem;
}
.section-light .e-prose h2,
.section-light .e-prose h3,
.section-light .e-prose h4 {
  color: #1a1024;
}
.e-prose ul,
.e-prose ol {
  margin: 0 0 1rem 1.25rem;
}
.e-prose ul {
  list-style: none !important;
  margin-left: 0;
  padding-left: 0;
}
.e-prose ul li {
  position: relative;
  list-style: none !important;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
}
.e-prose ul li::marker {
  content: "";
}
.e-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--e-gold);
}
.e-prose ol {
  list-style: decimal;
}
.e-prose ol li {
  margin-bottom: 0.5rem;
}
.e-prose a {
  color: var(--e-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.e-prose a:hover {
  color: var(--e-gold-hi);
}

/* ---------- Cartes sombres ---------- */
.e-card {
  background: var(--e-panel);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
}

/* ---------- CTA immersif : halo + égaliseur ---------- */
/* Équilibre les lignes du titre (évite un mot/"?" orphelin en dernière ligne) */
.cta-title {
  text-wrap: balance;
}
.cta-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 600px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(228, 188, 59, 0.28), transparent 70%),
    radial-gradient(closest-side, rgba(74, 26, 134, 0.5), transparent 75%);
  filter: blur(30px);
  z-index: 0;
}
.eq-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 42px;
}
.eq-bars span {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--e-gold), var(--e-gold-hi));
  height: 30%;
  animation: eqPulse 1.1s ease-in-out infinite;
}
.eq-bars span:nth-child(1) {
  animation-delay: -0.9s;
}
.eq-bars span:nth-child(2) {
  animation-delay: -0.2s;
}
.eq-bars span:nth-child(3) {
  animation-delay: -0.6s;
}
.eq-bars span:nth-child(4) {
  animation-delay: -0.1s;
}
.eq-bars span:nth-child(5) {
  animation-delay: -0.8s;
}
.eq-bars span:nth-child(6) {
  animation-delay: -0.3s;
}
.eq-bars span:nth-child(7) {
  animation-delay: -0.7s;
}
.eq-bars span:nth-child(8) {
  animation-delay: -0.4s;
}
.eq-bars span:nth-child(9) {
  animation-delay: -0.5s;
}
@keyframes eqPulse {
  0%,
  100% {
    height: 25%;
    opacity: 0.7;
  }
  50% {
    height: 100%;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eq-bars span {
    animation: none;
    height: 60%;
  }
}

/* Les liens dorés sont gérés uniquement dans le texte riche (.e-prose a),
   pour ne pas colorer les liens utilitaires (coordonnées, boutons-icônes…). */

/* ============================================================
   NAVIGATION
   ============================================================ */
.echo-nav {
  background: rgba(11, 6, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--e-line);
}

/* Bascule menu / burger — EXACTEMENT à 1280px :
   > 1280px = menu complet ; ≤ 1280px = burger */
.echo-nav-links {
  display: none;
}
.echo-burger {
  display: inline-flex;
}
@media (min-width: 1281px) {
  .echo-nav-links {
    display: flex;
  }
  .echo-burger {
    display: none;
  }
}

/* Liens du menu principal */
#menu-main {
  align-items: center;
}
#menu-main > li > a {
  color: #ece7f5;
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  position: relative;
}
#menu-main > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--e-gold);
  transition: width 0.22s ease;
}
#menu-main > li:hover > a,
#menu-main > li.current-menu-item > a,
#menu-main > li.current-menu-ancestor > a {
  color: var(--e-gold);
}
#menu-main > li:hover > a::after,
#menu-main > li.current-menu-item > a::after {
  width: 100%;
}

/* Sous-menus (dropdown) */
#menu-main li .sub-menu {
  background: var(--e-panel);
  border: 1px solid var(--e-line);
  border-radius: 10px;
  padding: 0.5rem 0;
  min-width: 220px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}
#menu-main li .sub-menu a {
  color: #ece7f5 !important;
  padding: 0.5rem 1.2rem;
  display: block;
  font-size: 0.95rem;
}
#menu-main li .sub-menu a:hover {
  color: var(--e-gold) !important;
  background: rgba(228, 188, 59, 0.08);
}

/* Boutons-icônes de contact (nav) — chips ronds, cohérents avec le doré */
.echo-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(228, 188, 59, 0.45);
  color: var(--e-gold);
  background: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.echo-icon-btn:hover {
  background: var(--e-gold);
  color: #1a0533;
  transform: translateY(-2px);
}
.echo-icon-btn i {
  font-size: 1.15rem;
  line-height: 1;
}

/* Burger / close */
.echo-burger,
.echo-close {
  color: var(--e-gold);
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.echo-close {
  display: inline-flex;
}

/* Panneau mobile */
.echo-mobile-panel {
  background: var(--e-ink) !important;
  border-right: 1px solid var(--e-line);
}
.navbar-menu ul.mobile > li > a {
  color: #ece7f5;
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  padding: 0.6rem 0;
  display: block;
}
.navbar-menu ul.mobile > li > a:hover {
  color: var(--e-gold);
}

/* ============================================================
   FORMULAIRES — style partagé FormBuilder + Contact Form 7
   Les 2 formulaires du site ont donc un rendu identique.
   ============================================================ */

/* Labels */
.e-card label,
#contactForm label,
.wpcf7-form label {
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: #d9cff0 !important;
  margin-bottom: 0.4rem;
  display: block;
}

/* Champs texte / email / tel / date / number / textarea / select
   Sélecteurs volontairement spécifiques (#contactForm / .wpcf7-form + type)
   pour primer sur les règles input[type=...] du thème et TOUT harmoniser. */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm input[type="number"],
#contactForm input[type="date"],
#contactForm textarea,
#contactForm select,
input.form-field,
textarea.form-field,
select.form-field,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(228, 188, 59, 0.22) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  color: #fff !important;
  font-family: "baseTypo", "Inter", sans-serif;
  font-size: 1rem;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder,
input.form-field::placeholder,
textarea.form-field::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #9a8fb3 !important; /* gris comme demandé pour tous les champs */
  opacity: 1;
}
#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus,
input.form-field:focus,
textarea.form-field:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--e-gold) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(228, 188, 59, 0.15) !important;
}
.wpcf7-form select option {
  color: #1a1024;
}
#contactForm textarea,
.wpcf7-form textarea,
textarea.form-field {
  min-height: 160px !important;
  resize: vertical;
}

/* Sous-titre / texte d'aide sous un titre de form */
.form-help {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #b9aed2;
  margin-bottom: 1.75rem;
}

/* Groupe de champs FormBuilder */
#contactForm fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

/* ---------- Case à cocher générique (custom, sans boîte) ---------- */
.wpcf7-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1.5px solid rgba(228, 188, 59, 0.55);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
.wpcf7-checkbox input[type="checkbox"]:checked {
  background: var(--e-gold);
  border-color: var(--e-gold);
}
.wpcf7-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #1a0533;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- Bouton submit = LE bouton doré ---------- */
.submitButton,
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "titleFont", "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  padding: 0.95rem 2.2rem !important;
  border-radius: 999px !important;
  background: var(--e-gold) !important;
  color: #1a0533 !important;
  border: 1px solid var(--e-gold) !important;
  box-shadow: 0 6px 22px -8px rgba(228, 188, 59, 0.55);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.submitButton:hover,
.wpcf7-submit:hover {
  background: var(--e-gold-hi) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(228, 188, 59, 0.7);
}

/* ---- Mise en page du formulaire devis (CF7) ---- */
.form-devis .wpcf7-form-control-wrap {
  display: block;
}
/* chaque champ = un bloc espacé */
.form-devis .fd-field {
  margin-bottom: 1rem;
}
/* grille 2 colonnes (email/tél, date/invités) */
.form-devis .fd-grid,
.form-devis .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-devis .fd-grid .fd-field {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .form-devis .fd-grid,
  .form-devis .grid-2 {
    grid-template-columns: 1fr;
  }
}
.form-devis .fd-submit {
  margin-top: 1.75rem;
}
/* Le bloc "Options" et le message occupent toute la largeur (hors grille) */

/* Cartes d'options (case + titre + description) du formulaire devis */
.opt-item {
  border: 1px solid rgba(228, 188, 59, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem 1.15rem;
  margin-bottom: 0.75rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.opt-item:hover {
  border-color: rgba(228, 188, 59, 0.5);
  background: rgba(228, 188, 59, 0.05);
}

/* Les wrappers inline de CF7 passent en bloc pleine largeur (sinon le titre
   se fait écraser par la description qui lui vole la largeur) */
.opt-item .wpcf7-form-control-wrap,
.opt-item .wpcf7-checkbox,
.opt-item .wpcf7-list-item {
  display: block !important;
  width: 100%;
  margin: 0;
}

/* Ligne : case + titre, pleine largeur */
.opt-item .wpcf7-list-item label {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  font-family: "titleFont", "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.opt-item .wpcf7-list-item-label {
  flex: 1 1 auto;
}

/* Description sous le titre, alignée avec le texte */
.opt-item .opt-desc {
  display: block;
  margin: 0.5rem 0 0;
  padding-left: calc(22px + 0.8rem);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #a99fc4;
}

/* Titre de section de champs (ex: "Options") */
.form-section-title {
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 600;
  color: var(--e-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  margin: 2rem 0 1rem;
}

/* ============================================================
   RÉSEAUX SOCIAUX sur fonds sombres (nav, hero, footer)
   ============================================================ */
.echo-nav .navSocial,
.echo-mobile-panel .navSocial,
.page-title-5 .social > a,
.socialFooter {
  background: transparent !important;
  color: #ece7f5 !important;
  box-shadow: none !important;
  border: 1px solid var(--e-line);
  padding: 0.6rem !important;
}
.echo-nav .navSocial:hover,
.echo-mobile-panel .navSocial:hover,
.page-title-5 .social > a:hover,
.socialFooter:hover {
  color: var(--e-gold) !important;
  border-color: rgba(228, 188, 59, 0.5);
}
.echo-nav .navSocial svg,
.page-title-5 .social > a svg,
.socialFooter svg {
  fill: currentColor;
}

/* ============================================================
   FOOTER — restyle via CSS (le PHP n'est pas touché,
   le grand SVG de copyright est donc préservé).
   Spécificité footer.v3Footer + !important pour primer
   sur les styles inline pilotés par les options ACF.
   ============================================================ */
footer.v3Footer {
  background-color: var(--e-ink) !important;
  color: #ece7f5;
  border-top: 1px solid var(--e-line);
}
footer.v3Footer i {
  color: var(--e-gold) !important;
  fill: var(--e-gold) !important;
}
footer.v3Footer .txtCustom {
  color: #cfc6e4 !important;
}
footer.v3Footer .txtCustom a {
  color: inherit !important;
}
footer.v3Footer .txtCustom a:hover,
footer.v3Footer .txtCustom:hover a {
  color: var(--e-gold) !important;
}

/* Menu du footer */
#footerMenu > li > a {
  color: #ece7f5;
  font-family: "titleFont", "Space Grotesk", sans-serif;
  transition: color 0.2s ease;
}
#footerMenu > li:hover > a,
#footerMenu > li.current-menu-item > a,
#footerMenu > li.current-menu-ancestor > a {
  color: var(--e-gold) !important;
}

/* Réseaux sociaux du footer */
footer.v3Footer .socialFooter {
  background: transparent !important;
  border: 1px solid var(--e-line);
}
footer.v3Footer .socialFooter svg {
  fill: currentColor !important;
  color: #ece7f5 !important;
}
footer.v3Footer .socialFooter:hover {
  border-color: rgba(228, 188, 59, 0.5);
}
footer.v3Footer .socialFooter:hover svg {
  fill: var(--e-gold) !important;
  color: var(--e-gold) !important;
}

/* Barre copyright (garde son fond très sombre) : liens dorés au survol */
footer.v3Footer a:hover {
  color: var(--e-gold);
}

/* ============================================================
   PUBLICATIONS (article-builder) — single + blocs + blog
   ============================================================ */
.publication-cover img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--e-radius);
}
.publication-builder .art-block {
  margin-bottom: 2.5rem;
}
.publication-builder .art-block:last-child {
  margin-bottom: 0;
}
.art-titre {
  margin-top: 1rem;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--e-line);
  color: #ece7f5;
  font-family: "titleFont", "Space Grotesk", sans-serif;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.blog-pagination a:hover {
  border-color: rgba(228, 188, 59, 0.5);
  color: var(--e-gold);
}
.blog-pagination span.current {
  background: var(--e-gold);
  color: #1a0533;
  border-color: var(--e-gold);
}