/* ==========================================================================
   MAISON JH — Propreté & Service
   Feuille de style principale
   --------------------------------------------------------------------------
   1.  Tokens (couleurs, typographie, espacements)
   2.  Reset & base
   3.  Typographie & utilitaires
   4.  Boutons
   5.  Header / Navigation
   6.  Hero
   7.  Composants
   8.  Sections spécifiques
   9.  Formulaire
   10. Footer & barre mobile
   11. Animations
   12. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Couleurs — noirs */
  --noir:        #0c0a08;
  --noir-2:      #14110d;
  --noir-3:      #1e1a15;
  --noir-4:      #2a241d;

  /* Couleurs — ors */
  --or:          #c9a24c;
  --or-clair:    #e2c37e;
  --or-pale:     #f1e0b8;
  --or-sombre:   #a8843a;

  /* Couleurs — clairs */
  --creme:       #faf6ef;
  --creme-2:     #f4ece0;
  --creme-3:     #ece1d1;
  --blanc:       #fffdfa;

  /* Couleurs — texte */
  --encre:       #221e19;
  --encre-doux:  #5f574c;
  --encre-clair: #8b8175;

  /* Lignes & ombres */
  --ligne:       rgba(201, 162, 76, .30);
  --ligne-douce: rgba(34, 30, 25, .10);
  --ombre-s:     0 2px 10px rgba(28, 22, 14, .05);
  --ombre-m:     0 12px 34px -14px rgba(28, 22, 14, .18);
  --ombre-l:     0 30px 70px -30px rgba(28, 22, 14, .35);
  --ombre-or:    0 14px 34px -14px rgba(168, 132, 58, .45);

  /* Dégradé or (filets, boutons, monogramme) */
  --grad-or: linear-gradient(105deg, #a8843a 0%, #e2c37e 22%, #f6ecc9 40%, #d4ae5c 58%, #a8843a 80%, #d9b96f 100%);

  /* Typographie */
  --font-titre:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-corps:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Parisienne", "Brush Script MT", cursive;

  /* Rythme */
  --pad-section: clamp(64px, 8vw, 118px);
  --gouttiere:   clamp(18px, 2.4vw, 30px);
  --largeur:     1260px;

  /* Rayons */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;

  /* Transitions */
  --t-rapide: .22s cubic-bezier(.4, 0, .2, 1);
  --t-doux:   .45s cubic-bezier(.22, .61, .36, 1);
  --t-lent:   .9s cubic-bezier(.22, .61, .36, 1);

  /* Header */
  --h-header: 90px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 20px);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 0; }

::selection { background: var(--or); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--noir);
  color: var(--or-clair);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: top var(--t-rapide);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   3. TYPOGRAPHIE & UTILITAIRES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.container--large  { max-width: 1480px; }
.container--etroit { max-width: 1200px; }

.section { padding-block: var(--pad-section); position: relative; }
.section--serre { padding-block: clamp(48px, 5vw, 78px); }
.section--creme { background: var(--creme-2); }
.section--blanc { background: var(--blanc); }
.section--noir  { background: var(--noir); color: var(--creme); }
.section--noir .titre,
.section--noir .titre-s,
.section--noir h2,
.section--noir h3 { color: var(--creme); }
.section--noir .texte,
.section--noir .lead { color: rgba(250, 246, 239, .72); }

/* Titres */
.titre-hero, .titre, .titre-s {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--encre);
}
.titre-hero { font-size: clamp(2.35rem, 6vw, 4.5rem); line-height: 1.05; }
.titre      { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.titre-s    { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.22; }

.sous-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.12rem, 2.1vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--or-sombre);
  margin-top: .32em;
}
.section--noir .sous-titre { color: var(--or-clair); }

/* Sur-titre doré espacé */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: clamp(24px, 4vw, 50px);
  height: 1px;
  background: var(--or);
  flex: none;
}
.kicker--nu::before { display: none; }
.kicker--centre { justify-content: center; }
.section--noir .kicker { color: var(--or-clair); }

/* Petites mentions espacées */
.mention {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-clair);
  line-height: 1.75;
}
.mention--or { color: var(--or-sombre); }
.section--noir .mention { color: rgba(226, 195, 126, .82); }

/* Texte courant */
.lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.78;
  color: var(--encre-doux);
}
.texte { color: var(--encre-doux); }
.texte + .texte { margin-top: 1.05em; }

/* Signature manuscrite */
.script {
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  line-height: 1.4;
  color: var(--or);
}

/* Filets & séparateurs */
.filet {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: .5;
}
.filet--court { width: 110px; height: 1px; background: var(--or); opacity: .75; }

.separateur { display: flex; align-items: center; gap: 13px; color: var(--or); }
.separateur::before,
.separateur::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .55;
}
.separateur::after { background: linear-gradient(90deg, currentColor, transparent); }
.separateur i {
  width: 7px; height: 7px; flex: none;
  background: currentColor; transform: rotate(45deg);
}

/* Utilitaires */
.centre { text-align: center; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 42px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* En-tête de section */
.entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 4vw, 60px);
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 54px);
}
.entete__texte { max-width: 760px; }

/* Duos « texte + image » — passent en une colonne dès la tablette.
   À utiliser plutôt qu'un style inline : un style inline écraserait les
   media queries et bloquerait la mise en page sur mobile. */
.duo {
  display: grid;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}
.duo--texte-image { grid-template-columns: 1.05fr .95fr; }
.duo--image-texte { grid-template-columns: .95fr 1.05fr; }
.duo--moitie      { grid-template-columns: 1fr 1fr; }
.duo--titre-liste {
  grid-template-columns: minmax(230px, .8fr) 2.2fr;
  align-items: start;
  gap: clamp(26px, 4vw, 60px);
}

/* Colonne simple (empilement d'un média et d'une citation) */
.pile { display: grid; grid-template-columns: 1fr; gap: 18px; }

/* Grilles */
.grille { display: grid; gap: var(--gouttiere); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--5 { grid-template-columns: repeat(5, 1fr); }
.grille--6 { grid-template-columns: repeat(6, 1fr); }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 30px;
  min-height: 52px;
  background: var(--noir);
  color: var(--creme);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-rapide), box-shadow var(--t-rapide),
              background-color var(--t-rapide), color var(--t-rapide),
              border-color var(--t-rapide);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .fleche { flex: none; transition: transform var(--t-doux); }
.btn:hover .fleche { transform: translateX(5px); }

/* Reflet au survol */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.22, .61, .36, 1);
}
.btn:hover::after { left: 125%; }

