#MenuConnexionOF a {
    font-size: 0.6rem;
}

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.merriweather-<uniquifier> {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

html,
body,
#BoxArticleText article,
#ContenairHomePageOF article,
#MenuConnexionOF a {
    font-family: 'Lora';
}

#BoxArticleText article {
    color: #222222;
    font-size: 14px;
}

#CommentArticle {
    font-size: 12px;
    background-color: beige;
}

#BoxArticleText iframe {
    width: 818px;
    height: 450px;
}

p {
    margin-bottom: 10px;
}

#BoxArticleText article h2 {
    font-size: 18px;
    color: rgb(32, 124, 124);
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 25px;
}

li {
    padding: 5px;
}

#ContenairHomePageClassic {
    display: flex;
    flex-direction: row;
    flex-wrap: unset;
    width: 900px;
}

p li,
article li a:link {
    text-decoration: underline;
}

.ArticleTitleFrontPage {
    font-size: 15px;
    text-transform: uppercase;
}

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    width: 50%;
}

td {
    border-width: 1px;
    border-style: solid;
    border-color: silver;
    width: 50%;
    padding: 10px;
}

#HomePageOF {
    justify-content: flex-end;
    font-size: 11px;
    height: 87px;
    background-color: white;
    margin-bottom: 10px;
}

#OpenProfilMenu {
    top: 20px;
}

#ContenairHomePageOF p {
    padding: 0px;
    margin-bottom: 5px;
}

#ContenairHomePageOF #Category {
    color: #333333;
    /* text-transform: lowercase; */
    display: block;
}

blockquote {
    margin-left: 0;
    font-size: 14px;
}

#DateArticle {
    display: none;
}

.ViewCount2 {
    display: inline-block;
    /* Permet au span de respecter la hauteur et la largeur définies */
    height: 15px;
    /* Hauteur du cercle */
    width: 15px;
    /* Largeur du cercle - doit être identique à la hauteur pour un cercle parfait */
    border-radius: 50%;
    /* Arrondit les bords pour créer un cercle */
    text-align: center;
    /* Centre le texte horizontalement */
    line-height: 14px;
    /* Centre le texte verticalement */
    background-color: #777white777;
    /* Couleur de fond du cercle */
    font-weight: normal;
    color: #555555;
    /* Couleur du texte */
    border: 1px solid silver;
}

.search-box {
    position: relative;
    width: 300px;
    height: 27px;
}

.search-input {
    font-size: 12px;
    line-height: unset;
}

.search-button {}

/* Style optionnel pour enlever les styles par défaut du bouton */
.search-button:focus {
    outline: none;
}

.search-button:hover {
    color: #333;
}

input {
    background-color: #ffffee;
}

textarea {
    background-color: #ffffee;
}

#HeaderBoxArticle #BarreMenu {
    position: absolute;
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    font-size: 11px;
}

#BoxArticleText table {
    width: 600px;
    table-layout: fixed;
    /* Contraint la table à rester dans 100% */
    border-collapse: collapse;
}

#BoxArticleText th,
#BoxArticleText td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}

#BoxArticleText th {
    background-color: #f2f2f2;
}

a.LinkStandard,
legend,
#MenuConnexionOF a,
#Category,
#MenuConnexionOFCommand,
#BoxListeComment {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1 {
    color: IndianRed;
}

#DisplaySummaryFP {
    font-style: italic;
    font-weight: normal;
}

#ContainerConnexion {
    margin-top: 50px;
}

/* Conteneur recommandé autour de la table (optionnel mais propre) */
.guest-table-wrap {
    max-width: 900px;
    margin: 24px auto;
    padding: 0 12px;
}

/* Table */
.guest-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
    /* pour que le radius marche avec thead */
    table-layout: fixed;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
}

/* En-tête */
.guest-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 14px;
    background: #f6f7f9;
    border-bottom: 1px solid #e6e6e6;
    font-size: 12px;
    /* pour être sûr que le thead ne repasse pas à 14 */
}

/* Cellules */
.guest-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 12px;
}

/* Dernière ligne sans bordure */
.guest-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Hover léger */
.guest-table tbody tr:hover {
    background: #fafafa;
}

/* Colonnes : pseudo / about / select */
/* Colonne Pseudo : autoriser le retour à la ligne */
.guest-table th:nth-child(1),
.guest-table td:nth-child(1) {
    width: 22%;
    white-space: normal;
    /* permet plusieurs lignes */
    overflow: visible;
    /* pas de masquage */
    text-overflow: unset;
    /* pas de ... */
    word-break: break-word;
    /* coupe si mot/pseudo trop long */
    overflow-wrap: anywhere;
    /* coupe même sans espaces */
}


.guest-table th:nth-child(2),
.guest-table td:nth-child(2) {
    width: 58%;
}

.guest-table th:nth-child(3),
.guest-table td:nth-child(3) {
    width: 20%;
    text-align: center;
}

/* Radios : clic plus confortable */
.guest-table input[type="radio"] {
    transform: scale(1.1);
    cursor: pointer;
}

/* Label cliquable */
.guest-table label {
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Responsive : sur petit écran, on laisse scroller horizontalement */
@media (max-width: 720px) {
    .guest-table-wrap {
        overflow-x: auto;
    }

    .guest-table {
        min-width: 680px;
        /* évite que tout s'écrase */
    }
}

.guest-toggle-btn {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    background: #f6f7f9;
    border-radius: 10px;
    cursor: pointer;
    margin: 12px auto;
    display: inline-block;
}

.guest-toggle-btn:hover {
    background: #efeff2;
}