/* =========================================================
   BOUSSOLEA — Feuille de styles principale
   Palette : #0F6B5B / #FF9A3D / #1F2D3D / #E8ECEF
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --vert:        #0F6B5B;
  --vert-800:    #0B5347;
  --vert-900:    #083A31;
  --vert-100:    #DCEAE7;
  --vert-050:    #EEF5F3;

  --orange:      #FF9A3D;
  --orange-600:  #EE8524;
  --orange-050:  #FFF4E9;

  --ardoise:     #1F2D3D;
  --ardoise-80:  rgba(31,45,61,.80);
  --ardoise-62:  rgba(31,45,61,.62);
  --ardoise-42:  rgba(31,45,61,.42);
  --ardoise-15:  rgba(31,45,61,.15);

  --gris:        #E8ECEF;
  --gris-050:    #F6F8F9;
  --blanc:       #FFFFFF;
  --bord:        #E2E8EC;

  --ombre-1: 0 1px 2px rgba(31,45,61,.05), 0 6px 16px rgba(31,45,61,.06);
  --ombre-2: 0 2px 6px rgba(31,45,61,.06), 0 18px 40px rgba(31,45,61,.10);
  --ombre-3: 0 26px 60px rgba(15,107,91,.18);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-full: 999px;

  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1180px;
  --gouttiere: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 8.5vw, 128px);

  --t: .28s cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.7;
  color:var(--ardoise-80);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ardoise);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.05rem, 1.35rem + 3.1vw, 3.7rem); }
h2{ font-size:clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3{ font-size:clamp(1.15rem, 1.02rem + .55vw, 1.4rem); line-height:1.28; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}
::selection{ background:var(--vert); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--vert); color:#fff; padding:14px 22px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip:focus{ left:0; }

/* ---------- 3. Layout ---------- */
.wrap{ width:min(100% - (var(--gouttiere) * 2), var(--max)); margin-inline:auto; }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px, 6vw, 80px); }
.section--gris{ background:var(--gris-050); }
.section--vert{ background:var(--vert); color:rgba(255,255,255,.86); }
.section--vert h1,.section--vert h2,.section--vert h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--orange); flex:none;
}
.section--vert .eyebrow{ color:rgba(255,255,255,.9); }

