/* ======================================================================
   CARAVELLI COSTRUZIONI — CSS GLOBAL "AMAN INSPIRED" (PRODUCTION 2026)
   Version unifiée : tokens, layout, composants, états pilotés par JS
   - Seasonal OFF (neige / noël supprimés)
   - Reveal on scroll via JS
   - Performance Safari / iPhone
   - Accessibilité premium
   - ZÉRO COMPROMIS : signature Aman (silence, matière, air)
   ====================================================================== */

/* ----------------------------------------------------------------------
   00) RESET & BASELINE (stable)
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { 
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--sans);
  line-height: 1.15;
  scroll-behavior: smooth;
}

body { 
  margin: 0; 
  padding: 0; 
  height: 100%; 
  background: var(--bg-0);
  color: var(--ink-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

img, svg, video, canvas { 
  display: block; 
  max-width: 100%; 
  height: auto;
}

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

button, input, textarea, select { 
  font: inherit; 
  color: inherit; 
  border: none;
  background: none;
}

button { 
  cursor: pointer; 
  text-transform: none;
}

ul, ol {
  list-style: none;
}

::selection { 
  background: rgba(175, 143, 92, 0.22); 
  color: var(--ink-0); 
}

/* ----------------------------------------------------------------------
   00.1) TOKENS (ADN ARCHITECTURAL — AMAN SILENCE)
   ---------------------------------------------------------------------- */
:root {
  /* -------- Brand tokens (Palettes Ivoire & Pierre) -------- */
  --bg-0: #f5f2ec;           /* Fond ivoire chaud */
  --bg-1: #efeae2;           /* Pierre claire */
  --bg-2: #e6dfd3;           /* Sable minéral */
  --bg-3: #fbfaf7;           /* Papier luxe (cartes) */

  --ink-0: rgba(22, 22, 22, 0.92); /* Charbon doux */
  --ink-1: rgba(22, 22, 22, 0.74);
  --ink-2: rgba(22, 22, 22, 0.58);
  --ink-3: rgba(22, 22, 22, 0.42);

  /* -------- Bronze discret (Prestige) -------- */
  --gold-0: #af8f5c;         /* Bronze Aman-like */
  --gold-1: rgba(175, 143, 92, 0.55);
  --gold-2: rgba(175, 143, 92, 0.18);
  --gold-3: rgba(175, 143, 92, 0.10);

  --red-0: #8e1620;
  --red-1: rgba(142, 22, 32, 0.88);
  --red-2: rgba(142, 22, 32, 0.55);

  /* -------- Espacement Master (Système 8px) -------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 48px;
  --s-10: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* -------- Layout -------- */
  --container: 1240px;
  --gutter: 24px;

  /* -------- Radius (Courbes Douces) -------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 40px;

  /* -------- Shadows (Discrètes, Matière) -------- */
  --sh-soft: 0 16px 50px rgba(12, 10, 8, 0.08);
  --sh-strong: 0 26px 85px rgba(12, 10, 8, 0.12);
  --sh-glow: 0 0 0 1px rgba(22, 22, 22, 0.06), 0 16px 70px rgba(12, 10, 8, 0.10);
  --shadow-signature: 0 16px 46px rgba(12, 10, 8, 0.08), 0 0 0 1px rgba(22, 22, 22, 0.06);

  /* -------- Typography (Éditorial, Respiration) -------- */
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Garamond", serif;

  /* -------- Timing -------- */
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 680ms;
  --t-reveal: 1200ms;

  /* -------- Glass (sobre) -------- */
  --glass-bg: rgba(251, 250, 247, 0.72);
  --glass-brd: rgba(22, 22, 22, 0.10);

  /* -------- Background Assets -------- */
  --hero-img: url("../assets/hero/hero-architecture.jpg");
  --hero-soft-img: url("../assets/hero/hero-winter.jpg");
}

/* ----------------------------------------------------------------------
   00.2) BASE & EFFETS DE MATIÈRE (AMAN: subtil, pas d'agressif)
   ---------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  background:
    radial-gradient(circle at 18% 10%, rgba(175,143,92,0.08), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(22,22,22,0.04), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(245,242,236,1));
}

/* Grain Argentique Global (Aman: quasi invisible, sans ressource externe) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0,0,0,0.05) 0.5px, transparent 0.6px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.04) 0.5px, transparent 0.6px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.03) 0.5px, transparent 0.6px);
  background-size: 160px 160px, 220px 220px, 280px 280px;
  mix-blend-mode: multiply;
}

.container {
  width: 100%;
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------------
   01) TYPOGRAPHY — EXIGENCE LITTÉRAIRE (AMAN)
   ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { 
  margin: 0; 
  font-weight: 520; 
  letter-spacing: 0.01em; 
  color: var(--ink-0);
  line-height: 1.08;
}

p { 
  margin: 0; 
  line-height: 1.85; 
  font-size: 1rem; 
  color: var(--ink-1);
}

strong {
  font-weight: 620;
  color: var(--ink-0);
}

.hero-title,
.section-title {
  font-family: var(--serif);
  letter-spacing: 0.01em;
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  margin-bottom: var(--s-6);
  font-weight: 420;
}

.section-intro {
  color: var(--ink-2);
  max-width: 720px;
  line-height: 1.9;
  font-size: 1.08rem;
  margin-bottom: var(--s-8);
}

.kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold-0);
  margin-bottom: var(--s-4);
  display: block;
}

/* ----------------------------------------------------------------------
   02) HEADER & LUXURY NAV (AMAN: clair, aérien, discret)
   ---------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(245, 242, 236, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(22, 22, 22, 0.06);
  transition: transform var(--t-med) ease, background var(--t-med) ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  font-size: 0.95rem;
  font-weight: 620;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-0);
  transition: opacity var(--t-fast) ease;
}

.logo:hover {
  opacity: 0.78;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav-link {
  position: relative;
  text-transform: uppercase;
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  transition: color var(--t-fast) ease;
  padding: var(--s-2) 0;
}

.nav-link:hover,
.nav-link.active { 
  color: var(--ink-0); 
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0; 
  bottom: -6px;
  width: 0; 
  height: 1px;
  background: var(--gold-0);
  transition: width var(--t-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after { 
  width: 100%; 
}

.nav-cta {
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid rgba(22, 22, 22, 0.16);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: var(--ink-0);
  transition: all var(--t-fast) ease;
  background: rgba(251, 250, 247, 0.65);
}

.nav-cta:hover {
  background: var(--gold-0);
  border-color: var(--gold-0);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Suite dans le bloc suivant... */
/* ----------------------------------------------------------------------
   03) SECTIONS & GRID SYSTEM (Rigueur Suisse — AMAN)
   ---------------------------------------------------------------------- */
.section { 
  padding: var(--s-12) 0; 
  position: relative; 
  overflow: hidden;
}

.section-light { background: var(--bg-3); }
.section-dark { background: var(--bg-0); }

.section + .section {
  border-top: 1px solid rgba(22, 22, 22, 0.06);
}

/* Grille de composition bipolaire */
.section-grid {
  display: grid;
  gap: var(--s-10);
  align-items: center;
}

