/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Handlee', cursive;
  background: #f7f7f7;
  color: #1f1f1f;
  line-height: 1.5;
  position: relative;
}
/* filigrane logo */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  H8vmin no-repeat; /* removed background-attachment:fixed to avoid mobile jitter */
  opacity: 0.12;
  filter: grayscale(1);
  pointer-events: none;
  z-index: 0;

  will-change: transform;
  contain: paint;}

/* Hero */
.hero {
  background: #2e7d32;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1rem;
}
.logo { width: 110px; height: auto; display: block; }
.hero-text h1 { margin: 0; font-size: 2.2rem; text-align: center; }
.hero-text p { margin: 0.25rem 0 0; opacity: 0.95; text-align: center; }

.topnav { margin-left: auto; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}
.topnav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: .5rem .8rem;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.topnav a:hover { background: rgba(255,255,255,.28); }

/* phone button: high contrast (white pill with green icon) */
.topnav .tel-link{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; color:#2e7d32; border:1px solid #2e7d32;
}
.topnav .tel-link svg { width:22px; height:22px; stroke: currentColor; transition: transform .15s ease; }
.topnav .tel-link:hover svg { transform: scale(1.05); }
.topnav .tel-text{ display:none; }
@media (max-width: 700px) {
  .topnav .tel-link { padding: 0.6rem 1rem; margin-left: 0.3rem; }
  .topnav .tel-link svg { width: 26px; height: 26px; }
  .topnav .tel-text{ display:inline; }
}

/* Toast (no layout shift) */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  
  background:#fff;
  color:#2e7d32;
  border:1px solid #cde6cf;
  padding:.55rem .8rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* Sections */
main section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}
h2 { font-size: 1.8rem; margin-top: 0; color: #2e7d32; }

/* Service cards with centered PNG backgrounds (opacity 0.25) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  overflow: hidden;
  min-height: 160px;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px auto;
  opacity: 0.25;
  pointer-events: none;
}
.card-elagage::before { background-image: url('icons/elagage.png'); }
.card-abattage::before { background-image: url('icons/abattage.png'); }
.card-broyage::before  { background-image: url('icons/broyage.png'); }

.card-content { position: relative; z-index: 1; }
.card h3 { margin: 0 0 .25rem 0; font-size: 1.3rem; }

/* Avant / Après */
#avant-apres {
  background: #eef5ee;
  
  
}
.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 1.25rem 0 2rem;
}
.photo {
  background: #fff;
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);

  position: relative;

}
.photo img { width: 100%; height: auto; border-radius: 8px; display: block; }
.photo figcaption { margin-top: 0.5rem; font-weight: bold; }

/* Contact + Form */
#contact .small { font-size: .9rem; opacity: .7; }
.hidden { display: none; }
.rgpd { font-size: .85rem; opacity: .75; margin-top: .5rem; }

