« MediaWiki:Common.css » : différence entre les versions

Version actuelle datée du 15 février 2025 à 20:46

/*====================*/
/* VARIABLES GLOBALES */
/*====================*/
:root {
    --color_main: #661810;        /* Couleur général du site - Bordeaux */
    --color_main2: #923F31;       /* Couleur général +clair */
    --color_main3: #CAADA8;       /* Couleur général ++clair */
    --color_main_dark: #47100B;   /* Couleur général +sombre */
    --color_main_grey1: #F5F5F5;  /* Gris clair+ */
    --color_main_grey2: #EAEAEA;  /* Gris clair */
    --color_main_grey3: #E0E0E0;  /* Gris moyen - Fond du site */
    --color_main_grey4: #D8D8D8;  /* Gris foncé */
    --color_main_grey5: #CACACA;  /* Gris foncé+ */
    --color_gradient1: #4f8365;   /* ok */
    --color_gradient2: #9F4A3B;   /* ok */
    --color_gradient3: #448086;   /* ok */
    --color_compl: #0F5E66;       /* Bleu complémentaire */
    --color_bronz: #938953;       /* Bronze */
    --color_sable: #C4BD97;       /* Sable */
    --color_sable_ligt1: #A09768; /* Couleur sable */
    --color_sable_ligt2: #AEA67E; /* Couleur sable */
    --color_sable_ligt4: #C9C4A9; /* Couleur sable */
    --color_sable_ligt6: #E4E1D4; /* Couleur sable */
    --color_sable_ligt7: #ECEADF; /* Couleur sable */
    --color_sable_dark1: #807748; /* Couleur sable */

    --color_home_h2: #4D1712;      /* Couleur Titre niv 2 de l'accueil */
    --color_a: #0752CA;            /* Couleur des liens hypertexte */
    --color_a_hover: #457dd7;      /* Couleur des liens hypertexte si hover */
    --a_link_title_icon: "🙦";     /* Flèches des liens de titre */
    --a_link_title_color: #002C75; /* Couleurs des flèches (save #002C75) */

    --fs: 13px;                    /* Police de base - Taille */
    --fs_b: 14px;                  /* Police de base - Taille - Grand écran */
    --ff: Calibri, sans-serif;     /* Police de base - Police */
    --ff_h : 'Candara';            /* Police des titres */
    --fs_XXS: 85%; --fs_XS: 90%; --fs_S: 95%;
    --fs_M: 100%;
    --fs_L: 105%; --fs_XL: 110%; --fs_XXL: 115%;
    --h1_size: 220%; --h2_size: 190%; --h3_size: 170%; --h4_size: 140%; --h5_size: 125%; --h6_size: 110%; /* Taille des titres */

    --content_marg_left: 200px;  /* Marge du site : à gauche 165 */
    --content_marg_right: 200px; /* Marge du site : à droite 190 */
    --menu_marg_top: 140px;      /* Marge de la sidebar : en haut */
    --menu_marg_toc: 140px;      /* Marge du sommaire : en haut */
    --sidebar_marg_left: 10px;    /* Retrait gauche de la sidebar */
    --box_shadow_menu: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; /* Ombre des menus - TOC et menu de gauche */
    --box_backg_menu: white; /* var(--color_main_grey5); */
    --acceuil-margin-left: 0px; /* c'était 15px */
    --acceuil-margin-right: 0px; /* c'était 5px */

    --ibox_size: 290px; /* Taille de l'infobox */
}


/*====================*/
/*    BODY et BASE    */
/*====================*/
body {
    background-image: none;
    background-color: var(--color_main_grey3);
    font-family: var(--ff);
    font-size: var(--fs);
}

@media only screen and (min-width: 1921px) {
  body {
    font-size: var(--fs_b);
    --content_marg_left: 220px;
    --content_marg_right: 220px;
  }
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    font-family: var(--ff);
}

p { 
    margin-block-start: 0.75em;
    margin-block-end: 0.75em;
}


/*====================*/
/*    BARRES HAUT     */
/*====================*/
/* Barre du content */
@media screen and (min-width: 551px) {
    body.skin--responsive #p-cactions {
        top: 0; /* Attention lié au margin-top de #content */
        left: var(--content_marg_left);
        padding-left: 0em;
    }
    body.skin--responsive #p-cactions li {
        border-radius: 7px 7px 0px 0px;
        a {
            border-radius: 7px 7px 0px 0px;
        }
    }
}

/* Barre du user */
@media screen and (min-width: 551px) {
    body.skin--responsive #p-personal {
        font-size: var(--fs_XS);
        left: auto;
        right: 0;
        width: auto;
    }
    body.skin--responsive #p-personal ul {
        padding-left: 0em;
}

body.skin--responsive #p-personal {
    position: fixed;
    width: calc(var(--content_marg_right) - 20px);
/*    background-color: var(--color_main_grey2); */
    background-color: var(--box_backg_menu);
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #aaaaaa;
    border-radius: 0px 0px 0px 10px;
    padding: 2px 7px 5px 7px;
}

body.skin--responsive #p-personal ul {float: left;}

/* Mise en liste classique */
#p-personal .mw-list-item a {display: block;}

body.skin--responsive #pt-userpage a {font-weight: bold;}

body.skin--responsive #p-personal li {
    display: list-item;
    margin-left: 0.3em;
}

/* Cache le lien vers l'aide */
#mw-indicator-mw-helplink {display: none;}


/*====================*/
/*   MAIN DU SITE     */
/*====================*/
#content {
    margin-left: var(--content_marg_left);
    margin-right: var(--content_marg_right);
    margin-top: 1.3em;
    text-align: justify;
    border-right: 1px solid #aaaaaa;
    line-height: 1.35;
    padding: 1em 1.5em 1em 1.5em;
}

