/* ============================================================
   CDR JOB MARKET — STYLES MENTIONS LÉGALES
   Auteur       : Cœur De Roses
   Description  : Styles propres à la page mentions-legales.html.
                  Complète style.css sans le remplacer.
============================================================ */


/* ============================================================
   1. EN-TÊTE DE PAGE
============================================================ */
.page-header {
  background-color: var(--couleur-primaire);
  background-image: radial-gradient(circle at 80% 50%, rgba(201, 169, 110, 0.07) 0%, transparent 50%);
  padding: var(--espace-xl) 0;
  color: #fff;
}

.page-header__label {
  font-size: var(--taille-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--couleur-secondaire);
  margin-bottom: var(--espace-sm);
}

.page-header__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-xxl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--espace-sm);
}

.page-header__sous-titre {
  font-size: var(--taille-md);
  color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   2. NAVIGATION RAPIDE PAR ANCRES
============================================================ */
.ancres {
  background-color: var(--couleur-fond-sombre);
  border-bottom: 1px solid var(--couleur-bordure);
  padding: var(--espace-md) 0;
  position: sticky;
  top: 70px; /* Colle sous le header */
  z-index: 50;
}

.ancres__liste {
  display: flex;
  gap: var(--espace-lg);
  flex-wrap: wrap;
}

.ancres__lien {
  font-size: var(--taille-sm);
  font-weight: 700;
  color: var(--couleur-texte-doux);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-rapide),
              border-color var(--transition-rapide);
}

.ancres__lien:hover {
  color: var(--couleur-secondaire);
  border-bottom-color: var(--couleur-secondaire);
}


/* ============================================================
   3. CONTENU PRINCIPAL
============================================================ */
.main {
  padding: var(--espace-xl) 0 var(--espace-xxl);
}

.mentions__contenu {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xl);
}

/* Chaque section légale */
.mentions__section {
  scroll-margin-top: 140px; /* Décalage pour la navigation sticky */
  padding-bottom: var(--espace-xl);
  border-bottom: 1px solid var(--couleur-bordure);
}

.mentions__section:last-child {
  border-bottom: none;
}

/* Titre de section */
.mentions__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-lg);
  padding-bottom: var(--espace-sm);
  border-bottom: 2px solid var(--couleur-accent);
}

/* Sous-titre de section */
.mentions__sous-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-md);
  margin-top: var(--espace-lg);
}

/* Bloc de contenu */
.mentions__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  font-size: var(--taille-base);
  color: var(--couleur-texte);
  line-height: 1.8;
}

/* Liste à puces */
.mentions__liste {
  list-style: disc;
  padding-left: var(--espace-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.mentions__liste li {
  font-size: var(--taille-base);
  color: var(--couleur-texte);
}


/* ============================================================
   4. RESPONSIVE
============================================================ */
@media (max-width: 600px) {
  .page-header__titre { font-size: var(--taille-xl); }
  .ancres__liste { gap: var(--espace-md); }
}