/* ===========================================================================
   Page Mentions légales — /mentions-legales

   Règles transposées de ressources/css/style_general.css
   (sélecteurs form[name="PGEMENTIONLEGALE"] -> body.page-mentions).
   =========================================================================== */
/* Écart volontaire demandé par le client : le site donne 332 px à ce hero, nous
   l'alignons sur les 650 px des autres pages intérieures. */
.page-mentions .hero-mentions {
    background: var(--c-vert-clair);
    min-height: 650px;
}

.page-mentions .hero-mentions-inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    padding: 220px 30px 0;
}

.page-mentions .TitreH1 {
    width: max-content;
    max-width: 100%;
    font-family: var(--font-titres);
    font-size: 120px;
    font-weight: 400;
    line-height: 132px;
    text-transform: uppercase;
    color: #2d2d2d;
    margin: 0;
}

/* Retrait bas relevé sur le site (139 px, pas 100) */
.page-mentions .bloc-mentions {
    padding: 100px 0 139px;
}

/* Les deux blocs se suivent verticalement, calés sur une bande de 1185 px */
.page-mentions .mentions-colonnes {
    width: 100%;
    max-width: 1185px;
    margin: 0 auto;
}

/* Sur cette page seulement, les titres de section sont à 2em et espacés de 30 px
   (règle `form[name="PGEMENTIONLEGALE"] .TitreH2` du site). */
.page-mentions .TitreH2 {
    font-size: 2em;
    line-height: normal;
    text-align: left;
    padding: 30px 0;
}

/* Cette page a ses propres titres, plus petits que les 70 px des autres : la règle
   responsive de site.css les ferait donc GROSSIR sous 640 px. On garde leur échelle,
   en la laissant simplement suivre la largeur. */
@media (max-width: 640px) {
    .page-mentions .TitreH2,
    .page-mentions .TitreH2 h1,
    .page-mentions .TitreH2 h2,
    .page-mentions .TitreH2 h3 {
        font-size: clamp(22px, 7.5vw, 32px) !important;
    }
}

.page-mentions .mentions-bloc p {
    font-family: var(--font-alt);
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #2d2d2d;
    margin: 0;
}

@media (max-width: 980px) {
    .page-mentions .hero-mentions-inner {
        padding: 100px 24px 0;
    }

    .page-mentions .TitreH1 {
        font-size: clamp(36px, 9vw, 120px);
        line-height: 110%;
    }

    .page-mentions .mentions-colonnes {
        padding: 0 24px;
    }
}