/* ==========================================================================
   CED'ÉLAGAGE : V1 clair premium
   Structure sectorielle reprise de Cyril Entretien Extérieur.
   Système de design et animations repris de MSR Second Œuvre V5
   (crème, titres serif, révélation par masque, fiches épinglées, parallaxe).
   ========================================================================== */

:root {
  --fond: #f7f4ee;
  --fond-2: #efebe2;
  --encre: #22281f;
  --encre-2: #5f685a;
  --vert: #8cbf26;
  --vert-fonce: #5f8418;
  --feuille: #d9dcd6;
  --blanc: #fdfcf9;
  --sombre: #1d231b;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --rayon: 14px;
  --transition: cubic-bezier(0.25, 1, 0.5, 1);
  --gouttiere: clamp(1.5rem, 3vw, 2.75rem);
  --marge: clamp(1.25rem, 5vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--fond);
  color: var(--encre);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--vert); color: var(--sombre); }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cadre { max-width: 1180px; margin: 0 auto; padding: 0 var(--marge); }
.cadre--etroit { max-width: 820px; }

/* ---------- Titres ---------- */
.h-serif {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.05rem, 4.6vw, 3.45rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--encre);
}
.h-serif em { font-style: italic; color: var(--vert-fonce); }
.h-serif--petit { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.masque { overflow: hidden; }

.surtitre {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 1.1rem;
}
.texte p { max-width: 62ch; color: var(--encre-2); margin-bottom: 1em; }
.texte p:last-child { margin-bottom: 0; }
.texte strong { font-weight: 500; color: var(--encre); }
.texte a:not(.btn) {
  color: var(--vert-fonce);
  box-shadow: inset 0 -1px 0 rgba(95, 132, 24, 0.35);
  transition: box-shadow 0.3s var(--transition);
}
.texte a:not(.btn):hover { box-shadow: inset 0 -2px 0 var(--vert-fonce); }

/* ---------- Trait de fin de section ---------- */
.trait {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 40, 31, 0.16) 18%, rgba(34, 40, 31, 0.16) 82%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: transform 0.4s var(--transition), background 0.4s var(--transition), color 0.4s var(--transition);
}
.btn__texte { position: relative; display: block; overflow: hidden; }
.btn__texte span { display: block; transition: transform 0.45s var(--transition); }
.btn__texte span + span { position: absolute; top: 0; left: 0; transform: translateY(105%); }
.btn:hover .btn__texte span { transform: translateY(-105%); }
.btn:hover .btn__texte span + span { transform: translateY(0); }
.btn--plein { background: var(--vert); color: var(--sombre); box-shadow: 0 0 0 0 rgba(140, 191, 38, 0.45); }
.btn--plein:hover { box-shadow: 0 10px 28px -12px rgba(95, 132, 24, 0.8); }
.btn--plein:hover { background: var(--vert-fonce); color: var(--blanc); }
.btn--ligne { border: 1px solid rgba(34, 40, 31, 0.22); color: var(--encre); }
.btn--ligne:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.btn--clair { border: 1px solid rgba(253, 252, 249, 0.3); color: var(--blanc); }
.btn--clair:hover { background: var(--blanc); color: var(--sombre); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- Rideau de transition entre les pages ---------- */
#rideau {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--sombre); pointer-events: none;
}
#rideau img { width: clamp(90px, 13vw, 150px); height: auto; opacity: 0.9; }
.sans-anim #rideau { display: none; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 1.1rem 0;
  transition: background 0.45s var(--transition), box-shadow 0.45s var(--transition), padding 0.45s var(--transition);
}
.entete__cadre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.entete.colle {
  background: rgba(247, 244, 238, 0.93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(34, 40, 31, 0.08);
  padding: 0.7rem 0;
}
.logo { display: flex; align-items: center; gap: 0.8rem; }
.logo img { width: 56px; height: auto; border-radius: 10px; transition: width 0.45s var(--transition), transform 0.5s var(--transition); }
.logo:hover img { transform: rotate(-3deg) scale(1.04); }
.entete.colle .logo img { width: 46px; }
.logo__nom { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nom b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.01em; }
.logo__nom i { font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); }


.nav { display: flex; align-items: center; gap: 2rem; }
.nav__liens { display: flex; align-items: center; gap: 1.7rem; }
.nav__liens > li { position: relative; }
.nav__liens a { font-size: 0.93rem; font-weight: 400; padding: 0.4rem 0; display: inline-block; position: relative; }
.nav__liens a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--transition);
}
.nav__liens a:hover::after, .nav__liens a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }


/* Sous-menu : zone de survol continue, pas de fermeture quand la souris descend */
.sous { position: relative; }
.sous__bouton { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.93rem; padding: 0.4rem 0; }
.sous__bouton svg { width: 10px; height: 10px; transition: transform 0.35s var(--transition); }
.sous[data-ouvert="1"] .sous__bouton svg { transform: rotate(180deg); }
.sous__panneau {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  padding-top: 14px; /* pont de survol continu */
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--transition), transform 0.35s var(--transition), visibility 0.3s;
}
.sous[data-ouvert="1"] .sous__panneau { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sous__liste {
  min-width: 268px; padding: 0.6rem;
  background: var(--blanc); border-radius: var(--rayon);
  box-shadow: 0 18px 50px -18px rgba(34, 40, 31, 0.3), 0 0 0 1px rgba(34, 40, 31, 0.06);
}
.sous__liste a {
  display: block; padding: 0.6rem 0.85rem; border-radius: 9px;
  font-size: 0.91rem; color: var(--encre);
  transition: background 0.3s var(--transition), color 0.3s var(--transition);
}
.sous__liste a::after { display: none; }
.sous__liste a:hover { background: var(--fond-2); color: var(--vert-fonce); }


.entete__tel {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.95rem; font-weight: 500;
}
.entete__tel svg { width: 16px; height: 16px; transition: transform 0.4s var(--transition); }
.entete__tel:hover svg { transform: rotate(-12deg) scale(1.1); }

.burger { display: none; width: 34px; height: 24px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--transition), opacity 0.3s; }
.burger span:nth-child(1) { top: 3px; }
.burger span:nth-child(2) { top: 11px; }
.burger span:nth-child(3) { top: 19px; }
.menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
.menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--fond); padding: 7rem var(--marge) 3rem;
  display: flex; flex-direction: column; gap: 2rem;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.4s var(--transition), transform 0.5s var(--transition), visibility 0.4s;
  overflow-y: auto;
}
.menu-ouvert .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu__liens a { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.7rem; padding: 0.45rem 0; }
.menu__liens span { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-2); margin: 1.6rem 0 0.4rem; font-family: var(--sans); }

/* ---------- Hero clair, deux colonnes : la photo n'est jamais amputée ---------- */
.hero { position: relative; padding: clamp(8rem, 13vw, 10.5rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -14%; top: -22%;
  width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(140, 191, 38, 0.13) 0%, rgba(140, 191, 38, 0) 68%);
  pointer-events: none; z-index: 0;
}
.hero__grille {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center;
}
.hero__sur { opacity: 0; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 1.1rem; display: block; }
.hero__h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08;
  letter-spacing: -0.025em; color: var(--encre);
}
.hero__h1 em { font-style: italic; color: var(--vert-fonce); }
.hero__p { opacity: 0; max-width: 52ch; margin-top: 1.4rem; color: var(--encre-2); }
.hero__cta { opacity: 0; display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero__pied {
  opacity: 0; display: grid; gap: 0.7rem;
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(34, 40, 31, 0.14);
}
.hero__pied li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.89rem; color: var(--encre-2); }
.hero__pied svg { width: 15px; height: 15px; color: var(--vert-fonce); flex: none; }
.hero__note { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__note b { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--encre); }

.hero__media {
  position: relative; overflow: hidden; border-radius: var(--rayon);
  aspect-ratio: 4 / 5; box-shadow: 0 30px 70px -40px rgba(34, 40, 31, 0.5);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; will-change: transform; }
.hero__legende {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.6rem 1.5rem 1.3rem;
  background: linear-gradient(180deg, rgba(29, 35, 27, 0) 0%, rgba(29, 35, 27, 0.72) 100%);
  color: var(--blanc); font-size: 0.85rem; letter-spacing: 0.01em;
}

