/* ============================================================
HFS – HUGUET FEDERAL SERVICES
legal.css – styles complémentaires pour les pages légales
S'applique en complément de style.css
============================================================ */

/* ============================================================
EN-TÊTE DES PAGES LÉGALES
============================================================ */
.legal-hero {
padding-top: calc(var(--header-h) + 3rem);
padding-bottom: 2.5rem;
background: var(--color-bg-light);
border-bottom: 1px solid var(--color-border-light);
}

/* Fil d'Ariane */
.breadcrumb { margin-bottom: 1.25rem; }

.breadcrumb__list {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}

.breadcrumb__item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
color: var(--color-text-muted);
}

/* Séparateur entre items */
.breadcrumb__item:not(:last-child)::after {
content: '›';
color: var(--color-border);
font-size: 0.9rem;
line-height: 1;
}

.breadcrumb__link {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.breadcrumb__link:hover { color: var(--color-primary); }

.breadcrumb__item--current {
color: var(--color-text);
font-weight: 500;
}

/* Titre et date */
.legal-hero__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
color: var(--color-text);
margin-bottom: 0.75rem;
}

.legal-hero__meta {
font-size: var(--fs-xs);
color: var(--color-text-muted);
letter-spacing: 0.06em;
margin: 0;
}

/* ============================================================
LAYOUT PAGES LÉGALES
============================================================ */
.legal-body {
padding: var(--space-xl) 0 var(--space-3xl);
}

.legal-container {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-xl);
align-items: start;
}

/* ============================================================
SOMMAIRE (TOC)
============================================================ */
.legal-toc {
position: sticky;
top: calc(var(--header-h) + 2rem);
padding: 1.25rem 1.25rem 1.25rem 1rem;
background: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
}

.legal-toc__title {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text);
margin-bottom: 0.875rem;
}

.legal-toc__list {
display: flex;
flex-direction: column;
gap: 0.1rem;
counter-reset: none;
list-style: none;
padding: 0;
}

.legal-toc__link {
display: block;
font-size: var(--fs-xs);
color: var(--color-text-muted);
text-decoration: none;
padding: 0.3rem 0.5rem;
border-radius: var(--radius-sm);
line-height: 1.4;
transition: color var(--transition), background var(--transition);
}
.legal-toc__link:hover {
color: var(--color-primary);
background: rgba(0,173,239,0.06);
}

/* ============================================================
CONTENU LÉGAL
============================================================ */
.legal-intro {
padding: 1.5rem;
background: var(--color-primary-light);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
margin-bottom: var(--space-lg);
}
.legal-intro p {
font-size: var(--fs-sm);
color: var(--color-text);
line-height: 1.75;
}

.legal-section {
padding-bottom: var(--space-lg);
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border-light);
}
.legal-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.legal-section__title {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
padding-top: 0.25rem;
/* Offset pour la navigation via sommaire avec header fixe */
scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal-content p {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 0.875rem;
}
.legal-content p:last-child { margin-bottom: 0; }

.legal-content a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--color-primary-dark); }

/* Bloc encadré */
.legal-block {
background: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
padding: 1.25rem 1.5rem;
margin: 1rem 0;
}
.legal-block p { font-size: var(--fs-sm); margin-bottom: 0; color: var(--color-text); }

.legal-block--highlight {
background: var(--color-primary-light);
border-color: rgba(0,173,239,0.2);
}
.legal-block--highlight p { color: var(--color-text); }

/* Liste légale */
.legal-list {
list-style: none;
padding: 0;
margin: 0.875rem 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.legal-list li {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.65;
padding-left: 1.25rem;
position: relative;
}
.legal-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.6em;
width: 5px;
height: 5px;
background: var(--color-primary);
border-radius: 50%;
opacity: 0.6;
}

/* Tableau définition (dl/dt/dd) */
.legal-dl {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.legal-dl__row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 0.5rem 1rem;
align-items: baseline;
}
.legal-dl dt {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text);
}
.legal-dl dd {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.6;
}
.legal-dl dd a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-dl dd a:hover { color: var(--color-primary-dark); }

/* ============================================================
RESPONSIVE — TABLETTE
============================================================ */
@media (max-width: 1024px) {
.legal-container {
grid-template-columns: 180px 1fr;
gap: var(--space-lg);
}
}

/* ============================================================
RESPONSIVE — MOBILE
============================================================ */
@media (max-width: 768px) {
.legal-container {
grid-template-columns: 1fr;
}

.legal-toc {
position: static;
order: -1; /* Sommaire au-dessus du contenu */
}

.legal-dl__row {
grid-template-columns: 1fr;
gap: 0.15rem;
}

.legal-hero {
padding-top: calc(var(--header-h) + 1.5rem);
padding-bottom: 1.5rem;
}
}