:root {
  --bg: #ffffff;
  --fg: #1b1b1b;
  --muted: #666;
  --brand: #2e7d32; /* vert accessible */
  --brand-ink: #114a17;
  --surface: #f6f7f8;
  --ring: 2px solid #1a73e8;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing : 1px;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
	
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  background: #000;
  color: #fff;
  z-index: 10000;
}

/* Header */
.site-header {
  background: #fff;
  border-bottom: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* ombre douce */
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .5rem .5rem .5rem;
}

.brand {
  display: block;
  line-height: 1.2;
  padding: 0; /* supprime la règle invalide et l'espace inutile */
}
.site-title { font-weight: 600; font-size: 1.125rem; }
.site-subtitle { color: var(--muted); font-size: .95rem; }
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-canovas {
  height: 48px;
  width: auto;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.site-subtitle {
  font-size: .95rem;
  color: var(--muted);
  margin: 0;
}




/* Nav + menu overlay */
.nav { display: none; }
.menu {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.menu a {
  padding: .5rem .25rem;
  position: relative;
  --u: linear-gradient(currentColor, currentColor);
  background: var(--u) 0 100% / 0 2px no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.menu a:hover,
.menu a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}
.menu a[aria-current="page"] {
  color: var(--brand);
  font-weight: 600;
}

/* Burger */
.burger {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: .4rem .5rem;
  border-radius: .5rem;
}
.burger:focus-visible { outline: var(--ring); }

/* Overlay panel for mobile */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s ease;
}

.panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  place-items: center;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.panel .menu {
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.5rem;
  z-index: 10001;
  position: relative;
}
#main {
  max-width: 1250px;
  margin: 10px auto;
  padding: 0 1rem;
}


section.flow {
  max-width: 1250px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
}
/* Hero */
.hero {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-areas: "intro cta";
  gap: 20px;
  background-color: #efefef;
  width: 90%;
  max-width: 1250px;
  margin: 1rem auto ;
  padding: 30px;
  box-sizing: border-box;
}
/* Associer chaque enfant à sa zone */
.hero > :first-child { grid-area: intro; }
.hero > :nth-child(2) { grid-area: cta; }

.hero h1 {
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.2rem);
  margin: 2px;

}
  .address { margin: 0; text-align: left; font-size: .95rem; }
}
.cta { margin: 1rem; font-size:1.25rem; margin-top:margin: 5px;}
.cta p{width:210px;text-align:center;margin:auto;}

.cta-phone {margin: 20px;
  padding: .75rem 1rem;
  background: #51bc36; font-size:1.50rem; font-weight:bold;
  color:#fff;

}
.cta-phone:hover,
.cta-phone:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(46, 125, 50, .12);
  outline: none;
}