/* ---------- Bloc alterné image / texte ---------- */
.duo { padding: clamp(4rem, 8vw, 7rem) 0; }
.duo__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center;
}
.duo--inverse .duo__media { order: 2; }
.duo__media { position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 5; }
.duo__media--paysage { aspect-ratio: 4 / 3; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; will-change: transform; transition: transform 1s var(--transition); }
.duo__media:hover img { transform: scale(1.03); }
.duo__corps { max-width: 56ch; }
.duo__liste { margin-top: 1.8rem; display: grid; gap: 0.75rem; }
.duo__liste li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--encre-2); font-size: 0.97rem; }
.duo__liste svg { width: 16px; height: 16px; color: var(--vert-fonce); flex: none; margin-top: 0.42em; }
.duo__liens { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- Prestations : cartes-photo ----------
   Reprises à l'identique de l'écurie Amélie Druguet : photo pleine en 3/4,
   coins arrondis 14 px, nom et sous-titre posés sur la photo en bas à gauche,
   pastille blanche à flèche diagonale en haut à droite, seconde photo en
   fondu au survol. Le 3/4 règle aussi le sens des images : toutes les photos
   de chantier sont en portrait, elles ne sont plus rognées. */
.prestations { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; background: var(--fond-2); overflow: hidden; }
.prestations__entete { max-width: 60ch; margin-bottom: clamp(2.6rem, 5vw, 4rem); position: relative; z-index: 1; }
.cartes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }

.carte { display: block; transition: transform 0.5s var(--transition); }
.carte:hover { transform: translateY(-6px); }

.carte__media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 14px; background: var(--sombre);
}
.carte__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.carte__media .parallaxe { height: 112%; top: -6%; will-change: transform; }
.carte__survol {
  opacity: 0; transform: scale(1.08);
  transition: opacity 0.7s var(--transition), transform 1.2s var(--transition);
}
.carte:hover .carte__survol, .carte:focus-within .carte__survol { opacity: 1; transform: scale(1); }

.carte__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(29, 35, 27, 0.94) 0%,
    rgba(29, 35, 27, 0.78) 14%,
    rgba(29, 35, 27, 0.32) 38%,
    rgba(29, 35, 27, 0) 62%);
  transition: opacity 0.6s var(--transition);
}
.carte:hover .carte__media::after { opacity: 0.88; }

.carte__jeton {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 3;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); color: var(--sombre);
  transition: transform 0.5s var(--transition), background 0.4s var(--transition), color 0.4s var(--transition);
}
.carte:hover .carte__jeton { transform: translate(2px, -2px) scale(1.08); background: var(--vert); }

.carte__legende {
  position: absolute; z-index: 3; left: 1.1rem; right: 1.1rem; bottom: 1rem;
  display: grid; align-content: end; min-height: 3.75rem; color: var(--blanc);
}
.carte__legende h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.12rem, 0.9rem + 0.5vw, 1.38rem);
  line-height: 1.15; margin: 0 0 0.3rem; color: var(--blanc);
  text-shadow: 0 1px 10px rgba(29, 35, 27, 0.45);
}
.carte__legende p {
  margin: 0; font-size: 0.84rem; line-height: 1.35; font-weight: 400;
  color: rgba(253, 252, 249, 0.92); text-shadow: 0 1px 8px rgba(29, 35, 27, 0.5);
}

/* ---------- Décor : silhouettes d'arbre en semi-transparence ---------- */
.deco-arbre {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(240px, 34vw, 480px); height: auto; opacity: 0.055;
}
.deco-arbre--droite { right: -5%; bottom: -8%; }
.deco-arbre--gauche { left: -7%; top: -6%; transform: scaleX(-1); }
.deco-arbre--claire { opacity: 0.07; filter: brightness(0) invert(1); }


