/* ==========================================================================
   MB Com — feuille de style de la page d'accueil (mbcom.html)

   Sommaire
    1. Variables (couleurs, arrondis, ombres, polices)
    2. Base
    3. Accessibilité (lien d'évitement, focus, texte masqué)
    4. En-tête et menu
    5. Boutons et éléments communs
    6. Hero (haut de page)
    7. Vos besoins (4 piliers)
    8. Interlocuteur
    9. Solutions
   10. Méthode
   11. Engagement
   12. Témoignages
   13. Contact
   14. Pied de page
   15. Adaptations tablette et mobile
   16. Préférence « moins d'animations »

   Les polices (Nunito et Caveat) sont hébergées dans le dossier fonts/
   (voir les règles @font-face juste après ce sommaire).
   Les pages projet.html et mentions-legales.html ont leurs propres
   feuilles de style (projet-style.css, mentions-style.css).
   ========================================================================== */


/* ---------- Polices hébergées sur le site (aucun appel à Google) ----------
   Les fichiers .woff2 se trouvent dans le dossier fonts/ (voir preparer_polices.py).
   « font-display: swap » : le texte s'affiche tout de suite avec une police de secours,
   puis bascule sur la vraie police dès qu'elle est chargée. */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-variable-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-variable-wght.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}


/* ---------- 1. Variables ---------- */
:root {
  /* Couleurs */
  --ink: #234a3a;              /* titres et texte principal */
  --text-soft: #4d6156;        /* paragraphes courants */
  --green: #62b946;            /* vert vif : décors, et accents sur fonds sombres */
  --green-deep: #2b7a30;       /* vert profond : boutons, liens et textes verts sur fond clair */
  --green-deep-hover: #1f6a25;
  --green-light: #d2e88b;      /* vert clair : accents sur fonds sombres */
  --mint: #f3f8f1;             /* fond de section alterné */
  --mint-strong: #e6f3e2;      /* pastilles, encarts, fond du contact */
  --line: rgba(98, 185, 70, .16);

  /* Formes */
  --radius: 14px;              /* cartes */
  --radius-s: 10px;            /* petits éléments (images dans une carte…) */
  --shadow: 0 10px 30px rgba(23, 56, 59, .09);
  --shadow-hover: 0 16px 40px rgba(23, 56, 59, .16);

  /* Polices */
  --font-body: "Nunito", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Hauteur de l'en-tête (change sur tablette et mobile) */
  --header-h: 64px;
}


/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Les ancres (#contact…) s'arrêtent sous l'en-tête collant */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: #edf3ed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Listes utilisées comme grilles de cartes : on retire les puces */
.four-pillars,
.solution-grid,
.offer-highlights,
.method-steps,
.hero-services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-shell {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 55px rgba(17, 45, 47, .12);
  /* « clip » coupe ce qui dépasse SANS bloquer l'en-tête collant
     (« hidden » empêchait le position: sticky de fonctionner) */
  overflow: hidden;
  overflow: clip;
}


/* ---------- 3. Accessibilité ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--green-deep);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
}

/* Sur les fonds sombres, le contour de focus est blanc */
.hero :focus-visible,
.interlocuteur-left :focus-visible,
.promise-image-placeholder :focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- 4. En-tête et menu ---------- */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 42px 0 36px;
  background: rgba(255, 255, 255, .98);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
}

.brand {
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  z-index: 2;
}

.brand img {
  height: 46px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(23, 56, 59, .14));
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
  font-size: .875rem;
  font-weight: 600;
}

.main-nav a {
  transition: color .2s ease, transform .2s ease;
}

.main-nav a:hover {
  color: var(--green-deep);
  transform: translateY(-1px);
}

.button span,
.text-link span,
.solution-question a span {
  margin-left: 8px;
}

/* Bouton « hamburger » : visible seulement sur tablette et mobile */
.menu-toggle {
  display: none;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ---------- 5. Boutons et éléments communs ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--green-deep);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.button-primary:hover {
  background: var(--green-deep-hover);
}

.button-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .72);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, .1);
}