#footer, .mw-footer {
    position: relative;
    text-align: center; z-index: 0;
    font-size: 80%;
    margin-left: var(--content_marg_left);
    margin-right: var(--content_marg_right);
    border: 1px solid #fabd23;
}
li#copyright {display: none;}


/*====================*/
/*      HEADER        */
/*====================*/
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.nh2, .nh3, .nh4, .nh5, .nh6 {
    font-variant-caps: small-caps;
    font-family: var(--ff_h);
    font-weight: bold;
    color: var(--color_main);
    padding: 0.1em 0 0.1em 0;
    margin: 0.7em 0 0.1em 0;
    line-height: 1em;
    position: relative;
    text-align: left;
}

h1, .mw-body h1 {
    font-size: var(--h1_size);
    background-color: var(--color_main);
    border-radius: 15px 15px 15px 15px;
    color: white;
    padding-left: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px;
    line-height: 1.3em;
    margin-top: 0em;
}

h2, .nh2, .mw-body h2 {
    font-size: var(--h2_size);
    box-shadow: 0px 13px 10px -5px var(--color_main_grey4);
    border-bottom: 3px solid var(--color_main);
    margin-bottom: 0.3em;
}

/* Masquer les titres de pages pour les grandes sections */
.page-Accueil .firstHeading, .rootpage-AltAccueil .firstHeading, .rootpage-Chroniques_de_Gahan .firstHeading,
.rootpage-Le_Monde_de_Gahan .firstHeading, .rootpage-Histoire_de_Gahan .firstHeading,
.rootpage-Panthéon .firstHeading, .rootpage-La_Magie .firstHeading, .rootpage-Célébrités .firstHeading,
.rootpage-Peuples_de_Gahan .firstHeading, .page-Catégorie_PNJ .firstHeading, .page-Catégorie_PJ .firstHeading,
.rootpage-Le_Trône_Ecarlate .firstHeading {
    display: none;
}

/* Réduction de la taille du padding top global pour les grandes sections */
.page-Accueil #content, .rootpage-AltAccueil #content, .rootpage-Chroniques_de_Gahan #content,
.rootpage-Le_Monde_de_Gahan #content, .rootpage-Histoire_de_Gahan #content,
.rootpage-Panthéon #content, .rootpage-La_Magie #content, .rootpage-Célébrités #content,
.rootpage-Peuples_de_Gahan #content, .page-Catégorie_PNJ #content, .page-Catégorie_PJ #content {
    padding-top: 0;
}

.intro-accueil p {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-family:'Segoe Print';
    font-weight: bold;
    color: #333333;
}

h3, .nh3, .mw-body h3 {
    font-size: var(--h3_size);
    border-width: 0px 0px 1px 0px;
    border-style: none none solid none;
    border-image: linear-gradient(to right, var(--color_main), white) 1;
}

h4, .nh4, .mw-body h4 {font-size: var(--h4_size); color: black;}
h5, .nh5, .mw-body h5 {font-size: var(--h5_size); color: black;}
h6, .nh6, .mw-body h6 {font-size: var(--h6_size); color: black;}

/* Ajouter une icône après les titres contenant des liens, sauf pour les liens "MODIFIER" */
h1 a:not(.mw-editsection a), h2 a:not(.mw-editsection a), h3 a:not(.mw-editsection a), 
h4 a:not(.mw-editsection a), h5 a:not(.mw-editsection a), h6 a:not(.mw-editsection a),
.mw-body h1 a:not(.mw-editsection a), .mw-body h2 a:not(.mw-editsection a), 
.mw-body h3 a:not(.mw-editsection a), .mw-body h4 a:not(.mw-editsection a), 
.mw-body h5 a:not(.mw-editsection a), .mw-body h6 a:not(.mw-editsection a) {
    color: inherit;         /* Conserver la couleur du titre */
    text-decoration: none;  /* Supprimer le soulignement par défaut des liens */
    position: relative;     /* Nécessaire pour le pseudo-élément ::after */
}

h1 a:not(.mw-editsection a)::after, h2 a:not(.mw-editsection a)::after, h3 a:not(.mw-editsection a)::after, 
h4 a:not(.mw-editsection a)::after, h5 a:not(.mw-editsection a)::after, h6 a:not(.mw-editsection a)::after,
.mw-body h1 a:not(.mw-editsection a)::after, .mw-body h2 a:not(.mw-editsection a)::after, 
.mw-body h3 a:not(.mw-editsection a)::after, .mw-body h4 a:not(.mw-editsection a)::after, 
.mw-body h5 a:not(.mw-editsection a)::after, .mw-body h6 a:not(.mw-editsection a)::after {
    font-family: -apple-system;
    vertical-align: middle;
    content: var(--a_link_title_icon);
    font-size: 1em;
    color: var(--a_link_title_color);
    margin-left: 0.4em;
}

/* Cacher le lien [Modifier] par défaut */
.mw-editsection {
    display: none;
}

/* Afficher le lien [Modifier] au survol des titres de h2 à h6 */
h2:hover .mw-editsection, h3:hover .mw-editsection, h4:hover .mw-editsection,
h5:hover .mw-editsection, h6:hover .mw-editsection {
    display: inline;
}


/*====================*/
/* HEADER non-header  */
/*====================*/
.nh2, .nh3, .nh4, .nh5, .nh6 {
    border: none;
}

.nh2 {box-shadow: none}


/*====================*/
/*      SIDEBAR       */
/*====================*/
#sidebar {
/*    font-size: var(--fs_S); */
    position: fixed;
    background-color: none;
    top: var(--menu_marg_top);
    left: 0px;
    z-index: 1;
}