/* Phone block in contact */
.phone-block{
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
  margin: .5rem auto 0; padding:.5rem .75rem; background:#fff; border:1px solid #e0e0e0;
  width:fit-content; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.phone-ico svg{ width:24px; height:24px; }
.phone-number{ color:#2e7d32; text-decoration:none; font-weight:bold; }
.phone-number:hover{ text-decoration:underline; }

form {
  max-width: 520px;
  margin: 1.2rem auto 0;
  display: flex; flex-direction: column; gap: 1rem;
}
form input, form textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}
form button {
  background-color: #2e7d32;
  color: white;
  padding: 0.85rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease;
}
form button:hover { opacity: .92; }
form button:active { transform: scale(.99); }

.alt-mail {
  margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .25rem; flex-wrap: wrap;
}
.alt-mail a { color: #2e7d32; text-decoration: none; border-bottom: 1px dashed #2e7d32; }

/* Copy icon */
.copy-btn { background: none; border: none; cursor: pointer; margin-left: 0.3rem; position: relative; width: 20px; height: 20px; padding: 0; }
.icon-copy { display: block; position: relative; width: 14px; height: 14px; border: 2px solid #2e7d32; border-radius: 3px; }
.icon-copy::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border: 2px solid #2e7d32; border-radius: 3px; opacity: 0.85; }

.copy-msg { margin-left: 0.6rem; color: #2e7d32; font-size: 0.9rem; opacity: 0; transform: translateY(2px); transition: opacity .35s ease, transform .35s ease; }
.copy-msg.visible { opacity: 1; transform: translateY(0); }

/* Footer */
footer { text-align: center; background: #333; color: #fff; padding: 1rem; }
footer a { color: #ddd; text-decoration: none; border-bottom: 1px dashed #bbb; }
footer a:hover { color: #fff; border-color: #fff; }

/* Lightbox */
.noscroll{ overflow:hidden; }
.lightbox{ position: fixed; inset:0; background: rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-grid{ display:grid; gap:1rem; grid-template-columns:1fr; max-width:90vw; }
@media (min-width: 900px){ .lightbox-grid{ grid-template-columns:1fr 1fr; } }
.lightbox-img{ max-width:90vw; max-height:80vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.lightbox-close{ position:absolute; top:12px; right:12px; font-size:1.6rem; border:none; background:#fff; color:#111; border-radius:999px; width:42px; height:42px; cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.4); }

/* ensure content stacks above watermark */
body, .hero, main, footer { position: relative; z-index: 1; }

/* fine-tune vertical alignment of icons in the phone block */
.phone-block{ align-items:center; }
.phone-ico svg{ vertical-align: middle; position: relative; top: 1px; }
.copy-btn{ position: relative; top: 1px; }
.icon-copy{ vertical-align: middle; }

/* tighten spacing under form */
#contact form + .phone-block{ margin-top: .8rem; }

/* v3 tweaks */
.phone-block{ display:inline-flex; align-items:center; gap:.5rem; }
.copy-btn{ top: -1px; } /* nudge up */
.icon-copy{ vertical-align: middle; }

/* 2) Green divider like above between sections "À propos" and "Contact" */
#contact{
  
  background: #f9fcf9;
}

/* 3) Bigger watermark (increase by 80%) */
html::before{
  background-size: 162vmin !important; /* 90vmin * 1.8 */
}

/* 4) More space between the form and the phone number */
#contact form + .phone-block{ margin-top: 1.6rem !important; }

/* 5) Keep toast style but ensure it appears under header button (already fixed-position) */

/* 6) Prevent text shifting when showing copy confirmations (reserve space) */
.copy-msg{
  display: inline-block;
  min-width: 120px;
  text-align: left;
  vertical-align: middle;
}
#phone-copied{ min-width: 120px; }
#copy-msg{ min-width: 120px; }

/* v4 phone block sizing & centering */
#contact .phone-block{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 1.6rem auto 0 !important;
  padding: .35rem .6rem;          /* tighter */
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
  line-height: 1;                  /* keep snug height */
}
#contact .phone-number{ line-height: 1; }

/* keep copy icon perfectly aligned */
#contact .copy-btn{ top: -1px; }
#contact .phone-ico svg{ position: relative; top: 0px; }

/* prevent shifts in alt-mail line */
.alt-mail{ align-items: center; }
.alt-mail .copy-msg{ min-width: 120px; display: inline-block; }

/* v5 — phone row redesign */
.phone-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 1.6rem auto 0;
}
.phone-btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: 10px;
  border: 1px solid #2e7d32;
  background: #ffffff;
  color: #2e7d32;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.phone-btn:hover{ background:#f6fff6; }
.phone-ico svg{ width:20px; height:20px; position: relative; top: 0; }
.phone-text{ position: relative; top: 0; }
#copyPhoneBtn{ position: relative; top: -1px; }

/* no-shift message */
#phone-msg{ min-width: 120px; display:inline-block; }

/* v6 — bigger phone number and centered blocks */
.phone-text{ font-size: 1.25rem; }          /* larger number */
#contact .phone-row{ justify-content: center; }  /* ensure centered */
.alt-mail{ width: fit-content; margin-left: auto; margin-right: auto; } /* center email row */
.alt-mail a{ font-size: 1.05rem; }          /* slightly larger email for balance */

/* v7 — centering rows and robust À propos rendering */
#contact .phone-row{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.alt-mail{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Ensure À propos text wraps and is visible normally */
#apropos p{
  max-width: 900px;
  margin: .5rem auto 0;
  white-space: normal;
  display: block;
}

/* v9 — centering without message and transparent backgrounds (except Contact) */

/* Phone row centered independently from message */
#contact .phone-row{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Phone message on its own line, centered, not affecting row width */
#contact .copy-line{
  text-align: center;
  min-height: 1.25rem; /* reserve some height but separate line */
  margin-top: .35rem;
}

/* Email line centered as a block, with extra spacing above */
#contact .alt-mail{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 2rem; /* requested spacing */
}
/* Email message line */
#contact .alt-mail + .copy-line{
  text-align: center;
  min-height: 1.25rem;
  margin-top: .35rem;
}

/* Transparent backgrounds across sections */
#services, #avant-apres, #apropos{
  background: transparent !important;
  
  box-shadow: none !important;
}
/* Remove special bg/borders from Avant/Après */
#avant-apres{
  background: transparent !important;
  
  
}

/* Keep Contact as a white card */
#contact{
  background: #ffffff;
   /* keep the green divider */
  
  box-shadow: 0 6px 24px rgba(0,0,0,.07);
  padding-bottom: 2rem;
}

