/* ==========================================================================
   Paris Génie Clim — feuille de style unique
   Palette anthracite & or champagne. Mobile-first. Aucun framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  --ink:      #16150F;
  --ink-deep: #0E0D0A;
  --ink-soft: #1B1913;
  --gold:     #C3A177;
  --gold-lt:  #D9BE95;
  --cream:    #F5F1E8;
  --cream-2:  #EDE6D8;
  --paper:    #FFFDF9;
  --line-lt:  #E0D8C8;
  --line-dk:  #2E2A22;
  --text:     #2A2822;
  --text-2:   #6F6659;
  --muted:    #8C8272;

  /* Or assombri : le --gold n'atteint que 2,15:1 sur --cream, insuffisant
     pour WCAG AA. Cette variante monte à 5,3:1 et sert au texte d'accent
     posé sur fond clair. --gold reste réservé aux fonds sombres et aux
     aplats de boutons. */
  --gold-ink: #7A6034;

  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: 20px;
  --radius: 3px;

  --step: clamp(2.6rem, 6vw, 5.2rem); /* rythme vertical des sections */
}

/* --------------------------------------------------------------------------
   2. Réinitialisation & bases
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Empêche une ancre (#reservation, #froid…) de faire arriver le titre de
     section sous le bandeau/header sticky. --site-top-h est mesuré en JS
     sur l'accueil (bandeau + en-tête) ; sur les autres pages, où seul
     .hdr est sticky, le repli 104px sur-compense légèrement — inoffensif,
     mieux vaut arriver un peu bas que sous la nav. */
  scroll-padding-top: var(--site-top-h, 104px);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .002em;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.9vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .35rem; }

a { color: inherit; }

strong, b { font-weight: 700; }

/* Focus visible — indispensable pour la navigation clavier */
:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.s-dark :focus-visible,
.topbar :focus-visible,
.hdr :focus-visible,
.site-foot :focus-visible,
.callbar :focus-visible {
  outline-color: var(--gold-lt);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: .7rem 1.1rem; font-size: .85rem; font-weight: 600;
  text-decoration: none; border-radius: var(--radius);
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 820px; }

.section { padding-block: var(--step); }

.s-dark   { background: var(--ink);      color: #D6CFC1; }
.s-darker { background: var(--ink-deep); color: #D6CFC1; }
.s-soft   { background: var(--ink-soft); color: #D6CFC1; }
.s-cream  { background: var(--cream);    color: var(--text); }
.s-cream2 { background: var(--cream-2);  color: var(--text); }

.s-dark h1, .s-dark h2, .s-dark h3, .s-dark h4,
.s-darker h1, .s-darker h2, .s-darker h3, .s-darker h4,
.s-soft h1, .s-soft h2, .s-soft h3, .s-soft h4 { color: var(--gold-lt); }

.s-dark p, .s-soft p, .s-darker p { color: #C6BEB0; }

/* Suréclaircissement : sur fond sombre le gris --muted reste lisible
   (4,8:1) mais on garde une teinte plus claire pour les paragraphes. */

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  margin: 0 0 .55rem;
}
.s-dark .eyebrow, .s-soft .eyebrow, .s-darker .eyebrow { color: var(--gold); }

.sec-head { margin-bottom: 2.4rem; }
.sec-head.center { text-align: center; max-width: 660px; margin-inline: auto; }
.sec-head p { color: var(--text-2); margin-bottom: 0; }
.s-dark .sec-head p, .s-soft .sec-head p, .s-darker .sec-head p { color: var(--muted); }

.lede { font-size: 1.08rem; line-height: 1.7; color: var(--text-2); }
.s-dark .lede, .s-soft .lede { color: #C6BEB0; }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-body);
  font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-lt); }

.btn-ghost { background: transparent; color: var(--cream); border-color: #4A443A; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

.btn-outline { background: transparent; color: var(--gold-ink); border-color: var(--gold-ink); }
.btn-outline:hover { background: var(--gold-ink); color: var(--cream); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --------------------------------------------------------------------------
   5. Barre haute + en-tête
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-deep);
  color: #C9B79F;
  font-size: .76rem;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  align-items: center; justify-content: center;
  padding-block: .55rem;
  text-align: center;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--gold-lt); text-decoration: underline; }
.topbar .tb-accent { color: var(--gold-lt); }
.topbar .tb-hide { display: none; }

@media (min-width: 800px) {
  .topbar .wrap { justify-content: space-between; text-align: left; }
  .topbar .tb-hide { display: inline; }
}

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dk);
}
.hdr .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .75rem;
}

/* Le menu mobile (.nav) est un enfant du header et passe en position fixed
   avec z-index 99. Sans z-index propre, le logo et le bouton bascule — non
   positionnés — se retrouvent peints SOUS l'overlay et deviennent
   inatteignables une fois le menu ouvert. On les remonte au-dessus. */
