/* ==========================================================================
   Artizan du Bonheur — feuille de style unique
   Jardinage & entretien extérieur · Le Tampon, Sud de La Réunion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs de fond — relevées sur le flyer du client */
  --fond:            #fcfdf9;  /* blanc du flyer, à peine végétal */
  --fond-clair:      #eef3e7;  /* sauge très pâle : sections alternées */
  --fond-blanc:      #ffffff;
  --vert-nuit:       #22401f;  /* vert forêt : anneau du blason, encadré, pied */
  --vert-nuit-clair: #2f522c;  /* vert profond : montagnes et rameaux */
  --olive:           #667145;  /* olive : cœur du ravenala */
  --vert-vif:        #a3b68f;  /* vert feuille : accents sur fond sombre, filets */
  --sauge:           #d8e4c9;  /* sauge clair : panneau « 50 % » du flyer */

  /* Couleurs de texte (contrastes vérifiés)
     Le vert feuille et la sauge ne se lisent pas sur fond clair : on y écrit
     en olive foncé (--vert-texte) ou en vert quasi noir (--texte). */
  --texte:           #1c2b1b;  /* vert quasi noir des titres du flyer */
  --texte-doux:      #4f5a4c;
  --vert-texte:      #5a643c;  /* olive foncé : sur-titres sur fond clair */
  --vert-sur-sauge:  #2f522c;
  --texte-sur-sauge: #1c2b1b;
  --sur-fonce:       #f7faf2;
  --sur-fonce-doux:  #c3cfb8;

  /* Traits */
  --trait:        rgba(28, 43, 27, 0.14);
  --trait-clair:  rgba(247, 250, 242, 0.18);

  /* Typographie */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Rythme */
  --page:      1220px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --section:   clamp(4rem, 9vw, 7.5rem);

  --rayon:      4px;
  --rayon-carte: 2px;
  --rayon-rond: 999px;

  --ombre: 0 18px 44px rgba(28, 43, 27, 0.10);
  --ombre-forte: 0 24px 60px rgba(28, 43, 27, 0.18);

  --transition: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--vert-nuit :focus-visible,
.pied :focus-visible,
.carte-service--vert-nuit:focus-visible { outline-color: var(--vert-vif); }

/* Lien d'évitement pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--vert-nuit);
  color: var(--sur-fonce);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  text-decoration: none;
  transition: transform var(--transition);
}
.saut-contenu:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */

.contenant {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenant--etroit { max-width: 780px; }

.section { padding-block: var(--section); }
.section--serree { padding-block: clamp(3rem, 6vw, 5rem); }

.section--vert-nuit  { background: var(--vert-nuit); color: var(--sur-fonce); }
.section--fond-clair { background: var(--fond-clair); }
.section--sauge  { background: var(--sauge); }

.section--vert-nuit h1, .section--vert-nuit h2, .section--vert-nuit h3 { color: var(--sur-fonce); }
.section--vert-nuit .plomb { color: var(--sur-fonce-doux); }

/* Sur-titre vert en capitales espacées */
.sur-titre {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.35rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--vert-texte);
}
.sur-titre::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: var(--vert-vif);
}
.sur-titre--nu::before { display: none; }
.section--vert-nuit .sur-titre { color: var(--vert-vif); }

/* Sur un fond sauge, un accent vert vif disparaît : on passe au vert forêt. */
.section--sauge .sur-titre,
.carte-service--sauge .sur-titre { color: var(--vert-sur-sauge); }
.section--sauge .sur-titre::before,
.carte-service--sauge .sur-titre::before { background: var(--vert-sur-sauge); }
.section--sauge .plomb { color: var(--texte-sur-sauge); }

/* Titres */
.titre-geant {
  font-size: clamp(2.6rem, 1.35rem + 5.4vw, 5rem);
  line-height: 1.04;
}
.titre-section {
  font-size: clamp(1.95rem, 1.25rem + 2.7vw, 3.1rem);
}
.titre-bloc {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
}

/* Paragraphe d'introduction */
.plomb {
  font-size: clamp(1.05rem, 1rem + 0.28vw, 1.2rem);
  color: var(--texte-doux);
  max-width: 62ch;
}

