/* ==========================================================================
   GRM FRANCE — Feuille de style unique
   1. Tokens        2. Reset      3. Typographie   4. Layout
   5. Navigation    6. Hero       7. Composants    8. Sections
   9. Formulaire   10. Footer    11. Responsive
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --ink:        #1a1a1a;
  --ink-soft:   #55554f;
  --muted:      #8a8a83;
  --white:      #ffffff;
  --sand:       #f5f5f3;   /* sections alternées */
  --sand-deep:  #ebebe7;   /* placeholders photo */
  --line:       #e4e4df;

  --fd: 'Cormorant Garamond', serif;   /* font display : titres */
  --fb: 'Montserrat', sans-serif;      /* font body   : texte  */

  /* Barre = 56px de contenu + 8px de respiration en haut et en bas. */
  --nav-h: 72px;
  --nav-pad-y: 8px;
  --nav-gutter-l: 10px;                      /* logo au ras du bord gauche */
  --nav-gutter-r: clamp(16px, 2vw, 28px);
  --whatsapp: #25d366;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1400px;
  --section-y: clamp(40px, 4.5vw, 60px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--fb);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

body.is-locked { overflow: hidden; }

/* 3. TYPOGRAPHIE ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--fd);
  font-weight: 400;   /* Cormorant Garamond Regular */
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(36px, 4.8vw, 68px);  line-height: 1.12; }
h2 { font-size: clamp(30px, 4.1vw, 56px);  line-height: 1.12; }
h3 { font-size: clamp(23px, 2.5vw, 34px);  line-height: 1.25; }
h4 { font-size: clamp(19px, 1.6vw, 23px);  line-height: 1.35; }

p { margin: 0 0 1.35em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }
h1 + p, h2 + p, h3 + p { margin-top: 22px; }

.lead {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 62ch;
}
.lead--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
/* Filet décoratif retiré : les eyebrows sont en texte seul. */
.eyebrow::before { display: none; }
.eyebrow--center { justify-content: center; }

/* 4. LAYOUT ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 900px; }

.section { padding: var(--section-y) 0; }
.section--sand { background: var(--sand); }
.section--tight { padding: clamp(32px, 3.5vw, 46px) 0; }

.section-head { max-width: 760px; margin-bottom: clamp(26px, 3vw, 38px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 18px; }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }

.text-center { text-align: center; }
.mt-l { margin-top: clamp(22px, 2.4vw, 34px); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 5. NAVIGATION ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  padding-top: var(--nav-pad-y);
  padding-bottom: var(--nav-pad-y);
  background: var(--white);
  /* Filet permanent : la barre est opaque sur toutes les pages, il marque la
     limite avec le contenu. Il se renforce légèrement au scroll. */
  border-bottom: 1px solid #e8e8e8;
  transition: border-color 0.4s var(--ease);
}
/* Au scroll : seul le filet apparaît, la hauteur ne bouge plus. */
.nav.is-scrolled { border-bottom-color: var(--line); height: var(--nav-h); }

/* space-evenly répartit l'espace libre en parts égales : avant le logo,
   entre le logo et les liens, entre les liens et WhatsApp, et après WhatsApp.
   Le logo se retrouve donc à mi-chemin du bord et du premier lien, et l'écart
   « CONTACT → NOUS ÉCRIRE » vaut exactement celui de « logo → L'ENTREPRISE ».
   L'élément porte aussi .container, plafonné à 1400px et centré : sur un
   écran plus large, tout serait rétréci et recentré. */
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: none;
  padding: 0;
  gap: 0;
}

.nav__logo { display: flex; min-width: 0; }
/* Hauteur et largeur en auto, plafonnées : quand le menu élargi resserre la
   colonne du logo, celui-ci se réduit proportionnellement au lieu d'être
   écrasé horizontalement par le max-width du reset. */
.nav__logo img {
  height: auto;
  width: auto;
  max-height: clamp(26px, 2.4vw, 34px);
  max-width: 100%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 44px);
}

.nav__link {
  position: relative;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}
.nav__wa svg { flex: none; color: var(--whatsapp); }
.nav__wa:hover { color: var(--whatsapp); }

