/* ========================================================================
   Maison Voiron Advisory - Styles partagés
   Palette luxe noir et or, typographies Cormorant Garamond et Inter
   ======================================================================== */

:root{
  --bg:#0B0B0C;
  --bg-2:#121214;
  --bg-3:#17171A;
  --line:rgba(201,169,97,.18);
  --line-strong:rgba(201,169,97,.35);
  --gold:#C9A961;
  --gold-2:#E8C988;
  --gold-dark:#A48D5C;
  --ink:#F5F1EA;
  --ink-2:#C9C4BC;
  --muted:#A8A39B;
  --radius:2px;
  --maxw:1240px;
  --transition:.4s cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Compensation de la hauteur de la nav fixe sur tous les ancrages internes */
section[id],#packs,#convictions,#about,#services,#realisations,#difference,#contact{scroll-margin-top:110px}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}

/* ---------- Accessibilité : skip link et focus visibles ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--gold);color:var(--bg);
  padding:14px 24px;font-family:'Inter',sans-serif;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;z-index:1000;
  border:2px solid var(--gold);
}
.skip-link:focus{left:8px;top:8px;outline:none}

.btn:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible,
.frise-step:focus-visible,
.frise5-step:focus-visible,
.real-tile:focus-visible,
.pres-card:focus-visible,
.pres-pack:focus-visible,
.pres5-card:focus-visible,
.pres-acq:focus-visible,
.offre-com-card:focus-visible,
.faq-item summary:focus-visible,
.bb-step:focus-visible,
.fb-tab:focus-visible,
.lab-back:focus-visible,
footer a:focus-visible,
a.frise-step:focus-visible{
  outline:2px solid var(--gold);outline-offset:4px;
  border-radius:1px;
}
[aria-current="page"]{color:var(--gold)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- Typography ---------- */
.serif{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:.01em}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:.01em;line-height:1.1}
h1{font-size:clamp(2.75rem,7vw,6.25rem)}
h2{font-size:clamp(2.25rem,4.5vw,3.75rem)}
h3{font-size:clamp(1.5rem,2.2vw,1.85rem)}
h4{font-size:1.2rem}
.gold-italic{font-style:italic;color:var(--gold);font-weight:300}
.gold-grad{
  font-style:italic;font-weight:300;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) 55%,var(--gold-dark) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--gold)}
.lead{font-size:clamp(1rem,1.15vw,1.125rem);color:var(--ink-2);max-width:60ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 34px;
  font-family:'Inter',sans-serif;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  cursor:pointer;
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform var(--transition);z-index:-1;
}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:translateY(0)}
.btn .arrow{display:inline-block;transition:transform var(--transition)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-filled{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.btn-filled::before{background:var(--bg)}
.btn-filled:hover{color:var(--gold)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:24px 0;
  transition:var(--transition);
  backdrop-filter:blur(0);
}
.nav.scrolled{
  background:rgba(11,11,12,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:flex-start;gap:18px}
.logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
  line-height:0;
}
.logo svg{display:block;height:68px;width:auto}
.footer-brand .logo svg{height:100px}
@media(min-width:1200px){
  .logo svg{height:78px}
}
@media(max-width:600px){
  .logo svg{height:56px}
  .footer-brand .logo svg{height:80px}
}
.nav-links{display:flex;gap:32px;list-style:none;flex-wrap:nowrap}
.nav-links > li{position:relative}
.nav-links a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;
  position:relative;padding:4px 0;white-space:nowrap;
  transition:color var(--transition);
}
@media(min-width:1200px){
  .nav-links{gap:36px}
  .nav-links a{font-size:.74rem;letter-spacing:.22em}
}
.nav-links > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--transition);
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links > li > a:hover::after{transform:scaleX(1);transform-origin:left}

/* Dropdown sous-menu Prestations */
.nav-links li.has-submenu > a{display:inline-flex;align-items:center}
.nav-links .caret{
  display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--transition);
}
.nav-links li.has-submenu:hover .caret,
.nav-links li.has-submenu:focus-within .caret{transform:rotate(-135deg) translateY(2px)}
.nav-links li.has-submenu::before{
  content:"";position:absolute;top:100%;left:-12px;right:-12px;height:18px;
}
.nav-links .submenu{
  list-style:none;margin:0;padding:10px 0;
  position:absolute;top:calc(100% + 18px);left:-22px;min-width:300px;
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--transition),transform var(--transition),visibility 0s linear .4s;
  z-index:50;
}
.nav-links li.has-submenu:hover .submenu,
.nav-links li.has-submenu:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--transition),transform var(--transition),visibility 0s linear 0s;
}
.nav-links .submenu li{width:100%}
.nav-links .submenu a{
  display:block;padding:12px 24px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;
  border-left:2px solid transparent;
  transition:color var(--transition),background var(--transition),border-color var(--transition),padding var(--transition);
}
.nav-links .submenu a::after{display:none}
.nav-links .submenu a:hover{
  color:var(--gold);background:rgba(201,169,97,.05);
  border-left-color:var(--gold);padding-left:28px;
}
.nav-links .submenu a em.num{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);font-size:1.05rem;letter-spacing:.04em;
  text-transform:none;margin-right:12px;
  display:inline-block;font-weight:400;
}

.nav-cta{display:none}
@media(min-width:960px){
  .nav-cta{
    display:inline-flex;
    margin-left:auto;
    margin-right:36px;
    padding:12px 18px;
    font-size:.68rem;
    letter-spacing:.16em;
    gap:10px;
    flex-shrink:0;
    white-space:nowrap;
  }
}
@media(min-width:1200px){
  .nav-cta{padding:13px 22px;font-size:.7rem;letter-spacing:.2em;margin-right:56px}
}
@media(min-width:1400px){
  .nav-cta{margin-right:72px}
}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;font-size:1.4rem}
@media(max-width:959px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-top:1px solid var(--line);
    padding:24px 32px;gap:18px;
  }
  .nav-links .caret{display:none}
  .nav-links li.has-submenu::before{display:none}
  .nav-links .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:none;box-shadow:none;
    padding:10px 0 4px 14px;min-width:0;
    border-left:1px solid var(--line);margin:8px 0 4px 4px;
  }
  .nav-links .submenu a{
    padding:8px 12px;font-size:.66rem;letter-spacing:.14em;
    border-left:none;
  }
  .nav-links .submenu a:hover{padding-left:12px;background:none;border-left:none}
}

/* ---------- Hero générique ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:160px 0 80px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1200px 700px at 85% 20%,rgba(201,169,97,.12),transparent 60%),
    radial-gradient(900px 600px at 15% 80%,rgba(201,169,97,.06),transparent 65%),
    linear-gradient(180deg,#0B0B0C 0%,#0E0D0C 40%,#0B0B0C 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(201,169,97,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,169,97,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);
}
.hero-inner{position:relative;z-index:2}
.hero h1{margin:28px 0 32px}
.hero p.lead{margin-bottom:44px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-ctas .btn{width:340px;min-width:0;justify-content:center}
@media(max-width:560px){.hero-ctas .btn{width:100%}}

/* Hero landing (split avec stats) */
.hero-landing{display:grid;grid-template-columns:1fr;gap:60px;align-items:end}
@media(min-width:1000px){.hero-landing{grid-template-columns:1.3fr .9fr;gap:80px}}
.hero-meta{
  border-left:1px solid var(--line-strong);
  padding:24px 0 24px 32px;
  display:grid;gap:28px;
  align-self:center;
}
.hero-meta .stat .n{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--gold);line-height:1.1}
.hero-meta .stat .l{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* Hero service (centré, plus compact) */
.hero-service{padding:160px 0 100px;min-height:auto}
.hero-service .hero-inner{max-width:900px}
.hero-service .breadcrumb{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:14px;align-items:center;margin-bottom:32px;flex-wrap:wrap;
}
.hero-service .breadcrumb a:hover{color:var(--gold)}
.hero-service .breadcrumb .sep{color:var(--gold);opacity:.6}

/* Marquee */
.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid var(--line);
  padding:18px 0;
  overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-block;animation:marquee 40s linear infinite}