.btn--or {
  color: #241c07;
  background: var(--grad-or);
  background-size: 190% 100%;
  background-position: 12% 50%;
  box-shadow: var(--ombre-or);
  transition: background-position .7s ease, transform var(--t-rapide), box-shadow var(--t-rapide);
}
.btn--or:hover {
  background-position: 88% 50%;
  box-shadow: 0 18px 40px -14px rgba(168, 132, 58, .6);
}

.btn--contour {
  background: transparent;
  color: var(--encre);
  border-color: rgba(34, 30, 25, .5);
}
.btn--contour:hover { background: var(--noir); color: var(--creme); border-color: var(--noir); }

.btn--fantome {
  background: rgba(255, 255, 255, .06);
  color: var(--creme);
  border-color: rgba(250, 246, 239, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--fantome:hover { background: var(--creme); color: var(--noir); border-color: var(--creme); }

.btn--bloc  { width: 100%; }
.btn--grand { padding: 18px 36px; min-height: 60px; font-size: .88rem; }

.btn-groupe { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-groupe--centre { justify-content: center; }

/* Lien texte animé */
.lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-sombre);
  padding-bottom: 4px;
}
.lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--t-doux);
}
.lien:hover::after { transform-origin: left; transform: scaleX(0); }
.lien .fleche { transition: transform var(--t-doux); }
.lien:hover .fleche { transform: translateX(4px); }

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--h-header);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--t-doux), box-shadow var(--t-doux),
              height var(--t-doux), border-color var(--t-doux);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 4, .78) 0%, rgba(6, 5, 4, .28) 62%, transparent 100%);
  opacity: 1;
  transition: opacity var(--t-doux);
  pointer-events: none;
}
.site-header.is-collee {
  height: 74px;
  background: rgba(10, 8, 6, .93);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(201, 162, 76, .22);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .8);
}
.site-header.is-collee::before { opacity: 0; }

/* En-tête sur page à fond clair (sans hero sombre) */
.site-header.header--clair:not(.is-collee) {
  background: rgba(10, 8, 6, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header.header--clair:not(.is-collee)::before { opacity: 0; }

.header__inner {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* ---- Logo -------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  transition: opacity var(--t-rapide);
}
.logo:hover { opacity: .85; }
.logo__img {
  height: 66px;
  width: auto;
  flex: none;
  object-fit: contain;
  transition: height var(--t-doux);
}
.is-collee .logo__img { height: 54px; }

/* Logo typographique de secours (si l'image n'est pas fournie) */
.logo-typo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--or-clair);
}
.logo-typo__haut {
  font-size: .55rem;
  letter-spacing: .42em;
  text-indent: .42em;
  font-weight: 500;
  opacity: .92;
}
.logo-typo__mono {
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 1px 0 2px;
  transition: font-size var(--t-doux);
}
.is-collee .logo-typo__mono { font-size: 1.7rem; }
.logo-typo__bas {
  font-size: .48rem;
  letter-spacing: .24em;
  text-indent: .24em;
  font-weight: 500;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 162, 76, .55);
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* ---- Navigation -------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }

.nav__link {
  position: relative;
  font-size: .86rem;
  font-weight: 400;
  color: rgba(250, 246, 239, .88);
  padding: 8px 2px;
  transition: color var(--t-rapide);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-doux);
}
.nav__link:hover { color: var(--or-clair); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-actif { color: var(--or-clair); }
.nav__link.is-actif::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: rgba(250, 246, 239, .84);
  transition: color var(--t-rapide);
}
.header__tel:hover { color: var(--or-clair); }
.header__tel svg { flex: none; }
.header .btn { padding: 12px 24px; min-height: 46px; font-size: .8rem; }

/* ---- Burger ------------------------------------------------------------ */
.burger {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  flex: none;
  border: 1px solid rgba(201, 162, 76, .38);
  border-radius: var(--r-s);
  z-index: 1200;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.5px;
  margin-left: -10px;
  background: var(--or-clair);
  border-radius: 2px;
  transition: transform var(--t-doux), opacity var(--t-rapide), width var(--t-doux);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(2) { transform: translateY(0); width: 14px; margin-left: -10px; }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger.is-ouvert span:nth-child(1) { transform: rotate(45deg); }
.burger.is-ouvert span:nth-child(2) { opacity: 0; }
.burger.is-ouvert span:nth-child(3) { transform: rotate(-45deg); }

/* ---- Menu mobile ------------------------------------------------------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--h-header) + 20px) clamp(24px, 8vw, 60px) 40px;
  background: linear-gradient(160deg, #0c0a08 0%, #16120d 55%, #0c0a08 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-doux), transform var(--t-doux), visibility var(--t-doux);
  overflow-y: auto;
}
.menu-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 45% at 85% 8%, rgba(201, 162, 76, .16), transparent 70%),
    radial-gradient(60% 40% at 5% 95%, rgba(201, 162, 76, .10), transparent 70%);
  pointer-events: none;
}
.menu-mobile.is-ouvert { opacity: 1; visibility: visible; transform: translateY(0); }

.menu-mobile__nav { position: relative; display: flex; flex-direction: column; }
.menu-mobile__link {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight: 400;
  color: var(--creme);
  padding: 12px 0;
  border-bottom: 1px solid rgba(201, 162, 76, .16);
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  transform: translateY(18px);
  transition: color var(--t-rapide);
}
.menu-mobile.is-ouvert .menu-mobile__link {
  animation: menuIn .55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.menu-mobile__link:nth-child(1) { animation-delay: .06s; }
.menu-mobile__link:nth-child(2) { animation-delay: .12s; }
.menu-mobile__link:nth-child(3) { animation-delay: .18s; }
.menu-mobile__link:nth-child(4) { animation-delay: .24s; }
.menu-mobile__link:nth-child(5) { animation-delay: .30s; }
.menu-mobile__link .num {
  font-family: var(--font-corps);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--or);
  opacity: .8;
}
.menu-mobile__link:hover,
.menu-mobile__link.is-actif { color: var(--or-clair); }

@keyframes menuIn { to { opacity: 1; transform: translateY(0); } }

.menu-mobile__pied {
  position: relative;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  animation: menuIn .55s .36s cubic-bezier(.22, .61, .36, 1) forwards;
}
.menu-mobile__contact { display: flex; flex-direction: column; gap: 10px; }
.menu-mobile__contact a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  color: rgba(250, 246, 239, .82);
  font-size: .95rem;
}
.menu-mobile__contact a:hover { color: var(--or-clair); }
.menu-mobile__contact svg { color: var(--or); flex: none; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 900px);
  padding-block: calc(var(--h-header) + clamp(50px, 8vw, 96px)) clamp(60px, 8vw, 110px);
  background: var(--noir);
  overflow: hidden;
  isolation: isolate;
}
.hero--court { min-height: min(74vh, 720px); }

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 5, 4, .93) 0%, rgba(6, 5, 4, .74) 42%, rgba(6, 5, 4, .48) 100%),
    linear-gradient(180deg, rgba(6, 5, 4, .55) 0%, transparent 38%, rgba(6, 5, 4, .55) 100%);
}
.hero--centre .hero__fond::after {
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(6, 5, 4, .74) 0%, rgba(6, 5, 4, .88) 100%),
    linear-gradient(180deg, rgba(6, 5, 4, .6) 0%, transparent 34%, rgba(6, 5, 4, .62) 100%);
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1.2%, 0); }
}

/* Voile décoratif or */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 46% at 50% 0%, rgba(201, 162, 76, .13), transparent 68%);
  pointer-events: none;
}