.nav__burger {
  display: none;
  width: 30px;
  height: 18px;
  position: relative;
  flex: none;
}
.nav__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.25s;
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 50%; }
.nav__burger span:nth-child(3) { top: 100%; }
.nav__burger.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.nav-panel.is-open { opacity: 1; visibility: visible; }
.nav-panel a {
  font-family: var(--fd);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.9;
  color: var(--ink);
}
.nav-panel__meta {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-panel__meta a { font-family: var(--fb); font-size: 11px; line-height: 2.2; }

/* 6. HERO ------------------------------------------------------------------ */
/* Pas de hauteur imposée : la vidéo dicte celle du hero.
   Les deux enfants occupent la même cellule de grille, donc ils se
   superposent et la rangée prend la hauteur du plus grand — si le cadre
   dépasse la vidéo sur un écran étroit, le hero s'agrandit au lieu de rogner. */
.hero {
  position: relative;
  display: grid;
  padding-top: var(--nav-h);
  background: var(--white);
  overflow: hidden;
}
.hero > .hero__media,
.hero > .hero__content { grid-area: 1 / 1; }

/* Mention reprise de la vidéo, sous la barre de navigation */
.hero__badge {
  position: absolute;
  top: 100px;
  right: 40px;
  z-index: 3;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Fond : vidéo plein écran */
/* Fond : vidéo affichée entière, non recadrée, sur fond blanc.
   Les bandes se fondent ainsi avec la nav et le reste de la page. */
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
/* height: auto — la vidéo s'affiche à sa proportion naturelle, donc
   ni recadrée ni entourée de bandes. */
.hero__video {
  position: relative;
  width: 100%;
  height: auto;
  max-width: none;   /* aucune contrainte ne doit réduire le rendu */
  max-height: none;
  object-fit: contain;
  display: block;
  /* Assombrissement porté par la vidéo seule : un voile sur le conteneur
     grisirait aussi les bandes blanches. */
  filter: brightness(0.9);
}

.hero__content { position: relative; z-index: 2; align-self: center; }

/* Cadre blanc semi-transparent, centré et compact :
   il doit laisser voir la vidéo tout autour. */
.hero__card {
  max-width: 580px;
  margin: 0 auto;
  padding: 30px 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 70px rgba(26, 26, 26, 0.07);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* Couleurs forcées : à 75% d'opacité le fond ne porte plus assez le texte
   pour se reposer sur les gris du reste du site. */
/* Taille restaurée : le retrait à 2.25rem ne compensait que la chasse
   large de Playfair, revenue à Cormorant il n'a plus lieu d'être. */
.hero__card h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #1a1a1a;
}
.hero__card .lead {
  font-size: 0.9rem;
  color: #444444;
  margin-left: auto;
  margin-right: auto;
}
/* 24px de padding latéral au lieu de 30 : à 580px de cadre, c'est ce qui
   permet aux deux boutons de tenir sur une seule ligne. */
.hero__card .btn {
  font-size: 0.65rem;
  padding: 14px 24px;
  white-space: nowrap;
}

.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

/* Hero secondaire (pages intérieures) */
.page-head {
  padding: calc(var(--nav-h) + clamp(40px, 4.5vw, 60px)) 0 clamp(30px, 3.5vw, 44px);
  background: var(--white);
}
.page-head h1 { max-width: 16ch; }
/* En-tête de L'Entreprise : un seul mot, centré. */
.entreprise-hero {
  padding: 120px 60px 40px;
  text-align: center;
  background: #fff;
}
.entreprise-hero__title,
.direction-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
}
/* Présentation : portrait à gauche, texte à droite. */
.entreprise-about {
  background: #fff;
  padding: 20px 60px 80px;
}
.entreprise-about__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}
.entreprise-about__photo {
  flex: 0 0 42%;
}
.entreprise-about__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.entreprise-about__text {
  flex: 1;
  padding-top: 10px;
}
.entreprise-about__text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 0 0 24px;
}
.entreprise-about__text p:last-child { margin-bottom: 0; }
.entreprise-about__text strong {
  font-weight: 500;
}
.entreprise-about__intro {
  font-size: 17px;
}

/* Section des dirigeants : fond sable, comme la présentation. */
.direction-section { background: #f5f5f3; }

/* Portraits de la direction : côte à côte, centrés. */
.direction-portraits {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: 50px;
  padding: 0 60px;
}
.direction-card {
  text-align: center;
  max-width: 320px;
}
.direction-card__photo {
  width: 160px;
  height: auto;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto;
}
.direction-card__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.direction-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 20px 0 0;
}
.direction-card__role {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-top: 8px;
}
.direction-card__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  max-width: 300px;
  text-align: center;
  margin: 14px auto 0;
}
.direction-card__contact {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #1a1a1a;
  margin-top: 12px;
  transition: opacity 0.3s var(--ease);
}
.direction-card__contact + .direction-card__contact { margin-top: 6px; }
.direction-card__contact:hover { opacity: 0.6; }
.page-head p { margin-top: 26px; max-width: 60ch; }

/* 7. COMPOSANTS ------------------------------------------------------------ */

/* — Placeholder photo — */
.ph {
  position: relative;
  width: 100%;
  background: var(--sand-deep);
  overflow: hidden;
}
.ph::after {
  content: "Photo à venir";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a6a6a0;
}
/* En pleine page (hero), le libellé se range en bas à droite
   pour ne pas passer derrière le titre. */
.ph--fill  { position: absolute; inset: 0; }
.ph--fill::after {
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 26px) var(--gutter) 0 0;
}
.ph--16x9  { aspect-ratio: 16 / 9; }
.ph--4x3   { aspect-ratio: 4 / 3; }
.ph--1x1   { aspect-ratio: 1 / 1; }
.ph--3x4   { aspect-ratio: 3 / 4; }
.ph--2x3   { aspect-ratio: 2 / 3; }

