:root {
    --gris_tres_clair: #FAFAFA;
    --gris_clair: #EEEEEE;
    --gris_moyen: #DDDDDD;
    --gris_fonce: #CCCCCC;
    --gris_sombre: #999999;
    --gris: #666666;
    --rouge_moyen: #E90000;
    --vert_clair: #628010;
    --vert_leger: #CCCC00;
    --vert_vif: #009900;
    --bleu_tag: #6161C2;
    --bleu_roi: #0000CC;
    --bleu_fonce: #2B2B99;
    --jaune: #f0c134;
    --jaune_fluo: #FFCE0A;
    --marron: #996633;
    --kaki: #858331;

    --fontes_tag: 'lucida grande', tahoma, verdana, arial, sans-serif;
}

/* ------------------------- couleurs -----------------------*/
.blanc {
    color: white;
}

.bleu {
    color: blue;
}

.gris {
    color: var(--gris);
}

.marron {
    color: var(--marron);
}

.orange {
    color: darkorange;
}

.rouge {
    color: red;
}

.vert {
    color: var(--vert_vif);
}

.violet {
    color: indigo;
}

/* ------------------------- page -----------------------*/
html, body {
    height: 98%;
    margin: 8px 7px 4px 7px;
    background-image: url(/images/fond.gif);
}

/* ------------------------- liens -----------------------*/
a {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: var(--bleu_roi);
}

a:hover {
    color: black;
    background-color: var(--jaune);
    text-decoration: none;
}

/* ------------------------- titres -----------------------*/
h1 {
    margin: 0.5em;
}

/* -------------------- paragraphes -----------------------*/
p {
    margin: 0.5em;
}

hr {
    height: 1px;
    padding: 0;
    color: var(--gris_sombre);
    background-color: var(--gris_sombre);
    border: 0;
}

img.mid {
    vertical-align: middle;
}

input {
    font-size: 10px;
}

input.mid {
    vertical-align: middle;
}

pre {
    font-family: var(--fontes_tag);
    font-size: 11px;
    padding-left: 15px;
}

select {
    font-size: 10px;
}

summary::-webkit-details-marker {
    display: none
}

summary:after {
    float: left;
    content: url(/images/icon_add.gif);
    margin: 0 5px 0 10px;
}

details[open] summary:after {
    content: url(/images/icon_remove.gif);
}

textarea {
    font-family: var(--fontes_tag);
    font-size: 11px;
}

.adresse {
    color: var(--marron);
    font-style: italic;
    font-weight: bold;
}

.aide {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: white;
    text-decoration: none;
    background-color: var(--bleu_tag);
    height: 20px;
    padding: 4px 0 4px 24px;
}

.bandeau, .bandeau a:link, .bandeau a:active {
    font-family: var(--fontes_tag);
    font-size: 12px;
    text-decoration: none;
}

.bord_droit {
    border-right: thin dotted var(--gris_sombre);
}

.bord_bas {
    border-bottom: thin dotted var(--gris_sombre);
}

.bord_rouge, .bord_vert_clair, .forum_post {
    background-image: url(/images/fond_3.gif);
    border-radius: 0 0 10px 10px;
}

.bord_rouge {
    border: 1px solid var(--rouge_moyen);
}

.bord_vert_clair {
    border: 1px solid var(--vert_clair);
}

.bouton_kaki {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    padding: 5px 20px;
    margin-bottom: 30px;
    color: white;
    background: var(--kaki);
    border-radius: 5px;
    border-width: 0;
}

.cadre_bleu {
    border: thin solid var(--bleu_tag);
}

.cadre_gris {
    margin: 0 15px 0 10px;
    border: 1px solid var(--gris_fonce);
    font-family: var(--fontes_tag);
    font-size: 11px;
    background-image: url(/images/fond_3.gif);
}

.cadre_jaune {
    border: 1px solid var(--jaune);
}

.cadre_marron {
    border: 0 1px 1px 1px solid var(--marron);
}

.cadre_msg {
    font-family: var(--fontes_tag);
    font-size: 11px;
    border: 1px solid var(--bleu_tag);
    padding: 8px 14px;
    background: var(--gris_clair);
}

.cadre_vert {
    border: 1px solid var(--vert_clair);
}