.hero__inner { position: relative; width: 100%; }
.hero__contenu { max-width: 820px; }
.hero--centre .hero__contenu { max-width: 900px; margin-inline: auto; text-align: center; }

/* Le texte des en-têtes doit rester lisible sur la photo sans qu'il soit
   nécessaire d'assombrir davantage l'image : une ombre portée douce suffit
   à détacher les lettres du décor. */
.hero .titre-hero,
.hero-split .titre-hero { filter: drop-shadow(0 3px 18px rgba(6, 5, 4, .78)); }
.hero .titre-hero { color: var(--creme); }
.hero .titre-hero .or {
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__intro {
  font-family: var(--font-titre);
  font-size: clamp(1.26rem, 2.4vw, 1.72rem);
  color: var(--or-pale);
  margin-top: 26px;
  text-shadow: 0 2px 16px rgba(6, 5, 4, .8);
}
.hero__texte {
  margin-top: 16px;
  max-width: 660px;
  color: rgba(250, 246, 239, .95);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.78;
  text-shadow: 0 2px 16px rgba(6, 5, 4, .85);
}
.hero--centre .hero__texte { margin-inline: auto; }
.hero .btn-groupe { margin-top: 36px; }

/* Note manuscrite dans le hero */
.hero__note {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: clamp(40px, 7vw, 96px);
  /* Assez large pour que les retours à la ligne écrits dans la page
     soient respectés : la note tient sur deux lignes, pas trois. */
  max-width: 420px;
  text-align: right;
  color: var(--or-pale);
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(6, 5, 4, .8);
  opacity: 1;
  pointer-events: none;
}

/* Colonne verticale de mentions (page Professionnels) */
.hero__colonne {
  position: absolute;
  left: clamp(20px, 4vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(242, 232, 214, .82);
  line-height: 2;
}
.hero__colonne::after {
  content: "";
  width: 36px; height: 1px;
  background: var(--or);
  margin-top: 14px;
}

/* Indicateur de défilement */
.scroll-indic {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(242, 232, 214, .55);
  z-index: 2;
}
.scroll-indic__ligne {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--or), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-indic__ligne::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--or-pale);
  animation: scrollDown 2.1s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { top: -100%; }
  60%, 100% { top: 100%; }
}

/* Hero scindé (page Contact) */
.hero-split {
  position: relative;
  background: var(--noir);
  color: var(--creme);
  padding-block: calc(var(--h-header) + clamp(46px, 7vw, 84px)) clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.hero-split__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center right;
}
.hero-split__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(8, 6, 5, .97) 0%, rgba(8, 6, 5, .9) 40%, rgba(8, 6, 5, .62) 100%);
}
.hero-split__grille {
  display: grid;
  grid-template-columns: 1fr minmax(380px, 480px);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

/* ==========================================================================
   7. COMPOSANTS
   ========================================================================== */

/* ---- Média avec repli élégant ------------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-s);
  background: linear-gradient(140deg, #1a1611 0%, #2c251c 42%, #171310 100%);
  isolation: isolate;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.media--zoom:hover img { transform: scale(1.06); }

/* Repli : monogramme doré si l'image est absente */
.media::after {
  content: "MAISON JH";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: clamp(.9rem, 2vw, 1.3rem);
  letter-spacing: .35em;
  text-indent: .35em;
  color: rgba(201, 162, 76, .42);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(201, 162, 76, .16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px);
}
.media.sans-image img { display: none; }

.media--16-9 { aspect-ratio: 16 / 9; }
.media--4-3  { aspect-ratio: 4 / 3; }
.media--3-2  { aspect-ratio: 3 / 2; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--haut { aspect-ratio: 3 / 4; }
.media--plein { height: 100%; min-height: 260px; }

/* Cadre doré décoratif */
.media--cadre::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(241, 224, 184, .28);
  z-index: 2;
  pointer-events: none;
  transition: inset var(--t-lent);
}
.media--cadre:hover::before { inset: 18px; }

/* Étiquette posée sur un média */
.media__etiquette {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 10px 18px;
  background: rgba(10, 8, 6, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(201, 162, 76, .4);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-pale);
}

/* ---- Carte générique --------------------------------------------------- */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--blanc);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-s);
  transition: transform var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux);
  overflow: hidden;
}
.carte::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--grad-or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-doux);
}
.carte:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-m);
  border-color: var(--ligne);
}
.carte:hover::before { transform: scaleX(1); }
.carte--plat:hover { transform: none; }

.carte__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.22rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--encre);
}
.carte__texte {
  margin-top: 12px;
  font-size: .935rem;
  line-height: 1.72;
  color: var(--encre-doux);
}
.carte__pied {
  margin-top: auto;
  padding-top: 20px;
}
.carte__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--or-sombre);
  line-height: 1.8;
}
.carte__note::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--or);
  margin-top: 9px;
  flex: none;
}

/* ---- Carte valeur (icône ronde centrée) -------------------------------- */
.valeur {
  text-align: center;
  align-items: center;
  padding: clamp(26px, 2.6vw, 34px) clamp(16px, 1.8vw, 24px);
  background: rgba(255, 253, 250, .72);
}
.valeur__icone {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--creme-2), #fff);
  border: 1px solid var(--ligne);
  color: var(--or-sombre);
  margin-bottom: 18px;
  transition: transform var(--t-doux), background-color var(--t-doux),
              color var(--t-doux), box-shadow var(--t-doux);
}
.valeur:hover .valeur__icone {
  transform: translateY(-3px) scale(1.06);
  background: var(--grad-or);
  color: #2a2007;
  box-shadow: var(--ombre-or);
}
.valeur .carte__titre { font-size: 1.18rem; }
.valeur .carte__texte { font-size: .875rem; margin-top: 10px; }