/* — Boutons — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 34px;
  border: 1px solid var(--ink);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.btn svg { transition: transform 0.4s var(--ease); }
.btn:hover { background: var(--ink); color: var(--white); }
.btn:hover svg { transform: translateX(5px); }

.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

/* Bouton blanc plein : inverse du bouton noir. */
.btn--white {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #1a1a1a;
}
.btn--white:hover {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

/* Bouton plein : noir au repos, blanc cerclé de noir au survol. */
.btn--solid {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}
.btn--solid:hover {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #1a1a1a;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.link-arrow svg { transition: transform 0.4s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Le bouton porte lui-même l'écart avec la section suivante. */
#realisations { padding-bottom: 0; margin-bottom: 0; }

/* Bouton sous la grille des réalisations : classe dédiée, le .link-arrow
   souligné reste utilisé ailleurs sur la page. */
.works-cta {
  text-align: center;
  /* Écart identique au-dessus et en dessous du bouton ; annule le .mt-l
     porté par le même élément. */
  margin: 50px auto;
}
.works-cta__btn {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 36px;
  text-decoration: none;
  border: none;
  transition: all 0.3s;
}
.works-cta__btn:hover {
  background: #fff;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* — Carte réalisation — */
/* Le visuel porte déjà son titre, son type et sa localisation : le lien ne
   contient que l'image, sans bloc de texte ni surimpression. */
.work {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.work img {
  width: 100%;
  height: auto;          /* proportions d'origine conservées */
  transition: transform 0.8s var(--ease);
}
.work:hover img { transform: scale(1.03); }

/* Carrousel des réalisations : quatre visuels sur une ligne, de bord à bord.
   Piste en flex plutôt qu'en grille, pour que le nombre de cartes puisse
   grandir sans toucher au CSS — les cartes en trop débordent et défilent. */
.works-carousel { position: relative; }
.works-grid {
  display: flex;
  gap: 12px;
  padding-left: 40px;
  padding-right: 40px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 40px;
  scroll-behavior: smooth;
}
.works-grid .work {
  /* Quatre cartes visibles : la largeur du contenu moins les trois gouttières. */
  flex: 0 0 calc((100% - 36px) / 4);
  scroll-snap-align: start;
}

/* Flèches de navigation : cercles blancs discrets, révélés au survol de la
   section (et à la tabulation clavier). */
.works-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease),
              background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.works-nav--prev { left: 14px; }
.works-nav--next { right: 14px; }
#realisations:hover .works-nav,
.works-nav:focus-visible {
  opacity: 1;
  visibility: visible;
}
.works-nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
/* Sans survol possible (tactile), les flèches restent visibles. */
@media (hover: none) {
  .works-nav { opacity: 1; visibility: visible; }
}
.works-grid img {
  min-height: 450px;
  object-fit: cover;
  /* Cadrage à gauche : sous 1270px la colonne devient trop étroite pour la
     hauteur imposée, et un rognage centré mangerait le texte incrusté,
     qui est aligné à gauche. */
  object-position: left center;
  border-radius: 6px;
}

.work__cat {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.work__loc { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* — Avant / Après — */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba__item { position: relative; }
.ba__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--white);
  padding: 7px 14px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* — Projet avant/après (page Réalisations) — */
.project + .project { margin-top: clamp(38px, 4vw, 56px); }
.project__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-top: 26px;
}
.project__title {
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 10px 0 6px;
}
.project__meta p { font-size: 14px; }

/* — Section Notre histoire : composition éditoriale texte / image — */
.histoire {
  background: var(--sand);                 /* #f5f5f3 */
  margin-top: 0;
  padding-top: 50px;
}

/* La grille sort du .container : la colonne image va jusqu'au bord droit
   de la fenêtre. Le texte, lui, retrouve la gouttière du reste du site. */
.histoire__grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.histoire__text {
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}

/* Même traitement que tous les titres du site : Cormorant Garamond, romain. */
.histoire__title {
  font-family: var(--fd);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
}

.histoire__text p {
  font-family: var(--fb);
  font-size: 1rem;
  line-height: 1.9;
  color: #1a1a1a;
}

/* Pull-quote : les guillemets sont dans le texte, donc au même corps,
   même italique et même couleur que la citation. */
.histoire__quote {
  position: relative;
  margin: 30px 0;
  padding-left: 30px;
  font-family: var(--fd);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: #1a1a1a;
}
/* Les guillemets sont dans le texte, pas en pseudo-éléments : ils héritent
   ainsi du corps, de l'italique et de la couleur de la citation. */

/* Image à fond perdu à droite : aucune marge, elle touche le bord de l'écran.
   Pas d'ombre portée, le PNG est détouré sur fond transparent. */
.histoire__media { margin: 0; }
.histoire__media img {
  display: block;
  width: 100%;
  min-height: 550px;
  object-fit: cover;
  border-radius: 0;
}

/* — Portrait (page Entreprise) — */
.person__name { margin: 24px 0 6px; }
.person__role {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.person p { font-size: 14px; }

/* — Carte service — */
.service {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.service__num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 18px;
}
.service h3 { margin-bottom: 14px; }
.service p { font-size: 14px; }

/* — Liste service détaillée (page Services) — */
.service-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--line);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__num {
  font-family: var(--fd);
  font-size: 26px;
  color: var(--muted);
  line-height: 1;
  padding-top: 6px;
}
.service-row ul { margin-top: 20px; }
.service-row li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 2;
}
.service-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--muted);
}

/* — Notre book : la plaquette en fond, le texte dans le vide de droite — */
.book-fresque {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
}
.book-fresque__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.book-fresque__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  display: block;
}
.book-fresque__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 80px;
  padding-left: 20px;
}
.book-fresque__surtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1a1a;
}
.book-fresque__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 14px 0 0;
  line-height: 1.3;
}
.book-fresque__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  margin: 16px 0 0;
}
.book-fresque__btn {
  display: inline-block;
  margin-top: 24px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-start;
}
.book-fresque__btn:hover {
  background: #fff;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* — Liseuse du book, en surimpression — */
.viewer-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
}
.viewer-overlay__backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.94);
  cursor: pointer;
}
.viewer-overlay__container {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  /* Laisse passer les clics vers le fond : seuls les éléments utiles les
     captent, sinon on ne peut plus fermer en cliquant à côté du book. */
  pointer-events: none;
}
.viewer-overlay__top-bar,
.viewer-overlay__arrow,
.viewer-overlay__bottom,
#flipbook { pointer-events: auto; }
.viewer-overlay__top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  flex-shrink: 0;
}
.viewer-overlay__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.viewer-overlay__download {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 10px 24px;
  transition: all 0.3s;
}
.viewer-overlay__download:hover {
  background: #fff;
  color: #1a1a1a;
}
.viewer-overlay__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.viewer-overlay__close:hover { opacity: 1; }
.viewer-overlay__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.viewer-overlay__arrow {
  background: none;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}