.brand, .nav-toggle { position: relative; z-index: 101; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/* Logo officiel PGC (Tour Eiffel + monogramme, or sur fond transparent).
   Le header utilise le monogramme seul : dans le verrouillage complet, la
   ligne « GÉNIE CLIM » tomberait à ~6px de haut, illisible. Le nom reste
   porté par le texte HTML à côté. Le footer, lui, peut afficher le
   verrouillage complet, où la taille le permet. */
.brand-logo {
  height: 54px; width: auto; flex: none; display: block;
  transition: filter .4s ease;
}
@media (max-width: 767px) { .brand-logo { height: 44px; } }

/* Header transparent au sommet du Hero : le logo doré doit rester lisible
   au-dessus de la pierre claire de la photo. Ombre très discrète, pas de
   halo ni d'aplat derrière le logo. */
body.hero-page .site-top:not(.is-scrolled) .brand-logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .32));
}
body.hero-page .site-top:not(.is-scrolled) .brand-name {
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.foot-logo { height: 88px; width: auto; display: block; margin-bottom: 1rem; }

/* Ancien pastille « PGC » du placeholder — conservée pour d'éventuels
   usages résiduels, plus référencée dans le header ni le footer. */
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.brand-txt { line-height: 1.2; }
.brand-name {
  color: var(--cream); font-size: .9rem;
  letter-spacing: .13em; font-weight: 600;
}
.brand-sub {
  color: var(--muted); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
/* Sous 430px, le sous-titre ne tient plus à côté du bouton Menu : il passait
   sur trois lignes et faisait déborder l'en-tête sous l'overlay du menu. */
@media (max-width: 430px) { .brand-sub { display: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--line-dk);
  color: var(--cream); border-radius: var(--radius);
  padding: .55rem .8rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-bars { display: block; width: 16px; height: 10px; position: relative; }
.nav-bars::before, .nav-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.nav-bars::before { top: 0; } .nav-bars::after { bottom: 0; }

.nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  display: none;
  flex-direction: column;
  /* La marge haute doit dégager la barre haute + l'en-tête collant, sinon le
     premier lien passe sous le logo quand le menu est ouvert en haut de page. */
  padding: 7rem var(--gut) 2rem;
  overflow-y: auto;
}
.nav[data-open="true"] { display: flex; }
.nav a {
  color: var(--cream); text-decoration: none;
  font-family: var(--font-title); font-size: 1.6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-dk);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-lt); }
.nav .btn { margin-top: 1.4rem; font-family: var(--font-body); font-size: .9rem; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: 1.4rem; padding: 0; background: none; overflow: visible; inset: auto;
  }
  .nav a {
    font-family: var(--font-body); font-size: .84rem;
    border-bottom: 0; padding: .3rem 0; color: #CFC7B8;
    border-bottom: 1px solid transparent;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--gold-lt); border-bottom-color: var(--gold); }
  .nav .btn { margin-top: 0; padding: .7rem 1.15rem; color: var(--ink); border-bottom: 0; }
  .nav .btn:hover { border-bottom: 0; }
}

body[data-nav-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero — pages internes (fond uni, sans photo)
   Ce bloc sert de repli pour d'éventuelles pages qui n'ont pas de Hero photo.
   La page d'accueil utilise .hero-premium ci-dessous, pas .hero.
   -------------------------------------------------------------------------- */
.hero { background: var(--ink-soft); border-bottom: 1px solid var(--line-dk); }
.hero .wrap { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.hero-copy h1 { color: var(--cream); margin-bottom: .7rem; }
.hero-copy h1 em { font-style: normal; color: var(--gold-lt); display: block; }
.hero-copy p { color: #B0A794; max-width: 46ch; margin-bottom: 1.6rem; }

/* --------------------------------------------------------------------------
   6 bis. Bandeau + header unifiés au-dessus du Hero (accueil uniquement)
   -------------------------------------------------------------------------- */

/* .site-top n'existe que dans le HTML de index.html : ces règles n'ont donc
   aucun effet sur les autres pages, qui gardent .topbar/.hdr tels quels. */
.site-top {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: background-color .4s ease;
}
body.hero-page .site-top .topbar,
body.hero-page .site-top .hdr {
  background: transparent;
  border-color: transparent;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
body.hero-page .site-top .hdr { backdrop-filter: none; }

body.hero-page .site-top.is-scrolled {
  background: var(--ink-deep);
}
body.hero-page .site-top.is-scrolled .topbar { background: transparent; }
body.hero-page .site-top.is-scrolled .hdr {
  background: rgba(22, 21, 15, .88);
  border-color: var(--line-dk);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}

/* Bandeau : « Devis gratuit » à gauche, e-mail + téléphone à droite.
   Le numéro est traité comme un CTA : plus gros, en gras, doré, avec une
   icône — il doit se voir sur toutes les pages, pas se fondre dans la ligne. */
.tb-contact { white-space: nowrap; display: inline-flex; align-items: center; }

.topbar a.tb-tel {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .015em;
  color: var(--gold-lt);
  padding: .12rem .55rem; margin-left: .1rem;
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.topbar a.tb-tel:hover,
.topbar a.tb-tel:focus-visible {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
  text-decoration: none;
}
.tb-tel-ico { width: 14px; height: 14px; flex: none; }

@media (max-width: 560px) {
  .tb-email, .tb-email-sep { display: none; }
  .topbar a.tb-tel { font-size: 1rem; padding: .2rem .6rem; }
}

/* --------------------------------------------------------------------------
   6 ter. Hero premium — accueil uniquement
   -------------------------------------------------------------------------- */
.hero-premium {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  color: var(--cream);
  background: var(--ink-deep);
  /* Remonte sous le bandeau/header transparent pour que la photo occupe
     tout le haut de l'écran. Valeurs calibrées sur la hauteur réelle du
     bandeau (variable selon breakpoint) + de l'en-tête. */
  margin-top: calc(-1 * var(--site-top-h, 96px));
}

.hero-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-bg-wrap picture,
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg {
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  animation: hero-kenburns 17s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.022); }
}

/* Gradient horizontal : protège le texte à gauche sans assombrir Paris à droite. */
.hero-premium::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(22, 21, 15, .86) 0%,
    rgba(22, 21, 15, .62) 26%,
    rgba(22, 21, 15, .22) 52%,
    rgba(22, 21, 15, 0) 70%);
}
/* Gradient vertical haut : le sommet de la photo est clair (plafond, pierre) —
   nécessaire pour que le bandeau/header restent lisibles en transparence. */
.hero-premium::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14, 13, 10, .8) 0%,
    rgba(14, 13, 10, .38) 16%,
    rgba(14, 13, 10, 0) 34%);
}

