/*
Theme Name: Ashley Mercereau Photographe
Author: Ashley Mercereau
Description: Thème bloc sur mesure du site d’Ashley Mercereau, photographe en Loire-Atlantique. Construit à partir de la maquette validée ; tout le contenu se modifie dans l’éditeur de pages.
Version: 1.0.103
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ashley-mercereau
*/

/* ============================================================
   SOCLE WORDPRESS (placé AVANT la feuille de la maquette)
   Neutralise les styles par défaut des blocs à spécificité simple :
   ils battent le CSS des blocs (imprimé avant ce fichier) et perdent
   contre chaque règle de la maquette qui suit.
   ============================================================ */
.wp-block-image { margin: 0; }
.wp-block-quote { margin: 0; padding: 0; border: 0; }
.wp-block-quote cite { display: block; font-style: normal; }
.wp-block-heading { margin: 0; }
.wp-block-list { margin-top: 0; }
.wp-block-social-links { margin: 0; padding: 0; }
.wp-block-buttons { margin: 0; }
body .wp-block-buttons.is-layout-flex { display: block; }
.wp-block-button { display: inline-block; }
.wp-block-post-featured-image { margin: 0; }
.wp-block-post-title { margin: 0; }
.wp-block-site-logo { line-height: 0; }

/* ============================================================
   Ashley Mercereau — maquette d'accueil
   Registre relevé sur la référence : sans-serif géométrique fine
   en capitales + serif de lecture, aucun accent, blanc pur et lin,
   angles droits, grands blancs.
   ============================================================ */

:root {
  --blanc: #ffffff;
  --lin: #f7f7f1;
  --encre: #222222;
  --anthracite: #363636;
  --gris: #6e6e6e;
  --gris-titre: #333333;

  --sans: 'Montserrat', system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;

  --icone-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.3a4.7 4.7 0 1 0 0 9.4 4.7 4.7 0 0 0 0-9.4zm0 7.7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm4.9-8.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zM21.9 7c-.1-1.6-.4-3-1.6-4.2S17.6 1.2 16 1.1C14.4 1 9.6 1 8 1.1 6.4 1.2 5 1.5 3.8 2.7S2.2 5.4 2.1 7C2 8.6 2 13.4 2.1 15c.1 1.6.4 3 1.6 4.2s2.6 1.5 4.2 1.6c1.6.1 6.4.1 8 0 1.6-.1 3-.4 4.2-1.6s1.5-2.6 1.6-4.2c.2-1.6.2-6.4.2-8zm-2.1 9.7a3.3 3.3 0 0 1-1.9 1.9c-1.3.5-4.4.4-5.9.4s-4.6.1-5.9-.4a3.3 3.3 0 0 1-1.9-1.9c-.5-1.3-.4-4.4-.4-5.9s-.1-4.6.4-5.9A3.3 3.3 0 0 1 6.1 3c1.3-.5 4.4-.4 5.9-.4s4.6-.1 5.9.4a3.3 3.3 0 0 1 1.9 1.9c.5 1.3.4 4.4.4 5.9s.1 4.6-.4 5.9z'/%3E%3C/svg%3E");

  --largeur: 1240px;
  --respiration: clamp(80px, 13.2vw, 190px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--gris);
  font: 400 15.5px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--encre);
  hyphens: none;
  text-wrap: balance;
}

.enveloppe {
  width: min(var(--largeur), calc(100% - 14vw));
  margin-inline: auto;
}

.section { padding-block: var(--respiration); }
.centre { text-align: center; }

/* ---------- Typographie récurrente ---------- */

.etiquette {
  font: 400 12.5px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
}

.titre-section {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.sous-titre {
  font: 400 14.5px/1.5 var(--sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gris-titre);
}

/* ---------- Bouton ---------- */

.bouton {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  padding: 17px 28px 16px;
  background: var(--sauge);
  color: var(--sauge-texte);
  box-shadow: inset 0 0 0 1px #9aa38f;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease;
}
.bouton:hover { background: #c4cbbd; }

/* ---------- Flèches fines ---------- */

.fleche {
  display: inline-flex;
  padding: 10px 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: .9;
  transition: opacity .3s ease, transform .3s ease;
}
.fleche svg { width: 30px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1; }
.fleche:hover { opacity: 1; }
.fleche-prec:hover, .temoignages-fleches .fleche:first-child:hover { transform: translateX(-3px); }
.fleche-suiv:hover, .temoignages-fleches .fleche:last-child:hover { transform: translateX(3px); }
.fleche-sombre { color: #555; }

/* ============================================================
   En-tête
   ============================================================ */

.entete {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-top: 34px;
  color: #fff;
}

.entete-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav { display: flex; gap: 40px; }
.nav-droite { justify-content: flex-end; }
.nav a,
.menu-mobile a {
  font: 400 15px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav a { position: relative; padding-block: 6px; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.nav a:hover::after { transform: scaleX(1); }

.logo { display: block; line-height: 0; }
.logo img { width: 96px; height: auto; transition: filter .4s ease; }

.burger {
  display: none;
  justify-self: end;
  width: 34px; height: 34px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 5px; right: 5px;
  height: 1px;
  background: currentColor;
  transition: transform .35s ease, top .35s ease;
}
.burger span:first-child { top: 13px; }
.burger span:last-child { top: 20px; }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: var(--blanc);
  color: var(--encre);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.menu-mobile a { font-size: 15.5px; }

.entete.est-ouvert { color: var(--encre); }
.entete.est-ouvert .logo img { filter: brightness(0) opacity(.86); }
.entete.est-ouvert .menu-mobile { opacity: 1; visibility: visible; }
.entete.est-ouvert .burger span:first-child { top: 17px; transform: rotate(45deg); }
.entete.est-ouvert .burger span:last-child { top: 17px; transform: rotate(-45deg); }

/* ============================================================
   Bandeau d'accueil
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  max-height: 1000px;
  overflow: hidden;
  background: #2a2826;
  color: #fff;
}

.hero-diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-diapo.est-active { opacity: 1; }
.hero-diapo img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0) 28%),
    radial-gradient(ellipse 50% 22% at 50% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
    rgba(0,0,0,.18);
  pointer-events: none;
}

.hero-texte {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}

.hero-titre {
  font-size: clamp(30px, 3.55vw, 52px);
  line-height: 1.1;
  letter-spacing: .04em;
  color: #fff;
}

.hero-accroche {
  margin-top: 20px;
  font: 400 12.5px/1.6 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero-commandes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-commandes .enveloppe {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-commandes .fleche { pointer-events: auto; }

/* ============================================================
   Mon approche — deux photos décalées, texte à droite
   ============================================================ */

.philo { padding-top: calc(var(--respiration) * 2); }

.philo-grille {
  display: grid;
  grid-template-columns: 20% 28.5% 1fr;
  column-gap: 5.4%;
  align-items: center;
}

.cadre { overflow: hidden; background: var(--lin); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }

.philo-petite { align-self: start; margin-top: 78px; aspect-ratio: 150 / 230; }
.philo-grande { aspect-ratio: 213 / 323; }

.philo-texte { padding-left: 50px; }
.philo-texte .titre-section { margin-top: 28px; }
.philo-texte p:not(.etiquette) { margin-top: 20px; line-height: 1.6; }
.philo-texte .titre-section + p { margin-top: 26px; }
.philo-texte .bouton { margin-top: 30px; }

/* ============================================================
   Prestations — texte à gauche, photos décalées à droite
   ============================================================ */

.presta-grille {
  display: grid;
  grid-template-columns: 31% 34.5% 23.6%;
  column-gap: 5.45%;
  align-items: center;
}

.presta-texte .sous-titre { margin-top: 12px; }
.presta-texte .bouton { margin-top: 38px; }

.presta-grande { aspect-ratio: 245 / 347; }
.presta-petite { align-self: start; margin-top: 82px; aspect-ratio: 168 / 253; }

/* ============================================================
   Œuvres choisies — mosaïque à trois colonnes
   ============================================================ */

.oeuvres-titre {
  margin-bottom: 84px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--gris-titre);
  text-align: center;
}

.mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  align-items: start;
}
.mosaique-col { display: flex; flex-direction: column; gap: 40px; }

.vignette { overflow: hidden; background: var(--lin); }
.vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.vignette:hover img { transform: scale(1.035); }
.vignette-haute { aspect-ratio: 234 / 350; }
.vignette-large { aspect-ratio: 234 / 156; }

.oeuvres .centre { margin-top: 78px; }

/* ============================================================
   Témoignages — encart lin
   ============================================================ */

.temoignages-section { padding-bottom: calc(var(--respiration) * 1.5); }

.temoignages {
  background: var(--lin);
  padding: 66px 104px 92px;
}

.temoignages-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.temoignages-fleches { display: flex; gap: 33px; }

.temoignages-piste {
  display: grid;
  margin-top: 82px;
}

.temoignages-lot {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 66px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.temoignages-lot.est-actif { opacity: 1; visibility: visible; }

.temoignage {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.temoignage p {
  font: 400 14.5px/1.75 var(--serif);
  color: #7a7a76;
}
.temoignage cite {
  margin-top: auto;
  padding-top: 72px;
  font: 400 16px/1.3 var(--sans);
  font-style: normal;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--gris-titre);
}

/* ============================================================
   Connectons-nous — photo pleine largeur
   ============================================================ */

.contact-bandeau {
  position: relative;
  height: clamp(520px, 56vw, 810px);
  overflow: hidden;
  background: #2a2826;
  color: #fff;
}
.contact-bandeau > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12) 65%);
}

.contact-contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-inline: 54px;
}

.contact-titre {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
}

