/* ==============================================
   ⚠️ LEGACY - SERA REMPLACÉ PAR TAILWIND
   Ce fichier contient un mélange de classes foncier
   et spécifiques portail. Il sera refactorisé lors
   de la migration Tailwind (Phase B roadmap).
   ============================================== */

.mon-container {
    background-color: white;
    min-height: 100vh;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow-x: hidden;
}
/* Centrage uniquement en mode public/auth */
.mon-container.mode-public {
    align-items: center;
}

.header-profile {
    display: inline-block;
    color: white;
    font-weight: 700;
    background-color: var(--dark);
    border-radius: 50% !important;
    justify-content: center;
    align-content: center;
    padding: 0.2rem 0.5rem !important;
    width: 40px;
    height: 40px;
    margin: 0;
}


.header-profile2 {
    display: inline-block;
    color: white;
    font-weight: 700;
    background-color: var(--color-olive);
    border-radius: 50% !important;
    justify-content: center;
    align-content: center;
    padding: 0.2rem 0.5rem !important;
    margin: 0;
}



/* content  */
.content {
    /* background-color: red; */
    max-width: 100rem;
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    align-self: center;
    align-items: center;
    padding: 2rem 0;
}


/* gpage-container */
.gpage-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    padding: 0;
    margin: 0;
}
/* En mode public : centré et limité en largeur */
.mode-public .gpage-container {
    max-width: var(--largeur-max);
    align-self: center;
}
/* Shadow englobant bandeau + corps + footer (mode public) */
.mode-public .gpage-container {
    box-shadow: 0rem 0.5rem 1rem #333B66;
}

/* gpage-header */
.gpage-header {
    display: flex;
    flex-direction: column;
}

.gpage-bandeau {
    display: block;
    font-size: 2.5rem;
    letter-spacing: 0.2rem;
    padding: 2rem 3rem;
    font-family: 'Advent Pro', sans-serif;
    background: white;
}

a.gpage-bandeau:hover {
    text-decoration: none;
    color: var(--text);
}

.gpage-bandeau img {
    margin: 0 1rem;
}

.gpage-bandeau-tagline {
    min-height: var(--gpage-degnoir-h);
    color: var(--gpage-white);
    background: var(--gpage-degnoir);
    padding: 0rem 1rem;
}

div.gpage-bandeau-tagline {
    padding-bottom: 0;
}


/* gpage-main */
.gpage-main {
    display: flex;
    flex-direction: row;
    background-color: white;
    margin: 0 auto 1.5rem auto;
    padding: 0;
    max-width: 1024px;
    width: 100%;
}

/* gpage-footer */
.gpage-footer {
    width: 100%;
    /* Sticky footer : `.gpage-container` est une colonne flex (flex:1) qui remplit
       le viewport (mon-container = min-height:100vh) ; margin-top:auto absorbe
       l'espace libre et colle le pied en bas quand le contenu est court, sans
       toucher à la hauteur du contenu/sidebar (cf. .content{flex:1} côté auth). */
    margin-top: auto;
}
.gpage-copyright {
    background: var(--dark);   /* #2C3E50 — footer sombre type ram2022 */
    color: var(--gris-leger);
    text-align: center;
    font-size: 1.6rem;   /* = 16px (root 62.5%) */
    padding: 1rem;
}

.gpage-copyright a {
    color: #FFFFFF;
    text-decoration: underline;
}

.gpage-mentions {
    padding: 4rem;
    background-color: var(--gris-clair);
    text-align: center;
}

.gpage-mentions p {
    font-size: 1.4rem;
}


/* ==============================================
   PAGES LÉGALES (mentions-legales, rgpd, cgu-cgv)
   Mise en forme reprise de ramehpad : une carte blanche posée sur un
   fond gris. Le gabarit HTML y est déjà identique au nôtre, mais son
   `.block` est une CARTE alors que le refactor gPage en a fait un
   utilitaire `display:block` — d'où cette classe dédiée : redéfinir
   `.block` casserait l'utilitaire partout ailleurs.
   Le gris et le fond de carte sont écrits en dur (et non via
   `--background-light`, qui vaut `#FFFFFF` ici) pour rester cantonnés
   à ces 3 pages : `body.page-legale` n'est posé que par elles.
   ============================================== */
body.page-legale {
    background-color: #ecf0f1;   /* = --background-light de ram2022 */
}

/* Ces pages ouvrent sur `<div class="container">`, mais ce `.container`-là est
   celui de BOOTSTRAP (display:block), pas le `.container` MAISON de ram2022.
   D'où deux défauts que ces 3 lignes referment, en lui rendant le comportement
   attendu par le gabarit :
     · `.content` se centre par `align-self`, inopérant hors parent flex → la
       carte se collait à gauche, décalée sous le bandeau ;
     · sans hauteur minimale, une page courte (rgpd) laissait le fond gris
       s'arrêter au pied de page, le reste du viewport restant blanc.
   `.content{flex:1}` colle du même coup le pied en bas. */
body.page-legale .container {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    /* Le `.container` de Bootstrap borne la page à 1140px : bandeau et pied de
       page s'arrêtaient en cours de route, deux bandes grises sur les côtés.
       Le container de ram2022 n'a pas de largeur maximale — c'est `.content`
       (100rem, centré) qui cadre le texte, pendant que bandeau et pied filent
       d'un bord à l'autre. On lui rend ce comportement. */
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Le padding de Bootstrap tombant avec lui, la carte collerait aux bords sous
   1000px : on redonne la gouttière ici. */
body.page-legale .content {
    padding-inline: 1.5rem;
}

.bloc-page {
    width: 100%;
    background-color: white;
    border: var(--border);
    border-radius: 3px;
    box-shadow: var(--box-shadow);
}