/* ── assets/css/base.css ── */
/*
 * base.css — Variables, reset, styles globaux, boutons
 * ══════════════════════════════════════════════════════
 * Ce fichier définit les fondations visuelles du site :
 * - Variables CSS (couleurs, typographie)
 * - Reset minimal
 * - Styles partagés (boutons, sections, titres communs)
 *
 * ⚠ Pour changer la palette de couleurs, modifie uniquement
 *   les variables dans :root — tout le site s'adapte.
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --blue:       #3d6b8c;   /* Couleur principale */
  --blue-light: #dde8f0;   /* Fond clair bleu (hover, badges) */
  --blue-mid:   #5a87a8;   /* Bleu intermédiaire (hover boutons) */
  --dark:       #1a1a1a;   /* Texte principal */
  --muted:      #777;      /* Texte secondaire */
  --border:     #e4e4e4;   /* Bordures */
  --bg:         #fafafa;   /* Fond sections alternées */
  --white:      #ffffff;
  --font:       'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  color: var(--dark);
  background: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Protection des photos ──────────────────────────────────────────────── */
img {
  -webkit-user-drag: none;   /* Interdit le glisser-déposer des images */
  user-select: none;
  pointer-events: auto;
}

/* ── Système de pages (SPA) ─────────────────────────────────────────────── */
.page         { display: none; flex: 1; }
.page.active  { display: block; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 13px 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-primary          { background: var(--blue);  color: var(--white); }
.btn-primary:hover    { background: var(--blue-mid); }

.btn-outline          { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover    { background: var(--blue-light); }

/* ── Composants partagés entre pages ───────────────────────────────────── */

/* En-tête de page standard (Portfolio, etc.) */
.page-header {
  background: var(--white);
  padding: 60px 80px 40px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 { font-size: 36px; font-weight: 700; }

/* Label de section (ex : "— Portfolio") */
.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

/* Titre de section (ex : "Quelques regards") */
.section-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
}

/* Ligne de séparation décorative */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

/* ── Responsive ≤ 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    padding: 40px 24px 28px;
  }

  .page-header h1 { font-size: 28px; }
}

/* ── assets/css/theme.css ── */
/*
 * theme.css — Identité visuelle (design « Accueil » 2026)
 * ═════════════════════════════════════════════════════════
 * Chargé juste après base.css : redéfinit les variables de base.css
 * pour que toutes les pages adoptent la palette et les polices,
 * et porte l'en-tête et le pied de page communs.
 *
 * Polices : Marcellus (titres) + Karla (texte), via Google Fonts (index.php).
 */

/* ── Palette et typographie ────────────────────────────────────────────── */
:root {
  --ink:        #201C18;   /* Texte principal, boutons pleins */
  --ink-soft:   #4A413A;   /* Texte courant secondaire */
  --muted:      #6B6058;   /* Légendes, métadonnées */
  --faint:      #9A8F84;   /* Mentions discrètes */
  --accent:     #A8674F;   /* Terracotta : surtitres, liens */
  --accent-lt:  #C98E73;   /* Terracotta sur fond sombre */
  --cream:      #FAF7F2;   /* Fond de page */
  --sand:       #F2EDE5;   /* Fond des sections alternées */
  --border:     #E5DED3;
  --border-dk:  #C9BFB1;
  --on-dark:    #F0EAE1;   /* Texte sur fond sombre */
  --on-dark-2:  #BFB4A8;   /* Texte secondaire sur fond sombre */

  --font-title: 'Marcellus', Georgia, serif;
  --font:       'Karla', system-ui, -apple-system, sans-serif;

  /* Variables historiques de base.css, réalignées sur la nouvelle palette */
  --blue:       var(--ink);
  --blue-mid:   var(--ink-soft);
  --blue-light: var(--sand);
  --dark:       var(--ink);
  --bg:         var(--sand);
}

body {
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 400;
}

.section-title { color: var(--accent); font-weight: 500; }

.btn { font-family: var(--font); border-radius: 2px; letter-spacing: 0.1em; }

/* Conteneur centré commun aux sections */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* Surtitre en petites capitales terracotta */
.kicker {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Fil d'Ariane en tête des pages intérieures */
.crumbs {
  display: flex;
  gap: 10px;
  padding-top: 32px;
  font-size: 13px;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* Lien souligné discret (« Tout le portfolio », « Détail de la formule ») */
.link-underline {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-dk);
  padding-bottom: 4px;
}
.link-underline:hover { color: var(--ink); }

/* Boutons du design */
.btn-ink, .btn-line, .btn-cream, .btn-line-dark {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-ink        { background: var(--ink); color: var(--cream); }
.btn-ink:hover  { background: var(--ink-soft); color: var(--cream); }
.btn-line       { border: 1px solid var(--border-dk); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-cream      { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; color: var(--ink); }
.btn-line-dark  { border: 1px solid #5A5047; color: var(--on-dark); }
.btn-line-dark:hover { border-color: var(--on-dark); color: #fff; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Logo signature (image 2x : 349 × 108, affichée en 54 px de haut) */
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { display: block; height: 54px; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  list-style: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

.site-nav .nav-cta a {
  color: var(--cream);
  background: var(--ink);
  padding: 9px 18px;
  border-radius: 2px;
  border-bottom: none;
}
.site-nav .nav-cta a:hover,
.site-nav .nav-cta a.active { background: var(--ink-soft); color: var(--cream); }

/* ── Pied de page ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.site-footer-logo { display: block; height: 64px; width: auto; margin-bottom: 12px; }

.site-footer-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

.site-footer-legal {
  padding-bottom: 40px;
  font-size: 13px;
  color: var(--faint);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .site-logo img { height: 44px; }
  .site-nav { gap: 8px 18px; font-size: 13px; }
  .site-nav .nav-cta a { padding: 7px 14px; }
}

/* Marcellus n'existe qu'en graisse normale : on neutralise les font-weight: 700
   hérités des anciennes feuilles (page-header, about, cartes…) pour éviter le faux gras */
body .page h1,
body .page h2,
body .page h3 { font-weight: 400; }

/* ── assets/css/accueil.css ── */
/*
 * accueil.css — Page d'accueil (design 2026)
 * ════════════════════════════════════════════
 * Palette, polices, .wrap, .kicker et boutons : voir theme.css.
 */

/* ── Titres et sections communs à l'accueil ─────────────────────────────── */
.home-section { padding-top: 80px; padding-bottom: 80px; }

.home-h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.15;
}
.home-h2-spaced { margin-bottom: 40px; }

.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.home-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.home-actions--center { justify-content: center; }

.home-dark { background: var(--ink); color: var(--on-dark); }
.home-dark .kicker { color: var(--accent-lt); }
.home-dark .home-h2 { color: var(--cream); }

.home-sand { background: var(--sand); }

/* ── 1. Hero ────────────────────────────────────────────────────────────── */
.home-hero {
  padding-top: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
.home-hero > * { min-width: 0; }

.home-hero-tag { margin-bottom: 22px; }

.home-hero-title {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.08;
  margin-bottom: 24px;
  text-wrap: balance;
}
.home-hero-title strong { font-weight: 400; }

.home-hero-desc {
  margin-bottom: 32px;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.home-hero-photo img {
  width: 100%;
  height: clamp(360px, 52vw, 620px);
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* ── 2. Chiffres clés ───────────────────────────────────────────────────── */
.home-stats {
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  border-bottom: 1px solid var(--border);
}

.home-stat-num { font-family: var(--font-title); font-size: 40px; line-height: 1; }

.home-stat-label {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 3. Mariages récents ────────────────────────────────────────────────── */
.home-recent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.home-recent-card { display: block; min-width: 0; text-decoration: none; }

.home-recent-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.home-recent-card:hover img { opacity: 0.88; }

.home-recent-card h3 { font-size: 21px; margin: 14px 0 4px; color: var(--ink); }
.home-recent-card p  { font-size: 14px; color: var(--muted); }

/* ── 4. Journée type ────────────────────────────────────────────────────── */
.home-lead {
  margin: 12px 0 44px;
  max-width: 58ch;
  color: var(--on-dark-2);
  text-wrap: pretty;
}

.home-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
}

.home-timeline-hour {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 12px;
}

.home-timeline h3 { font-size: 22px; margin-bottom: 8px; color: var(--cream); }
.home-timeline p  { font-size: 15px; color: var(--on-dark-2); }

/* ── 5. Formules ────────────────────────────────────────────────────────── */
.home-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}

.home-offre {
  border: 1px solid var(--border);
  background: #fff;
  padding: 32px;
  min-width: 0;
}
.home-offre--popular { border-color: var(--ink); }

.home-offre h3 { font-size: 26px; margin-bottom: 6px; }

.home-offre-duree {
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-offre-desc { margin-bottom: 20px; color: var(--ink-soft); font-size: 15px; }

/* ── 6. Avis ────────────────────────────────────────────────────────────── */
.home-rating {
  margin: 12px 0 40px;
  font-size: 15px;
  color: var(--muted);
}
.home-rating span { color: var(--accent); letter-spacing: 0.1em; }

.home-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.home-review { min-width: 0; }

.home-review-title {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.home-review-text {
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.5;
  margin-bottom: 16px;
  text-wrap: pretty;
}

.home-review footer {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-review footer span { color: var(--accent); }

.home-reviews-link { display: inline-block; margin-top: 36px; }

/* ── 7. Questions fréquentes ────────────────────────────────────────────── */
.home-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
}
.home-faq > * { min-width: 0; }

.home-faq-intro { margin-top: 16px; color: var(--ink-soft); max-width: 40ch; }

.home-faq-list details { border-top: 1px solid var(--border); padding: 20px 0; }
.home-faq-list details:last-child { border-bottom: 1px solid var(--border); }

.home-faq-list summary {
  font-family: var(--font-title);
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.home-faq-list summary::-webkit-details-marker { display: none; }
.home-faq-list summary::after { content: '+'; color: var(--accent); flex-shrink: 0; }
.home-faq-list details[open] summary::after { content: '−'; }

.home-faq-list details p { margin-top: 12px; color: var(--ink-soft); font-size: 16px; text-wrap: pretty; }

/* ── 8. Zone d'intervention ─────────────────────────────────────────────── */
.home-zone { border-top: 1px solid var(--border); padding: 64px 0; }
.home-zone h2 { font-size: 28px; margin-bottom: 8px; }
.home-zone p  { margin-bottom: 24px; color: var(--ink-soft); max-width: 70ch; }

.home-villes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.home-villes li {
  border: 1px solid var(--border);
  background: #fff;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  border-radius: 2px;
}

/* ── 9. Appel à l'action ────────────────────────────────────────────────── */
.home-cta { padding-top: 88px; padding-bottom: 88px; text-align: center; }
.home-cta h2 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 16px; color: var(--cream); }
.home-cta p  { margin: 0 auto 32px; max-width: 52ch; color: var(--on-dark-2); text-wrap: pretty; }

/* ── Responsive ≤ 760px ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .home-hero { padding-top: 40px; gap: 32px; }
  .home-section { padding-top: 56px; padding-bottom: 56px; }
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .home-hero-photo img { height: 420px; }
  .home-cta { padding-top: 64px; padding-bottom: 64px; }
}

/* ── assets/css/portfolio.css ── */
/*
 * portfolio.css — Page Portfolio et page détail d'un mariage
 * ════════════════════════════════════════════════════════════
 * Deux vues gérées ici :
 *   1. Portfolio (design 2026) : dernier mariage en vedette + grille des autres
 *   2. Galerie d'un mariage : récit, puis toutes les photos (lightbox : portfolio.js)
 *
 * Pages rendues côté serveur à partir de includes/portfolio-data.php.
 * Palette, .wrap, .kicker, .crumbs, boutons : theme.css ; .home-dark/.home-cta : accueil.css.
 */

/* ── Portfolio : introduction ───────────────────────────────────────────── */
.pf-intro {
  padding-top: 48px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: end;
}
.pf-intro > * { min-width: 0; }
.pf-kicker { margin-bottom: 22px; }
.pf-intro h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.08; text-wrap: balance; }
.pf-intro-text { font-size: 18px; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }

/* ── Portfolio : dernier reportage en vedette ───────────────────────────── */
.pf-vedette-wrap { padding-bottom: 48px; }

.pf-vedette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--ink);
  color: var(--on-dark);
  text-decoration: none;
}
.pf-vedette > * { min-width: 0; }
.pf-vedette img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 620px;
  object-fit: cover;
  display: block;
}

.pf-vedette-text {
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}
.pf-vedette-text .kicker { margin: 0; color: var(--accent-lt); }
.pf-vedette-text h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; color: var(--cream); }
.pf-vedette-infos { font-size: 15px; color: var(--on-dark-2); }
.pf-vedette-extrait { color: #D9D0C5; max-width: 42ch; text-wrap: pretty; }
.pf-vedette-link {
  align-self: flex-start;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #5A5047;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  transition: border-color 0.2s;
}
.pf-vedette:hover .pf-vedette-link { border-color: var(--cream); }

/* ── Portfolio : grille des autres mariages ─────────────────────────────── */
.pf-grid-wrap { padding-bottom: 96px; }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.pf-card { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; }
.pf-card-cover { overflow: hidden; background: var(--border); }
.pf-card-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.pf-card:hover .pf-card-cover img { transform: scale(1.03); }
.pf-card h2 { margin: 16px 0 2px; font-size: 24px; color: var(--ink); }
.pf-card p { font-size: 14px; color: var(--muted); }

.pf-empty { padding-top: 40px; padding-bottom: 80px; color: var(--muted); }

/* Appel à l'action : pas de sous-titre, les boutons suivent directement le titre */
.pf-cta-actions { margin-top: 28px; }

/* ── Page détail d'un mariage ───────────────────────────────────────────── */

/* En-tête : bouton retour + titre + date/lieu */
.mariage-detail-header {
  padding: 48px 80px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Bouton "← Retour au portfolio" */
.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.btn-back:hover { color: var(--blue-mid); }

.mariage-detail-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark);
}

.mariage-detail-meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Récit du mariage (facultatif) + encadré « En bref » */
.mariage-recit {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 80px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.mariage-recit-text { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; color: var(--ink-soft); }
.mariage-recit-text p { text-wrap: pretty; }
.mariage-bref { background: var(--sand); padding: 24px 28px; }
.mariage-bref h2 { font-size: 22px; margin-bottom: 12px; }
.mariage-bref dl > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.mariage-bref dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.mariage-bref dd { margin: 0; }

/* Grille de photos du mariage — layout masonry en colonnes */
.mariage-detail-grid {
  padding: 32px 80px 80px;
  columns: 3;
  column-gap: 12px;
  max-width: 1600px;
  margin: 0 auto;
}

.mariage-photo-item {
  break-inside: avoid;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 2px;
  cursor: zoom-in;
}

.mariage-photo-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
.mariage-photo-item:hover img { transform: scale(1.04); }

/* ── Responsive ≤ 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mariage-detail-header {
    padding: 28px 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mariage-recit { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px 0; }

  .mariage-detail-grid {
    columns: 1;
    padding: 20px 24px 48px;
    column-gap: 8px;
  }

  .mariage-photo-item {
    margin-bottom: 8px;
  }
}

/* ── Responsive 769px – 1024px (tablette) ───────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .mariage-recit { padding-left: 40px; padding-right: 40px; }

  .mariage-detail-grid {
    columns: 2;
    padding: 24px 40px 60px;
  }
}

/* ── Liens (rendu serveur) : mêmes visuels que les anciens éléments cliquables ── */
h1.mariage-detail-title { margin-top: 0; line-height: inherit; }
a.btn-back      { text-decoration: none; }

@media (max-width: 760px) {
  .pf-intro { padding-top: 32px; padding-bottom: 40px; gap: 24px; }
  .pf-vedette img { min-height: 0; max-height: 480px; aspect-ratio: 4 / 5; height: auto; }
  .pf-grid-wrap { padding-bottom: 64px; }
}

/* ── assets/css/prestations.css ── */
/*
 * prestations.css — Page Prestations (design 2026)
 * ══════════════════════════════════════════════════
 * Palette, polices, .wrap, .kicker, .crumbs, boutons : theme.css.
 * Sections partagées avec l'accueil (.home-section, .home-sand, .home-dark,
 * .home-cta, .home-faq-list) : accueil.css.
 */

/* ── Introduction ───────────────────────────────────────────────────────── */
.presta-intro {
  padding-top: 48px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: end;
}
.presta-intro > * { min-width: 0; }

.presta-kicker { margin-bottom: 22px; }

.presta-intro h1 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  text-wrap: balance;
}

.presta-intro-text {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.presta-h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin-bottom: 36px;
}

/* ── Formules ───────────────────────────────────────────────────────────── */
.presta-offres-wrap { padding-bottom: 80px; }

.presta-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.presta-offre {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  padding: 36px 32px;
  scroll-margin-top: 100px;
}
.presta-offre--popular { border-color: var(--ink); }

.presta-badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
}

.presta-offre h2 { font-size: 30px; line-height: 1.2; }

.presta-duree {
  margin: 4px 0 24px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.presta-offre ul {
  list-style: none;
  margin-bottom: 24px;
  border-top: 1px solid #EFE9E0;
}
.presta-offre li {
  padding: 11px 0;
  border-bottom: 1px solid #EFE9E0;
  font-size: 15px;
  color: var(--ink-soft);
}

.presta-photos {
  margin-bottom: 28px;
  font-family: var(--font-title);
  font-size: 19px;
}

.presta-btn {
  margin-top: auto;
  text-align: center;
  padding: 14px 20px;
}
.presta-btn.btn-line { border-color: var(--ink); }

/* ── Comparatif ─────────────────────────────────────────────────────────── */
.presta-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--border);
}

.presta-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.presta-table thead th {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 18px;
}
.presta-table thead th:first-child {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.presta-table tbody th,
.presta-table td {
  padding: 14px 22px;
  border-bottom: 1px solid #EFE9E0;
}
.presta-table tbody th { font-weight: 400; color: var(--ink-soft); }
.presta-table tbody tr:last-child > * { border-bottom: none; }

.presta-table .is-popular { background: var(--cream); }
.presta-table .is-yes { color: var(--ink); }
.presta-table .is-no  { color: #B5AAA0; }

/* ── Étapes + FAQ (deux colonnes) ───────────────────────────────────────── */
.presta-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
}
.presta-split > * { min-width: 0; }
.presta-split .presta-h2 { margin-bottom: 16px; }

.presta-split-text { color: var(--ink-soft); max-width: 40ch; text-wrap: pretty; }

.presta-etapes { list-style: none; }
.presta-etapes li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.presta-etape-num { font-family: var(--font-title); font-size: 22px; color: var(--accent); }
.presta-etapes h3 { font-size: 21px; margin-bottom: 4px; }
.presta-etapes p  { color: var(--ink-soft); font-size: 15px; text-wrap: pretty; }

.presta-faq-section { border-top: 1px solid var(--border); }

/* ── Responsive ≤ 760px ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .presta-intro { padding-top: 32px; padding-bottom: 48px; gap: 24px; }
  .presta-offres-wrap { padding-bottom: 56px; }
  .presta-offre { padding: 32px 24px; }
}

/* ── assets/css/apropos.css ── */
/*
 * apropos.css — Page À propos (design 2026)
 * ═══════════════════════════════════════════
 * Palette, polices, .wrap, .kicker, .crumbs, boutons : theme.css.
 * Sections partagées avec l'accueil (.home-section, .home-sand, .home-dark,
 * .home-cta, .home-actions) : accueil.css.
 */

/* ── Portrait + biographie ──────────────────────────────────────────────── */
.about-intro {
  padding-top: 48px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
  align-items: start;
}
.about-intro > * { min-width: 0; }

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 2px;
}

.about-content { padding-top: 12px; }

.about-kicker { margin-bottom: 22px; }

.about-content h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.1;
  margin-bottom: 32px;
  text-wrap: balance;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink-soft);
  max-width: 56ch;
}
.about-bio p { text-wrap: pretty; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: 420px;
}
.about-stat-num { font-family: var(--font-title); font-size: 44px; line-height: 1; }
.about-stat-label {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Approche (fond sombre) ─────────────────────────────────────────────── */
.about-approche { padding-top: 88px; padding-bottom: 88px; }
.about-approche > .kicker { margin-bottom: 16px; }

.about-approche h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.3;
  margin-bottom: 56px;
  max-width: 30ch;
  color: var(--cream);
  text-wrap: balance;
}

.about-valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.about-valeurs > div { border-top: 1px solid var(--ink-soft); padding-top: 22px; }
.about-valeurs h3 { font-size: 22px; margin-bottom: 8px; color: var(--cream); }
.about-valeurs p  { font-size: 15px; color: var(--on-dark-2); text-wrap: pretty; }

/* ── Zone d'intervention ────────────────────────────────────────────────── */
.about-zone {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
.about-zone > * { min-width: 0; }

.about-zone h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.about-zone-text { color: var(--ink-soft); max-width: 48ch; text-wrap: pretty; }

.about-zone-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.about-zone-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.about-zone-photos img + img { margin-top: 48px; }

/* ── Avis ───────────────────────────────────────────────────────────────── */
.about-avis {
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.about-avis h2 { font-size: 28px; margin-bottom: 6px; }
.about-avis p  { color: var(--ink-soft); }
.about-avis-btn { border-color: var(--ink); }

/* ── Responsive ≤ 760px ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .about-intro { padding-top: 32px; padding-bottom: 56px; gap: 32px; }
  .about-content { padding-top: 0; }
  .about-approche { padding-top: 64px; padding-bottom: 64px; }
  .about-approche h2 { margin-bottom: 40px; }
  .about-zone { gap: 40px; }
  .about-avis { padding-top: 48px; padding-bottom: 48px; }
}

/* ── assets/css/contact.css ── */
/*
 * contact.css — Page Contact et formulaire (design 2026)
 * ════════════════════════════════════════════════════════
 * Palette, polices, .wrap, .kicker, .crumbs, .link-underline, boutons : theme.css.
 * La validation des champs est gérée dans assets/js/contact.js.
 * L'envoi du formulaire est géré par api/contact.php.
 */

/* ── Layout principal ───────────────────────────────────────────────────── */
.contact-grid {
  padding-top: 48px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: start;
}
.contact-grid > * { min-width: 0; }

/* ── Colonne gauche : introduction et coordonnées ───────────────────────── */
.contact-kicker { margin-bottom: 22px; }

.contact-grid h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  margin-bottom: 24px;
  text-wrap: balance;
}

.contact-intro {
  margin-bottom: 40px;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}

.contact-list { border-top: 1px solid var(--border); }
.contact-list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contact-list dt {
  padding-top: 2px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--accent); }
.contact-list-sub { font-size: 15px; color: var(--muted); }

.contact-before {
  margin-top: 40px;
  padding: 28px;
  background: var(--sand);
}
.contact-before h2 { font-size: 22px; margin-bottom: 8px; }
.contact-before p { margin-bottom: 14px; font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }
.contact-before-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ── Colonne droite : carte du formulaire ───────────────────────────────── */
.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: clamp(24px, 4vw, 44px);
}

.contact-form { display: flex; flex-direction: column; gap: 22px; }
.contact-form[hidden] { display: none; }
.contact-form h2 { font-size: 28px; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.form-group label,
.form-group legend {
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-group legend { margin-bottom: 10px; }

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #DCD3C6;
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input[type="date"] { padding-top: 12px; padding-bottom: 12px; }
.form-group input:focus,
.form-group textarea:focus { border-color: var(--ink); }
.form-group textarea { resize: vertical; }

/* Choix sous forme de boutons (boutons radio stylés) */
.contact-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.contact-chip { cursor: pointer; }
.contact-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.contact-chip span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #DCD3C6;
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.contact-chip:hover span { border-color: var(--ink); }
.contact-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.contact-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── États de validation ────────────────────────────────────────────────── */
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid .contact-chip span { border-color: #A3402E; }

.form-group .field-error {
  display: none;
  font-size: 13px;
  color: #A3402E;
}
.form-group.invalid .field-error { display: block; }

/* Erreur d'envoi (réseau ou serveur) */
.form-status {
  display: none;
  padding: 10px 14px;
  border: 1px solid #E8C4BA;
  background: #FBF1EE;
  color: #8B2F20;
  font-size: 15px;
}
.form-status:not(:empty) { display: block; }

.contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.contact-submit .btn-ink { border: none; padding: 15px 32px; font-family: inherit; cursor: pointer; }
.contact-submit .btn-ink:disabled { opacity: 0.6; cursor: wait; }

/* ── Confirmation d'envoi ───────────────────────────────────────────────── */
.contact-success { padding: 48px 0; text-align: center; }
.contact-success[hidden] { display: none; }
.contact-success h2 { font-size: 32px; margin-bottom: 12px; }
.contact-success p { margin-bottom: 28px; color: var(--ink-soft); }
.contact-btn-reset { background: transparent; border-color: var(--ink); font-family: inherit; cursor: pointer; padding: 12px 24px; }

/* ── Responsive ≤ 760px ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .contact-grid { padding-top: 32px; padding-bottom: 64px; gap: 48px; grid-template-columns: 1fr; }
  .contact-list > div { grid-template-columns: 100px 1fr; }
  .contact-before { padding: 24px; }
}

/* ── assets/css/lightbox.css ── */
/*
 * lightbox.css — Overlay photo plein écran
 * ══════════════════════════════════════════
 * Activé par lightbox.js — s'ouvre au clic sur une photo de galerie mariage.
 * Navigation : flèches gauche/droite + fermeture par clic fond ou touche Échap.
 */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;          /* bloque les événements sur tous les enfants */
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Image principale */
.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  user-select: none;
}

/* Bouton fermer */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.15s;
}
.lightbox-close:hover { color: #fff; }

/* Flèches de navigation */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  cursor: pointer;
  padding: 16px 20px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Compteur (ex : 3 / 12) */
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  letter-spacing: 2px;
}

/* Masquer les flèches s'il n'y a qu'une photo */
.lightbox-overlay.single .lightbox-prev,
.lightbox-overlay.single .lightbox-next { display: none; }