.contact-pied {
  position: absolute;
  left: 54px;
  right: 72px;
  bottom: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.contact-pied p {
  max-width: 640px;
  font: 400 12px/1.75 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ============================================================
   Instagram
   ============================================================ */

.insta { padding-top: 104px; text-align: center; }
.insta .etiquette { margin-bottom: 40px; font-size: 12px; }
.insta-fleche { display: inline-block; width: 6px; height: 13px; margin-left: 10px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.insta-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
}
.insta-grille a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); }
.insta-grille img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
/* Au survol : voile léger + icône Instagram, pour signaler le lien vers la publication */
.insta-grille a::before,
.insta-grille a::after {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.insta-grille a::before { inset: 0; background: rgba(34, 34, 34, .3); }
.insta-grille a::after {
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: #fff;
  -webkit-mask: var(--icone-instagram) center / contain no-repeat;
          mask: var(--icone-instagram) center / contain no-repeat;
}
.insta-grille a:hover img { transform: scale(1.04); }
.insta-grille a:hover::before,
.insta-grille a:hover::after,
.insta-grille a:focus-visible::before,
.insta-grille a:focus-visible::after { opacity: 1; }

.reseaux {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 36px;
}
.reseaux a { display: inline-flex; padding: 4px; color: var(--gris-titre); transition: opacity .3s ease; }
.reseaux a:hover { opacity: .55; }
.reseaux svg { width: 15px; height: 15px; fill: currentColor; }
.reseaux svg.icone-trait { fill: none; stroke: currentColor; stroke-width: 1.7; }


/* ============================================================
   Pied de page
   ============================================================ */

.pied { padding: 64px 0 56px; }

.pied-coordonnees {
  text-align: center;
  font: 400 11.5px/1.8 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.pied-coordonnees a { text-decoration: none; }
.pied-coordonnees span { margin-inline: 8px; }
.pied-coordonnees .courriel { text-transform: none; letter-spacing: .06em; font-size: 13.5px; }

.pied-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 46px;
}

.pied-copy {
  font: 400 11px/1.8 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #555;
}

.pied-nav { display: flex; gap: 40px; }
.pied-nav a {
  font: 400 11.5px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris-titre);
}
.pied-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.pied-haut { justify-self: end; display: inline-flex; color: #777; padding: 4px; }
.pied-haut svg { width: 8px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; }

.pied-legal {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
}
.pied-legal a {
  font: 400 11px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8a8a8a;
}
.pied-legal a:hover { color: var(--gris-titre); }

/* ============================================================
   Responsive
   ============================================================ */

/* Menu en icône sous 1240 px : le menu en 15 px ne tient plus à côté du logo */
@media (max-width: 1240px) {
  .entete { padding-top: 22px; }
  .entete-barre { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .burger { display: block; z-index: 2; }
  .logo { position: relative; z-index: 2; }
  .logo img { width: 68px; }
}

@media (max-width: 1100px) {
  .philo-texte { padding-left: 0; }
  .temoignages { padding: 56px 56px 72px; }
  .temoignages-lot { column-gap: 40px; }
  .pied-nav { gap: 24px; }
}

@media (max-width: 820px) {
  .enveloppe { width: calc(100% - 40px); }

  .hero-commandes .enveloppe { align-items: flex-end; padding-bottom: 36px; }
  .titre-section { font-size: 24px; }

  .philo-grille {
    grid-template-columns: 40% 1fr;
    column-gap: 20px;
    row-gap: 56px;
  }
  .philo-petite { margin-top: 64px; }
  .philo-texte { grid-column: 1 / -1; }

  .presta-grille {
    grid-template-columns: 1fr 40%;
    column-gap: 20px;
    row-gap: 48px;
  }
  .presta-texte { grid-column: 1 / -1; }
  .presta-petite { margin-top: 64px; }

  .mosaique { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mosaique-col { display: contents; }
  .vignette-haute, .vignette-large { aspect-ratio: 4 / 5; }

  .temoignages { padding: 44px 24px 56px; }
  .temoignages-piste { margin-top: 44px; }
  .temoignages-lot { grid-template-columns: 1fr; row-gap: 40px; }
  .temoignage cite { padding-top: 18px; }

  .contact-contenu { padding-inline: 0; }
  .contact-titre { left: 0; font-size: min(32px, 7.4vw); white-space: nowrap; }
  .contact-pied {
    left: 0; right: 0; bottom: 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  .insta { padding-top: 80px; }
  .insta-grille { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .pied-barre {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 26px;
    margin-top: 36px;
  }
  .pied-nav { flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
  .pied-copy { order: 2; }
  .pied-haut { justify-self: center; order: 3; }
  .pied-copy { text-align: center; }
  .pied-legal { flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; }
  .pied-coordonnees span { display: block; height: 0; overflow: hidden; }
}

/* ============================================================
   PAGES INTÉRIEURES
   Mêmes dispositifs que la référence : bandeau photo, encart lin
   qui chevauche la photo, blocs de formules, questions fréquentes,
   appel à contact en encart débordant.
   ============================================================ */

:root { --marge-laterale: max(7vw, calc((100vw - var(--largeur)) / 2)); }

/* En-tête sombre (pages sans photo en haut) */
.entete--clair { color: var(--encre); }
.entete--clair .logo img { filter: brightness(0) opacity(.86); }

/* ---------- Bandeau photo de page ---------- */

.bandeau-page {
  position: relative;
  height: clamp(380px, 41vw, 590px);
  overflow: hidden;
  background: #2a2826;
}
.bandeau-page > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bandeau-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0) 40%), rgba(0,0,0,.08);
}

/* ---------- Encart d'introduction qui chevauche le bandeau ---------- */

.intro-encart {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  margin-top: -104px;
  padding: 88px 104px 96px;
  background: var(--lin);
}
.intro-encart .etiquette { padding-top: 10px; }
.intro-encart .etiquette + p { margin-top: 26px; line-height: 1.75; }
.intro-encart p + p { margin-top: 16px; line-height: 1.75; }

.section-suite { padding-top: calc(var(--respiration) * .9); }

/* ---------- Prestations : séances ---------- */

.formules {
  display: grid;
  grid-template-columns: 41% 1fr;
  column-gap: 5.2%;
  align-items: stretch;
}

.formule-photo {
  position: relative;
  min-height: 730px;
  overflow: hidden;
  color: #fff;
  background: #2a2826;
}
.formule-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.formule-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
}
.formule-photo-texte {
  position: absolute;
  z-index: 2;
  left: 53px;
  right: 53px;
  bottom: 118px;
}
.formule-photo-texte .titre-section { color: #fff; }
.formule-photo-texte p:not(.formule-prix) { margin-top: 30px; line-height: 1.75; color: rgba(255,255,255,.88); }
.formule-photo-texte .bouton { margin-top: 38px; }

.formule-prix {
  margin-top: 12px;
  font: 400 13px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.formule-encart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  padding: 94px 53px 72px;
  background: var(--lin);
}
.formule-encart-tete { grid-column: 1; }
.formule-encart-tete .formule-prix { color: var(--gris-titre); }
.formule-encart-petite { grid-column: 2; grid-row: 1; justify-self: end; width: 143px; aspect-ratio: 87 / 134; margin-top: -14px; }
.formule-encart-grande { grid-column: 1; grid-row: 2; align-self: end; width: 247px; aspect-ratio: 150 / 228; margin-top: 56px; }
.formule-encart-texte { grid-column: 2; grid-row: 2; align-self: end; }
.formule-encart-texte .bouton { margin-top: 34px; }

.tarifs-liste { margin: 0 0 22px; padding: 0; list-style: none; }
.tarifs-liste li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #deded6;
  font: 400 12px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-titre);
}
.tarifs-liste li span:last-child { white-space: nowrap; }
.formule-encart-texte p { line-height: 1.75; }

/* ---------- Prestations : mariage (carte photo large + formules en encart) ---------- */

.formule-large {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  color: #fff;
  background: #2a2826;
}
.formule-large > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.formule-large::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.08) 60%, rgba(0,0,0,0));
}
.formule-large-titre,
.formule-large-texte { position: absolute; z-index: 2; bottom: 76px; }
.formule-large-titre { left: 53px; }
.formule-large-titre .titre-section { color: #fff; font-size: 38px; }
.formule-large-texte { left: 63%; right: 53px; }
.formule-large-texte p { line-height: 1.75; color: rgba(255,255,255,.9); }
.formule-large-texte .bouton { margin-top: 34px; }

.mariage { padding-bottom: 110px; }
.mariage + .section { padding-top: 0; }

.mariage-note {
  max-width: 820px;
  margin: 110px auto 0;
  text-align: center;
  font: 400 11.5px/2.1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
}
.mariage-note p + p { margin-top: 10px; }
.mariage-note .mariage-lien { margin-top: 26px; }
.mariage-note a { color: var(--gris-titre); text-decoration: underline; text-underline-offset: 5px; }
.mariage-note a:hover { color: var(--encre); }

/* ---------- Encart lin débordant à gauche (questions, piliers) ---------- */

.encart-deborde {
  margin-right: var(--marge-laterale);
  padding: 66px 104px 92px calc(var(--marge-laterale) + 56px);
  background: var(--lin);
}
.encart-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.questions-piste { display: grid; margin-top: 64px; }
.questions-lot {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px 13%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.questions-lot.est-actif { opacity: 1; visibility: visible; }

.question h3,
.pilier h3 {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--gris-titre);
}
.question p,
.pilier p {
  margin-top: 16px;
  font: 400 14.5px/1.75 var(--serif);
  color: #7a7a76;
}

.piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 66px;
  margin-top: 64px;
}

/* ---------- Appel à contact : photo + encart qui la chevauche ---------- */

.appel-photo {
  height: clamp(380px, 42vw, 600px);
  overflow: hidden;
  background: #2a2826;
}
.appel-photo img { width: 100%; height: 100%; object-fit: cover; }

.appel-encart {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: -150px var(--marge-laterale) 0 0;
  padding: 92px 104px 96px calc(var(--marge-laterale) + 56px);
  background: var(--lin);
}
.appel-encart p {
  margin-top: 26px;
  max-width: 520px;
  font: 400 12px/1.75 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
}

/* ---------- Contact (mise en page Pixieset : titre centré sur la photo,
   formulaire centré dans un encart lin qui chevauche le bandeau) ---------- */

.bandeau-contact { height: clamp(480px, 39vw, 565px); }
.bandeau-contact::after { background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.1) 45%), rgba(0,0,0,.22); }
.bandeau-contact-texte {
  position: absolute;
  inset: 0 0 148px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px 0;
  text-align: center;
  color: #fff;
}
.bandeau-contact-texte .etiquette { color: #fff; }
.bandeau-contact-texte h1 {
  margin-top: 18px;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
}
.bandeau-contact-texte p:not(.etiquette) {
  max-width: 540px;
  margin-top: 22px;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}

.contact-encart {
  position: relative;
  z-index: 2;
  width: min(950px, calc(100% - 14vw));
  margin: -148px auto 0;
  padding: 84px 64px 96px;
  background: var(--lin);
}

.champ { display: flex; flex-direction: column; }
.champ-large { grid-column: 1 / -1; }
.champ label {
  font: 400 12px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
}
.champ input,
.champ select,
.champ textarea {
  margin-top: 10px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid #cfcfc6;
  border-radius: 0;
  background: transparent;
  font: 400 15.5px/1.5 var(--serif);
  color: var(--encre);
  outline: none;
  transition: border-color .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-bottom-color: var(--encre); }

.formulaire-centre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 44px;
  max-width: 780px;
  margin: 0 auto;
}
.formulaire-centre .champ label,
.formulaire-centre legend {
  font: 400 15px/1.5 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: #555;
}
.formulaire-centre .champ input,
.formulaire-centre .champ textarea {
  border-bottom-color: #555;
  text-align: center;
}
.formulaire-centre .champ textarea { text-align: left; }
.aide-champ { margin-top: 8px; text-align: center; font-size: 13px; color: #8a8a8a; }

.choix-prestations {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.choix-prestations legend { width: 100%; margin-bottom: 22px; padding: 0; }
.choix-liste {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 16px 30px;
}
.choix-liste label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 11.5px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-titre);
  cursor: pointer;
}
.choix-liste input[type="checkbox"],
.choix-liste input[type="radio"],
.consentement input {
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 1px solid #555;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.choix-liste input[type="checkbox"]:checked,
.choix-liste input[type="radio"]:checked,
.consentement input:checked { background: var(--anthracite); box-shadow: inset 0 0 0 2px var(--sauge); }

.choix-autre { grid-column: 1 / -1; justify-self: center; }
.choix-autre input[type="text"] {
  width: 130px;
  margin-left: 2px;
  padding: 2px 0 4px;
  border: 0;
  border-bottom: 1px solid #555;
  border-radius: 0;
  background: transparent;
  font: 400 14.5px/1.3 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  outline: none;
}
.choix-autre input[type="text"]::placeholder { color: #9a9a94; }
.champ-etroit { justify-self: center; width: min(340px, 100%); }

.consentement {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
}
.consentement input { margin-top: 4px; }
.formulaire-centre .bouton { grid-column: 1 / -1; justify-self: center; border: 0; cursor: pointer; }

.contact-suite { padding-top: 0; }

.contact-direct {
  margin-top: 64px;
  text-align: center;
  font: 400 11.5px/2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
}
.contact-direct a { text-decoration: none; color: var(--gris-titre); }
.contact-direct a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-direct .courriel { text-transform: none; letter-spacing: .06em; font-size: 13.5px; }
.contact-direct span { margin-inline: 8px; }

/* ---------- Galeries clients : liste ---------- */

.galeries-titre { margin-bottom: 64px; text-align: center; }
.galeries-titre .titre-section { margin-top: 0; }

.galeries-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}
.galerie-carte { display: block; text-decoration: none; }
.galerie-carte figure { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lin); }
.galerie-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.galerie-carte:hover img { transform: scale(1.035); }
.galerie-carte h3 {
  margin-top: 24px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--gris-titre);
}
.galerie-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font: 400 11.5px/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #777;
}
.galerie-meta svg { width: 9px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.1; }