.separateur {
  border: 0;
  height: 1px;
  background: var(--trait);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.section--vert-nuit .separateur { background: var(--trait-clair); }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-rond);
  background: var(--vert-nuit);
  color: var(--sur-fonce);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), color var(--transition),
              border-color var(--transition);
}
/* Vert forêt au repos, olive au survol : deux verts du blason. */
.bouton:hover {
  background: var(--olive);
  color: var(--sur-fonce);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28, 43, 27, 0.25);
}
.bouton:active { transform: translateY(0); }

.bouton .fleche { transition: transform var(--transition); }
.bouton:hover .fleche { transform: translate(3px, -3px); }

.bouton--sombre { background: var(--vert-nuit-clair); color: var(--sur-fonce); }
.bouton--sombre:hover { background: var(--olive); }

/* Sur fond vert forêt, le bouton passe en sauge clair pour rester visible */
.section--vert-nuit .bouton:not(.bouton--contour),
.pied .bouton:not(.bouton--contour) {
  background: var(--sauge);
  color: var(--vert-nuit);
}
.section--vert-nuit .bouton:not(.bouton--contour):hover,
.pied .bouton:not(.bouton--contour):hover {
  background: var(--fond-blanc);
  color: var(--vert-nuit);
}

.bouton--contour {
  background: transparent;
  border-color: currentColor;
  color: var(--texte);
}
.bouton--contour:hover {
  background: var(--vert-nuit);
  border-color: var(--vert-nuit);
  color: var(--sur-fonce);
}
.section--vert-nuit .bouton--contour { color: var(--sur-fonce); }
.section--vert-nuit .bouton--contour:hover {
  background: var(--sur-fonce);
  border-color: var(--sur-fonce);
  color: var(--vert-nuit);
}

.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Lien fléché discret */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--vert-vif);
  padding-bottom: 3px;
  transition: gap var(--transition), border-color var(--transition);
}
.lien-fleche:hover { gap: 0.85rem; border-color: currentColor; }

/* --------------------------------------------------------------------------
   5. En-tête et navigation
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fond-blanc);
  border-bottom: 1px solid var(--trait);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--texte);
  flex: none;
}
/* Le blason est fourni en JPEG, donc sur un fond blanc opaque. Le recadrage
   circulaire le fait passer proprement aussi bien sur le blanc de l'en-tête
   que sur le vert forêt du pied de page, où il se lit comme un sceau. */
.logo__pastille {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
}

/* Blason en grand, pour les emplacements où il peut respirer */
.sceau {
  width: clamp(104px, 14vw, 148px);
  height: clamp(104px, 14vw, 148px);
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(28, 43, 27, 0.16);
}
.logo__texte { display: grid; line-height: 1; }
.logo__nom {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo__sous {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 0.28rem;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
}
.nav__lien {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--texte);
  transition: color var(--transition);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--vert-vif);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--vert-texte); }

.entete__actions { display: flex; align-items: center; gap: 0.75rem; }
.entete__actions .bouton { padding: 0.7rem 1.4rem; font-size: 0.92rem; }

/* Bouton hamburger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-rond);
  background: transparent;
  cursor: pointer;
}
.burger__barres { position: relative; width: 18px; height: 12px; }
.burger__barres span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--texte);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger__barres span:nth-child(1) { top: 0; }
.burger__barres span:nth-child(2) { top: 5.25px; }
.burger__barres span:nth-child(3) { top: 10.5px; }

.burger[aria-expanded="true"] .burger__barres span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barres span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barres span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 62rem) {
  .burger { display: inline-flex; }
  .entete__actions .bouton { display: none; }

  .nav {
    position: fixed;
    inset: 5rem 0 0;
    background: var(--vert-nuit);
    color: var(--sur-fonce);
    padding: var(--gouttiere);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    display: block;
    padding: 1.1rem 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--sur-fonce);
    border-bottom: 1px solid var(--trait-clair);
  }
  .nav__lien::after { display: none; }
  .nav__lien[aria-current="page"] { color: var(--vert-vif); }

  .nav__pied { margin-top: 2rem; display: grid; gap: 0.75rem; }
  .nav__pied .bouton { width: 100%; }
  .nav__pied .bouton:not(.bouton--contour) { background: var(--sauge); color: var(--vert-nuit); }
  .nav :focus-visible { outline-color: var(--vert-vif); }

  /* Le panneau est sombre : le bouton à contour doit passer en clair,
     sinon il est vert sur vert et disparaît. */
  .nav__pied .bouton--contour { color: var(--sur-fonce); }
  .nav__pied .bouton--contour:hover {
    background: var(--sur-fonce);
    border-color: var(--sur-fonce);
    color: var(--vert-nuit);
  }
}