@media (min-width: 900px) {
  .section-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
  
  .section-grid.is-reversed {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

/* ----------------------------------------------------------------------
   04) HERO CINÉMATIQUE (AMAN: lumière, calme, profondeur)
   ---------------------------------------------------------------------- */
.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82vh;
  color: var(--ink-0);
  background-color: var(--bg-0);
  transition: filter var(--t-reveal) ease, opacity var(--t-reveal) ease;
}

.hero {
  background: 
    radial-gradient(circle at 30% 22%, rgba(245,242,236,0.35) 0%, rgba(245,242,236,0.10) 45%, rgba(22,22,22,0.35) 100%),
    linear-gradient(to bottom, rgba(245,242,236,0.15), rgba(245,242,236,0.95)),
    var(--hero-img) center/cover no-repeat;
}

.page-hero {
  min-height: 62vh;
  background: 
    radial-gradient(circle at 32% 18%, rgba(245,242,236,0.30) 0%, rgba(22,22,22,0.25) 100%),
    linear-gradient(to bottom, rgba(245,242,236,0.10), rgba(245,242,236,0.96)),
    var(--hero-soft-img) center/cover no-repeat;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 920px;
  text-align: center;
  padding: 0 var(--gutter);
}

.hero-title {
  font-size: clamp(2.65rem, 7.6vw, 5.0rem);
  line-height: 0.95;
  margin-bottom: var(--s-5);
  transform: translateZ(0);
}

.hero-title span.italic {
  font-style: italic;
  font-weight: 320;
  font-family: var(--serif);
}

.hero-subtitle {
  color: var(--ink-1);
  font-size: clamp(1rem, 2vw, 1.22rem);
  max-width: 680px;
  margin: 0 auto var(--s-8);
  line-height: 1.7;
}

/* ----------------------------------------------------------------------
   05) BOUTONS — LUXURY TACTILE (AMAN: minimal, précis)
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  transition: all var(--t-med) cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  border: 1px solid transparent;
  transform: translateZ(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-0), #9f8456);
  color: #ffffff;
  box-shadow: 0 10px 34px rgba(12, 10, 8, 0.12);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 52px rgba(175, 143, 92, 0.22);
}

.btn-outline {
  border-color: rgba(22, 22, 22, 0.18);
  color: var(--ink-0);
  background: rgba(251, 250, 247, 0.55);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  border-color: var(--gold-0);
  background: var(--gold-3);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------
   06) PROJECTS GRID — PATRIMOINE VISUEL (AMAN: galerie, silence)
   ---------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  gap: var(--s-10);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.project-card {
  background: var(--bg-3);
  border-radius: var(--r-lg);
  border: 1px solid rgba(22, 22, 22, 0.08);
  overflow: hidden;
  box-shadow: var(--shadow-signature);
  transition: all var(--t-med) cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-10px);
  border-color: rgba(175, 143, 92, 0.32);
  box-shadow: var(--sh-strong);
}

.project-thumb {
  height: 420px;
  overflow: hidden;
  position: relative;
  background: #e9e3d8;
}

/* Texture protectrice sur les images (Aman: très fin) */
.project-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(245,242,236,0.00), rgba(22,22,22,0.10));
  z-index: 2;
  pointer-events: none;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
  opacity: 0;
  will-change: transform, opacity;
  filter: saturate(0.95) contrast(0.98);
}

.project-thumb img.loaded {
  opacity: 1;
}

.project-card:hover .project-thumb img {
  transform: scale(1.06);
}

.project-body {
  padding: var(--s-8);
}

.project-body h3 {
  font-family: var(--serif);
  font-size: 1.55rem;
  margin-bottom: var(--s-3);
  font-weight: 420;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.project-tags span {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  background: rgba(22, 22, 22, 0.04);
  border: 1px solid rgba(22, 22, 22, 0.10);
  border-radius: 999px;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------------
   07) SERVICES & EXPERTISE (AMAN: blocs éditoriaux)
   ---------------------------------------------------------------------- */
.services-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.service-card {
  padding: var(--s-10);
  background: linear-gradient(135deg, rgba(255,255,255,0.60), rgba(245,242,236,0.75));
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: var(--r-md);
  transition: all var(--t-med) ease;
  box-shadow: 0 12px 40px rgba(12, 10, 8, 0.06);
}

.service-card:hover {
  background: var(--bg-3);
  border-color: rgba(175, 143, 92, 0.26);
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(12, 10, 8, 0.08);
}

.service-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  margin-bottom: var(--s-4);
  color: var(--gold-0);
}

/* ----------------------------------------------------------------------
   08) FORMULAIRES DE PRESTIGE (Luxe Tactile — AMAN)
   ---------------------------------------------------------------------- */
.contact-form {
  max-width: 800px;
  margin: var(--s-8) auto 0;
}

.form-group-row {
  display: grid;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

@media (min-width: 720px) {
  .form-group-row { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form-field label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-0);
  padding-left: var(--s-2);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 16px 22px;
  background: rgba(251, 250, 247, 0.82);
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: var(--r-sm);
  color: var(--ink-0);
  transition: all var(--t-med) ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(175, 143, 92, 0.55);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px rgba(175, 143, 92, 0.14);
}

.form-field textarea {
  min-height: 180px;
  resize: vertical;
}

.form-note {
  margin-top: var(--s-4);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-3);
  text-align: center;
}

/* ----------------------------------------------------------------------
   09) RÉVÉLATION CINÉMATIQUE (Intersection Observer — AMAN)
   ---------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px) scale(0.99);
  transition: 
    opacity var(--t-reveal) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--t-reveal) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered Delay System (Optionnel via inline styles ou classes) */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }

/* ----------------------------------------------------------------------
   10) INTRO OVERLAY & SIGNATURE (AMAN: sobre, pas démonstratif)
   ---------------------------------------------------------------------- */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 1.4s cubic-bezier(0.85, 0, 0.15, 1);
}

body.intro-seen #intro-overlay {
  transform: translateY(-100%);
}

.intro-inner {
  text-align: center;
}

.intro-brand {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.6vw, 2.2rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-0);
  opacity: 0;
  animation: fadeInOut 4s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  30% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ----------------------------------------------------------------------
   11) FOOTER (Le Point Final — AMAN)
   ---------------------------------------------------------------------- */
.footer {
  padding: var(--s-12) 0 var(--s-8);
  background: var(--bg-0);
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  text-align: center;
}

@media (min-width: 900px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  color: var(--ink-0);
}

.footer-links {
  display: flex;
  gap: var(--s-6);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.footer-links a {
  color: var(--ink-2);
  transition: color var(--t-fast) ease;
}

.footer-links a:hover { color: var(--gold-0); }

/* ----------------------------------------------------------------------
   12) UTILITAIRES & PATCHES SAFARI (clean)
   ---------------------------------------------------------------------- */
.u-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.u-mt-lg { margin-top: var(--s-12); }
.u-mb-lg { margin-bottom: var(--s-12); }
.u-text-gold { color: var(--gold-0); }

/* Désactivation des animations si l'utilisateur le souhaite */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Correction du scintillement Safari lors des transitions */
.hero, .project-card, .btn, .service-card {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ----------------------------------------------------------------------
   13) ÉTATS JS-DRIVEN (Cohérence Totale)
   ---------------------------------------------------------------------- */
body:not(.js-ready) .reveal-on-scroll {
  opacity: 1;
  transform: none;
}

html.cc-paused * {
  animation-play-state: paused !important;
  transition: none !important;
}

body.nav-open {
  overflow: hidden;
}
/* ======================================================================
   14) COMPLÉMENTS AMAN — CLASSES PRÉSENTES DANS TON HTML
   (à coller EN FIN de fichier)
   ====================================================================== */

/* Google Fonts (Inter + Cormorant Garamond) */
:root{
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  --serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Garamond", serif;
}

/* Intro overlay : titre + rideau */
.intro-title{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--ink-2);
  margin-bottom: var(--s-4);
}

.intro-curtain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(175,143,92,0.10), transparent 58%),
    linear-gradient(to bottom, rgba(245,242,236,0.95), rgba(245,242,236,0.65));
  opacity: 0.55;
}

/* Bouton small (utilisé dans l’intro) */
.btn-sm{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border: 1px solid rgba(22,22,22,0.18);
  background: rgba(251,250,247,0.55);
  transition: all var(--t-med) cubic-bezier(0.22,1,0.36,1);
}
.btn-sm:hover{
  border-color: var(--gold-0);
  background: var(--gold-3);
  transform: translateY(-1px);
}