.hero-premium-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; align-items: center;
  padding-top: var(--site-top-h, 96px);
}
.hero-premium-copy { max-width: 30ch; }

.hero-eyebrow-lt {
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-lt); font-weight: 600; margin: 0 0 1rem;
}
.hero-premium h1 {
  color: var(--cream); margin: 0 0 .85rem; font-size: clamp(2.3rem, 5.4vw, 3.7rem);
}
.hero-premium h1 em { font-style: normal; color: var(--gold-lt); display: block; }

.hero-sentinel { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; }
.hero-sub {
  font-size: 1rem; letter-spacing: .04em; color: var(--gold-lt);
  margin: 0 0 .6rem;
}
.hero-metiers {
  font-size: .88rem; color: #D8D0C0; letter-spacing: .02em;
  margin: 0 0 1.9rem;
}
.hero-premium .btn-row { gap: .8rem; }

/* Apparition progressive au chargement — pas liée au scroll. */
.hero-anim {
  opacity: 0; transform: translateY(15px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-premium[data-loaded="true"] .hero-anim { opacity: 1; transform: none; }
.hero-anim:nth-of-type(1) { transition-delay: .05s; }
.hero-anim:nth-of-type(2) { transition-delay: .16s; }
.hero-anim:nth-of-type(3) { transition-delay: .27s; }
.hero-anim:nth-of-type(4) { transition-delay: .38s; }
.hero-anim:nth-of-type(5) { transition-delay: .49s; }

.no-js .hero-anim { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-anim { opacity: 1; transform: none; transition: none; }
}

/* La hauteur réelle du bandeau + en-tête est mesurée en JS et posée sur
   :root en --site-top-h (voir main.js, module heroPremium). Elle varie
   selon que le bandeau tient sur une ou deux lignes, ce qui ne suit pas
   forcément les points de rupture ci-dessous — d'où la mesure plutôt
   qu'une valeur par breakpoint. Les var() ont un repli statique pour le
   tout premier rendu (avant que le JS ait mesuré) et pour le mode no-js. */

/* ---- Desktop (≥768px) : composition d'origine préservée, texte à gauche ---- */
@media (min-width: 768px) {
  .hero-premium-inner { min-height: 100vh; min-height: 100svh; }
  .hero-premium .wrap { padding-block: 0; }
}

/* Entre 768 et ~1150px, la fenêtre est plus haute que large par rapport au
   16:9 de la photo : un recadrage centré perd complètement la Tour Eiffel
   à droite (vérifié au rendu). On décale légèrement vers la droite, moins
   qu'en mobile, pour la garder visible sans sacrifier le mur de gauche. */
@media (min-width: 768px) and (max-width: 1150px) {
  .hero-bg { object-position: 66% center; }
}

/* ---- Mobile (<768px) : cadrage resserré sur salon + Tour Eiffel,
   texte dans le tiers inférieur, gradient vertical dominant. ---- */
@media (max-width: 767px) {
  .hero-premium { min-height: 92svh; min-height: 92vh; }
  /* Calibré sur le rendu réel, pas deviné : mesure au pixel sur l'image
     source (2752×1536), la Tour Eiffel occupe ~87,5%-94% de la largeur.
     72% la sortait entièrement du cadre sur iPhone standard (390×776).
     92% l'inclut en entier ; le mur de pierre et le canapé gauche
     disparaissent (assumé, voir §7 du brief), le canapé droit et un
     olivier restent visibles. Voir compte-rendu final pour le calcul. */
  .hero-bg { object-position: 92% center; }
  .hero-premium-inner {
    align-items: flex-end;
    padding-bottom: clamp(2rem, 9vh, 3rem);
    min-height: 92svh; min-height: 92vh;
  }
  .hero-premium-copy { max-width: 32ch; }
  .hero-premium::before {
    background: linear-gradient(180deg,
      rgba(14, 13, 10, .12) 0%,
      rgba(14, 13, 10, .22) 42%,
      rgba(14, 13, 10, .82) 76%,
      rgba(14, 13, 10, .92) 100%);
  }
  .hero-premium::after {
    background: linear-gradient(180deg,
      rgba(14, 13, 10, .68) 0%,
      rgba(14, 13, 10, .2) 20%,
      rgba(14, 13, 10, 0) 36%);
  }
  .hero-premium .btn-row { flex-direction: column; align-items: stretch; }
  .hero-premium .btn { text-align: center; }
}

/* --------------------------------------------------------------------------
   7. Bande de chiffres clés
   -------------------------------------------------------------------------- */
.stats { background: var(--ink); border-bottom: 1px solid var(--line-dk); }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--line-dk);
}
.stat {
  padding: 1.3rem .8rem; text-align: center;
  border-right: 1px solid var(--line-dk); border-bottom: 1px solid var(--line-dk);
}
.stat-n { color: var(--gold-lt); font-family: var(--font-title); font-size: 1.9rem; line-height: 1; }
.stat-l { color: var(--muted); font-size: .72rem; margin-top: .35rem; letter-spacing: .04em; }

