/* CSS épuré pour nos_services.html — Les Jardins Bueno */

html {
margin-right: auto;

  margin-left: auto;

  font-family: "Open Sans", sans-serif;
}

@font-face {
font-family: "PlayfairDisplay";

  src: url("assets/font/PlayfairDisplay-Regular.woff2") format("woff2");

  font-style: normal;

  font-display: swap;
}

@font-face {
font-family: "PlayfairDisplayItalic";

  src: url("assets/font/PlayfairDisplay-Italic.woff2") format("woff2");

  font-style: italic;

  font-display: swap;
}

@font-face {
font-family: "Allura";

  src: url("assets/font/Allura-Regular.woff2") format("woff2");

  font-style: normal;

  font-display: swap;
}

@font-face {
font-family: "Montserrat";

  src: url("assets/font/Montserrat-Thin.woff2") format("woff2");

  font-style: normal;

  font-display: swap;
}

@font-face {
font-family: "MontserratItalic";

  src: url("assets/font/Montserrat-ThinItalic.woff2") format("woff2");

  font-style: italic;

  font-display: swap;
}

.wrapper.scrolled {
background: rgba(170, 163, 150, 0.55);

  backdrop-filter: blur(10px);

  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.containerHeader {
background-image:url("assets/img/headerpaysagiste_paris.png");

  background-size: cover;

  background-position: 70% 20%;

  height: 50vh;
}

.titleHeader {
display: flex;

  width: 100%;

  height: 100%;

  justify-content: space-evenly;

  align-items: center;

  color: #f1eada;

  text-align: center;

  text-shadow: 0 10px 30px rgba(0, 0, 0, .25);

  background: rgba(170, 163, 150, 0.55);

  flex-direction: column;
}

.titleHeaderH1 {
font-family: "PlayfairDisplay", serif;

  font-size: 6rem;

  font-weight: 620;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  line-height: 1.05;
}

.titleHeaderH1 span {
font-style: italic;

  font-weight: 100;

  letter-spacing: 0.1em;

  text-transform: none;

  font-size: 3rem;

  font-family: "Allura", serif;
}

.titleHeaderH1 span:last-child {
display: block;

  margin-top: .2rem;

  line-height: 1.1;
}

.banderoleHeader {
width: 100%;

  height: 10%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: "Montserrat" !important;

  text-transform: uppercase;

  font-size: 1rem;

  letter-spacing: 0.25em;

  border-top: solid 1px #f1eada;
}

.textBanderole {
display: flex;

  flex-direction: row;

  width: 100%;

  justify-content: space-evenly;

  align-items: center;
}

.header label {
color: #f1eada;

    padding-bottom: 2px;
}

* {
margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;
}

.nav-header {
position: fixed;

  z-index: 99;

  width: 100%;

  text-transform: capitalize;

  color: #FFFFFF;
}

.nav-header .wrapper {
padding: 0px 30px;

  height: 100px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-around;
}

.containerLogo_jardins_bueno {
width: 260px;
}

.containerTitle {
display: flex;

  align-items: center;

  width: 100%;

  justify-content: space-evenly;

  height: 100%;
}

.containerTitleSpan {
width: 25%;

    text-align: center;
}

.titleHeaderSpan {
font-family: "Montserrat" !important;

  text-transform: uppercase;

  font-size: medium;

  margin-top: 1rem;
}

.logoMap img {
width: 3rem;

  filter: invert(1) brightness(2);
}

.containerMainTitle {
width: 50%;
}

img.entreprise_paysage_logo_img {
width: 100%;
}

.container_nav {
display: flex;

    justify-content: flex-end;

    flex-grow: 1;

    flex-basis: 0;
}

.wrapper .nav-links {
display: inline-flex;
}

.nav-links li {
list-style: none;
}

.nav-links li a {
color: #f1eada;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 1rem;

    font-weight: 500;

    padding: 9px 15px;

    border-radius: 5px;

    transition: all 0.3s ease;

    font-family: "PlayfairDisplay";

    font-weight: 900;

    letter-spacing: 0.12em;
}

.nav-links li a:hover {
background: #584738;

  color: #f1eada;
}

.service-section {
width: 100%;

  box-sizing: border-box;



  padding: 100px clamp(25px, 5vw, 110px);
}

.service-container {
width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

.service-layout {
display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  align-items: center;



  gap: clamp(45px, 5vw, 110px);
}

.service-layout.service-reverse {
grid-template-columns: 1.15fr 0.85fr;
}

.service-reverse .service-gallery {
grid-column: 1;

  grid-row: 1;
}

.service-reverse .service-content {
grid-column: 2;

  grid-row: 1;
}

.service-cream {
background: #eae3d7;

  color: #49382c;
}

.service-sage {
background: #6b7763;

  color: #fff8ec;
}

.service-ivory {
background: #f1ece4;

  color: #49382c;
}

.service-forest {
background: #485746;

  color: #fff8ec;
}

.service-content {
max-width: 570px;
}

.service-number {
display: block;



  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2.8px;

  text-transform: uppercase;



  margin-bottom: 24px;
}

.service-content h2 {
font-family: Georgia, serif;

  font-size: clamp(35px, 3.3vw, 58px);

  font-weight: 400;

  line-height: 1.16;



  margin: 0 0 30px;
}

.service-content h2 em {
display: block;

  font-weight: 400;

  font-style: italic;
}

.service-line {
display: block;

  width: 60px;

  height: 2px;



  margin-bottom: 30px;
}

.service-content p {
font-size: 15px;

  line-height: 1.85;

  margin: 0 0 18px;
}

.service-content p:last-child {
margin-bottom: 0;
}

.service-content .service-intro {
font-size: 18px;

  line-height: 1.65;

  font-weight: 500;

  margin-bottom: 22px;
}

.service-cream .service-number,
.service-ivory .service-number {
color: #96734f;
}

.service-cream .service-content h2,
.service-ivory .service-content h2 {
color: #49382c;
}

.service-cream .service-content h2 em,
.service-ivory .service-content h2 em {
color: #6b7763;
}

.service-cream .service-content p,
.service-ivory .service-content p {
color: #66574b;
}

.service-cream .service-line,
.service-ivory .service-line {
background: #a48767;
}

.service-sage .service-number,
.service-forest .service-number {
color: #e4d8c5;
}

.service-sage .service-content h2,
.service-forest .service-content h2 {
color: #fff8ec;
}

.service-sage .service-content h2 em,
.service-forest .service-content h2 em {
color: #e7d5b8;
}

.service-sage .service-content p,
.service-forest .service-content p {
color: #f1ede4;
}

.service-sage .service-line,
.service-forest .service-line {
background: #d9c7a9;
}

.service-gallery {
display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  grid-template-rows: repeat(2, minmax(0, 1fr));



  gap: 14px;



  width: 100%;

  height: clamp(360px, 32vw, 570px);

  min-width: 0;
}

.service-photo {
position: relative;

  min-width: 0;

  min-height: 0;



  overflow: hidden;

  border-radius: 5px;



  background: rgba(0, 0, 0, 0.08);
}

.service-photo-main {
grid-column: 1;

  grid-row: 1 / 3;
}

.service-photo-small {
grid-column: 2;
}

.service-photo-small:nth-child(2) {
grid-row: 1;
}

.service-photo-small:nth-child(3) {
grid-row: 2;
}

.service-photo img {
display: block;

  width: 100%;

  height: 100%;



  object-fit: cover;

  object-position: center;



  transition: transform 0.7s ease;
}

.service-photo:hover img {
transform: scale(1.045);
}

.service-info {
margin-top: 30px;

  padding: 20px 24px;



  border-left: 2px solid #d9c7a9;

  background: rgba(255, 255, 255, 0.08);
}

.service-info strong {
display: block;

  margin-bottom: 10px;



  color: #fff8ec;

  font-size: 15px;
}

.service-info p {
margin: 0;

  font-size: 13px;
}

.services-cta {
background: #eae3d7;

  padding: 95px 25px;



  text-align: center;
}

.services-cta-inner {
max-width: 750px;

  margin: 0 auto;
}

.services-cta-eyebrow {
display: block;



  color: #96734f;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 3px;



  margin-bottom: 22px;
}

.services-cta h2 {
font-family: Georgia, serif;

  font-size: clamp(36px, 4vw, 58px);

  font-weight: 400;

  line-height: 1.2;



  color: #49382c;

  margin: 0 0 22px;
}

.services-cta h2 em {
color: #6b7763;

  font-weight: 400;
}

.services-cta p {
max-width: 560px;

  margin: 0 auto 35px;



  color: #66574b;

  font-size: 16px;

  line-height: 1.8;
}

.services-cta-button {
display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 25px;



  padding: 17px 28px;



  background: #6b7763;

  border-radius: 6px;



  color: #fff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;



  transition:

    background 0.3s ease,

    transform 0.3s ease;
}

.services-cta-button:hover {
background: #52614b;

  transform: translateY(-3px);
}

.services-cta-button span {
font-size: 20px;

  transition: transform 0.3s ease;
}

.services-cta-button:hover span {
transform: translate(3px, -3px);
}

.service-reveal {
opacity: 1;

  transform: none;
}

.services-animations .service-reveal {
opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.8s ease, transform 0.8s ease;
}

.services-animations .service-reveal.visible {
opacity: 1;

  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
.services-animations .service-reveal {
opacity: 1;

    transform: none;

    transition: none;
}
}

@media (max-width: 1050px) {
.service-section {
padding: 75px 35px;
}

.service-layout,
.service-layout.service-reverse {
grid-template-columns: 1fr;

    gap: 40px;
}

.service-reverse .service-content,
.service-reverse .service-gallery {
grid-column: 1;

    grid-row: auto;
}

.service-content {
max-width: 750px;
}

.service-content h2 {
font-size: clamp(36px, 5vw, 52px);
}

.service-gallery {
height: clamp(350px, 55vw, 540px);
}
}

@media (max-width: 650px) {
.service-section {
padding: 65px 20px;
}

.service-layout,
.service-layout.service-reverse {
gap: 30px;
}

.service-number {
font-size: 10px;

    letter-spacing: 2px;

    margin-bottom: 20px;
}

.service-content h2 {
font-size: 36px;

    margin-bottom: 25px;
}

.service-content .service-intro {
font-size: 16px;
}

.service-content p {
font-size: 14px;

    line-height: 1.8;
}

.service-line {
margin-bottom: 25px;
}

.service-gallery {
height: 370px;

    gap: 8px;
}

.service-photo {
border-radius: 3px;
}

.services-cta {
padding: 75px 20px;
}

.services-cta h2 {
font-size: 36px;
}

.services-cta p {
font-size: 14px;
}
}

@media (max-width: 380px) {
.service-gallery {
height: 300px;
}

.service-content h2 {
font-size: 32px;
}
}

@media (prefers-reduced-motion: reduce) {
.service-reveal {
opacity: 1;

    translate: none;

    transition: none;
}

.service-photo img,
.services-cta-button,
.services-cta-button span {
transition: none;
}
}

.contact-section {
width: 100%;

  box-sizing: border-box;

  background: #eae3d7;



  padding: 110px clamp(25px, 5vw, 110px);

  overflow: hidden;
}

.contact-container {
width: 100%;

  max-width: 2400px;

  margin: 0 auto;



  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: clamp(50px, 7vw, 160px);
}

@media (min-width: 1051px) {
.contact-container {
grid-template-columns: 0.9fr 1.1fr;

    gap: clamp(35px, 3vw, 75px);

    align-items: center;
}

.contact-intro {
max-width: 760px;

    justify-self: end;
}

.contact-form-card {
width: 100%;

    max-width: 850px;

    justify-self: start;
}
}

.contact-intro {
max-width: 680px;
}

.contact-eyebrow {
display: block;

  margin-bottom: 25px;



  font-size: 11px;

  font-weight: 600;

  letter-spacing: 3px;

  color: #96734f;
}

.contact-intro h2 {
font-family: Georgia, serif;

  font-size: clamp(38px, 4vw, 65px);

  font-weight: 400;

  line-height: 1.15;



  color: #49382c;

  margin: 0 0 30px;
}

.contact-intro h2 em {
font-weight: 400;

  font-style: italic;

  color: #6b7763;
}

.contact-line {
display: block;

  width: 65px;

  height: 2px;



  background: #a48767;

  margin-bottom: 35px;
}

.contact-lead {
color: #594a3c;

  font-size: 18px;

  line-height: 1.7;

  margin: 0 0 22px;
}

.contact-description {
color: #66574b;

  font-size: 16px;

  line-height: 1.85;

  margin: 0;
}

.contact-signature {
display: flex;

  flex-direction: column;

  align-items: flex-start;



  margin-top: 55px;

  transform: rotate(-3deg);

  transform-origin: left center;
}

.contact-signature > span {
font-family: "Caveat", cursive;

  font-size: clamp(24px, 2.3vw, 34px);

  line-height: 1.2;

  color: #9a7956;
}

.contact-signature small {
font-family: "Caveat", cursive;

  font-size: 24px;

  color: #806a54;

  margin-top: 8px;
}

.contact-form-card {
width: 100%;

  box-sizing: border-box;



  background: #fffaf2;

  border: 1px solid #dcd0bf;

  border-radius: 12px;



  padding: clamp(30px, 3.5vw, 60px);



  box-shadow:

    0 12px 35px rgba(70, 50, 30, 0.07),

    0 25px 65px rgba(70, 50, 30, 0.04);
}

.contact-form-heading {
margin-bottom: 35px;
}

.contact-form-heading > span {
display: block;



  color: #96734f;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 2.5px;



  margin-bottom: 12px;
}

.contact-form-heading h3 {
font-family: Georgia, serif;

  font-size: clamp(26px, 2.4vw, 36px);

  font-weight: 400;

  line-height: 1.2;



  color: #49382c;

  margin: 0;
}

.contact-form {
display: flex;

  flex-direction: column;

  gap: 20px;
}

.contact-form-row {
display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}

.contact-field {
display: flex;

  flex-direction: column;

  min-width: 0;

  gap: 9px;
}

.contact-field .header label {
color: #66574b;

  font-size: 13px;

  font-weight: 600;
}

.contact-field label span {
color: #a17c4b;
}

.contact-field input,
.contact-field textarea {
width: 100%;

  box-sizing: border-box;



  background: #f3eee6;

  border: 1px solid #d9ccbc;

  border-radius: 5px;



  padding: 14px 16px;



  font-family: inherit;

  font-size: 14px;

  line-height: 1.5;

  color: #49382c;



  outline: none;



  transition:

    background 0.3s ease,

    border-color 0.3s ease,

    box-shadow 0.3s ease;
}

.contact-field input {
min-height: 49px;
}

.contact-field textarea {
min-height: 145px;

  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: #998d7e;
}

.contact-field input:focus,
.contact-field textarea:focus {
background: #fffdf8;

  border-color: #6b7763;



  box-shadow:

    0 0 0 3px rgba(107, 119, 99, 0.12);
}

.contact-required {
margin: -5px 0 0;

  font-size: 12px;

  color: #8b7c6d;
}

.contact-submit {
width: 100%;

  min-height: 54px;



  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;



  padding: 16px 25px;



  background: #6b7763;

  border: 1px solid #6b7763;

  border-radius: 6px;



  color: #ffffff;

  font-family: inherit;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.3px;



  cursor: pointer;



  transition:

    background 0.3s ease,

    transform 0.3s ease,

    box-shadow 0.3s ease;
}

.contact-submit:hover {
background: #52614b;

  box-shadow: 0 8px 20px rgba(82, 97, 75, 0.18);

  transform: translateY(-2px);
}

.contact-submit:focus-visible {
outline: 3px solid #a48767;

  outline-offset: 3px;
}

.contact-submit-arrow {
font-size: 21px;

  transition: transform 0.3s ease;
}

.contact-submit:hover .contact-submit-arrow {
transform: translate(3px, -3px);
}

.contact-form-feedback {
margin: 0;

  color: #52614b;

  font-size: 13px;
}

.contact-form-feedback:empty {
display: none;
}

.contact-reveal {
opacity: 0;

  translate: 0 45px;



  transition:

    opacity 0.85s ease,

    translate 0.85s ease;
}

.contact-reveal.visible {
opacity: 1;

  translate: 0 0;
}

.contact-form-card.contact-reveal {
transition-delay: 0.15s;
}

@media (max-width: 1050px) {
.contact-section {
padding: 80px 35px;
}

.contact-container {
grid-template-columns: 1fr;

    gap: 55px;
}

.contact-intro {
max-width: 750px;
}

.contact-intro h2 {
font-size: clamp(38px, 5vw, 55px);
}

.contact-signature {
margin-top: 35px;
}

.contact-form-card {
max-width: 800px;

    margin: 0 auto;
}
}

@media (max-width: 650px) {
.contact-section {
padding: 65px 20px;
}

.contact-container {
gap: 45px;
}

.contact-eyebrow {
font-size: 10px;

    letter-spacing: 2px;
}

.contact-intro h2 {
font-size: 38px;
}

.contact-lead {
font-size: 16px;
}

.contact-description {
font-size: 14px;
}

.contact-signature {
margin-top: 35px;
}

.contact-signature > span {
font-size: 25px;
}

.contact-form-card {
padding: 28px 22px;
}

.contact-form-heading {
margin-bottom: 28px;
}

.contact-form-heading h3 {
font-size: 27px;
}

.contact-form-row {
grid-template-columns: 1fr;

    gap: 20px;
}

.contact-form {
gap: 18px;
}

.contact-field input,
.contact-field textarea {
font-size: 16px;
}
}

@media (prefers-reduced-motion: reduce) {
.contact-reveal {
opacity: 1;

    translate: none;

    transition: none;
}

.contact-form-card.contact-reveal {
transition-delay: 0s;
}

.contact-submit,
.contact-submit-arrow,
.contact-field input,
.contact-field textarea {
transition: none;
}
}

.site-footer {
width: 100%;

  box-sizing: border-box;



  background: #27221e;

  color: #f1e9db;



  padding: 75px clamp(25px, 5vw, 110px) 28px;
}

.footer-container {
width: 100%;

  max-width: 2400px;

  margin: 0 auto;
}

.footer-main {
display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 80px;



  padding-bottom: 65px;
}

.footer-brand {
max-width: 420px;
}

.footer-logo {
display: inline-block;



  font-family: Georgia, serif;

  font-size: clamp(26px, 2.2vw, 36px);

  font-weight: 400;



  color: #f1e9db;

  text-decoration: none;



  margin-bottom: 18px;

  transition: color 0.3s ease;
}

.footer-logo:hover {
color: #d2b999;
}

.footer-brand p {
margin: 0;



  color: #bbae9e;

  font-size: 14px;

  line-height: 1.9;
}

.footer-navigation {
display: flex;

  align-items: flex-start;

  gap: clamp(60px, 7vw, 140px);
}

.footer-links-group {
display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 15px;
}

.footer-links-group h3 {
margin: 0 0 12px;



  color: #d1b999;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.footer-links-group a {
color: #d3c7b9;

  font-size: 14px;

  line-height: 1.5;

  text-decoration: none;



  transition:

    color 0.3s ease,

    transform 0.3s ease;
}

.footer-links-group a:hover {
color: #ffffff;

  transform: translateX(4px);
}

.footer-divider {
width: 100%;

  height: 1px;

  background: rgba(241, 233, 219, 0.16);
}

.footer-bottom {
display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;



  padding-top: 25px;
}

.footer-bottom p {
margin: 0;



  color: #a99b8b;

  font-size: 12px;

  line-height: 1.6;
}

.footer-back-top {
display: inline-flex;

  align-items: center;

  gap: 12px;



  color: #d3c7b9;

  font-size: 12px;

  text-decoration: none;



  transition: color 0.3s ease;
}

.footer-back-top span {
display: flex;

  align-items: center;

  justify-content: center;



  width: 32px;

  height: 32px;



  border: 1px solid rgba(241, 233, 219, 0.3);

  border-radius: 50%;



  font-size: 16px;



  transition:

    background 0.3s ease,

    color 0.3s ease,

    transform 0.3s ease;
}

.footer-back-top:hover {
color: #ffffff;
}

.footer-back-top:hover span {
background: #f1e9db;

  color: #27221e;

  transform: translateY(-4px);
}

.site-footer a:focus-visible {
outline: 2px solid #d1b999;

  outline-offset: 5px;
}


/* Pied de page : disposition unique, sans règles contradictoires */
.site-footer { padding: 55px 30px 25px; }
.site-footer .footer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
}
.site-footer .footer-main {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 70px;
  width: 100%;
  padding-bottom: 45px;
}
.site-footer .footer-navigation {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 45px;
}
.site-footer .footer-divider { display: block; width: 100%; height: 1px; flex: none; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; width: 100%; padding-top: 22px; }
@media (max-width: 1050px) {
  .site-footer .footer-main { gap: 40px; }
  .site-footer .footer-navigation { gap: 25px; }
}
@media (max-width: 650px) {
  .site-footer { padding: 45px 22px 25px; }
  .site-footer .footer-main { grid-template-columns: 1fr; gap: 35px; padding-bottom: 35px; }
  .site-footer .footer-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 15px; }
}
/* =========================================================
   AVIS CLIENTS — classes présentes dans nos_services.html
   ========================================================= */
