/* =========================================================
   Cabinet d'ergothérapie pédiatrique — Remouillé
   Feuille de style — identité visuelle proche du site Canva
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Patrick+Hand&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --creme:        #EEEEE3;
  --creme-2:      #E4E4D3;
  --encre:        #362E22;
  --sauge:        #9CB09E;
  --sauge-fonce:  #6E8770;
  --sauge-pale:   #C7D3C4;
  --foret:        #3C4A34;
  --noisette:     #7A5232;
  --noisette-cl:  #B98F63;
  --blanc:        #FFFFFF;

  --radius-lg: 30px;
  --radius-md: 18px;
  --shadow-soft: 0 14px 32px -16px rgba(54,46,34,0.28);

  --max-w: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--creme);
  color: var(--encre);
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family: 'Fredoka', sans-serif;
  color: var(--foret);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

h1{ font-size: clamp(1.9rem, 3.8vw, 2.9rem); text-transform:none; }
h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3{ font-size: 1.15rem; text-transform:none; }

p{ margin: 0 0 1em; }

a{ color: var(--noisette); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible{ outline: 3px solid var(--noisette); outline-offset: 3px; }

.accent{
  font-family: 'Patrick Hand', cursive;
  font-weight: 400;
  color: var(--noisette);
  text-transform: none;
}

.eyebrow{
  font-family: 'Patrick Hand', cursive;
  font-weight: 400;
  color: var(--noisette);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  display:inline-block;
  margin-bottom: 2px;
}

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

.dots{ display:inline-block; vertical-align: middle; margin-left: 14px; opacity:.85; }

header.site{
  padding: 20px 0;
  position: sticky; top:0;
  background: rgba(238,238,227,.94);
  backdrop-filter: blur(6px);
  z-index: 50;
  border-bottom: 1px solid rgba(60,74,52,.1);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.05rem; color: var(--foret);
  text-transform:uppercase;
}
nav.primary ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
nav.primary a{ color: var(--encre); font-weight:700; font-size:.95rem; }
nav.primary a[aria-current="page"]{ color: var(--noisette); }

.nav-toggle{ display:none; background:none; border:2px solid var(--foret); border-radius:10px; padding:8px 10px; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:22px; height:2px; background:var(--foret); position:relative; }
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:780px){
  .nav-toggle{ display:block; }
  nav.primary{ position:absolute; top:100%; left:0; right:0; background:var(--creme); border-bottom:1px solid rgba(60,74,52,.12); display:none; }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; gap:0; padding:8px 24px 20px; }
  nav.primary li{ padding:12px 0; border-bottom:1px solid rgba(60,74,52,.08); }
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--foret); color:#fff;
  padding: 15px 28px; border-radius: 999px;
  font-weight:800; font-size:1rem; border:none; cursor:pointer;
  box-shadow: var(--shadow-soft);
  font-family:'Nunito',sans-serif;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{ background: var(--sauge-fonce); text-decoration:none; transform: translateY(-2px); }
.btn.secondary{ background:transparent; color:var(--foret); border:2px solid var(--foret); box-shadow:none; }
.btn.secondary:hover{ background:var(--foret); color:#fff; }
.btn.whatsapp{ background:#3E7C4A; }
.btn.whatsapp:hover{ background:#2F5F39; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }

.pill-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--sauge-pale);
  color: var(--foret);
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  text-align:center;
  border-radius: 45% 55% 52% 48% / 55% 45% 55% 45%;
  padding: 26px 20px;
  min-height: 96px;
  box-shadow: var(--shadow-soft);
}

.hero{ padding: 52px 0 68px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.blob-frame{ position:relative; width:100%; aspect-ratio:1/1; max-width:400px; margin:0 auto; }
.blob-shape{
  position:absolute; inset:0;
  background: var(--sauge);
  opacity:.4;
  border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
  transform: rotate(-6deg);
}
.blob-shape.outline{
  inset: -14px;
  background: none;
  border: 3px solid var(--sauge);
  opacity:.7;
  transform: rotate(4deg);
}
.blob-photo{
  position:absolute; inset:9%;
  border-radius: 58% 42% 50% 50% / 45% 55% 45% 55%;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(150deg, var(--sauge) 0%, var(--foret) 140%);
  display:flex; align-items:center; justify-content:center;
}
.blob-photo img{ width:100%; height:100%; object-fit:cover; }
.blob-photo .placeholder-note{
  color: rgba(255,255,255,.9);
  font-family:'Caveat', cursive; font-weight:700;
  font-size:1.3rem; text-align:center; padding:20px;
}

.photo-round{ position:relative; width:130px; aspect-ratio:1/1; margin: 0 auto; }
.photo-round .blob-bg{
  position:absolute; inset:-8px;
  background: var(--sauge);
  opacity:.5;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
}
.photo-round .photo-inner{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;
  background: linear-gradient(150deg, var(--sauge), var(--foret));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
  box-shadow: var(--shadow-soft);
}
.photo-round .photo-inner img{ width:100%; height:100%; object-fit:cover; }

section{ padding: 54px 0; }
section.alt{ background: var(--creme-2); }

.card{ background: var(--blanc); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-soft); }
.card-sage{ background: var(--sauge); color: var(--blanc); border-radius: var(--radius-md); padding: 30px; }
.card-sage p{ margin-bottom: 0; }
.card-sage strong{ color: #fff; }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:860px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

.num{
  width:48px; height:48px; border-radius:50%;
  border:3px solid var(--foret); color:var(--foret);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.3rem;
}
.numbered{ display:flex; align-items:flex-start; gap:18px; margin-bottom:30px; }
.numbered .num{ flex-shrink:0; }

.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.tag-list li{ background:var(--sauge); color:#fff; font-weight:700; font-size:.9rem; padding:8px 16px; border-radius:999px; }

.leaf-divider{ display:flex; justify-content:center; margin: 6px 0 36px; opacity:.55; }

table.info{ width:100%; border-collapse:collapse; }
table.info td{ padding:10px 0; border-bottom:1px solid rgba(60,74,52,.15); vertical-align:top; }
table.info td:first-child{ font-weight:800; color:var(--foret); width:34%; padding-right:16px; }

.zone-list{ margin:0; padding:0; list-style:none; }
.zone-list li{ display:inline; font-weight:700; color:var(--foret); }
.zone-list li:not(:last-child)::after{ content:" · "; opacity:.6; }

.person{ display:flex; gap:24px; align-items:flex-start; margin-bottom:36px; }
.person-name{ font-family:'Fredoka', sans-serif; font-weight:600; color:var(--foret); font-size:1.15rem; margin-bottom:2px; text-transform:none; }
.person-role{ color:var(--noisette); font-weight:700; font-size:.92rem; margin-bottom:12px; }
@media (max-width:560px){ .person{ flex-direction:column; align-items:center; text-align:center; } }

footer.site{ background: var(--foret); color: var(--creme); padding: 46px 0 0; margin-top: 40px; }
footer.site a{ color: var(--noisette-cl); }
footer.site h3{ color:#fff; text-transform:none; font-size:1.05rem; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; padding-bottom:32px; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-bottom{ background: var(--encre); padding: 16px 0; font-size:.85rem; color: rgba(238,238,227,.75); }
.footer-bottom .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display:flex;
  align-items:center;
  gap:10px;
  background: #3E7C4A;
  color:#fff;
  padding: 14px 20px;
  border-radius: 999px;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease;
}
.whatsapp-float:hover{ background:#2F5F39; text-decoration:none; transform: translateY(-2px); }
.whatsapp-float svg{ flex-shrink:0; }
.whatsapp-float .label{ display:inline; }
@media (max-width:560px){
  .whatsapp-float{ padding:14px; }
  .whatsapp-float .label{ display:none; }
}

.bg-dots{
  position: relative;
}
.bg-dots::before{
  content:"";
  position:absolute;
  top: 10%;
  right: 4%;
  width: 160px;
  height: 160px;
  background: url("images/dots-texture.png") no-repeat center / contain;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.bg-dots::after{
  content:"";
  position:absolute;
  bottom: 6%;
  left: 3%;
  width: 110px;
  height: 110px;
  background: url("images/dots-texture.png") no-repeat center / contain;
  opacity: .25;
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 0;
}
.bg-dots > .container{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }