/* ============================================================
   Photographe Provence - feuille de style
   Palette : blanc cassé #F8F6F2 · sable #E8DDD2 · taupe #B7A99A
             brun chaud #6C584C · noir doux #2F2F2F
   Typographies : Playfair Display (titres) · Poppins (texte)
   ============================================================ */

:root {
  --blanc: #F8F6F2;
  --sable: #E8DDD2;
  --taupe: #B7A99A;
  --brun: #6C584C;
  --noir: #2F2F2F;
  --encre: #4a4440;
  --font-titre: 'Playfair Display', Georgia, serif;
  --font-texte: 'Poppins', 'Segoe UI', sans-serif;
  --ombre: 0 12px 44px rgba(47, 47, 47, .09);
  --ombre-forte: 0 22px 60px rgba(47, 47, 47, .16);
  --transition: .35s cubic-bezier(.25, .8, .35, 1);
  --radius: 6px;
  --section: clamp(4.5rem, 9vw, 8rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texte);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
::selection { background: var(--sable); color: var(--noir); }

a { color: var(--brun); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--taupe); }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.18;
  color: var(--noir);
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.35rem; }
h2 em, h1 em { font-style: italic; color: var(--brun); }
/* Sur les fonds sombres et les photos, l'accent italique passe en sable
   (le brun devenait illisible) */
.hero h1 em, .hero h2 em, .hero-contenu em,
.banniere h1 em, .banniere h2 em,
.cta-bandeau h2 em, .cta-bandeau h1 em,
.bandeau-image h2 em { color: var(--sable); }

p { color: var(--encre); }

.surtitre {
  display: block;
  font-family: var(--font-texte);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1rem;
}

.filet {
  display: inline-block;
  width: 54px; height: 1px;
  background: var(--taupe);
  vertical-align: middle;
  margin: 0 1rem .2rem 0;
}

.container { width: min(1200px, 92%); margin: 0 auto; }
.container-large { width: min(1440px, 94%); margin: 0 auto; }
.container-etroit { width: min(780px, 92%); margin: 0 auto; }

section { padding: var(--section) 0; position: relative; }
.section-compacte { padding: clamp(3rem, 5vw, 4.5rem) 0; }

.section-titre { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); position: relative; }
.section-titre p { max-width: 640px; margin: 1.1rem auto 0; }
.section-titre > * { position: relative; z-index: 1; }
/* Rameau d'olivier - l'ornement signature sous chaque titre de section */
.section-titre::after {
  content: '';
  display: block;
  width: 92px; height: 22px;
  margin: 1.15rem auto 0;
  opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M10 16 Q60 9 110 16' fill='none' stroke='%23B7A99A' stroke-width='1.3'/%3E%3Cg fill='%23B7A99A'%3E%3Cellipse cx='28' cy='11' rx='7.5' ry='2.7' transform='rotate(-20 28 11)'/%3E%3Cellipse cx='46' cy='17' rx='7.5' ry='2.7' transform='rotate(16 46 17)'/%3E%3Cellipse cx='62' cy='9.5' rx='7.5' ry='2.7' transform='rotate(-15 62 9.5)'/%3E%3Cellipse cx='78' cy='17' rx='7.5' ry='2.7' transform='rotate(14 78 17)'/%3E%3Cellipse cx='94' cy='11' rx='7.5' ry='2.7' transform='rotate(-18 94 11)'/%3E%3Ccircle cx='55' cy='14' r='1.8'/%3E%3Ccircle cx='70' cy='13.4' r='1.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Courbes de séparation (injectées par main.js) ---------- */
.courbe {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(30px, 5.5vw, 64px);
  z-index: 3;
  pointer-events: none;
}
.courbe svg { display: block; width: 100%; height: 100%; }
.courbe-haut { top: -1px; bottom: auto; transform: rotate(180deg); }

.fond-blanc { background: #fff; }
.fond-sable { background: var(--sable); }
.fond-creme { background: var(--blanc); }

/* Grain très léger sur les fonds sable - matière papier */
.fond-sable { position: relative; }
.fond-sable::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fond-sable > * { position: relative; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-texte);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--brun);
  border: 1px solid var(--brun);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(47, 47, 47, .2);
}
.btn-ghost { background: transparent; color: var(--brun); }
.btn-ghost:hover { background: var(--brun); color: var(--blanc); }
.btn-clair { background: transparent; border-color: rgba(248, 246, 242, .85); color: var(--blanc); }
.btn-clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.btn-petit { padding: .6rem 1.5rem; font-size: .7rem; }

.lien-souligne {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--noir);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--taupe);
  transition: border-color var(--transition), color var(--transition), padding var(--transition);
}
.lien-souligne:hover { color: var(--brun); border-color: var(--brun); padding-bottom: .55rem; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.15rem 0;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.header.solide {
  background: rgba(248, 246, 242, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(47, 47, 47, .07);
  padding: .7rem 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo {
  font-family: var(--font-titre);
  font-size: 1.35rem;
  color: var(--noir);
  letter-spacing: .02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.logo span { color: var(--taupe); font-style: italic; }
.logo-img { height: 48px; width: auto; transition: height var(--transition); }
.header.solide .logo-img { height: 40px; }
.logo-fonce { display: block; }
.logo-claire { display: none; }
.header.sur-hero:not(.solide) .logo-claire { display: block; }
.header.sur-hero:not(.solide) .logo-fonce { display: none; }
.header.sur-hero:not(.solide) .logo,
.header.sur-hero:not(.solide) .nav > a,
.header.sur-hero:not(.solide) .nav-groupe > a { color: var(--blanc); }
.header.sur-hero:not(.solide) .logo span { color: var(--sable); }
@media (max-width: 560px) { .logo-texte { display: none; } }

/* Barre de progression de lecture */
.progression-scroll {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--taupe), var(--brun));
  z-index: 120;
  pointer-events: none;
  transition: width .15s linear;
}

.nav { display: flex; gap: 1.7rem; align-items: center; }
.nav > a, .nav-groupe > a {
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--noir);
  position: relative;
  padding: .3rem 0;
}
.nav > a::after, .nav-groupe > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transition);
}
.nav > a:hover::after, .nav > a.actif::after,
.nav-groupe > a:hover::after, .nav-groupe > a.actif::after { width: 100%; }