/* Copy messages visual style unchanged */
.copy-msg.visible{ opacity: 1; transform: translateY(0); }

/* v10 — phone row perfectly centered with slight spacing */
.phone-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem; /* slightly spaced */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #2e7d32;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 0;
}
.icon-btn svg{ width: 20px; height: 20px; }
.phone-text{
  font-size: 1.25rem;
  text-decoration: none;
  color: #2e7d32;
  font-weight: 700;
  line-height: 1;
  position: relative; top: 0;
}
.copy-btn .icon-copy{ width: 14px; height: 14px; }
.copy-btn{ border-color: #2e7d32; }

/* keep message separate line centered */
.copy-line{ text-align: center; min-height: 1.25rem; margin-top: .35rem; }

/* v11 — spacing adjustments */
/* More space after form before phone */
#contact form{ margin-bottom: 2.5rem; }
/* Less space between phone and email */
#contact .alt-mail{ margin-top: 1rem; }

/* v12 — bare green line icons & global hover enlargement */
.icon-btn, .copy-btn{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.icon-btn:hover, .copy-btn:hover, button:hover{
  transform: scale(1.05);
}

/* Ensure svg icons stay green */
.icon-btn svg, .copy-btn .icon-copy{
  stroke: #2e7d32 !important;
  border-color: #2e7d32 !important;
}

/* Keep consistency on the send button too */
form button{
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* v13 — global active click effect and nav link animations */
/* Global active (click) effect */
.icon-btn:active, .copy-btn:active, button:active {
  transform: scale(0.97);
}

/* Smooth transitions for all interactive elements */
.topnav a{
  transition: transform .18s ease, background .25s ease, color .25s ease;
}
.topnav a:hover{
  transform: scale(1.03);
}
.topnav a:active{
  transform: scale(0.98);
}

/* v14 — enlarge contact form phone icon by 25% */
#contact .phone-row .call-btn svg{
  width: 25px;
  height: 25px;
}

/* v15 — raise phone copy icon by 2px */
#contact .phone-row .copy-btn{
  position: relative;
  top: -2px;
}

/* v16 — raise copy icon further & make contact form transparent */
#contact .phone-row .copy-btn{
  top: -4px; /* raised total 4px */
}
#contact form{
  background: transparent !important;
  box-shadow: none !important;
}

/* v17 — full transparent Contact section, keep padding for spacing */
#contact{
  background: transparent !important;
  
  box-shadow: none !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* v21 — green separators, CTA styling, and about text layout */
/* Green divider above each main section for visual rhythm */
main > section{
  border-top: 2px solid #2e7d32;
  padding-top: 2rem;
}
/* Ensure previous overrides didn't remove borders for these */
#services, #avant-apres, #apropos, #contact{
  background: transparent !important;
  box-shadow: none !important;
}
/* About text centering and nice width */
#apropos .about-text{ max-width: 900px; margin: 0.5rem auto 1rem; text-align: center; }
#apropos p{ margin: .5rem 0; }

/* CTA button styled like form button */
.btn{
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn-primary{
  background-color: #2e7d32;
  color: #fff;
  padding: 0.85rem 1.15rem;
  font-size: 1.05rem;
  border: none;
  border-radius: 10px;
}
.btn-primary:hover{ opacity: .92; }
.btn-primary:active{ transform: scale(0.97); }

/* v22 — green separators (not on first section), uniform spacing, centered CTA */
/* Uniform spacing for all main sections */
main > section{
  padding-top: 2rem;
  margin-bottom: 2rem;
}

/* Green separators only for sections after Services */
#avant-apres, #apropos, #contact{
  
}