.lead{ font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem); color:var(--ardoise-62); line-height:1.72; }
.section-head{ max-width:740px; margin-bottom:clamp(36px, 5vw, 62px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head p{ margin-top:1.1rem; }

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-weight:700; font-size:.97rem; letter-spacing:-.005em;
  padding:.95rem 1.6rem; border-radius:var(--r-full); border:1.5px solid transparent;
  cursor:pointer; transition:transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  white-space:nowrap; text-align:center;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--primary{ background:var(--orange); color:#3A2205; box-shadow:0 8px 22px rgba(255,154,61,.32); }
.btn--primary:hover{ background:var(--orange-600); transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,154,61,.4); }
.btn--vert{ background:var(--vert); color:#fff; }
.btn--vert:hover{ background:var(--vert-800); transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,107,91,.28); }
.btn--ghost{ border-color:var(--ardoise-15); color:var(--ardoise); }
.btn--ghost:hover{ border-color:var(--vert); color:var(--vert); background:var(--vert-050); }
.btn--ghost-light{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn--lg{ padding:1.1rem 2rem; font-size:1.03rem; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row--center{ justify-content:center; }

.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.94rem; color:var(--vert);
  transition:gap var(--t), color var(--t);
}
.arrow-link::after{ content:"→"; transition:transform var(--t); }
.arrow-link:hover{ gap:.85rem; color:var(--vert-800); }

/* ---------- 5. Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.header.is-scrolled{ border-bottom-color:var(--bord); box-shadow:0 6px 24px rgba(31,45,61,.055); }
.header__inner{ display:flex; align-items:center; gap:1.5rem; min-height:76px; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__name{
  font-family:var(--font-display); font-weight:800; font-size:1.28rem;
  letter-spacing:.005em; color:var(--vert); line-height:1;
}
.brand__tag{
  display:block; font-family:var(--font-body); font-weight:500; font-size:.6rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ardoise-42); margin-top:.28rem;
}

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__link{
  display:block; padding:.6rem .95rem; border-radius:var(--r-full);
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--ardoise-80);
  transition:color var(--t), background var(--t);
}
.nav__link:hover{ color:var(--vert); background:var(--vert-050); }
.nav__link[aria-current="page"]{ color:var(--vert); }
.nav__link[aria-current="page"]::after{
  content:""; display:block; height:2px; width:18px; margin:.28rem auto 0;
  border-radius:2px; background:var(--orange);
}
.header .btn{ padding:.72rem 1.35rem; font-size:.92rem; }

.burger{
  display:none; margin-left:auto; width:46px; height:46px;
  border:1px solid var(--bord); background:#fff; border-radius:var(--r-sm);
  cursor:pointer; position:relative; flex:none;
}
.burger span{
  position:absolute; left:50%; width:20px; height:2px; border-radius:2px;
  background:var(--ardoise); transform:translateX(-50%);
  transition:transform var(--t), opacity var(--t), top var(--t);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(56px, 8vw, 108px) clamp(56px, 8vw, 104px);
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(15,107,91,.09), transparent 62%),
    radial-gradient(760px 420px at 4% 108%, rgba(255,154,61,.10), transparent 62%),
    var(--blanc);
}
.hero__inner{ max-width:900px; }
.hero h1{ margin-bottom:1.4rem; }
.hero h1 em{ font-style:normal; color:var(--vert); }
.hero__lead{ max-width:660px; margin-bottom:2.2rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; margin-top:2.6rem;
  padding-top:1.7rem; border-top:1px solid var(--bord);
  font-size:.87rem; color:var(--ardoise-62);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:.55rem; }
.hero__meta span::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none;
}

/* ---------- 7. Cartes ---------- */
.grid{ display:grid; gap:clamp(18px, 2.2vw, 26px); }
.grid--2{ grid-template-columns:repeat(2, 1fr); }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

.card{
  position:relative; background:#fff; border:1px solid var(--bord);
  border-radius:var(--r-md); padding:clamp(24px, 2.6vw, 34px);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--ombre-2); border-color:transparent; }
.card__num{
  font-family:var(--font-display); font-weight:800; font-size:.78rem; letter-spacing:.14em;
  color:var(--orange); margin-bottom:1rem;
}
.card__icon{
  width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--vert-050); color:var(--vert); margin-bottom:1.25rem; flex:none;
}
.card__icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.7rem; }
.card p{ font-size:.95rem; color:var(--ardoise-62); }
.card .arrow-link{ margin-top:auto; padding-top:1.3rem; }