.nav-cta {
  border: 1px solid var(--taupe) !important;
  border-radius: 30px;
  padding: .5rem 1.3rem !important;
  transition: all var(--transition);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--brun); border-color: var(--brun) !important; color: var(--blanc) !important; }
.header.sur-hero:not(.solide) .nav-cta { border-color: rgba(248, 246, 242, .6) !important; }

/* Menu déroulant Prestations */
.nav-groupe { position: relative; }
.sous-menu {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--ombre-forte);
  padding: .7rem 0;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.sous-menu::before {
  content: '';
  position: absolute;
  top: -.9rem; left: 0; right: 0;
  height: .9rem;
}
.nav-groupe:hover .sous-menu, .nav-groupe:focus-within .sous-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.sous-menu a {
  display: block;
  padding: .55rem 1.5rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir);
  transition: background var(--transition), color var(--transition), padding var(--transition);
}
.sous-menu a:hover { background: var(--blanc); color: var(--brun); padding-left: 1.8rem; }

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px; height: 36px;
  position: relative;
  z-index: 130;
}
.burger span {
  display: block;
  width: 25px; height: 1.5px;
  background: var(--noir);
  margin: 6px auto;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.header.sur-hero:not(.solide) .burger span { background: var(--blanc); }
.nav-ouverte .burger span { background: var(--noir) !important; }
.nav-ouverte .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-ouverte .burger span:nth-child(2) { opacity: 0; }
.nav-ouverte .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  /* Le backdrop-filter du header capture les descendants en position:fixed :
     le menu plein écran restait piégé dans la barre une fois la page scrollée.
     Sur mobile on remplace le flou par un fond quasi opaque. */
  .header.solide {
    backdrop-filter: none;
    background: rgba(248, 246, 242, .98);
  }
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: var(--blanc);
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.7, 0, .3, 1);
    overflow-y: auto;
    padding: 5rem 0 3rem;
  }
  .nav-ouverte .nav { transform: translateX(0); }
  .nav > a, .nav-groupe > a { color: var(--noir) !important; font-size: .95rem; }
  .nav-groupe { display: contents; }
  .sous-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
  }
  .sous-menu a { padding: 0; font-size: .8rem; color: var(--taupe); }
  .sous-menu a:hover { background: none; padding-left: 0; }
  .nav-cta { margin-top: .8rem; }
}

/* ---------- Hero accueil ----------
   Le hero dépasse volontairement le premier écran (114svh) :
   la courbe de séparation reste sous la ligne de flottaison et
   ne se révèle qu'au scroll. Le padding-bottom recentre le
   contenu dans la partie visible au chargement. */
.hero {
  position: relative;
  min-height: 114vh;
  min-height: 114svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0 14svh;
  overflow: hidden;
}
@supports not (height: 1svh) { .hero { padding-bottom: 14vh; } }
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-zoom 14s ease-out forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
/* Heros "doux" des pages de contenu : photo réellement floutée et voilée */
.hero-doux .hero-img {
  filter: blur(5px) brightness(.82) saturate(.95);
  transform: scale(1.08);
  animation: none;
}
.hero.hero-doux::after {
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(32, 27, 23, .28), transparent 75%),
    linear-gradient(rgba(32, 27, 23, .5), rgba(32, 27, 23, .68));
}
.hero-doux .hero-contenu h1,
.hero-doux .hero-contenu p { text-shadow: 0 2px 26px rgba(0, 0, 0, .55); }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(32, 27, 23, .4), rgba(32, 27, 23, .6));
  backdrop-filter: blur(2px);
}
.hero-contenu {
  position: relative;
  z-index: 2;
  color: var(--blanc);
  padding: 2rem;
  max-width: 840px;
}
.hero-contenu h1 { color: var(--blanc); margin-bottom: 1.3rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-contenu .surtitre { color: var(--sable); }
.hero-contenu p { font-size: 1.06rem; margin: 0 auto 2.4rem; max-width: 560px; opacity: .94; color: var(--blanc); }
.hero-boutons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Molette de souris animée - l'invitation au scroll */
.fleche-scroll {
  position: absolute;
  bottom: calc(14vh + 2.2rem);
  bottom: calc(14svh + 2.2rem);
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  width: 27px; height: 44px;
  border: 1.5px solid rgba(248, 246, 242, .8);
  border-radius: 15px;
  box-shadow: 0 0 18px rgba(0, 0, 0, .12), inset 0 0 8px rgba(0, 0, 0, .06);
}
.fleche-scroll::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 9px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--sable);
  animation: molette 2.1s cubic-bezier(.4, 0, .4, 1) infinite;
}
@keyframes molette {
  0% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(15px); opacity: 0; }
  56% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
/* La molette de souris n'a de sens que sur ordinateur */
@media (max-width: 1080px), (hover: none) {
  .fleche-scroll { display: none; }
}

