MediaWiki:Common.css
De gahan
Révision datée du 18 décembre 2025 à 11:37 par EricH (discussion | contributions)
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/*====================*/
/* 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");*/
/*====================*/
/* TEST ERIC */
/*====================*/
/**
* GAHAN WIKI - CSS PERSONNALISÉ
* Version: 1.0
* Date: Décembre 2024
*
* Ce CSS s'applique UNIQUEMENT sur la page "Accueil_Test"
* Les autres pages du wiki ne sont PAS affectées
*
* Pour l'activer sur la vraie page d'accueil plus tard,
* remplacez "page-Accueil_Test" par "page-Accueil" partout dans ce fichier
*/
/* ========================================
VARIABLES CSS - Thème Fantasy/Parchemin
======================================== */
body.page-Accueil_Test {
--color-primary: #8b4513; /* Brun cuir */
--color-secondary: #d4af37; /* Or ancien */
--color-accent: #c41e3a; /* Rouge rubis */
--color-bg-light: #f5f1e8; /* Parchemin clair */
--color-bg-dark: #2c2416; /* Brun foncé */
--color-text: #3a3023; /* Encre sépia */
--color-text-light: #6b5d4f; /* Texte secondaire */
--color-border: #c9b896; /* Bordure parchemin */
--shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.2);
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 12px;
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
}
/* ========================================
CONTENEUR PRINCIPAL
======================================== */
body.page-Accueil_Test #bodyContent {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
/* Cacher le titre "Accueil Test" */
body.page-Accueil_Test .firstHeading {
display: none;
}
/* ========================================
BANNIÈRE D'INTRODUCTION
======================================== */
body.page-Accueil_Test .intro-welcome {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, #3d2f1f 100%);
color: var(--color-bg-light);
padding: 40px;
border-radius: var(--radius-large);
margin-bottom: 40px;
box-shadow: var(--shadow-strong);
border: 3px solid var(--color-secondary);
position: relative;
overflow: hidden;
}
/* Effet texture parchemin en overlay */
body.page-Accueil_Test .intro-welcome::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
);
pointer-events: none;
}
body.page-Accueil_Test .intro-welcome h1 {
margin: 0 0 20px 0;
font-family: 'Cinzel', 'Georgia', serif;
font-size: 2.5em;
font-weight: 700;
color: var(--color-secondary);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 2px;
}
body.page-Accueil_Test .intro-welcome p {
font-size: 1.1em;
line-height: 1.7;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
/* Badges de statistiques */
body.page-Accueil_Test .stats-container {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
position: relative;
z-index: 1;
}
body.page-Accueil_Test .stat-badge {
background: rgba(212, 175, 55, 0.2);
border: 2px solid var(--color-secondary);
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
font-size: 0.95em;
color: var(--color-secondary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: all var(--transition-fast);
backdrop-filter: blur(5px);
}
body.page-Accueil_Test .stat-badge:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
background: rgba(212, 175, 55, 0.3);
}
/* ========================================
GRILLE DE SECTIONS
======================================== */
body.page-Accueil_Test .sections-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
/* ========================================
CARTES DE SECTION
======================================== */
body.page-Accueil_Test .section-card {
background: var(--color-bg-light);
border: 2px solid var(--color-border);
border-radius: var(--radius-medium);
padding: 0;
transition: all var(--transition-medium);
box-shadow: var(--shadow-soft);
overflow: hidden;
position: relative;
}
body.page-Accueil_Test .section-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-strong);
border-color: var(--color-secondary);
}
/* En-tête de carte avec image */
body.page-Accueil_Test .section-card .card-header {
position: relative;
height: 160px;
overflow: hidden;
border-bottom: 3px solid var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
}
body.page-Accueil_Test .section-card .card-header img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-medium);
}
body.page-Accueil_Test .section-card:hover .card-header img {
transform: scale(1.05);
}
/* Overlay sur l'image */
body.page-Accueil_Test .section-card .card-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(44, 36, 22, 0.5);
}
/* Titre de la carte - centré horizontalement ET verticalement */
body.page-Accueil_Test .section-card h2 {
position: relative;
z-index: 2;
margin: 0;
padding: 0 20px;
font-family: 'Cinzel', 'Georgia', serif;
font-size: 1.4em;
font-weight: 600;
color: var(--color-secondary);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
text-align: center;
}
/* Contenu de la carte */
body.page-Accueil_Test .section-card .card-content {
padding: 20px;
}
/* Listes dans les cartes */
body.page-Accueil_Test .section-card ul {
list-style: none;
padding: 0;
margin: 0;
}
body.page-Accueil_Test .section-card li {
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
transition: all var(--transition-fast);
position: relative;
padding-left: 20px;
}
body.page-Accueil_Test .section-card li:last-child {
border-bottom: none;
}
body.page-Accueil_Test .section-card li:hover {
padding-left: 25px;
background: rgba(212, 175, 55, 0.08);
}
/* Icône décorative devant chaque élément */
body.page-Accueil_Test .section-card li::before {
content: '⚔';
position: absolute;
left: 0;
color: var(--color-secondary);
font-size: 0.9em;
transition: transform var(--transition-fast);
}
body.page-Accueil_Test .section-card li:hover::before {
transform: translateX(3px);
}
/* Liens dans les cartes */
body.page-Accueil_Test .section-card a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-fast);
}
body.page-Accueil_Test .section-card a:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* ========================================
SECTION ADMINISTRATION
======================================== */
body.page-Accueil_Test .admin-section {
background: linear-gradient(135deg, #f5f1e8 0%, #e8dfc8 100%);
border: 2px dashed var(--color-border);
border-radius: var(--radius-medium);
padding: 30px;
margin-top: 40px;
}
body.page-Accueil_Test .admin-section h3 {
font-family: 'Cinzel', 'Georgia', serif;
color: var(--color-primary);
margin-top: 0;
font-size: 1.5em;
border-bottom: 2px solid var(--color-secondary);
padding-bottom: 10px;
}
body.page-Accueil_Test .admin-section ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
body.page-Accueil_Test .admin-section li {
background: white;
padding: 12px 15px;
border-radius: var(--radius-small);
border-left: 4px solid var(--color-secondary);
box-shadow: var(--shadow-soft);
transition: all var(--transition-fast);
}
body.page-Accueil_Test .admin-section li:hover {
transform: translateX(5px);
box-shadow: var(--shadow-medium);
}
body.page-Accueil_Test .admin-section a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
body.page-Accueil_Test .admin-section a:hover {
color: var(--color-accent);
}
/* ========================================
RESPONSIVE - TABLETTE
======================================== */
@media (max-width: 768px) {
body.page-Accueil_Test .sections-grid {
grid-template-columns: 1fr;
gap: 20px;
}
body.page-Accueil_Test .intro-welcome {
padding: 30px 20px;
}
body.page-Accueil_Test .intro-welcome h1 {
font-size: 2em;
}
body.page-Accueil_Test .section-card .card-header {
height: 140px;
}
body.page-Accueil_Test .admin-section ul {
grid-template-columns: 1fr;
}
}
/* ========================================
RESPONSIVE - MOBILE
======================================== */
@media (max-width: 480px) {
body.page-Accueil_Test #bodyContent {
padding: 10px;
}
body.page-Accueil_Test .intro-welcome {
padding: 20px 15px;
margin-bottom: 25px;
}
body.page-Accueil_Test .intro-welcome h1 {
font-size: 1.6em;
letter-spacing: 1px;
}
body.page-Accueil_Test .stats-container {
gap: 10px;
}
body.page-Accueil_Test .stat-badge {
padding: 8px 16px;
font-size: 0.85em;
}
body.page-Accueil_Test .section-card h2 {
font-size: 1.2em;
}
body.page-Accueil_Test .section-card .card-content {
padding: 15px;
}
body.page-Accueil_Test .admin-section {
padding: 20px 15px;
}
}
/* ========================================
AMÉLIORATION DES POLICES
======================================== */
/* Import de la police Cinzel pour les titres (style médiéval élégant) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
/* Amélioration de la lisibilité générale */
body.page-Accueil_Test {
font-family: 'Georgia', 'Times New Roman', serif;
line-height: 1.6;
color: var(--color-text);
}
/* ========================================
ANIMATIONS SUBTILES
======================================== */
/* Animation d'apparition au chargement */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.page-Accueil_Test .intro-welcome {
animation: fadeInUp 0.6s ease-out;
}
body.page-Accueil_Test .section-card {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
/* Délai progressif pour chaque carte */
body.page-Accueil_Test .section-card:nth-child(1) { animation-delay: 0.1s; }
body.page-Accueil_Test .section-card:nth-child(2) { animation-delay: 0.2s; }
body.page-Accueil_Test .section-card:nth-child(3) { animation-delay: 0.3s; }
body.page-Accueil_Test .section-card:nth-child(4) { animation-delay: 0.4s; }
body.page-Accueil_Test .section-card:nth-child(5) { animation-delay: 0.5s; }
body.page-Accueil_Test .section-card:nth-child(6) { animation-delay: 0.6s; }
body.page-Accueil_Test .section-card:nth-child(7) { animation-delay: 0.7s; }
body.page-Accueil_Test .section-card:nth-child(8) { animation-delay: 0.8s; }
/* ========================================
NOTES D'IMPLÉMENTATION
======================================== */
/*
POUR ACTIVER CE CSS SUR LA VRAIE PAGE D'ACCUEIL :
1. Testez d'abord sur votre page Accueil_Test
2. Quand vous êtes satisfait, faites un rechercher/remplacer :
- Remplacez "page-Accueil_Test" par "page-Accueil"
3. Sauvegardez et c'est prêt !
POUR DÉSACTIVER :
- Supprimez simplement ce fichier CSS ou commentez son import
COMPATIBILITÉ :
- Fonctionne sur tous les navigateurs modernes
- Responsive (mobile, tablette, desktop)
- Pas de JavaScript requis
*/
