/* =================================================================
   THÈME — Notre Messe de Mariage
   Charte officielle (alignée sur app.css [data-app="mariage"]) :
   violet #663399 + orange #FF9900 (dégradé de marque), fond clair ivoire.
   Typographie : pile système (SF Pro / Segoe UI / Roboto), aucune webfont
   chargée (cf. tokens --font-* ci-dessous).
   ================================================================= */
:root {
  /* Typo système — alignée sur app.css [data-app="mariage"] (pile SF Pro) */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;

  /* Surfaces claires */
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F4F0FB;
  /* Textes adoucis : charcoal légèrement violacé plutôt qu'un noir « brut » */
  --text: #423C4E;
  --text-soft: #756F82;
  --text-strong: #2A2039;

  /* Marque — violet (#663399) */
  --brand: #663399;
  --brand-strong: #4D2675;
  --on-brand: #FFFFFF;
  --brand-shadow: rgba(102, 51, 153, .42);

  /* Accent — orange (#FF9900) */
  --accent: #FF9900;
  --accent-ink: #C46F00;
  --accent-soft: rgba(255, 153, 0, .15);

  --border: #E8E2F1;
  --border-strong: #D6CCE7;

  --btn-radius: 999px;
  --card-radius: 18px;
  --header-bg: rgba(250, 249, 246, .82);
  --footer-bg: #2A1A40;

  /* ---------- Motion (source unique — cf. core.css .reveal / parallaxe) ----------
     Registre « sobre / cérémonial » validé : courbe douce décélérée, entrée un
     cran plus lente que le défaut socle, translation discrète. prefers-reduced-
     motion neutralise tout (core.css). */
  --ease-out-soft: cubic-bezier(.2, .7, .2, 1);
  --reveal-dur: .85s;     /* durée de révélation (défaut socle : .7s) */
  --reveal-shift: 22px;   /* translation verticale d'entrée */

  /* Washes de marque repris EXACTEMENT du site live (violet→orange 105°) */
  --brand-wash: linear-gradient(105deg, rgba(102,51,153,.2) 0%, rgba(255,153,0,.2) 98.25%), var(--bg);        /* sections claires (live : 0.2) */
  --brand-wash-strong: linear-gradient(105deg, rgba(102,51,153,.7) 0%, rgba(255,153,0,.7) 98.25%), #FFFFFF;   /* footer (live : 0.7 sur blanc) */
}

h1, h2, h3 { font-weight: 600; }
h1 { letter-spacing: -.005em; }

/* Halo de marque violet/orange + grain papier discret */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 48% at 80% -6%, rgba(255,153,0,.13), transparent 60%),
    radial-gradient(50% 40% at 4% 6%, rgba(102,51,153,.10), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ---------- Logo (image) ---------- */
.brand-logo { height: 34px; width: auto; display: block; }
@media (max-width: 600px){ .brand-logo { height: 28px; } }
.brand { gap: 0; }

/* Ornement liturgique (filet + croix) — encre violette */
.ornament { display: flex; align-items: center; gap: 1rem; color: var(--brand); justify-content: center; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: min(160px, 22vw); background: linear-gradient(90deg, transparent, var(--accent)); }
.ornament::after { background: linear-gradient(90deg, var(--accent), transparent); }
.ornament span { font-size: 1.1rem; }

/* Hero — wash violet→orange 105° repris du site live (Wix) */
.hero { background:
  linear-gradient(105deg, rgba(102,51,153,.20) 0%, rgba(255,153,0,.20) 98%),
  linear-gradient(180deg, #FFFFFF, var(--bg)); }
/* Hauteur de hero uniforme sur TOUTES les pages, alignée sur l'index :
   même min-height immersive + contenu centré verticalement (les heros simples
   sans photo héritent ainsi de la grande hauteur du hero-photo). */
.hero { min-height: clamp(540px, 80vh, 760px); display: flex; align-items: center; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px){ .hero-grid { grid-template-columns: 1.05fr .95fr; } }
/* Sections « split » : image pleine hauteur, colonne resserrée pour les portraits */
@media (min-width: 940px){
  .hero-grid.split-img-right { grid-template-columns: 1fr minmax(320px, 440px); }
  .hero-grid.split-img-left  { grid-template-columns: minmax(320px, 440px) 1fr; }
}

/* Médaillon hero : le vrai logo (croix + onde) sur ivoire, arche liturgique */
.hero-figure { position: relative; display: grid; place-items: center; aspect-ratio: 4/5; padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 220px 220px 18px 18px; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF, #F4F0FB);
  box-shadow: 0 50px 90px -50px var(--brand-shadow); border: 1px solid var(--border-strong); }
.hero-figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.6), inset 0 0 0 7px rgba(102,51,153,.18); }
/* Photo : remplit le médaillon. Repli logo (.is-logo via JS) : petit, centré. */
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure.is-logo { background: linear-gradient(180deg, #FFFFFF, #F4F0FB); }
.hero-figure.is-logo img { width: min(70%, 300px); height: auto; object-fit: contain; margin: auto; filter: drop-shadow(0 18px 32px rgba(102,51,153,.28)); }

/* ---------- Hero photo plein cadre (home — Option A) ----------
   Photo en fond, voile violet depuis la gauche (texte blanc) + léger
   assombrissement global de la photo (repris de l'overlay du site live).
   La photo manquante → repli sur le dégradé violet de .hero. */
.hero-photo { isolation: isolate; min-height: clamp(540px, 80vh, 760px); display: flex; align-items: center; }
.hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -2; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(35,17,48,.93) 0%, rgba(58,28,80,.78) 26%, rgba(102,51,153,.40) 52%, rgba(102,51,153,.06) 74%, transparent 90%),
    linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.26)); }