.eyebrow,
.section-kicker {
  margin: 0 0 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8125rem;
  font-weight: 700;
}

.section-kicker {
  color: var(--green-deep);
}

/* Petites annotations « écrites à la main » */
.hand-note,
.hand-green,
.hand-black,
.hand-copy,
.method-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  line-height: 1.05;
}

/* Mot ou ligne mis en valeur dans un titre (en vert) */
.section-heading h2 .accent {
  display: block;
  color: var(--green-deep);
}

.section {
  padding: 80px 7%;
}

.section-heading {
  max-width: 830px;
}

.section-heading h2 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}

.section-heading > p:last-child {
  max-width: 820px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-soft);
}

/* Effet « carte qui se soulève » au survol (souris uniquement) */
.pillar-card,
.solution-card,
.offer-highlight,
.method-photo-step,
.contact-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {

  .pillar-card:hover,
  .solution-card:hover,
  .offer-highlight:hover,
  .method-photo-step:hover,
  .contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
}


/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 590px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(.82) contrast(.96);
}

/* Voile sombre pour garder le texte lisible.
   Il doit passer AU-DESSUS de la photo (z-index: 1) et sous le texte (z-index: 2). */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(18, 52, 38, .80) 0%, rgba(18, 52, 38, .56) 47%, rgba(18, 52, 38, .10) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(620px, 90%);
  padding: 112px 0 130px 7%;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  line-height: .99;
  letter-spacing: -.045em;
  font-weight: 800;
}

.hero h1 .accent-hand {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.12em;
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
  color: var(--green);
}

.hero-intro {
  max-width: 520px;
  margin: 23px 0 27px;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .94);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-note {
  position: absolute;
  right: 12%;
  top: 70px;
  z-index: 3;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: #fff;
  transform: rotate(-5deg);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.hero-note strong {
  color: var(--green-light);
  font-weight: 700;
}

/* Bandeau des domaines d'intervention, en bas du hero */
.hero-services {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  padding: 18px 7%;
  border-top: 1px solid rgba(255, 255, 255, .22);
  background: rgba(18, 60, 36, .55);
  backdrop-filter: blur(4px);
  font-size: .8125rem;
  font-weight: 600;
}

.hero-services li:not(.hero-availability)::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .85;
}

.hero-availability {
  margin-left: auto;
  color: #dff1d7;
  font-weight: 800;
}


/* ---------- 7. Vos besoins (4 piliers) ---------- */
.intro-section {
  background: #fff;
}

.four-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pillar-card {
  min-height: 190px;
  padding: 26px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.pillar-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--mint-strong);
  color: var(--green-deep);
}

.pillar-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar-card h3 {
  margin: 0;
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pillar-card p {
  margin: 8px 0 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: balance;
}


/* ---------- 8. Interlocuteur ---------- */
.interlocuteur-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mint);
}

.interlocuteur-left {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  color: #fff;
}

.mathieu-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.78);
}

.photo-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 37, 39, .05) 15%, rgba(5, 37, 39, .74) 100%);
}

.left-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  z-index: 2;
  max-width: 590px;
}

.left-copy h2 {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.left-copy .hand-green {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.02;
  color: var(--green-light);
  transform: rotate(-2deg);
}

.left-copy > p:not(.hand-green) {
  max-width: 590px;
  margin: 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .94);
}

.mini-signature {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .92);
}

.mini-signature img {
  width: 43px;
  height: 55px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .18));
}

.mini-signature strong {
  color: var(--green-light);
}

.interlocuteur-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 78px 11% 70px;
}

.hand-black {
  margin: 0 0 5px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #172e30;
  transform: rotate(-2deg);
}

.interlocuteur-right .hand-green {
  margin: 0 0 28px;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  color: var(--green-deep);
  transform: rotate(-2deg);
}

.interlocuteur-right > p:not(.hand-black):not(.hand-green):not(.hand-copy):not(.availability) {
  max-width: 590px;
  font-size: 1rem;
  color: var(--text-soft);
}