/* ---------- Galerie : accès protégé ---------- */

.acces-galerie {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 20px 100px;
  background: #2a2826;
}
.acces-galerie > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acces-galerie::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }

.acces-encart {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  padding: 72px 64px 64px;
  background: var(--lin);
  text-align: center;
}
.acces-encart .titre-section { margin-top: 18px; }
.acces-encart > p:not(.etiquette) { margin-top: 22px; line-height: 1.75; }
.acces-formulaire { margin-top: 38px; text-align: left; }
.acces-formulaire .champ input { text-align: center; letter-spacing: .1em; }
.acces-formulaire .bouton { display: block; width: 100%; margin-top: 30px; border: 0; cursor: pointer; }
.acces-aide { margin-top: 26px; font-size: 14.5px; color: #8a8a8a; }
.acces-aide a { color: var(--gris-titre); }

/* ---------- Galerie : consultation ---------- */

.galerie-couverture {
  position: relative;
  height: 82vh;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  background: #2a2826;
}
.galerie-couverture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galerie-couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%), rgba(0,0,0,.2);
}
.galerie-couverture-texte {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.galerie-couverture-texte .etiquette { color: #fff; }
.galerie-couverture-texte h1 {
  margin-top: 18px;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: .04em;
  color: #fff;
}

.galerie-barre {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #ecece6;
}
.galerie-barre .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.galerie-barre-titre {
  font: 400 12.5px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-titre);
}
.galerie-barre-actions { display: flex; align-items: center; gap: 28px; }
.compteur-selection {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 12px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
}
.compteur-selection svg { width: 14px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.bouton[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.galerie-consigne {
  max-width: 560px;
  margin: 0 auto 56px;
  text-align: center;
  line-height: 1.75;
}

/* Mosaïque bord à bord en rangées justifiées : chaque photo garde son format,
   sa largeur est proportionnelle à son rapport largeur/hauteur (--r, posé par
   le script d'après les dimensions de l'image), donc toutes les photos d'une
   rangée ont la même hauteur. */
.galerie-grille {
  --hauteur-rangee: 330px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: calc(100vw - 8px);
  margin-left: calc(50% - 50vw + 4px);
}
.galerie-grille::after { content: ""; flex-grow: 999; }
.galerie-grille figure {
  position: relative;
  flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--hauteur-rangee));
  margin: 0;
  overflow: hidden;
  background: var(--lin);
  cursor: zoom-in;
}
.galerie-grille img { width: 100%; height: 100%; object-fit: cover; }

/* filigrane visuel en mode sélection (à doubler d'un filigrane dans le fichier exporté) */
.galerie-grille[data-mode="selection"] figure::after,
.visionneuse[data-mode="selection"] .visionneuse-cadre::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  max-width: 180px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("img/logo-am.png") center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}

.photo-actions {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity .3s ease;
}
.galerie-grille figure:hover .photo-actions,
.galerie-grille figure:focus-within .photo-actions,
.photo-actions:has(.est-choisie) { opacity: 1; }

.photo-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.92);
  color: var(--encre);
  cursor: pointer;
  transition: background-color .3s ease;
}
.photo-bouton svg { width: 16px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.photo-bouton:hover { background: #fff; }
.photo-bouton.est-choisie svg { fill: currentColor; }

.photo-numero {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  padding: 6px 8px;
  background: rgba(255,255,255,.92);
  font: 400 11px/1 var(--sans);
  letter-spacing: .14em;
  color: #555;
  opacity: 0;
  transition: opacity .3s ease;
}
.galerie-grille figure:hover .photo-numero { opacity: 1; }

.galerie-fin { margin-top: 72px; text-align: center; }

/* ---------- Visionneuse plein écran ---------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.98);
}
.visionneuse.est-ouverte { display: flex; }
.visionneuse-cadre { position: relative; max-width: calc(100vw - 200px); max-height: calc(100vh - 160px); }
.visionneuse-cadre img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; }
.visionneuse .fleche { position: absolute; top: 50%; color: var(--encre); padding: 20px; }
.visionneuse .fleche-prec { left: 40px; }
.visionneuse .fleche-suiv { right: 40px; }
.visionneuse-fermer {
  position: absolute;
  top: 28px;
  right: 34px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--encre);
}
.visionneuse-fermer::before,
.visionneuse-fermer::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 17px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.visionneuse-fermer::after { transform: rotate(-45deg); }
.visionneuse-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font: 400 11.5px/1 var(--sans);
  letter-spacing: .16em;
  color: #555;
}
.visionneuse-pied .photo-bouton { background: var(--lin); }

/* ---------- Pages intérieures : responsive ---------- */

@media (max-width: 1100px) {
  .intro-encart { padding: 64px 56px 72px; }
  .formule-encart { padding: 64px 40px 56px; column-gap: 32px; }
  .formule-encart-grande { width: 100%; }
  .encart-deborde { padding-right: 56px; }
  .appel-encart { padding-right: 56px; }
  .formule-large-texte { left: 52%; }
  .galerie-grille { --hauteur-rangee: 260px; }
}

@media (max-width: 820px) {
  :root { --marge-laterale: 20px; }

  .bandeau-page { height: 340px; }
  .intro-encart {
    grid-template-columns: 1fr;
    row-gap: 22px;
    width: calc(100% - 40px);
    margin-top: -64px;
    padding: 44px 24px 48px;
  }

  .formules { grid-template-columns: 1fr; row-gap: 24px; }
  .formule-photo { min-height: 600px; }
  .formule-photo-texte { left: 24px; right: 24px; bottom: 44px; }
  .formule-encart { grid-template-columns: 1fr 1fr; padding: 44px 24px; column-gap: 16px; }
  .formule-encart-petite { width: 100%; margin-top: 0; }
  .formule-encart-grande { margin-top: 32px; }
  .formule-encart-texte { grid-column: 1 / -1; grid-row: 3; margin-top: 36px; }

  .formule-large { min-height: 620px; }
  .formule-large-titre { left: 24px; right: 24px; bottom: auto; top: 44px; }
  .formule-large-titre .titre-section { font-size: 30px; }
  .formule-large-texte { left: 24px; right: 24px; bottom: 44px; }
  .mariage-note { margin-top: 64px; }
  .mariage { padding-bottom: 64px; }

  .encart-deborde { margin-right: 0; padding: 44px 24px 56px; }
  .questions-lot { grid-template-columns: 1fr; row-gap: 40px; }
  .questions-piste { margin-top: 44px; }
  .piliers { grid-template-columns: 1fr; row-gap: 40px; margin-top: 44px; }

  .appel-photo { height: 340px; }
  .appel-encart {
    flex-direction: column;
    align-items: flex-start;
    margin: -64px 20px 0;
    padding: 44px 24px 48px;
  }

  .bandeau-contact { height: 460px; }
  .bandeau-contact-texte { inset: 0 0 64px; padding-top: 70px; }
  .contact-encart { width: calc(100% - 40px); margin-top: -64px; padding: 44px 20px 52px; }
  .formulaire-centre { grid-template-columns: 1fr; gap: 32px; }
  .choix-liste { grid-template-columns: 1fr; justify-content: start; gap: 14px; padding-left: 12%; }
  .contact-direct { margin-top: 44px; }
  .contact-direct span { display: block; height: 0; overflow: hidden; }

  .galeries-liste { grid-template-columns: 1fr; gap: 44px; }
  .acces-encart { padding: 48px 24px 40px; }

  .galerie-barre .enveloppe { min-height: 64px; }
  .galerie-barre-titre { display: none; }
  .galerie-barre-actions { width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding-block: 12px; }
  .galerie-grille { --hauteur-rangee: 150px; gap: 3px; width: calc(100vw - 6px); margin-left: calc(50% - 50vw + 3px); }
  .photo-actions { opacity: 1; right: 6px; bottom: 6px; }
  .photo-bouton { width: 32px; height: 32px; }
  .visionneuse-cadre { max-width: calc(100vw - 32px); }
  .visionneuse .fleche-prec { left: 4px; }
  .visionneuse .fleche-suiv { right: 4px; }
}

/* ============================================================
   À PROPOS — disposition inspirée du modèle « Jennifer »
   (ouverture sans bandeau, textes centrés, témoignage unique,
   encart « Travaillons ensemble » entre deux photos), dans la DA du site.
   ============================================================ */

.apropos-texte { text-align: center; }
.apropos-texte .etiquette { margin-top: 16px; }
.apropos-texte p:not(.etiquette) { line-height: 1.8; }
.apropos-texte .bouton { margin-top: 36px; }

.ornement {
  display: block;
  width: 64px;
  height: auto;
  margin: 40px auto;
  filter: brightness(0) opacity(.62);
}

.apropos-intro { padding-top: 236px; }
.apropos-intro-grille {
  display: grid;
  grid-template-columns: 47% 1fr;
  align-items: center;
}
.apropos-portrait { aspect-ratio: 362 / 504; }
.apropos-intro .apropos-texte { justify-self: center; max-width: 400px; padding-inline: 20px; }
.apropos-intro h1 { font-size: 34px; line-height: 1.12; }

.apropos-approche { padding-top: calc(var(--respiration) * 1.6); }
.apropos-approche-grille {
  display: grid;
  grid-template-columns: 1fr 43%;
  column-gap: 9%;
  align-items: center;
}
.apropos-approche .apropos-texte { justify-self: center; max-width: 470px; }
.apropos-approche .apropos-texte .etiquette + p { margin-top: 30px; }
.apropos-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apropos-duo .cadre { aspect-ratio: 160 / 243; }

.apropos-temoignage-grille {
  display: grid;
  grid-template-columns: 1fr 22.5% 1fr;
  column-gap: 8%;
  align-items: center;
  text-align: center;
}
.apropos-temoignage-grille .cadre { aspect-ratio: 180 / 270; }
.apropos-temoignage-nom .titre-section { margin-top: 20px; font-size: 26px; }
.apropos-citation { margin: 0; }
.apropos-citation p { font: 400 15px/1.85 var(--serif); color: #7a7a76; }

.apropos-ensemble { padding-top: calc(var(--respiration) * .6); }
.apropos-ensemble-grille {
  display: grid;
  grid-template-columns: 24.3% 1fr 24.3%;
  gap: 10px;
}
.apropos-ensemble-grille .cadre { aspect-ratio: 194 / 295; }
.apropos-ensemble-encart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--lin);
  text-align: center;
}
.apropos-ensemble-encart .ornement { margin: 34px auto 38px; width: 56px; }
.apropos-boutons { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

@media (max-width: 820px) {
  .apropos-intro { padding-top: 140px; }
  .apropos-intro-grille,
  .apropos-approche-grille { grid-template-columns: 1fr; row-gap: 56px; }
  .apropos-intro .apropos-texte { padding-inline: 0; }
  .apropos-intro h1 { font-size: 28px; }
  .apropos-temoignage-grille { grid-template-columns: 1fr; row-gap: 36px; }
  .apropos-temoignage-grille .cadre { width: 62%; justify-self: center; }
  .apropos-ensemble-grille { grid-template-columns: 1fr 1fr; }
  .apropos-ensemble-encart { grid-column: 1 / -1; order: -1; padding: 52px 24px; }
}

/* ============================================================
   À PROPOS — version 2, disposition inspirée du modèle « Odette »
   (ouverture en deux colonnes, photos superposées, citation pleine
   largeur, philosophie en bande lin), dans la DA du site.
   ============================================================ */

.ap2-intro { padding-top: 200px; }
.ap2-intro-grille {
  display: grid;
  grid-template-columns: 37% 1fr;
  column-gap: 9%;
  align-items: start;
}
.ap2-paysage { aspect-ratio: 228 / 147; }
.ap2-gauche .apropos-texte { margin-top: 56px; padding-inline: 12px; }
.ap2-gauche .etiquette { margin-top: 0; }
.ap2-gauche h1 { margin-top: 18px; font-size: 32px; line-height: 1.15; }
.ap2-gauche h1 + p { margin-top: 30px; }
.ap2-gauche .ornement { margin: 34px auto 32px; }

.ap2-mots { margin: 6px 0 0; padding: 0; list-style: none; text-align: right; }
.ap2-mots li {
  font: 400 12px/2.6 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-titre);
}

.ap2-superposition { position: relative; margin-top: 28px; padding-bottom: 40px; }
.ap2-grande { width: 58%; aspect-ratio: 199 / 296; }
.ap2-petite {
  position: absolute;
  top: 90px;
  right: 0;
  width: 50%;
  aspect-ratio: 170 / 230;
  outline: 10px solid var(--blanc);
}

.ap2-citation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(420px, 42vw, 620px);
  margin-top: calc(var(--respiration) * 1.4);
  overflow: hidden;
  background: #2a2826;
  color: #fff;
  text-align: center;
}
.ap2-citation > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap2-citation::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.34); }
.ap2-citation blockquote { position: relative; z-index: 2; max-width: 660px; margin: 0; padding: 0 24px; }
.ap2-citation blockquote p { font: 400 19px/1.75 var(--serif); }
.ap2-citation cite {
  display: block;
  margin-top: 24px;
  font: 400 12px/1.4 var(--sans);
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ap2-philo-section { padding-top: calc(var(--respiration) * 1.4); }
.ap2-philo {
  display: grid;
  grid-template-columns: minmax(0, 43%) 1fr;
  padding-left: var(--marge-laterale);
  background: var(--lin);
}
.ap2-philo-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 70px;
  background: var(--blanc);
}
.ap2-philo-texte .etiquette + p { margin-top: 34px; }
.ap2-philo-photo { display: flex; align-items: center; justify-content: center; padding: 110px 24px; }
.ap2-philo-photo .cadre { width: min(410px, 72%); aspect-ratio: 228 / 311; }