@media (min-width: 760px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line-lt);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--text-2); font-size: .92rem; margin-bottom: .9rem; }
.card ul { color: var(--text-2); font-size: .9rem; }
.card-foot { margin-top: auto; padding-top: .9rem; }
.card-price {
  font-size: .82rem; font-weight: 600; color: var(--gold-ink);
  letter-spacing: .02em;
}
.card-link {
  font-size: .84rem; font-weight: 600; color: var(--gold-ink);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.card-link:hover { color: var(--text); }

.card-ico {
  width: 34px; height: 34px; margin-bottom: .85rem;
  color: var(--gold-ink);
}
.card-ico svg { width: 100%; height: 100%; display: block; }

/* Carte sur fond sombre */
.card-dk {
  background: var(--ink-soft); border-color: var(--line-dk);
}
.card-dk h3 { color: var(--gold-lt); }
.card-dk p, .card-dk ul { color: #B7AF9F; }
.card-dk .card-ico { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Tarifs
   -------------------------------------------------------------------------- */
.price-card {
  background: var(--paper); border: 1px solid var(--line-lt);
  border-radius: var(--radius); padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column;
}
.price-card h3 { font-size: 1.22rem; margin-bottom: .3rem; }
.price-val {
  font-family: var(--font-title); font-size: 2.1rem; color: var(--gold-ink);
  line-height: 1.1; margin: .5rem 0 .1rem;
}
.price-from { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); }
.price-card p { font-size: .89rem; color: var(--text-2); }
.price-note {
  margin-top: auto; padding-top: 1rem; font-size: .78rem; color: var(--text-2);
  border-top: 1px solid var(--line-lt);
}

.tva-note {
  font-size: .82rem; color: var(--text-2);
  background: var(--paper); border: 1px solid var(--line-lt);
  border-left: 3px solid var(--gold);
  padding: .9rem 1.1rem; border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   10. Études de cas
   -------------------------------------------------------------------------- */
.case {
  background: var(--paper); border: 1px solid var(--line-lt);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.case-media { background: var(--cream-2); position: relative; }
.case-media img { width: 100%; height: 210px; object-fit: cover; }
.case-body { padding: 1.3rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.case-tag {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700; margin-bottom: .4rem;
}
.case h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.case-loc { font-size: .8rem; color: var(--text-2); margin-bottom: .7rem; }
.case p { font-size: .9rem; color: var(--text-2); }
.case-amount {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-lt);
  font-size: .85rem; font-weight: 700; color: var(--text);
}

/* Une carte CLAIRE posée dans une section SOMBRE hérite sinon des règles de
   titre de la section : le h3 passait en or clair sur fond papier, soit
   1,76:1 — illisible. On rétablit la couleur de texte de la carte. */
.s-dark   .case h3, .s-soft   .case h3, .s-darker .case h3,
.s-dark   .card:not(.card-dk) h3, .s-soft .card:not(.card-dk) h3,
.s-darker .card:not(.card-dk) h3,
.s-dark   .price-card h3, .s-soft .price-card h3 { color: var(--text); }

/* `.case p` (0,1,1) l'emportait sur `.case-tag` et `.case-amount` (0,1,0) :
   l'accent doré et le montant en gras perdaient leur couleur. */
.case p.case-tag { color: var(--gold-ink); }
.case p.case-amount { color: var(--text); }

/* Carte de réalisation sans photo disponible : la carte fonctionne en texte
   seul, sans zone réservée vide. .case-body porte déjà son propre padding,
   il suffit de ne pas monter .case-media. */
.case--sans-photo .case-body { padding-top: 1.5rem; }

/* Idem pour la fiche détaillée : la grille repasse en une seule colonne
   pour cette carte précise plutôt que de laisser un vide à la place du
   média. Réintroduire .case-full-media dans le HTML suffira à retrouver
   la mise en page à deux colonnes le jour où une photo est disponible. */
.case-full--sans-photo .case-full-grid { grid-template-columns: 1fr; }

/* Fiche détaillée (page réalisations) */
.case-full {
  background: var(--paper); border: 1px solid var(--line-lt);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 1.6rem;
}
.case-full-grid { display: grid; }
.case-full-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.case-full-body { padding: 1.7rem 1.5rem; }
.case-full-body h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.case-full dl { margin: 1.1rem 0 0; }
.case-full dt {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700; margin-top: .95rem;
}
.case-full dd { margin: .25rem 0 0; font-size: .92rem; color: var(--text-2); }
.case-full dd ul { margin: .3rem 0 0; }

@media (min-width: 860px) {
  .case-full-grid { grid-template-columns: .85fr 1.15fr; }
  .case-full-media img { min-height: 100%; }
}

/* Filtres */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-btn {
  background: transparent; border: 1px solid var(--line-lt); color: var(--text-2);
  border-radius: 999px; padding: .5rem 1.05rem;
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.filter-btn:hover { border-color: var(--gold-ink); color: var(--text); }
.filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold-lt); }

.filter-empty { display: none; color: var(--text-2); font-style: italic; }
.filter-empty[data-show="true"] { display: block; }

/* --------------------------------------------------------------------------
   11. Marques & clients
   -------------------------------------------------------------------------- */
.brands { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.brand-chip {
  border: 1px solid var(--line-dk); color: #CFC7B8;
  border-radius: 999px; padding: .5rem 1.1rem;
  font-size: .82rem; letter-spacing: .05em;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.s-cream .brand-chip, .s-cream2 .brand-chip { border-color: var(--line-lt); color: var(--text-2); }

/* Bandeau de marques défilant en continu, façon "logo showcase".
   Deux groupes identiques mis bout à bout : on anime la piste de 0 à -50%,
   pile la largeur d'un groupe, donc la boucle est invisible. */
.brands-section { overflow: hidden; }
.marquee {
  position: relative;
  overflow: hidden;
  margin-top: .3rem;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-group {
  display: flex; flex: none; align-items: center;
  gap: .8rem; padding-right: .8rem;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee .brand-chip {
  font-size: .92rem; padding: .65rem 1.35rem;
  border-color: #3A342B;
}
.marquee:hover .brand-chip, .marquee:focus-within .brand-chip { border-color: var(--gold); color: var(--gold-lt); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

.clients {
  display: flex; flex-wrap: wrap; gap: .7rem 2rem; justify-content: center;
  list-style: none; padding: 0; margin: 0;
}
.clients li {
  font-family: var(--font-title); font-size: 1.05rem;
  color: #BDB5A5; margin: 0;
}

/* --------------------------------------------------------------------------
   11 ter. Bandeau de références clients (accueil, haut de page)
   Volontairement distinct du bandeau des marques : pas de pastilles, une
   serif plus grande, un losange doré en séparateur, un défilement plus lent.
   -------------------------------------------------------------------------- */
.refs-band {
  background: var(--ink-deep);
  border-top: 1px solid var(--line-dk);
  border-bottom: 1px solid var(--line-dk);
  padding-block: 1.9rem;
  overflow: hidden;
}
.refs-band .eyebrow { text-align: center; color: var(--gold); margin-bottom: 1.15rem; }

.refs-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
          mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
.refs-track {
  display: flex; width: max-content;
  animation: refs-scroll 52s linear infinite;   /* plus lent que les marques */
}
.refs-group { display: flex; flex: none; align-items: center; }
.ref-item {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: #E4DCCB; white-space: nowrap; letter-spacing: .01em;
}
.ref-sep {
  color: var(--gold); font-size: .55em; margin-inline: 1.5rem;
  transform: translateY(-.15em);
}
.refs-marquee:hover .refs-track,
.refs-marquee:focus-within .refs-track { animation-play-state: paused; }

@keyframes refs-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .refs-track {
    animation: none; width: auto;
    flex-wrap: wrap; justify-content: center; gap: .2rem 0;
  }
  .refs-group[aria-hidden="true"] { display: none; }
  .refs-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .refs-group { flex-wrap: wrap; justify-content: center; }
}

/* --------------------------------------------------------------------------
   11 bis. Témoignages
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--paper); border: 1px solid var(--line-lt);
  border-radius: var(--radius); padding: 1.6rem 1.4rem;
  margin: 0; display: flex; flex-direction: column;
}
.quote-mark {
  font-family: var(--font-title); font-size: 2.4rem; line-height: .7;
  color: var(--gold); margin-bottom: .6rem;
}
.quote blockquote {
  margin: 0 0 1rem; font-size: .95rem; line-height: 1.7; color: var(--text-2);
}
.quote figcaption {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-lt);
}
.quote-auth { display: block; font-weight: 700; color: var(--text); font-size: .88rem; }
.quote-meta { display: block; color: var(--text-2); font-size: .78rem; margin-top: .15rem; }
.quote-src {
  display: inline-block; margin-top: .5rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-ink);
}

.quote-stars {
  color: var(--gold-ink); font-size: .95rem; letter-spacing: .12em; margin-bottom: .5rem;
}

.quotes-note {
  margin: 1.6rem 0 0; font-size: .8rem; color: var(--text-2); text-align: center;
}
.quotes-note a { color: var(--gold-ink); font-weight: 600; }

/* Bandeau de note globale */
.rating-band {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .3rem .7rem; margin-top: .6rem;
}
.rating-score {
  font-family: var(--font-title); font-size: 2rem; line-height: 1; color: var(--text);
}
.rating-of { color: var(--text-2); font-size: .9rem; }

/* --------------------------------------------------------------------------
   12. Bande savoir-faire (deux photos)
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: 1.1rem; }
.duo figure { margin: 0; border: 1px solid var(--line-dk); border-radius: var(--radius); overflow: hidden; }
.duo img { width: 100%; height: 300px; object-fit: cover; }
.duo figcaption {
  padding: .85rem 1.1rem; font-size: .84rem; color: #B7AF9F; background: var(--ink-soft);
}
.s-cream .duo figure, .s-cream2 .duo figure { border-color: var(--line-lt); }
.s-cream .duo figcaption, .s-cream2 .duo figcaption { background: var(--paper); color: var(--text-2); }

@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .duo.trio { grid-template-columns: 1fr 1fr 1fr; } }

/* Galerie « Nos interventions » (page réalisations) */
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gal-item {
  margin: 0; border: 1px solid var(--line-lt); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
}
.gal-item img { width: 100%; height: 230px; object-fit: cover; display: block; }
.gal-item figcaption {
  padding: .75rem .9rem; font-size: .8rem; color: var(--text-2); line-height: 1.45;
}

/* --------------------------------------------------------------------------
   13. Module de réservation
   -------------------------------------------------------------------------- */
.booking {
  background: var(--paper); border: 1px solid var(--line-lt);
  border-radius: var(--radius); padding: 1.25rem 1.1rem;
}
@media (min-width: 760px) { .booking { padding: 1.6rem 1.75rem; } }

/* Compactage du module : il occupait presque toute la page d'accueil.
   La cause principale était le calendrier en aspect-ratio:1 — à 820px de
   large, chaque case faisait ~104px de haut, soit plus de 600px pour la
   seule grille. On fixe une hauteur de case et on resserre les marges,
   sans toucher au fonctionnement ni aux cibles tactiles (44px mini). */
#reservation .wrap-narrow { max-width: 900px; }
#reservation .sec-head { margin-bottom: 1.7rem; }

/* Sélecteurs préfixés par .booking : les règles de base du calendrier sont
   définies plus bas dans la feuille et l'emporteraient sinon (même
   spécificité, déclaration postérieure). */
.booking .cal-cell { aspect-ratio: auto; }
.booking .cal-day { height: 46px; }
.booking .cal-grid { gap: 5px; }
.booking .cal-head { margin-bottom: .7rem; }
.booking .cal-note { margin-top: .7rem; font-size: .78rem; }

.booking .steps { margin-bottom: 1.4rem; }
.booking .subhead { margin: 1.15rem 0 .55rem; }
.booking .slots { gap: .45rem; }
.booking .slot { padding: .6rem .5rem; }
.booking .field { margin-bottom: .8rem; }
.booking .recap { margin-top: 1rem; padding: .9rem 1.05rem; }
.booking .panel-nav { margin-top: 1.2rem; }
.booking .field input, .booking .field select { padding: .6rem .75rem; }

/* Fil d'Ariane numéroté */
.steps {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .4rem .5rem;
  list-style: none; padding: 0; margin: 0 0 1.8rem;
}
.steps li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.step-n {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-2); color: var(--text-2);
  font-size: .76rem; font-weight: 700;
}
.steps li[aria-current="step"] .step-n { background: var(--gold); color: var(--ink); }
.steps li[data-done="true"] .step-n { background: var(--gold-ink); color: var(--cream); }
.steps li[aria-current="step"] .step-t { color: var(--text); font-weight: 600; }
.step-t { color: var(--text-2); }
.step-bar { width: 22px; height: 1px; background: #CFC2AB; }

.panel { display: none; }
.panel[data-active="true"] { display: block; }

/* Calendrier */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .9rem;
}
.cal-title { font-family: var(--font-title); font-size: 1.2rem; text-transform: capitalize; }
.cal-nav {
  background: transparent; border: 1px solid var(--line-lt); color: var(--text);
  width: 34px; height: 34px; border-radius: var(--radius);
  font: inherit; cursor: pointer; line-height: 1;
}
.cal-nav:hover:not([disabled]) { border-color: var(--gold-ink); color: var(--gold-ink); }
.cal-nav[disabled] { opacity: .35; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-size: .68rem; font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .05em;
  padding-bottom: .3rem;
}
.cal-cell { aspect-ratio: 1; }
.cal-day {
  width: 100%; height: 100%;
  background: var(--cream); border: 1px solid var(--line-lt); color: var(--text);
  border-radius: var(--radius); font: inherit; font-size: .85rem; cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.cal-day:hover:not([disabled]) { border-color: var(--gold-ink); background: var(--paper); }
.cal-day[disabled] { background: transparent; color: #B9B0A0; border-color: transparent; cursor: not-allowed; }
.cal-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold-lt); font-weight: 700; }

/* Sur petit écran, la grille à 7 colonnes réduit chaque jour sous la cible
   tactile confortable de 44px. On récupère de la largeur sur les marges de la
   carte et on garantit la hauteur. */
@media (max-width: 520px) {
  .booking { padding: 1.15rem .8rem; }
  .cal-grid { gap: 3px; }
  .booking .cal-cell { aspect-ratio: auto; }
  .booking .cal-day { min-height: 44px; height: 44px; }
}

.cal-note { font-size: .8rem; color: var(--text-2); margin-top: .9rem; }

/* Créneaux */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: .5rem; }
.slot {
  background: var(--cream); border: 1px solid var(--line-lt); color: var(--text);
  border-radius: var(--radius); padding: .7rem .5rem;
  font: inherit; font-size: .85rem; cursor: pointer; text-align: center;
}
.slot:hover { border-color: var(--gold-ink); }
.slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold-lt); font-weight: 700; }

.subhead {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-ink); margin: 1.6rem 0 .7rem;
}

/* Formulaire */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.req { color: #A3402E; }

.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .8rem;
  font: inherit; font-size: .92rem;
  background: var(--cream); color: var(--text);
  border: 1px solid var(--line-lt); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--paper); }
.field textarea { min-height: 130px; resize: vertical; }

.field-err {
  display: none; margin-top: .3rem;
  font-size: .79rem; font-weight: 600; color: #A3402E;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: #A3402E; }
.field[data-invalid="true"] .field-err { display: block; }

.fgrid { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } }

/* Compteur d'unités */
.counter { display: flex; align-items: center; gap: .7rem; }
.counter button {
  width: 40px; height: 40px; flex: none;
  background: var(--cream); border: 1px solid var(--line-lt); color: var(--text);
  border-radius: var(--radius); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.counter button:hover:not([disabled]) { border-color: var(--gold-ink); color: var(--gold-ink); }
.counter button[disabled] { opacity: .4; cursor: not-allowed; }
.counter output {
  min-width: 46px; text-align: center;
  font-family: var(--font-title); font-size: 1.5rem; font-weight: 600;
}

/* Récapitulatif de prix */
.recap {
  background: var(--cream-2); border: 1px solid var(--line-lt);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-top: 1.4rem;
}
.recap-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem; padding: .32rem 0;
}
.recap-row.sub { color: var(--text-2); font-size: .82rem; }
.recap-row.total {
  border-top: 1px solid #D5CAB4; margin-top: .45rem; padding-top: .7rem;
  font-weight: 700; font-size: 1rem;
}
.recap-pay { font-size: .78rem; color: var(--text-2); margin: .6rem 0 0; }

/* Récapitulatif final */
.summary { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.summary li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line-lt); font-size: .9rem;
}
.summary dt, .summary .k { color: var(--text-2); }
.summary .v { font-weight: 600; text-align: right; }

