/* =========================================================
   HARMONIE À DOMICILE — Feuille de styles
   Palette douce (sauge / olive / crème / brun) reprise du flyer
   ========================================================= */

:root {
  --sage: #7d8d5c;
  --sage-soft: #9aa97c;
  --olive: #5a6b3f;
  --olive-deep: #44502f;
  --cream: #f4efe3;
  --cream-light: #fbf8f1;
  --paper: #fffdf8;
  --brown: #8b6f47;
  --brown-soft: #b09064;
  --ink: #3d3a30;
  --ink-soft: #6b665a;
  --danger: #b4553f;
  --shadow: 30px 30px 80px -40px rgba(68, 80, 47, 0.45);
  --shadow-sm: 0 18px 40px -24px rgba(68, 80, 47, 0.4);
  --radius: 28px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Mulish', sans-serif;
  color: var(--ink);
  background: var(--cream-light);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.1;
}

.script {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
}

a { color: inherit; text-decoration: none; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage);
}

/* ---------- séparateur décoratif ---------- */
.leaf-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--sage-soft);
}
.leaf-rule::before, .leaf-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--sage-soft), transparent);
  max-width: 90px;
}

/* ============ NAVIGATION ============ */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
  padding: 22px 0;
}
header.scrolled {
  background: rgba(251, 248, 241, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px -28px rgba(68,80,47,.6);
  padding: 12px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 46px; height: 46px; flex: none; }
.brand .txt { display: flex; flex-direction: column; line-height: 1; }
.brand .txt b {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  color: var(--olive-deep);
}
.brand .txt span {
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brown);
  margin-top: 3px;
}
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  transition: color .25s;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--sage); border-radius: 2px;
  transition: width .3s ease;
}
.nav-links a:not(.btn):hover { color: var(--olive-deep); }
.nav-links a:not(.btn):hover::after { width: 100%; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--olive); color: var(--paper);
  padding: 13px 26px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: .02em;
  border: none; cursor: pointer;
  font-family: 'Mulish', sans-serif;
  box-shadow: 0 14px 30px -14px rgba(90,107,63,.8);
  transition: transform .3s ease, box-shadow .3s ease, background .3s;
}
.btn:hover { transform: translateY(-3px); background: var(--olive-deep); box-shadow: 0 22px 40px -16px rgba(90,107,63,.85); }
.btn.ghost { background: transparent; color: var(--olive-deep); border: 1.5px solid var(--sage-soft); box-shadow:none; }
.btn.ghost:hover { background: var(--sage); color:#fff; border-color: var(--sage); }
.btn.wa-btn { background:#25d366; box-shadow:0 14px 30px -14px rgba(37,211,102,.8); }
.btn.wa-btn:hover { background:#1ebe5a; box-shadow:0 22px 40px -16px rgba(37,211,102,.85); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; color: var(--olive-deep); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 170px 0 110px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(125,141,92,.16), transparent 55%),
    radial-gradient(80% 70% at 5% 110%, rgba(139,111,71,.12), transparent 60%),
    var(--cream-light);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(3rem, 6.5vw, 5.4rem);
  letter-spacing: 0.06em;
  color: var(--olive-deep);
  margin-bottom: 6px;
}
.hero .sub {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: clamp(.95rem,1.6vw,1.25rem);
  color: var(--brown);
  margin-bottom: 26px;
}
.hero .tagline {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: var(--olive);
  max-width: 30ch;
  margin-bottom: 16px;
}
.hero p.lead { color: var(--ink-soft); max-width: 42ch; margin-bottom: 34px; font-size: 1.05rem; }
.hero-cta { display:flex; gap:16px; flex-wrap: wrap; }

/* ---------- visuel photo ---------- */
.hero-visual { position: relative; display:flex; justify-content:center; }
.photo-blob {
  width: min(440px, 90%);
  aspect-ratio: 4/5;
  border-radius: 48% 52% 47% 53% / 55% 48% 52% 45%;
  background:
    linear-gradient(150deg, rgba(125,141,92,.35), rgba(139,111,71,.3)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px),
    var(--sage);
  box-shadow: var(--shadow);
  display:flex; align-items:flex-end; justify-content:center;
  position: relative;
  overflow: hidden;
  animation: morph 14s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius: 48% 52% 47% 53% / 55% 48% 52% 45%; }
  50% { border-radius: 54% 46% 56% 44% / 46% 56% 44% 54%; }
}
/* photo réelle déposée par l'utilisateur : recouvre le placeholder */
.photo-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2;
}
.photo-blob .ph-label {
  position:absolute; inset:auto 0 0 0; padding: 22px;
  color:#fff; font-size:.8rem; letter-spacing:.04em; text-align:center;
  background: linear-gradient(transparent, rgba(68,80,47,.55));
  font-weight:500; z-index:1;
}
.photo-blob > svg { width: 84px; height:84px; color: rgba(255,255,255,.85); position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); z-index:1; }
/* illustration botanique de remplacement (sous une éventuelle vraie photo) */
.photo-illus { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.photo-illus svg { width:78%; height:78%; }

.floating-badge {
  position: absolute; top: 4%; right: 0%;
  background: var(--paper);
  border-radius: 50%;
  width: 132px; height: 132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2px;
  box-shadow: var(--shadow-sm);
  border: 1px dashed var(--sage-soft);
  animation: floaty 6s ease-in-out infinite;
  z-index: 3;
}
.floating-badge b { font-family:'Cormorant Garamond',serif; font-size:.95rem; letter-spacing:.12em; color: var(--olive-deep); text-transform:uppercase; }
.floating-badge small { font-size:.6rem; letter-spacing:.18em; color:var(--brown); text-transform:uppercase; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.leaf-deco { position:absolute; opacity:.5; color: var(--sage-soft); pointer-events:none; }

/* ============ QUI SUIS-JE ============ */
.about { background: var(--cream-light); }
.about-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items:center; }
.about-visual { position:relative; display:flex; justify-content:center; }
.portrait {
  width: min(360px, 90%); aspect-ratio: 4/5;
  border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
  background:
    linear-gradient(160deg, rgba(125,141,92,.4), rgba(139,111,71,.35)),
    var(--sage);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.portrait > svg { width:74px;height:74px;color:rgba(255,255,255,.85); position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); z-index:1; }
.portrait .ph-label { position:absolute; inset:auto 0 0 0; padding:18px; text-align:center; color:#fff; font-size:.78rem; background:linear-gradient(transparent, rgba(68,80,47,.55)); z-index:1; }
.about-pill {
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  background:var(--paper); color:var(--olive-deep); white-space:nowrap;
  padding:11px 22px; border-radius:999px; box-shadow:var(--shadow-sm);
  font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:9px; z-index:3;
}
.about-pill svg { width:16px;height:16px;color:var(--brown); }
.about-copy h2 { font-size: clamp(2.2rem,4vw,3.2rem); color:var(--olive-deep); margin:14px 0 18px; }
.about-copy p { color:var(--ink-soft); margin-bottom:16px; font-size:1.05rem; }
.about-signature { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.9rem; color:var(--olive); margin-top:8px; }

/* ============ BANDEAU VALEURS ============ */
.values {
  background: var(--olive-deep);
  color: var(--cream);
  padding: 30px 0;
}
.values .row {
  display:flex; align-items:center; justify-content:center;
  gap: clamp(20px, 5vw, 70px); flex-wrap:wrap;
}
.values .v {
  display:flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond',serif; font-size:1.5rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--cream);
}
.values .v svg { width:18px;height:18px; color: var(--sage-soft); }
.values .sep { color: var(--sage); opacity:.6; }

/* ============ COQUILLE DE SECTION ============ */
section.block { padding: clamp(70px, 9vw, 130px) 0; position:relative; }
.sec-head { text-align:center; max-width: 640px; margin: 0 auto 64px; }
.sec-head h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--olive-deep);
  margin: 14px 0 16px;
  letter-spacing: .02em;
}
.sec-head p { color: var(--ink-soft); font-size:1.08rem; }