.cadre_vert_leger {
    border: 1px solid var(--vert_leger);
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chiffre a:link, .chiffre a:active {
    font-weight: bold;
    padding: 0 4px 1px 4px;
    line-height: 16px;
    text-decoration: none;
}

.chiffre a:hover {
    padding: 0 2px 1px 2px;
    border: 2px solid var(--jaune);
    background-color: var(--gris_clair);
}

.clic {
    font-family: Arial, sans-serif;
    font-size: 0.7em;
    padding: 5px 20px;
    color: black;
    background: hsl(45, 86%, 57%);
    border-radius: 5px;
    border: solid 1px grey;
    alignment: center;
}

.clic:hover {
    background: hsl(45, 86%, 67%);
    cursor: pointer;
}

.commentaire {
    font-family: var(--fontes_tag);
    font-size: 11px;
    text-align: justify;
    margin: 0 30px 0 35px;
}

.contour_jaune {
    border: 1px solid var(--jaune);
}

.date {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: white;
}

.dev, .local {
    font-family: var(--fontes_tag);
    font-size: 12px;
    font-weight: 200;
    border-radius: 4px;
    text-align: center;
    width: auto;
    position: absolute;
    left: 400px;
    top: 36px;
    border-width: 1px 1px 1px 1px;
    border-top-style: none;
}

.dev {
    background-color: var(--vert_clair);
}

.flag_bleu {
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: center;
    vertical-align: -10px;
    width: 120px;
    padding: 4px 0;
    margin: -1px 0;
    color: white;
    background: var(--bleu_tag);
    border-radius: 6px 0 6px 0;
    border-width: 0;
}

.local {
    background-color: var(--jaune);
}

.edito, .edito a:link, .edito a:active, .edito a:visited, .edito a:hover {
    font-family: var(--fontes_tag);
    font-size: 14px;
    font-style: italic;
    text-align: right;
    color: var(--marron);
}

.edito a:link {
    color: var(--bleu_roi);
}

.filigrane {
    position: relative;
    display: block;
    margin-top: -110px;
    font-weight: bold;
    transform-origin: 0 0;
    transform: rotate(-30deg);
}

.forum {
    font-family: var(--fontes_tag);
    font-size: 11px;
}

.forum_title {
    font-family: var(--fontes_tag);
    font-size: 12px;
    font-weight: bold;
}

.highlight {
    background-color: var(--vert_leger);
}

.lettre a:link, .lettre a:active {
    font-weight: bold;
    padding: 0 5px 1px 5px;
    line-height: 16px;
    text-decoration: none;
}

.lettre a:hover {
    padding: 0 2px 1px 2px;
    border: 2px solid var(--jaune);
    background-color: var(--gris_clair);
}

.lien {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: var(--bleu_roi);
    text-decoration: none;
}

.mark {
    font-weight: bold;
    padding: 0 4px 2px 4px;
    background-color: var(--jaune);
    border: 1px solid var(--gris_moyen);
}

.mention {
    border: 3px dotted red;
    font-family: var(--fontes_tag);
    font-size: 11px;
    padding: 10px 20px;
}

#mentions_legales a {
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    margin-left: 80px;
    text-decoration: none;
}

#mentions_legales a:hover {
    color: black;
}

.modifier, .modifier a {
    font-size: 8px;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    padding: 1px 6px 2px 6px;
    border-radius: 5px;
    color: black;
    background-color: var(--jaune_fluo);
}

.nav {
    font-family: var(--fontes_tag);
    font-size: 8pt;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: none;
}

.nouveau {
    font-size: 9px;
    font-style: italic;
    margin-left: 5px;
    padding: 1px 6px 2px 6px;
    border-radius: 5px;
    color: white;
    background-color: var(--rouge_moyen);
}

.ombre {
    filter: drop-shadow(0px 5px 12px rgba(0, 0, 0, .35));
}

.page_bleue {
    background-color: white;
    border: 1px solid var(--bleu_tag);
}

.pattern {
    height: 30px;
    background-color: var(--gris_tres_clair);
    border-bottom: 1px dotted var(--gris_moyen);
    padding: 1px 25px 0 35px;
    margin-bottom: 30px;
}

.photo_membre {
    display: block;
    height: 150px;
    width: 115px;
    box-shadow: 5px 5px 0 var(--gris_fonce);
    filter: alpha(opacity=50);
    opacity: .50;
}

.remark {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: red;
}

.tag_bleu {
    font-family: var(--fontes_tag);
    font-size: 11px;
    color: white;
    background-color: var(--bleu_tag);
    height: 16px;
    padding: 2px 15px 4px 15px;
    border: 1px solid var(--bleu_tag);
    border-radius: 4px;
}