.marquee-track span{
  display:inline-block;padding:0 40px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.1rem;color:var(--muted);
}
.marquee-track span::before{content:"\2726";color:var(--gold);margin-right:40px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:120px 0;position:relative}
.section-head{max-width:760px;margin-bottom:80px}
.section-head h2{margin-top:24px}
.section-head p{margin-top:24px;color:var(--ink-2)}

/* ---------- Services grid (landing) ---------- */
/* Fond uniforme : les bulles 01, 03, 04 sont en background:transparent ; pour
   qu'elles se confondent vraiment avec le fond du site, la section utilise la
   même couleur que le body (var(--bg)) plutôt qu'un dégradé qui les faisait
   apparaître comme des blocs noirs distincts. */
#services{background:var(--bg)}
.services-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.services-grid{grid-template-columns:1fr 1fr}}

/* Carte service entièrement cliquable */
a.service{
  background:var(--bg);
  padding:48px 40px;
  transition:background var(--transition);
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
a.service::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:var(--gold);transition:height var(--transition);
}
a.service:hover{background:var(--bg-3)}
a.service:hover::before{height:100%}
a.service:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}

.service .num{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);
  font-size:1.5rem;
  letter-spacing:.02em;
  line-height:1.2;
}
.service h3{margin:20px 0 16px;color:var(--ink)}
.service p{color:var(--ink-2);font-size:.95rem}
/* Alignement des lignes h3, p, price entre cartes adjacentes (desktop uniquement).
   flex:1 sur p fait grandir tous les paragraphes à la même hauteur (la carte est
   elle-même stretched par la grille), et les min-heights réservent de la place
   pour les titres et prix qui varient d'une carte à l'autre. */
@media(min-width:700px){
  a.service:not(.flagship) h3{min-height:4.4rem;display:flex;align-items:flex-start}
  a.service:not(.flagship) p{flex:1 1 auto}
  a.service:not(.flagship) .price{min-height:3.2rem;display:flex;flex-direction:column;justify-content:flex-end}
}
.service .price{
  margin-top:20px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.service .price strong{color:var(--gold);font-weight:500;letter-spacing:.06em;text-transform:none;font-family:'Cormorant Garamond',serif;font-size:1.4rem;display:block;margin-top:6px}
.service .more{
  margin-top:auto;padding-top:28px;display:inline-flex;align-items:center;gap:10px;
  color:var(--gold);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.service .more .line{width:20px;height:1px;background:var(--gold);transition:width var(--transition)}
a.service:hover .more .line{width:40px}

/* Carte service « Offre phare » */
@media(min-width:700px){.services-grid .flagship{grid-column:1 / -1}}
a.service.flagship{
  background:linear-gradient(135deg,rgba(201,169,97,.12) 0%,rgba(201,169,97,.04) 60%,var(--bg) 100%);
  padding:56px 48px;
  border:1px solid rgba(201,169,97,.45);
}
a.service.flagship::before{background:var(--gold);width:3px;height:100%}
a.service.flagship:hover{background:linear-gradient(135deg,rgba(201,169,97,.18) 0%,rgba(201,169,97,.06) 60%,var(--bg-3) 100%)}
a.service.flagship .badge-flagship{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--gold);color:var(--bg);
  font-family:'Inter',sans-serif;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  padding:8px 14px;border-radius:2px;margin-bottom:20px;
}
a.service.flagship h3{font-size:clamp(2rem,3.2vw,2.5rem);line-height:1.1}
a.service.flagship .num{color:var(--gold);font-size:1.75rem}
a.service.flagship p{font-size:1.02rem;max-width:72ch}
a.service.flagship .flagship-includes{
  margin-top:28px;display:grid;grid-template-columns:1fr;gap:10px;
}
@media(min-width:800px){a.service.flagship .flagship-includes{grid-template-columns:1fr 1fr}}
a.service.flagship .flagship-includes .row{
  color:var(--ink-2);font-size:.9rem;display:flex;gap:14px;align-items:flex-start;
}
a.service.flagship .flagship-includes .row .bullet{
  display:inline-block;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
  flex-shrink:0;margin-top:8px;
  font-size:0;line-height:0;color:transparent;
}

/* ---------- Section Packs combinés ---------- */
/* La barre dorée centrée au-dessus de « Combinaisons recommandées » a été
   retirée : elle créait une grande ligne horizontale parasite juste avant le
   libellé. Le libellé reste flanqué de ses deux filets latéraux internes. */
#packs{position:relative}
.packs-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
@media(min-width:800px){.packs-grid{grid-template-columns:1fr 1fr;gap:32px}}
.pack{
  background:var(--bg);
  border:1px solid var(--line-strong);
  padding:48px 40px;
  position:relative;
  display:flex;flex-direction:column;
  transition:border-color var(--transition),transform var(--transition);
}
.pack:hover{border-color:rgba(201,169,97,.5);transform:translateY(-4px)}
.pack .pack-label{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}
.pack h3{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,2.4vw,2rem);
  color:var(--ink);margin-bottom:16px;line-height:1.15;
}
.pack .pack-pitch{color:var(--ink-2);font-size:.98rem;margin-bottom:24px}
.pack .pack-content{
  list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px;
  padding-top:24px;border-top:1px solid var(--line);
}
.pack .pack-content li{
  color:var(--ink-2);font-size:.92rem;display:flex;gap:14px;align-items:flex-start;
}
.pack .pack-content li::before{
  content:"";display:inline-block;
  width:6px;height:6px;background:var(--gold);
  transform:rotate(45deg);flex-shrink:0;margin-top:8px;
}
.pack .pack-price{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.pack .pack-price .label{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.pack .pack-price .value{
  font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.5rem;font-style:italic;
}

/* Note encadrée sous tableau différenciation */
.diff-note{
  margin-top:40px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--gold);
  padding:28px 32px;
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
}
.diff-note .icon{
  width:40px;height:40px;border-radius:50%;
  background:rgba(201,169,97,.12);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;line-height:1;
}
.diff-note .note-content .note-title{
  display:block;
  font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.diff-note .note-content p{
  color:var(--ink-2);font-size:.98rem;line-height:1.7;margin:0;max-width:none;
}
.diff-note .note-content p strong{color:var(--ink);font-weight:500}
@media(max-width:700px){
  .diff-note{padding:22px 20px;grid-template-columns:1fr;gap:14px}
}

/* ---------- Section Convictions (bandeau immersif compact) ---------- */
#convictions{
  padding:90px 0 70px;
  background:linear-gradient(180deg,#0B0B0C 0%,#15110d 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
  position:relative;
  overflow:hidden;
}
#convictions::before{
  content:"V";position:absolute;
  font-family:'Italiana',serif;
  font-size:clamp(280px,36vw,460px);
  color:var(--gold);opacity:.05;line-height:.85;
  top:50%;left:50%;transform:translate(-50%,-45%);
  pointer-events:none;user-select:none;z-index:0;
}
#convictions .container{position:relative;z-index:1;max-width:980px}
#convictions h2{
  margin:14px 0 28px;
  font-weight:400;
  font-family:'Cormorant Garamond',serif;
  color:var(--ink);
}
.convictions-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.4rem,2.3vw,1.95rem);
  color:var(--gold);line-height:1.35;
  max-width:42ch;margin:0 auto 36px;
}
.convictions-credos{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:22px 36px;margin-top:32px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.05rem;color:var(--ink-2);
}
.convictions-credos > span{display:inline-flex;align-items:center;gap:14px}
.convictions-credos > span::before{
  content:"";width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);flex-shrink:0;
}
.convictions-signature{
  margin-top:42px;padding-top:24px;
  border-top:1px solid rgba(201,169,97,.18);
  display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  color:var(--muted);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
}
.convictions-signature em{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--ink);font-size:1.2rem;
  text-transform:none;letter-spacing:0;
}