/* Header : bouton burger (mobile) */
.nav-toggle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(22,22,22,0.14);
  background: rgba(251,250,247,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span{
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(22,22,22,0.70);
}

/* Hero : overlay + kicker + boutons */
.hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 18%, rgba(245,242,236,0.40), transparent 55%),
    linear-gradient(to bottom, rgba(245,242,236,0.15), rgba(245,242,236,0.92));
  opacity: 0.7;
  z-index: 1;
}
.hero .hero-content{ z-index: 2; }

.hero-kicker{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--gold-0);
  margin-bottom: var(--s-4);
}

.hero-buttons{
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections : liste raffinée */
.list-refined{
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
  max-width: 820px;
}
.list-refined li{
  position: relative;
  padding-left: 18px;
  color: var(--ink-1);
  line-height: 1.85;
}

/* --- PATCH VISIBILITÉ IMAGES (sécurité chargement) --- */
.project-thumb img {
  opacity: 1 !important;
}

.project-thumb img.loaded {
  opacity: 1 !important;
}
.page-hero{
  background:
    radial-gradient(circle at 30% 20%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 70%),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(0,0,0,0.12));
}
/* ======================================================================
   FINITIONS “1.000.000€” — ADD-ON (non destructif)
   Coller en FIN de style.css
   ====================================================================== */

/* 0) Micro-typographie premium */
:root{
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.2,.8,.2,1);
}

body{
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.hero-title, .section-title{
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 0, "ss01" 0;
}

p{
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
  hanging-punctuation: first last;
}

/* 1) Grille & respiration (justesse Aman-like) */
.section{
  padding: clamp(72px, 9vw, 120px) 0;
}

.container{
  max-width: 1240px;
}

@media (min-width: 1200px){
  .section-grid{ gap: 72px; }
}

/* 2) Header : “verre” plus noble + ligne de séparation invisible */
.header{
  background: rgba(7,7,8,0.72);
  border-bottom-color: rgba(255,255,255,0.045);
}

.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(205,179,139,0.22),
    transparent
  );
  opacity:.35;
  pointer-events:none;
}

/* 3) Liens : underline plus “couture” */
.nav-link::after{
  height: 1px;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(205,179,139,.15));
}

/* 4) Boutons : relief tactil, sans bling */
.btn{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 10px 30px rgba(0,0,0,0.28);
}

.btn-primary{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 18px 60px rgba(0,0,0,0.38);
}

.btn-primary:active{
  transform: translateY(-2px) scale(0.995);
}

.btn-outline{
  background: rgba(255,255,255,0.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

.btn-outline:hover{
  background: rgba(205,179,139,0.10);
}

/* 5) Hero : voile + “grain” plus fin (sans charger) */
.hero::after,
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(205,179,139,0.07), transparent 50%);
  mix-blend-mode: soft-light;
  opacity:.55;
}

/* 6) Cards : bord “émail” + profondeur */
.project-card,
.service-card{
  border-color: rgba(255,255,255,0.07);
}

.project-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08),
      transparent 35%,
      rgba(0,0,0,0.10)
    );
  opacity:.55;
}

.project-card:hover{
  transform: translateY(-10px);
}

/* 7) Images : rendu “galerie” (évite l’effet plat) */
.project-thumb{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.35));
}

.project-thumb img{
  opacity: 1;                 /* sécurité si JS load rate */
  transform: translateZ(0);
  filter: contrast(1.03) saturate(1.03);
}

.project-card:hover .project-thumb img{
  filter: contrast(1.06) saturate(1.06);
}

/* 8) Tags : micro relief + espacement luxe */
.project-tags span{
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.10);
  letter-spacing: .18em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* 9) “Hairlines” : séparateurs invisibles mais présents */
.section + .section{
  border-top-color: rgba(255,255,255,0.03);
}

.section + .section::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
  opacity:.35;
}

/* 10) Focus clavier (accessibilité premium) */
body.keyboard-focus a:focus,
body.keyboard-focus button:focus,
body.keyboard-focus input:focus,
body.keyboard-focus textarea:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(205,179,139,0.22),
    0 0 0 1px rgba(205,179,139,0.35) inset;
  border-radius: 10px;
}

/* 11) Scrollbar (desktop) : détail couture */
@media (hover:hover){
  ::-webkit-scrollbar{ width: 10px; }
  ::-webkit-scrollbar-track{ background: rgba(7,7,8,0.85); }
  ::-webkit-scrollbar-thumb{
    background: rgba(205,179,139,0.18);
    border: 2px solid rgba(7,7,8,0.85);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: rgba(205,179,139,0.28);
  }
}

/* 12) Sécurité motion : adoucit tout sans “wow effect” */
.reveal-on-scroll{
  transition-timing-function: var(--ease-out);
}

.project-card,
.btn,
.service-card{
  transition-timing-function: var(--ease-out);
}
/* ======================================================================
   FINITION AMAN “120.000.000€” — ULTRA SUBTILE (NON DESTRUCTIF)
   Coller en FIN de style.css
   ====================================================================== */

/* A) Palette “pierre” : on garde ton ADN mais on nettoie l’agressivité visuelle */
:root{
  --paper-0: #f6f2eb;        /* ivoire pierre */
  --paper-1: #efe8dd;        /* sable chaud */
  --stone-0: rgba(0,0,0,.55);
  --hairline: rgba(0,0,0,.08);
  --ink-soft: rgba(0,0,0,.72);
  --ink-mid: rgba(0,0,0,.58);
  --ink-faint: rgba(0,0,0,.42);

  --radius-aman: 38px;
  --shadow-aman: 0 28px 90px rgba(0,0,0,.10);
}

/* B) Anti “digital sharpness” : rendu plus naturel (Aman = pas de dureté) */
body{
  background: var(--paper-0);
  color: var(--ink-soft);
}

p{ color: var(--ink-mid); }
strong{ color: var(--ink-soft); }

/* si tu gardes le mode sombre sur certaines pages, ne casse rien */
.section-dark{
  background: #070708;
  color: var(--ink-0);
}
.section-dark p{ color: var(--ink-1); }

/* C) “Calme” global : réduire le bruit / la brillance perçue */
body::after{
  opacity: 0.018; /* grain plus rare */
}

::selection{
  background: rgba(205,179,139,0.18);
  color: #111;
}

/* D) Header Aman : blanc pierre + hairline, sans “verre tech” */
.header{
  background: rgba(246,242,235,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.logo{
  color: rgba(0,0,0,0.78);
  letter-spacing: .38em;
}

.nav-link{
  color: rgba(0,0,0,0.55);
}
.nav-link:hover,
.nav-link.active{
  color: rgba(0,0,0,0.78);
}
.nav-link::after{
  background: rgba(0,0,0,0.55); /* Aman = underline graphite, pas doré flashy */
  opacity: .45;
}

/* CTA : bouton “pierre” (le luxe = discret) */
.nav-cta{
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.72);
  background: rgba(255,255,255,0.35);
}
.nav-cta:hover{
  background: rgba(0,0,0,0.80);
  border-color: rgba(0,0,0,0.80);
  color: #fff;
  transform: translateY(-1px);
}

/* E) Hero Aman : image + voile sable, plus “resort” que “cinéma” */
.hero,
.page-hero{
  border-radius: 0 0 var(--radius-aman) var(--radius-aman);
}

/* overlay en “pierre” sur hero/page-hero */
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(246,242,235,0.65), transparent 55%),
    linear-gradient(to bottom, rgba(246,242,235,0.14), rgba(0,0,0,0.28));
  mix-blend-mode: soft-light;
  opacity:.75;
}

/* typo hero : plus d’air, moins de poids */
.hero-title{
  color: rgba(0,0,0,0.82);
  font-weight: 380;
  letter-spacing: 0.01em;
}
.hero-subtitle{
  color: rgba(0,0,0,0.60);
  max-width: 720px;
}
.hero-kicker,
.kicker{
  color: rgba(0,0,0,0.58);
  letter-spacing: .34em;
}