.viewer-overlay__arrow:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
#flipbook {
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  position: relative;
}
/* Couverture et dos s'affichent seuls sur une moitié du livre : on décale
   d'un quart de largeur pour les ramener au centre de l'écran. */
#flipbook { transition: transform 0.6s ease; }
#flipbook.is-cover { transform: translateX(-25%); }
#flipbook.is-back  { transform: translateX(25%); }
#flipbook .page {
  background: #fff;
  overflow: hidden;
}
#flipbook .page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.viewer-overlay__bottom {
  padding: 16px 0 24px;
  text-align: center;
  flex-shrink: 0;
}
.viewer-overlay__page-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* — Services : cartes illustrées — */
.services-section {
  background: #f5f5f3;
  padding: 30px 60px 80px;
}
.services-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.services-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 400;
  color: #1a1a1a;
  /* le sur-titre a disparu : le titre part du padding de la section */
  margin: 0;
}
.services-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 16px 0 0;
  max-width: 600px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}
.service-card {
  display: block;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
}
.service-card__img-wrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card__img {
  transform: scale(1.05);
}
.service-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
  /* reprend les 24 px que portait le numéro, retiré depuis */
  padding: 24px 28px 0;
}
.service-card__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  margin: 0;
  padding: 12px 28px 28px;
}
/* Flèches du carrousel des services : uniquement sur mobile, où la grille
   devient une piste horizontale. */
.services-carousel { position: relative; }
.services-nav { display: none; }

.services-btn-wrapper {
  text-align: center;
  margin-top: 50px;
}
.services-btn {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 36px;
  text-decoration: none;
  transition: all 0.3s;
}
.services-btn:hover {
  background: #fff;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* — Notre expertise : blocs texte / image en alternance — */
.expertise {
  background: #ffffff;
  /* La section « qui sommes-nous » finit déjà sur 80 px : 40 px suffisent ici. */
  padding: 40px 80px 100px;
}
.expertise__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.expertise__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #1a1a1a;
  margin: 0;
}
.expertise__row {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-top: 80px;
}
/* Un bloc sur deux inverse l'ordre : l'image passe à gauche. */
.expertise__row--reverse { flex-direction: row-reverse; }
.expertise__text { width: 50%; }
.expertise__media {
  width: 50%;
}
.expertise__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.expertise__surtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 20px;
}
.expertise__body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  max-width: 520px;
  margin: 0;
}
.expertise__langues {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #555;
  margin: 30px 0 0;
}
.expertise__separator {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 80px 0;
}

/* — Notre histoire : texte à gauche, collage à fond perdu à droite — */
.histoire-story {
  background: #f8f5f2;
  padding: 40px 80px;
  margin: 0;
}
.histoire-story__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.histoire-story__text {
  width: 40%;
  padding-left: 60px;
  align-self: center;
}
.histoire-story__media {
  width: 60%;
  padding: 0;
  margin: 0;
}
.histoire-story__media img {
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 0;
}
.histoire-story__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: left;
  color: #1a1a1a;
  margin: 0 0 30px;
}
.histoire-story__text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 0 0 22px;
}
.histoire-story__text p:last-child { margin-bottom: 0; }

/* — Estimation travaux — */
.estim-hero {
  background: #ffffff;
  padding: 140px 60px 0;
  text-align: center;
}
.estim-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.estim-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #555;
  margin: 20px 0 0;
}

/* Deux colonnes texte / visuel, alternées d'une section à l'autre. */
.estim-block {
  background: #ffffff;
  padding: 80px 60px;
}
.estim-block--sand { background: #f5f5f3; }
.estim-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.estim-block__inner--reverse { flex-direction: row-reverse; }
.estim-block__text { width: 60%; }
.estim-block__media {
  width: 40%;
}
.estim-block__img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.estim-block__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
}
.estim-block__lead {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #555;
  margin: 14px 0 0;
}
.estim-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.estim-list__item {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 2;
  color: #1a1a1a;
}
/* Puce en point médian, hors du texte : les lignes qui passent à la ligne
   restent alignées. La liste de questions garde ses lignes nues. */
.estim-list:not(.estim-list--questions) .estim-list__item {
  position: relative;
  padding-left: 18px;
}
.estim-list:not(.estim-list--questions) .estim-list__item::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: #1a1a1a;
}
.estim-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: #555;
  margin: 24px 0 0;
}

/* Prix au m² */
.estim-prices {
  background: #ffffff;
  padding: 80px 60px;
}
.estim-prices__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.estim-prices__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
}
.estim-prices__lead {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #555;
  max-width: 700px;
  margin: 18px auto 0;
}
.estim-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
  text-align: left;
}
.estim-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 40px;
}
.estim-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
}
.estim-card__price {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 14px 0 0;
}
.estim-card__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  margin: 16px 0 0;
}

/* Titre du CTA d'Estimation travaux : tenu sur une seule ligne. */
.cta__title--nowrap {
  font-size: 42px;
  white-space: nowrap;
}

/* — Demande de devis — */
.devis-hero {
  background: #ffffff;
  padding: 140px 60px 0;
  text-align: center;
}
.devis-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.devis-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  max-width: 600px;
  margin: 20px auto 0;
}
.devis {
  background: #ffffff;
  padding: 80px;
}
.devis__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.devis__form { width: 60%; }

/* Champs : filet bas seul, pour rester dans la sobriété du site. */
.devis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.devis-field__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.devis-field__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 12px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  background: transparent;
  transition: border-color 0.3s var(--ease);
}
.devis-field__input:focus {
  outline: none;
  border-bottom-color: #1a1a1a;
}
.devis-field--full { margin-top: 30px; }
.devis-field__textarea {
  width: 100%;
  height: 120px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  background: transparent;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}