.card--vert{ background:var(--vert); border-color:transparent; color:rgba(255,255,255,.84); }
.card--vert h3{ color:#fff; }
.card--vert p{ color:rgba(255,255,255,.78); }
.card--vert .card__icon{ background:rgba(255,255,255,.14); color:#fff; }
.card--vert .arrow-link{ color:#fff; }

.ticks{ display:grid; gap:.7rem; margin-top:1.3rem; }
.ticks li{ position:relative; padding-left:1.75rem; font-size:.94rem; color:var(--ardoise-62); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:15px; height:15px; border-radius:50%;
  background:var(--vert-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6B5B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.card--vert .ticks li{ color:rgba(255,255,255,.8); }
.card--vert .ticks li::before{ background-color:rgba(255,255,255,.16); }

/* ---------- 8. Pôles (accueil) ---------- */
.pole{ display:flex; flex-direction:column; gap:.85rem; }
.pole__kicker{
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--vert);
}
.pole__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:1.2rem; }
.tag{
  font-size:.78rem; font-weight:500; padding:.32rem .7rem; border-radius:var(--r-full);
  background:var(--gris-050); color:var(--ardoise-62); border:1px solid var(--bord);
}

/* ---------- 9. Méthode / étapes ---------- */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:88px 1fr; gap:clamp(18px,3vw,44px);
  padding-block:clamp(26px,3.4vw,40px); border-top:1px solid var(--bord);
}
.step:last-child{ border-bottom:1px solid var(--bord); }
.step__num{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.1em;
  color:var(--orange);
}
.step h3{ margin-bottom:.55rem; }
.step p{ max-width:62ch; font-size:.97rem; color:var(--ardoise-62); }

/* ---------- 10. Bandeau CTA ---------- */
.cta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--vert-900) 0%, var(--vert) 58%, var(--vert-800) 100%);
  border-radius:var(--r-lg); padding:clamp(38px, 5.5vw, 74px);
  color:rgba(255,255,255,.86);
}
.cta::after{
  content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,154,61,.30), transparent 68%);
}
.cta__inner{ position:relative; z-index:1; max-width:680px; }
.cta h2{ color:#fff; margin-bottom:1rem; }
.cta p{ color:rgba(255,255,255,.82); margin-bottom:2rem; }
.cta__contacts{
  display:flex; flex-wrap:wrap; gap:1rem 2.4rem; margin-top:1.9rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.18); font-size:.93rem;
}
.cta__contacts a{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; color:#fff; }
.cta__contacts a:hover{ color:var(--orange); }
.cta__contacts svg{ width:17px; height:17px; }

/* ---------- 11. Page héro interne ---------- */
.pagehead{
  padding-block:clamp(48px, 6vw, 84px) clamp(36px, 4.5vw, 56px);
  background:var(--gris-050);
  border-bottom:1px solid var(--bord);
}
.pagehead--vert{ background:var(--vert); border-bottom:0; color:rgba(255,255,255,.85); }
.pagehead--vert h1{ color:#fff; }
.pagehead--vert .lead{ color:rgba(255,255,255,.8); }
.pagehead--vert .eyebrow{ color:rgba(255,255,255,.9); }
.pagehead__inner{ max-width:820px; }

.breadcrumb{ font-size:.83rem; color:var(--ardoise-42); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color:var(--vert); }
.breadcrumb span{ margin-inline:.45rem; }

/* ---------- 12. Services ---------- */
.sommaire{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:.2rem;
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-md);
  padding:1.4rem; align-self:start;
}
.sommaire__title{
  font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ardoise-42); margin-bottom:.8rem;
}
.sommaire a{
  display:block; padding:.5rem .75rem; border-radius:var(--r-xs); font-size:.92rem;
  color:var(--ardoise-62); transition:background var(--t), color var(--t);
}
.sommaire a:hover{ background:var(--vert-050); color:var(--vert); }
.sommaire a.is-active{ background:var(--vert-050); color:var(--vert); font-weight:600; }

.pole-block{ scroll-margin-top:110px; }
.pole-block + .pole-block{ margin-top:clamp(56px,7vw,96px); }
.pole-block__head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding-bottom:1.2rem; margin-bottom:clamp(24px,3vw,38px); border-bottom:2px solid var(--vert);
}
.pole-block__head h2{ margin:0; }
.pole-block__head p{ margin:0; font-size:.95rem; color:var(--ardoise-62); }

.service{
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-md);
  padding:clamp(26px, 3vw, 40px); display:flex; flex-direction:column;
  transition:box-shadow var(--t), border-color var(--t);
}
.service:hover{ box-shadow:var(--ombre-1); border-color:var(--vert-100); }
.service__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.service__num{
  font-family:var(--font-display); font-weight:800; font-size:.8rem;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--vert); color:#fff; flex:none;
}
.service h3{ margin:0; }