@media (min-width: 62.0625rem) {
  .nav__pied { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); }

.hero__grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero__titre {
  margin-bottom: 1.25rem;
  font-size: clamp(2.6rem, 1.35rem + 4.4vw, 4.4rem);
}

.hero__savoirs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  list-style: none;
  margin: 1.75rem 0 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.hero__savoirs li { display: flex; align-items: center; gap: 0.9rem; }
.hero__savoirs li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vert-vif);
}

/* Repères chiffrés sous le hero */
.reperes {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--trait);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 48rem) {
  .reperes { grid-template-columns: repeat(3, 1fr); }
}
.repere {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 48rem) {
  .repere { padding: 2rem clamp(1rem, 2vw, 2rem); border-bottom: 0; }
  .repere + .repere { border-left: 1px solid var(--trait); }
  .repere:first-child { padding-left: 0; }
}
.repere__valeur {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
  color: var(--vert-texte);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.repere__label { color: var(--texte-doux); font-size: 0.95rem; }
.repere__note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   7. Emplacements photo (à remplacer par les vraies photos)
   -------------------------------------------------------------------------- */

.photo-cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--fond-clair);
}
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; }

.photo-cadre--portrait { aspect-ratio: 4 / 5; }
.photo-cadre--paysage  { aspect-ratio: 3 / 2; }
.photo-cadre--carre    { aspect-ratio: 1 / 1; }

/* Bloc temporaire : dessiné en CSS, aucun fichier image requis.
   Il disparaît dès qu'une <img> est placée à la place. */
.photo-vide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(28, 43, 27, 0.045) 0 12px,
      rgba(28, 43, 27, 0) 12px 24px
    ),
    linear-gradient(160deg, #e7ede1 0%, #d3dcc8 55%, #bfcbb2 100%);
  color: #2f3a2a;
}
.photo-vide--avant {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(28, 43, 27, 0.05) 0 12px,
      rgba(28, 43, 27, 0) 12px 24px
    ),
    linear-gradient(160deg, #d0d4c9 0%, #b8beb1 55%, #a0a798 100%);
}
.photo-vide--apres {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(28, 43, 27, 0.04) 0 12px,
      rgba(28, 43, 27, 0) 12px 24px
    ),
    linear-gradient(160deg, #e3ecd6 0%, #c4d5b0 55%, #a3b68f 100%);
}
.photo-vide__icone { width: 34px; height: 34px; opacity: 0.5; }
.photo-vide__titre {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.photo-vide__fichier {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  word-break: break-all;
  max-width: 26ch;
  padding: 0.3rem 0.6rem;
  border-radius: var(--rayon);
  background: rgba(253, 252, 246, 0.65);
  color: #2f3a2a;
}

/* Carte cliquable vers Google Maps */
.carte-lien {
  display: block;
  text-decoration: none;
  color: inherit;
}
.carte-lien .photo-cadre { transition: box-shadow var(--transition); }
.carte-lien:hover .photo-cadre { box-shadow: var(--ombre); }
.carte-lien img { transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.carte-lien:hover img { transform: scale(1.03); }

.carte-lien__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  background: var(--fond-blanc);
  color: var(--texte);
  font-size: 0.85rem;
  font-weight: 500;
  border-top-right-radius: 3px;
}
.carte-lien__badge .fleche { transition: transform var(--transition); }
.carte-lien:hover .carte-lien__badge .fleche { transform: translate(3px, -3px); }

/* Carte Google interactive, chargée au clic.
   Une carte intégrée d'emblée contacterait Google et déposerait des cookies
   dès l'arrivée sur la page, ce qui exige un bandeau de consentement. En la
   chargeant au clic, la page reste neutre par défaut : on affiche une image
   du secteur, et le visiteur décide. */
.carte__cadre {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--fond-clair);
}
.carte__cadre img,
.carte__cadre iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.carte__cadre img { object-fit: cover; }

