/* =========================================================
   Pouzolles · composants partagés par les 7 pages
   En-tête, menu mobile, prestations, pied de page,
   barre d'appel mobile.
   ========================================================= */

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--chaux);
  border-bottom: var(--filet-l);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: var(--entete-h-reduit);
}
@media (min-width: 1024px) {
  .entete__barre { height: var(--entete-h); }
  .entete.est-reduit .entete__barre { height: var(--entete-h-reduit); }
}

/* Logotype : logo SP du client + nom espacé + métier */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--texte);
  text-decoration: none;
  min-height: 44px;
}
.marque__texte { display: grid; gap: .2rem; }
.marque__logo { width: 40px; height: auto; flex: none; }
@media (min-width: 1024px) { .marque__logo { width: 46px; } }
.pied .marque__logo { width: 56px; }
.cinquante__borne { width: 22px; height: auto; flex: none; overflow: visible; }
.cinquante__borne .b-corps { fill: none; stroke: currentColor; stroke-width: 1.4; }
.cinquante__borne .b-tete { fill: none; stroke: var(--gazon); stroke-width: 3; stroke-linecap: round; }
.cinquante__borne text { fill: currentColor; font: 500 10px var(--f-data); text-anchor: middle; }
.pied .b-tete, .menu-mobile .b-tete { stroke: #9CC069; }
.marque__nom { font-size: 1.25rem; font-weight: 500; line-height: 1; letter-spacing: .22em; text-transform: uppercase; }
.marque__sous { font-size: .75rem; line-height: 1; letter-spacing: .08em; color: var(--texte-doux); }

.nav { display: none; }
.nav__liste { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte);
  font-size: .9375rem;
  text-decoration: none;
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__lien:hover::after { transform: scaleX(1); }
}

.entete__appel { display: none; min-height: 44px; padding-inline: 1.1em; }

.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-size: .9375rem;
  letter-spacing: .04em;
}
.bouton-menu__traits { display: grid; gap: 6px; width: 22px; }
.bouton-menu__traits span { display: block; height: 1px; background: currentColor; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .entete__appel { display: inline-flex; }
  .bouton-menu { display: none; }
}

/* Menu plein écran (mobile) */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--haie);
  color: var(--chaux);
  padding: env(safe-area-inset-top, 0px) max(var(--gouttiere), env(safe-area-inset-right, 0px)) calc(var(--e-4) + env(safe-area-inset-bottom, 0px)) max(var(--gouttiere), env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;       /* le défilement du menu ne fait pas bouger la page derrière */
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style {
  .menu-mobile { opacity: 0; transform: translateY(-8px); }
}
.menu-mobile[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-mobile { transition: opacity 150ms ease; transform: none; }
  @starting-style { .menu-mobile { transform: none; } }
}
.menu-mobile__liste a:active { color: var(--chaux-doux); }
.menu-mobile__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--entete-h-reduit);
  border-bottom: 1px solid var(--filet-sombre);
}
.menu-mobile .marque, .menu-mobile .bouton-menu { color: var(--chaux); }
.menu-mobile .marque__sous { color: var(--chaux-doux); }
.menu-mobile__liste { list-style: none; margin: var(--e-4) 0 auto; padding: 0; }
.menu-mobile__liste a {
  display: block;
  padding-block: .8rem;
  color: var(--chaux);
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--filet-sombre);
}
.menu-mobile__bas { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.menu-mobile__bas .note { color: var(--chaux-doux); }

/* ---------- Mention crédit d'impôt ---------- */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--gazon);
  font-size: .875rem;
  font-weight: 500;
}
.etiquette::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; }

