:root{
  --cream:#fbf7ef;
  --cream-2:#f6eee4;
  --ink:#2e211a;
  --soft-ink:#49382f;
  --terracotta:#a7644c;
  --terracotta-dark:#8f503c;
  --line:#e5c7b5;
  --paper:rgba(250,244,234,.84);
  --shadow:0 28px 80px rgba(91,64,45,.10);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
strong{font-weight:700;color:#201510}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  min-height:112px;
  padding:24px clamp(24px,4vw,62px) 20px;
  background:rgba(251,247,239,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(167,100,76,.10);
}
.logo{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-family:var(--serif);
  font-size:clamp(34px,3.05vw,54px);
  line-height:.9;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.logo-dot{
  color:var(--terracotta);
  font-size:.76em;
  line-height:1;
  transform:translateY(-1px);
  margin-left:1px;
}
.baseline{
  margin:16px 0 0;
  color:var(--terracotta-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.42em;
  line-height:1.1;
  text-transform:uppercase;
}
.baseline span{margin:0 .62em;color:var(--terracotta)}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(24px,2.4vw,40px);
  font-family:var(--serif);
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}
.main-nav a{transition:color .25s ease}
.main-nav a:hover{color:var(--terracotta)}

/* Hero */
.hero{
  position:relative;
  height:clamp(470px,46vw,660px);
  overflow:hidden;
  background:#dcc6b0;
}
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 56%;
  transform:scale(.88);
  filter:saturate(.90) brightness(1.08) contrast(.95);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(251,247,239,.12),rgba(251,247,239,.25));
}
.hero-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:170px 24px 44px;
  z-index:1;
}
.hero blockquote{
  margin:0;
  max-width:1280px;
  color:var(--terracotta);
  font-family:var(--serif);
  font-size:clamp(42px,5.25vw,86px);
  font-style:italic;
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.02em;
  text-align:center;
  text-wrap:balance;
}
.quote-mark{
  display:inline-block;
  color:var(--terracotta);
  font-style:normal;
  font-weight:600;
  font-size:1.28em;
  line-height:0;
  vertical-align:-.13em;
  opacity:.96;
}

/* Sections */
.section{padding:clamp(66px,7vw,116px) clamp(24px,4vw,68px)}
.section-inner{width:min(1400px,100%);margin-inline:auto}
h1,h2{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.035em;
}
h1{font-size:clamp(48px,5.9vw,82px)}
h2{font-size:clamp(42px,4.4vw,66px)}
p{margin:0 0 1.35em}

/* Mon parcours */
.parcours{background:linear-gradient(180deg,#fffaf2 0%,var(--cream) 100%)}
.parcours-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,.78fr);
  gap:clamp(54px,8vw,142px);
  align-items:start;
}
.title-row{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:start;
  column-gap:18px;
  margin-bottom:34px;
}
.big-quote{
  grid-column:1;
  color:var(--terracotta);
  font-family:var(--serif);
  font-size:76px;
  font-weight:600;
  line-height:.6;
  margin-top:-2px;
}
.title-row h1{grid-column:2;margin-top:19px}
.columns{
  column-count:2;
  column-gap:clamp(42px,5vw,82px);
  max-width:890px;
  padding-left:60px;
}
.columns p{break-inside:avoid;font-size:15.25px;line-height:1.63}
.portrait-wrap{
  position:relative;
  margin:24px auto 0;
  width:min(430px,100%);
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
  padding:13px;
}
.portrait-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  background:#fff;
}

/* Services */
.services{padding-top:72px;padding-bottom:74px;border-top:1px solid rgba(167,100,76,.055)}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,120px);
  align-items:center;
}
.organic-photo{
  position:relative;
  margin:0;
  filter:drop-shadow(0 26px 55px rgba(94,65,42,.085));
}
.organic-photo::before,
.organic-bg::before{
  content:"";
  position:absolute;
  z-index:-1;
  background:rgba(246,235,220,.62);
}
.organic-photo::before{inset:-32px -42px;border-radius:54% 46% 52% 48% / 46% 56% 44% 54%}
.organic-photo img{
  width:100%;
  height:clamp(405px,34vw,560px);
  object-fit:cover;
}
.photo-soins img{
  border-radius:44% 56% 50% 50% / 34% 44% 56% 66%;
  object-position:center 50%;
}
.photo-soins::before{border-radius:45% 55% 52% 48% / 35% 42% 58% 65%}
.photo-cartes img{
  height:clamp(390px,31vw,515px);
  border-radius:52% 48% 52% 48% / 50% 54% 46% 50%;
  object-position:center;
}
.photo-cartes::before{border-radius:55% 45% 50% 50% / 47% 55% 45% 53%;opacity:.84}
.photo-caption{
  margin:24px 0 0;
  color:var(--terracotta);
  font-family:var(--serif);
  max-width:760px;
  padding-left:40px;
}
.photo-caption em{
  display:block;
  white-space:nowrap;
  font-size:clamp(24px,2.15vw,36px);
  line-height:1;
}
.photo-caption span{
  display:block;
  width:max-content;
  margin:8px 12% 0 auto;
  font-family:var(--serif);
  font-size:17px;
  font-style:italic;
}
.text-card{position:relative;padding:clamp(30px,4vw,62px)}
.organic-bg::before{
  inset:0;
  border-radius:57% 43% 56% 44% / 40% 58% 42% 60%;
  background:rgba(250,244,234,.80);
}
.service-title{display:flex;align-items:flex-start;gap:18px;margin-bottom:34px}
.star{color:var(--terracotta);font-size:29px;line-height:1;margin-top:8px}
.text-card p{font-size:15.25px;line-height:1.70;margin-bottom:1.12em}
.guidances{padding-top:54px}
.guidance-card{padding-left:28px}
.guidance-card p{font-weight:400}

/* Contact */
.contact-section{
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:grid;
  place-items:center;
  padding:72px 24px 66px;
  border-top:1px solid rgba(167,100,76,.08);
}
.contact-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  opacity:.90;
  filter:saturate(.92) brightness(1.06);
}
.contact-section::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(251,247,239,.18);
}
.contact-content{
  position:relative;
  z-index:1;
  width:min(1160px,100%);
  text-align:center;
}
.contact-content blockquote{margin:0 0 28px;color:var(--terracotta);font-family:var(--serif)}
.contact-content blockquote em{
  display:block;
  font-size:clamp(31px,3.8vw,58px);
  line-height:1;
  white-space:nowrap;
}
.contact-content cite{
  display:block;
  width:max-content;
  margin:8px 16% 0 auto;
  font-size:18px;
  font-style:italic;
}
.contact-content h2{font-size:clamp(34px,2.8vw,46px);margin-bottom:24px}
.contact-list{
  display:flex;
  justify-content:center;
  gap:clamp(22px,5vw,76px);
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0 0 28px;
  font-size:14px;
}
.contact-list a{border-bottom:1px solid rgba(167,100,76,.35)}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  min-height:54px;
  padding:14px 30px;
  border-radius:999px;
  background:var(--terracotta);
  color:#fffaf2;
  font-weight:700;
  font-size:14px;
  box-shadow:0 16px 36px rgba(145,84,63,.18);
  transition:transform .2s ease,background .2s ease;
}
.button:hover{background:var(--terracotta-dark);transform:translateY(-1px)}

