:root {
  --cream: #F5F0E8;
  --sand: #E8DDC8;
  --clay: #C4A882;
  --bark: #7A5C3A;
  --moss: #4A5C3E;
  --charcoal: #1E1A16;
  --warm-white: #FAF7F2;
  --cream-muted: #D8D2C7;
  --charcoal-muted: #2F2A25;
  --sage-light: #E8DDC8;
  --terra: #B8956A;
  --mid: #2F2A25;
}

*,*::before,*::after {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--charcoal)
}

.topbar {
  background:var(--charcoal);
  text-align:center;
  padding:.6rem 1rem;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--sage-light)
}

.topbar a {
  color:#fff;
  text-decoration:none;
  font-weight:500
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.8rem 6%;
  background:var(--cream);
  border-bottom:1px solid var(--sand);
  flex-wrap:wrap;
  gap:1rem
}

.logo-wrap {
  display:flex;
  align-items:center;
  gap:1.1rem;
  text-decoration:none
}

.logo-circle {
  width:68px;
  height:68px;
  background:var(--sage);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}

.logo-drop {
  width:9px;
  height:13px;
  background:var(--terra);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  margin-bottom:3px
}

.logo-js {
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
  font-weight:600;
  color:var(--charcoal);
  line-height:1
}

.logo-text .sub {
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mid);
  display:block
}

.logo-text .main {
  font-family:'Cormorant Garamond',serif;
  font-size:1.85rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--charcoal);
  line-height:1.1;
  display:block
}

.header-cta {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--terra);
  color:#fff;
  text-decoration:none;
  padding:.85rem 1.8rem;
  font-size:.95rem;
  font-weight:500;
  border-radius:2px;
  white-space:nowrap;
  transition:background .2s,transform .15s
}

.header-cta:hover {
  background:#a8480f;
  transform:translateY(-1px)
}

nav.breadcrumb {
  background:var(--sand);
  padding:.8rem 6%;
  font-size:.78rem;
  color:var(--mid)
}

nav.breadcrumb a {
  color:var(--sage-dark);
  text-decoration:none
}

nav.breadcrumb a:hover {
  text-decoration:underline
}

nav.breadcrumb span {
  margin:0 .4rem
}

/* Section labels */ .s-label {
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--terra);
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.8rem
}

.s-label::before {
  content:'';
  display:block;
  width:22px;
  height:1.5px;
  background:var(--terra)
}

.s-label--light {
  color:#fff
}

.s-label--light::before {
  background:#fff
}

/* Hero */ .page-hero {
  background:var(--sage);
  padding:4rem 6%;
  position:relative;
  overflow:hidden
}

.page-hero::before {
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  top:50%;
  right:-60px;
  transform:translateY(-50%);
  pointer-events:none
}

.page-hero-layout {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem;
  flex-wrap:wrap
}

.page-hero-inner {
  max-width:560px;
  flex:1 1 320px
}

.page-hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:300;
  line-height:1.2;
  color:var(--charcoal);
  margin-bottom:.8rem
}

.page-hero h1 em {
  font-style:italic;
  color:#fff
}

.page-hero-sub {
  font-size:1rem;
  color:var(--charcoal);
  opacity:.8;
  line-height:1.7;
  margin-bottom:1.8rem;
  max-width:520px
}

.hero-cta-row {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center
}

.hero-portrait {
  flex-shrink:0;
  width:230px;
  height:230px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.5);
  box-shadow:0 8px 32px rgba(30,26,22,.18);
  position:relative;
  z-index:1
}

.hero-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

@media(max-width:700px) {
  .hero-portrait {
  width:160px;
  height:160px;
  margin:0 auto
}

.page-hero-layout {
  flex-direction:column-reverse;
  align-items:flex-start
}

}

.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--charcoal);
  color:#fff;
  text-decoration:none;
  padding:1rem 2rem;
  font-size:1rem;
  font-weight:500;
  border-radius:2px;
  transition:background .2s,transform .15s
}