/* F) Sections “Aman spacing” : respiration, rythme */
.section{
  padding: clamp(84px, 10vw, 132px) 0;
}
.section-title{
  font-weight: 360;
  letter-spacing: .01em;
}
.section-intro{
  color: rgba(0,0,0,0.58);
  font-size: 1.06rem;
}

/* G) Cartes : “stone cards” (Aman = bord doux + ombre naturelle) */
.project-card,
.service-card,
.u-glass{
  border-radius: var(--radius-aman);
}

.project-card{
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: var(--shadow-aman);
}

.project-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 42px 110px rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.10);
}

/* H) Image “museum” : micro vignette + légère brume */
.project-thumb{
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.project-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.18));
  opacity:.55;
}

/* rendu photo : plus “film” */
.project-thumb img{
  filter: contrast(1.02) saturate(1.02);
}

/* I) Tags : pastilles pierre (plus chic que capsules tech) */
.project-tags span{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.55);
}

/* J) Boutons : Aman = pas de “gold gradient”, plutôt graphite / pierre */
.btn-primary{
  background: rgba(0,0,0,0.85);
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.22);
}

.btn-outline{
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.72);
  background: rgba(255,255,255,0.45);
}
.btn-outline:hover{
  border-color: rgba(0,0,0,0.32);
  background: rgba(0,0,0,0.04);
}

/* K) Diviseurs “couture” (Aman adore les lignes quasi invisibles) */
.section + .section{
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* L) Footer : papier + typographie calme */
.footer{
  background: var(--paper-1);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.footer-brand{
  color: rgba(0,0,0,0.78);
}
.footer-links a{
  color: rgba(0,0,0,0.55);
}
.footer-links a:hover{
  color: rgba(0,0,0,0.78);
}

/* M) “Ultra luxe” : micro animation de netteté au hover (imperceptible mais cher) */
@media (hover:hover){
  .project-card:hover .project-thumb img{
    filter: contrast(1.04) saturate(1.04);
    transform: scale(1.06);
  }
}

/* N) Respect accessibilité : si motion réduite, tout reste stable */
@media (prefers-reduced-motion: reduce){
  .project-card:hover{ transform:none; }
  .project-card:hover .project-thumb img{ transform:none; }
}
/* ======================================================================
   PATCH LUXE — LISIBILITÉ DES SECTIONS SOMBRES (NON DESTRUCTIF)
   Corrige le “bandeau noir” : texte redevient clair + fond noir plus noble
   ====================================================================== */

/* 1) Fond noir “Aman” : pas un noir plat, mais une pierre encre */
.section-dark{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(205,179,139,0.10), transparent 55%),
    radial-gradient(900px 500px at 12% 18%, rgba(255,255,255,0.04), transparent 55%),
    linear-gradient(to bottom, #070708, #0a0b0d);
  color: var(--ink-0);
}

/* 2) Tout le texte redevient clair (titres, paragraphes, kicker, liens) */
.section-dark,
.section-dark p,
.section-dark li,
.section-dark a,
.section-dark .kicker,
.section-dark .hero-kicker,
.section-dark .section-intro{
  color: var(--ink-1);
}

.section-dark strong{ color: var(--ink-0); }

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark .section-title,
.section-dark .hero-title{
  color: var(--ink-0);
}

/* 3) Soulignements / hairlines : champagne discret (vrai luxe) */
.section-dark .nav-link::after{ opacity: .35; }
.section-dark .section + .section{ border-top-color: rgba(255,255,255,0.06); }

/* 4) Les blocs “glass” dans le noir : plus nobles, plus lisibles */
.section-dark .u-glass,
.section-dark .cta-panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 80px rgba(0,0,0,0.55);
}

.section-dark .cta-text{ color: var(--ink-0); }

/* 5) Listes raffinées : bullets/traits visibles */
.section-dark .list-refined li{
  color: var(--ink-1);
}

/* 6) Tags dans le noir : lisibles et “couture” */
.section-dark .project-tags span{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink-2);
}

/* 7) Boutons dans le noir : contraste premium */
.section-dark .btn-outline{
  border-color: rgba(255,255,255,0.22);
  color: var(--ink-0);
  background: rgba(255,255,255,0.06);
}
.section-dark .btn-outline:hover{
  border-color: rgba(205,179,139,0.55);
  background: rgba(205,179,139,0.10);
}

.section-dark .btn-primary{
  background: linear-gradient(135deg, rgba(205,179,139,0.92), rgba(168,149,104,0.92));
  color: #0b0c0e;
}
/* ======================================================================
   FINAL PATCH — AMAN “PIERRE CLAIRE” SUR PAGES INTERNES
   Objectif : supprimer le noir (.section-dark) qui avale la lecture,
   sans casser l'écosystème.
   À coller tout en bas du CSS.
   ====================================================================== */

/* 0) Tokens pierre (autonomes, n’écrasent pas tes tokens nuit) */
:root{
  --cc-paper-0:#f6f1e9;                 /* pierre chaude */
  --cc-paper-1:#fbf8f3;                 /* ivoire */
  --cc-ink-0: rgba(12,12,12,0.86);      /* titre */
  --cc-ink-1: rgba(12,12,12,0.62);      /* texte */
  --cc-hair:  rgba(0,0,0,0.08);         /* filets */
  --cc-gold:  rgba(205,179,139,0.55);   /* champagne */
}

/* 1) Pages internes : on force .section-dark en “pierre Aman” */
body.page-services .section-dark,
body.page-contact  .section-dark,
body.page-savoir   .section-dark,
body.page-about    .section-dark,
body.page-projects .section-dark{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(205,179,139,0.16), transparent 55%),
    radial-gradient(900px 500px at 10% 20%, rgba(0,0,0,0.03), transparent 55%),
    linear-gradient(to bottom, var(--cc-paper-0), var(--cc-paper-1)) !important;
  color: var(--cc-ink-1) !important;
  border-top: 1px solid var(--cc-hair) !important;
}

/* 2) Titres / textes : lisibilité parfaite sur fond clair */
body.page-services .section-dark h1,
body.page-services .section-dark h2,
body.page-services .section-dark h3,
body.page-services .section-dark .section-title,
body.page-contact  .section-dark h1,
body.page-contact  .section-dark h2,
body.page-contact  .section-dark h3,
body.page-contact  .section-dark .section-title,
body.page-savoir   .section-dark h1,
body.page-savoir   .section-dark h2,
body.page-savoir   .section-dark h3,
body.page-savoir   .section-dark .section-title,
body.page-about    .section-dark h1,
body.page-about    .section-dark h2,
body.page-about    .section-dark h3,
body.page-about    .section-dark .section-title,
body.page-projects .section-dark h1,
body.page-projects .section-dark h2,
body.page-projects .section-dark h3,
body.page-projects .section-dark .section-title{
  color: var(--cc-ink-0) !important;
}

body.page-services .section-dark p,
body.page-services .section-dark li,
body.page-services .section-dark a,
body.page-services .section-dark .section-intro,
body.page-contact  .section-dark p,
body.page-contact  .section-dark li,
body.page-contact  .section-dark a,
body.page-contact  .section-dark .section-intro,
body.page-savoir   .section-dark p,
body.page-savoir   .section-dark li,
body.page-savoir   .section-dark a,
body.page-savoir   .section-dark .section-intro,
body.page-about    .section-dark p,
body.page-about    .section-dark li,
body.page-about    .section-dark a,
body.page-about    .section-dark .section-intro,
body.page-projects .section-dark p,
body.page-projects .section-dark li,
body.page-projects .section-dark a,
body.page-projects .section-dark .section-intro{
  color: var(--cc-ink-1) !important;
}

