/* ------------------------------------------------------------------
   MISE EN PAGE DES DOCUMENTS DU CLUB

   Charte, reglement interieur, fiche d'ouverture, mentions legales.
   Ces regles etaient dans un <style> de chartes.html ; elles en ont ete
   sorties telles quelles pour que les mentions legales en beneficient
   aussi, et surtout pour que le texte redige depuis l'espace admin soit
   habille automatiquement, sans que personne ait a ecrire de CSS.

   Servi en no-cache par nginx (expires -1) : pas de nom hache necessaire.
   ------------------------------------------------------------------ */
/* Sélecteur de document */
.doc-switch {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 2.5rem 0 0;
}

.doc-switch button {
    background: transparent;
    border: 1px solid #3a3f45;
    color: var(--text-muted);
    border-radius: 30px;
    padding: 0.7rem 1.6rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-switch button:hover {
    border-color: var(--accent-red);
    color: #fff;
}

.doc-switch button.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

.doc-wrap {
    max-width: 900px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.doc-meta {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Tableau des informations pratiques */
.doc-infos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.doc-infos-grid div {
    border-left: 3px solid var(--accent-red);
    padding: 0.2rem 0 0.2rem 0.9rem;
}

.doc-infos-grid dt {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.doc-infos-grid dd {
    margin: 0;
    color: #eee;
    font-size: 0.98rem;
}

/* Un article */
.doc-art h3 {
    font-size: 1.4rem;
    margin: 0 0 1.1rem;
    color: #fff;
}

.doc-art h3 i {
    color: var(--accent-red);
    margin-right: 10px;
}

.doc-art h4 {
    color: var(--accent-red);
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
}

.doc-art p {
    color: #eee;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 0.9rem;
}

.doc-art ul,
.doc-art ol {
    color: #eee;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 0.9rem;
    padding-left: 1.4rem;
}

.doc-art li {
    margin-bottom: 0.4rem;
}

.doc-art .doc-devise {
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--accent-red);
    border-top: 1px solid #2f3336;
    border-bottom: 1px solid #2f3336;
    padding: 0.9rem 0;
    margin-bottom: 1.2rem;
}

.doc-art .doc-devise span {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-top: 4px;
}

.doc-art .doc-note {
    background: rgba(200, 30, 30, 0.10);
    border-left: 3px solid var(--accent-red);
    padding: 0.9rem 1.1rem;
    font-size: 0.98rem;
    color: #eee;
    line-height: 1.65;
    margin: 0.9rem 0;
}

/* Illustration d'un article */
.doc-art figure {
    margin: 0 0 1.3rem;
}

.doc-art figure img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #2f3336;
}

.doc-art figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

@media print {

    .navbar,
    .footer,
    .doc-switch,
    .doc-print {
        display: none !important;
    }

    .glass-card {
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .doc-art p,
    .doc-art li,
    .doc-art .doc-note {
        color: #000 !important;
    }
}

/*  --- ci-dessous : ajouts, pas d'origine chartes.html ---  */

/* ------------------------------------------------------------------
   AJOUTS POUR LES MENTIONS LEGALES
   ------------------------------------------------------------------ */

/* Les liens dans le corps d'un document (telephone, courriel).
   Aucun document du club n'en contenait jusqu'ici : cette regle
   n'change donc rien a la charte ni au reglement. */
.doc-art a {
    color: var(--accent-red);
    text-decoration: none;
}

.doc-art a:hover,
.doc-art a:focus-visible {
    text-decoration: underline;
}

/* Une information obligatoire que le club n'a pas encore renseignee.
   Elle est VOLONTAIREMENT voyante : un numero RNA manquant sur des
   mentions legales doit se remarquer, pas se fondre dans la page.
   Elle disparait d'elle-meme des que la valeur est saisie dans l'admin. */
.doc-a-completer {
    background: rgba(255, 193, 7, 0.18);
    border: 1px dashed #ffc107;
    color: #ffe08a;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* La page des mentions legales garde son plan de titres : <h1> dans le
   bandeau, <h2> par carte, <h3> par sous-partie. Les chartes, elles,
   utilisent <h3>/<h4>. Ces regles sont donc portees par .doc-mentions
   pour ne rien changer a /chartes. */
.doc-mentions .doc-art h2 {
    font-size: 1.6rem;
    margin: 0 0 1.2rem;
    color: #fff;
}

.doc-mentions .doc-art h2 i {
    color: var(--accent-red);
    margin-right: 10px;
}

/* Un sous-titre, que le club l'ait ecrit <h3> ou <h4> : les deux sont
   traites pareil, personne ne doit avoir a retenir lequel utiliser. */
.doc-mentions .doc-art h3,
.doc-mentions .doc-art h4 {
    color: var(--accent-red);
    font-size: 1.15rem;
    margin: 1.8rem 0 0.6rem;
}

/* MISE-EN-FORME-CLUB */
/* Mise en forme posee par le club depuis le panel admin.
   « Surligne » et « Grand » n'existent pas en HTML par defaut avec une
   apparence utilisable sur fond sombre : le <mark> du navigateur est jaune vif
   avec du texte noir, illisible ici. */
.doc-art mark,
.doc-mentions mark {
    background: rgba(255, 193, 7, 0.25);
    color: #ffe9a8;
    padding: 0.05em 0.3em;
    border-radius: 3px;
}

/* Taille relative, pas absolue : le texte agrandi doit rester proportionnel
   au corps de la page, y compris sur telephone. */
.doc-art .doc-grand,
.doc-mentions .doc-grand {
    font-size: 1.25em;
    line-height: 1.45;
}

.doc-art em,
.doc-mentions em { font-style: italic; }

.doc-art u,
.doc-mentions u { text-decoration: underline; }
/* MISE-EN-FORME-CLUB:FIN */