.hero-photo .hero-copy { max-width: 620px; color: #fff; }
.hero-photo .eyebrow { color: rgba(255,255,255,.82); }
.hero-photo h1, .hero-photo .lead { color: #fff; }
.hero-photo h1 em { color: #fff; } /* emphase par l'italique seul — pas de doré (jure avec la photo) */
.hero-photo .lead { color: rgba(255,255,255,.92); }
.hero-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero-photo .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }

/* ---------- Sections à fond photo (voile sombre/violet, texte clair) ---------- */
.section-photo { position: relative; isolation: isolate; }
.section-photo .section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.section-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(33,16,46,.72), rgba(33,16,46,.66)); }
.section-photo .verse { color: #fff; }
.section-photo .verse cite { color: rgba(255,255,255,.72); }
.section-photo .ornament { color: rgba(255,255,255,.92); }
/* En-tête de section sur fond photo : texte clair (eyebrow / titre / lead). */
.section-photo .section-head .eyebrow { color: rgba(255,255,255,.85); }
.section-photo .section-head h2 { color: #fff; }
.section-photo .section-head .lead { color: rgba(255,255,255,.92); }
.section-photo .section-head .lead em { color: #fff; }
/* Section avis sur fond photo : libellé de sous-groupe (couples / pros) en clair. */
.section-photo .tmt-group-label { color: rgba(255,255,255,.92); }

/* CTA à fond photo : photo + voile violet pour garder le texte blanc lisible */
.cta-photo { isolation: isolate; }
.cta-photo .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; z-index: -2; }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(33,16,46,.90) 0%, rgba(77,38,117,.78) 52%, rgba(102,51,153,.66) 120%); }

/* Crédit photo : petit, coin bas-droit des sections à fond photo */
.photo-credit { position: absolute; right: .7rem; bottom: .55rem; z-index: 5; margin: 0;
  font-size: .66rem; letter-spacing: .02em; color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.22); padding: .12rem .5rem; border-radius: 999px;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: none; }

/* ---------- Encart annuaire : carte intégrée (1/3 texte · 2/3 carte pleine hauteur, sans chrome) ---------- */
.annuaire-teaser { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.annuaire-teaser__copy { align-self: center; }
.annuaire-teaser__map { position: relative; min-height: clamp(380px, 56vh, 560px); overflow: hidden; }
.annuaire-teaser__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #eef0f5; }
@media (min-width: 940px){
  .annuaire-section { padding-block: 0; }                 /* la carte va bord à bord verticalement */
  .annuaire-teaser { grid-template-columns: 1fr 2fr; grid-auto-rows: 1fr; align-items: stretch; min-height: clamp(520px, 72vh, 760px); }
  .annuaire-teaser__copy { padding-block: clamp(2rem, 5vw, 4rem); }
  .annuaire-teaser__map { margin-right: calc(50% - 50vw); min-height: 0; } /* déborde jusqu'au bord droit de l'écran */
}

.script { font-family: var(--font-display); font-style: italic; color: var(--brand); }

/* Carte produit avec filet orange */
.card { background: var(--surface); }
.card.gilt { border-top: 3px solid var(--accent); }

/* Bandeau CTA (bas de page) — dégradé 105° violet → orange repris du live */
.cta-band { --on-brand: #FFFFFF; background:
  linear-gradient(105deg, var(--brand-strong) 0%, var(--brand) 50%, var(--accent) 130%); }

/* Pied de page clair — wash violet→orange 105° repris du site live */
.site-footer { background: var(--brand-wash-strong); border-top: 0; color: #fff; }
.site-footer .brand-logo { height: 30px; }
.site-footer p { color: rgba(255,255,255,.9); }
.site-footer .footer-col h3, .site-footer .footer-col h4 { color: rgba(255,255,255,.72); }
.site-footer .footer-col a, .site-footer .footer-bottom, .site-footer .footer-bottom a { color: rgba(255,255,255,.9); }
.site-footer .footer-bottom { border-top-color: rgba(255,255,255,.25); }
.site-footer .footer-col a:hover, .site-footer .footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

/* ---------- Avis : photo du couple (optionnelle) à la place de l'initiale ---------- */
.tmt-avatar { width: 48px; height: 48px; overflow: hidden; }
.tmt-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Avis défilants (hero /avis) : marquee vertical continu ---------- */
.avis-scroll { position: relative; height: clamp(360px, 58vh, 520px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); }
.avis-scroll__track { animation: avis-scroll-up var(--avis-dur, 24s) linear infinite; will-change: transform; }
.avis-scroll .tmt-card { height: auto; margin: 0 0 1rem; }
.avis-scroll:hover .avis-scroll__track, .avis-scroll:focus-within .avis-scroll__track { animation-play-state: paused; }
@keyframes avis-scroll-up { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce){ .avis-scroll__track { animation: none; } }
@media (max-width: 939px){ .avis-scroll { display: none; } }

/* Astérisque « champ obligatoire » dans les formulaires */
.req { color: #C0392B; font-weight: 700; margin-left: .1em; }

/* Pages légales — onglets + contenu long-form */
.legal-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.legal-tabs a { font-size: .86rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-soft); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.legal-tabs a:hover { border-color: var(--brand); color: var(--brand); }
.legal-tabs a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.prose { max-width: 75ch; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .8rem; }
.prose h2 { font-size: clamp(1.25rem, 2.6vw, 1.65rem); margin: 2.4rem 0 .8rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.prose h3 { font-size: 1.12rem; margin: 1.5rem 0 .5rem; }
.prose p { margin: .9rem 0; color: var(--text); }
.prose ul { margin: .9rem 0; padding-left: 1.25rem; list-style: disc; display: grid; gap: .35rem; }
.prose ul li { padding-left: .15rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-strong); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 600; color: var(--text-strong); }

/* Bloc tarif */
.price-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.price-card.featured { border-color: var(--brand); box-shadow: 0 30px 60px -35px var(--brand-shadow); }
.price-card.featured::before { content: "Le plus choisi"; position: absolute; top: -.85rem; left: 1.8rem; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .8rem; border-radius: 999px; }
.price-card.featured.no-flag::before { content: none; }
.price-amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.2rem); line-height: 1; color: var(--text-strong); letter-spacing: -.02em; margin: .3rem 0 .2rem; }
.price-amount small { font-size: 1rem; font-weight: 600; color: var(--text-soft); letter-spacing: 0; }
.price-card ul { margin: 1.2rem 0; display: grid; gap: .55rem; }
.price-card .btn { margin-top: auto; }

/* Citation / verset */
.verse { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.4; color: var(--text-strong); }
.verse cite { display: block; font-style: normal; font-family: var(--font-body); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); margin-top: 1.2rem; }

/* Portrait d'équipe (page à propos) — photo ronde alignée sur l'avatar initiales */
.team-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 1px solid var(--border); }

/* ---------- Bandeau partenaires (cartes logos, auto-listées depuis le dossier) ---------- */
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); }
.partner-logo { margin: 0; display: inline-flex; align-items: center; justify-content: center; padding: .5rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .25s ease, transform .25s ease; }
.partner-logo:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-2px); }
.partner-logo img { max-height: clamp(30px, 4.5vw, 44px); max-width: 130px; width: auto; object-fit: contain; }

