/*
Theme Name: Maison Éclat (multi-pages)
Theme URI: https://the-perfectdate.com
Author: Antoine
Description: Thème multi-pages du site Wedding Planner « Maison Éclat ». Chaque page est un fichier séparé (front-page.php, page-prestations.php, page-lieux.php, page-portfolio.php, page-contact.php). Le menu et le pied de page sont dans header.php et footer.php.
Version: 2.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: maison-eclat
*/

    --bg:#FBF9F6;        /* ivoire chaud */
    --bg-2:#F2ECE3;      /* beige clair */
    --ink:#232120;       /* charbon */
    --muted:#6E675E;     /* gris chaud */
    --accent:#B29466;    /* champagne / or discret */
    --line:#E4DBCF;      /* filet clair */
    --white:#ffffff;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Jost',sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.15}
  img{display:block;width:100%;height:100%;object-fit:cover}
  a{color:inherit;text-decoration:none}

  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  .eyebrow{
    font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
    color:var(--accent);font-weight:500;margin-bottom:18px;
  }
  .btn{
    display:inline-block;font-family:'Cormorant Garamond',sans-serif;font-weight:400;
    font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
    padding:16px 34px;border:1px solid var(--ink);color:var(--ink);
    background:transparent;cursor:pointer;transition:.35s ease;
  }
  .btn:hover{background:var(--ink);color:var(--bg)}
  .btn-light{border-color:var(--white);color:var(--white)}
  .btn-light:hover{background:var(--white);color:var(--ink)}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:26px 0;transition:.4s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(251,249,246,.92);backdrop-filter:blur(10px);
    padding:16px 0;border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between}
  .logo{
    font-family:'Jost',serif;font-size:1.65rem;font-weight:600;
    letter-spacing:.14em;color:var(--white);transition:.4s ease;
  }
  header.scrolled .logo{color:var(--ink)}
  .logo span{color:var(--accent)}
  .nav-links{display:flex;gap:38px;align-items:center}
  .nav-links a{
    font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--white);font-weight:400;transition:.3s;position:relative;
  }
  header.scrolled .nav-links a{color:var(--ink)}
  .nav-links a:not(.nav-cta):hover{color:var(--accent)}
  .nav-cta{
    border:1px solid rgba(255,255,255,.6);padding:11px 22px;
  }
  header.scrolled .nav-cta{border-color:var(--ink)}
  .nav-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--white)!important}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
  .burger span{width:26px;height:1.5px;background:var(--white);transition:.3s}
  header.scrolled .burger span{background:var(--ink)}

  /* ---------- HERO ---------- */
  .hero{
    height:100vh;min-height:640px;position:relative;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--white);overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    /* REMPLACER par votre photo (grand format, paysage) */
    background:url('https://www.the-perfectdate.com/wp-content/uploads/2026/07/7205ef60-9eb0-4b90-88b2-ca43c401dd02.jpeg') center/cover no-repeat;
    z-index:-2;
  }
  .hero::after{content:"";position:absolute;inset:0;background:rgba(30,26,22,.42);z-index:-1}
  .hero-inner{max-width:760px;padding:0 24px;animation:rise 1.2s ease both}
  .hero .eyebrow{color:#E8D9C0}
  .hero h1{font-size:clamp(2.8rem,6vw,5rem);font-weight:400;letter-spacing:.02em;margin-bottom:22px}
  .hero p{font-size:1.05rem;font-weight:300;max-width:520px;margin:0 auto 38px;opacity:.95}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* ---------- SECTIONS ---------- */
  section{padding:110px 0}
  .center{text-align:center;max-width:640px;margin:0 auto 70px}
  .center h2{font-size:clamp(2.1rem,4vw,3rem)}
  .center p{color:var(--muted);margin-top:16px}

  /* Intro / à propos */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  .split .media{height:560px;overflow:hidden}
  .split h2{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:24px}
  .split p{color:var(--muted);margin-bottom:16px}
  .signature{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--accent);margin-top:26px}

  /* Prestations */
  #prestations{background:var(--bg-2)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .card{background:var(--white);overflow:hidden;transition:.4s ease}
  .card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(35,33,32,.12)}
  .card .media{height:270px;overflow:hidden}
  .card .media img{transition:.6s ease}
  .card:hover .media img{transform:scale(1.06)}
  .card-body{padding:34px 30px 40px}
  .card-body h3{font-size:1.6rem;margin-bottom:12px}
  .card-body p{color:var(--muted);font-size:.94rem}
  .card-num{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--accent);letter-spacing:.2em}

  /* Lieux (bannière) */
  .banner{
    position:relative;color:var(--white);text-align:center;padding:130px 0;overflow:hidden;
  }
  .banner::before{
    content:"";position:absolute;inset:0;
    /* REMPLACER par une photo de lieu / château */
    background:url('https://www.the-perfectdate.com/wp-content/uploads/2026/07/f791f5d3-5748-47a0-9d04-4b0f944afd6e.jpeg') center/cover fixed;
    z-index:-2;
  }
  .banner::after{content:"";position:absolute;inset:0;background:rgba(30,26,22,.5);z-index:-1}
  .banner h2{font-size:clamp(2.2rem,4vw,3.2rem);max-width:720px;margin:0 auto 22px}
  .banner p{max-width:560px;margin:0 auto 34px;opacity:.95}

  /* Portfolio */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:16px}
  .gallery figure{overflow:hidden;position:relative}
  .gallery img{transition:.7s ease}
  .gallery figure:hover img{transform:scale(1.08)}
  .g-tall{grid-row:span 2}
  .g-wide{grid-column:span 2}

  /* Pourquoi nous */
  #valeurs{background:var(--bg-2)}
  .values{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
  .value .ico{
    width:62px;height:62px;margin:0 auto 20px;border:1px solid var(--accent);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--accent);font-size:1.4rem;
  }
  .value h3{font-size:1.4rem;margin-bottom:8px}
  .value p{color:var(--muted);font-size:.9rem}

  /* Avis */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
  .quote{padding:42px 34px;background:var(--white);border:1px solid var(--line)}
  .quote .stars{color:var(--accent);letter-spacing:3px;margin-bottom:18px}
  .quote p{font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-style:italic;line-height:1.5;margin-bottom:22px}
  .quote .who{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

  /* Contact */
  #contact{background:var(--ink);color:var(--bg)}
  #contact .eyebrow{color:var(--accent)}
  #contact h2{font-size:clamp(2.1rem,4vw,3rem)}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:20px}
  .contact-info p{color:#C9C1B6;margin:14px 0}
  .contact-info .label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px}
  form{display:grid;gap:18px}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  input,textarea{
    width:100%;background:transparent;border:none;border-bottom:1px solid #4a463f;
    color:var(--bg);font-family:'Jost',sans-serif;font-size:.95rem;padding:12px 2px;
  }
  input::placeholder,textarea::placeholder{color:#8a8378}
  input:focus,textarea:focus{outline:none;border-color:var(--accent)}
  textarea{resize:vertical;min-height:90px}

  /* Footer */
  footer{background:#1a1917;color:#ffffff;text-align:center;padding:60px 0 40px}
  footer .logo{color:var(--bg);display:inline-block;margin-bottom:18px}
  .socials{display:flex;gap:26px;justify-content:center;margin:22px 0 30px}
  .socials a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#C9C1B6;transition:.3s}
  .socials a:hover{color:var(--accent)}
  footer .fine{font-size:.72rem;letter-spacing:.06em;border-top:1px solid #2c2a27;padding-top:24px;margin-top:24px}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){
    .nav-links{
      position:fixed;top:0;right:-100%;height:100vh;width:75%;
      background:var(--bg);flex-direction:column;justify-content:center;
      gap:32px;transition:.4s ease;box-shadow:-10px 0 40px rgba(0,0,0,.1);
    }
    .nav-links.open{right:0}
    .nav-links a{color:var(--ink)!important;font-size:.9rem}
    .nav-cta{border-color:var(--ink)}
    .burger{display:flex}
    .split{grid-template-columns:1fr;gap:40px}
    .split .media{height:400px}
    .cards,.quotes{grid-template-columns:1fr}
    .values{grid-template-columns:repeat(2,1fr);gap:34px}
    .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
    .g-wide{grid-column:span 2}
    .contact-grid{grid-template-columns:1fr;gap:44px}
    .row{grid-template-columns:1fr}
    section{padding:80px 0}
    .wrap{padding:0 22px}
  }

  /* ===== Bandeau de titre des pages internes ===== */
  .page-hero{
    height:52vh; min-height:360px; position:relative;
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:var(--white); overflow:hidden;
  }
  .page-hero::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; }
  .page-hero::after{ content:""; position:absolute; inset:0; background:rgba(30,26,22,.48); z-index:-1; }
  .page-hero .eyebrow{ color:#E8D9C0; }
  .page-hero h1{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:400; }
  .page-hero p{ max-width:520px; margin:14px auto 0; opacity:.95; }

/* ===== 1) Barre de navigation : fond blanc permanent ===== */
#header{
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
#header.scrolled{ background:#fff; }

#header .logo,
#header .nav-links a{ color:#1E1A16; }

#header .nav-cta{
  color:#1E1A16;
  border-color:#1E1A16;
}
#header .burger span{ background:#1E1A16; }


/* ===== 2) Titres sur les photos en blanc + voile pour la lisibilité ===== */
.hero, .page-hero{ position:relative; color:#fff; }

.hero::after,
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(30,26,22,.45);   /* monte à .55 si c'est encore trop clair */
  z-index:-1;
}

.hero h1, .hero p, .hero .eyebrow,
.page-hero h1, .page-hero p, .page-hero .eyebrow{
  color:#fff;
}
.hero .eyebrow, .page-hero .eyebrow{ color:#E8D9C0; } /* le petit sur-titre en beige clair */

/* ===== Section "Ce qui fait notre différence" en beige ===== */
#valeurs{
  background:#F4EDE3;   /* beige clair ; #EFE7DA pour un peu plus soutenu */
}

/* =========================================================================
   À COLLER TOUT EN BAS DE style.css
   Journal (blog), article, pages légales.
   Reprend la palette existante : anthracite #1E1A16, beige #F4EDE3.
   ========================================================================= */


/* ===== Colonne de lecture étroite (pages de texte) ===== */
.wrap-texte{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}


/* ===== LE JOURNAL : grille de cartes ===== */
.journal{ padding:110px 0; }

.journal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:56px 40px;
}

.carte-article{ display:flex; flex-direction:column; }

.carte-media{
  display:block;
  overflow:hidden;
  aspect-ratio:4 / 3;
  background:#EFE9E1;
}
.carte-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.carte-article:hover .carte-media img{ transform:scale(1.04); }

.carte-media-vide{
  display:block; width:100%; height:100%;
  background:linear-gradient(135deg,#EFE9E1,#DED5C7);
}

.carte-corps{ padding-top:22px; }

.carte-corps .eyebrow{ margin-bottom:10px; }

.carte-corps h2{
  font-size:1.6rem;
  font-weight:400;
  line-height:1.25;
  margin:0 0 12px;
}
.carte-corps h2 a{
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .4s ease;
}
.carte-corps h2 a:hover{ background-size:100% 1px; }

.carte-extrait{
  opacity:.78;
  line-height:1.7;
  margin:0 0 14px;
}

.carte-date{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.5;
  margin:0;
}


/* ===== Journal vide ===== */
.journal-vide{
  text-align:center;
  padding:60px 0 20px;
}
.journal-vide h2{ font-weight:400; margin-bottom:14px; }
.journal-vide p{ opacity:.75; margin-bottom:28px; }


/* ===== Pagination ===== */
.pagination{ margin-top:80px; }
.pagination .nav-links{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.pagination .page-numbers{
  display:grid;
  place-items:center;
  min-width:42px; height:42px;
  padding:0 12px;
  border:1px solid rgba(30,26,22,.18);
  text-decoration:none;
  color:#1E1A16;
  font-size:.9rem;
  transition:background .3s ease, color .3s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current{
  background:#1E1A16;
  color:#fff;
  border-color:#1E1A16;
}


/* ===== ARTICLE ===== */
.single-titre-nu{ padding:170px 0 0; }
.single-titre-nu h1{
  font-size:clamp(2.2rem,4.4vw,3.2rem);
  font-weight:400;
  line-height:1.15;
  margin-top:10px;
}

.single-corps{ padding:70px 0 100px; }

.single-meta{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.5;
  margin-bottom:40px;
}

/* Le contenu écrit dans l'éditeur WordPress */
.contenu-riche{ font-size:1.06rem; line-height:1.85; }
.contenu-riche > * + *{ margin-top:1.5em; }

.contenu-riche h2{
  font-size:2rem;
  font-weight:400;
  line-height:1.25;
  margin-top:2.4em;
}
.contenu-riche h3{
  font-size:1.4rem;
  font-weight:400;
  margin-top:2em;
}

.contenu-riche img,
.contenu-riche figure img{
  width:100%;
  height:auto;
  display:block;
}
.contenu-riche figure{ margin:2.6em 0; }
.contenu-riche figcaption{
  font-size:.85rem;
  opacity:.6;
  text-align:center;
  margin-top:12px;
}

.contenu-riche blockquote{
  border-left:2px solid #1E1A16;
  padding:6px 0 6px 26px;
  margin:2.4em 0;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.5rem;
  font-style:italic;
  line-height:1.5;
}

.contenu-riche ul,
.contenu-riche ol{ padding-left:1.3em; }
.contenu-riche li + li{ margin-top:.6em; }

.contenu-riche a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

.single-tags{
  margin-top:56px;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.55;
}

.single-nav{
  display:flex;
  justify-content:space-between;
  gap:30px;
  margin-top:60px;
  padding-top:34px;
  border-top:1px solid rgba(30,26,22,.14);
  font-size:.95rem;
}
.single-nav a{ color:inherit; text-decoration:none; opacity:.75; }
.single-nav a:hover{ opacity:1; }
.single-nav .suiv{ margin-left:auto; text-align:right; }


/* ===== PAGES LÉGALES ===== */
.page-legal{ padding:170px 0 110px; }

.page-legal h1{
  font-size:clamp(2.2rem,4.4vw,3rem);
  font-weight:400;
  margin:10px 0 6px;
}

.legal-maj{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.45;
  margin-bottom:48px;
}

.legal-chapo{
  font-size:1.15rem;
  line-height:1.8;
  padding:24px 28px;
  background:#F4EDE3;
  margin-bottom:48px;
}

.page-legal h2{
  font-size:1.5rem;
  font-weight:400;
  margin:2.6em 0 .7em;
  padding-bottom:.4em;
  border-bottom:1px solid rgba(30,26,22,.12);
}

.page-legal p,
.page-legal li{ line-height:1.8; opacity:.85; }
.page-legal ul{ padding-left:1.3em; }
.page-legal li + li{ margin-top:.5em; }

.page-legal a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ===== Case de consentement du formulaire ===== */
.champ-rgpd{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:.85rem;
  line-height:1.55;
  opacity:.8;
  margin:6px 0 4px;
}
.champ-rgpd input[type="checkbox"]{
  width:16px; height:16px;
  margin-top:3px;
  flex:0 0 auto;
  accent-color:#1E1A16;
}
.champ-rgpd a{ color:inherit; text-underline-offset:3px; }


/* ===== Liens légaux du pied de page ===== */
.footer-legal{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:.78rem;
  opacity:.6;
}
.footer-legal a{ color:inherit; text-decoration:none; }
.footer-legal a:hover{ text-decoration:underline; }


/* ===== Mobile ===== */
@media (max-width:640px){
  .journal{ padding:80px 0; }
  .journal-grid{ gap:44px; }
  .single-titre-nu{ padding:130px 0 0; }
  .page-legal{ padding:130px 0 80px; }
  .single-nav{ flex-direction:column; }
  .single-nav .suiv{ margin-left:0; text-align:left; }
}
/* =========================================================================
   CORRECTIF — à coller tout en bas de style.css
   Resserre l'espace entre le titre de l'article et le début du texte.
   ========================================================================= */

.single-titre-nu{ padding:170px 0 0; }

/* L'espace était doublé : padding du bloc titre + padding du corps.
   On repart d'un écart unique et maîtrisé. */
.single-corps{ padding:44px 0 100px; }

.single-meta{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.45;
  margin:0 0 34px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(30,26,22,.12);
}

/* Quand l'article a une grande image en bandeau, le corps respire un peu plus */
.article-single .page-hero + .single-corps{ padding-top:70px; }

@media (max-width:640px){
  .single-titre-nu{ padding:130px 0 0; }
  .single-corps{ padding:32px 0 70px; }
/* ===== Bandeau CTA « Parlons de votre mariage » : texte en blanc ===== */
section.banner h2,
section.banner p,
section.banner .btn-light{
  color:#fff !important;
}
section.banner .btn-light{
  border:1px solid #fff !important;
  background:transparent !important;
}
section.banner .btn-light:hover{
  background:#fff !important;
  color:#1E1A16 !important;
}