/* Carte OpenStreetMap : les tuiles sont des <img>, il faut annuler la règle
   globale qui contraint les images à la largeur de leur conteneur. */
.leaflet-container img { max-width: none; }
.leaflet-container {
  font-family: var(--sans);
  background: var(--fond-clair);
}
.leaflet-container a { color: var(--vert-texte); }

/* Nom de commune posé sur la carte */
.carte__nom {
  padding: 0.2rem 0.5rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--fond-blanc);
  color: var(--texte);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(28, 43, 27, 0.25);
}
.carte__nom::before { display: none; }   /* la petite flèche de l'infobulle */

/* Crédit du fond de carte : Google demande que cette mention reste visible
   dès lors qu'une capture de Maps est utilisée. */
.credit-carte {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--texte-doux);
}

/* Étiquette posée sur une image */
.photo-etiquette {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.7rem 1.4rem;
  background: var(--vert-vif);
  color: var(--vert-nuit);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Cartes de services
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 52rem) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

.carte-service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--rayon-carte);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-service:hover { transform: translateY(-5px); box-shadow: var(--ombre); }

.carte-service--vert-nuit  { background: var(--vert-nuit);     color: var(--sur-fonce); }
.carte-service--sauge  { background: var(--sauge); color: var(--vert-nuit); }
.carte-service--fond-clair { background: var(--fond-blanc); color: var(--vert-nuit); border: 1px solid var(--trait); }

.carte-service--vert-nuit .sur-titre { color: var(--vert-vif); }
.carte-service--vert-nuit h3 { color: var(--sur-fonce); }
.carte-service--vert-nuit .carte-service__texte { color: var(--sur-fonce-doux); }
.carte-service--vert-nuit .carte-service__liste li { border-color: var(--trait-clair); }

.carte-service__numero {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--vert-texte);
  margin-bottom: 1rem;
}
.carte-service--vert-nuit .carte-service__numero { color: var(--vert-vif); }
.carte-service--sauge .carte-service__numero { color: var(--vert-sur-sauge); }

.carte-service__texte {
  color: var(--texte-doux);
  font-size: 0.98rem;
  margin-bottom: 1.75rem;
}
.carte-service--sauge .carte-service__texte { color: var(--texte-sur-sauge); }
.carte-service--sauge .carte-service__liste li { border-color: rgba(28, 43, 27, 0.24); }

.carte-service__liste { list-style: none; margin-top: auto; }
.carte-service__liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--trait);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.carte-service__liste li::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.5;
}

.carte-service__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--vert-texte);
  transition: gap var(--transition);
}
.carte-service--vert-nuit .carte-service__cta { color: var(--vert-vif); }
.carte-service--sauge .carte-service__cta { color: var(--vert-sur-sauge); }
.carte-service:hover .carte-service__cta { gap: 0.9rem; }

/* --------------------------------------------------------------------------
   9. Comparateur avant / après
   -------------------------------------------------------------------------- */

.avant-apres-grille {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 54rem) {
  .avant-apres-grille { grid-template-columns: repeat(2, 1fr); }
}

.comparateur { --curseur: 50%; }

.comparateur__cadre {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--fond-clair);
  touch-action: pan-y;
  user-select: none;
}

.comparateur__couche { position: absolute; inset: 0; }
.comparateur__couche img { width: 100%; height: 100%; object-fit: cover; }

/* Les blocs temporaires sont décalés vers leur propre moitié, sinon le
   curseur les coupe en plein milieu et plus rien n'est lisible. */
.comparateur__couche--avant .photo-vide {
  align-items: flex-start;
  text-align: left;
  padding-inline: clamp(1rem, 6%, 2.25rem) 55%;
}
.comparateur__couche--apres .photo-vide {
  align-items: flex-end;
  text-align: right;
  padding-inline: 55% clamp(1rem, 6%, 2.25rem);
}
.comparateur .photo-vide__fichier { max-width: 100%; }

/* La couche « avant » est révélée de la gauche jusqu'au curseur */
.comparateur__couche--avant {
  clip-path: inset(0 calc(100% - var(--curseur)) 0 0);
  z-index: 2;
}