/* ---------- Hero des pages intérieures ---------- */
.hero--page { padding: clamp(7.5rem, 11vw, 9.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero--page .hero__h1 { font-size: clamp(1.95rem, 3.9vw, 3.1rem); }
.hero--page .hero__media { aspect-ratio: 4 / 5; }
.hero--page .hero__sur, .hero--page .hero__p,
.hero--page .hero__cta { opacity: 0; }

/* ---------- Blocs de contenu des pages intérieures ---------- */
.blocs { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.blocs .cadre { position: relative; z-index: 1; display: grid; gap: clamp(2.6rem, 5vw, 4.2rem); }
.bloc { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.bloc .h-serif { position: sticky; top: 7rem; }
.bloc .texte p { max-width: 64ch; }

@media (max-width: 1000px) {
  .bloc { grid-template-columns: minmax(0, 1fr); }
  .bloc .h-serif { position: static; }
}

/* ---------- Bande sombre : zone d'intervention ---------- */
.zone { position: relative; padding: clamp(4.5rem, 8vw, 7rem) 0; background: var(--sombre); color: var(--blanc); overflow: hidden; }
.zone__motif { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; }
.zone .h-serif { color: var(--blanc); }
.zone .h-serif em { color: var(--vert); }
.zone .texte p { color: rgba(253, 252, 249, 0.76); }
.zone .texte strong { color: var(--blanc); }
.zone__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.zone__villes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 1.5rem; }
.zone__villes a, .zone__villes span {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0; font-size: 0.95rem;
  border-bottom: 1px solid rgba(253, 252, 249, 0.12);
  color: rgba(253, 252, 249, 0.82);
  transition: color 0.3s var(--transition), padding-left 0.4s var(--transition);
}
.zone__villes a:hover { color: var(--vert); padding-left: 0.4rem; }
.zone__villes i { width: 4px; height: 4px; border-radius: 50%; background: var(--vert); flex: none; }

/* ---------- Avis ---------- */
.avis { padding: clamp(4rem, 8vw, 7rem) 0; }
.avis__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.avis__note { display: flex; align-items: center; gap: 0.8rem; }
.avis__note b { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; line-height: 1; }
.avis__etoiles { display: flex; gap: 0.15rem; color: var(--vert); }
.avis__etoiles svg { width: 16px; height: 16px; }
.avis__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
.avis__carte { position: relative; padding-top: 1.6rem; border-top: 1px solid rgba(34, 40, 31, 0.16); transition: transform 0.45s var(--transition); }
.avis__carte::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  background: var(--vert-fonce); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s var(--transition);
}
.avis__carte:hover { transform: translateY(-3px); }
.avis__carte:hover::before { transform: scaleX(1); }
.avis__carte blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--encre); margin-bottom: 1.2rem; }
.avis__auteur { font-size: 0.87rem; color: var(--encre-2); }

/* ---------- FAQ ---------- */
.faq { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7rem) 0; background: var(--fond-2); }
.faq__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; }
.faq__item { border-bottom: 1px solid rgba(34, 40, 31, 0.14); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; text-align: left;
  font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.35; color: var(--encre);
  transition: color 0.3s var(--transition);
}
.faq__q:hover { color: var(--vert-fonce); }
.faq__q i { flex: none; width: 15px; height: 15px; position: relative; margin-top: 0.42em; }
.faq__q i::before, .faq__q i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.4px;
  background: var(--vert-fonce); transition: transform 0.45s var(--transition);
}
.faq__q i::after { transform: rotate(90deg); }
.faq__item[data-ouvert="1"] .faq__q i::after { transform: rotate(0deg); }
.faq__r { overflow: hidden; height: 0; }
.faq__r > div { padding-bottom: 1.5rem; }
.faq__r p { font-size: 0.97rem; color: var(--encre-2); max-width: 64ch; }
.faq__r p + p { margin-top: 0.8em; }

/* ---------- Appel final ---------- */
.final { position: relative; padding: clamp(5rem, 9vw, 8rem) 0; overflow: hidden; color: var(--blanc); }
.final__fond { position: absolute; inset: -12% 0; z-index: 0; }
.final__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.final__voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 35, 27, 0.78), rgba(29, 35, 27, 0.6)); }
.final__cadre { position: relative; z-index: 2; }
.final .h-serif { color: var(--blanc); max-width: 20ch; }
.final .h-serif em { color: var(--vert); }
.final p { color: rgba(253, 252, 249, 0.84); max-width: 56ch; margin-top: 1.2rem; }
.final__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; }

/* ---------- Pied ---------- */
.pied { background: var(--sombre); color: rgba(253, 252, 249, 0.72); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size: 0.92rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.5rem var(--gouttiere); }
.pied__logo { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.pied__logo img { width: 56px; border-radius: 10px; }
.pied__logo b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--blanc); display: block; line-height: 1.15; }
.pied__logo i { font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(253, 252, 249, 0.6); }
.pied h2 { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(253, 252, 249, 0.5); margin-bottom: 1.1rem; font-weight: 500; }
.pied li { margin-bottom: 0.55rem; }
.pied a { transition: color 0.3s var(--transition); }
.pied a:hover { color: var(--vert); }
.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(253, 252, 249, 0.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.85rem; color: rgba(253, 252, 249, 0.55);
}