/* ---------- Section Notre approche (grille épurée 2x2 avec titres or) ---------- */
#about{padding:120px 0;background:var(--bg)}
#about .head{max-width:760px;margin:0 auto 72px;text-align:center}
#about .head h2{margin:24px 0 24px}
#about .head .lead{margin:0 auto;color:var(--ink-2)}
#about .pillars{
  display:grid;grid-template-columns:1fr;gap:0;
  max-width:1080px;margin:0 auto;
  border-top:1px solid var(--line);
}
@media(min-width:800px){#about .pillars{grid-template-columns:repeat(2,1fr)}}
#about .pillar{padding:36px 32px;border-bottom:1px solid var(--line);position:relative}
@media(min-width:800px){#about .pillar:nth-child(odd){border-right:1px solid var(--line)}}
#about .pillar h4{
  font-size:1.45rem;color:var(--gold);
  font-weight:400;margin-bottom:14px;
  font-family:'Cormorant Garamond',serif;letter-spacing:.01em;
}
#about .pillar p{color:var(--ink-2);font-size:.95rem;line-height:1.7}
#about .cta-line{margin-top:60px;text-align:center}

/* ---------- Différenciation (table) ---------- */
.diff-table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--bg-2)}
.diff-table{
  min-width:720px;
  width:100%;
  position:relative;
}
.diff-row{
  display:grid;
  grid-template-columns:1.6fr 1.3fr 1fr 1fr;
  border-bottom:1px solid var(--line);
}
.diff-row:last-child{border-bottom:none}
.diff-row.head{background:rgba(201,169,97,.05)}
.diff-row .cell{
  padding:22px 20px;
  font-size:.92rem;
  color:var(--ink-2);
  border-right:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.diff-row .cell:last-child{border-right:none}
.diff-row .cell.crit{
  justify-content:flex-start;text-align:left;
  color:var(--ink);font-weight:400;
}
.diff-row.head .cell{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;
  color:var(--ink);
  font-style:italic;
  line-height:1.3;
}
/* Colonne Maison Voiron Advisory mise en avant */
.diff-row .cell.us{
  background:linear-gradient(180deg,rgba(201,169,97,.09),rgba(201,169,97,.04));
  border-left:1px solid rgba(201,169,97,.35);
  border-right:1px solid rgba(201,169,97,.35);
  position:relative;
}
.diff-row.head .cell.us{
  color:var(--gold);
  background:linear-gradient(180deg,rgba(201,169,97,.18),rgba(201,169,97,.08));
  font-size:1.15rem;
  font-weight:500;
}
.diff-row.head .cell.us::after{
  content:"Notre périmètre";
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-family:'Inter',sans-serif;font-style:normal;
  font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);opacity:.8;
}
.diff-row.head .cell.us{padding-top:28px}
/* Indicateurs */
.diff-row .check{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(201,169,97,.12);
  color:var(--gold);
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;
  line-height:1;
}
.diff-row .cell.us .check{
  background:var(--gold);
  color:var(--bg);
  width:32px;height:32px;font-size:1.25rem;
  box-shadow:0 0 0 4px rgba(201,169,97,.15);
}
.diff-row .cross{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 10px;border-radius:14px;
  background:transparent;
  color:var(--muted);opacity:.5;
  font-family:'Inter',sans-serif;font-style:normal;
  font-size:.8rem;letter-spacing:.08em;text-transform:lowercase;
}
.diff-row .partial{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 12px;border-radius:14px;
  background:rgba(201,169,97,.08);
  border:1px solid rgba(201,169,97,.35);
  color:var(--gold);
  font-family:'Inter',sans-serif;font-style:normal;
  font-size:.78rem;letter-spacing:.08em;text-transform:lowercase;
  opacity:.85;
}
@media(max-width:900px){
  .diff-table{font-size:.82rem}
  .diff-row{grid-template-columns:1.3fr 1.1fr .9fr .9fr;min-width:720px}
  .diff-row .cell{padding:16px 12px}
  .diff-row.head .cell{font-size:.9rem}
  .diff-row.head .cell.us{font-size:1rem}
}

/* ---------- Différenciation (3 colonnes côte à côte) ---------- */
.diff-cols{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-bottom:40px;
}
@media(min-width:900px){.diff-cols{grid-template-columns:repeat(3,1fr)}}
.diff-col{background:var(--bg-2);padding:48px 32px 36px;display:flex;flex-direction:column;position:relative}
.diff-col.us{
  background:linear-gradient(180deg,rgba(201,169,97,.10) 0%,rgba(201,169,97,.04) 60%,var(--bg) 100%);
  position:relative;
}
.diff-col.us::before{
  content:"NOTRE PÉRIMÈTRE";position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--bg);
  font-size:.6rem;letter-spacing:.28em;padding:6px 16px;font-weight:500;font-family:'Inter',sans-serif;
}
.diff-col h3{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--ink);
  font-weight:400;margin:0 0 18px;line-height:1.2;
  min-height:60px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.diff-col.us h3{color:var(--gold)}
.diff-col ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;
  padding-top:24px;border-top:1px solid var(--line);
}
.diff-col li{
  display:grid;grid-template-columns:24px 1fr;gap:14px;
  align-items:flex-start;color:var(--ink-2);font-size:.92rem;line-height:1.5;
}
.diff-col .ic{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;line-height:1;flex-shrink:0;
  font-family:'Cormorant Garamond',serif;
}
/* Toutes les colonnes : la capacité remplie est marquée par un point doré
   plein (même traitement visuel pour Maison Voiron et pour les confrères),
   plutôt qu'un rond avec un petit point au centre. */
.diff-col .ic.yes{
  background:var(--gold);
  width:24px;height:24px;
  box-shadow:0 0 0 4px rgba(201,169,97,.15);
  color:transparent;font-size:0;
}
.diff-col .ic.partial{background:transparent;border:1px solid rgba(201,169,97,.4);color:var(--gold);font-style:italic;font-size:.95rem}
.diff-col .ic.no{background:transparent;color:var(--muted);opacity:.4;font-size:.95rem}

/* ---------- Processus (timeline) ---------- */
.process{display:grid;grid-template-columns:1fr;gap:0;border-left:1px solid var(--line);padding-left:0;margin-left:0}
.step{
  position:relative;padding:32px 0 32px 56px;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none}
.step .step-num{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);
  font-size:1.3rem;
  letter-spacing:.02em;
  line-height:1.2;
}
.step h3{margin:8px 0 12px;position:relative}
.step h3::before{
  content:"";position:absolute;
  left:-56px;top:50%;
  width:12px;height:12px;
  background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg);
}
.step p{color:var(--ink-2)}

/* ---------- Frise horizontale épurée (déroulé prestation, V1) ---------- */
.hf-line{
  position:relative;display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
  gap:0;padding:50px 0 20px;
}
.hf-line .hf-axis{
  position:absolute;left:calc(50%/var(--cols,4));right:calc(50%/var(--cols,4));
  top:54px;height:1px;background:var(--line-strong);
}
.hf-line .hf-step{position:relative;padding:0 16px;text-align:center;z-index:2}
.hf-line .hf-marker{
  display:block;width:10px;height:10px;background:var(--gold);
  transform:rotate(45deg);margin:0 auto 28px;position:relative;z-index:3;
}
.hf-line .hf-when{
  font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:500;
  display:block;margin-bottom:12px;
}
.hf-line h3{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:1.2rem;color:var(--ink);margin:0 0 14px;line-height:1.3;
}
.hf-line p{color:var(--ink-2);font-size:.92rem;line-height:1.65;max-width:28ch;margin:0 auto}
@media(max-width:860px){
  .hf-line{grid-template-columns:1fr;gap:40px;padding:30px 0 20px}
  .hf-line .hf-axis{display:none}
  .hf-line .hf-marker{margin-bottom:18px}
}