/* Center CTA button in À propos */
#apropos .btn-wrap{
  display: flex;
  justify-content: center;
}

/* v23 — enforce green separators and spacing (override previous rules) */
main > section{
  padding-top: 2rem !important;
  margin-bottom: 2rem !important;
}
#avant-apres, #apropos, #contact{
  border-top: 2px solid #2e7d32 !important;
}

/* Center CTA reliably */
#apropos .btn-wrap{
  display: flex !important;
  justify-content: center !important;
}

/* v24 — hard-center CTA button in À propos */
#apropos .btn-wrap{
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 1rem 0 0 !important;
}
#apropos .btn-wrap .btn{
  display: inline-block !important;
  float: none !important;
}

/* v25 — remove green divider under header */
#services{ border-top: none !important; }

/* v26 — precise horizontal centering for CTA */
#apropos .btn-wrap{
  display: flex !important;
  justify-content: center !important;  /* centers the button's center on the page center */
  align-items: center !important;
  width: 100% !important;
  text-align: initial !important;      /* neutralize previous centering via text-align */
}
#apropos .btn-wrap .btn{
  margin: 0 !important;
  display: block !important;
}

/* v27 — exact geometric centering for CTA */
#apropos .btn-wrap{
  position: relative !important;
  width: 100% !important;
  display: block !important;
  text-align: initial !important;
}
#apropos .btn-wrap .btn{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* v28 — perfect geometric centering of "Demander un devis" button */
#apropos .btn-wrap{
  position: relative !important;
  width: 100% !important;
  height: 3.5rem !important; /* enough height for absolute centering */
}
#apropos .btn-wrap .btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* v29 — keep CTA perfectly centered even on hover/active */
#apropos .btn-wrap{ position: relative !important; width: 100% !important; height: 3.5rem !important; }
#apropos .btn-wrap .btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
}
#apropos .btn-wrap .btn:hover{
  transform: translateX(-50%) scale(1.05) !important;
}
#apropos .btn-wrap .btn:active{
  transform: translateX(-50%) scale(0.97) !important;
}

/* v30 — uniform Avant/Après thumbnails */
#avant-apres .pair{ align-items: stretch; }
#avant-apres .photo{ display: flex; flex-direction: column; 
  position: relative;

}
#avant-apres .photo img{
  width: 100%;
  aspect-ratio: 3 / 4;   /* same ratio everywhere */
  object-fit: cover;      /* uniform crop */
  border-radius: 8px;
}
#avant-apres .photo figcaption{ margin-top: .5rem; }

/* v31 — diaporama lightbox */
.lightbox{
  position: fixed; inset:0; background: rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index: 1000;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-stage{
  position: relative;
  max-width: 92vw; max-height: 86vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img{
  max-width: 92vw; max-height: 86vh; border-radius: 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lightbox-close{
  position:absolute; top:14px; right:14px; font-size:1.6rem;
  border:none; background:#fff; color:#111; border-radius:999px; width:42px; height:42px; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
.lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:none;
  background:#fff; color:#111; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
.lightbox-prev{ left:10px; }
.lightbox-next{ right:10px; }
.lightbox-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.lightbox-dot{
  width:8px; height:8px; border-radius:999px; background:#bbb; opacity:.8;
}
.lightbox-dot.active{ background:#2e7d32; opacity:1; }


/* ==== FIX vCenter — CTA 'Demander un devis' ==== 
   Normalize to simple flow centering and remove previous transforms/absolute.
   Keeps alignment consistent with rest of the layout.
*/
#apropos p.btn-wrap{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 1.25rem 0 0 !important;
}
#apropos p.btn-wrap .btn{
  position: static !important;
  left: auto !important;
  transform: none !important;
  display: inline-block !important;
  float: none !important;
  margin: 0 auto !important;
}



/* === FIX vCenter2 — centrer parfaitement le bouton 'Demander un devis' === */
#apropos .btn-wrap{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 1.5rem 0 0 !important;
  text-align: initial !important; /* la centricité est assurée par flex */
}
#apropos .btn-wrap .btn{
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
  display: inline-block !important;
}



/* === FIX vCenter3 — centrage strict + pas de décalage au hover === */
#apropos .btn-wrap{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 1.5rem 0 0 !important;
  text-align: initial !important; /* centré par flex */
}
#apropos .btn-wrap .btn{
  position: static !important;
  left: auto !important;
  transform: none !important;   /* annule tout translateX */

  display: inline-block !important;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap;           /* bouton autour du texte */
}