/* ============ SERVICES ============ */
.services { background: var(--paper); }
.cards {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  background: var(--cream-light);
  border: 1px solid rgba(125,141,92,.16);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
  position: relative;
  overflow: hidden;
}
.card::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(125,141,92,.1), transparent 60%);
  opacity:0; transition: opacity .4s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { opacity:1; }
.card .ic {
  width: 60px; height:60px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--olive); color:#fff;
  margin-bottom: 22px;
  box-shadow: 0 14px 26px -14px rgba(90,107,63,.9);
  transition: transform .4s, background .4s;
}
.card:hover .ic { transform: rotate(-6deg) scale(1.06); background: var(--brown); }
.card .ic svg { width: 28px; height:28px; }
.card h3 { font-size: 1.5rem; color: var(--olive-deep); margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card.feature { grid-column: span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(150deg,var(--sage),var(--olive)); color:#fff; border:none; }
.card.feature .script { font-size:1.9rem; color:#fff; line-height:1.25; }
.card.feature p { color:rgba(255,255,255,.85); margin-top:10px; }

/* ============ COMMENT ÇA SE PASSE ============ */
.process { background: var(--cream-light); }
.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position:relative; }
/* trait pointillé reliant les étapes (desktop) */
.steps::before {
  content:""; position:absolute; top:38px; left:16%; right:16%;
  border-top:2px dashed rgba(125,141,92,.4); z-index:0;
}
.step { text-align:center; position:relative; z-index:1; padding:0 10px; }
.step-num {
  width:76px; height:76px; margin:0 auto 22px;
  border-radius:50%; background:var(--paper); border:2px solid var(--sage);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:600; color:var(--olive-deep);
  box-shadow: var(--shadow-sm);
}
.step .step-ic { width:30px; height:30px; color:var(--sage); margin-bottom:6px; }
.step h3 { font-size:1.5rem; color:var(--olive-deep); margin-bottom:8px; }
.step p { color:var(--ink-soft); font-size:.97rem; max-width:30ch; margin:0 auto; }

/* ============ TÉMOIGNAGES ============ */
.testimonials { background: var(--cream-light); }
.tgrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.tcard {
  background:var(--paper); border:1px solid rgba(125,141,92,.16);
  border-radius:var(--radius); padding:34px 30px; position:relative;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px;
}
.tcard .quote-mark { font-family:'Cormorant Garamond',serif; font-size:4rem; line-height:.6; color:var(--sage-soft); height:30px; }
.tcard p { color:var(--ink); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:1.35rem; line-height:1.4; flex:1; }
.tcard .author { display:flex; align-items:center; gap:12px; }
.tcard .author .ava {
  width:42px;height:42px;border-radius:50%; background:var(--sage); color:#fff;
  display:flex;align-items:center;justify-content:center; font-weight:700; flex:none;
  font-family:'Cormorant Garamond',serif; font-size:1.2rem;
}
.tcard .author b { color:var(--olive-deep); font-size:.98rem; display:block; }
.tcard .author small { color:var(--brown); font-size:.82rem; }
.tcard .stars { color:#caa54a; letter-spacing:2px; font-size:.95rem; }

/* ============ BOUTON WHATSAPP FLOTTANT ============ */
.wa-float {
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .3s; animation: wa-pulse 2.4s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.08); }
.wa-float svg { width:30px; height:30px; }
@keyframes wa-pulse { 0%,100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7)} 50%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7), 0 0 0 12px rgba(37,211,102,.12)} }