.texte, .texte_gras, .texte_marron_gras, .texte_rouge_gras, .texte_justifie, .texte_justifie_gras, .texte_souligne_gras {
    font-family: var(--fontes_tag);
    font-size: 11px;
}

.texte_gras, .texte_marron_gras, .texte_rouge_gras, .texte_souligne_gras {
    font-weight: bold;
}

.texte_marron_gras {
    color: var(--marron);
}

.texte_rouge_gras {
    color: red;
}

.texte_souligne_gras {
    text-decoration: underline;
    font-weight: bold;
}

.texte_justifie, .texte_justifie_gras {
    text-align: justify;
}

.texte_justifie {
    padding-right: 10px;
    padding-left: 10px;
}

.texte_justifie_gras {
    margin: 0 30px 0 15px;
    font-weight: bold;
}

.titre_page, .titre_page_down, .titre_page a:link, .titre_page a:active, .titre_page a:visited, .titre_page a:hover {
    font-family: var(--fontes_tag);
    font-size: 10px;
    font-weight: bold;
    color: var(--marron);
    font-style: italic;
    line-height: 34px;
    text-transform: none;
}

.titre_page a:link {
    text-decoration: underline;
}

.titre_page a:hover {
    text-decoration: none;
}

.titre_page_down {
    color: var(--rouge_moyen);
}

/* ---------------- gestion des onglets ---------------------------*/
#tab {
    font-family: var(--fontes_tag);
    font-size: 11px;
    background: url(/images/nav_bg.gif) repeat-x 50% bottom;
    float: left;
    width: 100%;
}

#tab ul {
    padding: 0 10px 0 30px;
    margin: 0;
    list-style-type: none;
}

#tab li {
    padding: 0 0 0 6px;
    background: url(/images/nav_left.gif) no-repeat left top;
    float: left;
    margin: 0;
}

#tab a {
    padding: 5px 15px 8px 6px;
    display: block;
    font-weight: bold;
    background: url(/images/nav_right.gif) no-repeat right top;
    color: var(--bleu_tag);
    text-decoration: none;
    float: none;
}

#tab a:hover {
    color: red;
}

#tab #actif {
    background-image: url(/images/nav_left_on.gif);
}

#tab #actif a {
    background-image: url(/images/nav_right_on.gif);
    padding-bottom: 9px;
    color: red;
}

#tab #bouton_1 {
    background: none;
    position: absolute;
    top: 140px;
    right: 50px;
}

#tab #bouton_1 a {
    background: none;
}

#tab #bouton_2 {
    background: none;
    position: absolute;
    top: 140px;
    right: 100px;
}

#tab #bouton_2 a {
    background: none;
}

#tab #bouton_3 {
    background: none;
    position: absolute;
    top: 140px;
    right: 150px;
}

#tab #bouton_3 a {
    background: none;
}

#tab #bouton_4 {
    background: none;
    position: absolute;
    top: 140px;
    right: 200px;
}

#tab #bouton_4 a {
    background: none;
}

#tab #choix_1 {
    background: none;
    position: absolute;
    top: 146px;
    left: 300px;
}

#tab #choix_1 a {
    background: none;
}

#tab #choix_2 {
    background: none;
    position: absolute;
    top: 146px;
    left: 390px;
}

#tab #choix_2 a {
    background: none;
}

#tab #choix_3 {
    background: none;
    position: absolute;
    top: 146px;
    left: 480px;
}

#tab #choix_3 a {
    background: none;
}

#tab #legende {
    background: none;
    font-family: var(--fontes_tag);
    font-size: 11px;
    padding-top: 5px;
    padding-left: 30px;
    top: 160px;
}

/* ---------------- From Bootstrap ---------------------------*/
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--gris_clair);
    background-clip: border-box;
    border-radius: 4px;
    margin-top: 15px;
    font-family: var(--fontes_tag);
    font-size: 11px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 1rem;
    margin-bottom: 0;
    font-family: var(--fontes_tag);
    border-radius: 4px 4px 0 0;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 11px;
    font-weight: bold;
}

.card-subtitle {
    margin-top: 0.7rem;
    font-size: 10px;
    font-style: italic;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
    border-radius: 0 0 4px 4px;
}

.card-footer {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--gris_moyen);
    border-radius: 0 0 4px 4px;
    font-style: italic;
}