/* ---- Carte service (image + contenu) ----------------------------------- */
.service { padding: 0; background: var(--blanc); }
.service .media { border-radius: 0; }
.service__corps {
  padding: clamp(26px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service__icone {
  position: absolute;
  left: clamp(22px, 2vw, 28px);
  top: calc(var(--h-media, 210px) - 26px);
  z-index: 3;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  color: var(--or-sombre);
  box-shadow: var(--ombre-m);
  transition: transform var(--t-doux), background-color var(--t-doux), color var(--t-doux);
}
.service:hover .service__icone {
  transform: scale(1.08) rotate(-4deg);
  background: var(--grad-or);
  color: #2a2007;
}
.service .media { --h-media: 210px; height: 210px; }
.service__corps .carte__titre { margin-top: 8px; }

/* Carte compacte (services secondaires) */
.service--compact .media { --h-media: 150px; height: 150px; }
.service--compact .service__icone { top: calc(150px - 24px); width: 46px; height: 46px; }
.service--compact .carte__titre { font-size: 1.12rem; }
.service--compact .carte__texte { font-size: .875rem; }

/* ---- Étapes numérotées -------------------------------------------------- */
.etapes { display: grid; gap: 0; }
.etapes--4 { grid-template-columns: repeat(4, 1fr); }
/* Étapes disposées en 2 x 2 (colonne étroite) */
.etapes--duo { grid-template-columns: repeat(2, 1fr); row-gap: clamp(34px, 3.6vw, 56px); }
.etape {
  position: relative;
  padding: 4px clamp(14px, 1.8vw, 26px);
  text-align: center;
}
.etape + .etape::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ligne), transparent);
}
.etape__num {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #fff, var(--creme-2));
  border: 1px solid var(--ligne);
  font-family: var(--font-titre);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--or-sombre);
  transition: transform var(--t-doux), background-color var(--t-doux),
              color var(--t-doux), box-shadow var(--t-doux);
}
.etape:hover .etape__num {
  transform: translateY(-4px);
  background: var(--grad-or);
  color: #2a2007;
  box-shadow: var(--ombre-or);
}
.etape__titre {
  font-family: var(--font-titre);
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--encre);
}
.etape__texte {
  margin-top: 9px;
  font-size: .855rem;
  line-height: 1.7;
  color: var(--encre-doux);
}

/* Variante sombre */
.section--noir .etape + .etape::before,
.etapes--sombre .etape + .etape::before {
  background: linear-gradient(180deg, transparent, rgba(201, 162, 76, .32), transparent);
}
.etapes--sombre .etape__num {
  background: transparent;
  border-color: rgba(201, 162, 76, .55);
  color: var(--or-clair);
}
.etapes--sombre .etape:hover .etape__num { background: var(--grad-or); color: #2a2007; }
.etapes--sombre .etape__titre { color: var(--or-pale); font-family: var(--font-titre); }
.etapes--sombre .etape__texte { color: rgba(250, 246, 239, .68); }

/* Étapes avec icône + flèche (page Services) */
.etape__tete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.etape__tete .etape__num { margin: 0; width: 50px; height: 50px; font-size: 1.15rem; }
.etape__picto {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  color: var(--or-sombre);
}

/* ---- Citation ---------------------------------------------------------- */
.citation {
  position: relative;
  padding: clamp(30px, 3vw, 44px);
  background: var(--noir);
  color: var(--creme);
  border-radius: var(--r-s);
  overflow: hidden;
}
.citation::before {
  content: "\201C";
  position: absolute;
  left: 22px; top: 6px;
  font-family: var(--font-titre);
  font-size: 6rem;
  line-height: 1;
  color: var(--or);
  opacity: .32;
}
.citation__texte {
  position: relative;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.18rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  color: var(--creme);
  padding-top: 26px;
}
.citation__auteur {
  margin-top: 22px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-clair);
}

/* ---- Liste à coches ---------------------------------------------------- */
.liste-coches { display: grid; gap: 13px; }
.liste-coches li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--encre-doux);
}
.liste-coches svg { flex: none; margin-top: 4px; color: var(--or-sombre); }
.section--noir .liste-coches li { color: rgba(250, 246, 239, .78); }
.section--noir .liste-coches svg { color: var(--or); }

/* ---- Carte "enjeux" (titre + icône + liste) ---------------------------- */
.enjeu__tete {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ligne-douce);
}
.enjeu__icone {
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  color: var(--or-sombre);
  transition: background-color var(--t-doux), color var(--t-doux);
}
.enjeu:hover .enjeu__icone { background: var(--grad-or); color: #2a2007; }

/* ---- Atout (petite carte icône + titre + texte) ------------------------ */
.atout {
  text-align: center;
  align-items: center;
  padding: clamp(22px, 2.2vw, 28px) clamp(14px, 1.5vw, 20px);
  background: var(--blanc);
}
.atout__icone {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  color: var(--or-sombre);
  margin-bottom: 14px;
  transition: transform var(--t-doux), color var(--t-doux);
}
.atout:hover .atout__icone { transform: translateY(-3px) scale(1.1); color: var(--or); }
.atout__titre {
  font-family: var(--font-corps);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}
.atout__texte {
  margin-top: 9px;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--encre-doux);
}

/* ---- Bandeau texte vertical sur image ---------------------------------- */
.bloc-image-texte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  align-items: stretch;
  gap: 0;
}
.bloc-image-texte__media {
  position: relative;
  min-height: 100%;
}
.bloc-image-texte__mots {
  position: absolute;
  inset: auto auto 50% clamp(22px, 3vw, 44px);
  transform: translateY(50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(.72rem, 1.1vw, .88rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--creme);
  line-height: 1.9;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
/* Le contenu se centre dans la hauteur imposée par la photo : plus de grand
   vide en bas quand la colonne de texte est plus courte que l'image. */
.bloc-image-texte__contenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 64px);
}

