:root{
  --bg: #ffffff;
  --bg-alt: #f6fbfb;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 8px 32px rgba(15, 23, 42, 0.06);
  --brand: #46a6a9;
  --brand-ink: #0d6f73;
  --radius: 16px;
  --radius-lg: 24px;
  --max: 1200px;
  /* Espacement généreux type centre médical premium */
  --space-section: 5.5rem;
  --space-block: 2.5rem;
  --space-element: 1.25rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:12px;
  transform: translateY(-140%);
  background: var(--text); color: white;
  padding: 10px 12px; border-radius: 10px;
  z-index: 1000;
}
.skip-link:focus{transform: translateY(0)}

.container{max-width: var(--max); margin:0 auto; padding: 0 24px}
.container--narrow{max-width: 720px; margin:0 auto; padding: 0 24px}

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.site-header[data-elevate="true"]{box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 12px 0}

.brand{display:flex; align-items:center; gap: 12px; text-decoration:none}
.brand-logo{
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-weight: 800; letter-spacing: 0.08em; font-size: 14px; color: var(--brand-ink)}
.brand-sub{font-size: 12px; color: var(--muted)}

.nav{display:flex; align-items:center; gap: 16px}
.nav a{
  text-decoration:none;
  font-weight: 650;
  color: rgba(15, 23, 42, 0.85);
  padding: 10px 10px;
  border-radius: 12px;
}
.nav a:hover{background: rgba(70,166,169,0.10)}

.nav-toggle{
  display:none;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  border-radius: 14px;
  padding: 10px 12px;
}
.nav-toggle-lines{
  display:inline-block; width: 18px; height: 12px; position: relative;
}
.nav-toggle-lines::before, .nav-toggle-lines::after, .nav-toggle-lines{
  background: rgba(15,23,42,0.75);
}
.nav-toggle-lines::before, .nav-toggle-lines::after{
  content:""; position:absolute; left:0; width: 18px; height: 2px; border-radius: 2px;
}
.nav-toggle-lines::before{top:0}
.nav-toggle-lines::after{bottom:0}
.nav-toggle-lines{height:2px; border-radius:2px; top: 5px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 750;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: var(--brand);
  color: white;
  box-shadow: 0 14px 26px rgba(70,166,169,0.24);
}
.btn-primary:hover{background: #3a9a9d}
.btn-ghost{
  background: rgba(255,255,255,0.70);
  border-color: rgba(15,23,42,0.12);
}
.btn-ghost:hover{background: rgba(70,166,169,0.10); border-color: rgba(70,166,169,0.22)}
.btn-small{padding: 10px 12px; border-radius: 12px; font-size: 14px}

/* ---- Hero type Alegria: titre fort, peu de bruit, CTA clair ---- */
.hero{
  padding: var(--space-section) 0;
  min-height: 52vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1000px 500px at 20% 30%, rgba(70,166,169,0.08), transparent 55%),
    radial-gradient(800px 400px at 80% 20%, rgba(13,111,115,0.06), transparent 50%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero .container{width: 100%}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block);
  align-items: center;
}
.hero-copy{max-width: 28em}
.kicker{
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(70,166,169,0.08);
  color: var(--brand-ink);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-element);
}
.hero h1{
  margin: 0 0 var(--space-element);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.hero .lead{
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--space-block);
  max-width: 26em;
}
.hero-cta{display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-block)}
.hero-cta .btn{padding: 1rem 1.5rem; font-size: 1rem}
.hero-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: grid;
  gap: 0.75rem;
}
.hero-bullets li{
  padding-left: 1.5rem;
  position: relative;
}
.hero-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.hero-card .card{
  padding: var(--space-block);
  box-shadow: var(--shadow-soft);
}

