/* ==========================================================================
   O DESIGN & CO. — Refonte de la page d'accueil
   D'après la maquette cliente « LandingPage.psd » (reçue le 23 septembre 2026).

   Feuille ADDITIONNELLE : elle ne modifie aucun fichier existant et tout est
   limité à la page d'accueil (body.home = page 7 FR et page 627 EN).
   Retour en arrière : supprimer la ligne <link ... refonte-accueil.css>
   dans header.php.

   Sommaire
   1. Polices
   2. Réglages (variables)
   3. Typographie de l'accueil
   4. Bannière vidéo + ornement
   5. Projets récents (3 colonnes)
   6. Blocs 50/50 (La firme, Notre accompagnement)
   7. Bandeau « Vous avez un projet en tête ? »
   8. Adaptations mobile / tablette
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES
   Fichiers fournis par la cliente, convertis en woff2 (sous-ensemble latin).
   Adobe Caslon Pro : licence à valider avant la mise en ligne (voir README).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/refonte/caslon-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/refonte/caslon-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ACaslon Pro";
  src: url("fonts/refonte/caslon-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/refonte/clash-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/refonte/clash-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Printed Moments (PeachCreme) : écriture manuscrite de la signature.
   Fichier fourni par la cliente ; licence web à confirmer avant la prod. */
@font-face {
  font-family: "Printed Moments";
  src: url("fonts/refonte/printedmoments.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. RÉGLAGES
   Les valeurs sont celles de la maquette (largeur de référence 1484 px).
   -------------------------------------------------------------------------- */
body.home {
  --od-serif: "ACaslon Pro", "Hoefler Text", Garamond, "Times New Roman", serif;
  --od-sans: "Clash Grotesk", "Montserrat", sans-serif;

  --od-lin: #EFEDE7;      /* fond des sections et de l'en-tête */
  --od-brun: #5B4941;     /* bandeau d'appel à l'action */
  --od-encre: #000;       /* texte */
  --od-blanc: #fff;

  --od-texte: 15px;       /* corps de texte */
  --od-interligne: 1.8;   /* 27 px */
  --od-titre: clamp(28px, 3.05vw, 45px);        /* titres de section sur deux lignes */
  --od-titre-court: clamp(22px, 2.05vw, 30px);  /* titres d'un ou deux mots : Projets récents, Témoignages (jugés massifs par la cliente, oct. 2026) */
  --od-hero: clamp(26px, 3.4vw, 50px);          /* titre de la bannière */
  --od-etiquette: clamp(11px, 1.15vw, 17px);    /* ARCHITECTURE · DESIGN… */
  --od-lien: clamp(11px, 0.88vw, 13px);         /* CONSULTER NOS SERVICES */

  --od-bloc-y: clamp(64px, 14.2vw, 210px);      /* respiration verticale */
  --od-gouttiere: clamp(24px, 8.1vw, 120px);    /* marge interne des textes */
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE DE L'ACCUEIL
   -------------------------------------------------------------------------- */
body.home {
  color: var(--od-encre);
}
body.home section.mainContent h1,
body.home section.mainContent h2,
body.home section.mainContent h3,
body.home section.mainContent p,
body.home section.mainContent li,
body.home .ctnStyleBanner {
  font-family: var(--od-serif);
}
body.home section.mainContent h2 {
  font-size: var(--od-titre) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--od-encre);
  margin: 0 0 clamp(6px, 0.6vw, 9px);
  text-transform: none;
}
body.home section.mainContent p {
  font-size: var(--od-texte);
  line-height: var(--od-interligne);
  font-weight: 400;
  color: var(--od-encre);
  margin: 0 0 30px;
}
body.home section.mainContent p:last-child {
  margin-bottom: 0;
}

/* Lien-étiquette : « CONSULTER NOS SERVICES », « DEMANDE DE PROJET ».
   Cible uniquement un paragraphe qui ne contient qu'un lien. */
body.home section.mainContent .contentDiv > p > a:only-child,
body.home section.mainContent .insideDiv > p > a:only-child {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .contentDiv > p > a:only-child:hover,
body.home section.mainContent .insideDiv > p > a:only-child:hover {
  opacity: 0.55;
  color: inherit;
}

/* --------------------------------------------------------------------------
   4. BANNIÈRE VIDÉO + ORNEMENT
   La vidéo de fond est conservée telle quelle.
   -------------------------------------------------------------------------- */
body.home header.header {
  position: relative;
}
/* Vidéo plein écran, raccourcie juste assez pour qu'on voie au chargement
   tout le médaillon et un filet blanc dessous, quelle que soit la hauteur
   de l'écran. --od-sous-banniere = partie du médaillon sous la bannière
   (14 px) + filet blanc (22 px). svh : hauteur visible sur mobile, barre
   d'adresse comprise ; vh reste en repli pour les anciens navigateurs. */
body.home {
  --od-sous-banniere: 36px;
}
body.home header.header .header-menubar {
  height: calc(100vh - var(--od-sous-banniere));
  height: calc(100svh - var(--od-sous-banniere));
  min-height: 420px;
}
body.home .ctnStyleBanner h1 {
  font-family: var(--od-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--od-hero) !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
  color: var(--od-blanc) !important;
  text-transform: none;
  margin: 0;
}
body.home .ctnStyleBanner p {
  font-family: var(--od-sans);
  font-weight: 400;
  font-size: var(--od-etiquette);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* compense l'espacement sur un texte centré */
  color: var(--od-blanc);
  margin: clamp(12px, 1.5vw, 22px) 0 0;
}

/* Ornement : languette blanche + médaillon, au bas de la bannière */
body.home .ornementAccueil {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 160px;
  height: 76px;
  transform: translate(-50%, 24px);
  z-index: 120; /* la banniere .header-menubar est a 100 */
  pointer-events: none;
}
body.home .ornementAccueil svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   5. PROJETS RÉCENTS (3 colonnes)
   -------------------------------------------------------------------------- */
body.home .col3Section {
  padding: clamp(40px, 4vw, 60px) 0 clamp(60px, 7.4vw, 110px);
  background-color: var(--od-blanc);
}
/* .container10 est un inline-block : sans cela il reste ~13 px sous la grille */
body.home .col3Section .container10 {
  vertical-align: top;
}
body.home .top3Section {
  padding-bottom: clamp(24px, 2.8vw, 42px);
}
body.home section.mainContent .titre3col h2,
body.home section.mainContent .titre3col p,
body.home .titre3col h2,
body.home .titre3col p {
  font-family: var(--od-serif);
  font-size: var(--od-titre-court) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  margin: 0;
}
/* Les vignettes gardent la proportion de la maquette (387 x 591) quelle que
   soit la largeur de l'écran ; le thème imposait une hauteur fixe de 592 px. */
body.home .projetItem {
  min-height: 0;
  aspect-ratio: 387 / 591;
}
body.home .lienNoir a {
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.2;
  padding-bottom: 8px;
}
/* filet fin sous le lien (le thème le dessine à 2 px) */
body.home .lienNoir a::before,
body.home .lienNoir a::after {
  height: 1px;
}

/* --------------------------------------------------------------------------
   6. BLOCS 50/50 — « La firme » et « Notre accompagnement clé en main »
   Fond lin continu, image à fond perdu sur la moitié de l'écran.
   L'alternance gauche/droite existante est conservée.
   -------------------------------------------------------------------------- */
body.home section.mainContent .repeatContainer {
  background-color: var(--od-lin);
  padding: 0 !important;
}
body.home section.mainContent .repeatContainer .fadedContainer {
  padding: 0;
}
body.home section.mainContent .repeatContainer .fadedContainer .fadedBlock {
  align-items: stretch !important;
}

/* Colonne texte */
body.home section.mainContent .repeatContainer .contentDiv {
  display: flex;
  align-items: flex-start;
  padding: var(--od-bloc-y) var(--od-gouttiere);
  font-family: var(--od-serif);
}
body.home section.mainContent .repeatContainer .contentDiv .insideDiv {
  padding: 0 !important;
  width: 100%;
}
/* La cliente a saisi un titre tout en majuscules dans l'admin ;
   la maquette le montre en bas-de-casse. Normalisation typographique
   (à reprendre côté contenu quand elle le souhaitera). */
body.home section.mainContent .repeatContainer .contentDiv h2 {
  text-transform: lowercase;
}
body.home section.mainContent .repeatContainer .contentDiv h2::first-letter {
  text-transform: uppercase;
}

/* Colonne image, à fond perdu */
body.home section.mainContent .repeatContainer .sectionImg {
  position: relative;
  padding: 0 !important;
  min-height: clamp(340px, 69vw, 1024px);
  overflow: hidden;
}
body.home section.mainContent .repeatContainer .sectionImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  margin: 0;
}
body.home section.mainContent .repeatContainer .sectionImg .citation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px var(--od-gouttiere);
  color: var(--od-blanc);
  font-family: var(--od-serif);
  font-style: italic;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

/* --------------------------------------------------------------------------
   7. BANDEAU « VOUS AVEZ UN PROJET EN TÊTE ? »
   -------------------------------------------------------------------------- */
body.home section.mainContent .lastSection {
  background-color: var(--od-brun) !important;
  margin-bottom: 0 !important;
  padding: clamp(54px, 5.9vw, 88px) var(--od-gouttiere) clamp(48px, 5.3vw, 79px);
  text-align: center;
}
body.home section.mainContent .lastSection .contentDiv {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  float: none;
  padding: 0 !important;
  text-align: center;
}
body.home section.mainContent .lastSection {
  color: var(--od-blanc);
}
body.home section.mainContent .lastSection :where(p, li, h2, h3, h4, span, em, strong, a) {
  color: inherit;
}
body.home section.mainContent .lastSection h2,
body.home section.mainContent .lastSection p {
  color: var(--od-blanc);
}
body.home section.mainContent .lastSection h2 {
  margin-bottom: clamp(7px, 0.7vw, 10px);
}
body.home section.mainContent .lastSection > .contentDiv > p > a:only-child {
  margin-top: 9px;
}
/* La colonne image de cette section est vide : on la masque, sauf si une
   image y est ajoutée un jour. (Ignoré par les navigateurs sans :has.) */
body.home section.mainContent .lastSection .col.d-3-5:not(:has(img)) {
  display: none;
}

/* --------------------------------------------------------------------------
   8. ADAPTATIONS MOBILE / TABLETTE
   Le thème fait passer les colonnes en pleine largeur dès 1280 px (classes
   b4-full) : beaucoup trop tôt pour cette maquette, qui tient jusqu'à ~900 px.
   -------------------------------------------------------------------------- */

/* 900 → 1280 px : on garde la mise en page de la maquette */
@media screen and (min-width: 900px) and (max-width: 1280px) {
  body.home section.mainContent .repeatContainer .contentDiv,
  body.home section.mainContent .repeatContainer .sectionImg {
    width: 50% !important;
  }
  /* 3 colonnes de projets, et titre au survol seulement */
  body.home .grid3col {
    grid-template-columns: repeat(3, 1fr);
  }
  body.home .projetItem .overlay {
    opacity: 0;
  }
  body.home .projetItem .overlay:hover {
    opacity: 1;
  }
}

/* sous 900 px : colonnes empilées */
@media screen and (max-width: 899px) {
  body.home section.mainContent .repeatContainer .sectionImg {
    min-height: 0;
    height: clamp(280px, 60vw, 520px);
    padding: 0 !important;
  }
  body.home section.mainContent .repeatContainer .contentDiv {
    padding: clamp(48px, 9vw, 96px) var(--od-gouttiere);
  }
}

@media screen and (max-width: 768px) {
  body.home {
    --od-texte: 16px;
    --od-gouttiere: 24px;
    --od-sous-banniere: 28px; /* médaillon réduit à 75 % : 10,5 px + filet */
  }
  body.home .ornementAccueil {
    width: 120px;
    height: 57px;
    transform: translate(-50%, 18px);
  }
  body.home .col3Section {
    padding: 48px 0 56px;
  }
  body.home .top3Section {
    display: block;
  }
  body.home .top3Section .lienNoir {
    margin-top: 18px;
  }
  body.home .projetItem {
    aspect-ratio: 3 / 4;
  }
}

/* --------------------------------------------------------------------------
   9. APPELS À L'ACTION (ajouts de conversion)
   -------------------------------------------------------------------------- */

/* 9.1 Ligne d'appel dans la bannière — typographie seule, pas de bouton */
body.home .banniereAppel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(26px, 3vw, 44px);
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
}
body.home .banniereAppel a {
  color: var(--od-blanc);
  text-decoration: none;
  transition: opacity 0.25s ease;
}
body.home .banniereAppel a:hover {
  opacity: 0.6;
  color: var(--od-blanc);
}
body.home .banniereAppelLien {
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
}
body.home .banniereAppelTel {
  position: relative;
  opacity: 0.78;
}
/* filet de séparation entre le lien et le téléphone */
body.home .banniereAppelLien + .banniereAppelTel::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(8px, 1.2vw, 17px));
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.5;
}