@media (max-width:1100px){
  .site-header{align-items:flex-start;flex-direction:column;min-height:auto;gap:16px}
  .main-nav{gap:22px;overflow-x:auto;width:100%;padding-bottom:4px}
  .parcours-grid,.split{grid-template-columns:1fr}
  .portrait-wrap{width:min(390px,78vw);margin-top:0}
  .columns{column-count:1;max-width:760px;padding-left:0}
  .title-row{grid-template-columns:40px 1fr}
  .split-photo-left .organic-photo{order:2}.split-photo-left .text-card{order:1}
  .photo-caption em,.contact-content blockquote em{white-space:normal}
  .photo-caption{padding-left:0}.photo-caption span{margin-right:10%}
  .contact-content cite{margin-right:10%}
}
@media (max-width:700px){
  body{font-size:15px}
  .site-header{padding:20px}
  .logo{font-size:34px}
  .baseline{font-size:10px;letter-spacing:.22em;line-height:1.5}
  .main-nav{font-size:17px}
  .hero{height:520px}
  .hero-img{transform:scale(1.02)}
  .hero-overlay{padding:90px 20px 38px}
  .hero blockquote{font-size:clamp(36px,11vw,52px)}
  .hero blockquote br{display:none}
  .section{padding:56px 20px}
  .title-row{grid-template-columns:34px 1fr;column-gap:10px;margin-bottom:26px}.big-quote{font-size:54px}.title-row h1{margin-top:12px}
  h1{font-size:50px} h2{font-size:43px}
  .text-card{padding:28px 0}.organic-bg::before{inset:-12px -18px}
  .organic-photo img{height:360px}
  .photo-caption em{font-size:27px;line-height:1.08}
  .photo-caption span{margin:6px 3% 0 auto}
  .contact-section{padding:64px 20px}
  .contact-list{display:grid;gap:12px}
}

/* =========================
   V5 — ajustements validés
   ========================= */

/* Hero : image en bandeau pleine largeur */
.hero{
  height:clamp(520px,50vw,760px);
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.hero-media{
  position:absolute;
  inset:0;
  opacity:0;
  animation:heroReveal 1.35s cubic-bezier(.22,.75,.2,1) .08s forwards;
}
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  filter:saturate(.90) brightness(1.08) contrast(.95);
  transform:scale(1);
  animation:heroBreath 28s ease-in-out 1.35s infinite alternate;
  will-change:transform;
}
.hero-overlay{padding-top:210px}
.hero blockquote{
  opacity:0;
  transform:translateY(12px);
  animation:quoteReveal 1s ease .48s forwards;
  font-size:clamp(40px,5vw,80px);
}
@keyframes heroReveal{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:scale(1)}
}
@keyframes heroBreath{
  from{transform:scale(.90)}
  to{transform:scale(.925)}
}
@keyframes quoteReveal{
  to{opacity:1;transform:translateY(0)}
}

/* Mon parcours : alignements */
.title-row{
  grid-template-columns:42px 1fr;
  column-gap:18px;
  margin-bottom:34px;
}
.big-quote{margin-top:-14px;opacity:.92}
.title-row h1{margin-top:10px}
.columns{padding-left:60px}
.portrait-wrap{
  /* Position validée : le portrait n'est plus aligné tout en haut,
     il descend pour s'installer au centre visuel du bloc texte. */
  margin:clamp(92px,7vw,128px) auto 0;
  align-self:start;
}

/* Services : légende éditoriale sous la photo */
.photo-caption{
  margin-top:22px;
  padding-left:0;
  color:var(--terracotta);
}
.photo-caption em{
  font-weight:500;
  letter-spacing:-.02em;
}
.photo-caption span{
  margin-top:2px;
  margin-right:3%;
  font-size:17px;
  color:var(--terracotta-dark);
}

