:root{
  --blue:#3f6fb5;
  --blue-dark:#203a5d;
  --ink:#25384b;
  --muted:#647386;
  --soft:#f5f7fa;
  --line:rgba(63,111,181,.16);
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;line-height:1.12;color:var(--blue-dark);margin-top:0}
h1{font-size:clamp(44px,6vw,76px);letter-spacing:-.04em;margin-bottom:24px}
h2{font-size:clamp(31px,4vw,50px);letter-spacing:-.025em}
h3{font-size:24px}
p{margin-top:0}
.topbar{
  position:fixed;z-index:100;top:0;left:0;right:0;
  height:82px;padding:0 clamp(24px,6vw,88px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between
}
.brand img{width:185px;height:auto}
.topbar nav{display:flex;gap:30px}
.topbar nav a{text-decoration:none;font-size:14px;color:var(--blue-dark)}
.topbar nav a:hover{color:var(--blue)}
.hero{
  min-height:760px;padding:150px clamp(28px,7vw,110px) 90px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;
  background:linear-gradient(130deg,#f2f6fb 0%,#fff 58%,#f7f8fb 100%)
}
.hero-copy{max-width:760px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--blue);margin-bottom:14px}
.lead{font-size:20px;color:#526477;max-width:760px}
.actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{text-decoration:none;padding:13px 22px;border-radius:3px;font-weight:600;font-size:15px}
.btn.primary{background:var(--blue);color:#fff}
.btn.secondary{border:1px solid var(--blue);color:var(--blue)}
.hero-visual{display:flex;justify-content:center}
.hero-visual img{max-width:590px;width:100%;filter:saturate(.9)}
.section{padding:clamp(72px,9vw,120px) clamp(28px,7vw,110px)}
.white{background:#fff}.soft{background:var(--soft)}
.wrap{max-width:1220px;margin:auto}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,7vw,100px)}
.prose{font-size:18px}
.prose blockquote{
  margin:30px 0 0;padding:24px 28px;text-align:center;
  background:var(--soft);border-left:4px solid var(--blue);
  color:var(--blue);font-size:21px;font-style:italic
}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:46px}
.service-card{background:#fff;border:1px solid var(--line);padding:32px}
.service-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.service-icon{width:52px;height:52px;object-fit:contain}
.service-number{margin:0;color:var(--blue);font-size:12px;letter-spacing:.14em;font-weight:700}
.service-head h3{margin:5px 0 0}
.practitioner{display:flex;align-items:center;gap:18px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}
.practitioner img{width:82px;height:82px;object-fit:cover;border-radius:50%}
.name{font-size:19px;color:var(--blue-dark);margin:0 0 3px}
.role{font-size:14px;color:var(--muted);margin:0}
.text-link{color:var(--blue);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;margin-top:44px}
.contact-main{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.contact-item{padding-bottom:20px;border-bottom:1px solid var(--line)}
.contact-item span{display:block;color:var(--blue);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;margin-bottom:6px}
.contact-item strong,.contact-item a{font-size:18px;color:var(--blue-dark);text-decoration:none}
.info-card{background:var(--soft);padding:30px}
.info-card h3{margin-bottom:18px}
.policy{margin-top:48px;padding:28px 32px;border-left:4px solid var(--blue);background:var(--soft);max-width:1000px}
.policy p:last-child{margin-bottom:0}
footer{
  border-top:1px solid var(--line);padding:28px clamp(28px,7vw,110px);
  display:flex;align-items:center;gap:28px;justify-content:space-between;
  color:var(--muted);font-size:13px
}
footer img{width:150px}
footer p{margin:0}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-visual{order:-1}
  .hero-visual img{max-width:520px}
  .split,.contact-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
  .topbar{display:none}
  .hero{padding:62px 24px 68px;gap:38px}
  .hero-visual{display:none}
  .section{padding:66px 24px}
  .contact-main{grid-template-columns:1fr}
  .services-grid{margin-top:34px}
  .service-card{padding:24px}
  .practitioner{align-items:flex-start}
  footer{padding:28px 24px;flex-direction:column;align-items:flex-start;gap:12px}
}

/* V2 — page informative sans barre de navigation */
.hero{
  padding-top:90px;
}
.hero-visual img{
  max-width:520px;
  width:100%;
  height:auto;
  filter:none;
}
@media(max-width:767px){
  .hero{
    padding-top:58px;
  }
  .hero-visual{
    display:none;
  }
}

/* V3 — logo as a subtle background presence in the hero */
.hero{
  position:relative;
  overflow:hidden;
  grid-template-columns:1fr;
  min-height:720px;
}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:790px;
}
.hero-watermark{
  position:absolute;
  z-index:1;
  right:-5%;
  top:50%;
  transform:translateY(-50%);
  width:min(52vw,760px);
  display:block;
  pointer-events:none;
}
.hero-watermark img{
  width:100%;
  max-width:none;
  opacity:.23;
  filter:none;
}
@media(max-width:900px){
  .hero-watermark{
    right:-14%;
    width:min(68vw,650px);
    opacity:.72;
  }
}
@media(max-width:767px){
  .hero-watermark{
    display:none;
  }
}

/* V4 — refinements: spacing, hierarchy and visual balance */

/* Hero: slightly lighter and more editorial */
.hero{
  min-height:680px;
  padding-top:82px;
  padding-bottom:82px;
}
.hero-copy{
  max-width:760px;
}
.hero .eyebrow{
  margin-bottom:18px;
}
.hero h1{
  max-width:760px;
}
.hero .lead{
  max-width:700px;
  line-height:1.7;
}
.hero-watermark{
  right:-7%;
  width:min(49vw,720px);
}
.hero-watermark img{
  opacity:.20;
}

/* More consistent section rhythm */
.section{
  padding-top:clamp(78px,8vw,112px);
  padding-bottom:clamp(78px,8vw,112px);
}
.section h2{
  max-width:820px;
}
.split{
  align-items:start;
}
.prose p{
  max-width:760px;
}
.prose blockquote{
  max-width:760px;
  margin-top:34px;
  padding:26px 32px;
}

/* Services: stronger visual hierarchy, but still light */
.services-grid{
  gap:34px;
  margin-top:42px;
}
.service-card{
  padding:34px;
  border-radius:2px;
}
.service-head{
  min-height:74px;
  align-items:center;
  margin-bottom:24px;
}
.service-icon{
  width:58px;
  height:58px;
}
.service-number{
  margin-bottom:3px;
}
.service-head h3{
  font-size:23px;
}
.practitioner{
  padding:22px 0;
}
.practitioner img{
  width:88px;
  height:88px;
}
.role{
  line-height:1.45;
}
.service-card > p{
  min-height:52px;
  color:#526477;
}

/* Practical information: cleaner information architecture */
.contact-grid{
  gap:58px;
  align-items:start;
}
.contact-main{
  gap:30px 34px;
}
.contact-item{
  padding-bottom:22px;
}
.info-card{
  padding:34px;
}
.info-card p{
  margin-bottom:14px;
}
.policy{
  margin-top:54px;
  padding:30px 34px;
}

/* Footer: lighter and less visually competitive */
footer{
  padding-top:24px;
  padding-bottom:24px;
}
footer img{
  width:132px;
  opacity:.82;
}

@media(max-width:900px){
  .hero{
    min-height:auto;
    padding-top:70px;
    padding-bottom:72px;
  }
  .hero-watermark{
    right:-17%;
    width:min(65vw,620px);
  }
  .services-grid{
    gap:24px;
  }
}

@media(max-width:767px){
  .hero{
    padding:52px 24px 62px;
  }
  .hero h1{
    font-size:clamp(38px,11vw,52px);
  }
  .hero .lead{
    font-size:18px;
  }
  .section{
    padding:62px 24px;
  }
  .service-card{
    padding:24px;
  }
  .service-card > p{
    min-height:0;
  }
  .contact-grid{
    gap:36px;
  }
  .policy{
    margin-top:40px;
    padding:24px;
  }
}

/* V5 — differentiation from 2laCouleur: calmer, warmer, more institutional */

/* Logo watermark: slightly larger and moved further into the composition */
.hero-watermark{
  right:-1%;
  width:min(56vw,820px);
}
.hero-watermark img{
  opacity:.20;
}

/* Softer heading voice without changing the site's identity */
h1,h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.025em;
}
h3{
  letter-spacing:-.01em;
}