.btn-primary:hover {
  background:var(--sage-dark);
  transform:translateY(-2px)
}

.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.3);
  color:var(--charcoal);
  border:1px solid rgba(255,255,255,.6);
  text-decoration:none;
  padding:1rem 2rem;
  font-size:1rem;
  font-weight:500;
  border-radius:2px;
  transition:background .2s
}

.btn-secondary:hover {
  background:rgba(255,255,255,.5)
}

/* Content sections */ .content-section {
  padding:4rem 6%
}

.content-section .inner {
  max-width:860px
}

.content-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  color:var(--charcoal);
  margin-bottom:1.2rem
}

.content-section h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;
  font-weight:600;
  color:var(--sage-dark);
  margin-top:2rem;
  margin-bottom:.8rem
}

.content-section p {
  font-size:.95rem;
  line-height:1.8;
  color:var(--mid);
  margin-bottom:1rem;
  max-width:680px
}

/* Timeline / Parcours */ .parcours-section {
  background:var(--sand);
  padding:4rem 6%
}

.parcours-section .inner {
  max-width:860px
}

.parcours-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  color:var(--charcoal);
  margin-bottom:.5rem
}

.parcours-section .intro-text {
  font-size:.95rem;
  line-height:1.8;
  color:var(--mid);
  margin-bottom:2.5rem;
  max-width:620px
}

.timeline {
  display:flex;
  flex-direction:column;
  gap:0
}

.timeline-item {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 1.8rem;
  position:relative
}

.timeline-item:not(:last-child)::after {
  content:'';
  position:absolute;
  left:10px;
  top:36px;
  bottom:0;
  width:1.5px;
  background:var(--sage-light)
}

.timeline-dot {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--terra);
  flex-shrink:0;
  margin-top:.35rem;
  position:relative;
  z-index:1;
  box-shadow:0 0 0 4px var(--sand)
}

.timeline-body {
  padding-bottom:2.5rem
}

.timeline-tag {
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terra);
  font-weight:500;
  margin-bottom:.3rem
}

.timeline-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--charcoal);
  margin-bottom:.5rem
}

.timeline-body p {
  font-size:.88rem;
  line-height:1.75;
  color:var(--mid)
}

/* Engagements grid */ .engagements-section {
  background:var(--cream);
  padding:4rem 6%
}

.engagements-section .inner {
  max-width:860px
}

.engagements-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  color:var(--charcoal);
  margin-bottom:.5rem
}

.engagements-section .intro-text {
  font-size:.95rem;
  line-height:1.8;
  color:var(--mid);
  margin-bottom:2.5rem;
  max-width:620px
}

.engagements-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem
}

.engagement-card {
  background:var(--sand);
  border-radius:4px;
  padding:1.5rem 1.6rem;
  border-top:2px solid var(--terra)
}

.engagement-icon {
  font-size:1.5rem;
  margin-bottom:.7rem
}

.engagement-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--charcoal);
  margin-bottom:.5rem
}

.engagement-card p {
  font-size:.85rem;
  line-height:1.7;
  color:var(--mid)
}

/* Spécialités */ .specialites-section {
  background:var(--sand);
  padding:4rem 6%
}

.specialites-section .inner {
  max-width:860px
}

.specialites-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  color:var(--charcoal);
  margin-bottom:.5rem
}

.specialites-section .intro-text {
  font-size:.95rem;
  line-height:1.8;
  color:var(--mid);
  margin-bottom:2rem;
  max-width:620px
}

.specialites-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.4rem
}

.specialite-card {
  background:var(--cream);
  border-radius:4px;
  overflow:hidden
}

.specialite-head {
  background:var(--charcoal);
  padding:1.2rem 1.5rem;
  display:flex;
  align-items:center;
  gap:.9rem
}

.specialite-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:300;
  color:rgba(255,255,255,.25);
  line-height:1
}

.specialite-head h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
  line-height:1.3
}