/* Contact : composition épurée */
.contact-section{
  min-height:560px;
  padding:96px 24px 86px;
}
.contact-bg{opacity:.92;object-position:center 50%}
.contact-section::after{background:rgba(251,247,239,.25)}
.contact-content{
  width:min(1120px,100%);
  display:grid;
  justify-items:center;
}
.contact-content blockquote{
  margin:0 0 48px;
  color:var(--terracotta);
  font-family:var(--serif);
  text-align:center;
}
.contact-content blockquote em{
  display:block;
  font-size:clamp(38px,4.1vw,64px);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.025em;
  white-space:normal;
}
.contact-content cite{
  display:block;
  width:max-content;
  margin:8px 3% 0 auto;
  font-size:18px;
  font-style:italic;
  color:var(--terracotta-dark);
}
.contact-content h2{display:none}
.contact-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(190px,1fr));
  gap:clamp(22px,3vw,44px);
  width:min(920px,100%);
  margin:0 0 38px;
  padding:0;
  list-style:none;
  text-align:center;
}
.contact-list li{
  display:grid;
  gap:7px;
  justify-items:center;
}
.contact-label{
  display:block;
  color:rgba(46,33,26,.58);
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.contact-list a{
  color:var(--soft-ink);
  border-bottom:1px solid rgba(167,100,76,.28);
  font-size:14px;
}
.button{min-width:238px}

/* Footer discret */
.site-footer{
  padding:42px 24px 46px;
  background:#f6eee4;
  border-top:1px solid rgba(167,100,76,.10);
  color:rgba(46,33,26,.64);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.65;
  text-align:center;
}
.site-footer p{margin:0 0 4px}
.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.footer-links a{border-bottom:1px solid rgba(167,100,76,.22)}
.footer-credits{margin-top:18px}
.footer-credits strong{
  font-weight:700;
  color:rgba(46,33,26,.72);
}

@media (max-width:1100px){
  .hero-overlay{padding-top:160px}
  .portrait-wrap{margin-top:0}
  .contact-list{grid-template-columns:1fr;gap:18px}
}
@media (max-width:700px){
  .hero{height:560px}
  .hero-media{animation:heroReveal 1.2s ease .05s forwards}
  .hero-img{transform:scale(1);animation:heroBreathMobile 24s ease-in-out 1.2s infinite alternate}
  @keyframes heroBreathMobile{from{transform:scale(1)}to{transform:scale(1.02)}}
  .hero-overlay{padding:120px 20px 44px}
  .hero blockquote{font-size:clamp(34px,10vw,50px)}
  .hero blockquote br{display:block}
  .columns{padding-left:0}
  .contact-section{min-height:620px;padding:78px 20px 70px}
  .contact-content blockquote{margin-bottom:36px}
  .contact-content blockquote em{font-size:clamp(34px,9.5vw,46px)}
  .contact-content cite{margin-right:0;font-size:17px}
}

/* Pages légales */
.legal-page{
  background:linear-gradient(180deg,#fffaf2 0%,var(--cream) 100%);
  padding:clamp(72px,8vw,130px) 24px;
}
.legal-inner{
  width:min(820px,100%);
  margin-inline:auto;
}
.legal-inner h1{
  margin-bottom:46px;
  color:var(--terracotta);
}
.legal-inner h2{
  margin:38px 0 14px;
  font-size:clamp(32px,3vw,46px);
}
.legal-inner p{
  color:var(--soft-ink);
  font-size:16px;
  line-height:1.75;
}
.legal-inner a{border-bottom:1px solid rgba(167,100,76,.28)}


/* V5 bis — citation sous la photo des guidances */
.photo-cartes .photo-caption{
  max-width: 860px;
  margin-top: 22px;
  padding-left: 0;
  text-align: center;
}
.photo-cartes .photo-caption em{
  display:block;
  white-space: nowrap;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.015em;
}
.photo-cartes .photo-caption span{
  display:block;
  width:max-content;
  margin: 3px 7% 0 auto;
  font-size: 16px;
  color: var(--terracotta-dark);
}

/* Micro-ajustement — auteur de la citation soins */
.photo-soins .photo-caption span{
  margin-top: 3px;
  margin-right: 6%;
}

@media (max-width: 900px){
  .photo-cartes .photo-caption em{white-space: normal;}
  .photo-cartes .photo-caption span{margin-right: 4%;}
}

/* Ajustement final — auteur sous la citation Soins */
.photo-soins .photo-caption{
  width: max-content;
  max-width: 100%;
  margin-left: clamp(34px, 5vw, 82px);
  text-align: left;
}
.photo-soins .photo-caption em{
  display:block;
  white-space: nowrap;
}
.photo-soins .photo-caption span{
  display:block;
  width:max-content;
  margin: -2px 4px 0 auto;
  padding:0;
  font-size:16px;
  line-height:1.1;
  font-style:italic;
  text-align:right;
  color:var(--terracotta-dark);
}
@media (max-width: 900px){
  .photo-soins .photo-caption{
    width: auto;
    margin-left: 0;
    text-align:center;
  }
  .photo-soins .photo-caption em{white-space: normal;}
  .photo-soins .photo-caption span{margin: 4px auto 0;}
}

/* V5 finale — uniformisation stricte des citations sous les photos */
.photo-soins .photo-caption,
.photo-cartes .photo-caption{
  width: max-content;
  max-width: 100%;
  margin: 22px auto 0;
  padding-left: 0;
  text-align: center;
  color: var(--terracotta);
}
.photo-soins .photo-caption em,
.photo-cartes .photo-caption em{
  display: block;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.05;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.015em;
  text-decoration: none;
}
.photo-soins .photo-caption span,
.photo-cartes .photo-caption span{
  display: block;
  width: max-content;
  margin: 3px 7% 0 auto;
  padding: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.1;
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta-dark);
  text-align: right;
  text-decoration: none;
}
@media (max-width: 900px){
  .photo-soins .photo-caption,
  .photo-cartes .photo-caption{
    width: auto;
    margin: 18px auto 0;
    text-align: center;
  }
  .photo-soins .photo-caption em,
  .photo-cartes .photo-caption em{
    white-space: normal;
  }
  .photo-soins .photo-caption span,
  .photo-cartes .photo-caption span{
    margin: 4px auto 0;
  }
}

/* V6 — nouvelle section éditoriale d'accompagnement */
.approche{
  padding-top: clamp(74px, 8vw, 128px);
  padding-bottom: clamp(76px, 8vw, 132px);
  background: linear-gradient(180deg, var(--cream) 0%, #fffaf2 100%);
  border-top: 1px solid rgba(167,100,76,.055);
}
.approche-inner{
  width: min(980px, 100%);
  margin-inline: auto;
}
.approche-card{
  position: relative;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 76px) clamp(34px, 6vw, 92px);
  color: var(--soft-ink);
  text-align: center;
}
.approche-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: rgba(250,244,234,.76);
  border-radius: 54% 46% 52% 48% / 42% 56% 44% 58%;
}
.approche-card p{
  max-width: 760px;
  margin: 0 auto 1.05em;
  font-size: 16px;
  line-height: 1.78;
}
.approche-card p:last-child{margin-bottom:0}
.approche-card strong{
  color: var(--ink);
  font-weight: 700;
}
@media (max-width:700px){
  .approche{padding: 58px 20px 66px}
  .approche-card{padding: 34px 18px}
  .approche-card::before{inset:-10px -14px}
  .approche-card p{font-size:15px;line-height:1.72;text-align:left}
}

/* ======================================================
   VERSION ULTIME — textes définitifs + section horizon
   ====================================================== */