/* ---------- 13. À propos ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(32px,5vw,80px); align-items:start; }
.portrait{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, var(--vert-050), var(--vert-100));
  aspect-ratio:4/5; display:grid; place-items:center; border:1px solid var(--bord);
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait__fallback{ width:52%; opacity:.5; }

.quote{
  position:relative; margin:0; padding:clamp(28px,3.6vw,46px) clamp(26px,3.6vw,48px);
  background:var(--vert-050); border-left:4px solid var(--orange); border-radius:0 var(--r-md) var(--r-md) 0;
}
.quote p{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem, 1rem + .9vw, 1.65rem);
  line-height:1.42; color:var(--vert-900); margin:0; letter-spacing:-.02em;
}
.quote cite{
  display:block; margin-top:1.2rem; font-style:normal; font-size:.86rem;
  font-weight:600; color:var(--ardoise-42); letter-spacing:.04em;
}

.values{ display:grid; gap:1.6rem; }
.value{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; }
.value__icon{
  width:40px; height:40px; border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--orange-050); color:var(--orange-600); flex:none;
}
.value__icon svg{ width:19px; height:19px; }
.value h3{ font-size:1.05rem; margin-bottom:.35rem; }
.value p{ font-size:.93rem; color:var(--ardoise-62); }

/* ---------- 14. Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(32px,4.5vw,64px); align-items:start; }

.form{ display:grid; gap:1.25rem; }
.field{ display:grid; gap:.45rem; }
.field label{
  font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--ardoise);
}
.field label .req{ color:var(--orange-600); }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--bord); border-radius:var(--r-sm);
  background:#fff; transition:border-color var(--t), box-shadow var(--t); font-size:.96rem;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover,.field textarea:hover{ border-color:#cfd8de; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--vert); box-shadow:0 0 0 4px rgba(15,107,91,.1);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:#D64B3C; }
.field__hint{ font-size:.79rem; color:var(--ardoise-42); }
.field__error{ font-size:.8rem; color:#C0392B; display:none; }
.field.has-error input,.field.has-error textarea{ border-color:#D64B3C; }
.field.has-error .field__error{ display:block; }

.consent{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:.85rem; color:var(--ardoise-62); }
.consent input{ width:18px; height:18px; margin-top:.18rem; accent-color:var(--vert); }

.form-status{
  display:none; padding:1rem 1.2rem; border-radius:var(--r-sm); font-size:.92rem;
}
.form-status.is-ok{ display:block; background:var(--vert-050); color:var(--vert-800); border:1px solid var(--vert-100); }
.form-status.is-ko{ display:block; background:#FDECEA; color:#9B2C22; border:1px solid #F5C6C0; }

.infos{ display:grid; gap:1.5rem; }
.info{
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-md); padding:1.5rem 1.6rem;
  display:flex; gap:1rem; align-items:flex-start; transition:box-shadow var(--t), border-color var(--t);
}
.info:hover{ box-shadow:var(--ombre-1); border-color:var(--vert-100); }
.info__icon{
  width:42px; height:42px; border-radius:var(--r-xs); background:var(--vert-050); color:var(--vert);
  display:grid; place-items:center; flex:none;
}
.info__icon svg{ width:20px; height:20px; }
.info__label{
  font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ardoise-42); margin-bottom:.25rem;
}
.info__value{ font-family:var(--font-display); font-weight:700; color:var(--ardoise); font-size:1.02rem; }
.info__value a:hover{ color:var(--vert); }
.info__note{ font-size:.85rem; color:var(--ardoise-62); margin-top:.25rem; }

.vcard{
  background:linear-gradient(150deg, var(--vert-900), var(--vert) 70%);
  color:#fff; border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); position:relative; overflow:hidden;
}
.vcard::after{
  content:""; position:absolute; right:-70px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,154,61,.35), transparent 70%);
}
.vcard__inner{ position:relative; z-index:1; }
.vcard__logo{ width:46px; height:46px; margin-bottom:1.2rem; filter:brightness(0) invert(1); }
.vcard__name{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:#fff; letter-spacing:-.02em; }
.vcard__role{ font-size:.88rem; color:rgba(255,255,255,.72); margin-bottom:1.6rem; }
.vcard__list{ display:grid; gap:.75rem; margin-bottom:1.7rem; }
.vcard__list a{
  display:flex; align-items:center; gap:.7rem; font-size:.93rem; color:rgba(255,255,255,.92);
  transition:color var(--t);
}
.vcard__list a:hover{ color:var(--orange); }
.vcard__list svg{ width:17px; height:17px; flex:none; opacity:.75; }
.vcard__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.vcard .btn--primary{ box-shadow:none; }

/* ---------- 15. Mentions légales ---------- */
.legal{ max-width:800px; }
.legal h2{ margin-top:2.8rem; margin-bottom:.9rem; font-size:1.35rem; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ margin-top:1.8rem; margin-bottom:.5rem; font-size:1.02rem; }
.legal p,.legal li{ font-size:.95rem; color:var(--ardoise-62); }
.legal ul{ display:grid; gap:.5rem; margin-bottom:1.1rem; }
.legal ul li{ padding-left:1.2rem; position:relative; }
.legal ul li::before{
  content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--orange);
}
.legal a{ color:var(--vert); font-weight:600; }
.legal a:hover{ text-decoration:underline; }