/* 3) Kicker / accents “champagne” */
body.page-services .section-dark .kicker,
body.page-contact  .section-dark .kicker,
body.page-savoir   .section-dark .kicker,
body.page-about    .section-dark .kicker,
body.page-projects .section-dark .kicker{
  color: rgba(138,110,68,0.85) !important;
}

/* 4) Panneaux (cta) : museum glass clair */
body.page-services .section-dark .u-glass,
body.page-services .section-dark .cta-panel,
body.page-contact  .section-dark .u-glass,
body.page-contact  .section-dark .cta-panel,
body.page-savoir   .section-dark .u-glass,
body.page-savoir   .section-dark .cta-panel,
body.page-about    .section-dark .u-glass,
body.page-about    .section-dark .cta-panel,
body.page-projects .section-dark .u-glass,
body.page-projects .section-dark .cta-panel{
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.10) !important;
}

/* 5) Boutons : contraste luxe sur clair */
body.page-services .section-dark .btn-primary,
body.page-contact  .section-dark .btn-primary,
body.page-savoir   .section-dark .btn-primary,
body.page-about    .section-dark .btn-primary,
body.page-projects .section-dark .btn-primary{
  background: rgba(0,0,0,0.88) !important;
  color: #fff !important;
}

body.page-services .section-dark .btn-outline,
body.page-contact  .section-dark .btn-outline,
body.page-savoir   .section-dark .btn-outline,
body.page-about    .section-dark .btn-outline,
body.page-projects .section-dark .btn-outline{
  border-color: rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.74) !important;
  background: rgba(255,255,255,0.50) !important;
}

/* 6) Sécurité : si un overlay sombre traîne dans la section */
body.page-services .section-dark .overlay-gradient,
body.page-contact  .section-dark .overlay-gradient,
body.page-savoir   .section-dark .overlay-gradient,
body.page-about    .section-dark .overlay-gradient,
body.page-projects .section-dark .overlay-gradient{
  display:none !important;
}
/* ======================================================================
   HOME — AMAN “PIERRE CLAIRE” (sans casser l’écosystème)
   Objectif : supprimer le noir résiduel de l’accueil.
   ====================================================================== */

/* 1) Fond global de la home */
body.home,
body.page-home,
body:not([class*="page-"]) { /* sécurité si ta home n'a pas de classe */
  background: linear-gradient(to bottom, var(--cc-paper-1), var(--cc-paper-0));
  color: var(--cc-ink-1);
}

/* 2) Typo générale lisible sur clair */
body.home h1, body.home h2, body.home h3,
body.page-home h1, body.page-home h2, body.page-home h3,
body:not([class*="page-"]) h1,
body:not([class*="page-"]) h2,
body:not([class*="page-"]) h3{
  color: var(--cc-ink-0);
}

body.home p, body.home li,
body.page-home p, body.page-home li,
body:not([class*="page-"]) p,
body:not([class*="page-"]) li{
  color: var(--cc-ink-1);
}

/* 3) Sections light/dark sur home : tout en pierre (Aman) */
body.home .section-light,
body.home .section-dark,
body.page-home .section-light,
body.page-home .section-dark,
body:not([class*="page-"]) .section-light,
body:not([class*="page-"]) .section-dark{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(205,179,139,0.14), transparent 55%),
    linear-gradient(to bottom, var(--cc-paper-0), var(--cc-paper-1)) !important;
  border-top: 1px solid var(--cc-hair) !important;
}

/* 4) Header : version claire, toujours premium */
body.home .header,
body.page-home .header,
body:not([class*="page-"]) .header{
  background: rgba(250,248,244,0.86) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

body.home .logo,
body.page-home .logo,
body:not([class*="page-"]) .logo{
  color: rgba(0,0,0,0.82) !important;
}

body.home .nav-link,
body.page-home .nav-link,
body:not([class*="page-"]) .nav-link{
  color: rgba(0,0,0,0.55) !important;
}

body.home .nav-link.active,
body.home .nav-link:hover,
body.page-home .nav-link.active,
body.page-home .nav-link:hover,
body:not([class*="page-"]) .nav-link.active,
body:not([class*="page-"]) .nav-link:hover{
  color: rgba(0,0,0,0.82) !important;
}

body.home .nav-cta,
body.page-home .nav-cta,
body:not([class*="page-"]) .nav-cta{
  border-color: rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.82) !important;
}

/* 5) Hero : garde l’image, mais supprime la “nuit” trop lourde */
body.home .hero,
body.page-home .hero,
body:not([class*="page-"]) .hero{
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 60%, rgba(0,0,0,0.10) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.20), rgba(0,0,0,0.18)),
    var(--hero-img) center/cover no-repeat !important;
  color: rgba(0,0,0,0.82);
}

body.home .hero-subtitle,
body.page-home .hero-subtitle,
body:not([class*="page-"]) .hero-subtitle{
  color: rgba(0,0,0,0.62) !important;
}

/* 6) Footer clair */
body.home .footer,
body.page-home .footer,
body:not([class*="page-"]) .footer{
  background: linear-gradient(to bottom, var(--cc-paper-0), var(--cc-paper-1)) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
<!DOCTYPE html>
<html lang="fr" class="no-js">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Caravelli Costruzioni — Bâtisseur de Patrimoine</title>
  <meta name="description" content="Maison Caravelli — Architecture, rénovation haut de gamme, restauration d’exception. Une esthétique de la matière, une exécution irréprochable." />
  <link rel="stylesheet" href="CSS/style.css" />
</head>

<body class="home page-home js-ready">

  <header class="header">
    <div class="container header-inner">
      <a class="logo" href="index.html">CARAVELLI COSTRUZIONI</a>

      <nav class="nav" aria-label="Navigation principale">
        <a class="nav-link active" href="index.html">Accueil</a>
        <a class="nav-link" href="about.html">La Maison</a>
        <a class="nav-link" href="savoir-faire.html">Méthode</a>
        <a class="nav-link" href="projects.html">Réalisations</a>
        <a class="nav-link" href="services.html">Prestations</a>
      </nav>

      <a class="nav-cta" href="contact.html">Entrer en relation</a>
    </div>
  </header>

  <main>

    <section class="hero">
      <div class="hero-overlay"></div>

      <div class="hero-content">
        <span class="hero-kicker">Maison Caravelli</span>
        <h1 class="hero-title">Bâtir est un métier,<br>restaurer est un art.</h1>
        <p class="hero-subtitle">
          Une maison indépendante, entre France, Suisse, Italie et Méditerranée.
          La discrétion, la matière, la justesse du geste.
        </p>

        <div class="hero-buttons">
          <a class="btn btn-primary" href="projects.html">Voir les réalisations</a>
          <a class="btn btn-outline" href="contact.html">Demander un échange</a>
        </div>
      </div>
    </section>

    <section class="section section-light">
      <div class="container section-grid">
        <div>
          <span class="kicker">Architecture habitée</span>
          <h2 class="section-title">Des lieux faits pour être vécus.</h2>
          <p class="section-intro">
            Nous ne concevons pas des espaces pour être photographiés, mais pour traverser le temps.
            Un dialogue entre proportions, lumière et matière — avec une exécution sans approximation.
          </p>

          <ul class="list-refined">
            <li>Rénovation haut de gamme & restauration patrimoniale</li>
            <li>Gestion de projet, arbitrages rapides, suivi réel chantier</li>
            <li>Matériaux nobles, détails, finitions “silencieuses”</li>
          </ul>
        </div>

        <div class="u-glass" style="padding:48px;border-radius:26px;">
          <span class="kicker">Confidentiel</span>
          <p style="margin-top:10px;">
            Un premier échange permet d’évaluer la situation, d’orienter les décisions,
            et de poser une trajectoire claire.
          </p>
          <div style="margin-top:28px;">
            <a class="btn btn-primary" href="contact.html">Demander un échange</a>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer class="footer">
    <div class="container footer-inner">
      <div class="footer-brand">Maison Caravelli</div>
      <div class="footer-links">
        <a href="projects.html">Réalisations</a>
        <a href="services.html">Prestations</a>
        <a href="contact.html">Contact</a>
      </div>
    </div>
  </footer>

  <script src="JS/script.js"></script>
</body>
</html>
/* ===== LinkedIn signature professionnelle ===== */

.contact-professional{
  text-align: center;
  margin-bottom: 30px;
}

.contact-note{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-transform: uppercase;
}

.contact-note a{
  margin-left: 6px;
  color: var(--ink-0);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding-bottom: 2px;
  transition: all .25s ease;
}

.contact-note a:hover{
  color: var(--gold-0);
  border-color: var(--gold-0);
}
/* === Luxury finish: subtle material background (no overlay on content) === */
:root{
  --lux-ink: rgba(14,14,14,.92);
  --lux-paper: rgba(250,248,244,.96);
  --lux-gold: rgba(214,198,165,.85);
}

body{
  background:
    radial-gradient(1200px 800px at 12% 8%, rgba(214,198,165,.08), transparent 55%),
    radial-gradient(900px 600px at 88% 14%, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
}
/* === Luxury typography tuning === */
.hero-title, .section-title, h3{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .2px;
}

.hero-subtitle, .section-intro, .project-body p{
  color: rgba(14,14,14,.78);
  line-height: 1.7;
  letter-spacing: .12px;
}

.project-body h3{
  letter-spacing: .6px;
}
/* === Aman hairlines (subtle structure) === */
.project-card{
  position: relative;
}

.project-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(14,14,14,.12), transparent);
}
/* ======================================================================
   CARAVELLI — FINAL LUXE SIGNATURE (NON DESTRUCTIF)
   Coller tout en bas de style.css
   Objectif : “musée”, matière, silence, ultra premium
   ====================================================================== */