/* ---------- Bouton WhatsApp et retour haut ---------- */
.flotte { position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 1.8rem); z-index: 800; display: flex; flex-direction: column; gap: 0.7rem; }
.flotte a, .flotte button {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); color: var(--encre);
  box-shadow: 0 12px 30px -10px rgba(34, 40, 31, 0.4);
  transition: transform 0.4s var(--transition), background 0.4s var(--transition), color 0.4s var(--transition), opacity 0.4s;
}
.flotte a:hover, .flotte button:hover { transform: translateY(-3px); background: var(--vert); color: var(--sombre); }
.flotte svg { width: 21px; height: 21px; }
.flotte__haut { opacity: 0; pointer-events: none; }
.flotte__haut.vu { opacity: 1; pointer-events: auto; }

/* ---------- États d'animation ---------- */
[data-masque] { opacity: 0; transform: translateY(26px); filter: blur(7px); }
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-fondu] { opacity: 0; }
.sans-anim [data-masque], .sans-anim [data-reveal], .sans-anim [data-fondu],
.sans-anim .hero__sur, .sans-anim .hero__p, .sans-anim .hero__cta, .sans-anim .hero__pied {
  opacity: 1 !important; transform: none !important; filter: none !important;
}
.sans-anim .trait { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-masque], [data-reveal], [data-fondu] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .transition { display: none; }
}

/* ---------- Adaptatif ---------- */
@media (max-width: 1000px) {
  .nav__liens, .entete__tel { display: none; }
  .burger { display: block; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deco-arbre { width: clamp(200px, 42vw, 300px); }
  .duo__grille, .zone__grille, .faq__grille, .hero__grille { grid-template-columns: minmax(0, 1fr); }
  .hero__media { aspect-ratio: 16 / 11; }
  .duo--inverse .duo__media { order: 0; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 6.5rem 0 2.5rem; }
  .cartes, .avis__grille { grid-template-columns: minmax(0, 1fr); }
  .carte__media { aspect-ratio: 4 / 5; }
  .deco-arbre { display: none; }
  .zone__villes { grid-template-columns: minmax(0, 1fr); }
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .hero__cta .btn, .final__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Galerie des réalisations
   Au clic, l'image zoome au centre de l'écran. Pas de fenêtre modale avec
   une barre de navigation : c'est la convention maison.
   ========================================================================== */
.galerie-section { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6.5rem); }
.galerie-section .cadre { position: relative; z-index: 1; }
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.galerie__item {
  display: block; width: 100%; position: relative;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px;
  background: var(--sombre); cursor: zoom-in;
  transition: transform 0.5s var(--transition);
}
.galerie__item:hover { transform: translateY(-6px); }
.galerie__item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  transition: transform 0.9s var(--transition);
}
.galerie__item:hover img { transform: scale(1.05); }
.galerie__voile {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: end; gap: 0.25rem;
  padding: 3rem 1.1rem 1rem; color: var(--blanc);
  background: linear-gradient(to top, rgba(29,35,27,0.9) 0%, rgba(29,35,27,0.3) 40%, rgba(29,35,27,0) 68%);
}
.galerie__voile i {
  font-style: normal; font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--vert);
}
.galerie__voile b { font-family: var(--serif); font-weight: 400; font-size: 1.02rem; line-height: 1.2; }
.galerie__note { margin-top: clamp(2rem, 4vw, 3rem); max-width: 62ch; color: var(--encre-2); font-size: 0.95rem; }