.comparateur__mention {
  position: absolute;
  top: 0.9rem;
  z-index: 4;
  padding: 0.4rem 0.9rem;
  border-radius: var(--rayon-rond);
  background: rgba(28, 43, 27, 0.82);
  color: var(--sur-fonce);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.comparateur__mention--avant { left: 0.9rem; }
.comparateur__mention--apres { right: 0.9rem; }

/* Duo avant / après — deux photos côte à côte.

   À utiliser quand la paire n'a pas été prise du même point de vue : un
   curseur donnerait l'impression de deux lieux différents, alors que deux
   images juxtaposées se lisent très bien. Sur mobile, elles s'empilent. */
.avant-apres-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0;
}
.avant-apres-duo figure { position: relative; margin: 0; }
.avant-apres-duo figcaption {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--rayon-rond);
  background: rgba(28, 43, 27, 0.82);
  color: var(--sur-fonce);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 34rem) {
  .avant-apres-duo { grid-template-columns: 1fr; }
}

/* Barre verticale + poignée, purement décoratives */
.comparateur__barre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--curseur);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--fond-blanc);
  box-shadow: 0 0 12px rgba(28, 43, 27, 0.35);
  pointer-events: none;
}
.comparateur__poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fond-blanc);
  color: var(--vert-nuit);
  box-shadow: 0 6px 18px rgba(28, 43, 27, 0.3);
}

/* Le vrai contrôle : un input range transparent, plein cadre.
   Il apporte gratuitement le clavier, le tactile et l'accessibilité. */
.comparateur__curseur {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  /* Le doigt pilote le curseur ; le défilement vertical reste au navigateur. */
  touch-action: pan-y;
}
.comparateur__curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.75rem;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.comparateur__curseur::-moz-range-thumb {
  width: 2.75rem;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.comparateur__curseur:focus-visible { outline-offset: -3px; }

/* Vidéo de chantier, dans la grille des réalisations.
   La vidéo est verticale (filmée au téléphone) : on la présente en 3/4 pour
   qu'elle ne déséquilibre pas la grille, et on recadre par le milieu, là où
   l'action se passe. */
.video-cadre {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  background: var(--vert-nuit);
}
.video-cadre video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparateur__legende {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.comparateur__titre {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}
.comparateur__lieu {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert-texte);
}
.comparateur__texte {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.section--vert-nuit .comparateur__texte { color: var(--sur-fonce-doux); }
.section--vert-nuit .comparateur__lieu { color: var(--vert-vif); }

/* --------------------------------------------------------------------------
   10. Blocs de contenu génériques
   -------------------------------------------------------------------------- */

/* Deux colonnes texte + image */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo--image-droite .duo__media { order: 2; }
}

/* En-tête de section : titre à gauche, intro à droite */
.entete-section {
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 58rem) {
  .entete-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Détail d'une prestation */
.prestation {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--trait);
}
@media (min-width: 58rem) {
  .prestation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .prestation:nth-child(even) .prestation__media { order: 2; }
}
.prestation__numero {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--vert-texte);
  margin-bottom: 0.75rem;
}
.prestation__points {
  list-style: none;
  margin-top: 1.5rem;
  display: grid;
  gap: 0.7rem;
}
.prestation__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  color: var(--texte-doux);
}
.prestation__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 1px;
  background: var(--vert-vif);
}

/* Liste de communes */
.communes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin-top: 2rem;
}
.communes li {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-rond);
  font-size: 0.9rem;
  background: var(--fond-blanc);
}
.section--vert-nuit .communes li {
  border-color: var(--trait-clair);
  background: rgba(242, 239, 225, 0.06);
  color: var(--sur-fonce);
}

/* Bande de citation */
.citation { text-align: center; }
.citation__marque {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--vert-vif);
  display: block;
  margin-bottom: 1.5rem;
}
.citation__texte {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.25rem);
  line-height: 1.32;
  max-width: 22ch;
  margin-inline: auto;
}
.citation__auteur {
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-vif);
}
.section--sauge .citation__auteur { color: var(--vert-sur-sauge); }
.section--sauge .citation__marque { color: var(--vert-nuit); opacity: 0.4; }