/* ---------- Bannière (pages intérieures) ---------- */
.banniere {
  position: relative;
  min-height: clamp(440px, 64vh, 700px);
  display: flex;
  align-items: flex-end;
  padding: 8.5rem 0 5.2rem;
  overflow: hidden;
}
.banniere > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-zoom 11s ease-out forwards;
}
@keyframes montee {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.banniere .container > *,
.hero-contenu > * {
  opacity: 0;
  animation: montee .95s cubic-bezier(.25, .8, .35, 1) forwards;
}
.banniere .container > *:nth-child(1), .hero-contenu > *:nth-child(1) { animation-delay: .15s; }
.banniere .container > *:nth-child(2), .hero-contenu > *:nth-child(2) { animation-delay: .3s; }
.banniere .container > *:nth-child(3), .hero-contenu > *:nth-child(3) { animation-delay: .45s; }
.banniere .container > *:nth-child(4), .hero-contenu > *:nth-child(4) { animation-delay: .6s; }
.split-texte > * { opacity: 0; animation: montee .95s cubic-bezier(.25, .8, .35, 1) forwards; }
.split-texte > *:nth-child(1) { animation-delay: .2s; }
.split-texte > *:nth-child(2) { animation-delay: .35s; }
.split-texte > *:nth-child(3) { animation-delay: .5s; }
.split-texte > *:nth-child(4) { animation-delay: .65s; }
.split-texte > *:nth-child(5) { animation-delay: .8s; }
.banniere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(32, 27, 23, .34) 0%, rgba(32, 27, 23, .66) 100%);
  backdrop-filter: blur(2px);
}
.banniere .container { position: relative; z-index: 2; }
.banniere h1 { color: var(--blanc); max-width: 780px; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.banniere .surtitre { color: var(--sable); }
.banniere p { color: rgba(248, 246, 242, .92); max-width: 620px; margin-top: 1rem; font-size: 1.02rem; }

.ariane {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, .75);
  margin-bottom: 1.2rem;
}
.ariane a { color: rgba(248, 246, 242, .75); }
.ariane a:hover { color: var(--blanc); }
.ariane span::before { content: '·'; margin-right: .6rem; }

/* ---------- Hero scindé (page À propos) ----------
   Texte sur crème à gauche, portrait pleine hauteur à droite :
   aucune photo paysage recadrée, un vrai parti pris éditorial. */
.split-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}
.split-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(7rem, 12vh, 9rem) clamp(1.5rem, 6vw, 6rem) clamp(4rem, 8vh, 6rem) max(4%, calc((100vw - 1200px) / 2));
  position: relative;
}
.split-texte h1 {
  margin: .2rem 0 1.4rem;
  position: relative;
  z-index: 3;
  width: calc(100% + 16vw);   /* le titre chevauche le portrait : effet couverture de magazine */
  max-width: none;
}
@media (max-width: 940px) { .split-texte h1 { width: auto; } }
.split-texte .accroche { font-size: 1.05rem; max-width: 480px; }
.split-faits {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(183, 169, 154, .4);
}
.split-faits div strong {
  display: block;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--brun);
  line-height: 1.1;
}
.split-faits div span {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.split-image {
  position: relative;
  overflow: hidden;
}
.split-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-zoom 12s ease-out forwards;
}
.split-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(248, 246, 242, .55), transparent 22%),
              linear-gradient(90deg, rgba(248, 246, 242, .82), transparent 34%);
  pointer-events: none;
}
.split-image figcaption {
  position: absolute;
  z-index: 2;
  bottom: 1.6rem; right: 1.8rem;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, .9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.split-hero .mot-vertical {
  position: absolute;
  z-index: 2;
  left: clamp(.4rem, 1.4vw, 1.4rem);
  bottom: 2rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .66rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--taupe);
}
@media (max-width: 940px) {
  .split-hero { grid-template-columns: 1fr; min-height: 0; }
  .split-image { order: -1; height: 62vh; }
  .split-image::before { background: linear-gradient(rgba(248, 246, 242, .5), transparent 30%); }
  .split-texte { padding: 3rem 4% 3.5rem; }
  .split-hero .mot-vertical { display: none; }
}

/* ---------- Collage éditorial (2 images superposées) ----------
   La profondeur vient d'un bloc sable décalé derrière l'ensemble,
   pas des ombres portées : code magazine, pas code blog. */
.collage {
  position: relative;
  padding: 0 0 4.5rem 0;
}
.collage::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 14%;
  right: -2.2rem;
  bottom: 1.6rem;
  background: var(--sable);
  border-radius: var(--radius);
}
.collage .grande {
  position: relative;
  width: 82%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
}
.collage .grande img { width: 100%; height: 100%; object-fit: cover; }
.collage .petite {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  border: 8px solid var(--blanc);
  border-radius: 3px;
  overflow: hidden;
}
.collage .petite img { width: 100%; height: 100%; object-fit: cover; }
.planche {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
}
.collage .planche-1 { left: -1.6rem; top: .4rem; }
.collage .planche-2 { right: -1.7rem; bottom: 5.4rem; }
@media (max-width: 560px) { .planche { display: none; } .collage::before { right: -1rem; } }
.collage .timbre {
  position: absolute;
  top: -1.4rem;
  right: 8%;
  z-index: 2;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brun);
  background: var(--sable);
  border-radius: 50%;
  width: 108px; height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  padding: .8rem;
  transform: rotate(-8deg);
  box-shadow: var(--ombre);
}

/* ============================================================
   La vie provençale : hirondelles, poussière dorée, lucioles
   (éléments injectés par main.js, purement décoratifs)
   ============================================================ */