h1{font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2}
.card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-block);
}
.card-title{margin: 0 0 0.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600}
.card-text{margin: 0 0 0.25rem; font-weight: 600; color: var(--text)}
.card-text a{color: var(--brand-ink)}
.card-note{margin: 0.5rem 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5}
.card-link{display: inline-block; margin-top: 0.5rem; color: var(--brand-ink); font-weight: 600; text-decoration: none}
.card-link:hover{text-decoration: underline}
.divider{height: 1px; background: var(--border); margin: var(--space-element) 0}

/* Sections: espacement généreux type centre médical */
.section{padding: var(--space-section) 0}
.section-alt{background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border)}
.section-head{max-width: 38em; margin-bottom: var(--space-block)}
.section-head h2{margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25}
.section-head p{margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6}

.toolbar{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.search{
  flex: 1 1 280px;
  display:flex;
}
.search input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  outline: none;
}
.search input:focus{border-color: rgba(70,166,169,0.45); box-shadow: 0 0 0 4px rgba(70,166,169,0.15)}

.services{
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-element);
}
.service{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-block);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.service:hover{box-shadow: var(--shadow); border-color: rgba(70,166,169,0.2)}
.service-link{color: inherit; text-decoration: none}
.service-link:hover{border-color: rgba(70,166,169,0.25)}

.services-compact .service{gap: 0.5rem}
.services-compact .service p{margin: 0; font-size: 0.9375rem}

.split{
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-block);
  align-items: start;
}
.split-copy h3{margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700}
.split-copy p{margin: 0 0 1rem; color: var(--text); line-height: 1.6; font-size: 1rem}
.split-copy p:last-of-type{margin-bottom: 0}
.founder{display: flex; gap: var(--space-element); align-items: flex-start}
.founder-photo{
  width: 140px;
  height: 140px;
  min-width: 140px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.founder--center{align-items: center}
.founder-photo--lg{
  width: 220px;
  height: 220px;
  min-width: 220px;
}
.founder > div{flex: 1; min-width: 0}
.center{display: flex; justify-content: center}

.stack-center{
  display: grid;
  justify-items: center;
  gap: var(--space-block);
}
.stack-center h3{text-align: left; margin: 0 0 0.5rem}
.founder-card{max-width: 860px; width: 100%}

/* Carousel services (tuiles + flèches) */
.carousel{
  position: relative;
  margin-top: var(--space-block);
}
.carousel-track{
  display: flex;
  gap: var(--space-element);
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 24px;
  padding: 6px 6px 18px;
  -webkit-overflow-scrolling: touch;
}
.carousel-track:focus{outline: none; box-shadow: 0 0 0 4px rgba(70,166,169,0.14); border-radius: var(--radius-lg)}
.carousel-item{
  scroll-snap-align: center;
  flex: 0 0 min(520px, 86%);
}
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: rgba(15,23,42,0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover{box-shadow: var(--shadow)}
.carousel-btn:active{transform: translateY(-50%) scale(0.98)}
.carousel-btn[disabled]{opacity: 0.45; cursor: default}
.carousel [data-carousel-prev]{left: -10px}
.carousel [data-carousel-next]{right: -10px}

/* Page hero (pages internes): grand titre, sous-titre, breadcrumb */
.page-hero{
  padding: var(--space-section) 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(70,166,169,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1{margin: 0 0 0.5rem}
.page-hero .lead{margin: 0 0 1rem; color: var(--muted); font-size: 1.125rem}
.breadcrumbs{margin: 0; color: var(--muted); font-size: 0.875rem}
.breadcrumbs a{color: var(--brand-ink); text-decoration: none}
.breadcrumbs a:hover{text-decoration: underline}
.content{padding: var(--space-section) 0}
.content p{color: var(--text); line-height: 1.65; margin: 0 0 1rem}
.content ul{color: var(--text); line-height: 1.65; padding-left: 1.25rem}
.content li{margin: 0.5rem 0}
.content h2,.content h3{margin: 1.5rem 0 0.5rem; font-weight: 700}
.content code{font-size: 0.875em; background: var(--bg-alt); padding: 0.2em 0.45em; border-radius: 6px; color: var(--muted)}

.service h3{margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3}
.muted{color: var(--muted)}
.block-intro{max-width: 36em; margin: 0 auto var(--space-block); text-align: center; color: var(--muted); font-size: 1.0625rem; line-height: 1.6}
.service-head p{margin: 6px 0 0}
.service-details{
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 10px;
}
.service-details summary{
  cursor:pointer;
  list-style:none;
  font-weight: 750;
  color: rgba(15,23,42,0.82);
}
.service-details summary::-webkit-details-marker{display:none}
.service-details summary::after{
  content:"＋";
  float:right;
  color: rgba(15,23,42,0.55);
}
.service-details[open] summary::after{content:"—"}
.service-body{padding-top: 10px; color: rgba(15,23,42,0.82)}
.service-body p{margin: 0 0 10px}
.link{color: var(--brand-ink); font-weight: 750; text-decoration:none}
.link:hover{text-decoration: underline}

.steps{
  margin-top: var(--space-block);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-element);
}
.step{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-block);
  box-shadow: var(--shadow-soft);
}
.step h3{margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700}
.step p{margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55}

.about{display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-block); align-items: start}
.about h2{margin: 0 0 0.5rem}
.about p{margin: 0 0 1rem; color: var(--text); line-height: 1.6}
.about-links{display: flex; gap: 1rem; flex-wrap: wrap}
.panel{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-block);
  box-shadow: var(--shadow-soft);
}
.panel h3{margin: 0 0 0.5rem}
.panel-cta{display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem}
.panel-note{margin: 1rem 0 0; color: var(--muted); font-size: 0.875rem}

.contact-grid{
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-element);
}
.contact-card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-block);
  box-shadow: var(--shadow-soft);
}
.contact-card h3{margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700}
.contact-card p{margin: 0 0 0.25rem; font-size: 0.9375rem}
.fineprint{margin-top: var(--space-element); color: var(--muted); font-size: 0.8125rem}

.site-footer{
  padding: var(--space-block) 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  display:none;
  gap: 10px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(15,23,42,0.10);
  z-index: 60;
}
.mobile-cta-btn{
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-weight: 850;
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--brand);
  color: white;
}
.mobile-cta-btn-secondary{
  background: rgba(15,23,42,0.92);
}

/* Animations: respect reduced motion */
.reveal{opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity: 1; transform: translateY(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .reveal{transition:none; opacity: 1; transform:none}
}

/* Responsive */
@media (max-width: 980px){
  .hero{min-height: auto; padding: var(--space-block) 0}
  .hero-grid{grid-template-columns: 1fr; gap: var(--space-block)}
  .hero-card{order: -1}
  .services{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .steps{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .founder-photo{width: 120px; height: 120px; min-width: 120px}
  .founder-photo--lg{width: 180px; height: 180px; min-width: 180px}
  .carousel [data-carousel-prev]{left: -6px}
  .carousel [data-carousel-next]{right: -6px}
}
@media (max-width: 760px){
  :root{--space-section: 3.5rem; --space-block: 2rem}
  .nav-toggle{display: inline-flex}
  .nav{
    position: fixed;
    inset: 64px 12px auto 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    box-shadow: var(--shadow);
  }
  .nav a{padding: 0.75rem 1rem}
  .nav.is-open{display: flex}
  .btn-small{width: 100%}
  .mobile-cta{display: flex}
  body{padding-bottom: 78px}
  .services{grid-template-columns: 1fr}
  .founder{flex-direction: column; align-items: flex-start}
  .founder-photo{width: 100px; height: 100px; min-width: 100px}
  .founder-photo--lg{width: 170px; height: 170px; min-width: 170px}
  .carousel-btn{display:none}
  .carousel-track{padding: 6px 0 14px; scroll-padding: 12px}
  .carousel-item{flex-basis: 88%}
}