/* ---- Accordéon FAQ ------------------------------------------------------ */
.faq { border-top: 1px solid var(--ligne-douce); }
.faq__item { border-bottom: 1px solid var(--ligne-douce); }
.faq__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-titre);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  font-weight: 500;
  color: var(--encre);
  transition: color var(--t-rapide);
}
.faq__bouton:hover { color: var(--or-sombre); }
.faq__signe {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  transition: background-color var(--t-doux), transform var(--t-doux);
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--or-sombre);
  transition: transform var(--t-doux), background-color var(--t-doux);
}
.faq__signe::before { width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; }
.faq__signe::after  { width: 1.5px; height: 11px; margin: -5.5px 0 0 -.75px; }
.faq__item.is-ouvert .faq__signe { background: var(--grad-or); transform: rotate(180deg); }
.faq__item.is-ouvert .faq__signe::after { transform: scaleY(0); }
.faq__item.is-ouvert .faq__signe::before { background: #2a2007; }
.faq__reponse {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-doux);
}
.faq__reponse > div {
  padding: 0 4px 24px;
  max-width: 800px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--encre-doux);
}

/* ---- Chiffres clés ------------------------------------------------------ */
.chiffre { text-align: center; }
.chiffre__valeur {
  font-family: var(--font-titre);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chiffre__label {
  margin-top: 10px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-clair);
}
.section--noir .chiffre__label { color: rgba(250, 246, 239, .6); }

/* ==========================================================================
   8. SECTIONS SPÉCIFIQUES
   ========================================================================== */

/* ---- Bandeau d'appel à l'action ---------------------------------------- */
.bandeau-cta {
  position: relative;
  background: var(--noir);
  color: var(--creme);
  padding-block: clamp(44px, 5vw, 68px);
  overflow: hidden;
  isolation: isolate;
}
.bandeau-cta__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 65%;
  opacity: .5;
}
.bandeau-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgba(8, 6, 5, .96) 0%, rgba(8, 6, 5, .84) 48%, rgba(8, 6, 5, .68) 100%),
    radial-gradient(60% 100% at 50% 0%, rgba(201, 162, 76, .12), transparent 70%);
}
.bandeau-cta__grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 54px);
  flex-wrap: wrap;
}
.bandeau-cta__grille > * { min-width: 0; }
.bandeau-cta__texte { flex: 1 1 320px; }
.bandeau-cta .titre { color: var(--or-pale); font-size: clamp(1.7rem, 3vw, 2.35rem); }
.bandeau-cta__texte p { margin-top: 10px; color: rgba(250, 246, 239, .76); font-size: .97rem; }
.bandeau-cta .btn-groupe { flex: 0 1 auto; max-width: 100%; }

.bandeau-cta__pictos {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(201, 162, 76, .3);
}
.bandeau-cta__picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 224, 184, .8);
  text-align: center;
}
.bandeau-cta__picto svg { color: var(--or); }

/* ---- Bandeau d'informations de contact --------------------------------- */
.infos-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.infos-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.6vw, 40px);
  position: relative;
}
.infos-contact__item + .infos-contact__item::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ligne), transparent);
}
.infos-contact__icone {
  width: 56px; height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #fff, var(--creme-2));
  border: 1px solid var(--ligne);
  color: var(--or-sombre);
  transition: transform var(--t-doux), background-color var(--t-doux), color var(--t-doux);
}
.infos-contact__item:hover .infos-contact__icone {
  transform: scale(1.06);
  background: var(--grad-or);
  color: #2a2007;
}
.infos-contact__titre {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--encre);
}
.infos-contact__valeur {
  display: inline-block;
  margin-top: 3px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--or-sombre);
  transition: color var(--t-rapide);
  word-break: break-word;
}
a.infos-contact__valeur:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }
.infos-contact__detail {
  margin-top: 8px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--encre-clair);
}

/* ---- Bloc "avantages" du hero contact ---------------------------------- */
.avantages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(30px, 4vw, 46px);
}
.avantage {
  position: relative;
  padding: 0 clamp(10px, 1.4vw, 20px);
  text-align: center;
}
.avantage + .avantage::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(201, 162, 76, .28);
}
.avantage svg { margin: 0 auto 12px; color: var(--or-clair); }
.avantage span {
  display: block;
  font-size: .86rem;
  line-height: 1.4;
  color: rgba(250, 246, 239, .88);
}

/* ---- Zone d'intervention ------------------------------------------------ */
.zones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.zone {
  padding: 8px 18px;
  border: 1px solid var(--ligne);
  border-radius: 40px;
  font-size: .8rem;
  color: var(--encre-doux);
  background: rgba(255, 253, 250, .6);
  transition: background-color var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.zone:hover { background: var(--noir); color: var(--or-clair); transform: translateY(-2px); }

/* ---- « Nos équipes en intervention » : cartes des photos réelles -------- */
/* La section entière doit tenir dans un écran d’ordinateur courant :
   hauteurs, marges et largeur sont volontairement contenues. */
.section--terrain { padding-block: clamp(40px, 3.6vw, 54px); }
.section--terrain .container { max-width: 1180px; }
.terrain__entete {
  max-width: 720px;
  margin: 0 auto clamp(22px, 2.2vw, 30px);
  text-align: center;
}
.terrain__surtitre {
  max-width: 430px;
  margin: 0 auto 14px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.terrain__entete .lead { margin-inline: auto; font-size: 1rem; line-height: 1.7; }

.terrain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--gouttiere);
}
.terrain__carte {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(30, 26, 21, .85) 0%, rgba(12, 10, 8, .85) 100%);
  border: 1px solid rgba(201, 162, 76, .22);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform var(--t-doux), border-color var(--t-doux), box-shadow var(--t-doux);
}
.terrain__carte:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 76, .5);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .85);
}
.terrain__visuel { position: relative; }
.terrain__visuel .media { border-radius: 0; }

/* Pastille dorée à cheval sur le bas de la photo */
.terrain__icone {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 3;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--noir-2);
  border: 1px solid rgba(201, 162, 76, .55);
  color: var(--or-clair);
  transition: background-color var(--t-doux), color var(--t-doux), transform var(--t-doux);
}
.terrain__carte:hover .terrain__icone {
  background: var(--grad-or);
  color: #2a2007;
  transform: translate(-50%, 50%) scale(1.06);
}

.terrain__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 38px clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 22px);
  text-align: center;
}
.terrain__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.28rem, 1.9vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--or-pale);
}
.terrain__texte {
  margin-top: 10px;
  font-size: .89rem;
  line-height: 1.65;
  color: rgba(250, 246, 239, .7);
}
/* Les mots-clés restent collés au bas de la carte : les trois cartes
   gardent ainsi la même ligne de base, quelle que soit la longueur du texte. */
.terrain__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 162, 76, .18);
}
.terrain__points li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .72);
}
.terrain__points svg { flex: none; color: var(--or); }