.ciel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* Hirondelles réalistes : corps + deux ailes articulées qui battent
   quelques coups puis planent, comme un vrai vol. */
.oiseau {
  position: absolute;
  left: -8%;
  width: calc(30px * var(--echelle, 1));
  color: rgba(40, 34, 28, .7);
  filter: blur(var(--brume, 0px)) drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
  animation: traverser linear infinite;
  will-change: transform;
}
.oiseau i { display: block; animation: planer 6.5s ease-in-out infinite alternate; }
.oiseau svg { display: block; width: 100%; overflow: visible; }
.oiseau path { fill: currentColor; }
.oiseau .aile-g {
  transform-origin: 32px 20px;
  animation: battement-g var(--rythme, 2.6s) ease-in-out infinite;
  animation-delay: var(--decalage, 0s);
}
.oiseau .aile-d {
  transform-origin: 32px 20px;
  animation: battement-d var(--rythme, 2.6s) ease-in-out infinite;
  animation-delay: var(--decalage, 0s);
}
@keyframes battement-g {
  0% { transform: rotate(4deg); }
  8% { transform: rotate(34deg); }
  16% { transform: rotate(-14deg); }
  24% { transform: rotate(30deg); }
  34% { transform: rotate(-6deg); }
  46%, 100% { transform: rotate(6deg); }
}
@keyframes battement-d {
  0% { transform: rotate(-4deg); }
  8% { transform: rotate(-34deg); }
  16% { transform: rotate(14deg); }
  24% { transform: rotate(-30deg); }
  34% { transform: rotate(6deg); }
  46%, 100% { transform: rotate(-6deg); }
}
@keyframes traverser { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@keyframes planer { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(11px) rotate(2deg); } }

.poussiere {
  position: absolute;
  bottom: -2%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(240, 211, 158, .85);
  filter: blur(1px);
  animation: monter linear infinite;
}
@keyframes monter {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .85; }
  80% { opacity: .45; }
  100% { transform: translate(4vw, -94vh); opacity: 0; }
}
/* Feuilles d'olivier qui tombent sur tout le site (injectées par main.js) */
.feuillage {
  position: fixed;
  inset: -60px 0 0 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}
.feuille {
  position: absolute;
  top: -46px;
  animation: chute linear infinite;
  will-change: transform;
}
.feuille i { display: block; animation: balancer ease-in-out infinite alternate; }
.feuille svg { display: block; animation: tournoyer linear infinite; }
@keyframes chute { to { transform: translateY(116vh); } }
@keyframes balancer {
  from { transform: translateX(calc(-1 * var(--amp, 26px))) rotate(-8deg); }
  to { transform: translateX(var(--amp, 26px)) rotate(10deg); }
}
@keyframes tournoyer { to { transform: rotate(360deg); } }

.luciole {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f4d9a8;
  box-shadow: 0 0 12px 4px rgba(244, 217, 168, .5);
  animation: flotter var(--duree, 11s) ease-in-out infinite alternate, clignoter 2.8s ease-in-out infinite;
}
@keyframes flotter { to { transform: translate(var(--dx, 2vw), var(--dy, -9vh)); } }
@keyframes clignoter { 0%, 100% { filter: brightness(.45); } 50% { filter: brightness(1.7); } }
.fond-sombre { position: relative; overflow: hidden; }
.fond-sombre > .container { position: relative; z-index: 3; }

/* Soulignement des mots-clés au survol des confidences */
.confidence em {
  background-image: linear-gradient(var(--sable), var(--sable));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size .5s ease;
}
.confidence:hover em { background-size: 100% 1px; }

/* ---------- Blocs qui remontent sur le hero ---------- */
.remonte {
  position: relative;
  z-index: 5;
  margin-top: clamp(-11rem, -15vh, -6rem);
}
@media (max-width: 940px) { .remonte { margin-top: -3.5rem; } }
.cadre-photo {
  background: #fff;
  padding: 14px 14px 1.1rem;
  border-radius: 4px;
  box-shadow: var(--ombre-forte);
}
.cadre-photo.visible { transition: opacity .9s ease, transform .18s ease-out; }
.cadre-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.cadre-photo figcaption {
  font-family: var(--font-titre);
  font-style: italic;
  color: var(--brun);
  text-align: center;
  padding-top: .9rem;
  font-size: 1.05rem;
}

/* ---------- Section sombre (contraste) ---------- */
.fond-sombre {
  background:
    radial-gradient(120% 90% at 50% 0%, #3d352d 0%, #2b2621 48%, #1e1a17 100%);
}
.fond-sombre::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fond-sombre h2, .fond-sombre .section-titre h2 { color: var(--blanc); }
.fond-sombre .grande-citation blockquote { color: var(--blanc); }
.fond-sombre .grande-citation cite { color: var(--taupe); }
.fond-sombre h2 em { color: var(--sable); }
.fond-sombre p { color: rgba(248, 246, 242, .82); }
.fond-sombre .surtitre { color: var(--taupe); }

/* ---------- Confidences : cartes de verre sur fond sombre ---------- */
.confidences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 820px) { .confidences { grid-template-columns: 1fr; } }
.confidence {
  position: relative;
  padding: 2.1rem 2.3rem 1.9rem;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(248, 246, 242, .1), rgba(248, 246, 242, .03));
  border: 1px solid rgba(232, 221, 210, .18);
  backdrop-filter: blur(7px);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.confidence:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 221, 210, .45);
  background: linear-gradient(150deg, rgba(248, 246, 242, .15), rgba(248, 246, 242, .05));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.confidence .num {
  position: absolute;
  top: .4rem; right: 1.1rem;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 3.4rem;
  color: rgba(232, 221, 210, .14);
  line-height: 1;
  transition: color var(--transition);
}
.confidence:hover .num { color: rgba(232, 221, 210, .3); }
.confidence p {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  color: var(--blanc);
  padding-right: 2rem;
}
.confidence p em { color: var(--sable); }
.confidence .note {
  margin-top: 1rem;
  font-family: var(--font-texte);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(183, 169, 154, .9);
}

.ps-editorial,
.cta-bandeau p.ps-editorial {
  margin: 4rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(248, 246, 242, .18);
  display: inline-block;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 2;
  color: rgba(248, 246, 242, .8) !important;
}

/* ---------- Lettrine éditoriale ---------- */
.lettrine > p:first-of-type::first-letter {
  font-family: var(--font-titre);
  font-size: 3.4em;
  float: left;
  line-height: .82;
  padding: .08em .12em 0 0;
  color: var(--brun);
}

/* ---------- Valeurs éditoriales (sans cartes) ---------- */
.valeurs-ligne {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 940px) { .valeurs-ligne { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.valeur-ligne { padding-top: 1.6rem; border-top: 1px solid rgba(183, 169, 154, .45); position: relative; }
.valeur-ligne .numeral {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--taupe);
  line-height: 1;
  display: block;
  margin-bottom: .7rem;
}
.valeur-ligne h3 { font-size: 1.25rem; margin-bottom: .55rem; }
.valeur-ligne p { font-size: .92rem; }

/* ---------- Marquee éditorial ---------- */
.marquee {
  overflow: hidden;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(183, 169, 154, .35);
  border-bottom: 1px solid rgba(183, 169, 154, .35);
  background: var(--blanc);
  white-space: nowrap;
}
.marquee-piste {
  display: inline-flex;
  animation: defile 60s linear infinite;
}
.marquee span {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--taupe);
  padding: 0 1.6rem;
}
.marquee span::after { content: '·'; margin-left: 3.2rem; color: var(--sable); }
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Grilles ---------- */
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 5vw, 5.5rem); align-items: center; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 940px) {
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}

.image-cadre {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  position: relative;
}
.image-cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s ease; }
.image-cadre:hover img { transform: scale(1.035); }
.image-decalee { margin-top: 3rem; }
@media (max-width: 940px) { .image-decalee { margin-top: 0; } }

.signature {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--taupe);
  margin-top: 1.6rem;
}

/* ---------- Chiffres ---------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 820px) { .chiffres { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1rem; } }
.chiffre-nombre {
  font-family: var(--font-titre);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  color: var(--brun);
  line-height: 1;
}
.chiffre-nombre sup { font-size: .5em; color: var(--taupe); }
.chiffre-libelle {
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre);
}

/* ---------- Cartes prestation ---------- */
.carte {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.carte:hover { transform: translateY(-7px); box-shadow: var(--ombre-forte); }
.carte-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.carte:hover .carte-img img { transform: scale(1.06); }
.carte-corps { padding: 1.9rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.carte-corps h3 { margin-bottom: .55rem; }
.carte-corps p { font-size: .92rem; flex: 1; }
.carte-prix {
  font-family: var(--font-titre);
  font-size: 1.35rem;
  color: var(--brun);
  margin: 1.1rem 0 1rem;
}
.carte-prix small { font-family: var(--font-texte); font-size: .72rem; color: var(--taupe); letter-spacing: .08em; }

/* ---------- Bandeau image pleine largeur ---------- */
.bandeau-image {
  position: relative;
  min-height: clamp(380px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}
@media (min-width: 1000px) {
  .bandeau-image { background-attachment: fixed; }
}
.bandeau-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(32, 27, 23, .54);
  backdrop-filter: blur(3px);
}
.bandeau-image > .container { position: relative; z-index: 2; }
.bandeau-image blockquote {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  color: var(--blanc);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.4;
}
.bandeau-image cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-texte);
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sable);
}
.bandeau-image h2 { color: var(--blanc); }
.bandeau-image p { color: rgba(248, 246, 242, .9); }

/* ---------- Portfolio / mosaïque ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 3rem;
}
.filtre {
  background: none;
  border: 1px solid rgba(183, 169, 154, .55);
  border-radius: 30px;
  padding: .55rem 1.5rem;
  font-family: var(--font-texte);
  font-weight: 300;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--noir);
  cursor: pointer;
  transition: all var(--transition);
}
.filtre:hover, .filtre.actif { background: var(--brun); border-color: var(--brun); color: var(--blanc); }

.mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
@media (max-width: 940px) { .mosaique { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mosaique { grid-template-columns: 1fr; } }
.mosaique figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
}
.mosaique figure.large { aspect-ratio: auto; grid-column: span 2; }
@media (max-width: 560px) { .mosaique figure.large { grid-column: span 1; aspect-ratio: 3 / 4; } }
.mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease, filter 1s ease; }
.mosaique figure:hover img { transform: scale(1.05); }
.mosaique figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.3rem 1rem;
  background: linear-gradient(transparent, rgba(35, 30, 26, .68));
  color: var(--blanc);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}
.mosaique figure:hover figcaption { opacity: 1; transform: none; }

/* Bande d'images façon pellicule */
.pellicule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 820px) { .pellicule { grid-template-columns: repeat(2, 1fr); } }
.pellicule .image-cadre { aspect-ratio: 3 / 4; }
.pellicule .image-cadre:nth-child(even) { transform: translateY(1.6rem); }
@media (max-width: 820px) { .pellicule .image-cadre:nth-child(even) { transform: none; } }