/* Enlève les cadres des blocs de sidebar */
body.skin--responsive #sidebar .pBody {    
    background-color: transparent;
    border: none;
}

#sidebar .portlet {width: calc(var(--content_marg_left) - 7px); margin: 0;}

#p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3, #p-ADMINISTRATION h3, #p-REGIONS h3, #p-SECTIONS h3 {
    font-weight: bold;
    box-shadow: none;
    border: none;
    font-size: var(--fs_XL);
    padding-left: var(--sidebar_marg_left);
}

#p-REGIONS h3, #p-SECTIONS h3 {font-size: 140%;}
#p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3, #p-ADMINISTRATION h3 {font-size: 120%;}

#p-NAVIGATION ul, #p-tb ul, #p-OUTILS_SPECIAUX ul, #p-ADMINISTRATION ul, #p-REGIONS ul, #p-SECTIONS ul {margin: var(--sidebar_marg_left);}

#p-REGIONS ul, #p-SECTIONS ul {font-size: 110%; font-weight: bold;}

#sidebar ul {
    list-style-type: "●";
    margin-top: 0;
    margin-bottom: 3px;
}

#sidebar ul li {
    padding-left: 0.2em;
    padding-top: 0.15em;
    line-height: 1.2em;
}

#sidebar li::marker {color: #6F6F6F; font-size: 100%;}

.portlet ul {
    line-height: 1.1em;
}


/*====================*/
/*    SIDEBAR-BOX     */
/*====================*/
#p-SECTIONS, #p-NAVIGATION {
    background-color: var(--box_backg_menu);
    border-radius: 0px 10px 0px 0px;
    margin-top: 0px !important;
    border-width: 1px 1px 0px 0px;
    border-style: solid;
    border-color: #aaaaaa;
    padding-top: 5px;
}

#p-NAVIGATION {
    margin-top: 10px !important;
}

#p-REGIONS, #p-ADMINISTRATION {
    background-color: var(--box_backg_menu);
    border-radius: 0px 0px 10px 0px;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #aaaaaa;
}

#p-tb, #p-OUTILS_SPECIAUX {
    background-color: var(--box_backg_menu);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: #aaaaaa;
}


/*====================*/
/*  SEARCH in SIDEBAR */
/*====================*/

body.skin--responsive #sidebar .pBody {
    padding-top: 0px;
}

#p-search input[type="search"] {
    font-family: var(--ff);
    width: 11em;
    font-size: var(--fs_XS);
    border: none;
    border: 1px solid;
    border-radius: 7px;
    border-color: #aaaaaa;
    line-height: 1.5;
}

#p-search input[type="submit"] {  /* Style du bouton de recherche */
    font-family: var(--ff);
    background-color: var(--color_main2);  
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: var(--fs_XS);
    box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px;
}

#p-search input[type="submit"] {display: none;} /* Supprime les boutons de recherche inutiles */
#p-search-label {display: none;} /* Supprime le titre du bouton Rechercher */


/*====================*/
/*   SOMMAIRE (TOC)   */
/*====================*/
#toc {
    position: fixed;
    top: var(--menu_marg_toc);
    right: 0;
    width: calc(var(--content_marg_right) - 20px);
    font-size: var(--fs_S);
    line-height: 1.2em;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #aaaaaa;
    border-radius: 10px 0px 0px 10px;
/*    box-shadow: var(--box_shadow_menu); */
    background-color: var(--box_backg_menu);
}

#toc, #toc * {text-align: left;}

#toc ul {margin: 0.25em 0;}
#toc ul ul {margin-left: 0.4em; margin-top: 0; font-size: 95%; font-weight: normal;}
#toc ul ul ul {font-style: italic; margin-top: 0; font-size: 90%;}

/* Applique du gras au premier niveau */
#toc > ul > li > a {
    font-weight: bold;
}

/* Supprime le titre du Sommaire */
#toc .toctitle {display: none;}

#toc .tocnumber { padding-right: 0.3em;}

#toc li {
}


/*====================*/
/*  HORIZONTAL LIST   */
/*====================*/
.hlist dd, .hlist dt, .hlist li, .hlist ul {
    margin: 0;
    display: inline;
}

.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}

.hlist dd:not(:last-child):after, .hlist li:not(:last-child):after {     /* Ajout d'un • après chaque élément sauf le dernier */
    content: " • ";
    color: var(--color_main);
}


/*====================*/
/*     FONT SIZE      */
/*====================*/
.fontsize_XXS {font-size: var(--fs_XXS);}
.fontsize_XS {font-size: var(--fs_XS);}
.fontsize_S  {font-size: var(--fs_S);}
.fontsize_M  {font-size: var(--fs_M);}
.fontsize_L  {font-size: var(--fs_L);}
.fontsize_XL {font-size: var(--fs_XL);}
.fontsize_XXL {font-size: var(--fs_XXL);}

/* .fontsize_XXS, .fontsize_XS, .fontsize_S, .fontsize_M, .fontsize_L, .fontsize_XL, .fontsize_XXL {display: inline-block;} */

/*====================*/
/*  LIEN HYPERTEXTE   */
/*====================*/
a:hover {text-decoration: none;}

a, a:visited, .mw-parser-output a.external:visited {
    color: var(--color_a);
    transition: background 0.3s;
}

a:hover:not(#p-logo a):not(h2 a):not(h3 a):not(h4 a):not(h5 a):not(h6 a), body.skin--responsive #p-personal li a:hover, body.skin--responsive #p-cactions li a:hover {
/*    background-color: var(--color_sable_ligt4); */
    color: var(--color_a_hover);
    text-decoration: underline;
}