.specialite-body {
  padding:1.3rem 1.5rem
}

.specialite-body p {
  font-size:.87rem;
  line-height:1.75;
  color:var(--mid)
}

.specialite-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem
}

.specialite-tag {
  background:var(--sage-light);
  color:var(--sage-dark);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.22rem .7rem;
  border-radius:20px
}

/* Bilingual callout */ .bilingual-band {
  background:linear-gradient(135deg,var(--sage-dark),var(--charcoal));
  padding:3rem 6%;
  position:relative;
  overflow:hidden
}

.bilingual-band::before {
  content:'';
  position:absolute;
  width:350px;
  height:350px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  top:50%;
  right:-80px;
  transform:translateY(-50%);
  pointer-events:none
}

.bilingual-inner {
  position:relative;
  z-index:1;
  max-width:680px;
  display:flex;
  align-items:flex-start;
  gap:2rem;
  flex-wrap:wrap
}

.bilingual-flag {
  font-size:2.5rem;
  flex-shrink:0;
  line-height:1;
  margin-top:.2rem
}

.bilingual-text .label {
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage-light);
  margin-bottom:.4rem
}

.bilingual-text p {
  font-size:.95rem;
  line-height:1.75;
  color:rgba(255,255,255,.75);
  max-width:500px
}

.bilingual-text strong {
  color:#fff
}

/* CTA band */ .cta-band {
  background:var(--charcoal);
  padding:3.5rem 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2rem
}

.cta-band-text h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;
  font-weight:300;
  color:#fff;
  margin-bottom:.3rem
}

.cta-band-text p {
  font-size:.88rem;
  color:rgba(255,255,255,.5)
}

.cta-band-actions {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:flex-end
}

.contact-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  letter-spacing:.06em;
  transition:color .2s
}

.contact-num:hover {
  color:var(--sage-light)
}

.cta-sub {
  font-size:.76rem;
  color:rgba(255,255,255,.35);
  text-align:right
}

/* Nav autres villes */ .autres-villes {
  background:var(--cream);
  padding:3rem 6%
}

.autres-villes h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;
  font-weight:300;
  color:var(--charcoal);
  margin-bottom:1.2rem
}

.villes-links {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem
}

.ville-link {
  display:inline-flex;
  align-items:center;
  background:var(--sand);
  border:1px solid var(--sage-light);
  color:var(--sage-dark);
  text-decoration:none;
  padding:.6rem 1.2rem;
  border-radius:3px;
  font-size:.85rem;
  transition:background .2s,border-color .2s
}

.ville-link:hover {
  background:var(--sage-light);
  border-color:var(--sage-dark)
}

.ville-link-home {
  background:var(--charcoal);
  border-color:var(--charcoal);
  color:#fff
}

.ville-link-home:hover {
  background:var(--sage-dark);
  border-color:var(--sage-dark)
}

footer {
  background:var(--charcoal);
  padding:2.5rem 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.76rem;
  color:rgba(255,255,255,.3);
  letter-spacing:.05em
}

footer span {
  color:rgba(255,255,255,.5)
}

footer .footer-ids {
  line-height:1.8
}

.footer-copy {
  width:100%;
  text-align:center;
  color:rgba(255,255,255,.35);
  font-size:.72rem;
  letter-spacing:.04em
}

footer a {
  color:var(--sage-light);
  text-decoration:none
}

/* Technique détail block */ .technique-detail {
  background:var(--cream);
  border-left:3px solid var(--terra);
  padding:1rem 1.4rem;
  margin-top:1rem;
  border-radius:0 4px 4px 0
}

.technique-detail p {
  font-size:.82rem;
  color:var(--mid);
  line-height:1.65;
  margin:0
}

.technique-detail strong {
  color:var(--charcoal)
}

@media(max-width:600px) {
  .specialites-grid {
  grid-template-columns:1fr
}

.bilingual-inner {
  gap:1rem
}

.timeline-item::after {
  left:10px
}

}