/* ==========================================================================
   PAGE CHROME — composants partagés entre l'accueil et les pages services
   --------------------------------------------------------------------------
   Extrait à l'identique de index.html (nav, menu mobile, footer, WhatsApp,
   curseur, focus, réduction des animations) pour garantir une parité
   visuelle totale sans dupliquer ni risquer de modifier l'accueil.
   ========================================================================== */

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

:root {
  --noir:   #111820;
  --noir2:  #18202C;
  --noir3:  #1F2938;
  --anthracite: #26334A;
  --beton:  #34404F;
  --pierre-sombre: #4A5568;
  --champagne: #C8D92E;
  --champagne-dim: rgba(200,217,46,0.10);
  --champagne-border: rgba(200,217,46,0.22);
  --blanc: #F4F2ED;
  --creme: #E8E4DB;
  --pierre: #6B7A8D;
  --pierre-light: #A2ADBA;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
}

html { scroll-behavior: smooth; background: var(--noir); }
body { font-family: 'Source Sans 3', sans-serif; background: var(--noir); color: var(--blanc); overflow-x: hidden; cursor: none; }
@media (max-width: 900px) { body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } }

.cursor-dot { position: fixed; width: 6px; height: 6px; background: var(--champagne); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
.cursor-ring { position: fixed; width: 32px; height: 32px; border: 1px solid var(--champagne-border); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .25s, height .25s, border-color .25s, background .25s; }
.cursor-ring.hover { width: 52px; height: 52px; background: var(--champagne-dim); border-color: var(--champagne); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 5%; background: rgba(17,24,32,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--champagne-border); }
.nav-logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.nav-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .14em; color: var(--blanc); }
.nav-logo-text span { color: var(--champagne); }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--blanc); text-decoration: none; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--champagne); transition: width .3s; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { border: 1px solid var(--champagne) !important; color: var(--champagne) !important; padding: .5rem 1.3rem; border-radius: var(--r-sm) !important; transition: background .25s, color .25s !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--champagne) !important; color: var(--noir) !important; }

/* MENU MOBILE */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 28px; background: none; border: none; cursor: pointer; padding: 0; z-index: 101; }
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--blanc); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-overlay { position: fixed; inset: 0; z-index: 9400; background: rgba(10,13,20,.7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.mobile-menu-overlay.show { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 360px); z-index: 9500; background: var(--noir2); border-left: 1px solid var(--champagne-border); box-shadow: -20px 0 60px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; padding: 6rem 2.2rem 2.5rem; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: var(--blanc); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-menu-links { list-style: none; display: flex; flex-direction: column; gap: 1.65rem; margin-bottom: auto; }
.mobile-menu-links a { font-family: 'Fraunces', serif; font-size: 1.55rem; font-weight: 400; color: var(--blanc); text-decoration: none; transition: color .25s; }
.mobile-menu-links a:hover, .mobile-menu-links a:focus-visible { color: var(--champagne); }
.mobile-menu-cta { margin-top: 2.5rem; text-align: center; background: var(--champagne); color: var(--noir); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 1rem; border-radius: var(--r-sm); text-decoration: none; }

/* UTILS partagés */
section { padding: 7.5rem 5%; position: relative; }
.fade-up { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: none; }
.eyebrow { font-family: 'Bebas Neue', sans-serif; font-size: .74rem; letter-spacing: .3em; color: var(--champagne); margin-bottom: .85rem; display: flex; align-items: center; gap: .8rem; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--champagne); }
.sec-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 1.25rem; }
.sec-title em { font-style: italic; font-weight: 300; color: var(--champagne); }
.sec-sub { font-size: .95rem; font-weight: 300; color: var(--pierre-light); line-height: 1.78; max-width: 640px; }
.btn-y { background: var(--champagne); color: var(--noir); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 1rem 2.4rem; text-decoration: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: .5rem; transition: transform .3s, box-shadow .3s; }
.btn-y:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,217,46,.3); }
.btn-ghost { color: var(--pierre-light); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .25s; }
.btn-ghost:hover { color: var(--blanc); }

/* PAGE HERO (bandeau compact pour pages internes) */
.page-hero { padding: 9rem 5% 4rem; background: var(--noir2); border-bottom: 1px solid var(--champagne-border); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .72rem; letter-spacing: .04em; color: var(--pierre); margin-bottom: 1.75rem; }
.breadcrumb a { color: var(--pierre-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--champagne); }
.breadcrumb span { color: var(--beton); }
.page-hero h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 1.25rem; max-width: 820px; }
.page-hero h1 em { font-style: italic; font-weight: 300; color: var(--champagne); }
.page-hero .sec-sub { max-width: 640px; }