:root{
  --lux-hair: rgba(0,0,0,.07);
  --lux-hair2: rgba(255,255,255,.45);
  --lux-ink: rgba(12,12,12,.86);
  --lux-ink-soft: rgba(12,12,12,.62);
  --lux-paper: rgba(251,249,245,.96);
  --lux-champagne: rgba(205,179,139,.55);

  --lux-radius: 38px;
  --lux-shadow: 0 28px 90px rgba(0,0,0,.10);
  --lux-shadow2: 0 40px 120px rgba(0,0,0,.12);
}

/* 1) Rendu typographique “imprimé” */
body{
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.hero-title, .section-title, .project-body h3{
  letter-spacing: .006em;
}

/* 2) Fond matière (aucun overlay sur le contenu, juste une atmosphère) */
body::before{
  opacity: 1;
  background:
    radial-gradient(1200px 800px at 12% 10%, rgba(205,179,139,.08), transparent 58%),
    radial-gradient(900px 600px at 88% 14%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(245,242,236,1));
}

/* Grain encore plus “rare” (moins visible, plus chic) */
body::after{ opacity: .016; }

/* 3) Hairlines couture (les “lignes” qui font riche, sans se voir) */
.section + .section{
  border-top-color: var(--lux-hair);
}
.section + .section::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
  opacity:.55;
}

/* 4) Header : verre noble + filet champagne imperceptible */
.header{
  background: rgba(246,242,235,.84);
  border-bottom-color: rgba(0,0,0,.06);
}
.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(205,179,139,.22), transparent);
  opacity:.45;
  pointer-events:none;
}

/* 5) Cartes : “émail” + profondeur muséale */
.project-card{
  border-radius: var(--lux-radius);
  box-shadow: var(--lux-shadow);
  border-color: rgba(0,0,0,.07);
  background: rgba(255,255,255,.76);
  position: relative;
  isolation: isolate;
}

.project-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%, rgba(0,0,0,.06));
  opacity:.65;
  z-index: 0;
}

.project-card > *{ position: relative; z-index: 1; }

/* Hover ultra discret (pas “wow”, mais “cher”) */
@media (hover:hover){
  .project-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--lux-shadow2);
    border-color: rgba(0,0,0,.10);
  }
}

/* 6) Image “gallery-grade” : profondeur, pas d’agressivité */
.project-thumb{
  background:
    radial-gradient(circle at 40% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
}

/* Vignette muséale très fine (ne masque pas) */
.project-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.10), transparent 55%);
  opacity:.55;
}

.project-thumb img{
  filter: contrast(1.02) saturate(1.02);
  transform: translateZ(0);
}

@media (hover:hover){
  .project-card:hover .project-thumb img{
    transform: scale(1.04);
    filter: contrast(1.04) saturate(1.04);
  }
}

/* 7) Texte : plus “Maison”, moins “web” */
p, .section-intro, .project-body p{
  color: var(--lux-ink-soft);
  letter-spacing: .002em;
}

/* 8) Tags : pierre, micro-relief */
.project-tags span{
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
}

/* 9) Boutons : graphite, tactile, sans bling */
.btn-primary{
  background: rgba(0,0,0,.86);
  color:#fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.16);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 34px 92px rgba(0,0,0,.20);
}

.btn-outline{
  background: rgba(255,255,255,.48);
  border-color: rgba(0,0,0,.18);
  color: rgba(0,0,0,.74);
}
.btn-outline:hover{
  background: rgba(205,179,139,.10);
  border-color: rgba(0,0,0,.26);
}

/* 10) Galerie : contrôles invisibles tant qu’on ne “frôle” pas */
.project-gallery .gallery-btn{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .22s ease, transform .22s ease;
}
.project-gallery:hover .gallery-btn,
.project-gallery:focus-within .gallery-btn{
  opacity: .92;
  transform: none;
}
.project-gallery .dot.is-active{
  background: rgba(205,179,139,.95);
}
/* ======================================================================
   CARAVELLI — ENCRE & BOUGIE (DESKTOP ONLY, NON DESTRUCTIF, SANS JS)
   Colle tout en bas de style.css
   ====================================================================== */

@media (hover:hover) and (pointer:fine){
  :root{
    --candle-ink: #0b0c0e;
    --candle-ink2:#0f1115;
    --candle-gold: rgba(205,179,139,.28);
    --candle-ember: rgba(205,179,139,.18);
    --candle-smoke: rgba(255,255,255,.035);
  }

  /* 1) Fond “encre” : profondeur, zéro noir plat */
  body{
    background:
      radial-gradient(900px 520px at 18% 12%, rgba(205,179,139,.08), transparent 58%),
      radial-gradient(760px 460px at 82% 18%, rgba(255,255,255,.05), transparent 60%),
      linear-gradient(180deg, var(--candle-ink), var(--candle-ink2));
  }

  /* 2) Halo bougie qui suit le pointeur (sans JS) — très discret */
  body::before{
    content:"";
    position: fixed;
    inset: -20vmax;
    pointer-events: none;
    z-index: 0;
    opacity: .95;
    background:
      radial-gradient(35vmax 28vmax at var(--mx, 50%) var(--my, 25%),
        rgba(205,179,139,.12),
        rgba(205,179,139,.06) 28%,
        transparent 62%),
      radial-gradient(55vmax 45vmax at 50% 120%,
        rgba(0,0,0,.55),
        transparent 70%);
    mix-blend-mode: screen;
    transition: opacity 320ms ease;
  }

  /* 3) “fumée” imperceptible (matière) */
  body::after{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .14;
    background:
      radial-gradient(circle at 22% 18%, rgba(255,255,255,.04), transparent 55%),
      radial-gradient(circle at 76% 26%, rgba(205,179,139,.04), transparent 60%),
      radial-gradient(circle at 52% 92%, rgba(0,0,0,.35), transparent 55%);
    mix-blend-mode: soft-light;
  }

  /* 4) Tout le contenu reste au-dessus, sans jamais être masqué */
  body > *{
    position: relative;
    z-index: 1;
  }

  /* 5) Header “verre noir” ultra premium */
  .header{
    background: rgba(10,10,12,.62);
    border-bottom-color: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(205,179,139,.22), transparent);
    opacity:.55;
    pointer-events:none;
  }
  .logo{ color: rgba(255,255,255,.86); }
  .nav-link{ color: rgba(255,255,255,.58); }
  .nav-link:hover,.nav-link.active{ color: rgba(255,255,255,.86); }
  .nav-link::after{ background: rgba(205,179,139,.55); opacity:.55; }

  /* 6) Cartes : émail sombre + liseré champagne (sans bling) */
  .project-card,
  .service-card,
  .u-glass{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 30px 110px rgba(0,0,0,.55);
  }
  .project-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%, rgba(0,0,0,.26));
    opacity:.75;
  }

  /* 7) Typo : lisibilité “soir”, pas grise */
  h1,h2,h3,h4,h5,h6{ color: rgba(255,255,255,.90); }
  p, .section-intro, .project-body p{ color: rgba(255,255,255,.70); }
  .kicker, .hero-kicker{ color: rgba(205,179,139,.72); }

  /* 8) Boutons : graphite + bord bougie */
  .btn-primary{
    background: rgba(255,255,255,.92);
    color: rgba(10,10,12,.92);
    box-shadow: 0 26px 90px rgba(0,0,0,.55);
  }
  .btn-outline{
    background: rgba(255,255,255,.04);
    border-color: rgba(205,179,139,.32);
    color: rgba(255,255,255,.84);
  }
  .btn-outline:hover{
    background: rgba(205,179,139,.10);
    border-color: rgba(205,179,139,.46);
  }
}

