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

:root{
  --noir: #0a2f47;
  --noir-doux: #0f3a59;
  --or: #c68a3c;
  --or-clair: #f0c987;
  --blanc-nacre: #f8f5ef;
  --gris-texte: #c8cdd2;
}

html{scroll-behavior:smooth;}

body{
  background:var(--noir);
  color:var(--blanc-nacre);
  font-family:'Raleway', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Playfair Display', serif;
  font-weight:400;
  letter-spacing:0.02em;
}

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

.conteneur{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}

.ornement{
  color:var(--or);
  letter-spacing:0.3em;
  font-size:0.75rem;
  text-transform:uppercase;
}

/* ===== HEADER (identique à l'accueil) =====
   Ciblage par #entete (et non l'élément header) : la page a un second
   <header class="page-hero"> qui ne doit pas hériter de ces règles. */
#entete{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:14px 0;
  border-bottom:1px solid rgba(201,169,97,0.35);
}
/* Le flou est porté par ::before (et non sur #entete) pour ne pas transformer
   #entete en containing block des descendants position:fixed (menu mobile) */
#entete::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,47,71,0.92);
  backdrop-filter:blur(6px);
  pointer-events:none;
}
#entete .conteneur{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-badge{display:block;flex-shrink:0;}
.logo-badge svg{display:block;width:100%;height:100%;}
.logo-badge--header{width:60px;height:60px;}
.logo-badge--footer{width:180px;height:180px;margin:0 auto 30px;}

nav.menu-principal{display:flex;gap:44px;}
nav.menu-principal a{
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gris-texte);
  position:relative;
  padding-bottom:6px;
  transition:color 0.4s ease;
}
nav.menu-principal a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--or);
  transition:width 0.4s ease;
}
nav.menu-principal a:hover{color:var(--or-clair);}
nav.menu-principal a:hover::after{width:100%;}

.btn-ghost{
  border:1px solid var(--or);
  color:var(--or-clair);
  padding:12px 28px;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:all 0.5s ease;
  white-space:nowrap;
}
.btn-ghost:hover{background:var(--or);color:var(--noir);}

.btn-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.btn-burger span{width:24px;height:1px;background:var(--or-clair);display:block;}
.btn-fermer{
  display:none;
  position:absolute;
  top:26px;right:24px;
  width:40px;height:40px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.btn-fermer span{
  position:absolute;
  top:50%;left:50%;
  width:22px;height:1px;
  background:var(--or-clair);
  transition:background 0.3s ease;
}
.btn-fermer span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.btn-fermer span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.btn-fermer:hover span{background:var(--or);}

/* ===== EN-TÊTE DE PAGE ===== */
.page-hero{
  padding:190px 0 70px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.12), transparent 60%),
    linear-gradient(180deg, #0a2f47 0%, #123a5a 100%);
  text-align:center;
  border-bottom:1px solid rgba(201,169,97,0.18);
}
.page-hero h1{
  font-size:clamp(2rem, 4vw, 2.9rem);
  color:var(--blanc-nacre);
  margin-top:18px;
}
.page-hero .breadcrumb{
  margin-top:20px;
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--gris-texte);
}
.page-hero .breadcrumb a{color:var(--or-clair);}
.page-hero .breadcrumb a:hover{text-decoration:underline;}

/* ===== CONTENU LÉGAL ===== */
.legal-content{padding:80px 0 120px;}
.legal-content .conteneur{max-width:860px;}
.legal-content h2{
  font-size:1.5rem;
  color:var(--or-clair);
  margin:44px 0 16px;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{margin-bottom:16px;color:var(--gris-texte);}
.legal-content ul{margin:0 0 16px 22px;color:var(--gris-texte);}
.legal-content li{margin-bottom:10px;}
.legal-content strong{color:var(--blanc-nacre);font-weight:600;}
.legal-content a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px;}
.legal-content a:hover{color:var(--or);}
.legal-updated{
  display:inline-block;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--gris-texte);
  opacity:0.7;
  margin-bottom:8px;
}
.legal-placeholder{
  background:var(--or);
  color:var(--noir);
  padding:1px 8px;
  font-weight:600;
  font-size:0.85em;
  letter-spacing:0.02em;
}

/* ===== FOOTER (identique à l'accueil) ===== */
footer{
  background:var(--noir);
  border-top:1px solid rgba(201,169,97,0.18);
  padding:80px 0 40px;
  text-align:center;
}
footer .infos-footer{
  margin-top:22px;
  color:var(--gris-texte);
  font-size:0.9rem;
  line-height:2;
}
.separateur-or{
  width:70px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--or), transparent);
  margin:28px auto;
}
footer .liens-legaux{
  margin-top:22px;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--gris-texte);
}
footer .liens-legaux a{transition:color 0.3s ease;}
footer .liens-legaux a:hover{color:var(--or-clair);}
footer .liens-legaux a[aria-current="page"]{color:var(--or-clair);font-weight:600;}
footer .liens-legaux span{margin:0 10px;color:rgba(201,169,97,0.4);}
footer .copyright{
  margin-top:34px;
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:#6b6b6b;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  nav.menu-principal{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(10,47,71,0.98);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:38px;
    transform:translateY(-100%);
    transition:transform 0.5s ease;
    z-index:999;
  }
  nav.menu-principal.ouvert{transform:translateY(0);}
  nav.menu-principal a{font-size:1rem;}
  .btn-burger{display:flex;}
  .btn-fermer{display:block;}
  #entete .btn-ghost{display:none;}
  .conteneur{padding:0 26px;}
  .page-hero{padding:150px 0 48px;}
  .legal-content{padding:56px 0 80px;}
}