.zoom {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(29, 35, 27, 0.93);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0;
}
.zoom[hidden] { display: none; }
.zoom figure { display: grid; justify-items: center; gap: 1rem; }
.zoom img {
  max-width: calc(100vw - 2 * clamp(1rem, 4vw, 3rem));
  max-height: calc(100svh - 7rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px;
}
.zoom figcaption { color: rgba(253, 252, 249, 0.82); font-size: 0.9rem; text-align: center; }
.zoom__fermer {
  position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  background: rgba(253, 252, 249, 0.12); color: var(--blanc);
  transition: background 0.3s var(--transition), transform 0.3s var(--transition);
}
.zoom__fermer:hover { background: var(--vert); color: var(--sombre); transform: rotate(90deg); }

/* ==========================================================================
   Contact : coordonnées et formulaire
   ========================================================================== */
.contact__liste { display: grid; gap: 0.2rem; margin-top: 2rem; }
.contact__liste li > * {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.95rem 0; border-bottom: 1px solid rgba(34, 40, 31, 0.13);
  transition: padding-left 0.4s var(--transition), color 0.3s var(--transition);
}
.contact__liste a:hover { padding-left: 0.4rem; color: var(--vert-fonce); }
.contact__liste svg { width: 19px; height: 19px; flex: none; color: var(--vert-fonce); }
.contact__liste b { display: block; font-weight: 500; font-size: 1rem; }
.contact__liste i { font-style: normal; font-size: 0.84rem; color: var(--encre-2); }

.formulaire {
  background: var(--blanc); border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 30px 70px -45px rgba(34, 40, 31, 0.5), 0 0 0 1px rgba(34, 40, 31, 0.06);
}
.formulaire .h-serif { margin-bottom: 1.4rem; }
.formulaire form { display: grid; gap: 0.95rem; }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label { font-size: 0.82rem; font-weight: 500; color: var(--encre-2); }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--encre);
  padding: 0.72rem 0.9rem; border-radius: 9px;
  border: 1px solid rgba(34, 40, 31, 0.18); background: var(--fond);
  transition: border-color 0.3s var(--transition), box-shadow 0.3s var(--transition), background 0.3s;
}
.champ textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; background: var(--blanc);
  border-color: var(--vert-fonce); box-shadow: 0 0 0 3px rgba(140, 191, 38, 0.18);
}
.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; margin-top: 0.3rem; }
.champ--case input { width: 17px; height: 17px; margin-top: 0.22em; accent-color: var(--vert-fonce); }
.champ--case label { font-size: 0.8rem; line-height: 1.5; font-weight: 400; }
.formulaire button { justify-content: center; margin-top: 0.4rem; }
.pot-de-miel {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

@media (max-width: 1000px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .galerie { grid-template-columns: minmax(0, 1fr); }
  .champs-2 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Mécanismes repris de DLD Services
   ========================================================================== */

/* Le volet qui monte sur une image : l'état de départ est posé en CSS pour
   qu'il n'y ait pas de clignotement avant que GSAP prenne la main. */
[data-volet] { clip-path: inset(100% 0% 0% 0%); }
.sans-anim [data-volet], .sans-anim .hero__media { clip-path: none !important; }
.hero__media { clip-path: inset(100% 0% 0% 0%); }
.hero__media img { will-change: transform; }

/* Phrase qui se colore mot à mot */
[data-colore] {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.38;
  letter-spacing: -0.015em; color: var(--encre); max-width: 24ch;
}
[data-colore] .mc { transition: none; }
.zone [data-colore] { color: var(--blanc); }

/* Bandeau en boucle : la vitesse et l'inclinaison suivent le défilement */
.bandeau {
  overflow: hidden; padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  background: var(--sombre); border-block: 1px solid rgba(253, 252, 249, 0.1);
}
.bandeau__piste { display: flex; width: max-content; will-change: transform; }
.bandeau__suite {
  flex: none; display: flex; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem); padding-right: clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.15;
  color: var(--vert); white-space: nowrap;
}
.bandeau__suite i {
  font-style: normal; font-size: 0.42em; color: rgba(253, 252, 249, 0.55);
  transform: translateY(-0.15em);
}

/* Pied de page : les colonnes montent depuis le bas */
.pied__grille > div { overflow: hidden; }
[data-fl] { display: block; }

/* Survols pilotés par GSAP */
[data-roule] { display: block; }
[data-fleche] { display: block; }

/* ---------- Fil d'Ariane ---------- */
.ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--encre-2); margin-bottom: 1.1rem;
}
.ariane > * + *::before {
  content: "›"; margin-right: 0.5rem; color: rgba(34, 40, 31, 0.35);
}
.ariane a { transition: color 0.3s var(--transition); }
.ariane a:hover { color: var(--vert-fonce); }
.ariane span { color: var(--encre); }

/* ---------- Sections de contenu : filet, titre collant ---------- */
.bloc__titre { position: sticky; top: 7rem; }
.bloc__filet {
  display: block; height: 1px; width: 100%; margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--vert) 0%, rgba(34, 40, 31, 0.14) 38%, rgba(34, 40, 31, 0.14) 100%);
}
.bloc .h-serif { position: static; }
.blocs .cadre { gap: clamp(3rem, 6vw, 5rem); }

/* ---------- Phrase manifeste face à une image ---------- */
.manifeste { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--fond-2); }
.manifeste__grille {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.manifeste__media {
  overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3;
}
.manifeste__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

@media (max-width: 1000px) {
  .bloc__titre { position: static; }
  .manifeste__grille { grid-template-columns: minmax(0, 1fr); }
  [data-colore] { max-width: none; }
}