/* Page temporaire – Bougies PartyLite par Cécile
   Charte reprise du thème fundrize (bougies-partylite.fr) :
   rose #EB81A9 (barre haute, icônes), marine #0D335A (menu, liens, pied),
   texte #4C4C4C, titres #292929, fond de section #F5F5F5.
   Écarts volontaires pour la lisibilité : sous-titres #6b6b6b (au lieu de #999),
   corps 16 px (au lieu de 14 px), rose foncé réservé au texte (survol, signature).
   Polices auto-hébergées : Montserrat (variable) et Dancing Script 700. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dancing-script-700-latin.woff2") format("woff2");
}

:root {
  --rose: #EB81A9;
  --rose-fonce: #C2386F;      /* texte au survol / focus : 4,7:1 sur #F5F5F5 */
  --rose-signature: #D4568A;  /* texte large : 3,8:1 sur blanc */
  --marine: #0D335A;
  --texte: #4C4C4C;
  --titre: #292929;
  --gris: #6b6b6b;
  --fond: #F5F5F5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--texte);
  background: #fff;
}
.conteneur {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Barre rose (top bar du thème : 40 px, texte blanc gras) */
.barre-haute {
  background: var(--rose);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 40px;
}

/* En-tête blanc : logo à gauche, bloc E-mail à droite (comme le thème) */
.en-tete {
  padding: 22px 0;
}
.en-tete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.en-tete img {
  display: block;
  width: 198px;
  height: auto;
  flex: none;
}
.en-tete .info {
  display: flex;
  align-items: center;
  line-height: 22px;
}
.en-tete .info svg {
  width: 44px;
  height: 44px;
  flex: none;
  margin-right: 16px;
}
.en-tete .info .titre {
  display: block;
  color: var(--marine);
  font-weight: 700;
  font-size: 13px;
}
.en-tete .info a {
  color: var(--marine);
  font-size: 15px;
  text-decoration: none;
}
.en-tete .info a:hover,
.en-tete .info a:focus-visible {
  color: var(--rose-fonce);
}

/* Bandeau marine (barre de menu du thème : 56 px, lettrage 1 px, item actif souligné) */
.bandeau-marine {
  margin: 0;
  background: var(--marine);
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  line-height: 56px;
  letter-spacing: 1px;
}
.bandeau-marine span {
  display: inline-block;
  padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 -3px 0 #fff;
}

/* Bannière photo avec voile léger et titre blanc, comme le slider d'origine */
.hero {
  position: relative;
  height: 34vw;
  min-height: 300px;
  max-height: 480px;
  background: var(--marine) url("bougies-banniere.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
}
.hero h1 {
  position: relative;
  margin: 0;
  padding: 0 20px;
  color: #fff;
  font-weight: 700;
  font-size: 34px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Section principale sur fond gris clair */
.principal {
  background: var(--fond);
  padding: 60px 0 70px;
}
.titre-section {
  text-align: center;
  margin-bottom: 40px;
}
.titre-section h2 {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--titre);
  margin: 0 0 2px;
}
.titre-section p {
  margin: 0;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* Carte blanche plate, comme les cartes « offres » du thème */
.carte {
  background: #fff;
  max-width: 780px;
  margin: 0 auto;
}
.carte img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.carte-contenu {
  padding: 28px 32px 32px;
}
.carte-contenu p {
  margin: 0 0 16px;
}
.carte-contenu p:last-child {
  margin-bottom: 0;
}
.carte-contenu .accroche {
  color: var(--marine);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.3px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eee;
}
.signature {
  margin-top: 24px !important;
}
.signature .prenom {
  display: block;
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: var(--rose-signature);
}

/* Contact discret sous la carte */
.contact {
  text-align: center;
  margin: 32px 0 0;
  font-size: 0.9375rem;
  color: var(--gris);
}
.contact a {
  display: inline-flex;
  align-items: center;
  padding: 6px 4px;
  vertical-align: middle;
  color: var(--marine);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--rose-fonce);
  border-bottom-color: var(--rose-fonce);
}
.contact svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-right: 8px;
}
.contact a:focus-visible,
.en-tete .info a:focus-visible,
.pied a:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 4px;
  border-radius: 2px;
}
.pied a:focus-visible {
  outline-color: #fff;
}

/* Pied de page marine (14 px, 33 px de marge, crédit d'origine) */
.pied {
  background: var(--marine);
  color: #fff;
  font-size: 0.875rem;
  padding: 33px 0;
}
.pied a {
  color: #fff;
  text-decoration: none;
}
.pied a:hover,
.pied a:focus-visible {
  color: var(--rose);
}

@media (max-width: 767px) {
  .barre-haute { display: none; }              /* masquée sur mobile comme dans le thème */
  .en-tete { padding: 15px 0; }
  .en-tete .info { display: none; }
  .bandeau-marine {
    line-height: 50px;
    font-size: 14px;
  }
  .bandeau-marine span {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .principal { padding: 40px 0 50px; }
  .titre-section { margin-bottom: 28px; }
  .titre-section h2 { font-size: 30px; }
  .carte img { height: 200px; }
  .carte-contenu { padding: 24px 20px 28px; }
  .contact { margin-top: 28px; }
  .contact a {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pied { text-align: center; }
}

@media print {
  .barre-haute, .bandeau-marine, .pied {
    background: none !important;
    color: #000;
  }
  .bandeau-marine span {
    border: 0;
    box-shadow: none;
  }
  .hero {
    background: none;
    height: auto;
    min-height: 0;
    padding: 16px 0;
  }
  .hero::before { display: none; }
  .hero h1 {
    color: #000;
    text-shadow: none;
  }
  .principal {
    background: none;
    padding: 16px 0;
  }
  .carte img { display: none; }
  .contact, .contact a, .en-tete .info a, .pied a { color: #000; }
}