strong{font-weight:600;color:#201510}

/* Mon parcours : texte final, moins de phrases en gras */
.parcours-text.columns p{
  font-size:15.35px;
  line-height:1.68;
}

/* Section approche : image à gauche, texte à droite */
.approche{
  padding-top:clamp(74px,8vw,122px);
  padding-bottom:clamp(74px,8vw,118px);
  background:linear-gradient(180deg,var(--cream) 0%,#fffaf2 100%);
  border-top:1px solid rgba(167,100,76,.055);
}
.approche-split{
  width:min(1320px,100%);
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(0,1fr);
  gap:clamp(52px,7vw,112px);
  align-items:center;
}
.approche-photo{
  position:relative;
  margin:0 auto;
  width:min(520px,100%);
  filter:drop-shadow(0 26px 62px rgba(94,65,42,.08));
}
.approche-photo::before{
  content:"";
  position:absolute;
  inset:-28px -32px;
  z-index:-1;
  background:rgba(246,235,220,.55);
  border-radius:45% 55% 50% 50% / 36% 45% 55% 64%;
}
.approche-photo img{
  width:100%;
  aspect-ratio:650/920;
  height:auto;
  object-fit:cover;
  border-radius:47% 53% 50% 50% / 36% 44% 56% 64%;
}
.approche-text{
  max-width:680px;
  color:var(--ink);
}
.approche-text p{
  margin:0 0 1.55em;
  font-size:18px;
  line-height:1.72;
  color:var(--ink);
}
.approche-text .approche-lead{
  margin-bottom:42px;
  font-family:var(--serif);
  font-size:clamp(38px,3.75vw,62px);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--ink);
}
.approche-text .approche-lead strong{
  font-family:inherit;
  font-weight:500;
  color:inherit;
}
.approche-text::after{
  content:"";
  display:block;
  width:88px;
  height:1px;
  margin:40px 0 0;
  background:var(--terracotta);
  opacity:.72;
}
.legal-note{
  margin-top:50px;
  color:#807873;
}
.legal-note p{
  margin-bottom:1.45em;
  font-size:15.25px;
  line-height:1.64;
  color:#807873;
}
.legal-note .legal-note-small{
  font-size:13.25px;
  line-height:1.58;
  color:#8f8882;
}

@media (max-width:1100px){
  .approche-split{
    grid-template-columns:1fr;
    gap:44px;
  }
  .approche-photo{
    width:min(460px,78vw);
  }
  .approche-text{
    max-width:760px;
    margin-inline:auto;
  }
  .approche-text::after{margin-inline:auto}
}
@media (max-width:700px){
  .approche{
    padding:58px 20px 66px;
  }
  .approche-photo{
    width:min(360px,86vw);
  }
  .approche-text p{
    font-size:15.5px;
    line-height:1.70;
  }
  .approche-text .approche-lead{
    font-size:clamp(34px,10vw,46px);
    margin-bottom:30px;
  }
  .legal-note{margin-top:40px}
  .legal-note p{font-size:13.5px;line-height:1.6}
  .legal-note .legal-note-small{font-size:12.5px;line-height:1.55}
}

/* =========================
   Version ultime — corrections finales
   ========================= */

/* Mon parcours : colonnes équilibrées à la main */
.parcours-text.columns{
  column-count: initial;
  column-gap: initial;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(42px,5vw,82px);
  max-width:890px;
  padding-left:60px;
}
.parcours-col p{
  break-inside:auto;
  font-size:15.25px;
  line-height:1.63;
}

/* Section philosophie : typographie moins démonstrative */
.approche{
  padding-top:clamp(72px,7vw,108px);
  padding-bottom:clamp(76px,7vw,112px);
}
.approche-split{
  display:grid;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1fr);
  gap:clamp(58px,7vw,118px);
  align-items:center;
}
.approche-photo{
  margin:0;
  width:min(470px,100%);
  justify-self:center;
}
.approche-photo img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:0;
  filter:drop-shadow(0 26px 62px rgba(94,65,42,.08));
}
.approche-text{
  max-width:700px;
}
.approche-lead{
  margin-bottom:34px;
  font-family:var(--serif);
  font-size:clamp(34px,3.05vw,50px);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--ink);
}
.approche-lead strong{
  font-family:inherit;
  font-weight:500;
  color:inherit;
}
.approche-text > p:not(.approche-lead){
  font-size:15.5px;
  line-height:1.74;
  margin-bottom:1.35em;
  color:var(--ink);
}
.approche-text strong{
  font-weight:600;
}
.legal-note{
  margin-top:50px;
  padding-top:0;
  color:#827c74;
}
.legal-note::before{
  content:"";
  display:block;
  width:86px;
  height:1px;
  margin:0 0 34px;
  background:rgba(167,100,76,.62);
}
.legal-note p{
  color:#827c74;
  font-size:13.2px;
  line-height:1.62;
  margin-bottom:1.3em;
}
.legal-note .legal-note-small{
  font-size:12.2px;
  color:#8d8780;
}

@media (max-width:1100px){
  .parcours-text.columns{
    grid-template-columns:1fr;
    max-width:760px;
    padding-left:0;
  }
  .approche-split{
    grid-template-columns:1fr;
  }
  .approche-photo{
    width:min(420px,78vw);
  }
}
@media (max-width:700px){
  .approche{
    padding:60px 20px 70px;
  }
  .approche-photo{
    width:min(330px,88vw);
  }
  .approche-lead{
    font-size:clamp(31px,9vw,40px);
    margin-bottom:26px;
  }
  .approche-text > p:not(.approche-lead){
    font-size:15px;
  }
  .legal-note{
    margin-top:42px;
  }
}

/* =====================================================
   AJUSTEMENTS FINAUX — filet terracotta + formes organiques
   ===================================================== */
:root{
  --photo-line:#C99678;
  --photo-wash:rgba(225,204,179,.62);
}