.consent { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1.2rem; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .18rem; }
.consent label { font-size: .84rem; color: var(--text-2); line-height: 1.55; }

.panel-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.panel-nav .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .panel-nav .btn { flex: 0 0 auto; } }

.form-msg {
  display: none; margin-top: 1.2rem;
  border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .9rem;
}
.form-msg[data-show="true"] { display: block; }
.form-msg.ok { background: #EAF0E4; border: 1px solid #B9CBA6; color: #33471F; }
.form-msg.err { background: #F6E7E4; border: 1px solid #DDB4AB; color: #7A2A1B; }

.booking-done { text-align: center; padding: 1.5rem 0; }
.booking-done h3 { color: var(--text); }

/* --------------------------------------------------------------------------
   14. Accordéon FAQ
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line-lt); }
.acc-item { border-bottom: 1px solid var(--line-lt); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 1.05rem 0; text-align: left;
  font: inherit; font-size: .98rem; font-weight: 600;
}
.acc-btn:hover { color: var(--gold-ink); }
.acc-sign { flex: none; width: 15px; height: 15px; position: relative; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.acc-sign::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.acc-sign::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.acc-btn[aria-expanded="true"] .acc-sign::after { transform: rotate(90deg); opacity: 0; }
.acc-pan { display: none; padding: 0 0 1.15rem; }
.acc-pan[data-open="true"] { display: block; }
.acc-pan p { font-size: .92rem; color: var(--text-2); margin-bottom: .6rem; }
.acc-pan p:last-child { margin-bottom: 0; }

.s-dark .acc, .s-dark .acc-item, .s-soft .acc, .s-soft .acc-item { border-color: var(--line-dk); }
.s-dark .acc-btn:hover, .s-soft .acc-btn:hover { color: var(--gold-lt); }
.s-dark .acc-pan p, .s-soft .acc-pan p { color: #B7AF9F; }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }

.info-block { margin-bottom: 1.6rem; }
.info-block h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.info-block p, .info-block ul { font-size: .92rem; color: var(--text-2); margin-bottom: 0; }
.info-block a { color: var(--gold-ink); font-weight: 600; }

.legal { font-size: .84rem; color: var(--text-2); }
.legal h3 { font-size: 1rem; margin: 1.4rem 0 .3rem; color: var(--text); }
.legal p { margin-bottom: .5rem; }

.ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: #F2E4C9; color: #5C4718;
  padding: .08em .38em; border-radius: 2px; border: 1px dashed #C9A961;
  white-space: nowrap;
}
.s-dark .ph, .s-soft .ph, .s-darker .ph, .site-foot .ph, .topbar .ph, .callbar .ph {
  background: #2B2417; color: var(--gold-lt); border-color: #5C4718;
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.site-foot { background: var(--ink-deep); color: #A79E8D; font-size: .87rem; }
.foot-grid { display: grid; gap: 2rem; padding-block: var(--step); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.foot-grid h4 {
  color: var(--gold-lt); font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .8rem;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .45rem; }
.foot-grid a { color: #A79E8D; text-decoration: none; }
.foot-grid a:hover { color: var(--gold-lt); text-decoration: underline; }
.foot-brand p { color: #8C8272; font-size: .84rem; max-width: 34ch; }

.foot-bottom {
  border-top: 1px solid var(--line-dk);
  padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  /* #7E7666 ne donnait que 4,32:1 sur --ink-deep, sous le seuil AA de 4,5.
     #888070 monte à ~4,97:1. */
  justify-content: space-between; font-size: .78rem; color: #888070;
}

/* --------------------------------------------------------------------------
   17. Barre d'appel mobile
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink-deep); border-top: 1px solid var(--line-dk);
}
.callbar a {
  padding: .85rem .5rem; text-align: center; text-decoration: none;
  font-size: .84rem; font-weight: 600; color: var(--cream);
}
.callbar a + a { border-left: 1px solid var(--line-dk); background: var(--gold); color: var(--ink); }

body { padding-bottom: 56px; }

@media (min-width: 1000px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   18. Apparition au scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal[data-seen="true"] { opacity: 1; transform: none; }

/* Apparition décalée à l'intérieur d'une grille : le conteneur ne bouge
   plus, ce sont ses enfants qui entrent l'un après l'autre. */
.reveal[data-stagger] { opacity: 1; transform: none; transition: none; }
.reveal[data-stagger] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal[data-stagger][data-seen="true"] > * { opacity: 1; transform: none; }
.reveal[data-stagger] > *:nth-child(1) { transition-delay: .00s; }
.reveal[data-stagger] > *:nth-child(2) { transition-delay: .09s; }
.reveal[data-stagger] > *:nth-child(3) { transition-delay: .18s; }
.reveal[data-stagger] > *:nth-child(4) { transition-delay: .27s; }
.reveal[data-stagger] > *:nth-child(5) { transition-delay: .36s; }
.reveal[data-stagger] > *:nth-child(6) { transition-delay: .45s; }

/* Très léger zoom des photos au survol des cartes et figures. */
.case-media, .case-full-media, .duo figure picture, .gal-item {
  overflow: hidden;
}
.case-media img, .case-full-media img, .duo figure img, .gal-item img {
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.case:hover .case-media img,
.case-full:hover .case-full-media img,
.duo figure:hover img,
.gal-item:hover img { transform: scale(1.035); }

/* Compteurs : la valeur finale est dans le HTML, l'animation ne fait que
   la remplacer temporairement — rien ne dépend de JavaScript. */
.stat-n[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal[data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .case-media img, .case-full-media img, .duo figure img, .gal-item img { transition: none; }
  .case:hover .case-media img,
  .case-full:hover .case-full-media img,
  .duo figure:hover img,
  .gal-item:hover img { transform: none; }
}

/* Si JavaScript est désactivé, rien ne doit rester masqué */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .panel { display: block; }
.no-js .acc-pan { display: block; }
.no-js .nav { position: static; display: flex; flex-direction: column; padding: 0 var(--gut) 1rem; }

/* Champ leurre anti-robots : hors écran, jamais atteint au clavier.
   display:none est évité — certains robots ignorent les champs masqués
   de cette manière et le piège perdrait son intérêt. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}