/* Appel à déposer un avis Google */
.avis-appel {
  display: grid;
  gap: 1.25rem 2.25rem;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: 12px;
  background: var(--sauge);
  color: var(--texte-sur-sauge);
}
@media (min-width: 46rem) {
  .avis-appel { grid-template-columns: minmax(0, 1fr) auto; }
}
.avis-appel h3 { margin-bottom: 0.5rem; }
.avis-appel p { margin: 0; font-size: 0.98rem; }
.avis-appel .groupe-boutons { margin: 0; }
.avis-appel .etoile { color: var(--vert-nuit); flex: none; }

/* Bloc « avis à venir » — honnête tant qu'il n'y a pas de vrais retours */
/* Avis clients — affichage visuel uniquement.

   Volontairement AUCUNE donnée structurée (Review, AggregateRating) : Google
   interdit de baliser comme sa propre note des avis recueillis sur sa
   plateforme, et sanctionne manuellement les sites qui le font. */
.avis-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.9rem;
  color: var(--texte-doux);
}
.avis-note__chiffre {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-variant-numeric: lining-nums;
  color: var(--vert-nuit);
}
.avis-etoiles {
  color: var(--olive);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.avis-grille {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.avis-carte {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--fond-blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
}
.avis-carte__texte {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.5;
  color: var(--texte);
}
.avis-carte__pied {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texte-doux);
}
.avis-carte__auteur { font-weight: 500; color: var(--vert-texte); }
.avis-source {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   10 bis. Crédit d'impôt de 50 %
   L'argument commercial le plus fort : on reprend la mise en scène du flyer
   (panneau sauge, chiffre géant, encadré vert forêt). Seul bloc du site aux
   angles arrondis, pour qu'il se détache du reste.
   -------------------------------------------------------------------------- */

.credit {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  border-radius: 14px;
  background: var(--sauge);
  color: var(--texte-sur-sauge);
}
@media (min-width: 56rem) {
  .credit { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.credit .sur-titre { color: var(--vert-sur-sauge); }
.credit .sur-titre::before { background: var(--vert-sur-sauge); }

.credit__chiffre {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.75rem, 2.5rem + 9vw, 9rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--texte);
  white-space: nowrap;
}
.credit__feuille {
  width: clamp(48px, 7vw, 82px);
  height: auto;
  flex: none;
}
.credit__libelle {
  margin: 0.9rem 0 0;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte);
}
.credit__libelle a { color: inherit; text-decoration: none; }

.credit__encadre {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 10px;
  background: var(--vert-nuit);
  color: var(--sur-fonce);
}
.credit__encadre h2 { color: var(--sur-fonce); margin-bottom: 0.75rem; }
.credit__encadre strong { color: var(--fond-blanc); font-weight: 500; }

.credit__exemple {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait-clair);
  color: var(--sur-fonce-doux);
  font-size: 0.98rem;
}
.credit__exemple s { opacity: 0.8; }
.credit__exemple b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--vert-vif);
}

.credit .groupe-boutons { margin-top: 1.5rem; align-items: center; }

.credit__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(28, 43, 27, 0.16);
  font-size: 0.85rem;
  color: var(--vert-sur-sauge);
}

/* Playfair dessine par défaut des chiffres « elzéviriens » (le 5 descend sous
   la ligne, le 0 est petit). Pour un chiffre-choc, on force les chiffres
   alignés, comme sur le flyer. */
.credit__chiffre,
.credit__exemple b,
.credit-bandeau__chiffre,
.hero__credit-chiffre { font-variant-numeric: lining-nums; }

/* Pastille dans le haut de l'accueil : visible sans défiler */
.hero__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  border-radius: var(--rayon-rond);
  background: var(--sauge);
  color: var(--texte);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.hero__credit:hover { background: #cad9b8; transform: translateY(-1px); }
.hero__credit-chiffre {
  flex: none;
  padding: 0.35rem 0.75rem;
  border-radius: var(--rayon-rond);
  background: var(--vert-nuit);
  color: var(--sur-fonce);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Bandeau compact, repris sur les pages intérieures */
.credit-bandeau {
  display: grid;
  gap: 0.9rem 1.75rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 12px;
  background: var(--sauge);
  color: var(--texte-sur-sauge);
}
@media (min-width: 46rem) {
  .credit-bandeau { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.credit-bandeau__chiffre {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 2rem + 3vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--texte);
}
.credit-bandeau__texte { margin: 0; font-size: 0.98rem; }
.credit-bandeau__texte strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.credit-bandeau__note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--vert-sur-sauge);
}
.credit-bandeau .lien-fleche { border-color: var(--vert-nuit); white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. Bloc d'appel final
   -------------------------------------------------------------------------- */

.appel { position: relative; overflow: hidden; }
.appel__interieur {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .appel__interieur { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.appel__coordonnees {
  display: grid;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--rayon-carte);
  background: rgba(242, 239, 225, 0.07);
  border: 1px solid var(--trait-clair);
}
.coordonnee {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--sur-fonce);
}
.coordonnee__icone {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vert-vif);
  color: var(--vert-vif);
}
.coordonnee__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sur-fonce-doux);
  margin-bottom: 0.15rem;
}
.coordonnee__valeur { font-size: 1.08rem; }
.coordonnee:hover .coordonnee__valeur { color: var(--vert-vif); }