/* ============ EXPÉRIENCE ============ */
.experience { background: var(--cream); position:relative; }
.exp-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
.exp-visual { position: relative; }
.exp-photo {
  width:100%; aspect-ratio: 5/4;
  border-radius: 40px;
  background:
    linear-gradient(160deg, rgba(139,111,71,.35), rgba(125,141,92,.4)),
    var(--brown-soft);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.exp-photo > svg { width:80px;height:80px; color: rgba(255,255,255,.8); z-index:1; }
.exp-photo .ph-label {
  position:absolute; inset:auto 0 0 0; padding:18px; text-align:center;
  color:#fff; font-size:.78rem; background:linear-gradient(transparent, rgba(68,80,47,.5)); z-index:1;
}
.heart-quote {
  position:absolute; bottom:-28px; right:-12px;
  background: var(--paper); color: var(--olive-deep);
  padding: 18px 26px; border-radius: 22px;
  box-shadow: var(--shadow-sm);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.25rem;
  display:flex; align-items:center; gap:10px; z-index:4;
}
.heart-quote svg { width:22px;height:22px; color: var(--brown); }

.exp-list { list-style:none; display:flex; flex-direction:column; gap:18px; margin-top: 10px; }
.exp-list li { display:flex; gap:16px; align-items:flex-start; }
.exp-list .check {
  flex:none; width:30px; height:30px; border-radius:50%;
  background: var(--sage); color:#fff; display:flex; align-items:center; justify-content:center;
  margin-top:2px; box-shadow: 0 8px 16px -8px rgba(90,107,63,.9);
}
.exp-list .check svg { width:16px; height:16px; }
.exp-list b { color: var(--olive-deep); font-weight:700; font-size:1.05rem; }
.exp-list span { color: var(--ink-soft); display:block; font-size:.95rem; }

/* ============ SECTEUR ============ */
.secteur { background: var(--paper); }
.secteur-inner {
  background: linear-gradient(135deg, var(--olive), var(--olive-deep));
  border-radius: 40px; color: var(--cream);
  padding: clamp(40px,6vw,70px); text-align:center;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow);
}
.secteur-inner::after {
  content:""; position:absolute; right:-60px; top:-60px;
  width:260px;height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
}
.secteur-inner .pin { width:54px;height:54px; margin:0 auto 18px; color: var(--sage-soft); position:relative; z-index:1; }
.secteur-inner h2 { font-size: clamp(2rem,4vw,3rem); color:#fff; margin-bottom:8px; position:relative; z-index:1; }
.secteur-inner .place { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.8rem,3.5vw,2.6rem); color: var(--cream); position:relative; z-index:1; }
.secteur-inner p { color: rgba(244,239,227,.8); max-width:46ch; margin: 14px auto 0; position:relative; z-index:1; }