/* Neutralise les effets qui décalent le bouton au survol */
#apropos .btn-wrap .btn:hover,
#apropos .btn-wrap .btn:active{
  transform: none !important;
}

/* Optionnel : feedback au hover sans déplacement (opacité / ombre) */
#apropos .btn-wrap .btn{
  transition: opacity .2s ease, box-shadow .2s ease !important;
}
#apropos .btn-wrap .btn:hover{
  opacity: .95 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}


/* === FIX vCenter4 — texte centré sans bouton === */
#apropos .btn-wrap{
  text-align: center !important;
  font-size: 1.05rem !important;
  color: inherit !important;
  margin-top: 1.5rem !important;
}


/* === FINAL FIX — texte simple centré dans #apropos ===
   On neutralise toute position/transform/hauteur définies auparavant.
*/
body #apropos p.btn-wrap{
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 1.5rem 0 0 !important;
  text-align: center !important;
  white-space: normal !important;
}



/* === ULTRA FIX — centrer par rapport à la page (viewport), pas au conteneur ===
   Le paragraphe devient de largeur intrinsèque (max-content) et on le translate depuis 50% de la page.
*/
body #apropos > p.btn-wrap{
  display: block !important;
  width: max-content !important;   /* largeur = texte */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* centre par rapport à la page */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  text-align: left !important;     /* pas besoin de text-align center */
  white-space: nowrap !important;  /* évite le retour à la ligne qui casse le centrage visuel */
}

/* On neutralise explicitement tout centrage flex précédent sur ce paragraphe */
body #apropos p.btn-wrap{
  justify-content: initial !important;
  align-items: initial !important;
}



/* === STYLE 'Demander un devis' comme le bouton Envoyer (même look & feel) === */
#apropos .devis-btn{
  background-color: #2e7d32;
  color: #fff;
  padding: 0.85rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease;
  font-family: inherit;
}
#apropos .devis-btn:hover{ opacity: .92; }
#apropos .devis-btn:active{ transform: scale(.99); }



/* === STYLE 'Demander un devis' (lien vers #contact) identique au bouton Envoyer === */
#apropos .devis-link{
  display: inline-block;
  text-decoration: none;
  background-color: #2e7d32;
  color: #fff;
  padding: 0.85rem 1.2rem;
  font-size: 1.1rem;
  border-radius: 10px;
  font-family: inherit;
  transition: transform .05s ease, opacity .2s ease;
}
#apropos .devis-link:hover{ opacity: .92; }
#apropos .devis-link:active{ transform: scale(.99); }



