/* EJ Management Consulting — Feuille de style du site
   Palette officielle : Abîme #3E584A · Lac Jade #6A8E7B · Jade Brume #CBE5D8
   Ardoise #596371 · Orage #96A3B7 · Ciel d'Été #EAF2FF · Nuit #4B5767 */

:root{
  --abime:#3E584A;
  --lac-jade:#6A8E7B;
  --jade-brume:#CBE5D8;
  --ardoise:#596371;
  --orage:#96A3B7;
  --ciel-ete:#EAF2FF;
  --nuit:#4B5767;
  --blanc:#FFFFFF;
  --texte:#2B332F;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;  /* police unique du site */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--texte);
  line-height:1.6;
  font-size:17px;
  background:var(--blanc);
}
img{ max-width:100%; display:block; }
h1, h2, h3{ letter-spacing:-0.01em; }
button, input, textarea{ font-family:var(--font); }
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e5e5e5;
  backdrop-filter:blur(6px);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-inner img.logo{ height:50px; }
@media (max-width:640px){ .nav-inner img.logo{ height:40px; } }
nav.links{ display:flex; gap:28px; align-items:center; }
nav.links a{
  text-decoration:none; color:var(--abime); font-size:15px; font-weight:500;
}
nav.links a.lang{
  border:1px solid var(--abime); border-radius:20px; padding:4px 12px;
  font-size:13px;
}
@media (max-width:900px){
  .nav-inner{ flex-wrap:wrap; gap:8px 16px; padding:10px 24px; }
  nav.links{ gap:8px 18px; flex-wrap:wrap; }
}
@media (max-width:640px){
  nav.links a{ font-size:13px; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:78vh;
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(20,28,24,.18), rgba(20,28,24,.32)), url('../assets/lac.jpg') center/cover no-repeat;
  color:#fff;
  text-align:left;
}
.hero .wrap{ max-width:720px; }
.hero h1{
  font-family:var(--font);
  font-size:clamp(2.1rem, 4.5vw, 3.2rem);
  line-height:1.2;
  margin:0 0 20px;
  text-shadow:0 2px 16px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.8);
}
.hero p{
  font-size:1.15rem;
  margin:0 0 32px;
  max-width:56ch;
  text-shadow:0 1px 10px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.7);
}
.btn{
  display:inline-block;
  background:var(--jade-brume);
  color:var(--abime);
  text-decoration:none;
  font-weight:600;
  padding:14px 28px;
  border-radius:4px;
  font-size:1rem;
  transition:background .2s ease;
}
.btn:hover{ background:#fff; }
.btn.ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7);
}
.btn.ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- ACCROCHE ---------- */
.accroche{ background:var(--jade-brume); padding:80px 0; }
.accroche h2{
  font-family:var(--font); font-style:italic; font-size:1.8rem;
  color:var(--abime); margin:0 0 24px;
}
.accroche p{ max-width:68ch; font-size:1.05rem; }

/* ---------- VISION ---------- */
.vision{
  position:relative; color:#fff; padding:90px 0;
  background:linear-gradient(rgba(25,38,31,.18), rgba(25,38,31,.32)), url('../assets/lac.jpg') center/cover no-repeat;
}
.vision h2, .vision p, .vision .tagline{ text-shadow:0 1px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.7); }
.vision .wrap{ max-width:760px; }
.vision h2{ font-family:var(--font); font-size:1.9rem; margin:0 0 28px; }
.vision .hook{ font-weight:700; font-style:italic; font-size:1.2rem; margin-bottom:20px; }
.vision p{ margin:0 0 20px; opacity:.95; }
.vision .closing{ font-weight:700; margin-top:28px; }
.vision .tagline{
  margin-top:44px; font-family:var(--font); font-style:italic;
  font-size:1.3rem; border-top:1px solid rgba(255,255,255,.25); padding-top:28px;
}