/* BONUS (optionnel, mais recommandé) :
   Ajoute ces 2 lignes dans ton <body> (juste une fois) pour activer le suivi pointeur :
   <script>document.addEventListener('pointermove',e=>{document.documentElement.style.setProperty('--mx',e.clientX+'px');document.documentElement.style.setProperty('--my',e.clientY+'px')},{passive:true});</script>
   -> Si tu refuses tout JS, le halo reste fixe (beau quand même).
*/
/* =========================================================
   PATCH ENCRE & BOUGIE — LISIBILITÉ CARTES (SAFE / NON-DESTRUCTIF)
   À coller tout en bas de style.css
   ========================================================= */

/* 1) Assure un socle de contraste (encre) */
:root{
  --cc-ink-title: rgba(10,10,10,.86);
  --cc-ink-text:  rgba(10,10,10,.62);
  --cc-ink-faint: rgba(10,10,10,.45);

  --cc-card:      rgba(255,255,255,.78);  /* bougie */
  --cc-card-brd:  rgba(0,0,0,.08);
  --cc-card-sh:   0 26px 80px rgba(0,0,0,.10);
}

/* 2) Si un overlay sombre “avale” le hero interne : on le calme */
.page-hero::before,
.page-hero::after{
  opacity: .32 !important;
}

/* 3) Cartes de prestations : fond bougie + bord + ombre, texte encre */
.service-card,
.project-card,
.u-glass{
  background: var(--cc-card) !important;
  border: 1px solid var(--cc-card-brd) !important;
  box-shadow: var(--cc-card-sh) !important;
}

/* 4) Titres / texte sur cartes : lisibles */
.service-card h3,
.project-body h3{
  color: var(--cc-ink-title) !important;
  opacity: 1 !important;
}

.service-card p,
.project-body p,
.service-card li{
  color: var(--cc-ink-text) !important;
  opacity: 1 !important;
}

/* 5) Petits libellés “champagne” sans perdre le contraste */
.kicker,
.hero-kicker{
  color: rgba(138,110,68,.88) !important;
}

/* 6) Si tu as un effet “blur/fade” sur les cartes, on évite le texte fantôme */
.service-card *{
  filter: none !important;
  text-shadow: none !important;
}

/* 7) Accessibilité premium : liens et focus visibles mais couture */
a:focus-visible,
button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(205,179,139,.20);
  border-radius: 10px;
}
/* =========================================================
   CARAVELLI — PATCH LISIBILITÉ ABSOLUE (SAFE / GLOBAL)
   Objectif : plus rien d’illisible (hero + sections + cartes)
   À coller TOUT EN BAS de style.css
   ========================================================= */

/* 0) Socle de contraste (encre & bougie) */
:root{
  --cc-ink-title: rgba(12,12,12,.88);
  --cc-ink-text:  rgba(12,12,12,.66);
  --cc-ink-soft:  rgba(12,12,12,.52);
  --cc-paper:     rgba(251,248,243,.98);
  --cc-hair:      rgba(0,0,0,.08);
}

/* 1) Jamais de texte “fantôme” (opacity/filters hérités) */
h1,h2,h3,h4,h5,h6,p,li,small,span,label,a{
  opacity: 1;
  filter: none;
}

/* 2) Pages claires : titres + paragraphes toujours en “encre” */
.section-title,
.hero-title{
  color: var(--cc-ink-title) !important;
}

.section-intro,
p, li{
  color: var(--cc-ink-text) !important;
}

/* 3) Kicker “champagne” MAIS lisible */
.kicker,
.hero-kicker{
  color: rgba(138,110,68,.86) !important;
}

/* 4) HERO / PAGE-HERO : le voile ne doit jamais avaler la typo */
.hero,
.page-hero{
  position: relative;
}

.hero-overlay{
  opacity: .42 !important; /* ton overlay actuel est trop lourd */
}

.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after{
  opacity: .28 !important; /* calme tous les voiles additionnels */
}

.hero-content{
  position: relative;
  z-index: 5 !important;
  color: var(--cc-ink-text) !important;
}

.hero-content p,
.hero-subtitle{
  color: rgba(12,12,12,.62) !important;
}

/* 5) Sections “pierre” : fond clair uniforme (élimine les zones grisées) */
.section-light,
.section-dark{
  background: linear-gradient(to bottom, var(--cc-paper), rgba(246,241,233,.98)) !important;
  border-top: 1px solid var(--cc-hair) !important;
}

/* 6) Cartes : fond bougie + bord + ombre, texte encre (pas de blanc sur blanc) */
.service-card,
.project-card,
.u-glass{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.10) !important;
}

.service-card h3,
.project-body h3{
  color: var(--cc-ink-title) !important;
}

.service-card p,
.project-body p{
  color: var(--cc-ink-text) !important;
}

/* 7) Si tu as des textes volontairement “très pâles” via des classes */
.is-muted,
.muted,
.faint,
.text-muted{
  color: var(--cc-ink-soft) !important;
  opacity: 1 !important;
}

/* 8) Header : garde ton luxe, mais évite le “gris sur gris” */
.header .nav-link{
  color: rgba(255,255,255,.72) !important; /* si header sombre */
}
.header .nav-link:hover,
.header .nav-link.active{
  color: rgba(255,255,255,.92) !important;
}
.header .logo{
  color: rgba(255,255,255,.90) !important;
}

/* 9) Sécurité : si un overlay sombre traîne dans les sections claires */
.overlay,
.overlay-gradient,
.section-overlay,
.bg-overlay{
  opacity: .18 !important;
  pointer-events: none !important;
}

/* 10) Focus premium (utile, discret, luxe) */
a:focus-visible,
button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(205,179,139,.22);
  border-radius: 10px;
}
/* =========================================================
   SERVICES — ENCRE & BOUGIE (lisibilité premium, non destructif)
   Colle en FIN de style.css
   ========================================================= */

body.page-services{
  color: rgba(12,12,12,.72);
}

/* HERO: ne jamais laisser le hero en mode "fantôme" */
body.page-services .page-hero .hero-content{
  opacity: 1;                 /* sécurité si reveal rate */
  transform: none;            /* sécurité */
}

/* Mais si tu veux garder l’animation, elle se fera via .is-revealed (JS) */
body.page-services .page-hero .reveal-on-scroll{
  opacity: 1;                 /* visible par défaut */
  transform: none;
}