/* === Copy bubble tooltip === */
.copy-bubble{
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  color: #2e7d32;
  border: 1px solid #2e7d32;
  border-radius: 10px;
  padding: .4rem .6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.copy-bubble.show{
  opacity: 1;
  transform: translateY(0);
}
.copy-bubble .check{
  display:inline-block;
  font-weight: 700;
  line-height: 1;
}



/* === Footer center enforcement === */
footer { text-align: center !important; }
footer p { margin: 0.5rem 0 !important; }


/* === Footer 3-line layout === */
footer { text-align: center !important; }
footer p { margin: .35rem 0 !important; }
footer .footer-thanks { font-size: 1.15rem !important; }
footer .footer-sep { display: inline-block; margin: 0 .4rem; }



/* Lightbox styles */
.lightbox[aria-hidden="true"] { display: none; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  z-index: 1000;
  padding: 1rem;
}
.lightbox__figure { margin: 0; text-align: center; max-width: 90vw; max-height: 80vh; }
.lightbox__image { max-width: 90vw; max-height: 70vh; display: block; }
.lightbox__caption { color: #fff; font-weight: 600; margin-top: .5rem; font-size: 1.1rem; }
.lightbox__close {
  position: absolute; top: .5rem; right: .75rem;
  background: transparent; border: none; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  background: rgba(255,255,255,0.15);
  border: none;
  padding: .75rem 1rem;
  font-size: 2rem;
  color: #fff; cursor: pointer;
  border-radius: .5rem;
  transition: background .2s ease;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.3); }
.lightbox__prev { grid-column: 1; grid-row: 2; }
.lightbox__next { grid-column: 3; grid-row: 2; }

/* Pair highlight */
#avant-apres .pair .photo img{border-radius:10px; outline: 1px solid rgba(0,0,0,.08)}


/* === Gallery thumbnails sizing & hover (desktop vs mobile) === */
.pair .photo img {
  max-width: 90%;
  display: block;
  margin: 0.25rem auto;
  border-radius: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pair .photo:hover img {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
@media (max-width: 640px) {
  .pair .photo img {
    max-width: 100%;
  }
}


/* === Ajustements cadres blancs, badge et légendes (réalisations) === */
#avant-apres, #realisations, #galerie {
  --card-pad-desktop: 12px;
  --card-pad-mobile: 8px;
  --card-radius: 14px;
  --thumb-max: 90%;
  --gap-desktop: 16px;
  --gap-mobile: 12px;
}

/* Cadres blancs autour de chaque photo */
.pair {
  gap: var(--gap-desktop);
}
@media (max-width: 640px) {
  .pair { gap: var(--gap-mobile); }
}

.pair .photo {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 0.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;

}
@media (max-width: 640px) {
  .pair .photo { padding: 0.4rem; 
  position: relative;

}
}

/* Taille des images dans leur cadre */
.pair .photo img {
  max-width: var(--thumb-max);
  height: auto;
  margin: 6px auto 8px;
  border-radius: 10px;
}

/* Légendes sous les images : centrées + espace équilibré */
.pair .photo figcaption {
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.35;
  color: #2b2b2b;
  margin: 6px 10px 2px;
}

/* Repositionnement du badge gris (en haut à gauche, décollé des bords) */
.pair .photo .badge-aa {
  top: 20px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
}
@media (max-width: 640px) {
  .pair .photo .badge-aa {
    top: 12px !important;
    left: 12px !important;
  }
}

/* Override: hide phone number on mobile */
@media (max-width: 700px){ .topnav .tel-text{ display:none !important; } }


/* Mobile jitter fix: prevent background jumps when hitting top/bottom */
@media (max-width: 700px){
  html::before{
    background-attachment: initial !important;
    background-size: clamp(384px, 98svmin, 1080px) !important;
  }
  body{ overscroll-behavior-y: contain; }
}


/* Mobile watermark fallback: no fixed attachment to avoid bounce jitter */
@media (max-width: 700px){
  /* Hide the fixed pseudo-element watermark on mobile */
  html::before{ display: none !important; }
  /* Recreate a light watermark as body background (scrolls with content, no jitter) */
  body{
    background-image: url('logo elagueur noir.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: clamp(320px, 70svmin, 900px);
    background-attachment: initial;
  }
}


/* Mobile watermark overlay v3: fixed layer without background-attachment */
@media (max-width: 700px){
  /* Hide prior html::before to avoid duplicates */
  html::before{ display:none !important; }

  /* Recreate overlay as body::before (fixed) */
  body::before{
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100svw; height: 100svh;
    background: url('logo elagueur noir.png') center / clamp(320px, 70svmin, 900px) no-repeat;
    opacity: 0.12;
    filter: grayscale(1);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    contain: paint;
    transform: translateZ(0);
  }

  /* Ensure main content renders above overlay */
  #hero, main, footer, .page, .container, .content, .wrapper{ position: relative; z-index: 1; }

  /* Prevent rubber-band from pulling overlay under chrome */
  body{ overscroll-behavior-y: contain; }
}


/* Mobile header redesign */
@media (max-width: 700px){
  header.hero{ padding: .6rem 0; }
  .hero-inner{
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "logo title"
      "nav  nav";
    align-items: center;
    column-gap: .75rem;
    row-gap: .4rem;
    padding: 0 .9rem;
  }
  .hero-inner .logo{
    grid-area: logo;
    width: 56px; height: auto;
    display:block;
  }
  .hero-text{
    grid-area: title;
    margin: 0;
  }
  .hero-text h1{
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .2px;
  }
  .hero-text p{
    font-size: .95rem;
    line-height: 1.25;
    margin: .2rem 0 0;
    max-width: 28ch;
  }
  .topnav{
    grid-area: nav;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin: .2rem 0 0;
  }
  .topnav a{
    flex: 1 1 auto;
    text-align: center;
    padding: .5rem .6rem;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
  }
  .topnav .tel-link{
    flex: 0 0 auto;
    padding: .45rem .6rem;
  }
  /* Icône téléphone un peu plus grande, texte masqué */
  .topnav .tel-link svg{ width:24px; height:24px; }
  .topnav .tel-text{ display:none !important; }
}


/* Mobile header fine-tuning: logo up, title shift, one-line subtitle under header */
@media (max-width: 700px){
  /* Extend the grid to add a 'subtitle' row spanning both columns */
  .hero-inner{
    grid-template-areas:
      "logo title"
      "subtitle subtitle"
      "nav  nav";
  }

  /* Lift the logo slightly for better visual balance */
  .hero-inner .logo{
    transform: translateY(-4px);
  }

  /* Place the title explicitly in the title area and align it left */
  .hero-text h1{
    grid-area: title;
    text-align: left;
    margin-left: .15rem;
  }

  /* Make the subtitle a single line under logo+title, ellipsized if too long */
  .hero-text p{
    grid-area: subtitle;
    margin: .25rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    opacity: .9;
  }
}


/* Mobile header balance: logo ~= (title + subtitle) height */
@media (max-width: 700px){
  /* Grid layout with subtitle row */
  .hero-inner{
    display: grid;
    grid-template-columns: 78px 1fr;           /* logo wider (+40%) */
    grid-template-areas:
      "logo title"
      "subtitle subtitle"
      "nav  nav";
    align-items: center;
    column-gap: .75rem;
    row-gap: .35rem;
    padding: 0 .9rem;
  }
  /* Logo sized to visually match text block */
  .hero-inner .logo{
    grid-area: logo;
    width: 78px;
    height: auto;
    display:block;
    transform: translateY(-2px);               /* small optical tweak */
  }
  /* Title + subtitle stacked and vertically centered */
  .hero-text{
    grid-area: title;                           /* container for heading */
    display: flex;
    flex-direction: column;
    justify-content: center;                    /* center title+subtitle vs logo */
    margin: 0;
    padding-left: .2rem;
  }
  .hero-text h1{
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .2px;
  }
  .hero-text p{
    grid-area: subtitle;
    white-space: normal;                        /* allow up to 2 lines */
    line-height: 1.25;
    margin: .25rem 0 0;
    max-width: 100%;
    font-size: .95rem;
    opacity: .9;
    display: -webkit-box;
    -webkit-line-clamp: 2;                      /* cap to two lines where supported */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }
  /* Navigation row: single line, items side by side */
  .topnav{
    grid-area: nav;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .2rem;
  }
  .topnav a{
    flex: 1 1 auto;
    text-align: center;
    padding: .5rem .6rem;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
  }
  .topnav .tel-link{ flex: 0 0 auto; padding: .45rem .6rem; }
  .topnav .tel-link svg{ width:24px; height:24px; }
  .topnav .tel-text{ display:none !important; }
}


/* === Desktop watermark: centered & visible (full-viewport box) === */
body::before, body:before {
  content: "";
  position: fixed;
  inset: 0; /* full viewport to ensure visibility */
  background: url('logo elagueur noir.png') no-repeat center center;
  background-size: clamp(700px, 58vw, 1450px);
  opacity: 0.07;
  filter: grayscale(100%) brightness(0.9) contrast(1.1);
  z-index: -1;
  pointer-events: none;
}
/* === End desktop watermark === */



/* === Mobile watermark: centered vertically === */
@media (max-width: 700px){
  body{
    background-image: none !important;
  }
  body::before, body:before{
    content: "";
    position: fixed;
    inset: 0; /* full viewport */
    background: url('logo elagueur noir.png') no-repeat center center; /* centered */
    background-size: 85%; /* smaller than full width */
    opacity: 0.07;
    filter: grayscale(100%) brightness(0.9);
    z-index: -1;
    pointer-events: none;
  }
}
/* === End mobile watermark === */



/* === Mobile-only line break for header subtitle === */
.mobile-break::after {
  content: " ";
}
@media (max-width: 700px) {
  .mobile-break::after {
    content: "\A";
    white-space: pre;
  }
}
/* === End mobile-only line break === */