/* Mon parcours : colonnes rééquilibrées à la main */
.parcours-text.columns{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.parcours-col p{margin-bottom:26px;}

/* Portrait : forme organique moins ronde, avec fond et filet */
.portrait-wrap{
  width:min(430px,100%);
  aspect-ratio:1.05 / .96;
  border:0;
  padding:0;
  margin-top:36px;
  position:relative;
  border-radius:50% 44% 47% 53% / 44% 52% 48% 56%;
  filter:drop-shadow(0 24px 48px rgba(94,65,42,.07));
}
.portrait-wrap::before{
  content:"";
  position:absolute;
  inset:-18px -24px -20px -20px;
  z-index:-2;
  background:var(--photo-wash);
  border-radius:54% 46% 50% 50% / 46% 54% 44% 56%;
  opacity:.72;
}
.portrait-wrap::after{
  content:"";
  position:absolute;
  inset:-8px -10px -7px -8px;
  z-index:2;
  pointer-events:none;
  border:1.15px solid var(--photo-line);
  border-radius:52% 45% 48% 52% / 45% 52% 48% 55%;
}
.portrait-wrap img{
  display:block;
  border-radius:50% 44% 47% 53% / 44% 52% 48% 56%;
  border:0;
}

/* Filet fin terracotta sur les photos de services */
.organic-photo img{
  border:1.15px solid var(--photo-line);
  box-sizing:border-box;
}
.photo-soins img{border-radius:44% 56% 50% 50% / 34% 44% 56% 66%;}
.photo-cartes img{border-radius:52% 48% 52% 48% / 50% 54% 46% 50%;}

/* Section philosophie : image même poids que les autres, même famille visuelle */
.approche-split{
  grid-template-columns:minmax(330px,.9fr) minmax(0,1fr);
  gap:clamp(54px,7vw,110px);
  align-items:center;
}
.approche-photo{
  position:relative;
  width:min(520px,100%);
  justify-self:center;
  margin:0;
  filter:drop-shadow(0 24px 54px rgba(94,65,42,.075));
}
.approche-photo::before{
  content:"";
  position:absolute;
  inset:-28px -34px -32px -30px;
  z-index:-1;
  background:var(--photo-wash);
  opacity:.62;
  border-radius:54% 46% 51% 49% / 42% 56% 44% 58%;
}
.approche-photo img{
  display:block;
  width:100%;
  aspect-ratio:1.18 / .86;
  height:auto;
  object-fit:cover;
  object-position:center center;
  border:1.15px solid var(--photo-line);
  border-radius:48% 52% 51% 49% / 40% 50% 50% 60%;
  box-sizing:border-box;
}

/* Section philosophie : hiérarchie plus calme */
.approche-lead{
  font-size:clamp(30px,2.45vw,42px);
  line-height:1.08;
  margin-bottom:30px;
}
.approche-text p:not(.approche-lead){
  font-size:15.25px;
  line-height:1.72;
}
.legal-note{
  margin-top:48px;
  color:#817a72;
}
.legal-note p{
  font-size:13px !important;
  line-height:1.62 !important;
}
.legal-note-small{
  font-size:12px !important;
  color:#8e8780;
}

@media (max-width:980px){
  .portrait-wrap{margin-top:0;width:min(390px,78vw)}
  .approche-photo{width:min(520px,88vw)}
  .approche-photo img{aspect-ratio:1.12/.88}
}

@media (max-width:720px){
  .parcours-text.columns{grid-template-columns:1fr;gap:0;padding-left:0;}
  .portrait-wrap{aspect-ratio:1;}
  .approche-lead{font-size:34px;}
}


/* =====================================================
   CORRECTIONS FINALES DEMANDEES — base VERSION FINALE FILET
   - Photo Mon parcours descendue
   - Filet terracotta libre autour des images bougie/cartes
   - Image mer validée utilisée telle quelle
   ===================================================== */

/* Mon parcours : le haut de la forme photo s'aligne sur le haut du premier paragraphe de la 2e colonne */
@media (min-width:1101px){
  .portrait-wrap{
    margin-top:clamp(150px, 10vw, 174px) !important;
  }
}

/* Portrait : filet vivant, non parfaitement collé */
.portrait-wrap::after{
  inset:-10px -15px -9px -11px !important;
  border:1.15px solid var(--photo-line) !important;
  border-radius:54% 46% 49% 51% / 45% 53% 47% 55% !important;
}
.portrait-wrap::before{
  inset:-22px -28px -24px -22px !important;
  border-radius:55% 45% 50% 50% / 47% 55% 45% 56% !important;
}

/* Images de service : le filet devient une ligne libre autour de l'image, comme sur l'image mer validée */
.organic-photo img{
  border:0 !important;
}
.photo-shape{
  position:relative;
  width:100%;
  height:clamp(405px,34vw,560px);
  filter:drop-shadow(0 26px 55px rgba(94,65,42,.085));
}
.photo-shape img{
  width:100%;
  height:100%;
  object-fit:cover;
  box-sizing:border-box;
}
.photo-shape::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
  border:1.15px solid var(--photo-line);
}

.photo-soins .photo-shape,
.photo-soins .photo-shape img{
  border-radius:44% 56% 50% 50% / 34% 44% 56% 66%;
}
.photo-soins .photo-shape::after{
  inset:-9px -16px -12px -10px;
  border-radius:47% 53% 52% 48% / 36% 42% 58% 64%;
  transform:rotate(-1.2deg);
}

.photo-cartes .photo-shape{
  height:clamp(390px,31vw,515px);
}
.photo-cartes .photo-shape,
.photo-cartes .photo-shape img{
  border-radius:52% 48% 52% 48% / 50% 54% 46% 50%;
}
.photo-cartes .photo-shape::after{
  inset:-10px -14px -12px -13px;
  border-radius:55% 45% 50% 50% / 48% 56% 44% 52%;
  transform:rotate(.9deg);
}

/* On conserve les fonds organiques creme derrière les photos */
.organic-photo::before{
  opacity:.66;
}

/* Section philosophie : l'image mer validée contient déjà sa forme et son filet. On la pose sans masque supplémentaire. */
.approche-photo{
  width:min(560px,100%) !important;
  filter:none !important;
}
.approche-photo::before{
  display:none !important;
}
.approche-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  filter:none !important;
  box-shadow:none !important;
}

@media (max-width:1100px){
  .portrait-wrap{margin-top:0 !important;}
  .approche-photo{width:min(540px,92vw) !important;}
}
@media (max-width:700px){
  .photo-shape{height:360px;}
  .photo-cartes .photo-shape{height:350px;}
  .approche-photo{width:min(460px,96vw) !important;}
}

/* =====================================================
   CORRECTION VALIDEE — section Philosophie uniquement
   Base : VERSION FINALE FILET
   Objectifs :
   - supprimer l'effet de carré blanc autour de l'image mer
   - redonner à l'image le même poids visuel que bougie/cartes
   - conserver l'image validée, sa forme et le filet vivant
   ===================================================== */
.approche-photo{
  width:min(640px,100%) !important;
  max-width:100% !important;
  overflow:visible !important;
  background:transparent !important;
}
.approche-photo img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  /* Le fichier contient déjà la photo + le filet.
     On masque seulement le rectangle de fond généré autour. */
  clip-path:inset(4.5% 5.2% 6.2% 5.0% round 36% 39% 34% 38% / 38% 40% 39% 43%);
  transform:scale(1.055);
  transform-origin:center center;
}

@media (max-width:1100px){
  .approche-photo{width:min(620px,92vw) !important;}
}
@media (max-width:700px){
  .approche-photo{width:min(520px,96vw) !important;}
  .approche-photo img{
    clip-path:inset(4.8% 5.5% 6.4% 5.2% round 36% 39% 34% 38% / 38% 40% 39% 43%);
    transform:scale(1.045);
  }
}

/* =====================================================
   DERNIER AJUSTEMENT — image philosophie agrandie
   Objectif : même poids visuel que les images bougie/cartes
   sans modifier l'image ni le design validé.
   ===================================================== */
@media (min-width:1101px){
  .approche-split{
    grid-template-columns:minmax(600px, 0.98fr) minmax(0, 1fr) !important;
    gap:clamp(52px, 5.5vw, 92px) !important;
  }
  .approche-photo{
    width:min(760px, 100%) !important;
    justify-self:center !important;
  }
  .approche-photo img{
    transform:scale(1.085) !important;
  }
}

