/* ==========================================================================
   CADRE DES PAGES INTÉRIEURES (.ct-page du site 2023, styles_site.css)
   Partagé par presentation_mycda, conditions_participation,
   etre_actionnaire_cda, faq, documentation, mentions_legales et le plan du
   site : les blocs TinyMCE y retrouvent la typographie de 2023 (titres,
   paragraphes, listes à puce jaune, liens soulignés, tableaux).
   L'image de la puce arrive par --image-puce, posée par le layout avec
   l'adresse S3 du millésime en service.
   ========================================================================== */

/* ----- Largeurs et séparateurs communs ----------------------------------- */
.ct-1100 {
    width: min(1100px, 100%);
    margin: auto;
}

.sep {
    margin: 6rem 0;
}

/* Image en ligne comme en 2023 : la ligne qui la porte ajoute ses 6px sous le
   bandeau, que le contenu suivant respectait. */
.sep img {
    width: 100%;
}

/* « My » manuscrit des titres (h1 em de l'accueil, par exemple). */
h1 em,
h2 em {
    color: var(--color-primary-yellow);
    font-family: "Aveline", Arial, sans-serif;
    font-size: 10rem;
}

/* ----- Cadre blanc ------------------------------------------------------- */
.ct-page {
    position: relative;
    width: min(1300px, 100%);
    margin: 10rem auto 0;
    padding: 10.6rem 0;
    background-color: var(--color-primary-white);
}

.ct-page .padding-ct-page {
    padding: 0 9rem;
}

.ct-page p {
    margin-top: 2.6rem;
    color: var(--color-text-page);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 1.6rem;
}

/* styles.css du legacy : 15px entre les paragraphes suivants d'un même parent,
   le premier garde les 2,6rem ci-dessus. */
.ct-page p:not(:first-of-type) {
    margin-top: 1.5rem;
}

.ct-page h1 {
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 4rem;
}

.ct-page h2 {
    width: fit-content;
    margin-top: 4.4rem;
    padding: 0.5rem 8rem 0.5rem 0.5rem;
    background-color: var(--color-primary-yellow);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
}

.ct-page h3 {
    margin-top: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 5px dashed var(--color-primary-yellow);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.ct-page li {
    margin-top: 0.6rem;
    margin-left: 2.5rem;
    color: var(--color-text-page);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 1.6rem;
    list-style: none;
}

.ct-page li::before {
    content: var(--image-puce, none);
    display: inline-block;
    margin-right: 0.5rem;
}

/* Liens des blocs : trait bleu qui monte en fond au survol. */
.ct-page p a,
.ct-page li a {
    position: relative;
    z-index: 10;
    display: inline-block;
    color: var(--color-primary-blue);
}

.ct-page p a::after,
.ct-page li a::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2rem;
    background-color: var(--color-primary-blue);
    transition: all 0.3s ease;
}

.ct-page p a:hover::after,
.ct-page li a:hover::after {
    height: 100%;
}

.ct-page p a:hover,
.ct-page li a:hover {
    color: var(--color-primary-white);
}

/* Focus sur le cadre blanc : le contour jaune commun n'y contraste pas assez
   (1,88:1), il passe au bleu. Le bouton du compte-titres, à cheval sur le fond
   bleu, garde le jaune et prend en plus la forme carrée du survol. */
.ct-page a:not(.acces-compte):focus-visible,
.ct-page button:focus-visible {
    outline-color: var(--color-primary-blue);
}

.ct-page table {
    width: 100%;
    margin-top: 2.6rem;
    border: 0;
    border-bottom: 1px solid var(--color-text-page);
}

.ct-page table th {
    padding: 2rem 0.3rem;
    border: 0;
    border-top: 1px solid var(--color-text-page);
    border-bottom: 1px solid var(--color-text-page);
    background-color: #F0F0F0;
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.6rem;
    text-align: left;
}

.ct-page table td {
    padding: 2rem 0;
    border: 0;
}

.ct-page table td li {
    margin-top: 2rem;
}

/* ----- Bouton « Accéder à mon compte-titres » (partials/btn_acces_compte) - */
.ct-page .acces-compte {
    position: absolute;
    top: -3rem;
    right: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 420px;
    padding: 1.3rem;
    border-radius: 10rem;
    background-color: var(--color-primary-yellow);
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.6rem;
    transition: 0.3s ease;
}

.ct-page .acces-compte:hover,
.ct-page .acces-compte:focus-visible {
    border-radius: 0;
}

/* ----- Plan du site ------------------------------------------------------ */
.planSite {
    margin-top: 2.6rem;
}

/* ----- Adaptations (styles_responsive.css du legacy) --------------------- */
@media screen and (max-width: 700px) {
    .ct-page {
        padding: 5rem 2.5rem;
    }

    .ct-page .padding-ct-page {
        padding: 0;
    }

    .ct-page .acces-compte {
        right: initial;
    }
}

@media screen and (max-width: 480px) {
    .ct-page .acces-compte {
        width: 90%;
    }

    .ct-page h2 {
        padding-right: 0.3rem;
    }
}

/* Petits téléphones (320px, RGAA 10.11) : en 2023, un mot de titre plus large
   que le cadre (« DOCUMENTATION », « PRÄSENTATION ») débordait et faisait
   défiler la page de côté. Le titre suit ici la largeur de l'écran, et un mot
   encore trop long est coupé, avec césure en allemand et en néerlandais pour
   les mots d'au moins 10 lettres. Au-dessus de 380px, les titres gardent la
   taille et la mise en ligne de 2023. */
@media screen and (max-width: 380px) {
    .ct-page h1 {
        font-size: min(4rem, 9vw);
        overflow-wrap: anywhere;
    }

    .ct-page h1:lang(de),
    .ct-page h1:lang(nl) {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 5 5;
    }
}