/* Bandeau des garanties, sous les trois cartes */
.garanties {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(20px, 2.1vw, 26px);
  padding: clamp(16px, 1.7vw, 20px) clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(201, 162, 76, .22);
  border-radius: var(--r-m);
}
.garantie { display: flex; align-items: flex-start; gap: 13px; }
.garantie + .garantie {
  border-left: 1px solid rgba(201, 162, 76, .16);
  padding-left: clamp(20px, 2.4vw, 34px);
}
.garantie svg { flex: none; margin-top: 2px; color: var(--or); }
.garantie__titre {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--or-pale);
}
.garantie__texte {
  display: block;
  margin-top: 4px;
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(250, 246, 239, .62);
}

.terrain__signature {
  max-width: 560px;
  margin: clamp(20px, 2.1vw, 26px) auto 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(226, 195, 126, .85);
}

/* ==========================================================================
   9. FORMULAIRE
   ========================================================================== */

.form-carte {
  position: relative;
  background: var(--blanc);
  border-radius: var(--r-m);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--ombre-l);
  border: 1px solid rgba(201, 162, 76, .2);
}
.form-carte__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 500;
  color: var(--encre);
}
.form-carte__intro {
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--encre-doux);
}

.form { margin-top: 24px; display: grid; gap: 14px; }
.form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.champ { position: relative; display: block; }
.champ__label {
  position: absolute;
  left: 15px; top: 16px;
  font-size: .93rem;
  color: var(--encre-clair);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-rapide), color var(--t-rapide), opacity var(--t-rapide);
  background: linear-gradient(180deg, transparent 42%, var(--creme-2) 42%);
  padding-inline: 4px;
  margin-left: -4px;
}
.champ__controle {
  width: 100%;
  padding: 15px 15px;
  min-height: 54px;
  background: var(--creme-2);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font-size: .95rem;
  color: var(--encre);
  transition: border-color var(--t-rapide), background-color var(--t-rapide), box-shadow var(--t-rapide);
  -webkit-appearance: none;
  appearance: none;
}
.champ__controle::placeholder { color: transparent; }
.champ__controle:hover { background: var(--creme-3); }
.champ__controle:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(201, 162, 76, .16);
}
/* Le label remonte au focus ou dès que le champ est rempli.
   On cible input/textarea explicitement : un <select> n'a pas de placeholder,
   donc :not(:placeholder-shown) serait toujours vrai pour lui. */
.champ__controle:focus + .champ__label,
input.champ__controle:not(:placeholder-shown) + .champ__label,
textarea.champ__controle:not(:placeholder-shown) + .champ__label {
  transform: translateY(-25px) scale(.78);
  color: var(--or-sombre);
}
.champ__controle:focus + .champ__label { background: linear-gradient(180deg, transparent 42%, var(--blanc) 42%); }

textarea.champ__controle { min-height: 132px; resize: vertical; line-height: 1.65; }

/* Select : le label reste flottant en permanence */
select.champ__controle {
  color: var(--encre-clair);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a8843a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}
select.champ__controle.a-valeur { color: var(--encre); }
select.champ__controle:focus + .champ__label,
select.champ__controle.a-valeur + .champ__label {
  transform: translateY(-25px) scale(.78);
  color: var(--or-sombre);
}

/* Champ en erreur */
.champ.est-invalide .champ__controle {
  border-color: #b3452f;
  background: #fdf3f1;
  box-shadow: 0 0 0 3px rgba(179, 69, 47, .1);
}
.champ__erreur {
  display: none;
  margin-top: 6px;
  font-size: .78rem;
  color: #b3452f;
}
.champ.est-invalide .champ__erreur { display: block; }

/* Consentement */
.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--encre-doux);
  cursor: pointer;
  padding-top: 2px;
}
.consentement input { position: absolute; opacity: 0; width: 0; height: 0; }
.consentement__case {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--ligne);
  border-radius: 3px;
  background: var(--creme-2);
  display: grid;
  place-items: center;
  transition: background-color var(--t-rapide), border-color var(--t-rapide);
}
.consentement__case svg { opacity: 0; transform: scale(.6); transition: opacity var(--t-rapide), transform var(--t-rapide); }
.consentement input:checked + .consentement__case { background: var(--grad-or); border-color: var(--or-sombre); }
.consentement input:checked + .consentement__case svg { opacity: 1; transform: scale(1); color: #2a2007; }
.consentement input:focus-visible + .consentement__case { outline: 2px solid var(--or); outline-offset: 2px; }
.consentement a { color: var(--or-sombre); text-decoration: underline; text-underline-offset: 3px; }
.champ.est-invalide .consentement__case { border-color: #b3452f; }

/* Anti-spam (champ leurre) */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden;
}

/* Note de confidentialité */
.form__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 4px;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--encre-clair);
}
.form__note svg { flex: none; margin-top: 2px; color: var(--or-sombre); }

/* Bouton en cours d'envoi */
.btn.est-en-cours { pointer-events: none; opacity: .8; }
.btn.est-en-cours .btn__label { visibility: hidden; }
.btn.est-en-cours .fleche { display: none; }
.btn__spinner {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(36, 28, 7, .28);
  border-top-color: #241c07;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.est-en-cours .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Message de retour du formulaire */
.form-message {
  display: none;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--r-s);
  font-size: .9rem;
  line-height: 1.6;
  border: 1px solid transparent;
}
.form-message.est-visible { display: block; animation: fadeUp .45s cubic-bezier(.22,.61,.36,1) both; }
.form-message--succes {
  background: #f0f7f0;
  border-color: #bcd9bc;
  color: #2f5d33;
}
.form-message--erreur {
  background: #fdf3f1;
  border-color: #e6b6aa;
  color: #8f3623;
}
.form-message strong { display: block; margin-bottom: 4px; font-weight: 600; }
.form-message a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ==========================================================================
   10. FOOTER & BARRE MOBILE
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--noir);
  color: rgba(250, 246, 239, .74);
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 80% at 88% 30%, rgba(201, 162, 76, .10), transparent 66%),
    linear-gradient(180deg, #0e0b09, #080705);
}
.site-footer__haut {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.5fr minmax(240px, 1fr);
  gap: clamp(28px, 4vw, 60px);
  padding-block: clamp(44px, 5vw, 66px);
  align-items: start;
}
.site-footer__marque { display: flex; flex-direction: column; gap: 14px; }
.site-footer__marque .script { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.site-footer__logo {
  height: 92px;
  width: auto;
  /* Sans cela, le conteneur flex en colonne étire le logo sur toute la
     largeur et déforme ses proportions. */
  align-self: flex-start;
  max-width: 100%;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.4vw, 30px);
  margin-bottom: 22px;
}
.footer-nav a {
  position: relative;
  font-size: .875rem;
  color: rgba(250, 246, 239, .8);
  transition: color var(--t-rapide);
  padding-bottom: 3px;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-doux);
}
.footer-nav a:hover { color: var(--or-clair); }
.footer-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-nav a.is-actif { color: var(--or-clair); }
.footer-nav a.is-actif::after { transform: scaleX(1); }