.devis-field__textarea:focus {
  outline: none;
  border-color: #1a1a1a;
}
.devis-field__input::placeholder,
.devis-field__textarea::placeholder {
  font-weight: 300;
  color: #1a1a1a;
  opacity: 1;               /* Firefox applique sinon une transparence par défaut */
}
.devis-budget { margin-top: 30px; }
.devis-budget__options {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}
.devis-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #1a1a1a;
  cursor: pointer;
}
.devis-radio input { accent-color: #1a1a1a; }
.devis__submit {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 40px;
  background: #1a1a1a;
  color: #ffffff;
  border: 1px solid #1a1a1a;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.devis__submit:hover {
  background: #ffffff;
  color: #1a1a1a;
}

/* Colonne de droite : atouts et contacts directs. */
.devis-aside {
  width: 40%;
  background: #f5f5f3;
  border-radius: 6px;
  padding: 40px;
}
.devis-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.devis-aside__point {
  position: relative;
  padding-left: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #1a1a1a;
  margin-bottom: 16px;
}
.devis-aside__point:last-child { margin-bottom: 0; }
/* Petit carré noir en guise de puce. */
.devis-aside__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: #1a1a1a;
}
.devis-aside__sep {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 30px 0;
}
.devis-aside__contact { margin-bottom: 20px; }
.devis-aside__contact:last-child { margin-bottom: 0; }
.devis-aside__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.devis-aside__contact a {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  transition: opacity 0.3s var(--ease);
}
.devis-aside__contact a:hover { opacity: 0.6; }
.devis-aside__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #1a1a1a;
  cursor: pointer;
}
.devis-aside__link svg { flex-shrink: 0; }

/* En-tête de page : même traitement que L'Entreprise, Contact, Devis… */
.page-hero {
  background: #ffffff;
  padding: 140px 60px 0;
  text-align: center;
}
.page-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1a1a;
  /* Même respiration au-dessus du titre que sur les autres pages. */
  margin: 45px 0 0;
}
/* Pages service : la bannière a été retirée, le titre enchaîne directement
   sur la première section — il n'a plus besoin de 40 px sous lui. */
.page-hero__title--spaced { margin-bottom: 15px; }
.page-hero + .svc-block { padding-top: 20px; }
.page-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  max-width: 600px;
  margin: 20px auto 0;
}

/* — Pages service — */
/* Retour vers la grille des services de l'accueil. */
.svc-back {
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #1a1a1a;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}
.svc-back:hover { opacity: 0.6; }
.svc-banner { background: #ffffff; }
.svc-banner__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.svc-block {
  background: #ffffff;
  padding: 80px 60px;
}
.svc-block--sand { background: #f5f5f3; }
.svc-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.svc-block__inner--reverse { flex-direction: row-reverse; }
.svc-block__text { width: 55%; }
.svc-block__media {
  width: 45%;
}
.svc-block__img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.svc-block__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
}
.svc-block__body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 18px 0 0;
}
/* CTA chaud, propre aux pages service. */
.cta--warm { background: #f8f5f2; padding: 80px 0; }
.cta__title--italic { font-style: italic; }

/* — Contact — */
.contact-hero {
  background: #ffffff;
  padding: 140px 60px 0;
  text-align: center;
}
.contact-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.contact-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #555;
  max-width: 600px;
  margin: 20px auto 0;
}
.contact-main {
  background: #ffffff;
  padding: 60px 80px;
}
.contact-main__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.contact-form { width: 55%; }
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.contact-field--full { margin-top: 30px; }
.contact-field__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.contact-field__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 12px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  background: transparent;
  transition: border-color 0.3s var(--ease);
}
.contact-field__input:focus {
  outline: none;
  border-bottom-color: #1a1a1a;
}
.contact-field__textarea {
  width: 100%;
  height: 120px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  background: transparent;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}
.contact-field__textarea:focus {
  outline: none;
  border-color: #1a1a1a;
}
.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
  font-weight: 300;
  color: #999;
  opacity: 1;
}
.contact-form__submit {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 40px;
  background: #1a1a1a;
  color: #ffffff;
  border: 1px solid #1a1a1a;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.contact-form__submit:hover {
  background: #ffffff;
  color: #1a1a1a;
}
.contact-form__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: #999;
  margin: 16px 0 0;
  max-width: 480px;
}

/* Colonne de droite : panneau sable, blocs séparés par un filet. */
.contact-info {
  width: 45%;
  background: #f5f5f3;
  border-radius: 6px;
  padding: 40px;
}
.contact-info__block {
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}
.contact-info__block:first-child { padding-top: 0; }
.contact-info__block:last-child { border-bottom: none; }
.contact-info__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.contact-info__value {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #1a1a1a;
  margin: 0;
}
.contact-info__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.contact-info__link svg { flex-shrink: 0; }
.contact-info__link:hover { opacity: 0.6; }

/* — Frise / étapes — */
.step { border-top: 1px solid var(--line); padding-top: 26px; }
.step__num {
  font-family: var(--fd);
  font-size: 30px;
  color: var(--muted);
  line-height: 1;
  margin-bottom: 16px;
}
.step h4 { margin-bottom: 10px; }
.step p { font-size: 14px; }

/* — Bloc citation / slogan — */
.claim {
  font-family: var(--fd);
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.28;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
}

