/* =====================================================================
   global.css — SOCLE PARTAGE Harmony by Depanneo (FAMILLE « MARQUE »)
   ---------------------------------------------------------------------
   Couvre UNIQUEMENT les pages de la famille marque (fond navy .stage) :
   home, plateforme, secteurs(.html + secteur-*), prix(.html + prix-immo),
   a-propos, contact, assurances, conciergeries, justice, promoteurs, syndics.
   (18 pages au total.)

   ATTENTION : les pages SEO/lecture (ressources.html, guide-*.html, r/*.html
   — 177 pages, fond clair --paper, header sticky translucide) forment une
   AUTRE famille avec un socle different : NE PAS leur appliquer ce fichier.
   Prevoir un global-seo.css separe (voir « divergences »).

   Source de verite : home.html (version canonique « repasse V01 »).
   A inserer dans <head> AVANT le <style> specifique de chaque page,
   pour que l'inline page puisse surcharger ce socle (cascade preservee).
   Les regles header.nav !important en fin de fichier sont le « header
   canonique » verrouille : elles doivent rester apres les regles de base.
   ===================================================================== */

:root{
  --navy:#0c1a3a; --navy-2:#13203A; --cream:#F4EDE2; --cream-dim:#c3ccda;
  --acc:#F36036; --acc-2:#FF7A4A; --muted:#8492ad; --navy-acc:#A4BCFD;
  --ink:#101828; --terre:#C84A25;
  --disp:'Space Grotesk',sans-serif; --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'JetBrains Mono',monospace; --body:'Cabin',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-padding-top:110px}
body{font-family:var(--body);background:var(--navy);color:var(--cream);line-height:1.55;max-width:100vw;overflow-x:hidden}