.interlocuteur-right .hand-copy {
  margin: 32px 0 0;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--green-deep);
  transform: rotate(-2deg);
}

.availability {
  max-width: 590px;
  margin: 14px 0 0;
  font-size: .9375rem;
  font-weight: 800;
  color: var(--green-deep);
}


/* ---------- 9. Solutions ---------- */
.solutions-section {
  background: #fff;
}

.section-heading.compact {
  margin-bottom: 38px;
}

.solutions-lead strong {
  color: var(--green-deep);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 16px;
}

.solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: left;
}

.solution-photo {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.solution-card-body {
  padding: 20px 19px 24px;
}

.solution-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.solution-card p {
  margin: 8px 0 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.offer-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.offer-highlight {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mint);
}

.offer-highlight h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--ink);
}

.offer-highlight p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.solution-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--mint-strong);
  font-size: 1rem;
}

.solution-question a {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--green-deep);
  color: #fff;
  font-weight: 700;
  transition: background .2s ease;
}

.solution-question a:hover {
  background: var(--green-deep-hover);
}


/* ---------- 10. Méthode ---------- */
.method-section {
  padding: 82px 7% 70px;
  border-top: 1px solid var(--line);
  background: var(--mint);
  color: var(--ink);
}

.method-content {
  max-width: 1120px;
  margin: 0 auto;
}

.method-section h2 {
  margin: 0 0 42px;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--ink);
}

.method-section h2 .accent-hand {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--green-deep);
}

.method-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.method-photo-step {
  min-width: 0;
  padding: 23px 14px 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.method-photo-step img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.method-photo-step span {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.method-hand {
  margin: 34px 0 0;
  font-size: 1.75rem;
  color: var(--green-deep);
  transform: rotate(-2deg);
}


/* ---------- 11. Engagement ---------- */
.promise-section {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  background: #fff;
}

/* Visuel provisoire : à remplacer par une photo (nature / territoire) */
.promise-image-placeholder {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: linear-gradient(135deg, #294e45, #3f6148 45%, #1c3d3a);
}

.promise-image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(230, 176, 111, .25), transparent 25%),
    radial-gradient(ellipse at 75% 60%, rgba(98, 185, 70, .16), transparent 35%);
}

.promise-text {
  position: absolute;
  left: 9%;
  top: 19%;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
  transform: rotate(-4deg);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.promise-text span {
  color: var(--green-light);
  font-weight: 700;
}

.promise-copy {
  padding: 60px 10%;
  background: #fff;
}

.promise-copy h2 {
  margin: 0 0 18px;
  font-size: 2.125rem;
  line-height: 1.1;
  color: var(--ink);
}

.promise-copy > p:not(.section-kicker) {
  margin: 0;
  font-size: 1rem;
  color: var(--text-soft);
}

.text-link {
  display: inline-block;
  margin-top: 15px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-deep);
}

.text-link:hover {
  color: var(--green-deep-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ---------- 12. Témoignages ---------- */
.proof-section {
  background: var(--mint);
}

.centered {
  margin: 0 auto;
  text-align: center;
}

/* Titre des témoignages sur une seule ligne */
.proof-section .section-heading {
  max-width: none;
}

.proof-section .section-heading h2 .accent {
  display: inline;
}

/* Les cartes se placent côte à côte (jusqu'à 3) et passent à la ligne si la place manque */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.testimonial-card {
  display: flex;
  flex: 1 1 300px;
  max-width: 380px;
  padding: 28px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

/* Un seul témoignage : la carte est plus large pour rester agréable à lire */
.testimonial-card:only-child {
  max-width: 640px;
}

.testimonial-card figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.testimonial-logo {
  align-self: flex-start;
  height: 64px;
  width: auto;
  max-width: 180px;
  margin-bottom: 20px;
  object-fit: contain;
  object-position: left center;
}

.testimonial-card blockquote {
  flex: 1;
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.testimonial-card blockquote p {
  margin: 0;
}

/* Grand guillemet décoratif (le second « content » le rend muet pour les lecteurs d'écran) */
.testimonial-card blockquote::before {
  content: "“";
  content: "“" / "";
  display: block;
  height: 1.5rem;
  margin-bottom: 8px;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
}

.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.testimonial-author {
  font-weight: 800;
  color: var(--ink);
}

.testimonial-role {
  font-size: .9375rem;
  color: var(--text-soft);
}

.testimonial-date {
  margin-top: 6px;
  font-size: .8125rem;
  color: #5f7066;
}


/* ---------- 13. Contact ---------- */
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: start;
  padding: 78px 7% 84px;
  background: var(--mint-strong);
  color: var(--ink);
}

.contact-intro {
  padding-top: 20px;
}

.contact-intro h2 {
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 4.5vw, 3.9rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.contact-intro h2 .hand-line {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: 0;
}

.contact-intro h2 .hand-line-accent {
  margin-top: .15em;
  font-weight: 700;
  color: var(--green-deep);
}

.contact-intro > p:last-child {
  max-width: 420px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.contact-panel {
  width: 100%;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.contact-card:hover {
  border-color: rgba(98, 185, 70, .45);
}

.contact-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-strong);
  color: var(--green-deep);
}

.contact-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.contact-card small {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}


/* ---------- 14. Pied de page ---------- */
.site-footer {
  display: grid;
  grid-template-columns: 1.05fr 1.7fr 1.05fr;
  gap: 30px;
  align-items: center;
  padding: 26px 7%;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .8125rem;
}

.footer-brand img {
  width: 46px;
  height: 60px;
  object-fit: contain;
}

.footer-brand strong,
.footer-meta strong {
  color: var(--green-deep);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: .8125rem;
  color: var(--text-soft);
}

.footer-links a:hover {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  font-size: .75rem;
  color: #5f7066;
}

.footer-meta strong {
  font-weight: 700;
}


/* ---------- 15. Adaptations tablette et mobile ----------
   Trois seuils seulement : 1000 px, 900 px et 600 px.
   (Si tu changes 1000 px ici, change aussi la valeur dans js/mbcom-script.js.) */

@media (max-width: 1000px) {
  :root {
    --header-h: 56px;
  }

  .site-header {
    padding: 0 22px;
  }

  .brand img {
    height: 40px;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 22px 20px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .10);
    font-size: 1rem;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 14px 4px;
  }

  .interlocuteur-section,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .interlocuteur-left {
    min-height: 620px;
  }

  .contact-section {
    gap: 35px;
  }

  .contact-intro {
    padding-top: 0;
  }

  .offer-highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .hero-content {
    padding: 145px 7% 130px;
  }

  .hero-note {
    right: 6%;
    top: 24px;
  }

  .four-pillars,
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .promise-section {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-meta {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 62px 6%;
  }

  .hero {
    min-height: 680px;
  }

  .hero-photo {
    object-position: 63% center;
  }

  .hero-overlay {
    background: linear-gradient(90deg, rgba(18, 52, 38, .85), rgba(18, 52, 38, .65));
  }

  .hero-content {
    width: 94%;
    padding: 150px 6% 150px;
  }

  .hero h1 {
    font-size: 2.9rem;
  }

  .hero-services {
    gap: 6px 14px;
    padding: 15px 6%;
    font-size: .75rem;
  }

  .hero-availability {
    flex-basis: 100%;
    margin-left: 0;
  }

  .four-pillars,
  .solution-grid,
  .offer-highlights {
    grid-template-columns: 1fr;
  }

  .solution-photo {
    height: 180px;
  }

  .solution-question {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .interlocuteur-left {
    min-height: 650px;
  }

  .left-copy {
    left: 7%;
    right: 7%;
    bottom: 6%;
  }

  .interlocuteur-right {
    padding: 58px 7%;
  }

  .method-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .promise-copy {
    padding: 55px 7%;
  }

  .contact-section {
    padding: 65px 6%;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-card {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    min-height: 0;
  }

  .contact-card > span:last-child {
    flex: 1;
  }
}


/* ---------- 16. Préférence « moins d'animations » ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}