/* Variante posée sur fond clair (page contact) : le vert vif n'y a pas
   assez de contraste, ni pour le texte ni pour les icônes. */
.appel__coordonnees--clair {
  background: var(--fond-blanc);
  border-color: var(--trait);
}
.appel__coordonnees--clair .coordonnee { color: var(--texte); }
.appel__coordonnees--clair .coordonnee__label { color: var(--texte-doux); }
.appel__coordonnees--clair .coordonnee__icone {
  color: var(--vert-texte);
  border-color: var(--vert-texte);
}
.appel__coordonnees--clair a.coordonnee:hover .coordonnee__valeur { color: var(--vert-texte); }

/* --------------------------------------------------------------------------
   12. Formulaire
   -------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--fond-blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
}
@media (min-width: 40rem) {
  .formulaire { grid-template-columns: repeat(2, 1fr); }
  .champ--pleine-largeur { grid-column: 1 / -1; }
}

.champ { display: grid; gap: 0.45rem; }
.champ__label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.champ__obligatoire { color: var(--vert-texte); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--fond-clair);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-size: 1rem;
  transition: border-color var(--transition), background var(--transition);
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--vert-vif);
  background: var(--fond-blanc);
}
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #a8442a; }

.champ__aide { font-size: 0.85rem; color: var(--texte-doux); }

/* Pot de miel : invisible pour l'humain, rempli par les robots */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__retour {
  grid-column: 1 / -1;
  padding: 0.9rem 1.15rem;
  border-radius: var(--rayon);
  font-size: 0.95rem;
}
.formulaire__retour[data-etat="succes"] {
  background: #e6f0dc;
  border: 1px solid #8fae77;
  color: #2f4a26;
}
.formulaire__retour[data-etat="erreur"] {
  background: #f6e2dc;
  border: 1px solid #c99483;
  color: #7d3320;
}
.formulaire__retour:empty { display: none; }

/* --------------------------------------------------------------------------
   13. Barre d'action mobile (appel + WhatsApp)
   -------------------------------------------------------------------------- */

.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--trait);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-mobile__lien {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.6rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.barre-mobile__lien--appel { background: var(--vert-nuit); color: var(--sur-fonce); }
.barre-mobile__lien--whatsapp { background: var(--vert-vif); color: var(--vert-nuit); }

@media (max-width: 48rem) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 3.6rem; }
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--vert-nuit);
  color: var(--sur-fonce);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--vert-vif); }

.pied__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pied .logo { color: var(--sur-fonce); }
.pied .logo__sous { color: var(--sur-fonce-doux); }

.pied__lieu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  color: var(--sur-fonce-doux);
  font-size: 0.95rem;
}

.pied__titre {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 1.25rem;
}

.pied__liste { list-style: none; display: grid; gap: 0.7rem; font-size: 0.98rem; }

.pied__savoirs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  list-style: none;
  font-size: 0.92rem;
  color: var(--sur-fonce-doux);
}
.pied__savoirs li { display: flex; align-items: center; gap: 0.9rem; }
.pied__savoirs li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--vert-vif);
}

.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait-clair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--sur-fonce-doux);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }

/* --------------------------------------------------------------------------
   15. Révélations au défilement
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal].est-visible { opacity: 1; transform: none; }

/* Sans JavaScript, le contenu doit rester visible */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete, .barre-mobile, .appel, .nav { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1; transform: none; }
}