/* ---------- Liste prestation ---------- */
.deliverables{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
  margin-top:32px;
}
.deliverable{
  padding:26px 0;border-bottom:1px solid var(--line);
  display:flex;gap:32px;align-items:baseline;
}
.deliverable .marker{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);
  font-size:2.5rem;
  line-height:1;
  min-width:64px;
  flex-shrink:0;
}
@media(max-width:600px){
  .deliverable{gap:20px}
  .deliverable .marker{font-size:2rem;min-width:48px}
}
.deliverable p{color:var(--ink-2);margin:0}
.deliverable strong{color:var(--ink);font-weight:500}

/* ---------- Deliverables grille (Layout A) ----------
   Variante en grille de cartes (3 ou 4 colonnes) utilisée sur les prestations
   centrées sur l'action (Chasse Immobilière 9 actions, Pilotage MOA 8). En-tête
   avec numéro et titre INLINE en Cormorant italique doré pour marquer la
   signature visuelle, description en Inter en dessous. */
.deliv-grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:32px;
}
@media(min-width:700px){.deliv-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.deliv-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px){.deliv-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.deliv-cell{
  background:var(--bg);padding:32px 24px;
  display:flex;flex-direction:column;gap:10px;
  transition:background .35s,border-color .35s;
  position:relative;
}
.deliv-cell:hover{background:var(--bg-3)}
/* En-tête : numéro et titre sur la MÊME ligne, tous deux en Cormorant Garamond
   italique doré, taille 1.55rem (légèrement plus grosse). align-items:flex-start
   pour ancrer titre et numéro en haut de la zone, ce qui permet de positionner
   ensuite le tag « Inclus » exactement sur le milieu de la première ligne du
   titre via position absolute. min-height à 2.4em (~deux lignes) pour que les
   paragraphes en dessous démarrent à la même hauteur dans toutes les cellules
   d'une rangée. */
.deliv-head{
  display:flex;align-items:flex-start;gap:12px;
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);
  font-size:1.55rem;line-height:1.2;
  min-height:2.4em;
  position:relative;
}
.deliv-head .num{flex-shrink:0}
.deliv-head h3,
.deliv-head h4{
  font-family:inherit;font-style:inherit;color:inherit;
  font-size:inherit;font-weight:400;margin:0;line-height:1.2;
}
/* Tag « Inclus » : positionné en absolu sur le coin haut-droit de l'en-tête,
   centré verticalement sur la première ligne du titre (à 0.6em du haut, ce
   qui correspond au milieu de la line-box 1.2em du titre). */
.deliv-head .deliv-tag{
  position:absolute;right:0;top:0.6em;
  transform:translateY(-50%);
  flex-shrink:0;
}
.deliv-cell p{color:var(--ink-2);font-size:.95rem;line-height:1.5;margin:0}
/* Cellule "bonus" mise en exergue (utilisée pour la Lecture du Bien offerte
   en dernière cellule de la chasse immobilière). */
.deliv-cell.highlight{
  background:linear-gradient(135deg,rgba(201,169,97,.16),rgba(201,169,97,.04) 70%);
}
.deliv-cell.highlight:hover{
  background:linear-gradient(135deg,rgba(201,169,97,.22),rgba(201,169,97,.06) 70%);
}
.deliv-cell .deliv-tag{
  align-self:flex-start;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:3px 8px;
  font-family:'Inter',sans-serif;font-style:normal;
}

/* ---------- Rapport / Livret / Dossier (Layout C) ----------
   Aperçu visuel du livrable papier crème à gauche (légèrement basculé,
   avec monogramme V or et sommaire numéroté), liste à droite en deux
   colonnes avec lecture verticale (le 02 sous le 01, le 06 sous le 05).
   Utilisé sur les pages prestations 2, 3, 4 (Lecture du Bien, Conception
   Globale, Vision et Palette). */
.rapport-layout{
  display:grid;grid-template-columns:1fr;gap:32px;
  margin-top:32px;
}
@media(min-width:900px){
  .rapport-layout{grid-template-columns:340px 1fr;gap:48px;align-items:start}
}
.rapport-doc{
  background:linear-gradient(180deg,#fbfaf6 0%,#f4f0e6 100%);
  color:#2a2620;
  aspect-ratio:1/1.35;
  padding:36px 28px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.4);
  position:relative;font-family:'Cormorant Garamond',serif;
  transform:rotate(-2deg);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.rapport-doc:hover{transform:rotate(0)}
.rapport-doc::before{
  content:"V";position:absolute;top:14px;right:22px;
  font-family:'Italiana',serif;font-size:38px;line-height:1;
  color:#C9A961;font-weight:400;
}
.rapport-doc .doc-eyebrow{font-family:'Inter',sans-serif;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:#8B7541;font-weight:500}
.rapport-doc .doc-title{font-size:1.45rem;line-height:1.2;font-weight:400;margin:8px 0 4px}
.rapport-doc .doc-italic{font-style:italic;color:#8B7541}
.rapport-doc hr{border:0;border-top:1px solid rgba(139,117,65,.4);margin:6px 0 4px}
.rapport-doc .doc-summary{font-family:'Inter',sans-serif;font-size:.62rem;line-height:1.7;color:#5a5044;display:grid;gap:5px;margin-top:6px}
.rapport-doc .doc-summary span{display:flex;align-items:baseline;gap:8px}
.rapport-doc .doc-summary span em{font-style:italic;color:#8B7541;flex-shrink:0}
.rapport-doc .doc-summary span em.n{color:#C9A961;font-weight:500;min-width:18px}
.rapport-doc .doc-summary span em.p{margin-left:auto}
.rapport-doc .doc-bottom{margin-top:auto;font-family:'Inter',sans-serif;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:#8B7541;text-align:center;border-top:1px solid rgba(139,117,65,.3);padding-top:8px}

/* Liste à droite : grille deux colonnes, items remplis top→bottom dans col 1
   puis col 2. Toutes les cases de la même rangée prennent la hauteur de la
   plus grande (alignement vertical garanti). Le nombre de rangées est passé
   par la variable CSS --rows sur l'élément (4 pour 8 items, 3 pour 6, etc.).
   Tailles typographiques agrandies pour la lisibilité. */
.rapport-list{
  display:grid;grid-template-columns:1fr;gap:10px;
}
@media(min-width:1100px){
  .rapport-list{
    grid-template-columns:1fr 1fr;
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--rows, 4), 1fr);
  }
}
.rapport-item{
  display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:flex-start;
  padding:18px 20px;background:var(--bg-2);border-left:1px solid rgba(201,169,97,.28);
  transition:border-left-color .35s,background .35s;
}
.rapport-item:hover{border-left-color:var(--gold);background:var(--bg-3)}
.rapport-item .num{
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);
  font-size:1.85rem;line-height:1;
}
.rapport-item .body strong{
  display:block;color:var(--gold);font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:1.35rem;font-weight:400;
  margin-bottom:4px;line-height:1.25;
}
.rapport-item .body p{color:var(--ink-2);font-size:.92rem;line-height:1.5;margin:0}

/* ---------- Pricing card ---------- */
.pricing-card{
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  padding:48px 40px;
  position:relative;
}
.pricing-card .label{
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);
}
.pricing-card .amount{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.5rem,5vw,3.75rem);
  color:var(--ink);margin:12px 0 8px;line-height:1;
}
.pricing-card .amount .gold-italic{font-size:.7em}
.pricing-card .note{color:var(--muted);font-size:.9rem;margin-bottom:32px}
.pricing-card .includes{display:grid;gap:14px;margin-top:24px}
.pricing-card .includes .row{
  display:flex;gap:14px;color:var(--ink-2);font-size:.95rem;
  padding-top:14px;border-top:1px solid var(--line);
  align-items:flex-start;
}
.pricing-card .includes .row .marker{
  display:inline-block;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
  flex-shrink:0;margin-top:8px;
  font-size:0;line-height:0;color:transparent;
}

/* Two-column section */
.split-section{display:grid;grid-template-columns:1fr;gap:60px;align-items:start}
@media(min-width:900px){.split-section{grid-template-columns:1.1fr .9fr;gap:80px}}

/* ---------- Témoignages ---------- */
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial{
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:44px 36px;
  position:relative;
  transition:transform var(--transition),border-color var(--transition);
}
.testimonial:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.testimonial .quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:4rem;line-height:1;color:var(--gold);
  position:absolute;top:16px;right:24px;opacity:.4;
}
.testimonial p{color:var(--ink-2);font-size:.98rem;line-height:1.75}
.testimonial .who{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
}
.testimonial .avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;color:var(--bg);font-size:1.1rem;
}
.testimonial .name{color:var(--ink);font-weight:500;font-size:.95rem}
.testimonial .role{color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:28px 0}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ink);
  transition:color var(--transition);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold)}