/* 9.2 Bande de confiance — une ligne typographique, sans cartes ni icônes */
body.home section.mainContent .bandeConfiance {
  background-color: var(--od-blanc);
  padding: 0 0 clamp(48px, 5.4vw, 80px);
}
body.home section.mainContent .bandeConfiance .container10 {
  vertical-align: top;
}
body.home section.mainContent .bandeConfianceListe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: clamp(36px, 4vw, 58px) 0 0;
  border-top: 1px solid #E3DED5;
  list-style: none;
}
body.home section.mainContent .bandeConfianceListe li {
  position: relative;
  flex: 1 1 0;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
body.home section.mainContent .bandeConfianceListe li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(10px, 1.5vw, 22px));
  top: 0.35em;
  bottom: 0.35em;
  width: 1px;
  background: #E3DED5;
}
body.home section.mainContent .bandeConfianceValeur {
  display: block;
  font-family: var(--od-serif);
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.2;
  color: var(--od-encre);
}
body.home section.mainContent .bandeConfianceLibelle {
  display: block;
  margin-top: 10px;
  font-family: var(--od-sans);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B5F56;
}

/* Le thème ajoute un soulignement noir de 2 px sous chaque lien de .contentDiv ;
   il est invisible sur fond brun et double le nôtre ailleurs. */
body.home section.mainContent .contentDiv > p > a:only-child::before,
body.home section.mainContent .contentDiv > p > a:only-child::after,
body.home section.mainContent .insideDiv > p > a:only-child::before,
body.home section.mainContent .insideDiv > p > a:only-child::after,
body.home section.mainContent .ctaSecondaire a::before,
body.home section.mainContent .ctaSecondaire a::after {
  display: none;
}

/* 9.3 Bandeau d'appel : chemins secondaires, plus discrets que le lien principal */
body.home section.mainContent .ctaSecondaire {
  margin-top: clamp(20px, 2.2vw, 32px);
}
body.home section.mainContent .ctaSecondaire p {
  margin: 0 0 8px;
  font-family: var(--od-serif);
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
body.home section.mainContent .ctaSecondaire p:last-child {
  margin-bottom: 0;
}
body.home section.mainContent .ctaSecondaire a {
  /* le thème met tous les liens de .contentDiv en majuscules : on revient au texte courant */
  font-family: var(--od-serif);
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--od-blanc);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.25s ease;
}
body.home section.mainContent .ctaSecondaire a:hover {
  color: var(--od-blanc);
  border-bottom-color: var(--od-blanc);
}