/* ---------- 16. Footer ---------- */
.footer{ background:var(--ardoise); color:rgba(255,255,255,.62); padding-block:clamp(52px,6vw,78px) 0; }
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(38px,4.5vw,58px);
}
.footer h4{
  font-family:var(--font-display); font-size:.75rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; margin-bottom:1.1rem;
}
.footer__brand .brand__name{ color:#fff; }
.footer__brand .brand__tag{ color:rgba(255,255,255,.45); }
.footer__brand p{ margin-top:1.4rem; font-size:.9rem; max-width:34ch; line-height:1.72; }
.footer ul{ display:grid; gap:.6rem; }
.footer ul a{ font-size:.91rem; transition:color var(--t); }
.footer ul a:hover{ color:var(--orange); }
.footer address{ font-style:normal; display:grid; gap:.75rem; font-size:.91rem; }
.footer address a{ display:flex; align-items:center; gap:.6rem; }
.footer address a:hover{ color:var(--orange); }
.footer address svg{ width:16px; height:16px; opacity:.55; flex:none; }

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-block:1.6rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; align-items:center; justify-content:space-between;
  font-size:.83rem;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.footer__legal a:hover{ color:var(--orange); }

/* ---------- 17. Barre d'actions mobile ---------- */
.quickbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:.6rem;
  padding:.7rem calc(var(--gouttiere) * .6) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--bord);
}
.quickbar__btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1rem; border-radius:var(--r-full);
  font-family:var(--font-display); font-weight:700; font-size:.93rem;
}
.quickbar__btn svg{ width:17px; height:17px; }
.quickbar__btn--call{ background:var(--vert); color:#fff; }
.quickbar__btn--mail{ background:var(--orange); color:#3A2205; }

/* ---------- 18. Animations ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__brand p{ max-width:52ch; }
}

@media (max-width:960px){
  .about-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:340px; aspect-ratio:1/1; }
  .contact-grid{ grid-template-columns:1fr; }
  .services-layout{ grid-template-columns:1fr !important; }
  .sommaire{ display:none; }
}

@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:76px 0 auto 0; margin:0;
    background:#fff; border-bottom:1px solid var(--bord);
    padding:1rem var(--gouttiere) 1.6rem;
    box-shadow:0 20px 40px rgba(31,45,61,.1);
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:transform var(--t), opacity var(--t), visibility var(--t);
    max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__link{ padding:.9rem 1rem; border-radius:var(--r-sm); font-size:1.02rem; }
  .nav__link[aria-current="page"]::after{ display:none; }
  .nav__link[aria-current="page"]{ background:var(--vert-050); }
  .header .btn{ display:none; }
  .nav .btn{ display:inline-flex; margin-top:.9rem; }

  .quickbar{ display:flex; }
  body{ padding-bottom:76px; }
}

@media (max-width:720px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:.6rem; }
  .step__num{ font-size:.95rem; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .cta{ border-radius:var(--r-md); }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; }
  .vcard__actions .btn{ width:100%; }
}

@media (max-width:420px){
  :root{ --r-lg:20px; }
  .brand__tag{ display:none; }
}

/* =========================================================
   BLOG / ACTUALITÉS
   ========================================================= */
.posts{ display:grid; gap:0; max-width:860px; }

/* =========================================================
   BLOG / ACTUALITÉS
   ========================================================= */

/* ---- Liste des articles ---- */
.posts{
  display:grid;
  gap:0;
  max-width:860px;
}

.post{
  border-top:1px solid var(--bord);
}
.post:last-child{ border-bottom:1px solid var(--bord); }

.post__link{
  display:block;
  padding:clamp(28px,3.5vw,44px) 0;
  transition:padding-left var(--t);
}
.post__link:hover{ padding-left:10px; }
.post__link:hover .post__title{ color:var(--vert); }
.post__link:hover .arrow-link{ gap:.85rem; color:var(--vert-800); }

.post__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1.2rem;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ardoise-42);
  margin-bottom:1rem;
  text-transform:uppercase;
}
.post__cat{
  color:var(--vert);
  padding:.28rem .7rem;
  background:var(--vert-050);
  border-radius:var(--r-full);
  font-size:.72rem;
  letter-spacing:.08em;
}
.post__readtime{ color:var(--ardoise-42); }