/* Contenu de page (services) */
.page-body { max-width: 760px; }
.page-body p { font-size: .95rem; font-weight: 300; color: var(--pierre-light); line-height: 1.85; margin-bottom: 1.3rem; }
.page-body h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--blanc); margin: 2.5rem 0 1.1rem; }
.page-body h2 em { font-style: italic; color: var(--champagne); }
.page-body ul { margin: 0 0 1.5rem 0; list-style: none; }
.page-body li { font-size: .92rem; font-weight: 300; color: var(--pierre-light); line-height: 1.7; padding-left: 1.4rem; position: relative; margin-bottom: .6rem; }
.page-body li::before { content: ''; position: absolute; left: 0; top: .55rem; width: 7px; height: 1px; background: var(--champagne); }
.page-body a { color: var(--champagne); text-decoration: none; border-bottom: 1px solid var(--champagne-border); }
.page-body a:hover { border-bottom-color: var(--champagne); }

/* Bandeau services liés (maillage interne) */
.related-services { background: var(--noir3); border-top: 1px solid var(--champagne-border); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.related-card { background: var(--noir2); border: 1px solid var(--champagne-border); border-radius: var(--r-lg); padding: 1.75rem; text-decoration: none; display: block; transition: transform .3s, background .3s; }
.related-card:hover { transform: translateY(-4px); background: var(--champagne-dim); }
.related-card-title { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--blanc); margin-bottom: .4rem; }
.related-card:hover .related-card-title { color: var(--champagne); }
.related-card-sub { font-size: .8rem; color: var(--pierre); }

/* FOOTER */
footer { background: var(--noir2); padding: 2.5rem 5% 7.5rem; border-top: 1px solid var(--champagne-border); }
.footer-main { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }
.footer-logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.footer-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .14em; color: var(--blanc); }
.footer-logo-text span { color: var(--champagne); }
.footer-nav { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; }
.footer-nav a { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pierre); text-decoration: none; transition: color .25s; }
.footer-nav a:hover { color: var(--champagne); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer-copy { font-size: .72rem; color: var(--pierre); font-weight: 300; }
.footer-legal-links { display: flex; gap: 1.4rem; }
.footer-legal-links a { font-size: .7rem; color: var(--pierre); text-decoration: none; transition: color .25s; }
.footer-legal-links a:hover { color: var(--champagne); }
.footer-credit { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; gap: .65rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer-credit-text { font-size: .68rem; color: var(--pierre); letter-spacing: .04em; font-weight: 300; }
.footer-credit-link { display: inline-flex; align-items: center; opacity: .82; transition: opacity .3s, transform .3s; line-height: 0; }
.footer-credit-link:hover { opacity: 1; transform: translateY(-1px); }
.footer-credit-logo { height: 26px; width: auto; display: block; }

/* BACK TO TOP */
.back-to-top { position: fixed; bottom: 1.75rem; right: 17rem; z-index: 200; width: 44px; height: 44px; border-radius: 50%; background: var(--champagne); color: var(--noir); border: none; cursor: none; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s, box-shadow .25s, right .25s; pointer-events: none; font-weight: 700; }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { box-shadow: 0 4px 18px rgba(200,217,46,.4); }

/* WHATSAPP FLOTTANT */
.whatsapp-float { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 250; display: flex; align-items: center; gap: .6rem; background: var(--noir2); border: 1px solid var(--champagne-border); color: var(--blanc); text-decoration: none; padding: .85rem 1.3rem; border-radius: 100px; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .3s, box-shadow .3s, border-color .3s, background .3s; cursor: none; }
.whatsapp-float:hover { transform: translateY(-3px); border-color: var(--champagne); background: var(--noir3); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 4px var(--champagne-dim); }
.whatsapp-float svg { width: 21px; height: 21px; color: var(--champagne); flex-shrink: 0; }
.whatsapp-float .wa-label-full { font-size: .82rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.whatsapp-float .wa-label-short { display: none; font-size: .82rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }

.wa-bubble { position: fixed; bottom: 5.85rem; right: 1.75rem; z-index: 240; max-width: 230px; background: var(--noir2); border: 1px solid var(--champagne-border); border-radius: var(--r-md); padding: .9rem 1.6rem .9rem 1.1rem; box-shadow: 0 10px 28px rgba(0,0,0,.4); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .4s; pointer-events: none; }
.wa-bubble.show { opacity: 1; transform: none; pointer-events: auto; }
.wa-bubble p { font-size: .82rem; color: var(--blanc); line-height: 1.5; font-weight: 300; }
.wa-bubble-close { position: absolute; top: .45rem; right: .55rem; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--pierre-light); font-size: .75rem; cursor: none; padding: 0; transition: color .2s; }
.wa-bubble-close:hover { color: var(--champagne); }

@media (max-width: 600px) {
  .whatsapp-float { right: 1rem; bottom: 1rem; padding: .8rem 1.05rem; }
  .whatsapp-float .wa-label-full { display: none; }
  .whatsapp-float .wa-label-short { display: inline; }
  .back-to-top { right: 1rem; bottom: 5rem; }
  .wa-bubble { right: 1rem; bottom: 8.75rem; max-width: calc(100vw - 2rem); }
  footer { padding-bottom: 14.5rem; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  section { padding: 5rem 5%; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .footer-main { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

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