@media screen and (max-width: 768px) {
  body.home section.mainContent .bandeConfianceListe {
    display: block;
    padding-top: 30px;
  }
  body.home section.mainContent .bandeConfianceListe li {
    padding: 18px 0;
    text-align: left;
  }
  body.home section.mainContent .bandeConfianceListe li + li {
    border-top: 1px solid #E3DED5;
  }
  body.home section.mainContent .bandeConfianceListe li + li::before {
    display: none;
  }
  body.home .banniereAppel {
    gap: 14px;
  }
  body.home .banniereAppelLien + .banniereAppelTel::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. UNE AFFAIRE DE FAMILLE
   Photo à fond perdu sur 5/12, récit à la première personne, sur fond brun.
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocFamille {
  display: flex;
  align-items: stretch;
  background-color: var(--od-brun);
  color: var(--od-blanc);
}
/* filet de sécurité : rien ne peut rester en noir sur le fond brun */
body.home section.mainContent .blocFamille :where(p, li, h2, h3, h4, span, em, strong, a) {
  color: inherit;
}
body.home section.mainContent .blocFamilleImage {
  position: relative;
  width: 41.666%;
  min-height: clamp(380px, 46vw, 690px);
  overflow: hidden;
}
body.home section.mainContent .blocFamilleImage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
body.home section.mainContent .blocFamilleTexte {
  display: flex;
  align-items: center;
  width: 58.334%;
  padding: clamp(56px, 7.9vw, 118px) var(--od-gouttiere);
}
body.home section.mainContent .blocFamilleInterieur {
  width: 100%;
  max-width: 560px;
}
body.home section.mainContent .blocFamilleSurtitre {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-family: var(--od-sans);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
body.home section.mainContent .blocFamille h2 {
  margin: 0 0 clamp(18px, 1.8vw, 27px);
  color: var(--od-blanc);
}
body.home section.mainContent .blocFamilleRecit p {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.12vw, 17px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}
body.home section.mainContent .blocFamilleRecit p:last-child {
  margin-bottom: 0;
}
body.home section.mainContent .blocFamilleSignature {
  margin: clamp(26px, 2.6vw, 38px) 0 0;
  font-family: var(--od-serif);
  font-style: italic;
  font-size: clamp(13px, 0.98vw, 15px);
  color: rgba(255, 255, 255, 0.66);
}
body.home section.mainContent .blocFamilleLien {
  margin: clamp(26px, 2.6vw, 38px) 0 0;
}
body.home section.mainContent .blocFamilleLien a {
  display: inline-block;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--od-blanc);
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .blocFamilleLien a:hover {
  opacity: 0.6;
  color: var(--od-blanc);
}

@media screen and (max-width: 899px) {
  body.home section.mainContent .blocFamille {
    display: block;
  }
  /* filet de sécurité : rien ne peut rester en noir sur le fond brun */
body.home section.mainContent .blocFamille :where(p, li, h2, h3, h4, span, em, strong, a) {
  color: inherit;
}
body.home section.mainContent .blocFamilleImage {
    width: 100%;
    min-height: 0;
    height: clamp(300px, 62vw, 520px);
  }
  body.home section.mainContent .blocFamilleTexte {
    width: 100%;
    padding: clamp(48px, 9vw, 96px) var(--od-gouttiere);
  }
}

/* --------------------------------------------------------------------------
   11. NOS SERVICES
   Trois colonnes numérotées, séparées par des filets fins.
   Fonctionne avec ou sans photo : sans image, la section est purement
   typographique.
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocServices {
  background-color: var(--od-blanc);
  padding: clamp(56px, 6.4vw, 95px) 0 clamp(64px, 7.4vw, 110px);
}
body.home section.mainContent .blocServices .container10 {
  vertical-align: top;
}
body.home section.mainContent .blocServicesTitre {
  margin: 0 0 clamp(36px, 4vw, 60px) !important;
  font-family: var(--od-serif);
  font-size: var(--od-titre) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  color: var(--od-encre);
  text-transform: none;
}
body.home section.mainContent .blocServicesListe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 50px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home section.mainContent .blocServicesListe > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* filet vertical entre les colonnes, uniquement quand il n'y a pas d'image */
body.home section.mainContent .blocServicesListe > li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(14px, 1.7vw, 25px));
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #E3DED5;
}
body.home section.mainContent .blocServiceVignette {
  display: block;
  text-decoration: none;
}
body.home section.mainContent .blocServiceImage {
  margin-bottom: clamp(20px, 2.2vw, 30px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
body.home section.mainContent .blocServiceImage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transition: transform 0.6s ease;
}
body.home section.mainContent .blocServiceVignette:hover .blocServiceImage img {
  transform: scale(1.035);
}
/* une colonne illustrée n'a ni numéro ni filet : l'image tient ce rôle */
body.home section.mainContent .blocServicesListe > li.avecImage + li::before,
body.home section.mainContent .blocServicesListe > li + li.avecImage::before {
  display: none;
}
body.home section.mainContent .blocServices h3 a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .blocServices h3 a:hover {
  opacity: 0.6;
  color: inherit;
}
body.home section.mainContent .blocServiceNumero {
  display: block;
  margin-bottom: clamp(10px, 1.1vw, 16px);
  font-family: var(--od-serif);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
  color: #C0B3A2;
}
body.home section.mainContent .blocServices h3 {
  margin: 0 0 clamp(10px, 1.1vw, 15px) !important;
  font-family: var(--od-serif);
  font-size: clamp(19px, 1.65vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: 400;
  color: var(--od-encre);
  text-transform: none;
}
body.home section.mainContent .blocServices li p {
  margin: 0;
  font-size: var(--od-texte);
  line-height: var(--od-interligne);
  color: var(--od-encre);
}
body.home section.mainContent .blocServiceLien {
  /* pousse le lien en bas : les trois colonnes s'alignent quel que soit
     le nombre de lignes de la description */
  align-self: flex-start;
  margin-top: auto;
  padding-top: clamp(16px, 1.7vw, 24px);
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase !important;
  text-decoration: none;
  color: var(--od-encre);
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .blocServiceLien:hover {
  opacity: 0.55;
  color: var(--od-encre);
}

/* --------------------------------------------------------------------------
   12. INSTAGRAM
   Une invitation typographique, pas un fil embarqué : aucun script tiers,
   aucune image qui vieillit toute seule.
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocInstagram {
  background-color: var(--od-lin);
  padding: clamp(56px, 6.4vw, 95px) 0 clamp(48px, 5.4vw, 80px);
  text-align: center;
}
body.home section.mainContent .blocInstagramSurtitre {
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  font-family: var(--od-sans);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #6B5F56;
}
body.home section.mainContent .blocInstagramCompte {
  margin: 0;
  font-family: var(--od-serif);
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.2;
  color: var(--od-encre);
}
body.home section.mainContent .blocInstagramCompte a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .blocInstagramCompte a:hover {
  opacity: 0.6;
  color: inherit;
}
body.home section.mainContent .blocInstagramLien {
  margin: clamp(18px, 1.9vw, 27px) 0 0;
}
body.home section.mainContent .blocInstagramLien a {
  display: inline-block;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--od-encre);
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
}
body.home section.mainContent .blocInstagramImages {
  /* même rangée défilante que les projets : quatre visibles, les autres suivent */
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  gap: 40px;
  margin-top: clamp(40px, 4.6vw, 68px);
  padding: 0 8.333vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.home section.mainContent .blocInstagramImages::-webkit-scrollbar {
  display: none;
}
body.home section.mainContent .blocInstagramImages a {
  display: block;
  flex: 0 0 calc((83.334vw - 80px) / 3);
  aspect-ratio: 387 / 591;
  overflow: hidden;
  scroll-snap-align: start;
}
body.home section.mainContent .blocInstagramImages img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transition: opacity 0.3s ease;
}
body.home section.mainContent .blocInstagramImages a:hover img {
  opacity: 0.82;
}

@media screen and (max-width: 899px) {
  body.home section.mainContent .blocServicesListe {
    grid-template-columns: 1fr;
    gap: clamp(34px, 6vw, 52px);
  }
  body.home section.mainContent .blocServicesListe > li + li::before {
    display: none;
  }
  body.home section.mainContent .blocServicesListe > li + li {
    padding-top: clamp(30px, 5vw, 44px);
    border-top: 1px solid #E3DED5;
  }
  body.home section.mainContent .blocInstagramImages {
    padding: 0 24px;
    gap: 20px;
  }
  body.home section.mainContent .blocInstagramImages a {
    flex-basis: 62vw;
  }
}

/* --------------------------------------------------------------------------
   13. LISTE DES SERVICES DANS UN BLOC 50/50
   Nom en capitales espacées, flèche à droite, filet fin sous chaque ligne.
   -------------------------------------------------------------------------- */
body.home section.mainContent .listeServices {
  margin: clamp(30px, 3.2vw, 46px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(43, 33, 28, 0.22);
}
body.home section.mainContent .listeServices li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(43, 33, 28, 0.22);
}
body.home section.mainContent .listeServices li > a,
body.home section.mainContent .listeServices li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 1.7vw, 24px) 0;
  text-decoration: none;
  color: var(--od-encre);
}
body.home section.mainContent .listeServicesNom {
  font-family: var(--od-sans);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.home section.mainContent .listeServicesFleche {
  flex: 0 0 auto;
  width: clamp(24px, 2.3vw, 34px);
  height: 8px;
  overflow: visible;
  transition: transform 0.35s ease;
}
body.home section.mainContent .listeServices li > a:hover {
  color: var(--od-encre);
  opacity: 0.62;
}
body.home section.mainContent .listeServices li > a:hover .listeServicesFleche {
  transform: translateX(7px);
}
/* le thème transforme tout lien de .contentDiv en étiquette soulignée */
body.home section.mainContent .listeServices a::before,
body.home section.mainContent .listeServices a::after {
  display: none;
}

/* le lien du bloc respire quand il suit la liste des services */
body.home section.mainContent .listeServices + .lienBloc {
  margin-top: clamp(22px, 2.4vw, 34px);
}

/* --------------------------------------------------------------------------
   14. PROJETS RÉCENTS : DÉFILEMENT HORIZONTAL
   Trois projets visibles, les suivants se découvrent en faisant défiler.
   Défilement natif : pas de carrousel, pas de flèches, pas de script.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
  body.home .grid3col {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* déborde des deux côtés : la rangée semble continuer au-delà de l'écran */
    margin-left: -8.333vw;
    padding-left: 8.333vw;
    margin-right: -8.333vw;
    padding-right: 8.333vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.home .grid3col::-webkit-scrollbar {
    display: none;
  }
  body.home .grid3col > * {
    flex: 0 0 calc((83.334vw - 80px) / 3);
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   15. TÉMOIGNAGES
   Photo en portrait, citation en serif italique, attribution en capitales
   espacées. Alternance gauche/droite, aucun encadré.
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocTemoignages {
  background-color: var(--od-blanc);
  padding: clamp(46px, 5vw, 74px) 0 clamp(50px, 5.4vw, 80px);
}
body.home section.mainContent .blocTemoignages .container10 {
  vertical-align: top;
}
body.home section.mainContent .blocTemoignagesTitre {
  margin: 0 0 clamp(28px, 3.2vw, 46px) !important;
  font-family: var(--od-serif);
  font-size: var(--od-titre-court) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  color: var(--od-encre);
  text-transform: none;
}
body.home section.mainContent .blocTemoignagesListe {
  /* un témoignage à la fois, les suivants se découvrent en faisant défiler */
  display: flex;
  gap: clamp(30px, 3.4vw, 52px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0 -8.333vw 0 0;
  padding: 0 8.333vw 0 0;
  list-style: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.home section.mainContent .blocTemoignagesListe::-webkit-scrollbar {
  display: none;
}
body.home section.mainContent .blocTemoignagesListe > li {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 40px;
  align-items: stretch;
  flex: 0 0 83.334vw;
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home section.mainContent .temoignagePhoto {
  /* mêmes dimensions que les vignettes de projets */
  grid-column: 1 / span 4;
  grid-row: 1;
  aspect-ratio: 387 / 591;
  overflow: hidden;
}
body.home section.mainContent .temoignagePhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
body.home section.mainContent .temoignageCitation {
  grid-column: 6 / span 7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}
body.home section.mainContent .temoignageCitation p {
  margin: 0;
  font-family: var(--od-serif);
  font-style: italic;
  font-size: clamp(19px, 1.85vw, 28px);
  line-height: 1.5;
  color: var(--od-encre);
}
body.home section.mainContent .temoignageCitation footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding-top: clamp(16px, 1.8vw, 26px);
  border-top: 1px solid #E3DED5;
  font-family: var(--od-sans);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.home section.mainContent .temoignageAvatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--od-lin);
  font-family: var(--od-serif);
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: #6B5F56;
}
body.home section.mainContent .temoignageAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
body.home section.mainContent .temoignageIdentite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}
body.home section.mainContent .temoignageSource {
  margin-left: auto;
  color: #8C8178;
  letter-spacing: 0.16em;
}
body.home section.mainContent .temoignageNom {
  color: var(--od-encre);
}
body.home section.mainContent .temoignagePrecision {
  color: #6B5F56;
}
/* le paragraphe du lien ne doit pas hériter du style de la citation */
body.home section.mainContent .temoignageCitation .blocTemoignagesLien {
  margin: auto 0 0;
  padding-top: clamp(24px, 2.6vw, 38px);
  font-family: var(--od-sans);
  font-style: normal;
  font-size: var(--od-lien);
  line-height: 1.2;
  text-align: left;
}
body.home section.mainContent .temoignageCitation .blocTemoignagesLien a {
  display: inline-block;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase !important;
  text-decoration: none;
  color: var(--od-encre);
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .temoignageCitation .blocTemoignagesLien a:hover {
  opacity: 0.55;
  color: var(--od-encre);
}

@media screen and (max-width: 899px) {
  body.home section.mainContent .blocTemoignagesListe > li {
    display: block;
    flex-basis: 84vw;
  }
  body.home section.mainContent .temoignagePhoto {
    margin-bottom: clamp(20px, 3.6vw, 30px);
    aspect-ratio: 3 / 2;
    grid-column: auto;
  }
}

/* ==========================================================================
   PIED DE PAGE — ces règles s'appliquent à TOUTES les pages du site.
   La carte Google a été retirée du gabarit ; un lien d'itinéraire discret
   la remplace sous l'adresse.
   ========================================================================== */
#colophon.site-footer {
  background-color: #5B4941;
  border-top: 0;
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, serif;
}
#colophon .container {
  padding-top: clamp(48px, 5.2vw, 78px);
  padding-bottom: clamp(36px, 4vw, 58px) !important;
}
#colophon .pc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(30px, 4vw, 64px);
}
#colophon .pc > .col {
  float: none;
  width: auto;
  max-width: 300px;
}
/* menu à gauche, coordonnées au centre, logo à droite, quelle que soit
   la largeur de l'écran */