.post__title{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);
  line-height:1.22;
  margin:0 0 .85rem;
  transition:color var(--t);
}
.post__excerpt{
  font-size:1rem;
  color:var(--ardoise-62);
  line-height:1.68;
  margin-bottom:1.2rem;
  max-width:62ch;
}

/* ---- Article (page de détail) ---- */
.article__body{
  max-width:760px;
  margin-inline:auto;
}

.article__body h2{
  margin-top:2.6rem;
  margin-bottom:.9rem;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);
}
.article__body h2:first-child{ margin-top:0; }

.article__body h3{
  margin-top:2rem;
  margin-bottom:.6rem;
  font-size:1.08rem;
}

.article__body p,
.article__body li{
  font-size:1.03rem;
  line-height:1.75;
  color:var(--ardoise-80);
}

.article__body p{ margin:0 0 1.3em; }

.article__body ul,
.article__body ol{
  margin:0 0 1.4em;
  padding-left:1.4em;
  display:grid;
  gap:.55rem;
}
.article__body ul{ list-style:disc; }
.article__body ol{ list-style:decimal; }
.article__body li{ padding-left:.3rem; }
.article__body li::marker{ color:var(--orange); }

.article__body blockquote{
  margin:2rem 0;
  padding:1.3rem 1.6rem;
  background:var(--vert-050);
  border-left:4px solid var(--orange);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-style:normal;
}
.article__body blockquote p{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--vert-900);
  margin:0;
  font-size:1.06rem;
  line-height:1.55;
}

.article__body a{
  color:var(--vert);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.article__body a:hover{ color:var(--vert-800); }

.article__body strong{ color:var(--ardoise); font-weight:700; }
.article__body em{ font-style:italic; }

/* ---- Bloc auteur ---- */
.article__author{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.3rem;
  align-items:start;
  margin-top:3.5rem;
  padding:1.7rem 1.8rem;
  background:var(--gris-050);
  border:1px solid var(--bord);
  border-radius:var(--r-md);
}
.article__author-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  color:var(--ardoise);
  letter-spacing:-.01em;
}
.article__author-role{
  font-size:.83rem;
  color:var(--vert);
  font-weight:600;
  margin-bottom:.55rem;
  letter-spacing:.02em;
}
.article__author-bio{
  font-size:.9rem;
  color:var(--ardoise-62);
  margin:0;
  line-height:1.6;
}

/* ---- Navigation article ---- */
.article__nav{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--bord);
}

/* ---- Pagination (optionnelle) ---- */
.pagination{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:3rem;
}
.pagination a,
.pagination__current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 1rem;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  border:1px solid var(--bord);
  background:#fff;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.pagination a:hover{ border-color:var(--vert); color:var(--vert); background:var(--vert-050); }
.pagination__current{ background:var(--vert); color:#fff; border-color:var(--vert); }

@media (max-width:600px){
  .article__author{ grid-template-columns:1fr; gap:.9rem; }
  .article__author img{ width:44px; height:44px; }
}