/* ============================================================
   SUPERIOR ENTERPRISE : feuille commune des pages légales
   (mentions-legales.html, confidentialite.html, cgv.html)
   Même univers que salon.html : nuit noire, étoiles blanches,
   l'or du logo comme seule couleur. Ici le ciel est statique
   (CSS pur, pas de canvas) : ce sont des pages de lecture.
   ============================================================ */

:root{
  --noir:#000;
  --noir-doux:#0a0a0c;
  --or-clair:#f0dca8;
  --or:#c9a24d;
  --or-sombre:#8a6d2f;
  --or-degrade:linear-gradient(100deg,#8a6d2f 0%,#c9a24d 45%,#f0dca8 70%,#c9a24d 100%);
  --texte:#e8e4dc;
  --texte-doux:#9a958c;
  --filet:rgba(201,162,77,.28);
  --sortie-douce:cubic-bezier(.16,1,.3,1);
}

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

html{scroll-behavior:smooth}

body{
  min-height:100dvh;
  color:var(--texte);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.7;
  background-color:var(--noir);
  /* Trois plans d'étoiles fixes + vignette, sans aucune couleur */
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 68% 9%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 34%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1px 1px at 27% 62%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 81%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 91% 72%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 6% 88%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 30%,#0a0a0c 0%,#050506 45%,#010101 100%);
  background-size:
    420px 420px,530px 530px,610px 610px,370px 370px,690px 690px,480px 480px,560px 560px,100% 100%;
  background-attachment:fixed;
  padding:0 1.25rem;
}

a{color:var(--or-clair);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
a:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}

/* ---------- En-tête ---------- */
.entete{
  max-width:46rem;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--filet);
}
.entete .logo img{display:block;height:56px;width:auto}
.retour{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texte-doux);text-decoration:none;white-space:nowrap;
}
.retour:hover{color:var(--or-clair)}

/* ---------- Corps ---------- */
main{
  max-width:46rem;margin:0 auto;
  padding:3rem 0 4rem;
  animation:entree .7s var(--sortie-douce) both;
}

.surtitre{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--texte-doux);margin-bottom:.75rem;
}

h1{
  font-size:clamp(1.5rem,5vw,2.2rem);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.25;
  background:var(--or-degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.75rem;overflow-wrap:break-word;
}

.maj{color:var(--texte-doux);font-size:.85rem;margin-bottom:2.5rem}

h2{
  font-size:.95rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);
  margin:2.75rem 0 1rem;padding-top:1.5rem;
  border-top:1px solid var(--filet);
}
h3{font-size:1rem;font-weight:600;color:var(--texte);margin:1.5rem 0 .5rem}

p,ul,dl,table{margin-bottom:1rem}
ul{padding-left:1.25rem}
li{margin-bottom:.35rem}
li::marker{color:var(--or)}
strong{color:#fff;font-weight:600}

/* Fiche d'identité : intitulé / valeur */
.fiche{
  display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:.5rem 1.5rem;
  padding:1.25rem 1.5rem;
  border:1px solid var(--filet);border-radius:4px;
  background:rgba(10,10,12,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.fiche dt{color:var(--texte-doux);font-size:.85rem;letter-spacing:.04em}
.fiche dd{color:var(--texte)}

/* Tableaux (finalités, durées) */
.tableau{overflow-x:auto;margin-bottom:1rem}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:32rem}
th,td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--filet)}
th{color:var(--or);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}

/* Sommaire */
.sommaire{
  padding:1rem 1.5rem;margin-bottom:1rem;
  border-left:2px solid var(--or-sombre);
  background:rgba(10,10,12,.5);
}
.sommaire ol{padding-left:1.25rem;margin:0}
.sommaire li{margin:.2rem 0}
.sommaire a{color:var(--texte);text-decoration:none}
.sommaire a:hover{color:var(--or-clair)}

/* Encadré */
.note{
  padding:1rem 1.25rem;margin:1.25rem 0;
  border:1px solid var(--filet);border-radius:4px;
  color:var(--texte-doux);font-size:.92rem;
}

/* ---------- Pied de page ---------- */
.pied{
  max-width:46rem;margin:0 auto;
  padding:2rem 0 2.5rem;
  border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.8rem;color:var(--texte-doux);
}
.pied nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.pied a{color:var(--texte-doux);text-decoration:none}
.pied a:hover,.pied a[aria-current="page"]{color:var(--or-clair)}

@keyframes entree{
  from{opacity:0;transform:translateY(12px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

@media (max-width:560px){
  .fiche{grid-template-columns:1fr;gap:.1rem;padding:1rem 1.1rem}
  .fiche dd{margin-bottom:.7rem}
  .entete .logo img{height:44px}
  h1{font-size:1.35rem;letter-spacing:.1em}
  h2{letter-spacing:.14em}
}

@media (prefers-reduced-motion:reduce){
  main{animation:none}
  html{scroll-behavior:auto}
}