/***********************************************************************************************************************
 * rules/v2/assets/legal.css
 *
 * Feuille de style des documents légaux V2. Priorité : lisibilité et impression.
 *
 * Le corps de texte est justifié, comme en V1. La césure automatique est activée pour éviter les espaces
 * démesurés entre les mots, défaut classique du texte justifié sur écran étroit. Les titres, eux, ne sont
 * jamais justifiés.
 **********************************************************************************************************************/

:root {
    --fond: #fdfbf5;
    --fond-bloc: #ffffff;
    --texte: #2b2b2b;
    --texte-doux: #5a5a5a;
    --accent: #1f689e;
    --accent-fonce: #163f5c;
    --bordure: #d8d8d8;
    --largeur: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------------------------- en-tête */

.legal-header {
    background: var(--fond-bloc);
    border-bottom: 1px solid var(--bordure);
    padding: 1rem;
}

.legal-header-logos {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.legal-header-logos img { height: 48px; width: auto; }

.legal-fil-ariane { margin-top: .75rem; font-size: .875rem; color: var(--texte-doux); }
.legal-fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; justify-content: center; }
.legal-fil-ariane li + li::before { content: "> "; color: var(--texte-doux); }
.legal-fil-ariane a { color: var(--accent); }

/* ---------------------------------------------------------------------------------------------- contenu */

.legal-container {
    max-width: var(--largeur);
    margin: 2rem auto;
    padding: 2rem;
    background: var(--fond-bloc);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.legal-container .main-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.5rem;
}

.legal-container h1 { font-size: 1.5rem; font-weight: 600; color: var(--accent); margin: 2rem 0 .75rem; }
.legal-container h2 { font-size: 1.25rem; font-weight: 600; color: var(--accent-fonce); margin: 1.5rem 0 .5rem; }
.legal-container h3 { font-size: 1.1rem; font-weight: 600; color: var(--accent-fonce); margin: 1.25rem 0 .5rem; }
.legal-container h1:first-child, .legal-container h2:first-child { margin-top: 0; }

.legal-container p, .legal-container ul, .legal-container ol {
    margin: 0 0 1rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.legal-container ul, .legal-container ol { padding-left: 1.5rem; }
.legal-container li { margin-bottom: .35rem; }

/* La justification ne s'applique jamais aux textes courts : elle y creuse des trous entre les mots.
   Les titres et les blocs centrés gardent leur propre alignement, défini plus haut. */
.legal-container .center,
.legal-container .warning,
.legal-container .centerbox,
.legal-container .main-title { text-align: center; hyphens: manual; }

.legal-container .legal-avis,
.legal-container .legal-avis p { text-align: left; hyphens: manual; }

.legal-container a { color: var(--accent); overflow-wrap: anywhere; }

.legal-container .bold { font-weight: 700; }
.legal-container .uppercase { text-transform: uppercase; }
.legal-container .center { text-align: center; }

.legal-container .box,
.legal-container .centerbox {
    border: 1px solid var(--bordure);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background: var(--fond);
}
.legal-container .centerbox { text-align: center; }

.legal-container .warning {
    border: 2px solid var(--accent-fonce);
    border-radius: 5px;
    padding: 1rem;
    margin: 1.5rem 0;
    font-weight: 700;
    text-align: center;
    background: var(--fond-bloc);
}

.legal-container img { max-width: 100%; height: auto; }
.legal-container .image-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }

/* Tailles des logos, reprises des styles en ligne de la V1 (voir normaliser_html_source dans l'extracteur). */
.legal-container .img-h100 { max-height: 100px; width: auto; max-width: 100%; }
.legal-container .img-h80 { max-height: 80px; width: auto; max-width: 100%; }

.legal-container hr {
    border: none;
    border-top: 1px solid var(--bordure);
    margin: 2rem 0;
}

/* ------------------------------------------------------------------------------- bandeaux d'information */

.legal-avis {
    border-left: 4px solid var(--accent);
    background: var(--fond);
    padding: .75rem 1rem;
    margin: 0 0 1.5rem;
    font-size: .9375rem;
}
.legal-avis--attention { border-left-color: #a15c00; }
.legal-avis--brouillon { border-left-color: #a10000; }
.legal-avis code { overflow-wrap: anywhere; font-size: .85em; }

/* -------------------------------------------------------------------------------------- listes de pages */

.legal-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.legal-carte {
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    background: var(--fond);
}
.legal-carte h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.legal-carte h2 a { text-decoration: none; }
.legal-carte p { margin: 0; color: var(--texte-doux); font-size: .9375rem; }
.legal-carte-jeux { margin: .75rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.legal-carte-jeux a {
    display: inline-block;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    padding: .2rem .75rem;
    background: var(--fond-bloc);
    text-decoration: none;
    font-size: .875rem;
}

.legal-etat { font-size: .8125rem; border-radius: 999px; padding: .1rem .6rem; border: 1px solid var(--bordure); white-space: nowrap; }
.legal-etat--encours { border-color: #1d7a3c; color: #1d7a3c; }
.legal-etat--bientot { border-color: #a15c00; color: #a15c00; }
.legal-etat--clos { color: var(--texte-doux); }

table.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9375rem; }
table.legal-table th, table.legal-table td { border-bottom: 1px solid var(--bordure); padding: .5rem .5rem; text-align: left; vertical-align: top; }
table.legal-table th { color: var(--texte-doux); font-weight: 600; }

.legal-pagination { display: flex; gap: 1rem; justify-content: center; margin: 1.5rem 0 0; }

/* ------------------------------------------------------------------------------------------ pied de page */

.legal-footer {
    max-width: var(--largeur);
    margin: 0 auto 3rem;
    padding: 0 2rem;
    color: var(--texte-doux);
    font-size: .875rem;
}
.legal-langues ul { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; padding: 0; justify-content: center; }
.legal-langues a { color: var(--accent); }
.legal-langues [aria-current="true"] { font-weight: 700; color: var(--texte); }
.legal-footer-liens { text-align: center; margin-bottom: .75rem; }
.legal-footer-liens a { color: var(--accent); }
.legal-footer-mention { text-align: center; margin: 0; }

/* -------------------------------------------------------------------------------------------- responsive */

@media (max-width: 40rem) {
    .legal-container { margin: 1rem auto; padding: 1.25rem; border-radius: 0; border-left: none; border-right: none; }
    .legal-container .main-title { font-size: 1.5rem; }
    .legal-container h1 { font-size: 1.3rem; }
    .legal-footer { padding: 0 1.25rem; }
}

/* ------------------------------------------------------------------------------------------- impression */

@media print {
    body { background: #fff; font-size: 11pt; }
    .legal-header-logos img { height: 36px; }
    .legal-fil-ariane, .legal-langues, .legal-footer-liens { display: none; }
    .legal-container { max-width: none; margin: 0; padding: 0; border: none; border-radius: 0; }
    .legal-container a { color: inherit; text-decoration: underline; }
    .legal-container h1, .legal-container h2, .legal-container h3 { break-after: avoid; }
    .legal-container p, .legal-container li { orphans: 3; widows: 3; }
}