/* ---------- CHIFFRES ---------- */
.chiffres{ padding:70px 0; text-align:center; }
.chiffres .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.chiffres .num{
  font-family:var(--font); font-size:2.6rem; color:var(--abime); font-weight:700;
}
.chiffres .label{ font-size:.95rem; color:var(--ardoise); margin-top:6px; }
@media (max-width:640px){ .chiffres .grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- OFFRE / PHASES ---------- */
.offre{ padding:90px 0; background:#fafafa; }
.offre > .wrap > h2{ font-family:var(--font); font-size:2rem; color:var(--abime); margin:0 0 16px; }
.offre > .wrap > .intro{ max-width:68ch; margin-bottom:48px; color:var(--ardoise); }

.phase{
  background:#fff; border-radius:6px; padding:32px 32px;
  margin-bottom:20px; border-left:6px solid var(--lac-jade);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.phase.p1{ border-left-color:var(--abime); }
.phase.p2{ border-left-color:var(--lac-jade); }
.phase.p3{ border-left-color:var(--ardoise); }
.phase.p4{ border-left-color:var(--orage); }
.phase h3{ font-family:var(--font); font-size:1.3rem; margin:0 0 4px; color:var(--abime); }
.phase .hook{ font-weight:700; color:var(--nuit); margin-bottom:14px; }
.phase p.desc{ margin:0 0 16px; }
.phase ul{ margin:0; padding-left:20px; color:var(--ardoise); }
.phase li{ margin-bottom:4px; }
.phase .facturation{
  margin:18px 0 0; padding-top:14px; border-top:1px solid #e5e8e6;
  color:var(--nuit); font-size:.95rem;
}
.phase .facturation strong{ color:var(--abime); }
.phase.p0{ border-left-color:var(--nuit); }
.phase .ec-dispo{ font-size:.78rem; font-weight:500; color:var(--ardoise); margin-left:10px; white-space:nowrap; letter-spacing:0; }
.phase .phase-link{ margin:10px 0 0; font-size:.95rem; }
.phase .phase-link a{ color:var(--abime); font-weight:600; }

/* ---------- A PROPOS ---------- */
.apropos{ padding:90px 0; }
.apropos .grid{
  display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;
}
.apropos img.portrait{
  width:220px; height:220px; object-fit:cover; border-radius:6px;
}
.apropos h2{ font-family:var(--font); font-size:2rem; color:var(--abime); margin:0 0 20px; }
.apropos p{ margin:0 0 16px; }
.apropos .formation{ color:var(--ardoise); font-size:.95rem; border-top:1px solid #e5e5e5; padding-top:16px; margin-top:20px; }

.apropos h3.exp-title{
  font-family:var(--font); font-size:1.1rem; color:var(--abime);
  margin:28px 0 12px;
}
.exp-list{ margin:0 0 24px; padding-left:20px; }
.exp-list li{ margin-bottom:8px; color:var(--nuit); }
.exp-list li strong{ color:var(--abime); }
.exp-list li .exp-dates{ color:var(--ardoise); font-size:.9rem; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.tag-pill{
  background:var(--jade-brume); color:var(--abime); font-size:.82rem;
  padding:5px 14px; border-radius:20px; font-weight:500;
}

/* ---------- PAGES LEGALES ---------- */
.legal-page{ padding:70px 0 110px; max-width:760px; }
.legal-page h1{ font-family:var(--font); color:var(--abime); font-size:2rem; margin:0 0 32px; }
.legal-page h2{ font-family:var(--font); color:var(--abime); font-size:1.15rem; margin:36px 0 12px; }
.legal-page p{ margin:0 0 14px; }
.legal-page a{ color:var(--lac-jade); }

@media (max-width:640px){
  .apropos .grid{ grid-template-columns:1fr; }
  .apropos img.portrait{ width:140px; height:140px; }
}

/* ---------- CONTACT ---------- */
.contact{ background:var(--abime); color:#fff; padding:90px 0; }
.contact h2{ font-family:var(--font); font-size:2rem; margin:0 0 16px; }
.contact .invite{ max-width:60ch; margin-bottom:32px; opacity:.95; }
.contact .cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }

form.contact-form{
  max-width:560px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:32px;
}
form.contact-form label{ display:block; font-size:.9rem; margin:0 0 6px; opacity:.9; }
form.contact-form input, form.contact-form textarea{
  width:100%; padding:10px 12px; margin-bottom:18px; border-radius:4px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.95); color:var(--texte);
  font-family:var(--font); font-size:.95rem;
}
form.contact-form textarea{ min-height:100px; resize:vertical; }
form.contact-form button{
  background:var(--jade-brume); color:var(--abime); border:none; font-weight:600;
  padding:12px 26px; border-radius:4px; cursor:pointer; font-size:1rem;
}
form.contact-form button:hover{ background:#fff; }
.confirm-msg{ display:none; margin-top:16px; font-size:.9rem; color:var(--jade-brume); }

/* ---------- FOOTER ---------- */
footer{ background:var(--nuit); color:#dfe4e2; padding:48px 0 32px; font-size:.9rem; }
footer .foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
footer .tagline{ font-family:var(--font); font-style:italic; opacity:.85; }
footer .links a{ text-decoration:none; color:#dfe4e2; margin-right:16px; }
footer .bottom{ margin-top:32px; opacity:.6; font-size:.8rem; }

/* Fond voilé par phase (couleur de la réglette) */
.phase.p0{ background:rgba(75,87,103,.10); }
.phase.p1{ background:rgba(62,88,74,.13); }
.phase.p2{ background:rgba(106,142,123,.20); }
.phase.p3{ background:rgba(89,99,113,.13); }
.phase.p4{ background:rgba(150,163,183,.26); }
.phase .facturation{ border-top-color:rgba(0,0,0,.1); }
.phase-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn-ph{ display:inline-block; text-decoration:none; font-weight:600; font-size:.95rem; padding:11px 22px; border-radius:4px; border:1px solid var(--abime); color:var(--abime); background:transparent; transition:background .2s; }
.btn-ph:hover{ background:rgba(62,88,74,.1); }
.btn-ph.solid{ background:var(--abime); color:#fff; }
.btn-ph.solid:hover{ background:var(--nuit); }

.phase .facturation .prix{ display:block; font-size:1.5rem; font-weight:700; color:var(--abime); margin:2px 0 4px; letter-spacing:-0.01em; }
.phase .facturation .prix small{ font-size:.8rem; font-weight:500; color:var(--ardoise); letter-spacing:0; margin-left:6px; }