/* =========================================================
   Yaëlle Heloïse Photographe — feuille de style principale
   Palette : crème / sable / brun / vert sauge discret
   Display : Cormorant Garamond — Corps/UI : Jost
   ========================================================= */

:root{
  --creme:        #FAF6EF;
  --sable:        #EDE2D0;
  --sable-fonce:  #D9C7AC;
  --brun:         #4A3B2E;
  --brun-clair:   #665140;
  --sauge:        #8C9B7E;
  --sauge-fonce:  #52604A;
  --blanc:        #FFFFFF;
  --ombre:        rgba(74,59,46,0.10);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--creme);
  color:var(--brun);
  font-family:var(--font-body);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--brun);
  margin:0 0 .5em;
  letter-spacing:.01em;
}
h1{ font-size:clamp(2.4rem,5vw,4rem); font-style:italic; font-weight:500; line-height:1.08; }
h2{ font-size:clamp(1.7rem,3vw,2.5rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); }
p{ margin:0 0 1.1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 6vw; }
@media(min-width:1300px){ .container{ padding:0 40px; } }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--sauge-fonce);
  margin-bottom:1em;
}

/* --- signature : le trait-lien, motif récurrent qui symbolise le lien --- */
.trait{ width:64px; height:14px; margin:.4em 0 1.1em; }
.trait path{ fill:none; stroke:var(--sauge); stroke-width:1.4; stroke-linecap:round; }
.trait--center{ margin-left:auto; margin-right:auto; }

/* --- header --- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.97);
  border-bottom:1px solid var(--sable-fonce);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
}
.logo{ font-family:var(--font-display); font-style:italic; font-size:1.5rem; letter-spacing:.02em; display:inline-flex; align-items:center; }
.logo span{ color:var(--sauge-fonce); }
.logo-img{ display:block; height:34px; width:auto; transition:filter .3s ease; }
@media(max-width:600px){ .logo-img{ height:26px; } }
nav.main-nav{ display:flex; gap:2.1em; align-items:center; }
nav.main-nav a{
  font-size:.86rem; letter-spacing:.05em; text-transform:uppercase; font-weight:400;
  padding:.3em 0; border-bottom:1px solid transparent; transition:border-color .25s, color .25s;
}
nav.main-nav a:hover, nav.main-nav a:focus-visible{ border-color:var(--sauge); color:var(--sauge-fonce); }
.btn-nav-cta{
  border:1px solid var(--brun) !important; padding:.6em 1.3em !important;
  border-radius:var(--radius);
}
.nav-toggle{ display:none; background:none; border:none; font-family:var(--font-body); font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; color:var(--brun); cursor:pointer; }

@media(max-width:920px){
  nav.main-nav{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px; height:100vh;
    background:var(--creme); flex-direction:column; align-items:flex-start;
    padding:100px 8vw; gap:1.6em; transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--sable-fonce);
  }
  nav.main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* --- boutons --- */