#colophon .logoFooter {
  order: 1;
  margin-right: auto;
  margin-left: 0;
}
#colophon .pc > .col:not(:first-child):not(.logoFooter) {
  order: 2;
}
#colophon .pc > .col:first-child {
  order: 3;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
#colophon h4 {
  margin: 0 0 clamp(14px, 1.5vw, 20px) !important;
  padding: 0 !important;
  font-family: "Clash Grotesk", "Montserrat", sans-serif;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
/* seul « Suivez-nous » se détache ; le premier intertitre reste aligné
   avec celui de la colonne Menu */
#colophon .adresse h4 {
  margin-top: clamp(26px, 2.8vw, 40px) !important;
}
#colophon .adresse > h4:first-of-type,
#colophon .pc > .col > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#colophon,
#colophon p,
#colophon li,
#colophon li a,
#colophon #top-menu li a,
#colophon .adresse,
#colophon .adresse a {
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #FFFFFF !important;
}
#colophon a,
#colophon #top-menu li a,
#colophon .adresse a {
  color: #FFFFFF !important;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
#colophon a:hover {
  opacity: 0.6;
  color: #F7F3EE !important;
}
#colophon #top-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
#colophon #top-menu li {
  margin: 0;
  padding: 0 !important;
  line-height: 1.9 !important;
  list-style: none;
}
/* lien d'itinéraire : discret, sous l'adresse */
#colophon .adresse a.lienItineraire,
#colophon .lienItineraire {
  display: inline-block;
  margin-top: 10px;
  font-family: "Clash Grotesk", "Montserrat", sans-serif !important;
  font-size: 11px;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
#colophon .lienItineraire:hover {
  color: #F7F3EE !important;
  border-bottom-color: #F7F3EE;
}
#colophon .social {
  display: flex;
  gap: 18px;
  margin-top: 2px;
}
#colophon .social a .fab {
  font-size: 15px !important;
  color: #FFFFFF !important;
}
#colophon .logoFooter {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  margin-top: 0;
  text-align: left;
}
#colophon .pc > .col:first-child #top-menu {
  text-align: right;
}
#colophon .logoFooter a {
  display: block;
}
#colophon .logoFooter svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 240px !important;
  margin-top: 0 !important;
  color: #F7F3EE;
  fill: currentColor;
}
#colophon .copyright {
  margin-top: clamp(34px, 3.8vw, 56px);
  padding: 18px 8.333%;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  font-family: "Clash Grotesk", "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
#colophon .copyright a {
  color: rgba(255, 255, 255, 0.55);
}

/* mobile et tablette : une seule colonne, tout centré, dans le même ordre
   que sur ordinateur (logo, coordonnées, menu) */
@media screen and (max-width: 899px) {
  #colophon .pc {
    flex-direction: column;
    align-items: center;
    gap: clamp(36px, 9vw, 48px);
  }
  #colophon .pc > .col,
  #colophon .pc > .col:first-child,
  #colophon .logoFooter {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    text-align: center !important;
  }
  #colophon .pc > .col:first-child #top-menu,
  #colophon .adresse,
  #colophon .mentionsConfiance {
    text-align: center !important;
  }
  #colophon .resumeFirme {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #colophon .social {
    justify-content: center;
  }
  #colophon .logoFooter svg {
    max-width: 220px !important;
    margin: 0 auto !important;
  }
  #colophon .copyright {
    text-align: center;
  }
}

/* à partir de la tablette, jamais de retour à la ligne des trois blocs */
@media screen and (min-width: 1100px) {
  #colophon .pc {
    flex-wrap: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Pied de page uniforme (2 oct. 2026) : une seule grille de 12 colonnes,
   tout aligné à gauche et calé en haut. Logo + mentions sur 4 colonnes,
   coordonnées à partir de la 6e, menu sur les 3 dernières. Plus aucun bloc
   centré ou aligné à droite : les intertitres partagent la même ligne.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 600px) {
  #colophon .pc {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 0;
    align-items: start;
    justify-content: normal;
  }
  /* !important : le thème impose des largeurs en pourcentage (d-2-12, b4-1-3…)
     et le bloc tablette plus bas aligne le menu à droite */
  #colophon .pc > .col,
  #colophon .pc > .col:first-child,
  #colophon .pc > .col.logoFooter {
    order: 0;
    flex: none;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
  /* grid-row explicite : sinon le placement automatique renvoie les blocs
     qui précèdent le menu dans l'ordre du DOM sur une deuxième rangée */
  #colophon .pc > .col.logoFooter { grid-column: 1 / span 4; grid-row: 1; }
  #colophon .pc > .col:not(:first-child):not(.logoFooter) { grid-column: 6 / span 3; grid-row: 1; }
  #colophon .pc > .col:first-child { grid-column: 10 / span 3; grid-row: 1; }
  #colophon .pc > .col:first-child #top-menu {
    text-align: left;
  }
  #colophon .logoFooter svg {
    max-width: 240px !important;
  }
  #colophon .resumeFirme {
    max-width: 300px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  #colophon .pc > .col:first-child #top-menu,
  #colophon .adresse,
  #colophon .mentionsConfiance {
    text-align: left !important;
  }
  #colophon .social {
    justify-content: flex-start;
  }
  #colophon .logoFooter svg {
    margin: 0 !important;
  }
}
/* 600 → 1279 px : douze colonnes seraient trop étroites ; trois colonnes
   proportionnelles, même ordre, même alignement */
@media screen and (min-width: 600px) and (max-width: 1279px) {
  #colophon .pc {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr);
    column-gap: clamp(32px, 5vw, 64px);
  }
  #colophon .pc > .col.logoFooter { grid-column: 1; }
  #colophon .pc > .col:not(:first-child):not(.logoFooter) { grid-column: 2; }
  #colophon .pc > .col:first-child { grid-column: 3; }
  #colophon .logoFooter svg {
    max-width: 220px !important;
  }
}

/* (bloc tablette 600 → 899 px retiré le 2 oct. 2026 : la grille uniforme
   ci-dessus couvre maintenant toutes les largeurs à partir de 600 px) */


/* ==========================================================================
   EN-TÊTE — règles globales, appliquées à tout le site.
   Même langage que le reste : capitales espacées, filets fins, aucun relief.
   ========================================================================== */
.menuDesktop .headerBgMenu {
  background-color: #EFEDE7;
}
.menuDesktop .container10 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.theMainMenu .menu li a,
.menuMobile .menu-item a {
  font-family: "Clash Grotesk", "Montserrat", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase !important;
  color: #2B211C !important;
  transition: opacity 0.25s ease;
}
.theMainMenu .menu li a:hover {
  opacity: 0.55;
  color: #2B211C !important;
}
/* chevron des sous-menus : discret */
.menu .menu-item-has-children::after {
  font-size: 8px !important;
  padding-left: 0.7em !important;
  color: #9A8F84 !important;
}
/* panneau déroulant : fond crème, filet fin, pas d'ombre.
   Le parent est une boîte flex centrée (règle plus bas) : sans ancrage, le panneau
   absolu se centrait sur le mot « Nos services » et remontait sous la barre.
   On ancre donc le <li> et on fait descendre le panneau juste sous le lien. */
.theMainMenu .menu > li.menu-item-has-children {
  position: relative;
}
.theMainMenu .menu .sub-menu {
  top: 100%;
  left: 0;
  margin-top: 0;
  /* zone tampon transparente : le survol ne se perd pas entre le lien et le panneau */
  border-top: 10px solid transparent;
  background-color: #FFFFFF !important;
  background-clip: padding-box;
  border-right: 1px solid #E3DED5;
  border-bottom: 1px solid #E3DED5;
  border-left: 1px solid #E3DED5;
  box-shadow: inset 0 1px 0 #E3DED5; /* filet du haut, sous la zone tampon */
  padding: 6px 0 !important;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.theMainMenu .menu li:hover > .sub-menu,
.theMainMenu .menu li:focus-within > .sub-menu {
  transform: translateY(0);
}
.theMainMenu .menu .sub-menu a {
  font-size: 11.5px !important;
  letter-spacing: 0.14em;
  padding: 9px 20px !important;
}
.theMainMenu .menu .sub-menu li:last-child a {
  padding-bottom: 9px !important;
}
/* bouton Contact : aplat charbon, serif italique, comme le titre de la bannière */
.btnGold a,
.menuDesktop .btnGold a {
  padding: 12px 26px !important;
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, serif !important;
  font-style: italic;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2;
  border-radius: 0;
  background-color: var(--od-brun, #5B4941);
  color: #fff !important;
  transition: opacity 0.3s ease;
}
.btnGold a:hover,
.menuDesktop .btnGold a:hover {
  background-color: var(--od-brun, #5B4941) !important;
  color: #fff !important;
  opacity: 0.78;
}
/* sélecteur de langue */
.wpml-ls-legacy-list-horizontal a {
  font-family: "Clash Grotesk", "Montserrat", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em;
  color: #2B211C !important;
}

/* verre dépoli au défilement seulement (demande de la cliente, 6 oct. 2026) :
   la barre est opaque en haut de page, puis devient translucide et floutée,
   avec un filet discret, dès qu'on a défilé */
.menuDesktop .headerBgMenu {
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.menuDesktop.defile .headerBgMenu {
  background-color: rgba(239, 237, 231, 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(43, 33, 28, 0.08);
}
/* repli : sans prise en charge du flou, on garde un fond presque opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menuDesktop.defile .headerBgMenu {
    background-color: rgba(239, 237, 231, 0.97);
  }
}
@media screen and (max-width: 1024px) {
  .menuMobileCtn .logoCtn {
    transition: background-color 0.35s ease;
  }
  .menuMobileCtn.defile .logoCtn {
    background-color: rgba(239, 237, 231, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menuMobileCtn.defile .logoCtn {
      background-color: rgba(239, 237, 231, 0.97);
    }
  }
}

/* répartition de la barre : le menu de gauche porte trois entrées, celui de
   droite deux ; on les espace au lieu de les étirer */
.menuDesktop .gaucheContainer {
  width: 38%;
}
.menuDesktop .droiteContainer {
  width: 22%;
}
.theMainMenu .menu li a {
  white-space: nowrap;
}
@media screen and (max-width: 1440px) {
  .menuDesktop .gaucheContainer {
    width: 40%;
    padding-right: 0.6rem;
  }
  .menuDesktop .droiteContainer {
    width: 20%;
    padding-left: 0.6rem;
  }
}
.menu-menu-gauche-container .menu {
  justify-content: flex-start !important;
  gap: clamp(12px, 1.8vw, 28px);
}
.menu-menu-droite-container .menu {
  justify-content: flex-end !important;
  gap: clamp(12px, 1.8vw, 28px);
}
.menuDesktop .gaucheContainer .wpml-ls-legacy-list-horizontal {
  margin-right: clamp(8px, 1.2vw, 18px);
}
/* le texte du bouton reste blanc malgré la règle de couleur du menu */
.theMainMenu .menu li.btnGold a,
.theMainMenu .menu .btnGold a,
li.btnGold a {
  color: #fff !important;
}

/* Bouton Contact : la règle générale du menu l'emportait sur la police du
   bouton. On la reprend avec la même spécificité. */
.theMainMenu .menu li.btnGold a,
.theMainMenu .menu .btnGold a {
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, serif !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 26px !important;
  line-height: 1.2;
  color: #fff !important;
}

/* logo réellement centré : colonnes latérales de largeur égale */
.menuDesktop .gaucheContainer,
.menuDesktop .droiteContainer {
  width: 30%;
}
@media screen and (max-width: 1440px) {
  .menuDesktop .gaucheContainer,
  .menuDesktop .droiteContainer {
    width: 30%;
  }
}

/* tout sur la même ligne de base, y compris le sélecteur de langue de WPML */
.theMainMenu .menu {
  align-items: center !important;
}
.theMainMenu .menu > li {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.theMainMenu .menu > li > a {
  display: inline-block;
  line-height: 1.2 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.theMainMenu .menu li.wpml-ls-item,
.theMainMenu .menu li.wpml-ls-item > a,
.menuDesktop .wpml-ls-legacy-list-horizontal,
.menuDesktop .wpml-ls-legacy-list-horizontal ul,
.menuDesktop .wpml-ls-legacy-list-horizontal li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.menuDesktop .wpml-ls-legacy-list-horizontal a {
  font-size: 12.5px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* on resserre les entrées autour du logo */
.menuDesktop .gaucheContainer,
.menuDesktop .droiteContainer {
  width: 37%;
}
.menuDesktop .flexThat > .col.d-2-5 {
  width: 26%;
}
.menu-menu-gauche-container .menu {
  justify-content: flex-end !important;
}
.menu-menu-droite-container .menu {
  justify-content: flex-start !important;
}

/* l'ensemble du contenu de la barre est centré comme un seul bloc */
.menuDesktop .flexThat {
  justify-content: center;
  gap: clamp(20px, 3.2vw, 52px);
}
.menuDesktop .flexThat > .col,
.menuDesktop .gaucheContainer,
.menuDesktop .droiteContainer,
.menuDesktop .flexThat > .col.d-2-5 {
  flex: 0 0 auto;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
.menu-menu-gauche-container .menu,
.menu-menu-droite-container .menu {
  width: auto !important;
}
.menuDesktop .imgHeader {
  width: auto;
}

/* --------------------------------------------------------------------------
   16. BANDEAU D'APPEL SUR PHOTO
   Photo pleine largeur sous un voile brun, titre en serif italique :
   le même dispositif que la bannière, en clôture de page.
   -------------------------------------------------------------------------- */
body.home section.mainContent .lastSection.avecFond {
  position: relative;
  overflow: hidden;
  min-height: clamp(400px, 34vw, 540px);
  display: flex;
  align-items: center;
  padding-top: clamp(64px, 6.4vw, 95px);
  padding-bottom: clamp(64px, 6.4vw, 95px);
}
body.home section.mainContent .lastSectionFond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.home section.mainContent .lastSectionFond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
}
body.home section.mainContent .lastSectionFond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(91, 73, 65, 0.76);
}
body.home section.mainContent .lastSection.avecFond > .col,
body.home section.mainContent .lastSection.avecFond > .cb {
  position: relative;
  z-index: 1;
}
body.home section.mainContent .lastSection.avecFond h2 {
  font-style: italic;
}

/* Disposition à trois ancrages, à la manière de la référence :
   entrées groupées au bord gauche, logo centré, entrées au bord droit. */
.menuDesktop .flexThat {
  justify-content: space-between;
  gap: 0;
}
.menuDesktop .gaucheContainer,
.menuDesktop .droiteContainer {
  flex: 0 0 34%;
  width: 34%;
}
.menuDesktop .flexThat > .col.d-2-5 {
  flex: 0 0 32%;
  width: 32%;
}
.menu-menu-gauche-container .menu {
  justify-content: flex-start !important;
  width: 100% !important;
  gap: clamp(12px, 1.8vw, 28px);
}
.menu-menu-droite-container .menu {
  justify-content: flex-end !important;
  width: 100% !important;
  gap: clamp(12px, 1.8vw, 28px);
}
/* le sélecteur de langue ouvre la barre, collé au bord gauche */
.menuDesktop .gaucheContainer .menu > li.wpml-ls-item:first-child {
  margin-right: clamp(6px, 1vw, 14px);
}

/* les entrées se répartissent sur toute la largeur de la barre */
.menu-menu-gauche-container .menu,
.menu-menu-droite-container .menu {
  justify-content: space-between !important;
  gap: clamp(10px, 1.4vw, 22px);
}

/* la règle générale des colonnes l'emportait et les faisait rétrécir */
.menuDesktop .flexThat > .col.gaucheContainer,
.menuDesktop .flexThat > .col.droiteContainer {
  flex: 0 0 34%;
  width: 34%;
}
.menuDesktop .flexThat > .col.d-2-5 {
  flex: 0 0 32%;
  width: 32%;
}

/* Tout le menu dans la même italique que le bouton Contact et le titre de
   la bannière. Clash Grotesk n'ayant pas d'italique dessinée, on passe au
   serif plutôt que de laisser le navigateur pencher les lettres. */
.theMainMenu .menu li a,
.menuDesktop .wpml-ls-legacy-list-horizontal a,
.menuMobile .menu-item a {
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, serif !important;
  font-style: italic !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.theMainMenu .menu .sub-menu a {
  font-size: 15.5px !important;
  letter-spacing: 0 !important;
  padding: 8px 20px !important;
}
.menu .menu-item-has-children::after {
  font-size: 9px !important;
}

/* menu un cran plus grand */
.theMainMenu .menu li a,
.menuDesktop .wpml-ls-legacy-list-horizontal a,
.menuMobile .menu-item a {
  font-size: 19px !important;
}
.theMainMenu .menu .sub-menu a {
  font-size: 17px !important;
  padding: 9px 22px !important;
}
.theMainMenu .menu li.btnGold a,
.theMainMenu .menu .btnGold a {
  font-size: 18px !important;
  padding: 11px 28px !important;
}

/* --------------------------------------------------------------------------
   17. MENTIONS DE CONFIANCE ET BARRE D'APPEL MOBILE (tout le site)
   -------------------------------------------------------------------------- */
/* phrase de présentation sous le logo (champ « Pied de page ») */
#colophon .resumeFirme {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-family: "ACaslon Pro", "Hoefler Text", Garamond, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
}
#colophon .mentionsConfiance {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
#colophon .mentionsConfiance li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  font-family: "Clash Grotesk", "Montserrat", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em;
  line-height: 2 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

/* barre d'appel mobile (Appeler / Planifier une rencontre) : retirée à la
   demande de la cliente le 28 sept. 2026. Le balisage reste dans footer.php ;
   pour la remettre, reprendre cette règle dans l'historique git. */
.barreAppelMobile {
  display: none !important;
}

/* --------------------------------------------------------------------------
   18. MOBILE — les rangées restent défilantes
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body.home .grid3col {
    display: flex !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    margin-right: -8.333vw;
    padding-right: 8.333vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.home .grid3col::-webkit-scrollbar {
    display: none;
  }
  body.home .grid3col > * {
    flex: 0 0 72vw;
    scroll-snap-align: start;
  }
  body.home .projetItem {
    aspect-ratio: 387 / 591;
    min-height: 0;
  }
  body.home section.mainContent .blocInstagramImages {
    gap: 14px;
  }
  body.home section.mainContent .blocInstagramImages a {
    flex-basis: 66vw;
  }
  body.home section.mainContent .blocTemoignagesListe {
    gap: 24px;
  }
  body.home section.mainContent .blocTemoignagesListe > li {
    flex-basis: 84vw;
  }
  body.home section.mainContent .listeServices li > a,
  body.home section.mainContent .listeServices li > span {
    gap: 14px;
  }
  body.home section.mainContent .listeServicesNom {
    font-size: 12px;
  }
}

/* titre des vignettes de projets : même typo que le menu (Caslon
   italique), écrit tel que saisi (le thème le passait en capitales) */
body.home .projetItem .descriptionImage h1,
body.home .projetItem .descriptionImage h2,
body.home .projetItem .descriptionImage h3,
body.home .projetItem .descriptionImage p {
  font-family: var(--od-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 19px !important; /* comme le menu */
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* titre des vignettes de projets : lisible sur une vignette étroite */
@media screen and (max-width: 1280px) {
  body.home .projetItem .descriptionImage h1,
  body.home .projetItem .descriptionImage h2,
  body.home .projetItem .descriptionImage h3,
  body.home .projetItem .descriptionImage p {
    margin: 0 !important;
  }
  body.home .projetItem .descPosition {
    padding: 0 18px !important;
  }
}

/* --------------------------------------------------------------------------
   19. SECTION GALERIE « NOTRE ACCOMPAGNEMENT » (d'après « Ways we can work
   together », alivelyhaus.com)
   Remplace le bloc 50/50 indiqué dans « Affichage » quand la galerie ACF
   contient des photos. Texte à gauche, trois colonnes de photos à droite,
   rognées par la section. À l'apparition, les colonnes glissent lentement :
   celle du milieu descend, les deux autres montent (classe .galerieAnimee
   posée par le script du gabarit ; sans script, tout est déjà en place).
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocGalerie {
  --galerie-h: clamp(640px, 60vw, 900px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(40px, 5.4vw, 88px);
  min-height: var(--galerie-h); /* grandit avec le texte si besoin */
  padding-left: var(--od-gouttiere);
  overflow: hidden;
  background-color: var(--od-lin);
}
body.home section.mainContent .blocGalerieTexte {
  align-self: center;
  padding: clamp(48px, 5vw, 80px) 0;
}
body.home section.mainContent .blocGalerieTitre {
  font-family: var(--od-serif);
  font-size: clamp(34px, 3.7vw, 56px) !important;
  line-height: 1.02 !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--od-encre);
  margin: 0;
}
body.home section.mainContent .blocGalerieTitre em,
body.home section.mainContent .blocGalerieTitre span {
  display: block;
}
body.home section.mainContent .blocGalerieTitre em {
  font-style: italic;
}
body.home section.mainContent .blocGalerie .listeServices,
body.home section.mainContent .blocHistoire .listeServices {
  margin-top: clamp(30px, 3.4vw, 50px);
}
body.home section.mainContent .blocGalerieIntro {
  margin: clamp(26px, 2.8vw, 40px) 0 0;
  max-width: none; /* toute la colonne, comme la liste des services et le récit de l'équipe */
}
body.home section.mainContent .blocGalerieIntro + .blocGalerieIntro {
  margin-top: 1em;
}
body.home section.mainContent .blocGalerieBouton {
  margin: clamp(26px, 2.8vw, 40px) 0 0;
}
body.home section.mainContent .blocGalerieBouton a {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--od-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: var(--od-blanc);
  background-color: var(--od-brun);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
body.home section.mainContent .blocGalerieBouton a:hover {
  color: var(--od-blanc);
  opacity: 0.78;
}
body.home section.mainContent .blocGalerieBouton a::before,
body.home section.mainContent .blocGalerieBouton a::after {
  display: none;
}

/* Trois colonnes de photos, plus hautes que la section. contain: size
   empêche les photos d'imposer leur hauteur : c'est le texte (ou la
   hauteur minimale) qui fixe celle de la section, les photos la remplissent. */
body.home section.mainContent .blocGalerieImages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
  align-self: stretch;
  contain: size;
  overflow: hidden;
}
body.home section.mainContent .blocGalerieColonne {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: calc(var(--galerie-h) * -0.18);
  will-change: transform;
}
body.home section.mainContent .blocGalerieColonne:nth-child(2) {
  margin-top: calc(var(--galerie-h) * -0.32);
}
body.home section.mainContent .blocGalerieColonne img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin: 0;
}

/* Glissement lent à l'apparition */
body.home section.mainContent .blocGalerie.galerieAnimee .blocGalerieColonne {
  transform: translateY(calc(var(--galerie-h) * 0.16));
  transition: transform 20s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.home section.mainContent .blocGalerie.galerieAnimee .blocGalerieColonne:nth-child(2) {
  transform: translateY(calc(var(--galerie-h) * -0.16));
}
body.home section.mainContent .blocGalerie.galerieAnimee .blocGalerieImages {
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.home section.mainContent .blocGalerie.galerieAnimee.enVue .blocGalerieColonne {
  transform: none;
}
body.home section.mainContent .blocGalerie.galerieAnimee.enVue .blocGalerieImages {
  opacity: 1;
}

/* Tablette et mobile : le texte, puis une bande de photos */
@media screen and (max-width: 899px) {
  body.home section.mainContent .blocGalerie {
    --galerie-h: clamp(380px, 90vw, 560px);
    display: block;
    min-height: 0;
    padding: 0;
  }
  body.home section.mainContent .blocGalerieTexte {
    padding: clamp(56px, 10vw, 96px) var(--od-gouttiere) clamp(40px, 7vw, 64px);
  }
  body.home section.mainContent .blocGalerieImages {
    height: var(--galerie-h);
    contain: none;
    overflow: hidden;
    padding: 0 var(--od-gouttiere);
  }
  body.home section.mainContent .blocGalerieColonne {
    margin-top: calc(var(--galerie-h) * -0.2);
  }
  body.home section.mainContent .blocGalerieColonne:nth-child(2) {
    margin-top: calc(var(--galerie-h) * -0.3);
  }
}

/* --------------------------------------------------------------------------
   20. SECTION « HISTOIRE » (remplace le bloc « La firme »)
   Même grille que la section galerie qui suit : le texte s'aligne sur la
   même marge, la photo occupe les deux colonnes de droite et se pose au
   bas de la section, un écart de gouttière au-dessus des photos de la
   galerie. Fond lin continu : les deux sections se lisent d'un seul tenant.
   -------------------------------------------------------------------------- */
body.home section.mainContent .blocHistoire {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(40px, 5.4vw, 88px);
  padding: 0 0 0 var(--od-gouttiere);
  background-color: var(--od-lin);
}
body.home section.mainContent .blocHistoireTexte {
  align-self: center;
  padding: clamp(80px, 9vw, 150px) 0;
}
body.home section.mainContent .blocHistoireSurtitre {
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 2vw, 28px);
}
body.home section.mainContent .blocHistoireTitre {
  font-family: var(--od-serif);
  font-size: clamp(34px, 3.7vw, 56px) !important;
  line-height: 1.02 !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--od-encre);
  margin: 0;
}
body.home section.mainContent .blocHistoireTitre em,
body.home section.mainContent .blocHistoireTitre span {
  display: block;
}
body.home section.mainContent .blocHistoireTitre em {
  font-style: italic;
}
body.home section.mainContent .blocHistoireRecit {
  margin-top: clamp(28px, 3vw, 44px);
  max-width: none;
}
body.home section.mainContent .blocHistoireRecit p {
  margin: 0 0 1.1em;
}
body.home section.mainContent .blocHistoireSignature {
  font-family: "Printed Moments", var(--od-serif);
  font-style: normal;
  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.5;
  /* les grandes boucles débordent de la ligne : on leur laisse de l'air */
  margin: clamp(20px, 2vw, 30px) 0 0;
  padding-bottom: clamp(10px, 1vw, 16px); /* une marge fusionnerait avec celle du lien */
}
body.home section.mainContent .blocHistoireLien {
  margin: clamp(26px, 2.8vw, 40px) 0 0;
}
body.home section.mainContent .blocHistoireLien a {
  display: inline-block;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--od-encre);
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
body.home section.mainContent .blocHistoireLien a:hover {
  color: var(--od-encre);
  opacity: 0.55;
}
body.home section.mainContent .blocHistoireLien a::before,
body.home section.mainContent .blocHistoireLien a::after {
  display: none;
}
/* la photo prend toute la largeur des photos de la galerie et toute la
   hauteur de la section ; contain: size : c'est le texte qui fixe la
   hauteur, la photo la remplit */
body.home section.mainContent .blocHistoireImage {
  position: relative;
  align-self: stretch;
  contain: size;
}
body.home section.mainContent .blocHistoireImage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  margin: 0;
}
/* Section accompagnement : photo à gauche, texte à droite. La section
   équipe qui suit garde le texte à gauche : les deux alternent. */
@media screen and (min-width: 900px) {
  body.home section.mainContent .blocHistoire.blocSectionAccompagnement {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    padding-left: 0;
    padding-right: var(--od-gouttiere);
  }
  body.home section.mainContent .blocSectionAccompagnement .blocHistoireImage {
    order: -1;
  }
  /* Les deux sections ont la même hauteur (celle du texte le plus long) :
     leurs photos font ainsi exactement la même taille. */
  body.home section.mainContent .repeatContainer:has(> .blocSectionAccompagnement):has(> .blocSectionHistoire) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }
}

@media screen and (max-width: 899px) {
  body.home section.mainContent .blocHistoire {
    display: block;
    padding: 0;
  }
  body.home section.mainContent .blocHistoireTexte {
    padding: clamp(64px, 12vw, 110px) var(--od-gouttiere) clamp(40px, 7vw, 64px);
  }
  body.home section.mainContent .blocHistoireImage {
    contain: none;
    margin: 0 var(--od-gouttiere);
    aspect-ratio: 1080 / 1320;
  }
}

/* --------------------------------------------------------------------------
   21. SECTIONS ACCOMPAGNEMENT ET ÉQUIPE : LA HAUTEUR DE L'ÉCRAN, PAS PLUS
   Sur ordinateur, chaque section occupe toute la hauteur de l'écran ; le
   menu, fixe, passe par-dessus son haut. Les espacements verticaux suivent la hauteur de l'écran pour
   que le texte y tienne ; sur un écran très bas, la section grandit plutôt
   que de couper le texte.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 900px) {
  body.home section.mainContent .blocGalerie,
  body.home section.mainContent .blocHistoire {
    --galerie-h: 100vh;
    --galerie-h: max(560px, 100svh);
    height: auto;
    min-height: var(--galerie-h);
  }
  /* le menu (96 px) passe par-dessus le haut de la section */
  body.home section.mainContent .blocGalerieTexte,
  body.home section.mainContent .blocHistoireTexte {
    padding: calc(96px + clamp(16px, 3vh, 40px)) 0 clamp(32px, 6vh, 72px);
  }
  body.home section.mainContent .blocGalerieTitre,
  body.home section.mainContent .blocHistoireTitre {
    font-size: clamp(32px, min(3.7vw, 6vh), 56px) !important;
  }
  body.home section.mainContent .blocGalerie .listeServices,
  body.home section.mainContent .blocHistoire .listeServices {
    margin-top: clamp(20px, 3.4vh, 44px);
  }
  body.home section.mainContent .blocGalerie .listeServices li > a,
  body.home section.mainContent .blocGalerie .listeServices li > span,
  body.home section.mainContent .blocHistoire .listeServices li > a,
  body.home section.mainContent .blocHistoire .listeServices li > span {
    padding: clamp(11px, 1.9vh, 22px) 0;
  }
  body.home section.mainContent .blocGalerieIntro,
  body.home section.mainContent .blocGalerieBouton,
  body.home section.mainContent .blocHistoireLien {
    margin-top: clamp(16px, 3vh, 36px);
  }
  body.home section.mainContent .blocHistoireSurtitre {
    margin-bottom: clamp(12px, 2vh, 24px);
  }
  body.home section.mainContent .blocHistoireRecit {
    margin-top: clamp(16px, 3vh, 40px);
  }
  body.home section.mainContent .blocHistoireRecit p {
    line-height: 1.7;
    margin-bottom: 0.9em;
  }
}

/* --------------------------------------------------------------------------
   Menu mobile, bloc « Contactez-nous / Suivez-nous » (29 oct. 2026) : polices
   du site (étiquettes en Clash, coordonnées en Caslon comme les entrées du
   menu) au lieu de Roboto. Les coordonnées gardent l'allure de texte (choix
   de Fanny) mais restent cliquables et suivies dans GA4 (itinéraire, courriel,
   téléphone).
   -------------------------------------------------------------------------- */
.menuMobile .top-bar .adresse {
  font-family: var(--od-serif);
  font-size: 18px;
  line-height: 1.5;
  color: #2b2724;
}
.menuMobile .top-bar .adresse h4 {
  margin: 0 0 12px;
  font-family: var(--od-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.6;
}
.menuMobile .top-bar .adresse p + h4 { margin-top: 28px; }
.menuMobile .top-bar .adresse p {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.menuMobile .top-bar .adresse p a {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Menu mobile, retouches (3 nov. 2026)
   - bloc de coordonnées séparé du menu par un filet fin, texte un cran plus
     petit : il ne concurrence plus les entrées du menu.
   - adresse postale : texte un peu adouci, suivie d'un lien « Itinéraire »
     en petites capitales soulignées, comme dans le pied de page. Le lien
     est ajouté en CSS (le champ ACF « adresse » reste intact) ; on cible le
     lien Google Maps plutôt que « le premier paragraphe », pour ne pas
     dépendre de l'ordre du champ.
   - flèches des sous-menus alignées sur le X de fermeture (bord droit).
   - icônes sociales dans la couleur du texte, comme les étiquettes.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .menuMobile .top-bar {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(43, 33, 28, 0.14);
  }
  .menuMobile .top-bar .adresse {
    font-size: 16px;
    line-height: 1.55;
  }
  .menuMobile .top-bar .adresse p:has(a[href*="maps"]) {
    margin-bottom: 18px;
  }
  .menuMobile .top-bar .adresse a[href*="maps"] {
    display: inline-block;
    color: rgba(43, 39, 36, 0.78) !important;
  }
  .menuMobile .top-bar .adresse a[href*="maps"]::after {
    content: "Itinéraire";
    display: table;
    margin-top: 8px;
    padding-bottom: 3px;
    font-family: var(--od-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #2b2724;
    border-bottom: 1px solid rgba(43, 33, 28, 0.35);
  }
  html[lang^="en"] .menuMobile .top-bar .adresse a[href*="maps"]::after {
    content: "Directions";
  }
  .menuMobile .top-bar .adresse p + h4 {
    margin-top: 24px;
  }
  .menuMobile .menu-item a {
    padding-right: 0;
  }
  .menuMobile .chevron-toggle {
    margin-right: -0.5em; /* le padding garde une zone de toucher confortable */
  }
  .menuMobile .top-bar .social {
    display: flex;
    gap: 18px;
  }
  .menuMobile .top-bar .social a i {
    color: inherit !important;
    margin: 0 !important;
  }
  .menuMobile .top-bar .social a {
    color: #2b2724 !important;
    opacity: 0.6;
    transition: opacity 0.25s ease;
  }
  .menuMobile .top-bar .social a:hover {
    opacity: 1;
  }
  .menuMobile .top-bar .wpml-ls-legacy-list-horizontal {
    margin-top: 6px;
  }
}

/* bouton « retour en haut » (grosse flèche noire au défilement) : masqué sur tout
   le site à la demande de Fanny (3 nov. 2026). Supprimer ce bloc pour le remettre. */
#button,
#button.show {
  display: none !important;
}

/* liens internes ajoutés dans les textes (inc/liens-internes.php, 3 nov. 2026) :
   aucune couleur, aucun gras, aucun fond ; un soulignement très pâle qui se
   précise à peine au survol. Le lien se lit comme le reste de la phrase. */
#content a.lienInterne,
#content a.lienInterne:visited {
  color: inherit !important;
  font: inherit !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(43, 33, 28, 0.22) !important;
  /* le filet suit la couleur du texte : il reste visible sur les fonds sombres */
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent) !important;
  transition: text-decoration-color 0.25s ease;
}
#content a.lienInterne:hover,
#content a.lienInterne:focus-visible {
  color: inherit !important;
  text-decoration-color: rgba(43, 33, 28, 0.6) !important;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent) !important;
}