/* ============ CONTACT ============ */
.contact { background: var(--cream); }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:54px; align-items:flex-start; }
.contact-card {
  background: var(--paper); border-radius: var(--radius);
  padding: clamp(34px,4vw,52px); box-shadow: var(--shadow-sm);
  border: 1px solid rgba(125,141,92,.16);
}
.contact-card h2 { font-size: clamp(2.2rem,4vw,3rem); color:var(--olive-deep); margin: 12px 0 10px; }
.contact-row { display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px dashed rgba(125,141,92,.3); }
.contact-row .ic { width:50px;height:50px;border-radius:14px; background: var(--sage); color:#fff; display:flex;align-items:center;justify-content:center; flex:none; transition: background .3s; }
.contact-row:hover .ic { background: var(--olive); }
.contact-row .ic svg{width:22px;height:22px;}
.contact-row small{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown); }
.contact-row b{ font-size:1.2rem; color:var(--olive-deep); font-weight:700; }

/* ---------- formulaire ---------- */
.contact-form { margin-top: 22px; display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); font-weight:700; }
.field input, .field textarea {
  font-family:'Mulish',sans-serif; font-size:1rem; color:var(--ink);
  background: var(--cream-light);
  border:1.5px solid rgba(125,141,92,.25); border-radius:14px;
  padding:13px 16px; resize:vertical; transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus {
  outline:none; border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(125,141,92,.15);
}
.field input.invalid, .field textarea.invalid { border-color: var(--danger); box-shadow:0 0 0 4px rgba(180,85,63,.12); }
.field .err { font-size:.78rem; color:var(--danger); min-height:1em; }
.consent { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.consent input { width:18px; height:18px; margin-top:3px; accent-color: var(--olive); flex:none; cursor:pointer; }
.consent a { color:var(--olive); text-decoration:underline; text-underline-offset:2px; }
.form-note { font-size:.84rem; color:var(--ink-soft); }
.form-status { font-weight:600; padding:12px 16px; border-radius:14px; display:none; }
.form-status.ok { display:block; background:rgba(125,141,92,.16); color:var(--olive-deep); }
.form-status.warn { display:block; background:rgba(180,85,63,.12); color:var(--danger); }

.contact-aside { padding-top: 10px; }
.contact-aside .big-quote {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size: clamp(1.8rem,3.4vw,2.7rem); color: var(--olive); line-height:1.25;
}
.contact-aside .big-quote .hl { color: var(--brown); }
.contact-aside .deco-heart { width:44px;height:44px;color:var(--sage);margin:0 auto 18px;display:block; }

/* ============ PAGE LÉGALE ============ */
.legal { padding: 150px 0 90px; background: var(--cream-light); min-height: 70vh; }
.legal .back { display:inline-flex; align-items:center; gap:8px; color:var(--olive); font-weight:600; margin-bottom:30px; }
.legal .back svg { width:18px; height:18px; }
.legal h1 { font-size: clamp(2.4rem,5vw,3.6rem); color:var(--olive-deep); margin-bottom:10px; }
.legal .intro { color:var(--ink-soft); margin-bottom:40px; max-width:60ch; }
.legal h2 { font-size:1.7rem; color:var(--olive); margin:34px 0 12px; }
.legal p, .legal li { color:var(--ink); line-height:1.75; }
.legal ul { padding-left:22px; margin:10px 0; }
.legal li { margin-bottom:6px; }
.legal a { color:var(--olive); text-decoration:underline; text-underline-offset:2px; }
.legal .card-box { background:var(--paper); border:1px solid rgba(125,141,92,.16); border-radius:var(--radius); padding:28px 30px; margin:14px 0; box-shadow:var(--shadow-sm); }
.legal .updated { margin-top:40px; font-size:.85rem; color:var(--ink-soft); font-style:italic; }

/* ============ PIED DE PAGE ============ */
footer {
  background: var(--olive-deep); color: var(--cream);
  padding: 50px 0 34px;
}
.foot-values { display:flex; align-items:center; justify-content:center; gap: clamp(16px,4vw,40px); flex-wrap:wrap; margin-bottom: 30px; }
.foot-values span { font-family:'Cormorant Garamond',serif; letter-spacing:.2em; text-transform:uppercase; font-size:1.1rem; display:flex; align-items:center; gap:12px; }
.foot-values svg{ width:15px;height:15px;color:var(--sage-soft); }
.foot-bottom { text-align:center; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; color: rgba(244,239,227,.65); font-size:.85rem; }
.foot-brand { font-family:'Cormorant Garamond',serif; letter-spacing:.2em; color: var(--cream); font-size:1.05rem; }

/* ============ ANIMATIONS AU SCROLL ============ */
.reveal { opacity:0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s} .reveal.d5{transition-delay:.4s} .reveal.d6{transition-delay:.48s}

/* apparition au chargement (hero) */
.load { opacity:0; transform: translateY(28px); animation: load .9s cubic-bezier(.2,.7,.2,1) forwards; }
.load.l1{animation-delay:.1s}.load.l2{animation-delay:.22s}.load.l3{animation-delay:.34s}
.load.l4{animation-delay:.46s}.load.l5{animation-delay:.58s}
@keyframes load { to { opacity:1; transform:none; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns:1fr; gap:50px; }
  .hero-visual{ order:-1; }
  .about-grid, .exp-grid, .contact-grid { grid-template-columns:1fr; gap:44px; }
  /* « Qui suis-je » : centrer le bloc texte quand il passe sous le portrait */
  .about-copy { text-align: center; }
  .about-copy .leaf-rule { justify-content: center !important; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card.feature { grid-column: auto; }
  .steps { grid-template-columns: 1fr; gap:36px; }
  .steps::before { display:none; }
  .tgrid { grid-template-columns: 1fr; }
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .nav-links.open {
    display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:100%; right:0; left:0;
    background: var(--paper); padding:24px 6vw; gap:18px; box-shadow: var(--shadow-sm);
  }
  .floating-badge{ width:108px;height:108px; right:auto; left:2%; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .values .row { gap:14px; }
  .values .v { font-size:1.15rem; }
  .heart-quote{ right:auto; left:50%; transform:translateX(-50%); bottom:-24px; }
  .hero{ padding-top:140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, .photo-blob, .floating-badge { animation: none !important; transition: none !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}