.temoignages-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 100px 30px 85px;
  background: linear-gradient(rgba(35,48,34,.85),rgba(35,48,34,.88)),
              url("assets/img/gazon_jardins_bueno.jpg") center/cover no-repeat;
  color: #fffaf2;
}
.temoignages-container { max-width: 1350px; margin: 0 auto; }
.temoignages-header { max-width: 760px; margin: 0 auto 55px; text-align: center; }
.temoignages-eyebrow { display: block; margin-bottom: 22px; color: #d9c8aa; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
.temoignages-header h2 { margin: 0 0 20px; color: #fffaf2; font-family: Georgia,serif; font-size: clamp(36px,4vw,58px); font-weight: 400; line-height: 1.2; }
.temoignages-header p { color: #e6e4da; font-size: 16px; line-height: 1.8; }
.temoignages-slider, .temoignages-viewport { width: 100%; }
.temoignages-viewport { overflow: hidden; }
.temoignages-track { display: flex; gap: 24px; transition: transform .55s ease; }
.temoignage-card { flex: 0 0 calc((100% - 48px)/3); min-width: 0; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 35px 30px; background: #fffaf2; color: #49382c; border-radius: 8px; box-shadow: 0 12px 35px rgba(0,0,0,.1); }
.temoignage-content { flex: 1; }
.temoignage-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.temoignage-stars { color: #ad9167; font-size: 19px; letter-spacing: 3px; }
.temoignage-quote { color: #e5dac9; font-family: Georgia,serif; font-size: 70px; line-height: .8; }
.temoignage-text { margin: 0; color: #5e5146; font-size: 15px; line-height: 1.85; }
.temoignage-author { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #e9e1d6; color: #49382c; font-size: 14px; font-weight: 600; }
.temoignage-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #eae3d7; color: #6b7763; font-family: Georgia,serif; font-size: 18px; }
.temoignages-navigation { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 35px; }
.temoignages-navigation[hidden] { display: none; }
.avis-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,250,242,.45); border-radius: 50%; background: transparent; color: #fffaf2; font-size: 17px; cursor: pointer; transition: background .3s,color .3s; }
.avis-arrow:hover:not(:disabled) { background: #fffaf2; color: #485746; }
.avis-arrow:disabled { opacity: .3; cursor: default; }
.avis-dots { display: flex; align-items: center; gap: 9px; }
.avis-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 20px; background: rgba(255,250,242,.4); cursor: pointer; transition: width .3s,background .3s; }
.avis-dot.active { width: 27px; background: #fffaf2; }
.temoignages-footer { display: flex; justify-content: center; margin-top: 45px; }
.temoignages-button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; padding: 15px 26px; border: 1px solid rgba(255,250,242,.65); border-radius: 5px; background: transparent; color: #fffaf2; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .3s,color .3s; }
.temoignages-button:hover { background: #fffaf2; color: #485746; }
.temoignages-button span { font-size: 19px; }
@media (max-width: 1050px) {
  .temoignages-section { padding: 80px 30px; }
  .temoignage-card { flex-basis: calc((100% - 24px)/2); }
}
@media (max-width: 650px) {
  .temoignages-section { padding: 70px 20px; }
  .temoignages-header { margin-bottom: 35px; }
  .temoignages-header h2 { font-size: 36px; }
  .temoignages-header p { font-size: 14px; }
  .temoignages-track { gap: 16px; }
  .temoignage-card { flex-basis: 100%; min-height: 280px; padding: 28px 24px; }
  .temoignage-text { font-size: 14px; }
  .temoignages-navigation { margin-top: 25px; }
  .temoignages-footer { margin-top: 35px; }
}

/* Animations : visible par défaut, jamais masqué si JS ne démarre pas. */
.avis-reveal, .contact-reveal, .service-reveal { opacity: 1; transform: none; translate: none; }
.services-animations .avis-reveal,
.services-animations .contact-reveal,
.services-animations .service-reveal { opacity: 0; transform: translateY(30px); translate: none; transition: opacity .8s ease, transform .8s ease; }
.services-animations .avis-reveal.visible,
.services-animations .contact-reveal.visible,
.services-animations .service-reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .services-animations .avis-reveal,
  .services-animations .contact-reveal,
  .services-animations .service-reveal { opacity: 1; transform: none; transition: none; }
  .temoignages-track, .avis-arrow, .avis-dot { transition: none; }
}

/* Galeries dynamiques : page réalisations */
.realisations-page {

  width: 100%;

  overflow: hidden;

  background: #eae3d7;

}



/* INTRODUCTION */



.realisations-intro {

  max-width: 850px;

  margin: 0 auto;

  padding: 100px 25px 50px;

  text-align: center;

}



.realisations-eyebrow {

  display: block;

  margin-bottom: 22px;



  color: #96734f;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 3px;

}



.realisations-intro h2 {

  margin: 0 0 25px;



  color: #49382c;

  font-family: Georgia, serif;

  font-size: clamp(38px, 4vw, 62px);

  font-weight: 400;

  line-height: 1.2;

}



.realisations-intro h2 em {

  display: block;

  color: #6b7763;

  font-weight: 400;

}



.realisations-intro p {

  max-width: 580px;

  margin: 0 auto;



  color: #66574b;

  font-size: 16px;

  line-height: 1.8;

}



/* FILTRES */



.realisations-page .realisations-filters {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;



  padding: 0 20px 65px;

}



.realisations-page .filterBtn {

  padding: 12px 22px;



  border: 1px solid #c8beaf;

  border-radius: 40px;



  background: transparent;

  color: #49382c;



  font: inherit;

  font-size: 13px;

  cursor: pointer;



  transition:

    background 0.3s ease,

    color 0.3s ease,

    border-color 0.3s ease;

}



.realisations-page .filterBtn:hover,

.realisations-page .filterBtn.active {

  background: #6b7763;

  color: #fffaf2;

  border-color: #6b7763;

}



/* SECTIONS */



.realisations-page .galleryService {

  display: block;

  padding: 90px clamp(20px, 5vw, 100px);

}



.realisations-page .galleryService.hidden {

  display: none;

}



.realisations-page .galleryService--jardins {

  background: #eae3d7;

  color: #49382c;

}



.realisations-page .galleryService--terrasses {

  background: #6b7763;

  color: #fffaf2;

}



.realisations-page .galleryService--clotures {

  background: #f1ece4;

  color: #49382c;

}



.realisations-page .galleryService--entretien {

  background: #485746;

  color: #fffaf2;

}



.realisations-page .galleryService-inner {

  max-width: 1600px;

  margin: 0 auto;

}



/* TITRES DES GALERIES */



.realisations-page .galleryService-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 25px;



  margin-bottom: 38px;

}



.realisations-page .galleryService-headingText {

  max-width: 800px;

}



.realisations-page .galleryService-number {

  display: block;

  margin-bottom: 20px;



  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2.8px;

  color: #96734f;

}



.realisations-page .galleryTitle {

  margin: 0 0 24px;



  font-family: Georgia, serif;

  font-size: clamp(32px, 3.5vw, 55px);

  font-weight: 400;

  line-height: 1.2;



  color: inherit;

  text-align: left;

}



.realisations-page .galleryService-line {

  display: block;

  width: 60px;

  height: 2px;

  margin-bottom: 20px;



  background: #a48767;

}



.realisations-page .galleryService-description {

  margin: 0;

  font-size: 16px;

  line-height: 1.7;

  opacity: 0.85;

}



.realisations-page .galleryService-count {

  flex-shrink: 0;

  padding-bottom: 4px;



  font-size: 12px;

  letter-spacing: 1px;

  opacity: 0.75;

}



/* TEXTES SUR FONDS VERTS */



.realisations-page .galleryService--terrasses

.galleryService-number,

.realisations-page .galleryService--entretien

.galleryService-number {

  color: #e7d5b8;

}



.realisations-page .galleryService--terrasses

.galleryService-line,

.realisations-page .galleryService--entretien

.galleryService-line {

  background: #d9c7a9;

}



/* MOSAÏQUE PHOTO */



.realisations-page .galleryGrid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-auto-flow: row dense;

  grid-auto-rows: 145px;



  gap: 14px;

}



/* Chaque image est une carte */



.realisations-page .galleryItem {

  position: relative;

  min-width: 0;

  min-height: 0;

  margin: 0;



  overflow: hidden;

  border-radius: 5px;



  background: rgba(0, 0, 0, 0.12);

}



/* Image principale de chaque groupe de 7 */



.realisations-page .galleryItem:nth-child(7n + 1) {

  grid-column: span 2;

  grid-row: span 3;

}



/* Deuxième image plus large */



.realisations-page .galleryItem:nth-child(7n + 2) {

  grid-column: span 2;

  grid-row: span 2;

}



/* Image verticale */



.realisations-page .galleryItem:nth-child(7n + 5) {

  grid-row: span 2;

}



/* Toutes les images */



.realisations-page .galleryImg {

  display: block;

  width: 100%;

  height: 100%;



  object-fit: cover;

  object-position: center;



  cursor: zoom-in;



  transition:

    transform 0.6s ease,

    filter 0.6s ease;

}



.realisations-page .galleryItem:hover .galleryImg {

  transform: scale(1.055);

  filter: brightness(0.88);

}



/* Petite icône sur les photos */



.realisations-page .galleryItem-icon {

  position: absolute;

  right: 16px;

  bottom: 16px;



  display: flex;

  align-items: center;

  justify-content: center;



  width: 38px;

  height: 38px;



  border-radius: 50%;

  background: rgba(255, 250, 242, 0.95);



  color: #49382c;

  font-size: 21px;



  opacity: 0;

  transform: translateY(8px);

  pointer-events: none;



  transition:

    opacity 0.3s ease,

    transform 0.3s ease;

}



.realisations-page .galleryItem:hover .galleryItem-icon {

  opacity: 1;

  transform: translateY(0);

}



.realisations-page .galleryImg:focus-visible {

  outline: 3px solid #d9c7a9;

  outline-offset: -4px;

}



/* TABLETTE */



@media (max-width: 1050px) {



  .realisations-page .galleryService {

    padding: 75px 30px;

  }



  .realisations-page .galleryGrid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    grid-auto-rows: 135px;

    gap: 12px;

  }



  .realisations-page .galleryItem:nth-child(n) {

    grid-column: auto;

    grid-row: auto;

  }



  .realisations-page .galleryItem:nth-child(5n + 1) {

    grid-column: span 2;

    grid-row: span 2;

  }



}



/* MOBILE */



@media (max-width: 650px) {



  .realisations-intro {

    padding: 70px 20px 35px;

  }



  .realisations-intro h2 {

    font-size: 36px;

  }



  .realisations-intro p {

    font-size: 14px;

  }



  .realisations-page .realisations-filters {

    gap: 8px;

    padding-bottom: 40px;

  }



  .realisations-page .filterBtn {

    padding: 10px 15px;

    font-size: 12px;

  }



  .realisations-page .galleryService {

    padding: 65px 20px;

  }



  .realisations-page .galleryService-heading {

    display: block;

    margin-bottom: 28px;

  }



  .realisations-page .galleryTitle {

    font-size: 34px;

  }



  .realisations-page .galleryService-description {

    font-size: 14px;

  }



  .realisations-page .galleryService-count {

    display: block;

    margin-top: 15px;

  }



  .realisations-page .galleryGrid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-auto-rows: 115px;

    gap: 8px;

  }



  .realisations-page .galleryItem:nth-child(n) {

    grid-column: auto;

    grid-row: auto;

  }



  .realisations-page .galleryItem:nth-child(5n + 1) {

    grid-column: span 2;

    grid-row: span 2;

  }



  .realisations-page .galleryItem-icon {

    opacity: 1;

    transform: none;



    width: 30px;

    height: 30px;



    right: 10px;

    bottom: 10px;

    font-size: 17px;

  }



}



@media (prefers-reduced-motion: reduce) {

  .realisations-page .galleryImg,

  .realisations-page .galleryItem-icon,

  .realisations-page .filterBtn {

    transition: none;

  }

}



/* LIGHTBOX DES RÉALISATIONS */



.lightbox {

  position: fixed;

  inset: 0;

  z-index: 9999;



  display: none;

  align-items: center;

  justify-content: center;



  padding: 60px 75px;

  box-sizing: border-box;



  background: rgba(24, 27, 23, 0.96);

}



.lightbox.open {

  display: flex;

}



.lightboxImg {

  display: block;

  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

  object-fit: contain;

}



.lightboxClose,

.lightboxNav {

  position: absolute;

  z-index: 2;



  display: flex;

  align-items: center;

  justify-content: center;



  width: 44px;

  height: 44px;



  border: 1px solid rgba(255,255,255,0.45);

  border-radius: 50%;



  background: rgba(0,0,0,0.25);

  color: white;



  font-size: 28px;

  cursor: pointer;

}



.lightboxClose {

  top: 20px;

  right: 25px;

}



.lightboxPrev {

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

}



.lightboxNext {

  right: 20px;

  top: 50%;

  transform: translateY(-50%);

}



@media (max-width: 650px) {

  .lightbox {

    padding: 65px 12px;

  }



  .lightboxPrev {

    left: 8px;

  }



  .lightboxNext {

    right: 8px;

  }



  .lightboxClose,

  .lightboxNav {

    width: 36px;

    height: 36px;

    font-size: 24px;

  }

}






.realisations-page .gallery-tone-cream { background:#eae3d7; color:#49382c; }
.realisations-page .gallery-tone-sage { background:#6b7763; color:#fffaf2; }
.realisations-page .gallery-tone-ivory { background:#f1ece4; color:#49382c; }
.realisations-page .gallery-tone-forest { background:#485746; color:#fffaf2; }
.realisations-page .galleryService.hidden { display:none; }
.realisations-page .gallery-tone-sage .galleryService-number,
.realisations-page .gallery-tone-forest .galleryService-number { color:#e7d5b8; }
.realisations-page .gallery-tone-sage .galleryService-line,
.realisations-page .gallery-tone-forest .galleryService-line { background:#d9c7a9; }


/* ==========================================
   BANDEROLE HEADER — STYLE D'ORIGINE
========================================== */

.banderoleHeader {
  width: 100%;
  height: 10%;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.25em;

  border-top: 1px solid #f1eada;
  color: #f1eada;
}

/* Conteneur qui masque le débordement */

.banderole-container {
  position: static;
  transform: none;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
}

/* Les deux copies du texte */

.banderole-track {
  display: flex;
  align-items: center;
  width: max-content;
  flex: 0 0 auto;
}

/* Texte de la banderole */

.textBanderole {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;

  flex: 0 0 auto;
  width: max-content;

  gap: 32px;
  padding-right: 32px;

  white-space: nowrap;
}

.textBanderole span {
  flex: 0 0 auto;
  white-space: nowrap;

  color: #f1eada;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.textBanderole .banderole-separator {
  font-size: 11px;
  opacity: 0.65;
}

/* ==========================================
   GRAND ÉCRAN — BANDEAU FIXE
========================================== */

@media (min-width: 1441px) {

  .banderole-track {
    width: 100%;
    justify-content: center;
  }

  .textBanderole {
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
    padding-right: 0;
  }

  .textBanderole[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================
   ÉCRANS < 1441 PX — DÉFILEMENT CONTINU
========================================== */

@media (max-width: 1440px) {

  .banderole-track {
    animation: banderole-scroll 32s linear infinite;
  }

  @keyframes banderole-scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }
}

/* Mobile */

@media (max-width: 650px) {

  .textBanderole {
    gap: 24px;
    padding-right: 24px;
  }

  .textBanderole span {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* Pause au survol */

.banderoleHeader:hover .banderole-track {
  animation-play-state: paused;
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {

  .banderole-track {
    animation: none !important;
  }

  .banderole-container {
    overflow-x: auto;
  }
}

/* ==========================================
   BANDEROLE — EFFET VERRE DÉPOLI
========================================== */



.banderoleHeader {
  background: rgba(170, 163, 150, 0.22);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  border-top: 1px solid rgba(255, 250, 242, 0.35);

  box-shadow: none;
}

.textBanderole span {
  color: #fffaf2;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.textBanderole .banderole-separator {
  color: #fffaf2;
  opacity: 0.75;
}
.image-a-redresser {
  transform: rotate(90deg) scale(1.8);
  transform-origin: center;
}
/* ==========================================
   NAVIGATION — PAGES SERVICES & RÉALISATIONS
   Desktop : > 780px
   Burger : <= 780px
========================================== */

body.menu-open {
  overflow: hidden;
}

/* Bouton burger */
.nav-header .burgerBtn {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 250, 242, .3);
  border-radius: 10px;
  background: rgba(73, 56, 44, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  position: relative;
  z-index: 120;
  flex: 0 0 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-header .burgerBtn span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  background: #fffaf2;
  transition: transform .3s ease, opacity .3s ease;
}

.nav-header .burgerBtn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-header .burgerBtn.open span:nth-child(2) {
  opacity: 0;
}

.nav-header .burgerBtn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Fond sombre derrière le menu */
.navOverlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(25, 22, 18, .48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

.navOverlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================
   TABLETTE ET MOBILE
========================================== */

@media screen and (max-width: 780px) {

  .nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }

  .nav-header .wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 78px;
    min-height: 78px;
    padding: 0 20px;
    gap: 12px;
  }

  .nav-header .containerLogo_jardins_bueno {
    width: 160px;
    flex: 0 0 auto;
    position: relative;
    z-index: 100;
  }

  .nav-header .burgerBtn {
    display: flex;
    position: relative;
    margin-left: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 120;
  }

  .nav-header .container_nav {
    width: 0;
    flex: 0 0 0;
    margin: 0;
    padding: 0;
  }

  /* Panneau coulissant */
  .nav-header .wrapper .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    width: min(88vw, 390px);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 95px 32px 45px;
    gap: 6px;

    background: #f1ece4;
    border-left: 1px solid rgba(73, 56, 44, .12);
    box-shadow: -15px 0 45px rgba(0, 0, 0, .12);

    overflow-y: auto;
    overscroll-behavior: contain;

    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;

    transition:
      transform .4s cubic-bezier(.22, 1, .36, 1),
      visibility .4s;

    z-index: 110;
  }

  .nav-header .wrapper .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .nav-header .nav-links li {
    width: 100%;
    list-style: none;
  }

  .nav-header .nav-links li a {
    display: block;
    width: 100%;
    padding: 15px 8px;

    color: #49382c;
    font-family: "PlayfairDisplay", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: none;

    border-radius: 0;
    border-bottom: 1px solid rgba(73, 56, 44, .12);

    transition: color .25s ease, padding-left .25s ease;
  }

  .nav-header .nav-links li a:hover {
    background: transparent;
    color: #6b7763;
    padding-left: 15px;
  }

  /* Contact en bouton */
  .nav-header .nav-links li:last-child a {
    margin-top: 20px;
    padding: 16px 20px;

    background: #6b7763;
    color: #fffaf2;
    border: 0;
    border-radius: 7px;

    font-family: "Montserrat", sans-serif;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
  }

  .nav-header .nav-links li:last-child a:hover {
    background: #53614d;
    color: #fffaf2;
    padding-left: 20px;
  }

  /* Burger ouvert : croix */
  .nav-header .burgerBtn.open {
    background: rgba(73, 56, 44, .1);
    border-color: rgba(73, 56, 44, .2);
  }

  .nav-header .burgerBtn.open span {
    background: #49382c;
  }
}

/* Petits téléphones */
@media screen and (max-width: 480px) {

  .nav-header .wrapper {
    padding-inline: 15px;
  }

  .nav-header .wrapper .nav-links {
    width: min(90vw, 360px);
    padding: 85px 24px 35px;
  }

  .nav-header .nav-links li a {
    font-size: 1.15rem;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .nav-header .wrapper .nav-links,
  .navOverlay,
  .nav-header .burgerBtn span {
    transition: none;
  }
}

/* ==========================================
   HEADER RESPONSIVE — PAGES SECONDAIRES
   Tablette et mobile : <= 780px
========================================== */

@media screen and (max-width: 780px) {

  /* Empêcher le débordement horizontal */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .header,
  .containerHeader {
    width: 100%;
    min-width: 0;
  }

  /* Header : titre + banderole */
  .containerHeader {
    height: auto;
    min-height: 560px;
    background-position: center;
    background-size: cover;
  }

  .titleHeader {
    width: 100%;
    height: auto;
    min-height: 560px;
    padding-top: 100px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;
  }

  /* Organisation du contenu */
  .containerTitle {
    width: 100%;
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 20px;
    padding: 20px 18px 35px;
  }

  /* Titre central */
  .containerMainTitle {
    width: 100%;
    min-width: 0;
    text-align: center;
    order: 1;
  }

  .titleHeaderH1 {
    margin: 0;
    font-family: "PlayfairDisplay", Georgia, serif;
    font-size: clamp(38px, 7.5vw, 60px);
    line-height: 1.08;
    letter-spacing: .035em;
    font-weight: 500;
    overflow-wrap: normal;
  }

  .titleHeaderH1 span {
    display: block;
    margin-bottom: 12px;
    font-family: "Allura", cursive;
    font-size: clamp(28px, 5.5vw, 42px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
  }

  /* Informations secondaires */
  .containerTitleSpan {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .containerTitleSpan:first-child {
    order: 2;
  }

  .containerTitleSpan:last-child {
    order: 3;
  }

  .logoMap img {
    width: 28px;
  }

  .titleHeaderSpan {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .04em;
  }

  /* Banderole toujours en bas */
  .banderoleHeader {
    flex: 0 0 60px;
    width: 100%;
    height: 60px;
    min-height: 60px;
    margin-top: auto;
    overflow: hidden;
  }

  .banderole-container {
    width: 100%;
    overflow: hidden;
  }

  .banderole-track {
    width: max-content;
  }

  .textBanderole {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ==========================================
   PETITS TÉLÉPHONES
========================================== */

@media screen and (max-width: 480px) {

  .containerHeader,
  .titleHeader {
    min-height: 530px;
  }

  .titleHeader {
    padding-top: 80px;
  }

  .containerTitle {
    gap: 18px;
    padding: 15px 15px 25px;
  }

  .titleHeaderH1 {
    font-size: clamp(36px, 10vw, 46px);
    letter-spacing: .02em;
  }

  .titleHeaderH1 span {
    font-size: 32px;
  }

  .containerTitleSpan {
    max-width: 280px;
  }

  .titleHeaderSpan {
    font-size: 10px;
  }

  .banderoleHeader {
    flex-basis: 55px;
    height: 55px;
    min-height: 55px;
  }
}

/* ==========================================
   HEADER TABLETTE — 481 à 780 px
========================================== */

@media screen and (min-width: 481px) and (max-width: 780px) {

  .containerHeader,
  .titleHeader {
    min-height: 540px;
  }

  .titleHeader {
    padding-top: 78px;
  }

  .containerTitle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-width: 0;
    padding: 20px 16px 30px;
  }

  /* Informations à gauche */
  .containerTitleSpan:first-child {
    grid-column: 1;
    grid-row: 1;
    order: initial;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  /* Titre au centre */
  .containerMainTitle {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  /* Informations à droite */
  .containerTitleSpan:last-child {
    grid-column: 3;
    grid-row: 1;
    order: initial;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .titleHeaderH1 {
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1.08;
    letter-spacing: 0;
  }

  .titleHeaderH1 span {
    font-size: clamp(23px, 3.5vw, 32px);
    margin-bottom: 10px;
  }

  .titleHeaderSpan {
    font-size: clamp(9px, 1.35vw, 12px);
    line-height: 1.5;
    letter-spacing: 0;
  }

  .logoMap img {
    width: 25px;
  }

  .banderoleHeader {
    margin-top: auto;
    height: 60px;
    min-height: 60px;
    flex: 0 0 60px;
  }
}

/* Titre des pages secondaires — ordinateur */
@media screen and (min-width: 781px) {
  .containerMainTitle .titleHeaderH1 {
    line-height: 1.05;
  }

  .containerMainTitle .titleHeaderH1 span {
    display: inline-block;
    margin-bottom: 12px;
  }
}

/* ==========================================
   HEADER — PAGES SECONDAIRES
   Ajustements ordinateur
========================================== */

@media screen and (min-width: 781px) {

  .containerMainTitle {
    min-width: 0;
    max-width: 100%;
  }

  .containerMainTitle .titleHeaderH1 {
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
  }

  .containerMainTitle .titleHeaderH1 span {
    display: block;
    font-size: clamp(1.6rem, 2.5vw, 2.8rem);
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .containerTitle {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 2.5fr)
      minmax(0, 1fr);
    gap: 20px;
  }
}

/* ==========================================
   NAVIGATION DESKTOP — PAGES SECONDAIRES
========================================== */

@media screen and (min-width: 781px) {

  .nav-header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
  }

  .nav-header .containerLogo_jardins_bueno {
    flex: 0 0 auto;
  }

  .nav-header .container_nav {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav-header .nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.5vw, 30px);
    width: auto;
  }

  .nav-header .nav-links li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .nav-header .nav-links li a {
    font-size: clamp(.68rem, .85vw, .88rem);
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

@media screen and (min-width: 781px) {
  .page-realisations .titleHeaderH1 {
    font-size: clamp(2.8rem, 4.5vw, 5rem);
  }
}

.contact-privacy-note {
  margin: 12px 0 20px;
  color: #76695d;
  font-size: .78rem;
  line-height: 1.7;
}

.contact-privacy-note a {
  color: #6b7763;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-privacy-note a:hover {
  color: #49382c;
}

.titleHeaderH1 .seo-subtitle {
  display: block;
  margin-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}

.services-anchor-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 22px 20px;
  background: #f1ece4;
}

.services-anchor-nav a {
  color: #49382c;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}

.services-anchor-nav a:hover {
  color: #6b7763;
}

.service-section {
  scroll-margin-top: 100px;
}

@media (max-width: 780px) {
  .services-anchor-nav {
    gap: 12px 18px;
    padding: 18px 15px;
  }

  .services-anchor-nav a {
    font-size: 0.75rem;
  }
}