/* — Liste implantations — */
.places { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.places li {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* — Révélation au scroll retirée : tout est visible dès le chargement.
   La classe reste dans le HTML mais n'a plus d'effet. — */
.reveal { opacity: 1; transform: none; }

/* 8. SECTIONS SPÉCIALES ---------------------------------------------------- */
.cta {
  background: var(--sand);
  padding: clamp(40px, 4.5vw, 60px) 0;
  text-align: center;
}
.cta h2 { margin-bottom: 24px; }
.cta p { margin: 0 auto 40px; max-width: 54ch; }

/* — Zones d'intervention : texte à gauche, carte à hotspots à droite — */
.zones-section {
  background: #ffffff;
  padding: 80px 60px;
  border-top: 1px solid #e8e8e8;
}
.zones-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px;
}
.zones-text {
  flex: 0 0 38%;
}
/* Le nom de la rubrique porte le titre ; la liste des villes passe en
   sous-titre. */
.zones-title {
  font-family: 'Cormorant Garamond', serif;
  /* 48 px au maximum, comme les titres de section. La colonne ne fait que
     38 % du conteneur : le corps suit la largeur de la fenêtre pour que le
     titre reste sur une seule ligne. */
  font-size: clamp(24px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.zones-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #555;
  /* la règle globale des <p> ajouterait 1.35em sous le sous-titre */
  margin: 16px 0 0;
}
.zones-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin-top: 20px;
}
.zones-btn {
  display: inline-block;
  margin-top: 28px;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  transition: all 0.3s;
}
.zones-btn:hover {
  background: #fff;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}
.zones-map {
  flex: 1;
}
/* Repère des hotspots : ils se positionnent en % de ce bloc, qui épouse
   exactement l'image. */
.map-wrapper {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.map-img {
  width: 100%;
  height: auto;
  display: block;
}
/* Invisible au repos : l'image porte déjà le point. Au survol, un halo
   confirme le point visé — le scale part du centre, le repère ne bouge pas. */
.hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 2;
}
.hotspot:hover {
  transform: scale(1.8);
  background: rgba(255,255,255,0.3);
}
.hotspot::after {
  content: attr(data-city);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hotspot:hover::after {
  opacity: 1;
}
.hotspot-main {
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
}
.hotspot-main:hover {
  transform: scale(1.3);
}
/* Le survol agrandit le parent : on annule l'échelle sur l'infobulle pour
   qu'elle garde les 10 px demandés. */
.hotspot:hover::after { transform: translateX(-50%) scale(0.556); }
.hotspot-main:hover::after { transform: translateX(-50%) scale(0.769); }
/* Points collés au bord droit de la carte : infobulle à gauche du point,
   sinon elle sort du cadre sur mobile. */
.hotspot-left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}
.hotspot-left:hover::after { transform: translateY(-50%) scale(0.556); }
.hotspot-main.hotspot-left:hover::after { transform: translateY(-50%) scale(0.769); }

/* 9. FORMULAIRE ------------------------------------------------------------ */
.form { display: grid; gap: 30px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.field { display: grid; gap: 10px; }
.field label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.8; }
.field select { appearance: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input::placeholder,
.field textarea::placeholder { color: #b8b8b2; }

.form__note { font-size: 11.5px; line-height: 1.8; color: var(--muted); }

.contact-line { border-top: 1px solid var(--line); padding: 22px 0; }
.contact-line__label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-line__value { font-size: 16px; color: var(--ink); }

/* 10. FOOTER --------------------------------------------------------------- */
.footer {
  background: #000000;
  padding: 50px 60px 30px;
}
.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.footer__top {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}
.footer__brand {
  flex: 0 0 32%;
  padding-top: 0;
  margin-top: 0;
  text-align: left;
}
.footer__logo-img {
  /* 120 px de haut = 336 px de large : on raisonne en largeur et on plafonne
     à la colonne, sinon le logo déborde sur les liens entre 768 et 1200 px.
     Le fichier porte 5 % de vide transparent sur sa gauche : la marge
     négative remet le « G » à l'aplomb du texte en dessous. */
  width: 336px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 0 -5%;
  object-fit: contain;
  object-position: left;
}
.footer__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin: 12px 0 0;
  max-width: 350px;
}
.footer__columns {
  flex: 1;
  display: flex;
  gap: 50px;
  justify-content: flex-end;
  padding-top: 0;
  margin-top: 0;
}
.footer__col {
  display: flex;
  flex-direction: column;
}
.footer__col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #ffffff;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.footer__link {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.3s;
  display: block;
}
a.footer__link:hover {
  color: #fff;
}
.footer__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 40px 0;
}
.footer__cta-row {
  display: flex;
  gap: 80px;
}
.footer__cta-block {
  flex: 1;
}
.footer__cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}
.footer__cta-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin: 12px 0 0;
}
.footer__cta-btn {
  display: inline-block;
  margin-top: 20px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.3);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  transition: all 0.3s;
}
.footer__cta-btn:hover {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #ffffff;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.3);
}
/* Dans la ligne du bas, le lien ne doit pas garder sa marge de colonne. */
.footer__bottom .footer__link { margin-bottom: 0; }

/* 11. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Sous 1300px, la colonne devient trop étroite pour tenir 500px de haut sans
   que object-fit: cover ne rogne les côtés du collage — il y perdrait des
   photos entières. On laisse alors l'image reprendre sa proportion naturelle. */
@media (max-width: 1300px) {
  .histoire__media img { min-height: 0; }
}

/* Sous 1100px la colonne de texte descend à ~334px : à 1.2rem la citation
   passerait sur deux lignes. On la réduit juste assez pour qu'elle tienne. */
@media (max-width: 1100px) {
  .histoire__quote { font-size: 0.95rem; padding-left: 22px; }
}

/* Cinq entrées aux libellés longs ne tiennent plus lisiblement sous 1150px :
   elles réduiraient le logo à une bouillie. La nav bascule donc sur le menu
   burger avant le reste du site, qui garde son point de rupture à 900px. */