/* ---------- Sections : contexte de positionnement (fonds/voiles photo) ----------
   (Les anciennes « fines bandes blanches » entre sections ont été retirées :
   l'alternance des fonds suffit à séparer. Le voile des sections photo est
   porté par .section-photo::before.) */
#main > section { position: relative; }

/* Conteneur élargi (grands écrans) — réduit les marges latérales, dont la marge gauche du texte */
.container { width: min(1400px, 100% - 2.5rem); }

/* ---------- Showcase produit (maquette 3 appareils) ---------- */
.showcase-mockup { margin: clamp(2rem, 5vw, 3.5rem) auto clamp(1.5rem, 4vw, 2.5rem); max-width: 1120px; }
.showcase-mockup img { width: 100%; height: auto; display: block; }
.showcase-feats { text-align: center; }
.showcase-feats .ico { margin-inline: auto; }
.showcase-feats h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.showcase-feats p { font-size: .92rem; }

/* =================================================================
   THÈME GESTION — pages Paroisses & Prestataires (<body data-theme="gestion">)
   Reprend la charte « Celebration Pro 2026 » de l'app V2 espace gestion
   (assets/styles/app.css, [data-app="gestion"]) : bleu primaire #4C679D
   (le bleu présent un peu partout dans la gestion) + vert secondaire
   #647F54. Portée limitée à <main> pour conserver l'en-tête et le pied
   de page violet de la marque NMDM (validé avec le client).
   ================================================================= */