/* Typo: encre */
body.page-services .hero-title,
body.page-services .section-title{
  color: rgba(12,12,12,.88) !important;
}

body.page-services .hero-subtitle,
body.page-services .section-intro,
body.page-services p,
body.page-services li{
  color: rgba(12,12,12,.64) !important;
}

/* Kicker: champagne lisible */
body.page-services .kicker,
body.page-services .hero-kicker{
  color: rgba(138,110,68,.86) !important;
}

/* Sections claires: bougie */
body.page-services .section-light{
  background: linear-gradient(to bottom, rgba(251,248,243,.98), rgba(246,241,233,.98)) !important;
}

/* Cartes: bougie + encre (ton screenshot “on ne lit rien” = ici) */
body.page-services .service-card{
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.10) !important;
}

body.page-services .service-card h3{
  color: rgba(12,12,12,.84) !important;
}

body.page-services .service-card p{
  color: rgba(12,12,12,.62) !important;
}

/* CTA sombre: luxe noir encre, mais lisible */
body.page-services .section-dark{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(205,179,139,0.10), transparent 55%),
              linear-gradient(to bottom, #070708, #0a0b0d) !important;
  color: rgba(255,255,255,.86) !important;
}

body.page-services .section-dark .section-title,
body.page-services .section-dark h1,
body.page-services .section-dark h2,
body.page-services .section-dark h3{
  color: rgba(255,255,255,.92) !important;
}

body.page-services .section-dark p,
body.page-services .section-dark li,
body.page-services .section-dark .section-intro{
  color: rgba(255,255,255,.74) !important;
}

body.page-services .section-dark .kicker{
  color: rgba(205,179,139,.86) !important;
}

body.page-services .section-dark .u-glass{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.55) !important;
}

/* Header (si tu le veux sombre) : lisibilité nav */
body.page-services .header .logo,
body.page-services .header .nav-link{
  color: rgba(255,255,255,.82);
}

/* CTA nav: reste premium */
body.page-services .header .nav-cta{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
/* ======================================================================
   PATCH LISIBILITÉ — PAGE SERVICES (ENCRE & BOUGIE)
   À COLLER TOUT EN BAS DE style.css
   Objectif : contraste premium, zéro texte fantôme, zéro casse
   ====================================================================== */

body.page-services{
  color: rgba(12,12,12,.82);
}

/* 1) HERO : le voile ne doit JAMAIS avaler le texte */
body.page-services .page-hero{
  position: relative;
}

/* Si un override sombre traîne, on le discipline */
body.page-services .page-hero::before,
body.page-services .page-hero::after{
  opacity: .42 !important;  /* réduit la “nuit” qui tue la lecture */
}

/* Texte du hero : net, luxueux, lisible */
body.page-services .page-hero .hero-kicker{
  color: rgba(205,179,139,.88) !important;
  text-shadow: 0 1px 20px rgba(0,0,0,.25);
}
body.page-services .page-hero .hero-title{
  color: rgba(245,242,236,.92) !important;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
body.page-services .page-hero .hero-subtitle{
  color: rgba(245,242,236,.78) !important;
  text-shadow: 0 6px 28px rgba(0,0,0,.45);
  max-width: 760px;
}

/* Boutons sur hero sombre : contraste clair / encre */
body.page-services .page-hero .btn-outline{
  border-color: rgba(245,242,236,.34) !important;
  color: rgba(245,242,236,.88) !important;
  background: rgba(0,0,0,.20) !important;
}
body.page-services .page-hero .btn-outline:hover{
  background: rgba(205,179,139,.14) !important;
  border-color: rgba(205,179,139,.55) !important;
}

/* 2) SECTIONS CLAIRES : titres + texte (plus jamais “fades”) */
body.page-services .section-light .kicker{
  color: rgba(138,110,68,.86) !important;
}
body.page-services .section-light .section-title{
  color: rgba(12,12,12,.88) !important;
}
body.page-services .section-light .section-intro{
  color: rgba(12,12,12,.64) !important;
}

/* 3) CARTES PRESTATIONS : fond + typo + contraste (votre problème principal) */
body.page-services .service-card{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.10) !important;
}
body.page-services .service-card h3{
  color: rgba(138,110,68,.92) !important; /* champagne “bougie” */
  letter-spacing: .02em;
}
body.page-services .service-card p{
  color: rgba(12,12,12,.64) !important;   /* lisible, luxe, pas noir dur */
}

/* 4) REVEAL : si révélé => 100% opaque (plus de demi-teinte) */
body.page-services .reveal-on-scroll.is-revealed{
  opacity: 1 !important;
  transform: none !important;
}

/* 5) SECTION DARK (CTA) : encre noble + texte clair garanti */
body.page-services .section-dark{
  background:
    radial-gradient(1200px 700px at 50% -15%, rgba(205,179,139,.14), transparent 55%),
    linear-gradient(to bottom, #070708, #0a0b0d) !important;
}
body.page-services .section-dark .kicker{
  color: rgba(205,179,139,.80) !important;
}
body.page-services .section-dark .section-title,
body.page-services .section-dark li,
body.page-services .section-dark p{
  color: rgba(245,242,236,.82) !important;
}

/* 6) “Glass” sur fond encre : lisible, museum */
body.page-services .section-dark .u-glass{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
}
body.page-services .section-dark .u-glass .section-intro{
  color: rgba(245,242,236,.78) !important;
}
/* =========================================================
   HERO IMAGES PAR PAGE — CARAVELLI
   ========================================================= */

.page-about .page-hero{
background-image:
linear-gradient(rgba(8,8,8,.55), rgba(8,8,8,.75)),
url("../assets/hero/hero-maison.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.page-savoir-faire .page-hero{
background-image:
linear-gradient(rgba(8,8,8,.55), rgba(8,8,8,.75)),
url("../assets/hero/hero-methode.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.page-projects .page-hero{
background-image:
linear-gradient(rgba(8,8,8,.55), rgba(8,8,8,.75)),
url("../assets/hero/hero-realisations.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.page-services .page-hero{
background-image:
linear-gradient(rgba(8,8,8,.55), rgba(8,8,8,.75)),
url("../assets/hero/hero-prestations.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
/* =========================================================
   HERO IMAGES — CARAVELLI (PAR PAGE)
   ========================================================= */

.page-about .page-hero{
  background-image:
    linear-gradient(rgba(10,10,10,.55), rgba(10,10,10,.65)),
    url("../assets/hero/hero-maison.jpg");
  background-size:cover;
  background-position:center;
}

.page-savoir-faire .page-hero{
  background-image:
    linear-gradient(rgba(10,10,10,.60), rgba(10,10,10,.70)),
    url("../assets/hero/hero-methode.jpg");
  background-size:cover;
  background-position:center;
}

.page-projects .page-hero{
  background-image:
    linear-gradient(rgba(10,10,10,.45), rgba(10,10,10,.60)),
    url("../assets/hero/hero-realisations.jpg");
  background-size:cover;
  background-position:center;
}

.page-services .page-hero{
  background-image:
    linear-gradient(rgba(10,10,10,.60), rgba(10,10,10,.75)),
    url("../assets/hero/hero-prestations.jpg");
  background-size:cover;
  background-position:center;
}
body.page-savoir .page-hero{
  background:
    radial-gradient(circle at 32% 18%, rgba(245,242,236,0.30) 0%, rgba(22,22,22,0.25) 100%),
    linear-gradient(to bottom, rgba(245,242,236,0.10), rgba(245,242,236,0.96)),
    url("../assets/hero/hero-methode.jpg") center/cover no-repeat !important;
}
.manifesto {
  position: relative;
  padding: 140px 0;
  text-align: center;
  background: #f6f4f1;
  overflow: hidden;
}

.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/brand/cheval-dessin.png") center/600px no-repeat;
  opacity: 0.06;
  pointer-events: none;
}