/* =========================================================
   XPPERT — style commun (header, footer, boutons, typographie)
   Utilisé par toutes les pages du site
   ========================================================= */

:root{
  --navy: #0b1c31;
  --navy-2: #0e2138;
  --navy-soft: #16283e;
  --gold: #c9a15c;
  --gold-dark: #b48d49;
  --cream: #f6f5f2;
  --paper: #fcfbf9;
  --paper-2: #f9f7f4;
  --note: #f4f1ea;
  --tan: #cebda3;
  --sky: #eef4fb;
  --sky-line: #d9e5f1;
  --blue: #4b86b8;
  --white: #ffffff;
  --ink: #14202e;
  --muted: #5f6b7a;
  --slate: #4a5868;
  --line: #e4e1da;
  --radius: 4px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
svg{stroke-linecap:round; stroke-linejoin:round;}
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; }
h1,h2,h3,h4{ font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }

/* ===== BOUTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-gold{ background: var(--gold); color: var(--navy); }
.btn-gold:hover{ background: var(--gold-dark); }
.btn-navy{ background: var(--navy); color: var(--white); }
.btn-navy:hover{ background: var(--navy-2); }
.btn-sm{
  padding: 12px 22px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-transform: none;
}
.btn svg{ width:16px; height:16px; stroke: currentColor; fill:none; stroke-width:2; flex-shrink:0; }

/* ===== HEADER ===== */
header{
  position: sticky;
  top:0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 18px 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.logo{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.logo-word{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.logo-word span{ color: var(--gold); }
.logo-sub{
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 4px;
}
.logo-img{ height:40px; width:auto; display:block; }
.footer-brand .logo-img{ height:36px; margin-bottom:6px; }
.caret{ font-size: 10px; color: var(--muted); }
nav{
  display:flex;
  align-items:center;
  gap: 34px;
}
nav a.nav-link{
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
nav a.nav-link:hover{ color: var(--gold-dark); }
nav a.nav-link.active{ color: var(--gold-dark); border-bottom-color: var(--gold); }
.header-cta{ padding: 12px 22px; font-size: 12.5px; }
.burger{ display:none; cursor:pointer; color: var(--ink); }

/* ===== SOUS-MENU « EXPERTISES » ===== */
.nav-dropdown{ position:relative; display:flex; align-items:center; }
.nav-dropdown .caret{ display:inline-block; transition: transform .2s ease; }
.nav-dropdown:hover .caret,
.nav-dropdown:focus-within .caret{ transform: rotate(180deg); }
.nav-submenu{
  position:absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 210px;
  padding: 8px 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 28px rgba(11,28,49,0.12);
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 110;
}
/* zone invisible qui évite que le menu se ferme entre le lien et la liste */
.nav-submenu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu{ opacity:1; visibility:visible; transform:none; }
.nav-submenu a{
  display:block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible{ background: var(--paper-2); color: var(--gold-dark); outline:none; }
.nav-submenu a[aria-current="page"]{ color: var(--gold-dark); }
@media (prefers-reduced-motion: reduce){
  .nav-submenu, .nav-dropdown .caret{ transition:none; }
}

/* ===== TITRES DE SECTION (communs) ===== */
.section-eyebrow{
  display:inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.section-eyebrow::after{
  content:"";
  display:block;
  width: 34px; height: 2px;
  background: var(--gold);
  margin-top: 8px;
}
.eyebrow{
  display:inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ===== FOOTER ===== */
footer{
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 30px;
  padding-bottom: 46px;
}
.footer-brand .logo-word{ color: var(--white); }
.footer-brand .logo-sub{ color: rgba(255,255,255,0.5); display:block; margin-top:4px; }
.footer-brand p{
  margin-top: 18px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}
.footer-col h5{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul li{ margin-bottom: 12px; }
.footer-col a{ font-size: 13.5px; color: rgba(255,255,255,0.75); }
.footer-col a:hover{ color: var(--white); }
.footer-col a small{ color: rgba(255,255,255,0.45); font-size: 11px; margin-left: 4px; }
.contact-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
}
.contact-item svg{ width:16px; height:16px; stroke: var(--gold); fill:none; stroke-width:2; flex-shrink:0; margin-top:2px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 22px 0;
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a{ color: rgba(255,255,255,0.5); }
.footer-bottom a:hover{ color: var(--white); }
.footer-legal-links{ display:flex; gap: 18px; flex-wrap:wrap; }

/* ===== RESPONSIVE COMMUN (header, footer) ===== */
@media (max-width: 1100px){
  nav{ gap: 22px; }
}
@media (max-width: 980px){
  .burger{
    display:flex;
    width: 38px; height:38px;
    align-items:center; justify-content:center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:none;
  }
  .burger svg{ width:20px; height:20px; stroke: currentColor; fill:none; stroke-width:2; }
  .header-inner{ flex-wrap: wrap; }
  .header-cta{ margin-left:auto; }
  nav{
    display:none;
    order: 5;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap: 14px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--line);
  }
  header.nav-open nav{ display:flex; }
  /* sous-menu toujours déplié dans le menu mobile */
  .nav-dropdown{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav-dropdown .caret{ display:none; }
  .nav-submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; margin: 4px 0 0 2px; padding: 2px 0;
    border:0; border-left: 2px solid var(--line); border-radius:0; box-shadow:none;
  }
  .nav-submenu::before{ display:none; }
  .nav-submenu a{ padding: 6px 14px; font-weight:500; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .wrap{ padding: 0 20px; }
  .header-inner{ padding: 16px 20px; }
  .header-cta{ display:none; }
  .burger{ margin-left:auto; }
  .footer-grid{ grid-template-columns: 1fr; }
}


/* ===== PAGES LÉGALES (mentions légales, protection des données) ===== */
.legal-hero{ background: var(--navy); padding: 64px 0 48px; }
.legal-hero h1{ color: var(--white); font-size: 34px; margin-top: 14px; max-width: 720px; }
.legal-hero p{ color: rgba(255,255,255,0.72); font-size: 15px; margin-top: 12px; }
.legal-body{ padding: 56px 0 88px; }
.legal-body .wrap{ max-width: 820px; }
.legal-body h2{ font-size: 20px; margin: 40px 0 12px; }
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p, .legal-body li{ font-size: 15px; color: var(--slate); line-height: 1.7; }
.legal-body p{ margin-bottom: 12px; }
.legal-body ul{ list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.legal-body li{ margin-bottom: 6px; }
.legal-body a{ color: var(--navy); border-bottom: 1px solid var(--gold); }
.legal-body a:hover{ color: var(--gold-dark); }
.legal-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px; }
.legal-card p{ margin-bottom: 4px; }
/* texte à compléter avant la mise en ligne : bien visible pour ne pas l'oublier */
.todo{ background: #fff3c4; color: #6b4e00; padding: 0 4px; border-radius: 2px; font-weight: 600; }
@media (max-width: 620px){ .legal-hero h1{ font-size: 27px; } }