/* ---------- Prestations : grandes bandes photo ---------- */
.bandes { margin: 0; display: grid; gap: 3px; }
.bande__lien {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(19rem, 10rem + 18vw, 28rem);
  color: var(--chaux);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.bande__photo { position: absolute; inset: 0; z-index: -2; background: #2B3D30; }
.bande__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
/* Voile uni (pas de dégradé) : le texte reste lisible sur toutes les photos */
.bande__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 34, 25, .44);
  transition: background-color 400ms ease;
}
.bande__contenu { display: grid; gap: .6rem; padding-block: var(--e-6) var(--e-4); }
.bande__titre { font-family: var(--f-titre); font-size: clamp(2.75rem, 1rem + 5.4vw, 6.5rem); font-weight: 300; letter-spacing: -.025em; line-height: .95; }
@media (min-width: 900px) {
  /* Bandes en alternance gauche / droite, comme des pages de magazine */
  .bande:nth-child(even) .bande__contenu { justify-items: end; text-align: right; }
  .bande:nth-child(even) .bande__reperes { justify-content: flex-end; }
}
.bande__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  font-family: var(--f-data);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9D6C2;
}
.bande__texte { max-width: 46ch; font-size: var(--t-l); line-height: 1.4; color: var(--chaux-doux); }
.bande__plus { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--e-1); font-weight: 500; }
.bande__plus::after { content: "→"; transition: transform 200ms var(--ease-out); }
.bande__lien:focus-visible { outline: 2px solid var(--chaux); outline-offset: -8px; }
@media (hover: hover) and (pointer: fine) {
  .bande__lien:hover::after { background: rgba(20, 34, 25, .32); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bande__lien:hover .bande__photo img { transform: scale(1.03); }
  .bande__lien:hover .bande__plus::after { transform: translateX(4px); }
}
.autre-besoin { margin-top: var(--e-4); color: var(--texte-doux); }

/* Mention crédit d'impôt sur photo */
.etiquette--clair { color: var(--chaux); }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--haie-nuit);
  color: var(--chaux);
  padding-block: var(--e-8) 0;
}
.pied__grille { display: grid; gap: var(--e-4); }
@media (min-width: 768px) {
  .pied__grille { grid-template-columns: 1.4fr 1fr auto; align-items: start; }
}
.pied .marque { color: var(--chaux); }
.pied .marque__sous { color: var(--chaux-doux); }
.pied__adresse { font-style: normal; display: grid; gap: 0; color: var(--chaux-doux); }
.pied__adresse a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.pied__liens { margin: 0; display: grid; gap: 0; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .pied__adresse a:hover, .pied__liens a:hover { text-decoration: underline; }
}
.pied__signature {
  margin: var(--e-6) 0 0;
  height: .74em;                    /* coupe le mot sur sa ligne de base : il « sort » du bas de l'écran */
  max-width: none;
  overflow: hidden;
  font-family: var(--f-titre);
  font-weight: 300;
  font-size: clamp(5rem, 1rem + 21vw, 22rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-align: center;
  color: rgba(250, 250, 247, .1);
  user-select: none;
}
.pied__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.pied__legal {
  margin-top: var(--e-6);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet-sombre);
  max-width: none;
  font-size: var(--t-xs);
  color: var(--chaux-doux);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Barre d'appel mobile ---------- */
.barre-appel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-barre);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--haie);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 220ms var(--ease-out);
}
.barre-appel.est-masquee { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .barre-appel { transition: opacity 150ms ease; }
  .barre-appel.est-masquee { opacity: 0; }
}
.barre-appel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--chaux);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .02em;
}
.barre-appel__rappel { border-left: 1px solid var(--filet-sombre); }
.barre-appel a:active { background: rgba(250, 250, 247, .1); }
.barre-appel { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
@media (min-width: 1024px) { .barre-appel { display: none; } }
/* Place de la barre d'appel : prise dans le pied de page, qui reste vert jusqu'en bas */
@media (max-width: 1023.98px) { .pied { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }

/* ---------- Pictos métier (sprite en tête de page) ---------- */
.picto {
  width: 3rem; height: 3rem;
  margin-left: -.2rem;
  color: var(--gazon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Profil de haie taillée : le pied de page commence par le dessus d'une haie ---------- */
.pied { position: relative; }
.profil-haie {
  position: absolute;
  left: 0; top: -35px;
  width: 100%;
  height: 36px;
  fill: var(--haie-nuit);
  pointer-events: none;
}

/* ---------- Marques de confiance ---------- */
.confiance { margin: var(--e-1) 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.confiance li {
  display: grid;
  gap: .1rem;
  padding: .6rem .9rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.confiance span { font-size: var(--t-s); font-weight: 500; }
.confiance small { font-size: var(--t-xs); color: var(--texte-doux); }

/* ---------- Avant / après ---------- */
.aa__cadre {
  --pos: 50%;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rayon);
  touch-action: pan-y;                 /* le doigt tire la poignée, le défilement vertical reste à la page */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.aa__image { position: absolute; inset: 0; min-height: 0; }
.aa__image--avant { background: #9DA597; color: #FAFAF7; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.aa__image--apres { place-items: end end; }
.aa__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1px;
  will-change: transform;
  background: var(--chaux);
  pointer-events: none;
}
.aa__bouton {
  position: absolute;
  top: 50%; left: 50%;
  width: 2.5rem; height: 2.5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--chaux);
  color: var(--haie);
  display: grid;
  place-items: center;
}
.aa__bouton::before { content: "‹ ›"; font-size: 1.125rem; letter-spacing: .1em; line-height: 1; }
.aa__cadre:has(input:focus-visible) .aa__bouton { outline: 2px solid var(--chaux); outline-offset: 3px; }
.aa__etiquette {
  position: absolute;
  top: .75rem;
  padding: .25em .6em;
  background: rgba(20, 34, 25, .7);
  color: var(--chaux);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.aa__etiquette--avant { left: .75rem; }
.aa__etiquette--apres { right: .75rem; }

/* ---------- Logos partenaires (Jardiscoop, Services à la personne) ---------- */
.partenaires { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; max-width: none; margin-block: var(--e-1); }
.logo-partenaire { display: inline-flex; align-items: center; min-height: 44px; }
.partenaires img { width: auto; height: 46px; object-fit: contain; }
.partenaires .logo-partenaire__sap { height: 64px; }

/* En attendant les fichiers des logos : cartouches texte (même emplacement) */
.logo-partenaire--texte {
  display: inline-grid;
  align-content: center;
  gap: .1rem;
  padding: .55rem .9rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
}
.logo-partenaire--texte span { font-weight: 500; font-size: var(--t-s); line-height: 1.2; }
.logo-partenaire--texte small { font-size: var(--t-xs); line-height: 1.2; color: var(--texte-doux); }
@media (hover: hover) and (pointer: fine) {
  a.logo-partenaire--texte:hover { border-color: currentColor; }
}