h2 a:hover:not(#p-logo a), h3 a:hover:not(#p-logo a) {
    color: var(--color_main2);
}

a.new, a.new:visited {color: #cc2200;}
.mw-body-content a:not(.mw-editsection a, .toc a, h2 a, h3 a, h4 a, h5 a, h6 a, .section-title a) {
    font-family: 'Calibri Light';
    font-weight: bold;
    font-size: var(--fs_S);
}

.mw-editsection a {color: var(--color_main)}


/*====================*/
/*   FIL D'ARIANE     */
/*====================*/
.breadcrumb {
    display: inline-block;
    border-width: 0px 0px 1px 0px;
    border-style: none none solid none;
    border-image: linear-gradient(to right, var(--color_main), white) 1;
    margin-bottom : 0.1em;
}

.breadcrumb a {
    margin-right: 0.5em;
    margin-left: 0.1em;
    font-weight: normal;
    font-family: 'Calibri Light';
    font-style: italic;
}


/*====================*/
/*      POST-IT       */
/*====================*/
.post-it {
    float: right;
    background-color: #E0DA15;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transform: rotate(-8deg);
    padding: 1.5em;
    margin: 0 15px 15px 15px;
    font-family: "Segoe Print";
    text-align: center;
}

/*====================*/
/*      INFOBOX       */
/*====================*/
.infobox {
    display: flex;
    flex-wrap: wrap;
    width: var(--ibox_size);
    font-family: Calibri;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    float: right;
    background-color :#EEEEEE;
    font-size: 80%;
    vertical-align: top;
    text-align: left;
    line-height: 1.2;
    margin: 0px 0px 15px 20px;
}

.infobox-title, .infobox-title2 {
    width: 100%;
    font-weight: bold;
    background-color: var(--color_main);
    color: white;
    font-size: 115%;
    text-align: center;
    line-height: 1.6;
}

.infobox-title2 {
    background-color: var(--color_compl);
}

.infobox-img {width: var(--ibox_size); height: auto;}

.infobox-30, .infobox-70 {padding:calc( var(--ibox_size) * 0.01 ) calc( var(--ibox_size) * 0.02 ) calc( var(--ibox_size) * 0.01 ) calc( var(--ibox_size) * 0.02 );}

.infobox-30 {width: calc( var(--ibox_size) * 0.26 ); font-weight: bold;}
.infobox-70 {width: calc( var(--ibox_size) * 0.66 );}


/*====================*/
/*       QUOTE        */
/*====================*/
q {font-style: italic;}


/*====================*/
/*       PUCES        */
/*====================*/
.mw-content-ltr ul {margin: 0.3em 0 0 1.1em;}

.page-Accueil ul {
    margin-left: calc(var(--acceuil-margin-left) + 10px);
    margin-right: var(acceuil-margin-right);
}

ul, ul ul, ul ul ul {list-style-type: none; list-style-image: none;}

ul { 
    list-style-type: "\002B27";
    list-style-position: outside;
    line-height: 1.3em;
}

ul ul {list-style-type: "\002B28";}
ul ul ul {list-style-type: "\002B2A";}

.mw-content-ltr ul ul, .mw-content-ltr ul ul ul {margin-top: 0;}

li::marker {color: var(--color_main); font-size: 90%;}

li {
    padding-left: 0.2em;
    margin-bottom: 0;
}


/*====================*/
/*   mw-collapsible A REFAIRE   */
/*====================*/
.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

.mw-collapsible-content {
    padding-left: 10px;
    padding-top: 1.5em;
}

/*====================*/
/*       PAPER        */
/*====================*/
.paper {
    background-color: #f8f5de;
    background-image: linear-gradient(to right, #e4e1d4 0%, #f1f0e9 16%, #e4e1d4 40%, #f1f0e9 60%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.paper2 {
    background-color: #f8f5de;
    background-image: linear-gradient(to right, #f1f0e9 20%, #e4e1d4 35%, #f1f0e9 45%, #bbb593 50%, #aca67e 50%, #f1f0e9 58%, #e4e1d4 70%, #f1f0e9 80%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.paper-titre, .paper2-titre {
    padding: 1.25em 9% 0 9%;
    color: var(--color_main);
    font-family: "Old English Text MT";
    font-size: 200%;
    text-align: left;
}

.paper2-titre {padding: 1.25em 4.5% 0 4.5%;}

.paper-titre [class^="image-"] {margin-bottom: 0;}

.paper-text, .paper2-text {
    padding: 1.75em 9% 3.5em 9%;
    color: rgba(0,0,0,0.85);
    letter-spacing: 0.03em;
    font-family: Geranium;
}

.paper2-text {padding: 1.75em 4.5% 3.5em 4.5%;}

.paper-text::first-letter {
    color: var(--color_main);
    font-family: "Old English Text MT";
    font-size: 3em;
    line-height: 1;
    float: left;
    margin-right: 0.1em;
}

/*====================*/
/*       BLOCS        */
/*====================*/
.section-title {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
    padding: 0.2em 1em;
    font-size: 150%;
    font-weight: bold;
    font-variant-caps: small-caps;
    color: #FFFFFF;
    background-color: var(--color_main);
    border-radius: 5px 30px 0px 0px;
}

.section-title a {
    color: #FFFFFF;
    font-size: var(--fs);
    font-variant-caps: normal;
}

.section-content {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
    padding: 1em;
    background-color: var(--color_main_grey2);
    border-radius: 0px 0px 5px 5px;
}

/* Section par défaut avec 1% d'espace entre elles. Adapté lorsqu'il s'agit de textes uniquement sans box. */
.section-100 {width: 98%; padding: 10px 1%;}
.section-90 {float: left; width: 88%; padding: 10px 1%;}
.section-80 {float: left; width: 78%; padding: 10px 1%;}
.section-70 {float: left; width: 68%; padding: 10px 1%;}
.section-60 {float: left; width: 58%; padding: 10px 1%;}
.section-50 {float: left; width: 48%; padding: 10px 1%;}
.section-40 {float: left; width: 38%; padding: 10px 1%;}
.section-30 {float: left; width: 28%; padding: 10px 1%;}
.section-20 {float: left; width: 18%; padding: 10px 1%;}
.section-10 {float: left; width: 8%; padding: 10px 1%;}

/* Section par défaut avec 0.5% d'espace entre elles. Plus adapté lorsqu'il s'agit de box. */
.sectionb-100 {width: 99%; padding: 10px 0.5%;}
.sectionb-90 {float: left; width: 89%; padding: 10px 0.5%;}
.sectionb-80 {float: left; width: 79%; padding: 10px 0.5%;}
.sectionb-70 {float: left; width: 69%; padding: 10px 0.5%;}
.sectionb-60 {float: left; width: 59%; padding: 10px 0.5%;}
.sectionb-50 {float: left; width: 49%; padding: 10px 0.5%;}
.sectionb-40 {float: left; width: 39%; padding: 10px 0.5%;}
.sectionb-30 {float: left; width: 29%; padding: 10px 0.5%;}
.sectionb-20 {float: left; width: 19%; padding: 10px 0.5%;}
.sectionb-10 {float: left; width: 9%; padding: 10px 0.5%;}

pre,.mw-code {font-size: 11px !important;}

.italique {font-style: italic;}

.p_a1  p {margin-bottom: 0.2em;}
.p_a2  p {margin-bottom: 0.5em;}
.p_a3  p {margin-bottom: 0.7em;}

.Bl-Shad0 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
    hyphens: auto;
    text-align: justify;
}

.Bl-Shad0T {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
    hyphens: auto;
    text-align: justify;
    padding: 1em;
}

.Justify, .Coll, .Coll3, .Coll4, .Coll-5, {
    hyphens: auto;
    text-align: justify;
}

.Coll {column-count: 2;}
.Coll3 {column-count: 3;}
.Coll4 {column-count: 4;}
.Coll-5 {column-count: 2; column-gap: 10%;}


/*====================*/
/*   BLOCS ACCUEIL    */
/*====================*/
.accueil-grille, .accueil-box-col, .box-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.box-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.acceuil-box {
    padding: 10px;
    border: solid 1px #aaa;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
    box-shadow: rgba(0,0,0,0.3) 0px 0px 13px 3px;
    background-color: var(--color_sable_ligt7);
    background: linear-gradient(to bottom, var(--color_sable_ligt6), var(--color_sable_ligt7));
    font-size: 125%;
    font-variant-caps: small-caps;
    text-align: left;
}

.acceuil-box li {
    padding-top: 0.3em;
}

.acceuil-box li {
    list-style-type: none;
}

.acceuil-box a {
    font-family: var(--ff_h);
}


/*====================*/
/*  GALERIE d'IMAGES  */
/*====================*/
ul.mw-gallery-packed-hover {
     text-align: justify;
}


/*====================*/
/*  IMG DYNAMIC SIZE  */
/*====================*/
.image-10w, .image-20w, .image-30w, .image-40w, .image-50w, .image-60w, .image-70w, .image-80w, .image-90w, .image-100w {
    height: auto;
}

.image-left, .image-right, .image-center { margin-bottom: 5px; }

.image-left { float: left; margin-right: 15px; }
.image-right { float: right; margin-left: 15px; }
.image-center { margin-right: auto; margin-left: auto;}

.image-thumb {
    padding: 5px;
    border: 1px solid #c8ccd1;
    background-color: #f8f9fa;
    font-size: 87%;
}


.image-10w {width: 10%;}
.image-20w {width: 20%;}
.image-30w {width: 30%;}
.image-40w {width: 40%;}
.image-50w {width: 50%;}
.image-60w {width: 60%;}
.image-70w {width: 70%;}
.image-80w {width: 80%;}
.image-90w {width: 90%;}
.image-100w {width: 100%;}


/*====================*/
/* IMG SELECTIONNABLE */
/*====================*/
.img-fading {transition: 0.3s;}
.img-fading:hover {opacity: 0.8;}


/*====================*/
/*       LIVRE        */
/*====================*/
.livre {
    position: relative;
    text-align: center;
    font-family: "Pristina";
    font-weight: bold;
    font-size: 170%;
    transition: 0.5s;
    margin: 0 10px 10px 10px;
}

.livre a, .livre {color: #333333;}

.livre-titre {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.livre:hover{transform: rotate(1deg);}


/*====================*/
/*   ZOOM DE CARTE    */
/*====================*/
.titrecarte {
    text-align: center;
    color: var(--color_main);
    font-size: 120%;
    font-weight: bold;
}

.zoominfo {
    font-size: 80%;
    width: 1200px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

.structure {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 900px;
    display: grid;
    grid-template: repeat(11, 1fr)/repeat(11, 1fr);
}
	
.cell {
/*    border: 1px solid gray; */
    background-color: transparent;
    z-index: 1;
}

.cell:nth-child(n):hover ~ .mapcontent {--zoom: 1.8;} /* Le zoom réel est de la valeur de --zoom + 1 */

.cell:nth-child(1):hover ~ .mapcontent  {--posX: 0%;   --posY: 0%;}
.cell:nth-child(2):hover ~ .mapcontent  {--posX: 10%;   --posY: 0%;}
.cell:nth-child(3):hover ~ .mapcontent  {--posX: 20%;   --posY: 0%;}
.cell:nth-child(4):hover ~ .mapcontent  {--posX: 30%;   --posY: 0%;}
.cell:nth-child(5):hover ~ .mapcontent  {--posX: 40%;   --posY: 0%;}
.cell:nth-child(6):hover ~ .mapcontent  {--posX: 50%;   --posY: 0%;}
.cell:nth-child(7):hover ~ .mapcontent  {--posX: 60%;   --posY: 0%;}
.cell:nth-child(8):hover ~ .mapcontent  {--posX: 70%;   --posY: 0%;}
.cell:nth-child(9):hover ~ .mapcontent  {--posX: 80%;   --posY: 0%;}
.cell:nth-child(10):hover ~ .mapcontent  {--posX: 90%;   --posY: 0%;}
.cell:nth-child(11):hover ~ .mapcontent  {--posX: 100%;   --posY: 0%;}
.cell:nth-child(12):hover ~ .mapcontent  {--posX: 0%;   --posY: 10%;}
.cell:nth-child(13):hover ~ .mapcontent  {--posX: 10%;   --posY: 10%;}
.cell:nth-child(14):hover ~ .mapcontent  {--posX: 20%;   --posY: 10%;}
.cell:nth-child(15):hover ~ .mapcontent  {--posX: 30%;   --posY: 10%;}
.cell:nth-child(16):hover ~ .mapcontent  {--posX: 40%;   --posY: 10%;}
.cell:nth-child(17):hover ~ .mapcontent  {--posX: 50%;   --posY: 10%;}
.cell:nth-child(18):hover ~ .mapcontent  {--posX: 60%;   --posY: 10%;}
.cell:nth-child(19):hover ~ .mapcontent  {--posX: 70%;   --posY: 10%;}
.cell:nth-child(20):hover ~ .mapcontent  {--posX: 80%;   --posY: 10%;}
.cell:nth-child(21):hover ~ .mapcontent  {--posX: 90%;   --posY: 10%;}
.cell:nth-child(22):hover ~ .mapcontent  {--posX: 100%;   --posY: 10%;}
.cell:nth-child(23):hover ~ .mapcontent  {--posX: 0%;   --posY: 20%;}
.cell:nth-child(24):hover ~ .mapcontent  {--posX: 10%;   --posY: 20%;}
.cell:nth-child(25):hover ~ .mapcontent  {--posX: 20%;   --posY: 20%;}
.cell:nth-child(26):hover ~ .mapcontent  {--posX: 30%;   --posY: 20%;}
.cell:nth-child(27):hover ~ .mapcontent  {--posX: 40%;   --posY: 20%;}
.cell:nth-child(28):hover ~ .mapcontent  {--posX: 50%;   --posY: 20%;}
.cell:nth-child(29):hover ~ .mapcontent  {--posX: 60%;   --posY: 20%;}
.cell:nth-child(30):hover ~ .mapcontent  {--posX: 70%;   --posY: 20%;}
.cell:nth-child(31):hover ~ .mapcontent  {--posX: 80%;   --posY: 20%;}
.cell:nth-child(32):hover ~ .mapcontent  {--posX: 90%;   --posY: 20%;}
.cell:nth-child(33):hover ~ .mapcontent  {--posX: 100%;   --posY: 20%;}
.cell:nth-child(34):hover ~ .mapcontent  {--posX: 0%;   --posY: 30%;}
.cell:nth-child(35):hover ~ .mapcontent  {--posX: 10%;   --posY: 30%;}
.cell:nth-child(36):hover ~ .mapcontent  {--posX: 20%;   --posY: 30%;}
.cell:nth-child(37):hover ~ .mapcontent  {--posX: 30%;   --posY: 30%;}
.cell:nth-child(38):hover ~ .mapcontent  {--posX: 40%;   --posY: 30%;}
.cell:nth-child(39):hover ~ .mapcontent  {--posX: 50%;   --posY: 30%;}
.cell:nth-child(40):hover ~ .mapcontent  {--posX: 60%;   --posY: 30%;}
.cell:nth-child(41):hover ~ .mapcontent  {--posX: 70%;   --posY: 30%;}
.cell:nth-child(42):hover ~ .mapcontent  {--posX: 80%;   --posY: 30%;}
.cell:nth-child(43):hover ~ .mapcontent  {--posX: 90%;   --posY: 30%;}
.cell:nth-child(44):hover ~ .mapcontent  {--posX: 100%;   --posY: 30%;}
.cell:nth-child(45):hover ~ .mapcontent  {--posX: 0%;   --posY: 40%;}
.cell:nth-child(46):hover ~ .mapcontent  {--posX: 10%;   --posY: 40%;}
.cell:nth-child(47):hover ~ .mapcontent  {--posX: 20%;   --posY: 40%;}
.cell:nth-child(48):hover ~ .mapcontent  {--posX: 30%;   --posY: 40%;}
.cell:nth-child(49):hover ~ .mapcontent  {--posX: 40%;   --posY: 40%;}
.cell:nth-child(50):hover ~ .mapcontent  {--posX: 50%;   --posY: 40%;}
.cell:nth-child(51):hover ~ .mapcontent  {--posX: 60%;   --posY: 40%;}
.cell:nth-child(52):hover ~ .mapcontent  {--posX: 70%;   --posY: 40%;}
.cell:nth-child(53):hover ~ .mapcontent  {--posX: 80%;   --posY: 40%;}
.cell:nth-child(54):hover ~ .mapcontent  {--posX: 90%;   --posY: 40%;}
.cell:nth-child(55):hover ~ .mapcontent  {--posX: 100%;   --posY: 40%;}
.cell:nth-child(56):hover ~ .mapcontent  {--posX: 0%;   --posY: 50%;}
.cell:nth-child(57):hover ~ .mapcontent  {--posX: 10%;   --posY: 50%;}
.cell:nth-child(58):hover ~ .mapcontent  {--posX: 20%;   --posY: 50%;}
.cell:nth-child(59):hover ~ .mapcontent  {--posX: 30%;   --posY: 50%;}
.cell:nth-child(60):hover ~ .mapcontent  {--posX: 40%;   --posY: 50%;}
.cell:nth-child(61):hover ~ .mapcontent  {--posX: 50%;   --posY: 50%;}
.cell:nth-child(62):hover ~ .mapcontent  {--posX: 60%;   --posY: 50%;}
.cell:nth-child(63):hover ~ .mapcontent  {--posX: 70%;   --posY: 50%;}
.cell:nth-child(64):hover ~ .mapcontent  {--posX: 80%;   --posY: 50%;}
.cell:nth-child(65):hover ~ .mapcontent  {--posX: 90%;   --posY: 50%;}
.cell:nth-child(66):hover ~ .mapcontent  {--posX: 100%;   --posY: 50%;}
.cell:nth-child(67):hover ~ .mapcontent  {--posX: 0%;   --posY: 60%;}
.cell:nth-child(68):hover ~ .mapcontent  {--posX: 10%;   --posY: 60%;}
.cell:nth-child(69):hover ~ .mapcontent  {--posX: 20%;   --posY: 60%;}
.cell:nth-child(70):hover ~ .mapcontent  {--posX: 30%;   --posY: 60%;}
.cell:nth-child(71):hover ~ .mapcontent  {--posX: 40%;   --posY: 60%;}
.cell:nth-child(72):hover ~ .mapcontent  {--posX: 50%;   --posY: 60%;}
.cell:nth-child(73):hover ~ .mapcontent  {--posX: 60%;   --posY: 60%;}
.cell:nth-child(74):hover ~ .mapcontent  {--posX: 70%;   --posY: 60%;}
.cell:nth-child(75):hover ~ .mapcontent  {--posX: 80%;   --posY: 60%;}
.cell:nth-child(76):hover ~ .mapcontent  {--posX: 90%;   --posY: 60%;}
.cell:nth-child(77):hover ~ .mapcontent  {--posX: 100%;   --posY: 60%;}
.cell:nth-child(78):hover ~ .mapcontent  {--posX: 0%;   --posY: 70%;}
.cell:nth-child(79):hover ~ .mapcontent  {--posX: 10%;   --posY: 70%;}
.cell:nth-child(80):hover ~ .mapcontent  {--posX: 20%;   --posY: 70%;}
.cell:nth-child(81):hover ~ .mapcontent  {--posX: 30%;   --posY: 70%;}
.cell:nth-child(82):hover ~ .mapcontent  {--posX: 40%;   --posY: 70%;}
.cell:nth-child(83):hover ~ .mapcontent  {--posX: 50%;   --posY: 70%;}
.cell:nth-child(84):hover ~ .mapcontent  {--posX: 60%;   --posY: 70%;}
.cell:nth-child(85):hover ~ .mapcontent  {--posX: 70%;   --posY: 70%;}
.cell:nth-child(86):hover ~ .mapcontent  {--posX: 80%;   --posY: 70%;}
.cell:nth-child(87):hover ~ .mapcontent  {--posX: 90%;   --posY: 70%;}
.cell:nth-child(88):hover ~ .mapcontent  {--posX: 100%;   --posY: 70%;}
.cell:nth-child(89):hover ~ .mapcontent  {--posX: 0%;   --posY: 80%;}
.cell:nth-child(90):hover ~ .mapcontent  {--posX: 10%;   --posY: 80%;}
.cell:nth-child(91):hover ~ .mapcontent  {--posX: 20%;   --posY: 80%;}
.cell:nth-child(92):hover ~ .mapcontent  {--posX: 30%;   --posY: 80%;}
.cell:nth-child(93):hover ~ .mapcontent  {--posX: 40%;   --posY: 80%;}
.cell:nth-child(94):hover ~ .mapcontent  {--posX: 50%;   --posY: 80%;}
.cell:nth-child(95):hover ~ .mapcontent  {--posX: 60%;   --posY: 80%;}
.cell:nth-child(96):hover ~ .mapcontent  {--posX: 70%;   --posY: 80%;}
.cell:nth-child(97):hover ~ .mapcontent  {--posX: 80%;   --posY: 80%;}
.cell:nth-child(98):hover ~ .mapcontent  {--posX: 90%;   --posY: 80%;}
.cell:nth-child(99):hover ~ .mapcontent  {--posX: 100%;   --posY: 80%;}
.cell:nth-child(100):hover ~ .mapcontent  {--posX: 0%;   --posY: 90%;}
.cell:nth-child(101):hover ~ .mapcontent  {--posX: 10%;   --posY: 90%;}
.cell:nth-child(102):hover ~ .mapcontent  {--posX: 20%;   --posY: 90%;}
.cell:nth-child(103):hover ~ .mapcontent  {--posX: 30%;   --posY: 90%;}
.cell:nth-child(104):hover ~ .mapcontent  {--posX: 40%;   --posY: 90%;}
.cell:nth-child(105):hover ~ .mapcontent  {--posX: 50%;   --posY: 90%;}
.cell:nth-child(106):hover ~ .mapcontent  {--posX: 60%;   --posY: 90%;}
.cell:nth-child(107):hover ~ .mapcontent  {--posX: 70%;   --posY: 90%;}
.cell:nth-child(108):hover ~ .mapcontent  {--posX: 80%;   --posY: 90%;}
.cell:nth-child(109):hover ~ .mapcontent  {--posX: 90%;   --posY: 90%;}
.cell:nth-child(110):hover ~ .mapcontent  {--posX: 100%;   --posY: 90%;}
.cell:nth-child(111):hover ~ .mapcontent  {--posX: 0%;   --posY: 100%;}
.cell:nth-child(112):hover ~ .mapcontent  {--posX: 10%;   --posY: 100%;}
.cell:nth-child(113):hover ~ .mapcontent  {--posX: 20%;   --posY: 100%;}
.cell:nth-child(114):hover ~ .mapcontent  {--posX: 30%;   --posY: 100%;}
.cell:nth-child(115):hover ~ .mapcontent  {--posX: 40%;   --posY: 100%;}
.cell:nth-child(116):hover ~ .mapcontent  {--posX: 50%;   --posY: 100%;}
.cell:nth-child(117):hover ~ .mapcontent  {--posX: 60%;   --posY: 100%;}
.cell:nth-child(118):hover ~ .mapcontent  {--posX: 70%;   --posY: 100%;}
.cell:nth-child(119):hover ~ .mapcontent  {--posX: 80%;   --posY: 100%;}
.cell:nth-child(120):hover ~ .mapcontent  {--posX: 90%;   --posY: 100%;}
.cell:nth-child(121):hover ~ .mapcontent  {--posX: 100%;   --posY: 100%;}
	
.mapcontent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    --zoom: 0;
    --posX: 0%;
    --posY: 0%;
    overflow: hidden;
}
	
.mapzoom img {
    transform: scale(calc(var(--zoom) * 1.5 + 1));
    transform-origin: var(--posX) var(--posY);
    transition: all 1s ease-out;
}
	
.map {width: 50%;}


/*====================*/
/*       TABLES       */
/*====================*/

/* Table simple : Largeur totale 100% et léger padding left pour les cellules non titre */
table.tbl-simple {
    line-height: 1.1;
}

.tbl-simple td {padding-left: 0.5em;}

.tbl-simple tr {
    padding-top: 0;
    padding-bottom: 0;
}


/* Table centrée : Toutes les colonnes sont centrées
table.tbl-center {
    border-collapse: collapse;
}

.tbl-center td, .tbl-center tr {
    text-align: center;
}


/* Table du calendrier */
table.tbl-calendar {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background-color: #f8f9fa;
    color: #202122;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    font-size: var(--fs_S);
    text-align: left;
}

.tbl-calendar th, .tbl-calendar td, .tbl-calendar tr {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}

.tbl-calendar th {
    background-color: #eaecf0;
    text-align: center;
}

.tbl-calendar th:nth-child(1) {width: 5%;}
.tbl-calendar th:nth-child(2) {width: 7%;}
.tbl-calendar th:nth-child(3) {width: 60%;}
.tbl-calendar th:nth-child(4) {width: 3%;}
.tbl-calendar th:nth-child(5) {width: 10%;}

.tbl-calendar span.mw-collapsible-toggle {
    margin-right: 0.2em;
}


/*====================*/
/*     CATEGORIES     */
/*====================*/
/* Réduction de la taille de la section Sous-Catégorie */
#mw-subcategories {font-size: 90%;}

/* Masque les lettres de la section Sous-Catégorie */
#mw-subcategories h3 {display: none;}

/* Masque le h2 spécifique uniquement sur les pages avec la classe page-Catégorie_PJ et PNJ */
body.page-Catégorie_PJ div.mw-category-generated h2,
body.page-Catégorie_PJ div.mw-category-generated h2 + p,
body.page-Catégorie_PNJ div.mw-category-generated h2,
body.page-Catégorie_PNJ div.mw-category-generated h2 + p {
    display: none;
}

.CategoryTreeTag {break-inside: avoid-column;}


/*====================*/
/*      TIMELINE      */
/*====================*/
.timeline {
    width: 100%;
}
	
.period1, .period2, .period3 {
    text-align: center;
    font-weight: bold;
    float: left;
    height: 4em;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2em;
    border: solid;
    border-color: #EEEEEE;
    border-left-width: 2px;
    border-right-width: 0px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    box-sizing: border-box;
}

.period1 {background-color: var(--color_gradient1);}
.period2 {background-color: var(--color_gradient2);}
.period3 {background-color: var(--color_gradient3);}


/* Timeline sans template */
.timescale {
    display: flex;
    width: 100%;
}

.timescale-year {
    width: 2.703%;
    font-size: 60%;
    text-align: center;
    margin-top: 10px;
}

.timescale-b1, .timescale-b2 {
    width: 1.351%;
    height: 7px;
    border-bottom: solid 1px black;
    box-sizing: border-box;
}

.timescale-b2 {
    width: 1.351%;
    border-left: solid 1px black;
}


/*====================*/
/*  BARRE DE NIVEAU   */
/*====================*/
.niv {
    width: 100%;
    text-align: center;
    font-weight: bold;
    display: flex;
}

.niv1, .niv2 {
    color: white;
    align-items: center;
    justify-content: center;
    border: solid 1px #EEEEEE;
}

.niv1 {background-color: var(--color_compl);}
.niv2 {background-color: var(--color_main);}


/*====================*/
/*  INPUTBOX          */
/*====================*/
.mw-inputbox-centered {
    margin-top: 0.5em;
}


/*====================*/
/*      TEST TONY     */
/*====================*/


/*====================*/
/*      TEST DAN      */
/*====================*/

.paper3 {
    background-color: #f8f5de;
    background-image: Livre-O_0.png;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.parallax {
  height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.parallax1 {
 background-image: url("http://www.jammerjun.net/gahan/images/b/b4/Lande_1.jpg");
}

/*background-image: url("http://www.jammerjun.net/gahan/Lande_1.jpg");*/