[data-theme="gestion"] main {
  --brand:         #4C679D; /* primaire CelebrationPro — bleu */
  --brand-strong:  #3A4F7A; /* brand-700 de la V2 */
  --on-brand:      #FFFFFF;
  --brand-shadow:  rgba(76, 103, 157, .42);
  --accent:        #647F54; /* secondaire CelebrationPro — vert */
  --accent-ink:    #4D6240; /* secondary-700 : assez foncé pour du texte sur fond clair */
  --accent-soft:   rgba(100, 127, 84, .14);
  --on-accent:     #FFFFFF; /* texte blanc sur le vert (boutons accent) */
  --surface-2:     #E6EDF8; /* surface nettement bleutée (~14 % du brand) pour accentuer l'alternance des sections */
  --border:        #E4E8EF;
  --border-strong: #C3CBD8;
  --footer-bg:     #2E4063; /* sections sombres in-content → bleu profond (pas le footer du site) */
}
/* Hero : wash bleu → vert (remplace le violet → orange de la marque) */
[data-theme="gestion"] .hero { background:
  linear-gradient(105deg, rgba(76,103,157,.20) 0%, rgba(100,127,84,.16) 98%),
  linear-gradient(180deg, #FFFFFF, var(--bg)); }
/* Bandeau CTA : dégradé bleu → vert (repris du --nl-gradient de la V2) */
[data-theme="gestion"] .cta-band { background:
  linear-gradient(105deg, var(--brand-strong) 0%, var(--brand) 55%, #647F54 135%); }
/* Halo d'ambiance recoloré en bleu/vert (le footer reste violet, hors main) */
body[data-theme="gestion"]::before { background:
  radial-gradient(58% 48% at 80% -6%, rgba(100,127,84,.10), transparent 60%),
  radial-gradient(50% 40% at 4% 6%, rgba(76,103,157,.10), transparent 60%); }
/* Sections à fond photo dans le thème gestion (ex. section avis) : voile BLEU
   profond au lieu du violet de la marque, pour rester cohérent avec la charte. */
[data-theme="gestion"] .section-photo::before {
  background: linear-gradient(rgba(20,30,52,.80), rgba(20,30,52,.72)); }

/* Hero photo plein cadre (paroisses & prestataires) : même dispositif que la
   home — photo en fond + texte blanc — mais voile BLEU de la charte Gestion à
   la place du violet (mêmes stops/opacités que .hero-photo::before, recolorés
   sur le bleu marine #14203A → #24345A → brand #4C679D). */
[data-theme="gestion"] .hero-photo::before {
  background:
    linear-gradient(100deg, rgba(20,32,58,.93) 0%, rgba(36,52,86,.80) 26%, rgba(76,103,157,.42) 52%, rgba(76,103,157,.06) 74%, transparent 90%),
    linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.26)); }

/* Logo CelebrationPro co-marqué, en haut à droite du hero. Le logo (bleu/vert
   foncé) est recoloré en BLANC et posé directement sur la photo — sans pastille —
   avec une ombre portée pour rester lisible quelle que soit la zone de l'image. */
.hero-brand { position: absolute; top: clamp(1rem, 3.5vw, 1.7rem); right: clamp(1rem, 3.5vw, 2rem); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  transition: transform .25s ease, opacity .25s ease; }
.hero-brand:hover { transform: translateY(-1px); opacity: .92; }
.hero-brand:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
/* Intitulé « Propulsé par » : explicite le rôle du logo (co-branding) */
.hero-brand__label { font-family: var(--font-eyebrow); font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hero-brand img { display: block; width: clamp(150px, 17vw, 210px); height: auto;
  /* logo foncé → blanc monochrome + ombre portée pour le détacher de la photo */
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
@media (max-width: 560px){
  /* Mobile : ensemble plus compact, calé dans le coin (le contenu du hero est
     centré verticalement, donc aucun chevauchement avec le texte). */
  .hero-brand { top: .9rem; right: .9rem; gap: .2rem; }
  .hero-brand__label { font-size: .58rem; letter-spacing: .16em; }
  .hero-brand img { width: 124px; }
}

/* ============ Annuaire — hero sur fond carte (carte de France des prestataires) ============ */
/* Réutilise .hero-photo (texte blanc + voile violet gauche). Le fond .hero-bg
   est la carte Mapbox générée ; le voile laisse les pins visibles à droite,
   où flotte l'exemple de fiche. */
.hero-map { isolation: isolate;
  /* Page mono-section : à la différence des autres heros (plafonnés à 760px pour
     laisser dépasser la section suivante et inviter au scroll), celui-ci EST
     l'unique section. On lui fait remplir toute la hauteur sous le header sticky
     pour que le footer ne pointe pas sous la ligne de flottaison — le CTA
     « Explorer l'annuaire » reste ainsi plein cadre. */
  min-height: calc(100vh - var(--nav-h, 76px));  /* repli */
  min-height: calc(100dvh - var(--nav-h, 76px)); /* exclut la barre mobile */
}
/* Voile aligné sur les autres pages : on n'écrase plus .hero-photo::before, on
   en hérite (même dégradé violet latéral qui s'efface à droite). La vidéo étant
   un peu plus claire qu'une photo fixe, on garde juste une légère baisse de
   luminosité et une ombre de texte discrète pour la lisibilité du blanc. */
.hero-map .hero-bg { object-position: center 42%; filter: brightness(.9); }
.hero-map .hero-copy { text-shadow: 0 1px 12px rgba(18,7,30,.45); }
/* Titre plus compact ici : le bento + les CTA doivent rester au-dessus de la ligne de flottaison */
.hero-map .hero-inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero-map .hero-copy { max-width: 680px; }
.hero-map h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; margin-bottom: 1rem; }
.hero-map .lead { font-size: clamp(1rem, 1.4vw, 1.15rem); }
/* Emphase dans l'accroche : le <strong> hérite sinon du gris foncé global
   (core.css) et disparaît sur la vidéo → accent orange de la marque. */
.hero-map .lead strong { color: #fff; } /* emphase par le gras seul, plus d'orange */
/* Bento en verre dépoli sur la carte */
/* Atouts en liste légère : ni fond, ni bordure, ni flou — on aère, ça respire
   sur la photo au lieu d'empiler 4 cartes vitrées. */
.hero-map .ann-feature { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: .3rem 0; }
.hero-map .ann-feature:hover { border-color: transparent; transform: none; }
.hero-map .ann-feature__ico { background: rgba(255,255,255,.16); }
.hero-map .ann-feature__txt strong { color: #fff; }
.hero-map .ann-feature__txt em { color: rgba(255,255,255,.78); }

/* Bento de capacités (colonne gauche) */
.ann-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin-top: 2rem; }
@media (max-width: 480px){ .ann-features { grid-template-columns: 1fr; } }
.ann-feature { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: border-color .25s ease, transform .25s ease; }
.ann-feature:hover { transform: translateY(-2px); }
.ann-feature__ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 1.05rem; background: var(--accent-soft, color-mix(in srgb, var(--accent) 16%, transparent)); }
.ann-feature__txt { display: flex; flex-direction: column; }
.ann-feature__txt strong { font-size: .94rem; line-height: 1.2; }
.ann-feature__txt em { font-style: normal; font-size: .81rem; color: var(--text-soft); margin-top: .12rem; }

/* ============ Annuaire — exemple de fiche (fidèle à _card.html.twig) ============ */
.ann-card { position: relative; width: 100%; max-width: 380px; margin-inline: auto; border-radius: var(--card-radius, 20px); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 48px 90px -36px rgba(40,16,70,.6); }
.ann-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.ann-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-card__badge { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .72rem; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--brand, #663399); font-size: .77rem; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.ann-card__tag { position: absolute; right: .7rem; top: .7rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(33,16,46,.55); color: #fff; font-size: .67rem; letter-spacing: .02em; }
.ann-card__body { padding: 1rem 1.15rem 1.2rem; }
.ann-card__name { font-size: 1.12rem; line-height: 1.2; margin: 0 0 .4rem; }
.ann-card__rating { font-size: .85rem; color: var(--text-soft); display: flex; align-items: center; gap: .35rem; }
.ann-card__stars { color: #E0A93D; letter-spacing: .04em; }
.ann-card__city { font-size: .85rem; color: var(--text-soft); margin-top: .4rem; display: flex; align-items: center; gap: .35rem; }
.ann-card__accroche { font-size: .92rem; color: var(--text); margin: .7rem 0 .9rem; line-height: 1.45; }
.ann-card__meta-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: .4rem; }
.ann-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ann-card__chip { padding: .26rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); color: var(--accent-ink, var(--accent)); }
.ann-card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 700; color: var(--brand, #663399); }

/* ============ Annuaire — DECK tournant de fiches (fiche de devant surélevée) ============ */
.ann-feed-col { width: 100%; max-width: 460px; margin-inline: auto; }
.ann-feed__head { display: inline-block; margin-bottom: 1rem; padding: .28rem .8rem; border-radius: 999px;
  background: rgba(33,16,46,.5); color: #fff; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* « App » dans l'iPad : l'écran est rempli edge-to-edge — un en-tête fixe + un
   flux de fiches qui DÉFILE vers le haut en continu (façon Apple), boucle sans
   couture (annuaire.js double les fiches). Pause au survol. */
.ann-app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #faf7fe; }
.ann-app__bar { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }
.ann-app__logo { width: 22px; height: 22px; object-fit: contain; }
.ann-app__title { font-weight: 700; font-size: .9rem; color: var(--brand, #663399); }
.ann-app__search { margin-left: auto; flex: 1; max-width: 150px; height: 26px; display: flex; align-items: center;
  padding: 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-soft); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-feed { position: relative; flex: 1; overflow: hidden; }
/* Défilement pas-à-pas piloté par annuaire.js (transform appliqué en inline) :
   chaque fiche s'arrête ~3 s en haut puis la suivante monte. */
.ann-feed__track { display: flex; flex-direction: column; will-change: transform; }
.ann-feed .ann-card { width: auto; max-width: none; flex: none; margin: 12px 10px 0; box-shadow: 0 16px 30px -18px rgba(40,16,70,.4); }
.ann-feed .ann-card__media { aspect-ratio: 16 / 9; }
/* Carte compacte pour tenir entière dans l'écran (avec « Voir le profil »). */
.ann-feed .ann-card__body { padding: .7rem .9rem .85rem; }
.ann-feed .ann-card__name { margin-bottom: .3rem; }
.ann-feed .ann-card__city { margin-top: .3rem; }
.ann-feed .ann-card__accroche { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: .5rem 0 .6rem; }
.ann-feed .ann-card__meta-label { margin-bottom: .3rem; }
.ann-feed .ann-card__cta { margin-top: .65rem; }
/* Repli quand une vraie fiche n'a pas de photo (catégorie + emoji) */
.ann-card__noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4rem;
  background: linear-gradient(135deg, var(--surface-2), #ece5f6); }

/* Mockup iPad : cadre PNG fourni (11" portrait) SOUS la zone d'écran (écran du PNG
   noir opaque → recouvert par .ann-ipad__screen, calée dans le bezel). */
.ann-ipad { position: relative; width: 372px; max-width: 100%; margin-inline: auto; aspect-ratio: 1100 / 1546;
  filter: drop-shadow(0 48px 56px rgba(20,8,40,.55)); isolation: isolate; }
.ann-ipad__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ann-ipad__screen { position: absolute; top: 3.55%; left: 5%; right: 5%; bottom: 3.55%; z-index: 2; overflow: hidden;
  border-radius: 20px; background: #faf7fe; }

/* ============ Statistiques (compteurs animés · data-count) ============ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; text-align: center; max-width: 820px; margin-inline: auto; }
@media (max-width: 720px){ .stats-grid { grid-template-columns: 1fr; gap: 1.1rem; } }
.stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.4rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 40px 80px -52px var(--brand-shadow, rgba(0,0,0,.4)); }
.stat[hidden] { display: none; }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; color: var(--brand, #663399); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .92rem; color: var(--text-soft); max-width: 22ch; }

/* ============ FAQ par profil (onglets · data-tabs) ============ */
.faq-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.8rem; }
.faq-tab { appearance: none; font: inherit; font-weight: 600; cursor: pointer; padding: .58em 1.25em; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft); transition: color .2s ease, background .2s ease, border-color .2s ease; }
.faq-tab:hover { color: var(--brand, #663399); border-color: var(--brand, #663399); }
.faq-tab[aria-selected="true"] { background: var(--brand, #663399); border-color: var(--brand, #663399); color: #fff; }
.faq-tab:focus-visible { outline: 2px solid var(--brand, #663399); outline-offset: 2px; }
.faq-tabs .faq[hidden] { display: none; }

/* ============ Équipe — portraits agrandis + réseaux sociaux des fondateurs ============ */
.team-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.4rem); max-width: 900px; margin-inline: auto; }
@media (min-width: 720px){ .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card .team-photo { width: 96px; height: 96px; }
.team-card .role { font-weight: 600; color: var(--accent-ink, var(--accent)); margin: .2rem 0 .9rem; }
.team-socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.icon-link:hover { color: var(--brand, #663399); border-color: var(--brand, #663399); background: var(--accent-soft, color-mix(in srgb, var(--brand) 8%, transparent)); transform: translateY(-1px); }
.icon-link:focus-visible { outline: 2px solid var(--brand, #663399); outline-offset: 2px; }
.icon-link svg { width: 18px; height: 18px; }

/* ============ À propos — bandeau photo de l'intro (section « constat & démarche ») ============ */
.about-banner { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(320px, 42vw, 460px); margin: 0; border-radius: var(--card-radius, 18px); overflow: hidden; border: 1px solid var(--border-strong); }
.about-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -2; }
.about-banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(33,16,46,.90) 0%, rgba(58,28,80,.78) 30%, rgba(102,51,153,.42) 62%, rgba(102,51,153,.08) 88%); }
.about-banner__copy { margin: 0; padding: clamp(1.8rem, 4vw, 3.2rem); max-width: 620px; color: #fff; }
.about-banner__copy .eyebrow { --accent-ink: #FFD7A8; color: #FFD7A8; }
.about-banner__copy h2 { color: #fff; margin-bottom: .7rem; }
.about-banner__copy .lead { color: rgba(255,255,255,.92); }
/* Mobile : voile plus dense et plat pour garder le texte lisible sur toute la largeur */
@media (max-width: 720px){
  .about-banner::before { background: linear-gradient(rgba(33,16,46,.82), rgba(33,16,46,.74)); }
  .about-banner__copy { max-width: none; }
}

/* ============ Carrousel des fonctionnalités (mockups · data-carousel) ============ */
.feature-carousel { position: relative; margin-top: 1.5rem; }
.feature-carousel__viewport { overflow: hidden; border-radius: var(--card-radius, 18px); }
.feature-carousel__track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.feature-carousel__track::-webkit-scrollbar { display: none; }
.feature-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1rem, 3vw, 2.4rem); }
@media (min-width: 860px){ .feature-slide { grid-template-columns: 1.05fr .95fr; } }
.feature-slide__media { margin: 0; }
.feature-slide__media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 40px 70px rgba(102,51,153,.28)); }
.feature-slide__copy .icon { margin-bottom: .6rem; }
.feature-slide__copy h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.feature-slide__copy p { color: var(--text-soft); margin-top: .6rem; }
/* Flèches */
.feature-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--brand, #663399); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 14px 34px -14px var(--brand-shadow, rgba(0,0,0,.35)); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.feature-carousel__nav:hover { background: var(--brand, #663399); color: #fff; border-color: var(--brand, #663399); }
.feature-carousel__nav:focus-visible { outline: 2px solid var(--brand, #663399); outline-offset: 2px; }
.feature-carousel__nav--prev { left: -6px; }
.feature-carousel__nav--next { right: -6px; }
@media (max-width: 600px){ .feature-carousel__nav { width: 38px; height: 38px; font-size: 1.3rem; } .feature-carousel__nav--prev { left: 2px; } .feature-carousel__nav--next { right: 2px; } }
/* Pastilles */
.feature-carousel__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.5rem; }
.feature-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--border-strong); transition: background .2s ease, transform .2s ease; }
.feature-carousel__dot:hover { background: var(--brand, #663399); }
.feature-carousel__dot[aria-selected="true"] { background: var(--brand, #663399); transform: scale(1.35); }
.feature-carousel__dot:focus-visible { outline: 2px solid var(--brand, #663399); outline-offset: 2px; }

/* ============ Témoignages — sous-groupes (couples / pros) dans une même section ============ */
.tmt-group-label { text-align: center; font-weight: 600; color: var(--text-strong); font-size: 1.05rem; margin: 0 0 1.3rem; }
/* Masquage à zéro avis (main.js) : .tmt-grid a display:grid, il faut donc une règle [hidden] explicite. */
.tmt-grid[hidden], .tmt-group-label[hidden], .avis-scroll[hidden] { display: none; }
.tmt-grid--pro { max-width: 760px; margin-inline: auto; }
@media (min-width: 760px){ .tmt-grid--pro { grid-template-columns: repeat(2, 1fr); } }

/* ============ Avis — sélecteur de rôle (couple/paroisse/prestataire) + champs conditionnels ============ */
.role-select { display: flex; flex-wrap: wrap; gap: .5rem; }
.role-select input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.role-select label { display: inline-flex; align-items: center; gap: .45rem; padding: .55em 1.1em; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft); font-weight: 600; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.role-select label:hover { border-color: var(--brand, #663399); color: var(--brand, #663399); }
.role-select input:checked + label { background: var(--brand, #663399); border-color: var(--brand, #663399); color: #fff; }
.role-select input:focus-visible + label { outline: 2px solid var(--brand, #663399); outline-offset: 2px; }
/* Champs propres à un rôle : masqués par défaut, affichés selon data-role du formulaire */
.form [data-role-only] { display: none; }
.form[data-role="couple"] [data-role-only="couple"],
.form[data-role="paroisse"] [data-role-only="paroisse"],
.form[data-role="prestataire"] [data-role-only="prestataire"] { display: block; }

/* ============ Respiration titre → paragraphe d'intro ============
   *{margin:0} colle le grand titre (h2) au paragraphe .lead qui le suit.
   On rétablit un cran d'air partout (section-head, bandeaux, colonnes…). */
h2 + .lead { margin-top: 1.2rem; }

/* ============ Carte annuaire : aperçu inerte → ouverture en PLEIN ÉCRAN ============
   L'embed sert d'aperçu (inerte : le scroll de page passe à travers). Le voile
   .map-shield (toujours visible) ouvre la carte interactive en plein écran via
   main.js — fiable au tactile (l'ancien toggle « activer au mouseleave » ne
   marchait pas sur mobile). */
.annuaire-teaser__map iframe { pointer-events: none; }
.map-shield { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; border: 0; background: transparent; cursor: pointer; transition: background .2s ease; }
.map-shield:hover, .map-shield:focus-visible { background: rgba(18,7,30,.08); outline: none; }
.map-shield__hint { display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(18,7,30,.78); padding: .6em 1.2em; border-radius: 999px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
.map-shield__hint::before { content: "\26F6"; font-size: 1.15em; line-height: 1; }

/* Ordinateur (souris) : clic = interaction EN PLACE (carte interactive, voile masqué) ;
   re-neutralisée au mouseleave. Le bouton ⛶ dédié garde l'accès au plein écran.
   (Le tactile ouvre directement le plein écran — voir main.js.) */
.annuaire-teaser__map.is-active iframe { pointer-events: auto; }
.annuaire-teaser__map.is-active .map-shield { opacity: 0; visibility: hidden; pointer-events: none; }
.map-shield--inline .map-shield__hint::before { content: none; }
.map-fs-btn { position: absolute; top: .7rem; left: .7rem; z-index: 5; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: rgba(18,7,30,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); transition: background .2s ease, transform .2s ease; }
.map-fs-btn:hover { background: rgba(18,7,30,.85); transform: translateY(-1px); }

/* Carte en pleine largeur (bord à bord) sur mobile + un peu plus de hauteur.
   #main{overflow-x:clip} contient le débord du full-bleed. */
@media (max-width: 939px){
  .annuaire-teaser__map { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; min-height: clamp(440px, 66vh, 620px); }
}

/* Plein écran : overlay couvrant le viewport (barre + carte interactive + ✕). */
html.map-fs-open { overflow: hidden; }
.map-fs { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(18,7,30,.55); animation: map-fs-in .2s ease both; }
@keyframes map-fs-in { from { opacity: 0; } to { opacity: 1; } }
.map-fs__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; padding-top: max(.7rem, env(safe-area-inset-top)); background: var(--brand); color: #fff; }
.map-fs__title { font-weight: 600; font-size: 1rem; }
.map-fs__close { flex: none; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; background: rgba(255,255,255,.16); transition: background .2s ease; }
.map-fs__close:hover { background: rgba(255,255,255,.3); }
.map-fs__frame { flex: 1; width: 100%; border: 0; background: #eef0f5; }
@media (prefers-reduced-motion: reduce){ .map-fs { animation: none; } }

/* ============ Parallaxe douce des fonds photo ([data-parallax]) ============
   Le translate appliqué par main.js déplacerait le bord d'un cover en inset:0 et
   exposerait un liseré. On surdimensionne donc les fonds porteurs de data-parallax
   (overscan ~11 % haut/bas) : le décalage (vitesse 0.05, soit ~40 px max) reste
   toujours à l'intérieur de l'image. prefers-reduced-motion fige le tout (core.css). */
.hero-bg[data-parallax], .section-bg[data-parallax],
.cta-bg[data-parallax], .about-banner > img[data-parallax] {
  top: -11%; height: 122%;
}
/* Le hero (.hero overflow:clip), .cta-band et .about-banner clippent déjà leur
   débordement ; .section-photo ne le faisait pas → on le clippe pour contenir
   l'overscan de la parallaxe. */
.section-photo { overflow: hidden; }

/* =================================================================
   CORRECTIFS REVUE — 2026-06-25 (responsive & robustesse)
   Groupés en fin de fichier pour rester relisibles. Les points génériques
   (formulaires, coupure de texte, scroll-padding) gagneraient à être portés
   dans le socle core.css partagé des 4 sites.
   ================================================================= */

/* [P0] Formulaires (/contact, /avis) — empêcher un contrôle intrinsèquement
   large (<select> à longues options, <input type=file>, type=month) de forcer
   la grille .form au-delà du conteneur → débordement horizontal sur mobile.
   Le combinateur enfant ">" ne cible QUE les vrais champs : les radios/étoiles
   masqués (.role-select input, .star-input input, position:absolute) sont
   imbriqués dans .field, donc épargnés. */
.form { grid-template-columns: minmax(0, 1fr); }
.field { min-width: 0; }
.field > input, .field > textarea, .field > select { width: 100%; min-width: 0; max-width: 100%; }

/* [P0] Filet anti-débordement : casser mots/URL trop longs (URL en clair des
   pages légales, longs mots de titres à 320px) plutôt que de pousser la page. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* [P0] Tableaux des pages légales : défilables horizontalement plutôt que
   tronqués sous overflow-x:hidden (ex. tableau 4 colonnes des cookies). */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose { overflow-wrap: anywhere; }

/* [P0] Grilles « split » (.hero-grid) en mobile : sous 940px la colonne
   implicite « auto » se dimensionne sur le max-content du contenu — ex. la
   page /contact où l'aside « Nous joindre » porte un email non sécable dans
   une .textlink (~370px) qui étirait toute la grille (et donc le formulaire).
   On force une piste rétrécissable ; le 2-colonnes desktop reste défini plus
   haut (@min-width:940px) et n'est pas touché. */
@media (max-width: 939px){ .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* [P0/P1] Liens texte : autoriser la coupure des contenus longs non sécables
   (email/URL dans .textlink, qui est inline-flex) → corrige les débordements
   de /contact (email de l'aside) et /a-propos (lien long). */
.textlink { overflow-wrap: anywhere; }

/* [P0] Débordement horizontal DESKTOP (≥940px) sur l'accueil et /futurs-maries :
   l'encart carte annuaire en pleine largeur (.annuaire-teaser__map,
   margin-right: calc(50% - 50vw)) DÉPASSE le bord droit du viewport (~+223px à
   1280) et crée un vrai scroll horizontal — non contenu par body{overflow-x:hidden}
   (le scroll est porté par <html>). On clippe au niveau de <main> : le débord
   VISUEL de la carte jusqu'au bord d'écran est conservé, seul l'excédent est
   coupé. <main> ne contient pas le header → son position:sticky n'est pas affecté
   (contrairement à overflow sur <html>, qui le casserait). */
#main { overflow-x: clip; }

/* ============ Footer allégé en mobile + liens reportés au bas du menu ============
   Sous 980px (apparition du menu hamburger), le pied de page se réduit au LOGO +
   COPYRIGHT ; les autres liens sont reportés au bas du menu mobile (injectés par
   main.js : Nous contacter · Laisser un avis · CelebrationPro · Mentions légales).
   ≥ 980px : footer complet inchangé. */
@media (max-width: 979px){
  .site-footer .footer-grid { grid-template-columns: 1fr; justify-items: center; gap: 0; margin-bottom: 1.4rem; text-align: center; }
  .site-footer .footer-col:nth-child(2),
  .site-footer .footer-col:nth-child(3),
  .site-footer .footer-col p { display: none; }            /* masque produits, Nuptia Logos, accroche + bouton */
  .site-footer .footer-bottom { justify-content: center; text-align: center; border-top-color: transparent; margin-top: 0; }
  .site-footer .footer-bottom .footer-legal { display: none; } /* le légal passe dans le menu (lien unique) */
}
/* Section secondaire en bas du menu mobile (liens reportés du footer). */
/* ============ Menu hamburger — DA « structuré + icônes » ============ */
.mobile-menu { padding-top: 1.1rem; }
.mobile-menu__title { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-soft); margin: 0; padding: .15rem .25rem .55rem; }
/* Entrées de navigation : icône + libellé + chevron */
.mobile-menu > a:not(.btn) { display: flex; align-items: center; gap: .85rem; padding: .9rem .25rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--text-strong); border-bottom: 1px solid var(--border); transition: color .2s ease, padding-left .2s ease; }
.mobile-menu > a:not(.btn):hover, .mobile-menu > a:not(.btn)[aria-current="page"] { color: var(--brand); }
.mobile-menu > a:not(.btn):hover { padding-left: .5rem; }
/* Icônes monochromes (SVG en masque, teintées en violet de marque) — rendu
   identique partout, indépendant des polices emoji. */
.mobile-menu > a:not(.btn)::before { content: ""; width: 1.35rem; height: 1.35rem; flex: none; background-color: var(--brand); opacity: .92; -webkit-mask: var(--mm-ic) center / contain no-repeat; mask: var(--mm-ic) center / contain no-repeat; }
.mobile-menu > a[href="/futurs-maries"] { --mm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z'/%3E%3C/svg%3E"); }
.mobile-menu > a[href="/paroisses"]     { --mm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v3h3v2H9v9H7V6H4V4h3z'/%3E%3C/svg%3E"); }
.mobile-menu > a[href="/prestataires"]  { --mm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z'/%3E%3Cpath d='M9 3v10H8V3z'/%3E%3Cpath d='M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5z'/%3E%3C/svg%3E"); }
.mobile-menu > a[href="/a-propos"]       { --mm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E"); }
.mobile-menu > a[href="/annuaire"]       { --mm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E"); }
.mobile-menu > a:not(.btn)::after { content: "\203A"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--border-strong); transition: transform .2s ease, color .2s ease; }
.mobile-menu > a:not(.btn):hover::after, .mobile-menu > a:not(.btn)[aria-current="page"]::after { color: var(--brand); transform: translateX(3px); }
.mobile-menu .btn { margin-top: 1.3rem; }
/* CTA : texte blanc (le socle .mobile-menu a imposait une encre sombre). */
.mobile-menu .btn-primary { color: var(--on-brand, #fff); }
/* Drawer défilant : le contenu (sections + liens) peut dépasser la hauteur d'écran
   → on défile dans le menu au lieu de couper le bas (légal inaccessible).
   NB : le .site-header porte un backdrop-filter, donc il sert de bloc conteneur au
   menu position:fixed → on NE peut PAS borner via bottom:0 (ça se calerait sur le
   header). On borne via max-height en dvh (relatif au viewport) + scroll interne. */
.mobile-menu {
  max-height: calc(100vh - var(--nav-h, 76px));
  max-height: calc(100dvh - var(--nav-h, 76px));
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-bottom: 2rem;
}

/* Section secondaire « Aide & infos » (liens reportés du footer). */
.mobile-menu__more { display: grid; gap: 0; margin-top: 1.4rem; padding-top: .2rem; border-top: 1px solid var(--border); }
.mobile-menu .mobile-menu__more a { font-family: var(--font-body); font-size: .98rem; color: var(--text-soft); padding: .75rem .25rem; border-bottom: 1px solid var(--border); transition: color .2s ease, padding-left .2s ease; }
.mobile-menu .mobile-menu__more a:hover { color: var(--brand); padding-left: .35rem; }
.mobile-menu .mobile-menu__more a.mobile-menu__legal { font-size: .85rem; border-bottom: 0; }

/* [iOS] Navbar sticky + ouverture du menu « sur place ».
   Le header est position:sticky. Le socle core.css pose body{overflow-x:hidden} ;
   or sur iOS Safari, overflow-x:hidden force overflow-y:auto → body devient un
   conteneur de scroll et le sticky du header est CASSÉ (la navbar ne reste plus
   en haut au défilement). On repasse en overflow-x:CLIP : même protection contre
   le débordement horizontal, mais sans créer de conteneur de scroll → le sticky
   tient. (clip supporté iOS 16+.)
   On NE verrouille PLUS le scroll à l'ouverture du menu : poser overflow:hidden sur
   html/body faisait SAUTER iOS en haut de page. Le drawer est position:fixed, donc
   il s'ouvre sous le header là où l'utilisateur se trouve, sans saut. */
body { overflow-x: clip; }

/* [P2] Ancres : compenser le header sticky (~76px) pour ne pas masquer la
   cible au défilement (ex. #tarif). */
html { scroll-padding-top: calc(var(--nav-h, 76px) + 1rem); }


/* ═══════════════ Gestionnaire de consentement cookies (consent.js) ═══════════════
   Entièrement piloté par les tokens de la charte (--brand, --surface, --text…),
   donc identique sur les 4 vitrines (clair ou sombre). */
.np-cookie *, .np-cookie *::before, .np-cookie *::after { box-sizing: border-box; }
.np-cookie-banner[hidden], .np-cookie-modal[hidden] { display: none !important; }

/* ── Bandeau ── */
.np-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  background: var(--surface, #fff); border-top: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, .4);
}
.np-cookie-banner__inner {
  max-width: 1160px; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
}
.np-cookie-banner__text {
  margin: 0; flex: 1 1 340px; font-size: .9rem; line-height: 1.5;
  color: var(--text, #333); font-family: var(--font-body, inherit);
}
.np-cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Boutons ── */
.np-cookie-btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: .55em 1.1em; border-radius: var(--btn-radius, 8px);
  border: 1px solid var(--border-strong, var(--border, #ccc));
  background: var(--surface, #fff); color: var(--text, #333);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.np-cookie-btn:hover { background: var(--surface-2, #f3f3f3); }
.np-cookie-btn--primary {
  background: var(--brand, #333); color: var(--on-brand, #fff); border-color: var(--brand, #333);
}
.np-cookie-btn--primary:hover { background: var(--brand-strong, var(--brand, #333)); opacity: .96; }

/* ── Modale de préférences ── */
.np-cookie-modal {
  position: fixed; inset: 0; z-index: 2147483001;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.np-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.np-cookie-modal__dialog {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--card-radius, 16px); padding: 1.5rem;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
}
.np-cookie-modal__title {
  margin: 0 0 .35rem; font-size: 1.25rem;
  color: var(--text-strong, var(--text, #222)); font-family: var(--font-display, inherit);
}
.np-cookie-modal__sub { margin: 0 0 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--text-soft, #666); }
.np-cookie-pref {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--border, #eee);
}
.np-cookie-pref__txt { font-size: .9rem; color: var(--text, #333); }
.np-cookie-pref__desc { display: block; margin-top: .15rem; font-size: .8rem; color: var(--text-soft, #666); }
.np-cookie-modal__actions {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border, #eee);
}

/* ── Interrupteur ── */
.np-cookie-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.np-cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.np-cookie-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong, #bbb); transition: background .2s ease; }
.np-cookie-switch span::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.np-cookie-switch input:checked + span { background: var(--brand, #4a8); }
.np-cookie-switch input:checked + span::before { transform: translateX(18px); }
.np-cookie-switch input:disabled + span { opacity: .55; cursor: not-allowed; }
.np-cookie-switch input:focus-visible + span { outline: 2px solid var(--brand, #4a8); outline-offset: 2px; }

/* ── Liens « En savoir plus » / « Gérer mes cookies » ── */
.np-cookie-link { color: inherit; text-decoration: underline; }
.np-cookie-manage { cursor: pointer; }

/* ── Panneau « click-to-load » (carte / annuaire en attente d'accord) ── */
.np-consent-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 2rem 1.25rem; background: var(--surface-2, #f1f1f1);
  border: 1px dashed var(--border-strong, #ccc); color: var(--text, #333);
}
.np-consent-ph--overlay { position: absolute; inset: 0; z-index: 5; border: 0; }
.np-consent-ph__inner { max-width: 420px; }
.np-consent-ph__title {
  margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600;
  color: var(--text-strong, var(--text, #222)); font-family: var(--font-display, inherit);
}
.np-consent-ph__text { margin: 0 0 1rem; font-size: .85rem; line-height: 1.5; color: var(--text-soft, #666); }

@media (max-width: 560px) {
  .np-cookie-banner__actions { width: 100%; }
  .np-cookie-banner__actions .np-cookie-btn { flex: 1 1 auto; }
}

/* Sélection de texte : fond marque + texte blanc, sinon les libellés déjà
   colorés (CTA, liens) se fondent dans le surlignage bleu du navigateur. */
::selection {
  background: var(--brand);
  color: #FFFFFF;
}

/* ---------- Guide (SEO) : fil d'Ariane, sommaire, étapes, cartes ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; margin-bottom: 1rem; color: rgba(255,255,255,.75); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a::after { content: "›"; margin-left: .35rem; opacity: .7; }
.breadcrumb span { color: #fff; font-weight: 600; }
.guide-toc { background: var(--surface-2, #F7F3EE); border: 1px solid var(--border); border-radius: var(--card-radius, 18px); padding: 1.2rem 1.5rem; margin: 0 0 2rem; }
.guide-toc__title { margin: 0 0 .5rem; font-weight: 700; color: var(--text-strong, var(--text)); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.guide-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; columns: 1; }
@media (min-width: 640px) { .guide-toc ol { grid-template-columns: 1fr 1fr; } }
.guide-toc a { color: var(--brand); text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.prose ol.guide-steps { margin: 1rem 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.prose ol.guide-steps li::marker { color: var(--brand); font-weight: 700; }
.prose ul.song-list { columns: 1; }
@media (min-width: 720px) { .prose ul.song-list { columns: 2; column-gap: 2rem; display: block; } .prose ul.song-list li { break-inside: avoid; padding: .2rem .15rem; } }
.guide-related { margin-top: 2.5rem; padding: 1.2rem 1.5rem; border-left: 3px solid var(--accent); background: var(--brand-wash, #F7F1FB); border-radius: 0 12px 12px 0; }
.guide-related__title { margin: 0 0 .4rem; font-weight: 700; color: var(--text-strong, var(--text)); }
.guide-related ul { margin: 0; }
.guide-cards .guide-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.guide-cards .guide-card h3 { margin: 0 0 .5rem; }
.guide-cards .guide-card p { margin: 0 0 1rem; color: var(--text-soft, var(--text)); flex: 1; }
.guide-cards .guide-card .textlink { align-self: flex-start; }
.prose .faq details { border-bottom: 1px solid var(--border); padding: .6rem 0; }