/* ===== HERO STAGE ===== */
.stage{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(1100px 700px at 80% 8%, rgba(243,96,54,.13), transparent 58%),
    radial-gradient(800px 600px at 4% 18%, rgba(164,188,253,.08), transparent 55%),
    linear-gradient(180deg,#0a1730,#0c1a3a 60%,#13203A)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(164,188,253,.05) 1px, transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== LOGO / LOCKUP ===== */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{width:44px;height:44px;flex:none}
.wm-block{display:flex;flex-direction:column;gap:4px}
.brand .wm{font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:-.045em;color:#fff;line-height:.9}
.brand .wm .pt{color:var(--acc)}
.brand .endorse{display:flex;align-items:center;gap:7px}
.brand .endorse .byword{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:lowercase}
.brand .endorse .dep{height:13px;width:auto;display:block;opacity:.92}

/* ===== HEADER ===== */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(22px,4vw,60px);gap:24px;transition:background .28s ease,box-shadow .28s ease,padding .28s ease,border-color .28s ease}
/* le header est fixe et recouvre le haut du heros : on degage le contenu du stage sous lui */
.stage{padding-top:104px}
@media(max-width:920px){.stage{padding-top:98px}}
/* etat scrolle : barre claire fine + texte navy (lisible sur les sections claires) */
header.nav.scrolled{background:rgba(251,249,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(16,24,40,.10);box-shadow:0 8px 24px -18px rgba(16,24,40,.5);padding-top:15px!important;padding-bottom:15px!important}
header.nav.scrolled .links a{color:#39435a!important}
header.nav.scrolled .links a:hover{color:var(--navy)!important}
header.nav.scrolled .brand .wm{color:var(--navy)!important}
header.nav.scrolled .brand .endorse .byword{color:#8492ad}
header.nav.scrolled .brand .endorse .dep{filter:brightness(0);opacity:.82}
header.nav.scrolled .navdrop .caret{color:var(--navy)}
header.nav.scrolled .burger span{background:var(--navy)!important}
/* téléphone discret dans le header */
.nav-tel{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--cream);text-decoration:none;opacity:.82;white-space:nowrap;transition:color .2s,opacity .2s}
.nav-tel:hover{opacity:1;color:#fff}
header.nav.scrolled .nav-tel{color:#39435a!important;opacity:.95}
.mm-foot .mm-tel{font-family:var(--mono)!important;font-size:14px!important;color:var(--cream)!important;opacity:.8;border-bottom:0!important;padding:4px 0!important;justify-content:flex-start!important;text-decoration:none}
.links{display:flex;gap:38px;font-size:16px;font-weight:500;color:#dfe4ee}
.links a{position:relative;color:inherit;text-decoration:none;padding:4px 0;transition:color .2s}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--acc);
  border-radius:2px;transition:right .25s ease}
.links a:hover{color:#fff}.links a:hover::after{right:0}
.links a.active{color:#fff}.links a.active::after{right:0}
.right{display:flex;align-items:center;gap:26px}
.login{font-size:16px;font-weight:500;color:#dfe4ee;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.login:hover{color:#fff}
.login::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--acc)}

/* ===== BOUTONS ===== */
.btn{font-family:var(--body);font-weight:600;font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.btn-acc{background:var(--acc);color:#fff;padding:14px 26px;box-shadow:0 10px 28px -8px rgba(243,96,54,.55)}
.btn-acc:hover{transform:translateY(-1px);box-shadow:0 14px 34px -8px rgba(243,96,54,.6)}

/* ===== NAV MOBILE (burger + panneau) ===== */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;flex:none;padding:0 12px;cursor:pointer;border:1px solid rgba(164,188,253,.28);border-radius:12px;background:rgba(255,255,255,.05)}
.burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:50;background:linear-gradient(180deg,#0a1730,#0c1a3a);display:flex;flex-direction:column;justify-content:center;gap:30px;padding:96px clamp(24px,7vw,48px) 44px;transform:translateY(-101%);opacity:0;visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility .4s}
.mobile-menu.open{transform:none;opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:var(--disp);font-weight:700;font-size:clamp(28px,7vw,34px);letter-spacing:-.025em;color:#fff;text-decoration:none;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mobile-menu nav a:active{color:var(--acc-2)}
.mm-foot{display:flex;flex-direction:column;gap:18px}
.mm-foot .login{font-size:18px;color:#dfe4ee}
.mm-foot .btn-acc{justify-content:center;padding:17px;font-size:16px}

/* ===== EYEBROW + TYPO DE BASE (titres / sous-titres communs) ===== */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-acc);display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow .wave{width:50px;height:22px;flex:none}
.eyebrow .wave path{stroke-dasharray:180;stroke-dashoffset:180;animation:draw 1.4s ease .3s forwards}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1.1;letter-spacing:-.025em;color:#fff}
h1 .ex{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--acc-2);font-size:1.05em}
h1,h2,h3,h4{text-wrap:pretty}

/* ===== KEYFRAMES PARTAGEES ===== */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,96,54,.5)}70%{box-shadow:0 0 0 10px rgba(243,96,54,0)}100%{box-shadow:0 0 0 0 rgba(243,96,54,0)}}

/* ===== REVEAL AU SCROLL (commun) ===== */
.an{opacity:1;animation:none}
@media (prefers-reduced-motion:no-preference){
  .an{opacity:0;animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}
.mark .draw{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.4s ease .2s forwards}

/* ===== ORBS DE FOND (halos flottants, communs aux sections) ===== */
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.orb.a{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-8%;top:-14%;animation:floatA 19s ease-in-out infinite}
.orb.b{width:40vw;height:40vw;max-width:540px;max-height:540px;right:-10%;bottom:-16%;animation:floatB 24s ease-in-out infinite}
.orb.c{width:28vw;height:28vw;max-width:360px;max-height:360px;right:20%;top:26%;animation:floatA 31s ease-in-out infinite reverse}
@keyframes floatA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.2)}100%{transform:translate(-5%,-6%) scale(1)}}
@keyframes floatB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-10%,-8%) scale(1.24)}100%{transform:translate(6%,5%) scale(1)}}
.orbs--dark .orb.a{background:radial-gradient(circle,rgba(243,96,54,.55),transparent 68%)}
.orbs--dark .orb.b{background:radial-gradient(circle,rgba(164,188,253,.42),transparent 68%)}
.orbs--dark .orb.c{background:radial-gradient(circle,rgba(255,122,74,.4),transparent 68%)}
.orbs--light .orb.a{background:radial-gradient(circle,rgba(243,96,54,.20),transparent 68%)}
.orbs--light .orb.b{background:radial-gradient(circle,rgba(7,28,77,.14),transparent 68%)}
.orbs--light .orb.c{background:radial-gradient(circle,rgba(254,178,115,.28),transparent 68%)}
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}

