/* ============================================================
   PHYSIOGYM — Design system
   ============================================================ */
:root{
  --navy:#0B2A52;
  --navy-deep:#081E3D;
  --blue:#1F5BAA;
  --blue-link:#1F5BAA;
  --text:#0F1B33;
  --text-2:#3A475C;
  --muted:#6B7689;
  --line:#E6E9EF;
  --bg:#FFFFFF;
  --soft:#F2F4F8;
  --soft-2:#F7F8FB;
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 4px 20px rgba(11,42,82,.07);
  --shadow-card:0 8px 30px rgba(11,42,82,.08);
  --maxw:1480px;
  --display:'Manrope','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--text); background:#fff;
  line-height:1.65; font-weight:400; font-size:15.5px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--blue-link); text-decoration:none}
img{max-width:100%; display:block}
p{margin:0 0 1em}

/* === TYPO === */
h1,h2{
  font-family:var(--display); color:var(--navy);
  letter-spacing:-.025em; font-weight:700; margin:0 0 .5em;
}
h1{font-size:clamp(32px,3.8vw,46px); line-height:1.14; font-weight:700; letter-spacing:-.03em}
h2{font-size:clamp(24px,2.4vw,30px); font-weight:700; text-align:center; line-height:1.2; letter-spacing:-.02em}
h3{font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--navy); margin:0 0 .5em}

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

/* === HEADER === */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px; height:104px}
.brand{
  display:flex; align-items:center; gap:13px;
  width:210px; flex:0 0 auto; min-width:0;
  text-decoration:none;
}
.brand-logo{width:42px; height:42px; flex:0 0 auto}
.brand-text{font-family:var(--sans); font-weight:700; color:var(--navy); letter-spacing:.08em; font-size:18px; line-height:1}
.brand-text small{display:block; font-size:9.5px; letter-spacing:.36em; color:var(--navy); font-weight:500; margin-top:5px; opacity:.85}
.menu{display:flex; justify-content:center; gap:32px; align-items:center; flex-wrap:nowrap}
@media (min-width:861px){
  .site-header .menu{gap:32px !important}
  .site-header .menu > a{margin:0 16px !important}
}
.menu-links{display:flex; justify-content:center; align-items:center; gap:32px; flex:1 1 auto; flex-wrap:nowrap}
.menu a, .menu-links a{color:var(--text); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:8px 0; position:relative; white-space:nowrap; transition:color .2s ease}
.menu a:hover, .menu-links a:hover{color:var(--blue)}
.menu a.active, .menu-links a.active{color:var(--blue)}
.menu a.active::after, .menu-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--blue); border-radius:2px}
.menu a.stack{line-height:1.25; text-align:center}
.menu a.stack span{display:block}

/* === MENU HAMBURGER (mobile) === */
.menu-toggle{
  display:none; appearance:none; background:transparent; border:0; cursor:pointer;
  width:42px; height:42px; padding:9px; border-radius:8px;
  align-items:center; justify-content:center; color:var(--navy);
  transition:background .2s ease;
}
.menu-toggle:hover{background:var(--soft)}
.menu-toggle .bars{position:relative; width:22px; height:16px; display:block}
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle .bars::before{top:0}
.menu-toggle .bars span{top:7px}
.menu-toggle .bars::after{top:14px}
.menu-toggle[aria-expanded="true"] .bars::before{top:7px; transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars span{opacity:0}
.menu-toggle[aria-expanded="true"] .bars::after{top:7px; transform:rotate(-45deg)}

/* Overlay derrière le menu mobile ouvert */
.menu-backdrop{
  display:none; position:fixed; inset:0; background:rgba(11,42,82,.35);
  z-index:40; opacity:0; transition:opacity .25s ease;
}
.menu-backdrop.is-open{display:block; opacity:1}

/* === BUTTONS === */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff !important;
  padding:13px 22px; border-radius:8px;
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .2s ease, transform .2s ease;
  border:0; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--navy-deep); transform:translateY(-1px)}