/* ---------- Duo (rangée image + texte, pages catégories) ---------- */
.duo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.2rem, 5vw, 5.5rem);
  align-items: center;
}
.duo.inverse { grid-template-columns: 1fr 1.05fr; }
.duo.inverse .duo-image { order: 2; }
@media (max-width: 940px) {
  .duo, .duo.inverse { grid-template-columns: 1fr; }
  .duo.inverse .duo-image { order: 0; }
}
.duo-image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 5; }
.duo-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s ease; }
.duo-image:hover img { transform: scale(1.03); }
.duo h2 { margin-bottom: 1.2rem; }
.duo p + p { margin-top: 1rem; }

/* ---------- Liste d'infos séance ---------- */
.liste-infos { list-style: none; margin-top: 1.8rem; }
.liste-infos li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(183, 169, 154, .35);
  font-size: .92rem;
}
.liste-infos li:first-child { border-top: 1px solid rgba(183, 169, 154, .35); }
.liste-infos .cle {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
  padding-top: .2rem;
}
.liste-infos .val { text-align: right; color: var(--encre); }

/* ---------- Encadré tarif ---------- */
.encadre-tarif {
  background: #fff;
  border: 1px solid rgba(183, 169, 154, .4);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: clamp(2rem, 4vw, 3.2rem);
  position: relative;
  overflow: hidden;
}
.encadre-tarif::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--taupe), var(--sable));
}
.encadre-tarif .prix {
  font-family: var(--font-titre);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--brun);
  line-height: 1;
}
.encadre-tarif .prix small { font-family: var(--font-texte); font-size: .85rem; color: var(--taupe); letter-spacing: .06em; }
.inclus { list-style: none; margin: 1.6rem 0 2rem; }
.inclus li {
  padding: .5rem 0 .5rem 1.9rem;
  position: relative;
  font-size: .93rem;
  color: var(--encre);
}
.inclus li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05rem;
  width: 14px; height: 1px;
  background: var(--brun);
}

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; counter-reset: etape; }
@media (max-width: 940px) { .etapes { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.etape { text-align: center; padding: 0 1rem; position: relative; }
.etape-numero {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--taupe);
  line-height: 1;
}
.etape h3 { margin: .8rem 0 .6rem; }
.etape p { font-size: .92rem; }

/* ---------- Témoignages ---------- */
.temoignage {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.3rem;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.temoignage:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.temoignage p { font-style: italic; color: var(--encre); flex: 1; font-size: .95rem; }
.temoignage p::before {
  content: '\201C';
  font-family: var(--font-titre);
  font-size: 2.4rem;
  color: var(--taupe);
  display: block;
  line-height: .4;
  margin-bottom: 1rem;
}
.temoignage-auteur { margin-top: 1.5rem; font-weight: 400; font-size: .92rem; color: var(--noir); }
.temoignage-type { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-top: .15rem; }
.etoiles { color: var(--brun); letter-spacing: .22em; margin-bottom: .9rem; font-size: .82rem; }

.avis-resume { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.avis-resume .note {
  font-family: var(--font-titre);
  font-size: clamp(3.4rem, 6vw, 5rem);
  color: var(--brun);
  line-height: 1;
}
.avis-resume .etoiles { font-size: 1.1rem; margin: .8rem 0 .3rem; }
.avis-resume p { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }

.grande-citation {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.grande-citation blockquote {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.45;
  color: var(--noir);
}
.grande-citation blockquote::before { content: '\201C'; color: var(--taupe); }
.grande-citation blockquote::after { content: '\201D'; color: var(--taupe); }
.grande-citation cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-texte);
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ---------- Valeurs / points forts ---------- */
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 940px) { .valeurs { grid-template-columns: 1fr; } }
.valeur {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--ombre);
  border-top: 2px solid var(--sable);
  transition: border-color var(--transition), transform var(--transition);
}
.valeur:hover { border-top-color: var(--brun); transform: translateY(-4px); }
.valeur h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.valeur p { font-size: .92rem; }
.valeur .glyphe {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--taupe);
  display: block;
  margin-bottom: .9rem;
  line-height: 1;
}

/* ---------- FAQ ---------- */
.faq-groupe { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.faq-groupe h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.faq-item { border-bottom: 1px solid rgba(183, 169, 154, .4); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--font-titre);
  font-size: 1.12rem;
  position: relative;
  transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-texte);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--taupe);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--brun); }