@media (max-width:1100px){
  .approche-photo{width:min(680px,92vw) !important;}
}
@media (max-width:700px){
  .approche-photo{width:min(560px,96vw) !important;}
}


/* =====================================================
   RETOUCHE FINALE REELLE — philosophie : image au même poids visuel
   Base : Emmanuelle-Sonnier-FINALE-PHILOSOPHIE-IMAGE-AGRANDIE
   Ne modifie que la taille du bloc image et conserve photo/filet/fond.
   ===================================================== */
@media (min-width:1101px){
  .approche .section-inner{
    width:min(1500px,100%) !important;
  }
  .approche-split{
    grid-template-columns:minmax(760px, 0.98fr) minmax(0, .82fr) !important;
    gap:clamp(44px,4vw,72px) !important;
    align-items:center !important;
  }
  .approche-photo{
    width:clamp(760px, 50vw, 860px) !important;
    max-width:none !important;
    justify-self:center !important;
    overflow:visible !important;
    background:transparent !important;
  }
  .approche-photo img{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:scale(1.06) !important;
    transform-origin:center center !important;
    clip-path:inset(3.2% 3.2% 4.2% 3.1% round 38% 42% 35% 37% / 42% 38% 39% 44%) !important;
  }
}
@media (min-width:701px) and (max-width:1100px){
  .approche-photo{
    width:min(740px,94vw) !important;
  }
  .approche-photo img{
    transform:scale(1.04) !important;
    clip-path:inset(3.5% 3.5% 4.5% 3.3% round 38% 42% 35% 37% / 42% 38% 39% 44%) !important;
  }
}
@media (max-width:700px){
  .approche-photo{
    width:min(600px,98vw) !important;
  }
  .approche-photo img{
    transform:scale(1.02) !important;
    clip-path:inset(4% 4% 5% 4% round 38% 42% 35% 37% / 42% 38% 39% 44%) !important;
  }
}


/* =====================================================
   CORRECTION FINALE — section philosophie
   Reprise exacte du composant visuel de la bougie :
   même masque, mêmes proportions, même fond crème,
   même filet terracotta libre. Seule l'image change.
   ===================================================== */
.approche-photo{
  position:relative !important;
  width:clamp(760px,50vw,860px) !important;
  max-width:none !important;
  justify-self:center !important;
  margin:0 !important;
  overflow:visible !important;
  background:transparent !important;
  filter:drop-shadow(0 26px 55px rgba(94,65,42,.085)) !important;
}
.approche-photo::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-32px -42px !important;
  z-index:-1 !important;
  background:rgba(246,235,220,.62) !important;
  opacity:.66 !important;
  border-radius:45% 55% 52% 48% / 35% 42% 58% 65% !important;
}
.approche-photo .photo-shape{
  position:relative !important;
  width:100% !important;
  height:clamp(405px,34vw,560px) !important;
  overflow:visible !important;
  filter:none !important;
}
.approche-photo .photo-shape,
.approche-photo .photo-shape img{
  border-radius:44% 56% 50% 50% / 34% 44% 56% 66% !important;
}
.approche-photo .photo-shape img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  clip-path:none !important;
}
.approche-photo .photo-shape::after{
  content:"" !important;
  position:absolute !important;
  pointer-events:none !important;
  z-index:2 !important;
  inset:-9px -16px -12px -10px !important;
  border:1.15px solid var(--photo-line) !important;
  border-radius:47% 53% 52% 48% / 36% 42% 58% 64% !important;
  transform:rotate(-1.2deg) !important;
}

@media (max-width:1100px){
  .approche-photo{width:min(680px,92vw) !important;}
  .approche-photo .photo-shape{height:clamp(360px,55vw,500px) !important;}
}
@media (max-width:700px){
  .approche-photo{width:min(560px,96vw) !important;}
  .approche-photo .photo-shape{height:360px !important;}
}

/* =====================================================
   FINAL — intégration photo philosophie validée
   Utilise l'image précomposée avec sa forme + filet.
   Ne touche pas au reste du design.
   ===================================================== */
.approche-photo{
  width:clamp(620px,44vw,740px) !important;
  max-width:100% !important;
  margin:0 !important;
  justify-self:center !important;
  background:transparent !important;
  filter:none !important;
  overflow:visible !important;
}
.approche-photo::before{
  display:none !important;
  content:none !important;
}
.approche-photo .photo-shape{
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
  filter:none !important;
}
.approche-photo .photo-shape::after{
  display:none !important;
  content:none !important;
}
.approche-photo .photo-shape,
.approche-photo .photo-shape img{
  border-radius:0 !important;
}
.approche-photo .photo-shape img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  clip-path:none !important;
}
@media (max-width:1100px){
  .approche-photo{width:min(680px,94vw) !important;}
}
@media (max-width:700px){
  .approche-photo{width:min(520px,96vw) !important;}
}

/* =====================================================
   VERSION FINALE — section philosophie pleine page goutte
   Image en fond pleine largeur, goutte à gauche, texte à droite.
   Supprime le cadre/image organique de l'ancienne version.
   ===================================================== */