.btn .ico{width:18px; height:18px; flex:0 0 auto}
.btn-block{flex-direction:row; align-items:center; line-height:1.2}
.btn-block .txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2}
.btn-block .txt small{font-size:9px; font-weight:400; opacity:.85; letter-spacing:.08em; text-transform:none; margin-top:2px}
/* Espace avant "sur Doctolib" quand le texte du bouton est sur une seule ligne */
.btn .txt small{margin-left:.35em}
.btn-block .txt small{margin-left:0}
.btn-ghost{background:transparent; color:var(--navy) !important; border:1px solid var(--navy)}
.btn-ghost:hover{background:var(--navy); color:#fff !important}

/* === HERO (HP) === */
.hero{position:relative; overflow:hidden; background:#E5EAF0}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center right; will-change:transform}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(238,242,247,.97) 0%, rgba(238,242,247,.88) 35%, rgba(238,242,247,.30) 55%, rgba(238,242,247,0) 72%)}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:90px 28px 100px; min-height:540px; display:flex; align-items:center}
.hero-text{max-width:540px}
.hero-text h1{color:var(--navy); margin-bottom:26px}
.hero-divider{width:56px; height:2px; background:var(--blue); border-radius:2px; margin:0 0 26px}
.hero-text p{color:var(--text-2); font-size:16px; max-width:450px; margin-bottom:34px; line-height:1.7}

/* === HERO SECONDAIRE (pages enfants) === */
.subhero{background:linear-gradient(180deg, #F2F5F9 0%, #fff 100%); padding:80px 0 60px; border-bottom:1px solid var(--line)}
.subhero-inner{max-width:var(--maxw); margin:0 auto; padding:0 28px; text-align:center}
.subhero .breadcrumb{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.subhero .breadcrumb a{color:var(--blue)}
.subhero h1{margin:0 auto 22px; max-width:760px}
.subhero-divider{width:56px; height:2px; background:var(--blue); border-radius:2px; margin:0 auto 26px}
.subhero p{color:var(--text-2); font-size:16.5px; max-width:680px; margin:0 auto; line-height:1.7}

/* === SECTIONS === */
section{padding:80px 0}
.section-head{text-align:center; max-width:680px; margin:0 auto 56px}
.section-head h2{margin-bottom:14px}
.section-head .eyebrow{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--blue); text-transform:uppercase; margin-bottom:14px; display:block}
.section-head p{color:var(--muted); font-size:15px; max-width:580px; margin:0 auto}

/* Section text block (pages enfants) */
.content-block{max-width:780px; margin:0 auto; text-align:left}
.content-block h2{text-align:left; font-size:clamp(22px,2vw,26px); margin-bottom:18px}
.content-block .eyebrow{display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--blue); text-transform:uppercase; margin-bottom:12px}
.content-block p{color:var(--text-2); font-size:15.5px; line-height:1.8; margin-bottom:14px}
.content-block ul{padding-left:0; list-style:none; margin:14px 0 24px}
.content-block ul li{position:relative; padding-left:24px; color:var(--text-2); font-size:15px; line-height:1.7; margin-bottom:8px}
.content-block ul li::before{content:""; position:absolute; left:0; top:11px; width:10px; height:2px; background:var(--blue); border-radius:1px}

.section-alt{background:var(--soft-2)}
.section-divider-line{height:1px; background:var(--line); max-width:var(--maxw); margin:0 auto}

/* === CARDS APPROCHES === */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.card{background:#fff; border-radius:var(--radius); overflow:visible; box-shadow:var(--shadow-card); display:flex; flex-direction:column; position:relative; transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 36px rgba(11,42,82,.12)}
.card-media{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; background:#eee}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-badge{position:absolute; left:50%; top:16px; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 16px rgba(11,42,82,.30); z-index:3}
.card-body{padding:28px 26px 30px; text-align:center}
.card-body h3{margin-bottom:14px; color:var(--navy); font-size:12.5px; letter-spacing:.14em}
.card-body p{color:var(--muted); font-size:14px; margin:0 0 18px; line-height:1.65}
.card-link{display:inline-block; color:var(--blue-link); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.card-link::after{content:" →"; margin-left:4px}

/* === TARIFS === */
.tarifs{padding-top:30px; padding-bottom:40px}
.tarifs .section-head{margin-bottom:30px}
.tarifs-wrap{background:var(--soft); border-radius:var(--radius-lg); padding:42px 32px}
.tarifs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; text-align:center}
.tarifs-grid>div{padding:8px 26px; border-right:1px solid #DCE1EA}
.tarifs-grid>div:last-child{border-right:0}
.tarifs-grid .ico-line{color:var(--blue); margin-bottom:16px; display:inline-block}
.tarifs-grid h3{font-size:12px; color:var(--navy); letter-spacing:.14em; margin-bottom:10px}
.tarifs-grid p{font-size:14px; color:var(--muted); margin:0; line-height:1.55}

/* === TARIFS DÉTAILLÉ (page tarifs) === */
.tarif-detail{max-width:880px; margin:0 auto; display:grid; gap:22px}
.tarif-row{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; transition:transform .2s ease, box-shadow .2s ease}
.tarif-row:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.tarif-row .ico-line{color:var(--blue)}
.tarif-row .meta h3{margin:0 0 6px}
.tarif-row .meta p{margin:0; color:var(--muted); font-size:14px}
.tarif-row .price{font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); letter-spacing:-.02em; white-space:nowrap}
.tarif-row .price small{display:block; font-family:var(--sans); font-size:10.5px; color:var(--muted); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-top:4px}

/* === RASSURANCE === */
.reassure{padding-top:30px; padding-bottom:30px}
.reassure-wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:0; background:var(--soft); border-radius:var(--radius-lg); overflow:hidden; min-height:180px}
.reassure-text{display:flex; gap:20px; align-items:flex-start; padding:32px 36px}
.reassure-text .ico{flex:0 0 auto; width:44px; height:44px; color:var(--blue); display:flex; align-items:center; justify-content:center}
.reassure-text h3{font-size:12.5px; color:var(--navy); letter-spacing:.14em; margin-bottom:10px}
.reassure-text p{font-size:14px; color:var(--muted); margin:0; line-height:1.65}
.reassure-image{background-image:url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=900&q=80&auto=format&fit=crop'); background-size:cover; background-position:center; min-height:180px}

/* === CTA FINAL === */
.cta-final{padding:30px 0 90px}
.cta-card{background:var(--navy); background-image:linear-gradient(135deg, var(--navy) 0%, #102E5C 100%); color:#fff; border-radius:var(--radius-lg); padding:30px 36px; display:flex; align-items:center; gap:24px; box-shadow:0 10px 32px rgba(11,42,82,.18)}
.cta-card .ico-cal{flex:0 0 auto; width:42px; height:42px; color:#fff; display:flex; align-items:center; justify-content:center}
.cta-card .cta-content{flex:1}
.cta-card h3{color:#fff; font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px; font-family:var(--sans)}
.cta-card p{margin:0; color:#B8C5DA; font-size:14px}

/* === FAQ ACCORDION === */
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:14px}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease}
.faq-item.open{border-color:var(--blue); box-shadow:0 8px 24px rgba(11,42,82,.08)}
.faq-q{
  appearance:none; background:none; border:0; cursor:pointer; width:100%; text-align:left;
  padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--display); font-weight:700; color:var(--navy); font-size:16px; letter-spacing:-.01em;
}
.faq-q .chev{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--soft); color:var(--blue); display:flex; align-items:center; justify-content:center; transition:transform .3s ease, background .2s ease}
.faq-item.open .faq-q .chev{transform:rotate(180deg); background:var(--blue); color:#fff}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease}
.faq-a-inner{padding:0 26px 22px; color:var(--text-2); font-size:15px; line-height:1.7}

/* === CONTACT BLOCK === */
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; max-width:var(--maxw); margin:0 auto}
.contact-info{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px}
.contact-info h2{text-align:left; margin-bottom:20px; font-size:24px}
.contact-info p{color:var(--text-2); font-size:15.5px; line-height:1.75}
.contact-info ul{list-style:none; padding:0; margin:14px 0 0}
.contact-info ul li{display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; font-size:15px; color:var(--text-2)}
.contact-info ul li .dot{width:6px; height:6px; border-radius:50%; background:var(--blue); margin-top:9px; flex:0 0 auto}
.contact-cta{background:linear-gradient(135deg, var(--navy), #102E5C); color:#fff; border-radius:var(--radius-lg); padding:36px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px; box-shadow:0 10px 32px rgba(11,42,82,.18)}
.contact-cta h3{color:#fff; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em; text-transform:none; margin:0}
.contact-cta p{margin:0; color:#B8C5DA; font-size:14.5px}

/* === FOOTER === */
footer{background:#fff; border-top:1px solid var(--line); padding:44px 0 36px; color:var(--muted); font-size:12.5px}
footer .container{display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center}
.footer-brand{font-family:var(--sans); font-weight:700; color:var(--navy); letter-spacing:.14em; font-size:14px; margin-bottom:4px}
.seo-line{max-width:none; line-height:1.8; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px}
.copyright{font-size:11.5px; color:#9099A8; margin-top:8px}

/* ============================================================
   ANIMATIONS — fade/slide au scroll (état initial)
   GSAP retire ces classes en JS pour animer
   ============================================================ */
.reveal{opacity:0; transform:translateY(28px); will-change:transform,opacity}
.reveal-fade{opacity:0; will-change:opacity}

/* === RESPONSIVE === */
@media (max-width:1000px){
  .menu{gap:22px}
  .menu a{font-size:10.5px; letter-spacing:.10em}
}
@media (max-width:860px){
  /* nav/menu/brand → définis plus bas dans la section RESPONSIVE HEADER */
  .hero-inner{padding:54px 24px 68px; min-height:auto}
  .hero-overlay{background:linear-gradient(180deg, rgba(238,242,247,.96) 0%, rgba(238,242,247,.85) 60%, rgba(238,242,247,.6) 100%)}
  .cards{grid-template-columns:1fr}
  .tarifs-grid{grid-template-columns:1fr; gap:28px}
  .tarifs-grid>div{border-right:0; border-bottom:1px solid #DCE1EA; padding-bottom:28px}
  .tarifs-grid>div:last-child{border-bottom:0; padding-bottom:0}
  .reassure-wrap{grid-template-columns:1fr}
  .cta-card{flex-direction:column; text-align:center; padding:28px 24px}
  .tarif-row{grid-template-columns:auto 1fr; gap:18px}
  .tarif-row .price{grid-column:1/-1; text-align:center; padding-top:8px; border-top:1px dashed var(--line)}
  .contact-grid{grid-template-columns:1fr}
  section{padding:60px 0}
  .subhero{padding:54px 0 40px}
}

/* === SPLIT GAUCHE/DROITE (pages expertises) === */
.split{padding:70px 0}
.split-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.split.reverse .split-wrap{direction:rtl}
.split.reverse .split-wrap > *{direction:ltr}
.split-media{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:#E5EAF0; box-shadow:var(--shadow-card);
}
.split-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.split-media:hover img{transform:scale(1.03)}
.split-text .eyebrow{display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--blue); text-transform:uppercase; margin-bottom:14px}
.split-text h2{text-align:left; font-size:clamp(22px,2.2vw,28px); margin-bottom:16px}
.split-text p{color:var(--text-2); font-size:15.5px; line-height:1.75; margin-bottom:12px}
.split-text ul{list-style:none; padding:0; margin:16px 0 0}
.split-text ul li{position:relative; padding-left:24px; color:var(--text-2); font-size:15px; line-height:1.7; margin-bottom:8px}
.split-text ul li::before{content:""; position:absolute; left:0; top:11px; width:10px; height:2px; background:var(--blue); border-radius:1px}

.split.alt{background:var(--soft-2)}

@media (max-width:860px){
  .split-wrap{grid-template-columns:1fr; gap:28px}
  .split.reverse .split-wrap{direction:ltr}
  .split{padding:50px 0}
}

/* === LOGO IMG (header + footer) — sizing par largeur car logo paysage large === */
/* ratio natif ~3.6:1 (720x200) — on fixe width + height pour éviter tout collapse */
.brand-logo-img{
  width:210px; height:58px; display:block;
  object-fit:contain; object-position:left center;
  flex:0 0 auto;
  max-width:100%;
}
.footer-logo{
  width:240px; height:auto; display:block; margin:0 auto 6px;
  object-fit:contain;
  max-width:100%;
}

/* === RESPONSIVE HEADER === */
@media (max-width:1000px){
  .brand{width:180px}
  .brand-logo-img{width:180px; height:50px}
}
@media (max-width:860px){
  /* Layout mobile : logo gauche, hamburger droite, CTA réduit à l'icône */
  .nav{grid-template-columns:auto 1fr auto auto; gap:10px; height:72px}
  .brand{width:150px}
  .brand-logo-img{width:150px; height:42px}
  .menu-toggle{display:inline-flex}
  /* Le menu devient un dropdown overlay */
  .menu{
    position:fixed; top:72px; left:0; right:0;
    background:#fff; border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 28px rgba(11,42,82,.10);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:8px 0;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
    z-index:45; max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .menu.is-open{transform:translateY(0); opacity:1; pointer-events:auto}
  .menu a{
    padding:14px 28px; font-size:12px; letter-spacing:.14em;
    border-bottom:1px solid var(--line);
  }
  .menu a:last-child{border-bottom:0}
  .menu a br{display:none}
.footer-coords{font-family:var(--sans); font-size:12.5px; color:var(--muted); letter-spacing:.04em; line-height:1.7; margin:0 auto 16px; max-width:760px}
.footer-coords a{color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(11,42,82,.3)}
.footer-coords a:hover{border-bottom-color:var(--navy)}
  .nav .btn-block{padding:11px 13px; gap:0}
  .nav .btn-block .txt{display:none}
  .footer-logo{width:180px}
}
@media (max-width:420px){
  .nav{gap:6px}
  .brand{width:128px}
  .brand-logo-img{width:128px; height:36px}
  .nav .btn-block{padding:10px 11px}
  .menu-toggle{width:40px; height:40px}
}

/* === RESPONSIVE HEADER & MENU MOBILE === */
@media (max-width:860px){
  .nav{
    grid-template-columns: auto 1fr auto;
    height:72px; gap:12px;
  }
  .brand{width:140px}
  .brand-logo-img{width:140px}

  /* CTA Doctolib compact en mobile */
  .nav .btn-block{padding:9px 12px; font-size:10px}
  .nav .btn-block .ico{width:16px; height:16px}
  .nav .btn-block .txt small{display:none}

  /* Afficher le hamburger */
  .menu-toggle{display:inline-flex}

  /* Menu en panneau qui glisse depuis la droite */
  .site-header .menu{
    position:fixed; top:0; right:0; bottom:0; z-index:60;
    width:min(82vw, 320px);
    background:#fff;
    flex-direction:column;
    align-items:flex-start; justify-content:flex-start;
    gap:0; padding:84px 28px 28px;
    transform:translateX(105%);
    transition:transform .3s ease;
    box-shadow:-12px 0 32px rgba(11,42,82,.12);
    overflow-y:auto;
  }
  .site-header .menu.is-open{transform:translateX(0)}
  .site-header .menu a{
    display:block; width:100%;
    padding:16px 0; font-size:13px; letter-spacing:.12em;
    border-bottom:1px solid var(--line);
  }
  .site-header .menu a.active::after{display:none}
  .site-header .menu a.active{background:transparent; color:var(--blue)}
}

/* === RESPONSIVE HEADER === */
@media (max-width:860px){
  .nav{
    grid-template-columns: auto 1fr auto;
    height:72px; gap:12px;
  }
  .brand{width:140px}
  .brand-logo-img{width:140px; height:auto}

  /* CTA Doctolib compact en mobile (dans le header) */
  .nav .btn-block{padding:9px 12px; font-size:10px}
  .nav .btn-block .ico{width:16px; height:16px}
  .nav .btn-block .txt small{display:none}

  /* Hamburger affiché */
  .menu-toggle{display:inline-flex}
}

/* === MENU MOBILE FULL SCREEN === */
.site-header .menu{
  /* desktop par défaut → reste comme avant */
}
@media (max-width:860px){
  /* Le menu lui-même devient un panneau plein écran */
  .site-header .menu{
    position:fixed; inset:0; z-index:70;
    width:100vw; height:100vh; height:100dvh;
    background:#fff;
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start;
    gap:0; padding:0;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    visibility:hidden;
  }
  .site-header .menu.is-open{
    transform:translateX(0);
    visibility:visible;
  }

  /* Header du panneau : logo à gauche, croix à droite */
  .menu-header{
    display:flex !important; align-items:center; justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .menu-header img{width:140px; height:auto; display:block}
  .menu-close{
    appearance:none; background:transparent; border:0; cursor:pointer;
    width:42px; height:42px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--navy); transition:background .2s ease;
  }
  .menu-close:hover{background:var(--soft)}
  .menu-close svg{width:22px; height:22px}

  /* Liste de liens : prend l'espace */
  .menu-links{
    flex:1 1 auto;
    display:flex; flex-direction:column;
    padding:8px 0;
    overflow-y:auto;
  }
  .site-header .menu a{
    display:block; width:100%;
    padding:18px 26px; font-size:14px; letter-spacing:.12em;
    border-bottom:1px solid var(--line);
    color:var(--text); font-weight:600; text-transform:uppercase;
  }
  .site-header .menu a:hover{background:var(--soft); color:var(--blue)}
  .site-header .menu a.active{color:var(--blue); background:transparent}
  .site-header .menu a.active::after{display:none}

  /* CTA Doctolib en bas, sticky-style */
  .menu-cta{
    flex:0 0 auto;
    padding:20px 22px 28px;
    border-top:1px solid var(--line);
    background:#fff;
  }
  .menu-cta .btn{
    display:flex; width:100%; justify-content:center;
    padding:16px 20px; font-size:12px;
    background:var(--navy);
  }
  .menu-cta .btn small{display:block}

  /* On masque les éléments injectés sur desktop */
  .menu-header, .menu-cta{display:none}
}

/* Backdrop pas utile en full-screen mais on le neutralise */
@media (max-width:860px){
  .menu-backdrop{display:none !important}
}

/* === MENU MOBILE FULL SCREEN (override) === */
@media (max-width:860px){
  /* Reset le dropdown précédent : on prend la totale */
  .site-header .menu{
    position:fixed !important; inset:0 !important; top:0 !important; left:0 !important; right:0 !important;
    width:100vw !important; height:100vh !important; height:100dvh !important;
    max-height:none !important;
    background:#fff; z-index:70;
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; justify-content:flex-start !important;
    gap:0 !important; padding:0 !important;
    border:0 !important; box-shadow:none !important;
    transform:translateX(100%); opacity:1; pointer-events:none;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    visibility:hidden;
  }
  .site-header .menu.is-open{
    transform:translateX(0) !important;
    pointer-events:auto;
    visibility:visible;
  }

  /* En-tête du panneau : logo + croix */
  .menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .menu-header img{width:140px; height:auto; display:block}
  .menu-close{
    appearance:none; background:transparent; border:0; cursor:pointer;
    width:44px; height:44px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--navy); transition:background .2s ease;
  }
  .menu-close:hover{background:var(--soft)}
  .menu-close svg{width:24px; height:24px}

  /* Liens : prennent l'espace dispo */
  .menu-links{
    flex:1 1 auto;
    display:flex; flex-direction:column;
    padding:6px 0;
    overflow-y:auto;
  }
  .site-header .menu a{
    display:block; width:100%;
    padding:18px 26px; font-size:14px; letter-spacing:.14em;
    border-bottom:1px solid var(--line);
    color:var(--text); font-weight:600; text-transform:uppercase;
    background:#fff;
  }
  .site-header .menu a br{display:none}
  .site-header .menu a:hover, .site-header .menu a:focus{background:var(--soft); color:var(--blue)}
  .site-header .menu a.active{color:var(--blue); background:transparent}
  .site-header .menu a.active::after{display:none}

  /* CTA Doctolib en bas du panneau */
  .menu-cta{
    flex:0 0 auto;
    padding:20px 22px 28px;
    border-top:1px solid var(--line);
    background:#fff;
  }
  .menu-cta .btn{
    display:flex; width:100%; justify-content:center; align-items:center;
    padding:16px 20px; font-size:12px;
    background:var(--navy); color:#fff !important;
    gap:10px;
  }
  .menu-cta .btn small{display:block; font-size:9.5px; opacity:.85; margin-top:2px; letter-spacing:.06em; text-transform:none}

  /* Empêche le scroll du body quand menu ouvert */
  body.menu-open{overflow:hidden}
}

/* Sur desktop, on cache header/cta du panneau (injectés via JS) */
@media (min-width:861px){
  .menu-header, .menu-close, .menu-cta{display:none !important}
}

/* === DESKTOP : .menu-links injecté par JS doit se comporter comme l'ancien .menu === */
@media (min-width:861px){
  .site-header .menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:36px !important;
    position:static !important;
    width:auto !important; height:auto !important;
    background:transparent !important;
    padding:0 !important;
    transform:none !important;
    visibility:visible !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .menu-links{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:36px !important;
    flex:1 1 auto;
  }
  .menu-links a{
    border:0 !important; background:transparent !important;
    padding:8px 0 !important; font-size:11.5px !important;
    text-transform:uppercase; letter-spacing:.14em;
    color:var(--text); font-weight:600;
    position:relative; white-space:nowrap;
  }
  .menu-links a:hover{color:var(--blue) !important; background:transparent !important}
  .menu-links a.active{color:var(--blue) !important; background:transparent !important}
  .menu-links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background:var(--blue); border-radius:2px; display:block;
  }
  /* Le header/croix/cta du panneau cachés en desktop */
  .menu-header, .menu-close, .menu-cta{display:none !important}
}

/* === DESKTOP NAV : .menu-links est le wrapper créé par JS, le rendre horizontal === */
@media (min-width:861px){
  .site-header .menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    position:static !important;
    width:auto !important; height:auto !important;
    background:transparent !important;
    padding:0 !important; margin:0 !important;
    transform:none !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .site-header .menu-links{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:36px !important;
    flex:1 1 auto;
    padding:0; overflow:visible;
  }
  .site-header .menu-links a{
    border:0 !important; background:transparent !important;
    padding:8px 0 !important;
    font-size:11.5px !important;
    text-transform:uppercase !important;
    letter-spacing:.14em !important;
    color:var(--text) !important; font-weight:600 !important;
    position:relative; white-space:nowrap;
    display:inline-block !important; width:auto !important;
  }
  .site-header .menu-links a:hover{color:var(--blue) !important; background:transparent !important}
  .site-header .menu-links a.active{color:var(--blue) !important; background:transparent !important}
  .site-header .menu-links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background:var(--blue); border-radius:2px; d
/* ============================================================
   COMPAT WORDPRESS — wp_nav_menu génère .menu > ul > li > a
   On réplique le comportement des liens directs (.menu > a)
   ============================================================ */
.site-header .menu ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0}
@media (min-width:861px){
  .site-header .menu{display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:0 !important; flex:1 1 auto}
  .site-header .menu ul{display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:0 !important; flex-wrap:nowrap}
  .site-header .menu li{margin:0 16px}
  .site-header .menu li a,
  .site-header .menu > a{
    color:var(--text); font-size:11.5px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; padding:8px 0; position:relative; white-space:nowrap;
    display:inline-block; text-decoration:none; transition:color .2s ease;
  }
  .site-header .menu li a:hover,
  .site-header .menu > a:hover{color:var(--blue)}
  .site-header .menu li.current-menu-item a,
  .site-header .menu li .active{color:var(--blue)}
  .site-header .menu li.current-menu-item a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--blue); border-radius:2px; display:block;
  }
}
/* Mobile : menu WP en colonne dans l'overlay */
@media (max-width:860px){
  .site-header .menu ul{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .site-header .menu li{margin:0; width:100%}
  .site-header .menu li a{display:block; padding:14px 28px; font-size:12px; letter-spacing:.14em; border-bottom:1px solid var(--line)}
  .site-header .menu li:last-child a{border-bottom:0}
}