.faq-item summary::after{
  content:"+";font-size:1.6rem;color:var(--gold);font-family:'Cormorant Garamond',serif;
  transition:transform var(--transition);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .answer{margin-top:18px;color:var(--ink-2);font-size:1rem;max-width:75ch}

/* ---------- Contact ---------- */
#contact{
  background:var(--bg);
  background-image:
    radial-gradient(800px 500px at 50% 0%,rgba(201,169,97,.1),transparent 65%),
    radial-gradient(500px 300px at 50% 100%,rgba(201,169,97,.06),transparent 70%);
}
.contact-grid{display:grid;grid-template-columns:1fr;gap:60px}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:80px}}
.contact-info h2{margin-top:20px;margin-bottom:24px}
.contact-info p{color:var(--ink-2);margin-bottom:40px}
.contact-details{display:grid;gap:0}
.contact-details .row{
  display:flex;align-items:center;gap:18px;
  padding:18px 0;border-top:1px solid var(--line);
}
.contact-details .row:last-child{border-bottom:1px solid var(--line)}
.contact-details .row .lbl{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);min-width:90px;
}
.contact-details .row .val{color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:1.2rem}
.contact-details .row a.val:hover{color:var(--gold)}

form{display:grid;gap:20px;background:var(--bg-2);padding:44px 36px;border:1px solid var(--line)}
.field{display:grid;gap:8px}
.field label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:12px 0;color:var(--ink);font-family:inherit;font-size:1rem;
  transition:border-color var(--transition);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field textarea{resize:vertical;min-height:100px}
.field select{appearance:none;cursor:pointer}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
form .btn{margin-top:12px;justify-self:start}

/* Marqueur "obligatoire" (asterisque dorée) */
.field label .req,.field.consent .req{color:var(--gold);font-weight:500;margin-left:2px}
.form-required-note{
  font-family:'Inter',sans-serif;font-size:.72rem;color:var(--muted);
  margin:0;letter-spacing:.02em;
}
.form-required-note .req{color:var(--gold);margin-right:4px}

/* Etat erreur sur un champ */
.field.has-error label{color:#E07F7F}
.field.has-error input,
.field.has-error textarea,
.field.has-error select{border-bottom-color:#E07F7F}
.field.consent.has-error .checkbox span{color:#E07F7F}
.field.consent.has-error .checkbox input[type="checkbox"]{outline:1px solid #E07F7F;outline-offset:2px}

/* Bandeau de feedback (erreur ou succes) */
.form-feedback{display:none}
.form-feedback.is-error,.form-feedback.is-success{
  display:block;
  font-family:'Inter',sans-serif;font-size:.85rem;line-height:1.5;
  padding:14px 18px;margin:0 0 8px;
  border-left:2px solid;
}
.form-feedback.is-error{
  background:rgba(224,127,127,.08);
  border-color:#E07F7F;color:#E9AAAA;
}
.form-feedback.is-success{
  background:rgba(201,169,97,.08);
  border-color:var(--gold);color:var(--ink);
}

/* ---------- CTA section ---------- */
.cta-section{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:120px 0;
  text-align:center;
}
.cta-section h2{max-width:18ch;margin:24px auto 24px}
.cta-section p{max-width:55ch;margin:0 auto 40px;color:var(--ink-2)}

/* ---------- Footer ---------- */
footer{
  background:#070708;border-top:1px solid var(--line);
  padding:80px 0 32px;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:60px}
@media(min-width:800px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-col h5{
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;font-weight:500;font-family:'Inter',sans-serif;
}
.footer-col ul{list-style:none;display:grid;gap:12px}
.footer-col a{color:var(--ink-2);font-size:.92rem;transition:color var(--transition);white-space:nowrap}
.footer-col a:hover{color:var(--gold)}
.footer-col a em.num{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold);font-size:1rem;letter-spacing:.04em;
  text-transform:none;margin-right:8px;display:inline-block;font-weight:400;
}
.footer-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-brand p{color:var(--muted);font-size:.92rem;max-width:36ch;margin:16px auto 0;text-align:center}
.footer-bottom{
  padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:.78rem;color:var(--muted);letter-spacing:.08em;
}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Pages légales (prose) ---------- */
.legal-content{padding:60px 0 120px}
.legal-content .container{max-width:860px}
.legal-content h2{
  margin:56px 0 18px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,2.4vw,2rem);
  color:var(--ink);line-height:1.2;
}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{
  margin:32px 0 12px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;color:var(--gold);font-style:italic;font-weight:400;
}
.legal-content p{color:var(--ink-2);margin:0 0 14px;line-height:1.75;font-size:.98rem}
.legal-content ul,.legal-content ol{
  color:var(--ink-2);margin:0 0 18px 0;padding-left:22px;
  line-height:1.75;font-size:.98rem;
}
.legal-content li{margin-bottom:8px}
.legal-content ul li::marker{color:var(--gold)}
.legal-content strong{color:var(--ink);font-weight:500}
.legal-content a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal-content a:not(.btn):hover{color:var(--gold-2)}
.legal-content .placeholder{
  display:inline-block;padding:1px 10px;
  background:rgba(201,169,97,.08);
  border:1px dashed rgba(201,169,97,.45);
  color:var(--gold);font-family:'Inter',sans-serif;font-size:.88em;font-style:italic;
  line-height:1.5;
}
.legal-content .legal-lead{
  color:var(--ink-2);font-size:1.02rem;line-height:1.7;
  padding:22px 26px;background:var(--bg-2);
  border-left:3px solid var(--gold);
  margin-bottom:40px;
}
.legal-content .legal-updated{
  margin-top:80px;padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:.85rem;letter-spacing:.08em;
}
.legal-toc{
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:24px 28px;margin-bottom:48px;
}
.legal-toc h4{
  font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:500;
}
.legal-toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.legal-toc ol li{
  counter-increment:toc;margin-bottom:6px;
  padding-left:26px;position:relative;font-size:.92rem;
}
.legal-toc ol li::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:0;
  color:var(--gold);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;
}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--gold)}

/* ========================================================================
   Univers graphique - éléments réutilisables
   Trousse minimaliste : V filigrane, filets or, losange or
   Voir Charte graphique/univers-graphique.md pour les règles d'usage
   ======================================================================== */

/* ---------- Filets or ---------- */
.filet{display:block;background:var(--gold)}
.filet-court{width:60px;height:1px;background:var(--gold);display:block}
.filet-vertical{width:1px;height:48px;background:var(--gold);display:inline-block;vertical-align:middle}
.filet-large{width:240px;max-width:80%;height:1px;background:var(--gold);display:block}

/* Filet centré, marge verticale par défaut */
.filet-court.center{margin-left:auto;margin-right:auto}
.section-head .filet-court{margin-top:24px}
.hero .filet-court{margin:8px 0 32px}