.approche{
  position:relative !important;
  overflow:hidden !important;
  min-height:clamp(780px, 82vh, 980px) !important;
  padding:clamp(86px, 8vw, 130px) clamp(24px,4vw,68px) !important;
  background-image:url("assets/philosophie-goutte-bg.png") !important;
  background-size:cover !important;
  background-position:30% 61% !important;
  background-repeat:no-repeat !important;
  border-top:1px solid rgba(167,100,76,.055) !important;
}
.approche::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  /* voile doux : atténue les ombres végétales et laisse respirer le texte */
  background:
    linear-gradient(90deg, rgba(251,247,239,.06) 0%, rgba(251,247,239,.14) 38%, rgba(251,247,239,.44) 58%, rgba(251,247,239,.72) 100%),
    rgba(251,247,239,.06) !important;
}
.approche .section-inner{
  position:relative !important;
  z-index:1 !important;
  width:min(1520px,100%) !important;
  min-height:inherit !important;
  display:grid !important;
  align-items:center !important;
}
.approche-split{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(420px, .78fr) !important;
  gap:clamp(52px,6vw,110px) !important;
  align-items:center !important;
}
.approche-photo{
  display:none !important;
}
.approche-text{
  grid-column:2 !important;
  max-width:650px !important;
  margin:0 !important;
  color:var(--ink) !important;
}
.approche-lead,
.approche-text .approche-lead{
  font-family:var(--serif) !important;
  font-size:clamp(40px,3.9vw,66px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  margin:0 0 36px !important;
  color:var(--ink) !important;
}
.approche-text > p:not(.approche-lead){
  font-size:15.8px !important;
  line-height:1.75 !important;
  margin-bottom:1.38em !important;
  color:var(--ink) !important;
}
.approche-text::after{
  display:none !important;
}
.legal-note{
  margin-top:48px !important;
}
.legal-note::before{
  content:"" !important;
  display:block !important;
  width:86px !important;
  height:1px !important;
  margin:0 0 34px !important;
  background:rgba(167,100,76,.62) !important;
}
.legal-note p{
  font-size:13px !important;
  line-height:1.62 !important;
  color:#766f68 !important;
}
.legal-note .legal-note-small{
  font-size:12.2px !important;
  color:#837c75 !important;
}

@media (max-width:1100px){
  .approche{
    min-height:auto !important;
    padding:76px 24px 82px !important;
    background-position:23% 58% !important;
  }
  .approche::before{
    background:linear-gradient(180deg, rgba(251,247,239,.58) 0%, rgba(251,247,239,.74) 100%) !important;
  }
  .approche-split{
    grid-template-columns:1fr !important;
  }
  .approche-text{
    grid-column:1 !important;
    max-width:760px !important;
    margin-inline:auto !important;
    padding-top:clamp(260px,38vw,420px) !important;
  }
}
@media (max-width:700px){
  .approche{
    padding:58px 20px 66px !important;
    background-position:26% 48% !important;
    background-size:auto 100% !important;
  }
  .approche::before{
    background:linear-gradient(180deg, rgba(251,247,239,.70) 0%, rgba(251,247,239,.84) 100%) !important;
  }
  .approche-text{
    padding-top:300px !important;
  }
  .approche-lead,
  .approche-text .approche-lead{
    font-size:clamp(34px,10vw,46px) !important;
    margin-bottom:28px !important;
  }
  .approche-text > p:not(.approche-lead){
    font-size:15px !important;
    line-height:1.70 !important;
  }
}

/* =====================================================
   VERSION BANDEAU — section philosophie goutte
   Bandeau horizontal avec blanc au-dessus et en dessous.
   Image en fond à gauche, texte à droite, sans contact direct avec le parchemin.
   ===================================================== */
.approche{
  position:relative !important;
  overflow:hidden !important;
  min-height:clamp(540px, 45vw, 640px) !important;
  margin:clamp(76px,7vw,110px) 0 clamp(86px,8vw,124px) !important;
  padding:clamp(54px,5vw,76px) clamp(24px,4vw,68px) !important;
  background-image:url("assets/philosophie-goutte-bandeau.png") !important;
  background-size:cover !important;
  /* goutte placée sur le tiers gauche, un peu descendue */
  background-position:18% 58% !important;
  background-repeat:no-repeat !important;
  border-top:0 !important;
  border-bottom:0 !important;
}
.approche::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  /* voile doux : atténue les ombres végétales d'environ 40% et clarifie la zone texte */
  background:
    linear-gradient(90deg,
      rgba(251,247,239,.16) 0%,
      rgba(251,247,239,.18) 34%,
      rgba(251,247,239,.46) 58%,
      rgba(251,247,239,.76) 100%),
    rgba(251,247,239,.08) !important;
}
.approche .section-inner{
  position:relative !important;
  z-index:1 !important;
  width:min(1440px,100%) !important;
  min-height:inherit !important;
  display:grid !important;
  align-items:center !important;
}
.approche-split{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(420px,.78fr) !important;
  gap:clamp(48px,6vw,104px) !important;
  align-items:center !important;
}
.approche-photo{display:none !important;}
.approche-text{
  grid-column:2 !important;
  max-width:650px !important;
  margin:0 !important;
  color:var(--ink) !important;
}
.approche-lead,
.approche-text .approche-lead{
  font-family:var(--serif) !important;
  font-size:clamp(38px,3.55vw,58px) !important;
  line-height:1.03 !important;
  letter-spacing:-.035em !important;
  margin:0 0 32px !important;
  color:var(--ink) !important;
}
.approche-text > p:not(.approche-lead){
  font-size:15.5px !important;
  line-height:1.72 !important;
  margin-bottom:1.28em !important;
  color:var(--ink) !important;
}
.approche-text::after{display:none !important;}
.legal-note{margin-top:42px !important;}
.legal-note::before{
  content:"" !important;
  display:block !important;
  width:86px !important;
  height:1px !important;
  margin:0 0 30px !important;
  background:rgba(167,100,76,.62) !important;
}
.legal-note p{
  font-size:12.8px !important;
  line-height:1.60 !important;
  color:#766f68 !important;
}
.legal-note .legal-note-small{
  font-size:12px !important;
  color:#837c75 !important;
}
@media (max-width:1100px){
  .approche{
    min-height:auto !important;
    margin:64px 0 76px !important;
    padding:70px 24px 78px !important;
    background-position:22% 46% !important;
    background-size:cover !important;
  }
  .approche::before{
    background:linear-gradient(180deg, rgba(251,247,239,.60) 0%, rgba(251,247,239,.84) 100%) !important;
  }
  .approche-split{grid-template-columns:1fr !important;}
  .approche-text{
    grid-column:1 !important;
    max-width:760px !important;
    margin-inline:auto !important;
    padding-top:clamp(260px,36vw,400px) !important;
  }
}
@media (max-width:700px){
  .approche{
    margin:54px 0 64px !important;
    padding:58px 20px 66px !important;
    background-position:32% 24% !important;
    background-size:auto 62% !important;
  }
  .approche::before{
    background:linear-gradient(180deg, rgba(251,247,239,.66) 0%, rgba(251,247,239,.88) 100%) !important;
  }
  .approche-text{padding-top:260px !important;}
  .approche-lead,
  .approche-text .approche-lead{
    font-size:clamp(34px,10vw,46px) !important;
    margin-bottom:26px !important;
  }
  .approche-text > p:not(.approche-lead){font-size:15px !important;line-height:1.68 !important;}
}


/* =====================================================
   AJUSTEMENT CIBLE — Hero
   Reprise de l’image validée dans la section « Je crois profondément ».
   Header, texte et reste du design inchangés.
   ===================================================== */
.hero-img{
  object-fit:cover !important;
  object-position:18% 58% !important;
  transform:scale(1) !important;
}
@keyframes heroBreath{
  from{transform:scale(1)}
  to{transform:scale(1.02)}
}