/* ===== FOOTER ===== */
.foot{background:var(--cream);padding:clamp(48px,7vh,80px) 0 0;color:#43506a}
.foot-in{max-width:1340px;margin:0 auto;padding:clamp(40px,5vh,56px) clamp(22px,4vw,60px) clamp(34px,5vh,48px);display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(32px,5vw,64px);align-items:start;border-top:1px solid rgba(16,24,40,.1)}
.foot-brand{display:flex;flex-direction:column;gap:16px;max-width:300px}
.foot .brand .wm{color:var(--navy)}
.foot-tag{font-size:14.5px;line-height:1.55;color:#56627a;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.foot-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.foot-col h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:700;margin:0 0 4px}
.foot-col a{color:#43506a;text-decoration:none;font-size:15px;line-height:1.3}
.foot-col a:hover{color:var(--acc)}
.foot-bottom{border-top:1px solid rgba(16,24,40,.08)}
.foot-bottom-in{max-width:1340px;margin:0 auto;padding:18px clamp(22px,4vw,60px);display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(16,24,40,.55)}
.foot-legal{margin:0}
.foot-legal a{color:inherit;text-decoration:underline}.foot-legal a:hover{color:var(--navy)}
@media(max-width:760px){.foot-in{grid-template-columns:1fr;gap:34px}.foot-brand{max-width:none}}
@media(max-width:560px){.foot-cols{grid-template-columns:1fr;gap:26px}.foot-bottom-in{flex-direction:column;gap:8px}}

/* ===== HEADER CANONIQUE — composant unique, layout identique partout (repasse V01) =====
   Ces regles !important verrouillent le rendu du header : a garder en fin de socle. */
header.nav .brand{display:flex!important;align-items:center!important;gap:14px!important;text-decoration:none!important}
header.nav .brand .mark{width:44px!important;height:44px!important;flex:none!important}
header.nav .wm-block{display:flex!important;flex-direction:column!important;gap:4px!important;align-items:flex-start!important;text-align:left!important}
header.nav .brand .wm{font-family:var(--disp)!important;font-weight:700!important;font-size:27px!important;letter-spacing:-.045em!important;line-height:.9!important}
header.nav .brand .endorse{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important}
header.nav .brand .endorse .byword{font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:lowercase!important;font-weight:400!important}
header.nav .brand .endorse .dep{height:13px!important;width:auto!important;display:block!important}
header.nav .brand .endorse b{font-family:var(--disp);font-weight:700;font-size:13px}
header.nav .links,header.nav .nav-links{display:flex;gap:clamp(22px,2.4vw,38px);align-items:center}
header.nav .right,header.nav .nav-right{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px)}
@media(max-width:920px){header.nav .links,header.nav .nav-links,header.nav .right,header.nav .nav-right{display:none!important}header.nav .burger{display:flex!important}}
header.nav{padding:26px clamp(22px,4vw,60px)!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}

/* Lien retour B2C (Depanneo Particuliers) + densité côté droit */
.right{display:flex;align-items:center;gap:18px}
.nav-b2c{font-size:14px;font-weight:600;color:var(--cream);opacity:.85;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.nav-b2c:hover{opacity:1;color:var(--terre)}
.nav-b2c::after{content:"↗";font-size:12px;font-weight:400}
.nav-b2c-m{color:var(--terre)!important;font-weight:700;margin-bottom:6px}
header.nav.scrolled .nav-b2c{color:#39435a!important;opacity:.95}