.footer-coord {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 3vw, 38px);
}
.footer-coord__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(250, 246, 239, .8);
  transition: color var(--t-rapide);
}
a.footer-coord__item:hover { color: var(--or-clair); }
.footer-coord__item svg { flex: none; margin-top: 3px; color: var(--or); }
.footer-coord__item small { display: block; font-size: .74rem; color: rgba(250, 246, 239, .5); }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 162, 76, .34);
  border-radius: 50%;
  color: var(--or-clair);
  transition: background-color var(--t-doux), color var(--t-doux),
              transform var(--t-doux), border-color var(--t-doux);
}
.footer-social a:hover {
  background: var(--grad-or);
  color: #2a2007;
  border-color: transparent;
  transform: translateY(-3px);
}

.site-footer__slogan {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 224, 184, .78);
  line-height: 2;
  text-align: right;
}

.site-footer__bas {
  border-top: 1px solid rgba(201, 162, 76, .16);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(250, 246, 239, .5);
}
.site-footer__bas nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer__bas a { transition: color var(--t-rapide); }
.site-footer__bas a:hover { color: var(--or-clair); }

/* ---- Barre d'actions mobile (appel / devis) ---------------------------- */
.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: none;
  background: rgba(10, 8, 6, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(201, 162, 76, .26);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  transform: translateY(110%);
  transition: transform var(--t-doux);
}
.barre-mobile.est-visible { transform: translateY(0); }
.barre-mobile a {
  flex: 1;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--r-s);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.barre-mobile__appel {
  background: transparent;
  color: var(--or-clair);
  border: 1px solid rgba(201, 162, 76, .5);
}
.barre-mobile__devis {
  background: var(--grad-or);
  color: #241c07;
}

/* ---- Retour en haut ----------------------------------------------------- */
.retour-haut {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  z-index: 880;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 8, 6, .9);
  border: 1px solid rgba(201, 162, 76, .38);
  color: var(--or-clair);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-doux), transform var(--t-doux),
              visibility var(--t-doux), background-color var(--t-doux), color var(--t-doux);
}
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.retour-haut:hover { background: var(--grad-or); color: #241c07; border-color: transparent; }

/* ==========================================================================
   11. ANIMATIONS
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apparition au défilement */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1),
              transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
[data-reveal="gauche"] { transform: translateX(-32px); }
[data-reveal="droite"] { transform: translateX(32px); }
[data-reveal="zoom"]   { transform: scale(.965); }
[data-reveal="voile"]  { transform: none; }

[data-reveal].est-visible {
  opacity: 1;
  transform: none;
}

/* Animation d'entrée du hero (au chargement) */
.hero__anim > * {
  opacity: 0;
  animation: fadeUp .95s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero__anim > *:nth-child(1) { animation-delay: .15s; }
.hero__anim > *:nth-child(2) { animation-delay: .28s; }
.hero__anim > *:nth-child(3) { animation-delay: .40s; }
.hero__anim > *:nth-child(4) { animation-delay: .52s; }
.hero__anim > *:nth-child(5) { animation-delay: .64s; }
.hero__anim > *:nth-child(6) { animation-delay: .76s; }

.hero__note,
.hero__colonne,
.scroll-indic {
  opacity: 0;
  animation: fadeUp 1s .95s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* Ligne dorée qui se déploie sous les titres */
.trait-anime {
  display: block;
  width: 100%;
  max-width: 190px;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s .2s cubic-bezier(.22, .61, .36, 1);
}
.est-visible .trait-anime,
[data-reveal].est-visible .trait-anime { transform: scaleX(1); }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .grille--6 { grid-template-columns: repeat(3, 1fr); }
  .grille--5 { grid-template-columns: repeat(3, 1fr); }
  .site-footer__haut { grid-template-columns: 1fr 1.4fr; }
  .site-footer__slogan { grid-column: 1 / -1; text-align: left; }
  .header__tel { display: none; }
}

@media (max-width: 940px) {
  .duo,
  .duo--texte-image,
  .duo--image-texte,
  .duo--moitie,
  .duo--titre-liste { grid-template-columns: 1fr; }
  /* L'image repasse sous le texte sur les duos « image d'abord » */
  .duo--image-texte > .media { order: 2; }
  .etapes--duo { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: block; }
  .header__actions { gap: 8px; }
  .hero__colonne { display: none; }
  .bloc-image-texte { grid-template-columns: 1fr; }
  .bloc-image-texte__media { min-height: 300px; }
  .hero-split__grille { grid-template-columns: 1fr; }
  .hero-split__grille .form-carte { max-width: 560px; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .etapes--4 { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .etape + .etape::before { display: none; }
  .etapes--4 .etape:nth-child(2n)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--ligne), transparent);
  }
  .infos-contact { grid-template-columns: 1fr; }
  .infos-contact__item + .infos-contact__item::before {
    left: clamp(20px, 2.6vw, 40px); right: clamp(20px, 2.6vw, 40px);
    top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ligne), transparent);
  }
  .bandeau-cta__pictos { border-left: 0; padding-left: 0; }
}

