:root{
  --bg: #fbfbfd;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #5a5f6a;

  --blue: #1f6feb;     /* confiance */
  --orange: #f59e0b;   /* chaleur */
  --border: #e7e7ee;

  --max: 1060px;
  --radius: 18px;
  --shadow: 0 18px 40px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  color: var(--text);

  /* Fond premium doux (bleu + orange très subtil) */
  background:
  radial-gradient(1200px 760px at 18% 6%, rgba(31,111,235,.18), transparent 60%),
  radial-gradient(1100px 700px at 86% 16%, rgba(245,158,11,.32), transparent 58%),
  radial-gradient(900px 700px at 50% 105%, rgba(245,158,11,.18), transparent 60%),
  linear-gradient(180deg, #fff4e6 0%, #f7efe6 55%, #f5f3f9 100%);

}


a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--max); margin:0 auto; padding: 0 16px; }

.site-header{
  position: sticky;
  top:0;
  z-index: 20;
  background: rgba(255,244,230,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
				  
					 

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand strong{ font-size: 15px; letter-spacing: .2px; }
.brand span{ font-size: 12px; color: var(--muted); }

.navlinks{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.navlinks a{
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.navlinks a:hover{ background: rgba(31,111,235,.08); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 600;
  font-size: 14px;
  cursor:pointer;
}

.btn-primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), #2b8cff);
  color: #fff;
}
.btn-primary:hover{ filter: brightness(.98); }

.btn-accent{
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange), #fbbf24);
  color: #1a1a1a;
}
.btn-accent:hover{ filter: brightness(.98); }

.lang{
  border-color: rgba(245,158,11,.35);
}

main{ padding-bottom: 36px; }

.hero{
  padding: 34px 0 16px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: stretch;
}

.card{
  background: rgba(255,248,240,.62);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(14px);
}

.overlayCard{
  background: rgba(255, 248, 240, .66);   /* cohérent avec card */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

h1{
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px 0;
}
h2{
  font-size: 22px;
  margin: 0 0 10px 0;
}
p{ margin: 0 0 12px 0; color: var(--muted); }

.kpis{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.kpi{
  border: 1px dashed rgba(31,111,235,.25);
  border-radius: 14px;
  padding: 10px;
  background: rgba(31,111,235,.04);
  color: var(--text);
  font-size: 13px;
}
.kpi strong{ display:block; font-size: 13px; color: var(--text); }
.kpi span{ color: var(--muted); }

.section{
  padding: 18px 0;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  color: #3a2a00;
  margin-bottom: 10px;
}

.list{
  margin: 10px 0 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.list li{ margin-bottom: 6px; }

.notice{
  border-left: 4px solid rgba(245,158,11,.8);
  padding: 10px 12px;
  background: rgba(245,158,11,.10);
  border-radius: 12px;
  color: #3a2a00;
  font-size: 13px;
}

.footer{
  border-top: 1px solid var(--border);
  padding: 16px 0 28px;
  color: var(--muted);
  font-size: 13px;
}

.small{ font-size: 13px; }

@media (max-width: 900px){
  .heroGrid, .grid2{ grid-template-columns: 1fr; }
  .navlinks{ display:none; } /* simple et très mobile-friendly */
}
/* ====== Home v2 (3 blocs) ====== */
.hero2{
  padding: 28px 0 10px;
}
.hero2Grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
  align-items: stretch;
}

/* Placeholder image (remplacé plus tard par une vraie photo) */
.ph{
  position: relative;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(31,111,235,.18), transparent 55%),
    radial-gradient(800px 500px at 80% 70%, rgba(245,158,11,.18), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

.ph::after {
  content: none !important;
}

.heroOverlay{
  position:absolute;
  inset: 0;
  display:flex;
	background: rgba(0, 0, 0, 0.30); /* ajuste entre 0.3 et 0.45 */																																																															
  align-items: left;
 
}

.heroText{
	color: #ffffff;	
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
	padding: 40px 48px;       /* espace intérieur */
  max-width: 680px;        /* limite la largeur du texte */																													  
  background: none;
  border: none;
  backdrop-filter: none;
}
@media (max-width: 768px) {
  .heroText {
    padding: 28px 24px;    /* plus compact sur mobile */
  }
}																														
																														
.heroText .small {
  color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 8px rgba(0,0,0,0.5);																																
}



																															  

.heroName {
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
}


.heroTitle {
  font-weight: 700;
  text-shadow: 0 3px 12px rgba(0,0,0,0.6);
}



.pills{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,111,235,.18);
  background: rgba(31,111,235,.06);
  font-size: 12px;
  color: var(--text);
}

.sectionTitle{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 10px;
}
.sectionTitle h2{ margin:0; }
.sectionTitle p{ margin:0; }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.phSmall{ min-height: 360px; }
.phWide{ min-height: 360px; }

.overlayCard{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}


.priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.priceRow:last-child{ border-bottom:none; }
.priceRow strong{ color: var(--text); }
.priceRow span{ color: var(--muted); }

.stack{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

@media (max-width: 900px){
  .hero2Grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .ph{ min-height: 320px; }
  .phSmall{ min-height: 280px; }
  .phWide{ min-height: 280px; }
}
/* Halo doux derrière la première section */
.hero2{
  position: relative;
}

.hero2::before{
  content:"";
  position:absolute;
  inset: -40px 0 auto 0;
  height: 340px;
  pointer-events:none;
  background:
    radial-gradient(700px 360px at 22% 30%, rgba(31,111,235,.18), transparent 60%),
    radial-gradient(640px 360px at 78% 35%, rgba(245,158,11,.18), transparent 60%);
  filter: blur(6px);
  opacity: .9;
}

/* HERO minimal premium */
.phHero{
  min-height: 520px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)),
    radial-gradient(1000px 700px at 20% 20%, rgba(31,111,235,.14), transparent 55%),
    radial-gradient(900px 700px at 85% 35%, rgba(245,158,11,.22), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
																																							  
}
.navActions{
  display:flex;
  gap:10px;
  align-items:center;
}

.navToggle{
  display:none; /* visible seulement sur mobile */
}
/* ===== Menu mobile propre ===== */
.navLeft{
  display:flex;
  align-items:center;
  gap: 10px;
}

.navRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* bouton burger : icône seulement */
.navToggle{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display:none; /* visible uniquement mobile */
}

/* 3 lignes */
.burger{
  position: relative;
  width: 18px;
  height: 2px;
  background: rgba(26,26,26,.75);
  display:inline-block;
  border-radius: 2px;
}
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(26,26,26,.75);
  border-radius: 2px;
}
.burger::before{ top: -6px; }
.burger::after{ top: 6px; }

/* menu déroulant */
.mobileMenu{
  display:none;
  padding: 10px 16px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255, 244, 230, .92);
  backdrop-filter: blur(12px);
}

.mobileMenu.open{ display:block; }

.mobileMenu a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  margin: 8px 0;
  background: rgba(255, 248, 240, .70);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
}