.ap2-contact { padding-top: calc(var(--respiration) * 1.2); }
.ap2-contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 9%;
  align-items: center;
}
.ap2-contact-grande { aspect-ratio: 345 / 389; }
.ap2-contact .apropos-texte { justify-self: center; max-width: 420px; }
.ap2-contact-petite { width: 74%; margin: 48px auto 40px; aspect-ratio: 228 / 146; }

@media (max-width: 820px) {
  .ap2-intro { padding-top: 140px; }
  .ap2-intro-grille { grid-template-columns: 1fr; row-gap: 64px; }
  .ap2-gauche .apropos-texte { padding-inline: 0; }
  .ap2-gauche h1 { font-size: 27px; }
  .ap2-mots { text-align: center; }
  .ap2-grande { width: 66%; }
  .ap2-petite { width: 52%; top: 70px; outline-width: 6px; }
  .ap2-citation blockquote p { font-size: 16px; }
  .ap2-philo { grid-template-columns: 1fr; padding-left: 0; }
  .ap2-philo-texte { padding: 64px 24px; }
  .ap2-philo-photo { padding: 56px 20px; }
  .ap2-contact-grille { grid-template-columns: 1fr; row-gap: 56px; }
}

/* ============================================================
   À PROPOS — version 4, disposition inspirée du modèle « Esther »
   (portrait à cheval entre le blanc et une bande lin, colonnes de
   photos, encart coordonnées à filets), mêlée aux versions 1 à 3.
   ============================================================ */

.ap4-ouverture { padding: 176px 0 40px; text-align: center; }
.ap4-ouverture h1 { margin-top: 16px; font-size: 40px; letter-spacing: .04em; }
.ap4-cotes {
  display: grid;
  grid-template-columns: 1fr 310px 1fr;
  align-items: start;
  min-height: 200px;
  margin-top: 64px;
}
.ap4-cotes p {
  justify-self: center;
  max-width: 290px;
  font: 400 12px/2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-titre);
}

.ap4-bande { padding: 160px 0 130px; background: var(--lin); }
.ap4-bande-grille {
  display: grid;
  grid-template-columns: 1fr 310px 1fr;
  align-items: start;
}
.ap4-pile { display: grid; gap: 120px; width: 255px; justify-self: start; }
.ap4-pile .cadre { aspect-ratio: 140 / 191; }
.ap4-haute { justify-self: end; width: 255px; height: 818px; }
.ap4-centre { position: relative; z-index: 2; }
.ap4-portrait { aspect-ratio: 170 / 279; margin-top: -410px; border-radius: 999px; }
.ap4-centre { display: flex; flex-direction: column; align-self: stretch; }
.ap4-centre .apropos-texte { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 0; padding: 40px 0; }
.ap4-centre .apropos-texte p:not(.etiquette) { font-size: 16px; line-height: 2.1; }
.ap4-centre .apropos-texte .etiquette + p { margin-top: 44px; }
.ap4-centre .apropos-texte p:not(.etiquette) + p { margin-top: 34px; }
.ap4-signature { margin-top: 60px; line-height: 2; }

.ap4-finale { padding-top: calc(var(--respiration) * .5); padding-bottom: calc(var(--respiration) * .5); }
.ap4-large { aspect-ratio: 700 / 302; }
.ap4-finale-texte { margin-top: 44px; }
.ap4-finale-texte .titre-section { margin-top: 0; }
.ap4-finale-texte .bouton { margin-top: 30px; }

@media (max-width: 1100px) {
  .ap4-pile, .ap4-haute { width: 200px; }
  .ap4-cotes, .ap4-bande-grille { grid-template-columns: 1fr 280px 1fr; }
}

@media (max-width: 820px) {
  .ap4-ouverture { padding: 130px 0 32px; }
  .ap4-ouverture h1 { font-size: 30px; }
  .ap4-cotes { grid-template-columns: 1fr; row-gap: 18px; min-height: 0; margin-top: 32px; padding-bottom: 180px; }
  .ap4-cotes span { display: none; }
  .ap4-bande { padding: 40px 0 72px; }
  .ap4-bande-grille { grid-template-columns: 1fr 1fr; gap: 56px 12px; }
  .ap4-centre { grid-column: 1 / -1; order: -1; }
  .ap4-portrait { width: 72%; margin: -190px auto 0; }
  .ap4-pile { width: 100%; gap: 12px; }
  .ap4-haute { width: 100%; height: 100%; min-height: 360px; }
  .ap4-large { aspect-ratio: 4 / 3; }
}

/* ============================================================
   PRESTATIONS — version 2, disposition inspirée du modèle « Odette »
   (ouverture photos superposées + texte, phrase sur photo, offres en
   lignes alternées, témoignages en bande lin), mêlée à la version 1.
   ============================================================ */

.p2-intro { padding-top: 200px; }
.p2-intro-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 9%;
  align-items: center;
}
.p2-superposition { position: relative; padding-bottom: 60px; }
.p2-grande { width: 66%; aspect-ratio: 228 / 278; }
.p2-petite {
  position: absolute;
  top: 54px;
  right: 0;
  width: 40%;
  aspect-ratio: 140 / 190;
  outline: 10px solid var(--blanc);
}
.p2-intro-texte { justify-self: center; max-width: 440px; }
.p2-intro-texte h1 { margin-top: 26px; font-size: 32px; line-height: 1.15; }
.p2-intro-texte h1 + p { margin-top: 44px; }
.p2-intro-texte p:not(.etiquette) { font-size: 16px; line-height: 2.1; }

.p2-phrase { margin-top: calc(var(--respiration) * 1.3); }