@media (max-width: 860px) {
  :root { --h-header: 78px; }
  .logo__img { height: 58px; }
  .is-collee .logo__img { height: 50px; }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--5, .grille--6 { grid-template-columns: repeat(2, 1fr); }
  .hero__note { display: none; }
  .scroll-indic { display: none; }
  .entete { align-items: flex-start; }
  .site-footer__haut { grid-template-columns: 1fr; }
  .barre-mobile { display: flex; }
  .retour-haut { bottom: 84px; }
  /* La barre fixe ne doit pas recouvrir la fin du pied de page */
  .site-footer__bas { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .avantages { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .avantage:nth-child(3)::before { display: none; }

  /* Galerie « Sur le terrain » : défilement horizontal au doigt */
  .terrain {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 4vw, 40px);
    margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
    padding: 0 clamp(20px, 4vw, 40px) 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 76, .55) transparent;
  }
  .terrain__carte { scroll-snap-align: start; }
  /* Les garanties passent sur deux colonnes, sans filets verticaux */
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .garantie + .garantie { border-left: 0; padding-left: 0; }

  /* Zones tactiles confortables au doigt (recommandation : 40 px minimum) */
  .footer-nav { gap: 2px clamp(16px, 2.4vw, 30px); }
  .footer-nav a          { padding: 9px 0 8px; }
  .footer-coord__item    { padding: 8px 0; }
  .site-footer__bas nav  { gap: 2px 18px; }
  .site-footer__bas a    { display: inline-block; padding: 8px 0; }
  .infos-contact__valeur { padding: 7px 0; }
  .lien                  { padding: 9px 0; }
  .lien::after           { bottom: 5px; }
  .footer-social a       { width: 44px; height: 44px; }
  .zone                  { padding: 11px 18px; }
  .prose a,
  .consentement a,
  .form__note a          { padding: 7px 0; }
  .faq__bouton           { padding: 20px 4px; }
  .fil                   { gap: 4px 9px; }
  .fil a                 { display: inline-block; padding: 8px 0; }
}

@media (max-width: 620px) {
  .grille--2, .grille--3, .grille--4, .grille--5, .grille--6 { grid-template-columns: 1fr; }
  .terrain { grid-auto-columns: 80%; }
  .garanties { grid-template-columns: 1fr; }
  .etapes--4 { grid-template-columns: 1fr; row-gap: 30px; }
  .etapes--4 .etape:nth-child(2n)::before { display: none; }
  .etape { padding-inline: 0; }
  .form__ligne { grid-template-columns: 1fr; }
  /* Les boutons passent en pleine largeur : le conteneur doit avoir une
     largeur définie, sinon width:100% se calcule sur le contenu et déborde. */
  .btn-groupe { width: 100%; }
  .btn-groupe .btn { width: 100%; }
  .hero { min-height: auto; padding-block: calc(var(--h-header) + 56px) 64px; }
  .citation::before { font-size: 4.5rem; }
  .bandeau-cta__pictos { width: 100%; justify-content: space-between; }
  .site-footer__bas { flex-direction: column; align-items: flex-start; }
  .logo__img { height: 52px; }
  .is-collee .logo__img { height: 46px; }
  .site-footer__logo { height: 78px; }
}

@media (max-width: 400px) {
  .barre-mobile a { font-size: .78rem; padding-inline: 8px; }
}

/* Grand écran : on ouvre un peu la mise en page */
@media (min-width: 1600px) {
  :root { --largeur: 1340px; }
}

/* ==========================================================================
   13. PAGES DE TEXTE (mentions légales, confidentialité, 404)
   ========================================================================== */

/* Bandeau de titre simple, sans photo */
.entete-page {
  position: relative;
  background: linear-gradient(150deg, #0e0b09 0%, #1a1610 55%, #0c0a08 100%);
  color: var(--creme);
  padding-block: calc(var(--h-header) + clamp(40px, 6vw, 74px)) clamp(36px, 5vw, 62px);
  overflow: hidden;
  isolation: isolate;
}
.entete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 20%, rgba(201, 162, 76, .14), transparent 68%),
    radial-gradient(50% 60% at 8% 100%, rgba(201, 162, 76, .08), transparent 70%);
}
.entete-page .titre { color: var(--creme); }
.entete-page .kicker { color: var(--or-clair); }

/* Fil d'Ariane */
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: .78rem;
  color: rgba(250, 246, 239, .58);
}
.fil a { transition: color var(--t-rapide); }
.fil a:hover { color: var(--or-clair); }
.fil span[aria-hidden] { color: var(--or); }

/* Corps de texte long */
.prose { max-width: 780px; }
.prose h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.24;
  color: var(--encre);
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--ligne-douce);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--font-corps);
  font-size: 1rem;
  font-weight: 600;
  color: var(--encre);
  margin-top: 1.7em;
}
.prose p,
.prose ul,
.prose ol { margin-top: 1em; color: var(--encre-doux); }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-top: .5em;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 6px; height: 6px;
  background: var(--or);
  transform: rotate(45deg);
}
.prose a {
  color: var(--or-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-rapide);
}
.prose a:hover { color: var(--encre); }
.prose strong { color: var(--encre); font-weight: 600; }
.prose .maj-date {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 16px;
  border: 1px solid var(--ligne);
  border-radius: 40px;
  font-size: .75rem;
  color: var(--or-sombre);
}

/* Mention à compléter par le client (visible volontairement) */
.a-completer {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(201, 162, 76, .15);
  border-bottom: 1px dashed var(--or-sombre);
  border-radius: 3px;
  color: var(--or-sombre);
  font-weight: 500;
  font-size: .94em;
}

/* Tableau simple (traitement des données) */
.tableau {
  width: 100%;
  margin-top: 1.2em;
  border-collapse: collapse;
  font-size: .9rem;
}
.tableau th,
.tableau td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ligne-douce);
  vertical-align: top;
  color: var(--encre-doux);
}
.tableau th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-sombre);
  white-space: nowrap;
}
.tableau tr:last-child td { border-bottom: 0; }

/* Page 404 / remerciement */
.page-centre {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: calc(var(--h-header) + 60px) 80px;
}
.page-centre__code {
  font-family: var(--font-titre);
  font-size: clamp(4.5rem, 16vw, 10rem);
  font-weight: 600;
  line-height: .9;
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-centre__icone {
  width: 84px; height: 84px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: linear-gradient(150deg, #fff, var(--creme-2));
  color: var(--or-sombre);
  box-shadow: var(--ombre-m);
}

@media (max-width: 620px) {
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau thead { display: none; }
  .tableau tr { padding: 12px 0; border-bottom: 1px solid var(--ligne-douce); }
  .tableau td { border: 0; padding: 3px 0; }
  .tableau td::before {
    content: attr(data-titre);
    display: block;
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--or-sombre);
    margin-bottom: 2px;
  }
}

/* ==========================================================================
   PRÉFÉRENCES & IMPRESSION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__anim > *, .hero__note, .hero__colonne, .scroll-indic { opacity: 1 !important; }
  .hero__fond { animation: none; transform: scale(1.02); }
  .trait-anime { transform: scaleX(1); }
}

@media print {
  .site-header, .barre-mobile, .retour-haut, .menu-mobile,
  .scroll-indic, .hero__fond, .bandeau-cta__fond { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 20px; }
  .hero, .hero-split, .section--noir, .bandeau-cta, .site-footer {
    background: #fff !important; color: #000 !important;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}