/* Services: less corporate, more human and clinical */
.service-card{
  border:0;
  border-top:2px solid rgba(63,111,181,.16);
  background:rgba(255,255,255,.82);
  padding:32px 30px 34px;
}
.service-number{
  opacity:.48;
  font-size:11px;
  letter-spacing:.18em;
}
.service-head{
  margin-bottom:28px;
}
.service-head h3{
  font-size:22px;
}

/* Portraits: less badge-like, more natural */
.practitioner img{
  width:92px;
  height:92px;
  border-radius:14px;
}

/* Slightly softer practical blocks */
.info-card,
.policy,
.prose blockquote{
  border-radius:3px;
}
.info-card{
  background:#f7f8fa;
}
.policy{
  background:#f7f8fa;
}

/* Footer remains discreet */
footer img{
  opacity:.75;
}

/* Tablet: keep the watermark balanced */
@media(max-width:900px){
  .hero-watermark{
    right:-8%;
    width:min(72vw,680px);
  }
}

/* Mobile remains intentionally minimal */
@media(max-width:767px){
  h1,h2{
    letter-spacing:-.02em;
  }
  .service-card{
    padding:24px 22px 28px;
  }
}

/* V6 — retain V5 refinements, restore V4 watermark scale, revise title typography */

/* Restore the more breathable V4 watermark proportions */
.hero-watermark{
  right:-7%;
  width:min(49vw,720px);
}
.hero-watermark img{
  opacity:.20;
}

/* Replace the V5 serif titles with a softer contemporary sans-serif */
h1,h2{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.025em;
}
h1{
  line-height:1.08;
}
h2{
  line-height:1.14;
}

@media(max-width:900px){
  .hero-watermark{
    right:-17%;
    width:min(65vw,620px);
  }
}

@media(max-width:767px){
  h1,h2{
    letter-spacing:-.018em;
  }
}

/* V9 — lock hero title to exactly three lines */
.hero-title-fixed span{
  display:block;
  white-space:nowrap;
}

/* Give the title enough room on desktop while preserving the existing composition */
.hero-title-fixed{
  max-width:none !important;
  width:max-content;
}

/* On smaller screens, keep the intended three-line rhythm without overflow */
@media(max-width:900px){
  .hero-title-fixed{
    width:auto;
    font-size:clamp(36px,7vw,52px);
  }
  .hero-title-fixed span{
    white-space:normal;
  }
}