.p2-offres { padding-top: calc(var(--respiration) * .6); }
.p2-offres-titre { text-align: center; margin-bottom: 140px; font: 300 32px/1.2 var(--sans); letter-spacing: .04em; color: var(--encre); }
.p2-ligne {
  display: grid;
  grid-template-columns: 47% 1fr;
  column-gap: 9%;
  align-items: center;
}
.p2-ligne + .p2-ligne { margin-top: 130px; }
.p2-ligne-inverse { grid-template-columns: 1fr 34%; }
.p2-ligne-inverse .p2-photo-haute { order: 2; }
.p2-ligne-inverse .p2-texte { padding-left: 6%; }
.p2-photo-large { aspect-ratio: 346 / 220; }
.p2-photo-haute { aspect-ratio: 228 / 301; }
.p2-texte { max-width: 470px; }
.p2-texte .titre-section { font-size: 26px; }
.p2-texte .etiquette { margin-top: 12px; }
.p2-texte p:not(.etiquette):not(.formule-prix):not(.p2-lien) { margin-top: 22px; line-height: 1.8; }
.p2-texte .formule-prix { margin-top: 24px; color: var(--encre); }
.p2-texte .bouton { margin-top: 28px; }
.p2-lien { margin-top: 26px; font: 400 11.5px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.p2-lien a { color: var(--gris-titre); text-decoration: underline; text-underline-offset: 5px; }
.p2-lien a:hover { color: var(--encre); }

.p2-avis-section { padding-top: calc(var(--respiration) * .2); }
.p2-avis-section + .section { padding-top: calc(var(--respiration) * .2); }
.p2-avis-section .ap2-philo { padding-block: 48px; }
.p2-avis-section .ap2-philo-texte { box-shadow: 0 0 0 1px #dcdcd2; }
.p2-avis { text-align: center; }
.p2-avis-piste { display: grid; width: 100%; max-width: 400px; }
.p2-avis-lot {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.p2-avis-lot.est-actif { opacity: 1; visibility: visible; }
.p2-avis-titre {
  font: 300 22px/1.3 var(--sans);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--encre);
}
.p2-avis-lot p:not(.p2-avis-titre) { margin-top: 24px; font: 400 15px/1.85 var(--serif); color: #7a7a76; }
.p2-avis-lot cite {
  display: block;
  margin-top: 24px;
  font: 400 12px/1.4 var(--sans);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-titre);
}
.p2-avis-fleches { margin-top: 56px; justify-content: center; }

.p2-contact { padding-top: calc(var(--respiration) * .2); }

@media (max-width: 820px) {
  .p2-intro { padding-top: 140px; }
  .p2-intro-grille { grid-template-columns: 1fr; row-gap: 48px; }
  .p2-grande { width: 72%; }
  .p2-petite { width: 46%; top: 40px; outline-width: 6px; }
  .p2-intro-texte h1 { font-size: 27px; }
  .p2-offres-titre { margin-bottom: 64px; font-size: 25px; }
  .p2-ligne, .p2-ligne-inverse { grid-template-columns: 1fr; row-gap: 32px; }
  .p2-ligne + .p2-ligne { margin-top: 80px; }
  .p2-ligne-inverse .p2-photo-haute { order: 0; width: 78%; }
  .p2-ligne-inverse .p2-texte { padding-left: 0; }
  .p2-avis-titre { font-size: 19px; }
}

/* Témoignages : une photo par avis, qui change avec le texte */
.ap2-philo-photo .p2-avis-photos { display: grid; width: min(410px, 72%); }
.ap2-philo-photo .p2-avis-photos .cadre {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 228 / 311;
  opacity: 0;
  transition: opacity .8s ease;
}
.ap2-philo-photo .p2-avis-photos .cadre.est-actif { opacity: 1; }

/* ============================================================
   Couleur des encarts : vert sauge clair (choix de la cliente),
   appliqué à tous les encarts du site. Restent en blanc cassé :
   la grande bande d'À propos (.ap4-bande) et la bande des avis
   de Prestations (.ap2-philo).
   ============================================================ */
:root { --sauge: #d3d8ce; --sauge-texte: #2b2d28; }

:is(.temoignages, .contact-encart, .intro-encart, .encart-deborde, .acces-encart) { background: var(--sauge); }
:is(.temoignages, .contact-encart, .intro-encart, .encart-deborde, .acces-encart) :is(p, .etiquette, cite, h1, h2, h3, legend, label) { color: var(--sauge-texte); }
:is(.temoignages, .contact-encart, .intro-encart, .encart-deborde, .acces-encart) :is(p, label) a { color: var(--sauge-texte); text-decoration: underline; text-underline-offset: 3px; }
:is(.temoignages, .encart-deborde) .fleche-sombre { color: var(--sauge-texte); }
/* Boutons posés sur un encart déjà sauge : fond blanc, même contour */
:is(.temoignages, .contact-encart, .intro-encart, .encart-deborde, .acces-encart) .bouton { background: var(--blanc); }
:is(.temoignages, .contact-encart, .intro-encart, .encart-deborde, .acces-encart) .bouton:hover { background: #eef0ea; }
@media (min-width: 821px) {
  .choix-liste label:not(.choix-autre) { white-space: nowrap; }
}

/* Lisibilité des textes de présentation : même recette que « Quelques mots sur moi »
   (16 px, grand interligne ; la cliente préfère garder des lignes longues) */
.philo-texte p:not(.etiquette),
.p2-texte p:not(.etiquette):not(.formule-prix):not(.p2-lien),
.intro-encart p:not(.etiquette),
.ap2-philo-texte > p:not(.etiquette),
.ap2-contact .apropos-texte p:not(.etiquette),
.galerie-consigne {
  font-size: 16px;
  line-height: 2.05;
}

/* Les boutons ne passent jamais sur deux lignes */
.bouton { white-space: nowrap; }
.contact-pied .bouton { flex-shrink: 0; }

/* Même espace (≈ 200 px sur ordinateur) avant la bande Instagram sur toutes les pages */
main:has(+ .insta) > section.section:last-child { padding-bottom: calc(var(--respiration) * .5); }
main:has(+ .insta) > section:not(.section):last-child { margin-bottom: calc(var(--respiration) * .5); }

/* Encart d'introduction (Galeries clients) : titre, sous-titre puis texte
   sur toute la largeur de l'encart, au lieu de deux colonnes */
.intro-encart { grid-template-columns: 1fr; }
.intro-encart .etiquette { padding-top: 0; margin-top: 18px; }
.intro-encart .etiquette + p { margin-top: 28px; }

/* Formulaire de contact : plus d'air autour des cases à cocher,
   zone de message plus courte, petite vérification anti-robot */
.formulaire-centre .choix-prestations { margin-block: 26px; }
.formulaire-centre .champ textarea { min-height: 84px; }
.champ-verif label { font-size: 14.5px; }
.formulaire-centre .champ textarea { min-height: 62px; }
/* Vérification anti-robot sur une seule ligne : question puis petit champ */
.champ-verif { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; }
.formulaire-centre .champ-verif input { width: 70px; margin-top: 0; padding: 4px 0 6px; }
.formulaire-centre .champ textarea { min-height: 46px; height: 46px; }

/* ============================================================
   PIED DE PAGE (refonte) : bloc blanc cassé distinct de la bande
   Instagram, trois colonnes titrées, puis une ligne de fin.
   ============================================================ */
.pied {
  margin-top: 110px;
  padding: 88px 0 0;
  background: var(--lin);
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  column-gap: 60px;
  padding-bottom: 72px;
}
.pied-col .etiquette { margin-bottom: 24px; color: var(--gris-titre); }
.pied-logo { display: inline-block; line-height: 0; }
.pied-logo img { width: 86px; filter: brightness(0) opacity(.8); }
.pied-marque p { max-width: 290px; margin-top: 24px; font-size: 15px; line-height: 1.85; }
.pied-liste { margin: 0; padding: 0; list-style: none; }
.pied-liste li + li { margin-top: 14px; }
.pied-liste li,
.pied-liste a {
  font: 400 12.5px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
}
.pied-liste a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-contact .courriel { font-size: 14px; letter-spacing: .04em; text-transform: none; }
.pied .reseaux { justify-content: flex-start; margin-top: 28px; gap: 22px; }
.pied .reseaux a { padding: 0; }

.pied-bas { border-top: 1px solid #e2e2da; }
.pied-bas-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 30px;
}
.pied .pied-copy { font: 400 11.5px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6a6a66; text-align: left; }
.pied .pied-legal { display: flex; gap: 28px; margin: 0; }
.pied .pied-legal a { font-size: 11.5px; color: #6a6a66; }
.pied .pied-haut { justify-self: auto; order: 0; }

/* La bande Instagram n'a plus d'icônes en dessous */
.insta .reseaux { display: none; }

@media (max-width: 820px) {
  .pied { margin-top: 80px; padding-top: 64px; }
  .pied-grille { grid-template-columns: 1fr; row-gap: 48px; text-align: center; padding-bottom: 56px; }
  .pied-marque p { margin-inline: auto; }
  .pied .reseaux { justify-content: center; }
  .pied-bas-ligne { flex-direction: column; text-align: center; gap: 16px; }
  .pied .pied-copy { text-align: center; }
  .pied .pied-legal { flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
}

/* Pied de page en vert sauge, comme les encarts */
.pied { background: var(--sauge); }
.pied-bas { border-top-color: #bfc6b8; }
.pied-col .etiquette,
.pied .pied-copy,
.pied .pied-legal a,
.pied .pied-haut,
.pied-marque p { color: var(--sauge-texte); }
.pied .reseaux a { color: var(--sauge-texte); }

/* Pied de page plus compact */
.pied { padding-top: 56px; }
.pied-grille { padding-bottom: 44px; }
.pied-logo img { width: 80px; }
.pied-marque p { margin-top: 16px; }
.pied-col .etiquette { margin-bottom: 16px; }
.pied-liste li + li { margin-top: 9px; }
.pied .reseaux { margin-top: 18px; }
.pied-bas-ligne { padding: 18px 0 20px; }
@media (max-width: 820px) {
  .pied { padding-top: 48px; }
  .pied-grille { row-gap: 32px; padding-bottom: 36px; }
}

/* Titres des colonnes du pied de page : distincts des liens */
.pied-col .etiquette {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 14px;
  font: 300 16px/1.2 var(--sans);
  letter-spacing: .08em;
  color: var(--encre);
}
.pied-col .etiquette::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 1px;
  background: var(--sauge-texte);
}
@media (max-width: 820px) {
  .pied-col .etiquette::after { left: 50%; margin-left: -18px; }
}

/* Prestations : la ligne « Mariages · Séances photo · Entreprises · Immobilier » sur une seule ligne */
.p2-intro-texte { max-width: 520px; }
.p2-intro-texte .etiquette { letter-spacing: .15em; }
@media (min-width: 821px) { .p2-intro-texte .etiquette { white-space: nowrap; } }
/* Sous-titres des lignes de prestations (ex. « Agences · propriétaires · gîtes · architectes ») sur une seule ligne */
.p2-texte .etiquette { letter-spacing: .15em; }
@media (min-width: 821px) { .p2-texte .etiquette { white-space: nowrap; } }

/* Pas de mot isolé en fin de paragraphe ; lignes équilibrées pour les textes centrés */
p, li, blockquote { text-wrap: pretty; }
.apropos-texte p:not(.etiquette), .bandeau-contact-texte p, .p2-avis-lot p { text-wrap: balance; }
/* Descriptions alignées à gauche : lignes équilibrées elles aussi */
.p2-texte p, .philo-texte p, .intro-encart p, .presta-texte p { text-wrap: balance; }

/* Contact : plus d'air entre le menu et le titre, bandeau plus haut */
.bandeau-contact { height: clamp(580px, 47vw, 690px); }
.bandeau-contact-texte { padding-top: 170px; }
@media (max-width: 820px) {
  .bandeau-contact { height: 520px; }
  .bandeau-contact-texte { padding-top: 120px; }
}

/* Contact : « Vous préférez me joindre directement ? » plus visible et un peu plus bas */
.contact-direct { margin-top: 120px; font-size: 13px; line-height: 2.2; color: var(--encre); }
.contact-direct a { font-size: 16px; letter-spacing: .1em; color: var(--encre); }
.contact-direct .courriel { font-size: 16px; letter-spacing: .03em; }
@media (max-width: 820px) { .contact-direct { margin-top: 72px; } }

/* ---- Dernières retouches avant validation ---- */

/* Menu un peu plus bas, moins collé au haut de l'écran */
.entete { padding-top: 50px; }
@media (max-width: 1240px) { .entete { padding-top: 30px; } }

/* Accueil : flèches du diaporama plus visibles + repères de position */
.hero-commandes .fleche { opacity: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.hero-commandes .fleche svg { width: 46px; height: 12px; stroke-width: 1.6; }
.hero-points {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 44px;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}
.hero-points button {
  width: 34px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.hero-points button::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 2px;
  background: rgba(255,255,255,.45);
  transition: background-color .4s ease;
}
.hero-points button.est-active::before { background: #fff; }

/* Accueil : bouton « Voir les galeries » un peu plus bas */
.oeuvres .centre { margin-top: 110px; }

/* À propos : photo du témoignage plus grande et en 4:3 (ordinateur) */
@media (min-width: 821px) {
  .apropos-temoignage-grille { grid-template-columns: 1fr 36% 1fr; column-gap: 6%; }
  .apropos-temoignage-grille .cadre { aspect-ratio: 4 / 3; }
}

/* Prestations : les avis inversent texte et photo à chaque changement */
.ap2-philo { transition: opacity .35s ease; }
.ap2-philo.en-transition { opacity: 0; }
@media (min-width: 821px) {
  .ap2-philo.est-inverse {
    grid-template-columns: 1fr minmax(0, 43%);
    padding-left: 0;
    padding-right: var(--marge-laterale);
  }
  .ap2-philo.est-inverse .ap2-philo-texte { order: 2; }
}

/* Galeries : « Retrouvez votre galerie » un peu plus haut (ordinateur) */
@media (min-width: 821px) {
  .section-suite:has(.galeries-titre) { padding-top: calc(var(--respiration) * .6); }
}

/* ---- Retouches suivantes ---- */

/* Accueil : moins d'espace sous « Voir les galeries » */
.oeuvres { padding-bottom: calc(var(--respiration) * .4); }

/* À propos : la signature respire davantage ; bouton de fin plus détaché du titre */
.ap4-centre .apropos-texte p.etiquette.ap4-signature { margin-top: 84px; }
.ap4-finale-texte .bouton { margin-top: 52px; }

/* Prestations : bande des avis moins haute et moins large (dans la largeur du site) */
@media (min-width: 821px) {
  .p2-avis-section .ap2-philo,
  .p2-avis-section .ap2-philo.est-inverse {
    width: min(var(--largeur), calc(100% - 14vw));
    margin-inline: auto;
    padding: 40px;
    grid-template-columns: minmax(0, 50%) 1fr;
  }
  .p2-avis-section .ap2-philo.est-inverse { grid-template-columns: 1fr minmax(0, 50%); }
  .p2-avis-section .ap2-philo-texte { padding: 64px 56px; }
  .p2-avis-section .ap2-philo-photo { padding: 24px; }
  .ap2-philo-photo .p2-avis-photos { width: min(300px, 70%); }
}

/* ---- Logo d'en-tête nettement plus grand (toutes les pages) ---- */
.logo img { width: 132px; }
@media (max-width: 1240px) { .logo img { width: 86px; } }
/* Pages sans grande photo en haut : on recule le contenu sous le logo */
.ap4-ouverture { padding-top: 290px; }
.p2-intro { padding-top: 270px; }
.bandeau-contact { height: clamp(640px, 50vw, 740px); }
.bandeau-contact-texte { padding-top: 230px; }
@media (max-width: 820px) {
  .ap4-ouverture { padding-top: 170px; }
  .p2-intro { padding-top: 160px; }
  .bandeau-contact { height: 560px; }
  .bandeau-contact-texte { padding-top: 150px; }
}
.ap4-ouverture { padding-top: 340px; }
.p2-intro { padding-top: 300px; }
.acces-galerie { padding-top: 240px; }
@media (max-width: 820px) {
  .ap4-ouverture { padding-top: 220px; }
  .p2-intro { padding-top: 200px; }
  .acces-galerie { padding-top: 180px; }
}

/* Repères de position des carrousels (questions fréquentes) */
.carrousel-points { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
.carrousel-points button { position: relative; width: 34px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.carrousel-points button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: rgba(43, 45, 40, .25); transition: background-color .4s ease;
}
.carrousel-points button.est-actif::before { background: var(--sauge-texte); }

/* Accès galerie : champ du mot de passe bien visible */
.acces-formulaire .champ label { text-align: center; font-size: 13px; }
.acces-formulaire .champ input {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid #9aa38f;
  background: var(--blanc);
  font: 400 17px/1.3 var(--sans);
  letter-spacing: .12em;
  text-align: center;
}
.acces-formulaire .champ input::placeholder { color: #9a9a94; letter-spacing: .04em; font-size: 15px; }
.acces-formulaire .champ input:focus { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(43,45,40,.12); }

/* Fenêtre d'envoi de la sélection */
.fenetre-selection {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(34, 34, 34, .45);
}
.fenetre-selection.est-ouverte { display: flex; }
.fenetre-boite {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 60px 56px 52px;
  background: var(--blanc);
  text-align: center;
}
.fenetre-boite .visionneuse-fermer { top: 14px; right: 14px; }
.fenetre-boite .titre-section { margin-top: 14px; font-size: 26px; }
.fenetre-recap { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--encre); }
.fenetre-formulaire { display: grid; gap: 26px; margin-top: 34px; text-align: left; }
.fenetre-formulaire .champ label { font-size: 13px; }
.fenetre-formulaire .champ textarea { min-height: 64px; }
.fenetre-formulaire .bouton { justify-self: center; margin-top: 6px; border: 0; cursor: pointer; }
.fenetre-etape[data-etape="merci"] p:not(.etiquette) { margin: 22px 0 32px; font-size: 16px; line-height: 1.9; }
@media (max-width: 820px) { .fenetre-boite { padding: 52px 24px 40px; } }

/* Pied de page : logo nettement plus grand, phrase sur deux lignes (ordinateur) */
.pied-logo img { width: 124px; }
@media (min-width: 821px) { .pied-marque p { max-width: 440px; text-wrap: balance; } }
/* Avis de Prestations : plus de fondu de toute la bande, le glissement le remplace */
.ap2-philo.en-transition { opacity: 1; }
.p2-avis-section .ap2-philo-texte, .p2-avis-section .ap2-philo-photo { position: relative; z-index: 1; will-change: transform; }
.p2-avis-section .ap2-philo-texte { z-index: 2; }
.p2-avis-lot, .ap2-philo-photo .p2-avis-photos .cadre { transition-duration: 1s; }

/* 6 liens dans le menu (Boutique ajoutée) : passage au menu en icône sous 1340 px */
@media (max-width: 1340px) {
  .entete { padding-top: 30px; }
  .entete-barre { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .burger { display: block; z-index: 2; }
  .logo { position: relative; z-index: 2; }
  .logo img { width: 86px; }
}

/* Diapo très claire (dentelle) : on assombrit un peu pour la lisibilité du nom */
.hero-diapo-claire img { filter: brightness(.72) contrast(1.05); }
.hero-diapo-lumineuse img { filter: brightness(.82); }

/* ---- Pages légales : une colonne de lecture ---- */
.legal { padding: 300px 0 40px; }
.legal-entete { text-align: center; margin-bottom: 72px; }
.legal-entete .titre-section { margin: 14px 0 18px; }
.legal-entete .legal-maj { font-size: 13.5px; color: var(--gris); margin: 0; }
.legal-texte { max-width: 780px; margin-inline: auto; padding-inline: 24px; font-size: 16px; line-height: 2.05; }
.legal-texte h2 {
  font: 500 15px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-titre);
  margin: 56px 0 14px;
}
.legal-texte h2:first-child { margin-top: 0; }
.legal-texte p, .legal-texte ul { margin: 0 0 16px; }
.legal-texte ul { padding-left: 1.2em; }
.legal-texte li { margin-bottom: 6px; }
.legal-texte a { color: var(--gris-titre); text-underline-offset: 3px; }
.legal-texte strong { font-weight: 400; color: var(--gris-titre); }
/* Maquette : informations encore à fournir (à retirer avant la mise en ligne) */
.a-completer { background: #f3e7b0; color: #3a3420; padding: 1px 5px; }
@media (max-width: 780px) {
  .legal { padding-top: 190px; }
  .legal-entete { margin-bottom: 48px; }
}

/* « Et si on se rencontrait ? » : plus long que l'ancien titre, il passe sur deux lignes sur téléphone */
@media (max-width: 820px) {
  .contact-titre { right: 0; white-space: normal; text-wrap: balance; }
}

/* Œuvres choisies : les trois colonnes finissent à la même hauteur
   (la 3e colonne compte 4 photos : sa dernière photo s'allonge de quelques pixels) */
@media (min-width: 821px) {
  .mosaique { align-items: stretch; }
  .mosaique-col > :last-child { flex-grow: 1; }
}
/* Cadrages hérités des styles en ligne de la maquette (généré par convertir.pl) */
.cadrage-46-50 img { object-position: 46% 50%; }
.cadrage-50-40 img { object-position: 50% 40%; }
.cadrage-54-22 img { object-position: 54% 22%; }

/* ============================================================
   ADAPTATIONS WORDPRESS
   La feuille de la maquette s'applique telle quelle (les classes
   sont posées sur les blocs). Ce qui suit raccorde seulement les
   endroits où le balisage des blocs diffère de la maquette.
   ============================================================ */

/* ---- Socle : rien ne doit ajouter d'espace que la maquette n'a pas ---- */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons),
:where(.wp-block-post-content) > :where(*),
:where(.is-layout-flow) > :where(*) { margin-block: 0; }
.wp-block-image :where(figcaption) { display: none; }
.wp-site-blocks, .wp-block-template-part { margin: 0; padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.site-principal, .contenu-page { display: block; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }


/* ---- Photos de fond : « section > img » devient « section > figure.fond > img » ---- */
.bandeau-page > .fond, .contact-bandeau > .fond, .ap2-citation > .fond,
.galerie-couverture > .fond, .formule-photo > .fond, .formule-large > .fond {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
}
.bandeau-page > .fond img, .contact-bandeau > .fond img, .ap2-citation > .fond img,
.galerie-couverture > .fond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.galerie-couverture > .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.galerie-couverture > .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Boutons : la classe du bloc est sur le conteneur, le style va sur le lien ---- */
.wp-block-button.bouton {
  display: inline-block; padding: 0; background: none; box-shadow: none; border: 0;
  font: inherit; letter-spacing: normal; text-transform: none;
}
.wp-block-button.bouton > .wp-block-button__link {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  padding: 17px 28px 16px;
  background: var(--sauge);
  color: var(--sauge-texte);
  box-shadow: inset 0 0 0 1px #9aa38f;
  border: 0;
  border-radius: 0;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s ease;
}
.wp-block-button.bouton > .wp-block-button__link:hover { background: #c4cbbd; }
.centre.wp-block-buttons, .wp-block-buttons.centre { text-align: center; }

/* ---- En-tête : navigations natives ---- */
.zone-entete { position: static; }
.entete .wp-block-navigation { font-size: inherit; }
.nav .wp-block-navigation__container { display: flex; flex-wrap: nowrap; gap: 40px; margin: 0; padding: 0; list-style: none; }
.nav-droite .wp-block-navigation__container { justify-content: flex-end; }
.nav.wp-block-navigation { display: flex; }
.nav-droite.wp-block-navigation { justify-content: flex-end; }
.entete .wp-block-navigation-item { margin: 0; }
.entete .wp-block-navigation-item__content {
  font: 400 15px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}
.nav .wp-block-navigation-item__content { position: relative; display: inline-block; padding-block: 6px; }
.nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.entete .wp-block-navigation-item__label { display: inline; }

.logo.wp-block-site-logo { justify-self: center; }
.logo.wp-block-site-logo a { display: block; line-height: 0; }
.wp-block-site-logo img { height: auto; }

/* Le burger est un paragraphe : deux traits dessinés en CSS, texte masqué */
p.burger {
  font-size: 0; line-height: 0; color: inherit;
  user-select: none;
}
p.burger::before, p.burger::after {
  content: ""; position: absolute; left: 5px; right: 5px; height: 1px;
  background: currentColor; transition: transform .35s ease, top .35s ease;
}
p.burger::before { top: 13px; }
p.burger::after { top: 20px; }
.entete.est-ouvert p.burger::before { top: 17px; transform: rotate(45deg); }
.entete.est-ouvert p.burger::after { top: 17px; transform: rotate(-45deg); }

.menu-mobile.wp-block-navigation { display: flex; }
.menu-mobile .wp-block-navigation__container { display: flex; flex-direction: column; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
.menu-mobile .wp-block-navigation-item__content { font-size: 15.5px; }

/* Barre d'administration (connectée) : l'en-tête descend d'autant */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* ---- Bande Instagram : les vignettes sont des blocs image liés ---- */
.insta-grille > .wp-block-image { margin: 0; }
.insta-grille > .wp-block-image a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lin); }
.insta-grille > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.insta-titre::after {
  content: ""; display: inline-block; width: 6px; height: 13px; margin-left: 10px; vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M4 0v19M1 15l3 4 3-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M4 0v19M1 15l3 4 3-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Pied de page ---- */
.pied-logo.wp-block-site-logo a { display: inline-block; line-height: 0; }
.pied-liste.wp-block-list { margin: 0; padding: 0; list-style: none; }
.pied-contact a[href^="mailto:"] { font-size: 14px; letter-spacing: .04em; text-transform: none; }

/* Réseaux : bloc natif « Icônes de réseaux sociaux », dessinés comme la maquette */
.reseaux.wp-block-social-links { font-size: 15px; line-height: 1; list-style: none; padding: 0; margin-bottom: 0; }
.reseaux .wp-social-link { display: inline-flex; height: auto; line-height: 0; }
.reseaux .wp-social-link { margin: 0; padding: 0; background: none !important; color: var(--sauge-texte) !important; border-radius: 0; }
.reseaux .wp-block-social-link-anchor { display: inline-flex; padding: 0 !important; line-height: 0; color: inherit !important; transition: opacity .3s ease; }
.reseaux .wp-block-social-link-anchor:hover { opacity: .55; }
.reseaux .wp-block-social-link-anchor svg { display: none; }
.reseaux .wp-block-social-link-anchor::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.reseaux .wp-social-link-instagram { --icone: var(--icone-instagram); }
.reseaux .wp-social-link-linkedin { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.4 3.8a2.2 2.2 0 1 1-4.4 0 2.2 2.2 0 0 1 4.4 0zM1.2 8h4v14h-4V8zm7 0h3.8v1.9h.1c.5-1 1.8-2.1 3.8-2.1 4 0 4.8 2.7 4.8 6.1V22h-4v-7.2c0-1.7 0-3.9-2.4-3.9s-2.7 1.9-2.7 3.8V22h-4V8z'/%3E%3C/svg%3E"); }
.reseaux .wp-social-link-chain { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='7.9' cy='14.6' r='6.6'/%3E%3Ccircle cx='15.3' cy='14.6' r='6.6'/%3E%3Cpath d='M6.1 4.4 7.9 2l1.8 2.4-1.8 2.4z'/%3E%3C/svg%3E"); }
.reseaux .wp-block-social-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Mentions légales : navigation native */
.pied-legal.wp-block-navigation { display: flex; }
/* la liste reprend l’espacement que la maquette pose sur le <nav> (28 px, puis 10/20 px sur téléphone) */
.pied-legal .wp-block-navigation__container { display: flex; flex-wrap: inherit; gap: inherit; justify-content: inherit; margin: 0; padding: 0; list-style: none; }
.pied-legal .wp-block-navigation-item__content { font-size: 11.5px; color: #6a6a66; text-decoration: none; }
.pied-legal .wp-block-navigation-item__content:hover { color: var(--gris-titre); }

/* Retour en haut : un paragraphe-lien, la flèche est dessinée en CSS */
p.pied-haut a { display: inline-block; width: 8px; height: 18px; font-size: 0; color: inherit;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M4 20V1M1 5l3-4 3 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M4 20V1M1 5l3-4 3 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Espace avant la bande Instagram (main:has(+ .insta) dans la maquette) ---- */
.site-principal:has(+ .zone-pied .insta) .contenu-page > section.section:last-child { padding-bottom: calc(var(--respiration) * .5); }
.site-principal:has(+ .zone-pied .insta) .contenu-page > section:not(.section):last-child { margin-bottom: calc(var(--respiration) * .5); }


/* ---- À propos : le séparateur central de la maquette était un <span> vide ---- */
@media (min-width: 821px) { .ap4-cotes > p:last-child { grid-column: 3; } }

/* ---- Contact : « Vous préférez me joindre directement ? » ---- */
.contact-direct a[href^="mailto:"] { text-transform: none; font-size: 16px; letter-spacing: .03em; }

/* ---- Formulaires Contact Form 7 ---- */
.wpcf7 form .wpcf7-response-output { margin: 24px auto 0; padding: 14px 18px; border: 1px solid var(--sauge-texte); font: 400 14.5px/1.6 var(--serif); color: var(--sauge-texte); text-align: center; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap > :where(input:not([type="checkbox"]):not([type="radio"]), textarea) { display: block; width: 100%; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font: 400 13px/1.4 var(--serif); color: #8a3b2e; }
.wpcf7-spinner { display: none; }
.formulaire-centre .wpcf7-submit, .fenetre-formulaire .wpcf7-submit { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; border-radius: 0; }
.formulaire-centre > .wpcf7-submit { grid-column: 1 / -1; justify-self: center; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* cases à cocher / boutons radio : enrobages de CF7 */
.choix-liste > .wpcf7-form-control-wrap { display: contents; }
.choix-liste .wpcf7-form-control { display: contents; }
.choix-liste .wpcf7-list-item { margin: 0; display: inline-flex; }
.choix-liste .wpcf7-list-item > label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-titre); cursor: pointer; white-space: nowrap;
}
.choix-liste .wpcf7-list-item.last { grid-column: auto; }
.choix-connu .wpcf7-list-item.last { grid-column: 1 / -1; justify-self: center; align-items: center; gap: 0; }
.choix-connu .wpcf7-list-item.last > label::after { content: "\00a0:"; margin-right: 1px; }
.choix-liste input.wpcf7-free-text {
  width: 130px; margin-left: 2px; padding: 2px 0 4px; border: 0; border-bottom: 1px solid #555; border-radius: 0;
  background: transparent; font: 400 14.5px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--encre); outline: none;
}
.choix-liste input.wpcf7-free-text::placeholder { color: #9a9a94; }
.wpcf7-quiz-label { display: none; }
.consentement .wpcf7-form-control-wrap, .consentement .wpcf7-acceptance { display: block; }
.consentement .wpcf7-list-item { margin: 0; }
.consentement .wpcf7-list-item > label { display: flex; gap: 12px; align-items: flex-start; justify-content: center; cursor: pointer; }
.consentement input[type="checkbox"] {
  flex: none; width: 12px; height: 12px; margin: 4px 0 0; border: 1px solid #555; border-radius: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.consentement input[type="checkbox"]:checked { background: var(--anthracite); box-shadow: inset 0 0 0 2px var(--sauge); }

/* ---- Galeries clients : liste (boucle de requête sur les pages enfants) ---- */
.galeries-requete { margin: 0; }
.galeries-liste.wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.galeries-liste > li { margin: 0; }
.galerie-couv.wp-block-post-featured-image { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lin); }
.galerie-couv.wp-block-post-featured-image a { display: block; height: 100%; }
.galerie-couv.wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.galeries-liste > li:hover .galerie-couv img { transform: scale(1.035); }
.galerie-nom.wp-block-post-title {
  margin-top: 24px; font-weight: 400; font-size: 16px; letter-spacing: .01em; color: var(--gris-titre);
}
.galerie-nom a { text-decoration: none; color: inherit; }
.galerie-meta::before {
  content: ""; width: 9px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='.6' y='4.6' width='7.8' height='5.8'/%3E%3Cpath d='M2.2 4.6V3a2.3 2.3 0 0 1 4.6 0v1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='.6' y='4.6' width='7.8' height='5.8'/%3E%3Cpath d='M2.2 4.6V3a2.3 2.3 0 0 1 4.6 0v1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Galerie : page d'une galerie ---- */
.acces-erreur { margin: -6px 0 22px; font: 400 14px/1.6 var(--serif); color: #8a3b2e; }
.galerie-contenu { margin: 0; }
.galerie-fin.wp-block-buttons { text-align: center; }
.compteur-selection svg { width: 14px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.wp-block-button.envoyer-selection > a[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Mosaïque justifiée : le bloc Galerie impose ses largeurs, on les reprend */
.wp-block-gallery.galerie-grille {
  --hauteur-rangee: 330px;
  display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
  width: calc(100vw - 8px); margin: 0 0 0 calc(50% - 50vw + 4px) !important;
  --wp--style--unstable-gallery-gap: 4px;
}
.wp-block-gallery.galerie-grille > figure.wp-block-image {
  position: relative;
  flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--hauteur-rangee)) !important;
  width: auto !important; max-width: none !important; margin: 0 !important;
  height: auto !important; overflow: hidden; cursor: zoom-in;
  background: var(--lin);
}
.wp-block-gallery.galerie-grille > figure.wp-block-image > a { display: block; width: 100%; height: 100%; }
.wp-block-gallery.galerie-grille > figure.wp-block-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* Fenêtre d'envoi : les deux étapes sont des groupes */
.fenetre-etape[hidden] { display: none !important; }
.etape-merci .merci-texte { margin: 22px 0 32px; font-size: 16px; line-height: 1.9; }
/* CF7 enrobe la dernière ligne (champs cachés + envoi) dans un <p> : il ne doit pas compter dans la grille */
.fenetre-formulaire > p, .formulaire-centre > p { display: contents; }
.fenetre-formulaire > p > br, .formulaire-centre > p > br { display: none; }

/* Galerie verrouillée : seule la page du mot de passe s'affiche */
.galerie-verrouillee .acces-galerie { margin: 0; }

/* ---- Menu en icône sous 1340 px (mêmes règles que la maquette, sur les blocs) ---- */
@media (max-width: 1340px) {
  .nav.wp-block-navigation { display: none; }
}

/* ---- « 07 82 86 42 18 · e-mail » : le point est un <sub> (format natif) ---- */
.contact-direct sub { font-size: inherit; vertical-align: baseline; line-height: inherit; margin-inline: 8px; }
@media (max-width: 820px) { .contact-direct sub { display: block; height: 0; overflow: hidden; } }

/* ---- Message après envoi (Contact Form 7) : dans le style des encarts du site ----
   CF7 colore la bordure selon l'état (vert, orange, rouge) avec .wpcf7 form.sent … :
   il faut une spécificité supérieure pour la remplacer. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 24px 32px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px #9aa38f;
  font: 400 15.5px/1.9 var(--serif);
  color: var(--sauge-texte);
  text-align: center;
  text-wrap: balance;
}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output { color: #7a3a2e; box-shadow: inset 0 0 0 1px #c9a59b; }
.formulaire-centre .wpcf7-response-output { grid-column: 1 / -1; }

/* Photo de bandeau très lumineuse ou chargée : légèrement assombrie pour que le texte se lise
   (classe ajoutée sur le bloc image, dans « Avancé → Classe CSS additionnelle ») */
.photo-assombrie img { filter: brightness(.68) contrast(1.05); }

/* ---- Contact : le texte du bandeau dans un encart lin translucide ----
   (la photo garde ses couleurs ; le texte se lit quelle que soit l'image choisie) */
.bandeau-contact-carte {
  width: min(620px, 100%);
  padding: 40px 52px 44px;
  background: rgba(247, 247, 241, .74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.bandeau-contact-texte .bandeau-contact-carte .etiquette { color: #555; }
.bandeau-contact-texte .bandeau-contact-carte h1 { margin-top: 16px; color: var(--encre); }
.bandeau-contact-texte .bandeau-contact-carte p:not(.etiquette) { max-width: none; margin-top: 18px; color: #555; }
.bandeau-contact:has(.bandeau-contact-carte)::after { background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 32%); }
@media (max-width: 820px) {
  .bandeau-contact-carte { padding: 28px 22px 30px; }
}

/* Bandeau Contact : photo verticale (fleurs), cadrée sur les fleurs */
.cadrage-55-34 img { object-position: 55% 34%; }

/* À propos, « Écrivons votre histoire ensemble » : cadré sur les visages */
.cadrage-50-30 img { object-position: 50% 30%; }

/* ---- À propos : la citation sur photo, dans le même encart lin translucide que Contact ---- */
.ap2-citation:not(.p2-phrase)::after { background: rgba(0, 0, 0, .06); }
.ap2-citation:not(.p2-phrase) blockquote {
  width: min(780px, calc(100% - 40px));
  max-width: none;
  padding: 44px 56px 46px;
  background: rgba(247, 247, 241, .74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: var(--gris-titre);
}
.ap2-citation:not(.p2-phrase) cite { color: #555; }
@media (max-width: 820px) {
  .ap2-citation:not(.p2-phrase) blockquote { padding: 30px 24px 32px; }
}

/* ---- Prestations : la phrase sur photo tient sur deux lignes sur ordinateur ---- */
@media (min-width: 821px) {
  .p2-phrase blockquote { max-width: 900px; }
}

/* ---- Prestations : la phrase sur photo dans le même encart lin translucide ---- */
.ap2-citation.p2-phrase::after { background: rgba(0, 0, 0, .06); }
.ap2-citation.p2-phrase blockquote {
  width: min(980px, calc(100% - 40px));
  max-width: none;
  padding: 44px 56px 46px;
  background: rgba(247, 247, 241, .74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: var(--gris-titre);
}
@media (max-width: 820px) {
  .ap2-citation.p2-phrase blockquote { padding: 30px 24px 32px; }
}

/* Prestations, phrase sur photo : visages au-dessus de l’encart */
.cadrage-50-58 img { object-position: 50% 58%; }

/* Galeries clients, bandeau : la fleur sous le menu */
.cadrage-50-18 img { object-position: 50% 18%; }

/* ---- Galerie « vitrine » (couverture seule, sans photos) : un message à la place de la galerie ---- */
.galerie-archivee { display: none; }
.galerie-vide .galerie-archivee { display: block; max-width: 560px; margin: 0 auto; text-align: center; }
.galerie-vide .galerie-archivee p { margin-bottom: 36px; font-size: 16px; line-height: 1.9; text-wrap: balance; }
.galerie-vide :is(.galerie-barre, .galerie-consigne, .galerie-contenu, .galerie-fin, .fenetre-selection) { display: none !important; }

/* Galerie archivée : couverture moins haute et message dans un encart sauge qui chevauche la photo,
   comme le formulaire de la page Contact — visible dès l'arrivée sur la page */
.galerie-vide .galerie-couverture { height: 66vh; min-height: 460px; }
.galerie-vide .galerie-section { padding-top: 0; }
.galerie-vide .galerie-archivee {
  position: relative; z-index: 3;
  max-width: 640px; margin: -120px auto 0; padding: 52px 56px 56px;
  background: var(--sauge); color: var(--sauge-texte);
}
.galerie-vide .galerie-archivee p { margin-bottom: 32px; font-size: 16.5px; color: var(--sauge-texte); }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link { background: #fff; }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link:hover { background: var(--lin); }
@media (max-width: 820px) {
  .galerie-vide .galerie-archivee { margin: -80px 20px 0; padding: 36px 24px 40px; }
}

/* Galerie archivée — version douce : le même encart lin translucide que les citations du site,
   posé entièrement sur la photo, texte et bouton aux tailles habituelles */
.galerie-vide .galerie-archivee {
  max-width: 560px; margin: -210px auto 0; padding: 36px 44px 40px;
  background: rgba(247, 247, 241, .74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--gris-titre);
}
.galerie-vide .galerie-archivee p { margin-bottom: 26px; font-size: 15.5px; line-height: 1.85; color: var(--gris-titre); }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link { background: var(--sauge); }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link:hover { background: #c4cbbd; }
.galerie-vide .galerie-section { padding-bottom: calc(var(--respiration) * .6); }
@media (max-width: 820px) {
  .galerie-vide .galerie-archivee { margin: -190px 20px 0; padding: 28px 22px 30px; }
}
/* message en deux lignes sur ordinateur : l'encart s'élargit juste assez */
@media (min-width: 900px) { .galerie-vide .galerie-archivee { max-width: 800px; } .galerie-vide .galerie-archivee p { text-wrap: nowrap; } }
/* l'encart à cheval sur le bas de la photo : on voit davantage la couverture */
.galerie-vide .galerie-archivee { margin-top: -95px; }
@media (max-width: 820px) { .galerie-vide .galerie-archivee { margin-top: -120px; } }
/* encart vert sauge, bouton blanc cassé (cette page seulement) */
.galerie-vide .galerie-archivee { background: var(--sauge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.galerie-vide .galerie-archivee p { color: var(--sauge-texte); }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link { background: var(--lin); }
.galerie-vide .galerie-archivee .wp-block-button.bouton > .wp-block-button__link:hover { background: #fff; }

/* ---- Téléphone et tablette (menu en icône) : logo centré dans l'écran, burger à droite ---- */
@media (max-width: 1340px) {
  .entete-barre { grid-template-columns: 1fr auto 1fr; }
  .entete-barre > .logo { grid-column: 2; justify-self: center; }
  .entete-barre > .burger { grid-column: 3; justify-self: end; }
}

/* ---- Diaporama d'accueil : les photos d'Ashley telles qu'exportées ----
   Plus de voile sombre uniforme ni d'assombrissement par photo (réglages faits pour les anciennes images) ;
   seulement un léger dégradé derrière le menu et une ombre douce sous le texte pour la lisibilité. */
.hero::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 22%),
    radial-gradient(ellipse 42% 16% at 50% 53%, rgba(0,0,0,.14), rgba(0,0,0,0));
}
.hero-diapo-lumineuse img, .hero-diapo-claire img { filter: none; }
.hero-titre, .hero-accroche { text-shadow: 0 1px 16px rgba(0,0,0,.32), 0 0 2px rgba(0,0,0,.18); }
.hero-diapo img { image-rendering: auto; }

/* Diaporama — réglages photo par photo (demandes d'Ashley) */
/* 1re photo : sur ordinateur, on montre le haut de l'image pour que le logo ne touche pas les têtes */
@media (orientation: landscape) and (min-width: 821px) {
  .hero-diapo.cadrage-54-22 img { object-position: 54% 11%; }
}
/* 2e photo (ciel et robe très clairs) : voile doux seulement derrière le texte, les bords restent intacts */
.hero-diapo-lumineuse::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 30% at 50% 52%, rgba(0,0,0,.42), rgba(0,0,0,.16) 60%, rgba(0,0,0,0) 85%);
}
/* 2e photo sur téléphone : cadrée un peu plus à gauche de l'image pour garder le marié */
@media (orientation: portrait) {
  .hero-diapo-lumineuse.cadrage-50-40 img { object-position: 40% 40%; }
}
/* Formulaire de contact : petite précision sous un champ (téléphone) */
.champ-aide { display: block; margin-top: 8px; font: italic 400 13px/1.4 var(--serif); color: #7d7d76; text-align: center; }
/* Boutons sur téléphone : le texte passe à la ligne au lieu de déborder du cadre (écrans étroits, texte agrandi) */
@media (max-width: 820px) {
  .wp-block-button.bouton > .wp-block-button__link, a.bouton {
    white-space: normal; text-wrap: balance; line-height: 1.5; padding: 13px 22px 12px;
  }
}
/* Accueil : espaces entre les sections resserrés d'environ un quart (le visiteur arrive plus vite aux prestations) */
body.home { --respiration: clamp(48px, 7.5vw, 108px); }
body.home .philo { padding-top: calc(var(--respiration) * 1.4); }
body.home .temoignages-section { padding-bottom: var(--respiration); }
body.home .oeuvres .centre { margin-top: clamp(40px, 4.5vw, 64px); }
/* Lisibilité : petites capitales un peu moins espacées (étiquettes, signatures, boutons) */
.etiquette, .hero-accroche, .contact-pied p, .appel-encart p, .galerie-barre-titre, .ap2-mots li, .ap2-citation cite { letter-spacing: .15em; }
.p2-avis-lot cite, .ap4-cotes p { letter-spacing: .14em; }
.bouton, .wp-block-button.bouton > .wp-block-button__link { letter-spacing: .13em; }
/* Accueil : bouton « Découvrir mes prestations » sur le diaporama (contour blanc, discret) */
.hero-boutons { justify-content: center; margin-top: 34px; }
.wp-block-button.bouton-hero > .wp-block-button__link {
  display: inline-block; max-width: 100%; padding: 15px 30px 14px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 0;
  background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: #fff; font: 500 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.25); transition: background-color .3s ease;
}
.wp-block-button.bouton-hero > .wp-block-button__link:hover, .wp-block-button.bouton-hero > .wp-block-button__link:focus-visible { background: rgba(255,255,255,.18); }
@media (max-width: 820px) {
  .hero-boutons { margin-top: 28px; }
  .wp-block-button.bouton-hero > .wp-block-button__link { line-height: 1.5; padding: 12px 24px 11px; text-wrap: balance; }
}
/* Formulaire de contact : délai de réponse, juste avant le bouton d'envoi */
.formulaire-centre > p.formulaire-delai { display: block; grid-column: 1 / -1; margin: 0 0 -14px; text-align: center; font: italic 400 15px/1.5 var(--serif); color: var(--encre); }
/* Prestations : contenu de la formule, juste sous le prix */
.p2-texte p.formule-detail:not(.etiquette):not(.p2-lien) { margin-top: 10px; font: italic 400 15px/1.6 var(--serif); color: #6f6f6a; }
/* Accueil : texte du diaporama (demandes d'Ashley) — aucun voile ni halo sombre sur les photos ;
   nom en police fine, accroche un peu plus lisible, ombre des lettres courte et discrète */
.hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 22%); }
.hero-diapo-lumineuse::after { content: none; }
.hero-titre { font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: .05em; }
.hero-accroche { font-size: 14px; font-weight: 500; margin-top: 20px; }
.hero-titre, .hero-accroche { text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.18); }
/* 2e photo (robe et ciel très clairs) : ombre un peu plus nette, toujours courte, pour garder le texte lisible */
.hero:has(.hero-diapo-lumineuse.est-active) :is(.hero-titre, .hero-accroche) { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.35); }
@media (max-width: 820px) { .hero-accroche { font-size: 13px; } }
/* Sur ordinateur, le texte descend un peu pour laisser les visages libres */
@media (orientation: landscape) and (min-width: 821px) {
  .hero-texte { padding-top: 14vh; }
  /* 3e photo : cadrée sur le haut, et le texte remonte en douceur pendant le fondu (pas de visage en haut),
     pour que le couple de la ruelle passe sous le bouton quel que soit l'écran */
  .hero-diapo-claire img { object-position: 50% 0%; }
  .hero-texte { transition: padding 1.6s ease; }
  .hero:has(.hero-diapo-claire.est-active) .hero-texte { padding-top: 0; padding-bottom: 14vh; }
}
/* ---- Portfolio — galerie publique (modèle « portfolio ») ---- */
/* couverture : juste un léger dégradé derrière le menu, la photo n'est pas assombrie */
.portfolio-page .galerie-couverture::after { background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%); }
.portfolio-page .galerie-couverture-texte :is(h1, .etiquette) { text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.18); }
/* texte d'introduction au-dessus des photos */
.portfolio-contenu > :is(p, h2, h3) { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }
.portfolio-contenu > p { font: 400 17px/1.8 var(--serif); color: var(--encre); }
.portfolio-contenu > p + p { margin-top: 16px; }
.portfolio-contenu > .wp-block-gallery { margin-top: clamp(40px, 5vw, 64px) !important; }
/* invitation à écrire en fin de page */
.portfolio-appel { background: var(--lin); }
.portfolio-appel p { margin-top: 18px; font: 400 17px/1.7 var(--serif); }
.portfolio-appel-boutons.wp-block-buttons { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px !important; margin-top: 32px; }
.wp-block-button.bouton-discret > .wp-block-button__link { background: transparent; }
.wp-block-button.bouton-discret > .wp-block-button__link:hover { background: rgba(255,255,255,.6); }
/* Mosaïques (galeries clients et portfolio) : rangées moins hautes sur tablette et téléphone, comme prévu dans la maquette
   (la règle du bloc Galerie, plus forte, gardait 330 px : une seule photo par ligne sur téléphone) */
@media (max-width: 1100px) { .wp-block-gallery.galerie-grille { --hauteur-rangee: 260px; } }
@media (max-width: 820px) {
  .wp-block-gallery.galerie-grille { --hauteur-rangee: 150px; gap: 3px !important; width: calc(100vw - 6px); margin-left: calc(50% - 50vw + 3px) !important; }
}
/* Page Galeries : portfolio en accès libre, puis galeries clients privées — une étiquette sur chaque vignette */
.galeries-sous-titre { margin-top: 12px; font: italic 400 16px/1.6 var(--serif); color: #6f6f6a; }
.galeries-publiques .galerie-couv::before, .galeries-privees .galerie-couv::before {
  content: "Accès libre"; position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none;
  padding: 6px 10px 5px; background: rgba(247,247,241,.92);
  font: 500 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--encre);
}
.galeries-privees .galerie-couv::before { content: "Accès privé"; }
.galeries-publiques + .galeries-privees { padding-top: 0; }
/* Portfolio : nom de la galerie dans un petit encart blanc cassé translucide, lisible sur toutes les photos */
.portfolio-encart {
  padding: 26px 44px 28px;
  background: rgba(247,247,241,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.portfolio-page .portfolio-encart :is(h1, .etiquette) { color: var(--encre); text-shadow: none; }
.portfolio-page .portfolio-encart h1 { margin-top: 12px; }
@media (max-width: 820px) { .portfolio-encart { padding: 20px 28px 22px; } }
/* Portfolio : couverture cadrée vers le haut (les visages sont souvent dans le tiers supérieur),
   pour qu'ils ne passent pas sous le logo */
.portfolio-page .galerie-couverture > .wp-block-post-featured-image img { object-position: 50% 0%; }
/* … et l'encart du titre se place dans le bas de la photo, pour laisser les visages libres */
.portfolio-page .galerie-couverture-texte { justify-content: flex-end; padding-bottom: 12vh; }
/* Portfolio Mariage (page 498), couverture actuelle (les deux mariées devant le mur) : sur téléphone, la photo est
   entière en hauteur ; on la décale vers la gauche pour que le logo tombe entre les deux têtes.
   À retirer ou ajuster si la couverture change. */
@media (orientation: portrait) {
  .page-id-498 .galerie-couverture > .wp-block-post-featured-image img { object-position: 34% 0%; }
}