/* ---------- Losange or ---------- */
.losange{
  display:inline-block;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
  vertical-align:middle;flex-shrink:0;
}
.losange-md{width:8px;height:8px}

/* Séparateur losange entre éléments d'information */
.dot-sep{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Inter',sans-serif;
}
.dot-sep > .losange{margin:0}

/* Liste à puces losange premium */
.list-losange{list-style:none;padding:0;display:grid;gap:12px}
.list-losange li{
  display:flex;gap:14px;align-items:flex-start;
  color:var(--ink-2);font-size:.95rem;line-height:1.7;
}
.list-losange li::before{
  content:"";display:inline-block;
  width:6px;height:6px;background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;margin-top:10px;margin-left:2px;
}
/* Pointe gauche des losanges : on évite le clipping quand le losange est en bord d'élément */
.flagship-includes .row .bullet,
.pack .pack-content li::before,
.pricing-card .includes .row .marker,
.realisation-meta .dot{
  margin-left:2px;
}

/* ---------- V filigrane ---------- */
/* Grand format en arrière-plan absolu (hero, section signature) */
.v-watermark{
  position:absolute;
  font-family:'Italiana',serif;
  font-size:clamp(280px,38vw,520px);
  color:var(--gold);
  opacity:.06;
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.v-watermark.center{top:50%;left:50%;transform:translate(-50%,-50%)}
.v-watermark.right{top:50%;right:-60px;transform:translateY(-50%)}
.v-watermark.left{top:50%;left:-60px;transform:translateY(-50%)}

/* Format moyen pour ponctuer une section */
.v-watermark-medium{
  position:absolute;
  font-family:'Italiana',serif;
  font-size:clamp(160px,18vw,260px);
  color:var(--gold);
  opacity:.10;
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* Marque de pied (V plein, petite taille) */
.v-foot{
  font-family:'Italiana',serif;
  font-size:16px;
  color:var(--gold);
  line-height:1;
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}
.footer-bottom .v-foot{font-size:18px;margin-right:6px}

/* ---------- Eyebrow étendue avec losange ---------- */
/* Variante de l'eyebrow standard, sans le filet 36px de gauche */
.eyebrow-plain{
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

/* ============================================================================
   Module Prestations + Packs (cycle de vie projet, hover papyrus, combinaisons)
   ============================================================================ */
/* Bandeau Chasse Immobilière (en phase d'acquisition) :
   - Partie haute : titre + descriptif + honoraires (layout d'origine).
   - Partie basse : timeline horizontale en 5 étapes, masquée au repos,
     révélée en grand via grid-template-rows 0fr→1fr quand l'utilisateur
     survole le bandeau. */
.pres-acq{
  margin-bottom:48px;
  background:linear-gradient(135deg,rgba(201,169,97,.08),rgba(201,169,97,.02));
  border:1px solid rgba(201,169,97,.4);
  transition:background .5s ease,border-color .5s ease;
}
.pres-acq:hover{
  background:linear-gradient(135deg,rgba(201,169,97,.12),rgba(201,169,97,.03));
  border-color:rgba(201,169,97,.55);
}
.pres-acq-top{
  padding:28px 32px;
  display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
}
@media(min-width:900px){.pres-acq-top{grid-template-columns:1fr auto;gap:36px}}
.pres-tag{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding:5px 12px;border:1px solid var(--gold);
  min-width:260px;text-align:center;box-sizing:border-box;
  margin-bottom:12px;
}
/* Le titre du bandeau chasse adopte la même couleur dorée et le même italique
   que les rangs des cartes prestations (.pres-rk), pour homogénéiser les
   "noms numérotés de prestations" sur toute la page d'accueil. Taille
   légèrement supérieure pour rester en rapport avec sa zone plus large. */
.pres-acq-info h3{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.55rem;color:var(--gold);
  margin:0 0 10px;font-weight:400;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pres-acq-info p{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin:0;max-width:80ch}
.pres-acq-info p strong{color:var(--gold);font-weight:500}
.pres-acq-right{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media(min-width:900px){.pres-acq-right{align-items:flex-end;text-align:right;border-left:1px solid rgba(201,169,97,.28);padding-left:32px}}
.pres-price{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.pres-price strong{display:block;color:var(--gold);font-weight:500;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-style:italic;letter-spacing:.04em;text-transform:none;margin-top:4px}
.pres-acq-right .pres-more{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px;text-decoration:none}

/* Wrapper qui anime la hauteur de la timeline (0fr → 1fr). overflow:hidden +
   min-height:0 sur l'inner permettent au contenu d'être clippé proprement
   pendant la transition. */
.pres-acq-expand{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .8s cubic-bezier(.4,0,.2,1);
}
.pres-acq:hover .pres-acq-expand{grid-template-rows:1fr}
.pres-acq-expand-inner{overflow:hidden;min-height:0}

.pres-acq-timeline{
  border-top:1px solid rgba(201,169,97,.28);
  padding:28px 32px 30px;
  display:grid;grid-template-columns:1fr;gap:24px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s ease .15s,transform .5s cubic-bezier(.4,0,.2,1) .1s;
}
.pres-acq:hover .pres-acq-timeline{opacity:1;transform:none}
@media(min-width:900px){.pres-acq-timeline{grid-template-columns:repeat(5,1fr);gap:0;position:relative}}
.pres-acq-step{position:relative;padding:0 12px}
@media(min-width:900px){.pres-acq-step{padding:24px 16px 0;text-align:center}}
.pres-acq-step::before{
  content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:10px;height:10px;background:var(--bg);border:1px solid var(--gold);
  transition:background .3s,transform .3s;z-index:2;
}
.pres-acq-step:hover::before{background:var(--gold);transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}
@media(min-width:900px){
  .pres-acq-step:not(:last-child)::after{
    content:"";position:absolute;top:0;left:50%;width:100%;height:1px;
    background:rgba(201,169,97,.35);z-index:1;
  }
}
.pres-acq-step .num{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:1.1rem;display:block;margin-bottom:4px}
.pres-acq-step .lbl{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500;display:block;margin-bottom:10px}
.pres-acq-step .det{font-size:.78rem;line-height:1.5;color:var(--muted);max-width:18ch;margin:0 auto}

/* Mobile : timeline visible en permanence (pas de hover sur tactile). */
@media(max-width:799px){
  .pres-acq-expand{grid-template-rows:1fr}
  .pres-acq-timeline{opacity:1;transform:none}
}

/* Bandeau « Déjà propriétaire » : aligné sur la même largeur que .pres-acq
   (pas de retrait latéral), avec un petit trait doré qui prolonge la bulle
   vers la droite jusqu'au bord du bandeau acquisition. */
.pres-divider{
  margin:0 0 22px;
  display:flex;align-items:center;gap:24px;
}
.pres-divider .pres-tag{margin:0;flex-shrink:0}
.pres-divider .pres-divider-line{flex:1;height:1px;background:rgba(201,169,97,.28)}

/* Rangée horizontale de 4 cartes avec expand latéral au survol.
   Aucun fond ni bordure sur la rangée : les séparateurs verticaux entre cartes
   sont gérés par border-right sur chaque carte (sauf la dernière). Cela évite
   toute ligne parasite au-dessus de « Combinaisons recommandées ». */
.pres-row{display:flex;gap:0;background:transparent;border:0;overflow:visible}
.pres-row > .pres-card:not(:last-child){border-right:1px solid var(--line)}
.pres-card{
  flex:1 1 0;min-width:0;padding:32px 26px;background:transparent;
  transition:flex .75s cubic-bezier(.4,0,.2,1),background .5s ease,filter .55s ease;
  cursor:pointer;display:flex;flex-direction:column;
  color:inherit;text-decoration:none;position:relative;
  /* Fond transparent par défaut : les bulles 01, 03, 04 se confondent avec le
     fond de la section. Au survol, le fond passe en var(--bg-3) pour marquer
     l'expansion. overflow:visible pour laisser le badge OFFRE PHARE flotter
     au-dessus du flagship ; le clipping de l'effet papyrus est assuré par
     .pres-extras-wrap. */
}
.pres-row:hover > .pres-card{flex:0.82 1 0}
/* Survol : la carte s'élargit ET reçoit la mise en avant dorée
   (ancienne mise en avant "flagship") avec un dégradé chaud et un filet
   vertical doré à gauche. Aucun flag n'est appliqué par défaut. */
.pres-row > .pres-card:hover{
  flex:2.5 1 0;
  background:linear-gradient(135deg,rgba(201,169,97,.18),rgba(201,169,97,.04) 60%,var(--bg-3) 100%);
}
.pres-row > .pres-card::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:var(--gold);opacity:0;transition:opacity .55s ease;
}
.pres-row > .pres-card:hover::before{opacity:1}
.pres-row:hover > .pres-card:not(:hover) .pres-price-h,
.pres-row:hover > .pres-card:not(:hover) .pres-hint{
  opacity:.18;filter:blur(2.5px);transition:opacity .55s ease,filter .55s ease;
}
.pres-row:hover > .pres-card:not(:hover) .pres-rk,
.pres-row:hover > .pres-card:not(:hover) h3{
  opacity:.7;transition:opacity .55s ease;
}
.pres-card .pres-rk{
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);
  font-size:1.65rem;line-height:1.2;
  transition:opacity .55s ease;
}
.pres-card h3{
  margin:14px 0 14px;font-size:1.15rem;color:var(--ink);
  font-weight:400;font-family:'Cormorant Garamond',serif;line-height:1.25;transition:opacity .55s ease;
}
.pres-card .pres-price-h{
  margin-top:auto;padding-top:24px;
  /* border-top retirée : empêche la grande ligne horizontale qui apparaissait
     juste au-dessus de « Combinaisons recommandées » lorsque les quatre cartes
     alignaient leur séparateur de prix. */
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:opacity .55s ease,filter .55s ease;
}
.pres-card .pres-price-h strong{color:var(--gold);font-weight:500;font-family:'Cormorant Garamond',serif;font-size:1rem;letter-spacing:.04em;text-transform:none;margin-left:6px}
.pres-card .pres-price-h .price-sep{margin:0 14px;color:var(--muted);text-transform:lowercase}
.pres-card .pres-hint{
  margin-top:14px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.55;
  transition:opacity .55s ease,height .55s ease,margin .55s ease,filter .55s ease;
}
.pres-card:hover .pres-hint{opacity:0;height:0;margin:0;overflow:hidden}

/* Effet "papyrus" : la hauteur du wrapper grandit, le texte reste figé dans sa mise en page */
.pres-card .pres-extras-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .8s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.pres-card:hover .pres-extras-wrap{grid-template-rows:1fr}
.pres-card .pres-extras-wrap > .pres-extras{
  overflow:hidden;min-height:0;
  margin-top:24px;padding-top:24px;
  border-top:1px solid var(--line);
}
.pres-card .pres-extras .brief-inline{
  color:var(--ink-2);font-size:.92rem;line-height:1.6;
  margin:0 0 18px;font-style:italic;
}
.pres-card .pres-extras ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pres-card .pres-extras li{display:flex;gap:11px;color:var(--ink-2);font-size:.84rem;line-height:1.5;align-items:flex-start}
.pres-card .pres-extras li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;margin-top:7px;margin-left:2px}
.pres-card .pres-extras .pres-more-link{margin-top:14px;display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}

/* Mobile : empile, montre tout, neutralise blur */
@media(max-width:900px){
  .pres-row{flex-direction:column}
  .pres-card{flex:0 0 auto}
  .pres-row > .pres-card:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
  .pres-row:hover > .pres-card{flex:0 0 auto}
  .pres-row > .pres-card:hover{flex:0 0 auto;background:var(--bg)}
  .pres-card .pres-extras-wrap{grid-template-rows:1fr}
  .pres-card .pres-hint{display:none}
  .pres-row:hover > .pres-card:not(:hover) .pres-price-h,
  .pres-row:hover > .pres-card:not(:hover) .pres-hint,
  .pres-row:hover > .pres-card:not(:hover) .pres-rk,
  .pres-row:hover > .pres-card:not(:hover) h3{opacity:1;filter:none}
}

/* Combinaisons recommandées : deux filets latéraux + libellé centré */
.pres-combinaisons{margin:56px 0 28px;display:flex;align-items:center;gap:18px}
.pres-combinaisons .filet{flex:1;height:1px;background:rgba(201,169,97,.28)}
.pres-combinaisons .label{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500;flex-shrink:0}
.pres-packs{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.pres-packs{grid-template-columns:1fr 1fr;gap:32px}}
.pres-pack{
  background:linear-gradient(135deg,rgba(201,169,97,.06),rgba(201,169,97,.02));
  border:1px solid rgba(201,169,97,.45);padding:36px 32px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s,border-color .35s;
  text-decoration:none;color:inherit;
}
.pres-pack:hover{transform:translateY(-4px);border-color:var(--gold)}
.pres-pack .pack-label{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.pres-pack h3{font-family:'Cormorant Garamond',serif;font-size:1.55rem;color:var(--ink);font-weight:400;line-height:1.2;margin:0 0 16px}
.pres-pack .pack-components{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pres-pack .pack-components span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:5px 12px;border:1px solid var(--line-strong);background:var(--bg)}
.pres-pack p{color:var(--ink-2);font-size:.92rem;line-height:1.65;margin:0 0 22px}
.pres-pack .pack-price-line{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.pres-pack .pack-price-line .l{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pres-pack .pack-price-line .v{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.5rem;font-style:italic}

/* ---------- Réalisations récentes (mosaïque flagship + modale au clic) ---------- */
/* Liseré doré en haut de la section pour adoucir la rupture de fond avec
   la section Prestations (même logique que le séparateur retiré au-dessus
   de « Combinaisons recommandées », repositionné ici où il a du sens). */
#realisations{position:relative}
#realisations::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.4),transparent);
}
.real-mosaic{
  display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px;
}
@media(min-width:900px){
  .real-mosaic{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:18px;min-height:640px;
  }
}
.real-tile{
  position:relative;border:1px solid var(--line);overflow:hidden;
  display:block;color:inherit;text-decoration:none;
  min-height:240px;cursor:pointer;
  transition:border-color .35s,transform .55s cubic-bezier(.4,0,.2,1);
}
.real-tile:hover{border-color:var(--gold);transform:scale(1.012)}
.real-tile.featured{grid-column:1 / span 2;grid-row:1 / span 2}
@media(max-width:899px){.real-tile.featured{aspect-ratio:4/3}}
.real-tile .real-visual{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(201,169,97,.18) 0%,rgba(201,169,97,.04) 60%,#0B0B0C 100%),
    radial-gradient(circle at 30% 35%,rgba(201,169,97,.22),transparent 55%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.real-tile .real-visual::before{
  content:"V";font-family:'Italiana',serif;
  font-size:clamp(120px,18vw,260px);
  color:var(--gold);opacity:.18;line-height:.8;
}
.real-tile .real-visual::after{
  content:"Rendu à venir";position:absolute;bottom:18px;left:0;right:0;
  text-align:center;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.real-tile .real-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:24px 22px 22px;
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.55) 35%,rgba(11,11,12,.95) 100%);
}
.real-tile.featured .real-info{padding:36px 32px 28px}
.real-tile .real-meta{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.real-tile h3,.real-tile h4{font-family:'Cormorant Garamond',serif;color:var(--ink);font-weight:400;line-height:1.2;margin:0}
.real-tile h4{font-size:1.05rem}
.real-tile.featured h3{font-size:clamp(1.6rem,2.5vw,2rem)}
.real-tile.featured p{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin:14px 0 0;max-width:50ch}
.real-tile.featured .real-badge{position:absolute;top:0;left:0;background:var(--gold);color:var(--bg);font-size:.6rem;letter-spacing:.28em;padding:6px 14px;z-index:2;font-family:'Inter',sans-serif;font-weight:500}

/* Mosaïque floutée en attente des références */
.real-mosaic-wrapper{position:relative;margin-top:40px}
.real-mosaic-wrapper .real-mosaic{margin-top:0;pointer-events:none;user-select:none}
.real-mosaic-wrapper .real-mosaic.is-blurred{
  filter:blur(14px) saturate(.85);
  opacity:.55;
  transform:scale(1.01);
  transition:filter .6s ease;
}
.real-mosaic-wrapper .real-tile{cursor:default}
.real-mosaic-wrapper .real-tile:hover{border-color:var(--line);transform:none}
.real-mosaic-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(11,11,12,.55) 0%,rgba(11,11,12,.85) 70%,rgba(11,11,12,.95) 100%);
  border:1px solid var(--line);
}
.real-mosaic-overlay-text{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--ink);
  margin:0;text-align:center;padding:0 24px;letter-spacing:.01em;line-height:1.4;
}
.real-mosaic-overlay-text::before{
  content:"";display:block;width:42px;height:1px;background:var(--gold);
  margin:0 auto 22px;opacity:.7;
}

/* Modale de détail (galerie images + vidéos + métadonnées) */
.real-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:32px}
.real-modal.open{display:flex}
.real-modal-backdrop{position:absolute;inset:0;background:rgba(7,7,8,.92);backdrop-filter:blur(6px);cursor:pointer}
.real-modal-content{
  position:relative;z-index:1;width:100%;max-width:1380px;
  background:var(--bg-2);border:1px solid var(--line-strong);
  display:grid;grid-template-columns:1fr;max-height:90vh;overflow:hidden;
}
@media(min-width:1000px){.real-modal-content{grid-template-columns:2.2fr 1fr}}
.real-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:42px;height:42px;border:1px solid rgba(201,169,97,.4);background:rgba(11,11,12,.8);
  color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.6rem;line-height:1;
  cursor:pointer;transition:all .25s;
}
.real-modal-close:hover{background:var(--gold);color:var(--bg)}
.real-modal-gallery{position:relative;background:#0B0B0C;min-height:360px;overflow:hidden}
@media(min-width:1000px){.real-modal-gallery{min-height:600px}}
.real-modal-stage{position:absolute;inset:0;display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.real-modal-slide{flex:0 0 100%;position:relative;overflow:hidden}
.real-modal-slide .real-visual-fill{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(201,169,97,.18) 0%,rgba(201,169,97,.04) 60%,#0B0B0C 100%),
    radial-gradient(circle at 30% 35%,rgba(201,169,97,.22),transparent 55%);
  display:flex;align-items:center;justify-content:center;
}
.real-modal-slide .real-visual-fill::before{
  content:"V";font-family:'Italiana',serif;font-size:clamp(160px,22vw,320px);
  color:var(--gold);opacity:.18;line-height:.8;
}
.real-modal-slide.video::before{
  content:"VIDÉO";position:absolute;top:18px;left:18px;z-index:2;
  background:rgba(11,11,12,.72);color:var(--gold);
  font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.28em;padding:6px 14px;border:1px solid var(--gold);
}
.real-modal-slide.video::after{
  content:"\25B6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;background:rgba(201,169,97,.85);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  box-shadow:0 0 0 8px rgba(201,169,97,.18);
}
.real-modal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border:1px solid rgba(201,169,97,.45);background:rgba(11,11,12,.65);
  color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.6rem;line-height:1;
  cursor:pointer;transition:all .25s;
}
.real-modal-arrow:hover{background:var(--gold);color:var(--bg)}
.real-modal-arrow.prev{left:18px}
.real-modal-arrow.next{right:18px}
.real-modal-counter{
  position:absolute;bottom:18px;right:18px;z-index:2;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--ink);font-size:.95rem;letter-spacing:.05em;
  background:rgba(11,11,12,.72);padding:6px 14px;border:1px solid rgba(201,169,97,.3);
}
.real-modal-thumbs{position:absolute;bottom:18px;left:18px;z-index:2;display:flex;gap:8px}
.real-modal-thumb{
  width:54px;height:36px;border:1px solid rgba(201,169,97,.3);
  background:linear-gradient(135deg,rgba(201,169,97,.18) 0%,#0B0B0C 100%);
  cursor:pointer;transition:border-color .25s;
  display:flex;align-items:center;justify-content:center;
  color:rgba(201,169,97,.45);font-family:'Italiana',serif;font-size:1.4rem;
}
.real-modal-thumb.active{border-color:var(--gold);color:var(--gold)}
.real-modal-info{padding:36px 36px 32px;overflow-y:auto;max-height:90vh}
.real-modal-info .real-modal-meta{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.real-modal-info h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.4vw,1.95rem);color:var(--ink);font-weight:400;line-height:1.2;margin:0 0 18px}
.real-modal-info .real-modal-desc{color:var(--ink-2);font-size:.95rem;line-height:1.7;margin:0 0 24px}
.real-modal-info .real-modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:24px;border-top:1px solid var(--line);margin-bottom:24px}
.real-modal-info .real-modal-stats > div{display:flex;flex-direction:column;gap:3px}
.real-modal-info .real-modal-stats .l{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.real-modal-info .real-modal-stats .n{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:1.15rem;line-height:1.2}
.real-modal-info .real-modal-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.real-modal-info .real-modal-tags span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:5px 12px;border:1px solid var(--line-strong);background:#0B0B0C}

/* ---------- (Anciens styles realisations conservés pour compatibilité) ---------- */
.realisations-grid{
  display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;
}
@media(min-width:800px){.realisations-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
.realisation{
  background:var(--bg);
  border:1px solid var(--line-strong);
  display:flex;flex-direction:column;
  transition:border-color var(--transition),transform var(--transition);
  overflow:hidden;
}
.realisation:hover{border-color:rgba(201,169,97,.5);transform:translateY(-4px)}
.realisation-media{
  aspect-ratio:4/3;width:100%;
  background:linear-gradient(135deg,var(--bg-2) 0%,rgba(201,169,97,.06) 100%);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.realisation-media img{width:100%;height:100%;object-fit:cover;display:block}
.realisation-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);
}
.realisation-placeholder .placeholder-mark{
  font-family:'Italiana',serif;font-size:4.2rem;line-height:1;color:var(--gold);opacity:.22;
}
.realisation-placeholder .placeholder-label{
  font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.realisation-body{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1}
.realisation-meta{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.realisation-meta .tag{color:var(--gold)}
.realisation-meta .dot{
  display:inline-block;width:4px;height:4px;background:var(--gold);transform:rotate(45deg);
}
.realisation-meta .loc{color:var(--muted)}
.realisation h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;line-height:1.2;color:var(--ink);margin-bottom:14px;
}
.realisation p{color:var(--ink-2);font-size:.93rem;margin-bottom:22px}
.realisation-stats{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.realisation-stats > div{display:flex;flex-direction:column;gap:4px}
.realisation-stats .n{
  font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.05rem;font-style:italic;line-height:1.2;
}
.realisation-stats .l{
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.4;
}
.realisations-note{
  margin-top:40px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  padding:22px 26px;
}
.realisations-note p{color:var(--ink-2);font-size:.92rem;margin:0;font-style:italic}

/* Variante allégée : pas de cadre, juste un losange or en tête de phrase. */
.realisations-note-soft{
  margin:32px 0 0;
  color:var(--muted);
  font-size:.85rem;line-height:1.6;font-style:italic;
  display:flex;align-items:flex-start;gap:12px;
  max-width:75ch;
}
.realisations-note-soft .losange{margin-top:9px}