.btn{
  display:inline-block; font-family:var(--font-body); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.85em 1.9em;
  border:1px solid var(--brun); border-radius:var(--radius);
  transition:background .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{ background:var(--brun); color:var(--creme); }
.btn-accent{ border-color:var(--sauge-fonce); background:var(--sauge); color:var(--blanc); }
.btn-accent:hover{ background:var(--sauge-fonce); border-color:var(--sauge-fonce); }
.btn-ghost{ border-color:var(--brun-clair); color:var(--brun-clair); }
.btn-ghost:hover{ background:var(--brun-clair); color:var(--creme); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1em; }

/* --- bouton d'envoi pendant le traitement du formulaire --- */
/* le clic reste possible visuellement mais le formulaire est verrouille :
   plus de double envoi quand la page met du temps a repondre */
.btn[disabled]{ cursor:progress; opacity:.72; }
.btn[disabled]:hover{ background:var(--sauge); border-color:var(--sauge-fonce); color:var(--blanc); }
.btn .spinner{
  display:inline-block; width:.85em; height:.85em; margin-right:.6em;
  vertical-align:-.08em; border:2px solid rgba(255,255,255,.45);
  border-top-color:var(--blanc); border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .btn .spinner{ animation-duration:2s; } }

/* --- hero --- */
.hero{ position:relative; padding:5.5em 0 4.5em; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:4vw; align-items:center; }
.hero-text .eyebrow{ }
.hero-lede{ font-size:1.08rem; color:var(--brun-clair); max-width:46ch; margin-bottom:1.6em; }
.hero-media{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; position:relative;
}
@media(max-width:880px){ .hero .container{ grid-template-columns:1fr; } .hero-media{ order:-1; aspect-ratio:16/11; } }

/* --- hero plein écran (accueil) --- */
.hero-full{
  min-height:100vh; min-height:100svh;
  padding:0;
  display:flex; align-items:center;
}
.hero-full .hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-full .hero-bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); animation:heroKenBurns 24s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%{ transform:scale(1) translate3d(0,0,0); }
  100%{ transform:scale(1.1) translate3d(-1%,-1%,0); }
}

/* --- carrousel hero (accueil) --- */
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.6s ease, visibility 0s linear 1.6s;
}
.hero-slide.active{ opacity:1; visibility:visible; transition:opacity 1.6s ease; }
.hero-slide picture{ display:block; width:100%; height:100%; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide.active img{ animation:heroSlideZoom 7.5s ease-out both; }
@keyframes heroSlideZoom{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to{ transform:scale(1.13) translate3d(-1%,-1%,0); }
}
.hero-dots{
  position:absolute; right:2.4em; bottom:2.2em;
  z-index:3; display:flex; gap:.55em;
}
/* mobile : points a droite pour ne pas croiser l'indicateur "Decouvrir" centre */
@media(max-width:700px){ .hero-dots{ right:1.4em; bottom:1.5em; } }
.hero-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.85); background:transparent; transition:background .3s;
}
.hero-dots button.active{ background:#fff; }
@media (prefers-reduced-motion: reduce){
  .hero-slide.active img{ animation:none; }
}
.hero-full .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,19,14,.60) 0%, rgba(24,19,14,.10) 24%, rgba(24,19,14,.08) 55%, rgba(24,19,14,.62) 100%);
}
/* padding-bottom : laisse la place a l'indicateur "Decouvrir" sous les boutons */
.hero-full .container{ position:relative; z-index:2; display:block; padding-top:85px; padding-bottom:6.4em; }
.hero-full .hero-text{ max-width:52ch; animation:heroTextIn 1.2s cubic-bezier(.22,.61,.36,1) both .1s; }
.hero-full .hero-text .btn-row{ justify-content:center; }
@keyframes heroTextIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-full .hero-text .eyebrow{ color:var(--sable); text-shadow:0 1px 10px rgba(0,0,0,.45); }
.hero-full h1{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.hero-full .trait path{ stroke:#fff; }
.hero-full .hero-lede{ color:rgba(255,255,255,.94); text-shadow:0 1px 10px rgba(0,0,0,.4); }
.hero-full .btn-on-photo{ border-color:rgba(255,255,255,.7); color:#fff; }
.hero-full .btn-on-photo:hover{ background:#fff; color:var(--brun); border-color:#fff; }

/* --- hero photo (pages intérieures : à propos) --- */
.hero-photo{
  position:relative; overflow:hidden;
  min-height:78vh; display:flex; align-items:flex-end;
  padding:0;
}
.hero-photo .hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-photo .hero-bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:heroKenBurns 26s ease-in-out infinite alternate;
}
.hero-photo .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,19,14,.45) 0%, rgba(24,19,14,.2) 38%, rgba(24,19,14,.32) 62%, rgba(24,19,14,.82) 100%);
}
.hero-photo .container{ position:relative; z-index:2; display:block; padding-top:4em; padding-bottom:6.4em; }
.hero-photo .btn-on-photo{ border-color:rgba(255,255,255,.8); color:#fff; background:rgba(0,0,0,.18); }
.hero-photo .btn-on-photo:hover{ background:#fff; color:var(--brun); border-color:#fff; }
.hero-photo .hero-text{ max-width:56ch; animation:heroTextIn 1.1s cubic-bezier(.22,.61,.36,1) both .1s; }
.hero-photo .eyebrow{ color:var(--sable); text-shadow:0 1px 10px rgba(0,0,0,.5); }
.hero-photo h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.5); }
.hero-photo .trait path{ stroke:#fff; }
.hero-photo .hero-lede{ color:rgba(255,255,255,.95); text-shadow:0 1px 12px rgba(0,0,0,.55); max-width:48ch; }
@media (prefers-reduced-motion: reduce){
  .hero-photo .hero-bg img{ animation:none; }
  .hero-photo .hero-text{ animation:none; opacity:1; transform:none; }
}

/* --- diplôme / repères --- */
.about-facts{ display:flex; flex-wrap:wrap; gap:1em; margin-top:1.8em; }
.about-fact{
  flex:1 1 150px; background:var(--sable-fonce); border-radius:var(--radius);
  padding:1.3em 1.2em; text-align:center;
}
.about-fact .fact-num{ font-family:var(--font-display); font-style:italic; font-size:1.9rem; color:var(--sauge-fonce); display:block; line-height:1.1; }
.about-fact .fact-label{ font-size:.82rem; color:var(--brun-clair); margin-top:.35em; display:block; letter-spacing:.02em; }

/* --- indice de scroll (hero accueil) --- */
.hero-scroll-cue{
  position:absolute; left:50%; bottom:2.2em; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6em;
  color:rgba(255,255,255,.85); font-family:var(--font-body);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  animation:cueFadeIn 1s ease 1.1s both;
}
.hero-scroll-cue .chevron{
  width:11px; height:11px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); animation:cueBounce 1.9s ease-in-out infinite;
}
@keyframes cueFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cueBounce{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }

/* --- révélation au scroll --- */
.reveal{ transition:opacity .85s ease, transform .85s ease; }
/* masque avant animation UNIQUEMENT si le JS tourne : sans JS, tout reste visible */
.js .reveal{ opacity:0; transform:translateY(30px); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.univers-grid .reveal:nth-child(1){ transition-delay:.05s; }
.univers-grid .reveal:nth-child(2){ transition-delay:.15s; }
.univers-grid .reveal:nth-child(3){ transition-delay:.25s; }
.univers-grid .reveal:nth-child(4){ transition-delay:.35s; }
.gallery .reveal:nth-child(1){ transition-delay:0s; }
.gallery .reveal:nth-child(2){ transition-delay:.08s; }
.gallery .reveal:nth-child(3){ transition-delay:.16s; }
.gallery .reveal:nth-child(4){ transition-delay:.24s; }
.gallery .reveal:nth-child(5){ transition-delay:.32s; }
.gallery .reveal:nth-child(6){ transition-delay:.4s; }

/* --- trait signature : se dessine au scroll --- */
/* le trait ne se cache que si le JS tourne ET que le trace est possible (pathLength) */
.js .trait path[pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.15s ease .1s; }
.trait.is-visible path{ stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce){
  .hero-full .hero-bg img{ animation:none; }
  .hero-full .hero-text{ animation:none; opacity:1; transform:none; }
  .hero-scroll-cue, .hero-scroll-cue .chevron{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .trait path{ transition:none; stroke-dashoffset:0; }
}
@media(max-width:880px){
  .hero-full{ align-items:flex-end; padding-bottom:1em; }
  .hero-full .container{ padding-bottom:5.4em; }
}

/* --- header transparent sur le hero plein écran (accueil) --- */
body.home .site-header{
  position:fixed; top:0; left:0; right:0;
  background:transparent; border-bottom-color:transparent;
  transition:background .3s ease, border-color .3s ease;
}
body.home .site-header .logo{ color:#fff; }
body.home .site-header .logo span{ color:var(--sable); }
body.home .site-header .nav-toggle{ color:#fff; }
/* logo brun -> blanc tant que l'entete est transparent sur la photo */
body.home .site-header .logo-img{ filter:brightness(0) invert(1); }
body.home .site-header.solid{ background:rgba(250,246,239,.97); border-bottom-color:var(--sable-fonce); }
body.home .site-header.solid .logo{ color:var(--brun); }
body.home .site-header.solid .logo span{ color:var(--sauge-fonce); }
body.home .site-header.solid .logo-img{ filter:none; }
body.home .site-header.solid .nav-toggle{ color:var(--brun); }
@media(min-width:921px){
  body.home .site-header nav.main-nav a{ color:#fff; }
  body.home .site-header nav.main-nav a:hover{ color:var(--sable); border-color:#fff; }
  body.home .site-header .btn-nav-cta{ border-color:#fff !important; color:#fff; }
  body.home .site-header.solid nav.main-nav a{ color:var(--brun); }
  body.home .site-header.solid nav.main-nav a:hover{ color:var(--sauge-fonce); border-color:var(--sauge); }
  body.home .site-header.solid .btn-nav-cta{ border-color:var(--brun) !important; color:var(--brun); }
}

/* --- placeholders photo (à remplacer par les vraies photos) --- */
.ph{
  width:100%; height:100%; position:relative; display:flex; align-items:flex-end;
  background:linear-gradient(155deg,var(--sable) 0%, var(--sable-fonce) 60%, var(--brun-clair) 130%);
  min-height:220px;
}
.ph::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
}
.ph-label{
  position:relative; z-index:1; margin:0 0 0 0; padding:.9em 1.1em; font-size:.72rem;
  letter-spacing:.03em; color:var(--creme); background:rgba(74,59,46,.55); width:100%;
  font-family:var(--font-body); line-height:1.5;
}
.ph-square{ aspect-ratio:1/1; }
.ph-portrait{ aspect-ratio:3/4; }
.ph-wide{ aspect-ratio:16/9; }
.ph-tall{ aspect-ratio:4/5; }

/* --- média large immersif --- */
.media-wide{ border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px -22px rgba(74,59,46,.5); }
.media-wide .ph{ min-height:0; }

/* --- photos réelles (remplacent les .ph) --- */
.ph.has-photo{ background:none; }
.ph.has-photo::after{ content:none; }
.ph.has-photo picture{ width:100%; height:100%; display:block; }
.photo{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- bandeau plein largeur --- */
.band{ padding:5em 0; }
.band-alt{ background:var(--sable); }
.band-title{ max-width:60ch; }
.band-title.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* --- univers / cartes --- */
.univers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; margin-top:2.8em; }
@media(max-width:980px){ .univers-grid{ grid-template-columns:repeat(2,1fr); gap:1.1em; } }
@media(max-width:560px){ .univers-grid{ grid-template-columns:1fr; } }
.univers-card{
  display:block; position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:0 10px 26px -16px rgba(74,59,46,.4);
  transition:transform .35s ease, box-shadow .35s ease, opacity .4s ease, filter .4s ease;
}
.univers-card:hover, .univers-card:focus-visible{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 22px 44px -18px rgba(74,59,46,.5);
}
@media(hover:hover){
  .univers-grid:hover .univers-card{ opacity:.6; filter:saturate(.65) brightness(.94); }
  .univers-grid:hover .univers-card:hover, .univers-grid:hover .univers-card:focus-visible{
    opacity:1; filter:none;
  }
}
.univers-card .ph-univers{ aspect-ratio:3/4; }
.univers-card .photo{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.univers-card:hover .photo, .univers-card:focus-visible .photo{ transform:scale(1.07); }
.univers-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,12,0) 38%, rgba(20,16,12,.72) 100%);
  transition:background .35s ease;
}
.univers-card:hover .univers-scrim, .univers-card:focus-visible .univers-scrim{
  background:linear-gradient(180deg, rgba(20,16,12,.12) 0%, rgba(20,16,12,.8) 100%);
}
.univers-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.7em 1.4em 1.5em;
}
.univers-content h3{ color:#fff; margin-bottom:.3em; }
.univers-content p{
  font-size:.86rem; color:rgba(255,255,255,.88); margin-bottom:.7em; max-width:24ch;
  line-height:1.5;
}
.univers-content .lien{
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px;
}
@media(max-width:560px){ .univers-card .ph-univers{ aspect-ratio:4/5; } }

/* --- galerie / grille portfolio --- */
.tabs{ display:flex; flex-wrap:wrap; gap:.6em 1em; margin:2em 0 2.6em; border-bottom:1px solid var(--sable-fonce); padding-bottom:1.4em; }
.tab-btn{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding:.5em 1em;
  border:1px solid var(--sable-fonce); border-radius:20px; background:var(--blanc); cursor:pointer;
  color:var(--brun-clair); transition:all .2s;
}
.tab-btn.active, .tab-btn:hover{ background:var(--sauge); color:var(--blanc); border-color:var(--sauge); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1em; }
@media(max-width:820px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.gallery .ph:nth-child(3n+1){ grid-row:span 2; aspect-ratio:auto; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-intro{ max-width:64ch; color:var(--brun-clair); font-style:italic; font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.6em; }

/* --- tarifs --- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em; margin-top:2em; }
@media(max-width:880px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:0 10px 26px -16px rgba(74,59,46,.45);
  transition:transform .35s ease, box-shadow .35s ease;
}
.price-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -18px rgba(74,59,46,.55); }
.price-card .ph-price{ aspect-ratio:3/4; }
.price-card .photo{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.price-card:hover .photo{ transform:scale(1.07); }
.price-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,12,0) 8%, rgba(20,16,12,.38) 42%, rgba(20,16,12,.94) 100%);
  transition:background .35s ease;
}
.price-card:hover .price-scrim{
  background:linear-gradient(180deg, rgba(20,16,12,.1) 0%, rgba(20,16,12,.45) 42%, rgba(20,16,12,.96) 100%);
}
.price-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.7em 1.5em 1.6em; }
.price-card h3{ font-style:italic; color:#fff; margin-bottom:.05em; }
.price-card .prix{ font-family:var(--font-display); font-size:2rem; color:var(--sable); margin:.1em 0 .65em; }
.price-card ul{ list-style:none; padding:0; margin:0 0 1.3em; font-size:.85rem; color:rgba(255,255,255,.88); }
.price-card li{ padding:.3em 0; border-top:1px solid rgba(255,255,255,.22); }
.price-card li:first-child{ border-top:none; }
.price-card .btn-ghost.btn-on-photo{
  background:rgba(0,0,0,.16); border-color:rgba(255,255,255,.85); color:#fff;
}
.price-card .btn-ghost.btn-on-photo:hover{ background:#fff; color:var(--brun); }
.price-block-title{ margin-top:3em; }

/* --- étapes / process --- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6em; margin-top:2.5em; }
@media(max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; } }
.steps--stacked{ grid-template-columns:repeat(2,1fr); gap:1.6em 1.3em; margin-top:1.8em; }
@media(max-width:560px){ .steps--stacked{ grid-template-columns:1fr; } }
.step .num{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--sauge); margin-bottom:.3em; display:block; }

/* --- étapes en blocs sombres et animés --- */
.steps--dark{ grid-template-columns:repeat(2,1fr); gap:1.3em; margin-top:1.8em; }
@media(max-width:560px){ .steps--dark{ grid-template-columns:1fr; } }
.steps--dark .step{
  background:var(--brun); border-radius:var(--radius); padding:1.9em 1.7em;
  box-shadow:0 10px 26px -16px rgba(74,59,46,.5);
  opacity:0; transform:translateY(22px);
  animation:stepFadeIn .75s cubic-bezier(.22,.61,.36,1) forwards;
  transition:transform .35s ease, box-shadow .35s ease;
}
.steps--dark .step:hover{ transform:translateY(-6px); box-shadow:0 22px 42px -18px rgba(40,32,24,.55); }
.steps--dark .step:nth-child(1){ animation-delay:.05s; }
.steps--dark .step:nth-child(2){ animation-delay:.18s; }
.steps--dark .step:nth-child(3){ animation-delay:.31s; }
.steps--dark .step:nth-child(4){ animation-delay:.44s; }
@keyframes stepFadeIn{ to{ opacity:1; transform:translateY(0); } }
.steps--dark .step .num{ color:var(--sauge); }
.steps--dark .step h3{ color:var(--creme); }
.steps--dark .step p{ color:rgba(250,246,239,.82) !important; }
@media (prefers-reduced-motion: reduce){
  .steps--dark .step{ animation:none; opacity:1; transform:none; }
}

/* --- étapes en cartes vert foncé avec icônes --- */
.steps--green{ grid-template-columns:repeat(4,1fr); gap:1.3em; margin-top:2.5em; }
@media(max-width:880px){ .steps--green{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .steps--green{ grid-template-columns:1fr; } }
.steps--green .step{
  background:var(--sauge-fonce); border-radius:var(--radius); padding:2em 1.6em;
  text-align:center; box-shadow:0 12px 28px -18px rgba(40,50,34,.6);
  transition:transform .4s ease, box-shadow .4s ease, opacity .6s ease;
}
/* masque avant animation UNIQUEMENT si le JS tourne */
.js .steps--green .step{ opacity:0; transform:translateY(24px); }
.steps--green .step.is-visible{ opacity:1; transform:translateY(0); }
.steps--green-3{ grid-template-columns:repeat(3,1fr); max-width:920px; margin-left:auto; margin-right:auto; }
@media(max-width:820px){ .steps--green-3{ grid-template-columns:1fr; } }
.steps--green .step:nth-child(1){ transition-delay:.05s; }
.steps--green .step:nth-child(2){ transition-delay:.16s; }
.steps--green .step:nth-child(3){ transition-delay:.27s; }
.steps--green .step:nth-child(4){ transition-delay:.38s; }
.steps--green .step:hover{ transform:translateY(-7px); box-shadow:0 24px 44px -18px rgba(30,40,26,.68); }
.step-icon{
  width:52px; height:52px; margin:0 auto 1em; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.14);
}
.step-icon svg{ width:26px; height:26px; stroke:var(--creme); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.steps--green .step .num{ color:rgba(255,255,255,.55); font-size:1.1rem; margin-bottom:.15em; }
.steps--green .step h3{ color:#fff; margin-bottom:.45em; font-size:1.15rem; }
.steps--green .step p{ color:rgba(250,246,239,.85) !important; font-size:.9rem; }
@media (prefers-reduced-motion: reduce){
  .steps--green .step{ opacity:1; transform:none; transition:none; }
}

/* --- carrousel photo défilant (pages univers) --- */
.photo-marquee{
  margin:2.4em 0 1em; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.photo-track{ display:flex; width:max-content; animation:photoScroll 62s linear infinite; }
.photo-marquee:hover .photo-track, .photo-marquee:focus-within .photo-track{ animation-play-state:paused; }
@keyframes photoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.photo-item{
  flex:0 0 auto; width:290px; aspect-ratio:3/4; margin-right:1em;
  border-radius:var(--radius); overflow:hidden; position:relative; display:block;
  box-shadow:0 12px 28px -18px rgba(74,59,46,.55);
}
.photo-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.photo-item:hover img{ transform:scale(1.07); }
.photo-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,12,0) 55%, rgba(20,16,12,.45) 100%);
}
@media(max-width:700px){ .photo-item{ width:205px; } .photo-track{ animation-duration:45s; } }
@media (prefers-reduced-motion: reduce){
  .photo-track{ animation:none; }
  .photo-marquee{ overflow-x:auto; }
}

/* --- bandeau Instagram défilant --- */
.insta-band{ overflow:hidden; }
.insta-handle{
  font-family:var(--font-body); font-size:.92rem; letter-spacing:.04em;
  color:var(--sauge-fonce); margin-top:.2em;
}
.insta-marquee{
  margin:2.2em 0 2em; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.insta-track{ display:flex; width:max-content; animation:instaScroll 48s linear infinite; }
.insta-marquee:hover .insta-track, .insta-marquee:focus-within .insta-track{ animation-play-state:paused; }
@keyframes instaScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.insta-item{
  flex:0 0 auto; width:232px; aspect-ratio:1/1; margin-right:.9em;
  border-radius:var(--radius); overflow:hidden; position:relative; display:block;
  box-shadow:0 10px 24px -18px rgba(74,59,46,.5);
}
.insta-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.insta-item:hover img, .insta-item:focus-visible img{ transform:scale(1.07); }
.insta-item::after{
  content:''; position:absolute; inset:0; background:rgba(20,16,12,0);
  transition:background .35s ease;
}
.insta-item:hover::after, .insta-item:focus-visible::after{ background:rgba(20,16,12,.28); }
.insta-item .insta-glyph{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s ease;
}
.insta-item:hover .insta-glyph, .insta-item:focus-visible .insta-glyph{ opacity:1; }
.insta-item .insta-glyph svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.6; }
@media(max-width:700px){ .insta-item{ width:168px; } .insta-track{ animation-duration:36s; } }
@media (prefers-reduced-motion: reduce){
  .insta-track{ animation:none; }
  .insta-marquee{ overflow-x:auto; }
}

/* --- citation / accroche --- */
.quote{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem);
  max-width:32ch; margin:0 auto; text-align:center; color:var(--brun);
}

/* --- bandeau citation avec photo (accueil) --- */
.quote-band{
  position:relative; overflow:hidden;
  min-height:56vh;
  display:flex; align-items:center; justify-content:center;
  padding:4em 0;
}
.quote-band .quote-bg{ position:absolute; inset:0; z-index:0; }
.quote-band .quote-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.quote-band .quote-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,12,.5) 0%, rgba(20,16,12,.42) 50%, rgba(20,16,12,.58) 100%);
}
.quote-band .container{ position:relative; z-index:2; }
.quote-band .quote{
  color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.4);
  max-width:34ch;
}
.quote-band .band-title{ text-shadow:0 2px 18px rgba(0,0,0,.4); }
.quote-band p{ text-shadow:0 1px 10px rgba(0,0,0,.4); }
.quote-band .btn-ghost.btn-on-photo{
  background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.85); color:#fff;
}
.quote-band .btn-ghost.btn-on-photo:hover{ background:#fff; color:var(--brun); }
@media(max-width:700px){ .quote-band{ min-height:46vh; padding:3.4em 0; } }

/* --- FAQ --- */
.faq-item{ border-top:1px solid var(--sable-fonce); padding:1.5em 0; }
.faq-item:last-child{ border-bottom:1px solid var(--sable-fonce); }
.faq-item summary{ cursor:pointer; font-family:var(--font-display); font-size:1.2rem; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.4rem; color:var(--sauge-fonce); margin-left:1em; transition:transform .25s; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ margin-top:1em; color:var(--brun-clair); max-width:60ch; }

/* --- FAQ contrastée, fond vert clair --- */
.band-faq{ background:#DCE6D2; }
.band-faq .eyebrow{ color:var(--sauge-fonce); }
.band-faq h2{ color:var(--brun); }
.band-faq .faq-item{ border-top:1px solid #B9CBA6; }
.band-faq .faq-item:last-child{ border-bottom:1px solid #B9CBA6; }
.band-faq .faq-item summary{ color:var(--brun); font-weight:600; }
.band-faq .faq-item summary::after{ color:var(--sauge-fonce); }
.band-faq .faq-item p{ color:#3C4A34; }

/* --- carte zone --- */
.zone-list{ display:flex; flex-wrap:wrap; gap:.6em; margin-top:1.6em; }
.zone-pill{
  font-size:.82rem; padding:.5em 1.1em; border:1px solid var(--sauge);
  border-radius:20px; color:var(--sauge-fonce); background:rgba(140,155,126,.13);
}
.zone-map{ display:flex; align-items:center; justify-content:center; }
.zone-sketch{ width:100%; max-width:280px; height:auto; }
@media(max-width:700px){ .zone-map{ display:none; } }

/* --- formulaire --- */
form.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.3em 1.6em; margin-top:2em; }
form.contact-form .full{ grid-column:1 / -1; }
@media(max-width:700px){ form.contact-form{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--brun-clair); margin-bottom:.5em; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--brun);
  background:var(--blanc); border:1px solid var(--sable-fonce); border-radius:var(--radius);
  padding:.85em 1em;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--sauge); outline-offset:1px; }

/* --- footer --- */
.site-footer{ background:var(--brun); color:var(--creme); padding:4em 0 2em; }
.site-footer a:hover{ color:var(--sauge); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5em; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--creme); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-body); font-weight:500; }
.site-footer .logo{ color:var(--creme); }
.site-footer .logo span{ color:#C9D3BF; }
/* fond brun du footer : logo en blanc */
.site-footer .logo-img{ filter:brightness(0) invert(1); height:38px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.6em; font-size:.92rem; opacity:.9; }
.footer-bottom{ margin-top:3em; padding-top:1.6em; border-top:1px solid rgba(250,246,239,.18); font-size:.8rem; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em; }

/* --- utilitaires --- */
.mt-0{ margin-top:0 !important; }
.center{ text-align:center; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3vw; align-items:center; }
@media(max-width:880px){ .two-col{ grid-template-columns:1fr; } }

/* --- page contact --- */
.contact-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:3vw; align-items:start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:2.5em; } }
.contact-card{
  background:var(--blanc); border:1px solid var(--sable-fonce); border-radius:var(--radius);
  padding:2.5em 2.3em 2.6em; box-shadow:0 20px 48px -30px rgba(74,59,46,.5);
}
@media(max-width:560px){ .contact-card{ padding:1.8em 1.4em 2em; } }
.contact-card form.contact-form{ margin-top:1.6em; }
.contact-card .btn{ width:100%; text-align:center; }
.contact-aside{ position:sticky; top:100px; }
@media(max-width:900px){ .contact-aside{ position:static; } }
.contact-media{ border-radius:var(--radius); overflow:hidden; margin-bottom:1.8em; box-shadow:0 16px 36px -24px rgba(74,59,46,.5); }
.contact-media .ph{ aspect-ratio:3/4; min-height:0; }
.info-item{ display:flex; gap:1em; align-items:flex-start; padding:1.15em 0; border-top:1px solid var(--sable-fonce); }
.info-item:first-of-type{ border-top:none; padding-top:.2em; }
.info-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--sauge-fonce); display:flex; align-items:center; justify-content:center;
}
.info-icon svg{ width:20px; height:20px; stroke:var(--creme); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.info-item h3{ font-size:1.02rem; margin-bottom:.2em; }
.info-item p{ font-size:.92rem; color:var(--brun-clair); margin:0; line-height:1.55; }
.two-col.reverse .col-media{ order:-1; }
@media(min-width:881px){ .two-col.reverse .col-media{ order:2; } }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }