/* ==========================================================================
   Danse Mariage — feuille de style principale
   Couleurs reprises du kit Elementor d'origine
   ========================================================================== */
@import url("fonts.css");

:root {
  --noir: #000000;
  --rose: #EDA6AB;
  --rose-titre: #EEAAAE;
  --rose-vif: #f78da7;
  --lien: #CC3366;
  --texte: #4B4B4B;
  --gris-clair: #EAEAEA;
  --creme: #FEF0E7;
  --beige: #F8F3EF;
  --blanc: #FFFFFF;
  --conteneur: 1140px;
  --f-titre: "Titillium Web", sans-serif;
  --f-script: "Rouge Script", cursive;
  --f-texte: "Roboto", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-decoration: none; transition: color .3s, background-color .3s; }
h1, h2, h3 { margin: 0; font-family: var(--f-titre); font-weight: 600; color: var(--noir); line-height: 1.2; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
svg { fill: currentColor; }

.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: 0 10px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: relative;
  z-index: 50;
  background: var(--blanc);
}
.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 154px;
  padding: 0 40px;
  gap: 2.2%;
}
.entete__logo img { width: 110px; height: 110px; object-fit: contain; }

.nav { display: flex; align-items: center; }
.nav__liste { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__lien {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--noir);
}
.nav__lien:hover, .nav__lien:focus-visible { background: var(--noir); color: var(--blanc); }
.nav__lien.actif { background: var(--beige); color: var(--noir); }
.nav__caret { width: 10px; height: 10px; }

.sous-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 290px;
  list-style: none; margin: 0; padding: 0;
  background: var(--blanc);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__item:hover > .sous-menu,
.nav__item:focus-within > .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu a {
  display: block;
  padding: 13px 20px;
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 15px;
  color: var(--texte);
}
.sous-menu a:hover, .sous-menu a.actif { background: var(--beige); color: var(--noir); }

.entete__tel {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-titre);
  font-size: 15px;
  color: var(--noir);
}
.entete__tel-icone {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--creme); color: var(--rose);
}
.entete__tel-icone svg { width: 13px; height: 13px; }
.entete__tel:hover { color: var(--rose); }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer; padding: 8px;
  color: var(--noir);
}
.burger svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Hero accueil
   -------------------------------------------------------------------------- */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  min-height: 420px;
  padding: 30px 20px 50px;
  text-align: center;
  background: url("../images/header-accueil.jpg") center center / cover no-repeat;
}
.hero__logo { width: 180px; height: 180px; }
.hero h2 {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 56px;
  color: var(--blanc);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.bouton {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 3px;
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 13px;
  background: var(--rose);
  color: var(--blanc);
}
.bouton:hover { background: var(--noir); color: var(--blanc); }

/* Bandeau réseaux / partenaire */
.partenaires {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 10px 10px 40px;
}
.partenaires__col {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
}
.partenaires__col + .partenaires__col { border-left: 1px solid #ddd; }
.facebook {
  display: grid; place-items: center;
  width: 39px; height: 39px; border-radius: 3px;
  background: #3b5998; color: var(--blanc);
}
.facebook svg { width: 20px; height: 20px; }
.facebook:hover { opacity: .9; }

/* --------------------------------------------------------------------------
   Bannière des pages intérieures
   -------------------------------------------------------------------------- */
.banniere {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  padding: 20px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
.banniere h1 {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 75px;
  color: var(--blanc);
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* Fil d'Ariane */
.ariane { padding: 10px 0; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ariane li { display: flex; align-items: center; gap: 14px; color: var(--rose); }
.ariane li + li::before {
  content: "";
  width: 6px; height: 11px;
  background: var(--noir);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ariane a { color: var(--rose); display: flex; }
.ariane a:hover { color: var(--noir); }
.ariane .maison { color: var(--noir); }
.ariane .maison svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */
.section { padding: 10px 0; }
.titre-section { font-size: 28px; }
.pink_txt {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 34px;
  color: var(--rose-titre);
}

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 10px 0 20px;
}
.deux-colonnes > * { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.deux-colonnes h3 { font-size: 24px; }

.texte strong { color: var(--texte); font-weight: 700; }
.texte ul { margin: 0 0 .9em; padding-left: 1.4em; }
.texte li { margin-bottom: .3em; }
.rose { color: var(--rose-vif); text-transform: uppercase; margin: 0; }

/* Cartes offres */
.offres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 10px 0 40px;
}
.offre { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.offre__image {
  min-height: 400px;
  background-size: cover;
  background-position: center;
}
.offre h2 { font-size: 28px; }
.offre p { margin: 0; }
.offre__lien {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 12px 24px;
  font-family: var(--f-texte); font-weight: 500; font-size: 13px;
  background: var(--blanc);
  color: var(--rose);
}
.offre__lien svg { width: 12px; height: 12px; }
.offre__lien:hover { color: var(--noir); }

/* Pages simples (mentions légales, plan du site) */
.page-simple { padding: 30px 10px 60px; }
.page-simple h2 { font-size: 22px; margin: 1.4em 0 .5em; }
.page-simple ul { padding-left: 1.4em; }
.page-simple li { margin-bottom: .4em; }
.a-completer { background: #fff7d6; padding: 0 4px; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied__logo {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  margin: 30px 0 -50px;
}
.pied__logo img { width: 100px; height: 100px; }
.pied__infos {
  background: var(--gris-clair);
  padding: 70px 0;
}
.pied__infos .conteneur { display: grid; grid-template-columns: repeat(3, 1fr); }
.pied__col {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 10px;
  text-align: center;
  font-family: var(--f-titre);
  font-size: 16px;
  line-height: 1.6;
}
.pied__col svg { height: 35px; width: 35px; color: var(--rose); }
.pied__col a:hover { color: var(--noir); }
.pied__col p { margin: 0; }

.pied__bas { padding: 10px 0; }
.pied__bas ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  list-style: none; margin: 0; padding: 0;
  font-size: 14px; color: var(--rose);
}
.pied__bas a { color: var(--rose); }
.pied__bas a:hover { color: var(--noir); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .entete__inner { padding: 0 20px; min-height: 110px; }
  .entete__logo img { width: 84px; height: 84px; }
  .burger { display: block; order: 2; }
  .entete__tel { order: 3; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none;
    background: var(--blanc);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }
  .nav.ouvert { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien { padding: 14px 20px; }
  .sous-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; min-width: 0;
  }
  .sous-menu a { padding-left: 40px; }
  .banniere h1 { font-size: 60px; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  .entete__inner { padding: 0 16px; }
  .entete__tel-texte { display: none; }
  .hero { min-height: 360px; }
  .hero__logo { width: 140px; height: 140px; }
  .hero h2 { font-size: 42px; }
  .partenaires { grid-template-columns: 1fr; padding: 10px 16px 30px; }
  .partenaires__col + .partenaires__col { border-left: 0; border-top: 1px solid #ddd; }
  .banniere { min-height: 220px; }
  .banniere h1 { font-size: 48px; }
  .conteneur { padding: 0 16px; }
  .deux-colonnes, .offres { grid-template-columns: 1fr; }
  .deux-colonnes > *, .offre { padding: 10px 0; }
  .offre__image { min-height: 300px; }
  .pied__infos { padding: 70px 0 40px; }
  .pied__infos .conteneur { grid-template-columns: 1fr; gap: 20px; }
}