.hero-figure {
  margin: 0 auto;
  text-align: center;
}
.hero-figure figcaption {
		font-size : 0.5em;
}
.hero-figure img {
  display: block;
  margin: 0 auto;
  width: 320px;
  height: auto;
  max-width: none;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



/* Content */
.page-hero { padding: 2rem 1rem 1rem; }
.page-hero .lede { color: var(--muted); }

section {
	width: 90%;
}

.blocflex {
  display: flex;
  flex-direction: row;         /* image à gauche, texte à droite */
  align-items: center;         /* centrage vertical */
  justify-content: center;     /* centrage horizontal */
  gap: 1rem;
  flex-wrap: wrap;
}
.blocflex.centered { justify-content: center; }

.blocimgtxt {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bloctxtlargbloqu {
  display: flex;
  flex-direction: column;     /* empile les éléments verticalement */
  justify-content: center;    /* centre verticalement dans le bloc */
  flex: 1;
  max-width: 500px;
   margin: 0;
  padding: 0;
}

.content { padding: 1rem; }
.narrow { max-width: 330px; background-color:#efefec;padding:1rem; }
.hrgreen {border:none;margin-top: 10px;
height:2px;
background-color:#51bc36;
width:75%;}
section.page-hero h1 {
	text-align:center;
}


div.blocimgtxt h2 {
	text-align:center; font-size:1.15rem;
	margin: 5px;
}
div.blocimgtxt p {
	text-align:center; 
	font-size:.9rem;
	margin: 5px 15px;
}
section.page-hero p {
	text-align:center;

}
p.quotarembt {
	font-size: 0.95rem;
}
div.blocimgtxt p.pvert {
	color: #51bc36;	font-size: 1.5rem;
}
/* Footer */
.site-footer {
  padding: 2rem 1rem;
  border-top: 1px solid #eaecef;
  color: var(--muted);
  font-size:12px;
  text-align: center;
}

.site-footer a {
	text-decoration:underline;
	
}
/* Palette inspirée du thème (verts doux) */
:root{
  --green-700:#2c5e3f;
  --green-600:#347a51;
  --green-100:#e6f4ea;
  --green-050:#f1faf4;
  --card-border:#e6efe9;
}

/* Grille des blocs */
.indications-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
  margin-top:1rem;
}

/* Cartes (blocs visuels façon Dr Salasap) */
.indication-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-left:4px solid var(--green-600);
  border-radius:12px;
  padding:1rem 1rem 0.75rem;
  box-shadow:0 1px 6px rgba(0,0,0,0.04);
}

.indication-card h3{
  margin:0 0 .35rem 0;
  color:var(--green-700);
}

.indication-card p{
  margin:0 0 .75rem 0;
  line-height:1.5;
}

/* Tags (pills) avec surlignage clair */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding-bottom:.5rem;
}

.tag{
  background:var(--green-100);
  color:var(--green-700);
  padding:.35em .75em;
  border-radius:999px;
  font-size:.92em;
  font-weight:500;
  border:1px solid rgba(52,122,81,.12);
}

/* Intro / outro */
.section-intro p,
.section-outro p{
  color:#2b2b2b;
}

/* =========================
   Mobile and small screens
   ========================= */

/* Nav: desktop vs mobile */
@media (min-width: 992px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* Mobile layout for header and panel */
@media (max-width: 991.98px) {
  .site-header { grid-template-columns: 1fr auto; }
  .panel { 
    display: grid;
    position: fixed;
    inset: 0;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 1000;
    place-items: center;
  }
  .panel .menu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.25rem;
  }

  /* Overlay hidden by default */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999;
  }
}

/* Open states (toggled by JS) */
body.menu-open { overflow: hidden; }
body.menu-open .overlay {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open .panel { transform: translateX(0); }
/* ensure hidden truly hides the overlay */
.overlay[hidden] { display: none !important; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Layout tweaks ≤ 768px */
@media (max-width: 768px) {
  /* Hero becomes one column, CTA under intro */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "cta";
    gap: 12px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .hero > :first-child { grid-area: intro; }
  .hero > :nth-child(2) { grid-area: cta; }

  .hero h1 { margin: 0; }
  .address { margin: 0; text-align: left; font-size: .95rem; }

  /* CTA more compact */
  .cta { margin: .5rem 0 0; }
  .cta-phone a {
    display: inline-block;
    padding: .8rem 1rem;
    font-size: 1.15rem;
    margin: 0 auto; /* center */
    width: auto;
  }

  /* Section flow paddings */
  section.flow { padding: 16px; }
  .flow h2 {background-color:#ccc; }
  .hrgreen { width: 90%; }
	a.ancre {
	  text-decoration: underline;
	  color: var(--brand);
	  font-weight: 500;
	}
  /* Image + text stack */
  .blocflex {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .blocimgtxt,
  .bloctxtlargbloqu {
    flex: 1 1 auto;
    max-width: 100%;
  }

  /* Image responsiveness */
  .hero-figure { margin: 0; text-align: center; }
  .hero-figure img {
    width: 100%;
    max-width: 160px; /* smaller on mobile */
    height: auto;
  }
}