@media (max-width: 1150px) {
  .nav__links, .nav__wa { display: none; }
  .nav__burger { display: block; }
  /* Plus que deux éléments : space-evenly les centrerait au lieu de les
     pousser aux extrémités. */
  .nav__inner {
    justify-content: space-between;
    padding-left: var(--nav-gutter-l);
    padding-right: var(--nav-gutter-r);
  }
}

/* Sous 768px : le logo se centre, le burger passe à gauche, et le cadre du
   hero se resserre pour ne pas manger l'écran. */
@media (max-width: 768px) {
  .hero { min-height: 100vh; }
  /* Menu mobile : les entrées commencent en haut du panneau plutôt que
     d'être centrées verticalement. */
  .nav-panel {
    justify-content: flex-start;
    padding-top: 100px;
  }
  .nav-panel__meta { margin-top: 40px; }

  /* Le carrousel des réalisations ferme sur son bouton : peu d'air suffit. */
  .histoire { padding-top: 0; }
  /* Padding de section à zéro : sinon il s'ajouterait sous le bouton et
     l'écart ne serait plus symétrique. */
  #realisations { padding-bottom: 0; margin-bottom: 0; }
  .hero__card {
    width: auto;
    max-width: 85%;
    margin: 0 auto;
    padding: 18px 15px;
  }
  .hero__card h1 {
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 20px;
  }
  /* Le chapô est masqué : à cette taille de cadre, le titre et les deux
     boutons suffisent. */
  .hero__card .lead { display: none; }
  .hero__actions {
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
  }
  .hero__card .btn {
    padding: 10px 16px;
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  .hero__badge { font-size: 10px; letter-spacing: 1.5px; }

  .nav__inner { position: relative; justify-content: center; }
  .nav__logo { position: static; }
  .nav__burger {
    position: absolute;
    left: var(--nav-gutter-l);
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 900px) {

  /* La vidéo verticale allégée (1,2 Mo) remplace ici la version large :
     le <source media> s'en charge. L'affiche reste en fond, visible le temps
     du chargement. Le hero garde une hauteur minimale imposée. */
  .hero { min-height: 78vh; }
  .hero__media {
    background: url("../assets/hero-poster.jpg") center / cover no-repeat;
  }
  .hero__badge { top: 88px; right: 20px; font-size: 9px; letter-spacing: 0.18em; }

  .grid--3 { grid-template-columns: 1fr; }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr; gap: 20px; }
  .service-row__num { padding-top: 0; }
  .project__meta { grid-template-columns: 1fr; gap: 14px; }
  /* Quatre colonnes deviendraient quatre bandes de 150px : on repasse à deux. */
  .works-grid .work { flex-basis: calc((100% - 12px) / 2); }
  /* Colonnes empilées : le texte retrouve ses deux gouttières,
     l'image reste à fond perdu sur toute la largeur. */
  /* Colonnes empilées : le visuel passe au-dessus du texte. */
  .histoire__grid { grid-template-columns: 1fr; gap: 30px; }
  .histoire__media { order: -1; }
  .histoire__text { padding-left: var(--gutter); padding-right: var(--gutter); }
  .histoire__media { margin: 0; }
}

@media (max-width: 768px) {
  .svc-banner__img { height: 240px; }
  .svc-block { padding: 50px 24px; }
  /* Colonnes empilées : le visuel passe au-dessus du texte. */
  .svc-block__inner,
  .svc-block__inner--reverse {
    flex-direction: column-reverse;
    gap: 30px;
  }
  .svc-block__text,
  .svc-block__media { width: 100%; }
  .svc-block__img { height: 240px; }
  .cta--warm { padding: 50px 0; }

  .page-hero { padding: 100px 24px 0; }
  .page-hero__title {
    font-size: 38px;
    letter-spacing: 2px;
  }

  .contact-hero { padding: 100px 24px 0; }
  .contact-hero__title {
    font-size: 38px;
    letter-spacing: 2px;
    margin-top: 45px;
  }
  .contact-main { padding: 40px 24px; }
  .contact-main__inner { flex-direction: column; gap: 40px; }
  .contact-form, .contact-info { width: 100%; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-apporteurs { padding: 50px 24px; }
  .contact-apporteurs__title { font-size: 30px; }

  /* Titre de l'en-tête Entreprise : 72 px déborde sur un écran de 375 px. */
  .entreprise-hero { padding: 100px 24px 30px; }
  .entreprise-hero__title,
  .direction-title {
    font-size: 38px;
    letter-spacing: 2px;
    margin-top: 45px;
  }
  .svc-back { margin-bottom: 10px; }

  .devis-hero { padding: 100px 24px 0; }
  .devis-hero__title {
    font-size: 38px;
    letter-spacing: 2px;
    margin-top: 45px;
  }
  .devis { padding: 50px 24px; }
  .devis__inner { flex-direction: column; gap: 40px; }
  .devis__form, .devis-aside { width: 100%; }
  .devis-grid { grid-template-columns: 1fr; gap: 24px; }
  .devis-aside { padding: 28px; }

  .estim-hero { padding: 100px 24px 0; }
  .estim-hero__title {
    font-size: 38px;
    letter-spacing: 2px;
    margin-top: 45px;
  }
  .estim-block { padding: 50px 24px; }
  /* Colonnes empilées : le visuel passe au-dessus du texte. */
  .estim-block__inner,
  .estim-block__inner--reverse {
    flex-direction: column-reverse;
    gap: 30px;
  }
  .estim-block__text,
  .estim-block__media { width: 100%; }
  .estim-block__img { height: 240px; }
  .estim-prices { padding: 50px 24px; }
  .estim-prices__title { font-size: 34px; }
  .estim-cards { grid-template-columns: 1fr; gap: 24px; }
  .estim-card { padding: 28px; }
  /* Une ligne unique ne tient pas sur mobile : on rend la coupe possible. */
  .cta__title--nowrap { font-size: 28px; white-space: normal; }

  .histoire-story {
    padding: 60px 24px;
  }
  .histoire-story__inner {
    flex-direction: column;
    gap: 30px;
  }
  .histoire-story__text,
  .histoire-story__media { width: 100%; }
  /* Le retrait de 60 px n'a plus lieu d'être une fois les colonnes empilées :
     il décalait le texte vers la droite. */
  .histoire-story__text { padding-left: 0; text-align: left; }
  .histoire-story__title { font-size: 40px; margin-bottom: 22px; }

  .expertise {
    padding: 10px 24px 60px;
  }
  .expertise__title { font-size: 40px; }
  /* Colonnes empilées : l'image passe au-dessus du texte dans les deux sens. */
  .expertise__row,
  .expertise__row--reverse {
    flex-direction: column-reverse;
    gap: 30px;
    margin-top: 50px;
  }
  .expertise__text,
  .expertise__media { width: 100%; }
  .expertise__img { height: 260px; }
  .expertise__separator { margin: 50px 0; }

  .direction-portraits {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 0 24px;
  }

  .entreprise-about {
    padding: 20px 24px 60px;
  }
  .entreprise-about__inner {
    flex-direction: column;
    gap: 30px;
  }
  .entreprise-about__photo {
    flex: none;
    width: 100%;
  }

  .services-section {
    /* La section « Notre histoire » qui précède ferme déjà sur son padding. */
    padding: 10px 24px 50px;
  }
  /* Carrousel horizontal : une carte et demie visible, défilement tactile. */
  .services-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 0 20px;
    /* barre de défilement masquée */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }
  .services-nav--prev { left: 10px; }
  .services-nav--next { right: 10px; }
  .services-grid > .service-card {
    flex: 0 0 75%;
    min-width: 75%;
    max-width: 75%;
    scroll-snap-align: center;
  }
  .services-title {
    font-size: 36px;
  }

  .footer {
    padding: 40px 24px 24px;
  }
  /* Seule l'adresse email est réduite : c'est le seul libellé trop long pour
     une demi-colonne. */
  .footer__link[href^="mailto:"] { font-size: 12px; }
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }
  /* Navigation et Contact côte à côte ; la colonne « Interventions » est
     masquée, ses trois villes figurent déjà dans la section zones. */
  .footer__columns {
    flex-direction: row;
    gap: 20px;
  }
  .footer__col { flex: 1; min-width: 0; }
  .footer__col:nth-child(2) { display: none; }
  .footer__cta-row {
    flex-direction: column;
    gap: 40px;
  }
  .footer__brand {
    flex: none;
  }

  /* La carte passe au-dessus du texte. */
  .zones-section {
    padding: 50px 24px;
  }
  .zones-container {
    flex-direction: column-reverse;
    gap: 40px;
  }
  .zones-text {
    flex: none;
    width: 100%;
  }
  .zones-title {
    /* Pleine largeur en colonne : le corps peut remonter sans passer à la ligne. */
    font-size: clamp(22px, 7.5vw, 40px);
  }
  /* « Paris · Monaco · Toute la France » tient sur une ligne : à 15 px et
     4 px d'interlettrage, la chaîne fait ~430 px et se coupait en deux. */
  .zones-subtitle {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
  .map-wrapper {
    max-width: 300px;
  }

  /* Empilement : la plaquette au-dessus, le texte dessous sur fond blanc —
     plutôt qu'un texte posé en surimpression sur le visuel. */
  .book-fresque {
    height: auto;
    min-height: 0;
  }
  .book-fresque__bg {
    position: relative;
    height: 240px;
  }
  .book-fresque__img {
    height: 240px;
    object-position: center;
  }
  .book-fresque__content {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30px 24px 40px;
    background: #ffffff;
  }
  .book-fresque__title {
    font-size: 26px;
  }
  .viewer-overlay__header {
    padding: 12px 16px;
  }
  .viewer-overlay__book-wrapper {
    gap: 8px;
    padding: 0 8px 20px;
  }
  .viewer-overlay__arrow {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .works-grid .work { flex-basis: 100%; }
  .btn { width: 100%; justify-content: center; }
  /* Le cadre du hero et ses boutons sont déjà réglés dans le bloc 768px,
     qui précède celui-ci : rien à ajouter ici sous peine de l'écraser. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Le collage n'est pas centré dans son fichier : 8,8 % de fond noir à gauche
   contre 1,4 % à droite. On décale l'image pour recentrer le contenu, et on
   élargit d'autant pour ne pas laisser de bande vide au bord droit. */
@media (max-width: 768px) {
  .histoire__media img {
    margin-left: -15px;
    width: calc(100% + 15px);
    max-width: none;
  }
}

/* Confirmation d'envoi des formulaires (Web3Forms redirige avec ?success=true). */
.success-message {
  display: none;
  background: #f5f5f3;
  border: 1px solid #e0e0e0;
  padding: 40px;
  text-align: center;
  margin-top: 30px;
  border-radius: 6px;
}
.success-message h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 15px;
}
.success-message p {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 0;
}

/* 12. PLACEHOLDERS -------------------------------------------------------- */
/* Forçage global : les navigateurs appliquent leur propre gris et une
   opacité réduite aux placeholders. Placé en fin de feuille et en
   !important pour passer devant les règles par composant. */
::placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-weight: 300 !important;
}

input::placeholder,
textarea::placeholder,
select {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-weight: 300 !important;
}