/* =====================================================
   AJUSTEMENT CIBLE — « Je crois profondément » uniquement
   Goutte décalée à gauche + zone de lecture en fondu.
   ===================================================== */
.approche{
  background-size:125% auto !important;
  background-position:100% 54% !important;
}
.approche::before{
  background:
    linear-gradient(90deg,
      rgba(251,247,239,.02) 0%,
      rgba(251,247,239,.04) 30%,
      rgba(251,247,239,.24) 45%,
      rgba(251,247,239,.72) 66%,
      rgba(251,247,239,.94) 100%),
    radial-gradient(ellipse at 78% 50%,
      rgba(251,247,239,.96) 0%,
      rgba(251,247,239,.90) 34%,
      rgba(251,247,239,.46) 58%,
      rgba(251,247,239,0) 76%) !important;
}
.approche-text{
  position:relative !important;
  z-index:2 !important;
}
.approche-text::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-46px -58px -48px -72px !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,
    rgba(251,247,239,0) 0%,
    rgba(251,247,239,.72) 24%,
    rgba(251,247,239,.94) 100%) !important;
  filter:blur(18px) !important;
}

@media (max-width:1100px){
  .approche{
    background-size:132% auto !important;
    background-position:88% 30% !important;
  }
  .approche::before{
    background:
      linear-gradient(180deg,
        rgba(251,247,239,.08) 0%,
        rgba(251,247,239,.26) 34%,
        rgba(251,247,239,.88) 67%,
        rgba(251,247,239,.96) 100%) !important;
  }
  .approche-text::before{
    inset:-42px -34px -44px -34px !important;
    background:linear-gradient(180deg,
      rgba(251,247,239,0) 0%,
      rgba(251,247,239,.86) 18%,
      rgba(251,247,239,.96) 100%) !important;
  }
}
@media (max-width:700px){
  .approche{
    background-size:auto 66% !important;
    background-position:50% 3% !important;
  }
  .approche::before{
    background:linear-gradient(180deg,
      rgba(251,247,239,.10) 0%,
      rgba(251,247,239,.30) 34%,
      rgba(251,247,239,.91) 61%,
      rgba(251,247,239,.97) 100%) !important;
  }
}

/* =====================================================
   AJUSTEMENT DEMANDE — section « Je crois profondément »
   Remplacement par la photo de la porte uniquement.
   Le Hero n'est pas modifié.
   ===================================================== */
.approche{
  background-image:none !important;
  background:transparent !important;
  min-height:auto !important;
}
.approche::before{
  display:none !important;
  content:none !important;
}
.approche .section-inner{
  min-height:auto !important;
}
.approche-split{
  grid-template-columns:minmax(360px,.92fr) minmax(420px,.78fr) !important;
  align-items:center !important;
}
.approche-photo{
  display:block !important;
  width:clamp(430px,35vw,540px) !important;
  max-width:100% !important;
  justify-self:center !important;
  margin:0 !important;
  overflow:visible !important;
}
.approche-photo .photo-shape{
  width:100% !important;
  height:clamp(520px,43vw,650px) !important;
  overflow:hidden !important;
}
.approche-photo .photo-shape,
.approche-photo .photo-shape img{
  border-radius:38% 62% 54% 46% / 23% 31% 69% 77% !important;
}
.approche-photo .photo-shape img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.approche-text{
  grid-column:2 !important;
}
.approche-text::before{
  display:none !important;
  content:none !important;
}

@media (max-width:1100px){
  .approche-split{
    grid-template-columns:1fr !important;
  }
  .approche-photo{
    width:min(540px,92vw) !important;
  }
  .approche-photo .photo-shape{
    height:clamp(430px,72vw,620px) !important;
  }
  .approche-text{
    grid-column:1 !important;
    padding-top:0 !important;
  }
}
@media (max-width:700px){
  .approche-photo{
    width:min(430px,94vw) !important;
  }
  .approche-photo .photo-shape{
    height:500px !important;
  }
}

/* =====================================================
   CORRECTION PIXEL — section « Je crois profondément »
   La forme organique douce est portée par l'image PNG elle-même.
   Aucun masque CSS / border-radius supplémentaire, afin de conserver
   exactement le rendu de la maquette. Hero inchangé.
   ===================================================== */
.approche-photo{
  display:block !important;
  width:clamp(390px,34vw,490px) !important;
  max-width:100% !important;
  justify-self:center !important;
  margin:0 !important;
  overflow:visible !important;
}
.approche-photo .photo-shape{
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
  border-radius:0 !important;
  clip-path:none !important;
  background:transparent !important;
}
.approche-photo .photo-shape img{
  position:static !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  border-radius:0 !important;
  clip-path:none !important;
  box-shadow:none !important;
}

@media (max-width:1100px){
  .approche-photo{
    width:min(490px,86vw) !important;
    margin-inline:auto !important;
  }
  .approche-photo .photo-shape{
    padding:0 !important;
  }
}

@media (max-width:700px){
  .approche-photo{
    width:min(390px,88vw) !important;
  }
  .approche-text{
    padding-top:0 !important;
  }
}


/* =====================================================
   RETOUCHE PIXEL — section « Je crois profondément »
   Image porte avec fond transparent et forme organique douce.
   Hero inchangé.
   ===================================================== */
.approche-photo{
  width:clamp(390px,34vw,490px) !important;
  overflow:visible !important;
}
.approche-photo .photo-shape{
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:none !important;
}
.approche-photo .photo-shape img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:none !important;
}
@media (max-width:700px){
  .approche-photo{width:min(390px,88vw) !important;}
}

/* =====================================================
   FINAL — section « Je crois profondément »
   Image originale de la porte sans cadre arrière-plan.
   Hero strictement inchangé.
   ===================================================== */
.approche{
  background:#fbf7ef !important;
}
.approche-photo,
.approche-photo .photo-shape{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.approche-photo::before,
.approche-photo::after,
.approche-photo .photo-shape::before,
.approche-photo .photo-shape::after{
  content:none !important;
  display:none !important;
}
.approche-photo{
  width:clamp(440px,39vw,660px) !important;
  max-width:100% !important;
  overflow:visible !important;
  margin:0 !important;
  justify-self:center !important;
}
.approche-photo .photo-shape{
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
}
.approche-photo .photo-shape img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  box-shadow:none !important;
  filter:none !important;
  background:transparent !important;
}
@media (max-width:1100px){
  .approche-photo{width:min(660px,92vw) !important; margin-inline:auto !important;}
}
@media (max-width:700px){
  .approche-photo{width:min(460px,94vw) !important;}
}