.faq-item .faq-reponse { padding: 0 0 1.5rem; font-size: .95rem; max-width: 700px; color: var(--encre); }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 1.4rem; }
.champ label {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  color: var(--brun);
}
.champ input, .champ textarea, .champ select {
  width: 100%;
  padding: .95rem 1.15rem;
  font-family: var(--font-texte);
  font-size: .95rem;
  font-weight: 300;
  color: var(--noir);
  background: #fff;
  border: 1px solid rgba(183, 169, 154, .5);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(183, 169, 154, .18);
}
.champ textarea { min-height: 160px; resize: vertical; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-message { margin-top: 1rem; font-size: .9rem; display: none; }
.form-message.ok { display: block; color: #4a7c59; }
.form-message.erreur { display: block; color: #a2543f; }

/* ---------- Bandeau CTA ---------- */
.cta-bandeau {
  background: var(--brun);
  color: var(--blanc);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-bandeau::before {
  content: '';
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(ellipse at 30% 20%, rgba(232, 221, 210, .14), transparent 55%),
              radial-gradient(ellipse at 75% 85%, rgba(232, 221, 210, .1), transparent 50%);
}
.cta-bandeau > .container { position: relative; }
.cta-bandeau h2 { color: var(--blanc); margin-bottom: 1rem; }
.cta-bandeau p { max-width: 580px; margin: 0 auto 2.2rem; color: rgba(248, 246, 242, .85); }

/* ---------- Bande Instagram ---------- */
.insta-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
}
@media (max-width: 940px) { .insta-grille { grid-template-columns: repeat(3, 1fr); } }
.insta-grille a {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.insta-grille img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.insta-grille a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(108, 88, 76, .35);
  opacity: 0;
  transition: opacity var(--transition);
}
.insta-grille a:hover::after { opacity: 1; }
.insta-grille a:hover img { transform: scale(1.07); }

/* ---------- Suggestions (autres séances) ---------- */
.suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 940px) { .suggestions { grid-template-columns: 1fr; } }
.suggestion {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}
.suggestion img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.suggestion:hover img { transform: scale(1.06); }
.suggestion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(35, 30, 26, .72));
}
.suggestion figcaption {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 1.3rem 1.5rem;
  color: var(--blanc);
}
.suggestion figcaption strong {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 1.25rem;
  display: block;
}
.suggestion figcaption span {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sable);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 21, 18, .96);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.ouverte { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .5);
}
.lightbox button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: var(--blanc);
  font-size: 2rem;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--transition);
  padding: 1rem;
  line-height: 1;
}
.lightbox button:hover { opacity: 1; }
.lb-fermer { top: 1rem; right: 1.5rem; }
.lb-prec { left: .5rem; top: 50%; transform: translateY(-50%); }
.lb-suiv { right: .5rem; top: 50%; transform: translateY(-50%); }
.lb-legende {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  color: var(--sable);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lb-actions {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .8rem;
}
.lb-actions .btn { font-size: .68rem; padding: .55rem 1.2rem; }

/* ---------- Footer : brun chaud dans la DA, grain, logo ---------- */
.footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #4b3e33 0%, #342c25 52%, #221d18 100%);
  color: rgba(240, 231, 220, .78);
  padding: 5rem 0 2rem;
  font-size: .88rem;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 221, 210, .4), transparent);
}
.footer > .container { position: relative; z-index: 2; }
.footer h4 { color: var(--sable); font-size: 1.05rem; margin-bottom: 1.15rem; }
.footer a { color: rgba(240, 231, 220, .75); }
.footer a:hover { color: var(--sable); }
.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(232, 221, 210, .14);
}
.footer-grille > div:first-child::before {
  content: '';
  display: block;
  width: 108px;
  height: 86px;
  margin-bottom: 1.1rem;
  background: url('../img/logo.png') no-repeat left center / contain;
  opacity: .92;
}
@media (max-width: 820px) { .footer-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grille { grid-template-columns: 1fr; } }
.footer-nav { display: flex; flex-direction: column; gap: .55rem; }
.footer-bas {
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .76rem;
  opacity: .55;
}
.sociaux { display: flex; gap: 1rem; margin-top: 1.2rem; }
.sociaux a {
  width: 38px; height: 38px;
  border: 1px solid rgba(232, 221, 210, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.sociaux a:hover { background: var(--sable); border-color: var(--sable); color: #342c25; }
.sociaux svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Animations reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delai-1 { transition-delay: .12s; }
.reveal-delai-2 { transition-delay: .24s; }
.reveal-delai-3 { transition-delay: .36s; }

/* ============================================================
   Espace client (galerie privée) + Admin
   ============================================================ */
.espace-client { min-height: 100svh; padding: 8rem 0 4rem; }
.porte {
  max-width: 430px;
  margin: 6vh auto 0;
  background: #fff;
  padding: 2.9rem;
  border-radius: var(--radius);
  box-shadow: var(--ombre-forte);
  text-align: center;
}
.porte h1 { font-size: 1.8rem; margin-bottom: .4rem; }
.porte > p, .porte form + p { font-size: .9rem; margin-bottom: 1.6rem; }

.galerie-entete { text-align: center; margin-bottom: 2.6rem; }
.galerie-outils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.5rem;
}
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}
.photo-vignette {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
  background: var(--sable);
}
.photo-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.photo-vignette:hover img { transform: scale(1.04); }
.photo-vignette.selectionnee { outline: 3px solid var(--brun); outline-offset: -3px; }
.photo-actions {
  position: absolute;
  top: .6rem; right: .6rem;
  display: flex;
  gap: .4rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.photo-vignette:hover .photo-actions, .photo-vignette .photo-actions:has(.coeur.aime) { opacity: 1; }
@media (hover: none) { .photo-actions { opacity: 1; } }
.pastille {
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(248, 246, 242, .92);
  color: var(--noir);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: all var(--transition);
}
.pastille:hover { background: var(--brun); color: var(--blanc); }
.coeur.aime { background: var(--brun); color: var(--blanc); }
.progression {
  position: fixed;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  background: var(--noir);
  color: var(--blanc);
  padding: .8rem 1.6rem;
  border-radius: 30px;
  font-size: .85rem;
  z-index: 150;
  display: none;
}
.progression.active { display: block; }

/* ---------- Admin ---------- */
.admin-barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-liste { display: flex; flex-direction: column; gap: .8rem; }
.admin-galerie {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.admin-galerie.masquee { opacity: .55; }
.admin-galerie strong { font-family: var(--font-titre); font-size: 1.1rem; font-weight: 500; }
.admin-galerie .meta { font-size: .8rem; color: #8a8a8a; flex: 1; min-width: 200px; }
.admin-galerie .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tag {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--sable);
  color: var(--brun);
  border-radius: 20px;
  padding: .2rem .7rem;
}
.modale-fond {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(47, 47, 47, .5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 4rem 1rem;
}
.modale-fond.ouverte { display: flex; }
.modale {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 2.2rem;
  width: min(680px, 100%);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
}
.modale h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }
.admin-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}
.admin-photo { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.admin-photo img { width: 100%; height: 100%; object-fit: cover; }
.admin-photo button {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(47, 47, 47, .75);
  color: #fff;
  cursor: pointer;
  font-size: .75rem;
}
.admin-photo .fav-compte {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(108, 88, 76, .9);
  color: #fff;
  font-size: .68rem;
  border-radius: 10px;
  padding: .1rem .5rem;
}

/* ============================================================
   LE STUDIO : panel admin & espace client
   ============================================================ */
.studio { min-height: 100svh; padding: 7.5rem 0 4rem; }
.studio-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2.2rem;
}
.studio-stats { display: flex; gap: 1.6rem; }
.studio-stats span strong {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  color: var(--brun);
  display: block;
  line-height: 1.1;
}
.studio-stats span small {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}

.carte-studio {
  background: #fff;
  border: 1px solid rgba(183, 169, 154, .3);
  border-radius: 10px;
  box-shadow: var(--ombre);
  padding: 1.5rem 1.7rem;
  margin-bottom: 1rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte-studio:hover { box-shadow: var(--ombre-forte); }
.carte-studio .ligne {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.carte-studio strong.nom { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 500; }
.carte-studio .meta { font-size: .8rem; color: #8a8a8a; flex: 1; min-width: 180px; }
.carte-studio .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.acces {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--blanc);
  border: 1px dashed rgba(183, 169, 154, .6);
  border-radius: 8px;
  padding: .45rem .9rem;
  font-size: .82rem;
}
.acces code {
  font-family: 'Consolas', monospace;
  color: var(--brun);
  background: none;
}
.acces button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--taupe);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.acces button:hover { color: var(--brun); }

/* Interrupteur "accès payé" */
.interrupteur { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .78rem; color: var(--encre); }
.interrupteur input { display: none; }
.interrupteur .piste {
  width: 40px; height: 22px;
  border-radius: 20px;
  background: rgba(183, 169, 154, .4);
  position: relative;
  transition: background var(--transition);
}
.interrupteur .piste::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition);
}
.interrupteur input:checked + .piste { background: #7d9970; }
.interrupteur input:checked + .piste::after { transform: translateX(18px); }

/* Zone de dépôt ZIP / photos */
.depot {
  border: 2px dashed rgba(183, 169, 154, .55);
  border-radius: 12px;
  background: var(--blanc);
  padding: 2.2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.depot:hover, .depot.survol { border-color: var(--brun); background: #fff; }
.depot .icone { font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.depot p { font-size: .9rem; }
.depot small { font-size: .74rem; color: #9a9a9a; }
.depot input { display: none; }

.grille-photos-studio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .7rem;
  margin-top: 1.2rem;
}
.grille-photos-studio .vignette {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sable);
}
.grille-photos-studio img { width: 100%; height: 100%; object-fit: cover; }
.grille-photos-studio button {
  position: absolute;
  top: 5px; right: 5px;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(47, 40, 34, .78);
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.grille-photos-studio .vignette:hover button { opacity: 1; }
.section-photos h3 {
  font-size: 1.05rem;
  margin: 1.6rem 0 .3rem;
  color: var(--brun);
}

/* ---------- Espace client ---------- */
.client-entete { text-align: center; margin-bottom: 2.4rem; }
.client-entete .badge-type {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brun);
  background: var(--sable);
  border-radius: 20px;
  padding: .35rem 1.1rem;
  margin-top: .8rem;
}
.bandeau-verrou {
  max-width: 640px;
  margin: 0 auto 2rem;
  background: linear-gradient(150deg, rgba(232, 221, 210, .6), rgba(232, 221, 210, .3));
  border: 1px solid rgba(183, 169, 154, .5);
  border-radius: 10px;
  padding: 1.1rem 1.5rem;
  text-align: center;
  font-size: .88rem;
}
.galerie-verrouillee .photo-vignette::after {
  content: 'APERÇU · Meya Allione';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, .85);
  background: rgba(32, 27, 23, .18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.btn-verrouille { opacity: .45; pointer-events: none; position: relative; }

/* ---------- Impression ---------- */
#zone-impression { display: none; }
@media print {
  body.imprime > *:not(#zone-impression) { display: none !important; }
  body.imprime #zone-impression { display: block; }
  #zone-impression img { width: 100%; max-height: 95vh; object-fit: contain; page-break-after: always; }
}

/* ============================================================
   Modernité 2026
   ============================================================ */

/* Transitions de page natives (fondu doux entre les pages, MPA) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .35s; }
::view-transition-new(root) { animation-duration: .35s; }

/* Typographie intelligente */
h1, h2, h3 { text-wrap: balance; }
p, .faq-reponse, .accroche { text-wrap: pretty; }

/* Parallax natif piloté par le scroll (object-position : ne casse ni
   les zooms au survol ni les animations d'entrée) */
@supports (animation-timeline: view()) {
  .duo-image img,
  .banniere > img,
  .carte-img img,
  .suggestion img {
    animation: parallax-vue linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallax-vue {
    from { object-position: 50% 18%; }
    to { object-position: 50% 82%; }
  }
}