:root {
  --primary:#2f5d62;
  --secondary:#5e8b7e;
  --accent:#cfe7e5;
  --light:#f7f9f8;
  --dark:#243333;
}

* {
  margin:0;
  box-sizing:border-box;
  font-family:"Segoe UI", Arial, sans-serif;
}

body {
  max-width:790px;
  margin:0 auto;
  padding:0 1rem;
  line-height:1.65;
  color:var(--dark);
  background:var(--light);
}

.container {
  max-width:780px;
  margin:auto;
  padding:1rem 1rem;
}

section {
  padding:2rem 0;
}

h1,h2,h3,h4 {
  color:var(--primary);
  margin-bottom:0.6rem;
}

h1 { font-size:clamp(1.2rem,4vw,1.3rem); }
h2 { 
	font-size:clamp(1.1rem,3.3vw,1.4rem);
	text-align:center !important;
	/*background:#FCB364;  orange clair */  
	background:#FE8807; /*orange banniere */
	color:black;
	border-radius:12px; /* 👈 arrondi des angles */
}
h3 { font-size:clamp(1rem,3vw,1.3rem); margin-top:1rem; }
h4 { font-size:clamp(1rem,2.5vw,1.2rem); margin-top:0.5rem; }

p {
  margin-bottom:0.7rem;
  font-size:clamp(0.95rem,2.5vw,1.1rem);
}

ul,ol {
  margin-left:1.4rem;
  margin-bottom:0.7rem;
}

li {
  margin-bottom:0.3rem;
}

/* HERO */
.hero {
  text-align:center;
  padding:1.6rem 0 1.2rem;
}

/* HIGHLIGHT BLOCK */
.highlight {
  background:var(--accent);
  padding:1rem;
  border-left:4px solid var(--secondary);
  border-radius:6px;
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.5rem;
}

/* HEADER & NAV */
header {
  position:sticky;
  top:0;
  z-index:100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(5px);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}

nav {
  position:relative;
  background:#006EBF;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

nav ul {
  display:flex;
  justify-content:center;
  gap:1.4rem;
  list-style:none;
  padding:0.8rem 0;
  margin:0;
}

nav a {
  text-decoration:none;
  color:white;
  font-size:1rem;
  font-weight:600;
}
/*
 n *av a:hover,
nav a:focus-visible {
background-color:#fcb05f;
color:black;
outline:none;
padding:0.5rem;
}
*/
/* HAMBURGER */
.nav-toggle {
  display:none;
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  font-size:1.8rem;
  color:white;
  cursor:pointer;
}

/* FOOTER */
footer {
  background:#1f2f2f;
  color:#d6dede;
  padding:2rem 1rem;
  font-size:0.85rem;
  text-align:center;
}

/* SCROLL OFFSET */
section[id] {
  scroll-margin-top: 180px;
}

/* BUTTON RDV */
.highlight .btn-rdv {
  display:inline-block;
  background-color:var(--primary);
  color:white;
  padding:0.6rem 1.2rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition: background-color 0.3s ease;
  width:100%;
  max-width:250px;
  text-align:center;
}

.highlight .btn-rdv:hover,
.highlight .btn-rdv:focus {
  background-color:var(--secondary);
  outline:none;
}

/* BANNER IMAGE */
.banner img {
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* RESPONSIVE */
@media (max-width:900px) {
  .container { padding:0.8rem; }
}

@media (max-width:700px) {
  .nav-toggle { display:block; }
  nav ul {
    display:none;
    flex-direction:column;
    width:100%;
    background:#006EBF;
    position:absolute;
    top:100%;
    left:0;
  }

  nav ul.show {
    display:flex;
  }
  nav a {
    display:block;
    text-align:center;
    padding:0.8rem;
  }
  section[id] { scroll-margin-top:120px; }
/*
  h1 { font-size:clamp(1.4rem,5vw,1.8rem); }
  h2 { font-size:clamp(1.1rem,4vw,1.5rem);}
  h3 { font-size:clamp(0.95rem,3.5vw,1.2rem); }
  h4 { font-size:clamp(0.9rem,3vw,1.1rem); }
*/
h1, h2, h3, h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}
  p { font-size:clamp(0.9rem,2.8vw,1rem); }
  .highlight .btn-rdv { max-width:100%; }
}

@media (max-width:400px) {
  nav a { font-size:0.95rem; }
}


.presentation-flex {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Image = 1/3 */
.presentation-image {
  flex: 1;
}

.presentation-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Texte = 2/3 */
.presentation-text {
  flex: 2;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .presentation-flex {
    flex-direction: column;
  }

  .presentation-image {
    order: 1; /* image en premier */
  }

  .presentation-text {
    order: 2;
  }
}