
:root{
  --forest:#2f5144; --forest-2:#1d352c; --sage:#879f8f; --sage-dark:#657c6d; --sage-soft:#e7eee8;
  --ivory:#fcfbf8; --stone:#f2efe8; --ink:#2f332f; --muted:#697169;
  --copper:#9d785b; --line:rgba(35,66,54,.16); --white:#fff;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", Arial, sans-serif;
  --shadow:0 20px 55px rgba(23,45,35,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);line-height:1.7}
img{max-width:100%;display:block} a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.skip{position:fixed;left:1rem;top:-5rem;z-index:999;background:white;padding:.7rem 1rem}
.skip:focus{top:1rem}
.container{width:min(1160px,calc(100% - 2.5rem));margin-inline:auto}
.header{position:fixed;inset:0 0 auto;z-index:80;background:rgba(20,42,33,.93);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;color:white}
.logo img{width:230px;height:auto;filter:brightness(0) invert(1)}
.menu{display:flex;align-items:center;gap:1.65rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.menu a{opacity:.86}.menu a:hover,.menu a[aria-current="page"]{opacity:1}
.menu .cta{padding:.65rem .9rem;border:1px solid rgba(255,255,255,.55);border-radius:.35rem}
.toggle{display:none;border:0;background:none;padding:.4rem}.toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}
.page-hero{min-height:68vh;display:grid;align-items:end;position:relative;color:white;background-size:cover;background-position:center;padding:9rem 0 5rem}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,25,19,.84),rgba(11,25,19,.38),rgba(11,25,19,.14))}
.page-hero .container{position:relative;z-index:1}
.hero-home{min-height:100svh;align-items:center;background-image:url("../img/hero-cervin.jpg");background-position:center 45%}
.hero-home::after{background:linear-gradient(90deg,rgba(9,22,16,.9),rgba(9,22,16,.55) 42%,rgba(9,22,16,.08) 75%)}
.hero-about{background-image:url("../img/foret.jpg")}
.hero-services{background-image:linear-gradient(rgba(25,53,42,.25),rgba(25,53,42,.25)),url("../img/hero-cervin.jpg");background-position:center 60%}
.hero-contact{background-image:url("../img/foret.jpg");background-position:center 65%}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--sage);margin:0 0 1rem}
.page-hero .eyebrow{color:#d5dfd6}
h1,h2,h3{font-family:var(--serif);line-height:1.03;margin:0;font-weight:600}
h1{font-size:clamp(3.4rem,7vw,6.7rem);max-width:900px}
h2{font-size:clamp(2.5rem,4.6vw,4.15rem);color:var(--forest-2)}
h3{font-size:clamp(1.65rem,2.4vw,2.25rem);color:var(--forest-2)}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:720px;color:rgba(255,255,255,.9);margin:1.4rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:.85rem}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:.75rem 1rem;border:1px solid transparent;border-radius:.35rem;text-transform:uppercase;font-size:.72rem;letter-spacing:.07em;font-weight:700;transition:.25s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--forest);color:white}.btn-primary:hover{background:#315847}
.btn-outline{border-color:rgba(255,255,255,.7);color:white;background:rgba(255,255,255,.05)}
.btn-light{background:white;color:var(--forest)}
.section{padding:7rem 0}
.section-soft{background:var(--stone)}
.section-green{background:var(--forest-2);color:white}.section-green h2{color:white}
.heading{max-width:770px;margin-bottom:3.5rem}.heading.center{text-align:center;margin-inline:auto}
.heading>p:last-child{color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.card{background:white;border:1px solid var(--line);border-radius:.65rem;padding:2rem;box-shadow:0 8px 30px rgba(34,60,46,.05)}
.card-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--sage-soft);color:var(--forest);font-size:1.35rem;margin-bottom:1.3rem}
.card p{color:var(--muted)}
.link{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--forest)}
.method-step{position:relative;padding-top:1.5rem;border-top:1px solid var(--line)}
.method-step span{font:600 2rem var(--serif);color:var(--sage)}
.method-step p{color:var(--muted);font-size:.9rem}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:650px}
.split-image{background:url("../img/foret.jpg") center/cover}
.split-copy{padding:clamp(3rem,8vw,7rem);display:flex;flex-direction:column;justify-content:center}
.split-copy p{color:var(--muted)}
.portrait-layout{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:5rem;align-items:center}
.portrait{background:white;border-radius:.8rem;padding:.75rem;box-shadow:var(--shadow)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 24%;border-radius:.5rem;filter:saturate(.82)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.stats div{border-left:2px solid var(--sage);padding-left:1rem}
.stats strong{display:block;font:600 2.5rem var(--serif);color:var(--forest)}
.stats span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.service-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:center;padding:3rem 0;border-bottom:1px solid var(--line)}
.service-feature:nth-child(even){grid-template-columns:1.2fr 1fr}.service-feature:nth-child(even) .service-visual{order:2}
.service-visual{min-height:330px;border-radius:.75rem;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.visual-personnes{background-image:url("../img/foret.jpg")}
.visual-projets{background-image:url("../img/hero-cervin.jpg")}
.visual-organisations{background-image:linear-gradient(rgba(35,66,54,.18),rgba(35,66,54,.18)),url("../img/identite.jpg")}
.checks{padding:0;list-style:none}.checks li{padding:.45rem 0 .45rem 1.5rem;position:relative}.checks li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700}
.quote{padding:6rem 1.5rem;text-align:center;color:white;background:linear-gradient(rgba(16,36,28,.72),rgba(16,36,28,.75)),url("../img/hero-cervin.jpg") center 68%/cover fixed}
.quote blockquote{margin:0 auto;max-width:900px;font:600 clamp(2rem,4vw,4rem)/1.2 var(--serif)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4.5rem}
.contact-info address{font-style:normal;display:grid;gap:.8rem;margin-top:2rem}
.contact-info address>*{border-left:2px solid var(--sage);padding-left:1rem}
.form{background:white;border:1px solid var(--line);padding:2rem;border-radius:.7rem;box-shadow:0 10px 40px rgba(34,60,46,.07)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:grid;gap:.4rem;margin-bottom:1rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#556158}
input,textarea,select{width:100%;border:1px solid #ccd5cd;background:#fdfdfb;border-radius:.35rem;padding:.8rem;color:var(--ink);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(35,66,54,.1)}
.notice{font-size:.78rem;color:var(--muted)}
.legal{max-width:850px}.legal h2{font-size:2rem;margin-top:2.5rem}.legal p,.legal li{color:var(--muted)}
.footer{background:var(--forest-2);color:white;padding:3.2rem 0 1.2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.footer img{width:230px;filter:brightness(0) invert(1);margin-bottom:1rem}
.footer p{color:rgba(255,255,255,.64)}
.footer-links{display:flex;flex-direction:column;gap:.5rem;color:rgba(255,255,255,.78);font-size:.85rem}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.72rem;color:rgba(255,255,255,.48)}
.reveal{opacity:0;transform:translateY(22px);transition:.75s ease}.reveal.visible{opacity:1;transform:none}
.success,.error{padding:1rem;border-radius:.4rem;margin-bottom:1rem}.success{background:#e6f2e8;color:#214b2d}.error{background:#f8e6e4;color:#7b2b25}
@media(max-width:900px){
  .toggle{display:block;z-index:90}
  .menu{position:fixed;inset:0 0 0 22%;background:rgba(20,42,33,.99);flex-direction:column;align-items:flex-start;justify-content:center;padding:3rem;transform:translateX(100%);transition:.3s;font-size:1rem}
  .menu.open{transform:none}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}.split-image{min-height:420px}
  .portrait-layout,.contact-grid,.service-feature,.service-feature:nth-child(even){grid-template-columns:1fr}
  .service-feature:nth-child(even) .service-visual{order:0}
}
@media(max-width:620px){
  .container{width:calc(100% - 1.7rem)}.nav{height:72px}.logo img{width:185px}
  h1{font-size:3.3rem}.page-hero{padding-bottom:3.5rem}
  .section{padding:5rem 0}.grid-3,.grid-4,.stats,.form-row,.footer-grid{grid-template-columns:1fr}
  .split-copy{padding:4rem 1.1rem}.form{padding:1.2rem}.footer-bottom{flex-direction:column}
  .quote{background-attachment:scroll}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* ===== VERSION 3 — FINITIONS PREMIUM ===== */
body{letter-spacing:.002em}
.header{
  background:rgba(29,53,44,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header .nav{height:86px}
.logo img{width:240px}
.menu a{transition:opacity .2s ease,color .2s ease}
.menu a:hover{color:#e8efe9}
.menu .cta{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.48);
}
.menu .cta:hover{background:rgba(255,255,255,.12)}
.hero-home::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 20%,rgba(255,255,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(19,37,29,.05),rgba(19,37,29,.2));
  z-index:0;
}
.page-hero .container{position:relative;z-index:2}
.hero-home h1{text-shadow:0 8px 30px rgba(0,0,0,.18)}
.hero-home .lead{max-width:760px}
.hero-home .btn-primary{background:var(--sage-dark)}
.hero-home .btn-primary:hover{background:var(--sage)}
.heading h2{letter-spacing:-.015em}
.card{
  border:1px solid rgba(47,81,68,.12);
  box-shadow:0 10px 34px rgba(24,48,38,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(24,48,38,.10);
  border-color:rgba(135,159,143,.42);
}
.card-icon{
  background:linear-gradient(145deg,#eef3ef,#dfe9e1);
  color:var(--forest);
  border:1px solid rgba(135,159,143,.25);
}
.method-step{transition:transform .25s ease}
.method-step:hover{transform:translateY(-3px)}
.method-step span{color:var(--sage-dark)}
.portrait{
  border:1px solid rgba(47,81,68,.10);
  box-shadow:0 22px 60px rgba(24,48,38,.12);
}
.portrait img{filter:saturate(.78) contrast(1.03)}
.stats div{border-left-color:var(--sage)}
.stats strong{color:var(--forest)}
.quote{position:relative;overflow:hidden}
.quote::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 120px rgba(0,0,0,.22);
  pointer-events:none;
}
.quote blockquote{position:relative;z-index:1}
.service-feature{padding:4.5rem 0}
.service-visual{
  min-height:390px; overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease;
}
.service-feature:hover .service-visual{
  transform:scale(1.01);
  box-shadow:0 24px 65px rgba(23,45,35,.15);
}
.form{
  border-color:rgba(47,81,68,.14);
  box-shadow:0 18px 55px rgba(23,45,35,.08);
}
input,textarea,select{background:#fff}
input:focus,textarea:focus,select:focus{
  border-color:var(--sage-dark);
  box-shadow:0 0 0 3px rgba(135,159,143,.17);
}
.footer{background:linear-gradient(180deg,#1d352c,#172a23)}
.footer a:hover{color:#dce7de}
@media(max-width:620px){
  .header .nav{height:72px}
  .hero-home{background-position:58% 45%}
  .hero-home h1{font-size:3.05rem}
  .service-visual{min-height:280px}
}


/* ===== VERSION 4 — CORRECTIONS VISUELLES ===== */

/* Accueil : masque totalement les anciens éléments graphiques intégrés à la photo source
   tout en conservant l'arbre, les racines et le Cervin. */
.hero-home::after{
  background:
    linear-gradient(90deg,
      rgba(10,25,19,.985) 0%,
      rgba(10,25,19,.965) 18%,
      rgba(10,25,19,.82) 34%,
      rgba(10,25,19,.48) 48%,
      rgba(10,25,19,.12) 70%,
      rgba(10,25,19,.04) 100%);
}
.hero-home h1{
  max-width:760px;
  text-wrap:balance;
}
.hero-home .lead{
  max-width:720px;
  text-shadow:0 2px 14px rgba(0,0,0,.22);
}

/* Nouvelle photographie d'Yves : cadrage montagne plus naturel. */
.portrait img{
  object-position:center center;
  filter:saturate(.92) contrast(1.02);
}

/* Méthode : hero uniquement photographique, sans texte superposé. */
.method-photo-hero{
  min-height:clamp(430px,55vw,650px);
  background:url("../img/foret-methode.jpg") center center/cover no-repeat;
  position:relative;
}
.method-photo-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(16,38,29,.05),rgba(16,38,29,.12));
}
.method-intro{
  padding:5.5rem 0 4.5rem;
  background:var(--ivory);
  text-align:center;
}
.method-intro .eyebrow{
  margin-bottom:1.4rem;
}
.method-intro h1{
  color:var(--forest);
  max-width:1100px;
  margin:0 auto;
  font-size:clamp(2.7rem,5.3vw,5.3rem);
  line-height:1.05;
}
.method-intro::after{
  content:"";
  display:block;
  width:58px;
  height:1px;
  background:var(--sage);
  margin:2rem auto 0;
}

/* évite une impression de répétition après le nouveau hero de la page méthode */
.method-main-section{
  padding-top:3.5rem;
}

@media(max-width:620px){
  .method-photo-hero{min-height:360px}
  .method-intro{padding:4rem 1rem 3.5rem}
}


/* ===== VERSION 5 — HERO ACCUEIL NETTOYÉ ===== */
.hero-home{
  background-image:url("../img/hero-cervin.jpg");
  background-position:center center;
}
.hero-home::after{
  background:
    linear-gradient(90deg,
      rgba(12,29,22,.86) 0%,
      rgba(12,29,22,.72) 28%,
      rgba(12,29,22,.36) 48%,
      rgba(12,29,22,.10) 70%,
      rgba(12,29,22,.02) 100%);
}
.hero-home::before{
  background:
    radial-gradient(circle at 54% 55%,rgba(255,223,157,.08),transparent 32%),
    linear-gradient(180deg,rgba(13,31,24,.02),rgba(13,31,24,.10));
}
@media(max-width:620px){
  .hero-home{background-position:45% center}
}


/* ===== VERSION 6 — BAS DE « LA MÉTHODE » ===== */
/* Remplace uniquement l'ancien visuel composite du cadre d'accompagnement. */
.method-frame .split-image{
  background-image:url("../img/foret-methode.jpg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}


/* ===== VERSION 7 — IMAGES VALIDÉES ===== */

/* Accompagnements */
.visual-personnes{
  background-image:url("../img/accompagnement-personnes.jpg");
  background-position:center;
  background-size:cover;
}
.visual-projets{
  background-image:url("../img/accompagnement-projets-itineraire.jpg");
  background-color:#f2efe8;
  background-position:center;
  background-size:contain; /* cadrage original conservé */
  background-repeat:no-repeat;
}
.visual-organisations{
  background-image:url("../img/accompagnement-technique.jpg");
  background-position:center;
  background-size:cover;
}

/* Mon parcours : dernière photo validée comme hero, cadrage naturel conservé au maximum */
.hero-about.parcours-hero{
  background-image:url("../img/parcours-hero.jpg");
  background-position:center center;
  background-size:cover;
}
.hero-about.parcours-hero::after{
  background:linear-gradient(90deg,rgba(14,31,24,.80),rgba(14,31,24,.52) 42%,rgba(14,31,24,.10) 76%);
}
@media(max-width:620px){
  .hero-about.parcours-hero{background-position:36% center}
}


/* ===== VERSION 8 — VALIDATIONS FINALES INTÉGRÉES ===== */

/* Mon parcours : voile allégé, tel que validé en ligne */
.hero-about.parcours-hero::after{
  background:linear-gradient(
    90deg,
    rgba(12,39,31,.78) 0%,
    rgba(12,39,31,.62) 30%,
    rgba(12,39,31,.32) 58%,
    rgba(12,39,31,.10) 100%
  );
}

/* Contact : photo du cadre ouvert sur le paysage, sans montage */
.hero-contact{
  background-image:url("../img/contact-hero.jpg");
  background-position:center center;
  background-size:cover;
}
.hero-contact::after{
  background:linear-gradient(
    90deg,
    rgba(15,38,29,.82) 0%,
    rgba(15,38,29,.64) 34%,
    rgba(15,38,29,.30) 62%,
    rgba(15,38,29,.08) 100%
  );
}

/* Mon parcours : citation finale sur la photo neige/lumière validée */
.quote.parcours-quote{
  background:
    linear-gradient(rgba(16,36,28,.62),rgba(16,36,28,.66)),
    url("../img/parcours-citation.jpg") center center/cover fixed;
}
@media(max-width:620px){
  .quote.parcours-quote{background-attachment:scroll;background-position:center center}
}