/* mobile: on masque le menu desktop et on montre le burger */
@media (max-width: 900px){
  .navlinks{ display:none !important; } /* au cas où il reste sur d’autres pages */
  .navToggle{ display:inline-flex; }
}
/* Menu mobile : fermé par défaut */
.mobileMenu{ display:none !important; }
.mobileMenu.open{ display:block !important; }
.navToggle{
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
}

.burger,
.burger::before,
.burger::after{
  background: rgba(26,26,26,.85);
}
/* ===== Menu mobile ===== */
.mobileMenu{
  display:none;
  padding: 10px 16px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255, 244, 230, .92);
  backdrop-filter: blur(12px);
}
.mobileMenu.open{ display:block; }

.mobileMenu a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  margin: 8px 0;
  background: rgba(255, 248, 240, .70);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
}

@media (max-width: 900px){
  .navlinks{ display:none !important; }
  .navToggle{ display:inline-flex; }
}

.navToggle{
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
}
.burger,
.burger::before,
.burger::after{
  background: rgba(26,26,26,.85);
}

/* Desktop: afficher les onglets */
.navlinks{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
}
.navlinks a{
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.navlinks a:hover{ background: rgba(31,111,235,.08); }

/* Mobile: cacher les onglets + montrer burger */
@media (max-width: 900px){
  .navlinks{ display:none !important; }
  .navToggle{ display:inline-flex; }
}

/* ===== Page À propos ===== */

.sectionIntro{
  margin-bottom: 18px;
}
.sectionIntro .lead{
  font-size: 16px;
  color: var(--muted);
  margin-top: 6px;
}

.prose{
  max-width: 820px;
  margin: 0 auto;
}

.prose h2{
  margin-top: 22px;
  margin-bottom: 8px;
}

.prose p{
  line-height: 1.75;
}

/* AboutPhoto = marges uniquement */
.aboutPhoto{
  margin: 22px 0;
  min-height: 0; /* évite qu'un ancien min-height impose une hauteur */
}



}
.mapCard{
  display:block;
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}

.mapHint{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,248,240,.85);
  font-weight:700;
}
.navlinks a.active,
.mobileMenu a.active {
  font-weight: 600;
  text-decoration: underline;
  pointer-events: none;
  opacity: 0.8;
}
																																										
/* === Header avec bande image (propre) === */
.site-header {
  position: relative;
  /* adapte si ton header a déjà une hauteur/padding */
  min-height: 75px; /* teste 80–110px */
}

.site-header .headerBg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/bande-eau-circulation-lymphatique.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Overlay clair pour garder la lisibilité */
.site-header .headerBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72); /* ajuste 0.65–0.8 */
}

/* Le contenu du header au-dessus de l'image */
.site-header > .wrap,
.site-header > nav {
  position: relative;
  z-index: 1;
}
/* === HERO : image eau circulation lymphatique === */
.phHero {
  position: relative;
  min-height: 420px; /* ajuste si besoin */
  background-image: url("../assets/images/eau-circulation-lymphatique-thun.webp");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
	filter: saturate(90%) contrast(90%);																																									  
}
/* === Photo portrait "Qui suis-je" === */
.phPortrait::after {
  content: none !important;
}

.phPortrait {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* optionnel mais très élégant */
}

.phPortrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* ajuste 10–30% si besoin */
  display: block;
}
/* Photo cabinet – bloc tarifs */
.phCabinet::after {
  content: none !important;
}

.phCabinet {
  overflow: hidden;
  border-radius: 8px;
}

.phCabinet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* AboutPhoto = marges uniquement */
.aboutPhoto{
  margin: 22px 0;
  min-height: 0;
}

/* (SUPPRIME l'accolade seule "}" ici si elle existe) */

/* Image 1 : garde ton rendu (choisis UNE version) */

/* Version A : rendu premium comme index (recommandé) */
.phPhoto--space{
  height: 360px;
  min-height: 360px;
  overflow: hidden;
  border-radius: 12px;
}
.phPhoto--space img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display:block;
}

/* Mobile */
@media (max-width: 900px){
  .phPhoto--space,
  
    height: 220px;
    min-height: 220px;
  }
}